/* R3.28: neutral operations workspace. Presentation only; business grids keep their contracts. */
:root {
  --bg:#f4f5f8; --bg-2:#f8f9fb; --panel:#fff; --panel-soft:#f7f8fb;
  --text:#242c3d; --muted:#687286; --line:#e1e5ed;
  --primary:#3659c9; --primary-2:#3659c9; --primary-dark:#2947ac;
  --sidebar:#fff; --sidebar-2:#fff; --danger:#b33643; --warning:#936316;
  --success:#23745b; --info:#3659c9; --radius:12px;
  --shadow:0 8px 28px #25314b0d; --shadow-soft:0 1px 3px #25314b05;
  --b-ink:var(--text); --b-accent:var(--primary); --b-line:var(--line);
  --b-muted:var(--muted); --b-soft:var(--panel-soft);
  --shell-accent-soft:#edf1ff; --shell-hover:#f0f2f7; --shell-rail:236px;
  --shell-focus:#3659c9; --shell-on-primary:#fff;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#16191f; --bg-2:#222730; --panel:#20242c; --panel-soft:#272c36;
  --text:#e6e9f1; --muted:#a8b1c1; --line:#363d4b;
  --primary:#94afff; --primary-2:#94afff; --primary-dark:#b5c7ff;
  --sidebar:#1c2027; --sidebar-2:#1c2027; --danger:#ffabb3; --warning:#e8c386;
  --success:#9bd9bd; --info:#94afff;
  --b-ink:var(--text); --b-accent:var(--primary); --b-line:var(--line);
  --b-muted:var(--muted); --b-soft:var(--panel-soft);
  --shell-accent-soft:#2b3858; --shell-hover:#2a303b; --shell-focus:#a9bdff;
  --shell-on-primary:#17203b; --shadow:0 8px 28px #0003; --shadow-soft:0 1px 3px #0001;
  color-scheme:dark;
}
.tka-shell {background:var(--bg)!important;font-size:14px;line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;}
.tka-shell ::selection {background:var(--shell-accent-soft);color:var(--text)}
.tka-shell .layout {grid-template-columns:var(--shell-rail) minmax(0,1fr)!important;min-height:100dvh}
.tka-shell .main {padding:0;min-width:0;width:100%;max-width:100%}
.tka-shell #content {padding:22px 24px 30px;min-width:0;max-width:100%}
.tka-shell #alert {margin:16px 24px 0;padding:10px 14px;box-shadow:none;border-radius:9px;font-size:13px}
.tka-shell .sidebar {height:100dvh;padding:20px 14px 14px;gap:16px;background:var(--sidebar);color:var(--text);border-right:1px solid var(--line);box-shadow:none;z-index:30;min-width:0}
.tka-shell .brand {padding:0 7px 16px!important;gap:10px;border-bottom:1px solid var(--line);min-height:54px}
.tka-shell .brand-mark {width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:var(--primary);color:var(--shell-on-primary);box-shadow:none;font-size:11px;font-weight:700}
.tka-shell .brand strong {font-size:14px;font-weight:600;line-height:1.4}
.tka-shell #nav {display:flex;flex-direction:column;gap:3px;overflow:auto;min-height:0;padding:0 2px 3px;scrollbar-width:thin;flex:1}
.tka-shell #nav button {display:flex;align-items:center;gap:10px;flex:0 0 auto;width:100%;min-height:40px;padding:9px 11px;font-size:14px;line-height:1.4;border-radius:8px;border:1px solid transparent;color:var(--muted);background:transparent;white-space:normal;font-weight:400;box-shadow:none;transform:none;text-align:left}
.tka-shell #nav button:hover {background:var(--shell-hover);color:var(--text)}
.tka-shell #nav button.active {background:var(--shell-accent-soft);color:var(--primary);font-weight:600;border-color:transparent}
.tka-shell #nav button[data-page="movements"],.tka-shell #nav button[data-page="indonesia"],.tka-shell #nav button[data-page="audit"] {margin-top:8px}
.shell-icon {width:18px;height:18px;flex:0 0 18px;vertical-align:middle;pointer-events:none}
.tka-shell #nav .shell-icon {opacity:.82}
.tka-shell .release-badge {position:static;font-size:11px;letter-spacing:0;color:var(--muted);padding:10px 8px 0;border-top:1px solid var(--line);opacity:1;max-width:none;flex-shrink:0}
.tka-shell .topbar {position:sticky;top:0;z-index:20;display:flex;align-items:center;flex-direction:row;gap:18px;min-height:76px;padding:16px 24px;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--panel);box-shadow:none;backdrop-filter:none;flex-wrap:nowrap}
.tka-shell .title-block {flex:1;min-width:0}
.tka-shell .topbar h1 {font-size:21px;font-weight:600;line-height:1.4;letter-spacing:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell-context {display:flex;align-items:center;gap:18px;min-width:0}
.shell-scope {display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;max-width:150px;min-width:0}
.shell-scope span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-date {display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.shell-quick {width:150px;min-width:120px;max-width:165px;border-color:var(--line);background:var(--panel-soft)!important;font-size:13px;padding:8px 10px;min-height:38px}
.tka-shell .top-actions {width:auto;display:flex;flex-direction:row;align-items:center;gap:7px;flex-shrink:0}
.tka-shell .icon-btn,.tka-shell .user-box,.tka-shell .top-actions #logoutBtn {display:inline-flex;align-items:center;justify-content:center;min-height:38px;min-width:38px;width:38px;height:38px;padding:8px;border:1px solid var(--line)!important;border-radius:8px;background:var(--panel)!important;color:var(--text)!important;box-shadow:none;transform:none;font-size:13px;font-weight:500;margin:0}
.tka-shell .icon-btn:hover,.tka-shell .user-box:hover,.tka-shell .top-actions #logoutBtn:hover {background:var(--shell-hover)!important}
.tka-shell .user-box {width:auto;max-width:165px;gap:7px;padding:8px 11px;flex-direction:row}
.tka-shell #userLabel {font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tka-shell .top-actions #logoutBtn {font-size:0}
.tka-shell .top-actions #logoutBtn::before {content:'';width:18px;height:18px;background:currentColor;mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 5H5v14h4m6-14v14m-3-7h10m-4-4 4 4-4 4%22/%3E%3C/svg%3E') center/contain no-repeat}
.shell-menu-toggle,.shell-drawer-close,.shell-backdrop {display:none!important}
.tka-shell button {border-radius:8px;font-weight:500;box-shadow:none;transition:background-color .14s ease-out,border-color .14s ease-out,color .14s ease-out}
.tka-shell button:hover {transform:none;box-shadow:none}
.tka-shell button:not(:disabled):active {transform:translateY(1px)}
.tka-shell button.primary,.tka-shell .primary,.tka-shell .b-btn.primary {background:var(--primary);color:var(--shell-on-primary);border-color:var(--primary);font-weight:600}
.tka-shell button.primary:hover {background:var(--primary-dark);filter:none}
.tka-shell button:disabled {opacity:.5;cursor:not-allowed;transform:none}
.tka-shell input,.tka-shell select,.tka-shell textarea {border-radius:8px;border-color:var(--line);background:var(--panel);font-size:14px;line-height:1.5}
.tka-shell label {color:var(--text);font-weight:500;line-height:1.5}
.tka-shell input:focus,.tka-shell select:focus,.tka-shell textarea:focus {border-color:var(--shell-focus);box-shadow:0 0 0 3px var(--shell-accent-soft)}
.tka-shell :is(button,a,summary,[tabindex]):focus-visible {outline:2px solid var(--shell-focus);outline-offset:3px}
.tka-shell input[type="checkbox"],.tka-shell input[type="radio"] {accent-color:var(--primary)}
.tka-shell .panel {background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-soft);backdrop-filter:none;padding:18px}
.tka-shell .panel h2,.tka-shell .panel h3,.tka-shell .b-hero h2 {color:var(--text);font-weight:600;letter-spacing:0}
.tka-shell .panel h3 {font-size:17px}
.tka-shell .form-panel,.tka-shell .workbench-filter,.tka-shell .user-create-panel {border-top:1px solid var(--line)}
.tka-shell .table-wrap {background:var(--panel);border-radius:9px;border-color:var(--line);box-shadow:none}
.tka-shell table {font-size:13px;font-variant-numeric:tabular-nums}
.tka-shell th {background:var(--panel-soft);color:var(--muted);font-weight:500;font-size:12px;line-height:1.5}
.tka-shell td {line-height:1.55}
.tka-shell tr:hover td {background:var(--shell-hover)}
.tka-shell .stat-strip span {border-radius:6px;background:var(--panel-soft);color:var(--muted);font-weight:500}
.tka-shell .inline-kpi {background:var(--shell-accent-soft);border:1px solid var(--line);border-radius:9px;padding:9px 14px}
.tka-shell .inline-kpi strong {color:var(--primary);font-size:27px;font-weight:600}
.tka-shell .inline-kpi span {font-weight:500}
.tka-shell .dashboard-count {font-size:18px;min-width:44px;min-height:36px;border-color:transparent;background:var(--panel-soft);text-decoration:none;font-weight:600}
.tka-shell .button-link button {background:var(--panel)!important;color:var(--primary)!important;border:1px solid var(--line)!important;font-weight:500}
.tka-shell .button-link button:hover {background:var(--shell-accent-soft)!important;color:var(--primary)!important}
.tka-shell .attendance-workbook button {background:var(--shell-accent-soft)!important;color:var(--primary)!important;border-color:var(--line)!important;font-weight:600}
.tka-shell .b-hero {background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px;box-shadow:none}
.tka-shell .b-hero h2 {font-size:22px}
.tka-shell .b-kpi,.tka-shell .workbench-kpis .kpi {border-radius:10px;box-shadow:none;background:var(--panel);border-color:var(--line)}
.tka-shell .b-kpi strong,.tka-shell .workbench-kpis .kpi strong {font-weight:600;color:var(--text)}
.tka-shell .b-kpi.active {border-color:var(--primary);box-shadow:none;background:var(--shell-accent-soft)}
.tka-shell .b-count,.tka-shell .b-company {background:var(--panel-soft);color:var(--muted)}
.tka-shell .b-table tbody tr:hover {background:var(--shell-hover)}
.tka-shell .b-company-tabs button.active,.tka-shell .r3-company-tabs button.active {background:var(--shell-accent-soft);color:var(--primary);border-color:var(--primary)}
.tka-shell .b-company-tabs button {border-radius:8px}
.tka-shell .b-date-header {background:var(--panel-soft)}
.tka-shell .b-date-header strong {font-weight:600;color:var(--text)}
.tka-shell .r3-heading h2 {font-weight:600;letter-spacing:0}
.tka-shell .modal-card,.tka-shell .b-modal {border-radius:14px;background:var(--panel)}
.tka-shell .b-modal-backdrop {backdrop-filter:none}
.tka-shell .s-metric {box-shadow:none;border-color:var(--line);border-radius:11px}
.tka-shell .s-metric-main {border-color:var(--primary);box-shadow:none;background:var(--panel)}
.tka-shell .s-metric strong {font-weight:600}
.tka-shell .s-panel {box-shadow:none;border:1px solid var(--line);border-radius:12px}
.tka-shell .s-metric,.tka-shell .s-panel,.tka-shell .s-filters {background:var(--panel)}
.tka-shell .r3-file-picker {background:var(--primary);border-color:var(--primary);color:var(--shell-on-primary)}
.tka-shell .r3-upload-btn {background:var(--shell-accent-soft);border-color:var(--line);color:var(--primary)}
.tka-shell .r3-metrics .active {border-color:var(--primary);background:var(--shell-accent-soft)}
.tka-shell .r3-job-tabs .active {border-color:var(--primary);background:var(--shell-accent-soft)}
.tka-shell .r3-data-grid,.tka-shell .r3-ticket-grid,.tka-shell .r3-visa-grid {scrollbar-width:thin}
.tka-shell .r3-data-grid thead th,.tka-shell .r3-ticket-grid .r3-ticket-table thead th,.tka-shell .r3-visa-grid .r3-visa-table thead th {background:var(--panel-soft)}
.tka-shell .b-table th {background:var(--panel-soft)}
.tka-shell .workbench-table th,.tka-shell .workbench-table td {background:var(--panel)}
.tka-shell .workbench-table th.wb-freeze {background:var(--panel-soft)}
.tka-shell .shell-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px) {.shell-quick {width:175px;max-width:175px}.tka-shell .topbar {gap:24px}.tka-shell #content {padding:24px 30px 36px}.tka-shell .topbar {padding-left:30px;padding-right:30px}}
@media(max-width:1380px) {.shell-date {display:none}.shell-context {gap:12px}.shell-scope {max-width:120px}.tka-shell .user-box {max-width:135px}.tka-shell .topbar {gap:12px}}
@media(max-width:1120px) and (min-width:1001px) {.shell-scope {display:none}.tka-shell .topbar {padding:14px 18px}.tka-shell #content {padding:18px}.tka-shell .topbar h1 {font-size:19px}}
@media(max-width:1000px) {
  .tka-shell .layout {grid-template-columns:minmax(0,1fr)!important}
  .tka-shell .sidebar {position:fixed;inset:0 auto 0 0;width:268px;max-width:calc(100vw - 42px);height:100dvh;padding:18px 14px!important;transform:translateX(-105%);visibility:hidden;z-index:140;transition:transform .18s ease-out;box-shadow:12px 0 40px #17203322}
  .tka-shell.shell-nav-open .sidebar {transform:translateX(0);visibility:visible}
  .tka-shell .sidebar .brand {padding-right:30px!important}
  .tka-shell #nav {display:flex!important;flex-direction:column!important;overflow:auto!important;margin:0;gap:3px}
  .tka-shell #nav button {width:100%!important;min-height:44px;font-size:14px;padding:10px 11px;white-space:normal}
  .tka-shell #brandTitle {font-size:14px}
  .tka-shell .release-badge {position:static;max-width:none;font-size:11px;padding:10px 8px 0}
  .shell-menu-toggle {display:inline-flex!important;flex:0 0 40px}
  .shell-drawer-close {display:inline-flex!important;position:absolute;right:14px;top:19px;width:34px;height:36px;align-items:center;justify-content:center;padding:0;background:var(--panel-soft);color:var(--text);font-size:24px}
  .shell-backdrop {display:block!important;position:fixed;inset:0;background:#11182766;z-index:130}
  .shell-backdrop[hidden] {display:none!important}
  .tka-shell.shell-nav-open {overflow:hidden}
  .shell-context {margin-left:auto}
  .shell-scope {max-width:140px}
  .tka-shell .topbar {gap:12px;min-height:68px;padding:13px 18px}
  .tka-shell .title-block {flex:1}
  .tka-shell #content {padding:18px}
  .tka-shell #alert {margin:12px 18px 0}
}
@media(max-width:760px) {
  .tka-shell .topbar {display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:10px;padding:12px!important;min-height:0;position:sticky}
  .tka-shell .title-block {order:3;flex:1 0 100%;padding:0 1px}
  .tka-shell .topbar h1 {font-size:20px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
  .shell-context {display:none}
  .tka-shell .top-actions {margin-left:auto;gap:7px;width:auto;flex-wrap:nowrap}
  .tka-shell .icon-btn,.tka-shell .user-box,.tka-shell .top-actions #logoutBtn {width:40px;min-width:40px;height:40px;min-height:40px;padding:8px}
  .tka-shell .topbar #helpBtn {display:inline-flex}
  .tka-shell .user-box {max-width:40px;flex:0 0 40px}
  .tka-shell #passwordBtn #userLabel {display:none}
  .tka-shell .topbar #passwordBtn {padding:8px}
  .tka-shell #content {padding:14px 12px 24px}
  .tka-shell #alert {margin:12px 12px 0;font-size:13px}
  .tka-shell .panel {padding:14px;border-radius:10px}
  .tka-shell .b-hero {padding:16px}
  .tka-shell .grid.two,.tka-shell .grid.three,.tka-shell .grid.four {gap:12px}
  .tka-shell .modal-card,.tka-shell .b-modal {border-radius:14px}
}
@media(prefers-reduced-motion:reduce) {.tka-shell *,.tka-shell *::before,.tka-shell *::after {transition:none!important;scroll-behavior:auto!important}}
/* Round-two fixes: legacy dark selectors, compact attendance filters and focus timing. */
:root[data-theme="dark"] .tka-shell .topbar,:root[data-theme="dark"] .tka-shell .panel,:root[data-theme="dark"] .tka-shell .table-wrap,:root[data-theme="dark"] .tka-shell .b-hero,:root[data-theme="dark"] .tka-shell .s-metric,:root[data-theme="dark"] .tka-shell .s-panel {background:var(--panel);border-color:var(--line)}
:root[data-theme="dark"] .tka-shell input,:root[data-theme="dark"] .tka-shell select,:root[data-theme="dark"] .tka-shell textarea {background:var(--panel-soft);color:var(--text);border-color:var(--line)}
:root[data-theme="dark"] .tka-shell button {background:var(--panel-soft);color:var(--text)}
:root[data-theme="dark"] .tka-shell button.primary,:root[data-theme="dark"] .tka-shell .primary {background:var(--primary);color:var(--shell-on-primary)}
:root[data-theme="dark"] .tka-shell .button-link button,:root[data-theme="dark"] .tka-shell .attendance-workbook button {background:var(--shell-accent-soft)!important;color:var(--primary)!important;border-color:var(--line)!important}
:root[data-theme="dark"] .tka-shell .button-link button:hover {background:var(--shell-hover)!important;color:var(--text)!important}
:root[data-theme="dark"] .tka-shell th,:root[data-theme="dark"] .tka-shell .stat-strip span {background:var(--panel-soft);color:var(--muted)}
:root[data-theme="dark"] .tka-shell tr:hover td {background:var(--shell-hover)}
:root[data-theme="dark"] .tka-shell .badge.ok,:root[data-theme="dark"] .tka-shell .pill.masuk,:root[data-theme="dark"] .tka-shell .alert.ok {background:#213d34;color:#b6e4ce;border-color:#3a6454}
:root[data-theme="dark"] .tka-shell .badge.off,:root[data-theme="dark"] .tka-shell .pill.keluar,:root[data-theme="dark"] .tka-shell .alert.error {background:#442c33;color:#ffb9c0;border-color:#79505a}
:root[data-theme="dark"] .tka-shell .badge.warn,:root[data-theme="dark"] .tka-shell .alert.warn {background:#3d3527;color:#f0d19c;border-color:#6b5c40}
:root[data-theme="dark"] .tka-shell .b-kpi.active,:root[data-theme="dark"] .tka-shell .r3-company-tabs button.active,:root[data-theme="dark"] .tka-shell .b-company-tabs button.active {background:var(--shell-accent-soft);color:var(--primary)}
:root[data-theme="dark"] .tka-shell .s-metric-main {border-color:var(--primary)}
:root[data-theme="dark"] .tka-shell .b-plan,:root[data-theme="dark"] .tka-shell .b-company,:root[data-theme="dark"] .tka-shell .priority-item {background:var(--panel-soft);color:var(--muted)}
:root[data-theme="dark"] .tka-shell .r3-file-picker {background:var(--primary);color:var(--shell-on-primary)}
:root[data-theme="dark"] .tka-shell .r3-upload-btn {background:var(--shell-accent-soft);color:var(--primary)}
:root[data-theme="dark"] .tka-shell .workbench-table td {background:var(--panel)}
:root[data-theme="dark"] .tka-shell .workbench-table th,:root[data-theme="dark"] .tka-shell .workbench-table th.wb-freeze {background:var(--panel-soft)}
.tka-login {background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text)}
.tka-login .login-card {background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 55px #27375410;padding:34px}
.tka-login .login-card::before {display:none}
.tka-login .brand-mark {background:var(--primary);box-shadow:none;border-radius:12px;font-weight:600}
.tka-login .login-card h1 {font-size:24px;font-weight:600;letter-spacing:0;margin:20px 0 12px}
.tka-login input {border-radius:8px;background:var(--panel);border-color:var(--line)}
.tka-login input:focus {border-color:var(--primary);box-shadow:0 0 0 3px var(--shell-accent-soft)}
.tka-login button.primary {border-radius:8px;background:var(--primary);font-weight:600;min-height:44px;box-shadow:none}
.tka-login label {font-weight:500;color:var(--text)}
@media(max-width:760px) {
 .tka-shell .toolbar:has(#attYear) {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .tka-shell .toolbar:has(#attYear) label {min-width:0;width:auto;max-width:100%;font-size:13px}
 .tka-shell #attYear,.tka-shell #attMonth,.tka-shell #attSearch,.tka-shell #attPresent {width:100%;min-width:0;max-width:none}
 .tka-shell .attendance-actions {grid-column:1/-1;gap:8px;flex-wrap:wrap;white-space:normal}
 .tka-shell .attendance-actions button {min-height:40px;font-size:13px}
 .tka-login .login-card {padding:28px 24px}
}

/* R3.29: compact, contextual reminder action; keeps the wide table self-scrolling. */
.r329-reminder-button{margin-top:6px;white-space:nowrap}.r329-reminder-note{margin:0 0 12px;line-height:1.6}

.r329-users-table{min-width:1000px}.r329-users-table th{white-space:nowrap}.r329-users-table td:first-child{min-width:120px}.r329-users-table td:nth-child(3){min-width:250px;max-width:380px}.r329-users-table .actions button{white-space:nowrap}
