/* =====================================================================
   MyCentsys Armed Response Dashboard: global theme
   Matches the CentsysAssetTrackingPortal corporate identity
   (derived from centsys.co.za). Primary brand colour: Centurion green #81C341
   ===================================================================== */

:root {
  /* Brand greens */
  --green-50: #f1f8e7;
  --green-100: #e3f1cf;
  --green-200: #cbe6a8;
  --green-400: #9bd05f;
  --green-500: #81c341; /* Centurion primary */
  --green-600: #6cab31;
  --green-700: #588c27;
  --green-800: #436a1e;

  /* Charcoal / ink (drawer, headings) */
  --ink-900: #1d2125;
  --ink-800: #262b30;
  --ink-700: #2f353b;
  --ink-600: #3b424a;
  --ink-500: #5a626b;

  /* Fixed dark chrome (sidebar / page headers) — stays dark in both themes. */
  --chrome-800: #262b30;
  --chrome-900: #1d2125;

  /* Neutrals */
  --grey-25: #f6f6f6;
  --grey-50: #f4f4f4;
  --grey-100: #eef1ec;
  --grey-200: #e1e6dd;
  --grey-300: #cfd6cb;
  --grey-400: #9aa393;
  --text: #2b3036;
  --text-muted: #6b7480;
  --white: #ffffff;

  /* Status */
  --warning: #e8a417;
  --warning-bg: #fdf4dd;
  --danger: #d94b46;
  --danger-bg: #fbe7e6;
  --info: #3d7fb5;
  --success: var(--green-600);

  /* Surfaces */
  --bg: var(--grey-50);
  --surface: var(--white);
  --border: var(--grey-200);

  /* Layout */
  --drawer-width: 264px;
  --topbar-height: 64px;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(29, 33, 37, 0.06), 0 1px 3px rgba(29, 33, 37, 0.08);
  --shadow-md: 0 4px 16px rgba(29, 33, 37, 0.08);
  --shadow-lg: 0 12px 40px rgba(29, 33, 37, 0.18);

  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   Dark theme: activated by <html data-theme="dark"> (see wwwroot/js/dashboard.js).
   Only the neutral ramp flips; brand greens and the status accents keep
   their hues (they read well on dark) and --white stays white for text on
   the green buttons and the dark chrome. Defaults to light.
   --------------------------------------------------------------------- */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Ink ramp = high-contrast text & headings → light. */
  --ink-900: #f3f5f7;
  --ink-800: #e8ecef;
  --ink-700: #d5dbe1;
  --ink-600: #b5bec6;
  --ink-500: #94a0a9;

  /* Neutral ramp = subtle fills / borders / hovers → dark. */
  --grey-25: #191d22;
  --grey-50: #1c2127;
  --grey-100: #232931;
  --grey-200: #2c333c;
  --grey-300: #3a424c;
  --grey-400: #79848e;

  --text: #e6e9ec;
  --text-muted: #99a3ac;

  --bg: #12161a;
  --surface: #1b2026;
  --border: #2c333c;

  /* On dark, elevation reads as a hairline ring rather than a drop shadow. */
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink-800);
  margin: 0;
  line-height: 1.2;
}

a {
  color: var(--green-700);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

input,
select,
textarea {
  font-family: var(--font-body);
  font-size: 14px;
}

/* ---- Shared button system ------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--green-500);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--green-600);
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink-700);
  border-color: var(--grey-300);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--grey-50);
  border-color: var(--grey-400);
}

.btn-danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger);
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-600);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--grey-100);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* ---- Form controls -------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}
.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(129, 195, 65, 0.22);
}
.input::placeholder {
  color: var(--grey-400);
}

/* ---- Cards / surfaces ---------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---- Badges --------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.badge-green {
  background: var(--green-100);
  color: var(--green-800);
}
.badge-grey {
  background: var(--grey-100);
  color: var(--ink-600);
}
.badge-amber {
  background: var(--warning-bg);
  color: #9a6a04;
}
.badge-red {
  background: var(--danger-bg);
  color: #a02e2a;
}

/* ---- Tables --------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table thead th {
  text-align: left;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--grey-50);
}
.table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--grey-100);
  vertical-align: middle;
}
.table tbody tr:last-child td {
  border-bottom: none;
}
.table tbody tr:hover {
  background: var(--grey-25);
}

/* ---- Utilities ------------------------------------------------------ */
.row {
  display: flex;
  align-items: center;
}
.spacer {
  flex: 1;
}
.muted {
  color: var(--text-muted);
}
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

select.input {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
textarea.input {
  resize: vertical;
  min-height: 70px;
}

.tabular {
  font-variant-numeric: tabular-nums;
}
.mono {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 13px;
}

/* Horizontal-scroll wrapper so wide tables never break the mobile layout */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > .table {
  min-width: 600px;
}
.text-danger {
  color: var(--danger);
}
.text-success {
  color: var(--green-700);
}
[data-theme='dark'] .text-success {
  color: var(--green-400);
}