/* ============================================================================
   SMART INDUSTRY — Design System (CSS Foundation)
   For .NET 10 / Blazor Hybrid + MAUI
   ----------------------------------------------------------------------------
   Drop this file in wwwroot/css/ and reference it once from index.html
   (BlazorWebView) — see README.md for setup.

   THEME + ACCENT
   - Theme is driven by a `data-theme` attribute ("dark" | "light") set on a
     root wrapper element (e.g. the <div> in MainLayout.razor).
   - Default accent follows the theme: dark -> blue, light -> emerald.
   - You can force a specific accent on the same element with
     `data-accent="orange|blue|emerald|violet"`.
   All values are CSS custom properties prefixed with `--si-`.
   ============================================================================ */

/* ---- Fonts -------------------------------------------------------------------
   Online: keep the @import below.
   Offline (MAUI): bundle the .woff2 files and replace with @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */

/* DARK theme (default) — default accent: BLUE */
:root,
[data-theme="dark"] {
  /* surfaces */
  --si-bg:        #09090c;
  --si-bg-2:      #0f0e13;
  --si-panel:     rgba(255,255,255,0.045);
  --si-panel-2:   rgba(255,255,255,0.07);
  --si-border:    rgba(255,255,255,0.09);
  --si-border-2:  rgba(255,255,255,0.14);
  /* text */
  --si-text:      #f6f3ee;
  --si-muted:     #9d968b;
  --si-faint:     #6b655d;
  /* accent (blue) */
  --si-accent:    #5b8cff;
  --si-accent-2:  #7a5bff;
  --si-accent-ink:#050a1a;
  --si-glow:      rgba(91,140,255,0.50);
  --si-glow-2:    rgba(122,91,255,0.40);
  /* effects */
  --si-shadow:    0 30px 70px -30px rgba(0,0,0,0.70);

  /* status colors (theme-independent) */
  --si-high:   #ff4d4d;
  --si-medium: #febc2e;
  --si-low:    #16c79a;

  /* radius scale */
  --si-r-sm: 8px;
  --si-r-md: 13px;
  --si-r-lg: 18px;
  --si-r-xl: 24px;
  --si-r-pill: 999px;

  /* spacing scale (multiples of 4) */
  --si-s-1: 4px;  --si-s-2: 8px;  --si-s-3: 12px; --si-s-4: 16px;
  --si-s-5: 20px; --si-s-6: 24px; --si-s-8: 32px; --si-s-12: 48px;
  --si-s-16: 64px; --si-s-24: 96px;

  /* type families */
  --si-font-display: 'Space Grotesk', system-ui, sans-serif;
  --si-font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --si-font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* LIGHT theme — default accent: EMERALD */
[data-theme="light"] {
  --si-bg:        #f4f1ec;
  --si-bg-2:      #fbfaf7;
  --si-panel:     rgba(255,255,255,0.72);
  --si-panel-2:   #ffffff;
  --si-border:    rgba(20,16,12,0.10);
  --si-border-2:  rgba(20,16,12,0.16);
  --si-text:      #1a1511;
  --si-muted:     #6c655c;
  --si-faint:     #9a9389;
  --si-accent:    #16c79a;
  --si-accent-2:  #0bb37e;
  --si-accent-ink:#03140e;
  --si-glow:      rgba(22,199,154,0.30);
  --si-glow-2:    rgba(11,179,126,0.22);
  --si-shadow:    0 30px 70px -34px rgba(60,40,20,0.30);
}

/* Explicit accent overrides — apply on the same element as data-theme.
   Declared AFTER the theme rules so they win. */
[data-accent="orange"]  { --si-accent:#ff6a2c; --si-accent-2:#ff2d72; --si-accent-ink:#1a0a04; --si-glow:rgba(255,106,44,0.50); --si-glow-2:rgba(255,45,114,0.40); }
[data-accent="blue"]    { --si-accent:#5b8cff; --si-accent-2:#7a5bff; --si-accent-ink:#050a1a; --si-glow:rgba(91,140,255,0.50); --si-glow-2:rgba(122,91,255,0.40); }
[data-accent="emerald"] { --si-accent:#16c79a; --si-accent-2:#0bb37e; --si-accent-ink:#03140e; --si-glow:rgba(22,199,154,0.50); --si-glow-2:rgba(11,179,126,0.40); }
[data-accent="violet"]  { --si-accent:#b15bff; --si-accent-2:#ff4d9d; --si-accent-ink:#140518; --si-glow:rgba(177,91,255,0.50); --si-glow-2:rgba(255,77,157,0.40); }

/* ============================================================================
   2. BASE / RESET
   ============================================================================ */
.si-root {
  position: relative;
  min-height: 100vh;
  background: var(--si-bg);
  color: var(--si-text);
  font-family: var(--si-font-body);
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
}
.si-root *, .si-root *::before, .si-root *::after { box-sizing: border-box; }
.si-container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */
.si-eyebrow {
  font-family: var(--si-font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--si-accent);
}
.si-eyebrow--muted { color: var(--si-faint); }
.si-h1 { font-family: var(--si-font-display); font-weight: 700; font-size: clamp(40px,6.4vw,78px); line-height: 1.02; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.si-h2 { font-family: var(--si-font-display); font-weight: 700; font-size: clamp(30px,4vw,46px); line-height: 1.08; letter-spacing: -.03em; margin: 0; }
.si-h3 { font-family: var(--si-font-display); font-weight: 600; font-size: 19px; margin: 0; }
.si-lead { color: var(--si-muted); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.si-mono { font-family: var(--si-font-mono); }
.si-gradient-text { background: linear-gradient(115deg, var(--si-accent), var(--si-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================================
   4. BUTTONS
   ============================================================================ */
.si-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--si-font-body); font-weight: 600; font-size: 14.5px;
  padding: 11px 18px; border-radius: var(--si-r-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.si-btn--lg { font-size: 15.5px; padding: 15px 26px; }
.si-btn--primary {
  color: var(--si-accent-ink);
  background: linear-gradient(135deg, var(--si-accent), var(--si-accent-2));
  box-shadow: 0 10px 30px -10px var(--si-glow);
}
.si-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -12px var(--si-glow); }
.si-btn--ghost {
  color: var(--si-text);
  background: var(--si-panel); border-color: var(--si-border-2);
  backdrop-filter: blur(10px);
}
.si-btn--ghost:hover { background: var(--si-panel-2); border-color: var(--si-text); }

/* ============================================================================
   5. SURFACES — glass panels & cards
   ============================================================================ */
.si-glass {
  background: var(--si-panel);
  border: 1px solid var(--si-border);
  border-radius: var(--si-r-lg);
  backdrop-filter: blur(14px) saturate(140%);
}
.si-glass--strong { border-color: var(--si-border-2); background: var(--si-panel); box-shadow: var(--si-shadow); }

/* hover-lift feature card */
.si-card {
  position: relative; padding: 26px;
  border-radius: var(--si-r-lg);
  border: 1px solid var(--si-border);
  background: var(--si-panel);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease;
}
.si-card:hover { transform: translateY(-5px); border-color: var(--si-border-2); }
.si-card__icon {
  width: 46px; height: 46px; border-radius: var(--si-r-md);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--si-accent), var(--si-accent-2));
  color: var(--si-accent-ink);
  box-shadow: 0 12px 26px -12px var(--si-glow);
  margin-bottom: 18px;
}

/* KPI card */
.si-kpi { padding: 14px; border-radius: var(--si-r-md); border: 1px solid var(--si-border); background: var(--si-bg-2); }
.si-kpi__label { font-family: var(--si-font-mono); font-size: 11px; color: var(--si-muted); letter-spacing: .04em; }
.si-kpi__value { font-family: var(--si-font-display); font-weight: 700; font-size: 30px; margin-top: 6px; }
.si-kpi__value small { font-size: 15px; color: var(--si-muted); }
.si-kpi__delta { font-size: 11.5px; margin-top: 2px; }
.si-kpi__delta--up { color: var(--si-low); }
.si-kpi__delta--down { color: var(--si-low); } /* maintenance "down" is good (fewer OS) */

/* status chips (work-order priority) */
.si-chip { font-family: var(--si-font-mono); font-size: 10px; padding: 3px 7px; border-radius: var(--si-r-sm); }
.si-chip--high   { background: rgba(255,77,77,.14);  color: #ff6b6b; }
.si-chip--medium { background: rgba(254,188,46,.14); color: #febc2e; }
.si-chip--low    { background: rgba(22,199,154,.14); color: #16c79a; }
.si-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.si-dot--high { background: var(--si-high); }
.si-dot--medium { background: var(--si-medium); }
.si-dot--low { background: var(--si-low); }

/* pill badge (live status, etc.) */
.si-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: var(--si-r-pill);
  border: 1px solid var(--si-border-2); background: var(--si-panel);
  backdrop-filter: blur(10px);
  font-family: var(--si-font-mono); font-size: 12px; letter-spacing: .04em; color: var(--si-muted);
}

/* ============================================================================
   6. LAYOUT HELPERS
   ============================================================================ */
.si-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.si-stack { display: flex; flex-direction: column; }
.si-row { display: flex; align-items: center; }

/* ============================================================================
   7. AMBIENT BACKGROUND (glows + grid)  — see README for markup
   ============================================================================ */
.si-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.si-grid-bg {
  position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(var(--si-border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--si-border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 62%);
          mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 62%);
}
.si-glow-blob { position: absolute; border-radius: 50%; filter: blur(30px); }
.si-glow-blob--a { top: -18%; left: 8%; width: 46vw; height: 46vw; background: radial-gradient(circle, var(--si-glow), transparent 66%); animation: si-floatA 16s ease-in-out infinite; }
.si-glow-blob--b { top: 6%; right: -6%; width: 38vw; height: 38vw; background: radial-gradient(circle, var(--si-glow-2), transparent 66%); animation: si-floatB 19s ease-in-out infinite; }

/* content above the ambient layer */
.si-layer { position: relative; z-index: 1; }

/* ============================================================================
   8. ANIMATIONS
   Reveal-on-scroll: add `.si-reveal` to elements; a small IntersectionObserver
   (JS interop, see README) adds `.is-in` when they enter the viewport.
   ============================================================================ */
.si-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,.7,.2,1), transform .8s cubic-bezier(.22,.7,.2,1); }
.si-reveal.is-in { opacity: 1; transform: none; }

@keyframes si-floatA { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(4%,-6%) scale(1.08);} }
@keyframes si-floatB { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-5%,5%) scale(1.12);} }
@keyframes si-barRise { from { transform: scaleY(.2);} to { transform: scaleY(1);} }
@keyframes si-pulse { 0%,100%{ opacity:.5;} 50%{ opacity:1;} }

.si-pulse { animation: si-pulse 2.4s infinite; }

::selection { background: var(--si-accent); color: var(--si-accent-ink); }

/* ============================================================================
   9. APP SHELL — sidebar + topbar + content (dashboard / work orders / assets / users)
   The collapsible sidebar is driven by a `data-sb` attribute ("true"|"false")
   toggled by the hamburger button (see ThemeState pattern → SidebarState).
   ============================================================================ */
.si-app     { display: flex; height: 100vh; overflow: hidden; position: relative; z-index: 1; }
.si-sidebar { flex-shrink: 0; height: 100vh; background: var(--si-bg-2); border-right: 1px solid var(--si-border); display: flex; flex-direction: column; padding: 16px 12px; overflow: hidden; transition: width .28s cubic-bezier(.4,0,.2,1); }
.si-sidebar[data-sb="true"]  { width: 250px; }
.si-sidebar[data-sb="false"] { width: 78px; }
.si-sidebar[data-sb="false"] .si-lbl     { opacity: 0; width: 0; margin: 0; overflow: hidden; white-space: nowrap; pointer-events: none; }
.si-sidebar[data-sb="false"] .si-navbtn  { justify-content: center; }
.si-lbl { transition: opacity .2s; }

.si-navbtn { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 12px; border: none; background: transparent; color: var(--si-muted); border-radius: 11px; cursor: pointer; font-family: var(--si-font-body); font-size: 14.5px; font-weight: 500; transition: background .18s, color .18s; }
.si-navbtn:hover     { background: var(--si-panel-2); color: var(--si-text); }
.si-navbtn.is-active { background: color-mix(in srgb, var(--si-accent) 16%, transparent); color: var(--si-accent); }

.si-main    { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.si-topbar  { flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--si-border); background: color-mix(in srgb, var(--si-bg) 70%, transparent); backdrop-filter: blur(14px); }
.si-content { flex: 1; overflow-y: auto; padding: 26px 24px 40px; }

.si-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--si-border); background: var(--si-panel); color: var(--si-text); cursor: pointer; transition: background .18s; }
.si-iconbtn:hover { background: var(--si-panel-2); }
.si-avatar  { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--si-accent), var(--si-accent-2)); color: var(--si-accent-ink); font-weight: 700; }

