/* ============================================================================
   IBS ERP — shared web design system (login, landing, portal)
   Loaded on all website pages via hooks.web_include_css.
   All component classes are prefixed `ibs-` to avoid colliding with Frappe's
   Bootstrap website CSS (.btn / .card / .input already exist there).
   Tokens are the single source of truth — never inline a hex that duplicates one.
   Steel-navy identity, matched to the desk theme (theme.css --second-color #093d6b).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* neutrals — cool, slight blue bias */
  --ibs-bg: #eef1f6;
  --ibs-surface: #ffffff;
  --ibs-surface-2: #f6f8fb;
  --ibs-surface-3: #eef2f8;
  --ibs-ink: #0f1b2d;
  --ibs-muted: #55677a;
  --ibs-faint: #64748b;            /* AA-tuned: 4.86:1 on white */
  --ibs-hair: #e3e8f0;
  --ibs-hair-strong: #cfd9e6;

  /* brand — steel navy (== theme.css palette) */
  --ibs-navy-900: #05233f;
  --ibs-navy-800: #093d6b;
  --ibs-navy-700: #0d4a80;
  --ibs-steel: #2f6fb0;
  --ibs-steel-soft: #4b81b1;

  /* accent (brand action color) */
  --ibs-accent: #0d4a80;
  --ibs-accent-strong: #093d6b;
  --ibs-accent-ink: #ffffff;
  --ibs-accent-tint: rgba(13,74,128,.10);

  /* semantic — separate from the brand accent */
  --ibs-ok: #15803d;   --ibs-ok-bg: rgba(21,128,61,.12);
  --ibs-warn: #b45309; --ibs-warn-bg: rgba(180,83,9,.13);
  --ibs-crit: #c62b2b; --ibs-crit-bg: rgba(198,43,43,.12);
  --ibs-info: #0d4a80; --ibs-info-bg: rgba(13,74,128,.10);

  --ibs-shadow-sm: 0 1px 2px rgba(9,30,55,.06), 0 2px 6px rgba(9,30,55,.06);
  --ibs-shadow: 0 1px 2px rgba(9,30,55,.06), 0 14px 34px rgba(9,30,55,.12);
  --ibs-shadow-lg: 0 30px 70px rgba(9,30,55,.22);
  --ibs-r: 12px; --ibs-r-lg: 18px;

  --ibs-font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ibs-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ibs-bg:#070d16; --ibs-surface:#0e1826; --ibs-surface-2:#0b1420; --ibs-surface-3:#111e2f;
    --ibs-ink:#e9f1f9; --ibs-muted:#9db0c2; --ibs-faint:#8194a8;   /* AA-tuned: 5.5:1 on #0e1826 */
    --ibs-hair:#1b2a3b; --ibs-hair-strong:#26384d;
    --ibs-accent:#3d82c9; --ibs-accent-strong:#5b9bda; --ibs-accent-ink:#06111f; --ibs-accent-tint:rgba(61,130,201,.16);
    --ibs-ok:#4ade80; --ibs-ok-bg:rgba(74,222,128,.14); --ibs-warn:#fbbf24; --ibs-warn-bg:rgba(251,191,36,.14);
    --ibs-crit:#f87171; --ibs-crit-bg:rgba(248,113,113,.14); --ibs-info:#5b9bda; --ibs-info-bg:rgba(91,155,218,.14);
    --ibs-shadow-sm:0 1px 2px rgba(0,0,0,.4); --ibs-shadow:0 14px 34px rgba(0,0,0,.5); --ibs-shadow-lg:0 30px 70px rgba(0,0,0,.6);
  }
}
/* explicit theme override wins over the media query in both directions */
:root[data-theme="light"]{--ibs-bg:#eef1f6;--ibs-surface:#fff;--ibs-surface-2:#f6f8fb;--ibs-surface-3:#eef2f8;--ibs-ink:#0f1b2d;--ibs-muted:#55677a;--ibs-faint:#64748b;--ibs-hair:#e3e8f0;--ibs-hair-strong:#cfd9e6;--ibs-accent:#0d4a80;--ibs-accent-strong:#093d6b;--ibs-accent-ink:#fff;--ibs-accent-tint:rgba(13,74,128,.10);--ibs-ok:#15803d;--ibs-ok-bg:rgba(21,128,61,.12);--ibs-warn:#b45309;--ibs-warn-bg:rgba(180,83,9,.13);--ibs-crit:#c62b2b;--ibs-crit-bg:rgba(198,43,43,.12);--ibs-info:#0d4a80;--ibs-info-bg:rgba(13,74,128,.10);--ibs-shadow-sm:0 1px 2px rgba(9,30,55,.06),0 2px 6px rgba(9,30,55,.06);--ibs-shadow:0 1px 2px rgba(9,30,55,.06),0 14px 34px rgba(9,30,55,.12);--ibs-shadow-lg:0 30px 70px rgba(9,30,55,.22);}
:root[data-theme="dark"]{--ibs-bg:#070d16;--ibs-surface:#0e1826;--ibs-surface-2:#0b1420;--ibs-surface-3:#111e2f;--ibs-ink:#e9f1f9;--ibs-muted:#9db0c2;--ibs-faint:#8194a8;--ibs-hair:#1b2a3b;--ibs-hair-strong:#26384d;--ibs-accent:#3d82c9;--ibs-accent-strong:#5b9bda;--ibs-accent-ink:#06111f;--ibs-accent-tint:rgba(61,130,201,.16);--ibs-ok:#4ade80;--ibs-ok-bg:rgba(74,222,128,.14);--ibs-warn:#fbbf24;--ibs-warn-bg:rgba(251,191,36,.14);--ibs-crit:#f87171;--ibs-crit-bg:rgba(248,113,113,.14);--ibs-info:#5b9bda;--ibs-info-bg:rgba(91,155,218,.14);--ibs-shadow-sm:0 1px 2px rgba(0,0,0,.4);--ibs-shadow:0 14px 34px rgba(0,0,0,.5);--ibs-shadow-lg:0 30px 70px rgba(0,0,0,.6);}

/* ---- scoped base (only affects our pages, not Frappe's markup) ---- */
.ibs-page, .ibs-page *, .ibs-page *::before, .ibs-page *::after { box-sizing: border-box; }
.ibs-page {
  font-family: var(--ibs-font);
  color: var(--ibs-ink);
  background: var(--ibs-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.ibs-page svg.ibs-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; }

/* ---- a11y: visible keyboard focus on every interactive element (≥3:1) ---- */
.ibs-page a:focus-visible,
.ibs-page button:focus-visible,
.ibs-page input:focus-visible,
.ibs-page [tabindex]:focus-visible,
.ibs-page .ibs-tile:focus-visible {
  outline: 2px solid var(--ibs-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .ibs-page *, .ibs-page *::before, .ibs-page *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
}

/* ============================ components ============================ */

/* buttons */
.ibs-btn {
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1;
  color: var(--ibs-accent-ink); background: var(--ibs-accent);
  border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; transition: background .15s, transform .05s;
}
.ibs-btn:hover { background: var(--ibs-accent-strong); color: var(--ibs-accent-ink); }
.ibs-btn:active { transform: translateY(1px); }
.ibs-btn--ghost { background: transparent; color: var(--ibs-ink); border: 1px solid var(--ibs-hair-strong); }
.ibs-btn--ghost:hover { border-color: var(--ibs-accent); color: var(--ibs-accent-strong); background: transparent; }
.ibs-btn--lg { padding: 13px 22px; font-size: 14.5px; border-radius: 12px; }
.ibs-btn--block { width: 100%; }

/* status pills — color + shape + text (survives grayscale) */
.ibs-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.ibs-pill .ibs-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ibs-pill--ok   { color: var(--ibs-ok);   background: var(--ibs-ok-bg); }
.ibs-pill--warn { color: var(--ibs-warn); background: var(--ibs-warn-bg); }
.ibs-pill--crit { color: var(--ibs-crit); background: var(--ibs-crit-bg); }
.ibs-pill--info { color: var(--ibs-info); background: var(--ibs-info-bg); }

/* cards */
.ibs-card { background: var(--ibs-surface); border: 1px solid var(--ibs-hair); border-radius: 14px; box-shadow: var(--ibs-shadow-sm); }

/* inputs */
.ibs-field { margin-bottom: 15px; }
.ibs-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--ibs-ink); }
.ibs-iw { position: relative; }
.ibs-input {
  width: 100%; font: inherit; font-size: 14px; color: var(--ibs-ink);
  background: var(--ibs-surface-2); border: 1px solid var(--ibs-hair-strong);
  border-radius: 10px; padding: 11px 12px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ibs-input::placeholder { color: var(--ibs-faint); }
.ibs-input:focus { outline: none; border-color: var(--ibs-accent); background: var(--ibs-surface); box-shadow: 0 0 0 3px var(--ibs-accent-tint); }

/* data table (dense, right-aligned numerics) */
.ibs-tbl-wrap { overflow-x: auto; }
.ibs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ibs-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ibs-faint); font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--ibs-hair); white-space: nowrap; }
.ibs-table td { padding: 11px 16px; border-bottom: 1px solid var(--ibs-hair); color: var(--ibs-ink); }
.ibs-table tr:last-child td { border-bottom: 0; }
.ibs-table tbody tr:hover { background: var(--ibs-surface-2); }
.ibs-table .ibs-num { font-variant-numeric: tabular-nums; text-align: right; }
.ibs-table .ibs-doc { font-family: var(--ibs-mono); font-size: 12px; color: var(--ibs-accent-strong); }

/* KPI tile */
.ibs-kpi { background: var(--ibs-surface); border: 1px solid var(--ibs-hair); border-radius: 12px; padding: 14px 16px; box-shadow: var(--ibs-shadow-sm); }
.ibs-kpi .ibs-kpi-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ibs-faint); }
.ibs-kpi .ibs-kpi-v { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; margin-top: 4px; letter-spacing: -.01em; }
.ibs-kpi .ibs-kpi-c { font-size: 11.5px; margin-top: 2px; font-family: var(--ibs-mono); }
.ibs-up { color: var(--ibs-ok); } .ibs-dn { color: var(--ibs-crit); }

/* misc helpers */
.ibs-eyebrow { font-family: var(--ibs-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ibs-accent-strong); }
.ibs-link { color: var(--ibs-accent-strong); text-decoration: none; font-weight: 500; }
.ibs-link:hover { text-decoration: underline; }
.ibs-tabnums { font-variant-numeric: tabular-nums; }