:root{
  --au-primary:#0d6efd;
  --au-primary-dark:#0a58ca;
  --au-primary-light:#e9f2ff;
  --au-accent:#ffb020;
  --au-text:#0a2540;
  --au-muted:#5a6b85;
  --au-bg:#f4f7fb;
  --au-card:#ffffff;
  --au-border:#dbe4f0;
}
[data-bs-theme="dark"]{
  --au-primary:#4d9dff;
  --au-primary-dark:#0d6efd;
  --au-primary-light:#132b4c;
  --au-text:#e6eefc;
  --au-muted:#9fb2cf;
  --au-bg:#0b1524;
  --au-card:#132133;
  --au-border:#22304a;
}
html,body{background:var(--au-bg);color:var(--au-text);}
:root{color-scheme:light;}
[data-bs-theme="dark"]{color-scheme:dark;}
/* Belt-and-suspenders: some browsers/webviews force-darken native form
   controls based on OS dark mode even when color-scheme says not to.
   Pin the actual background+text colour explicitly so this can never
   happen, in both light and dark site themes. */
input:not([readonly]):not([disabled]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select:not([disabled]), textarea:not([readonly]):not([disabled]),
.form-control:not([readonly]):not([disabled]), .form-select:not([disabled]):not(.disabled) {
  background-color:#fff !important;
  color:#212529 !important;
}
input::placeholder, textarea::placeholder { color:#6c757d !important; opacity:1; }
[data-bs-theme="dark"] input:not([readonly]):not([disabled]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-bs-theme="dark"] select:not([disabled]),
[data-bs-theme="dark"] textarea:not([readonly]):not([disabled]),
[data-bs-theme="dark"] .form-control:not([readonly]):not([disabled]),
[data-bs-theme="dark"] .form-select:not([disabled]):not(.disabled) {
  background-color:var(--au-card) !important;
  color:var(--au-text) !important;
}
[data-bs-theme="dark"] input::placeholder,
[data-bs-theme="dark"] textarea::placeholder { color:var(--au-muted) !important; opacity:1; }
/* Locked/readonly/disabled fields keep their distinct light-gray look,
   but still need an explicit colour guaranteed so the browser's own
   forced-dark-input behaviour can't make the text invisible on them. */
input[readonly]:not([type="checkbox"]):not([type="radio"]), select[disabled], textarea[readonly], .form-select.disabled {
  background-color:#eef1f5 !important;
  color:#495057 !important;
}
/* Unchecked checkboxes/radios had a near-invisible border by default —
   give them a clearly visible outline so it's obvious which items are
   ticked vs. not, in both light and dark mode. */
.form-check-input { border-color:#8a97a8 !important; }
.form-check-input:checked { border-color:var(--au-primary-dark) !important; }
[data-bs-theme="dark"] .form-check-input { background-color:var(--au-card) !important; border-color:#8a97a8 !important; }
[data-bs-theme="dark"] .form-check-input:checked { background-color:var(--au-primary-dark) !important; border-color:var(--au-primary-dark) !important; }
/* .btn-outline-dark assumes a light page background — its dark text and
   border become nearly invisible against this app's dark theme. Give it
   a clearly visible look in dark mode instead. */
[data-bs-theme="dark"] .btn-outline-dark {
  color:#e6eefc !important;
  border-color:#5a6b85 !important;
  background-color:rgba(255,255,255,.06) !important;
}
[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark:focus,
[data-bs-theme="dark"] .btn-outline-dark.show {
  color:#0b1524 !important;
  background-color:#e6eefc !important;
  border-color:#e6eefc !important;
}
body.app-body{font-family:'Segoe UI',Roboto,'Helvetica Neue',sans-serif;}
.app-navbar{background:linear-gradient(90deg,var(--au-primary-dark),var(--au-primary));box-shadow:0 2px 10px rgba(13,110,253,.18);}
.app-navbar .navbar-brand,.app-navbar .nav-link{color:#fff !important;}
.app-navbar .nav-link:hover{color:#ffe08a !important;}
.brand-title{font-weight:700;letter-spacing:.3px;}
.app-footer{color:var(--au-muted);border-top:1px solid var(--au-border);margin-top:24px;}
.card{background:var(--au-card);border:1px solid var(--au-border);border-radius:10px;}
.stat-card{padding:18px;border-left:4px solid var(--au-primary);}
.stat-card-link{cursor:pointer;transition:transform .15s,box-shadow .2s;}
.stat-card-link:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(10,37,64,.14);}
.stat-card .stat-title{color:var(--au-muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;}
.stat-card .stat-value{font-size:1.9rem;font-weight:700;color:var(--au-text);}
.stat-card .stat-icon{font-size:2rem;color:var(--au-primary);opacity:.7;}

/* Login */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(180deg,rgba(10,37,64,.02) 0%,rgba(10,37,64,.18) 45%,rgba(10,37,64,.5) 100%),url('../images/login-bg.svg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  padding:20px 0;}
.auth-card{width:100%;max-width:440px;background:#fff;border-radius:14px;padding:34px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.auth-brand img{width:44px;height:44px;}
.auth-title{font-weight:700;color:#0a2540;margin:0;}
.auth-sub{color:#5a6b85;margin-bottom:22px;font-size:.9rem;}

/* Form */
.form-section-title{background:var(--au-primary-light);color:var(--au-primary-dark);
  padding:8px 14px;border-radius:6px;font-weight:600;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;border-left:4px solid var(--au-primary);}
.material-table{font-size:.9rem;}
.material-table thead{background:var(--au-primary);color:#fff;}
.material-table thead th{padding:8px;text-align:center;}
.material-table td{padding:4px 6px;vertical-align:middle;border-color:var(--au-border) !important;}
.material-table input{border:1px solid var(--au-border);background:transparent;color:var(--au-text);
  width:100%;padding:4px 6px;border-radius:4px;font-size:.9rem;}
.material-table input:focus{outline:2px solid var(--au-primary);border-color:transparent;}
.sticky-actions{position:sticky;bottom:0;background:var(--au-card);padding:12px;border-top:1px solid var(--au-border);
  display:flex;gap:8px;flex-wrap:wrap;z-index:10;}

/* Dispatch form container */
.dispatch-form-card{background:var(--au-card);border:1px solid var(--au-border);border-radius:10px;padding:22px;}
.dispatch-form-card h4{color:var(--au-primary-dark);font-weight:700;}

/* Table hover */
.table-hover tbody tr:hover{background:var(--au-primary-light);}