/* Shared appearance layer: Electron, browser/PWA and Android use this file. */
.theme-settings .q-btn-toggle {
  flex-wrap: wrap;
  gap: 6px;
  box-shadow: none;
}
.theme-settings .q-btn {
  border: 1px solid var(--border);
}
.auth-theme {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
html.app-light {
  color-scheme: light;
}
html.app-dark {
  color-scheme: dark;
}
body.app-dark {
  background: var(--bg);
  color: var(--text);
}
html.app-dark,
body.app-dark {
  /* Quasar writes brand variables inline; these theme values must take precedence. */
  --bg: #101a16;
  --panel: #18251e;
  --panel2: #24372d;
  --card: #1c2c23;
  --border: #52685a;
  --text: #edf4ef;
  --muted: #b2c3b8;
  --accent: #79dba3;
  --primary: #79dba3;
  --q-primary: #79dba3 !important;
  --q-secondary: #79dba3 !important;
  --q-accent: #79dba3 !important;
  --q-positive: #81dfa7 !important;
  --q-negative: #ff9ca8 !important;
  --q-warning: #f6cd7c !important;
  --q-info: #98c9ef !important;
  --q-dark: #18251e !important;
  --q-dark-page: #101a16 !important;
  --topbar-bg: #18251e;
  --topbar-text: var(--text);
  --topbar-muted: var(--muted);
  --slot: var(--panel);
  --slot-hover: #2c4235;
  --input-bg: #142019;
  --input-bg-focus: #1c2c23;
  --ui-bg: var(--bg);
  --ui-surface: var(--panel);
  --ui-surface-muted: var(--panel2);
  --ui-card: var(--card);
  --ui-field: var(--input-bg);
  --ui-border: var(--border);
  --ui-text: var(--text);
  --ui-muted: var(--muted);
  --ui-accent: var(--accent);
  --ui-accent-soft: #243d2f;
  --ui-success-soft: #203d2c;
  --ui-warning-soft: #3c3221;
  --ui-danger-soft: #422b30;
  --hint-bg: var(--ui-accent-soft);
  --hint-border: var(--border);
  --brand-green-soft: var(--ui-accent-soft);
  --brand-green-strong: var(--accent);
  --brand-paper: var(--panel);
  --line: var(--border);
}
.app-dark
  :is(
    .sidebar,
    .kpi,
    .panel,
    .work-card,
    .mobile-nav,
    .native-mobile .mobile-nav,
    .q-card,
    .q-menu,
    .q-table__container,
    .q-table__top,
    .q-table__bottom,
    .mobile-task-item,
    .mobile-expense-item
  ) {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}
.app-dark
  :is(
    .brand small,
    .sidebar-footer,
    .topbar-sub,
    .q-field__label,
    .q-field__marginal,
    .q-field__bottom,
    .q-checkbox__inner,
    .q-radio__inner,
    .q-table th,
    .expense-breakdown-note,
    .calendar-undated
  ) {
  color: var(--muted);
}
.app-dark
  :is(
    .nav-item:hover,
    .notification-item:hover,
    .notification-item:focus-visible
  ) {
  background: var(--slot-hover);
}
.app-dark .nav-item.active {
  background: var(--accent);
  color: #102019;
}
.app-dark
  :is(
    .kanban-column,
    .fact,
    .gantt-track,
    .donut,
    .web-onboarding-option,
    .attachment-picked,
    .calendar-header,
    .batch-grid-head,
    .receipt-lines-head
  ) {
  background: var(--panel2);
}
.app-dark .web-onboarding-option > .q-icon {
  background: var(--ui-accent-soft);
}
.app-dark :is(.note, .brand-tint) {
  background: var(--ui-accent-soft);
  color: var(--text);
}
.app-dark .note {
  border-left-color: var(--accent);
}
.app-dark .notice {
  background: var(--ui-warning-soft);
  color: var(--q-warning);
  border-color: var(--border);
}
.app-dark .timeline-item {
  border-color: var(--border);
}
.app-dark .positive {
  color: var(--q-positive);
}
.app-dark
  :is(.expense-breakdown-row small, .expense-void .expense-card-heading) {
  color: var(--muted);
}
.app-dark .receipt-line-warning {
  color: var(--q-warning);
}
.app-dark .topbar-profile:hover {
  background: var(--slot-hover);
}
.app-dark .negative {
  color: var(--q-negative);
}
.app-dark .badge {
  color: var(--accent);
  background: var(--ui-accent-soft);
}
.app-dark .badge:is(.done, .approved, .paid, .advance) {
  color: var(--q-positive);
  background: var(--ui-success-soft);
}
.app-dark .badge:is(.waiting, .moderation, .acceptance, .due_soon) {
  color: var(--q-warning);
  background: var(--ui-warning-soft);
}
.app-dark .badge:is(.rejected, .cancelled, .overdue, .long_overdue) {
  color: var(--q-negative);
  background: var(--ui-danger-soft);
}
.app-dark .badge.due {
  color: var(--muted);
  background: var(--panel2);
}
/* Quasar semantic fills need dark ink; links and outlined buttons keep light accents. */
.app-dark
  .q-btn:is(.bg-primary, .bg-positive, .bg-negative, .bg-warning, .bg-info),
.app-dark
  .q-badge:is(.bg-primary, .bg-positive, .bg-negative, .bg-warning, .bg-info),
.app-dark
  .q-notification:is(.bg-positive, .bg-negative, .bg-warning, .bg-info) {
  color: #102019 !important;
}
.app-dark .q-btn.bg-white {
  background: var(--panel2) !important;
  color: var(--text) !important;
}
.app-dark .q-field__native,
.app-dark .q-field__input {
  color: var(--text);
}
.app-dark .q-field__control {
  background: var(--input-bg);
}
.app-dark .q-field--focused .q-field__control {
  background: var(--input-bg-focus);
}
.app-dark .q-field--outlined .q-field__control:before {
  border-color: var(--border);
}
.app-dark .q-field--outlined.q-field--highlighted .q-field__control:after {
  border-color: currentColor;
}
.app-dark .q-field--error :is(.q-field__bottom, .q-field__label) {
  color: var(--q-negative);
}
.app-dark input::placeholder,
.app-dark textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.app-dark input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--input-bg) inset;
  caret-color: var(--text);
}
.app-dark .q-checkbox__inner--truthy,
.app-dark .q-radio__inner--truthy {
  color: var(--accent);
}
.app-dark .q-checkbox__svg {
  color: #102019;
}
.app-dark :is(.q-separator, .q-table td, .q-table th) {
  border-color: var(--border);
}
.app-dark .q-separator {
  background: var(--border);
}
.app-dark .q-table tbody tr:nth-child(even) td {
  background: var(--card);
}
.app-dark .q-table tbody tr:hover td {
  background: var(--slot-hover);
}
.app-dark .q-table thead th {
  background: var(--panel2);
}
.app-dark
  :is(
    .tasks-table .q-table tbody td:first-child,
    .members-table .q-table tbody td:last-child
  ) {
  background: var(--panel);
}
.app-dark .q-menu {
  border: 1px solid var(--border);
}
.app-dark .q-item--active {
  color: var(--accent);
  background: var(--ui-accent-soft);
}
.app-dark .q-tooltip {
  background: #dce9e1;
  color: #102019;
}
.app-dark .q-dialog__backdrop {
  background: rgb(0 0 0 / 65%);
}
.app-dark .q-dialog .q-card {
  border: 1px solid var(--border);
}
.app-dark :is(.q-date, .q-time) {
  background: var(--panel);
  color: var(--text);
}
.app-dark :is(.q-date__header, .q-time__header) {
  background: var(--panel2);
  color: var(--text);
}
.app-dark .calendar-label {
  background: var(--panel);
}
.app-dark .calendar-header .calendar-label {
  background: var(--panel2);
}
.app-dark .calendar-lane {
  background: var(--panel);
}
.app-dark .calendar-row:nth-child(odd) .calendar-lane {
  background: var(--card);
}
.app-dark .calendar-gridline {
  border-color: var(--border);
}
.app-dark .calendar-today {
  border-color: var(--accent);
}
.app-dark .calendar-sheet .gantt-bar {
  background: #dc9b57;
}
.app-dark .plan-key {
  background: #dc9b57;
}
.app-dark .progress-key {
  background: #72cd98;
}
.app-dark :is(.gantt-progress, .gantt-bar.done) {
  background: #72cd98;
}
.app-dark :is(.calendar-bar-button, .calendar-percent, .task-progress-value) {
  color: #102019;
  text-shadow: none;
}
.app-dark :is(.task-name-done, .task-completed .task-name) {
  color: #a1b2a7;
}
.app-dark .badge.cancelled {
  opacity: 1;
}
.app-dark :is(.calendar-scroll, .q-table__middle, .batch-grid) {
  scrollbar-color: #678574 var(--bg);
}
.app-dark .calendar-scroll::-webkit-scrollbar-track {
  background: var(--bg);
}
.app-dark .calendar-scroll::-webkit-scrollbar-thumb {
  background: #678574;
  border-color: var(--bg);
}
.app-dark :is(button, a, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.app-dark :is(.discussion-message-card, .discussion-draft) {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
.app-dark .discussion-message-card--own {
  background: var(--ui-accent-soft);
}
.app-dark :is(.text-grey-5, .text-grey-6, .text-grey-7, .text-grey-8) {
  color: var(--muted) !important;
}
/* QR codes and document/image previews retain their original colours. */
.app-dark .qr {
  background: white;
}
@media print {
  html.app-dark,
  body.app-dark {
    color-scheme: light;
    background: white;
    color: black;
  }
  .app-dark :is(.panel, .q-table__container, .q-table td, .q-table th) {
    background: white;
    color: black;
  }
}