/* =========================================================
   TechSky Media — Premium UI theme
   ========================================================= */
:root{
  --ink:#1b1f2f;
  --side:#2b2f4a;
  --bg:#f3f4fb;
  --line:#e7e8f4;
  --muted:#6b7185;
  --card:#ffffff;

  /* brand */
  --gold:#e0b84a;
  --gold-dark:#c79a2e;
  --primary:#4f46e5;
  --primary-2:#7c3aed;
  --primary-dark:#3730a3;

  /* accent palette */
  --blue:#2563eb;      --blue-bg:#e2e9ff;
  --green:#0ea86e;     --green-bg:#dbf9ec;
  --red:#e11d48;       --red-bg:#ffe3e9;
  --amber:#d97706;     --amber-bg:#fef1d6;
  --purple:#7c3aed;    --purple-bg:#ece4ff;
  --teal:#0891b2;      --teal-bg:#d9f5fb;
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.5;
}
a{color:inherit}

/* =====================  LOGIN (centered)  ===================== */
.login-shell{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 20px;position:relative;
  background:
    radial-gradient(circle at 85% 6%,#8b7bff3d,transparent 42%),
    radial-gradient(circle at 6% 94%,#e0b84a2e,transparent 46%),
    linear-gradient(165deg,#f1f0fc,#e7e4fb 55%,#f1f0fc);
}

.brand,.mobile-brand{font-size:21px;font-weight:700;letter-spacing:-.7px;display:inline-flex;align-items:center}
.brand .brand-icon-img{display:none;width:34px;height:34px;object-fit:contain;flex:none}
.brand .brand-logo-img{display:block;max-width:172px;width:100%;height:auto;object-fit:contain}

/* brand header shown centered above the login card, replaces the old split hero panel */
.login-page-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:28px;position:relative;z-index:1}
.login-page-brand .brand-icon-lg{
  width:60px;height:60px;border-radius:17px;display:grid;place-items:center;font-size:24px;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 16px 30px -12px #4f46e585;margin-bottom:14px;
}
.login-page-brand .brand-word{font-size:21px;font-weight:700;letter-spacing:-.6px;color:var(--ink)}
.login-page-brand .brand-word b{background:linear-gradient(90deg,var(--gold-dark),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.login-page-brand .brand-word-img{max-width:230px;width:100%;height:auto;object-fit:contain}
.login-page-brand p{margin:6px 0 0;color:var(--muted);font-size:13.5px;max-width:320px}

.icon-wrap{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;font-size:19px;flex:none}
.success{background:#dcfce7;color:#0ea86e}

.login-form-wrap{width:min(440px,100%);position:relative;z-index:1}
.login-card{
  width:100%;
  background:#fff;
  border-radius:26px;
  padding:42px 38px 36px;
  border:1px solid #eef0fa;
  box-shadow:0 50px 90px -40px #23295a4a,0 18px 36px -20px #23295a26;
  position:relative;overflow:hidden;
}
.login-card:before{
  content:'';position:absolute;top:-70px;right:-50px;width:220px;height:220px;
  background:radial-gradient(circle,#4f46e51f,transparent 72%);border-radius:50%;pointer-events:none;
}
.login-card:after{
  content:'';position:absolute;bottom:-80px;left:-60px;width:200px;height:200px;
  background:radial-gradient(circle,#e0b84a17,transparent 72%);border-radius:50%;pointer-events:none;
}
.login-card>*{position:relative;z-index:1}
.login-card-icon{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
  box-shadow:0 14px 26px -10px #4f46e585;margin-bottom:24px;
}
.login-card .eyebrow{margin-bottom:10px}
.login-card h2{font-size:30px;letter-spacing:-1.2px;margin:12px 0 6px;font-weight:700}
.login-card>p{color:var(--muted);margin-bottom:26px;font-size:14px}
.login-card label:not(.form-check-label){display:block;font-weight:600;font-size:13px;margin:16px 0;color:#374151}
.login-card input:not([type=checkbox]){
  display:block;width:100%;margin-top:7px;border:1.5px solid #e2e4f1;border-radius:10px;
  padding:13px 14px;outline:none;font-size:14px;transition:.15s;background:#fafaff;
}
.login-card input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px #4f46e51a}
.login-card a{color:var(--primary);text-decoration:none;font-weight:600}
.login-card a:hover{text-decoration:underline}

.btn-primary-ui{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;border:0;border-radius:10px;padding:13px 18px;display:inline-block;
  text-decoration:none;font-weight:600;font-size:14px;cursor:pointer;
  box-shadow:0 10px 22px -10px #4f46e580;transition:.15s;
}
.btn-primary-ui:hover{transform:translateY(-1px);box-shadow:0 14px 26px -10px #4f46e5a0}
.btn-primary-ui:active{transform:translateY(0)}

.mobile-brand{display:none}
.topbar-brand{display:none}
.sidebar-close{display:none}

/* ===== small utility classes used across forms/pages ===== */
.w-100{width:100%}
.d-block{display:block}
.mt-2{margin-top:8px}
.mt-3{margin-top:14px}
.mt-4{margin-top:20px}
.mb-3{margin-bottom:14px}
.mb-4{margin-bottom:20px}
.text-center{text-align:center}
.text-muted{color:var(--muted)}

/* =====================  APP SHELL  ===================== */
/* NOTE: intentionally NOT display:flex. .sidebar is position:fixed and .main-area is
   offset with margin-left, so flex layout isn't needed here — and making main-area a
   flex item silently promotes it (and everything painted inside it, including the
   notification dropdown) into its own stacking context, which trapped the dropdown's
   z-index behind later same-level content like the stat cards. */
.app-layout{display:block;min-height:100vh}
.sidebar{
  position:fixed;inset:0 auto 0 0;width:258px;height:100vh;
  background:#afb4dd;
  padding:26px 15px;color:#c7cbe6;z-index:20;
  box-shadow:4px 0 24px -12px #00000040;
  transition:width .28s cubic-bezier(.4,0,.2,1),padding .28s cubic-bezier(.4,0,.2,1);
  overflow-x:hidden;overflow-y:auto;
  display:flex;flex-direction:column;
}
.sidebar .brand{color:#fff;padding:0 10px;margin-bottom:34px;transition:padding .28s ease,justify-content .28s ease;flex-shrink:0;display:flex;align-items:center;min-height:34px}
.sidebar .brand .brand-icon-img{display:none;width:34px;height:34px;object-fit:contain;flex:none}
.sidebar .brand .brand-logo-img{display:block;max-width:172px;width:100%;height:auto;object-fit:contain}

.nav-link-ui{
  display:flex;align-items:center;gap:13px;color:#050b33;text-decoration:none;
  padding:12px 13px;border-radius:10px;margin:4px 0;font-size:13px;font-weight:500;
  transition:background .15s,color .15s,padding .28s ease,gap .28s ease;position:relative;flex-shrink:0;
}
.nav-link-ui i{font-size:17px;width:19px;text-align:center;flex:none}
.nav-link-ui:hover{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.nav-link-ui.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;box-shadow:0 8px 18px -8px #4f46e590;font-weight:600;
}
.link-label{display:inline-block;white-space:nowrap;overflow:hidden;max-width:170px;opacity:1;transition:opacity .2s ease,max-width .28s cubic-bezier(.4,0,.2,1),margin .28s ease}
.sidebar-bottom{margin-top:auto;padding-top:14px;border-top:1px solid #ffffff1c;flex-shrink:0}

.main-area{margin-left:258px;width:calc(100% - 258px);padding:30px clamp(18px,4vw,58px);transition:margin-left .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1)}

/* ---- collapsible icon-rail sidebar ---- */
.menu-toggle{
  position:static;flex:none;z-index:30;margin-right:16px;
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:#64748b;
  cursor:pointer;transition:border-color .15s,color .15s;font-size:16px;
  box-shadow:0 8px 18px -10px #00000040;
}
.menu-toggle:hover{border-color:var(--primary);color:var(--primary)}
html.sb-collapsed-boot .app-layout .sidebar,
.app-layout.collapsed .sidebar{width:78px;padding-left:14px;padding-right:14px}
html.sb-collapsed-boot .app-layout .sidebar .brand,
.app-layout.collapsed .sidebar .brand{justify-content:center;padding:0}
html.sb-collapsed-boot .app-layout .sidebar .brand-logo-img,
.app-layout.collapsed .sidebar .brand-logo-img{display:none}
html.sb-collapsed-boot .app-layout .sidebar .brand-icon-img,
.app-layout.collapsed .sidebar .brand-icon-img{display:block}
html.sb-collapsed-boot .app-layout .link-label,
.app-layout.collapsed .link-label{opacity:0;max-width:0;margin:0;pointer-events:none}
.app-layout.collapsed .nav-link-ui{justify-content:center;gap:0}
html.sb-collapsed-boot .app-layout .main-area,
.app-layout.collapsed .main-area{margin-left:78px;width:calc(100% - 78px)}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.topbar small{
  color:var(--primary);font-weight:700;letter-spacing:1.3px;font-size:11px;
}
.topbar h1{font-size:27px;letter-spacing:-.9px;margin:6px 0;font-weight:700}
.topbar > div > small:last-child{color:var(--muted);font-weight:500;letter-spacing:normal;font-size:12.5px}
.muted{color:var(--muted)}
.text-success{color:var(--green);font-weight:600}

.top-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.top-actions form{display:contents}
.top-actions .icon-btn{
  width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;
  color:#64748b;display:grid;place-items:center;transition:.15s;
}
.top-actions .icon-btn:hover{border-color:var(--primary);color:var(--primary)}
.profile-dot{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#f3d685);color:#26293f;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  box-shadow:0 6px 14px -6px #e0b84a90;
}

/* =====================  NOTIFICATION BELL  ===================== */
.notif-wrap{position:relative}
.notif-btn{position:relative;cursor:pointer}
.notif-badge{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:20px;
  background:var(--red);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 0 0 2px #fff;line-height:1;
}
.notif-dropdown{
  /* Anchored via JS to the bell's position and rendered with position:fixed so it is
     always painted in the viewport's own top-level stacking context — this makes it
     immune to any stacking-context regressions introduced elsewhere on the page
     (new cards/sections/animations), instead of depending on every ancestor staying
     transform-free. See sidebar_toggle_script() in bootstrap.php for the positioning JS. */
  position:fixed;top:0;right:0;width:330px;max-width:88vw;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 40px -18px #24344d55;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.15s;z-index:9999;overflow:hidden;
}
.notif-wrap.open .notif-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.notif-head{
  display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
  border-bottom:1px solid var(--line);
}
.notif-head b{font-size:13.5px}
.notif-head a{font-size:11.5px;color:var(--primary);font-weight:600;text-decoration:none;cursor:pointer}
.notif-head a:hover{text-decoration:underline}
.notif-list{max-height:340px;overflow-y:auto}
.notif-item{
  display:block;padding:11px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:.12s;
}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:#f6f6fc}
.notif-item.unread{background:#4f46e50c}
.notif-item.unread .notif-item-title::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);
  margin-right:6px;vertical-align:middle;
}
.notif-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.notif-item-title{font-size:12.5px;font-weight:700;color:var(--ink)}
.notif-item-time{font-size:10px;color:var(--muted);white-space:nowrap;flex:none}
.notif-item-msg{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.notif-empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:12.5px}
.notif-empty i{display:block;font-size:22px;margin-bottom:8px;opacity:.5}

/* =====================  STAT GRID  ===================== */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:22px}
.stat-card,.panel{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 10px 24px -18px #24344d4a;
}
.stat-card{padding:20px;position:relative;overflow:hidden;transition:.18s}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px #24344d5c}
.stat-card .stat-top{display:flex;justify-content:space-between;align-items:flex-start}
.stat-card small{font-size:10.5px;letter-spacing:.6px;color:var(--muted);font-weight:600;text-transform:uppercase}
.stat-card b{font-size:29px;display:block;margin:8px 0 2px;letter-spacing:-.8px;font-weight:700}
.stat-card span{font-size:11px;color:var(--muted)}

.mini-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:none}
.blue{background:var(--blue-bg);color:var(--blue)}
.red{background:var(--red-bg);color:var(--red)}
.amber{background:var(--amber-bg);color:var(--amber)}
.purple{background:var(--purple-bg);color:var(--purple)}
.green{background:var(--green-bg);color:var(--green)}
.teal{background:var(--teal-bg);color:var(--teal)}

/* =====================  PANELS / DASHBOARD ROW  ===================== */
.dashboard-row{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:22px}
.panel{padding:24px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.topbar-search{position:relative;display:flex;align-items:center}
.topbar-search i{position:absolute;left:12px;color:var(--muted);font-size:13px;pointer-events:none}
.topbar-search input{width:220px;max-width:60vw;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink);transition:.15s}
.topbar-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #4f46e51a}
.panel h2{font-size:18px;margin:4px 0;font-weight:700;letter-spacing:-.4px}
.panel-head button,.outline-btn{
  border:1.5px solid var(--line);border-radius:9px;background:#fff;padding:8px 13px;
  font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none;transition:.15s;
}
.panel-head button:hover,.outline-btn:hover{border-color:var(--primary);color:var(--primary)}
.chart-wrap{height:230px}

/* ---- admin presence / activity list ---- */
.activity{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #eef0fa;align-items:center}
.activity:last-child{border:0}
.activity .avatar{width:33px;height:33px}
.activity b,.activity small{display:block}
.activity b{font-size:12.5px;font-weight:600}
.activity small{color:var(--muted);font-size:11px}

.status-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-right:2px}
.status-dot.online{background:var(--green);box-shadow:0 0 0 4px #0ea86e26;animation:pulse 1.8s infinite}
.status-dot.offline{background:#cbd0e6}
@keyframes pulse{0%{box-shadow:0 0 0 0 #0ea86e40}70%{box-shadow:0 0 0 7px #0ea86e00}100%{box-shadow:0 0 0 0 #0ea86e00}}

.admin-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #eef0fa}
.admin-row:last-child{border:0}
.admin-row .admin-info{flex:1;min-width:0}
.admin-row b{font-size:12.5px;font-weight:600;display:block}
.admin-row small{font-size:11px;color:var(--muted)}
.pill-status{font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.3px}
.pill-status.online{background:var(--green-bg);color:var(--green)}
.pill-status.offline{background:#f1f2f9;color:#9297ad}
.pill-status.idle{background:var(--amber-bg);color:var(--amber)}
.pill-status.not_paired{background:#f1f2f9;color:#9297ad}
.pill-status.productive{background:var(--green-bg);color:var(--green)}
.pill-status.unproductive{background:#fde8e8;color:#e0453f}
.pill-status.neutral{background:#f1f2f9;color:#7b8194}

.avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
  font-size:11px;font-weight:700;flex:none;
}

/* =====================  TABLE  ===================== */
.table-panel{padding:0}
.table-panel .panel-head{padding:24px 24px 16px;margin:0}
.toolbar{display:flex;gap:9px;flex-wrap:wrap}
.toolbar input,.toolbar select,.form-control-ui{
  border:1.5px solid #e2e4f1;border-radius:9px;padding:9px 12px;font:inherit;font-size:12.5px;
  background:#fafaff;transition:.15s;
}
.toolbar input:focus,.toolbar select:focus,.form-control-ui:focus{
  outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px #4f46e51a;
}
.table-responsive{overflow:auto;max-width:100%}
table{width:100%;border-collapse:collapse;min-width:760px}
/* Small, narrow tables (e.g. Settings > Productivity categorization) shouldn't inherit the
   760px min-width meant for big data-grid tables — that forced them wider than their grid
   column and pushed content past the card's right edge. */
.table-compact{min-width:0}
@media(max-width:760px){.prod-cols{grid-template-columns:1fr}}
th{
  background:#f7f7fd;color:#7a80a0;font-size:10px;text-align:left;letter-spacing:1.1px;
  padding:13px 24px;border-block:1px solid var(--line);font-weight:700;text-transform:uppercase;
}
td{padding:14px 24px 14px 24px;border-bottom:1px solid #eef0fa;font-size:12.5px;color:#464c66}
.emp{display:flex;align-items:center;gap:10px}
.emp b,.emp small{display:block}
.emp b{color:#252b45;font-size:12.5px;font-weight:600}
.emp small{font-size:10.5px;color:#9297ad}

.badge-ui{padding:5px 11px;border-radius:14px;font-size:10.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.badge-present{color:#0ea86e;background:var(--green-bg)}
.badge-absent{color:#e11d48;background:var(--red-bg)}
.badge-leave{color:#2563eb;background:var(--blue-bg)}
.badge-wfh{color:#7c3aed;background:var(--purple-bg)}
.badge-late{color:#d97706;background:var(--amber-bg)}
.badge-not-marked{color:#7a80a0;background:#f1f2f9}
.badge-hidden{color:#9a6a00;background:#fef1d6}
.badge-half-day{color:#d97706;background:var(--amber-bg)}
.badge-short-day{color:#d97706;background:var(--amber-bg)}
.badge-holiday{color:#7c3aed;background:var(--purple-bg)}
.badge-early-exit{color:#e11d48;background:var(--red-bg)}
.badge-extra-day{color:#0891b2;background:var(--teal-bg)}
.short-break-flag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 8px;border-radius:12px;font-size:9.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap;color:#0891b2;background:var(--teal-bg);margin-top:4px}
.short-break-flag i{font-size:10px}
.status-stack{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.opt-tag{font-size:9.5px;font-weight:600;color:#9297ad;background:#f1f2f9;padding:2px 7px;border-radius:8px;margin-left:5px;letter-spacing:.3px;text-transform:uppercase}

/* =====================  FEEDBACK  ===================== */
.emoji-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.emoji-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 9px;font-size:16px;cursor:pointer;transition:.12s;line-height:1}
.emoji-btn:hover{border-color:var(--primary);background:#4f46e50c;transform:translateY(-1px)}
.feedback-card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--card)}
.feedback-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.feedback-card-body{margin:0;font-size:13px;line-height:1.7;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.badge-role-admin{color:var(--purple);background:var(--purple-bg)}
.badge-role-hr{color:var(--blue);background:var(--blue-bg)}
.badge-role-employee{color:#6b7185;background:#f1f2f9}
.form-label{display:block;font-weight:600;font-size:12.5px;margin-bottom:6px;color:#374151}

.page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.page-grid-2{grid-template-columns:1fr 1fr}
.page-grid-3{grid-template-columns:repeat(3,1fr)}
.page-grid-4{grid-template-columns:repeat(4,1fr)}
.page-grid-leave-dept{grid-template-columns:1.3fr 1fr}
.feature-card{padding:22px;position:relative}
.feature-card h3{font-size:15px;font-weight:700;margin:14px 0 6px}
.feature-card p{color:var(--muted);font-size:12px;line-height:1.75}

.holiday-card{padding-top:22px}
.holiday-card-actions{position:absolute;top:16px;right:16px;display:flex;gap:6px;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}
.holiday-card:hover .holiday-card-actions{opacity:1;transform:translateY(0)}
@media(hover:none){.holiday-card-actions{opacity:1;transform:none}}
.icon-only{padding:7px 9px!important;line-height:1;display:inline-flex;align-items:center;justify-content:center}

.modal-overlay{
  position:fixed;inset:0;background:#12142499;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-box{
  background:#fff;border-radius:16px;padding:26px;width:min(420px,92vw);
  box-shadow:0 30px 60px -20px #00000055;
  transform:translateY(12px) scale(.98);transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.show .modal-box{transform:translateY(0) scale(1)}
.modal-box .panel-head{margin-bottom:18px}
.modal-box .panel-head h2{font-size:17px}

.hero-page{
  padding:26px;background:linear-gradient(120deg,#2b2f4a,#4f46e5 130%);
  border-radius:16px;color:white;margin-bottom:20px;position:relative;overflow:hidden;
}
.hero-page:after{content:'';position:absolute;inset:auto -10% -60% auto;width:280px;height:280px;background:#ffffff14;border-radius:50%}
.hero-page small{color:#e0b84a;font-weight:700;letter-spacing:1.5px;font-size:11px}
.hero-page h2{font-size:22px;margin:8px 0 0;font-weight:700;position:relative}
.hero-page p{color:#e2e4fb;margin:8px 0 0;position:relative;font-size:13px}

.pagination-ui{padding:16px 24px;display:flex;justify-content:space-between;color:#8a90ad;font-size:11px}
.modal-demo{position:relative;display:block;background:transparent;inset:auto;padding:0}
.modal-demo .modal-card{width:100%;box-shadow:none;border:1px solid var(--line)}

.notice{padding:13px 16px;border-radius:10px;font-size:13px;margin-bottom:18px;font-weight:500}
.notice.success{background:var(--green-bg);color:#0a7a51}
.notice.error{background:var(--red-bg);color:#b91c3c}

/* =====================  AVATARS / IMAGES  ===================== */
.avatar-img{object-fit:cover;border-radius:50%;display:block}
.profile-dot.avatar-img{box-shadow:0 6px 14px -6px #e0b84a90}

/* =====================  PROFILE PAGE  ===================== */
.profile-hero{
  background:linear-gradient(120deg,#20233b,#2b2f4a 55%,#4f46e5 150%);
  border-radius:20px;color:#fff;padding:32px clamp(20px,4vw,42px);
  display:flex;align-items:center;gap:26px;position:relative;overflow:hidden;margin-bottom:22px;
}
.profile-hero:after{content:'';position:absolute;inset:auto -14% -70% auto;width:320px;height:320px;background:#ffffff14;border-radius:50%}
.profile-hero:before{content:'';position:absolute;top:-100px;left:-60px;width:260px;height:260px;background:radial-gradient(circle,#7c3aed55,transparent 70%);border-radius:50%;filter:blur(6px)}
.profile-hero .avatar-lg{width:96px;height:96px;font-size:30px;border:3px solid #ffffff35;box-shadow:0 14px 30px -12px #00000060;position:relative;z-index:1;flex:none;background:linear-gradient(135deg,var(--gold),#f3d685);color:#26293f}
.profile-hero-info{position:relative;z-index:1;min-width:0;flex:1}
.profile-hero-info h2{font-size:24px;font-weight:700;margin:0 0 6px;letter-spacing:-.6px}
.profile-hero-info p{margin:0;color:#dfe1fb;font-size:13.5px;display:flex;align-items:center;gap:7px}
.profile-hero-info .role-chip{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.5px;background:#ffffff20;padding:6px 13px;border-radius:20px;text-transform:uppercase}

.avatar-upload-form{position:relative;z-index:1;margin-left:auto;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.avatar-upload-form .upload-btn{
  background:#fff;color:var(--primary);font-weight:600;font-size:12.5px;padding:10px 16px;border-radius:9px;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;box-shadow:0 8px 18px -10px #00000050;
}
.avatar-upload-form .upload-btn:hover{background:#f1f2ff;transform:translateY(-1px)}
.avatar-upload-form input[type=file]{display:none}
.avatar-upload-form .remove-btn{background:transparent;border:1px solid #ffffff40;color:#fff;font-size:11px;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.15s}
.avatar-upload-form .remove-btn:hover{background:#ffffff1a}
.avatar-upload-form small{color:#d7dcf2;font-size:10.5px}

.profile-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{padding:22px}
.info-card h3{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;margin:12px 0 6px}
.info-card p{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.info-card span:last-child{font-size:11.5px;color:var(--muted);display:block;margin-top:4px}

/* =====================  EMPLOYEE DASHBOARD PROFILE CARD  ===================== */
.emp-profile-card{
  display:flex;align-items:center;gap:20px;padding:22px 26px;margin-bottom:22px;flex-wrap:wrap;
}
.emp-profile-card .avatar{width:68px;height:68px;font-size:21px;flex:none;background:linear-gradient(135deg,var(--gold),#f3d685);color:#26293f}
.emp-profile-card .emp-meta{flex:1;min-width:200px}
.emp-profile-card .emp-meta h2{font-size:19px;margin:0 0 4px;font-weight:700;letter-spacing:-.4px}
.emp-profile-card .emp-meta p{margin:0;color:var(--muted);font-size:12.5px}
.emp-profile-card .emp-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.emp-profile-card .emp-tags span{background:#f1f2f9;color:#5a5f78;font-size:11px;font-weight:600;padding:6px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:5px}

/* =====================  SELF CHECK-IN / CHECK-OUT  ===================== */
.checkin-card{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:22px 26px}
.geo-note{font-size:11px;color:var(--muted);margin:8px 0 0;display:flex;align-items:center;gap:5px}
.location-pin{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--blue);text-decoration:none;padding:5px 10px;border-radius:8px;background:var(--blue-bg)}
.location-pin:hover{opacity:.8}
.checkin-info h2{font-size:17px;margin:4px 0 0;font-weight:700;letter-spacing:-.3px}
.checkin-btn{padding:13px 26px;font-size:13.5px;white-space:nowrap}
.checkin-btn.checkout-variant{background:linear-gradient(135deg,var(--amber),#f0a83d)}

@media(max-width:1200px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){
  .dashboard-row{grid-template-columns:1fr}
  .page-grid,.page-grid-2,.page-grid-3,.page-grid-4,.page-grid-leave-dept{grid-template-columns:repeat(2,1fr)}
  .profile-info-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .login-shell{padding:32px 16px}
  .login-page-brand{margin-bottom:22px}
  .login-page-brand .brand-icon-lg{width:52px;height:52px;font-size:21px}
  .menu-toggle{top:16px}
  .topbar-brand{display:inline-flex;align-items:center;margin-right:auto;min-width:0}
  .topbar-brand img{height:26px;width:auto;max-width:140px;object-fit:contain}
  .topbar{align-items:flex-start;flex-wrap:wrap}
  .topbar>.menu-toggle,.topbar>.topbar-brand{flex-shrink:0}
  .topbar>div:not(.top-actions){width:100%}
  .top-actions .current-date{display:none}
  .top-actions{width:100%;justify-content:flex-start}
  .top-actions form[method="post"]{width:auto}
  .top-actions .outline-btn{padding:8px 12px;font-size:11.5px}
  .topbar-search input{width:100%}
  .panel-head .topbar-search{width:100%}
  .panel-head .topbar-search input{width:100%;max-width:none}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:14px}
  .stat-card b{font-size:24px}
  .page-grid{grid-template-columns:1fr}
  .page-grid-2,.page-grid-3,.page-grid-4,.page-grid-leave-dept{grid-template-columns:1fr}
  .toolbar{flex-wrap:wrap}
  .toolbar input{width:100%}
  .profile-hero{flex-direction:column;align-items:flex-start;text-align:left}
  .profile-hero .avatar-lg{width:76px;height:76px;font-size:24px}
  .avatar-upload-form{margin-left:0;align-items:flex-start;width:100%}
  .profile-info-grid{grid-template-columns:1fr}
  .emp-profile-card{flex-direction:column;align-items:flex-start;text-align:left;padding:18px}
  .emp-profile-card .outline-btn{width:100%;text-align:center}
  .checkin-card{flex-direction:column;align-items:flex-start;padding:18px}
  .checkin-btn{width:100%;justify-content:center}
  .notif-dropdown{width:300px}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr}
  .topbar h1{font-size:22px}
  .top-actions{gap:8px}
  .top-actions .icon-btn,.top-actions .notif-btn{width:34px;height:34px}
  .notif-dropdown{width:calc(100vw - 24px)}
  .table-panel .panel-head{padding:18px 16px 12px}
}

/* =====================  RESPONSIVE TABLE → CARD  ===================== */
/* Applied only to tables wrapped in .table-cards. Converts rows into stacked
   cards on mobile so nothing needs horizontal scrolling. */
@media(max-width:760px){
  .table-cards{overflow:visible}
  .table-cards table{min-width:0;width:100%}
  .table-cards thead{display:none}
  .table-cards tbody,.table-cards tr{display:block;width:100%}
  .table-cards tr{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    margin-bottom:12px;padding:6px 14px;box-shadow:0 1px 3px #1214240a;
  }
  .table-cards tr:last-child{margin-bottom:0}
  .table-cards td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    padding:10px 0;border-bottom:1px solid #eef0fa;text-align:right;width:100%;
  }
  .table-cards td:last-child{border-bottom:0}
  .table-cards td:empty,.table-cards td:not([data-label]){display:none}
  .table-cards td::before{
    content:attr(data-label);font-size:10px;font-weight:700;letter-spacing:.6px;
    text-transform:uppercase;color:#7a80a0;text-align:left;flex-shrink:0;padding-top:1px;
  }
  .table-cards td .emp{justify-content:flex-end;text-align:right}
  .table-cards td .emp b,.table-cards td .emp small{text-align:right}
  .table-cards tr.row-note{background:transparent;border:0;box-shadow:none;padding:0;margin-top:-8px}
  .table-cards td.note-cell{display:block!important;text-align:left;border-bottom:0;padding:0 0 10px}
  .table-cards td.note-cell::before{content:none}
  .table-cards td[data-label="Action"]{display:block!important;text-align:left}
  .table-cards td[data-label="Action"]::before{display:block;margin-bottom:8px}
}

/* =====================  MOBILE SIDEBAR (OFF-CANVAS DRAWER)  ===================== */
.sidebar-backdrop{display:none}
@media(max-width:760px){
  /* Sidebar is hidden off-screen by default on mobile/tablet and slides in as an
     overlay drawer instead of permanently squeezing the page into an icon-rail. */
  .sidebar{
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:1000;width:258px;padding:26px 15px;
  }
  .app-layout.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-close{
    display:grid;place-items:center;position:absolute;top:24px;right:15px;
    width:32px;height:32px;border-radius:9px;border:1px solid #ffffff2a;
    background:#ffffff14;color:#fff;font-size:14px;cursor:pointer;transition:.15s;
  }
  .sidebar-close:hover{background:#ffffff28;border-color:#ffffff4a}
  /* Full-width content: the sidebar overlays rather than pushing .main-area */
  .app-layout .main-area,
  .app-layout.collapsed .main-area,
  html.sb-collapsed-boot .app-layout .main-area{margin-left:0;width:100%}
  /* Force the sidebar to its full labeled state on mobile even if the desktop
     "collapsed" (icon-rail) preference is stored, since collapsed-mode is a
     desktop-only concept once we're in the off-canvas breakpoint. */
  .app-layout.collapsed .sidebar,
  html.sb-collapsed-boot .app-layout .sidebar{width:258px;padding:26px 15px}
  .app-layout.collapsed .sidebar .brand,
  html.sb-collapsed-boot .app-layout .sidebar .brand{justify-content:flex-start;padding:0 10px}
  .app-layout.collapsed .sidebar .brand-logo-img,
  html.sb-collapsed-boot .app-layout .sidebar .brand-logo-img{display:block}
  .app-layout.collapsed .sidebar .brand-icon-img,
  html.sb-collapsed-boot .app-layout .sidebar .brand-icon-img{display:none}
  .app-layout.collapsed .link-label,
  html.sb-collapsed-boot .app-layout .link-label{opacity:1;max-width:170px;margin:0;pointer-events:auto}
  .app-layout.collapsed .nav-link-ui{justify-content:flex-start;gap:13px}

  .sidebar-backdrop{
    display:block;position:fixed;inset:0;background:#12142499;z-index:900;
    opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
  }
  .app-layout.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible}
}
html,body{max-width:100%;overflow-x:hidden}

/* =========================================================
   PREMIUM POLISH — hover states, motion, micro-interactions
   ========================================================= */

/* smooth, consistent transitions on every interactive control */
a,button,.nav-link-ui,.outline-btn,.btn-primary-ui,.icon-btn,.notif-btn,
.stat-card,.panel,.feature-card,.admin-row,.activity,tbody tr,
.form-control-ui,.avatar,.mini-icon,.badge-ui,.profile-dot{
  transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s ease,
             background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;
}

/* content fade-up on load, staggered so panels feel like they arrive in sequence.
   Two things had to be fixed here (both caused the same family of bug — content
   getting silently trapped in a stray stacking context and painting behind/in front
   of things it shouldn't):
   1) .app-layout must NOT be display:flex (see .app-layout above) — flex items are
      always their own stacking context in the browser, even with z-index:auto, which
      trapped anything painted inside .main-area (like the notification dropdown)
      behind later siblings such as the stat cards.
   2) fill-mode must be "backwards", not "both". A lingering `transform:translateY(0)`
      left behind by fill-mode:both is NOT the same as `transform:none` — it silently
      creates a permanent stacking context on whatever it's applied to. "backwards"
      still applies the entrance keyframe before the (staggered) animation starts, so
      there's no flash of unstyled content, but it stops applying anything once the
      animation ends, so the element cleanly reverts to transform:none. This is what
      was trapping the holiday "Edit" modal at opacity:1 (visible on load and
      un-closable) and trapping the notification dropdown's z-index behind later
      dashboard cards. */
@keyframes ts-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ts-fade-up-flat{from{opacity:0}to{opacity:1}}
.main-area>*:not(.topbar):not(.modal-overlay){animation:ts-fade-up .45s cubic-bezier(.2,.7,.3,1) backwards}
.main-area>.topbar{animation:ts-fade-up-flat .3s ease backwards}
.main-area>.modal-overlay{animation:none}
.main-area>*:nth-child(1){animation-delay:0s}
.main-area>*:nth-child(2){animation-delay:.04s}
.main-area>*:nth-child(3){animation-delay:.08s}
.main-area>*:nth-child(4){animation-delay:.12s}
.main-area>*:nth-child(5){animation-delay:.16s}
.main-area>*:nth-child(n+6){animation-delay:.2s}
@media(prefers-reduced-motion:reduce){.main-area>*{animation:none}}

/* buttons: lift + tactile press feedback */
.btn-primary-ui:hover{transform:translateY(-1px);box-shadow:0 14px 26px -10px #4f46e5a0}
.btn-primary-ui:active{transform:translateY(0) scale(.97)}
.outline-btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px -10px #24344d40}
.outline-btn:active{transform:scale(.95)}
.icon-btn:hover,.notif-btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px -10px #24344d40}
.icon-btn:active,.notif-btn:active{transform:scale(.93)}

/* cards: gentle lift on hover everywhere, not just stat-card */
.panel:hover,.feature-card:hover,.admin-row,.activity{box-shadow:0 14px 30px -20px #24344d4a}
.feature-card{transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease}
.feature-card:hover{transform:translateY(-3px)}
.mini-icon{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.feature-card:hover .mini-icon,.stat-card:hover .mini-icon{transform:scale(1.08) rotate(-4deg)}

/* table rows: soft highlight sweep on hover */
tbody tr{position:relative}
tbody tr:hover{background:#f8f8fe}
tbody tr:hover td{color:var(--ink)}

/* sidebar nav links: sliding glow + icon nudge */
.nav-link-ui{overflow:hidden}
.nav-link-ui i{transition:transform .2s cubic-bezier(.4,0,.2,1)}
.nav-link-ui:hover i{transform:translateX(2px) scale(1.05)}

/* badges: subtle pop on hover, useful in dense tables */
.badge-ui{transition:transform .15s ease}
tr:hover .badge-ui{transform:scale(1.04)}

/* avatars / profile dot: soft glow ring on hover */
.avatar:hover,.profile-dot:hover{box-shadow:0 0 0 4px #4f46e51f}

/* form inputs: smoother focus ring grow */
.form-control-ui,input:not([type=checkbox]):not([type=radio]),select,textarea{transition:box-shadow .18s ease,border-color .18s ease}

/* notification bell: pulse when a badge is present */
@keyframes ts-bell-ring{0%,100%{transform:rotate(0)}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(6deg)}50%{transform:rotate(-3deg)}60%{transform:rotate(0)}}
.notif-btn:has(.notif-badge) i{animation:ts-bell-ring 2.2s ease-in-out infinite}
@keyframes ts-badge-pop{from{transform:scale(0)}to{transform:scale(1)}}
.notif-badge{animation:ts-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}

/* links inside prose/panels get a tidy underline-on-hover instead of default */
.panel a:not(.btn-primary-ui):not(.outline-btn):not(.nav-link-ui):hover{text-decoration:underline}

/* smoother, thinner scrollbars for a more premium feel (WebKit browsers) */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg, var(--primary), var(--primary-2)); border-radius:20px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg, var(--primary), var(--primary-2));}
.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(135deg, var(--primary), var(--primary-2));}
.sidebar::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg, var(--primary), var(--primary-2));}

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

/* ================= EMPLOYEE DIRECTORY (profile-card view) ================= */
.directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.directory-card{padding:24px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.directory-card-head{display:flex;flex-direction:column;align-items:center;gap:12px}
.directory-card-head .avatar-img,.directory-card-head .avatar{border:3px solid #fff;box-shadow:0 8px 20px -10px #24344d55}
.directory-card-head-meta{min-width:0;max-width:100%}
.directory-card-head-meta h3{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.directory-card-head-meta span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.directory-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.directory-tags span{background:#f1f2f9;color:#5a5f78;font-size:10.5px;font-weight:600;padding:5px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:5px}
.directory-info{width:100%;display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.directory-info-row{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink);text-align:left}
.directory-info-row i{color:var(--primary);font-size:13px;width:16px;text-align:center;margin-top:1px;flex:none}
.directory-info-row div{min-width:0}
.directory-info-row small{display:block;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
.directory-info-row b{font-weight:600;word-break:break-word}
.directory-empty{padding:50px 20px;text-align:center;color:var(--muted)}
.directory-empty i{font-size:34px;display:block;margin-bottom:10px;opacity:.6}
@media(max-width:600px){
  .directory-grid{grid-template-columns:1fr}
}

/* ================= CHAT (Admin/HR <-> Employee) ================= */
.nav-link-ui .nav-badge{position:absolute;top:8px;right:12px}
.app-layout.collapsed .nav-link-ui .nav-badge{top:6px;right:6px}
.chat-hint{font-size:10.5px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.chat-shell{display:flex;padding:0;overflow:hidden;height:calc(100vh - 190px);min-height:520px}
.chat-contacts{width:310px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.chat-contacts-head{padding:16px 18px 10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line)}
.chat-contact-list{overflow-y:auto;flex:1}
.chat-contact-item{
  width:100%;display:flex;align-items:center;gap:10px;padding:13px 16px;background:none;border:none;border-bottom:1px solid var(--line);
  text-align:left;cursor:pointer;transition:background .15s;position:relative;
}
.chat-contact-item:hover{background:#f7f7fc}
.chat-contact-item.active{background:var(--blue-bg)}
.chat-avatar-wrap{position:relative;flex:none;display:inline-flex}
.chat-online-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid #fff}
.chat-contact-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.chat-contact-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-contact-top b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-contact-time{font-size:10px;color:var(--muted);flex:none}
.chat-contact-bottom{display:flex;align-items:center;gap:6px;min-width:0}
.chat-role-tag{margin-left:0;flex:none}
.chat-role-admin{background:#ece4ff;color:#7c3aed}
.chat-role-hr{background:#d9f5fb;color:#0891b2}
.chat-role-employee{background:#e2e9ff;color:#2563eb}
.chat-contact-preview{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-unread-badge{
  position:absolute;top:13px;right:14px;min-width:18px;height:18px;padding:0 5px;border-radius:20px;
  background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #fff;
}
.chat-thread{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-thread-head{display:flex;align-items:center;gap:11px;padding:14px 20px;border-bottom:1px solid var(--line);flex:none}
.chat-back-btn{display:none;border:none;background:none;font-size:18px;color:var(--ink);cursor:pointer;padding:4px 6px 4px 0}
.chat-thread-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.chat-thread-meta b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-thread-meta small{font-size:11px}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;background:#fbfbfe}
.chat-bubble-row{display:flex}
.chat-bubble-row.mine{justify-content:flex-end}
.chat-bubble{
  max-width:min(72%,480px);padding:10px 14px 8px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid var(--line);
  font-size:13px;line-height:1.45;word-wrap:break-word;position:relative;box-shadow:0 4px 14px -10px #24344d40;
}
.chat-bubble-row.mine .chat-bubble{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent;border-radius:16px 16px 4px 16px}
.chat-bubble-time{display:block;font-size:9.5px;margin-top:5px;opacity:.65;text-align:right}
.chat-loading,.chat-empty{margin:auto;text-align:center;color:var(--muted);font-size:12.5px;display:flex;flex-direction:column;align-items:center;gap:8px}
.chat-empty i{font-size:26px}
.chat-input-row{display:flex;gap:10px;align-items:flex-end;padding:14px 18px;border-top:1px solid var(--line);flex:none}
.chat-input-row textarea{resize:none;max-height:120px;min-height:42px;flex:1}
.chat-send-btn{flex:none;width:44px;height:42px;border-radius:12px;display:grid;place-items:center;padding:0}

@media(max-width:760px){
  .chat-shell{height:calc(100vh - 220px);border-radius:16px}
  .chat-contacts{width:100%;border-right:none}
  .chat-thread{position:absolute;inset:0;background:#fff;display:flex;transform:translateX(100%);transition:transform .22s ease;border-radius:16px}
  .chat-shell{position:relative}
  .chat-back-btn{display:inline-block}
  .chat-show-thread .chat-contacts{display:none}
  .chat-show-thread .chat-thread{transform:translateX(0)}
}

/* ================= COMPANY ANNOUNCEMENTS ================= */
.announcement-card{padding-top:22px;display:flex;flex-direction:column;gap:10px}
.announcement-card.pinned{border-color:#f3d685;box-shadow:0 0 0 1px #e0b84a40,0 14px 30px -20px #24344d4a}
.announcement-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.announcement-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.announcement-pin-tag{color:#9a6a00;background:#fef1d6;margin-left:0}
.announcement-card h3{margin:2px 0 0;font-size:16px}
.announcement-body{color:var(--ink);font-size:13px;line-height:1.7;white-space:pre-line;margin:0}
.announcement-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.announcement-meta i{margin-right:3px}

/* ================= LIVE SELFIE CHECK-IN ================= */
.selfie-note{color:#9a6a00}
.selfie-modal-box{max-width:420px}
.selfie-stage{position:relative;border-radius:14px;overflow:hidden;background:#111;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.selfie-stage video,.selfie-stage img{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.selfie-actions{display:flex;gap:10px;margin-top:16px}
.selfie-actions button{flex:1}
#selfieError{margin:0}

/* ================= EMPLOYEES: SELFIE CHECK-IN TOGGLE ================= */
.selfie-toggle-form{display:flex;align-items:center;gap:6px}
.selfie-toggle-switch{position:relative;display:inline-block;width:36px;height:20px;flex:none}
.selfie-toggle-switch input{opacity:0;width:0;height:0}
.selfie-toggle-slider{position:absolute;inset:0;background:#dcdfea;border-radius:20px;cursor:pointer;transition:background .18s}
.selfie-toggle-slider::before{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px #0002}
.selfie-toggle-switch input:checked + .selfie-toggle-slider{background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.selfie-toggle-switch input:checked + .selfie-toggle-slider::before{transform:translateX(16px)}

/* ================= ATTENDANCE: SELFIE THUMBNAIL + VIEWER ================= */
.selfie-thumb-btn{border:none;background:none;padding:0;cursor:pointer;border-radius:8px;overflow:hidden;display:inline-block;line-height:0}
.selfie-thumb-btn img{width:34px;height:34px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.selfie-view-box{max-width:360px;text-align:center}
.selfie-view-box img{width:100%;border-radius:14px}

/* ================= MONITORING ANALYTICS (Phase 3) ================= */
.ma-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:0}
.ma-tab{border:none;background:none;padding:10px 16px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:10px 10px 0 0;position:relative;top:1px}
.ma-tab:hover{color:var(--ink)}
.ma-tab.active{color:var(--primary);border-bottom:2px solid var(--primary)}
.ma-panel{display:none}
.ma-panel.active{display:block}
.ma-filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.ma-filterbar select,.ma-filterbar input[type=date]{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink)}
.ma-filterbar .ma-custom-dates{display:none;gap:8px;align-items:center}
.ma-filterbar .ma-custom-dates.show{display:flex}
.ma-loading{padding:30px;text-align:center;color:var(--muted);font-size:12.5px}
.ma-empty{padding:26px;text-align:center;color:var(--muted);font-size:12.5px}
.ma-stat-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.ma-stat-mini{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.ma-stat-mini small{font-size:10.5px;letter-spacing:.5px;color:var(--muted);font-weight:700;text-transform:uppercase;display:block;margin-bottom:6px}
.ma-stat-mini b{font-size:22px;font-weight:700;letter-spacing:-.5px}
.ma-bar-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f1f2f9}
.ma-bar-row:last-child{border-bottom:0}
.ma-bar-label{width:150px;flex:none;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-bar-track{flex:1;height:10px;background:#f1f2f9;border-radius:6px;overflow:hidden}
.ma-bar-fill{height:100%;background:linear-gradient(135deg,var(--primary),var(--primary-2));border-radius:6px}
.ma-bar-meta{width:170px;flex:none;text-align:right;font-size:11.5px;color:var(--muted);white-space:nowrap}
.ma-bar-app-btn{background:none;border:none;padding:0;cursor:pointer;text-align:left;width:100%;color:inherit;font:inherit}
.ma-bar-app-btn:hover .ma-bar-label{color:var(--primary)}
.ma-daychart{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:10px;overflow-x:auto}
.ma-daychart-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:none;width:34px;height:100%}
.ma-daychart-bars{display:flex;flex-direction:column-reverse;width:20px;border-radius:4px 4px 0 0;overflow:hidden;background:#f1f2f9;flex:1;justify-content:flex-start}
.ma-daychart-active{background:var(--primary);width:100%}
.ma-daychart-idle{background:var(--amber);width:100%}
.ma-daychart-label{font-size:9.5px;color:var(--muted);margin-top:6px;white-space:nowrap}
.ma-timeline{list-style:none;margin:0;padding:0}
.ma-timeline li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #f1f2f9}
.ma-timeline li:last-child{border-bottom:0}
.ma-timeline .ma-time{width:118px;flex:none;font-size:11.5px;color:var(--muted);font-weight:600}
.ma-timeline .ma-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
.ma-timeline .ma-dot.active{background:var(--green)}
.ma-timeline .ma-dot.idle{background:var(--amber)}
.ma-timeline .ma-dot.locked{background:#8b95a8}
.ma-timeline .ma-body b{font-size:12.5px}
.ma-timeline .ma-body small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.ma-legend{display:flex;gap:16px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:10px}
.ma-legend span{display:inline-flex;align-items:center;gap:6px}
.ma-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.ma-legend i.active{background:var(--primary)}
.ma-legend i.idle{background:var(--amber)}
@media(max-width:760px){
  .ma-stat-mini-grid{grid-template-columns:repeat(2,1fr)}
  .ma-bar-label{width:100px}
  .ma-bar-meta{width:120px}
}