/* ============================================================================
   CMMS shell — Phase 9
   ----------------------------------------------------------------------------
   The maintenance module grew from one page into several (work orders, assets,
   and the phases after them), so the chrome they share lives here instead of
   being pasted into each template.

   A separate file rather than an addition to glass_theme.css on purpose: that
   stylesheet is referenced as `glass_theme.css?v=21` from two dozen templates,
   so changing it means bumping every one of them (app/scripts/bump_assets.py)
   or leaving half the site on a stale cached copy. This file is new, so it
   carries its own version and cannot stale anything that already works.

   Every value below is a glass_theme.css token. Nothing here introduces a
   colour, radius, shadow or font of its own — this is layout, not a new look.
   ========================================================================= */

.cmms-wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px 48px; }

/* --- module bar --------------------------------------------------------- */
.mod-bar {
    display: flex; align-items: center; gap: 4px;
    border-bottom: 1px solid var(--border); margin-bottom: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.mod-bar::-webkit-scrollbar { display: none; }
.mod-link {
    padding: 13px 15px; font-size: .9375rem; font-weight: 500;
    color: var(--text-3); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .12s ease, border-color .12s ease;
}
.mod-link:hover { color: var(--text); }
.mod-link.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* Phases not yet built. Visible so the shape of the product is legible, but
   inert and unmistakably inactive -- a link that goes nowhere is worse than
   no link. */
.mod-soon { opacity: .45; pointer-events: none; }
.mod-spacer { flex: 1 1 auto; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 22px 0 4px; }
.page-head h2 { margin: 0 0 2px; }
.page-head p { margin: 0; color: var(--text-3); font-size: .875rem; }

/* --- stat strip: counts that are also the filters ------------------------ */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 16px; }
.stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    padding: 12px 14px; text-align: left; font-family: inherit;
    box-shadow: var(--shadow-sm); transition: border-color .12s ease, background .12s ease;
}
button.stat { cursor: pointer; }
button.stat:hover { border-color: var(--border-strong); }
.stat.on { border-color: var(--accent); background: var(--accent-soft); }
.stat-label { font-size: .6875rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.stat-value { font-size: 1.6rem; font-weight: 650; color: var(--text); letter-spacing: -.02em; line-height: 1.15; margin-top: 3px; font-variant-numeric: tabular-nums; display: block; }
.stat-value.danger { color: var(--danger); }
.stat-sub { font-size: .75rem; color: var(--text-3); margin-top: 2px; display: block; }

/* --- toolbar ------------------------------------------------------------ */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .grow { flex: 1 1 260px; min-width: 0; }
.toolbar select { width: auto; min-width: 150px; cursor: pointer; }
.result-count { font-size: .8125rem; color: var(--text-3); white-space: nowrap; }

/* --- row list ----------------------------------------------------------- */
.row-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.list-row {
    display: flex; align-items: center; gap: 14px; width: 100%;
    /* `border: 0` FIRST, and it is not optional. A <button> keeps its
       user-agent border on any side not explicitly overridden, so setting only
       border-bottom and border-left left a 2px outset default on the top and
       right of every row -- which is what drew the heavy dark rules between
       rows and down the edge of the list, in place of the hairlines the design
       calls for. */
    border: 0;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    padding: 11px 16px 11px 13px;
    background: none; text-align: left;
    font-family: inherit; cursor: pointer; text-decoration: none;
    transition: background .1s ease;
}
.list-row:last-of-type { border-bottom: none; }
.list-row:hover { background: var(--surface-2); }
.list-num { font-family: var(--mono); font-size: .8125rem; color: var(--text-3); flex: 0 0 66px; font-variant-numeric: tabular-nums; }
.list-body { flex: 1 1 auto; min-width: 0; }
.list-title { font-weight: 600; color: var(--text); font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-meta { font-size: .8125rem; color: var(--text-3); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.list-meta .sep { opacity: .45; }
.list-side { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.chip-tag { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 7px; font-size: .75rem; color: var(--text-2); }
.empty { padding: 46px 20px; text-align: center; color: var(--text-3); }

/* --- drawer ------------------------------------------------------------- */
/* Replaces the centred modal. A work order is worked *against* the list --
   which one is next, what else is in this room -- and a centred overlay hid
   exactly that. */
.drawer-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 9998; display: none; }
.drawer-scrim.open { display: block; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100%);
    background: var(--surface); border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg); z-index: 9999;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.drawer-head h3 { margin: 0 0 4px; color: var(--text); font-size: 1.0625rem; line-height: 1.35; }
.drawer-sub { color: var(--text-3); font-size: .8125rem; font-family: var(--mono); }
.drawer-close { background: none; border: none; font-size: 1.75rem; line-height: 1; color: var(--text-3); cursor: pointer; padding: 0 4px; }
.drawer-tabs { display: flex; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--border); padding: 0 8px; }
.drawer-tabs::-webkit-scrollbar { display: none; }
.wo-tab { padding: 11px 13px; font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; font-size: .875rem; font-family: inherit; transition: color .12s ease, border-color .12s ease; }
.wo-tab:hover { color: var(--text); }
.wo-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 32px; background: var(--bg); }
.wo-pane { display: none; }
.wo-pane.active { display: block; animation: cmmsFade .16s ease; }

/* --- detail cards ------------------------------------------------------- */
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.detail-card { background: var(--surface); padding: 11px 13px; border-radius: var(--r); border: 1px solid var(--border); display: flex; flex-direction: column; }
.detail-card.full { grid-column: 1 / -1; }
.detail-label { font-size: .6875rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.detail-value { font-size: .9375rem; color: var(--text); font-weight: 500; min-height: 21px; }
.edit-mode-item { display: none; width: 100%; box-sizing: border-box; font-family: inherit; margin-top: 4px; }

.inline-form-row { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.task-item, .file-item { background: var(--surface); padding: 10px 13px; border-radius: var(--r); border: 1px solid var(--border); margin-bottom: 7px; display: flex; align-items: center; gap: 11px; font-size: .9375rem; }
.file-item { justify-content: space-between; }
.admin-bar { display: none; justify-content: space-between; align-items: center; margin-bottom: 16px; background: var(--surface); padding: 9px 13px; border-radius: var(--r); border: 1px solid var(--border); }

.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 10px; }
.section-head h4 { margin: 0; font-size: 1rem; color: var(--text); }
.section-head span { font-size: .8125rem; color: var(--text-3); }

@media (max-width: 900px) {
    .cmms-wrap { padding: 0 12px 36px; }
    .drawer { width: 100%; border-left: none; }
    .details-grid { grid-template-columns: 1fr; }
    .list-num { flex-basis: 52px; }
    .list-side { flex-direction: column; align-items: flex-end; gap: 5px; }
}
@keyframes cmmsFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }