body {
   background-color: var(--bg-color);
}

:root {
   /* ==========================
       BRAND COLORS
    ========================== */
   --primary-color: #246D8F;
   --primary-hover: #08698F;
   --primary-light: #EEF7FD;

   /* ==========================
       BACKGROUNDS
    ========================== */
   --white-color: #FFFFFF;
   --bg-color: #F7F9FB;
   --input-bg: #F3F3F3;
   --table-head-bg: #F8FAFC;
   --card-bg: #FFFFFF;

   /* ==========================
       TEXT COLORS
    ========================== */
   --text-dark: #1E293B;
   --text-light: #64748B;
   --input-text: #555555;
   --input-placeholder: #888888;

   /* ==========================
       BORDERS & SHADOWS
    ========================== */
   --border-color: #DCE3EA;
   --divider-color: #E9EDF2;
   --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);

   /* ==========================
       BORDER RADIUS
    ========================== */
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 20px;

   /* ==========================
       STATUS COLORS
    ========================== */
   --success-color: #16A34A;
   --success-bg: #EAFBF0;

   --warning-color: #D97706;
   --warning-bg: #FEF3C7;

   --danger-color: #EF4444;
   --danger-bg: #FFE8E8;

   --info-color: #246D8F;
   --info-bg: #EEF7FD;

   /* ==========================
       INSTALLMENTS & PAYMENTS
    ========================== */
   --wallet-color: #54C4B5;
   --wallet-hover: #40ADA7;

   --amount-border: #A9CCE3;
   --progress-track: #E5EEF6;

   /* ==========================
       SELECTION COLORS
    ========================== */
   --selection-color: #0D6EFD;
   --selection-bg: #F5F9FF;

   /* ==========================
       EXTRA COLORS
    ========================== */
   --sold-color: #E8A317;
   --sold-bg: #FFF7E6;

   --copy-btn-color: #8EB4C8;
   --wallet-widget-bg: #F8FBFC;

   /* ==========================
       GENERAL SETTINGS
    ========================== */
   --transition: all 0.3s ease;
}


:root {
   --navbar-primary: #246D8F;
   --navbar-primary-dark: #194f6a;
   --navbar-text: #243b53;
   --navbar-muted: #718096;
   --navbar-border: #e8edf3;
   --navbar-bg: #ffffff;
}


/* Navbar */
.app-navbar {
   position: sticky;
   top: 0;
   z-index: 1030;
   width: 100%;
   background: var(--navbar-bg);
   border-bottom: 1px solid var(--navbar-border);
   box-shadow: 0 3px 14px rgb(20 50 70 / 4%);
   font-family: "Cairo", sans-serif;
}

.navbar-inner {
   width: 100%;
   min-height: 76px;
   padding: 12px 28px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.navbar-brand {
   display: inline-flex;
   align-items: center;
   gap: 11px;
   color: var(--navbar-text);
   text-decoration: none;
   flex-shrink: 0;
}

.navbar-brand:hover {
   color: var(--navbar-primary);
}

.brand-logo {
   width: 45px;
   height: 45px;
   display: grid;
   place-items: center;
   color: white;
   background: linear-gradient(135deg,
         var(--navbar-primary),
         var(--navbar-primary-dark));
   border-radius: 13px;
   font-size: 22px;
}

.brand-text {
   display: flex;
   flex-direction: column;
   line-height: 1.5;
}

.brand-text strong {
   font-size: 19px;
   font-weight: 800;
}

.brand-text small {
   color: var(--navbar-muted);
   font-size: 11px;
}

.navbar-menu {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.navbar-links {
   display: flex;
   align-items: center;
   gap: 7px;
}

.navbar-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   padding: 11px 15px;
   color: #526579;
   text-decoration: none;
   border-radius: 10px;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
   transition: background .2s ease, color .2s ease;
}

.navbar-link i {
   font-size: 15px;
}

.navbar-link:hover {
   color: var(--navbar-primary);
   background: #f0f7fa;
}

.navbar-link.active {
   color: var(--navbar-primary);
   background: #eaf4f8;
   font-weight: 800;
}

.navbar-user {
   display: flex;
   align-items: center;
   gap: 10px;
   padding-right: 18px;
   border-right: 1px solid var(--navbar-border);
   flex-shrink: 0;
}

.user-avatar {
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   color: var(--navbar-primary);
   background: #edf5f8;
   border-radius: 50%;
}

.user-info {
   display: flex;
   flex-direction: column;
   line-height: 1.6;
   min-width: 75px;
}

.user-info strong {
   color: var(--navbar-text);
   font-size: 12px;
   font-weight: 800;
}

.user-info small {
   color: var(--navbar-muted);
   font-size: 10px;
}

.navbar-user form {
   margin: 0;
}

.navbar-logout {
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border: 1px solid #f3d8d6;
   border-radius: 10px;
   color: #b42318;
   background: #fff7f6;
   transition: .2s ease;
}

.navbar-logout:hover {
   background: #b42318;
   color: #fff;
}

.navbar-toggle {
   display: none;
   width: 42px;
   height: 42px;
   border: 1px solid var(--navbar-border);
   border-radius: 10px;
   color: var(--navbar-primary);
   background: white;
   font-size: 19px;
}

@media (max-width: 992px) {
   .navbar-inner {
      min-height: 68px;
      padding: 10px 16px;
      flex-wrap: wrap;
      gap: 12px;
   }

   .navbar-toggle {
      display: grid;
      place-items: center;
      margin-right: auto;
   }

   .navbar-menu {
      display: none;
      flex: 0 0 100%;
      align-items: stretch;
      flex-direction: column;
      gap: 16px;
      padding: 12px 0 4px;
   }

   .navbar-menu.is-open {
      display: flex;
   }

   .navbar-links {
      flex-direction: column;
      align-items: stretch;
      gap: 5px;
   }

   .navbar-link {
      justify-content: flex-start;
      width: 100%;
      padding: 13px 15px;
   }

   .navbar-user {
      padding: 14px 0 0;
      border-right: 0;
      border-top: 1px solid var(--navbar-border);
   }

   .user-info {
      flex: 1;
   }
}

@media (min-width: 993px) and (max-width: 1150px) {
   .navbar-inner {
      padding-inline: 16px;
      gap: 12px;
   }

   .navbar-links {
      gap: 2px;
   }

   .navbar-link {
      padding-inline: 10px;
      gap: 6px;
   }
}