:root{
  --ink:#3f3028;--ink-2:#57453a;--orange:#f97316;--orange-2:#b94709;--orange-soft:#ffeddf;
  --paper:#fffdf8;--surface:#fffefb;--muted:#796b60;--line:#e8e0d5;
  --green:#38815b;--red:#b9382e;--shadow:0 3px 14px rgba(67,48,29,.045);--radius:16px;
}

/* Super Admin mode control in the main navigation. */
.super-admin-mode-form{margin:7px 0 0;border-top:1px solid #dfd5c6;padding-top:13px}
.super-admin-mode-switch{width:100%;min-height:46px;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #dfd5c6;border-radius:12px;background:#fffdfa;color:#746153;text-align:left;font-size:13px;font-weight:700;cursor:pointer}
.super-admin-mode-switch:hover{background:#fff0e4;color:#9a420f}
.super-admin-mode-switch.is-on{background:#ffe4cc;border-color:#f6b985;color:#8b380d}
.super-admin-mode-switch .icon{flex:none;width:21px;height:21px}
.super-admin-mode-label{min-width:0;flex:1}
.super-admin-mode-state{padding:2px 7px;border-radius:7px;background:#eee7df;color:#66594e;font-size:10px;font-weight:900;letter-spacing:.04em}
.super-admin-mode-switch.is-on .super-admin-mode-state{background:#f97316;color:#fff}
.super-admin-mode-switch:focus-visible{outline:2px solid #f97316;outline-offset:2px}
@media(min-width:901px){
    .sidebar-collapsed .super-admin-mode-form{position:relative}
    .sidebar-collapsed .super-admin-mode-switch{flex-direction:column;justify-content:center;gap:1px;min-height:53px;padding:5px 0}
    .sidebar-collapsed .super-admin-mode-label{display:none}
    .sidebar-collapsed .super-admin-mode-state{padding:0 5px;font-size:9px}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:radial-gradient(circle at 75% 5%,#fff0e4 0,transparent 28%),#f8f6f2;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,summary,input,select,textarea{transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.icon{width:20px;height:20px;flex:0 0 auto}
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;z-index:40;width:248px;padding:24px 16px;display:flex;flex-direction:column;background:rgba(18,16,14,.96);color:#fff;border-right:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 28px}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#fb923c,var(--orange-2));color:#fff;font-size:19px;font-weight:900;box-shadow:0 10px 25px rgba(249,115,22,.3)}
.brand>span:last-child{display:grid;line-height:1.15}.brand strong{font-size:16px}.brand small{margin-top:4px;color:#a9a39d;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.nav{display:grid;gap:7px}.nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;color:#bdb7b0;font-size:14px;font-weight:700;border:1px solid transparent}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.nav a.active{background:linear-gradient(115deg,rgba(249,115,22,.27),rgba(249,115,22,.11));border-color:rgba(251,146,60,.32);color:#fff;box-shadow:inset 3px 0 var(--orange)}
.nav a.active .icon{color:#fb923c}
.sidebar-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:15px 10px 2px;border-top:1px solid rgba(255,255,255,.09)}
.sidebar-foot .avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#111;font-weight:900}.sidebar-foot div:last-child{display:grid;min-width:0}.sidebar-foot strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-foot small{color:#9f9992;font-size:11px}
.main{min-height:100vh;margin-left:248px;transition:margin-left .22s cubic-bezier(.16,1,.3,1)}
.topbar{position:sticky;top:0;z-index:30;height:72px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(248,246,242,.78);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
.filter-search{display:flex;align-items:center;gap:10px;width:min(420px,48vw);min-height:42px;height:42px;padding:0 13px;border:1px solid #d9d4ce;border-radius:11px;background:#fff;color:var(--muted);box-shadow:0 1px 2px rgba(67,48,29,.04)}
.filter-search:hover{border-color:#c5b8aa}
.filter-search:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.16);background:#fff}
.filter-search:focus-within .icon{color:var(--orange-2)}
.filter-search .icon{width:18px;height:18px;flex:0 0 auto;color:var(--muted);transition:color .18s ease}
.filter-search input{width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px;font-weight:500;appearance:none;-webkit-appearance:textfield}
.filter-search input::-webkit-search-cancel-button{display:none}
.filter-search input::placeholder{color:#9c8e82;font-size:12.5px;font-weight:400}
.mobile-menu{display:none;border:0;background:transparent}
.container{width:100%;max-width:1380px;margin:0 auto;padding:28px 28px 70px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.page-heading h1{margin:2px 0 6px;font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:-.045em}
.page-heading p{margin:0;color:var(--muted)}
.eyebrow,.section-kicker{margin:0!important;color:var(--orange-2)!important;font-size:11px!important;font-weight:900!important;letter-spacing:.13em;text-transform:uppercase}
.heading-stats{display:flex;gap:8px}.heading-stats > div{min-width:88px;padding:12px 15px;border:1px solid rgba(255,255,255,.7);border-radius:15px;background:rgba(255,255,255,.58);backdrop-filter:blur(12px);box-shadow:0 9px 25px rgba(50,35,20,.05)}
.heading-stats strong{display:block;font-size:22px}.heading-stats span{color:var(--muted);font-size:11px}
.card,.table-card{border:1px solid rgba(50,35,20,.1);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.card{padding:20px}
.btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border:1px solid transparent;border-radius:11px;background:var(--ink);color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(20,15,10,.14)}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));box-shadow:0 8px 20px rgba(249,115,22,.2)}
.btn-dark{background:var(--ink)}.btn-ghost,.btn-light{background:rgba(255,255,255,.72);border-color:var(--line);color:var(--ink);backdrop-filter:blur(10px)}
.btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);backdrop-filter:blur(10px)}
.btn-danger{background:#fff1f0;border-color:#fecaca;color:var(--red)}.btn-large{width:100%;height:48px}.full{width:100%}
.alert{margin:0 0 18px;padding:12px 15px;border-radius:12px;font-size:13px;font-weight:700}.alert-success{background:#ecfdf5;color:#067647;border:1px solid #a6f4c5}.alert-error{background:#fff1f0;color:#b42318;border:1px solid #fecdca}
.field{display:grid;gap:7px;min-width:0}.field label{font-size:12px;font-weight:850;color:#433d37}.field label small{color:var(--muted);font-weight:600}
.input,.select,.textarea{width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid #d9d4ce;border-radius:11px;background:#fff;color:var(--ink);outline:0}
.textarea{min-height:90px;resize:vertical}.input:focus,.select:focus,.textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.11)}
.form-stack,.grid{display:grid;gap:14px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.mb{margin-bottom:20px}.mt{margin-top:20px}.tiny{font-size:12px}.muted{color:var(--muted)}.inline-form,.filter-inline{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.filter-card{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px}.filter-card .filter-search{flex:1;width:auto}.filter-card .select{width:auto;max-width:190px}
.create-work{margin-bottom:34px;padding:0;overflow:hidden}.create-work>summary{display:flex;align-items:center;gap:13px;padding:16px 18px;cursor:pointer;list-style:none}.create-work>summary::-webkit-details-marker{display:none}.create-work>summary:hover{background:var(--orange-soft)}
.summary-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--orange-soft);color:var(--orange-2)}.create-work summary>span:nth-child(2){display:grid}.create-work summary small{color:var(--muted);font-size:11px}.summary-action{margin-left:auto;color:var(--orange-2);font-size:12px;font-weight:800}
.work-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:20px;border-top:1px solid var(--line);background:rgba(255,255,255,.48)}
.work-form.compact{grid-template-columns:repeat(2,minmax(0,1fr));width:min(720px,88vw);max-height:65vh;overflow:auto;margin-top:12px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 20px 50px rgba(30,20,12,.15)}
.field-wide{grid-column:span 2}.field-full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end}
.rich-editor{overflow:hidden;border:1px solid #d9d4ce;border-radius:13px;background:#fff}.rich-editor:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.1)}
.rich-toolbar{display:flex;align-items:center;gap:5px;padding:7px;border-bottom:1px solid var(--line);background:#faf9f7}.rich-toolbar button{min-height:30px;padding:4px 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:#5c554e;font-size:11px;font-weight:800;cursor:pointer}.rich-toolbar button:hover{border-color:#f7c79f;background:#fff4eb;color:var(--orange-2)}
.rich-content{min-height:125px;padding:13px;outline:0}.rich-content:empty:before{content:attr(data-placeholder);color:#a8a19a}.rich-content h2,.rich-output h2{font-size:22px}.rich-content h3,.rich-output h3{font-size:17px}.rich-content p,.rich-output p{margin:.45em 0}.rich-content input,.rich-output input{accent-color:var(--orange)}
.section-block{margin-top:34px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.section-heading.compact{margin-bottom:18px}.section-heading h2{margin:2px 0 3px;font-size:22px;letter-spacing:-.025em}.section-heading p{margin:0;color:var(--muted);font-size:13px}.section-heading>a{color:var(--orange-2);font-size:12px;font-weight:800}
.count-pill{min-width:28px;height:28px;display:inline-grid;place-items:center;padding:0 9px;border-radius:999px;background:#eee9e3;color:#655d55;font-size:11px;font-weight:900}
.backlog-strip{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:12px;overflow-x:auto;padding:2px 2px 10px}.backlog-card{position:relative;min-width:230px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.82);overflow:visible}.backlog-card:hover{transform:translateY(-3px);border-color:rgba(249,115,22,.35);box-shadow:0 14px 30px rgba(45,28,14,.09)}.backlog-card h3{margin:12px 0 5px;font-size:15px}.backlog-card p{margin:0;color:var(--muted);font-size:11px}.priority-line{position:absolute;inset:0 auto 0 0;width:3px;background:#cbd5e1}.priority-line.medium{background:#fbbf24}.priority-line.high{background:#fb923c}.priority-line.urgent{background:#ef4444}
.task-card-head,.task-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.type-label{color:#7c7167;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.badge,.status-chip{display:inline-flex;align-items:center;width:max-content;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900}.badge.low{background:#f1f5f9;color:#475569}.badge.medium{background:#fef3c7;color:#92400e}.badge.high{background:#ffedd5;color:#9a3412}.badge.urgent{background:#fee2e2;color:#b91c1c}
.status-chip.todo{background:#fff7ed;color:#9a3412}.status-chip.in_progress{background:#ffedd5;color:#c2410c}.status-chip.review{background:#fef3c7;color:#92400e}.status-chip.done{background:#ecfdf5;color:#047857}
.inline-editor{margin-top:12px;position:relative}.inline-editor>summary{width:max-content;list-style:none;color:var(--orange-2);font-size:11px;font-weight:850;cursor:pointer}.inline-editor>summary::-webkit-details-marker{display:none}.inline-editor[open]{z-index:15}
.kanban{display:grid;grid-template-columns:repeat(4,minmax(255px,1fr));gap:12px;align-items:start;overflow-x:auto;padding:2px 2px 16px}
.kanban-column{min-width:255px;padding:10px;border:1px solid var(--line);border-radius:17px;background:rgba(239,235,230,.62)}.kanban-column>header{display:flex;align-items:center;gap:8px;padding:5px 4px 12px}.kanban-column h3{margin:0;font-size:13px}.kanban-column header .count-pill{margin-left:auto}
.status-dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:#a8a29e;box-shadow:0 0 0 4px rgba(168,162,158,.13)}.status-dot.todo{background:#fb923c;box-shadow:0 0 0 4px #ffedd5}.status-dot.in_progress{background:#ea580c;box-shadow:0 0 0 4px #fed7aa}.status-dot.review{background:#f59e0b;box-shadow:0 0 0 4px #fef3c7}.status-dot.done{background:#10b981;box-shadow:0 0 0 4px #d1fae5}
.task-list{display:grid;gap:9px;min-height:82px}.task-card{padding:13px;border:1px solid rgba(45,33,22,.1);border-radius:13px;background:#fff;box-shadow:0 5px 14px rgba(45,30,18,.045);cursor:grab}.task-card:hover{border-color:rgba(249,115,22,.32);box-shadow:0 11px 24px rgba(55,32,15,.09);transform:translateY(-2px)}.task-card.dragging{opacity:.45;transform:rotate(1deg)}.task-card h4{margin:10px 0 5px;font-size:14px}.task-owner{margin:0;color:#4c453f;font-size:11px;font-weight:750}.task-foot{margin-top:12px;padding-top:9px;border-top:1px solid #f0ede9;color:var(--muted);font-size:10px}.drag-handle{color:#b7afa7;font-weight:900;letter-spacing:-2px}.column-empty,.empty-state{display:grid;place-items:center;gap:3px;min-height:74px;padding:15px;border:1px dashed #d8d1c9;border-radius:13px;color:#948b82;text-align:center;font-size:12px}.empty-state strong{color:#5d554e}.save-state{color:#6f675f;font-size:11px}.save-state.error{color:var(--red)}
.table-card{overflow:auto}.table-card table,.table{width:100%;border-collapse:collapse}.table-card th,.table-card td,.table th,.table td{padding:13px 15px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-size:12px}.table-card th,.table th{background:rgba(245,242,238,.82);color:#7b7269;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.table-card tbody tr:hover,.table tbody tr:hover{background:#fff9f4}.table-card tr:last-child td,.table tr:last-child td{border-bottom:0}.table-title{display:block;font-weight:850;font-size:13px}.table-card td small{display:block;color:var(--muted);margin-top:3px}.icon-link{width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.7)}.icon-link:hover{border-color:#f8b884;background:var(--orange-soft);color:var(--orange-2);transform:translateY(-2px)}
.assignee-dropdown{position:relative}.assignee-dropdown>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:9px 11px;border:1px solid #d9d4ce;border-radius:11px;background:#fff;list-style:none;cursor:pointer;font-size:12px;font-weight:750}.assignee-dropdown>summary::-webkit-details-marker{display:none}.assignee-dropdown>summary small{color:var(--muted)}.assignee-menu{position:absolute;z-index:50;top:calc(100% + 6px);left:0;width:min(320px,80vw);max-height:280px;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 18px 45px rgba(30,20,12,.17)}.assignee-group{display:grid;gap:4px}.assignee-group+ .assignee-group{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}.assignee-group>strong{padding:4px 7px;color:var(--muted);font-size:10px;text-transform:uppercase}.assignee-option{display:flex;justify-content:space-between;gap:8px;padding:7px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}.assignee-option:hover,.assignee-option:has(input:checked){background:var(--orange-soft);color:var(--orange-2)}.assignee-option input{accent-color:var(--orange)}
.hero-panel{position:relative;min-height:260px;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:40px;border-radius:24px;background:linear-gradient(125deg,#141210,#2b2119);color:#fff;overflow:hidden;box-shadow:0 24px 60px rgba(30,20,12,.18)}.hero-panel:after{content:"";position:absolute;width:320px;height:320px;right:-80px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.55),transparent 68%)}.hero-panel h1{margin:5px 0 10px;font-size:clamp(34px,5vw,57px);line-height:1;letter-spacing:-.05em}.hero-panel>div:first-child{position:relative;z-index:2}.hero-panel>div:first-child>p:not(.eyebrow){color:#c8c1ba}.hero-actions{display:flex;gap:10px;margin-top:24px}.hero-orbit{position:relative;z-index:2;width:175px;height:175px;display:grid;place-content:center;text-align:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}.hero-orbit span{position:absolute;inset:14px;border:1px dashed rgba(251,146,60,.5);border-radius:50%;animation:spin 16s linear infinite}.hero-orbit strong{font-size:48px;line-height:1}.hero-orbit small{color:#c8c1ba}
@keyframes spin{to{transform:rotate(360deg)}}.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin:18px 0}.stat-card{padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.73);backdrop-filter:blur(12px)}.stat-card:hover{transform:translateY(-4px);border-color:rgba(249,115,22,.35);box-shadow:0 14px 28px rgba(45,30,18,.08)}.stat-card span,.stat-card small{display:block;color:var(--muted);font-size:10px}.stat-card strong{display:block;margin:7px 0 2px;font-size:29px}.stat-card.orange{background:#fff4eb}.stat-card.success{background:#ecfdf5}.stat-card.danger{background:#fff1f0}
.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.focus-list,.timeline-list{display:grid}.focus-item,.timeline-item{display:flex;align-items:center;gap:12px;padding:13px 5px;border-bottom:1px solid var(--line)}.focus-item:last-child,.timeline-item:last-child{border-bottom:0}.focus-item:hover,.timeline-item:hover{padding-left:10px;background:#fff8f2}.focus-item>span:nth-child(2),.timeline-item>span{display:grid;flex:1}.focus-item small,.timeline-item small{color:var(--muted);font-size:11px}.focus-item time{font-size:11px;font-weight:800}.focus-item time.overdue{color:var(--red)}.timeline-item time{width:44px;display:grid;place-items:center;padding:6px;border-radius:11px;background:var(--orange-soft);color:var(--orange-2)}.timeline-item time strong{font-size:18px;line-height:1}.timeline-item time span{font-size:9px;text-transform:uppercase}
.view-switch{display:flex;padding:4px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.7)}.view-switch a{padding:8px 14px;border-radius:9px;font-size:12px;font-weight:800}.view-switch a.active{background:var(--ink);color:#fff;box-shadow:0 6px 14px rgba(20,15,10,.15)}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:11px 14px}.month-nav{display:flex;align-items:center;gap:10px}.month-nav strong{min-width:145px;text-align:center}.calendar-board{padding:0;overflow:hidden}.calendar-weekdays,.calendar-cells,.calendar-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays{border-bottom:1px solid var(--line);background:#f6f3ef}.calendar-weekdays div{padding:10px 12px;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.calendar-week{position:relative;min-height:calc(76px + var(--week-rows) * 31px);border-bottom:1px solid var(--line)}.calendar-week:last-child{border-bottom:0}.calendar-cells{position:absolute;inset:0}.calendar-cell{padding:9px;border-right:1px solid var(--line);background:rgba(255,255,255,.58)}.calendar-cell:last-child{border-right:0}.calendar-cell>span{font-size:12px;font-weight:850}.calendar-cell.muted-month{background:rgba(239,235,230,.48);color:#aaa29a}.calendar-cell.today>.calendar-day-number{width:26px;height:26px;display:grid;place-items:center;margin:-4px;border-radius:50%;background:var(--orange);color:#fff}.calendar-cell.holiday{background:#fff1f0}.calendar-cell small{display:block;margin-top:5px;color:#b42318;font-size:8px;line-height:1.2}.calendar-bars{position:absolute;left:0;right:0;top:42px;gap:5px 0;padding:0 8px;pointer-events:none}.calendar-bar{height:25px;min-width:0;overflow:hidden;padding:3px 9px;border:1px solid var(--event-border);border-left-width:3px;border-radius:7px;background:var(--event-bg);color:var(--event-text);font-size:10px;font-weight:850;white-space:nowrap;text-overflow:ellipsis;text-align:left;cursor:pointer;pointer-events:auto}.calendar-bar:hover{filter:saturate(1.15);transform:translateY(-1px);box-shadow:0 7px 15px rgba(30,20,12,.1)}.calendar-bar.continues-before{border-radius:0 7px 7px 0}.calendar-bar.continues-after{border-radius:7px 0 0 7px}
.event-dialog{width:min(520px,calc(100vw - 32px));padding:25px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(20,15,10,.28)}.event-dialog::backdrop{background:rgba(20,16,12,.52);backdrop-filter:blur(4px)}.event-dialog h2{margin:14px 0 3px}.dialog-close{position:absolute;right:16px;top:14px;width:34px;height:34px;border:0;border-radius:9px;background:#f4f1ed;cursor:pointer;font-size:22px}.dialog-close:hover{background:var(--orange-soft);color:var(--orange-2)}
.timesheet-filter{display:flex;align-items:end;gap:10px;margin:12px 0 22px}.timesheet-print{padding:22px;border:1px solid #bbb4ac;border-radius:10px;background:#fff}.timesheet-title{display:flex;justify-content:space-between;gap:20px;padding-bottom:12px;border-bottom:2px solid #181512}.timesheet-title p{margin:0;color:var(--orange-2);font-size:11px;font-weight:900;letter-spacing:.15em}.timesheet-title h2{margin:2px 0}.timesheet-title>div:last-child{display:grid;text-align:right}.timesheet-title span{color:var(--muted);font-size:11px}.timesheet-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:13px 0}.timesheet-summary div{padding:9px 11px;border:1px solid #d9d4ce;border-radius:8px;background:#faf9f7}.timesheet-summary span{display:block;color:var(--muted);font-size:9px;font-weight:900;text-transform:uppercase}.timesheet-summary strong{font-size:20px}.table-scroll{overflow:auto}.timesheet-table{width:100%;min-width:900px;border-collapse:collapse;font-size:11px}.timesheet-table th,.timesheet-table td{padding:6px;border:1px solid #8f8881}.timesheet-table th{background:#eeeae5}.timesheet-input{width:100%;min-width:55px;padding:3px;border:1px solid transparent;background:transparent;outline:0}.timesheet-input:focus{border-color:var(--orange);background:#fff}.timesheet-table textarea{min-width:180px}.timesheet-holiday td{background:#2b2723;color:#fff}.timesheet-holiday .timesheet-input{color:#fff}
.archive-picker{display:grid;gap:5px}.archive-picker label{font-size:10px;font-weight:900;text-transform:uppercase}.archive-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(125deg,rgba(255,255,255,.83),rgba(255,240,228,.87))}.archive-hero span{color:var(--orange-2);font-size:11px;font-weight:900;text-transform:uppercase}.archive-hero h2{margin:3px 0;font-size:30px}.archive-hero p{margin:0;color:var(--muted)}.archive-hero>strong{font-size:44px;text-align:center}.archive-hero>strong small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}.archive-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 18px}.archive-summary div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.65)}.archive-summary .status-dot{grid-row:span 2}.archive-summary strong{font-size:20px;line-height:1}.archive-summary small{color:var(--muted)}
.back-link{display:inline-flex;align-items:center;gap:9px;margin-bottom:12px;color:var(--orange-2);font-size:14px;font-weight:800}.back-link .icon{width:30px;height:30px;padding:6px;border:1px solid #fed7aa;border-radius:9px;background:#fff4eb;box-sizing:border-box}.back-link:hover .icon{background:#f97316;border-color:#f97316;color:#fff}.heading-badges{display:flex;align-items:center;gap:8px;margin-top:12px}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.detail-main{min-height:320px}.detail-sidebar{position:sticky;top:90px}.detail-sidebar h2{margin-top:0}.detail-list{display:grid;gap:0;margin:15px 0}.detail-list>div{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}.detail-list dt{color:var(--muted);font-size:9px;font-weight:900;text-transform:uppercase}.detail-list dd{margin:0;font-size:12px;font-weight:750}.ticket-list{display:grid;gap:6px;margin:14px 0;padding:12px;border-radius:12px;background:var(--orange-soft);font-size:11px}.edit-dialog{position:relative}.edit-dialog>summary{list-style:none}.edit-dialog>summary::-webkit-details-marker{display:none}.edit-dialog-panel{position:absolute;z-index:70;right:0;top:50px;width:min(820px,90vw);padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 25px 70px rgba(30,20,12,.22)}.attachments{margin-top:16px}.upload-row{display:grid;grid-template-columns:1fr auto;gap:10px}.attachment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.attachment-card{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#fff}.attachment-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(40,25,12,.1)}.attachment-card img{width:100%;aspect-ratio:16/10;display:block;object-fit:cover}.attachment-card span{display:grid;padding:10px}.attachment-card small{color:var(--muted);font-size:10px}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.page-title h1,.page-title h3{margin:0}.team-inner-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:22px}.card-menu{position:relative}.card-menu>summary{list-style:none;cursor:pointer;font-weight:900}.card-menu>summary::-webkit-details-marker{display:none}.card-menu-panel{position:absolute;right:0;z-index:55;width:min(390px,85vw);padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 20px 50px rgba(25,15,8,.2)}
.login-page{min-height:100vh;background:#f6f2ed}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.login-intro{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,8vw,110px);overflow:hidden;background:#e6ccb2;color:#181512;border-right:1px solid rgba(45,30,15,.15)}.login-intro:before{display:none}.login-brand{position:absolute;top:36px;left:clamp(40px,8vw,110px);display:flex;align-items:center;gap:11px}.login-intro h1{position:relative;margin:10px 0 18px;font-size:clamp(42px,6vw,76px);line-height:.97;letter-spacing:-.055em;color:#181512}.login-intro h1 span{color:#b43b06}.login-intro>p:not(.eyebrow){max-width:570px;color:#382c22;font-size:16px;line-height:1.6;font-weight:550}.login-feature{position:relative;display:flex;align-items:center;gap:13px;max-width:520px;margin-top:18px;padding:13px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.05);backdrop-filter:blur(10px)}.login-feature>span{color:#fb923c;font-size:11px;font-weight:900}.login-feature div{display:grid}.login-feature small{color:#aaa39d}.login-panel{display:grid;place-items:center;padding:30px}.login-card{width:min(430px,100%);padding:34px;border:1px solid rgba(255,255,255,.82);border-radius:22px;background:rgba(255,255,255,.8);box-shadow:0 25px 70px rgba(40,25,12,.12);backdrop-filter:blur(16px)}.login-card h2{margin:4px 0;font-size:30px;letter-spacing:-.035em}.login-card>.muted{margin:0 0 24px}.password-field{position:relative}.password-field .input{padding-right:82px}.password-field button{position:absolute;right:7px;top:6px;height:30px;padding:0 10px;border:0;border-radius:7px;background:#f3f0ec;color:#5f574f;font-size:11px;font-weight:800;cursor:pointer}.check-row{display:flex;align-items:center;gap:8px;color:#5f574f;font-size:12px}.check-row input{accent-color:var(--orange)}.login-note{margin:18px 0 0;color:#8b837b;font-size:10px;text-align:center}
@media(max-width:1200px){.stat-grid{grid-template-columns:repeat(3,1fr)}.backlog-strip{grid-template-columns:repeat(4,260px)}.work-form{grid-template-columns:repeat(2,minmax(0,1fr))}.attachment-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:transform .22s ease}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.mobile-menu{display:grid;place-items:center}.container{padding:24px 16px 55px}.topbar{height:64px;padding:0 16px}.page-heading{align-items:flex-start;flex-direction:column}.heading-stats{width:100%;overflow:auto}.hero-panel{padding:28px}.hero-orbit{display:none}.dashboard-grid,.detail-layout,.team-inner-grid{grid-template-columns:1fr}.detail-sidebar{position:static}.kanban{grid-template-columns:repeat(4,280px)}.login-shell{grid-template-columns:1fr}.login-intro{display:none}.attachment-grid{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.calendar-toolbar{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.topbar form .btn span{display:none}.container{padding-inline:12px}.hero-panel{min-height:230px;padding:25px 20px}.stat-grid{grid-template-columns:repeat(2,1fr)}.work-form,.work-form.compact{grid-template-columns:1fr;width:100%}.field-wide{grid-column:auto}.filter-card{align-items:stretch;flex-direction:column}.filter-card .select{width:100%;max-width:none}.backlog-strip{grid-template-columns:repeat(4,82vw)}.archive-summary{grid-template-columns:repeat(2,1fr)}.archive-hero{align-items:flex-start;flex-direction:column}.attachment-grid{grid-template-columns:1fr}.upload-row{grid-template-columns:1fr}.timesheet-summary{grid-template-columns:repeat(2,1fr)}.edit-dialog-panel{position:fixed;inset:75px 10px auto;width:auto;max-height:80vh;overflow:auto}.login-panel{padding:16px}.login-card{padding:25px 20px}.page-heading h1{font-size:36px}}
@media print{.sidebar,.topbar,.page-heading,.timesheet-filter,.no-print,.alert{display:none!important}.main{margin:0}.container{width:100%;padding:0}.panel-slider{overflow:visible!important;height:auto!important}.panel-slider-track{display:block!important;transform:none!important}.calendar-page-slider .panel-slide[data-page-panel="calendar"]{display:none!important}.calendar-page-slider .panel-slide[data-page-panel="timesheet"]{display:block!important;width:100%!important}.timesheet-card{padding:0;border:0;box-shadow:none}.timesheet-card>.section-heading{display:none}.timesheet-print{padding:0;border:0}.timesheet-table{min-width:0;font-size:9px}.timesheet-table th,.timesheet-table td{padding:3px}.timesheet-summary div{border-radius:0}.timesheet-holiday td{background:#f1f5f9!important;color:#334155!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.timesheet-sunday td,.timesheet-holiday.is-sunday td{background:rgba(148,163,184,0.12)!important;color:#475569!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}@page{size:A4 landscape;margin:8mm}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Colorful Soft Workspace */
.workspace-breadcrumb{font-size:12px;color:var(--muted);display:flex;gap:9px;align-items:center}.workspace-breadcrumb .breadcrumb-root{flex:0 0 auto}.workspace-breadcrumb .breadcrumb-separator{color:#c5b8a6}.workspace-breadcrumb .breadcrumb-current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team-create{margin-bottom:24px}.team-create>summary{width:max-content;max-width:100%;list-style:none}.team-create>summary::-webkit-details-marker{display:none}
body{background:var(--paper);color:var(--ink);font-size:14px}
[hidden]{display:none!important}
:where(a,button,summary,input,select,textarea,[contenteditable]):focus-visible{outline:3px solid #c65313;outline-offset:3px}
.sidebar{background:#f5efe3;color:var(--ink);border-color:var(--line);backdrop-filter:none;padding:26px 18px}
.brand{flex-direction:column;align-items:flex-start;gap:9px;padding:0 14px 32px}
.brand-logo{display:block;width:132px;height:76px;object-fit:contain;object-position:left center}
.brand-caption{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.nav{gap:6px}.nav a{color:#746153;font-size:13px;font-weight:600;min-height:46px}
.nav a:hover{background:#ede4d6;color:var(--ink);transform:none}
.nav a.active{background:#ffe4cc;border-color:#f6d3b1;color:#8b380d;box-shadow:none}
.nav a.active .icon{color:#c35316}
.sidebar-foot{border-color:#dfd5c6;padding-top:20px}.sidebar-foot small{color:#796b60}.sidebar-foot .avatar{background:#eaded0;color:var(--ink)}
.topbar{background:rgba(255,253,248,.92);height:64px}
.sidebar-backdrop{position:fixed;inset:0;z-index:35;background:rgba(63,48,40,.25);border:0}
.container{padding:30px 30px 60px}.page-heading{align-items:center;margin-bottom:25px}.page-heading h1{font-size:32px;line-height:1.2;letter-spacing:-.035em;overflow-wrap:anywhere}.page-heading p{font-size:14px;line-height:1.6}
.page-heading>div:first-child{min-width:0}.eyebrow{font-weight:650!important;letter-spacing:.09em}
.card,.table-card{backdrop-filter:none;border-color:var(--line);box-shadow:var(--shadow)}
.btn{font-weight:650;min-height:42px}.btn:hover{transform:none;box-shadow:0 3px 9px #432f1910}.btn-primary{background:var(--orange);color:#482608;box-shadow:0 2px 4px #f9731620}.btn-primary:hover{background:#fb8c3b}.btn-dark{background:#f3e9dc;color:var(--ink);border-color:#e2d1bd}.btn-glass{background:#fffaf2;border-color:var(--line);color:var(--ink)}
.work-summary{display:grid;grid-template-columns:1.15fr repeat(4,1fr);gap:0;margin-bottom:24px;padding:18px 0;border-block:1px solid var(--line)}
.work-summary>div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 10px;padding:0 20px;border-left:1px solid var(--line)}
.work-summary>div:first-child{border:0;padding-left:0}.work-summary strong{font-size:25px;line-height:1.2;font-weight:650}.work-summary>div>span:last-child{grid-column:1/-1;font-size:12px;color:var(--muted)}.work-summary .summary-total{display:block}.summary-total strong{display:block;color:#ad440d;font-size:31px}.summary-total span{font-size:12px;color:var(--muted)}
.work-filters{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 16px;margin-bottom:24px;border-radius:14px;background:#fff;border:1px solid #ebdccb;box-shadow:0 3px 12px rgba(45,25,12,.04)}
.work-filters .filter-search{flex:1 1 280px;min-width:220px;height:42px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:10px;border:1px solid #d9d4ce;background:#fdfcfa;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.work-filters .filter-search:focus-within{border-color:#f97316;background:#fff;box-shadow:0 0 0 3px rgba(249,115,22,.14)}
.work-filters .filter-search .icon{width:16px;height:16px;color:var(--orange-2);flex-shrink:0}
.work-filters .filter-search input{width:100%;border:0;outline:0;background:transparent;font-size:13px;color:var(--ink)}
.work-filters [data-live-search-clear]{height:42px;min-height:42px;font-size:12px;padding:0 14px;border-radius:10px;border:1px solid #d9d4ce;background:#fff;color:var(--ink);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease}
.work-filters [data-live-search-clear]:hover{background:#fff4eb;border-color:#f7c79f;color:var(--orange-2)}
.work-filters [data-live-search-clear] .icon{width:14px;height:14px}
.work-filters .select{font-size:12px;font-weight:600;max-width:180px;flex:0 1 auto;height:42px;border-radius:10px;border:1px solid #d9d4ce;background-color:#fdfcfa;transition:border-color .2s ease,box-shadow .2s ease}
.work-filters .select:hover{border-color:#f8b884;background-color:#fff}
.work-filters .select:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.14)}
.filter-reset{font-size:12px;font-weight:700;color:var(--orange-2);padding:0 14px;height:42px;border-radius:10px;background:#fff4eb;border:1px solid #fed7aa;display:inline-flex;align-items:center;gap:6px;margin-left:auto;cursor:pointer;transition:all .15s ease}
.filter-reset:not(:disabled):hover{background:#f97316;color:#fff;border-color:#f97316;box-shadow:0 3px 8px rgba(249,115,22,.25)}
.filter-reset:disabled,.team-panel-toolbar [data-search-reset]:disabled,#historyResetBtn:disabled{color:#a8a19a;background:#f2f0ed;border-color:#e2ddd7;box-shadow:none;cursor:not-allowed;opacity:.7}
.filter-reset .icon{width:13px;height:13px}
.back-link.btn-dark{gap:8px;margin-bottom:12px;font-size:14px}
.back-link.btn-dark .icon{width:17px;height:17px;padding:0;border:0;border-radius:0;background:transparent}
.back-link.btn-dark:hover .icon{background:transparent;border-color:transparent;color:inherit}
.create-work:not([open]){display:none}.create-work{margin-bottom:24px;scroll-margin-top:85px}.create-work .summary-action{display:none}.create-work>summary{padding:13px 18px}.create-work .work-form{background:#fffefb}.work-form label{font-weight:600}.work-form{padding:18px;gap:18px}
.work-view-heading{margin:0 0 18px}.view-switch{width:max-content;gap:3px;background:#f3eee5;border:0;padding:4px}.view-switch a{display:flex;align-items:center;gap:7px;color:var(--muted);font-weight:600}.view-switch a.active{background:#fffdfa;color:var(--ink);box-shadow:0 1px 4px #432f1914}.view-switch .icon{width:16px;height:16px}
.backlog-section{margin-bottom:22px;border:1px solid var(--line);border-radius:13px;padding:13px 16px;background:#faf6ee}.backlog-section>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-weight:650}.backlog-section>summary>span{display:flex;align-items:center;gap:9px}.backlog-section>summary small{color:var(--muted);font-size:12px;font-weight:400}.backlog-section>summary:after{content:'+';font-size:20px;color:var(--muted)}.backlog-section[open]>summary:after{content:'−'}.backlog-section>summary small{margin-left:auto}
.backlog-strip{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;padding:8px 4px 14px;align-items:stretch;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.backlog-strip::-webkit-scrollbar{height:7px}
.backlog-strip::-webkit-scrollbar-track{background:#ede8df;border-radius:999px}
.backlog-strip::-webkit-scrollbar-thumb{background:#cfc5b4;border-radius:999px}
.backlog-strip::-webkit-scrollbar-thumb:hover{background:#f97316}
.backlog-strip .task-card{flex:0 0 270px;width:270px;min-width:270px;max-width:270px;scroll-snap-align:start;box-sizing:border-box}
.board-caption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:11px;margin-bottom:14px}
.kanban{grid-template-columns:repeat(4,minmax(235px,1fr));gap:16px;align-items:start;padding:0 0 14px}.kanban-column{min-width:235px;background:#f6f3ec;border:1px solid #ece7dd;padding:12px;border-radius:15px}.kanban-column>header{padding:2px 2px 16px;gap:8px}.kanban-column>header h2{margin:0;font-size:12px;line-height:1.4;font-weight:650}.kanban-column .count-pill{background:#ebe6dc;color:#736558;min-width:24px;height:24px;padding:0 7px}.task-list{gap:13px;min-height:110px}
.task-card{padding:16px;border:1px solid #6e53301c;border-radius:13px;box-shadow:0 3px 6px #4f382408;color:var(--ink);min-width:0;cursor:auto}.task-card[draggable=true]{cursor:grab}.task-card:hover{transform:none;border-color:#bca38a;box-shadow:0 4px 12px #4f382410}.task-title h3{margin:15px 0 8px;font-size:17px;line-height:1.4;letter-spacing:-.02em;font-weight:700;overflow-wrap:anywhere}.task-title:hover{color:#9a410d}.task-description{margin:0 0 14px;color:#796758;font-size:12px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.task-meta{display:flex;align-items:center;gap:9px;margin-bottom:15px;color:#786354;font-size:11px}.badge{font-weight:600}.task-owner{display:flex;align-items:center;gap:7px;font-size:12px;color:#655448;font-weight:500}.task-owner span{overflow-wrap:anywhere}.task-owner .icon{width:15px;height:15px}.task-foot{font-size:10px;border-color:#77583820;gap:8px;flex-wrap:wrap;color:#766253}.task-foot>span:last-child{display:flex;align-items:center;gap:4px}.task-foot .icon{width:13px;height:13px}.drag-handle{color:#8c7561}.status-chip{gap:5px;font-weight:600;font-size:10px;padding:4px 7px;border:1px solid #73503320;color:var(--ink)!important;background:#fffaf0cc!important;max-width:100%}.status-chip .icon{width:13px;height:13px}.status-chip.done{border-color:#58957570}.status-chip.in_progress{border-color:#d17a3c70}.status-chip.review{border-color:#f59e0b!important;background:#fffbeb!important;color:#b45309!important}.status-chip.review .icon{color:#d97706}.status-dot{box-shadow:none!important;width:8px;height:8px}.status-dot.todo{background:#b4a48e}.status-dot.in_progress{background:#f39442}.status-dot.review{background:#f59e0b!important;box-shadow:0 0 0 3px rgba(245,158,11,.3)!important}.status-dot.done{background:#80a988}
.task-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:8px;border-top:1px solid #77583820;font-size:11px;color:#695343;min-width:0}.task-actions .icon{width:15px;height:15px}.task-actions-left{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.task-actions-right{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0;min-width:0}.task-actions-right form{display:inline-flex;margin:0}
.task-detail-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 8px;min-height:30px;border:0!important;border-radius:7px;background:transparent!important;color:#695343!important;font-size:11px!important;font-weight:600!important;text-decoration:none;box-shadow:none!important;outline:none!important;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.task-detail-btn:hover{background:rgba(255,255,255,.65)!important;color:#ff5500!important}
.task-edit,.task-delete,.card-colors>summary{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 8px;min-height:30px;border-radius:7px;cursor:pointer;border:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;transition:background .15s ease,color .15s ease,transform .15s ease}
.task-edit{color:#695343!important;font-size:11px!important;font-weight:600!important}
.task-delete{color:#8d5143!important;font-size:11px!important;padding:5px 6px!important}
.task-edit:hover{background:rgba(255,255,255,.65)!important;color:#ff5500!important}
.task-delete:hover{background:#fdf2f0!important;color:#c0392b!important}
.card-colors>summary:hover{background:rgba(255,255,255,.65)!important}
.card-colors>summary{list-style:none}.card-colors>summary::-webkit-details-marker{display:none}.card-colors{position:relative}.quick-colors{display:grid;grid-template-columns:repeat(3,32px);gap:8px;padding:10px;margin-top:4px;background:#fffdf8;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}.card-colors[open]{align-self:flex-start}
.color-field{border:0;padding:0;margin:0;min-width:0}.color-field legend{font-size:12px;font-weight:600}.color-field p{margin:3px 0 8px}.color-options{display:flex;flex-wrap:wrap;gap:8px}.color-option{display:flex!important;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:#fff;font-size:12px;font-weight:550;transition:all .18s ease}.color-option:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(45,35,25,.07)}.color-option:has(input:checked){border-color:#ff5500!important;box-shadow:0 0 0 2px #ff5500!important;font-weight:700!important;background:#fff!important}.color-option.note-banana{background:#fff8e1}.color-option.note-peach{background:#fff1e6}.color-option.note-blush{background:#fdf0f5}.color-option.note-cloud{background:#edf6fd}.color-option.note-sage{background:#f0f7ec}.color-option.note-lavender{background:#f4f0fa}.color-option input{accent-color:var(--orange-2);margin:0}.color-swatch{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid #7b5f4938;flex-shrink:0}.quick-colors .color-swatch{width:32px;height:32px;padding:0;cursor:pointer;color:var(--ink)}.color-swatch[aria-pressed=true]{outline:2px solid #855834;outline-offset:2px}
.note-banana{background:#fff2c6!important}.note-peach{background:#ffe1cc!important}.note-blush{background:#f8dfe8!important}.note-cloud{background:#dfeef9!important}.note-sage{background:#e4efda!important}.note-lavender{background:#eae2f5!important}
.work-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;align-items:start;padding-top:5px}.work-empty{padding:35px;min-height:240px;gap:9px;background:#faf7ef;margin-bottom:22px}.work-empty strong{font-size:18px}.work-empty>.icon{width:30px;height:30px}.work-empty .btn{margin-top:8px}.column-empty{border-color:#ded6c8;color:#8b7c6e;font-size:11px;min-height:95px}
.rich-toolbar{flex-wrap:wrap;padding:8px;gap:4px;background:#faf7f0}.rich-toolbar button{display:inline-flex;align-items:center;gap:5px;font-size:12px;min-height:36px;font-weight:500;padding:6px 9px;color:var(--ink)}.rich-toolbar .icon{width:15px;height:15px}.rich-toolbar [aria-pressed=true]{background:#ffe7d3;border-color:#ebc5a5;color:#843d15}.rich-content,.rich-output{font-size:14px;line-height:1.75;color:var(--ink);overflow-wrap:anywhere}.rich-content{min-height:160px;padding:18px}.rich-content h2,.rich-output h2{font-size:24px;font-weight:700;line-height:1.35;margin:24px 0 12px}.rich-content h3,.rich-output h3{font-size:18px;font-weight:600;line-height:1.5;margin:20px 0 10px}.rich-content p,.rich-output p{margin:12px 0}.rich-content>:first-child,.rich-output>:first-child{margin-top:0}.rich-content ul,.rich-output ul,.rich-content ol,.rich-output ol{padding-left:24px;margin:14px 0}.rich-content li,.rich-output li{padding-left:3px;margin:6px 0}.rich-content p:has(>input[type=checkbox]),.rich-output p:has(>input[type=checkbox]){padding-left:27px;position:relative;min-height:26px;margin:12px 0}.rich-content input[type=checkbox],.rich-output input[type=checkbox]{appearance:none;display:inline-block;width:17px;height:17px;border:1.5px solid #958371;border-radius:4px;background:#fff;vertical-align:middle;margin:0 9px 0 0;position:relative;cursor:pointer}.rich-content p>input[type=checkbox],.rich-output p>input[type=checkbox]{position:absolute;left:0;top:5px}.rich-content input[type=checkbox]:checked,.rich-output input[type=checkbox]:checked{background:#ffe2c6;border-color:#a15320}.rich-content input[type=checkbox]:checked:after,.rich-output input[type=checkbox]:checked:after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #75421f;border-width:0 2px 2px 0;transform:rotate(45deg)}.rich-output input:disabled{opacity:1;cursor:default}
.section-heading h2{font-size:19px;font-weight:650}.section-kicker{font-size:10px!important;font-weight:600!important;letter-spacing:.06em}.heading-badges{flex-wrap:wrap}.detail-sidebar h2{font-size:19px}.detail-list dt{font-size:11px;font-weight:600;text-transform:none}.detail-list dd{font-size:13px;font-weight:500}.detail-list>div{padding:12px 0}.detail-main{padding:25px}.edit-dialog-panel{max-height:calc(100vh - 150px);overflow:auto;box-shadow:0 12px 40px #432f1920}.attachments .section-heading h2{font-size:18px}.attachment-card:hover{transform:none}
.archive-hero{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 0 18px;border-bottom:1px solid var(--line)}.archive-hero h2{font-size:21px}.archive-hero>strong{font-size:28px}.archive-hero p{font-size:12px}.archive-summary div{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0}.archive-summary div:last-child{border:0}
.stat-grid{gap:0;border-block:1px solid var(--line);margin:26px 0;padding:18px 0}.stat-card,.stat-card.orange,.stat-card.success,.stat-card.danger{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;padding:0 18px;backdrop-filter:none}.stat-card:first-child{padding-left:0}.stat-card:last-child{border:0}.stat-card:hover{transform:none;box-shadow:none;background:#fff8ed}.stat-card span{font-size:12px}.stat-card strong{font-size:25px;font-weight:650}.stat-card small{font-size:11px}.focus-item strong,.timeline-item>span>strong{font-size:14px;font-weight:650}.focus-item,.timeline-item{padding-block:17px}.focus-item{border-radius:10px;padding-inline:12px;margin-bottom:8px;border:1px solid #73503318}.focus-item .status-chip{font-size:10px}.focus-item:hover,.timeline-item:hover{padding-left:12px}
.login-page{background:var(--paper)}.login-card{background:#fffefb;border-color:var(--line);box-shadow:var(--shadow);backdrop-filter:none}
.timesheet-holiday td{background:#f3e9dc;color:var(--ink)}.timesheet-holiday .timesheet-input{color:var(--ink)}
@media(min-width:1500px){.work-filters .filter-search{flex-basis:240px}.kanban{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1200px){.work-summary>div{padding-inline:12px}.work-summary>div>span:last-child{font-size:11px}.stat-card{padding:12px 18px}.stat-card:first-child{padding:12px 18px}.stat-grid{row-gap:16px}}
@media(max-width:900px){.container{padding:24px 18px 50px}.page-heading{align-items:flex-start;gap:15px}.page-heading h1{font-size:30px}.work-summary{grid-template-columns:repeat(4,1fr);gap:15px 0}.work-summary .summary-total{grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:13px;display:flex;align-items:center;gap:10px}.work-summary>div:nth-child(2){border:0;padding-left:0}.sidebar-backdrop[hidden]{display:none}.sidebar{overflow-y:auto}.main{min-width:0}.timesheet-filter{flex-wrap:wrap}.timesheet-filter .field{flex:1 1 160px}.calendar-toolbar{align-items:stretch}.login-card .brand-logo{margin-bottom:15px}}
@media(max-width:600px){.container{padding:22px 14px 45px}.topbar{padding:0 14px;gap:6px}.mobile-menu{min-width:40px;min-height:40px;color:var(--ink)}.page-heading h1{font-size:28px}.page-heading .btn-primary{width:100%}.work-summary{grid-template-columns:repeat(2,1fr);gap:18px 0;margin-bottom:20px}.work-summary>div:nth-child(4){border:0;padding-left:0}.work-summary strong{font-size:23px}.work-summary>div>span:last-child{font-size:11px}.work-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.work-filters .filter-search{grid-column:1/-1;min-width:0}.work-filters .select{max-width:none;width:100%;font-size:12px}.work-filters .btn{width:100%}.kanban{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;gap:22px}.kanban-column{min-width:0}.kanban-column>header h2{font-size:13px}.task-list{grid-template-columns:1fr;min-height:0}.task-card{padding:18px}.task-title h3{font-size:18px}.task-actions{gap:10px}.task-edit,.task-delete,.card-colors>summary{min-height:40px}.work-card-grid{grid-template-columns:minmax(0,1fr)}.backlog-strip{display:flex;overflow-x:auto;gap:12px;padding-bottom:12px}.backlog-strip .task-card{flex:0 0 min(280px,82vw);width:min(280px,82vw);min-width:min(280px,82vw);max-width:min(280px,82vw)}.backlog-section>summary{flex-wrap:wrap}.backlog-section>summary small{font-size:10px;margin-left:0}.work-view-heading{gap:8px}.work-view-heading>span{font-size:10px}.view-switch a{padding:8px 10px}.board-caption{font-size:10px}.work-empty{padding:26px 16px}.color-options{gap:7px}.color-option{padding:8px}.work-form .field-wide{grid-column:1/-1}.rich-toolbar{gap:3px}.rich-toolbar button{font-size:11px;padding:5px 6px}.rich-content{padding:14px}.detail-main{padding:19px}.edit-dialog-panel{position:fixed;inset:74px 10px auto;max-height:calc(100dvh - 90px)}.edit-dialog-panel .work-form{padding:12px}.heading-badges .status-chip{font-size:11px}.stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{gap:22px}.focus-item{flex-wrap:wrap}.focus-item .status-chip{margin-left:20px}.section-heading h2{font-size:18px}.archive-hero{gap:12px}.timesheet-print{padding:12px}.timesheet-title{flex-direction:column}.timesheet-title>div:last-child{text-align:left}.upload-row{grid-template-columns:1fr}.page-title{flex-wrap:wrap}.team-inner-grid{min-width:0}.team-inner-grid .table{display:block;overflow:auto}}
@media(min-width:901px){.sidebar-backdrop{display:none!important}}
.team-inner-grid>section{min-width:0}.card-menu>summary{display:grid;place-items:center;min-width:38px;min-height:38px;border:1px solid var(--line);border-radius:9px;color:var(--muted)}.card-menu>summary:hover{background:var(--orange-soft)}
.team-inner-grid .table th,.team-inner-grid .table td,.card>.table th,.card>.table td{min-width:110px}
@media(max-width:900px){.team-inner-grid{grid-template-columns:minmax(0,1fr)}.card>.table,.team-inner-grid .table{display:block;max-width:100%;overflow:auto}.card-menu-panel{position:fixed;inset:85px 14px auto;width:auto;max-height:calc(100dvh - 110px);overflow:auto}.team-inner-grid .inline-form{min-width:0}.team-inner-grid .inline-form>.select{max-width:100%}}
@media(max-width:600px){.task-actions{flex-wrap:wrap}.card-colors[open]{flex-basis:100%;order:3}.card-colors[open]>summary{justify-content:flex-start}.quick-colors{display:flex;flex-wrap:wrap;width:max-content;max-width:100%}.quick-colors .color-swatch{width:34px;height:34px}}

/* ==========================================================================
   Sidebar Collapsible (Desktop)
   ========================================================================== */
.sidebar{transition:width .26s cubic-bezier(.4,0,.2,1),padding .26s cubic-bezier(.4,0,.2,1);overflow-x:hidden;white-space:nowrap}
.main{transition:margin-left .26s cubic-bezier(.4,0,.2,1)}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px 24px}
.brand-row .brand{padding:0}
.sidebar-collapse-btn{display:grid;place-items:center;width:32px;height:32px;border:0;background:transparent;color:var(--muted);cursor:pointer;flex-shrink:0;border-radius:50%;transition:color .2s ease,transform .2s ease,filter .2s ease}
.sidebar-collapse-btn:hover{color:#ff6b2b;filter:drop-shadow(0 0 7px rgba(255,107,43,.65));transform:scale(1.15)}
.sidebar-collapse-btn svg{transition:transform .26s ease}
.desktop-sidebar-toggle{display:none}

@media(min-width:901px){
    .sidebar-collapsed .sidebar{width:72px;padding:24px 10px}
    .sidebar-collapsed .main{margin-left:72px}
    .sidebar-collapsed .brand-row{flex-direction:column;align-items:center;gap:12px;padding:0 0 20px}
    .sidebar-collapsed .brand{align-items:center}
    .sidebar-collapsed .brand-caption{display:none!important}
    .sidebar-collapsed .brand-logo{width:36px;height:36px;object-position:center}
    .sidebar-collapsed .sidebar-collapse-btn svg{transform:rotate(180deg)}
    .sidebar-collapsed .nav a{padding:12px 0;justify-content:center;position:relative}
    .sidebar-collapsed .nav a span{display:none!important}
    .sidebar-collapsed .nav a .icon{margin:0}
    .sidebar-collapsed .sidebar-foot,
    html.sidebar-collapsed .sidebar-foot,
    #appShell.sidebar-collapsed .sidebar-foot{justify-content:center!important;padding:15px 0 0!important;gap:0!important}
    .sidebar-collapsed .sidebar-foot .avatar{margin:0 auto!important}
    .sidebar-collapsed .sidebar-user-info,
    html.sidebar-collapsed .sidebar-user-info,
    #appShell.sidebar-collapsed .sidebar-user-info{display:none!important}
    .sidebar-collapsed .nav a:hover::after{content:attr(title);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);background:rgba(25,20,16,.94);color:#fff;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;z-index:99;box-shadow:0 6px 18px rgba(0,0,0,.2);pointer-events:none}
}
@media(max-width:900px){
    .sidebar-collapse-btn{display:none}
    .brand-row{padding:0 0 24px}
}

/* ==========================================================================
   Hover States (Warm Theme Cohesive)
   ========================================================================== */
.btn-logout .icon,.btn-logout:hover .icon{color:inherit}
.btn-light[data-modal-close]:hover,.btn-cancel:hover{background:#fdf2f0!important;color:#c0392b!important;border-color:#f5c6cb!important}
.modal-close:hover{background:#fdf2f0!important;color:#c0392b!important}
.task-delete:hover{background:#fdf2f0!important;color:#c0392b!important}

/* ==========================================================================
   Modern Summary Cards & Vibrant Progress Bar
   ========================================================================== */
.summary-section{display:grid;gap:14px;margin-bottom:26px}
.summary-progress-card{background:#ffffff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;box-shadow:0 2px 8px rgba(45,35,25,.04);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.summary-progress-card::before{display:none!important}
.progress-info{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.progress-title-wrap{display:flex;flex-direction:column;gap:2px}
.progress-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#ff5500}
.progress-title-wrap h3{margin:0;font-size:19px;font-weight:750;color:var(--ink)}
.progress-stats{display:flex;align-items:baseline;gap:12px}
.progress-number{font-size:32px;font-weight:850;line-height:1;color:var(--ink)}
.progress-caption{font-size:13px;color:var(--muted);font-weight:550}
.progress-track{width:100%;height:12px;background:#f0eae0;border-radius:999px;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.progress-fill{height:100%;background:linear-gradient(90deg,#ff4d00 0%,#ff9500 45%,#00c853 100%);border-radius:999px;box-shadow:0 2px 10px rgba(255,77,0,.35);transition:width .7s cubic-bezier(.16,1,.3,1);position:relative}
.progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 100%);border-radius:999px}

.summary-cards-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.summary-stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;align-items:center;gap:14px;box-shadow:0 2px 6px rgba(45,35,25,.03);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.summary-stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(45,35,25,.08);border-color:#d4c8b9}
.stat-card-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:#f7f3ed;color:var(--ink);transition:transform .18s ease}
.summary-stat-card:hover .stat-card-icon{transform:scale(1.06)}
.summary-stat-card.total .stat-card-icon{background:#faece5;color:#ad440d}
.summary-stat-card.status-todo .stat-card-icon{background:#f5efe6;color:#857565}
.summary-stat-card.status-in_progress .stat-card-icon{background:#fef0e4;color:#d9651a}
.summary-stat-card.status-review .stat-card-icon{background:#f3eefa;color:#7e57c2}
.summary-stat-card.status-done .stat-card-icon{background:#e8f5e9;color:#2e7d32}
.stat-card-content{display:flex;flex-direction:column;min-width:0}
.stat-card-content strong{font-size:24px;font-weight:750;line-height:1.1;color:var(--ink)}
.summary-stat-card.total .stat-card-content strong{color:#ad440d}
.summary-stat-card.status-done .stat-card-content strong{color:#2e7d32}
.stat-card-content span{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:1100px){
    .summary-cards-grid{grid-template-columns:repeat(3,1fr)}
    .summary-stat-card.total{grid-column:span 1}
}
@media(max-width:700px){
    .summary-cards-grid{grid-template-columns:repeat(2,1fr)}
    .summary-stat-card.total{grid-column:1/-1}
    .progress-stats{flex-direction:column;align-items:flex-start;gap:3px}
    .progress-number{font-size:26px}
    .progress-title-wrap h3{font-size:17px}
}

/* Stable drag feedback: no continuous movement that makes cards appear to shake. */
.task-card.dragging{
    opacity:.72!important;
    animation:none!important;
    transform:none!important;
    box-shadow:0 12px 24px rgba(45,35,25,.14),0 0 0 2px rgba(249,115,22,.55)!important;
    cursor:grabbing!important;
    z-index:2!important;
}
.board-dragging .task-card:not(.dragging){opacity:1;filter:none}
.drag-over-list{background:rgba(249,115,22,.055)!important;border-radius:14px!important;outline:1px dashed rgba(249,115,22,.65)!important;outline-offset:-1px!important}
.task-drop-placeholder{min-height:72px;border:1px dashed rgba(249,115,22,.62);border-radius:12px;background:rgba(255,247,237,.76);pointer-events:none}

/* Rich Content Header Spacing & Layout */
.rich-content h2,.rich-output h2{margin:12px 0 2px!important;font-size:20px!important;font-weight:750!important;line-height:1.25!important}
.rich-content h2 + *,.rich-output h2 + *{margin-top:2px!important}
.rich-content p,.rich-output p{margin:3px 0 6px!important;line-height:1.6!important}
.rich-content ul,.rich-output ul,.rich-content ol,.rich-output ol{margin:3px 0 6px!important;padding-left:22px!important}
.rich-content li,.rich-output li{margin:2px 0!important}
.rich-content p:has(>input[type=checkbox]),.rich-output p:has(>input[type=checkbox]){padding-left:26px!important;position:relative!important;min-height:24px!important;margin:3px 0 4px!important}
.rich-content p>input[type=checkbox],.rich-output p>input[type=checkbox]{position:absolute!important;left:0!important;top:3px!important}

/* ==========================================================================
   Modals (Tambah & Ubah Pekerjaan Dialogs)
   ========================================================================== */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(20,16,13,.48);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px;animation:modalFadeIn .2s cubic-bezier(.16,1,.3,1)}
.modal-overlay[hidden]{display:none!important}
.modal-card{background:#fff;border-radius:20px;width:100%;max-width:680px;max-height:calc(100vh - 44px);display:flex;flex-direction:column;box-shadow:0 25px 60px -15px rgba(20,16,13,.35),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;animation:modalSlideUp .25s cubic-bezier(.16,1,.3,1)}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line);background:#faf7f2}
.modal-header h2{margin:0;font-size:20px;font-weight:700;color:var(--ink)}
.modal-header p{margin:4px 0 0;color:var(--muted);font-size:13px}
.modal-close{background:transparent;border:0;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:all .15s;flex-shrink:0}
.modal-form{display:flex;flex-direction:column;min-height:0;flex:1;margin:0;padding:0}
.modal-body{padding:20px 24px;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-height:calc(100vh - 180px)}
.modal-footer{padding:16px 24px;border-top:1px solid var(--line);background:#faf7f2;display:flex;align-items:center;justify-content:flex-end;gap:12px}
body.modal-open{overflow:hidden}

/* Primary actions keep strong contrast across icons and nested labels. */
.btn-primary,.btn-primary:hover,.btn-primary:focus-visible{color:#fff!important}
.btn-primary *{color:inherit!important;stroke:currentColor}

/* Work view switch and no-refresh horizontal transition. */
.view-switch button{display:flex;align-items:center;gap:7px;padding:8px 14px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.view-switch button:hover{color:var(--ink);background:rgba(255,255,255,.62)}
.view-switch button.active{background:#fffdfa;color:var(--ink);box-shadow:0 1px 4px #432f1914}
.work-slider{position:relative;overflow:hidden;transition:height .42s cubic-bezier(.22,1,.36,1)}
.work-slider-track{display:flex;width:100%;align-items:flex-start;transform:translate3d(0,0,0);transition:transform .46s cubic-bezier(.22,1,.36,1);will-change:transform}
.work-slider[data-view="list"] .work-slider-track{transform:translate3d(-100%,0,0)}
.work-slide{flex:0 0 100%;width:100%;min-width:0}
.work-slide[aria-hidden="true"]{pointer-events:none}
.work-slide[aria-hidden="false"]{pointer-events:auto}

/* Unsaved changes confirmation sits above the form being protected. */
.confirm-modal{z-index:1100;background:rgba(20,16,13,.38)}
.confirm-modal-card{max-width:455px;padding:26px;display:grid;grid-template-columns:auto 1fr;gap:15px 16px;border-radius:18px;background:rgba(255,253,250,.98)}
.confirm-modal-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#fff0e4;color:var(--orange-2)}
.confirm-modal-icon .icon{width:22px;height:22px}
.confirm-modal-copy h2{margin:1px 0 6px;font-size:19px;color:var(--ink)}
.confirm-modal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:5px}
.confirm-modal-actions.standard-confirm-actions{justify-content:flex-start;gap:12px;margin-top:8px}

/* Calendar and timesheet: clearer hierarchy for non-technical users. */
.calendar-view-switch .icon{width:16px;height:16px}
.calendar-overview{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:14px;padding:24px 26px;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,#171310,#2b211a);color:#fff;box-shadow:0 12px 30px rgba(35,23,14,.14)}
.calendar-overview::after{content:'';position:absolute;right:-70px;top:-105px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.34),transparent 68%);pointer-events:none}
.calendar-overview-copy{position:relative;z-index:1}
.calendar-overview-copy .section-kicker{color:#ffb27b!important}
.calendar-overview-copy h2{margin:4px 0 5px;font-size:25px;color:#fff}
.calendar-overview-copy p{margin:0;color:rgba(255,255,255,.66);font-size:12px}
.calendar-overview-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(88px,1fr));min-width:min(100%,330px);border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07);backdrop-filter:blur(8px)}
.calendar-overview-stats div{padding:13px 16px;border-right:1px solid rgba(255,255,255,.12)}
.calendar-overview-stats div:last-child{border-right:0}
.calendar-overview-stats span{display:block;color:rgba(255,255,255,.58);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.calendar-overview-stats strong{display:block;margin-top:3px;color:#fff;font-size:22px}
.calendar-toolbar{border-radius:14px;box-shadow:0 4px 16px rgba(45,35,25,.05)}
.calendar-toolbar .filter-inline{justify-content:flex-end}
.calendar-toolbar .filter-inline .select{width:180px}
.calendar-pic-filter{width:220px}
.calendar-pic-filter>summary{min-height:42px;padding-block:8px}
.calendar-pic-summary{display:flex;align-items:center;gap:7px;min-width:0}
.calendar-pic-summary .icon{width:15px;height:15px;flex:0 0 auto;color:var(--orange-2)}
.calendar-pic-summary [data-pic-summary]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-pic-filter[open] .assignee-menu{position:absolute;z-index:70;top:calc(100% + 7px);right:0;left:auto;width:min(330px,calc(100vw - 32px));max-height:330px;margin:0;border:1px solid var(--line);box-shadow:0 18px 45px rgba(30,20,12,.17)}
.calendar-pic-filter .assignee-options-scroll{margin:0;border:0;min-width:0}
.calendar-pic-filter .assignee-menu-footer{gap:8px}
.month-nav .icon-link{background:#f6f0e8;border:1px solid transparent}
.month-nav .icon-link:hover{background:#fff0e4;border-color:#f2c7a8;color:var(--orange-2)}
.calendar-legend{display:flex;align-items:center;flex-wrap:wrap;gap:9px 18px;margin:3px 2px 12px;color:var(--muted);font-size:10px;font-weight:650}
.calendar-legend span{display:inline-flex;align-items:center;gap:6px}
.calendar-legend .status-dot{width:7px;height:7px}
.calendar-legend .holiday-legend{margin-left:auto}
.holiday-legend i{width:17px;height:17px;display:grid;place-items:center;flex:none;border-radius:4px;background:#b91c1c;border:1px solid #991b1b;font-style:normal;box-sizing:border-box}
.holiday-legend i::after{content:"✓";color:#fff;font-size:12px;font-weight:900;line-height:1}
.calendar-legend button.holiday-legend{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #efc9c5;border-radius:8px;background:#fff1f0;color:#8f3733;font:inherit;font-weight:700;cursor:pointer}
.calendar-legend button.holiday-legend:hover{background:#fee2e2;border-color:#e8aaa4}
.calendar-legend button.holiday-legend[aria-pressed="false"]{background:#f2f0ed;border-color:#e2ddd7;color:var(--muted)}
.calendar-legend button.holiday-legend[aria-pressed="false"] i{background:#fff;border-color:#a8a19a}
.calendar-legend button.holiday-legend[aria-pressed="false"] i::after{content:""}
.calendar-legend button.holiday-legend:focus-visible{outline:2px solid #a94712;outline-offset:2px}
.calendar-board.holidays-hidden [data-calendar-holiday-name]{display:none!important}
.calendar-board{border-radius:16px;box-shadow:0 8px 24px rgba(45,35,25,.06)}
.calendar-weekdays{background:#f4eee6}
.calendar-weekdays div{text-align:center;letter-spacing:.08em}
.calendar-cell{transition:background .18s ease}
.calendar-cell:hover{background:#fffaf3}
.calendar-bar{transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}

.timesheet-card{padding:0;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 9px 28px rgba(45,35,25,.07)}
.timesheet-control-panel{padding:24px 26px 21px;background:linear-gradient(145deg,#fffdfa,#f8f1e8);border-bottom:1px solid var(--line)}
.timesheet-control-panel .section-heading{margin-bottom:17px}
.timesheet-control-panel .section-heading p{max-width:620px;margin-top:5px}
.timesheet-control-panel .btn-dark{display:inline-flex;align-items:center;gap:7px;background:#171310;color:#fff;border-color:#171310}
.timesheet-control-panel .btn-dark:hover{background:#2c231c;color:#fff}
.timesheet-control-panel .btn-dark .icon{width:16px;height:16px}
.timesheet-filter{display:grid;grid-template-columns:minmax(180px,240px) minmax(180px,240px) auto;align-items:end;gap:12px;margin:0;padding:15px;border:1px solid #e5d8c8;border-radius:13px;background:rgba(255,255,255,.75)}
.timesheet-filter .btn{min-width:112px}
.timesheet-print{margin:22px 26px 26px;padding:24px;border-color:#ddd3c8;border-radius:14px;box-shadow:0 3px 12px rgba(45,35,25,.04)}
.timesheet-title{align-items:flex-end;padding-bottom:16px}
.timesheet-title h2{font-size:24px;letter-spacing:-.025em}
.timesheet-summary{gap:10px;margin:17px 0}
.timesheet-summary div{position:relative;overflow:hidden;padding:12px 14px;border:1px solid #e3dbd2;border-radius:11px;background:#fff}
.timesheet-summary div::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#c3b7aa}
.timesheet-summary div:nth-child(1)::before{background:#3d9b63}
.timesheet-summary div:nth-child(2)::before{background:#d49a35}
.timesheet-summary div:nth-child(3)::before{background:#cf5b4d}
.timesheet-summary div:nth-child(4)::before{background:#83756a}
.timesheet-summary div:nth-child(5)::before{background:var(--orange)}
.timesheet-summary strong{font-size:23px;color:var(--ink)}
.timesheet-table{border-collapse:separate;border-spacing:0;border:1px solid #d8cec4;border-radius:10px;overflow:hidden}
.timesheet-table th,.timesheet-table td{border:0;border-right:1px solid #e2dad2;border-bottom:1px solid #e2dad2;padding:8px}
.timesheet-table th:last-child,.timesheet-table td:last-child{border-right:0}
.timesheet-table tbody tr:last-child td{border-bottom:0}
.timesheet-table th{position:sticky;top:0;z-index:1;padding-block:10px;background:#302820;color:#fff;font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.timesheet-table tbody tr:nth-child(even):not(.timesheet-holiday) td{background:#fcfaf7}
.timesheet-table tbody tr:hover td{background:#fff5eb}
.timesheet-input{border-radius:6px;transition:background .15s ease,box-shadow .15s ease}
.timesheet-input:focus{border-color:transparent;box-shadow:0 0 0 2px rgba(249,115,22,.28)}

@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:600px){
    .modal-overlay{padding:10px}
    .modal-card{max-height:calc(100vh - 20px);border-radius:16px}
    .modal-header{padding:16px 18px}
    .modal-header h2{font-size:18px}
    .modal-body{padding:16px 18px;grid-template-columns:1fr;gap:14px}
    .modal-footer{padding:14px 18px}
    .view-switch button{padding:8px 10px}
    .confirm-modal-card{padding:21px;grid-template-columns:1fr}
    .confirm-modal-icon{width:40px;height:40px}
    .confirm-modal-actions{display:grid;grid-template-columns:1fr;margin-top:2px}
    .confirm-modal-actions .btn{width:100%}
}

@media(max-width:900px){
    .calendar-overview{align-items:flex-start;flex-direction:column}
    .calendar-overview-stats{width:100%}
    .calendar-legend .holiday-legend{margin-left:0}
    .timesheet-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
    .timesheet-filter .btn{grid-column:1/-1}
}
@media(max-width:600px){
    .calendar-overview{padding:21px 18px}
    .calendar-overview-stats{min-width:0}
    .calendar-overview-stats div{padding:11px 9px}
    .calendar-overview-stats strong{font-size:19px}
    .calendar-toolbar .filter-inline{display:grid;grid-template-columns:1fr;width:100%}
    .calendar-toolbar .select,.calendar-toolbar .btn,.calendar-pic-filter{width:100%;max-width:none}
    .calendar-pic-filter[open] .assignee-menu{position:relative;top:auto;right:auto;width:100%;margin-top:7px}
    .timesheet-control-panel{padding:20px 16px}
    .timesheet-filter{grid-template-columns:1fr}
    .timesheet-filter .btn{grid-column:auto}
    .timesheet-print{margin:14px;padding:14px}
}

/* ==========================================================================
   Modal Tab Bar & Panes (Manajemen Tim)
   ========================================================================== */
.modal-tab-bar{display:flex;background:#f5efe6;padding:6px 12px;gap:8px;border-bottom:1px solid var(--line);overflow-x:auto}
.modal-tab-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--muted);background:transparent;border:0;border-radius:10px;cursor:pointer;white-space:nowrap;transition:all .18s ease}
.modal-tab-btn:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.modal-tab-btn.active{color:var(--ink);background:#fff;box-shadow:0 2px 6px rgba(45,35,25,.08)}
.modal-tab-panes{display:flex;flex-direction:column;flex:1;min-height:0}
.modal-tab-pane{display:none;flex-direction:column;flex:1;min-height:0}
.modal-tab-pane.active{display:flex}

/* ==========================================================================
   Google Drive Attachments
   ========================================================================== */
.attachment-section{grid-column:1/-1;margin-top:4px}
.attachment-label{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;font-weight:600;font-size:13px;color:var(--ink)}
.attachment-label small{font-weight:400;font-size:12px}
.existing-attachments-wrap{margin-top:14px}
.attachment-subhead{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.attachment-items-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.attachment-item-card{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 3px rgba(45,35,25,.03);transition:all .18s ease}
.attachment-item-card:hover{border-color:#d4c8b9;box-shadow:0 3px 8px rgba(45,35,25,.06)}
.attachment-thumb{width:38px;height:38px;border-radius:8px;overflow:hidden;flex-shrink:0;display:grid;place-items:center;background:#f7f3ed}
.attachment-thumb img{width:100%;height:100%;object-fit:cover}
.doc-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:8px}
.doc-icon.pdf{background:#fee2e2;color:#dc2626}
.doc-icon.xls{background:#dcfce7;color:#16a34a}
.doc-icon.doc{background:#dbeafe;color:#2563eb}
.doc-icon.img{background:#ffedd5;color:#ea580c}
.doc-icon.large{width:48px;height:48px}

.attachment-info{display:flex;flex-direction:column;min-width:0;flex:1}
.attachment-name{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attachment-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-top:2px}
.drive-link{display:inline-flex;align-items:center;gap:3px;color:#ff5500;text-decoration:none;font-weight:600}
.drive-link:hover{text-decoration:underline}
.drive-link svg{width:13px;height:13px}
.btn-delete-att,.btn-delete-icon{background:transparent;border:0;color:var(--muted);width:28px;height:28px;border-radius:6px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:all .15s ease}
.btn-delete-att:hover,.btn-delete-icon:hover{background:#fee2e2;color:#dc2626}

.attachment-preview-box{width:52px;height:52px;border-radius:10px;overflow:hidden;flex-shrink:0;display:grid;place-items:center;background:#f7f3ed}
.attachment-preview-box img{width:100%;height:100%;object-fit:cover}
.attachment-meta-block{display:flex;flex-direction:column;min-width:0;flex:1}
.attachment-meta-block strong{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attachment-actions-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.drive-link-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#c2410c;background:#ffedd5;padding:3px 8px;border-radius:6px;text-decoration:none;transition:background .15s ease}
.drive-link-badge:hover{background:#fed7aa}

/* ==========================================================================
   Event Details Modal (Calendar Page)
   ========================================================================== */
.event-modal-card{max-width:540px}
.event-modal-header{background:#fff;padding-bottom:14px}
.event-header-badges{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.event-title-heading{margin:0;font-size:20px;font-weight:750;color:var(--ink);line-height:1.3}
.event-modal-body{display:flex;flex-direction:column;gap:16px;padding:20px 24px}
.event-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.event-meta-box{background:#faf7f2;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.meta-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:5px}
.meta-label svg{width:14px;height:14px}
.meta-value{font-size:14px;color:var(--ink);font-weight:700}
.event-desc-box{display:flex;flex-direction:column;gap:8px}
.event-desc-content{background:#faf7f2;border:1px solid var(--line);border-radius:12px;padding:14px;max-height:180px;overflow-y:auto;font-size:13px;line-height:1.5}
.event-modal-footer{display:flex;justify-content:space-between}

/* ==========================================================================
   Responsive Refinements (Mobile <=600px, Tablet 600-900px, Desktop >900px)
   ========================================================================== */
@media(max-width:900px){
    .attachment-items-grid{grid-template-columns:1fr}
    .modal-tab-bar{padding:6px 10px}
    .modal-tab-btn{padding:6px 12px;font-size:12px}
}
@media(max-width:600px){
    .event-meta-grid{grid-template-columns:1fr}
    .event-modal-footer{flex-direction:column;gap:8px}
    .event-modal-footer .btn{width:100%;text-align:center;justify-content:center}
    .modal-tab-bar{gap:4px}
    .modal-tab-btn{padding:6px 10px;font-size:11px}
    .modal-tab-btn svg{display:none}
    .attachment-items-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Interactive Surface Refresh
   ========================================================================== */
body{position:relative;isolation:isolate;background:#f8f4ed}
body::before,body::after{content:'';position:fixed;z-index:0;border-radius:999px;pointer-events:none;filter:blur(2px);opacity:.7}
body::before{width:46vw;height:46vw;left:7vw;top:-31vw;background:radial-gradient(circle,rgba(249,115,22,.17),rgba(249,115,22,0) 68%);animation:pageAuraOne 18s ease-in-out infinite alternate}
body::after{width:40vw;height:40vw;right:-12vw;bottom:-25vw;background:radial-gradient(circle,rgba(255,173,92,.15),rgba(255,173,92,0) 69%);animation:pageAuraTwo 22s ease-in-out infinite alternate}
.app-shell{position:relative;z-index:1}
.main{background:linear-gradient(135deg,rgba(255,255,255,.23),rgba(249,238,224,.2))}
.card,.table-card{background:rgba(255,253,249,.9);box-shadow:0 7px 24px rgba(55,37,22,.055);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.card:hover{border-color:rgba(173,126,84,.24)}
@keyframes pageAuraOne{to{transform:translate3d(15vw,7vh,0) scale(1.12)}}
@keyframes pageAuraTwo{to{transform:translate3d(-14vw,-8vh,0) scale(.9)}}

/* Card color is previewed on the actual description editor. */
.description-color-preview{overflow:hidden;border-color:rgba(102,75,50,.2);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.description-color-preview .rich-toolbar{background:rgba(255,255,255,.55);backdrop-filter:blur(8px)}
.description-color-preview .rich-content{background:transparent;min-height:185px}
.description-color-preview:focus-within{border-color:rgba(249,115,22,.7);box-shadow:0 0 0 4px rgba(249,115,22,.12),0 10px 24px rgba(64,40,20,.08)}

/* Full-width PIC selector with predictable dismissal. */
.assignee-dropdown>summary{width:100%;min-height:46px;padding:10px 13px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.assignee-dropdown>summary:hover,.assignee-dropdown[open]>summary{border-color:#e7a873;background:#fffaf5;box-shadow:0 0 0 3px rgba(249,115,22,.08)}
.assignee-summary-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.assignee-summary-meta .icon{width:15px;height:15px;transition:transform .2s ease}
.assignee-dropdown[open] .assignee-summary-meta .icon{transform:rotate(90deg)}
.assignee-dropdown[open] .assignee-menu{position:relative;top:auto;left:auto;width:100%;max-height:none;margin-top:7px;padding:0;overflow:hidden}
.assignee-options-scroll{max-height:240px;overflow:auto;padding:10px}
.assignee-menu-footer{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:10px;border-top:1px solid var(--line);background:rgba(255,253,249,.96);backdrop-filter:blur(8px)}
.assignee-menu-footer .btn{min-width:104px}

/* Google Drive link inputs and embedded preview. */
.drive-empty-hint{padding:14px 16px;border:1px dashed #d8cbbe;border-radius:12px;background:rgba(255,255,255,.5);color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:10px}
.drive-empty-hint[hidden]{display:none}
.drive-link-list{display:grid;gap:12px}
.drive-link-entry{overflow:hidden;border:1px solid #dfd3c5;border-radius:13px;background:rgba(255,255,255,.7);box-shadow:0 1px 3px rgba(0,0,0,.03)}
.drive-link-input-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px}
.drive-link-input-row .input{border:0;background:transparent;box-shadow:none}
.drive-link-input-row .input:focus{box-shadow:none}
.drive-link-leading{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#fff0e4;color:var(--orange-2)}
.drive-link-leading .icon{width:19px;height:19px}
.drive-link-remove{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease}
.drive-link-remove:hover{background:#fff0ed;color:#bd392e}
.drive-inline-preview{border-top:1px solid #eadfd3;background:#f7f3ed}
.drive-inline-preview[hidden]{display:none}
.drive-preview-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#efe8df;border-bottom:1px solid #e5dbcd;font-size:12px}
.drive-preview-badge{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--orange-2)}
.drive-preview-open{display:inline-flex;align-items:center;gap:4px;color:var(--text);font-weight:500;text-decoration:none;font-size:11.5px;padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.75);border:1px solid #dfd3c5;transition:background .15s ease,border-color .15s ease,color .15s ease}
.drive-preview-open:hover{background:#fff;color:var(--orange-2);border-color:#e7a873}
.drive-preview-open .icon{width:12px;height:12px}
.drive-inline-preview iframe{display:block;width:100%;height:270px;border:0;background:#fff}
.drive-inline-preview iframe[hidden]{display:none}
.drive-preview-message{margin:0;padding:14px;color:#a14124;font-size:12px;text-align:center;background:#fff8f5}
.drive-preview-message[hidden]{display:none}
.add-drive-link{width:max-content;margin-top:10px}
.existing-drive-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #dfd3c5;border-radius:13px;background:rgba(255,255,255,.8);box-shadow:0 1px 4px rgba(0,0,0,.04);margin-bottom:12px}
.attachment-item-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#f7f2ea;border-bottom:1px solid #e7ddcf}
.attachment-item-info{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.drive-link-leading-sm{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:#fff0e4;color:var(--orange-2);flex-shrink:0}
.drive-link-leading-sm .icon{width:16px;height:16px}
.attachment-name-meta{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.attachment-name-meta .attachment-name{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.existing-drive-embed{height:250px;background:#fff;border:0}
.existing-drive-embed iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.drive-detail-form-wrap{margin-bottom:16px}
.drive-detail-form .drive-link-input-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:4px 8px;border:1px solid #dfd3c5;border-radius:10px;background:#fff}
.drive-detail-preview{margin-top:8px;border-radius:12px;overflow:hidden;border:1px solid #dfd3c5}
.attachment-embed{height:220px;background:#f2ede6;border-bottom:1px solid var(--line)}
.attachment-embed iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.attachment-card .attachment-meta-block{padding:13px}
.drive-detail-form .input{background:#fff}

/* Monthly archive card color dot */
.th-color{width:32px;padding-right:0}
.td-color{width:32px;padding-right:0;text-align:center;vertical-align:middle}
.archive-card-color-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(0,0,0,.15);box-shadow:0 1px 3px rgba(0,0,0,.08);vertical-align:middle;transition:transform .18s ease}
tr:hover .archive-card-color-dot{transform:scale(1.25)}

/* Themed work date picker. */
.date-picker-field{position:relative}
.date-picker-field .input{padding-right:42px;cursor:pointer;background:#fff}
.date-picker-field>.icon{position:absolute;right:13px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:var(--orange-2);pointer-events:none}
.date-picker-modal{z-index:1080;background:rgba(25,19,14,.42)}
.date-picker-card{max-width:420px;padding:20px;border-radius:20px;background:rgba(255,253,249,.98)}
.date-picker-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.date-picker-header h2{margin:3px 0 0;font-size:21px}
.date-picker-nav{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;margin:18px 0 12px}
.date-picker-nav strong{text-align:center;text-transform:capitalize}
.date-picker-weekdays,.date-picker-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.date-picker-weekdays span{padding:5px 0;color:var(--muted);font-size:9px;font-weight:800;text-align:center;text-transform:uppercase}
.date-picker-day{aspect-ratio:1;border:0;border-radius:10px;background:transparent;color:var(--ink);font-size:12px;font-weight:650;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.date-picker-day:hover:not(:disabled){background:#ffead8;color:#a6400c;transform:translateY(-1px)}
.date-picker-day.outside{color:#bdb3aa}
.date-picker-day.today{box-shadow:inset 0 0 0 1.5px var(--orange)}
.date-picker-day.selected{background:var(--orange)!important;color:#fff!important;box-shadow:0 6px 14px rgba(249,115,22,.25)}
.date-picker-day:disabled{opacity:.25;cursor:not-allowed}
.date-picker-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}

/* Dynamic ambient glowing surface for Calendar Overview */
.calendar-overview{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:34px;padding:26px 30px;overflow:hidden;border-radius:20px;background:linear-gradient(125deg,#16120e 0%,#281b13 42%,#3b2214 78%,#19130e 100%);background-size:160% 160%;border:1px solid rgba(249,115,22,.22);border-top:1px solid rgba(251,146,60,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);animation:calendarSurfaceFlow 20s ease-in-out infinite alternate}
.calendar-overview::before{content:'';position:absolute;z-index:-1;width:380px;height:280px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.4) 0%,rgba(249,115,22,0) 70%);animation:calendarLightDrift 14s ease-in-out infinite alternate;pointer-events:none;filter:blur(24px)}
.calendar-overview::after{content:'';position:absolute;z-index:-1;width:300px;height:240px;left:-60px;bottom:-80px;border-radius:50%;background:radial-gradient(circle,rgba(251,146,60,.25) 0%,rgba(251,146,60,0) 65%);animation:calendarAuraPulse 18s ease-in-out infinite alternate;pointer-events:none;filter:blur(30px)}
@keyframes calendarSurfaceFlow{0%{background-position:0% 40%}50%{background-position:80% 60%}100%{background-position:100% 20%}}
@keyframes calendarLightDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-40px,25px,0) scale(1.15)}}
@keyframes calendarAuraPulse{0%{transform:translate3d(0,0,0) scale(0.95);opacity:.6}100%{transform:translate3d(30px,-20px,0) scale(1.1);opacity:.9}}

.calendar-overview-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.15);overflow:hidden}
.calendar-overview-stats div{padding:14px 18px;border-right:1px solid rgba(255,255,255,.12);transition:background-color .2s ease,transform .2s ease}
.calendar-overview-stats div:hover{background:rgba(255,255,255,.12)}
.calendar-overview-stats div:last-child{border-right:0}
.calendar-overview-stats span{display:block;color:rgba(255,255,255,.65);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.calendar-overview-stats strong{display:block;margin-top:4px;color:#fff;font-size:24px;font-weight:800;letter-spacing:-.02em}

/* Page-local search and clearer archive/team hierarchy. */
.workspace-breadcrumb{flex:1;min-width:0}
/* Archive Overview (Matching Calendar & Timesheet, with warmer brighter ambient palette) */
.archive-overview{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    margin-bottom:14px;
    padding:24px 26px;
    overflow:hidden;
    border-radius:18px;
    background:linear-gradient(135deg,#2e221b,#4d3627);
    color:#fff;
    box-shadow:0 12px 30px rgba(55,35,20,.16);
    border:1px solid rgba(255,255,255,.08);
}
.archive-overview::before{display:none!important}
.archive-overview::after{
    content:'';
    position:absolute;
    right:-60px;
    top:-95px;
    width:250px;
    height:250px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(251,146,60,.42),transparent 68%);
    pointer-events:none;
}
.archive-overview-copy{position:relative;z-index:1;min-width:0}
.archive-overview-copy .section-kicker{color:#ffb27b!important}
.archive-overview-copy h2{margin:4px 0 5px;font-size:25px;color:#fff}
.archive-overview-copy p{margin:0;color:rgba(255,255,255,.74);font-size:12px;max-width:660px}
.archive-overview-stats{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(88px,1fr));
    min-width:min(100%,330px);
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(8px);
}
.archive-overview-stats div{padding:13px 16px;border-right:1px solid rgba(255,255,255,.14);text-align:center;transition:background .2s ease}
.archive-overview-stats div:hover{background:rgba(255,255,255,.12)}
.archive-overview-stats div:last-child{border-right:0}
.archive-overview-stats span{display:block;color:rgba(255,255,255,.68);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.archive-overview-stats strong{display:block;margin-top:4px;color:#fff;font-size:24px;font-weight:800;letter-spacing:-.02em}

/* Month Selector Dropdown */
.archive-header-nav{display:inline-flex;align-items:center;gap:6px}
.archive-header-nav .icon-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #d9d4ce;border-radius:10px;background:#fff;color:var(--ink);transition:border-color .18s ease,background .18s ease}
.archive-header-nav .icon-link:hover{border-color:#c5b8aa;background:#fffdfa;color:var(--orange)}
.archive-month-selector{display:inline-flex;align-items:center}
.archive-select-wrap{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:42px;
    padding:0 14px 0 12px;
    border:1px solid #d9d4ce;
    border-radius:12px;
    background:#fff;
    color:var(--ink);
    box-shadow:0 1px 3px rgba(67,48,29,.05);
    transition:border-color .18s ease,box-shadow .18s ease;
    cursor:pointer;
    position:relative;
}
.archive-select-wrap:hover{border-color:#c5b8aa;background:#fffdfa}
.archive-select-wrap:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.archive-select-icon{color:var(--orange-2);display:grid;place-items:center;pointer-events:none}
.archive-select-icon svg{width:16px;height:16px}
.archive-select-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;pointer-events:none}
.archive-select-current{font-size:13px;font-weight:700;color:var(--ink);pointer-events:none;white-space:nowrap}
.archive-select-chevron{color:var(--muted);display:grid;place-items:center;pointer-events:none}
.archive-select-chevron svg{width:14px;height:14px}
.archive-month-dropdown{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    z-index:2;
    -webkit-appearance:menulist;
}
.archive-btn-today{font-weight:700;padding:8px 14px;border-radius:10px;white-space:nowrap}
.archive-btn-today.disabled,
.archive-btn-today:disabled{opacity:.42;pointer-events:none;cursor:default;color:var(--muted)}
.archive-fade-text,
.calendar-fade-text{transition:opacity .22s ease;will-change:opacity}
.archive-fade-text.is-fading,
.calendar-fade-text.is-fading{opacity:0}
.archive-slide-wrapper,
.calendar-board-wrapper{position:relative;overflow:hidden;width:100%}
.archive-table-slide,
.calendar-board-slide{will-change:transform,opacity}

@keyframes boardSlideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-40px); opacity: 0; }
}
@keyframes boardSlideInRight {
    from { transform: translateX(40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes boardSlideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(40px); opacity: 0; }
}
@keyframes boardSlideInLeft {
    from { transform: translateX(-40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.anim-slide-out-left {
    animation: boardSlideOutLeft .18s cubic-bezier(.4, 0, 1, 1) forwards !important;
}
.anim-slide-in-right {
    animation: boardSlideInRight .22s cubic-bezier(0, 0, .2, 1) forwards !important;
}
.anim-slide-out-right {
    animation: boardSlideOutRight .18s cubic-bezier(.4, 0, 1, 1) forwards !important;
}
.anim-slide-in-left {
    animation: boardSlideInLeft .22s cubic-bezier(0, 0, .2, 1) forwards !important;
}

.calendar-toolbar .btn.disabled,
.calendar-toolbar .btn:disabled {
    opacity: .42;
    pointer-events: none;
    cursor: default;
    color: var(--muted);
}
.archive-search-toolbar,.team-search-toolbar{gap:12px;padding:12px 14px;background:rgba(255,253,249,.94)}
.archive-search-toolbar .filter-search,.team-search-toolbar .filter-search{min-width:230px;background:#fff}
.archive-search-toolbar [data-live-search-count],.team-search-toolbar [data-live-search-count]{color:var(--ink)}
.archive-search-toolbar>[aria-live],.team-search-toolbar>[aria-live]{white-space:nowrap}

/* Drag and drop Kanban states */
.task-card[draggable="true"]{cursor:grab}
.task-card[draggable="true"]:active{cursor:grabbing}
.task-card .drag-handle{cursor:grab;display:inline-flex;align-items:center;color:#b7afa7;opacity:.6;transition:opacity .15s ease,color .15s ease}
.task-card:hover .drag-handle{opacity:1;color:var(--orange-2)}
.task-card.dragging{opacity:.38!important;transform:scale(.98) rotate(1deg);box-shadow:0 14px 28px rgba(45,30,18,.18)!important;border-color:var(--orange)!important}
.board-dragging .task-list{min-height:130px}
.task-drop-placeholder{height:64px;border:2px dashed #f97316;background:rgba(249,115,22,.08);border-radius:13px;margin-bottom:9px;transition:height .15s ease;pointer-events:none}
.task-list.drag-over-list{background:rgba(249,115,22,.05);border-radius:14px;outline:2px dashed rgba(249,115,22,.45);outline-offset:-2px}

/* Team Management Revamped */
.team-page-summary{display:flex;align-items:center;gap:10px;align-self:flex-end}
.team-page-summary>div:not(.team-stat-card){display:flex;flex-direction:column;padding:8px 16px;border-radius:12px;border:1px solid #e8ded1;background:#fffdf9;box-shadow:0 2px 7px rgba(35,20,10,.035);min-width:110px}
.team-page-summary strong{font-size:23px;font-weight:750;color:var(--orange-2);line-height:1.15}
.team-page-summary span{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}

.team-search-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.team-search-toolbar .filter-search{flex:1 1 280px;min-width:220px;height:42px}
.team-search-count{white-space:nowrap;font-size:12px}
.team-toolbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.team-toolbar-actions .btn{min-height:38px;padding:0 13px;font-size:12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.team-toolbar-actions .btn .icon{width:15px;height:15px}

.team-section-heading{align-items:flex-end;margin:30px 2px 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.team-section-heading h2{margin:2px 0 3px;font-size:22px;letter-spacing:-.02em}
.team-section-heading p:last-child{margin:0;color:var(--muted);font-size:12px}
.team-heading-actions{display:flex;align-items:center;gap:10px}

.team-management-card{padding:0;overflow:visible;border-color:#e5d9ca;background:#fffefa;box-shadow:0 8px 26px rgba(55,37,22,.055);margin-bottom:26px}
.team-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0;padding:22px 24px;border-bottom:1px solid var(--line);background:linear-gradient(115deg,#fffaf3,#fffefa 58%);border-radius:var(--radius) var(--radius) 0 0}
.team-header-main{display:flex;align-items:flex-start;gap:16px;min-width:0}
.team-avatar-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);color:#fff;font-size:20px;font-weight:800;letter-spacing:-.02em;flex-shrink:0;box-shadow:0 4px 14px rgba(249,115,22,.28)}
.team-header-info{min-width:0}
.team-header-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.team-header-title-row h3{margin:0;font-size:22px;font-weight:750;letter-spacing:-.025em;color:var(--ink)}
.team-owner-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#fbf5ee;border:1px solid #ebdccb;font-size:11px;color:#634b35}
.team-owner-pill .icon{width:12px;height:12px;color:var(--orange-2)}
.team-description{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.team-card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.team-card-meta .count-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding-inline:10px;background:#f5ede2;color:#6e5948;font-size:11px;font-weight:600}
.team-card-meta .count-pill .icon{width:13px;height:13px}
.team-header-actions{flex-shrink:0}
.team-header-actions .btn{display:inline-flex;align-items:center;gap:6px}

.team-management-card .team-inner-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:0}
.team-management-card .team-inner-grid>section{padding:22px 24px;min-width:0}
.team-management-card .team-inner-grid>section+section{border-left:1px solid var(--line)}
.team-panel-heading{align-items:flex-end;margin:0 0 14px}
.team-panel-heading h2{margin:2px 0;font-size:17px;letter-spacing:-.015em}
.team-panel-heading p:last-child{margin:0;color:var(--muted);font-size:11px}
.team-panel-heading>.count-pill{flex:0 0 auto}

.team-member-add-box{padding:12px 14px;background:#faf6ef;border:1px solid #eee4d8;border-radius:12px;margin-bottom:14px}
.team-add-member-form{display:grid;grid-template-columns:1.4fr 1fr 1.1fr auto;gap:8px;align-items:center}
.team-add-member-form .select{font-size:12px;height:38px;background:#fff}
.team-add-member-form .btn{height:38px;padding:0 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}

.member-info-cell{display:flex;align-items:center;gap:10px}
.member-info-cell.compact{gap:7px}
.avatar-mini{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ebdccb;color:#574332;font-size:11px;font-weight:750;flex-shrink:0}
.current-user-pill{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:#ffedd5;color:#c2410c;font-size:9px;font-weight:750}

.role-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:650;letter-spacing:.01em}
.role-badge-admin,.role-badge-owner{background:#ffedd5;color:#c2410c;border:1px solid #fed7aa}
.role-badge-manager{background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe}
.role-badge-member{background:#f4eee6;color:#5d4a3b;border:1px solid #e5dacd}

.action-icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .15s ease;padding:0}
.action-icon-btn:hover{background:var(--orange-soft);color:var(--orange-2);border-color:#fed7aa}
.action-icon-btn-danger:hover{background:#fef2f2;color:#dc2626;border-color:#fecaca}
.action-icon-btn .icon{width:15px;height:15px}

.select-sm{height:32px;font-size:12px;padding:4px 8px}
.btn-sm{min-height:32px;height:32px;padding:0 11px;font-size:11px;display:inline-flex;align-items:center;gap:5px}

.menu-panel-header{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.menu-panel-header strong{display:block;font-size:13px;color:var(--ink)}
.menu-panel-separator{height:1px;background:var(--line);margin:12px 0}

.team-management-card .table,.employee-directory-card .table{margin:0}
.team-management-card .table th,.employee-directory-card .table th{background:#f7f1e9;color:#6f6258;font-size:10px;letter-spacing:.035em;text-transform:uppercase}
.team-management-card .table tr:hover td,.employee-directory-card .table tr:hover td{background:#fffaf3}
.employee-directory-card{padding:0;overflow:visible;border-color:#e5d9ca;box-shadow:0 8px 26px rgba(55,37,22,.055)}
.employee-directory-card>.table{border-radius:var(--radius)}

.team-search-empty{min-height:170px;margin-top:18px}
.team-search-empty>.icon{width:28px;height:28px;color:var(--orange-2)}
.calendar-toolbar .calendar-pic-filter[open] .assignee-menu{position:absolute;z-index:70;top:calc(100% + 7px);right:0;left:auto;width:min(330px,calc(100vw - 32px));max-height:330px;margin:0;border:1px solid var(--line);box-shadow:0 18px 45px rgba(30,20,12,.17)}

/* Aesthetic Team Stat Cards (Fit, Simpel, Ringkas, Padding Pas) */
.team-page-summary{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:0;
}
.team-stat-card{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-width:145px;
    padding:10px 16px;
    border:1px solid #e8ded1;
    border-radius:12px;
    background:#fffdfa;
    box-shadow:0 1px 4px rgba(50,35,20,.04);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
    cursor:default;
    flex:0 0 auto;
    box-sizing:border-box;
}
.team-stat-card:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(50,35,20,.07);
    border-color:#d4c8b9;
}
.team-stat-icon-circle{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:10px;
    flex-shrink:0;
    transition:transform .18s ease;
}
.team-stat-card:hover .team-stat-icon-circle{
    transform:scale(1.06);
}
.team-stat-icon-circle svg{width:20px;height:20px}
.team-stat-icon-circle.icon-team{background:#fff7ed;color:#ea580c;border:1px solid rgba(234,88,12,.18)}
.team-stat-icon-circle.icon-users{background:#ecfdf5;color:#059669;border:1px solid rgba(5,150,105,.18)}
.team-stat-icon-circle.icon-admin{background:#ede9fe;color:#7c3aed;border:1px solid rgba(124,58,237,.18)}

.team-stat-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-width:0;
    line-height:1.2;
}
.team-stat-number{
    display:block;
    font-size:20px;
    font-weight:800;
    line-height:1.1;
    color:var(--orange-2);
    letter-spacing:-.02em;
    text-align:center;
}
.team-stat-label{
    display:block;
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
}

.team-members-section{padding:22px 24px;min-width:0}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.team-badge-list{display:flex;flex-wrap:wrap;gap:4px}

@media(max-width:1280px){
    .team-management-card .team-inner-grid{grid-template-columns:minmax(0,1fr)}
    .team-management-card .team-inner-grid>section+section{border-top:1px solid var(--line);border-left:0}
}

@media(max-width:900px){
    .archive-overview{flex-direction:column;align-items:flex-start;gap:18px;padding:20px}
    .archive-overview-stats{width:100%;min-width:0}
    .team-page-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:auto}
    .team-stat-card{padding:7px 11px}
    .team-members-section{padding:16px}
    .employee-directory-card>.table{display:block;max-width:100%;overflow:auto}
}

@media(max-width:600px){
    .drive-link-input-row{grid-template-columns:auto minmax(0,1fr) auto}
    .drive-link-leading{width:34px;height:34px}
    .drive-inline-preview iframe{height:210px}
    .date-picker-card{padding:17px}
    .date-picker-actions{display:grid;grid-template-columns:1fr 1fr}
    .date-picker-actions .btn-primary{grid-column:1/-1}
    .archive-overview{padding:18px 16px}
    .archive-overview-stats{grid-template-columns:repeat(3,1fr)}
    .archive-overview-stats div{padding:10px 10px}
    .archive-overview-stats strong{font-size:18px}
    .archive-overview-stats span{font-size:8px}
    .archive-header-nav{width:100%;display:flex;align-items:center;gap:6px}
    .archive-month-selector{flex:1;min-width:0}
    .archive-select-wrap{width:100%;justify-content:space-between}
    .archive-search-toolbar,.team-search-toolbar{align-items:stretch}
    .archive-search-toolbar .filter-search,.team-search-toolbar .filter-search{width:100%;min-width:0}
    .archive-search-toolbar .btn,.team-search-toolbar .btn{width:100%}
    .team-toolbar-actions{flex-wrap:wrap;width:100%;gap:6px}
    .team-toolbar-actions .btn{flex:1 1 120px}
    .team-page-summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%}
    .team-stat-card{flex:1 1 auto;padding:7px 10px}
    .team-card-header{align-items:flex-start;flex-direction:column;padding:18px;gap:14px}
    .team-header-main{width:100%}
    .team-header-actions{width:100%}
    .team-header-actions details{width:100%}
    .team-header-actions summary{width:100%;justify-content:center}
    .team-add-member-form{grid-template-columns:1fr;gap:8px}
    .team-add-member-form .select,.team-add-member-form .btn{width:100%;max-width:none}
    .calendar-toolbar .calendar-pic-filter[open] .assignee-menu{position:relative;top:auto;right:auto;width:100%;margin-top:7px}
}

@media(prefers-reduced-motion:reduce){
    body::before,body::after,.calendar-overview,.calendar-overview::before,.calendar-overview::after,.archive-overview,.archive-overview::after{animation:none!important}
    .team-stat-card,.team-stat-icon-circle{transition:none!important;transform:none!important}
}

/* ==========================================================================
   Hari Minggu (Sunday) & Tanggal Merah (Holiday) Styling
   ========================================================================== */
.calendar-weekdays .sunday-header{color:#64748b!important;font-weight:750!important}
.calendar-cell.is-sunday{background:rgba(148,163,184,0.12)!important}
.calendar-cell.is-sunday>span{color:#475569!important;font-weight:750}
.calendar-cell.holiday{background:#fee2e2!important}
.calendar-cell.holiday>span{color:#b91c1c!important;font-weight:900!important}
.calendar-cell.holiday small{display:inline-block;margin-top:4px;padding:2px 6px;border-radius:4px;background:#fecaca;color:#991b1b;font-size:8.5px;font-weight:750;line-height:1.2}
.calendar-legend .sunday-legend i{width:10px;height:10px;border-radius:50%;background:#94a3b8;display:inline-block;border:1px solid #64748b}

/* Timesheet Sunday styling */
.timesheet-sunday td, .timesheet-holiday.is-sunday td{background:rgba(148,163,184,0.12)!important;color:#475569!important}
.timesheet-sunday .timesheet-input, .timesheet-holiday.is-sunday .timesheet-input{color:#475569!important}

/* ==========================================================================
   Non-PIC Card & View-Only Styling (Board UI)
   ========================================================================== */
.task-card.is-non-pic{
    background:#faf9f7!important;
    border-color:#e2ded8!important;
    box-shadow:0 2px 5px rgba(45,30,18,0.03)!important;
    opacity:0.85;
    cursor:default!important;
    filter:grayscale(30%);
    transition:opacity .15s ease,border-color .15s ease,filter .15s ease;
}
.task-card.is-non-pic:hover{
    transform:none!important;
    border-color:#cfc8bf!important;
    box-shadow:0 2px 6px rgba(45,30,18,0.05)!important;
    opacity:0.95;
    filter:grayscale(10%);
}
.task-card.is-non-pic .task-title h3{
    color:#5a5148;
}
.task-card.is-non-pic .task-description{
    color:#84776c;
}
.status-chip.status-chip-grey,
.status-chip-grey{
    background:#e2e8f0!important;
    color:#475569!important;
    border-color:#cbd5e1!important;
    font-weight:600;
}
.badge-non-pic{
    background:#f1f5f9;
    color:#64748b;
    border:1px solid #cbd5e1;
    font-size:10px;
    font-weight:600;
}
.badge-cross-team{background:#fff1e6;color:#9a410d;border:1px solid #f8c99e;font-size:10px}

/* ==========================================================================
   Frantinco Toast Notification System
   ========================================================================== */
.toast-container{
    position:fixed;
    top:22px;
    right:22px;
    z-index:99999;
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
    max-width:min(420px,calc(100vw - 32px));
}
.toast{
    pointer-events:auto;
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px 16px;
    border-radius:14px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 14px 35px rgba(45,30,18,.14),0 3px 8px rgba(0,0,0,.04);
    color:var(--ink);
    font-size:12.5px;
    font-weight:600;
    line-height:1.45;
    transform:translateX(110%);
    opacity:0;
    transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .25s ease;
}
.toast.toast-visible{
    transform:translateX(0);
    opacity:1;
}
.toast.toast-hiding{
    transform:translateX(110%);
    opacity:0;
}
.toast-icon{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    flex-shrink:0;
    margin-top:1px;
}
.toast-icon svg{
    width:14px;
    height:14px;
}
.toast-error{
    background:#fff5f5;
    border-color:#fca5a5;
    color:#991b1b;
}
.toast-error .toast-icon{
    background:#fee2e2;
    color:#dc2626;
}
.toast-success{
    background:#f0fdf4;
    border-color:#86efac;
    color:#166534;
}
.toast-success .toast-icon{
    background:#dcfce7;
    color:#16a34a;
}
.toast-warning{
    background:#fffbeb;
    border-color:#fde68a;
    color:#92400e;
}
.toast-warning .toast-icon{
    background:#fef3c7;
    color:#d97706;
}
.toast-info{
    background:#fff7ed;
    border-color:#fed7aa;
    color:#9a3412;
}
.toast-info .toast-icon{
    background:#ffedd5;
    color:#ea580c;
}
.toast-body{
    flex:1;
}
.toast-title{
    font-weight:750;
    margin-bottom:2px;
    font-size:13px;
}
.toast-close{
    background:none;
    border:0;
    color:inherit;
    opacity:.55;
    cursor:pointer;
    padding:2px;
    margin:-2px -4px 0 4px;
    font-size:16px;
    line-height:1;
}
.toast-close:hover{
    opacity:1;
}

/* ==========================================================================
   Custom Form Validation & Error Highlight
   ========================================================================== */
.field-invalid,
.input.field-invalid,
.select.field-invalid,
textarea.field-invalid,
.rich-editor.field-invalid{
    border-color:#ef4444!important;
    box-shadow:0 0 0 3px rgba(239,68,68,.22)!important;
    background-color:#fff8f8!important;
}
.field-invalid::placeholder,
.input.field-invalid::placeholder,
textarea.field-invalid::placeholder{
    color:#f87171!important;
    opacity:1;
}
.field-error-msg{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:11px;
    font-weight:650;
    color:#dc2626;
    margin-top:5px;
    animation:errorFadeIn .2s ease;
}
@keyframes errorFadeIn{
    from{opacity:0;transform:translateY(-3px)}
    to{opacity:1;transform:translateY(0)}
}

/* ==========================================================================
   Form Dirty Check & Disabled Button States
   ========================================================================== */
button:disabled,
button.disabled,
.btn:disabled,
.btn.disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}
.field-error{display:block;margin-top:6px;color:#b91c1c;font-size:12px;line-height:1.4}
.field-error[hidden]{display:none}
.alert[data-password-server-error][hidden]{display:none}
.password-field .input{padding-right:48px}
.password-field .password-visibility-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:#6f6258;cursor:pointer}
.password-field .password-visibility-toggle:hover{background:#fff0e3;color:#b54b0e}
.password-field .password-visibility-toggle:focus-visible{outline:2px solid #f97316;outline-offset:2px}
.password-visibility-toggle .icon{display:block;width:18px;height:18px}
.password-visibility-toggle [hidden]{display:none}
.password-field input::-ms-reveal,.password-field input::-ms-clear{display:none}

/* ==========================================================================
   Permanent Centralized Audit Records & History Feed
   ========================================================================== */
.history-filter-card {
    padding: 16px 20px;
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.history-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.history-filters .select {
    min-width: 150px;
    flex: 1 1 auto;
}
.history-filters .filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.history-feed-card {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.history-feed-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.history-feed-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.history-feed-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.history-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--canvas);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.history-item:hover {
    background: #ffffff;
    border-color: #fbd38d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.history-item-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--orange-soft);
    color: var(--orange-2);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    border: 1px solid rgba(249, 115, 22, 0.2);
}
.history-item-content {
    flex: 1;
    min-width: 0;
}
.history-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 6px;
}
.history-item-header strong {
    color: var(--ink);
    font-weight: 700;
}
.history-item-desc {
    color: var(--ink-2);
}
.history-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
}
.work-team-filter{position:relative;flex:0 0 auto;min-width:150px}
.work-team-filter>summary{height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 13px;border:1px solid #d9d4ce;border-radius:10px;background:#fdfcfa;cursor:pointer;font-size:12px;font-weight:700;list-style:none}
.work-team-filter>summary::-webkit-details-marker{display:none}
.work-team-filter[open]>summary,.work-team-filter>summary:focus-visible{border-color:#f97316;outline:2px solid rgba(249,115,22,.15)}
.work-team-filter-menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:min(310px,85vw);padding:14px;border:1px solid #ead8c8;border-radius:12px;background:#fffdfa;box-shadow:0 14px 35px rgba(45,30,18,.15)}
.work-team-filter-menu>strong{display:block;margin-bottom:9px;font-size:12px}
.work-team-filter-options{display:grid;gap:8px;max-height:230px;overflow:auto}
.work-team-filter-options label{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}
.work-team-filter-options input{accent-color:#f97316}
.work-team-filter-options .work-my-tasks-option{display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px;padding:9px;border-radius:8px;background:#fff2e7;font-weight:700}
.work-my-tasks-option input{grid-row:span 2}
.work-my-tasks-option span{font-size:11px;font-weight:400;color:#74685f}
.work-team-filter-heading{padding-top:7px;border-top:1px solid #eee4db;font-size:11px;font-weight:700;color:#74685f}
.work-team-filter-actions{display:flex;justify-content:space-between;gap:8px;margin-top:13px}
.backlog-assign-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.backlog-assign-form .select{max-width:180px;min-height:36px}
.assignee-dropdown.is-disabled{opacity:.55;pointer-events:none}
@media(max-width:600px){.work-team-filter{width:100%}.work-team-filter-menu{width:100%}.backlog-assign-form .select{max-width:none;flex:1 1 130px}}

/* Manajemen Team: hierarchy, contextual controls, and complete cards. */
.team-search-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto auto;align-items:center;gap:10px;margin:0 0 14px;padding:12px}
.team-search-toolbar .filter-search{width:100%;min-width:0}
.team-filter-selects{display:flex;gap:8px;min-width:0}
.team-filter-selects .select{min-width:132px;max-width:180px}
.team-toolbar-actions{display:flex;gap:8px;justify-content:flex-end}
.team-toolbar-actions .btn{white-space:nowrap}
.team-toolbar-actions [data-team-toolbar-action="employees"]{display:none}
.team-search-toolbar:has(+ .workspace-view-heading [data-page-target="employees"].active) .team-toolbar-actions [data-team-toolbar-action="employees"]{display:inline-flex}
.team-search-toolbar:has(+ .workspace-view-heading [data-page-target="employees"].active) .team-toolbar-actions [data-team-toolbar-action="structure"]{display:none}
.team-search-toolbar:has(+ .workspace-view-heading [data-page-target="history"].active) .team-toolbar-actions{display:none}
.team-search-toolbar:has(+ .workspace-view-heading [data-page-target="history"].active) .team-filter-selects,.team-search-toolbar:has(+ .workspace-view-heading [data-page-target="history"].active) .filter-search,.team-search-toolbar:has(+ .workspace-view-heading [data-page-target="history"].active) .team-search-count,.team-search-toolbar:has(+ .workspace-view-heading [data-page-target="history"].active) [data-live-search-clear]{display:none}
.team-search-toolbar:has(+ .workspace-view-heading [data-page-target="history"].active){display:none}
.workspace-view-heading{margin:0 0 16px}
.team-cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.team-management-card{min-width:0;margin:0;overflow:hidden;border-radius:17px}
.team-card-header{padding:18px 20px;gap:12px;flex-wrap:wrap}
.team-header-main,.team-header-info{min-width:0}
.team-header-info{flex:1}
.team-header-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.team-title-heading{overflow-wrap:anywhere}
.team-owner-pill{max-width:100%;overflow-wrap:anywhere}
.team-card-meta{display:flex;flex-wrap:wrap;gap:7px}
.team-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;margin-left:auto}
.team-header-actions form{margin:0}
.team-delete-action{color:#b42318}
.team-delete-action:hover{color:#991b1b;background:#fff0ed;border-color:#efb1a9}
.team-members-subpanel{padding:17px 20px 20px}
.member-subpanel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.member-subpanel-heading h4{margin:0 0 3px;font-size:15px}
.member-subpanel-heading p{margin:0}
.team-members-table-wrap,.table-container{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.member-table{width:100%;min-width:420px}
.member-table th,.member-table td{padding:10px 12px;vertical-align:middle}
.member-table th:last-child,.member-table td:last-child{white-space:nowrap}
.user-cell{display:flex;align-items:center;gap:9px;min-width:0}
.user-cell>div:last-child{min-width:0}
.user-cell strong,.user-cell small{display:block;overflow-wrap:anywhere}
.user-cell .avatar{flex:0 0 32px;width:32px;height:32px}
.member-table .badge{white-space:nowrap}
.action-btn-group{display:inline-flex;align-items:center;gap:6px}
.action-btn-group .btn{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;font-size:11.5px;font-weight:600;line-height:1;border-radius:7px;white-space:nowrap;min-height:28px}
.action-btn-group .btn svg{width:13px;height:13px;flex-shrink:0}
.team-edit-modal-card{width:min(560px,calc(100vw - 28px))}
.team-edit-modal-card .modal-body{display:grid;grid-template-columns:1fr;gap:14px}
.team-panel-empty{display:grid;justify-items:center;gap:7px;margin:12px 0;padding:28px 18px;border:1px dashed #e3d4c2;border-radius:15px;background:#fffaf4;text-align:center;color:var(--ink)}
.team-panel-empty span{max-width:420px;color:var(--muted);font-size:12px}
.team-panel-empty .btn{margin-top:6px}
.team-panel-empty[hidden],.unassigned-employees-card[hidden]{display:none!important}
.unassigned-employees-card{border-left:4px solid var(--orange-2)}
.unassigned-employees-card.is-empty{padding:12px 16px;border-left-color:#e8ded1;background:#fffdfa}
.unassigned-employees-card.is-empty .section-kicker,.unassigned-employees-card.is-empty .count-pill{display:none}
.unassigned-employees-card.is-empty h3{font-size:13px!important}
.unassigned-employees-card.is-empty .section-heading p{display:none}
.unassigned-employees-card.is-empty>p{padding:2px 0!important}
.team-chips{display:flex;flex-wrap:wrap;gap:5px}
.team-chips .count-pill{white-space:normal;text-align:left}
.history-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:center;gap:10px}
.history-filters .select{width:100%;min-width:0;height:40px;min-height:40px;padding:0 12px;font-size:12.5px;border-radius:11px;border:1px solid #d9d4ce;background-color:#fff;box-sizing:border-box}
.history-filters .filter-actions{display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap}
.history-filters .filter-actions .btn{height:40px;min-height:40px;padding:0 18px;font-size:12.5px;font-weight:700;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.history-feed-card{padding:18px 20px}
.history-feed-list{gap:9px}
.history-item{padding:12px 14px;gap:12px}
@media(max-width:1250px){
    .team-search-toolbar{grid-template-columns:minmax(220px,1fr) auto}
    .team-search-count{justify-self:end}
    .team-filter-selects,.team-toolbar-actions{grid-row:2}
    .team-toolbar-actions{grid-column:2}
    .team-cards-grid{grid-template-columns:minmax(0,1fr)}
    .history-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
    .history-filters .filter-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;width:100%}
}
@media(max-width:700px){
    .team-search-toolbar{grid-template-columns:1fr;gap:9px}
    .team-search-toolbar .filter-search,.team-filter-selects,.team-toolbar-actions{grid-column:1;grid-row:auto;width:100%}
    .team-filter-selects .select{flex:1;min-width:0;max-width:none}
    .team-search-count{justify-self:start}
    .team-toolbar-actions .btn{flex:1}
    .team-card-header,.team-members-subpanel{padding:15px}
    .team-header-actions{width:100%;justify-content:flex-start;margin:4px 0 0}
    .member-subpanel-heading{align-items:flex-start;flex-wrap:wrap}
    .history-filters{grid-template-columns:1fr}
    .history-filters .filter-actions{grid-column:1;display:grid;grid-template-columns:1fr 1fr;width:100%}
    .history-feed-card{padding:13px}
    .history-item{padding:11px}
}
.history-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.history-badge-team {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.history-badge-user {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.history-badge-membership {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.history-item-time {
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.history-item-time .icon {
    width: 13px;
    height: 13px;
    stroke-width: 1.8;
}
.history-feed-foot {
    margin-top: 24px;
    text-align: center;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}
.search-highlight {
    background-color: rgba(249, 115, 22, 0.08) !important;
}

/* Sliding pill tab switch with smooth sliding active indicator */
.sliding-switch{
    position:relative;
    display:inline-flex;
    align-items:center;
    background:#f3eee5;
    padding:4px;
    border-radius:13px;
    gap:0;
    isolation:isolate;
    border:1px solid rgba(0,0,0,.04);
}
.sliding-switch::before{
    content:'';
    position:absolute;
    top:4px;
    bottom:4px;
    left:4px;
    width:calc((100% - 8px) / var(--switch-count, 3));
    transform:translateX(calc(var(--switch-index, 0) * 100%));
    background:#fffdfa;
    border-radius:9px;
    box-shadow:0 2px 6px rgba(45,35,25,.09),0 1px 2px rgba(0,0,0,.04);
    transition:transform .46s cubic-bezier(.22,1,.36,1);
    z-index:1;
    pointer-events:none;
}
.sliding-switch button,
.sliding-switch a{
    position:relative;
    z-index:2;
    flex:1 1 0;
    min-width:105px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:8px 18px;
    border:0;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--muted);
    font:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    border-radius:9px;
    transition:color .2s ease;
    white-space:nowrap;
    text-decoration:none;
}
.sliding-switch button.active,
.sliding-switch a.active{
    color:var(--ink);
    font-weight:750;
}
.sliding-switch button:hover:not(.active),
.sliding-switch a:hover:not(.active){
    color:var(--ink);
}
.sliding-switch button *,
.sliding-switch a *{
    pointer-events:none;
}

/* Panel Slider System: Slideable 3 sections with smooth height and horizontal transition */
.panel-slider{
    position:relative;
    overflow:hidden;
    width:100%;
    transition:height .46s cubic-bezier(.22,1,.36,1);
}
.panel-slider-track{
    display:flex;
    width:100%;
    align-items:flex-start;
    transform:translate3d(var(--panel-offset, 0%), 0, 0);
    transition:transform .46s cubic-bezier(.22,1,.36,1);
    will-change:transform;
}
.panel-slide{
    flex:0 0 100%;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:0 1px 12px;
}
.panel-slide[aria-hidden="true"]{
    pointer-events:none;
    user-select:none;
}
.panel-slide[aria-hidden="false"]{
    pointer-events:auto;
}

/* Final Team management composition: one full-width card per Team and self-contained slides. */
.team-page-slider,
.calendar-page-slider{
    transition:height .46s cubic-bezier(.22,1,.36,1);
}
.team-page-slider .panel-slide,
.calendar-page-slider .panel-slide{
    padding:0 1px 12px;
}
.team-cards-grid{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
}
.team-management-card{
    width:100%;
    margin:0;
    border-radius:18px;
}
.team-card-header{
    padding:20px 22px;
    background:linear-gradient(115deg,#fffaf4,#fffefa 62%);
}
.team-members-subpanel{
    padding:18px 22px 22px;
    background:#fffdfa;
}
.team-panel-toolbar{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 16px;
    padding:12px 14px;
    border-radius:15px;
    background:rgba(255,253,250,.9);
    border:1px solid rgba(0,0,0,.04);
}
.team-panel-toolbar .filter-search{
    flex:1 1 200px;
    min-width:160px;
    height:40px;
    min-height:40px;
    background:#fff;
    border-radius:11px;
    box-sizing:border-box;
}
.team-panel-toolbar .team-filter-selects{
    display:flex;
    gap:8px;
    align-items:center;
    flex:0 0 auto;
}
.team-panel-toolbar .team-filter-selects .select{
    min-width:125px;
    max-width:165px;
    height:40px;
    min-height:40px;
    padding:0 12px;
    font-size:12.5px;
    border-radius:11px;
    border:1px solid #d9d4ce;
    background-color:#fff;
    box-sizing:border-box;
}
.team-panel-toolbar .team-search-count{
    white-space:nowrap;
    font-size:12px;
    color:var(--muted);
    flex:0 0 auto;
}
.team-panel-toolbar [data-search-reset]{
    flex:0 0 auto;
}
.team-panel-toolbar .btn{
    height:40px;
    min-height:40px;
    padding:0 16px;
    font-size:12.5px;
    font-weight:700;
    border-radius:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
    box-sizing:border-box;
    flex:0 0 auto;
}
.team-panel-toolbar [data-open-team-modal],
.team-panel-toolbar>.btn-primary{
    margin-left:auto;
}
.team-page-slider .team-section-heading{
    margin:6px 2px 18px;
}

/* Reusable modern data table styles for Team Management */
.team-members-table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid #eee4d8;
    border-radius:14px;
    background:#fffdfa;
}
.unassigned-employees-card .table-container{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid #fed7aa;
    border-radius:14px;
    background:#fffdfa;
}
.team-page-slider [data-page-panel="employees"]>.table-container.card{
    padding:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid #eee4d8;
    border-radius:17px;
    background:#fffdfa;
    box-shadow:0 2px 10px rgba(45,35,25,.03);
}
.team-page-slider .data-table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
    vertical-align:middle;
}
.team-page-slider .data-table th{
    padding:12px 16px;
    background:#fbf7f1;
    color:#786d62;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    border-bottom:1.5px solid #ece2d5;
    white-space:nowrap;
}
.team-page-slider .data-table td{
    padding:12px 16px;
    border-bottom:1px solid #f2e9de;
    vertical-align:middle;
    font-size:12.5px;
    color:var(--ink);
}
.team-page-slider .data-table tbody tr{
    transition:background .15s ease;
}
.team-page-slider .data-table tbody tr:hover{
    background:#fefbf8;
}
.team-page-slider .data-table tbody tr:last-child td{
    border-bottom:0;
}

/* Proportional column widths */
.member-table{
    min-width:520px;
}
.member-table th:nth-child(1), .member-table td:nth-child(1){
    width:50%;
}
.member-table th:nth-child(2), .member-table td:nth-child(2){
    width:25%;
}
.member-table th:nth-child(3), .member-table td:nth-child(3){
    width:25%;
    min-width:140px;
    text-align:right;
}

.unassigned-employees-card .data-table{
    min-width:680px;
}
.unassigned-employees-card .data-table th:nth-child(1), .unassigned-employees-card .data-table td:nth-child(1){
    width:32%;
}
.unassigned-employees-card .data-table th:nth-child(2), .unassigned-employees-card .data-table td:nth-child(2){
    width:28%;
}
.unassigned-employees-card .data-table th:nth-child(3), .unassigned-employees-card .data-table td:nth-child(3){
    width:20%;
}
.unassigned-employees-card .data-table th:nth-child(4), .unassigned-employees-card .data-table td:nth-child(4){
    width:20%;
    min-width:140px;
    text-align:right;
}

.team-page-slider [data-page-panel="employees"]>.table-container .data-table{
    min-width:820px;
}
.team-page-slider [data-page-panel="employees"]>.table-container .data-table th:nth-child(1),
.team-page-slider [data-page-panel="employees"]>.table-container .data-table td:nth-child(1){
    width:26%;
}
.team-page-slider [data-page-panel="employees"]>.table-container .data-table th:nth-child(2),
.team-page-slider [data-page-panel="employees"]>.table-container .data-table td:nth-child(2){
    width:22%;
}
.team-page-slider [data-page-panel="employees"]>.table-container .data-table th:nth-child(3),
.team-page-slider [data-page-panel="employees"]>.table-container .data-table td:nth-child(3){
    width:16%;
}
.team-page-slider [data-page-panel="employees"]>.table-container .data-table th:nth-child(4),
.team-page-slider [data-page-panel="employees"]>.table-container .data-table td:nth-child(4){
    width:22%;
}
.team-page-slider [data-page-panel="employees"]>.table-container .data-table th:nth-child(5),
.team-page-slider [data-page-panel="employees"]>.table-container .data-table td:nth-child(5){
    width:14%;
    min-width:140px;
    text-align:right;
}

/* User cell & typography */
.team-page-slider .user-cell{
    display:flex;
    align-items:center;
    gap:10px;
}
.team-page-slider .user-cell .avatar{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:10px;
    background:#eee3d5;
    color:var(--ink);
    font-size:12px;
    font-weight:700;
    display:grid;
    place-items:center;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.team-page-slider .user-cell strong{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--ink);
    line-height:1.3;
}
.team-page-slider .user-cell small{
    display:block;
    font-size:11.5px;
    color:var(--muted);
    line-height:1.3;
}
.team-page-slider .table-email{
    font-size:12px;
    color:#5a5046;
    word-break:break-all;
}

/* Team chips in directory */
.team-chips-list{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    align-items:center;
}
.team-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 8px;
    border-radius:7px;
    background:#faf6f0;
    border:1px solid #e7ded2;
    color:#4a3f34;
    font-size:11px;
    font-weight:600;
    line-height:1.3;
}
/* Action button group */
.action-btn-group{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}
.action-btn-group .btn{
    height:29px;
    padding:4px 10px;
    font-size:11.5px;
    font-weight:600;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
}
.action-btn-group .btn .icon{
    width:13px;
    height:13px;
}
.action-btn-group .team-delete-action{
    color:#b42318;
    border-color:#f0d5cf;
    background:#fffaf9;
}
.action-btn-group .team-delete-action:hover{
    background:#feebe7;
    border-color:#fca5a5;
    color:#991b1b;
}

.unassigned-employees-card{
    margin:0 0 16px;
    padding:16px 18px;
    border-radius:15px;
}
.history-filter-toolbar{
    display:flex;
    align-items:center;
    width:100%;
    margin:0 0 16px;
    padding:12px 14px;
    border-radius:15px;
    background:rgba(255,253,250,.9);
    border:1px solid rgba(0,0,0,.04);
    box-sizing:border-box;
}
.history-filter-toolbar .history-filters{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    margin:0;
}
.history-filter-toolbar .history-filters .select{
    flex:1 1 140px;
    min-width:120px;
    height:40px;
    min-height:40px;
    padding:0 12px;
    font-size:12.5px;
    border-radius:11px;
    border:1px solid #d9d4ce;
    background-color:#fff;
    box-sizing:border-box;
}
.history-filter-toolbar .history-filters .filter-actions{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    flex:0 0 auto;
}
.history-filter-toolbar .history-filters .filter-actions .btn{
    height:40px;
    min-height:40px;
    padding:0 18px;
    font-size:12.5px;
    font-weight:700;
    border-radius:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    flex:0 0 auto;
}
.history-feed-card{
    padding:20px 22px;
    border-radius:17px;
    background:#fffdfa;
}
.history-feed-list{
    position:relative;
    gap:0;
}
.history-feed-list::before{
    content:'';
    position:absolute;
    left:19px;
    top:20px;
    bottom:20px;
    width:1px;
    background:#eadcc9;
}
.history-item{
    position:relative;
    z-index:1;
    margin-bottom:10px;
    padding:14px 16px;
    border-color:#eee3d7;
    background:#fff;
    display:flex;
    align-items:flex-start;
    gap:14px;
}
.history-item:last-child{
    margin-bottom:0;
}
.history-item-avatar{
    box-shadow:0 0 0 4px #fffdfa;
    flex-shrink:0;
}
.history-item-content{
    flex:1;
    min-width:0;
}
.history-item-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    margin-left:auto;
    flex-shrink:0;
    text-align:right;
}
.history-team-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 9px;
    border-radius:8px;
    background:#faf6f0;
    border:1px solid #e8ded2;
    color:#55483a;
    font-size:11px;
    font-weight:650;
    line-height:1.3;
    white-space:nowrap;
    transition:background .15s ease,border-color .15s ease;
}
.history-team-tag .icon{
    width:13px;
    height:13px;
    stroke-width:1.8;
    color:var(--orange-2);
}
.history-item:hover .history-team-tag{
    background:#fff8f0;
    border-color:#fbd38d;
}
.history-item-right .history-item-time{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--muted);
    font-size:11px;
    white-space:nowrap;
}
.history-item-right .history-item-time .icon{
    width:12px;
    height:12px;
    stroke-width:1.8;
}
.history-item-meta{
    gap:7px;
}
@media(max-width:860px){
    .team-panel-toolbar{
        flex-wrap:wrap;
        gap:10px;
    }
    .team-panel-toolbar .filter-search{
        flex:1 1 220px;
    }
    .team-panel-toolbar .team-filter-selects{
        flex:1 1 auto;
    }
    .team-panel-toolbar .team-filter-selects .select{
        flex:1;
        min-width:120px;
        max-width:none;
    }
    .history-filter-toolbar .history-filters{
        flex-wrap:wrap;
        gap:10px;
    }
    .history-filter-toolbar .history-filters .select{
        flex:1 1 140px;
    }
}
@media(max-width:640px){
    .team-card-header,.team-members-subpanel{padding:15px}
    .team-panel-toolbar,
    .history-filter-toolbar{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        padding:12px;
    }
    .team-panel-toolbar .filter-search,
    .team-panel-toolbar .team-filter-selects,
    .team-panel-toolbar .team-search-count,
    .team-panel-toolbar [data-search-reset],
    .team-panel-toolbar [data-open-team-modal],
    .team-panel-toolbar>.btn-primary,
    .team-panel-toolbar>.btn:last-child{
        width:100%;
        margin-left:0;
    }
    .team-panel-toolbar .team-filter-selects .select{
        min-width:0;
        max-width:none;
        flex:1;
    }
    .team-panel-toolbar .team-search-count{text-align:left}
    .team-panel-toolbar [data-search-reset]{justify-content:center}
    .team-panel-toolbar>.btn:last-child{justify-content:center}
    .history-filter-toolbar .history-filters{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }
    .history-filter-toolbar .history-filters .select{
        width:100%;
        min-width:0;
        max-width:none;
    }
    .history-filter-toolbar .history-filters .filter-actions{
        width:100%;
        margin-left:0;
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .history-filter-toolbar .history-filters .filter-actions .btn{
        width:100%;
    }
    .team-page-slider [data-page-panel="employees"]>.table-container.card{overflow-x:auto}
    .history-feed-card{padding:14px}
    .history-item{padding:12px;flex-wrap:wrap;gap:10px}
    .history-item-right{
        margin-left:0;
        width:100%;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        padding-top:8px;
        border-top:1px dashed #f0e6da;
    }
}

/* Shared action meaning and interaction across pages and dialogs. */
.work-date-error{color:#9f291f;font-size:12px;font-weight:650}
.work-date-error[hidden]{display:none}
.date-picker-field:has(+ .work-date-error:not([hidden])) .input{border-color:#c85e53;box-shadow:0 0 0 3px rgba(200,94,83,.13)}
:root{
    --danger-glass:rgba(238,170,166,.32);
    --danger-glass-hover:rgba(234,154,149,.45);
    --danger-glass-border:rgba(177,79,73,.43);
    --danger-glass-ink:#8c302b;
}
.btn{
    transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.btn-danger,.btn.team-delete-action,.topbar .btn-logout{
    background:var(--danger-glass);
    border-color:var(--danger-glass-border);
    color:var(--danger-glass-ink);
    box-shadow:inset 0 1px rgba(255,255,255,.95),0 5px 14px rgba(151,57,51,.12);
    backdrop-filter:blur(14px) saturate(145%);
    -webkit-backdrop-filter:blur(14px) saturate(145%);
}
.btn-cancel{
    background:rgba(248,204,201,.22);
    border-color:rgba(190,110,103,.28);
    color:#a04d47;
    box-shadow:inset 0 1px rgba(255,255,255,.95),0 3px 10px rgba(151,57,51,.06);
    backdrop-filter:blur(12px) saturate(130%);
    -webkit-backdrop-filter:blur(12px) saturate(130%);
}
.modal-close,[data-date-picker-close]{background:rgba(255,240,238,.7);color:#a04d47;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.task-actions .task-delete,.btn-delete-att,.btn-delete-icon{
    background:var(--danger-glass)!important;
    color:var(--danger-glass-ink)!important;
    box-shadow:inset 0 0 0 1px var(--danger-glass-border),inset 0 1px rgba(255,255,255,.95),0 3px 10px rgba(151,57,51,.1)!important;
    backdrop-filter:blur(12px) saturate(145%);
    -webkit-backdrop-filter:blur(12px) saturate(145%);
}
.drive-link-remove{background:rgba(255,240,238,.7);color:#a04d47;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
button:focus-visible,[role="button"]:focus-visible{
    outline:2px solid #a94712;
    outline-offset:3px;
}
.btn:focus-visible,.modal-close:focus-visible,.task-detail-btn:focus-visible,.task-edit:focus-visible,
.task-delete:focus-visible,.btn-delete-att:focus-visible,.btn-delete-icon:focus-visible,
.drive-link-remove:focus-visible,.icon-link:focus-visible,.calendar-bar:focus-visible,
.super-admin-mode-switch:focus-visible,.sliding-switch button:focus-visible,
.view-switch button:focus-visible{
    outline:2px solid #a94712!important;
    outline-offset:3px;
}
.btn-danger:focus-visible,.btn.team-delete-action:focus-visible,.topbar .btn-logout:focus-visible,
.task-delete:focus-visible,.btn-delete-att:focus-visible,.btn-delete-icon:focus-visible{
    outline-color:#9f291f!important;
}
.btn:disabled,.btn.disabled,.btn[aria-disabled="true"]{
    transform:none!important;
    box-shadow:none!important;
}

@media(hover:hover){
    .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover{
        transform:translateY(-2px);
        box-shadow:0 8px 18px rgba(59,39,24,.15);
    }
    .btn-primary:not(:disabled):hover{background:#e9640d;box-shadow:0 9px 20px rgba(249,115,22,.27)}
    .btn-light:not(:disabled):hover,.btn-ghost:not(:disabled):hover,.btn-dark:not(:disabled):hover{
        background:#fff6eb;
        border-color:#e7b991;
        color:#7f390e;
    }
    .btn-cancel:not(:disabled):hover{
        background:rgba(244,184,180,.36)!important;
        border-color:rgba(177,79,73,.4)!important;
        color:#8c3933!important;
        box-shadow:inset 0 1px rgba(255,255,255,.98),0 8px 18px rgba(151,57,51,.13)!important;
    }
    .btn-danger:not(:disabled):hover,.btn.team-delete-action:not(:disabled):hover,
    .topbar .btn-logout:not(:disabled):hover{
        background:var(--danger-glass-hover)!important;
        border-color:rgba(169,64,59,.55)!important;
        color:#74241f!important;
        box-shadow:inset 0 1px rgba(255,255,255,.98),0 9px 20px rgba(151,57,51,.2)!important;
    }
    .task-actions .task-delete:hover,.btn-delete-att:hover,.btn-delete-icon:hover{
        background:var(--danger-glass-hover)!important;
        color:#74241f!important;
        box-shadow:inset 0 0 0 1px rgba(169,64,59,.55),inset 0 1px rgba(255,255,255,.98),0 6px 14px rgba(151,57,51,.17)!important;
        transform:translateY(-2px);
    }
    .modal-close:hover,.drive-link-remove:hover{background:rgba(255,224,221,.85)!important;color:#8c3933!important;transform:translateY(-1px)}
    .task-detail-btn:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(59,39,24,.12)!important}
    .task-edit:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(59,39,24,.12)!important}
    .icon-link:hover{box-shadow:0 5px 12px rgba(59,39,24,.12)}
    .modal-tab-btn:hover,.rich-toolbar button:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(59,39,24,.09)}
    .color-swatch:hover{transform:scale(1.12);box-shadow:0 3px 8px rgba(59,39,24,.14)}

    .team-management-card,.task-card,.attachment-card,.history-item,.focus-item,.timeline-item{
        transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
    }
    .team-management-card:hover,.task-card:hover,.attachment-card:hover{
        transform:translateY(-3px);
        border-color:#e9b181;
        box-shadow:0 12px 26px rgba(72,43,21,.13);
    }
    .history-item:hover,.focus-item:hover,.timeline-item:hover{
        background:#fff8f1;
        border-color:#e9b181;
        box-shadow:0 6px 16px rgba(72,43,21,.09);
    }
    .focus-item:hover,.timeline-item:hover{transform:translateY(-2px)}
    .focus-item,.timeline-item{padding-left:12px}
    .focus-item:hover,.timeline-item:hover{padding-left:12px}
    .table-card tbody tr:not([data-live-search-empty]),
    .team-page-slider .data-table tbody tr,.timesheet-table tbody tr{
        transition:background-color .18s ease,box-shadow .18s ease;
    }
    .table-card tbody tr:not([data-live-search-empty]):hover,
    .team-page-slider .data-table tbody tr:hover{
        background:#fff1e4;
    }
    .table-card tbody tr:not([data-live-search-empty]):hover td:first-child,
    .team-page-slider .data-table tbody tr:hover td:first-child{
        box-shadow:inset 3px 0 #f97316;
    }
    .timesheet-table tbody tr:not(.timesheet-holiday):hover td{background:#fff1e4}
    .timesheet-table tbody tr.timesheet-holiday:hover td{background:#ead9c7;color:var(--ink)}
    .calendar-bar:hover{filter:saturate(1.22);transform:translateY(-2px);box-shadow:0 8px 18px rgba(72,43,21,.17)}
}
@media(prefers-reduced-motion:reduce){
    .btn,.modal-close,.task-edit,.task-delete,.btn-delete-att,.btn-delete-icon,.drive-link-remove,
    .modal-tab-btn,.rich-toolbar button,.color-swatch,.icon-link,
    .team-management-card,.task-card,.attachment-card,.history-item,.focus-item,.timeline-item,
    .calendar-bar,.table-card tbody tr,.team-page-slider .data-table tbody tr,.timesheet-table tbody tr{
        transition:none!important;
    }
    .btn:hover,.modal-close:hover,.task-edit:hover,.task-delete:hover,.btn-delete-att:hover,
    .btn-delete-icon:hover,.drive-link-remove:hover,.modal-tab-btn:hover,.rich-toolbar button:hover,
    .color-swatch:hover,.icon-link:hover,.team-management-card:hover,.task-card:hover,
    .attachment-card:hover,.history-item:hover,.focus-item:hover,.timeline-item:hover,.calendar-bar:hover{
        transform:none!important;
    }
}


/* Decorative login board; no live work data is shown here. */
.login-workflow{position:relative;width:min(470px,100%);height:252px;margin-top:32px;border:1px solid rgba(77,43,18,.18);border-radius:20px;background:rgba(255,253,250,.72);box-shadow:0 20px 45px rgba(77,43,18,.1);overflow:hidden;animation:login-board-arrive .65s ease-out both}
.login-workflow-top{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(77,43,18,.1);color:#594638;font-size:11px;font-weight:800}
.login-workflow-window-dots{display:flex;gap:4px}.login-workflow-window-dots i{width:6px;height:6px;border-radius:50%;background:#e5c5a9}.login-workflow-window-dots i:nth-child(2){background:#f7a86d}.login-workflow-window-dots i:nth-child(3){background:#f97316}
.login-workflow-board{position:absolute;inset:51px 12px 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.login-workflow-column{min-width:0;padding:9px 7px;border:1px solid rgba(101,68,43,.1);border-radius:11px;background:rgba(230,204,178,.22)}
.login-workflow-heading{display:flex;align-items:center;gap:5px;min-width:0;color:#594638;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-workflow-heading i{width:7px;height:7px;flex:none;border-radius:50%;background:#d97706}.login-workflow-column.is-progress .login-workflow-heading i{background:#f97316}.login-workflow-column.is-done .login-workflow-heading i{background:#38815b}
.login-workflow-task{min-width:0;margin-top:12px;padding:10px 8px;border:1px solid rgba(101,68,43,.1);border-radius:9px;background:#fffdfa;box-shadow:0 5px 10px rgba(70,41,22,.06);animation:login-task-arrive .45s ease-out both}
.login-workflow-column.is-progress .login-workflow-task{animation-delay:.12s}.login-workflow-column.is-done .login-workflow-task{animation-delay:.24s}
.login-workflow-task strong{display:block;overflow:hidden;color:#31251c;font-size:10px;font-weight:750;white-space:nowrap;text-overflow:ellipsis}
.login-workflow-task>span{display:flex;align-items:center;gap:4px;margin-top:10px}.login-workflow-avatar{width:17px;height:17px;display:grid;place-items:center;flex:none;border-radius:50%;background:#f4c99f;color:#7c390f;font-size:7px;font-style:normal;font-weight:900}.login-workflow-task b{width:15px;height:4px;border-radius:9px;background:#e7dcd1}.login-workflow-task b:last-child{width:9px}
.login-workflow-runner{position:absolute;top:116px;left:8px;width:calc(33.333% - 21.333px);min-width:0;padding:9px 7px;border:1px solid rgba(249,115,22,.4);border-radius:9px;background:#fff4eb;box-shadow:0 8px 17px rgba(121,57,18,.12);box-sizing:border-box;animation:login-runner-trip 18s ease-in-out 1.15s infinite both}
.login-workflow-runner strong{display:block;overflow:hidden;color:#7c390f;font-size:10px;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.login-workflow-progress{display:block;height:4px;margin-top:12px;border-radius:6px;background:#f4dac6;overflow:hidden}.login-workflow-progress i{display:block;width:100%;height:100%;border-radius:6px;background:#f97316;transform-origin:left;animation:login-progress 18s ease-in-out 1.15s infinite both}
.login-shell.is-login-interacting .login-workflow,.login-shell.is-login-interacting .login-workflow *{animation-play-state:paused}
@keyframes login-board-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes login-task-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes login-runner-trip{0%,8%{left:8px;opacity:0}12%,25%{left:8px;opacity:1}38%,50%{left:calc(33.333% + 10.667px);opacity:1}63%,76%{left:calc(66.666% + 13.333px);opacity:1}90%,100%{left:calc(66.666% + 13.333px);opacity:0}}
@keyframes login-progress{0%,25%{transform:scaleX(.22)}50%{transform:scaleX(.58)}76%,100%{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.login-workflow,.login-workflow-task,.login-workflow-runner,.login-workflow-progress i{animation:none!important}.login-workflow-runner{left:8px;opacity:1}.login-workflow-progress i{transform:scaleX(.22)}}
.login-mobile-visual{display:none}
@media(max-width:900px){
    .login-mobile-visual{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;padding-bottom:17px;border-bottom:1px solid var(--line)}
    .login-mobile-visual img{display:block;width:86px;height:47px;object-fit:contain;object-position:left center}
    .login-mobile-steps{display:flex;align-items:center;gap:5px}
    .login-mobile-steps i{width:9px;height:9px;border-radius:50%;background:#e6ccb2}
    .login-mobile-steps i:nth-child(2){background:#f97316}.login-mobile-steps i:nth-child(3){background:#38815b}
}
@media print{
    .btn,.modal-close,.task-edit,.task-delete,.btn-delete-att,.btn-delete-icon,
    .drive-link-remove,.modal-tab-btn,.rich-toolbar button,.color-swatch,.icon-link,
    .team-management-card,.task-card,.attachment-card,.history-item,.focus-item,.timeline-item,
    .calendar-bar,.table-card tbody tr,.team-page-slider .data-table tbody tr,.timesheet-table tbody tr{
        transform:none!important;
        box-shadow:none!important;
    }
}

.section-heading>*{min-width:0}
.section-heading .count-pill{flex:0 0 auto;white-space:nowrap}
.calendar-day-indicators{display:none}
.calendar-week{min-height:calc(86px + var(--week-rows) * 31px)}
.calendar-cell{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow:hidden;border:0;border-right:1px solid var(--line);color:inherit;font:inherit;text-align:left;cursor:pointer}
.calendar-cell:last-child{border-right:0}
.calendar-day-number{position:relative;z-index:4;display:inline-grid;place-items:center;align-self:flex-start;line-height:1}
.calendar-overflow-label{position:absolute;z-index:3;right:7px;bottom:7px;left:7px;display:block;padding:3px 6px;border-radius:6px;background:rgba(255,253,250,.94);color:#9a3412!important;font-size:9px!important;font-weight:850!important;line-height:1.2;text-align:center;white-space:nowrap;box-shadow:0 1px 4px rgba(45,35,25,.1)}
.calendar-cell:hover .calendar-overflow-label{background:#fff1e6;color:#c2410c!important}
.day-agenda-list{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.day-agenda-item{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink)}
.day-agenda-item:hover{border-color:#f1b68b;background:#fff8f2}
.day-agenda-item>.status-dot{flex:0 0 auto;margin-top:5px}
.day-agenda-item>span{display:grid;min-width:0;gap:3px}
.day-agenda-item strong,.day-agenda-item small{overflow-wrap:anywhere}
.day-agenda-item small{color:var(--muted);font-size:11px;line-height:1.45}

.calendar-bars-wrap{display:contents}

.archive-top-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"heading nav" "overview overview";align-items:center;gap:16px 18px;margin-bottom:14px}
.archive-page-heading{grid-area:heading;margin:0}
.archive-header-nav{grid-area:nav;justify-self:end}
.archive-top-layout>.archive-overview{grid-area:overview;margin:0}
.team-page-summary>.team-stat-card{display:flex;align-items:center;flex-direction:row;min-width:0;padding:10px 16px;gap:12px}
.team-page-summary .team-stat-icon-circle{display:grid;place-items:center;flex:0 0 40px;min-width:0;width:40px;height:40px;padding:0;border-radius:10px;box-shadow:none}
.team-page-summary .team-stat-icon-circle svg{width:20px;height:20px}
.team-page-summary .team-stat-info{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.team-page-summary .team-stat-number{display:block;text-align:center;font-size:20px;font-weight:800;line-height:1.1;color:var(--orange-2)}
.team-page-summary .team-stat-label{display:block;text-align:center;font-size:11px;font-weight:600;color:var(--muted);margin-top:2px}

@media(max-width:1200px){
    .page-heading{align-items:flex-start;flex-direction:column;gap:15px}
    .page-heading>div:first-child{width:100%;max-width:none}
    .page-heading h1{font-size:clamp(29px,5vw,38px)}
    .page-heading>.btn,.page-heading>nav,.page-heading>.team-page-summary,.page-heading>.archive-header-nav{align-self:stretch}

    .summary-cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .summary-stat-card{min-width:0;padding:14px;gap:11px}

    .team-page-summary{display:grid;width:100%;grid-template-columns:repeat(3,minmax(150px,190px));justify-content:center;gap:8px}
    .team-stat-card{width:100%;min-width:0;padding:8px 11px}

    .kanban{grid-template-columns:repeat(4,minmax(250px,280px));overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding-bottom:14px}
    .kanban-column{min-width:0;scroll-snap-align:start}
    .task-actions .task-action-label{display:none}
    .task-detail-btn,.task-edit,.task-delete,.card-colors>summary{width:40px;min-width:40px;min-height:40px;padding:6px!important}
    .card-colors>summary .color-swatch{width:22px;height:22px}
    .task-actions .icon{width:17px;height:17px}
}

@media(min-width:601px) and (max-width:1200px){
    .calendar-board{overflow:hidden!important;min-width:0!important;width:100%}
    .calendar-weekdays,.calendar-week{min-width:0!important;width:100%}
    .calendar-weekdays div{padding:9px 4px;font-size:9.5px;text-align:center}
    .calendar-week{
        position:relative;
        min-height:calc(82px + var(--week-rows) * 30px);
        padding-top:0;
        box-sizing:border-box;
    }
    .calendar-cells{
        position:absolute;
        inset:0;
    }
    .calendar-cell{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        padding:7px 6px;
        overflow:hidden;
        text-align:left;
    }
    .calendar-cell .calendar-day-number{
        font-size:11.5px;
        font-weight:850;
        line-height:1;
    }
    .calendar-cell.today .calendar-day-number{
        width:24px;
        height:24px;
        margin:-4px 0 0 -4px;
        display:grid;
        place-items:center;
        border-radius:50%;
        background:var(--orange);
        color:#fff;
    }
    .calendar-cell small{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        text-overflow:ellipsis;
        margin-top:4px;
        font-size:7.5px;
        line-height:1.15;
        max-height:19px;
        color:#b42318;
    }
    .calendar-bars-wrap{display:contents}
    .calendar-bars{
        position:absolute;
        top:42px;
        left:0;
        right:0;
        display:grid;
        grid-template-columns:repeat(7,minmax(0,1fr));
        gap:5px 0;
        padding:0 6px;
        pointer-events:none;
        min-width:0;
    }
    .calendar-bar{
        height:25px;
        min-width:0;
        overflow:hidden;
        padding:3px 7px;
        font-size:9.5px;
        font-weight:850;
        border-radius:6px;
        pointer-events:auto;
    }
    .calendar-bar.continues-before{border-radius:0 6px 6px 0}
    .calendar-bar.continues-after{border-radius:6px 0 0 6px}
    .calendar-overflow-label{right:5px;bottom:6px;left:5px;padding-inline:3px;font-size:8px!important}
}

@media(max-width:600px){
    .page-heading{gap:13px;margin-bottom:20px}
    .page-heading h1{font-size:clamp(27px,9vw,34px);line-height:1.08}
    .page-heading p:not(.eyebrow){font-size:12px;line-height:1.55}
    .page-heading>.btn{width:100%}
    .page-heading .view-switch{width:100%}
    .page-heading .view-switch button,.page-heading .view-switch a{flex:1;justify-content:center}

    .work-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
    .work-filters .filter-search{grid-column:1/-1;width:100%;min-width:0;height:42px;box-sizing:border-box}
    .work-filters [data-live-search-clear]{grid-column:1/-1;width:100%;min-width:0;height:42px;box-sizing:border-box;justify-content:center}
    .work-filters .work-team-filter{grid-column:1/-1;width:100%;min-width:0}
    .work-team-filter>summary{width:100%;box-sizing:border-box}
    .work-team-filter-menu{left:0;right:0;width:100%;max-width:100%;box-sizing:border-box}
    .work-team-filter-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .work-team-filter-actions .btn{width:100%;min-width:0;padding-inline:8px}
    .work-filters .select{grid-column:auto;width:100%;max-width:none;height:42px;min-height:42px;font-size:12px;box-sizing:border-box;margin:0}
    .work-filters .filter-reset{grid-column:auto;width:100%;min-width:0;height:42px;min-height:42px;margin:0;padding:0 10px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap}

    .work-view-heading{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;gap:8px;text-align:center}
    .work-view-heading .view-switch{justify-self:center;width:max-content;min-width:0;margin-inline:auto}
    .work-view-heading>.muted{grid-row:2;width:100%;max-width:100%;text-align:center;line-height:1.35;overflow-wrap:anywhere}

    .section-heading,.team-section-heading{align-items:flex-start;flex-wrap:wrap;gap:9px}
    .section-heading>div:first-child,.team-section-heading>div:first-child{flex:1 1 220px}
    .section-heading .count-pill,.team-section-heading .count-pill{height:25px;padding-inline:8px;font-size:10px}

    .summary-progress-card{padding:15px 16px;gap:11px}
    .progress-info{align-items:flex-start;flex-direction:column;gap:9px}
    .progress-stats{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px}
    .progress-number{font-size:25px}
    .progress-caption{font-size:11px;line-height:1.35}
    .progress-track{height:9px}
    .summary-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .summary-stat-card{padding:11px;gap:9px;border-radius:12px}
    .summary-stat-card.total{grid-column:1/-1}
    .stat-card-icon{width:34px;height:34px;border-radius:9px}
    .stat-card-icon .icon{width:17px;height:17px}
    .stat-card-content strong{font-size:20px}
    .stat-card-content span{font-size:10px;white-space:normal;line-height:1.25}

    .team-page-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
    .team-page-summary>.team-stat-card{display:grid;justify-items:center;gap:5px;padding:8px 4px;text-align:center;border-radius:10px}
    .team-stat-icon-circle{width:27px;height:27px;border-radius:7px}
    .team-stat-icon-circle svg{width:14px;height:14px}
    .team-stat-info{width:100%}
    .team-stat-number{font-size:17px}
    .team-stat-label{font-size:8px;white-space:normal;line-height:1.15;min-height:18px}
    .team-cards-grid{grid-template-columns:minmax(0,1fr)}
    .team-panel-toolbar .filter-search{flex:none;width:100%;height:42px;min-height:42px}
    .team-panel-toolbar .filter-search input{height:100%;min-height:0}

    .workspace-view-heading,
    .section-heading.workspace-view-heading{
        display:grid!important;
        grid-template-columns:100%!important;
        justify-items:center!important;
        justify-content:center!important;
        justify-self:center!important;
        align-items:center!important;
        width:100%!important;
        margin-inline:auto!important;
        gap:8px!important;
        text-align:center!important;
    }
    .workspace-view-heading .view-switch,
    .section-heading.workspace-view-heading .view-switch{
        display:flex!important;
        justify-self:center!important;
        width:min(100%,340px)!important;
        margin-inline:auto!important;
        box-sizing:border-box;
    }
    .workspace-view-heading .view-switch button,
    .section-heading.workspace-view-heading .view-switch button{
        flex:1 1 0!important;
        width:100%!important;
        min-width:0!important;
        min-height:40px!important;
        padding:8px 4px!important;
        font-size:12px!important;
        justify-content:center!important;
        text-align:center!important;
        white-space:nowrap!important;
        box-sizing:border-box!important;
    }
    .workspace-view-heading .view-switch button .icon,
    .section-heading.workspace-view-heading .view-switch button .icon{
        width:14px;
        height:14px;
        flex-shrink:0;
    }
    .workspace-view-heading>.muted,
    .section-heading.workspace-view-heading>.muted,
    .workspace-view-heading [data-page-view-label],
    .section-heading.workspace-view-heading [data-page-view-label]{
        display:block!important;
        grid-column:1/-1!important;
        width:100%!important;
        max-width:none!important;
        text-align:center!important;
        justify-self:center!important;
        font-size:11px!important;
        line-height:1.4!important;
    }

    .history-filter-toolbar{padding:10px!important}
    .history-filter-toolbar .history-filters{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%;gap:8px!important}
    .history-filter-toolbar .history-filters .select{width:100%;height:42px;min-height:42px;margin:0}
    .history-filter-toolbar .history-filters .filter-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;margin:0}
    .history-filter-toolbar .history-filters .filter-actions .btn{width:100%;height:42px;min-height:42px;padding-inline:8px}
    .team-header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
    .team-header-actions>*{min-width:0;width:100%}
    .team-header-actions .btn,.team-header-actions summary{width:100%;justify-content:center}

    .archive-top-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "overview" "nav";gap:13px;margin-bottom:14px}
    .archive-page-heading{width:100%}
    .archive-header-nav{display:grid!important;grid-template-columns:40px minmax(0,1fr) 40px;width:100%;justify-self:stretch;gap:6px}
    .archive-header-nav .archive-btn-today{grid-column:1/-1;width:100%}
    .archive-select-label{display:none}
    .archive-select-wrap{padding-inline:9px;gap:6px}
    .archive-select-current{font-size:12px}
    .archive-overview,.calendar-overview{gap:14px;margin-bottom:13px;padding:17px 15px}
    .archive-overview-copy h2,.calendar-overview-copy h2{font-size:21px}
    .archive-overview-copy p,.calendar-overview-copy p{font-size:11px;line-height:1.5}
    .archive-overview-stats,.calendar-overview-stats{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;min-width:0}
    .archive-overview-stats div,.calendar-overview-stats div{min-width:0;padding:9px 5px}
    .calendar-overview-stats div{text-align:center}
    .archive-overview-stats span,.calendar-overview-stats span{font-size:7px;line-height:1.25;overflow-wrap:anywhere}
    .archive-overview-stats strong,.calendar-overview-stats strong{font-size:18px}
    .archive-slide-wrapper{overflow:hidden}
    .archive-table-slide{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .archive-table-slide table{min-width:920px}
    .archive-table-slide th,.archive-table-slide td{padding:15px 18px;line-height:1.5}
    .archive-table-slide th:nth-child(2),.archive-table-slide td:nth-child(2){min-width:245px}
    .archive-table-slide th:nth-child(4),.archive-table-slide td:nth-child(4){min-width:185px}
    .archive-table-slide th:nth-child(6),.archive-table-slide td:nth-child(6){min-width:215px;white-space:nowrap}

    .kanban{grid-template-columns:repeat(4,minmax(250px,82vw));gap:12px;overflow-x:auto}
    .kanban-column{min-width:0}
    .task-card{padding:15px}
    .task-actions{gap:6px}
    .card-colors[open]{flex-basis:auto;order:initial}
    .card-colors[open]>summary{justify-content:center}
    .quick-colors{position:absolute;z-index:25;left:0;width:150px}

    .calendar-board-wrapper{overflow:visible}
    .calendar-board{overflow:visible!important;border-radius:13px}
    .calendar-weekdays,.calendar-week{min-width:0!important;width:100%}
    .calendar-weekdays div{min-width:0;padding:8px 1px;text-align:center;font-size:8px}
    .calendar-week{min-height:64px!important;padding-top:0!important}
    .calendar-cells{position:relative;inset:auto;min-height:64px}
    .calendar-bars,.calendar-bars-wrap{display:none!important}
    .calendar-cell{position:relative;display:flex;align-items:flex-start;flex-direction:column;min-width:0;min-height:64px;padding:7px 4px 4px;overflow:hidden;text-align:left}
    .calendar-cell:last-child{border-right:0}
    .calendar-cell>small{display:none!important}
    .calendar-overflow-label{display:none}
    .calendar-cell.today>.calendar-day-number{width:24px;height:24px;margin:-3px 0 0;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:#fff}
    .calendar-day-number{font-size:10px;font-weight:800}
    .calendar-day-indicators{display:flex;align-items:center;align-self:center;justify-content:center;flex-wrap:wrap;gap:3px;margin-top:7px;max-width:100%}
    .calendar-day-indicators .status-dot{width:6px;height:6px;flex:0 0 6px}
    .calendar-day-indicators b{display:grid;place-items:center;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#eee7df;color:#5d5147;font-size:8px;line-height:1}
    .calendar-legend{gap:7px 10px;font-size:9px}
    .calendar-legend span,.calendar-legend button{font-size:9px}
    .calendar-toolbar{padding:10px}
    .month-nav{width:100%;justify-content:space-between}
    .month-nav strong{min-width:0;flex:1;font-size:13px}
    .day-agenda-card{max-height:calc(100dvh - 20px)}
    .day-agenda-list{padding:14px}
    .day-agenda-item{padding:11px}
    .timesheet-title{align-items:center;flex-direction:column;gap:10px;padding-bottom:16px;text-align:center}
    .timesheet-title>div:first-child,.timesheet-title>div:last-child{width:100%;justify-items:center;text-align:center}
    .timesheet-title h2{font-size:21px}
    .timesheet-title span{line-height:1.45}
}

@media(max-width:380px){
    .work-team-filter-actions{grid-template-columns:minmax(0,1fr)}
    .work-view-heading{gap:7px}
    .work-view-heading .view-switch button{padding-inline:8px}
    .work-view-heading>.muted{font-size:9px}
}

.rate-limit-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.rate-limit-shell { width: min(100%, 520px); }
.rate-limit-shell .login-brand { margin-bottom: 24px; }
.rate-limit-card { background: var(--white, #fffdfa); border: 1px solid rgba(17,16,15,.09); border-radius: 24px; padding: clamp(28px, 6vw, 48px); box-shadow: 0 24px 70px rgba(17,16,15,.12); }
.rate-limit-header { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 24px; text-align: center; }
.rate-limit-header .eyebrow { margin: 0; }
.rate-limit-card h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.13; margin: 10px 0 16px; }
.rate-limit-card p:not(.eyebrow) { color: #5d5a57; line-height: 1.6; margin-bottom: 28px; }
.rate-limit-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #9a3412; background: #ffedd5; font-size: 1.8rem; font-weight: 800; }
.backlog-assignment-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; padding-top: 8px; border-top: 1px solid #77583820; min-width: 0; }
.backlog-assignment-row .backlog-claim-form { flex: 0 0 auto; }
.backlog-assignment-row .backlog-assign-form { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; gap: 5px; min-width: 0; }
.backlog-assignment-row .backlog-assign-form .select { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; min-height: 29px; padding: 4px 18px 4px 7px; font-size: 10px; }
.backlog-assignment-row .btn { flex: 0 0 auto; min-height: 29px; padding: 4px 7px; border-radius: 7px; font-size: 10px; line-height: 1.1; white-space: nowrap; }

/* Done Scope & Archive Notice */
.done-month-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 6px; background: #e2f2e7; color: #1e6a38; border: 1px solid #c2e4cc; white-space: nowrap; }
.kanban-done-scope-select {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 2px 18px 2px 7px;
    height: 23px;
    line-height: 1.2;
    border-radius: 6px;
    cursor: pointer;
    background-color: #fffdfa;
    border: 1px solid #badfc5;
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 7px 4px;
    transition: all .15s ease;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 125px;
    outline: none;
}
.kanban-done-scope-select.is-month {
    background-color: #eaf5ee;
    color: #1e6a38;
    border-color: #badfc5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%231e6a38' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
}
.kanban-done-scope-select.is-month:hover {
    background-color: #def0e3;
    border-color: #9eccab;
}
.kanban-done-scope-select.is-all {
    background-color: #fff4eb;
    color: #9a3412;
    border-color: #fed7aa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%239a3412' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
}
.kanban-done-scope-select.is-all:hover {
    background-color: #ffeedd;
    border-color: #fdba74;
}
.kanban-done-scope-select:focus-visible {
    outline: 2px solid rgba(249,115,22,.45);
    outline-offset: 1px;
}

.done-archive-notice { margin-top: 12px; padding: 11px 12px; background: #f0ebe2; border: 1px dashed #d5c8b7; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.done-archive-notice .muted { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #725e4c; line-height: 1.4; flex-wrap: wrap; }
.done-archive-notice .muted strong { color: #2d241c; }
.done-archive-notice .muted .icon { width: 13px; height: 13px; color: #9c6c44; flex-shrink: 0; }
.done-archive-actions { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; width: 100%; margin-top: 2px; }
.done-archive-actions .btn { font-size: 10.5px !important; padding: 4px 10px !important; min-height: 27px !important; line-height: 1.2; border-radius: 7px; border: 1px solid #d4c8b8; background: #fffdfa; color: #5f4a38; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; }
.done-archive-actions .btn:hover { background: #fff5eb; border-color: #f7c79f; color: #c45512; }
.list-archive-notice { margin-top: 22px; max-width: 680px; margin-inline: auto; padding: 14px 18px; }