/* ═══════════════════════════════════════════════════════
   NeedTexting Premium — Bootstrap 5 Compatibility Layer
   Makes existing Bootstrap components work in dark theme
   ═══════════════════════════════════════════════════════ */

/* ── Base Overrides ── */

body.nt-premium {
    background: var(--nt-void) !important;
    color: var(--nt-text) !important;
}

body.nt-premium .bg-light,
body.nt-premium .bg-white {
    background: transparent !important;
}

body.nt-premium .nt-main a {
    color: var(--nt-accent);
}

body.nt-premium .nt-main a:hover {
    color: #60a5fa;
}

/* ── Cards ── */

body.nt-premium .card {
    background: var(--nt-card);
    border: 1px solid var(--nt-card-border);
    border-radius: var(--nt-radius);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--nt-text);
}

body.nt-premium .card-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--nt-card-border);
    color: var(--nt-text-bright);
}

body.nt-premium .card-body {
    color: var(--nt-text);
}

body.nt-premium .card-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--nt-card-border);
}

/* ── Typography ── */

body.nt-premium h1, body.nt-premium h2, body.nt-premium h3,
body.nt-premium h4, body.nt-premium h5, body.nt-premium h6,
body.nt-premium .h1, body.nt-premium .h2, body.nt-premium .h3,
body.nt-premium .h4, body.nt-premium .h5, body.nt-premium .h6 {
    color: var(--nt-text-bright);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body.nt-premium .text-muted {
    color: var(--nt-text-muted) !important;
}

body.nt-premium .text-dark {
    color: var(--nt-text-bright) !important;
}

body.nt-premium .text-secondary {
    color: var(--nt-text-secondary) !important;
}

body.nt-premium .fw-bold, body.nt-premium .fw-semibold {
    color: var(--nt-text-bright);
}

body.nt-premium .display-5, body.nt-premium .display-4,
body.nt-premium .display-3, body.nt-premium .display-6 {
    color: var(--nt-text-bright);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── Forms ── */

body.nt-premium .form-control,
body.nt-premium .form-select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--nt-card-border);
    color: var(--nt-text);
    border-radius: var(--nt-radius-sm);
    padding: 10px 14px;
    transition: all 0.2s var(--nt-ease);
}

body.nt-premium .form-control:focus,
body.nt-premium .form-select:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--nt-accent);
    box-shadow: 0 0 0 3px var(--nt-accent-subtle);
    color: var(--nt-text-bright);
}

body.nt-premium .form-control::placeholder {
    color: var(--nt-text-muted);
}

body.nt-premium .form-label {
    color: var(--nt-text-secondary);
    font-weight: 600;
    font-size: 13px;
}

body.nt-premium .form-text {
    color: var(--nt-text-muted);
}

body.nt-premium .form-check-input {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--nt-card-border-hover);
}

body.nt-premium .form-check-input:checked {
    background-color: var(--nt-accent);
    border-color: var(--nt-accent);
}

body.nt-premium .form-check-label {
    color: var(--nt-text);
}

body.nt-premium .input-group-text {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--nt-card-border);
    color: var(--nt-text-secondary);
}

/* ── Buttons ── */

body.nt-premium .btn-primary {
    background: var(--nt-gradient);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: var(--nt-radius-sm);
    transition: all 0.2s var(--nt-ease);
}

body.nt-premium .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--nt-accent-glow);
    background: var(--nt-gradient-vibrant);
}

body.nt-premium .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--nt-card-border);
    color: var(--nt-text-secondary);
}

body.nt-premium .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--nt-card-border-hover);
    color: var(--nt-text-bright);
}

body.nt-premium .btn-outline-primary {
    border-color: var(--nt-accent);
    color: var(--nt-accent);
    background: transparent;
}

body.nt-premium .btn-outline-primary:hover {
    background: var(--nt-accent-subtle);
    border-color: var(--nt-accent);
    color: var(--nt-accent);
}

