/* ABSolute Nurse Portal — design tokens
   Palette pulled from the logo: bright cyan-teal (script "AB"), deep navy ("Solute"),
   plus airy spa-style neutrals.
   Spa/wellness aesthetic: lots of whitespace, soft surfaces, low-contrast chrome,
   one confident accent color. */

:root {
  /* Brand */
  --abs-teal-50:  #effaff;
  --abs-teal-100: #def3fc;
  --abs-teal-200: #b5e7f8;
  --abs-teal-300: #7dd5f1;
  --abs-teal-400: #36bce3;   /* logo cursive AB */
  --abs-teal-500: #1aa4cf;
  --abs-teal-600: #1486ad;
  --abs-teal-700: #156c8c;
  --abs-teal-800: #185872;
  --abs-teal-900: #184961;

  --abs-navy-50:  #f3f6fb;
  --abs-navy-100: #e5ecf5;
  --abs-navy-200: #c5d3e7;
  --abs-navy-300: #94afd1;
  --abs-navy-400: #5d83b3;
  --abs-navy-500: #3c6398;
  --abs-navy-600: #2c4d7e;
  --abs-navy-700: #233e66;
  --abs-navy-800: #1d3354;
  --abs-navy-900: #15243d;   /* logo "Solute" */

  /* Neutrals — warm spa-cool, not pure cool gray */
  --abs-bg:        #f6f9fb;
  --abs-bg-soft:   #eef3f7;
  --abs-surface:   #ffffff;
  --abs-line:      #e6edf2;
  --abs-line-soft: #eef3f7;
  --abs-ink-900:   #0d2233;
  --abs-ink-800:   #1d3344;
  --abs-ink-700:   #324a5c;
  --abs-ink-600:   #506a7d;
  --abs-ink-500:   #7188a0;   /* secondary text */
  --abs-ink-400:   #97a9bc;
  --abs-ink-300:   #b9c7d4;
  --abs-ink-200:   #d8e1ea;

  /* Semantic */
  --abs-success: #2ea884;
  --abs-success-bg: #e7f6ef;
  --abs-warn:    #d99421;
  --abs-warn-bg: #fdf3df;
  --abs-danger:  #d65663;
  --abs-danger-bg: #fdecee;
  --abs-info:    var(--abs-teal-500);
  --abs-info-bg: var(--abs-teal-50);

  /* Type */
  --abs-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --abs-font-display: "Inter", -apple-system, system-ui, sans-serif;

  /* Radii — soft & rounded for spa feel */
  --abs-r-xs: 6px;
  --abs-r-sm: 8px;
  --abs-r-md: 10px;
  --abs-r-lg: 14px;
  --abs-r-xl: 20px;
  --abs-r-pill: 999px;

  /* Shadows — very soft, like resting on water */
  --abs-shadow-xs: 0 1px 2px rgba(13, 34, 51, 0.04);
  --abs-shadow-sm: 0 1px 2px rgba(13, 34, 51, 0.04), 0 2px 6px rgba(13, 34, 51, 0.04);
  --abs-shadow-md: 0 2px 4px rgba(13, 34, 51, 0.04), 0 8px 24px rgba(13, 34, 51, 0.06);
  --abs-shadow-lg: 0 4px 8px rgba(13, 34, 51, 0.04), 0 24px 48px rgba(13, 34, 51, 0.08);

  /* Spacing — set by density tweak; defaults = comfortable */
  --abs-row-h:    52px;
  --abs-cell-px:  18px;
  --abs-cell-py:  12px;
  --abs-section-py: 28px;

  /* Accent — switchable via tweak */
  --abs-accent:        var(--abs-teal-500);
  --abs-accent-hover:  var(--abs-teal-600);
  --abs-accent-soft:   var(--abs-teal-50);
  --abs-accent-ink:    var(--abs-teal-700);
  --abs-on-accent:     #ffffff;
}

/* Density variants */
[data-density="compact"] {
  --abs-row-h: 40px;
  --abs-cell-px: 14px;
  --abs-cell-py: 8px;
  --abs-section-py: 18px;
}
[data-density="spacious"] {
  --abs-row-h: 64px;
  --abs-cell-px: 22px;
  --abs-cell-py: 16px;
  --abs-section-py: 36px;
}

/* Accent variants */
[data-accent="navy"] {
  --abs-accent:        var(--abs-navy-700);
  --abs-accent-hover:  var(--abs-navy-800);
  --abs-accent-soft:   var(--abs-navy-50);
  --abs-accent-ink:    var(--abs-navy-800);
}
[data-accent="teal"] {
  --abs-accent:        var(--abs-teal-500);
  --abs-accent-hover:  var(--abs-teal-600);
  --abs-accent-soft:   var(--abs-teal-50);
  --abs-accent-ink:    var(--abs-teal-700);
}

