/* ==========================================================================
   10X Digital theme for 10X One
   Loaded after css/style.css. Brand: lime #a9e324 on near-black, white surfaces.
   Rule of thumb: lime is a fill (with dark text on it); text/icons on white
   use the deeper "ink" green so they stay readable (WCAG AA).
   ========================================================================== */

:root {
    --x-lime: #a9e324;
    --x-lime-hover: #9ad01c;
    --x-lime-press: #8bbd17;
    --x-lime-soft: #f2fadf;
    --x-lime-soft-2: #e5f5bf;
    --x-ink: #4f7a06;          /* brand green for text on white: 5.1:1 */
    --x-ink-hover: #3f6205;
    --x-dark: #0f1412;         /* sidebar, headings, text on lime */
    --x-dark-2: #18201b;
    --x-dark-3: #232d27;
    --x-text: #1f2a24;
    --x-muted: #66736b;
    --x-border: #e3e9e2;
    --x-page: #f4f6f2;
    --x-focus: 0 0 0 .22rem rgba(169, 227, 36, .35);
    --x-radius: 10px;

    /* Template palette → 10X lime */
    --primary-50: #f2fadf;
    --primary-100: #e5f5bf;
    --primary-200: #d4ee95;
    --primary-300: #c2e766;
    --primary-400: #b3e43a;
    --primary-500: #a9e324;
    --primary-600: #4f7a06;
    --primary-700: #44690a;
    --primary-800: #38560b;
    --primary-900: #2c430b;
    --primary-light: rgba(169, 227, 36, .18);
    --primary-light-white: rgba(169, 227, 36, .28);
    --brand: var(--x-lime);
    --button-secondary: var(--x-lime-soft);
    --bg-color: var(--x-page);

    /* Bootstrap */
    --bs-primary: #4f7a06;
    --bs-primary-rgb: 79, 122, 6;
    --bs-link-color: #4f7a06;
    --bs-link-color-rgb: 79, 122, 6;
    --bs-link-hover-color: #3f6205;
    --bs-link-hover-color-rgb: 63, 98, 5;
    --bs-focus-ring-color: rgba(169, 227, 36, .35);
}

/* Dashboard tokens are set inline on the page; html:root wins over :root. */
html:root {
    /* dashboard + pipedrive */
    --ds-bg: #f4f6f2;
    --ds-border: #e3e9e2;
    --ds-text: #0f1412;
    --ds-accent: #4f7a06;
    --ds-accent-soft: #f2fadf;
    /* tasks board */
    --tk-bg: #f4f6f2;
    --tk-border: #e3e9e2;
    --tk-text: #0f1412;
    --tk-accent: #4f7a06;
    --tk-accent-s: #f2fadf;
    /* task detail */
    --ts-accent: #4f7a06;
    --ts-accent-s: #f2fadf;
    --ts-accent-d: #3f6205;
}

/* Page-level primary buttons use the lime fill like the rest of the app. */
.tk-btn-primary,
.ts-btn-primary {
    background: var(--x-lime) !important;
    border-color: var(--x-lime) !important;
    color: var(--x-dark) !important;
}

.tk-btn-primary:hover,
.ts-btn-primary:hover {
    background: var(--x-lime-hover) !important;
    border-color: var(--x-lime-hover) !important;
    color: var(--x-dark) !important;
}

[data-theme=dark] {
    --primary-50: rgba(169, 227, 36, .08);
    --primary-100: rgba(169, 227, 36, .14);
    --primary-600: #a9e324;   /* lime text reads well on dark */
    --primary-700: #b8ea4a;
    --x-page: #0b0f0d;
    --x-border: #26302a;
    --bg-color: #0b0f0d;
    --bs-link-color: #a9e324;
    --bs-link-hover-color: #c2ef5c;
}

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

::selection {
    background: var(--x-lime);
    color: var(--x-dark);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
    background-color: var(--x-dark) !important;
    border-inline-end: 0;
}

.sidebar .sidebar-logo {
    background: var(--x-dark);
    border-color: var(--x-dark-3);
}

