/* ============================================================
   ReRent Workforce Console — Phase 1 theme
   Light + dark via data-theme="dark". Brand cyan #5BC0DE.
   ============================================================ */
:root{
  --ink:#151A1F; --ink-2:#525C66; --ink-3:#8D8F94;
  --line:#DCE4EB; --line-2:#E9EFF4;
  --bg:#F2F6F9; --surface:#FFFFFF; --surface-2:#EFF4F8; --surface-3:#E7EDF2;

  --brand:#5BC0DE; --brand-600:#33A6C6; --brand-700:#22839E;
  --brand-tint:#E9F7FB; --brand-tint-2:#D4EFF7; --brand-ink:#06303B;

  --success:#1B9D6A; --success-bg:#E6F6EF; --success-line:#B7E6D2;
  --warning:#B07D15; --warning-bg:#FAF1D8; --warning-line:#EBD9A3;
  --danger:#D2453C;  --danger-bg:#FBE9E7;  --danger-line:#F1C7C2;
  --info:#2F89B8;    --info-bg:#E6F1F8;

  --shadow-1:0 1px 2px rgba(20,33,46,.07), 0 1px 1px rgba(20,33,46,.04);
  --shadow-2:0 8px 28px rgba(20,40,60,.10);
  --shadow-pop:0 16px 50px rgba(15,35,55,.22);

  --r-xs:5px; --r-sm:7px; --r:10px; --r-lg:14px; --r-xl:18px;

  --display:'Oswald', sans-serif;
  --ui:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --brand-display:'Poppins', var(--ui);

  --sidebar-w:236px;
}

[data-theme="dark"]{
  --ink:#E6EDF3; --ink-2:#A6B0BB; --ink-3:#6E7782;
  --line:#2A3340; --line-2:#1F2731;
  --bg:#0E141B; --surface:#161D26; --surface-2:#1A222C; --surface-3:#1F2832;
  --brand:#5BC0DE; --brand-600:#7CD0E8; --brand-700:#9EDDEE;
  --brand-tint:#1A3540; --brand-tint-2:#234556;
  --success:#3DBF8A; --success-bg:#15302A; --success-line:#1F4F3E;
  --warning:#E5B25C; --warning-bg:#332912; --warning-line:#5A4621;
  --danger:#E26C63;  --danger-bg:#321A1B;  --danger-line:#5A2925;
  --info:#65B6E0;    --info-bg:#15303D;
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.2);
  --shadow-2:0 8px 28px rgba(0,0,0,.4);
  --shadow-pop:0 16px 50px rgba(0,0,0,.5);
}
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="time"]{color-scheme:dark}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
::selection{background:var(--brand-tint-2)}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CFD9E1;border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#B7C3CD}

/* ---------- typography ---------- */
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.stat-ico{width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-3);font-size:15px;flex-shrink:0}
.page-title{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:.005em;color:var(--ink);line-height:1.1}
.page-sub{font-size:13px;color:var(--ink-2);margin-top:3px}
.page-head{margin-bottom:22px}
.num{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums}
.sub{font-size:13px;color:var(--ink-2)}
.mono-meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:-.01em}

