/*==========================================================================
  theme.css — applies the signed-in user's theme.

  Loaded AFTER style.css and every vendor stylesheet, so the rules below win
  without needing !important except where style.css itself uses it.

  The variables (--th-*) are emitted per request into a <style> block in the
  document head by resources/views/layouts/theme.blade.php. They are computed in
  App\Support\ThemeTokens from a small set of user-chosen colours; every hover,
  contrast and tint value here is derived there, never guessed in CSS.

  Contents
    1. Page shell
    2. Sidebar
    3. Header
    4. Cards, panels and surfaces
    5. Typography and links
    6. Buttons
    7. Tables and DataTables
    8. Forms and selects
    9. Modals, dropdowns and SweetAlert
   9b-9f. Hardcoded colours: components, Bootstrap utilities, neutral text,
          near-white panels, public (signed-out) pages
   10. Dark-mode asset fixes
   11. Settings -> Theme page (picker, builder, preview mockup)
==========================================================================*/

/*--------------------------------------------------------------------------
  1. Page shell
--------------------------------------------------------------------------*/

/* Native widgets the page cannot style directly — the <select> popup list, date
   pickers, spinners, scrollbars — are drawn by the browser. `color-scheme` is the
   only way to tell it which palette to use, so a dark theme no longer opens a
   white dropdown. Declared for BOTH modes so a light theme also stays light when
   the operating system is set to dark. */
html[data-th-mode='dark'] {
    color-scheme: dark;
}

html[data-th-mode='light'] {
    color-scheme: light;
}

/* Chrome and Firefox honour these on the popup list; Safari falls back to
   color-scheme above. */
select option,
select optgroup {
    background-color: var(--th-surface);
    color: var(--th-text);
}

body {
    background: var(--th-body-bg);
    color: var(--th-text);
}

.main-content {
    color: var(--th-text);
}

.footer-inner,
.footer {
    color: var(--th-text-muted);
}

::selection {
    background: var(--th-primary);
    color: var(--th-primary-contrast);
}

/* Scrollbars: a light default scrollbar on a dark page is jarring. */
* {
    scrollbar-color: var(--th-border) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--th-border);
    border-radius: 10px;
}

/*--------------------------------------------------------------------------
  2. Sidebar
--------------------------------------------------------------------------*/
.sidebar {
    background: var(--th-sidebar-bg);
    border-right: 1px solid var(--th-sidebar-border);
}

.sidebar-menu > ul > li > a,
.sidebar-menu ul li .menu-dropdown li a {
    color: var(--th-sidebar-text);
}

.sidebar-menu ul li .menu-dropdown li a {
    color: var(--th-sidebar-muted);
}

.sidebar-menu > ul > li:hover > a {
    background: var(--th-sidebar-hover-bg);
    color: var(--th-sidebar-hover-text);
}

/* Active item — a flat fill replaces style.css's fixed gold gradient so the
   accent always comes from the theme. */
.sidebar-menu > ul > li.active > a,
.sidebar ul > li.active > a,
.sidebar-menu > ul > li.sub-child.open-menu.active > a {
    background: var(--th-sidebar-active-bg);
    color: var(--th-sidebar-active-text);
}

.sidebar-menu ul li .menu-dropdown li.active a,
.sidebar-menu ul li .menu-dropdown li a:hover {
    background: none;
    color: var(--th-sidebar-active-bg);
}

.close-side svg path {
    fill: var(--th-sidebar-text);
}

.short-menu .sidebar-menu ul li .menu-dropdown {
    background: var(--th-sidebar-bg);
    border: 1px solid var(--th-sidebar-border);
    border-radius: 8px;
}

.short-menu .sidebar-logo-mobiole {
    background: var(--th-sidebar-hover-bg);
}

/* The caret is a fixed dark-ink image asset; flip it only when the text it sits
   next to is light (see --th-caret-invert in ThemeTokens). */
.sidebar-menu ul li.sub-child > a span::after {
    filter: invert(var(--th-caret-invert));
}

.sidebar-menu ul li:hover a span::after,
.sidebar-menu ul li.active > a span::after {
    filter: invert(var(--th-caret-invert-active));
}

/*--------------------------------------------------------------------------
  3. Header
--------------------------------------------------------------------------*/
.header,
header.header {
    background: var(--th-header-bg);
    color: var(--th-header-text);
    box-shadow: 0 3px 3px var(--th-shadow);
    border-bottom: 1px solid var(--th-header-border);
}

