/*
 * e-Lembur OSDM — Soft Glass UI, visual-only patch for v17.9.
 * Tidak mengubah ID, struktur DOM, permission, handler, endpoint, maupun proses bisnis.
 * File ini sengaja dimuat SETELAH style bawaan di index.php.
 */

:root {
  --teal: #0d9c96;
  --teal-dark: #087f7c;
  --teal-deep: #0a7074;
  --cyan: #79d6d7;
  --lime: #d7ec90;
  --navy: #18354c;
  --surface: #f2faf9;
  --surface-2: #eaf6f4;
  --muted: #667e90;
  --line: rgba(110, 161, 171, .24);
  --glass-stroke: rgba(255, 255, 255, .90);
  --glass-shadow: 0 10px 32px rgba(34, 90, 107, .075), inset 0 1px 0 rgba(255,255,255,.80);
  --glass-shadow-hover: 0 18px 39px rgba(34, 90, 107, .13), inset 0 1px 0 rgba(255,255,255,.94);
  --glass-panel: linear-gradient(143deg, rgba(255,255,255,.88), rgba(255,255,255,.64));
}

html { background: #ecf7f6; }
body {
  color: var(--navy);
  background:
    radial-gradient(ellipse 42% 34% at 12% 5%, rgba(141,219,217,.39), transparent 100%),
    radial-gradient(ellipse 34% 37% at 89% 9%, rgba(216,227,255,.60), transparent 100%),
    radial-gradient(ellipse 35% 42% at 83% 88%, rgba(207,239,195,.48), transparent 100%),
    radial-gradient(ellipse 28% 32% at 13% 91%, rgba(220,226,252,.46), transparent 100%),
    linear-gradient(125deg, #f2fbfa 0%, #f6f9ff 49%, #f1fbf5 100%);
  background-attachment: fixed;
}
body, button, input, select, textarea { -webkit-font-smoothing: antialiased; }
::selection { background: #bdece2; color: #12475a; }

/* Ambient background: subtle color blooms, never intercept interaction. */
.app-shell::before {
  left: 29%; top: -205px; width: 490px; height: 490px;
  background: rgba(130,218,218,.16);
  box-shadow: 300px 75px 0 rgba(178,200,248,.11);
  filter: blur(16px);
}
.app-shell::after {
  right: -125px; bottom: -115px; width: 370px; height: 370px;
  background: rgba(170,220,194,.17);
  box-shadow: -250px -125px 0 rgba(181,210,249,.10);
  filter: blur(16px);
}

/* Frosted sidebar: layout, visibility and role-based navigation are unchanged. */
.sidebar,
.sidebar:hover,
.sidebar:focus-within {
  color: #28475c;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(207,247,241,.84), transparent 55%),
    radial-gradient(ellipse at 100% 99%, rgba(221,226,255,.63), transparent 55%),
    linear-gradient(168deg, rgba(255,255,255,.88), rgba(241,251,250,.78));
  border-right: 1px solid rgba(255,255,255,.92);
  box-shadow: 12px 0 38px rgba(45,105,120,.085), inset -1px 0 0 rgba(119,172,174,.10);
  -webkit-backdrop-filter: blur(25px) saturate(145%);
  backdrop-filter: blur(25px) saturate(145%);
}
.sidebar::after {
  left: auto; right: -84px; bottom: 9%;
  width: 230px; height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(117,203,187,.12), transparent 72%);
  opacity: 1;
}
.sidebar-brand,
.sidebar:hover .sidebar-brand,
.sidebar:focus-within .sidebar-brand {
  color: #173f52;
  border: 1px solid rgba(255,255,255,.96);
  background: rgba(255,255,255,.68);
  box-shadow: 0 7px 22px rgba(35,100,112,.065), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sidebar-brand .logo-mark { background: rgba(235,251,246,.92); box-shadow: none; }
.brand-text .title { color: #18374c; letter-spacing: -.028em; }
.brand-text .subtitle { color: #708997; }
.sidebar-profile {
  color: #1e4050;
  border: 1px solid rgba(255,255,255,.95);
  background: linear-gradient(125deg, rgba(226,251,244,.88), rgba(235,247,255,.77));
  box-shadow: 0 8px 21px rgba(33,110,114,.060), inset 0 1px 0 #fff;
}
#sidebarName { color: #164052; }
#sidebarRole, .sidebar-profile-chevron { color: #617f90; }
.sidebar .avatar {
  border: 2px solid rgba(255,255,255,.95);
  background: linear-gradient(135deg, #1faca4, #77cbd9);
  box-shadow: 0 3px 12px rgba(10,133,137,.15);
}
.menu-label, .sidebar:hover .menu-label, .sidebar:focus-within .menu-label {
  color: #7894a1;
  font-weight: 850;
}
.nav-btn, .sidebar:hover .nav-btn, .sidebar:focus-within .nav-btn {
  color: #496576;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav-btn i, .sidebar:hover .nav-btn i, .sidebar:focus-within .nav-btn i {
  color: #128780;
  background: rgba(17,160,151,.075);
  border-radius: 10px;
}
.nav-btn:hover,
.sidebar:hover .nav-btn:hover,
.sidebar:focus-within .nav-btn:hover {
  color: #087f7c;
  background: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 5px 14px rgba(32,114,118,.065);
  transform: translateX(2px);
}
.nav-btn.active,
.sidebar:hover .nav-btn.active,
.sidebar:focus-within .nav-btn.active {
  color: #fff;
  border-color: rgba(255,255,255,.20);
  background: linear-gradient(115deg, #118f90, #18b6a7 73%, #4ec4b4);
  box-shadow: 0 9px 20px rgba(8,143,137,.21), inset 0 1px 0 rgba(255,255,255,.24);
  transform: none;
}
.nav-btn.active::before { background: rgba(227,253,246,.90); }
.nav-btn.active i,
.sidebar:hover .nav-btn.active i,
.sidebar:focus-within .nav-btn.active i {
  color: #fff;
  background: rgba(255,255,255,.14);
}
.nav-badge { background: #fbe0dc; color: #af403e; box-shadow: none; }
@media (min-width: 1200px) {
  .sidebar:not(:hover):not(:focus-within) .nav-badge { color: #ad3434; background: #ffe0dd; }
}

/* Main workspace and top controls. Existing grid and breakpoints remain intact. */
.main-content { background: transparent; }
.topbar {
  position: relative; top: auto;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.91);
  border-radius: 20px;
  background: linear-gradient(122deg, rgba(255,255,255,.79), rgba(255,255,255,.53));
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}
.topbar-title { color: #17364d; letter-spacing: -.035em; }
.topbar-subtitle { color: #73899a; }
.topbar .icon-btn,
.dashboard-header-actions .form-select,
.dashboard-header-actions .form-control,
.dashboard-header-actions .dashboard-apply,
.topbar-profile {
  color: #28546a;
  border: 1px solid rgba(199,225,229,.88);
  border-radius: 12px;
  background-color: rgba(255,255,255,.78);
  box-shadow: 0 3px 10px rgba(42,104,118,.038), inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.topbar .icon-btn:hover,
.dashboard-header-actions .dashboard-apply:hover { color: #0c877f; background: #eaf9f5; border-color: #b8dfd7; }
.topbar-profile { border-radius: 14px; }
.dashboard-header-actions .dashboard-create,
.btn-brand {
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(125deg, #0e938e, #0bb6a7);
  box-shadow: 0 7px 19px rgba(17,145,138,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.dashboard-header-actions .dashboard-create:hover,
.btn-brand:hover { color: #fff; filter: brightness(1.05); box-shadow: 0 11px 22px rgba(17,145,138,.23); }

/* Action banner: pale translucent glass rather than another saturated strip. */
.dashboard-status-banner {
  color: #154959;
  border: 1px solid rgba(255,255,255,.93);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 77% 35%, rgba(199,235,220,.66), transparent 48%),
    linear-gradient(112deg, rgba(214,249,241,.88), rgba(226,245,251,.84) 70%, rgba(242,249,247,.82));
  box-shadow: 0 10px 26px rgba(48,128,132,.095), inset 0 1px 0 rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.dashboard-status-banner::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, #70d4c6 31%, #abcadf 78%, transparent);
}
.dashboard-banner-icon {
  color: #0c988d;
  background: rgba(255,255,255,.77);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(9,147,138,.09);
}
.dashboard-banner-title { color: #19465b; }
.dashboard-banner-subtitle { color: #698698; }
.dashboard-banner-action {
  color: #fff;
  border: 1px solid rgba(255,255,255,.33);
  background: linear-gradient(120deg, #0a968f, #1bb7a4);
  box-shadow: 0 7px 17px rgba(8,142,136,.17);
}
.dashboard-banner-action:hover { color: #fff; filter: brightness(1.05); }
.dashboard-filter-status { color: #537b86; }

/* Reusable glass cards: dashboard and all administrative screens. */
.surface-card, .kpi-card, .notice-card {
  border: 1px solid var(--glass-stroke);
  background: var(--glass-panel);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(17px) saturate(125%);
  backdrop-filter: blur(17px) saturate(125%);
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.surface-card { border-radius: 21px; }
.surface-card:hover { border-color: rgba(255,255,255,1); box-shadow: var(--glass-shadow-hover); }
.card-title, .section-heading h5, .section-heading h6 { color: #193d52; font-weight: 850; }
.kpi-card {
  overflow: hidden;
  border-radius: 19px;
  background: linear-gradient(124deg, rgba(255,255,255,.86), rgba(229,250,247,.76));
}
#view-dashboard .row.g-3.mb-3 > div:nth-child(2) .kpi-card { background: linear-gradient(124deg, rgba(255,255,255,.89), rgba(255,246,224,.80)); }
#view-dashboard .row.g-3.mb-3 > div:nth-child(3) .kpi-card { background: linear-gradient(124deg, rgba(255,255,255,.89), rgba(230,249,235,.81)); }
#view-dashboard .row.g-3.mb-3 > div:nth-child(4) .kpi-card { background: linear-gradient(124deg, rgba(255,255,255,.89), rgba(253,238,242,.78)); }
#view-dashboard .row.g-3.mb-3 > div:nth-child(5) .kpi-card { background: linear-gradient(124deg, rgba(255,255,255,.89), rgba(231,244,255,.83)); }
.kpi-card:hover { transform: translateY(-3px); border-color: #fff; box-shadow: var(--glass-shadow-hover); }
.kpi-card::after { height: 3px; background: linear-gradient(90deg, #15b4a9, #a8e6d8); }
#view-dashboard .row.g-3.mb-3 > div:nth-child(2) .kpi-card::after { background: linear-gradient(90deg, #f0b151, #ffe4ae); }
#view-dashboard .row.g-3.mb-3 > div:nth-child(3) .kpi-card::after { background: linear-gradient(90deg, #52bd83, #c7e9c7); }
#view-dashboard .row.g-3.mb-3 > div:nth-child(4) .kpi-card::after { background: linear-gradient(90deg, #ed909c, #f9d1d5); }
#view-dashboard .row.g-3.mb-3 > div:nth-child(5) .kpi-card::after { background: linear-gradient(90deg, #6caddb, #cae4fa); }
.kpi-icon {
  color: #0b8d86;
  background: rgba(223,249,245,.94);
  border: 1px solid rgba(255,255,255,.80);
  box-shadow: inset 0 1px 0 #fff, 0 7px 13px rgba(25,129,126,.075);
}
.kpi-label { color: #496779; }
.kpi-value { color: #153b52; font-variant-numeric: tabular-nums; }
.kpi-note { color: #8a9cab; }
.notice-card {
  border-radius: 16px;
  background: linear-gradient(124deg, rgba(255,255,255,.89), rgba(231,247,247,.65));
}
.notice-card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-hover); }
.notice-icon {
  color: #0c958e;
  background: linear-gradient(125deg, #e1f9f3, #d9f0f4);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 #fff;
}
.notice-value { color: #1d4b60; }
.notice-label { color: #7c92a3; }

/* Tables and employee listings, keeping sticky header and all widths/scroll rules. */
.table-shell, .team-ranking-table-shell {
  border-color: rgba(196,225,228,.72);
  border-radius: 14px;
  background: rgba(255,255,255,.42);
}
.table { color: #28455a; }
.table thead th {
  color: #426276;
  border-bottom: 1px solid #dbe9ea;
  background: rgba(235,246,247,.94);
}
.table tbody td { border-color: rgba(218,233,237,.67); }
.table tbody tr:nth-child(even) td { background-color: rgba(245,251,252,.42); }
.table tbody tr:hover td { background-color: rgba(214,244,238,.52); }
.identity-name, .team-ranking-table .member-name { color: #214357; }
.identity-meta, .helper-text, .pager-info { color: #7d92a3; }
.recap-employee-merged { background: rgba(225,246,245,.57) !important; }
.team-merged-cell { background: rgba(228,248,239,.65) !important; }
.period-merged-cell { background: rgba(238,247,250,.75) !important; }
.rank-badge:not(.top), .rank-number-badge { color: #087e8a; background: #daf5f4; }
.hours-pill { color: #057f79; background: #d4f7ec; }
.admin-ranking-pager, .pager { border-color: rgba(176,213,218,.34); }

/* Forms, filters, actions, tabs, notifications and dialogs. */
.form-control, .form-select {
  color: #274960;
  border: 1px solid rgba(183,214,218,.86);
  border-radius: 11px;
  background-color: rgba(255,255,255,.85);
  box-shadow: inset 0 1px 2px rgba(27,95,108,.018);
}
.form-control:focus, .form-select:focus {
  border-color: #54b9af;
  background-color: rgba(255,255,255,.98);
  box-shadow: 0 0 0 .22rem rgba(17,158,149,.12);
}
.form-control:disabled, .form-select:disabled { background-color: rgba(232,242,246,.78); }
.form-label { color: #4a6879; }
.btn { border-radius: 11px; transition: filter .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn:active { transform: translateY(1px); }
.btn-soft {
  color: #0b877e;
  border-color: rgba(157,213,207,.73);
  background: rgba(231,248,245,.86);
}
.btn-soft:hover { color: #096e69; border-color: #8dcfc4; background: #d9f4ed; }
.team-ranking-filter, .filter-panel:not(.row) {
  border-color: rgba(200,226,231,.72);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(245,253,252,.53), rgba(231,246,251,.44));
}
.overtime-form-section {
  border-color: rgba(193,229,227,.77);
  border-radius: 16px;
  background: linear-gradient(136deg, rgba(242,252,251,.88), rgba(233,248,250,.66));
}
.overtime-form-section.schedule {
  border-color: rgba(237,222,186,.78);
  background: linear-gradient(136deg, rgba(255,251,241,.87), rgba(252,249,233,.69));
}
.overtime-form-section-title { color: #108d86; }
.overtime-summary-header {
  color: #fff;
  background: linear-gradient(120deg, #0c8e8c, #35bfb0);
}
.overtime-summary-header h6 { color: #fff; }
.overtime-checklist { border-color: rgba(116,203,181,.28); background: rgba(235,251,243,.64); }
.overtime-summary-card { background: rgba(255,255,255,.83); }
.modal-content, .loading-card {
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(244,251,251,.97));
  box-shadow: 0 28px 75px rgba(24,69,88,.19);
}
.modal-header, .modal-footer { border-color: rgba(184,216,218,.42); }
.process-hud { border-color: rgba(255,255,255,.95); background: rgba(253,255,255,.95); }

/* Login inherits the same glass design, but leaves the form and login logic intact. */
.login-screen {
  background:
    radial-gradient(ellipse at 10% 15%, rgba(111,213,204,.67), transparent 46%),
    radial-gradient(ellipse at 94% 89%, rgba(183,198,248,.63), transparent 48%),
    linear-gradient(125deg, #dff7f2, #eaf2fb 56%, #eff9f1);
}
.login-wrap {
  border: 1px solid rgba(255,255,255,.69);
  border-radius: 29px;
  box-shadow: 0 28px 68px rgba(36,91,114,.15);
}
.login-visual {
  background:
    radial-gradient(circle at 80% 15%, rgba(176,239,223,.20), transparent 40%),
    linear-gradient(142deg, #144c60, #0d8e87 93%);
}
.login-card { background: rgba(255,255,255,.88); }
.feature-chip { background: rgba(255,255,255,.13); }

/* Keyboard, mobile, low-powered devices and printed reports. */
:where(.nav-btn, .btn, .icon-btn, .form-control, .form-select, .password-toggle):focus-visible {
  outline: 3px solid rgba(45,173,164,.35);
  outline-offset: 2px;
}
@media (max-width: 1199.98px) {
  .topbar { padding: 11px 13px; }
  .dashboard-status-banner { padding-right: 14px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Medium screens: the original toolbar controls would otherwise push past the viewport. */
  .topbar { flex-wrap: wrap; gap: 12px; }
  .topbar > .d-flex { flex: 1 1 260px; min-width: 0; }
  .topbar-actions { width: 100%; flex: 1 1 100%; justify-content: flex-end; }
  .chart-box { min-width: 0; max-width: 100%; }
  .chart-box > canvas { max-width: 100%; }
}
@media (max-width: 991.98px) {
  .sidebar, .sidebar:hover, .sidebar:focus-within {
    /* Offcanvas show/hide is intentionally controlled by the original code. */
    box-shadow: 15px 0 40px rgba(26,72,88,.15);
  }
  .main-content { padding: 15px; }
  .topbar { border-radius: 17px; }
}
@media (max-width: 767.98px) {
  /* Original controls are unchanged; only wrap them so phones do not scroll sideways. */
  .topbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
  .topbar > .d-flex { width: 100%; min-width: 0; }
  .topbar > .d-flex > div { min-width: 0; }
  .topbar-actions {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }
  .dashboard-header-actions {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 78px 42px 42px;
    gap: 7px;
  }
  .dashboard-header-actions .form-select,
  .dashboard-header-actions .dashboard-year { width: 100%; min-width: 0; }
  #refreshViewButton { order: 1; }
  .topbar-profile { order: 2; }
  .surface-card { border-radius: 17px; }
  .dashboard-status-banner { border-radius: 15px; }
  .kpi-card { border-radius: 16px; }
}
@media (max-width: 479.98px) {
  .dashboard-header-actions { grid-template-columns: minmax(0, 1fr) 76px 42px; }
  .dashboard-header-actions .dashboard-create { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-btn, .btn, .kpi-card, .surface-card, .notice-card { transition: none !important; }
  .kpi-card:hover, .notice-card:hover, .nav-btn:hover { transform: none !important; }
}
@media print {
  body, html { background: #fff !important; }
  .surface-card, .kpi-card, .notice-card, .table-shell {
    background: #fff !important; border-color: #dce5e7 !important;
    box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}