/* OneCity brand */
:root { --onecity-red: #C8102E; --onecity-accent: #7cc4ff; }
.onecity-tagline { color: var(--text-muted, #6b7280); font-size: 13px; margin-top: 4px; }
.onecity-brand { margin: 8px 0 12px; }
.onecity-brand .onecity-name { font-size: 22px; font-weight: 700; color: var(--onecity-red); }
.page-card-head img.app-logo, .page-card-head img { max-height: 48px; }

/* =====================================================================
   OneCity "Dark Modern" theme (style 2)
   Near-black background, sky-blue accent, rounded dark cards, Inter.
   Re-maps the shared Frappe / frappe-ui design tokens under
   [data-theme="dark"], so desk, Helpdesk and CRM all pick it up.
   Contrast checked against WCAG AA (4.5:1 body text, 3:1 large/UI).
   ===================================================================== */
[data-theme="dark"] {
	/* surfaces: cool blue-grey instead of neutral grey */
	--surface-base: #0f1115;
	--surface-gray-1: #15181e;
	--surface-gray-2: #1c2028;
	--surface-gray-3: #262a33;
	--surface-gray-4: #2d323c;
	--surface-gray-5: #3a404c;
	--surface-gray-6: #6b7280;
	--surface-gray-7: #9aa3af;
	--surface-gray-8: #c4c9d2;
	--surface-gray-9: #e1e4e8;
	--surface-gray-10: #f3f4f6;
	--surface-elevation-1: #171a21;
	--surface-elevation-2: #1a1d24;
	--surface-elevation-3: #262a33;
	--surface-menu-bar: #15181e;
	--surface-modal: #171a21;
	--surface-cards: #171a21;

	/* text */
	--ink-base: #0f1115;
	--ink-gray-1: #1c2028;
	--ink-gray-2: #2d323c;
	--ink-gray-3: #3a404c;
	--ink-gray-4: #8b93a0;
	--ink-gray-5: #9aa3af;
	--ink-gray-6: #aab2bd;
	--ink-gray-7: #c4c9d2;
	--ink-gray-8: #e1e4e8;
	--ink-gray-9: #f3f4f6;
	--ink-blue-3: #7cc4ff;
	--ink-blue-link: #7cc4ff;

	/* borders */
	--outline-base: #0f1115;
	--outline-gray-1: #22262e;
	--outline-gray-2: #262a33;
	--outline-gray-3: #3a404c;
	--outline-gray-4: #4a5160;
	--outline-gray-5: #6b7280;
	--outline-elevation-1: #262a33;
	--outline-elevation-2: #2d323c;

	/* desk tokens */
	--bg-color: #0f1115;
	--fg-color: #0f1115;
	--card-bg: #171a21;
	--modal-bg: #171a21;
	--popover-bg: #171a21;
	--control-bg: #1a1d24;
	--control-bg-on-gray: #262a33;
	--subtle-accent: #15181e;
	--subtle-fg: #1c2028;
	--fg-hover-color: #1f2a3a;
	--disabled-control-bg: #15181e;
	--sidebar-select-color: #1f2a3a;
	--highlight-color: #1f2a3a;
	--skeleton-bg: #1c2028;
	--desk-sidebar-bg: #15181e;
	--dock-bg: #15181e;
	--dock-ink: #9aa3af;
	--dock-ink-hover: #c4c9d2;
	--dock-ink-active: #7cc4ff;
	--text-color: #e8eaed;
	--heading-color: #f3f4f6;
	--text-muted: #9aa3af;
	--text-light: #8b93a0;
	--disabled-text-color: #8b93a0;
	--placeholder-color: #8b93a0;
	--border-color: #262a33;
	--table-border-color: #22262e;
	--btn-group-border-color: #3a404c;
	--border-primary: #7cc4ff;
	--btn-default-bg: #1c2028;
	--btn-default-hover-bg: #262a33;
	--btn-ghost-hover-bg: #1f2a3a;
	--btn-primary: #7cc4ff;
	--primary: #7cc4ff;
	--primary-color: #7cc4ff;
	--brand-color: #7cc4ff;
	--checkbox-color: #7cc4ff;
	--awesomebar-focus-bg: #1a1d24;
	--awesomplete-hover-bg: #1f2a3a;
	--date-active-bg: #7cc4ff;
	--date-active-text: #0b1220;
	--date-range-bg: #1f2a3a;
	--scrollbar-thumb-color: #3a404c;
	--scrollbar-track-color: #15181e;
	--kanban-column-bg: #15181e;
	--kanban-card-bg: #171a21;
	--kanban-card-hover-bg: #1c2028;
	--avatar-frame-bg: #1f2a3a;
	--avatar-frame-color: #a8d4ff;
	--avatar-frame-border: #2d3a4f;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;
	--shadow-base: 0 1px 2px rgba(0, 0, 0, .4);
	--btn-shadow: none;
	--shadow-xs: none;
	--focus-default: 0 0 0 2px #7cc4ff66;
	--checkbox-focus-shadow: 0 0 0 2px #7cc4ff66;
	/* datatable (report view) */
	--dt-text-color: #e8eaed;
	--dt-text-light: #9aa3af;
	--dt-cell-bg: #0f1115;
	--dt-header-cell-bg: #15181e;
	--dt-border-color: #262a33;
	--dt-light-bg: #15181e;
	--dt-selection-highlight-color: #1f2a3a;
	--dt-primary-color: #7cc4ff;

	font-family: "Inter", "InterVariable", "Segoe UI", system-ui, sans-serif;
	font-feature-settings: "cv11", "ss01";
}
[data-theme="dark"] body { background: #0f1115; color: #e8eaed; }

/* ---------- Desk ---------- */
[data-theme="dark"] .body-sidebar, [data-theme="dark"] .desk-sidebar,
[data-theme="dark"] .layout-side-section, [data-theme="dark"] .sidebar-column { background: #15181e; }
[data-theme="dark"] .body-sidebar-container, [data-theme="dark"] .body-sidebar { border-right: 1px solid #262a33; }
[data-theme="dark"] .sidebar-item-container .selected,
[data-theme="dark"] .standard-sidebar-item.selected,
[data-theme="dark"] .sidebar-item-container .item-anchor.active,
[data-theme="dark"] .body-sidebar .standard-sidebar-item.active-sidebar {
	background: #1f2a3a !important; color: #7cc4ff !important; border-radius: 8px;
}
[data-theme="dark"] .standard-sidebar-item.selected .sidebar-item-label,
[data-theme="dark"] .standard-sidebar-item.selected svg { color: #7cc4ff !important; --icon-stroke: #7cc4ff; }

/* espresso buttons (v16 desk): solid = sky-blue with near-black text (10:1) */
[data-theme="dark"] .es-button {
	--bt-solid-bg: #7cc4ff; --bt-solid-bg-hover: #a8d4ff; --bt-solid-bg-active: #5fb3f5; --bt-solid-fg: #0b1220;
	--bt-fill-bg: #1c2028; --bt-fill-bg-hover: #262a33; --bt-fill-bg-active: #2d323c;
	--bt-border: #4a5160; --bt-border-hover: #6b7280; --bt-fg: #e8eaed; border-radius: 8px;
}
[data-theme="dark"] .active-sidebar .item-anchor, [data-theme="dark"] .active-sidebar .sidebar-item-label { color: #7cc4ff !important; }
[data-theme="dark"] .active-sidebar svg { --icon-stroke: #7cc4ff; color: #7cc4ff; }
/* legacy bootstrap primary buttons */
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn.btn-primary {
	background: #7cc4ff !important; border-color: #7cc4ff !important; color: #0b1220 !important; border-radius: 8px;
	--icon-stroke: #0b1220;
}
[data-theme="dark"] .btn-primary:hover { background: #a8d4ff !important; }
[data-theme="dark"] .btn-primary svg, [data-theme="dark"] .btn-primary .icon use { stroke: #0b1220; --icon-stroke: #0b1220; }
[data-theme="dark"] .btn-default, [data-theme="dark"] .btn-secondary {
	background: transparent; color: #e8eaed; border: 1px solid #4a5160; border-radius: 8px; box-shadow: none;
}
[data-theme="dark"] .btn-default:hover { background: #1f2a3a; }

/* inputs */
[data-theme="dark"] .form-control, [data-theme="dark"] .input-with-feedback,
[data-theme="dark"] .awesomplete input, [data-theme="dark"] select.form-control,
[data-theme="dark"] .frappe-control .ql-editor, [data-theme="dark"] .list-row-head .list-subject input {
	background-color: #1a1d24; color: #e8eaed; border: 1px solid #3a404c; border-radius: 8px;
}
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .awesomplete input:focus {
	border-color: #7cc4ff; box-shadow: 0 0 0 2px #7cc4ff40;
}
[data-theme="dark"] ::placeholder { color: #8b93a0 !important; opacity: 1; }
[data-theme="dark"] .standard-filter-section .form-control { background-color: #1a1d24; }

/* rounded dark cards */
[data-theme="dark"] .widget, [data-theme="dark"] .frappe-card, [data-theme="dark"] .number-card,
[data-theme="dark"] .dashboard-widget-box, [data-theme="dark"] .form-dashboard-section,
[data-theme="dark"] .layout-main-section.frappe-card, [data-theme="dark"] .card,
[data-theme="dark"] .desktop-icon .icon-container, [data-theme="dark"] .form-page .form-section.card-section {
	background: #171a21; border: 1px solid #262a33 !important; border-radius: 12px !important; box-shadow: none;
}
[data-theme="dark"] .page-form, [data-theme="dark"] .form-layout, [data-theme="dark"] .form-page {
	background: #171a21; border-radius: 12px;
}
[data-theme="dark"] .form-layout { border: 1px solid #262a33; }
[data-theme="dark"] .form-section, [data-theme="dark"] .form-tabs-list { border-color: #262a33 !important; }
[data-theme="dark"] .form-tabs .nav-link.active { color: #7cc4ff; border-bottom-color: #7cc4ff; }

/* list view */
[data-theme="dark"] .frappe-list, [data-theme="dark"] .result { background: transparent; }
[data-theme="dark"] .list-row-head { background: #15181e; border-bottom: 1px solid #2d323c; border-radius: 8px 8px 0 0; }
[data-theme="dark"] .list-row-head .list-row-col, [data-theme="dark"] .list-row-head span { color: #9aa3af; font-weight: 600; }
[data-theme="dark"] .list-row { border-bottom: 1px solid #22262e; }
[data-theme="dark"] .list-row:hover, [data-theme="dark"] .list-row-container:hover { background: #1c2028; }
[data-theme="dark"] .list-row .list-subject a, [data-theme="dark"] .list-row .bold a { color: #e8eaed; }
[data-theme="dark"] .list-paging-area .btn-group .btn.btn-info, [data-theme="dark"] .list-paging-area .btn.btn-paging.btn-info {
	background: #1f2a3a; color: #7cc4ff; border-color: #2d3a4f;
}
[data-theme="dark"] .frappe-control a:not(.btn), [data-theme="dark"] .ql-editor a, [data-theme="dark"] .link-btn { color: #7cc4ff; }

/* indicator pills tuned to style 2 */
[data-theme="dark"] .indicator-pill.blue, [data-theme="dark"] .indicator-pill.light-blue { background: #1f2a3a; color: #a8d4ff; }
[data-theme="dark"] .indicator-pill.green { background: #173a24; color: #8ee3a8; }
[data-theme="dark"] .indicator-pill.red { background: #4a1d1d; color: #ffb4ab; }
[data-theme="dark"] .indicator-pill.orange, [data-theme="dark"] .indicator-pill.yellow, [data-theme="dark"] .indicator-pill.amber { background: #4a3b12; color: #ffd97a; }
[data-theme="dark"] .indicator-pill.gray, [data-theme="dark"] .indicator-pill.grey { background: #262a33; color: #c4c9d2; }

/* navbar / page head */
[data-theme="dark"] .navbar, [data-theme="dark"] .page-head { background: #0f1115; border-bottom: 1px solid #262a33; }
[data-theme="dark"] .page-head .page-title .title-text { color: #f3f4f6; font-weight: 600; letter-spacing: -0.01em; }
[data-theme="dark"] .dropdown-menu { background: #171a21; border: 1px solid #262a33; border-radius: 12px; }
[data-theme="dark"] .dropdown-item:hover { background: #1f2a3a; }
[data-theme="dark"] .modal-content { background: #171a21; border: 1px solid #262a33; border-radius: 12px; }

/* /apps grid */
[data-theme="dark"] .desktop-icon .icon-title, [data-theme="dark"] .app-title { color: #e8eaed; }
[data-theme="dark"] .apps-container .app-item:hover, [data-theme="dark"] .desktop-icon:hover { background: #171a21; border-radius: 12px; }

/* ---------- frappe-ui SPAs (Helpdesk, CRM) ---------- */
/* solid primary buttons in frappe-ui are grey-10 on dark; make them sky-blue */
[data-theme="dark"] button.bg-surface-gray-10.text-ink-base {
	background-color: #7cc4ff !important; color: #0b1220 !important; border-radius: 8px;
}
[data-theme="dark"] button.bg-surface-gray-10.text-ink-base:hover { background-color: #a8d4ff !important; }
[data-theme="dark"] button.bg-surface-gray-10.text-ink-base svg { color: #0b1220; }
/* active sidebar item in frappe-ui apps */
[data-theme="dark"] #app nav .bg-surface-elevation-3, [data-theme="dark"] #app .bg-surface-selected {
	background-color: #1f2a3a !important; color: #7cc4ff !important; box-shadow: none !important;
}
[data-theme="dark"] #app nav .bg-surface-elevation-3 * { color: #7cc4ff !important; }
[data-theme="dark"] #app .bg-surface-menu-bar, [data-theme="dark"] #app aside, [data-theme="dark"] #app .bg-surface-gray-1 { background-color: #15181e; }
[data-theme="dark"] #app aside, [data-theme="dark"] #app .border-r { border-color: #262a33; }

/* avatars: initials on tinted dark circle (AA: 9:1) */
[data-theme="dark"] .avatar .avatar-frame.standard-image { background-color: #1f2a3a !important; color: #a8d4ff !important; }
/* red ink (e.g. CRM "Clear Demo Data") lifted to style-2 red for AA */
[data-theme="dark"] #app [class*="text-ink-red"], [data-theme="dark"] #app [class*="text-ink-red"] span { color: #ffb4ab !important; }

/* ---------- About dialog ---------- */
.onecity-about-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.onecity-about-name { font-size: 22px; font-weight: 700; color: var(--heading-color, #f3f4f6); }
.onecity-about-tag { color: var(--text-muted, #9aa3af); font-size: 13px; }
.onecity-about-rows > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-color, #262a33); }
.onecity-about-rows span { color: var(--text-muted, #9aa3af); }
.onecity-about-credits { margin-top: 14px; color: var(--text-muted, #9aa3af); font-size: 12px; }
.onecity-about-credits summary { cursor: pointer; color: var(--text-color, #e8eaed); }

/* =====================================================================
   Login / password pages: Dark Modern (works without data-theme, so no flash)
   ===================================================================== */
body[data-path="login"], body[data-path="update-password"], body[data-path="forgot-password"] {
	background: radial-gradient(1200px 600px at 50% -10%, #1a2a40 0%, #0f1115 55%) fixed, #0f1115 !important;
	color: #e8eaed; font-family: "Inter", "InterVariable", "Segoe UI", system-ui, sans-serif;
	--text-color: #e8eaed; --heading-color: #f3f4f6; --text-muted: #9aa3af; --control-bg: #1a1d24; --border-color: #262a33;
	--ink-gray-5: #9aa3af; --ink-gray-6: #aab2bd; --ink-gray-7: #c4c9d2; --ink-gray-8: #e1e4e8; --ink-gray-9: #f3f4f6;
	--surface-gray-2: #1c2028; --surface-white: #171a21; --surface-cards: #171a21; --outline-gray-2: #262a33;
}
body[data-path="login"] .navbar, body[data-path="login"] .web-footer, body[data-path="login"] footer,
body[data-path="update-password"] .navbar, body[data-path="update-password"] .web-footer { background: transparent !important; border: 0 !important; }
body[data-path="login"] .web-footer, body[data-path="login"] footer.web-footer { display: none; }
body[data-path="login"] .navbar .navbar-brand, body[data-path="login"] .navbar a { color: #e8eaed !important; }
body[data-path="login"] main, body[data-path="login"] .page_content, body[data-path="login"] .page-content-wrapper,
body[data-path="login"] .container { background: transparent !important; }
body[data-path="login"] .page-card, body[data-path="update-password"] .page-card, body[data-path="forgot-password"] .page-card {
	background: #171a21 !important; border: 1px solid #262a33 !important; border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .45) !important; color: #e8eaed; max-width: 420px;
}
body[data-path="login"] .page-card-head h4, body[data-path="login"] .page-card-head h3, body[data-path="login"] .page-card-head h1,
body[data-path="login"] .page-card-head .page-card-title { color: #f3f4f6 !important; }
body[data-path="login"] .page-card-subtitle, body[data-path="login"] .text-ink-gray-6, body[data-path="login"] .text-muted,
body[data-path="login"] label, body[data-path="login"] .form-label { color: #9aa3af !important; }
body[data-path="login"] .form-control, body[data-path="login"] input,
body[data-path="update-password"] .form-control, body[data-path="update-password"] input {
	background: #1a1d24 !important; color: #e8eaed !important; border: 1px solid #3a404c !important; border-radius: 8px !important;
}
body[data-path="login"] .form-control:focus, body[data-path="login"] input:focus { border-color: #7cc4ff !important; box-shadow: 0 0 0 2px #7cc4ff40 !important; }
body[data-path="login"] input::placeholder { color: #8b93a0 !important; }
body[data-path="login"] .btn-primary, body[data-path="login"] .btn-login, body[data-path="login"] button[type="submit"],
body[data-path="update-password"] .btn-primary {
	background: #7cc4ff !important; border-color: #7cc4ff !important; color: #0b1220 !important; font-weight: 600; border-radius: 8px !important;
}
body[data-path="login"] .btn-primary:hover { background: #a8d4ff !important; }
body[data-path="login"] .btn-default, body[data-path="login"] .btn-secondary, body[data-path="login"] .btn-login-option {
	background: transparent !important; color: #e8eaed !important; border: 1px solid #4a5160 !important; border-radius: 8px !important;
}
body[data-path="login"] a, body[data-path="update-password"] a { color: #7cc4ff; }
body[data-path="login"] .login-divider, body[data-path="login"] hr { border-color: #262a33 !important; color: #6b7280; }
body[data-path="login"] .onecity-brand .onecity-name { color: #f3f4f6; font-size: 24px; letter-spacing: -0.01em; }
body[data-path="login"] .onecity-brand .onecity-name::after { content: ""; display: block; width: 36px; height: 3px; background: #7cc4ff; border-radius: 2px; margin-top: 6px; }
body[data-path="login"] .onecity-tagline { color: #9aa3af; }
body[data-path="login"] .page-card-head img { max-height: 52px; border-radius: 12px; }
body[data-path="login"] .toggle-password, body[data-path="login"] .password-strength-indicator { color: #9aa3af; }