/* ---------- brand ---------- */
.brand-mark{display:inline-flex; align-items:center; gap:8px}
.brand-logo{height:26px; width:26px; display:block; flex-shrink:0}
.brand-word{font-family:var(--brand-display); font-weight:700; font-size:18px; color:#1F1B4D; letter-spacing:-0.01em}
[data-theme="dark"] .brand-word{color:#fff}
.brand-mark-lg{gap:12px}
.brand-logo-lg{height:48px; width:48px}
.brand-word-lg{font-size:34px; font-weight:800}

/* ---------- app shell ---------- */
.app-body{min-height:100vh}
.sidebar{
  position:fixed; left:0; top:0; bottom:0;
  width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; z-index:20;
}
.sb-head{height:64px; display:flex; align-items:center; padding:0 18px; border-bottom:1px solid var(--line-2); flex-shrink:0}
.sb-nav{flex:1; overflow:auto; padding:14px 8px 18px}
.sb-group-label{font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); padding:14px 12px 6px}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border-radius:var(--r-sm); border:none; background:none;
  color:var(--ink-2); text-decoration:none; font-family:var(--ui); font-size:13.5px; font-weight:500;
  cursor:pointer; transition:background .12s, color .12s;
}
.nav-item:hover{background:var(--surface-2); color:var(--ink)}
.nav-item.active{background:var(--brand-tint); color:var(--brand-700)}
.nav-item .ico{display:flex; align-items:center; justify-content:center; width:22px; font-size:17px}
.sb-foot{padding:14px; border-top:1px solid var(--line-2); flex-shrink:0}
.sb-user{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.sb-user-info{overflow:hidden}
.sb-user-name{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-user-role{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); text-transform:capitalize}
.sb-form{margin:0}
.sb-collapse{display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; border-radius:var(--r-sm); background:none; border:1px solid var(--line); color:var(--ink-2); cursor:pointer; font-size:12.5px}
.sb-collapse:hover{background:var(--surface-2)}

.main{margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column}
.topbar{
  height:64px; display:flex; align-items:center; gap:10px;
  padding:0 22px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:15;
}
[data-theme="dark"] .topbar{background:rgba(22,29,38,.85)}
.topbar .search{
  flex:1; max-width:380px; display:flex; align-items:center; gap:9px;
  background:var(--surface-2); border:1px solid var(--line-2);
  height:38px; padding:0 14px; border-radius:99px;
}
.topbar .search input{border:none; background:none; outline:none; font-family:var(--ui); font-size:13px; color:var(--ink); width:100%}
.spacer{flex:1}

.content{padding:26px 26px 44px; max-width:1280px; margin:0 auto; width:100%}

/* avatar */
.avatar{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:#fff; font-weight:600; font-size:12px; letter-spacing:.04em; flex-shrink:0}
.avatar-sm{width:30px; height:30px; font-size:11px}
.avatar-xs{width:24px; height:24px; font-size:10px}

/* card / well */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1)}
.card-p{padding:18px 20px}
.well{background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:12px 14px}
.grid{display:grid; gap:14px}

/* icon button */
.icon-btn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid transparent; border-radius:8px; color:var(--ink-2);
  cursor:pointer; font-size:18px; transition:background .12s, color .12s, border-color .12s;
}
.icon-btn:hover{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}

/* button */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer;
  font-family:var(--ui); font-size:13.5px; font-weight:600;
  text-decoration:none; transition:background .12s, border-color .12s, transform .04s;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); border-color:var(--brand-600); color:var(--brand-ink)}
.btn-primary:hover{background:var(--brand-600)}
.btn-ghost{background:none; border-color:var(--line)}
.btn-block{width:100%}

/* form fields */
.input{
  width:100%; height:42px; padding:0 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--ui); font-size:14px; color:var(--ink); outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
textarea.input{height:auto; padding:10px 14px}
.form-row{margin-bottom:16px}
.form-row label{display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; letter-spacing:.02em}
.field-err{margin-top:6px; font-size:12px; color:var(--danger)}

/* password show/hide */
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:42px}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:16px;
  border-radius:6px;
}
.pw-toggle:hover{background:var(--surface-2); color:var(--ink)}

/* banner */
.banner{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-radius:var(--r-sm); font-size:13.5px;
  border:1px solid; margin-bottom:14px;
}
.banner.success{background:var(--success-bg); border-color:var(--success-line); color:var(--success)}
.banner.warning{background:var(--warning-bg); border-color:var(--warning-line); color:var(--warning)}
.banner.warn   {background:var(--warning-bg); border-color:var(--warning-line); color:var(--warning)}
.banner.error  {background:var(--danger-bg);  border-color:var(--danger-line);  color:var(--danger)}
.banner i{font-size:16px; line-height:1.5}

/* toasts */
.toasts{position:fixed; right:18px; top:78px; display:flex; flex-direction:column; gap:10px; z-index:1000}
.toast{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  padding:11px 14px; border-radius:var(--r-sm); box-shadow:var(--shadow-2);
  min-width:260px; font-size:13.5px; animation:toastIn .26s ease;
}
.toast i{font-size:16px}
.toast-success i{color:var(--success)} .toast-error i{color:var(--danger)} .toast-warning i{color:var(--warning)}
@keyframes toastIn{from{transform:translateX(20px); opacity:0} to{transform:none; opacity:1}}

