/* TickTack dark theme — scoped with html.dark-mode (toggle in App settings) */

html.dark-mode {
    color-scheme: dark;
}

/* ── Base & auth ────────────────────────────────────────── */
html.dark-mode body {
    background: #0d0f14;
    color: #e8eaf0;
}

html.dark-mode .login-overlay {
    background: #0d0f14;
}

html.dark-mode .login-tagline {
    color: #6ea8ff;
}

html.dark-mode .login-logo {
    filter: brightness(0) invert(1) opacity(0.93);
}

html.dark-mode .login-split-line {
    background: rgba(255, 255, 255, 0.1);
}

html.dark-mode .login-card {
    background: #171a22;
    box-shadow: 0 14px 48px rgba(0, 0, 0, 0.55);
}

html.dark-mode .login-tab.active {
    color: #f1f5f9;
}

html.dark-mode .login-tab:not(.active) {
    color: #576071;
}

html.dark-mode .login-tab:not(.active):hover {
    color: #9ca3af;
}

html.dark-mode .login-input {
    color: #e8eaf0;
    background: #252a36;
}

html.dark-mode .login-input:focus {
    background: #2c3240;
}

html.dark-mode .login-divider::before,
html.dark-mode .login-divider::after {
    background: rgba(255, 255, 255, 0.08);
}

html.dark-mode .login-divider span {
    color: #8792a8;
}

html.dark-mode .onboarding-back-btn {
    color: #9ca3af;
}

html.dark-mode .onboarding-back-btn:hover {
    color: #f1f5f9;
}

html.dark-mode .onboarding-title {
    color: #f1f5f9;
}

html.dark-mode .onboarding-subtitle {
    color: #8792a8;
}

html.dark-mode .onboarding-field {
    background: #252a36;
}

html.dark-mode .onboarding-label {
    color: #9ca3af;
}

html.dark-mode .onboarding-input {
    color: #e8eaf0;
}

html.dark-mode .onboarding-skip-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: transparent;
    color: #aeb7c9;
}

html.dark-mode .onboarding-skip-btn:hover {
    border-color: rgba(255, 255, 255, 0.22);
    color: #e8eaf0;
}

html.dark-mode .login-submit-btn,
html.dark-mode .login-submit-btn:hover,
html.dark-mode .login-google-btn,
html.dark-mode .login-google-btn:hover,
html.dark-mode .login-google-btn span {
    color: #ffffff;
}

html.dark-mode .login-google-btn i {
    color: #ea4335;
}

html.dark-mode .login-apple-btn,
html.dark-mode .login-apple-btn:hover {
    color: #ffffff;
}

html.dark-mode .onboarding-next-btn,
html.dark-mode .onboarding-next-btn:hover {
    color: #ffffff;
}

/* ── App shell ──────────────────────────────────────────── */
html.dark-mode .app-container,
html.dark-mode .main-content {
    background: #0d0f14;
}

html.dark-mode .column-resizer::before {
    background: rgba(255, 255, 255, 0.1);
}

