/* ===========================
   THEME TOKENS (Dark baseline)
   =========================== */

:root {
    /* base */
    --bg: #1E1E1E;
    --bg-1: #ffffff;
    --bg-2: #383838;
    --text: #ffffff;
    --text-1: #000000;
    --text-2: #000000;
    --text-3: #ffffff;
    --muted-text: #a8a8a8;

    /* surfaces */
    --surface-1: #383838;
    --surface-2: #3F3F41;
    --surface-3: #444;
    --surface-4: #333;
    --surface-5: #1e1e1e;
    --surface-6: rgba(51, 51, 51, 0.95);

    /* borders / dividers */
    --border-1: transparent;
    --border-2: #616161;
    --border-3: #676767;
    --border-4: #fdfdfd;
    --divider: #333333;

    /* buttons */
    --btn-bg: #ffffff;
    --btn-text: #000000;
    --btn-bg-hover: #f0f0f0;

    /* accents */
    --accent: #a1a1a1;
    --accent-1: #fafafa;
    --success-bg: #4A7349;
    --success-text: #71FD6F;
    --info: #3498db;
    --warn: #fcb813;
    --danger: #ff1e30;

    /* inputs */
    --input-bg: #fdfdfd;
    --input-text: #171717;
    --input-placeholder: #8b8b8b;

    /* spinner */
    --spin-ring: rgb(115,115,115);
    --spin-top: #000000;

    /* overlays */
    --overlay-light: rgba(128, 128, 128, 0.8);
    --overlay-dark: #0000004d;

    /* extras */
    --shadow: 0 6px 24px rgba(0,0,0,.35);

    /* icons */
    --icon-filter: invert(0);

    /* table */
    --table-head: #1e1e1e;
    --table-head-text: #ffffff;
}

/* ===========================
   LIGHT THEME
   =========================== */
.theme-mode--light {
    /* Base */
    --bg: #dfdfdf;
    --bg-1: #919191;
    --bg-2: #c8c8c8;
    --text: #111111;
    --text-1: #000000;
    --text-2: #ffffff;
    --text-3: #ffffff;
    --muted-text: #6b7280;

    /* Surfaces */
    --surface-1: #ffffff;
    --surface-2: #f3f4f6;
    --surface-3: #ffffff;
    --surface-4: #f1f2f4;
    --surface-5: #dddddd;
    --surface-6: rgba(128, 128, 128, 0.95);

    /* Borders / dividers */
    --border-1: #e5e7eb;
    --border-2: #d1d5db;
    --border-3: #bdbdbd;
    --border-4: #101010;
    --divider: #e5e7eb;

    /* Buttons */
    --btn-bg: #111111;
    --btn-text: #ffffff;
    --btn-bg-hover: #1f2937;

    /* Accents */
    --accent: #717171;
    --accent-1: #000000;
    --success-bg: #ecfdf5;
    --success-text: #047857;
    --info: #3b82f6;
    --warn: #b45309;
    --danger: #dc2626;

    /* Inputs */
    --input-bg: #ffffff;
    --input-text: #111111;
    --input-placeholder: #9ca3af;

    /* Spinner */
    --spin-ring: #e5e7eb;
    --spin-top: #111111;

    /* Overlays */
    --overlay-light: rgba(128, 128, 128, 0.8);
    --overlay-dark: rgba(0,0,0,0.15);

    /* Shadow */
    --shadow: 0 4px 20px rgba(0,0,0,0.06);

    /* Icons */
    --icon-filter: invert(1);

    /* Table */
    --table-head: #d5d5d5;
    --table-head-text: #000000;
}


/* ===========================
   GLOBAL BASE
   =========================== */

html, body { background: var(--bg); color: var(--text); }
a { color: var(--accent); }
a:hover { opacity: .9; }
hr { border-color: var(--divider); }

input, select, textarea {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--border-1);
}
input::placeholder, textarea::placeholder { color: var(--input-placeholder); }

.button, .btn {
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow);
}
/*.button:hover, .btn:hover { background: var(--btn-bg-hover); }*/

.card, .panel, .widget, modal:not(.sl-block-content.modal), .dropdown-menu {
    background: var(--surface-1);
    color: var(--text);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow);
}

table { border-color: var(--border-1); border-collapse: collapse; }
table thead th { color: var(--text); background: var(--surface-5); border-bottom: 1px solid var(--border-1); }
/*table tbody td { border-top: 1px solid var(--border-3); color: var(--text); }*/

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }
*::-webkit-scrollbar-track { background: var(--surface-2); }

