/* ==========================================================================
   ADViK TRANSPORT & LOGISTICS
   PREMIUM ADVANCE PRO — FORM CONTROLS
   Low-color enterprise UI + reliable modern switches.
   ========================================================================== */

:root {
    --advik-control-ink: #25282d;
    --advik-control-muted: #737981;
    --advik-control-line: #d8dde2;
    --advik-control-line-hover: #bcc3ca;
    --advik-control-soft: #f5f6f7;

    --advik-switch-off: #e3e7ea;
    --advik-switch-off-border: #cbd1d6;
    --advik-switch-on: #65546e;
    --advik-switch-on-hover: #594662;
    --advik-switch-thumb: #ffffff;
    --advik-switch-focus: rgba(101, 84, 110, .16);

    --advik-icon-violet: #665570;
    --advik-icon-violet-bg: #f2edf4;
    --advik-icon-blue: #4d6d78;
    --advik-icon-blue-bg: #eef5f7;
    --advik-icon-green: #4d735e;
    --advik-icon-green-bg: #eef7f1;
    --advik-icon-amber: #806b36;
    --advik-icon-amber-bg: #fbf6e9;
    --advik-icon-rose: #80575d;
    --advik-icon-rose-bg: #f8eff1;
}


/* ==========================================================================
   1. MODERN SWITCH
   --------------------------------------------------------------------------
   Important:
   Older dashboard-core.css disabled Bootstrap's switch background image.
   These rules intentionally override that behavior and draw our own thumb.
   ========================================================================== */

.advik-switch-control,
input.advik-switch,
.form-check.form-switch > .form-check-input,
.advik-switch-wrap > .form-check-input,
.advik-switch-row input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;

    position: relative !important;

    width: 48px !important;
    min-width: 48px !important;
    height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--advik-switch-off-border) !important;
    border-radius: 999px !important;

    background-color: var(--advik-switch-off) !important;
    background-image:
        radial-gradient(
            circle at 13px 13px,
            var(--advik-switch-thumb) 0,
            var(--advik-switch-thumb) 9px,
            rgba(255, 255, 255, 0) 9.6px
        ) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;

    box-shadow:
        inset 0 0 0 1px rgba(31, 37, 43, .025),
        0 1px 2px rgba(31, 37, 43, .05) !important;

    cursor: pointer !important;

    vertical-align: middle !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .12s ease !important;
}

.advik-switch-control:hover,
input.advik-switch:hover,
.form-check.form-switch > .form-check-input:hover,
.advik-switch-wrap > .form-check-input:hover,
.advik-switch-row input[type="checkbox"]:hover {
    border-color: #b6bdc4 !important;
}

.advik-switch-control:checked,
input.advik-switch:checked,
.form-check.form-switch > .form-check-input:checked,
.advik-switch-wrap > .form-check-input:checked,
.advik-switch-row input[type="checkbox"]:checked {
    border-color: var(--advik-switch-on) !important;

    background-color: var(--advik-switch-on) !important;
    background-image:
        radial-gradient(
            circle at 34px 13px,
            var(--advik-switch-thumb) 0,
            var(--advik-switch-thumb) 9px,
            rgba(255, 255, 255, 0) 9.6px
        ) !important;
}

.advik-switch-control:checked:hover,
input.advik-switch:checked:hover,
.form-check.form-switch > .form-check-input:checked:hover,
.advik-switch-wrap > .form-check-input:checked:hover,
.advik-switch-row input[type="checkbox"]:checked:hover {
    border-color: var(--advik-switch-on-hover) !important;
    background-color: var(--advik-switch-on-hover) !important;
}

.advik-switch-control:focus,
input.advik-switch:focus,
.form-check.form-switch > .form-check-input:focus,
.advik-switch-wrap > .form-check-input:focus,
.advik-switch-row input[type="checkbox"]:focus {
    outline: 0 !important;
    box-shadow:
        0 0 0 4px var(--advik-switch-focus),
        0 1px 2px rgba(31, 37, 43, .05) !important;
}

.advik-switch-control:focus-visible,
input.advik-switch:focus-visible,
.form-check.form-switch > .form-check-input:focus-visible,
.advik-switch-wrap > .form-check-input:focus-visible,
.advik-switch-row input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(101, 84, 110, .32) !important;
    outline-offset: 3px !important;
}

.advik-switch-control:active:not(:disabled),
input.advik-switch:active:not(:disabled),
.form-check.form-switch > .form-check-input:active:not(:disabled),
.advik-switch-row input[type="checkbox"]:active:not(:disabled) {
    transform: scale(.97);
}

.advik-switch-control:disabled,
input.advik-switch:disabled,
.form-check.form-switch > .form-check-input:disabled,
.advik-switch-wrap > .form-check-input:disabled,
.advik-switch-row input[type="checkbox"]:disabled {
    opacity: .52 !important;
    cursor: not-allowed !important;
    filter: grayscale(.15);
}


/* Bootstrap form-switch wrapper reset.
   Removes negative margins / offset that commonly makes the switch look broken. */
