/* ╔═══════════════════════════════════════════════════════╗
   ║  AIPS / Omega DPS — Global Design System             ║
   ╚═══════════════════════════════════════════════════════╝
   FINDINGS (pre-edit state):
   - CSS variables: PARTIAL — only --bs-primary in _Layout inline <style>
   - Bootstrap overrides: PARTIAL — btn-primary, .text-primary in _Layout inline
   - dashboard.css, inbox.css: empty stubs
   - admin.css: does not exist
   - site.css: was an empty stub (not even linked in _Layout <head>)
   Colors corrected via !important (override _Layout inline <style>):
     body text color  : #333     → var(--color-text-primary) = #1A1A1A
     btn-primary hover: #16385a  → var(--color-primary-dark) = #17406A
     admin-sidebar bg : #F8F9FA  → var(--color-card-bg)      = #FFFFFF
     admin-sidebar hover bg   : #E6F1FB  → var(--color-page-bg)  = #F4F6F9
     admin-sidebar active bg  : #E6F1FB  → var(--color-primary-pale) = #EBF3FB
     admin-sidebar active rule: combined hover+active → separated below
*/

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Brand */
  --color-primary:        #1F4E79;
  --color-primary-dark:   #17406A;
  --color-primary-light:  #D5E8F0;
  --color-primary-pale:   #EBF3FB;
  --color-secondary:      #2E75B6;

  /* Page & card */
  --color-page-bg:        #F4F6F9;
  --color-card-bg:        #FFFFFF;
  --color-card-border:    #DEE2E6;
  --color-card-shadow:    0 1px 4px rgba(0,0,0,0.07);

  /* Text */
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #666666;
  --color-text-muted:     #999999;

  /* Inputs */
  --color-input-border:       #DEE2E6;
  --color-input-focus-border: #1F4E79;

  /* Status */
  --color-success-bg:     #EAF3DE;
  --color-success-text:   #27500A;
  --color-success-border: #C0DD97;

  --color-error-bg:       #FCEBEB;
  --color-error-text:     #791F1F;
  --color-error-border:   #F7C1C1;

  --color-warning-bg:     #FAEEDA;
  --color-warning-text:   #633806;
  --color-warning-border: #FAC775;

  --color-info-bg:        #E6F1FB;
  --color-info-text:      #0C447C;
  --color-info-border:    #B5D4F4;

  /* Font */
  --font-family-base: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-base:   14px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. BOOTSTRAP TOKEN OVERRIDES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-bs-theme],
:root {
  --bs-primary:          #1F4E79;
  --bs-primary-rgb:      31, 78, 121;
  --bs-link-color:       #2E75B6;
  --bs-link-hover-color: #1F4E79;
}