svg:not(#hicrm-map-app-root svg, .palette svg, .PinturaRoot svg) { color: var(--text); fill: currentColor; }

/* utilities */
.bg-surface-1 { background: var(--surface-1) !important; }
.bg-surface-2 { background: var(--surface-2) !important; }
.text-muted { color: var(--muted-text) !important; }
.border-1 { border: 1px solid var(--border-1) !important; }
.border-2 { border: 1px solid var(--border-2) !important; }

/* ===========================
   APP-SPECIFIC ADAPTERS
   =========================== */

/* Root sections */
body.page-template-template-projects-page { background: var(--bg) !important; color: var(--text) !important; }
#projects-root { color: var(--text); }

/* Header / wrappers */
#projects-root .header,
#projects-root .header-wrapper { background: var(--surface-1) !important; }
#projects-root .header.minimal-header { background: var(--surface-1) !important; }

/* Search */
#projects-root .search-bar input,
#projects-root  .new-financing-application-tab-select-input {
    background: var(--surface-2) !important;
    /*color: var(--input-text) !important;*/
    border: 1px solid var(--border-1) !important;
}
#projects-root .search-bar button {
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: 1px solid var(--border-1) !important;
    box-shadow: var(--shadow) !important;
}
#projects-root .search-bar button:hover { background: var(--btn-bg-hover) !important; }

/* Icons */
#projects-root .home-navigation .custom-tab-icon-item img,
#projects-root .login-button-container .custom-tab-icon-item img,
#projects-root .navigation .custom-tab-icon-item img,
#projects-root .project-filter h4::after,
#projects-root .checklist-item img,
#projects-root .detail-item:not(.detail-item--branch)::before,
#projects-root  .project-filter-status::after,
#projects-root .checklist-details .back-button img,
#projects-root .close-button img,
#projects-root .close-modal-button,
#projects-root .reorder-toggle img,
#projects-root .voucher-modal-close,
#projects-root .financing-company-modal-create-close,
#projects-root .info-plan-icon,
#projects-root .edit-code,
#projects-root .delete-code,
#projects-root .delete-code-rate,
#projects-root .arrow-plan,
#projects-root .new-financing-application-tab-select-input-arrow {
    filter: var(--icon-filter);
}

/* Icons not variables */
.theme-mode--dark #projects-root .detail-item--branch::before,
.theme-mode--dark .presentations-analytics-wrapper .presentations-analytics-selector h4::after  {
    filter: invert(1);
}

.theme-mode--dark #projects-root .view-statuses-btn::before {
    filter: invert(0);
}

.theme-mode--dark #chalkboard-button svg,
.theme-mode--dark #chalkboard-button-notes svg {
    fill: #000 !important;
}

.theme-mode--light #projects-root .view-statuses-btn::before,
#projects-root .external-link-icon {
    filter: invert(1);
}

#projects-root .loader-container::before,
#projects-root .spinner,
#projects-root .preloader::before,
#projects-root .loader-presentation {
    border-color: var(--spin-ring);
    border-top-color: var(--spin-top);
}


.theme-mode--light #projects-root .presentations-item {
    box-shadow: none;
}

#projects-root .project-filter.open .category-list,
#projects-root .project-filter.open .filter-content {
    border: none !important;
}


#projects-root .customers-table th {
    background-color: var(--table-head) !important;
    color: var(--table-head-text) !important;
}

#projects-root .voucher-info-table thead th {
    background: var(--surface-4);
}


/* Generic buttons in app */
#projects-root .load-more-btn,
#projects-root .sync-button,
#projects-root .create-button,
#projects-root .default-button,
#projects-root .open-crm-button,
#projects-root .edit-button,
#projects-root .view-statuses-btn,
#projects-root .demographic-details__check-demographic {
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: 1px solid var(--border-1) !important;
    box-shadow: var(--shadow) !important;
}
.load-more-btn:hover,
#projects-root .default-button:hover,
#projects-root .open-crm-button:hover { background: var(--btn-bg-hover) !important; }

/* Active states / filters */
#projects-root .status-item.active,
#projects-root .category-heading.active,
#project-status:focus,
#project-status:active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* Open (success-like) */
#projects-root .open-button {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
    border: 1px solid var(--border-1) !important;
}

/* Cards / panels / overlays */
#projects-root .project-tile,
#projects-root .project-details,
#projects-root .project-form-wrap,
#projects-root #popup-create-lead .popup-create-lead-wrap,
#projects-root .hicrm-modal__dialog,
.voucher-modal-popup.voucher-modal-dark {
    background: var(--bg-2) !important;
    color: var(--text) !important;
}

.payment-tilled.popup-overlay,
#projects-root .demographic-popup .popup-container,
.edit-lead-modal {
    background: var(--bg) !important;
}

.edit-lead-modal {
    color: var(--text) !important;
}

#projects-root .hicrm-modal__close {
    background: var(--accent) !important;
}