.sidebar .sidebar-logo-wrap {
    background: var(--x-dark) !important;
}

.sidebar-menu-area {
    border-color: var(--x-dark-3);
}

.sidebar-menu-area::-webkit-scrollbar,
.sidebar-menu-area::-webkit-scrollbar-thumb {
    background-color: var(--x-dark);
}

.sidebar-menu-area:hover::-webkit-scrollbar-thumb {
    background-color: var(--x-dark-3);
}

.sidebar-menu li a {
    color: #b9c3bc;
    border-radius: 8px;
    transition: background-color .15s, color .15s;
}

.sidebar-menu li a:hover {
    color: #fff;
    background-color: var(--x-dark-2);
}

.sidebar-menu li > a.active-page,
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a {
    background-color: var(--x-lime);
    color: var(--x-dark) !important;
    font-weight: 600;
}

.sidebar-menu li > a.active-page .menu-icon,
.sidebar-menu li > a.active-page i,
.sidebar-menu li.dropdown.open > a i,
.sidebar-menu li.dropdown.open > a .menu-icon,
.sidebar-menu li.dropdown.dropdown-open > a i,
.sidebar-menu li.dropdown.dropdown-open > a .menu-icon {
    color: var(--x-dark) !important;
}

.sidebar-menu .sidebar-submenu li a {
    color: #a3ada6;
}

.sidebar-menu .sidebar-submenu li a:hover,
.sidebar-menu .sidebar-submenu li a.active-page {
    background: transparent;
    color: var(--x-lime) !important;
}

.sidebar-menu .sidebar-submenu li a .circle-icon {
    color: #4d5a52 !important;
}

.sidebar-menu .sidebar-submenu li a.active-page .circle-icon,
.sidebar-menu .sidebar-submenu li a:hover .circle-icon {
    color: var(--x-lime) !important;
}

.sidebar-menu .sidebar-menu-group-title {
    color: #6f7c74;
}

.sidebar-close-btn {
    background: var(--x-dark-2);
    color: #fff;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.navbar-header {
    background: var(--white);
    border-bottom: 1px solid var(--x-border);
    box-shadow: none;
}

.navbar-header .sidebar-toggle:hover .icon,
.navbar-header .sidebar-mobile-toggle:hover .icon {
    color: var(--x-ink);
}

#live-time {
    background: var(--x-lime-soft) !important;
    color: var(--x-ink) !important;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--x-lime-soft-2);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary,
.btn-success,
.btn-primary-600 {
    --bs-btn-color: var(--x-dark);
    --bs-btn-bg: var(--x-lime);
    --bs-btn-border-color: var(--x-lime);
    --bs-btn-hover-color: var(--x-dark);
    --bs-btn-hover-bg: var(--x-lime-hover);
    --bs-btn-hover-border-color: var(--x-lime-hover);
    --bs-btn-active-color: var(--x-dark);
    --bs-btn-active-bg: var(--x-lime-press);
    --bs-btn-active-border-color: var(--x-lime-press);
    --bs-btn-disabled-color: var(--x-dark);
    --bs-btn-disabled-bg: var(--x-lime);
    --bs-btn-disabled-border-color: var(--x-lime);
    --bs-btn-focus-shadow-rgb: 169, 227, 36;
    background-color: var(--x-lime) !important;
    border-color: var(--x-lime) !important;
    color: var(--x-dark) !important;
    font-weight: 600;
}

.btn-primary:hover,
.btn-success:hover,
.btn-primary-600:hover {
    background-color: var(--x-lime-hover) !important;
    border-color: var(--x-lime-hover) !important;
    color: var(--x-dark) !important;
}

.btn-primary:active,
.btn-success:active,
.btn-primary-600:active,
.btn-primary:focus,
.btn-success:focus,
.btn-primary-600:focus {
    background-color: var(--x-lime-press) !important;
    border-color: var(--x-lime-press) !important;
    color: var(--x-dark) !important;
    box-shadow: var(--x-focus) !important;
}

