:root { --ink:#1f2937; --muted:#64748b; --line:#d8dee9; --panel:#ffffff; --bg:#eef2f6; --blue:#2563eb; --green:#059669; --amber:#d97706; --red:#dc2626; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:-.006em; font-feature-settings:"cv02","cv03","cv04","cv11"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; display:flex; }
.sidebar { width:248px; background:#111827; color:#f8fafc; min-height:100vh; padding:18px 14px; position:fixed; inset:0 auto 0 0; }
.brand { height:44px; display:flex; align-items:center; gap:10px; font-weight:700; margin-bottom:22px; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; background:#2563eb; border-radius:7px; font-size:.82rem; }
.nav-item { width:100%; height:42px; border:0; background:transparent; color:#cbd5e1; display:flex; align-items:center; gap:10px; border-radius:7px; padding:0 12px; margin-bottom:6px; text-align:left; }
.nav-item:hover, .nav-item.active { background:#243244; color:#fff; }
.app-shell { margin-left:248px; width:calc(100% - 248px); padding:24px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
h1 { font-size:1.48rem; margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
p { margin:0; color:var(--muted); }
.actions { display:flex; gap:10px; }
.actions .btn { display:flex; align-items:center; gap:8px; }
.metric-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.metric { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:12px; min-height:92px; }
.metric-action { cursor:pointer; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.metric-action:hover,.metric-action:focus-visible { border-color:#8fb0ff; box-shadow:0 10px 24px rgba(37,99,235,.12); transform:translateY(-2px); outline:none; }
.metric i { grid-row:1 / span 2; width:36px; height:36px; display:grid; place-items:center; border-radius:7px; background:#e0ecff; color:var(--blue); }
.metric span { color:var(--muted); font-size:.88rem; }
.metric strong { font-size:1.75rem; line-height:1.1; }
.content-grid { display:grid; gap:14px; margin-bottom:14px; }
.content-grid.two { grid-template-columns:1fr 1fr; }
.content-grid.three { grid-template-columns:repeat(3, minmax(0,1fr)); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; min-width:0; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.has-context-help { position:relative; padding-bottom:24px; }
.info-help { position:absolute; right:8px; bottom:7px; z-index:5; display:inline-flex; align-items:center; justify-content:center; width:11px; height:11px; padding:0; margin:0; border:0; border-radius:50%; background:transparent; color:#94a3b8; cursor:help; font-size:.54rem; line-height:11px; opacity:.72; }
.info-help i { display:inline-flex; align-items:center; justify-content:center; width:11px; height:11px; line-height:11px; }
.info-help:hover,.info-help:focus-visible { color:#2563eb; background:#e8f0ff; outline:none; }
.info-help::after { content:attr(data-info); position:absolute; z-index:1200; left:50%; bottom:calc(100% + 9px); width:min(320px,80vw); padding:10px 12px; border-radius:9px; background:#172033; color:#fff; font-size:.78rem; font-weight:500; line-height:1.45; text-align:left; white-space:normal; box-shadow:0 10px 28px rgba(15,23,42,.25); opacity:0; visibility:hidden; transform:translate(-50%,5px); transition:.15s ease; pointer-events:none; }
.info-help::before { content:''; position:absolute; z-index:1201; left:50%; bottom:calc(100% + 4px); border:5px solid transparent; border-top-color:#172033; opacity:0; visibility:hidden; transform:translateX(-50%); transition:.15s ease; }
.info-help:hover::after,.info-help:hover::before,.info-help:focus-visible::after,.info-help:focus-visible::before { opacity:1; visibility:visible; transform:translate(-50%,0); }
.info-help:hover::before,.info-help:focus-visible::before { transform:translateX(-50%); }
.column-help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;margin-left:3px;border:0;background:transparent;color:#8290a6;font-size:.65rem;vertical-align:middle}.column-help:hover,.column-help:focus-visible{color:#2563eb;outline:none}.column-help::after{content:attr(data-info);position:absolute;z-index:1300;right:-8px;bottom:calc(100% + 9px);width:300px;padding:10px 12px;border-radius:9px;background:#172033;color:#fff;font-size:.78rem;font-weight:500;line-height:1.45;text-align:left;text-transform:none;letter-spacing:0;white-space:normal;box-shadow:0 10px 28px rgba(15,23,42,.25);opacity:0;visibility:hidden;transition:.15s}.column-help:hover::after,.column-help:focus-visible::after{opacity:1;visibility:visible}
@media(max-width:680px){.info-help::after{position:fixed;left:16px;right:16px;bottom:20px;width:auto;transform:none}.info-help:hover::after,.info-help:focus-visible::after{transform:none}.info-help::before{display:none}}
h2 { font-size:.98rem; margin:0; font-weight:650; letter-spacing:-.015em; line-height:1.3; }
.form-label,.table th { font-weight:600; letter-spacing:-.005em; }
.table th { color:#475569; font-size:.8rem; text-transform:none; }
.btn { font-weight:600; letter-spacing:-.006em; }
.metric span { font-size:.82rem; font-weight:500; }
.metric strong { font-weight:700; letter-spacing:-.025em; }
canvas { width:100%; max-height:320px; }
.view { display:none; }
.view.active { display:block; }
.table { font-size:.92rem; }
.badge-sev { display:inline-flex; align-items:center; min-width:72px; justify-content:center; border-radius:999px; padding:4px 8px; color:#fff; }
.badge-high { background:var(--red); } .badge-medium { background:var(--amber); } .badge-low { background:var(--green); }
@media (max-width: 980px) { .sidebar { width:72px; } .brand span:last-child,.nav-item span{display:none;} .app-shell{margin-left:72px;width:calc(100% - 72px);} .metric-grid,.content-grid.two,.content-grid.three{grid-template-columns:1fr 1fr;} }
@media (max-width: 680px) { body{display:block;} .sidebar{position:static;width:100%;min-height:auto;display:flex;gap:8px;overflow:auto;} .brand{margin:0;min-width:44px;} .nav-item{width:42px;min-width:42px;padding:0;justify-content:center;} .app-shell{margin:0;width:100%;padding:16px;} .topbar{align-items:flex-start;flex-direction:column;} .metric-grid,.content-grid.two,.content-grid.three{grid-template-columns:1fr;} }
.hidden { display:none !important; }
.auth-screen { min-height:100vh; width:100%; display:grid; place-items:center; padding:24px; background:#eef2f6; }
.auth-panel { width:min(420px, 100%); background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px; box-shadow:0 18px 45px rgba(15,23,42,.12); }
.auth-panel h1 { font-size:1.35rem; margin:10px 0 20px; }
.auth-brand { color:var(--ink); margin-bottom:8px; }
.auth-error, .form-message { min-height:22px; margin-top:10px; font-size:.9rem; }
.auth-error, .form-message.error { color:var(--red); }
.form-message.success { color:var(--green); }
.session-user { color:var(--muted); font-size:.9rem; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staff-grid { grid-template-columns:minmax(0,1fr); align-items:start; }
.staff-table-head { align-items:flex-start; gap:16px; }
.staff-table-head p, .staff-form-panel p { margin-top:4px; }
.staff-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.staff-actions .btn, .staff-form-panel .panel-head .btn { display:inline-flex; align-items:center; gap:6px; }
.staff-filter-toggle { display:inline-flex; align-items:center; gap:3px; padding:3px; border:1px solid #cfd8e5; border-radius:9px; background:#f8fafc; }
.staff-filter-btn { min-height:30px; padding:4px 10px; border:0; border-radius:7px; background:transparent; color:#64748b; font-size:.78rem; font-weight:750; }
.staff-filter-btn:hover { color:#1d4ed8; background:#eef4ff; }
.staff-filter-btn.active { color:#fff; background:#2563eb; }
.staff-form-panel { max-width:720px; }
.employee-modal { position:fixed; inset:0; z-index:1050; display:grid; place-items:center; padding:24px; background:rgba(15,23,42,.58); backdrop-filter:blur(3px); overflow-y:auto; }
.employee-modal-card { width:min(680px,100%); max-height:calc(100vh - 48px); overflow-y:auto; padding:22px; border-radius:14px; box-shadow:0 24px 70px rgba(15,23,42,.28); animation:employeeModalIn .18s ease-out; }
.employee-modal-card .panel-head { position:sticky; top:-22px; z-index:2; margin:-22px -22px 16px; padding:20px 22px 15px; background:#fff; border-bottom:1px solid #e2e8f0; }
.employee-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:10px; }
body.employee-modal-open { overflow:hidden; }
@keyframes employeeModalIn { from{opacity:0;transform:translateY(12px) scale(.985)} to{opacity:1;transform:none} }
@media(max-width:680px){.employee-modal{padding:10px}.employee-modal-card{max-height:calc(100vh - 20px);padding:18px}.employee-modal-card .panel-head{top:-18px;margin:-18px -18px 14px;padding:17px 18px 13px}.employee-modal-actions{flex-direction:column-reverse}.employee-modal-actions .btn{width:100%}}
.employee-form { display:grid; gap:8px; }
.employee-form .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; min-width:78px; border-radius:999px; padding:4px 9px; font-size:.82rem; font-weight:700; }
.agent-version-pill { display:inline-flex; align-items:center; justify-content:center; min-width:58px; border-radius:999px; padding:4px 9px; background:#eef2ff; color:#3730a3; font-size:.82rem; font-weight:700; }
.detected-agents-panel { border-color:#cbd8ea; }
.detected-agent-actions { display:grid; grid-template-columns:minmax(190px,1fr) auto auto; align-items:center; gap:7px; min-width:390px; }
.detected-agent-actions .btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
.agent-suggestion { display:inline-flex; align-items:center; border-radius:999px; padding:4px 9px; background:#ecfdf5; color:#047857; font-size:.78rem; font-weight:700; }
.muted-empty-inline,.empty-state-inline { color:#64748b; font-size:.86rem; }
.status-active { background:#dcfce7; color:#166534; }
.status-inactive { background:#fee2e2; color:#b91c1c; }
@media (max-width: 980px) { .staff-grid { grid-template-columns:1fr; } .session-user { display:none; } }
.logout-nav { margin-top:18px; color:#fecaca; }
.logout-nav:hover { background:#3f1f2a; color:#fff; }
.main-period-panel { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px; }
.main-period-panel h2 { margin-bottom:4px; }
.main-period-panel p { margin:0; color:#64748b; }
.main-period-panel .employee-filters { min-width:230px; }
@media (max-width:680px) { .main-period-panel{align-items:stretch;flex-direction:column}.main-period-panel .employee-filters{min-width:0} }
.settings-header { margin-bottom:18px; }
.settings-header h2 { margin-bottom:4px; }
.settings-header p, .work-schedule-panel .panel-head p { margin:0; color:#64748b; }
.work-schedule-panel { max-width:900px; }
.settings-tabs { display:flex; gap:4px; margin:0 0 18px; border-bottom:1px solid #dbe3ee; }
.settings-tab { display:flex; align-items:center; gap:8px; border:0; border-bottom:3px solid transparent; background:transparent; color:#64748b; font-weight:700; padding:12px 20px; }
.settings-tab:hover { color:#2563eb; }
.settings-tab.active { color:#2563eb; border-bottom-color:#2563eb; }
.schedule-list { border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.schedule-row { display:grid; grid-template-columns:180px 1fr 1fr; align-items:center; gap:22px; padding:15px 18px; border-bottom:1px solid #e2e8f0; background:#fff; }
.schedule-row:last-child { border-bottom:0; }
.schedule-day { display:flex; align-items:center; gap:10px; font-weight:600; }
.schedule-time { display:flex; align-items:center; gap:10px; }
.schedule-time label { color:#64748b; font-size:.85rem; min-width:42px; }
.schedule-time input { max-width:150px; }
.schedule-row.day-off .schedule-time { opacity:.45; }
.schedule-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; }
.schedule-actions .form-message { margin:0; }
.alert-settings-panel{max-width:900px}.alert-rule{display:grid;grid-template-columns:1fr 230px;align-items:center;gap:24px;padding:20px;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:12px}.alert-rule .form-check-label{display:flex;flex-direction:column;gap:4px}.alert-rule small{color:#64748b}.alert-rule .form-switch{display:flex;align-items:flex-start;gap:10px}.alert-rule .form-check-input{flex:0 0 auto}.alert-rule .form-label{margin-bottom:5px}@media(max-width:680px){.alert-rule{grid-template-columns:1fr}}
@media (max-width:680px) { .schedule-row{grid-template-columns:1fr;gap:10px}.schedule-time input{max-width:none}.schedule-actions{align-items:stretch;flex-direction:column-reverse} }
.employee-view-tabs { display:flex; gap:4px; margin:0 0 18px; border-bottom:1px solid #dbe3ee; }
.employee-view-tab { border:0; border-bottom:3px solid transparent; background:transparent; color:#64748b; font-weight:700; padding:12px 20px; }
.employee-view-tab:hover { color:#2563eb; }
.employee-view-tab.active { color:#2563eb; border-bottom-color:#2563eb; }
.employee-timeline-panel .panel-head { align-items:center; }
.employee-timeline-panel .panel-head p { margin:3px 0 0; color:#64748b; }
.timeline-legend { display:flex; align-items:center; gap:18px; color:#475569; font-size:.9rem; }
.timeline-legend span { display:flex; align-items:center; gap:7px; }
.timeline-dot { width:13px; height:13px; border-radius:4px; display:inline-block; }
.timeline-dot.active { background:#6366f1; }
.timeline-dot.idle { background:repeating-linear-gradient(135deg,#cbd5e1 0 3px,#f8fafc 3px 6px); border:1px solid #94a3b8; }
.timeline-scroll { overflow-x:auto; }
.timeline-table { min-width:980px; }
.timeline-axis,.timeline-row { display:grid; grid-template-columns:150px 100px minmax(700px,1fr); align-items:center; }
.timeline-axis { color:#64748b; font-size:.78rem; font-weight:700; padding:0 0 8px; }
.timeline-hours { position:relative; height:18px; }
.timeline-hours span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.timeline-hours span:first-child { transform:none; }
.timeline-hours span:last-child { transform:translateX(-100%); }
.timeline-row { min-height:58px; border-top:1px solid #e2e8f0; }
.timeline-date { font-weight:600; padding-right:12px; }
.timeline-utilization { font-weight:700; color:#1e3a8a; }
.timeline-track { height:34px; position:relative; border:1px solid #dbe3ee; background-color:#f8fafc; background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(8.333% - 1px),#dbe3ee calc(8.333% - 1px),#dbe3ee 8.333%); }
.timeline-segment { position:absolute; top:3px; bottom:3px; min-width:2px; border-radius:2px; }
.timeline-segment.active { background:#6366f1; }
.timeline-segment.idle { background:repeating-linear-gradient(135deg,#cbd5e1 0 3px,#fff 3px 6px); border:1px solid #94a3b8; }
.timeline-empty { padding:24px 0; color:#64748b; text-align:center; }
.activity-segment-tooltip { position:fixed; z-index:1080; width:min(390px,calc(100vw - 24px)); padding:16px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; box-shadow:0 12px 32px rgba(15,23,42,.22); pointer-events:none; }
.activity-segment-tooltip h3 { margin:0 0 4px; font-size:1rem; }
.activity-segment-tooltip .tooltip-time { color:#2563eb; font-weight:700; margin-bottom:12px; }
.activity-segment-tooltip .tooltip-subtitle { color:#475569; font-weight:700; margin:0 0 8px; }
.activity-segment-tooltip .tooltip-usage { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; margin-top:6px; border-radius:8px; background:#eef2ff; }
.activity-segment-tooltip .tooltip-usage strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-segment-tooltip .tooltip-empty { color:#64748b; margin:0; }
@keyframes refresh-spin { to { transform:rotate(360deg); } }
.refresh-spinning { display:inline-block; animation:refresh-spin .8s linear infinite; }
.employee-time-records-panel .panel-head p { margin:3px 0 0; color:#64748b; }
.time-records-table td,.time-records-table th { white-space:nowrap; vertical-align:middle; }
.time-records-utilization { color:#0f766e; font-weight:700; }
#logoutBtn { gap:8px; align-items:center; }
#clearSessionBtn { color:var(--muted); text-decoration:none; }
#clearSessionBtn:hover { color:var(--red); }.employee-control-panel { margin-bottom:14px; }
.employee-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.employee-toolbar p { margin-top:4px; }
.employee-filters { display:grid; grid-template-columns:minmax(220px, 320px) minmax(180px, 240px); gap:8px 12px; align-items:end; }
.employee-filters .form-label { margin:0; font-size:.82rem; color:var(--muted); }
.employee-filters .form-select { min-height:40px; }
.employee-sticky-header{position:sticky;top:10px;z-index:950;margin-bottom:10px!important;padding:11px 14px;border-color:#d7dfeb;background:rgba(255,255,255,.96)!important;box-shadow:0 7px 22px rgba(15,23,42,.09);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.employee-sticky-header .employee-toolbar{align-items:center;gap:14px}.employee-sticky-header h2{display:flex;align-items:center;gap:8px;font-size:1rem}.employee-sticky-header h2 i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e8f0ff;color:#2563eb;font-size:.84rem}.employee-sticky-header #employeeDetailSubtitle{max-width:390px;margin-top:1px;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-sticky-header .employee-filters{grid-template-columns:minmax(210px,300px) minmax(165px,210px);gap:3px 10px}.employee-sticky-header .employee-filters .form-label{font-size:.68rem;line-height:1.1}.employee-sticky-header .form-select{min-height:34px;height:34px;padding-top:4px;padding-bottom:4px;font-size:.82rem}
.employee-metrics { margin-bottom:14px; }
.employee-charts .chart-panel { min-height:360px; }
.chart-panel canvas { min-height:280px; }
.data-pill { display:inline-flex; align-items:center; height:28px; border-radius:999px; background:#e0ecff; color:#1d4ed8; padding:0 10px; font-size:.78rem; font-weight:700; }
.empty-state { display:grid; justify-items:center; gap:8px; text-align:center; padding:34px 20px; }
.empty-state i { width:52px; height:52px; display:grid; place-items:center; border-radius:8px; background:#e0ecff; color:var(--blue); font-size:1.5rem; }
.employee-row { cursor:pointer; }
.employee-row:hover td { background:#eef6ff; }
.row-actions { display:flex; align-items:center; gap:6px; }
.icon-btn { width:32px; height:32px; display:inline-grid; place-items:center; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:7px; }
.icon-btn:hover { border-color:var(--blue); color:var(--blue); background:#e0ecff; }
.icon-btn.danger:hover { border-color:var(--red); color:var(--red); background:#fee2e2; }
.usage-list { min-height:220px; }
.usage-row { display:grid; gap:7px; padding:10px 0; border-bottom:1px solid #edf1f6; }
.usage-row:last-child { border-bottom:0; }
.usage-row div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.usage-row strong { font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usage-row span { color:var(--muted); font-size:.86rem; white-space:nowrap; }
.usage-bar { height:8px; border-radius:999px; background:#edf2f7; overflow:hidden; }
.usage-bar span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, #2563eb, #059669); }
.combined-usage-panel canvas { min-height:230px; max-height:270px; }
.combined-usage-legend { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 12px; margin-top:12px; }
.combined-usage-item { display:grid; grid-template-columns:12px 18px minmax(0, 1fr) auto auto; align-items:center; gap:8px; min-height:32px; color:var(--ink); }
.combined-usage-item strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; }
.combined-usage-item em { font-style:normal; border-radius:999px; background:#edf2f7; color:var(--muted); padding:2px 7px; font-size:.72rem; font-weight:700; }
.combined-usage-item span:not(.usage-dot) { color:var(--ink); font-size:.84rem; font-weight:700; }
.combined-usage-item small { color:var(--muted); font-size:.78rem; white-space:nowrap; }
.usage-dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.activity-log th, .activity-log td { vertical-align:middle; }
.activity-log td:nth-child(3) { max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-log td:nth-child(4) { white-space:nowrap; font-weight:600; }
.muted-empty { color:var(--muted); padding:12px 0; }
@media (max-width: 980px) { .employee-toolbar { align-items:stretch; flex-direction:column; } .employee-filters { grid-template-columns:1fr 1fr; } }
@media (max-width: 680px) { .employee-filters { grid-template-columns:1fr; } .employee-charts .chart-panel { min-height:320px; } .combined-usage-legend { grid-template-columns:1fr; } .combined-usage-item { grid-template-columns:12px 18px minmax(0, 1fr) auto; } .combined-usage-item small { display:none; } .activity-log td:nth-child(3) { max-width:220px; } }
.management-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.management-header p { margin-top:4px; }
.management-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.management-actions .btn { display:inline-flex; align-items:center; gap:6px; }
.management-period-tabs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; max-width:760px; }
.period-tab { min-height:34px; border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px; padding:7px 12px; font-size:.86rem; font-weight:700; line-height:1; }
.period-tab:hover, .period-tab.active { border-color:var(--blue); background:#e0ecff; color:#1d4ed8; }
.period-tab:focus-visible { outline:3px solid rgba(37,99,235,.22); outline-offset:2px; }
.management-metrics { margin-bottom:14px; }
.management-grid .chart-panel { min-height:340px; }
.management-grid .chart-panel canvas { min-height:260px; }
.management-table td, .management-table th { vertical-align:middle; }
.score-pill { display:inline-flex; align-items:center; justify-content:center; min-width:64px; border-radius:999px; padding:4px 8px; font-weight:700; font-size:.82rem; }
.score-low { background:#fee2e2; color:#b91c1c; }
.management-internet-panel { margin-bottom:14px; }
.internet-employee-row { cursor:pointer; }
.internet-employee-row:hover td { background:#f8faff; }
.internet-employee-row.selected td { background:#eaf2ff; }
.internet-employee-row.selected td:first-child { box-shadow:inset 4px 0 0 #2563eb; }
.network-detail-modal-card { width:min(860px,96vw); max-height:88vh; overflow:auto; }
.network-detail-note { display:flex; align-items:flex-start; gap:8px; margin:0 0 14px; padding:10px 12px; border:1px solid #dbeafe; border-radius:10px; background:#f8fbff; color:#475569; font-size:.83rem; }
.network-detail-note i { color:#2563eb; margin-top:1px; }
@media (max-width: 980px) { .management-header { align-items:flex-start; flex-direction:column; } .management-actions { justify-content:flex-start; } }
.management-time-panel { margin-bottom:14px; }
.time-register-table td:nth-child(1) { font-weight:600; }
.score-ok { background:#dcfce7; color:#166534; }
.score-mid { background:#fef3c7; color:#92400e; }

/* Corporate interface refresh */
:root {
  --ink:#172033;
  --muted:#65718a;
  --line:#dfe5ee;
  --panel:#ffffff;
  --bg:#f3f6fa;
  --blue:#1f5eff;
  --blue-dark:#1747c8;
  --blue-soft:#edf3ff;
  --nav:#0d1728;
  --nav-active:#1e304a;
  --green:#078667;
  --amber:#c97914;
  --red:#cf3348;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 5px 16px rgba(15,23,42,.045);
  --shadow-md:0 14px 36px rgba(15,23,42,.10);
}
html { background:var(--bg); }
body { background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:-.006em; font-feature-settings:"cv02","cv03","cv04","cv11"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button,input,select,textarea { font:inherit; }
.sidebar { width:264px; padding:22px 16px; background:linear-gradient(180deg,#0d1728 0%,#111d31 100%); border-right:1px solid rgba(255,255,255,.05); box-shadow:8px 0 28px rgba(15,23,42,.08); z-index:20; }
.sidebar .brand { height:48px; margin:0 8px 28px; font-size:1.03rem; letter-spacing:.01em; }
.brand-mark { width:38px; height:38px; border-radius:10px; background:var(--blue); box-shadow:0 8px 18px rgba(31,94,255,.28); font-size:.78rem; letter-spacing:.04em; }
.nav-item { min-height:46px; height:auto; margin-bottom:5px; padding:10px 13px; border-radius:9px; color:#b9c4d6; font-weight:600; transition:background .18s ease,color .18s ease,transform .18s ease; }
.nav-item i { width:20px; font-size:1.05rem; text-align:center; }
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; transform:translateX(2px); }
.nav-item.active { background:var(--nav-active); color:#fff; box-shadow:inset 3px 0 0 #4f83ff; }
.logout-nav { margin-top:24px; border-top:1px solid rgba(255,255,255,.08); border-radius:0 0 9px 9px; padding-top:15px; color:#ffb8c2; }
.app-shell { margin-left:264px; width:calc(100% - 264px); max-width:1800px; padding:28px 32px 42px; }
.topbar { min-height:68px; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.topbar h1 { font-size:1.58rem; font-weight:700; letter-spacing:-.025em; }
.topbar p { margin-top:3px; font-size:.9rem; }
.actions { align-items:center; gap:9px; }
.session-user { padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#475569; font-weight:600; }
.btn { min-height:40px; border-radius:8px; font-weight:600; box-shadow:none !important; transition:transform .15s ease,background .15s ease,border-color .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--blue); border-color:var(--blue); }
.btn-primary:hover,.btn-primary:focus { background:var(--blue-dark); border-color:var(--blue-dark); }
.btn-outline-secondary { border-color:#cbd4e1; color:#475569; background:#fff; }
.btn-outline-secondary:hover { background:#f7f9fc; color:var(--ink); border-color:#aeb9c9; }
.btn-outline-danger { border-color:#efc7ce; color:#b4233a; background:#fff; }
.form-control,.form-select { min-height:42px; border-color:#cfd8e5; border-radius:8px; color:var(--ink); background-color:#fff; }
.form-control:focus,.form-select:focus { border-color:#7ba2ff; box-shadow:0 0 0 3px rgba(31,94,255,.13); }
.form-label { color:#46526a; font-weight:650; font-size:.86rem; }
.panel { border:1px solid var(--line); border-radius:12px; padding:20px; box-shadow:var(--shadow-sm); }
.panel-head { margin-bottom:16px; gap:16px; }
h2 { color:#1b2538; font-size:1rem; font-weight:700; letter-spacing:-.015em; }
.metric-grid,.content-grid { gap:18px; margin-bottom:18px; }
.metric { min-height:108px; padding:20px; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); grid-template-columns:44px 1fr; column-gap:14px; }
.metric i { width:44px; height:44px; border-radius:10px; background:var(--blue-soft); color:var(--blue); font-size:1.1rem; }
.metric span { color:#6a758b; font-size:.81rem; font-weight:600; text-transform:none; letter-spacing:-.005em; }
.metric strong { color:#172033; font-size:1.75rem; font-weight:700; letter-spacing:-.035em; }
.table { --bs-table-bg:transparent; --bs-table-hover-bg:#f6f9ff; color:#263248; margin-bottom:0; }
.table > :not(caption) > * > * { padding:.82rem .75rem; border-bottom-color:#e7ebf2; }
.table thead th { color:#5d6980; background:#f7f9fc; font-size:.76rem; font-weight:750; letter-spacing:.035em; text-transform:uppercase; border-bottom:1px solid #dfe5ee; }
.table-responsive { border:1px solid #e4e9f1; border-radius:9px; overflow:auto; }
.dataTables_wrapper .dt-search input,.dataTables_wrapper .dt-length select { border:1px solid #cfd8e5 !important; border-radius:7px !important; padding:6px 9px !important; }
.dataTables_wrapper .dt-paging .dt-paging-button { border-radius:7px !important; }
.status-pill,.agent-version-pill,.score-pill,.data-pill { font-weight:750; }
.data-pill { height:30px; padding:0 11px; background:var(--blue-soft); color:#2456c7; }
.main-period-panel,.employee-control-panel,.management-header,.settings-header { background:linear-gradient(135deg,#fff 0%,#f8faff 100%); }
.employee-toolbar h2,.management-header h2,.settings-header h2,.main-period-panel h2 { font-size:1.15rem; }
.employee-view-tabs,.settings-tabs { gap:8px; padding:0 4px; border-bottom-color:#d7deea; }
.employee-view-tab,.settings-tab { min-height:46px; padding:11px 17px; border-radius:8px 8px 0 0; font-size:.9rem; }
.employee-view-tab:hover,.settings-tab:hover { background:#f2f6ff; }
.employee-view-tab.active,.settings-tab.active { background:var(--blue-soft); color:#1e54d1; border-bottom-color:var(--blue); }
.timeline-track { border-color:#d8e0ec; background-color:#f8faff; }
.timeline-segment.active { background:#5575e7; box-shadow:0 2px 5px rgba(85,117,231,.25); }
.activity-segment-tooltip { border-radius:12px; box-shadow:var(--shadow-md); }
.schedule-list { border-color:#dfe5ee; border-radius:10px; }
.schedule-row { min-height:68px; border-bottom-color:#e7ebf2; transition:background .15s ease; }
.schedule-row:hover { background:#f9fbff; }
.auth-screen { background:radial-gradient(circle at 20% 15%,#e7efff 0,transparent 36%),linear-gradient(145deg,#f7f9fc,#edf2f8); }
.auth-panel { border:1px solid rgba(203,213,225,.85); border-radius:14px; padding:32px; box-shadow:0 24px 70px rgba(15,23,42,.14); }
.auth-panel h1 { font-size:1.5rem; font-weight:750; letter-spacing:-.025em; }
.icon-btn { border-color:#d4dce8; border-radius:8px; }
.usage-bar { height:7px; background:#e9eef5; }
.usage-bar span { background:var(--blue); }
.compact-table-panel { padding:16px 18px; }
.compact-table-panel .panel-head { margin-bottom:10px; }
.compact-table-panel .panel-head h2 { font-size:.95rem; }
.compact-table-panel .panel-head p { margin-top:2px; font-size:.78rem; }
.compact-table-panel .table-responsive { border-radius:8px; }
.compact-table-panel .table { font-size:.82rem; }
.compact-table-panel .table > :not(caption) > * > * { padding:.52rem .62rem; vertical-align:middle; }
.compact-table-panel .table thead th { padding-top:.48rem; padding-bottom:.48rem; font-size:.69rem; letter-spacing:.025em; white-space:nowrap; }
.compact-table-panel .status-pill,.compact-table-panel .score-pill,.compact-table-panel .agent-version-pill { min-width:62px; padding:3px 7px; font-size:.72rem; }
.compact-table-panel .dt-layout-row { margin:.35rem 0; }
.compact-table-panel .dt-search,.compact-table-panel .dt-info,.compact-table-panel .dt-paging { font-size:.76rem; color:#64748b; }
.compact-table-panel .dt-search input { min-height:32px; max-width:180px; padding:4px 7px !important; }
.compact-table-panel .dt-paging-button { min-width:30px !important; min-height:30px; padding:3px 7px !important; }
.ranking-panel { margin-bottom:14px; }
.employee-realtime-panel .table-responsive{margin-top:4px}.realtime-table{min-width:1080px}.realtime-app{display:flex;flex-direction:column;max-width:280px}.realtime-app strong{font-size:.82rem}.realtime-app small{color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.realtime-note{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:.78rem;color:#64748b}.realtime-status{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700}.realtime-status::before{content:'';width:8px;height:8px;border-radius:50%;background:#94a3b8}.realtime-status.active{color:#087f5b}.realtime-status.active::before{background:#10b981;box-shadow:0 0 0 3px #d1fae5}.realtime-status.idle{color:#a16207}.realtime-status.idle::before{background:#f59e0b}.realtime-status.offline{color:#b4233a}.realtime-status.offline::before{background:#ef4444}.capture-pending{white-space:nowrap}.screenshot-policy-box{margin-top:8px;padding:12px;border:1px solid #dfe5ee;border-radius:9px;background:#f8faff}.screenshot-policy-box .form-check-label{font-weight:650}
.main-chart-grid > .panel { min-height:350px; }
.main-chart-grid canvas { min-height:260px; }
@media (max-width:1200px) and (min-width:681px){.main-chart-grid{grid-template-columns:1fr 1fr}.main-chart-grid> .panel:last-child{grid-column:1/-1}}
*:focus-visible { outline:3px solid rgba(31,94,255,.22); outline-offset:2px; }
@media (max-width:980px) {
  .sidebar { width:78px; padding-inline:12px; }
  .sidebar .brand { margin-inline:7px; }
  .app-shell { margin-left:78px; width:calc(100% - 78px); padding:24px; }
}
@media (max-width:680px) {
  .sidebar { width:100%; padding:10px 12px; box-shadow:0 5px 20px rgba(15,23,42,.12); }
  .sidebar .brand { min-width:42px; margin:0; }
  .app-shell { width:100%; padding:18px 14px 32px; }
  .topbar { gap:14px; }
  .actions { width:100%; flex-wrap:wrap; }
  .panel { padding:16px; border-radius:10px; }
  .metric { min-height:96px; padding:16px; }
  .employee-view-tabs,.settings-tabs { overflow-x:auto; flex-wrap:nowrap; }
  .employee-view-tab,.settings-tab { white-space:nowrap; }
}

.admin-user-form{margin-top:1rem;padding:1rem;border:1px solid var(--border,#dbe3ee);border-radius:12px;background:#f8fafc}.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:.65rem}.permission-option{display:flex;align-items:center;gap:.55rem;padding:.7rem;border:1px solid #dbe3ee;border-radius:9px;background:#fff}.access-tags{display:flex;gap:.3rem;flex-wrap:wrap}.access-tag{font-size:.72rem;padding:.2rem .45rem;border-radius:20px;background:#e8f0ff;color:#1d4ed8}
.employee-access-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid #dbe3ee}.employee-access-head label,.employee-access-head small{display:block}.employee-access-head small{color:#64748b}.employee-access-head select{width:min(320px,100%)}.employee-assignment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;max-height:260px;overflow:auto;margin-top:12px;padding:12px;border:1px solid #dbe3ee;border-radius:10px;background:#fff}.employee-assignment{display:flex;align-items:center;gap:9px;padding:9px;border-radius:8px;background:#f8fafc}.employee-assignment span{display:flex;flex-direction:column;min-width:0}.employee-assignment small{color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.permission-option.permission-disabled{opacity:.45;background:#eef2f7;cursor:not-allowed}
.screenshot-viewer-card{width:min(1100px,96vw);max-height:92vh;overflow:auto}.screenshot-viewer-card img{display:block;width:100%;height:auto;border-radius:8px;background:#0f172a}
.screenshot-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) auto;gap:12px;align-items:end;margin:20px 0 28px;padding:16px;border:1px solid #dfe5ee;border-radius:12px;background:#f8fafc}.screenshot-timeline{display:grid;gap:28px}.screenshot-day{position:relative;padding-left:28px}.screenshot-day:before{content:"";position:absolute;left:6px;top:42px;bottom:0;width:2px;background:#dbe5f4}.screenshot-day-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:1rem}.screenshot-day-title:before{content:"";width:14px;height:14px;margin-left:-28px;border:3px solid #fff;border-radius:50%;background:#2563eb;box-shadow:0 0 0 2px #2563eb}.screenshot-strip{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x proximity}.screenshot-card{flex:0 0 245px;padding:0;border:1px solid #dfe5ee;border-radius:12px;overflow:hidden;background:#fff;text-align:left;box-shadow:0 4px 12px rgba(15,23,42,.05);scroll-snap-align:start;transition:.18s}.screenshot-card:hover{transform:translateY(-2px);border-color:#8fb0ff;box-shadow:0 8px 20px rgba(15,23,42,.1)}.screenshot-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#e9eef6}.screenshot-card-meta{display:block;padding:10px 12px}.screenshot-card-meta strong,.screenshot-card-meta small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screenshot-card-meta small{margin-top:3px;color:#64748b}.screenshot-empty{padding:42px;text-align:center;color:#64748b;border:1px dashed #cbd5e1;border-radius:12px}
.brand-mark{overflow:hidden}.brand-mark img,.branding-preview .brand-mark img{width:100%;height:100%;object-fit:contain}.session-user-button{cursor:pointer}.session-user-button:hover{border-color:#7ba2ff;color:#1f5eff}.profile-modal-card{width:min(500px,100%)}.branding-panel{max-width:760px}.branding-preview{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px;border:1px solid #dfe5ee;border-radius:10px;background:#f8faff}.app-footer{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:24px;padding:18px 8px 4px;border-top:1px solid #dfe5ee;color:#718096;font-size:.76rem}.app-footer a{color:#3867d6;text-decoration:none}.app-footer a:hover{text-decoration:underline}@media(max-width:680px){.app-footer{flex-direction:column;gap:4px;padding-bottom:8px}}
.brand{gap:12px}.brand-mark{flex:0 0 auto;width:58px;height:48px;border-radius:10px}.brand-mark.has-logo{background:transparent!important;box-shadow:none!important;border-radius:0}.brand-mark.has-logo img{object-fit:contain}.brand-copy{display:flex;flex-direction:column;min-width:0;line-height:1.15}.brand-copy strong{font-size:.96rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-copy small{margin-top:4px;color:#9fb0ca;font-size:.68rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-brand .brand-mark{width:72px;height:58px}.auth-brand .brand-copy strong{font-size:1.08rem}.auth-brand .brand-copy small{color:#64748b;font-size:.75rem}.branding-preview{gap:16px;background:transparent}.branding-preview .brand-mark{width:96px;height:72px}.branding-preview .brand-copy strong{font-size:1.08rem}.branding-preview .brand-copy small{color:#64748b;font-size:.78rem}
.downloads-panel{max-width:900px}.download-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px;border:1px solid #dfe7f3;border-radius:12px;background:#fff}.download-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:#eaf2ff;color:#2563eb;font-size:1.45rem}.download-body{min-width:0}.download-kicker{display:block;margin-bottom:3px;color:#64748b;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.download-body h3{margin:0;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.download-body p{margin:5px 0 0;color:#64748b;font-size:.84rem}.download-card.download-error{border-color:#fecdd3;background:#fff7f8}.download-card.download-error .download-icon{background:#fee2e2;color:#dc2626}.download-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;color:#64748b;font-size:.82rem}.download-note i{color:#2563eb;margin-top:1px}@media (max-width:680px){.download-card{grid-template-columns:44px minmax(0,1fr);align-items:start}.download-card .btn{grid-column:1/-1;width:100%;justify-content:center}.download-icon{width:44px;height:44px;font-size:1.2rem}}

/* Mobile application layout */
@media (max-width:680px) {
  html,body { width:100%; max-width:100%; overflow-x:hidden; }
  body.authenticated { display:block; padding-bottom:72px; }
  .sidebar { position:fixed; inset:auto 0 0 0; width:100%; min-height:0; height:68px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:3px; overflow-x:auto; overflow-y:hidden; background:#0d1728; border:0; border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -6px 24px rgba(15,23,42,.18); z-index:1100; scrollbar-width:none; }
  .sidebar::-webkit-scrollbar { display:none; }
  .sidebar .brand { display:none; }
  .sidebar .nav-item { flex:1 0 52px; width:auto; min-width:52px; height:56px; min-height:56px; margin:0; padding:5px 3px; border-radius:9px; display:flex; flex-direction:column; justify-content:center; gap:2px; font-size:.61rem; line-height:1; text-align:center; }
  .sidebar .nav-item i { width:auto; font-size:1.08rem; }
  .sidebar .nav-item span { display:block; max-width:64px; overflow:hidden; text-overflow:ellipsis; }
  .sidebar .nav-item.active { box-shadow:inset 0 3px 0 #4f83ff; }
  .sidebar .nav-item:hover { transform:none; }
  .sidebar .logout-nav { margin:0; padding:5px 3px; border:0; border-radius:9px; }
  .app-shell { margin:0; width:100%; max-width:100%; padding:14px 12px 24px; }
  .topbar { min-height:0; margin-bottom:16px; padding-bottom:13px; align-items:flex-start; flex-direction:column; gap:10px; }
  .topbar h1 { font-size:1.3rem; }
  .topbar p { font-size:.78rem; white-space:normal; }
  .topbar .actions { width:100%; display:grid; grid-template-columns:1fr auto auto auto; gap:7px; }
  .topbar .session-user { display:block; min-width:0; max-width:none; overflow:hidden; }
  .topbar .actions .btn { min-width:40px; min-height:38px; padding:7px 10px; justify-content:center; }
  .topbar .actions .btn span { display:none; }
  .panel { min-width:0; width:100%; padding:14px; }
  .panel-head,.staff-table-head { align-items:flex-start; flex-direction:column; gap:10px; }
  .panel-head > * { max-width:100%; }
  .main-period-panel,.employee-toolbar,.management-header { align-items:stretch; flex-direction:column; gap:14px; }
  .main-period-panel .employee-filters,.employee-filters { width:100%; min-width:0; }
  .employee-toolbar .employee-filters { grid-template-columns:1fr; }
  .management-actions,.staff-actions { width:100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }
  .management-period-tabs { width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:5px; scrollbar-width:none; }
  .period-tab { flex:0 0 auto; white-space:nowrap; }
  .metric-grid,.employee-metrics,.management-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric { min-width:0; min-height:88px; padding:12px; grid-template-columns:32px minmax(0,1fr); column-gap:8px; }
  .metric i { width:32px; height:32px; font-size:.9rem; }
  .metric span { font-size:.7rem; overflow-wrap:anywhere; }
  .metric strong { font-size:1.3rem; }
  .content-grid.two,.content-grid.three,.management-grid,.employee-charts { grid-template-columns:1fr; }
  .chart-panel { min-height:300px; }
  .chart-panel canvas { min-height:230px; }
  .employee-view-tabs,.settings-tabs { margin-inline:-12px; padding-inline:12px; gap:3px; scrollbar-width:none; }
  .employee-view-tab,.settings-tab { min-height:42px; padding:9px 12px; font-size:.8rem; }
  .timeline-legend { width:100%; gap:10px; flex-wrap:wrap; font-size:.78rem; }
  .timeline-scroll { overflow-x:auto; }
  .timeline-table { min-width:720px; }
  .table-responsive,.dt-layout-table { width:100%; max-width:100%; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  #employeesTable,#detectedAgentsTable,#rankingTable,#deviceStatusTable,#employeeHistoryTable { min-width:720px !important; }
  .detected-agent-actions { grid-template-columns:1fr; min-width:210px; }
  .dt-layout-row { min-width:0; flex-wrap:wrap; gap:8px; }
  .dt-search { width:100%; }
  .dt-search input { width:100%; margin:4px 0 0 !important; }
  .schedule-row { grid-template-columns:1fr; gap:10px; padding:13px; }
  .schedule-time { width:100%; }
  .schedule-time input { max-width:none; width:100%; }
  .permission-grid { grid-template-columns:1fr; }
  .alert-rule { padding:14px; }
  .employee-modal { padding:8px; align-items:end; }
  .employee-modal-card { width:100%; max-height:94dvh; border-radius:16px 16px 10px 10px; }
  .employee-modal-actions { position:sticky; bottom:-18px; padding:12px 0 0; background:#fff; }
  .auth-screen { padding:14px; }
  .auth-panel { padding:22px 18px; }
  .auth-brand{align-items:center}.auth-brand .brand-mark{width:62px;height:50px}.auth-brand .brand-copy{max-width:calc(100vw - 150px)}.branding-preview{align-items:center}.branding-preview .brand-mark{width:76px;height:58px}.branding-preview .brand-copy{max-width:calc(100% - 92px)}
  .activity-segment-tooltip { position:fixed; left:10px !important; right:10px !important; bottom:80px; top:auto !important; width:auto; max-width:none; }
  .screenshot-filters{grid-template-columns:1fr 1fr;padding:12px}.screenshot-filters>div:first-child,.screenshot-filters>div:nth-child(2),.screenshot-filters .btn{grid-column:1/-1}.screenshot-card{flex-basis:215px}.screenshot-day{padding-left:22px}.screenshot-day-title:before{margin-left:-22px}
}
@media (max-width:360px) {
  .metric-grid,.employee-metrics,.management-metrics { grid-template-columns:1fr; }
  .sidebar .nav-item { min-width:48px; }
}
@media (min-width:681px) and (max-width:980px){.employee-sticky-header .employee-toolbar{flex-direction:row;align-items:center}.employee-sticky-header .employee-filters{grid-template-columns:minmax(180px,1fr) minmax(150px,.7fr);width:min(480px,62%)}}
@media (max-width:680px){.employee-sticky-header{top:6px;padding:9px 10px;border-radius:10px}.employee-sticky-header .employee-toolbar{flex-direction:column;align-items:stretch;gap:7px}.employee-sticky-header .employee-toolbar>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}.employee-sticky-header h2{flex:0 0 auto;font-size:.88rem}.employee-sticky-header h2 i{width:25px;height:25px}.employee-sticky-header #employeeDetailSubtitle{min-width:0;margin:0;font-size:.68rem}.employee-sticky-header .employee-filters{width:100%;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:4px 7px}.employee-sticky-header .employee-filters .form-label{font-size:.62rem}.employee-sticky-header .form-select{width:100%;min-height:32px;height:32px;padding:3px 26px 3px 8px;font-size:.74rem}}