/* --- Zippykind Admin Custom Styles 01.12.26 --- */

/* Custom overrides and additions to NexLink template */

/* --- Chart preloader skeleton 04.07.26 --- */
.chart-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: chartShimmer 1.4s infinite;
    border-radius: 8px;
}
@keyframes chartShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Brand Color Override: Green instead of Purple 01.12.26 --- */
:root {
    --bs-primary: #449747 !important;
    --bs-primary-rgb: 68, 151, 71 !important;
    --bs-primary-text-emphasis: #2d6830 !important;
    --bs-primary-bg-subtle: #e8f5e9 !important;
    --bs-primary-border-subtle: #a5d6a7 !important;
    --bs-link-color: #449747 !important;
    --bs-link-hover-color: #367a39 !important;
}

/* --- Center sidebar logo 01.12.26 --- */
.app-navbar-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
}

.app-navbar-brand a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-navbar-brand img {
    max-height: 40px;
    width: auto;
}

/* --- Override CSS Variable for sidebar width 01.12.26 --- */
:root {
    --app-menubar-tabs: 240px !important;
}

/* --- Sidebar Fix: Single wide menu only (no icon column) 01.12.26 --- */
.app-menubar-tabs {
    width: 240px !important;
}

/* Hide the icon column completely */
.app-menubar-tabs .app-navbar-brand,
.app-menubar-tabs .app-navbar-tabs {
    display: none !important;
}

/* Position app-tab-content at left edge (remove 80px offset) */
.app-menubar-tabs .app-tab-content {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 240px !important;
    height: 100vh !important;
}

/* Main content and header margins */
.page-content,
.app-wrapper {
    margin-left: 240px !important;
}

/* --- Fix: Add top padding to page-content for header clearance 01.14.26 --- */
.page-content {
    padding-top: 70px !important;
}

.app-header {
    padding-left: 240px !important;
}

/* Footer margin */
.footer-wrapper {
    margin-left: 240px !important;
}

/* Logo styling in sidebar 01.12.26 */
.app-menubar-tabs .app-side-brands {
    padding: 20px 15px !important;
    height: auto !important;
}

.app-menubar-tabs .app-side-brands a {
    display: inline-block;
}

.app-menubar-tabs .app-side-brands img {
    max-height: 36px;
    width: auto;
}

/* Version text at bottom 01.12.26 */
.sidebar-version {
    padding: 15px 20px;
    font-size: 12px;
    color: #888;
    margin-top: auto;
    border-top: 1px solid #eee;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Make app-content-inner scrollable with room for version */
.app-menubar-tabs .app-content-inner {
    height: calc(100vh - 120px) !important;
    overflow-y: auto;
}

.app-menubar-tabs .app-navbar {
    height: auto !important;
}

/* KPI Card Styling */
.kpi-card {
    transition: transform 0.2s ease-in-out;
}

.kpi-card:hover {
    transform: translateY(-2px);
}

/* Phone Numbers Table */
#phone-numbers-table tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Chart containers */
.chart-container {
    min-height: 300px;
}

/* Loading state */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Toast positioning */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* --- Toastr styling fix 01.22.26 --- */
#toast-container > div {
    color: #000 !important;
    opacity: 1 !important;
    background-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-left: 4px solid #999 !important;
    padding: 15px 15px 15px 15px !important;
}
#toast-container > .toast-success {
    background-color: #fff !important;
    opacity: 1 !important;
    border-left-color: #51A351 !important;
}
#toast-container > .toast-success .toast-title,
#toast-container > .toast-success::before {
    color: #51A351 !important;
}
#toast-container > .toast-error {
    background-color: #fff !important;
    opacity: 1 !important;
    border-left-color: #BD362F !important;
}
#toast-container > .toast-error .toast-title,
#toast-container > .toast-error::before {
    color: #BD362F !important;
}
#toast-container > .toast-info {
    background-color: #fff !important;
    opacity: 1 !important;
    border-left-color: #2F96B4 !important;
}
#toast-container > .toast-info .toast-title,
#toast-container > .toast-info::before {
    color: #2F96B4 !important;
}
#toast-container > .toast-warning {
    background-color: #fff !important;
    opacity: 1 !important;
    border-left-color: #F89406 !important;
}
#toast-container > .toast-warning .toast-title,
#toast-container > .toast-warning::before {
    color: #F89406 !important;
}
#toast-container .toast-title {
    color: #000 !important;
}
#toast-container .toast-message {
    color: #333 !important;
}
#toast-container .toast-message a,
#toast-container .toast-message label {
    color: #333 !important;
}
#toast-container .toast-close-button {
    color: #666 !important;
}

/* Status badges */
.badge-active {
    background-color: var(--bs-success);
}

.badge-pending {
    background-color: var(--bs-warning);
}

.badge-cancelled {
    background-color: var(--bs-danger);
}

/* DataTable customizations */
.dataTables_wrapper .dataTables_filter input {
    border-radius: 0.375rem;
}

/* Sidebar active state */
.app-menubar-tabs .menu-link.active {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .kpi-card .display-6 {
        font-size: 1.5rem;
    }
}

/* Modal fixes 01.07.26 */
.modal-xl .modal-body {
    overflow-y: auto;
    max-height: 70vh;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
}

.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

.modal-dialog {
    margin: 1.75rem auto;
}

.modal.show + .modal-backdrop + .modal {
    z-index: 1060;
}

