/* Presentation settings for v0.2: light/dark/system and English/Roman Urdu/Urdu. */
:root {
  --raised: #fafbf8;
  --hover: #f1f6ef;
  --field-bg: #fff;
  --focus: #75bca4;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e1eee7;
  --ink-soft: #bed0c5;
  --muted: #9db0a4;
  --paper: #101a1d;
  --surface: #19272b;
  --raised: #1d2d30;
  --hover: #223639;
  --field-bg: #132125;
  --line: #304346;
  --line-strong: #405859;
  --navy: #0c1b20;
  --navy-deep: #08171c;
  --green: #43bd96;
  --green-dark: #82dfba;
  --green-pale: #203f35;
  --red: #f19b91;
  --amber: #e6bf75;
  --focus: #82dfba;
  --shadow: 0 8px 28px #00000015;
}

/* Keep the sidebar placement stable; reading and form direction follow language. */
html[dir="ltr"] .sidebar,
html[dir="ltr"] .main,
html[dir="ltr"] .auth-form-side,
html[dir="ltr"] .modal-backdrop,
html[dir="ltr"] .toast-container { direction: ltr; }
html[dir="rtl"] .sidebar,
html[dir="rtl"] .main,
html[dir="rtl"] .auth-form-side,
html[dir="rtl"] .modal-backdrop,
html[dir="rtl"] .toast-container { direction: rtl; }
html[dir="ltr"] .auth-art h1,
html[dir="ltr"] .auth-art p { direction: ltr; text-align: left; }
html[dir="rtl"] .auth-art h1,
html[dir="rtl"] .auth-art p { direction: rtl; text-align: right; }
html[dir="ltr"] .eyebrow,
html[dir="ltr"] .auth-card .eyebrow { text-align: left; }
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .auth-card .eyebrow { text-align: right; }
html[dir="ltr"] .stat-value { text-align: left; }
html[dir="rtl"] .stat-value { text-align: right; }
.search-field svg { left: auto; right: auto; inset-inline-start: 13px; }
.search-field .input { padding-left: 12px; padding-right: 12px; padding-inline-start: 39px; }
.map-children .map-node::before { left: auto; right: auto; inset-inline-start: -21px; }
.stat-label { padding-inline-end: 34px; }
html[dir="ltr"] .stat-card > .stat-icon { left: auto; right: 18px; }
html[dir="rtl"] .stat-card > .stat-icon { right: auto; left: 18px; }

/* Language/theme selectors are available before and after sign-in. */
.preference-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.preference-controls label { min-width: 0; }
.preference-select {
  max-width: 160px;
  min-height: 35px;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.preference-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.preference-select:disabled { cursor: not-allowed; opacity: .58; }
.quick-preferences { justify-content: flex-end; margin-block-end: 20px; }
.topbar .quick-preferences { margin-block-end: 0; flex-wrap: nowrap; }
.preferences-settings { display: grid; gap: 16px; }
.preferences-settings .preference-controls { align-items: flex-start; }
.preferences-settings .preference-select { min-width: 160px; max-width: 100%; }
.preferences-settings .field-help { max-width: 560px; }
.topbar { min-height: 78px; height: auto; padding-block: 14px; }
.topbar-actions { min-width: 0; }
.breadcrumb { min-width: 0; overflow-wrap: anywhere; }
.brand-mark { object-fit: contain; padding: 5px; }
.workspace-logo-preview {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--raised);
}
.branding-form { display: grid; gap: 15px; }
.branding-form .form-actions { margin-top: 0; }
.branding-form input[type="file"] { max-width: 100%; }

