/* ============================================================
   MODERN.CSS — Unlimited Studio · Aurora Design System
   ============================================================ */

/* ============================================================
   § 1  DESIGN TOKENS
   ============================================================ */
:root {
  /* ── Brand ── */
  --p:          #3b5bdb;   /* primary – indigo */
  --p-dk:       #2f4ac5;
  --p-lt:       #5c7be8;
  --p-soft:     #eef1fc;
  --p-glow:     rgba(59,91,219,.22);

  /* ── Sidebar (light) ── */
  --sb-bg:      #f7f8ff;
  --sb-border:  #e4e8f5;
  --sb-text:    #3c4a5e;
  --sb-muted:   #8593a9;
  --sb-hover:   #eef0fc;
  --sb-active-bg:   #3b5bdb;
  --sb-active-text: #ffffff;

  /* ── Navbar ── */
  --nb-brand-bg: #f7f8ff;   /* matches sidebar */
  --nb-bg:       #ffffff;
  --nb-border:   #e8ecf4;

  /* ── Layout ── */
  --body-bg: #edf0f9;
  --card-bg: #ffffff;

  /* ── Borders ── */
  --bd:    #e3e8f0;
  --bd-lt: #f0f3fa;

  /* ── Text ── */
  --t1: #111827;
  --t2: #374151;
  --t3: #6b7280;
  --t4: #9ca3af;

  /* ── Shadows ── */
  --s-xs: 0 1px 2px rgba(15,23,42,.06);
  --s-sm: 0 1px 4px rgba(15,23,42,.07), 0 2px 8px rgba(15,23,42,.04);
  --s-md: 0 4px 16px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.05);
  --s-lg: 0 12px 36px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
  --s-xl: 0 24px 64px rgba(15,23,42,.12), 0 8px 20px rgba(15,23,42,.07);
  --s-p:  0 6px 22px rgba(59,91,219,.38);

  /* ── Radius ── */
  --r-xs:  4px;
  --r-sm:  7px;
  --r-md:  11px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 28px;
  --r-pill:999px;

  /* ── Motion ── */
  --e:    0.16s ease;
  --e-md: 0.26s ease;

  /* ── Typography ── */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   § 2  GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font) !important;
  background: var(--body-bg);
  color: var(--t1);
  font-size: 13.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

p,span,label,td,th,a,li,input,select,textarea,button,div {
  font-family: var(--font);
}

.text-muted { color: var(--t3) !important; }
.font-weight-bold { font-weight: 700 !important; }

/* ============================================================
   § 3  LAYOUT SHELLS
   ============================================================ */
.container-scroller { background: var(--body-bg); }
.page-body-wrapper  { background: var(--body-bg); }
.content-wrapper    { background: var(--body-bg); padding: 2rem 2.25rem; }

/* ============================================================
   § 4  SIDEBAR  ·  Light, high-contrast, bulletproof
   ============================================================ */
.sidebar {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-border);
  box-shadow: 3px 0 18px rgba(15,23,42,.05);
}

.sidebar .nav { padding: 0.75rem 0; }
.sidebar .nav .nav-item { position: relative; }

/* ── "NAVIGATION" section label ── */
.sidebar > ul.nav::before {
  content: 'NAVIGATION';
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--t4);
  padding: 0.6rem 1.4rem 0.4rem;
}

/* ── default link ── */
.sidebar .nav .nav-item .nav-link {
  color: var(--sb-text) !important;
  padding: 0.62rem 1rem;
  margin: 1px 10px;
  border-radius: var(--r-md);
  display: flex;           /* NO !important — icon-only mode needs display:block to win */
  align-items: center;
  /* NO position:relative — would hijack containing block for menu-title flyout */
  transition: background var(--e), color var(--e);
  font-size: 0.825rem;
  font-weight: 500;
  background: transparent;
}

/* ── icon ── */
.sidebar .nav .nav-item .nav-link i.menu-icon {
  color: var(--sb-muted) !important;
  font-size: 1.1rem !important;
  margin-right: 0.75rem;
  flex-shrink: 0;
  transition: color var(--e);
}

