/*
  SigConfig shared UI kit.
  The single source of truth for page chrome, buttons, tables, inputs and badges.
  Rules for using it live in docs/UI_DESIGN_RULES.md - read that before building UI.
  Every class is prefixed "ui-" so it never collides with a tool's local CSS.
  Hosts such as admin.html style bare button/input elements, so every state here
  (hover, active) sets its own background and border instead of inheriting them.
*/

:root{
  --ui-font:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ui-font-mono:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;

  --ui-bg:#ffffff;
  --ui-surface:#ffffff;
  --ui-subtle:#f7f9fb;
  --ui-hover:#f3f6f9;
  --ui-line:#e3e8ed;
  --ui-line-strong:#ccd6df;

  --ui-ink:#1a2b3b;
  --ui-text:#2a3b4d;
  --ui-muted:#6b7b8c;
  --ui-faint:#94a3b1;

  --ui-blue:#0f6cbd;
  --ui-blue-hover:#0b5aa0;
  --ui-blue-soft:#eaf3fb;
  --ui-focus:0 0 0 3px rgba(15,108,189,.18);

  --ui-success:#0f7a4f;   --ui-success-soft:#e8f5ee;
  --ui-warning:#9a5b00;   --ui-warning-soft:#fdf3e1;
  --ui-danger:#c0292b;    --ui-danger-soft:#fdecec;

  --ui-radius:6px;
  --ui-radius-lg:8px;
  --ui-h:32px;          /* standard control height: buttons, inputs, selects */
  --ui-h-sm:28px;
}

/* ---------- Page layout ---------- */
.ui-page{margin:0 auto;max-width:1200px;padding:24px}
.ui-page-header{align-items:flex-start;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:20px}
.ui-page-title{color:var(--ui-ink);font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0}
.ui-page-desc{color:var(--ui-muted);font-size:14px;line-height:1.5;margin:4px 0 0;max-width:640px}
.ui-actions{align-items:center;display:flex;flex-wrap:wrap;gap:8px}
.ui-section{margin-top:32px}
.ui-section-title{color:var(--ui-ink);font-size:15px;font-weight:600;margin:0 0 12px}
.ui-toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ui-spacer{flex:1}
.ui-back{align-items:center;background:none;border:0;border-radius:0;color:var(--ui-muted);cursor:pointer;display:inline-flex;font:inherit;font-size:13px;font-weight:500;gap:4px;margin:0 0 6px;padding:0}
.ui-back:hover{background:none;color:var(--ui-blue)}

