/* Shared authenticated-panel theme. Login is outside .layout[data-app-theme]. */
.layout[data-app-theme="dark"] {
  --rwa-page: #081426;
  --rwa-panel: #111f36;
  --rwa-panel-2: #14253d;
  --rwa-line: #273b59;
  --rwa-text: #ebf3ff;
  --rwa-muted: #9cb0cd;
  background: var(--rwa-page);
  color: var(--rwa-text);
}
.layout[data-app-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #11223b, #0a182d 95%);
  border-right: 1px solid #294066;
  color: #c7d6ed;
}
.layout[data-app-theme="dark"] .sidebar .brand,
.layout[data-app-theme="dark"] .sidebar .sidebar-bottom {
  border-color: #2b3b55;
}
.layout[data-app-theme="dark"] .sidebar .nav-item {
  color: #c0d2e9;
}
.layout[data-app-theme="dark"] .sidebar .nav-item:hover {
  background: #203958;
}
.layout[data-app-theme="dark"] .sidebar .nav-item.active {
  background: linear-gradient(100deg, #164b91, #173d67);
  color: #fff;
  box-shadow: inset 3px 0 #3699ff;
}
.layout[data-app-theme="dark"] .main {
  background: var(--rwa-page);
  color: var(--rwa-text);
}
.layout[data-app-theme="dark"] .topbar {
  background: #101d32 !important;
  border-bottom: 1px solid #293955;
  color: var(--rwa-text);
  box-shadow: 0 4px 18px #040b1b40;
}
.layout[data-app-theme="dark"] .topbar h2,
.layout[data-app-theme="dark"] .topbar .eyebrow {
  color: var(--rwa-text);
}
.layout[data-app-theme="dark"] .topbar .eyebrow {
  color: #8ca8d2;
}
.layout[data-app-theme="dark"] .top-right {
  color: #abc1dd;
}
.layout[data-app-theme="dark"] .rwa-theme-toggle,
.layout[data-app-theme="dark"] .mobile-logout {
  border: 1px solid #31496b;
  background: #1d304c;
  color: #e2f1ff;
}
.layout[data-app-theme="dark"] .content {
  background: transparent;
}
.layout[data-app-theme="dark"] .page-heading h1,
.layout[data-app-theme="dark"] .dashboard-section-title,
.layout[data-app-theme="dark"] h2,
.layout[data-app-theme="dark"] .panel-head h3,
.layout[data-app-theme="dark"] .dashboard-progress-heading h3 {
  color: var(--rwa-text);
}
.layout[data-app-theme="dark"] .page-heading p,
.layout[data-app-theme="dark"] .panel-head p,
.layout[data-app-theme="dark"] .stat-hint,
.layout[data-app-theme="dark"] .chart-unit {
  color: var(--rwa-muted);
}
.layout[data-app-theme="dark"] .panel,
.layout[data-app-theme="dark"] .form-panel,
.layout[data-app-theme="dark"] .analytics-panel,
.layout[data-app-theme="dark"] .dashboard-tab-panel,
.layout[data-app-theme="dark"] .account-stat-card,
.layout[data-app-theme="dark"] .dashboard-progress-panel,
.layout[data-app-theme="dark"] .modal,
.layout[data-app-theme="dark"] .dialog {
  border: 1px solid var(--rwa-line);
  background: var(--rwa-panel);
  color: var(--rwa-text);
  box-shadow: 0 10px 24px #030b1960;
}
.layout[data-app-theme="dark"] .panel-head,
.layout[data-app-theme="dark"] .form-actions {
  border-color: var(--rwa-line);
}
.layout[data-app-theme="dark"] .dashboard-period-toolbar,
.layout[data-app-theme="dark"] .dashboard-tabs,
.layout[data-app-theme="dark"] .account-tabs,
.layout[data-app-theme="dark"] .review-summary {
  background: #14263f;
  border-color: var(--rwa-line);
  color: #ccdaf0;
  box-shadow: none;
}
.layout[data-app-theme="dark"] .dashboard-tab,
.layout[data-app-theme="dark"] .account-tab {
  color: #afc2da;
}
.layout[data-app-theme="dark"] .dashboard-tab.active,
.layout[data-app-theme="dark"] .account-tab.active {
  background: #25436b;
  color: #fff;
}
.layout[data-app-theme="dark"] .dashboard-period-controls label,
.layout[data-app-theme="dark"] .form-grid label {
  color: #b3c6e0;
}
.layout[data-app-theme="dark"] select,
.layout[data-app-theme="dark"] input,
.layout[data-app-theme="dark"] textarea,
.layout[data-app-theme="dark"] .search-box {
  background: #0d1b30;
  border-color: #38506e;
  color: #f0f5ff;
}
.layout[data-app-theme="dark"] input::placeholder,
.layout[data-app-theme="dark"] textarea::placeholder {
  color: #91a8c5;
}
.layout[data-app-theme="dark"] select option {
  background: #15273e;
  color: #f5f8ff;
}
.layout[data-app-theme="dark"] .btn.secondary,
.layout[data-app-theme="dark"] .icon-btn {
  background: #213959;
  border: 1px solid #375679;
  color: #e1efff;
}
.layout[data-app-theme="dark"] .btn.secondary:hover {
  background: #2b4c72;
}
.layout[data-app-theme="dark"] .inline-link,
.layout[data-app-theme="dark"] .text-btn {
  color: #65cfff;
}
.layout[data-app-theme="dark"] .empty,
.layout[data-app-theme="dark"] .dashboard-no-data-note,
.layout[data-app-theme="dark"] .dashboard-empty-value,
.layout[data-app-theme="dark"] .bar-column em {
  color: #a3b7d2;
}
.layout[data-app-theme="dark"] table {
  color: #e3edfc;
}
.layout[data-app-theme="dark"] th {
  background: #192c48;
  color: #bfcee5;
  border-color: #334965;
}
.layout[data-app-theme="dark"] td {
  color: #d7e7fa;
  border-color: #2a405c;
}
.layout[data-app-theme="dark"] .cell-sub {
  color: #96aac6;
}
.layout[data-app-theme="dark"] .dashboard-progress-track,
.layout[data-app-theme="dark"] .bar-track {
  background: #273c5d;
}
.layout[data-app-theme="dark"] .dashboard-progress-track span {
  background: linear-gradient(90deg, #05d4ae, #298fff);
}
.layout[data-app-theme="dark"] .bar-track > span {
  background: linear-gradient(180deg, #39a5ff, #08cda7);
}
.layout[data-app-theme="dark"] .dashboard-bar-column > b,
.layout[data-app-theme="dark"] .bar-column small {
  color: #c1d3e8;
}
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-card {
  border: 1px solid #ffffff22;
  border-radius: 19px;
  background: linear-gradient(145deg, #267bf4, #1455d5);
  box-shadow: 0 9px 19px #06132966;
  color: #fff;
}
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-card:nth-child(3n + 2) {
  background: linear-gradient(135deg, #0abb97, #038c79);
}
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-card:nth-child(3n) {
  background: linear-gradient(135deg, #9751f5, #692bd3);
}
.layout[data-app-theme="dark"]
  .dashboard-stat-section
  + .dashboard-stat-section
  .stat-card:nth-child(3n + 1) {
  background: linear-gradient(135deg, #ffac26, #df7205);
}
.layout[data-app-theme="dark"]
  .dashboard-stat-section
  + .dashboard-stat-section
  .stat-card:nth-child(3n + 2) {
  background: linear-gradient(135deg, #0bbf94, #008b73);
}
.layout[data-app-theme="dark"]
  .dashboard-stat-section
  + .dashboard-stat-section
  .stat-card:nth-child(3n) {
  background: linear-gradient(135deg, #9b58ef, #6232c7);
}
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-label,
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-value,
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-hint,
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-open-hint {
  color: #fff;
}
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-label {
  opacity: 0.88;
}
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-hint {
  opacity: 0.79;
}
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-icon {
  background: #ffffff29;
  color: #fff;
}
.layout[data-app-theme="dark"] .dashboard-stats-grid .stat-card:hover {
  filter: brightness(1.09);
}
.layout[data-app-theme="dark"] .staff-mobile-home .staff-home-hero {
  background: linear-gradient(125deg, #1756ad, #0d79a6 60%, #049784);
}
.layout[data-app-theme="dark"] .staff-mobile-home .staff-home-shortcuts {
  background: #12243b;
  border-color: var(--rwa-line);
  box-shadow: 0 10px 25px #06112660;
}
.layout[data-app-theme="dark"] .staff-mobile-home .staff-home-shortcuts-heading h3 {
  color: #f1f5ff;
}
.layout[data-app-theme="dark"] .staff-mobile-home .staff-home-shortcuts-heading > span {
  color: #a6bbd9;
}
.layout[data-app-theme="dark"] .staff-mobile-home .staff-home-menu-item {
  color: #d4e5ff;
}
.layout[data-app-theme="dark"] .staff-mobile-home .staff-home-menu-icon,
.layout[data-app-theme="dark"]
  .staff-mobile-home
  .staff-home-menu-item:nth-child(3n + 2)
  .staff-home-menu-icon,
.layout[data-app-theme="dark"]
  .staff-mobile-home
  .staff-home-menu-item:nth-child(3n)
  .staff-home-menu-icon {
  background: #1c3657;
  border: 1px solid #324e70;
  color: #a7d5ff;
}
.layout[data-app-theme="dark"] .staff-mobile-home .staff-home-menu-primary .staff-home-menu-icon {
  background: linear-gradient(130deg, #08c9a1, #0b7ff0) !important;
  color: #fff !important;
  border-color: #378dc0;
}
@media (max-width: 700px) {
  .layout[data-app-theme="dark"] {
    background: #081426 !important;
  }
  .layout[data-app-theme="dark"] .staff-mobile-home .content {
    background: #081426 !important;
  }
  .layout[data-app-theme="dark"] .sidebar.mobile-drawer {
    background: #0e2038;
  }
  .layout[data-app-theme="dark"] .mobile-bottom-nav {
    background: #102039;
    border-color: #2b4262;
    box-shadow: 0 -9px 32px #01081788;
  }
  .layout[data-app-theme="dark"] .mobile-bottom-item {
    color: #9eb5d2;
  }
  .layout[data-app-theme="dark"] .mobile-bottom-item.active,
  .layout[data-app-theme="dark"] .mobile-bottom-item:nth-child(2).active,
  .layout[data-app-theme="dark"] .mobile-bottom-item:nth-child(3).active,
  .layout[data-app-theme="dark"] .mobile-bottom-item:nth-child(4).active {
    background: #1c3d66;
    color: #7dbbff;
  }
  .layout[data-app-theme="dark"] .mobile-bottom-item:hover {
    background: #1a3454;
  }
  .layout[data-app-theme="dark"] .mobile-bottom-nav .mobile-bottom-fab,
  .layout[data-app-theme="dark"] .mobile-bottom-nav .mobile-bottom-fab.active {
    background: transparent;
  }
  .layout[data-app-theme="dark"] .mobile-bottom-fab-circle {
    background: linear-gradient(145deg, #0acfa4, #167eff);
    border-color: #102039;
    color: white;
  }
  .layout[data-app-theme="dark"] .mobile-bottom-nav .mobile-bottom-fab-label {
    color: #a5e5ff;
  }
  .layout[data-app-theme="dark"] .dashboard-stats-grid .stat-card,
  .layout[data-app-theme="dark"] .staff-mobile-home .dashboard-stats-grid .stat-card:nth-child(2n) {
    border: 1px solid #ffffff29;
    background: linear-gradient(145deg, #267bf4, #1455d5);
  }
  .layout[data-app-theme="dark"] .dashboard-stats-grid .stat-card:nth-child(3n + 2),
  .layout[data-app-theme="dark"]
    .staff-mobile-home
    .dashboard-stats-grid
    .stat-card:nth-child(3n + 2) {
    background: linear-gradient(135deg, #0abb97, #038c79);
  }
  .layout[data-app-theme="dark"] .dashboard-stats-grid .stat-card:nth-child(3n) {
    background: linear-gradient(135deg, #9751f5, #692bd3);
  }
  .layout[data-app-theme="dark"]
    .dashboard-stat-section
    + .dashboard-stat-section
    .stat-card:nth-child(3n + 1) {
    background: linear-gradient(135deg, #ffac26, #df7205);
  }
  .layout[data-app-theme="dark"] .form-panel .form-actions {
    background: #13243d;
  }
}
@media (max-width: 700px) {
  .layout[data-app-theme="dark"] .mobile-menu-btn {
    border-color: #324b6a;
    background: #142b47;
    color: #dceaff;
    box-shadow: 0 2px 8px #020b18aa;
  }
}
.layout[data-app-theme="dark"] .rwa-theme-select-wrap {
  color: #dbe9f4;
}
.layout[data-app-theme="dark"] .rwa-theme-select {
  background: #1e344e;
  color: #f4f8fc;
  border-color: #4b6682;
}
.layout[data-app-theme="dark"]:has(.dashboard-period-toolbar)
  .staff-mobile-home
  .staff-home-menu-item {
  background: #1e3851;
  color: #edf7f2;
}
.layout[data-app-theme="dark"]:has(.dashboard-period-toolbar)
  .staff-mobile-home
  .staff-home-cluster-logo {
  background: #fffaf0;
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]):has(.dashboard-period-toolbar)
  .staff-mobile-home
  .staff-home-cluster-logo {
  background: transparent;
  filter: brightness(0) invert(1) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.5))
    drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.5));
}

.layout[data-app-theme] .rwa-theme-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.layout[data-app-theme] .rwa-theme-select {
  min-height: 40px;
  max-width: 105px;
  padding: 7px 25px 7px 9px;
  border: 1px solid #d3ded7;
  border-radius: 11px;
  background: #fffaf1;
  color: #31594a;
  font: inherit;
  cursor: pointer;
}
.layout[data-app-theme] .rwa-theme-select:focus-visible {
  outline: 3px solid #397867;
  outline-offset: 2px;
}
.layout[data-app-theme="pastel"] {
  --app-dialog: #fffaf1;
  --app-dialog-text: #40362d;
  --app-input: #fffdf8;
  --app-line: #d8c7b4;
}
.layout[data-app-theme="light"] {
  --app-page: #f5f8f9;
  --app-panel: #ffffff;
  --app-panel-alt: #edf5f6;
  --app-text: #172b35;
  --app-muted: #48616d;
  --app-border: #c7d9de;
  --app-sidebar: linear-gradient(160deg, #edf6f7, #d9edf0);
  --app-nav: #214b54;
  --app-active: #ffffff;
  --app-primary: #136b64;
  --app-primary-text: #ffffff;
  --app-dialog: #ffffff;
  --app-dialog-text: #172b35;
  --app-input: #ffffff;
  --app-line: #a8c0c8;
  color-scheme: light;
}
.layout[data-app-theme="dark"] {
  --app-page: #081426;
  --app-panel: #111f36;
  --app-panel-alt: #192c48;
  --app-text: #ebf3ff;
  --app-muted: #adc0d9;
  --app-border: #38506e;
  --app-sidebar: linear-gradient(180deg, #11223b, #0a182d);
  --app-nav: #d7e7fa;
  --app-active: #25436b;
  --app-primary: #57d9b8;
  --app-primary-text: #082a25;
  --app-dialog: #111f36;
  --app-dialog-text: #ebf3ff;
  --app-input: #0d1b30;
  --app-line: #4b6682;
  color-scheme: dark;
}
.layout[data-app-theme="pastel"] {
  color-scheme: light;
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]),
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .main {
  background: var(--app-page);
  color: var(--app-text);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .content {
  background: transparent;
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .topbar {
  background: var(--app-panel) !important;
  color: var(--app-text);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  .topbar
  :is(h2, .eyebrow, .top-right) {
  color: var(--app-text);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .sidebar,
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .sidebar.mobile-drawer {
  background: var(--app-sidebar);
  color: var(--app-nav);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  .sidebar
  :is(
    .brand b,
    .brand small,
    .nav-label,
    .nav-item,
    .user-meta b,
    .user-meta small,
    .icon-btn,
    .mobile-drawer-close
  ) {
  color: var(--app-nav);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .sidebar .nav-item:hover,
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .sidebar .nav-item:focus-visible,
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .sidebar .nav-item.active {
  background: var(--app-active);
  color: var(--app-nav);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  .sidebar
  :is(.brand, .user-card, .sidebar-bottom) {
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  .sidebar
  :is(.avatar, .icon-btn, .mobile-drawer-close) {
  background: var(--app-panel-alt);
  color: var(--app-text);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  :is(
    .panel,
    .form-panel,
    .analytics-panel,
    .account-stat-card,
    .analytics-stat,
    .review-summary,
    .analytics-modal,
    .modal,
    .dialog,
    .dashboard-tab-panel,
    .dashboard-progress-panel,
    .dashboard-period-toolbar,
    .dashboard-picker-popover,
    .dashboard-tabs,
    .account-tabs,
    .user-card
  ) {
  background: var(--app-panel);
  color: var(--app-text);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  :is(
    .page-heading h1,
    .panel-head h2,
    .panel-head h3,
    .dashboard-section-title,
    .dashboard-progress-heading h3,
    .analytics-modal h2,
    .analytics-stat strong,
    .account-stat-card strong
  ) {
  color: var(--app-text);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  :is(
    .page-heading p,
    .panel-head p,
    .cell-sub,
    .muted,
    .analytics-muted,
    .stat-hint,
    .chart-unit,
    .empty,
    .dashboard-empty-value,
    .dashboard-no-data-note
  ) {
  color: var(--app-muted);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  :is(.panel-head, .form-actions, .analytics-modal-head) {
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  :is(input, select, textarea, .search-box) {
  background: var(--app-input);
  color: var(--app-text);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) input::placeholder,
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) textarea::placeholder {
  color: var(--app-muted);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) select option {
  background: var(--app-panel);
  color: var(--app-text);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  :is(
    .btn.secondary,
    .icon-btn,
    .dashboard-tab.active,
    .account-tab.active,
    .dashboard-picker-trigger
  ) {
  background: var(--app-panel-alt);
  color: var(--app-text);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .btn.primary {
  background: var(--app-primary);
  color: var(--app-primary-text);
  border-color: var(--app-primary);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .dashboard-stats-grid .stat-card {
  background: var(--app-panel-alt);
  color: var(--app-text);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  .dashboard-stats-grid
  .stat-card
  :is(.stat-label, .stat-value) {
  color: var(--app-text);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"])
  .dashboard-stats-grid
  .stat-card
  .stat-hint {
  color: var(--app-muted);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .page-heading {
  color: var(--app-text);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) table,
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) td {
  color: var(--app-text);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) th,
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) thead {
  background: var(--app-panel-alt);
  color: var(--app-text);
  border-color: var(--app-border);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) tbody tr:hover,
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) tbody tr:nth-child(even) {
  background: var(--app-panel-alt);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .dashboard-progress-track,
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .bar-track {
  background: var(--app-panel-alt);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .rwa-theme-select-wrap {
  color: var(--app-text);
}
.layout:is([data-app-theme="light"], [data-app-theme="dark"]) .rwa-theme-select {
  background: var(--app-input);
  color: var(--app-text);
  border-color: var(--app-border);
}

/* Modal and inputs must follow the chosen panel theme, including Pastel. */
.layout[data-app-theme] .tl-modal {
  background: var(--app-dialog);
  color: var(--app-dialog-text);
  border: 1px solid var(--app-line);
}
.layout[data-app-theme] .tl-modal h2 {
  color: var(--app-dialog-text);
}
.layout[data-app-theme] .tl-field {
  color: var(--app-dialog-text);
}
.layout[data-app-theme] .tl-field :is(input, textarea) {
  background: var(--app-input);
  color: var(--app-dialog-text);
  border-color: var(--app-line);
}
.layout[data-app-theme="dark"] .alert.error {
  background: #3e2029;
  color: #ffd5d9;
  border-color: #a85665;
}
.layout[data-app-theme="dark"] :is(.alert.success, .alert.info) {
  background: #123d3a;
  color: #c9f6e8;
  border-color: #3d8375;
}
.layout[data-app-theme="dark"] .badge.rejected {
  background: #542533;
  color: #ffe3e6;
}
.layout[data-app-theme="dark"] .badge.approved {
  background: #17493b;
  color: #d3fae8;
}
@media (max-width: 700px) {
  .layout[data-app-theme] .top-right {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .layout[data-app-theme] .rwa-theme-select-wrap {
    gap: 3px;
    font-size: 11px;
  }
  .layout[data-app-theme] .rwa-theme-select {
    min-height: 36px;
    max-width: 88px;
    padding-left: 6px;
  }
}

/* v1.11: hide only the header logout control on the existing mobile breakpoint. */
@media (max-width: 700px) {
  .layout .topbar .mobile-logout {
    display: none !important;
  }
}