/* ── label — flex:1 fills remaining space, naturally pushes arrow to right ── */
.sidebar .nav .nav-item .nav-link .menu-title {
  color: inherit !important;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* ── collapse arrow ──
   The glyph used is \e649 (ti-angle-right, points RIGHT).
   style.css swaps it to \e64b (ti-angle-LEFT) on .active — we must override
   the ::before content to keep \e649 in all states, then use rotate() for open.

   Closed:  \e649 rotate(0deg)  = RIGHT →
   Open:    \e649 rotate(90deg) = DOWN  ↓               */

/* Base: always use the right-arrow glyph */
.sidebar .nav .nav-item .nav-link i.menu-arrow::before,
.sidebar .nav .nav-item .nav-link i.menu-arrow.menu-arrow::before {
  content: "\e649" !important;
  transition: transform var(--e);
}

/* Base <i> styles */
.sidebar .nav .nav-item .nav-link i.menu-arrow.menu-arrow {
  color: var(--sb-muted) !important;
  opacity: 0.6;
  font-size: 0.65rem !important;
  flex-shrink: 0;
  margin: 0 0.1rem 0 0.25rem !important;
  transition: color var(--e), opacity var(--e);
}

/* Expanded (open): rotate the ::before glyph 90° → points DOWN */
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow::before,
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow.menu-arrow::before {
  transform: rotate(90deg);
}

/* ══ HOVER ══ */
.sidebar .nav .nav-item .nav-link:hover {
  background: var(--sb-hover) !important;
  color: var(--p) !important;
}
.sidebar .nav .nav-item .nav-link:hover i.menu-icon {
  color: var(--p) !important;
}
.sidebar .nav .nav-item .nav-link:hover .menu-title {
  color: var(--p) !important;
}
.sidebar .nav .nav-item .nav-link:hover i.menu-arrow.menu-arrow {
  color: var(--p) !important;
  opacity: 1;
}

/* ══ ACTIVE — solid blue pill, WHITE text/icons ══ */
.sidebar .nav .nav-item.active > .nav-link {
  background: var(--sb-active-bg) !important;
  color: var(--sb-active-text) !important;
  box-shadow: 0 4px 14px rgba(59,91,219,.35) !important;
  font-weight: 600 !important;
}
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link i.menu-icon,
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link .menu-arrow,
.sidebar .nav .nav-item.active > .nav-link i.menu-arrow.menu-arrow {
  color: #ffffff !important;
}
/* Keep arrow glyph as right-arrow on active (style.css changes it to \e64b = left) */
.sidebar .nav .nav-item.active > .nav-link i.menu-arrow::before,
.sidebar .nav .nav-item.active > .nav-link i.menu-arrow.menu-arrow::before {
  content: "\e649" !important;
  transform: rotate(0deg);
}
/* Active + expanded: rotate down */
.sidebar .nav .nav-item.active > .nav-link[aria-expanded="true"] i.menu-arrow::before,
.sidebar .nav .nav-item.active > .nav-link[aria-expanded="true"] i.menu-arrow.menu-arrow::before {
  content: "\e649" !important;
  transform: rotate(90deg);
}
/* nav-item background (style.css sets it, we clear it so nav-link bg shows) */
.sidebar .nav:not(.sub-menu) > .nav-item.active {
  background: transparent !important;
  border-radius: 0 !important;
}

/* ── expanded parent (not active) ── */
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] {
  background: var(--sb-hover) !important;
  color: var(--p) !important;
  font-weight: 600;
}
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] i.menu-icon,
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] .menu-title {
  color: var(--p) !important;
}
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] i.menu-arrow.menu-arrow {
  opacity: 1;
  color: var(--p) !important;
}