#projects-root .division-modal .tabs-container {
    background: var(--bg-2) !important;
}

#projects-root .company-block,
#projects-root .brand-block,
#projects-root .region-block,
#projects-root .branch-block {
    border-top: 1px solid var(--border-4) !important;
}

#projects-root .admin-page-wrap .users-list .user-row {
    border-bottom: 1px solid var(--border-4) !important;
}

#projects-root #popup-create-lead .popup-create-lead-wrap {
    border: 1px solid var(--border-1) !important;
    box-shadow: var(--shadow) !important;
}

#projects-root .project-form-wrap select,
#projects-root .popup-create-lead-wrap select,
#projects-root  .hicrm-popup-content-current-branch select,
#projects-root .branch-selector {
    background: var(--input-bg) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55% !important;
}

#projects-root .checklist-item {
    border: 1px solid var(--border-3) !important;
}

/* Dividers & borders inside */
#projects-root .project-tile p + p,
#projects-root .status-groups hr,
#projects-root .navigation button::after,
#projects-root .project-details .detail-item + .detail-item,
.presentation-analytics-table .analytics-table thead,
.presentation-analytics-table .analytics-table .presentations-tab-row {
    border-color: var(--border-3) !important;
}

/* Bottom navigation */
#projects-root .navigation {
    background: var(--surface-1) !important;
    color: var(--text) !important;
    box-shadow: 0 -10px 10px 0 rgba(0,0,0,.26);
}
#projects-root .navigation button { color: var(--text) !important; }
#projects-root .navigation button:hover { background: var(--surface-2) !important; }

/* Inputs / selects across forms & popups */
#projects-root .project-details .project-details-content input,
#projects-root .project-form-wrap input,
#projects-root #popup-create-lead .popup-create-lead-wrap input,
#projects-root .checklist-details .field-answer-input,
.payment-tilled .payment-input,
.payment-tilled .amount-input,
.payment-tilled .link-input,
.payment-tilled .new-card-details .form-control,
.payment-tilled .payment-details .form-control,
.payment-tilled .notes-group .form-control,
.tilled-card-field,
.tilled-ach-field,
#projects-root .project-notes .project-notes-textarea {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--border-1) !important;
}
#projects-root .project-notes .project-notes-label,
#projects-root .timestamp,
#projects-root .offline-message,
#projects-root .checklist-details .audit-log,
#projects-root .project-notes .loading-notes { color: var(--muted-text) !important; }

/* Filter/dropdown surfaces */
#projects-root .project-filter h4,
#projects-root .project-filter .category-list,
#projects-root .filter-content,
.presentations-analytics-wrapper .presentations-analytics-selector h4,
.presentations-analytics-selector .presentations-analytics-list,
.project-filter-status select {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-1) !important;
}

#projects-root .project-details-wrapper {
    background: var(--bg) !important;
}

.vouchers-page tbody td {
    background: var(--surface-1) !important;
    color: var(--text) !important;
}

/* Tabs */
#projects-root .tabs-container { background: var(--bg) !important; }
#projects-root .tab-button { color: var(--muted-text) !important; }
#projects-root .tab-button.active { color: var(--text) !important; border-bottom: 3px solid var(--text) !important; }
#projects-root .tab-underline { background: var(--border-2) !important; }


/* Loaders / overlays */
#projects-root .loader-container { background: var(--overlay-light) !important; color: var(--text) !important; }
#projects-root .loader::after,
#projects-root .preloader::before {
    border-color: var(--spin-ring);
    border-top-color: var(--spin-top);
}
.loader-overlay-presentation .loader-text-presentation { color: var(--text) !important; }

/* Lightbox */
#projects-root .lightbox { background: rgba(0, 0, 0, 0.8) !important; }
#projects-root .lightbox-footer button { color: var(--text) !important; }

