/* IMS UI — canonical shared library. HostProfiler publishes /ims-ui.css.
   Both products load this file. See docs/SHARED_UI.md before editing. */
:root {
    color-scheme: light;
    --background: 220 40% 99%;
    --foreground: 222 25% 10%;
    --card: 0 0% 100%;
    --card-foreground: 222 25% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 25% 10%;
    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 100%;
    --brand-2: 199 89% 48%;
    --secondary: 220 30% 95.5%;
    --secondary-foreground: 222 25% 12%;
    --muted: 220 30% 95.5%;
    --muted-foreground: 220 10% 45%;
    --accent: 214 90% 95%;
    --accent-foreground: 224 70% 30%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --success: 152 65% 40%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --border: 220 20% 90%;
    --input: 220 20% 88%;
    --ring: 221 83% 53%;
    --radius: 0.625rem;
  }

.dark {
    color-scheme: dark;
    --background: 222 28% 6%;
    --foreground: 220 25% 96%;
    --card: 222 25% 8.5%;
    --card-foreground: 220 25% 96%;
    --popover: 222 26% 7.5%;
    --popover-foreground: 220 25% 96%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --brand-2: 199 89% 60%;
    --secondary: 222 20% 14%;
    --secondary-foreground: 220 25% 96%;
    --muted: 222 20% 14%;
    --muted-foreground: 220 12% 64%;
    --accent: 217 32% 17%;
    --accent-foreground: 214 90% 88%;
    --destructive: 0 62.8% 52%;
    --destructive-foreground: 0 0% 98%;
    --success: 152 60% 48%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 54%;
    --warning-foreground: 0 0% 100%;
    --border: 222 18% 16%;
    --input: 222 18% 18%;
    --ring: 217 91% 60%;
  }