/* ---------- Buttons ---------- */
.ui-btn{
  align-items:center;border:1px solid transparent;border-radius:var(--ui-radius);cursor:pointer;display:inline-flex;
  font:inherit;font-family:var(--ui-font);font-size:13.5px;font-weight:500;gap:6px;height:var(--ui-h);justify-content:center;
  line-height:1;padding:0 12px;text-decoration:none;transition:background-color .12s ease,border-color .12s ease,color .12s ease;white-space:nowrap;
}
.ui-btn svg{flex:0 0 auto;height:16px;width:16px}
.ui-btn[hidden],.ui-row-actions[hidden]{display:none}
.ui-btn:focus-visible{box-shadow:var(--ui-focus);outline:0}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{cursor:not-allowed;opacity:.45}
/* Disabled buttons keep their own fill on hover; the shell's bare button:hover would turn them blue. */
.ui-btn-primary:disabled{background:var(--ui-blue);border-color:var(--ui-blue);color:#fff}
.ui-btn-secondary:disabled{background:#fff;border-color:var(--ui-line-strong);color:var(--ui-text)}
.ui-btn-ghost:disabled{background:transparent;border-color:transparent}
.ui-btn-danger:disabled{background:#fff;border-color:var(--ui-line-strong);color:var(--ui-danger)}
.ui-btn-primary{background:var(--ui-blue);border-color:var(--ui-blue);color:#fff}
.ui-btn-primary:hover:not(:disabled){background:var(--ui-blue-hover);border-color:var(--ui-blue-hover)}
.ui-btn-secondary{background:#fff;border-color:var(--ui-line-strong);color:var(--ui-text)}
.ui-btn-secondary:hover:not(:disabled){background:var(--ui-hover);border-color:#b7c4d0}
.ui-btn-ghost{background:transparent;color:var(--ui-text)}
.ui-btn-ghost:hover:not(:disabled){background:var(--ui-hover);border-color:transparent}
.ui-btn-danger{background:#fff;border-color:var(--ui-line-strong);color:var(--ui-danger)}
.ui-btn-danger:hover:not(:disabled){background:var(--ui-danger-soft);border-color:#eab8b8}
.ui-btn-sm{font-size:13px;height:var(--ui-h-sm);padding:0 10px}
/* Square icon-only button. Always give it aria-label + title. */
.ui-btn-icon{padding:0;width:var(--ui-h)}
.ui-btn-icon.ui-btn-sm{width:var(--ui-h-sm)}
.ui-btn-ghost.ui-btn-icon{color:var(--ui-muted)}
.ui-btn-ghost.ui-btn-icon:hover:not(:disabled){color:var(--ui-ink)}
.ui-btn-ghost.ui-btn-icon.ui-btn-danger-hover:hover:not(:disabled){background:var(--ui-danger-soft);color:var(--ui-danger)}

/* ---------- Icons (shared/icons.js) ---------- */
/* 16px everywhere; 14px in dense inline text; 20px only for the shell's nav and empty states. */
.ui-icon{display:block;flex:0 0 auto;height:16px;width:16px}
[data-icon],.svg-icon{align-items:center;display:inline-flex;flex:0 0 auto;justify-content:center;line-height:0}
.ui-icon-14,.ui-icon-14 .ui-icon{height:14px;width:14px}
.ui-icon-20,.ui-icon-20 .ui-icon{height:20px;width:20px}

/* ---------- Inputs ---------- */
.ui-input,.ui-select{
  background:#fff;border:1px solid var(--ui-line-strong);border-radius:var(--ui-radius);color:var(--ui-ink);
  font:inherit;font-family:var(--ui-font);font-size:13.5px;height:var(--ui-h);padding:0 10px;
}
.ui-input:focus,.ui-select:focus{border-color:var(--ui-blue);box-shadow:var(--ui-focus);outline:0}
.ui-input::placeholder{color:var(--ui-faint)}
.ui-input:disabled,.ui-select:disabled,.ui-input:disabled:hover,.ui-select:disabled:hover{background:var(--ui-subtle);border-color:var(--ui-line);color:var(--ui-muted);cursor:not-allowed}
.ui-search{min-width:240px;width:320px;max-width:100%}
/* Hosts set select{width:100%}; a filter select in a toolbar sizes to its content. */
.ui-toolbar .ui-select{width:auto}
.ui-textarea{height:auto;line-height:1.45;min-height:96px;padding:8px 10px;resize:vertical;width:100%}
/* Form field: label (13px/500, sentence case) above its control. */
.ui-field{display:grid;gap:6px;margin-bottom:16px}
.ui-label{color:var(--ui-text);font-size:13px;font-weight:500}
/* Two-column form on desktop, one on mobile; .ui-field-wide spans both. Footer: secondary left, primary right. */
.ui-form-grid{column-gap:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-form-grid .ui-field-wide{grid-column:1/-1}
.ui-field .ui-input,.ui-field .ui-select{width:100%}
.ui-field-hint{color:var(--ui-muted);font-size:12.5px;line-height:1.45}
.ui-form-footer{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:4px}

/* Segmented control - for filters and small mode switches (not for navigation tabs). */
.ui-segmented{background:var(--ui-subtle);border:1px solid var(--ui-line);border-radius:var(--ui-radius);display:inline-flex;gap:2px;padding:2px;width:max-content}
.ui-segmented button{
  align-items:center;background:transparent;border:0;border-radius:4px;color:var(--ui-muted);cursor:pointer;display:inline-flex;
  font:inherit;font-family:var(--ui-font);font-size:13px;font-weight:500;gap:6px;height:calc(var(--ui-h) - 6px);padding:0 10px;white-space:nowrap;
}
.ui-segmented button:hover{background:transparent;color:var(--ui-ink)}
.ui-segmented button.active:hover,.ui-segmented button[aria-checked="true"]:hover{background:#fff}
.ui-segmented button.active,.ui-segmented button[aria-checked="true"]{background:#fff;box-shadow:0 1px 2px rgba(23,48,68,.10);color:var(--ui-ink)}
.ui-count{color:var(--ui-faint);font-variant-numeric:tabular-nums}

/* ---------- Tabs (sections of one record page) ---------- */
.ui-tabs{border-bottom:1px solid var(--ui-line);display:flex;gap:20px;margin-bottom:20px;overflow-x:auto}
.ui-tabs button{
  background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--ui-muted);cursor:pointer;
  font:inherit;font-family:var(--ui-font);font-size:13.5px;font-weight:500;height:36px;margin-bottom:0;padding:0;white-space:nowrap;
}
.ui-tabs button:hover,.ui-tabs button:disabled{background:transparent;border-color:transparent;color:var(--ui-ink)}
.ui-tabs button:focus-visible{box-shadow:var(--ui-focus);outline:0}
.ui-tabs button.active,.ui-tabs button[aria-selected="true"]{background:transparent;border-bottom-color:var(--ui-blue);color:var(--ui-ink)}

/* ---------- Tables ---------- */
/* One bordered container, flat rows. Never put a table inside a padded card. */
.ui-table-wrap{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);overflow:auto}
.ui-table{border-collapse:collapse;font-size:13.5px;width:100%}
.ui-table th{
  background:var(--ui-subtle);border-bottom:1px solid var(--ui-line);color:var(--ui-muted);font-size:12px;font-weight:500;
  height:36px;padding:0 12px;text-align:left;white-space:nowrap;
}
.ui-table td{border-top:1px solid var(--ui-line);color:var(--ui-text);height:48px;padding:8px 12px;vertical-align:middle}
.ui-table tbody tr:first-child td{border-top:0}
.ui-table tbody tr:hover td{background:var(--ui-subtle)}
.ui-table tbody tr.ui-row-link{cursor:pointer}
.ui-table tbody tr.ui-row-link:focus-visible{outline:2px solid var(--ui-blue);outline-offset:-2px}
.ui-table .ui-cell-primary{color:var(--ui-ink);font-weight:500}
.ui-table .ui-cell-sub{color:var(--ui-muted);display:block;font-size:12.5px;margin-top:2px}
.ui-table .ui-num{font-variant-numeric:tabular-nums;text-align:right}
.ui-table .ui-mono{font-family:var(--ui-font-mono);font-size:12.5px}
.ui-table .ui-col-actions{text-align:right;white-space:nowrap;width:1%}
.ui-row-actions{display:inline-flex;gap:2px;justify-content:flex-end}
.ui-table-empty{color:var(--ui-muted);padding:40px 16px;text-align:center}
.ui-table-empty strong{color:var(--ui-ink);display:block;font-weight:500;margin-bottom:4px}

/* ---------- Badges ---------- */
.ui-badge{
  align-items:center;background:var(--ui-subtle);border:1px solid var(--ui-line);border-radius:4px;color:var(--ui-text);
  display:inline-flex;font-size:12px;font-weight:500;gap:5px;height:22px;line-height:1;padding:0 8px;white-space:nowrap;
}
.ui-badge::before{background:currentColor;border-radius:50%;content:"";height:6px;opacity:.85;width:6px}
.ui-badge-success{background:var(--ui-success-soft);border-color:transparent;color:var(--ui-success)}
.ui-badge-warning{background:var(--ui-warning-soft);border-color:transparent;color:var(--ui-warning)}
.ui-badge-danger{background:var(--ui-danger-soft);border-color:transparent;color:var(--ui-danger)}
.ui-badge-info{background:var(--ui-blue-soft);border-color:transparent;color:var(--ui-blue)}

/* ---------- Panels (forms, detail blocks) ---------- */
.ui-panel{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);padding:20px}
.ui-panel-title{align-items:center;color:var(--ui-ink);display:flex;font-size:15px;font-weight:600;gap:8px;justify-content:space-between;margin:0 0 12px}

/* ---------- Dialogs ---------- */
/* Confirmations and small forms, built by shared/ui-dialog.js (SIGCONFIG_UI.confirm). Never window.confirm(). */
.ui-dialog{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);box-shadow:0 16px 48px rgba(23,48,68,.18);color:var(--ui-text);font-family:var(--ui-font);max-width:calc(100vw - 32px);padding:0;width:420px}
.ui-dialog::backdrop{background:rgba(17,26,36,.36)}
.ui-dialog-inner{padding:20px}
.ui-dialog-title{color:var(--ui-ink);font-size:15px;font-weight:600;line-height:1.35;margin:0 0 6px}
.ui-dialog-body{color:var(--ui-muted);font-size:13.5px;line-height:1.5;margin:0;overflow-wrap:anywhere;white-space:pre-line}
.ui-dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}

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

@media (max-width:760px){
  .ui-page{padding:16px}
  .ui-search{width:100%}
  .ui-form-grid{grid-template-columns:1fr}
  .ui-table{min-width:720px}   /* scroll sideways inside .ui-table-wrap instead of crushing columns */
}