/* ── sub-menu ── */
.sidebar .nav.sub-menu {
  background: transparent !important;
  padding: 0.2rem 0 0.4rem 2.65rem;
  margin: 0 10px;
}
.sidebar .nav.sub-menu .nav-item .nav-link {
  color: var(--sb-text) !important;
  font-size: 0.79rem;
  padding: 0.42rem 0.7rem;
  margin: 1px 0;
  border-radius: var(--r-sm);
  background: transparent;
}
.sidebar .nav.sub-menu .nav-item .nav-link:hover {
  background: var(--sb-hover) !important;
  color: var(--p) !important;
}
.sidebar .nav.sub-menu .nav-item .nav-link.active {
  background: var(--sb-active-bg) !important;
  color: #ffffff !important;
}
.sidebar .nav.sub-menu .nav-item::before { background: var(--bd); }

/* ══ ICON-ONLY (collapsed) MODE ══ */
@media (min-width: 992px) {

  /* ── Hide the "NAVIGATION" label — bleeds out of 70px sidebar ── */
  .sidebar-icon-only .sidebar > ul.nav::before {
    display: none !important;
  }

  /* ── Restore block/centred layout for icon ── */
  .sidebar-icon-only .sidebar .nav .nav-item .nav-link {
    display: block !important;
    text-align: center !important;
    padding: 0.75rem 0.5rem !important;
    margin: 1px 4px !important;
    position: static !important;  /* must NOT be relative — flyout .menu-title
                                     must position relative to .nav-item, not .nav-link */
  }

  .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 1.25rem !important;
  }

  /* Active pill in icon-only mode */
  .sidebar-icon-only .sidebar .nav .nav-item.active > .nav-link {
    background: var(--sb-active-bg) !important;
    box-shadow: none !important;
    border-radius: var(--r-sm) !important;
  }
  .sidebar-icon-only .sidebar .nav .nav-item.active > .nav-link i.menu-icon {
    color: #ffffff !important;
  }

  /* ══ HOVER-OPEN FLYOUT ══
     style.css already positions both panels perfectly at left:70px / width:220px.
     Only override background and text colors — nothing structural — so the
     original layout is preserved and nothing gets misaligned.            */

  /* ── Label (header) panel ── */
  .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title {
    background: var(--sb-bg) !important;
    color: var(--t1) !important;
  }

  /* Hover of the label */
  .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link:hover .menu-title {
    background: var(--sb-hover) !important;
    color: var(--p) !important;
  }

  /* ── Sub-menu panel ── */
  .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
  .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
    background: var(--sb-bg) !important;
  }

  /* ── Sub-menu links ── */
  .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse .sub-menu .nav-item .nav-link {
    color: var(--sb-text) !important;
    background: transparent !important;
    text-align: left !important;
  }
  .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse .sub-menu .nav-item .nav-link:hover {
    background: var(--sb-hover) !important;
    color: var(--p) !important;
  }
}

/* ============================================================
   § 5  NAVBAR
   ============================================================ */
.navbar {
  box-shadow: var(--s-sm);
  border-bottom: 1px solid var(--nb-border);
}

/* Brand area: same tint as sidebar so they read as one panel */
.navbar .navbar-brand-wrapper {
  background: var(--nb-brand-bg);
  border-bottom: 1px solid var(--sb-border);
  border-right: 1px solid var(--sb-border);
}

.navbar .navbar-menu-wrapper {
  background: var(--nb-bg);
  border-bottom: 1px solid var(--nb-border);
}

.navbar .navbar-menu-wrapper .navbar-toggler {
  color: var(--t3);
  transition: color var(--e);
}
.navbar .navbar-menu-wrapper .navbar-toggler:hover { color: var(--p); }

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
  color: var(--t3);
  transition: color var(--e);
}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link:hover { color: var(--p); }

/* Avatar */
#top_photo,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile img {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--bd);
  object-fit: cover;
  transition: border-color var(--e), box-shadow var(--e);
}
#top_photo:hover,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile img:hover {
  border-color: var(--p);
  box-shadow: 0 0 0 3px var(--p-soft);
}

/* Notification count badge */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item .count {
  background: #ef4444;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 1px 4px;
  min-width: 16px;
  text-align: center;
}

