/* Portal Karyawan + Monitoring Presensi v1.0 */
.ess-view { padding-bottom: 24px; }
.ess-shell { display:grid; gap:18px; min-width:0; }
.ess-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; border:1px solid #dbe8f7; border-radius:20px; background:linear-gradient(135deg,#fff 0%,#f5f9ff 63%,#fff0fa 100%); box-shadow:0 14px 35px rgba(17,69,134,.08); }
.ess-head h2 { margin:3px 0 5px; color:#0b1f4d; font-size:clamp(1.3rem,2vw,1.75rem); }
.ess-head p { margin:0; color:#607697; font-size:.82rem; }
.ess-eyebrow { color:#1677ea!important; font-weight:700; font-size:.66rem!important; letter-spacing:.14em; }
.ess-tabs { display:flex; gap:7px; width:100%; max-width:100%; min-width:0; padding:7px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; border:1px solid #dbe8f7; border-radius:16px; background:#fff; box-shadow:0 8px 22px rgba(17,69,134,.055); -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; overscroll-behavior-x:contain; }
.ess-tabs button { min-height:38px; flex:0 0 auto; padding:0 14px; border:0; border-radius:11px; background:transparent; color:#526c91; font:600 .7rem Poppins,sans-serif; cursor:pointer; white-space:nowrap; transition:.18s ease; }
.ess-tabs button:hover { color:#116fd5; background:#f1f7ff; }
.ess-tabs button.is-active { color:#fff; background:linear-gradient(135deg,#157ce8,#3459ea 58%,#8554f5); box-shadow:0 7px 16px rgba(41,100,224,.22); }
.monitoring-tabs button.is-active { background:linear-gradient(135deg,#0fa968,#087fbf 58%,#6357e8); }
.ess-content { min-height:300px; }
.ess-module-shell { display:grid; gap:18px; }
.ess-welcome { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 20px; color:#fff; border-radius:18px; background:linear-gradient(125deg,#1378ee,#4958e8 54%,#de299f); box-shadow:0 15px 32px rgba(65,82,220,.2); }
.ess-welcome h3 { margin:0 0 3px; font-size:1.08rem; }
.ess-welcome p,.ess-welcome small { margin:0; color:rgba(255,255,255,.84); font-size:.72rem; }
.ess-live { display:flex; align-items:center; gap:8px; flex:0 0 auto; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.18); font-size:.65rem; font-weight:700; }
.ess-live::before { content:""; width:7px; height:7px; border-radius:50%; background:#66ffb1; box-shadow:0 0 0 4px rgba(102,255,177,.15); }
.ess-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px; }
.ess-stat-card { display:grid; grid-template-columns:43px 1fr; gap:4px 11px; align-items:center; min-width:0; padding:15px; border:1px solid #dbe7f5; border-radius:16px; background:#fff; box-shadow:0 7px 20px rgba(17,69,134,.055); transition:.18s ease; }
.ess-stat-card:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(17,69,134,.1); }
.ess-stat-icon { grid-row:1/4; display:grid; place-items:center; width:43px; height:43px; border-radius:13px; color:#fff; font-size:.82rem; font-weight:700; }
.ess-stat-icon svg,.ess-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ess-stat-icon.is-blue{background:linear-gradient(135deg,#2588f2,#315ae6)} .ess-stat-icon.is-orange{background:linear-gradient(135deg,#ffab35,#ec6e18)} .ess-stat-icon.is-red{background:linear-gradient(135deg,#f85d71,#c82f50)} .ess-stat-icon.is-purple{background:linear-gradient(135deg,#a06cf8,#7047d8)} .ess-stat-icon.is-green{background:linear-gradient(135deg,#29c889,#0b9b64)} .ess-stat-icon.is-pink{background:linear-gradient(135deg,#f154b3,#d91d88)} .ess-stat-icon.is-yellow{background:linear-gradient(135deg,#f6c447,#b97900)} .ess-stat-icon.is-cyan{background:linear-gradient(135deg,#23c8db,#078eae)}
.ess-stat-card small { color:#7184a1; font-size:.62rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ess-stat-card strong { color:#102755; font-size:1.22rem; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ess-stat-card em { color:#8a9ab3; font-size:.58rem; font-style:normal; }
.ess-grid-2 { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr); gap:14px; }
.ess-panel { min-width:0; padding:18px; border:1px solid #dbe7f5; border-radius:17px; background:#fff; box-shadow:0 7px 20px rgba(17,69,134,.05); }
.ess-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ess-panel h4 { margin:0; color:#102755; font-size:.86rem; }
.ess-panel-head p,.ess-panel>p { margin:3px 0 0; color:#7a8da9; font-size:.64rem; }
.ess-shortcut-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.ess-shortcut-card { display:grid; place-items:center; gap:7px; min-height:92px; padding:10px; border:1px solid #dce8f7; border-radius:14px; background:#f9fbff; color:#183568; font:600 .68rem Poppins,sans-serif; cursor:pointer; text-align:center; }
.ess-shortcut-card:hover { border-color:#84baf2; background:#eff7ff; }
.ess-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; color:#1676df; background:#e8f3ff; }
.ess-today-list { display:grid; gap:9px; }
.ess-today-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px; border-radius:12px; background:#f6f9fe; }
.ess-today-row span { display:grid; gap:2px; color:#6f829f; font-size:.61rem; }
.ess-today-row strong { color:#183568; font-size:.72rem; }
.ess-badge { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:4px 8px; border-radius:999px; color:#116c46; background:#e9fbf2; font-size:.57rem; font-style:normal; font-weight:700; }
.ess-badge.is-warning{color:#a55b05;background:#fff5df}.ess-badge.is-danger{color:#bd304b;background:#fff0f3}.ess-badge.is-info{color:#1768c1;background:#eaf4ff}.ess-badge.is-muted{color:#64748b;background:#eef2f7}
.ess-table-tools { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ess-control,.ess-tool-button { min-height:36px; border:1px solid #d6e3f2; border-radius:10px; background:#fff; color:#29446e; font:500 .66rem Poppins,sans-serif; }
.ess-control { min-width:135px; padding:0 10px; }
.ess-tool-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 11px; cursor:pointer; font-weight:600; }
.ess-salary-filters { display:grid; grid-template-columns:repeat(2,minmax(82px,112px)) auto; gap:8px 10px; align-items:end; }
.ess-salary-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ess-salary-field > span { font-size:.62rem; font-weight:600; color:#7184a1; }
.ess-salary-field .ess-control { width:100%; min-width:0; }
.ess-salary-field .ess-control { font-size:.68rem; }
.ess-salary-search { grid-column:span 2; }
.ess-salary-actions { display:flex; gap:8px; align-items:end; }
.ess-tool-button.is-primary{border-color:transparent;color:#fff;background:linear-gradient(120deg,#2769ff 0%,#6a4df4 52%,#c927c9 100%)}.ess-tool-button.is-danger{color:#c72f4c;background:#fff3f5;border-color:#ffd0d8}
.ess-table-wrap { box-sizing:border-box; width:100%; max-width:100%; min-width:0; overflow-x:auto; overflow-y:auto; border:1px solid #e0e9f4; border-radius:13px; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; overscroll-behavior-x:contain; }
.ess-table { width:100%; min-width:360px; border-collapse:collapse; font-size:.64rem; }
.ess-table th { position:sticky; top:0; z-index:1; padding:10px 11px; background:#f3f7fd; color:#516987; text-align:left; white-space:nowrap; }
.ess-table td { padding:10px 11px; border-top:1px solid #e7eef7; color:#304a70; white-space:nowrap; }.ess-table td strong{color:#132d5d}.ess-table tr:hover td{background:#fbfdff}
.ess-salary-period strong { font-size:.72rem; color:#102755; }
.salary-history-item-compact { justify-content: space-between; align-items: center; }
.salary-history-item-compact .salary-history-copy strong { font-size:.86rem; color:#102755; }
.ess-empty { display:grid; place-items:center; gap:9px; min-height:220px; padding:30px; text-align:center; border:2px dashed #d8e5f4; border-radius:17px; background:#f9fbfe; }
.ess-empty .ess-icon { width:52px;height:52px;border-radius:16px; }.ess-empty h3{margin:0;color:#173367;font-size:.95rem}.ess-empty p{max-width:460px;margin:0;color:#778aa6;font-size:.68rem;line-height:1.6}
.ess-chart { display:flex; align-items:flex-end; gap:7px; height:130px; padding:15px 4px 2px; }
.ess-chart span { position:relative; flex:1; min-height:5px; height:var(--height,5%); border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#4d83ef,#7555e7); }
.ess-chart span::after { content:attr(data-label); position:absolute; left:50%; bottom:-18px; transform:translateX(-50%); color:#8393ad; font-size:.52rem; }
.ess-error { padding:11px 13px; border-radius:11px; color:#b62c46; background:#fff1f4; font-size:.65rem; }
body.theme-dark .ess-head,body.theme-dark .ess-tabs,body.theme-dark .ess-stat-card,body.theme-dark .ess-panel{background:#13223b;border-color:#29405e}body.theme-dark .ess-head h2,body.theme-dark .ess-stat-card strong,body.theme-dark .ess-panel h4{color:#edf5ff}body.theme-dark .ess-tabs button,body.theme-dark .ess-stat-card small,body.theme-dark .ess-panel p{color:#9bb0ca}body.theme-dark .ess-shortcut-card,body.theme-dark .ess-today-row,body.theme-dark .ess-control,body.theme-dark .ess-tool-button{background:#182c48;border-color:#314967;color:#d7e6f8}body.theme-dark .ess-table th{background:#1d304c;color:#bed0e4}body.theme-dark .ess-table td{border-color:#2c405c;color:#c3d2e5}body.theme-dark .ess-table tr:hover td{background:#182a44}
@media(max-width:1100px){.ess-shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ess-grid-2{grid-template-columns:1fr}}
@media(max-width:820px){.ess-view{padding:0 0 86px}.ess-shell{gap:12px}.ess-head{padding:15px;border-radius:16px}.ess-head .secondary-action{min-width:auto;padding-inline:11px;font-size:.62rem}.ess-tabs{margin-inline:-2px;border-radius:13px}.ess-tabs button{min-height:36px;padding-inline:12px;font-size:.62rem}.ess-content{min-height:240px}.ess-welcome{align-items:flex-start;padding:15px}.ess-live{display:none}.ess-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ess-stat-card{grid-template-columns:36px 1fr;padding:11px;gap:3px 8px;border-radius:13px}.ess-stat-icon{width:36px;height:36px;border-radius:10px}.ess-stat-card strong{font-size:1rem}.ess-stat-card small{font-size:.55rem}.ess-panel{padding:13px;border-radius:14px}.ess-shortcut-card{min-height:80px}.ess-table-tools{display:grid;grid-template-columns:1fr 1fr}.ess-control,.ess-tool-button{width:100%;min-width:0}.ess-empty{min-height:180px;padding:22px 14px}}
@media(max-width:480px){.ess-panel-head{flex-direction:column;align-items:stretch}.ess-panel-head>*{min-width:0}.ess-panel-head .ess-tool-button{width:100%}.ess-table-tools{grid-template-columns:1fr}}
@media(max-width:420px){.ess-head p:not(.ess-eyebrow){display:none}.ess-stats{grid-template-columns:1fr 1fr}.ess-shortcut-grid{grid-template-columns:1fr 1fr}}

/* 20260722 dark audit v2: ESS contrast/mobile hardening. */
body.theme-dark .ess-view,
body.theme-dark .ess-content,
body.theme-dark .ess-module-shell { color:#edf5ff !important; }

body.theme-dark .ess-head {
  background:linear-gradient(135deg,#0d1a2e 0%,#14243d 60%,#251837 100%) !important;
  border-color:#345071 !important;
}

body.theme-dark .ess-head h2,
body.theme-dark .ess-panel h4,
body.theme-dark .ess-empty h3,
body.theme-dark .ess-today-row strong,
body.theme-dark .ess-shortcut-card,
body.theme-dark .ess-shortcut-card .ess-icon,
body.theme-dark .ess-stat-card strong { color:#f7fbff !important; }

body.theme-dark .ess-head p,
body.theme-dark .ess-salary-field > span,
body.theme-dark .ess-stat-card small,
body.theme-dark .ess-stat-card em,
body.theme-dark .ess-panel-head p,
body.theme-dark .ess-panel > p,
body.theme-dark .ess-today-row span,
body.theme-dark .ess-empty p,
body.theme-dark .ess-chart span::after { color:#b9cae3 !important; }

body.theme-dark .ess-tabs,
body.theme-dark .ess-stat-card,
body.theme-dark .ess-panel,
body.theme-dark .ess-shortcut-card,
body.theme-dark .ess-today-row,
body.theme-dark .ess-control,
body.theme-dark .ess-tool-button,
body.theme-dark .ess-table-wrap,
body.theme-dark .ess-empty,
body.theme-dark .ess-error {
  background:#0f1d34 !important;
  border-color:#345071 !important;
  color:#e8f2ff !important;
}

body.theme-dark .ess-tabs button { color:#b9cae3 !important; }
body.theme-dark .ess-tabs button:hover { background:#1a2e4b !important; color:#ffffff !important; }

body.theme-dark .ess-shortcut-card:hover,
body.theme-dark .ess-tool-button:hover {
  background:#182b46 !important;
  border-color:#52759d !important;
}

body.theme-dark .ess-icon,
body.theme-dark .ess-empty .ess-icon {
  background:#182b46 !important;
  color:#8cc6ff !important;
}

body.theme-dark .ess-live { background:rgba(255,255,255,.12) !important; color:#ffffff !important; }

body.theme-dark .ess-control,
body.theme-dark .ess-tool-button { color:#e8f2ff !important; }

body.theme-dark .ess-tool-button.is-primary {
  border-color:transparent !important;
  background:linear-gradient(135deg,#328cff,#7a5cff 56%,#e535ad) !important;
  color:#ffffff !important;
}

body.theme-dark .ess-tool-button.is-danger {
  background:rgba(239,68,68,.14) !important;
  border-color:rgba(239,68,68,.32) !important;
  color:#ffb1bf !important;
}

body.theme-dark .ess-badge { background:rgba(25,135,84,.18) !important; color:#7dffbd !important; }
body.theme-dark .ess-badge.is-warning { background:rgba(245,158,11,.18) !important; color:#ffd37a !important; }
body.theme-dark .ess-badge.is-danger { background:rgba(239,68,68,.18) !important; color:#ff9bad !important; }
body.theme-dark .ess-badge.is-info { background:rgba(59,130,246,.18) !important; color:#9fcbff !important; }
body.theme-dark .ess-badge.is-muted { background:#182b46 !important; color:#dbe8fb !important; }

body.theme-dark .ess-table { background:#0f1d34 !important; color:#e8f2ff !important; }
body.theme-dark .ess-table th { background:#162844 !important; color:#dce9fb !important; }
body.theme-dark .ess-table td {
  background:#0c182d !important;
  border-color:#2c4868 !important;
  color:#dbe8fb !important;
}
body.theme-dark .ess-table td strong { color:#ffffff !important; }
body.theme-dark .ess-table tr:hover td { background:#13233d !important; }

body.theme-dark .ess-empty {
  border-style:solid !important;
  background:#0f1d34 !important;
}

body.theme-dark .ess-error {
  background:rgba(239,68,68,.16) !important;
  border:1px solid rgba(239,68,68,.28) !important;
  color:#ffb1bf !important;
}

@media(max-width:820px){
  body.theme-dark .ess-head,
  body.theme-dark .ess-panel,
  body.theme-dark .ess-stat-card,
  body.theme-dark .ess-shortcut-card,
  body.theme-dark .ess-today-row,
  body.theme-dark .ess-empty {
    box-shadow:none !important;
  }
}