body.nt-premium .btn-outline-secondary {
    border-color: var(--nt-card-border);
    color: var(--nt-text-secondary);
}

body.nt-premium .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--nt-card-border-hover);
    color: var(--nt-text-bright);
}

body.nt-premium .btn-success {
    background: var(--nt-success);
    border: none;
    color: #000;
}

body.nt-premium .btn-danger {
    background: var(--nt-danger);
    border: none;
    color: white;
}

body.nt-premium .btn-warning {
    background: var(--nt-warning);
    border: none;
    color: #000;
}

body.nt-premium .btn-info {
    background: var(--nt-info);
    border: none;
    color: white;
}

body.nt-premium .btn-light {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--nt-card-border);
    color: var(--nt-text);
}

body.nt-premium .btn-dark {
    background: var(--nt-surface);
    border: 1px solid var(--nt-card-border);
    color: var(--nt-text);
}

body.nt-premium .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Tables ── */

body.nt-premium .table {
    color: var(--nt-text);
    border-color: var(--nt-card-border);
}

body.nt-premium .table > thead {
    color: var(--nt-text-secondary);
}

body.nt-premium .table > thead th {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--nt-card-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nt-text-muted);
    padding: 12px 16px;
}

body.nt-premium .table > tbody > tr {
    border-bottom: 1px solid var(--nt-card-border);
    transition: background 0.15s ease;
}

body.nt-premium .table > tbody > tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

body.nt-premium .table > tbody > tr > td {
    padding: 12px 16px;
    border: none;
    vertical-align: middle;
}

body.nt-premium .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(255, 255, 255, 0.015);
    color: var(--nt-text);
}

body.nt-premium .table-hover > tbody > tr:hover > * {
    background: rgba(255, 255, 255, 0.03);
    color: var(--nt-text);
}

body.nt-premium .table-responsive {
    border-radius: var(--nt-radius);
}

/* ── Badges ── */

body.nt-premium .badge {
    font-weight: 600;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
}

body.nt-premium .badge.bg-primary,
body.nt-premium .bg-primary {
    background: var(--nt-accent-subtle) !important;
    color: var(--nt-accent) !important;
}

body.nt-premium .badge.bg-success,
body.nt-premium .badge.bg-success {
    background: var(--nt-success-bg) !important;
    color: var(--nt-success) !important;
}

body.nt-premium .badge.bg-danger {
    background: var(--nt-danger-bg) !important;
    color: var(--nt-danger) !important;
}

body.nt-premium .badge.bg-warning {
    background: var(--nt-warning-bg) !important;
    color: var(--nt-warning) !important;
}

body.nt-premium .badge.bg-info {
    background: var(--nt-info-bg) !important;
    color: var(--nt-info) !important;
}

body.nt-premium .badge.bg-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--nt-text-secondary) !important;
}

body.nt-premium .badge.bg-dark {
    background: var(--nt-surface) !important;
    color: var(--nt-text) !important;
}

body.nt-premium .badge.bg-light {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--nt-text) !important;
}

/* ── Alerts ── */

body.nt-premium .alert {
    border-radius: var(--nt-radius-sm);
    border: 1px solid;
}

body.nt-premium .alert-primary {
    background: var(--nt-accent-subtle);
    border-color: rgba(59, 130, 246, 0.2);
    color: var(--nt-accent);
}

body.nt-premium .alert-success {
    background: var(--nt-success-bg);
    border-color: rgba(52, 211, 153, 0.2);
    color: var(--nt-success);
}

body.nt-premium .alert-danger {
    background: var(--nt-danger-bg);
    border-color: rgba(248, 113, 113, 0.2);
    color: var(--nt-danger);
}

body.nt-premium .alert-warning {
    background: var(--nt-warning-bg);
    border-color: rgba(251, 191, 36, 0.2);
    color: var(--nt-warning);
}

body.nt-premium .alert-info {
    background: var(--nt-info-bg);
    border-color: rgba(96, 165, 250, 0.2);
    color: var(--nt-info);
}