html.dark-mode .card {
    background: #171a22;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

html.dark-mode .sidebar,
html.dark-mode .invoice-panel,
html.dark-mode .settings-view {
    background: #0d0f14;
}

html.dark-mode .sidebar-label {
    color: #8b93a8;
}

html.dark-mode .app-logo {
    filter: brightness(0) invert(1) opacity(0.93);
}

/* Dark “glass rim” Tailwind helpers (neutral-50 rim → subtle light edge on charcoal) */
html.dark-mode .gradient-border-from-neutral-50 {
    --gradient-border-from: oklch(42% 0.02 258);
}

html.dark-mode .gradient-border-via-neutral-50 {
    --gradient-border-via: oklch(36% 0.02 258);
}

html.dark-mode .gradient-border-to-neutral-50 {
    --gradient-border-to: oklch(30% 0.02 258);
}

html.dark-mode .gradient-border-from-neutral-900 {
    --gradient-border-from: oklch(78% 0.02 258);
}

html.dark-mode .gradient-border-via-neutral-600 {
    --gradient-border-via: oklch(65% 0.02 258);
}

html.dark-mode .gradient-border-to-neutral-800 {
    --gradient-border-to: oklch(58% 0.02 258);
}

html.dark-mode .sidebar-month-picker.gradient-border {
    --gradient-border-angle: 180deg;
    --gradient-border-from: rgb(255 255 255 / 0.2);
    --gradient-border-via: rgb(255 255 255 / 0.08);
    --gradient-border-to: rgb(0 75 170 / 0.24);
    background-color: #007bff;
    background-image: linear-gradient(180deg, #2f93ff 0%, #007bff 48%, #006edc 100%);
}

html.dark-mode .sidebar-month-picker.gradient-border:hover {
    --gradient-border-from: rgb(255 255 255 / 0.26);
    --gradient-border-via: rgb(255 255 255 / 0.1);
    --gradient-border-to: rgb(0 75 170 / 0.18);
    background-color: #007bff;
    background-image: linear-gradient(180deg, #42a0ff 0%, #007bff 45%, #0070e6 100%);
    color: #fff;
    filter: brightness(1.06);
}

html.dark-mode .sidebar-month-picker.gradient-border:active {
    --gradient-border-from: rgb(255 255 255 / 0.12);
    --gradient-border-via: rgb(255 255 255 / 0.05);
    --gradient-border-to: rgb(0 45 110 / 0.32);
    background-image: linear-gradient(180deg, #007bff 0%, #0068d9 45%, #005bb5 100%);
    filter: brightness(0.96);
}

html.dark-mode .sidebar-month-picker.gradient-border:focus-within {
    outline-color: #007bff;
}

html.dark-mode .sidebar-month-label {
    color: #fff;
}

html.dark-mode .sidebar-month-nav-label {
    color: rgb(255 255 255 / 0.6);
}

html.dark-mode .sidebar-month-nav:hover {
    background: rgba(255, 255, 255, 0.1);
}

html.dark-mode .customers-head button,
html.dark-mode .latest-invoices-head button {
    color: #6ea8ff;
}

html.dark-mode .latest-invoices-head h3 {
    color: #8b93a8;
}

html.dark-mode .latest-invoice-card {
    border-color: rgba(147, 197, 253, 0.18);
}

html.dark-mode .latest-invoice-date,
html.dark-mode .latest-invoice-project,
html.dark-mode .latest-invoice-amount {
    color: #aeb7c9;
}

html.dark-mode .latest-invoice-action {
    color: #e8eaf0;
}

html.dark-mode .customer-item {
    background: #1a1d26;
    color: #ebeff7;
}

html.dark-mode .customer-item.selected {
    background: linear-gradient(180deg, #201e25 0%, #323137 100%);
    background-color: #201e25;
    color: #f3f4f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html.dark-mode .customer-item.selected .amount,
html.dark-mode .customer-item.selected .customer-name {
    color: #f3f4f6;
}

html.dark-mode .customer-item.gradient-border:not(.selected) {
    --gradient-border-angle: 180deg;
    background-color: #22262f;
    background-image: linear-gradient(180deg, #262b36 0%, #1c2030 100%);
}

html.dark-mode .customer-item.gradient-border:not(.selected):hover {
    background-color: #2a2f3a;
    background-image: linear-gradient(180deg, #2f3542 0%, #232832 100%);
    color: #f8fafc;
}

html.dark-mode .customer-item.gradient-border:not(.selected):active {
    background-image: linear-gradient(180deg, #252a34 0%, #1b1f29 100%);
}

html.dark-mode .customer-item .amount {
    color: #c4cddc;
}

html.dark-mode .customer-item.gradient-border:focus-visible {
    outline-color: #6ea8ff;
}

html.dark-mode .customer-archive-hover-btn {
    color: #7b8499;
}

html.dark-mode .customer-archive-hover-btn:hover {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
}

html.dark-mode .customer-emoji-hover-btn {
    color: #7b8499;
}

html.dark-mode .customer-emoji-hover-btn:hover {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.15);
}

html.dark-mode .project-settings-icon {
    color: #7b8499;
}

html.dark-mode .project-settings-icon:hover {
    color: #c4cddc;
    background: rgba(255, 255, 255, 0.06);
}

html.dark-mode .customer-item.archived {
    background: #151820;
}

html.dark-mode .customer-item.selected.archived {
    background: linear-gradient(180deg, #201e25 0%, #323137 100%);
    background-color: #201e25;
    color: #f3f4f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html.dark-mode .center-panel {
    color: inherit;
}

html.dark-mode .header {
    color: #aeb7c9;
}

html.dark-mode .header .dropdown {
    color: #f1f5f9;
}

html.dark-mode .month-dropdown-menu {
    background: #1c1f29;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

html.dark-mode .month-picker-header span {
    color: #f1f5f9;
}

html.dark-mode .month-picker-year-btn {
    color: #c4cddc;
}

html.dark-mode .month-picker-year-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

html.dark-mode .month-cell {
    color: #c4cddc;
}

html.dark-mode .month-cell:hover {
    background: rgba(255, 255, 255, 0.08);
}

html.dark-mode .month-cell.current-month {
    background: #e8eaf0;
    color: #111827;
}

html.dark-mode .month-cell.current-month:hover {
    background: #f1f5f9;
}

/* Tasks & invoices (center) */
html.dark-mode #center-invoices-view .settings-topbar-label {
    color: #f1f5f9;
}

html.dark-mode .invoice-overview {
    background: #171a23;
}

html.dark-mode .invoice-overview-divider {
    background: rgba(255, 255, 255, 0.08);
}

html.dark-mode .invoice-overview-label {
    color: #8b93a8;
}

html.dark-mode .invoice-overview-amount {
    color: #7eb0ff;
}

html.dark-mode .overview-arrow {
    color: #7b8499;
}

html.dark-mode .overview-arrow:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.08);
}

html.dark-mode .center-invoice-month {
    color: #aeb7c9;
}

html.dark-mode .center-invoice-card.gradient-border {
    background-color: #22262f;
    background-image: linear-gradient(320deg, #262b36 0%, #22262f 48%, #1c2030 100%);
}

html.dark-mode .center-invoice-heading {
    color: #9ca8bc;
}

html.dark-mode .center-invoice-heading strong {
    color: #f1f5f9;
}

html.dark-mode .center-invoice-amount,
html.dark-mode .center-invoice-for {
    color: #f1f5f9;
}

html.dark-mode .center-invoice-action {
    color: #e8eaf0;
}

html.dark-mode .tasks-empty-state,
html.dark-mode .tasks-empty-text {
    color: #8b93a8;
}

html.dark-mode .task-item {
    background: #171a23;
}

html.dark-mode .task-item.gradient-border,
html.dark-mode .invoice-details.card.gradient-border {
    background-color: #22262f;
    background-image: linear-gradient(320deg, #262b36 0%, #22262f 48%, #1c2030 100%);
}

html.dark-mode .task-item.task-locked.gradient-border {
    background-color: #1a1e28;
    background-image: linear-gradient(320deg, #1f232f 0%, #1a1e28 52%, #171a23 100%);
}

html.dark-mode .task-item.task-locked {
    background: #161920;
    color: #697386;
}

html.dark-mode .task-item.task-locked .task-note-divider {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .task-mobile-swipe-track > .task-toolbar {
    background: linear-gradient(90deg, rgba(34, 38, 47, 0) 0%, #22262f 18%);
}

html.dark-mode .customer-item .task-mobile-swipe-track > .task-toolbar {
    background: transparent;
}

html.dark-mode .latest-invoice-card .task-mobile-swipe-track > .task-toolbar {
    background: transparent;
}

html.dark-mode .task-done-indicator {
    color: rgba(139, 147, 168, 0.42);
}

html.dark-mode .task-done-indicator:not(.task-done-indicator--filled):hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(167, 174, 192, 0.72);
}

html.dark-mode .task-done-indicator:not(.task-done-indicator--filled):focus-visible {
    color: rgba(182, 189, 207, 0.85);
}

html.dark-mode .task-done-indicator.task-done-indicator--filled {
    color: #4ade80;
}

html.dark-mode .task-done-indicator.task-done-indicator--filled:hover {
    background: rgba(74, 222, 128, 0.12);
    color: #86efac;
}

html.dark-mode .task-done-firework-core {
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(254, 249, 195, 0.92) 16%,
        rgba(250, 204, 21, 0.68) 34%,
        rgba(74, 222, 128, 0.52) 56%,
        rgba(34, 197, 94, 0.2) 74%,
        transparent 82%
    );
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.85)) drop-shadow(0 0 18px rgba(74, 222, 128, 0.55));
}

html.dark-mode .task-done-firework-particle {
    box-shadow:
        0 0 12px rgba(250, 204, 21, 0.88),
        0 0 8px rgba(255, 251, 235, 0.45),
        0 0 18px rgba(74, 222, 128, 0.62);
}

html.dark-mode .task-tool-btn {
    color: #e8eaf0;
}

html.dark-mode .task-tool-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

html.dark-mode .task-tool-btn.task-tool-delete:hover {
    color: #fb7185;
    background: rgba(251, 113, 133, 0.12);
}

html.dark-mode .task-tool-delete.task-delete-armed,
html.dark-mode .task-tool-delete.task-delete-armed:hover {
    background: rgba(251, 113, 133, 0.12);
}

html.dark-mode .task-tool-next-month.task-next-month-armed:hover {
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.15);
}

html.dark-mode .task-name-input {
    color: #f1f5f9;
}

html.dark-mode .task-details .task-meta {
    color: #e8eaf0;
}

html.dark-mode .task-wage {
    color: #7eb0ff;
}

html.dark-mode .task-time:hover,
html.dark-mode .task-amount:hover {
    color: #fff;
}

html.dark-mode .task-meta-inline-input {
    border-color: rgba(255, 255, 255, 0.14);
}

html.dark-mode .task-note-divider {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html.dark-mode .task-note-label {
    color: #7b8499;
}

html.dark-mode .task-subtasks-collapse-toggle {
    color: #7b8499;
}

html.dark-mode .task-subtasks-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #b8c0d4;
}

html.dark-mode .task-note-input,
html.dark-mode .task-subtask-name-input {
    color: #c4cddc;
}

html.dark-mode .task-note-input::placeholder {
    color: #5c6578;
}

html.dark-mode .task-invoiced-badge {
    color: #8792a8;
}

html.dark-mode .task-add-btn {
    color: #ffffff;
}

html.dark-mode .task-add-btn.gradient-border {
    background-color: #22262f;
    background-image: linear-gradient(320deg, #262b36 0%, #22262f 48%, #1c2030 100%);
}

html.dark-mode .task-add-btn.gradient-border:hover {
    background-color: #3d465c;
    background-image: linear-gradient(320deg, #454f68 0%, #3d465c 48%, #363e52 100%);
    color: #ffffff;
    filter: none;
}

html.dark-mode .task-add-btn.gradient-border:active {
    background-color: #2e3442;
    background-image: linear-gradient(320deg, #363d4f 0%, #2e3542 50%, #282e3a 100%);
    color: #ffffff;
}

/* ── Invoice / My info panel ───────────────────────────── */
html.dark-mode .panel-caption {
    color: #8b93a8;
}

html.dark-mode .mobile-my-information-close-btn:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
}

html.dark-mode .invoice-details {
    background: #171a23;
}

html.dark-mode #supplier-name-card .row::after {
    color: #6ea8ff;
}

html.dark-mode .invoice-details .row span:first-child {
    color: #f1f5f9;
}

html.dark-mode .invoice-panel .invoice-details .row:not(.total-row) > span:first-child {
    color: #aeb7c9;
}

html.dark-mode .invoice-details .row span:last-child {
    color: #e8eaf0;
}

html.dark-mode .invoice-details .row:not(.total-row) span {
    color: #aeb7c9;
}

html.dark-mode .invoice-number-input,
html.dark-mode .invoice-details .row select {
    color: #aeb7c9;
    background: transparent;
}

html.dark-mode #invoice-details-card .invoice-due-days-row #invoice-due-days-select.invoice-due-days-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #aeb7c9 !important;
    box-shadow: none !important;
}

html.dark-mode select option {
    background: #22262f;
    color: #e8eaf0;
}

html.dark-mode .btn.btn-gradient-primary.gradient-border {
    filter: brightness(1.12) saturate(1.04);
    color: #ffffff;
}

html.dark-mode .btn.btn-gradient-primary.gradient-border *,
html.dark-mode .btn.btn-gradient-primary.gradient-border i {
    color: #ffffff;
}

html.dark-mode .panel-settings-btn {
    color: #aeb7c9;
}

html.dark-mode .invoice-divider {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html.dark-mode .invoice-details .total-row span {
    color: #f1f5f9;
}

html.dark-mode #total-display,
html.dark-mode .invoice-details .total {
    color: #7eb0ff;
}

html.dark-mode .right-settings-row {
    background: #1c202a;
    color: #aeb7c9;
}

html.dark-mode .right-settings-row input,
html.dark-mode .right-settings-row textarea {
    color: #f1f5f9;
}

html.dark-mode .supplier-display-email {
    color: #9ca8bc;
}

html.dark-mode .bank-card {
    background: #1c202a;
}

html.dark-mode .bank-title {
    color: #aeb7c9;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .bank-row {
    color: #9ca8bc;
}

html.dark-mode .bank-row input {
    color: #f1f5f9;
}

html.dark-mode .settings-customer-row {
    background: #1c202a;
    color: #aeb7c9;
}

html.dark-mode .settings-customer-row input,
html.dark-mode .settings-customer-row textarea {
    color: #f1f5f9;
}

html.dark-mode .settings-section-title {
    color: #f1f5f9;
}

html.dark-mode .settings-topbar-label {
    color: #aeb7c9;
}

html.dark-mode .settings-project-pill {
    color: #f8fafc;
}

html.dark-mode .archived-customers-toggle {
    color: #7b8499;
}

html.dark-mode .archived-customers-toggle:hover {
    color: #c4cddc;
}

html.dark-mode .archived-count {
    background: rgba(255, 255, 255, 0.1);
    color: #c4cddc;
}

html.dark-mode .inline-form input,
html.dark-mode .form-grid input,
html.dark-mode .form-grid select {
    border-color: rgba(255, 255, 255, 0.12);
    background: #252a36;
    color: #e8eaf0;
}

html.dark-mode .settings-inline-row {
    color: #e8eaf0;
}

html.dark-mode .settings-inline-row input,
html.dark-mode .settings-inline-row select {
    border-color: rgba(255, 255, 255, 0.12);
    background: #252a36;
    color: #e8eaf0;
}

/* Solid `.btn`: dark chip + white label */
html.dark-mode .btn:not(.btn-gradient-primary):not(.ghost) {
    background: #2a3244;
    color: #ffffff;
}

html.dark-mode .btn:not(.btn-gradient-primary):not(.ghost):hover {
    background: #394159;
    color: #ffffff;
}

html.dark-mode .btn.danger {
    background: #b91c1c;
    color: #ffffff;
}

html.dark-mode .btn.danger:hover {
    background: #991b1b;
    color: #ffffff;
}

html.dark-mode .btn.active:not(.ghost) {
    color: #ffffff;
}

html.dark-mode .btn.ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

html.dark-mode .btn.ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

html.dark-mode .invoice-item {
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .invoice-meta,
html.dark-mode .empty {
    color: #aeb7c9;
}

html.dark-mode .empty {
    border-color: rgba(255, 255, 255, 0.12);
}

/* Preview modal chrome (canvas stays printable white) */
html.dark-mode .invoice-preview-modal {
    background: #1a1e28;
}

html.dark-mode .invoice-preview-frame-wrap {
    background: #12161e;
}

html.dark-mode #invoice-preview-frame {
    background: #12161e;
}

html.dark-mode .invoice-preview-canvas-wrap {
    background: #12161e;
}

html.dark-mode #invoice-preview-canvas {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* App settings FAB & panel */
html.dark-mode .app-settings-panel {
    background: #1c2030;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6);
}

html.dark-mode .app-settings-panel-header {
    color: #f1f5f9;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .app-settings-close-btn {
    color: #8792a8;
}

html.dark-mode .app-settings-close-btn:hover {
    color: #f1f5f9;
}

html.dark-mode .app-settings-row + .app-settings-row {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .app-settings-row-label {
    color: #f1f5f9;
}

html.dark-mode .app-settings-row-sub {
    color: #8792a8;
}

html.dark-mode .notif-sub-settings {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .notif-sub-settings .app-settings-row-label {
    color: #d1d9e9;
}

html.dark-mode .app-settings-default-wages,
html.dark-mode .account-email-login-section {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .app-settings-wage-code {
    color: #aeb7c9;
}

html.dark-mode .app-settings-wage-input {
    border-color: rgba(255, 255, 255, 0.12);
    background: #252b38;
    color: #f1f5f9;
}

html.dark-mode .link-password-label {
    color: #aeb7c9;
}

html.dark-mode .toggle-slider {
    background: #454d61;
}

html.dark-mode .toggle-slider::before {
    background: #f1f5f9;
}

html.dark-mode .toggle-switch input:checked + .toggle-slider {
    background: #3b82f6;
}

html.dark-mode .settings-fab {
    background: #22262f;
    color: #ffffff;
}

html.dark-mode .settings-fab:hover {
    background: #2a3040;
    color: #ffffff;
}

html.dark-mode .settings-fab.gradient-border {
    background-color: #22262f;
    background-image: linear-gradient(320deg, #262b36 0%, #22262f 48%, #1c2030 100%);
}

html.dark-mode .settings-fab.gradient-border:hover {
    background-color: #303645;
    background-image: linear-gradient(320deg, #383f50 0%, #303645 48%, #282f3d 100%);
    color: #ffffff;
}

html.dark-mode .settings-fab.gradient-border:active {
    background-image: linear-gradient(320deg, #292f3c 0%, #252a36 50%, #1f2530 100%);
    color: #ffffff;
}

html.dark-mode .timer-running-pill {
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.45);
}

html.dark-mode .annul-inactive-pill {
    background: rgba(251, 146, 60, 0.15);
    color: #fdba74;
}

html.dark-mode .annul-inactive-pill:hover {
    background: rgba(251, 146, 60, 0.24);
}

html.dark-mode .toast {
    background: #2563eb;
}

html.dark-mode .toast.warning {
    background: #b45309;
}

html.dark-mode .btn.btn-gradient-primary.gradient-border:focus-visible,
html.dark-mode .btn.btn-primary-accept:focus-visible,
html.dark-mode .customer-item.gradient-border:focus-visible,
html.dark-mode .customer-item.selected:focus-visible,
html.dark-mode .task-add-btn.gradient-border:focus-visible,
html.dark-mode .settings-fab.gradient-border:focus-visible,
html.dark-mode .customer-item.gradient-border:focus-visible,
html.dark-mode .task-item.gradient-border:focus-within {
    outline-color: #6ea8ff;
}

html.dark-mode .btn.btn-primary-accept,
html.dark-mode .btn.btn-primary-accept *,
html.dark-mode .btn.btn-primary-accept i {
    color: #ffffff;
}

@media (max-width: 768px) {
    html.dark-mode .mobile-app-header {
        background: #0d0f14;
    }

    html.dark-mode .mobile-logo-btn,
    html.dark-mode .mobile-menu-btn {
        color: #e8eaf0;
    }

    html.dark-mode .app-container.mobile-layout .latest-invoice-card {
        background: rgba(30, 64, 120, 0.22);
        border-color: rgba(147, 197, 253, 0.22);
    }

    html.dark-mode .mobile-back-btn {
        color: #e8eaf0;
    }

    html.dark-mode .mobile-customer-info-btn {
        color: #e8eaf0;
    }

    html.dark-mode .mobile-customer-title {
        color: #f8fafc;
    }

    html.dark-mode .tasks-section-heading {
        color: #8b93a8;
    }

    html.dark-mode .app-container.mobile-layout.mobile-project-view.mobile-drawer-open .sidebar {
        box-shadow: 4px 0 44px rgba(0, 0, 0, 0.55);
        background: #0d0f14;
    }

    html.dark-mode .mobile-burger-menu {
        background: #0d0f14;
    }

    html.dark-mode .mobile-burger-menu-title {
        color: #f1f5f9;
    }

    html.dark-mode .mobile-burger-menu-close-btn {
        background: #1c2230;
        color: #e8eaf0;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    }

    html.dark-mode .mobile-burger-menu-close-btn:hover {
        background: #252b3a;
        color: #f8fafc;
    }

    html.dark-mode .mobile-burger-menu-items {
        background: #171a23;
        box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
    }

    html.dark-mode .mobile-burger-menu-theme-row {
        border-top-color: rgba(255, 255, 255, 0.06);
    }

    html.dark-mode .mobile-burger-menu-theme-label {
        color: #f1f5f9;
    }

    html.dark-mode .mobile-burger-menu-theme-sub {
        color: #8792a8;
    }

    html.dark-mode .mobile-burger-menu-item {
        border-bottom-color: rgba(255, 255, 255, 0.06);
        color: #f1f5f9;
        background: transparent;
    }

    html.dark-mode .mobile-burger-menu-item:hover,
    html.dark-mode .mobile-burger-menu-item:active {
        background: rgba(255, 255, 255, 0.05);
    }

    html.dark-mode .mobile-burger-menu-item-logout:hover,
    html.dark-mode .mobile-burger-menu-item-logout:active {
        background: rgba(251, 113, 133, 0.12);
    }

    html.dark-mode .mobile-burger-menu-item i {
        color: #9ca8bc;
    }

    html.dark-mode .app-container.mobile-layout.mobile-my-information-open .invoice-panel-my-info-section {
        background: #0d0f14;
    }

    html.dark-mode .app-container.mobile-layout.mobile-project-view .mobile-invoice-roll-toggle {
        background: #1c2230;
        color: #f1f5f9;
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
    }

    html.dark-mode .app-container.mobile-layout.mobile-project-view .mobile-invoice-roll-toggle:active {
        background: #252b3d;
    }

    html.dark-mode .app-container.mobile-layout.mobile-project-view .mobile-invoice-roll-label {
        color: #8b93a8;
    }

    html.dark-mode .app-container.mobile-layout.mobile-project-view .mobile-invoice-roll-chevron {
        color: #9ca8bc;
    }

    html.dark-mode .app-container.mobile-layout.mobile-project-view #total-display,
    html.dark-mode .app-container.mobile-layout.mobile-project-view .invoice-details .total {
        color: #7eb0ff;
    }

    html.dark-mode .mobile-task-context-sheet {
        background: #1a1e29;
        box-shadow: 0 -14px 48px rgba(0, 0, 0, 0.55);
    }

    html.dark-mode .mobile-task-context-item {
        color: #f1f5f9;
    }

    html.dark-mode .mobile-task-context-item:hover,
    html.dark-mode .mobile-task-context-item:active {
        background: rgba(255, 255, 255, 0.06);
    }

    html.dark-mode .mobile-task-context-item-cancel {
        color: #aeb7c9;
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    html.dark-mode .mobile-invoice-details-sheet:not(.hidden) .mobile-invoice-sheet-panel {
        background: #1a1e29;
        box-shadow: 0 -14px 48px rgba(0, 0, 0, 0.55);
    }

    html.dark-mode .mobile-invoice-sheet-title {
        color: #aeb7c9;
    }

    html.dark-mode .app-container.mobile-layout.mobile-project-view:not(.mobile-invoices-view):not(.mobile-my-information-open) .mobile-open-invoice-sheet-btn {
        background: #1c2230;
        color: #f1f5f9;
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
    }

    html.dark-mode .app-container.mobile-layout.mobile-project-view:not(.mobile-invoices-view):not(.mobile-my-information-open) .mobile-open-invoice-sheet-btn:active {
        background: #252b3d;
    }

    html.dark-mode .app-container.mobile-layout.mobile-project-view:not(.mobile-invoices-view):not(.mobile-my-information-open) .mobile-open-invoice-sheet-btn .icon i {
        color: #f1f5f9 !important;
    }
}

html.dark-mode .emoji-tag-picker-dialog {
    background: #1c2030;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

html.dark-mode .emoji-tag-picker-head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .emoji-tag-picker-head span {
    color: #f1f5f9;
}

html.dark-mode .emoji-tag-picker-close-btn {
    color: #8792a8;
}

html.dark-mode .emoji-tag-picker-close-btn:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.08);
}

html.dark-mode .emoji-tag-picker-cell {
    background: #252a38;
}

html.dark-mode .emoji-tag-picker-cell:hover {
    background: rgba(139, 92, 246, 0.22);
}

html.dark-mode .emoji-tag-picker-clear-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: #1c2030;
    color: #aeb7c9;
}

html.dark-mode .emoji-tag-picker-clear-btn:hover {
    background: #252a38;
    border-color: rgba(255, 255, 255, 0.18);
}