.form-check.form-switch.advik-switch-wrap,
.form-check.form-switch {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 40px;

    padding-left: 0 !important;

    line-height: 1.3;
}

.form-check.form-switch .form-check-label {
    margin: 0;

    color: var(--advik-control-ink);

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


/* Existing custom form rows */
.advik-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.advik-switch-row > span,
.advik-switch-row > label {
    min-width: 0;
}


/* ==========================================================================
   2. WEBSITE .switch COMPONENT
   ========================================================================== */

label.switch {
    position: relative;

    width: 48px;
    height: 28px;

    flex: 0 0 48px;

    margin: 0;
}

label.switch > input[type="checkbox"] {
    position: absolute !important;

    width: 48px !important;
    height: 28px !important;

    inset: 0;

    opacity: 0 !important;

    z-index: 2;

    cursor: pointer !important;
}

label.switch > span {
    position: absolute;
    inset: 0;

    border: 1px solid var(--advik-switch-off-border);
    border-radius: 999px;

    background: var(--advik-switch-off) !important;

    box-shadow:
        inset 0 0 0 1px rgba(31, 37, 43, .025),
        0 1px 2px rgba(31, 37, 43, .05);

    cursor: pointer;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

label.switch > span::before {
    content: "";

    position: absolute;

    width: 20px;
    height: 20px;

    left: 3px;
    top: 3px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 2px 6px rgba(31, 37, 43, .18);

    transform: translateX(0);

    transition: transform .18s ease;
}

label.switch > input[type="checkbox"]:checked + span {
    border-color: var(--advik-switch-on);
    background: var(--advik-switch-on) !important;
}

label.switch > input[type="checkbox"]:checked + span::before {
    transform: translateX(20px);
}

label.switch > input[type="checkbox"]:focus-visible + span {
    outline: 2px solid rgba(101, 84, 110, .32);
    outline-offset: 3px;

    box-shadow:
        0 0 0 4px var(--advik-switch-focus);
}

label.switch > input[type="checkbox"]:disabled + span {
    opacity: .52;
    cursor: not-allowed;
}


/* ==========================================================================
   3. PREMIUM LOW-COLOR ICONS
   ========================================================================== */

.dashboard-stat-icon,
.dashboard-quick-action-icon,
.dashboard-alert-icon,
.dashboard-empty-icon,
.dashboard-pro-icon,
.cp-icon-box,
.account-auth-head-icon,
.account-compact-icon {
    border: 1px solid #e2dce5 !important;
    color: var(--advik-icon-violet) !important;
    background: var(--advik-icon-violet-bg) !important;
}

.dashboard-stats-grid > :nth-child(5n + 2) .dashboard-stat-icon,
.dashboard-quick-actions > :nth-child(5n + 2) .dashboard-quick-action-icon {
    border-color: #dbe6ea !important;
    color: var(--advik-icon-blue) !important;
    background: var(--advik-icon-blue-bg) !important;
}

.dashboard-stats-grid > :nth-child(5n + 3) .dashboard-stat-icon,
.dashboard-quick-actions > :nth-child(5n + 3) .dashboard-quick-action-icon {
    border-color: #dbe9e0 !important;
    color: var(--advik-icon-green) !important;
    background: var(--advik-icon-green-bg) !important;
}

.dashboard-stats-grid > :nth-child(5n + 4) .dashboard-stat-icon,
.dashboard-quick-actions > :nth-child(5n + 4) .dashboard-quick-action-icon {
    border-color: #ece2c9 !important;
    color: var(--advik-icon-amber) !important;
    background: var(--advik-icon-amber-bg) !important;
}

.dashboard-stats-grid > :nth-child(5n + 5) .dashboard-stat-icon,
.dashboard-quick-actions > :nth-child(5n + 5) .dashboard-quick-action-icon {
    border-color: #eadbde !important;
    color: var(--advik-icon-rose) !important;
    background: var(--advik-icon-rose-bg) !important;
}


/* ==========================================================================
   4. FORM POLISH
   ========================================================================== */

.dashboard-content .form-control,
.dashboard-content .form-select,
.dashboard-content textarea,
.advik-site .form-control,
.advik-site .form-select {
    border-color: var(--advik-control-line);
}

.dashboard-content .form-control:hover,
.dashboard-content .form-select:hover,
.advik-site .form-control:hover,
.advik-site .form-select:hover {
    border-color: var(--advik-control-line-hover);
}

.dashboard-content .form-control:focus,
.dashboard-content .form-select:focus,
.advik-site .form-control:focus,
.advik-site .form-select:focus {
    border-color: rgba(101, 84, 110, .58) !important;

    box-shadow:
        0 0 0 4px rgba(101, 84, 110, .09) !important;
}


/* ==========================================================================
   5. ACCESSIBILITY / MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .advik-switch-control,
    input.advik-switch,
    .form-check.form-switch > .form-check-input,
    .advik-switch-row input[type="checkbox"],
    label.switch > span,
    label.switch > span::before {
        transition: none !important;
    }
}