/*//////////////////////////////////////////////////////////////////
[ DESIGN SYSTEM — "Quiet operational console" ]

Phase 0 foundation for the fresh redesign. Self-contained: this file only
defines tokens and `ds-`prefixed components, so it can be previewed on
styleguide.php without affecting any live page. Production would self-host
the fonts (currently loaded from a CDN in the styleguide for preview).

Direction: calm, dense, cool. One saturated petrol accent, slate neutrals,
the card as the atomic unit. Built for clerks doing data work all day.
*/

:root {
  /* ---- Surfaces (cool, light) ---- */
  --ds-stage:        #e9edf2;  /* app background behind everything */
  --ds-surface:      #f5f8fa;  /* content pane */
  --ds-card:         #ffffff;  /* cards, table bg, inputs */
  --ds-sunken:       #eef2f6;  /* table head, input prepend, subtle fills */
  --ds-rail:         #15212b;  /* dark left rail */
  --ds-rail-2:       #1d2c38;

  /* ---- Lines ---- */
  --ds-border:        #d7dde4;
  --ds-border-strong: #c1cad3;

  /* ---- Ink ---- */
  --ds-ink:        #16222d;
  --ds-ink-muted:  #586673;
  --ds-ink-subtle: #8b97a2;
  --ds-on-accent:  #ffffff;

  /* ---- Accent (petrol) ---- */
  --ds-accent:      #0e7d9b;
  --ds-accent-600:  #0a6580;
  --ds-accent-700:  #08526a;
  --ds-accent-tint: #e2f2f7;
  --ds-ring:        rgba(14, 125, 155, 0.30);

  /* ---- Module accents ---- */
  --ds-mun: #0e7d9b;   /* municipal = petrol */
  --ds-vet: #4f46e5;   /* veterinary = indigo */
  --ds-module: var(--ds-mun);

  /* ---- Semantic ---- */
  --ds-success:      #1f9d6b;
  --ds-success-tint: #e2f4ec;
  --ds-warning:      #b9821a;
  --ds-warning-tint: #faf0d8;
  --ds-danger:       #d24545;
  --ds-danger-tint:  #fbe7e7;
  --ds-info:         #0e7d9b;
  --ds-info-tint:    #e2f2f7;

  /* ---- Typography ---- */
  --ds-font-head: 'Onest', system-ui, -apple-system, sans-serif;
  --ds-font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --ds-text-xs:  12px;
  --ds-text-sm:  13px;
  --ds-text:     14px;
  --ds-text-md:  15px;
  --ds-text-lg:  18px;
  --ds-text-xl:  22px;
  --ds-text-2xl: 28px;

  /* ---- Spacing (4px base) ---- */
  --ds-1: 4px;  --ds-2: 8px;  --ds-3: 12px; --ds-4: 16px;
  --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; --ds-10: 40px;

  /* ---- Radius ---- */
  --ds-r-sm: 6px;
  --ds-r:    9px;
  --ds-r-lg: 14px;

  /* ---- Elevation ---- */
  --ds-shadow-1: 0 1px 2px rgba(16,33,43,.06), 0 1px 1px rgba(16,33,43,.05);
  --ds-shadow-2: 0 6px 18px rgba(16,33,43,.12);
}

/*//////////////////////////////////////////////////////////////////
[ BASE ] */

.ds-scope, .ds-scope * { box-sizing: border-box; }

.ds-scope {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text);
  line-height: 1.5;
  color: var(--ds-ink);
  background: var(--ds-stage);
  -webkit-font-smoothing: antialiased;
}