/* Reset basics */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--abs-font-sans);
  color: var(--abs-ink-800);
  background: var(--abs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Components ─────────────────────────────────────────────────── */

.abs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--abs-r-sm);
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .05s;
  white-space: nowrap;
}
.abs-btn:active { transform: translateY(0.5px); }

.abs-btn--primary {
  background: var(--abs-accent);
  color: var(--abs-on-accent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, var(--abs-shadow-xs);
}
.abs-btn--primary:hover { background: var(--abs-accent-hover); }

.abs-btn--ghost {
  background: transparent;
  color: var(--abs-ink-700);
  border-color: var(--abs-line);
}
.abs-btn--ghost:hover { background: var(--abs-bg-soft); border-color: var(--abs-ink-300); }

.abs-btn--soft {
  background: var(--abs-accent-soft);
  color: var(--abs-accent-ink);
}
.abs-btn--soft:hover { background: color-mix(in srgb, var(--abs-accent-soft) 70%, var(--abs-accent) 10%); }

.abs-btn--icon {
  width: 34px;
  padding: 0;
  justify-content: center;
}

/* Inputs */
.abs-input {
  height: 36px;
  padding: 0 12px 0 36px;
  border-radius: var(--abs-r-sm);
  border: 1px solid var(--abs-line);
  background: var(--abs-surface);
  font-size: 13.5px;
  color: var(--abs-ink-800);
  outline: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
  width: 100%;
}
.abs-input:hover { border-color: var(--abs-ink-300); }
.abs-input:focus {
  border-color: var(--abs-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--abs-accent) 18%, transparent);
}
.abs-input::placeholder { color: var(--abs-ink-400); }

.abs-search {
  position: relative;
  display: inline-block;
}
.abs-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--abs-ink-400);
}

/* Badges */
.abs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--abs-r-pill);
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
}
.abs-badge--teal   { background: var(--abs-teal-50); color: var(--abs-teal-700); }
.abs-badge--navy   { background: var(--abs-navy-50); color: var(--abs-navy-700); }
.abs-badge--success{ background: var(--abs-success-bg); color: #1f7256; }
.abs-badge--warn   { background: var(--abs-warn-bg); color: #8a5a10; }
.abs-badge--danger { background: var(--abs-danger-bg); color: #9a2f3a; }
.abs-badge--neutral{ background: var(--abs-bg-soft); color: var(--abs-ink-700); }

/* Avatar */
.abs-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--abs-ink-700);
  background: var(--abs-bg-soft);
  flex: none;
}

/* Card */
.abs-card {
  background: var(--abs-surface);
  border: 1px solid var(--abs-line);
  border-radius: var(--abs-r-lg);
  box-shadow: var(--abs-shadow-sm);
}

/* Table */
.abs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.abs-table thead th {
  text-align: left;
  font-weight: 550;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--abs-ink-500);
  padding: 14px var(--abs-cell-px);
  border-bottom: 1px solid var(--abs-line);
  background: var(--abs-bg-soft);
  position: sticky;
  top: 0;
  z-index: 1;
}
.abs-table thead th:first-child { border-top-left-radius: var(--abs-r-md); }
.abs-table thead th:last-child  { border-top-right-radius: var(--abs-r-md); }

.abs-table tbody td {
  padding: var(--abs-cell-py) var(--abs-cell-px);
  border-bottom: 1px solid var(--abs-line-soft);
  vertical-align: middle;
  height: var(--abs-row-h);
  color: var(--abs-ink-800);
}
.abs-table tbody tr { transition: background .08s; }
.abs-table tbody tr:hover { background: var(--abs-accent-soft); }
.abs-table tbody tr:hover td { color: var(--abs-ink-900); }
.abs-table tbody tr.is-pinned { background: color-mix(in srgb, var(--abs-warn-bg) 50%, transparent); }
.abs-table tbody tr.is-pinned:hover { background: color-mix(in srgb, var(--abs-warn-bg) 80%, transparent); }
.abs-table tbody tr:last-child td { border-bottom: none; }

/* Row style variants */
[data-rows="striped"] .abs-table tbody tr:nth-child(even):not(:hover) { background: var(--abs-bg-soft); }
[data-rows="bordered"] .abs-table { border: 1px solid var(--abs-line); border-radius: var(--abs-r-md); overflow: hidden; }
[data-rows="bordered"] .abs-table tbody td { border-bottom: 1px solid var(--abs-line); }
[data-rows="clean"] .abs-table tbody td { border-bottom: none; }
[data-rows="clean"] .abs-table tbody tr + tr td { border-top: 1px solid var(--abs-line-soft); }

/* SR-only */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}