/* ── MDS Pro Timesheet Admin — bluish · light + dark ────────────── Two themes derived from the mdspro marketing site: a deep-navy + electric-cyan palette. Light is the default; `html[data-theme="dark"]` flips the main content to the navy variant. The sidebar stays dark navy in both themes (brand). Most rules read the semantic vars below, so the dark override block near the end only re-points colors — no structural changes. `--pine*` = primary cyan (kept the old name to avoid a rename sweep); `--amber*` = the warm "live/working" accent. */ :root { color-scheme: light; --ink: #0f2238; --ink-soft: #59708a; --pine: #0e7c92; --pine-deep: #0a5f70; --pine-night: #0a1322; --azure: #2f6fd0; --azure-deep: #1b5096; --glow: #12b6d4; --paper: #eef3f9; --card: #ffffff; --wash: #f1f6fb; --field-bg: #ffffff; --line: #d9e3ee; --line-soft: #e8eef5; --amber: #e2a233; --amber-deep: #b07c1a; --amber-soft: #fbf0d8; --danger: #d9534a; --go: #16a34a; /* "on target" = go-sign green */ --go-deep: #15803d; /* on-target text */ --cream: #e9f0f7; --display: 'Fraunces', Georgia, serif; --body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif; --shadow-card: 0 18px 40px -28px rgba(15, 34, 56, 0.5); --shadow-soft: 0 10px 24px -18px rgba(15, 34, 56, 0.42); } html[data-theme="dark"] { color-scheme: dark; --ink: #eef3fa; --ink-soft: #8597ad; --pine: #22d3ee; --pine-deep: #67e8f5; --pine-night: #070c16; --azure: #3f7fde; --azure-deep: #9cc4f5; --glow: #22d3ee; --paper: #0a0e1a; --card: #0f1626; --wash: #151f30; --field-bg: #0c1322; --line: #1f2b40; --line-soft: #182234; --amber: #f0b13c; --amber-deep: #f0b13c; --amber-soft: #2a2310; --danger: #f0746a; --go: #34d399; /* "on target" = go-sign green (dark) */ --go-deep: #6ee7b7; /* on-target text (dark) */ --cream: #e9f0f7; --shadow-card: 0 18px 44px -26px rgba(0, 0, 0, 0.75); --shadow-soft: 0 10px 26px -18px rgba(0, 0, 0, 0.7); } * { box-sizing: border-box; margin: 0; } html, body { height: 100%; } /* Clip stray horizontal overflow (e.g. the off-canvas mobile sidebar parked at translateX(100%)) so iOS Safari doesn't shrink-to-fit and load the page zoomed. `clip` (not `hidden`) keeps position: sticky working — it makes no scroll box. */ html, body { overflow-x: clip; } body { font-family: var(--body); font-size: 14px; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } .hidden { display: none !important; } /* lock background scroll while a modal/overlay is open */ body.modal-open { overflow: hidden; } /* ── icons ───────────────────────────────────── */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ico { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; } /* ── brand ───────────────────────────────────── */ .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--pine-night); background: linear-gradient(150deg, #f0c463, var(--amber) 55%, var(--amber-deep)); box-shadow: 0 8px 18px -8px rgba(185, 127, 31, 0.6); } .brand-mark .ico { width: 22px; height: 22px; stroke-width: 2.1; } .brand-words { display: flex; flex-direction: column; gap: 2px; line-height: 1; } .brand-main { font-family: var(--display); font-style: italic; font-weight: 650; font-size: 21px; color: var(--pine-deep); } .brand-sub { font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } /* ── brand wordmark logo (replaces the amber icon + text lockup) ─── One transparent PNG per theme: the navy/cyan logo on light surfaces, a cream/cyan knockout on dark ones. `--on-dark` pins the knockout for the always-dark sidebar regardless of the active theme. */ .brand-logo { display: block; width: 164px; height: 58px; background: url("logo.png") left center / contain no-repeat; } html[data-theme="dark"] .brand-logo { background-image: url("logo-dark.png"); } .brand-logo--on-dark, html[data-theme="dark"] .brand-logo--on-dark { background-image: url("logo-dark.png"); } .login-card .brand-logo { width: 196px; height: 68px; margin-bottom: 2px; } .sidebar .brand-logo { width: 150px; height: 52px; } .topbar .brand-logo { width: 104px; height: 30px; flex: none; } /* ── login stage ─────────────────────────────── */ .login-stage { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(70% 90% at 85% 10%, rgba(20, 105, 92, 0.16) 0%, transparent 60%), radial-gradient(50% 60% at 10% 90%, rgba(220, 163, 60, 0.12) 0%, transparent 60%), var(--paper); } .login-card { width: min(400px, 92vw); background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 34px 36px 32px; box-shadow: 0 40px 80px -36px rgba(16, 43, 40, 0.5); animation: rise 0.4s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } } .login-card h1 { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.08; margin: 22px 0 22px; } .login-card h1 em { font-style: italic; color: var(--pine); } /* ── shell ───────────────────────────────────── */ .shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; } .sidebar { background: radial-gradient(130% 60% at 0% 0%, rgba(34, 211, 238, 0.16) 0%, transparent 62%), var(--pine-night); color: var(--cream); display: flex; flex-direction: column; padding: 26px 18px; position: sticky; top: 0; height: 100vh; } .sidebar .brand-main { color: var(--cream); } .sidebar .brand-sub { color: #9dbcb2; } .nav { margin-top: 40px; display: flex; flex-direction: column; gap: 3px; } .nav-item { position: relative; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; color: #aec7bf; padding: 11px 13px; border-radius: 11px; display: flex; align-items: center; gap: 12px; transition: background 0.16s, color 0.16s; } .nav-item .ico { width: 18px; height: 18px; opacity: 0.85; transition: color 0.16s; } .nav-item .nav-label { flex: 1; } .nav-item:hover { background: rgba(243, 238, 225, 0.07); color: var(--cream); } .nav-item.active { background: rgba(243, 238, 225, 0.1); color: #fff; } .nav-item.active::before { content: ''; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: #22d3ee; } .nav-item.active .ico { color: #22d3ee; opacity: 1; } .badge { margin-left: auto; background: var(--amber); color: #2c1f04; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center; } .sidebar-foot { margin-top: auto; border-top: 1px solid rgba(243, 238, 225, 0.13); padding-top: 16px; } .admin-chip { display: flex; align-items: center; gap: 11px; } .admin-avatar { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--amber); background: rgba(243, 238, 225, 0.09); } .admin-avatar .ico { width: 18px; height: 18px; } .admin-meta { min-width: 0; } .admin-name { font-size: 13px; font-weight: 700; color: var(--cream); margin-bottom: 2px; } .link-btn { border: 0; background: none; font: inherit; font-size: 12px; color: #9dbcb2; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; } .link-btn .ico { width: 13px; height: 13px; } .link-btn:hover { color: var(--amber); } .main { padding: 36px 44px 64px; width: 100%; max-width: 2400px; margin: 0 auto; } /* ── page head ───────────────────────────────── */ .page { animation: rise 0.3s ease both; } .page-head { margin-bottom: 26px; } .head-text { min-width: 0; } .page-head h2 { font-family: var(--display); font-weight: 650; font-size: 30px; line-height: 1.12; } .page-sub { color: var(--ink-soft); font-size: 13px; margin-top: 5px; max-width: 64ch; } /* ── toolbar / filters ───────────────────────── */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .filters { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; } .field-icon { position: relative; display: inline-flex; align-items: center; } .field-icon > .ico { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-soft); pointer-events: none; } .field-icon select, .field-icon input, .filters select, .filters input { font: inherit; font-size: 13px; color: var(--ink); background-color: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .field-icon select, .field-icon input { padding-left: 32px; } .field-icon select:focus, .field-icon input:focus, .filters select:focus, .filters input:focus { border-color: var(--pine); box-shadow: 0 0 0 3px rgba(20, 105, 92, 0.12); } .date-range { display: inline-flex; align-items: center; gap: 9px; } .filter-sep { color: var(--ink-soft); font-size: 14px; } .filter-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); } /* ── overview cards ──────────────────────────── */ /* Auto-fit: more cards per row on wide screens, fewer on small — e.g. all six nurses in one row on a 2560 display, ~3 on a laptop, 1 on a phone. */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; align-content: start; max-height: 50vh; overflow-y: auto; padding: 2px 6px 2px 2px; } .nurse-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.18s, box-shadow 0.18s; } .nurse-card:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -28px rgba(16, 43, 40, 0.55); } .nurse-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--line-soft); } .nurse-card.status-working::before { background: linear-gradient(90deg, var(--pine), #4fc4d6); } .nurse-card.status-break::before { background: linear-gradient(90deg, #6fa0c9, #a9c8e3); } .nurse-card.status-done::before { background: linear-gradient(90deg, var(--pine), #5fae9c); } .nurse-card.status-working { border-color: #bfe3ea; background: linear-gradient(180deg, var(--card), #ecf9fb); } .nurse-card.status-break { border-color: #cfe0ef; background: linear-gradient(180deg, var(--card), #f1f6fb); } .nurse-card h3 { font-family: var(--display); font-weight: 650; font-size: 16px; line-height: 1.2; } .nurse-card .card-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; flex-wrap: wrap; } .nurse-card .role { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .nurse-card .clocked-in { margin-top: 6px; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; } .nurse-card .clocked-in .ico { width: 14px; height: 14px; color: var(--pine); } .nurse-card .clocked-out .ico { color: var(--ink-soft); } .nurse-card .clocked-in strong { color: var(--ink); font-weight: 800; } .nurse-card .now-task { margin-top: 8px; line-height: 1.35; background: #ecf9fb; border: 1px solid #cdeaf0; border-radius: 10px; padding: 7px 9px; } .nurse-card .now-timer { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 650; color: var(--pine-deep); } .nurse-card .now-timer .ico { width: 17px; height: 17px; color: var(--pine); } .nurse-card .now-timer small { font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .nurse-card .now-case { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--pine-deep); background: rgba(20,124,146,0.10); border: 1px solid rgba(20,124,146,0.22); border-radius: 999px; padding: 2px 9px; } html[data-theme="dark"] .nurse-card .now-case { color: #67e8f5; background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.3); } .nurse-card .now-since { font-size: 11px; color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; } /* Live "on this host right now" chip. Amber = drifted off to a non-work site (host + live elapsed), green = focused on the work site, grey = idle. */ .nurse-card .now-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 2px 10px 2px 8px; border: 1px solid transparent; } .nurse-card .now-live strong { font-weight: 800; } .nurse-card .now-live .live-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .nurse-card .now-live.off { color: var(--amber-deep); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber-deep) 30%, transparent); } .nurse-card .now-live.off .live-dot { background: var(--amber); animation: livePulse 1.6s ease-in-out infinite; } .nurse-card .now-live.work { color: var(--go-deep); background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.26); } .nurse-card .now-live.work .live-dot { background: var(--go); } .nurse-card .now-live.idle { color: var(--ink-soft); background: var(--line-soft); } .nurse-card .now-live.idle .live-dot { background: var(--ink-soft); } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* 8h daily-target chip (on cards) + team goal strip (above the grid) */ .goal-chip { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--amber-deep); background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber-deep) 30%, transparent); } .goal-chip.goal-hit { color: var(--go-deep); background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.30); } .goal-strip { margin: 2px 0 14px; } .goal-strip.hidden { display: none; } .goal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); } .goal-row .goal-lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); } .goal-row .goal-lbl .ico { width: 15px; height: 15px; color: var(--go-deep); } .goal-count strong, .goal-team strong { color: var(--ink); font-weight: 800; } .goal-count.goal-hit strong { color: var(--go-deep); } .goal-sep { opacity: 0.5; } .goal-bar { margin-top: 6px; height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; } .goal-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--go), color-mix(in srgb, var(--go) 55%, #fff)); transition: width 0.5s ease; } .nurse-card .now-note { margin-top: 7px; font-size: 12.5px; color: var(--ink); display: flex; gap: 5px; align-items: flex-start; } .nurse-card .now-note .ico { width: 13px; height: 13px; color: var(--pine); margin-top: 2px; flex: none; } /* Break state: a compact "hours so far + cases worked today" recap. */ .nurse-card .now-break { margin-top: 9px; } .nurse-card .break-hours { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .nurse-card .break-hours .ico { width: 14px; height: 14px; color: #6fa0c9; } .nurse-card .break-hours strong { color: var(--ink); font-weight: 800; font-size: 14px; } .nurse-card .break-cases { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; } .nurse-card .break-case { display: flex; align-items: center; gap: 7px; font-size: 12px; } .nurse-card .bc-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; } .nurse-card .bc-type { color: var(--ink); font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nurse-card .bc-hrs { color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; } .nurse-card .bc-hrs small { font-weight: 600; opacity: 0.7; } .nurse-card .meta { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft, #ece7d9); display: flex; justify-content: space-between; gap: 10px; } .nurse-card .meta .stat { flex-direction: row; align-items: center; gap: 6px; } .nurse-card .meta .stat .stat-ico { margin-bottom: 0; } .nurse-card .meta .stat-num { font-size: 16px; } .nurse-card .meta .stat small { margin-top: 0; } .nurse-card .stat { display: flex; flex-direction: column; align-items: flex-start; } .nurse-card .stat .stat-ico { width: 15px; height: 15px; color: var(--pine); opacity: 0.65; margin-bottom: 7px; } .nurse-card .stat-num { font-family: var(--display); font-size: 22px; font-weight: 650; color: var(--pine-deep); line-height: 1.1; } .nurse-card .stat small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; } /* status pills */ .live-pill, .break-pill, .done-pill, .off-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; } .live-pill .ico, .break-pill .ico, .done-pill .ico, .off-pill .ico { width: 12px; height: 12px; } .live-pill { color: var(--pine-deep); background: rgba(20,124,146,0.10); border: 1px solid rgba(20,124,146,0.25); } .live-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); animation: pulse 1.6s ease infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 163, 60, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(220, 163, 60, 0); } } .off-pill { color: #97917e; } .break-pill { color: #2f6690; background: #e6eef6; border: 1px solid #cfe0ef; } .done-pill { color: var(--pine-deep); background: #e2efe7; border: 1px solid #c9ddd4; } .live-badge { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine-deep); background: #e2efe7; border: 1px solid #c9ddd4; border-radius: 999px; padding: 2px 9px; margin-left: 8px; } .live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pine); animation: pulse 1.6s ease infinite; } /* ── insights ────────────────────────────────── */ /* period segmented control */ .seg { display: inline-flex; gap: 3px; padding: 4px; margin-bottom: 20px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; } .seg-btn { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px; color: var(--ink-soft); padding: 7px 16px; border-radius: 9px; transition: background 0.15s, color 0.15s; } .seg-btn:hover { color: var(--ink); } .seg-btn.active { background: var(--card); color: var(--pine-deep); box-shadow: 0 2px 6px -3px rgba(16, 43, 40, 0.4); } /* Overview cards toolbar: status filter pills (left) + hide toggle (right) */ .cards-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } #cards-filter { flex-wrap: wrap; } #cards-filter .seg-btn { display: inline-flex; align-items: center; gap: 5px; } #cards-filter .seg-btn .ico { width: 14px; height: 14px; opacity: 0.85; } /* Hide/show toggle reuses .cards-toggle; chevron points down when shown, right when hidden */ .cards-toggle .chev { width: 14px; height: 14px; transition: transform 0.18s ease; vertical-align: -2px; margin-right: 2px; } .cards-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); } .seg-sm { margin-bottom: 0; padding: 3px; } .seg-sm .seg-btn { padding: 5px 12px; font-size: 12.5px; } .cards-toggle { border: 1px solid var(--line); background: var(--cream); cursor: pointer; font: inherit; font-weight: 600; font-size: 12.5px; color: var(--ink-soft); padding: 6px 13px; border-radius: 9px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cards-toggle:hover { color: var(--ink); } .cards-toggle.active { background: var(--card); color: var(--pine-deep); border-color: var(--pine); } /* "Hours by nurse" panel header: title left, period control right */ .bynurse-panel { margin-top: 2px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; } .panel-head h3 { font-family: var(--display); font-weight: 650; font-size: 17px; display: flex; align-items: center; gap: 8px; } .panel-head h3 .ico { width: 17px; height: 17px; color: var(--pine); } .panel-head .seg { margin-bottom: 0; } .seg-count { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 5px; padding: 1px 7px; border-radius: 999px; background: var(--cream); color: var(--ink-soft); } .seg-btn.active .seg-count { background: var(--wash); color: var(--pine-deep); } /* clickable Overview nurse cards (open the stats modal) */ .nurse-card.clickable { cursor: pointer; } /* team charts section, spaced below the nurse cards */ .team-charts { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; } .charts-head { margin-bottom: 0; } .charts-head h3 { font-family: var(--display); font-weight: 650; font-size: 18px; } /* Cases panel controls: date browser + period seg, right-aligned in the head */ .cases-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .date-nav { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; } .date-nav.browsing { border-color: var(--pine); box-shadow: 0 0 0 1px var(--pine) inset; } .date-arrow { border: 0; background: none; cursor: pointer; color: var(--ink-soft); font-size: 18px; line-height: 1; font-weight: 700; width: 28px; height: 28px; border-radius: 8px; transition: background 0.15s, color 0.15s; } .date-arrow:hover:not(:disabled) { background: var(--card); color: var(--pine-deep); } .date-arrow:disabled { opacity: 0.35; cursor: default; } .date-input { border: 0; background: none; font: inherit; font-weight: 600; font-size: 12.5px; color: var(--ink); padding: 4px 6px; border-radius: 8px; cursor: pointer; color-scheme: light; } .date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; } .date-today { border: 0; background: var(--pine); color: #fff; cursor: pointer; font: inherit; font-weight: 650; font-size: 12px; padding: 5px 11px; border-radius: 8px; margin-left: 2px; transition: background 0.15s; } .date-today:hover { background: var(--pine-deep); } html[data-theme="dark"] .date-nav { background: var(--wash); } html[data-theme="dark"] .date-input { color-scheme: dark; } /* .insight-grid.two-col so it beats the later, single-class .insight-grid rule */ .insight-grid.two-col { grid-template-columns: 1fr 1fr; align-items: stretch; } @media (max-width: 980px) { .insight-grid.two-col { grid-template-columns: 1fr; } } /* equal-height panel boxes; the column chart fills the panel so its bars are taller and anchored to the bottom (columns already align to flex-end) */ .two-col .insight-panel { display: flex; flex-direction: column; } .two-col .daychart { flex: 1; height: auto; min-height: 180px; } /* the nurse modal's own period control */ .seg-modal { margin: 2px 0 12px; } /* payroll donut + legend */ .donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; } .donut { width: 150px; height: 150px; flex: none; } /* segments draw on clockwise; timing/delay set inline per slice for a sweep */ .donut-seg { animation-name: donut-draw; animation-timing-function: linear; animation-fill-mode: both; } @keyframes donut-draw { from { stroke-dasharray: 0 400; } } .donut-total { font-family: var(--display); font-weight: 650; font-size: 21px; fill: var(--pine-deep); text-anchor: middle; } .donut-cap { font-size: 9px; fill: var(--ink-soft); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.12em; } /* Multi-column initials legend — flows into columns and caps height so it stays compact as the team grows (full name + value live in the tooltip). */ .donut-legend { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px 14px; flex: 1; min-width: 170px; font-size: 12.5px; max-height: 168px; overflow-y: auto; } .donut-legend li { display: flex; align-items: center; gap: 7px; min-width: 0; cursor: default; } .lg-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; } .lg-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lg-val { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } /* clocked-vs-on-site cross-match */ .cvs-list { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; } /* Scrollable so the rosters stay a fixed height as the team grows. */ #cvs-list, #cases-adherence { max-height: 360px; overflow-y: auto; padding-right: 6px; } .cvs-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 12px; } .cvs-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cvs-bar { height: 12px; } .cvs-track { display: block; height: 100%; border-radius: 999px; background: #e7efe9; overflow: hidden; } .cvs-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pine), #2f8d7c); transform-origin: left center; animation: bar-grow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .cvs-val { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .cvs-val strong { color: var(--pine-deep); } .cvs-val .cvs-low { color: var(--danger); } /* Off-site activity bars (nurse modal) — amber so they read as time off the work site. */ .off-list { display: flex; flex-direction: column; gap: 9px; max-height: 320px; overflow-y: auto; padding-right: 6px; } .off-list .cvs-name { font-variant-numeric: tabular-nums; } /* The nurse modal is fully re-rendered on every live overview refresh, so the grow-in would replay each time and the bars look like they "keep refilling". Paint them static — the modal has no one-shot no-anim scope like the overview. */ .cvs-fill.off-fill { background: linear-gradient(90deg, #e8a23a, #e8705c); animation: none; } /* Adherence rows open the nurse modal — give them a clear clickable affordance. */ .cvs-row.clickable { cursor: pointer; border-radius: 9px; margin: 0 -8px; padding: 4px 8px; transition: background 0.12s ease; } .cvs-row.clickable:hover { background: var(--pine-faint, rgba(47, 141, 124, 0.08)); } .cvs-row.clickable:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; } @media (max-width: 560px) { .cvs-row { grid-template-columns: 1fr; gap: 4px; } .cvs-val { font-size: 11.5px; } } /* ── work-rate / integrity check ──────────────────────────────── */ #workrate-list { max-height: 360px; overflow-y: auto; padding-right: 6px; } /* The expected-output tick sits on top of the clocked track. */ #workrate-list .cvs-track { position: relative; overflow: visible; } .wr-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 2px; background: var(--ink); opacity: 0.55; transform: translateX(-1px); } .wr-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 10px; } .wr-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); } .wr-key-fill { width: 16px; height: 9px; border-radius: 999px; background: linear-gradient(90deg, var(--pine), #2f8d7c); } .wr-key-tick { width: 2px; height: 12px; border-radius: 2px; background: var(--ink); opacity: 0.55; } .wr-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; } .wr-dot.wr-solid { background: var(--pine-deep); } .wr-dot.wr-watch { background: var(--amber-deep); } .wr-dot.wr-flag { background: var(--danger); } .cvs-val strong.wr-solid { color: var(--pine-deep); } .cvs-val strong.wr-watch { color: var(--amber-deep); } .cvs-val strong.wr-flag { color: var(--danger); } /* ── case tracking + benchmarks ───────────────────────────────── */ /* Benchmark adherence: a stacked on/over/under bar (reuses .cvs-track). */ .adh-track { display: flex; height: 100%; border-radius: 999px; background: #e7efe9; overflow: hidden; } .adh-seg { display: block; height: 100%; animation: bar-grow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; transform-origin: left center; } /* On target = green (the "go" sign). */ .adh-on { background: linear-gradient(180deg, var(--go), color-mix(in srgb, var(--go) 60%, transparent)); box-shadow: inset 0 0 0 1px var(--go); } .adh-over { background: linear-gradient(180deg, #e8705c, #e8705c99); box-shadow: inset 0 0 0 1px #e8705c; } /* Under = faster than benchmark (good); teal (the old on-target colour). */ .adh-under { background: linear-gradient(180deg, #0fb1c4, #0fb1c499); box-shadow: inset 0 0 0 1px #0fb1c4; } html[data-theme="dark"] .adh-track { background: rgba(255,255,255,0.06); } .bench-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .bench-chip { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--line-soft); } .bench-chip-on { color: var(--go-deep); background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.28); } .bench-chip-over { color: var(--danger); background: rgba(217,83,74,0.10); border-color: rgba(217,83,74,0.25); } /* Under = faster than benchmark (good); teal (the old on-target colour). */ .bench-chip-under { color: var(--pine-deep); background: rgba(20,124,146,0.10); border-color: rgba(20,124,146,0.25); } .chip.bench-chip-on strong { color: var(--go-deep); } .chip.bench-chip-over strong { color: var(--danger); } .chip.bench-chip-under strong { color: var(--pine-deep); } /* Case column + benchmark badge in tables */ .case-col, td.case-col { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; } .case-none { color: var(--ink-soft); opacity: 0.6; } .case-label { color: var(--ink); } /* Inline panel header with a control on the right (sort toggle). */ .panel-head-inline { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .sort-toggle { font: inherit; font-size: 12px; font-weight: 600; color: var(--pine-deep); background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap; flex: none; transition: border-color 0.15s; } .sort-toggle:hover { border-color: var(--pine); } /* Group of controls on the right of a panel header (info pill + sort seg). */ .head-controls { display: flex; align-items: center; gap: 8px; flex: none; } /* Info pill that reveals the case-benchmarks reference table on hover/focus. */ .bench-info { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--pine-deep); background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; cursor: help; white-space: nowrap; transition: border-color 0.15s; } .bench-info:hover, .bench-info:focus-visible { border-color: var(--pine); outline: none; } .bench-info .ico { width: 15px; height: 15px; color: var(--pine); } .bench-info-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 460px; max-width: 86vw; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); padding: 14px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; } .bench-info:hover .bench-info-pop, .bench-info:focus-within .bench-info-pop { opacity: 1; visibility: visible; transform: translateY(0); } .bench-info-pop h4 { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; color: var(--ink); } .bench-info-pop p { margin: 0 0 9px; font-size: 11px; line-height: 1.4; color: var(--ink-soft); } .bench-info-pop .table-card { box-shadow: none; overflow: visible; } .bench-info-pop table { font-size: 11.5px; } .bench-info-pop th { padding: 7px 10px; letter-spacing: 0.06em; } .bench-info-pop td { padding: 6px 10px; } /* Floating hover card for the heatmap cells + Efficiency score (one shared panel, positioned by the cursor). Matches the .bench-info-pop look. */ .hm-tip { position: fixed; left: 0; top: 0; z-index: 60; width: 248px; max-width: 86vw; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 13px; font-size: 12px; color: var(--ink); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 0.12s, transform 0.12s, visibility 0.12s; } .hm-tip.show { opacity: 1; visibility: visible; transform: none; } .tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; } .tip-title { font-size: 12.5px; font-weight: 700; color: var(--ink); } .tip-range { font-size: 10.5px; font-weight: 600; color: var(--pine-deep); white-space: nowrap; background: rgba(20,124,146,0.10); border: 1px solid rgba(20,124,146,0.22); border-radius: 999px; padding: 2px 8px; } .tip-pct { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .tip-pct.perf-good { color: var(--pine-deep); } .tip-pct.perf-mid { color: var(--amber-deep); } .tip-pct.perf-low { color: var(--danger); } .tip-sub { font-size: 10.5px; color: var(--ink-soft); margin-bottom: 9px; } .tip-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--line-soft); margin-bottom: 8px; } .tip-seg { height: 100%; } .tip-seg.tip-on { background: #0fb1c4; } .tip-seg.tip-fast { background: var(--azure); } .tip-seg.tip-slow { background: var(--danger); } .tip-rows { display: flex; flex-wrap: wrap; gap: 4px 13px; font-size: 11px; } .tip-rows b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .tip-k { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); } .tip-k::before { content: ''; width: 8px; height: 8px; border-radius: 2px; flex: none; } .tip-k.tip-on::before { background: #0fb1c4; } .tip-k.tip-fast::before { background: var(--azure); } .tip-k.tip-slow::before { background: var(--danger); } .tip-note { margin-top: 9px; font-size: 10px; line-height: 1.4; color: var(--ink-soft); } /* Benchmark adherence ranking: performance % colour + rank number. */ .cvs-name .rank { color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; } .cvs-val .perf-good { color: var(--pine-deep); } .cvs-val .perf-mid { color: var(--amber-deep); } .cvs-val .perf-low { color: var(--danger); } /* Target-duration reference cells read as muted, not bold like the counts. */ td.num.bench-target { color: var(--ink-soft); font-weight: 500; white-space: nowrap; } /* ── Per-nurse × per-case-type efficiency heatmap (under/on/over split) ── */ .hm-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .hm-stat { padding: 2px 9px 2px 0; font-size: 10px; color: var(--ink-soft); } .hm-stat b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.3; } .hm-stat.flag b { color: var(--danger); } .hm-host { overflow-x: auto; } .hm-host.scroll-tall { max-height: 380px; overflow-y: auto; } .hm-table { border-collapse: separate; border-spacing: 5px; width: 100%; min-width: 660px; } .hm-table thead th { background: var(--card); font-size: 11px; font-weight: 700; color: var(--ink-soft); text-align: center; white-space: nowrap; padding: 3px 5px; } .hm-table thead tr:first-child th { position: sticky; top: 0; z-index: 3; } .hm-table thead tr:nth-child(2) th { position: sticky; top: 26px; z-index: 3; } .hm-table thead th.hm-grp { color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 5px; } .hm-sub { display: block; font-size: 9.5px; font-weight: 500; color: var(--ink-soft); opacity: 0.72; } .hm-table thead th.hm-rowhead, .hm-table td.hm-name { position: sticky; left: 0; background: var(--card); text-align: left; } .hm-table thead th.hm-rowhead { z-index: 5; } .hm-table td.hm-name { z-index: 2; font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; } .hm-name .muted { color: var(--ink-soft); font-weight: 500; } .hm-cell2 { padding: 3px; vertical-align: middle; min-width: 50px; } /* Single dominant-outcome cell. Colour = outcome, depth = how strong the lean. */ .hm-c { display: flex; align-items: center; justify-content: center; gap: 2px; height: 30px; border-radius: 7px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; animation: bar-grow 0.4s cubic-bezier(0.22,0.61,0.36,1) both; transform-origin: center; } .hm-c .hm-ar { font-size: 10px; font-style: normal; opacity: 0.85; } .hm-on { background: var(--go); color: #fff; } .hm-on2 { background: rgba(22,163,74,0.16); color: var(--go-deep); } .hm-slow { background: var(--danger); color: #fff; } .hm-slow2 { background: rgba(217,83,74,0.18); color: var(--danger); } .hm-fast { background: #0fb1c4; color: #fff; } .hm-fast2 { background: rgba(20,124,146,0.16); color: var(--pine-deep); } .hm-mix { background: repeating-linear-gradient(45deg, var(--line-soft), var(--line-soft) 4px, transparent 4px, transparent 8px); color: var(--ink-soft); } html[data-theme="dark"] .hm-on2 { background: rgba(52,211,153,0.18); } html[data-theme="dark"] .hm-fast2 { background: rgba(45,212,191,0.16); } html[data-theme="dark"] .hm-slow2 { background: rgba(217,83,74,0.24); color: #f3a3a0; } html[data-theme="dark"] .hm-mix { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.10), rgba(255,255,255,0.10) 4px, transparent 4px, transparent 8px); } .hm-blank { opacity: 0.7; } /* Trailing per-nurse score column. */ .hm-table th.hm-score-h { border-left: 1px solid var(--line); color: var(--ink); cursor: pointer; user-select: none; } .hm-table th.hm-score-h:hover { color: var(--pine); } .hm-table th.hm-score-h:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; } .hm-table td.hm-score { border-left: 1px solid var(--line); text-align: right; white-space: nowrap; padding: 0 4px 0 10px; line-height: 1.2; } .hm-pct { display: block; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .hm-pct.perf-good { color: var(--go-deep); } .hm-pct.perf-mid { color: var(--amber-deep); } .hm-pct.perf-low { color: var(--danger); } .hm-lean { font-size: 10px; font-weight: 600; color: var(--ink-soft); } .hm-lean.slow { color: var(--danger); } .hm-lean.fast { color: var(--pine-deep); } /* Best / worst row accents — a tinted left rail on the sticky name cell. */ .hm-row-best td.hm-name { box-shadow: inset 3px 0 0 var(--go); } .hm-row-worst td.hm-name { box-shadow: inset 3px 0 0 var(--danger); } /* Heatmap rows open the nurse modal; the sticky name cell is the click target. */ .hm-row.clickable { cursor: pointer; } .hm-row.clickable:hover td:not(.hm-name) { background: var(--pine-faint, rgba(47, 141, 124, 0.07)); } /* Name cell stays opaque (it's sticky over the scrolling columns); cue with underline. */ .hm-row.clickable:hover td.hm-name { text-decoration: underline; text-underline-offset: 2px; color: var(--pine-deep); } .hm-name[tabindex]:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; } .hm-na2 { text-align: center; color: var(--ink-soft); opacity: 0.6; font-size: 12px; padding: 3px 0; } .hm-empty { color: var(--ink-soft); font-size: 13px; padding: 8px 2px; } .hm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--ink-soft); } .hm-legend span { display: inline-flex; align-items: center; gap: 6px; } .hm-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .hm-legend-note { opacity: 0.7; font-size: 11px; } .hml-o { background: var(--danger); } .hml-n { background: var(--go); } .hml-u { background: #0fb1c4; } .hml-m { background: repeating-linear-gradient(45deg, var(--ink-soft), var(--ink-soft) 3px, transparent 3px, transparent 6px); } .bench-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; border-radius: 6px; padding: 1px 6px; vertical-align: 1px; } .bench-on { color: var(--go-deep); background: rgba(22,163,74,0.12); } .bench-over { color: var(--danger); background: rgba(217,83,74,0.12); } .bench-under { color: var(--pine-deep); background: rgba(20,124,146,0.12); } /* "Flagged" — suspiciously short (too fast / under 5 min). Solid red so it reads as an alert, not just an out-of-band bench status. */ .bench-flag { color: #fff; background: var(--danger); } /* colorful stat cards */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; margin-bottom: 20px; } .stat-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 17px 18px; box-shadow: var(--shadow-card); } .stat-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; } .stat-chip { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 11px; } .stat-chip .ico { width: 18px; height: 18px; } .stat-value { font-family: var(--display); font-weight: 650; font-size: 28px; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .stat-value small { font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-left: 2px; } .stat-key { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; } .stat-sub { font-size: 12px; color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; } .accent-green::before { background: var(--pine); } .accent-green .stat-chip { background: #e2efe7; color: var(--pine-deep); } .accent-amber::before { background: var(--amber); } .accent-amber .stat-chip { background: var(--amber-soft); color: #8a6313; } .accent-teal::before { background: #2f8d7c; } .accent-teal .stat-chip { background: #dcefe9; color: #1f6b5d; } .accent-sky::before { background: #3f7fa6; } .accent-sky .stat-chip { background: #e4eef5; color: #2f6286; } /* Compact, horizontal cards — all in the single cyan "working" tone to match the overview nurse cards (one colour, not per-metric accents). */ .stat-grid-sm { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .stat-grid-sm .stat-card { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 13px; background: linear-gradient(180deg, var(--card), #ecf9fb); } .stat-grid-sm .stat-card::before { background: linear-gradient(90deg, var(--pine), #4fc4d6); } .stat-grid-sm .stat-chip { width: 30px; height: 30px; margin-bottom: 0; flex: none; background: rgba(20,124,146,0.12); color: var(--pine-deep); } .stat-grid-sm .stat-value { font-size: 18px; } .stat-grid-sm .stat-key { margin-top: 2px; } .stat-grid-sm .stat-sub { margin-top: 1px; } html[data-theme="dark"] .stat-grid-sm .stat-card { background: linear-gradient(180deg, var(--card), rgba(34,211,238,0.07)); } html[data-theme="dark"] .stat-grid-sm .stat-chip { background: rgba(34,211,238,0.14); color: #67e8f5; } @media (max-width: 560px) { .stat-grid-sm { grid-template-columns: repeat(2, 1fr); } } .insight-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; } @media (max-width: 980px) { .insight-grid { grid-template-columns: 1fr; } } .insight-panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-card); } .insight-panel h3 { font-family: var(--display); font-weight: 650; font-size: 17px; display: flex; align-items: center; gap: 8px; } .insight-panel h3 .ico { width: 17px; height: 17px; color: var(--pine); } .insight-panel h3.mt { margin-top: 22px; } .panel-hint { font-size: 12px; color: var(--ink-soft); margin: 5px 0 11px; line-height: 1.45; } .flag-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .flag-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; padding: 9px 12px; border-radius: 10px; background: var(--wash); border: 1px solid var(--line-soft); } .flag-warn .flag-item { background: var(--amber-soft); border-color: #ecd9ae; } .flag-name { font-weight: 700; } .flag-meta { font-size: 12px; color: #7c5708; font-variant-numeric: tabular-nums; } .flag-empty { font-size: 12.5px; color: var(--ink-soft); font-style: italic; padding: 8px 2px; list-style: none; } .bars { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 12px; width: 100%; color: var(--ink); padding: 6px 4px; } .bar-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-track { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: 999px; box-sizing: border-box; transform-origin: left center; animation: bar-grow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes bar-grow { from { transform: scaleX(0); } } .bar-c1 .bar-fill { background: linear-gradient(90deg, #14695c, #2f8d7c); } .bar-c2 .bar-fill { background: linear-gradient(90deg, #c98a25, #e8b85a); } .bar-c3 .bar-fill { background: linear-gradient(90deg, #2f6286, #5b9cc2); } .bar-c4 .bar-fill { background: linear-gradient(90deg, #b9683a, #dca06a); } .bar-c5 .bar-fill { background: linear-gradient(90deg, #4d8a52, #7faf7f); } .bar-val { font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .bar-val small { color: var(--ink-soft); font-weight: 400; } @media (max-width: 480px) { .bar-row { grid-template-columns: 88px 1fr auto; gap: 8px; } .bar-name { font-size: 12px; } .stat-value { font-size: 24px; } } .ins-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 20px 0 11px; } .ins-running { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: #7c5708; font-weight: 600; background: var(--amber-soft); border: 1px solid #ecd9ae; border-radius: 11px; padding: 10px 13px; } .ins-running .ico { width: 16px; height: 16px; flex: none; } /* ── nurse modal ─────────────────────────────── */ /* .modal-card.modal-wide beats the base .modal-card width (defined later). */ .modal-card.modal-wide { width: min(1120px, 97vw); max-height: 88vh; overflow: auto; padding: 24px 28px; position: relative; } /* A mid-width modal for forms (manual correction, grant minutes). */ .modal-card.modal-md { width: min(640px, 97vw); max-height: 90vh; overflow: auto; padding: 24px 26px; position: relative; } .modal-x { position: absolute; top: 16px; right: 16px; border: 0; background: none; cursor: pointer; color: var(--ink-soft); width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; transition: background 0.15s, color 0.15s; } .modal-x .ico { width: 20px; height: 20px; } .modal-x:hover { background: var(--wash); color: var(--ink); } /* On small screens fill the width with symmetric margins (no right-edge clipping). */ @media (max-width: 600px) { .modal-overlay { padding: 12px; } .modal-card.modal-wide { width: 100%; max-width: 100%; max-height: 92vh; padding: 18px 16px; } .modal-x { top: 12px; right: 12px; } /* Clock-in history: compact the 6 columns so they fit the modal width instead of forcing a horizontal scroll that fights the modal's own scrolling. */ .hist-scroll table { font-size: 11px; } .hist-scroll th, .hist-scroll td { padding: 8px 6px; } .hist-scroll th { font-size: 9px; letter-spacing: 0.04em; } .hist-scroll .note-cell { max-width: 110px; white-space: normal; word-break: break-word; } } .hist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .hist-scroll { max-height: 280px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .nurse-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-right: 34px; } .modal-avatar { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #4fc4d6, var(--pine) 55%, var(--pine-deep)); } .modal-avatar .ico { width: 22px; height: 22px; } .nurse-modal-head h3 { font-family: var(--display); font-weight: 650; font-size: 22px; line-height: 1.1; } .modal-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; text-transform: capitalize; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; } .chip { font-size: 12px; color: var(--ink-soft); background: var(--wash); border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 11px; } .chip strong { color: var(--pine-deep); margin-left: 3px; font-variant-numeric: tabular-nums; } .daychart { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding-top: 8px; } .daybar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; } .daybar-fill { width: 100%; max-width: 24px; border-radius: 5px 5px 0 0; min-height: 2px; box-sizing: border-box; transform-origin: bottom center; animation: col-grow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes col-grow { from { transform: scaleY(0); } } .daybar-val { font-size: 9.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-height: 12px; } .daybar-x { font-size: 10px; color: var(--ink-soft); font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; padding-bottom: 1px; } /* ── tables ──────────────────────────────────── */ /* ── tables ──────────────────────────────────── */ .table-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: auto; box-shadow: var(--shadow-card); } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--wash); position: sticky; top: 0; } td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } tr:last-child td { border-bottom: 0; } tbody tr { transition: background 0.12s; } tbody tr:hover td { background: var(--wash); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.col-action, th.col-action { text-align: center; } /* Team-table name acts as a link into the nurse stats modal. */ .name-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; } .name-link:hover strong { color: var(--pine-deep); text-decoration: underline; text-underline-offset: 2px; } .name-link:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 4px; } th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--ink); } th.sort-active { color: var(--pine-deep); } .sort-arrow { font-size: 9px; color: #c2bba8; } .sort-arrow .ico { width: 12px; height: 12px; vertical-align: -0.15em; } .sort-arrow.active { color: var(--pine-deep); } .corrected { display: inline-flex; align-items: center; gap: 3px; color: var(--amber-deep); font-size: 11px; font-weight: 700; } .corrected .ico { width: 11px; height: 11px; } .in-progress { color: var(--amber-deep); font-style: italic; font-weight: 600; } .auto-stopped { display: inline-flex; align-items: center; gap: 3px; color: var(--danger); font-size: 11px; font-weight: 700; white-space: nowrap; } .auto-stopped .ico { width: 11px; height: 11px; } .idle-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--amber-deep); font-size: 11px; font-weight: 700; white-space: nowrap; } .idle-tag .ico { width: 11px; height: 11px; } .idle-num { color: var(--danger); font-weight: 700; } /* On-task idle chip on the overview cards (next to the daily-goal chip). */ .idle-chip { display: inline-flex; align-items: center; gap: 3px; color: var(--amber-deep); font-size: 11px; font-weight: 700; white-space: nowrap; } .idle-chip .ico { width: 11px; height: 11px; } /* Inline on-task idle figure on the modal's per-period hour chips. */ .chip-idle { color: var(--amber-deep); font-weight: 700; } /* Period tabs + date browser share one row at the top of the nurse modal. */ .modal-period-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; } .modal-period-row .seg-modal { margin: 2px 0; } .note-cell { color: var(--ink-soft); max-width: 420px; } .empty-row td { text-align: center; color: var(--ink-soft); padding: 30px; font-style: italic; } /* role + status indicators in the Team table */ .role-tag { display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .role-tag .ico { width: 13px; height: 13px; } .role-tag.role-admin { background: #e2efe7; color: var(--pine-deep); } .role-tag.role-nurse { background: var(--amber-soft); color: #7c5708; } .state-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; } .state-dot.on { background: var(--pine); box-shadow: 0 0 0 3px rgba(20, 105, 92, 0.14); } .state-dot.off { background: #c9c2b0; } .state-dot.pending { background: #d9a441; box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.16); } /* copyable set-password link inside the confirm modal */ .copy-hint { display: block; margin-top: 14px; } .copy-row { display: block; margin-top: 8px; } .copy-link { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 0.85rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2, rgba(0, 0, 0, 0.03)); color: var(--ink); } /* editable hourly rate in the Team table — click-to-edit */ .rate-view { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; } .rate-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); border-radius: 6px; padding: 1px 3px; transition: background 0.3s, box-shadow 0.3s; } .rate-val.rate-saved { background: var(--amber-soft); box-shadow: 0 0 0 3px var(--amber-soft); } .rate-edit-btn { border: 0; background: none; cursor: pointer; width: 26px; height: 26px; border-radius: 8px; color: var(--pine); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s; } .rate-edit-btn .ico { width: 13px; height: 13px; } .rate-edit-btn:hover { background: rgba(20, 105, 92, 0.08); } .rate-form { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); justify-content: flex-end; } .rate-input { width: 70px; font: inherit; font-size: 13px; text-align: right; color: var(--ink); background: var(--field-bg); border: 1px solid var(--pine); border-radius: 8px; padding: 5px 8px; outline: none; box-shadow: 0 0 0 3px rgba(20, 105, 92, 0.13); } .rate-apply { border: 0; background: var(--pine); color: #fdfbf4; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; } .rate-apply .ico { width: 13px; height: 13px; } .rate-apply:hover { filter: brightness(1.08); } .rate-apply[disabled] { opacity: 0.6; cursor: wait; } .rate-cancel { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .rate-cancel .ico { width: 13px; height: 13px; } .rate-cancel:hover { color: var(--danger); border-color: var(--danger); } /* Effective-date picker for a rate change — the new rate applies from this day. */ .rate-eff { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-soft); } .rate-eff-input { font: inherit; font-size: 12px; color: var(--ink); background: var(--field-bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; outline: none; } /* Rate history list in the nurse modal (newest first). */ .rate-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .rate-hist li { display: flex; align-items: baseline; gap: 10px; padding: 7px 11px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--card); } .rate-hist .rh-rate { font-weight: 700; color: var(--pine-deep); font-variant-numeric: tabular-nums; } .rate-hist .rh-from { font-size: 12px; color: var(--ink-soft); } /* payroll totals row — pinned to the bottom of the scrolling card so the grand total stays visible without scrolling to the end (mirrors the sticky header). */ tfoot .foot-row td { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 700; color: var(--pine-deep); background: var(--wash); position: sticky; bottom: 0; } .muted { color: var(--ink-soft); font-weight: 400; font-size: 12px; } .pay-detail-head { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); background: var(--wash); } .pay-detail-head strong { color: var(--ink); } /* ── corrections ─────────────────────────────── */ .stack { display: flex; flex-direction: column; gap: 12px; max-width: 760px; } .correction-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 17px 19px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-soft); } /* Top row: who + status on the left, the grant input + approve/reject on the right — kept on one line so the card body below can extend full width. */ .correction-card .corr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .correction-card .corr-body { min-width: 0; } .correction-card .who { font-weight: 700; display: flex; align-items: center; gap: 8px; } .correction-card .when { color: var(--ink-soft); font-size: 12.5px; margin-top: 5px; display: flex; align-items: center; gap: 6px; } .correction-card .when .ico { width: 14px; height: 14px; flex: none; color: var(--ink-soft); } .correction-card .when.sub { margin-top: 2px; font-size: 11.5px; opacity: 0.85; } .correction-card .who { flex-wrap: wrap; } .correction-card .when { flex-wrap: wrap; } .correction-card .reason { margin-top: 8px; font-size: 13px; overflow-wrap: anywhere; } .correction-card .reason-label { font-weight: 700; color: var(--ink-soft); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 2px; } .correction-card .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Below ~560px (a phone) the who + actions can't share a line — let the action row span full width so the buttons wrap instead of overflow. */ @media (max-width: 560px) { .correction-card .actions { width: 100%; justify-content: flex-start; } .correction-card .actions .btn { flex: 1 1 auto; justify-content: center; } } .status-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; } .status-tag { display: inline-flex; align-items: center; gap: 6px; } /* Leading dot so the status reads even at a glance / for colour-blind users. */ .status-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .status-tag.pending { background: var(--amber-soft); color: #7c5708; } .status-tag.approved { background: #e2efe7; color: var(--pine-deep); } .status-tag.rejected { background: #f6e3df; color: var(--danger); } /* Status hierarchy, matching the Overview nurse cards: a coloured top edge + faint top-down tint by status, plus a hover lift. */ .correction-card { position: relative; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; } .correction-card:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -28px rgba(16, 43, 40, 0.55); } .correction-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--line-soft); } .correction-card.corr-pending::before { background: linear-gradient(90deg, var(--amber), #f0c463); } .correction-card.corr-approved::before { background: linear-gradient(90deg, var(--pine), #4fc4d6); } .correction-card.corr-rejected::before { background: linear-gradient(90deg, var(--danger), #f0938a); } .correction-card.corr-pending { border-color: #ecd9a8; background: linear-gradient(180deg, var(--card), #fbf6ea); } .correction-card.corr-approved { border-color: #bfe3ea; background: linear-gradient(180deg, var(--card), #ecf9fb); } .correction-card.corr-rejected { border-color: #f0cfc9; background: linear-gradient(180deg, var(--card), #fbefec); } /* Needs-review cards: a danger-toned sibling of the request cards. The flagged task, its evidence line (idle vs on-site), and a "Correct…" hand-off. */ .correction-card.corr-review::before { background: linear-gradient(90deg, var(--danger), #f0938a); } .correction-card.corr-review { border-color: #f0cfc9; background: linear-gradient(180deg, var(--card), #fbefec); } .rv-flags { display: inline-flex; gap: 6px; flex-wrap: wrap; } .rv-flag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; background: #f6e3df; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); } .rv-flag.rv-high-idle, .rv-flag.rv-overlong { background: var(--amber-soft); color: var(--amber-deep); border-color: color-mix(in srgb, var(--amber-deep) 30%, transparent); } .rv-evidence { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .rv-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--pine-deep); background: var(--wash); border-radius: 999px; padding: 3px 11px; } .rv-stat .ico { width: 13px; height: 13px; flex: none; opacity: 0.7; } /* The Needs-review kind tab reads as an alert — danger accent when active. */ .seg-btn-review.active { color: var(--danger); } html[data-theme="dark"] .correction-card.corr-review { border-color: color-mix(in srgb, var(--danger) 35%, transparent); } html[data-theme="dark"] .rv-flag { background: color-mix(in srgb, var(--danger) 18%, transparent); } html[data-theme="dark"] .rv-flag.rv-high-idle, html[data-theme="dark"] .rv-flag.rv-overlong { background: var(--amber-soft); } /* add_task cross-reference evidence panel. */ .xr { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--wash); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .xr-warn, .xr-ok { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; } .xr-warn { color: var(--danger); } .xr-ok { color: var(--pine-deep); } .xr-warn .ico, .xr-ok .ico { width: 15px; height: 15px; flex: none; } .xr-note { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-soft); opacity: 0.85; } .xr-note .ico { width: 12px; height: 12px; flex: none; } /* A "who filed this" tag — only shown for admin-created corrections so it's clear the edit came from the dashboard, not the nurse. */ .source-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; background: var(--wash); color: var(--pine-deep); } /* Corrections header lays the "New clock edit" button out to the right. */ #page-corrections .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Two segmented controls stacked: kind (type) above status. The status filter is a "sub" control, but match the kind row's button padding/font so the two pills sit at the same height rather than the status row looking squashed. */ #corrections-kind { margin-bottom: 10px; } #corrections-filter.seg-sm { margin-bottom: 0; padding: 4px; } #corrections-filter.seg-sm .seg-btn { padding: 7px 14px; font-size: 13px; } /* Status filter + nurse dropdown share a row, wrapping on narrow screens. */ .corr-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .corr-nurse-filter { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px 0 12px; color: var(--ink-soft); } .corr-nurse-filter .ico { width: 15px; height: 15px; flex: none; } .corr-nurse-filter select { border: 0; background: none; font: inherit; font-weight: 600; font-size: 13px; color: var(--ink); padding: 8px 4px; outline: none; cursor: pointer; max-width: 200px; } /* From-this → to-this change visual: old value struck through in red, new value highlighted in the MDS PRO cyan, arrow between. Reused by case + time cards. */ .diff-when { align-items: center; } .diff { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .diff-old, .diff-new { display: inline-flex; align-items: center; font-weight: 650; font-size: 12px; padding: 2px 9px; border-radius: 999px; line-height: 1.5; } .diff-old { background: #f6e3df; color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1px; } .diff-new { background: var(--wash); color: var(--pine-deep); box-shadow: inset 0 0 0 1px rgba(14, 124, 146, 0.28); } .diff-arrow { width: 14px; height: 14px; flex: none; color: var(--ink-soft); } /* Admin clock-edit form — lives inside the manual-correction modal, so the modal card supplies the chrome; the form itself is just layout. */ .admin-corr-form { margin-top: 16px; } .acf-hint { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 14px; } .acf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .admin-corr-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .admin-corr-form input, .admin-corr-form select { font: inherit; font-weight: 500; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; outline: none; } .admin-corr-form input:focus, .admin-corr-form select:focus { border-color: var(--pine); box-shadow: 0 0 0 3px rgba(20, 105, 92, 0.13); } /* The task picker + its labels can get long (process + case + note), so give it the full grid width. */ .acf-task { grid-column: 1 / -1; } .acf-reason { margin-top: 12px; } .acf-actions { display: flex; gap: 8px; margin-top: 14px; } @media (max-width: 620px) { .acf-grid { grid-template-columns: 1fr; } } /* Grant-minutes modal: a number input over a live from→to summary. */ .grant-lead { color: var(--ink-soft); font-size: 13px; margin-top: 8px; } .grant-field { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .grant-field input { font: inherit; font-weight: 500; font-size: 15px; color: var(--ink); width: 140px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; outline: none; } .grant-field input:focus { border-color: var(--pine); box-shadow: 0 0 0 3px rgba(20, 105, 92, 0.13); } .grant-summary { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--wash); } .grant-row { display: flex; align-items: center; gap: 10px; padding: 9px 13px; font-size: 13px; color: var(--ink); border-top: 1px solid var(--line); } .grant-row:first-child { border-top: 0; } .grant-row-label { flex: none; width: 78px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .grant-row-val { flex: 1 1 auto; } .grant-row-min { flex: none; font-weight: 700; color: var(--ink-soft); } .grant-row.grant-row-result { background: var(--card); color: var(--pine-deep); font-weight: 600; } .grant-row.grant-row-result .grant-row-label, .grant-row.grant-row-result .grant-row-min { color: var(--pine-deep); } .grant-row.muted { color: var(--ink-soft); font-weight: 500; } /* Corrections list: two columns on wide screens, one when narrow. Override the .stack flex/max-width with a responsive grid. */ #corrections-list.stack { display: grid; max-width: 1100px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } @media (max-width: 880px) { #corrections-list.stack { grid-template-columns: 1fr; } } /* ── team ────────────────────────────────────── */ /* Stacked: full-width table on top, invite form below. The invite lays out horizontally on larger screens (see below) so the card stays short and the Team tab fits without a vertical scrollbar. */ .team-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } /* Cap the team list at ~8 rows; scroll past that. Sticky header stays put. */ .team-grid > .table-card { max-height: 498px; } /* Keep the Timesheets table within the viewport: scroll its body, not the page. The subtracted offset covers the page head, toolbar and the main's bottom padding, leaving modern breathing room below the card. */ #page-timesheets .table-card { max-height: calc(100vh - 300px); min-height: 220px; } /* Cap the payroll card at a fixed height so it scrolls its own body instead of the page: the all-nurses summary stays compact as the team grows, and a one-nurse month of sessions no longer runs long. The min() keeps it from overflowing the viewport on short screens. Sticky header keeps columns visible. Applies to both the summary and per-nurse detail tables. */ #payroll-table { max-height: min(560px, calc(100vh - 320px)); min-height: 200px; } /* pagination controls */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--ink-soft); } .pager:empty { display: none; } .pager-info, .pager-cur { font-variant-numeric: tabular-nums; } .pager-btns { display: flex; align-items: center; gap: 10px; } .pager-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 9px; padding: 6px 13px; font: inherit; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .pager-btn:hover:not([disabled]) { background: var(--wash); border-color: var(--pine); } .pager-btn[disabled] { opacity: 0.5; cursor: default; } /* On phones, stack the pager: the "Showing X–Y of N" line on top, the Prev / Page / Next controls centered below. This keeps the buttons on one row regardless of how wide the numbers get (the row count hitting 3 digits used to wrap the Next button to a second line). */ @media (max-width: 600px) { .pager { flex-direction: column; gap: 8px; align-items: center; font-size: 12px; } .pager-btns { gap: 8px; } .pager-btn { padding: 6px 12px; } } .invite-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-card); } .invite-card h3 { font-family: var(--display); font-weight: 650; font-size: 20px; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; } .invite-card h3 .ico { width: 19px; height: 19px; color: var(--pine); } .invite-card form { margin-top: 14px; } /* Non-mobile: a 2×2 field grid (Full name / Email in column one, Role / Rate in column two) so the card stays short instead of a tall stack. Mobile keeps the vertical form. */ @media (min-width: 861px) { .invite-card form { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "name role" "email rate" "btn btn" "msg msg"; gap: 14px 16px; align-items: start; } .invite-card .field { margin-bottom: 0; } #invite-name-field { grid-area: name; } #invite-email-field { grid-area: email; } #invite-role-field { grid-area: role; } #invite-rate-field { grid-area: rate; } .invite-card form .btn-primary { grid-area: btn; } .invite-card #invite-msg { grid-area: msg; margin: 0; } } /* ── fields & buttons ────────────────────────── */ .field { display: block; margin-bottom: 14px; } .field > span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; } .field input, .field select { width: 100%; font: inherit; color: var(--ink); background-color: var(--field-bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .field input:focus, .field select:focus { border-color: var(--pine); box-shadow: 0 0 0 3px rgba(20, 105, 92, 0.13); } /* Password fields: eye toggle sitting inside the input on the right. */ .pw-wrap { position: relative; display: block; } .pw-wrap input { width: 100%; padding-right: 42px; } .pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 40px; display: grid; place-items: center; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: var(--ink-soft); border-radius: 0 10px 10px 0; transition: color 0.15s; } .pw-toggle:hover { color: var(--pine); } .pw-toggle:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; } .pw-toggle .ico { width: 18px; height: 18px; } /* ── bespoke form controls ─────────────────────────────────────── Drop the default OS arrow on