/* ============================================================
   § 6  CARDS
   ============================================================ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--s-sm);
  transition: box-shadow var(--e-md), transform var(--e-md);
}
.card:hover { box-shadow: var(--s-md); transform: translateY(-1px); }
.card .card-body { padding: 1.5rem 1.625rem; }
.card .card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 1.1rem;
  letter-spacing: -0.01em;
}

/* ── Dashboard stat cards ── */
.card1,.card2,.card3,.card4 {
  border-radius: var(--r-lg);
  border: none;
  overflow: hidden;
  position: relative;
  box-shadow: var(--s-md);
  transition: box-shadow var(--e-md), transform var(--e-md);
  cursor: pointer;
}
.card1:hover,.card2:hover,.card3:hover,.card4:hover {
  box-shadow: var(--s-lg);
  transform: translateY(-4px) scale(1.015);
}

/* decorative shapes */
.card1::after,.card2::after,.card3::after,.card4::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  pointer-events: none;
}
.card1::before,.card2::before,.card3::before,.card4::before {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}

/* gradients */
.card1 { background: linear-gradient(135deg, #20c997 0%, #0ca678 100%); }
.card2 { background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%); }
.card3 { background: linear-gradient(135deg, #4dabf7 0%, #1c7ed6 100%); }
.card4 { background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%); }

.card-body1,.card-body2,.card-body3,.card-body4 { padding: 1.5rem 1.75rem; }

/* header row: label left, icon right */
.card-body1 .d-flex,.card-body2 .d-flex,.card-body3 .d-flex,.card-body4 .d-flex {
  align-items: center;
}

/* stat labels */
.card-body1 h4,.card-body2 h4,.card-body3 h4,.card-body4 h4 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,.8);
  margin: 0;
}

/* legacy .text class kept for compatibility */
.card-body1 p.text,.card-body2 p.text,.card-body3 p.text,.card-body4 p.text {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0.55rem 0 0;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* icon */
.card-body1 i.icon-lg,.card-body2 i.icon-lg,
.card-body3 i.icon-lg,.card-body4 i.icon-lg {
  font-size: 2rem;
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
}

/* big stat number */
.stat-number {
  font-size: 2.75rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0.5rem 0 0 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

/* helper label below number */
.stat-label {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,.72) !important;
  margin: 0.3rem 0 0 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ============================================================
   § 7  FORMS & INPUTS
   ============================================================ */
.form-control {
  font-family: var(--font);
  font-size: 0.875rem;
  height: auto;
  padding: 0.6rem 0.95rem;
  color: var(--t1);
  background: #fff;
  border: 1.5px solid var(--bd);
  border-radius: var(--r-md);
  transition: border-color var(--e), box-shadow var(--e);
}
.form-control:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 3.5px var(--p-soft);
  outline: none;
  background: #fff;
}
.form-control::placeholder { color: var(--t4); font-size: 0.875rem; }
.form-control-lg { padding: 0.72rem 1rem; font-size: 0.9375rem; }
.form-control:disabled,.form-control[readonly] {
  background: var(--bd-lt);
  color: var(--t3);
  border-color: var(--bd);
}

.input-group-text {
  font-family: var(--font);
  font-size: 0.875rem;
  border: 1.5px solid var(--bd);
  border-radius: var(--r-md);
  background: var(--bd-lt);
  color: var(--t3);
}

/* group radius corrections */
.input-group > .form-control:not(:first-child),
.input-group > .input-group-prepend + .form-control {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn {
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;
}
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
  border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0;
}

label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 0.35rem;
  display: block;
}
.form-group { margin-bottom: 1.25rem; }

/* select arrow */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 11px;
  padding-right: 2.5rem;
}

textarea.form-control { resize: vertical; min-height: 90px; }