.btn-outline-primary,
.btn-outline-success {
    --bs-btn-color: var(--x-ink);
    --bs-btn-border-color: var(--x-ink);
    --bs-btn-hover-color: var(--x-dark);
    --bs-btn-hover-bg: var(--x-lime);
    --bs-btn-hover-border-color: var(--x-lime);
    --bs-btn-active-color: var(--x-dark);
    --bs-btn-active-bg: var(--x-lime-press);
    --bs-btn-active-border-color: var(--x-lime-press);
}

.btn-dark {
    --bs-btn-bg: var(--x-dark);
    --bs-btn-border-color: var(--x-dark);
    --bs-btn-hover-bg: var(--x-dark-3);
    --bs-btn-hover-border-color: var(--x-dark-3);
}

/* Background utility with white text stays readable. */
.bg-primary,
.bg-primary-600 {
    background-color: var(--x-ink) !important;
}

.text-primary,
.text-primary-600 {
    color: var(--primary-600) !important;
}

.bg-primary-50 {
    background-color: var(--primary-50) !important;
}

.badge.bg-primary,
.badge.bg-success {
    background-color: var(--x-lime) !important;
    color: var(--x-dark) !important;
}

a.text-primary-600:hover,
.hover-text-primary:hover {
    color: var(--x-ink-hover) !important;
}

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--x-lime) !important;
    box-shadow: var(--x-focus) !important;
}

.form-check-input:checked {
    background-color: var(--x-lime);
    border-color: var(--x-lime);
}

.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230f1412' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230f1412'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--x-lime);
    box-shadow: var(--x-focus);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--x-lime) !important;
    color: var(--x-dark) !important;
}

/* ── Navigation patterns ─────────────────────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--x-lime);
    color: var(--x-dark);
}

.nav-tabs .nav-link.active {
    color: var(--x-dark);
    border-bottom-color: var(--x-lime);
}

.nav-link {
    color: var(--x-muted);
}

.nav-link:hover {
    color: var(--x-ink);
}

.page-item.active .page-link,
.active > .page-link {
    background-color: var(--x-lime);
    border-color: var(--x-lime);
    color: var(--x-dark);
}

.page-link {
    color: var(--x-ink);
}

.page-link:focus {
    box-shadow: var(--x-focus);
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--x-lime) !important;
    border-color: var(--x-lime) !important;
    color: var(--x-dark) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--x-lime);
    color: var(--x-dark);
}

.progress-bar {
    background-color: var(--x-lime);
}

/* flatpickr */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--x-lime);
    border-color: var(--x-lime);
    color: var(--x-dark);
}

/* toastr success uses the brand */
#toast-container > .toast-success {
    background-color: var(--x-dark);
    color: #fff;
    border-left: 4px solid var(--x-lime);
    opacity: 1;
}

/* ── Cards & footer ──────────────────────────────────────────────────── */
.card {
    border-color: var(--x-border);
    border-radius: 12px;
}

.d-footer a.text-primary-600 {
    color: var(--x-ink) !important;
    font-weight: 600;
}

/* ── Separate CRM layout (layouts/crm.blade.php) ─────────────────────── */
.crm-sidebar {
    background: var(--x-dark) !important;
}

.crm-sidebar .nav-link.active,
.crm-sidebar a.active {
    background: var(--x-lime) !important;
    color: var(--x-dark) !important;
}

/* ── PIN prompt banner ───────────────────────────────────────────────── */
.x-pin-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--x-dark);
    color: #e7ece8;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-left: 4px solid var(--x-lime);
    font-size: .9rem;
}

.x-pin-banner strong {
    color: #fff;
}

.x-pin-banner .x-pin-banner-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--x-lime);
    color: var(--x-dark);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.x-pin-banner .btn {
    padding: .35rem .9rem;
    font-size: .82rem;
    white-space: nowrap;
}

.x-pin-banner .x-pin-dismiss {
    background: none;
    border: 0;
    color: #9aa59e;
    font-size: 1.2rem;
    line-height: 1;
    padding: 4px;
}

.x-pin-banner .x-pin-dismiss:hover {
    color: #fff;
}

@media (max-width: 575px) {
    .x-pin-banner {
        flex-wrap: wrap;
    }
}