/* EarthRoster v686 consolidated styles — exact original cascade order. */
/* ---- inline style 1 ---- */
/* ============================================================
WESTWONDERSANDCO · WORKFORCE POWER APP
Refined organic-premium SaaS aesthetic
------------------------------------------------------------
Sections:
1. Design Tokens (palette, type, shadows, motion)
2. Reset & Base
3. App Shell (sidebar, topbar, content, mobile nav)
4. Primitives (avatar, card, button, pill, input, etc.)
5. Login
6. Dashboard, Stat Cards, Quick Actions
7. Shift Cards & Roster
8. Clock-in / Time Tracking
9. Timesheets & Payroll (incl. Xero)
10. Chat
11. People / Clients / Documents
12. Account / Profile / Detail Lists
13. Updates / Announcements
14. Availability
15. Modal & Shift Builder
16. Utilities & Misc
============================================================ */
/* ──────────────────────────────────────────────────────────
1. DESIGN TOKENS
────────────────────────────────────────────────────────── */
:root{
/* — Forest greens (primary, anchored) — */
--forest-950:#0e1b13;
--forest-900:#16271a;
--forest-800:#1f3424;
--forest-700:#2a472f;
--forest-600:#385c3d;
--forest-500:#4a7351;
--forest-400:#618c68;
/* — Sage (soft, harmonised) — */
--sage-500:#7a987b;
--sage-400:#94ad92;
--sage-300:#b3c4ad;
--sage-200:#cfdcc7;
--sage-100:#e4ecdc;
--sage-50:#eef3e7;
/* — Clay / Terracotta (sophisticated warm accent) — */
--clay-700:#8a4a2c;
--clay-600:#a35a35;
--clay-500:#bd7048;
--clay-400:#cf8a64;
--clay-300:#dfa886;
--clay-200:#ecc5ab;
--clay-100:#f5dec9;
/* — Cream / parchment / paper — */
--cream-50:#fbf8f1;
--cream-100:#f4eee2;
--cream-200:#ebe3d2;
--cream-300:#ddd2bd;
--paper:#fffdf7;
/* — Ink (text) — */
--ink-900:#161e18;
--ink-800:#283128;
--ink-700:#3c453c;
--ink-600:#525a51;
--ink-500:#6a7268;
--ink-400:#8a9087;
--ink-300:#aab0a7;
/* — Lines — */
--line:rgba(35,55,35,.09);
--line-strong:rgba(35,55,35,.16);
--line-deep:rgba(35,55,35,.22);
/* — Status — */
--status-ok:#3d8e57;
--status-ok-bg:#e1efdc;
--status-warn:#b3851e;
--status-warn-bg:#fbeed1;
--status-bad:#a8392f;
--status-bad-bg:#f7dedb;
--status-info:#3a5d86;
--status-info-bg:#dde7f1;
/* — Surfaces / Backgrounds — */
--bg:#eef1e8;
--bg-grad:
radial-gradient(ellipse 60% 35% at 12% -6%, rgba(180,200,160,.42) 0%, transparent 60%),
radial-gradient(ellipse 55% 40% at 96% 0%, rgba(220,195,165,.32) 0%, transparent 55%),
radial-gradient(ellipse 90% 60% at 50% 110%, rgba(140,170,135,.18) 0%, transparent 70%),
linear-gradient(178deg, #eff2e9 0%, #e7ece0 100%);
/* subtle grain – SVG noise, embedded */
--grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
/* — Shadows (refined, layered, low-saturation) — */
--shadow-xs:0 1px 1px rgba(20,38,22,.04);
--shadow-sm:0 1px 2px rgba(20,38,22,.05), 0 2px 6px rgba(20,38,22,.05);
--shadow-md:0 2px 4px rgba(20,38,22,.05), 0 8px 22px rgba(20,38,22,.08);
--shadow-lg:0 6px 14px rgba(20,38,22,.08), 0 24px 50px -8px rgba(20,38,22,.16);
--shadow-xl:0 12px 28px rgba(20,38,22,.10), 0 40px 80px -12px rgba(20,38,22,.22);
--shadow-inset:inset 0 1px 0 rgba(255,255,255,.55);
--ring-focus:0 0 0 3px rgba(74,115,81,.18);
/* — Radii — */
--radius-xs:8px;
--radius-sm:12px;
--radius:16px;
--radius-lg:22px;
--radius-xl:28px;
/* — Typography — */
--font-display:"Fraunces","Cormorant Garamond",Georgia,"Times New Roman",serif;
--font-body:"Inter Tight","Hanken Grotesk",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
/* — Layout — */
--sidebar-w:268px;
--safe-b:env(safe-area-inset-bottom,0px);
--safe-t:env(safe-area-inset-top,0px);
/* — Motion — */
--ease-out:cubic-bezier(.22,.61,.36,1);
--ease-spring:cubic-bezier(.32,1.4,.42,.96);
--t-fast:.12s;
--t:.18s;
--t-slow:.28s;
}
/* ──────────────────────────────────────────────────────────
2. RESET & BASE
────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;max-width:100vw;overflow-x:hidden}
@media (max-width:1023px){
/* Root + body painted the dock's green so the bottom safe-area / home-indicator
zone can never show the light page background (kills the white strip for good). */
html{background:#11301d !important}
body{background:#11301d}
body.chat-thread-open::before{display:none}
}
body{
font-family:var(--font-body);
font-feature-settings:"ss01","cv11";
background:var(--bg);
color:var(--ink-900);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
overscroll-behavior-y:none;
line-height:1.55;
letter-spacing:-.005em;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;letter-spacing:inherit}
input,textarea,select{font-family:inherit;font-size:max(16px,1em);letter-spacing:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--sage-200);color:var(--forest-900)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(60,80,55,.22);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(60,80,55,.36);background-clip:padding-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}
/* ──────────────────────────────────────────────────────────
3. APP SHELL
────────────────────────────────────────────────────────── */
#app{min-height:100dvh;max-width:100vw;overflow-x:hidden}
.shell{
display:flex;min-height:100dvh;
background:var(--bg-grad);
position:relative;
}
.shell::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background-image:var(--grain);
opacity:.35;
mix-blend-mode:multiply;
}
.shell > *{position:relative;z-index:1}
/* ---- Desktop sidebar ---- */
.sidebar{
width:var(--sidebar-w);flex-shrink:0;
background:
radial-gradient(ellipse 90% 40% at 0% 0%, rgba(95,138,100,.22) 0%, transparent 60%),
linear-gradient(178deg,var(--forest-800) 0%,var(--forest-950) 100%);
color:var(--cream-50);
display:flex;flex-direction:column;
padding:24px 16px 18px;
position:sticky;top:0;height:100dvh;
border-right:1px solid rgba(0,0,0,.25);
box-shadow:inset -1px 0 0 rgba(255,255,255,.04);
}
.sidebar::after{
content:"";position:absolute;inset:0;
background:var(--grain);opacity:.16;mix-blend-mode:overlay;pointer-events:none;
}
.sidebar-brand{
display:flex;align-items:center;gap:11px;
padding:6px 8px 24px;position:relative;
}
.sidebar-brand img{
width:42px;height:42px;object-fit:contain;object-position:center;flex-shrink:0;
background:transparent;padding:0;border:0;outline:0;border-radius:0;
box-shadow:none;filter:none;
}
.sidebar-brand .bname{
font-family:var(--font-display);font-weight:600;font-size:16px;
letter-spacing:-.01em;line-height:1.1;color:#fbf8f0;
}
.sidebar-brand .btag{
font-size:10.5px;color:var(--sage-300);font-weight:600;
letter-spacing:.06em;text-transform:uppercase;margin-top:3px;
}
.nav-group-label{
font-size:10px;text-transform:uppercase;letter-spacing:.18em;
color:var(--sage-400);font-weight:700;padding:18px 12px 8px;
}
.nav-item{
display:flex;align-items:center;gap:12px;
padding:11px 12px;border-radius:11px;
color:rgba(232,240,225,.74);font-weight:600;font-size:14px;
transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
position:relative;letter-spacing:-.005em;
}
.nav-item svg{width:19px;height:19px;flex-shrink:0;opacity:.82}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item:hover svg{opacity:1}
.nav-item.active{
background:linear-gradient(100deg,rgba(189,112,72,.22),rgba(122,152,123,.18));
color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item.active svg{opacity:1}
.nav-item.active::before{
content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
width:4px;height:24px;border-radius:0 4px 4px 0;
background:linear-gradient(180deg,var(--clay-400),var(--clay-600));
box-shadow:0 0 12px rgba(189,112,72,.55);
}
.nav-item .nav-badge{
margin-left:auto;background:var(--clay-500);color:#fff;
font-size:11px;font-weight:700;min-width:20px;height:20px;
border-radius:10px;display:grid;place-items:center;padding:0 6px;
box-shadow:0 2px 6px rgba(120,55,30,.4);
}
.sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.side-user{
display:flex;align-items:center;gap:11px;padding:10px;
border-radius:13px;transition:background var(--t-fast);
}
.side-user:hover{background:rgba(255,255,255,.06)}
.side-user .avatar{flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.side-user .su-name{font-size:13.5px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.side-user .su-role{
font-size:10.5px;color:var(--sage-300);text-transform:uppercase;
letter-spacing:.08em;font-weight:700;margin-top:2px;
}
.side-logout{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:#e98a72;font-weight:800;font-size:12px;padding:7px 13px;border-radius:999px;transition:all var(--t-fast);background:rgba(231,109,90,.16);border:1px solid rgba(231,109,90,.4)}
.side-logout:hover{color:#fff;background:rgba(231,109,90,.9);border-color:transparent}
.side-logout svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* ---- Main column ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100dvh}
.topbar{
position:sticky;top:0;z-index:40;
display:flex;align-items:center;gap:14px;
padding:calc(18px + var(--safe-t)) clamp(18px,3vw,36px) 17px;
background:
radial-gradient(ellipse 60% 100% at 30% 0%, rgba(95,138,100,.25) 0%, transparent 60%),
linear-gradient(120deg,var(--forest-700) 0%,var(--forest-800) 60%,var(--forest-900) 100%);
border-bottom:1px solid rgba(0,0,0,.22);
box-shadow:0 6px 22px -10px rgba(15,30,18,.45);
}
.topbar::after{
content:"";position:absolute;inset:0;background:var(--grain);
opacity:.14;mix-blend-mode:overlay;pointer-events:none;
}
.topbar h1{
font-family:var(--font-display);font-weight:500;
font-size:clamp(22px,3.4vw,29px);letter-spacing:-.02em;line-height:1.05;
color:#fbf8f0;position:relative;
}
.topbar .sub{
font-size:12.5px;color:var(--sage-300);font-weight:500;
margin-top:3px;position:relative;letter-spacing:.005em;
}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:9px;position:relative}
.icon-btn{
width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#eef3e8;
transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
position:relative;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.icon-btn:hover{background:rgba(255,255,255,.18);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .dot{
position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;
background:var(--clay-500);border:2px solid var(--forest-800);
box-shadow:0 0 8px rgba(189,112,72,.6);
}
.content{flex:1;padding:clamp(18px,2.8vw,32px) clamp(14px,3vw,36px) 40px;max-width:1180px;width:100%;margin:0 auto}
@media (max-width:1023px){ .content{padding-bottom:calc(112px + var(--safe-b))} }
/* page enter */
.page{animation:pageIn .28s var(--ease-out)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:1023px){
.sidebar{display:none}
/* active = vivid green pill */
.mtab.active{
background:linear-gradient(180deg,#1ba257 0%,#128442 48%,#0b6f34 100%);
border-color:rgba(255,255,255,.22);
box-shadow:0 10px 20px rgba(13,111,52,.30), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,48,21,.18);
transform:translateY(-1px);
}
.mtab.active > svg{
background:rgba(255,255,255,.18);
border-color:rgba(255,255,255,.20);
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
}
.mtab.active span{color:#fff;font-weight:900}
/* lime underline dot on active */
.mtab.active::after{
content:"";position:absolute;left:50%;bottom:4px;
width:20px;height:3px;border-radius:999px;transform:translateX(-50%);
background:rgba(215,239,143,.95);
box-shadow:0 1px 5px rgba(215,239,143,.4);
}
.mtab .nav-badge{
position:absolute;top:1px;right:50%;margin-right:-20px;
background:linear-gradient(180deg,#ff6978,#df3045);color:#fff;
font-size:9.5px;font-weight:950;line-height:1;
min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 4px;
border:2px solid #fffaf2;
box-shadow:0 4px 9px rgba(210,35,55,.30);
}
}
@media (max-width:380px){
}
/* ──────────────────────────────────────────────────────────
4. PRIMITIVES
────────────────────────────────────────────────────────── */
.avatar{
width:38px;height:38px;border-radius:50%;flex-shrink:0;
display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;
background:linear-gradient(135deg,var(--forest-500),var(--forest-700));
letter-spacing:.02em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(20,38,22,.18);
}
.avatar.sm{width:30px;height:30px;font-size:11.5px}
.avatar.lg{width:64px;height:64px;font-size:23px;border-radius:20px;font-family:var(--font-display);font-weight:600}
.avatar.clay{background:linear-gradient(135deg,var(--clay-500),var(--clay-700))}
.avatar.sage{background:linear-gradient(135deg,var(--sage-500),var(--forest-600))}
.card{
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow-sm);
position:relative;
}
.card-pad{padding:clamp(16px,2.4vw,22px)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
height:46px;padding:0 20px;border-radius:13px;
font-weight:700;font-size:14.5px;letter-spacing:-.005em;
transition:transform .08s,box-shadow var(--t-fast),background var(--t-fast),opacity var(--t-fast);
white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{
background:linear-gradient(140deg,var(--forest-600),var(--forest-800));
color:#fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 1px 2px rgba(15,30,18,.2),
0 8px 18px -2px rgba(30,60,30,.28);
}
.btn-primary:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 2px 4px rgba(15,30,18,.22),
0 12px 26px -2px rgba(30,60,30,.36);
}
.btn-clay{
background:linear-gradient(140deg,var(--clay-500),var(--clay-700));
color:#fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 8px 18px -2px rgba(140,75,40,.32);
}
.btn-clay:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -2px rgba(140,75,40,.42)}
.btn-ghost{
background:var(--paper);
border:1px solid var(--line-strong);
color:var(--forest-700);
box-shadow:var(--shadow-xs);
}
.btn-ghost:hover{background:#fff;border-color:var(--line-deep);box-shadow:var(--shadow-sm)}
.btn-soft{background:var(--sage-100);color:var(--forest-700);border:1px solid rgba(74,115,81,.1)}
.btn-soft:hover{background:var(--sage-200);border-color:rgba(74,115,81,.18)}
.btn-sm{height:38px;padding:0 14px;font-size:13px;border-radius:11px}
.btn-block{width:100%}
.btn-danger{background:#fff;border:1px solid rgba(168,57,47,.3);color:#a8392f}
.btn-danger:hover{background:#fdf0ee;border-color:rgba(168,57,47,.45)}
.pill{
display:inline-flex;align-items:center;gap:5px;
height:24px;padding:0 10px;border-radius:8px;
font-size:11.5px;font-weight:700;letter-spacing:.005em;
white-space:nowrap;
}
.pill-green{background:linear-gradient(135deg,#d6f3dd,#b6e6c2);color:#1c5e30;border:1px solid rgba(74,140,90,.35);font-weight:800}
.pill-clay{background:var(--clay-100);color:var(--clay-700);border:1px solid rgba(140,75,40,.16)}
.pill-amber{background:var(--status-warn-bg);color:var(--status-warn);border:1px solid rgba(180,135,30,.18)}
.pill-red{background:var(--status-bad-bg);color:var(--status-bad);border:1px solid rgba(168,57,47,.18)}
.pill-blue{background:var(--status-info-bg);color:var(--status-info);border:1px solid rgba(60,90,135,.18)}
.pill-grey{background:var(--cream-200);color:var(--ink-600);border:1px solid var(--line-strong)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.field{display:grid;gap:7px;margin-bottom:15px}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-700);letter-spacing:.005em}
.input{
height:48px;width:100%;
border:1.5px solid var(--line-strong);border-radius:12px;
background:#fff;
padding:0 14px;font-size:15px;color:var(--ink-900);
transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
textarea.input{height:auto;padding:12px 14px;line-height:1.5;resize:vertical;min-height:84px}
select.input{
appearance:none;-webkit-appearance:none;
/* Chevron sits inside a soft green rounded 'button' on the right so it reads
clearly as a tappable dropdown rather than a flat box with a faint arrow. */
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23385c3d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
linear-gradient(180deg,#eef3e7,#e4ecdc);
background-repeat:no-repeat,no-repeat;
background-position:right 12px center,right 4px center;
background-size:17px,34px 40px;
padding-right:46px;
border-radius:13px;
cursor:pointer;
font-weight:650;
}
select.input:hover{border-color:var(--forest-400,#6f9a6f)}
select.input:focus{
border-color:var(--forest-500);box-shadow:var(--ring-focus);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
linear-gradient(180deg,var(--forest-600,#385c3d),var(--forest-700,#2c4a30));
background-repeat:no-repeat,no-repeat;
background-position:right 12px center,right 4px center;
background-size:17px,34px 40px;
}
.input:focus{outline:0;border-color:var(--forest-500);box-shadow:var(--ring-focus)}
.input::placeholder{color:var(--ink-400)}
.section-head{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.section-head h2{
font-family:var(--font-display);font-weight:500;font-size:22px;
letter-spacing:-.022em;color:var(--ink-900);
}
.section-head .count{font-size:12.5px;color:var(--ink-500);font-weight:600}
.section-head .spacer{margin-left:auto}
.eyebrow{
font-size:10.5px;font-weight:800;letter-spacing:.18em;
text-transform:uppercase;color:var(--clay-600);
}
.empty{text-align:center;padding:48px 20px;color:var(--ink-500)}
.empty svg{width:42px;height:42px;opacity:.4;margin-bottom:12px}
.empty p{font-size:14px;font-weight:600}
/* Toast */
.toast{
position:fixed;left:50%;bottom:calc(100px + var(--safe-b));
transform:translateX(-50%) translateY(20px);
background:var(--forest-900);color:#fff;
padding:13px 20px;border-radius:14px;
font-weight:600;font-size:14px;letter-spacing:-.005em;
box-shadow:var(--shadow-lg);z-index:200;
opacity:0;pointer-events:none;
transition:opacity .2s,transform .2s var(--ease-out);
max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:1024px){.toast{bottom:32px}}
.login-root::before{
content:"";position:absolute;inset:0;
background:var(--grain);opacity:.18;mix-blend-mode:overlay;pointer-events:none;
}
@media(min-width:880px){
}
@media(min-width:880px){}
.login-card{
width:100%;max-width:420px;
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:34px 32px 28px;
box-shadow:var(--shadow-lg);
position:relative;
}
.login-card h3{
font-family:var(--font-display);font-weight:500;font-size:28px;
letter-spacing:-.025em;color:var(--ink-900);
}
.pw-wrap{position:relative}
.pw-eye{
position:absolute;right:6px;top:50%;transform:translateY(-50%);
width:40px;height:40px;display:grid;place-items:center;
color:var(--ink-500);border-radius:10px;
}
.pw-eye:hover{color:var(--forest-700);background:var(--cream-100)}
.pw-eye svg{width:18px;height:18px}
.login-err{
display:none;
background:var(--status-bad-bg);border:1px solid rgba(168,57,47,.25);
color:var(--status-bad);border-radius:11px;
padding:11px 13px;font-size:13px;font-weight:600;margin-bottom:14px;
}
.login-err.show{display:block}
.chip{
padding:6px 13px;border-radius:9px;
background:var(--sage-100);color:var(--forest-700);
font-size:12.5px;font-weight:700;
border:1px solid rgba(74,115,81,.14);
transition:background var(--t-fast),border-color var(--t-fast);
}
.chip:hover{background:var(--sage-200);border-color:rgba(74,115,81,.22)}
.login-foot{margin-top:24px;font-size:11.5px;color:var(--ink-500);text-align:center;line-height:1.5;letter-spacing:.005em}
/* ──────────────────────────────────────────────────────────
6. STAT CARDS & QUICK ACTIONS
────────────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.stat-grid.two{grid-template-columns:repeat(2,1fr);max-width:520px}
@media(max-width:860px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{
background:linear-gradient(180deg,var(--paper) 0%,#fffbf2 100%);
border:1px solid var(--line);
border-radius:15px;
padding:11px 13px;
box-shadow:var(--shadow-xs);
position:relative;overflow:hidden;
}
.stat::after{
content:"";position:absolute;right:-18px;top:-18px;width:56px;height:56px;
border-radius:50%;background:var(--sage-100);opacity:.5;
}
.stat.sage::after{background:var(--sage-200);opacity:.55}
.stat.clay::after{background:var(--clay-100);opacity:.6}
.stat-v{
font-family:var(--font-display);font-weight:500;font-size:23px;
letter-spacing:-.025em;line-height:1;position:relative;
color:var(--ink-900);font-variant-numeric:tabular-nums;
}
.stat-l{font-size:11.5px;font-weight:700;color:var(--ink-700);margin-top:5px;position:relative;letter-spacing:-.005em}
.stat-s{font-size:10.5px;color:var(--ink-500);margin-top:2px;position:relative;letter-spacing:.005em}
@media(max-width:560px){}
/* ──────────────────────────────────────────────────────────
7. SHIFT CARDS & ROSTER
────────────────────────────────────────────────────────── */
.shift-card{
position:relative;display:flex;background:#fff;
border:1px solid color-mix(in srgb,var(--solid) 22%,var(--line));
border-radius:14px;overflow:hidden;margin-bottom:8px;cursor:pointer;
--solid:#2f7d4a;--deep:#1f5e34;
box-shadow:
0 1px 2px rgba(20,30,20,.04),
0 3px 9px -6px color-mix(in srgb,var(--solid) 28%,transparent),
0 0 0 1px color-mix(in srgb,var(--solid) 8%,transparent);
transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast),border-color var(--t-fast);
}
.shift-card::after{
content:"";position:absolute;bottom:0;right:0;width:90px;height:90px;
background:radial-gradient(circle at bottom right,color-mix(in srgb,var(--solid) 14%,transparent),transparent 70%);
pointer-events:none;
}
.shift-card:hover{
transform:translateY(-2px);
border-color:color-mix(in srgb,var(--solid) 40%,var(--line));
box-shadow:
0 2px 4px rgba(20,30,20,.05),
0 14px 30px -10px color-mix(in srgb,var(--solid) 50%,transparent);
}
.shift-card:active{transform:translateY(0) scale(.994)}
.shift-card.is-draft{background:repeating-linear-gradient(135deg,#fff,#fff 9px,#faf9f4 9px,#faf9f4 18px)}
.sc-status.published{color:var(--forest-700);background:var(--sage-100)}
.sc-status.draft{color:var(--status-warn);background:var(--status-warn-bg)}
.sc-publish.unpub{background:var(--status-bad-bg);color:var(--status-bad)}
.sc-publish.pub{background:var(--sage-100);color:var(--forest-700)}
.sc-emp-state.declined{background:var(--status-bad-bg);color:var(--status-bad)}
.sc-av.more,.sc-av.empty{background:var(--cream-200);color:var(--ink-500)}
/* Activity */
.activity{padding:6px 0}
.act-row{display:flex;align-items:center;gap:11px;padding:11px 18px;font-size:13.5px;border-bottom:1px solid var(--line)}
.act-row:last-child{border-bottom:0}
.act-row svg{width:17px;height:17px;color:var(--clay-500);flex-shrink:0}
.act-row span{flex:1;min-width:0}
.act-row time{font-size:11.5px;color:var(--ink-400);font-weight:600;white-space:nowrap}
/* Roster head */
.roster-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rh-nav{
width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
background:var(--cream-100);color:var(--forest-700);flex-shrink:0;
transition:background var(--t-fast);
}
.rh-nav:hover{background:var(--sage-100)}
.rh-nav svg{width:17px;height:17px}
.rh-label{flex:1;text-align:center;min-width:0}
.rh-label strong{
display:block;font-family:var(--font-display);font-size:16px;font-weight:500;
letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rh-label span{font-size:11.5px;color:var(--ink-500);font-weight:600}
/* Day chips */
.day-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.dchip:active{transform:scale(.95)}
.dchip.today:not(.sel){border-color:var(--clay-300);background:linear-gradient(180deg,#fff,var(--clay-100))}
.dchip.sel{
background:linear-gradient(160deg,var(--forest-600),var(--forest-800));
border-color:transparent;box-shadow:var(--shadow-md);
}
.dchip.sel .dc-dow{color:rgba(255,255,255,.72)}
.dchip.sel .dc-num{color:#fff}
.dchip.today:not(.sel) .dc-num{color:var(--clay-700)}
.dc-dot.on{background:var(--clay-500);color:#fff;box-shadow:0 1px 3px rgba(140,75,40,.32)}
.dchip.sel .dc-dot.on{background:rgba(255,255,255,.24);color:#fff;box-shadow:none}
/* Roster: mobile vs desktop */
.roster-week{display:none}
@media(min-width:1024px){
.roster-mobile{display:none}
.roster-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:18px}
.day-row{display:none}
.rst-days{display:none}
}
.wk-col{
background:var(--paper);border:1px solid var(--line);border-radius:14px;
box-shadow:var(--shadow-sm);overflow:hidden;
display:flex;flex-direction:column;min-height:340px;
}
.wk-col.today{border-color:var(--clay-300);box-shadow:0 0 0 1px var(--clay-300),var(--shadow-sm)}
.wk-colhead{
display:flex;flex-direction:column;align-items:center;gap:1px;
padding:12px 4px;background:var(--cream-50);border-bottom:1px solid var(--line);
}
.wk-col.today .wk-colhead{background:linear-gradient(180deg,var(--clay-100),#f9e7d5)}
.wk-dow{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.wk-num{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.015em}
.wk-col.today .wk-num{color:var(--clay-700)}
.wk-cells{flex:1;padding:8px;display:flex;flex-direction:column;gap:7px}
.wk-cell{
position:relative;border:1px solid var(--line);border-radius:11px;
padding:9px 10px 9px 14px;cursor:pointer;
transition:box-shadow var(--t-fast),transform .1s,border-color var(--t-fast);
--accent:#2f7d4a;--accent-deep:#1f5e34;
background:#fff;overflow:hidden;
}
.wk-cell::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:linear-gradient(var(--accent),var(--accent-deep));
}
.wk-cell:hover{
transform:translateY(-2px);
border-color:color-mix(in srgb,var(--accent) 32%,var(--line));
box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 36%,transparent);
}
.wkc-time{font-size:11px;font-weight:800;color:var(--accent-deep)}
.wkc-name{font-size:13px;font-weight:700;margin:2px 0 3px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-900);letter-spacing:-.005em}
.wkc-dur{font-size:10px;color:var(--accent-deep);font-weight:800;background:color-mix(in srgb,var(--accent) 13%,#fff);display:inline-block;padding:2px 8px;border-radius:7px}
.wkc-status{display:inline-flex;margin-top:6px;padding:2px 7px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.wkc-status.published{background:var(--sage-100);color:var(--forest-700)}
.wkc-status.draft{background:var(--status-warn-bg);color:var(--status-warn)}
.wk-cell.unpublished{background:repeating-linear-gradient(135deg,#fff,#fff 8px,#faf9f4 8px,#faf9f4 16px)}
.wk-empty{text-align:center;color:var(--ink-400);font-size:13px;padding:8px}
.clock-hero.live{
text-align:center;
background:radial-gradient(ellipse at 50% -10%,var(--sage-100) 0%,var(--paper) 60%);
}
.ring-fg{fill:none;stroke:var(--forest-500);stroke-width:9;stroke-linecap:round;stroke-dasharray:339;stroke-dashoffset:339;transition:stroke-dashoffset 1s linear}
.clock-hero.idle{display:flex;flex-direction:column;gap:18px}
.clock-shift.done{opacity:.66}
.clock-shift.done .cks-bar{background:var(--sage-300)}
.cks-btn:active{transform:scale(.95)}
.rec-ic.g{background:var(--sage-100);color:var(--forest-600)}
.rec-ic.a{background:var(--status-warn-bg);color:var(--status-warn)}
.rec-ic.r{background:var(--status-bad-bg);color:var(--status-bad)}
.rec-ic.b{background:var(--status-info-bg);color:var(--status-info)}
.rec-row.locked{background:linear-gradient(135deg,#fffdf8,#f5f1e9)}
.rr-note{font-size:12px;color:var(--ink-700);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-note.muted{color:var(--ink-400);font-style:italic}
/* Clock-out modal */
.co-summary{
background:linear-gradient(135deg,var(--cream-100),var(--sage-50));
border:1px solid var(--line);
border-radius:14px;padding:16px 18px;margin-bottom:16px;text-align:center;
}
.co-client{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.018em}
.co-time{font-size:13px;color:var(--ink-500);margin-top:4px}
.co-time strong{color:var(--forest-700);font-weight:800}
.co-hint{font-size:12px;color:var(--ink-500);text-align:center;margin-top:4px;line-height:1.5}
.co-check{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;cursor:pointer}
.co-check input{width:20px;height:20px;accent-color:var(--forest-600)}
.clock-admin-hero .rh-nav{
width:44px!important;height:44px!important;border-radius:50%!important;
background:rgba(255,255,255,.16)!important;
border:1.5px solid rgba(255,255,255,.34)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.14)!important;
}
.clock-admin-hero .rh-nav:hover{background:rgba(255,255,255,.26)!important}
.cd-card.empty{background:#fbf9f3;border-style:dashed;opacity:.72}
.cd-card.empty::before{opacity:.3}
.cd-card.empty .cd-mid strong,.cd-card.empty .cd-wages{color:#98a2b3;font-weight:500}
.cd-card.today{box-shadow:0 14px 30px rgba(20,31,19,.13), 0 0 0 2px rgba(204,143,98,.42)}
.cd-card.today .cd-date strong::after{
content:" · today";font-weight:700;letter-spacing:.04em;color:var(--clay-600);text-transform:none;
}
/* Section head hint */
.section-head .hint{
display:none;color:var(--ink-400);font-size:11.5px;font-weight:600;
font-style:italic;margin-left:8px;
}
@media (min-width:640px){ .section-head .hint{display:inline} }
.clock-emp{
overflow:hidden;background:#fff;border-radius:22px;
border:1px solid rgba(22,99,45,.10);
box-shadow:0 14px 32px rgba(20,31,19,.08);transition:box-shadow var(--t);
}
.clock-emp[open]{box-shadow:0 18px 38px rgba(20,31,19,.12)}
.clock-emp summary{
display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;
align-items:center;gap:13px;padding:13px 16px;cursor:pointer;list-style:none;
transition:background var(--t-fast);
}
.clock-emp summary::-webkit-details-marker{display:none}
.clock-emp summary:hover{background:#fcf9f1}
.clock-emp .ce-avatar{
width:52px;height:52px;border-radius:50%;
background:radial-gradient(circle at 34% 20%,#f5ffe9 0%,#d9f4c7 58%,#bcebad 100%);
color:#0c8d30;display:grid;place-items:center;font-size:18px;font-weight:900;letter-spacing:-.01em;
box-shadow:inset 0 0 0 1px rgba(12,141,48,.10);
}
.clock-emp .ce-info{min-width:0}
.clock-emp .ce-info strong{display:block;font-size:16.5px;color:#111827;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.clock-emp .ce-info em{display:block;font-style:normal;color:#4b5563;font-size:12.5px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.clock-emp .ce-pill{
height:28px;padding:0 11px;border-radius:999px;font-size:11.5px;font-weight:900;
display:inline-flex;align-items:center;white-space:nowrap;letter-spacing:.01em;
}
.clock-emp .ce-pill.amber{background:#fff0dc;color:#c46300}
.clock-emp .ce-pill.red{background:#fde2e2;color:#c11616}
.clock-emp .ce-pill.green{background:#dcf8dc;color:#179131}
.clock-emp .ce-pill.grey{background:#ecf0eb;color:#4b5563}
.clock-emp .ce-chev{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--ink-400);transform:rotate(180deg);transition:transform var(--t) var(--ease-spring)}
.clock-emp .ce-chev svg{width:14px;height:14px}
.clock-emp[open] .ce-chev{transform:rotate(270deg)}
.clock-emp .ce-body{padding:0 14px 14px;border-top:1px solid rgba(15,30,21,.06)}
.clock-emp .ce-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}
.clock-emp .ce-stats > div{
background:linear-gradient(180deg,#fff,#f7f3e9);border:1px solid rgba(22,99,45,.10);
border-radius:14px;padding:9px 6px;text-align:center;
}
.clock-emp .ce-stats b{display:block;font-family:var(--font-display);font-size:15px;font-weight:500;color:#0f1e15;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.clock-emp .ce-stats em{display:block;font-style:normal;font-size:9.5px;font-weight:800;color:#4b5563;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.clock-emp .ce-records{display:grid;gap:10px}
.clock-emp .ce-hint{margin-top:10px;font-size:11.5px;color:var(--ink-400);font-style:italic;text-align:center;letter-spacing:.01em}
/* Colourful timesheet entry cards (replaces rec-row) */
.ts-list{display:grid;gap:10px}
.ts-card .ts-pill.approved{background:#dff8da;color:#16862e}
.ts-card .ts-pill.pending{background:#fff0dc;color:#c46300}
.ts-card .ts-pill.flagged{background:#fde2e2;color:#c11616}
.ts-card .ts-pill.paid{background:#e0eaff;color:#1741b0}
.ts-card .ts-variance.ok{color:#16862e}
.ts-card .ts-variance.warn{color:#b97000}
.ts-card .ts-variance.bad{color:#b91c1c}
.ts-card.locked{opacity:.82}
.ts-card.review .ts-actions{grid-column:1 / -1;display:flex;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(148,163,184,.26)}
.ts-card.review .ts-actions .btn{flex:1;height:38px;font-size:13px}
.ts-card .ts-actions{grid-column:1 / -1;display:flex;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(148,163,184,.26)}
.ts-card .ts-actions .btn{flex:1;height:36px;font-size:12.5px}
.clock-emp-hero .che-actions .rh-nav{
width:38px!important;height:38px!important;border-radius:50%!important;
background:rgba(255,255,255,.18)!important;border:1.5px solid rgba(255,255,255,.34)!important;color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px rgba(0,0,0,.14)!important;
}
.clock-emp-hero .che-actions .rh-nav:hover{background:rgba(255,255,255,.28)!important}
.emp-dropdown .ed-copy{flex:1;min-width:0;position:relative;z-index:1}
.emp-dropdown .ed-copy strong{display:block;font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.015em}
.emp-dropdown .ed-copy span{display:block;font-size:11.5px;font-weight:600;color:rgba(255,253,242,.82);margin-top:2px}
.emp-dropdown > summary .ce-chev{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:#fff;transform:rotate(180deg);transition:transform var(--t) var(--ease-spring);position:relative;z-index:1}
.emp-dropdown > summary .ce-chev svg{width:14px;height:14px}
.emp-dropdown[open] > summary .ce-chev{transform:rotate(270deg)}
.ed-row .ce-pill.amber{background:#fff0dc;color:#c46300}
.ed-row .ce-pill.red{background:#fde2e2;color:#c11616}
.ed-row .ce-pill.green{background:#dcf8dc;color:#179131}
.ed-row .ce-pill.grey{background:#ecf0eb;color:#4b5563}
.ed-row .ce-chev.open{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--ink-300);transform:rotate(180deg)}
.ed-row .ce-chev.open svg{width:13px;height:13px}
/* Day chips */
.ts-day-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0}
.ts-chip.today{border-color:rgba(204,143,98,.55);box-shadow:0 6px 14px rgba(204,143,98,.18)}
.ts-chip.today span{color:var(--clay-700)}
.ts-chip.sel{background:linear-gradient(135deg,#06461e 0%,#0e7734 100%);border-color:transparent;box-shadow:0 8px 20px rgba(14,119,52,.32)}
.ts-chip.sel span,.ts-chip.sel strong,.ts-chip.sel em{color:#fff}
/* Selected-day card */
.ts-day-card{padding:14px 14px 16px;border-radius:20px}
.ts-day-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;
position:sticky;top:8px;z-index:5;
background:linear-gradient(180deg,#fff 70%,rgba(255,255,255,0));
padding:8px 4px 10px;margin:-8px -4px 8px;border-radius:12px;
}
.ts-day-head strong{display:block;font-size:14.5px;font-weight:800;color:#111827;letter-spacing:-.015em}
.ts-day-head span{display:block;font-size:11.5px;color:var(--ink-500);font-weight:600;margin-top:2px}
/* Exports accordion */
.clock-exports{margin-top:18px;overflow:hidden;border-radius:18px;background:#fff;border:1px solid rgba(22,99,45,.10);box-shadow:0 10px 22px rgba(20,31,19,.06)}
.clock-exports summary{display:flex;align-items:center;gap:10px;list-style:none;padding:14px 16px;cursor:pointer;background:linear-gradient(180deg,#fbf8ee,#f4eedf);transition:background var(--t-fast)}
.clock-exports[open] summary{border-bottom:1px solid rgba(15,30,21,.06)}
.clock-exports summary::-webkit-details-marker{display:none}
.clock-exports summary:hover{background:#f4eedf}
.clock-exports summary strong{font-size:13.5px;font-weight:800;color:var(--forest-900);letter-spacing:-.005em}
.clock-exports summary span:not(.ce-chev){color:var(--ink-500);font-size:11.5px;font-weight:700;flex:1}
.clock-exports .ce-chev{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--ink-400);transform:rotate(180deg);transition:transform var(--t) var(--ease-spring)}
.clock-exports .ce-chev svg{width:13px;height:13px}
.clock-exports[open] .ce-chev{transform:rotate(270deg)}
.clock-exports .cx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px}
.clock-exports .cx-grid .btn{justify-content:center;height:42px}
.clock-exports .cx-note{margin:0 14px 14px;font-size:11px;color:var(--ink-400);font-style:italic;text-align:center}
.ts-review{margin-bottom:11px}
.ts-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.ts-head strong{font-size:14.5px;font-weight:700;display:block;letter-spacing:-.005em}
.ts-head span{font-size:12px;color:var(--ink-500)}
.ts-head .pill{margin-left:auto}
.ts-actions{display:flex;gap:9px}
.ts-actions .btn{flex:1}
.variance{
font-size:11.5px;font-weight:800;border-radius:10px;
padding:5px 9px;margin-top:5px;display:inline-block;letter-spacing:.005em;
}
.variance.ok{background:var(--status-ok-bg);color:var(--status-ok)}
.variance.warn{background:var(--status-warn-bg);color:var(--status-warn)}
.variance.bad{background:var(--status-bad-bg);color:var(--status-bad)}
.variance.neutral{background:var(--cream-100);color:var(--ink-500)}
.ts-row-actions .btn{height:32px;padding:0 10px;font-size:12px}
/* ──────────────────────────────────────────────────────────
10. CHAT
────────────────────────────────────────────────────────── */
.chat-shell{display:flex;gap:16px;height:calc(100dvh - 160px);min-height:420px}
@media(max-width:1023px){.chat-shell{height:calc(100dvh - 160px - var(--safe-b))}}
.chat-list{
width:340px;flex-shrink:0;
background:var(--paper);border:1px solid var(--line);
border-radius:18px;box-shadow:var(--shadow-sm);
display:flex;flex-direction:column;overflow:hidden;
}
.cl-threads{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.ct-row{
display:flex;align-items:center;gap:10px;width:100%;
padding:8px 11px;border-radius:12px;text-align:left;
transition:background var(--t-fast);
}
.ct-row:hover{background:var(--cream-100)}
.ct-row.active{background:var(--sage-100)}
.ct-row .avatar{width:36px;height:36px}
.ct-row .avatar svg{width:17px;height:17px}
.ct-name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;color:var(--ink-900);letter-spacing:-.005em}
.chat-thread{
flex:1;min-width:0;
background:var(--paper);border:1px solid var(--line);
border-radius:18px;box-shadow:var(--shadow-sm);
display:flex;flex-direction:column;overflow:hidden;
}
.chat-thread-head{
display:flex;align-items:center;gap:11px;
padding:14px 16px;border-bottom:1px solid var(--line);
background:var(--cream-50);
}
.workphoto-banner{
display:flex;flex-direction:column;gap:3px;
padding:11px 18px;
background:linear-gradient(180deg,#f3f9f1,#fbf8f1);
border-bottom:1px solid var(--line);
}
.workphoto-banner strong{
font-size:13px;font-weight:800;color:#1d4d2c;letter-spacing:-.01em;
}
.workphoto-banner span{
font-size:12px;line-height:1.4;color:#5d6b60;
}
.cth-back{display:grid;width:34px;height:34px;border-radius:10px;place-items:center;color:var(--forest-700);background:var(--cream-100);flex-shrink:0;cursor:pointer}
.cth-back svg{width:18px;height:18px}
.chat-thread-head .avatar{width:40px;height:40px}
.chat-thread-head .avatar svg{width:18px;height:18px}
.cth-info{flex:1;min-width:0}
.cth-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em}
.cth-sub{font-size:11.5px;color:var(--ink-500);margin-top:1px}
.cth-act{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--cream-100);color:var(--forest-700);flex-shrink:0}
.cth-act svg{width:18px;height:18px}
.chat-scroll{
flex:1;overflow-y:auto;
padding:18px;display:flex;flex-direction:column;gap:9px;
overscroll-behavior:contain;
background:linear-gradient(180deg,var(--cream-50),var(--paper));
}
.thread-empty,.empty-thread{text-align:center;color:var(--ink-400);font-size:14px;margin:auto;padding:40px}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:78%}
.msg.mine{margin-left:auto;flex-direction:row-reverse}
.msg-av{width:28px;flex-shrink:0}
.bubble{
background:#fff;border-radius:18px 18px 18px 5px;
padding:10px 14px;border:1px solid var(--line);
box-shadow:var(--shadow-xs);
}
.msg.mine .bubble{
background:linear-gradient(150deg,var(--forest-600),var(--forest-700));
border-color:transparent;color:#fff;
border-radius:18px 18px 5px 18px;
box-shadow:0 2px 8px rgba(30,55,30,.18);
}
.b-author{font-size:11.5px;font-weight:800;color:var(--clay-600);margin-bottom:3px;letter-spacing:.005em}
.b-text{font-size:14px;line-height:1.5;letter-spacing:-.005em}
.bubble time{font-size:10px;color:var(--ink-400);display:block;margin-top:3px;text-align:right}
.msg.mine time{color:rgba(255,255,255,.6)}
.chat-composer{display:flex;gap:9px;padding:13px;border-top:1px solid var(--line);background:var(--cream-50)}
.chat-composer .input{border-radius:23px;background:#fff}
.chat-composer textarea.input{height:46px;min-height:46px}
.csend{
width:46px;height:46px;padding:0;flex-shrink:0;border-radius:50%;
background:linear-gradient(140deg,var(--forest-600),var(--forest-800));
color:#fff;box-shadow:0 4px 12px rgba(30,55,25,.22),inset 0 1px 0 rgba(255,255,255,.15);
}
.chat-readonly{padding:16px;text-align:center;font-size:13px;color:var(--ink-500);border-top:1px solid var(--line);background:var(--cream-50);font-weight:600}
@media(max-width:1023px){
.chat-shell .chat-thread{display:none}
.chat-shell.show-thread .chat-list{display:none}
.chat-shell.show-thread .chat-thread{display:flex}
.chat-list{width:100%}
.cth-back{display:grid}
}
.nc-opt{
display:flex;align-items:center;gap:13px;width:100%;
padding:15px;border:1px solid var(--line);border-radius:14px;
margin-bottom:10px;text-align:left;
transition:background var(--t-fast),border-color var(--t-fast);
}
.nc-opt:hover{background:var(--cream-50);border-color:var(--line-strong)}
.nc-opt>svg:first-child{width:24px;height:24px;color:var(--forest-600);flex-shrink:0}
.nc-opt div{flex:1}
.nc-opt strong{display:block;font-size:14.5px;letter-spacing:-.005em}
.nc-opt span{font-size:12px;color:var(--ink-500)}
.nc-opt>svg:last-child{width:18px;height:18px;color:var(--ink-400);transform:rotate(180deg)}
.dm-list{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto}
.dm-pick{display:flex;align-items:center;gap:12px;padding:10px;border-radius:13px;text-align:left;transition:background var(--t-fast)}
.dm-pick:hover{background:var(--cream-100)}
.dmp-name{font-size:14.5px;font-weight:700;letter-spacing:-.005em}
.dmp-sub{font-size:12px;color:var(--ink-500)}
.member-pick{display:flex;flex-wrap:wrap;gap:8px}
.mp-chip{
display:flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;
border-radius:22px;border:1.5px solid var(--line);
font-size:13px;font-weight:700;color:var(--ink-700);
transition:all var(--t-fast);
}
.mp-chip .avatar{width:26px;height:26px}
.mp-chip.on{background:var(--forest-600);border-color:transparent;color:#fff}
@media(max-width:860px){}
@media(max-width:520px){}
.person-card.client{cursor:default}
.person-card .avatar.lg{margin:0 auto 12px}
/* Documents */
.doc-row{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--line)}
.doc-row:last-child{border-bottom:0}
.doc-row.sm{padding:9px 0;border:0}
.doc-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;background:var(--cream-200);color:var(--ink-500)}
.doc-ic.green{background:var(--sage-100);color:var(--forest-600)}
.doc-ic.amber{background:var(--clay-100);color:var(--clay-700)}
.doc-ic.grey{background:var(--cream-200);color:var(--ink-500)}
.doc-ic svg{width:19px;height:19px}
.doc-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em}
.doc-sub{font-size:12px;color:var(--ink-500);margin-top:1px}
.doc-row .pill{margin-left:auto}
.doc-intro{display:flex;align-items:center;gap:14px}
.doc-intro .di-ic{
width:48px;height:48px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
background:linear-gradient(135deg,var(--sage-100),var(--sage-200));
color:var(--forest-600);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.doc-intro .di-ic svg{width:22px;height:22px}
.doc-intro h3{font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-.018em}
.doc-intro p{font-size:12.5px;color:var(--ink-500);margin-top:3px;line-height:1.45}
.doc-intro .btn{flex-shrink:0;margin-left:auto}
@media(max-width:560px){.doc-intro{flex-wrap:wrap}.doc-intro .btn{margin-left:0;width:100%}}
.doc-card{
display:flex;align-items:center;gap:12px;
background:var(--paper);border:1px solid var(--line);
border-radius:14px;padding:13px 14px;
box-shadow:var(--shadow-xs);margin-bottom:9px;cursor:pointer;
transition:box-shadow var(--t-fast),transform .1s;
}
.doc-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.doc-card.need{border-color:var(--clay-300);background:linear-gradient(135deg,#fdf6ed,var(--paper))}
.dc-body{flex:1;min-width:0}
.doc-card .pill{flex-shrink:0}
.dc-del{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:transparent;color:var(--ink-400);transition:all var(--t-fast)}
.dc-del:hover{background:#fbeae8;color:var(--status-bad)}
.dc-del svg{width:15px;height:15px}
.folder-card{
display:flex;align-items:center;gap:13px;
background:var(--paper);border:1px solid var(--line);
border-radius:15px;padding:15px;
box-shadow:var(--shadow-xs);margin-bottom:9px;cursor:pointer;
transition:box-shadow var(--t-fast),transform .1s;
}
.folder-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.fc-body{flex:1;min-width:0}
.fc-name{font-size:15px;font-weight:700;letter-spacing:-.005em}
.fc-sub{font-size:12px;color:var(--ink-500);margin-top:2px}
.fc-arrow{transform:rotate(180deg);color:var(--ink-400);flex-shrink:0}
.fc-arrow svg{width:18px;height:18px;display:block}
.folder-card .pill svg{width:13px;height:13px}
.doc-drop{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
padding:28px;border:2px dashed var(--line-strong);border-radius:14px;
cursor:pointer;color:var(--ink-500);
transition:border-color var(--t-fast),background var(--t-fast);
margin-bottom:6px;background:var(--cream-50);
}
.doc-drop:hover{border-color:var(--forest-500);background:var(--sage-50);color:var(--forest-700)}
.doc-drop svg{width:28px;height:28px;color:var(--forest-500)}
.doc-drop span{font-size:13px;font-weight:600}
.detail-row{display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line)}
.detail-row:last-child{border-bottom:0}
.dr-ic{
width:40px;height:40px;border-radius:12px;
background:linear-gradient(135deg,var(--sage-100),var(--sage-200));
color:var(--forest-600);display:grid;place-items:center;flex-shrink:0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.dr-ic svg{width:18px;height:18px}
.dr-l{font-size:10.5px;font-weight:800;color:var(--ink-400);text-transform:uppercase;letter-spacing:.08em}
.dr-v{font-size:14.5px;font-weight:600;color:var(--ink-900);margin-top:2px;letter-spacing:-.005em}
.profile-modules{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.profile-modules.compact{grid-template-columns:repeat(3,1fr);margin:12px 0}
.profile-mini{padding:16px;min-height:96px;display:flex;flex-direction:column;justify-content:center}
.profile-mini span svg{width:20px;height:20px;color:var(--forest-600)}
.profile-mini strong{font-family:var(--font-display);font-size:24px;line-height:1;color:var(--forest-800);margin-top:5px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.profile-mini em{font-style:normal;color:var(--ink-500);font-weight:700;font-size:12px;margin-top:6px;letter-spacing:.005em}
.av-free{background:#3fa45e}
.av-part{background:#d8a93a}
.av-off{background:#cc4759}
.avail-list{display:flex;flex-direction:column;gap:8px}
.avail-row{
display:flex;align-items:center;gap:11px;flex-wrap:wrap;
background:var(--paper);border:1px solid var(--line);
border-radius:14px;padding:11px 14px;
box-shadow:var(--shadow-xs);
border-left:4px solid var(--sage-300);
}
.avail-row.available{border-left-color:#3fa45e}
.avail-row.partial{border-left-color:#d8a93a}
.avail-row.unavailable{border-left-color:#cc4759;opacity:.92}
.ar-date{flex-shrink:0;width:54px}
.ar-date strong{display:block;font-size:13px;font-weight:800;text-transform:uppercase;color:var(--ink-700);letter-spacing:.04em}
.ar-date span{font-size:11.5px;color:var(--ink-500)}
.ar-seg{display:flex;gap:0;background:var(--cream-100);border-radius:11px;padding:3px;flex:1;min-width:180px}
.seg{flex:1;padding:7px 4px;border-radius:8px;font-size:12px;font-weight:700;color:var(--ink-500);transition:all var(--t-fast)}
.seg.on.available{background:#3fa45e;color:#fff;box-shadow:0 1px 3px rgba(63,164,94,.32)}
.seg.on.partial{background:#d8a93a;color:#fff;box-shadow:0 1px 3px rgba(216,169,58,.34)}
.seg.on.unavailable{background:#cc4759;color:#fff;box-shadow:0 1px 3px rgba(204,71,89,.32)}
.ar-note{flex-basis:100%;height:38px;border:1.5px solid var(--line-strong);border-radius:10px;padding:0 12px;font-size:13px;background:#fff}
.ar-note:focus{outline:0;border-color:var(--forest-500);box-shadow:var(--ring-focus)}
.ar-notetxt{flex-basis:100%;font-size:12px;color:var(--ink-500);font-style:italic}
.weekly-avail{padding:6px 0}
.wa-row{display:flex;align-items:center;gap:13px;padding:11px 16px;border-bottom:1px solid var(--line)}
.wa-row:last-child{border-bottom:0}
.wa-toggle{width:44px;height:26px;border-radius:20px;background:var(--cream-200);position:relative;flex-shrink:0;transition:background var(--t)}
.wa-toggle span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform var(--t) var(--ease-spring)}
.wa-toggle.on{background:linear-gradient(140deg,var(--forest-500),var(--forest-600))}
.wa-toggle.on span{transform:translateX(18px)}
.wa-day{font-size:14px;font-weight:700;width:40px;flex-shrink:0;letter-spacing:-.005em}
.wa-times{display:flex;align-items:center;gap:8px;color:var(--ink-500)}
.wa-time{height:38px;border:1.5px solid var(--line-strong);border-radius:10px;padding:0 10px;font-size:13px;background:#fff}
.wa-time:focus{outline:0;border-color:var(--forest-500);box-shadow:var(--ring-focus)}
.wa-off{font-size:13px;color:var(--ink-400);font-style:italic}
.avail-grid-wrap{overflow-x:auto;padding:4px}
.avail-grid{width:100%;border-collapse:collapse;min-width:520px}
.avail-grid th{font-size:11px;font-weight:800;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;padding:10px 4px;text-align:center}
.avail-grid th small{display:block;font-size:12px;color:var(--ink-400);font-weight:700}
.avail-grid th:first-child{text-align:left;padding-left:12px}
.ag-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:9px 12px;white-space:nowrap;letter-spacing:-.005em}
.ag-cell{text-align:center;font-size:15px;padding:9px 4px;border-top:1px solid var(--line)}
.ag-cell.available{color:#3fa45e}
.ag-cell.partial{color:#d8a93a}
.ag-cell.unavailable{color:#cc4759}
.avail-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:14px;font-size:12px;color:var(--ink-500);font-weight:600}
.avail-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.lg.available{background:#3fa45e}
.lg.partial{background:#d8a93a}
.lg.unavailable{background:#cc4759}
.lg.booked{background:var(--forest-700)}
/* ──────────────────────────────────────────────────────────
15. MODAL & SHIFT BUILDER
────────────────────────────────────────────────────────── */
.modal-overlay{
position:fixed;inset:0;z-index:2000;
background:rgba(16,28,17,.82);
/* NOTE: no backdrop-filter here. On iOS a live blur on a fixed overlay
repaints the whole blurred layer on every touch inside the sheet, which
reads as a "bounce"/flicker. A solid dim looks nearly identical and is
completely stable. */
display:flex;align-items:flex-end;justify-content:center;
animation:fade .2s ease;padding:0;
overflow:hidden;max-height:100dvh;
overscroll-behavior:none;
touch-action:none; /* no zoom / no pan on the dim backdrop */
}
@media(min-width:600px){.modal-overlay{align-items:center;padding:20px}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
width:100%;max-width:480px;
background:var(--paper);border-radius:24px 24px 0 0;
max-height:92dvh;display:flex;flex-direction:column;
box-shadow:var(--shadow-xl);
animation:modalRise .26s cubic-bezier(.22,.61,.36,1) both;
overflow:hidden;min-height:0;
/* Composite the sheet on its own layer so tapping inside it doesn't force a
reflow/repaint of the sheet (a common iOS "bounce"). */
transform:translateZ(0);
-webkit-backface-visibility:hidden;backface-visibility:hidden;
/* lock against pinch-zoom and side-to-side drift inside the popup */
touch-action:pan-y;
overscroll-behavior:none;
-ms-touch-action:pan-y;
}
@media(min-width:600px){.modal{border-radius:24px;max-height:88vh}}
/* Gentle rise that cannot overshoot/bounce (easing stays < 1, no spring). */
@keyframes modalRise{from{transform:translate3d(0,22px,0);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}
/* Any re-render (field change, toggle, selection, background sync) must NOT
replay the entrance — that replay is the "bounce". This class is injected into
the markup before paint, so every modal in the app is covered, not just a few. */
.modal.no-open-anim{animation:none!important;transform:translate3d(0,0,0)!important;opacity:1!important}
/* Once open, the sheet is a static layer — nothing inside it animates its size. */
.modal *{backface-visibility:hidden}
/* on re-render (field change) don't replay the open animation — stops bounce/shake */
.modal.no-open-anim{animation:none!important}
.modal-head{display:flex;align-items:center;padding:22px 24px 14px}
.modal-head h2{font-family:var(--font-display);font-size:22px;font-weight:500;flex:1;letter-spacing:-.022em}
.modal-x{
width:36px;height:36px;border-radius:11px;
font-size:22px;line-height:1;color:var(--ink-500);
background:var(--cream-100);display:grid;place-items:center;
transition:all var(--t-fast);
}
.modal-x:hover{background:var(--sage-100);color:var(--forest-700)}
.modal-body{padding:0 24px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0;touch-action:pan-y}
.modal-foot{
display:flex;align-items:center;gap:10px;
padding:16px 24px calc(18px + var(--safe-b));
border-top:1px solid var(--line);margin-top:8px;
flex:0 0 auto;
}
/* footer buttons share width evenly and align on one row */
.modal-foot>.btn{flex:1 1 0;min-width:0;height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.modal-foot>.btn.btn-danger{flex:0 0 auto}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chip-select,.sv-time{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sel-chip.on{background:var(--forest-600);border-color:transparent;color:#fff;box-shadow:0 2px 6px rgba(30,55,30,.22)}
.sv-time{margin-bottom:14px;font-size:15px}
.sv-time em{font-style:normal;color:var(--clay-600);font-weight:800}
.person-hero{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ph-title{font-size:13.5px;color:var(--ink-500);margin-bottom:6px}
/* Shift modal */
.shift-modal{height:auto;max-height:min(92dvh,820px)}
/* Desktop / laptop: make the Add a shift panel much wider and taller */
@media(min-width:1024px){
.shift-modal{max-width:860px!important;max-height:94dvh!important;width:94vw}
.shift-modal .modal-body{padding:6px 28px 8px}
/* lay the builder panels out in two columns to use the width and show more at once */
.shift-modal .shift-builder{
display:grid!important;grid-template-columns:1fr 1fr;gap:14px;align-items:start;
}
/* the client/job search panel spans the full width on top */
.shift-modal .client-search-panel{grid-column:1 / -1}
.shift-modal .notes-open-panel:last-of-type{grid-column:1 / -1}
}
@media(min-width:1280px){
.shift-modal{max-width:960px!important}
}
.shift-modal .modal-body{overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.shift-modal .modal-foot{margin-top:0;box-shadow:0 -10px 24px rgba(25,40,25,.08)}
.shift-builder{display:grid;gap:8px;padding-bottom:8px}
.shift-panel{
background:linear-gradient(180deg,#fffdf8,#f6f1e6);
border:1px solid var(--line-strong);border-radius:14px;
box-shadow:var(--shadow-xs);padding:11px 12px;overflow:hidden;
}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;color:var(--forest-800);font-weight:900;font-size:13.5px}
.panel-title span{display:flex;align-items:center;gap:8px;min-width:0}
.panel-title svg{width:17px;height:17px;color:var(--forest-600)}
.panel-title small{font-size:11px;color:var(--ink-500);font-weight:800;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.client-search-panel .client-picker.is-collapsed{display:none}
.client-search-panel .client-picker{
margin-top:8px;margin-bottom:2px;max-height:300px;overflow:auto;
border:1px solid var(--line-strong);border-radius:14px;
background:var(--paper);box-shadow:var(--shadow-xs);padding:5px;
}
.client-search-panel .client-search-row{
width:100%;min-height:54px;padding:11px 12px;border-radius:11px;
background:transparent;box-shadow:none;border:0;color:var(--ink-900);
display:flex;align-items:center;cursor:pointer;text-align:left;
transition:background var(--t-fast);
}
.client-search-panel .client-search-row:hover,.client-search-panel .client-search-row:active{background:var(--cream-50)}
.client-search-panel .client-search-row .pick-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.client-search-panel .client-search-row .pick-main strong{font-size:16px;line-height:1.15;color:var(--ink-900);font-weight:800;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-search-panel .client-search-row .pick-main em{font-style:normal;font-size:13px;color:var(--ink-500);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-empty{padding:14px 12px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink-400)}
/* clean search bar with clear button */
.client-search-box{
display:flex;align-items:center;gap:9px;
height:48px;border-radius:13px;padding:0 12px;margin:0;
background:#fff;border:1.5px solid var(--line-strong);
transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.client-search-box:focus-within{border-color:var(--forest-500);box-shadow:var(--ring-focus)}
.client-search-box.has-selected{border-color:var(--forest-500);background:var(--sage-50,#eef3e7)}
.csb-ic{display:flex;flex-shrink:0}
.csb-ic svg{width:17px;height:17px;color:var(--ink-500);fill:none;stroke:currentColor;stroke-width:2}
.client-search-box.has-selected .csb-ic svg{color:var(--forest-600)}
.client-search-box input{flex:1;border:0;outline:0;background:transparent;font-size:15px;font-weight:700;color:var(--ink-900);min-width:0}
.client-search-box input::placeholder{color:var(--ink-400);font-weight:600}
.client-search-box input[readonly]{cursor:default}
.client-search-box input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.csb-clear{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:0;cursor:pointer;
display:grid;place-items:center;background:var(--forest-600);color:#fff}
.csb-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.csb-clear:active{transform:scale(.9)}
.smart-picker{display:flex;flex-direction:column;gap:0;margin:0 0 10px;padding-bottom:4px}
.picker-row{
display:grid;align-items:center;gap:10px;
padding:10px;border-radius:13px;
background:transparent;
transition:background var(--t-fast);
}
.picker-row:hover{background:var(--cream-50)}
.picker-row.selected{background:var(--sage-100)}
.pick-check{
width:24px;height:24px;border-radius:50%;
border:1.5px solid var(--sage-300);background:#fff;
color:transparent;font-size:14px;display:grid;place-items:center;line-height:1;flex-shrink:0;
}
.picker-row.selected .pick-check{background:var(--forest-600);border-color:var(--forest-600);color:#fff}
.pick-main{display:grid;gap:1px;min-width:0}
.pick-main strong{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em}
.shift-section{border-radius:14px;overflow:hidden;background:transparent}
.shift-section>summary{
display:flex;align-items:center;list-style:none;cursor:pointer;
padding:10px 12px;min-height:42px;
}
.shift-section>summary::-webkit-details-marker{display:none}
.shift-section>summary span{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--ink-900)}
.shift-section>summary svg{width:17px;height:17px;color:var(--forest-600)}
.shift-section>summary small{margin-left:auto;font-size:10.5px;color:var(--ink-500);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%}
/* Employee picker dark variant */
.employee-picker.simple-list{
gap:0;background:var(--paper);border:1px solid var(--line-strong);
border-radius:14px;padding:4px;max-height:222px;
box-shadow:none;overflow:auto;
}
.employee-picker.simple-list.is-collapsed{display:none}
.emp-dd-foot.is-collapsed{display:none}
.employee-picker.simple-list .picker-row{
display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;
min-height:48px;border:0;border-radius:10px;
background:transparent;color:var(--ink-900);
box-shadow:none;padding:8px 9px;
}
.employee-picker.simple-list .picker-row + .picker-row{border-top:1px solid var(--line);border-radius:0}
.employee-picker.simple-list .picker-row:hover{background:var(--cream-50);transform:none;box-shadow:none}
.employee-picker.simple-list .picker-row.selected{background:var(--sage-100);color:var(--forest-900);border-radius:10px}
.employee-picker.simple-list .picker-row.is-unavailable:not(.selected){opacity:.7;background:transparent}
.employee-picker.simple-list .pick-check{
width:20px;height:20px;border-radius:50%;background:#fff;
border:1.5px solid var(--sage-300);color:transparent;font-size:12px;
}
.employee-picker.simple-list .picker-row.selected .pick-check{background:var(--forest-600);color:#fff;border-color:var(--forest-600)}
.simple-emp-text{min-width:0;display:grid;gap:0}
.simple-emp-text strong{font-size:15px;line-height:1.15;color:var(--ink-900);font-weight:700;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simple-emp-text em{font-style:normal;font-size:10px;font-weight:800;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simple-emp-text em.av-off{color:var(--status-bad);background:transparent}
.simple-emp-text em.av-part{color:var(--status-warn);background:transparent}
.simple-emp-text em.av-free{color:var(--status-ok);background:transparent}
.quick-add-grid .btn{grid-column:1/-1}
.quick-add-client-details[open]>summary:after{transform:rotate(180deg)}
.notes-open-panel{padding-bottom:10px}
.notes-open-panel .field{margin-top:2px}
.notes-textarea{min-height:78px;resize:vertical;line-height:1.45}
.visibility-section select.input{font-weight:800;color:var(--forest-800)}
.vis-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.vis-opt{
position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;
padding:10px 12px;border-radius:11px;cursor:pointer;
background:#f5f7f1;border:1.5px solid rgba(60,80,60,.14);
transition:background .12s ease,border-color .12s ease,transform .1s ease;
}
.vis-opt-icon{width:22px;height:22px;border-radius:0;display:grid;place-items:center;background:transparent;color:#8a948a;flex-shrink:0}
.vis-opt-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.vis-opt-copy{display:flex;flex-direction:column;gap:0;min-width:0}
.vis-opt-copy strong{font-size:14px;font-weight:800;color:#2a342c;line-height:1.15}
.vis-opt-copy small{display:none}
.vis-opt-check{position:absolute;top:50%;right:11px;transform:translateY(-50%) scale(.7);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);color:#fff;font-size:12px;font-weight:900;opacity:0;transition:opacity .15s,transform .15s}
.vis-opt:active{transform:scale(.98)}
.vis-opt.active{
background:linear-gradient(180deg,#5c8f5f,#2f5a34);
border-color:#2f5a34;
box-shadow:0 8px 20px -8px rgba(40,80,45,.55),inset 0 1px 0 rgba(255,255,255,.18);
}
.vis-opt.active .vis-opt-icon{color:#fff}
.vis-opt.active .vis-opt-copy strong{color:#fff}
.vis-opt.active .vis-opt-check{opacity:1;transform:translateY(-50%) scale(1)}
.vis-hint{margin:9px 2px 0;font-size:12px;font-weight:600;color:var(--ink-500);line-height:1.4}
.visibility-section .co-hint{font-size:11.5px;line-height:1.4}
body.modal-open,body.modal-open #app{height:100dvh;max-height:100dvh;overflow:hidden}
html:has(body.modal-open){height:100dvh;max-height:100dvh;overflow:hidden}
/* fully pin the background page so it can't rubber-band or peek through the
modal's rounded top/bottom edges */
body.modal-open #app{position:fixed!important;inset:0!important;overflow:hidden!important;overscroll-behavior:none!important}
body.modal-open #modalHost{position:fixed;inset:0;overflow:hidden;z-index:2000;overscroll-behavior:none}
/* solid dark layer that fills the WHOLE screen behind the sheet, so the page
underneath is never visible even while the sheet bounces */
body.modal-open #modalHost::before{content:"";position:fixed;inset:0;background:rgba(16,28,17,.74);z-index:0;pointer-events:none}
/* ──────────────────────────────────────────────────────────
16. EMPLOYEE SHIFT CARDS
────────────────────────────────────────────────────────── */
.emp-shift{
position:relative;background:#fff;
border:1px solid var(--line);border-radius:18px;
padding:16px 17px;margin-bottom:11px;overflow:hidden;
--solid:#2f7d4a;--deep:#1f5e34;
box-shadow:
0 1px 2px rgba(20,30,20,.04),
0 6px 16px -8px color-mix(in srgb,var(--solid) 30%,transparent);
transition:box-shadow var(--t),transform .12s;
}
.emp-shift:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(20,30,20,.05),0 10px 24px -8px color-mix(in srgb,var(--solid) 40%,transparent)}
.emp-shift::before{content:"";position:absolute;top:0;left:0;width:80px;height:80px;background:radial-gradient(circle at top left,color-mix(in srgb,var(--solid) 22%,transparent),transparent 70%);pointer-events:none}
.emp-shift::after{content:"";position:absolute;bottom:0;right:0;width:90px;height:90px;background:radial-gradient(circle at bottom right,color-mix(in srgb,var(--solid) 16%,transparent),transparent 70%);pointer-events:none}
.emp-shift.done,.emp-shift.declined{opacity:.7}
.ec-accept:active,.ec-reject:active,.ec-start:active{transform:scale(.96)}
/* ──────────────────────────────────────────────────────────
17. TOPBAR PROFILE + MOBILE-SPECIFIC POLISH
────────────────────────────────────────────────────────── */
.top-profile{
height:44px;border-radius:14px;
display:flex;align-items:center;gap:9px;padding:0 6px 0 7px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
color:#eef3e8;font-weight:800;letter-spacing:-.005em;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transition:background var(--t-fast),transform .1s;
}
.top-profile:hover{background:rgba(255,255,255,.20)}
.top-profile:active{transform:scale(.97)}
.top-profile .avatar{box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.tp-meta{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.tp-name{font-size:13px;font-weight:800;color:#fff}
.tp-role{font-size:10px;font-weight:700;text-transform:capitalize;color:rgba(238,243,232,.7)}
.top-signout:active{transform:scale(.96)}
.ts-day-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow-xs)}
.ts-day-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.ts-day-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.payroll-mobile-simple .section-head h2{font-size:19px}
/* ──────────────────────────────────────────────────────────
18. RESPONSIVE OVERRIDES (consolidated)
────────────────────────────────────────────────────────── */
@media(max-width:1023px){
.main{min-height:100dvh}
.topbar{padding:calc(14px + var(--safe-t)) 14px 13px}
.topbar h1{font-size:21px}
.topbar .sub{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72vw}
.content{padding:14px 12px calc(108px + var(--safe-b));max-width:100%;overflow-x:hidden}
.icon-btn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.15)}
}
@media(max-width:720px){
.clock-admin-hero .rh-nav{width:40px!important;height:40px!important}
.clock-emp{border-radius:20px}
.clock-emp summary{grid-template-columns:48px minmax(0,1fr) auto auto;padding:12px 13px;gap:11px}
.clock-emp .ce-avatar{width:46px;height:46px;font-size:16px}
.clock-emp .ce-info strong{font-size:15px}
.clock-emp .ce-info em{font-size:12px}
.clock-emp .ce-pill{height:25px;font-size:10.5px;padding:0 9px}
.clock-emp .ce-stats{grid-template-columns:repeat(2,1fr);gap:7px;margin:12px 0 10px}
.clock-emp .ce-stats > div{padding:9px 6px;border-radius:12px}
.clock-emp .ce-stats b{font-size:14px}
.ts-day-row{gap:5px;grid-template-columns:repeat(7,1fr)}
.ts-day-card{padding:13px 13px 14px;border-radius:18px}
.clock-exports .cx-grid{grid-template-columns:1fr}
.payroll-toolbar .btn{width:100%;height:40px}
.profile-modules{grid-template-columns:repeat(2,1fr);gap:10px}
.profile-mini{min-height:84px;padding:13px}
.ts-row-actions .btn{flex:1}
.payroll-emp summary .pill{font-size:11px}
.variance{font-size:10.8px}
.payroll-emp.xero-emp summary .avatar{width:32px;height:32px;font-size:11px}
.payroll-emp.xero-emp summary .pill{font-size:10px;padding:4px 7px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payroll-emp-body .variance{display:block;line-height:1.3;margin-top:6px}
.payroll-emp-body .ts-row-actions .btn{min-width:0;width:100%;height:32px}
.payroll-mobile-simple .ts-day-row{gap:5px}
}
@media(max-width:640px){
.topbar{gap:9px}
.topbar-actions{gap:6px}
.tp-meta,.tp-chev{display:none}
.top-profile{padding:0;width:42px;justify-content:center}
.topbar h1{max-width:72vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sub{max-width:52vw}
/* Shift modal compact */
.shift-modal{max-width:100%;height:auto!important;max-height:calc(100dvh - 28px);border-radius:22px 22px 0 0}
.shift-modal .modal-body{padding:0 12px 4px;flex:0 1 auto}
.shift-modal .modal-head{padding:14px 16px 10px}
.shift-modal .modal-head h2{font-size:20px}
.shift-modal .modal-foot{padding:9px 12px calc(6px + (var(--safe-b) * 0.5));gap:8px;margin-top:4px}
.shift-modal .modal-foot .btn{height:38px;font-size:12.2px;border-radius:10px;padding:0 11px;min-width:100px}
.shift-builder{gap:8px}
.shift-panel{padding:11px;border-radius:16px}
.panel-title{margin-bottom:8px}
.panel-title span{font-size:13px}
.panel-title small{font-size:10.5px;max-width:42%}
.shift-section{border-radius:16px}
.shift-section>summary{padding:11px 12px;min-height:44px}
.shift-section>summary span{font-size:13px;gap:8px}
.shift-section>summary svg{width:16px;height:16px}
.shift-section>summary small{font-size:10px;max-width:40%}
.shift-modal .field{gap:5px;margin-bottom:9px}
.shift-modal .field label{font-size:11.5px;line-height:1.15}
.shift-modal .input{height:40px;border-radius:11px;padding:0 11px;font-size:13.5px;border-width:1.2px}
.shift-modal select.input{padding-right:42px;background-position:right 11px center,right 4px center;background-size:15px,30px 34px}
.shift-modal textarea.input{height:auto;min-height:82px;padding:9px 11px;font-size:13.5px}
.client-search-panel .client-picker{margin-top:6px;margin-bottom:8px;max-height:300px;border-radius:12px;padding:3px}
.client-search-panel .client-search-row{min-height:50px;padding:9px 9px;grid-template-columns:20px minmax(0,1fr);gap:7px}
.client-search-panel .client-search-row .pick-check{width:18px;height:18px;font-size:10px}
.client-search-panel .client-search-row .pick-main strong{font-size:15.5px}
.client-search-panel .client-search-row .pick-main em{font-size:12.5px}
.employee-picker.simple-list{max-height:440px;border-radius:12px;padding:3px}
.employee-picker.simple-list .picker-row{min-height:44px;padding:7px 8px;grid-template-columns:20px minmax(0,1fr);gap:8px}
.employee-picker.simple-list .pick-check{width:20px;height:20px;font-size:11px}
.simple-emp-text strong{font-size:14.5px;line-height:1.15}
.simple-emp-text em{font-size:10.5px;line-height:1.15}
.notes-open-panel{padding-bottom:10px}
.notes-textarea{min-height:86px}
.modal-foot .btn{flex:1;min-width:120px}
.modal-foot .btn-danger{flex:0 0 auto;min-width:unset}
.visibility-section .co-hint{font-size:10.5px;padding-bottom:8px}
.visibility-section select.input{font-size:13px}
}
@media(max-width:520px){
.modal-foot .btn{min-width:0;font-size:12.3px;padding:0 11px;white-space:normal;line-height:1.2}
.modal-foot{gap:8px}
}
/* ──────────────────────────────────────────────────────────
V13 MOBILE HEADER FIX — sticky header + redesigned actions
Keeps the profile, notification and logout buttons compact,
cleaner, and consistent on every page.
────────────────────────────────────────────────────────── */
.topbar{
position:sticky!important;
top:0!important;
z-index:120;
isolation:isolate;
transform:translateZ(0);
-webkit-transform:translateZ(0);
min-height:calc(78px + var(--safe-t));
}
.topbar-actions{
margin-left:auto;
display:inline-flex;
align-items:center;
gap:6px;
flex-shrink:0;
padding:5px;
border-radius:24px;
border:1px solid rgba(255,255,255,.18);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 14px 28px rgba(5,18,9,.18);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.icon-btn,.top-profile,.top-signout{
height:46px;
border-radius:50%;
border:1px solid rgba(255,255,255,.30);
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 6px 16px rgba(0,0,0,.13);
}
.icon-btn,.top-signout{
width:46px;
display:grid;
place-items:center;
padding:0;
}
.icon-btn:hover,.top-profile:hover,.top-signout:hover{
background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.09));
box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 18px rgba(0,0,0,.16);
}
.icon-btn:active,.top-profile:active,.top-signout:active{transform:scale(.96)}
.icon-btn svg,.top-signout svg{width:19px;height:19px;stroke-width:2.15}
.top-profile{
display:grid;
place-items:center;
gap:0;
width:46px;min-width:46px;
padding:0;
color:#fff;
}
.top-profile .avatar.sm{
width:38px;height:38px;
border-radius:50%;
font-size:13px;
font-weight:900;
box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(255,255,255,.16),0 5px 12px rgba(0,0,0,.18);
}
.top-profile .tp-meta{display:none!important}
.top-profile .tp-name{font-size:12.5px;line-height:1;color:#fff}
.top-profile .tp-role{font-size:9.5px;line-height:1.05;color:rgba(238,243,232,.72)}
.top-profile .tp-chev{display:none!important}
.icon-btn .dot{
top:8px;right:8px;
width:9px;height:9px;
background:#c97647;
border:2px solid #1a2d20;
}
@media(max-width:1023px){
.main{padding-top:calc(76px + var(--safe-t))}
.topbar{
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
z-index:120;
padding:calc(12px + var(--safe-t)) 14px 12px;
min-height:calc(76px + var(--safe-t));
}
.topbar h1{font-size:clamp(24px,7vw,34px);max-width:72vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sub{font-size:13px;max-width:50vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content{padding-top:16px;scroll-margin-top:calc(82px + var(--safe-t))}
}
@media(max-width:640px){
.main{padding-top:calc(72px + var(--safe-t))}
.topbar{gap:8px;padding:calc(11px + var(--safe-t)) 12px 11px;min-height:calc(72px + var(--safe-t))}
.topbar-actions{gap:4px;padding:5px;border-radius:999px}
.icon-btn,.top-signout{width:44px;height:44px;border-radius:50%}
.top-profile{height:44px;min-width:44px;width:44px;border-radius:50%;padding:0}
.top-profile .avatar.sm{width:36px;height:36px;border-radius:50%;font-size:12px}
.top-profile .tp-meta{display:none!important}
.icon-btn svg,.top-signout svg{width:18px;height:18px}
.topbar h1{max-width:70vw;font-size:clamp(23px,7.2vw,32px)}
.topbar .sub{max-width:47vw;font-size:12.5px}
}
@media(max-width:380px){
.topbar{padding-left:10px;padding-right:10px}
.topbar-actions{gap:3px;padding:3px;border-radius:18px}
.icon-btn,.top-signout,.top-profile{width:34px;height:34px;border-radius:13px;min-width:34px}
.top-profile .avatar.sm{width:26px;height:26px;border-radius:10px;font-size:9.5px}
.topbar h1{max-width:66vw;font-size:22px}
.topbar .sub{max-width:43vw;font-size:11.5px}
}
/* ──────────────────────────────────────────────────────────
V14 CLEAN MOBILE NAV + HEADER ACTION ICONS + DIRECTORIES
────────────────────────────────────────────────────────── */
.topbar-actions{
padding:5px!important;
gap:9px!important;
border:1px solid rgba(231,213,164,.42)!important;
border-radius:999px!important;
background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 26px rgba(5,18,9,.18)!important;
backdrop-filter:blur(10px)!important;
-webkit-backdrop-filter:blur(10px)!important;
}
.icon-btn,.top-profile,.top-signout{
width:42px!important;
min-width:42px!important;
height:42px!important;
border-radius:50%!important;
padding:0!important;
display:grid!important;
place-items:center!important;
overflow:visible;
background:linear-gradient(145deg,rgba(239,231,211,.16),rgba(107,132,93,.12))!important;
border:1.4px solid rgba(231,213,164,.72)!important;
color:#f7f0dc!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px rgba(0,0,0,.16)!important;
}
.top-profile{
background:radial-gradient(circle at 35% 25%,rgba(221,211,176,.30),rgba(88,123,83,.18) 52%,rgba(32,57,38,.24))!important;
}
.icon-btn{
background:radial-gradient(circle at 35% 25%,rgba(244,238,218,.20),rgba(81,108,73,.15) 55%,rgba(20,38,24,.20))!important;
}
.icon-btn:hover,.top-profile:hover,.top-signout:hover{
transform:translateY(-1px);
background:linear-gradient(145deg,rgba(244,238,218,.24),rgba(108,139,93,.18))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 20px rgba(0,0,0,.19)!important;
}
.icon-btn:active,.top-profile:active,.top-signout:active{transform:scale(.95)!important}
.top-profile .avatar.sm{
width:100%!important;height:100%!important;border-radius:50%!important;
background:transparent!important;
color:#fff7e8!important;
font-size:12px!important;font-weight:950!important;
box-shadow:none!important;
letter-spacing:.02em;
}
.top-profile .tp-meta,.top-profile .tp-name,.top-profile .tp-role,.top-signout span{display:none!important}
.icon-btn svg,.top-signout svg{width:20px!important;height:20px!important;stroke-width:2.25!important}
.icon-btn .dot{
top:2px!important;right:2px!important;width:10px!important;height:10px!important;
background:#bc7b49!important;border:2px solid #27432c!important;
box-shadow:0 0 0 2px rgba(255,247,226,.16),0 0 10px rgba(188,123,73,.55)!important;
}
@media(max-width:1023px){
.topbar{border-radius:0 0 24px 24px;box-shadow:0 14px 28px -16px rgba(8,23,12,.58)!important}
.topbar-actions{gap:7px!important}
.mtab.active{
background:linear-gradient(180deg,#506c48 0%,#365c39 56%,#223f29 100%)!important;
border-color:rgba(255,244,214,.38)!important;
box-shadow:0 10px 22px rgba(31,70,38,.34),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.mtab.active > svg{
background:rgba(246,235,207,.16)!important;
border-color:rgba(246,235,207,.18)!important;
color:#fff5da!important;
}
.mtab.active span{color:#fff5da!important}
.mtab.active::after{background:#c39a55!important;box-shadow:0 1px 6px rgba(195,154,85,.42)!important}
}
@media(max-width:640px){
.topbar-actions{gap:6px!important}
.icon-btn,.top-profile,.top-signout{width:38px!important;min-width:38px!important;height:38px!important}
.icon-btn svg,.top-signout svg{width:19px!important;height:19px!important}
.top-profile .avatar.sm{font-size:11px!important}
}
@media(max-width:380px){
.topbar-actions{gap:5px!important}
.icon-btn,.top-profile,.top-signout{width:34px!important;min-width:34px!important;height:34px!important}
.top-profile .avatar.sm{font-size:10px!important}
}
.manager-hero{
display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:15px;align-items:center;
padding:18px;border-radius:24px;overflow:hidden;
background:radial-gradient(circle at 7% 8%,rgba(180,198,158,.34),transparent 35%),linear-gradient(135deg,#fffdf7,#eee5d3)!important;
border-color:rgba(64,91,62,.14)!important;
}
.manager-hero.clients{background:radial-gradient(circle at 7% 8%,rgba(207,154,104,.30),transparent 35%),linear-gradient(135deg,#fffdf7,#eee5d3)!important}
.mh-icon{width:62px;height:62px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,var(--forest-600),var(--forest-800));color:#fff7e8;box-shadow:0 12px 24px rgba(30,56,34,.18),inset 0 1px 0 rgba(255,255,255,.18)}
.mh-icon svg{width:28px;height:28px;stroke-width:2.15}
.manager-hero.clients .mh-icon{background:linear-gradient(145deg,var(--clay-500),var(--forest-700))}
.mh-copy span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:var(--clay-600);margin-bottom:3px}
.mh-copy h2{font-family:var(--font-display);font-size:31px;line-height:1.04;font-weight:520;color:var(--forest-900);letter-spacing:-.03em}
.mh-copy p{font-size:13px;color:var(--ink-600);max-width:580px;line-height:1.4;margin-top:5px}
.directory-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.dir-stat{padding:13px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,253,247,.94),rgba(239,233,219,.94));border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.dir-stat strong{display:block;font-size:24px;line-height:1;font-weight:900;color:var(--forest-800)}
.dir-stat span{font-size:11px;font-weight:800;color:var(--ink-500);text-transform:uppercase;letter-spacing:.05em}
.directory-toolbar{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:10px;border-radius:19px;background:rgba(255,253,247,.86)!important}
.dir-search{height:43px;min-width:0;flex:1;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:14px;background:var(--cream-100);border:1px solid var(--line-strong);color:var(--forest-700)}
.dir-search svg{width:18px;height:18px;flex:0 0 auto;opacity:.76}
.dir-search input{width:100%;border:0;background:transparent;outline:0;font-weight:700;color:var(--ink-800)}
.dir-search input::placeholder{color:var(--ink-400);font-weight:700}
/* ---- v114 simplified directory toolbar (staff + clients) ---- */
.dir-toolbar-v2{
display:flex;flex-direction:column;gap:10px;align-items:stretch;
padding:12px;margin-bottom:8px;border-radius:18px;
background:rgba(255,253,247,.92)!important;
}
.dir-toolbar-v2 .dir-search{height:46px;flex:0 0 auto;width:100%;border-radius:13px}
.dir-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dir-tool{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
height:42px;padding:0 10px;border-radius:12px;
background:var(--cream-100);border:1px solid var(--line-strong);
color:var(--forest-700);font-weight:750;font-size:14px;cursor:pointer;
transition:background .12s ease,border-color .12s ease,transform .06s ease;
}
.dir-tool span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-tool svg{width:17px;height:17px;flex:0 0 17px;stroke-width:2}
.dir-tool:active{transform:scale(.97);background:#f1ede1}
.dir-tool-primary{
background:var(--forest-600);border-color:transparent;color:#fff;
box-shadow:0 2px 8px rgba(30,55,30,.18);
}
.dir-tool-primary:active{background:var(--forest-700)}
.dir-count{
margin:0 4px 12px;font-size:12.5px;font-weight:650;color:var(--ink-400);
letter-spacing:.01em;
}
.directory-list{display:grid;gap:9px}
.directory-card{
width:100%;display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:13px;text-align:left;
padding:12px 14px;border-radius:20px!important;background:rgba(255,253,247,.94)!important;
transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
button.directory-card:hover{transform:translateY(-1px);border-color:rgba(74,115,81,.24)!important;box-shadow:var(--shadow-md)!important}
.directory-card .avatar.lg{width:54px;height:54px;border-radius:19px;font-size:18px;margin:0!important}
.dir-main{min-width:0;display:grid;gap:2px}
.dir-main strong{font-size:16px;font-weight:900;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-main em{font-style:normal;font-size:12.5px;font-weight:750;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-main small{display:flex;align-items:center;gap:5px;min-width:0;font-size:11.5px;font-weight:650;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-main small svg{width:14px;height:14px;flex:0 0 auto;opacity:.75}
.dir-pills{display:flex;gap:5px;align-items:flex-end;justify-content:flex-end;flex-wrap:wrap;max-width:260px}
.dir-pills i{font-style:normal;font-size:10.5px;font-weight:900;color:var(--forest-700);background:var(--sage-100);border:1px solid rgba(74,115,81,.12);border-radius:999px;padding:5px 8px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-card-list .dir-pills i{background:var(--cream-100);color:var(--clay-700);border-color:rgba(163,90,53,.13)}
.client-card-list .dir-docpill{display:flex;align-items:center;gap:4px;background:var(--sage-100)!important;color:var(--forest-700)!important;border-color:rgba(74,115,81,.16)!important}
.client-card-list .dir-docpill svg{width:12px;height:12px}
/* ---- Client profile screen ---- */
.client-profile-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;padding:18px 18px}
.avatar.xl{width:66px;height:66px;border-radius:22px;font-size:24px;font-weight:900;display:grid;place-items:center;margin:0}
.avatar.clay{background:linear-gradient(150deg,var(--clay-400),var(--forest-700));color:#fff}
.cph-copy{min-width:0}
.cph-copy h2{font-size:23px;font-weight:900;letter-spacing:-.02em;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.cph-copy p{font-size:13px;font-weight:700;color:var(--ink-500);margin:3px 0 0}
.cph-edit{flex-shrink:0;white-space:nowrap}
.client-quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.cqa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:15px 8px;border-radius:18px;background:linear-gradient(180deg,rgba(255,253,247,.96),rgba(239,233,219,.9));border:1px solid var(--line);box-shadow:var(--shadow-xs);color:var(--forest-700);font-size:12.5px;font-weight:800;text-decoration:none;transition:.15s}
.cqa:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.cqa svg{width:22px;height:22px}
.cqa-off{opacity:.4;pointer-events:none}
.client-info-card{padding:6px 4px}
.ci-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;align-items:start;padding:13px 16px;border-bottom:1px solid var(--line)}
.ci-row:last-child{border-bottom:0}
.ci-label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--ink-500)}
.ci-label svg{width:16px;height:16px;opacity:.7}
.ci-val{font-size:14px;font-weight:650;color:var(--ink-900);word-break:break-word}
.ci-notes{align-items:start}.ci-notes .ci-val{white-space:pre-wrap}
.client-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.client-stat-row .dir-stat{text-align:center}
.client-stat-row .dir-stat strong{display:block;font-size:19px;font-weight:900;color:var(--forest-700)}
.client-stat-row .dir-stat span{font-size:10.5px;font-weight:750;color:var(--ink-500)}
.client-docs-card{padding:16px}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cd-head strong{font-size:16px;font-weight:900;color:var(--ink-900);display:block}
.cd-head em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-500)}
.cd-cat{margin-bottom:14px}
.cd-cat:last-child{margin-bottom:0}
.cd-cat-title{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--forest-600);margin-bottom:8px}
.cd-cat-title i{font-style:normal;font-size:10.5px;background:var(--sage-100);color:var(--forest-700);border-radius:999px;padding:2px 8px;font-weight:900}
.cd-file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;background:linear-gradient(180deg,rgba(255,253,247,.96),rgba(244,241,230,.9));border:1px solid var(--line);margin-bottom:8px}
.cd-file:last-child{margin-bottom:0}
.cd-file-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--sage-100);color:var(--forest-700)}
.cd-file-ic svg{width:19px;height:19px}
.cd-file-main{min-width:0}
.cd-file-main strong{display:block;font-size:14px;font-weight:800;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-file-main small{font-size:11.5px;font-weight:650;color:var(--ink-500)}
.cd-file-actions{display:flex;gap:6px;flex-shrink:0}
.cd-act{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--forest-700);display:grid;place-items:center;cursor:pointer;transition:.15s}
.cd-act:hover{background:var(--sage-50);transform:translateY(-1px)}
.cd-act svg{width:16px;height:16px}
.cd-del{color:var(--clay-600)}.cd-del:hover{background:#fbeee7}
.cd-empty{text-align:center;padding:26px 16px;color:var(--ink-400)}
.cd-empty svg{width:34px;height:34px;opacity:.5;margin-bottom:8px}
.cd-empty p{font-size:13px;font-weight:600;color:var(--ink-500);max-width:34ch;margin:0 auto}
@media(max-width:720px){
.client-profile-hero{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px}
.avatar.xl{width:56px;height:56px;border-radius:18px;font-size:20px}
.cph-copy h2{font-size:20px}
.cph-edit{grid-column:1/-1;width:100%;margin-top:4px}
.cqa{padding:13px 6px;border-radius:15px;font-size:11.5px}.cqa svg{width:20px;height:20px}
.ci-row{grid-template-columns:110px minmax(0,1fr);padding:12px 13px}
.client-docs-card{padding:13px}
}
@media(max-width:720px){
.manager-hero{grid-template-columns:48px minmax(0,1fr);padding:14px;border-radius:20px;gap:11px}
.mh-icon{width:48px;height:48px;border-radius:17px}.mh-icon svg{width:23px;height:23px}
.mh-copy h2{font-size:25px}.mh-copy p{font-size:12px;line-height:1.36}
.mh-add{grid-column:1/-1;width:100%;height:40px}
.directory-stats{gap:7px}.dir-stat{padding:10px 9px;border-radius:15px}.dir-stat strong{font-size:20px}.dir-stat span{font-size:9.5px;line-height:1.1}
.directory-toolbar{padding:8px;border-radius:17px;gap:7px}.dir-search{height:39px;border-radius:12px;padding:0 10px}.directory-toolbar .btn{height:39px;padding:0 12px}
.dir-toolbar-v2{padding:10px;gap:9px}.dir-toolbar-v2 .dir-search{height:44px;border-radius:13px}.dir-tools{gap:7px}.dir-tool{height:42px;font-size:13.5px;gap:6px}.dir-tool svg{width:16px;height:16px;flex:0 0 16px}.dir-count{font-size:12px;margin:0 4px 11px}
.directory-card{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:10px 11px;border-radius:17px!important}
.directory-card .avatar.lg{width:44px;height:44px;border-radius:16px;font-size:15px}
.dir-main strong{font-size:14.2px}.dir-main em{font-size:11.2px}.dir-main small{font-size:10.8px}
.dir-pills{grid-column:1/-1;justify-content:flex-start;max-width:none;margin-left:54px}.dir-pills i{font-size:9.5px;padding:4px 7px}
}
/* ──────────────────────────────────────────────────────────
V15 CLEAN MOBILE MENU + DIRECTORY HUB
Messages is back as the 3rd mobile item. Documents are now
accessed from Profile, while Staff + Clients live in Directory.
────────────────────────────────────────────────────────── */
/* ============================================================
DIRECTORY PAGE — crisp, professional redesign (v135)
Flat clean surfaces, a calm forest hero, two clear summary
cards, and a full-width "Quick preview" contact list with
hairline dividers instead of cramped side-by-side boxes.
============================================================ */
.directory-hub-hero{
display:grid;grid-template-columns:56px minmax(0,1fr);gap:15px;align-items:center;
padding:18px 18px;border-radius:22px!important;overflow:hidden;
background:linear-gradient(150deg,#22432e 0%,#1a3725 60%,#15301f 100%)!important;
border:1px solid rgba(255,255,255,.07)!important;
box-shadow:0 12px 28px rgba(20,42,26,.22)!important;
}
.dhh-badge{
width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
background:rgba(255,255,255,.10);color:#f3efe4;
border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.dhh-badge svg{width:26px;height:26px;stroke-width:2.1}
.dhh-copy span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:#cf9a68;margin-bottom:4px}
.dhh-copy h2{font-family:var(--font-display,"Fraunces",Georgia,serif);font-size:25px;line-height:1.05;font-weight:600;color:#fbf8f0;letter-spacing:-.01em}
.dhh-copy p{font-size:12.5px;line-height:1.4;font-weight:500;color:rgba(233,238,229,.72);margin-top:5px;max-width:620px}
.directory-hub-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.directory-hub-card{
width:100%;text-align:left;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;
padding:14px 15px;border-radius:18px!important;overflow:hidden;
background:#fffefb!important;
border:1px solid rgba(40,58,42,.10)!important;
box-shadow:0 2px 8px rgba(35,50,37,.05)!important;
transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.directory-hub-card:active{transform:scale(.99)}
@media(hover:hover){.directory-hub-card:hover{border-color:rgba(74,115,81,.30)!important;box-shadow:0 6px 16px rgba(35,50,37,.10)!important}}
.dhc-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff7e8;background:linear-gradient(150deg,var(--forest-500),var(--forest-800));box-shadow:0 4px 10px rgba(33,71,40,.18)}
.directory-hub-card.clients .dhc-icon{background:linear-gradient(150deg,var(--clay-500),var(--clay-700))}
.dhc-icon svg{width:23px;height:23px;stroke-width:2.1}
.dhc-main{min-width:0;display:grid;gap:2px}
.dhc-main strong{font-size:16px;font-weight:800;color:var(--ink-900);letter-spacing:-.01em}
.dhc-main em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-600)}
.dhc-main small{font-size:11.5px;font-weight:600;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhc-go{font-size:11.5px;font-weight:800;color:var(--forest-700);background:var(--sage-100);border:1px solid rgba(74,115,81,.16);border-radius:999px;padding:7px 14px}
.directory-hub-card.clients .dhc-go{color:var(--clay-700);background:#f6ece3;border-color:rgba(163,90,53,.16)}
.directory-action-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
/* Quick preview — full-width contact lists, hairline dividers */
.directory-preview-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
.dir-preview-card{padding:6px 16px 10px!important;border-radius:18px!important;background:#fffefb!important;border:1px solid rgba(40,58,42,.10)!important;box-shadow:0 2px 8px rgba(35,50,37,.05)!important}
.dir-preview-head{display:flex;align-items:center;justify-content:space-between;padding:12px 0 10px;margin-bottom:2px;border-bottom:1px solid rgba(40,58,42,.08)}
.dir-preview-head strong{font-size:14px;font-weight:800;color:var(--forest-800);letter-spacing:.01em}
.dir-preview-head button{font-size:11px;font-weight:800;color:var(--clay-700);padding:6px 12px;border-radius:999px;background:#f6ece3;border:1px solid rgba(163,90,53,.14)}
.dir-mini-row{width:100%;display:flex;align-items:center;gap:12px;padding:11px 4px;border-radius:0;text-align:left;border-bottom:1px solid rgba(40,58,42,.07)}
.dir-mini-row:last-child{border-bottom:0}
@media(hover:hover){.dir-mini-row:hover{background:transparent}}
.dir-mini-row b{display:block;font-size:14px;font-weight:800;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em}
.dir-mini-row em{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.dir-mini-row.client{cursor:default}
@media(max-width:1023px){
}
@media(max-width:720px){
.directory-hub-hero{grid-template-columns:52px minmax(0,1fr);gap:13px;padding:16px;border-radius:20px!important}.dhh-badge{width:52px;height:52px;border-radius:16px}.dhh-badge svg{width:24px;height:24px}.dhh-copy h2{font-size:23px}.dhh-copy p{font-size:12px;line-height:1.38}
.directory-hub-grid,.directory-preview-grid,.directory-action-row{grid-template-columns:1fr;gap:10px}.directory-hub-card{grid-template-columns:44px minmax(0,1fr) auto;padding:13px;border-radius:16px!important}.dhc-icon{width:44px;height:44px;border-radius:13px}.dhc-main strong{font-size:15.5px}.dhc-main em{font-size:12px}.dhc-main small{font-size:11px}.dhc-go{font-size:11px;padding:6px 13px}
}
@media(max-width:380px){}
/* ──────────────────────────────────────────────────────────
V16 HEADER CLEANUP — logout removed from top bar
────────────────────────────────────────────────────────── */
.topbar-actions{
gap:12px!important;
align-items:center!important;
}
.topbar-actions .top-signout{display:none!important}
.topbar-actions .top-profile,
.topbar-actions .icon-btn{
isolation:isolate;
}
.topbar-actions .top-profile{
order:1;
}
.topbar-actions .icon-btn{
order:2;
}
.topbar-actions::after{
content:"";
position:absolute;
inset:-5px -6px;
border-radius:999px;
background:linear-gradient(135deg,rgba(239,231,211,.08),rgba(111,139,93,.05));
border:1px solid rgba(239,231,211,.10);
pointer-events:none;
z-index:-1;
}
@media(max-width:1023px){
.topbar-actions{gap:10px!important;margin-right:2px!important}
.topbar-actions::after{inset:-4px -5px;border-radius:999px}
}
@media(max-width:640px){
.topbar-actions{gap:9px!important}
.topbar-actions .top-profile,.topbar-actions .icon-btn{width:40px!important;min-width:40px!important;height:40px!important}
}
@media(max-width:380px){
.topbar-actions{gap:8px!important}
.topbar-actions .top-profile,.topbar-actions .icon-btn{width:36px!important;min-width:36px!important;height:36px!important}
}
/* ============================================================
V27 Sleek Roster Card Edge + Time Range + Solid Mobile Dock
============================================================ */
.shift-card{
border-radius:18px!important;
min-height:68px!important;
background:
linear-gradient(135deg,color-mix(in srgb,var(--solid) 16%,#fff5e4) 0%,#fff8eb 48%,color-mix(in srgb,var(--solid) 12%,#e7eedf) 100%)!important;
border:1px solid color-mix(in srgb,var(--solid) 34%,rgba(42,65,42,.13))!important;
box-shadow:
0 10px 24px rgba(26,39,26,.075),
0 3px 12px -8px color-mix(in srgb,var(--solid) 80%,transparent),
inset 0 1px 0 rgba(255,255,255,.72),
inset 0 0 0 1px rgba(255,255,255,.34)!important;
}
.shift-card::before{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:18px!important;
padding:2px!important;
background:
linear-gradient(135deg,
color-mix(in srgb,var(--solid) 72%,#e9c886) 0%,
rgba(255,255,255,.72) 26%,
color-mix(in srgb,var(--deep) 56%,#b99566) 55%,
rgba(255,255,255,.55) 76%,
color-mix(in srgb,var(--solid) 66%,#d7bd8c) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
-webkit-mask-composite:xor!important;
mask-composite:exclude!important;
pointer-events:none!important;
z-index:3!important;
}
.shift-card .sc-time{
width:52px!important;
border-right:1px solid rgba(255,255,255,.20)!important;
box-shadow:inset -1px 0 0 rgba(0,0,0,.09), inset 1px 0 0 rgba(255,255,255,.18)!important;
}
.shift-card .sc-main{position:relative;z-index:2!important;background:linear-gradient(90deg,rgba(255,253,247,.44),rgba(255,253,247,.12))!important}
.shift-card .sc-row1{gap:6px!important;align-items:center!important}
.shift-card .sc-status{margin-left:0!important}
.shift-card .sc-end{display:none!important}
.wk-cell{
border-radius:13px!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,#fff8ed),#fffaf0 58%,color-mix(in srgb,var(--accent) 10%,#e9efe1))!important;
border-color:color-mix(in srgb,var(--accent) 30%,rgba(42,65,42,.13))!important;
box-shadow:0 6px 14px rgba(26,39,26,.055),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.wk-cell::before{width:5px!important;border-radius:0 10px 10px 0;background:linear-gradient(180deg,var(--accent),var(--accent-deep),color-mix(in srgb,var(--accent) 70%,#d7bd8c))!important}
.wkc-time{
display:inline-flex!important;align-items:center!important;
padding:2px 7px!important;border-radius:999px!important;
background:color-mix(in srgb,var(--accent) 13%,#fff8e8)!important;
border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(42,65,42,.10))!important;
font-size:10.9px!important;
}
@media(max-width:1023px){
/* v447: legacy 94px bottom gradient + oversized content padding removed */
.mtab.active{background:linear-gradient(180deg,#5f824f,#477046 58%,#335735)!important;border-color:rgba(232,222,198,.36)!important}
.shift-card{min-height:62px!important;margin-bottom:7px!important;border-radius:16px!important}
.shift-card::before{border-radius:16px!important;padding:1.5px!important}
.shift-card .sc-time{width:47px!important;padding:6px 2px!important}
}
@media(max-width:390px){
.shift-card .sc-time{width:44px!important}
/* v447: legacy 98px bottom fill removed */
}
/* ============================================================
V28 Employee Clock + Timesheet Polish
============================================================ */
.clock-subnav{
display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px!important;border-radius:22px!important;
background:linear-gradient(180deg,#efe7d8,#dfe9d8)!important;border:1px solid rgba(60,88,55,.16)!important;
box-shadow:0 10px 22px rgba(31,47,31,.06)!important;margin-bottom:10px!important;position:relative;z-index:2;
}
.clock-subnav button{
height:44px;border-radius:16px;border:1px solid transparent;background:rgba(255,250,236,.48);display:flex;align-items:center;justify-content:center;gap:7px;
font-weight:900;color:#334b34;font-size:12.8px;letter-spacing:-.01em;position:relative;overflow:hidden;
}
.clock-subnav button svg{width:16px;height:16px;stroke-width:2.1}.clock-subnav button em{position:absolute;right:8px;top:6px;min-width:18px;height:18px;border-radius:999px;background:#b77a3e;color:#fff8e8;font-size:10px;font-style:normal;display:grid;place-items:center}.clock-subnav button.active{background:linear-gradient(180deg,#4f754d,#264b2c)!important;color:#fff8e8!important;box-shadow:0 8px 18px rgba(35,70,39,.22),inset 0 1px 0 rgba(255,255,255,.16)}.clock-hand.h1{height:20px;transform:translate(-50%,-100%) rotate(45deg)}.clock-hand.h2{height:15px;transform:translate(-50%,-100%) rotate(145deg);background:#b17641}.active-face{width:150px;height:150px;border-radius:42px;margin:14px auto 10px;background:radial-gradient(circle at 50% 42%,#fffdf5,#deead7 64%,#bfcfb7)}.active-face::before{display:none}.active-face .ring-svg{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}.emp-shift.v28-slim-shift{position:relative;overflow:hidden;padding:9px 10px 10px!important;border-radius:18px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--solid) 20%,#fff3dd) 0%,#fff8ec 50%,color-mix(in srgb,var(--solid) 13%,#e2eadb) 100%)!important;border:1px solid color-mix(in srgb,var(--solid) 35%,rgba(39,63,39,.14))!important;box-shadow:0 9px 20px rgba(30,45,31,.065),inset 0 1px 0 rgba(255,255,255,.72)!important}.emp-shift.v28-slim-shift::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--solid),color-mix(in srgb,var(--solid) 50%,#c69a58),transparent)}.emp-shift.v28-slim-shift::after{content:"";position:absolute;right:-26px;top:-34px;width:95px;height:95px;border-radius:50%;background:color-mix(in srgb,var(--solid) 12%,transparent);pointer-events:none}.emp-shift.v28-slim-shift .es-copy{position:relative;z-index:1;min-width:0}.emp-shift.v28-slim-shift h3{font-family:var(--font-display);font-size:20px!important;line-height:1.05!important;font-weight:650!important;color:#1d2d20!important;margin:0 0 5px!important}.emp-shift.v28-slim-shift .es-loc{display:flex;align-items:center;gap:5px;font-size:12px!important;color:#667061!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.emp-shift.v28-slim-shift .es-loc svg{width:13px;height:13px;flex-shrink:0;color:var(--solid)}.emp-shift.v28-slim-shift .es-note{margin-top:7px!important;border-radius:12px!important;padding:7px 9px!important;font-size:12px!important;background:rgba(255,251,241,.68)!important;border:1px solid rgba(75,90,65,.08)!important;color:#4e564e!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.emp-shift.v28-slim-shift .es-actions{position:relative;z-index:1;display:grid!important;grid-template-columns:1fr 1fr 1.1fr!important;gap:7px!important;margin-top:8px!important;padding-top:8px!important;border-top:1px solid color-mix(in srgb,var(--solid) 15%,rgba(38,61,38,.11))!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:36px!important;border-radius:13px!important;font-size:12px!important;font-weight:950!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}.emp-shift.v28-slim-shift .ec-start{background:linear-gradient(135deg,var(--solid),var(--deep))!important;color:#fff8e8!important;box-shadow:0 8px 16px color-mix(in srgb,var(--solid) 25%,transparent)!important}.emp-shift.v28-slim-shift .ec-accept{background:#e4eedc!important;color:#355b37!important}.emp-shift.v28-slim-shift .ec-reject{background:#fff8f5!important;color:#a0443b!important;border:1px solid rgba(160,68,59,.22)!important}.clock-empty-card .btn{margin-top:8px}
.clock-timesheet-page .payroll-mobile-simple{margin-top:0!important}.clock-timesheet-page .payroll-mobile-simple .section-head{margin-top:6px!important}.locked-pill{display:inline-flex!important;align-items:center!important;gap:4px!important}.locked-pill svg{width:12px!important;height:12px!important;stroke-width:2.2}.rec-row.ts-compact.locked{background:linear-gradient(135deg,#f6f0e2,#e9efe2)!important;border-color:rgba(72,92,62,.18)!important}.rec-row.ts-compact.locked .rec-ic{background:linear-gradient(135deg,#385f3b,#213e26)!important;color:#fff8e8!important}
@media(max-width:720px){
.clock-subnav{gap:6px;padding:5px!important;border-radius:19px!important;margin-bottom:8px!important}.clock-subnav button{height:39px;border-radius:14px;font-size:11.5px}.clock-subnav button svg{width:14px;height:14px}.active-face{width:122px;height:122px;border-radius:34px;margin:10px auto 8px}.emp-shift.v28-slim-shift{padding:8px 9px 9px!important;border-radius:16px!important}.emp-shift.v28-slim-shift h3{font-size:17px!important}.emp-shift.v28-slim-shift .es-loc{font-size:11px!important}.emp-shift.v28-slim-shift .es-note{padding:6px 8px!important;font-size:11px!important;margin-top:6px!important}.emp-shift.v28-slim-shift .es-actions{gap:6px!important;margin-top:7px!important;padding-top:7px!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:31px!important;border-radius:11px!important;font-size:10.5px!important}.payroll-mobile-simple .ts-day-card{border-radius:18px!important;padding:10px!important}
}
@media(max-width:390px){.emp-shift.v28-slim-shift .es-actions{grid-template-columns:.95fr .95fr 1.05fr!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start{font-size:9.6px!important}.clock-subnav button span{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.emp-shift.v28-slim-shift h3{font-size:16px!important}}
@media(max-width:1023px){
/* v447: legacy 118px bottom gradient removed - the .wwnav bar now paints its own background */
}
/* V28b extra squeeze for employee clock cards */
@media(max-width:720px){.emp-shift.v28-slim-shift{padding:7px 8px 8px!important;border-radius:15px!important}.emp-shift.v28-slim-shift h3{font-size:15.6px!important;margin-bottom:3px!important}.emp-shift.v28-slim-shift .es-loc{font-size:10.5px!important}.emp-shift.v28-slim-shift .es-note{margin-top:5px!important;padding:5px 7px!important;font-size:10.6px!important;border-radius:10px!important}.emp-shift.v28-slim-shift .es-actions{margin-top:6px!important;padding-top:6px!important;gap:5px!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:28px!important;border-radius:10px!important;font-size:9.8px!important}.emp-shift.v28-slim-shift .ec-reject svg,.emp-shift.v28-slim-shift .ec-accept svg,.emp-shift.v28-slim-shift .ec-start svg{width:13px!important;height:13px!important}
}
/* ============================================================
V29 Timesheet Request Polish — no break, client search + add
============================================================ */
.timesheet-modal{
max-width:640px!important;
border-radius:26px!important;
background:linear-gradient(180deg,#fffdf7 0%,#f4efe4 100%)!important;
}
.timesheet-modal .modal-head{
padding:22px 24px 12px!important;
background:linear-gradient(180deg,#fffdf7,#f7f1e6)!important;
border-bottom:1px solid rgba(55,75,48,.08)!important;
}
.timesheet-modal .modal-body{padding:14px 24px 6px!important}
.timesheet-modal .modal-foot{
background:linear-gradient(180deg,rgba(247,241,230,.72),#efe8d9)!important;
border-top:1px solid rgba(55,75,48,.10)!important;
box-shadow:0 -12px 28px rgba(35,47,31,.08)!important;
}
.missed-intro{
display:grid;gap:4px;margin-bottom:12px;padding:12px 13px;border-radius:17px;
background:linear-gradient(135deg,#e5eedf,#f4e7d4);
border:1px solid rgba(67,95,61,.13);
box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}
.missed-intro strong{font-family:var(--font-display);font-size:18px;font-weight:650;color:#203525;letter-spacing:-.02em}
.missed-intro span{font-size:12.2px;line-height:1.35;color:#62705f;font-weight:650}
.ts-client-picker{display:grid;gap:8px}
.ts-client-selected{
display:grid;gap:2px;padding:9px 11px;border-radius:15px;
background:linear-gradient(135deg,#fff8ec,#e8efe1);
border:1px solid rgba(58,88,55,.14);
box-shadow:0 4px 12px rgba(35,47,31,.045),inset 0 1px 0 rgba(255,255,255,.72);
}
.ts-client-selected strong{font-size:13.5px;color:#203525;font-weight:900;line-height:1.1}
.ts-client-selected span{font-size:11.2px;color:#667061;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-client-search{
height:42px;border-radius:14px;background:#fffaf0;border:1px solid rgba(58,78,51,.15);
display:flex;align-items:center;gap:8px;padding:0 11px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.ts-client-search svg{width:16px;height:16px;color:#64755f;flex-shrink:0}.ts-client-search input{border:0;background:transparent;outline:0;min-width:0;flex:1;font-size:14px;font-weight:800;color:#243128}.ts-client-search input::placeholder{color:#8a9288}
.ts-client-results{display:grid;gap:5px;max-height:172px;overflow:auto;padding:3px;border-radius:16px;background:rgba(235,228,214,.55);border:1px solid rgba(58,78,51,.08)}
.ts-client-results.is-collapsed{display:none}
.ts-client-row{
min-height:43px;border:1px solid rgba(55,75,48,.10);border-radius:13px;background:rgba(255,253,247,.82);
display:flex;align-items:center;gap:9px;text-align:left;padding:7px 9px;color:#263128;
box-shadow:0 2px 8px rgba(36,49,40,.035);
}
.ts-client-row.selected{background:linear-gradient(135deg,#e1ecd9,#f4ead8);border-color:rgba(61,94,58,.24)}
.ts-client-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(65,92,61,.25);display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(65,92,61,.10);font-size:12px;font-weight:900;flex-shrink:0}
.ts-client-row.selected .ts-client-dot{background:linear-gradient(135deg,#4b7548,#213f26);border-color:rgba(255,255,255,.35)}
.ts-client-row strong{display:block;font-size:12.8px;font-weight:900;color:#203525;line-height:1.1}.ts-client-row small{display:block;font-size:10.8px;color:#687366;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px;margin-top:2px}
.ts-add-client-toggle{
height:36px;border-radius:13px;border:1px solid rgba(58,88,55,.12);background:linear-gradient(135deg,#e7efdf,#f4ead8);
color:#2e5432;font-size:12.2px;font-weight:900;text-align:center;
}
.ts-add-client-panel{display:none;gap:8px;padding:10px;border-radius:16px;background:linear-gradient(135deg,#fff8ec,#e8efe1);border:1px solid rgba(64,91,59,.12)}
.ts-add-client-panel.open{display:grid}
.ts-add-client-panel .btn{height:38px;border-radius:12px;font-size:12px;font-weight:900}
.timesheet-modal .row2{gap:10px!important}
.timesheet-modal .field{margin-bottom:10px!important;gap:5px!important}
.timesheet-modal .field label{font-size:12.4px!important;color:#354437!important}
.timesheet-modal .input{height:44px!important;border-radius:14px!important;background:#fffaf0!important;border-color:rgba(54,74,48,.14)!important;font-size:14px!important;padding:0 12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important}
.timesheet-modal textarea.input{height:auto!important;min-height:76px!important;padding:10px 12px!important;line-height:1.35!important}
@media(max-width:720px){
.timesheet-modal{max-height:calc(100dvh - 28px)!important;border-radius:24px 24px 0 0!important}
.timesheet-modal .modal-head{padding:15px 16px 9px!important}.timesheet-modal .modal-head h2{font-size:21px!important}
.timesheet-modal .modal-body{padding:10px 14px 5px!important}.timesheet-modal .modal-foot{padding:9px 14px calc(11px + var(--safe-b))!important;gap:8px!important}.timesheet-modal .modal-foot .btn{height:40px!important;border-radius:13px!important;font-size:13px!important;min-width:0!important;flex:1!important}
.missed-intro{padding:10px 11px!important;border-radius:15px!important;margin-bottom:9px!important}.missed-intro strong{font-size:16px!important}.missed-intro span{font-size:11px!important}
.timesheet-modal .input{height:40px!important;border-radius:12px!important;font-size:13.3px!important;padding:0 10px!important}.timesheet-modal textarea.input{min-height:66px!important;padding:9px 10px!important;font-size:13.2px!important}
.timesheet-modal .field{margin-bottom:8px!important}.timesheet-modal .field label{font-size:11px!important}
.ts-client-selected{padding:8px 10px!important;border-radius:13px!important}.ts-client-selected strong{font-size:12.7px!important}.ts-client-selected span{font-size:10.4px!important}
.ts-client-search{height:39px!important;border-radius:13px!important}.ts-client-search input{font-size:13.2px!important}.ts-client-results{max-height:136px!important;border-radius:14px!important}.ts-client-row{min-height:38px!important;padding:6px 8px!important;border-radius:12px!important}.ts-client-row strong{font-size:12px!important}.ts-client-row small{font-size:10px!important}.ts-add-client-toggle{height:33px!important;border-radius:12px!important;font-size:11.5px!important}.ts-add-client-panel{padding:8px!important;border-radius:14px!important}.ts-add-client-panel .row2{gap:7px!important}.ts-add-client-panel .btn{height:35px!important}
}
@media(max-width:390px){.timesheet-modal .row2{grid-template-columns:1fr 1fr!important;gap:7px!important}.timesheet-modal .modal-head h2{font-size:19px!important}.ts-client-row small{max-width:240px!important}.timesheet-modal .modal-foot .btn{font-size:11.5px!important}}
/* V29 animation stability: keep modals solid and readable */
.modal-overlay{animation:none!important;opacity:1!important}
.timesheet-modal{animation:none!important;opacity:1!important;transform:none!important;background:linear-gradient(180deg,#fffdf7 0%,#f4efe4 100%)!important}
/* v34 — restore isolated Next Shift layout only */
.employee-dashboard > .section-head.next-title{
display:flex!important;
align-items:center!important;
margin-top:18px!important;
margin-bottom:10px!important;
clear:both!important;
}
.employee-dashboard > .section-head.next-title h2{
margin:0!important;
}
@media(max-width:720px){
}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* FINAL FIX: remove old thick green bottom spacer layer above the circular menu */
@media (max-width:1023px){
html, body{background:var(--bg)!important;}
.app-shell::before,.app-shell::after,.content::before,.content::after{display:none!important;content:none!important;}
.content{padding-bottom:96px!important;}
body.chat-thread-open .content{padding-bottom:0!important;}
.mtab.active{transform:none!important;}
}
@media (max-width:380px){
}
/* ---- inline style 2 ---- */
/* V23: timesheet layout kept from V21, menu kept from V16 */
.payroll-mobile-simple .section-head h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em}.payroll-mobile-simple .section-head{margin-bottom:0}.payroll-mobile-simple .section-head h2{font-size:22px!important;color:var(--forest-900)}.payroll-mobile-simple .section-head .count{background:linear-gradient(180deg,#e5eede,#d8e5cf);color:#2f5b3b;border-color:rgba(75,112,83,.18)}.payroll-mobile-simple .section-head .rh-nav{background:linear-gradient(180deg,#fffdf8,#ede7d8)!important;border-color:rgba(73,91,64,.14)!important}.payroll-mobile-simple .ts-day-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.payroll-mobile-simple .ts-chip.sel{background:linear-gradient(180deg,var(--forest-600),var(--forest-800))!important}.ts-day-card{border-radius:20px!important;background:linear-gradient(180deg,#fffdf8,#f5f0e7)!important;border-color:rgba(73,91,64,.12)!important;box-shadow:0 8px 20px rgba(35,47,31,.05)!important}.ts-day-card .ts-day-head strong{color:var(--forest-900)}
@media(max-width:560px){.payroll-mobile-simple .ts-day-row{gap:5px}}
@media(max-width:390px){}.acs-week-nav .rh-nav{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);color:#fff}.acs-stat.warn strong{color:var(--clay-600)}.acs-employee-picker summary span:not(.ce-chev){display:block;font-size:12px;color:var(--ink-500);font-weight:650;margin-top:2px}.acs-employee-picker[open] .ce-chev{transform:rotate(270deg)}.acs-emp-btn.active{background:linear-gradient(180deg,#e5ecdd,#d9e5d1);border-color:rgba(74,115,81,.24)}.acs-emp-btn b.warn{color:var(--clay-600)}.acs-emp-nav .btn{height:34px;border-radius:12px;font-size:11.5px;padding:0 9px}.acs-emp-nav .btn:last-child svg{transform:rotate(180deg)}.acs-day.sel{background:linear-gradient(180deg,var(--forest-600),var(--forest-800));border-color:rgba(255,255,255,.14);box-shadow:0 9px 18px rgba(41,73,47,.18)}.acs-day.sel span,.acs-day.sel strong,.acs-day.sel em{color:#fffaf0}.acs-day.today:not(.sel){background:linear-gradient(180deg,#fffaf4,#f6e3ce);border-color:rgba(189,112,72,.24)}.acs-record-list{display:grid;gap:9px}.admin-clock-simple .ts-row-actions .btn{height:31px;border-radius:10px;font-size:10.5px;padding:0 8px}.admin-clock-simple .clock-exports{margin-top:2px!important}
@media(max-width:560px){.admin-clock-simple .rec-row.ts-compact .pill{grid-column:2;justify-self:start;margin-top:6px}}
@media(max-width:430px){.acs-week-nav .rh-nav{width:34px!important;height:34px!important;border-radius:12px!important}.acs-employee-picker summary span:not(.ce-chev){font-size:10.5px!important}.acs-selected-head .avatar{width:34px!important;height:34px}.acs-emp-nav .btn{height:30px!important;font-size:10px!important;padding:0 8px!important}}
/* ============================================================
V27 Sleek Roster Card Edge + Time Range + Solid Mobile Dock
============================================================ */
.shift-card{
border-radius:18px!important;
min-height:68px!important;
background:
linear-gradient(135deg,color-mix(in srgb,var(--solid) 16%,#fff5e4) 0%,#fff8eb 48%,color-mix(in srgb,var(--solid) 12%,#e7eedf) 100%)!important;
border:1px solid color-mix(in srgb,var(--solid) 34%,rgba(42,65,42,.13))!important;
box-shadow:
0 10px 24px rgba(26,39,26,.075),
0 3px 12px -8px color-mix(in srgb,var(--solid) 80%,transparent),
inset 0 1px 0 rgba(255,255,255,.72),
inset 0 0 0 1px rgba(255,255,255,.34)!important;
}
.shift-card::before{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:18px!important;
padding:2px!important;
background:
linear-gradient(135deg,
color-mix(in srgb,var(--solid) 72%,#e9c886) 0%,
rgba(255,255,255,.72) 26%,
color-mix(in srgb,var(--deep) 56%,#b99566) 55%,
rgba(255,255,255,.55) 76%,
color-mix(in srgb,var(--solid) 66%,#d7bd8c) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
-webkit-mask-composite:xor!important;
mask-composite:exclude!important;
pointer-events:none!important;
z-index:3!important;
}
.shift-card .sc-time{
width:52px!important;
border-right:1px solid rgba(255,255,255,.20)!important;
box-shadow:inset -1px 0 0 rgba(0,0,0,.09), inset 1px 0 0 rgba(255,255,255,.18)!important;
}
.shift-card .sc-main{position:relative;z-index:2!important;background:linear-gradient(90deg,rgba(255,253,247,.44),rgba(255,253,247,.12))!important}
.shift-card .sc-row1{gap:6px!important;align-items:center!important}
.shift-card .sc-status{margin-left:0!important}
.shift-card .sc-end{display:none!important}
.wk-cell{
border-radius:13px!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,#fff8ed),#fffaf0 58%,color-mix(in srgb,var(--accent) 10%,#e9efe1))!important;
border-color:color-mix(in srgb,var(--accent) 30%,rgba(42,65,42,.13))!important;
box-shadow:0 6px 14px rgba(26,39,26,.055),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.wk-cell::before{width:5px!important;border-radius:0 10px 10px 0;background:linear-gradient(180deg,var(--accent),var(--accent-deep),color-mix(in srgb,var(--accent) 70%,#d7bd8c))!important}
.wkc-time{
display:inline-flex!important;align-items:center!important;
padding:2px 7px!important;border-radius:999px!important;
background:color-mix(in srgb,var(--accent) 13%,#fff8e8)!important;
border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(42,65,42,.10))!important;
font-size:10.5px!important;
}
@media(max-width:1023px){
/* v447: legacy 94px bottom gradient + oversized content padding removed */
.mtab.active{background:linear-gradient(180deg,#5f824f,#477046 58%,#335735)!important;border-color:rgba(232,222,198,.36)!important}
.shift-card{min-height:62px!important;margin-bottom:7px!important;border-radius:16px!important}
.shift-card::before{border-radius:16px!important;padding:1.5px!important}
.shift-card .sc-time{width:47px!important;padding:6px 2px!important}
}
@media(max-width:390px){
.shift-card .sc-time{width:44px!important}
/* v447: legacy 98px bottom fill removed */
}
/* ============================================================
V28 Employee Clock + Timesheet Polish
============================================================ */
.clock-subnav{
display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px!important;border-radius:22px!important;
background:linear-gradient(180deg,#efe7d8,#dfe9d8)!important;border:1px solid rgba(60,88,55,.16)!important;
box-shadow:0 10px 22px rgba(31,47,31,.06)!important;margin-bottom:10px!important;position:relative;z-index:2;
}
.clock-subnav button{
height:44px;border-radius:16px;border:1px solid transparent;background:rgba(255,250,236,.48);display:flex;align-items:center;justify-content:center;gap:7px;
font-weight:900;color:#334b34;font-size:12.8px;letter-spacing:-.01em;position:relative;overflow:hidden;
}
.clock-subnav button svg{width:16px;height:16px;stroke-width:2.1}.clock-subnav button em{position:absolute;right:8px;top:6px;min-width:18px;height:18px;border-radius:999px;background:#b77a3e;color:#fff8e8;font-size:10px;font-style:normal;display:grid;place-items:center}.clock-subnav button.active{background:linear-gradient(180deg,#4f754d,#264b2c)!important;color:#fff8e8!important;box-shadow:0 8px 18px rgba(35,70,39,.22),inset 0 1px 0 rgba(255,255,255,.16)}.clock-hand.h1{height:20px;transform:translate(-50%,-100%) rotate(45deg)}.clock-hand.h2{height:15px;transform:translate(-50%,-100%) rotate(145deg);background:#b17641}.active-face{width:150px;height:150px;border-radius:42px;margin:14px auto 10px;background:radial-gradient(circle at 50% 42%,#fffdf5,#deead7 64%,#bfcfb7)}.active-face::before{display:none}.active-face .ring-svg{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}.emp-shift.v28-slim-shift{position:relative;overflow:hidden;padding:9px 10px 10px!important;border-radius:18px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--solid) 20%,#fff3dd) 0%,#fff8ec 50%,color-mix(in srgb,var(--solid) 13%,#e2eadb) 100%)!important;border:1px solid color-mix(in srgb,var(--solid) 35%,rgba(39,63,39,.14))!important;box-shadow:0 9px 20px rgba(30,45,31,.065),inset 0 1px 0 rgba(255,255,255,.72)!important}.emp-shift.v28-slim-shift::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--solid),color-mix(in srgb,var(--solid) 50%,#c69a58),transparent)}.emp-shift.v28-slim-shift::after{content:"";position:absolute;right:-26px;top:-34px;width:95px;height:95px;border-radius:50%;background:color-mix(in srgb,var(--solid) 12%,transparent);pointer-events:none}.emp-shift.v28-slim-shift .es-copy{position:relative;z-index:1;min-width:0}.emp-shift.v28-slim-shift h3{font-family:var(--font-display);font-size:20px!important;line-height:1.05!important;font-weight:650!important;color:#1d2d20!important;margin:0 0 5px!important}.emp-shift.v28-slim-shift .es-loc{display:flex;align-items:center;gap:5px;font-size:12px!important;color:#667061!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.emp-shift.v28-slim-shift .es-loc svg{width:13px;height:13px;flex-shrink:0;color:var(--solid)}.emp-shift.v28-slim-shift .es-note{margin-top:7px!important;border-radius:12px!important;padding:7px 9px!important;font-size:12px!important;background:rgba(255,251,241,.68)!important;border:1px solid rgba(75,90,65,.08)!important;color:#4e564e!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.emp-shift.v28-slim-shift .es-actions{position:relative;z-index:1;display:grid!important;grid-template-columns:1fr 1fr 1.1fr!important;gap:7px!important;margin-top:8px!important;padding-top:8px!important;border-top:1px solid color-mix(in srgb,var(--solid) 15%,rgba(38,61,38,.11))!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:36px!important;border-radius:13px!important;font-size:12px!important;font-weight:950!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}.emp-shift.v28-slim-shift .ec-start{background:linear-gradient(135deg,var(--solid),var(--deep))!important;color:#fff8e8!important;box-shadow:0 8px 16px color-mix(in srgb,var(--solid) 25%,transparent)!important}.emp-shift.v28-slim-shift .ec-accept{background:#e4eedc!important;color:#355b37!important}.emp-shift.v28-slim-shift .ec-reject{background:#fff8f5!important;color:#a0443b!important;border:1px solid rgba(160,68,59,.22)!important}.clock-empty-card .btn{margin-top:8px}
.clock-timesheet-page .payroll-mobile-simple{margin-top:0!important}.clock-timesheet-page .payroll-mobile-simple .section-head{margin-top:6px!important}.locked-pill{display:inline-flex!important;align-items:center!important;gap:4px!important}.locked-pill svg{width:12px!important;height:12px!important;stroke-width:2.2}.rec-row.ts-compact.locked{background:linear-gradient(135deg,#f6f0e2,#e9efe2)!important;border-color:rgba(72,92,62,.18)!important}.rec-row.ts-compact.locked .rec-ic{background:linear-gradient(135deg,#385f3b,#213e26)!important;color:#fff8e8!important}
@media(max-width:720px){
.clock-subnav{gap:6px;padding:5px!important;border-radius:19px!important;margin-bottom:8px!important}.clock-subnav button{height:39px;border-radius:14px;font-size:11.5px}.clock-subnav button svg{width:14px;height:14px}.active-face{width:122px;height:122px;border-radius:34px;margin:10px auto 8px}.emp-shift.v28-slim-shift{padding:8px 9px 9px!important;border-radius:16px!important}.emp-shift.v28-slim-shift h3{font-size:17px!important}.emp-shift.v28-slim-shift .es-loc{font-size:11px!important}.emp-shift.v28-slim-shift .es-note{padding:6px 8px!important;font-size:11px!important;margin-top:6px!important}.emp-shift.v28-slim-shift .es-actions{gap:6px!important;margin-top:7px!important;padding-top:7px!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:31px!important;border-radius:11px!important;font-size:10.5px!important}.payroll-mobile-simple .ts-day-card{border-radius:18px!important;padding:10px!important}
}
@media(max-width:390px){.emp-shift.v28-slim-shift .es-actions{grid-template-columns:.95fr .95fr 1.05fr!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start{font-size:9.6px!important}.clock-subnav button span{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.emp-shift.v28-slim-shift h3{font-size:16px!important}}
@media(max-width:1023px){
/* v447: legacy 118px bottom gradient removed - the .wwnav bar now paints its own background */
}
/* V28b extra squeeze for employee clock cards */
@media(max-width:720px){.emp-shift.v28-slim-shift{padding:7px 8px 8px!important;border-radius:15px!important}.emp-shift.v28-slim-shift h3{font-size:15.6px!important;margin-bottom:3px!important}.emp-shift.v28-slim-shift .es-loc{font-size:10.5px!important}.emp-shift.v28-slim-shift .es-note{margin-top:5px!important;padding:5px 7px!important;font-size:10.6px!important;border-radius:10px!important}.emp-shift.v28-slim-shift .es-actions{margin-top:6px!important;padding-top:6px!important;gap:5px!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:28px!important;border-radius:10px!important;font-size:9.8px!important}.emp-shift.v28-slim-shift .ec-reject svg,.emp-shift.v28-slim-shift .ec-accept svg,.emp-shift.v28-slim-shift .ec-start svg{width:13px!important;height:13px!important}
}
/* ============================================================
V29 Timesheet Request Polish — no break, client search + add
============================================================ */
.timesheet-modal{
max-width:640px!important;
border-radius:26px!important;
background:linear-gradient(180deg,#fffdf7 0%,#f4efe4 100%)!important;
}
.timesheet-modal .modal-head{
padding:22px 24px 12px!important;
background:linear-gradient(180deg,#fffdf7,#f7f1e6)!important;
border-bottom:1px solid rgba(55,75,48,.08)!important;
}
.timesheet-modal .modal-body{padding:14px 24px 6px!important}
.timesheet-modal .modal-foot{
background:linear-gradient(180deg,rgba(247,241,230,.72),#efe8d9)!important;
border-top:1px solid rgba(55,75,48,.10)!important;
box-shadow:0 -12px 28px rgba(35,47,31,.08)!important;
}
.missed-intro{
display:grid;gap:4px;margin-bottom:12px;padding:12px 13px;border-radius:17px;
background:linear-gradient(135deg,#e5eedf,#f4e7d4);
border:1px solid rgba(67,95,61,.13);
box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}
.missed-intro strong{font-family:var(--font-display);font-size:18px;font-weight:650;color:#203525;letter-spacing:-.02em}
.missed-intro span{font-size:12.2px;line-height:1.35;color:#62705f;font-weight:650}
.ts-client-picker{display:grid;gap:8px}
.ts-client-selected{
display:grid;gap:2px;padding:9px 11px;border-radius:15px;
background:linear-gradient(135deg,#fff8ec,#e8efe1);
border:1px solid rgba(58,88,55,.14);
box-shadow:0 4px 12px rgba(35,47,31,.045),inset 0 1px 0 rgba(255,255,255,.72);
}
.ts-client-selected strong{font-size:13.5px;color:#203525;font-weight:900;line-height:1.1}
.ts-client-selected span{font-size:11.2px;color:#667061;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-client-search{
height:42px;border-radius:14px;background:#fffaf0;border:1px solid rgba(58,78,51,.15);
display:flex;align-items:center;gap:8px;padding:0 11px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.ts-client-search svg{width:16px;height:16px;color:#64755f;flex-shrink:0}.ts-client-search input{border:0;background:transparent;outline:0;min-width:0;flex:1;font-size:14px;font-weight:800;color:#243128}.ts-client-search input::placeholder{color:#8a9288}
.ts-client-results{display:grid;gap:5px;max-height:172px;overflow:auto;padding:3px;border-radius:16px;background:rgba(235,228,214,.55);border:1px solid rgba(58,78,51,.08)}
.ts-client-results.is-collapsed{display:none}
.ts-client-row{
min-height:43px;border:1px solid rgba(55,75,48,.10);border-radius:13px;background:rgba(255,253,247,.82);
display:flex;align-items:center;gap:9px;text-align:left;padding:7px 9px;color:#263128;
box-shadow:0 2px 8px rgba(36,49,40,.035);
}
.ts-client-row.selected{background:linear-gradient(135deg,#e1ecd9,#f4ead8);border-color:rgba(61,94,58,.24)}
.ts-client-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(65,92,61,.25);display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(65,92,61,.10);font-size:12px;font-weight:900;flex-shrink:0}
.ts-client-row.selected .ts-client-dot{background:linear-gradient(135deg,#4b7548,#213f26);border-color:rgba(255,255,255,.35)}
.ts-client-row strong{display:block;font-size:12.8px;font-weight:900;color:#203525;line-height:1.1}.ts-client-row small{display:block;font-size:10.8px;color:#687366;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px;margin-top:2px}
.ts-add-client-toggle{
height:36px;border-radius:13px;border:1px solid rgba(58,88,55,.12);background:linear-gradient(135deg,#e7efdf,#f4ead8);
color:#2e5432;font-size:12.2px;font-weight:900;text-align:center;
}
.ts-add-client-panel{display:none;gap:8px;padding:10px;border-radius:16px;background:linear-gradient(135deg,#fff8ec,#e8efe1);border:1px solid rgba(64,91,59,.12)}
.ts-add-client-panel.open{display:grid}
.ts-add-client-panel .btn{height:38px;border-radius:12px;font-size:12px;font-weight:900}
.timesheet-modal .row2{gap:10px!important}
.timesheet-modal .field{margin-bottom:10px!important;gap:5px!important}
.timesheet-modal .field label{font-size:11.8px!important;color:#354437!important}
.timesheet-modal .input{height:44px!important;border-radius:14px!important;background:#fffaf0!important;border-color:rgba(54,74,48,.14)!important;font-size:14px!important;padding:0 12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important}
.timesheet-modal textarea.input{height:auto!important;min-height:76px!important;padding:10px 12px!important;line-height:1.35!important}
@media(max-width:720px){
.timesheet-modal{max-height:calc(100dvh - 28px)!important;border-radius:24px 24px 0 0!important}
.timesheet-modal .modal-head{padding:15px 16px 9px!important}.timesheet-modal .modal-head h2{font-size:21px!important}
.timesheet-modal .modal-body{padding:10px 14px 5px!important}.timesheet-modal .modal-foot{padding:9px 14px calc(11px + var(--safe-b))!important;gap:8px!important}.timesheet-modal .modal-foot .btn{height:40px!important;border-radius:13px!important;font-size:12.4px!important;min-width:0!important;flex:1!important}
.missed-intro{padding:10px 11px!important;border-radius:15px!important;margin-bottom:9px!important}.missed-intro strong{font-size:16px!important}.missed-intro span{font-size:11px!important}
.timesheet-modal .input{height:40px!important;border-radius:12px!important;font-size:13.3px!important;padding:0 10px!important}.timesheet-modal textarea.input{min-height:66px!important;padding:9px 10px!important;font-size:13.2px!important}
.timesheet-modal .field{margin-bottom:8px!important}.timesheet-modal .field label{font-size:11px!important}
.ts-client-selected{padding:8px 10px!important;border-radius:13px!important}.ts-client-selected strong{font-size:12.7px!important}.ts-client-selected span{font-size:10.4px!important}
.ts-client-search{height:39px!important;border-radius:13px!important}.ts-client-search input{font-size:13.2px!important}.ts-client-results{max-height:136px!important;border-radius:14px!important}.ts-client-row{min-height:38px!important;padding:6px 8px!important;border-radius:12px!important}.ts-client-row strong{font-size:12px!important}.ts-client-row small{font-size:10px!important}.ts-add-client-toggle{height:33px!important;border-radius:12px!important;font-size:11.5px!important}.ts-add-client-panel{padding:8px!important;border-radius:14px!important}.ts-add-client-panel .row2{gap:7px!important}.ts-add-client-panel .btn{height:35px!important}
}
@media(max-width:390px){.timesheet-modal .row2{grid-template-columns:1fr 1fr!important;gap:7px!important}.timesheet-modal .modal-head h2{font-size:19px!important}.ts-client-row small{max-width:240px!important}.timesheet-modal .modal-foot .btn{font-size:11.5px!important}}
/* V29 animation stability: keep modals solid and readable */
.modal-overlay{animation:none!important;opacity:1!important}
.timesheet-modal{animation:none!important;opacity:1!important;transform:none!important;background:linear-gradient(180deg,#fffdf7 0%,#f4efe4 100%)!important}
/* v34 — restore isolated Next Shift layout only */
.employee-dashboard > .section-head.next-title{
display:flex!important;
align-items:center!important;
margin-top:18px!important;
margin-bottom:10px!important;
clear:both!important;
}
.employee-dashboard > .section-head.next-title h2{
margin:0!important;
}
@media(max-width:720px){
}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* ---- inline style 3 ---- */
/* V24 Compact Workspace Polish — slimmer homepage, roster, messages, clock, availability and profile cards */
:root{--v24-tight-shadow:0 5px 14px rgba(35,47,31,.045)}
/* smoother app scrolling */
.content,.chat-scroll,.chat-list,.cl-threads,.avail-grid-wrap,.employee-picker.simple-list{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Homepage cards and updates — reduce vertical weight so the roster appears earlier */
.stat-grid{gap:7px!important}
.stat{padding:8px 10px!important;border-radius:13px!important;box-shadow:0 1px 4px rgba(35,47,31,.035)!important;min-height:64px!important}
.stat::after{width:42px!important;height:42px!important;right:-16px!important;top:-18px!important;opacity:.38!important}
.stat-v{font-size:20px!important}
.stat-l{font-size:10.8px!important;margin-top:4px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-s{font-size:9.5px!important;margin-top:1px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section-head{margin:10px 0 10px!important}
.section-head h2{font-size:19px!important}
/* Roster — tighter week header, day chips and shift cards */
.roster-head{gap:8px!important}.rh-nav{width:31px!important;height:31px!important;border-radius:9px!important}.rh-nav svg{width:14px!important;height:14px!important}.rh-label strong{font-size:13.5px!important}.rh-label span{font-size:10.2px!important}
.day-row{gap:4px!important;margin-top:8px!important}
.shift-card{border-radius:12px!important;margin-bottom:6px!important;min-height:72px!important;box-shadow:0 1px 3px rgba(20,30,20,.035),0 5px 14px -10px color-mix(in srgb,var(--solid) 45%,transparent)!important}
.wk-col{border-radius:13px!important;min-height:300px!important}.wk-colhead{padding:8px 3px!important}.wk-dow{font-size:9px!important}.wk-num{font-size:16px!important}.wk-cells{gap:5px!important;padding:6px!important}.wk-cell{padding:7px 7px 7px 11px!important;border-radius:10px!important}.wkc-time{font-size:9.5px!important}.wkc-name{font-size:11.5px!important}.wkc-dur{font-size:8.5px!important;padding:1px 6px!important}.wkc-status{font-size:7.6px!important;padding:1px 5px!important}
/* Messages — more professional, stable scrolling and cleaner mobile thread */
.chat-shell{gap:12px!important;min-height:0!important}.chat-list,.chat-thread{border-radius:20px!important;box-shadow:0 10px 24px rgba(35,47,31,.055)!important;background:rgba(255,253,247,.96)!important;overflow:hidden!important}.cl-threads{padding:6px!important;gap:3px!important}.ct-row{padding:9px!important;border-radius:14px!important;gap:9px!important}.ct-row .avatar{width:34px!important;height:34px!important;border-radius:12px!important}.ct-name{font-size:13px!important}.chat-thread-head{padding:10px 12px!important;min-height:58px!important;background:linear-gradient(180deg,#fffdf8,#f4efe4)!important}.chat-thread-head .avatar{width:36px!important;height:36px!important;border-radius:13px!important}.cth-name{font-size:13.5px!important}.cth-sub{font-size:10.8px!important}.chat-scroll{padding:12px 11px!important;gap:8px!important;background:linear-gradient(180deg,#f6f2e9 0%,#fffdf8 100%)!important}.msg{gap:7px!important}.msg-av .avatar{width:26px!important;height:26px!important}.bubble{padding:8px 10px!important;border-radius:14px!important;max-width:min(78%,520px)!important;box-shadow:0 4px 14px rgba(35,47,31,.05)!important}.mine .bubble{border-bottom-right-radius:5px!important}.msg:not(.mine) .bubble{border-bottom-left-radius:5px!important}.b-author{font-size:10.5px!important}.b-text{font-size:12.5px!important;line-height:1.35!important}.bubble time{font-size:9px!important;margin-top:3px!important}.chat-composer{padding:9px!important;gap:7px!important}.chat-composer .input{height:40px!important;border-radius:20px!important;font-size:14px!important}.chat-composer .csend{width:40px!important;height:40px!important;border-radius:15px!important;padding:0!important}.clock-hero.idle{gap:12px!important}
/* Availability — slimmer cards */
.doc-intro.card-pad{padding:13px!important;border-radius:18px!important}.doc-intro h3{font-size:17px!important}.doc-intro p{font-size:12px!important;line-height:1.35!important}.di-ic{width:42px!important;height:42px!important;border-radius:14px!important}.di-ic svg{width:20px!important;height:20px!important}.avail-list{gap:6px!important}.avail-row{padding:8px 10px!important;border-radius:12px!important;gap:8px!important;border-left-width:3px!important}.ar-date{width:45px!important}.ar-date strong{font-size:11.3px!important}.ar-date span{font-size:9.8px!important}.ar-seg{min-width:150px!important;border-radius:9px!important;padding:2px!important}.seg{padding:5px 3px!important;border-radius:7px!important;font-size:10.8px!important}.ar-note{height:32px!important;border-radius:9px!important;font-size:12px!important}.weekly-avail{padding:2px 0!important}.wa-row{padding:8px 12px!important;gap:9px!important}.wa-toggle{width:38px!important;height:22px!important}.wa-toggle span{width:16px!important;height:16px!important}.wa-toggle.on span{transform:translateX(16px)!important}.wa-day{font-size:12.5px!important;width:34px!important}.wa-time{height:32px!important;border-radius:9px!important;font-size:11.5px!important}.wa-off{font-size:11.5px!important}
/* Profile — slimmer cards/rows */
.account-hero.card-pad{padding:13px!important;border-radius:18px!important;gap:12px!important}.account-hero .avatar.lg{width:50px!important;height:50px!important;border-radius:17px!important}.profile-modules{gap:7px!important;margin-top:9px!important}.profile-mini{min-height:62px!important;padding:9px 10px!important;border-radius:14px!important}.profile-mini span svg{width:16px!important;height:16px!important}.profile-mini strong{font-size:18px!important;margin-top:3px!important}.profile-mini em{font-size:9.8px!important;margin-top:2px!important;line-height:1.1}.detail-row{padding:9px 12px!important;gap:9px!important}.dr-ic{width:32px!important;height:32px!important;border-radius:10px!important}.dr-ic svg{width:15px!important;height:15px!important}.dr-l{font-size:10.3px!important}.dr-v{font-size:12.2px!important}
@media(max-width:720px){
.content{padding:10px 9px calc(74px + var(--safe-b))!important}
.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}.stat{padding:7px 4px!important;border-radius:12px!important;min-height:54px!important;text-align:left}.stat-v{font-size:16px!important}.stat-l{font-size:8.7px!important;line-height:1.1!important}.stat-s{display:none!important}.stat::after{width:34px!important;height:34px!important}
.section-head{margin:9px 0 7px!important}.section-head h2{font-size:17px!important}.section-head .count{font-size:10.5px!important}
.roster-head{gap:6px!important}.day-row{gap:3px!important}.shift-card{margin-bottom:5px!important;min-height:63px!important}
.chat-shell{height:calc(100dvh - 270px - var(--safe-b))!important;min-height:0!important;gap:0!important}.chat-list,.chat-thread{border-radius:18px!important}.chat-scroll{padding:10px 9px!important}.bubble{max-width:86%!important}.chat-composer{position:sticky!important;bottom:0!important}.ct-row{padding:8px!important}.chat-thread-head{padding:8px 10px!important}
.doc-intro.card-pad{padding:11px!important;gap:10px!important}.di-ic{width:38px!important;height:38px!important}.avail-row{padding:7px 9px!important}.ar-seg{flex-basis:calc(100% - 54px)!important;min-width:0!important}.seg{font-size:10.2px!important}.wa-row{padding:7px 10px!important}
.account-hero.card-pad{padding:11px!important}.profile-modules{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}.profile-mini{min-height:56px!important;padding:7px 4px!important;text-align:center;align-items:center}.profile-mini span svg{width:14px!important;height:14px!important}.profile-mini strong{font-size:15px!important}.profile-mini em{font-size:8px!important}.detail-row{padding:8px 10px!important}
}
@media(max-width:390px){.stat-v{font-size:14.5px!important}.stat-l{font-size:8px!important}.profile-mini{min-height:48px!important}}
/* ============================================================
V27 Sleek Roster Card Edge + Time Range + Solid Mobile Dock
============================================================ */
.shift-card{
border-radius:18px!important;
min-height:68px!important;
background:
linear-gradient(135deg,color-mix(in srgb,var(--solid) 16%,#fff5e4) 0%,#fff8eb 48%,color-mix(in srgb,var(--solid) 12%,#e7eedf) 100%)!important;
border:1px solid color-mix(in srgb,var(--solid) 34%,rgba(42,65,42,.13))!important;
box-shadow:
0 10px 24px rgba(26,39,26,.075),
0 3px 12px -8px color-mix(in srgb,var(--solid) 80%,transparent),
inset 0 1px 0 rgba(255,255,255,.72),
inset 0 0 0 1px rgba(255,255,255,.34)!important;
}
.shift-card::before{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:18px!important;
padding:2px!important;
background:
linear-gradient(135deg,
color-mix(in srgb,var(--solid) 72%,#e9c886) 0%,
rgba(255,255,255,.72) 26%,
color-mix(in srgb,var(--deep) 56%,#b99566) 55%,
rgba(255,255,255,.55) 76%,
color-mix(in srgb,var(--solid) 66%,#d7bd8c) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
-webkit-mask-composite:xor!important;
mask-composite:exclude!important;
pointer-events:none!important;
z-index:3!important;
}
.shift-card .sc-time{
width:52px!important;
border-right:1px solid rgba(255,255,255,.20)!important;
box-shadow:inset -1px 0 0 rgba(0,0,0,.09), inset 1px 0 0 rgba(255,255,255,.18)!important;
}
.shift-card .sc-main{position:relative;z-index:2!important;background:linear-gradient(90deg,rgba(255,253,247,.44),rgba(255,253,247,.12))!important}
.shift-card .sc-row1{gap:6px!important;align-items:center!important}
.shift-card .sc-status{margin-left:0!important}
.shift-card .sc-end{display:none!important}
.wk-cell{
border-radius:13px!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,#fff8ed),#fffaf0 58%,color-mix(in srgb,var(--accent) 10%,#e9efe1))!important;
border-color:color-mix(in srgb,var(--accent) 30%,rgba(42,65,42,.13))!important;
box-shadow:0 6px 14px rgba(26,39,26,.055),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.wk-cell::before{width:5px!important;border-radius:0 10px 10px 0;background:linear-gradient(180deg,var(--accent),var(--accent-deep),color-mix(in srgb,var(--accent) 70%,#d7bd8c))!important}
.wkc-time{
display:inline-flex!important;align-items:center!important;
padding:2px 7px!important;border-radius:999px!important;
background:color-mix(in srgb,var(--accent) 13%,#fff8e8)!important;
border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(42,65,42,.10))!important;
font-size:10.5px!important;
}
@media(max-width:1023px){
/* v447: legacy 94px bottom gradient + oversized content padding removed */
.mtab.active{background:linear-gradient(180deg,#5f824f,#477046 58%,#335735)!important;border-color:rgba(232,222,198,.36)!important}
.shift-card{min-height:62px!important;margin-bottom:7px!important;border-radius:16px!important}
.shift-card::before{border-radius:16px!important;padding:1.5px!important}
.shift-card .sc-time{width:47px!important;padding:6px 2px!important}
}
@media(max-width:390px){
.shift-card .sc-time{width:44px!important}
/* v447: legacy 98px bottom fill removed */
}
/* ============================================================
V28 Employee Clock + Timesheet Polish
============================================================ */
.clock-subnav{
display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px!important;border-radius:22px!important;
background:linear-gradient(180deg,#efe7d8,#dfe9d8)!important;border:1px solid rgba(60,88,55,.16)!important;
box-shadow:0 10px 22px rgba(31,47,31,.06)!important;margin-bottom:10px!important;position:relative;z-index:2;
}
.clock-subnav button{
height:44px;border-radius:16px;border:1px solid transparent;background:rgba(255,250,236,.48);display:flex;align-items:center;justify-content:center;gap:7px;
font-weight:900;color:#334b34;font-size:12.8px;letter-spacing:-.01em;position:relative;overflow:hidden;
}
.clock-subnav button svg{width:16px;height:16px;stroke-width:2.1}.clock-subnav button em{position:absolute;right:8px;top:6px;min-width:18px;height:18px;border-radius:999px;background:#b77a3e;color:#fff8e8;font-size:10px;font-style:normal;display:grid;place-items:center}.clock-subnav button.active{background:linear-gradient(180deg,#4f754d,#264b2c)!important;color:#fff8e8!important;box-shadow:0 8px 18px rgba(35,70,39,.22),inset 0 1px 0 rgba(255,255,255,.16)}.clock-hand.h1{height:20px;transform:translate(-50%,-100%) rotate(45deg)}.clock-hand.h2{height:15px;transform:translate(-50%,-100%) rotate(145deg);background:#b17641}.active-face{width:150px;height:150px;border-radius:42px;margin:14px auto 10px;background:radial-gradient(circle at 50% 42%,#fffdf5,#deead7 64%,#bfcfb7)}.active-face::before{display:none}.active-face .ring-svg{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}.emp-shift.v28-slim-shift{position:relative;overflow:hidden;padding:9px 10px 10px!important;border-radius:18px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--solid) 20%,#fff3dd) 0%,#fff8ec 50%,color-mix(in srgb,var(--solid) 13%,#e2eadb) 100%)!important;border:1px solid color-mix(in srgb,var(--solid) 35%,rgba(39,63,39,.14))!important;box-shadow:0 9px 20px rgba(30,45,31,.065),inset 0 1px 0 rgba(255,255,255,.72)!important}.emp-shift.v28-slim-shift::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--solid),color-mix(in srgb,var(--solid) 50%,#c69a58),transparent)}.emp-shift.v28-slim-shift::after{content:"";position:absolute;right:-26px;top:-34px;width:95px;height:95px;border-radius:50%;background:color-mix(in srgb,var(--solid) 12%,transparent);pointer-events:none}.emp-shift.v28-slim-shift .es-copy{position:relative;z-index:1;min-width:0}.emp-shift.v28-slim-shift h3{font-family:var(--font-display);font-size:20px!important;line-height:1.05!important;font-weight:650!important;color:#1d2d20!important;margin:0 0 5px!important}.emp-shift.v28-slim-shift .es-loc{display:flex;align-items:center;gap:5px;font-size:12px!important;color:#667061!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.emp-shift.v28-slim-shift .es-loc svg{width:13px;height:13px;flex-shrink:0;color:var(--solid)}.emp-shift.v28-slim-shift .es-note{margin-top:7px!important;border-radius:12px!important;padding:7px 9px!important;font-size:12px!important;background:rgba(255,251,241,.68)!important;border:1px solid rgba(75,90,65,.08)!important;color:#4e564e!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.emp-shift.v28-slim-shift .es-actions{position:relative;z-index:1;display:grid!important;grid-template-columns:1fr 1fr 1.1fr!important;gap:7px!important;margin-top:8px!important;padding-top:8px!important;border-top:1px solid color-mix(in srgb,var(--solid) 15%,rgba(38,61,38,.11))!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:36px!important;border-radius:13px!important;font-size:12px!important;font-weight:950!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}.emp-shift.v28-slim-shift .ec-start{background:linear-gradient(135deg,var(--solid),var(--deep))!important;color:#fff8e8!important;box-shadow:0 8px 16px color-mix(in srgb,var(--solid) 25%,transparent)!important}.emp-shift.v28-slim-shift .ec-accept{background:#e4eedc!important;color:#355b37!important}.emp-shift.v28-slim-shift .ec-reject{background:#fff8f5!important;color:#a0443b!important;border:1px solid rgba(160,68,59,.22)!important}.clock-empty-card .btn{margin-top:8px}
.clock-timesheet-page .payroll-mobile-simple{margin-top:0!important}.clock-timesheet-page .payroll-mobile-simple .section-head{margin-top:6px!important}.locked-pill{display:inline-flex!important;align-items:center!important;gap:4px!important}.locked-pill svg{width:12px!important;height:12px!important;stroke-width:2.2}.rec-row.ts-compact.locked{background:linear-gradient(135deg,#f6f0e2,#e9efe2)!important;border-color:rgba(72,92,62,.18)!important}.rec-row.ts-compact.locked .rec-ic{background:linear-gradient(135deg,#385f3b,#213e26)!important;color:#fff8e8!important}
@media(max-width:720px){
.clock-subnav{gap:6px;padding:5px!important;border-radius:19px!important;margin-bottom:8px!important}.clock-subnav button{height:39px;border-radius:14px;font-size:11.5px}.clock-subnav button svg{width:14px;height:14px}.active-face{width:122px;height:122px;border-radius:34px;margin:10px auto 8px}.emp-shift.v28-slim-shift{padding:8px 9px 9px!important;border-radius:16px!important}.emp-shift.v28-slim-shift h3{font-size:17px!important}.emp-shift.v28-slim-shift .es-loc{font-size:11px!important}.emp-shift.v28-slim-shift .es-note{padding:6px 8px!important;font-size:11px!important;margin-top:6px!important}.emp-shift.v28-slim-shift .es-actions{gap:6px!important;margin-top:7px!important;padding-top:7px!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:31px!important;border-radius:11px!important;font-size:10.5px!important}.payroll-mobile-simple .ts-day-card{border-radius:18px!important;padding:10px!important}
}
@media(max-width:390px){.emp-shift.v28-slim-shift .es-actions{grid-template-columns:.95fr .95fr 1.05fr!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start{font-size:9.6px!important}.clock-subnav button span{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.emp-shift.v28-slim-shift h3{font-size:16px!important}}
@media(max-width:1023px){
/* v447: legacy 118px bottom gradient removed - the .wwnav bar now paints its own background */
}
/* V28b extra squeeze for employee clock cards */
@media(max-width:720px){.emp-shift.v28-slim-shift{padding:7px 8px 8px!important;border-radius:15px!important}.emp-shift.v28-slim-shift h3{font-size:15.6px!important;margin-bottom:3px!important}.emp-shift.v28-slim-shift .es-loc{font-size:10.5px!important}.emp-shift.v28-slim-shift .es-note{margin-top:5px!important;padding:5px 7px!important;font-size:10.6px!important;border-radius:10px!important}.emp-shift.v28-slim-shift .es-actions{margin-top:6px!important;padding-top:6px!important;gap:5px!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:28px!important;border-radius:10px!important;font-size:9.8px!important}.emp-shift.v28-slim-shift .ec-reject svg,.emp-shift.v28-slim-shift .ec-accept svg,.emp-shift.v28-slim-shift .ec-start svg{width:13px!important;height:13px!important}
}
/* ============================================================
V29 Timesheet Request Polish — no break, client search + add
============================================================ */
.timesheet-modal{
max-width:640px!important;
border-radius:26px!important;
background:linear-gradient(180deg,#fffdf7 0%,#f4efe4 100%)!important;
}
.timesheet-modal .modal-head{
padding:22px 24px 12px!important;
background:linear-gradient(180deg,#fffdf7,#f7f1e6)!important;
border-bottom:1px solid rgba(55,75,48,.08)!important;
}
.timesheet-modal .modal-body{padding:14px 24px 6px!important}
.timesheet-modal .modal-foot{
background:linear-gradient(180deg,rgba(247,241,230,.72),#efe8d9)!important;
border-top:1px solid rgba(55,75,48,.10)!important;
box-shadow:0 -12px 28px rgba(35,47,31,.08)!important;
}
.missed-intro{
display:grid;gap:4px;margin-bottom:12px;padding:12px 13px;border-radius:17px;
background:linear-gradient(135deg,#e5eedf,#f4e7d4);
border:1px solid rgba(67,95,61,.13);
box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}
.missed-intro strong{font-family:var(--font-display);font-size:18px;font-weight:650;color:#203525;letter-spacing:-.02em}
.missed-intro span{font-size:12.2px;line-height:1.35;color:#62705f;font-weight:650}
.ts-client-picker{display:grid;gap:8px}
.ts-client-selected{
display:grid;gap:2px;padding:9px 11px;border-radius:15px;
background:linear-gradient(135deg,#fff8ec,#e8efe1);
border:1px solid rgba(58,88,55,.14);
box-shadow:0 4px 12px rgba(35,47,31,.045),inset 0 1px 0 rgba(255,255,255,.72);
}
.ts-client-selected strong{font-size:13.5px;color:#203525;font-weight:900;line-height:1.1}
.ts-client-selected span{font-size:11.2px;color:#667061;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-client-search{
height:42px;border-radius:14px;background:#fffaf0;border:1px solid rgba(58,78,51,.15);
display:flex;align-items:center;gap:8px;padding:0 11px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.ts-client-search svg{width:16px;height:16px;color:#64755f;flex-shrink:0}.ts-client-search input{border:0;background:transparent;outline:0;min-width:0;flex:1;font-size:14px;font-weight:800;color:#243128}.ts-client-search input::placeholder{color:#8a9288}
.ts-client-results{display:grid;gap:5px;max-height:172px;overflow:auto;padding:3px;border-radius:16px;background:rgba(235,228,214,.55);border:1px solid rgba(58,78,51,.08)}
.ts-client-results.is-collapsed{display:none}
.ts-client-row{
min-height:43px;border:1px solid rgba(55,75,48,.10);border-radius:13px;background:rgba(255,253,247,.82);
display:flex;align-items:center;gap:9px;text-align:left;padding:7px 9px;color:#263128;
box-shadow:0 2px 8px rgba(36,49,40,.035);
}
.ts-client-row.selected{background:linear-gradient(135deg,#e1ecd9,#f4ead8);border-color:rgba(61,94,58,.24)}
.ts-client-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(65,92,61,.25);display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(65,92,61,.10);font-size:12px;font-weight:900;flex-shrink:0}
.ts-client-row.selected .ts-client-dot{background:linear-gradient(135deg,#4b7548,#213f26);border-color:rgba(255,255,255,.35)}
.ts-client-row strong{display:block;font-size:12.8px;font-weight:900;color:#203525;line-height:1.1}.ts-client-row small{display:block;font-size:10.8px;color:#687366;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px;margin-top:2px}
.ts-add-client-toggle{
height:36px;border-radius:13px;border:1px solid rgba(58,88,55,.12);background:linear-gradient(135deg,#e7efdf,#f4ead8);
color:#2e5432;font-size:12.2px;font-weight:900;text-align:center;
}
.ts-add-client-panel{display:none;gap:8px;padding:10px;border-radius:16px;background:linear-gradient(135deg,#fff8ec,#e8efe1);border:1px solid rgba(64,91,59,.12)}
.ts-add-client-panel.open{display:grid}
.ts-add-client-panel .btn{height:38px;border-radius:12px;font-size:12px;font-weight:900}
.timesheet-modal .row2{gap:10px!important}
.timesheet-modal .field{margin-bottom:10px!important;gap:5px!important}
.timesheet-modal .field label{font-size:11.8px!important;color:#354437!important}
.timesheet-modal .input{height:44px!important;border-radius:14px!important;background:#fffaf0!important;border-color:rgba(54,74,48,.14)!important;font-size:14px!important;padding:0 12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important}
.timesheet-modal textarea.input{height:auto!important;min-height:76px!important;padding:10px 12px!important;line-height:1.35!important}
@media(max-width:720px){
.timesheet-modal{max-height:calc(100dvh - 28px)!important;border-radius:24px 24px 0 0!important}
.timesheet-modal .modal-head{padding:15px 16px 9px!important}.timesheet-modal .modal-head h2{font-size:21px!important}
.timesheet-modal .modal-body{padding:10px 14px 5px!important}.timesheet-modal .modal-foot{padding:9px 14px calc(11px + var(--safe-b))!important;gap:8px!important}.timesheet-modal .modal-foot .btn{height:40px!important;border-radius:13px!important;font-size:12.4px!important;min-width:0!important;flex:1!important}
.missed-intro{padding:10px 11px!important;border-radius:15px!important;margin-bottom:9px!important}.missed-intro strong{font-size:16px!important}.missed-intro span{font-size:11px!important}
.timesheet-modal .input{height:40px!important;border-radius:12px!important;font-size:13.3px!important;padding:0 10px!important}.timesheet-modal textarea.input{min-height:66px!important;padding:9px 10px!important;font-size:13.2px!important}
.timesheet-modal .field{margin-bottom:8px!important}.timesheet-modal .field label{font-size:11px!important}
.ts-client-selected{padding:8px 10px!important;border-radius:13px!important}.ts-client-selected strong{font-size:12.7px!important}.ts-client-selected span{font-size:10.4px!important}
.ts-client-search{height:39px!important;border-radius:13px!important}.ts-client-search input{font-size:13.2px!important}.ts-client-results{max-height:136px!important;border-radius:14px!important}.ts-client-row{min-height:38px!important;padding:6px 8px!important;border-radius:12px!important}.ts-client-row strong{font-size:12px!important}.ts-client-row small{font-size:10px!important}.ts-add-client-toggle{height:33px!important;border-radius:12px!important;font-size:11.5px!important}.ts-add-client-panel{padding:8px!important;border-radius:14px!important}.ts-add-client-panel .row2{gap:7px!important}.ts-add-client-panel .btn{height:35px!important}
}
@media(max-width:390px){.timesheet-modal .row2{grid-template-columns:1fr 1fr!important;gap:7px!important}.timesheet-modal .modal-head h2{font-size:19px!important}.ts-client-row small{max-width:240px!important}.timesheet-modal .modal-foot .btn{font-size:11.5px!important}}
/* V29 animation stability: keep modals solid and readable */
.modal-overlay{animation:none!important;opacity:1!important}
.timesheet-modal{animation:none!important;opacity:1!important;transform:none!important;background:linear-gradient(180deg,#fffdf7 0%,#f4efe4 100%)!important}
/* v34 — restore isolated Next Shift layout only */
.employee-dashboard > .section-head.next-title{
display:flex!important;
align-items:center!important;
margin-top:18px!important;
margin-bottom:10px!important;
clear:both!important;
}
.employee-dashboard > .section-head.next-title h2{
margin:0!important;
}
@media(max-width:720px){
}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* ---- inline style 4 ---- */
/* V25 — restore Next Shift, earth-tone mobile shell, professional messages and colourful slim roster cards */
:root{
--earth-menu-1:#122315;
--earth-menu-2:#203d27;
--earth-menu-3:#526342;
--earth-warm:#d7c2a1;
--earth-cream:#f2ecdf;
--earth-card:#f7f1e5;
--earth-moss:#dfe9d7;
}
@media(max-width:1023px){
body{background:linear-gradient(180deg,#e6ece1 0%,#dfe7d9 100%)!important}
.shell{background:
radial-gradient(ellipse 62% 32% at 10% 0%,rgba(126,154,112,.28),transparent 62%),
radial-gradient(ellipse 58% 34% at 100% 5%,rgba(183,139,96,.18),transparent 62%),
linear-gradient(180deg,#eaf0e4 0%,#dfe8d8 100%)!important;}
.main::after{
content:"";position:fixed;left:0;right:0;bottom:0;height:calc(106px + var(--safe-b));
z-index:58;pointer-events:none;
background:linear-gradient(180deg,rgba(224,233,218,0) 0%,rgba(224,233,218,.94) 20%,#dfe8d9 58%,#d6e1d1 100%);
}
.content{padding-bottom:calc(126px + var(--safe-b))!important}
.mtab.active{
background:linear-gradient(180deg,#4f754d 0%,#3a613c 58%,#2c4d30 100%)!important;
border-color:rgba(232,222,198,.30)!important;
box-shadow:0 10px 20px rgba(11,41,20,.34),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.mtab.active > svg{background:rgba(255,250,236,.16)!important;color:#fff8e8!important;border-color:rgba(255,250,236,.20)!important}
.mtab.active span{color:#fff8e8!important}
.mtab.active::after{background:#d9c28d!important;box-shadow:0 0 8px rgba(217,194,141,.48)!important}
}
.home-dashboard .stat-grid.home-stats{gap:8px!important}
.home-dashboard .stat{
overflow:hidden;border:1px solid rgba(73,91,64,.12)!important;
background:linear-gradient(145deg,#f7f0df 0%,#e7eee0 100%)!important;
box-shadow:0 8px 20px rgba(35,47,31,.06),inset 0 1px 0 rgba(255,255,255,.60)!important;
}
.home-dashboard .stat.sage{background:linear-gradient(145deg,#e2ecd9 0%,#cfdcc6 100%)!important}
.home-dashboard .stat.clay{background:linear-gradient(145deg,#f0dfcc 0%,#ead1b7 100%)!important}
.home-dashboard .stat-v{color:#18291b!important;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.home-dashboard .stat-l{color:#344535!important}.home-dashboard .stat-s{color:#687062!important}
/* professional message centre */
.chat-shell{border-radius:24px!important}.chat-list,.chat-thread{background:#f8f1e4!important;border:1px solid rgba(54,78,50,.12)!important;box-shadow:0 14px 34px rgba(30,45,29,.08)!important}.cl-head,.chat-thread-head{background:linear-gradient(180deg,#203a27,#142417)!important;color:#fff8e8!important;border-bottom:1px solid rgba(255,255,255,.10)!important}.cl-head h2,.cth-name{color:#fff8e8!important}.cth-sub{color:rgba(255,248,232,.72)!important}.cl-new,.cth-back,.cth-act{background:rgba(255,255,255,.10)!important;color:#fff8e8!important;border:1px solid rgba(255,255,255,.13)!important}.cl-threads{background:linear-gradient(180deg,#f2eadb,#e8efe0)!important}.ct-row{background:rgba(255,253,247,.72)!important;border:1px solid rgba(64,86,58,.10)!important;box-shadow:0 3px 10px rgba(37,52,34,.035)!important}.ct-row.active{background:linear-gradient(135deg,#dce9d4,#f2e4cf)!important;border-color:rgba(63,107,62,.22)!important}.ct-name{color:#1f3424!important}.chat-scroll{background:linear-gradient(180deg,#e8efe1 0%,#f3ecdc 100%)!important}.bubble{background:#fffaf0!important;border:1px solid rgba(60,82,55,.10)!important;color:#263029!important}.msg.mine .bubble{background:linear-gradient(135deg,#365f3a,#214126)!important;color:#fff8e8!important;border-color:rgba(255,255,255,.10)!important}.msg.mine .bubble time{color:rgba(255,248,232,.70)!important}.b-author{color:#a6653c!important}.chat-composer{background:linear-gradient(180deg,#efe7d8,#e3ebdd)!important;border-top:1px solid rgba(49,75,48,.13)!important}.chat-composer .input{background:#fffaf0!important;border-color:rgba(49,75,48,.16)!important}.chat-composer .csend{background:linear-gradient(135deg,#446b42,#1d3d24)!important;color:#fff8e8!important}
@media(max-width:720px){.home-dashboard .stat-grid.home-stats{gap:6px!important}.home-dashboard .stat{min-height:52px!important;padding:7px 6px!important;border-radius:14px!important}.home-dashboard .stat-v{font-size:16px!important}.home-dashboard .stat-l{font-size:8.8px!important}.section-head.next-title{margin-top:10px!important}.priority-next-shift .pill{height:22px!important;font-size:10px!important}
.chat-shell{height:calc(100dvh - 188px - var(--safe-b))!important;border-radius:20px!important}.chat-list,.chat-thread{border-radius:20px!important}.ct-row{padding:10px!important;border-radius:16px!important}.chat-thread-head{min-height:54px!important;padding:9px 10px!important}.chat-scroll{padding:11px 10px!important}.bubble{padding:9px 11px!important;border-radius:16px!important}.b-text{font-size:13px!important}.chat-composer{padding:9px 10px calc(9px + max(0px,var(--safe-b)))!important}.chat-composer .input{height:42px!important}.chat-composer .csend{width:42px!important;height:42px!important}
}
@media(max-width:390px){}
/* ============================================================
V27 Sleek Roster Card Edge + Time Range + Solid Mobile Dock
============================================================ */
.shift-card{
border-radius:18px!important;
min-height:68px!important;
background:
linear-gradient(135deg,color-mix(in srgb,var(--solid) 16%,#fff5e4) 0%,#fff8eb 48%,color-mix(in srgb,var(--solid) 12%,#e7eedf) 100%)!important;
border:1px solid color-mix(in srgb,var(--solid) 34%,rgba(42,65,42,.13))!important;
box-shadow:
0 10px 24px rgba(26,39,26,.075),
0 3px 12px -8px color-mix(in srgb,var(--solid) 80%,transparent),
inset 0 1px 0 rgba(255,255,255,.72),
inset 0 0 0 1px rgba(255,255,255,.34)!important;
}
.shift-card::before{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:18px!important;
padding:2px!important;
background:
linear-gradient(135deg,
color-mix(in srgb,var(--solid) 72%,#e9c886) 0%,
rgba(255,255,255,.72) 26%,
color-mix(in srgb,var(--deep) 56%,#b99566) 55%,
rgba(255,255,255,.55) 76%,
color-mix(in srgb,var(--solid) 66%,#d7bd8c) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
-webkit-mask-composite:xor!important;
mask-composite:exclude!important;
pointer-events:none!important;
z-index:3!important;
}
.shift-card .sc-time{
width:52px!important;
border-right:1px solid rgba(255,255,255,.20)!important;
box-shadow:inset -1px 0 0 rgba(0,0,0,.09), inset 1px 0 0 rgba(255,255,255,.18)!important;
}
.shift-card .sc-main{position:relative;z-index:2!important;background:linear-gradient(90deg,rgba(255,253,247,.44),rgba(255,253,247,.12))!important}
.shift-card .sc-row1{gap:6px!important;align-items:center!important}
.shift-card .sc-status{margin-left:0!important}
.shift-card .sc-end{display:none!important}
.wk-cell{
border-radius:13px!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,#fff8ed),#fffaf0 58%,color-mix(in srgb,var(--accent) 10%,#e9efe1))!important;
border-color:color-mix(in srgb,var(--accent) 30%,rgba(42,65,42,.13))!important;
box-shadow:0 6px 14px rgba(26,39,26,.055),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.wk-cell::before{width:5px!important;border-radius:0 10px 10px 0;background:linear-gradient(180deg,var(--accent),var(--accent-deep),color-mix(in srgb,var(--accent) 70%,#d7bd8c))!important}
.wkc-time{
display:inline-flex!important;align-items:center!important;
padding:2px 7px!important;border-radius:999px!important;
background:color-mix(in srgb,var(--accent) 13%,#fff8e8)!important;
border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(42,65,42,.10))!important;
font-size:10.5px!important;
}
@media(max-width:1023px){
/* v447: legacy 94px bottom gradient + oversized content padding removed */
.mtab.active{background:linear-gradient(180deg,#5f824f,#477046 58%,#335735)!important;border-color:rgba(232,222,198,.36)!important}
.shift-card{min-height:62px!important;margin-bottom:7px!important;border-radius:16px!important}
.shift-card::before{border-radius:16px!important;padding:1.5px!important}
.shift-card .sc-time{width:47px!important;padding:6px 2px!important}
}
@media(max-width:390px){
.shift-card .sc-time{width:44px!important}
/* v447: legacy 98px bottom fill removed */
}
/* ============================================================
V28 Employee Clock + Timesheet Polish
============================================================ */
.clock-subnav{
display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px!important;border-radius:22px!important;
background:linear-gradient(180deg,#efe7d8,#dfe9d8)!important;border:1px solid rgba(60,88,55,.16)!important;
box-shadow:0 10px 22px rgba(31,47,31,.06)!important;margin-bottom:10px!important;position:relative;z-index:2;
}
.clock-subnav button{
height:44px;border-radius:16px;border:1px solid transparent;background:rgba(255,250,236,.48);display:flex;align-items:center;justify-content:center;gap:7px;
font-weight:900;color:#334b34;font-size:12.8px;letter-spacing:-.01em;position:relative;overflow:hidden;
}
.clock-subnav button svg{width:16px;height:16px;stroke-width:2.1}.clock-subnav button em{position:absolute;right:8px;top:6px;min-width:18px;height:18px;border-radius:999px;background:#b77a3e;color:#fff8e8;font-size:10px;font-style:normal;display:grid;place-items:center}.clock-subnav button.active{background:linear-gradient(180deg,#4f754d,#264b2c)!important;color:#fff8e8!important;box-shadow:0 8px 18px rgba(35,70,39,.22),inset 0 1px 0 rgba(255,255,255,.16)}.clock-hand.h1{height:20px;transform:translate(-50%,-100%) rotate(45deg)}.clock-hand.h2{height:15px;transform:translate(-50%,-100%) rotate(145deg);background:#b17641}.active-face{width:150px;height:150px;border-radius:42px;margin:14px auto 10px;background:radial-gradient(circle at 50% 42%,#fffdf5,#deead7 64%,#bfcfb7)}.active-face::before{display:none}.active-face .ring-svg{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}.emp-shift.v28-slim-shift{position:relative;overflow:hidden;padding:9px 10px 10px!important;border-radius:18px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--solid) 20%,#fff3dd) 0%,#fff8ec 50%,color-mix(in srgb,var(--solid) 13%,#e2eadb) 100%)!important;border:1px solid color-mix(in srgb,var(--solid) 35%,rgba(39,63,39,.14))!important;box-shadow:0 9px 20px rgba(30,45,31,.065),inset 0 1px 0 rgba(255,255,255,.72)!important}.emp-shift.v28-slim-shift::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--solid),color-mix(in srgb,var(--solid) 50%,#c69a58),transparent)}.emp-shift.v28-slim-shift::after{content:"";position:absolute;right:-26px;top:-34px;width:95px;height:95px;border-radius:50%;background:color-mix(in srgb,var(--solid) 12%,transparent);pointer-events:none}.emp-shift.v28-slim-shift .es-copy{position:relative;z-index:1;min-width:0}.emp-shift.v28-slim-shift h3{font-family:var(--font-display);font-size:20px!important;line-height:1.05!important;font-weight:650!important;color:#1d2d20!important;margin:0 0 5px!important}.emp-shift.v28-slim-shift .es-loc{display:flex;align-items:center;gap:5px;font-size:12px!important;color:#667061!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.emp-shift.v28-slim-shift .es-loc svg{width:13px;height:13px;flex-shrink:0;color:var(--solid)}.emp-shift.v28-slim-shift .es-note{margin-top:7px!important;border-radius:12px!important;padding:7px 9px!important;font-size:12px!important;background:rgba(255,251,241,.68)!important;border:1px solid rgba(75,90,65,.08)!important;color:#4e564e!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.emp-shift.v28-slim-shift .es-actions{position:relative;z-index:1;display:grid!important;grid-template-columns:1fr 1fr 1.1fr!important;gap:7px!important;margin-top:8px!important;padding-top:8px!important;border-top:1px solid color-mix(in srgb,var(--solid) 15%,rgba(38,61,38,.11))!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:36px!important;border-radius:13px!important;font-size:12px!important;font-weight:950!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}.emp-shift.v28-slim-shift .ec-start{background:linear-gradient(135deg,var(--solid),var(--deep))!important;color:#fff8e8!important;box-shadow:0 8px 16px color-mix(in srgb,var(--solid) 25%,transparent)!important}.emp-shift.v28-slim-shift .ec-accept{background:#e4eedc!important;color:#355b37!important}.emp-shift.v28-slim-shift .ec-reject{background:#fff8f5!important;color:#a0443b!important;border:1px solid rgba(160,68,59,.22)!important}.clock-empty-card .btn{margin-top:8px}
.clock-timesheet-page .payroll-mobile-simple{margin-top:0!important}.clock-timesheet-page .payroll-mobile-simple .section-head{margin-top:6px!important}.locked-pill{display:inline-flex!important;align-items:center!important;gap:4px!important}.locked-pill svg{width:12px!important;height:12px!important;stroke-width:2.2}.rec-row.ts-compact.locked{background:linear-gradient(135deg,#f6f0e2,#e9efe2)!important;border-color:rgba(72,92,62,.18)!important}.rec-row.ts-compact.locked .rec-ic{background:linear-gradient(135deg,#385f3b,#213e26)!important;color:#fff8e8!important}
@media(max-width:720px){
.clock-subnav{gap:6px;padding:5px!important;border-radius:19px!important;margin-bottom:8px!important}.clock-subnav button{height:39px;border-radius:14px;font-size:11.5px}.clock-subnav button svg{width:14px;height:14px}.active-face{width:122px;height:122px;border-radius:34px;margin:10px auto 8px}.emp-shift.v28-slim-shift{padding:8px 9px 9px!important;border-radius:16px!important}.emp-shift.v28-slim-shift h3{font-size:17px!important}.emp-shift.v28-slim-shift .es-loc{font-size:11px!important}.emp-shift.v28-slim-shift .es-note{padding:6px 8px!important;font-size:11px!important;margin-top:6px!important}.emp-shift.v28-slim-shift .es-actions{gap:6px!important;margin-top:7px!important;padding-top:7px!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:31px!important;border-radius:11px!important;font-size:10.5px!important}.payroll-mobile-simple .ts-day-card{border-radius:18px!important;padding:10px!important}
}
@media(max-width:390px){.emp-shift.v28-slim-shift .es-actions{grid-template-columns:.95fr .95fr 1.05fr!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start{font-size:9.6px!important}.clock-subnav button span{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.emp-shift.v28-slim-shift h3{font-size:16px!important}}
@media(max-width:1023px){
/* v447: legacy 118px bottom gradient removed - the .wwnav bar now paints its own background */
}
/* V28b extra squeeze for employee clock cards */
@media(max-width:720px){.emp-shift.v28-slim-shift{padding:7px 8px 8px!important;border-radius:15px!important}.emp-shift.v28-slim-shift h3{font-size:15.6px!important;margin-bottom:3px!important}.emp-shift.v28-slim-shift .es-loc{font-size:10.5px!important}.emp-shift.v28-slim-shift .es-note{margin-top:5px!important;padding:5px 7px!important;font-size:10.6px!important;border-radius:10px!important}.emp-shift.v28-slim-shift .es-actions{margin-top:6px!important;padding-top:6px!important;gap:5px!important}.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:28px!important;border-radius:10px!important;font-size:9.8px!important}.emp-shift.v28-slim-shift .ec-reject svg,.emp-shift.v28-slim-shift .ec-accept svg,.emp-shift.v28-slim-shift .ec-start svg{width:13px!important;height:13px!important}
}
/* ============================================================
V29 Timesheet Request Polish — no break, client search + add
============================================================ */
.timesheet-modal{
max-width:640px!important;
border-radius:26px!important;
background:linear-gradient(180deg,#fffdf7 0%,#f4efe4 100%)!important;
}
.timesheet-modal .modal-head{
padding:22px 24px 12px!important;
background:linear-gradient(180deg,#fffdf7,#f7f1e6)!important;
border-bottom:1px solid rgba(55,75,48,.08)!important;
}
.timesheet-modal .modal-body{padding:14px 24px 6px!important}
.timesheet-modal .modal-foot{
background:linear-gradient(180deg,rgba(247,241,230,.72),#efe8d9)!important;
border-top:1px solid rgba(55,75,48,.10)!important;
box-shadow:0 -12px 28px rgba(35,47,31,.08)!important;
}
.missed-intro{
display:grid;gap:4px;margin-bottom:12px;padding:12px 13px;border-radius:17px;
background:linear-gradient(135deg,#e5eedf,#f4e7d4);
border:1px solid rgba(67,95,61,.13);
box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}
.missed-intro strong{font-family:var(--font-display);font-size:18px;font-weight:650;color:#203525;letter-spacing:-.02em}
.missed-intro span{font-size:12.2px;line-height:1.35;color:#62705f;font-weight:650}
.ts-client-picker{display:grid;gap:8px}
.ts-client-selected{
display:grid;gap:2px;padding:9px 11px;border-radius:15px;
background:linear-gradient(135deg,#fff8ec,#e8efe1);
border:1px solid rgba(58,88,55,.14);
box-shadow:0 4px 12px rgba(35,47,31,.045),inset 0 1px 0 rgba(255,255,255,.72);
}
.ts-client-selected strong{font-size:13.5px;color:#203525;font-weight:900;line-height:1.1}
.ts-client-selected span{font-size:11.2px;color:#667061;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-client-search{
height:42px;border-radius:14px;background:#fffaf0;border:1px solid rgba(58,78,51,.15);
display:flex;align-items:center;gap:8px;padding:0 11px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.ts-client-search svg{width:16px;height:16px;color:#64755f;flex-shrink:0}.ts-client-search input{border:0;background:transparent;outline:0;min-width:0;flex:1;font-size:14px;font-weight:800;color:#243128}.ts-client-search input::placeholder{color:#8a9288}
.ts-client-results{display:grid;gap:5px;max-height:172px;overflow:auto;padding:3px;border-radius:16px;background:rgba(235,228,214,.55);border:1px solid rgba(58,78,51,.08)}
.ts-client-results.is-collapsed{display:none}
.ts-client-row{
min-height:43px;border:1px solid rgba(55,75,48,.10);border-radius:13px;background:rgba(255,253,247,.82);
display:flex;align-items:center;gap:9px;text-align:left;padding:7px 9px;color:#263128;
box-shadow:0 2px 8px rgba(36,49,40,.035);
}
.ts-client-row.selected{background:linear-gradient(135deg,#e1ecd9,#f4ead8);border-color:rgba(61,94,58,.24)}
.ts-client-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(65,92,61,.25);display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(65,92,61,.10);font-size:12px;font-weight:900;flex-shrink:0}
.ts-client-row.selected .ts-client-dot{background:linear-gradient(135deg,#4b7548,#213f26);border-color:rgba(255,255,255,.35)}
.ts-client-row strong{display:block;font-size:12.8px;font-weight:900;color:#203525;line-height:1.1}.ts-client-row small{display:block;font-size:10.8px;color:#687366;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px;margin-top:2px}
.ts-add-client-toggle{
height:36px;border-radius:13px;border:1px solid rgba(58,88,55,.12);background:linear-gradient(135deg,#e7efdf,#f4ead8);
color:#2e5432;font-size:12.2px;font-weight:900;text-align:center;
}
.ts-add-client-panel{display:none;gap:8px;padding:10px;border-radius:16px;background:linear-gradient(135deg,#fff8ec,#e8efe1);border:1px solid rgba(64,91,59,.12)}
.ts-add-client-panel.open{display:grid}
.ts-add-client-panel .btn{height:38px;border-radius:12px;font-size:12px;font-weight:900}
.timesheet-modal .row2{gap:10px!important}
.timesheet-modal .field{margin-bottom:10px!important;gap:5px!important}
.timesheet-modal .field label{font-size:11.8px!important;color:#354437!important}
.timesheet-modal .input{height:44px!important;border-radius:14px!important;background:#fffaf0!important;border-color:rgba(54,74,48,.14)!important;font-size:14px!important;padding:0 12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important}
.timesheet-modal textarea.input{height:auto!important;min-height:76px!important;padding:10px 12px!important;line-height:1.35!important}
@media(max-width:720px){
.timesheet-modal{max-height:calc(100dvh - 28px)!important;border-radius:24px 24px 0 0!important}
.timesheet-modal .modal-head{padding:15px 16px 9px!important}.timesheet-modal .modal-head h2{font-size:21px!important}
.timesheet-modal .modal-body{padding:10px 14px 5px!important}.timesheet-modal .modal-foot{padding:9px 14px calc(11px + var(--safe-b))!important;gap:8px!important}.timesheet-modal .modal-foot .btn{height:40px!important;border-radius:13px!important;font-size:12.4px!important;min-width:0!important;flex:1!important}
.missed-intro{padding:10px 11px!important;border-radius:15px!important;margin-bottom:9px!important}.missed-intro strong{font-size:16px!important}.missed-intro span{font-size:11px!important}
.timesheet-modal .input{height:40px!important;border-radius:12px!important;font-size:13.3px!important;padding:0 10px!important}.timesheet-modal textarea.input{min-height:66px!important;padding:9px 10px!important;font-size:13.2px!important}
.timesheet-modal .field{margin-bottom:8px!important}.timesheet-modal .field label{font-size:11px!important}
.ts-client-selected{padding:8px 10px!important;border-radius:13px!important}.ts-client-selected strong{font-size:12.7px!important}.ts-client-selected span{font-size:10.4px!important}
.ts-client-search{height:39px!important;border-radius:13px!important}.ts-client-search input{font-size:13.2px!important}.ts-client-results{max-height:136px!important;border-radius:14px!important}.ts-client-row{min-height:38px!important;padding:6px 8px!important;border-radius:12px!important}.ts-client-row strong{font-size:12px!important}.ts-client-row small{font-size:10px!important}.ts-add-client-toggle{height:33px!important;border-radius:12px!important;font-size:11.5px!important}.ts-add-client-panel{padding:8px!important;border-radius:14px!important}.ts-add-client-panel .row2{gap:7px!important}.ts-add-client-panel .btn{height:35px!important}
}
@media(max-width:390px){.timesheet-modal .row2{grid-template-columns:1fr 1fr!important;gap:7px!important}.timesheet-modal .modal-head h2{font-size:19px!important}.ts-client-row small{max-width:240px!important}.timesheet-modal .modal-foot .btn{font-size:11.5px!important}}
/* V29 animation stability: keep modals solid and readable */
.modal-overlay{animation:none!important;opacity:1!important}
.timesheet-modal{animation:none!important;opacity:1!important;transform:none!important;background:linear-gradient(180deg,#fffdf7 0%,#f4efe4 100%)!important}
/* v34 — restore isolated Next Shift layout only */
.employee-dashboard > .section-head.next-title{
display:flex!important;
align-items:center!important;
margin-top:18px!important;
margin-bottom:10px!important;
clear:both!important;
}
.employee-dashboard > .section-head.next-title h2{
margin:0!important;
}
@media(max-width:720px){
}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* ---- inline style 5 ---- */
/* V31 — flush mobile dock, stronger card contrast, professional clock timer */
@media(max-width:1023px){
html,body,#app,.shell{width:100%!important;max-width:100vw!important;min-height:100dvh!important;background:#11301d!important;overflow-x:hidden!important;}
.main{background:linear-gradient(180deg,#e8f0e3 0%,#dce8d8 46%,#cfe0cc 100%)!important;}
.content{padding-left:12px!important;padding-right:12px!important;padding-bottom:calc(96px + var(--safe-b))!important;}
.mtab.active{background:linear-gradient(180deg,#638755 0%,#416f42 55%,#2d562f 100%)!important;border-color:rgba(236,220,177,.32)!important;box-shadow:0 10px 22px rgba(8,36,17,.34),inset 0 1px 0 rgba(255,255,255,.18)!important;}
.mtab.active > svg{background:rgba(255,250,234,.18)!important;color:#fff9e8!important;}
.mtab.active::after{bottom:5px!important;background:#e4c987!important;box-shadow:0 0 8px rgba(228,201,135,.42)!important;}
}
/* Stronger contrast cards — no more same-colour-on-background */
.home-dashboard .stat,
.doc-intro.card-pad,
.account-hero.card-pad,
.profile-mini,
.avail-row,
.ts-day-card,
.xero-week-card,
.employee-payroll-strip,
.card:not(.mobile-nav){
border-color:rgba(43,70,41,.16)!important;
}
.home-dashboard .stat{background:linear-gradient(145deg,#fbf0da 0%,#ead8b9 100%)!important;box-shadow:0 8px 20px rgba(31,44,30,.075),inset 0 1px 0 rgba(255,255,255,.70)!important;}
.home-dashboard .stat:nth-child(2){background:linear-gradient(145deg,#e5efd8 0%,#cddfbe 100%)!important;}
.home-dashboard .stat:nth-child(3){background:linear-gradient(145deg,#f0ddc6 0%,#deb98f 100%)!important;}
.home-dashboard .stat:nth-child(4){background:linear-gradient(145deg,#eee5cf 0%,#d9ccad 100%)!important;}
/* Roster cards — sleeker, clearer, with colour separation */
.shift-card,
.emp-shift.v28-slim-shift{
background:linear-gradient(135deg,color-mix(in srgb,var(--solid) 22%,#ffe7bf) 0%,#fff1d4 42%,color-mix(in srgb,var(--solid) 20%,#d7eccb) 100%)!important;
border:1.2px solid color-mix(in srgb,var(--solid) 48%,rgba(42,65,42,.22))!important;
box-shadow:0 10px 24px rgba(27,43,27,.10),0 3px 12px -6px color-mix(in srgb,var(--solid) 62%,transparent),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.shift-card::before{
content:""!important;position:absolute!important;inset:0!important;border-radius:inherit!important;padding:2px!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--solid) 75%,#d9b66a),rgba(255,255,255,.75),color-mix(in srgb,var(--deep) 55%,#b9874c),rgba(255,255,255,.42))!important;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask-composite:exclude!important;
pointer-events:none!important;z-index:3!important;
}
.shift-card .sc-time{background:linear-gradient(180deg,var(--solid),var(--deep))!important;color:#fff8e8!important;}
.shift-card .sc-main{background:linear-gradient(90deg,rgba(255,249,234,.66),rgba(255,249,234,.20))!important;}
.shift-card .sc-row1 h3,.emp-shift.v28-slim-shift h3{color:#172619!important;text-shadow:0 1px 0 rgba(255,255,255,.40)!important;}
.emp-shift.v28-slim-shift{border-radius:16px!important;padding:8px 9px 9px!important;margin-bottom:8px!important;}
.emp-shift.v28-slim-shift::before{height:5px!important;background:linear-gradient(90deg,var(--solid),color-mix(in srgb,var(--solid) 55%,#d79d49),transparent)!important;}
.emp-shift.v28-slim-shift .es-note{background:rgba(255,249,235,.86)!important;border-color:rgba(60,78,54,.12)!important;color:#3b443d!important;}
@media(max-width:720px){
.shift-card{min-height:62px!important;margin-bottom:7px!important;border-radius:15px!important;}
.shift-card .sc-main{padding:6px 8px!important;}
.shift-card .sc-time{width:46px!important;padding:5px 2px!important;}
.emp-shift.v28-slim-shift{padding:7px 8px 8px!important;border-radius:15px!important;}
.emp-shift.v28-slim-shift h3{font-size:14.8px!important;margin-bottom:2px!important;}
.emp-shift.v28-slim-shift .es-loc{font-size:10px!important;}
.emp-shift.v28-slim-shift .es-note{padding:5px 7px!important;font-size:10px!important;margin-top:4px!important;}
.emp-shift.v28-slim-shift .es-actions{gap:5px!important;margin-top:5px!important;padding-top:5px!important;}
.emp-shift.v28-slim-shift .ec-reject,.emp-shift.v28-slim-shift .ec-accept,.emp-shift.v28-slim-shift .ec-start,.emp-shift.v28-slim-shift .ec-done,.emp-shift.v28-slim-shift .ec-declined{height:26px!important;border-radius:9px!important;font-size:9.3px!important;}
}
/* Professional clock timer — replace amateur oversized circle with a polished timer panel */
.clock-hero.live.clock-hero-v28{
text-align:left!important;display:grid!important;gap:10px!important;min-height:0!important;padding:13px!important;border-radius:22px!important;
background:
radial-gradient(circle at 14% 0%,rgba(225,196,130,.20),transparent 34%),
radial-gradient(circle at 100% 0%,rgba(116,150,101,.28),transparent 38%),
linear-gradient(135deg,#1f3f26 0%,#284f2d 48%,#142718 100%)!important;
border:1px solid rgba(230,212,169,.24)!important;box-shadow:0 14px 34px rgba(14,34,17,.25),inset 0 1px 0 rgba(255,255,255,.14)!important;color:#fff9e8!important;
}
.clock-hero.live .clock-card-glow{display:none!important;}
.clock-hero.live .live-badge{background:rgba(233,244,224,.14)!important;color:#e9f4df!important;border:1px solid rgba(239,231,203,.16)!important;}
.clock-hero.live .live-client{color:#fff4d9!important;font-size:13px!important;}
.clock-hero.live .active-face{
width:100%!important;height:104px!important;margin:0!important;border-radius:22px!important;display:grid!important;place-items:center!important;
background:linear-gradient(135deg,rgba(255,250,232,.13),rgba(255,250,232,.06))!important;
border:1px solid rgba(239,231,203,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px rgba(0,0,0,.14)!important;overflow:hidden!important;
}
.clock-hero.live .active-face::before{display:block!important;content:""!important;position:absolute!important;inset:auto -40px -70px auto!important;width:160px!important;height:160px!important;border-radius:50%!important;background:rgba(214,190,126,.13)!important;border:0!important;}
.clock-hero.live .ring-svg{display:none!important;}
.clock-hero.live .clock-face-inner{position:relative!important;inset:auto!important;z-index:1!important;}
.clock-hero.live .clock-face-inner strong{font-family:var(--font-mono)!important;font-size:34px!important;font-weight:900!important;letter-spacing:.02em!important;color:#fff9e8!important;text-shadow:0 8px 22px rgba(0,0,0,.24)!important;}
.clock-hero.live .clock-face-inner span{margin-top:7px!important;padding:5px 10px!important;border-radius:999px!important;background:rgba(255,250,232,.12)!important;border:1px solid rgba(255,250,232,.16)!important;color:#d9e7d2!important;font-size:9.2px!important;letter-spacing:.18em!important;}
.clock-hero.live .clock-mini-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin:0!important;}
.clock-hero.live .clock-mini-row span{height:34px!important;border-radius:13px!important;background:rgba(255,250,232,.12)!important;border:1px solid rgba(255,250,232,.15)!important;color:#f4edda!important;font-size:10.5px!important;}
.clock-hero.live .new-clock-out{height:44px!important;border-radius:15px!important;background:linear-gradient(135deg,#c27a42 0%,#9d542f 100%)!important;color:#fff9e8!important;box-shadow:0 10px 20px rgba(105,49,25,.28)!important;}
.clock-hero.idle.clock-hero-v28{background:linear-gradient(135deg,#f4dfbc 0%,#e8d2ad 46%,#d7e7cf 100%)!important;border-color:rgba(71,102,61,.22)!important;box-shadow:0 10px 24px rgba(31,47,31,.10),inset 0 1px 0 rgba(255,255,255,.70)!important;}
.clock-hero.idle .clock-face-new{background:radial-gradient(circle at 35% 25%,#fff7df,#e4c997 45%,#8fb080 100%)!important;border-color:rgba(77,100,58,.22)!important;}
.clock-subnav{background:linear-gradient(180deg,#d8c69f,#c4d8bd)!important;border-color:rgba(53,81,49,.20)!important;}
.clock-subnav button{background:rgba(255,250,234,.46)!important;color:#223d25!important;}
.clock-subnav button.active{background:linear-gradient(180deg,#4d7a49,#213f25)!important;color:#fff8e8!important;}
@media(max-width:720px){
.clock-hero.live .active-face{height:92px!important;border-radius:19px!important;}
.clock-hero.live .clock-face-inner strong{font-size:29px!important;}
.clock-hero.live .clock-mini-row span{height:31px!important;font-size:9.5px!important;}
.clock-hero.live .new-clock-out{height:40px!important;}
}
/* v34 — restore isolated Next Shift layout only */
.employee-dashboard > .section-head.next-title{
display:flex!important;
align-items:center!important;
margin-top:18px!important;
margin-bottom:10px!important;
clear:both!important;
}
.employee-dashboard > .section-head.next-title h2{
margin:0!important;
}
@media(max-width:720px){
}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* ---- inline style 6 ---- */
/* V32 — colourful roster cards that pop + bigger professional clock information */
.shift-card,
.emp-shift.v28-slim-shift,
.priority-next-shift{
isolation:isolate!important;
}
.shift-card,
.emp-shift.v28-slim-shift{
background:
radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--solid) 18%,transparent) 0 56px,transparent 58px),
linear-gradient(135deg,var(--cardA,#fff3d8) 0%,var(--cardB,#d9f3cf) 56%,var(--cardC,#ffe4b7) 100%)!important;
border:1.5px solid color-mix(in srgb,var(--solid) 58%,rgba(36,48,42,.20))!important;
box-shadow:
0 12px 26px rgba(20,28,24,.12),
0 4px 14px -5px color-mix(in srgb,var(--solid) 70%,transparent),
inset 0 1px 0 rgba(255,255,255,.70)!important;
}
.shift-card::before{
padding:2px!important;
background:linear-gradient(135deg,var(--solid),rgba(255,255,255,.88),var(--deep),rgba(255,255,255,.46),var(--solid))!important;
}
.shift-card .sc-main,
.emp-shift.v28-slim-shift .es-copy,
.emp-shift.v28-slim-shift .es-topline,
.emp-shift.v28-slim-shift .es-actions{
position:relative!important;z-index:2!important;
}
.shift-card .sc-main{
background:linear-gradient(90deg,rgba(255,255,255,.64),rgba(255,255,255,.18))!important;
}
.shift-card .sc-time,
.emp-shift.v28-slim-shift .es-time-pill{
background:linear-gradient(160deg,var(--solid) 0%,var(--deep) 100%)!important;
color:#fff!important;
}
.sc-status.published{background:rgba(255,255,255,.72)!important;color:var(--deep)!important;border:1px solid color-mix(in srgb,var(--solid) 32%,rgba(255,255,255,.25))!important;}
.sc-status.draft{background:rgba(255,245,213,.82)!important;color:#8a5b00!important;border:1px solid rgba(160,110,10,.20)!important;}
.shift-card .sc-row1 h3,
.emp-shift.v28-slim-shift h3{
color:#101a15!important;
text-shadow:0 1px 0 rgba(255,255,255,.58)!important;
}
.shift-card:nth-of-type(2n),
.emp-shift.v28-slim-shift:nth-of-type(2n){filter:saturate(1.10) contrast(1.02)}
.shift-card:nth-of-type(3n),
.emp-shift.v28-slim-shift:nth-of-type(3n){filter:saturate(1.18) contrast(1.04)}
.home-roster-list .shift-card,
.roster-mobile .shift-card,
.employee-clock-shifts .emp-shift.v28-slim-shift{
margin-bottom:10px!important;
}
/* Bigger, clearer live clock without looking amateur */
.clock-hero.live.clock-hero-v28{
padding:16px!important;
gap:12px!important;
border-radius:24px!important;
background:
radial-gradient(circle at 88% 12%,rgba(96,157,92,.28),transparent 36%),
radial-gradient(circle at 12% 0%,rgba(230,191,105,.22),transparent 35%),
linear-gradient(135deg,#143d27 0%,#1f633a 52%,#0c2418 100%)!important;
}
.clock-hero.live .active-face{
height:128px!important;
border-radius:24px!important;
background:
radial-gradient(circle at 80% 12%,rgba(255,227,145,.13),transparent 36%),
linear-gradient(135deg,rgba(255,250,232,.18),rgba(255,250,232,.075))!important;
}
.clock-hero.live .clock-face-inner strong{
font-size:44px!important;
letter-spacing:.035em!important;
}
.clock-hero.live .clock-face-inner span{
font-size:10.5px!important;
padding:6px 13px!important;
}
.clock-hero.live .clock-mini-row span{
height:40px!important;
font-size:12px!important;
font-weight:950!important;
}
.clock-hero.live .new-clock-out{
height:50px!important;
font-size:15.5px!important;
border-radius:17px!important;
}
@media(max-width:720px){
.content{padding-left:10px!important;padding-right:10px!important;}
.shift-card{border-radius:16px!important;min-height:64px!important;margin-bottom:8px!important;}
.shift-card .sc-time{width:49px!important;}
.shift-card .sc-row1 h3{font-size:13px!important;max-width:38vw!important;}
.emp-shift.v28-slim-shift{padding:9px 10px 10px!important;border-radius:17px!important;margin-bottom:10px!important;}
.emp-shift.v28-slim-shift h3{font-size:18px!important;}
.emp-shift.v28-slim-shift .es-time-pill{height:25px!important;font-size:12px!important;}
.emp-shift.v28-slim-shift .es-duration{font-size:10.5px!important;}
.emp-shift.v28-slim-shift .es-note{font-size:11.3px!important;background:rgba(255,255,255,.70)!important;}
.clock-hero.live .active-face{height:116px!important;border-radius:22px!important;}
.clock-hero.live .clock-face-inner strong{font-size:39px!important;}
.clock-hero.live .clock-mini-row span{height:38px!important;font-size:11px!important;}
.clock-hero.live .new-clock-out{height:47px!important;font-size:14.5px!important;}
}
@media(max-width:390px){
.shift-card .sc-row1 h3{max-width:33vw!important;}
.clock-hero.live .clock-face-inner strong{font-size:34px!important;}
}
/* ============================================================
V33 requested-only polish: card contrast + clock address/time
============================================================ */
:root{
--v33-cream:#fffaf0;
--v33-cream-2:#f7f0df;
--v33-ink:#102717;
--v33-muted:#526155;
--v33-border:rgba(31,51,28,.20);
}
.priority-next-shift .pill-clay{
background:linear-gradient(135deg,#b84a31,#873221)!important;color:#fff8e8!important;border-color:rgba(116,47,29,.22)!important;
}
.emp-shift.v28-slim-shift .es-note{
backdrop-filter:blur(4px);
}
/* Live clock: address + time are first-class and readable */
.clock-hero.live.clock-hero-v28{
background:
radial-gradient(circle at 78% 36%,rgba(135,178,84,.18) 0 25%,transparent 26%),
linear-gradient(135deg,#082b19 0%,#104025 53%,#071d13 100%)!important;
border:1.5px solid rgba(205,174,104,.34)!important;
box-shadow:0 16px 34px rgba(6,25,15,.20), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.clock-hero.live .active-face{
background:linear-gradient(135deg,rgba(255,250,232,.19),rgba(255,250,232,.08))!important;
border:1px solid rgba(255,250,232,.18)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 22px rgba(0,0,0,.12)!important;
}
.clock-hero.live .clock-face-inner strong{color:#fffaf0!important;text-shadow:0 4px 18px rgba(0,0,0,.18)!important;}
.clock-hero.live .clock-face-inner span{color:#d9efd4!important;border-color:rgba(255,255,255,.16)!important;background:rgba(255,255,255,.08)!important;}
.clock-hero.live .clock-mini-row span{background:rgba(255,255,255,.10)!important;color:#fff8e9!important;border-color:rgba(255,255,255,.13)!important;}
.clock-hero.live .new-clock-out{background:linear-gradient(135deg,#c66d34,#9e4525)!important;box-shadow:0 12px 20px rgba(125,51,25,.24)!important;}
/* Idle clock card: less pale yellow, stronger card edge */
.clock-hero.idle.clock-hero-v28{
background:linear-gradient(135deg,#fff8eb 0%,#f0e2c9 51%,#e9efe0 100%)!important;
border:1.4px solid rgba(95,78,42,.22)!important;
box-shadow:0 12px 26px rgba(34,45,27,.11),inset 0 1px 0 rgba(255,255,255,.78)!important;
}
@media(max-width:720px){
}
@media(max-width:390px){
}
/* v34 — restore isolated Next Shift layout only */
.employee-dashboard > .section-head.next-title{
display:flex!important;
align-items:center!important;
margin-top:18px!important;
margin-bottom:10px!important;
clear:both!important;
}
.employee-dashboard > .section-head.next-title h2{
margin:0!important;
}
@media(max-width:720px){
}
/* ============================================================
POLISH PASS — alignment, spacing, contrast, mobile fit
============================================================ */
/* Ensure content has breathing room above the mobile bottom nav */
@media(max-width:1023px){
.content,.page{padding-bottom:calc(110px + var(--safe-b,0px))!important}
}
/* Stat cards: max 2 per row on mobile so text isn't crammed */
@media(max-width:560px){
.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
.stat{padding:13px 14px!important}
.stat strong,.stat .num,.stat .stat-num{font-size:21px!important}
.stat .label,.stat .stat-label{font-size:11.5px!important}
.stat .sub,.stat .stat-sub{font-size:10.5px!important}
}
/* Profile stat row: labels visible, smaller cards on mobile */
@media(max-width:560px){
}
/* PINNED badge: white text on coloured background */
/* "Save as draft" button on shift cards — neutral sage, not danger red */
.shift-card .sc-publish,
.shift-card .sc-publish.unpub,
.shift-card .save-draft,.shift-card .draft-btn,.shift-card [data-action="save-draft"],
.shift-card button[data-action*="draft"]{
background:rgba(255,255,255,.78)!important;
color:color-mix(in srgb,var(--deep,#1f5e34) 80%,#000)!important;
border:1px solid color-mix(in srgb,var(--deep,#1f5e34) 28%,transparent)!important;
font-weight:620!important;
border-radius:8px!important;
padding:4px 10px!important;
font-size:10.5px!important;
}
.shift-card .sc-publish.pub{
background:linear-gradient(135deg,var(--forest-500),var(--forest-700))!important;
color:#fff!important;
border:0!important;
}
/* Chat: hide duplicate "Messages" panel header on mobile (page title already shows it) */
@media(max-width:1023px){
.chat-list .cl-head{
padding:8px 12px 6px!important;
background:transparent!important;
}
.chat-list .cl-head h2{display:none!important}
.chat-list .cl-head{justify-content:flex-end!important}
}
/* Availability rows: prevent last row being hidden by nav */
@media(max-width:1023px){
.avail-list,.avail-rows{padding-bottom:20px!important}
}
/* Make sure all bottom-anchored content gets clearance */
@media(max-width:1023px){
main.content > .page,.content > .page{padding-bottom:calc(120px + var(--safe-b,0px))!important}
}
/* ============================================================
MAJOR POLISH PASS — readable, cohesive, no yellow tint
============================================================ */
/* Cooler page background — drop the warm peach radial */
body{
background:
radial-gradient(ellipse 70% 40% at 18% -8%, rgba(140,180,130,.32) 0%, transparent 60%),
radial-gradient(ellipse 55% 35% at 95% 8%, rgba(155,190,160,.18) 0%, transparent 60%),
radial-gradient(ellipse 90% 55% at 50% 110%, rgba(120,165,125,.16) 0%, transparent 70%),
linear-gradient(178deg,#eaeee3 0%,#dde4d6 100%)!important;
}
/* MOBILE NAV — deep-green glass bar that stands out */
@media(max-width:1023px){
.mtab.active{
background:linear-gradient(180deg,#23b46a 0%,#118f4a 60%,#0a7a3a 100%)!important;
border-color:rgba(255,255,255,.18)!important;
box-shadow:
0 8px 22px rgba(18,143,74,.45),
inset 0 1px 0 rgba(255,255,255,.30),
inset 0 -1px 0 rgba(0,40,18,.20)!important;
}
.mtab.active > svg{
background:rgba(255,255,255,.22)!important;
border-color:rgba(255,255,255,.26)!important;
color:#fff!important;
}
.mtab.active span{color:#fff!important}
}
.next-shift .pill,.next-shift .ns-top .pill,.next-shift .ns-date{
background:color-mix(in srgb, var(--deep,#1f5e34) 80%, #000)!important;
color:#fff!important;
border:0!important;
font-weight:800!important;
}
.next-shift .ns-clock-btn,.next-shift .btn-primary{
background:linear-gradient(135deg, color-mix(in srgb, var(--deep,#1f5e34) 85%, #000), color-mix(in srgb, var(--deep,#1f5e34) 100%, #000))!important;
color:#fff!important;
border:0!important;
box-shadow:0 6px 14px -4px rgba(0,0,0,.25)!important;
}
.stat.sage{background:linear-gradient(160deg,#deecda,#c9dfc4)!important;border-color:rgba(58,120,70,.30)!important}
.stat.clay{background:linear-gradient(160deg,#f4e6d6,#ecd6bd)!important;border-color:rgba(168,82,40,.30)!important}
.stat strong,.stat .num,.stat .stat-num,.stat .stat-value{color:#142016!important;font-weight:800!important}
.stat .label,.stat .stat-label{color:#2a3a2c!important;font-weight:800!important}
.stat .sub,.stat .stat-sub{color:#5a6a5d!important;font-weight:600!important}
.upd-row{
display:flex;align-items:center;gap:11px;
width:100%;
padding:13px 4px;
background:transparent;
border:0;
text-align:left;
cursor:pointer;
}
.upd-dot{
width:30px;height:30px;flex-shrink:0;
border-radius:9px;
display:grid;place-items:center;
background:linear-gradient(135deg,var(--forest-500),var(--forest-700));
color:#fff;
box-shadow:0 2px 5px -1px rgba(20,40,20,.25);
}
.upd-dot svg{width:14px;height:14px;stroke-width:2.2}
.upd-item.pinned .upd-dot{background:linear-gradient(135deg,var(--clay-500),var(--clay-600))}
.upd-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.upd-title{
font-size:14px;font-weight:700;color:#172319;letter-spacing:-.01em;
display:flex;align-items:center;gap:7px;min-width:0;
}
.upd-titletext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;}
.upd-new,.upd-pin{flex:0 0 auto;}
.upd-pin{
display:inline-block;font-style:normal;
font-size:9px;font-weight:800;letter-spacing:.08em;
color:#fff;
background:linear-gradient(135deg,var(--clay-500),var(--clay-600));
padding:2px 7px;border-radius:20px;
text-transform:uppercase;
}
.upd-meta{font-size:11.5px;color:#5a6a5d;font-weight:600}
.upd-chev{
width:24px;height:24px;flex-shrink:0;
display:grid;place-items:center;
color:#5a6a5d;
transform:rotate(180deg);
transition:transform .2s ease;
}
.upd-chev svg{width:15px;height:15px}
.upd-item.open .upd-chev{transform:rotate(-90deg);color:var(--forest-700)}
.upd-item.open{background:linear-gradient(160deg,rgba(244,247,239,.55),rgba(233,239,225,.45))}
.upd-body{
padding:0 8px 14px 49px;
animation:upd-open .18s ease-out;
}
.upd-body p{
font-size:13.5px;line-height:1.5;color:#2c3a2e;
font-weight:500;margin:0;
}
.upd-empty{
margin:6px 4px;padding:14px 4px;
border-top:1px solid rgba(58,93,59,.16);
font-size:13px;color:#5a6a5d;font-style:italic;
}
@keyframes upd-open{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
/* ----- Roster card: add sleek edge ornament ----- */
.shift-card{
position:relative!important;
}
.shift-card::before{
content:""!important;
position:absolute!important;
top:8px!important;bottom:8px!important;
right:8px!important;
width:3px!important;
border-radius:2px!important;
background:linear-gradient(180deg,
color-mix(in srgb,var(--solid,#2f7d4a) 78%,#000) 0%,
color-mix(in srgb,var(--solid,#2f7d4a) 38%,transparent) 50%,
color-mix(in srgb,var(--solid,#2f7d4a) 78%,#000) 100%)!important;
opacity:.7!important;
pointer-events:none!important;
}
.shift-card::after{
content:""!important;
position:absolute!important;
top:50%!important;
right:4px!important;
transform:translateY(-50%)!important;
width:11px!important;height:11px!important;
border-radius:50%!important;
background:color-mix(in srgb,var(--solid,#2f7d4a) 70%,#000)!important;
border:2px solid #fff!important;
box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
display:none!important;
}
/* the time block on the left gets a notched edge */
.shift-card .sc-time{
position:relative!important;
border-right:1px dashed rgba(255,255,255,.35)!important;
}
.shift-card .sc-time::after{
content:""!important;
position:absolute!important;
right:-5px!important;top:50%!important;
transform:translateY(-50%)!important;
width:9px!important;height:9px!important;
border-radius:50%!important;
background:#e8efe1!important;
box-shadow:
inset 0 1px 2px rgba(0,0,0,.18),
0 0 0 1px color-mix(in srgb,var(--solid,#2f7d4a) 30%,transparent)!important;
}
/* ----- Mobile menu refresh: lift, glow, lighter inactive contrast ----- */
@media(max-width:1023px){
.mtab.active{
background:linear-gradient(180deg,#2dc774 0%,#13a04f 55%,#0a7a3a 100%)!important;
border:1px solid rgba(255,255,255,.30)!important;
box-shadow:
0 12px 26px rgba(18,160,82,.55),
0 0 0 2px rgba(45,199,116,.20),
inset 0 1px 0 rgba(255,255,255,.40)!important;
transform:translateY(-3px) scale(1.02)!important;
}
.mtab.active > svg{
background:rgba(255,255,255,.28)!important;
border-color:rgba(255,255,255,.4)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.4)!important;
}
.mtab.active span{color:#fff!important;font-weight:800!important;text-shadow:0 1px 2px rgba(0,40,18,.30)!important}
}
.acs-employee-picker summary .ce-chev{color:#fff!important}
.acs-selected-head .avatar{
background:rgba(255,255,255,.22)!important;
color:#fff!important;
border:2px solid rgba(255,255,255,.30)!important;
}
.acs-emp-nav .btn{
flex:1!important;
background:rgba(255,255,255,.16)!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.26)!important;
font-weight:620!important;
}
.acs-emp-nav .btn:hover{background:rgba(255,255,255,.24)!important}
/* ----- Messages: smooth colours, less harsh ----- */
.chat-list{background:#f4f7ef!important;border-color:rgba(58,93,59,.18)!important}
.ct-row{background:transparent!important;transition:background .15s ease}
.ct-row:hover{background:rgba(58,93,59,.08)!important}
.ct-row.active{background:linear-gradient(135deg,rgba(31,94,52,.16),rgba(31,94,52,.08))!important;border-left:3px solid var(--forest-600)!important}
.chat-thread{background:#fbfdf8!important}
.chat-thread-head{background:linear-gradient(135deg,#1f5e34 0%,#163f24 100%)!important;color:#fff!important}
.chat-thread-head .cth-info strong{color:#fff!important}
.chat-thread-head .cth-info span{color:rgba(225,234,221,.78)!important}
.msg.mine .bubble{
background:linear-gradient(135deg,#1f5e34,#143d23)!important;
color:#fff!important;
border:0!important;
}
.msg:not(.mine) .bubble{
background:#fff!important;
border:1px solid rgba(58,93,59,.16)!important;
box-shadow:0 1px 3px rgba(20,40,20,.06)!important;
}
.chat-composer{background:rgba(244,247,239,.6)!important;border-top:1px solid rgba(58,93,59,.16)!important}
.chat-composer .input{
background:#fff!important;
border:1px solid rgba(58,93,59,.20)!important;
}
/* ----- Availability: smaller, more standout rows ----- */
@media(max-width:1023px){
}
/* ----- Employee Today's shifts (clock page) cards: less white ----- */
.home-roster-list .shift-card,.clock-shifts .shift-card{
background:linear-gradient(135deg,
color-mix(in srgb,var(--solid,#2f7d4a) 24%,#fff),
color-mix(in srgb,var(--solid,#2f7d4a) 38%,#fff))!important;
}
/* ============================================================
LOGIN SCREEN — clean, professional, EarthRoster brand
============================================================ */
/* ============================================================
LOGIN SCREEN — professional redesign (v136)
A calm forest backdrop, one clean white card, refined type,
and a stable centred layout. A single gentle fade-in on load
(no transforms that shake), dynamic-viewport height so the
keyboard never makes the card jump.
============================================================ */
/* ============================================================
LOGIN v333 — "Dawn" split-screen (brand panel + form)
============================================================ */
.lg2-root{
position:fixed;inset:0;z-index:10;display:flex;min-height:100dvh;
background:#f6f4ec;overflow:hidden;
animation:lg2Fade .5s ease both;
}
@keyframes lg2Fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.lg2-root{animation:none}}
/* ---------- BRAND SIDE ---------- */
.lg2-brand{
position:relative;flex:1 1 52%;overflow:hidden;
display:flex;align-items:center;justify-content:center;
background:#0f1d12;isolation:isolate;
}
.lg2-sky{position:absolute;inset:0;
background:linear-gradient(180deg,#12271a 0%,#1c3a24 38%,#3c5a34 68%,#6d7f49 100%);}
.lg2-sun{position:absolute;left:50%;top:58%;width:520px;height:520px;transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(233,196,106,.95) 0%,rgba(216,158,74,.5) 30%,rgba(216,158,74,0) 62%);
filter:blur(2px);animation:lg2Rise 1.4s cubic-bezier(.22,1,.36,1) both;}
@keyframes lg2Rise{from{transform:translate(-50%,10%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
.lg2-hills{position:absolute;inset:0;overflow:hidden}
.lg2-hill{position:absolute;left:-10%;right:-10%;border-radius:50%/100% 100% 0 0;}
.lg2-hill-3{bottom:34%;height:44%;background:#3f5b38;opacity:.55;filter:blur(1px)}
.lg2-hill-2{bottom:20%;height:46%;background:#33502f;}
.lg2-hill-1{bottom:-6%;height:52%;background:#20361f;}
.lg2-hill{animation:lg2Hill 1.1s cubic-bezier(.22,1,.36,1) both}
.lg2-hill-2{animation-delay:.08s}.lg2-hill-1{animation-delay:.16s}
@keyframes lg2Hill{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.lg2-sun,.lg2-hill{animation:none}}
.lg2-brand-inner{position:relative;z-index:2;max-width:400px;padding:48px;color:#f4f7ee;
animation:lg2Up .8s .2s cubic-bezier(.22,1,.36,1) both}
@keyframes lg2Up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.lg2-brand-inner{animation:none}}
.lg2-mark{width:76px;height:76px;border-radius:20px;overflow:hidden;margin-bottom:26px;
box-shadow:0 18px 40px -14px rgba(0,0,0,.6);background:#6a7350}
.lg2-mark img{width:100%;height:100%;object-fit:cover;display:block}
.lg2-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:#e9c46a;margin-bottom:12px}
.lg2-wordmark h1{font-family:var(--font-display,"Fraunces",Georgia,serif);font-weight:600;
font-size:52px;line-height:.98;letter-spacing:-.02em;color:#fbfdf6;margin:0}
.lg2-wordmark p{margin:16px 0 0;font-size:15.5px;line-height:1.5;color:rgba(232,240,224,.82);max-width:330px;font-weight:500}
.lg2-points{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.lg2-points li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;color:rgba(238,244,230,.9)}
.lg2-tick{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
background:rgba(233,196,106,.16);border:1px solid rgba(233,196,106,.4)}
.lg2-tick svg{width:13px;height:13px;stroke:#e9c46a}
/* ---------- FORM SIDE ---------- */
.lg2-main{flex:1 1 48%;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:40px 24px calc(28px + env(safe-area-inset-bottom));position:relative;overflow-y:auto;background:#f6f4ec}
.lg2-form-wrap{width:100%;max-width:392px;margin:auto}
.lg2-mobile-mark{display:none}
.lg2-head{margin-bottom:24px}
.lg2-greet{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a8845f;margin-bottom:8px}
.lg2-head h2{font-family:var(--font-display,"Fraunces",Georgia,serif);font-weight:600;font-size:30px;
line-height:1.06;letter-spacing:-.015em;color:#1e2617;margin:0}
.lg2-head p{margin:9px 0 0;font-size:14px;line-height:1.45;color:#6f7c60;font-weight:500}
.lg2-field{margin-bottom:15px}
.lg2-field label{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3a4a3c;margin-bottom:7px}
.lg2-input{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1px solid #d8dde2;
background:#fff;font-size:16px;font-weight:500;color:#1e2617;outline:none;
transition:border-color .15s ease,box-shadow .15s ease}
.lg2-input::placeholder{color:#9aa39a;font-weight:500}
.lg2-root .lg2-input:focus,
.lg2-root .lg2-input:focus-visible{border-color:#8b949e;box-shadow:none;outline:none!important;outline-offset:0!important}
/* Neutral login fields: login-only override for older global green focus styles.
Keep other EarthRoster form fields and their existing accessible states unchanged. */
body .lg2-root .lg2-input,
body.er1319 .lg2-root .lg2-input{
border:1px solid #d8dde2!important;
background:#fff!important;
box-shadow:none!important;
outline:none!important;
}
body .lg2-root .lg2-input:focus,
body .lg2-root .lg2-input:focus-visible,
body.er1319 .lg2-root .lg2-input:focus,
body.er1319 .lg2-root .lg2-input:focus-visible{
border-color:#8b949e!important;
box-shadow:none!important;
outline:none!important;
outline-offset:0!important;
}
.lg2-pw{position:relative}
.lg2-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:11px;
display:grid;place-items:center;background:transparent;border:0;color:#6f7c60;cursor:pointer;transition:background .12s ease}
.lg2-eye:hover{background:rgba(58,93,59,.08)}
.lg2-eye svg{width:19px;height:19px}
.lg2-cta{margin-top:8px;width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:8px;
border:0;border-radius:14px;cursor:pointer;
background:linear-gradient(180deg,#5c7a4e 0%,#425a34 60%,#33481f 100%);
color:#fff;font-family:var(--font-body);font-size:16px;font-weight:800;letter-spacing:.005em;
box-shadow:0 14px 28px -10px rgba(40,60,30,.5),inset 0 1px 0 rgba(255,255,255,.22);
transition:transform .12s ease,box-shadow .15s ease}
.lg2-cta svg{width:17px;height:17px;stroke:#fff}
@media(hover:hover){.lg2-cta:hover{transform:translateY(-1px);box-shadow:0 18px 34px -10px rgba(40,60,30,.55),inset 0 1px 0 rgba(255,255,255,.26)}}
.lg2-cta:active{transform:translateY(0) scale(.99)}
.lg2-help{margin:20px 0 0;font-size:13px;line-height:1.5;color:#5a6a5d;font-weight:600}
.lg2-help span{display:block;color:#8a9784;font-weight:500;margin-top:2px}
.lg2-signup{margin:14px 0 0;font-size:13px;color:#6f7c60;font-weight:600}
.lg2-signup a{color:#5c7a4e;font-weight:800;cursor:pointer;text-decoration:none;border-bottom:1.5px solid rgba(92,122,78,.35)}
.lg2-foot{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:11.5px;color:#9aa48c;font-weight:600}
.lg2-fdot{width:3px;height:3px;border-radius:50%;background:#c3ccb6}
.login-err{margin-bottom:12px;font-size:13px;color:#a8392f;font-weight:700}
.login-err:empty{display:none}
/* ---------- MOBILE ---------- */
@media(max-width:860px){
.lg2-root{flex-direction:column}
.lg2-brand{flex:0 0 auto;min-height:38vh;padding:0}
.lg2-brand-inner{padding:34px 28px;max-width:none;text-align:left}
.lg2-mark{width:60px;height:60px;border-radius:16px;margin-bottom:16px}
.lg2-wordmark h1{font-size:40px}
.lg2-wordmark p{font-size:14px;margin-top:10px;max-width:400px}
.lg2-points{display:none}
.lg2-main{flex:1 1 auto;justify-content:flex-start;padding-top:30px;border-radius:26px 26px 0 0;margin-top:-26px;position:relative;z-index:3;
box-shadow:0 -12px 30px -18px rgba(0,0,0,.3)}
.lg2-mobile-mark{display:none}
}
@media(max-width:420px){
.lg2-brand{min-height:34vh}
.lg2-wordmark h1{font-size:34px}
.lg2-head h2{font-size:26px}
.lg2-brand-inner{padding:28px 24px}
}
/* neutralise any legacy login styles */
.login-panel,.login-main,.login-mobilebrand,.lp-rings,.lp-brand,.lp-hero,.lp-feats,.lc-sub,.login-hint .chip,.login-hint strong{display:none!important}
/* ============================================================
ROUND 3 — slimmer top cards, slimmer updates, new mobile menu
============================================================ */
/* Slimmer stat cards on mobile so roster shows sooner */
@media(max-width:560px){
.stat-grid{gap:7px!important;margin:0 4px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.stat-grid.has-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.stat{
padding:7px 9px!important;
border-radius:12px!important;
min-height:0!important;
}
.stat .stat-v{font-size:17px!important;line-height:1.05!important;font-weight:800!important}
.stat .stat-l{font-size:9.5px!important;margin-top:2px!important;line-height:1.15!important;font-weight:620!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.stat .stat-s{display:none!important}
.stat::after{width:34px!important;height:34px!important;right:-12px!important;top:-14px!important}
}
/* admin home has 4 stats — let them go 2x2 with a small label */
@media(max-width:560px){
.home-dashboard.adm .stat-grid,
.stat-grid:has(.stat:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Slimmer updates list rows */
.upd-row{padding:9px 4px!important}
.upd-dot{width:26px!important;height:26px!important;border-radius:8px!important}
.upd-dot svg{width:13px!important;height:13px!important}
.upd-title{font-size:13px!important;line-height:1.2!important}
.upd-pin{font-size:8.5px!important;padding:1px 6px!important}
.upd-meta{font-size:10.5px!important;line-height:1.1!important}
.upd-chev{width:20px!important;height:20px!important}
.upd-chev svg{width:13px!important;height:13px!important}
.upd-body{padding:0 8px 10px 41px!important}
.upd-body p{font-size:12.5px!important;line-height:1.45!important}
/* Tighter section headings on mobile */
@media(max-width:560px){
.section-head{margin-top:14px!important;margin-bottom:6px!important;padding:0 4px!important}
.section-head h2{font-size:16px!important;letter-spacing:-.015em!important}
.section-head .count{font-size:11px!important}
}
/* Mobile menu redesigned: bottom-anchored, sleek active indicator */
@media(max-width:1023px){
/* ACTIVE: vivid lime icon + bright text + soft pill background */
.mtab.active{
background:linear-gradient(180deg,rgba(45,212,122,.18) 0%,rgba(45,212,122,.08) 100%)!important;
border:1px solid rgba(45,212,122,.32)!important;
box-shadow:
0 6px 14px rgba(45,212,122,.18),
inset 0 1px 0 rgba(255,255,255,.06)!important;
transform:none!important;
}
.mtab.active > svg{
color:#3ee686!important;
filter:drop-shadow(0 0 8px rgba(62,230,134,.55))!important;
}
.mtab.active span{
color:#e7f7ec!important;
font-weight:800!important;
}
.mtab.active::before,.mtab.active::after{display:none!important}
}
/* Page bottom clearance — only as much as the new flush menu needs */
@media(max-width:1023px){
main.content > .page,.content > .page{padding-bottom:calc(72px + var(--safe-b,0px))!important}
}
/* ============================================================
ROUND 4 — premium mobile menu + redesigned clock/timesheets
============================================================ */
/* ----- MOBILE MENU: floating glass pill with proper active state ----- */
@media(max-width:1023px){
/* ACTIVE: vivid green gradient pill that lifts */
.mtab.active{
background:linear-gradient(180deg,#2ecf78 0%,#13a04f 60%,#0a7a3a 100%)!important;
border:1px solid rgba(255,255,255,.28)!important;
box-shadow:
0 8px 22px rgba(18,160,82,.45),
0 0 0 1px rgba(45,212,122,.18),
inset 0 1px 0 rgba(255,255,255,.36),
inset 0 -1px 0 rgba(0,52,22,.20)!important;
transform:translateY(-2px)!important;
}
.mtab.active > svg{
color:#ffffff!important;
filter:drop-shadow(0 1px 2px rgba(0,40,18,.40))!important;
}
.mtab.active span{
color:#ffffff!important;
font-weight:800!important;
text-shadow:0 1px 2px rgba(0,40,18,.30)!important;
}
.mtab.active::before,.mtab.active::after{display:none!important}
}
@media(max-width:1023px){
main.content > .page,.content > .page{padding-bottom:calc(80px + var(--safe-b,0px))!important}
}
/* ============================================================
EMPLOYEE TIME CLOCK — slimmer hero card
============================================================ */
@media(max-width:1023px){
.clock-hero.idle.clock-hero-v28{
padding:14px 14px 12px!important;
border-radius:16px!important;
background:linear-gradient(135deg,#1d4d33 0%,#0f2f1f 100%)!important;
border:1px solid rgba(255,255,255,.10)!important;
box-shadow:0 10px 24px -10px rgba(0,40,18,.42)!important;
color:#fff!important;
}
.clock-hero.idle .clock-card-glow{
background:radial-gradient(60% 80% at 100% 0%, rgba(62,230,134,.20), transparent 60%)!important;
}
.clock-hero.idle .clock-ready-row{gap:12px!important;align-items:center!important}
.clock-hero.idle .clock-face-new{
width:44px!important;height:44px!important;
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.18)!important;
}
.clock-hero.idle .clock-ready-copy span{
font-size:10px!important;font-weight:800!important;
letter-spacing:.10em!important;text-transform:uppercase!important;
color:rgba(220,232,212,.70)!important;
}
.clock-hero.idle .clock-ready-copy h2{
font-family:var(--font-display,'Fraunces',serif)!important;
font-size:19px!important;line-height:1.1!important;
color:#fff!important;margin:2px 0 1px!important;font-weight:600!important;
}
.clock-hero.idle .clock-ready-copy p{
font-size:12px!important;color:rgba(220,232,212,.75)!important;font-weight:500!important;
}
.clock-hero.idle .clock-metrics{
margin-top:10px!important;
display:grid!important;
grid-template-columns:1fr 1fr auto!important;
gap:7px!important;
}
.clock-hero.idle .clock-metrics > span,
.clock-hero.idle .clock-metrics > button{
padding:7px 10px!important;
border-radius:10px!important;
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.14)!important;
color:#fff!important;
font-size:11px!important;font-weight:620!important;
display:flex!important;align-items:center!important;gap:5px!important;
}
.clock-hero.idle .clock-metrics svg{width:13px!important;height:13px!important;color:#9be4b1!important}
.clock-hero.idle .clock-metrics strong{font-size:13px!important;color:#fff!important;font-weight:800!important}
.clock-hero.idle .clock-metrics em{font-size:10px!important;color:rgba(220,232,212,.65)!important;font-style:normal!important}
}
/* Hero — slimmer, single piece */
.acs-hero.card{
padding:13px 16px!important;
border-radius:16px!important;
background:linear-gradient(135deg,#1d4d33 0%,#0f2f1f 100%)!important;
border:1px solid rgba(255,255,255,.10)!important;
color:#fff!important;
display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
}
.acs-week-nav .rh-nav{
width:34px!important;height:34px!important;
background:rgba(255,255,255,.12)!important;
border:1px solid rgba(255,255,255,.20)!important;
color:#fff!important;
border-radius:10px!important;
}
.acs-week-nav .rh-nav svg{width:15px!important;height:15px!important}
.acs-stat.warn strong{color:#a8392f!important}
.acs-stat.warn span{color:#a8392f!important}
/* Employee picker — slim, less green-on-green */
.acs-employee-picker.card{
padding:0!important;
border-radius:14px!important;
background:#fff!important;
border:1px solid rgba(58,93,59,.18)!important;
box-shadow:0 4px 12px -6px rgba(20,40,20,.14)!important;
overflow:hidden!important;
}
.acs-employee-picker .ce-chev{
width:20px!important;height:20px!important;color:#5a6a5d!important;
transition:transform .2s ease!important;
}
.acs-employee-picker .ce-chev svg{width:14px!important;height:14px!important;transform:rotate(180deg)!important}
.acs-employee-picker[open] .ce-chev{transform:rotate(-90deg)!important}
/* Selected employee card — slim sage, not solid green */
.acs-sticky-edit.card{
padding:0!important;
border-radius:14px!important;
background:linear-gradient(135deg,#e8f1e3 0%,#dbe9d3 100%)!important;
border:1px solid rgba(58,120,70,.30)!important;
box-shadow:0 6px 16px -8px rgba(20,80,40,.20)!important;
overflow:hidden!important;
display:flex!important;flex-direction:column!important;
}
.acs-selected-head .avatar{
width:38px!important;height:38px!important;
background:linear-gradient(135deg,#1d4d33,#0f2f1f)!important;
color:#fff!important;
border:0!important;
font-size:14px!important;font-weight:800!important;
box-shadow:0 4px 10px -4px rgba(20,80,40,.4)!important;
}
.acs-emp-nav .btn{
flex:initial!important;
height:34px!important;
background:rgba(255,255,255,.7)!important;
color:#1d4d33!important;
border:1px solid rgba(58,120,70,.28)!important;
font-size:12px!important;font-weight:800!important;
border-radius:10px!important;
display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
}
.acs-emp-nav .btn:hover{background:#fff!important;border-color:rgba(58,120,70,.4)!important}
.acs-emp-nav .btn svg{width:13px!important;height:13px!important}
.acs-emp-nav .btn:last-child svg{transform:rotate(180deg)!important}
.acs-day.today{border-color:rgba(168,82,40,.40)!important;background:linear-gradient(180deg,#fff,#fef1e2)!important}
.acs-day.today > strong{color:#a8521e!important}
.acs-day.sel{
background:linear-gradient(180deg,#1d4d33,#0f2f1f)!important;
border-color:transparent!important;
box-shadow:0 6px 14px -4px rgba(20,80,40,.45)!important;
}
.acs-day.sel > span{color:rgba(220,232,212,.75)!important}
.acs-day.sel > strong{color:#fff!important}
.acs-day.sel > em{color:#9be4b1!important}
/* Day card — slimmer */
.acs-day-card.card{
padding:12px 14px!important;
border-radius:14px!important;
background:#fff!important;
border:1px solid rgba(58,93,59,.18)!important;
box-shadow:0 4px 12px -6px rgba(20,40,20,.10)!important;
}
.acs-day-head .pill{
font-size:9.5px!important;font-weight:800!important;letter-spacing:.05em!important;
text-transform:uppercase!important;padding:3px 9px!important;border-radius:20px!important;
}
/* Empty state on day card */
.acs-day-card .empty{
text-align:center!important;padding:18px 0 6px!important;color:#5a6a5d!important;
}
.acs-day-card .empty svg{width:32px!important;height:32px!important;opacity:.4!important;color:#1d4d33!important}
.acs-day-card .empty p{font-size:12.5px!important;margin-top:6px!important;font-weight:600!important}
/* Xero exports — slim */
.clock-exports.card{
padding:0!important;
border-radius:14px!important;
background:#fff!important;
border:1px solid rgba(58,93,59,.18)!important;
}
.clock-exports > summary{
list-style:none!important;
padding:11px 14px!important;
display:flex!important;align-items:center!important;gap:10px!important;
cursor:pointer!important;
}
.clock-exports > summary::-webkit-details-marker{display:none!important}
.clock-exports > summary strong{font-size:13.5px!important;color:#142016!important;font-weight:800!important}
.clock-exports > summary > span{font-size:11px!important;color:#5a6a5d!important;font-weight:600!important;margin-left:auto!important}
.clock-exports .ce-chev{width:20px!important;height:20px!important;color:#5a6a5d!important}
.clock-exports .ce-chev svg{width:14px!important;height:14px!important;transform:rotate(180deg)!important}
.clock-exports[open] .ce-chev{transform:rotate(-90deg)!important}
/* On desktop: keep things proportional but slightly more generous */
@media(min-width:1024px){
}
/* ============================================================
EMPLOYEE TIMESHEETS SUB-TAB — cohesive professional layout
============================================================ */
.emp-ts-zone{display:flex;flex-direction:column;gap:10px;margin-top:10px}
/* Hero band — matches admin clock hero */
.ets-hero{
padding:2px 2px 0;
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:none;border:0;color:var(--ink);
}
.ets-hero h2{
font-family:"Inter Tight",-apple-system,BlinkMacSystemFont,sans-serif;
font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
color:var(--clay-600,#a35a35);margin:0 0 4px;line-height:1;
}
.ets-hero p{
margin:0;padding:0;background:none;border:0;box-shadow:none;
font-size:17px;color:var(--ink,#142016);font-weight:800;letter-spacing:-.015em;
}
.ets-week-line{opacity:1}
.ets-week-nav{display:flex;gap:6px;flex-shrink:0}
.ets-week-nav .rh-nav{
width:34px;height:34px;
background:var(--cream-50,#fbf8f1);
border:1px solid rgba(163,90,53,.22);
color:var(--clay-700,#8a4a2c);
border-radius:10px;
}
.ets-week-nav .rh-nav svg{width:15px;height:15px}
/* Design 2 — clay & airy pay tile */
.ets-paytile{
margin-top:12px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:
radial-gradient(130% 200% at 90% 30%, rgba(199,138,74,.50) 0%, transparent 60%),
linear-gradient(135deg,#2f5238 0%,#16301f 100%);
border:1px solid rgba(199,154,78,.30);
border-radius:14px;
padding:10px 14px;
box-shadow:0 6px 16px -10px rgba(20,45,28,.5);
}
.ets-paytile-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;}
.ets-paytile-l em{
font-style:normal;font-size:9px;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:#e8c79a;width:100%;line-height:1;
}
.ets-paytile-l strong{
font-family:"Inter Tight",-apple-system,sans-serif;
font-size:28px;font-weight:900;color:#fff;
letter-spacing:-.025em;line-height:1;
text-shadow:0 1px 4px rgba(8,20,12,.35);
}
.ets-paytile-l span{font-size:11px;color:rgba(232,240,224,.7);font-weight:700;}
.ets-paytile-ring{
position:relative;flex-shrink:0;width:44px;height:44px;border-radius:50%;
background:conic-gradient(#e0a857 0 42%, rgba(255,255,255,.16) 42% 100%);
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 6px rgba(8,20,12,.3);
}
.ets-paytile-ring::before{
content:"";position:absolute;inset:5px;border-radius:50%;
background:#16301f;
}
.ets-paytile-ring span{
position:relative;z-index:1;
font-size:10.5px;font-weight:900;color:#fff;letter-spacing:-.01em;
}
.ets-paytile-ring span{
position:relative;z-index:1;
font-size:12px;font-weight:900;color:#fff;letter-spacing:-.01em;
}
.ets-stat.hero{display:none;}
.ets-stat-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;
}
.ets-mini{
background:var(--sage-50,#eef3e7);
border:1px solid rgba(58,93,59,.14);
border-radius:13px;
padding:10px 11px;
display:flex;flex-direction:column;gap:2px;
box-shadow:none;
}
.ets-mini em{
font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:#5a6a5d;
}
.ets-mini strong{
font-family:"Inter Tight",-apple-system,sans-serif;
font-size:18px;font-weight:800;color:#142016;line-height:1;
}
.ets-mini.warn{background:#fbe7e2;border-color:rgba(163,90,53,.28);}
.ets-mini.warn em,.ets-mini.warn strong{color:var(--clay-600,#a35a35);}
/* download weekly summary button */
.ets-download{
width:100%;margin-top:10px;
display:flex;align-items:center;justify-content:center;gap:8px;
background:#fff;border:1.5px solid rgba(163,90,53,.30);
color:var(--clay-700,#8a4a2c);
font-size:13.5px;font-weight:800;letter-spacing:-.005em;
padding:12px;border-radius:13px;cursor:pointer;
box-shadow:0 2px 8px rgba(163,90,53,.12);
transition:transform .12s ease, background .15s ease;
}
.ets-download svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.ets-download:active{transform:scale(.98);background:var(--cream-50,#fbf8f1);}
.ets-day-row{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:5px;
margin:14px 0 2px;
}
.ets-day{
background:#fff;
border:1px solid rgba(58,93,59,.14);
border-radius:12px;
padding:9px 2px 8px;
display:flex;flex-direction:column;align-items:center;gap:3px;
transition:all .15s ease;
cursor:pointer;
box-shadow:0 1px 2px rgba(20,40,20,.04);
}
.ets-day:hover{border-color:rgba(58,120,70,.4)}
.ets-day > span{
font-size:9px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:#8a968b;
}
.ets-day > strong{font-size:15px;font-weight:800;color:#142016;line-height:1}
.ets-day > em{font-size:9.5px;color:#3a5a3d;font-weight:700;font-style:normal}
.ets-day.today{border-color:rgba(168,82,40,.40);background:linear-gradient(180deg,#fff,#fef1e2)}
.ets-day.today > strong{color:#a8521e}
.ets-day.sel{
background:linear-gradient(180deg,#1d4d33,#0f2f1f);
border-color:transparent;
box-shadow:0 6px 14px -4px rgba(20,80,40,.45);
}
.ets-day.sel > span{color:rgba(220,232,212,.75)}
.ets-day.sel > strong{color:#fff}
.ets-day.sel > em{color:#9be4b1}
/* Day card */
.ets-day-card{
padding:12px 14px;
border-radius:14px;
background:#fff;
border:1px solid rgba(58,93,59,.18);
box-shadow:0 4px 12px -6px rgba(20,40,20,.10);
}
.ets-day-head{
display:flex;align-items:center;justify-content:space-between;
gap:10px;margin-bottom:10px;
}
.ets-day-head strong{
font-size:14px;color:#142016;font-weight:800;
display:block;
}
.ets-day-head span{font-size:11.5px;color:#5a6a5d;font-weight:600}
.ets-day-head .btn{
flex-shrink:0;height:32px;padding:0 12px;font-size:12px;
display:inline-flex;align-items:center;gap:4px;
}
.ets-day-head .btn svg{width:13px;height:13px}
/* Empty state */
.ets-empty{
text-align:center;padding:18px 6px 6px;
}
.ets-empty svg{width:34px;height:34px;color:#1d4d33;opacity:.4}
.ets-empty p{font-size:13px;color:#2a3a2c;font-weight:700;margin:8px 0 2px}
.ets-empty span{font-size:11.5px;color:#5a6a5d;font-weight:500;display:block}
.ts-day-row{display:none!important}
.timesheet-zone > .section-head{display:none!important}
.ts-day-card{display:none!important}
/* On desktop give it some breathing room */
@media(min-width:1024px){
.ets-hero h2{font-size:22px}
.ets-stat.hero strong{font-size:32px}
.ets-mini strong{font-size:18px}
.ets-day > strong{font-size:16px}
}
/* ============================================================
ADMIN TIMESHEETS — matches employee pattern, cohesive flow
============================================================ */
.adts-zone{display:flex;flex-direction:column;gap:10px;margin-top:10px}
/* Hero band */
.adts-hero{
padding:12px 16px;
border-radius:16px;
background:linear-gradient(135deg,#1d4d33 0%,#0f2f1f 100%);
border:1px solid rgba(255,255,255,.10);
color:#fff;
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.adts-hero h2{
font-family:var(--font-display,'Fraunces',serif);
font-size:18px;font-weight:600;letter-spacing:-.015em;
color:#fff;margin:0;line-height:1.1;
}
.adts-hero p{font-size:11.5px;color:rgba(220,232,212,.78);margin:2px 0 0;font-weight:500}
/* Section eyebrow labels — make each heading unique & clearly differentiated */
.adts-eyebrow{
display:block;font-style:normal;
font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
margin-bottom:3px;line-height:1;
}
.adts-pic-copy .adts-eyebrow{color:#3a7346;}
.adts-emp-copy .adts-eyebrow{color:var(--clay-600,#a35a35);}
.adts-day-head .adts-eyebrow{color:#8a968b;}
.adts-week-nav{display:flex;gap:6px;flex-shrink:0}
.adts-week-nav .rh-nav{
width:34px;height:34px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
color:#fff;border-radius:10px;
}
.adts-week-nav .rh-nav svg{width:15px;height:15px}
/* Stats: hero payroll tile + 4 mini */
.adts-stats{
display:grid;
grid-template-columns:1.25fr 1fr;
gap:8px;
}
.adts-stat.hero{
background:linear-gradient(135deg,#23663e 0%,#143d23 100%);
border:1px solid rgba(255,255,255,.10);
color:#fff;
border-radius:14px;
padding:13px 14px 12px;
display:flex;flex-direction:column;justify-content:space-between;gap:4px;
box-shadow:0 6px 16px -8px rgba(20,80,40,.45);
position:relative;overflow:hidden;
}
.adts-stat.hero::after{
content:"";position:absolute;right:-30px;top:-30px;
width:100px;height:100px;border-radius:50%;
background:radial-gradient(circle,rgba(62,230,134,.22),transparent 70%);
pointer-events:none;
}
.adts-stat.hero.has-pending::after{background:radial-gradient(circle,rgba(232,148,80,.22),transparent 70%)}
.adts-stat.hero em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(220,232,212,.78)}
.adts-stat.hero strong{font-family:var(--font-display,'Fraunces',serif);font-size:26px;font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em}
.adts-stat.hero span{font-size:10.5px;color:rgba(220,232,212,.65);font-weight:600}
.adts-stat-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
}
.adts-mini{
background:#fff;
border:1px solid rgba(58,93,59,.16);
border-radius:11px;
padding:8px 10px;
display:flex;flex-direction:column;gap:1px;
box-shadow:0 1px 3px rgba(20,40,20,.05);
}
.adts-mini em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5a6a5d}
.adts-mini strong{font-family:var(--font-display,'Fraunces',serif);font-size:16px;font-weight:700;color:#142016;line-height:1.05}
.adts-mini.warn em,.adts-mini.warn strong{color:#a8392f}
/* Employee picker — clean white with sage chip */
.adts-picker{
background:#fff;
border:1px solid rgba(58,93,59,.18);
border-radius:14px;
box-shadow:0 2px 8px -4px rgba(20,40,20,.08);
overflow:hidden;
}
.adts-picker > summary{
list-style:none;
padding:11px 14px;
display:flex;align-items:center;gap:11px;
cursor:pointer;
}
.adts-picker > summary::-webkit-details-marker{display:none}
.adts-pic-ic{
width:30px;height:30px;flex-shrink:0;
border-radius:9px;display:grid;place-items:center;
background:linear-gradient(135deg,#1d4d33,#0f2f1f);
color:#fff;
}
.adts-pic-ic svg{width:15px;height:15px;stroke-width:2}
.adts-pic-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.adts-pic-copy strong{font-size:15px;color:#142016;font-weight:800;letter-spacing:-.01em}
.adts-pic-copy span{font-size:11px;color:#5a6a5d;font-weight:600}
.adts-picker .ce-chev{width:22px;height:22px;color:#5a6a5d;transition:transform .2s ease;flex-shrink:0}
.adts-picker .ce-chev svg{width:14px;height:14px;transform:rotate(180deg)}
.adts-picker[open] .ce-chev{transform:rotate(-90deg)}
.adts-emp-list{display:flex;flex-direction:column;gap:0;padding:0 6px 6px}
.adts-emp-btn{
display:flex;align-items:center;gap:11px;
width:100%;padding:9px 10px;background:transparent;border:0;
border-top:1px solid rgba(58,93,59,.10);text-align:left;cursor:pointer;
transition:background .12s ease;
}
.adts-emp-btn:hover{background:rgba(58,93,59,.05)}
.adts-emp-btn.active{background:linear-gradient(135deg,rgba(58,120,70,.10),rgba(58,120,70,.04))}
.adts-emp-btn .avatar{flex-shrink:0;width:30px;height:30px;font-size:11px}
.adts-emp-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.adts-emp-meta strong{font-size:13px;color:#142016;font-weight:700}
.adts-emp-meta em{font-size:10.5px;font-style:normal;color:#5a6a5d;font-weight:600}
.adts-emp-btn b{flex-shrink:0;font-size:11.5px;font-weight:800;color:#1d4d33;font-family:var(--font-display,'Fraunces',serif)}
.adts-emp-btn b.warn{color:#a8392f}
/* Selected employee card — name + nav + pay summary in one panel */
.adts-emp-card{
background:linear-gradient(135deg,#e8f1e3 0%,#dbe9d3 100%);
border:1px solid rgba(58,120,70,.30);
border-radius:14px;
box-shadow:0 6px 16px -8px rgba(20,80,40,.20);
overflow:hidden;
}
.adts-emp-head{
display:flex;align-items:center;gap:11px;
padding:11px 12px;
border-bottom:1px solid rgba(58,120,70,.18);
}
.adts-emp-av{
width:38px;height:38px;flex-shrink:0;
background:linear-gradient(135deg,#1d4d33,#0f2f1f)!important;
color:#fff!important;border:0!important;
font-size:13px;font-weight:800;
box-shadow:0 4px 10px -4px rgba(20,80,40,.4);
}
.adts-emp-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.adts-emp-copy strong{font-family:var(--font-display,'Fraunces',serif);font-size:19px;color:#142016;font-weight:600;letter-spacing:-.01em;line-height:1.05}
.adts-emp-copy span{font-size:11px;color:#3a5a3d;font-weight:600}
.adts-emp-nav{display:flex;gap:5px;flex-shrink:0}
.adts-nav-btn{
width:30px;height:30px;border-radius:9px;
background:rgba(255,255,255,.75);
border:1px solid rgba(58,120,70,.30);
color:#1d4d33;display:grid;place-items:center;
}
.adts-nav-btn:hover{background:#fff}
.adts-nav-btn svg{width:13px;height:13px}
.adts-emp-pay{
display:grid;
grid-template-columns:1.25fr 1fr;
gap:6px;
padding:10px;
}
.adts-emp-pay-hero{
background:linear-gradient(135deg,#1d4d33,#0f2f1f);
color:#fff;
border-radius:11px;
padding:9px 12px;
display:flex;flex-direction:column;gap:2px;
}
.adts-emp-pay-hero em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(220,232,212,.78)}
.adts-emp-pay-hero strong{font-family:var(--font-display,'Fraunces',serif);font-size:20px;font-weight:700;color:#fff;line-height:1}
.adts-emp-pay-mini{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.adts-emp-pay-mini > div{
background:#fff;
border:1px solid rgba(58,120,70,.18);
border-radius:9px;
padding:6px 8px;
display:flex;flex-direction:column;gap:1px;
}
.adts-emp-pay-mini em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5a6a5d}
.adts-emp-pay-mini strong{font-size:13px;color:#142016;font-weight:800;line-height:1.05}
/* Day chips */
.adts-day-row{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:4px;margin:2px 0;
}
.adts-day{
background:#fff;
border:1px solid rgba(58,93,59,.16);
border-radius:10px;
padding:7px 2px 6px;
display:flex;flex-direction:column;align-items:center;gap:1px;
transition:all .15s ease;cursor:pointer;
box-shadow:0 1px 2px rgba(20,40,20,.04);
}
.adts-day:hover{border-color:rgba(58,120,70,.4)}
.adts-day > span{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5a6a5d}
.adts-day > strong{font-size:14px;font-weight:800;color:#142016;line-height:1}
.adts-day > em{font-size:9.5px;color:#3a5a3d;font-weight:700;font-style:normal}
.adts-day.today{border-color:rgba(168,82,40,.40);background:linear-gradient(180deg,#fff,#fef1e2)}
.adts-day.today > strong{color:#a8521e}
.adts-day.sel{
background:linear-gradient(180deg,#1d4d33,#0f2f1f);
border-color:transparent;
box-shadow:0 6px 14px -4px rgba(20,80,40,.45);
}
.adts-day.sel > span{color:rgba(220,232,212,.75)}
.adts-day.sel > strong{color:#fff}
.adts-day.sel > em{color:#9be4b1}
/* Day card */
.adts-day-card{
padding:12px 14px;
border-radius:14px;
background:#fff;
border:1px solid rgba(58,93,59,.18);
box-shadow:0 4px 12px -6px rgba(20,40,20,.10);
}
.adts-day-head{
display:flex;align-items:center;justify-content:space-between;
gap:10px;margin-bottom:10px;
}
.adts-day-head strong{font-size:15px;color:#142016;font-weight:800;display:block;letter-spacing:-.01em}
.adts-day-head span{font-size:11.5px;color:#5a6a5d;font-weight:600}
.adts-day-head .pill{
font-size:9.5px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;padding:3px 9px;border-radius:20px;
}
.adts-empty{
text-align:center;padding:18px 6px 6px;
}
.adts-empty svg{width:34px;height:34px;color:#1d4d33;opacity:.4}
.adts-empty p{font-size:13px;color:#2a3a2c;font-weight:700;margin:8px 0 2px}
.adts-empty span{font-size:11.5px;color:#5a6a5d;font-weight:500;display:block}
/* Desktop */
@media(min-width:1024px){
.adts-hero h2{font-size:22px}
.adts-stat.hero strong{font-size:32px}
.adts-mini strong{font-size:18px}
.adts-emp-pay-hero strong{font-size:24px}
.adts-day > strong{font-size:16px}
}
/* ============================================================
CHAT THREAD — single header + sticky composer (mobile)
When a conversation is open on mobile we collapse the global
topbar and promote the thread head to be the one true header,
safely below the status bar. The message list scrolls freely
while the header stays pinned up top and composer pinned down.
============================================================ */
@media(max-width:1023px){
/* Hide the duplicate global "Messages / Team messages…" topbar
only while a single conversation is open. */
body.chat-thread-open .topbar{display:none!important}
body.chat-thread-open .main{padding-top:0!important}
body.chat-thread-open .content{padding:0!important;overflow:hidden!important}
body.chat-thread-open .page{height:100dvh!important}
/* The conversation becomes a fixed full-screen panel so the
header pins to the very top and the composer to the very
bottom, independent of any page scrolling. The panel fills
the entire screen and covers the bottom nav. */
body.chat-thread-open .chat-shell{
position:fixed!important;
top:0!important;left:0!important;right:0!important;
bottom:0!important;
height:100dvh!important;
min-height:0!important;
margin:0!important;
padding:0!important;
gap:0!important;
z-index:120!important;
}
body.chat-thread-open .chat-list{display:none!important}
body.chat-thread-open .chat-thread{
display:flex!important;
flex-direction:column!important;
height:100dvh!important;
border-radius:0!important;
box-shadow:none!important;
}
/* Fixed header below the status bar. */
body.chat-thread-open .chat-thread-head{
flex:0 0 auto!important;
padding-top:calc(12px + var(--safe-t))!important;
padding-bottom:12px!important;
min-height:calc(54px + var(--safe-t))!important;
align-items:center!important;
border-radius:0!important;
}
body.chat-thread-open .cth-back{display:grid!important}
/* The ONLY scrolling area. */
body.chat-thread-open .chat-scroll{
flex:1 1 auto!important;
min-height:0!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior:contain!important;
}
/* Composer pinned to the very bottom, over where the nav was. */
body.chat-thread-open .chat-composer{
flex:0 0 auto!important;
padding:12px 12px calc(12px + var(--safe-b))!important;
gap:10px!important;
background:var(--cream-50)!important;
border-top:1px solid var(--line)!important;
border-radius:0!important;
}
body.chat-thread-open .chat-composer .input{
border-radius:20px!important;
font-size:16px!important; /* 16px stops iOS zoom-on-focus */
}
body.chat-thread-open .chat-composer .csend{
width:44px!important;
height:44px!important;
border-radius:16px!important;
flex-shrink:0!important;
}
body.chat-thread-open .chat-readonly{
flex:0 0 auto!important;
padding-bottom:calc(16px + var(--safe-b))!important;
}
/* Hide the bottom nav entirely while a conversation is open so
the composer covers it. Back arrow returns to the list. */
body.chat-thread-open .mobile-nav{display:none!important}
body.chat-thread-open .content,
body.chat-thread-open .page{padding-bottom:0!important}
body.chat-thread-open::after,
body.chat-thread-open .content::after{display:none!important}
}
/* Client delete button + archived employee cards */
.client-card-list{position:relative}
.client-del-btn{
flex-shrink:0;width:38px;height:38px;border-radius:12px;
display:grid;place-items:center;
background:#fff;border:1px solid rgba(168,57,47,.28);color:#a8392f;
transition:background .15s,border-color .15s;
}
.client-del-btn:hover{background:#fdf0ee;border-color:rgba(168,57,47,.5)}
.client-del-btn svg{width:18px;height:18px}
.archived-card{opacity:.82}
.archived-card .dir-main em{color:var(--ink-500)}
@media(max-width:1023px){
.client-del-btn{width:34px;height:34px;border-radius:11px}
.client-del-btn svg{width:16px;height:16px}
}
/* ============================================================
FLOATING NAV — bottom offset fix (installed PWA)
In an installed app the home-indicator safe-area inset is large
(~34px). Stacking a fixed 8px margin on top of the full inset
left the pill floating too high with a big gap underneath. We
instead sit the pill a small fixed distance above the safe area,
so it hugs the bottom on browsers (where inset is 0) AND in the
installed app (where the inset already provides clearance).
============================================================ */
@media(max-width:1023px){
}
@media(max-width:380px){
}
/* ============================================================
ROSTER CARD — v3 BOLD: saturated, colour-filled, standout
The whole card is washed in the client's colour (not just a
rail), with a solid colour time panel. High contrast + vivid.
Still slim enough that 4-5 fit on a phone screen.
============================================================ */
.rcard{
position:relative;
display:flex;
align-items:stretch;
gap:0;
background:
linear-gradient(135deg,
color-mix(in srgb,var(--solid) 22%,#fff) 0%,
color-mix(in srgb,var(--solid) 11%,#fff) 55%,
color-mix(in srgb,var(--solid) 16%,#fff) 100%);
border:1px solid color-mix(in srgb,var(--solid) 38%,transparent);
border-radius:15px;
margin-bottom:7px;
overflow:hidden;
box-shadow:0 4px 12px color-mix(in srgb,var(--solid) 22%,transparent), 0 1px 2px rgba(20,31,23,.06);
transition:transform .14s ease, box-shadow .14s ease;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.rcard:active{transform:scale(.992)}
@media(hover:hover){.rcard:hover{box-shadow:0 8px 20px color-mix(in srgb,var(--solid) 32%,transparent);transform:translateY(-1px)}}
.rcard.is-draft{
background:
repeating-linear-gradient(135deg,
color-mix(in srgb,var(--solid) 15%,#fff) 0px,
color-mix(in srgb,var(--solid) 15%,#fff) 9px,
color-mix(in srgb,var(--solid) 7%,#fff) 9px,
color-mix(in srgb,var(--solid) 7%,#fff) 18px);
border-style:dashed;
}
/* solid colour time panel — the big pop */
.rc-time{
flex:0 0 60px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:7px 4px;
background:linear-gradient(165deg,var(--solid),var(--deep));
color:#fff;
}
.rc-time strong{
font-family:var(--font-display,Georgia,serif);
font-size:17px;font-weight:800;line-height:1;color:#fff;
display:flex;align-items:baseline;gap:1px;letter-spacing:-.02em;
text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.rc-time strong i{font-size:9px;font-style:normal;font-weight:800;opacity:.85}
.rc-dur{
font-size:9.5px;font-weight:800;letter-spacing:.01em;
color:var(--deep);background:rgba(255,255,255,.92);
padding:2px 7px;border-radius:999px;line-height:1;white-space:nowrap;
}
.rc-dot.on{background:var(--solid);box-shadow:0 0 0 3px color-mix(in srgb,var(--solid) 28%,transparent)}
.rc-dot.off{background:#c9821a;box-shadow:0 0 0 3px rgba(201,130,26,.22)}
.rc-meta{display:flex;align-items:center;gap:5px;font-size:11px;color:color-mix(in srgb,var(--deep) 72%,#5d6b60);min-width:0;font-weight:600}
.rc-addr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rc-av{
width:20px;height:20px;border-radius:50%;margin-left:-6px;
display:grid;place-items:center;
font-size:8.5px;font-weight:800;color:#fff;
background:linear-gradient(150deg,var(--solid),var(--deep));
border:2px solid color-mix(in srgb,var(--solid) 16%,#fff);
}
.rc-av:first-child{margin-left:0}
.rc-av-more,.rc-av-empty{background:var(--deep);color:#fff;opacity:.55}
.rc-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* action buttons — slim, on the colour wash */
.rc-act{
height:29px;border-radius:9px;border:none;cursor:pointer;
font-size:11px;font-weight:800;letter-spacing:-.01em;
display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 12px;
transition:filter .14s ease, background .14s ease, transform .1s ease;
}
.rc-act:active{transform:scale(.95)}
.rc-act svg{width:13px;height:13px}
.rc-pub.is-pub{background:linear-gradient(180deg,var(--solid),var(--deep));color:#fff;box-shadow:0 2px 6px color-mix(in srgb,var(--solid) 40%,transparent)}
.rc-pub.is-pub:hover{filter:brightness(1.08)}
.rc-accept{background:linear-gradient(180deg,var(--solid),var(--deep));color:#fff;box-shadow:0 2px 6px color-mix(in srgb,var(--solid) 40%,transparent)}
.rc-accept:hover{filter:brightness(1.08)}
.rc-reject{width:29px;padding:0;background:rgba(255,255,255,.85);color:#b03a2c}
.rc-start{background:linear-gradient(180deg,var(--solid),var(--deep));color:#fff;box-shadow:0 2px 6px color-mix(in srgb,var(--solid) 40%,transparent)}
.rc-emp-state{
height:29px;padding:0 12px;border-radius:9px;display:inline-flex;align-items:center;gap:4px;
font-size:11px;font-weight:800;
}
.rc-emp-state svg{width:13px;height:13px}
.rc-done{background:linear-gradient(180deg,var(--solid),var(--deep));color:#fff}
.rc-declined{background:#fdeeec;color:#b03a2c}
.rc-locked{background:rgba(255,255,255,.8);color:var(--deep)}
/* tighten for small phones so 4+ cards always fit */
@media(max-width:430px){
.rcard{border-radius:15px;margin-bottom:8px}
.rc-time{flex-basis:60px;padding:8px 4px}
.rc-time strong{font-size:16px}
.rc-dur{font-size:9px;padding:2px 6px}
.rc-meta{font-size:10.5px}
.rc-av{width:21px;height:21px;font-size:8.5px}
.rc-act,.rc-emp-state{height:27px;font-size:10.5px;padding:0 10px}
.rc-act-edit,.rc-reject{width:27px}
}
@media(max-width:360px){
.rc-time{flex-basis:56px}
}
/* ----- skinny + consistent roster cards across all users (mobile) ----- */
@media(max-width:1023px){
.rcard{margin-bottom:6px;border-radius:13px;align-items:stretch}
.rc-time{flex:0 0 52px;padding:5px 4px;gap:2px}
.rc-time strong{font-size:14px}
.rc-time strong i{font-size:8px}
.rc-dur{font-size:8.5px;padding:1px 6px}
.rc-status{font-size:9px;padding:2px 7px}
.rc-meta{font-size:10px;margin-top:0;gap:4px}
.rc-av{width:18px;height:18px;font-size:8px;margin-left:-5px}
.rc-emp-actions .rc-act,.rc-emp-actions .rc-emp-state{height:28px;font-size:11px}
}
/* ============================================================
CONVERSATION LIST — clean, professional, smooth (cv- classes)
Replaces the old cl-/ct- styling. Crisp cards, clear hierarchy,
buttery scrolling, distinct types (team / announcement / DM).
============================================================ */
.cv-list{
display:flex;flex-direction:column;min-height:0;width:100%;
background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;
}
.cv-head{
display:flex;align-items:center;justify-content:space-between;
padding:4px 4px 12px;background:transparent!important;border:none!important;
}
.cv-head-label{
font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-400,#8a958180);color:#7c8a72;
}
.cv-new{
width:38px;height:38px;border-radius:13px;flex-shrink:0;
display:grid;place-items:center;cursor:pointer;
background:linear-gradient(145deg,var(--forest-500,#3f6b3e),var(--forest-700,#1d3d24))!important;
color:#fff!important;border:none!important;
box-shadow:0 4px 12px rgba(31,61,36,.28);
transition:transform .12s ease, filter .12s ease;
}
.cv-new:hover{filter:brightness(1.08)}
.cv-new:active{transform:scale(.93)}
.cv-new svg{width:19px;height:19px;stroke-width:2.4}
.cv-threads{
flex:1;min-height:0;overflow-y:auto;
display:flex;flex-direction:column;gap:7px;
padding:2px 2px 16px;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
/* ============================================================
MESSAGE LIST — clean, professional, responsive (redesigned v117)
One cohesive list. Company chats (Team / Photos / Notice) get a
subtle grouped treatment with a small soft type tag — no heavy
colour blocks. Clear name / preview / time hierarchy. Unread is
shown with weight + a small dot, not loud backgrounds.
============================================================ */
.cv-threads{
flex:1;min-height:0;overflow-y:auto;
display:flex;flex-direction:column;gap:0;
padding:4px 0 20px;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
/* base row */
.cv-row{
position:relative;display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;width:100%;
padding:12px 10px;border:0;border-radius:14px;
background:transparent;box-shadow:none;
transition:background .14s ease;
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.cv-row + .cv-row{margin-top:1px}
.cv-row:active{background:rgba(20,31,23,.05)}
@media(hover:hover){.cv-row:hover{background:rgba(20,31,23,.04)}}
.cv-row.active{background:rgba(63,107,62,.10)}
/* avatar */
.cv-av{flex-shrink:0;position:relative}
.cv-av .avatar{
width:48px!important;height:48px!important;border-radius:50%!important;
display:grid;place-items:center;font-size:15.5px;font-weight:800;
box-shadow:0 1px 2px rgba(20,31,23,.10);
}
.cv-av .avatar svg{width:21px;height:21px}
.cv-type-team .cv-av .avatar{background:linear-gradient(150deg,#4257b8,#2b3683)!important;color:#fff!important}
.cv-type-announcement .cv-av .avatar{background:linear-gradient(150deg,#d98a44,#b1601f)!important;color:#fff!important}
.cv-type-workphotos .cv-av .avatar{background:linear-gradient(150deg,#17b39a,#0c7a64)!important;color:#fff!important;border-radius:50%!important;border:0!important}
.cv-type-group .cv-av .avatar{background:linear-gradient(150deg,#5a8f7e,#36634f)!important;color:#fff!important}
/* body */
.cv-body{flex:1;min-width:0;display:flex!important;flex-direction:column;gap:2px}
.cv-top{display:flex!important;align-items:center;gap:8px;width:100%}
.cv-name{
flex:1;min-width:0;font-size:16px;font-weight:650;letter-spacing:-.01em;color:#1a241c;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cv-time{flex-shrink:0;font-size:12px;font-weight:600;color:#9aa090}
.cv-sub{display:none!important}
.cv-last{
display:block!important;
font-size:13.5px;color:#5d6b60;line-height:1.35;font-weight:500;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cv-empty{font-style:normal;color:#aab1a2}
.cv-chev{display:none!important}
/* ===== Company chats: subtle grouped section, soft type tag ===== */
.cv-pinned{
background:rgba(248,250,245,.7);
border-radius:14px;
}
.cv-pinned.active{background:rgba(63,107,62,.10)}
/* a slim, calm accent dot on the avatar instead of a thick rail */
.cv-pinned::before{display:none!important}
/* small, soft type tag next to the name (not a loud pill) */
.cv-pintag{
position:static;transform:none;flex-shrink:0;
display:inline-flex;align-items:center;gap:4px;
padding:2px 8px;border-radius:7px;
font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
line-height:1.6;
}
.cv-pintag svg{display:none!important}
.cv-type-team .cv-pintag{background:rgba(66,87,184,.12);color:#3a4bb0}
.cv-type-team .cv-pintag::after{content:"Team"}
.cv-type-workphotos .cv-pintag{background:rgba(23,179,154,.16);color:#0b7560}
.cv-type-workphotos .cv-pintag::after{content:"Photos"}
.cv-type-announcement .cv-pintag{background:rgba(217,138,68,.18);color:#a85b22}
.cv-type-announcement .cv-pintag::after{content:"Notice"}
/* tag sits inline in the top row, before the time; keep everything aligned */
.cv-pinned .cv-time{display:none!important}
.cv-pinned .cv-top{padding-right:0}
.cv-pinned .cv-last{padding-right:0}
/* ===== Unread vs read ===== */
.cv-read .cv-name{font-weight:650;color:#2a342c}
.cv-read .cv-last{color:#8a948a;font-weight:500}
.cv-unread .cv-name{font-weight:800;color:#0f1f17}
.cv-unread .cv-last{color:#33402f;font-weight:650}
.cv-unread .cv-time{color:#2f6b3e;font-weight:800}
.cv-unread-dot{
position:absolute;top:0;right:0;
width:13px;height:13px;border-radius:50%;
background:#2f8f4e;border:2.5px solid #eef3ea;
}
.cv-pinned .cv-unread-dot{border-color:#f6f8f2}
/* read / unread toggle — clean circular control */
.cv-readtoggle{
flex-shrink:0;min-width:38px;width:38px;height:38px;border-radius:50%;
display:grid;place-items:center;cursor:pointer;
color:#fff;background:#cfd6c8;
box-shadow:0 1px 2px rgba(20,31,23,.14);
transition:background .14s ease,color .14s ease,transform .1s ease;
-webkit-tap-highlight-color:transparent;z-index:2;
}
.cv-readtoggle svg{width:17px;height:17px;stroke-width:2.8}
.cv-readtoggle:active{transform:scale(.86)}
@media(hover:hover){.cv-readtoggle:hover{filter:brightness(.96)}}
.cv-unread .cv-readtoggle{background:#2f8f4e;color:#fff}
.cv-read .cv-readtoggle{background:#fff;color:#9aa79a;border:1.5px solid #d4dccd}
/* responsive: comfortable on phone, roomier on desktop */
@media(max-width:430px){
.cv-row{padding:11px 8px;gap:12px}
.cv-av .avatar{width:46px!important;height:46px!important}
.cv-name{font-size:15.5px}
.cv-last{font-size:13px}
.cv-readtoggle{min-width:36px;width:36px;height:36px}
}
@media(min-width:1024px){
.cv-row{padding:13px 12px}
.cv-name{font-size:16.5px}
.cv-last{font-size:14px}
}
/* ============================================================
CHAT ATTACHMENTS — attach button + in-bubble previews
============================================================ */
.chat-composer .cattach{
flex-shrink:0;width:46px;height:46px;border-radius:23px;
display:grid;place-items:center;cursor:pointer;
background:#fff;border:1px solid var(--line,rgba(20,31,23,.1));
color:var(--forest-700,#1d3d24);
transition:background .14s ease, transform .1s ease;
}
.chat-composer .cattach:hover{background:var(--cream-100,#f3eee2)}
.chat-composer .cattach:active{transform:scale(.93)}
.chat-composer .cattach svg{width:20px;height:20px;stroke-width:2;fill:none;stroke:currentColor}
@media(max-width:1023px){
body.chat-thread-open .chat-composer .cattach{width:44px;height:44px;border-radius:22px}
body.chat-thread-open .chat-composer .cattach svg{width:20px;height:20px}
}
/* ============================================================
PRESENCE · TYPING · REACTIONS · POST COMMENTS (new features)
============================================================ */
/* online / last-active in chat header */
.cth-presence{display:inline-flex;align-items:center;gap:5px}
.cth-presence.is-online{color:#2f8f4e;font-weight:700}
.cth-dot{width:8px;height:8px;border-radius:50%;background:#2f8f4e;box-shadow:0 0 0 2px rgba(47,143,78,.2)}
/* typing indicator */
.typing-row{display:flex;align-items:center;gap:8px;padding:4px 10px 10px;color:#5d6b60;font-size:12.5px}
.typing-dots{display:inline-flex;gap:3px}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:#9aa79a;display:inline-block;animation:typingBounce 1.2s infinite ease-in-out}
.typing-dots i:nth-child(2){animation-delay:.18s}
.typing-dots i:nth-child(3){animation-delay:.36s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.typing-dots i{animation:none}}
/* message reactions */
.msg{position:relative}
.msg-react-btn{
flex-shrink:0;align-self:flex-end;margin:0 4px 4px;width:28px;height:28px;border-radius:50%;
display:grid;place-items:center;background:#fff;border:1px solid rgba(20,31,23,.12);color:#7c8a72;
opacity:0;cursor:pointer;transition:opacity .12s ease,transform .1s ease;
}
.msg:hover .msg-react-btn,.msg:active .msg-react-btn{opacity:1}
.msg-react-btn svg{width:15px;height:15px}
.msg-react-btn:active{transform:scale(.88)}
@media(hover:none){.msg-react-btn{opacity:.65}}
.msg-rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.rx-chip{
display:inline-flex;align-items:center;gap:3px;
padding:2px 8px;border-radius:999px;font-size:12px;line-height:1.4;cursor:pointer;
background:rgba(255,255,255,.7);border:1px solid rgba(20,31,23,.12);color:#2a342c;
}
.msg.mine .rx-chip{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.3);color:#fff}
.rx-chip.mine{background:#dcefe0;border-color:#9fd3ab;color:#1d5d35}
.rx-chip .rx-n{font-weight:800;font-size:11px}
/* emoji picker modal */
.emoji-pick{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:14px 4px 6px}
.emoji-pick-btn{
width:54px;height:54px;border-radius:16px;border:1px solid rgba(20,31,23,.1);background:#fff;
font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;
transition:transform .1s ease,background .12s ease;
}
.emoji-pick-btn:active{transform:scale(.88)}
@media(hover:hover){.emoji-pick-btn:hover{background:#f1f5ec}}
/* update reactions */
.upd-react{margin-top:10px}
.upd-react-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.upd-react-add{
width:30px;height:30px;border-radius:50%;border:1px dashed rgba(20,31,23,.22);background:#fff;color:#7c8a72;
display:grid;place-items:center;cursor:pointer;
}
.upd-react-add svg{width:16px;height:16px}
.upd-react-add:active{transform:scale(.9)}
/* update comments */
.upd-comments{margin-top:12px;border-top:1px solid rgba(20,31,23,.08);padding-top:10px}
.upd-comments-head{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8a958a;margin-bottom:8px}
.upd-comment{display:flex;gap:9px;margin-bottom:10px}
.ucm-av .avatar{width:32px!important;height:32px!important;font-size:12px}
.ucm-body{flex:1;min-width:0}
.ucm-top{display:flex;align-items:baseline;gap:7px}
.ucm-name{font-weight:700;font-size:13.5px;color:#1a241c}
.ucm-time{font-size:11px;color:#9aa090}
.ucm-text{font-size:14px;color:#2f3a32;line-height:1.4;margin-top:1px}
.ucm-reply-btn{margin-top:3px;background:none;border:0;color:#2f6b3e;font-size:12px;font-weight:700;cursor:pointer;padding:2px 0}
.ucm-replies{margin-top:6px;padding-left:10px;border-left:2px solid rgba(20,31,23,.08);display:flex;flex-direction:column;gap:4px}
.ucm-reply{font-size:13px;color:#3a4a3e}
.ucm-reply .ucm-name{font-size:12.5px}
.ucm-reply .ucm-time{margin-left:4px}
.upd-comment-add{display:flex;gap:8px;align-items:center;margin-top:8px}
.upd-comment-input{
flex:1;min-width:0;height:40px;padding:0 13px;border-radius:20px;
border:1px solid rgba(20,31,23,.15);background:#fff;font-size:14px;outline:none;
}
.upd-comment-input:focus{border-color:#4a7351;box-shadow:0 0 0 3px rgba(74,115,81,.13)}
.upd-comment-send{
flex-shrink:0;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
background:linear-gradient(145deg,#3f6b3e,#1d3d24);color:#fff;display:grid;place-items:center;
}
.upd-comment-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.upd-comment-send:active{transform:scale(.9)}
/* image attachment in a bubble */
.b-attach-img{display:block;margin:0 0 5px;padding:0;border:none;background:none;border-radius:12px;overflow:hidden;max-width:240px;cursor:pointer;width:100%}
.b-attach-img img{display:block;width:100%;height:auto;max-height:300px;object-fit:cover;border-radius:12px}
.b-attach-img:active{opacity:.9}
/* file (non-image) attachment chip */
.b-attach-file{
display:flex;align-items:center;gap:9px;margin:0 0 5px;
padding:9px 11px;border-radius:12px;cursor:pointer;text-align:left;width:100%;
background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.07);color:inherit;
max-width:240px;
}
.b-attach-file:active{opacity:.85}
.msg.mine .b-attach-file{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22)}
.baf-ic{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(0,0,0,.06);color:inherit}
.msg.mine .baf-ic{background:rgba(255,255,255,.18)}
.baf-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.baf-meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.baf-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.baf-size{font-size:10.5px;opacity:.7}
/* attachment viewer modal */
.attach-view{display:flex;align-items:center;justify-content:center;background:#0c130d;border-radius:14px;overflow:hidden;min-height:160px}
.attach-view img{max-width:100%;max-height:64vh;display:block;object-fit:contain}
.attach-view-pdf{background:#fff;min-height:0}
.attach-view-pdf iframe{width:100%;height:62vh;border:0;border-radius:14px;background:#fff}
.attach-view-generic{flex-direction:column;gap:8px;background:var(--cream-100,#f3eee2);color:var(--ink-700,#3a4a3c);padding:32px 18px}
.attach-view-generic .avg-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:#fff;color:var(--forest-700,#1d3d24)}
.attach-view-generic .avg-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7}
.attach-view-generic strong{font-size:15px}
.attach-hint{font-size:11.5px;color:var(--ink-500,#5d6b60);text-align:center;margin:8px 0 0}
.modal-foot .btn[href]{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.modal-foot .btn[href] svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
/* ============================================================
DOCUMENT SIGN & FILL — assign fields, signature pad, viewer
============================================================ */
.ad-fields{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.ad-field-row{display:flex;gap:7px;align-items:center}
.ad-field-row .ad-field-name{flex:1}
.ad-field-del{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fdeeec;border:1px solid rgba(168,57,47,.2);color:#b03a2c;cursor:pointer}
.ad-field-del svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.sign-doc-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line,#e7e2d5)}
.sign-doc-head strong{font-size:16px;font-weight:800;color:var(--ink-900,#1a241c)}
.sign-doc-head span{font-size:12px;color:var(--ink-500,#5d6b60)}
.btn-block{margin-bottom:12px}
.sign-fields-wrap{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.sign-pad-wrap{position:relative;border:2px dashed rgba(63,107,62,.32);border-radius:14px;background:#fffdf8;overflow:hidden}
.sign-pad{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair}
.sign-clear{position:absolute;top:8px;right:8px;font-size:11px;font-weight:800;padding:5px 10px;border-radius:9px;background:rgba(20,31,23,.06);border:none;color:var(--ink-700,#3a4a3c);cursor:pointer}
.sign-clear:active{background:rgba(20,31,23,.12)}
.sign-confirm{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size:13px;color:var(--ink-700,#3a4a3c);line-height:1.35;cursor:pointer}
.sign-confirm input{margin-top:2px;width:18px;height:18px;flex-shrink:0;accent-color:var(--forest-600,#2f6b3e)}
/* completed/signed view */
.signed-fields{display:flex;flex-direction:column;gap:1px;margin:4px 0 14px;border:1px solid var(--line,#e7e2d5);border-radius:12px;overflow:hidden}
.sf-row{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;background:#fffdf8}
.sf-row:nth-child(even){background:var(--cream-50,#f7f3ea)}
.sf-label{font-size:12px;font-weight:700;color:var(--ink-500,#5d6b60);flex-shrink:0;max-width:45%}
.sf-val{font-size:13px;font-weight:600;color:var(--ink-900,#1a241c);text-align:right}
.signed-sig{border:1px solid var(--line,#e7e2d5);border-radius:12px;background:#fff;padding:8px;display:flex;justify-content:center}
.signed-sig img{max-width:100%;max-height:150px}
/* ============================================================
ADMIN TIMESHEET ROW (tsr) — skinny, tidy, actions on own line
============================================================ */
.tsr{
position:relative;
background:#fff;border:1px solid rgba(20,31,23,.08);border-radius:15px;
padding:9px 14px 9px 17px;margin-bottom:8px;cursor:pointer;overflow:hidden;
box-shadow:0 2px 7px rgba(20,31,23,.05);
transition:box-shadow .13s ease, transform .13s ease;
}
.tsr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.tsr:active{transform:scale(.995)}
@media(hover:hover){.tsr:hover{box-shadow:0 6px 16px rgba(20,31,23,.1);transform:translateY(-1px)}}
/* per-status colour: pending=amber, approved=green, paid=forest, flagged=red */
.tsr.pending{background:linear-gradient(120deg,#fdf6e8,#fffdf9 60%);border-color:rgba(201,130,26,.22)}
.tsr.pending::before{background:linear-gradient(180deg,#e0a534,#b4761c)}
.tsr.approved{background:linear-gradient(120deg,#ecf5ec,#fffdf9 60%);border-color:rgba(63,107,62,.22)}
.tsr.approved::before{background:linear-gradient(180deg,#4a8f5a,#2f6b3e)}
.tsr.paid{background:linear-gradient(120deg,#eef2ee,#fffdf9 60%);border-color:rgba(31,61,36,.2);opacity:.92}
.tsr.paid::before{background:linear-gradient(180deg,#3f6b3e,#1d3d24)}
.tsr.flagged{background:linear-gradient(120deg,#fdeeea,#fffdf9 60%);border-color:rgba(176,58,44,.24)}
.tsr.flagged::before{background:linear-gradient(180deg,#cc6655,#a8392f)}
.tsr-main{display:flex;gap:10px;align-items:center}
.tsr-ic{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;box-shadow:0 3px 8px rgba(20,31,23,.16)}
.tsr-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.tsr-ic.a{background:linear-gradient(150deg,#e0a534,#b4761c)}
.tsr-ic.g{background:linear-gradient(150deg,#4a8f5a,#2f6b3e)}
.tsr-ic.b{background:linear-gradient(150deg,#3f6b3e,#1d3d24)}
.tsr-ic.r{background:linear-gradient(150deg,#c66,#a8392f)}
.tsr-info{flex:1;min-width:0}
.tsr-top{display:flex;align-items:center;gap:8px;margin-bottom:1px}
.tsr-top strong{flex:1;min-width:0;font-size:14.5px;font-weight:800;color:var(--ink-900,#1a241c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsr-stats{display:flex;flex-wrap:wrap;gap:3px 9px;font-size:12px;color:var(--ink-600,#4a5a4c);margin-bottom:0}
.tsr-stats .tsr-strong{font-weight:800;color:var(--ink-900,#1a241c)}
.tsr-var.ok{background:#e9f3ea;color:#2f6b3e}
.tsr-var.warn{background:#fbf1de;color:#9a6a12}
.tsr-var.bad{background:#fbeae7;color:#b03a2c}
.tsr-var.neutral{background:var(--cream-100,#f3eee2);color:var(--ink-500,#5d6b60)}
.tsr-note{font-size:12px;color:var(--ink-500,#5d6b60);margin-top:2px;font-style:italic}
.tsr-actions{display:flex;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(20,31,23,.06)}
.tsr-actions .btn{flex:1;justify-content:center;height:32px;font-size:12.5px;padding:0}
.tsr-actions .btn svg{width:14px;height:14px}
/* employee timesheet card extras */
.tsr-hint{font-size:11.5px;color:var(--ink-400,#9aa090);margin-top:2px;font-weight:600}
.tsr-note{display:flex;align-items:center;gap:5px}
.tsr-emp .tsr-hint svg,.tsr-emp .tsr-note svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;vertical-align:-1px}
.tsr-emp.is-locked{opacity:.92}
.tsr-emp.is-locked .tsr-hint{color:var(--ink-500,#5d6b60)}
.pill.locked-pill{display:inline-flex;align-items:center;gap:3px}
.pill.locked-pill svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
/* ============================================================
IMPORTANT UPDATES — standout panel
============================================================ */
.updates-panel{
margin-top:6px;
background:linear-gradient(160deg,#fbf8f0,#f1f5ea);
border:1px solid rgba(63,107,62,.16);
border-radius:20px;
padding:16px 16px 8px;
box-shadow:0 4px 16px rgba(31,61,36,.08);
}
.updates-panel .section-head h2{color:var(--forest-700,#1d3d24)}
/* simplified admin timesheet card edit hint */
.tsr-edit{flex-shrink:0;align-self:center;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--cream-100,#f3eee2);color:var(--forest-700,#1d3d24)}
.tsr-edit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.tsr-stats{align-items:center}
/* ============================================================
MOBILE NAV — docked flush to the very bottom (final override)
No floating pill, no white/empty space below. The bar's green
extends through the safe-area so nothing shows behind it.
============================================================ */
@media(max-width:1023px){
/* Reserve space so page content never hides behind the docked bar */
.content{padding-bottom:calc(74px + var(--safe-b))!important}
}
@media(max-width:380px){
}
.rc-emp-actions .rc-act{flex:1;height:32px;font-size:12px}
.rc-emp-actions .rc-emp-state{flex:1;justify-content:center;height:32px}
/* ============================================================
NOTIFICATIONS — clean, responsive, tap to expand & collapse
============================================================ */
/* ============================================================
NOTIFICATIONS — clean, professional, unified list (v118)
One calm list with hairline dividers instead of bulky floating
cards. Small tinted icons. Unread shown with a dot + subtle tint.
"Important" uses a slim accent rail + small tag — not a loud red
card. Responsive header and rows.
============================================================ */
.notif-wrap{display:flex;flex-direction:column;gap:14px}
.notif-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 2px}
.notif-head-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.notif-head h2{font-family:var(--font-display,Georgia,serif);font-size:23px;font-weight:600;margin:0;color:var(--ink-900,#1a241c);letter-spacing:-.01em}
.notif-head span{font-size:12.5px;color:var(--ink-500,#5d6b60);font-weight:600}
.notif-head-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.notif-head-actions .btn{flex:0 1 auto;white-space:nowrap;height:34px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:650}
/* the list is one card with internal dividers — cohesive, not bulky */
.notif-list{
display:flex;flex-direction:column;
background:#fffdf9;border:1px solid rgba(20,31,23,.09);border-radius:16px;overflow:hidden;
box-shadow:0 1px 3px rgba(20,31,23,.05);
}
.notif-item{
position:relative;background:transparent;border:0;border-radius:0;overflow:hidden;
transition:background .13s ease;
}
.notif-item + .notif-item{border-top:1px solid rgba(20,31,23,.07)}
@media(hover:hover){.notif-item:hover{background:rgba(20,31,23,.022)}}
.notif-item.unread{background:rgba(63,107,62,.045)}
.notif-item.open{background:rgba(20,31,23,.02)}
.notif-row{
display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
background:none;border:none;padding:14px 14px 14px 16px;
}
/* compact, calm tinted icon — circle, not a heavy tile */
.notif-ic{
flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:#eef2e8;color:#3a6140;
}
.notif-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.notif-ic.hot{background:#e6efe4;color:#2f6b3e}
.notif-text{
flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink-800,#2a3a2c);line-height:1.4;
}
.notif-item:not(.open) .notif-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-meta{flex-shrink:0;display:flex;align-items:center;gap:4px}
.notif-meta time{font-size:11px;color:var(--ink-400,#9aa090);font-weight:650;white-space:nowrap}
.notif-chev{display:grid;place-items:center;color:#c2cabb;transform:rotate(-90deg);transition:transform .18s ease}
.notif-chev svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
.notif-item.open .notif-chev{transform:rotate(90deg);color:var(--forest-600,#2f6b3e)}
.notif-body{padding:0 14px 14px 62px}
.notif-body p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-700,#3a4a3c)}
/* unread dot on the icon */
.notif-item.unread .notif-ic{position:relative}
.notif-item.unread .notif-ic::after{
content:"";position:absolute;top:-2px;right:-2px;
width:11px;height:11px;border-radius:50%;
background:#2f8f4e;border:2.5px solid #fffdf9;
}
/* ===== Important: restrained — slim rail + small tag, no loud card ===== */
.notif-item.important{background:rgba(176,58,44,.04)}
.notif-item.important::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#bb4436;
}
.notif-item.important .notif-ic{background:#f7e4e0;color:#a8392f}
.notif-item.important.unread .notif-ic::after{background:#bb4436}
.notif-badge{
font-style:normal;font-size:9px;font-weight:800;letter-spacing:.07em;
background:rgba(176,58,44,.12);color:#a8392f;padding:3px 7px;border-radius:6px;
text-transform:uppercase;display:inline-block;vertical-align:1px;margin-right:6px;
}
/* responsive */
@media(max-width:430px){
.notif-row{padding:13px 12px 13px 14px;gap:11px}
.notif-text{font-size:13.5px}
.notif-body{padding:0 12px 13px 57px}
.notif-head h2{font-size:21px}
}
@media(min-width:1024px){
.notif-row{padding:15px 16px 15px 18px}
.notif-text{font-size:14.5px}
}
/* weekly summary modal */
/* ===== Weekly summary — redesigned (clay theme) ===== */
.wsum2{}
.wsum2-hero{
background:
radial-gradient(120% 130% at 85% 0%, rgba(199,154,78,.18) 0%, transparent 55%),
linear-gradient(150deg,#234a30 0%,#0f2a1c 100%);
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
padding:18px 18px 16px;
color:#fff;
box-shadow:0 12px 28px -16px rgba(12,40,22,.7);
}
.wsum2-id{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.wsum2-av{
width:42px;height:42px;border-radius:13px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(145deg,#c79a4e,#a35a35);
color:#fff;font-size:15px;font-weight:900;letter-spacing:.02em;
box-shadow:0 3px 8px rgba(120,60,20,.3);
}
.wsum2-idtext{display:flex;flex-direction:column;gap:1px;min-width:0}
.wsum2-name{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.1}
.wsum2-role{font-size:12px;font-weight:600;color:rgba(220,232,212,.62)}
.wsum2-range{
display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.02em;
color:rgba(220,232,212,.85);
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
padding:5px 12px;border-radius:999px;margin-bottom:15px;
}
.wsum2-payrow{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.wsum2-paymain em{
font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:#e7c389;display:block;margin-bottom:4px;
}
.wsum2-paymain strong{
font-size:36px;font-weight:900;letter-spacing:-.025em;color:#fff;line-height:1;
}
.wsum2-paystats{display:flex;gap:8px;flex-shrink:0}
.wsum2-paystats div{
text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
border-radius:11px;padding:8px 11px;min-width:58px;
}
.wsum2-paystats b{display:block;font-size:15px;font-weight:800;color:#fff;line-height:1}
.wsum2-paystats span{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(220,232,212,.6);margin-top:3px;display:block}
.wsum2-daystitle{
font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:#8a968b;margin:18px 2px 9px;
}
.wsum-days{display:flex;flex-direction:column;gap:7px}
.wsum-day{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;background:var(--cream-50,#fbf8f1);border:1px solid rgba(20,31,23,.08)}
.wsum-day.has{
background:linear-gradient(120deg,#fff4ea,#fbf8f1 78%);
border-color:rgba(163,90,53,.26);
box-shadow:0 2px 8px rgba(163,90,53,.08);
}
.wsum-day.has .wsum-daycol{background:linear-gradient(160deg,#c79a4e,#a35a35);color:#fff;border-radius:10px;padding:5px 0}
.wsum-day.has .wsum-dow{color:rgba(255,255,255,.85)}
.wsum-day.has .wsum-daycol strong{color:#fff}
.wsum-daycol{flex:0 0 40px;text-align:center;line-height:1.05;padding:2px 0}
.wsum-dow{display:block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500,#5d6b60)}
.wsum-daycol strong{font-size:17px;font-weight:800;color:var(--ink-900,#1a241c)}
.wsum-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wsum-shift{font-size:12px;font-weight:600;color:var(--ink-700,#3a4a3c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsum-off{font-size:12px;color:var(--ink-400,#9aa090);font-style:italic}
.wsum-hrs{flex:0 0 auto;text-align:right;font-size:14px;font-weight:800;color:var(--clay-700,#8a4a2c);display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.wsum-km{font-size:11px;font-weight:800;color:#b07a52}
.wsum2-foot{font-size:11.5px;color:#8a968b;line-height:1.5;margin-top:14px;padding:0 2px}
.wsum-day:not(.has) .wsum-hrs{color:var(--ink-400,#9aa090)}
/* roster card status pills */
.rc-status{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;letter-spacing:.02em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.rc-status svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2}
.rc-status.pub{background:#e3f0e4;color:#236b34}
.rc-status.draft{background:#fbf0d8;color:#9a6a12}
.rc-status.accepted{background:#e3f0e4;color:#236b34}
.rc-status.rejected{background:#fbe4e0;color:#b0392c}
/* ============================================================
MOBILE NAV — FULL REDESIGN (authoritative, overrides all above)
A clean light floating bar with a soft active highlight.
Everything is reset first, then styled fresh.
============================================================ */
@media(max-width:1023px){
/* active tab — bright chip on dark bar */
.mobile-nav .mtab.active{
background:linear-gradient(180deg,#5fbf76,#3f9a57)!important;
color:#ffffff!important;
box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3)!important;
}
.mobile-nav .mtab.active > svg{stroke-width:2.3!important;color:#fff!important}
.mobile-nav .mtab.active > span{font-weight:800!important;color:#fff!important}
/* page padding so content clears the floating bar */
.content{padding-bottom:calc(86px + var(--safe-b))!important}
/* keep it hidden while a full-screen chat thread is open */
body.chat-thread-open .mobile-nav{display:none!important}
}
@media(max-width:380px){
}
/* back button on sub-pages */
.page-back{
display:inline-flex;align-items:center;gap:6px;
margin:0 0 14px;padding:9px 14px 9px 11px;
background:#fff;border:1px solid rgba(20,31,23,.1);border-radius:999px;
font-size:13px;font-weight:800;color:var(--forest-700,#1d3d24);cursor:pointer;
box-shadow:0 2px 7px rgba(20,31,23,.07);
transition:transform .12s ease, box-shadow .12s ease;
}
.page-back:active{transform:scale(.97)}
@media(hover:hover){.page-back:hover{box-shadow:0 4px 12px rgba(20,31,23,.12)}}
.page-back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2}
@media(min-width:1024px){.page-back{margin-top:4px}}
/* ============================================================
PROFILE PAGE — redesign (pf2)
============================================================ */
.pf2{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:0 auto}
/* hero */
.pf2-hero{
position:relative;overflow:hidden;
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:26px 20px 22px;border-radius:22px;
background:#fff;border:1px solid rgba(20,31,23,.07);
box-shadow:0 4px 18px rgba(20,40,22,.08);
}
.pf2-hero-bg{position:absolute;top:0;left:0;right:0;height:84px;
background:linear-gradient(135deg,#2f5d3a,#173d27)}
.pf2-hero.admin .pf2-hero-bg{background:linear-gradient(135deg,#6b4a2f,#3d2817)}
.pf2-avatar{
position:relative;width:84px;height:84px;border-radius:24px;
display:grid;place-items:center;margin-top:18px;
font-family:var(--font-display,Georgia,serif);font-size:30px;font-weight:700;color:#fff;
background:linear-gradient(150deg,#4a8f5a,#2f6b3e);
border:4px solid #fff;box-shadow:0 6px 16px rgba(20,40,22,.25);
}
.pf2-hero.admin .pf2-avatar{background:linear-gradient(150deg,#b07a45,#8a5326)}
.pf2-name{position:relative;font-family:var(--font-display,Georgia,serif);font-size:23px;font-weight:600;margin:12px 0 2px;color:var(--ink-900,#1a241c)}
.pf2-title{position:relative;font-size:13.5px;color:var(--ink-500,#5d6b60);font-weight:600}
.pf2-role{position:relative;margin-top:9px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:#eef3ea;color:#2f6b3e}
.pf2-hero.admin .pf2-role{background:#f3e9df;color:#8a5326}
.pf2-edit{
position:relative;margin-top:15px;display:inline-flex;align-items:center;gap:6px;
padding:9px 18px;border-radius:999px;border:1px solid rgba(20,31,23,.12);
background:#fff;font-size:13px;font-weight:800;color:var(--ink-800,#2a3a2c);cursor:pointer;
box-shadow:0 2px 6px rgba(20,31,23,.06);transition:transform .12s ease;
}
.pf2-edit:active{transform:scale(.97)}
.pf2-edit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
/* stat strip */
.pf2-stats{display:flex;gap:10px}
.pf2-stat{flex:1;background:#fff;border:1px solid rgba(20,31,23,.07);border-radius:16px;padding:14px 8px;text-align:center;box-shadow:0 2px 8px rgba(20,31,23,.05)}
.pf2-stat strong{display:block;font-family:var(--font-display,Georgia,serif);font-size:22px;font-weight:700;color:var(--ink-900,#1a241c);line-height:1}
.pf2-stat em{display:block;margin-top:4px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-500,#5d6b60)}
/* section label */
.pf2-section-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500,#5d6b60);margin:6px 2px -4px}
.pf2-mini-edit{margin-left:auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fff;border:1px solid rgba(20,31,23,.1);color:var(--forest-700,#1d3d24);cursor:pointer}
.pf2-mini-edit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
/* quick links */
.pf2-links{display:flex;flex-direction:column;gap:9px}
.pf2-link{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
background:#fff;border:1px solid rgba(20,31,23,.07);border-radius:16px;padding:13px 14px;
box-shadow:0 2px 8px rgba(20,31,23,.05);transition:transform .12s ease,box-shadow .12s ease}
.pf2-link:active{transform:scale(.99)}
@media(hover:hover){.pf2-link:hover{box-shadow:0 6px 16px rgba(20,31,23,.1)}}
.pf2-link-ic{flex-shrink:0;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff}
.pf2-link-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.pf2-link-ic.green{background:linear-gradient(150deg,#4a8f5a,#2f6b3e)}
.pf2-link-ic.clay{background:linear-gradient(150deg,#c4884f,#9a5e2c)}
.pf2-link-ic.sage{background:linear-gradient(150deg,#8aa988,#5d7e5f)}
.pf2-link-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pf2-link-txt strong{font-size:14.5px;font-weight:800;color:var(--ink-900,#1a241c)}
.pf2-link-txt span{font-size:12px;color:var(--ink-500,#5d6b60)}
.pf2-link-arrow{flex-shrink:0;color:#c2cabd;transform:rotate(180deg)}
.pf2-link-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
/* detail cards */
.pf2-card{background:#fff;border:1px solid rgba(20,31,23,.07);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(20,31,23,.05)}
.pf2-row{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid rgba(20,31,23,.05)}
.pf2-row:last-child{border-bottom:none}
.pf2-row-ic{flex-shrink:0;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--cream-100,#f3eee2);color:var(--forest-700,#1d3d24)}
.pf2-row-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.pf2-row-l{flex-shrink:0;font-size:13px;font-weight:700;color:var(--ink-500,#5d6b60);min-width:96px}
.pf2-row-v{flex:1;text-align:right;font-size:13.5px;font-weight:600;color:var(--ink-900,#1a241c);word-break:break-word}
/* actions */
.pf2-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.pf2-signout{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;border:none;cursor:pointer;
background:linear-gradient(150deg,#b0392c,#8a2c22);color:#fff;font-size:15px;font-weight:800;box-shadow:0 4px 12px rgba(168,57,47,.25)}
.pf2-signout:active{transform:scale(.99)}
.pf2-signout svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
@media(min-width:1024px){
.pf2-links{display:grid;grid-template-columns:repeat(3,1fr)}
}
/* profile photo edit control */
.photo-edit{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:18px}
.photo-edit-circle{position:relative;width:92px;height:92px;border-radius:26px;cursor:pointer;
display:grid;place-items:center;background-size:cover;background-position:center;
background-color:#2f6b3e;background-image:linear-gradient(150deg,#4a8f5a,#2f6b3e);
color:#fff;box-shadow:0 4px 14px rgba(20,40,22,.22);overflow:hidden}
.photo-edit-circle .pe-initials{font-family:var(--font-display,Georgia,serif);font-size:30px;font-weight:700}
.pe-cam{position:absolute;right:-3px;bottom:-3px;width:32px;height:32px;border-radius:50%;
display:grid;place-items:center;background:#fff;color:var(--forest-700,#1d3d24);
border:2px solid var(--cream-50,#f7f3ea);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.pe-cam svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.photo-edit-hint{font-size:12px;font-weight:700;color:var(--ink-500,#5d6b60)}
/* ============================================================
PENDING APPROVALS PANEL (admin home + notifications)
============================================================ */
.approvals-panel{
background:linear-gradient(160deg,#fdf6e8,#fffdf9);
border:1px solid rgba(201,130,26,.28);
border-radius:20px;margin-bottom:14px;overflow:hidden;
box-shadow:0 4px 16px rgba(154,106,18,.1);
}
.approvals-summary{
display:flex;align-items:center;gap:11px;padding:15px 16px;cursor:pointer;list-style:none;
}
.approvals-summary::-webkit-details-marker{display:none}
.appr-bell{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
background:linear-gradient(150deg,#d6952f,#b4761c);color:#fff}
.appr-bell svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.appr-sum-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.appr-sum-txt strong{font-size:15px;font-weight:800;color:#7a5210}
.appr-sum-txt span{font-size:12px;color:#9a6a12;font-weight:600}
.appr-count{flex-shrink:0;min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:grid;place-items:center;
background:#b4761c;color:#fff;font-size:12px;font-weight:800}
.appr-chev{flex-shrink:0;color:#b4761c;transform:rotate(-90deg);transition:transform .2s ease}
.appr-chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
.approvals-panel[open] .appr-chev{transform:rotate(90deg)}
.approvals-toolbar{padding:0 14px 10px;display:flex;justify-content:flex-end}
.approvals-toolbar .btn-primary{background:linear-gradient(150deg,#d6952f,#b4761c)!important}
.approvals-list{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}
.appr-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(20,31,23,.07);border-radius:14px;padding:11px 12px}
.appr-info{flex:1;min-width:0}
.appr-top{display:flex;align-items:center;gap:8px}
.appr-top strong{font-size:13.5px;font-weight:800;color:var(--ink-900,#1a241c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appr-h{font-size:11.5px;font-weight:800;color:#9a6a12;background:#fbf1de;padding:2px 7px;border-radius:999px;flex-shrink:0}
.appr-sub{font-size:11.5px;color:var(--ink-500,#5d6b60);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appr-actions{display:flex;gap:6px;flex-shrink:0}
.appr-btn{display:inline-flex;align-items:center;gap:4px;border:none;cursor:pointer;font-weight:800;font-size:12px;border-radius:11px;padding:0 11px;height:36px}
.appr-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
.appr-btn.ok{background:linear-gradient(150deg,#4a8f5a,#2f6b3e);color:#fff;width:36px;justify-content:center;padding:0}
.appr-btn.flag{background:#fbe4e0;color:#b0392c;width:36px;justify-content:center;padding:0}
.appr-btn:active{transform:scale(.96)}
.approvals-head .btn-primary{background:linear-gradient(150deg,#d6952f,#b4761c)!important;flex-shrink:0;font-size:12px;padding:0 12px}
/* ============================================================
DESKTOP ROSTER — employee-row week grid (admin)
Names on the left, Mon–Sun columns, sticky day header,
rectangular cards that expand on hover to reveal tools.
Shown on desktop only; mobile roster is untouched.
============================================================ */
.rwg-wrap{display:none}
@media(min-width:1024px){
.roster-week{display:none} /* hide old grid on desktop for admin path */
.rwg-wrap{
display:block;margin-top:8px;
max-height:calc(100dvh - 220px);overflow:auto;
scrollbar-gutter:stable;
border:1px solid rgba(20,31,23,.08);border-radius:18px;background:#fff;
box-shadow:0 4px 16px rgba(20,40,22,.07);
}
.rwg-grid{display:grid;grid-template-columns:170px repeat(7,minmax(212px,1fr));min-width:1654px}
/* sticky header row */
.rwg-head{display:contents}
.rwg-corner,.rwg-dayhead{
position:sticky;top:0;z-index:5;
background:linear-gradient(180deg,#22452b,#173d27);color:#fff;
padding:12px 10px;font-weight:800;
}
.rwg-corner{left:0;z-index:6;display:flex;align-items:center;font-size:13px;letter-spacing:.03em;border-top-left-radius:18px}
.rwg-dayhead{display:flex;flex-direction:column;align-items:center;gap:1px;border-left:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:5}
.rwg-dayhead.today{background:linear-gradient(180deg,#2e7d44,#1d5e30)}
.rwg-dow{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.rwg-num{font-size:18px;font-weight:800;line-height:1}
.rwg-dayhrs{font-size:10px;font-weight:800;letter-spacing:.02em;margin-top:2px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;line-height:1.35}
.rwg-dayhrs-zero{background:rgba(255,255,255,.07);color:rgba(255,255,255,.5)}
.rwg-dayhead.today .rwg-dayhrs{background:rgba(255,255,255,.22)}
/* admin desktop already shows the grid header row, so hide the duplicate day-picker pills */
.rst-days-admin{display:none}
.rwg-dayadd{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:7px;border:none;cursor:pointer;
display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;opacity:0;transition:opacity .15s ease}
.rwg-dayhead:hover .rwg-dayadd{opacity:1}
.rwg-dayadd svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4}
/* rows */
.rwg-row{display:contents}
.rwg-name{
position:sticky;left:0;z-index:4;
display:flex;align-items:center;gap:10px;padding:12px 12px;
background:#f7f9f4;border-top:1px solid rgba(20,31,23,.06);border-right:1px solid rgba(20,31,23,.08);
}
.rwg-av{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
font-size:12px;font-weight:800;color:#fff;background:linear-gradient(150deg,#4a8f5a,#2f6b3e)}
.rwg-nametxt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.rwg-nametxt strong{font-size:13.5px;font-weight:800;color:var(--ink-900,#1a241c)}
.rwg-nametxt em{font-style:normal;font-size:11px;color:var(--ink-500,#5d6b60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rwg-cell{
position:relative;padding:6px;border-top:1px solid rgba(20,31,23,.06);border-left:1px solid rgba(20,31,23,.05);
display:flex;flex-direction:column;gap:4px;min-height:42px;
}
.rwg-cell-add{
flex:1;min-height:34px;align-self:stretch;border-radius:9px;border:1.5px dashed rgba(45,107,62,.25);
background:transparent;color:#9fb39d;cursor:pointer;display:grid;place-items:center;
opacity:0;transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.rwg-cell:hover .rwg-cell-add{opacity:1}
.rwg-cell-add:hover{background:color-mix(in srgb,#2f6b3e 8%,#fff);color:#2f6b3e;border-color:rgba(45,107,62,.5)}
.rwg-cell-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
/* rectangular shift card — skinny, sleek, softly tinted so colours blend */
.rgc{
position:relative;border-radius:14px;cursor:pointer;overflow:hidden;
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,#fff),color-mix(in srgb,var(--accent) 9%,#fff));
border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
border-left:4px solid var(--accent);
box-shadow:0 1px 3px color-mix(in srgb,var(--accent) 16%,transparent);
transition:box-shadow .16s ease, transform .16s ease;
}
.rgc.draft{
background:#ffffff;
border:1.5px dashed color-mix(in srgb,var(--accent) 55%,#fff);
border-left:5px dashed var(--accent);
box-shadow:0 1px 4px rgba(20,40,22,.08);
}
.rgc.draft .rgc-time{color:var(--accent-deep)}
.rgc.draft .rgc-client{color:color-mix(in srgb,var(--accent-deep) 92%,#000)!important}
.rgc.draft .rgc-dur{background:color-mix(in srgb,var(--accent) 12%,#fff)}
.rgc-main{padding:6px 10px}
.rgc-row1{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.rgc-time{font-size:10.5px;font-weight:800;color:color-mix(in srgb,var(--accent-deep) 88%,#000);white-space:nowrap;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rgc-dur{flex-shrink:0;font-size:9px;font-weight:800;color:color-mix(in srgb,var(--accent-deep) 88%,#000);background:rgba(255,255,255,.85);padding:1px 6px;border-radius:999px;white-space:nowrap}
.rgc-row2{display:flex;align-items:center;gap:6px;margin-top:3px;min-width:0}
.rgc-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}
.rgc-dot.pub{background:#2f8a47;box-shadow:0 0 0 2px rgba(47,138,71,.22)}
.rgc-dot.draft{background:#c9821a;box-shadow:0 0 0 2px rgba(201,130,26,.22)}
.rgc-client{font-size:12px;font-weight:800;color:color-mix(in srgb,var(--accent-deep) 90%,#000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
/* tools — hidden until hover; labelled, colour-coded chips */
.rgc-tools{
display:flex;gap:5px;padding:0 9px;
max-height:0;opacity:0;overflow:hidden;
transition:max-height .2s ease, opacity .2s ease, padding .2s ease;
}
.rgc:hover{box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 42%,transparent);transform:translateY(-2px);z-index:3}
.rgc:hover .rgc-tools{max-height:34px;opacity:1;padding:0 8px 7px}
.rgc-tool{
flex:1;min-width:0;height:26px;border-radius:8px;border:none;cursor:pointer;
display:grid;place-items:center;
background:#fff;box-shadow:0 1px 3px rgba(20,40,22,.12);
transition:transform .1s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.rgc-tool svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.rgc-tool:active{transform:scale(.9)}
.rgc-tool:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(20,40,22,.2)}
/* colour coding per action */
.rgc-tool.t-assign{color:#2f6b8a}
.rgc-tool.t-assign:hover{background:#2f6b8a;color:#fff}
.rgc-tool.t-publish{color:#2f8a47}
.rgc-tool.t-publish:hover{background:#2f8a47;color:#fff}
.rgc-tool.t-add{color:#9a6a12}
.rgc-tool.t-add:hover{background:#c9821a;color:#fff}
.rgc-tool.t-del{color:#b0392c}
.rgc-tool.t-del:hover{background:#b0392c;color:#fff}
}
/* ============================================================
CLOCK IN / OUT — redesign (clk2)
============================================================ */
.clk2{max-width:520px;margin:14px auto 0;background:#fff;border:1px solid rgba(20,31,23,.07);
border-radius:24px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;
box-shadow:0 6px 22px rgba(20,40,22,.08);position:relative;overflow:hidden}
.clk2.live{background:linear-gradient(180deg,#1f4e2e,#15391f);border:none}
.clk2.live::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 0%,rgba(95,191,118,.25),transparent 70%);pointer-events:none}
@keyframes clk2pulse{0%,100%{box-shadow:0 0 0 3px rgba(95,191,118,.35)}50%{box-shadow:0 0 0 8px rgba(95,191,118,0)}}
/* idle clock face */
.clk2-clockface{position:relative;width:96px;height:96px;border-radius:50%;
background:radial-gradient(circle at 50% 40%,#f3f7ef,#e7efe1);
box-shadow:inset 0 2px 6px rgba(20,40,22,.1),0 4px 12px rgba(20,40,22,.08);margin-bottom:16px}
.clk2-clockface .clk2-hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:3px;background:#2f6b3e}
.clk2-clockface .h1{width:3px;height:30px;transform:translateX(-50%) rotate(35deg)}
.clk2-clockface .h2{width:3px;height:22px;transform:translateX(-50%) rotate(-70deg);background:#5fbf76}
.clk2-pin{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#2f6b3e;transform:translate(-50%,-50%)}
/* greeting */
.clk2-greet{text-align:center}
.clk2-greet>span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-500,#a7673e)}
.clk2-greet h2{font-family:var(--font-display,Georgia,serif);font-size:23px;font-weight:600;color:var(--ink-900,#1a241c);margin:5px 0 4px}
.clk2-greet p{font-size:13.5px;color:var(--ink-500,#5d6b60);margin:0}
/* stats row */
.clk2-stats{display:flex;gap:10px;width:100%;margin:20px 0 4px}
.clk2-stat{flex:1;text-align:center;padding:11px 6px;border-radius:14px;background:rgba(255,255,255,.08)}
.clk2.idle .clk2-stat{background:var(--cream-100,#f3eee2)}
.clk2-stat strong{display:block;font-size:19px;font-weight:800;color:#fff;line-height:1}
.clk2.idle .clk2-stat strong{color:var(--ink-900,#1a241c)}
.clk2-stat em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-top:4px;color:rgba(255,255,255,.65)}
.clk2.idle .clk2-stat em{color:var(--ink-500,#5d6b60)}
/* action button */
.clk2-action{margin-top:16px;width:100%;height:52px;border:none;border-radius:15px;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:8px;font-size:15.5px;font-weight:800;
transition:transform .1s ease, box-shadow .15s ease}
.clk2-action svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.clk2-action:active{transform:scale(.98)}
.clk2-action.stop{background:linear-gradient(150deg,#e8896f,#c4543a);color:#fff;box-shadow:0 6px 16px rgba(196,84,58,.4)}
.clk2-action.ghost{background:linear-gradient(150deg,#3f8a52,#2f6b3e);color:#fff;box-shadow:0 6px 16px rgba(47,107,62,.28)}
/* today's shifts */
.clk2-shifts-head{display:flex;align-items:center;gap:9px;max-width:520px;margin:24px auto 10px;padding:0 4px}
.clk2-shifts-head h3{font-family:var(--font-display,Georgia,serif);font-size:18px;font-weight:600;margin:0;color:var(--ink-900,#1a241c)}
.clk2-shifts-head span{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--forest-700,#1d3d24);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.clk2-shifts{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.clk2-sh{display:flex;background:#fff;border:1px solid rgba(20,31,23,.07);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(20,31,23,.05)}
.clk2-sh-rail{flex-shrink:0;width:6px;background:linear-gradient(180deg,var(--accent),var(--accent-deep))}
.clk2-sh-body{flex:1;min-width:0;padding:13px 14px}
.clk2-sh-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.clk2-sh-time{font-size:13px;font-weight:800;color:var(--accent-deep)}
.clk2-sh-dur{font-size:10.5px;font-weight:800;color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 16%,#fff);padding:2px 9px;border-radius:999px}
.clk2-sh-body h4{font-size:15px;font-weight:800;color:var(--ink-900,#1a241c);margin:0 0 3px}
.clk2-sh-loc{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-500,#5d6b60);margin-bottom:11px}
.clk2-sh-loc svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2}
.clk2-sh-actions{display:flex;gap:8px}
.clk2-sh-actions button{flex:1;height:40px;border:none;border-radius:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13.5px;font-weight:800;transition:transform .1s ease}
.clk2-sh-actions button:active{transform:scale(.97)}
.clk2-sh-actions button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.clk2-sh-start{background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 40%,transparent)}
.clk2-sh-accept{background:linear-gradient(150deg,#3f8a52,#2f6b3e);color:#fff}
.clk2-sh-reject{flex:0 0 auto!important;padding:0 14px;background:#fbe4e0;color:#b0392c}
.clk2-sh-done{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:11px;background:#e3f0e4;color:#236b34;font-size:13.5px;font-weight:800}
.clk2-sh-declined{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:11px;background:#fbe4e0;color:#b0392c;font-size:13.5px;font-weight:800}
.clk2-sh-done svg,.clk2-sh-declined svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.clk2-sh.done{opacity:.7}
.clk2-sh.declined .clk2-sh-rail{background:#b0392c}
.clk2-empty{max-width:520px;margin:18px auto 0;text-align:center;padding:30px 20px;background:#fff;border-radius:18px;border:1px solid rgba(20,31,23,.07)}
.clk2-empty svg{width:34px;height:34px;fill:none;stroke:#bcc4b6;stroke-width:1.8;margin-bottom:8px}
.clk2-empty p{color:var(--ink-500,#5d6b60);margin:0 0 12px}
/* ============================================================
HOME / DASHBOARD — premium redesign (hm)
============================================================ */
.hm{display:flex;flex-direction:column;gap:16px;max-width:780px;margin:0 auto}
/* hero */
.hm-hero{position:relative;overflow:hidden;border-radius:16px;padding:10px 13px 9px;color:#fff;
box-shadow:0 10px 30px rgba(20,40,22,.18)}
.hm-hero.admin{background:linear-gradient(140deg,#2c5d39,#163a25)}
.hm-hero.staff{background:linear-gradient(140deg,#2f6b8a,#163a4e)}
.hm-hero-bg{position:absolute;inset:0;background:radial-gradient(120% 80% at 85% -10%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.hm-hero-row{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hm-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.hm-hero-copy h1{font-family:var(--font-display,Georgia,serif);font-size:19px;font-weight:600;margin:0 0 1px;line-height:1}
.hm-hero-copy p{font-size:11px;color:rgba(255,255,255,.82);margin:0}
.hm-hero-add{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;
border-radius:13px;padding:7px 11px;font-size:10px;font-weight:800;backdrop-filter:blur(4px)}
.hm-hero-add svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.hm-hero-add:active{transform:scale(.96)}
.hm-hero-stats{position:relative;display:flex;gap:5px;margin-top:7px}
.hm-hs{flex:1;background:rgba(255,255,255,.12);border-radius:9px;padding:4px 5px;text-align:center}
.hm-hs strong{display:block;font-size:13px;font-weight:800;line-height:1}
.hm-hs em{display:block;font-style:normal;font-size:8px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:1px}
.hm-hs.alert{background:rgba(232,137,111,.35);box-shadow:inset 0 0 0 1px rgba(255,200,180,.4)}
.hm-q{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
background:#fff;border:1px solid rgba(20,31,23,.07);border-radius:16px;padding:14px 6px;
box-shadow:0 2px 8px rgba(20,31,23,.05);transition:transform .12s ease,box-shadow .12s ease}
.hm-q:active{transform:scale(.97)}
@media(hover:hover){.hm-q:hover{box-shadow:0 6px 16px rgba(20,31,23,.1)}}
.hm-q-ic.green{background:linear-gradient(150deg,#4a8f5a,#2f6b3e)}
.hm-q-ic.clay{background:linear-gradient(150deg,#c4884f,#9a5e2c)}
.hm-q-ic.sage{background:linear-gradient(150deg,#8aa988,#5d7e5f)}
.hm-q-ic.blue{background:linear-gradient(150deg,#5a93b0,#2f6b8a)}
/* next shift card (employee) */
.hm-next{display:flex;cursor:pointer;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 13px 30px rgba(8,30,16,.22)}
.hm-next:active{transform:scale(.99)}
.hm-next-rail{flex:0 0 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;
background:linear-gradient(180deg,#243b6b,#0c1730)}
.hm-next-rt{font-family:var(--font-display,Georgia,serif);font-size:20px;font-weight:800;line-height:1}
.hm-next-rap{font-size:9px;font-weight:850;letter-spacing:.08em;color:#e9c87e}
.hm-next-rdur{margin-top:6px;font-size:9px;font-weight:800;background:rgba(255,255,255,.2);padding:2px 9px;border-radius:999px}
.hm-next-in{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
.hm-next-tag{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
color:#2f4a85;background:#e7ecf7;padding:3px 10px;border-radius:999px;margin-bottom:7px}
.hm-next-tag svg{width:11px;height:11px;fill:#2f4a85;stroke:none}
.hm-next-client{font-family:var(--font-display,Georgia,serif);font-size:21px;font-weight:700;color:#15233f;margin:0 0 6px;letter-spacing:-.01em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-next-row{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#54606f;font-weight:600;margin-bottom:4px;min-width:0}
.hm-next-row svg{width:14px;height:14px;fill:none;stroke:#243b6b;stroke-width:2;flex-shrink:0}
.hm-next-cta{margin-top:9px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:linear-gradient(135deg,#243b6b,#0c1730);color:#fff;border:0;padding:12px;border-radius:12px;font-size:13.5px;font-weight:850;cursor:pointer;
box-shadow:0 6px 16px rgba(20,40,90,.32);transition:transform .12s ease,box-shadow .12s ease}
.hm-next-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4}
.hm-next-cta:active{transform:scale(.98)}
@media(hover:hover){.hm-next-cta:hover{box-shadow:0 9px 22px rgba(20,40,90,.4)}}
/* section head */
.hm-sec-head{display:flex;align-items:center;gap:10px;margin-top:6px;padding:0 2px}
.hm-sec-head h2{font-family:var(--font-display,Georgia,serif);font-size:20px;font-weight:600;margin:0;color:var(--ink-900,#1a241c)}
.hm-pill{font-size:11.5px;font-weight:800;color:var(--ink-500,#5d6b60);background:var(--cream-100,#f3eee2);padding:4px 11px;border-radius:999px}
@media(min-width:1024px){
.hm-hero-copy h1{font-size:21px}
}
/* ============================================================
ROSTER — premium header + day selector (mobile-first)
============================================================ */
.rst-hero{position:relative;overflow:hidden;border-radius:22px;padding:18px 18px 16px;color:#fff;margin-bottom:14px;
box-shadow:0 8px 24px rgba(20,40,22,.16)}
.rst-hero.admin{background:linear-gradient(140deg,#2c5d39,#163a25)}
.rst-hero.staff{background:linear-gradient(140deg,#2f6b8a,#163a4e)}
.rst-hero-bg{position:absolute;inset:0;background:radial-gradient(120% 80% at 85% -10%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.rst-hero-top{position:relative;display:flex;align-items:center;gap:10px}
.rst-nav{flex-shrink:0;width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center}
.rst-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.rst-nav:active{transform:scale(.94)}
.rst-hero-label{flex:1;text-align:center;line-height:1.15}
.rst-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.rst-hero-label strong{font-family:var(--font-display,Georgia,serif);font-size:19px;font-weight:600}
.rst-hero-foot{position:relative;display:flex;align-items:stretch;gap:8px;margin-top:15px}
.rst-hs{flex:1;background:rgba(255,255,255,.12);border-radius:13px;padding:9px 6px;text-align:center}
.rst-hs strong{display:block;font-size:18px;font-weight:800;line-height:1}
.rst-hs em{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:3px}
.rst-hero-add{flex:1.3;display:flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
background:linear-gradient(135deg,#fff7ec,#ffffff);color:#1d3d24;border-radius:15px;
font-size:13.5px;font-weight:800;letter-spacing:-.01em;padding:0 14px;min-height:46px;
box-shadow:0 6px 16px rgba(10,30,16,.28), inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .12s ease, box-shadow .14s ease;position:relative;overflow:hidden}
.rst-hero-add::before{content:"";position:absolute;inset:0;border-radius:15px;
background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 55%);pointer-events:none}
.rst-hero-add svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.6;position:relative;z-index:1}
.rst-hero-add .rha-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex-shrink:0;
background:linear-gradient(140deg,#4a8f5a,#2f6b3e);box-shadow:0 2px 6px rgba(31,80,40,.4);position:relative;z-index:1}
.rst-hero-add span{position:relative;z-index:1}
.rst-hero.staff .rst-hero-add{color:#1d4a63}
.rst-hero.staff .rst-hero-add .rha-ic{background:linear-gradient(140deg,#3f8fb0,#235a73)}
.rst-hero-add:active{transform:translateY(1px) scale(.98);box-shadow:0 3px 10px rgba(10,30,16,.3)}
/* day selector */
.rst-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:14px}
@media(min-width:1024px){
.rst-days{display:grid;grid-template-columns:170px repeat(7,minmax(0,1fr));gap:0;column-gap:0;margin-bottom:14px}
.rst-days::before{content:"";display:block;grid-column:1}
.rst-days .rst-day{margin:0 5px}
}
.rst-day{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:9px 2px 7px;
background:#fff;border:1px solid rgba(20,31,23,.07);border-radius:14px;
transition:transform .1s ease, background .12s ease, box-shadow .12s ease}
.rst-day:active{transform:scale(.95)}
.rd-dow{font-size:9.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-400,#9aa090)}
.rd-num{font-size:16px;font-weight:800;color:var(--ink-900,#1a241c);line-height:1}
.rd-cnt{min-width:16px;height:16px;padding:0 5px;border-radius:999px;background:var(--clay-500,#a7673e);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center}
.rd-empty{width:5px;height:5px;border-radius:50%;background:rgba(20,31,23,.12)}
.rst-day.today{box-shadow:inset 0 0 0 1.5px rgba(45,107,62,.4)}
.rst-day.today .rd-dow{color:#2f6b3e}
.rst-day.sel{background:linear-gradient(170deg,#3f8a52,#2f6b3e);border-color:transparent;box-shadow:0 6px 14px rgba(47,107,62,.32)}
.rst-day.sel .rd-dow{color:rgba(255,255,255,.8)}
.rst-day.sel .rd-num{color:#fff}
.rst-day.sel .rd-cnt{background:rgba(255,255,255,.25)}
.rst-day.sel .rd-empty{background:rgba(255,255,255,.4)}
/* day head */
.rst-day-head{display:flex;align-items:baseline;gap:10px;margin:4px 2px 12px}
.rst-day-head h2{font-family:var(--font-display,Georgia,serif);font-size:20px;font-weight:600;margin:0;color:var(--ink-900,#1a241c)}
.rst-day-head span{font-size:12.5px;font-weight:700;color:var(--ink-500,#5d6b60)}
/* on desktop, admin uses the week grid below the shared hero */
/* ============================================================
STICKY HEADER — premium redesign (tb2)
============================================================ */
.topbar.tb2{
position:sticky;top:0;z-index:40;
display:flex!important;align-items:center;gap:12px;
padding:calc(14px + var(--safe-t)) 18px 14px!important;
border:none!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
border-radius:0 0 24px 24px!important;
box-shadow:0 10px 26px -14px rgba(8,23,12,.55)!important;
overflow:hidden;
}
.topbar.tb2::after{opacity:.1!important}
.topbar.tb-admin{background:linear-gradient(125deg,var(--forest-700) 0%,var(--forest-800) 55%,var(--forest-950) 100%)!important}
.topbar.tb-staff{background:linear-gradient(125deg,var(--forest-600) 0%,var(--forest-800) 55%,var(--forest-950) 100%)!important}
.topbar.tb2::before{content:"";position:absolute;inset:0;
background:radial-gradient(110% 90% at 88% -20%,rgba(149,173,146,.18),transparent 55%);pointer-events:none}
.topbar.tb2 h1{
font-family:var(--font-display,Georgia,serif)!important;font-weight:600!important;
font-size:21px!important;letter-spacing:-.02em!important;line-height:1.05!important;
color:var(--cream-50)!important;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar.tb2 .sub{
font-size:12px!important;color:var(--sage-300)!important;font-weight:600!important;
margin-top:2px!important;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar.tb2 .topbar-actions{margin-left:auto;display:flex;align-items:center;gap:9px;position:relative}
.tb2-bell .dot{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;
background:var(--clay-500);border:2px solid var(--forest-800)}
.tb2-profile .avatar{width:42px!important;height:42px!important;border-radius:13px!important;
border:2px solid rgba(255,255,255,.3)!important;font-size:13px!important;font-weight:800!important;
box-shadow:0 2px 8px rgba(0,0,0,.25)!important}
.tb2-profile:active{transform:scale(.95)}
@media(min-width:1024px){
.topbar.tb2{border-radius:0!important;padding:20px 32px!important}
.topbar.tb2 h1{font-size:24px!important}
}
/* single Availability card on admin home */
.hm-avail{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
background:#fff;border:1px solid rgba(20,31,23,.07);border-radius:12px;padding:8px 12px;
box-shadow:0 1px 6px rgba(20,31,23,.05);transition:transform .12s ease, box-shadow .12s ease}
.hm-avail:active{transform:scale(.99)}
@media(hover:hover){.hm-avail:hover{box-shadow:0 5px 13px rgba(20,31,23,.1)}}
.hm-avail-ic{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
background:linear-gradient(150deg,var(--clay-400,#cf8a64),var(--clay-600,#a35a35))}
.hm-avail-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.hm-avail-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.hm-avail-txt strong{font-size:13px;font-weight:800;color:var(--ink-900,#1a241c)}
.hm-avail-txt span{font-size:11px;color:var(--ink-500,#5d6b60)}
.hm-avail-go{flex-shrink:0;color:#c2cabd;transform:rotate(180deg)}
.hm-avail-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4}
/* ============================================================
ADD-SHIFT — employee search bar + dropdown
============================================================ */
.emp-field{display:flex;flex-direction:column;gap:7px}
.shift-section-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--forest-700,#1d3d24)}
.shift-section-label svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.emp-searchbar{display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;text-align:left;
background:#fff;border:1.5px solid rgba(20,31,23,.14);border-radius:13px;padding:12px 14px;
transition:border-color .12s ease, box-shadow .12s ease}
.emp-searchbar:hover{border-color:rgba(45,107,62,.4)}
.emp-searchbar > svg{flex-shrink:0;width:17px;height:17px;fill:none;stroke:#8a958b;stroke-width:2}
.emp-searchbar-txt.has{color:var(--ink-900,#1a241c);font-weight:700}
.emp-searchbar-chev.open{transform:rotate(90deg)}
@keyframes empSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.emp-dropdown .employee-picker{max-height:260px;overflow-y:auto;padding:6px}
.emp-dd-btn{flex:1;height:42px;border:none;border-radius:12px;cursor:pointer;font-size:14px;font-weight:800;transition:transform .1s ease;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;text-align:center}
.emp-dd-btn svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.2;vertical-align:middle}
.emp-dd-btn:active{transform:scale(.97)}
.emp-dd-btn.clear{background:#fff;color:var(--ink-500,#5d6b60);box-shadow:inset 0 0 0 1.5px rgba(20,31,23,.14)}
.emp-dd-btn.done{background:linear-gradient(150deg,#3f8a52,#2f6b3e);color:#fff!important;box-shadow:0 4px 12px rgba(47,107,62,.3)}
.emp-dd-btn.done svg{stroke:#fff!important}
/* add-client inline form */
.add-client-block{margin-top:10px}
.add-client-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;cursor:pointer;
background:var(--cream-50,#fbf8f1);border:1.5px dashed rgba(45,107,62,.3);border-radius:13px;padding:11px 14px;
font-size:13.5px;font-weight:800;color:var(--forest-700,#1d3d24)}
.add-client-toggle > span:first-child{display:inline-flex;align-items:center;gap:7px}
.add-client-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.ac-chev{color:var(--forest-500,#4a7351);transform:rotate(-90deg);transition:transform .2s ease}
.ac-chev.open{transform:rotate(90deg)}
/* ---- refined, compact add-client form ---- */
.add-client-form{margin-top:8px;border:1px solid rgba(45,107,62,.18);border-radius:16px;padding:16px 15px;background:#fff;
box-shadow:0 8px 24px -14px rgba(20,40,22,.35);animation:empSlide .16s ease;display:flex;flex-direction:column;gap:13px}
.add-client-form .field{display:flex;flex-direction:column;gap:6px;margin:0}
.add-client-form .field label{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#5d6b58;margin:0}
.add-client-form .input,.add-client-form .addr-input{width:100%;height:46px;padding:0 13px;border-radius:11px;
border:1.5px solid rgba(45,107,62,.18);background:#fcfdfb;font-size:15px;color:#1a251b;outline:none;
transition:border-color .15s,box-shadow .15s,background .15s;box-shadow:none;line-height:1.2}
.add-client-form .input::placeholder,.add-client-form .addr-input::placeholder{color:#a4ad9c;font-size:14.5px}
.add-client-form .input:focus,.add-client-form .addr-input:focus{border-color:#4a7351;background:#fff;box-shadow:0 0 0 3px rgba(74,115,81,.14)}
.add-client-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:0}
.add-client-foot{display:flex;gap:9px;margin-top:3px}
.add-client-foot .emp-dd-btn{flex:1;height:48px;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;border:0;display:flex;align-items:center;justify-content:center;gap:7px}
.add-client-foot .clear{background:#fff;border:1.5px solid rgba(45,107,62,.2);color:#4a5a48}
.add-client-foot .done{background:linear-gradient(180deg,#4a7d4e,#2c5a34);color:#fff;box-shadow:0 10px 22px -10px rgba(30,60,30,.5)}
.add-client-foot .done svg{width:16px;height:16px;stroke:#fff}
/* ---- TABLET RANGE (1024–1200px): slim the sidebar so content isn't cramped.
Landscape iPads were giving ~26% of the screen to navigation; this reclaims it. */
@media(min-width:1024px) and (max-width:1200px){
:root{--sidebar-w:212px;}
.sidebar{padding:20px 12px 16px!important}
.side-link,.nav-link,.sidebar a{font-size:14.5px!important}
.content{padding-left:clamp(18px,2.4vw,28px)!important;padding-right:clamp(18px,2.4vw,28px)!important}
}
/* ensure header is sticky on desktop across all pages */
@media(min-width:1024px){
/* Lock the shell to the viewport; scroll happens INSIDE .main. */
html,body{height:100%!important;overflow:hidden!important}
#app{height:100dvh!important;overflow:hidden!important}
.shell{height:100dvh!important;overflow:hidden!important;align-items:stretch}
.sidebar{height:100dvh!important;flex:0 0 var(--sidebar-w);position:relative;top:auto}
/* .main is the scroll container */
.main{height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important}
/* header sticks to the top of the scrolling .main */
.topbar{
position:sticky!important;top:0!important;z-index:120!important;
transform:none!important;-webkit-transform:none!important;flex:0 0 auto;
}
.content{padding-top:24px!important}
.rwg-wrap{max-height:calc(100dvh - 230px)!important}
/* modal scroll-lock */
body.modal-open{overflow:hidden!important}
}
/* ============================================================
DESKTOP FULL-WIDTH LAYOUTS (≥1024px)
Use the whole screen; remove narrow centered columns.
============================================================ */
@media(min-width:1024px){
.content{max-width:none!important;width:auto!important;margin:0!important;
padding:26px clamp(24px,3vw,44px) 48px!important}
/* ---- HOME: two-column dashboard ---- */
.hm{max-width:none!important;
display:grid!important;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
/* hero spans both columns */
.hm-hero{grid-column:1 / -1}
/* approvals + updates on the left, availability + roster flow naturally */
.approvals-panel{grid-column:1 / -1}
.hm > .updates-panel{grid-column:1}
.hm-avail{grid-column:2;align-self:start}
.hm-sec-head{grid-column:1 / -1}
.home-roster-list{grid-column:1 / -1;
display:grid!important;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px}
/* employee next-shift card sits beside updates */
.hm-next{grid-column:2;align-self:start}
/* ---- ROSTER: full width grid ---- */
.rst-hero{max-width:none!important}
.rwg-wrap{max-width:none!important}
.rwg-grid{min-width:0!important;width:100%}
/* ---- BOOKINGS: two-column card grid so the list fills the screen ---- */
.v213-list{grid-template-columns:repeat(auto-fill,minmax(430px,1fr))!important;align-items:start!important}
.v213-toolbar{grid-template-columns:1fr auto!important;align-items:center!important}
.v213-filter-row{overflow:visible!important;flex-wrap:wrap!important}
/* ---- DIRECTORY: preview lists side by side ---- */
.directory-preview-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important;align-items:start!important}
/* ---- MESSAGES: full-height two-pane that fills the screen ---- */
.chat-shell{height:calc(100dvh - 150px)!important;max-width:none!important;width:100%!important;gap:18px!important}
.chat-list{width:340px!important;flex:0 0 340px!important}
.chat-thread{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important}
.chat-scroll{flex:1!important;min-height:0!important}
.bubble{max-width:min(70%,640px)!important}
/* ---- PROFILE: clean wider single column, centered ---- */
.pf2{max-width:920px!important;margin:0 auto!important}
.pf2-links{display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px}
.pf2-card .pf2-row{padding:15px 18px}
}
@media(min-width:1500px){
.content{padding-left:clamp(28px,4vw,72px)!important;padding-right:clamp(28px,4vw,72px)!important}
}
/* ============================================================
TIMESHEET — full-screen single-employee focus view (tsf)
============================================================ */
.tsf{display:flex;flex-direction:column;gap:14px}
.tsf-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tsf-back{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid rgba(20,31,23,.1);border-radius:999px;padding:9px 15px;font-size:13px;font-weight:800;color:var(--forest-700,#1d3d24);cursor:pointer;box-shadow:0 2px 7px rgba(20,31,23,.06)}
.tsf-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.tsf-back:active{transform:scale(.97)}
.tsf-nav{display:flex;align-items:center;gap:8px}
.tsf-nav-count{font-size:12px;font-weight:800;color:#fff;background:var(--forest-700,#1d3d24);border-radius:999px;padding:5px 11px;min-width:46px;text-align:center}
.tsf-nav-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid rgba(45,107,62,.22);border-radius:14px;padding:7px 12px;font-weight:800;color:var(--forest-700,#1d3d24);cursor:pointer;box-shadow:0 3px 12px rgba(20,40,22,.1);transition:transform .1s ease,box-shadow .12s ease,border-color .12s ease}
.tsf-nav-btn:hover{border-color:var(--forest-500,#4a7351);box-shadow:0 6px 18px rgba(20,40,22,.16);transform:translateY(-1px)}
.tsf-nav-btn:active{transform:scale(.97)}
.tsf-nav-btn svg{width:16px;height:16px;fill:none;stroke:var(--forest-500,#4a7351);stroke-width:2.4}
.tsf-nav-av{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(150deg,var(--forest-500),var(--forest-700));box-shadow:0 2px 6px rgba(20,40,22,.25)}
.tsf-nav-lbl{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.tsf-nav-lbl.right{text-align:right}
.tsf-nav-lbl em{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--clay-600,#a35a35)}
.tsf-nav-lbl strong{font-size:14px;font-weight:800;color:var(--ink-900,#1a241c);max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsf-nav-btn:active{transform:scale(.97)}
.tsf-head{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px 16px;background:linear-gradient(140deg,var(--forest-600),var(--forest-900));color:#fff;border-radius:20px;padding:18px;box-shadow:0 8px 24px rgba(20,40,22,.18)}
.tsf-av{flex-shrink:0;width:56px;height:56px;border-radius:16px;font-size:19px;font-weight:800;background:rgba(255,255,255,.16)!important;color:#fff!important;border:2px solid rgba(255,255,255,.3);display:grid;place-items:center}
.tsf-head-copy{flex:1;min-width:0}
.tsf-head-copy h2{font-family:var(--font-display,Georgia,serif);font-size:21px;font-weight:600;margin:0;color:#fff;line-height:1.1}
.tsf-head-copy span{display:block;font-size:12.5px;color:rgba(255,255,255,.8);margin-top:3px;line-height:1.35}
.tsf-head-stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:2px}
.tsf-hs{background:rgba(255,255,255,.12);border-radius:13px;padding:9px 6px;text-align:center;min-width:0}
.tsf-hs em{display:block;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap}
.tsf-hs strong{display:block;font-size:15px;font-weight:800;margin-top:2px;white-space:nowrap}
.tsf-hs.warn{background:rgba(232,137,111,.4)}
.tsf-period{font-size:13px;font-weight:700;color:var(--ink-500,#5d6b60);margin:-2px 2px 0}
.tsf-rows{display:flex;flex-direction:column;gap:5px}
.tsf-row{display:flex;align-items:stretch;background:#fff;border:1px solid rgba(20,31,23,.08);border-radius:10px;overflow:hidden}
.tsf-row.today{box-shadow:inset 0 0 0 1.5px rgba(45,107,62,.4)}
.tsf-row-day{flex-shrink:0;width:62px;display:flex;flex-direction:column;justify-content:center;gap:0;padding:6px 8px;background:linear-gradient(160deg,var(--forest-600),var(--forest-800));color:#fff}
.tsf-row.today .tsf-row-day{background:linear-gradient(160deg,var(--forest-500),var(--forest-700))}
.tsf-rd-dow{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.tsf-rd-num{font-size:16px;font-weight:800;line-height:1}
.tsf-rd-mon{display:none}
.tsf-rd-sum{margin-top:2px;font-size:7.5px;font-weight:800;color:rgba(255,255,255,.85)}
.tsf-row-entries{flex:1;min-width:0;display:flex;flex-direction:column}
.tsf-row-empty{display:flex;align-items:center;font-size:11px;font-weight:600;color:#bcc4b6;padding:8px 12px}
.tsf-row-add{align-self:flex-start;margin:4px 0 5px 12px;height:24px;padding:0 10px;border-radius:7px;border:1px dashed rgba(45,107,62,.3);background:transparent;color:var(--forest-500,#4a7351);cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800}
.tsf-row-add svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.tsf-row-add:active{transform:scale(.96)}
/* table-style timesheet entry */
.tfe{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid rgba(20,31,23,.06);cursor:pointer;transition:background .12s ease}
.tfe:last-of-type{border-bottom:none}
.tfe:hover{background:var(--cream-50,#fbf8f1)}
.tfe-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%}
.tfe-dot.pending{background:#c9821a}.tfe-dot.approved{background:#2f8a47}.tfe-dot.paid{background:#3a6fb0}.tfe-dot.flagged{background:#b0392c}
.tfe-client{flex:0 0 150px;font-size:12.5px;font-weight:800;color:var(--ink-900,#1a241c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfe-time{flex:0 0 96px;font-size:11.5px;font-weight:700;color:var(--forest-700,#1d3d24)}
.tfe-h{flex:0 0 44px;font-size:11.5px;font-weight:800;color:var(--ink-800,#2a3a2c)}
.tfe-km{flex:0 0 44px;font-size:11px;font-weight:800;color:#8a5326}
.tfe-note{flex:1;min-width:0;font-size:11.5px;color:var(--ink-600,#4a5a4c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfe-note em{color:#c2cabd}
.tfe-status{flex-shrink:0;font-size:8px;padding:2px 7px}
.tfe-actions{flex-shrink:0;display:flex;gap:4px}
.tfe-ic{width:26px;height:26px;border-radius:7px;border:none;cursor:pointer;display:grid;place-items:center;background:rgba(20,31,23,.06);color:var(--forest-700,#1d3d24)}
.tfe-ic svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.tfe-ic.flag{background:#fbe4e0;color:#b0392c}
.tfe-ic.ok{background:#2f6b3e;color:#fff}
.tfe-ic:active{transform:scale(.9)}
@media(max-width:1100px){.tfe-status{display:none}}
@media(max-width:900px){.tfe-note{flex-basis:100%;order:5;white-space:normal}.tfe-client{flex-basis:120px}}
/* timesheet focus — search + results */
.tsf-search{flex:1;max-width:300px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid rgba(20,31,23,.12);border-radius:999px;padding:7px 14px}
.tsf-search svg{width:15px;height:15px;fill:none;stroke:#8a958b;stroke-width:2;flex-shrink:0}
.tsf-search input{flex:1;border:none;outline:none;background:none;font-size:13px;font-weight:600;color:var(--ink-900,#1a241c)}
.tsf-search input::placeholder{color:#a7b0a6}
.tsf-results{display:flex;flex-wrap:wrap;gap:7px;background:#fff;border:1px solid rgba(20,31,23,.08);border-radius:13px;padding:10px;box-shadow:0 6px 18px rgba(20,40,22,.1)}
.tsf-result{display:inline-flex;align-items:center;gap:7px;background:var(--cream-50,#fbf8f1);border:1px solid rgba(20,31,23,.08);border-radius:999px;padding:5px 13px 5px 5px;font-size:12.5px;font-weight:800;color:var(--ink-900,#1a241c);cursor:pointer}
.tsf-result.active{background:var(--forest-600,#385c3d);color:#fff}
.tsf-result .avatar{width:26px;height:26px;font-size:10px}
.tsf-noresult{font-size:12.5px;color:var(--ink-500,#5d6b60);padding:4px 8px}
/* ============================================================
EMPLOYEE ROSTER CARD — premium (rc2)
============================================================ */
.rc2{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(20,31,23,.07);
border-radius:20px;padding:14px 14px 12px 0;margin-bottom:12px;
box-shadow:0 4px 16px rgba(20,40,22,.07)}
.rc2.is-rejected{opacity:.85}
.rc2.is-rejected .rc2-rail{background:#b0392c}
.rc2.is-done{opacity:.8}
.rc2-start{flex-shrink:0;border:none;cursor:pointer;background:linear-gradient(150deg,#3f8a52,#2f6b3e);color:#fff;
font-size:14px;font-weight:800;padding:11px 20px;border-radius:14px;box-shadow:0 5px 14px rgba(47,107,62,.32)}
.rc2-start.ghost{background:#fff;color:var(--deep);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--solid) 30%,transparent)}
.rc2-start:active{transform:scale(.96)}
.rc2-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:none;
height:42px;border-radius:13px;font-size:14px;font-weight:800;transition:transform .1s ease}
.rc2-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
.rc2-btn:active{transform:scale(.97)}
.rc2-btn.accept{background:#fff;color:#2f6b3e;box-shadow:inset 0 0 0 1.5px rgba(47,107,62,.25)}
.rc2-btn.accept.full{background:linear-gradient(150deg,#3f8a52,#2f6b3e);color:#fff;box-shadow:0 5px 14px rgba(47,107,62,.3)}
.rc2-btn.reject{background:#fff;color:#5d6b60;box-shadow:inset 0 0 0 1.5px rgba(20,31,23,.16)}
.rc2-state.pending{background:var(--cream-100,#f3eee2);color:var(--ink-500,#5d6b60)}
.rc2-state.done{background:#e3f0e4;color:#236b34}
.rc2-state.rejected{background:#fbe4e0;color:#b0392c}
/* ============================================================
ROSTER CARD edges/colours to match reference + tiny admin card
============================================================ */
/* soften shared rc2 to match the reference watercolor edge */
.rc2{border-radius:22px;box-shadow:0 5px 18px rgba(20,40,22,.08)}
.rc2-edit{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;border:none;cursor:pointer;
background:linear-gradient(150deg,var(--solid),var(--deep));color:#fff;
font-size:12.5px;font-weight:800;padding:9px 15px;border-radius:13px;
box-shadow:0 4px 11px color-mix(in srgb,var(--solid) 38%,transparent)}
.rc2-edit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.rc2-edit:active{transform:scale(.95)}
.rc2-statusbtn.pub{background:linear-gradient(150deg,var(--solid),var(--deep));color:#fff;
box-shadow:0 4px 11px color-mix(in srgb,var(--solid) 34%,transparent)}
.rc2-statusbtn.draft{background:#fbf0d8;color:#9a6a12}
/* ============================================================
CHAT CONTACT INFO modal
============================================================ */
.cth-card{display:flex;align-items:center;gap:11px;background:none;border:none;cursor:pointer;text-align:left;padding:0;flex:1;min-width:0}
.cth-card .cth-info{min-width:0}
.contact-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:6px 0 16px}
.avatar.xl{width:84px;height:84px;border-radius:26px;font-size:28px;font-weight:800}
.contact-name{font-family:var(--font-display,Georgia,serif);font-size:22px;font-weight:600;color:var(--ink-900,#1a241c)}
.contact-title{font-size:13px;font-weight:600;color:var(--ink-500,#5d6b60);margin-top:-4px}
.contact-actions{display:flex;gap:10px;margin-bottom:16px}
.contact-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
text-decoration:none;border-radius:16px;padding:14px 8px;font-size:13px;font-weight:800;cursor:pointer}
.contact-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2}
.contact-btn:active{transform:scale(.97)}
.contact-btn.call{background:linear-gradient(150deg,#3f8a52,#2f6b3e);color:#fff;box-shadow:0 5px 14px rgba(47,107,62,.3)}
.contact-btn.email{background:linear-gradient(150deg,var(--clay-400,#cf8a64),var(--clay-600,#a35a35));color:#fff;box-shadow:0 5px 14px rgba(163,90,53,.3)}
.contact-btn.chat{background:linear-gradient(150deg,var(--sage-500,#7a987b),var(--forest-600,#385c3d));color:#fff;box-shadow:0 5px 14px rgba(56,92,61,.3);border:none}
.contact-info{display:flex;flex-direction:column;gap:8px}
.contact-row{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--cream-50,#fbf8f1);
border:1px solid rgba(20,31,23,.06);border-radius:13px;padding:11px 13px}
a.contact-row:active{transform:scale(.99)}
/* prevent horizontal drift, overscroll, and double-tap zoom */
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{touch-action:pan-y;overflow-x:hidden}
body{max-width:100vw;overflow-x:hidden;touch-action:pan-y}
*{-webkit-tap-highlight-color:transparent}
/* allow normal typing/selection in inputs */
input,textarea{-webkit-user-select:text;user-select:text;touch-action:auto}
.cv-search{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:0 12px;height:42px;background:#fff;border:1.5px solid rgba(20,31,23,.12);border-radius:12px}
.cv-search:focus-within{border-color:var(--forest-500,#4a7351);box-shadow:0 0 0 3px rgba(74,115,81,.18)}
.cv-search-ic{display:flex;flex-shrink:0}
.cv-search-ic svg{width:16px;height:16px;fill:none;stroke:#8a958b;stroke-width:2}
.cv-search input{flex:1;border:0;outline:0;background:transparent;font-size:14px;font-weight:600;color:#1a241c;min-width:0}
.cv-search input::placeholder{color:#a7b0a6}
.cv-search input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.cv-search-clear{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(20,31,23,.1);color:#3a4a3c}
.cv-search-clear svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4}
.cv-people-label{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#9aa090;padding:10px 16px 4px}
.cv-none{font-size:13px;color:#5d6b60;padding:18px 16px}
.cv-person .cv-chev svg{stroke:#4a7351}
.nc-search{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 12px;height:44px;background:#fff;border:1.5px solid rgba(20,31,23,.12);border-radius:12px}
.nc-search:focus-within{border-color:var(--forest-500,#4a7351);box-shadow:0 0 0 3px rgba(74,115,81,.18)}
.nc-search-ic{display:flex;flex-shrink:0}
.nc-search-ic svg{width:16px;height:16px;fill:none;stroke:#8a958b;stroke-width:2}
.nc-search input{flex:1;border:0;outline:0;background:transparent;font-size:14.5px;font-weight:600;color:#1a241c;min-width:0}
.nc-search input::placeholder{color:#a7b0a6}
.nc-search input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.nc-none{font-size:13px;color:#5d6b60;padding:16px 4px;text-align:center}
/* ============================================================
EMPLOYEE TIMESHEET REQUESTS — grouped by status
============================================================ */
.treq-zone{margin-top:14px;background:#fff;border:1px solid rgba(20,31,23,.08);border-radius:18px;
padding:14px 13px;box-shadow:0 4px 16px rgba(20,40,22,.06)}
.treq-title{margin-bottom:10px}
.treq-title h3{font-family:var(--font-display,Georgia,serif);font-size:17px;font-weight:600;color:var(--ink-900,#1a241c);margin:0}
.treq-sub{font-size:12px;color:var(--ink-500,#5d6b60);font-weight:600}
.treq-group{margin-top:12px}
.treq-group-head{display:flex;align-items:center;justify-content:space-between;
font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
padding:6px 4px 8px;color:var(--ink-500,#5d6b60)}
.treq-group-head.pending{color:#9a6a12}
.treq-group-head.approved{color:#236b34}
.treq-group-head.paid{color:#2f6b3e}
.treq-group-head.flagged{color:#b0392c}
.treq-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
font-size:11px;font-weight:800;background:rgba(20,31,23,.08);color:var(--ink-700,#3a4a3c)}
.treq-row{width:100%;display:flex;align-items:center;gap:11px;cursor:pointer;text-align:left;
background:var(--cream-50,#fbf8f1);border:1px solid rgba(20,31,23,.06);border-radius:13px;
padding:10px 12px;margin-bottom:7px}
.treq-row:active{transform:scale(.995)}
.treq-date{flex-shrink:0;display:flex;flex-direction:column;min-width:74px}
.treq-date strong{font-size:12.5px;font-weight:800;color:var(--forest-700,#1d3d24);line-height:1.2}
.treq-date em{font-style:normal;font-size:10.5px;color:var(--ink-500,#5d6b60);font-weight:600}
.treq-main{flex:1;display:flex;flex-direction:column;min-width:0}
.treq-main strong{font-size:14px;font-weight:700;color:var(--ink-900,#1a241c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.treq-main em{font-style:normal;font-size:11.5px;color:var(--ink-500,#5d6b60);font-weight:600}
.treq-badge{flex-shrink:0;font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
padding:5px 10px;border-radius:999px}
.treq-badge.pending{background:#fbf0d8;color:#9a6a12}
.treq-badge.approved{background:#e3f0e4;color:#236b34}
.treq-badge.paid{background:#dcebe0;color:#2f6b3e}
.treq-badge.flagged{background:#fbe4e0;color:#b0392c}
/* roster employee search */
.rwg-search{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:0 13px;height:46px;
background:#fff;border:1.5px solid rgba(20,31,23,.12);border-radius:13px}
.rwg-search:focus-within{border-color:var(--forest-500,#4a7351);box-shadow:0 0 0 3px rgba(74,115,81,.18)}
.rwg-search-ic{display:flex;flex-shrink:0}
.rwg-search-ic svg{width:17px;height:17px;fill:none;stroke:#8a958b;stroke-width:2}
.rwg-search input{flex:1;border:0;outline:0;background:transparent;font-size:14.5px;font-weight:600;color:var(--ink-900,#1a241c);min-width:0}
.rwg-search input::placeholder{color:#a7b0a6}
.rwg-search input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.rwg-search-clear{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(20,31,23,.1);color:#3a4a3c}
.rwg-search-clear svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4}
.rwg-noemp{padding:26px;text-align:center;color:var(--ink-500,#5d6b60);font-weight:600}
.rwg-name[data-action]:hover{background:var(--cream-50,#fbf8f1);border-radius:10px}
/* employee week modal */
.ew-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ew-name{font-family:var(--font-display,Georgia,serif);font-size:18px;font-weight:600;color:var(--ink-900,#1a241c)}
.ew-sub{font-size:12px;color:var(--ink-500,#5d6b60);font-weight:600}
.ew-total{flex-shrink:0;text-align:center;background:linear-gradient(150deg,#4a8f5a,#2f6b3e);color:#fff;border-radius:13px;padding:9px 13px}
.ew-total strong{display:block;font-size:18px;font-weight:800;line-height:1}
.ew-total em{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;color:rgba(255,255,255,.82)}
.ew-days{display:flex;flex-direction:column;gap:7px}
.ew-day{display:flex;align-items:stretch;gap:11px;padding:9px 11px;border-radius:12px;background:var(--cream-50,#fbf8f1);border:1px solid rgba(20,31,23,.07)}
.ew-day.has{background:linear-gradient(120deg,#e8f2e6,#fbf8f1 70%);border-color:rgba(63,107,62,.22)}
.ew-daycol{flex-shrink:0;width:42px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.ew-dow{font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-500,#5d6b60)}
.ew-daycol strong{font-size:17px;color:var(--forest-700,#1d3d24)}
.ew-daybody{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center}
.ew-shift{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ew-time{font-size:12px;font-weight:800;color:var(--forest-700,#1d3d24)}
.ew-client{font-size:13px;font-weight:700;color:var(--ink-900,#1a241c);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ew-pill{font-size:9.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.ew-pill.pub{background:#e3f0e4;color:#236b34}
.ew-pill.draft{background:#fbf0d8;color:#9a6a12}
.ew-none{font-size:12.5px;color:var(--ink-400,#9aa090);font-style:italic}
.ew-dayh{flex-shrink:0;align-self:center;font-size:12px;font-weight:800;color:var(--deep,#2f6b3e)}
/* nicer time dropdowns */
.time-select{cursor:pointer}
/* Melbourne address autocomplete */
.addr-wrap{position:relative}
.addr-suggest{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;
background:#fff;border:1px solid rgba(20,31,23,.12);border-radius:13px;
box-shadow:0 10px 28px rgba(20,40,22,.16);overflow:hidden;max-height:240px;overflow-y:auto}
.addr-suggest.open{display:block}
.addr-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
border:0;background:#fff;padding:11px 13px;font-size:13.5px;font-weight:600;color:var(--ink-900,#1a241c);
border-bottom:1px solid var(--line,rgba(20,31,23,.06))}
.addr-opt:last-child{border-bottom:0}
.addr-opt:hover,.addr-opt:active{background:var(--cream-50,#fbf8f1)}
.addr-opt svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:var(--forest-600,#385c3d);stroke-width:2}
.addr-opt span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr-opt.addr-best{background:var(--sage-50,#eef3e7)}
.addr-opt.addr-best span{font-weight:800;color:var(--forest-700,#1d3d24)}
.addr-best-tag{margin-left:auto;flex-shrink:0;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--forest-600,#385c3d);background:rgba(56,92,61,.12);padding:2px 7px;border-radius:999px;font-style:normal}
/* tappable address → maps */
.sv-maplink{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;cursor:pointer;
border:1px solid rgba(63,107,62,.28)!important;background:linear-gradient(120deg,#e8f2e6,#fbf8f1 80%)!important;
border-radius:13px;transition:transform .12s ease,box-shadow .12s ease}
.sv-maplink:active{transform:scale(.99)}
.sv-maplink .sv-go{margin-left:auto;flex-shrink:0;width:30px;height:30px;border-radius:50%;
display:grid;place-items:center;background:var(--forest-600,#385c3d);color:#fff;transform:rotate(180deg)}
.sv-maplink .sv-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
.sv-dirbtn{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px}
.sv-dirbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.sv-loc-wrap{display:flex;flex-direction:column;gap:6px}
.sv-addr-copy{cursor:pointer}
.sv-addr-copy:active{transform:scale(.99)}
.sv-go-btn{border:0;cursor:pointer;padding:0}
.sv-copy-addr{
align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:10px;cursor:pointer;
background:rgba(255,255,255,.7);border:1px solid rgba(63,107,62,.24);
color:#2e4c2c;font-size:12.5px;font-weight:800;
}
.sv-copy-addr svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.sv-copy-addr:active{transform:scale(.97)}
/* bigger, easier close X */
.modal-x{width:38px;height:38px;font-size:24px;display:grid;place-items:center;border-radius:12px}
.modal-x:active{background:rgba(20,31,23,.08)}
/* roster employee search at top + result cards */
.rwg-search-top{margin:0 0 12px}
.rwg-results{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.rwg-result{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
background:#fff;border:1px solid rgba(20,31,23,.1);border-radius:14px;padding:11px 13px;
box-shadow:0 2px 8px rgba(20,40,22,.05)}
.rwg-result:active{transform:scale(.995)}
.rwg-result-av{flex-shrink:0;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,var(--forest-500,#4a7351),var(--forest-700,#1d3d24));color:#fff;font-weight:800;font-size:15px}
.rwg-result-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.rwg-result-txt strong{font-size:15px;font-weight:800;color:var(--ink-900,#1a241c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rwg-result-txt em{font-style:normal;font-size:12.5px;color:var(--ink-500,#5d6b60);font-weight:600}
.rwg-result-go{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:var(--cream-100,#f3eee2);color:var(--forest-700,#1d3d24);transform:rotate(180deg)}
.rwg-result-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
.rwg-result-none{padding:18px;text-align:center;color:var(--ink-500,#5d6b60);font-weight:600;font-size:13.5px}
/* ===== Add a shift — redesigned footer buttons ===== */
.shift-modal .modal-foot{display:flex;align-items:center;gap:10px}
.sft-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
height:42px;border-radius:13px;border:0;cursor:pointer;
font-size:14.5px;font-weight:800;letter-spacing:-.01em;
transition:transform .12s ease, box-shadow .14s ease, background .14s ease;
}
.sft-btn:active{transform:translateY(1px) scale(.99)}
.sft-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Cancel — clean outlined */
.sft-cancel{
flex:0 0 auto;padding:0 20px;background:#fff;color:var(--ink-700,#3a4a3c);
border:1.5px solid rgba(20,31,23,.16);
}
.sft-cancel:hover{background:var(--cream-50,#fbf8f1)}
/* Save / Create — bold gradient, fills remaining width */
.sft-save{
flex:1 1 auto;padding:0 22px;color:#fff;
background:linear-gradient(135deg,#4a8f5a 0%,#2f6b3e 60%,#1d4a2a 100%);
box-shadow:0 8px 20px rgba(31,80,40,.34), inset 0 1px 0 rgba(255,255,255,.22);
}
.sft-save:hover{box-shadow:0 10px 26px rgba(31,80,40,.42), inset 0 1px 0 rgba(255,255,255,.25)}
.sft-save svg{stroke-width:2.6}
/* Delete — soft red square */
.sft-del{
flex:0 0 auto;width:50px;padding:0;color:#b0392c;
background:#fbe7e3;border:1.5px solid rgba(176,57,44,.22);
}
.sft-del:hover{background:#f7d8d2}
.sft-del svg{width:20px;height:20px;stroke:#b0392c}
@media(max-width:480px){
.sft-btn{height:40px;font-size:13.5px;border-radius:12px}
.sft-cancel{padding:0 16px}
.sft-del{width:40px}
}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* ---- inline style 7 ---- */
/* Make Important Updates unmistakable without changing other sections */
.important-updates-panel{
position:relative!important;
overflow:hidden!important;
border:1.5px solid rgba(179,101,36,.34)!important;
background:
radial-gradient(circle at 12% 0%,rgba(255,213,128,.42),transparent 34%),
linear-gradient(135deg,#fff4da 0%,#f4dfba 48%,#e4efd9 100%)!important;
box-shadow:0 16px 34px rgba(65,45,18,.13),inset 0 1px 0 rgba(255,255,255,.78)!important;
}
.important-updates-panel .section-head{align-items:center!important;margin-bottom:12px!important}
.important-updates-panel .section-head h2{
display:flex!important;align-items:center!important;gap:8px!important;
color:#1d3d24!important;font-weight:950!important;letter-spacing:-.02em!important;
}
.iu-pulse{
width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;
background:linear-gradient(180deg,#dc8b35,#9c4f24);color:#fff8e8;font-size:15px;font-weight:950;
box-shadow:0 0 0 5px rgba(205,132,50,.16),0 7px 16px rgba(131,75,28,.22);
}
.iu-count{background:#1d3d24!important;color:#fff8e8!important;border-color:rgba(29,61,36,.25)!important}
.important-updates-panel .upd-item{
border:1px solid rgba(146,85,34,.18)!important;
background:rgba(255,252,244,.76)!important;
box-shadow:0 8px 18px rgba(48,58,38,.07)!important;
}
.important-updates-panel .upd-item.pinned{border-color:rgba(184,103,32,.34)!important;background:#fff7e8!important}
.important-updates-panel .upd-row{min-height:60px!important}
.upd-priority{
display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
height:22px;padding:0 8px;border-radius:999px;background:#934b24;color:#fff8e8;
font-size:8px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;
}
.important-updates-panel .upd-dot{background:linear-gradient(180deg,#dd9243,#9d5527)!important;color:#fff!important;box-shadow:0 7px 16px rgba(139,78,32,.2)!important}
/* Employee mobile roster cards — skinnier and quicker to scan */
@media(max-width:720px){
.roster-mobile .shift-card{min-height:52px!important;margin-bottom:5px!important;border-radius:13px!important;box-shadow:0 4px 12px rgba(27,43,27,.07)!important}
.roster-mobile .shift-card .sc-time{width:40px!important;padding:4px 1px!important}
.roster-mobile .shift-card .sc-dow{font-size:7.5px!important}
.roster-mobile .shift-card .sc-start{font-size:12px!important}
.roster-mobile .shift-card .sc-main{padding:5px 7px!important}
.roster-mobile .shift-card .sc-row1 h3{font-size:11.8px!important;line-height:1.05!important}
.roster-mobile .shift-card .sc-range{height:20px!important;padding:0 7px!important;font-size:8.8px!important}
.roster-mobile .shift-card .sc-row2{font-size:9px!important;margin-top:2px!important;line-height:1.2!important}
.roster-mobile .shift-card .sc-row3{margin-top:3px!important}
.roster-mobile .shift-card .sc-emp-accept,
.roster-mobile .shift-card .sc-emp-reject,
.roster-mobile .shift-card .sc-emp-start,
.roster-mobile .shift-card .sc-emp-state,
.roster-mobile .shift-card .sc-locked{height:22px!important;border-radius:8px!important;font-size:8.2px!important}
.employee-clock-shifts .emp-shift.v28-slim-shift{padding:6px 7px 7px!important;border-radius:13px!important;margin-bottom:6px!important;box-shadow:0 4px 12px rgba(27,43,27,.07)!important}
.employee-clock-shifts .emp-shift.v28-slim-shift h3{font-size:14px!important;margin-bottom:2px!important}
.employee-clock-shifts .emp-shift.v28-slim-shift .es-loc{font-size:9.7px!important}
.employee-clock-shifts .emp-shift.v28-slim-shift .es-note{padding:4px 6px!important;font-size:9.5px!important;margin-top:4px!important}
.employee-clock-shifts .emp-shift.v28-slim-shift .es-actions{gap:4px!important;margin-top:4px!important;padding-top:4px!important}
.employee-clock-shifts .emp-shift.v28-slim-shift .ec-reject,
.employee-clock-shifts .emp-shift.v28-slim-shift .ec-accept,
.employee-clock-shifts .emp-shift.v28-slim-shift .ec-start,
.employee-clock-shifts .emp-shift.v28-slim-shift .ec-done,
.employee-clock-shifts .emp-shift.v28-slim-shift .ec-declined{height:24px!important;border-radius:8px!important;font-size:8.8px!important}
}
/* Mobile speed/responsiveness: reduce expensive paint work on phone only */
@media(max-width:720px){
*{scroll-behavior:auto!important}
.content,.chat-scroll,.employee-clock-shifts,.roster-mobile{contain:layout paint style!important}
.shift-card,.emp-shift.v28-slim-shift,.important-updates-panel .upd-item,.stat,.card,.doc-card{transition:none!important}
.shift-card:hover,.emp-shift.v28-slim-shift:hover,.card:hover{transform:none!important}
.shift-card::after,.emp-shift.v28-slim-shift::after{opacity:.25!important}
}
/* Remove awkward white bottom space on mobile by making the bottom area intentional */
@media(max-width:1023px){
html,body,#app,.shell,.main{
min-height:100dvh!important;
background:linear-gradient(180deg,#e8f0e3 0%,#dce8d8 56%,#18321f 100%)!important;
}
.main{padding-bottom:0!important}
.content{min-height:calc(100dvh - 84px)!important;padding-bottom:calc(104px + var(--safe-b))!important;background:transparent!important}
}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* ---- inline style 8 ---- */
/* Compact Important Updates card — still clear, but no oversized rows */
.important-updates-panel{
margin-top:4px!important;
padding:10px 11px 8px!important;
border-radius:17px!important;
box-shadow:0 8px 18px rgba(65,45,18,.08),inset 0 1px 0 rgba(255,255,255,.75)!important;
}
.important-updates-panel .section-head{
min-height:34px!important;
margin:0 0 7px!important;
padding-bottom:6px!important;
border-bottom:1px solid rgba(83,93,62,.14)!important;
}
.important-updates-panel .section-head h2{
gap:6px!important;
font-size:18px!important;
line-height:1.05!important;
}
.important-updates-panel .section-head .btn{
height:34px!important;
min-height:34px!important;
padding:0 13px!important;
border-radius:13px!important;
font-size:12.5px!important;
box-shadow:0 4px 10px rgba(30,55,34,.06)!important;
}
.important-updates-panel .section-head .btn svg{width:15px!important;height:15px!important}
.iu-pulse{width:20px!important;height:20px!important;font-size:13px!important;box-shadow:0 0 0 4px rgba(205,132,50,.12),0 4px 9px rgba(131,75,28,.16)!important}
.iu-count{height:20px!important;min-width:20px!important;padding:0 6px!important;font-size:10px!important}
.important-updates-panel .updates-list{padding-top:0!important;margin:0!important;border-top:0!important}
.important-updates-panel .upd-item{border-radius:0!important;box-shadow:none!important;background:rgba(255,252,244,.66)!important}
.important-updates-panel .upd-item:first-child{border-radius:10px 10px 0 0!important}
.important-updates-panel .upd-item:last-child{border-radius:0 0 10px 10px!important}
.important-updates-panel .upd-row{min-height:44px!important;padding:8px 7px!important;gap:8px!important}
.important-updates-panel .upd-dot{width:27px!important;height:27px!important;border-radius:8px!important;box-shadow:0 3px 8px rgba(139,78,32,.13)!important}
.important-updates-panel .upd-dot svg{width:12px!important;height:12px!important}
.important-updates-panel .upd-priority{height:19px!important;padding:0 7px!important;font-size:7.4px!important;letter-spacing:.06em!important}
.important-updates-panel .upd-title{font-size:12.4px!important;line-height:1.05!important;gap:5px!important}
.important-updates-panel .upd-meta{font-size:10px!important;line-height:1.05!important}
.important-updates-panel .upd-pin{font-size:7.4px!important;padding:1px 6px!important}
.important-updates-panel .upd-chev{width:18px!important;height:18px!important}
.important-updates-panel .upd-chev svg{width:12px!important;height:12px!important}
/* Mobile admin roster: cleaner, more professional Add shift button */
@media(max-width:720px){
.rst-hero.admin .rst-hero-foot{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:11px!important}
.rst-hero.admin .rst-hs{min-height:46px!important;border-radius:12px!important;padding:7px 5px!important;background:rgba(255,255,255,.11)!important}
.rst-hero.admin .rst-hs strong{font-size:16px!important}
.rst-hero.admin .rst-hs em{font-size:8.4px!important;line-height:1.05!important}
.rst-hero.admin .rst-hero-add{
grid-column:1 / -1!important;
min-height:42px!important;
border-radius:15px!important;
padding:0 14px!important;
justify-content:center!important;
background:linear-gradient(135deg,#f6ead5 0%,#fffdf6 52%,#e4eddd 100%)!important;
color:#173a24!important;
border:1px solid rgba(255,255,255,.45)!important;
box-shadow:0 8px 16px rgba(9,27,13,.20),inset 0 1px 0 rgba(255,255,255,.88)!important;
font-size:13px!important;
font-weight:950!important;
}
.rst-hero.admin .rst-hero-add .rha-ic{
width:25px!important;height:25px!important;
background:linear-gradient(145deg,#3f8f50,#1f6531)!important;
box-shadow:0 3px 9px rgba(31,101,49,.28)!important;
}
.rst-hero.admin .rst-hero-add svg{width:14px!important;height:14px!important;stroke-width:2.8!important}
.rst-hero.admin .rst-hero-add:active{transform:scale(.985)!important}
}
/* Faster/smoother phone interaction without changing layout */
@media(max-width:1023px){
button,a,[data-action],input,textarea,select{touch-action:manipulation!important}
.content{overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
.topbar,.mobile-nav,.important-updates-panel,.rst-hero,.shift-card,.rcard,.card,.updates-panel{
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.shift-card,.rcard,.updates-panel,.important-updates-panel,.stat,.card,.rst-hero{
transition:transform .08s ease!important;
}
.mobile-nav .mtab.active{transition:transform .08s ease!important}
}
@media(max-width:430px){
.important-updates-panel{padding:9px 10px 7px!important;border-radius:16px!important}
.important-updates-panel .section-head h2{font-size:16.5px!important}
.important-updates-panel .section-head .btn{height:31px!important;min-height:31px!important;padding:0 10px!important;font-size:11.5px!important}
.important-updates-panel .upd-row{min-height:40px!important;padding:7px 6px!important;gap:7px!important}
.important-updates-panel .upd-priority{display:none!important}
.important-updates-panel .upd-title{font-size:12px!important}
.important-updates-panel .upd-dot{width:23px!important;height:23px!important}
}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* ---- inline style 9 ---- */
@media(max-width:720px){
.hm-hero.admin .hm-hero-add{
flex-direction:row!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
min-width:92px!important;
height:34px!important;
padding:0 10px 0 8px!important;
border-radius:14px!important;
background:linear-gradient(135deg,#f7b24a 0%,#c87627 42%,#9c4f1f 100%)!important;
color:#fffaf0!important;
border:1px solid rgba(255,224,169,.72)!important;
box-shadow:0 8px 16px rgba(91,45,15,.24),inset 0 1px 0 rgba(255,255,255,.34)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
font-size:11px!important;
font-weight:950!important;
letter-spacing:.01em!important;
text-shadow:0 1px 1px rgba(64,31,10,.22)!important;
}
.hm-hero.admin .hm-hero-add::before{
content:""!important;
width:20px!important;
height:20px!important;
border-radius:8px!important;
background:rgba(255,255,255,.20)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important;
position:absolute!important;
left:7px!important;
pointer-events:none!important;
}
.hm-hero.admin .hm-hero-add svg{
width:14px!important;
height:14px!important;
stroke-width:2.8!important;
flex:0 0 auto!important;
position:relative!important;
z-index:1!important;
margin-right:2px!important;
}
.hm-hero.admin .hm-hero-add span{
display:inline-block!important;
line-height:1!important;
white-space:nowrap!important;
position:relative!important;
z-index:1!important;
}
.hm-hero.admin .hm-hero-add:active{
transform:scale(.97)!important;
}
}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* ---- inline style 10 ---- */
@media(max-width:720px){
.hm-hero.admin .hm-hero-add{
position:relative!important;
flex-direction:row!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
width:auto!important;
min-width:0!important;
height:29px!important;
padding:0 10px 0 6px!important;
border-radius:999px!important;
background:linear-gradient(135deg,#fffaf0 0%,#f6e2b8 100%)!important;
color:#173f25!important;
border:1px solid rgba(244,190,89,.95)!important;
box-shadow:0 7px 15px rgba(0,0,0,.16),0 0 0 2px rgba(255,243,208,.16),inset 0 1px 0 rgba(255,255,255,.82)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
font-size:10.5px!important;
font-weight:950!important;
letter-spacing:.01em!important;
text-shadow:none!important;
}
.hm-hero.admin .hm-hero-add::before{
content:none!important;
}
.hm-hero.admin .hm-hero-add::after{
content:""!important;
position:absolute!important;
right:5px!important;
top:5px!important;
width:5px!important;
height:5px!important;
border-radius:50%!important;
background:#24c064!important;
box-shadow:0 0 0 3px rgba(36,192,100,.18)!important;
pointer-events:none!important;
}
.hm-hero.admin .hm-hero-add svg{
width:20px!important;
height:20px!important;
padding:4px!important;
box-sizing:border-box!important;
border-radius:50%!important;
background:linear-gradient(135deg,#ef9f29 0%,#ae5c20 100%)!important;
color:#fffaf0!important;
stroke:#fffaf0!important;
stroke-width:3!important;
flex:0 0 20px!important;
position:relative!important;
z-index:1!important;
margin:0!important;
box-shadow:0 3px 8px rgba(111,54,18,.22),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
.hm-hero.admin .hm-hero-add span{
display:inline-block!important;
position:relative!important;
z-index:1!important;
line-height:1!important;
white-space:nowrap!important;
padding-right:3px!important;
}
.hm-hero.admin .hm-hero-add:active{
transform:translateY(1px) scale(.98)!important;
}
}
@media(max-width:1023px){
.sidebar{display:none}
body.chat-thread-open::before{display:none}
.dock-inner{display:flex;align-items:stretch;width:100%;max-width:520px}
.dock-ico{display:grid;place-items:center;width:24px;height:24px}
.dock-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round;display:block}
.dock-lbl{
font-size:10.5px;font-weight:700;letter-spacing:.005em;line-height:1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* active: white + small green dot underneath */
.dock-tab.is-active{color:#fff}
.dock-tab.is-active .dock-ico svg{stroke-width:2.2}
.dock-tab.is-active::after{
content:"";position:absolute;bottom:1px;left:50%;transform:translateX(-50%);
width:5px;height:5px;border-radius:50%;
background:#7fe39a;box-shadow:0 0 7px rgba(127,227,154,.7);
}
.content{padding-bottom:calc(86px + var(--safe-b))!important}
body.chat-thread-open .dock{display:none!important}
}
@keyframes ndialPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.ndial-ticks line.maj{stroke:rgba(233,205,134,.9)}
.ndial-stop:active{transform:translateY(1px) scale(.99)}
/* time entry modal — standout header */
.te-head{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;overflow:hidden;
background:
radial-gradient(120% 90% at 90% -10%, rgba(143,224,163,.28), transparent 55%),
linear-gradient(135deg,#2c6a3e 0%,#1a4429 55%,#12351f 100%);
color:#fff;border-radius:20px;padding:18px 18px;margin-bottom:14px;
border:1px solid rgba(150,200,160,.2);
box-shadow:0 14px 30px rgba(8,30,16,.34), inset 0 1px 0 rgba(255,255,255,.1)}
.te-head::before{content:"";position:absolute;width:130px;height:130px;border-radius:50%;
background:rgba(143,224,163,.22);filter:blur(40px);top:-40px;right:-30px;pointer-events:none}
.te-client{position:relative;font-family:var(--font-display,Georgia,serif);font-size:21px;font-weight:700;line-height:1.1}
.te-sub{position:relative;grid-column:1;font-size:12.5px;color:rgba(220,236,222,.78);font-weight:600;margin-top:2px}
.te-hours{position:relative;grid-row:1 / span 2;grid-column:2;text-align:right;align-self:center}
.te-hours strong{display:block;font-size:30px;font-weight:850;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.te-hours span{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(220,236,222,.72);font-weight:800}
.te-status{position:relative;grid-column:1;justify-self:start;margin-top:8px}
/* approved pill — bolder inside the dark header */
.te-status.pill-green{
display:inline-flex;align-items:center;gap:6px;
background:linear-gradient(135deg,#8fe0a3,#4caf68)!important;color:#0c2a16!important;
border:0!important;font-weight:850;padding:6px 13px;font-size:12px;
box-shadow:0 4px 12px rgba(40,120,60,.4)}
.te-status.pill-green::before{content:"✓";font-weight:900;font-size:12px}
/* request/admin variants without the hours block */
.te-head-req{grid-template-columns:1fr}
.te-head-req .te-status{margin-top:10px}
.te-head-req .te-status.pill-green::before{content:""}
/* keep on-shift clock fully visible on short phones */
@media(max-height:740px){
}
/* ============================================================
PERFORMANCE & SMOOTHNESS
============================================================ */
*{
-webkit-tap-highlight-color:transparent; /* no grey flash on tap */
}
html{
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
body{
overscroll-behavior-y:none; /* stop rubber-band jank */
}
.content,.modal-body,.chat-scroll,.page,#page{
-webkit-overflow-scrolling:touch; /* momentum scroll on iOS */
overscroll-behavior:contain;
}
/* snappy, consistent press feedback on all tappable elements */
button,.btn,[data-action],a{
-webkit-touch-callout:none;
transition:transform .12s ease, opacity .12s ease, background-color .16s ease, box-shadow .16s ease;
}
button:active,.btn:active,[data-action]:active{transform:scale(.97)}
/* keep already-styled controls from double-shrinking */
.dock-tab:active,.ndial-stop:active,.sft-save:active,.sft-cancel:active{transform:scale(.97)}
/* promote only genuinely-animated layers to GPU to avoid repaint jank */
.modal,.modal-overlay,.dock,.ndial-prog{
will-change:transform;
transform:translateZ(0);
}
/* respect users who prefer less motion */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.05ms!important}
html{scroll-behavior:auto}
}
/* ============================================================
IMPORTANT UPDATES — clean professional redesign (final)
============================================================ */
.important-updates-panel{
background:#ffffff !important;
border:1px solid rgba(20,40,22,.08) !important;
border-radius:16px !important;
padding:11px 11px 9px !important;
box-shadow:0 6px 18px rgba(20,40,22,.06) !important;
}
.important-updates-panel .section-head{
display:flex !important;align-items:center !important;gap:8px !important;
min-height:0 !important;margin:0 0 9px !important;padding:0 !important;border-bottom:0 !important;
}
.important-updates-panel .section-head h2{
display:flex !important;align-items:center !important;gap:8px !important;
font-family:var(--font-display,Georgia,serif) !important;
font-size:15px !important;font-weight:700 !important;color:#16271a !important;margin:0 !important;
}
/* tidy accent icon instead of the heavy orange ! */
.iu-pulse{
width:21px !important;height:21px !important;border-radius:7px !important;
display:grid !important;place-items:center !important;
background:linear-gradient(140deg,#3f8f50,#1f6531) !important;color:#fff !important;
font-size:12px !important;font-weight:800 !important;
box-shadow:0 3px 8px rgba(31,101,49,.26) !important;
}
.iu-count{
height:19px !important;min-width:19px !important;padding:0 6px !important;
display:grid !important;place-items:center !important;border-radius:999px !important;
background:#eef3ea !important;color:#1d3d24 !important;border:0 !important;
font-size:10.5px !important;font-weight:800 !important;
}
.important-updates-panel .section-head .btn{
height:30px !important;min-height:30px !important;padding:0 12px !important;border-radius:9px !important;
background:#f1f5ee !important;color:#1d3d24 !important;border:1px solid rgba(20,40,22,.08) !important;
font-size:12px !important;font-weight:800 !important;box-shadow:none !important;
}
.important-updates-panel .updates-list{
display:flex !important;flex-direction:column !important;gap:6px !important;
padding:0 !important;margin:0 !important;border-top:0 !important;list-style:none !important;
}
.important-updates-panel .upd-item{
background:#fbfaf6 !important;border:1px solid rgba(20,40,22,.07) !important;
border-radius:11px !important;box-shadow:none !important;overflow:hidden !important;
position:relative !important;
}
.important-updates-panel .upd-item::before{
content:"" !important;position:absolute !important;left:0 !important;top:0 !important;bottom:0 !important;
width:3px !important;background:#cbd5c2 !important;
}
.important-updates-panel .upd-item.pinned{background:#fffdf5 !important;border-color:rgba(201,162,78,.32) !important}
.important-updates-panel .upd-item.pinned::before{background:linear-gradient(180deg,#e9cd86,#c9a24e) !important}
.important-updates-panel .upd-row{
display:flex !important;align-items:center !important;gap:9px !important;
min-height:0 !important;padding:8px 10px 8px 12px !important;width:100% !important;
}
/* small status dot instead of big square icon */
.important-updates-panel .upd-dot{
width:26px !important;height:26px !important;border-radius:8px !important;flex-shrink:0 !important;
display:grid !important;place-items:center !important;
background:#eef3ea !important;color:#2c6139 !important;box-shadow:none !important;
}
.important-updates-panel .upd-item.pinned .upd-dot{background:#f6edd6 !important;color:#9a7320 !important}
.important-updates-panel .upd-dot svg{width:13px !important;height:13px !important;fill:none !important;stroke:currentColor !important;stroke-width:2 !important}
.important-updates-panel .upd-priority{display:none !important} /* drop the redundant "Important" tag */
.important-updates-panel .upd-text{display:flex !important;flex-direction:column !important;gap:2px !important;min-width:0 !important;flex:1 !important}
.important-updates-panel .upd-title{
display:flex !important;align-items:center !important;gap:6px !important;
font-size:12.5px !important;font-weight:800 !important;color:#16271a !important;line-height:1.2 !important;
}
.important-updates-panel .upd-pin{
font-size:7.5px !important;font-weight:800 !important;letter-spacing:.06em !important;
background:#f1e2bd !important;color:#8a6516 !important;padding:1px 6px !important;border-radius:999px !important;font-style:normal !important;
}
.important-updates-panel .upd-meta{font-size:10.5px !important;color:#7c8a76 !important;font-weight:600 !important;line-height:1.2 !important}
.important-updates-panel .upd-chev{
width:20px !important;height:20px !important;flex-shrink:0 !important;color:#aab4a3 !important;
display:grid !important;place-items:center !important;
}
.important-updates-panel .upd-chev svg{width:13px !important;height:13px !important;transform:rotate(180deg) !important}
.important-updates-panel .upd-item.open .upd-chev{transform:rotate(-90deg) !important}
.important-updates-panel .upd-item.open{background:#f4f8f0 !important}
.important-updates-panel .upd-body{padding:0 12px 10px 12px !important}
.important-updates-panel .upd-body p{font-size:12.5px !important;color:#3a4a3c !important;line-height:1.45 !important;margin:0 !important}
/* ============================================================
ROSTER CARDS — round badge, bold + sleek edges, mobile only
============================================================ */
@media(max-width:1023px){
.rcard{
position:relative !important;display:block !important;
border-radius:16px !important;padding:10px 12px !important;margin-bottom:8px !important;overflow:hidden !important;
background:
linear-gradient(140deg, var(--solid) 0%, var(--deep) 100%) !important;
border:0 !important;
box-shadow:0 11px 26px color-mix(in srgb,var(--deep) 55%,transparent) !important;
cursor:pointer !important;-webkit-tap-highlight-color:transparent !important;
transition:transform .14s ease, box-shadow .14s ease !important;
}
/* sleek double-edged line tracing the whole card */
.rcard::before{
content:"" !important;position:absolute !important;inset:4px !important;border-radius:13px !important;pointer-events:none !important;z-index:3 !important;
border:1px solid rgba(255,255,255,.32) !important;
box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12) !important;
}
/* sleek double-line accent on the left edge */
.rcard{padding-left:17px !important}
.rcard .rc-main::before{
content:"" !important;position:absolute !important;left:-9px !important;top:4px !important;bottom:4px !important;width:3px !important;border-radius:3px !important;
background:rgba(255,255,255,.85) !important;z-index:5 !important;
box-shadow:4px 0 0 0 rgba(255,255,255,.3) !important;
}
/* glossy top highlight for depth */
.rcard::after{display:none !important}
.rcard.is-draft{background:linear-gradient(140deg, color-mix(in srgb,var(--solid) 88%,#000 0%), var(--deep)) !important;opacity:.96 !important}
/* Admin draft (unpublished) shift = white card that stands out */
.rcard.is-admin.is-draft{
background:#ffffff !important;border:2px dashed color-mix(in srgb,var(--solid) 55%,#fff) !important;opacity:1 !important;
box-shadow:0 6px 18px rgba(20,40,22,.12) !important;
}
.rcard.is-admin.is-draft::after{display:none !important}
.rcard.is-admin.is-draft .rc-badge{background:linear-gradient(160deg,var(--solid),var(--deep)) !important;border:0 !important;color:#fff !important;box-shadow:0 4px 10px color-mix(in srgb,var(--deep) 45%,transparent) !important}
.rcard.is-admin.is-draft .rc-badge strong,.rcard.is-admin.is-draft .rc-badge .rc-ap{color:#fff !important;text-shadow:none !important}
.rcard.is-admin.is-draft .rc-badge .rc-dur{background:#fff !important;color:var(--deep) !important}
.rcard.is-admin.is-draft .rc-info h3{background:transparent !important;border:0 !important;box-shadow:none !important;color:#1a241c !important;text-shadow:none !important;padding-left:0 !important}
.rcard.is-admin.is-draft .rc-time-range{color:var(--deep) !important;text-shadow:none !important}
.rcard.is-admin.is-draft .rc-meta{color:#5d6b60 !important;text-shadow:none !important}
.rcard.is-admin.is-draft .rc-main::before{background:color-mix(in srgb,var(--solid) 70%,#fff) !important;box-shadow:none !important}
.rcard.is-admin.is-draft::before{display:none !important}
.rcard.is-admin.is-draft .rc-draft-tag{display:inline-flex !important}
.rcard:active{transform:scale(.99) !important}
.rc-main{position:relative !important;z-index:2 !important;display:flex !important;align-items:center !important;gap:11px !important;flex-wrap:wrap !important}
.is-emp .rc-actions-row{flex-shrink:0 !important;margin-top:0 !important}
.is-emp .rc-actions-row .rc-act{flex:0 0 auto !important}
/* bold round badge — sleek glass ring */
.rc-badge{
position:relative !important;
width:60px !important;height:60px !important;border-radius:50% !important;flex-shrink:0 !important;
background:
radial-gradient(circle at 50% 30%, rgba(255,255,255,.28), rgba(255,255,255,.1) 60%, rgba(255,255,255,.04)) !important;
border:1.5px solid rgba(255,255,255,.4) !important;color:#fff !important;
display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:0 !important;
box-shadow:0 6px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 4px rgba(255,255,255,.05) !important;
backdrop-filter:blur(2px) !important;
}
.rc-badge strong{font-family:var(--font-display,Georgia,serif) !important;font-size:16px !important;font-weight:800 !important;line-height:1 !important;letter-spacing:-.02em !important;color:#fff !important;text-shadow:0 1px 4px rgba(0,0,0,.5) !important}
.rc-badge .rc-ap{font-size:7.5px !important;font-weight:850 !important;opacity:1 !important;letter-spacing:.12em !important;color:#fff !important;margin-top:1px !important;text-shadow:0 1px 2px rgba(0,0,0,.4) !important}
.rc-badge .rc-dur{
margin-top:3px !important;font-size:8.5px !important;font-weight:900 !important;letter-spacing:.02em !important;color:var(--deep) !important;white-space:nowrap !important;
background:#fff !important;padding:1px 8px !important;border-radius:999px !important;line-height:1.3 !important;
box-shadow:0 2px 5px rgba(0,0,0,.3) !important;
}
.rc-info{flex:1 !important;min-width:0 !important;display:flex !important;flex-direction:column !important;gap:3px !important}
.rc-info h3{
font-family:var(--font-display,Georgia,serif) !important;font-size:16.5px !important;font-weight:800 !important;color:#fff !important;
letter-spacing:-.01em !important;line-height:1.2 !important;margin:0 0 1px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
display:inline-block !important;align-self:flex-start !important;max-width:100% !important;
padding:3px 12px !important;border-radius:999px !important;
background:linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;border:1px solid rgba(255,255,255,.45) !important;
box-shadow:0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35) !important;
text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}
.rc-time-range{font-size:13.5px !important;font-weight:850 !important;color:#fff !important;letter-spacing:.01em !important;line-height:1.25 !important;margin-top:2px !important;text-shadow:0 1px 3px rgba(0,0,0,.55) !important}
.rc-meta{font-size:12px !important;font-weight:700 !important;color:#fff !important;line-height:1.3 !important;min-width:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;text-shadow:0 1px 3px rgba(0,0,0,.5) !important;opacity:.96 !important}
.rc-status{
align-self:flex-start !important;display:inline-flex !important;align-items:center !important;gap:3px !important;margin-top:4px !important;
font-size:9px !important;font-weight:850 !important;letter-spacing:.06em !important;text-transform:uppercase !important;
padding:3px 11px !important;border-radius:999px !important;
}
.rc-status svg{width:10px !important;height:10px !important;fill:none !important;stroke:currentColor !important;stroke-width:2.4 !important}
.rc-status.pub,.rc-status.accepted{background:#e6f2e8 !important;color:#247038 !important}
.rc-status.draft{background:#fff5e2 !important;color:#946b1f !important;border:0 !important}
.rc-status.rejected{background:#fbe6e2 !important;color:#b23b2d !important}
.rc-foot,.rc-avs,.rc-names,.rc-top,.rc-av,.rc-end{display:none !important}
/* actions inline on the right */
.rc-actions-row{flex-shrink:0 !important;display:flex !important;gap:8px !important;align-items:center !important}
.rc-actions-row .rc-act{
height:36px !important;min-width:40px !important;padding:0 13px !important;border-radius:11px !important;font-weight:800 !important;font-size:13px !important;border:0 !important;
display:flex !important;align-items:center !important;justify-content:center !important;gap:5px !important;cursor:pointer !important;white-space:nowrap !important;
background:#fff !important;color:var(--deep) !important;box-shadow:0 4px 10px rgba(20,40,22,.12) !important;
}
.rc-actions-row svg{width:16px !important;height:16px !important;fill:none !important;stroke:currentColor !important;stroke-width:2.4 !important}
.rc-actions-row .rc-act-edit{width:36px !important;padding:0 !important}
.rc-actions-row .rc-pub.is-pub,.rc-actions-row .rc-pub.is-unpub{background:#fff !important;color:var(--deep) !important}
/* employee */
.rc-actions-row .rc-reject{flex:1 1 auto !important;min-width:64px !important;padding:0 12px !important;background:#fff !important;color:#d63b2a !important;border:0 !important;box-shadow:0 4px 12px rgba(0,0,0,.24), inset 0 0 0 2px #f1b4ab !important}
.rc-actions-row .rc-reject svg{stroke:#d63b2a !important;stroke-width:2.8 !important}
.rc-actions-row .rc-accept,.rc-actions-row .rc-start{flex:1 1 auto !important;min-width:76px !important}
.rc-actions-row .rc-accept,.rc-actions-row .rc-start{background:#fff !important;color:var(--deep) !important;border:0 !important;box-shadow:0 4px 12px rgba(0,0,0,.28), inset 0 0 0 1.5px rgba(255,255,255,.6) !important;font-weight:850 !important}
.rc-actions-row .rc-accept svg,.rc-actions-row .rc-start svg{stroke:var(--deep) !important}
.rc-actions-row .rc-emp-state{height:36px !important;padding:0 12px !important;border-radius:11px !important;display:flex !important;align-items:center !important;justify-content:center !important;background:#fff !important;color:var(--deep) !important;font-weight:800 !important;font-size:13px !important;box-shadow:0 4px 10px rgba(20,40,22,.1) !important}
/* employee cards a touch skinnier */
.is-emp.rcard{padding-top:8px !important;padding-bottom:8px !important;margin-bottom:7px !important}
.is-emp .rc-badge{width:54px !important;height:54px !important}
.is-emp .rc-badge strong{font-size:14px !important}
.is-emp .rc-info h3{font-size:15px !important;padding:2px 9px !important}
.is-emp .rc-time-range{font-size:12px !important}
.is-emp .rc-meta{font-size:11px !important}
.is-emp .rc-actions-row .rc-act{height:32px !important;font-size:12px !important}
.is-emp .rc-actions-row .rc-reject{width:auto !important;min-width:54px !important;padding:0 11px !important;font-size:12px !important;font-weight:800 !important;gap:0 !important}
.is-emp .rc-actions-row .rc-reject svg{display:none !important}
.is-emp .rc-actions-row .rc-accept,.is-emp .rc-actions-row .rc-start{min-width:0 !important;padding:0 11px !important}
/* ============================================================
SKINNY SHIFT CARD (v134) — slimmer, more professional
Trims the time badge, tightens vertical spacing and softens
the oversized title pill so each roster card is noticeably
shorter while keeping the same premium look.
============================================================ */
.rcard{padding-top:9px !important;padding-bottom:9px !important;margin-bottom:7px !important;border-radius:14px !important}
.rc-main{gap:10px !important;row-gap:6px !important}
.rc-info{gap:2px !important}
.rc-badge{width:50px !important;height:50px !important}
.rc-badge strong{font-size:14px !important}
.rc-badge .rc-ap{font-size:7px !important;margin-top:0 !important}
.rc-badge .rc-dur{margin-top:2px !important;font-size:8px !important;padding:1px 7px !important}
.rc-info h3{font-size:15px !important;padding:2px 10px !important;line-height:1.15 !important;margin:0 !important}
.rc-time-range{font-size:12.5px !important;margin-top:1px !important;line-height:1.2 !important}
.rc-meta{font-size:11.5px !important;line-height:1.25 !important}
.rc-status{margin-top:3px !important;padding:2px 9px !important}
/* employee variant a touch tighter still */
.is-emp.rcard{padding-top:7px !important;padding-bottom:7px !important;margin-bottom:6px !important}
.is-emp .rc-badge{width:46px !important;height:46px !important}
.is-emp .rc-badge strong{font-size:13px !important}
.is-emp .rc-info h3{font-size:14.5px !important;padding:2px 9px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;word-break:normal !important;line-height:1.2 !important;max-width:100% !important}
.is-emp .rc-main{gap:9px !important;row-gap:4px !important}
.is-emp .rc-meta{line-height:1.15 !important;margin-top:2px !important}
.is-emp .rc-time-range{margin-top:1px !important}
/* center the STAFF pill content nicely */
.is-emp .rc-meta .rc-staff-line{justify-content:center !important;align-self:flex-start !important}
.is-emp .rc-meta .rc-staff-line .rc-staff-names{text-align:center !important}
/* ============================================================
REJECTED SHIFT CARD — greyed out & crossed out (v134)
Matches the reference: the whole card is desaturated to a calm
grey/taupe, the time, client name and time-range are struck
through, and a clear "✕ REJECTED" pill sits top-right. Reads
instantly as "this shift was declined / no longer active".
============================================================ */
.rcard.is-rejected{
position:relative !important;
background:linear-gradient(150deg,#efeceb 0%,#e7e3e1 100%) !important;
filter:grayscale(1) !important;opacity:.96 !important;
border:1px solid rgba(90,78,74,.20) !important;
box-shadow:0 4px 12px rgba(60,50,46,.10) !important;
padding-left:18px !important;
}
.rcard.is-rejected .rc-main{opacity:1 !important;}
.rcard.is-rejected::before{
inset:4px !important;border:1px solid rgba(90,78,74,.12) !important;box-shadow:none !important;
}
/* solid grey left rail — the main "rejected" signal */
.rcard.is-rejected .rc-main::before{
left:-10px !important;width:4px !important;border-radius:4px !important;
background:#6f635f !important;box-shadow:none !important;
}
/* time badge: muted grey, with the time struck through */
.rcard.is-rejected .rc-badge{
background:linear-gradient(160deg,#8a807c,#6f635f) !important;
box-shadow:0 3px 9px rgba(70,60,56,.22) !important;
filter:none !important;color:#fff !important;
}
.rcard.is-rejected .rc-badge strong{text-decoration:line-through !important;text-decoration-thickness:2px !important;color:#fff !important;}
.rcard.is-rejected .rc-badge .rc-ap{color:rgba(255,255,255,.92) !important;}
.rcard.is-rejected .rc-badge .rc-dur{background:rgba(255,255,255,.92) !important;color:#5a4e4a !important;}
/* client name: struck through, muted */
.rcard.is-rejected .rc-info h3{
background:transparent !important;border:0 !important;box-shadow:none !important;text-shadow:none !important;
padding-left:0 !important;color:#5a4e4a !important;
text-decoration:line-through !important;text-decoration-thickness:2px !important;text-decoration-color:rgba(90,78,74,.7) !important;
}
/* time-range: struck through, muted */
.rcard.is-rejected .rc-time-range{
color:#8a807c !important;text-shadow:none !important;
text-decoration:line-through !important;text-decoration-thickness:1.5px !important;text-decoration-color:rgba(138,128,124,.7) !important;
}
.rcard.is-rejected .rc-meta{color:#8a807c !important;text-shadow:none !important;}
.rcard.is-rejected .rc-addr-line{color:#8a807c !important;}
/* staff pill stays readable on the grey card (not crossed out) */
.rcard.is-rejected .rc-staff-line{
background:#f4f2f1 !important;border:1px solid rgba(90,78,74,.16) !important;box-shadow:0 2px 6px rgba(60,50,46,.08) !important;
}
.rcard.is-rejected .rc-staff-line .rc-staff-names{color:#5a4e4a !important;}
.rcard.is-rejected .rc-staff-line .rc-staff-kicker{background:#6f635f !important;color:#fff !important;}
/* hide the old inline status pill and dead actions — the pill + strikes say it */
.rcard.is-rejected .rc-status.rejected{display:none !important;}
.rcard.is-rejected .rc-actions-row{display:none !important;}
/* Clean "✕ REJECTED" pill, top-right */
.rc-reject-stamp{
position:absolute !important;top:10px !important;right:10px !important;left:auto !important;
transform:none !important;z-index:6 !important;pointer-events:none !important;
display:inline-flex !important;align-items:center !important;gap:5px !important;
font-family:"Inter Tight",-apple-system,BlinkMacSystemFont,sans-serif !important;
font-size:11px !important;font-weight:800 !important;letter-spacing:.06em !important;
text-transform:uppercase !important;color:#fff !important;
padding:5px 11px 5px 9px !important;border-radius:999px !important;
border:0 !important;
background:linear-gradient(150deg,#8a807c,#6f635f) !important;
box-shadow:0 3px 8px rgba(70,60,56,.30) !important;
text-shadow:none !important;white-space:nowrap !important;
}
.rc-reject-stamp::before{
content:"" !important;width:14px !important;height:14px !important;flex-shrink:0 !important;
background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
}
@media(max-width:390px){
.rc-reject-stamp{font-size:10px !important;padding:4px 9px 4px 7px !important;}
.rc-reject-stamp::before{width:12px !important;height:12px !important;background-size:12px !important;}
}
/* ============================================================
REJECTED SHIFT CARD — desktop + all sizes (v134)
The mobile rejected styling above lives inside a max-width:1023px
media query, so on desktop the card kept its normal colours. This
unscoped block applies the same greyed + crossed-out treatment on
every screen size, including the desktop week/matrix views.
============================================================ */
.rcard.is-rejected{
position:relative !important;
background:linear-gradient(150deg,#efeceb 0%,#e7e3e1 100%) !important;
filter:grayscale(1) !important;opacity:.96 !important;
border:1px solid rgba(90,78,74,.20) !important;
box-shadow:0 4px 12px rgba(60,50,46,.10) !important;
}
.rcard.is-rejected .rc-main{opacity:1 !important;}
.rcard.is-rejected .rc-badge{
background:linear-gradient(160deg,#8a807c,#6f635f) !important;
box-shadow:0 3px 9px rgba(70,60,56,.22) !important;filter:none !important;color:#fff !important;
}
.rcard.is-rejected .rc-badge strong{text-decoration:line-through !important;text-decoration-thickness:2px !important;color:#fff !important;}
.rcard.is-rejected .rc-badge .rc-ap{color:rgba(255,255,255,.92) !important;}
.rcard.is-rejected .rc-badge .rc-dur{background:rgba(255,255,255,.92) !important;color:#5a4e4a !important;}
.rcard.is-rejected .rc-info h3{
background:transparent !important;border:0 !important;box-shadow:none !important;text-shadow:none !important;
color:#5a4e4a !important;text-decoration:line-through !important;text-decoration-thickness:2px !important;
text-decoration-color:rgba(90,78,74,.7) !important;
}
.rcard.is-rejected .rc-time-range{
color:#8a807c !important;text-shadow:none !important;
text-decoration:line-through !important;text-decoration-thickness:1.5px !important;text-decoration-color:rgba(138,128,124,.7) !important;
}
.rcard.is-rejected .rc-meta,.rcard.is-rejected .rc-addr-line{color:#8a807c !important;text-shadow:none !important;}
.rcard.is-rejected .rc-staff-line{
background:#f4f2f1 !important;border:1px solid rgba(90,78,74,.16) !important;box-shadow:0 2px 6px rgba(60,50,46,.08) !important;
}
.rcard.is-rejected .rc-staff-line .rc-staff-names{color:#5a4e4a !important;}
.rcard.is-rejected .rc-staff-line .rc-staff-kicker{background:#6f635f !important;color:#fff !important;}
.rcard.is-rejected .rc-status.rejected{display:none !important;}
.rcard.is-rejected .rc-actions-row{display:none !important;}
}
/* shift colour picker */
.colour-picker{display:flex;flex-direction:column;gap:7px}
.colour-swatches{display:flex;flex-wrap:wrap;gap:6px}
.colour-sw{width:22px;height:22px;border-radius:7px;cursor:pointer;border:2px solid #fff;
box-shadow:0 1px 4px rgba(20,40,22,.16), 0 0 0 1px rgba(20,40,22,.08);transition:transform .12s ease, box-shadow .12s ease}
.colour-sw:active{transform:scale(.9)}
.colour-sw.is-sel{box-shadow:0 0 0 2px #fff, 0 0 0 4px #2c6a3e;transform:scale(1.08)}
@media(hover:hover){.colour-sw:hover{transform:scale(1.1)}}
.shift-colour-section{display:block;padding:11px 13px;border:1px solid rgba(20,40,22,.1);border-radius:13px;background:#fbfaf6;margin-bottom:10px}
.shift-colour-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:800;color:#16271a;margin-bottom:9px}
.shift-colour-head svg{width:15px;height:15px;vertical-align:-2px;margin-right:5px}
.shift-colour-current{font-size:12px;font-weight:800;color:#2c6a3e;background:#e6f2e8;padding:3px 11px;border-radius:999px}
/* ===== Employee home: compact so two roster cards show, mobile ===== */
@media(max-width:1023px){
.hm{gap:9px !important}
.hm-hero{padding:8px 12px 7px !important;border-radius:13px !important}
.hm-hero h1{font-size:17px !important;line-height:1.05 !important}
.hm-hero .hm-eyebrow{font-size:9px !important}
.hm-hero p{font-size:11px !important;margin-top:0 !important}
.hm-hero-stats{margin-top:5px !important;gap:5px !important}
.hm-hs{padding:5px 4px !important}
.hm-hs strong{font-size:14px !important}
.hm-hs em{font-size:8px !important}
.hm-hero-add{padding:6px 9px !important}
/* next shift compact */
.hm-next-rail{flex:0 0 72px !important}
.hm-next-rt{font-size:18px !important}
.hm-next-in{padding:12px 14px !important}
.hm-next-client{font-size:19px !important}
.hm-next-cta{padding:11px !important;font-size:13px !important}
/* updates compact but fully visible */
.important-updates-panel{padding:8px 9px 7px !important}
.important-updates-panel .section-head{margin-bottom:7px !important}
.important-updates-panel .updates-list{gap:5px !important}
.important-updates-panel .upd-item{border-radius:9px !important}
.important-updates-panel .upd-row{padding:6px 9px 6px 11px !important}
/* tighter section heading + list */
.hm-sec-head{margin:1px 0 0 !important}
.hm-sec-head h2{font-size:16px !important}
.home-roster-list{display:flex !important;flex-direction:column !important;gap:7px !important}
}
/* updates read/unread states */
.upd-item.unread .upd-title{font-weight:850 !important}
.upd-item.read{opacity:.82}
.upd-item.read .upd-title{font-weight:600 !important;color:#5a6a5d !important}
.upd-unread-dot{width:8px;height:8px;border-radius:50%;background:#e2483b;flex-shrink:0;box-shadow:0 0 0 3px rgba(226,72,59,.16);margin-right:2px}
.upd-new{font-size:8px !important;font-weight:850 !important;letter-spacing:.06em !important;background:#e2483b !important;color:#fff !important;padding:1px 6px !important;border-radius:999px !important;font-style:normal !important;margin-left:6px}
.iu-count.all-read{background:#e4ebe0 !important;color:#7c8a76 !important}
.upd-item.read .upd-dot{opacity:.7}
/* ===== Desktop admin home roster cards (min-width:1024px) ===== */
@media(min-width:1024px){
.home-roster-list{display:grid !important;grid-template-columns:1fr 1fr !important;gap:14px !important}
.home-roster-list .rcard{
position:relative !important;display:flex !important;align-items:center !important;gap:14px !important;
background:linear-gradient(135deg, color-mix(in srgb,var(--pop) 30%,#fff), #fff 80%) !important;
border:1px solid color-mix(in srgb,var(--pop) 40%,#fff) !important;border-left:5px solid var(--solid) !important;
border-radius:16px !important;padding:14px 16px !important;
box-shadow:0 4px 14px color-mix(in srgb,var(--pop) 14%,transparent) !important;overflow:hidden !important;
transition:transform .14s ease, box-shadow .14s ease !important;
}
@media(hover:hover){.home-roster-list .rcard:hover{transform:translateY(-2px) !important;box-shadow:0 10px 24px color-mix(in srgb,var(--pop) 22%,transparent) !important}}
.home-roster-list .rcard .rc-main{display:flex !important;align-items:center !important;gap:14px !important;flex:1 !important;min-width:0 !important}
.home-roster-list .rc-badge{
width:64px !important;height:64px !important;border-radius:50% !important;flex-shrink:0 !important;
background:radial-gradient(circle at 50% 32%, color-mix(in srgb,var(--solid) 88%,#fff), var(--deep)) !important;color:#fff !important;
display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
box-shadow:0 5px 12px color-mix(in srgb,var(--deep) 45%,transparent), 0 0 0 3px rgba(255,255,255,.6) !important;
}
.home-roster-list .rc-badge strong{font-family:var(--font-display,Georgia,serif) !important;font-size:17px !important;font-weight:800 !important;line-height:1 !important;color:#fff !important}
.home-roster-list .rc-badge .rc-ap{font-size:8px !important;font-weight:800 !important;letter-spacing:.06em !important;margin-top:2px !important;color:#fff !important}
.home-roster-list .rc-badge .rc-dur{margin-top:3px !important;font-size:10px !important;font-weight:900 !important;color:var(--deep) !important;background:#fff !important;padding:1px 8px !important;border-radius:999px !important}
.home-roster-list .rc-info{flex:1 !important;min-width:0 !important;display:flex !important;flex-direction:column !important;gap:3px !important}
.home-roster-list .rc-info h3{
display:inline-block !important;align-self:flex-start !important;font-family:var(--font-display,Georgia,serif) !important;font-size:16px !important;font-weight:800 !important;
color:#fff !important;background:linear-gradient(135deg,var(--solid),var(--deep)) !important;padding:2px 11px !important;border-radius:8px !important;
margin:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:100% !important;
box-shadow:0 2px 7px color-mix(in srgb,var(--solid) 35%,transparent) !important;
}
.home-roster-list .rc-time-range{font-size:13px !important;font-weight:850 !important;color:var(--deep) !important}
.home-roster-list .rc-meta{font-size:12.5px !important;font-weight:600 !important;color:#5d6b60 !important}
.home-roster-list .rc-status{
align-self:flex-start !important;font-size:9px !important;font-weight:850 !important;letter-spacing:.05em !important;text-transform:uppercase !important;
padding:3px 10px !important;border-radius:999px !important;
}
.home-roster-list .rc-status.pub,.home-roster-list .rc-status.accepted{background:#e6f2e8 !important;color:#247038 !important}
.home-roster-list .rc-status.draft{background:#fff5e2 !important;color:#946b1f !important}
/* Desktop admin: published = coloured, draft = white standout (consistent with mobile) */
.home-roster-list .rcard.is-published{
background:linear-gradient(135deg, color-mix(in srgb,var(--pop) 38%,#fff), #fff 82%) !important;
border:1px solid color-mix(in srgb,var(--pop) 45%,#fff) !important;border-left:5px solid var(--solid) !important;
}
.home-roster-list .rcard.is-draft{
background:#ffffff !important;
border:2px dashed color-mix(in srgb,var(--solid) 50%,#fff) !important;border-left:2px dashed color-mix(in srgb,var(--solid) 50%,#fff) !important;
box-shadow:0 4px 14px rgba(20,40,22,.08) !important;
}
.home-roster-list .rcard.is-draft .rc-info h3{background:transparent !important;color:#1a241c !important;box-shadow:none !important;padding-left:0 !important}
.home-roster-list .rcard.is-draft .rc-time-range{color:var(--deep) !important}
.home-roster-list .rc-draft-tag{align-self:flex-start !important;font-size:9.5px !important;font-weight:850 !important;letter-spacing:.04em !important;text-transform:uppercase !important;color:var(--deep) !important;background:color-mix(in srgb,var(--solid) 14%,#fff) !important;border:1px solid color-mix(in srgb,var(--solid) 30%,#fff) !important;padding:3px 10px !important;border-radius:999px !important;display:inline-flex !important;align-items:center !important;gap:4px !important;margin-top:4px !important}
.home-roster-list .rc-draft-tag svg{width:12px !important;height:12px !important;stroke:currentColor !important;fill:none !important}
.home-roster-list .rc-actions-row{flex-shrink:0 !important;display:flex !important;gap:8px !important;align-items:center !important}
.home-roster-list .rc-actions-row .rc-act{
height:40px !important;border:0 !important;border-radius:11px !important;font-weight:800 !important;font-size:13px !important;padding:0 16px !important;
display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;cursor:pointer !important;
background:#fff !important;color:var(--deep) !important;box-shadow:0 2px 8px rgba(20,40,22,.1) !important;
}
.home-roster-list .rc-actions-row .rc-act svg{width:15px !important;height:15px !important;fill:none !important;stroke:currentColor !important;stroke-width:2.2 !important}
.home-roster-list .rc-actions-row .rc-act-edit{width:40px !important;padding:0 !important;border:1px solid color-mix(in srgb,var(--solid) 25%,#fff) !important}
.home-roster-list .rc-actions-row .rc-pub.is-pub{background:linear-gradient(135deg,var(--solid),var(--deep)) !important;color:#fff !important}
}
/* group privacy toggle */
.grp-type-toggle{display:flex;gap:7px}
.grp-type-opt{flex:1;display:flex;align-items:center;gap:7px;text-align:left;padding:8px 11px;border-radius:10px;border:1.5px solid #d9e2d3;background:#fff;cursor:pointer;transition:all .14s ease}
.grp-type-opt svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:#7c8a76;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.grp-type-opt span{display:flex;flex-direction:column;min-width:0}
.grp-type-opt strong{font-size:13px;font-weight:800;color:#1a241c;line-height:1.1}
.grp-type-opt em{display:none}
.grp-type-opt.on{border-color:var(--forest-500,#2e7b43);background:#eef6ee}
.grp-type-opt.on svg{stroke:var(--forest-600,#256139)}
.grp-type-opt.on strong{color:var(--forest-700,#1d542d)}
.grp-type-hint{font-size:11px;color:#7c8a76;margin-top:6px;font-weight:600}
/* Employee timesheet focus bar — fit prev/next on mobile */
@media(max-width:1023px){
.tsf-bar{flex-wrap:wrap;gap:9px}
.tsf-search{order:2;flex:1 1 100%;min-width:0}
.tsf-back{order:1;flex-shrink:0}
.tsf-nav{order:3;flex:1 1 100%;justify-content:space-between;gap:8px}
.tsf-nav-btn{flex:1;min-width:0;justify-content:center;padding:8px 10px;border-radius:12px}
.tsf-nav-btn .tsf-nav-av{display:none}
.tsf-nav-btn .tsf-nav-lbl em{font-size:8px}
.tsf-nav-btn .tsf-nav-lbl strong{max-width:74px;font-size:12.5px}
.tsf-nav-count{flex-shrink:0;min-width:52px}
}
/* ===== Chat: make thread fill screen on mobile so composer is always reachable ===== */
@media(max-width:1023px){
body.chat-thread-open{overflow:hidden !important;background:#143a26 !important}
body.chat-thread-open::after{display:none !important}
html:has(body.chat-thread-open){background:#143a26 !important}
body.chat-thread-open .content{padding:0 !important;overflow:visible !important;contain:none !important}
body.chat-thread-open .page{opacity:1 !important}
body.chat-thread-open .chat-shell{
position:fixed !important;left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;
height:100dvh !important;max-height:100dvh !important;
margin:0 !important;padding:0 !important;gap:0 !important;border-radius:0 !important;z-index:1000 !important;background:var(--paper) !important;
display:flex !important;flex-direction:column !important;
}
body.chat-thread-open .chat-shell .chat-list{display:none !important}
body.chat-thread-open .chat-shell .chat-thread{
display:flex !important;flex-direction:column !important;flex:1 1 auto !important;min-height:0 !important;height:100% !important;
border-radius:0 !important;border:0 !important;background:var(--paper) !important;
}
/* header frozen at top */
body.chat-thread-open .chat-thread-head{flex:0 0 auto !important;padding-top:calc(12px + var(--safe-t,0px)) !important}
/* ONLY this area scrolls */
body.chat-thread-open .chat-scroll{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important}
/* composer frozen at bottom */
body.chat-thread-open .chat-composer{
flex:0 0 auto !important;align-items:center !important;position:relative !important;
padding:7px 11px 7px !important;background:linear-gradient(180deg,#1d4d33,#143a26) !important;border-top:1px solid rgba(255,255,255,.12) !important;
box-shadow:0 -6px 18px rgba(8,30,16,.3) !important;opacity:1 !important;
}
/* small dark strip only for the home-indicator zone (not a big gap) */
body.chat-thread-open .chat-composer::after{
content:"" !important;position:absolute !important;left:0 !important;right:0 !important;top:100% !important;height:18px !important;background:#143a26 !important;
}
body.chat-thread-open .chat-composer .input{
min-height:38px !important;max-height:120px !important;font-size:16px !important;line-height:1.3 !important;
background:rgba(255,255,255,.12) !important;border:1.5px solid rgba(255,255,255,.28) !important;border-radius:18px !important;
color:#fff !important;opacity:1 !important;padding:8px 14px !important;resize:none !important;overflow-y:auto !important;
}
body.chat-thread-open .chat-composer .input::placeholder{color:rgba(255,255,255,.6) !important;opacity:1 !important}
body.chat-thread-open .chat-composer .cattach{color:#1d4d33 !important;opacity:1 !important;align-self:center !important;margin-bottom:0 !important}
body.chat-thread-open .chat-composer .csend{background:#fff !important;color:#1d4d33 !important;opacity:1 !important;align-self:center !important}
body.chat-thread-open .dock{display:none !important}
.cth-back{display:grid !important}
}
.rc-draft-tag{align-self:flex-start;font-size:9px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;color:var(--deep,#0e3019);background:color-mix(in srgb,var(--solid,#2f7345) 14%,#fff);border:1px solid color-mix(in srgb,var(--solid,#2f7345) 30%,#fff);padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;margin-top:3px}
.rc-draft-tag svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
/* Easy employee login upgrade */
.employee-login-help{
display:grid;
gap:6px;
margin:0 0 14px;
padding:12px 13px;
border-radius:17px;
background:linear-gradient(135deg,#eef6e8,#fff8eb);
border:1px solid rgba(55,88,49,.16);
color:#213b22;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.employee-login-help strong{font-size:13px;font-weight:900;color:#17351c;letter-spacing:-.01em}
.employee-login-help span{font-size:12px;font-weight:700;color:#526252;line-height:1.25}
.employee-login-help b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.employee-first-login-btn{
width:100%;
min-height:44px;
margin-top:9px;
border:1px solid rgba(55,88,49,.18);
background:#fffaf0;
border-radius:15px;
color:#24452a;
font-weight:900;
font-size:13px;
cursor:pointer;
}
.employee-first-login-btn:hover{background:#eef6e8}
.login-share-note,.login-details-card{
margin-top:10px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(135deg,#f3eadb,#e6f0df);
border:1px solid rgba(58,88,54,.14);
color:#2c4630;
font-size:12px;
font-weight:700;
line-height:1.35;
}
.login-details-card{display:grid;gap:6px;margin:12px 0}
.login-details-card strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;color:#18341d}
.login-details-card strong svg{width:16px;height:16px}
.login-details-card span{font-size:12px;color:#526252}
.login-details-card b{color:#17351c;background:rgba(85,115,62,.13);padding:1px 6px;border-radius:7px}
.login-details-card small{font-size:11.5px;color:#687467;font-weight:700}
@media(max-width:480px){.employee-login-help{padding:10px 11px}.employee-first-login-btn{min-height:42px;font-size:12px}}
/* Desktop stability fix: keeps the page width stable and stops visible shake if a sync refresh occurs. */
@media (min-width: 900px){
html{scrollbar-gutter: stable;}
body{overflow-y: scroll;}
.page{animation:none !important;}
}
/* ===== Design 1 — minimal stacked clock card ===== */
.clk1{background:linear-gradient(160deg,#235138,#0e2c1b);border-radius:24px;padding:22px;color:#fff;box-shadow:0 16px 36px rgba(8,30,16,.3);margin-bottom:16px}
.clk1-live{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#cdeccf;background:rgba(255,255,255,.1);padding:6px 13px;border-radius:999px;margin-bottom:18px}
.clk1-dot{width:8px;height:8px;border-radius:50%;background:#62d98a;box-shadow:0 0 0 4px rgba(98,217,138,.25);animation:clk1pulse 2s ease-in-out infinite}
@keyframes clk1pulse{0%,100%{box-shadow:0 0 0 3px rgba(98,217,138,.28)}50%{box-shadow:0 0 0 7px rgba(98,217,138,.06)}}
.clk1-big{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.clk1-elapsed{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:6px}
.clk1-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.14);margin:18px 0;overflow:hidden}
.clk1-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#e9c87e,#d8a85a);transition:width .8s ease}
.clk1-ends{display:flex;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.72);font-weight:600}
.clk1-job{font-family:var(--font-display,Georgia,serif);font-size:22px;font-weight:700;margin:14px 0 3px;color:#fff}
.clk1-addr{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.72);cursor:pointer}
.clk1-addr svg{width:14px;height:14px;fill:none;stroke:#9ad6a8;stroke-width:2}
.clk1-twin{display:flex;gap:10px;margin:16px 0 16px}
.clk1-t{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:11px 13px}
.clk1-v{font-size:16px;font-weight:800;color:#fff}
.clk1-k{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:2px}
.clk1-stop{width:100%;background:#fff;color:#1a3b26;border:0;padding:15px;border-radius:15px;font-size:15px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.clk1-stop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.clk1-stop:active{transform:scale(.99)}
/* ============================================================
FINAL bottom-strip fix — overrides ALL earlier conflicting
html/body/#app/.shell/.main background rules. Root layers are
SOLID dark green so the iOS home-indicator safe-area can never
show white under the dock. The light page colour lives on .main
as a fixed (non-scrolling) backdrop so it never bleeds to the edge.
============================================================ */
@media(max-width:1023px){
html,body,#app,.shell{background:#11301d !important}
.main{
background:#11301d !important;
position:relative !important;
}
/* light backdrop behind the content, stopping above the dock */
.main::before{
content:"" !important;position:fixed !important;left:0 !important;right:0 !important;top:0 !important;
bottom:calc(78px + var(--safe-b)) !important;
background:linear-gradient(180deg,#e8f0e3 0%,#dce8d8 60%,#d3e0cf 100%) !important;
z-index:-1 !important;pointer-events:none !important;
}
body.chat-thread-open .main::before{display:none !important}
}
/* recognised-user greeting on login */
.lc-recognised{max-height:0;overflow:hidden;transition:max-height .25s ease,margin .25s ease;margin:0}
.lc-recognised.show{max-height:90px;margin:0 0 14px}
.lc-rec-inner{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#e8f2ea,#f3f8f0);border:1px solid rgba(47,138,71,.2);border-radius:14px;padding:11px 13px}
.lc-rec-av{width:38px;height:38px;border-radius:11px;background:linear-gradient(150deg,#2f8a47,#0e2c1b);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
.lc-rec-inner b{display:block;font-size:14px;color:#15331f;font-weight:800}
.lc-rec-inner em{font-style:normal;font-size:12px;color:#5a6a5d}
/* invite-employee modal */
.invite-box{background:#f1f5ee;border:1px solid #dde6d8;border-radius:14px;padding:6px 14px;margin-bottom:12px}
.invite-line{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #e6ece1;font-size:13px}
.invite-line:last-child{border-bottom:0}
.invite-line span{color:#7c8a76;font-weight:600}
.invite-line b{color:#15331f;font-weight:800;font-family:ui-monospace,Menlo,monospace}
.invite-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.invite-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:13px;padding:14px;font-size:14px;font-weight:800;cursor:pointer}
.invite-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.invite-btn.sms{background:linear-gradient(135deg,#2f8a47,#176030);color:#fff}
.invite-btn.email{background:linear-gradient(135deg,#235138,#0e2c1b);color:#fff}
.invite-btn.share{background:#e9c87e;color:#2a1c05}
.invite-btn.copy{background:#eef1e8;color:#2a3a2c}
.invite-btn:active{transform:scale(.98)}
/* ---- inline style 11 ---- */
/* Employee invite / install helper */
.install-prompt-card{
margin-top:14px;
padding:14px;
border:1px solid rgba(255,255,255,.16);
border-radius:20px;
background:rgba(255,255,255,.08);
box-shadow:0 14px 30px rgba(0,0,0,.12);
display:grid;
gap:10px;
}
.install-prompt-card.installed{display:none!important;}
.install-prompt-card.invite-open{outline:2px solid rgba(216,196,142,.55);}
.ipc-text{display:grid;gap:3px;text-align:left;color:#f7f2e5;}
.ipc-text strong{font-weight:900;font-size:14px;}
.ipc-text span{font-size:12px;line-height:1.35;opacity:.84;}
.install-guide{display:grid;gap:12px;line-height:1.45;}
.install-guide ol{margin:6px 0 0 20px;padding:0;display:grid;gap:8px;}
.install-guide li{padding-left:3px;}
.install-ok{padding:12px;border-radius:16px;background:rgba(53,120,77,.12);border:1px solid rgba(53,120,77,.24);font-weight:900;color:#2f6e45;}
.invite-box .invite-line b{word-break:break-word;}
@media(max-width:760px){
.install-prompt-card{border-radius:18px;padding:12px;}
.install-guide ol{margin-left:18px;}
}
/* ---- inline style 12 ---- */
/* FINAL FIX — stable mobile dock and admin delete for Important Updates */
@media (max-width:1023px){
:root{ --ww-mobile-dock-height: 54px; }
.mobile-nav .mtab:active,.mobile-nav .mtab.active{transform:none!important;}
.mobile-nav .mtab.active{
background:linear-gradient(180deg,#5fbf76,#3f9a57)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 10px rgba(0,0,0,.22)!important;
}
.mobile-nav .nav-badge{top:3px!important;right:12px!important;margin:0!important;transform:none!important;}
.content{padding-bottom:calc(var(--ww-mobile-dock-height) + env(safe-area-inset-bottom,0px) + 16px)!important;}
body.chat-thread-open .mobile-nav{display:none!important;}
}
@media(max-width:380px){
}
.important-updates-panel .upd-item{position:relative!important;}
.important-updates-panel .upd-row{padding-right:78px!important;}
.important-updates-panel .upd-quick-del{
position:absolute!important;right:7px!important;top:7px!important;
height:28px!important;min-width:62px!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
border:1px solid rgba(166,68,43,.26)!important;border-radius:9px!important;
background:#fff7f2!important;color:#9b3d2a!important;
font-size:10.5px!important;font-weight:850!important;line-height:1!important;
padding:0 8px!important;z-index:3!important;cursor:pointer!important;
}
.important-updates-panel .upd-quick-del svg{width:12px!important;height:12px!important;stroke:currentColor!important;fill:none!important;}
.important-updates-panel .upd-quick-del:hover{background:#ffece3!important;border-color:rgba(166,68,43,.42)!important;}
@media(max-width:430px){
.important-updates-panel .upd-row{padding-right:44px!important;}
.important-updates-panel .upd-quick-del{min-width:30px!important;width:30px!important;padding:0!important;}
.important-updates-panel .upd-quick-del span{display:none!important;}
}
/* ---- inline style 13 ---- */
/* REAL FINAL MOBILE MENU FIX — no big empty space, no jumping, no safe-area expansion */
/* DISABLED: superseded by ww-absolute-bottom-menu-clean-final (kept for history) */
@media (max-width:0px){
:root{
--safe-b:0px!important;
--ww-real-dock-h:54px!important;
}
html,body,#app,.shell,.main{
min-height:100dvh!important;
}
.dock-inner{
all:unset!important;
box-sizing:border-box!important;
width:100%!important;
max-width:520px!important;
height:55px!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
align-items:center!important;
gap:0!important;
margin:0 auto!important;
padding:0!important;
}
.dock-tab:active,
.dock-tab.is-active{
transform:none!important;
opacity:1!important;
}
.dock-tab.is-active{
color:#fff!important;
background:transparent!important;
box-shadow:none!important;
}
.dock-ico{
all:unset!important;
box-sizing:border-box!important;
width:24px!important;
height:24px!important;
min-width:24px!important;
max-width:24px!important;
min-height:24px!important;
max-height:24px!important;
display:grid!important;
place-items:center!important;
margin:0!important;
padding:0!important;
flex:0 0 24px!important;
}
.dock-ico svg,
.dock-tab svg{
width:22px!important;
height:22px!important;
min-width:22px!important;
max-width:22px!important;
min-height:22px!important;
max-height:22px!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:2!important;
display:block!important;
}
.dock-tab.is-active .dock-ico svg,
.dock-tab.is-active svg{
stroke-width:2.35!important;
}
.dock-lbl{
all:unset!important;
box-sizing:border-box!important;
display:block!important;
font-size:9.6px!important;
line-height:1!important;
font-weight:750!important;
text-align:center!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
max-width:100%!important;
color:currentColor!important;
}
.dock-tab.is-active::after{
content:""!important;
position:absolute!important;
left:50%!important;
bottom:1px!important;
transform:translateX(-50%)!important;
width:5px!important;
height:5px!important;
border-radius:50%!important;
background:#7fe39a!important;
box-shadow:0 0 6px rgba(127,227,154,.7)!important;
display:block!important;
}
.content{
padding-bottom:74px!important;
}
main.content > .page,
.content > .page{
padding-bottom:74px!important;
}
.toast{
bottom:76px!important;
}
body.chat-thread-open .dock{
display:none!important;
}
}
@media (max-width:0px){
.dock-inner{height:54px!important;}
.dock-ico svg,.dock-tab svg{width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important;max-width:21px!important;max-height:21px!important;}
.dock-lbl{font-size:9px!important;}
.content,main.content > .page,.content > .page{padding-bottom:70px!important;}
}
/* ---- inline style 14 ---- */
/* DESIGN 3 — Circular Icons mobile menu: rebuilt from scratch, stable, compact, no expanding/collapsing */
@media (max-width:1023px){
:root{
--ww-circular-dock-h:54px!important;
--ww-circular-green:#2a472f!important;
--ww-circular-green-dark:#1f3424!important;
--ww-circular-line:#e7ece3!important;
}
html,body,#app,.shell,.main{background:#11301d!important;min-height:100dvh!important;overflow-x:hidden!important;}
/* page background stops behind the menu without creating extra bottom height */
.main{position:relative!important;background:linear-gradient(180deg,#edf3e9 0%,#dfeade 58%,#d3e0cf 100%)!important;}
.dock-inner{
all:unset!important;
box-sizing:border-box!important;
width:100%!important;max-width:540px!important;
height:68px!important;min-height:68px!important;max-height:68px!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
align-items:center!important;justify-items:center!important;
gap:1px!important;margin:0 auto!important;padding:0!important;
}
.dock-tab:active,.dock-tab.is-active{transform:none!important;opacity:1!important;}
.dock-ico{
all:unset!important;
box-sizing:border-box!important;
width:44px!important;height:44px!important;
min-width:44px!important;max-width:44px!important;
min-height:44px!important;max-height:44px!important;
display:grid!important;place-items:center!important;
border-radius:50%!important;
background:#fff!important;
border:1px solid var(--ww-circular-line)!important;
box-shadow:0 2px 8px rgba(20,37,23,.05), inset 0 1px 0 rgba(255,255,255,.9)!important;
margin:0!important;padding:0!important;flex:0 0 44px!important;
color:#53605a!important;
}
.dock-ico svg,.dock-tab svg{
width:23px!important;height:23px!important;
min-width:23px!important;max-width:23px!important;
min-height:23px!important;max-height:23px!important;
padding:0!important;margin:0!important;
background:transparent!important;border:0!important;box-shadow:none!important;
fill:none!important;stroke:currentColor!important;stroke-width:2.15!important;
display:block!important;
}
.dock-lbl{
all:unset!important;
box-sizing:border-box!important;
display:block!important;
max-width:100%!important;
font-size:9.6px!important;
line-height:1!important;
font-weight:750!important;
letter-spacing:-.01em!important;
text-align:center!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
color:#36433b!important;
}
.dock-tab.is-active{background:transparent!important;color:var(--ww-circular-green)!important;box-shadow:none!important;}
.dock-tab.is-active .dock-ico{
width:50px!important;height:50px!important;
min-width:50px!important;max-width:50px!important;
min-height:50px!important;max-height:50px!important;
flex-basis:50px!important;
background:linear-gradient(180deg,#4a7351 0%,var(--ww-circular-green) 55%,var(--ww-circular-green-dark) 100%)!important;
border-color:rgba(18,132,67,.20)!important;
color:#fff!important;
box-shadow:0 10px 22px rgba(18,132,67,.32), inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.dock-tab.is-active .dock-ico svg,.dock-tab.is-active svg{stroke-width:2.35!important;}
.dock-tab.is-active .dock-lbl{color:var(--ww-circular-green)!important;font-weight:900!important;}
.dock-tab.is-active::after{display:none!important;content:none!important;}
.dock-tab .nav-badge{
position:absolute!important;
top:2px!important;right:9px!important;
min-width:17px!important;height:17px!important;
display:grid!important;place-items:center!important;
padding:0 4px!important;margin:0!important;
border-radius:999px!important;
background:#c46b3d!important;color:#fff!important;
border:2px solid #fff!important;
font-size:9px!important;font-weight:900!important;line-height:1!important;
box-shadow:0 4px 8px rgba(196,107,61,.24)!important;
}
.content{padding-bottom:calc(var(--ww-circular-dock-h) + 14px)!important;}
main.content > .page,.content > .page{padding-bottom:calc(var(--ww-circular-dock-h) + 10px)!important;}
.toast{bottom:calc(var(--ww-circular-dock-h) + 10px)!important;}
body.chat-thread-open .dock{display:none!important;}
}
@media (max-width:380px){
:root{--ww-circular-dock-h:54px!important;}
.dock-inner{height:66px!important;min-height:66px!important;max-height:66px!important;}
.dock-ico{width:41px!important;height:41px!important;min-width:41px!important;max-width:41px!important;min-height:41px!important;max-height:41px!important;flex-basis:41px!important;}
.dock-tab.is-active .dock-ico{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;min-height:46px!important;max-height:46px!important;flex-basis:46px!important;}
.dock-ico svg,.dock-tab svg{width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important;max-width:21px!important;max-height:21px!important;}
.dock-lbl{font-size:8.7px!important;}
}
/* ---- inline style 15 ---- */
/* Fit all 6 circular menu buttons on iPhone widths without clipping */
@media (max-width:1023px){
.dock-inner{width:100%!important;max-width:100%!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;}
.dock-ico{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;min-height:38px!important;max-height:38px!important;flex-basis:38px!important;}
.dock-tab.is-active .dock-ico{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;min-height:42px!important;max-height:42px!important;flex-basis:42px!important;}
.dock-ico svg,.dock-tab svg{width:19px!important;height:19px!important;min-width:19px!important;max-width:19px!important;min-height:19px!important;max-height:19px!important;}
.dock-lbl{font-size:9.2px!important;line-height:1.1!important;letter-spacing:.005em!important;}
.dock-tab .nav-badge{right:4px!important;top:4px!important;}
}
@media (min-width:390px) and (max-width:480px){
.dock-ico{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;min-height:40px!important;max-height:40px!important;flex-basis:40px!important;}
.dock-tab.is-active .dock-ico{width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;min-height:44px!important;max-height:44px!important;flex-basis:44px!important;}
.dock-ico svg,.dock-tab svg{width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;min-height:20px!important;max-height:20px!important;}
.dock-lbl{font-size:8.7px!important;}
}
/* ---- inline style 16 ---- */
/* V102 — desktop smoothness only: reduce expensive paint work without changing layout. */
@media (min-width:1024px){
.sidebar,.topbar,.card,.updates-panel,.important-updates-panel,.shift-card,.rcard,.modal,.modal-card,.directory-card,.client-card,.rst-hero,.clock-hero,.clock-hero-v28{
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.shift-card,.rcard,.card,.updates-panel,.important-updates-panel,.directory-card,.client-card,.stat{
transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease!important;
}
.content{scroll-behavior:auto!important;}
}
/* ---- inline style 17 ---- */
/* V104 fast chat delivery + archive/delete controls */
.cv-archive-filter{height:32px;border:0;border-radius:999px;padding:0 10px;background:#e9f0e4;color:#2f5c38;font-weight:900;font-size:11px;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.cv-archive-filter.active{background:#2f5c38;color:#fffaf0}
.cv-mini-action{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#eef5eb;color:#35643c;flex:0 0 31px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);position:relative;z-index:2}
.cv-mini-action svg{width:16px;height:16px;stroke-width:2.4}
.cv-mini-action.danger{background:#fff2ee;color:#a0443b}
.cv-mini-action:active{transform:scale(.94)}
.msg-status.delivered{color:#758276!important}
.msg-status.seen{color:#2f7a43!important;font-weight:850!important}
.msg.mine .msg-status.seen{color:#e6f7d8!important}
.msg.mine .msg-status.delivered{color:rgba(255,248,232,.76)!important}
/* V103 message read receipts + live presence */
.msg-status{display:block;margin-top:4px;font-size:10px;line-height:1.15;text-align:right;font-weight:750;letter-spacing:.005em;color:#72806f;}
.msg-status.seen{color:#2f7040;}
.msg-status.delivered{color:#7c8978;font-weight:700;}
.msg.mine .msg-status{color:rgba(255,248,232,.70);}
.msg.mine .msg-status.seen{color:#dcefd1;}
.msg.mine .msg-status.delivered{color:rgba(255,248,232,.62);}
.cv-unread .cv-name{font-weight:950;}
.cth-presence:not(.is-online){color:rgba(255,248,232,.68);}
.cth-dot{width:7px;height:7px;border-radius:999px;background:#43c464;box-shadow:0 0 0 3px rgba(67,196,100,.16);display:inline-block;}
/* ---- inline style 18 ---- */
/* V127 — make ONLY the roster week header truly skinny/compact. */
@media (max-width:1023px){
.rst-hero.admin,
.rst-hero.staff{
padding:8px 10px 9px!important;
border-radius:18px!important;
margin:7px 10px 9px!important;
min-height:0!important;
box-shadow:0 8px 18px rgba(14,34,20,.20)!important;
}
.rst-hero-bg{opacity:.45!important}
.rst-hero-top{
display:grid!important;
grid-template-columns:34px minmax(0,1fr) 34px!important;
align-items:center!important;
gap:8px!important;
min-height:40px!important;
}
.rst-nav{
width:32px!important;
height:32px!important;
min-width:32px!important;
min-height:32px!important;
border-radius:12px!important;
}
.rst-nav svg{width:15px!important;height:15px!important}
.rst-hero-label{
min-width:0!important;
text-align:center!important;
}
.rst-eyebrow{
font-size:8px!important;
line-height:1!important;
letter-spacing:.14em!important;
margin:0 0 2px!important;
}
.rst-hero-label strong{
display:block!important;
font-size:17px!important;
line-height:1!important;
letter-spacing:-.018em!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.rst-hero.admin .rst-hero-foot,
.rst-hero.staff .rst-hero-foot{
display:grid!important;
grid-template-columns:.76fr .62fr 1.35fr!important;
align-items:center!important;
gap:6px!important;
margin-top:7px!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
}
.rst-hero.admin .rst-hs,
.rst-hero.staff .rst-hs{
min-height:34px!important;
height:34px!important;
padding:4px 5px!important;
border-radius:11px!important;
background:rgba(255,255,255,.075)!important;
border:1px solid rgba(255,255,255,.10)!important;
}
.rst-hero.admin .rst-hs strong,
.rst-hero.staff .rst-hs strong{
font-size:15.5px!important;
line-height:.95!important;
}
.rst-hero.admin .rst-hs em,
.rst-hero.staff .rst-hs em{
font-size:7px!important;
line-height:1!important;
letter-spacing:.055em!important;
margin-top:2px!important;
}
.rst-hero.admin .rst-hero-add,
.rst-hero.staff .rst-hero-add{
min-height:34px!important;
height:34px!important;
padding:0 9px!important;
border-radius:12px!important;
font-size:12px!important;
gap:6px!important;
box-shadow:0 5px 11px rgba(8,24,12,.18),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.rst-hero.admin .rst-hero-add .rha-ic,
.rst-hero.staff .rst-hero-add .rha-ic{
width:22px!important;
height:22px!important;
min-width:22px!important;
}
.rst-hero.admin .rst-hero-add svg,
.rst-hero.staff .rst-hero-add svg{
width:12px!important;
height:12px!important;
}
}
@media (max-width:380px){
.rst-hero.admin,.rst-hero.staff{padding:7px 8px 8px!important;margin:6px 8px 8px!important}
.rst-hero-top{grid-template-columns:30px minmax(0,1fr) 30px!important;gap:6px!important;min-height:36px!important}
.rst-nav{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}
.rst-hero-label strong{font-size:15.5px!important}
.rst-hero.admin .rst-hero-foot,.rst-hero.staff .rst-hero-foot{gap:5px!important;margin-top:6px!important}
.rst-hero.admin .rst-hs,.rst-hero.staff .rst-hs,.rst-hero.admin .rst-hero-add,.rst-hero.staff .rst-hero-add{height:31px!important;min-height:31px!important}
.rst-hero.admin .rst-hs strong,.rst-hero.staff .rst-hs strong{font-size:14px!important}
.rst-hero.admin .rst-hero-add,.rst-hero.staff .rst-hero-add{font-size:11px!important;padding:0 7px!important}
}
/* ---- inline style 19 ---- */
/* V196 — requested only: keep original STAFF bar colours/design, make employee-name bar hug first-name text and centre it. */
@media (max-width:1023px){
.roster-mobile .rc-main .rc-meta-full,
.home-roster-list .rc-main .rc-meta-full{
flex:0 0 100%!important;
width:100%!important;
max-width:100%!important;
order:99!important;
margin-top:6px!important;
display:block!important;
align-self:stretch!important;
}
.roster-mobile .rc-main .rc-meta-full .rc-staff-line,
.home-roster-list .rc-main .rc-meta-full .rc-staff-line,
.roster-mobile .rc-meta .rc-staff-line,
.home-roster-list .rc-meta .rc-staff-line{
display:inline-flex!important;
grid-template-columns:unset!important;
align-items:center!important;
justify-content:flex-start!important;
width:auto!important;
min-width:0!important;
max-width:100%!important;
gap:0!important;
margin-top:5px!important;
padding:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
white-space:nowrap!important;
overflow:visible!important;
text-overflow:clip!important;
}
.roster-mobile .rc-main .rc-meta-full .rc-staff-line .rc-staff-kicker,
.home-roster-list .rc-main .rc-meta-full .rc-staff-line .rc-staff-kicker,
.roster-mobile .rc-meta .rc-staff-line .rc-staff-kicker,
.home-roster-list .rc-meta .rc-staff-line .rc-staff-kicker{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:23px!important;
padding:0 10px!important;
border-radius:999px!important;
background:var(--accent,#7fb56a)!important;
color:#10240f!important;
font-size:9.8px!important;
font-weight:900!important;
letter-spacing:.09em!important;
flex:0 0 auto!important;
text-shadow:none!important;
box-shadow:0 1px 2px rgba(0,0,0,.2)!important;
line-height:1!important;
}
.roster-mobile .rc-main .rc-meta-full .rc-staff-line .rc-staff-names,
.home-roster-list .rc-main .rc-meta-full .rc-staff-line .rc-staff-names,
.roster-mobile .rc-meta .rc-staff-line .rc-staff-names,
.home-roster-list .rc-meta .rc-staff-line .rc-staff-names{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
width:auto!important;
min-width:0!important;
max-width:calc(100vw - 150px)!important;
margin-left:0!important;
padding:0 13px!important;
min-height:32px!important;
border-radius:999px!important;
background:rgba(255,255,255,.06)!important;
border:1px solid rgba(255,255,255,.18)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
line-height:1!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
}
/* ---- inline style 20 ---- */
/* V205 — requested only: staff bar colours now follow the roster card colour instead of staying green. Layout stays unchanged. */
@media (max-width:1023px){
.roster-mobile .rcard:not(.is-rejected) .rc-meta .rc-staff-line,
.home-roster-list .rcard:not(.is-rejected) .rc-meta .rc-staff-line,
.rcard.is-emp:not(.is-rejected) .rc-meta .rc-staff-line{
background:linear-gradient(135deg,
color-mix(in srgb,var(--solid,#315f3a) 76%,#000 24%),
color-mix(in srgb,var(--deep,#173b23) 92%,#000 8%))!important;
border-color:color-mix(in srgb,var(--solid,#315f3a) 62%,rgba(255,255,255,.28))!important;
}
.roster-mobile .rcard:not(.is-rejected) .rc-meta .rc-staff-line .rc-staff-kicker,
.home-roster-list .rcard:not(.is-rejected) .rc-meta .rc-staff-line .rc-staff-kicker,
.rcard.is-emp:not(.is-rejected) .rc-meta .rc-staff-line .rc-staff-kicker{
background:linear-gradient(135deg,
color-mix(in srgb,var(--solid,#7fb56a) 58%,#fff 42%),
color-mix(in srgb,var(--solid,#7fb56a) 82%,#fff 18%))!important;
color:color-mix(in srgb,var(--deep,#10240f) 78%,#000 22%)!important;
}
.rgc:not(.is-rejected) .rgc-staff{
background:linear-gradient(135deg,
color-mix(in srgb,var(--accent,#315f3a) 76%,#000 24%),
color-mix(in srgb,var(--accent-deep,#173b23) 92%,#000 8%))!important;
border-color:color-mix(in srgb,var(--accent,#315f3a) 62%,rgba(255,255,255,.28))!important;
}
.rgc:not(.is-rejected) .rgc-staff-kicker{
background:linear-gradient(135deg,
color-mix(in srgb,var(--accent,#7fb56a) 58%,#fff 42%),
color-mix(in srgb,var(--accent,#7fb56a) 82%,#fff 18%))!important;
color:color-mix(in srgb,var(--accent-deep,#10240f) 78%,#000 22%)!important;
}
}
/* ---- inline style 21 ---- */
/* V208 — admin roster only: show daily total labour hours inside each day chip. Employee roster keeps the existing shift-count dots. */
@media (max-width:1023px){
.rst-days-admin .rst-day{min-height:66px!important;justify-content:center!important;gap:3px!important;padding:7px 2px 6px!important;}
.rst-days-admin .rd-stats{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;min-width:37px!important;height:17px!important;padding:0 5px!important;border-radius:999px!important;background:#f0e4d0!important;border:1px solid rgba(151,108,70,.16)!important;box-shadow:0 1px 2px rgba(80,48,24,.08)!important;line-height:1!important;white-space:nowrap!important;}
.rst-days-admin .rd-stats b{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:12px!important;height:12px!important;border-radius:999px!important;background:#b07a4a!important;color:#fff!important;font-size:8px!important;font-weight:900!important;line-height:12px!important;font-family:var(--font-sans,-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui)!important;}
.rst-days-admin .rd-stats em{font-style:normal!important;color:#536251!important;font-size:8.5px!important;font-weight:900!important;letter-spacing:-.02em!important;font-variant-numeric:tabular-nums!important;}
.rst-days-admin .rd-stats.empty{opacity:.62!important;background:#f3efe7!important;}
.rst-days-admin .rd-stats.empty b{background:#c8c1b4!important;color:#fff!important;}
.rst-days-admin .rst-day.sel .rd-stats{background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.18)!important;box-shadow:none!important;}
.rst-days-admin .rst-day.sel .rd-stats b{background:rgba(255,255,255,.92)!important;color:#2d6b3e!important;}
.rst-days-admin .rst-day.sel .rd-stats em{color:#fff!important;}
.rst-day-head span{white-space:nowrap!important;}
}
@media(max-width:430px){
.rst-days-admin{gap:5px!important}
.rst-days-admin .rst-day{min-height:64px!important;border-radius:14px!important;padding:6px 1px 6px!important}
.rst-days-admin .rd-dow{font-size:8.6px!important}
.rst-days-admin .rd-num{font-size:16px!important}
.rst-days-admin .rd-stats{min-width:34px!important;height:16px!important;padding:0 4px!important;gap:2px!important}
.rst-days-admin .rd-stats b{min-width:11px!important;height:11px!important;font-size:7.5px!important;line-height:11px!important}
.rst-days-admin .rd-stats em{font-size:8px!important}
}
@media(min-width:1024px){.rst-days-admin .rst-day{min-height:64px!important}}
/* ---- inline style 22 ---- */
.important-updates-panel .upd-body{padding-top:0!important;padding-bottom:7px!important}.important-updates-panel .upd-body p{margin:0 0 2px!important;line-height:1.32!important}.important-updates-panel .upd-react{margin-top:1px!important;margin-bottom:0!important;min-height:18px!important;height:auto!important}.important-updates-panel .upd-react-chips{min-height:18px!important;gap:3px!important}.important-updates-panel .upd-react-add{width:20px!important;height:20px!important;min-width:20px!important;opacity:.72!important}.important-updates-panel .upd-react-add svg{width:12px!important;height:12px!important}.important-updates-panel .upd-comments{margin-top:1px!important;padding-top:4px!important;border-top:1px solid rgba(20,31,23,.06)!important}.important-updates-panel .upd-comments-head{margin:0 0 4px!important;font-size:10px!important;line-height:1!important}.important-updates-panel .upd-comment-list{gap:4px!important}.important-updates-panel .upd-comment{gap:7px!important;margin:0!important;align-items:flex-start!important}.important-updates-panel .ucm-av .avatar{width:28px!important;height:28px!important;font-size:11px!important}.important-updates-panel .ucm-top{gap:5px!important;line-height:1.05!important}.important-updates-panel .ucm-name{font-size:12.4px!important;line-height:1.05!important}.important-updates-panel .ucm-time{font-size:10px!important;line-height:1.05!important}.important-updates-panel .ucm-text{margin-top:1px!important;font-size:12.8px!important;line-height:1.18!important}.important-updates-panel .ucm-reply-btn{margin-top:1px!important;padding:0!important;font-size:11.5px!important;line-height:1.05!important}.important-updates-panel .ucm-replies{margin-top:3px!important;gap:2px!important}.important-updates-panel .upd-comment-add{margin-top:5px!important;gap:7px!important}@media(max-width:720px){.important-updates-panel .upd-body{padding-bottom:6px!important}.important-updates-panel .upd-comments{padding-top:3px!important}.important-updates-panel .upd-comment-add{margin-top:4px!important}}
/* ---- inline style 23 ---- */
/* Important Updates only: more reactions in a tidy two-row tray. */
.important-updates-panel .upd-quickbar{
position:relative!important;
display:grid!important;
grid-template-columns:repeat(6,34px)!important;
gap:4px!important;
width:max-content!important;
max-width:100%!important;
margin:8px 0 2px!important;
padding:7px!important;
border-radius:18px!important;
background:rgba(255,253,247,.98)!important;
border:1px solid rgba(37,66,41,.12)!important;
box-shadow:0 10px 26px rgba(25,46,28,.16)!important;
animation:rxPop .14s ease both!important;
}
.important-updates-panel .upd-quickbar .rx-quick{
width:34px!important;
height:34px!important;
min-width:34px!important;
border-radius:11px!important;
font-size:20px!important;
background:transparent!important;
border:0!important;
padding:0!important;
display:grid!important;
place-items:center!important;
}
.important-updates-panel .upd-quickbar .rx-quick:active{
background:#edf4e8!important;
transform:scale(.92)!important;
}
.important-updates-panel .upd-quickbar .rx-more{
background:#edf1e8!important;
border:1px solid rgba(37,66,41,.10)!important;
}
.important-updates-panel .upd-quickbar .rx-more svg{width:17px!important;height:17px!important;stroke:#355a3b!important;}
/* Full picker opened by +: large daily-use and cleaning-business set. */
body[data-modal-type="upd-react"] .emoji-pick{
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:8px!important;
padding:8px 2px 4px!important;
max-height:min(52vh,420px)!important;
overflow:auto!important;
overscroll-behavior:contain!important;
}
body[data-modal-type="upd-react"] .emoji-pick-btn{
min-width:0!important;
width:100%!important;
min-height:46px!important;
border-radius:13px!important;
font-size:24px!important;
background:#f6f2e9!important;
border:1px solid rgba(37,66,41,.09)!important;
}
@media(max-width:390px){
.important-updates-panel .upd-quickbar{grid-template-columns:repeat(5,34px)!important;}
body[data-modal-type="upd-react"] .emoji-pick{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
}
/* ---- inline style 24 ---- */
.important-updates-panel .ucm-comment-target,
.important-updates-panel .ucm-reply-target{position:relative!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;border-radius:10px!important;}
.important-updates-panel .ucm-comment-target:active,
.important-updates-panel .ucm-reply-target:active{background:rgba(47,107,62,.055)!important;}
.important-updates-panel .ucm-reply{position:relative!important;display:block!important;padding:6px 8px!important;border-radius:11px!important;background:rgba(255,255,255,.48)!important;border:1px solid rgba(37,66,41,.08)!important;}
.important-updates-panel .ucm-replies{display:grid!important;gap:5px!important;}
.important-updates-panel .ucm-inline-quickbar{position:relative!important;z-index:35!important;margin:6px 0 4px!important;grid-template-columns:repeat(6,32px)!important;padding:6px!important;border-radius:16px!important;}
.important-updates-panel .ucm-inline-quickbar .rx-quick{width:32px!important;height:32px!important;min-width:32px!important;font-size:19px!important;border-radius:10px!important;}
.important-updates-panel .ucm-react,
.important-updates-panel .ucm-reply-react{display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:wrap!important;margin-top:3px!important;}
.important-updates-panel .ucm-rx-chip{min-height:23px!important;padding:1px 7px!important;border-radius:999px!important;background:#f3f5ee!important;border:1px solid rgba(37,66,41,.10)!important;font-size:13px!important;}
.important-updates-panel .ucm-rx-chip.mine{background:#dcebd7!important;border-color:rgba(47,107,62,.22)!important;}
.important-updates-panel .ucm-rx-chip span{font-size:10px!important;font-weight:850!important;color:#536356!important;margin-left:2px!important;}
.important-updates-panel .ucm-rx-add{width:24px!important;height:24px!important;min-width:24px!important;border-radius:999px!important;background:transparent!important;border:1px solid rgba(37,66,41,.12)!important;color:#55705a!important;display:grid!important;place-items:center!important;padding:0!important;}
.important-updates-panel .ucm-rx-add svg{width:13px!important;height:13px!important;}
@media(max-width:390px){
.important-updates-panel .ucm-inline-quickbar{grid-template-columns:repeat(5,32px)!important;}
}
/* ---- reliability.css ---- */
/* EarthRoster v396 security & reliability module */
.ww396-security-card{margin:0 0 18px;padding:16px;border-radius:20px;background:linear-gradient(145deg,#f8fbf4,#eef4e9);border:1px solid rgba(44,84,49,.14);box-shadow:0 12px 28px -24px rgba(20,54,27,.55)}
.ww396-security-top{display:flex;align-items:center;gap:11px}.ww396-security-top>span:nth-child(2){flex:1;min-width:0}.ww396-security-top strong{display:block;color:#173a23;font-size:14.5px;font-weight:900}.ww396-security-top small{display:block;margin-top:2px;color:#6d796c;font-size:11.5px;line-height:1.35}.ww396-shield{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;background:#2c7b45;color:#fff;font-weight:950;box-shadow:0 7px 16px -10px #173d23}.ww396-sync-chip{padding:6px 9px;border-radius:999px;background:#e2eee0;color:#315c36;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.ww396-sync-chip[data-state="syncing"]{background:#fff0cc;color:#855f0b}.ww396-sync-chip[data-state="error"]{background:#fde2de;color:#9a332d}.ww396-security-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:13px 0}.ww396-security-grid span{padding:9px;border-radius:13px;background:rgba(255,255,255,.72);border:1px solid rgba(44,84,49,.08);text-align:center}.ww396-security-grid b{display:block;color:#244b2d;font-size:12.5px}.ww396-security-grid em{display:block;margin-top:2px;color:#778176;font-size:9.5px;font-style:normal;font-weight:700}.ww396-security-actions{display:grid;grid-template-columns:.85fr 1.15fr;gap:8px}.ww396-security-actions .btn{min-height:43px;border-radius:13px;font-size:12px}
.ww396-overlay{position:fixed;inset:0;z-index:10050;background:rgba(7,18,11,.56);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;padding:14px}.ww396-backup-sheet{width:min(620px,100%);max-height:min(86dvh,760px);display:flex;flex-direction:column;background:#f8f6ef;border-radius:28px;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.65)}.ww396-backup-sheet header{display:flex;align-items:center;padding:18px 18px 14px;border-bottom:1px solid rgba(30,61,35,.1)}.ww396-backup-sheet header>span{flex:1}.ww396-backup-sheet header strong{display:block;color:#17351f;font-family:Georgia,serif;font-size:22px}.ww396-backup-sheet header small{display:block;color:#7a8378;font-size:11.5px;margin-top:2px}.ww396-backup-sheet header button{width:42px;height:42px;border:0;border-radius:14px;background:#ece9df;color:#637065;font-size:27px;line-height:1}.ww396-backup-sheet main{overflow:auto;overscroll-behavior:contain;padding:15px;display:grid;gap:11px}.ww396-loading{display:grid;place-items:center;gap:10px;padding:60px 20px;color:#526052}.ww396-loading span{width:28px;height:28px;border-radius:50%;border:3px solid #d6ded2;border-top-color:#2d7c45;animation:ww396spin .7s linear infinite}@keyframes ww396spin{to{transform:rotate(360deg)}}.ww396-local-card,.ww396-backup-head{display:flex;align-items:center;gap:10px;padding:13px;border-radius:16px;background:#fff;border:1px solid rgba(35,75,42,.1)}.ww396-local-card>span,.ww396-backup-head>span{flex:1}.ww396-local-card strong,.ww396-backup-head strong{display:block;color:#1d4027;font-size:13.5px}.ww396-local-card small,.ww396-backup-head small{display:block;color:#7a8579;font-size:10.5px;margin-top:2px}.ww396-local-card button,.ww396-backup-head button,.ww396-row-actions button{border:0;border-radius:11px;padding:9px 11px;background:#2e7141;color:#fff;font-size:10.5px;font-weight:850}.ww396-backup-row{display:flex;align-items:center;gap:9px;padding:12px 13px;border-radius:15px;background:#fff;border:1px solid rgba(35,75,42,.1)}.ww396-backup-row>span:first-child{flex:1;min-width:0}.ww396-backup-row strong{display:block;color:#263b2b;font-size:12.5px}.ww396-backup-row small{display:block;color:#899087;font-size:10.5px;margin-top:3px;text-transform:capitalize}.ww396-row-actions{display:flex;gap:5px}.ww396-row-actions button{background:#e6efe2;color:#315d39}.ww396-row-actions button.danger{background:#f7e4df;color:#9b4038}.ww396-warning{padding:14px;border-radius:16px;background:#fff0dd;border:1px solid rgba(164,105,40,.18)}.ww396-warning strong{display:block;color:#6e4319;font-size:13px}.ww396-warning span{display:block;color:#866542;font-size:11.5px;line-height:1.45;margin-top:4px}.ww396-empty{padding:26px 15px;text-align:center;color:#828a80;font-size:12px;background:#fff;border:1px dashed rgba(35,75,42,.15);border-radius:15px}.ww396-footnote{color:#7d857b;font-size:10.5px;line-height:1.45;text-align:center;padding:3px 10px 8px}.ww396-backup-open{overflow:hidden!important}
@media(min-width:721px){.ww396-overlay{align-items:center}.ww396-backup-sheet{border-radius:24px}}@media(max-width:390px){.ww396-security-grid{gap:5px}.ww396-security-grid span{padding:8px 4px}.ww396-security-actions{grid-template-columns:1fr}.ww396-backup-row{align-items:flex-start;flex-direction:column}.ww396-row-actions{width:100%}.ww396-row-actions button{flex:1}.ww396-overlay{padding:0}.ww396-backup-sheet{border-radius:25px 25px 0 0;max-height:92dvh}}
/* v489 — stable profile security card: no pulsing, shifting or live flicker. */
.ww396-security-card,.ww396-security-card *{animation:none!important;transition:none!important}
.ww396-sync-chip{min-width:68px;text-align:center}
.ww396-security-grid b{min-height:1.25em;display:block}
.ww396-security-top small{min-height:1.35em}
.ww396-security-actions .btn:disabled{opacity:.7;cursor:wait}
/* ---- inline style 26 ---- */
/*
One structural mobile navigation implementation.
The app shell owns the full physical Home Screen height; the navigation is
anchored to that shell rather than to iOS's occasionally shorter dynamic
viewport. This removes the pale strip without creating a tall empty block.
*/
@media (max-width:1023px){
:root{
--ww-shell-h:100lvh;
--ww-nav-core:60px;
--ww-nav-safe:env(safe-area-inset-bottom,0px);
--ww-nav-total:calc(var(--ww-nav-core) + var(--ww-nav-safe));
--ww-nav-bg:#1d3524;
--ww-page-bg:#e7f0e4;
}
html,body{
width:100%!important;
height:var(--ww-shell-h)!important;
min-height:var(--ww-shell-h)!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
background:var(--ww-nav-bg)!important;
background-color:var(--ww-nav-bg)!important;
}
#app,.shell{
width:100%!important;
height:var(--ww-shell-h)!important;
min-height:0!important;
max-height:var(--ww-shell-h)!important;
overflow:hidden!important;
background:var(--ww-nav-bg)!important;
background-color:var(--ww-nav-bg)!important;
}
.shell{
position:relative!important;
display:flex!important;
align-items:stretch!important;
}
.main{
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:none!important;
-webkit-overflow-scrolling:touch!important;
background:linear-gradient(180deg,#edf4ea 0%,#e2ede0 58%,#d9e7d6 100%)!important;
background-color:var(--ww-page-bg)!important;
padding-bottom:0!important;
}
/* Disable historical bottom paint layers. The page itself supplies the light
background; only the dedicated navigation supplies the dark bottom area. */
.main::before,.main::after,
body::after,#app::after,.shell::after{
display:none!important;
content:none!important;
}
.wwnav{
position:absolute!important;
left:0!important;
right:0!important;
bottom:0!important;
z-index:1000!important;
width:100%!important;
height:var(--ww-nav-total)!important;
min-height:var(--ww-nav-total)!important;
max-height:var(--ww-nav-total)!important;
box-sizing:border-box!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
align-items:center!important;
gap:0!important;
margin:0!important;
padding:5px 3px var(--ww-nav-safe)!important;
overflow:hidden!important;
background:linear-gradient(180deg,#203b28 0%,#183120 100%)!important;
background-color:var(--ww-nav-bg)!important;
border:0!important;
border-top:1px solid rgba(255,255,255,.08)!important;
border-radius:0!important;
box-shadow:0 -5px 16px rgba(13,35,20,.12)!important;
transform:none!important;
-webkit-transform:none!important;
}
.wwnav::before,.wwnav::after{
display:none!important;
content:none!important;
}
.wwnav-item{
width:100%!important;
min-width:0!important;
height:50px!important;
min-height:50px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:3px!important;
margin:0!important;
padding:0 1px!important;
border:0!important;
border-radius:10px!important;
background:transparent!important;
color:rgba(220,232,218,.66)!important;
font:inherit!important;
line-height:1!important;
cursor:pointer!important;
opacity:1!important;
transform:none!important;
-webkit-transform:none!important;
-webkit-tap-highlight-color:transparent!important;
touch-action:manipulation!important;
}
.wwnav-item:active{
background:rgba(255,255,255,.05)!important;
opacity:1!important;
transform:none!important;
}
.wwnav-ic{
position:relative!important;
width:25px!important;
height:25px!important;
min-width:25px!important;
min-height:25px!important;
display:grid!important;
place-items:center!important;
flex:0 0 25px!important;
margin:0!important;
}
.wwnav-ic svg{
width:24px!important;
height:24px!important;
display:block!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.8!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.wwnav-lbl{
display:block!important;
max-width:100%!important;
margin:0!important;
overflow:hidden!important;
text-overflow:clip!important;
white-space:nowrap!important;
color:currentColor!important;
font-size:10.5px!important;
font-weight:650!important;
letter-spacing:-.015em!important;
line-height:11px!important;
}
.wwnav-badge{
position:absolute!important;
top:-5px!important;
right:-8px!important;
min-width:17px!important;
height:17px!important;
padding:0 4px!important;
border-radius:999px!important;
background:#d9534f!important;
color:#fff!important;
font-size:9px!important;
font-weight:800!important;
line-height:17px!important;
text-align:center!important;
box-shadow:0 0 0 2px #1b3423!important;
}
.wwnav-item.is-active{
color:#9be791!important;
background:transparent!important;
}
.wwnav-item.is-active .wwnav-lbl{font-weight:800!important;}
.wwnav-item.is-active .wwnav-ic svg{stroke-width:2.15!important;}
body #app > .shell > .main > .content,
body #app > .shell > .main > main.content,
.content,main.content{
padding-bottom:calc(var(--ww-nav-total) + 10px)!important;
}
.toast{bottom:calc(var(--ww-nav-total) + 10px)!important;}
body.chat-thread-open .wwnav,
body.modal-open .wwnav{display:none!important;}
}
@media (max-width:360px){
.wwnav{padding-left:1px!important;padding-right:1px!important;}
.wwnav-lbl{font-size:9.2px!important;letter-spacing:-.03em!important;}
.wwnav-ic,.wwnav-ic svg{width:20px!important;height:20px!important;}
}
@media (min-width:1024px){.wwnav{display:none!important;}}
/* ---- inline style 27 ---- */
/* Typography-only refinement. Navigation geometry, spacing, icons, colours,
safe area and layout are intentionally unchanged. */
@media (max-width:1023px){
.wwnav-lbl{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif!important;
font-size:10px!important;
font-weight:600!important;
font-style:normal!important;
font-stretch:normal!important;
letter-spacing:0!important;
line-height:11px!important;
text-rendering:optimizeLegibility!important;
-webkit-font-smoothing:antialiased!important;
-moz-osx-font-smoothing:grayscale!important;
}
.wwnav-item.is-active .wwnav-lbl{font-weight:620!important;}
}
@media (max-width:360px){
.wwnav-lbl{font-size:9px!important;letter-spacing:0!important;}
}
/* ---- inline style 28 ---- */
@media (max-width:1023px){
.important-updates-panel .upd-comment-input{
font-size:16px!important;
touch-action:manipulation!important;
-webkit-user-select:text!important;
user-select:text!important;
scroll-margin-bottom:calc(92px + var(--safe-b))!important;
}
body.ww-updates-keyboard-open .main,
body.ww-updates-keyboard-open .page,
body.ww-updates-keyboard-open .content{
overscroll-behavior-y:contain!important;
-webkit-overflow-scrolling:touch!important;
}
body.ww-updates-keyboard-open .important-updates-panel,
body.ww-updates-keyboard-open .important-updates-panel *{
animation:none!important;
}
}
/* ---- inline style 29 ---- */
/* Keep global confirmations visible above full-screen sheets. */
.toast{z-index:5000!important;}
body[data-modal-type="booking-address-actions"] .toast{
bottom:calc(var(--safe-b) + 22px)!important;
background:#173f27!important;
color:#fff!important;
box-shadow:0 12px 30px rgba(13,45,27,.28)!important;
}
/* Immediate confirmation stays on the button the user tapped. */
.rt2-copy.is-copied{
background:#e6f2e4!important;
border:1px solid rgba(54,112,59,.35)!important;
color:#245d34!important;
}
.rt2-copy.is-copied svg{display:none!important;}
.rt2-copy-check{
width:20px;height:20px;border-radius:50%;display:inline-flex;
align-items:center;justify-content:center;background:#2f7b46;color:#fff;
font-size:13px;font-weight:900;line-height:1;
}
/* ---- inline style 30 ---- */
/* Professional message grouping, compact cards and truthful read receipts. */
body .chat-thread .chat-scroll{
gap:2px!important;
padding:14px 12px 18px!important;
}
body .chat-thread .msg{
width:100%!important;
display:flex!important;
align-items:flex-end!important;
gap:8px!important;
margin:1px 0!important;
}
body .chat-thread .msg.mine{justify-content:flex-end!important;}
body .chat-thread .msg:not(.mine){justify-content:flex-start!important;}
body .chat-thread .msg-av{
width:34px!important;
min-width:34px!important;
height:34px!important;
display:flex!important;
align-items:flex-end!important;
justify-content:center!important;
}
body .chat-thread .msg-av.is-spacer{visibility:hidden!important;}
body .chat-thread .msg-av .avatar{
width:32px!important;height:32px!important;
font-size:12px!important;border-radius:50%!important;
border:1.5px solid rgba(255,255,255,.16)!important;
box-shadow:0 2px 8px rgba(0,0,0,.24)!important;
}
body .chat-thread .bubble,
body .chat-thread .msg:not(.mine) .bubble,
body .chat-thread .msg.mine .bubble{
width:auto!important;
min-width:0!important;
max-width:min(76%,520px)!important;
padding:9px 12px 7px!important;
display:flex!important;
flex-direction:column!important;
box-shadow:0 2px 8px rgba(0,0,0,.14)!important;
}
body .chat-thread .msg:not(.mine) .bubble{
align-items:flex-start!important;
border-radius:16px 16px 16px 5px!important;
background:linear-gradient(180deg,#252d34,#20272d)!important;
border:1px solid rgba(255,255,255,.08)!important;
}
body .chat-thread .msg.mine .bubble{
align-items:flex-start!important;
border-radius:16px 16px 5px 16px!important;
background:linear-gradient(180deg,#346f45,#285a37)!important;
border:1px solid rgba(181,226,185,.16)!important;
}
body .chat-thread .b-author{
margin:0 0 3px!important;
font-size:11.5px!important;
line-height:1.2!important;
font-weight:800!important;
color:#a9d88c!important;
}
body .chat-thread .b-text{
width:auto!important;
max-width:100%!important;
font-size:15.5px!important;
line-height:1.38!important;
letter-spacing:0!important;
color:inherit!important;
}
body .chat-thread .b-meta{
align-self:flex-end!important;
width:auto!important;
min-width:0!important;
margin-top:4px!important;
gap:5px!important;
justify-content:flex-end!important;
}
body .chat-thread .b-meta time{
font-size:10.5px!important;
opacity:.62!important;
}
body .chat-thread .msg-status{
display:inline-flex!important;
align-items:center!important;
gap:2px!important;
font-size:10.5px!important;
font-weight:750!important;
line-height:1!important;
margin:0!important;
white-space:nowrap!important;
}
body .chat-thread .msg-status.sent{color:rgba(223,235,225,.68)!important;}
body .chat-thread .msg-status.seen{color:#bde7c0!important;}
body .chat-thread .msg-status.seen::first-letter{letter-spacing:-2px;}
body .chat-thread .msg + .msg.mine,
body .chat-thread .msg + .msg:not(.mine){margin-top:1px!important;}
@media(max-width:560px){
body .chat-thread .bubble,
body .chat-thread .msg:not(.mine) .bubble,
body .chat-thread .msg.mine .bubble{max-width:78%!important;}
body .chat-thread .chat-scroll{padding-left:10px!important;padding-right:10px!important;}
body .chat-thread .msg-av{width:32px!important;min-width:32px!important;}
body .chat-thread .msg-av .avatar{width:30px!important;height:30px!important;}
}
/* ---- inline style 31 ---- */
/* No small logo on the sign-in screen. The brand reveal is shown after a
successful login and whenever a signed-in user genuinely launches/resumes. */
.lg2-mark,.lg2-mobile-mark{display:none!important;}
body.ww-login-reveal-open{overflow:hidden!important;touch-action:none!important;}
.ww-login-reveal{
position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;
min-height:100dvh;overflow:hidden;pointer-events:all;opacity:0;contain:strict;
transform:translate3d(0,0,0);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:opacity;
background:
radial-gradient(70% 52% at 50% 43%,rgba(130,164,103,.28),transparent 64%),
radial-gradient(55% 42% at 50% 50%,rgba(205,157,84,.15),transparent 72%),
linear-gradient(155deg,#23452d 0%,#122b1c 48%,#09170f 100%);
transition:opacity .28s cubic-bezier(.22,.75,.24,1);
-webkit-font-smoothing:antialiased;
}
.ww-login-reveal.is-active{opacity:1;}
.ww-login-reveal.is-leaving{opacity:0;pointer-events:none;transition-duration:.52s;}
.ww-login-reveal::before,.ww-login-reveal::after{
content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.ww-login-reveal::before{
width:min(84vw,620px);aspect-ratio:1;left:-30%;top:-24%;
border:1px solid rgba(255,255,255,.065);box-shadow:0 0 0 42px rgba(255,255,255,.022),0 0 0 94px rgba(255,255,255,.016);
}
.ww-login-reveal::after{
width:min(90vw,680px);aspect-ratio:1;right:-45%;bottom:-38%;
background:radial-gradient(circle,rgba(198,149,77,.13),transparent 67%);
}
.ww-login-reveal-glow{
position:absolute;width:min(82vw,460px);aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(196,211,167,.21) 0%,rgba(85,128,78,.08) 42%,transparent 69%);
transform:translate3d(0,0,0) scale(.72);opacity:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity;
}
.ww-login-reveal.is-active .ww-login-reveal-glow{animation:ww477Glow 2.85s cubic-bezier(.2,.8,.2,1) both;}
.ww-login-reveal-rings{position:absolute;width:190px;height:190px;display:grid;place-items:center;}
.ww-login-reveal-rings i{position:absolute;border-radius:50%;border:1px solid rgba(232,204,153,.24);opacity:0;}
.ww-login-reveal-rings i:nth-child(1){inset:7px;}
.ww-login-reveal-rings i:nth-child(2){inset:-12px;}
.ww-login-reveal-rings i:nth-child(3){inset:-33px;}
.ww-login-reveal.is-active .ww-login-reveal-rings i{animation:ww477Ring 2.15s cubic-bezier(.16,1,.3,1) both;}
.ww-login-reveal.is-active .ww-login-reveal-rings i:nth-child(2){animation-delay:.12s;}
.ww-login-reveal.is-active .ww-login-reveal-rings i:nth-child(3){animation-delay:.24s;}
.ww-login-reveal-content{
position:relative;z-index:2;width:min(86vw,360px);display:flex;flex-direction:column;align-items:center;
text-align:center;transform:translate3d(0,8px,0);backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.ww-login-reveal-logo{
width:132px;height:132px;border-radius:31px;overflow:hidden;opacity:0;transform:translate3d(0,14px,0) scale(.7);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity;
box-shadow:0 34px 70px -30px rgba(0,0,0,.86),0 0 0 1px rgba(255,255,255,.14),0 0 48px rgba(195,159,95,.16);
}
.ww-login-reveal-logo img,.ww-login-reveal-logo svg{display:block;width:100%;height:100%;object-fit:cover;}
.ww-login-reveal.is-active .ww-login-reveal-logo{animation:ww477Logo .92s cubic-bezier(.16,1,.3,1) .10s both;}
.ww-login-reveal-copy{margin-top:28px;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translate3d(0,10px,0);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity;}
.ww-login-reveal.is-active .ww-login-reveal-copy{animation:ww477Copy .72s ease .58s both;}
.ww-login-reveal-copy span{
color:#e5bd72;font:800 11px/1.1 "Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
letter-spacing:.22em;text-transform:uppercase;
}
.ww-login-reveal-copy strong{
margin-top:8px;color:#fffdf5;font:600 clamp(34px,10vw,47px)/1 "Fraunces",Georgia,serif;
letter-spacing:-.035em;text-shadow:0 16px 34px rgba(0,0,0,.35);
}
.ww-login-reveal-copy em{
margin-top:12px;color:rgba(235,242,229,.72);font:650 13px/1.3 "Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-style:normal;letter-spacing:.01em;
}
.ww-login-reveal-progress{
width:154px;height:3px;margin-top:25px;border-radius:99px;overflow:hidden;
background:rgba(255,255,255,.12);opacity:0;
}
.ww-login-reveal-progress b{
display:block;width:100%;height:100%;border-radius:inherit;transform:translateX(-102%);
background:linear-gradient(90deg,#d2a75e,#f0d596,#d8b26b);
}
.ww-login-reveal.is-active .ww-login-reveal-progress{animation:ww477ProgressIn .32s ease .84s both;}
.ww-login-reveal.is-active .ww-login-reveal-progress b{animation:ww477Progress 1.95s cubic-bezier(.22,.78,.2,1) .90s both;}
@keyframes ww477Logo{
0%{opacity:0;transform:translate3d(0,14px,0) scale(.7) rotate(-2deg)}
62%{opacity:1;transform:translate3d(0,0,0) scale(1.035) rotate(.35deg)}
100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}
}
@keyframes ww477Ring{0%{opacity:0;transform:translate3d(0,0,0) scale(.66)}45%{opacity:.68}100%{opacity:0;transform:translate3d(0,0,0) scale(1.14)}}
@keyframes ww477Glow{0%{opacity:0;transform:translate3d(0,0,0) scale(.72)}45%{opacity:.92}100%{opacity:.32;transform:translate3d(0,0,0) scale(1.04)}}
@keyframes ww477Copy{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes ww477ProgressIn{from{opacity:0}to{opacity:1}}
@keyframes ww477Progress{0%{transform:translateX(-102%)}100%{transform:translateX(0)}}
@media(max-width:390px){
.ww-login-reveal-logo{width:116px;height:116px;border-radius:28px;}
.ww-login-reveal-rings{width:170px;height:170px;}
.ww-login-reveal-copy{margin-top:24px;}
}
@media(prefers-reduced-motion:reduce){
.ww-login-reveal,.ww-login-reveal.is-leaving{transition-duration:.16s!important;}
.ww-login-reveal-glow,.ww-login-reveal-rings i,.ww-login-reveal-logo,.ww-login-reveal-copy,.ww-login-reveal-progress,.ww-login-reveal-progress b{
animation:none!important;opacity:1!important;transform:none!important;filter:none!important;
}
}
/* ---- roster-split-v511.css ---- */
/* EarthRoster v511 — client invoice hours / employee roster split */
.ww511-admin-guide{display:flex;align-items:flex-start;gap:11px;margin:12px 0;padding:12px 13px;border:1px solid rgba(39,92,55,.14);border-radius:15px;background:linear-gradient(135deg,#f4f7ef,#ecefe5);color:#24482f}.ww511-admin-guide>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#235c37;color:#fff}.ww511-admin-guide svg{width:17px;height:17px}.ww511-admin-guide strong{display:block;font-size:12px;line-height:1.25}.ww511-admin-guide small{display:block;margin-top:3px;font-size:10.5px;line-height:1.35;color:#68766c}
.ww511-hero-foot{gap:8px!important}.ww511-hero-foot .rst-hs{min-width:72px}.ww511-hero-foot .rst-hs strong{font-size:18px!important}.ww511-hero-foot .rst-hs em{font-size:8.5px!important;white-space:nowrap}.ww511-roster-hero.admin .rst-hero-label .rst-eyebrow{letter-spacing:.08em}
.ww511-client-badge strong{font-size:20px!important;white-space:nowrap}.ww511-client-badge .rc-ap{font-size:7px!important;letter-spacing:.12em}.ww511-client-badge .rc-dur{font-size:7px!important}.ww511-card-split{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:5px 8px;border-radius:999px;background:rgba(28,91,49,.09);color:#245c37;font-size:9.5px;font-weight:850}.ww511-card-split svg{width:12px;height:12px}.ww511-card-split.is-personal{background:rgba(255,255,255,.7)}.ww511-admin-job .rc-time-range,.ww511-employee-job .rc-time-range{font-weight:750!important}.ww511-admin-job .rc-main,.ww511-employee-job .rc-main{row-gap:2px!important}
.ww511-rgc .ww511-rgc-bill{margin-top:5px;font-size:8.5px;font-weight:800;color:#6a756d}.ww511-rwg-wrap .rwg-corner{display:flex;flex-direction:column;justify-content:center;gap:2px}.ww511-rwg-wrap .rwg-corner strong{font-size:11px}.ww511-rwg-wrap .rwg-corner small{font-size:8px;color:#839086}.ww511-rwg-wrap .rwg-dayhrs{font-size:7.5px!important}
.ww511-shift-builder{gap:11px!important}.ww511-job-setup,.ww511-billing-panel,.ww511-split-panel{border-radius:18px!important;border:1px solid rgba(38,78,48,.13)!important;background:#fff!important;box-shadow:0 7px 20px rgba(25,54,32,.055)!important}.ww511-date-start-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ww511-finish-preview{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;margin-top:9px;padding:9px 11px;border-radius:12px;background:#f0f5ee;border:1px solid rgba(37,86,49,.10)}.ww511-finish-preview span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#6d7a70}.ww511-finish-preview strong{justify-self:end;font-size:14px;color:#245c37}.ww511-finish-preview small{grid-column:1/-1;font-size:9px;color:#7c877e}
.ww511-billing-title{align-items:center}.ww511-admin-only{margin-left:auto;padding:4px 7px;border-radius:999px;background:#1f5834;color:#fff;font-size:7.5px;font-weight:900;letter-spacing:.10em}.ww511-billing-grid{display:grid;grid-template-columns:minmax(150px,.75fr) 1.25fr;gap:10px;align-items:stretch}.ww511-client-hours{position:relative;display:flex;flex-direction:column;justify-content:center;padding:10px 58px 10px 11px;border-radius:13px;background:#173f29;color:#fff}.ww511-client-hours>span{font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.68)}.ww511-client-hours input{width:100%;margin-top:3px;padding:0;border:0;outline:0;background:transparent;color:#fff;font-size:26px;font-weight:900;line-height:1}.ww511-client-hours em{position:absolute;right:12px;bottom:13px;font-size:10px;font-weight:800;color:#d7e7d9}.ww511-billing-example{display:flex;flex-direction:column;justify-content:center;padding:10px 11px;border-radius:13px;background:#f4f4ee}.ww511-billing-example strong{font-size:12px;color:#273b2d}.ww511-billing-example span{margin-top:4px;font-size:9.5px;line-height:1.35;color:#6d786f}
.ww511-split-title{align-items:center}.ww511-total-pill{margin-left:auto;padding:5px 8px;border-radius:999px;background:#edf3ea;color:#2a5f3b;font-size:9px;font-weight:900}.ww511-split-callout{padding:10px 11px;border-radius:13px;background:linear-gradient(135deg,#eef5ec,#f8f6ed);border:1px solid rgba(42,91,53,.10)}.ww511-split-callout strong,.ww511-split-callout span{display:block}.ww511-split-callout strong{font-size:12px;color:#224f32}.ww511-split-callout span{margin-top:3px;font-size:9.5px;color:#6d7b70}.ww511-split-toggle{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:9px 0;padding:4px;border-radius:12px;background:#ecefe8}.ww511-split-toggle button{height:34px;border:0;border-radius:9px;background:transparent;color:#647068;font-size:10px;font-weight:850}.ww511-split-toggle button.active{background:#fff;color:#205b35;box-shadow:0 2px 8px rgba(28,57,35,.10)}.ww511-allocation-list{display:grid;gap:7px}.ww511-allocation-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 9px;border-radius:12px;background:#fafaf6;border:1px solid rgba(40,73,46,.09)}.ww511-allocation-av{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#dfeadf;color:#2b603b;font-size:10px;font-weight:900}.ww511-allocation-copy{min-width:0}.ww511-allocation-copy strong,.ww511-allocation-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ww511-allocation-copy strong{font-size:11px;color:#26382b}.ww511-allocation-copy small{margin-top:2px;font-size:9px;color:#768078}.ww511-row-hours{font-size:12px;color:#245b37}.ww511-hour-input{display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:9px;background:#fff;border:1px solid rgba(42,83,50,.14)}.ww511-hour-input input{width:48px;border:0;outline:0;background:transparent;text-align:right;font-size:12px;font-weight:900;color:#245b37}.ww511-hour-input span{font-size:8px;font-weight:800;color:#78827a}.ww511-allocation-total{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;margin-top:9px;padding:9px 10px;border-radius:12px}.ww511-allocation-total span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.ww511-allocation-total strong{font-size:12px}.ww511-allocation-total em{grid-column:1/-1;font-size:8.5px}.ww511-allocation-total.is-ok{background:#eaf4e9;color:#265e38}.ww511-allocation-total.is-bad{background:#fae9e5;color:#9a4034}.ww511-empty-split{padding:13px;border-radius:12px;background:#f3f4ef;text-align:center}.ww511-empty-split strong,.ww511-empty-split span{display:block}.ww511-empty-split strong{font-size:11px}.ww511-empty-split span{margin-top:3px;font-size:9.5px;color:#788078}
@media(max-width:760px){.ww511-hero-foot{display:grid!important;grid-template-columns:repeat(3,1fr)!important}.ww511-hero-foot .rst-hero-add{grid-column:1/-1;width:100%!important;justify-content:center!important}.ww511-roster-hero.staff .ww511-hero-foot{grid-template-columns:1fr 1fr!important}.ww511-roster-hero.staff .rst-hero-add{grid-column:1/-1}.ww511-billing-grid{grid-template-columns:1fr}.ww511-date-start-grid{grid-template-columns:1fr 1fr}.ww511-admin-guide{margin:10px 0}.ww511-admin-job .rc-info,.ww511-employee-job .rc-info{min-width:0}.ww511-card-split{max-width:100%;white-space:normal}.ww511-client-badge{min-width:74px!important}}
@media(max-width:390px){.ww511-date-start-grid{grid-template-columns:1fr}.ww511-hero-foot .rst-hs strong{font-size:16px!important}.ww511-allocation-row{grid-template-columns:30px minmax(0,1fr) auto}.ww511-hour-input input{width:42px}}
/* v511 order lock: older roster-builder rules used custom flex order values. */
.ww511-shift-builder>.client-search-panel{order:1!important}
.ww511-shift-builder>.ww511-job-setup{order:2!important}
.ww511-shift-builder>.ww511-billing-panel{order:3!important}
.ww511-shift-builder>.emp-field{order:4!important}
.ww511-shift-builder>.ww511-split-panel{order:5!important}
.ww511-shift-builder>.recurrence-section{order:6!important}
.ww511-shift-builder>.shift-colour-section{order:7!important}
.ww511-shift-builder>.visibility-section{order:8!important}
.ww511-shift-builder>.shift-notes-section{order:9!important}
.ww511-admin-job .ww511-card-split{background:rgba(255,255,255,.15)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
@media(max-width:760px){
.ww511-employee-job .rc-main{display:grid!important;grid-template-columns:74px minmax(0,1fr)!important;column-gap:9px!important}
.ww511-employee-job .rc-badge{grid-column:1;grid-row:1/3!important}
.ww511-employee-job .rc-info{grid-column:2;grid-row:1!important;width:100%!important}
.ww511-employee-job .rc-actions-row{grid-column:2;grid-row:2!important;justify-content:flex-start!important;margin-top:6px!important}
.ww511-employee-job .rc-meta{grid-column:1/-1!important;grid-row:3!important;margin-top:6px!important}
.ww511-employee-job .rc-info h3{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.15!important}
}
/* ---- inline style 33 ---- */
/* v524 — locked roster-card staff layout.
Keep rostered employee names in one consistent, centred position on both
admin and employee mobile cards. Names wrap only when genuinely necessary. */
@media (max-width:1023px){
.roster-mobile .rcard .rc-meta.rc-meta-full,
.home-roster-list .rcard .rc-meta.rc-meta-full,
.rcard.is-emp .rc-meta.rc-meta-full{
order:99!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 100%!important;
align-self:stretch!important;
width:100%!important;
max-width:100%!important;
margin:4px 0 0!important;
padding:0 2px!important;
box-sizing:border-box!important;
overflow:visible!important;
white-space:normal!important;
}
.roster-mobile .rcard .rc-meta .rc-staff-line,
.home-roster-list .rcard .rc-meta .rc-staff-line,
.rcard.is-emp .rc-meta .rc-staff-line{
display:grid!important;
grid-template-columns:38px minmax(0,1fr) 38px!important;
align-items:center!important;
justify-content:center!important;
gap:0!important;
width:min(100%,330px)!important;
max-width:100%!important;
min-width:0!important;
min-height:24px!important;
height:auto!important;
margin:0 auto!important;
padding:2px 4px!important;
box-sizing:border-box!important;
border-radius:10px!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
}
.roster-mobile .rcard .rc-meta .rc-staff-line .rc-staff-kicker,
.home-roster-list .rcard .rc-meta .rc-staff-line .rc-staff-kicker,
.rcard.is-emp .rc-meta .rc-staff-line .rc-staff-kicker{
grid-column:1!important;
justify-self:start!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:34px!important;
height:18px!important;
min-height:18px!important;
padding:0!important;
margin:0!important;
border-radius:7px!important;
font-size:8px!important;
line-height:18px!important;
letter-spacing:.07em!important;
flex:none!important;
}
.roster-mobile .rcard .rc-meta .rc-staff-line .rc-staff-names,
.home-roster-list .rcard .rc-meta .rc-staff-line .rc-staff-names,
.rcard.is-emp .rc-meta .rc-staff-line .rc-staff-names{
grid-column:2!important;
justify-self:center!important;
align-self:center!important;
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:auto!important;
min-height:18px!important;
padding:2px 4px!important;
margin:0!important;
box-sizing:border-box!important;
text-align:center!important;
font-size:11.5px!important;
font-weight:900!important;
line-height:1.12!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
word-break:normal!important;
overflow-wrap:normal!important;
}
/* Preserve a balanced empty column so the names stay truly centred even
with the TEAM label on the left. */
.roster-mobile .rcard .rc-meta .rc-staff-line::after,
.home-roster-list .rcard .rc-meta .rc-staff-line::after,
.rcard.is-emp .rc-meta .rc-staff-line::after{
content:""!important;
grid-column:3!important;
width:34px!important;
height:1px!important;
}
/* Only multi-name rows gain a little breathing room; standard cards stay slim. */
.roster-mobile .rcard:has(.rc-staff-names),
.home-roster-list .rcard:has(.rc-staff-names),
.rcard.is-emp:has(.rc-staff-names){
padding-bottom:8px!important;
}
}
/* ---- inline style 34 ---- */
@media(max-width:1023px){
body.ww-stable-scroll-page .main,
body.ww-stable-scroll-page .content{
scroll-behavior:auto!important;
overflow-anchor:none!important;
overscroll-behavior-y:contain!important;
-webkit-overflow-scrolling:touch!important;
transform:none!important;
will-change:auto!important;
}
body.ww-stable-scroll-page .home-roster-list,
body.ww-stable-scroll-page .roster-mobile{
overflow-anchor:none!important;
contain:layout style!important;
}
body.ww-stable-scroll-page .home-roster-list .ww522-roster-card,
body.ww-stable-scroll-page .roster-mobile .ww522-roster-card{
content-visibility:visible!important;
contain:layout style!important;
contain-intrinsic-size:none!important;
transition:none!important;
animation:none!important;
transform:none!important;
will-change:auto!important;
}
}
/* ---- app-polish-v644-bundle-1.css ---- */
/* ---- app-polish-v536.css ---- */
/* EarthRoster v536 — whole-app production polish */
:root{
--ww536-card-radius:18px;
--ww536-soft-shadow:0 8px 22px rgba(18,42,25,.07);
--ww536-line:rgba(29,63,38,.12);
}
html,body,#app{max-width:100%;overflow-x:hidden!important}
html{scroll-behavior:auto!important}
body{touch-action:pan-y;-webkit-overflow-scrolling:touch}
button,[role="button"],[data-action],a,input,select,textarea{touch-action:manipulation}
button,[data-action],a{-webkit-tap-highlight-color:transparent}
input,select,textarea{max-width:100%;min-width:0}
@media(max-width:1023px){input,select,textarea{font-size:16px!important}}
/* Prevent visual movement while fingers are scrolling. */
body.ww536-user-scrolling .card,
body.ww536-user-scrolling .rcard,
body.ww536-user-scrolling .v213-card,
body.ww536-user-scrolling .directory-card,
body.ww536-user-scrolling [data-action],
body.ww536-user-scrolling button{
animation-play-state:paused!important;
transition-property:color,background-color,border-color,opacity!important;
transition-duration:.01ms!important;
transform:none!important;
}
/* Long operational lists get cheap, isolated paint areas without changing height. */
.roster-mobile .rcard,
.home-roster-list .rcard,
.v213-card,
.directory-card,
.folder-card,
.doc-card,
.notif-item,
.appr-row{
contain:layout paint;
backface-visibility:hidden;
}
/* Keep internal pages quieter and more operational. */
.v213-hero,
.directory-hub-hero,
.manager-hero,
.agreement-card,
.doc-intro{
border-radius:var(--ww536-card-radius)!important;
box-shadow:var(--ww536-soft-shadow)!important;
}
.v213-hero{padding:16px!important;gap:14px!important}
.v213-hero-copy p{max-width:620px!important;margin-top:5px!important;line-height:1.35!important}
.v213-hero-actions{gap:8px!important}
.v213-stats{margin-top:12px!important;gap:8px!important}
.v213-stat{min-height:74px!important;padding:12px!important}
.v213-toolbar{margin-top:14px!important}
.directory-hub-hero{padding:15px!important;min-height:auto!important}
.directory-hub-hero .dhh-copy p:empty{display:none!important}
.directory-hub-hero .dhh-copy h2{margin-bottom:0!important}
.directory-hub-grid{gap:10px!important;margin-top:12px!important}
.directory-action-row{gap:10px!important;margin-top:12px!important}
.directory-preview-heading{margin-bottom:8px!important}
.manager-hero{padding:14px 15px!important;min-height:auto!important;gap:12px!important}
.manager-hero .mh-copy p:empty{display:none!important}
.manager-hero .mh-copy h2{margin-bottom:0!important}
.manager-hero .mh-add{align-self:center!important}
.directory-stats{margin-top:12px!important;gap:8px!important}
.directory-toolbar{margin-top:12px!important}
.agreement-card{padding:16px!important}
.agreement-card .ag-head p{margin-top:3px!important}
.doc-intro{padding:14px!important;gap:11px!important}
.doc-intro p{margin-top:2px!important}
/* Consistent spacing between page blocks and less accidental empty space. */
.page>.card+.card,
.page>section+section{margin-top:14px}
.card>.empty,
.modal-body>.empty,
.modal-scroll>.empty{min-height:150px!important}
/* Buttons remain stable and professional rather than bouncing or scaling. */
.btn,button,[data-action]{transition:background-color .16s ease,color .16s ease,border-color .16s ease,opacity .16s ease!important}
.btn:active,button:active,[data-action]:active{transform:none!important}
/* Focus is visible for keyboard users but not visually noisy for touch users. */
:focus{outline:none}
:focus-visible{outline:3px solid rgba(74,140,86,.38)!important;outline-offset:2px!important}
/* A single clean modal surface; prevent nested panels from visually fighting. */
.modal-overlay{overscroll-behavior:contain!important}
.modal-card,.modal-panel,.sft-shell{box-shadow:0 22px 60px rgba(10,30,17,.22)!important}
.modal-body,.modal-scroll,.sft-body{overscroll-behavior-y:contain!important;scroll-behavior:auto!important}
/* Keep fixed action rows compact and keyboard-safe. */
.modal-actions,.sft-actions{padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
/* Reduced-motion users should never receive decorative movement. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media(max-width:720px){
.v213-hero{display:grid!important;grid-template-columns:1fr!important}
.v213-hero-copy p{font-size:12.5px!important}
.v213-hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
.v213-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.v213-stat:last-child:nth-child(odd){grid-column:1/-1!important}
.directory-hub-hero .dhh-copy span,
.manager-hero .mh-copy span{font-size:9.5px!important}
.directory-hub-hero .dhh-copy h2,
.manager-hero .mh-copy h2{font-size:20px!important}
.directory-action-row{grid-template-columns:1fr 1fr!important}
.manager-hero{grid-template-columns:auto minmax(0,1fr)!important}
.manager-hero .mh-add{grid-column:1/-1!important;width:100%!important}
.directory-stats .dir-stat{padding:11px 8px!important}
.agreement-card .ag-actions{grid-template-columns:1.25fr 1fr 1fr!important}
}
/* v536 — roster calendar regression guard.
The generic empty-state rule must never resize zero-job day badges. */
@media(max-width:1023px){
.ww521-roster-controls .rst-days,
.ww521-roster-controls .rst-days-admin{
height:auto!important;
min-height:0!important;
grid-auto-rows:auto!important;
align-items:start!important;
}
.ww521-roster-controls .rst-day,
.ww521-roster-controls .rst-days-admin .rst-day{
height:64px!important;
min-height:64px!important;
max-height:64px!important;
align-self:start!important;
}
.ww521-roster-controls .rd-stats.empty{
min-height:16px!important;
height:16px!important;
max-height:16px!important;
}
}
@media(max-width:370px){
.ww521-roster-controls .rst-day,
.ww521-roster-controls .rst-days-admin .rst-day{
height:61px!important;
min-height:61px!important;
max-height:61px!important;
}
}
/* ---- app-polish-v538.css ---- */
/* EarthRoster v537 — restore map-app symbols in the GPS chooser. */
.gps-app-chooser .aec-option .aec-app-icon{
position:relative;
flex:0 0 46px;
opacity:1!important;
visibility:visible!important;
overflow:hidden;
}
/* Google Maps — recognisable multicolour map pin. */
.gps-app-chooser .gps-google .aec-app-icon{
background:#fff!important;
border:1px solid rgba(24,49,33,.12);
color:transparent!important;
font-size:0!important;
box-shadow:0 5px 14px rgba(24,49,33,.10),inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.gps-app-chooser .gps-google .aec-app-icon::before{
content:"";
width:25px;
height:25px;
border-radius:50% 50% 50% 0;
transform:rotate(-45deg);
background:conic-gradient(from 42deg,#4285f4 0 25%,#34a853 0 49%,#fbbc04 0 72%,#ea4335 0 100%);
box-shadow:0 2px 5px rgba(20,52,89,.18);
}
.gps-app-chooser .gps-google .aec-app-icon::after{
content:"";
position:absolute;
left:50%;
top:47%;
width:8px;
height:8px;
transform:translate(-50%,-50%);
border-radius:50%;
background:#fff;
box-shadow:0 0 0 1px rgba(0,0,0,.04);
}
/* Apple Maps — blue/green map tile with the existing white location pin. */
.gps-app-chooser .gps-apple .aec-app-icon{
background:linear-gradient(180deg,#5bc8ff 0 56%,#64c66c 56% 100%)!important;
border:1px solid rgba(0,91,170,.18);
color:#fff!important;
box-shadow:0 5px 14px rgba(0,105,190,.16),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.gps-app-chooser .gps-apple .aec-app-icon::before,
.gps-app-chooser .gps-apple .aec-app-icon::after{
content:"";
position:absolute;
left:-5px;
right:-5px;
height:2px;
background:rgba(255,255,255,.72);
transform:rotate(-20deg);
}
.gps-app-chooser .gps-apple .aec-app-icon::before{top:14px}
.gps-app-chooser .gps-apple .aec-app-icon::after{bottom:12px;transform:rotate(17deg)}
.gps-app-chooser .gps-apple .aec-app-icon svg{
position:relative;
z-index:2;
width:23px!important;
height:23px!important;
filter:drop-shadow(0 1px 1px rgba(0,69,120,.24));
}
/* Waze — bright cyan app tile with a clear W symbol. */
.gps-app-chooser .gps-waze .aec-app-icon{
background:linear-gradient(145deg,#62e1f8,#20b8d9)!important;
border:1px solid rgba(0,122,153,.18);
color:#083f4a!important;
font-size:20px!important;
font-weight:950!important;
box-shadow:0 5px 14px rgba(20,158,185,.18),inset 0 1px 0 rgba(255,255,255,.42)!important;
}
/* Keep the generic chooser icon visible and aligned as well. */
.gps-app-chooser .share .aec-app-icon,
.gps-app-chooser .gps-android .aec-app-icon{
opacity:1!important;
visibility:visible!important;
}
@media(max-width:560px){
.gps-app-chooser .aec-option .aec-app-icon{flex-basis:42px}
.gps-app-chooser .gps-google .aec-app-icon::before{width:23px;height:23px}
}
/* EarthRoster v538 — shared employee/admin GPS chooser with native platform ordering. */
.gps-app-chooser .aec-options{gap:9px}
.gps-app-chooser .aec-option{min-height:66px}
.gps-app-chooser .gps-primary{border-color:rgba(35,104,63,.30)!important;box-shadow:0 8px 22px rgba(27,77,43,.10),inset 0 0 0 1px rgba(35,104,63,.06)!important}
.gps-app-chooser.is-apple .gps-apple.gps-primary{border-color:rgba(45,139,224,.30)!important;box-shadow:0 8px 22px rgba(40,118,190,.11),inset 0 0 0 1px rgba(45,139,224,.06)!important}
.gps-app-chooser .aec-option strong{font-size:14px;line-height:1.15}
.gps-app-chooser .aec-option small{line-height:1.3}
/* Android's generic app chooser is distinct from the job-location pin. */
.gps-app-chooser .gps-android .aec-app-icon{
background:linear-gradient(145deg,#68a85d,#2f6f3c)!important;
color:#fff!important;
border:1px solid rgba(32,91,43,.18);
box-shadow:0 5px 14px rgba(34,96,48,.17),inset 0 1px 0 rgba(255,255,255,.34)!important;
}
.gps-app-chooser .gps-android .aec-app-icon svg{width:23px!important;height:23px!important}
/* Apple devices show Apple Maps first; Android devices never show Apple Maps. */
.gps-app-chooser.is-apple .gps-apple{order:1}
.gps-app-chooser.is-apple .gps-google{order:2}
.gps-app-chooser.is-apple .gps-waze{order:3}
.gps-app-chooser.is-apple .share{order:4}
.gps-app-chooser.is-android .gps-google{order:1}
.gps-app-chooser.is-android .gps-waze{order:2}
.gps-app-chooser.is-android .gps-android{order:3}
@media(max-width:560px){
.gps-app-chooser .aec-option{min-height:62px}
.gps-app-chooser .aec-option strong{font-size:13.5px}
.gps-app-chooser .aec-option small{font-size:11px}
}
/* ---- app-polish-v539.css ---- */
/* EarthRoster v539 — cleaner client search and taller client dropdown. */
/* The outer search field is the only visible input surface. Remove the native
iOS/Safari focus rectangle that was appearing inside it around typed text. */
body[data-modal-type="shift"] .ww515-client-step .client-search-box input,
body[data-modal-type="shift"] #clientSearch{
-webkit-appearance:none!important;
appearance:none!important;
display:block!important;
width:100%!important;
min-width:0!important;
height:100%!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
background-image:none!important;
-webkit-box-shadow:none!important;
-webkit-tap-highlight-color:transparent!important;
}
body[data-modal-type="shift"] .ww515-client-step .client-search-box input:focus,
body[data-modal-type="shift"] .ww515-client-step .client-search-box input:focus-visible,
body[data-modal-type="shift"] #clientSearch:focus,
body[data-modal-type="shift"] #clientSearch:focus-visible{
border:0!important;
border-radius:0!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
}
body[data-modal-type="shift"] #clientSearch::-webkit-search-decoration,
body[data-modal-type="shift"] #clientSearch::-webkit-search-cancel-button,
body[data-modal-type="shift"] #clientSearch::-webkit-search-results-button,
body[data-modal-type="shift"] #clientSearch::-webkit-search-results-decoration{
display:none!important;
-webkit-appearance:none!important;
}
/* Keep the focus state on the clean outer field rather than drawing another
rectangle inside the input. */
body[data-modal-type="shift"] .ww515-client-step .client-search-box:focus-within{
border-color:#4d8259!important;
box-shadow:0 0 0 3px rgba(62,116,75,.13)!important;
}
/* Open the client list as a useful, full-height dropdown. It now displays a
generous number of clients and scrolls internally instead of ending after
two short rows. Dynamic viewport units keep it usable above phone keyboards. */
body[data-modal-type="shift"] .ww515-client-step .client-picker:not(.is-collapsed){
display:block!important;
height:auto!important;
min-height:220px!important;
max-height:min(44dvh,430px)!important;
overflow-y:auto!important;
overflow-x:hidden!important;
margin-top:9px!important;
margin-bottom:10px!important;
padding:5px!important;
border:1px solid rgba(45,79,51,.15)!important;
border-radius:14px!important;
background:#fffef9!important;
box-shadow:0 12px 28px rgba(25,55,32,.11)!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-gutter:stable;
}
body[data-modal-type="shift"] .ww515-client-step .client-search-row{
min-height:58px!important;
padding:10px 11px!important;
border-radius:11px!important;
}
body[data-modal-type="shift"] .ww515-client-step .client-search-row + .client-search-row{
border-top:1px solid rgba(43,73,48,.07)!important;
}
body[data-modal-type="shift"] .ww515-client-step .client-search-row .pick-main strong{
font-size:15.5px!important;
line-height:1.2!important;
}
body[data-modal-type="shift"] .ww515-client-step .client-search-row .pick-main em{
margin-top:3px!important;
font-size:12.5px!important;
line-height:1.25!important;
}
@media(max-width:430px){
body[data-modal-type="shift"] .ww515-client-step .client-picker:not(.is-collapsed){
height:auto!important;
min-height:210px!important;
max-height:min(41dvh,380px)!important;
}
}
/* ---- app-polish-v540.css ---- */
/* EarthRoster v540 — cleaner admin home + travel time on every timesheet entry path. */
/* Admin dashboard: after removing the redundant Bookings & reminders and Directory
shortcuts, keep Availability visually connected to Today's roster. */
.hm > .hm-avail{
margin-top:14px!important;
}
.hm > .hm-sec-head{
margin-top:18px!important;
}
/* Timesheet travel-time field: consistent alongside kilometres without crowding. */
.ww-ts-date-field{margin-bottom:10px!important}
.ww-ts-travel-row,
.ww-travel-pair{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px!important;
align-items:end!important;
}
.ww-unit{font-size:.82em!important;font-weight:650!important;color:#7f887f!important}
.tsr-travel{white-space:nowrap!important}
/* Clock-out: kilometres + travel time sit side-by-side; notes use full width. */
.co500-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.co500-form-grid .ww-co-notes-wide{grid-column:1/-1!important}
/* Admin/employee record editor: neat mobile stacking. */
@media(max-width:560px){
.ww-ts-travel-row,.ww-travel-pair{gap:8px!important}
.ww-ts-travel-row .field,.ww-travel-pair .mr2-field{min-width:0!important}
.ww-ts-travel-row .input,.ww-travel-pair .input{width:100%!important;min-width:0!important}
.ww-status-field{margin-top:2px!important}
.co500-form-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
.co500-form-grid .co500-input-wrap input{min-width:0!important;width:100%!important}
}
@media(max-width:360px){
.ww-ts-travel-row,.ww-travel-pair{grid-template-columns:1fr!important}
.co500-form-grid{grid-template-columns:1fr!important}
.co500-form-grid .ww-co-notes-wide{grid-column:auto!important}
}
/* Admin focus grid gets one extra compact travel-time column. */
.tfe-travel{font-size:11px!important;font-weight:750!important;color:#647266!important;white-space:nowrap!important}
.tfe-travel{flex:0 0 64px!important}
@media(max-width:900px){.tfe-travel{flex-basis:58px!important}}
/* iOS/WebKit: keep selected time/status text visible in admin/employee timesheet forms. */
body[data-modal-type="admin-entry"] .mr2 select.input,
body[data-modal-type="missed-record"] .mr2 select.input,
body[data-modal-type="record"] .record-entry-modal select.input{
color:#203126!important;
-webkit-text-fill-color:#203126!important;
opacity:1!important;
}
body[data-modal-type="admin-entry"] .mr2 select.input option,
body[data-modal-type="missed-record"] .mr2 select.input option,
body[data-modal-type="record"] .record-entry-modal select.input option{
color:#203126!important;
background:#fff!important;
}
/* ---- app-polish-v632.css ---- */
/* EarthRoster v632 — desktop roster-job editor scroll unlock.
Fixes the legacy V399 desktop rule that hid overflow once the editor grew taller.
No roster/business logic changes. */
@media (min-width:1024px){
html body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-body{
flex:1 1 auto!important;
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior-x:none!important;
overscroll-behavior-y:contain!important;
scroll-behavior:auto!important;
scroll-snap-type:none!important;
overflow-anchor:none!important;
touch-action:pan-y!important;
-webkit-overflow-scrolling:auto!important;
scrollbar-gutter:stable!important;
}
html body[data-modal-type="shift"].modal-open #modalHost .shift-modal{
overflow:hidden!important;
}
html body[data-modal-type="shift"].modal-open #modalHost .ww515-shift-builder{
min-height:max-content!important;
}
}
/* ---- app-polish-v635.css ---- */
/* EarthRoster v635 — desktop New/Edit roster job: balanced one-screen two-column layout.
Goal: remove empty gaps, keep all main fields visible together, preserve a safe scroll fallback. */
@media (min-width:1024px){
body[data-modal-type="shift"].modal-open #modalHost .modal-overlay{
padding:4px!important;
align-items:center!important;
justify-content:center!important;
background:rgba(10,29,17,.72)!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal{
width:min(94vw,1060px)!important;
max-width:1060px!important;
height:auto!important;
max-height:calc(100dvh - 8px)!important;
border-radius:22px!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
background:#f3f6f1!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-head{
flex:0 0 auto!important;
min-height:54px!important;
padding:11px 16px 9px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-head h2{
font-size:21px!important;
line-height:1.05!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-x{
width:36px!important;
height:36px!important;
border-radius:11px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-body{
flex:0 1 auto!important;
min-height:0!important;
padding:10px 12px 8px!important;
overflow-y:hidden!important;
overflow-x:hidden!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-foot{
flex:0 0 auto!important;
min-height:52px!important;
padding:7px 12px 9px!important;
gap:8px!important;
margin:0!important;
}
/* Two genuinely independent stacks — no row-height coupling, so no large blank areas. */
body[data-modal-type="shift"].modal-open #modalHost .ww635-one-screen-grid{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
grid-template-areas:none!important;
grid-template-rows:auto!important;
grid-auto-rows:auto!important;
gap:12px!important;
width:100%!important;
max-width:100%!important;
min-height:0!important;
padding:0!important;
align-items:start!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-column{
display:flex!important;
flex-direction:column!important;
gap:9px!important;
min-width:0!important;
min-height:0!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-column > *{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
align-self:stretch!important;
height:auto!important;
min-height:0!important;
grid-area:auto!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step,
body[data-modal-type="shift"].modal-open #modalHost .ww527-setting-card,
body[data-modal-type="shift"].modal-open #modalHost .ww515-more-settings{
padding:9px 10px!important;
border-radius:14px!important;
background:#fffefb!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step-head{
margin:0 0 7px!important;
padding-bottom:6px!important;
gap:8px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step-number{
width:24px!important;
height:24px!important;
flex:0 0 24px!important;
border-radius:8px!important;
font-size:10px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step-head strong{
font-size:13px!important;
line-height:1.1!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step-head small{
font-size:8.6px!important;
line-height:1.15!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-admin-badge{
padding:4px 7px!important;
font-size:7.2px!important;
}
/* Client */
body[data-modal-type="shift"].modal-open #modalHost .ww515-client-step>.client-search-panel{
display:flex!important;
flex-direction:column!important;
gap:6px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-client-step .client-search-box{
height:39px!important;
min-height:39px!important;
border-radius:10px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-client-step .client-search-box input{
font-size:13px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-client-step .add-client-block{margin-top:0!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-client-step .add-client-toggle{
height:32px!important;
min-height:32px!important;
padding:0 10px!important;
border-radius:9px!important;
font-size:11px!important;
}
/* Schedule */
body[data-modal-type="shift"].modal-open #modalHost .ww515-date-start-grid{gap:7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-date-start-grid label{
font-size:8.7px!important;
margin-bottom:3px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-date-start-grid .input,
body[data-modal-type="shift"].modal-open #modalHost .ww515-date-start-grid .time-select{
height:37px!important;
min-height:37px!important;
border-radius:9px!important;
font-size:12.5px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-finish-line{
margin-top:6px!important;
padding:6px 8px!important;
border-radius:9px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-finish-line>span{font-size:8.7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-finish-line strong{font-size:11.5px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-finish-line small{font-size:7.7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-schedule-step>.ww517-visibility{
margin-top:6px!important;
padding:7px 8px!important;
border-radius:10px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .visibility-title{margin-bottom:5px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-state-pill{min-height:20px!important;font-size:7.5px!important;padding:0 7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-toggle{gap:6px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-opt{
padding:6px 7px!important;
min-height:40px!important;
border-radius:9px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-opt-copy strong{font-size:10.5px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-hint{font-size:8px!important;margin-top:4px!important}
/* Hours/team — stacked, dense, and gap-free inside the left column. */
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step{
display:flex!important;
flex-direction:column!important;
gap:5px!important;
height:auto!important;
min-height:0!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step>.ww515-step-head{margin-bottom:0!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-row,
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-help,
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step>.emp-field,
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step>.ww515-staff-details,
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step>.ww515-empty-team,
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step>.ww517-single-staff{
width:100%!important;
max-width:100%!important;
min-width:0!important;
min-height:0!important;
height:auto!important;
margin:0!important;
grid-area:auto!important;
align-self:stretch!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-row{
min-height:45px!important;
padding:6px 7px!important;
border-radius:10px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-icon{
width:28px!important;height:28px!important;border-radius:8px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-copy strong{font-size:11px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-copy small{font-size:7.7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-editor{
min-width:80px!important;
padding:5px 6px!important;
border-radius:9px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-editor input{
width:45px!important;
font-size:15px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-editor span{font-size:7.5px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-help{
margin:0 1px!important;
gap:0 5px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-help span{font-size:7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-help strong{font-size:9px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-help small{font-size:7.5px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step>.emp-field{
padding:0!important;
border:0!important;
box-shadow:none!important;
background:transparent!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step .shift-section-label{
margin:0 0 3px!important;
font-size:10px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step .emp-count-badge{font-size:7.5px!important;padding:3px 6px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step .emp-collapsed{
min-height:41px!important;
padding:5px 7px!important;
border-radius:9px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step .emp-collapsed-ic{width:29px!important;height:29px!important;border-radius:8px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step .emp-collapsed-copy strong{font-size:10.5px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step .emp-collapsed-copy small{font-size:7.7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-staff-details,
body[data-modal-type="shift"].modal-open #modalHost .ww515-empty-team{
padding-top:0!important;
border-top:0!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-staff-details>summary{
min-height:39px!important;
padding:0!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-summary-icon{width:27px!important;height:27px!important;border-radius:8px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-summary-copy strong{font-size:10.5px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww515-summary-copy small{font-size:7.7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww517-single-staff{
padding:6px 7px!important;
border-radius:10px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-single-head{min-height:27px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww517-single-row{min-height:35px!important;padding:4px 6px!important;border-radius:8px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww517-single-staff p{margin-top:3px!important;font-size:7px!important}
/* Bottom settings */
body[data-modal-type="shift"].modal-open #modalHost .ww527-setting-card{
padding:8px 9px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww527-setting-head{margin-bottom:6px!important;padding-bottom:5px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww527-setting-copy strong{font-size:11.5px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww527-setting-copy small{font-size:7.7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww527-field>span{font-size:8px!important;margin-bottom:3px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww527-repeat-card .input{
height:34px!important;min-height:34px!important;border-radius:8px!important;font-size:10.5px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww527-colour-card .shift-colour-head{
min-height:40px!important;
padding:6px 8px!important;
border-radius:9px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww527-colour-current b{font-size:7px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww527-colour-current small{font-size:9px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww527-colour-action{font-size:10px!important}
body[data-modal-type="shift"].modal-open #modalHost .ww527-notes-card .notes-textarea{
height:68px!important;
min-height:68px!important;
max-height:68px!important;
resize:none!important;
font-size:10.5px!important;
padding:8px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-foot .sft-btn{
height:38px!important;
border-radius:10px!important;
font-size:11.5px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-foot .sft-cancel{width:112px!important}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-foot .sft-save{width:206px!important}
}
/* Very short desktop windows keep the exact layout but scroll inside the modal instead of clipping anything. */
@media (min-width:1024px) and (max-height:760px){
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-body{
overflow-y:auto!important;
overscroll-behavior:contain!important;
}
}
@media (min-width:1024px){
body[data-modal-type="shift"].modal-open #modalHost .shift-modal{
display:block!important;
height:auto!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-body{
display:block!important;
height:auto!important;
max-height:calc(100dvh - 114px)!important;
flex:none!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-foot{
display:flex!important;
}
}
/* ---- app-polish-v636.css ---- */
/* EarthRoster v636 — desktop New/Edit roster job: tall, slim, edge-filling split layout.
Keep the v635 two-column information design, but make the desktop editor feel
anchored to the viewport instead of floating in the middle. */
@media (min-width:1024px){
body[data-modal-type="shift"].modal-open #modalHost .modal-overlay{
padding:5px!important;
align-items:center!important;
justify-content:center!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal{
width:min(90vw,900px)!important;
max-width:900px!important;
height:min(calc(100dvh - 10px),920px)!important;
max-height:min(calc(100dvh - 10px),920px)!important;
min-height:min(calc(100dvh - 10px),720px)!important;
display:flex!important;
flex-direction:column!important;
border-radius:20px!important;
overflow:hidden!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-head{
flex:0 0 54px!important;
min-height:54px!important;
padding:10px 15px 8px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-head h2{
font-size:20px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-x{
width:34px!important;
height:34px!important;
border-radius:10px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-body{
flex:1 1 auto!important;
height:auto!important;
max-height:none!important;
min-height:0!important;
display:block!important;
padding:8px 10px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
scrollbar-gutter:stable!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-foot{
flex:0 0 50px!important;
min-height:50px!important;
padding:6px 10px 7px!important;
margin:0!important;
}
/* Preserve the v635 independent split columns, just make them a little narrower and tighter. */
body[data-modal-type="shift"].modal-open #modalHost .ww635-one-screen-grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px!important;
height:auto!important;
min-height:0!important;
align-items:start!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-column{
gap:7px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step,
body[data-modal-type="shift"].modal-open #modalHost .ww527-setting-card{
padding:8px 9px!important;
border-radius:13px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step-head{
margin-bottom:6px!important;
padding-bottom:5px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step-head strong{
font-size:12.5px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step-head small{
font-size:8.3px!important;
}
/* Keep the left/right content compact enough to remain one-screen at laptop height. */
body[data-modal-type="shift"].modal-open #modalHost .ww515-client-step .client-search-box{
height:37px!important;
min-height:37px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-client-step .add-client-toggle{
height:30px!important;
min-height:30px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-date-start-grid .input,
body[data-modal-type="shift"].modal-open #modalHost .ww515-date-start-grid .time-select{
height:35px!important;
min-height:35px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-finish-line{
margin-top:5px!important;
padding:5px 7px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-schedule-step>.ww517-visibility{
margin-top:5px!important;
padding:6px 7px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-opt{
min-height:37px!important;
padding:5px 6px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step{
gap:4px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-row{
min-height:42px!important;
padding:5px 6px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step .emp-collapsed{
min-height:38px!important;
padding:4px 6px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-single-staff{
padding:5px 6px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-single-row{
min-height:33px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww527-repeat-card .input{
height:32px!important;
min-height:32px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww527-colour-card .shift-colour-head{
min-height:37px!important;
padding:5px 7px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww527-notes-card .notes-textarea{
height:62px!important;
min-height:62px!important;
max-height:62px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-foot .sft-btn{
height:36px!important;
}
}
/* On shorter laptop displays, use practically the whole screen height while keeping a safe internal scroll fallback. */
@media (min-width:1024px) and (max-height:800px){
body[data-modal-type="shift"].modal-open #modalHost .shift-modal{
height:calc(100dvh - 8px)!important;
max-height:calc(100dvh - 8px)!important;
min-height:0!important;
border-radius:16px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .modal-overlay{
padding:4px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-head{
flex-basis:50px!important;
min-height:50px!important;
padding-top:8px!important;
padding-bottom:7px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .shift-modal .modal-foot{
flex-basis:46px!important;
min-height:46px!important;
padding-top:5px!important;
padding-bottom:5px!important;
}
}
/* Final v636 fill pass: use the full desktop height without reintroducing a wide modal.
The two independent columns stretch to use the available vertical canvas instead
of leaving one large blank area under the form. */
@media (min-width:1024px){
body[data-modal-type="shift"].modal-open #modalHost .shift-modal{
height:calc(100dvh - 10px)!important;
max-height:calc(100dvh - 10px)!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-one-screen-grid{
height:100%!important;
min-height:100%!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-column{
height:100%!important;
min-height:0!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-column-left .ww515-hours-team-step{
flex:1 1 auto!important;
justify-content:flex-start!important;
row-gap:8px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-column-right .ww527-notes-card{
flex:1 1 auto!important;
display:flex!important;
flex-direction:column!important;
min-height:0!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-column-right .ww527-notes-card .ww527-notes-field{
flex:1 1 auto!important;
display:flex!important;
flex-direction:column!important;
min-height:0!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-column-right .ww527-notes-card .notes-textarea{
flex:1 1 auto!important;
height:auto!important;
min-height:72px!important;
max-height:none!important;
resize:none!important;
}
}
/* Readability/balance pass: use the extra vertical room for real controls rather than dead space. */
@media (min-width:1024px){
body[data-modal-type="shift"].modal-open #modalHost .ww515-step,
body[data-modal-type="shift"].modal-open #modalHost .ww527-setting-card{
padding:10px 10px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww635-column{
gap:9px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-step-head{
margin-bottom:7px!important;
padding-bottom:6px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-client-step .client-search-box{
height:40px!important;
min-height:40px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-client-step .add-client-toggle{
height:33px!important;
min-height:33px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-date-start-grid .input,
body[data-modal-type="shift"].modal-open #modalHost .ww515-date-start-grid .time-select{
height:38px!important;
min-height:38px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-invoice-row{
min-height:46px!important;
padding:6px 7px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step{
row-gap:7px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww515-hours-team-step .emp-collapsed{
min-height:42px!important;
padding:5px 7px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-single-staff{
padding:7px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-single-row{
min-height:36px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww527-repeat-card .input{
height:35px!important;
min-height:35px!important;
}
}
/* ---- app-polish-v638.css ---- */
/* EarthRoster v638 — restore v636 tall split desktop roster editor and refine only publishing controls.
The v636 two-column one-screen layout stays intact. These rules make Unpublished/Published
noticeably slimmer and more restrained without shrinking the rest of the form. */
@media (min-width:1024px){
body[data-modal-type="shift"].modal-open #modalHost .ww515-schedule-step>.ww517-visibility{
margin-top:5px!important;
padding:6px 7px 7px!important;
border-radius:12px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .panel-title{
margin-bottom:5px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-state-pill{
padding:3px 7px!important;
font-size:7.5px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-toggle{
gap:6px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-opt{
min-height:32px!important;
height:32px!important;
padding:3px 7px!important;
border-radius:9px!important;
gap:5px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-opt-icon{
width:16px!important;
height:16px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-opt-copy{
gap:0!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-opt-copy strong{
font-size:9.8px!important;
line-height:1.05!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-opt-copy small{
font-size:7px!important;
line-height:1.05!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-opt-check{
right:5px!important;
width:14px!important;
height:14px!important;
font-size:8px!important;
}
body[data-modal-type="shift"].modal-open #modalHost .ww517-visibility .vis-hint{
margin-top:5px!important;
font-size:8px!important;
}
}
/* ---- app-polish-v640.css ---- */
/* EarthRoster v640 — Professional Messages cleanup.
Scope: open mobile chat conversations only. Functionality unchanged. */
@media (max-width:1023px){
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-scroll{
padding:10px 10px 14px!important;
gap:0!important;
background:linear-gradient(180deg,#0c151b 0%,#091217 100%)!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-date-separator{
margin:5px 0 10px!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-date-separator span{
min-height:24px!important;
padding:3px 10px!important;
border-radius:12px!important;
background:#202c33!important;
border:1px solid rgba(255,255,255,.065)!important;
color:rgba(242,246,247,.86)!important;
font-size:10px!important;
line-height:16px!important;
font-weight:750!important;
box-shadow:none!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg{
width:100%!important;
max-width:100%!important;
margin:0!important;
gap:6px!important;
align-items:flex-end!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg.group-start{margin-top:6px!important}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg.group-continuation{margin-top:2px!important}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg.mine{justify-content:flex-end!important}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg:not(.mine){justify-content:flex-start!important}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg-av{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
height:28px!important;
flex:0 0 28px!important;
padding:0 0 1px!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg-av .avatar{
width:26px!important;
height:26px!important;
min-width:26px!important;
border-radius:50%!important;
font-size:9.5px!important;
line-height:1!important;
border:1px solid rgba(255,255,255,.18)!important;
box-shadow:0 2px 6px rgba(0,0,0,.18)!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .bubble,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg.mine .bubble,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg:not(.mine) .bubble{
width:fit-content!important;
min-width:0!important;
max-width:min(78%,340px)!important;
padding:8px 11px 7px!important;
border-radius:15px!important;
box-shadow:0 2px 7px rgba(0,0,0,.12)!important;
backdrop-filter:none!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg:not(.mine) .bubble{
align-items:flex-start!important;
background:linear-gradient(180deg,#1e2930 0%,#1a242b 100%)!important;
border:1px solid rgba(164,187,199,.10)!important;
border-bottom-left-radius:5px!important;
color:#f2f5f6!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg.mine .bubble{
align-items:flex-end!important;
background:linear-gradient(145deg,#3f774c 0%,#32623f 100%)!important;
border:1px solid rgba(190,224,194,.12)!important;
border-bottom-right-radius:5px!important;
color:#fff!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .b-author{
margin:0 0 3px!important;
color:#76bd7b!important;
font-size:10.5px!important;
line-height:1.05!important;
font-weight:800!important;
letter-spacing:.005em!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .b-text{
width:auto!important;
max-width:100%!important;
margin:0!important;
font-size:13.5px!important;
line-height:1.34!important;
font-weight:480!important;
letter-spacing:0!important;
white-space:pre-wrap!important;
word-break:normal!important;
overflow-wrap:anywhere!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .b-meta{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
align-self:stretch!important;
min-width:0!important;
margin-top:4px!important;
gap:5px!important;
line-height:1!important;
flex-wrap:nowrap!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .b-meta time,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg-status,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .status-word{
margin:0!important;
padding:0!important;
font-size:9.25px!important;
line-height:1!important;
font-weight:650!important;
white-space:nowrap!important;
opacity:.70!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg.mine .b-meta time,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg.mine .msg-status,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg.mine .status-word{
color:rgba(241,249,242,.80)!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer{
grid-template-columns:44px minmax(0,1fr) 44px!important;
column-gap:8px!important;
row-gap:7px!important;
min-height:60px!important;
padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))!important;
background:rgba(13,23,29,.98)!important;
border-top:1px solid rgba(255,255,255,.065)!important;
box-shadow:0 -8px 22px rgba(0,0,0,.12)!important;
}
html body.ww-chat-active.chat-thread-open.ww370-chat-keyboard-open .chat-shell .chat-thread .chat-composer{
padding-bottom:8px!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer textarea.chat-editbox,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread #chatInput.chat-editbox{
height:44px!important;
min-height:44px!important;
max-height:min(116px,30vh)!important;
padding:10px 14px!important;
border:1px solid rgba(170,188,198,.15)!important;
border-radius:22px!important;
background:#1a252c!important;
color:#f5f7f7!important;
caret-color:#79bc73!important;
font-size:16px!important;
font-weight:475!important;
line-height:1.4!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer textarea.chat-editbox:focus,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread #chatInput.chat-editbox:focus{
border-color:rgba(108,166,106,.58)!important;
box-shadow:0 0 0 3px rgba(91,143,89,.10)!important;
outline:none!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer textarea.chat-editbox::placeholder,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread #chatInput.chat-editbox::placeholder{
color:rgba(225,232,235,.45)!important;
opacity:1!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer .cattach,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer .csend{
width:44px!important;
min-width:44px!important;
height:44px!important;
min-height:44px!important;
border-radius:22px!important;
margin:0!important;
box-shadow:none!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer .cattach{
background:#182329!important;
border:1px solid rgba(170,188,198,.14)!important;
color:#dce5e6!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer .cattach:active{
background:#202d34!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer .csend{
background:linear-gradient(145deg,#4e8c59 0%,#376f45 100%)!important;
border:1px solid rgba(220,240,222,.14)!important;
color:#fff!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer .csend:active{
transform:scale(.97)!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer .cattach svg,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .chat-composer .csend svg{
width:20px!important;
height:20px!important;
}
}
@media(max-width:390px){
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .bubble,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg.mine .bubble,
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .msg:not(.mine) .bubble{
max-width:min(80%,300px)!important;
}
html body.ww-chat-active.chat-thread-open .chat-shell .chat-thread .b-text{font-size:13px!important}
}
/* ---- inline style 36 ---- */
/* Hide the app until deferred CSS patches have applied, then fade in once —
see ww236RevealApp in app.js for why. */
#app{opacity:0}
body.ww-app-visible #app{opacity:1;transition:opacity .18s ease}
/* Desktop browsers must never be covered by the mobile/PWA launch reveal.
Show the rendered workspace immediately and neutralise any stale overlay. */
@media (min-width:1024px) and (pointer:fine){
#app{opacity:1!important;transition:none!important}
.ww-login-reveal,#wwLoginReveal{display:none!important;visibility:hidden!important;pointer-events:none!important}
body.ww-login-reveal-open{overflow:auto!important;touch-action:auto!important}
}
/* ---- inline style 37 ---- */
.ww520-geofence-overlay{
position:fixed!important;inset:0!important;z-index:2147483000!important;
display:flex!important;align-items:center!important;justify-content:center!important;
padding:20px!important;background:rgba(12,31,22,.42)!important;
backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important;
}
.ww520-geofence-modal{
position:relative!important;width:min(100%,340px)!important;max-height:min(72dvh,460px)!important;
overflow:auto!important;margin:0!important;padding:17px!important;
border:1px solid rgba(31,91,54,.16)!important;border-radius:20px!important;
background:#fffdf9!important;box-shadow:0 22px 55px rgba(7,28,18,.24)!important;
text-align:left!important;animation:ww520GeoIn .18s cubic-bezier(.2,.8,.2,1) both!important;
}
.ww520-geo-close{
position:absolute!important;top:11px!important;right:11px!important;width:32px!important;height:32px!important;
border:1px solid #e3e8e3!important;border-radius:10px!important;background:#f7f8f5!important;color:#617067!important;
font-size:21px!important;line-height:1!important;display:grid!important;place-items:center!important;
}
.ww520-geo-heading{display:flex!important;align-items:center!important;gap:10px!important;padding-right:34px!important;}
.ww520-geo-icon{
flex:0 0 auto!important;width:40px!important;height:40px!important;border-radius:13px!important;
display:grid!important;place-items:center!important;background:#eaf3e9!important;color:#2d7044!important;
box-shadow:inset 0 0 0 1px #d5e6d4!important;
}
.ww520-geo-icon svg{width:20px!important;height:20px!important;stroke-width:2.15!important;}
.ww520-geo-eyebrow{margin:0 0 3px!important;color:#587064!important;font-size:11px!important;font-weight:850!important;letter-spacing:.07em!important;text-transform:uppercase!important;}
.ww520-geofence-modal h2{margin:0!important;color:#193426!important;font-family:inherit!important;font-size:18px!important;line-height:1.18!important;letter-spacing:-.02em!important;}
.ww520-geo-message{margin:13px 0 10px!important;color:#526158!important;font-size:14px!important;line-height:1.5!important;}
.ww520-geo-message strong{color:#213b2d!important;font-weight:850!important;}
.ww520-geo-range{
display:flex!important;align-items:flex-start!important;gap:8px!important;padding:10px 11px!important;
border:1px solid #d9e7d8!important;border-radius:13px!important;background:#f1f7ef!important;
color:#345342!important;font-size:13px!important;line-height:1.45!important;
}
.ww520-geo-range-icon{
flex:0 0 auto!important;width:20px!important;height:20px!important;border-radius:999px!important;
display:grid!important;place-items:center!important;background:#dbeada!important;color:#24613a!important;
}
.ww520-geo-range-icon svg{width:13px!important;height:13px!important;stroke-width:2.6!important;}
.ww520-geo-help{margin:9px 2px 0!important;color:#748078!important;font-size:12px!important;line-height:1.45!important;}
.ww520-geo-help strong{color:#506158!important;font-weight:800!important;}
.ww520-geo-actions{display:flex!important;justify-content:flex-end!important;margin-top:12px!important;}
.ww520-geo-button{
min-width:96px!important;min-height:42px!important;padding:0 18px!important;border:0!important;border-radius:12px!important;
background:linear-gradient(135deg,#438c56,#24643b)!important;color:#fff!important;
box-shadow:0 8px 18px rgba(32,99,58,.18)!important;font-size:13.5px!important;font-weight:850!important;
}
@keyframes ww520GeoIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:390px){
.ww520-geofence-overlay{padding:16px!important;align-items:center!important;}
.ww520-geofence-modal{width:min(100%,328px)!important;padding:16px!important;border-radius:19px!important;}
.ww520-geofence-modal h2{font-size:17.5px!important;}
.ww520-geo-message{font-size:13.5px!important;}
}
@media(prefers-reduced-motion:reduce){.ww520-geofence-modal{animation:none!important;}}
/* ---- inline style 38 ---- */
/* FINAL STRUCTURAL FIX FOR iPHONE HOME SCREEN BOTTOM STRIP */
@media (max-width:1023px){
:root{
/* v448: --safe-b must reflect the REAL iOS inset. Forcing it to 0 made the
installed (Home Screen) app mis-size the bottom bar on first load. */
--safe-b:env(safe-area-inset-bottom, 0px)!important;
--ww-kate-dock-h:64px!important;
--ww-kate-dock-inner-h:48px!important;
--ww-kate-dock-bg:#102719!important;
--ww-kate-page-bg:#e6f0e3!important;
}
html,body{
margin:0!important;padding:0!important;width:100%!important;min-width:100%!important;min-height:100%!important;
background:var(--ww-kate-page-bg)!important;background-color:var(--ww-kate-page-bg)!important;overflow-x:hidden!important;
}
#app,.shell,.main{
background:var(--ww-kate-page-bg)!important;background-color:var(--ww-kate-page-bg)!important;min-height:100dvh!important;overflow-x:hidden!important;
}
.content,main.content{
background:var(--ww-kate-page-bg)!important;background-color:var(--ww-kate-page-bg)!important;
padding-bottom:calc(var(--ww-kate-dock-h) + 10px + env(safe-area-inset-bottom, 0px))!important;margin-bottom:0!important;overflow-x:hidden!important;
}
.content > .page,main.content > .page{padding-bottom:0!important;margin-bottom:0!important;}
.dock-inner{all:unset!important;box-sizing:border-box!important;width:100%!important;max-width:560px!important;height:var(--ww-kate-dock-inner-h)!important;min-height:var(--ww-kate-dock-inner-h)!important;max-height:var(--ww-kate-dock-inner-h)!important;margin:0 auto!important;padding:0!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:center!important;justify-items:center!important;gap:0!important;background:transparent!important;overflow:hidden!important;}
.dock-tab:active,.dock-tab.is-active{transform:none!important;opacity:1!important;background:transparent!important;}
.dock-ico{all:unset!important;box-sizing:border-box!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;flex:0 0 40px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.15)!important;color:rgba(226,238,220,.82)!important;margin:0!important;padding:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;}
.dock-ico svg,.dock-tab svg{width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important;max-width:19px!important;max-height:19px!important;display:block!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;fill:none!important;stroke:currentColor!important;stroke-width:2.1!important;}
.dock-lbl{all:unset!important;box-sizing:border-box!important;display:block!important;max-width:100%!important;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif!important;font-size:9.4px!important;line-height:1.08!important;font-weight:800!important;letter-spacing:.003em!important;text-align:center!important;color:rgba(226,238,220,.78)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;}
.dock-tab.is-active .dock-ico{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;flex-basis:44px!important;background:linear-gradient(180deg,#fffdf4 0%,#eef5e8 100%)!important;color:#1f3f28!important;border-color:rgba(255,255,255,.72)!important;box-shadow:0 7px 16px rgba(6,20,10,.36),inset 0 1px 0 rgba(255,255,255,.95)!important;}
.dock-tab.is-active .dock-lbl{color:#ffffff!important;font-weight:900!important;}
.dock-tab.is-active::after{display:none!important;content:none!important;}
.toast{bottom:calc(var(--ww-kate-dock-h) + 10px)!important;}
body.chat-thread-open .dock{display:flex!important;}
body.modal-open .dock{display:none!important;}
body.chat-thread-open::after{display:block!important;}
}
@media (max-width:380px){
:root{--ww-kate-dock-h:54px!important;--ww-kate-dock-inner-h:48px!important;}
.dock-ico{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important;flex-basis:38px!important;}
.dock-tab.is-active .dock-ico{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;flex-basis:42px!important;}
.dock-lbl{font-size:8.8px!important;}
}
/* NORMAL BOTTOM MENU: compact bar flush to the very bottom edge.
No dark void below the icons. Modals/dialogs cover it normally. */
@media (max-width:768px){
:root{
--safe-b: env(safe-area-inset-bottom, 0px) !important;
--ww-kate-dock-h: 64px !important; /* visible bar (icons+labels) */
--ww-kate-dock-inner-h: 56px !important;
}
.dock-inner{
height:50px!important;min-height:50px!important;max-height:50px!important;
align-items:center!important;
}
/* In a chat conversation, hide the bottom menu so the composer sits at the
very bottom (standard messaging pattern). Back arrow returns to the list. */
body.chat-thread-open .dock{display:none!important;}
body.chat-thread-open::after{display:none!important;}
}
/* =========================================================================
FRESH MOBILE MENU — rebuilt from scratch (replaces the old .dock system)
========================================================================= */
@media (max-width:1023px){
/* Very narrow phones (iPhone SE 1st gen, small Androids ~320px): six labels
don't fit at the standard size, so step the type down slightly rather than
letting "Dashboard" and "Messages" truncate. */
@media (max-width:360px){
}
/* page clears the bar */
.content,main.content{
padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))!important;
}
body.chat-thread-open::after,
body.modal-open::after{display:none!important}
}
/* hide on desktop (sidebar is used there) */
@media (min-width:1024px){ }
/* ===== Native-app feel: tap highlight + momentum + universal press feedback ===== */
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none} /* stop rubber-band on the whole page */
/* momentum scroll everywhere that scrolls */
.content,.chat-scroll,.cv-threads,.modal-scroll,.modal-body{-webkit-overflow-scrolling:touch}
/* gentle press feedback on anything tappable that doesn't already define one */
button:not(:disabled):active,
[data-action]:active,
.card:active,
a[role="button"]:active{
transform:scale(.97);
transition:transform .06s ease;
}
@media (prefers-reduced-motion:reduce){
button:active,[data-action]:active,.card:active{transform:none}
}
/* =========================================================================
Freeze the Messages search bar + heading at the top while the chat list
scrolls beneath it (same idea as the frozen page header).
========================================================================= */
@media (max-width:1023px){
.cv-list{position:relative}
.cv-head,
.cv-search{
position:sticky!important;
z-index:20!important;
/* frosted backing so list rows don't show through while scrolling */
background:rgba(233,240,228,.96)!important;
-webkit-backdrop-filter:blur(10px)!important;
backdrop-filter:blur(10px)!important;
}
.cv-head{ top:0!important; padding-top:8px!important; }
/* search sits directly below the head; offset by the head's height */
.cv-search{ top:42px!important; margin-bottom:10px!important; }
/* a little breathing room so the first row isn't tight under the search */
.cv-threads{ padding-top:4px!important; }
}
/* ---- inline style 39 ---- */
/* V106 desktop performance patch: desktop only. Removes page fades/transitions
and disables heavy animated paint effects so page changes feel instant. */
@media (min-width:1024px){
html,body,#app,.shell,.main,.content{scroll-behavior:auto!important;}
*,*::before,*::after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important;
}
.page,.page *,
.modal-overlay,.modal,.modal *{
animation:none!important;
transition:none!important;
}
.page{opacity:1!important;transform:none!important;will-change:auto!important;}
.modal-overlay{opacity:1!important;}
.modal{transform:none!important;}
.icon-btn,.topbar,.modal,.card,.panel,.wk-col,.wk-shift,.emp-shift,
.directory-card,
.mobile-nav,.dock,.toast,.btn,.nav-item{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
filter:none!important;
will-change:auto!important;
}
.ring-fg{transition:none!important;}
.live-dot,.presence-dot,.dot,.pulse{animation:none!important;}
}
/* ---- inline style 40 ---- */
/* V107: requested fixes only — show roster staff names, hide inline chat row action buttons, keep chat options on press-and-hold / swipe. */
.rgc-staff{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:10px;font-weight:800;color:rgba(255,255,255,.94);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rgc-staff svg{width:12px;height:12px;stroke-width:2.3;flex:0 0 12px}
.rc-meta{display:block!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}.rc-meta .rc-staff-line{display:block;margin-top:2px;font-weight:850;color:rgba(255,255,255,.94);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1024px){.rc-meta .rc-staff-line{color:#405643}.home-roster-list .rc-meta .rc-staff-line{color:#405643}}
.cv-row .cv-readtoggle,.cv-row .cv-mini-action{display:none!important;visibility:hidden!important;width:0!important;height:0!important;margin:0!important;padding:0!important;pointer-events:none!important}
.cv-row{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cv-row.ww-swipe-peek{transition:transform .12s ease!important}
/* ---- v113 chat action sheet: simplified, professional press-and-hold menu ---- */
.ca-sheet{display:block}
.ca-head{
display:flex;align-items:center;gap:12px;
padding:2px 2px 16px;margin-bottom:14px;
border-bottom:1px solid rgba(42,70,42,.10);
}
.ca-head-av .avatar{width:42px;height:42px;border-radius:14px;flex:0 0 42px}
.ca-head-text{display:flex;flex-direction:column;min-width:0;gap:2px}
.ca-head-name{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:700;color:#1b2e1f;line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-head-sub{font-size:12.5px;color:#76817a;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-actions{display:flex;flex-direction:column;gap:8px}
.ca-row{
display:flex;align-items:center;gap:13px;width:100%;text-align:left;
padding:11px 12px;border-radius:14px;
background:#fbfaf4;border:1px solid rgba(42,70,42,.09);
color:#1f3324;cursor:pointer;
transition:background .12s ease,border-color .12s ease,transform .06s ease;
}
.ca-row:active{transform:scale(.985);background:#f3f1e7}
.ca-ic{
flex:0 0 38px;width:38px;height:38px;border-radius:11px;
display:grid;place-items:center;
background:#eef2e8;color:#39613f;
}
.ca-ic svg{width:19px;height:19px;stroke-width:2}
.ca-ic-read{background:#e9f1ea;color:#33683f}
.ca-ic-archive{background:#eef0f3;color:#4a5566}
.ca-ic-danger{background:#fcecea;color:#b23b30}
.ca-txt{display:flex;flex-direction:column;min-width:0;gap:1px}
.ca-label{font-size:15px;font-weight:750;line-height:1.25;color:#1f3324}
.ca-desc{font-size:12px;font-weight:500;color:#7c867d;line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-row-danger{background:#fdf4f3;border-color:rgba(178,59,48,.16)}
.ca-row-danger:active{background:#fbe9e7}
.ca-row-danger .ca-label{color:#a8392f}
.ca-row-danger .ca-desc{color:#b07d77}
.ca-cancel{width:100%;font-weight:750}
/* For the chat action sheet only: hide the empty default title bar and tighten
the body/footer so the sheet reads as a clean, compact action menu. */
body[data-modal-type="chat-actions"] .modal-head{display:none}
body[data-modal-type="chat-actions"] .modal-body{padding-top:20px}
body[data-modal-type="chat-actions"] .modal-foot{padding-top:14px}
body[data-modal-type="chat-actions"] .modal{max-width:420px}
/* ---- inline style 41 ---- */
/* V109 — stability/performance pass.
Keeps existing design/data. Staff names stay visible on MOBILE roster cards only. */
html,body,#app,.shell,.main,.content{scroll-behavior:auto!important;overscroll-behavior-y:contain!important;}
.page{animation:none!important;opacity:1!important;transform:none!important;will-change:auto!important;}
.page,.modal,.modal-overlay,.sheet,.drawer,.toast,.rcard,.rgc,.cv-row,.nav-item,.mobile-nav,.fresh-mobile-menu,.btn,.icon-btn{transition:none!important;animation:none!important;}
.live-dot,.presence-dot,.dot,.pulse,.ring-fg{animation:none!important;transition:none!important;}
@media (min-width:1024px){
/* Employee names on roster cards are for mobile only. Keep desktop grid clean. */
.rc-meta .rc-staff-line,
.home-roster-list .rc-meta .rc-staff-line,
.rgc-staff{display:none!important;visibility:hidden!important;height:0!important;max-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}
.rc-meta{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.content,.page,.roster-page,.week-grid,.wk-grid,.dashboard-grid{contain:layout paint!important;}
.modal,.panel,.card,.shift-card,.wk-shift,.rgc,.rcard,.cv-row{will-change:auto!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}
@media (max-width:1023px){
/* Mobile keeps assigned staff names on shift cards. */
.rgc-staff{display:flex!important;align-items:center!important;}
.rc-meta .rc-staff-line{display:block!important;}
.content{-webkit-overflow-scrolling:touch!important;}
}
/* ---- inline style 42 ---- */
@media (min-width:1024px){
.rc-meta .rc-staff-line,.home-roster-list .rc-meta .rc-staff-line,.rgc-staff{display:none!important;visibility:hidden!important;height:0!important;max-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
}
@media (max-width:1023px){
.rgc-staff{display:inline-flex!important;align-items:center!important;gap:8px!important;margin-top:7px!important;padding:4px 11px 4px 4px!important;border-radius:999px!important;background:#173b23!important;background:color-mix(in srgb, var(--accent-deep,#163f24) 88%, #000 12%)!important;color:#fff!important;border:1px solid rgba(255,255,255,.20)!important;box-shadow:0 4px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16)!important;font-size:12.6px!important;font-weight:900!important;line-height:1.1!important;letter-spacing:-.005em!important;width:auto!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.rgc-staff-kicker{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:21px!important;padding:0 9px!important;border-radius:999px!important;background:#7fb56a!important;color:#10240f!important;font-size:9.6px!important;font-weight:900!important;letter-spacing:.09em!important;flex:0 0 auto!important;text-shadow:none!important;box-shadow:0 1px 2px rgba(0,0,0,.18)!important}
.rgc-staff-names{display:inline-flex!important;align-items:center!important;line-height:1!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#ffffff!important;font-weight:900!important}
.rc-meta .rc-staff-line{display:inline-flex!important;align-items:center!important;gap:7px!important;margin-top:5px!important;padding:3px 11px 3px 4px!important;border-radius:999px!important;background:#173b23!important;background:color-mix(in srgb, var(--deep,#163f24) 88%, #000 12%)!important;color:#fff!important;border:1px solid rgba(255,255,255,.20)!important;box-shadow:0 4px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16)!important;font-size:12.6px!important;font-weight:900!important;line-height:1.15!important;width:fit-content!important;max-width:100%!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
.rc-meta .rc-staff-line .rc-staff-kicker{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:20px!important;padding:0 9px!important;border-radius:999px!important;background:#7fb56a!important;color:#10240f!important;font-size:9.4px!important;font-weight:900!important;letter-spacing:.09em!important;flex:0 0 auto!important;text-shadow:none!important;box-shadow:0 1px 2px rgba(0,0,0,.2)!important}
.rc-meta .rc-staff-line .rc-staff-names{display:inline-flex!important;align-items:center!important;line-height:1!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;flex:0 0 auto!important;color:#ffffff!important;font-weight:900!important}
.cv-row .cv-readtoggle,.cv-row .cv-mini-action{display:none!important;visibility:hidden!important;width:0!important;height:0!important;margin:0!important;padding:0!important;pointer-events:none!important}
.chat-scroll{contain:none!important;will-change:auto!important}
}
/* ---- inline style 43 ---- */
/* V110 — chat composer placeholder (contenteditable div needs :empty:before,
not ::placeholder), plus roster name bars that hug the name length. */
/* Chat input is a contenteditable DIV, so show the placeholder this way. */
.chat-composer .chat-editbox:empty:before,
#chatInput.chat-editbox:empty:before{
content:attr(data-placeholder);
color:rgba(70,90,70,.5);
pointer-events:none;
}
body.chat-thread-open .chat-composer .chat-editbox:empty:before,
body.chat-thread-open #chatInput.chat-editbox:empty:before{
color:rgba(255,255,255,.6);
}
.chat-composer .chat-editbox{
display:block;flex:1;min-height:46px;max-height:132px;overflow-y:auto;
padding:12px 15px;line-height:1.35;font-size:15px;
white-space:pre-wrap;word-break:break-word;outline:none;cursor:text;
-webkit-user-modify:read-write-plaintext-only;
}
.chat-composer .chat-editbox:focus{border-color:rgba(58,93,59,.45)!important}
/* ---- Roster name bars: pill length matches the name(s), not the whole card ---- */
@media (max-width:1023px){
/* Make the bar shrink-wrap the name. inline-flex / inline-block size to content. */
.rgc-staff{display:inline-flex!important;width:auto!important;max-width:100%!important;font-size:12.8px!important}
.rc-meta .rc-staff-line{display:inline-flex!important;width:auto!important;max-width:100%!important;font-size:12.8px!important;border-radius:999px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
/* keep STAFF tag fixed; let the names shrink + ellipsis inside the pill so they never overlap */
.rc-meta .rc-staff-line .rc-staff-kicker{flex:0 0 auto!important}
.rc-meta .rc-staff-line .rc-staff-names{flex:0 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
/* STAFF on its own full-width row at the bottom: all names fit on one line */
.rc-main .rc-meta-full{flex:0 0 100%!important;width:100%!important;max-width:100%!important;order:99!important;margin-top:6px!important;display:block!important}
.rc-main .rc-meta-full .rc-staff-line{display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;width:100%!important;max-width:100%!important;background:none!important;gap:0!important}
.rc-main .rc-meta-full .rc-staff-line .rc-staff-kicker{grid-column:1!important;flex:0 0 auto!important;justify-self:start!important}
.rc-main .rc-meta-full .rc-staff-line .rc-staff-names{grid-column:2!important;text-align:center!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;padding:0 8px!important}
/* rc-meta wraps so the inline pill drops onto its own line and keeps hugging text */
.rc-meta{display:block!important;white-space:normal!important}
.rc-meta .rc-addr-line{display:block!important}
}
/* ---- inline style 44 ---- */
/* V111 — performance pass.
The two biggest costs on this app are (1) backdrop-filter blur, which the GPU
must recompute on every paint and scroll, and (2) hundreds of soft box-shadows
on list items that get rebuilt on each render. We strip the expensive bits on
desktop (where the user reported the worst lag) and trim them on mobile too,
while keeping the design essentially identical. */
/* ---- ALL SCREENS: blur is the single most expensive effect — drop it everywhere ---- */
*{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
@media (min-width:1024px){
/* No animations/transitions on structural elements during interaction = snappy taps. */
.page,.content,.card,.panel,.modal,.modal-overlay,.rcard,.rgc,.cv-row,.wk-cell,
.shift-card,.wk-shift,.stat-card,.doc-card,.nav-item,.dock,.btn,.icon-btn,
.emp-row,.client-row,.ts-row,.av-cell,.list-row{
transition:none!important;animation:none!important;will-change:auto!important;
}
/* Flatten the heaviest repeated shadows into a cheap 1px border-ish shadow.
Cards still read as cards, but paint cost drops dramatically on big lists. */
.rcard,.rgc,.cv-row,.stat-card,.doc-card,.emp-row,.client-row,.ts-row,.wk-cell,
.shift-card,.wk-shift,.list-row,.card{
box-shadow:0 1px 2px rgba(35,47,31,.06)!important;
}
/* Containment tells the browser a subtree's layout can't affect the rest,
so re-rendering one area doesn't force the whole page to recompute. We use
layout+style (not paint) on scroll containers so dropdowns/autocomplete that
overflow their box are never clipped. */
.content,.page,.roster-page,.week-grid,.wk-grid,.dashboard-grid,
.roster-mobile,.chat-shell,.cv-threads,.team-list,.client-list,.ts-list{
contain:layout style!important;
}
.rcard,.rgc,.cv-row,.stat-card,.doc-card,.wk-cell{contain:layout paint!important;}
/* Long scrolling lists: let the browser skip rendering off-screen rows. */
.cv-threads .cv-row,.team-list>*,.client-list>*,.roster-mobile .rcard,
.ts-list>*,.dashboard-grid>*{content-visibility:auto;contain-intrinsic-size:auto 72px;}
/* Smooth, GPU-light scrolling. */
.content,.chat-scroll,.cv-threads{scroll-behavior:auto!important;}
}
/* ---- MOBILE: lighten shadows a touch too, but keep more of the look ---- */
@media (max-width:1023px){
.rcard,.rgc,.cv-row,.stat-card,.doc-card{box-shadow:0 2px 6px rgba(35,47,31,.08)!important;}
.roster-mobile .rcard,.cv-threads .cv-row{content-visibility:auto;contain-intrinsic-size:auto 84px;}
}
/* ---- inline style 45 ---- */
/* V126 — make the roster week card skinny only. No data/menu/chat changes. */
.rst-hero.admin,
.rst-hero.staff{
padding:12px 14px 13px!important;
border-radius:18px!important;
margin-bottom:10px!important;
box-shadow:0 9px 22px rgba(14,34,20,.20)!important;
}
.rst-hero-top{gap:8px!important;align-items:center!important}
.rst-nav{
width:34px!important;height:34px!important;
border-radius:12px!important;
}
.rst-nav svg{width:16px!important;height:16px!important}
.rst-eyebrow{
font-size:9px!important;
letter-spacing:.13em!important;
margin-bottom:0!important;
line-height:1!important;
}
.rst-hero-label strong{
font-size:18px!important;
line-height:1.04!important;
letter-spacing:-.02em!important;
}
.rst-hero.admin .rst-hero-foot,
.rst-hero.staff .rst-hero-foot{
display:grid!important;
grid-template-columns:1fr 1fr 1.35fr!important;
align-items:stretch!important;
gap:7px!important;
margin-top:10px!important;
}
.rst-hero.admin .rst-hs,
.rst-hero.staff .rst-hs{
min-height:42px!important;
padding:6px 5px!important;
border-radius:12px!important;
border:1px solid rgba(255,255,255,.11)!important;
}
.rst-hero.admin .rst-hs:first-of-type,
.rst-hero.staff .rst-hs:first-of-type,
.rst-hero.admin .rst-hs:nth-of-type(2),
.rst-hero.staff .rst-hs:nth-of-type(2){
border-radius:12px!important;
border:1px solid rgba(255,255,255,.11)!important;
}
.rst-hero.admin .rst-hs:nth-of-type(2)::before,
.rst-hero.staff .rst-hs:nth-of-type(2)::before{content:none!important}
.rst-hero.admin .rst-hs strong,
.rst-hero.staff .rst-hs strong{
font-size:18px!important;
line-height:.95!important;
}
.rst-hero.admin .rst-hs em,
.rst-hero.staff .rst-hs em{
font-size:8px!important;
letter-spacing:.055em!important;
margin-top:1px!important;
}
.rst-hero.admin .rst-hero-add,
.rst-hero.staff .rst-hero-add{
order:0!important;
flex:initial!important;
width:auto!important;
min-height:42px!important;
height:42px!important;
padding:0 10px!important;
border-radius:13px!important;
font-size:13px!important;
gap:7px!important;
box-shadow:0 5px 13px rgba(8,24,12,.20),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.rst-hero.admin .rst-hero-add .rha-ic,
.rst-hero.staff .rst-hero-add .rha-ic{
width:24px!important;height:24px!important;
}
.rst-hero.admin .rst-hero-add svg,
.rst-hero.staff .rst-hero-add svg{
width:13px!important;height:13px!important;
}
@media (max-width:380px){
.rst-hero.admin,.rst-hero.staff{padding:11px 12px 12px!important;border-radius:17px!important}
.rst-hero-label strong{font-size:16.5px!important}
.rst-hero.admin .rst-hero-foot,.rst-hero.staff .rst-hero-foot{gap:5px!important;grid-template-columns:.82fr .82fr 1.25fr!important}
.rst-hero.admin .rst-hero-add,.rst-hero.staff .rst-hero-add{font-size:12px!important;padding:0 8px!important}
.rst-hero.admin .rst-hs strong,.rst-hero.staff .rst-hs strong{font-size:16px!important}
.rst-hero.admin .rst-hs em,.rst-hero.staff .rst-hs em{font-size:7.3px!important}
}
/* ---- inline style 46 ---- */
.modal-foot:has(.person-actionbar){display:block!important;padding:12px 14px calc(14px + var(--safe-b))!important;background:linear-gradient(180deg,#fffdf7,#f3efe6)!important;border-top:1px solid rgba(59,88,55,.13)!important}
.person-actionbar{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;align-items:stretch!important}
.modal-foot .person-actionbar .btn.person-action{height:43px!important;min-width:0!important;width:100%!important;flex:none!important;border-radius:15px!important;padding:0 10px!important;font-size:12.8px!important;font-weight:900!important;line-height:1.1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;white-space:normal!important;text-align:center!important;box-shadow:0 5px 14px rgba(28,42,30,.08)!important}
.person-action svg{width:15px!important;height:15px!important;flex:0 0 15px!important;stroke-width:2.4!important}.person-action.soft{background:linear-gradient(180deg,#e8f0df,#dbe8d2)!important;color:#214c2b!important;border:1px solid rgba(47,88,50,.16)!important}.person-action.ghost{background:#fffdf8!important;color:#274b2c!important;border:1px solid rgba(54,78,51,.18)!important}.person-action.danger,.person-action.admin-off{background:linear-gradient(180deg,#fff8f5,#f7ebe6)!important;color:#a33b32!important;border:1px solid rgba(163,59,50,.22)!important}.person-action.admin-on{background:linear-gradient(180deg,#f4ead7,#e6d2ac)!important;color:#5a3d18!important;border:1px solid rgba(139,94,38,.22)!important}.person-action.primary{background:linear-gradient(180deg,#315d38,#173d25)!important;color:#fffaf0!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 10px 22px rgba(23,61,37,.26)!important}
@media(min-width:720px){.person-actionbar{grid-template-columns:repeat(3,minmax(0,1fr))!important}.modal-foot .person-actionbar .btn.person-action{height:42px!important}}
@media(max-width:390px){.modal-foot .person-actionbar .btn.person-action{font-size:11.5px!important;padding:0 7px!important}.person-actionbar{gap:7px!important}}
/* ---- inline style 47 ---- */
.dir-main strong{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important}.dir-admin-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:20px!important;margin-left:8px!important;padding:0 8px!important;border-radius:999px!important;background:linear-gradient(180deg,#244f2f,#17371f)!important;color:#fff8e8!important;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif!important;font-size:10px!important;font-weight:900!important;letter-spacing:.04em!important;text-transform:uppercase!important;line-height:1!important;vertical-align:middle!important;box-shadow:0 2px 6px rgba(16,38,22,.18),inset 0 1px 0 rgba(255,255,255,.16)!important}.dir-admin-badge.mini{height:17px!important;padding:0 6px!important;font-size:8.5px!important;margin-left:5px!important;font-style:normal!important;vertical-align:middle!important}
/* ---- inline style 48 ---- */
.topbar h1,#pageTitle{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:calc(100vw - 150px)!important;line-height:1.02!important}.topbar .sub,#pageSub{max-width:calc(100vw - 150px)!important}@media(max-width:430px){.topbar h1,#pageTitle{font-size:clamp(27px,8.4vw,36px)!important;letter-spacing:-.035em!important}.topbar .sub,#pageSub{font-size:12.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}}
.cv-people-label{display:flex!important;align-items:center!important;margin:9px 4px 6px!important;font-size:10.5px!important;font-weight:950!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#617060!important}.cv-row.cv-person{background:linear-gradient(180deg,#fffdfa,#f2f5ed)!important;border:1px solid rgba(43,77,48,.14)!important;box-shadow:0 6px 14px rgba(18,35,20,.08)!important}.cv-row.cv-person .cv-name{color:#173b23!important;font-weight:950!important}.cv-row.cv-person .cv-sub{color:#62705f!important;font-weight:750!important}.cv-row.cv-person .cv-chev{color:#1f6336!important;opacity:1!important}.chat-shell.show-thread .cv-list{display:none!important}@media(max-width:720px){.cv-row.cv-person{min-height:66px!important}.chat-thread{min-width:0!important}.cth-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.08!important}.chat-composer{position:sticky!important;bottom:0!important}}
/* ---- inline style 49 ---- */
/* Requested only: keep the chat message field clean on iPhone and remove the
unwanted keyboard suggestion/form navigation bar as much as web apps allow. */
.chat-composer .chat-editbox{
-webkit-user-modify:read-write-plaintext-only!important;
-webkit-autocorrect:on!important;
}
.chat-composer .chat-editbox[contenteditable="plaintext-only"]{
caret-color:var(--forest-700,#214126)!important;
}
/* ---- inline style 50 ---- */
/* V142 — requested overall speed/responsiveness pass. No layout redesign. */
html,body,#app{touch-action:manipulation;}
button,[data-action],.btn,.icon-btn,.mobile-nav button,.nav-item{touch-action:manipulation;-webkit-tap-highlight-color:rgba(31,72,42,.12);}
input,textarea,select,.chat-editbox{font-size:16px;}
@media(max-width:1023px){
.content,.chat-scroll,.cv-threads,.modal-body{scroll-behavior:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;}
.page,.card,.panel,.rcard,.rgc,.cv-row,.stat-card,.doc-card,.wk-cell,.btn,.icon-btn{animation:none!important;transition:none!important;will-change:auto!important;}
.roster-mobile .rcard,.cv-threads .cv-row,.ts-list>*{content-visibility:auto;contain-intrinsic-size:auto 88px;}
}
@media(min-width:1024px){
.content,.page,.roster-page,.dashboard-grid,.week-grid,.wk-grid{contain:layout style!important;}
.rcard,.rgc,.cv-row,.stat-card,.doc-card,.wk-cell,.ts-row{contain:layout paint!important;}
}
/* ---- inline style 51 ---- */
/* V146 — requested only: keep previous desktop roster card size, but make text stand out more. */
@media (min-width:1024px){
.rwg-cell .rgc{
min-height:0!important;
border-radius:14px!important;
box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 25%,transparent)!important;
}
.rwg-cell .rgc-main{
padding:5px 13px!important;
min-height:0!important;
}
.rwg-cell .rgc-row1{
gap:6px!important;
align-items:center!important;
min-height:0!important;
}
.rwg-cell .rgc-time{
display:inline-flex!important;
align-items:center!important;
height:21px!important;
padding:0 9px!important;
border-radius:999px!important;
background:#ffffff!important;
border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(30,48,30,.12))!important;
font-size:11px!important;
font-weight:900!important;
line-height:1!important;
letter-spacing:-.02em!important;
color:color-mix(in srgb,var(--accent-deep) 96%,#000)!important;
box-shadow:0 1px 2px rgba(20,36,22,.06)!important;
flex:0 0 auto!important;
width:auto!important;
min-width:max-content!important;
max-width:none!important;
white-space:nowrap!important;
overflow:visible!important;
text-overflow:clip!important;
}
.rwg-cell .rgc-row1{
display:flex!important;
flex-direction:row!important;
align-items:center!important;
gap:6px!important;
min-height:0!important;
flex-wrap:nowrap!important;
max-width:none!important;
overflow:visible!important;
}
.rwg-cell .rgc-dur{
display:inline-flex!important;
align-items:center!important;
height:21px!important;
padding:0 7px!important;
border-radius:999px!important;
font-size:9.5px!important;
font-weight:900!important;
line-height:1!important;
color:color-mix(in srgb,var(--accent-deep) 96%,#000)!important;
background:#ffffff!important;
border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(30,48,30,.12))!important;
box-shadow:0 1px 2px rgba(20,36,22,.06)!important;
flex:0 0 auto!important;
width:auto!important;
min-width:max-content!important;
white-space:nowrap!important;
overflow:visible!important;
text-overflow:clip!important;
}
.rwg-cell .rgc-row2{
gap:6px!important;
margin-top:3px!important;
align-items:center!important;
padding:0!important;
background:none!important;
min-height:0!important;
}
.rwg-cell .rgc-dot{
width:7px!important;
height:7px!important;
}
.rwg-cell .rgc-dot.pub{box-shadow:0 0 0 2px rgba(47,138,71,.18)!important}
.rwg-cell .rgc-dot.draft{box-shadow:0 0 0 2px rgba(201,130,26,.18)!important}
.rwg-cell .rgc-client{
flex:1!important;min-width:0!important;
display:inline-flex!important;align-items:center!important;
padding:0!important;border-radius:0!important;
background:none!important;
border:0!important;
box-shadow:none!important;
font-size:13.5px!important;
font-weight:900!important;
line-height:1.15!important;
letter-spacing:-.015em!important;
color:color-mix(in srgb,var(--accent-deep) 98%,#000)!important;
text-shadow:none!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.rwg-cell .rgc:hover .rgc-tools{
max-height:34px!important;
opacity:1!important;
padding:0 8px 7px!important;
}
}
/* ---- inline style 52 ---- */
/* V145 — requested only: clean Add shift modal, remove giant star area, improve colour picker, stop bouncing. */
body[data-modal-type="shift"] #modalHost{overflow:hidden!important;overscroll-behavior:none!important}
body[data-modal-type="shift"] .modal-overlay{
align-items:center!important;
padding:clamp(10px,2vh,22px)!important;
overflow:hidden!important;
overscroll-behavior:none!important;
touch-action:none!important;
background:rgba(16,28,17,.76)!important;
}
body[data-modal-type="shift"] .shift-modal{
animation:none!important;
transform:none!important;
width:min(96vw,1040px)!important;
height:auto!important;
max-height:calc(100dvh - 32px)!important;
border-radius:28px!important;
overflow:hidden!important;
background:linear-gradient(180deg,#fffdf8 0%,#f5f0e7 100%)!important;
box-shadow:0 28px 80px rgba(12,30,18,.30), inset 0 1px 0 rgba(255,255,255,.75)!important;
}
body[data-modal-type="shift"] .shift-modal .modal-head{
padding:22px 26px 14px!important;
border-bottom:1px solid rgba(36,62,39,.10)!important;
}
body[data-modal-type="shift"] .shift-modal .modal-head h2{
font-size:25px!important;
font-weight:650!important;
color:#172319!important;
}
body[data-modal-type="shift"] .shift-modal .modal-body{
padding:18px 26px 14px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:auto!important;
scrollbar-gutter:stable!important;
min-height:0!important;
}
body[data-modal-type="shift"] .shift-modal .modal-foot{
padding:13px 26px calc(14px + var(--safe-b))!important;
border-top:1px solid rgba(36,62,39,.10)!important;
background:rgba(255,253,248,.94)!important;
box-shadow:0 -10px 26px rgba(24,38,24,.08)!important;
margin-top:0!important;
}
body[data-modal-type="shift"] .shift-builder{
display:grid!important;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
grid-template-areas:
"client client"
"time employees"
"recurrence colour"
"visibility notes"!important;
gap:14px!important;
align-items:start!important;
padding-bottom:0!important;
}
body[data-modal-type="shift"] .client-search-panel{grid-area:client!important}
body[data-modal-type="shift"] .shift-date-time-panel{grid-area:time!important}
body[data-modal-type="shift"] .emp-field{grid-area:employees!important}
body[data-modal-type="shift"] .recurrence-section{grid-area:recurrence!important}
body[data-modal-type="shift"] .shift-colour-section{grid-area:colour!important}
body[data-modal-type="shift"] .visibility-section{grid-area:visibility!important}
body[data-modal-type="shift"] .shift-notes-section{grid-area:notes!important}
body[data-modal-type="shift"] .shift-panel,
body[data-modal-type="shift"] .shift-date-time-panel,
body[data-modal-type="shift"] .emp-field,
body[data-modal-type="shift"] .shift-colour-section{
border-radius:18px!important;
border:1px solid rgba(44,78,48,.13)!important;
background:linear-gradient(180deg,#fffdf8 0%,#f4efe5 100%)!important;
box-shadow:0 5px 18px rgba(24,38,24,.055)!important;
padding:14px!important;
overflow:visible!important;
}
body[data-modal-type="shift"] .shift-date-time-panel summary,
body[data-modal-type="shift"] .shift-section>summary{
padding:0 0 12px!important;
min-height:0!important;
cursor:default!important;
border-bottom:1px solid rgba(44,78,48,.09)!important;
margin-bottom:12px!important;
}
body[data-modal-type="shift"] .shift-section>summary span,
body[data-modal-type="shift"] .panel-title span,
body[data-modal-type="shift"] .shift-section-label,
body[data-modal-type="shift"] .shift-colour-head span{
font-size:14px!important;
font-weight:900!important;
color:#172319!important;
letter-spacing:-.01em!important;
}
body[data-modal-type="shift"] .shift-colour-head svg,
body[data-modal-type="shift"] .shift-colour-section svg{display:none!important}
body[data-modal-type="shift"] .shift-colour-head{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
margin-bottom:12px!important;
}
body[data-modal-type="shift"] .shift-colour-current{
font-size:11px!important;
font-weight:900!important;
padding:5px 10px!important;
background:rgba(47,107,62,.12)!important;
color:#255630!important;
border:1px solid rgba(47,107,62,.16)!important;
}
body[data-modal-type="shift"] .colour-picker{gap:12px!important}
body[data-modal-type="shift"] .colour-preview-card{
display:grid!important;
grid-template-columns:120px minmax(0,1fr)!important;
min-height:68px!important;
overflow:hidden!important;
border-radius:17px!important;
border:1px solid color-mix(in srgb,var(--cc-solid,#2e7b43) 28%,rgba(20,31,23,.12))!important;
background:linear-gradient(135deg,var(--cc-a,#f0fbf0),var(--cc-b,#cbe9ce) 70%,var(--cc-c,#f4ecd9))!important;
box-shadow:0 10px 22px color-mix(in srgb,var(--cc-solid,#2e7b43) 18%,transparent)!important;
}
body[data-modal-type="shift"] .colour-preview-time{
display:grid!important;
place-items:center!important;
padding:10px!important;
background:linear-gradient(160deg,var(--cc-solid,#2e7b43),var(--cc-deep,#1d542d))!important;
color:#fffaf0!important;
font-size:13px!important;
font-weight:950!important;
text-align:center!important;
line-height:1.12!important;
}
body[data-modal-type="shift"] .colour-preview-main{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
padding:12px!important;
min-width:0!important;
}
body[data-modal-type="shift"] .colour-preview-main strong{
min-width:0!important;
color:color-mix(in srgb,var(--cc-deep,#1d542d) 85%,#000)!important;
font-size:16px!important;
font-weight:950!important;
line-height:1.1!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
body[data-modal-type="shift"] .colour-preview-main span{
flex:0 0 auto!important;
background:rgba(255,255,255,.9)!important;
border:1px solid color-mix(in srgb,var(--cc-solid,#2e7b43) 22%,transparent)!important;
border-radius:999px!important;
color:color-mix(in srgb,var(--cc-deep,#1d542d) 90%,#000)!important;
font-size:12px!important;
font-weight:950!important;
padding:5px 9px!important;
}
body[data-modal-type="shift"] .colour-swatches{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:6px!important;
}
body[data-modal-type="shift"] .colour-option{
min-height:32px!important;
border-radius:10px!important;
border:1px solid rgba(31,50,32,.12)!important;
background:#fffdf8!important;
color:#172319!important;
display:flex!important;
align-items:center!important;
gap:6px!important;
padding:5px 8px!important;
cursor:pointer!important;
box-shadow:0 1px 5px rgba(24,38,24,.04)!important;
text-align:left!important;
}
body[data-modal-type="shift"] .colour-option i{
width:15px!important;height:15px!important;border-radius:5px!important;flex:0 0 auto!important;
background:var(--opt)!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(20,31,23,.10)!important;
}
body[data-modal-type="shift"] .colour-option b{
font-size:11px!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body[data-modal-type="shift"] .colour-option em{
font-style:normal!important;font-size:9px!important;color:#687268!important;font-weight:800!important;margin-left:auto!important;
}
body[data-modal-type="shift"] .colour-auto::before{
content:"";width:15px;height:15px;border-radius:5px;flex:0 0 auto;
background:linear-gradient(135deg,#ef6c57 0 25%,#5b6ef0 25% 50%,#1aa89c 50% 75%,#3aa05a 75% 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(20,31,23,.10);
}
body[data-modal-type="shift"] .colour-option.is-sel{
border-color:rgba(47,107,62,.52)!important;
background:linear-gradient(180deg,#eef7eb,#fffdf8)!important;
box-shadow:0 0 0 2px rgba(47,107,62,.13),0 3px 9px rgba(24,38,24,.06)!important;
}
body[data-modal-type="shift"] .colour-option.is-sel::after{
content:"✓";margin-left:auto;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
background:#2f6b3e;color:#fff;font-size:10px;font-weight:900;
}
body[data-modal-type="shift"] .colour-auto.is-sel em{display:none!important}
body[data-modal-type="shift"] .notes-textarea{min-height:118px!important;resize:none!important}
@media (max-width:1023px){
body[data-modal-type="shift"] .modal-overlay{align-items:flex-end!important;padding:0!important;touch-action:none!important}
body[data-modal-type="shift"] .shift-modal{
width:100%!important;max-width:100%!important;max-height:calc(100dvh - 10px)!important;
border-radius:24px 24px 0 0!important;
}
body[data-modal-type="shift"] .shift-modal .modal-head{padding:15px 16px 10px!important}
body[data-modal-type="shift"] .shift-modal .modal-body{padding:12px 13px 10px!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
body[data-modal-type="shift"] .shift-modal .modal-foot{padding:9px 12px calc(10px + var(--safe-b))!important}
body[data-modal-type="shift"] .shift-builder{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"client" "time" "employees" "recurrence" "colour" "visibility" "notes"!important;gap:10px!important}
body[data-modal-type="shift"] .row2{grid-template-columns:1fr 1fr!important;gap:9px!important}
body[data-modal-type="shift"] .colour-preview-card{grid-template-columns:96px minmax(0,1fr)!important;min-height:60px!important}
body[data-modal-type="shift"] .colour-preview-time{font-size:11px!important;padding:8px!important}
body[data-modal-type="shift"] .colour-preview-main strong{font-size:14px!important}
body[data-modal-type="shift"] .colour-swatches{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:430px){
body[data-modal-type="shift"] .colour-swatches{grid-template-columns:1fr!important}
body[data-modal-type="shift"] .colour-preview-card{grid-template-columns:1fr!important}
body[data-modal-type="shift"] .colour-preview-time{min-height:38px!important}
}
/* ---- inline style 53 ---- */
/* V177 — requested only: Add shift colour picker collapses after selection and opens on tap. */
body[data-modal-type="shift"] .shift-colour-head{
width:100%!important;
border:0!important;
background:transparent!important;
padding:0!important;
cursor:pointer!important;
}
body[data-modal-type="shift"] .shift-colour-head .colour-toggle-chev{
width:28px!important;height:28px!important;border-radius:50%!important;
display:grid!important;place-items:center!important;
background:rgba(47,107,62,.10)!important;color:#255630!important;
transform:rotate(180deg)!important;transition:transform .16s ease!important;flex:0 0 auto!important;
}
body[data-modal-type="shift"] .shift-colour-head .colour-toggle-chev svg{width:15px!important;height:15px!important;display:block!important;stroke:currentColor!important;fill:none!important;}
body[data-modal-type="shift"] .shift-colour-section.is-open .colour-toggle-chev{transform:rotate(270deg)!important;}
body[data-modal-type="shift"] .shift-colour-section.is-collapsed .colour-swatches{display:none!important;}
body[data-modal-type="shift"] .shift-colour-section.is-collapsed .colour-picker{gap:0!important;}
body[data-modal-type="shift"] .shift-colour-section.is-collapsed{padding-bottom:14px!important;}
body[data-modal-type="shift"] .shift-colour-section.is-collapsed .shift-colour-head{margin-bottom:10px!important;}
body[data-modal-type="shift"] .shift-colour-section.is-open .shift-colour-head{margin-bottom:12px!important;}
body[data-modal-type="shift"] .shift-colour-section.is-collapsed .colour-preview-card{margin:0!important;}
body[data-modal-type="shift"] .shift-colour-current{white-space:nowrap!important;}
body[data-modal-type="shift"] .colour-option{position:relative!important;}
@media(max-width:430px){
body[data-modal-type="shift"] .shift-colour-section.is-collapsed .colour-preview-card{grid-template-columns:92px minmax(0,1fr)!important;}
body[data-modal-type="shift"] .shift-colour-section.is-collapsed .colour-preview-time{min-height:0!important;}
}
/* ---- inline style 54 ---- */
/* V178 — requested only: selected roster colour applies to actual roster cards; faster live messages + typing. */
.typing-row.ww-live-typing{
display:flex!important;align-items:center!important;gap:8px!important;
color:#245233!important;font-weight:900!important;
}
.typing-row.ww-live-typing .typing-text::after{content:none!important;display:none!important;}
/* ---- inline style 55 ---- */
/* V184 — requested only: fix desktop Messages empty-space layout. Mobile untouched. */
@media (min-width:1024px){
/* Previous mobile/thread rule hid the chat list on desktop when a thread was open,
leaving the conversation looking like a small strip with a large blank panel. */
.chat-shell.show-thread .chat-list,
.chat-shell.show-thread .cv-list,
.chat-shell.show-thread .chat-list.cv-list{
display:flex!important;
flex-direction:column!important;
visibility:visible!important;
opacity:1!important;
}
.chat-shell.show-thread .chat-thread{
display:flex!important;
grid-column:auto!important;
width:auto!important;
max-width:none!important;
}
.chat-shell.show-thread{
grid-template-columns:minmax(315px,355px) minmax(0,1fr)!important;
}
.chat-shell{
max-width:1160px!important;
min-height:560px!important;
height:calc(100dvh - 142px)!important;
}
.chat-list.cv-list{
width:auto!important;
flex:0 0 auto!important;
}
.chat-thread-head .cth-back{
display:none!important;
}
.chat-scroll{
padding:24px clamp(22px,2.4vw,34px)!important;
}
.msg,.msg.mine{
max-width:82%!important;
}
.bubble{
max-width:min(620px,100%)!important;
}
.chat-thread.empty-thread{
min-width:0!important;
}
}
/* ---- inline style 56 ---- */
/* v646 — remove the unnecessary empty conversation preview on desktop.
When no chat is selected, the conversation list becomes the complete page. */
@media (min-width:1024px){
.chat-shell.chat-list-only{
display:block!important;
grid-template-columns:none!important;
width:min(100%,412px)!important;
max-width:412px!important;
min-height:560px!important;
height:calc(100dvh - 132px)!important;
overflow:hidden!important;
background:linear-gradient(180deg,#fffaf0 0%,#edf4e7 100%)!important;
margin-left:0!important;
margin-right:auto!important;
}
.chat-shell.chat-list-only .chat-list.cv-list{
display:flex!important;
width:100%!important;
max-width:none!important;
height:100%!important;
border-right:0!important;
border-radius:30px!important;
padding:18px clamp(18px,2.2vw,30px) 18px!important;
background:linear-gradient(180deg,#fffaf0 0%,#edf4e7 100%)!important;
box-shadow:none!important;
}
.chat-shell.chat-list-only .cv-head,
.chat-shell.chat-list-only .cv-search,
.chat-shell.chat-list-only .cv-threads{
width:100%!important;
max-width:none!important;
}
.chat-shell.chat-list-only .cv-row{
padding-left:12px!important;
padding-right:12px!important;
}
}
/* ---- inline style 57 ---- */
/* V185 — requested only: message typing autocorrect ON, remove typing “live” label. */
.chat-composer .chat-editbox,
body.chat-thread-open .chat-composer .chat-editbox,
.chat-composer #chatInput{
-webkit-user-modify:read-write-plaintext-only!important;
-webkit-autocorrect:on!important;
text-autospace:normal!important;
}
.typing-row.ww-live-typing .typing-text::after,
.typing-row .typing-text::after{
content:none!important;
display:none!important;
}
/* ---- inline style 58 ---- */
/* V190 — requested only: completely redesign desktop login screen from scratch. Mobile and app functionality untouched. */
@media (min-width:880px){
.login-root{
position:fixed!important;
inset:0!important;
display:grid!important;
grid-template-columns:minmax(420px,44vw) minmax(480px,1fr)!important;
align-items:stretch!important;
justify-content:stretch!important;
min-height:100dvh!important;
padding:0!important;
overflow:hidden!important;
background:#eef1e8!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.login-root::before{
content:""!important;
position:absolute!important;
inset:0 auto 0 0!important;
width:min(44vw,650px)!important;
background:
radial-gradient(520px 420px at 82% 12%,rgba(255,255,255,.13),transparent 62%),
radial-gradient(460px 380px at 7% 88%,rgba(180,126,74,.18),transparent 62%),
linear-gradient(152deg,#315f3f 0%,#173c27 52%,#0b2417 100%)!important;
z-index:0!important;
pointer-events:none!important;
}
.login-root::after{
content:"Westwondersandco\AWorkforce\A\ARoster, clocking, messages and team updates — all in one secure workspace."!important;
white-space:pre-line!important;
position:absolute!important;
left:clamp(46px,5.2vw,86px)!important;
top:50%!important;
transform:translateY(-50%)!important;
width:min(420px,31vw)!important;
color:#fffaf0!important;
z-index:1!important;
pointer-events:none!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
font-size:clamp(17px,1.55vw,23px)!important;
line-height:1.45!important;
font-weight:500!important;
letter-spacing:-.01em!important;
text-shadow:0 14px 34px rgba(0,0,0,.34)!important;
}
.login-stage{
grid-column:2!important;
width:100%!important;
max-width:none!important;
min-height:100dvh!important;
margin:0!important;
padding:clamp(44px,7vh,84px) clamp(48px,7vw,128px)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:
radial-gradient(560px 420px at 96% 14%,rgba(49,95,63,.08),transparent 60%),
linear-gradient(180deg,#f7f6ef 0%,#edf0e6 100%)!important;
z-index:2!important;
animation:none!important;
}
.login-stage::before{
content:""!important;
position:fixed!important;
left:clamp(46px,5.2vw,86px)!important;
bottom:clamp(38px,6.4vh,76px)!important;
width:min(360px,30vw)!important;
height:96px!important;
border-radius:26px!important;
background:rgba(255,255,255,.075)!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
pointer-events:none!important;
z-index:1!important;
}
.login-card{
width:min(430px,100%)!important;
border-radius:28px!important;
padding:34px 34px 28px!important;
background:#fffdf8!important;
border:1px solid rgba(47,70,45,.12)!important;
box-shadow:0 34px 86px -46px rgba(13,32,18,.56),0 12px 30px -22px rgba(31,51,31,.32)!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.lc-logo{
width:58px!important;
height:58px!important;
border-radius:0!important;
margin:0 0 18px!important;
background:transparent!important;
border:0!important;outline:0!important;box-shadow:none!important;overflow:visible!important;
}
.lc-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block!important;background:transparent!important;border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important;transform:none!important;}
.lc-head{
text-align:left!important;
margin:0 0 24px!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.lc-eyebrow{
display:block!important;
margin:0 0 8px!important;
color:#5a755f!important;
font-size:11px!important;
font-weight:850!important;
letter-spacing:.115em!important;
text-transform:uppercase!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.lc-head h2{
font-size:0!important;
line-height:1!important;
margin:0!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.lc-head h2::after{
content:"Sign in"!important;
display:block!important;
color:#17251a!important;
font-size:32px!important;
line-height:1.05!important;
font-weight:850!important;
letter-spacing:-.035em!important;
}
.lc-head p{
font-size:0!important;
line-height:1!important;
margin:10px 0 0!important;
max-width:330px!important;
}
.lc-head p::after{
content:"Access your roster, messages, clocking and team updates."!important;
display:block!important;
color:#667365!important;
font-size:14px!important;
line-height:1.48!important;
font-weight:500!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.login-card .field{margin-bottom:15px!important;}
.login-card .field label{
display:block!important;
margin-bottom:7px!important;
color:#304133!important;
font-size:11px!important;
font-weight:850!important;
letter-spacing:.055em!important;
text-transform:uppercase!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.login-card .input{
width:100%!important;
height:50px!important;
padding:0 15px!important;
border-radius:14px!important;
background:#f8faf4!important;
border:1.5px solid rgba(55,82,54,.18)!important;
color:#17251a!important;
font-size:16px!important;
font-weight:500!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important;
}
.login-card .input::placeholder{color:#8f9b8f!important;font-weight:500!important;}
.login-card .input:focus{
outline:none!important;
background:#fffef9!important;
border-color:#426844!important;
box-shadow:0 0 0 4px rgba(66,104,68,.13),inset 0 1px 0 rgba(255,255,255,.86)!important;
}
.login-card .pw-wrap{position:relative!important;}
.login-card .pw-eye{
width:38px!important;height:38px!important;right:7px!important;border-radius:12px!important;
color:#536352!important;background:transparent!important;
}
.lc-cta{
width:100%!important;
height:52px!important;
margin-top:12px!important;
border-radius:15px!important;
background:linear-gradient(180deg,#4b724d 0%,#2a4e30 100%)!important;
color:#fffdf5!important;
border:0!important;
box-shadow:0 14px 26px -15px rgba(28,55,33,.52)!important;
font-size:15.5px!important;
font-weight:850!important;
letter-spacing:0!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.lc-cta:hover{filter:brightness(1.03)!important;transform:none!important;}
.lc-cta:active{transform:scale(.99)!important;}
.login-err{font-size:12.5px!important;font-weight:750!important;color:#a8392f!important;margin-bottom:10px!important;}
.lc-divider,.demo-row,.demo-chip{display:none!important;}
.employee-login-help,.employee-first-login-btn,.login-share-note,.login-details-card{display:none!important;}
.install-prompt-card{display:none!important;}
.lc-help{
margin-top:17px!important;
color:#6c786b!important;
font-size:12.2px!important;
line-height:1.45!important;
font-weight:500!important;
text-align:left!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.lc-help span{color:#879184!important;font-weight:500!important;}
.login-foot{
position:fixed!important;
left:clamp(46px,5.2vw,86px)!important;
bottom:clamp(50px,8vh,94px)!important;
display:flex!important;
align-items:center!important;
gap:12px!important;
z-index:2!important;
color:rgba(255,250,240,.78)!important;
font-size:12px!important;
font-weight:750!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.login-foot .lf-dot,.lf-dot{width:4px!important;height:4px!important;border-radius:999px!important;background:rgba(255,250,240,.42)!important;}
}
/* ---- inline style 59 ---- */
/* V191 — requested only: desktop login screen cleanup. Remove search-looking password icon, blend split colours, clean left-side text/bar. */
@media (min-width:880px){
.login-root{
grid-template-columns:minmax(430px,43vw) minmax(520px,1fr)!important;
background:
radial-gradient(760px 540px at 2% 8%,rgba(104,137,93,.22),transparent 58%),
linear-gradient(90deg,#173b27 0%,#1f4b31 35%,#edf2e8 35.2%,#f7f5ed 100%)!important;
}
.login-root::before{
width:46vw!important;
background:
radial-gradient(560px 480px at 85% 20%,rgba(255,255,255,.12),transparent 62%),
radial-gradient(520px 420px at 12% 85%,rgba(176,126,80,.14),transparent 64%),
linear-gradient(150deg,#376f48 0%,#1e4b31 46%,#0e281a 100%)!important;
box-shadow:70px 0 120px rgba(26,64,39,.16)!important;
}
.login-root::after{
content:"Westwondersandco\AWorkforce"!important;
width:min(360px,29vw)!important;
top:42%!important;
transform:translateY(-50%)!important;
color:#fffdf5!important;
font-size:clamp(25px,2.25vw,38px)!important;
line-height:1.06!important;
font-weight:850!important;
letter-spacing:-.045em!important;
text-shadow:0 18px 45px rgba(0,0,0,.30)!important;
}
.login-stage{
padding:clamp(44px,7vh,84px) clamp(66px,8vw,140px)!important;
background:
radial-gradient(720px 520px at 18% 50%,rgba(47,96,61,.10),transparent 62%),
radial-gradient(680px 460px at 100% 0%,rgba(255,255,255,.72),transparent 64%),
linear-gradient(120deg,#eef2e8 0%,#f7f5ee 58%,#fbfaf5 100%)!important;
box-shadow:inset 44px 0 80px -72px rgba(20,56,34,.45)!important;
}
.login-stage::before{
display:none!important;
content:none!important;
}
.login-stage::after{
content:"Roster, clocking, messages and team updates in one secure workspace."!important;
position:fixed!important;
left:clamp(46px,5.2vw,86px)!important;
top:calc(42% + 92px)!important;
width:min(360px,29vw)!important;
color:rgba(255,253,245,.86)!important;
font-size:clamp(14px,1.06vw,17px)!important;
line-height:1.45!important;
font-weight:560!important;
letter-spacing:-.01em!important;
text-shadow:0 12px 30px rgba(0,0,0,.26)!important;
z-index:2!important;
pointer-events:none!important;
}
.login-foot{
left:clamp(46px,5.2vw,86px)!important;
bottom:clamp(34px,5.4vh,58px)!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
color:rgba(255,253,245,.72)!important;
font-size:11.5px!important;
font-weight:620!important;
letter-spacing:.01em!important;
}
.login-foot .lf-dot,.lf-dot{background:rgba(255,253,245,.36)!important;}
.login-card{
width:min(450px,100%)!important;
border-radius:30px!important;
padding:34px 36px 30px!important;
background:rgba(255,253,247,.96)!important;
border:1px solid rgba(45,73,47,.12)!important;
box-shadow:0 32px 84px -48px rgba(15,38,22,.56),0 18px 42px -32px rgba(30,60,37,.35)!important;
}
.lc-logo{margin-bottom:18px!important;}
.lc-head h2::after{font-size:31px!important;letter-spacing:-.04em!important;}
.lc-head p::after{color:#677567!important;line-height:1.42!important;}
.login-card .pw-wrap{position:relative!important;}
.login-card .pw-eye,
.pw-eye{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}
.login-card .pw-wrap .input,
.login-card input[type="password"].input{
padding-right:15px!important;
}
}
/* ---- inline style 60 ---- */
/* V192 — requested only: desktop login redesign polish. Remove harsh seam, remove empty bar, cleaner professional layout. */
@media (min-width:880px){
.login-root{
position:fixed!important;
inset:0!important;
display:grid!important;
grid-template-columns:minmax(420px,42vw) minmax(520px,1fr)!important;
align-items:stretch!important;
min-height:100dvh!important;
padding:0!important;
overflow:hidden!important;
background:
radial-gradient(900px 620px at 105% 5%,rgba(74,115,81,.12),transparent 58%),
radial-gradient(780px 560px at 72% 95%,rgba(201,178,136,.16),transparent 62%),
linear-gradient(120deg,#e7eddf 0%,#f4f2e8 58%,#fbfaf4 100%)!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.login-root::before{
content:""!important;
position:absolute!important;
left:0!important;
top:0!important;
bottom:0!important;
width:min(46vw,680px)!important;
background:
radial-gradient(520px 420px at 18% 12%,rgba(255,255,255,.13),transparent 63%),
radial-gradient(560px 480px at 10% 92%,rgba(188,133,80,.16),transparent 64%),
linear-gradient(145deg,#386e48 0%,#214d33 48%,#0d2b1c 100%)!important;
clip-path:ellipse(100% 92% at 0% 50%)!important;
z-index:0!important;
pointer-events:none!important;
box-shadow:52px 0 95px rgba(24,63,39,.14)!important;
}
.login-root::after{
content:"Westwondersandco\AWorkforce\A\AEverything your team needs for roster, clocking, messages and updates."!important;
white-space:pre-line!important;
position:absolute!important;
left:clamp(44px,5.2vw,82px)!important;
top:50%!important;
transform:translateY(-50%)!important;
width:min(360px,29vw)!important;
z-index:2!important;
color:#fffdf4!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
font-size:clamp(15px,1.05vw,17px)!important;
line-height:1.55!important;
font-weight:560!important;
letter-spacing:-.01em!important;
text-shadow:0 14px 34px rgba(0,0,0,.28)!important;
pointer-events:none!important;
}
.login-root::after::first-line{font-weight:900!important;}
.login-stage{
grid-column:2!important;
width:100%!important;
max-width:none!important;
min-height:100dvh!important;
margin:0!important;
padding:clamp(42px,7vh,78px) clamp(56px,8vw,132px)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:transparent!important;
box-shadow:none!important;
z-index:3!important;
animation:none!important;
}
.login-stage::before,
.login-stage::after{
display:none!important;
content:none!important;
}
.login-card{
width:min(420px,100%)!important;
margin:0 auto!important;
padding:34px 34px 28px!important;
border-radius:26px!important;
background:#fffdf7!important;
border:1px solid rgba(44,70,45,.11)!important;
box-shadow:
0 34px 90px -52px rgba(18,45,26,.55),
0 16px 38px -28px rgba(35,58,37,.38)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.lc-logo{
width:52px!important;
height:52px!important;
margin:0 0 18px!important;
border-radius:0!important;
background:transparent!important;
border:0!important;outline:0!important;box-shadow:none!important;overflow:visible!important;
}
.lc-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block!important;background:transparent!important;border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important;transform:none!important;}
.lc-head{
text-align:left!important;
margin:0 0 24px!important;
}
.lc-eyebrow{
display:block!important;
margin:0 0 8px!important;
color:#5f745e!important;
font-size:10.5px!important;
line-height:1!important;
font-weight:850!important;
letter-spacing:.12em!important;
text-transform:uppercase!important;
}
.lc-head h2{
font-size:0!important;
margin:0!important;
line-height:1!important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;
}
.lc-head h2::after{
content:"Sign in"!important;
display:block!important;
color:#132118!important;
font-size:32px!important;
line-height:1.05!important;
font-weight:820!important;
letter-spacing:-.04em!important;
}
.lc-head p{
font-size:0!important;
line-height:1!important;
margin:10px 0 0!important;
}
.lc-head p::after{
content:"Access your roster, messages, clocking and team updates."!important;
display:block!important;
max-width:310px!important;
color:#647065!important;
font-size:14px!important;
line-height:1.48!important;
font-weight:500!important;
}
.login-card .field{margin-bottom:15px!important;}
.login-card .field label{
display:block!important;
margin:0 0 7px!important;
color:#2f3e32!important;
font-size:10.8px!important;
line-height:1!important;
font-weight:850!important;
letter-spacing:.055em!important;
text-transform:uppercase!important;
}
.login-card .input{
width:100%!important;
height:50px!important;
padding:0 15px!important;
border-radius:14px!important;
background:#f8faf3!important;
border:1.4px solid rgba(48,78,50,.18)!important;
color:#142118!important;
font-size:16px!important;
font-weight:500!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
}
.login-card .input::placeholder{color:#93a093!important;font-weight:500!important;}
.login-card .input:focus{
outline:none!important;
background:#fffef8!important;
border-color:#416b45!important;
box-shadow:0 0 0 4px rgba(65,107,69,.13),inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.login-card .pw-eye,.pw-eye{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}
.login-card input[type="password"].input,
.login-card .pw-wrap .input{padding-right:15px!important;}
.lc-cta{
width:100%!important;
height:52px!important;
margin-top:12px!important;
border-radius:14px!important;
border:0!important;
background:linear-gradient(180deg,#457149 0%,#2b5432 100%)!important;
color:#fffdf4!important;
font-size:15px!important;
font-weight:820!important;
letter-spacing:0!important;
box-shadow:0 16px 28px -18px rgba(29,62,35,.64)!important;
transform:none!important;
}
.lc-cta:hover{filter:brightness(1.02)!important;transform:none!important;}
.lc-cta:active{transform:scale(.99)!important;}
.lc-help{
margin-top:17px!important;
color:#6b766b!important;
font-size:12.2px!important;
line-height:1.42!important;
font-weight:500!important;
text-align:left!important;
}
.lc-help span{display:block!important;color:#8a9388!important;font-weight:500!important;}
.lc-divider,.demo-row,.demo-chip,
.employee-login-help,.employee-first-login-btn,.login-share-note,.login-details-card,
.install-prompt-card{display:none!important;}
.login-foot{
position:absolute!important;
left:clamp(44px,5.2vw,82px)!important;
bottom:clamp(34px,5.5vh,62px)!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
z-index:2!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
color:rgba(255,253,244,.72)!important;
font-size:11.2px!important;
line-height:1!important;
font-weight:720!important;
letter-spacing:.01em!important;
}
.login-foot .lf-dot,.lf-dot{
width:4px!important;
height:4px!important;
border-radius:999px!important;
background:rgba(255,253,244,.38)!important;
}
}
/* ---- inline style 61 ---- */
@media (min-width:880px){
.login-root::after{
content:"Westwondersandco\AWorkforce"!important;
white-space:pre-line!important;
font-size:clamp(29px,2.6vw,44px)!important;
line-height:1.05!important;
font-weight:880!important;
letter-spacing:-.05em!important;
top:46%!important;
width:min(380px,30vw)!important;
}
.login-stage::after{
content:"Everything your team needs for roster, clocking, messages and updates."!important;
display:block!important;
position:fixed!important;
left:clamp(44px,5.2vw,82px)!important;
top:calc(46% + 112px)!important;
width:min(360px,29vw)!important;
z-index:4!important;
color:rgba(255,253,244,.88)!important;
font-size:clamp(14px,1.05vw,17px)!important;
line-height:1.55!important;
font-weight:560!important;
letter-spacing:-.01em!important;
text-shadow:0 14px 34px rgba(0,0,0,.28)!important;
pointer-events:none!important;
}
}
/* ---- inline style 62 ---- */
.lc-logo {
background: transparent !important; border: 0 !important; outline: 0 !important;
border-radius: 0 !important; box-shadow: none !important; filter: none !important;
padding: 0 !important; overflow: visible !important;
}
.lc-logo img {
width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; display: block !important;
background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important;
}
.sidebar-brand img {
width: 42px !important; height: 42px !important; object-fit: contain !important; object-position: center !important; display: block !important;
background: transparent !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important;
}
/* ---- inline style 63 ---- */
.sidebar-brand.sidebar-brand-text-only{gap:0!important;padding-left:8px!important;}
.sidebar-brand.sidebar-brand-text-only .bname{font-size:17px!important;}
/* ---- inline style 64 ---- */
.v213-line.v382-address-row{
width:100%;margin:0;padding:8px 10px;border:1px solid rgba(48,91,60,.13);border-radius:13px;
background:linear-gradient(135deg,rgba(238,246,235,.92),rgba(248,246,237,.94));
color:#244d31;text-align:left;display:flex;align-items:center;gap:10px;cursor:pointer;
appearance:none;-webkit-appearance:none;font:inherit;min-width:0;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
-webkit-tap-highlight-color:transparent;
}
.v213-line.v382-address-row:hover{border-color:rgba(47,105,61,.28);box-shadow:0 6px 16px rgba(32,66,41,.08)}
.v213-line.v382-address-row:active{transform:scale(.992)}
.v213-line.v382-address-row>svg{width:22px;height:22px;flex:0 0 22px;color:#39784b}
.v382-address-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.v382-address-copy strong{font-size:14px;line-height:1.25;color:#233e2a;white-space:normal;overflow-wrap:anywhere}
.v382-address-copy small{font-size:10.5px;line-height:1.2;color:#718076;font-weight:700;letter-spacing:.01em}
.v382-address-chevron{font-size:25px;line-height:1;color:#56745e;flex:0 0 auto;margin-left:2px}
.v382-address-view{margin:4px 0!important}
/* ============================================================
DIRECTIONS — "route ticket" (redesigned from scratch v384)
The address is the hero, shown as a from→to journey ticket.
============================================================ */
.rt2{display:flex;flex-direction:column;gap:16px;padding:4px 2px 6px}
.rt2-ticket{position:relative;display:flex;gap:16px;padding:20px 18px;border-radius:20px;
background:linear-gradient(158deg,#faf8f1,#f1efe4);border:1px solid rgba(30,45,25,.09);
box-shadow:0 10px 26px -16px rgba(20,40,20,.4)}
/* journey rail: dot -> dotted line -> pin */
.rt2-journey{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding-top:5px}
.rt2-dot{width:13px;height:13px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.rt2-dot-a{background:#fff;border:3px solid #9bab8f}
.rt2-line{flex:1;width:2px;min-height:30px;margin:3px 0;
background:repeating-linear-gradient(#b9c2ac 0 4px,transparent 4px 9px)}
.rt2-dot-b{width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,#3f6b45,#22331f);
box-shadow:0 5px 12px -4px rgba(20,50,25,.6)}
.rt2-dot-b svg{width:16px;height:16px;stroke:#e9c46a;color:#e9c46a}
.rt2-stops{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.rt2-stop span{display:block;font-family:var(--font-body);font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#9aa48c;margin-bottom:3px}
.rt2-stop strong{display:block;font-family:var(--font-display,"Fraunces",Georgia,serif);font-weight:600;color:#18251a;line-height:1.2;overflow-wrap:anywhere}
.rt2-stop:first-child strong{font-size:15px;color:#7c8a72;font-weight:500}
.rt2-stop:last-child strong{font-size:20px;letter-spacing:-.01em}
/* primary action */
.rt2-go{border:0;width:100%;height:58px;border-radius:16px;cursor:pointer;font:inherit;
display:flex;align-items:center;justify-content:center;gap:10px;
background:linear-gradient(180deg,#5c7a4e,#33481f);color:#fff;
font-size:16.5px;font-weight:800;letter-spacing:.005em;
box-shadow:0 14px 28px -10px rgba(40,60,30,.55),inset 0 1px 0 rgba(255,255,255,.2);
transition:transform .12s ease}
.rt2-go svg{width:18px;height:18px;stroke:#fff;transform:rotate(180deg)}
@media(hover:hover){.rt2-go:hover{transform:translateY(-1px)}}
.rt2-go:active{transform:translateY(0) scale(.99)}
/* app row — brand marks, minimal words */
.rt2-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.rt2-app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 6px;border-radius:14px;cursor:pointer;font:inherit;
background:#fff;border:1px solid rgba(30,45,25,.1);color:#2a3a2c;font-size:12px;font-weight:700;
-webkit-tap-highlight-color:transparent;transition:border-color .12s ease,transform .12s ease}
@media(hover:hover){.rt2-app:hover{border-color:rgba(58,93,59,.4)}}
.rt2-app:active{transform:scale(.97)}
.rt2-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;position:relative;box-shadow:0 3px 8px rgba(0,0,0,.14)}
.rt2-mark::after{content:"";width:19px;height:19px;background:#fff;
-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.rt2-mark.apple{background:#1c1c1e;--m:url('data:image/svg+xml;utf8,')}
.rt2-mark.google{background:#4285f4;--m:url('data:image/svg+xml;utf8,')}
.rt2-mark.waze{background:#33ccff;--m:url('data:image/svg+xml;utf8,')}
/* copy — quiet text button */
.rt2-copy{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:13px;cursor:pointer;font:inherit;
background:transparent;border:1px dashed rgba(58,93,59,.35);color:#4a6b3e;font-size:14px;font-weight:700}
.rt2-copy svg{width:16px;height:16px;stroke:#4a6b3e}
.rt2-copy:active{background:rgba(58,93,59,.06)}
/* bottom-sheet framing on phones; title bar hidden since ticket is the hero */
@media(max-width:720px){
body[data-modal-type="booking-address-actions"] .modal-overlay{align-items:flex-end!important;padding:0!important}
body[data-modal-type="booking-address-actions"] .modal{width:100%!important;max-width:none!important;border-radius:26px 26px 0 0!important;margin:0!important;padding-bottom:var(--safe-b)!important;max-height:min(88dvh,760px)!important}
body[data-modal-type="booking-address-actions"] .modal-head{padding:14px 18px 0!important;border:0!important}
body[data-modal-type="booking-address-actions"] .modal-body{padding:8px 18px 16px!important}
body[data-modal-type="booking-address-actions"] .modal-foot{display:none!important}
}
/* ---- inline style 65 ---- */
/* Desktop-only New/Edit Shift refinement. Mobile layout is intentionally unchanged. */
@media (min-width:1024px){
body[data-modal-type="shift"] .shift-modal{
width:min(96vw,1120px)!important;
max-width:1120px!important;
max-height:calc(100dvh - 24px)!important;
height:auto!important;
display:flex!important;
flex-direction:column!important;
border-radius:24px!important;
}
body[data-modal-type="shift"] .shift-modal .modal-head{
flex:0 0 auto!important;
min-height:58px!important;
padding:14px 20px 10px!important;
}
body[data-modal-type="shift"] .shift-modal .modal-head h2{
font-size:21px!important;
line-height:1.1!important;
}
body[data-modal-type="shift"] .shift-modal .modal-x{
width:38px!important;
height:38px!important;
border-radius:12px!important;
}
body[data-modal-type="shift"] .shift-modal .modal-body{
flex:1 1 auto!important;
min-height:0!important;
padding:10px 20px 9px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
}
body[data-modal-type="shift"] .shift-modal .modal-foot{
flex:0 0 auto!important;
min-height:58px!important;
padding:9px 20px 11px!important;
gap:10px!important;
}
body[data-modal-type="shift"] .shift-builder{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
grid-template-areas:
"client employees"
"time colour"
"recurrence visibility"
"notes notes"!important;
gap:10px!important;
align-items:stretch!important;
padding:0!important;
}
body[data-modal-type="shift"] .client-search-panel{grid-area:client!important}
body[data-modal-type="shift"] .emp-field{grid-area:employees!important}
body[data-modal-type="shift"] .shift-date-time-panel{grid-area:time!important}
body[data-modal-type="shift"] .shift-colour-section{grid-area:colour!important}
body[data-modal-type="shift"] .recurrence-section{grid-area:recurrence!important}
body[data-modal-type="shift"] .visibility-section{grid-area:visibility!important}
body[data-modal-type="shift"] .shift-notes-section{grid-area:notes!important}
body[data-modal-type="shift"] .shift-panel,
body[data-modal-type="shift"] .shift-date-time-panel,
body[data-modal-type="shift"] .emp-field,
body[data-modal-type="shift"] .shift-colour-section{
min-width:0!important;
padding:11px 12px!important;
border-radius:15px!important;
box-shadow:0 3px 10px rgba(24,38,24,.045)!important;
}
body[data-modal-type="shift"] .panel-title{margin-bottom:7px!important}
body[data-modal-type="shift"] .shift-section-label,
body[data-modal-type="shift"] .panel-title>span:first-child,
body[data-modal-type="shift"] .shift-colour-head>span:first-child,
body[data-modal-type="shift"] .shift-section>summary span{
font-size:13px!important;
line-height:1.15!important;
}
body[data-modal-type="shift"] .client-search-box{
height:42px!important;
min-height:42px!important;
padding:0 11px!important;
border-radius:11px!important;
}
body[data-modal-type="shift"] .client-search-box input{
font-size:14px!important;
font-weight:620!important;
}
body[data-modal-type="shift"] .add-client-block{margin-top:7px!important}
body[data-modal-type="shift"] .add-client-toggle{
min-height:32px!important;
padding:6px 10px!important;
border-radius:10px!important;
font-size:11.5px!important;
}
body[data-modal-type="shift"] .emp-selected-summary{
margin-top:5px!important;
padding:5px 9px!important;
font-size:11.5px!important;
line-height:1.25!important;
}
body[data-modal-type="shift"] .shift-date-time-panel summary,
body[data-modal-type="shift"] .shift-section>summary{
padding:0 0 8px!important;
margin-bottom:8px!important;
}
body[data-modal-type="shift"] .shift-date-time-panel summary small{
font-size:10px!important;
max-width:55%!important;
}
body[data-modal-type="shift"] .field{gap:4px!important;margin:0!important}
body[data-modal-type="shift"] .field label{
font-size:11.5px!important;
line-height:1.15!important;
}
body[data-modal-type="shift"] .input,
body[data-modal-type="shift"] select.input,
body[data-modal-type="shift"] input.input{
height:40px!important;
min-height:40px!important;
border-radius:10px!important;
font-size:13.5px!important;
padding-top:0!important;
padding-bottom:0!important;
}
body[data-modal-type="shift"] .row2{gap:8px!important}
body[data-modal-type="shift"] .shift-date-time-panel .row2{margin-top:8px!important}
body[data-modal-type="shift"] .recurrence-section .row2{gap:8px!important}
body[data-modal-type="shift"] .shift-colour-head{
min-height:28px!important;
margin-bottom:7px!important;
}
body[data-modal-type="shift"] .shift-colour-current{
padding:4px 8px!important;
font-size:10px!important;
}
body[data-modal-type="shift"] .shift-colour-section.is-collapsed{
padding-bottom:11px!important;
}
body[data-modal-type="shift"] .shift-colour-section.is-collapsed .shift-colour-head{
margin-bottom:7px!important;
}
body[data-modal-type="shift"] .colour-preview-card{
grid-template-columns:112px minmax(0,1fr)!important;
min-height:54px!important;
border-radius:13px!important;
box-shadow:0 5px 12px color-mix(in srgb,var(--cc-solid,#2e7b43) 12%,transparent)!important;
}
body[data-modal-type="shift"] .colour-preview-time{
padding:7px!important;
font-size:11.5px!important;
}
body[data-modal-type="shift"] .colour-preview-main{padding:8px 10px!important}
body[data-modal-type="shift"] .colour-preview-main strong{font-size:13.5px!important}
body[data-modal-type="shift"] .colour-preview-main span{font-size:10.5px!important;padding:4px 7px!important}
body[data-modal-type="shift"] .colour-swatches{grid-template-columns:repeat(4,minmax(0,1fr))!important}
/* Redesigned visibility selector — published is the default and visually strongest. */
body[data-modal-type="shift"] .visibility-section{
position:relative!important;
overflow:hidden!important;
background:linear-gradient(145deg,#fffdf8,#f4f1e8)!important;
}
body[data-modal-type="shift"] .visibility-title{
align-items:center!important;
margin-bottom:8px!important;
}
body[data-modal-type="shift"] .visibility-title>span:first-child{
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
}
body[data-modal-type="shift"] .vis-state-pill{
margin-left:auto!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:23px!important;
padding:0 9px!important;
border-radius:999px!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.055em!important;
text-transform:uppercase!important;
}
body[data-modal-type="shift"] .vis-state-pill.published{
color:#fff!important;
background:linear-gradient(135deg,#3d8d52,#28673b)!important;
box-shadow:0 4px 10px rgba(47,107,62,.22)!important;
}
body[data-modal-type="shift"] .vis-state-pill.draft{
color:#775716!important;
background:#fff0bf!important;
border:1px solid #e2bd58!important;
}
body[data-modal-type="shift"] .vis-toggle{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:8px!important;
margin:4px 0 0!important;
}
body[data-modal-type="shift"] .vis-opt{
min-height:0!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
gap:8px!important;
padding:10px 12px!important;
border-radius:11px!important;
text-align:left!important;
}
body[data-modal-type="shift"] .vis-opt-icon{width:20px!important;height:20px!important;border-radius:0!important;background:transparent!important}
body[data-modal-type="shift"] .vis-opt-icon svg{width:16px!important;height:16px!important}
body[data-modal-type="shift"] .vis-opt-copy{display:flex!important;flex-direction:column!important;gap:0!important}
body[data-modal-type="shift"] .vis-opt-copy strong{font-size:14px!important;line-height:1.15!important;font-weight:800!important}
body[data-modal-type="shift"] .vis-opt-copy small{display:none!important}
body[data-modal-type="shift"] .vis-opt-check{
position:absolute!important;top:50%!important;right:11px!important;transform:translateY(-50%) scale(.7)!important;
width:20px!important;height:20px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
background:rgba(255,255,255,.22)!important;color:#fff!important;font-size:12px!important;font-weight:900!important;opacity:0!important;transition:opacity .15s,transform .15s!important}
body[data-modal-type="shift"] .vis-opt.active .vis-opt-check{opacity:1!important;transform:translateY(-50%) scale(1)!important}
body[data-modal-type="shift"] .vis-opt.vis-published.active{
border-color:#3b8650!important;
background:linear-gradient(145deg,#eef8ec,#dcefd9)!important;
box-shadow:0 0 0 2px rgba(59,134,80,.10),0 6px 14px rgba(47,107,62,.10)!important;
color:#21492c!important;
}
body[data-modal-type="shift"] .vis-opt.vis-published.active .vis-opt-icon,
body[data-modal-type="shift"] .vis-opt.vis-published.active .vis-opt-check{
background:linear-gradient(135deg,#4a9b5f,#2f7143)!important;
color:#fff!important;
}
body[data-modal-type="shift"] .vis-opt.vis-draft.active{
border-color:#d3a93e!important;
background:linear-gradient(145deg,#fff9e8,#fff0be)!important;
box-shadow:0 0 0 2px rgba(211,169,62,.10),0 6px 14px rgba(130,96,24,.08)!important;
color:#6c5015!important;
}
body[data-modal-type="shift"] .vis-opt.vis-draft.active .vis-opt-icon,
body[data-modal-type="shift"] .vis-opt.vis-draft.active .vis-opt-check{
background:linear-gradient(135deg,#d7ad45,#b18424)!important;
color:#fff!important;
}
body[data-modal-type="shift"] .vis-hint{
margin:6px 2px 0!important;
font-size:10px!important;
line-height:1.25!important;
font-weight:750!important;
color:#667168!important;
}
body[data-modal-type="shift"] .shift-notes-section{
display:grid!important;
grid-template-columns:150px minmax(0,1fr)!important;
align-items:center!important;
gap:12px!important;
min-height:76px!important;
}
body[data-modal-type="shift"] .shift-notes-section .panel-title{
margin:0!important;
}
body[data-modal-type="shift"] .shift-notes-section .field{
margin:0!important;
}
body[data-modal-type="shift"] .shift-notes-section .field label{display:none!important}
body[data-modal-type="shift"] .notes-textarea{
height:54px!important;
min-height:54px!important;
max-height:54px!important;
padding:9px 11px!important;
line-height:1.3!important;
resize:none!important;
}
body[data-modal-type="shift"] .sft-btn{
height:40px!important;
border-radius:12px!important;
font-size:13px!important;
}
body[data-modal-type="shift"] .sft-save{flex:1 1 auto!important}
body[data-modal-type="shift"] .sft-cancel{flex:0 0 130px!important}
}
/* At normal laptop/desktop heights, the complete default form fits without scrolling. */
@media (min-width:1024px) and (min-height:740px){
body[data-modal-type="shift"] .shift-modal{
height:min(94dvh,820px)!important;
}
body[data-modal-type="shift"] .shift-modal .modal-body{
overflow-y:hidden!important;
}
body[data-modal-type="shift"] .shift-modal:has(.client-picker:not(.is-collapsed)) .modal-body,
body[data-modal-type="shift"] .shift-modal:has(.employee-picker:not(.is-collapsed)) .modal-body,
body[data-modal-type="shift"] .shift-modal:has(.add-client-form) .modal-body,
body[data-modal-type="shift"] .shift-modal:has(.shift-colour-section.is-open) .modal-body{
overflow-y:auto!important;
}
}
/* ---- inline style 66 ---- */
/* Keep the app at a fixed browser scale and remove elastic page movement. */
html,body,#app,.shell{
max-width:100vw!important;
overflow-x:hidden!important;
overscroll-behavior:none!important;
scroll-behavior:auto!important;
-webkit-text-size-adjust:100%!important;
text-size-adjust:100%!important;
}
html,body{touch-action:pan-x pan-y!important;}
/* Mobile/tablet: the app shell owns the viewport and .main owns vertical scroll.
This prevents the Safari body itself from rubber-banding behind the app. */
@media(max-width:1023px){
html,body,#app,.shell{
width:100%!important;
/* Keep the no-bounce lock, but inherit the physical Home Screen canvas
resolved by the mobile-navigation geometry controller. Never restore
100dvh here: installed iOS PWAs may report it shorter than the screen. */
height:var(--ww-shell-h,100lvh)!important;
min-height:0!important;
overflow:hidden!important;
}
.main{
width:100%!important;
height:100%!important;
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:none!important;
-webkit-overflow-scrolling:touch!important;
}
input,textarea,select{
font-size:16px!important; /* prevents iPhone focus zoom */
}
}
/* Real scroll areas stay scrollable, but cannot hand overscroll to the page. */
.main,.content,.page,#page,.modal-body,.modal-scroll,.chat-scroll,.cv-threads,
.cl-threads,.avail-grid-wrap,.employee-picker,.simple-list,.rwg-wrap,
.roster-grid-wrap,.updates-list,.docs-list,.bookings-list{
overscroll-behavior:contain!important;
scroll-behavior:auto!important;
}
/* Avoid layout-shifting press animations while preserving colour feedback. */
button,[data-action],[role="button"],.btn,.icon-btn,.card,.rcard,.cv-row{
will-change:auto!important;
}
/* ---- inline style 67 ---- */
@media (max-width:1023px){
html,body{
width:100%!important;
max-width:100%!important;
overflow-x:hidden!important;
overscroll-behavior:none!important;
-webkit-text-size-adjust:100%!important;
text-size-adjust:100%!important;
}
body.ww-native-form-active{
position:fixed!important;
inset:0!important;
width:100%!important;
height:var(--ww-native-form-height,100svh)!important;
max-height:var(--ww-native-form-height,100svh)!important;
overflow:hidden!important;
overscroll-behavior:none!important;
touch-action:none!important;
}
body.ww-native-form-active #app,
body.ww-native-form-active .shell,
body.ww-native-form-active .main{
width:100%!important;
max-width:100%!important;
height:var(--ww-native-form-height,100svh)!important;
max-height:var(--ww-native-form-height,100svh)!important;
overflow:hidden!important;
overscroll-behavior:none!important;
transform:none!important;
}
body.ww-native-form-active #modalHost,
body.ww-native-form-active .modal-overlay,
body.ww-native-form-active .modal-backdrop,
body.ww-native-form-active [role="dialog"]{
position:fixed!important;
inset:0!important;
width:100%!important;
max-width:100%!important;
height:var(--ww-native-form-height,100svh)!important;
max-height:var(--ww-native-form-height,100svh)!important;
overflow:hidden!important;
overscroll-behavior:none!important;
touch-action:none!important;
transform:none!important;
}
body.ww-native-form-active .modal,
body.ww-native-form-active .modal-card,
body.ww-native-form-active .shift-modal,
body.ww-native-form-active .timesheet-modal,
body.ww-native-form-active .sheet,
body.ww-native-form-active .drawer,
body.ww-native-form-active [role="dialog"] > *{
max-width:100%!important;
overflow-x:hidden!important;
overscroll-behavior:none!important;
transform:none!important;
}
body.ww-native-form-active .modal-body,
body.ww-native-form-active .modal-scroll,
body.ww-native-form-active .sheet-body,
body.ww-native-form-active .drawer-body,
body.ww-native-form-active .shift-modal .modal-body,
body.ww-native-form-active .timesheet-modal .modal-body,
body.ww-native-form-active [role="dialog"] .modal-body,
body.ww-native-form-active [role="dialog"] .modal-scroll{
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior-y:contain!important;
overscroll-behavior-x:none!important;
-webkit-overflow-scrolling:touch!important;
scroll-behavior:auto!important;
touch-action:pan-y!important;
transform:none!important;
}
body.ww-native-form-active input,
body.ww-native-form-active textarea,
body.ww-native-form-active select,
body.ww-native-form-active [contenteditable="true"]{
min-width:0!important;
max-width:100%!important;
font-size:16px!important;
-webkit-text-size-adjust:100%!important;
touch-action:manipulation!important;
transform:none!important;
animation:none!important;
transition-property:border-color,box-shadow,background-color,color!important;
}
body.ww-native-form-active button,
body.ww-native-form-active a,
body.ww-native-form-active [role="button"],
body.ww-native-form-active label{
touch-action:manipulation!important;
}
body.ww-native-form-keyboard .modal,
body.ww-native-form-keyboard .modal-card,
body.ww-native-form-keyboard .shift-modal,
body.ww-native-form-keyboard .timesheet-modal,
body.ww-native-form-keyboard .sheet,
body.ww-native-form-keyboard .drawer{
transform:none!important;
animation:none!important;
}
}
/* ---- inline style 68 ---- */
body[data-modal-type="shift"] .ww515-schedule-step>.ww517-visibility{
margin:10px 0 0!important;padding:10px!important;border-radius:13px!important;
background:#f8faf5!important;border:1px solid rgba(48,89,56,.13)!important;box-shadow:none!important;
}
body[data-modal-type="shift"] .ww517-visibility .panel-title{
display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0 0 8px!important;min-height:0!important;
}
body[data-modal-type="shift"] .ww517-visibility .panel-title>span:first-child{
display:flex!important;align-items:center!important;gap:6px!important;font-size:11.5px!important;font-weight:900!important;color:#263a2c!important;
}
body[data-modal-type="shift"] .ww517-visibility .panel-title svg{width:15px!important;height:15px!important;color:#356f48!important}
body[data-modal-type="shift"] .ww517-visibility .vis-state-pill{
padding:4px 8px!important;border-radius:999px!important;font-size:8.5px!important;font-weight:950!important;letter-spacing:.03em!important;
}
body[data-modal-type="shift"] .ww517-visibility .vis-toggle{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin:0!important}
body[data-modal-type="shift"] .ww517-visibility .vis-opt{
min-height:42px!important;padding:7px 9px!important;border-radius:11px!important;gap:7px!important;
border:1px solid rgba(48,80,53,.13)!important;background:#fff!important;box-shadow:none!important;
}
body[data-modal-type="shift"] .ww517-visibility .vis-opt-copy strong{font-size:11px!important;font-weight:900!important}
body[data-modal-type="shift"] .ww517-visibility .vis-opt-copy small{display:block!important;font-size:8px!important;line-height:1.15!important;color:#7c877f!important}
body[data-modal-type="shift"] .ww517-visibility .vis-opt.active .vis-opt-copy small{color:rgba(255,255,255,.78)!important}
body[data-modal-type="shift"] .ww517-visibility .vis-opt-icon{width:20px!important;height:20px!important}
body[data-modal-type="shift"] .ww517-visibility .vis-opt-check{right:7px!important;width:17px!important;height:17px!important;font-size:10px!important}
body[data-modal-type="shift"] .ww517-visibility .vis-hint{margin:7px 1px 0!important;font-size:8.8px!important;line-height:1.3!important;color:#738078!important}
body[data-modal-type="shift"] .ww517-single-staff{
margin-top:9px!important;padding:10px!important;border-radius:13px!important;background:#f7faf5!important;border:1px solid rgba(43,91,54,.13)!important;
}
body[data-modal-type="shift"] .ww517-single-head{
display:grid!important;grid-template-columns:32px minmax(0,1fr) auto!important;align-items:center!important;gap:9px!important;margin-bottom:8px!important;
}
body[data-modal-type="shift"] .ww517-single-head>span:nth-child(2){display:flex!important;flex-direction:column!important;gap:1px!important}
body[data-modal-type="shift"] .ww517-single-head strong{font-size:12.5px!important;color:#24382b!important;font-weight:900!important}
body[data-modal-type="shift"] .ww517-single-head small{font-size:9px!important;color:#7b867e!important}
body[data-modal-type="shift"] .ww517-single-pill{padding:5px 8px!important;border-radius:999px!important;background:#e3efe1!important;color:#23613a!important;font-size:10px!important;font-weight:950!important}
body[data-modal-type="shift"] .ww517-single-row{
display:grid!important;grid-template-columns:34px minmax(0,1fr) auto!important;align-items:center!important;gap:9px!important;min-height:50px!important;padding:7px 9px!important;
border-radius:11px!important;background:#fff!important;border:1px solid rgba(45,82,51,.10)!important;
}
body[data-modal-type="shift"] .ww517-single-row .ww511-allocation-av{width:32px!important;height:32px!important;border-radius:9px!important;font-size:9px!important}
body[data-modal-type="shift"] .ww517-single-row .ww511-allocation-copy strong{font-size:11.5px!important}
body[data-modal-type="shift"] .ww517-single-row .ww511-allocation-copy small{font-size:9px!important}
body[data-modal-type="shift"] .ww517-single-row .ww515-row-hours{font-size:12px!important;color:#23653a!important}
body[data-modal-type="shift"] .ww517-single-staff>p{margin:7px 2px 0!important;font-size:8.8px!important;color:#748078!important}
@media (min-width:1024px){
body[data-modal-type="shift"] .ww515-schedule-step>.ww517-visibility{margin-top:10px!important;padding:10px 11px!important}
body[data-modal-type="shift"] .ww517-visibility .vis-opt{min-height:44px!important}
body[data-modal-type="shift"] .ww517-single-staff{margin-top:13px!important;padding:11px 12px!important;border-top:1px solid rgba(39,76,47,.08)!important}
body[data-modal-type="shift"] .ww517-single-row{min-height:52px!important}
}
@media (max-width:390px){
body[data-modal-type="shift"] .ww517-visibility .vis-opt-copy small{display:none!important}
body[data-modal-type="shift"] .ww517-visibility .vis-opt{min-height:39px!important;padding:6px 7px!important}
}
/* ---- inline style 69 ---- */
body[data-modal-type="shift"] .ww517-visibility .vis-opt.vis-published.active{
background:linear-gradient(135deg,#2f7b45,#24643a)!important;
border-color:#24643a!important;color:#fff!important;
box-shadow:0 4px 10px rgba(35,99,55,.16)!important;
}
body[data-modal-type="shift"] .ww517-visibility .vis-opt.vis-draft.active{
background:linear-gradient(135deg,#fff1be,#f5d984)!important;
border-color:#d2a832!important;color:#513b08!important;
box-shadow:0 4px 10px rgba(162,122,21,.14)!important;
}
body[data-modal-type="shift"] .ww517-visibility .vis-opt.vis-draft.active .vis-opt-copy strong,
body[data-modal-type="shift"] .ww517-visibility .vis-opt.vis-draft.active .vis-opt-icon,
body[data-modal-type="shift"] .ww517-visibility .vis-opt.vis-draft.active .vis-opt-check{color:#513b08!important}
body[data-modal-type="shift"] .ww517-visibility .vis-opt.vis-draft.active .vis-opt-copy small{color:#795f1c!important}
body[data-modal-type="shift"] .ww517-single-row .ww511-allocation-copy{
display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important;min-width:0!important;
}
body[data-modal-type="shift"] .ww517-single-row .ww511-allocation-copy strong{
display:block!important;width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.2!important;
}
body[data-modal-type="shift"] .ww517-single-row .ww511-allocation-copy small{
display:block!important;width:100%!important;line-height:1.2!important;color:#748078!important;
}
/* ---- inline style 70 ---- */
/* Compact shared day navigation and readable full team names on roster cards. */
@media(max-width:1023px){
.ww522-roster-controls{
margin:0 0 10px!important;
padding:9px 10px 8px!important;
border-radius:18px!important;
box-shadow:0 7px 20px rgba(25,55,34,.065),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.ww522-roster-controls .ww521-picker-head{display:none!important;}
.ww522-roster-controls .ww521-control-search{
margin:0 0 8px!important;
padding:0 0 8px!important;
}
.ww522-roster-controls .ww521-control-search-label{display:none!important;}
.ww522-roster-controls .rwg-search-top{
height:40px!important;
min-height:40px!important;
padding:0 11px!important;
border-radius:12px!important;
background:#f6f8f4!important;
}
.ww522-roster-controls .rwg-search-top input{
height:38px!important;
font-size:12.5px!important;
font-weight:620!important;
}
.ww522-roster-controls .rwg-search-ic{width:17px!important;height:17px!important;}
.ww522-roster-controls .rst-days,
.ww522-roster-controls .rst-days-admin{
gap:5px!important;
}
.ww522-roster-controls .rst-day,
.ww522-roster-controls .rst-days-admin .rst-day{
min-height:52px!important;
padding:5px 1px 4px!important;
border-radius:13px!important;
gap:1px!important;
box-shadow:0 2px 5px rgba(24,49,31,.04),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.ww522-roster-controls .rd-dow{font-size:7.4px!important;}
.ww522-roster-controls .rd-num{font-size:16px!important;line-height:1!important;}
.ww522-roster-controls .rd-cnt{
min-width:15px!important;height:15px!important;padding:0 4px!important;font-size:7.5px!important;
}
.ww522-roster-controls .rd-stats,
.ww522-roster-controls .rst-days-admin .rd-stats{
min-width:30px!important;height:14px!important;padding:0 3px!important;gap:2px!important;
}
.ww522-roster-controls .rd-stats b,
.ww522-roster-controls .rst-days-admin .rd-stats b{font-size:7px!important;}
.ww522-roster-controls .rd-stats em,
.ww522-roster-controls .rst-days-admin .rd-stats em{font-size:6.7px!important;}
.ww522-roster-controls .ww521-selected-day{
min-height:34px!important;
margin:7px 0 0!important;
padding:7px 1px 0!important;
align-items:center!important;
}
.ww522-roster-controls .ww521-selected-copy>span{display:none!important;}
.ww522-roster-controls .ww521-selected-day h2{
font-size:18px!important;
line-height:1.05!important;
}
.ww522-roster-controls .ww521-selected-meta{
max-width:52%!important;
padding:5px 8px!important;
font-size:8.6px!important;
}
/* Slightly taller only where needed, so every assigned first name can wrap cleanly. */
.roster-mobile .ww522-roster-card,
.home-roster-list .ww522-roster-card{
grid-template-columns:50px minmax(0,1fr) auto!important;
min-height:76px!important;
height:auto!important;
padding:7px 9px!important;
gap:8px!important;
align-items:center!important;
}
.roster-mobile .ww522-roster-card.is-emp,
.home-roster-list .ww522-roster-card.is-emp{min-height:80px!important;}
.ww522-roster-card .ww512-hours-badge{
width:50px!important;min-width:50px!important;height:48px!important;
}
.ww522-card-copy{
gap:2px!important;
align-self:center!important;
overflow:visible!important;
}
.ww522-card-copy .ww512-title-row{margin-bottom:1px!important;}
.ww522-card-copy .ww512-title-row h3{
font-size:13.8px!important;
line-height:1.08!important;
}
.ww522-shift-time{
display:flex!important;
align-items:center!important;
min-width:0!important;
color:rgba(255,255,255,.91)!important;
font-size:9.5px!important;
font-weight:800!important;
line-height:1.15!important;
}
.ww522-team-line{
display:grid!important;
grid-template-columns:auto minmax(0,1fr)!important;
align-items:start!important;
gap:4px!important;
min-width:0!important;
color:rgba(255,255,255,.94)!important;
font-size:9.3px!important;
font-weight:760!important;
line-height:1.18!important;
overflow:visible!important;
}
.ww522-team-label{
display:inline-flex!important;
align-items:center!important;
height:15px!important;
padding:0 5px!important;
border-radius:999px!important;
background:rgba(255,255,255,.15)!important;
color:rgba(255,255,255,.88)!important;
font-size:5.8px!important;
font-weight:950!important;
letter-spacing:.06em!important;
text-transform:uppercase!important;
white-space:nowrap!important;
}
.ww522-team-names{
min-width:0!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
overflow-wrap:normal!important;
word-break:normal!important;
}
.ww522-roster-card.is-admin.is-draft .ww522-shift-time,
.ww522-roster-card.is-admin.is-draft .ww522-team-line{color:#55675a!important;}
.ww522-roster-card.is-admin.is-draft .ww522-team-label{
background:#e8efe6!important;color:#42614b!important;
}
.ww522-roster-card.is-rejected .ww522-shift-time,
.ww522-roster-card.is-rejected .ww522-team-line{color:#9d2d2d!important;}
.ww522-roster-card.is-rejected .ww522-team-label{
background:#f6dada!important;color:#a72a2a!important;
}
.ww522-roster-card .ww512-actions{
align-self:center!important;
}
}
@media(max-width:370px){
.ww522-roster-controls{padding:8px!important;border-radius:16px!important;}
.ww522-roster-controls .rst-days,.ww522-roster-controls .rst-days-admin{gap:3px!important;}
.ww522-roster-controls .rst-day,.ww522-roster-controls .rst-days-admin .rst-day{min-height:49px!important;border-radius:11px!important;}
.ww522-roster-controls .rd-num{font-size:15px!important;}
.roster-mobile .ww522-roster-card,.home-roster-list .ww522-roster-card{grid-template-columns:47px minmax(0,1fr) auto!important;gap:6px!important;padding:7px!important;}
.ww522-roster-card .ww512-hours-badge{width:47px!important;min-width:47px!important;height:46px!important;}
.ww522-card-copy .ww512-title-row h3{font-size:13px!important;}
.ww522-shift-time{font-size:9px!important;}
.ww522-team-line{font-size:8.8px!important;}
}
/* ---- inline style 71 ---- */
/* ============================================================
ADMIN HOME — cleaner, more professional (v120)
Refines the dark "Today" hero, the four stat tiles, the
Add-shift button and the Pending approvals panel. Calmer,
crisper, less ornate. Mobile-first (matches the screenshot)
with desktop kept tidy too.
============================================================ */
/* ---- Hero card: a touch more padding + cleaner depth ---- */
.hm-hero.admin{
background:linear-gradient(150deg,#2f6140 0%,#173a26 100%)!important;
border-radius:20px!important;
padding:16px 16px 15px!important;
box-shadow:0 12px 30px rgba(16,38,22,.22)!important;
}
.hm-hero .hm-eyebrow{font-size:11px!important;letter-spacing:.10em!important;text-transform:uppercase!important;color:rgba(255,255,255,.62)!important;font-weight:700!important}
.hm-hero-copy h1{font-size:24px!important;margin:2px 0 3px!important;letter-spacing:-.01em!important}
.hm-hero-copy p{font-size:12.5px!important;color:rgba(255,255,255,.78)!important;font-weight:500!important}
/* ---- Stat tiles: bigger, clearer, evenly weighted ---- */
.hm-hero-stats{gap:8px!important;margin-top:14px!important}
.hm-hs{
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:14px!important;
padding:11px 6px 9px!important;
display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;
}
.hm-hs strong{font-size:21px!important;font-weight:800!important;line-height:1!important;color:#fff!important}
.hm-hs em{
font-size:9px!important;font-weight:620!important;letter-spacing:.05em!important;
text-transform:uppercase!important;color:rgba(255,255,255,.66)!important;margin-top:0!important;
line-height:1.25!important;
}
/* "To approve" — subtle warm highlight, not a muddy brown block */
.hm-hs.alert{
background:rgba(233,170,84,.16)!important;
border-color:rgba(233,170,84,.42)!important;
box-shadow:none!important;
}
.hm-hs.alert strong{color:#f4c87a!important}
.hm-hs.alert em{color:rgba(244,200,122,.85)!important}
/* ---- Add shift: one clean, confident button (drop the ornate gold pill) ---- */
@media(max-width:720px){
.hm-hero.admin .hm-hero-add{
position:relative!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
gap:7px!important;width:auto!important;height:38px!important;padding:0 15px 0 13px!important;
border-radius:12px!important;
background:#fbfaf6!important;color:#173f25!important;
border:1px solid rgba(255,255,255,.3)!important;
box-shadow:0 4px 12px rgba(0,0,0,.18)!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
font-size:13px!important;font-weight:750!important;letter-spacing:0!important;text-shadow:none!important;
}
.hm-hero.admin .hm-hero-add::before{content:none!important}
.hm-hero.admin .hm-hero-add::after{content:none!important}
.hm-hero.admin .hm-hero-add svg{
width:18px!important;height:18px!important;padding:0!important;border-radius:0!important;
background:none!important;color:#2f6b3e!important;stroke:#2f6b3e!important;stroke-width:2.4!important;
flex:0 0 18px!important;box-shadow:none!important;margin:0!important;
}
.hm-hero.admin .hm-hero-add span{padding:0!important;line-height:1!important;white-space:nowrap!important}
.hm-hero.admin .hm-hero-add:active{transform:scale(.97)!important}
}
/* desktop add-shift stays clean too */
@media(min-width:721px){
.hm-hero.admin .hm-hero-add{
flex-direction:row!important;gap:8px!important;height:40px!important;padding:0 16px!important;
border-radius:12px!important;background:#fbfaf6!important;color:#173f25!important;
border:1px solid rgba(255,255,255,.25)!important;font-size:13.5px!important;font-weight:750!important;
box-shadow:0 4px 12px rgba(0,0,0,.16)!important;backdrop-filter:none!important;
}
.hm-hero.admin .hm-hero-add svg{width:18px!important;height:18px!important;color:#2f6b3e!important;stroke:#2f6b3e!important;stroke-width:2.4!important;background:none!important}
}
/* ---- Pending approvals panel: cleaner, less saturated gold ---- */
.approvals-panel{
background:#fffdf8!important;
border:1px solid rgba(201,150,60,.30)!important;
border-radius:18px!important;
box-shadow:0 4px 14px rgba(140,100,30,.08)!important;
}
.approvals-summary{padding:15px 16px!important;gap:13px!important}
.appr-bell{
width:42px!important;height:42px!important;border-radius:13px!important;
background:linear-gradient(150deg,#dfa441,#b9791d)!important;
box-shadow:0 3px 8px rgba(150,100,20,.22)!important;
}
.appr-bell svg{width:19px!important;height:19px!important}
.appr-sum-txt strong{font-size:16px!important;font-weight:800!important;color:#7a5210!important;letter-spacing:-.01em!important}
.appr-sum-txt span{font-size:12.5px!important;color:#a06f1c!important;font-weight:600!important}
.appr-count{
min-width:26px!important;height:26px!important;border-radius:999px!important;
background:#b9791d!important;font-size:13px!important;font-weight:800!important;
}
.appr-chev{color:#b9791d!important}
/* ---- inline style 72 ---- */
/* ============================================================
ROSTER HEADER — professional redesign (v123)
A refined dark hero with a clean week switcher, an elegant
inline stat strip with a divider, a confident solid "Add shift"
button (no more empty cream bar), and crisp day pills.
============================================================ */
/* ---- Hero card (skinny redesign v131) ---- */
.rst-hero.admin{
background:linear-gradient(155deg,#326545 0%,#15392479 55%,#10301d 100%)!important;
background-color:#173a26!important;
border-radius:20px!important;
padding:12px 13px 13px!important;
box-shadow:0 12px 28px rgba(14,34,20,.24)!important;
border:1px solid rgba(255,255,255,.06)!important;
}
.rst-hero.admin .rst-hero-bg{background:radial-gradient(130% 90% at 88% -20%,rgba(255,255,255,.12),transparent 55%)!important}
/* week switcher — fixed 3-column grid so the date can NEVER collide with the arrows */
.rst-hero-top{
display:grid!important;grid-template-columns:38px minmax(0,1fr) 38px!important;
gap:10px!important;align-items:center!important;
}
.rst-nav{
width:38px!important;height:38px!important;min-width:38px!important;border-radius:13px!important;
border:1px solid rgba(255,255,255,.16)!important;
background:rgba(255,255,255,.07)!important;color:#fff!important;
display:grid!important;place-items:center!important;
transition:background .12s ease,transform .1s ease!important;
}
.rst-nav:active{transform:scale(.92)!important;background:rgba(255,255,255,.14)!important}
.rst-nav svg{width:17px!important;height:17px!important;stroke-width:2.3!important}
.rst-hero-label{min-width:0!important;text-align:center!important;overflow:hidden!important}
.rst-eyebrow{display:block!important;font-size:9.5px!important;line-height:1!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:rgba(255,255,255,.55)!important;font-weight:620!important;margin-bottom:3px!important}
.rst-hero-label strong{
display:block!important;font-size:clamp(16px,5.1vw,21px)!important;letter-spacing:-.015em!important;line-height:1.05!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;
}
/* ---- Inline stat strip with a divider ---- */
.rst-hero.admin .rst-hero-foot{
display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;gap:9px 0!important;margin-top:10px!important;
background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important;
}
/* the two stat tiles share one rounded strip with a centre divider */
.rst-hero.admin .rst-hs{
flex:1 1 0!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.10)!important;
border-radius:0!important;
padding:8px 6px 7px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;
position:relative!important;
}
.rst-hero.admin .rst-hs:first-of-type{border-radius:14px 0 0 14px!important;border-right:0!important}
.rst-hero.admin .rst-hs:nth-of-type(2){border-radius:0 14px 14px 0!important;border-left:0!important}
.rst-hero.admin .rst-hs:nth-of-type(2)::before{
content:""!important;position:absolute!important;left:0!important;top:20%!important;bottom:20%!important;width:1px!important;
background:rgba(255,255,255,.14)!important;
}
.rst-hero.admin .rst-hs strong{font-size:20px!important;font-weight:800!important;line-height:1!important;color:#fff!important;letter-spacing:-.01em!important}
.rst-hero.admin .rst-hs em{font-size:9px!important;font-weight:620!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:rgba(255,255,255,.6)!important;margin-top:0!important}
/* ---- Add shift: confident solid button on its own full-width row ---- */
.rst-hero.admin .rst-hero-add{
flex:0 0 100%!important;width:100%!important;order:2!important;
display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;
min-height:42px!important;border-radius:14px!important;padding:0 16px!important;
background:linear-gradient(180deg,#ffffff,#f4f1e8)!important;color:#163a24!important;
border:0!important;
box-shadow:0 7px 16px rgba(8,24,12,.26),inset 0 1px 0 rgba(255,255,255,.9)!important;
font-size:14.5px!important;font-weight:800!important;letter-spacing:-.01em!important;overflow:visible!important;
transition:transform .1s ease,box-shadow .14s ease!important;
}
.rst-hero.admin .rst-hero-add::before{content:none!important}
.rst-hero.admin .rst-hero-add .rha-ic{
width:28px!important;height:28px!important;border-radius:50%!important;flex-shrink:0!important;
background:linear-gradient(145deg,#43935a,#1f6531)!important;
box-shadow:0 3px 8px rgba(31,101,49,.36)!important;display:grid!important;place-items:center!important;
}
.rst-hero.admin .rst-hero-add svg{width:15px!important;height:15px!important;stroke:#fff!important;stroke-width:3!important}
.rst-hero.admin .rst-hero-add span{position:relative;z-index:1}
.rst-hero.admin .rst-hero-add:active{transform:scale(.985)!important;box-shadow:0 4px 12px rgba(8,24,12,.26),inset 0 1px 0 rgba(255,255,255,.9)!important}
/* ---- Employee search ---- */
.rwg-search{
border-radius:14px!important;height:50px!important;padding:0 15px!important;
border:1px solid rgba(20,31,23,.09)!important;
box-shadow:0 2px 6px rgba(20,31,23,.05)!important;
}
.rwg-search-ic svg{width:18px!important;height:18px!important}
.rwg-search input{font-size:15px!important;font-weight:500!important}
.rwg-search input::placeholder{color:#a7b0a6!important;font-weight:500!important}
/* ---- Day selector ---- */
.rst-days{gap:6px!important;margin-bottom:16px!important}
.rst-day{
position:relative!important;gap:3px!important;padding:7px 2px 6px!important;
border-radius:13px!important;background:#fff!important;
border:1px solid rgba(20,31,23,.07)!important;
box-shadow:0 1px 4px rgba(20,31,23,.05)!important;
transition:transform .1s ease,box-shadow .12s ease!important;
}
.rst-day:active{transform:scale(.95)!important}
.rd-dow{font-size:9px!important;font-weight:800!important;letter-spacing:.05em!important;color:#9aa090!important}
.rd-num{font-size:16px!important;font-weight:800!important;color:var(--ink-900,#1a241c)!important;line-height:1!important}
.rd-cnt{
min-width:16px!important;height:16px!important;padding:0 4px!important;border-radius:999px!important;
background:#b07a4a!important;color:#fff!important;font-size:9px!important;font-weight:800!important;
display:grid!important;place-items:center!important;box-shadow:0 1px 2px rgba(120,70,30,.22)!important;
}
.rd-empty{width:4px!important;height:4px!important;border-radius:50%!important;background:rgba(20,31,23,.13)!important}
.rst-day.today{box-shadow:inset 0 0 0 1.5px rgba(47,107,62,.45),0 1px 4px rgba(20,31,23,.05)!important}
.rst-day.today .rd-dow{color:#2f6b3e!important}
.rst-day.sel{
background:linear-gradient(170deg,#3f8a52,#2f6b3e)!important;border-color:transparent!important;
box-shadow:0 5px 12px rgba(47,107,62,.30)!important;
}
.rst-day.sel .rd-dow{color:rgba(255,255,255,.82)!important}
.rst-day.sel .rd-num{color:#fff!important}
.rst-day.sel .rd-cnt{background:rgba(255,255,255,.28)!important;color:#fff!important;box-shadow:none!important}
.rst-day.sel .rd-empty{background:rgba(255,255,255,.5)!important}
/* ---- Day heading ---- */
.rst-day-head h2{font-size:21px!important;letter-spacing:-.015em!important}
.rst-day-head span{font-size:13px!important;font-weight:650!important;color:var(--ink-500,#5d6b60)!important}
/* ---- inline style 73 ---- */
/* V143 — requested only: desktop Messages section redesign. Mobile chat remains untouched. */
@media (min-width:1024px){
body:has(.chat-shell) .topbar{
background:linear-gradient(135deg,#183521 0%,#264b2f 58%,#375e3a 100%)!important;
color:#fff8e8!important;
border-bottom:1px solid rgba(255,255,255,.10)!important;
box-shadow:0 18px 38px rgba(12,30,18,.16)!important;
}
body:has(.chat-shell) .topbar h1,
body:has(.chat-shell) #pageTitle{color:#fff8e8!important;}
body:has(.chat-shell) .topbar .sub,
body:has(.chat-shell) #pageSub{color:rgba(255,248,232,.72)!important;}
.content:has(.chat-shell){
padding:22px clamp(22px,2.8vw,46px) 34px!important;
background:
radial-gradient(circle at 12% 0%,rgba(180,124,76,.13),transparent 36%),
radial-gradient(circle at 92% 12%,rgba(74,115,81,.16),transparent 38%),
linear-gradient(180deg,#eef5ea 0%,#f8f2e6 100%)!important;
}
.content:has(.chat-shell) .section-head{display:none!important;}
.chat-shell{
height:calc(100dvh - 132px)!important;
min-height:620px!important;
width:100%!important;
max-width:1480px!important;
margin:0 auto!important;
display:grid!important;
grid-template-columns:minmax(340px,392px) minmax(0,1fr)!important;
gap:0!important;
overflow:hidden!important;
border-radius:30px!important;
border:1px solid rgba(39,70,43,.16)!important;
background:linear-gradient(135deg,#fffdf7 0%,#eef4e8 48%,#f3e9d8 100%)!important;
box-shadow:0 26px 70px rgba(13,36,20,.18),0 2px 0 rgba(255,255,255,.78) inset!important;
}
.chat-list.cv-list{
width:auto!important;
flex:initial!important;
min-width:0!important;
height:100%!important;
padding:18px 14px 16px!important;
border:0!important;
border-right:1px solid rgba(37,67,41,.13)!important;
border-radius:30px 0 0 30px!important;
background:linear-gradient(180deg,#fffaf0 0%,#edf4e7 100%)!important;
box-shadow:inset -1px 0 0 rgba(255,255,255,.48)!important;
}
.cv-head{
min-height:72px!important;
padding:14px 12px 12px!important;
margin:0 0 12px!important;
border-radius:22px!important;
background:linear-gradient(145deg,#244a2d 0%,#17341f 100%)!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:0 14px 28px rgba(21,52,29,.18)!important;
position:relative!important;
}
.cv-head-label{
color:#fff8e8!important;
font-family:var(--font-display,Georgia,serif)!important;
font-size:27px!important;
font-weight:650!important;
line-height:1!important;
letter-spacing:-.035em!important;
text-transform:none!important;
}
.cv-head::after{
content:"Team conversations";
position:absolute;
left:13px;
bottom:12px;
font-size:11.5px;
font-weight:800;
letter-spacing:.02em;
color:rgba(255,248,232,.62);
}
.cv-new{
width:44px!important;height:44px!important;border-radius:16px!important;
background:linear-gradient(180deg,#fffaf0,#e8ead7)!important;
color:#173a24!important;border:1px solid rgba(255,255,255,.55)!important;
box-shadow:0 8px 18px rgba(5,19,9,.24),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.cv-archive-filter{
height:34px!important;
border-radius:999px!important;
padding:0 12px!important;
background:rgba(255,255,255,.12)!important;
color:#fff8e8!important;
border:1px solid rgba(255,255,255,.14)!important;
font-weight:900!important;
}
.cv-search{
height:50px!important;
margin:0 0 12px!important;
padding:0 15px!important;
border-radius:18px!important;
background:#fffdf8!important;
border:1px solid rgba(41,74,45,.14)!important;
box-shadow:0 8px 18px rgba(18,40,22,.06),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.cv-search:focus-within{border-color:rgba(49,92,55,.42)!important;box-shadow:0 0 0 4px rgba(49,92,55,.12),0 8px 18px rgba(18,40,22,.06)!important;}
.cv-search input{font-size:14.5px!important;font-weight:750!important;color:#17291b!important;}
.cv-search-ic svg{width:18px!important;height:18px!important;stroke:#52715a!important;}
.cv-threads{
padding:0 2px 10px!important;
gap:8px!important;
scrollbar-width:thin;
scrollbar-color:rgba(52,91,56,.28) transparent;
}
.cv-threads::-webkit-scrollbar{width:8px;}
.cv-threads::-webkit-scrollbar-thumb{background:rgba(52,91,56,.25);border-radius:999px;}
.cv-people-label{
padding:10px 10px 4px!important;
font-size:10.5px!important;
color:#72806f!important;
letter-spacing:.14em!important;
}
.cv-row{
padding:13px 12px!important;
border-radius:18px!important;
gap:12px!important;
border:1px solid transparent!important;
background:rgba(255,253,248,.58)!important;
box-shadow:0 7px 18px rgba(19,41,22,.045)!important;
transition:background .12s ease,border-color .12s ease,transform .10s ease!important;
}
.cv-row:hover{background:#fffdf8!important;border-color:rgba(50,82,52,.14)!important;transform:translateY(-1px)!important;}
.cv-row.active{
background:linear-gradient(135deg,#e4efd9 0%,#fff5e5 100%)!important;
border-color:rgba(50,95,56,.30)!important;
box-shadow:0 12px 28px rgba(31,70,36,.12),inset 4px 0 0 #2f6b3e!important;
}
.cv-row.cv-unread{background:#fffef9!important;border-color:rgba(47,107,62,.18)!important;}
.cv-av .avatar{
width:46px!important;height:46px!important;border-radius:16px!important;
font-size:14px!important;box-shadow:0 8px 18px rgba(21,43,24,.12)!important;
}
.cv-name{font-size:15.5px!important;font-weight:850!important;color:#17251a!important;}
.cv-last{font-size:13px!important;line-height:1.28!important;color:#647063!important;max-width:100%!important;}
.cv-time{font-size:11px!important;color:#8c9788!important;}
.cv-pintag{border-radius:999px!important;padding:2px 8px!important;font-size:8.7px!important;}
.cv-readtoggle{width:32px!important;min-width:32px!important;height:32px!important;box-shadow:none!important;}
.cv-mini-action{width:30px!important;height:30px!important;border-radius:12px!important;}
.chat-thread{
height:100%!important;
min-width:0!important;
border:0!important;
border-radius:0 30px 30px 0!important;
background:linear-gradient(180deg,#f8fbf3 0%,#f2eadc 100%)!important;
box-shadow:none!important;
display:flex!important;
flex-direction:column!important;
}
.chat-thread.empty-thread{
display:grid!important;
place-items:center!important;
color:#546354!important;
background:linear-gradient(145deg,#f8fbf3,#f2eadc)!important;
}
.chat-thread-head.ct-head,
.chat-thread-head{
display:flex!important;align-items:center!important;gap:13px!important;
min-height:84px!important;
padding:16px 22px!important;
border-bottom:1px solid rgba(35,67,39,.11)!important;
background:rgba(255,253,247,.82)!important;
-webkit-backdrop-filter:blur(14px)!important;
backdrop-filter:blur(14px)!important;
color:#17251a!important;
}
.chat-thread-head .cth-back{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border-radius:13px!important;background:#fffaf0!important;border:1px solid rgba(41,74,45,.14)!important;color:#244d2d!important;flex-shrink:0!important;cursor:pointer!important}
.chat-thread-head .avatar,
.cth-card .avatar{
width:52px!important;height:52px!important;border-radius:18px!important;
box-shadow:0 10px 22px rgba(22,45,25,.13)!important;
}
.cth-card{
display:flex!important;align-items:center!important;gap:13px!important;min-width:0!important;
flex:1!important;text-align:left!important;border:0!important;background:transparent!important;color:inherit!important;padding:0!important;
}
.cth-info{display:flex!important;flex-direction:column!important;gap:3px!important;}
.cth-name{font-size:20px!important;font-weight:900!important;color:#17251a!important;letter-spacing:-.02em!important;}
.cth-sub{font-size:12.5px!important;font-weight:750!important;color:#667460!important;}
.cth-act{
width:42px!important;height:42px!important;border-radius:15px!important;
background:#fffaf0!important;border:1px solid rgba(41,74,45,.14)!important;color:#244d2d!important;
}
.chat-scroll{
flex:1 1 auto!important;min-height:0!important;
padding:26px clamp(24px,3vw,42px)!important;
gap:11px!important;
background:
linear-gradient(rgba(255,255,255,.34) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px),
radial-gradient(circle at 12% 10%,rgba(196,138,74,.10),transparent 30%),
linear-gradient(180deg,#edf5e8 0%,#fbf4e8 100%)!important;
background-size:28px 28px,28px 28px,auto,auto!important;
overflow-y:auto!important;
}
.msg{max-width:76%!important;gap:10px!important;}
.msg.mine{max-width:76%!important;}
.msg-av{width:36px!important;}
.msg-av .avatar{width:34px!important;height:34px!important;border-radius:13px!important;font-size:11px!important;}
.bubble{
max-width:min(680px,100%)!important;
padding:12px 15px!important;
border-radius:20px 20px 20px 7px!important;
background:#fffdf8!important;
border:1px solid rgba(40,67,43,.10)!important;
box-shadow:0 12px 26px rgba(23,44,25,.08)!important;
}
.msg.mine .bubble{
border-radius:20px 20px 7px 20px!important;
background:linear-gradient(140deg,#315f3a 0%,#173d25 100%)!important;
box-shadow:0 14px 30px rgba(20,58,29,.20)!important;
}
.b-author{font-size:11px!important;color:#a8643d!important;font-weight:950!important;margin-bottom:4px!important;}
.b-text{font-size:14.8px!important;line-height:1.45!important;letter-spacing:-.01em!important;}
.bubble time{font-size:10.5px!important;margin-top:6px!important;}
.msg-status{font-size:11px!important;margin-top:5px!important;font-weight:850!important;}
.typing-row{padding:4px 12px 12px!important;color:#526257!important;font-weight:750!important;}
.chat-composer{
flex:0 0 auto!important;
align-items:flex-end!important;
gap:10px!important;
padding:16px 20px!important;
border-top:1px solid rgba(35,67,39,.12)!important;
background:linear-gradient(180deg,rgba(255,253,247,.92),#e7efe0)!important;
box-shadow:0 -14px 32px rgba(17,38,21,.07)!important;
}
.chat-composer .cattach{
width:46px!important;height:46px!important;border-radius:17px!important;
background:#fffdf8!important;color:#21492b!important;border:1px solid rgba(37,70,43,.14)!important;
}
.chat-composer .chat-editbox,
.chat-composer .input{
min-height:46px!important;
height:auto!important;
max-height:120px!important;
flex:1!important;
display:flex!important;align-items:center!important;
border-radius:18px!important;
padding:12px 16px!important;
background:#fffdf8!important;
border:1px solid rgba(37,70,43,.17)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important;
font-size:15px!important;
line-height:1.35!important;
color:#17251a!important;
overflow-y:auto!important;
}
.chat-composer .chat-editbox:focus,
.chat-composer .input:focus{outline:none!important;border-color:rgba(48,95,56,.44)!important;box-shadow:0 0 0 4px rgba(48,95,56,.11),inset 0 1px 0 rgba(255,255,255,.9)!important;}
.chat-composer .csend{
width:46px!important;height:46px!important;border-radius:17px!important;
background:linear-gradient(140deg,#315f3a,#173d25)!important;
box-shadow:0 12px 24px rgba(23,61,37,.25),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
}
/* ---- inline style 74 ---- */
/* Requested only: keep the existing STAFF bar design/colour, use first names, shrink the bar to the name length, and centre names vertically. */
@media (max-width:1023px){
.roster-mobile .rcard .rc-meta,.home-roster-list .rcard .rc-meta,.rcard.is-emp .rc-meta{
overflow:visible!important;text-overflow:clip!important;white-space:normal!important;line-height:1.22!important;
}
.roster-mobile .rcard .rc-meta.rc-meta-full,.home-roster-list .rcard .rc-meta.rc-meta-full,.rcard.is-emp .rc-meta.rc-meta-full{
width:100%!important;max-width:100%!important;flex:0 0 100%!important;align-self:stretch!important;display:block!important;
}
.roster-mobile .rcard .rc-meta .rc-staff-line,.home-roster-list .rcard .rc-meta .rc-staff-line,.rcard.is-emp .rc-meta .rc-staff-line{
display:inline-flex!important;grid-template-columns:unset!important;align-items:center!important;justify-content:flex-start!important;
gap:7px!important;margin-top:5px!important;padding:3px 11px 3px 4px!important;border-radius:999px!important;
background:#173b23!important;background:color-mix(in srgb,var(--deep,#163f24) 88%,#000 12%)!important;
color:#fff!important;border:1px solid rgba(255,255,255,.20)!important;
box-shadow:0 4px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16)!important;
width:fit-content!important;min-width:0!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.roster-mobile .rcard .rc-meta .rc-staff-line .rc-staff-kicker,.home-roster-list .rcard .rc-meta .rc-staff-line .rc-staff-kicker,.rcard.is-emp .rc-meta .rc-staff-line .rc-staff-kicker{
display:inline-flex!important;align-items:center!important;justify-content:center!important;height:20px!important;padding:0 9px!important;border-radius:999px!important;
background:#7fb56a!important;color:#10240f!important;font-size:9.4px!important;font-weight:900!important;letter-spacing:.09em!important;line-height:1!important;
flex:0 0 auto!important;text-shadow:none!important;box-shadow:0 1px 2px rgba(0,0,0,.2)!important;
}
.roster-mobile .rcard .rc-meta .rc-staff-line .rc-staff-names,.home-roster-list .rcard .rc-meta .rc-staff-line .rc-staff-names,.rcard.is-emp .rc-meta .rc-staff-line .rc-staff-names{
display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
width:auto!important;min-width:0!important;max-width:calc(100vw - 160px)!important;height:20px!important;padding:0!important;
background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:#ffffff!important;font-weight:900!important;line-height:20px!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important;flex:0 1 auto!important;
}
}
/* ---- inline style 75 ---- */
/* WW_V198_STAFFBAR_SKINNY_FIRSTNAMES_START
Requested only: make the existing employee-name STAFF bar skinny, keep the same colours/design, keep first names only, and keep the names centered vertically. */
@media (max-width:1023px){
.roster-mobile .rcard .rc-meta,
.home-roster-list .rcard .rc-meta,
.rcard.is-emp .rc-meta{
overflow:visible!important;
text-overflow:clip!important;
white-space:normal!important;
line-height:1.15!important;
}
.roster-mobile .rcard .rc-meta.rc-meta-full,
.home-roster-list .rcard .rc-meta.rc-meta-full,
.rcard.is-emp .rc-meta.rc-meta-full{
width:auto!important;
max-width:100%!important;
flex:0 0 100%!important;
align-self:stretch!important;
display:block!important;
}
.roster-mobile .rcard .rc-meta .rc-staff-line,
.home-roster-list .rcard .rc-meta .rc-staff-line,
.rcard.is-emp .rc-meta .rc-staff-line{
display:inline-flex!important;
grid-template-columns:unset!important;
align-items:center!important;
justify-content:flex-start!important;
gap:6px!important;
margin-top:4px!important;
padding:2px 8px 2px 3px!important;
min-height:22px!important;
height:22px!important;
border-radius:999px!important;
background:#173b23!important;
background:color-mix(in srgb,var(--deep,#163f24) 88%,#000 12%)!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.20)!important;
box-shadow:0 4px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16)!important;
width:fit-content!important;
min-width:0!important;
max-width:100%!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
box-sizing:border-box!important;
}
.roster-mobile .rcard .rc-meta .rc-staff-line .rc-staff-kicker,
.home-roster-list .rcard .rc-meta .rc-staff-line .rc-staff-kicker,
.rcard.is-emp .rc-meta .rc-staff-line .rc-staff-kicker{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:17px!important;
min-height:17px!important;
padding:0 8px!important;
border-radius:999px!important;
background:#7fb56a!important;
color:#10240f!important;
font-size:8.7px!important;
font-weight:900!important;
letter-spacing:.09em!important;
line-height:17px!important;
flex:0 0 auto!important;
text-shadow:none!important;
box-shadow:0 1px 2px rgba(0,0,0,.2)!important;
box-sizing:border-box!important;
}
.roster-mobile .rcard .rc-meta .rc-staff-line .rc-staff-names,
.home-roster-list .rcard .rc-meta .rc-staff-line .rc-staff-names,
.rcard.is-emp .rc-meta .rc-staff-line .rc-staff-names{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
width:auto!important;
min-width:0!important;
max-width:calc(100vw - 160px)!important;
height:17px!important;
min-height:17px!important;
padding:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
border-radius:0!important;
color:#ffffff!important;
font-size:12.5px!important;
font-weight:900!important;
line-height:17px!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
word-break:normal!important;
flex:0 1 auto!important;
box-sizing:border-box!important;
}
.rgc-staff{
display:inline-flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:6px!important;
margin-top:4px!important;
padding:2px 8px 2px 3px!important;
min-height:22px!important;
height:22px!important;
width:fit-content!important;
max-width:100%!important;
border-radius:999px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.rgc-staff-kicker{height:17px!important;min-height:17px!important;padding:0 8px!important;font-size:8.7px!important;line-height:17px!important;box-sizing:border-box!important;}
.rgc-staff-names{display:inline-flex!important;align-items:center!important;height:17px!important;line-height:17px!important;font-size:12.5px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
}
/* WW_V198_STAFFBAR_SKINNY_FIRSTNAMES_END */
/* ---- inline style 76 ---- */
/* V199 final override — only align the roster week stats/date and remove laggy motion. */
@media (max-width:1023px){
.rst-hero.admin,.rst-hero.staff{contain:layout paint!important;transform:translateZ(0)!important;backface-visibility:hidden!important;}
.rst-hero-top{display:grid!important;grid-template-columns:38px minmax(0,1fr) 38px!important;align-items:center!important;gap:8px!important;min-height:38px!important;}
.rst-hero-label{min-width:0!important;width:100%!important;max-width:100%!important;text-align:center!important;overflow:hidden!important;padding:0 2px!important;}
.rst-eyebrow{display:block!important;line-height:1!important;margin:0 0 3px!important;}
.rst-hero-label strong{display:block!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:center!important;line-height:1.04!important;font-size:clamp(16px,4.7vw,19px)!important;}
.rst-nav{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;justify-self:center!important;align-self:center!important;}
.rst-hero-foot,
.rst-hero.admin .rst-hero-foot,
.rst-hero.staff .rst-hero-foot{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch!important;gap:8px!important;margin-top:9px!important;width:100%!important;max-width:100%!important;}
.rst-hero.admin .rst-hs,.rst-hero.staff .rst-hs{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;width:100%!important;min-width:0!important;max-width:100%!important;height:42px!important;min-height:42px!important;padding:0 5px!important;margin:0!important;border-radius:13px!important;border:1px solid rgba(255,255,255,.11)!important;background:rgba(255,255,255,.075)!important;box-sizing:border-box!important;position:relative!important;}
.rst-hero.admin .rst-hs:first-of-type,.rst-hero.staff .rst-hs:first-of-type,.rst-hero.admin .rst-hs:nth-of-type(2),.rst-hero.staff .rst-hs:nth-of-type(2){border-radius:13px!important;border:1px solid rgba(255,255,255,.11)!important;}
.rst-hero.admin .rst-hs:nth-of-type(2)::before,.rst-hero.staff .rst-hs:nth-of-type(2)::before{content:none!important;display:none!important;}
.rst-hs strong{display:block!important;width:100%!important;text-align:center!important;line-height:1!important;font-size:18px!important;margin:0!important;font-variant-numeric:tabular-nums!important;}
.rst-hs em{display:block!important;width:100%!important;text-align:center!important;line-height:1!important;margin:2px 0 0!important;font-size:8px!important;letter-spacing:.07em!important;}
.rst-hero.admin .rst-hero-add,.rst-hero.staff .rst-hero-add{grid-column:1 / -1!important;width:100%!important;min-width:0!important;max-width:100%!important;height:40px!important;min-height:40px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;}
}
@media (max-width:390px){
.rst-hero-top{grid-template-columns:34px minmax(0,1fr) 34px!important;gap:7px!important;}
.rst-nav{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;}
.rst-hero-label strong{font-size:clamp(15px,4.45vw,17px)!important;}
.rst-hero-foot,.rst-hero.admin .rst-hero-foot,.rst-hero.staff .rst-hero-foot{gap:7px!important;}
.rst-hero.admin .rst-hs,.rst-hero.staff .rst-hs{height:40px!important;min-height:40px!important;}
.rst-hs strong{font-size:16.5px!important;}
.rst-hs em{font-size:7.4px!important;}
.rst-hero.admin .rst-hero-add,.rst-hero.staff .rst-hero-add{height:39px!important;min-height:39px!important;}
}
.login-root,.login-stage,.login-card,.login-root::before,.login-root::after,.login-stage::before,.login-stage::after{animation:none!important;transition:none!important;will-change:auto!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
.login-root{min-height:100dvh!important;overflow:hidden!important;contain:layout paint!important;transform:translateZ(0)!important;}
.login-stage,.login-card{transform:none!important;}
@media (max-width:1023px){
html,body,#app{scroll-behavior:auto!important;overscroll-behavior:none!important;}
.page,.content,.card,.panel,.rcard,.rgc,.modal,.modal-card,.mobile-nav,.topbar,.login-card,.login-stage,.btn,.icon-btn,button,[data-action]{animation:none!important;transition:none!important;will-change:auto!important;}
.content,.modal-body,.chat-scroll,.cv-threads{-webkit-overflow-scrolling:touch!important;scroll-behavior:auto!important;overscroll-behavior:contain!important;}
}
/* ---- inline style 77 ---- */
html,body,#app{width:100%;min-height:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;}
.login-root{position:fixed!important;inset:0!important;z-index:9999!important;width:100vw!important;height:100dvh!important;min-height:100svh!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;contain:none!important;transform:none!important;padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom))!important;display:flex!important;align-items:center!important;justify-content:center!important;background:radial-gradient(110% 70% at 50% -12%,#3b6f49 0%,rgba(59,111,73,0) 58%),linear-gradient(160deg,#1c3924 0%,#102417 58%,#09130d 100%)!important;}
.login-root::before{content:""!important;position:fixed!important;inset:0!important;pointer-events:none!important;background:radial-gradient(420px 280px at 14% 8%,rgba(255,255,255,.08),transparent 60%),radial-gradient(420px 320px at 95% 92%,rgba(201,151,91,.12),transparent 62%)!important;z-index:0!important;}
.login-root::after{content:none!important;display:none!important}.login-stage::before,.login-stage::after{content:none!important;display:none!important}.login-stage{position:relative!important;z-index:1!important;width:100%!important;max-width:420px!important;min-height:auto!important;margin:auto!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;gap:14px!important;background:transparent!important;box-shadow:none!important;animation:none!important;transform:none!important;contain:none!important}.login-card{width:100%!important;max-width:420px!important;margin:0 auto!important;box-sizing:border-box!important;border-radius:24px!important;padding:26px 22px 22px!important;background:#fffdf7!important;border:1px solid rgba(48,78,50,.13)!important;box-shadow:0 26px 70px -38px rgba(0,0,0,.66),0 10px 28px -20px rgba(25,44,29,.35)!important;transform:none!important;animation:none!important;contain:none!important}.lc-logo{width:60px!important;height:60px!important;border-radius:0!important;margin:0 auto 15px!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;overflow:visible!important;padding:0!important}.lc-head{text-align:center!important;margin:0 0 18px!important}.lc-head h2{font-size:27px!important;line-height:1.08!important;margin:0!important;color:#142118!important;font-weight:820!important;letter-spacing:-.035em!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important}.lc-head h2::after,.lc-head p::after{content:none!important;display:none!important}.lc-head p{font-size:clamp(8.5px,2.7vw,11.5px)!important;line-height:1.3!important;margin:8px auto 0!important;max-width:none!important;width:100%!important;white-space:nowrap!important;letter-spacing:-.02em!important;color:#637062!important;font-weight:500!important}.login-card .input{font-size:16px!important}.login-card .pw-eye,.pw-eye{display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}.login-card .pw-wrap .input,.login-card input[type="password"].input{padding-right:52px!important}.login-foot{position:relative!important;left:auto!important;bottom:auto!important;margin:0 auto!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;color:rgba(255,253,244,.74)!important;font-size:11px!important;line-height:1.2!important;font-weight:720!important;z-index:1!important}.install-prompt-card{display:none!important}@media(max-width:360px){.login-root{padding-left:12px!important;padding-right:12px!important;align-items:flex-start!important}.login-card{padding:22px 17px 18px!important;border-radius:21px!important}.lc-logo{width:54px!important;height:54px!important}.lc-head h2{font-size:24px!important}}@media(max-height:640px){.login-root{align-items:flex-start!important}.login-card{padding-top:20px!important;padding-bottom:18px!important}.lc-logo{width:50px!important;height:50px!important;margin-bottom:10px!important}.lc-head{margin-bottom:14px!important}.lc-help{margin-top:11px!important}}@media(min-width:880px){.login-root{display:grid!important;grid-template-columns:minmax(300px,42vw) minmax(0,1fr)!important;align-items:stretch!important;justify-content:stretch!important;padding:0!important;background:radial-gradient(900px 620px at 105% 5%,rgba(74,115,81,.12),transparent 58%),radial-gradient(780px 560px at 72% 95%,rgba(201,178,136,.16),transparent 62%),linear-gradient(120deg,#e7eddf 0%,#f4f2e8 58%,#fbfaf4 100%)!important;overflow:hidden!important}.login-root::before{content:""!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:min(46vw,680px)!important;background:radial-gradient(520px 420px at 18% 12%,rgba(255,255,255,.13),transparent 63%),radial-gradient(560px 480px at 10% 92%,rgba(188,133,80,.16),transparent 64%),linear-gradient(145deg,#386e48 0%,#214d33 48%,#0d2b1c 100%)!important;clip-path:ellipse(100% 92% at 0% 50%)!important;z-index:0!important;box-shadow:52px 0 95px rgba(24,63,39,.14)!important}.login-root::after{content:"Westwondersandco\AWorkforce"!important;white-space:pre-line!important;display:block!important;position:absolute!important;left:clamp(34px,5vw,82px)!important;top:45%!important;transform:translateY(-50%)!important;width:min(340px,29vw)!important;color:#fffdf4!important;z-index:2!important;font-size:clamp(27px,2.6vw,44px)!important;line-height:1.05!important;font-weight:880!important;letter-spacing:-.05em!important;text-shadow:0 14px 34px rgba(0,0,0,.28)!important;pointer-events:none!important}.login-stage{grid-column:2!important;min-height:100dvh!important;max-width:none!important;width:100%!important;padding:clamp(36px,6vh,78px) clamp(32px,7vw,132px)!important;align-items:center!important;justify-content:center!important;background:transparent!important}.login-stage::after{content:"Everything your team needs for roster, clocking, messages and updates."!important;display:block!important;position:fixed!important;left:clamp(34px,5vw,82px)!important;top:calc(45% + 108px)!important;width:min(340px,29vw)!important;color:rgba(255,253,244,.88)!important;font-size:clamp(13px,1.05vw,17px)!important;line-height:1.55!important;font-weight:560!important;letter-spacing:-.01em!important;text-shadow:0 14px 34px rgba(0,0,0,.28)!important;pointer-events:none!important}.login-card{width:min(420px,100%)!important;margin:0 auto!important;padding:34px 34px 28px!important;border-radius:26px!important}.lc-logo{width:52px!important;height:52px!important;margin:0 0 18px!important;border-radius:16px!important}.lc-head{text-align:left!important;margin-bottom:24px!important}.lc-head h2{font-size:0!important}.lc-head h2::after{content:"Sign in"!important;display:block!important;color:#132118!important;font-size:32px!important;line-height:1.05!important;font-weight:820!important;letter-spacing:-.04em!important}.lc-head p{font-size:0!important;margin:10px 0 0!important}.lc-head p::after{content:"Access your roster, messages, clocking and team updates."!important;display:block!important;max-width:310px!important;color:#647065!important;font-size:14px!important;line-height:1.48!important;font-weight:500!important}.lc-help{text-align:left!important}.login-foot{position:fixed!important;left:clamp(34px,5vw,82px)!important;bottom:clamp(30px,5vh,62px)!important;margin:0!important;justify-content:flex-start!important}}@media(min-width:880px) and (max-width:1040px){.login-root{grid-template-columns:minmax(280px,38vw) minmax(0,1fr)!important}.login-stage{padding-left:34px!important;padding-right:34px!important}.login-root::after{font-size:clamp(24px,2.8vw,34px)!important;width:260px!important}.login-stage::after{width:250px!important}}
/* WW_V240_DASHBOARD_REDESIGN_START */
/* ---------- Hero: richer texture, confident type, icon-coded stats ---------- */
.hm-hero,.hm-hero.admin,.hm-hero.staff{
border-radius:24px!important;
padding:22px 20px 20px!important;
box-shadow:0 26px 54px -26px rgba(10,26,15,.60), 0 8px 18px -8px rgba(10,26,15,.34)!important;
background:
radial-gradient(120% 90% at 100% 0%, rgba(201,151,91,.16), transparent 50%),
radial-gradient(140% 100% at 0% -10%, rgba(255,255,255,.10), transparent 55%),
linear-gradient(160deg,#2f6140 0%,#1c3c26 55%,#0f2417 100%)!important;
position:relative!important;
overflow:hidden!important;
}
.hm-hero::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.05) 48%, transparent 56%);
}
.hm-eyebrow{font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#c9975b!important;font-weight:800!important}
.hm-hero-copy h1{font-size:25px!important;letter-spacing:-.02em!important;margin:3px 0 4px!important}
.hm-hero-add{
border-radius:12px!important;font-weight:800!important;
box-shadow:0 8px 18px -8px rgba(0,0,0,.4)!important;
background:#fff!important;color:#173a26!important;
}
.hm-hero-stats{gap:8px!important;margin-top:17px!important;position:relative!important}
.hm-hs{
background:rgba(255,255,255,.08)!important;
border:1px solid rgba(255,255,255,.15)!important;
border-radius:14px!important;
padding:11px 8px 10px!important;
backdrop-filter:blur(8px)!important;
-webkit-backdrop-filter:blur(8px)!important;
display:flex!important; flex-direction:column!important; gap:2px!important;
position:relative!important;
}
.hm-hs strong{font-size:21px!important;line-height:1.05!important;font-weight:900!important;letter-spacing:-.025em!important;font-variant-numeric:tabular-nums!important;color:#fff!important}
.hm-hs em{font-size:9.5px!important;font-style:normal!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:rgba(255,255,255,.72)!important}
.hm-hs.alert{background:linear-gradient(160deg,rgba(224,166,74,.30),rgba(200,120,40,.20))!important;border-color:rgba(224,166,74,.45)!important}
.hm-hs.alert strong{color:#ffdf9e!important}
.hm-hs.alert em{color:rgba(255,223,158,.85)!important}
/* ---------- Pending approvals: warm amber "needs attention" card ---------- */
.approvals-panel{
border-radius:18px!important;
border:1px solid rgba(180,118,58,.22)!important;
box-shadow:0 16px 34px -22px rgba(120,80,20,.40)!important;
overflow:hidden!important;
background:linear-gradient(155deg,#fff8ec 0%,#fdf1dc 100%)!important;
}
.approvals-summary{padding:16px 17px!important;gap:13px!important}
.appr-bell{
width:40px!important;height:40px!important;border-radius:12px!important;
background:linear-gradient(155deg,#e0a64a,#c2761f)!important;color:#fff!important;
box-shadow:0 8px 16px -8px rgba(180,118,58,.55)!important;
}
.appr-sum-txt strong{font-size:15px!important;font-weight:850!important;letter-spacing:-.01em!important;color:#5c3c0d!important}
.appr-sum-txt span{font-size:12.5px!important;color:#a06f1c!important;font-weight:650!important}
.appr-count{
font-weight:900!important; font-size:13px!important;
background:linear-gradient(155deg,#e0a64a,#c2761f)!important;color:#fff!important;
box-shadow:0 5px 12px -4px rgba(180,118,58,.55)!important;
}
/* ---------- Important updates: coral accent, clearer unread signal ---------- */
.important-updates-panel{
border-radius:18px!important;
box-shadow:0 16px 34px -22px rgba(160,50,30,.32)!important;
border:1px solid rgba(200,70,45,.14)!important;
}
.important-updates-panel .section-head h2{font-size:15px!important;font-weight:850!important;letter-spacing:-.01em!important;color:#7a2a1a!important}
.important-updates-panel .count{font-weight:900!important;background:linear-gradient(155deg,#e2604a,#c23f28)!important;color:#fff!important;box-shadow:0 4px 10px -4px rgba(194,63,40,.5)!important}
.important-updates-panel .upd-item{border-radius:14px!important}
.important-updates-panel .upd-item.unread{background:linear-gradient(155deg,#fff5f1,#fdece5)!important}
.important-updates-panel .upd-title{font-weight:800!important;letter-spacing:-.005em!important}
.important-updates-panel .upd-new{background:linear-gradient(155deg,#e2604a,#c23f28)!important;color:#fff!important;font-weight:850!important;border-radius:999px!important}
.important-updates-panel .upd-pin{background:#f4e2c3!important;color:#7a5210!important;font-weight:850!important;border-radius:999px!important}
/* ---------- Bookings & Availability: distinct icon accent colors ---------- */
.hm-bookings,.hm-avail{
border-radius:16px!important;
box-shadow:0 14px 30px -22px rgba(20,40,25,.36)!important;
border:1px solid rgba(30,60,40,.08)!important;
}
.hm-bookings-ic{
background:linear-gradient(155deg,#2f6140,#173a26)!important;
box-shadow:0 8px 16px -8px rgba(23,58,38,.5)!important;
}
.hm-avail-ic{
background:linear-gradient(155deg,#c9975b,#a06a34)!important;color:#fff!important;
box-shadow:0 8px 16px -8px rgba(160,106,52,.5)!important;
}
.hm-bookings-txt strong,.hm-avail-txt strong{font-size:14.5px!important;font-weight:850!important;letter-spacing:-.01em!important}
.hm-bookings-txt span,.hm-avail-txt span{font-weight:650!important}
/* Directory hub card — forest green so it reads distinctly from Availability */
.hm-directory .hm-avail-ic{
background:linear-gradient(155deg,#4a8a52,#26512e)!important;color:#fff!important;
box-shadow:0 8px 16px -8px rgba(38,81,46,.5)!important;
}
/* WW_V240_DASHBOARD_REDESIGN_END */
/* WW_V242_ROSTER_DAYCARDS_START */
.rst-day,.rst-days-admin .rst-day{
border-radius:15px!important;
background:#fff!important;
border:1px solid rgba(30,60,40,.09)!important;
box-shadow:0 8px 18px -14px rgba(20,40,25,.30)!important;
transition:transform .1s ease,box-shadow .1s ease!important;
}
.rst-day:active,.rst-days-admin .rst-day:active{transform:scale(.96)!important}
.rst-day.today,.rst-days-admin .rst-day.today{
box-shadow:0 0 0 1.5px #2f6b3e inset, 0 8px 18px -14px rgba(20,40,25,.30)!important;
}
.rst-day.today .rd-dow,.rst-days-admin .rst-day.today .rd-dow{color:#2f6b3e!important;font-weight:850!important}
.rst-day.sel,.rst-days-admin .rst-day.sel{
background:linear-gradient(165deg,#3f8a52 0%,#25573a 100%)!important;
border-color:transparent!important;
box-shadow:0 12px 26px -14px rgba(37,87,58,.55)!important;
}
.rd-dow{font-weight:750!important;letter-spacing:.03em!important;color:#7a8a7d!important}
.rd-num{font-weight:850!important;letter-spacing:-.02em!important}
.rst-day.sel .rd-num,.rst-days-admin .rst-day.sel .rd-num{color:#fff!important}
.rst-days-admin .rd-stats,.rd-stats{
border-radius:999px!important;
background:#f3ede0!important;
border:1px solid rgba(151,108,70,.14)!important;
box-shadow:0 2px 5px -2px rgba(80,48,24,.14)!important;
}
.rst-days-admin .rd-stats b,.rd-stats b{
background:#c9975b!important;color:#fff!important;font-weight:850!important;
}
.rst-days-admin .rd-stats.empty,.rd-stats.empty{background:#f1eee7!important;opacity:.75!important}
.rst-days-admin .rst-day.sel .rd-stats,.rst-day.sel .rd-stats{
background:rgba(255,255,255,.20)!important;border-color:rgba(255,255,255,.22)!important;
}
.rst-days-admin .rst-day.sel .rd-stats b,.rst-day.sel .rd-stats b{background:#fff!important;color:#25573a!important}
.rst-days-admin .rst-day.sel .rd-stats em,.rst-day.sel .rd-stats em{color:rgba(255,255,255,.92)!important}
/* The complete layout for this pill (display/height/padding/etc.) only ever
existed inside a mobile-only media query — desktop never had it, so the
badge rendered as unstyled default inline text instead of a compact pill. */
@media(min-width:1024px){
.rst-days-admin .rd-stats,.rd-stats{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
gap:3px!important;min-width:37px!important;height:17px!important;padding:0 5px!important;
line-height:1!important;white-space:nowrap!important;
}
.rst-days-admin .rd-stats b,.rd-stats b{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
min-width:12px!important;height:12px!important;border-radius:999px!important;
font-size:8px!important;line-height:12px!important;
}
.rst-days-admin .rd-stats em,.rd-stats em{
font-style:normal!important;font-size:8.5px!important;letter-spacing:-.02em!important;
font-variant-numeric:tabular-nums!important;
}
}
/* Search bar: match the card language instead of a flat default input */
.rwg-search{
border-radius:15px!important;
border:1px solid rgba(30,60,40,.10)!important;
box-shadow:0 8px 18px -14px rgba(20,40,25,.24)!important;
background:#fff!important;
}
/* WW_V242_ROSTER_DAYCARDS_END */
/* WW_V244_SHIFT_MODAL_FIXES_START */
.shift-colour-current-wrap{display:inline-flex!important;align-items:center!important;gap:6px!important}
.shift-colour-dot{width:12px!important;height:12px!important;border-radius:999px!important;flex-shrink:0!important;box-shadow:0 0 0 2px rgba(0,0,0,.06)!important;display:inline-block!important}
/* The top button is a toggle, not a text input — style it clearly as one
(no magnifying-glass icon pretending to be a search box) so it doesn't
read as a second, redundant search field alongside the real one inside
the dropdown. */
.emp-searchbar{gap:8px!important}
.emp-searchbar svg{opacity:.55!important;width:16px!important;height:16px!important}
/* WW_V244_SHIFT_MODAL_FIXES_END */
/* WW_V245_SHIFT_CARD_POP_START */
/* An earlier mobile-only rule flattened every shift card's shadow to almost
nothing (0 2px 6px at 8% opacity) for performance reasons. Restoring real
depth here, richer than before, using each card's own theme colour so the
glow actually matches the card. */
.rcard{
border-radius:16px!important;
box-shadow:
0 16px 32px -14px color-mix(in srgb,var(--deep,#1c3a26) 62%,transparent),
0 5px 12px -4px color-mix(in srgb,var(--deep,#1c3a26) 38%,transparent),
inset 0 1px 0 rgba(255,255,255,.16)
!important;
transition:transform .12s ease, box-shadow .12s ease!important;
}
.rcard:active{transform:scale(.98)!important}
@media(hover:hover){
.rcard:hover{
transform:translateY(-2px)!important;
box-shadow:
0 20px 38px -14px color-mix(in srgb,var(--deep,#1c3a26) 68%,transparent),
0 6px 14px -4px color-mix(in srgb,var(--deep,#1c3a26) 42%,transparent),
inset 0 1px 0 rgba(255,255,255,.18)
!important;
}
}
.rc-badge{
box-shadow:0 6px 14px -4px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.rc-info h3{
box-shadow:0 3px 8px -3px rgba(0,0,0,.22)!important;
}
/* WW_V245_SHIFT_CARD_POP_END */
/* WW_V248_DESKTOP_ROSTER_GRID_START */
@media (min-width:1024px){
/* Real depth instead of a near-invisible 1px shadow, matching the mobile card redesign */
.rwg-cell .rgc{
box-shadow:
0 10px 22px -12px color-mix(in srgb,var(--accent) 55%,transparent),
0 3px 8px -3px color-mix(in srgb,var(--accent) 30%,transparent)
!important;
transition:transform .12s ease, box-shadow .12s ease!important;
}
.rwg-cell .rgc:hover{
transform:translateY(-2px)!important;
box-shadow:
0 14px 28px -12px color-mix(in srgb,var(--accent) 62%,transparent),
0 4px 10px -3px color-mix(in srgb,var(--accent) 36%,transparent)
!important;
}
/* Bigger, easier to read at a glance */
.rwg-cell .rgc-time{font-size:12.5px!important;height:23px!important;padding:0 10px!important}
.rwg-cell .rgc-dur{font-size:10.5px!important;height:23px!important}
.rwg-cell .rgc-client{font-size:14.5px!important}
/* Reverted: action buttons back to their original hover-to-reveal behavior
— the person specifically likes that collapse/reopen interaction, so
this is intentionally back to how it was before v248. */
.rwg-cell .rgc-tool{
width:26px!important;height:24px!important;
}
}
/* WW_V248_DESKTOP_ROSTER_GRID_END */
/* WW_V250_DESKTOP_ROSTER_DEDUPE_START */
/* The day-picker strip (Mon/Tue/Wed pills) only exists to drive the mobile
single-day list, which isn't shown on desktop at all — the desktop grid
already has its own sticky header with the same date + hours info. Showing
both was pure visual duplication with no functional purpose on desktop. */
@media(min-width:1024px){
.rst-days{display:none!important}
}
/* WW_V250_DESKTOP_ROSTER_DEDUPE_END */
/* WW_V253_TIMESHEET_MODAL_READABILITY_START */
/* Field labels here were shrunk to 11px across several past sessions —
genuinely too small to read comfortably. Also giving fields more breathing
room and a touch more contrast/weight on the header date line. */
.timesheet-modal .field label{
font-size:13px!important;font-weight:800!important;color:#233329!important;
letter-spacing:-.005em!important;margin-bottom:5px!important;display:block!important;
}
.timesheet-modal .field{margin-bottom:14px!important}
.timesheet-modal .row2{gap:10px!important}
.timesheet-modal .input,.timesheet-modal select.input,.timesheet-modal textarea.input{
font-size:15.5px!important;padding:12px 14px!important;border-radius:12px!important;
border:1px solid rgba(35,51,41,.16)!important;
}
.te-sub{font-size:13px!important;color:rgba(255,255,255,.85)!important;font-weight:650!important}
.te-client{font-size:20px!important;letter-spacing:-.01em!important}
.te-status{font-size:12.5px!important;font-weight:800!important;padding:5px 12px!important}
/* WW_V253_TIMESHEET_MODAL_READABILITY_END */
/* WW_V254_PICKER_REDESIGN_START */
/* Bigger, more legible search box for both client and employee pickers
(they share .client-search-box now that the employee picker was
consolidated to match the client picker's single-box pattern). */
.client-search-box{
height:52px!important;padding:0 14px!important;border-radius:14px!important;
}
.client-search-box input{font-size:16px!important;font-weight:750!important}
/* The dropdown list was capped at a tiny 140px on mobile — barely 2-3 rows
before needing to scroll. Opening it up so far more is visible at once. */
@media(max-width:1023px){
.client-search-panel .client-picker{max-height:420px!important}
}
.smart-picker.employee-picker{max-height:460px!important;overflow:auto!important;border:1px solid rgba(60,80,60,.14)!important;border-radius:14px!important;padding:5px!important;margin-top:8px!important}
.emp-selected-summary{
margin-top:6px;padding:8px 12px;border-radius:11px;background:#eef3e7;
color:#2f4f33;font-size:13px;font-weight:700;line-height:1.35;
}
/* The checkbox-to-name gap: .picker-row used `display:grid` with no explicit
grid-template-columns, which is under-specified and let the two children
land much further apart than intended in some contexts. Flex with an
explicit small gap removes the ambiguity entirely. */
.picker-row{
display:flex!important;align-items:center!important;gap:10px!important;
}
.employee-picker.simple-list .picker-row{gap:9px!important}
.pick-check{flex-shrink:0!important}
.simple-emp-text{flex:1!important;min-width:0!important;text-align:left!important;justify-items:start!important;align-items:start!important}
.simple-emp-text strong,.simple-emp-text em{text-align:left!important;justify-self:start!important;width:100%}
.employee-picker.simple-list .picker-row{justify-content:flex-start!important;text-align:left!important}
/* WW_V254_PICKER_REDESIGN_END */
/* WW_V255_TIMESHEET_CLIENT_PICKER_START */
/* This modal uses a separate, older client-picker component (.ts-client-*)
from the one already fixed for the shift modal — same shrunk-text problem,
different component, so the earlier fix never reached it. */
.ts-client-selected{padding:12px 14px!important;border-radius:14px!important}
.ts-client-selected strong{font-size:15px!important;font-weight:800!important}
.ts-client-selected span{font-size:12.5px!important}
.ts-client-search{height:50px!important;border-radius:13px!important}
.ts-client-search input{font-size:16px!important}
.ts-client-results{max-height:280px!important;border-radius:14px!important}
.ts-client-row strong{font-size:14px!important}
.ts-client-row small{font-size:11.5px!important}
.ts-add-client-toggle{height:44px!important;border-radius:12px!important;font-size:13.5px!important;font-weight:750!important}
/* The pink "Rostered / Actual / Variance" banner — genuinely tiny at 10.8px */
.variance{
font-size:13px!important;font-weight:750!important;line-height:1.4!important;
padding:9px 12px!important;border-radius:12px!important;display:block!important;
}
/* WW_V255_TIMESHEET_CLIENT_PICKER_END */
/* WW_V257_DESKTOP_ROSTER_COMPACT_HEADER_START */
/* The "Team Roster" hero + search box were eating ~370px of vertical space
before the actual grid even started (out of a typical 900px viewport) —
nearly 40%. Collapsing the hero from a tall 3-row stack into one slim row,
and reclaiming that space for the grid, which is what actually matters on
this screen. */
@media (min-width:1024px){
.rst-hero.admin,.rst-hero.staff{
display:flex!important;flex-direction:row!important;align-items:center!important;
gap:20px!important;padding:12px 20px!important;min-height:0!important;
border-radius:16px!important;margin-bottom:8px!important;
}
.rst-hero-top{
display:flex!important;align-items:center!important;gap:10px!important;
flex:0 0 auto!important;
}
.rst-hero-label{text-align:left!important}
.rst-eyebrow{font-size:9.5px!important;opacity:.7!important}
.rst-hero-label strong{font-size:16px!important;white-space:nowrap!important}
.rst-nav{width:30px!important;height:30px!important}
.rst-hero.admin .rst-hero-foot,.rst-hero.staff .rst-hero-foot{
display:flex!important;align-items:center!important;gap:12px!important;
margin-top:0!important;flex:1!important;justify-content:flex-end!important;
flex-wrap:nowrap!important;grid-template-columns:none!important;width:auto!important;max-width:none!important;
}
.rst-hero.admin .rst-hs,.rst-hero.staff .rst-hs{
flex:0 0 auto!important;display:flex!important;flex-direction:row!important;
align-items:baseline!important;gap:5px!important;
background:rgba(255,255,255,.12)!important;padding:6px 13px!important;
border-radius:10px!important;min-height:0!important;height:auto!important;
}
.rst-hero.admin .rst-hs strong,.rst-hero.staff .rst-hs strong{font-size:15px!important;line-height:1!important}
.rst-hero.admin .rst-hs em,.rst-hero.staff .rst-hs em{font-size:9.5px!important;margin-top:0!important;line-height:1!important}
.rst-hero.admin .rst-hero-add,.rst-hero.staff .rst-hero-add{
flex:0 0 auto!important;order:0!important;width:auto!important;
height:38px!important;padding:0 16px!important;font-size:13px!important;
min-height:0!important;white-space:nowrap!important;
}
/* Search box + grid: tighten the gaps between them and reclaim the freed
space for the actual roster grid below. */
.rwg-search-top{margin-top:0!important;margin-bottom:8px!important}
.rwg-wrap{max-height:calc(100dvh - 150px)!important}
}
/* WW_V257_DESKTOP_ROSTER_COMPACT_HEADER_END */
/* WW_V260_GEOFENCE_START */
.geo-badge{
display:flex;align-items:center;gap:7px;
font-size:12.5px;font-weight:800;
padding:8px 12px;border-radius:11px;margin:2px 0 8px;
}
.geo-badge svg{width:15px;height:15px;flex:0 0 15px}
.geo-badge.ok{background:#e4f3e4;color:#1f6d33;border:1px solid rgba(31,109,51,.18)}
.geo-badge.neutral{background:#eef2f7;color:#3a4a5c;border:1px solid rgba(58,74,92,.16)}
.geo-badge.warn{background:#fcefe4;color:#a5561f;border:1px solid rgba(165,86,31,.2)}
/* WW_V260_GEOFENCE_END */
/* WW_V261_PROOF_PHOTOS_START */
/* Clock-out capture */
.proof-photos{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.proof-add{
width:76px;height:76px;border-radius:13px;border:1.5px dashed rgba(60,80,60,.35);
background:#f5f8f2;color:#3c5e4a;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
font-size:10.5px;font-weight:700;
}
.proof-add svg{width:20px;height:20px}
.proof-thumb{position:relative;width:76px;height:76px;border-radius:13px;overflow:hidden}
.proof-thumb img{width:100%;height:100%;object-fit:cover}
.proof-thumb-x{
position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
border:0;background:rgba(20,25,20,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;
}
/* Admin review panel */
.proof-panel{
background:#f3f7ef;border:1px solid rgba(60,80,60,.14);
border-radius:14px;padding:12px 13px;margin:2px 0 10px;
}
.proof-panel-head{
display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:#2c4a30;margin-bottom:9px;
}
.proof-panel-head svg{width:15px;height:15px}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.proof-view{padding:0;border:0;border-radius:11px;overflow:hidden;cursor:pointer;aspect-ratio:1;background:#e5e5e5}
.proof-view img{width:100%;height:100%;object-fit:cover;display:block}
/* Lightbox */
.proof-lightbox{
position:fixed;inset:0;z-index:9999;background:rgba(12,16,12,.9);
display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;
}
.proof-lightbox img{max-width:100%;max-height:100%;border-radius:12px}
.proof-lightbox-x{
position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;
border:0;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer;
}
/* WW_V261_PROOF_PHOTOS_END */
/* WW_V263_OFFLINE_BANNER_START */
.ww-offline-banner{
position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(84px + env(safe-area-inset-bottom,0px));
z-index:9000;max-width:calc(100% - 28px);width:max-content;
display:flex;align-items:center;gap:9px;
background:#3a3327;color:#fdf6e8;
padding:11px 16px;border-radius:13px;
font-size:12.8px;font-weight:650;line-height:1.35;
box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
border:1px solid rgba(255,255,255,.1);
}
.ww-offline-banner[hidden]{display:none}
.ww-offline-dot{
width:9px;height:9px;border-radius:50%;background:#e5a53c;flex:0 0 9px;
box-shadow:0 0 0 0 rgba(229,165,60,.5);animation:wwOfflinePulse 1.8s ease-out infinite;
}
.ww-offline-banner.syncing{background:#204a2c;color:#eafbe9}
.ww-offline-banner.syncing .ww-offline-dot{background:#6fd08a;animation:wwOfflinePulse 1s ease-out infinite}
@keyframes wwOfflinePulse{
0%{box-shadow:0 0 0 0 rgba(229,165,60,.5)}
70%{box-shadow:0 0 0 7px rgba(229,165,60,0)}
100%{box-shadow:0 0 0 0 rgba(229,165,60,0)}
}
@media(min-width:1024px){
.ww-offline-banner{bottom:24px}
}
/* WW_V263_OFFLINE_BANNER_END */
/* WW_V264_SERIES_SCOPE_START */
.series-scope-intro{font-size:14px;color:#3a4a3d;font-weight:600;margin:2px 0 14px;line-height:1.4}
.series-scope-opts{display:flex;flex-direction:column;gap:10px}
.series-scope-opt{
text-align:left;display:flex;flex-direction:column;gap:3px;
padding:14px 15px;border-radius:14px;cursor:pointer;
background:#f5f8f2;border:1.5px solid rgba(60,80,60,.16);
transition:transform .1s ease, border-color .12s ease;
}
.series-scope-opt:active{transform:scale(.99)}
.series-scope-opt strong{font-size:15px;font-weight:800;color:#1c2a1e}
.series-scope-opt span{font-size:12.5px;color:#5a6a5c;font-weight:600;line-height:1.35}
.series-scope-opt.primary{background:#eaf4ea;border-color:rgba(46,123,67,.35)}
.series-scope-opt.primary strong{color:#1f6d33}
.series-scope-opt.danger{background:#fcefe8;border-color:rgba(165,86,31,.3)}
.series-scope-opt.danger strong{color:#a5461f}
/* WW_V264_SERIES_SCOPE_END */
/* WW_V265_DOC_LIBRARY_START */
.doc-lib-list{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.doc-ic.blue{background:linear-gradient(135deg,#2f6b8a,#1f4a63);color:#fff}
.doc-lib-card{border:1px solid rgba(47,107,138,.16)}
.doc-lib-card .doc-name{font-weight:800}
/* WW_V265_DOC_LIBRARY_END */
/* WW_V268_NOTIF_JUMP_START */
.notif-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* Pending-approval rows: make the info area a tappable button that opens the
full timesheet (with photos), and show a clear photo badge. */
.appr-info.appr-open{
flex:1;min-width:0;text-align:left;background:transparent;border:0;cursor:pointer;
padding:0;display:flex;flex-direction:column;gap:2px;font:inherit;
}
.appr-photos-badge{
display:inline-flex;align-items:center;gap:5px;margin-top:5px;
font-size:11.5px;font-weight:800;color:#2c4a30;
background:#e4f0e2;border:1px solid rgba(44,74,48,.18);
padding:3px 9px;border-radius:8px;align-self:flex-start;
}
.appr-photos-badge svg{width:13px;height:13px}
.notif-jump{
margin-top:10px;display:inline-flex;align-items:center;gap:6px;
}
.notif-jump svg{width:15px;height:15px}
/* WW_V268_NOTIF_JUMP_END */
/* WW_V260_LOCATION_STAMP_START */
.loc-panel{
background:#f2f6ee;border:1px solid rgba(60,80,60,.14);border-radius:14px;
padding:12px 14px;margin:0 0 14px;
}
.loc-panel-head{font-size:12.5px;font-weight:800;color:#2f4f33;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.loc-panel-head svg{width:14px;height:14px}
.loc-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid rgba(60,80,60,.08)}
.loc-line:first-of-type{border-top:0}
.loc-lbl{font-size:12px;font-weight:750;color:#4a5a4d;flex:0 0 auto}
.loc-map{font-size:12px;font-weight:700;color:#1f6b8a;text-decoration:none;display:inline-flex;align-items:center;gap:4px;text-align:right}
.loc-map svg{width:12px;height:12px}
.loc-none{font-size:11.5px;font-weight:650;color:#9a7a2a;font-style:italic}
.loc-hint{font-size:11px;color:#6a7268;margin-top:8px;line-height:1.4}
/* WW_V260_LOCATION_STAMP_END */
/* ============================================================
WW_V292 CHAT REDESIGN — cleaner, more professional bubbles.
- Reaction button hidden by default; appears on hover (desktop)
or when a message is long-pressed (mobile, .show-react).
- Softer bubbles, refined tails, calmer "Seen" status.
============================================================ */
/* Reaction button: hidden until hover / long-press */
.msg-react-btn{
opacity:0!important;pointer-events:none!important;
transform:scale(.8)!important;
transition:opacity .14s ease,transform .14s ease!important;
width:30px!important;height:30px!important;flex:0 0 30px!important;
border-radius:50%!important;border:1px solid rgba(60,82,55,.14)!important;
background:rgba(255,253,247,.96)!important;color:#5a7355!important;
display:grid!important;place-items:center!important;
box-shadow:0 3px 10px rgba(35,47,31,.10)!important;align-self:center!important;
}
.msg-react-btn svg{width:15px!important;height:15px!important}
/* show on hover (desktop) or when row is long-pressed (mobile) */
.msg:hover .msg-react-btn,
.msg.show-react .msg-react-btn{opacity:1!important;pointer-events:auto!important;transform:scale(1)!important}
@media(hover:none){ .msg:hover .msg-react-btn{opacity:0!important;pointer-events:none!important} }
/* Refined bubbles */
.bubble{
border-radius:18px!important;
box-shadow:0 1px 2px rgba(35,47,31,.06)!important;
border:1px solid rgba(60,82,55,.07)!important;
padding:9px 13px!important;
}
.msg:not(.mine) .bubble{
background:#ffffff!important;color:#25302a!important;
border-bottom-left-radius:6px!important;
}
.msg.mine .bubble{
background:linear-gradient(160deg,#3c6340,#274a2c)!important;color:#fbfaf2!important;
border:none!important;border-bottom-right-radius:6px!important;
box-shadow:0 2px 8px rgba(39,74,44,.22)!important;
}
/* Sender name: smaller, subtler */
.b-author{font-size:11px!important;font-weight:800!important;color:#a6653c!important;margin-bottom:2px!important;letter-spacing:.01em!important}
.b-text{font-size:14.5px!important;line-height:1.4!important}
/* Timestamp: quieter */
.bubble time{font-size:10px!important;opacity:.55!important;margin-top:3px!important;display:block!important}
.msg.mine .bubble time{color:rgba(251,250,242,.72)!important;opacity:1!important}
/* "Seen" status: small, calm, no shouting */
.msg-status{
font-size:10px!important;font-weight:620!important;
margin-top:2px!important;display:block!important;letter-spacing:.01em!important;
}
.msg-status.seen{color:rgba(251,250,242,.9)!important}
.msg.mine .msg-status.delivered{color:rgba(251,250,242,.6)!important}
.msg-status.delivered{color:#9aa39a!important}
/* Roomier, calmer message spacing */
.chat-scroll{gap:10px!important}
.msg{align-items:flex-end!important}
.msg-av .avatar{box-shadow:0 2px 6px rgba(35,47,31,.12)!important}
/* ============================================================
WW_V314 MESSAGES — "LEDGER" (design 1)
Editorial hairline rows, no boxes. Pinned rows get a gold left
bar + warm tint. Placed LAST so it cleanly overrides the older
competing blocks (base / v151 / v295) instead of fighting them.
============================================================ */
body .cv-list{background:transparent!important;padding:0 2px 14px!important;display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
body .cv-head-label{color:#a8845f!important;font-weight:800!important;letter-spacing:.13em!important;font-size:10.5px!important}
body .cv-head{flex-shrink:0!important}
body .cv-search{background:#fff!important;border:1px solid rgba(87,101,67,.16)!important;border-radius:11px!important;box-shadow:none!important;flex-shrink:0!important}
body .cv-search input{color:#1e2617!important}
body .cv-search input::placeholder{color:#9aa48c!important}
body .cv-search-ic{color:#9aa48c!important}
/* section headers */
body .cv-sec{
display:block!important;padding:14px 4px 7px!important;
font-size:10px!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase!important;
color:#9aa48c!important;background:transparent!important;
}
body .cv-sec-pin{color:#b08a2e!important}
/* threads container: flat hairline rows, SCROLLABLE so all chats are reachable */
body .cv-threads,body .chat-list.cv-list .cv-threads{
background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;
display:block!important;padding:2px 0 16px!important;margin:0!important;
flex:1 1 auto!important;min-height:0!important;
overflow-y:auto!important;overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
}
/* ROW: hairline, no card, no box */
body .chat-list.cv-list .cv-row,body .cv-row{
display:flex!important;align-items:center!important;gap:11px!important;
padding:12px 4px!important;margin:0!important;
background:transparent!important;
border:0!important;border-bottom:1px solid rgba(87,101,67,.11)!important;
border-radius:0!important;box-shadow:none!important;
position:relative!important;overflow:visible!important;
transition:background .12s ease!important;
}
body .chat-list.cv-list .cv-row::after{display:none!important;content:none!important}
body .chat-list.cv-list .cv-row:active{background:rgba(87,101,67,.06)!important}
@media(hover:hover){body .chat-list.cv-list .cv-row:hover{background:rgba(87,101,67,.05)!important}}
body .chat-list.cv-list .cv-row.active{background:rgba(87,101,67,.09)!important}
/* PINNED rows: gold left bar + warm tint (this is what makes them stand out) */
body .chat-list.cv-list .cv-row.cv-pinned,body .cv-row.cv-pinned{
background:linear-gradient(90deg,rgba(198,154,60,.10),rgba(198,154,60,0))!important;
border-bottom:1px solid rgba(198,154,60,.20)!important;
padding-left:11px!important;
}
body .chat-list.cv-list .cv-row.cv-pinned::before,body .cv-row.cv-pinned::before{
content:""!important;display:block!important;
position:absolute!important;left:0!important;top:0!important;bottom:0!important;
width:3px!important;background:linear-gradient(180deg,#d9a63c,#a87a1e)!important;
border-radius:0!important;
}
body .chat-list.cv-list .cv-row.cv-pinned .cv-name{color:#5f4a12!important;font-weight:800!important}
body .chat-list.cv-list .cv-row.cv-pinned.active{background:linear-gradient(90deg,rgba(198,154,60,.18),rgba(198,154,60,.04))!important}
/* avatar: rounded square, colour-coded */
body .chat-list.cv-list .cv-av{flex-shrink:0!important;position:relative!important}
body .chat-list.cv-list .cv-av .avatar{
width:40px!important;height:40px!important;border-radius:11px!important;
font-size:14px!important;font-weight:800!important;color:#fff!important;
background:linear-gradient(150deg,#5c7a4e,#3f4b30)!important;
border:0!important;box-shadow:none!important;
}
body .chat-list.cv-list .cv-av .avatar svg{width:19px!important;height:19px!important;stroke:#fff!important}
body .chat-list.cv-list .cv-type-workphotos .cv-av .avatar{background:linear-gradient(150deg,#8371dc,#4f3fa0)!important}
body .chat-list.cv-list .cv-type-announcement .cv-av .avatar{background:linear-gradient(150deg,#d18a3e,#93591b)!important}
body .chat-list.cv-list .cv-av .avatar.sage{background:linear-gradient(150deg,#6f8f6a,#3f6b3e)!important}
body .chat-list.cv-list .cv-av .avatar.clay{background:linear-gradient(150deg,#b0805e,#7d5236)!important}
body .chat-list.cv-list .cv-unread-dot{
position:absolute!important;top:-2px!important;right:-2px!important;
width:11px!important;height:11px!important;border-radius:50%!important;
background:#c07a2e!important;border:2px solid #f2f5ee!important;box-shadow:none!important;transform:none!important;
}
/* body text */
body .chat-list.cv-list .cv-body{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:1px!important}
body .chat-list.cv-list .cv-top{display:flex!important;align-items:center!important;gap:7px!important;width:100%!important}
body .chat-list.cv-list .cv-name{
flex:1!important;min-width:0!important;font-size:14.5px!important;font-weight:750!important;color:#1e2617!important;
letter-spacing:-.01em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body .chat-list.cv-list .cv-row.cv-unread .cv-name{font-weight:850!important}
body .chat-list.cv-list .cv-sub{
display:block!important;font-size:12px!important;color:#8a9578!important;font-weight:600!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-top:2px!important;
}
body .chat-list.cv-list .cv-last{
display:block!important;font-size:12.5px!important;color:#71806a!important;font-weight:550!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-top:1px!important;
}
body .chat-list.cv-list .cv-row.cv-unread .cv-last{color:#3f6b3e!important;font-weight:700!important}
body .chat-list.cv-list .cv-time{
display:block!important;flex-shrink:0!important;font-size:11px!important;font-weight:620!important;color:#a7b199!important;
}
body .chat-list.cv-list .cv-row.cv-unread .cv-time{color:#4e8a52!important}
body .chat-list.cv-list .cv-pinned .cv-time{display:block!important;color:#b08a2e!important}
/* hide the small "pinned" tag pill (the gold bar already says it) */
body .chat-list.cv-list .cv-pintag{display:none!important}
/* hide row clutter for a clean editorial list */
body .chat-list.cv-list .cv-readtoggle,
body .chat-list.cv-list .cv-mini-action,
body .chat-list.cv-list .cv-chev{display:none!important}
body .cv-new{background:linear-gradient(160deg,#5c7a4e,#3f4b30)!important;color:#fff!important;border-radius:12px!important}
/* merged Add staff member modal */
.invite-hint{font-size:12px;color:#7c8770;margin:-6px 0 14px;line-height:1.5}
.invite-hint b{color:#576543;font-weight:800}
/* onboarding form section headings */
.sign-section{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5c7a4e;margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(87,101,67,.16)}
.sign-fields-wrap .field textarea.input{min-height:52px;resize:vertical;font-family:inherit}
/* notification delete / clear */
.notif-item{position:relative}
.notif-del{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
background:transparent;border:0;color:#b0b8a8;cursor:pointer;opacity:.55;transition:opacity .12s ease,background .12s ease,color .12s ease;z-index:2}
.notif-del svg{width:15px;height:15px}
.notif-del:hover{opacity:1;background:rgba(168,57,47,.1);color:#a8392f}
.notif-item .notif-meta{padding-right:26px}
.notif-dismiss-btn{margin-top:10px}
.notif-dismiss-btn svg{width:14px;height:14px;stroke:#5c7a4e}
/* ---- inline style 78 ---- */
/* Requested only: use rich, full-strength colours on PUBLISHED desktop
roster cards. Unpublished/draft cards deliberately keep their original
white dashed styling and original status colours. Layout is unchanged. */
@media (min-width:1024px){
.rwg-cell .rgc.pub{
background:linear-gradient(135deg,
color-mix(in srgb,var(--accent) 96%,#101510 4%) 0%,
var(--accent) 48%,
var(--accent-deep) 100%
)!important;
border-color:color-mix(in srgb,var(--accent-deep) 86%,#000 14%)!important;
border-left-color:color-mix(in srgb,var(--accent) 82%,#fff 18%)!important;
box-shadow:
0 13px 25px -13px color-mix(in srgb,var(--accent-deep) 82%,transparent),
0 4px 11px -5px color-mix(in srgb,var(--accent) 76%,transparent),
inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.rwg-cell .rgc.pub .rgc-time,
.rwg-cell .rgc.pub .rgc-dur{
color:color-mix(in srgb,var(--accent-deep) 92%,#000 8%)!important;
background:rgba(255,255,255,.96)!important;
border-color:rgba(255,255,255,.78)!important;
box-shadow:
0 2px 6px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.96)!important;
}
.rwg-cell .rgc.pub .rgc-client{
color:#fff!important;
text-shadow:0 1px 2px rgba(0,0,0,.48)!important;
}
.rwg-cell .rgc.pub .rgc-dot.pub{
background:#fff!important;
box-shadow:
0 0 0 2px rgba(255,255,255,.32),
0 0 8px rgba(255,255,255,.58)!important;
}
.rwg-cell .rgc.pub:hover{
box-shadow:
0 17px 31px -13px color-mix(in srgb,var(--accent-deep) 88%,transparent),
0 5px 13px -5px color-mix(in srgb,var(--accent) 82%,transparent),
inset 0 1px 0 rgba(255,255,255,.32)!important;
}
}
/* ============================================================
PERFORMANCE PASS v342 — cut GPU cost so scrolling/typing is
smooth on phones. Backdrop-filter is the single most expensive
effect on mobile; we drop the heavy blurs to solid/translucent
fills (visually near-identical) and add paint containment so
offscreen rows don't repaint.
============================================================ */
@media (max-width:1023px){
/* kill remaining heavy blurs on mobile — they cause scroll jank */
.modal-backdrop,.sheet-backdrop,.wa-backdrop,.overlay,.scrim{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
}
/* Long lists: let the browser skip painting offscreen rows */
.cv-threads .cv-row,.roster-week-grid .rwg-row,.ts-list .ts-row,.notif-list .notif-item{
content-visibility:auto;contain-intrinsic-size:auto 64px;
}
/* Promote scrollers to their own layer so scrolling doesn't repaint siblings */
.content,.modal-body,.cv-threads,.chat-scroll{
will-change:scroll-position;transform:translateZ(0);
}
/* Cheaper shadows on cards while scrolling (large blur radii are costly) */
@media (max-width:1023px){
.card,.cv-row,.notif-item{box-shadow:0 1px 2px rgba(20,30,18,.08)!important;}
}
/* ============================================================
FIT-ON-ONE-SCREEN v346 — compact entry modals on phones so the
Add-entry / Add-timesheet forms don't require scrolling.
============================================================ */
@media (max-width:600px){
/* tighter overall padding inside the sheet */
.modal-body{padding-left:18px!important;padding-right:18px!important}
/* shrink the big green header card */
.te-head{padding:12px 14px!important;margin-bottom:10px!important;border-radius:16px!important;
box-shadow:0 8px 18px rgba(8,30,16,.28)!important}
.te-client{font-size:16.5px!important;line-height:1.12!important}
.te-sub{font-size:11.5px!important;margin-top:1px!important}
.te-status{margin-top:6px!important;padding:4px 10px!important;font-size:11px!important}
.te-head-req .te-status{margin-top:6px!important}
/* tighter fields */
.field{gap:5px!important;margin-bottom:9px!important}
.field label{font-size:11.5px!important}
.input{height:44px!important}
textarea.input{height:auto!important;min-height:40px!important}
.row2{gap:9px!important}
/* the "add new client" helper row: slimmer */
.te-addclient,.add-client-inline,[data-action="toggle-add-client"]{padding-top:8px!important;padding-bottom:8px!important;font-size:13px!important}
/* footer buttons a touch shorter */
.modal-foot{padding-top:10px!important;padding-bottom:calc(12px + var(--safe-b))!important}
.modal-foot .btn{height:46px!important}
}
/* very short screens (small phones) — squeeze a little more */
@media (max-width:600px) and (max-height:740px){
.te-head{padding:10px 13px!important;margin-bottom:8px!important}
.te-client{font-size:15px!important}
.field{margin-bottom:7px!important}
.input{height:42px!important}
}
/* ============================================================
COMPANY SIGN-UP v347 — clean split-screen, no logo, readable
============================================================ */
.su2-root{position:fixed;inset:0;z-index:10;display:flex;min-height:100dvh;background:#f6f4ec;overflow:hidden;animation:lg2Fade .5s ease both}
.su2-brand{position:relative;flex:1 1 50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0f1d12;isolation:isolate}
.su2-sky{position:absolute;inset:0;background:linear-gradient(180deg,#12271a 0%,#1c3a24 38%,#3c5a34 68%,#6d7f49 100%)}
.su2-sun{position:absolute;left:50%;top:58%;width:520px;height:520px;transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(233,196,106,.95) 0%,rgba(216,158,74,.5) 30%,rgba(216,158,74,0) 62%);filter:blur(2px);animation:lg2Rise 1.4s cubic-bezier(.22,1,.36,1) both}
.su2-hills{position:absolute;inset:0;overflow:hidden}
.su2-hill{position:absolute;left:-10%;right:-10%;border-radius:50%/100% 100% 0 0}
.su2-hill-3{bottom:34%;height:44%;background:#3f5b38;opacity:.55;filter:blur(1px)}
.su2-hill-2{bottom:20%;height:46%;background:#33502f;animation:lg2Hill 1.1s .08s cubic-bezier(.22,1,.36,1) both}
.su2-hill-1{bottom:-6%;height:52%;background:#20361f;animation:lg2Hill 1.1s .16s cubic-bezier(.22,1,.36,1) both}
.su2-hill-3{animation:lg2Hill 1.1s cubic-bezier(.22,1,.36,1) both}
.su2-brand-inner{position:relative;z-index:2;max-width:420px;padding:48px;color:#f4f7ee;animation:lg2Up .8s .2s cubic-bezier(.22,1,.36,1) both}
.su2-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#e9c46a;margin-bottom:14px}
.su2-brand-inner h1{font-family:var(--font-display,"Fraunces",Georgia,serif);font-weight:600;font-size:40px;line-height:1.04;letter-spacing:-.02em;color:#fbfdf6;margin:0}
.su2-points{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.su2-points li{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:rgba(238,244,230,.92)}
.su2-tick{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(233,196,106,.16);border:1px solid rgba(233,196,106,.4)}
.su2-tick svg{width:13px;height:13px;stroke:#e9c46a}
.su2-main{flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;background:#f6f4ec}
.su2-form-wrap{width:100%;max-width:400px;margin:auto}
.su2-head{margin-bottom:22px}
.su2-greet{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a8845f;margin-bottom:8px}
.su2-head h2{font-family:var(--font-display,"Fraunces",Georgia,serif);font-weight:600;font-size:30px;line-height:1.06;letter-spacing:-.015em;color:#1e2617;margin:0}
.su2-head p{margin:9px 0 0;font-size:14px;line-height:1.5;color:#6f7c60;font-weight:500}
.su2-field{margin-bottom:14px}
.su2-field label{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3a4a3c;margin-bottom:7px}
.su2-input{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1.5px solid rgba(58,93,59,.22);background:#fff;font-size:16px;font-weight:500;color:#1e2617;outline:none;transition:border-color .15s,box-shadow .15s}
.su2-input::placeholder{color:#9aa39a;font-weight:500}
.su2-input:focus{border-color:#5c7a4e;box-shadow:0 0 0 4px rgba(92,122,78,.15)}
.su2-hint{display:block;margin-top:6px;font-size:12px;color:#8a9784;font-weight:500}
.su2-cta{margin-top:6px;width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;cursor:pointer;
background:linear-gradient(180deg,#5c7a4e 0%,#425a34 60%,#33481f 100%);color:#fff;font-family:var(--font-body);font-size:16px;font-weight:800;
box-shadow:0 14px 28px -10px rgba(40,60,30,.5),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .12s,box-shadow .15s}
.su2-cta svg{width:17px;height:17px;stroke:#fff}
@media(hover:hover){.su2-cta:hover{transform:translateY(-1px)}}
.su2-cta:active{transform:translateY(0) scale(.99)}
.su2-alt{margin:16px 0 0;font-size:13px;color:#6f7c60;font-weight:600;text-align:center}
.su2-alt a{color:#5c7a4e;font-weight:800;cursor:pointer;text-decoration:none;border-bottom:1.5px solid rgba(92,122,78,.35)}
.su2-err{margin-bottom:12px;font-size:13px;color:#a8392f;font-weight:700}
.su2-err:empty{display:none}
@media(max-width:860px){
.su2-root{flex-direction:column}
.su2-brand{flex:0 0 auto;min-height:32vh;padding:0}
.su2-brand-inner{padding:32px 26px;max-width:none}
.su2-brand-inner h1{font-size:30px}
.su2-points{display:none}
.su2-main{flex:1 1 auto;justify-content:flex-start;padding-top:28px;border-radius:26px 26px 0 0;margin-top:-26px;position:relative;z-index:3;box-shadow:0 -12px 30px -18px rgba(0,0,0,.3)}
}
@media(max-width:420px){
.su2-brand{min-height:26vh}
.su2-brand-inner h1{font-size:26px}
.su2-head h2{font-size:26px}
}
/* ---- inline style 79 ---- */
/* Design 2 — Modern Dark / Bold Contrast.
Scoped to the Messages area only. The existing app header and mobile navigation
are intentionally untouched. */
.content:has(.chat-shell){
background:#070a0c!important;
}
.content:has(.chat-shell) .section-head{display:none!important}
.chat-shell{
background:#090d10!important;
border-color:rgba(255,255,255,.075)!important;
box-shadow:none!important;
}
/* ---------- conversation list ---------- */
body .chat-list.cv-list{
min-height:0!important;
padding:9px 11px 12px!important;
gap:0!important;
overflow:hidden!important;
background:linear-gradient(180deg,#0b0f12 0%,#080c0f 100%)!important;
border-color:rgba(255,255,255,.075)!important;
box-shadow:none!important;
}
body .chat-list.cv-list .cv-head{
position:relative!important;inset:auto!important;z-index:2!important;
min-height:34px!important;height:34px!important;
display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
padding:0!important;margin:0 0 7px!important;
overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
body .chat-list.cv-list .cv-head::before,
body .chat-list.cv-list .cv-head::after{content:none!important;display:none!important}
body .chat-list.cv-list .cv-head-label{
color:#f5f6f7!important;
font-family:var(--font-body,"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)!important;
font-size:15px!important;line-height:1!important;font-weight:850!important;
letter-spacing:-.01em!important;text-transform:none!important;
}
body .chat-list.cv-list .cv-new{
position:static!important;flex:0 0 34px!important;width:34px!important;height:34px!important;min-width:34px!important;
display:grid!important;place-items:center!important;margin:0!important;padding:0!important;
border:1px solid rgba(137,213,91,.32)!important;border-radius:10px!important;
color:#fff!important;background:linear-gradient(145deg,#72bd49 0%,#4a982f 100%)!important;
box-shadow:0 6px 14px -8px rgba(103,190,64,.8),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
body .chat-list.cv-list .cv-new svg{width:18px!important;height:18px!important;stroke-width:2.2!important}
body .chat-list.cv-list .cv-new:active{transform:scale(.95)!important}
body .chat-list.cv-list .cv-search{
position:relative!important;inset:auto!important;z-index:2!important;
flex-shrink:0!important;display:flex!important;align-items:center!important;
min-height:40px!important;height:40px!important;padding:0 39px 0 35px!important;margin:0 0 7px!important;
border:1px solid rgba(255,255,255,.065)!important;border-radius:10px!important;
background:#171b1f!important;box-shadow:0 4px 12px -10px rgba(0,0,0,.95)!important;overflow:visible!important;
}
body .chat-list.cv-list .cv-search:focus-within{
border-color:rgba(119,194,73,.45)!important;
box-shadow:0 0 0 3px rgba(105,181,65,.10)!important;
}
body .chat-list.cv-list .cv-search-ic{
position:absolute!important;left:11px!important;top:50%!important;transform:translateY(-50%)!important;
width:16px!important;height:16px!important;color:#8a9298!important;
}
body .chat-list.cv-list .cv-search-ic svg{width:16px!important;height:16px!important;stroke-width:1.85!important}
body .chat-list.cv-list .cv-search input{
width:100%!important;height:38px!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;outline:0!important;
color:#f0f2f3!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:0!important;
}
body .chat-list.cv-list .cv-search input::placeholder{color:#8c9499!important;font-weight:570!important;opacity:1!important}
body .chat-list.cv-list .cv-search-clear{
position:absolute!important;right:38px!important;top:50%!important;transform:translateY(-50%)!important;
width:20px!important;height:20px!important;border-radius:7px!important;color:#b3b9bd!important;background:#24292d!important;border:0!important;
}
body .chat-list.cv-list .cv-filter{
position:absolute!important;right:4px!important;top:50%!important;transform:translateY(-50%)!important;
width:30px!important;height:30px!important;min-width:30px!important;display:grid!important;place-items:center!important;
border:0!important;border-radius:8px!important;color:#a5adb2!important;background:transparent!important;cursor:pointer!important;
}
body .chat-list.cv-list .cv-filter:hover{background:#22272b!important;color:#eef1f2!important}
body .chat-list.cv-list .cv-filter.active{color:#f7fff4!important;background:#4b8e33!important}
.cv-filter-icon{width:15px;height:13px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.cv-filter-icon i{display:block;height:1.5px;border-radius:99px;background:currentColor;position:relative}
.cv-filter-icon i:nth-child(1){width:15px}.cv-filter-icon i:nth-child(2){width:11px;align-self:flex-end}.cv-filter-icon i:nth-child(3){width:7px;align-self:flex-end}
.cv-filter-icon i::after{content:"";position:absolute;top:50%;width:3px;height:3px;border:1.2px solid currentColor;border-radius:50%;background:#171b1f;transform:translateY(-50%)}
.cv-filter-icon i:nth-child(1)::after{left:4px}.cv-filter-icon i:nth-child(2)::after{right:2px}.cv-filter-icon i:nth-child(3)::after{left:1px}
.cv-filter.active .cv-filter-icon i::after{background:#4b8e33}
.cv-filter-count{
position:absolute;right:-3px;top:-3px;min-width:15px;height:15px;padding:0 3px;display:grid;place-items:center;border-radius:999px;
background:#d84e4e;color:#fff;border:2px solid #171b1f;font-size:7px;font-weight:900;line-height:1;
}
body .chat-list.cv-list .cv-threads{
position:relative!important;z-index:1!important;flex:1 1 auto!important;min-height:0!important;
display:block!important;padding:0 0 10px!important;margin:0!important;
overflow-y:auto!important;overflow-x:hidden!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
scrollbar-width:thin!important;scrollbar-color:rgba(148,157,163,.18) transparent!important;
}
body .chat-list.cv-list .cv-threads::-webkit-scrollbar{width:4px!important}
body .chat-list.cv-list .cv-threads::-webkit-scrollbar-thumb{background:rgba(148,157,163,.18)!important;border-radius:999px!important}
body .chat-list.cv-list .cv-sec,
body .chat-list.cv-list .cv-people-label{
display:flex!important;align-items:center!important;justify-content:space-between!important;
min-height:22px!important;height:22px!important;margin:0!important;padding:4px 1px 3px!important;
color:#f0f2f3!important;background:transparent!important;border:0!important;
font-size:10px!important;line-height:1!important;font-weight:790!important;letter-spacing:0!important;text-transform:none!important;
}
body .chat-list.cv-list .cv-sec-pin{color:#f0f2f3!important;padding-top:1px!important}
body .chat-list.cv-list .cv-sec-pin::after{content:"View all";color:#81c95b;font-size:9px;font-weight:720}
body .chat-list.cv-list .cv-people-label{color:#f0f2f3!important}
/* Neutral charcoal cards. Green is used only for accents, matching Design 2. */
body .chat-list.cv-list .cv-row,
body .chat-list.cv-list .cv-row.cv-pinned,
body .chat-list.cv-list .cv-row.cv-person{
width:100%!important;min-height:50px!important;height:50px!important;
display:flex!important;align-items:center!important;gap:8px!important;
margin:0 0 4px!important;padding:5px 7px!important;position:relative!important;overflow:hidden!important;text-align:left!important;
background:linear-gradient(180deg,#171c20 0%,#14191d 100%)!important;
border:1px solid rgba(255,255,255,.065)!important;border-radius:10px!important;
box-shadow:0 3px 9px -8px rgba(0,0,0,.95)!important;transform:none!important;
}
body .chat-list.cv-list .cv-row::before,
body .chat-list.cv-list .cv-row::after,
body .chat-list.cv-list .cv-row.cv-pinned::before{content:none!important;display:none!important}
body .chat-list.cv-list .cv-row:hover{
background:linear-gradient(180deg,#1d2328 0%,#191f23 100%)!important;
border-color:rgba(255,255,255,.11)!important;box-shadow:0 4px 11px -8px rgba(0,0,0,.95)!important;transform:none!important;
}
body .chat-list.cv-list .cv-row:active{background:#20262b!important;transform:scale(.996)!important}
body .chat-list.cv-list .cv-row.active,
body .chat-list.cv-list .cv-row.cv-pinned.active{
background:linear-gradient(180deg,#1b2125 0%,#171d21 100%)!important;
border-color:rgba(117,190,72,.32)!important;
box-shadow:inset 2px 0 0 #72bc48,0 4px 11px -9px rgba(0,0,0,.95)!important;
}
body .chat-list.cv-list .cv-row.cv-pinned,
body .chat-list.cv-list .cv-row.cv-unread{
background:linear-gradient(180deg,#171c20 0%,#14191d 100%)!important;
border-color:rgba(255,255,255,.07)!important;
}
body .chat-list.cv-list .cv-row.cv-pinned .cv-name,
body .chat-list.cv-list .cv-row.cv-pinned.cv-unread .cv-name{color:#f4f5f6!important}
body .chat-list.cv-list .cv-row.cv-unread .cv-time{color:#c1c6ca!important}
body .chat-list.cv-list .cv-av{position:relative!important;flex:0 0 34px!important;width:34px!important;height:34px!important}
body .chat-list.cv-list .cv-av .avatar{
width:34px!important;height:34px!important;border-radius:9px!important;display:grid!important;place-items:center!important;
color:#fff!important;font-size:10.5px!important;font-weight:850!important;
background:linear-gradient(150deg,#5da43e,#39772c)!important;border:0!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 8px -7px rgba(0,0,0,.9)!important;
}
body .chat-list.cv-list .cv-person .cv-av .avatar,
body .chat-list.cv-list .cv-type-dm .cv-av .avatar{
border-radius:50%!important;background:linear-gradient(150deg,#315675,#203950)!important;
}
body .chat-list.cv-list .cv-type-team .cv-av .avatar{background:linear-gradient(150deg,#68b246,#397c2d)!important}
body .chat-list.cv-list .cv-type-workphotos .cv-av .avatar,
body .chat-list.cv-list .cv-workphotos .cv-av .avatar{background:linear-gradient(150deg,#559b3d,#316e2a)!important}
body .chat-list.cv-list .cv-type-announcement .cv-av .avatar{background:linear-gradient(150deg,#aa654d,#754030)!important}
body .chat-list.cv-list .cv-av .avatar.sage{background:linear-gradient(150deg,#315675,#203950)!important}
body .chat-list.cv-list .cv-av .avatar.clay{background:linear-gradient(150deg,#aa654d,#754030)!important}
body .chat-list.cv-list .cv-av .avatar svg{width:16px!important;height:16px!important;stroke:#fff!important;stroke-width:1.85!important}
body .chat-list.cv-list .cv-unread-dot{
position:absolute!important;right:-2px!important;top:-2px!important;width:8px!important;height:8px!important;border-radius:50%!important;
background:#79c64e!important;border:2px solid #171c20!important;box-shadow:none!important;
}
body .chat-list.cv-list .cv-body{
flex:1 1 auto!important;min-width:0!important;height:38px!important;
display:flex!important;flex-direction:column!important;justify-content:center!important;gap:0!important;overflow:hidden!important;
}
body .chat-list.cv-list .cv-top{display:flex!important;align-items:center!important;gap:6px!important;width:100%!important;min-width:0!important;height:14px!important}
body .chat-list.cv-list .cv-name{
flex:1 1 auto!important;min-width:0!important;color:#f1f3f4!important;
font-size:12.1px!important;line-height:14px!important;font-weight:760!important;letter-spacing:-.01em!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body .chat-list.cv-list .cv-row.cv-unread .cv-name{font-weight:880!important;color:#fff!important}
body .chat-list.cv-list .cv-sub{
display:block!important;min-width:0!important;height:11px!important;color:#a6adb1!important;
font-size:9.4px!important;line-height:11px!important;font-weight:560!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important;
}
body .chat-list.cv-list .cv-last{
display:block!important;min-width:0!important;height:12px!important;color:#d0d4d6!important;
font-size:10px!important;line-height:12px!important;font-weight:540!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important;
}
body .chat-list.cv-list .cv-empty{color:#828a8f!important}
body .chat-list.cv-list .cv-row.cv-unread .cv-last{color:#eef1f2!important;font-weight:650!important}
body .chat-list.cv-list .cv-time{
flex:0 0 auto!important;display:block!important;color:#b2b8bc!important;
font-size:8.2px!important;line-height:1!important;font-weight:600!important;white-space:nowrap!important;
}
body .chat-list.cv-list .cv-pinned .cv-time{color:#c6cbce!important}
body .chat-list.cv-list .cv-pintag{
display:none!important;
}
body .chat-list.cv-list .cv-type-team .cv-pintag{
display:inline-grid!important;place-items:center!important;flex:0 0 auto!important;width:13px!important;height:13px!important;
padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#e9df72!important;
font-size:0!important;line-height:1!important;
}
body .chat-list.cv-list .cv-type-team .cv-pintag::after{content:"★"!important;font-size:10px!important;line-height:1!important}
body .chat-list.cv-list .cv-readtoggle,
body .chat-list.cv-list .cv-mini-action,
body .chat-list.cv-list .cv-chev{display:none!important}
body .chat-list.cv-list .cv-none{
margin:5px 0!important;padding:22px 14px!important;border-radius:10px!important;
background:#151a1e!important;border:1px dashed rgba(255,255,255,.10)!important;
color:#959da2!important;font-size:11px!important;font-weight:620!important;text-align:center!important;
}
/* ---------- conversation thread ---------- */
body .chat-thread{
background:linear-gradient(180deg,#0d1114 0%,#090d10 100%)!important;
border-color:rgba(255,255,255,.075)!important;box-shadow:none!important;color:#eef1f2!important;
}
body .chat-thread.empty-thread{background:#0b0f12!important;color:#8d959a!important}
body .chat-thread .ct-head,
body .chat-thread .chat-thread-head{
background:#14191d!important;border-bottom:1px solid rgba(255,255,255,.07)!important;box-shadow:none!important;color:#eef1f2!important;
}
body .chat-thread .cth-back,
body .chat-thread .cth-act{
color:#d9dee1!important;background:#20262a!important;border-color:rgba(255,255,255,.08)!important;
}
body .chat-thread .cth-back svg,
body .chat-thread .cth-act svg{stroke:currentColor!important}
body .chat-thread .cth-name{color:#f4f6f7!important}
body .chat-thread .cth-sub,
body .chat-thread .cth-presence{color:#9ba3a8!important}
body .chat-thread .cth-presence.is-online{color:#7cc652!important}
body .chat-thread .cth-dot{background:#75c14a!important}
body .chat-thread .chat-scroll{background:linear-gradient(180deg,#0b0f12,#080c0f)!important}
body .chat-thread .bubble,
body .chat-thread .msg:not(.mine) .bubble{
background:#191f23!important;border-color:rgba(255,255,255,.075)!important;color:#edf0f1!important;box-shadow:none!important;
}
body .chat-thread .msg.mine .bubble{
background:#243129!important;border-color:rgba(119,192,74,.18)!important;color:#f2f6f1!important;box-shadow:none!important;
}
body .chat-thread .b-author{color:#8bc968!important}
body .chat-thread .bubble time{color:#899196!important}
body .chat-thread .msg.mine .bubble time{color:#98a79a!important}
body .chat-thread .chat-composer{
background:#12171a!important;border-top:1px solid rgba(255,255,255,.07)!important;box-shadow:none!important;
}
body .chat-thread .chat-editbox,
body .chat-thread .chat-composer .input{
border-color:rgba(255,255,255,.09)!important;background:#1a2024!important;color:#eef1f2!important;
}
body .chat-thread .chat-editbox:focus-within,
body .chat-thread .chat-composer .input:focus{border-color:rgba(119,192,74,.42)!important;box-shadow:0 0 0 3px rgba(105,181,65,.09)!important}
body .chat-thread .cattach,
body .chat-thread .photo-upload-btn{
background:#1d2327!important;border:1px solid rgba(255,255,255,.09)!important;color:#c6ccd0!important;box-shadow:none!important;
}
body .chat-thread .chat-composer .btn.btn-primary.csend,
body .chat-thread .chat-composer .csend,
body .chat-thread .csend{
border:1px solid rgba(139,214,92,.20)!important;border-radius:12px!important;
background:linear-gradient(145deg,#70ba49,#478f31)!important;color:#fff!important;box-shadow:none!important;
}
body .chat-thread .chat-composer .csend svg{stroke:currentColor!important}
@media (max-width:1023px){
.content:has(.chat-shell){padding-left:0!important;padding-right:0!important}
.chat-shell{height:calc(100dvh - 188px - var(--safe-b))!important;min-height:0!important;border-radius:0!important;border-left:0!important;border-right:0!important}
body .chat-list.cv-list{padding-left:10px!important;padding-right:10px!important;border-radius:0!important}
}
@media (min-width:1024px){
.content:has(.chat-shell){padding:18px 22px 22px!important}
.chat-shell{border-radius:22px!important;overflow:hidden!important}
body .chat-list.cv-list{
width:360px!important;min-width:360px!important;padding:12px!important;
border-radius:22px 0 0 22px!important;border-right:1px solid rgba(255,255,255,.07)!important;
}
body .chat-thread{border-radius:0 22px 22px 0!important}
}
@media (max-width:370px){
body .chat-list.cv-list{padding-left:8px!important;padding-right:8px!important}
body .chat-list.cv-list .cv-row,
body .chat-list.cv-list .cv-row.cv-pinned,
body .chat-list.cv-list .cv-row.cv-person{height:48px!important;min-height:48px!important;gap:7px!important;padding:5px 6px!important}
body .chat-list.cv-list .cv-av,
body .chat-list.cv-list .cv-av .avatar{width:32px!important;height:32px!important;flex-basis:32px!important}
body .chat-list.cv-list .cv-name{font-size:11.7px!important}
}
/* ---- inline style 80 ---- */
/* Messages-only stability pass.
Keeps the approved Design 2 colours, header and mobile menu unchanged. */
@media (max-width:1023px){
body.ww-chat-active{
height:var(--ww-chat-stable-vh,100svh)!important;
min-height:var(--ww-chat-stable-vh,100svh)!important;
max-height:var(--ww-chat-stable-vh,100svh)!important;
overflow:hidden!important;
overscroll-behavior:none!important;
}
body.ww-chat-active #app,
body.ww-chat-active .shell,
body.ww-chat-active .main{
height:var(--ww-chat-stable-vh,100svh)!important;
min-height:0!important;
max-height:var(--ww-chat-stable-vh,100svh)!important;
overflow:hidden!important;
}
body.ww-chat-active .main{
display:flex!important;
flex-direction:column!important;
}
body.ww-chat-active .topbar{
flex:0 0 auto!important;
}
body.ww-chat-active .content,
body.ww-chat-active main.content{
flex:1 1 auto!important;
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:hidden!important;
overscroll-behavior:none!important;
-webkit-overflow-scrolling:auto!important;
padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))!important;
}
body.ww-chat-active.chat-thread-open .content,
body.ww-chat-active.chat-thread-open main.content{
padding-bottom:0!important;
}
body.ww-chat-active .content > .page,
body.ww-chat-active main.content > .page{
height:100%!important;
min-height:0!important;
max-height:100%!important;
overflow:hidden!important;
padding-bottom:0!important;
}
body.ww-chat-active .chat-shell{
height:100%!important;
min-height:0!important;
max-height:100%!important;
overflow:hidden!important;
overscroll-behavior:none!important;
contain:layout paint!important;
}
body.ww-chat-active .chat-list.cv-list,
body.ww-chat-active .chat-thread{
height:100%!important;
min-height:0!important;
max-height:100%!important;
overflow:hidden!important;
contain:layout paint!important;
}
body.ww-chat-active .cv-threads,
body.ww-chat-active .chat-scroll{
flex:1 1 auto!important;
min-height:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior-y:contain!important;
-webkit-overflow-scrolling:touch!important;
scroll-behavior:auto!important;
scroll-snap-type:none!important;
overflow-anchor:none!important;
touch-action:pan-y!important;
will-change:auto!important;
transform:none!important;
}
body.ww-chat-active .chat-composer{
position:relative!important;
inset:auto!important;
bottom:auto!important;
flex:0 0 auto!important;
transform:none!important;
will-change:auto!important;
}
/* Prevent the old horizontal swipe preview from reacting to a thumb's normal
sideways drift during vertical scrolling. Long-press chat actions still work. */
body.ww-chat-active .cv-row,
body.ww-chat-active .cv-row.ww-swipe-peek{
transform:none!important;
animation:none!important;
transition:none!important;
will-change:auto!important;
}
}
@media (min-width:1024px){
body.ww-chat-active .cv-threads,
body.ww-chat-active .chat-scroll{
overscroll-behavior:contain!important;
scroll-behavior:auto!important;
overflow-anchor:none!important;
}
}
/* ---- inline style 81 ---- */
/* Messages-only refinement requested after the approved Design 2 dark theme.
Keeps the header, colours, mobile menu and every other app section unchanged. */
@media (max-width:1023px){
/* Let the scrolling list meet the mobile menu cleanly. The previous 10px
tail plus iOS elastic overscroll made a thick black strip appear. */
body .chat-list.cv-list{padding-bottom:0!important;}
body .chat-list.cv-list .cv-threads,
body.ww-chat-active .cv-threads{
/* Clear the fixed bottom nav (78px tall) plus the iOS home indicator,
otherwise the final conversation card is hidden underneath the bar. */
padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px))!important;
scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px))!important;
overscroll-behavior-y:none!important;
}
/* Roomier, easier-to-read conversation cards: roughly six complete cards
are visible on a standard iPhone screen instead of eight cramped rows. */
body .chat-list.cv-list .cv-row,
body .chat-list.cv-list .cv-row.cv-pinned,
body .chat-list.cv-list .cv-row.cv-person{
height:74px!important;
min-height:74px!important;
margin-bottom:7px!important;
padding:8px 10px!important;
gap:11px!important;
border-radius:13px!important;
}
body .chat-list.cv-list .cv-av{
width:46px!important;
height:46px!important;
flex:0 0 46px!important;
}
body .chat-list.cv-list .cv-av .avatar{
width:46px!important;
height:46px!important;
font-size:13px!important;
border-radius:12px!important;
}
body .chat-list.cv-list .cv-person .cv-av .avatar,
body .chat-list.cv-list .cv-type-dm .cv-av .avatar{border-radius:50%!important;}
body .chat-list.cv-list .cv-av .avatar svg{width:20px!important;height:20px!important;}
body .chat-list.cv-list .cv-body{
height:54px!important;
gap:1px!important;
}
body .chat-list.cv-list .cv-top{
height:18px!important;
gap:7px!important;
}
body .chat-list.cv-list .cv-name{
font-size:15px!important;
line-height:18px!important;
letter-spacing:-.012em!important;
}
body .chat-list.cv-list .cv-sub{
height:15px!important;
font-size:11.7px!important;
line-height:15px!important;
}
body .chat-list.cv-list .cv-last{
height:16px!important;
font-size:12.6px!important;
line-height:16px!important;
}
body .chat-list.cv-list .cv-time{
font-size:10px!important;
line-height:1!important;
}
body .chat-list.cv-list .cv-type-team .cv-pintag{width:15px!important;height:15px!important;}
body .chat-list.cv-list .cv-type-team .cv-pintag::after{font-size:12px!important;}
body .chat-list.cv-list .cv-sec,
body .chat-list.cv-list .cv-people-label{
height:25px!important;
min-height:25px!important;
padding:5px 2px 4px!important;
font-size:11.5px!important;
}
body .chat-list.cv-list .cv-sec-pin::after{font-size:10.5px!important;}
}
/* Keep the typography comfortable on narrower phones without allowing dates
or names to collide. */
@media (max-width:370px){
body .chat-list.cv-list .cv-row,
body .chat-list.cv-list .cv-row.cv-pinned,
body .chat-list.cv-list .cv-row.cv-person{
height:69px!important;
min-height:69px!important;
margin-bottom:6px!important;
padding:7px 8px!important;
gap:9px!important;
}
body .chat-list.cv-list .cv-av,
body .chat-list.cv-list .cv-av .avatar{
width:42px!important;
height:42px!important;
flex-basis:42px!important;
}
body .chat-list.cv-list .cv-body{height:51px!important;}
body .chat-list.cv-list .cv-name{font-size:14px!important;line-height:17px!important;}
body .chat-list.cv-list .cv-sub{font-size:11px!important;line-height:14px!important;height:14px!important;}
body .chat-list.cv-list .cv-last{font-size:12px!important;line-height:15px!important;height:15px!important;}
body .chat-list.cv-list .cv-time{font-size:9.3px!important;}
}
/* ---- inline style 82 ---- */
/* Requested change only: open conversations use a true full-screen dark canvas,
hide the bottom navigation completely, and clearly separate incoming/outgoing
bubble colours. The Messages list, app header and all other sections stay as-is. */
/* Stronger visual separation between received and sent messages. */
body .chat-thread .bubble,
body .chat-thread .msg:not(.mine) .bubble{
background:linear-gradient(180deg,#28323b 0%,#222b33 100%)!important;
border:1px solid rgba(157,181,198,.18)!important;
color:#f4f7f8!important;
box-shadow:0 5px 16px rgba(0,0,0,.16)!important;
}
body .chat-thread .msg.mine .bubble{
background:linear-gradient(180deg,#3b6047 0%,#2d4b38 100%)!important;
border:1px solid rgba(151,205,157,.24)!important;
color:#ffffff!important;
box-shadow:0 5px 16px rgba(0,0,0,.18)!important;
}
body .chat-thread .b-author{color:#a8d882!important}
body .chat-thread .msg:not(.mine) .bubble time{color:#aeb9c1!important;font-size:11px!important;opacity:.7!important;margin-top:4px!important;align-self:flex-end!important;line-height:1!important}
body .chat-thread .msg.mine .bubble time{color:#c1d3c5!important}
body .chat-thread .msg.mine .msg-status{color:#d9efd9!important}
/* ---- BUBBLE REFINEMENT: standard readable text, meta stays inside ---- */
body .chat-thread .bubble{
padding:8px 13px 7px!important;
border-radius:17px!important;
box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
width:max-content!important;max-width:82%!important;
min-width:0!important;
display:flex!important;flex-direction:column!important;
}
body .chat-thread .msg{align-items:flex-end!important;gap:6px!important;margin-bottom:3px!important;max-width:100%!important}
body .chat-thread .msg.mine .bubble{align-items:flex-end!important;min-width:150px!important}
body .chat-thread .msg:not(.mine) .bubble{align-items:flex-start!important;border-radius:17px 17px 17px 5px!important;min-width:0!important}
body .chat-thread .msg.mine .bubble{border-radius:17px 17px 5px 17px!important}
/* Standard message text — normal readable size, wraps only on long words/URLs. */
body .chat-thread .b-text{
font-size:15px!important;line-height:1.35!important;letter-spacing:-.002em!important;
white-space:pre-wrap!important;word-break:normal!important;overflow-wrap:break-word!important;
width:max-content!important;max-width:100%!important;align-self:auto!important;margin:0!important;
}
body .chat-thread .b-author{font-size:11.5px!important;font-weight:620!important;margin-bottom:2px!important;letter-spacing:.01em!important;align-self:flex-start!important}
/* META: timestamp + status on one line, bottom-right, and NEVER wider than the
bubble. It participates in the bubble's intrinsic width so short words like
"Sure" grow the bubble to fit "9:34 pm · Delivered" instead of overhanging. */
body .chat-thread .b-meta{
display:flex!important;flex-direction:row!important;align-items:center!important;
justify-content:flex-end!important;
gap:6px!important;align-self:stretch!important;margin-top:3px!important;
min-width:max-content!important;line-height:1!important;flex-wrap:nowrap!important;
box-sizing:border-box!important;
}
/* The bubble must be at least as wide as the meta line so nothing overhangs. */
body .chat-thread .msg.mine .bubble{padding-right:13px!important}
body .chat-thread .b-meta time{
display:inline-block!important;font-size:11px!important;line-height:1!important;
margin:0!important;padding:0!important;opacity:.62!important;white-space:nowrap!important;
}
body .chat-thread .b-meta .msg-status{
display:inline-block!important;font-size:10.5px!important;font-weight:620!important;
line-height:1!important;margin:0!important;padding:0!important;opacity:.85!important;white-space:nowrap!important;
}
body .chat-thread .msg-av .avatar{width:36px!important;height:36px!important;font-size:13.5px!important;
font-weight:800!important;color:#fff!important;letter-spacing:.03em!important;
border:2px solid rgba(255,255,255,.22)!important;
box-shadow:0 4px 12px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.28)!important;
text-shadow:0 1px 2px rgba(0,0,0,.35)!important;}
/* Curated palette — rich, harmonious tones that suit the earthy theme and sit
well against the dark chat. The white initials keep clean contrast on all of
them (each colour is deep enough to read white text nicely). */
body .chat-thread .msg-av .avatar.chat-hue-av[data-c="0"]{background:linear-gradient(140deg,#4e9d57,#2c6a36)!important} /* green */
body .chat-thread .msg-av .avatar.chat-hue-av[data-c="1"]{background:linear-gradient(140deg,#2f9d92,#1c675e)!important} /* teal */
body .chat-thread .msg-av .avatar.chat-hue-av[data-c="2"]{background:linear-gradient(140deg,#4a90d0,#295a90)!important} /* blue */
body .chat-thread .msg-av .avatar.chat-hue-av[data-c="3"]{background:linear-gradient(140deg,#7a6fc4,#463a86)!important} /* indigo */
body .chat-thread .msg-av .avatar.chat-hue-av[data-c="4"]{background:linear-gradient(140deg,#b45ea0,#7a3568)!important} /* magenta/plum */
body .chat-thread .msg-av .avatar.chat-hue-av[data-c="5"]{background:linear-gradient(140deg,#d0684e,#96382a)!important} /* red/terracotta */
body .chat-thread .msg-av .avatar.chat-hue-av[data-c="6"]{background:linear-gradient(140deg,#d99a3c,#a06c14)!important} /* amber */
body .chat-thread .msg-av .avatar.chat-hue-av[data-c="7"]{background:linear-gradient(140deg,#8aa83f,#566a1f)!important} /* lime/olive */
body .chat-thread .msg-av{width:38px!important;flex-shrink:0!important}
body .chat-thread .chat-scroll{gap:3px!important}
@media (max-width:1023px){
/* One continuous dark surface from the status-bar area to the home-indicator
area. This removes the old green strip below the composer. */
html:has(body.chat-thread-open),
body.chat-thread-open,
body.chat-thread-open #app,
body.chat-thread-open .shell,
body.chat-thread-open .main,
body.chat-thread-open .content,
body.chat-thread-open main.content,
body.chat-thread-open .page,
body.chat-thread-open .chat-shell,
body.chat-thread-open .chat-thread{
background:#14191f!important;
background-color:#14191f!important;
}
/* Robust fallback (no :has needed): when chat is open the whole page and every
wrapper is the dark chat colour, edge to edge, and the grain overlay + any
side gradient is removed so no light/green strip shows on the sides. */
body.chat-thread-open,
body.chat-thread-open .shell{background:#14191f!important;background-image:none!important}
body.chat-thread-open .shell::before,
body.chat-thread-open .shell::after{display:none!important;background:none!important}
body.chat-thread-open{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
border-radius:0!important;
overflow:hidden!important;
}
body.chat-thread-open .chat-shell{
position:fixed!important;
inset:0!important;
width:100vw!important;
height:var(--ww-chat-stable-vh,100dvh)!important;
max-height:var(--ww-chat-stable-vh,100dvh)!important;
min-height:0!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
overflow:hidden!important;
z-index:1000!important;
}
body.chat-thread-open .chat-thread{
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
border:0!important;
border-radius:0!important;
overflow:hidden!important;
}
body.chat-thread-open .chat-thread-head,
body.chat-thread-open .ct-head{
background:#14191f!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
}
body.chat-thread-open .chat-scroll{
background:#10151a!important;
background-image:none!important;
}
body.chat-thread-open .chat-composer{
flex:0 0 auto!important;
position:relative!important;
inset:auto!important;
margin:0!important;
padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
background:#14191f!important;
border-top:1px solid rgba(255,255,255,.08)!important;
box-shadow:none!important;
}
body.chat-thread-open .chat-composer::before,
body.chat-thread-open .chat-composer::after,
body.chat-thread-open::before,
body.chat-thread-open::after,
body.chat-thread-open .main::before,
body.chat-thread-open .main::after,
body.chat-thread-open .content::before,
body.chat-thread-open .content::after,
body.chat-thread-open .page::before,
body.chat-thread-open .page::after,
body.chat-thread-open .chat-shell::before,
body.chat-thread-open .chat-shell::after{
display:none!important;
content:none!important;
background:none!important;
}
}
/* ---- inline style 83 ---- */
/* Actual app fix — Messages conversation only. */
.chat-composer textarea.chat-editbox,
#chatInput.chat-editbox{
box-sizing:border-box!important;
display:block!important;
flex:1 1 auto!important;
width:auto!important;
min-width:0!important;
height:46px!important;
min-height:46px!important;
max-height:120px!important;
padding:11px 15px!important;
font-family:inherit!important;
font-size:16px!important;
line-height:1.35!important;
white-space:pre-wrap!important;
word-break:break-word!important;
resize:none!important;
overflow-y:hidden!important;
outline:none!important;
-webkit-appearance:none!important;
appearance:none!important;
caret-color:#eef1f2!important;
}
.chat-composer textarea.chat-editbox::placeholder{color:rgba(255,255,255,.58)!important;opacity:1!important}
.chat-composer textarea.chat-editbox:focus{outline:none!important}
@media(max-width:1023px){
body.chat-thread-open{
position:fixed!important;
inset:0!important;
width:100%!important;
height:100%!important;
overflow:hidden!important;
}
body.chat-thread-open .chat-shell{
position:fixed!important;
top:var(--ww-chat-vv-top,0px)!important;
left:var(--ww-chat-vv-left,0px)!important;
right:auto!important;
bottom:auto!important;
width:var(--ww-chat-vv-width,100vw)!important;
height:var(--ww-chat-vv-height,100dvh)!important;
min-height:var(--ww-chat-vv-height,100dvh)!important;
max-height:var(--ww-chat-vv-height,100dvh)!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
transform:none!important;
}
body.chat-thread-open .chat-thread{
flex:1 1 0!important;
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
}
body.chat-thread-open .chat-thread-head,
body.chat-thread-open .ct-head{
flex:0 0 auto!important;
}
body.chat-thread-open .chat-scroll{
flex:1 1 0!important;
min-height:0!important;
height:auto!important;
overflow-x:hidden!important;
overflow-y:auto!important;
padding-bottom:12px!important;
scroll-padding-bottom:12px!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:contain!important;
}
body.chat-thread-open .chat-composer{
position:relative!important;
inset:auto!important;
flex:0 0 auto!important;
width:100%!important;
min-height:66px!important;
margin:0!important;
padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px))!important;
align-items:flex-end!important;
gap:9px!important;
transform:none!important;
}
body.chat-thread-open .chat-composer textarea.chat-editbox{
height:46px!important;
min-height:46px!important;
max-height:min(120px,32vh)!important;
overflow-y:hidden!important;
touch-action:manipulation!important;
}
body.chat-thread-open .chat-composer .cattach,
body.chat-thread-open .chat-composer .csend{
flex:0 0 46px!important;
width:46px!important;
height:46px!important;
align-self:flex-end!important;
margin:0!important;
}
body.chat-thread-open .chat-composer::before,
body.chat-thread-open .chat-composer::after{display:none!important;content:none!important}
}
/* Client agreement signing-link card */
.agreement-card{padding:18px 18px 16px;background:linear-gradient(155deg,#2c5a34,#1c3a24);color:#f4f7ee;border:0;box-shadow:0 12px 28px -12px rgba(20,50,25,.5)}
.agreement-card .ag-top{display:flex;gap:13px;align-items:flex-start}
.agreement-card .ag-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(233,196,106,.18);border:1px solid rgba(233,196,106,.4)}
.agreement-card .ag-ic svg{width:20px;height:20px;stroke:#e9c46a}
.agreement-card .ag-head h3{margin:0;font-family:var(--font-display,Georgia,serif);font-size:19px;font-weight:600;color:#fbfdf6}
.agreement-card .ag-head p{margin:4px 0 0;font-size:13px;line-height:1.45;color:rgba(232,240,224,.85)}
.agreement-card .ag-link{margin:14px 0 12px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);font-size:12.5px;word-break:break-all;color:#dfead9}
.agreement-card .ag-actions{display:flex;gap:8px;flex-wrap:wrap}
.agreement-card .ag-actions .btn{flex:1;min-width:96px;height:44px}
.agreement-card .ag-actions .btn svg{width:16px;height:16px}
.agreement-card .btn-soft{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18)}
.agreement-card .ag-empty{margin:14px 0 12px;font-size:13px;color:rgba(232,240,224,.8)}
.agreement-card .ag-edit{margin-top:11px;background:none;border:0;color:#e9c46a;font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* ============================================================
DESKTOP / TABLET MESSAGE LIST — standard, readable, no overlap
============================================================ */
@media (min-width:768px){
body .chat-list.cv-list .cv-row,
body .chat-list.cv-list .cv-row.cv-pinned,
body .chat-list.cv-list .cv-row.cv-person{
height:auto!important;min-height:72px!important;
display:flex!important;align-items:center!important;
padding:14px 16px!important;gap:14px!important;border-radius:16px!important;
margin-top:6px!important;overflow:hidden!important;
}
/* avatar: fixed size, never shrinks, never overflows the row */
body .chat-list.cv-list .cv-av{flex:0 0 auto!important;position:static!important;display:flex!important;align-items:center!important}
body .chat-list.cv-list .cv-av .avatar{width:50px!important;height:50px!important;font-size:17px!important;flex:0 0 auto!important;position:static!important}
body .chat-list.cv-list .cv-av .avatar svg{width:22px!important;height:22px!important}
/* body takes the remaining space and clips its own overflow */
body .chat-list.cv-list .cv-body{flex:1 1 auto!important;min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:3px!important;overflow:hidden!important}
body .chat-list.cv-list .cv-top{display:flex!important;align-items:baseline!important;gap:10px!important;width:100%!important;min-width:0!important}
body .chat-list.cv-list .cv-name{flex:1 1 auto!important;min-width:0!important;font-size:16.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body .chat-list.cv-list .cv-time{flex:0 0 auto!important;font-size:12.5px!important;white-space:nowrap!important}
body .chat-list.cv-list .cv-sub{display:block!important;font-size:12.5px!important;color:#8a948a!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body .chat-list.cv-list .cv-last{font-size:14px!important;line-height:1.35!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body .chat-list.cv-list .cv-sec{font-size:12px!important;padding:16px 4px 8px!important}
}
/* ============================================================
MESSAGE REACTIONS — tap a message to reveal a clean quick-bar
============================================================ */
/* remove the old floating smile button entirely */
.msg-react-btn{display:none!important}
.msg .bubble{cursor:pointer;position:relative}
/* quick reaction bar that appears above/over the tapped message */
.rx-quickbar{
position:absolute;bottom:calc(100% + 6px);
display:flex;align-items:center;gap:2px;
padding:4px 5px;border-radius:999px;
background:#ffffff;box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06);
z-index:20;animation:rxPop .14s ease both;
}
.msg:not(.mine) .rx-quickbar{left:0}
.msg.mine .rx-quickbar{right:0}
@keyframes rxPop{from{opacity:0;transform:translateY(4px) scale(.94)}to{opacity:1;transform:none}}
.rx-quick{
width:38px;height:38px;border:0;background:transparent;border-radius:50%;
font-size:21px;line-height:1;cursor:pointer;display:grid;place-items:center;
transition:transform .1s ease,background .1s ease;
}
@media(hover:hover){.rx-quick:hover{background:#f0f0f0;transform:scale(1.18)}}
.rx-quick:active{transform:scale(1.05)}
.rx-quick.rx-more{font-size:0}
.rx-quick.rx-more svg{width:18px;height:18px;stroke:#5d6b60}
.rx-quick.rx-more{background:#f2f3ef}
/* dim/highlight the selected message a touch so it's clear which one */
.msg.rx-open .bubble{box-shadow:0 0 0 2px rgba(233,196,106,.55)!important}
/* ---- inline style 84 ---- */
/* Open conversation only: professional, always-visible message composer. */
@media (max-width:1023px){
body.chat-thread-open{
position:fixed!important;
inset:0!important;
width:100%!important;
height:100%!important;
overflow:hidden!important;
overscroll-behavior:none!important;
}
body.chat-thread-open .chat-shell{
position:fixed!important;
top:0!important;
left:0!important;
right:auto!important;
bottom:auto!important;
width:var(--ww370-chat-visible-width,100vw)!important;
height:var(--ww370-chat-visible-height,100dvh)!important;
min-height:var(--ww370-chat-visible-height,100dvh)!important;
max-height:var(--ww370-chat-visible-height,100dvh)!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
transform:none!important;
contain:layout paint!important;
}
body.chat-thread-open .chat-thread{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-template-rows:max-content minmax(0,1fr) max-content!important;
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
overflow:hidden!important;
}
body.chat-thread-open .chat-thread-head,
body.chat-thread-open .ct-head{
grid-row:1!important;
min-width:0!important;
flex:none!important;
position:relative!important;
z-index:4!important;
}
body.chat-thread-open .workphoto-banner{
grid-row:2!important;
position:absolute!important;
top:var(--ww370-thread-head-height,0px)!important;
z-index:3!important;
}
body.chat-thread-open .chat-scroll{
grid-row:2!important;
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow-x:hidden!important;
overflow-y:auto!important;
padding-bottom:14px!important;
scroll-padding-bottom:14px!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:contain!important;
touch-action:pan-y!important;
}
body.chat-thread-open .chat-composer{
grid-row:3!important;
display:grid!important;
grid-template-columns:46px minmax(0,1fr) 46px!important;
align-items:end!important;
column-gap:9px!important;
row-gap:8px!important;
position:relative!important;
inset:auto!important;
z-index:50!important;
width:100%!important;
min-width:0!important;
min-height:66px!important;
margin:0!important;
padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px))!important;
background:#14191f!important;
border-top:1px solid rgba(255,255,255,.10)!important;
box-shadow:0 -10px 28px rgba(0,0,0,.16)!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
transform:none!important;
}
body.chat-thread-open.ww370-chat-keyboard-open .chat-composer{
padding-bottom:9px!important;
}
body.chat-thread-open .chat-composer .pending-photos{
grid-column:1 / -1!important;
grid-row:1!important;
min-width:0!important;
}
body.chat-thread-open .chat-composer .cattach{
grid-column:1!important;
}
body.chat-thread-open .chat-composer textarea.chat-editbox,
body.chat-thread-open #chatInput.chat-editbox{
grid-column:2!important;
display:block!important;
width:100%!important;
min-width:0!important;
height:46px!important;
min-height:46px!important;
max-height:min(124px,32vh)!important;
margin:0!important;
padding:11px 15px!important;
border:1.5px solid rgba(151,166,177,.28)!important;
border-radius:23px!important;
background:#1c2228!important;
color:#f5f7f8!important;
caret-color:#8ecb64!important;
font-family:inherit!important;
font-size:16px!important;
font-weight:500!important;
line-height:1.42!important;
letter-spacing:0!important;
resize:none!important;
overflow-y:hidden!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
-webkit-user-select:text!important;
user-select:text!important;
-webkit-touch-callout:default!important;
touch-action:manipulation!important;
}
body.chat-thread-open .chat-composer textarea.chat-editbox:focus{
border-color:#5f913f!important;
box-shadow:0 0 0 4px rgba(92,143,61,.18),inset 0 1px 0 rgba(255,255,255,.03)!important;
outline:none!important;
}
body.chat-thread-open .chat-composer textarea.chat-editbox::placeholder{
color:rgba(230,235,238,.56)!important;
opacity:1!important;
}
body.chat-thread-open .chat-composer .csend{
grid-column:3!important;
}
body.chat-thread-open .chat-composer .cattach,
body.chat-thread-open .chat-composer .csend{
align-self:end!important;
flex:none!important;
width:46px!important;
min-width:46px!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
border-radius:17px!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
}
body.chat-thread-open .chat-composer .cattach{
background:#1c2228!important;
border:1px solid rgba(151,166,177,.22)!important;
color:#4f9d67!important;
}
body.chat-thread-open .chat-composer .csend{
background:linear-gradient(145deg,#72c53d,#4ca82f)!important;
border:1px solid rgba(255,255,255,.12)!important;
color:#fff!important;
box-shadow:0 7px 18px rgba(63,152,43,.25)!important;
}
}
/* ============================================================
EMPTY CONVERSATION STATE — polished "no chat selected" panel
============================================================ */
.empty-convo{
height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:40px 32px;max-width:440px;margin:0 auto;
}
.empty-convo .ec-badge{
width:80px;height:80px;border-radius:24px;display:grid;place-items:center;margin-bottom:22px;
background:linear-gradient(150deg,#3f6b45,#274d30);
box-shadow:0 16px 34px -14px rgba(20,50,25,.7), inset 0 1px 0 rgba(255,255,255,.14);
}
.empty-convo .ec-badge svg{width:34px;height:34px;stroke:#e9c46a}
.empty-convo h2{
margin:0;font-family:var(--font-display,"Fraunces",Georgia,serif);font-weight:600;
font-size:26px;letter-spacing:-.01em;color:#f4f7ee;
}
.empty-convo>p{
margin:9px 0 22px;font-size:14.5px;line-height:1.5;color:#9aa9a0;font-weight:500;max-width:340px;
}
.empty-convo .ec-cta{
display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border:0;border-radius:13px;cursor:pointer;
background:linear-gradient(180deg,#5c7a4e,#33481f);color:#fff;font-family:var(--font-body);
font-size:15px;font-weight:800;box-shadow:0 12px 26px -10px rgba(40,60,30,.6),inset 0 1px 0 rgba(255,255,255,.2);
transition:transform .12s ease;
}
.empty-convo .ec-cta svg{width:17px;height:17px;stroke:#fff}
@media(hover:hover){.empty-convo .ec-cta:hover{transform:translateY(-1px)}}
.empty-convo .ec-cta:active{transform:translateY(0) scale(.99)}
.empty-convo .ec-tips{
margin-top:34px;width:100%;display:flex;flex-direction:column;gap:12px;
border-top:1px solid rgba(255,255,255,.08);padding-top:24px;
}
.empty-convo .ec-tip{
display:flex;align-items:center;gap:13px;text-align:left;
font-size:13.5px;font-weight:600;color:#b6c2b6;
}
.empty-convo .ec-tip svg{
flex-shrink:0;width:20px;height:20px;stroke:#7c9a72;
background:rgba(124,154,114,.14);padding:8px;box-sizing:content-box;border-radius:10px;
}
/* Clean structured notification detail (Property / Agent / Due / Status rows) */
.notif-detail{display:flex;flex-direction:column;gap:7px;margin:2px 0 4px}
.notif-detail .nd-row{display:flex;gap:8px;align-items:baseline;line-height:1.35}
.notif-detail .nd-k{flex:0 0 auto;min-width:64px;font-size:11.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#8a7a52}
.notif-detail .nd-v{flex:1 1 auto;font-size:15px;font-weight:600;color:#26302a}
.notif-detail .nd-line{font-size:14.5px;color:#3a463c;line-height:1.4}
.notif-item.important .notif-detail .nd-v{color:#1f2a22}
/* Client signed-agreement panel */
.cd-agreement{border:1.5px solid rgba(58,93,59,.2);border-radius:14px;padding:14px;margin-bottom:14px;background:linear-gradient(160deg,#f3f6ec,#eef2e4)}
.cd-agreement.is-signed{border-color:rgba(58,120,70,.4);background:linear-gradient(160deg,#eaf5ea,#e0efe1)}
.cd-agreement .cda-top{display:flex;gap:12px;align-items:flex-start}
.cd-agreement .cda-ic{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(58,93,59,.12);color:#3a5d3b}
.cd-agreement.is-signed .cda-ic{background:rgba(58,140,74,.18);color:#2f7a3a}
.cd-agreement .cda-ic svg{width:19px;height:19px}
.cd-agreement .cda-copy strong{display:block;font-size:15px;color:#1e2617;font-weight:800}
.cd-agreement .cda-copy em{display:block;font-style:normal;font-size:12.5px;color:#6f7c60;margin-top:2px;line-height:1.4}
.cd-agreement .cda-files{margin:12px 0 4px;display:flex;flex-direction:column;gap:6px}
.cd-agreement .cda-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cd-agreement .cda-actions .btn{flex:1;min-width:150px}
/* Employment agreement — read-full-terms collapsible in the sign modal */
.agreement-read{border:1px solid rgba(58,93,59,.2);border-radius:12px;margin:4px 0 12px;background:#f6f8f0;overflow:hidden}
.agreement-read summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:800;font-size:13.5px;color:#2f5a34;display:flex;align-items:center;gap:8px}
.agreement-read summary::-webkit-details-marker{display:none}
.agreement-read summary svg{width:16px;height:16px;stroke:#2f5a34}
.agreement-read[open] summary{border-bottom:1px solid rgba(58,93,59,.15)}
.agreement-terms{max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;font-size:12.5px;line-height:1.55;color:#3a463c}
/* ============================================================
V377 — MANUAL EMPLOYMENT AGREEMENT DOWNLOAD / RETURN WORKFLOW
============================================================ */
.manual-agreement-card{align-items:flex-start;flex-wrap:wrap;padding:15px 16px!important}
.manual-agreement-card>.doc-ic{margin-top:2px}
.manual-agreement-card>.dc-body{min-width:180px}
.doc-card-actions{flex:1 0 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid rgba(151,118,66,.16)}
.doc-card-actions .btn{min-width:0;height:39px;padding:0 10px;font-size:11.8px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:11px}
.doc-card-actions .btn svg{width:15px;height:15px;flex:0 0 auto}
.manual-contract-choice{display:grid;grid-template-columns:42px 1fr;gap:10px 12px;margin:12px 0 14px;padding:13px;border:1px solid rgba(56,92,61,.18);border-radius:14px;background:linear-gradient(145deg,#f2f7ef,#e8f0e6)}
.mcc-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#315d36;background:rgba(49,93,54,.11)}
.mcc-icon svg{width:20px;height:20px}
.mcc-copy{min-width:0}
.mcc-copy strong{display:block;color:#213126;font-size:14px;font-weight:850;line-height:1.25}
.mcc-copy span{display:block;margin-top:3px;color:#647067;font-size:12.2px;line-height:1.45}
.mcc-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mcc-actions .btn{height:40px;min-width:0;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}
.mcc-actions .btn svg{width:15px;height:15px}
.manual-return-head{display:flex;gap:12px;align-items:center;padding:13px;border:1px solid rgba(49,93,54,.15);border-radius:14px;background:#f4f7f1;margin-bottom:13px}
.mrh-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#dfeade;color:#315d36;flex:0 0 auto}
.mrh-icon svg{width:21px;height:21px}
.manual-return-head strong{display:block;color:#202c23;font-size:15px;font-weight:850}
.manual-return-head span{display:block;margin-top:3px;color:#69746b;font-size:12px;line-height:1.35}
.manual-steps{display:grid;gap:7px;margin:4px 0 13px}
.manual-steps>div{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:#fafbf8;border:1px solid #e7ebe5}
.manual-steps b{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#345f39;color:white;font-size:11px;flex:0 0 auto}
.manual-steps span{color:#3c4740;font-size:12.5px;font-weight:650}
.manual-return-drop{min-height:108px;border:1.5px dashed rgba(49,93,54,.35)!important;background:linear-gradient(145deg,#f9fbf7,#eef4eb)!important}
.manual-return-drop svg{width:27px!important;height:27px!important;color:#315d36}
.manual-return-drop span{font-weight:800!important;color:#2b4430!important}
.manual-access-note{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 11px;border-radius:11px;background:#eef4ed;color:#465149;font-size:12px;line-height:1.4}
.manual-access-note svg{width:18px;height:18px;color:#37633d;flex:0 0 auto;margin-top:1px}
.manual-returned-banner{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;margin:4px 0 12px;border:1px solid rgba(43,112,57,.2);border-radius:13px;background:linear-gradient(145deg,#edf7ee,#e5f1e5);color:#2d6835}
.manual-returned-banner>svg{width:21px;height:21px;flex:0 0 auto;margin-top:1px}
.manual-returned-banner strong{display:block;color:#24562b;font-size:14px;font-weight:850}
.manual-returned-banner span{display:block;margin-top:3px;color:#5f6c62;font-size:12.2px;line-height:1.4}
.returned-file-summary{display:flex;align-items:center;gap:11px;margin-top:11px;padding:11px;border:1px solid #e5e9e4;border-radius:12px;background:#fafbf9}
.rfs-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#e5eee4;color:#315d36;flex:0 0 auto}
.rfs-icon svg{width:18px;height:18px}
.returned-file-summary strong{display:block;color:#273129;font-size:13px;overflow-wrap:anywhere}
.returned-file-summary small{display:block;margin-top:2px;color:#7b857c;font-size:11px}
.manual-replace{margin-top:10px;padding:0;border:0;background:none;color:#3b6640;font:inherit;font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.manual-replace svg{width:15px;height:15px}
@media(max-width:620px){
.doc-card-actions{grid-template-columns:1fr 1fr}
.doc-card-actions .btn:first-child{grid-column:1/-1}
}
@media(max-width:390px){
.manual-agreement-card{padding:13px!important}
.doc-card-actions{gap:7px}
.doc-card-actions .btn{font-size:11px;padding:0 7px}
.mcc-actions{grid-template-columns:1fr}
}
/* ---- inline style 85 ---- */
/* ============================================================
v379 — Timesheet entry redesign only
Compact, readable and overlap-proof on mobile. Other modals/pages untouched.
============================================================ */
body[data-modal-type="record"] #modalHost{overflow:hidden!important}
body[data-modal-type="record"] .modal-overlay{
align-items:center!important;
justify-content:center!important;
padding:18px!important;
background:rgba(10,24,15,.86)!important;
touch-action:none!important;
}
body[data-modal-type="record"] .record-entry-modal{
width:min(100%,680px)!important;
max-width:680px!important;
height:min(92dvh,820px)!important;
max-height:min(92dvh,820px)!important;
border-radius:26px!important;
background:#f8f5ec!important;
border:1px solid rgba(61,82,58,.14)!important;
box-shadow:0 26px 70px rgba(5,20,10,.36)!important;
overflow:hidden!important;
}
body[data-modal-type="record"] .record-entry-modal .modal-head{
min-height:66px!important;
padding:15px 20px 12px!important;
background:linear-gradient(180deg,#fffdf8,#f5f0e5)!important;
border-bottom:1px solid rgba(53,75,51,.10)!important;
flex:0 0 auto!important;
}
body[data-modal-type="record"] .record-entry-modal .modal-head h2{
font-size:24px!important;
line-height:1.1!important;
font-weight:650!important;
color:#18271c!important;
}
body[data-modal-type="record"] .record-entry-modal .modal-x{
width:42px!important;height:42px!important;border-radius:14px!important;
font-size:27px!important;background:#eeeadf!important;color:#627064!important;
}
body[data-modal-type="record"] .record-entry-modal .modal-body{
padding:14px 18px 10px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
scrollbar-gutter:stable!important;
}
body[data-modal-type="record"] .record-entry-modal .modal-foot{
min-height:70px!important;
margin:0!important;
padding:10px 18px calc(12px + var(--safe-b))!important;
gap:10px!important;
background:#f1ecdf!important;
border-top:1px solid rgba(53,75,51,.11)!important;
box-shadow:0 -10px 24px rgba(30,45,31,.07)!important;
}
body[data-modal-type="record"] .record-entry-modal .modal-foot .btn{
height:48px!important;border-radius:15px!important;font-size:14px!important;font-weight:900!important;
}
body[data-modal-type="record"] .te-summary-card{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:14px!important;
min-height:94px!important;
margin:0 0 10px!important;
padding:16px 18px!important;
border-radius:20px!important;
background:linear-gradient(135deg,#2f7545 0%,#164d2a 72%,#0f3d22 100%)!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:0 11px 25px rgba(23,72,39,.22),inset 0 1px 0 rgba(255,255,255,.14)!important;
color:#fff!important;
overflow:hidden!important;
}
body[data-modal-type="record"] .te-summary-main{min-width:0!important;display:flex!important;align-items:center!important;gap:9px 10px!important;flex-wrap:wrap!important}
body[data-modal-type="record"] .te-summary-eyebrow{
flex:1 0 100%!important;font-size:11px!important;line-height:1!important;font-weight:900!important;
letter-spacing:.09em!important;text-transform:uppercase!important;color:rgba(238,248,237,.76)!important;
}
body[data-modal-type="record"] .te-client{
min-width:0!important;max-width:100%!important;font-family:var(--font-display)!important;
font-size:20px!important;line-height:1.08!important;font-weight:650!important;color:#fff!important;
overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
body[data-modal-type="record"] .te-status{
flex:0 0 auto!important;margin:0!important;padding:5px 10px!important;border-radius:999px!important;
font-size:11px!important;line-height:1!important;font-weight:900!important;
}
body[data-modal-type="record"] .te-hours{
position:static!important;display:grid!important;justify-items:end!important;align-content:center!important;
min-width:82px!important;text-align:right!important;color:#fff!important;
}
body[data-modal-type="record"] .te-hours strong{font-size:35px!important;line-height:.95!important;font-weight:900!important;letter-spacing:-.035em!important}
body[data-modal-type="record"] .te-hours span{margin-top:6px!important;font-size:10px!important;line-height:1!important;font-weight:900!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:rgba(240,248,238,.70)!important}
body[data-modal-type="record"] .te-variance{
display:flex!important;align-items:center!important;min-height:40px!important;
margin:0 0 11px!important;padding:9px 12px!important;border-radius:13px!important;
font-size:12.3px!important;line-height:1.3!important;font-weight:800!important;
overflow-wrap:anywhere!important;
}
body[data-modal-type="record"] .te-form-grid{display:grid!important;gap:10px!important;min-width:0!important}
body[data-modal-type="record"] .record-entry-modal .field{
min-width:0!important;margin:0!important;gap:6px!important;
}
body[data-modal-type="record"] .record-entry-modal .field>label{
margin:0!important;font-size:12.5px!important;line-height:1.1!important;font-weight:900!important;color:#26372a!important;
}
body[data-modal-type="record"] .te-two-col{
display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;min-width:0!important;
}
body[data-modal-type="record"] .record-entry-modal .input,
body[data-modal-type="record"] .record-entry-modal select.input{
box-sizing:border-box!important;width:100%!important;min-width:0!important;height:48px!important;
margin:0!important;padding:0 13px!important;border-radius:14px!important;
border:1px solid rgba(51,73,50,.17)!important;background:#fffdf7!important;
color:#1f2c22!important;font-size:15.5px!important;font-weight:750!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 7px rgba(32,47,33,.035)!important;
}
body[data-modal-type="record"] .record-entry-modal select.input{padding-right:46px!important}
body[data-modal-type="record"] .record-entry-modal input[type="date"]{-webkit-appearance:none!important;appearance:none!important}
body[data-modal-type="record"] .record-entry-modal textarea.input{
height:56px!important;min-height:56px!important;max-height:76px!important;
padding:10px 12px!important;line-height:1.35!important;resize:none!important;
}
body[data-modal-type="record"] .ts-client-picker-compact{display:grid!important;gap:8px!important;min-width:0!important}
body[data-modal-type="record"] .ts-client-compact-head{
display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:stretch!important;min-width:0!important;
}
body[data-modal-type="record"] .ts-client-picker-compact .ts-client-selected{
min-width:0!important;min-height:58px!important;padding:10px 12px!important;border-radius:14px!important;
background:linear-gradient(135deg,#eef4e8,#f7f1e5)!important;border:1px solid rgba(54,82,52,.14)!important;
box-shadow:none!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
}
body[data-modal-type="record"] .ts-client-picker-compact .ts-client-selected strong{
font-size:14.5px!important;line-height:1.15!important;font-weight:900!important;color:#213425!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body[data-modal-type="record"] .ts-client-picker-compact .ts-client-selected span{
margin-top:3px!important;font-size:11.5px!important;line-height:1.15!important;color:#6a756b!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body[data-modal-type="record"] .ts-client-change{
width:76px!important;min-height:58px!important;border-radius:14px!important;border:1px solid rgba(47,91,51,.18)!important;
background:#e4eee0!important;color:#2d5932!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
font-size:10.5px!important;font-weight:900!important;
}
body[data-modal-type="record"] .ts-client-change svg{width:17px!important;height:17px!important;stroke-width:2.3!important}
body[data-modal-type="record"] .ts-client-change-panel{
display:none!important;gap:7px!important;padding:9px!important;border-radius:15px!important;
background:#eee9dc!important;border:1px solid rgba(52,73,50,.12)!important;
}
body[data-modal-type="record"] .ts-client-change-panel.open{display:grid!important}
body[data-modal-type="record"] .ts-client-change-panel .ts-client-search{height:43px!important;border-radius:12px!important;background:#fffdf7!important}
body[data-modal-type="record"] .ts-client-change-panel .ts-client-results{max-height:150px!important}
body[data-modal-type="record"] .ts-client-change-panel .ts-add-client-toggle{height:38px!important;font-size:12px!important}
body[data-modal-type="record"] .te-save-hint{
margin:9px 2px 0!important;padding:0!important;font-size:11.2px!important;line-height:1.35!important;color:#6c766d!important;
}
body[data-modal-type="record"] .loc-panel,
body[data-modal-type="record"] .proof-panel{margin:0 0 10px!important}
@media(max-width:720px){
body[data-modal-type="record"] .modal-overlay{align-items:stretch!important;padding:0!important}
body[data-modal-type="record"] .record-entry-modal{
width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;
border-radius:0!important;border:0!important;
}
body[data-modal-type="record"] .record-entry-modal .modal-head{
min-height:62px!important;padding:12px 16px 9px!important;
}
body[data-modal-type="record"] .record-entry-modal .modal-head h2{font-size:22px!important}
body[data-modal-type="record"] .record-entry-modal .modal-x{width:40px!important;height:40px!important}
body[data-modal-type="record"] .record-entry-modal .modal-body{padding:11px 14px 8px!important}
body[data-modal-type="record"] .record-entry-modal .modal-foot{min-height:66px!important;padding:9px 14px calc(10px + var(--safe-b))!important}
body[data-modal-type="record"] .record-entry-modal .modal-foot .btn{height:46px!important;font-size:13.5px!important}
body[data-modal-type="record"] .te-summary-card{min-height:88px!important;padding:14px 15px!important;border-radius:18px!important;margin-bottom:9px!important}
body[data-modal-type="record"] .te-client{font-size:18px!important}
body[data-modal-type="record"] .te-hours strong{font-size:32px!important}
body[data-modal-type="record"] .te-variance{min-height:38px!important;margin-bottom:9px!important;padding:8px 10px!important;font-size:11.7px!important}
body[data-modal-type="record"] .te-form-grid{gap:9px!important}
body[data-modal-type="record"] .record-entry-modal .input,
body[data-modal-type="record"] .record-entry-modal select.input{height:46px!important;font-size:15px!important}
body[data-modal-type="record"] .record-entry-modal textarea.input{height:52px!important;min-height:52px!important}
body[data-modal-type="record"] .ts-client-picker-compact .ts-client-selected,
body[data-modal-type="record"] .ts-client-change{min-height:56px!important}
body[data-modal-type="record"] .te-save-hint{font-size:10.7px!important;margin-top:7px!important}
}
@media(max-width:390px){
body[data-modal-type="record"] .record-entry-modal .modal-body{padding-left:12px!important;padding-right:12px!important}
body[data-modal-type="record"] .te-two-col{gap:8px!important}
body[data-modal-type="record"] .te-summary-card{grid-template-columns:minmax(0,1fr) 74px!important;gap:9px!important}
body[data-modal-type="record"] .te-client{font-size:16.5px!important}
body[data-modal-type="record"] .te-hours strong{font-size:29px!important}
body[data-modal-type="record"] .ts-client-change{width:68px!important}
body[data-modal-type="record"] .record-entry-modal .input,
body[data-modal-type="record"] .record-entry-modal select.input{font-size:14px!important;padding-left:10px!important;padding-right:10px!important}
body[data-modal-type="record"] .record-entry-modal select.input{padding-right:42px!important}
}
@media(max-width:360px){
body[data-modal-type="record"] .te-two-col{grid-template-columns:1fr!important}
body[data-modal-type="record"] .record-entry-modal .modal-body{overflow-y:auto!important}
}
/* ---- inline style 86 ---- */
/* v380 — Timesheet entry action bar only. Compact, balanced and clear. */
body[data-modal-type="record"] .record-entry-modal .modal-foot{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
min-height:62px!important;
padding:8px 18px calc(9px + var(--safe-b))!important;
}
body[data-modal-type="record"] .te-footer-actions{
width:100%!important;
display:grid!important;
grid-template-columns:112px minmax(164px,190px)!important;
justify-content:end!important;
align-items:center!important;
gap:10px!important;
}
body[data-modal-type="record"] .te-footer-actions .btn{
width:100%!important;
height:44px!important;
min-height:44px!important;
margin:0!important;
padding:0 15px!important;
border-radius:14px!important;
font-size:13.5px!important;
font-weight:900!important;
line-height:1!important;
white-space:nowrap!important;
box-shadow:none!important;
}
body[data-modal-type="record"] .te-cancel-action{
background:#fffdf7!important;
color:#315039!important;
border:1px solid rgba(48,76,53,.18)!important;
}
body[data-modal-type="record"] .te-save-action{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
color:#fff!important;
background:linear-gradient(135deg,#356746,#1e4c31)!important;
border:1px solid rgba(255,255,255,.10)!important;
box-shadow:0 6px 14px rgba(25,65,40,.18)!important;
}
body[data-modal-type="record"] .te-save-action svg{
width:16px!important;
height:16px!important;
flex:0 0 auto!important;
stroke:currentColor!important;
stroke-width:2.4!important;
}
body[data-modal-type="record"] .te-save-action:active,
body[data-modal-type="record"] .te-cancel-action:active{transform:scale(.985)!important}
@media(max-width:720px){
body[data-modal-type="record"] .record-entry-modal .modal-foot{
min-height:60px!important;
padding:7px 14px calc(8px + var(--safe-b))!important;
}
body[data-modal-type="record"] .te-footer-actions{
grid-template-columns:104px minmax(154px,178px)!important;
gap:9px!important;
}
body[data-modal-type="record"] .te-footer-actions .btn{
height:42px!important;min-height:42px!important;border-radius:13px!important;font-size:13px!important;
}
}
@media(max-width:360px){
body[data-modal-type="record"] .te-footer-actions{grid-template-columns:92px minmax(148px,1fr)!important}
body[data-modal-type="record"] .te-footer-actions .btn{padding-left:11px!important;padding-right:11px!important}
}
/* ============================================================
MISSED TIMESHEET ENTRY — compact, fits one screen, no bounce
============================================================ */
.mr2{display:flex;flex-direction:column;gap:11px}
.mr2-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:12px 14px;border-radius:14px;
background:linear-gradient(150deg,#2f5a34,#1c3a24);color:#fff}
.mr2-banner-tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.mr2-banner-tx strong{font-family:var(--font-display,Georgia,serif);font-size:16px;font-weight:600;line-height:1.2;color:#fbfdf6}
.mr2-banner-tx span{font-size:12px;color:rgba(220,236,222,.82);font-weight:600}
.mr2-pill{flex:0 0 auto;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:800;
background:#e9c46a;color:#3a2c08;letter-spacing:.01em}
.mr2-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.mr2-field label{font-size:12px;font-weight:800;color:#3a4a3c;letter-spacing:.01em;line-height:1.2}
.mr2-field label em{font-style:normal;font-weight:600;color:#8a9483}
.mr2 .input{height:46px;font-size:15px;line-height:1.2;padding:0 13px;border-radius:12px}
.mr2 select.input{-webkit-appearance:none;appearance:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:44px;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
.mr2 textarea.mr2-notes{height:auto;min-height:52px;padding:10px 13px;line-height:1.4;resize:none}
.mr2-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* the client picker inside keeps tidy */
.mr2 .te-client-picker,.mr2 .client-pick-wrap{margin:0}
/* NO BOUNCE: this modal type is static — no entrance re-animation, no transform shift */
body[data-modal-type="missed-record"] .modal{animation:none!important;transform:translateZ(0)!important}
body[data-modal-type="missed-record"] .modal-body{overscroll-behavior:contain}
/* responsive: bottom-sheet on phones, sized to fit without scrolling where possible */
@media(max-width:600px){
.mr2{gap:9px}
.mr2 .input{height:44px;font-size:14.5px}
.mr2-banner{padding:10px 13px}
.mr2-banner-tx strong{font-size:15px}
}
@media(max-width:600px) and (max-height:760px){
.mr2{gap:7px}
.mr2 .input{height:42px}
.mr2 textarea.mr2-notes{min-height:44px}
.mr2-banner{padding:9px 12px}
}
/* Long-press reaction on updates */
.upd-longpress{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer;border-radius:8px;transition:background .15s}
.upd-longpress:active{background:rgba(233,196,106,.12)}
.upd-react-hint{font-size:11.5px;color:#a2ab98;font-style:italic}
.upd-quickbar{position:relative;display:inline-flex;align-items:center;gap:2px;margin-top:8px;padding:4px 5px;border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05);animation:rxPop .14s ease both}
/* Admin-entry green pill + no-bounce (reuses .mr2 layout) */
.mr2-pill-green{background:#bfe3c0;color:#1f4a26}
body[data-modal-type="admin-entry"] .modal{animation:none!important;transform:translateZ(0)!important}
body[data-modal-type="admin-entry"] .modal-body{overscroll-behavior:contain}
/* ---- inline style 87 ---- */
/* Green is now reserved for presence. The online marker is intentionally
larger and ringed so it reads clearly without covering the initials. */
body .chat-list.cv-list .cv-online-dot{
position:absolute!important;
right:-4px!important;
bottom:-3px!important;
top:auto!important;
width:13px!important;
height:13px!important;
border-radius:999px!important;
background:#69cf4a!important;
border:3px solid #171c20!important;
box-shadow:0 0 0 1px rgba(105,207,74,.36),0 2px 7px rgba(0,0,0,.45)!important;
z-index:3!important;
}
body .chat-list.cv-list .cv-online-text{
color:#78d45a!important;
font-weight:800!important;
}
/* Red numeric badge = unread messages. This replaces the previous tiny green
unread dot, which could be mistaken for online status. */
body .chat-list.cv-list .cv-unread-dot{display:none!important}
body .chat-list.cv-list .cv-unread-count{
flex:0 0 auto!important;
min-width:20px!important;
height:20px!important;
padding:0 6px!important;
margin-left:auto!important;
border-radius:999px!important;
display:inline-grid!important;
place-items:center!important;
background:#df454b!important;
color:#fff!important;
border:2px solid #171c20!important;
box-shadow:0 2px 8px rgba(223,69,75,.28)!important;
font-size:10px!important;
line-height:1!important;
font-weight:900!important;
letter-spacing:-.02em!important;
}
body .chat-list.cv-list .cv-row.cv-unread{
border-color:rgba(223,69,75,.28)!important;
box-shadow:inset 3px 0 0 #df454b,0 3px 9px -8px rgba(0,0,0,.95)!important;
}
body .chat-list.cv-list .cv-row.cv-unread .cv-last{
color:#f3f5f5!important;
font-weight:720!important;
}
body .chat-list.cv-list .cv-top{overflow:visible!important}
@media(max-width:430px){
body .chat-list.cv-list .cv-online-dot{width:14px!important;height:14px!important;right:-4px!important;bottom:-4px!important}
body .chat-list.cv-list .cv-unread-count{min-width:21px!important;height:21px!important;font-size:10.5px!important;padding:0 6px!important}
}
/* ---- inline style 88 ---- */
body .chat-list.cv-list .cv-top{align-items:center!important;gap:8px!important;}
body .chat-list.cv-list .cv-meta-right{margin-left:auto!important;display:inline-flex!important;align-items:center!important;gap:7px!important;flex:0 0 auto!important;min-width:max-content!important;}
body .chat-list.cv-list .cv-row.cv-unread{background:linear-gradient(180deg,#1a2025 0%,#171d21 100%)!important;border-color:rgba(255,255,255,.13)!important;box-shadow:0 8px 22px rgba(0,0,0,.18)!important;}
body .chat-list.cv-list .cv-row.cv-unread .cv-name{font-weight:950!important;color:#fff!important;}
body .chat-list.cv-list .cv-row.cv-unread .cv-sub{font-weight:620!important;color:#c8ced2!important;}
body .chat-list.cv-list .cv-row.cv-unread .cv-last{font-weight:850!important;color:#f3f5f6!important;}
body .chat-list.cv-list .cv-row.cv-unread .cv-time{font-weight:850!important;color:#eef1f3!important;}
body .chat-list.cv-list .cv-row.cv-read{background:linear-gradient(180deg,#171c20 0%,#151a1e 100%)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:none!important;}
body .chat-list.cv-list .cv-row.cv-read .cv-name{font-weight:620!important;color:#c3c9cd!important;}
body .chat-list.cv-list .cv-row.cv-read .cv-sub{font-weight:560!important;color:#90999f!important;}
body .chat-list.cv-list .cv-row.cv-read .cv-last{font-weight:520!important;color:#929ca1!important;}
body .chat-list.cv-list .cv-row.cv-read .cv-time{font-weight:650!important;color:#899398!important;}
body .chat-list.cv-list .cv-unread-count{display:inline-grid!important;place-items:center!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important;background:#de4e58!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 2px 7px rgba(222,78,88,.22)!important;font-size:9.5px!important;line-height:1!important;font-weight:900!important;}
body .chat-list.cv-list .cv-unread-dot{display:none!important;}
body .chat-list.cv-list .cv-online-dot{background:#69cf4a!important;}
@media(max-width:430px){body .chat-list.cv-list .cv-meta-right{gap:6px!important;}body .chat-list.cv-list .cv-unread-count{min-width:18px!important;height:18px!important;font-size:9px!important;}}
/* ---- inline style 89 ---- */
@media (min-width:1024px){
/* Keep the desktop roster responsive even with large teams and busy weeks. */
body .rwg-wrap{
scroll-behavior:auto!important;
overscroll-behavior:contain!important;
contain:layout paint style!important;
box-shadow:0 2px 10px rgba(20,40,22,.06)!important;
-webkit-overflow-scrolling:auto!important;
}
body .rwg-grid{
grid-template-columns:178px repeat(7,minmax(224px,1fr))!important;
min-width:1746px!important;
}
body .rwg-cell{
contain:paint style!important;
padding:5px!important;
gap:4px!important;
}
body .rwg-name{contain:paint style!important;}
body .rwg-cell .rgc,
body .rwg-cell .rgc:hover{
transform:none!important;
transition:none!important;
animation:none!important;
filter:none!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
box-shadow:0 2px 6px rgba(20,35,24,.13)!important;
}
body .rwg-cell .rgc-main{padding:5px 8px!important;}
body .rwg-cell .rgc-row1{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:5px!important;
width:100%!important;
max-width:100%!important;
overflow:hidden!important;
}
body .rwg-cell .rgc-time{
min-width:0!important;
width:100%!important;
max-width:100%!important;
height:22px!important;
padding:0 7px!important;
font-size:11px!important;
letter-spacing:-.035em!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:clip!important;
justify-content:center!important;
}
body .rwg-cell .rgc-dur{
min-width:max-content!important;
width:auto!important;
height:22px!important;
padding:0 6px!important;
font-size:9.5px!important;
letter-spacing:-.02em!important;
white-space:nowrap!important;
}
body .rwg-cell .rgc-row2{margin-top:3px!important;min-width:0!important;}
body .rwg-cell .rgc-client{font-size:13.5px!important;line-height:1.15!important;}
body .rwg-dayadd,body .rwg-cell-add,body .rgc-tools{transition:none!important;}
body .rwg-cell .rgc-tool{transition:none!important;filter:none!important;}
}
@media (min-width:1024px) and (max-width:1399px){
body .rwg-grid{grid-template-columns:168px repeat(7,minmax(214px,1fr))!important;min-width:1666px!important;}
body .rwg-cell .rgc-time{font-size:10.6px!important;padding:0 6px!important;}
body .rwg-cell .rgc-dur{font-size:9.2px!important;padding:0 5px!important;}
}
/* ---- inline style 90 ---- */
@media (min-width:1024px){
/* Desktop Messages only. Reset the accumulated mobile/card overrides so the
two-pane layout has one predictable sizing system and nothing overlaps. */
body:has(.chat-shell) .content,
body:has(.chat-shell) main.content{
min-height:0!important;
overflow:hidden!important;
padding:14px 18px 18px!important;
background:#070a0c!important;
}
body:has(.chat-shell) .content > .page,
body:has(.chat-shell) main.content > .page{
height:100%!important;
min-height:0!important;
overflow:hidden!important;
}
body:has(.chat-shell) .section-head{display:none!important;}
body .chat-shell{
display:grid!important;
grid-template-columns:minmax(370px,410px) minmax(0,1fr)!important;
grid-template-rows:minmax(0,1fr)!important;
width:100%!important;
max-width:none!important;
height:calc(100dvh - 146px)!important;
min-height:590px!important;
max-height:calc(100dvh - 146px)!important;
margin:0!important;
padding:0!important;
gap:0!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.09)!important;
border-radius:22px!important;
background:#0c1013!important;
box-shadow:0 18px 45px rgba(0,0,0,.24)!important;
contain:layout paint!important;
}
/* Conversation list */
body .chat-list.cv-list{
display:grid!important;
grid-template-rows:44px 46px minmax(0,1fr)!important;
width:100%!important;
min-width:0!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
padding:12px!important;
margin:0!important;
gap:9px!important;
overflow:hidden!important;
border:0!important;
border-right:1px solid rgba(255,255,255,.08)!important;
border-radius:22px 0 0 22px!important;
background:linear-gradient(180deg,#0d1215 0%,#090d10 100%)!important;
box-sizing:border-box!important;
contain:layout paint!important;
}
body .chat-list.cv-list .cv-head{
position:static!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
width:100%!important;
height:44px!important;
min-height:44px!important;
margin:0!important;
padding:0 2px!important;
gap:12px!important;
overflow:visible!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
}
body .chat-list.cv-list .cv-head::before,
body .chat-list.cv-list .cv-head::after{display:none!important;content:none!important;}
body .chat-list.cv-list .cv-head-label{
font-family:var(--font-body,"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)!important;
font-size:22px!important;
line-height:1!important;
font-weight:900!important;
color:#f4f6f7!important;
letter-spacing:-.02em!important;
}
body .chat-list.cv-list .cv-new{
position:static!important;
flex:0 0 40px!important;
width:40px!important;
min-width:40px!important;
height:40px!important;
min-height:40px!important;
margin:0!important;
padding:0!important;
display:grid!important;
place-items:center!important;
border-radius:12px!important;
border:1px solid rgba(137,213,91,.28)!important;
background:linear-gradient(145deg,#72bd49,#4a982f)!important;
color:#fff!important;
box-shadow:0 8px 18px rgba(68,149,45,.18)!important;
}
body .chat-list.cv-list .cv-search{
position:relative!important;
display:flex!important;
align-items:center!important;
width:100%!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
padding:0 42px 0 40px!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.09)!important;
border-radius:13px!important;
background:#171d21!important;
box-shadow:none!important;
box-sizing:border-box!important;
}
body .chat-list.cv-list .cv-search input{
width:100%!important;
min-width:0!important;
height:44px!important;
padding:0!important;
border:0!important;
outline:0!important;
background:transparent!important;
color:#eef1f3!important;
font-size:14px!important;
font-weight:650!important;
}
body .chat-list.cv-list .cv-search-ic{left:13px!important;}
body .chat-list.cv-list .cv-filter{right:6px!important;width:32px!important;height:32px!important;}
body .chat-list.cv-list .cv-threads{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:100%!important;
min-width:0!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
/* bottom value clears the fixed nav bar + safe area (see cv-threads rule) */
padding:0 2px calc(88px + env(safe-area-inset-bottom, 0px))!important;
gap:8px!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
scrollbar-gutter:stable!important;
contain:layout paint!important;
}
body .chat-list.cv-list .cv-sec,
body .chat-list.cv-list .cv-people-label{
position:static!important;
flex:0 0 auto!important;
width:100%!important;
height:auto!important;
min-height:24px!important;
margin:7px 0 0!important;
padding:4px 4px 2px!important;
display:flex!important;
align-items:center!important;
overflow:visible!important;
color:#a9b1b5!important;
background:transparent!important;
border:0!important;
font-size:11px!important;
line-height:1.2!important;
font-weight:900!important;
letter-spacing:.10em!important;
text-transform:uppercase!important;
box-sizing:border-box!important;
}
body .chat-list.cv-list .cv-row,
body .chat-list.cv-list .cv-row.cv-pinned,
body .chat-list.cv-list .cv-row.cv-person{
position:relative!important;
inset:auto!important;
flex:0 0 auto!important;
display:flex!important;
align-items:center!important;
width:100%!important;
min-width:0!important;
height:auto!important;
min-height:76px!important;
max-height:none!important;
margin:0!important;
padding:11px 12px!important;
gap:11px!important;
overflow:hidden!important;
box-sizing:border-box!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:15px!important;
background:linear-gradient(180deg,#171d21 0%,#14191d 100%)!important;
box-shadow:none!important;
transform:none!important;
}
body .chat-list.cv-list .cv-row:hover{
transform:none!important;
background:linear-gradient(180deg,#1c2328 0%,#171d21 100%)!important;
border-color:rgba(255,255,255,.13)!important;
}
body .chat-list.cv-list .cv-row.active{
background:linear-gradient(180deg,#1d2922 0%,#18211c 100%)!important;
border-color:rgba(105,207,74,.40)!important;
box-shadow:inset 3px 0 0 #69cf4a!important;
}
body .chat-list.cv-list .cv-av{
position:relative!important;
inset:auto!important;
flex:0 0 46px!important;
width:46px!important;
height:46px!important;
display:grid!important;
place-items:center!important;
overflow:visible!important;
}
body .chat-list.cv-list .cv-av .avatar{
position:static!important;
width:46px!important;
height:46px!important;
min-width:46px!important;
min-height:46px!important;
border-radius:14px!important;
font-size:14px!important;
box-shadow:none!important;
}
body .chat-list.cv-list .cv-body{
flex:1 1 auto!important;
min-width:0!important;
width:auto!important;
height:auto!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
gap:3px!important;
overflow:hidden!important;
}
body .chat-list.cv-list .cv-top{
display:flex!important;
align-items:center!important;
width:100%!important;
min-width:0!important;
height:auto!important;
min-height:20px!important;
gap:8px!important;
overflow:hidden!important;
}
body .chat-list.cv-list .cv-name{
flex:1 1 auto!important;
min-width:0!important;
max-width:100%!important;
font-size:15.5px!important;
line-height:1.18!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
body .chat-list.cv-list .cv-meta-right{
margin-left:auto!important;
flex:0 0 auto!important;
min-width:0!important;
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
}
body .chat-list.cv-list .cv-time{
flex:0 0 auto!important;
font-size:10.5px!important;
line-height:1!important;
white-space:nowrap!important;
}
body .chat-list.cv-list .cv-sub,
body .chat-list.cv-list .cv-last{
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
line-height:1.25!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
body .chat-list.cv-list .cv-sub{font-size:11.5px!important;}
body .chat-list.cv-list .cv-last{font-size:12.5px!important;}
body .chat-list.cv-list .cv-pintag{display:none!important;}
body .chat-list.cv-list .cv-readtoggle,
body .chat-list.cv-list .cv-mini-action,
body .chat-list.cv-list .cv-chev{
display:none!important;
visibility:hidden!important;
width:0!important;
height:0!important;
min-width:0!important;
margin:0!important;
padding:0!important;
pointer-events:none!important;
}
body .chat-list.cv-list .cv-online-dot{
right:-3px!important;
bottom:-3px!important;
width:12px!important;
height:12px!important;
border-width:2px!important;
}
/* Open conversation */
body .chat-thread{
position:relative!important;
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-template-rows:auto minmax(0,1fr) auto!important;
width:100%!important;
min-width:0!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border:0!important;
border-radius:0 22px 22px 0!important;
background:#11171b!important;
box-shadow:none!important;
contain:layout paint!important;
}
body .chat-thread.empty-thread{display:grid!important;place-items:center!important;}
body .chat-thread .chat-thread-head,
body .chat-thread .ct-head{
position:static!important;
grid-row:1!important;
display:flex!important;
align-items:center!important;
width:100%!important;
min-width:0!important;
min-height:72px!important;
height:auto!important;
margin:0!important;
padding:12px 18px!important;
gap:12px!important;
overflow:hidden!important;
box-sizing:border-box!important;
border:0!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
border-radius:0!important;
background:#151b1f!important;
color:#f2f4f5!important;
box-shadow:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
body .chat-thread .cth-back{display:none!important;}
body .chat-thread .cth-card{
flex:1 1 auto!important;
min-width:0!important;
display:flex!important;
align-items:center!important;
gap:11px!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
body .chat-thread .chat-thread-head .avatar,
body .chat-thread .cth-card .avatar{
flex:0 0 44px!important;
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
border-radius:14px!important;
box-shadow:none!important;
}
body .chat-thread .cth-info{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;}
body .chat-thread .cth-name{font-size:17px!important;line-height:1.2!important;color:#f4f6f7!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
body .chat-thread .cth-sub{font-size:11.5px!important;line-height:1.25!important;color:#9ea7ac!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
body .chat-thread .cth-act{flex:0 0 40px!important;width:40px!important;height:40px!important;border-radius:12px!important;background:#20272c!important;color:#cfd4d7!important;border:1px solid rgba(255,255,255,.08)!important;}
body .chat-thread .workphoto-banner{grid-row:2!important;position:relative!important;z-index:2!important;}
body .chat-thread .chat-scroll{
position:relative!important;
grid-row:2!important;
flex:none!important;
width:100%!important;
min-width:0!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
padding:20px clamp(22px,3vw,42px)!important;
gap:8px!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
background:linear-gradient(180deg,#0f1519 0%,#0b1013 100%)!important;
box-sizing:border-box!important;
contain:layout paint!important;
}
body .chat-thread .msg{max-width:82%!important;width:auto!important;}
body .chat-thread .msg.mine{max-width:82%!important;}
body .chat-thread .bubble{
width:max-content!important;
max-width:82%!important;
min-width:0!important;
padding:9px 13px 8px!important;
border-radius:17px 17px 17px 6px!important;
background:#1b2328!important;
border:1px solid rgba(255,255,255,.08)!important;
color:#f1f3f4!important;
box-shadow:none!important;
display:flex!important;flex-direction:column!important;
}
body .chat-thread .msg.mine .bubble{
border-radius:17px 17px 6px 17px!important;
background:#25382c!important;
border-color:rgba(111,165,98,.22)!important;
align-items:flex-end!important;
min-width:0!important;
}
body .chat-thread .msg:not(.mine) .bubble{min-width:0!important}
/* standard, readable message text on mobile */
body .chat-thread .b-text{font-size:15px!important;line-height:1.35!important;white-space:pre-wrap!important;word-break:normal!important;overflow-wrap:break-word!important;width:max-content!important;max-width:100%!important;align-self:auto!important}
/* meta row stays on one line, tucked bottom-right, inside the bubble padding */
body .chat-thread .b-meta{
display:block!important;
align-self:stretch!important;width:auto!important;
margin-top:4px!important;text-align:right!important;
line-height:1.15!important;white-space:normal!important;
}
body .chat-thread .b-meta time,
body .chat-thread .b-meta .msg-status{display:inline!important;vertical-align:baseline!important;white-space:nowrap!important}
body .chat-thread .b-meta time{font-size:11px!important;opacity:.6!important;white-space:nowrap!important;line-height:1!important}
body .chat-thread .b-meta .msg-status{font-size:10.5px!important;font-weight:620!important;opacity:.85!important;white-space:nowrap!important;line-height:1!important;margin-left:6px!important}
body .chat-thread .chat-composer{
position:static!important;
inset:auto!important;
grid-row:3!important;
display:grid!important;
grid-template-columns:42px minmax(0,1fr) 42px!important;
align-items:end!important;
width:100%!important;
min-width:0!important;
min-height:68px!important;
height:auto!important;
max-height:none!important;
margin:0!important;
padding:11px 14px!important;
gap:9px!important;
overflow:visible!important;
box-sizing:border-box!important;
border:0!important;
border-top:1px solid rgba(255,255,255,.08)!important;
border-radius:0!important;
background:#141a1e!important;
box-shadow:none!important;
transform:none!important;
}
body .chat-thread .chat-composer .pending-photos{grid-column:1/-1!important;width:100%!important;}
body .chat-thread .chat-composer .cattach,
body .chat-thread .chat-composer .csend{
position:static!important;
align-self:end!important;
flex:none!important;
width:42px!important;
min-width:42px!important;
height:42px!important;
min-height:42px!important;
margin:0!important;
padding:0!important;
border-radius:13px!important;
transform:none!important;
}
body .chat-thread .chat-composer .cattach{grid-column:1!important;background:#20272c!important;border:1px solid rgba(255,255,255,.08)!important;color:#7ebc72!important;}
body .chat-thread .chat-composer .csend{grid-column:3!important;background:linear-gradient(145deg,#72bd49,#4a982f)!important;border:1px solid rgba(139,214,92,.18)!important;color:#fff!important;box-shadow:none!important;}
body .chat-thread .chat-composer textarea.chat-editbox,
body .chat-thread .chat-composer #chatInput.chat-editbox,
body .chat-thread .chat-composer .input{
position:static!important;
grid-column:2!important;
display:block!important;
flex:none!important;
align-self:end!important;
width:100%!important;
min-width:0!important;
height:42px!important;
min-height:42px!important;
max-height:116px!important;
margin:0!important;
padding:10px 14px!important;
overflow-x:hidden!important;
overflow-y:auto!important;
resize:none!important;
box-sizing:border-box!important;
border:1px solid rgba(255,255,255,.10)!important;
border-radius:14px!important;
background:#1c2328!important;
color:#f2f4f5!important;
caret-color:#80ca5d!important;
font-size:15px!important;
line-height:1.4!important;
box-shadow:none!important;
outline:none!important;
transform:none!important;
}
body .chat-thread .chat-composer textarea.chat-editbox:focus,
body .chat-thread .chat-composer #chatInput.chat-editbox:focus{
border-color:rgba(116,196,72,.48)!important;
box-shadow:0 0 0 3px rgba(105,181,65,.10)!important;
}
}
/* ---- inline style 91 ---- */
@media (min-width:1024px){
/* Keep the desktop conversation header at the top, messages in the flexible
centre area, and the composer permanently anchored at the true bottom. */
body .chat-thread{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
overflow:hidden!important;
}
body .chat-thread .chat-thread-head,
body .chat-thread .ct-head{
position:relative!important;
inset:auto!important;
flex:0 0 auto!important;
order:1!important;
}
body .chat-thread .workphoto-banner{
position:relative!important;
inset:auto!important;
flex:0 0 auto!important;
order:2!important;
}
body .chat-thread .chat-scroll{
position:relative!important;
inset:auto!important;
flex:1 1 0!important;
order:3!important;
width:100%!important;
min-height:0!important;
height:0!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
}
body .chat-thread .chat-composer,
body .chat-thread .chat-readonly{
position:relative!important;
inset:auto!important;
flex:0 0 auto!important;
order:4!important;
margin-top:auto!important;
width:100%!important;
z-index:8!important;
}
body .chat-thread.empty-thread{
display:grid!important;
place-items:center!important;
}
}
/* ---- inline style 92 ---- */
/* Shift modal: keep one stable viewport while inputs and the keyboard open. */
body[data-modal-type="shift"] .shift-modal,
body[data-modal-type="shift"] .shift-modal *{
animation:none!important;
scroll-behavior:auto!important;
}
body[data-modal-type="shift"] .shift-modal{
transform:none!important;
backface-visibility:hidden!important;
contain:layout paint!important;
}
body[data-modal-type="shift"] .shift-modal .modal-body{
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:auto!important;
overflow-anchor:none!important;
}
body[data-modal-type="shift"] .shift-modal input,
body[data-modal-type="shift"] .shift-modal textarea,
body[data-modal-type="shift"] .shift-modal select,
body[data-modal-type="shift"] .shift-modal button{
transform:none!important;
-webkit-transform:none!important;
}
/* Employee field becomes one clean launch card instead of an expanding list
that pushes the whole shift form up and down. */
.emp-picker-launch{
width:100%!important;
min-height:62px!important;
display:grid!important;
grid-template-columns:42px minmax(0,1fr) 22px!important;
align-items:center!important;
gap:11px!important;
padding:10px 12px!important;
border:1.5px solid var(--line-strong)!important;
border-radius:14px!important;
background:#fff!important;
color:var(--ink-900)!important;
text-align:left!important;
box-shadow:none!important;
}
.emp-picker-launch.has-selected{
background:linear-gradient(135deg,var(--sage-100),#f5f8ef)!important;
border-color:rgba(47,111,61,.25)!important;
}
.emp-picker-launch-icon{
width:40px;height:40px;border-radius:12px;
display:grid;place-items:center;
color:var(--forest-700);background:var(--sage-100);
}
.emp-picker-launch-icon svg{width:20px;height:20px}
.emp-picker-launch-copy{min-width:0;display:grid;gap:2px}
.emp-picker-launch-copy strong{font-size:14px;line-height:1.15;font-weight:900;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-picker-launch-copy small{font-size:11.5px;line-height:1.25;font-weight:650;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-picker-launch-arrow{font-size:27px;line-height:1;color:var(--forest-600);text-align:right}
/* True full-screen employee selector with its own fixed footer. */
.emp-picker-fullscreen{
position:fixed!important;
inset:0!important;
z-index:9000!important;
width:100vw!important;
height:100dvh!important;
background:rgba(13,31,19,.76)!important;
display:flex!important;
align-items:stretch!important;
justify-content:center!important;
overflow:hidden!important;
overscroll-behavior:none!important;
touch-action:none!important;
}
.emp-picker-fs-shell{
width:100%!important;
height:100%!important;
min-height:0!important;
max-width:760px!important;
display:flex!important;
flex-direction:column!important;
background:var(--paper)!important;
overflow:hidden!important;
touch-action:pan-y!important;
box-shadow:0 0 46px rgba(0,0,0,.28)!important;
}
.emp-picker-fs-head{
flex:0 0 auto!important;
display:flex!important;
align-items:center!important;
gap:13px!important;
padding:calc(16px + env(safe-area-inset-top)) 18px 14px!important;
border-bottom:1px solid var(--line)!important;
background:linear-gradient(180deg,#fffef9,#f6f3ea)!important;
}
.emp-picker-fs-close{
width:42px!important;height:42px!important;flex:0 0 42px!important;
display:grid!important;place-items:center!important;
border-radius:13px!important;background:var(--cream-100)!important;
color:var(--forest-800)!important;border:1px solid var(--line)!important;
}
.emp-picker-fs-close svg{width:20px;height:20px;transform:rotate(180deg)!important}
.emp-picker-fs-head h3{margin:0;font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--forest-900)}
.emp-picker-fs-head p{margin:2px 0 0;font-size:12px;font-weight:800;color:var(--ink-500)}
.emp-picker-fs-search{
flex:0 0 auto!important;
margin:14px 16px 10px!important;
min-height:52px!important;
background:#fff!important;
}
.emp-picker-fs-search input{font-size:16px!important}
.emp-picker-fs-list.employee-picker.simple-list{
flex:1 1 auto!important;
min-height:0!important;
max-height:none!important;
margin:0 16px!important;
padding:5px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:auto!important;
background:#fff!important;
}
.emp-picker-fs-list.employee-picker.simple-list .picker-row{
min-height:58px!important;
padding:10px 12px!important;
}
.emp-picker-fs-list .simple-emp-text strong{font-size:15px!important}
.emp-picker-fs-list .simple-emp-text em{font-size:11px!important}
.emp-picker-fs-foot{
flex:0 0 auto!important;
display:grid!important;
grid-template-columns:minmax(120px,.42fr) minmax(180px,1fr)!important;
gap:11px!important;
padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;
border-top:1px solid var(--line)!important;
background:rgba(255,253,247,.98)!important;
box-shadow:0 -12px 28px rgba(20,35,20,.08)!important;
}
.emp-picker-fs-foot .emp-dd-btn{
height:50px!important;border-radius:14px!important;font-size:15px!important;font-weight:900!important;
}
.emp-picker-fs-foot .emp-dd-btn.clear{background:#fff!important;color:var(--forest-800)!important;border:1.5px solid var(--line-strong)!important}
.emp-picker-fs-foot .emp-dd-btn.done{background:linear-gradient(135deg,var(--forest-600),var(--forest-800))!important;color:#fff!important;border:0!important;box-shadow:0 8px 20px rgba(35,83,44,.22)!important}
body:has(.emp-picker-fullscreen) .shift-modal{overflow:visible!important;transform:none!important;contain:none!important}
@media(max-width:1023px){
/* Follow the iPhone's visible viewport exactly. This stops the modal from
jumping between the layout viewport and keyboard viewport. */
body[data-modal-type="shift"] #modalHost{
position:fixed!important;
top:var(--ww-shift-vv-top,0px)!important;
left:var(--ww-shift-vv-left,0px)!important;
right:auto!important;bottom:auto!important;
width:var(--ww-shift-vv-width,100vw)!important;
height:var(--ww-shift-vv-height,100dvh)!important;
overflow:hidden!important;
}
body[data-modal-type="shift"] #modalHost .modal-overlay{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;max-height:none!important;
padding:0!important;align-items:stretch!important;
}
body[data-modal-type="shift"] .shift-modal{
width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
border-radius:0!important;margin:0!important;
}
body[data-modal-type="shift"] .shift-modal .modal-head{flex:0 0 auto!important;padding:calc(12px + env(safe-area-inset-top)) 16px 10px!important}
body[data-modal-type="shift"] .shift-modal .modal-body{flex:1 1 auto!important;min-height:0!important;padding:8px 13px 10px!important}
body[data-modal-type="shift"] .shift-modal .modal-foot{flex:0 0 auto!important;padding:10px 13px calc(10px + env(safe-area-inset-bottom))!important;margin:0!important}
body[data-modal-type="shift"].modal-open #app{position:relative!important;inset:auto!important;height:100svh!important;overflow:hidden!important}
.emp-picker-fullscreen{width:100%!important;height:100%!important}
.emp-picker-fs-shell{max-width:none!important}
}
@media(min-width:1024px){
.emp-picker-fs-shell{height:min(92vh,900px)!important;margin:auto!important;border-radius:22px!important}
.emp-picker-fullscreen{padding:22px!important}
}
/* ============================================================
EMPLOYEE PICKER — clean inline expanding panel (no jump to top)
============================================================ */
.emp-picker-launch{width:100%;display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:15px;cursor:pointer;
background:#fff;border:1px solid rgba(58,93,59,.16);text-align:left;font:inherit;transition:border-color .15s,background .15s}
.emp-picker-launch.has-selected{border-color:rgba(58,120,70,.4);background:#f2f8f2}
.emp-picker-launch.is-open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:rgba(58,93,59,.3)}
.emp-picker-launch-icon{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#e7f0e4}
.emp-picker-launch-icon svg{width:18px;height:18px;stroke:#3a6b3d}
.emp-picker-launch-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.emp-picker-launch-copy strong{font-size:15px;color:#1e2a20;font-weight:800}
.emp-picker-launch-copy small{font-size:12.5px;color:#7c8a76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-picker-launch-arrow{flex:0 0 auto;font-size:22px;color:#9aa48c;transition:transform .2s ease}
.emp-picker-launch-arrow.flip{transform:rotate(90deg)}
/* the expanding panel sits directly under the launch button, in-flow (no fixed, no jump) */
.emp-inline{border:1px solid rgba(58,93,59,.3);border-top:0;border-radius:0 0 15px 15px;background:#fbfcf8;overflow:hidden;
animation:empExpand .22s ease both}
@keyframes empExpand{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.emp-inline-search{margin:12px;display:flex;align-items:center;gap:9px;padding:0 13px;height:46px;border-radius:12px;background:#fff;border:1.5px solid rgba(58,93,59,.22)}
.emp-inline-search .csb-ic{flex:0 0 auto;display:grid;place-items:center}
.emp-inline-search .csb-ic svg{width:17px;height:17px;stroke:#8a9578}
.emp-inline-search input{flex:1;border:0;outline:0;background:transparent;font-size:15px;height:100%;color:#1e2a20}
.emp-inline-list{max-height:360px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 8px}
.emp-inline-list .simple-employee-row{width:100%;display:flex;align-items:center;gap:12px;padding:13px 12px;border:0;border-bottom:1px solid rgba(58,93,59,.08);background:transparent;text-align:left;font:inherit;cursor:pointer;border-radius:10px}
.emp-inline-list .simple-employee-row:last-child{border-bottom:0}
.emp-inline-list .simple-employee-row.selected{background:#e9f4e9}
.emp-inline-list .pick-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:2px solid #b9c2ac;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff}
.emp-inline-list .simple-employee-row.selected .pick-check{background:#3a7a3d;border-color:#3a7a3d}
.emp-inline-list .simple-emp-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.emp-inline-list .simple-emp-text strong{font-size:14.5px;color:#1e2a20;font-weight:700}
.emp-inline-list .simple-emp-text em{font-style:normal;font-size:12px;font-weight:700}
.emp-inline-foot{display:flex;gap:9px;padding:11px 12px;border-top:1px solid rgba(58,93,59,.12);background:#f3f6ee}
.emp-inline-foot .emp-dd-btn{flex:1;height:46px;border-radius:12px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;border:0}
.emp-inline-foot .clear{background:#fff;border:1px solid rgba(58,93,59,.2);color:#4a5a48}
.emp-inline-foot .done{background:linear-gradient(180deg,#3f6b45,#22331f);color:#fff;box-shadow:0 8px 18px -8px rgba(30,60,30,.5)}
/* Single always-on employee search + list (no launch card) */
.emp-inline-static{border:1px solid rgba(58,93,59,.22);border-radius:15px;background:#fbfcf8;overflow:hidden;animation:none}
.emp-inline-static .emp-inline-search{margin:10px;position:relative}
.emp-count-badge{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:#3a7a3d;color:#fff;font-size:11.5px;font-weight:800;vertical-align:middle}
.emp-inline-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:#eef2e6;color:#4a6b3e;font-weight:800;font-size:12.5px;padding:6px 12px;border-radius:9px;cursor:pointer}
/* Collapsed employee summary box (tap to open the search + list) */
.emp-collapsed{width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;cursor:pointer;
background:#fff;border:1px solid rgba(58,93,59,.2);text-align:left;font:inherit;transition:border-color .15s,background .15s}
.emp-collapsed.has-selected{border-color:rgba(58,120,70,.4);background:#f2f8f2}
.emp-collapsed-ic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#e7f0e4}
.emp-collapsed-ic svg{width:14px;height:14px;stroke:#3a6b3d}
.emp-collapsed-copy{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden}
.emp-collapsed-copy strong{flex:0 0 auto;font-size:13.5px;color:#1e2a20;font-weight:800}
.emp-collapsed-copy small{flex:1;min-width:0;font-size:12px;color:#7c8a76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-collapsed-arrow{flex:0 0 auto;font-size:18px;color:#9aa48c}
/* When collapsed with names only, let them use full width */
.emp-collapsed-names{flex:1;min-width:0;font-size:14px!important;font-weight:620!important;color:#1e2a20!important;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- inline style 93 ---- */
/* v418 — remove the large blank cream gap around the Cancel / Create shift bar.
The footer now hugs its buttons: tight padding top and bottom, and the
oversized upward glow is softened so it no longer reads as empty space. */
body[data-modal-type="shift"] .shift-modal .modal-body{
padding-bottom:6px!important;
}
body[data-modal-type="shift"] .shift-modal .modal-foot{
padding:8px 13px calc(8px + env(safe-area-inset-bottom))!important;
margin:0!important;
box-shadow:0 -5px 12px rgba(25,40,25,.05)!important;
}
@media(max-width:480px){
body[data-modal-type="shift"] .shift-modal .modal-body{padding-bottom:5px!important}
body[data-modal-type="shift"] .shift-modal .modal-foot{
padding:7px 12px calc(6px + env(safe-area-inset-bottom))!important;
}
}
/* ---- inline style 94 ---- */
/* v419 — stop input rows bleeding off the right edge of the screen.
The two-up grids (Repeat/Create, Start/End) had 1fr tracks whose implicit
min-width:auto let long