/* ============================================================
   § 8  BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  border-radius: var(--r-md);
  padding: 0.52rem 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background var(--e), border-color var(--e), box-shadow var(--e), transform .1s ease;
}
.btn:active { transform: translateY(1px); }

/* primary */
.btn-primary { background: var(--p); border-color: var(--p); color: #fff; }
.btn-primary:hover,.btn-primary:focus {
  background: var(--p-dk); border-color: var(--p-dk);
  box-shadow: var(--s-p); color: #fff;
}
.btn-primary:not(:disabled):not(.disabled):active { background: var(--p-dk); border-color: var(--p-dk); }

/* success */
.btn-success { background: #0ca678; border-color: #0ca678; color: #fff; }
.btn-success:hover,.btn-success:focus {
  background: #099268; border-color: #099268;
  box-shadow: 0 6px 20px rgba(12,166,120,.35); color: #fff;
}

/* info */
.btn-info { background: #1c7ed6; border-color: #1c7ed6; color: #fff; }
.btn-info:hover,.btn-info:focus {
  background: #1971c2; border-color: #1971c2;
  box-shadow: 0 6px 20px rgba(28,126,214,.35); color: #fff;
}

/* warning */
.btn-warning { background: #f76707; border-color: #f76707; color: #fff; }
.btn-warning:hover { background: #e8590c; border-color: #e8590c; color: #fff; }

/* danger */
.btn-danger { background: #c92a2a; border-color: #c92a2a; color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

/* outline */
.btn-outline-primary { color: var(--p); border-color: var(--p); background: transparent; }
.btn-outline-primary:hover { background: var(--p); color: #fff; box-shadow: var(--s-p); }

/* light */
.btn-light {
  background: var(--card-bg);
  border: 1.5px solid var(--bd);
  color: var(--t2);
  box-shadow: var(--s-xs);
}
.btn-light:hover { background: var(--bd-lt); color: var(--t1); }

.btn.btn-rounded { border-radius: var(--r-pill); }
.btn.btn-icon-text .btn-icon-prepend { margin-right: 0.25rem; }

/* ============================================================
   § 9  TABLES
   ============================================================ */
.table {
  font-family: var(--font);
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  font-size: 0.695rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t3);
  background: var(--bd-lt);
  border-top: none;
  border-bottom: 2px solid var(--bd);
  padding: 0.72rem 1rem;
  white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: var(--r-sm); }
.table thead th:last-child  { border-top-right-radius: var(--r-sm); }

.table td {
  padding: 0.875rem 1rem;
  vertical-align: middle;
  border-top: 1px solid var(--bd-lt);
  font-size: 0.875rem;
  color: var(--t1);
}
.table tbody tr:last-child td { border-bottom: 1px solid var(--bd-lt); }

.table-hover tbody tr { transition: background var(--e); }
.table-hover tbody tr:hover { background: #f5f7ff; }
.table-responsive { border-radius: var(--r-md); overflow: hidden; }
.table.table-borderless td { border-top: none; padding: 0.45rem 0.2rem; font-size: 0.84rem; }

/* ============================================================
   § 10  BADGES
   ============================================================ */
.badge, label.badge {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 0.3em 0.75em;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-success   { background: #d3f9d8; color: #2b8a3e; }
.badge-info      { background: #d0ebff; color: #1971c2; }
.badge-warning   { background: #fff3bf; color: #e67700; }
.badge-danger    { background: #ffe3e3; color: #c92a2a; }
.badge-primary   { background: var(--p-soft); color: var(--p-dk); }
.badge-secondary { background: #f1f3f9; color: #495057; }

/* ============================================================
   § 11  ALERTS
   ============================================================ */
.alert {
  border-radius: var(--r-md);
  border: none;
  border-left: 4px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.9rem 1.25rem;
  margin-bottom: 1rem;
}
.alert-info    { background: #e7f5ff; color: #1864ab; border-left-color: #339af0; }
.alert-warning { background: #fff9db; color: #e67700; border-left-color: #fcc419; }
.alert-success { background: #ebfbee; color: #2b8a3e; border-left-color: #51cf66; }
.alert-danger  { background: #fff5f5; color: #c92a2a; border-left-color: #fa5252; }

/* ============================================================
   § 12  DROPDOWN MENUS
   ============================================================ */
.dropdown-menu {
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--s-xl);
  padding: 0.45rem;
  min-width: 175px;
  background: #fff;
  animation: menuIn .14s ease;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.dropdown-item {
  border-radius: var(--r-sm);
  padding: 0.48rem 0.8rem;
  font-size: 0.875rem;
  color: var(--t2);
  transition: background var(--e), color var(--e);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dropdown-item i { font-size: 0.9rem; width: 16px; color: var(--t3); }
.dropdown-item:hover,.dropdown-item:focus { background: var(--p-soft); color: var(--p); }
.dropdown-item:hover i { color: var(--p); }

.navbar-dropdown.dropdown-menu { border-radius: var(--r-lg); margin-top: 0.5rem; }
.navbar-dropdown .dropdown-header {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--t4);
  padding: 0.3rem 0.8rem 0.55rem;
}
.navbar-dropdown .item-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   § 13  PROGRESS BARS
   ============================================================ */
.progress {
  background: var(--bd);
  border-radius: var(--r-pill);
  height: 6px;
  overflow: hidden;
}
.progress-bar { border-radius: var(--r-pill); transition: width .6s ease; }
.progress-bar.bg-primary { background: var(--p) !important; }
.progress-md { height: 8px; }

/* ============================================================
   § 14  FOOTER
   ============================================================ */
.footer {
  background: var(--card-bg);
  border-top: 1px solid var(--bd);
  padding: 1rem 2.25rem;
  margin-top: 0;
}
.footer .text-muted { font-size: 0.8rem; color: var(--t3) !important; }
.footer a { color: var(--p); text-decoration: none; }
.footer a:hover { color: var(--p-dk); text-decoration: underline; }

/* ============================================================
   § 15  LOGIN PAGE
   ============================================================ */
.auth.auth-img-bg { padding: 0; min-height: 100vh; background: #e8ecf9; }

/* full-page wrapper */
.auth .content-wrapper {
  background: transparent !important;
  padding: 0;
}

/* Left panel — centered white card */
.auth .auth-form-transparent {
  background: #ffffff;
  border-radius: var(--r-xl);
  padding: 3rem 3.25rem !important;
  box-shadow: var(--s-xl);
  max-width: 460px;
  width: 100%;
  margin: auto;
}

/* ── Right photo panel — keep awf-team.jpeg, add overlay ── */
.auth .login-half-bg {
  background: url("../images/auth/awf-team.jpeg") center center / cover no-repeat !important;
  position: relative;
}
/* gradient overlay: transparent top → blue tint → dark bottom */
.auth .login-half-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10,18,50,.15)  0%,
    rgba(59,91,219,.40) 55%,
    rgba(10,18,50,.80) 100%
  );
}
.auth .login-half-bg p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.85);
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 0;
}
.auth .login-half-bg p a { color: rgba(255,255,255,.95); text-decoration: underline; }

/* logo */
.auth .brand-logo { margin-bottom: 2rem; }
.auth .brand-logo img { width: 148px; }

/* headings */
.auth .auth-form-transparent h4 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 0.2rem;
  letter-spacing: -0.02em;
}
.auth .auth-form-transparent h6 {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--t3);
  margin-bottom: 1.75rem;
}

/* inputs */
.auth .auth-form-transparent .form-control,
.auth .auth-form-transparent .input-group-text {
  border-color: var(--bd);
  background: var(--bd-lt);
}
.auth .auth-form-transparent .form-control:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 3px var(--p-soft);
  background: #fff;
}

/* input group border radius for login fields */
.auth .auth-form-transparent .input-group .input-group-prepend .input-group-text {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--r-md);
  border-bottom-left-radius: var(--r-md);
}
.auth .auth-form-transparent .input-group .form-control.border-left-0 {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}

/* login button */
.auth .auth-form-transparent .btn.auth-form-btn {
  background: var(--p);
  border-color: var(--p);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  padding: 0.85rem 1rem;
  color: #fff;
  text-transform: uppercase;
  transition: background var(--e), box-shadow var(--e);
}
.auth .auth-form-transparent .btn.auth-form-btn:hover {
  background: var(--p-dk);
  border-color: var(--p-dk);
  box-shadow: var(--s-p);
}

/* helper links */
.auth-link,.auth .auth-link {
  color: var(--p) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.auth-link:hover,.auth .auth-link:hover {
  color: var(--p-dk) !important;
  text-decoration: underline;
}

/* ============================================================
   § 16  PAGE HEADER (title + action button row)
   ============================================================ */
.d-flex.justify-content-between.align-items-center {
  margin-bottom: 0.25rem;
}
.d-flex.justify-content-between.align-items-center h4 {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -0.025em;
  margin-bottom: 0;
}

/* ============================================================
   § 17  ACTION ICONS IN TABLES
   ============================================================ */
.ti-eye.text-primary,.ti-pencil.text-primary,.ti-trash.text-primary,
.ti-folder.text-primary,.ti-receipt.text-primary,.ti-medall.text-primary,
.ti-ink-pen.text-primary,.ti-list-ol.text-primary,.ti-lock.text-primary,
.ti-unlock.text-primary,.ti-settings.text-primary,.ti-user.text-primary,
.ti-power-off.text-primary,.ti-shield.text-primary,
.ti-thumb-up.text-primary,.ti-thumb-down.text-primary {
  color: var(--p) !important;
  cursor: pointer;
  transition: color var(--e), transform .12s ease, opacity var(--e);
}
.ti-eye.text-primary:hover,.ti-pencil.text-primary:hover,
.ti-trash.text-primary:hover,.ti-folder.text-primary:hover,
.ti-receipt.text-primary:hover,.ti-medall.text-primary:hover,
.ti-thumb-up.text-primary:hover,.ti-thumb-down.text-primary:hover,
.ti-lock.text-primary:hover,.ti-unlock.text-primary:hover,
.ti-settings.text-primary:hover,.ti-ink-pen.text-primary:hover {
  color: var(--p-dk) !important;
  transform: scale(1.18);
  opacity: 1;
}

/* ============================================================
   § 18  DASHBOARD — indicators card
   ============================================================ */
.card.position-relative h1 a {
  color: var(--p) !important;
  font-weight: 800;
  text-decoration: none !important;
  transition: color var(--e);
}
.card.position-relative h1 a:hover { color: var(--p-dk) !important; }

/* ============================================================
   § 19  PAGINATION
   ============================================================ */
.pagination .page-link {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--p);
  border-color: var(--bd);
  border-radius: var(--r-sm);
  margin: 0 2px;
  transition: background var(--e), color var(--e), box-shadow var(--e);
}
.pagination .page-link:hover {
  background: var(--p-soft);
  color: var(--p-dk);
  border-color: var(--p);
}
.pagination .page-item.active .page-link {
  background: var(--p);
  border-color: var(--p);
  color: #fff;
  box-shadow: var(--s-p);
}
.pagination .page-item.disabled .page-link { color: var(--t4); }

/* ============================================================
   § 20  MODALS
   ============================================================ */
.modal-content {
  border-radius: var(--r-xl);
  border: none;
  box-shadow: var(--s-xl);
}
.modal-header {
  border-bottom: 1px solid var(--bd);
  padding: 1.25rem 1.75rem;
}
.modal-header .modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--t1);
}
.modal-footer { border-top: 1px solid var(--bd); padding: 1rem 1.75rem; }
.modal-body   { padding: 1.5rem 1.75rem; }

/* ============================================================
   § 21  SCROLLBARS (Webkit)
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d9ef; border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: #a5b3d5; }

/* ============================================================
   § 22  MISC / UTILITIES
   ============================================================ */
.grid-margin { margin-bottom: 1.5rem; }
.sidebar,.main-panel { transition: width .25s ease, margin .25s ease; }

.tooltip .tooltip-inner {
  background: var(--t1);
  font-size: 0.75rem;
  border-radius: var(--r-sm);
  padding: 0.3rem 0.65rem;
  font-family: var(--font);
}

/* ============================================================
   § 23  RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .content-wrapper { padding: 1.25rem 1rem; }
  .card .card-body { padding: 1.2rem 1.25rem; }
  .card-body1,.card-body2,.card-body3,.card-body4 { padding: 1.25rem; }
}
@media (max-width: 576px) {
  .content-wrapper { padding: 1rem 0.75rem; }
  .auth .auth-form-transparent {
    padding: 2rem 1.5rem !important;
    border-radius: var(--r-lg);
  }
}