/* ---------- LOGIN ---------- */
.auth-body{min-height:100vh; background:var(--bg)}
.login{display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh}
.login-aside{
  background:linear-gradient(160deg, #06303B 0%, #0F4256 60%, #1B5874 100%);
  display:flex; align-items:center; justify-content:center; padding:48px;
}
.la-inner{max-width:420px; color:#fff}
.login-main{display:flex; align-items:center; justify-content:center; padding:48px 24px}
.login-card{width:100%; max-width:380px}
.login-mobile-brand{display:none; align-items:center; justify-content:center; gap:10px; margin-bottom:24px}
.login-mobile-brand .brand-logo{width:34px; height:34px}
.login-mobile-brand .brand-word{font-family:var(--display); font-weight:800; font-size:22px; color:var(--ink)}
.login-form{margin-top:22px}
.login-links{margin-top:14px; text-align:center; font-size:13px}
.login-links a{color:var(--brand-700); text-decoration:none}
.login-links a:hover{text-decoration:underline}

/* demo accounts strip */
.demo-block{margin-top:26px; padding:14px 16px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-sm)}
.demo-head{font-size:12.5px; color:var(--ink-2); margin-bottom:10px}
.demo-head .sub{font-size:12px}
.demo-grid{display:flex; flex-wrap:wrap; gap:8px}
.demo-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:99px;
  padding:5px 12px 5px 5px; font-size:12.5px; color:var(--ink); cursor:pointer;
  transition:background .12s, border-color .12s;
}
.demo-pill:hover{background:var(--brand-tint); border-color:var(--brand)}

/* ---------- mobile-only / desktop-only helpers (default desktop) ---------- */
.mobile-only{display:none !important}
.sb-veil{display:none}
.bottom-nav{display:none}

/* ---------- MOBILE ---------- */
@media (max-width:768px){
  .app-body{padding-bottom:0}
  .sidebar{
    transform:translateX(-100%); transition:transform .24s cubic-bezier(.2,.9,.3,1);
    width:282px; max-width:84vw; box-shadow:var(--shadow-pop); border-right:none;
    z-index:1100;
  }
  .sidebar.open{transform:translateX(0)}
  .sb-veil{
    display:block; position:fixed; inset:0;
    background:rgba(20,33,46,.50); backdrop-filter:blur(2px);
    z-index:1099;
  }
  .sb-veil[hidden]{display:none}

  .main{margin-left:0}
  .topbar{height:56px; padding:0 12px; gap:8px}
  .topbar .search{max-width:none; flex:1; min-width:0}

  .content{padding:14px 14px calc(88px + env(safe-area-inset-bottom))}

  .mobile-only{display:inline-flex !important}
  .icon-btn.mobile-only{display:inline-flex !important}
  .sb-close.mobile-only{display:inline-flex !important; margin-left:auto}

  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0;
    background:var(--surface); border-top:1px solid var(--line);
    z-index:60; padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 12px rgba(20,33,46,.06);
  }
  .bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:9px 4px 7px; background:none; border:none; cursor:pointer;
    color:var(--ink-3); font-family:var(--ui); font-size:10.5px; font-weight:600;
    text-decoration:none; position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .bn-item.active{color:var(--brand-700)}
  .bn-item.active::before{
    content:""; position:absolute; top:0; left:30%; right:30%; height:2.5px;
    background:var(--brand); border-radius:0 0 2px 2px;
  }
  .bn-ico{font-size:18px; display:flex}

  .login{grid-template-columns:1fr}
  .login-aside{display:none}
  .login-main{padding:32px 20px}
  .login-mobile-brand{display:flex}

  input, textarea, select{font-size:16px}
  .input{height:44px}
  .btn{min-height:44px; padding:11px 16px; font-size:14px}
  .toasts{right:12px; left:12px; top:auto; bottom:calc(80px + env(safe-area-inset-bottom))}
  .toast{min-width:0; width:100%}
}
@media (min-width:769px){
  .sb-veil{display:none !important}
}

/* ---------- DATA TABLE ---------- */
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding:9px 14px;
  border-bottom:1px solid var(--line-2);text-align:left;white-space:nowrap
}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--surface-2)}
.td-mono{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.td-num{font-family:var(--display);font-weight:600;white-space:nowrap}

/* ---------- PILLS / STATUS BADGES ---------- */
.pill{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap
}
.pill-pending  {background:var(--warning-bg); color:var(--warning)}
.pill-approved, .pill-completed {background:var(--success-bg); color:var(--success)}
.pill-rejected {background:var(--danger-bg); color:var(--danger)}
.pill-in-progress {background:var(--info-bg); color:var(--info)}
.pill-due {background:var(--danger-bg); color:var(--danger)}

/* ---------- NAV BADGE ---------- */
.nav-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--danger);color:#fff;
  border-radius:99px;font-size:10.5px;font-weight:700;
  margin-left:auto;flex-shrink:0
}