/* ── Modals ── */

body.nt-premium .modal-content {
    background: #1c1c1e;
    border: 1px solid var(--nt-card-border);
    border-radius: var(--nt-radius);
    color: var(--nt-text);
}

body.nt-premium .modal-header {
    border-bottom: 1px solid var(--nt-card-border);
    color: var(--nt-text-bright);
}

body.nt-premium .modal-footer {
    border-top: 1px solid var(--nt-card-border);
}

body.nt-premium .modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
}

body.nt-premium .modal-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
}

/* ── Nav Tabs & Pills ── */

body.nt-premium .nav-tabs {
    border-bottom: 1px solid var(--nt-card-border);
}

body.nt-premium .nav-tabs .nav-link {
    color: var(--nt-text-secondary);
    border: none;
    padding: 10px 16px;
    font-weight: 500;
    border-radius: var(--nt-radius-sm) var(--nt-radius-sm) 0 0;
    transition: all 0.2s var(--nt-ease);
}

body.nt-premium .nav-tabs .nav-link:hover {
    color: var(--nt-text);
    background: rgba(255, 255, 255, 0.04);
    border-color: transparent;
}

body.nt-premium .nav-tabs .nav-link.active {
    color: var(--nt-accent);
    background: var(--nt-accent-subtle);
    border-color: transparent;
    font-weight: 600;
}

body.nt-premium .nav-pills .nav-link {
    color: var(--nt-text-secondary);
    border-radius: var(--nt-radius-sm);
    transition: all 0.2s var(--nt-ease);
}

body.nt-premium .nav-pills .nav-link.active {
    background: var(--nt-accent-subtle);
    color: var(--nt-accent);
}

/* ── Dropdowns ── */

body.nt-premium .dropdown-menu {
    background: #1c1c1e;
    border: 1px solid var(--nt-card-border);
    border-radius: var(--nt-radius-sm);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    padding: 4px;
}

body.nt-premium .dropdown-item {
    color: var(--nt-text);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    transition: all 0.15s ease;
}

body.nt-premium .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--nt-text-bright);
}

body.nt-premium .dropdown-item.active,
body.nt-premium .dropdown-item:active {
    background: var(--nt-accent-subtle);
    color: var(--nt-accent);
}

body.nt-premium .dropdown-divider {
    border-color: var(--nt-card-border);
}

/* ── List Groups ── */

body.nt-premium .list-group-item {
    background: transparent;
    border-color: var(--nt-card-border);
    color: var(--nt-text);
}

body.nt-premium .list-group-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

body.nt-premium .list-group-item.active {
    background: var(--nt-accent-subtle);
    border-color: rgba(59, 130, 246, 0.2);
    color: var(--nt-accent);
}

/* ── Pagination ── */

body.nt-premium .page-link {
    background: transparent;
    border-color: var(--nt-card-border);
    color: var(--nt-text-secondary);
    border-radius: 8px;
}

body.nt-premium .page-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--nt-card-border-hover);
    color: var(--nt-text-bright);
}

body.nt-premium .page-item.active .page-link {
    background: var(--nt-accent-subtle);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--nt-accent);
}

body.nt-premium .page-item.disabled .page-link {
    background: transparent;
    border-color: var(--nt-card-border);
    color: var(--nt-text-muted);
}

/* ── Progress Bars ── */

body.nt-premium .progress {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    height: 8px;
}

body.nt-premium .progress-bar {
    background: var(--nt-gradient);
    border-radius: 8px;
}

/* ── Tooltips ── */

body.nt-premium .tooltip-inner {
    background: #2c2c2e;
    border: 1px solid var(--nt-card-border);
    color: var(--nt-text);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
}

/* ── Accordion ── */

body.nt-premium .accordion-item {
    background: transparent;
    border-color: var(--nt-card-border);
}

body.nt-premium .accordion-button {
    background: #1c1c1e;
    color: var(--nt-text);
    border-radius: var(--nt-radius-sm);
}

