/* ==========================================================
   SouqFollow visual layer
   Bootstrap 5.3 handles layout, spacing and responsiveness.
   This file only adds brand tokens and visual polish.
   ========================================================== */

:root {
  --sf-primary: #f59a23;
  --sf-primary-hover: #e88712;
  --sf-primary-soft: #fff4e5;
  --sf-surface: #ffffff;
  --sf-border: #e9e2d8;
  --sf-sidebar-width: 272px;
  --sf-header-height: 72px;

  --bs-primary: var(--sf-primary);
  --bs-primary-rgb: 245, 154, 35;
  --bs-link-color: #d97706;
  --bs-link-hover-color: var(--sf-primary-hover);
  --bs-body-font-family: "Tajawal", system-ui, sans-serif;
  --bs-body-bg: #fbf9f6;
  --bs-border-color: var(--sf-border);
  --bs-border-radius: .75rem;
}

[data-bs-theme="dark"] {
  --sf-surface: #1e1912;
  --sf-border: #30291f;
  --bs-body-bg: #17140f;
  --bs-border-color: var(--sf-border);
  --bs-tertiary-bg: #1b1711;
}

body.sf-theme {
  min-height: 100vh;
}

.sf-theme h1,
.sf-theme h2,
.sf-theme h3,
.sf-theme h4,
.sf-theme h5,
.sf-theme h6,
.sf-theme .navbar-brand {
  font-family: "Cairo", system-ui, sans-serif;
}

.sf-theme .min-w-0 {
  min-width: 0;
}

.sf-logo {
  display: block;
  width: auto;
  max-width: 180px;
  height: 38px;
  object-fit: contain;
}

.sf-header-height {
  min-height: var(--sf-header-height);
}

.sf-sidebar {
  --bs-offcanvas-width: min(86vw, var(--sf-sidebar-width));
  background: var(--sf-surface);
}

.sf-sidebar .nav-link {
  color: var(--bs-secondary-color);
  border-radius: var(--bs-border-radius);
  transition: background .15s ease, color .15s ease;
}

.sf-sidebar .nav-link:hover {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
}

.sf-sidebar .nav-link.active {
  color: #d97706;
  background: var(--sf-primary-soft);
}

[data-bs-theme="dark"] .sf-sidebar .nav-link.active {
  color: #ffb24d;
  background: rgba(245, 154, 35, .13);
}

.sf-avatar,
.sf-icon-button {
  width: 42px;
  height: 42px;
}

.sf-avatar {
  color: #fff;
  background: var(--sf-primary);
  font-family: "Cairo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

.sf-sidebar-user {
  transition: background .15s ease;
}

.sf-sidebar-user:hover {
  background: var(--bs-tertiary-bg);
}

.sf-account-menu {
  width: min(290px, calc(100vw - 1.5rem));
}

.sf-theme .btn-primary {
  --bs-btn-bg: var(--sf-primary);
  --bs-btn-border-color: var(--sf-primary);
  --bs-btn-hover-bg: var(--sf-primary-hover);
  --bs-btn-hover-border-color: var(--sf-primary-hover);
  --bs-btn-active-bg: #d97706;
  --bs-btn-active-border-color: #d97706;
}

.sf-theme .dropdown-menu {
  --bs-dropdown-border-color: var(--sf-border);
  --bs-dropdown-link-active-bg: var(--sf-primary);
  border-radius: .8rem;
}

.sf-theme .card {
  border-color: var(--sf-border);
  box-shadow: none;
}

#notify-wrapper {
  z-index: 1090;
  max-width: calc(100vw - 2rem);
  border-radius: var(--bs-border-radius);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .25s ease, transform .25s ease;
}

#notify-wrapper.sf-notify-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 992px) {
  .sf-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1030;
    width: var(--sf-sidebar-width);
    visibility: visible !important;
    transform: none !important;
  }

  .sf-app {
    margin-inline-start: var(--sf-sidebar-width);
  }
}

@media (max-width: 991.98px) {
  #guestNavbar .dropdown-menu {
    position: static;
    width: max-content;
    min-width: 11rem;
    margin-top: .5rem;
  }
}