/* ============================================================================
   RemoteFlow · BOOKING HUB v2 — Design System
   ----------------------------------------------------------------------------
   Matched to the PRESENT RemoteFlow app (see Ui_Referece/screenshots_reference):
   · Shell chrome = the real app:  70px rail #0C0530 + 250px menu #140A49
     (white active row), 50px white toolbar, aktiv-grotesk (TypeKit vtp3xnr),
     Material Symbols, brand violet #3C23CA, row-hover #F3F1FC.
   · Content style = the team's own modern design files (payroll-processing,
     fields-redesign): soft #F4F5F9 canvas, white 12px-radius cards, tinted
     status pills, uppercase micro-labels, colourful avatars, stat chips.
   · Booking semantics (scope): Single Day = BLUE · Multi-Day intermediate =
     AMBER · Final Day = GREEN · Leave = GREY.

   CLASS VOCABULARY (use ONLY these + utilities):
   Shell ....... .rf-rail  .rail-co  .rail-it(.active) | .rf-menu .menu-title
                 .menu-sec .menu-it(.active) | .rf-toolbar .tb-co .tb-user
                 .rf-main  .page  .heading(+h1, .buttons)  .filters .fltr
                 .crumbs
   Buttons ..... .btn(.primary .soft .green .danger .ghost .sm .icon-only)
   Pills ....... .pill(.p-blue .p-amber .p-green .p-red .p-violet .p-grey)
                 .owner(.simpro .booking .manager .accounts)  .daypill
                 .flagchip  .req
   Cards ....... .card .card-head .card-body(.flush) | .stat-strip .stat
                 .stat-ico(.i-violet .i-green .i-amber .i-blue .i-red)
   Tabs ........ .tabs .tab(.active)  |  .segmented .seg-btn(.active)
   Table ....... .tbl-wrap .tbl  th  td  .tr-group  .num  .cell-main .cell-sub
                 .pager
   Forms ....... .frm .frm-grid(.cols-3) .fld .lbl .hint .inp .sel .txa
                 .inp.computed  .tgl  .chk(.on) .rdo(.on)  .chk-row
   Booking ..... .bucket(.b-blue .b-amber .b-green .b-grey) .bk-rail .bk-body
                 .bk-top .bk-id .bk-meta .bk-foot | .day-strip .day-card(.final)
                 .board .board-cell .board-head .blk(.k-blue .k-amber .k-green
                 .k-grey)
   People ...... .avx(.a-violet .a-blue .a-amber .a-green .a-ink .lg)
                 .avx-stack | .tech-item .skillchips .sk
   Tasks ....... .task-row(.done .incomp) .t-seq .t-main .t-name .t-desc
                 .t-tags .photoreq .thumb
   Misc ........ .timeline .tl-it | .accord .ac-it .ac-head .ac-body
                 .callout(.warn .violet) | .modal .modal-card .modal-head
                 .modal-body .modal-foot | .drawer .drawer-panel
                 .phone .p-screen .p-top .p-body .p-nav .bigbtn(.out .brand)
                 .steps .step(.active .done) | .empty | .prog .prog-fill
                 .kpis .kpi
   Utils ....... .row .wrap .between .right .center .muted .small .tiny .mono
                 .b .mt-1/2/3 .mb-1/2 .grid .g-2 .g-3 .g-4 .hide .hr .sep
   ========================================================================== */

@import url("https://use.typekit.net/vtp3xnr.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

:root{
  /* brand (present app) */
  --violet:#3C23CA; --violet-d:#2E1B9E; --violet-t:#F3F1FC; --violet-t2:#E9E5FA;
  --toggle-on:#3B0BC5;
  /* shell */
  --rail:#0C0530; --menu:#140A49; --menu-tx:#E9E9E9;
  /* canvas & surfaces (modern direction) */
  --canvas:#F4F5F9; --card:#FFFFFF; --card-2:#FAFAFC;
  --line:#E7E8EE; --line-2:#F0F1F5;
  --ink:#111219; --ink-2:#4A4F5C; --mut:#8A8F9C;
  /* status (present app) */
  --pos:#34AA44; --pos-t:#E9F7EC; --neg:#E7414A; --neg-t:#FDEDEE;
  --warn:#FFA200; --warn-t:#FFF4E4; --pend:#999;
  /* booking semantics */
  --bblue:#2F6FED; --bblue-t:#EAF1FE;
  --bamber:#E07D00; --bamber-t:#FFF3E3;
  --bgreen:#2E9E3F; --bgreen-t:#EAF6EC;
  --bgrey:#98A0AE; --bgrey-t:#F0F2F5;
  /* radii, shadows */
  --r:12px; --r-s:8px; --r-x:16px;
  --sh:0 1px 2px rgba(17,18,25,.05),0 1px 3px rgba(17,18,25,.04);
  --sh-2:0 6px 18px rgba(17,18,25,.08);
  --sh-3:0 22px 60px rgba(12,5,48,.25);
  --f:aktiv-grotesk,"Inter",system-ui,sans-serif;
  --fm:ui-monospace,"Cascadia Mono","JetBrains Mono",Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--f);font-size:.875rem;line-height:1.45;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased}