body.nt-premium .accordion-button:not(.collapsed) {
    background: var(--nt-accent-subtle);
    color: var(--nt-accent);
}

body.nt-premium .accordion-button::after {
    filter: invert(1);
}

body.nt-premium .accordion-body {
    background: transparent;
    color: var(--nt-text);
}

/* ── Breadcrumbs ── */

body.nt-premium .breadcrumb {
    background: transparent;
}

body.nt-premium .breadcrumb-item a {
    color: var(--nt-accent);
}

body.nt-premium .breadcrumb-item.active {
    color: var(--nt-text-muted);
}

/* ── Misc ── */

body.nt-premium hr {
    border-color: var(--nt-card-border);
    opacity: 1;
}

body.nt-premium .shadow,
body.nt-premium .shadow-sm,
body.nt-premium .shadow-lg {
    box-shadow: none !important;
}

body.nt-premium .border {
    border-color: var(--nt-card-border) !important;
}

body.nt-premium .border-bottom {
    border-bottom-color: var(--nt-card-border) !important;
}

body.nt-premium .border-top {
    border-top-color: var(--nt-card-border) !important;
}

body.nt-premium code {
    color: var(--nt-accent);
    background: var(--nt-accent-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

body.nt-premium pre {
    background: var(--nt-card);
    border: 1px solid var(--nt-card-border);
    border-radius: var(--nt-radius-sm);
    padding: 16px;
    color: var(--nt-text);
}

/* ── Old sidebar/header compat — hide if loaded alongside new rail ── */
body.nt-premium .premium-sidebar {
    display: none !important;
}

body.nt-premium .theme-toggle {
    display: none !important;
}

/* ── Container fluid padding adjustment for rail ── */
body.nt-premium .container-fluid {
    padding-left: 24px;
    padding-right: 24px;
}

/* ── Chart.js dark compatibility ── */
body.nt-premium canvas {
    filter: none;
}

/* ═══════════════════════════════════════════════════════
   Mobile Responsive Overrides
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Bootstrap modals: full-width on mobile */
    body.nt-premium .modal-dialog {
        margin: 8px;
        max-width: calc(100vw - 16px);
    }

    /* Forms: stack label + input */
    body.nt-premium .row > [class*="col-md-"],
    body.nt-premium .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Nav tabs: horizontal scroll */
    body.nt-premium .nav-tabs,
    body.nt-premium .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.nt-premium .nav-tabs::-webkit-scrollbar,
    body.nt-premium .nav-pills::-webkit-scrollbar {
        display: none;
    }
    body.nt-premium .nav-tabs .nav-link,
    body.nt-premium .nav-pills .nav-link {
        white-space: nowrap;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Tables: force horizontal scroll */
    body.nt-premium .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.nt-premium table {
        font-size: 12px;
    }
    body.nt-premium table th,
    body.nt-premium table td {
        padding: 8px 10px;
        white-space: nowrap;
    }

    /* Cards: less padding */
    body.nt-premium .card {
        margin-bottom: 12px;
    }
    body.nt-premium .card-body {
        padding: 14px;
    }
    body.nt-premium .card-header {
        padding: 10px 14px;
    }

    /* Buttons: full width in stacked forms */
    body.nt-premium .d-grid .btn,
    body.nt-premium .btn-block {
        width: 100%;
    }

    /* Container: reduce side padding */
    body.nt-premium .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Dropdowns: wider on mobile */
    body.nt-premium .dropdown-menu {
        min-width: 200px;
    }

    /* Accordion: smaller text */
    body.nt-premium .accordion-button {
        font-size: 13px;
        padding: 10px 14px;
    }

    /* Input groups: stack if needed */
    body.nt-premium .input-group {
        flex-wrap: wrap;
    }
    body.nt-premium .input-group > .form-control {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    body.nt-premium .card-body {
        padding: 12px;
    }
    body.nt-premium .btn {
        font-size: 13px;
        padding: 8px 14px;
    }
}