/*
 * Syndash-inspired theme adapted for Fanfun HR.
 * Visual layer only: no Bootstrap, jQuery, MetisMenu, or legacy plugins.
 */

.theme-syndash {
  --navy: #ffffff;
  --navy-soft: #f2ecfb;
  --paper: #ffffff;
  --cream: #f6f6f6;
  --ink: #2f3441;
  --muted: #72798a;
  --line: #e8e8ef;
  --orange: #673ab7;
  --orange-dark: #5930a1;
  --green: #32ab13;
  --blue: #198fed;
  --shadow: 0 .1rem .7rem rgba(45, 35, 66, .10);
  --radius: 10px;
  --color-text-primary: #2f3441;
  --color-text-secondary: #72798a;
  --color-border-tertiary: #e8e8ef;
  --color-background-primary: #ffffff;
  --color-background-secondary: #f6f6f6;
  background: #f6f6f6;
  max-width: 100%;
  overflow-x: hidden;
}

.theme-syndash body,
.theme-syndash .app-shell {
  color: var(--ink);
  background: #f6f6f6;
}

.theme-syndash body {
  letter-spacing: .1px;
  max-width: 100%;
  overflow-x: hidden;
}

/* Application shell */
.theme-syndash .sidebar {
  width: 250px;
  color: #4b5060;
  background: #ffffff;
  border-right: 1px solid #ececf2;
  box-shadow: 0 .125rem .45rem rgba(25, 18, 38, .08);
}

.theme-syndash .brand {
  position: relative;
  min-height: 70px;
  padding: 15px 62px 15px 18px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeF3;
  gap: 11px;
}