.header .profile-label .profile-name,
.header .profile-block {
    color: var(--th-header-text);
}

.header .profile-label .profile-post {
    color: var(--th-primary);
}

/* Presentation attributes on inline SVG lose to any CSS rule, so the hardcoded
   stroke/fill in the header markup is overridden here rather than in Blade. */
.hamburger svg path {
    stroke: var(--th-header-text);
}

.notification a {
    background: var(--th-primary-soft);
}

.notification-dropdown {
    background: var(--th-surface);
    box-shadow: 0 10px 30px var(--th-shadow-strong);
    border: 1px solid var(--th-border);
}

.notification-item {
    border-bottom-color: var(--th-border);
}

.notification-item:hover {
    background: var(--th-surface-alt);
}

.notification-item h6,
.notification-item p {
    color: var(--th-text);
}

.profile-menu {
    background: var(--th-surface);
    border-color: var(--th-border);
}

.profile-menu li a,
.profile-menu button[type='submit'] {
    color: var(--th-text);
    border-bottom-color: var(--th-border);
}

.trial-badge {
    background: var(--th-primary-soft);
    border-color: var(--th-primary);
    color: var(--th-text);
}

/*--------------------------------------------------------------------------
  4. Cards, panels and surfaces
--------------------------------------------------------------------------*/
.card,
.dashboard-post,
.property-card,
.promotion-card,
.summry-block .nav-tabs .nav-link,
.option a.option-link,
.master-plan-list a.share-link,
#social-links ul,
.btn-cancel {
    background: var(--th-surface);
    color: var(--th-text);
}

.card,
.dashboard-post,
.property-card {
    box-shadow: 0 0 10px var(--th-shadow);
}

.dashboard-post:hover {
    box-shadow: 0 20px 45px var(--th-shadow-strong);
}

.promotion-card,
.btn-cancel,
.loan-confirm-form {
    border-color: var(--th-border);
}

.loan-confirm-form,
.form-control-custom,
.filter-tabs {
    background: var(--th-surface-alt);
}

.dashboard-post-detail p,
.dashboard-post .post-stetus {
    color: var(--th-text-muted);
}

.filter-tab {
    color: var(--th-text);
}

.filter-tab.active,
.filter-tab.active:hover {
    background: var(--th-primary);
    color: var(--th-primary-contrast);
}

.filter-tabs span,
.filter-tabs .role-count {
    background: var(--th-surface);
    color: var(--th-text);
    border-color: var(--th-border);
}

.filter-tab.active .role-count {
    background: var(--th-primary-contrast);
    color: var(--th-primary);
    border-color: transparent;
}

.summry-block .nav-tabs .nav-item.show .nav-link,
.summry-block .nav-tabs .nav-link.active,
.form-tab .nav-tabs .nav-item .nav-link.active {
    background: var(--th-primary);
    color: var(--th-primary-contrast);
}

.form-tab .nav-tabs {
    border-color: var(--th-border);
}

.form-tab .nav-tabs .nav-item .nav-link {
    color: var(--th-text);
}

/*--------------------------------------------------------------------------
  5. Typography and links
--------------------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--th-heading);
}

p {
    color: var(--th-text);
}

.form-label,
.text-muted {
    color: var(--th-text-muted) !important;
}

a {
    color: var(--th-link);
}

a:hover,
p a:hover {
    color: var(--th-link-hover);
}

hr {
    border-color: var(--th-border);
}

/*--------------------------------------------------------------------------
  6. Buttons
--------------------------------------------------------------------------*/
.btn,
.btn:active,
.btn:focus,
.swal2-styled {
    background: var(--th-primary) !important;
    color: var(--th-primary-contrast);
}

.btn:hover,
.swal2-styled:hover {
    background: var(--th-primary-hover) !important;
    color: var(--th-primary-contrast) !important;
}

.btn.btn-secondary,
.swal2-cancel {
    background: var(--th-secondary) !important;
    color: var(--th-secondary-contrast) !important;
}

.btn.btn-secondary:hover,
.swal2-cancel:hover {
    background: var(--th-secondary-hover) !important;
    color: var(--th-secondary-contrast) !important;
}

