/* ============================================================ TenantCare Design Tokens + Base Components Drop into static/css/ and link from your base template. Default = dark theme. Add data-theme="light" on for the console/admin light theme. See design.md for usage. ============================================================ */ /* ---------- DARK (default) ---------- */ :root{ --ink:#0D1117; --canvas:#0D1117; --surface:#161B22; --surface-2:#1C2129; --surface-3:#21262D; --border:#30363D; --border-2:#3D444D; --text:#E6EDF3; --text-2:#C9D1D9; --muted:#8B949E; --green:#2EA043; --green-b:#3FB950; --green-d:#238636; --green-tint:#0E2A19; --blue:#58A6FF; --blue-tint:#10203A; --amber:#D29922; --amber-tint:#3A2E12; --red:#F85149; --red-tint:#3A1D1F; --purple:#A371F7; --purple-tint:#2A1E3D; /* whatsapp (dark) */ --wa-bg:#0B141A; --wa-in:#1E2A32; --wa-out:#1F5C3A; --wa-out-text:#EAFFF2; --shadow:0 30px 60px -30px rgba(0,0,0,.8); --shadow-sm:0 12px 30px -18px rgba(0,0,0,.7); /* type */ --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --r-chip:20px; --r-btn:9px; --r-card:12px; --r-panel:16px; } /* ---------- LIGHT (console / admin) ---------- */ [data-theme="light"]{ --ink:#FFFFFF; --canvas:#F6F8FA; --surface:#FFFFFF; --surface-2:#EDF1F5; --surface-3:#E4E9EF; --border:#D5DBE1; --border-2:#C2CAD2; --text:#1F2328; --text-2:#424A53; --muted:#656D76; --green:#1F883D; --green-b:#1A7F37; --green-d:#116329; --green-tint:#DAFBE1; --blue:#0969DA; --blue-tint:#DDF4FF; --amber:#9A6700; --amber-tint:#FFF8C5; --red:#CF222E; --red-tint:#FFEBE9; --purple:#8250DF; --purple-tint:#FBEFFF; --wa-bg:#E7E0D6; --wa-in:#FFFFFF; --wa-out:#D9FDD3; --wa-out-text:#111B21; --shadow:0 24px 50px -24px rgba(31,35,40,.26); --shadow-sm:0 12px 26px -16px rgba(31,35,40,.22); } /* ---------- base ---------- */ *{box-sizing:border-box} body{margin:0;font-family:var(--body);background:var(--canvas);color:var(--text); -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.6} a{color:inherit;text-decoration:none} .mono{font-family:var(--mono)} ::selection{background:var(--green-tint)} :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px} .eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--green-b)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-weight:600; font-size:13px;padding:9px 15px;border-radius:var(--r-btn);border:1px solid transparent; cursor:pointer;transition:all .15s} .btn svg{width:15px;height:15px} .btn-primary{background:var(--green);color:#fff} .btn-primary:hover{background:var(--green-d);transform:translateY(-1px)} .btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)} .btn-ghost:hover{border-color:var(--border-2)} .btn-sm{padding:6px 11px;font-size:12px} .btn-lg{padding:13px 24px;font-size:15px} /* ---------- cards ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)} .card-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border)} .card-h h3{font-size:14.5px;font-weight:600;margin:0} .card-h .sub{font-size:12px;color:var(--muted)} .card-b{padding:18px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .row{display:flex;gap:18px}.row>*{min-width:0} .spacer{flex:1}.mt{margin-top:18px} /* ---------- chips (fixed state mapping) ---------- */ .chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600; padding:3px 10px;border-radius:var(--r-chip);white-space:nowrap} .chip.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .pri-high{background:var(--red-tint);color:var(--red)} .pri-med{background:var(--amber-tint);color:var(--amber)} .pri-low{background:var(--surface-2);color:var(--muted)} .st-open{background:var(--amber-tint);color:var(--amber)} .st-assign{background:var(--purple-tint);color:var(--purple)} .st-prog{background:var(--blue-tint);color:var(--blue)} .st-hold{background:var(--surface-2);color:var(--muted)} .st-res{background:var(--green-tint);color:var(--green-d)} .cat{background:var(--surface-2);color:var(--text-2)} /* ---------- tables ---------- */ .tbl-wrap{overflow:hidden;border-radius:var(--r-card);border:1px solid var(--border);background:var(--surface)} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em; text-transform:uppercase;color:var(--muted);font-weight:600;padding:11px 14px; border-bottom:1px solid var(--border);background:var(--canvas)} td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-2)} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--canvas)} td .tk{font-family:var(--mono);font-weight:600;color:var(--text)} .avatar{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center; font-size:10.5px;font-weight:700} .avatar.green{background:var(--green-tint);color:var(--green-d)} .avatar.purple{background:var(--purple-tint);color:var(--purple)} .avatar.blue{background:var(--blue-tint);color:var(--blue)} .avatar.lg{width:32px;height:32px;font-size:12px} /* ---------- kpi ---------- */ .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 18px} .kpi .lab{font-size:12px;color:var(--muted)} .kpi .val{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:8px} .kpi .delta{font-size:11.5px;font-weight:600;margin-top:4px} .up{color:var(--green-d)} .down{color:var(--red)} .flat{color:var(--muted)} /* ---------- css charts ---------- */ .bars{display:flex;align-items:flex-end;gap:16px;height:180px;padding-top:10px} .bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end} .bars .b .bar{width:100%;max-width:46px;background:linear-gradient(180deg,var(--green-b),var(--green-d)); border-radius:6px 6px 0 0} .bars .b .bv{font-size:12px;font-weight:700}.bars .b .bl{font-size:11px;color:var(--muted)} .gauge{height:9px;background:var(--surface-2);border-radius:20px;overflow:hidden;margin-top:10px} .gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--green-b),var(--green-d));border-radius:20px} /* donut: set segments inline via style="background:conic-gradient(...)" */ .donut{width:132px;height:132px;border-radius:50%;display:grid;place-items:center} .donut .hole{width:88px;height:88px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center} /* ---------- chart furniture ---------- */ .big-stat{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1} .stat-lab{font-size:12px;color:var(--muted)} .stat-val{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px} .donut-row,.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .donut{flex:none} .donut .hole b{font-size:22px;font-weight:700;display:block} .donut .hole span{font-size:10px;color:var(--muted)} .legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:12.5px} .legend li{display:flex;align-items:center;gap:8px;color:var(--text-2)} .legend .sw{width:10px;height:10px;border-radius:3px;flex:none} .legend b{margin-left:auto;padding-left:14px;color:var(--text)} .meta-grid{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap} .meta-grid>div{display:flex;flex-direction:column;gap:2px} .meta-grid .lab{font-size:11px;color:var(--muted)} .stat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .stat-list li{display:flex;align-items:center;gap:12px} .stat-list .k{flex:none;min-width:170px} .stat-list .track{flex:1;height:7px;background:var(--surface-2);border-radius:20px;overflow:hidden} .stat-list .track i{display:block;height:100%;border-radius:20px; background:linear-gradient(90deg,var(--green-b),var(--green-d))} .stat-list .v{flex:none;min-width:28px;text-align:right;font-weight:600;color:var(--text)} .muted-cell{color:var(--muted);text-align:center;padding:22px} /* ---------- forms ---------- */ .field{margin-top:16px} .field label{font-size:12.5px;font-weight:600;color:var(--text-2);display:block;margin-bottom:6px} .field input,.field select,.inp{width:100%;padding:10px 12px;border:1px solid var(--border); border-radius:var(--r-btn);font-family:var(--body);font-size:13.5px;background:var(--surface);color:var(--text)} .field textarea{resize:vertical;line-height:1.55} .field select:disabled{color:var(--muted);background:var(--surface-2)} .form-grid{display:grid;grid-template-columns:200px 1fr;gap:14px 20px;align-items:center} .form-actions{display:flex;gap:10px;align-items:center;margin-top:22px} .req{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin-left:6px} .form-card{max-width:720px} .form-card .grid2{gap:0 18px} .field-note{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.55} /* ---------- marketing page (design.md 5.1) ---------- */ .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .nav-inner{display:flex;align-items:center;gap:16px;min-height:64px} .site-nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ink) 82%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--border)} .brand-inline{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px} .brand-inline .mark{width:28px;height:28px;border-radius:8px;display:grid;place-items:center; background:var(--green-tint);color:var(--green-b);flex:none} .brand-inline .mark svg{width:16px;height:16px} .brand-inline .by{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .hero{padding:72px 0 56px} .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .hero h1{font-family:var(--display);font-size:52px;line-height:1.06;letter-spacing:-.02em; margin:14px 0 0;font-weight:700} .lede{font-size:16px;color:var(--text-2);margin:18px 0 0;max-width:52ch} .hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} .hero-mock .thread{box-shadow:var(--shadow);padding:18px} .band{border-block:1px solid var(--border);background:var(--surface);padding:26px 0} .band .kpi{background:transparent;border:0;padding:0} .section{padding:64px 0} .section.alt{background:var(--surface)} .section-title{font-family:var(--display);font-size:32px;line-height:1.15;letter-spacing:-.02em; margin:10px 0 0;font-weight:600} .section .card-b h3{font-size:15.5px;font-weight:600;margin:12px 0 6px} .section .card-b p{font-size:13.5px;color:var(--muted);margin:0} .step{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--green-b)} .tile{width:34px;height:34px;border-radius:9px;display:grid;place-items:center; background:var(--green-tint);color:var(--green-b)} .tile svg{width:18px;height:18px} .card.portal{display:block;transition:border-color .15s,transform .15s} .card.portal:hover{border-color:var(--green);transform:translateY(-2px)} .cta{text-align:center} .cta .lede{margin-inline:auto} .cta .btn{margin-top:24px} .site-foot{border-top:1px solid var(--border);padding:8px 0 24px;color:var(--muted);font-size:11.5px} @media(max-width:900px){ .hero{padding:44px 0 36px} .hero-inner{grid-template-columns:1fr;gap:32px} .hero h1{font-size:36px} .section-title{font-size:26px} .section{padding:44px 0} } /* ---------- auth screens ---------- */ .auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:16px;padding:24px;background:var(--canvas)} .auth-card{width:100%;max-width:400px;box-shadow:var(--shadow-sm)} .auth-brand{border-bottom:1px solid var(--border)} .auth-title{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0} .auth-sub{font-size:13px;color:var(--muted);margin:6px 0 0} .auth-submit{width:100%;justify-content:center;margin-top:18px} .auth-foot{font-size:11px;color:var(--muted)} .check{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px; color:var(--text-2);cursor:pointer} .check input{width:auto;accent-color:var(--green)} .note-error{font-size:12.5px;color:var(--red);background:var(--red-tint); border:1px solid var(--red);border-radius:8px;padding:9px 12px;margin:16px 0 0} /* ---------- whatsapp thread ---------- */ .thread{display:flex;flex-direction:column;gap:9px;background:var(--wa-bg);border-radius:10px;padding:14px} .tb{max-width:82%;padding:8px 11px;border-radius:11px;font-size:12.5px;box-shadow:0 1px 1px rgba(11,20,26,.14)} .tb.in{background:var(--wa-in);align-self:flex-start;border-top-left-radius:3px;color:var(--text)} .tb.out{background:var(--wa-out);align-self:flex-end;border-top-right-radius:3px;color:var(--wa-out-text)} .tb .m{display:block;font-size:9.5px;color:var(--muted);margin-top:3px} .tb .tk{font-family:var(--mono);font-weight:600;color:var(--green-d)} /* ---------- console shell ---------- */ .app{display:flex;min-height:100vh} .sidebar{width:238px;flex:none;background:var(--surface);border-right:1px solid var(--border); position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:20} .main{margin-left:238px;flex:1;min-width:0} .topbar{position:sticky;top:0;z-index:15;height:60px;border-bottom:1px solid var(--border); display:flex;align-items:center;gap:16px;padding:0 26px;background:var(--surface)} .content{padding:26px} .nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px; color:var(--text-2);font-weight:500;font-size:13.5px;cursor:pointer} .nav a:hover{background:var(--surface-2);color:var(--text)} .nav a.active{background:var(--green-tint);color:var(--green-d);font-weight:600} .screen{display:none}.screen.active{display:block} /* ---------- console shell: brand, grouped nav, user footer ---------- */ .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px; border-bottom:1px solid var(--border);color:var(--text)} .brand b{font-weight:700;font-size:15.5px;letter-spacing:-.01em} .brand .mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none; background:linear-gradient(145deg,var(--green),var(--green-d));color:#fff; box-shadow:0 3px 10px -3px rgba(31,136,61,.6)} .brand .mark svg{width:17px;height:17px} .brand .env{font-family:var(--mono);font-size:9px;color:var(--muted);border:1px solid var(--border); border-radius:5px;padding:1px 5px;margin-left:auto;white-space:nowrap} .nav{padding:12px 10px;overflow-y:auto;flex:1} .nav .grp{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);padding:14px 10px 6px} .nav a svg{width:17px;height:17px;flex:none;color:var(--muted)} .nav a.active svg{color:var(--green-d)} .nav a .badge{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--red-tint); color:var(--red);border-radius:20px;padding:1px 7px;font-weight:600} .nav a .count{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)} .nav .soon{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px; color:var(--muted);font-weight:500;font-size:13.5px;opacity:.55;cursor:default} .nav .soon svg{width:17px;height:17px;flex:none} .nav .soon-tag{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.06em; text-transform:uppercase;border:1px solid var(--border);border-radius:5px;padding:0 4px} .side-foot{border-top:1px solid var(--border);padding:12px 14px;display:flex;align-items:center;gap:10px} .side-foot .av{width:30px;height:30px;border-radius:50%;background:var(--purple-tint); color:var(--purple);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none} .side-foot .who{min-width:0;font-size:12.5px;font-weight:600} .side-foot .who{flex:1} .side-foot .who span{display:block;font-weight:400;color:var(--muted);font-size:11px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sign-out{width:32px;height:32px;flex:none} .sign-out:hover{color:var(--red);border-color:var(--red)} /* ---------- topbar pieces ---------- */ .topbar{background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(8px)} .topbar h1{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em} .crumb{font-size:12px;color:var(--muted);line-height:1.3} .icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:9px; background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer; position:relative;transition:all .15s} .icon-btn:hover{border-color:var(--border-2);color:var(--text)} .icon-btn svg{width:17px;height:17px} .icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%; background:var(--red);border:2px solid var(--surface)} /* display:inline-grid above would otherwise beat the hidden attribute. */ .icon-btn[hidden]{display:none} .reset-filters{width:34px;height:34px;flex:none} .reset-filters:hover{color:var(--red);border-color:var(--red)} .pill-select{display:inline-flex;align-items:center;gap:7px;background:var(--surface); border:1px solid var(--border);border-radius:9px;padding:7px 12px;font-size:13px; font-weight:500;color:var(--text);cursor:pointer;font-family:var(--body)} .pill-select:hover{border-color:var(--border-2)} .pill-select svg{width:14px;height:14px;color:var(--muted)} .tb-search{position:relative;display:flex;align-items:center;max-width:280px;width:100%} .tb-search svg{position:absolute;left:10px;width:15px;height:15px;color:var(--muted);pointer-events:none} .tb-search input{width:100%;padding:8px 12px 8px 32px;border:1px solid var(--border); border-radius:var(--r-btn);background:var(--canvas);color:var(--text); font-family:var(--body);font-size:13px} .tb-search input::placeholder{color:var(--muted)} .sidebar-toggle{display:none} /* ---------- taxonomy tags ---------- */ .tag-list{display:flex;flex-wrap:wrap;gap:8px} .tag{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2); border:1px solid var(--border);border-radius:7px;padding:6px 11px;font-size:12.5px;font-weight:500} .tag .x{color:var(--muted);cursor:pointer;background:none;border:0;font-size:13px;line-height:1;padding:0} .tag .x:hover{color:var(--red)} .tag.add{border-style:dashed;color:var(--muted)} /* ---------- escalation ladder (design.md 6.9) ---------- */ .ladder{display:flex;flex-direction:column} .ladder .lv{display:flex;gap:14px;align-items:flex-start;padding:14px 0; border-bottom:1px dashed var(--border)} .ladder .lv:last-child{border-bottom:none} .ladder .lnum{width:30px;height:30px;border-radius:8px;background:var(--green-tint); color:var(--green-d);display:grid;place-items:center;font-weight:700;font-family:var(--mono); font-size:12px;flex:none} .ladder .lt b{font-size:13.5px} .ladder .lt div{font-size:12.5px;color:var(--muted);margin-top:2px} /* ---------- callout note ---------- */ .note{font-size:12px;color:var(--muted);background:var(--amber-tint);border:1px solid #EAC54F; border-radius:8px;padding:8px 12px;display:flex;gap:8px;align-items:center} .note svg{width:15px;height:15px;flex:none} .note b{color:var(--text)} /* ---------- evidence photos ---------- */ .photos{display:flex;gap:8px} .photos .ph{flex:1;height:64px;border-radius:8px;background:var(--surface-2); border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);font-size:10px; overflow:hidden} .photos .ph img{width:100%;height:100%;object-fit:cover} /* ---------- dispatch candidates ---------- */ .candidate{display:flex;align-items:center;gap:12px;border:1px solid var(--border); border-radius:10px;padding:12px} .candidate.is-best{border-color:var(--green)} .candidate-body{flex:1;min-width:0} .candidate-head{display:flex;align-items:center;gap:8px;font-size:13.5px} .candidate-head .score{margin-left:auto;font-size:11px;color:var(--muted)} .candidate-meta{font-size:12px;color:var(--muted);margin-top:2px} .badge-count{font-family:var(--mono);font-size:10px;background:var(--red-tint);color:var(--red); border-radius:20px;padding:1px 8px;font-weight:600} tbody tr.is-selected{background:var(--green-tint)} tbody tr.is-selected:hover{background:var(--green-tint)} /* ---------- ratings ---------- */ .stars{color:#D4A72C;letter-spacing:2px} .big-score{font-size:46px;font-weight:700;letter-spacing:-.02em} /* ---------- segmented control ---------- */ .seg{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} .seg span,.seg label{font-size:12px;border:1px solid var(--border);border-radius:7px; padding:6px 11px;cursor:pointer} .seg span.on,.seg input:checked+span{background:var(--green-tint);border-color:var(--green); color:var(--green-d);font-weight:600} .seg input{position:absolute;opacity:0;width:0;height:0} /* ---------- page head ---------- */ /* The topbar h1 is the page title (design.md 5.2), so .page-head carries only the one-line description and the single primary action -- never a repeated heading. */ .page-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;min-height:34px} .page-head p{font-size:13px;color:var(--muted);margin:0} .count-note{font-family:var(--mono);font-size:11px;color:var(--muted)} /* ---------- empty state ---------- */ .empty{padding:44px 20px;text-align:center;color:var(--muted)} .empty h4{font-size:14.5px;font-weight:600;color:var(--text);margin:0 0 6px} .empty p{font-size:13px;margin:0 0 14px} /* ---------- table helpers ---------- */ .tbl-scroll{overflow-x:auto} .tbl-scroll table{min-width:720px} .t-actions{display:flex;gap:6px;justify-content:flex-end} td.num,th.num{font-family:var(--mono);text-align:right} /* ---------- filter bar + pagination ---------- */ .filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 16px} .filter-bar .tb-search{max-width:260px;flex:1 1 200px} .filter-bar select{padding:8px 11px;border:1px solid var(--border);border-radius:var(--r-btn); background:var(--canvas);color:var(--text);font-family:var(--body);font-size:13px} .field-inline{display:flex;flex-direction:column;gap:4px} .field-inline input,.field-inline select{padding:8px 11px;border:1px solid var(--border); border-radius:var(--r-btn);background:var(--canvas);color:var(--text); font-family:var(--body);font-size:13px;min-width:150px} .field-inline input[type="date"],.field-inline input[type="month"], .field-inline input[type="week"]{min-width:0} /* Filters without card chrome, sitting right-aligned above the content. */ .filter-row{display:flex;gap:12px;align-items:flex-end;justify-content:flex-end; flex-wrap:wrap;margin-bottom:18px} @media(max-width:820px){.filter-row{justify-content:stretch}} /* ---------- searchable select ---------- */ .combo{position:relative} .combo-shell{position:relative;display:block} .combo-input{width:100%;padding-right:30px} /* type="text" on purpose: type="search" adds a native clear button inside. */ .combo-caret{position:absolute;right:10px;top:50%;transform:translateY(-50%); width:15px;height:15px;color:var(--muted);pointer-events:none} .combo-list{position:absolute;top:100%;left:0;z-index:30;margin:4px 0 0;padding:4px; list-style:none;min-width:100%;max-height:260px;overflow-y:auto; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-btn); box-shadow:var(--shadow-sm)} .combo-list[hidden]{display:none} .combo-list li{padding:7px 10px;border-radius:6px;font-size:13px;color:var(--text-2); cursor:pointer;white-space:nowrap} .combo-list li:hover,.combo-list li.is-active{background:var(--surface-2);color:var(--text)} .combo-list li.is-selected{background:var(--green-tint);color:var(--green-d);font-weight:600} .combo-list li[hidden]{display:none} .custom-range{display:flex;gap:10px;flex-wrap:wrap;padding-left:10px; border-left:1px solid var(--border)} .custom-range[hidden]{display:none} .filter-bar .spacer{flex:1} .pager{display:flex;align-items:center;gap:12px;margin-top:16px} .is-disabled{opacity:.45;pointer-events:none} .nowrap{white-space:nowrap} .sub-cell{display:block;font-size:11px;color:var(--muted);margin-top:2px} /* ---------- detail layout, meta rows, timeline (design.md 6.9) ---------- */ .detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start} .detail-col{display:flex;flex-direction:column;gap:18px;min-width:0} .issue{margin:0;color:var(--text-2);line-height:1.65} .meta-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0; border-bottom:1px solid var(--border);font-size:13px} .meta-row:last-child{border-bottom:none} .meta-row .k{color:var(--muted);flex:none} .meta-row .v{font-weight:600;text-align:right;min-width:0} .tl{list-style:none;position:relative;padding-left:8px;margin:0} .tl li{position:relative;padding:0 0 16px 22px;font-size:12.5px;color:var(--text-2)} .tl li::before{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border-radius:50%; background:var(--green);box-shadow:0 0 0 3px var(--green-tint)} .tl li::after{content:"";position:absolute;left:4px;top:12px;bottom:0;width:1px;background:var(--border)} .tl li:last-child{padding-bottom:0} .tl li:last-child::after{display:none} .tl li b{color:var(--text)} .tl li .t{color:var(--muted);font-family:var(--mono);font-size:10.5px;margin-top:2px} @media(max-width:1080px){.detail-grid{grid-template-columns:1fr}} /* ============================================================ TECHNICIAN MOBILE (design.md 5.3) — single column, thumb-reachable. The mockup draws a phone frame; the real app IS the phone, so the device chrome is not reproduced. ============================================================ */ .mobile{max-width:480px;margin:0 auto;min-height:100vh;background:var(--canvas); display:flex;flex-direction:column;position:relative} .m-head{padding:16px 18px 12px;flex:none} .hello{display:flex;align-items:center;gap:11px} .hello .av{width:40px;height:40px;border-radius:50%;background:var(--green-tint); color:var(--green-d);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none} .hello .t small{font-size:12px;color:var(--muted);display:block} .hello .t b{font-size:16px;font-weight:700} .hello .bell{margin-left:auto;width:38px;height:38px;border-radius:11px;background:var(--surface); border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);position:relative} .hello .bell svg{width:18px;height:18px} .hello .bell .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%; background:var(--red);border:2px solid var(--surface)} /* availability pill */ .avail{display:flex;align-items:center;gap:9px;margin-top:12px;width:100%;text-align:left; background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 13px; cursor:pointer;font-family:var(--body);color:var(--text)} .avail .sd{width:11px;height:11px;border-radius:50%;flex:none} .avail .lab{font-weight:600;font-size:13.5px} .avail .lab small{display:block;font-weight:400;font-size:11px;color:var(--muted)} .avail .chev{margin-left:auto;color:var(--muted);width:15px;height:15px} .sd-onduty{background:var(--green);box-shadow:0 0 0 4px var(--green-tint)} .sd-commute{background:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)} .sd-offtime{background:var(--amber);box-shadow:0 0 0 4px var(--amber-tint)} .sd-unavail{background:var(--red);box-shadow:0 0 0 4px var(--red-tint)} /* segmented tabs */ .m-tabs{display:flex;gap:6px;background:var(--surface-2);border-radius:11px;padding:4px; margin:14px 18px 0;flex:none} .m-tabs a{flex:1;text-align:center;font-size:13.5px;font-weight:600;padding:9px 0; border-radius:8px;color:var(--muted)} .m-tabs a.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(20,28,40,.1)} .m-tabs a .n{font-family:var(--mono);font-size:11px;color:var(--green-d);margin-left:5px} /* job cards */ .m-list{flex:1;padding:14px 18px 96px;display:flex;flex-direction:column;gap:12px} .jc{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:14px;box-shadow:0 1px 2px rgba(20,28,40,.04)} .jc .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .jc .tk{font-family:var(--mono);font-weight:600;font-size:12.5px} .jc .title{font-weight:600;font-size:14.5px;margin-top:9px;line-height:1.3} .jc .meta{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--muted);font-size:12px} .jc .meta svg{width:13px;height:13px;flex:none} .jc .foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px; border-top:1px solid var(--border)} .jc .sla{margin-left:auto;font-size:11.5px;font-weight:600} .on-track{color:var(--green-d)}.breach{color:var(--red)}.paused{color:var(--muted)} /* bottom tab bar */ .tabbar{position:sticky;bottom:0;height:66px;background:var(--surface); border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around; z-index:30;margin-top:auto} .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted); font-size:10.5px;font-weight:600;position:relative;padding:6px 10px} .tabbar a.on{color:var(--green-d)} .tabbar a svg{width:22px;height:22px} .tabbar a .bdg{position:absolute;top:0;right:4px;background:var(--red);color:#fff;font-size:9px; font-weight:700;border-radius:20px;padding:0 5px;font-family:var(--mono)} /* job detail */ .d-head{display:flex;align-items:center;gap:12px;padding:14px 16px 12px;flex:none;flex-wrap:wrap} .d-head .back{width:36px;height:36px;border-radius:11px;background:var(--surface); border:1px solid var(--border);display:grid;place-items:center;color:var(--text);flex:none} .d-head .back svg{width:17px;height:17px} .d-head .tk{font-family:var(--mono);font-weight:700;font-size:16px} .d-body{flex:1;padding:0 18px 130px;display:flex;flex-direction:column;gap:16px} .sec b.h{font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase; color:var(--muted);display:block;margin-bottom:8px} .m-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px} .kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0} .kv .k{color:var(--muted);flex:none}.kv .v{font-weight:600;text-align:right} .desc{font-size:13.5px;color:var(--text-2);line-height:1.5} .contact{display:flex;gap:10px;margin-top:12px} .contact a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px; border-radius:11px;font-weight:600;font-size:13px;border:1px solid var(--border); background:var(--surface);color:var(--text)} .contact a.call{background:var(--green-tint);border-color:#4AC26B;color:var(--green-d)} .contact a svg{width:15px;height:15px} /* progress stepper */ .stepper{display:flex;flex-direction:column} .step{display:flex;gap:12px;align-items:flex-start;position:relative;padding-bottom:14px} .step:last-child{padding-bottom:0} .step .mk{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;z-index:2} .step.done .mk{background:var(--green);color:#fff} .step.now .mk{background:var(--blue);color:#fff;box-shadow:0 0 0 4px var(--blue-tint)} .step.todo .mk{background:var(--surface-2);border:1px solid var(--border)} .step .mk svg{width:12px;height:12px} .step::after{content:"";position:absolute;left:9px;top:20px;bottom:0;width:2px;background:var(--border)} .step:last-child::after{display:none} .step.done::after{background:var(--green)} .step .lt{font-size:13px;font-weight:600} .step.todo .lt{color:var(--muted);font-weight:500} .step .lt small{display:block;font-weight:400;font-size:11px;color:var(--muted)} .notefield{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:11px; padding:12px;font-size:13px;color:var(--text-2);margin-top:8px;min-height:76px; font-family:var(--body);resize:vertical} /* sticky action bar */ .sticky-act{position:sticky;bottom:0;padding:14px 18px 18px;display:flex;gap:10px;z-index:20; background:linear-gradient(180deg,transparent,var(--canvas) 22%)} .m-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700; font-size:14px;padding:14px;border-radius:13px;border:1px solid transparent;cursor:pointer; font-family:var(--body)} .m-btn.primary{background:var(--green);color:#fff} .m-btn.ghost{background:var(--surface);border-color:var(--border);color:var(--text)} .m-btn.danger{background:var(--surface);border-color:var(--border);color:var(--red);flex:0 0 auto} /* availability sheet */ .dim{position:fixed;inset:0;background:rgba(15,20,28,.4);z-index:50;border:0} .sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px; background:var(--surface);border-radius:22px 22px 0 0;padding:8px 18px 22px;z-index:51} .grab{width:38px;height:4px;border-radius:20px;background:var(--border-2);margin:8px auto 14px} .sheet h3{font-size:17px;font-weight:700} .sheet p.s{font-size:12.5px;color:var(--muted);margin:3px 0 14px} .opt{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid var(--border); border-radius:14px;margin-bottom:10px;width:100%;background:var(--surface);cursor:pointer; font-family:var(--body);text-align:left} .opt.sel{border-color:var(--green);background:var(--green-tint)} .opt .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none} .opt .ic svg{width:19px;height:19px} .i-green{background:var(--green-tint);color:var(--green-d)} .i-blue{background:var(--blue-tint);color:var(--blue)} .i-amber{background:var(--amber-tint);color:var(--amber)} .i-red{background:var(--red-tint);color:var(--red)} .opt .ol b{font-size:14.5px;font-weight:600} .opt .ol small{display:block;font-size:12px;color:var(--muted)} .opt .rd{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex:none} .opt.sel .rd{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 4px var(--surface)} /* ---------- internal note (visibility rule) ---------- */ .note-internal{font-size:12px;color:var(--amber);background:var(--amber-tint); border:1px solid var(--amber);border-radius:8px;padding:8px 12px} /* ---------- reveal / motion ---------- */ .reveal{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto} .reveal{opacity:1;transform:none} } /* ---------- responsive ---------- */ @media(max-width:1080px){.grid4{grid-template-columns:repeat(2,1fr)}.grid2,.grid3{grid-template-columns:1fr}} @media(max-width:820px){ .sidebar{transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow)} .sidebar.open{transform:none} .main{margin-left:0} .sidebar-toggle{display:inline-grid} .topbar{padding:0 16px} .content{padding:18px 16px} .scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:19;border:0} } @media(prefers-reduced-motion:reduce){.sidebar{transition:none}}