/* ═══════════════════════════════════════════════════════════════
   altakamol-theme.css  ·  Altakamol Brand Theme
   ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   1.  Design Tokens          — all --at-* custom properties
   2.  Bootstrap Overrides    — --bs-* variable replacements
   3.  Navbar                 — .navbar-at + brand logo
   4.  Dropdown Menus         — shadow, radius, active state
   5.  Content Area           — body bg, main padding
   6.  Cards & Panels         — unified card style
   7.  Buttons                — primary / outline variants
   8.  Badges & Alerts        — status colours
   9.  Forms                  — focus ring
   10. Footer
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────
   Edit ONLY this block to rebrand the entire application.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --at-navy:           #0A3260;
  --at-navy-deep:      #060E1F;
  --at-blue:           #1A6BC4;
  --at-blue-light:     #4A9EE0;
  --at-blue-xlight:    #EAF2FC;
  --at-teal:           #1DB87E;
  --at-teal-light:     #E1F5EE;
  --at-amber:          #F0A830;
  --at-amber-light:    #FEF3E2;
  --at-danger:         #DC3545;

  /* Surfaces */
  --at-bg-body:        #F4F7FB;
  --at-bg-card:        #FFFFFF;
  --at-bg-nav:         #0A3260;
  --at-bg-nav-hover:   rgba(255,255,255,0.08);
  --at-bg-nav-active:  rgba(255,255,255,0.14);

  /* Text */
  --at-text:           #1A1A2E;
  --at-text-muted:     #6B7A99;
  --at-text-nav:       rgba(255,255,255,0.82);
  --at-text-nav-hover: #ffffff;

  /* Borders */
  --at-border:         #E2E8F0;
  --at-border-nav:     rgba(255,255,255,0.08);
  --at-border-focus:   rgba(26,107,196,0.45);

  /* Radii */
  --at-radius-sm:      6px;
  --at-radius:         8px;
  --at-radius-lg:      12px;
  --at-radius-pill:    999px;

  /* Shadows */
  --at-shadow-sm:      0 1px 3px rgba(10,50,96,0.07), 0 1px 2px rgba(10,50,96,0.05);
  --at-shadow-md:      0 4px 16px rgba(10,50,96,0.10);
  --at-shadow-nav:     0 2px 16px rgba(6,14,31,0.35);
  --at-shadow-dropdown:0 8px 24px rgba(10,50,96,0.14);

  /* Typography */
  --at-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Navbar */
  --at-nav-height:     56px;
}

/* ─── 2. BOOTSTRAP OVERRIDES ───────────────────────────────────
   Remaps Bootstrap's own CSS vars to use Altakamol tokens.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Primary → Altakamol blue */
  --bs-primary:              var(--at-blue);
  --bs-primary-rgb:          26, 107, 196;
  --bs-primary-bg-subtle:    var(--at-blue-xlight);
  --bs-primary-border-subtle:#B5D4F4;
  --bs-link-color:           var(--at-blue);
  --bs-link-hover-color:     var(--at-navy);

  /* Body */
  --bs-body-bg:              var(--at-bg-body);
  --bs-body-color:           var(--at-text);
  --bs-body-font-family:     var(--at-font);
  --bs-border-color:         var(--at-border);
  --bs-border-radius:        var(--at-radius);
  --bs-border-radius-sm:     var(--at-radius-sm);
  --bs-border-radius-lg:     var(--at-radius-lg);

  /* Card */
  --bs-card-border-color:    var(--at-border);
  --bs-card-box-shadow:      var(--at-shadow-sm);
  --bs-card-border-radius:   var(--at-radius-lg);
}

/* ─── 3. NAVBAR ────────────────────────────────────────────────
   Use class .navbar-at on <nav> in the layout.
   ─────────────────────────────────────────────────────────────── */
.navbar-at {
  background-color: var(--at-bg-nav) !important;
  border-bottom: 1px solid var(--at-border-nav);
  box-shadow: var(--at-shadow-nav);
  min-height: var(--at-nav-height);
  padding-top: 0;
  padding-bottom: 0;
}