.ds-scope h1, .ds-scope h2, .ds-scope h3, .ds-scope h4, .ds-scope h5 {
  font-family: var(--ds-font-head);
  color: var(--ds-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.ds-scope a { color: var(--ds-accent); text-decoration: none; }
.ds-scope a:hover { color: var(--ds-accent-700); text-decoration: underline; }

.ds-muted   { color: var(--ds-ink-muted); }
.ds-subtle  { color: var(--ds-ink-subtle); }

/* module theming hook: <body class="ds-module-vet"> flips the accent */
.ds-module-vet { --ds-module: var(--ds-vet); --ds-accent: var(--ds-vet);
  --ds-accent-600: #4338ca; --ds-accent-700: #3730a3; --ds-accent-tint: #eef0fd;
  --ds-ring: rgba(79,70,229,.30); }

/*//////////////////////////////////////////////////////////////////
[ APP SHELL ] */

.ds-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ds-rail {
  background: var(--ds-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ds-3) 0;
  gap: var(--ds-1);
}
.ds-rail-logo {
  width: 40px; height: 40px; border-radius: var(--ds-r-sm);
  background: var(--ds-module);
  display: grid; place-items: center;
  color: #fff; font-size: 18px; margin-bottom: var(--ds-3);
}
.ds-rail-item {
  width: 44px; height: 44px; border-radius: var(--ds-r-sm);
  display: grid; place-items: center;
  color: #93a3b1; font-size: 17px;
  cursor: pointer; transition: background .12s, color .12s;
}
.ds-rail-item:hover { background: var(--ds-rail-2); color: #d6dee5; }
.ds-rail-item.is-active { background: var(--ds-module); color: #fff; }
.ds-rail-spacer { flex: 1; }

.ds-main { display: flex; flex-direction: column; min-width: 0; background: var(--ds-surface); }

.ds-topbar {
  height: 56px; flex: 0 0 56px;
  background: var(--ds-card);
  border-bottom: 1px solid var(--ds-border);
  display: flex; align-items: center; gap: var(--ds-3);
  padding: 0 var(--ds-4);
}
.ds-topbar .ds-brandname { font-family: var(--ds-font-head); font-weight: 600; }
.ds-topbar .ds-spacer { flex: 1; }

.ds-module-badge {
  display: inline-flex; align-items: center; gap: var(--ds-2);
  font-size: var(--ds-text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1;
  padding: 6px 10px; border-radius: 999px;
  color: var(--ds-module); background: var(--ds-accent-tint);
}

.ds-content { flex: 1 1 auto; padding: var(--ds-5); overflow-y: auto; background: var(--ds-surface); }

/* ---- Top navigation (chosen model) ---- */
.ds-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--ds-3); }
.ds-nav-item { position: relative; }
.ds-nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--ds-r-sm);
  font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-ink-muted);
  cursor: pointer; white-space: nowrap;
}
.ds-nav-link:hover { background: var(--ds-sunken); color: var(--ds-ink); }
.ds-nav-link.is-active { color: var(--ds-accent); }
.ds-nav-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 210px; padding: 6px;
  background: var(--ds-card); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-sm); box-shadow: var(--ds-shadow-2); z-index: 20;
}
.ds-nav-item:hover .ds-nav-menu, .ds-nav-item.is-open .ds-nav-menu { display: block; }
.ds-nav-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 6px;
  font-size: var(--ds-text-sm); color: var(--ds-ink);
}
.ds-nav-menu a:hover { background: var(--ds-accent-tint); color: var(--ds-accent-700); text-decoration: none; }

/*//////////////////////////////////////////////////////////////////
[ PAGE HEADER ] */

.ds-pagehead {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-module);
  border-radius: var(--ds-r);
  padding: var(--ds-3) var(--ds-4);
  margin-bottom: var(--ds-4);
  box-shadow: var(--ds-shadow-1);
}
.ds-crumbs { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); margin-bottom: 3px; }
.ds-crumbs .sep { color: var(--ds-border-strong); font-weight: 700; margin: 0 6px; }
.ds-pagehead-row { display: flex; align-items: center; gap: var(--ds-3); flex-wrap: wrap; }
.ds-title { font-size: var(--ds-text-xl); font-weight: 600; }
.ds-pagehead-meta { margin-left: auto; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); text-align: right; }