.btn-cancel {
    color: var(--th-text);
}

/* Icon-in-button glyphs follow the button's foreground. */
.user-manage-top .btn.btn-primary svg path,
.summry-block .manage-btn svg path {
    fill: var(--th-primary-contrast);
}

.user-manage-top .btn.btn-primary:hover svg path,
.summry-block .manage-btn:hover svg path {
    fill: var(--th-primary-contrast);
}

/*--------------------------------------------------------------------------
  7. Tables and DataTables
--------------------------------------------------------------------------*/
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--th-text);
    --bs-table-border-color: var(--th-border);
    --bs-table-striped-bg: var(--th-surface-alt);
    --bs-table-striped-color: var(--th-text);
    --bs-table-hover-bg: var(--th-row-hover-bg);
    --bs-table-hover-color: var(--th-text);
    --bs-table-accent-bg: transparent;
    color: var(--th-text);
    border-color: var(--th-border);
}

.table-responsive table tr th,
.table > :not(caption) > * > th,
.table thead th {
    background: var(--th-table-head-bg);
    color: var(--th-table-head-text);
}

.table tbody td,
.table thead th {
    border-color: var(--th-border);
}

.table tbody td {
    color: var(--th-text);
}

body table.dataTable tr td {
    background: var(--th-surface) !important;
    color: var(--th-text);
}

.table .dropdown-toggle {
    background: var(--th-surface-alt);
    color: var(--th-text);
}

/* The row action glyph is an SVG with a hardcoded navy fill; a CSS rule beats
   the presentation attribute, so it can follow the theme. */
.table .dropdown-toggle svg rect,
.table .dropdown-toggle svg circle,
.table .dropdown-toggle svg path {
    fill: var(--th-text);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    color: var(--th-text-muted) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-color: var(--th-border);
    color: var(--th-text) !important;
    background: transparent;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--th-secondary) !important;
    border-color: var(--th-secondary);
    color: var(--th-secondary-contrast) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background: transparent !important;
    color: var(--th-text-muted) !important;
    border-color: var(--th-border);
}

.pagination li a.page-link {
    background: var(--th-surface-alt);
    color: var(--th-text);
}

.pagination li a.page-link.active,
.pagination li a.page-link:hover {
    background: var(--th-primary);
    color: var(--th-primary-contrast);
}

/*--------------------------------------------------------------------------
  8. Forms and selects
--------------------------------------------------------------------------*/
/*
| !important is unavoidable here. style.css declares
|     .form-select { background-color: #fff !important; }
| at global scope, and repaints `background: #fff url(arrow.svg)` as a SHORTHAND in
| several state variants (:focus, .step-form, .map-list-top, .filter-card). Without
| matching that weight, every <select> in the app stays white on a dark theme.
|
| More specific rules below (:disabled, .custom-disabled) still win on specificity,
| so disabled styling is unaffected.
*/
.form-control,
.form-select,
select.form-control,
.form-control:focus,
.form-select:focus,
.step-form select.form-control,
.step-form select.form-control:focus,
.map-list-top .form-control,
.map-list-top select,
.type-select select,
.type-select.filter-box.location-type-top select,
.filter-card .form-group select,
.form-control.non-disabled:disabled {
    background-color: var(--th-input-bg) !important;
    color: var(--th-input-text) !important;
}

.form-control,
.form-select,
select.form-control,
.map-list-top .form-control,
.map-list-top select,
.type-select select,
.filter-card .form-group select {
    border-color: var(--th-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--th-primary);
    box-shadow: 0 0 0 3px var(--th-primary-soft);
}

input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--th-placeholder) !important;
    opacity: 1 !important;
}

.user-manage-top input[type='text'],
.user-manage-top .data-search button.btn {
    background: var(--th-surface-alt) !important;
    color: var(--th-text);
    border-color: var(--th-border);
}

.user-manage-top .data-search button.btn svg path {
    fill: var(--th-text-muted);
}

