:root { color-scheme: light; --ink:#12322f; --muted:#637673; --paper:#f4f5ef; --card:#fff; --line:#dce3dc; --green:#15836f; --amber:#d68a19; --red:#c94c43; --navy:#082d2b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top right,#d9eee6,transparent 34%),var(--paper); color:var(--ink); font:15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:42px 0 70px; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(34px,5vw,58px); line-height:1; letter-spacing:-.045em; margin-bottom:12px; } h2 { font-size:24px; margin-bottom:4px; }
.eyebrow { margin-bottom:8px; font-size:12px; font-weight:800; letter-spacing:.15em; color:var(--green); }
.muted { color:var(--muted); } .brand-mark { width:62px; height:62px; display:grid; place-items:center; border-radius:18px; background:var(--navy); color:#fff; font-size:22px; font-weight:900; letter-spacing:.06em; margin-bottom:34px; }
.login-card { width:min(490px,100%); margin:8vh auto 0; background:rgba(255,255,255,.94); padding:clamp(28px,6vw,58px); border:1px solid var(--line); border-radius:28px; box-shadow:0 30px 80px rgba(8,45,43,.12); }
form { margin-top:32px; } label { display:block; font-weight:750; margin-bottom:8px; } input,select,textarea { width:100%; padding:15px 16px; border:1px solid #bfcac3; border-radius:12px; background:#fff; color:var(--ink); font:inherit; margin-bottom:14px; } textarea { resize:vertical; } input:focus,select:focus,textarea:focus { outline:3px solid #a9ddd0; border-color:var(--green); }
button { appearance:none; border:0; border-radius:12px; padding:13px 18px; background:var(--green); color:#fff; font:inherit; font-weight:750; cursor:pointer; } form button { width:100%; } button:hover { filter:brightness(.94); } button:disabled { opacity:.6; cursor:wait; }
.error { min-height:22px; margin:12px 0 0; color:var(--red); }
.access-key-login { margin-top:16px; color:var(--muted); font-size:13px; }
.access-key-login summary { cursor:pointer; }
.access-key-login label { margin-top:12px; }
.setup-layout { display:grid; grid-template-columns:minmax(320px,440px) 1fr; gap:28px; align-items:start; }
.account-list { display:grid; gap:10px; }
.account-list article { display:flex; justify-content:space-between; gap:16px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.account-list p { margin:3px 0 0; text-transform:capitalize; }
.setup-section { margin-bottom:36px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.module-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; margin:8px 0 18px; }
.module-picker label { display:flex; gap:8px; align-items:center; margin:0; font-weight:650; }
.module-picker input { width:auto; margin:0; }
.setup-store-list { display:grid; gap:10px; margin-top:18px; }
.setup-store-list article { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.setup-store-list p { margin:4px 0 0; }
.store-actions { display:flex; gap:9px; align-items:center; }
.enroll-device { padding:9px 12px; }
.enrollment-panel { flex:0 0 100%; padding:14px 16px; border-radius:11px; background:#eaf5f1; }
.enrollment-panel code { display:block; margin:8px 0; color:var(--navy); font-size:25px; font-weight:900; letter-spacing:.12em; }
.enrollment-panel p { margin:0; }
.template-list { display:grid; gap:10px; }
.template-list article { padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.template-list p { margin:4px 0 12px; }
.template-actions { display:grid; grid-template-columns:1fr auto; gap:8px; }
.template-actions select { margin:0; }
.template-actions button { width:auto; }
@media (max-width:800px) { .setup-layout { grid-template-columns:1fr; } }
@media (max-width:560px) { .template-actions { grid-template-columns:1fr; } }
.release-preview { flex:0 0 100%; padding:16px; border-radius:12px; background:#eef5f1; }
.release-preview > p { margin:5px 0 12px; color:var(--muted); }
.preview-stores { display:grid; gap:7px; }
.preview-stores div { display:flex; justify-content:space-between; gap:14px; padding-top:7px; border-top:1px solid var(--line); }
.software-section { margin:34px 0; }
.launch-health { margin:34px 0; }
.compact-summary { margin:22px 0 14px; }
.alert-center { margin-bottom:24px; } .alert-count { padding:7px 12px; border-radius:99px; background:#e4eee9; color:var(--green); font-weight:800; } .alert-count.has-alerts { background:#fde8e5; color:var(--red); } .alert-list { display:grid; gap:9px; } .alert-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px 15px; border:1px solid var(--line); border-radius:13px; background:#fff; } .alert-item p { margin:3px 0 0; } .alert-item.critical { border-left:4px solid var(--red); } .alert-item.warning { border-left:4px solid var(--amber); } .alert-item.resolved { opacity:.72; border-left:4px solid var(--green); } .alert-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f7ddd9; color:var(--red); font-weight:900; } .alert-item.warning .alert-icon { background:#faecd4; color:#98600e; } .alert-item.resolved .alert-icon { background:#dff1eb; color:var(--green); }
.notification-options { display:grid; gap:8px; margin-bottom:18px; } .notification-options label,.notification-toggle { display:flex; gap:9px; align-items:center; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; } .notification-options input,.notification-toggle input { width:auto; margin:0; }
.sensor-setup-columns { display:grid; grid-template-columns:1fr 1.25fr; gap:20px; align-items:start; } .sensor-delay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } .sensor-delay-grid input { margin-bottom:2px; } .sensor-delay-grid small { display:block; color:var(--muted); margin-bottom:14px; } .sensor-list-heading { margin-top:32px; } .sensor-registry { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .sensor-registry article { padding:18px; border:1px solid var(--line); border-radius:15px; background:#fff; } .sensor-registry h3,.sensor-registry p { margin:0 0 5px; } .sensor-registry .badge { margin-left:0; } .commissioning-list { margin:12px 0 0; padding:12px 12px 12px 30px; border-radius:10px; background:var(--paper); } .commissioning-list li { margin:4px 0; }
@media (max-width:800px) { .sensor-setup-columns,.sensor-registry { grid-template-columns:1fr; } .sensor-delay-grid { grid-template-columns:1fr; } .tabs { max-width:100%; overflow-x:auto; } }
.software-list { display:grid; gap:10px; }
.software-list article { padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.software-list p { margin:4px 0 12px; }
.software-actions { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; }
.software-actions select { margin:0; }
.software-actions button { width:auto; }
@media (max-width:600px) { .software-actions { grid-template-columns:1fr; } }
.startup-error { width:min(490px,calc(100% - 32px)); margin:20px auto; padding:14px 18px; border-radius:12px; background:#fff2ef; color:var(--red); text-align:center; }
header,.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; } header { padding:10px 0 34px; } .actions,.header-actions { display:flex; gap:9px; align-items:center; flex-wrap:wrap; } .secondary { background:#fff; color:var(--ink); border:1px solid var(--line); } .quiet { background:transparent; color:var(--muted); } button.danger { background:#9f2d2d; border-color:#9f2d2d; color:#fff; }
.tabs { display:flex; gap:6px; width:max-content; padding:5px; margin-bottom:30px; border:1px solid var(--line); border-radius:14px; background:#e8eee8; } .tab { padding:9px 19px; background:transparent; color:var(--muted); } .tab.active { background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(8,45,43,.08); }
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:42px; } .metric { background:var(--card); border:1px solid var(--line); border-radius:19px; padding:20px; } .metric strong { display:block; font-size:35px; line-height:1; margin-bottom:8px; } .metric.alert strong { color:var(--red); }
.section-heading { margin-bottom:16px; } .legend { display:flex; gap:15px; color:var(--muted); font-size:13px; } .dot { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; } .healthy { background:var(--green); } .warning { background:var(--amber); } .offline { background:var(--red); }
.fleet { display:grid; gap:12px; } .device { display:grid; grid-template-columns:2.2fr repeat(5,1fr); gap:20px; align-items:center; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--green); border-radius:16px; padding:19px 22px; } .device.warning-border { border-left-color:var(--amber); } .device.offline-border { border-left-color:var(--red); } .device h3 { margin:0 0 2px; font-size:17px; } .device p { margin:0; } .label { display:block; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; margin-bottom:3px; } .status { font-weight:800; } .issue { color:var(--red); } .empty { text-align:center; padding:60px; background:#fff; border-radius:16px; }
.fleet-tools { display:flex; align-items:end; justify-content:flex-end; gap:10px; flex-wrap:wrap; } .fleet-tools label { font-size:12px; font-weight:800; color:var(--muted); } .fleet-tools select,.fleet-tools input { width:auto; min-width:165px; margin:0; padding:10px 12px; } .fleet-tools .legend { margin-left:8px; }
.content-layout { display:grid; grid-template-columns:minmax(340px,460px) 1fr; gap:28px; align-items:start; } .editor-card { margin:0; padding:25px; border:1px solid var(--line); border-radius:20px; background:#fff; } .editor-card h2 { margin-bottom:5px; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } fieldset { border:0; padding:0; margin:0 0 16px; } legend { font-weight:750; margin-bottom:8px; } .day-picker { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; } .day-picker label { padding:8px 2px; border:1px solid var(--line); border-radius:9px; text-align:center; font-size:11px; } .day-picker input,.photo-toggle input { width:auto; margin:0 4px 0 0; } .list-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .list-heading label { margin:0; } form button.small { width:auto; padding:8px 11px; } .task-list { display:grid; gap:9px; margin-bottom:16px; } .task-row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:9px; background:var(--paper); border-radius:12px; } .task-row input { margin:0; } .photo-toggle { margin:0; white-space:nowrap; font-size:12px; } form .remove-task { width:auto; padding:8px; color:var(--red); } .form-actions,.release-actions { display:flex; gap:8px; } .form-actions button { flex:1; } .form-message { min-height:22px; margin:12px 0 0; color:var(--green); } .library-tabs { display:flex; gap:6px; margin-bottom:10px; } .library-tab { background:#e8eee8; color:var(--muted); padding:8px 14px; } .library-tab.active { background:var(--navy); color:#fff; } .library,.releases { display:grid; gap:10px; } .library-item,.release { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:18px 20px; border:1px solid var(--line); border-radius:15px; background:#fff; } .library-item h3,.library-item p,.release h3,.release p { margin:0; } .history-heading { margin-top:34px; } .empty.compact { padding:28px; } .badge { display:inline-block; padding:3px 8px; margin-left:7px; border-radius:99px; background:#edf1ed; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; } .badge.published { background:#dff1eb; color:var(--green); } .release button { min-width:82px; }
@media (max-width:800px) { main { padding-top:24px; } header,.section-heading { align-items:flex-start; flex-direction:column; } .summary { grid-template-columns:repeat(2,1fr); } .device { grid-template-columns:1fr 1fr; } .device > div:first-child { grid-column:1/-1; } .legend { flex-wrap:wrap; } .fleet-tools { width:100%; justify-content:flex-start; align-items:flex-start; } .fleet-tools select,.fleet-tools input { width:100%; } }
@media (max-width:800px) { .content-layout { grid-template-columns:1fr; } }
@media (max-width:430px) { .summary { grid-template-columns:1fr; } .device { grid-template-columns:1fr; } .device > div:first-child { grid-column:auto; } .field-row,.task-row { grid-template-columns:1fr; } .day-picker { grid-template-columns:repeat(4,1fr); } }
.content-layout { display:flex; flex-direction:column; gap:28px; }
.content-layout > div { order:1; }
.content-layout > form { order:2; width:min(680px,100%); }
.library-toolbar { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; margin-bottom:12px; }
.library-toolbar input { margin:0; }
.library-actions { display:flex; gap:8px; }
.library-actions .delete-content { color:var(--red); }
.printable-toggle { display:flex; align-items:center; gap:8px; padding-top:34px; }
.printable-toggle input { width:auto; margin:0; }
.recipe-image-preview { display:block; width:min(240px,100%); max-height:180px; object-fit:cover; margin:0 0 16px; border-radius:12px; border:1px solid var(--line); }
.recipe-step-list { display:grid; gap:12px; margin-bottom:18px; }
.recipe-step { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:13px; border-radius:13px; background:var(--paper); }
.recipe-step > input { margin:0; }
.temperature-check-editor { display:grid; gap:12px; margin-bottom:18px; }
.temperature-check-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:12px; border-radius:12px; background:var(--paper); }
.temperature-check-row input { min-width:0; margin:0; }
.temperature-check-row .temperature-name { grid-column:span 2; }
.temperature-check-row .temperature-instructions { grid-column:span 3; }
.temperature-check-row > .delete-content { width:100%; min-width:0; }
.temperature-check-row .temperature-start,.temperature-check-row .temperature-end,.temperature-check-row .temperature-days { margin:0; }
.temperature-days { grid-column:1/-1; padding:0; }
.temperature-days legend { margin-bottom:7px; font-size:13px; }
.temperature-day-checkboxes { display:flex; flex-wrap:wrap; gap:7px; }
.temperature-day-checkboxes label { display:flex; align-items:center; gap:5px; min-width:62px; margin:0; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; font-size:13px; cursor:pointer; }
.temperature-day-checkboxes input { width:auto; margin:0; accent-color:var(--green); }
.step-photo-button { margin:0; cursor:pointer; white-space:nowrap; }
.step-photo-button input { position:absolute; width:1px; height:1px; opacity:0; }
.step-photo-preview { width:64px; height:52px; object-fit:cover; border-radius:8px; }
.deployment-list { grid-column:1/-1; display:grid; gap:7px; padding-top:12px; border-top:1px solid var(--line); }
.deployment-list > div { display:flex; justify-content:space-between; gap:16px; }
.deployment-applied { color:var(--green); } .deployment-failed { color:var(--red); } .deployment-pending,.deployment-received { color:var(--amber); }
.release-actions { flex-wrap:wrap; justify-content:flex-end; }
.schedule-time { width:auto; min-width:190px; margin:0; padding:11px; }
.badge.scheduled { background:#fff0d8; color:#9a5a00; }
.field-help { margin:-3px 0 8px; color:var(--muted); font-size:13px; }
.operations-card { margin-bottom:34px; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--card); }
.operations-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }
.dashboard-filters { display:flex; gap:18px; align-items:start; }
.dashboard-filters > div:first-child { min-width:240px; }
.dashboard-filters select { margin-bottom:6px; }
.timeframe-controls { display:grid; grid-template-columns:auto minmax(160px,220px) minmax(145px,180px); gap:8px; align-items:center; }
.timeframe-controls label,.timeframe-controls select,.timeframe-controls input { margin:0; }
.analytics-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.analytics-columns { display:grid; grid-template-columns:1.4fr 1fr; gap:28px; margin-bottom:24px; }
.analytics-list { display:grid; gap:8px; }
.analytics-list article { padding:11px 13px; border:1px solid var(--line); border-radius:11px; }
.analytics-list article > div,.analytics-list article { display:flex; justify-content:space-between; gap:12px; }
.analytics-list article:has(.progress-track) { display:block; }
.progress-track { height:8px; margin-top:8px; overflow:hidden; border-radius:99px; background:#e4e9e4; }
.progress-track i { display:block; height:100%; border-radius:inherit; background:var(--green); }
.cleaning-progress,.cleaning-completions { display:grid; gap:10px; }
.cleaning-card { padding:16px 18px; border:1px solid var(--line); border-left:5px solid var(--green); border-radius:14px; background:#fff; }
.cleaning-card.attention { border-left-color:var(--red); background:#fff9f7; }
.cleaning-card > div:first-child { display:flex; justify-content:space-between; gap:16px; }
.cleaning-card p,.cleaning-completions p { margin:3px 0 0; }
.cleaning-proof-heading { margin-top:34px; }
.cleaning-completions article { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.cleaning-completions img { width:100px; height:82px; border-radius:10px; object-fit:cover; }
@media (max-width:560px) { .cleaning-completions article { grid-template-columns:1fr; }.cleaning-completions img { width:100%; height:180px; } }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.photo-grid figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; }
.photo-grid img { display:block; width:100%; height:130px; object-fit:cover; }
.photo-grid figcaption { padding:9px; color:var(--muted); font-size:12px; }
.temperature-section { margin-bottom:28px; padding-top:22px; border-top:1px solid var(--line); }
.temperature-summary { display:flex; gap:8px; }
.temperature-summary .metric { min-width:105px; padding:12px 15px; }
.temperature-summary .metric strong { font-size:24px; }
.temperature-readings { display:grid; gap:9px; }
.temperature-section h4 { margin:20px 0 9px; }
.temperature-progress { display:grid; gap:8px; }
.temperature-progress article { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; }
.temperature-progress p { margin:2px 0 0; font-size:12px; }
.check-status { padding:4px 9px; border-radius:99px; background:#edf1ed; color:var(--muted); font-size:11px; font-weight:800; text-transform:capitalize; white-space:nowrap; }
.check-passed,.check-corrected { background:#dff1eb; color:var(--green); }
.check-missed,.check-needs_action { background:#fff0ec; color:var(--red); }
.check-due { background:#fff0d8; color:#9a5a00; }
.temperature-reading { padding:15px 17px; border:1px solid var(--line); border-left:5px solid var(--green); border-radius:13px; background:#fff; }
.temperature-reading.temperature-alert { border-left-color:var(--red); background:#fff9f7; }
.temperature-reading > div:first-child { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.temperature-reading p { margin:2px 0 0; }
.temperature-result { display:grid; text-align:right; }
.temperature-result strong { font-size:21px; }
.temperature-result span { color:var(--muted); font-size:12px; }
.temperature-pass strong { color:var(--green); } .temperature-fail strong { color:var(--red); }
.corrective-action { margin-top:11px; padding:10px 12px; border-radius:9px; background:#edf4ef; }
.corrective-action b { color:var(--green); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:760px) { .operations-heading,.analytics-columns { display:grid; grid-template-columns:1fr; } .analytics-summary { grid-template-columns:1fr; } .timeframe-controls { grid-template-columns:1fr; } }
@media (max-width:760px) { .temperature-section .section-heading { display:grid; } .temperature-summary { width:100%; } .temperature-summary .metric { flex:1; min-width:0; } }
@media (max-width:520px) { .library-toolbar { grid-template-columns:1fr; } }
@media (max-width:620px) { .recipe-step { grid-template-columns:1fr; } .step-photo-preview { width:100%; height:140px; } }
@media (max-width:760px) {
  .temperature-check-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .temperature-check-row .temperature-name,.temperature-check-row .temperature-instructions,.temperature-check-row > .delete-content { grid-column:1/-1; }
}
@media (max-width:760px) { .dashboard-filters { display:grid; grid-template-columns:1fr; } }
.equipment-health { display:grid; gap:12px; margin-top:20px; }
.equipment-card { padding:20px 22px; border:1px solid var(--line); border-left:5px solid var(--green); border-radius:16px; background:#fff; }
.equipment-card.attention { border-left-color:var(--amber); background:#fffaf1; }
.equipment-card.offline { border-left-color:var(--red); background:#fff9f7; }
.equipment-card-head { display:flex; justify-content:space-between; gap:18px; align-items:start; }
.equipment-card h3,.equipment-card p { margin:0; }
.equipment-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:17px; }
.equipment-metrics div { padding:11px 12px; border-radius:10px; background:var(--paper); }
.equipment-metrics strong,.equipment-metrics span { display:block; }
.equipment-metrics span { margin-top:3px; color:var(--muted); font-size:12px; }
@media (max-width:850px) { .equipment-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.maintenance-filters { display:grid; grid-template-columns:minmax(240px,1fr) minmax(170px,.55fr) minmax(230px,1fr); gap:14px; align-items:start; margin:20px 0 22px; }
.maintenance-columns { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start; }
.maintenance-columns h3 { margin-top:0; }
.maintenance-list { display:grid; gap:10px; }
.maintenance-card,.work-order-card { padding:17px 18px; border:1px solid var(--line); border-left:5px solid var(--green); border-radius:15px; background:#fff; }
.work-order-card { width:100%; color:var(--ink); text-align:left; font-weight:400; }
.maintenance-card { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.maintenance-card:is(button) { width:100%; color:var(--ink); text-align:left; font-weight:400; }
.maintenance-card.attention,.work-order-card.priority-high,.work-order-card.priority-emergency { border-left-color:var(--red); }
.maintenance-card img { width:72px; height:72px; object-fit:cover; border-radius:11px; }
.maintenance-card-head { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.asset-status,.work-order-status { flex:none; padding:4px 8px; border-radius:99px; background:#e4f3ed; color:var(--green); font-size:11px; font-weight:800; }
.asset-status.needs_attention,.asset-status.out_of_service { background:#fff0ed; color:var(--red); }
.maintenance-card p,.work-order-card p { margin:4px 0 0; }
.maintenance-facts { color:var(--muted); font-size:13px; }
.asset-action { display:inline-block; margin-top:8px; color:var(--green); font-size:12px; font-weight:800; }
.work-order-photo-preview { display:block; width:160px; height:120px; margin:-4px 0 16px; border-radius:11px; object-fit:cover; }
.sensor-heading { margin-top:48px; }
@media (max-width:800px) { .maintenance-filters,.maintenance-columns { grid-template-columns:1fr; } }
.work-order-dialog { width:min(720px,calc(100% - 24px)); max-height:90vh; padding:0; border:0; border-radius:22px; color:var(--ink); box-shadow:0 30px 90px rgba(8,45,43,.28); }
.work-order-dialog::backdrop { background:rgba(8,45,43,.5); }
.work-order-dialog form { margin:0; padding:26px; }
.dialog-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; }
.dialog-heading h2 { margin:0; }.dialog-heading button { width:auto; padding:8px 10px; }
.cost-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.work-order-photos { display:flex; gap:10px; margin-bottom:16px; }.work-order-photos figure { margin:0; }.work-order-photos img { width:130px; height:100px; border-radius:10px; object-fit:cover; }.work-order-photos figcaption { color:var(--muted); font-size:11px; }
.activity-section { margin-top:25px; padding-top:20px; border-top:1px solid var(--line); }.activity-list { display:grid; gap:8px; margin-bottom:14px; }.activity-list article { padding:11px; background:var(--paper); border-radius:10px; }.activity-list p { margin:3px 0 0; }.comment-fields { display:grid; grid-template-columns:160px 1fr auto; gap:8px; align-items:start; }.comment-fields input,.comment-fields textarea { margin:0; }.comment-fields button { width:auto; }
@media (max-width:600px) { .cost-grid,.comment-fields { grid-template-columns:1fr; } }
.asset-dialog-content { padding:26px; }.asset-profile { display:grid; grid-template-columns:180px 1fr; gap:18px; margin-top:20px; }.asset-profile > img { width:180px; height:180px; border-radius:14px; object-fit:cover; }.asset-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.asset-fields div { padding:10px 12px; border-radius:10px; background:var(--paper); }.asset-fields span,.asset-fields strong { display:block; }.asset-fields span { color:var(--muted); font-size:11px; font-weight:750; }.asset-notes { grid-column:1/-1; padding:13px; background:var(--paper); border-radius:10px; }.asset-dialog-actions { display:flex; justify-content:flex-end; margin-top:18px; }.asset-repair-history { display:grid; gap:9px; }
@media (max-width:600px) { .asset-profile,.asset-fields { grid-template-columns:1fr; }.asset-profile > img { width:100%; height:210px; } }
.parts-section { margin-top:46px; }.parts-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.part-card { display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:center; width:100%; padding:16px; border:1px solid var(--line); border-left:5px solid var(--green); background:#fff; color:var(--ink); text-align:left; font-weight:400; }.part-card img { width:58px; height:58px; border-radius:9px; object-fit:cover; }.part-card.low-stock { border-left-color:var(--red); background:#fff9f7; }.part-card p { margin:5px 0 0; }.use-part-fields { display:grid; grid-template-columns:1fr 100px auto; gap:8px; }.use-part-fields select,.use-part-fields input { margin:0; }.use-part-fields button { width:auto; }
@media (max-width:760px) { .parts-grid { grid-template-columns:1fr; }.use-part-fields { grid-template-columns:1fr; } }
.task-row { padding:12px; }
.task-instructions { grid-column:1/-1; margin:0; }
.task-reference-button { width:max-content; margin:0; cursor:pointer; }
.task-reference-button input { position:absolute; width:1px; height:1px; opacity:0; }
.task-reference-preview { width:86px; height:68px; border-radius:9px; object-fit:cover; }
.label-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:16px; }
.shelf-life-field { display:grid; grid-template-columns:1fr 120px; gap:8px; }
.label-preview-heading { margin:0 0 8px; font-weight:750; }
.label-preview { min-height:245px; padding:22px; border:2px solid #1b1b1b; border-radius:8px; background:#fff; color:#111; font-family:Arial,sans-serif; box-shadow:0 5px 16px rgba(8,45,43,.1); }
.label-preview strong { display:block; min-height:55px; font-size:26px; text-transform:uppercase; }
.label-preview hr { border:0; border-top:3px solid #111; margin:8px 0 18px; }
.label-preview span,.label-preview small { display:block; font-size:13px; font-weight:700; }
.label-preview b { display:block; margin:4px 0 22px; padding:12px; border:2px solid #111; font-size:21px; }
.label-preview small { margin-top:8px; }
@media (max-width:760px) { .label-editor-grid { grid-template-columns:1fr; } }
.security-card { max-width:560px; }
.security-card small { display:block; margin:-10px 0 14px; color:var(--muted); }