/* ═══════════════════════════════════════════════════════════ Utility Room module — industrial/practical: galvanized-steel structure colour, safety-amber accent, concrete-grey background. Isolated to #module-utility — zero shared selectors with Kitchen, The Bank, or the launcher/login ops theme. ═══════════════════════════════════════════════════════════ */ :root { --util-bg: #E7E9EA; --util-card: #FFFFFF; --util-steel: #333B42; --util-steel-dim: #7A828A; --util-accent: #F2A93B; --util-accent-dark: #D98A1E; --util-shadow: 0 1px 2px rgba(51,59,66,0.05), 0 4px 16px rgba(51,59,66,0.08); } /* Dark mode — see finance.css's identical note: scoped to body.dark (not body.dark #module-utility) so it would still reach any modal this module ever adds directly to , consistent with how Finance's own dark palette is scoped. */ body.dark { --util-bg: #101214; --util-card: #1D2024; --util-steel: #EDEEF0; --util-steel-dim: #8B939B; --util-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.45); } /* Full-bleed like Notice Board: a concrete-grey utility room reads wrong as a rounded card floating with visible cream page margin around it, the way Kitchen/Finance's much paler backgrounds don't. Cancels .app-container's padding on all sides — see notice.css's identical #module-notice rule for the pattern. */ #module-utility { margin: calc(-1 * var(--s4)); width: calc(100% + var(--s4) * 2); height: calc(100% + var(--s4) * 2); background: var(--util-bg); color: var(--util-steel); display: flex; flex-direction: column; overflow-y: auto; font-family: var(--font-ui); -webkit-font-smoothing: antialiased; } /* ── Header ───────────────────────────────────────────────── Corner brackets + monospace status come from .mod-header/.mod-header-status in shell.css — this just sets the module's own colours. Margin re-insets it now that #module-utility itself is full-bleed, same as .notice-header. */ .util-header { background: var(--util-steel); border-radius: var(--r-xl); margin: calc(var(--s4) + env(safe-area-inset-top)) var(--s4) var(--s3); flex-shrink: 0; --mod-header-accent: var(--util-accent); } body.dark .util-header { background: #23272B; } .util-header .mod-header-title { font-family: var(--font-ui); font-weight: 800; color: #ffffff; letter-spacing: -0.01em; } .util-header .mod-header-status { color: var(--util-accent); font-weight: 700; } .util-header .home-btn { color: #ffffff; opacity: 0.85; } /* ── Sections, grouped by category ───────────────────────── */ #util-sections-container { flex: 1; padding: 0 var(--s4); padding-bottom: 130px; /* clears the fixed form dock */ } .util-section { margin-bottom: var(--s5); } .util-section-header { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); padding-left: 2px; } .util-section-icon { font-size: 16px; } .util-section-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--util-steel-dim); } /* ── Item row ─────────────────────────────────────────────── */ .util-item { display: flex; align-items: stretch; gap: var(--s2); background: var(--util-card); border-radius: var(--r-md); box-shadow: var(--util-shadow); margin-bottom: var(--s2); overflow: hidden; border-left: 4px solid transparent; transition: border-color 0.15s var(--ease); } .util-item--out { border-left-color: var(--util-accent); } /* Lifted state while a drag is in progress — transform (applied inline by ui-utility.js as the pointer moves) doesn't affect sibling layout, so surrounding rows keep their real static positions throughout the drag. */ .util-item--dragging { position: relative; z-index: 5; box-shadow: 0 10px 28px rgba(0,0,0,0.2); } .util-item-handle { flex-shrink: 0; display: flex; align-items: center; background: none; border: none; color: var(--util-steel-dim); font-size: 18px; padding: 0 0 0 var(--s3); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; } .util-item-toggle { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); background: none; border: none; padding: var(--s3) var(--s4); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .util-item-name { font-size: 15px; font-weight: 600; color: var(--util-steel); } .util-item-status { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--util-steel-dim); flex-shrink: 0; } .util-item--out .util-item-status { color: var(--util-accent-dark); } body.dark .util-item--out .util-item-status { color: var(--util-accent); } .util-item-delete { background: none; border: none; color: var(--util-steel-dim); font-size: 18px; padding: 0 var(--s3); cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ── Add-item form dock ───────────────────────────────────── */ .util-form-dock { flex-shrink: 0; position: sticky; bottom: 0; background: rgba(231,233,234,0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); } body.dark .util-form-dock { background: rgba(16,18,20,0.92); } .util-form-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s2); } /* Form elements have an implicit min-width: auto (their intrinsic content size), which stops a 1fr grid track from actually shrinking them to fit — the classic grid/flexbox form-control overflow gotcha. */ .util-form-row input { min-width: 0; } .util-form-row input, .util-form-row select { background: var(--util-card); border: none; border-radius: var(--r-md); padding: var(--s3); font-size: 15px; font-family: var(--font-ui); color: var(--util-steel); box-shadow: var(--util-shadow); } .util-form-row button { background: var(--util-accent); color: #1A1200; border: none; border-radius: var(--r-md); padding: var(--s3) var(--s4); font-size: 15px; font-weight: 700; cursor: pointer; } .util-form-row button:active { background: var(--util-accent-dark); } /* Overrides base.css's shared .no-items default (Kitchen's own serif-italic look) with this module's plain, utilitarian sans — same pattern as #module-finance .no-items. */ #module-utility .no-items { text-align: center; padding: 48px var(--s5); color: var(--util-steel-dim); font-size: 14px; font-family: var(--font-ui); font-style: normal; }