.form-control.custom-disabled,
.form-select.custom-disabled,
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--th-surface-alt) !important;
    color: var(--th-text-muted);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--th-input-bg) !important;
    color: var(--th-input-text) !important;
    border-color: var(--th-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-results__option {
    color: var(--th-input-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--th-primary) !important;
    color: var(--th-primary-contrast) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--th-primary-soft) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

body .amsify-suggestags-input-area .amsify-select-tag.col-bg,
.amsify-suggestags-area .amsify-suggestags-input-area .amsify-suggestags-input {
    background: var(--th-surface-alt);
    color: var(--th-text);
    border-color: var(--th-border);
}

/* The status toggle's track is a deliberate fixed green/grey, so its knob and
   label stay literal rather than following the surface colour — which would
   otherwise turn the knob dark-on-green under a dark theme. */
.slider::before {
    background: #ffffff;
}

.slider::after {
    color: #ffffff;
}

/*--------------------------------------------------------------------------
  9. Modals, dropdowns and SweetAlert
--------------------------------------------------------------------------*/
.modal-content {
    background: var(--th-surface);
    color: var(--th-text);
    border-color: var(--th-border);
}

.modal-header,
.modal-footer {
    border-color: var(--th-border);
}

.modal-title {
    color: var(--th-heading);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--th-overlay);
}

.dropdown-menu {
    background: var(--th-surface);
    border-color: var(--th-border);
}

.dropdown-item {
    color: var(--th-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--th-surface-alt);
    color: var(--th-text);
}

.swal2-popup {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
}

.swal2-title,
.swal2-html-container {
    color: var(--th-text) !important;
}

/*--------------------------------------------------------------------------
  9b. Components with a hardcoded light background

  These were written as near-white or pale-tint panels while the text inside
  them comes from the theme. Left alone they turn light-on-light under a dark
  theme, so each is re-expressed in theme colours.
--------------------------------------------------------------------------*/
.export-modal {
    background: var(--th-surface);
    color: var(--th-text);
    box-shadow: 0 20px 40px var(--th-shadow-strong);
}

.lead-data-row:nth-child(odd) {
    background-color: var(--th-surface-alt);
    border-color: var(--th-border);
}

.latest-note,
.form-tab .nav-tabs,
.warning-block {
    border-color: var(--th-border);
}

.warning-block,
.promotion-card.unread_notification,
.property-card ul li.list-total-sold,
.upload-label,
.upload-label:hover {
    background: var(--th-primary-soft);
    color: var(--th-text);
}

.upload-label,
.upload-label:hover {
    border-color: var(--th-primary);
}

/* A deliberately dark chip in the default theme — reuse the sidebar pair, which
   every theme guarantees to be a readable foreground/background combination. */
.emi-btn a.btn.emi-btn-link {
    background: var(--th-sidebar-bg) !important;
    color: var(--th-sidebar-text) !important;
}

.steps li span {
    background: var(--th-primary-soft);
    border-color: var(--th-primary);
    color: var(--th-text);
}

.steps li.active span {
    background: var(--th-primary);
    color: var(--th-primary-contrast);
}

/*--------------------------------------------------------------------------
  9c. Bootstrap colour utilities

  Utilities like `.bg-white` and `.text-dark` name a literal colour, so markup
  using them keeps a white panel or near-black text whatever the theme does — the
  panel then holds themed (light) text, or themed panels hold near-black text.
  Either way it reads as invisible. Re-pointing the utilities at the palette keeps
  the markup's INTENT ("a plain panel", "strong text") and lets the theme supply
  the colour. !important is required: the utilities declare it too.
--------------------------------------------------------------------------*/
.bg-white,
.bg-body {
    background-color: var(--th-surface) !important;
}

.bg-light,
.bg-body-secondary,
.bg-body-tertiary,
.table-light {
    background-color: var(--th-surface-alt) !important;
}

.text-dark,
.text-black,
.text-body,
.text-body-emphasis {
    color: var(--th-text) !important;
}

.text-muted,
.text-body-secondary,
.text-body-tertiary {
    color: var(--th-text-muted) !important;
}

/* `.text-primary` marks inline actions ("Edit", "View"); the raw brand colour is
   often too light to read as text, so it uses the contrast-checked link colour. */
.text-primary {
    color: var(--th-link) !important;
}

/* Exception to the .text-dark rule above: paired with a STATUS background the
   label sits on a fixed amber/green/red chip that does not follow the palette, so
   it has to stay literally dark. (`.bg-light` is excluded — it IS themed, so its
   label should follow the theme.) */
.bg-warning.text-dark,
.bg-success.text-dark,
.bg-danger.text-dark,
.bg-info.text-dark {
    color: #111827 !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--th-border) !important;
}

