/* WHC TimeTrack — compiled stylesheet (Tailwind component layer + base tokens). */
:root{
--brand:#3dc0c8; --brand-dark:#2BA8B0; --brand-soft:#E6F7F5; --accent:#F59E0B;
--c-pending:#64748B; --c-progress:#3dc0c8; --c-hold:#F59E0B; --c-review:#8B5CF6; --c-done:#16A34A; --c-cancel:#B91C1C; --c-overdue:#DC2626;
--bg:#F7FAFB; --surface:#FFFFFF; --border:#E6ECEE; --text:#0F1B1F; --muted:#6B7B82;
--success:#16A34A; --warn:#F59E0B; --danger:#DC2626; --info:#2563EB;
--radius:14px; --radius-sm:10px;
--shadow:0 4px 14px rgba(15,27,31,0.06); --shadow-lg:0 12px 32px rgba(15,27,31,0.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--brand-dark);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}

/* ==========================================================================
   1. Standard Syntax (Currently supported by Firefox)
   ========================================================================== */
html {
  /* Options: auto | thin | none */
  scrollbar-width: thin; 
}

/* ==========================================================================
   2. WebKit Syntax (Chrome, Edge, Safari, Opera, Brave)
   ========================================================================== */
/* The overall width of the scrollbar */
::-webkit-scrollbar {
  width: 10px;  /* For vertical scrollbars */
  height: 10px; /* For horizontal scrollbars */
}

/* Optional: Style the track (background) */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Optional: Style the draggable thumb */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 5px;
}