/* ---------- CHAT ---------- */
.chat-shell{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 205px);min-height:460px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.chat-sidebar{border-right:1px solid var(--line-2);overflow-y:auto;display:flex;flex-direction:column}
.chat-row{display:flex;align-items:center;gap:11px;padding:13px 14px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line-2);transition:background .1s;cursor:pointer}
.chat-row:hover,.chat-row.active{background:var(--surface-2)}
.chat-row.active{background:var(--brand-tint)}
.chat-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-row-name{display:flex;align-items:center;font-weight:600;font-size:13.5px}
.chat-row-preview{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.chat-header{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-2);font-size:14px;flex-shrink:0;background:var(--surface)}
.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.chat-input{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line-2);background:var(--surface);flex-shrink:0}

/* chat bubbles */
.bubble{max-width:74%;min-width:78px;padding:9px 13px 6px;border-radius:14px;font-size:14px;font-weight:500;line-height:1.45;overflow-wrap:break-word}
.bubble.them{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);border-bottom-left-radius:4px}
.bubble.me{background:var(--brand-700);color:#fff;border-bottom-right-radius:4px}
.bubble-row{display:flex;gap:8px;align-items:flex-end}
.bubble-row.me{justify-content:flex-end}
.bubble-row.them{justify-content:flex-start}
.bubble-meta{font-family:var(--mono);font-size:10px;font-weight:400;color:rgba(255,255,255,.7);margin-top:4px;white-space:nowrap;text-align:right}
.bubble.them .bubble-meta{color:var(--ink-3)}
/* WhatsApp-style message actions / reply / delete */
.bubble-wrap{display:flex;align-items:center;gap:4px;max-width:74%}
.bubble-row.me .bubble-wrap{flex-direction:row-reverse}
.bubble-wrap .bubble{max-width:100%}
.bubble-actions{display:flex;gap:1px;opacity:0;transition:opacity .12s;flex-shrink:0}
.bubble-row:hover .bubble-actions{opacity:1}
.bubble-actions button{width:26px;height:26px;border:none;background:transparent;color:var(--ink-3);border-radius:6px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.bubble-actions button:hover{background:var(--surface-2);color:var(--ink)}
.bubble-quote{border-left:3px solid var(--brand);background:rgba(0,0,0,.06);padding:4px 8px;border-radius:6px;margin-bottom:6px;font-size:12px;line-height:1.35}
.bubble.me .bubble-quote{background:rgba(255,255,255,.18);border-left-color:rgba(255,255,255,.7)}
.msg-deleted{font-style:italic;opacity:.75}
.emoji-panel{position:absolute;bottom:60px;left:12px;width:300px;flex-wrap:wrap;gap:2px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);z-index:30;max-height:170px;overflow-y:auto}
.emoji-panel button{border:none;background:transparent;font-size:19px;cursor:pointer;padding:3px 4px;border-radius:6px;line-height:1}
.emoji-panel button:hover{background:var(--surface-2)}
.reply-bar{align-items:center;gap:8px;padding:8px 12px;background:var(--surface-2)}
/* Hours & Payroll employee accordion */
.emp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-1)}
.emp-head{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none;flex-wrap:wrap}
.emp-head::-webkit-details-marker{display:none}
.emp-head:hover{background:var(--surface-2)}
.emp-chev{color:var(--ink-3);transition:transform .15s;flex-shrink:0;font-size:13px}
details[open] .emp-chev{transform:rotate(90deg)}
details[open] .emp-head{border-bottom:1px solid var(--line-2)}
.emp-head-stats{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}

@media (max-width:768px){
  .chat-shell{grid-template-columns:1fr;height:auto}
  .chat-sidebar{max-height:240px;border-right:none;border-bottom:1px solid var(--line-2)}
  .chat-main{min-height:400px}
}