:root { --ims-font: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { font-family: var(--ims-font); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.ims-header { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background) / .95); padding: 12px 24px; backdrop-filter: blur(12px); }
.ims-brand { display: flex; align-items: center; gap: 12px; }
.ims-logo { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(135deg,hsl(var(--primary)),hsl(var(--brand-2))); color: white; box-shadow: 0 4px 14px -4px hsl(var(--primary) / .45); }
.ims-brand-name { font-size: 16px; font-weight: 800; letter-spacing: -.4px; line-height: 1.3; }
.ims-brand-name span { background: linear-gradient(110deg,hsl(var(--primary)),hsl(var(--brand-2))); background-clip: text; color: transparent; }
.ims-brand-subtitle { font-size: 12px; line-height: 1.5; font-weight: 500; color: hsl(var(--muted-foreground)); }
.ims-nav { display:flex; align-items:center; gap:4px; padding:4px; border-radius:8px; background:hsl(var(--muted)); overflow-x:auto; }
.ims-nav a, .ims-nav button { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; height:28px; padding:0 12px; font-size:12px; font-weight:500; border-radius:6px; border:0; color:hsl(var(--foreground)); background:transparent; text-decoration:none; }
.ims-nav .is-active, .ims-nav .ims-button-primary { color:white; background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--brand-2))); box-shadow:0 4px 14px -4px hsl(var(--primary) / .45); }
.ims-nav a:hover, .ims-nav button:hover { filter:brightness(1.12); }
.ims-user { margin-left:auto; display:flex; align-items:center; gap:12px; color:hsl(var(--muted-foreground)); font-size:12px; }
.flow-primary, .flow-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; border-radius:calc(var(--radius) - 2px); padding:7px 16px; font-size:14px; font-weight:500; cursor:pointer; transition:filter .15s, background .15s; }
.ims-button.ims-button-primary, .flow-primary { color:hsl(var(--primary-foreground)); background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--brand-2))); border:1px solid transparent; box-shadow:0 4px 14px -4px hsl(var(--primary) / .45); }
.ims-button-primary:hover, .flow-primary:hover { filter:brightness(1.1); }
.flow-secondary { color:hsl(var(--foreground)); background:hsl(var(--secondary)); border:1px solid hsl(var(--border)); }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, tr:focus-visible { outline:2px solid hsl(var(--ring)); outline-offset:3px; }
.flow-window { max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; overflow:visible; min-height:100vh; background:hsl(var(--background)); }
body:has(.flow-window), body:has(.flow-login) { padding:0; }
.flow-main { padding:24px; }
.flow-brand-name, .flow-brand-subtitle { font:inherit; }
.flow-page-heading h2, .flow-pack-toolbar h2 { font-size:20px; font-weight:700; letter-spacing:-.5px; }
.flow-subtle { line-height:1.6; }
.flow-searchbar, .flow-segment, .flow-history, .flow-catalog-table { border-color:hsl(var(--border)); background:hsl(var(--card)); border-radius:var(--radius); }
.flow-catalog-table, .flow-history { overflow-x:auto; }
.flow-catalog-table table, .flow-history table { min-width:780px; }
.flow-window input[type=text], .flow-window input[type=email], .flow-window input[type=password], .flow-window select, .flow-window textarea, .flow-pack-dialog input, .flow-pack-dialog select, .flow-pack-dialog textarea { box-sizing:border-box; min-height:36px; padding:8px 12px; color:hsl(var(--foreground)); background:hsl(var(--background)); border:1px solid hsl(var(--input)); border-radius:calc(var(--radius) - 2px); font:inherit; font-size:14px; }
.flow-window textarea, .flow-pack-dialog textarea { width:100%; resize:vertical; line-height:1.6; }
.flow-pack-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0; }
.flow-pack-toolbar > :first-child { flex:1; }
.flow-pack-toolbar select { margin-left:8px; }
.flow-pack-dialog { color:hsl(var(--foreground)); background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:12px; padding:24px; width:min(820px, calc(100vw - 32px)); max-height:85vh; overflow:auto; box-shadow:0 24px 80px #0008; }
.flow-pack-dialog::backdrop { background:#0008; backdrop-filter:blur(4px); }
.flow-pack-fields { border:0; padding:0; margin:0; display:grid; gap:16px; min-width:0; }
.flow-pack-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.flow-pack-group { border:1px solid hsl(var(--border)); border-radius:10px; padding:16px; }
.flow-pack-group .flow-pack-toolbar { margin-top:0; }
.flow-pack-footer { position:sticky; bottom:-24px; background:hsl(var(--card)); border-top:1px solid hsl(var(--border)); display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 0 0; margin-top:20px; }
.flow-pack-footer > :first-child { flex:1; }
.flow-field { display:flex; flex-direction:column; gap:7px; font-size:13px; }
.flow-notice { border-radius:8px; margin:12px 0; line-height:1.6; }
:root {
  --flow-bg:hsl(var(--background)); --flow-shell:hsl(var(--card)); --flow-surface:hsl(var(--card));
  --flow-surface-alt:hsl(var(--muted)); --flow-hover:hsl(var(--accent)); --flow-selected:hsl(var(--accent));
  --flow-text:hsl(var(--foreground)); --flow-muted:hsl(var(--muted-foreground)); --flow-border:hsl(var(--border));
  --flow-blue:hsl(var(--primary)); --flow-blue-fill:hsl(var(--primary)); --flow-blue-on:hsl(var(--primary-foreground));
  --flow-green:hsl(var(--success)); --flow-green-bg:hsl(var(--success) / .12);
  --flow-orange:hsl(var(--warning)); --flow-orange-bg:hsl(var(--warning) / .12);
  --flow-red:hsl(var(--destructive)); --flow-red-bg:hsl(var(--destructive) / .12);
}
@media(max-width:760px) {
  .ims-header { padding:12px 16px; gap:12px; }
  .ims-nav { order:3; width:100%; }
  .ims-user span { display:none; }
  .flow-main { padding:16px; }
  .flow-pack-grid { grid-template-columns:1fr; }
  .flow-pack-dialog { padding:16px; }
  .flow-pack-footer { bottom:-16px; }
  .flow-segment-head { flex-wrap:wrap; }
}

@media(max-width:760px) {
  .flow-searchbar { grid-template-columns:minmax(0,1fr) !important; }
  .flow-field, .flow-pack-toolbar > * { min-width:0; }
  .flow-page-heading, .flow-list-toolbar { flex-wrap:wrap; }
  .flow-section-gap > .flow-pack-toolbar > :first-child { flex-basis:100%; }
  .flow-pack-toolbar > label { flex:1; }
  .flow-pack-toolbar label select { width:100%; max-width:100%; margin-left:0; }
  .flow-pack-dialog { box-sizing:border-box; }
}