/* ============================================================
   MODINEER CMMS - Design System
   Industrial maintenance management UI
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand: petrol / steel blue ---- */
  --brand:        #236285;   /* primary - pulled from modineer.com */
  --brand-700:    #1b5070;
  --brand-800:    #143c54;
  --brand-900:    #0f2d3f;
  --brand-300:    #6fa3bd;
  --brand-200:    #b4d0de;
  --brand-100:    #dceaf1;
  --brand-50:     #eef5f8;

  /* ---- Cool steel grays ---- */
  --steel-950: #0d161d;
  --steel-900: #14212b;
  --steel-800: #1e2e3a;
  --steel-700: #33444f;
  --steel-600: #4d5e69;
  --steel-500: #67767f;
  --steel-400: #8c99a1;
  --steel-300: #b2bcc3;
  --steel-200: #d3dadf;
  --steel-150: #e0e6ea;
  --steel-100: #eaeef1;
  --steel-50:  #f4f6f8;

  /* ---- App surfaces ---- */
  --app-bg:     #eceff2;
  --card:       #ffffff;
  --card-alt:   #f7f9fa;
  --border:     #dde3e8;
  --border-strong: #ccd4da;

  /* ---- Text ---- */
  --ink:        #16242e;
  --ink-soft:   #45555f;
  --ink-mute:   #6c7a83;
  --ink-faint:  #94a1a9;
  --on-brand:   #f3f8fb;

  /* ---- Status system ---- */
  --ok:        #2e7d52;   --ok-bg:   #e4f1ea;   --ok-bd:  #bfe0cd;
  --warn:      #b07207;   --warn-bg: #fbf0d8;   --warn-bd:#f0d9a8;
  --crit:      #c0392b;   --crit-bg: #fae6e3;   --crit-bd:#f1c3bd;
  --info:      #236285;   --info-bg: #e2eef4;   --info-bd:#bcd6e3;
  --neutral:   #67767f;   --neutral-bg:#eef1f3; --neutral-bd:#d8dee3;

  /* ---- Radii / shadow ---- */
  --r-sm: 4px;
  --r:    7px;
  --r-lg: 11px;
  --r-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(20,33,43,.06), 0 1px 1px rgba(20,33,43,.04);
  --shadow:    0 1px 3px rgba(20,33,43,.08), 0 4px 12px rgba(20,33,43,.05);
  --shadow-lg: 0 8px 28px rgba(20,33,43,.14), 0 2px 6px rgba(20,33,43,.08);

  /* ---- Type ---- */
  --font-head: 'Barlow Semi Condensed', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --nav-w: 232px;
  --top-h: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--app-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100vh; }

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

::selection { background: var(--brand-200); }

button { font-family: var(--font-body); cursor: pointer; }
input, select, textarea { font-family: var(--font-body); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ---- scrollbars ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--steel-300); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--steel-400); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Reusable atoms
   ============================================================ */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--r);
  border: 1px solid transparent; white-space: nowrap;
  transition: background .13s, border-color .13s, box-shadow .13s, color .13s;
  line-height: 1;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-700); }
.btn-primary:active { background: var(--brand-800); }
.btn-ghost { background: var(--card); color: var(--ink-soft); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--steel-50); border-color: var(--steel-300); color: var(--ink); }
.btn-subtle { background: transparent; color: var(--ink-soft); }
.btn-subtle:hover { background: var(--steel-100); color: var(--ink); }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-danger { background: var(--crit); color: #fff; }
.btn-danger:hover { background: #a82f23; }

/* Badges / pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 100px; border: 1px solid;
  white-space: nowrap; line-height: 1.3;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pill-ok   { color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok-bd); }
.pill-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.pill-crit { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-bd); }
.pill-info { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }
.pill-neutral { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-bd); }

.dot-ok{background:var(--ok)} .dot-warn{background:var(--warn)} .dot-crit{background:var(--crit)} .dot-info{background:var(--info)} .dot-neutral{background:var(--neutral)}

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

/* Generic table */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  text-align: left; font-family: var(--font-body); font-weight: 600;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--card-alt); position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--steel-100); color: var(--ink-soft); vertical-align: middle; }
.tbl tbody tr { transition: background .1s; cursor: pointer; }
.tbl tbody tr:hover { background: var(--brand-50); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .num { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }

/* Inputs */
.field {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--r); padding: 0 11px; height: 36px;
  transition: border-color .13s, box-shadow .13s;
}
.field:focus-within { border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50); }
.field input, .field select {
  border: none; outline: none; background: transparent; width: 100%;
  font-size: 13px; color: var(--ink); height: 100%;
}
.field svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }

.select-bare {
  border: 1px solid var(--border-strong); background: var(--card);
  border-radius: var(--r); height: 36px; padding: 0 30px 0 11px;
  font-size: 13px; color: var(--ink); cursor: pointer; outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c7a83' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.select-bare:focus { border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50); }

/* Sidebar nav items */
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r);
  border: none; cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 500; width: 100%;
  background: transparent; color: var(--steel-300); transition: background .12s, color .12s;
  position: relative; font-family: var(--font-body);
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active, .nav-item.active:hover { background: var(--brand); color: #fff; font-weight: 600; }

/* Section label */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* Image placeholder (striped) */
.img-ph {
  background-color: var(--steel-50);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(35,98,133,.05) 11px 22px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .02em; text-align: center; padding: 8px;
}

/* tiny utility */
.row { display: flex; align-items: center; }
.muted { color: var(--ink-mute); }
.faint { color: var(--ink-faint); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform:none;} }
.fade-up { animation: fadeUp .26s ease both; }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
.fade-in { animation: fadeIn .2s ease both; }

/* ============================================================
   Responsive — phones & small tablets (<= 820px)
   The app is built with inline styles, so these rules use the
   inline-style attribute selector + a few marker classes
   (.r-2 = stay 2-up, .r-keep = keep authored columns) and
   !important to override inline layout on small screens only.
   Desktop (>= 821px) is completely untouched.
   ============================================================ */
@media (max-width: 820px) {
  :root { --top-h: 56px; }

  /* Tighter page gutters for screen content */
  #main-scroll > div { padding-left: 14px !important; padding-right: 14px !important; }
  #main-scroll > .fade-in { padding-top: 16px !important; padding-bottom: 28px !important; }

  /* Collapse inline multi-column grids to a single column.
     Exceptions: .r-keep (bar/label rows) keep their columns,
     .r-2 (KPI / stat tiles) stay two-up. */
  [style*="grid-template-columns"]:not(.r-keep):not(.r-2) { grid-template-columns: minmax(0, 1fr) !important; }
  .r-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

  /* Wide tables scroll horizontally inside their card instead of clipping */
  .card { overflow-x: auto !important; }
  .tbl { min-width: 480px; }

  /* Header / topbar dropdown menus become full-width sheets under the bar */
  .dropdown-menu {
    position: fixed !important;
    left: 12px !important; right: 12px !important; top: calc(var(--top-h) + 8px) !important;
    width: auto !important; max-width: none !important;
    max-height: calc(100vh - var(--top-h) - 24px); overflow: auto;
  }

  /* Form controls >= 16px so iOS Safari doesn't auto-zoom on focus */
  input, select, textarea,
  .field input, .field select, .select-bare { font-size: 16px !important; }

  /* Page titles a touch smaller */
  h1 { font-size: 22px !important; }

  /* Login: drop the marketing panel, keep only the sign-in form */
  .login-brand { display: none !important; }
  .login-form { padding: 26px 18px !important; }

  /* Horizontally scrollable tab strips on detail screens */
  .tab-strip { overflow-x: auto; }
}