/* Brand / logo area */
.navbar-at .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.navbar-at .navbar-brand .at-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.navbar-at .navbar-brand .at-logo-en { font-size: 14px; font-weight: 700; color: #fff; }
.navbar-at .navbar-brand .at-logo-ar { font-size: 10px; color: rgba(255,255,255,0.45); }

/* Nav links */
.navbar-at .nav-link {
  color: var(--at-text-nav) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 0.45rem 0.8rem !important;
  border-radius: var(--at-radius-sm);
  transition: color 0.15s, background-color 0.15s;
}
.navbar-at .nav-link:hover,
.navbar-at .nav-link:focus {
  color: var(--at-text-nav-hover) !important;
  background-color: var(--at-bg-nav-hover);
}
.navbar-at .nav-link.active,
.navbar-at .nav-item.active > .nav-link {
  color: #fff !important;
  background-color: var(--at-bg-nav-active);
}

/* Dropdown toggles */
.navbar-at .dropdown-toggle::after { border-color: rgba(255,255,255,0.6) transparent transparent; }

/* Mobile toggler */
.navbar-at .navbar-toggler {
  border-color: rgba(255,255,255,0.25);
}
.navbar-at .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Badge on bell icon */
.navbar-at .badge.bg-danger { background-color: #E24B4A !important; }

/* ─── 4. DROPDOWN MENUS ────────────────────────────────────────── */
.navbar-at .dropdown-menu {
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-lg);
  box-shadow: var(--at-shadow-dropdown);
  padding: 6px;
  margin-top: 6px !important;
  min-width: 200px;
}
.navbar-at .dropdown-item {
  border-radius: var(--at-radius-sm);
  font-size: 13px;
  padding: 7px 12px;
  color: var(--at-text);
  transition: background-color 0.12s;
}
.navbar-at .dropdown-item:hover,
.navbar-at .dropdown-item:focus { background-color: var(--at-blue-xlight); color: var(--at-blue); }
.navbar-at .dropdown-item.text-danger:hover { background-color: #FCEBEB; }
.navbar-at .dropdown-header { font-size: 11px; font-weight: 700; color: var(--at-text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px 2px; }
.navbar-at .dropdown-divider { margin: 4px 0; border-color: var(--at-border); }
.navbar-at .dropdown-item-text { font-size: 13px; padding: 6px 12px; }

/* Nested dropdown (dropend) */
.navbar-at .dropend .dropdown-menu { margin-top: 0 !important; margin-left: 4px; }

/* ─── 5. CONTENT AREA ──────────────────────────────────────────── */
body {
  background-color: var(--at-bg-body);
  font-family: var(--at-font);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.at-content { flex: 1 0 auto; }
.footer-at  { flex-shrink: 0; }

.container-fluid.py-4 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }

/* Page headings */
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--at-text); }
.page-title { font-size: 1.35rem; color: var(--at-navy); font-weight: 700; margin-bottom: 0; }

/* ─── 6. CARDS & PANELS ────────────────────────────────────────── */
.card {
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-lg);
  box-shadow: var(--at-shadow-sm);
  background: var(--at-bg-card);
}
.card:hover { box-shadow: var(--at-shadow-md); transition: box-shadow 0.2s; }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--at-border);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 18px;
  color: var(--at-text);
}
.card-body { padding: 18px; }

/* ─── 7. BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:            var(--at-blue);
  --bs-btn-border-color:  var(--at-blue);
  --bs-btn-hover-bg:      var(--at-navy);
  --bs-btn-hover-border-color: var(--at-navy);
  --bs-btn-active-bg:     var(--at-navy);
  --bs-btn-color:         #fff;
  --bs-btn-hover-color:   #fff;
  font-weight: 500;
  border-radius: var(--at-radius);
}
.btn-outline-primary {
  --bs-btn-color:         var(--at-blue);
  --bs-btn-border-color:  var(--at-blue);
  --bs-btn-hover-bg:      var(--at-blue);
  --bs-btn-hover-color:   #fff;
  border-radius: var(--at-radius);
}
.btn { border-radius: var(--at-radius); font-size: 13px; font-weight: 500; }
.btn-sm { border-radius: var(--at-radius-sm); font-size: 12px; }

/* ─── 8. BADGES & ALERTS ───────────────────────────────────────── */
.badge { border-radius: var(--at-radius-sm); font-weight: 600; }
.badge.bg-primary   { background-color: var(--at-blue) !important; }
.badge.bg-success   { background-color: var(--at-teal) !important; }
.badge.bg-warning   { background-color: var(--at-amber) !important; color: var(--at-text) !important; }

.alert-primary { background: var(--at-blue-xlight); border-color: #B5D4F4; color: var(--at-navy); }
.alert-success { background: var(--at-teal-light); border-color: #9FE1CB; color: #085041; }
.alert-warning { background: var(--at-amber-light); border-color: #F9D98A; color: #7A4E00; }

/* ─── 9. FORMS ─────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--at-blue);
  box-shadow: 0 0 0 3px var(--at-border-focus);
}
.form-control, .form-select {
  border-radius: var(--at-radius);
  border-color: var(--at-border);
  font-size: 13px;
}

/* ─── Colored stat cards — force white text on card and all children ── */
.card.bg-primary,
.card.bg-success,
.card.bg-warning,
.card.bg-info,
.card.bg-dark,
.card.bg-secondary { color: #fff !important; }
.card.bg-primary *,
.card.bg-success *,
.card.bg-warning *,
.card.bg-info *,
.card.bg-dark *,
.card.bg-secondary * { color: #fff !important; }

/* ─── 10. FOOTER ────────────────────────────────────────────────── */
.footer-at {
  background: var(--at-navy);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 0;
}
.footer-at-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-at-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-at-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.footer-at-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
.footer-at-copy a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.footer-at-copy a:hover { color: #fff; }