/* ══════════════════════════════════════════════════════════════
   KASIDI 2000 — Design System Foundation
   Loaded on ALL pages
   Palette derived from the Kasidi2000 brand (teal #1e9c8f).
   See DESIGN.md in the repository root for the component contract.
   ══════════════════════════════════════════════════════════════ */

/* 1 · BRAND TOKENS
   ─────────────────────────────────────────────────────────── */
:root {
  --color-primary:        #1e9c8f;
  --color-primary-hover:  #157f74;
  --color-primary-active: #0f5f56;
  --color-primary-tint:   #c5e6e0;  /* chips, hover fills, donut track */
  --color-primary-soft:   #eef6f4;  /* toolbar strips, zebra rows */
  --color-navy:           #12222b;
  --color-surface:        #d5e7e3;  /* page background (mint) */
  --color-white:          #FFFFFF;
  --color-link:           #1d55c9;  /* record titles that open a page */
  --color-warning:        #d99a0b;
  --color-warning-hover:  #b8820a;
  --color-warning-tint:   #fcecc4;
  --color-warning-text:   #7d5903;  /* readable on --color-warning-tint */
  --color-danger:         #cc3843;
  --color-danger-hover:   #b32e39;
  --color-danger-tint:    #f8dcde;
  --color-success:        #1e9c8f;
  --color-slate:          #3c4f63;
  --color-slate-muted:    #aec6c2;  /* "pending" state */
  --color-pending:        #aec6c2;
  --color-border:         #c8d9d5;
  --color-shadow:         rgba(18, 34, 43, 0.10);
  /* One ring everywhere — inputs, buttons and pills were drifting apart. */
  --color-focus-ring:     rgba(30, 156, 143, 0.15);

  /* Avatar cycle — six cool, desaturated hues, all 4.5:1 against white text.
     Used by the team grid, employee pages and task assignee bubbles; the
     cycles in team-list.css / employee.css / app.css must stay in step. */
  --color-avatar-0:       #1e9c8f;
  --color-avatar-1:       #3c4f63;
  --color-avatar-2:       #48765c;
  --color-avatar-3:       #6f5f8a;
  --color-avatar-4:       #35748f;
  --color-avatar-5:       #0f5f56;
}

/* 1b · DESIGN-SYSTEM ALIASES
   ─────────────────────────────────────────────────────────── */
:root {
  --font-sans:  'Montserrat', sans-serif;
  --font-mono:  'Courier New', monospace;
  --color-text-primary:         #12222b;
  --color-text-secondary:       #51626c;
  --color-text-tertiary:        #8aa09b;
  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #d5e7e3;
  --color-border-primary:       #b3cbc6;
  --color-border-secondary:     #c0d4d0;
  --color-border-tertiary:      #c8d9d5;
  --border-radius-lg:           14px;
  --card-radius:                14px;
  --card-shadow:                0 2px 8px rgba(18, 34, 43, 0.10);
  --card-shadow-hover:          0 6px 18px rgba(18, 34, 43, 0.18);
}

/* 2 · BASE RESET
   ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* 3 · APP BUTTONS — used on logged-in app pages
   ─────────────────────────────────────────────────────────── */

/* Shape shared by every brand button. Bootstrap's default radius and
   weight are too timid against the mint background. */
.btn-disa-primary,
.btn-disa-danger,
.btn-disa-outline-primary,
.btn-disa-outline-danger,
.btn-disa-outline-neutral,
.btn-disa-ghost {
  border-radius: 10px;
  font-weight: 700;
}

/* Filled — high emphasis */
.btn-disa-primary {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transition: background-color 0.2s, border-color 0.2s;
}
.btn-disa-primary:hover,
.btn-disa-primary:focus {
  color: #fff;
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn-disa-primary:active,
.btn-disa-primary.active,
.show > .btn-disa-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.btn-disa-danger {
  color: #fff;
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  transition: background-color 0.2s, border-color 0.2s;
}
.btn-disa-danger:hover,
.btn-disa-danger:focus {
  color: #fff;
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}
.btn-disa-danger:active,
.btn-disa-danger.active,
.show > .btn-disa-danger.dropdown-toggle {
  color: #fff;
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

/* Outlined — medium emphasis */
.btn-disa-outline-primary {
  color: var(--color-primary);
  background-color: var(--color-white);
  border-color: var(--color-primary);
  transition: background-color 0.2s;
}
.btn-disa-outline-primary:hover,
.btn-disa-outline-primary:focus {
  color: var(--color-primary);
  background-color: var(--color-surface);
  border-color: var(--color-primary);
}
.btn-disa-outline-primary:active,
.btn-disa-outline-primary.active,
.show > .btn-disa-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-disa-outline-danger {
  color: var(--color-danger);
  background-color: var(--color-white);
  border-color: var(--color-danger);
  transition: background-color 0.2s;
}
.btn-disa-outline-danger:hover,
.btn-disa-outline-danger:focus {
  color: var(--color-danger);
  background-color: var(--color-surface);
  border-color: var(--color-danger);
}
.btn-disa-outline-danger:active,
.btn-disa-outline-danger.active,
.show > .btn-disa-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-disa-outline-neutral {
  color: var(--color-slate);
  background-color: var(--color-white);
  border-color: var(--color-border);
  transition: background-color 0.2s, border-color 0.2s;
}
.btn-disa-outline-neutral:hover,
.btn-disa-outline-neutral:focus {
  color: var(--color-navy);
  background-color: var(--color-surface);
  border-color: var(--color-slate);
  box-shadow: none;
}
.btn-disa-outline-neutral:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: none;
}
.show > .btn-disa-outline-neutral.dropdown-toggle {
  color: var(--color-navy);
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.btn-disa-outline-neutral:disabled,
.btn-disa-outline-neutral.disabled {
  color: var(--color-text-tertiary);
  background-color: var(--color-surface);
  border-color: var(--color-border);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ghost — low emphasis */
.btn-disa-ghost {
  color: var(--color-slate);
  background-color: transparent;
  border-color: transparent;
  transition: color 0.2s, background-color 0.2s;
}
.btn-disa-ghost:hover,
.btn-disa-ghost:focus {
  color: var(--color-primary);
  background-color: rgba(30, 156, 143, 0.08);
  border-color: transparent;
}