/* --- Integrations hub selection cards 07.24.26 --- */
/* The NexLink template forces height: var(--bs-card-height) on .card, which
   collapses this equal-height card grid — same override pattern as .card-compact. */
.integration-hub-card {
    height: auto !important;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.integration-hub-card:hover {
    border-color: #89d541;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.integration-hub-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    background: #f2f9ea;
    color: #6fb830;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.integration-hub-card .card-body {
    height: 100%;
}

/* --- God's Eye heatmap legend swatches 08.12.26 --- */
.godseye-legend-swatch {
    display: inline-block;
    width: 24px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* --- God's Eye map container responsive height 08.12.26 --- */
@media (max-width: 767px) {
    #godseye-map { height: 400px !important; }
}
/* --- Unclosed media query CLOSED 08.14.26 (T213) --- */
/* The closing brace above was missing, so this @media block never ended and
   EVERY rule from here to the end of the file was nested inside
   (max-width: 767px) - i.e. dead on any viewport wider than 767px. The visible
   symptom was the Code Logic Helper: at 1440px the FAB fell back to
   position:static and the panel rendered as a full-width static block at the
   bottom of every admin page, while at 700px both were correct. If a desktop
   style below this line ever "stopped working", this brace is why. */

/* --- Code Logic Helper Panel 08.12.26 --- */
.code-helper-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1030;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #449747;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.code-helper-fab:hover {
    background: #367a39;
    transform: scale(1.08);
}

.code-helper-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1039;
    background: rgba(0, 0, 0, 0.25);
}
.code-helper-backdrop.open {
    display: block;
}

.code-helper-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    z-index: 1040;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
    transition: right .25s ease;
    display: flex;
    flex-direction: column;
}
.code-helper-panel.open {
    right: 0;
}

.code-helper-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.code-helper-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.code-helper-panel-body code {
    font-size: 12px;
    background: #f4f6f8;
    padding: 1px 5px;
    border-radius: 3px;
    color: #d63384;
}

@media (max-width: 576px) {
    .code-helper-fab {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
    .code-helper-panel {
        width: 100vw;
        max-width: 100vw;
        right: -100vw;
    }
}

/* --- t353-st12: Anti-Fraud review page 09.05.26 --- */
/* Appended at the END of the file on purpose. The T213 note on the ?ver bump in
   ScriptManagerAdmin.php records that an unclosed @media block once trapped every rule
   after it inside a mobile query; this section opens no media query of its own so it
   cannot repeat that, and nothing below it can be swallowed by it. */

#antiFraudPage .card-compact {
    height: auto !important; /* NexLink forces height:var(--bs-card-height) on .card */
}

/* The value/baseline column carries a long explanatory note under the numbers. Without a
   line height and a max width it pushes the action buttons off the right of the table. */
#antiFraudFlagsTable td .small {
    line-height: 1.35;
}

/* Hard freezes are listed first; a left rule makes the boundary between them and the soft
   flags readable at a glance without adding a whole column. */
#antiFraudFlagsTable tbody tr:has(.badge.bg-danger) {
    border-left: 3px solid #dc3545;
}

/* The policy panel is reference material, not a working surface: slightly smaller, wrapped
   rather than truncated, and the header reads as clickable. */
.zk-af-policy .card-header {
    cursor: pointer;
    user-select: none;
}
.zk-af-policy .card-header:hover {
    background-color: #f6f8f4;
}
.zk-af-policy-table td,
.zk-af-policy-table th {
    font-size: 13px;
    vertical-align: top;
}
.zk-af-policy-table tr.zk-af-policy-note td {
    background-color: #fbfcfa;
    border-top: 0;
}
/* Brand green, from reference_brand_colors: the policy panel's own accent so it reads as
   Zippykind documentation rather than as another data table. */
.zk-af-policy .card-header h5 {
    color: #74b636;
}

/* --- t353-st15: Automatic suspensions switch + Would-have-suspended list 09.05.26 --- */

/* The switch card carries the page's whole meaning, so it is colour-coded rather than being
   another white card: red down the left when the guard can suspend on its own, grey when it
   cannot. Left border only - a full red card at the top of every page visit reads as an error. */
.zk-af-enforce {
    border-left: 4px solid #adb5bd;
}
.zk-af-enforce-on {
    border-left-color: #dc3545;
}
.zk-af-enforce-off {
    border-left-color: #adb5bd;
}
#antiFraudEnforceSwitch:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Would-have-suspended is a decision queue, not a log. Given the same red edge as an ON switch
   so the two read as the same subject. */
.zk-af-wouldhave {
    border-left: 4px solid #dc3545;
}
.zk-af-wouldhave .card-header h5 {
    color: #dc3545;
}

/* --- The table loading dots are brand green, not Bootstrap blue 09.10.26 (David) --- */
/* "in the backend /admin tables there is a preloader that has a group of small to medium size
   blue circles that are animated, can you change that preloader's circles so they are our brand
   green?"

   It is DataTables' own processing indicator: div.dt-processing > div:last-child holds four
   13px circles, and datatables.min.css paints them rgb(13, 110, 253) - Bootstrap blue - through
   its --dt-row-selected variable.

   THE COLOUR IS SET HERE RATHER THAN BY REDEFINING --dt-row-selected, deliberately. That
   variable also drives the selected-row highlight, so overriding it would quietly recolour row
   selection across every admin table as well, which is not what was asked for.

   No !important: this selector matches the library's own specificity exactly, and
   AdminCustom.css is registered after datatables.min.css, so it wins on order. */
div.dt-processing > div:last-child > div {
    background: #74b636;
}