/*//////////////////////////////////////////////////////////////////
[ ACTION TOOLBAR ]  (in normal flow, never floating) */

.ds-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-2);
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r);
  padding: var(--ds-2) var(--ds-3);
  margin-bottom: var(--ds-4);
  box-shadow: var(--ds-shadow-1);
}
.ds-actions .ds-actions-end { margin-left: auto; display: flex; gap: var(--ds-2); }

/*//////////////////////////////////////////////////////////////////
[ CARD ] */

.ds-card {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r);
  box-shadow: var(--ds-shadow-1);
  overflow: hidden;
}
.ds-card + .ds-card { margin-top: var(--ds-4); }
.ds-card-header {
  display: flex; align-items: center; gap: var(--ds-2);
  padding: var(--ds-3) var(--ds-4);
  border-bottom: 1px solid var(--ds-border);
  font-family: var(--ds-font-head);
  font-weight: 600; font-size: var(--ds-text-md);
  background: linear-gradient(180deg, #fff, var(--ds-surface));
}
.ds-card-header i { color: var(--ds-module); }
.ds-card-body { padding: var(--ds-4); }

/*//////////////////////////////////////////////////////////////////
[ BUTTONS ] */

.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-2);
  font-family: var(--ds-font-body); font-size: var(--ds-text-sm); font-weight: 600;
  line-height: 1; padding: 9px 14px;
  border: 1px solid transparent; border-radius: var(--ds-r-sm);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  white-space: nowrap; text-decoration: none;
}
.ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ds-ring); }
.ds-btn-sm { padding: 6px 10px; font-size: var(--ds-text-xs); }
.ds-btn i { font-size: .95em; }