a{color:var(--violet);text-decoration:none;cursor:pointer}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:2rem;line-height:1.2}
h2{font-size:1.4rem}h3{font-size:1.05rem}
::selection{background:var(--violet-t2)}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;font-size:20px;line-height:1;vertical-align:middle}

/* ============================== SHELL ============================== */
.rf-rail{position:fixed;left:0;top:0;bottom:0;width:70px;background:var(--rail);z-index:60;display:flex;flex-direction:column;align-items:center;padding-top:10px;overflow-y:auto;scrollbar-width:none}
.rf-rail::-webkit-scrollbar{display:none}
.rail-co{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;color:var(--violet);font-size:20px;margin-bottom:14px;flex:none}
.rail-it{display:flex;flex-direction:column;align-items:center;gap:4px;width:62px;padding:9px 0 7px;border-radius:10px;color:#fff;opacity:.5;margin-bottom:2px}
.rail-it .material-symbols-outlined{font-size:22px}
.rail-it span.lbl{font-size:.625rem;font-weight:600}
.rail-it:hover{opacity:1;background:rgba(255,255,255,.08)}
.rail-it.active{opacity:1;background:rgba(255,255,255,.14)}

.rf-menu{position:fixed;left:70px;top:0;bottom:0;width:250px;background:var(--menu);z-index:59;overflow-y:auto;scrollbar-width:none;padding-bottom:2rem}
.rf-menu::-webkit-scrollbar{display:none}
.menu-title{font-size:.95rem;color:#fff;font-weight:700;padding:17px 20px 15px;display:flex;align-items:center;gap:9px}
.menu-title .material-symbols-outlined{font-size:19px;color:#B9AFF0}
.menu-sec{font-size:.6875rem;text-transform:uppercase;letter-spacing:.09em;color:#8C86BD;font-weight:600;padding:16px 20px 6px}
.menu-it{display:grid;grid-template-columns:20px 1fr auto;grid-column-gap:10px;align-items:center;margin:2px 10px;padding:.625rem .5rem .625rem 1rem;color:var(--menu-tx);border-radius:.5rem;font-size:.85rem;font-weight:500}
.menu-it .material-symbols-outlined{font-size:17px;opacity:.9}
.menu-it:hover{background:rgba(255,255,255,.15);color:#fff}
.menu-it.active{background:#fff;color:var(--rail);font-weight:600}
.menu-it .cnt{font-size:.6875rem;font-weight:700;background:var(--violet);color:#fff;border-radius:20px;padding:1px 7px;font-family:var(--fm)}
.menu-it.active .cnt{background:var(--violet)}

.rf-toolbar{position:fixed;left:320px;right:0;top:0;height:50px;background:#fff;box-shadow:1px 2px 4px -1px rgba(0,0,0,.1);z-index:58;display:flex;align-items:center;padding:0 1rem 0 1.25rem;gap:1rem}
.tb-co{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.875rem}
.tb-co .dot{width:8px;height:8px;border-radius:50%;background:var(--pos)}
.tb-search{flex:1;max-width:430px;position:relative}
.tb-search input{width:100%;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);padding:0 12px 0 34px;font-family:inherit;font-size:.8125rem}
.tb-search .material-symbols-outlined{position:absolute;left:9px;top:7px;color:var(--mut);font-size:19px}
.tb-user{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.tb-user .name{font-size:.875rem;font-weight:500}

.rf-main{margin-left:320px;margin-top:50px}
.page{padding:34px 44px 70px;max-width:1560px}
.crumbs{font-size:.75rem;color:var(--mut);margin-bottom:12px;display:flex;gap:6px;align-items:center}
.crumbs a{color:var(--mut)} .crumbs a:hover{color:var(--violet)}
.heading{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.heading .h-ico{width:44px;height:44px;border-radius:11px;background:var(--violet-t);color:var(--violet);display:grid;place-items:center;flex:none}
.heading .h-ico .material-symbols-outlined{font-size:23px}
.heading .h-sub{color:var(--ink-2);margin-top:5px;font-size:.875rem;max-width:72ch}
.heading .buttons{margin-left:auto;display:flex;gap:.625rem;align-items:center;flex-wrap:wrap}
.filters{display:flex;align-items:flex-end;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap}
.fltr{display:flex;flex-direction:column;gap:5px}
.fltr>label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);font-weight:600}

/* ============================== BUTTONS ============================== */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 1rem;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:.8125rem;white-space:nowrap;transition:.13s;text-decoration:none}
.btn:hover{border-color:#C9CBD6;box-shadow:var(--sh)}
.btn .material-symbols-outlined{font-size:18px}
.btn.primary{background:var(--violet);border-color:var(--violet);color:#fff}
.btn.primary:hover{background:var(--violet-d);border-color:var(--violet-d);box-shadow:0 6px 16px rgba(60,35,202,.3)}
.btn.soft{background:var(--violet-t);border-color:transparent;color:var(--violet)}
.btn.soft:hover{background:var(--violet-t2);box-shadow:none}
.btn.green{background:var(--pos);border-color:var(--pos);color:#fff}
.btn.green:hover{background:#2c9139;border-color:#2c9139}
.btn.danger{background:#fff;border-color:#F2C4C7;color:var(--neg)}
.btn.danger:hover{background:var(--neg);border-color:var(--neg);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--line-2);box-shadow:none}
.btn.sm{height:32px;padding:0 .75rem;font-size:.75rem;border-radius:8px;gap:6px}
.btn.sm .material-symbols-outlined{font-size:16px}
.btn.icon-only{width:40px;padding:0;justify-content:center}
.btn.icon-only.sm{width:32px}
.btn:disabled,.btn.disabled{background:var(--line-2);border-color:var(--line-2);color:var(--mut);cursor:not-allowed;box-shadow:none}

/* ============================== PILLS & TAGS ============================== */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:20px;font-size:.71875rem;font-weight:600;background:var(--line-2);color:var(--ink-2);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.no-dot::before{display:none}
.pill.p-blue{background:var(--bblue-t);color:var(--bblue)}
.pill.p-amber{background:var(--bamber-t);color:var(--bamber)}
.pill.p-green{background:var(--bgreen-t);color:var(--bgreen)}
.pill.p-red{background:var(--neg-t);color:var(--neg)}
.pill.p-violet{background:var(--violet-t);color:var(--violet)}
.pill.p-grey{background:var(--bgrey-t);color:#5E6673}
.daypill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:20px;font-size:.6875rem;font-weight:700;font-family:var(--fm);background:var(--ink);color:#fff}
.daypill.d-amber{background:var(--bamber)} .daypill.d-green{background:var(--bgreen)} .daypill.d-blue{background:var(--bblue)}
.owner{display:inline-block;font-size:.59375rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:5px;background:var(--line-2);color:var(--mut)}
.owner.simpro{background:var(--violet-t);color:var(--violet)}
.owner.booking{background:var(--bblue-t);color:var(--bblue)}
.owner.manager{background:var(--bamber-t);color:var(--bamber)}
.owner.accounts{background:var(--bgreen-t);color:var(--bgreen)}
.flagchip{display:inline-flex;align-items:center;gap:6px;background:var(--neg-t);color:var(--neg);border:1px solid #F4CDD0;font-weight:600;font-size:.71875rem;padding:3px 10px;border-radius:8px}
.flagchip .material-symbols-outlined{font-size:15px}
.req{color:var(--neg);font-weight:700}
.mono{font-family:var(--fm);font-size:.9em}

/* ============================== CARDS & STATS ============================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line-2)}
.card-head h3{font-size:.95rem}
.card-head .right,.card-head .buttons{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.card-body{padding:1.25rem}
.card-body.flush{padding:0}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
@media(max-width:1150px){.stat-strip{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;display:flex;gap:.9rem;align-items:center;box-shadow:var(--sh)}
.stat-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none}
.stat-ico .material-symbols-outlined{font-size:22px}
.stat-ico.i-violet{background:var(--violet-t);color:var(--violet)}
.stat-ico.i-green{background:var(--pos-t);color:var(--pos)}
.stat-ico.i-amber{background:var(--warn-t);color:var(--warn)}
.stat-ico.i-blue{background:var(--bblue-t);color:var(--bblue)}
.stat-ico.i-red{background:var(--neg-t);color:var(--neg)}
.stat .s-label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:600}
.stat .s-val{font-size:1.5rem;font-weight:700;line-height:1.15}
.stat .s-val small{font-size:.75rem;color:var(--mut);font-weight:500}
.stat .s-sub{font-size:.71875rem;color:var(--ink-2);margin-top:1px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem}

/* ============================== TABS & SEGMENTED ============================== */
.tabs{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;padding:0 .5rem;overflow-x:auto;margin-bottom:0}
.tabs+.tab-panels{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh)}
.tabs.bare{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;margin-bottom:1.25rem}
.tab{padding:.9rem 1rem;font-weight:500;font-size:.84375rem;color:var(--ink-2);border:0;background:none;border-bottom:2px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--violet);font-weight:600;border-bottom-color:var(--violet)}
.tab .cnt{font-size:.6875rem;font-weight:700;font-family:var(--fm);background:var(--line-2);color:var(--ink-2);padding:1px 7px;border-radius:12px}
.tab.active .cnt{background:var(--violet-t);color:var(--violet)}
.segmented{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px;gap:2px}
.seg-btn{border:0;background:none;padding:6px 14px;border-radius:7px;font-weight:500;font-size:.78125rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px}
.seg-btn .cnt{font-size:.6875rem;font-family:var(--fm);font-weight:700;background:var(--line-2);border-radius:10px;padding:0 6px}
.seg-btn.active{background:var(--violet);color:#fff;font-weight:600}
.seg-btn.active .cnt{background:rgba(255,255,255,.22);color:#fff}

/* ============================== TABLE ============================== */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:.8125rem}
.tbl th{text-align:left;font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);font-weight:700;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:#fff}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#F7F6FE}
.tbl tbody tr.clickable{cursor:pointer}
.tbl .num{font-family:var(--fm);text-align:right;font-size:.78125rem}
.tbl .cell-main{font-weight:600;color:var(--ink)}
.tbl .cell-sub{font-size:.71875rem;color:var(--mut);margin-top:1px}
.tbl .tr-group td{background:var(--card-2);font-weight:700;font-size:.78125rem;padding:9px 16px;border-top:1px solid var(--line)}
.tbl .tr-group .cnt{font-size:.6875rem;background:var(--line-2);border-radius:12px;padding:1px 8px;margin-left:8px;font-weight:600;color:var(--ink-2)}
.pager{display:flex;align-items:center;gap:.5rem;padding:12px 16px;border-top:1px solid var(--line-2)}
.pager .info{font-size:.75rem;color:var(--mut);margin-right:auto}

/* ============================== FORMS ============================== */
.frm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1.5rem}
.frm-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.frm-grid .span-2{grid-column:span 2}
@media(max-width:980px){.frm-grid,.frm-grid.cols-3{grid-template-columns:1fr}.frm-grid .span-2{grid-column:span 1}}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.lbl{font-size:.75rem;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.hint{font-size:.6875rem;color:var(--mut)}
.inp,.sel,.txa{width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;padding:.65rem .75rem;font-family:inherit;font-size:.875rem;color:var(--ink);transition:.13s}
.inp:focus,.sel:focus,.txa:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-t)}
.inp.computed,.inp[readonly]{background:var(--card-2);color:var(--ink-2);border-style:dashed}
.txa{min-height:88px;resize:vertical}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8F9C' stroke-width='2.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.tgl{position:relative;width:52px;height:29px;flex:none;display:inline-block}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl .tr{position:absolute;inset:0;border-radius:30px;background:#D8D4E6;transition:.3s}
.tgl .tr::after{content:"";position:absolute;top:3.5px;left:4px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.3s;box-shadow:var(--sh)}
.tgl input:checked+.tr{background:var(--toggle-on)}
.tgl input:checked+.tr::after{left:calc(100% - 4px);transform:translateX(-100%)}
.chk-row{display:flex;align-items:center;gap:9px;font-size:.8125rem;font-weight:500}
.chk,.rdo{width:19px;height:19px;border:1.5px solid #C9CBD6;border-radius:5px;background:#fff;display:grid;place-items:center;flex:none;cursor:pointer}
.rdo{border-radius:50%}
.chk.on{background:var(--violet);border-color:var(--violet)}
.chk.on::after{content:"✓";color:#fff;font-size:12px;font-weight:800}
.rdo.on{border-color:var(--violet)}
.rdo.on::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--violet)}

/* ============================== BOOKING BUCKET CARD ============================== */
.bucket{display:flex;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:.14s}
.bucket:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.bk-rail{width:6px;flex:none;background:var(--bblue)}
.bucket.b-amber .bk-rail{background:var(--bamber)}
.bucket.b-green .bk-rail{background:var(--bgreen)}
.bucket.b-grey .bk-rail{background:var(--bgrey)}
.bk-body{flex:1;min-width:0;padding:14px 18px}
.bk-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bk-top .jb{font-weight:700;font-size:.9375rem}
.bk-id{font-family:var(--fm);font-size:.6875rem;color:var(--mut)}
.bk-meta{display:flex;gap:1.1rem;flex-wrap:wrap;color:var(--ink-2);font-size:.78125rem;margin-top:8px}
.bk-meta span{display:inline-flex;align-items:center;gap:6px}
.bk-meta .material-symbols-outlined{font-size:16px;color:var(--mut)}
.bk-foot{display:flex;align-items:center;gap:.9rem;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2)}

/* day strip (multi-day) */
.day-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-bottom:1.5rem}
.day-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem;border-top:4px solid var(--bamber);box-shadow:var(--sh)}
.day-card.final{border-top-color:var(--bgreen)}
.day-card .d-date{font-weight:700;font-size:.9375rem}
.day-card .d-meta{font-size:.75rem;color:var(--ink-2);margin-top:6px;display:flex;flex-direction:column;gap:3px}

/* board (resource calendar) */
.board{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.board-grid{display:grid;grid-template-columns:150px repeat(5,1fr)}
.board-head{background:var(--card-2);font-weight:700;font-size:.71875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);padding:10px;text-align:center;border-bottom:1px solid var(--line);border-left:1px solid var(--line-2)}
.board-cell{min-height:62px;padding:5px;border-bottom:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.board-cell.rh{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.8125rem;padding:8px 10px;border-left:0;background:var(--card-2)}
.blk{border-radius:7px;padding:5px 8px;font-size:.6875rem;font-weight:700;color:#fff;background:var(--bblue);margin-bottom:4px;line-height:1.3}
.blk small{display:block;font-weight:500;opacity:.92;font-size:.625rem}
.blk.k-amber{background:var(--bamber)} .blk.k-green{background:var(--bgreen)} .blk.k-grey{background:var(--bgrey)}
/* board — month view */
.board-grid.g-month{grid-template-columns:repeat(7,1fr)}
.mcell{min-height:86px}
.mcell .dnum{display:inline-block;min-width:22px;text-align:center;font-size:.6875rem;font-weight:700;font-family:var(--fm);color:var(--ink-2);border-radius:6px;padding:1px 2px}
.mcell.out{background:var(--card-2)} .mcell.out .dnum{color:var(--mut);font-weight:500}
.mcell.today .dnum{background:var(--violet);color:#fff}
.mchip{display:block;border-radius:5px;padding:2px 6px;font-size:.59375rem;font-weight:700;color:#fff;background:var(--bblue);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mchip.k-amber{background:var(--bamber)} .mchip.k-green{background:var(--bgreen)} .mchip.k-grey{background:var(--bgrey)}
.mchip.more{background:none;color:var(--mut);font-weight:600}

/* ============================== PEOPLE ============================== */
.avx{width:30px;height:30px;border-radius:50%;background:var(--violet);color:#fff;display:inline-grid;place-items:center;font-weight:700;font-size:.6875rem;flex:none}
.avx.lg{width:40px;height:40px;font-size:.8125rem}
.avx.a-blue{background:var(--bblue)} .avx.a-amber{background:var(--bamber)} .avx.a-green{background:var(--bgreen)} .avx.a-ink{background:var(--rail)} .avx.a-violet{background:var(--violet)}
.avx-stack{display:flex}
.avx-stack .avx{border:2px solid #fff;margin-left:-9px}
.avx-stack .avx:first-child{margin-left:0}
.tech-item{display:flex;align-items:center;gap:.75rem;padding:.7rem;border:1px solid transparent;border-radius:10px}
.tech-item:hover{background:var(--violet-t);border-color:var(--line)}
.tech-item .ti-main{flex:1;min-width:0}
.tech-item .ti-main b{display:block;font-size:.8125rem}
.tech-item .ti-main small{color:var(--mut);font-size:.6875rem}
.tech-item.busy{opacity:.45}
.skillchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.sk{font-size:.59375rem;font-weight:700;background:var(--line-2);color:var(--ink-2);padding:2px 7px;border-radius:6px}
.sk.ok{background:var(--pos-t);color:var(--pos)}
.sk.no{background:var(--neg-t);color:var(--neg)}

/* ============================== TASKS ============================== */
.task-row{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;margin-bottom:.55rem}
.task-row.done{background:var(--bgreen-t);border-color:#CDE9D3}
.task-row.incomp{background:var(--bamber-t);border-color:#F4DDBB}
.t-seq{font-family:var(--fm);font-size:.6875rem;font-weight:700;color:var(--mut);background:var(--line-2);border-radius:7px;min-width:26px;height:26px;display:grid;place-items:center;flex:none}
.task-row.done .t-seq{background:#fff}
.t-main{flex:1;min-width:0}
.t-name{font-weight:600;font-size:.84375rem}
.t-desc{font-size:.75rem;color:var(--ink-2);margin-top:2px}
.t-tags{display:flex;gap:.6rem;align-items:center;margin-top:8px;flex-wrap:wrap}
.photoreq{display:inline-flex;align-items:center;gap:4px;font-size:.65625rem;font-weight:700;color:var(--bamber)}
.photoreq .material-symbols-outlined{font-size:14px}
.thumb{width:36px;height:36px;border-radius:8px;background:var(--line-2);display:grid;place-items:center;color:var(--mut)}
.thumb .material-symbols-outlined{font-size:17px}

/* ============================== MISC ============================== */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-it{position:relative;padding-bottom:1.1rem}
.tl-it::before{content:"";position:absolute;left:-22px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--violet)}
.tl-it .when{font-family:var(--fm);font-size:.6875rem;color:var(--mut)}
.tl-it .who{font-weight:600;font-size:.78125rem}

.accord{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.ac-it{border-bottom:1px solid var(--line-2)}
.ac-it:last-child{border-bottom:0}
.ac-head{display:flex;align-items:center;gap:.75rem;padding:.95rem 1.1rem;cursor:pointer;background:#fff}
.ac-head:hover{background:var(--card-2)}
.ac-body{padding:1.1rem;background:var(--card-2);border-top:1px solid var(--line-2)}

.callout{display:flex;gap:.75rem;padding:.85rem 1rem;border-radius:10px;background:#E9F3FD;border:1px solid #CBE2F8;font-size:.8125rem;color:var(--ink-2);align-items:flex-start}
.callout .material-symbols-outlined{font-size:19px;color:var(--bblue);flex:none;margin-top:1px}
.callout.warn{background:var(--warn-t);border-color:#F4DDBB}
.callout.warn .material-symbols-outlined{color:var(--warn)}
.callout.violet{background:var(--violet-t);border-color:#DCD5F6}
.callout.violet .material-symbols-outlined{color:var(--violet)}

.modal{position:fixed;inset:0;background:rgba(12,5,48,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}
.modal.open{display:flex}
.modal-card{background:#fff;border-radius:var(--r-x);width:100%;max-width:660px;max-height:88vh;overflow-y:auto;box-shadow:var(--sh-3)}
.modal-head{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.4rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.modal-head h3{flex:1}
.modal-body{padding:1.4rem}
.modal-foot{display:flex;justify-content:flex-end;gap:.6rem;padding:1rem 1.4rem;border-top:1px solid var(--line);position:sticky;bottom:0;background:#fff}

/* right drawer — echoes the real app's #RFSliderForm */
.drawer{position:fixed;inset:0;z-index:99;display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(620px,92vw);background:#fff;box-shadow:var(--sh-3);overflow-y:auto;padding:2rem;animation:dslide .25s cubic-bezier(.25,.46,.45,.94)}
@keyframes dslide{from{transform:translateX(60px);opacity:.4}to{transform:none;opacity:1}}

/* steps (wizard) */
.steps{display:flex;gap:.4rem;margin-bottom:1.5rem;flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:.78125rem;font-weight:600;color:var(--ink-2)}
.step .n{width:20px;height:20px;border-radius:50%;background:var(--line-2);display:grid;place-items:center;font-size:.65625rem;font-weight:700;font-family:var(--fm)}
.step.active{border-color:var(--violet);color:var(--violet);background:var(--violet-t)}
.step.active .n{background:var(--violet);color:#fff}
.step.done .n{background:var(--pos);color:#fff}

/* phone frame (technician app) */
.phone-stage{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.phone{width:352px;flex:none;background:var(--rail);border-radius:40px;padding:12px;box-shadow:var(--sh-3)}
.p-screen{background:var(--canvas);border-radius:30px;overflow:hidden;height:724px;display:flex;flex-direction:column;position:relative}
.p-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:126px;height:25px;background:var(--rail);border-radius:0 0 15px 15px;z-index:5}
.p-top{background:#fff;padding:36px 18px 13px;border-bottom:1px solid var(--line)}
.p-body{flex:1;overflow-y:auto;padding:15px}
.p-nav{display:flex;border-top:1px solid var(--line);background:#fff}
.p-nav a{flex:1;text-align:center;padding:9px 0 11px;font-size:.59375rem;color:var(--mut);font-weight:700}
.p-nav a .material-symbols-outlined{display:block;font-size:19px;margin:0 auto 2px}
.p-nav a.active{color:var(--violet)}
.phone-cap{text-align:center;font-weight:600;color:var(--ink-2);margin-top:.9rem;font-size:.8125rem}
.bigbtn{display:block;width:100%;border:0;border-radius:12px;padding:15px;font-family:inherit;font-weight:700;font-size:.9375rem;color:#fff;background:var(--pos);text-align:center;margin-top:.6rem}
.bigbtn.out{background:var(--neg)} .bigbtn.brand{background:var(--violet)}
.bigbtn:disabled{background:#D9DBE3;color:var(--mut);cursor:not-allowed}

.empty{text-align:center;padding:3rem 1rem;color:var(--mut)}
.empty .material-symbols-outlined{font-size:38px;opacity:.45}
.empty b{display:block;color:var(--ink);margin:.7rem 0 .2rem;font-size:.9375rem}

.prog{height:8px;border-radius:6px;background:var(--line-2);overflow:hidden;flex:1}
.prog-fill{height:100%;border-radius:6px;background:var(--pos)}
.ring{--p:60;--c:var(--bgreen);width:36px;height:36px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--line-2) 0);display:grid;place-items:center;flex:none}
.ring::after{content:attr(data-l);width:27px;height:27px;background:#fff;border-radius:50%;display:grid;place-items:center;font-size:.59375rem;font-weight:800;font-family:var(--fm)}

/* ============================== UTILITIES ============================== */
.row{display:flex;align-items:center;gap:.625rem}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.right{margin-left:auto}
.center{text-align:center}
.muted{color:var(--mut)} .ink2{color:var(--ink-2)}
.small{font-size:.75rem} .tiny{font-size:.6875rem}
.b{font-weight:600} .bb{font-weight:700}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.75rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.grid{display:grid;gap:1rem}
.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1150px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.hide{display:none!important}
.hr{border:0;height:1px;background:var(--line);margin:1.4rem 0}
.sep{width:1px;height:22px;background:var(--line)}
.mini-label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.09em;color:var(--mut);font-weight:700;margin:1.6rem 0 .7rem;display:flex;align-items:center;gap:10px}
.mini-label::after{content:"";flex:1;height:1px;background:var(--line)}
*:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(max-width:900px){
  .rf-rail,.rf-menu{display:none}
  .rf-toolbar{left:0}
  .rf-main{margin-left:0}
  .page{padding:20px 16px 60px}
}

/* ============================== TOAST (demo placeholder navigation) ============================== */
.toast{position:fixed;right:24px;top:64px;transform:translateY(-10px);display:flex;align-items:center;gap:10px;max-width:min(92vw,500px);background:var(--rail);color:#fff;padding:.75rem 1.15rem;border-radius:12px;box-shadow:var(--sh-3);font-size:.8125rem;line-height:1.45;z-index:120;opacity:0;pointer-events:none;transition:.22s}
.toast.show{opacity:1;transform:translateY(0)}
.toast .material-symbols-outlined{font-size:19px;color:#B9ADF6;flex:none}