/* Readable IP credentials in the list, with a deliberate reveal control. */
.ip-link { color: var(--green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ip-link:hover { text-decoration-thickness: 2px; }
.ip-link:focus-visible { border-radius: 3px; outline: 2px solid var(--focus); outline-offset: 4px; }
.inline-secret { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 155px; }
.inline-secret-value {
  display: inline-block;
  min-width: 84px;
  max-width: 250px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--ink-soft);
  font-family: Consolas, monospace;
  font-size: 12px;
  direction: ltr;
  unicode-bidi: isolate;
}
input.inline-secret-value { background: transparent; border: 0; padding: 0; outline: 0; width: 110px; }
.secret-toggle { flex: 0 0 auto; min-height: 30px; }
.installation-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.devices-table { min-width: 1080px; }
.table-scroll { scrollbar-color: var(--line-strong) transparent; }

/* Every surface participates in dark mode, including dialogs and auth screens. */
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .task-column { background: var(--raised); }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .note-card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .map-tree,
html[data-theme="dark"] .modal { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .auth-shell,
html[data-theme="dark"] .auth-form-side { background: var(--paper); }
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .project-name,
html[data-theme="dark"] .record-title,
html[data-theme="dark"] .auth-heading,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .section-heading h3,
html[data-theme="dark"] .settings-card h2,
html[data-theme="dark"] .settings-card h3,
html[data-theme="dark"] .empty-state h2,
html[data-theme="dark"] .empty-state h3,
html[data-theme="dark"] .note-card h3,
html[data-theme="dark"] .task-card h3,
html[data-theme="dark"] .task-card h4,
html[data-theme="dark"] .stat-value { color: var(--ink); }
html[data-theme="dark"] .detail-value,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .comment-body,
html[data-theme="dark"] .activity-item,
html[data-theme="dark"] .note-content,
html[data-theme="dark"] .field-label,
html[data-theme="dark"] .checkbox-row,
html[data-theme="dark"] .task-column > h3,
html[data-theme="dark"] .data-table .ledger-amount { color: var(--ink-soft); }
html[data-theme="dark"] .muted,
html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] .project-description,
html[data-theme="dark"] .project-meta,
html[data-theme="dark"] .project-footer,
html[data-theme="dark"] .record-secondary,
html[data-theme="dark"] .detail-label,
html[data-theme="dark"] .field-help,
html[data-theme="dark"] .auth-subtitle,
html[data-theme="dark"] .auth-footer,
html[data-theme="dark"] .auth-version,
html[data-theme="dark"] .auth-card .eyebrow,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-note,
html[data-theme="dark"] .record-count,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .comment-date,
html[data-theme="dark"] .activity-item .muted,
html[data-theme="dark"] .checkbox-row small,
html[data-theme="dark"] .task-card p,
html[data-theme="dark"] .task-meta,
html[data-theme="dark"] .task-status,
html[data-theme="dark"] .topbar-date,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .connection-status { color: var(--muted); }
html[data-theme="dark"] .comment-author { color: #b1d5bb; }
html[data-theme="dark"] .input,
html[data-theme="dark"] .field input:not([type="checkbox"]):not([type="file"]),
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .status-select {
  color: var(--ink);
  background: var(--field-bg);
  border-color: var(--line-strong);
}
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder { color: #849b8e; }
html[data-theme="dark"] .field input[type="date"] { color-scheme: dark; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px #43bd961a; }
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled { color: #8ca095; background: #1e2d30; }
html[data-theme="dark"] .button.primary { background: #218768; color: #f3fff8; border-color: #2d9b78; }
html[data-theme="dark"] .button.primary:hover { background: #2b9d79; border-color: #43bd96; }
html[data-theme="dark"] .button.secondary { background: var(--raised); color: var(--ink-soft); border-color: var(--line-strong); }
html[data-theme="dark"] .button.secondary:hover,
html[data-theme="dark"] .icon-button:hover { background: var(--hover); border-color: #52706c; color: var(--ink); }
html[data-theme="dark"] .button.danger { background: #40272a; color: #f2b3a9; border-color: #6b4141; }
html[data-theme="dark"] .button.danger:hover { background: #523136; }
html[data-theme="dark"] .button.text:hover { background: var(--green-pale); }
html[data-theme="dark"] .icon-button { color: #a0baab; }
html[data-theme="dark"] .chip { color: var(--muted); }
html[data-theme="dark"] .chip:hover { background: var(--hover); color: var(--ink); }
html[data-theme="dark"] .chip.active { background: #294539; border-color: #3c5b45; color: #b9dfbc; }
html[data-theme="dark"] .tab { color: var(--muted); }
html[data-theme="dark"] .tab.active,
html[data-theme="dark"] .tab:hover { color: var(--green-dark); }
html[data-theme="dark"] .data-table th { background: var(--raised); color: #a7c2af; }
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .comment,
html[data-theme="dark"] .activity-item,
html[data-theme="dark"] .project-footer,
html[data-theme="dark"] .task-card .table-actions,
html[data-theme="dark"] .note-card .table-actions,
html[data-theme="dark"] .member-row { border-color: var(--line); }
html[data-theme="dark"] .data-table tbody tr:hover { background: var(--hover); }
html[data-theme="dark"] .project-card:hover { border-color: #55745c; box-shadow: 0 8px 24px #0002; }
html[data-theme="dark"] .project-cover { background: color-mix(in srgb, var(--project-color) 17%, #18282b); }
html[data-theme="dark"] .project-cover-icon { background: #253d3d; box-shadow: inset 0 0 0 1px #adc6bb1a; }
html[data-theme="dark"] .project-cover-label { color: #b7cdc1; }
html[data-theme="dark"] .badge,
html[data-theme="dark"] .badge.subtle,
html[data-theme="dark"] .badge.neutral,
html[data-theme="dark"] .badge.todo { background: #2a3b35; color: #b7cbbf; }
html[data-theme="dark"] .badge.success,
html[data-theme="dark"] .badge.done,
html[data-theme="dark"] .badge.active { background: #203e2d; color: #a1d9a7; }
html[data-theme="dark"] .badge.warning,
html[data-theme="dark"] .badge.progress { background: #453820; color: #eccb8b; }
html[data-theme="dark"] .badge.error,
html[data-theme="dark"] .badge.inactive,
html[data-theme="dark"] .badge.overdue { background: #462b2d; color: #efb5ab; }
html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .empty-icon,
html[data-theme="dark"] .activity-dot,
html[data-theme="dark"] .logo-big { background: #294332; border-color: #3a5a3c; color: #a5c998; }
html[data-theme="dark"] .empty-state { background: #142226; border-color: #39523f; color: var(--muted); }
html[data-theme="dark"] .secret-panel,
html[data-theme="dark"] .permission-grid { background: #1c302b; border-color: #354e40; }
html[data-theme="dark"] .client-balance { background: #1d382b; border-color: #365b42; color: #bbd9b4; }
html[data-theme="dark"] .code-block { background: #0c171a; color: #c0dfb9; border: 1px solid #2a3d36; }
html[data-theme="dark"] .map-node { background: #1b2e2a; border-color: #38523c; }
html[data-theme="dark"] .map-node:hover { background: #22392f; }
html[data-theme="dark"] .map-children,
html[data-theme="dark"] .map-children .map-node::before { border-color: #536d4c; }
html[data-theme="dark"] .modal-backdrop { background: #030b11bb; }
html[data-theme="dark"] .modal-close { background: #273b34; color: #acc6b0; }
html[data-theme="dark"] .modal-close:hover { background: #355044; color: #e0f1e3; }
html[data-theme="dark"] .modal-body > p { color: var(--ink-soft); }
html[data-theme="dark"] .upload-preview { background: var(--raised); }
html[data-theme="dark"] .file-input-label { background: #1f3529; border-color: #4f6a48; color: #b6d2a5; }
html[data-theme="dark"] .file-input-label:hover { background: #2a4432; }
html[data-theme="dark"] .field input[type="file"] { color: var(--muted); }
html[data-theme="dark"] .field input[type="file"]::file-selector-button { background: #2a3f32; border-color: #4a6346; color: #bcd2b2; }
html[data-theme="dark"] .alert,
html[data-theme="dark"] .notice { background: #253a2a; color: #b5ce9e; border-color: #3f5638; }
html[data-theme="dark"] .alert.error,
html[data-theme="dark"] .notice.error { background: #412b2a; color: #f0b6a8; border-color: #67403b; }
html[data-theme="dark"] .alert.success,
html[data-theme="dark"] .notice.success { background: #203d2c; color: #b2d7a4; border-color: #365d3e; }
html[data-theme="dark"] .alert.warning,
html[data-theme="dark"] .notice.warning { background: #433b25; color: #e5ce94; border-color: #635936; }
html[data-theme="dark"] .toast { background: #234a3c; border-color: #45735a; color: #effff0; }
html[data-theme="dark"] .toast.error { background: #653a35; border-color: #915448; color: #fff2eb; }
html[data-theme="dark"] .spinner { border-color: #385440; border-top-color: var(--green); }
html[data-theme="dark"] ::selection { background: #376c54; color: #f2fff4; }

@media (max-width: 1220px) {
  .topbar-actions { gap: 10px; }
  .topbar-date { display: none; }
  .preference-select { max-width: 138px; }
  html[dir="ltr"] .stat-card > .stat-icon { right: 14px; }
  html[dir="rtl"] .stat-card > .stat-icon { left: 14px; }
}
@media (max-width: 1020px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar > .topbar-actions:last-child { margin-inline-start: auto; }
  .topbar .connection-status { font-size: 0; gap: 0; }
}
@media (max-width: 760px) {
  .topbar { min-height: 68px; padding-block: 12px; }
  .topbar > .topbar-actions { max-width: 100%; }
  .topbar .preference-controls { gap: 6px; }
  .preference-select { min-height: 34px; font-size: 11px; max-width: 125px; padding-inline: 7px; }
  .quick-preferences { justify-content: flex-start; }
  .preferences-settings .preference-select { min-width: 145px; }
  .devices-table { min-width: 1020px; }
  html[dir="ltr"] .stat-card > .stat-icon { right: 13px; }
  html[dir="rtl"] .stat-card > .stat-icon { left: 13px; }
  .inline-secret-value { max-width: 190px; }
}
@media (max-width: 440px) {
  .topbar { align-items: flex-start; }
  .topbar > .topbar-actions:last-child { width: 100%; justify-content: flex-end; }
  .topbar .quick-preferences { flex-wrap: wrap; }
  .preference-select { max-width: none; }
  .stat-label { padding-inline-end: 0; }
}
@media print {
  html[data-theme] { color-scheme: light !important; --ink: #15281b; --ink-soft: #3e573a; --muted: #61715e; --paper: #fff; --surface: #fff; --line: #ccd6c7; }
  html[data-theme] body,
  html[data-theme] .printable,
  html[data-theme] .data-table,
  html[data-theme] .data-table td,
  html[data-theme] .detail-value,
  html[data-theme] .receipt-amount,
  html[data-theme] .print-header,
  html[data-theme] .print-footer { background: #fff !important; color: #15281b !important; border-color: #ccd6c7 !important; }
  html[data-theme] .data-table th { background: #f4f6f0 !important; color: #3e573a !important; }
  html[dir="ltr"] .printable { direction: ltr; }
  html[dir="rtl"] .printable { direction: rtl; }
  .preference-controls, .quick-preferences, .secret-toggle, .branding-form { display: none !important; }
  .inline-secret-value { display: none !important; }
  .devices-table { min-width: 0; }
}
html[data-palette="ocean"]{--green:#1676a3;--green-dark:#105a80;--green-pale:#e4f1fa;--paper:#f1f6fa;--navy:#102c45;--navy-deep:#0c2237;--focus:#72b9dc}html[data-palette="violet"]{--green:#7655b6;--green-dark:#5e3e96;--green-pale:#f0eafa;--paper:#f7f4fa;--navy:#302644;--navy-deep:#251c37;--focus:#b29bd6}html[data-palette="sand"]{--green:#9c6c32;--green-dark:#795121;--green-pale:#f5ebda;--paper:#faf7f0;--surface:#fffdf8;--navy:#3b3329;--navy-deep:#29231b;--focus:#c9aa75}html[data-palette="midnight"]{--green:#79a9f3;--green-dark:#b4d0fa;--green-pale:#20324c;--paper:#0d1421;--surface:#141f31;--raised:#1b2940;--navy:#101a2a;--navy-deep:#0b1320;--line:#2d3d55;--focus:#85aee9}.record-filters,.today-tasks,.file-card,.dashboard-banner-empty{color:var(--ink)}