.text-primary   { color: var(--color-primary) !important; }
.bg-primary     { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.text-secondary-blue { color: var(--color-secondary) !important; }
.text-blue           { color: var(--color-primary)   !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. GLOBAL BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body {
  font-family:      var(--font-family-base);
  font-size:        var(--font-size-base);
  color:            var(--color-text-primary);
  background-color: var(--color-page-bg);
}

a {
  color: var(--color-secondary);
}
a:hover {
  color: var(--color-primary);
}

h1, h2, h3, h4, h5 {
  color: var(--color-primary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  box-shadow: var(--color-card-shadow);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color:     var(--color-primary) !important;
  color:            #FFFFFF !important;
  border-radius:    6px;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color:     var(--color-primary-dark);
}
.btn-primary:disabled {
  background-color: #a0b3c6 !important;
  border-color:     #a0b3c6 !important;
}

.btn-outline-primary {
  border-color:  var(--color-primary) !important;
  color:         var(--color-primary) !important;
  border-radius: 6px;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary-pale) !important;
  color:            var(--color-primary) !important;
}

.btn-danger {
  background-color: #A32D2D !important;
  border-color:     #A32D2D !important;
  color:            #FFFFFF !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. FORM INPUTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.form-control,
.form-select {
  border-color: var(--color-input-border);
  color:        var(--color-text-primary);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-input-focus-border);
  box-shadow:   0 0 0 2px rgba(31, 78, 121, 0.15);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. TABLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.table thead th {
  background-color: #F0F4F8 !important;
  color:            #444444 !important;
  font-weight:      500;
  border-color:     var(--color-card-border);
}
.table tbody tr:nth-child(even) {
  background-color: #FAFBFC;
}
.table tbody td {
  border-color: var(--color-card-border);
}
.dataTables_wrapper {
  font-size: 13px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. STATUS BADGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Bootstrap .badge modifier classes (existing pattern in views) */
.badge.bg-pending  { background-color: var(--color-warning-bg)  !important; color: var(--color-warning-text)  !important; border-radius: 20px; }
.badge.bg-approved { background-color: var(--color-success-bg)  !important; color: var(--color-success-text)  !important; border-radius: 20px; }
.badge.bg-rejected { background-color: var(--color-error-bg)    !important; color: var(--color-error-text)    !important; border-radius: 20px; }

.badge.bg-type-vendor    { background-color: var(--color-info-bg) !important; color: var(--color-info-text) !important; border-radius: 20px; }
.badge.bg-type-shipping  { background-color: #E1F5EE !important; color: #085041 !important; border-radius: 20px; }
.badge.bg-type-container { background-color: #EEEDFE !important; color: #3C3489 !important; border-radius: 20px; }

/* Standalone semantic badge classes */
.badge-pending        { background: var(--color-warning-bg);  color: var(--color-warning-text);  border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }
.badge-approved       { background: var(--color-success-bg);  color: var(--color-success-text);  border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }
.badge-rejected       { background: var(--color-error-bg);    color: var(--color-error-text);    border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }
.badge-active         { background: var(--color-success-bg);  color: var(--color-success-text);  border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }
.badge-inactive       { background: var(--color-error-bg);    color: var(--color-error-text);    border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }
.badge-admin          { background: #E1F5EE; color: #085041;  border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }
.badge-approver       { background: var(--color-info-bg);     color: var(--color-info-text);     border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }
.badge-vendor-invoice { background: var(--color-info-bg);     color: var(--color-info-text);     border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }
.badge-shipping-bill  { background: #E1F5EE; color: #085041;  border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }
.badge-container-file { background: #EEEDFE; color: #3C3489;  border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-block; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. ALERT / BANNER BOXES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.alert-success-custom {
  background: var(--color-success-bg);
  color:      var(--color-success-text);
  border:     1px solid var(--color-success-border);
  border-radius: 6px;
  padding:    10px 14px;
}
.alert-error-custom {
  background: var(--color-error-bg);
  color:      var(--color-error-text);
  border:     1px solid var(--color-error-border);
  border-radius: 6px;
  padding:    10px 14px;
}
.alert-warning-custom {
  background: var(--color-warning-bg);
  color:      var(--color-warning-text);
  border:     1px solid var(--color-warning-border);
  border-radius: 6px;
  padding:    10px 14px;
}
.alert-info-custom {
  background: var(--color-info-bg);
  color:      var(--color-info-text);
  border:     1px solid var(--color-info-border);
  border-radius: 6px;
  padding:    10px 14px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. AUTH PAGES  (Login, Register, OTP, ForgotPw, ResetPw)
       Applied when body has class="auth-page"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.auth-page {
  background-color: var(--color-primary);
}

/* Remove topbar offset — auth pages hide the navbar */
body.auth-page .main-wrapper {
  margin-top: 0;
}

/* Auth card gets elevated treatment */
body.auth-page .card {
  border-radius: 12px;
  box-shadow:    0 4px 24px rgba(0, 0, 0, 0.15);
  border:        none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. ADMIN SIDEBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.admin-sidebar {
  background-color: var(--color-card-bg);
  border-right:     1px solid var(--color-card-border);
}

.admin-sidebar a {
  border-left: 3px solid transparent;
  color:       #555555;
}

.admin-sidebar a:hover {
  background-color: var(--color-page-bg);
  color:            var(--color-primary);
}

.admin-sidebar a.active {
  background-color:  var(--color-primary-pale);
  color:             var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight:       500;
}
