/* =============================================================================
   Multilayers Sales — Custom Overrides
   Brand primary: #24519e
   ============================================================================= */

/* ── Brand primary color palette ─────────────────────────────────────────── */
:root {
    --primary-50:  #f0f3f8;
    --primary-100: #dee5f1;
    --primary-200: #bdcbe2;
    --primary-300: #92a8cf;
    --primary-400: #6685bb;
    --primary-500: #456bad;
    --primary-600: #24519e;
    --primary-700: #1f4586;
    --primary-800: #19396f;
    --primary-900: #12294f;
    --primary-light: rgba(36, 81, 158, 0.15);
    --primary-light-white: rgba(36, 81, 158, 0.25);

    /* Bootstrap primary override */
    --bs-primary:          #24519e;
    --bs-primary-rgb:      36, 81, 158;
    --bs-link-color:       #24519e;
    --bs-link-color-rgb:   36, 81, 158;
    --bs-link-hover-color: #1f4586;
}

/* ── Bootstrap btn-primary ───────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  #24519e;
    --bs-btn-border-color:        #24519e;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #1f4586;
    --bs-btn-hover-border-color:  #1c3e7c;
    --bs-btn-focus-shadow-rgb:    36, 81, 158;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #1c3e7c;
    --bs-btn-active-border-color: #193a75;
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         #24519e;
    --bs-btn-disabled-border-color: #24519e;
}

/* ── Bootstrap btn-info — full state coverage via wowdash info vars ──────── */
.btn-info {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--info-main, #144BD6);
    --bs-btn-border-color:        var(--info-main, #144BD6);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--info-hover, #0A51CE);
    --bs-btn-hover-border-color:  var(--info-hover, #0A51CE);
    --bs-btn-focus-shadow-rgb:    20, 75, 214;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--info-pressed, #06307C);
    --bs-btn-active-border-color: var(--info-pressed, #06307C);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--info-main, #144BD6);
    --bs-btn-disabled-border-color: var(--info-main, #144BD6);
}

.btn-outline-info {
    --bs-btn-color:               var(--info-main, #144BD6);
    --bs-btn-border-color:        var(--info-main, #144BD6);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--info-main, #144BD6);
    --bs-btn-hover-border-color:  var(--info-main, #144BD6);
    --bs-btn-focus-shadow-rgb:    20, 75, 214;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--info-hover, #0A51CE);
    --bs-btn-active-border-color: var(--info-hover, #0A51CE);
}

/* ── Bootstrap btn-outline-primary ──────────────────────────────────────── */
.btn-outline-primary {
    --bs-btn-color:               #24519e;
    --bs-btn-border-color:        #24519e;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #24519e;
    --bs-btn-hover-border-color:  #24519e;
    --bs-btn-focus-shadow-rgb:    36, 81, 158;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #24519e;
    --bs-btn-active-border-color: #24519e;
    --bs-btn-disabled-color:      #24519e;
    --bs-btn-disabled-border-color: #24519e;
}

/* ── Bootstrap utility overrides ─────────────────────────────────────────── */
a { color: #24519e; }
a:hover { color: #1f4586; }
.text-primary     { color: #24519e !important; }
.bg-primary       { background-color: #24519e !important; }
.border-primary   { border-color: #24519e !important; }
.link-primary     { color: #24519e !important; }
.link-primary:hover { color: #1f4586 !important; }

/* ── Filter search field with leading icon ───────────────────────────────── */
.filter-search-wrap {
    position: relative;
}
.filter-search-wrap .filter-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9375rem;
    color: var(--text-secondary-light);
    pointer-events: none;
    z-index: 1;
}
.filter-search-wrap .form-control {
    padding-left: 2rem;
}

/* ── form-select arrow — restore proper inset (wowdash sets flush right) ─── */
.form-select {
    background-position: right .75rem center;
}

/* ── input-group — match wowdash border colour & focus ring ──────────────── */
.input-group-text {
    border-color: var(--input-form-light, #d1d5db);
    background-color: var(--white, #fff);
    color: var(--text-secondary-light);
}
.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control,
.input-group:focus-within .form-select {
    border-color: var(--primary-600) !important;
}

/* ── Topbar user dropdown — suppress Bootstrap caret ─────────────────────── */
.navbar-header .dropdown > button::after { display: none; }

/* ── Sidebar toggle chevron — smaller ────────────────────────────────────── */
.sidebar-toggle .icon,
.sidebar-mobile-toggle .icon {
    font-size: 1.0rem;
}

/* ── Lightweight app toast ───────────────────────────────────────────────── */
@keyframes appToastIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── SweetAlert2 Wowdash Theme ───────────────────────────────────────────── */

/* Dialog (non-toast) popups */
.swal2-popup:not(.swal2-toast) {
    border-radius: 16px !important;
    padding: 2rem 2rem 1.75rem !important;
    font-family: inherit !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
    border: none !important;
    background: #fff !important;
}
.swal2-popup:not(.swal2-toast) .swal2-title {
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    padding: 0 0 .375rem !important;
    margin: 0 !important;
}
.swal2-popup:not(.swal2-toast) .swal2-html-container {
    font-size: .875rem !important;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 1.25rem !important;
    border-width: 2px !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon .swal2-icon-content { font-size: 2.25rem !important; }
.swal2-confirm, .swal2-cancel, .swal2-deny {
    border-radius: 8px !important;
    padding: 8px 22px !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    border: none !important;
    line-height: 1.4 !important;
}
.swal2-popup:not(.swal2-toast) .swal2-actions {
    gap: 8px !important;
    margin-top: 1.5rem !important;
    padding: 0 !important;
}
.swal2-timer-progress-bar { border-radius: 0 0 16px 16px !important; }
.swal2-backdrop-show { background: rgba(0,0,0,.45) !important; }
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation { backdrop-filter: blur(2px); }

/* Toast notifications */
.swal2-popup.swal2-toast {
    background: #fff !important;
    border-radius: 10px !important;
    padding: .625em 1em !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
    font-family: inherit !important;
    border: 1px solid #e9ecef !important;
    gap: .5em !important;
}
.swal2-popup.swal2-toast .swal2-title {
    font-size: .875rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.swal2-popup.swal2-toast .swal2-icon {
    width: 1.5em !important;
    height: 1.5em !important;
    margin: 0 !important;
    border-width: 2px !important;
}
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content { font-size: 1em !important; }

/* ── DataTables 2.x Bootstrap/Wowdash Integration ───────────────────────── */
div.dt-container { position: relative; }

div.dt-container div.dt-layout-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; padding: 14px 0;
}
div.dt-container div.dt-layout-row.dt-layout-table { display: block; padding: 0; }
div.dt-container div.dt-layout-cell { display: flex; align-items: center; gap: 8px; }

/* Search */
div.dt-container label.dt-search { display: flex; align-items: center; gap: 6px; margin: 0; }
div.dt-container .dt-search input,
div.dt-container input.dt-input {
    padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: .8125rem; background: transparent; color: inherit;
    min-width: 200px; outline: none; margin: 0;
    transition: border-color .15s, box-shadow .15s;
}
div.dt-container .dt-search input:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Length */
div.dt-container .dt-length { display: inline-flex; align-items: center; gap: 6px; }
div.dt-container .dt-length label { display: inline; margin: 0; white-space: nowrap; font-size: .875rem; }
div.dt-container select.dt-input {
    padding: 6px 28px 6px 10px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: .8125rem; background: transparent; color: inherit; cursor: pointer;
}

/* Info */
div.dt-container .dt-info { font-size: .8125rem; color: #6b7280; white-space: nowrap; }

/* Pagination */
div.dt-container .dt-paging { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
div.dt-container .dt-paging .dt-paging-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px;
    font-size: .875rem; border: 1px solid transparent; background: transparent;
    cursor: pointer; text-decoration: none !important; color: inherit !important;
    transition: all .15s; line-height: 1;
}
div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
    background: var(--primary-50); border-color: var(--primary-100);
    color: var(--primary-600) !important;
}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--primary-600) !important; border-color: var(--primary-600) !important;
    color: #fff !important;
}
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    opacity: .35; cursor: default; background: transparent !important;
    border-color: transparent !important; color: inherit !important;
}

/* Processing */
div.dt-processing {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: rgba(255,255,255,.96); border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 12px 24px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 100;
    white-space: nowrap; font-size: .875rem;
}
/* first-child wraps our spinner + text — make them inline */
div.dt-processing > div:first-child { display: inline-flex; align-items: center; gap: 8px; }
/* DT 2.x injects an animated 3-dot div as div:last-child — hide it, we use our own spinner */
div.dt-processing > div:last-child { display: none !important; }

/* Export Buttons */
div.dt-buttons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
button.dt-button {
    display: inline-flex !important; align-items: center; gap: 5px;
    padding: 6px 14px !important; font-size: .8125rem !important;
    border-radius: 8px !important; cursor: pointer;
    transition: all .15s !important; font-weight: 500; line-height: 1.4;
}
button.dt-button.btn-success {
    background: #198754 !important; color: #fff !important;
    border: 1px solid #198754 !important; box-shadow: none !important;
}
button.dt-button.btn-success:hover {
    background: #157347 !important; border-color: #146c43 !important;
}

/* Mobile */
@media (max-width: 767px) {
    div.dt-container div.dt-layout-row {
        flex-direction: column; align-items: stretch; gap: 8px;
    }
    div.dt-container div.dt-layout-cell {
        width: 100%; flex-direction: column; align-items: stretch;
    }
    div.dt-container .dt-length,
    div.dt-container .dt-search,
    div.dt-container .dt-buttons { width: 100%; }
    div.dt-container .dt-search input,
    div.dt-container input.dt-input { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
    div.dt-container button.dt-button { width: 100%; justify-content: center; }
    div.dt-container .dt-paging { justify-content: center; width: 100%; }
    div.dt-container .dt-info { width: 100%; text-align: center; }
}

/* ── DataTables Responsive extension — wowdash theme ────────────────────── */
td.dtr-control { cursor: pointer; white-space: nowrap; }

/* Tint the default border-triangle arrow to brand primary */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    border-left-color: var(--primary-600) !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control::before {
    border-left-color: var(--primary-700) !important;
    border-top: 10px solid transparent !important;
}

tr.child td.child {
    background: var(--primary-50) !important;
    padding: 10px 16px !important;
}
tr.child ul.dtr-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
tr.child ul.dtr-details li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .8125rem;
    border-bottom: 1px dashed var(--neutral-200);
    padding-bottom: 6px;
}
tr.child ul.dtr-details li:last-child { border-bottom: none; padding-bottom: 0; }
tr.child ul.dtr-details .dtr-title {
    font-weight: 600;
    min-width: 90px;
    flex-shrink: 0;
    color: var(--text-primary-light);
}
tr.child ul.dtr-details .dtr-data { color: var(--text-secondary-light); }

/* ── Activity Log page ───────────────────────────────────────────────────── */
.btn-log-changes { padding: .2rem .55rem; font-size: .75rem; }
#changes-body td { font-size: .82rem; word-break: break-all; vertical-align: top; }
.old-val { color: #dc3545; }
.new-val { color: #198754; }

/* ── Dark-navy / gold QPO section header ──────────────────────────────────── */
.qpo-hdr {
    background: #1e3a5f;
    border-radius: 14px 14px 0 0;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.qpo-hdr-icon  { color: #f5c518; font-size: 1.1rem; }
.qpo-hdr-label { color: #f5c518; font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }

.qpo-th {
    background: #1e3a5f !important;
    color: #f5c518 !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    padding: 12px 20px !important;
    border: none !important;
    width: 25%;
}
.qpo-td { padding: 18px 20px !important; vertical-align: middle !important; text-align: center; }

.qpo-num     { font-size: 1.6rem; font-weight: 700; line-height: 1; color: #1e3a5f; }
.qpo-num-sar { font-size: 1.15rem; font-weight: 700; line-height: 1; color: #1e3a5f; }
.qpo-num--blue     { color: #24519e !important; }
.qpo-num-sar--blue { color: #24519e !important; }

/* ── Day-card count chips ─────────────────────────────────────────────────── */
.chip-visits { background: #e8f0fe; color: #1a56db; }
.chip-calls  { background: #e8f8f0; color: #1a7e3f; }
.chip-emails { background: #fffbeb; color: #92400e; }

/* ── Upcoming / past day tag ─────────────────────────────────────────────── */
.upcoming-tag { font-size: .65rem; color: #bbb; font-weight: 500; }

/* ── Info / warning inline alerts ───────────────────────────────────────── */
.alert-info-blue {
    background: #f0f4ff; border: 1px solid #c7d7fd; color: #1a56db; font-size: .85rem;
    border-radius: 10px; padding: 12px 18px;
    display: flex; align-items: center; gap: 8px;
}
.alert-warning-amber {
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: .85rem;
    border-radius: 10px; padding: 12px 18px;
    display: flex; align-items: center; gap: 8px;
}

/* ── Week-locked banner ──────────────────────────────────────────────────── */
.week-locked-banner {
    background: #fff8e1; border: 1px solid #ffe082; border-left: 4px solid #f59e0b;
    border-radius: 10px; padding: 12px 18px; font-size: .875rem; color: #78350f;
    display: flex; align-items: center; gap: 10px;
}

/* ── Day card min-height & color inherit ─────────────────────────────────── */
.day-card { min-height: 190px; color: inherit; }

/* ── Progress card subtle border ─────────────────────────────────────────── */
.card-progress { border: 1px solid #eef0f4; }

/* ── Checkbox / radio alignment ─────────────────────────────────────────── */
.form-check { display: flex; align-items: center; gap: 8px; min-height: unset; padding-left: 0; }
.form-check .form-check-input { margin-top: 0; flex-shrink: 0; }
.form-check .form-check-label { cursor: pointer; margin-bottom: 0; }

/* ── Collapsed sidebar: center icons ────────────────────────────────────── */
.sidebar.active .sidebar-menu li a { justify-content: center; }
.sidebar.active:hover .sidebar-menu li a { justify-content: flex-start; }

/* ── Sidebar logo smaller ────────────────────────────────────────────────── */
.sidebar-logo img { max-height: 2.25rem !important; }

/* ── Button: inline-flex so icon + text stay on one line in every browser */
.btn { display: inline-flex !important; align-items: center; white-space: nowrap; }
.btn.d-block, .btn.w-100 { display: flex !important; width: 100%; }

/* ── Tables: full width, wrap text content only ──────────────────────────── */
table.dataTable { width: 100% !important; }
table.dataTable th,
table.dataTable td { white-space: normal !important; word-break: break-word; }
table.dataTable th.text-center,
table.dataTable td.text-center,
table.dataTable th.text-end,
table.dataTable td.text-end { white-space: nowrap !important; word-break: normal; }

/* ── Reorder drag-drop list ──────────────────────────────────────────────── */
#reorder-list li { user-select: none; transition: background .12s, border-left .12s; }
#reorder-list li[draggable="true"] { cursor: grab; }
#reorder-list li[draggable="true"]:active { cursor: grabbing; }
#reorder-list li.drag-over { background: rgba(var(--bs-primary-rgb), .08); border-left: 3px solid var(--bs-primary); }