/* Optional: Style the thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:
radial-gradient(1200px 600px at 10% -10%, var(--brand-soft), transparent 60%),
radial-gradient(900px 500px at 110% 110%, #FFF4DE, transparent 60%), var(--bg);}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);width:100%;max-width:420px;padding:32px 28px}
.login-logo{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:18px}
.login-logo .badge{width:88px;height:88px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.login-logo .badge svg{width:100%;height:100%}
.login-title{font-size:20px;font-weight:800;margin-top:14px}
.login-sub{color:var(--muted);font-size:13px;margin-top:4px;text-align:center}
.field{margin-top:14px}
.field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.field input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;outline:none;transition:border-color .15s,box-shadow .15s}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(61,192,200,.18)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;font-size:14px;transition:all .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-warn{background:var(--warn);border-color:var(--warn);color:#fff}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 11px;font-size:12.5px;border-radius:9px}
.btn-block{width:100%}
.login-actions{margin-top:18px}
.alert{padding:10px 12px;border-radius:10px;font-size:13px;margin-top:14px;display:none}
.alert.show{display:block}
.alert-error{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA}
.alert-info{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE}
.alert-success{background:#F0FDF4;color:#166534;border:1px solid #BBF7D0}
.hint{font-size:11px;color:var(--muted);margin-top:8px;text-align:center}
.hint code{background:#F1F5F6;padding:2px 6px;border-radius:6px;color:var(--text)}

/* APP SHELL */
.app{display:none}
.app.show{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.sidebar-head{padding:18px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sidebar-head .badge{width:40px;height:40px;border-radius:12px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.sidebar-head .badge svg{width:100%;height:100%}
.sidebar-head .title{font-weight:800;font-size:14px;line-height:1.15}
.sidebar-head .sub{font-size:11px;color:var(--muted)}
.nav{padding:10px;flex:1;overflow-y:auto}
.nav .item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text);font-size:13.5px;font-weight:500;cursor:pointer;transition:all .12s;border:1px solid transparent}
.nav .item i{width:18px;text-align:center;color:var(--muted)}
.nav .item:hover{background:var(--brand-soft);color:var(--brand-dark)}
.nav .item:hover i{color:var(--brand-dark)}
.nav .item.active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(20,184,176,.3)}
.nav .item.active i{color:#fff}
.nav .group{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:14px 14px 6px;font-weight:700}
.sidebar-foot{border-top:1px solid var(--border);padding:12px}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;background:var(--brand-soft)}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.user-name{font-size:13px;font-weight:600;line-height:1.1}
.user-role{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.logout-link{margin-top:8px;display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;font-size:13px;color:var(--muted);cursor:pointer}
.logout-link:hover{background:#F8FAFB;color:var(--danger)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:12px}
.topbar .mobile-burger{display:none;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:8px 10px}
.topbar h1{font-size:17px;margin:0;font-weight:700}
.topbar .crumb{color:var(--muted);font-size:12.5px}
.topbar .spacer{flex:1}
.topbar .quick-action{display:flex;gap:8px}
.content{padding:20px;max-width:1400px;width:100%;margin:0 auto}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card + .card{margin-top:14px}
.card h3{margin:0 0 12px;font-size:15px;font-weight:700}
.flex{display:flex;align-items:center;gap:10px}
.flex-wrap{flex-wrap:wrap}
.spacer{flex:1}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.kpi{padding:18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;gap:14px}
.kpi .icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand-dark);font-size:18px;flex-shrink:0}
.kpi .label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.kpi .value{font-size:22px;font-weight:800;margin-top:2px}
.kpi.amber .icon{background:#FFF4DE;color:#B45309}
.kpi.blue .icon{background:#E0EFFF;color:#1D4ED8}
.kpi.green .icon{background:#E1FBEA;color:#15803D}
.kpi.red .icon{background:#FEE2E2;color:#B91C1C}

label.lbl{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:10px 0 6px;text-transform:uppercase;letter-spacing:.5px}
input.in,select.in,textarea.in{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;outline:none}
input.in:focus,select.in:focus,textarea.in:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(20,184,176,.12)}
textarea.in{min-height:80px;resize:vertical}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;background:#F1F5F6;color:#334;letter-spacing:.3px}
.pill.ind{background:#E0EFFF;color:#1D4ED8}
.pill.uae{background:#FEF3C7;color:#92400E}
.pill.ok{background:#E1FBEA;color:#15803D}
.pill.off{background:#FEE2E2;color:#B91C1C}

table.t{width:100%;border-collapse:collapse}
table.t th,table.t td{padding:10px;border-bottom:1px solid var(--border);font-size:13.5px;text-align:left;vertical-align:middle}
table.t th{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:#FAFCFC;cursor:pointer}
table.t tr:hover td{background:#FAFCFC}
.t-wrap{overflow-x:auto}
.row-actions{display:flex;gap:4px;justify-content:flex-end}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.icon-btn:hover{color:var(--brand-dark);border-color:var(--brand)}
.icon-btn.danger:hover{color:var(--danger);border-color:var(--danger)}
.num{text-align:right;font-variant-numeric:tabular-nums}

.modal-bg{position:fixed;inset:0;background:rgba(15,27,31,.5);backdrop-filter:blur(2px);z-index:50;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.show{display:flex}
.modal{background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:640px;max-height:90vh;overflow:auto}
.modal.lg{max-width:880px}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-h h3{margin:0;font-size:16px;font-weight:700}
.modal-b{padding:18px 20px}
.modal-f{padding:14px 20px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;background:#FAFCFC;border-radius:0 0 18px 18px}
@media (max-width:640px){.modal-f{justify-content:stretch}.modal-f .btn{flex:1 1 calc(50% - 4px);min-width:0;padding:11px 8px;font-size:13px}}

#toast-container{position:fixed;top:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--surface);border:1px solid var(--border);border-left-width:4px;border-radius:10px;padding:10px 14px;box-shadow:var(--shadow-lg);font-size:13px;font-weight:500;animation:slidein .2s ease-out;min-width:240px;max-width:340px}
.toast.success{border-left-color:var(--success)}
.toast.error{border-left-color:var(--danger)}
.toast.warn{border-left-color:var(--warn)}
.toast.info{border-left-color:var(--info)}
@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

.spinner{width:18px;height:18px;border:2px solid rgba(0,0,0,.1);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.page-loader{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--muted);gap:10px;font-size:13px}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;overflow-x:auto}
.tab{padding:9px 14px;border:1px solid transparent;border-bottom:none;border-radius:10px 10px 0 0;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab.active{color:var(--brand-dark);background:#fff;border-color:var(--border)}

.ddl{position:absolute;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);max-height:240px;overflow-y:auto;z-index:30;width:100%;margin-top:4px}
.ddl .opt{padding:8px 12px;font-size:13px;cursor:pointer}
.ddl .opt:hover{background:var(--brand-soft);color:var(--brand-dark)}
.ddl .opt small{display:block;color:var(--muted);font-size:11px}

.timer-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--brand-soft);border:1px solid #CDEEEC;border-radius:14px;padding:16px}
.timer-display{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--brand-dark);letter-spacing:1px}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty i{font-size:32px;opacity:.4;margin-bottom:10px;display:block}
.small{font-size:12px;color:var(--muted)}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
.chart-box{position:relative;height:260px;width:100%}
.chart-box canvas{position:absolute;top:0;left:0;width:100% !important;height:100% !important}
@media (max-width:900px){
.sidebar{position:fixed;left:-260px;height:100vh;z-index:50;transition:left .25s ease}
.sidebar.open{left:0;box-shadow:var(--shadow-lg)}
.topbar .mobile-burger{display:inline-flex}
.content{padding:14px}.topbar{padding:10px 14px}.topbar h1{font-size:15px}
}
.overlay{position:fixed;inset:0;background:rgba(15,27,31,.4);z-index:40;display:none}
.overlay.show{display:block}

/* password eye */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:42px !important}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--muted)}
.pw-eye:hover{color:var(--brand-dark)}

/* sticky filter bar (stays put while scrolling results) */
.sticky-filter{position:sticky;top:58px;z-index:9}
@media (max-width:900px){ .sticky-filter{top:52px} }

/* wider, wrapping category column in entry tables */
.col-cat{min-width:230px}
table.t td.col-cat{white-space:normal}

/* button loading state */
.btn[disabled]{opacity:.65;cursor:not-allowed}

/* row flow-in animation (new entry appearing in Today's Entries) */
@keyframes flowIn{0%{transform:translateY(-14px);opacity:0;background:#E6F8F7}60%{background:#E6F8F7}100%{transform:translateY(0);opacity:1;background:transparent}}
tr.flow-in td{animation:flowIn .6s ease-out}

/* custom time picker */
.tp-pop{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);z-index:300;width:230px;overflow:hidden;animation:tpIn .15s ease-out}
@keyframes tpIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.tp-head{display:grid;grid-template-columns:1fr 1fr .8fr;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;background:#FAFCFC;border-bottom:1px solid var(--border)}
.tp-head div{padding:7px 0;text-align:center}
.tp-cols{display:grid;grid-template-columns:1fr 1fr .8fr;height:208px}
.tp-col{overflow-y:auto;border-right:1px solid var(--border);padding:4px 0;scroll-behavior:smooth}
.tp-col:last-child{border-right:none}
.tp-ap{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 8px}
.tp-item{padding:8px 6px;text-align:center;font-size:13.5px;cursor:pointer;border-radius:9px;margin:1px 5px;font-variant-numeric:tabular-nums;transition:background .12s,color .12s,transform .08s}
.tp-item:hover{background:var(--brand-soft);color:var(--brand-dark)}
.tp-item:active{transform:scale(.94)}
.tp-item.sel{background:var(--brand);color:#fff;font-weight:700;box-shadow:0 3px 8px rgba(20,184,176,.35)}
.tp-ap .tp-item{padding:12px 6px;border:1px solid var(--border)}
.tp-foot{display:flex;gap:6px;justify-content:space-between;padding:8px;border-top:1px solid var(--border);background:#FAFCFC}
.tp-col::-webkit-scrollbar{width:8px}
.tp-col::-webkit-scrollbar-thumb{background:#cdd7da;border-radius:8px}
.tp-col::-webkit-scrollbar-thumb:hover{background:#aebac0}
.tp-field{cursor:pointer;background:#fff}

/* notification bell */
.bell-wrap{position:relative}
.bell-badge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;border-radius:999px;font-size:10px;font-weight:800;min-width:17px;height:17px;line-height:17px;text-align:center;padding:0 4px}
.notif-panel{display:none;position:absolute;right:0;top:calc(100% + 6px);width:340px;max-height:420px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);z-index:120}
.notif-panel.show{display:block}
.notif-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;font-weight:700;font-size:13px}
.notif-item{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);font-size:12.5px;align-items:flex-start}
.notif-item:hover{background:#FAFCFC}
.notif-item .ni-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:5px;flex-shrink:0}
.notif-item .ni-body{flex:1;min-width:0}
.notif-item .ni-time{color:var(--muted);font-size:11px;margin-top:2px}
.tk-menu-pop button.tk-mi{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;padding:8px 12px;border-radius:8px}
.tk-menu-pop button.tk-mi:hover{background:#F4F7F8}
.notif-item .ni-act{display:flex;gap:6px;margin-top:8px}
.notif-item .ni-act .btn{padding:4px 10px;font-size:11.5px}
.notif-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px}
@media (max-width:640px){ .notif-panel{width: 90vw;
        right: 0px;
        left: 0px;  } 
    
  
}

/* team chat */
.chat-fab{position:fixed;right:20px;bottom:20px;z-index:130;width:54px;height:54px;border-radius:50%;background:var(--brand);color:#fff;border:none;box-shadow:var(--shadow-lg);font-size:20px;cursor:pointer;display:none}
.chat-fab.show{display:flex;align-items:center;justify-content:center}
.fab-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#E11D48;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.chat-g{position:relative}
.chat-g .g-unread{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#E11D48;color:#fff;font-size:10px;font-weight:800;float:right;margin-left:6px}
.chat-g.has-unread{font-weight:700}
@keyframes fabpulse{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.chat-fab.pulse{animation:fabpulse .4s ease}
.chat-win{position:fixed;right:20px;bottom:86px;z-index:131;width:400px;max-width:94vw;height:540px;max-height:78vh;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;overflow:hidden}
.chat-win.show{display:flex}
.chat-hd{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px}
.chat-body{flex:1;display:flex;min-height:0}
.chat-groups{width:135px;border-right:1px solid var(--border);overflow:auto;flex-shrink:0}
.chat-g{padding:9px 10px;border-bottom:1px solid var(--border);font-size:12.5px;cursor:pointer;line-height:1.2}
.chat-g:hover,.chat-g.active{background:var(--brand-soft);color:var(--brand-dark)}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-msgs{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px;background:#FAFCFC}
.chat-msg{max-width:88%;padding:7px 10px;border-radius:12px;font-size:13px;background:#fff;border:1px solid var(--border);align-self:flex-start;white-space:pre-wrap;word-break:break-word}
.chat-msg.me{background:var(--brand-soft);border-color:#CDEEEC;align-self:flex-end}
.chat-msg .cm-who{font-size:10.5px;color:var(--muted);font-weight:700;margin-bottom:2px}
.chat-compose{border-top:1px solid var(--border);padding:8px;display:flex;gap:6px;align-items:flex-end;position:relative}
.chat-compose textarea{flex:1;border:1px solid var(--border);border-radius:10px;padding:8px;resize:none;font-family:inherit;font-size:13px;max-height:90px;outline:none}
.mention-pop{position:absolute;bottom:56px;left:8px;width:230px;max-height:190px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);z-index:5;display:none}
.mention-pop .opt{padding:7px 10px;font-size:13px;cursor:pointer}
.mention-pop .opt:hover{background:var(--brand-soft)}
@media(max-width:640px){.chat-win{right:8px;left:8px;width:auto;bottom:80px}}

/* Zoho-style activity timeline */
.tl{position:relative;padding:4px 0 4px 0}
.tl:before{content:'';position:absolute;left:19px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-date{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:5px 14px;font-weight:700;font-size:12.5px;margin:12px 0 6px;position:relative;z-index:1}
.tl-date .dot{width:9px;height:9px;border-radius:50%;background:var(--success)}
.tl-item{display:flex;gap:10px;align-items:flex-start;padding:6px 0;position:relative}
.tl-time{flex-shrink:0;background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px 9px;font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;min-width:74px;justify-content:center}
.tl-time .odot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tl-av{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.tl-txt{font-size:13.5px;padding-top:5px;line-height:1.35}
.tl-act{color:var(--accent);font-weight:700}

/* Create-Tasks draft grid — even, aligned cells */
.tkgrid{min-width:1560px;table-layout:fixed}
.tkgrid thead th{white-space:nowrap;vertical-align:middle;font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;padding:10px 8px}
.tkgrid tbody td{vertical-align:top;padding:8px 6px}
.tkgrid td .in,.tkgrid td select.in,.tkgrid td textarea.in,.tkgrid td input{width:100%;box-sizing:border-box;padding:7px 9px;margin:0}
.tkgrid td input[disabled]{background:#F1F5F5;color:var(--muted);font-style:italic}
.tkgrid td:first-child,.tkgrid th:first-child{text-align:center}
.tkgrid td:first-child input,.tkgrid th:first-child input{width:auto}
.tkgrid tbody tr{border-top:1px solid var(--border)}

/* drag-to-reorder grip */
.drag-grip{cursor:grab;color:#c2ccce;width:30px;text-align:center}
.drag-grip:active{cursor:grabbing}
.drag-grip:hover{color:var(--brand)}
tr.drag-ghost{opacity:.35;background:var(--brand-soft)}
tr.drag-chosen td{background:#FAFCFC}
tr.drag-drag{box-shadow:var(--shadow-lg)}
.t-wrap{ -webkit-overflow-scrolling:touch }

/* mobile polish */
@media (max-width:640px){
  .content{padding:10px}
  .card{padding:14px;border-radius:12px}
  .kpi{padding:14px}
  .kpi .value{font-size:19px}
  .modal{max-width:100%;border-radius:14px}
  table.t th,table.t td{padding:8px 8px;font-size:12.5px}
  .btn{padding:10px 12px}
  .topbar .quick-action .btn span,.topbar .crumb{display:none}
}

/* ============================================================
   Date & time selection + enhanced responsiveness (added)
   ============================================================ */

/* --- Tailwind-styled native date / time / datetime pickers --- */
input.in[type="date"],
input.in[type="time"],
input.in[type="datetime-local"],
input.in[type="month"],
input[type="date"].in,
input[type="time"].in,
input[type="datetime-local"].in{
  -webkit-appearance:none; appearance:none;
  min-height:42px; padding-right:38px; cursor:pointer;
  background-image:none; color:var(--text); position:relative;
  font-variant-numeric:tabular-nums;
}
/* brand-tinted calendar/clock icon, full-field click target */
input.in[type="date"]::-webkit-calendar-picker-indicator,
input.in[type="time"]::-webkit-calendar-picker-indicator,
input.in[type="datetime-local"]::-webkit-calendar-picker-indicator,
input.in[type="month"]::-webkit-calendar-picker-indicator{
  position:absolute; right:8px; top:0; bottom:0; height:100%; width:26px;
  margin:0; padding:0; cursor:pointer; opacity:.7;
  filter:invert(48%) sepia(64%) saturate(564%) hue-rotate(130deg) brightness(92%);
  transition:opacity .15s, transform .12s;
}
input.in[type="date"]:hover::-webkit-calendar-picker-indicator,
input.in[type="time"]:hover::-webkit-calendar-picker-indicator,
input.in[type="datetime-local"]:hover::-webkit-calendar-picker-indicator{ opacity:1; transform:scale(1.06); }
input.in[type="date"]:focus,
input.in[type="time"]:focus,
input.in[type="datetime-local"]:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(20,184,176,.12); }
input.in[type="date"]::-webkit-datetime-edit,
input.in[type="time"]::-webkit-datetime-edit{ padding:2px 0; }
/* date cells inside the log grid stay compact but tappable */
.din{ min-height:38px; }

/* --- Custom time picker: bottom-sheet on phones for easy thumb reach --- */
.tp-backdrop{ position:fixed; inset:0; background:rgba(15,27,31,.34); z-index:299; animation:tpFade .15s ease-out; }
@keyframes tpFade{ from{opacity:0} to{opacity:1} }
@media (max-width:640px){
  .tp-pop{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:100% !important;
    border-radius:18px 18px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.18);
    animation:tpSheet .2s ease-out;
  }
  @keyframes tpSheet{ from{transform:translateY(100%)} to{transform:translateY(0)} }
  .tp-cols{ height:46vh; }
  .tp-item{ padding:13px 6px; font-size:16px; }
  .tp-ap .tp-item{ padding:16px 6px; }
  .tp-foot .btn{ flex:1; padding:13px; font-size:15px; }
  .tp-foot{ gap:10px; }
}

/* --- Broader responsiveness --- */
/* tablets: stack 2-up grids, let the org overview breathe */
@media (max-width:820px){
  .grid-2{ grid-template-columns:1fr; }
  .topbar{ flex-wrap:wrap; row-gap:8px; }
  .topbar h1{ font-size:18px; }
  .quick-action{ flex-wrap:wrap; }
}
/* any wide table scrolls horizontally instead of breaking layout */
.t-wrap{ overflow-x:auto; max-width:100%; }
table.t{ min-width:540px; }
/* phones: tighten chrome, full-width actions, comfy tap targets */
@media (max-width:640px){
  .btn{ min-height:42px; }
  .btn-block{ min-height:46px; }
  .in,.lbl{ font-size:14px; }
  .modal-b{ max-height:72vh; overflow:auto; }
  .login-card{ margin:14px; padding:22px 18px; }
  .row-actions{ gap:2px; }
  .icon-btn{ min-width:38px; min-height:38px; }
  .pill{ white-space:nowrap; }
  .sticky-filter .flex{ flex-wrap:wrap; gap:8px; }
  .sticky-filter .in,.sticky-filter select.in{ flex:1 1 140px; }
}
/* very small phones */
@media (max-width:380px){
  .content{ padding:8px; }
  .kpi .value{ font-size:18px; }
  table.t th,table.t td{ padding:7px 6px; font-size:12px; }
}

/* ============================================================
   Tailwind-styled date picker (custom calendar) — cross-browser
   ============================================================ */
.dp-input{ cursor:pointer; background-image:none; }
.dp-input::-webkit-calendar-picker-indicator{ display:none; } /* in case a browser keeps it */
.dp-backdrop{ position:fixed; inset:0; background:rgba(15,27,31,.34); z-index:299; animation:tpFade .15s ease-out; }
.dp-pop{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); z-index:300; width:300px; padding:12px;
  animation:tpIn .15s ease-out;
}
.dp-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.dp-nav{ width:34px; height:34px; border:1px solid var(--border); background:#fff; border-radius:9px; cursor:pointer; color:var(--text); display:flex; align-items:center; justify-content:center; transition:background .12s, border-color .12s; }
.dp-nav:hover{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand-dark); }
.dp-title{ flex:1; display:flex; gap:6px; }
.dp-msel{ flex:1; padding:7px 8px; border:1px solid var(--border); border-radius:9px; background:#fff; font-weight:600; outline:none; }
.dp-ysel{ width:74px; padding:7px 8px; border:1px solid var(--border); border-radius:9px; background:#fff; font-weight:600; outline:none; font-variant-numeric:tabular-nums; }
.dp-msel:focus,.dp-ysel:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(20,184,176,.14); }
.dp-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
.dp-dow div{ text-align:center; font-size:11px; font-weight:700; color:var(--muted); padding:4px 0; }
.dp-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-day{ aspect-ratio:1/1; min-height:36px; border:none; background:transparent; border-radius:9px; cursor:pointer; font-size:13.5px; color:var(--text); font-variant-numeric:tabular-nums; transition:background .12s, color .12s, transform .08s; }
.dp-day:hover{ background:var(--brand-soft); color:var(--brand-dark); }
.dp-day:active{ transform:scale(.92); }
.dp-empty{ background:transparent; cursor:default; }
.dp-today{ box-shadow:inset 0 0 0 1.5px var(--brand); font-weight:700; }
.dp-sel{ background:var(--brand); color:#fff; font-weight:700; box-shadow:0 3px 8px rgba(20,184,176,.35); }
.dp-sel:hover{ background:var(--brand-dark); color:#fff; }
.dp-disabled{ color:#c7d0d4; cursor:not-allowed; }
.dp-disabled:hover{ background:transparent; color:#c7d0d4; }
.dp-foot{ display:flex; gap:8px; margin-top:10px; }
.dp-foot .btn{ flex:1; justify-content:center; }
@media (max-width:640px){
  .dp-pop{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:100% !important; border-radius:18px 18px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.18); padding:16px 14px 22px; animation:tpSheet .2s ease-out;
  }
  .dp-day{ min-height:42px; font-size:15px; }
  .dp-dow div{ font-size:12px; }
  .dp-foot .btn{ padding:13px; font-size:15px; }
}

/* ============================================================
   Batch UI updates: toasts(20s), tab colours, pager, reminders,
   chat avatars/drag, date-icon alignment
   ============================================================ */

/* --- Toasts: enter slide-in, persist, exit slide/fade-out --- */
.toast{ opacity:0; transform:translateX(16px); transition:opacity .35s ease, transform .35s ease; cursor:pointer; }
.toast.show{ opacity:1; transform:translateX(0); }
.toast.out{ opacity:0; transform:translateX(40px); }

/* --- Task tabs: distinct colours, intensity by status --- */
.tab.tk-today.active{ color:#3dc0c8; background:#E6F8F7; border-color:#B7E9E6; box-shadow:inset 0 -3px 0 #14B8B0; }
.tab.tk-all.active{ color:#1F2937; background:#EEF2F4; border-color:#D7DEE2; box-shadow:inset 0 -3px 0 #64748B; }
.tab.tk-pending.active{ color:#B45309; background:#FEF3C7; border-color:#FCE3A6; box-shadow:inset 0 -3px 0 #F59E0B; }
.tab.tk-completed.active{ color:#15803D; background:#E1FBEA; border-color:#BBE9CB; box-shadow:inset 0 -3px 0 #16A34A; }
.tab.tk-holdcancel.active{ color:#B91C1C; background:#FEE2E2; border-color:#F6C9C9; box-shadow:inset 0 -3px 0 #DC2626; }
/* subtle colour hint even when inactive */
.tab.tk-today{ color:#3dc0c8; } .tab.tk-pending{ color:#B45309; }
.tab.tk-completed{ color:#15803D; } .tab.tk-holdcancel{ color:#B91C1C; }

/* --- Pager (All Tasks 100/page) --- */
.pager{ display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 4px 2px; flex-wrap:wrap; }
.pager-info{ font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* --- Reminder badge (amber, pulsing) --- */
.bell-badge.alarm{ background:var(--warn); }
@keyframes rmpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.bell-badge.alarm{ animation:rmpulse 1.6s ease-in-out infinite; }
.rm-sect{ border-bottom:1px solid var(--border); }
.rm-sect-h{ display:flex; align-items:center; gap:6px; padding:8px 12px; font-size:12px; font-weight:700; }
.rm-sect-h .rm-n{ margin-left:auto; background:rgba(0,0,0,.06); border-radius:8px; padding:0 7px; }
.rm-sect-h.rm-over{ color:#B91C1C; background:#FEF2F2; } .ni-dot.rm-over{ background:#DC2626; }
.rm-sect-h.rm-soon{ color:#B45309; background:#FFFBEB; } .ni-dot.rm-soon{ background:#F59E0B; }
.rm-sect-h.rm-new{ color:#1D4ED8; background:#EFF6FF; } .ni-dot.rm-new{ background:#2563EB; }

/* --- Chat group avatar (DP) + draggable window --- */
.chat-dp{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  color:#fff; font-size:11px; font-weight:800; flex-shrink:0; margin-right:9px; vertical-align:middle; cursor:pointer; }
.chat-dp.lg{ width:46px; height:46px; font-size:15px; }
.chat-g{ display:flex; align-items:center; }
.chat-g .g-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-hd{ cursor:move; user-select:none; }
.chat-win{ resize:none; }

/* --- Date icon alignment (custom Tailwind date picker) --- */
.dp-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314B8B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:16px 16px; padding-right:32px;
}
/* date cells inside the compact grids keep the icon neatly aligned */
.tkgrid .dp-input, table.t .dp-input{ background-position:right 6px center; background-size:14px 14px; padding-right:26px; }

/* chat bubble delete (own message, within 2 min) */
.chat-msg{ position:relative; }
.chat-msg .cm-del{ position:absolute; top:4px; right:6px; border:none; background:transparent; color:inherit; opacity:0; cursor:pointer; font-size:11px; padding:2px 4px; border-radius:6px; transition:opacity .12s, background .12s; }
.chat-msg:hover .cm-del{ opacity:.65; }
.chat-msg .cm-del:hover{ opacity:1; background:rgba(0,0,0,.12); }

/* ============================================================
   Phase-2 'Perfect PMS' additions (Change Request v3)
   ============================================================ */

/* C-1 active members bar */
.active-bar{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);
  background:var(--brand-soft);border:1px solid var(--border);border-radius:999px;padding:5px 12px;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.active-bar b{color:var(--text)}
.active-bar .ab-dot{width:8px;height:8px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18);flex:0 0 auto}
.active-bar .ab-idle{color:#B45309}
.active-bar .ab-names{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.active-bar{display:none!important}}

/* user avatar / chat DP with SVG */
.user-avatar.has-svg{padding:0;overflow:hidden;background:transparent}
.user-avatar.has-svg svg{width:100%;height:100%;display:block}
.pill.green{background:#E1FBEA;color:#15803D}
.pill.red{background:#FEE2E2;color:#B91C1C}
.kpi.teal .icon{background:var(--brand-soft);color:var(--brand-dark)}

/* C-22 shoot calendar */
.sc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.sc-grid .sc-h{font-size:11px;font-weight:700;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.4px;padding:4px 0}
.sc-cell{min-height:76px;border:1px solid var(--border);border-radius:10px;padding:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.sc-cell:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.sc-cell.empty{background:transparent;border:none;cursor:default}
.sc-cell.today{border-color:var(--brand);box-shadow:0 0 0 2px rgba(61,192,200,.18)}
.sc-cell.has{background:var(--brand-soft)}
.sc-cell .sc-d{font-weight:700;font-size:13px}
.sc-cell .sc-n{margin-top:6px;font-size:11px;font-weight:700;color:var(--brand-dark);background:#fff;border:1px solid var(--border);border-radius:8px;padding:2px 6px;display:inline-block}
.shoot-card{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;background:#fff}
/* shoot approval status colours: Pending = light red, Approved = light green, Rejected = grey-red */
.sc-cell.sc-pend{background:#FDECEC;border-color:#F3B4B4}
.sc-cell.sc-appr{background:#E7F7EC;border-color:#A9DFBB}
.sc-cell.sc-rej{background:#F1F1F3;border-color:#D6B0B0}
.shoot-card.sc-pend{border-left:4px solid #E4572E}
.shoot-card.sc-appr{border-left:4px solid #1E9E57}
.shoot-card.sc-rej{border-left:4px solid #9AA7AD}
.sc-pill{font-size:10px;font-weight:800;padding:1px 8px;border-radius:999px;margin-left:6px}
.sc-pill-pend{background:#FBDCDC;color:#B0361F}
.sc-pill-appr{background:#CFF0DA;color:#136B39}
.sc-pill-rej{background:#E7E9EC;color:#5A6B72}
.sc-legend .sc-lg{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:middle;margin:0 4px 0 12px}
.sc-legend .sc-lg-pend{background:#FDECEC;border:1px solid #F3B4B4}
.sc-legend .sc-lg-appr{background:#E7F7EC;border:1px solid #A9DFBB}
.sc-legend .sc-lg-rej{background:#F1F1F3;border:1px solid #D6B0B0}
@media (max-width:640px){.sc-cell{min-height:58px;padding:4px}.sc-cell .sc-n{font-size:10px;padding:1px 4px}}

/* C-24 avatar builder */
.av-wrap{display:flex;gap:18px;flex-wrap:wrap}
.av-preview{width:140px;height:140px;border-radius:50%;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);flex:0 0 auto;background:#fff}
.av-controls{flex:1;min-width:240px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.av-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.av-sw{min-width:30px;height:30px;border-radius:8px;border:2px solid var(--border);background:#fff;font-size:11px;font-weight:600;color:var(--text);cursor:pointer;padding:0 8px;text-transform:capitalize}
.av-sw.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(61,192,200,.25)}
@media (max-width:560px){.av-controls{grid-template-columns:1fr}.av-preview{margin:0 auto}}

/* C-26/27 chat reply + mentions + round DP */
.chat-msg .cm-line{display:flex;align-items:flex-start;gap:8px;position:relative}
.chat-msg.me .cm-line{flex-direction:row-reverse}
.cm-dp{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;overflow:hidden}
.cm-dp.has-svg svg{width:100%;height:100%;display:block}
.cm-bub{max-width:74%}
.cm-text{white-space:pre-wrap;word-break:break-word}
.cm-quote{border-left:3px solid var(--brand);background:rgba(61,192,200,.08);border-radius:6px;padding:4px 8px;margin:4px 0;font-size:12px;color:var(--muted)}
.cm-at{color:var(--brand-dark);font-weight:700;cursor:pointer}
.cm-acts{display:none;gap:4px;align-items:center}
.chat-msg:hover .cm-acts{display:inline-flex}
.cm-act{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:2px 4px;border-radius:6px}
.cm-act:hover{background:var(--brand-soft);color:var(--brand-dark)}
.chat-reply-bar{display:flex;align-items:center;gap:8px;background:var(--brand-soft);border-radius:10px;padding:6px 10px;margin-bottom:6px}
.chat-reply-bar .crb-body{flex:1;min-width:0;overflow:hidden}
.chat-reply-bar .crb-body .small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* general responsive polish */
@media (max-width:760px){
  .topbar{padding:10px 12px}
  .content,.main>.content{padding:12px!important}
  .t-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.t{min-width:560px}
  .modal.lg{width:96vw;max-width:96vw}
  .quick-action .btn span,.quick-action .btn:not(.btn-primary){font-size:13px}
}
@media (max-width:480px){
  .quick-action #refreshBtn{display:none}
  .kpi{padding:14px}.kpi .value{font-size:18px}
}

/* Req #1 — live activity board */
.st-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.st-dot.st-online{background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.st-dot.st-idle{background:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.st-dot.st-offline{background:#9CA3AF}
.am-sec{margin-bottom:12px}
.am-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.am-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid var(--border)}
.am-row .am-name{flex:1;font-size:13px}
.am-row .am-ago{min-width:64px;text-align:right}

/* ============================================================
   Phase-3 (Req 41–53) styles
   ============================================================ */
/* #41 remember me */
.remember-row{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:13px;color:var(--muted);cursor:pointer}
.remember-row input{width:16px;height:16px}

/* #42 notes */
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.note-card{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff;display:flex;flex-direction:column}
.note-card.pinned{border-color:#F59E0B;box-shadow:0 0 0 2px rgba(245,158,11,.12)}
.note-card .note-body{margin-top:8px;color:var(--text);white-space:pre-wrap;flex:1}

/* shared check lists (#42/#44/#52) */
.chk-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;background:#fff}
.chk input{width:15px;height:15px}

/* #50 reactions + emoji */
.rx-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;padding-left:38px}
.chat-msg.me .rx-row{justify-content:flex-end;padding-left:0;padding-right:0}
.rx-chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:1px 8px;font-size:12px;cursor:pointer}
.rx-chip.mine{background:var(--brand-soft);border-color:var(--brand)}
.rx-add{border:1px dashed var(--border);background:transparent;border-radius:999px;width:22px;height:22px;font-size:13px;line-height:1;color:var(--muted);cursor:pointer}
.rx-pop{position:fixed;z-index:9999;background:#fff;border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow-lg);padding:4px 6px;display:flex;gap:2px}
.rx-pop button{border:none;background:transparent;font-size:18px;cursor:pointer;padding:2px 4px;border-radius:6px}
.rx-pop button:hover{background:var(--brand-soft)}
.em-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:260px;overflow:auto}
.em-b{border:none;background:transparent;font-size:22px;cursor:pointer;padding:4px;border-radius:8px}
.em-b:hover{background:var(--brand-soft)}
.chat-emoji-btn{border:none;background:transparent;font-size:20px;cursor:pointer;padding:0 6px}

/* #52 quick-access buttons beside client field */
.cq-btns{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}

/* 64 — Log Time date field must stay fully visible at any width */
#draftBody input.in[type="date"]{ width:100%; min-width:128px; box-sizing:border-box; }
input.in[type="date"]{ min-width:128px; }

/* 57 — two-row task action buttons (responsive, role-aware) */
.row-actions.act-2row{flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.row-actions.act-2row .act-row{display:flex;gap:4px;flex-wrap:nowrap;justify-content:flex-end}
td .row-actions.act-2row{min-width:max-content}
@media (max-width:760px){
  .row-actions.act-2row{align-items:stretch}
  .row-actions.act-2row .act-row{justify-content:flex-start;flex-wrap:nowrap}
}
/* 54 — de-emphasised daily task date */
.tk-date{font-size:11px;letter-spacing:.2px}

/* 60: 24-hour time picker (no AM/PM column) */
.tp-24 .tp-head{grid-template-columns:1fr 1fr}
.tp-24 .tp-cols{grid-template-columns:1fr 1fr}

/* @mention autocomplete in task discussion */
.tc-menu{position:absolute;left:0;right:0;top:100%;z-index:400;background:#fff;border:1px solid var(--line,#E3E9EA);border-radius:8px;box-shadow:var(--shadow-lg);max-height:220px;overflow:auto;margin-top:2px}
.tc-item{padding:7px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:13.5px}
.tc-item:hover,.tc-item.active{background:var(--brand-soft,#E6F7F5)}

/* Project & Tasks — labelled actions + Action dropdown + inline editors */
.task-acts{display:flex;gap:4px;flex-wrap:nowrap;align-items:flex-start;white-space:nowrap}
td .task-acts{min-width:max-content}
.tk-lbtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:auto;height:auto;min-width:46px;padding:4px 6px;border-radius:8px}
.tk-lbtn span{font-size:9px;line-height:1;color:#6B7B82;font-weight:600}
.tk-inline{font-size:12px}
select.tk-inline{background:#fff;border:1px solid var(--line,#E3E9EA);border-radius:7px}
.tk-menu-pop{background:#fff;border:1px solid var(--line,#E3E9EA);border-radius:10px;box-shadow:var(--shadow-lg);min-width:190px;overflow:hidden;z-index:600;padding:4px;animation:tpIn .12s ease-out}
.tk-mi{padding:9px 11px;display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;border-radius:7px;white-space:nowrap}
.tk-mi i{width:16px;color:#6B7B82}
.tk-mi:hover{background:var(--brand-soft,#E6F7F5)}
.tk-mi.danger,.tk-mi.danger i{color:#DC2626}
.tk-mi.disabled{opacity:.4;cursor:not-allowed}

/* Project & Tasks — left filter panel + view switcher + kanban/list */
.tk-layout{display:flex;gap:14px;margin-top:14px;align-items:flex-start}
.tk-side{flex:0 0 230px;max-width:230px}
.tk-main{flex:1;min-width:0}
.tk-side .lbl{margin-top:8px}
.tk-side .in{width:100%}
@media (max-width:900px){ .tk-layout{flex-direction:column} .tk-side{flex:1 1 auto;max-width:none;width:100%} .tk-side .card{position:static!important} }
.seg{display:inline-flex;border:1px solid var(--line,#E3E9EA);border-radius:8px;overflow:hidden}
.seg-b{background:#fff;border:none;padding:6px 10px;font-size:12px;cursor:pointer;color:#6B7B82;display:inline-flex;align-items:center;gap:5px}
.seg-b+.seg-b{border-left:1px solid var(--line,#E3E9EA)}
.seg-b.active{background:var(--brand,#3dc0c8);color:#fff}
.kb-wrap{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.kb-col{flex:0 0 235px;background:#F5F8F8;border-radius:10px;display:flex;flex-direction:column;max-height:72vh}
.kb-head{padding:8px 10px;font-weight:700;font-size:13px;border-radius:10px 10px 0 0;background:#fff}
.kb-body{padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.kb-card{background:#fff;border:1px solid var(--line,#E3E9EA);border-radius:8px;padding:8px 10px;font-size:13px}
.tk-listrow{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line,#EEF2F3)}
.tk-listrow:hover{background:#F7FAFA}

/* Kanban drag & drop */
.kb-card[draggable="true"]{cursor:grab}
.kb-card[draggable="true"]:active{cursor:grabbing}
.kb-card.dragging{opacity:.5}
.kb-card.kb-nodrag{cursor:not-allowed}
.kb-body.kb-over{outline:2px dashed var(--brand,#3dc0c8);outline-offset:-4px;background:#EAF7F6}

/* Compact task filter bar */
.tk-filterbar .lbl{font-size:9.5px;margin:0 0 2px;letter-spacing:.2px}
.tk-filterbar .in,.tk-filterbar select.in{padding:5px 7px;font-size:12px}
.tk-filterbar .flex{row-gap:6px}
.tk-filterbar label.lbl{display:block}

/* ============================================================
   UI polish layer (additive — no layout/logic dependencies)
   Brand: #3dc0c8
   ============================================================ */

/* Accessible focus rings everywhere */
.in:focus, select.in:focus, input:focus, textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(61,192,200,.18); }
.btn:focus-visible, .icon-btn:focus-visible, .tab:focus-visible, .seg-b:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(61,192,200,.32); }

/* Buttons feel a touch crisper */
.btn{ transition:background .15s, box-shadow .15s, transform .08s; }
.btn:active{ transform:translateY(0); }
.btn-primary{ box-shadow:0 2px 6px rgba(61,192,200,.28); }
.icon-btn{ transition:background .12s, color .12s; border-radius:8px; }
.icon-btn:hover{ background:var(--brand-soft); }

/* Tables: zebra + hover + softer header, nicer on dense data */
table.t thead th{ position:sticky; top:0; background:#F4F8F8; z-index:1; font-size:11px; letter-spacing:.3px; text-transform:uppercase; color:#5A6B72; }
table.t tbody tr:nth-child(even){ background:#FBFDFD; }
table.t tbody tr:hover{ background:var(--brand-soft); }
.t-wrap{ border-radius:12px; }

/* Custom scrollbars */
.t-wrap::-webkit-scrollbar, .kb-body::-webkit-scrollbar, .kb-wrap::-webkit-scrollbar{ height:10px; width:10px; }
.t-wrap::-webkit-scrollbar-thumb, .kb-body::-webkit-scrollbar-thumb, .kb-wrap::-webkit-scrollbar-thumb{ background:#CBD8DA; border-radius:8px; }
.t-wrap::-webkit-scrollbar-thumb:hover{ background:#A9BCC0; }

/* Empty states — centred, friendly, room for a CTA */
.empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:38px 16px; color:var(--muted); text-align:center; }
.empty i{ font-size:30px; color:#C2D2D4; }
.empty .empty-cta{ margin-top:4px; }

/* Skeleton shimmer (available for lists/loaders) */
@keyframes whcShimmer{ 0%{background-position:-360px 0} 100%{background-position:360px 0} }
.skel{ background:linear-gradient(90deg,#EEF3F4 25%,#F7FAFB 37%,#EEF3F4 63%); background-size:720px 100%; animation:whcShimmer 1.2s infinite linear; border-radius:8px; height:14px; }

/* Cards & spacing: a little more breathing room and depth */
.card{ box-shadow:var(--shadow); }
.card+.card{ }
.kb-card{ transition:box-shadow .12s, transform .08s; }
.kb-card:hover{ box-shadow:0 6px 16px rgba(15,27,31,.10); }

/* Branded confirm dialog */
.ui-confirm-msg{ font-size:14px; line-height:1.5; color:var(--text); }

/* Build/version stamp */
.build-stamp{ font-size:10.5px; color:#9AA7AD; text-align:center; padding:6px 0 2px; letter-spacing:.3px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .btn:hover{ transform:none; }
}

/* 7 — date cells/inputs always show the full date (no clipping) */
input[type="date"].in, input[type="date"]{ min-width:158px; width:auto; }
.tkgrid input[type="date"]{ min-width:150px; }
.tk-deadline{ min-width:122px; }
.tk-date,.t td.nowrap,.t th.nowrap{ white-space:nowrap; }

/* 15 — compact KPI cards on Shoot Calendar (smaller grid) */
#scAnalytics .kpi{ padding:10px 12px; gap:10px; }
#scAnalytics .kpi .icon{ width:34px; height:34px; font-size:14px; }
#scAnalytics .kpi .value{ font-size:16px; }
#scAnalytics .kpi .label{ font-size:11px; }

/* Category column on one line (min ~3 words) */
.tk-catcell{ white-space:nowrap; min-width:150px; }

/* Multi-select filter button */
.ms-btn{ background:#fff; }
.ms-btn .ms-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-menu-pop .ms-row{ font-size:13px; }

/* Online / Offline connectivity indicator (sidebar head) */
.net-status{ display:inline-flex; align-items:center; gap:6px; margin-top:5px; font-size:11px; font-weight:700; letter-spacing:.2px; color:#15803D; }
.net-status .net-dot{ width:9px; height:9px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,.18); flex:0 0 auto; }
.net-status.off{ color:#B91C1C; }
.net-status.off .net-dot{ background:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.18); animation:netPulse 1.1s infinite; }
@keyframes netPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* Multi-select filter — modern theme + subtle highlight animation */
.ms-btn{ border:1px solid var(--line,#E3E9EA); border-radius:9px; background:#fff; height:auto; padding:7px 10px; font-size:12.5px; color:var(--text); transition:border-color .15s, box-shadow .15s, background .15s; }
.ms-btn:hover{ border-color:var(--brand); background:#F8FCFC; }
.ms-btn:focus-visible{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(61,192,200,.18); }
.ms-btn .fa-caret-down{ transition:transform .15s; color:#9AA7AD; }
.ms-btn b{ color:var(--brand-dark); }
/* active filter fields: soft red fill + border so an applied filter is obvious */
.ms-btn.ms-active{ background:#FDECEC; border-color:#E9A6A6; color:#B0361F; font-weight:700; }
.ms-btn.ms-active .fa-caret-down{ color:#C9776A; }
.in.filter-active{ background:#FDECEC !important; border-color:#E9A6A6 !important; color:#8f3a2a; font-weight:600; }
.tk-menu-pop .ms-row{ border-radius:8px; transition:background .16s ease, box-shadow .16s ease; margin:1px 4px; }
.tk-menu-pop .ms-row:hover{ background:var(--brand-soft); box-shadow:inset 3px 0 0 var(--brand); }
.tk-menu-pop .ms-row:has(.mschk:checked){ background:#EAF7F6; font-weight:600; }
.tk-menu-pop .mschk{ accent-color:var(--brand); width:15px; height:15px; }
.tk-menu-pop .ms-search{ border-radius:8px; }
.tk-menu-pop .ms-all:hover, .tk-menu-pop .ms-clear:hover{ text-decoration:underline; }

/* connectivity indicator inside the user chip (sidebar foot) */
.sidebar-foot .net-status{ margin-top:3px; }
.user-role:empty{ display:none; }

/* clickable Task ID pill in entries → routes to Project & Tasks */
.pill.tk-link{ transition:filter .15s, box-shadow .15s; }
.pill.tk-link:hover{ filter:brightness(.96); box-shadow:0 0 0 2px rgba(61,192,200,.25); }

/* WhatsApp-style chat: two-line list + leaner bubbles */
.chat-groups{ width:172px; }
.chat-g{ display:flex; align-items:center; gap:9px; padding:8px 10px; }
.chat-g .g-col{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.chat-g .g-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-g .g-prev{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.chat-g.has-unread .g-prev{ color:var(--text); font-weight:600; }
.chat-g .g-unread{ float:none; align-self:center; margin-left:4px; }
.chat-msgs{ gap:3px; padding:8px 10px; }
.chat-msg{ padding:5px 9px; font-size:12.5px; border-radius:11px; max-width:80%; }
.chat-msg .cm-bub{ padding:0; }
.chat-msg .cm-who{ font-size:10px; margin-bottom:1px; opacity:.85; }
.chat-msg.me .cm-who{ text-align:right; }
.chat-msg .cm-text{ line-height:1.35; }

/* Per-user unread comment badge on a task's Comments button */
[data-cmtbtn]{ position:relative; }
.cmt-badge{ position:absolute; top:-5px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#25D366; color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px var(--surface); }
.tk-lbtn .cmt-badge{ top:-2px; right:-2px; }

/* Sleeker WhatsApp-style chat bubbles (final pass) */
.chat-msgs{ gap:2px; padding:6px 8px; }
.chat-msg{ padding:4px 8px 3px; font-size:12.5px; border-radius:9px; max-width:76%; }
.chat-msg .cm-line{ gap:6px; }
.chat-msg .cm-bub{ max-width:100%; }
.chat-msg .cm-who{ font-size:9.5px; font-weight:700; margin-bottom:1px; opacity:.7; white-space:nowrap; }
.chat-msg .cm-text{ line-height:1.3; }
/* avatar smaller */
.chat-msg .cm-line > .chat-dp, .chat-msg .cm-line img.cm-av, .chat-msg .cm-av{ width:24px !important; height:24px !important; font-size:10px !important; }
/* actions float on hover — never take layout space */
.chat-msg .cm-acts{ position:absolute; top:-9px; right:8px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:1px 4px; box-shadow:var(--shadow); display:none; gap:2px; z-index:2; }
.chat-msg:hover .cm-acts{ display:inline-flex; }
.chat-msg .cm-act{ padding:1px 4px; font-size:11px; }
.chat-msg.me .cm-acts{ right:auto; left:8px; }
/* reactions: compact + add button hover-only */
.rx-row{ margin-top:2px; gap:3px; }
.rx-chip{ padding:0 6px; font-size:11px; }
.rx-add{ width:18px; height:18px; font-size:11px; opacity:0; transition:opacity .12s; }
.chat-msg:hover .rx-add{ opacity:.7; }
.rx-add:hover{ opacity:1; }
.chat-msg .cm-del{ top:-9px; right:34px; }
.chat-msg.me .cm-del{ right:auto; left:34px; }

/* ===== Compact WhatsApp bubbles: inline time + per-message menu ===== */
.chat-msg{ padding:3px 9px 2px; }
.chat-msg .cm-bub{ display:block; max-width:100%; }
.chat-msg .cm-who{ font-size:10px; font-weight:700; color:var(--brand-dark); margin-bottom:0; line-height:1.25; }
.chat-msg .cm-text{ display:block; line-height:1.32; font-size:12.5px; }
.chat-msg .cm-time{ float:right; font-size:9px; color:var(--muted); margin:5px 0 0 12px; position:relative; top:3px; white-space:nowrap; }
.chat-msg.me .cm-time{ color:#5b8f8c; }
.chat-msg .cm-star{ color:#F59E0B; font-size:10px; margin-right:2px; }
.chat-msg .cm-menu{ position:absolute; top:0; right:3px; border:none; background:transparent; color:var(--muted); cursor:pointer; padding:1px 5px; border-radius:6px; opacity:0; font-size:11px; line-height:1; }
.chat-msg:hover .cm-menu{ opacity:.5; }
.chat-msg .cm-menu:hover{ opacity:1; background:rgba(0,0,0,.07); }
.chat-msg.me .cm-menu{ right:3px; }
.cm-menu-pop{ min-width:172px; }
.cm-menu-pop .tk-mi{ font-size:13px; padding:7px 12px; }
.cm-menu-pop .tk-mi i{ width:16px; text-align:center; margin-right:7px; color:var(--muted); }
.cm-menu-pop .tk-mi.danger i{ color:#DC2626; }
.rx-row{ margin-top:2px; gap:3px; }
/* keep the compose emoji button clearly outside the input */
.chat-emoji-btn{ font-size:20px; padding:0 8px 0 2px; align-self:center; }

/* Kanban: empty columns must still be a drop target */
.kb-body{ min-height:120px; }

/* Synced horizontal scrollbar shown at the TOP of wide tables */
.tscroll-top{ overflow-x:auto; overflow-y:hidden; background:var(--card,#fff); padding-top:2px; }
.tscroll-top .tscroll-inner{ height:1px; }
.tscroll-top::-webkit-scrollbar{ height:11px; }
.tscroll-top::-webkit-scrollbar-thumb{ background:var(--line,#cfd8da); border-radius:6px; }
.tscroll-top::-webkit-scrollbar-thumb:hover{ background:var(--brand); }

/* ================= V2 — grouped sidebar, collapsible groups, mini rail ================= */
.sidebar{transition:width .22s ease}
.sidebar-head{position:relative}
.side-toggle{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s}
.side-toggle:hover{background:var(--brand-soft);color:var(--brand-dark);border-color:var(--brand)}

.nav-group{margin-bottom:2px}
.nav-group-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;border-radius:8px}
.nav-group-head:hover{color:var(--brand-dark)}
.nav-group-head .gchev{font-size:10px;transition:transform .18s ease;color:var(--muted);margin-left:8px}
.nav-group.closed .nav-group-head .gchev{transform:rotate(-90deg)}
.nav-group-body{overflow:hidden;max-height:600px;transition:max-height .22s ease,opacity .18s ease;opacity:1}
.nav-group.closed .nav-group-body{max-height:0;opacity:0}
.nav .item .nt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- mini (icons-only) rail — desktop only ---- */
@media (min-width:901px){
  .sidebar.mini{width:68px}
  .sidebar.mini .side-brand{display:none}
  .sidebar.mini .sidebar-head{justify-content:center;padding:14px 8px}
  .sidebar.mini .side-toggle{margin:0;position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);z-index:5;box-shadow:var(--shadow)}
  .sidebar.mini .side-toggle i{transform:rotate(180deg)}
  .sidebar.mini .nav{padding:16px 8px 8px}
  .sidebar.mini .nt{display:none}
  .sidebar.mini .nav-group-head{display:none}
  .sidebar.mini .nav-group.closed .nav-group-body{max-height:600px;opacity:1}
  .sidebar.mini .nav .item{justify-content:center;padding:11px 0;gap:0}
  .sidebar.mini .nav .item i{width:auto;font-size:15px}
  .sidebar.mini .nav-group{border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:4px}
  .sidebar.mini .nav-group:last-child{border-bottom:none}
  .sidebar.mini .sidebar-foot{padding:8px 6px}
  .sidebar.mini .user-chip>div:last-child{display:none}
  .sidebar.mini .user-chip{justify-content:center}
  .sidebar.mini .logout-link{text-align:center;font-size:0;padding:8px 0}
  .sidebar.mini .logout-link i{font-size:14px}
  .sidebar.mini .build-stamp{display:none}
}
@media (max-width:900px){ .side-toggle{display:none} }

/* ---- Meeting Calendar ---- */
.mc-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mc-title{font-weight:800;font-size:16px;min-width:120px;text-align:center}
.mc-chip{display:block;font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 6px;margin-top:3px;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:#fff;background:var(--brand)}
.mc-chip.online{background:#7C3AED}
.mc-chip.other{background:#64748B}
.mc-more{font-size:10px;font-weight:700;color:#fff;background:#475569;border-radius:6px;padding:1px 6px;margin-top:3px;display:inline-block;cursor:pointer}
.mc-cell{min-height:92px;cursor:default}
.mc-badge{display:inline-block;font-size:10px;font-weight:700;border-radius:6px;padding:2px 8px;text-transform:uppercase;letter-spacing:.4px}
.mc-badge.online{background:#EDE9FE;color:#6D28D9}
.mc-badge.offline{background:#E6FAF8;color:var(--brand-dark)}
.mc-src{font-size:11px;color:var(--muted)}

/* ================= V2 EXT — search, sort, avatar photo, linkify, kanban hover ================= */
/* 4) linkified addresses */
.wl-link{color:#2563EB;text-decoration:none;font-weight:600;word-break:break-word}
.wl-link:hover{text-decoration:underline}

/* 1) tasks search box */
.tk-search{position:relative;display:inline-flex;align-items:center;margin-right:8px}
.tk-search i{position:absolute;left:10px;color:var(--muted);font-size:12px;pointer-events:none}
.tk-search input{padding:8px 10px 8px 28px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:13px;min-width:200px;background:#fff}
.tk-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,184,176,.15)}

/* 2) sortable column headers */
.wl-th{cursor:pointer;user-select:none;position:relative;white-space:nowrap}
.wl-th:hover{color:var(--brand-dark)}
.wl-th::after{content:"\f0dc";font-family:"Font Awesome 6 Free";font-weight:900;font-size:9px;opacity:.3;margin-left:6px}
.wl-th.wl-asc::after{content:"\f0de";opacity:.9;color:var(--brand-dark)}
.wl-th.wl-desc::after{content:"\f0dd";opacity:.9;color:var(--brand-dark)}

/* 5) kanban hover preview */
.kbp{position:fixed;z-index:9999;width:420px;max-height:82vh;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 46px rgba(15,42,50,.22);padding:16px 18px;font-size:13px;animation:kbpIn .12s ease}
.kbp-brief{ line-height:1.55; margin-top:2px; max-height:340px; overflow:auto; }
.kbp-brief a{ color:#2563eb; text-decoration:underline; }
.kbp-brief img{ max-width:100%; }
.brief-cell{ min-height:34px; padding:6px 8px; border:1px solid var(--border,#e5e7eb); border-radius:8px; cursor:pointer; font-size:12.5px; background:#fff; min-width:180px; }
.brief-cell:hover{ border-color:var(--brand,#14B8B0); }
.brief-cell .muted{ color:var(--muted,#94a3b8); }
@keyframes kbpIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.kbp-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.kbp-head b{font-size:13px}
.kbp-badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--brand-soft);color:var(--brand-dark);border-radius:6px;padding:2px 8px}
.kbp-title{font-weight:700;font-size:14px;margin-bottom:8px}
.kbp-row{display:flex;gap:8px;padding:2px 0;border-bottom:1px dashed var(--border)}
.kbp-l{flex:0 0 92px;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.kbp-v{flex:1;font-weight:500}
.kbp-sec{margin-top:8px}
.kbp-sec .kbp-l{display:block;margin-bottom:2px}
.kbp-sec div{line-height:1.45}

/* 3) avatar photo upload + cropper */
.av-photo{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.av-photo-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.crop-ov{position:fixed;inset:0;z-index:10000;background:rgba(12,30,34,.66);display:flex;align-items:center;justify-content:center;padding:16px}
.crop-box{background:#fff;border-radius:16px;padding:18px;width:320px;max-width:92vw;box-shadow:var(--shadow-lg)}
.crop-h{font-weight:700;margin-bottom:12px;text-align:center}
.crop-stage{position:relative;width:260px;height:260px;margin:0 auto;border-radius:50%;overflow:hidden;touch-action:none;cursor:grab;background:#eef2f3}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{display:block}
.crop-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 9999px rgba(255,255,255,.28) inset;pointer-events:none}
.crop-zoom{display:flex;align-items:center;gap:10px;margin:14px 2px 4px;color:var(--muted)}
.crop-zoom input{flex:1}
.crop-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.btn.btn-sm{padding:7px 12px;font-size:12.5px}

/* ================= V2 EXT — DP bubbles (CS / Assignee profile picture) ================= */
.wl-dp{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;min-width:20px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:700;line-height:1;vertical-align:middle;margin-right:5px;overflow:hidden;text-transform:uppercase;box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.wl-dp img{width:100%;height:100%;object-fit:cover;display:block}
/* keep the sidebar avatar filling its circle when it's a photo/svg */
#userAvatar.has-svg{overflow:hidden}
#userAvatar.has-svg img,#userAvatar.has-svg svg{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ================= V2 EXT — keep DP + name/select + priority on ONE row ================= */
.dp-line{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;max-width:100%;vertical-align:middle}
.dp-line .wl-dp{margin-right:0;flex:0 0 auto}
.dp-line>span{min-width:0}                 /* let the name shrink/ellipsize if truly needed */
.dp-line select.tk-inline{flex:0 0 auto}   /* assignee dropdown keeps its width, stays inline */
/* the assignee & CS columns can use their available width on one line */
#tkTable table.t td .dp-line,.tk-tablewrap table.t td .dp-line{max-width:none}

/* ================= V2 EXT — kanban hover fade + copyable task id ================= */
.kbp{ opacity:0; transition:opacity .5s ease; pointer-events:none; }  /* fade in; blocked until shown */
.kbp.show{ opacity:1; pointer-events:auto; }  /* once visible, allow scroll / link clicks / text copy */
.kbp{ overscroll-behavior:contain; }
.kb-tid{ border-bottom:1px dotted transparent; }
.kb-tid:hover{ color:var(--brand-dark); border-bottom-color:var(--brand); }

/* ================= V2 EXT — kanban per-column pager ================= */
.kb-pager{ display:inline-flex; align-items:center; gap:4px; margin-left:8px; vertical-align:middle; }
.kb-pg{ border:1px solid var(--border); background:#fff; border-radius:6px; width:20px; height:20px; line-height:1; font-size:13px; cursor:pointer; color:var(--brand-dark); padding:0; }
.kb-pg:disabled{ opacity:.35; cursor:default; }
.kb-pgn{ font-size:10px; color:var(--muted); font-weight:700; min-width:26px; text-align:center; }

/* ================= V2 EXT — task link in chat/comments ================= */
.task-link{ color:#2563EB; font-weight:700; text-decoration:none; cursor:pointer; }
.task-link:hover{ text-decoration:underline; }

/* ================= V2 — Request Center ================= */
.rc-kpis{ display:flex; gap:10px; flex-wrap:wrap; }
.rc-kpi{ flex:1; min-width:110px; border:1px solid var(--border); border-radius:12px; padding:12px; text-align:center; background:#fff; }
.rc-kpi .rc-v{ font-size:22px; font-weight:800; line-height:1; }
.rc-kpi .rc-l{ font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-top:5px; }
.rc-appr{ display:inline-flex; align-items:center; gap:4px; margin:2px 6px 2px 0; white-space:nowrap; font-size:11px; }

/* ================= V2 — Request Center (compact scorecards + layout) ================= */
.rc-h{ font-weight:800; font-size:13px; margin-bottom:6px; }
.rc-scs{ display:flex; gap:8px; flex-wrap:wrap; }
.rc-sc{ flex:1; min-width:120px; display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:#fff; }
.rc-sc i{ font-size:16px; width:20px; text-align:center; }
.rc-sc-v{ font-size:18px; font-weight:800; line-height:1; }
.rc-sc-l{ font-size:9.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); margin-top:2px; }
.rc-scroll{ max-height:520px; overflow:auto; margin-top:10px; }
.rc-appr-stack{ display:flex; flex-direction:column; gap:3px; }
.rc-appr{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.rc-appr-n{ font-size:10.5px; color:var(--muted); min-width:74px; }
.rc-appr-ord{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--brand,#14B8B0); color:#fff; font-size:9.5px; font-weight:700; }
/* draggable config pills (approvers + sub-types) */
.rc-sub-sort, .rc-appr-sort{ display:flex; flex-wrap:wrap; gap:6px; }
.rc-drag-pill{ display:inline-flex; align-items:center; gap:6px; background:#eef6f6; border:1px solid #cfe6e4; border-radius:999px; padding:3px 10px 3px 4px; font-size:12px; cursor:grab; user-select:none; }
.rc-appr-pill{ background:#eef2ff; border-color:#c7d2fe; }
.rc-drag-pill:active{ cursor:grabbing; }
.rc-drag-pill .rc-pos{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; background:var(--brand,#14B8B0); color:#fff; font-size:9.5px; font-weight:800; }
.rc-appr-pill .rc-pos{ background:#4f46e5; }
.rc-drag-pill .rc-x{ color:#B91C1C; text-decoration:none; font-weight:700; padding-left:2px; }
.sortable-ghost{ opacity:.4; }
.rc-appr-lead{ margin-left:5px; font-size:8.5px; font-weight:700; letter-spacing:.3px; color:#0f766e; background:#d7f4f1; border:1px solid #99e2dc; border-radius:4px; padding:0 4px; text-transform:uppercase; vertical-align:middle; }
.rc-actions{ display:flex; flex-direction:column; gap:8px; }
.rc-actions .btn-block{ width:100%; justify-content:flex-start; }
.rc-add td,.rc-add th{ padding:6px; }

/* ================= V2 — Request Center round-3 (small buttons/menu) ================= */
.btn-xs{ padding:3px 8px; font-size:11px; border-radius:6px; line-height:1.2; }
.tk-menu-pop.rc-menu .tk-mi{ display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px; cursor:pointer; border-radius:6px; }
.tk-menu-pop.rc-menu .tk-mi:hover{ background:var(--brand-soft); color:var(--brand-dark); }
.tk-menu-pop.rc-menu .tk-mi.danger{ color:#B91C1C; }
.tk-menu-pop.rc-menu .tk-mi.danger:hover{ background:#FEE2E2; color:#B91C1C; }
.rc-add .in[disabled]{ background:#f6f9f9; color:#5a6b70; }

/* ================= V2 — "new" sparkle badge on a menu item ================= */
.nav .item .nav-new{ display:inline-flex; align-items:center; margin-left:6px; line-height:0; animation:navSparkle 1.1s ease-in-out infinite; flex:0 0 auto; }
.nav .item .nav-new svg{ display:block; filter:drop-shadow(0 0 2px rgba(245,179,1,.6)); }
@keyframes navSparkle{ 0%,100%{ opacity:.35; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.12); } }
/* hide the sparkle when the sidebar is collapsed to icons */
.sidebar.mini .nav-new{ display:none; }

/* ================= V2 — Leave & Time ================= */
.lt-dur, .lt-leave{ font-variant-numeric:tabular-nums; }
.lt-bars{ display:flex; align-items:flex-end; gap:3px; height:130px; overflow-x:auto; padding-top:6px; }
.lt-bar{ flex:0 0 16px; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.lt-bar-fill{ width:12px; min-height:2px; background:linear-gradient(180deg,#f59e0b,#dc2626); border-radius:4px 4px 0 0; }
.lt-bar-x{ font-size:8px; color:var(--muted); margin-top:3px; }
/* segmented daily-late bar (Morning / Daily / Early) + total label */
.lt-bar{ flex:0 0 20px; cursor:default; }
.lt-bar-top{ font-size:7.5px; font-weight:800; color:#334155; margin-bottom:2px; height:10px; }
.lt-bar-fill2{ width:14px; min-height:2px; display:flex; flex-direction:column-reverse; border-radius:4px 4px 0 0; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.lt-bar-fill2 .ltseg{ width:100%; }
.ltseg.sm{ background:#ef4444; }  /* morning late */
.ltseg.sd{ background:#f59e0b; }  /* daily late */
.ltseg.se{ background:#a855f7; }  /* early left */
.lt-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:10px; color:#475569; align-items:center; }
.lt-legend .lt-dot{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; vertical-align:middle; }
.lt-legend .lt-dot.sm{ background:#ef4444; } .lt-legend .lt-dot.sd{ background:#f59e0b; } .lt-legend .lt-dot.se{ background:#a855f7; }

/* ---- Leave & Time: brand fill on fields that hold a value ---- */
.lt-dur.has-val, .lt-leave.has-val, .lt-rem.has-val{
  background:var(--brand-soft);
  border-color:var(--brand);
  color:var(--brand-dark);
  font-weight:700;
  box-shadow:0 0 0 2px rgba(20,184,176,.12);
}
/* ---- Leave & Time: metrics (1/3) + chart (2/3) ---- */
.lt-split{ display:grid; grid-template-columns:1fr 2fr; gap:14px; align-items:start; }
@media (max-width:900px){ .lt-split{ grid-template-columns:1fr; } }
.lt-metrics td{ padding:7px 8px; font-size:12.5px; }
.lt-bars{ height:190px; }

/* ---- Group (consolidated) tab ---- */
.ltg-an-h0{ font-weight:700; font-size:13px; color:var(--muted); margin-bottom:8px; }
.ltg-an-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media (max-width:1200px){ .ltg-an-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .ltg-an-grid{ grid-template-columns:1fr; } }
.ltg-an-card{ border:1px solid var(--border); border-radius:10px; padding:10px; background:#fff; }
.ltg-an-h{ font-weight:700; font-size:12px; margin-bottom:8px; cursor:pointer; display:flex; align-items:center; gap:5px; }
.ltg-an-h .ltg-exp{ margin-left:auto; color:#9fb2b8; font-size:10px; }
.ltg-an-h:hover .ltg-exp{ color:#0e8f88; }
/* resizable card body, min ~2 rows, own scroller */
.ltg-an-body{ min-height:56px; height:72px; max-height:260px; overflow-y:auto; resize:vertical; padding-right:2px; }
/* scrollbar on the LEFT: flip container, un-flip the rows */
.ltg-scroll-left{ direction:rtl; }
.ltg-scroll-left > .ltg-hb, .ltg-scroll-left > * { direction:ltr; }
.ltg-remwrap{ max-height:66px; overflow:auto; font-size:11px; line-height:1.35; }
.ltg-remline{ white-space:normal; word-break:break-word; margin:1px 0; }
.ltg-remline b{ color:#0e6f70; }
.ltg-remmore{ color:#0e8f88; font-weight:700; font-size:10.5px; margin-top:2px; }
.ltg-remcell{ cursor:pointer; vertical-align:top; }
.ltg-remcell:hover{ background:#FFF4DE; }
.ltg-hb{ display:flex; align-items:center; gap:6px; margin:4px 0; }
.ltg-hb-n{ flex:0 0 78px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ltg-hb-t{ flex:1; height:8px; background:#eef1f4; border-radius:5px; overflow:hidden; }
.ltg-hb-f{ display:block; height:100%; border-radius:5px; }
.ltg-hb-v{ flex:0 0 auto; font-size:11px; font-weight:700; color:#334155; }
.ltg-cell.ltg-hot{ cursor:pointer; }
.ltg-cell.ltg-hot:hover{ background:#FFF4DE; outline:1px solid #f0c674; }
/* dull the zero (0:00 / 0) cells so any non-zero value stands out at a glance */
.ltg-cell.ltg-zero{ color:#c4ccd2 !important; font-weight:400 !important; }
.ltg-drill-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ltg-drill-sum{ font-size:13px; }
.ltg-drill{ display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto; }
.ltg-drow{ border:1px solid var(--border); border-left:3px solid #14B8B0; border-radius:8px; padding:8px 10px; background:#fafcfc; }
.ltg-drow-top{ display:flex; align-items:center; justify-content:space-between; }
.ltg-drow-d{ font-weight:700; font-size:12.5px; }
.ltg-drow-v{ font-weight:800; color:#B91C1C; }
.ltg-drow-split{ font-size:11px; color:var(--muted); margin-top:2px; }
.ltg-drow-rem{ font-size:12.5px; margin-top:5px; white-space:pre-wrap; word-break:break-word; }
.ltg-drow-rem.muted{ color:var(--muted); font-style:italic; }
.ltg-drow-ts{ font-size:11px; color:var(--muted); margin-top:5px; }

/* ---- "new" sparkle badge: bigger + more noticeable pulse ---- */
.nav .item .nav-new{ margin-left:7px; animation:navSparkle 1s ease-in-out infinite; }
.nav .item .nav-new svg{ filter:drop-shadow(0 0 4px rgba(245,179,1,.85)); }
@keyframes navSparkle{
  0%,100%{ opacity:.45; transform:scale(.85) rotate(-6deg); }
  50%    { opacity:1;   transform:scale(1.3)  rotate(6deg); }
}

/* ================= V2 — Client Deliverables report ================= */
.delv-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:14px 0; }
.delv-kpi{ background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.delv-kpi-n{ font-size:22px; font-weight:800; color:var(--text,#1f2937); line-height:1; }
.delv-kpi-l{ font-size:11px; color:var(--muted,#6b7280); }
.delv-charts{ display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-bottom:16px; }
.delv-chart-card{ background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:10px 12px; }
.delv-chart-h{ font-size:12px; font-weight:600; color:var(--muted,#6b7280); margin-bottom:6px; }
.delv-chart-card canvas{ width:100%!important; height:150px!important; }
.delv-block{ margin-bottom:14px; }
.delv-block-h{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:13px; margin-bottom:6px; color:var(--text,#1f2937); }
.delv-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.delv-sec{ margin:16px 0 8px; font-size:13px; color:var(--muted,#6b7280); text-transform:uppercase; letter-spacing:.4px; }
.delv-status-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px; }
table.delv-tbl{ width:100%; border-collapse:collapse; font-size:11.5px; }
table.delv-tbl th, table.delv-tbl td{ border:1px solid var(--border,#e5e7eb); padding:4px 7px; text-align:center; white-space:nowrap; }
table.delv-tbl thead th{ background:#f1f5f9; color:#334155; font-weight:600; position:sticky; top:0; }
table.delv-tbl .delv-rowh{ text-align:left; background:#f8fafc; font-weight:600; color:#334155; }
table.delv-tbl .delv-0{ color:#cbd5e1; }
table.delv-tbl .delv-has{ font-weight:700; color:#0f766e; }
table.delv-tbl .delv-rt{ font-weight:700; background:#f8fafc; }
table.delv-tbl tfoot .delv-foot th, table.delv-tbl tfoot .delv-foot td{ background:#eef2f6; font-weight:700; }
table.delv-tbl.delv-accent thead th{ background:#d7f4f1; color:#0f766e; }
table.delv-tbl.delv-accent thead .delv-rowh{ background:#c3ede8; }
@media (max-width:760px){
  .delv-charts{ grid-template-columns:1fr; }
  .delv-status-grid{ grid-template-columns:1fr; }
}

/* ================= V2 — Announcements ================= */
.ann-scrim{ position:fixed; inset:0; background:rgba(15,23,42,.35); opacity:0; visibility:hidden; transition:opacity .25s; z-index:1200; }
.ann-scrim.show{ opacity:1; visibility:visible; }
.ann-drawer{ position:fixed; top:0; right:0; height:100vh; width:400px; max-width:92vw; background:var(--card,#fff); box-shadow:-8px 0 30px rgba(0,0,0,.18); transform:translateX(105%); transition:transform .28s cubic-bezier(.4,0,.2,1); z-index:1201; display:flex; flex-direction:column; overflow:hidden; }
.ann-drawer.open{ transform:translateX(0); }
.ann-drawer.auto{ transition:transform .84s cubic-bezier(.4,0,.2,1); }  /* auto-open: ~1/3 speed */
.ann-detail-img{ display:block; max-width:100%; border-radius:10px; margin:4px 0 12px; }
.ann-type-chip{ font-size:11px; font-weight:700; color:#0f766e; background:#d7f4f1; border:1px solid #99e2dc; border-radius:999px; padding:1px 8px; text-transform:capitalize; vertical-align:middle; }
/* full-drawer flash when a new announcement lands */
.ann-flash{ position:absolute; inset:0; z-index:5; pointer-events:none; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 80% at 50% 100%, var(--flash,#14B8B0) 0%, transparent 70%);
  animation:annFlash 1.1s ease-out forwards; }
.ann-flash-emo{ font-size:64px; animation:annFlashEmo 1.1s ease-out forwards; }
@keyframes annFlash{ 0%{ opacity:0; } 15%{ opacity:.85; } 100%{ opacity:0; } }
@keyframes annFlashEmo{ 0%{ transform:translateY(40px) scale(.4); opacity:0; } 30%{ transform:translateY(0) scale(1.1); opacity:1; } 70%{ opacity:1; } 100%{ transform:translateY(-10px) scale(1); opacity:0; } }
/* persistent flash: gently pulses until the user closes the drawer or a new announcement lands */
.ann-flash.ann-flash-persist{ animation:annFlashPulse 2s ease-in-out infinite; }
.ann-flash.ann-flash-persist .ann-flash-emo{ animation:annFlashEmoIn .6s ease-out forwards, annFlashEmoFloat 2s ease-in-out .6s infinite; }
@keyframes annFlashPulse{ 0%,100%{ opacity:.20; } 50%{ opacity:.55; } }
@keyframes annFlashEmoIn{ 0%{ transform:translateY(40px) scale(.4); opacity:0; } 100%{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes annFlashEmoFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-8px) scale(1.06); } }
.ann-head{ display:flex; align-items:center; gap:8px; padding:14px 14px; background:var(--brand,#14B8B0); color:#fff; font-weight:700; font-size:15px; flex:0 0 auto; }
/* header controls: blend into the blue bar, icon stays clearly visible */
.ann-head .icon-btn{ background:transparent!important; border:none!important; color:#fff!important; width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
.ann-head .icon-btn:hover{ background:rgba(255,255,255,.20)!important; }
.ann-head .icon-btn i{ color:#fff; }
.ann-head .icon-btn.danger i{ color:#ffd1d1; }
.ann-head .icon-btn.danger:hover{ background:rgba(255,120,120,.30)!important; }
.ann-head .icon-btn.danger:hover i{ color:#fff; }
.ann-list{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; background:var(--bg,#f6f8f9); }
.ann-card{ position:relative; background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:12px 13px; cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; }
.ann-card:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); border-color:var(--brand,#14B8B0); }
.ann-card-t{ font-weight:700; font-size:13.5px; color:var(--text,#1f2937); margin-bottom:3px; padding-right:44px; }
.ann-card-p{ font-size:12px; color:var(--muted,#6b7280); line-height:1.4; max-height:34px; overflow:hidden; }
.ann-card-m{ font-size:10.5px; color:var(--muted,#9ca3af); margin-top:7px; }
.ann-new{ position:absolute; top:10px; right:10px; background:#ef4444; color:#fff; font-size:8.5px; font-weight:800; letter-spacing:.4px; padding:2px 6px; border-radius:20px; animation:annBlink 1.1s ease-in-out infinite; }
@keyframes annBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.ann-empty{ text-align:center; color:var(--muted,#9ca3af); padding:48px 12px; font-size:13px; }
.ann-empty i{ font-size:32px; display:block; margin-bottom:10px; opacity:.5; }
/* detail overlay */
.ann-detail{ position:absolute; inset:0; background:var(--card,#fff); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); z-index:2; }
.ann-detail.show{ transform:translateX(0); }
.ann-detail-body{ flex:1; overflow-y:auto; padding:18px; }
.ann-detail-title{ font-size:18px; font-weight:800; color:var(--text,#1f2937); margin-bottom:6px; }
.ann-detail-meta{ font-size:11.5px; color:var(--muted,#6b7280); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border,#eee); }
.ann-detail-html{ font-size:14px; line-height:1.6; color:var(--text,#1f2937); word-break:break-word; }
.ann-detail-html a{ color:#2563eb; text-decoration:underline; }
.ann-detail-html img{ max-width:100%; }
.ann-detail-html ul,.ann-detail-html ol{ padding-left:22px; }
/* composer */
.ann-tb{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:6px; border:1px solid var(--border,#e5e7eb); border-bottom:none; border-radius:8px 8px 0 0; background:#f8fafc; }
.ann-tb-sel{ font-size:12px; padding:3px 4px; border:1px solid var(--border,#e5e7eb); border-radius:5px; background:#fff; max-width:120px; }
.ann-tb-b{ min-width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border,#e5e7eb); border-radius:5px; background:#fff; cursor:pointer; font-size:13px; color:#374151; padding:0 6px; }
.ann-tb-b:hover{ background:var(--brand,#14B8B0); color:#fff; border-color:var(--brand,#14B8B0); }
.ann-ed{ min-height:170px; max-height:340px; overflow-y:auto; border:1px solid var(--border,#e5e7eb); border-radius:0 0 8px 8px; padding:12px; font-size:14px; line-height:1.6; outline:none; background:#fff; }
.ann-ed:focus{ border-color:var(--brand,#14B8B0); }
.ann-ed a{ color:#2563eb; text-decoration:underline; }
/* reactions */
.ann-react{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; padding-top:12px; border-top:1px solid var(--border,#eee); }
.ann-rx{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border,#e5e7eb); background:#fff; color:#6b7280; border-radius:999px; padding:5px 12px; cursor:pointer; font-size:12.5px; font-weight:600; transition:transform .12s, background .15s, color .15s, border-color .15s; }
.ann-rx i{ font-size:13px; }
.ann-rx:hover{ background:#f3f4f6; }
.ann-rx .ann-rx-n{ font-variant-numeric:tabular-nums; }
.ann-rx.on.ann-rx-like{ background:#e0edff; border-color:#93c5fd; color:#2563eb; }
.ann-rx.on.ann-rx-love{ background:#ffe4ec; border-color:#f9a8c8; color:#e11d63; }
.ann-rx.on.ann-rx-dislike{ background:#fee2e2; border-color:#fca5a5; color:#dc2626; }
.ann-rx.pop{ animation:annRxPop .35s ease; }
@keyframes annRxPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

@media (max-width:520px){ .ann-drawer{ width:100vw; max-width:100vw; } }

/* ===== V2 — manual reminders + alarm ===== */
.rm-sect-h.rm-manual{ color:#7c3aed; }
.ni-dot.rm-manual{ background:#a78bfa; }
.rem-alarm{ text-align:center; padding:8px 4px; }
.rem-bell{ font-size:38px; color:#f59e0b; margin-bottom:10px; transform-origin:50% 0; display:inline-block; animation:remRing 1s ease-in-out infinite; }
@keyframes remRing{
  0%,100%{ transform:rotate(0); }
  10%{ transform:rotate(22deg); } 20%{ transform:rotate(-18deg); }
  30%{ transform:rotate(16deg); } 40%{ transform:rotate(-12deg); }
  50%{ transform:rotate(8deg); } 60%{ transform:rotate(-5deg); } 70%{ transform:rotate(0); }
}
/* locked dialog (alarm): the header close button can't dismiss it */
#modal.modal-lock .modal-h [data-close-modal]{ display:none; }
.rem-alarm-title{ font-size:19px; font-weight:800; color:var(--text,#1f2937); margin-bottom:6px; }
.rem-alarm-note{ font-size:14px; color:var(--muted,#6b7280); margin-bottom:8px; line-height:1.5; }
.rem-alarm-when{ display:inline-block; font-size:12px; font-weight:600; color:#b45309; background:#fef3c7; border-radius:999px; padding:3px 12px; }

/* ===== V2 — rainbow notification sweep (top of app) ===== */
.notif-sweep{ position:fixed; top:0; left:0; height:9px; width:34%; z-index:4000; pointer-events:none; opacity:0;
  border-radius:0 6px 6px 0;
  background:linear-gradient(90deg,#ff5f6d,#ffc371,#47e5bc,#4facfe,#a06bff,#ff5f6d);
  background-size:200% 100%;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
  transform:translateX(-40vw); }
.notif-sweep.go{ animation:nsSweep 3s cubic-bezier(.4,0,.2,1) 1; }
@keyframes nsSweep{
  0%{ opacity:0; transform:translateX(-40vw); }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ opacity:0; transform:translateX(105vw); }
}

/* ===== V2 — Tasks comments filter toggle ===== */
.cmt-filter-btn{ position:relative; }
.cmt-filter-btn.active{ background:#3dc0c8; border-color:#3dc0c8; color:#fff; }
.cmt-filter-btn .cmt-badge{ position:absolute; top:-6px; right:-6px; }

/* ===== V2 — left-menu count badge (e.g. Request Center pending approvals) ===== */
.nav .item{ position:relative; }
.nav .item .nav-count{ margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#ef4444; color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.sidebar.mini .nav-count{ position:absolute; top:6px; right:6px; margin:0; }

/* ===== V2 — Organisation app launcher ===== */
.apps-btn i{ font-size:15px; }
.apps-pop{ position:absolute; top:calc(100% + 8px); right:0; width:300px; background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:14px; box-shadow:0 18px 46px rgba(15,42,50,.20); padding:10px; display:none; z-index:1500; }
.apps-pop.show{ display:block; }
.apps-head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted,#94a3b8); padding:2px 6px 8px; }
.apps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.app-tile{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px; border-radius:10px; cursor:pointer; text-align:center; transition:background .12s; }
.app-tile:hover{ background:var(--brand-soft,#e6f8f7); }
.app-tile.disabled{ cursor:default; opacity:.6; }
.app-tile.disabled:hover{ background:transparent; }
.app-ic{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.app-nm{ font-size:12.5px; font-weight:600; color:var(--text,#1f2937); }
.app-sub{ font-size:9.5px; color:var(--muted,#94a3b8); }
.apps-empty{ padding:18px; text-align:center; color:var(--muted,#94a3b8); font-size:12.5px; }

/* ===== V2 — @mentions ===== */
.mention{ color:#1d4ed8; background:#e6efff; border-radius:4px; padding:0 4px; font-weight:600; }

/* ===== V2 — Home button + global search ===== */
.home-logo.spin{ animation:homeSpin .5s ease; }
@keyframes homeSpin{ 0%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(180deg) scale(1.12); } 100%{ transform:rotate(360deg) scale(1); } }
.gsearch-wrap{ position:relative; flex:0 1 340px; min-width:150px; margin:0 14px; display:flex; align-items:center; }
.gsearch-wrap > i{ position:absolute; left:12px; color:var(--muted,#94a3b8); font-size:13px; pointer-events:none; }
#gsearch{ width:100%; padding:8px 12px 8px 32px; border:1px solid var(--border,#e5e7eb); border-radius:999px; background:var(--surface,#f8fafc); font-size:13px; outline:none; }
#gsearch:focus{ border-color:var(--brand,#14B8B0); background:#fff; box-shadow:0 0 0 3px rgba(20,184,176,.12); }
.gsearch-pop{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:12px; box-shadow:0 16px 40px rgba(15,42,50,.16); max-height:70vh; overflow:auto; display:none; z-index:1500; padding:5px; }
.gsearch-pop.show{ display:block; }
.gs-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13px; }
.gs-item:hover{ background:var(--brand-soft,#e6f8f7); }
.gs-item > i{ color:var(--brand-dark,#0e8f88); width:16px; text-align:center; }
.gs-l{ flex:1; color:var(--text,#1f2937); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-sub{ font-size:10.5px; font-weight:700; color:var(--muted,#94a3b8); text-transform:uppercase; letter-spacing:.4px; }
.gs-empty{ padding:12px; text-align:center; color:var(--muted,#94a3b8); font-size:13px; }
@media (max-width:820px){ .gsearch-wrap{ display:none; } }

/* ===== V2 — scorecard hover zoom (hint that a card is interactive) ===== */
.kpi, .rc-sc, .delv-kpi{ transition:transform .15s ease, box-shadow .15s ease; }
.kpi:hover, .rc-sc:hover, .delv-kpi:hover{ transform:scale(1.08); box-shadow:0 8px 22px rgba(15,42,50,.14); z-index:1; }
.kpi.sc-click, .rc-sc.sc-click, .delv-kpi.sc-click{ cursor:pointer; }

/* ===== V2 — Overtime mark button + Total/OT change-over ===== */
.ot-chk{ font-size:11px; font-weight:700; padding:4px 9px; border:1px solid var(--border,#cbd5e1); border-radius:7px; background:#fff; color:#64748b; cursor:pointer; white-space:nowrap; }
.ot-chk:hover{ border-color:#16a34a; color:#16a34a; }
.ot-chk.on{ background:#dcfce7; border-color:#22c55e; color:#166534; }
.ot-badge{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.3px; border-radius:5px; padding:1px 5px; margin-left:4px; vertical-align:middle; }
.ot-badge.ot-ok{ color:#166534; background:#dcfce7; border:1px solid #86efac; }   /* OT approved */
.ot-badge.ot-pend{ color:#b42318; background:#fff1f1; border:1px solid #f7b4b4; } /* OT pending / not yet approved */
.seg.ot-seg{ margin:0; }
/* Request Center change-over tabs */
.rc-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.rc-tab{ position:relative; border:1px solid var(--border,#e5e7eb); background:#fff; color:#475569; border-radius:999px; padding:5px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
.rc-tab:hover{ border-color:var(--brand,#14B8B0); color:var(--brand-dark,#0e8f88); }
.rc-tab.active{ background:var(--brand,#14B8B0); border-color:var(--brand,#14B8B0); color:#fff; }
.rc-tab-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; margin-left:6px; border-radius:999px; background:#ef4444; color:#fff; font-size:9.5px; font-weight:800; vertical-align:middle; }
.rc-tab.active .rc-tab-badge{ background:#fff; color:#ef4444; }

/* ===== V2 — validation-list mismatch highlight (Client / Category typed off-list) ===== */
input.bad-val, .in.bad-val{ background:#FFF1F1!important; border-color:#F7B4B4!important; color:#B42318; }
input.bad-val:focus, .in.bad-val:focus{ box-shadow:0 0 0 3px rgba(239,68,68,.15)!important; }