/* Nyirahindwe O&M — styles. Calendar styles taken from the reference mockup (28 Sept 2026). */ :root { --ink: #16262A; --ink-soft: #4C6167; --line: #D8E1DF; --line-soft: #E9EFED; --surface: #FFFFFF; --page: #F2F5F4; --deep: #17333A; --night: #E4EAEC; --row-h: 124px; --head-h: 36px; --c-grey: #9AA5A3; --c-grey-bg: #EEF1F0; --c-yellow: #C9931F; --c-yellow-bg: #FBEFD7; --c-blue: #3572A5; --c-blue-bg: #E3EDF5; --c-green: #2F7A54; --c-green-bg: #E4F2EA; --c-red: #B5432E; --c-red-bg: #FAE7E2; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #EAF0EF; --ink-soft: #AEC0BF; --line: #2C4247; --line-soft: #233639; --surface: #16282C; --page: #0F1E21; --deep: #0C1B1E; --night: #1B2F33; --c-grey: #7C8B89; --c-grey-bg: #1F2E30; --c-yellow: #E0B450; --c-yellow-bg: #35290F; --c-blue: #6EA6D8; --c-blue-bg: #1A2E3B; --c-green: #63B98D; --c-green-bg: #14301F; --c-red: #E28572; --c-red-bg: #35201A; } } :root[data-theme="dark"] { --ink: #EAF0EF; --ink-soft: #AEC0BF; --line: #2C4247; --line-soft: #233639; --surface: #16282C; --page: #0F1E21; --deep: #0C1B1E; --night: #1B2F33; --c-grey: #7C8B89; --c-grey-bg: #1F2E30; --c-yellow: #E0B450; --c-yellow-bg: #35290F; --c-blue: #6EA6D8; --c-blue-bg: #1A2E3B; --c-green: #63B98D; --c-green-bg: #14301F; --c-red: #E28572; --c-red-bg: #35201A; } html, body { height: 100%; } * { box-sizing: border-box; } html { scroll-padding-top: env(safe-area-inset-top, 0px); } body { margin: 0; background: var(--page); color: var(--ink); font-family: "Public Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, .brand { font-family: "Space Grotesk", system-ui, sans-serif; } .app { max-width: 1180px; margin: 0 auto; padding: 20px 20px 60px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .brand { display: flex; align-items: baseline; gap: 10px; } .brand .mark { width: 34px; height: 34px; border-radius: 8px; background: var(--deep); display: flex; align-items: center; justify-content: center; flex: none; } .brand .mark svg { width: 18px; height: 18px; } .brand .name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .brand .sub { font-size: 13px; color: var(--ink-soft); font-weight: 500; } .nav-cluster { display: flex; align-items: center; gap: 14px; } .month-nav { display: flex; align-items: center; gap: 4px; } .month-nav button { height: 30px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; } .month-nav button:not(#todayBtn) { width: 30px; } .month-nav button:hover { border-color: var(--ink-soft); } .month-label { font-size: 14px; font-weight: 600; min-width: 190px; text-align: center; } .view-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .view-toggle button { border: none; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; cursor: pointer; } .view-toggle button.active { background: var(--deep); color: #fff; } .view-toggle button, .month-nav button { white-space: nowrap; } .view-toggle { flex: none; } .nav-cluster { flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .view-toggle button:not(.active):hover { background: var(--line-soft); } .legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 14px; } .legend .item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); } .legend .swatch { width: 12px; height: 8px; border-radius: 3px; flex: none; } .overdue-alert { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--c-red); background: var(--c-red-bg); color: var(--c-red); font: inherit; font-weight: 700; font-size: 13px; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; cursor: pointer; } .overdue-alert:hover { filter: brightness(0.97); } .calendar-wrap { display: flex; gap: 6px; align-items: flex-start; } .month-gutter { width: 32px; flex: none; display: flex; flex-direction: column; } .gutter-spacer { height: var(--head-h); } .gutter-cell { height: var(--row-h); display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: capitalize; border-bottom: 1px solid transparent; } .cal-card { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .weekday-row { height: var(--head-h); display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); } .weekday-row div { display: flex; align-items: center; justify-content: flex-end; padding: 0 10px 0 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft); } .weeks { display: flex; flex-direction: column; } .week-row { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); } .week-row:last-child { border-bottom: none; } .week-row.current-week { background: var(--line-soft); } .day-cell { height: var(--row-h); padding: 6px 6px 22px; border-right: 1px solid var(--line-soft); position: relative; cursor: pointer; transition: background .12s ease; overflow: hidden; } .day-cell:last-child { border-right: none; } .day-cell:hover { background: var(--line-soft); } .day-cell.today .num { background: var(--deep); color: #fff; } .day-cell .num { font-size: 12.5px; font-weight: 600; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; } .day-badge { display: block; font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px; margin-bottom: 2px; letter-spacing: .01em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .daily-bar { height: 15px; border-radius: 4px; margin-bottom: 3px; display: flex; align-items: center; padding: 0 6px; font-size: 9.5px; font-weight: 700; color: #fff; letter-spacing: .01em; white-space: nowrap; overflow: hidden; } .lc-marker { font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .lc-more { font-size: 9px; font-weight: 700; color: var(--ink-soft); padding: 1px 5px; } .week-banner { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 15px; border-radius: 4px; display: flex; align-items: center; padding: 0 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .01em; overflow: hidden; white-space: nowrap; cursor: pointer; } .bottom-banner { margin-top: 16px; } .side-title { font-size: 13px; font-weight: 700; margin: 2px 0 10px; color: var(--ink-soft); } .row-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; cursor: pointer; } .row-card:hover { border-color: var(--ink-soft); } .row-card .swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; } .row-card .t { font-size: 13px; font-weight: 600; flex: 1; } .row-card .d { font-size: 11.5px; color: var(--ink-soft); flex: none; white-space: nowrap; } .list-section { margin-bottom: 20px; } .list-section-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; } .list-empty { font-size: 13px; color: var(--ink-soft); padding: 8px 2px; } .status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; } .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; } .scrim { position: fixed; inset: 0; background: rgba(10, 20, 22, .38); display: none; align-items: flex-end; justify-content: center; z-index: 20; } .scrim.open { display: flex; } @media (min-width: 640px) { .scrim { align-items: center; } } .sheet { background: var(--surface); width: 100%; max-width: 480px; border-radius: 16px 16px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: 82vh; overflow-y: auto; border: 1px solid var(--line); } @media (min-width: 640px) { .sheet { border-radius: 16px; max-height: 78vh; } } .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .sheet-head h3 { margin: 0; font-size: 18px; } .sheet-close { border: none; background: var(--line-soft); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; color: var(--ink-soft); flex: none; display: flex; align-items: center; justify-content: center; } .sheet-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; } .report-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--line-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; } .report-status .label { font-size: 12px; color: var(--ink-soft); font-weight: 600; } .task-list { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); border-radius: 10px; overflow: hidden; margin-bottom: 16px; } .task-row { display: flex; align-items: center; gap: 10px; background: var(--surface); padding: 10px 12px; } .task-row .check { width: 18px; height: 18px; border-radius: 5px; flex: none; display: flex; align-items: center; justify-content: center; } .task-row .check svg { width: 11px; height: 11px; } .task-row .t { font-size: 13.5px; flex: 1; line-height: 1.3; } .task-row .tag { font-size: 10.5px; color: var(--ink-soft); font-weight: 600; } .actions { display: flex; gap: 8px; flex-wrap: wrap; } .btn { font: inherit; font-size: 13px; font-weight: 700; border-radius: 9px; padding: 9px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .btn.primary { background: var(--deep); border-color: var(--deep); color: #fff; } .btn.warn { background: var(--c-red); border-color: var(--c-red); color: #fff; } .btn:hover { filter: brightness(1.05); } .note { font-size: 12px; color: var(--ink-soft); margin-top: 16px; line-height: 1.5; border-top: 1px dashed var(--line); padding-top: 12px; } .footer-note { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 22px; } .back-btn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px 0 8px; border-radius:7px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink); margin-right:6px; white-space:nowrap; flex:none; } .back-btn:hover { border-color:var(--ink-soft); } /* back button and arrows stay at the top of the screen while scrolling */ .stick-nav { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; margin:0 -20px 8px; padding:8px 20px; padding-top:calc(8px + env(safe-area-inset-top, 0px)); background:color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-bottom:1px solid var(--line-soft); } .stick-nav h1 { margin:0 0 0 4px !important; font-size:20px !important; line-height:1.2; min-width:0; } .stick-nav .t-short { display:none; } @media (max-width: 640px) { .stick-nav { margin:0 -10px 8px; padding-left:10px; padding-right:10px; gap:8px; } .stick-nav h1 { font-size:16px !important; margin-left:0 !important; } .stick-nav .t-long { display:none; } .stick-nav .t-short { display:inline; } } /* ---------- V1 additions ---------- */ .cal-controls { display:flex; justify-content:flex-end; margin-bottom:14px; } .daily-bar { cursor:pointer; } .topbar { position: relative; z-index: 25; } [hidden] { display:none !important; } /* top bar: who is signed in, network, menu */ .top-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .signed { font-size:12.5px; color:var(--ink-soft); } .netpill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; background:var(--c-green-bg); color:var(--c-green); } .netpill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .netpill.off { background:var(--c-red-bg); color:var(--c-red); } .netpill.unknown { background:var(--line-soft); color:var(--ink-soft); } .menu-btn { height:30px; padding:0 11px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .menu-btn:hover { border-color:var(--ink-soft); } .menu-btn.active { background:var(--deep); border-color:var(--deep); color:#fff; } /* app-wide banners (sign in again, new version) */ .app-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; border:1px solid var(--c-yellow); background:var(--c-yellow-bg); color:var(--ink); border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px; } .app-banner b { color:var(--c-yellow); } .app-banner.red { border-color:var(--c-red); background:var(--c-red-bg); } .app-banner.red b { color:var(--c-red); } /* bottom bar: what is kept on this device (§3.4) */ .syncbar { position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--surface); border-top:1px solid var(--line); padding:8px 20px calc(8px + env(safe-area-inset-bottom, 0px)); font-size:12.5px; color:var(--ink-soft); } .syncbar .inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .syncbar .off { color:var(--c-red); font-weight:700; } .syncbar .linkbtn, .linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--c-blue); text-decoration:underline; cursor:pointer; } body.has-syncbar .app { padding-bottom:70px; } body.report-open .syncbar { display:none; } /* the report screens have their own bottom bar */ /* sign-in screen */ .signin { max-width:420px; margin:12vh auto 0; padding:0 20px; } .signin .card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; } .signin h1 { margin:14px 0 6px; font-size:22px; } .signin p { color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin:0 0 14px; } .btn:disabled { opacity:.45; cursor:not-allowed; filter:none; } .btn.big { min-height:44px; padding:0 18px; font-size:14px; } /* screens built from cards: diagnostics, managers, report placeholder */ .screen-head h1 { margin:0 0 4px; font-size:22px; letter-spacing:-0.01em; } .screen-head p { margin:0 0 16px; color:var(--ink-soft); font-size:13px; line-height:1.5; } .card2 { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 18px 16px; margin-bottom:14px; } .card2 h2 { margin:0 0 4px; font-size:16px; font-weight:600; } .card2 .hint { color:var(--ink-soft); font-size:12.5px; margin:0 0 10px; line-height:1.5; } .kv { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line-soft); font-size:13px; } .kv:first-of-type { border-top:0; } .kv .k { font-weight:600; } .kv .v { text-align:right; color:var(--ink-soft); overflow-wrap:anywhere; } .badge { display:inline-block; padding:1px 8px; border-radius:99px; font-size:11.5px; font-weight:700; margin-right:4px; } .badge.ok { background:var(--c-green-bg); color:var(--c-green); } .badge.bad { background:var(--c-red-bg); color:var(--c-red); } .badge.warn { background:var(--c-yellow-bg); color:var(--c-yellow); } .badge.info { background:var(--line-soft); color:var(--ink-soft); } ul.log { list-style:none; padding:0; margin:6px 0 0; font-size:12.5px; color:var(--ink-soft); } ul.log li { padding:3px 0; border-top:1px dashed var(--line); } .actions { margin-top:10px; } .card2 textarea, .card2 input[type=text], .card2 input[type=email], .app-modal input[type=text], .app-modal input[type=email] { width:100%; font:inherit; font-size:14px; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--page); color:var(--ink); } .card2 textarea { min-height:80px; } label.btn { display:inline-flex; align-items:center; position:relative; } label.btn input { position:absolute; opacity:0; width:1px; height:1px; } .thumb { max-width:140px; border-radius:6px; margin-top:8px; display:block; } .form-row { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; } .form-row label { display:block; font-size:12px; color:var(--ink-soft); margin-bottom:3px; } @media (max-width: 640px) { .form-row { grid-template-columns:1fr; } .card2 { padding:12px; } } table.plain { width:100%; border-collapse:collapse; font-size:13px; } table.plain th { text-align:left; font-size:12px; font-weight:600; color:var(--ink-soft); padding:6px 4px; border-bottom:1px solid var(--line); } table.plain td { padding:7px 4px; border-bottom:1px solid var(--line-soft); vertical-align:middle; overflow-wrap:anywhere; } table.plain tr:last-child td { border-bottom:0; } /* report screen skeleton (the report bodies come in the next steps) */ #reportScreen { font-size:14px; padding-bottom:90px; } #reportScreen .report-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; } #reportScreen .arrows { display:flex; gap:4px; } #reportScreen .arrows button { width:30px; height:30px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; } #reportScreen .span { color:var(--ink-soft); font-size:13px; margin-top:3px; } #reportScreen .status-wrap { text-align:right; } .pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:700; } .pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .pill.in_progress { background:var(--c-yellow-bg); color:var(--c-yellow); } .pill.submitted { background:var(--c-blue-bg); color:var(--c-blue); } .pill.approved { background:var(--c-green-bg); color:var(--c-green); } .pill.rejected { background:var(--c-red-bg); color:var(--c-red); } .pill.future { background:var(--c-grey-bg); color:var(--c-grey); } #reportScreen .hist { font-size:12px; color:var(--ink-soft); margin-top:5px; } #reportScreen .actionbar { position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px)); z-index:20; } #reportScreen .actionbar .inner { max-width:1080px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } #reportScreen .actionbar .info { font-size:13px; color:var(--ink-soft); } #reportScreen .actionbar .btns { display:flex; gap:8px; } #reportScreen .actionbar .off { color:var(--c-red); font-weight:700; } /* app modal and toast */ .app-modal-bg { position:fixed; inset:0; background:rgba(10,20,22,.45); display:none; align-items:center; justify-content:center; z-index:80; padding:20px; } .app-modal-bg.open { display:flex; } .app-modal { background:var(--surface); border-radius:14px; max-width:480px; width:100%; padding:20px; border:1px solid var(--line); max-height:86vh; overflow:auto; } .app-modal h3 { margin:0 0 8px; font-size:18px; } .app-modal p { font-size:13.5px; color:var(--ink-soft); line-height:1.5; } .app-modal .btns { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; flex-wrap:wrap; } .app-modal .choice { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; font-size:13px; } .app-modal .choice b { display:block; margin-bottom:2px; } .app-modal .choice .who { color:var(--ink-soft); font-size:12px; margin-top:3px; } .app-toast { position:fixed; left:50%; bottom:70px; transform:translateX(-50%); background:var(--deep); color:#fff; padding:9px 16px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:90; max-width:90vw; } .app-toast.show { opacity:1; } @media (max-width: 640px) { .app { padding-left:10px; padding-right:10px; } :root { --row-h: 112px; } .month-label { min-width:0; font-size:13px; } .day-cell { padding:4px 3px 22px; } .daily-bar, .week-banner { font-size:8.5px; padding:0 3px; } .day-badge { font-size:8px; padding:2px 3px; } .row-card { flex-wrap:wrap; } .row-card .d { white-space:normal; } } @media (prefers-reduced-motion: reduce) { .app-toast { transition:none; } } /* ---------- daily report (step 2), taken from the reference mockup ---------- */ #reportScreen h1, #reportScreen h2, #reportScreen h3 { font-family:"Space Grotesk",system-ui,sans-serif; } #reportScreen button, #reportScreen input, #reportScreen select, #reportScreen textarea { font:inherit; color:inherit; } #reportScreen .tpick { display:inline-flex; align-items:center; gap:3px; border:1px solid transparent; border-radius:7px; padding:1px; } #reportScreen .tpick select { min-width:0; width:auto; padding:0 4px; } #reportScreen .tpick span { color:var(--ink-soft); } #reportScreen .banner { border-radius:10px; padding:11px 14px; margin-bottom:14px; font-size:13px; border:1px solid var(--c-red); background:var(--c-red-bg); } #reportScreen .banner b { color:var(--c-red); } #reportScreen .banner.review { border-color:var(--c-yellow); background:var(--c-yellow-bg); } #reportScreen .banner.review b { color:var(--c-yellow); } #reportScreen .banner.good { border-color:var(--c-green); background:var(--c-green-bg); } #reportScreen .banner.good b { color:var(--c-green); } #reportScreen .banner ul, .app-modal ul { margin:6px 0 0; padding-left:18px; } #reportScreen .banner li, .app-modal li { margin:2px 0; } #reportScreen .linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--c-blue); text-decoration:underline; cursor:pointer; } #reportScreen .chk-r { color:var(--c-red); font-weight:700; } #reportScreen .chk-w { color:var(--c-yellow); font-weight:700; } #reportScreen section.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; margin-bottom:16px; overflow:hidden; } #reportScreen .remind { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding:10px 16px; margin:0 0 16px; border:1px dashed var(--line); border-radius:12px; font-size:13px; color:var(--ink); } #reportScreen .remind-k { font-weight:600; } #reportScreen .remind-n { color:var(--ink-soft); font-size:12px; } #reportScreen .card-head { padding:14px 18px 8px; } #reportScreen .card-head h2 { margin:0; font-size:17px; font-weight:600; letter-spacing:-0.01em; } #reportScreen .card-head p { margin:3px 0 0; font-size:12.5px; color:var(--ink-soft); } #reportScreen .card-body { padding:0 18px 16px; } #reportScreen .scroll { overflow-x:auto; } #reportScreen table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; } #reportScreen th { text-align:left; font-size:12px; font-weight:600; color:var(--ink-soft); padding:7px 6px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:bottom; } #reportScreen th .slot { display:block; font-family:"Space Grotesk",sans-serif; font-size:16px; color:var(--ink); } #reportScreen th.nightcol, #reportScreen td.nightcol { background:color-mix(in srgb, var(--night) 50%, transparent); } #reportScreen td { padding:4px 6px; border-bottom:1px solid var(--line-soft); vertical-align:middle; } #reportScreen tr:last-child td { border-bottom:none; } #reportScreen td.lbl { font-size:13px; white-space:nowrap; } #reportScreen td.ref { font-size:12px; color:var(--ink-soft); white-space:nowrap; } #reportScreen td.grp { font-size:12px; font-weight:700; color:var(--ink-soft); padding-top:12px; } #reportScreen tr.timerow td { border-bottom:1px solid var(--line); } #reportScreen td.na { color:var(--ink-soft); font-size:12.5px; text-align:center; } #reportScreen input[type=number], #reportScreen input[type=text], #reportScreen input[type=time], #reportScreen select, #reportScreen textarea { width:100%; min-width:76px; height:32px; border:1px solid var(--line); border-radius:6px; background:var(--surface); padding:0 8px; font-size:13px; } #reportScreen input[type=number], #reportScreen input[data-num] { text-align:right; } #reportScreen input:disabled, #reportScreen select:disabled { background:var(--line-soft); color:var(--ink-soft); cursor:not-allowed; } #reportScreen .warn { border-color:var(--c-yellow) !important; background:var(--c-yellow-bg) !important; } #reportScreen .alarm { border-color:var(--c-red) !important; background:var(--c-red-bg) !important; } #reportScreen .missing { border:1.5px dashed var(--c-red) !important; } #reportScreen .shift-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } #reportScreen .shift-box { border:1px solid var(--line-soft); border-radius:10px; padding:12px; } #reportScreen .shift-box.nightbox { background:color-mix(in srgb, var(--night) 50%, transparent); } #reportScreen .shift-box h3 { margin:0 0 10px; font-size:14px; font-weight:600; } #reportScreen .shift-box h3 span { font-family:"Public Sans",sans-serif; font-weight:500; color:var(--ink-soft); font-size:12.5px; margin-left:6px; } #reportScreen .field { display:grid; grid-template-columns:170px 1fr; gap:8px; align-items:center; margin-bottom:7px; font-size:13px; } #reportScreen .field > label { color:var(--ink-soft); } #reportScreen .check { display:flex; align-items:center; gap:6px; white-space:nowrap; } #reportScreen .check input { width:16px; height:16px; } #reportScreen .sub-h { font-size:13px; font-weight:600; margin:16px 0 4px; } #reportScreen .events { display:flex; flex-direction:column; gap:10px; } #reportScreen .event { border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:grid; grid-template-columns:170px 1fr auto; gap:10px; align-items:start; } #reportScreen .event .fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; } #reportScreen .event.carried { border-color:var(--c-red); background:var(--c-red-bg); } #reportScreen .event .ro { padding:7px 0; font-size:13.5px; } #reportScreen .event .fields label { display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:3px; } #reportScreen .event .fields .wide { grid-column:1/-1; } #reportScreen .event .who { font-size:11.5px; color:var(--ink-soft); margin-top:6px; } #reportScreen .none { font-size:12.5px; color:var(--ink-soft); } #reportScreen .icon-btn { border:1px solid var(--line); background:var(--surface); border-radius:7px; width:30px; height:30px; cursor:pointer; color:var(--ink-soft); } #reportScreen .icon-btn:hover { color:var(--c-red); border-color:var(--c-red); } #reportScreen .btn { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:8px 14px; font-weight:600; font-size:13px; cursor:pointer; } #reportScreen .btn:hover { border-color:var(--ink-soft); } #reportScreen .btn.primary { background:var(--deep); border-color:var(--deep); color:#fff; } #reportScreen .btn.good { background:var(--c-green); border-color:var(--c-green); color:#fff; } #reportScreen .btn.bad { color:var(--c-red); border-color:var(--c-red); } #reportScreen .add-row { display:flex; gap:8px; align-items:center; margin-top:10px; } #reportScreen .add-row select { width:auto; } @media (max-width: 820px) { #reportScreen .shift-grid { grid-template-columns:1fr; } #reportScreen .event { grid-template-columns:1fr; } } /* guidance under the name of a line, instead of a separate column */ #reportScreen .hint { display:block; font-size:11.5px; font-style:italic; color:var(--ink-soft); font-weight:400; margin-top:1px; white-space:normal; } /* first column stays visible when the table scrolls sideways */ #reportScreen table.stick th:first-child, #reportScreen table.stick td:first-child { position:sticky; left:0; z-index:2; background:var(--surface); } #reportScreen table.stick td.lbl, #reportScreen table.stick th:first-child { box-shadow:1px 0 0 var(--line); } #reportScreen table.stick td.grp { position:static; background:transparent; } #reportScreen table.stick td.grp > span { position:sticky; left:12px; } /* rain gauge: time and mm on one line, wrapping if needed, never overlapping */ #reportScreen .rain { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; } #reportScreen .rain-k { color:var(--ink-soft); font-size:12.5px; white-space:nowrap; } #reportScreen .rain-v { display:flex; align-items:center; gap:8px; } #reportScreen .rain-v input[type=number], #reportScreen .rain-v input[data-num] { width:110px; } #reportScreen .field .ho { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } @media (max-width: 640px) { .app { padding-left:10px; padding-right:10px; } #reportScreen .card-head { padding:12px 12px 6px; } #reportScreen .card-body { padding:0 12px 14px; } #reportScreen .shift-box { padding:10px; } #reportScreen .field { grid-template-columns:1fr; gap:3px; margin-bottom:10px; } #reportScreen .field > label { font-size:12px; } #reportScreen .card-body.scroll:has(table.stick) { padding-left:0; padding-right:0; } #reportScreen table.stick td.lbl { white-space:normal; min-width:118px; max-width:150px; } #reportScreen table.stick th:first-child, #reportScreen table.stick td:first-child { padding-left:12px; } #reportScreen table.stick th:last-child, #reportScreen table.stick td:last-child { padding-right:12px; } #reportScreen table.day3 { table-layout:fixed; } #reportScreen table.day3 td.lbl { white-space:normal; } #reportScreen table.day3 td:first-child > div { flex-wrap:wrap; row-gap:4px; } #reportScreen table.day3 select { min-width:0; } #reportScreen table.day3 td[style*="width:260px"] { width:auto !important; } } #reportScreen .banner.info { border-color:var(--line); background:var(--surface); color:var(--ink-soft); } #reportScreen .banner code, #reportScreen .banner .linkbtn { overflow-wrap:anywhere; } .app-modal .chk-r { color:var(--c-red); font-weight:700; } .app-modal .chk-w { color:var(--c-yellow); font-weight:700; } #reportScreen .actionbar .btns { flex-wrap:wrap; } #reportScreen textarea { height:auto; } #reportScreen .card-body ul.log { margin-top:0; } /* v1.7: time outside the shift; time not needed (automatic cleaning skipped) */ #reportScreen .tpick.alarm select { border-color:var(--c-red); background:var(--c-red-bg); } #reportScreen .tpick.off { opacity:.45; } /* ---------- Weekly and monthly report (v1.10, V1 step 3): from the mockup, scoped under .wkx ---------- */ /* the daily rules of #reportScreen do not apply here */ #reportScreen .wkx select, #reportScreen .wkx input[type=text] { width:auto; min-width:0; } #reportScreen .wkx .tpick select { width:auto; } #reportScreen .wkx input[data-num] { width:90px; text-align:right; } #reportScreen .wkx table { font-variant-numeric:normal; } #reportScreen .wkx .pth.loading::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 40%, transparent), transparent); animation:wkShimmer 1.2s infinite; } #reportScreen .wkx .pth.gone { display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ink-soft); text-align:center; padding:6px; } @keyframes wkShimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } } @media (prefers-reduced-motion: reduce) { #reportScreen .wkx .pth.loading::after { animation:none; } } #reportScreen .wkx .pth .lc { position:absolute; left:5px; top:5px; background:var(--c-blue); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; } body.wz-open { overflow:hidden; } #reportScreen .wkx .wz-bg { z-index:60; } #reportScreen .wkx .wz-body .stepnote { font-size:12px; color:var(--ink-soft); margin:-4px 0 10px; line-height:1.4; } #reportScreen .wkx .soon { font-size:12px; color:var(--ink-soft); } /* ---------- Weekly report ---------- */ #reportScreen .wkx h1, #reportScreen .wkx h2, #reportScreen .wkx h3 { font-family:"Space Grotesk",system-ui,sans-serif; } #reportScreen .wkx button, #reportScreen .wkx input, #reportScreen .wkx select, #reportScreen .wkx textarea { font:inherit; color:inherit; } #reportScreen .wkx .wk-banner { border-radius:10px; padding:11px 14px; margin-bottom:14px; font-size:13px; border:1px solid var(--c-red); background:var(--c-red-bg); } #reportScreen .wkx .wk-banner b { color:var(--c-red); } #reportScreen .wkx .wk-banner.info { border-color:var(--line); background:var(--surface); color:var(--ink-soft); } #reportScreen .wkx section.wk-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; margin-bottom:16px; overflow:hidden; } #reportScreen .wkx .wk-card-head { padding:14px 18px 10px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; } #reportScreen .wkx .wk-card-head h2 { margin:0; font-size:17px; font-weight:600; letter-spacing:-0.01em; } #reportScreen .wkx .wk-card-head p { margin:3px 0 0; font-size:12.5px; color:var(--ink-soft); max-width:640px; line-height:1.45; } #reportScreen .wkx .wk-card-body { padding:0 18px 16px; } #reportScreen .wkx .wk-scroll { overflow-x:auto; } #reportScreen .wkx table.wk-t { border-collapse:collapse; width:100%; min-width:820px; } #reportScreen .wkx .wk-t th { text-align:left; font-size:12px; font-weight:600; color:var(--ink-soft); padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap; } #reportScreen .wkx .wk-t td { padding:6px 8px; border-bottom:1px solid var(--line-soft); vertical-align:middle; } #reportScreen .wkx .wk-t tr.wk-row { cursor:default; } #reportScreen .wkx .wk-t tr.wk-row.open td { border-bottom-color:transparent; background:var(--line-soft); } #reportScreen .wkx .wk-t td.eq { font-weight:600; font-size:13.5px; white-space:nowrap; } #reportScreen .wkx .eqbtn { display:flex; align-items:flex-start; gap:8px; border:none; background:none; padding:4px 0; cursor:pointer; text-align:left; font-weight:600; font-size:13.5px; } #reportScreen .wkx .wk-t td.eq .eqbtn .nm { display:block; font-weight:600; font-size:13.5px; color:var(--ink); } #reportScreen .wkx .eqbtn .chev { flex:none; margin-top:2px; color:var(--ink-soft); transition:transform .15s; } #reportScreen .wkx .eqbtn[aria-expanded="true"] .chev { transform:rotate(90deg); color:var(--ink); } #reportScreen .wkx .eqbtn:hover .nm { text-decoration:underline; text-underline-offset:3px; } #reportScreen .wkx .wk-t td.eq span { display:block; font-weight:500; font-size:11.5px; color:var(--ink-soft); } #reportScreen .wkx .wk-t td.ro { font-size:13px; color:var(--ink); white-space:nowrap; } #reportScreen .wkx .wk-t td.ro.empty { color:var(--ink-soft); } #reportScreen .wkx .wk-t tr.wk-detail td { background:var(--line-soft); padding:0 8px 14px; } #reportScreen .wkx .wk-t td.eq, #reportScreen .wkx .wk-t thead th:first-child { position:sticky; left:0; z-index:2; background:var(--surface); box-shadow:1px 0 0 var(--line); } #reportScreen .wkx .wk-t tr.wk-row.open td.eq { background:var(--line-soft); } /* checklist of an equipment: answers next to the questions, and always in view */ #reportScreen .wkx .wk-t tr.wk-detail .detail { position:sticky; left:8px; max-width:720px; } @media (max-width: 760px) { #reportScreen .wkx .wk-card-body { padding:0 10px 14px; } #reportScreen .wkx .wk-card-body.wk-scroll { padding-left:0; padding-right:0; } #reportScreen .wkx .wk-t th:first-child, #reportScreen .wkx .wk-t td:first-child { padding-left:10px; } #reportScreen .wkx .wk-t th:last-child, #reportScreen .wkx .wk-t td:last-child { padding-right:10px; } #reportScreen .wkx .wk-t td.eq { white-space:normal; min-width:130px; max-width:160px; } #reportScreen .wkx .wk-t tr.wk-detail .detail { left:10px; width:calc(100vw - 62px); } #reportScreen .wkx .detail .item { gap:8px; } } #reportScreen .wkx select, #reportScreen .wkx input[type=number], #reportScreen .wkx input[type=text], #reportScreen .wkx textarea { border:1px solid var(--line); border-radius:6px; background:var(--surface); height:32px; padding:0 8px; font-size:13px; } #reportScreen .wkx textarea { height:auto; width:100%; padding:7px 8px; resize:vertical; } #reportScreen .wkx select:disabled, #reportScreen .wkx input:disabled, #reportScreen .wkx textarea:disabled { background:var(--line-soft); color:var(--ink-soft); cursor:not-allowed; } #reportScreen .wkx .missing { border:1.5px dashed var(--c-red) !important; } #reportScreen .wkx .tpick { display:inline-flex; align-items:center; gap:3px; } #reportScreen .wkx .tpick select { padding:0 4px; } #reportScreen .wkx .tpick span { color:var(--ink-soft); } #reportScreen .wkx .chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; } #reportScreen .wkx .chip.none { background:var(--line-soft); color:var(--ink-soft); } #reportScreen .wkx .chip.part { background:var(--c-yellow-bg); color:var(--c-yellow); } #reportScreen .wkx .chip.ok { background:var(--c-green-bg); color:var(--c-green); } #reportScreen .wkx .chip.issue { background:var(--c-red-bg); color:var(--c-red); } #reportScreen .wkx .chip.local { background:var(--c-blue-bg); color:var(--c-blue); } #reportScreen .wkx .toggle { border:1px solid var(--line); background:var(--surface); border-radius:7px; height:30px; padding:0 10px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; } #reportScreen .wkx .toggle:hover { border-color:var(--ink-soft); } #reportScreen .wkx .detail { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:4px 14px 12px; } #reportScreen .wkx .item { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:13px; } #reportScreen .wkx .item:last-of-type { border-bottom:none; } #reportScreen .wkx .opts { justify-self:start; display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-wrap:wrap; } #reportScreen .wkx .opts button { border:none; border-right:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:12.5px; font-weight:600; padding:6px 11px; cursor:pointer; white-space:nowrap; } #reportScreen .wkx .opts button:last-child { border-right:none; } #reportScreen .wkx .opts button:hover:not(:disabled) { background:var(--line-soft); } #reportScreen .wkx .opts button.on { background:var(--c-green); color:#fff; } #reportScreen .wkx .opts button.on.bad { background:var(--c-red); } #reportScreen .wkx .opts button:disabled { cursor:not-allowed; } #reportScreen .wkx .opts.missing { border:1.5px dashed var(--c-red); } #reportScreen .wkx .pivgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(10, auto); grid-auto-flow:column; column-gap:28px; } #reportScreen .wkx .pivgrid .item { padding:5px 0; } #reportScreen .wkx .pivgrid .item:last-of-type { border-bottom:1px solid var(--line-soft); } @media (max-width: 760px) { #reportScreen .wkx .pivgrid { grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; } } #reportScreen .wkx .stopnote { font-size:12.5px; color:var(--c-red); font-weight:700; margin-bottom:6px; } #reportScreen .wkx .fine { font-size:12px; color:var(--ink-soft); } #reportScreen .wkx .cmt { margin-top:10px; } #reportScreen .wkx .cmt label { display:block; font-size:12px; color:var(--ink-soft); margin-bottom:4px; } #reportScreen .wkx .site-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; } #reportScreen .wkx .site-bar .progress { font-size:13px; } #reportScreen .wkx .site-bar .progress b { font-weight:700; } #reportScreen .wkx .site-bar .b { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } #reportScreen .wkx .tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; } @media (max-width: 1000px) { #reportScreen .wkx .tiles { grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (max-width: 760px) { #reportScreen .wkx .tiles { grid-template-columns:repeat(2, minmax(0,1fr)); } } #reportScreen .wkx .tile { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); cursor:pointer; text-align:left; padding:0; display:flex; flex-direction:column; } #reportScreen .wkx .tile:hover { border-color:var(--ink-soft); } #reportScreen .wkx .tile .th { aspect-ratio:16/10; background:var(--line-soft); position:relative; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:12px; } #reportScreen .wkx .tile .th { overflow:hidden; } #reportScreen .wkx .tile .th img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } #reportScreen .wkx .tile .th .n { position:absolute; right:6px; bottom:6px; background:rgba(10,20,22,.7); color:#fff; font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; } #reportScreen .wkx .tile .tb { padding:9px 11px 11px; display:flex; flex-direction:column; gap:5px; } #reportScreen .wkx .tile .tt { font-weight:600; font-size:13.5px; } #reportScreen .wkx .tile .tm { font-size:11.5px; color:var(--ink-soft); line-height:1.4; } #reportScreen .wkx .tile .chips { display:flex; gap:5px; flex-wrap:wrap; } /* site check walk-through */ #reportScreen .wkx .wz-bg { position:fixed; inset:0; background:rgba(10,20,22,.5); display:none; align-items:center; justify-content:center; z-index:60; padding:16px; } #reportScreen .wkx .wz-bg.open { display:flex; } #reportScreen .wkx .wz { background:var(--surface); border:1px solid var(--line); border-radius:16px; width:100%; max-width:1040px; height:100%; max-height:880px; display:flex; flex-direction:column; overflow:hidden; } #reportScreen .wkx .wz-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px 18px 10px; border-bottom:1px solid var(--line-soft); } #reportScreen .wkx .wz-top .k { font-size:12px; color:var(--ink-soft); font-weight:600; } #reportScreen .wkx .wz-top h2 { margin:2px 0 0; font-size:20px; letter-spacing:-0.01em; } #reportScreen .wkx .wz-top .r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } #reportScreen .wkx .wz-x { border:none; background:var(--line-soft); width:30px; height:30px; border-radius:7px; cursor:pointer; color:var(--ink-soft); } #reportScreen .wkx .wz-steps { display:flex; gap:6px; padding:10px 18px; overflow-x:auto; border-bottom:1px solid var(--line-soft); } #reportScreen .wkx .wz-steps button { display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:5px 11px 5px 6px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; color:var(--ink-soft); } #reportScreen .wkx .wz-steps button.cur { border-color:var(--deep); color:var(--ink); box-shadow:inset 0 0 0 1px var(--deep); } #reportScreen .wkx .wz-steps .dot { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--line-soft); color:var(--ink-soft); flex:none; } #reportScreen .wkx .wz-steps .dot.ok { background:var(--c-green); color:#fff; } #reportScreen .wkx .wz-steps .dot.issue { background:var(--c-red); color:#fff; } #reportScreen .wkx .wz-steps .dot.local { background:var(--c-blue); color:#fff; } #reportScreen .wkx .wz-steps .dot.part { background:var(--c-yellow); color:#fff; } #reportScreen .wkx .wz-note { margin:12px 18px 0; border-radius:10px; padding:9px 12px; font-size:12.5px; background:var(--c-blue-bg); color:var(--ink); line-height:1.45; } #reportScreen .wkx .wz-note.off { background:var(--c-yellow-bg); } #reportScreen .wkx .wz-body { flex:1; overflow-y:auto; padding:14px 18px 18px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-content:start; } #reportScreen .wkx .wz-body figure { margin:0 0 14px; } #reportScreen .wkx .wz-body figure img { width:100%; border-radius:10px; display:block; background:var(--line-soft); aspect-ratio:16/10; object-fit:cover; } #reportScreen .wkx .wz-body figcaption { font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.45; } #reportScreen .wkx .wz-body figcaption b { color:var(--ink); font-weight:600; } #reportScreen .wkx .wz-body h3 { margin:0 0 8px; font-size:15px; } #reportScreen .wkx .slot { border:1.5px dashed var(--line); border-radius:10px; aspect-ratio:16/10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:12px; margin-bottom:6px; } #reportScreen .wkx .slot.missing { border-color:var(--c-red); } #reportScreen .wkx .slot .big { font-size:13.5px; font-weight:600; } #reportScreen .wkx .slot .b { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; } #reportScreen .wkx .shot { position:relative; margin-bottom:6px; } #reportScreen .wkx .shot img { width:100%; border-radius:10px; display:block; aspect-ratio:16/10; object-fit:cover; } #reportScreen .wkx .shot .b { position:absolute; right:8px; top:8px; display:flex; gap:6px; } #reportScreen .wkx .shot .b .btn { padding:5px 9px; font-size:12px; } #reportScreen .wkx .pmeta { font-size:11.5px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4; } #reportScreen .wkx .pmeta.pw { color:var(--c-yellow); font-weight:600; } #reportScreen .wkx .frow { display:grid; grid-template-columns:110px 1fr; gap:8px; align-items:center; margin-bottom:8px; font-size:13px; } #reportScreen .wkx .frow > label { color:var(--ink-soft); } #reportScreen .wkx .fields { margin-top:12px; border-top:1px solid var(--line-soft); } #reportScreen .wkx .fields .item { grid-template-columns:1fr; gap:6px; } #reportScreen .wkx .check-list { margin:0; padding:0; list-style:none; } #reportScreen .wkx .check-list li { padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13px; } #reportScreen .wkx .check-list li span { display:block; font-size:12px; color:var(--ink-soft); margin-top:2px; } #reportScreen .wkx .wz-body figure.ref img { aspect-ratio:auto; object-fit:contain; max-height:460px; background:var(--line-soft); } #reportScreen .wkx .chk { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13px; } #reportScreen .wkx .chk .fine { margin-top:2px; } #reportScreen .wkx .iss { padding:8px 0 12px 14px; border-left:3px solid var(--c-red); margin:4px 0 6px; display:flex; flex-direction:column; gap:8px; } #reportScreen .wkx .iss .slot { aspect-ratio:auto; padding:16px 10px; } #reportScreen .wkx .pgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-bottom:12px; } #reportScreen .wkx .pgrid.sm { grid-template-columns:repeat(3, minmax(0,1fr)); margin-bottom:4px; } #reportScreen .wkx .pth { position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--line-soft); } #reportScreen .wkx .pth img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } #reportScreen .wkx .pth .rm { position:absolute; top:5px; right:5px; width:26px; height:26px; border-radius:50%; border:none; background:rgba(10,20,22,.7); color:#fff; cursor:pointer; font-size:12px; } #reportScreen .wkx .pth .tk { position:absolute; left:5px; bottom:5px; background:rgba(10,20,22,.72); color:#fff; font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px; max-width:calc(100% - 64px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #reportScreen .wkx .carried { border:2px solid var(--c-red); background:var(--c-red-bg); border-radius:10px; padding:9px 11px; margin:8px 0 4px; } #reportScreen .wkx .carried .ch { font-weight:700; color:var(--c-red); font-size:12.5px; margin-bottom:3px; } #reportScreen .wkx .carried .pv { font-size:12.5px; line-height:1.45; margin-bottom:4px; } #reportScreen .wkx .carried .chk { border-top:1px solid rgba(0,0,0,.08); margin-top:6px; padding-top:6px; } #reportScreen .wkx .item.co { background:var(--c-red-bg); box-shadow:inset 3px 0 0 var(--c-red); padding-left:9px; padding-right:6px; border-radius:6px; } #reportScreen .wkx .cotag { display:block; font-size:11.5px; font-weight:700; color:var(--c-red); margin-top:2px; } #reportScreen .wkx .carried.res { border-color:var(--c-green); background:var(--c-green-bg); } #reportScreen .wkx .carried .rs, #reportScreen .wkx .cotag.rs { color:var(--c-green); } #reportScreen .wkx .item.co.res { background:var(--c-green-bg); box-shadow:inset 3px 0 0 var(--c-green); } #reportScreen .wkx .chip.carry { background:var(--surface); color:var(--c-red); box-shadow:inset 0 0 0 1.5px var(--c-red); } #reportScreen .wkx .pth .tk.tkw { background:var(--c-red); font-size:11.5px; font-weight:700; padding:2px 8px; } #reportScreen .wkx .pgrid.sm .pth .sz { display:none; } #reportScreen .wkx .pgrid.sm .pth .tk { max-width:calc(100% - 10px); } #reportScreen .wkx .pth.flag { box-shadow:0 0 0 3px var(--c-red); } #reportScreen .wkx .pflag { border:2px solid var(--c-red); background:var(--c-red-bg); border-radius:10px; padding:10px 12px; margin-bottom:10px; font-size:13px; line-height:1.45; } #reportScreen .wkx .pflag b { color:var(--c-red); display:block; font-size:14px; margin-bottom:2px; } #reportScreen .wkx .tile.flag { border:2px solid var(--c-red); } #reportScreen .wkx .chip.flag { background:var(--c-red); color:#fff; } #reportScreen .wkx .wz-steps button.flag { border-color:var(--c-red); color:var(--c-red); } #reportScreen .wkx .wk-banner.photos { border-width:2px; font-size:13.5px; } #reportScreen .wkx .wk-banner.photos .zl { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } #reportScreen .wkx .wk-banner.photos .zl button { border:1px solid var(--c-red); background:var(--surface); color:var(--c-red); border-radius:999px; padding:4px 11px; font-size:12.5px; font-weight:600; cursor:pointer; } #reportScreen .wkx .pth .sz { position:absolute; right:5px; bottom:5px; background:rgba(10,20,22,.6); color:#fff; font-size:10.5px; padding:1px 6px; border-radius:999px; } #reportScreen .wkx .padd { border:1.5px dashed var(--line); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 8px; text-align:center; min-height:110px; } #reportScreen .wkx .padd.missing { border-color:var(--c-red); } #reportScreen .wkx .padd .big { font-size:12.5px; font-weight:600; } #reportScreen .wkx .padd .b { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; } #reportScreen .wkx .padd .btn { padding:6px 10px; font-size:12px; } #reportScreen .wkx .pgrid:not(.sm) .padd { grid-column:1 / -1; min-height:130px; } #reportScreen .wkx .pgrid:not(.sm) .pth + .padd, #reportScreen .wkx .pgrid.sm .padd { grid-column:auto; } #reportScreen .wkx .prob { display:flex; flex-direction:column; gap:6px; padding-bottom:10px; border-bottom:1px dashed var(--line); } #reportScreen .wkx .prob .ph { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; } #reportScreen .wkx .lnk { border:none; background:none; color:var(--c-red); font-weight:600; font-size:12px; cursor:pointer; padding:0; } #reportScreen .wkx .iss .toggle { align-self:flex-start; } #reportScreen .wkx .mpwrap { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:14px; } #reportScreen .wkx .mpgrid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } @media (max-width: 900px) { #reportScreen .wkx .mpgrid { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { #reportScreen .wkx .mpgrid { grid-template-columns:1fr; } } #reportScreen .wkx .mpt { border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; font-size:13px; } #reportScreen .wkx .mpt .msk { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:6px; display:block; } #reportScreen .wkx .mpt .fine { margin-top:2px; } #reportScreen .wkx .mprefs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; } #reportScreen .wkx .mprefs figure { margin:0; } #reportScreen .wkx .mprefs img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:6px; display:block; } #reportScreen .wkx .mprefs figcaption { font-size:11px; color:var(--ink-soft); margin-top:3px; line-height:1.3; } #reportScreen .wkx .mprefs .none { aspect-ratio:16/10; border-radius:6px; background:var(--line-soft); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ink-soft); text-align:center; padding:4px; } #reportScreen .wkx .mpt .pgrid.sm { grid-template-columns:repeat(2, minmax(0,1fr)); } #reportScreen .wkx .mpt .pgrid.sm .padd:only-child { grid-column:1 / -1; min-height:90px; } #reportScreen .wkx .wz-err { font-size:12.5px; color:var(--c-red); font-weight:600; } #reportScreen .wkx .wz-foot { border-top:1px solid var(--line); padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } #reportScreen .wkx .wz-foot .mid { font-size:12.5px; color:var(--ink-soft); flex:1; text-align:center; } #reportScreen .wkx .wz-foot .b { display:flex; gap:8px; } @media (max-width: 760px) { #reportScreen .wkx .wz-body { grid-template-columns:1fr; } #reportScreen .wkx .wz-bg { padding:0; } #reportScreen .wkx .wz { border-radius:0; max-height:none; } #reportScreen .wkx .wz-foot .mid { order:3; flex-basis:100%; } } /* v1.11: last week's photo under the reference, photo report of the monthly */ #reportScreen .wkx .wz-body figure.last .lastnone { aspect-ratio:16/10; border-radius:10px; background:var(--line-soft); display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--ink-soft); text-align:center; padding:8px; } #reportScreen .wkx .mpt textarea { width:100%; min-height:34px; padding:6px 8px; resize:vertical; } /* v1.13: photo to check marked as checked by management */ #reportScreen .wkx .pth .pok { position:absolute; left:5px; top:5px; border:none; border-radius:999px; background:var(--c-red); color:#fff; font-size:11px; font-weight:700; padding:3px 9px; cursor:pointer; max-width:calc(100% - 44px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #reportScreen .wkx .pth .pok.on { background:var(--c-green); } /* ---------- v1.14: Index REG sheet (§10), taken from the reference mockup ---------- */ #reportScreen .idx-drop { border:1.5px dashed var(--line); border-radius:12px; padding:26px 16px; text-align:center; margin-bottom:16px; background:var(--surface); transition:border-color .15s, background .15s; } #reportScreen .idx-drop.over { border-color:var(--c-blue); background:var(--c-blue-bg); } #reportScreen .idx-drop .big { font-size:14px; font-weight:600; margin-bottom:4px; } #reportScreen .idx-drop .small { font-size:12.5px; color:var(--ink-soft); margin-bottom:12px; } #reportScreen .idx-file { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:14px; background:var(--surface); } #reportScreen .idx-file .ico { width:34px; height:40px; border-radius:5px; background:var(--c-red-bg); color:var(--c-red); font-size:10px; font-weight:800; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; flex:none; } #reportScreen .idx-file .meta { flex:1; min-width:0; } #reportScreen .idx-file .fn { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #reportScreen .idx-file .fs { font-size:12px; color:var(--ink-soft); margin-top:2px; } #reportScreen .idx-file .fs .wait { color:var(--c-yellow); font-weight:600; } #reportScreen .idx-file .fa { display:flex; gap:6px; flex:none; } #reportScreen .idx-file .fa .btn { padding:6px 10px; font-size:12px; } #reportScreen .idx-check { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:14px; font-size:13px; background:var(--surface); } #reportScreen .idx-check .h { font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; } #reportScreen .idx-check .row { display:flex; gap:8px; line-height:1.45; padding:2px 0; } #reportScreen .idx-check .row .i { width:16px; flex:none; font-weight:800; text-align:center; } #reportScreen .idx-check .n { font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.45; } #reportScreen .idx-preview { background:var(--line-soft); border-radius:12px; padding:10px; margin-bottom:16px; } #reportScreen .idx-preview canvas { display:block; width:100%; max-width:820px; height:auto; background:#fff; border-radius:4px; margin:0 auto 10px; box-shadow:0 1px 3px rgba(0,0,0,.12); } #reportScreen .idx-preview canvas:last-child { margin-bottom:0; } #reportScreen .idx-preview .msg { font-size:12.5px; color:var(--ink-soft); text-align:center; padding:26px 10px; } @media (max-width: 640px) { #reportScreen .idx-file { flex-wrap:wrap; } #reportScreen .idx-file .fa { width:100%; justify-content:flex-end; } } /* v1.14: comparison with last month (two columns on a computer, two tabs on a phone) */ #reportScreen .idx-cmpbar { display:flex; justify-content:flex-end; margin:0 0 8px; } #reportScreen .idx-cmpbar .btn { padding:6px 10px; font-size:12px; } #reportScreen .idx-cmpbar:empty { display:none; } #reportScreen .idx-tabs { display:none; } #reportScreen .idx-ct { font-size:12.5px; color:var(--ink-soft); margin:0 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #reportScreen .idx-ct:empty { display:none; } #reportScreen .idx-pv.cmp .idx-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; } #reportScreen .idx-pv.cmp .idx-col { min-width:0; } @media (max-width: 720px) { #reportScreen .idx-pv.cmp .idx-cols { display:block; } #reportScreen .idx-pv.cmp .idx-tabs { display:flex; gap:6px; margin:0 -10px 8px; padding:6px 10px; position:sticky; top:var(--navh, 64px); z-index:30; background:var(--page); } #reportScreen .idx-tabs .tab { flex:1; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:8px; font-weight:600; font-size:13px; cursor:pointer; } #reportScreen .idx-tabs .tab.on { background:var(--deep); border-color:var(--deep); color:#fff; } #reportScreen .idx-pv.cmp:not(.tab-last) #iCol2 { display:none; } #reportScreen .idx-pv.cmp.tab-last #iCol1 { display:none; } } /* v1.16: on a computer, in the comparison, each file scrolls on its own, with its own scroll bar, so that the pages to compare can be lined up when the two files do not have the same number of pages */ @media (min-width: 721px) { #reportScreen .idx-pv.cmp .idx-preview { height:calc(100vh - 200px); min-height:360px; overflow-y:scroll; overscroll-behavior:contain; scrollbar-gutter:stable; } } /* v1.17: SharePoint folders (app owner) */ table.plain.fd td:first-child { width:1%; white-space:nowrap; vertical-align:top; padding-top:9px; } table.plain.fd .fd-path { color:var(--ink-soft); font-size:12.5px; margin-top:2px; overflow-wrap:anywhere; } table.plain.fd .fd-arrow { color:var(--ink); font-weight:700; } table.plain.fd td.fd-res { width:1%; white-space:nowrap; text-align:right; vertical-align:top; padding-top:9px; } table.plain.fd td.fd-res .fd-path { white-space:normal; max-width:220px; } .fd-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; } /* v1.18: state in SharePoint and in the app side by side */ table.plain.fd2 td { vertical-align:top; } table.plain.fd2 td:first-child { width:auto; white-space:normal; padding-top:7px; } table.plain.fd2 td:first-child .badge { margin-top:4px; } table.plain.fd2 td.fd-p { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; overflow-wrap:anywhere; width:32%; } table.plain.fd2 .fd-sub { font-family:inherit; color:var(--ink-soft); font-size:11.5px; } .fd-note { margin:12px 0 0; padding:9px 12px; border-left:3px solid var(--c-yellow); background:var(--c-yellow-bg); border-radius:6px; font-size:12.5px; line-height:1.5; } @media (max-width: 640px) { table.plain.fd2 thead { display:none; } table.plain.fd2, table.plain.fd2 tbody, table.plain.fd2 tr, table.plain.fd2 td { display:block; width:auto; } table.plain.fd2 tr { border-bottom:1px solid var(--line-soft); padding:6px 0; } table.plain.fd2 td { border:0; padding:3px 4px; text-align:left; } table.plain.fd2 td.fd-p, table.plain.fd2 td.fd-res { width:auto; white-space:normal; } table.plain.fd2 td.fd-p::before, table.plain.fd2 td.fd-res::before { content:attr(data-l); display:block; font-family:"Public Sans", system-ui, sans-serif; font-size:11px; font-weight:600; color:var(--ink-soft); } } /* ---------- v1.21: Issue boxes (§5.7), maintenance tasks (§11), bottom banner of the calendar (§7.4) ---------- */ .lc-more { cursor:pointer; } .lc-more:hover { color:var(--ink); text-decoration:underline; } .upcoming { margin-top:14px; border:1px solid var(--line); border-left:4px solid var(--c-yellow); border-radius:10px; background:var(--surface); padding:8px 12px; font-size:12.5px; line-height:1.45; } .upcoming .up-row { padding:4px 0; cursor:pointer; } .upcoming .up-row + .up-row { border-top:1px solid var(--line-soft); } .upcoming .up-row:hover b { text-decoration:underline; } #reportScreen .wkx .issbox { border:1.5px solid var(--c-red); background:var(--c-red-bg); border-radius:10px; padding:9px 11px 4px; margin:6px 0 4px; display:flex; flex-direction:column; gap:7px; } #reportScreen .wkx .issbox .ih { font-size:12.5px; color:var(--c-red); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; } #reportScreen .wkx .issbox .ih span { color:var(--ink-soft); font-weight:400; } #reportScreen .wkx .issbox.co { border-style:dashed; } #reportScreen .wkx .issbox textarea { background:var(--surface); } #reportScreen .wkx .issbox .pgrid.sm { margin-bottom:6px; } #reportScreen .wkx .issbox .padd { min-height:84px; padding:8px 6px; } #reportScreen .wkx .item > .ibx, #reportScreen .wkx .mitem > .ibx { grid-column:1 / -1; } #reportScreen .wkx .pivgrid .item > .ibx { grid-column:1 / -1; } #reportScreen tr.issrow td { padding-top:0; } #reportScreen .wkx.mx .wk-card-head p { max-width:820px; } #reportScreen .wkx.mx .mintro { margin-bottom:12px; } #reportScreen .wkx.mx .mintro b { display:block; margin-top:4px; } #reportScreen .wkx.mx .chips { display:flex; gap:6px; } #reportScreen .wkx.mx .mhead { display:grid; grid-template-columns:repeat(2, minmax(0, 260px)); gap:8px 18px; margin-bottom:10px; } #reportScreen .wkx.mx .mhead .frow { display:flex; flex-direction:column; gap:3px; } #reportScreen .wkx.mx .mhead label { font-size:12px; color:var(--ink-soft); } #reportScreen .wkx input[type=date] { border:1px solid var(--line); border-radius:6px; background:var(--surface); height:32px; padding:0 8px; font-size:13px; width:100%; } #reportScreen .wkx.mx .mitem .numu { display:flex; align-items:center; gap:6px; } #reportScreen .wkx.mx .mitem .numu input { width:110px; min-width:0; } #reportScreen .wkx.mx .mitem select { min-width:200px; } #reportScreen .wkx.mx .mfile { margin:4px 0 12px; } #reportScreen .wkx.mx .idx-preview { max-height:80vh; overflow:auto; margin-top:8px; } #reportScreen .wkx.mx .idx-drop.missing { border-color:var(--c-red); } @media (max-width: 640px) { #reportScreen .wkx.mx .mhead { grid-template-columns:1fr; } #reportScreen .wkx.mx .mitem { grid-template-columns:1fr; } #reportScreen .wkx.mx .mitem select { min-width:0; width:100%; } } #reportScreen .wkx.mx .mintro b { color:var(--ink); } #reportScreen .wkx.mx .mhead .frow { align-items:stretch; text-align:left; } #reportScreen .wkx.mx .mhead .frow > div { width:100%; } /* v1.22: day of the weekly and monthly with a date picker */ #reportScreen .wkx input.wday { min-width:138px; } #reportScreen .wkx input[type=date]:disabled { background:var(--line-soft); color:var(--ink-soft); cursor:not-allowed; } /* ---------- v1.23: help (i) next to a label (js/help.js): hover or click on a computer, tap on a phone ---------- */ .hlp, :is(#reportScreen,#app) .hlp.hlp { display:inline-flex; align-items:center; justify-content:center; flex:none; position:relative; width:17px; height:17px; min-width:0; margin:0 0 0 6px; padding:0; border-radius:50%; border:1.5px solid var(--c-blue); background:transparent; color:var(--c-blue); font:italic 700 11px/1 Georgia, "Times New Roman", serif; cursor:help; vertical-align:middle; text-transform:none; letter-spacing:0; box-shadow:none; } .hlp:hover, .hlp.on, :is(#reportScreen,#app) .hlp.hlp:hover, :is(#reportScreen,#app) .hlp.hlp.on { background:var(--c-blue); color:#fff; } @media (hover: none), (pointer: coarse) { .hlp, :is(#reportScreen,#app) .hlp.hlp { width:22px; height:22px; margin-left:8px; background:var(--c-blue); color:#fff; font-size:13px; border-color:var(--c-blue); } .hlp::after { content:""; position:absolute; inset:-11px; } } .hlptip { position:fixed; z-index:300; max-width:min(320px, calc(100vw - 16px)); display:none; background:var(--deep); color:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.45; font-weight:400; font-style:normal; box-shadow:0 8px 24px rgba(0,0,0,.2); text-align:left; } .hlptip b { display:block; margin-bottom:3px; font-size:13px; } .hlpsheet-bg { position:fixed; inset:0; z-index:310; background:rgba(10,20,22,.45); display:none; align-items:flex-end; } .hlpsheet-bg.open { display:flex; } .hlpsheet { width:100%; background:var(--surface); color:var(--ink); border-top:1px solid var(--line); border-radius:16px 16px 0 0; padding:14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); text-align:left; } .hlpsheet .grab { width:40px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 12px; } .hlpsheet h4 { margin:0 0 6px; font-size:16px; display:flex; align-items:center; gap:10px; font-family:"Space Grotesk",system-ui,sans-serif; } .hlpsheet h4 .dot { width:22px; height:22px; border-radius:50%; background:var(--c-blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font:italic 700 13px/1 Georgia, serif; flex:none; } .hlpsheet p { margin:0 0 14px; font-size:15px; line-height:1.5; } .hlpsheet button { width:100%; height:44px; border:0; border-radius:9px; background:var(--deep); color:#fff; font:inherit; font-weight:700; cursor:pointer; } #reportScreen .field > .flab, #reportScreen .wkx .frow > .flab { color:var(--ink-soft); display:flex; align-items:center; } #reportScreen .event .fields .flabel { display:flex; align-items:center; font-size:11.5px; color:var(--ink-soft); margin-bottom:3px; } .upcoming .up-title { font-weight:700; color:var(--ink-soft); display:flex; align-items:center; margin-bottom:2px; } /* v1.24: test page strip (config env "test"), at the top of every screen, sign-in included; not sticky, so the sticky report bar is never hidden */ .envstrip { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: #5B2A86; color: #fff; font-size: 13px; padding: 7px 16px; text-align: center; } .envstrip b { letter-spacing: .08em; font-weight: 700; }