.ds-btn-primary { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-btn-primary:hover { background: var(--ds-accent-600); color: #fff; text-decoration: none; }

.ds-btn-secondary { background: var(--ds-card); color: var(--ds-ink); border-color: var(--ds-border-strong); }
.ds-btn-secondary:hover { background: var(--ds-sunken); color: var(--ds-ink); text-decoration: none; }

.ds-btn-danger { background: var(--ds-danger); color: #fff; }
.ds-btn-danger:hover { background: #b93a3a; color: #fff; text-decoration: none; }

.ds-btn-ghost { background: transparent; color: var(--ds-ink-muted); }
.ds-btn-ghost:hover { background: var(--ds-sunken); color: var(--ds-ink); text-decoration: none; }

.ds-btn:disabled, .ds-btn.is-disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/*//////////////////////////////////////////////////////////////////
[ BADGES ] */

.ds-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--ds-text-xs); font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px;
}
.ds-badge-neutral { background: var(--ds-sunken); color: var(--ds-ink-muted); }
.ds-badge-accent  { background: var(--ds-accent-tint); color: var(--ds-accent-700); }
.ds-badge-success { background: var(--ds-success-tint); color: #146a48; }
.ds-badge-warning { background: var(--ds-warning-tint); color: #8a6113; }
.ds-badge-danger  { background: var(--ds-danger-tint); color: #a83333; }

/*//////////////////////////////////////////////////////////////////
[ ALERTS ] */

.ds-alert {
  display: flex; align-items: flex-start; gap: var(--ds-3);
  padding: var(--ds-3) var(--ds-4); border-radius: var(--ds-r-sm);
  border: 1px solid transparent; font-size: var(--ds-text-sm);
}
.ds-alert i { margin-top: 1px; }
.ds-alert-success { background: var(--ds-success-tint); border-color: #bfe4d2; color: #14623f; }
.ds-alert-warning { background: var(--ds-warning-tint); border-color: #ecd9a6; color: #7a5510; }
.ds-alert-danger  { background: var(--ds-danger-tint);  border-color: #efc4c4; color: #962d2d; }
.ds-alert-info    { background: var(--ds-info-tint);    border-color: #bfe0ea; color: #0a5468; }

/*//////////////////////////////////////////////////////////////////
[ FORM FIELDS ] */

.ds-field { margin-bottom: var(--ds-3); }
.ds-label {
  display: block; font-size: var(--ds-text-xs); font-weight: 600;
  color: var(--ds-ink-muted); margin-bottom: 4px;
}
.ds-label .req { color: var(--ds-danger); }
.ds-input-group { display: flex; }
.ds-input-icon {
  flex: 0 0 auto; width: 38px; display: grid; place-items: center;
  background: var(--ds-sunken); color: var(--ds-ink-subtle);
  border: 1px solid var(--ds-border-strong); border-right: 0;
  border-radius: var(--ds-r-sm) 0 0 var(--ds-r-sm);
}
.ds-input, .ds-select, .ds-textarea {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--ds-font-body); font-size: var(--ds-text-sm); color: var(--ds-ink);
  background: var(--ds-card); border: 1px solid var(--ds-border-strong);
  border-radius: 0 var(--ds-r-sm) var(--ds-r-sm) 0;
  padding: 8px 10px;
}
.ds-input-group .ds-input:only-child,
.ds-field > .ds-input, .ds-field > .ds-select, .ds-field > .ds-textarea {
  border-radius: var(--ds-r-sm);
}
.ds-textarea { width: 100%; resize: vertical; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-ring);
}
.ds-input.is-valid   { border-color: var(--ds-success); }
.ds-input.is-invalid { border-color: var(--ds-danger); }
.ds-help { font-size: var(--ds-text-xs); color: var(--ds-ink-subtle); margin-top: 4px; }
.ds-help.is-invalid { color: var(--ds-danger); }

/*//////////////////////////////////////////////////////////////////
[ TABLE ] */

.ds-table-wrap { border: 1px solid var(--ds-border); border-radius: var(--ds-r); overflow: hidden; box-shadow: var(--ds-shadow-1); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); background: var(--ds-card); }
.ds-table thead th {
  text-align: left; font-family: var(--ds-font-head); font-weight: 600;
  font-size: var(--ds-text-xs); text-transform: uppercase; letter-spacing: .03em;
  color: var(--ds-ink-muted); background: var(--ds-sunken);
  padding: 10px var(--ds-3); border-bottom: 1px solid var(--ds-border);
  position: sticky; top: 0;
}
.ds-table tbody td { padding: 9px var(--ds-3); border-bottom: 1px solid var(--ds-border); }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr { transition: background .1s; cursor: pointer; }
.ds-table tbody tr:hover { background: var(--ds-accent-tint); }

/*//////////////////////////////////////////////////////////////////
[ STYLEGUIDE-ONLY HELPERS ] */

.sg-section { margin-bottom: var(--ds-10); }
.sg-section > h2 {
  font-size: var(--ds-text-lg); margin-bottom: var(--ds-1);
  padding-bottom: var(--ds-2); border-bottom: 2px solid var(--ds-border);
}
.sg-section > .sg-note { color: var(--ds-ink-muted); font-size: var(--ds-text-sm); margin: 0 0 var(--ds-4); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--ds-3); align-items: center; }
.sg-grid { display: grid; gap: var(--ds-4); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ds-3); }
.sg-swatch { border: 1px solid var(--ds-border); border-radius: var(--ds-r-sm); overflow: hidden; background: var(--ds-card); }
.sg-swatch .chip { height: 56px; }
.sg-swatch .meta { padding: 8px 10px; font-size: var(--ds-text-xs); }
.sg-swatch .meta b { display: block; font-family: var(--ds-font-body); }
.sg-swatch .meta code { color: var(--ds-ink-subtle); }
.sg-type-row { display: flex; align-items: baseline; gap: var(--ds-4); padding: var(--ds-2) 0; border-bottom: 1px dashed var(--ds-border); }
.sg-type-row .lbl { width: 90px; flex: 0 0 90px; font-size: var(--ds-text-xs); color: var(--ds-ink-subtle); }

@media (max-width: 991px) {
  .ds-app { grid-template-columns: 56px 1fr; }
}