/*--------------------------------------------------------------------------
  9d. Hardcoded neutral text in style.css

  Every rule below set a fixed grey or near-black on a panel that is now themed,
  which is what made body and secondary text disappear under a dark theme.

  Deliberately NOT listed: text whose own background is also a fixed pale tint
  (status pills, `.total-unit`, `.project-auth-box`, the toggle track). Those pairs
  are self-consistent and stay legible in either mode.
--------------------------------------------------------------------------*/
.auther-detail,
.project-description h4,
.amenities ul li,
.key-highlights ul li,
.summry-block .nav-tabs .nav-link,
.info-row label,
.info-row span,
.percentage,
.property-card h3 a,
.filter-card .form-group select,
.upload-label h4,
.recent_activity_ul li .right_recent_activity_container .recent_activity_data_li .recent_activity_data .content {
    color: var(--th-text);
}

.notification-content p,
.time,
.location,
.post-date,
.price label,
.project-description p,
.upload-label p,
.upload-label small,
.export-text {
    color: var(--th-text-muted);
}

/* These were declared !important in style.css, so the override needs the same
   weight (and, for .view-file, the :hover state matched selector-for-selector). */
.assign-btn a {
    color: var(--th-text) !important;
}

.btn.view-file,
.btn.view-file:hover {
    background: var(--th-surface-alt) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--th-text-muted) !important;
}

.progress-step .bg-light {
    background-color: var(--th-surface-alt) !important;
}

/* Upload drop zones: a near-white #fffdf6 holding themed instructions. */
.main-image-zone,
#gallery-zone,
#masterPlanZone,
.drop-zone {
    background: var(--th-primary-soft) !important;
    color: var(--th-text);
}

.drop-zone:hover {
    background: var(--th-surface-alt) !important;
}

/*--------------------------------------------------------------------------
  9e. Hardcoded near-white panels

  Same problem from the other side: a fixed pale background holding themed text.
--------------------------------------------------------------------------*/
.profile-card {
    background: var(--th-surface-alt);
    border-color: var(--th-border);
}

ul.user-data li {
    border-top-color: var(--th-border);
}

.advantages-box h4,
.filter-tab:hover,
.pdf-img {
    background: var(--th-surface-alt);
}

.progress-bar {
    background: var(--th-border);
}

.user-name,
.profile-card strong {
    color: var(--th-text);
}

/* Inline actions styled with the raw brand gold: 1.9:1 on a white card. The link
   colour is contrast-checked against the surface in every theme. */
.edit-link,
.upload-label p span {
    color: var(--th-link);
}

.basic-info .text-info {
    color: var(--th-link) !important;
}

/* Dashboard KPI figures are deliberately semantic (green = users, gold = uploads,
   indigo = logins, blue = revenue), so they are not re-pointed at the palette —
   only lifted to a tint that clears 4.5:1 on a dark surface. The mid-tones below
   measured 3.2:1, 2.1:1 and worse. */
[data-th-mode='dark'] .da-dashboard-user .dashboard-post-detail h3 {
    color: #22c55e;
}

[data-th-mode='dark'] .da-upload-file .dashboard-post-detail h3 {
    color: #d9a21b;
}

[data-th-mode='dark'] .da-login-active .dashboard-post-detail h3 {
    color: #818cf8;
}

[data-th-mode='dark'] .da-revenue .dashboard-post-detail h3 {
    color: #60a5fa;
}

/*--------------------------------------------------------------------------
  9f. Public pages (login, sign-up, complete-profile)

  Signed-out pages render in the platform default theme. The form side is a
  normal surface, but the left-hand side sits on a photograph — text there must
  stay literal white regardless of the palette, so those rules deliberately do
  NOT follow --th-surface (which the --white-color bridge would otherwise give
  them).
--------------------------------------------------------------------------*/
.login-page-block {
    background: var(--th-surface);
}

.login-page .form-label,
.terms-conditions label,
.terms-conditions p {
    color: var(--th-text);
}

.already-log,
.continue-with label,
.login-content .form-note {
    color: var(--th-text-muted);
}

.continue-link button {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    box-shadow: 0 0 10px var(--th-shadow);
}

/* Over the hero photograph — always white on the dark image overlay. */
.login-txt h1,
.login-txt h3,
.login-txt p {
    color: #ffffff;
}