.theme-syndash .brand-mark {
  width: 50px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.theme-syndash .brand-mark img {
  width: 50px;
  height: 44px;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.theme-syndash .brand strong {
  color: #3e344f;
  font-size: 17px;
  font-weight: 600;
}

.theme-syndash .brand span {
  color: #8c8597;
  font-size: 10px;
}

.theme-syndash .nav-list {
  padding-top: 10px;
  scrollbar-color: #d8cbed transparent;
}

.theme-syndash .nav-main-toggle {
  margin: 0 12px 8px;
  width: calc(100% - 24px);
  min-height: 42px;
  padding: 10px 13px;
  color: #ffffff;
  background: linear-gradient(135deg, #673ab7, #7c4dcc);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(103,58,183,.25);
}

.theme-syndash .nav-main-toggle:hover,
.theme-syndash .nav-main-toggle[aria-expanded="true"] {
  color: #ffffff;
  background: linear-gradient(135deg, #5930a1, #7143bd);
}

.theme-syndash .nav-main-panel {
  padding: 0 0 12px;
}

.theme-syndash .nav-section-toggle {
  min-height: 32px;
  padding: 8px 16px 6px;
  color: #9297a5;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.theme-syndash .nav-section-toggle:hover,
.theme-syndash .nav-group.active-group > .nav-section-toggle {
  color: #673ab7;
  background: #faf8fd;
}

.theme-syndash .nav-item {
  min-height: 39px;
  margin: 1px 10px;
  width: calc(100% - 20px);
  padding: 9px 13px;
  color: #585d6c;
  border: 0;
  border-radius: 7px;
  font-size: 13px;
  gap: 10px;
}

.theme-syndash .nav-group-items .nav-item {
  padding-left: 16px;
}

.theme-syndash .nav-item:hover {
  color: #673ab7;
  background: #f7f3fc;
}

.theme-syndash .nav-item.active {
  color: #673ab7;
  background: rgba(103,58,183,.12);
  border-left: 3px solid #673ab7;
  box-shadow: none;
  font-weight: 600;
}

.theme-syndash .nav-icon {
  width: 19px;
  height: 19px;
}

.theme-syndash .nav-svg {
  width: 18px;
  height: 18px;
}

.theme-syndash [data-nav-group="utama"] .nav-icon,
.theme-syndash [data-nav-group="utama"] .nav-toggle-icon { color: #673ab7; }
.theme-syndash [data-nav-group="benefit"] .nav-icon,
.theme-syndash [data-nav-group="benefit"] .nav-toggle-icon { color: #f02769; }
.theme-syndash [data-nav-group="kehadiran"] .nav-icon,
.theme-syndash [data-nav-group="kehadiran"] .nav-toggle-icon { color: #198fed; }
.theme-syndash [data-nav-group="penggajian"] .nav-icon,
.theme-syndash [data-nav-group="penggajian"] .nav-toggle-icon { color: #32ab13; }
.theme-syndash [data-nav-group="organisasi"] .nav-icon,
.theme-syndash [data-nav-group="organisasi"] .nav-toggle-icon { color: #ff8b01; }
.theme-syndash [data-nav-group="lainnya"] .nav-icon,
.theme-syndash [data-nav-group="lainnya"] .nav-toggle-icon { color: #00a6a6; }

.theme-syndash .nav-item.active .nav-icon {
  color: #673ab7;
}

.theme-syndash .nav-chevron {
  opacity: .7;
}

.theme-syndash .sidebar-user-footer {
  padding: 12px 14px;
  color: #4b5060;
  background: #ffffff;
  border-top: 1px solid #ececf2;
}

.theme-syndash .sidebar-theme-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 30px);
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ececf2;
}

.theme-syndash .sidebar-theme-label {
  color: #8b91a0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.theme-syndash .sidebar-theme-picker button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #e5dced;
  border-radius: 8px;
  color: #776b83;
  background: #f8f5fb;
  display: grid;
  place-items: center;
}

.theme-syndash .sidebar-theme-picker button .ui-icon { width: 15px; height: 15px; }
.theme-syndash .sidebar-theme-picker button:hover,
.theme-syndash .sidebar-theme-picker button.active {
  color: #ffffff;
  background: #673ab7;
  border-color: #673ab7;
}

.theme-syndash .sidebar-user-avatar {
  color: #673ab7;
  background: rgba(103,58,183,.13);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #d8cbed;
}

.theme-syndash .sidebar-user-info strong { color: #3d4250; }
.theme-syndash .sidebar-user-info small { color: #8b91a0; }
.theme-syndash .sidebar-logout { color: #673ab7; }
.theme-syndash .sidebar-logout:hover { color: #f02769; }

.theme-syndash .sidebar-close {
  color: #673ab7;
  background: #f1ebf9;
}

.theme-syndash .sidebar-view-toggle {
  position: absolute;
  top: 17px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #673ab7;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
  transition: background .2s ease, color .2s ease;
}

.theme-syndash .sidebar-view-toggle:hover {
  color: #673ab7;
  background: rgba(103,58,183,.08);
}

.theme-syndash .sidebar-view-toggle-icon,
.theme-syndash .sidebar-view-toggle-icon .nav-svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.theme-syndash .main-content {
  margin-left: 250px;
  background: #f6f6f6;
}

.theme-syndash .topbar {
  min-height: 70px;
  padding: 13px 24px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #e8e8ee;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.06);
  position: sticky;
  top: 0;
  z-index: 12;
  backdrop-filter: blur(10px);
}

.theme-syndash .topbar h1 {
  color: #35303f;
  font-size: 22px;
  font-weight: 600;
}

.theme-syndash .topbar .eyebrow {
  color: #8c819a;
}

/* Desktop icon rail: diaktifkan tombol, lalu melebar sementara saat hover/fokus. */
@media (min-width: 781px) {
  .theme-syndash .sidebar {
    overflow-x: hidden;
    transition: width .22s ease, box-shadow .22s ease;
  }

  .theme-syndash.sidebar-compact .sidebar {
    width: 72px;
  }

  .theme-syndash.sidebar-compact .sidebar:hover,
  .theme-syndash.sidebar-compact .sidebar:focus-within {
    width: 250px;
    box-shadow: .75rem 0 2rem rgba(38, 28, 52, .18);
  }

  .theme-syndash .main-content {
    margin-left: 250px;
    transition: margin-left .22s ease;
  }

  .theme-syndash.sidebar-compact .main-content {
    margin-left: 72px;
  }

  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .brand {
    padding-inline: 11px;
    justify-content: center;
  }

  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .brand > div:not(.brand-mark),
  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .nav-section-toggle,
  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .nav-item-label,
  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .sidebar-user-info,
  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .sidebar-theme-picker,
  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .sidebar-user-footer form {
    display: none;
  }

  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .nav-group-items {
    display: grid !important;
  }

  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .nav-main-panel {
    padding-top: 6px;
  }

  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .nav-item,
  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .nav-group-items .nav-item {
    width: 48px;
    min-height: 42px;
    margin: 2px 12px;
    padding: 10px 13px;
    justify-content: center;
    gap: 0;
  }

  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .nav-item.active {
    border-left-width: 3px;
  }

  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .sidebar-user-footer {
    grid-template-columns: 38px;
    justify-content: center;
    padding-inline: 16px;
  }

  .theme-syndash.sidebar-compact .sidebar:not(:hover):not(:focus-within) .sidebar-view-toggle {
    display: none;
  }
}

@media (max-width: 780px) {
  .theme-syndash .sidebar-view-toggle { display: none; }
}

.theme-syndash .today-box {
  color: #673ab7;
  background: rgba(103,58,183,.09);
  border-color: rgba(103,58,183,.18);
  box-shadow: none;
}
.theme-syndash .notification-toggle { color: #673ab7; border-color: #e5dced; background: #fff; }
.theme-syndash .notification-toggle:hover,.theme-syndash .notification-toggle[aria-expanded="true"] { color: #fff; background: #673ab7; border-color: #673ab7; }
.theme-syndash .notification-panel { border-color: #e7dfee; background: #fff; box-shadow: 0 .75rem 2rem rgba(38,28,52,.18); }

.theme-syndash .mobile-menu {
  color: #673ab7;
}

/* Surfaces and cards */
.theme-syndash .filter-bar,
.theme-syndash .panel,
.theme-syndash .stat-card,
.theme-syndash .login-card,
.theme-syndash .person-card,
.theme-syndash .rate-card,
.theme-syndash .form-panel,
.theme-syndash .recap-panel,
.theme-syndash .career-job-card,
.theme-syndash .career-job-detail,
.theme-syndash .career-application-panel,
.theme-syndash .id-card-background-editor {
  background: #ffffff;
  border-color: #ececf2;
  border-radius: 9px;
  box-shadow: 0 .1rem .7rem rgba(45,35,66,.09);
}

.theme-syndash .panel,
.theme-syndash .filter-bar {
  border-top: 3px solid transparent;
}

.theme-syndash .panel:hover,
.theme-syndash .stat-card:hover,
.theme-syndash .career-job-card:hover {
  box-shadow: 0 .35rem 1.2rem rgba(45,35,66,.13);
}

.theme-syndash .panel-heading {
  padding-bottom: 12px;
  border-bottom-color: #eeeeF3;
}

.theme-syndash .panel h2,
.theme-syndash .panel-heading h2 {
  color: #3a3444;
  font-weight: 600;
}

.theme-syndash .welcome-card {
  color: #ffffff;
  background: linear-gradient(135deg, #5f35aa 0%, #7d52c1 58%, #9470ce 100%);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 .4rem 1.2rem rgba(103,58,183,.24);
}

.theme-syndash .welcome-card h2,
.theme-syndash .welcome-card strong {
  color: #ffffff;
}

.theme-syndash .welcome-card p,
.theme-syndash .welcome-card p:last-child {
  color: rgba(255,255,255,.84);
}

.theme-syndash .welcome-card .avatar,
.theme-syndash .welcome-icon {
  color: #673ab7;
  background: #ffffff;
}

.theme-syndash .stat-card {
  position: relative;
  overflow: hidden;
}

.theme-syndash .stat-card::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  right: -23px;
  top: -23px;
  border-radius: 50%;
  background: rgba(103,58,183,.07);
}

.theme-syndash .stat-card strong { color: #3b3445; }

/* Forms, custom selects, and calendar */
.theme-syndash input,
.theme-syndash select,
.theme-syndash textarea,
.theme-syndash .themed-select-button {
  color: #3f4350;
  background: #ffffff;
  border-color: #dedee7;
  border-radius: 6px;
}

.theme-syndash input:hover,
.theme-syndash select:hover,
.theme-syndash textarea:hover,
.theme-syndash .themed-select-button:hover {
  border-color: #bca9dd;
}

.theme-syndash input:focus,
.theme-syndash select:focus,
.theme-syndash textarea:focus,
.theme-syndash .themed-select-button:focus-visible {
  border-color: #673ab7;
  box-shadow: 0 0 0 3px rgba(103,58,183,.15);
}

.theme-syndash .themed-select-list,
.theme-syndash .tailor-suggestions,
.theme-syndash .calendar-popover {
  border-color: #e3dcec;
  border-radius: 8px;
  box-shadow: 0 .5rem 1rem rgba(45,35,66,.15);
}

.theme-syndash .themed-select-option:hover,
.theme-syndash .themed-select-option.selected,
.theme-syndash .tailor-option:hover,
.theme-syndash .tailor-option.active {
  color: #5930a1;
  background: rgba(103,58,183,.10);
}

.theme-syndash .calendar-day.selected {
  color: #ffffff;
  background: #673ab7;
  box-shadow: 0 4px 10px rgba(103,58,183,.25);
}

.theme-syndash .calendar-day.today:not(.selected) {
  color: #673ab7;
  border-color: #9c7dcc;
}
.theme-syndash .time-picker-popover { border-color: #e3dcec; box-shadow: 0 .5rem 1rem rgba(45,35,66,.18); }
.theme-syndash .analog-clock-number.selected { color: #ffffff; background: #673ab7; }

.theme-syndash .calendar-nav {
  color: #ffffff;
  background: #673ab7;
  border: 1px solid #673ab7;
  font-weight: 700;
}

.theme-syndash .calendar-nav:hover,
.theme-syndash .calendar-nav:focus-visible {
  color: #ffffff;
  background: #5930a1;
  border-color: #5930a1;
  box-shadow: 0 0 0 3px rgba(103,58,183,.22);
}

/* Buttons and feedback */
.theme-syndash .primary-btn,
.theme-syndash .share-btn {
  color: #ffffff;
  background: #673ab7;
  border-color: #673ab7;
  box-shadow: 0 3px 8px rgba(103,58,183,.24);
}

.theme-syndash .primary-btn:hover,
.theme-syndash .share-btn:hover {
  color: #ffffff;
  background: #5930a1;
  border-color: #5930a1;
}

.theme-syndash .secondary-btn,
.theme-syndash .edit-btn,
.theme-syndash .text-btn {
  color: #673ab7;
  background: rgba(103,58,183,.08);
  border-color: rgba(103,58,183,.2);
}

.theme-syndash .secondary-btn:hover,
.theme-syndash .edit-btn:hover,
.theme-syndash .text-btn:hover {
  color: #5930a1;
  background: rgba(103,58,183,.14);
}

.theme-syndash .danger-btn,
.theme-syndash .delete-btn {
  color: #d51f5d;
  background: rgba(240,39,105,.09);
  border-color: rgba(240,39,105,.2);
}

.theme-syndash .danger-btn:hover,
.theme-syndash .delete-btn:hover {
  color: #ffffff;
  background: #f02769;
  border-color: #f02769;
}

.theme-syndash .alert {
  border-radius: 7px;
  box-shadow: 0 .1rem .45rem rgba(45,35,66,.07);
}

.theme-syndash .alert-success {
  color: #257f12;
  background: rgba(50,171,19,.11);
  border-color: rgba(50,171,19,.22);
}

.theme-syndash .alert-error {
  color: #b31f51;
  background: rgba(240,39,105,.10);
  border-color: rgba(240,39,105,.22);
}

/* Tables */
.theme-syndash .table-wrap {
  border-color: #ececf2;
  border-radius: 8px;
  background: #ffffff;
}

.theme-syndash table thead,
.theme-syndash table th {
  color: #5d536a;
  background: #f5f1fa;
  border-color: #e5deee;
}

.theme-syndash table td {
  border-color: #eeeeF3;
}

.theme-syndash table tbody tr:hover td {
  background: #faf8fd;
}

.theme-syndash .table-link:hover { color: #673ab7; }

.theme-syndash .table-pagination a:not(.disabled) {
  color: #673ab7;
  border-color: #d9cbea;
}

/* Modals and public pages */
.theme-syndash .modal {
  background: rgba(39,30,52,.48);
  backdrop-filter: blur(4px);
}

.theme-syndash .modal-card {
  border: 1px solid #ece6f3;
  border-radius: 10px;
  box-shadow: 0 1rem 2.5rem rgba(35,25,50,.22);
}

.theme-syndash body.login-page {
  background: #f6f6f8;
}

.theme-syndash .login-card {
  border: 1px solid rgba(103,58,183,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 20px 54px rgba(45,35,66,.13);
}

@media (max-width: 900px) {
  .theme-syndash body.login-page {
    background:
      radial-gradient(circle at 8% 2%, rgba(103,58,183,.15), transparent 34%),
      radial-gradient(circle at 96% 96%, rgba(0,166,166,.10), transparent 30%),
      #f5f4f8;
  }
  .theme-syndash .login-form-panel { background: transparent; }
  .theme-syndash .login-card {
    border: 1px solid rgba(103,58,183,.10);
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 22px 58px rgba(45,35,66,.14);
    backdrop-filter: blur(12px);
  }
}

.theme-syndash .career-header,
.theme-syndash .career-footer {
  background: linear-gradient(135deg, #4f2894, #673ab7);
}

.theme-syndash .career-intro > span,
.theme-syndash .career-job-department {
  color: #673ab7;
  background: rgba(103,58,183,.10);
}

.theme-syndash .status-pill.approved { color: #267f15; background: rgba(50,171,19,.13); }
.theme-syndash .status-pill.pending { color: #a97200; background: rgba(255,193,7,.18); }
.theme-syndash .status-pill.rejected { color: #b31f51; background: rgba(240,39,105,.12); }

/* Komponen formulir yang sebelumnya masih memakai tampilan bawaan/tema lama. */
.theme-syndash .small-btn {
  color: #673ab7;
  background: rgba(103,58,183,.10);
  border: 1px solid rgba(103,58,183,.18);
}
.theme-syndash .small-btn:hover { color: #ffffff; background: #673ab7; }

.theme-syndash .pay-mode-switch {
  border-color: #dfd5eb;
  background: #f5f1fa;
}
.theme-syndash .pay-mode-switch button { color: #665d72; }
.theme-syndash .pay-mode-switch button:hover { color: #5930a1; background: rgba(103,58,183,.08); }
.theme-syndash .pay-mode-switch button.active {
  color: #ffffff;
  background: #673ab7;
  box-shadow: 0 4px 10px rgba(103,58,183,.25);
}

.theme-syndash input[type="checkbox"] {
  appearance: none;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid #cfc3dc;
  border-radius: 5px;
  background: #ffffff;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
}
.theme-syndash input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 4px;
  border: solid #ffffff;
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}
.theme-syndash input[type="checkbox"]:checked { background: #673ab7; border-color: #673ab7; }
.theme-syndash input[type="checkbox"]:checked::after { opacity: 1; }
.theme-syndash input[type="checkbox"]:focus-visible { outline: 3px solid rgba(103,58,183,.18); outline-offset: 2px; }

.theme-syndash input[type="file"] {
  height: auto;
  padding: 5px;
  color: #655d70;
  background: #ffffff;
  border-color: #d9cfea;
}
.theme-syndash input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 11px;
  border: 0;
  border-radius: 5px;
  color: #ffffff;
  background: #673ab7;
  font-weight: 600;
  cursor: pointer;
}
.theme-syndash input[type="file"]::file-selector-button:hover { background: #5930a1; }

.theme-syndash .payroll-method-notice {
  color: #4b4158;
  background: #f5f1fa;
  border-color: #d9cbea;
}
.theme-syndash .payroll-method-notice strong { color: #673ab7; }

.theme-syndash .onboarding-invite-form select[data-native-select] {
  min-width: 120px;
  height: 34px;
  padding: 6px 30px 6px 10px;
  color: #51475e;
  background-color: #ffffff;
  border: 1px solid #d9cbea;
  border-radius: 7px;
}
.theme-syndash .recruitment-actions { align-items: center; gap: 6px; }
.theme-syndash .recruitment-candidates-panel .table-wrap { overflow-y: visible; }

/* Bagan organisasi modern. */
.theme-syndash .organization-overview {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.theme-syndash .organization-metric {
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 9px;
  background: var(--color-background-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 .1rem .7rem rgba(45,35,66,.07);
}
.theme-syndash .organization-metric > span,
.theme-syndash .organization-department-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #673ab7;
  background: rgba(103,58,183,.10);
  display: grid;
  place-items: center;
}
.theme-syndash .organization-metric .ui-icon,
.theme-syndash .organization-department-icon .ui-icon { width: 19px; height: 19px; }
.theme-syndash .organization-metric small,
.theme-syndash .organization-metric strong { display: block; }
.theme-syndash .organization-metric small { color: var(--color-text-secondary); font-size: 10px; }
.theme-syndash .organization-metric strong { margin-top: 4px; color: var(--color-text-primary); font-size: 16px; }
.theme-syndash .organization-department-grid { display: grid; gap: 12px; }
.theme-syndash .organization-department-card {
  overflow: hidden;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 9px;
  background: var(--color-background-primary);
}
.theme-syndash .organization-department-heading {
  padding: 12px 14px;
  background: var(--color-background-secondary);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.theme-syndash .organization-department-heading small,
.theme-syndash .organization-department-heading strong { display: block; }
.theme-syndash .organization-department-heading small { color: var(--color-text-secondary); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.theme-syndash .organization-department-heading strong { margin-top: 2px; color: var(--color-text-primary); font-size: 13px; }
.theme-syndash .organization-person-count { padding: 5px 9px; border-radius: 999px; color: #267f15; background: rgba(50,171,19,.13); font-size: 10px; font-weight: 700; }
.theme-syndash .organization-role-list { padding: 4px 14px 8px; }
.theme-syndash .organization-role-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-tertiary);
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  align-items: center;
  gap: 16px;
}
.theme-syndash .organization-role-row:last-child { border-bottom: 0; }
.theme-syndash .organization-role-copy strong,
.theme-syndash .organization-role-copy span { display: block; }
.theme-syndash .organization-role-copy strong { color: var(--color-text-primary); font-size: 12px; }
.theme-syndash .organization-role-copy span { margin-top: 3px; color: var(--color-text-secondary); font-size: 10px; }
.theme-syndash .organization-role-meter { height: 7px; overflow: hidden; border-radius: 999px; background: var(--color-background-secondary); }
.theme-syndash .organization-role-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#673ab7,#9c74d2); }

/* Semi-dark: sidebar gelap, area kerja tetap terang. */
.theme-syndash.theme-semi-dark .sidebar,
.theme-syndash.theme-dark .sidebar,
.theme-syndash.theme-semi-dark .brand,
.theme-syndash.theme-dark .brand,
.theme-syndash.theme-semi-dark .sidebar-user-footer,
.theme-syndash.theme-dark .sidebar-user-footer {
  color: #d7d2df;
  background: #191622;
  border-color: #302a3d;
  box-shadow: .2rem 0 1rem rgba(12,9,18,.24);
}

.theme-syndash.theme-semi-dark .brand strong,
.theme-syndash.theme-dark .brand strong,
.theme-syndash.theme-semi-dark .sidebar-user-info strong,
.theme-syndash.theme-dark .sidebar-user-info strong { color: #f5f2f8; }
.theme-syndash.theme-semi-dark .brand span,
.theme-syndash.theme-dark .brand span,
.theme-syndash.theme-semi-dark .sidebar-user-info small,
.theme-syndash.theme-dark .sidebar-user-info small,
.theme-syndash.theme-semi-dark .sidebar-theme-label,
.theme-syndash.theme-dark .sidebar-theme-label { color: #9d95aa; }

.theme-syndash.theme-semi-dark .nav-section-toggle,
.theme-syndash.theme-dark .nav-section-toggle { color: #8f879c; }
.theme-syndash.theme-semi-dark .nav-section-toggle:hover,
.theme-syndash.theme-dark .nav-section-toggle:hover,
.theme-syndash.theme-semi-dark .nav-group.active-group > .nav-section-toggle,
.theme-syndash.theme-dark .nav-group.active-group > .nav-section-toggle { color: #c8aef1; background: #211c2c; }
.theme-syndash.theme-semi-dark .nav-item,
.theme-syndash.theme-dark .nav-item { color: #c5bfce; }
.theme-syndash.theme-semi-dark .nav-item:hover,
.theme-syndash.theme-dark .nav-item:hover { color: #ffffff; background: #2a2337; }
.theme-syndash.theme-semi-dark .nav-item.active,
.theme-syndash.theme-dark .nav-item.active {
  color: #ffffff;
  background: #332546;
  border-left-color: #a879e6;
}
.theme-syndash.theme-semi-dark .sidebar-theme-picker,
.theme-syndash.theme-dark .sidebar-theme-picker { border-bottom-color: #332d40; }
.theme-syndash.theme-semi-dark .sidebar-theme-picker button,
.theme-syndash.theme-dark .sidebar-theme-picker button {
  color: #bfb6ca;
  background: #25202f;
  border-color: #3a3347;
}
.theme-syndash.theme-semi-dark .sidebar-theme-picker button:hover,
.theme-syndash.theme-semi-dark .sidebar-theme-picker button.active,
.theme-syndash.theme-dark .sidebar-theme-picker button:hover,
.theme-syndash.theme-dark .sidebar-theme-picker button.active { color: #fff; background: #7b4bc0; border-color: #9d70db; }
.theme-syndash.theme-semi-dark .sidebar-logout,
.theme-syndash.theme-dark .sidebar-logout { color: #c8aef1; }

.theme-syndash.theme-semi-dark .mobile-workforce-nav {
  color: #d7d2df;
  background: rgba(25,22,34,.97);
  border-top-color: #302a3d;
  box-shadow: 0 -.45rem 1.25rem rgba(12,9,18,.24);
  backdrop-filter: blur(14px);
}
.theme-syndash.theme-semi-dark .mobile-workforce-item { color: #bdb6c8; }
.theme-syndash.theme-semi-dark .mobile-workforce-item[data-mobile-icon="attendance"] { --mobile-icon-color: #35c693; }
.theme-syndash.theme-semi-dark .mobile-workforce-item[data-mobile-icon="permit"] { --mobile-icon-color: #68aef0; }
.theme-syndash.theme-semi-dark .mobile-workforce-item[data-mobile-icon="overtime"] { --mobile-icon-color: #f2a63d; }
.theme-syndash.theme-semi-dark .mobile-workforce-item[data-mobile-icon="report"] { --mobile-icon-color: #b28bea; }
.theme-syndash.theme-semi-dark .mobile-workforce-item[data-mobile-icon="tailor"] { --mobile-icon-color: #45c4ca; }
.theme-syndash.theme-semi-dark .mobile-workforce-item[data-mobile-icon="more"] { --mobile-icon-color: #b8b1c3; }
.theme-syndash.theme-semi-dark .mobile-workforce-item[data-mobile-icon="home"] { --mobile-icon-color: #78b8f2; }
.theme-syndash.theme-semi-dark .mobile-workforce-item.active small { color: #ffffff; }

/* Dark penuh: sidebar dan seluruh area kerja gelap. */
.theme-syndash.theme-dark {
  --paper: #1c1d25;
  --cream: #101116;
  --ink: #eceaf0;
  --muted: #aaa5b2;
  --line: #34343f;
  --color-text-primary: #eceaf0;
  --color-text-secondary: #aaa5b2;
  --color-border-tertiary: #34343f;
  --color-background-primary: #17181f;
  --color-background-secondary: #1c1d25;
  color-scheme: dark;
  background: #101116;
}
.theme-syndash.theme-dark body,
.theme-syndash.theme-dark .app-shell,
.theme-syndash.theme-dark .main-content { color: #eceaf0; background: #101116; }
.theme-syndash.theme-dark .topbar { background: rgba(23,24,31,.97); border-color: #30313b; }
.theme-syndash.theme-dark .topbar h1,
.theme-syndash.theme-dark .panel h2,
.theme-syndash.theme-dark .panel-heading h2,
.theme-syndash.theme-dark .stat-card strong { color: #f1eff4; }
.theme-syndash.theme-dark .filter-bar,
.theme-syndash.theme-dark .panel,
.theme-syndash.theme-dark .stat-card,
.theme-syndash.theme-dark .person-card,
.theme-syndash.theme-dark .rate-card,
.theme-syndash.theme-dark .form-panel,
.theme-syndash.theme-dark .recap-panel,
.theme-syndash.theme-dark .id-card-background-editor,
.theme-syndash.theme-dark .table-wrap,
.theme-syndash.theme-dark .modal-card {
  color: #e7e4eb;
  background: #1c1d25;
  border-color: #34343f;
  box-shadow: 0 .2rem .8rem rgba(0,0,0,.28);
}
.theme-syndash.theme-dark input,
.theme-syndash.theme-dark select,
.theme-syndash.theme-dark textarea,
.theme-syndash.theme-dark .themed-select-button,
.theme-syndash.theme-dark .themed-select-list,
.theme-syndash.theme-dark .tailor-suggestions,
.theme-syndash.theme-dark .calendar-popover {
  color: #eceaf0;
  background: #15161d;
  border-color: #3b3c47;
}
.theme-syndash.theme-dark .calendar-nav {
  color: #ffffff;
  background: #8251c7;
  border-color: #9d70db;
}
.theme-syndash.theme-dark .calendar-nav:hover,
.theme-syndash.theme-dark .calendar-nav:focus-visible {
  color: #ffffff;
  background: #9a68dc;
  border-color: #b28bea;
  box-shadow: 0 0 0 3px rgba(157,112,219,.28);
}
.theme-syndash.theme-dark .time-picker-popover { color: #eceaf0; background: #15161d; border-color: #3b3c47; box-shadow: 0 .65rem 1.4rem rgba(0,0,0,.38); }
.theme-syndash.theme-dark .analog-clock-face { background: #252630; border-color: #444550; box-shadow: inset 0 0 0 6px rgba(21,22,29,.42); }
.theme-syndash.theme-dark .analog-clock-number { color: #ddd9e2; }
.theme-syndash.theme-dark .analog-clock-number.inner { color: #a9a5b0; }
.theme-syndash.theme-dark .analog-clock-number:hover,
.theme-syndash.theme-dark .analog-clock-number:focus-visible { color: #eadcff; background: #30243e; }
.theme-syndash.theme-dark .analog-clock-number.selected { color: #ffffff; background: #8251c7; }
.theme-syndash.theme-dark .login-form-panel { background: #181920; }
.theme-syndash.theme-dark .login-card {
  border-color: #3b3548;
  background: #1b1c24;
  box-shadow: 0 20px 54px rgba(0,0,0,.32);
}
@media (max-width: 900px) {
  .theme-syndash.theme-dark body.login-page {
    background:
      radial-gradient(circle at 8% 2%, rgba(130,81,199,.22), transparent 36%),
      radial-gradient(circle at 96% 96%, rgba(0,166,166,.12), transparent 30%),
      #121319;
  }
  .theme-syndash.theme-dark .login-form-panel { background: transparent; }
  .theme-syndash.theme-dark .login-card {
    border-color: #3b3548;
    background: rgba(27,28,36,.94);
    box-shadow: 0 22px 58px rgba(0,0,0,.34);
  }
}
.theme-syndash.theme-dark table thead,
.theme-syndash.theme-dark table th { color: #d2c8df; background: #27232f; border-color: #3b3545; }
.theme-syndash.theme-dark table td { color: #ddd9e2; border-color: #30313a; background: #1c1d25; }
.theme-syndash.theme-dark table tbody tr:hover td { background: #25232c; }
.theme-syndash.theme-dark .panel-heading { border-bottom-color: #34343f; }
.theme-syndash.theme-dark .secondary-btn,
.theme-syndash.theme-dark .edit-btn { color: #c7a8ee; background: #2a2136; border-color: #4c3b60; }
.theme-syndash.theme-dark .today-box { color: #d3b7f4; background: #292036; border-color: #49375d; }
.theme-syndash.theme-dark .notification-toggle { color: #d3b7f4; background: #201b29; border-color: #49375d; }
.theme-syndash.theme-dark .notification-toggle:hover,.theme-syndash.theme-dark .notification-toggle[aria-expanded="true"] { color: #fff; background: #7b4bc0; border-color: #9d70db; }
.theme-syndash.theme-dark .notification-badge { border-color: #17181f; }
.theme-syndash.theme-dark .notification-panel { color: #eceaf0; background: #1c1d25; border-color: #3b3545; box-shadow: 0 .75rem 2rem rgba(0,0,0,.42); }
.theme-syndash.theme-dark .notification-panel > header,.theme-syndash.theme-dark .notification-item { border-color: #34343f; }
.theme-syndash.theme-dark .notification-item:hover { background: #25232c; }
.theme-syndash.theme-dark .notification-item.unread { background: #2a2136; }
.theme-syndash.theme-dark .push-notification-control { border-color: #34343f; background: #191a21; }
.theme-syndash.theme-dark .push-notification-control button { border-color: #56436d; color: #d9baf7; background: #2a2136; }
.theme-syndash.theme-dark .schedule-chip.off { color: #ffd699; border-color: #6b512c; background: #302716; }
.theme-syndash.theme-dark .schedule-chip.leave { color: #aad7ff; border-color: #31516b; background: #172938; }
.theme-syndash.theme-dark .shift-master-card,.theme-syndash.theme-dark .schedule-calendar-table .schedule-staff-column { background: #1c1d25; }
.theme-syndash.theme-dark .schedule-calendar-table thead th,.theme-syndash.theme-dark .schedule-calendar-table thead .schedule-staff-column { background: #22232c; }
.theme-syndash.theme-dark .leave-type-card,.theme-syndash.theme-dark .leave-calendar-day { background: #1c1d25; border-color: #34343f; }
.theme-syndash.theme-dark .document-card { color: #ddd9e2; background: #1c1d25; border-color: #34343f; }
.theme-syndash.theme-dark .document-card-icon { color: #d9baf7; background: #2a2136; }
.theme-syndash.theme-dark .document-meta-grid span { color: #b9b3c1; background: #20212a; border-color: #3b3c47; }
.theme-syndash.theme-dark .document-meta-grid b { color: #eceaf0; }
.theme-syndash.theme-dark .document-status { color: #8ad36e; background: #1c3023; }
.theme-syndash.theme-dark .document-status.soon { color: #efbd6c; background: #352a1c; }
.theme-syndash.theme-dark .document-status.expired { color: #ff9d9d; background: #352126; }
.theme-syndash.theme-dark .document-status.none { color: #b9b3c1; background: #272832; }
.theme-syndash.theme-dark .hr-letter-row { color: #ddd9e2; background: #1c1d25; border-color: #34343f; }
.theme-syndash.theme-dark .hr-letter-row:hover,
.theme-syndash.theme-dark .hr-letter-row.active { background: #2a2136; border-color: #5c4775; }
.theme-syndash.theme-dark .hr-letter-row > span { color: #d9baf7; background: #2a2136; }
.theme-syndash.theme-dark .hr-letter-preview-shell { background: #111218; }
.theme-syndash.theme-dark .hr-letter-paper { color: #111827; background: #ffffff; }
.theme-syndash.theme-dark .kpi-score-row,
.theme-syndash.theme-dark .kpi-indicator-card,
.theme-syndash.theme-dark .kpi-review-row,
.theme-syndash.theme-dark .kpi-score-detail-list > div { color: #ddd9e2; background: #1c1d25; border-color: #34343f; }
.theme-syndash.theme-dark .kpi-review-row:hover,
.theme-syndash.theme-dark .kpi-review-row.active { background: #2a2136; border-color: #5c4775; }
.theme-syndash.theme-dark .kpi-review-row b { color: #d9baf7; background: #2a2136; }
.theme-syndash.theme-dark .kpi-notes p { color: #c8c3d0; background: #20212a; }
.theme-syndash.theme-dark .kpi-notes strong { color: #eceaf0; }
.theme-syndash.theme-dark .employee-asset-card,
.theme-syndash.theme-dark .employee-asset-assignment { color: #ddd9e2; background: #1c1d25; border-color: #34343f; }
.theme-syndash.theme-dark .employee-asset-card > span,
.theme-syndash.theme-dark .employee-asset-assignment-main > span { color: #d9baf7; background: #2a2136; }
.theme-syndash.theme-dark .employee-asset-assignment-meta span,
.theme-syndash.theme-dark .employee-asset-note { color: #c8c3d0; background: #20212a; }
.theme-syndash.theme-dark .employee-asset-assignment-meta b { color: #eceaf0; }
.theme-syndash.theme-dark .employee-asset-return-upload { color: #c8c3d0; background: #20212a; border-color: #34343f; }
.theme-syndash.theme-dark .announcement-card { color: #ddd9e2; background: #1c1d25; border-color: #34343f; }
.theme-syndash.theme-dark .announcement-card p { color: #c8c3d0; }
.theme-syndash.theme-dark .announcement-priority { color: #d9baf7; background: #2a2136; }
.theme-syndash.theme-dark .announcement-card.priority-important .announcement-priority { color: #ffd38a; background: #35281c; }
.theme-syndash.theme-dark .announcement-card.priority-urgent .announcement-priority { color: #ffb7b7; background: #3a2025; }
.theme-syndash.theme-dark .announcement-target { color: #9ae5e5; background: #173033; }
.theme-syndash.theme-dark .announcement-unread { color: #aac8ff; background: #1d2942; }
.theme-syndash.theme-dark .announcement-meta span,
.theme-syndash.theme-dark .announcement-form .announcement-current-attachment { color: #c8c3d0; background: #20212a; }
.theme-syndash.theme-dark .announcement-meta b { color: #eceaf0; }
.theme-syndash.theme-dark .offboarding-card { color: #ddd9e2; background: #1c1d25; border-color: #34343f; }
.theme-syndash.theme-dark .offboarding-checklist-box,
.theme-syndash.theme-dark .offboarding-summary span,
.theme-syndash.theme-dark .offboarding-note { color: #c8c3d0; background: #20212a; border-color: #34343f; }
.theme-syndash.theme-dark .offboarding-summary b { color: #eceaf0; }
.theme-syndash.theme-dark .offboarding-checklist-state .done { color: #9de7a4; background: #18321e; }
.theme-syndash.theme-dark .offboarding-checklist-state .todo { color: #ffd38a; background: #35281c; }
.theme-syndash.theme-dark .contract-preview-shell { background: #111218; }
.theme-syndash.theme-dark .contract-paper { color: #111; background: #fff; }
.theme-syndash.theme-dark .themed-select-option:hover,
.theme-syndash.theme-dark .themed-select-option.selected,
.theme-syndash.theme-dark .tailor-option:hover,
.theme-syndash.theme-dark .tailor-option.active { color: #eadcff; background: #30243e; }
.theme-syndash.theme-dark .small-btn { color: #d7bdf5; background: #2b2236; border-color: #4c3b60; }
.theme-syndash.theme-dark .small-btn:hover { color: #ffffff; background: #7b4bc0; }
.theme-syndash.theme-dark .pay-mode-switch { background: #15161d; border-color: #3b3c47; }
.theme-syndash.theme-dark .pay-mode-switch button { color: #b9b3c1; }
.theme-syndash.theme-dark .pay-mode-switch button.active { color: #ffffff; background: #7b4bc0; }
.theme-syndash.theme-dark input[type="checkbox"] { background: #15161d; border-color: #57515f; }
.theme-syndash.theme-dark input[type="checkbox"]:checked { background: #7b4bc0; border-color: #9d70db; }
.theme-syndash.theme-dark input[type="file"] { color: #c9c4cf; background: #15161d; border-color: #3b3c47; }
.theme-syndash.theme-dark input[type="file"]::file-selector-button { background: #7b4bc0; }
.theme-syndash.theme-dark .payroll-method-notice { color: #d8d3dd; background: #282230; border-color: #493b57; }
.theme-syndash.theme-dark .payroll-method-notice strong { color: #d2b5f3; }
.theme-syndash.theme-dark .onboarding-invite-form select[data-native-select] { color: #eceaf0; background-color: #15161d; border-color: #3b3c47; }
.theme-syndash.theme-dark .organization-metric,
.theme-syndash.theme-dark .organization-department-card { box-shadow: 0 .2rem .8rem rgba(0,0,0,.24); }

/* Lapisan kompatibilitas tema gelap untuk komponen lintas modul. */
.theme-syndash.theme-dark input::placeholder,
.theme-syndash.theme-dark textarea::placeholder { color: #777481; opacity: 1; }

.theme-syndash.theme-dark .birthday-day,
.theme-syndash.theme-dark .recruitment-job-row,
.theme-syndash.theme-dark .candidate-cv-box,
.theme-syndash.theme-dark .user-origin-box,
.theme-syndash.theme-dark .field-help,
.theme-syndash.theme-dark .bpjs-selected-staff,
.theme-syndash.theme-dark .bpjs-simulation > div,
.theme-syndash.theme-dark .slip-note,
.theme-syndash.theme-dark .slip-total,
.theme-syndash.theme-dark .calculation-box,
.theme-syndash.theme-dark .permission-check,
.theme-syndash.theme-dark .workforce-welcome,
.theme-syndash.theme-dark .coordinator-strip,
.theme-syndash.theme-dark .coordinator-role-toggle {
  color: #e3e0e7;
  background: #20212a;
  border-color: #3b3c47;
}

.theme-syndash.theme-dark .birthday-day.is-empty { background: #191a21; border-color: #373842; }
.theme-syndash.theme-dark .birthday-day.has-birthday { background: #202736; border-color: #35445a; }
.theme-syndash.theme-dark .birthday-date { color: #e9e6ed; background: #2a2b35; }
.theme-syndash.theme-dark .birthday-day.has-birthday .birthday-date { color: #ffffff; background: #4a86bd; }
.theme-syndash.theme-dark .birthday-names span { color: #8fc8fa; background: #1d3042; }
.theme-syndash.theme-dark .birthday-day.is-today { border-color: #5ca9ed; box-shadow: inset 0 0 0 1px #5ca9ed; }

.theme-syndash.theme-dark .attendance-status-card { border-color: #3b3c47; }
.theme-syndash.theme-dark .attendance-present,
.theme-syndash.theme-dark .status-pill,
.theme-syndash.theme-dark .status-pill.approved,
.theme-syndash.theme-dark .recruitment-stage-hired,
.theme-syndash.theme-dark .recruitment-stage-offer {
  color: #8ad36e;
  background: #1c3023;
  border-color: #31513a;
}
.theme-syndash.theme-dark .attendance-leave,
.theme-syndash.theme-dark .attendance-sick,
.theme-syndash.theme-dark .recruitment-stage-new {
  color: #83bdf2;
  background: #1d2b3b;
  border-color: #304964;
}
.theme-syndash.theme-dark .attendance-absent,
.theme-syndash.theme-dark .status-pill.rejected,
.theme-syndash.theme-dark .recruitment-stage-rejected,
.theme-syndash.theme-dark .alert-error,
.theme-syndash.theme-dark .danger-btn,
.theme-syndash.theme-dark .delete-btn {
  color: #ff9d9d;
  background: #352126;
  border-color: #5b343c;
}
.theme-syndash.theme-dark .attendance-holiday,
.theme-syndash.theme-dark .status-pill.pending,
.theme-syndash.theme-dark .recruitment-stage-interview {
  color: #efbd6c;
  background: #352a1c;
  border-color: #5b4629;
}
.theme-syndash.theme-dark .attendance-empty { color: #b3afba; background: #272832; border-color: #41424d; }
.theme-syndash.theme-dark .recruitment-stage-screening { color: #c7a8ee; background: #2a2136; border-color: #4c3b60; }

.theme-syndash.theme-dark .stat-icon.orange { color: #f2a36d; background: #34251f; }
.theme-syndash.theme-dark .stat-icon.blue { color: #78b8f2; background: #202c3d; }
.theme-syndash.theme-dark .stat-icon.green { color: #67c7a5; background: #1c3029; }
.theme-syndash.theme-dark .stat-icon.purple { color: #d7bdf5; background: #2a2136; }
.theme-syndash.theme-dark .stat-icon.red { color: #ff9d9d; background: #352126; }
.theme-syndash.theme-dark .avatar { color: #8fc8fa; background: #202c3d; }
.theme-syndash.theme-dark .qty-badge,
.theme-syndash.theme-dark .count-badge { color: #8ad36e; background: #1c3023; }
.theme-syndash.theme-dark .rank-number,
.theme-syndash.theme-dark .workforce-code { color: #8fc8fa; background: #1d3042; }

.theme-syndash.theme-dark .bpjs-policy-note {
  color: #acd5f7;
  background: #1c2a38;
  border-color: #36516a;
}
.theme-syndash.theme-dark .bpjs-policy-values span { color: #b8dcfa; background: #26394b; }
.theme-syndash.theme-dark .bpjs-simulation strong,
.theme-syndash.theme-dark .bpjs-selected-staff strong { color: #8fc8fa; }
.theme-syndash.theme-dark .payroll-bpjs-box {
  color: #c8e4f8;
  background: #1c2a38;
  border-color: #36516a;
}
.theme-syndash.theme-dark .payroll-bpjs-summary span,
.theme-syndash.theme-dark .payroll-bpjs-employer { color: #9db9cf; }
.theme-syndash.theme-dark .payroll-bpjs-employer strong { color: #c8e4f8; }

.theme-syndash.theme-dark .id-card-print-note,
.theme-syndash.theme-dark .onboarding-bank-note,
.theme-syndash.theme-dark .onboarding-link-panel {
  color: #acd5f7;
  background: #1c2a38;
  border-color: #36516a;
}
.theme-syndash.theme-dark .id-card-select-tools span,
.theme-syndash.theme-dark .onboarding-intro > span { color: #8fc8fa; }
.theme-syndash.theme-dark .id-card-sheet { background: #15161d; border-color: #3b3c47; }

.theme-syndash.theme-dark .workforce-activity-icon.permit { color: #83bdf2; background: #1d2b3b; }
.theme-syndash.theme-dark .workforce-activity-icon.overtime { color: #efbd6c; background: #352a1c; }
.theme-syndash.theme-dark .workforce-activity-icon.tailor { color: #67c7a5; background: #1c3029; }
.theme-syndash.theme-dark .calendar-day:hover { color: #d9c0f5; background: #30243e; }
.theme-syndash.theme-dark .alert-success { color: #8ad36e; background: #1c3023; border-color: #31513a; }

@media (max-width: 780px) {
  .theme-syndash .sidebar {
    width: 260px;
    box-shadow: .75rem 0 2rem rgba(38,28,52,.20);
  }

  .theme-syndash .main-content {
    margin-left: 0;
  }

  .theme-syndash .topbar {
    min-height: 64px;
    padding: 11px 16px;
  }

  .theme-syndash .organization-overview { grid-template-columns: 1fr; }
  .theme-syndash .organization-role-row { grid-template-columns: 1fr; gap: 7px; }
}

@media print {
  .theme-syndash body,
  .theme-syndash .app-shell,
  .theme-syndash .main-content {
    background: #ffffff;
  }

  .theme-syndash .panel,
  .theme-syndash .filter-bar,
  .theme-syndash .stat-card,
  .theme-syndash .slip-sheet {
    box-shadow: none;
  }
}