/* ---------- CALENDAR ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line-2)}
.cal-head{background:var(--surface-2)}
.cal-dh{padding:8px 4px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cal-day{
  min-height:74px;padding:6px 7px;border-right:1px solid var(--line-2);
  position:relative;overflow:hidden;
  transition:background .1s;
}
.cal-day:last-child{border-right:none}
.cal-day.today{background:var(--brand-tint)}
.cal-day.empty{background:var(--surface-2)}
.cal-num{display:inline-block;width:22px;height:22px;border-radius:50%;text-align:center;line-height:22px;font-size:12.5px;font-weight:600}
.cal-day.today .cal-num{background:var(--brand-700);color:#fff}
.leave-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 5px;border-radius:4px;font-size:10px;font-weight:600;
  margin:2px 1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.leave-pending  {background:var(--warning-bg); color:var(--warning)}
.leave-approved {background:var(--success-bg); color:var(--success)}
.leave-denied   {background:var(--danger-bg);  color:var(--danger)}
.cal-note-dot{position:absolute;top:4px;right:5px;font-size:8px;color:var(--warning)}
.cal-task{margin-top:3px;font-size:9.5px;line-height:1.3;background:var(--brand-tint);color:var(--brand-700);border:1px solid var(--brand);border-radius:4px;padding:1px 5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* segmented control */
.seg{display:inline-flex;width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:3px}
.seg button{flex:1;border:none;background:none;cursor:pointer;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink-2);padding:7px 14px;border-radius:5px;transition:.12s;white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--brand-700);box-shadow:var(--shadow-1)}
/* weekly commitment day stepper */
.step-btn{width:18px;height:18px;border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:4px;cursor:pointer;font-size:12px;line-height:1;padding:0}
.step-btn:disabled{opacity:.4;cursor:not-allowed}
.day-inp{width:34px;text-align:center;background:transparent;border:none;outline:none;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);padding:0}
.day-inp:disabled{color:var(--ink-3)}

@media (max-width:768px){
  .cal-day{min-height:50px;padding:4px}
  .leave-chip{display:none}
  .cal-dh{font-size:9px;padding:5px 2px}
}

/* ============================================================
   PHASE 6 — Mobile polish
   ============================================================ */

/* Touch target enforcement (min 44 × 44 px on all interactive elements) */
@media (max-width:768px){
  .btn            { min-height:44px; font-size:14px }
  .icon-btn       { width:44px; height:44px }
  .nav-item       { min-height:44px; padding:12px 14px }
  .input          { height:44px; font-size:16px }   /* prevent iOS zoom */
  select.input    { height:44px; font-size:16px }
  textarea.input  { height:auto; min-height:44px; font-size:16px }
  .demo-pill      { min-height:44px }

  /* Content padding accounts for bottom nav */
  .content { padding:14px 14px calc(72px + env(safe-area-inset-bottom)); }

  /* Grid collapses to 1 column on very narrow */
  .grid { grid-template-columns: 1fr !important; }

  /* Cards don't overflow horizontally */
  .card { min-width: 0; word-break: break-word; }

  /* Data table: horizontal scroll, never wraps columns off-screen */
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table      { min-width: 540px; }

  /* Chat: full-height thread, sidebar collapses */
  .chat-shell { grid-template-columns: 1fr; height: auto; }
  .chat-sidebar { max-height: 200px; border-right: none; border-bottom: 1px solid var(--line-2); }
  .chat-main    { height: 400px; }
  .chat-messages{ padding: 10px; }

  /* Modals slide up from bottom on mobile (sheet feel) */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-sheet {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    width: 100%;
    max-width: 100% !important;
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Page head stacks on mobile */
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* KPI grid minimum width on phone */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hide non-essential table columns on phone via .hide-mobile */
  .hide-mobile { display: none !important; }

  /* Topbar: tighter */
  .topbar { height: 56px; padding: 0 10px; gap: 6px; }
  .topbar .search { flex: 1; min-width: 0; }
  .topbar .search input { font-size: 14px; }

  /* Sidebar open: prevent body scroll */
  body.sb-open { overflow: hidden; }
}

/* Extra small phones (< 380px) */
@media (max-width:380px){
  .content { padding: 12px 10px calc(70px + env(safe-area-inset-bottom)); }
  .page-title { font-size: 21px; }
  .kpi-grid { grid-template-columns: 1fr !important; }
}

/* Safe area for iPhones with home bar */
.bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom), 6px);
}

/* Smooth page transitions (feels native) */
.content { animation: fadeUp .18s ease; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Focus ring (accessibility) */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Prevent double-tap zoom on buttons (iOS) */
button, a { touch-action: manipulation; }

/* Overscroll color matches bg */
html { background: var(--bg); }