.login-txt a {
    background: #ffffff;
    color: #111827;
}

/*
| The form column is framed by two large decorative PNGs (login-top-bg /
| login-bottom-bg) drawn as :before and :after. They are pale artwork made for a
| white panel: over a dark surface they read as two washed-out bands across the top
| and bottom of the page rather than as a frame, so a dark theme drops them. The
| panel keeps its themed surface and the form stays centred.
*/
[data-th-mode='dark'] .login-page .col-md-5:before,
[data-th-mode='dark'] .login-page .col-md-5:after,
[data-th-mode='dark'] .login-page .reg-page-block .col-md-5:before,
[data-th-mode='dark'] .login-page .reg-page-block .col-md-5:after {
    display: none;
}

/* The Google and Facebook assets are fixed-colour brand lockups, including a grey
   wordmark that all but vanishes on a dark panel. Inverting them would break the
   brand marks, so they sit on a light chip instead — the usual treatment for social
   buttons in a dark UI. */
[data-th-mode='dark'] .continue-link > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 16px;
    box-shadow: 0 0 10px var(--th-shadow);
}

/*--------------------------------------------------------------------------
  10. Dark-mode asset fixes

  A handful of chrome elements are fixed-colour raster/SVG assets authored for a
  light UI. Rather than ship a duplicate dark icon set, they are inverted (or
  swapped for an inline data URI) only when the theme's mode is dark.
--------------------------------------------------------------------------*/
[data-th-mode='dark'] .notification-link img {
    filter: invert(1) brightness(1.7);
}

/* The carousel arrow is a dark glyph baked into the button's background image.
   Inverting the button would wash out glyph and disc together, so the disc keeps
   a light fill instead. */
[data-th-mode='dark'] .project-detail .slick-arrow {
    background-color: #f3f4f6;
}

[data-th-mode='dark'] select.form-control,
[data-th-mode='dark'] .form-select,
[data-th-mode='dark'] .step-form select.form-control,
[data-th-mode='dark'] .step-form select.form-control:focus,
[data-th-mode='dark'] .form-select:focus,
[data-th-mode='dark'] .type-select select,
[data-th-mode='dark'] .map-list-top select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA3B0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

/* Select2 draws its caret as a fixed dark-ink background image on its own element,
   so inverting that element flips only the caret. */
[data-th-mode='dark'] .select2-container--default .select2-selection--single .select2-selection__arrow {
    filter: invert(1) brightness(1.6);
}

[data-th-mode='dark'] #loader {
    background: rgba(3, 7, 18, 0.85) !important;
    color: var(--th-text);
}

/*--------------------------------------------------------------------------
  11. Settings -> Theme page

  The picker, the custom-theme builder and the preview mockup. The mockup is
  deliberately painted from --th-* variables set INLINE on its own element, so
  the same markup can show any theme without touching the live page.
--------------------------------------------------------------------------*/
.theme-section {
    padding: 20px 22px 22px 22px;
}

.theme-page .theme-section + .theme-section {
    margin-top: 24px;
}

.theme-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.theme-section-head h2 {
    font-size: 18px;
}

.theme-section-head p {
    color: var(--th-text-muted);
    font-size: 14px;
    padding: 0;
    margin: 4px 0 0 0;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

/* ---- theme card ---- */
.theme-card {
    border: 1px solid var(--th-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--th-surface);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.theme-card:hover {
    box-shadow: 0 12px 30px var(--th-shadow);
    transform: translateY(-2px);
}

.theme-card.is-active {
    border-color: var(--th-primary);
    box-shadow: 0 0 0 2px var(--th-primary-soft);
}

.theme-card-body {
    padding: 14px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.theme-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.theme-card-title h3 {
    font-size: 16px;
    margin: 0;
}

.theme-card p.theme-card-desc {
    font-size: 13px;
    color: var(--th-text-muted);
    margin: 0;
    padding: 0;
    min-height: 34px;
}

.theme-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--th-border);
    color: var(--th-text-muted);
    white-space: nowrap;
}

.theme-badge.is-mode-dark {
    background: #111827;
    border-color: #111827;
    color: #f9fafb;
}

.theme-badge.is-mode-light {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #111827;
}

.theme-badge.is-current {
    background: var(--th-primary);
    border-color: var(--th-primary);
    color: var(--th-primary-contrast);
}

.theme-badge.is-default {
    background: var(--th-primary-soft);
    border-color: var(--th-primary);
    color: var(--th-text);
}

/* ---- the platform default, shown above the picker ---- */
.default-theme-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--th-border);
    border-radius: 14px;
    background: var(--th-surface-alt);
}