/* screen enter animation (on navigation) */
.si-screen { animation: si-fadeUp .35s ease both; }
@keyframes si-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   10. DATA TABLE (Work orders, Users)
   Set the column template inline per table:
     <div class="si-thead" style="grid-template-columns:110px 1.5fr 120px ...">
   Wrap in .si-table-scroll with a min-width inner so it scrolls on small screens.
   ============================================================================ */
.si-table-wrap   { border-radius: var(--si-r-lg); border: 1px solid var(--si-border); background: var(--si-panel); backdrop-filter: blur(12px); overflow: hidden; }
.si-table-scroll { overflow-x: auto; }
.si-thead, .si-trow { display: grid; gap: 14px; align-items: center; padding: 14px 20px; }
.si-thead { border-bottom: 1px solid var(--si-border); font-family: var(--si-font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--si-faint); text-transform: uppercase; }
.si-trow  { border-top: 1px solid var(--si-border); transition: background .15s; cursor: pointer; }
.si-trow:hover { background: var(--si-panel); }

/* pagination footer (SiPager) */
.si-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.si-pager__info { font-family: var(--si-font-mono); font-size: 11.5px; color: var(--si-muted); }
.si-pager__nav { display: flex; align-items: center; gap: 12px; }
.si-pager__page { font-family: var(--si-font-mono); font-size: 11.5px; color: var(--si-muted); }
.si-pager__btn { padding: 7px 14px; font-size: 13px; }
.si-pager__btn:disabled { opacity: .4; pointer-events: none; }