/* Notifications / offline / badges */
#projects-root .notification { background: var(--overlay-dark) !important; color: var(--text) !important; }
#projects-root .offline-message { color: var(--warn) !important; }
.live-status { background: var(--danger) !important; color: #fff !important; }

/* Project tiles */
#projects-root .project-tile,
.edit-lead-modal .project-card { background: var(--surface-3) !important; border: 1px solid var(--border-1) !important; box-shadow: var(--shadow) !important; }
#projects-root .project-tile h3, #projects-root .project-tile p { color: var(--text) !important; }
#projects-root .project-tile img,
#projects-root .media-preview img,
#projects-root .media-preview video { background: #706f6f; }

/* Progress bar */
#progress-bar { background: var(--surface-2) !important; }
#progress-bar::-webkit-progress-value,
#progress-bar::-moz-progress-bar { background: var(--accent) !important; }

/* Timeline */
.timeline-container { background: var(--bg) !important; color: var(--text) !important; }
.timeline-image, .timeline-image-investment {
    background: var(--surface-3) !important;
    border: 1px solid var(--border-1) !important;
}
.timeline-text { color: var(--text) !important; }
.timeline-duration { color: var(--muted-text) !important; }
.timeline-wrapper::before { border-left-color: #898989 !important; }

/* Home/login navigation */
#projects-root .home-navigation .custom-tab-icon-item,
.login-button-container .custom-tab-icon-item {
    color: var(--text) !important; background: transparent !important;
}

/* Presentation analytics */
.presentation-analytics-table { color: var(--text) !important; }
.presentations-analytics-wrapper .presentations-analytics-selector h4,
.presentations-analytics-selector .presentations-analytics-list {
    background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border-1) !important;
}
.presentation-analytics-table .analytics-table .analytics-table__button,
.presentations-analytics-pagination__button,
.presentations-analytics-pagination__number-page {
    background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border-1) !important;
}
.presentations-analytics-pagination__number-page.active { opacity: .6; }

/* Popup Demographic */
#projects-root .demographic-popup .demographic-details-title,
#projects-root .demographic-popup .demographic-details-value { color: var(--text) !important; }

/* Tilled payment */
.payment-tilled .popup-header,
.payment-tilled .popup-tabs .tab,
.payment-tilled .popup-content,
.payment-tilled .payment-history-table th,
.payment-tilled .payment-history-table td,
.payment-tilled .payment-type-label,
.payment-tilled .payment-links-container,
.payment-tilled .saved-link,
.payment-tilled .link-label {
    color: var(--text) !important;
}
.payment-tilled .payment-type-button,
.payment-tilled .create-link-button,
.payment-tilled .copy-link-button,
.payment-tilled .payment-method-button,
#tilled-payment-form button,
.tilled-ach-form button,
.delete-card-button {
    color: var(--text) !important;
    border: 1px solid var(--border-3) !important;
    background: transparent !important;
}
.payment-tilled .payment-method-button.active,
.payment-tilled .payment-type-button.active { border: 1px solid var(--accent) !important; background: var(--bg-1) !important; color: var(--text-1) !important; }
.payment-tilled .charge-button { background: #00ff00 !important; color: #000 !important; border: 1px solid var(--border-1) !important; }

.payment-tilled .credit-card-option input[type="radio"],
.payment-tilled .ach-option input[type="radio"] {
    border: 4px solid var(--accent-1) !important
}

.payment-tilled .credit-card-option input[type="radio"]:checked::before,
.payment-tilled .ach-option input[type="radio"]:checked::before {
    background: var(--accent-1) !important;
}

.payment-tilled .tab.active,
.customers-table th, .customers-table td {
    border-bottom: 1px solid var(--border-4) !important;
}

.payment-tilled .payment-history-table thead::after,
.reveal-viewport .menu__output-container h2  {
    border-bottom: 4px solid var(--border-4) !important;
}


/* Misc */
#projects-root .footer { background: transparent !important; }
#projects-root .no-results { color: var(--text) !important; }


/* Vouchers */
#projects-root .voucher-info-table th, #projects-root .voucher-info-table td {
    color: var(--text) !important;
}

/* Upload Media */
.progress-container {
    background: var(--surface-6) !important;
}

.progress-container span {
    color: var(--text-3) !important;
}

/* Financing Company */
.financing-company-modal-tab-block.new-financing-application-form-block input {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--border-1) !important;
}

.new-financing-application-tab-table td {
    color: var(--text) !important;
}

.financing-company-view-modal {
    background: var(--bg);
}

.financing-company-view-modal-header,
.financing-company-manual-modal-create,
.financing-plans-to-offer-modal,
.request-payment-loan-body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

.financing-company-modal-tab-table tr {
    border-bottom: 1px solid var(--border-4) !important;
}

.financing-company-manual-tab-item.active:before {
    background: var(--accent-1) !important;
}

.financing-companies-page-block:first-child {
    border-right: 1px solid var(--border-4) !important;
}

.financing-af-search input,
.new-financing-application-tab-select-input {
    background: var(--accent) !important;
}

.request-payment-loan-pay-request input.financing-company-input[type="text"] {
   color: var(--text) !important;
}


/* ===========================
   RESPONSIVE TOUCH-UPS
   =========================== */
@media (max-width: 978px) { #projects-root .header { background: var(--surface-1) !important; } }
@media (max-width: 768px) {
    .payment-tilled.popup-overlay { background: var(--surface-1) !important; }
    #projects-root .tabs { background: transparent !important; }
}
@media (max-width: 700px) { #projects-root .project-details { background: var(--surface-1) !important; } }
@media (max-width: 500px) { #projects-root .navigation { background: var(--surface-1) !important; } }