.default-theme-row .default-theme-thumb {
    width: 200px;
    flex: 0 0 200px;
    height: auto;
    min-height: 112px;
    border: 1px solid var(--th-border);
    border-radius: 10px;
    overflow: hidden;
}

.default-theme-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.default-theme-copy .theme-card-desc {
    min-height: 0;
}

@media (max-width: 767px) {
    .default-theme-row {
        flex-direction: column;
    }

    .default-theme-row .default-theme-thumb {
        width: 100%;
        flex: 0 0 auto;
        height: 112px;
    }
}

.theme-swatches {
    display: flex;
    gap: 6px;
}

.theme-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.theme-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

.theme-card-actions .btn {
    padding: 7px 16px !important;
    font-size: 14px;
}

.theme-card-actions form {
    margin: 0;
}

/* A compact, non-interactive thumbnail of the theme on each card. */
.theme-thumb {
    display: flex;
    height: 96px;
    background: var(--th-body-bg);
    border-bottom: 1px solid var(--th-border);
}

.theme-thumb .tt-side {
    width: 34%;
    background: var(--th-sidebar-bg);
    padding: 9px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.theme-thumb .tt-side i {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: var(--th-sidebar-muted);
    opacity: 0.55;
}

.theme-thumb .tt-side i.is-active {
    background: var(--th-sidebar-active-bg);
    opacity: 1;
    height: 12px;
}

.theme-thumb .tt-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.theme-thumb .tt-head {
    height: 20px;
    background: var(--th-header-bg);
    border-bottom: 1px solid var(--th-border);
}

.theme-thumb .tt-body {
    flex: 1;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.theme-thumb .tt-card {
    flex: 1;
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.theme-thumb .tt-line {
    height: 5px;
    border-radius: 3px;
    background: var(--th-text);
    opacity: 0.25;
}

.theme-thumb .tt-line.is-title {
    width: 55%;
    height: 7px;
    background: var(--th-heading);
    opacity: 0.85;
}

.theme-thumb .tt-btn {
    width: 40%;
    height: 9px;
    border-radius: 999px;
    background: var(--th-primary);
    margin-top: auto;
}

/* ---- full preview mockup (modal + builder) ---- */
.theme-preview {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--th-border);
    background: var(--th-body-bg);
    color: var(--th-text);
    font-size: 13px;
}

.theme-preview * {
    box-sizing: border-box;
}

.tp-shell {
    display: flex;
    min-height: 340px;
}

.tp-sidebar {
    width: 168px;
    flex: 0 0 168px;
    background: var(--th-sidebar-bg);
    padding: 14px 0 14px 12px;
}

.tp-brand {
    color: var(--th-sidebar-text);
    font-weight: 600;
    font-size: 14px;
    padding: 0 12px 16px 8px;
    letter-spacing: 0.01em;
}

.tp-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-nav li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    margin: 0 0 4px 0;
    border-radius: 20px 0 0 20px;
    color: var(--th-sidebar-text);
    font-size: 12.5px;
    font-weight: 500;
}

.tp-nav li .tp-ico {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: currentColor;
    opacity: 0.55;
    flex: 0 0 14px;
}

.tp-nav li.is-hover {
    background: var(--th-sidebar-hover-bg);
    color: var(--th-sidebar-hover-text);
}

.tp-nav li.is-active {
    background: var(--th-sidebar-active-bg);
    color: var(--th-sidebar-active-text);
}

.tp-nav li.is-active .tp-ico,
.tp-nav li.is-hover .tp-ico {
    opacity: 1;
}

.tp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tp-header {
    background: var(--th-header-bg);
    color: var(--th-header-text);
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--th-header-border);
}

.tp-header .tp-title {
    font-weight: 600;
    font-size: 13.5px;
}

.tp-header .tp-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--th-header-muted);
    font-size: 12px;
}

.tp-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--th-primary);
}