/* ============================================================================
   11. SCREEN ELEMENTS — dashboard stat, asset card, progress, role/status chips
   ============================================================================ */
.si-stat          { padding: 18px; border-radius: 16px; border: 1px solid var(--si-border); background: var(--si-panel); backdrop-filter: blur(12px); }
.si-stat__value   { font-family: var(--si-font-display); font-weight: 700; font-size: 34px; margin-top: 8px; }

.si-asset-card    { padding: 20px; border-radius: 16px; border: 1px solid var(--si-border); background: var(--si-panel); backdrop-filter: blur(12px); transition: transform .3s, border-color .3s; }
.si-asset-card:hover { transform: translateY(-4px); border-color: var(--si-border-2); }

.si-progress      { height: 8px; border-radius: 99px; background: var(--si-bg-2); overflow: hidden; }
.si-progress > span { display: block; height: 100%; border-radius: 99px; }

/* role chips (Users) */
.si-role             { font-family: var(--si-font-mono); font-size: 10px; padding: 4px 10px; border-radius: 7px; }
.si-role--manager    { background: rgba(91,140,255,.16);  color: #8fb0ff; }
.si-role--technician { background: rgba(22,199,154,.16);  color: #16c79a; }
.si-role--operator   { background: rgba(254,188,46,.16);  color: #febc2e; }
.si-role--admin      { background: rgba(177,91,255,.18);  color: #c79bff; }

/* work-order status chips */
.si-os-status            { font-family: var(--si-font-mono); font-size: 10px; padding: 4px 10px; border-radius: 7px; }
.si-os-status--open        { background: rgba(91,140,255,.16);  color: #8fb0ff; }
.si-os-status--in-progress { background: rgba(254,188,46,.16);  color: #febc2e; }
.si-os-status--completed   { background: rgba(22,199,154,.16);  color: #16c79a; }

/* asset status colors (use as text + dot + progress fill) */
/* operational → #16c79a · warning → #febc2e · down → #ff6b6b */

/* ============================================================================
   12. FORMS & TABS (login, filters)
   ============================================================================ */
.si-input          { background: transparent; border: 1px solid var(--si-border-2); border-radius: 11px; padding: 12px 14px; color: var(--si-text); font-family: var(--si-font-body); font-size: 14.5px; width: 100%; outline: none; transition: border-color .18s; }
.si-input:focus    { border-color: var(--si-accent); }
.si-input::placeholder { color: var(--si-faint); }
.si-field-label    { display: block; font-size: 13px; font-weight: 600; color: var(--si-muted); margin-bottom: 7px; }

.si-tabs           { display: inline-flex; gap: 6px; padding: 5px; border-radius: 13px; border: 1px solid var(--si-border); background: var(--si-panel); backdrop-filter: blur(10px); }
.si-tab            { border: none; background: transparent; cursor: pointer; padding: 8px 15px; border-radius: 9px; font-family: var(--si-font-body); font-size: 13.5px; font-weight: 600; color: var(--si-muted); transition: background .18s, color .18s; }
.si-tab.is-active  { background: var(--si-panel-2); color: var(--si-text); }

/* login split card */
.si-login-card  { width: 100%; max-width: 940px; display: grid; grid-template-columns: 1.05fr 1fr; border-radius: var(--si-r-xl); overflow: hidden; border: 1px solid var(--si-border-2); background: var(--si-panel); backdrop-filter: blur(22px) saturate(140%); box-shadow: var(--si-shadow); }
.si-login-brand { position: relative; padding: 46px 42px; background: linear-gradient(150deg, var(--si-accent), var(--si-accent-2)); color: var(--si-accent-ink); overflow: hidden; }
.si-login-form  { padding: 46px 42px; background: var(--si-bg-2); }