.tp-body {
    padding: 14px 16px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.tp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tp-stat {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: 9px;
    padding: 9px 11px;
    box-shadow: 0 1px 6px var(--th-shadow);
}

.tp-stat span {
    display: block;
    color: var(--th-text-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tp-stat strong {
    display: block;
    color: var(--th-heading);
    font-size: 17px;
    font-weight: 600;
    margin-top: 3px;
}

.tp-card {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: 11px;
    padding: 13px 14px;
    box-shadow: 0 1px 8px var(--th-shadow);
}

.tp-card h4 {
    color: var(--th-heading);
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.tp-card .tp-muted {
    color: var(--th-text-muted);
    font-size: 12px;
    margin: 0 0 10px 0;
    padding: 0;
}

.tp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tp-table th {
    background: var(--th-table-head-bg);
    color: var(--th-table-head-text);
    text-align: left;
    font-weight: 600;
    padding: 7px 9px;
}

.tp-table th:first-child {
    border-radius: 7px 0 0 7px;
}

.tp-table th:last-child {
    border-radius: 0 7px 7px 0;
}

.tp-table td {
    color: var(--th-text);
    padding: 8px 9px;
    border-bottom: 1px solid var(--th-border);
}

.tp-table tr:last-child td {
    border-bottom: none;
}

.tp-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--th-primary-soft);
    color: var(--th-text);
    font-size: 11px;
    font-weight: 600;
}

.tp-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.tp-btn {
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    background: var(--th-primary);
    color: var(--th-primary-contrast);
}

.tp-btn.is-ghost {
    background: var(--th-surface-alt);
    color: var(--th-text);
    border: 1px solid var(--th-border);
}

.tp-input {
    flex: 1;
    min-width: 120px;
    background: var(--th-input-bg);
    color: var(--th-input-text);
    border: 1px solid var(--th-border);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12px;
}

.tp-link {
    color: var(--th-link);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

/* ---- custom theme builder ---- */
.theme-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.theme-builder .builder-preview {
    position: sticky;
    top: 90px;
}

.theme-field-group {
    border: 1px solid var(--th-border);
    border-radius: 12px;
    padding: 14px 16px 6px 16px;
    margin-bottom: 14px;
}

.theme-field-group > h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--th-text-muted);
    margin: 0 0 12px 0;
}

.theme-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 14px 0;
}

.theme-field .field-label {
    flex: 1;
    min-width: 0;
}

.theme-field .field-label strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--th-text);
}

.theme-field .field-label small {
    display: block;
    color: var(--th-text-muted);
    font-size: 12px;
}

.theme-field .field-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.theme-field input[type='color'] {
    width: 42px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--th-border);
    border-radius: 8px;
    background: var(--th-input-bg);
    cursor: pointer;
}

.theme-field input[type='text'] {
    width: 96px;
    height: 34px;
    border-radius: 8px;
    padding: 0 10px;
    font-family: monospace;
    font-size: 13px;
    text-transform: uppercase;
    background: var(--th-input-bg);
    color: var(--th-input-text);
    border: 1px solid var(--th-border);
}

.theme-field.has-error input[type='text'] {
    border-color: #dc2626;
}

.mode-toggle {
    display: inline-flex;
    background: var(--th-surface-alt);
    border: 1px solid var(--th-border);
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
}

.mode-toggle label {
    margin: 0;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--th-text-muted);
}

.mode-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mode-toggle label.is-selected {
    background: var(--th-primary);
    color: var(--th-primary-contrast);
}

.builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: flex-end;
    margin-bottom: 18px;
}

.builder-toolbar .toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.builder-toolbar label.form-label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.builder-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.contrast-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 12.5px;
    background: var(--th-surface-alt);
    color: var(--th-text-muted);
    border: 1px solid var(--th-border);
}

.contrast-note.is-warning {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.35);
    color: #b91c1c;
}

[data-th-mode='dark'] .contrast-note.is-warning {
    color: #fca5a5;
}

@media (max-width: 1199px) {
    .theme-builder {
        grid-template-columns: minmax(0, 1fr);
    }

    .theme-builder .builder-preview {
        position: static;
    }
}

@media (max-width: 575px) {
    .theme-field {
        flex-wrap: wrap;
    }

    .tp-shell {
        min-height: 0;
    }

    .tp-sidebar {
        width: 116px;
        flex: 0 0 116px;
    }

    .tp-stats {
        grid-template-columns: 1fr;
    }
}