/* ═══════════════════════════════════════════════
   MobiNET Portal — Petrol Console theme
   Brand sampled from mobinet.app + the MobiNET app:
   teal #15cca7, petrol ground #071b1c, Nunito.
   ═══════════════════════════════════════════════ */

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../lib/fonts/nunito/nunito-variable.woff2') format('woff2');
}

/* ─── Base ─── */
:root {
    /* Brand */
    --mn-teal: #15cca7;          /* brand primary (unchanged) */
    --mn-mint: #2fe8be;          /* bright signal / highlight */
    --mn-teal-deep: #11af95;     /* hover */

    /* Petrol console surfaces (the app's dark teal, replacing the old purple) */
    --mn-bg-dark: #071b1c;       /* page ground */
    --mn-bg-card: #0e2e31;       /* card / raised surface */
    --mn-bg-surface: rgba(14, 46, 49, 0.85);
    --mn-border: #1c4a4c;

    /* Text */
    --mn-text: #eaf5f2;
    --mn-text-muted: #82a9a5;

    /* Semantic — from the app's End (red) / Forward (blue) buttons */
    --mn-danger: #ff6b6b;
    --mn-info: #4fc3f7;
    --mn-warning: #e8a33d;

    /* Legacy accent aliases (previously declared-only; kept for safety) */
    --mn-purple: #6f7bd6;
    --mn-pink: var(--mn-danger);
    --mn-blue: var(--mn-info);
    --mn-orange: var(--mn-warning);

    --mn-radius: 20px;
    --mn-radius-sm: 12px;
}

body {
    margin: 0;
    font-family: 'Nunito', ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(1100px 600px at 50% -10%, #0c3335 0%, transparent 60%),
        linear-gradient(180deg, #0a2427 0%, var(--mn-bg-dark) 60%);
    color: var(--mn-text);
    min-height: 100vh;
}

/* ─── Sidebar ─── */
#sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: margin-left 0.3s;
    background: var(--mn-bg-dark) !important;
    border-right: 1px solid var(--mn-border);
}

/* ─── Brand wordmark (sidebar + anywhere) ─── */
.brand-wordmark {
    display: inline-block;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand-wordmark .mobi {
    color: var(--mn-text);
    opacity: 0.62;
}

.brand-wordmark .net {
    color: var(--mn-teal);
}

/* Navbar page-context title (distinct from the teal brand) */
.navbar-page-title {
    color: var(--mn-text);
    font-weight: 700;
    font-size: 1.05rem;
}

#sidebar .btn-toggle::after {
    content: '\25BC';
    font-size: 0.6em;
    margin-left: auto;
}

#sidebar .btn-toggle[aria-expanded="true"]::after {
    content: '\25B2';
}

#sidebar a:hover,
#sidebar .btn-toggle:hover {
    color: var(--mn-teal) !important;
}

/* ─── Navbar ─── */
.navbar {
    background: var(--mn-bg-dark) !important;
    border-bottom: 1px solid var(--mn-border) !important;
}

.navbar-brand {
    color: var(--mn-teal) !important;
    font-weight: 700;
}

/* ─── Content Area ─── */
.container-fluid {
    background: transparent;
}

main h2, main h3, main h4, main h5 {
    color: var(--mn-text);
}

/* ─── Cards ─── */
.card {
    background: var(--mn-bg-surface);
    border: 1px solid var(--mn-border);
    color: var(--mn-text);
}

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

.card:hover {
    border-color: var(--mn-teal);
}

/* ─── Tables ─── */
.table {
    color: var(--mn-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(14, 46, 49, 0.5);
    --bs-table-hover-bg: rgba(21, 204, 167, 0.05);
    border-color: var(--mn-border);
}

.table th {
    white-space: nowrap;
    color: var(--mn-text-muted);
    border-color: var(--mn-border);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    border-color: var(--mn-border);
    color: var(--mn-text);
}

/* DataTables */
.dataTables_wrapper {
    color: var(--mn-text) !important;
}

.dataTables_wrapper table.dataTable tbody td {
    color: var(--mn-text) !important;
}

.dataTables_wrapper table.dataTable thead th {
    color: var(--mn-text-muted) !important;
    border-bottom-color: var(--mn-border) !important;
}

.dataTables_wrapper table.dataTable tbody tr {
    background-color: transparent !important;
}

.dataTables_wrapper table.dataTable tbody tr:hover {
    background-color: rgba(21, 204, 167, 0.05) !important;
}

.dataTables_wrapper table.dataTable tbody tr.odd {
    background-color: rgba(14, 46, 49, 0.4) !important;
}

.dataTables_wrapper table.dataTable tbody tr.even {
    background-color: transparent !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--mn-text-muted) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--mn-bg-surface);
    border: 1px solid var(--mn-border);
    color: var(--mn-text);
    border-radius: 6px;
    padding: 4px 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--mn-text-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--mn-teal) !important;
    color: var(--mn-bg-dark) !important;
    border-color: var(--mn-teal) !important;
    border-radius: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(21, 204, 167, 0.15) !important;
    color: var(--mn-teal) !important;
    border-color: var(--mn-border) !important;
}

/* ─── Forms ─── */
.form-control, .form-select {
    background-color: var(--mn-bg-surface);
    border: 1px solid var(--mn-border);
    color: var(--mn-text);
}

.form-control::placeholder, .form-select::placeholder {
    color: var(--mn-text-muted);
    opacity: 1;
}

.form-control:focus, .form-select:focus {
    background-color: var(--mn-bg-surface);
    border-color: var(--mn-teal);
    color: var(--mn-text);
    box-shadow: 0 0 0 0.2rem rgba(21, 204, 167, 0.15);
}

.form-label, label {
    color: var(--mn-text-muted);
}

/* ─── Buttons ─── */
.btn-primary {
    background-color: var(--mn-teal);
    border-color: var(--mn-teal);
    color: var(--mn-bg-dark);
}

.btn-primary:hover {
    background-color: #12b896;
    border-color: #12b896;
    color: var(--mn-bg-dark);
}

.btn-outline-primary {
    color: var(--mn-teal);
    border-color: var(--mn-teal);
}

.btn-outline-primary:hover {
    background-color: var(--mn-teal);
    color: var(--mn-bg-dark);
}

.btn-outline-light {
    border-color: var(--mn-border);
    color: var(--mn-text-muted);
}

.btn-outline-light:hover {
    background-color: rgba(21, 204, 167, 0.1);
    border-color: var(--mn-teal);
    color: var(--mn-teal);
}

/* ─── Select2 ─── */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--mn-bg-surface);
    border-color: var(--mn-border);
    color: var(--mn-text);
}

/* Selected value text (closed dropdown) */
.select2-container--bootstrap-5 .select2-selection .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection .select2-selection__placeholder {
    color: var(--mn-text);
}

.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--mn-bg-card);
    border-color: var(--mn-border);
}

/* Search input inside open dropdown */
.select2-container--bootstrap-5 .select2-search .select2-search__field,
.select2-container--bootstrap-5 .select2-dropdown .select2-search__field {
    background-color: var(--mn-bg-surface);
    border-color: var(--mn-border);
    color: var(--mn-text);
}

/* Result options (non-highlighted) */
.select2-container--bootstrap-5 .select2-results__option {
    color: var(--mn-text);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--mn-teal) !important;
    color: var(--mn-bg-dark) !important;
}

/* ─── Tabs ─── */
.nav-tabs {
    border-color: var(--mn-border);
}

.nav-tabs .nav-link {
    font-size: 0.9rem;
    color: var(--mn-text-muted);
}

.nav-tabs .nav-link.active {
    background-color: var(--mn-bg-surface);
    border-color: var(--mn-border) var(--mn-border) transparent;
    color: var(--mn-teal);
}

.nav-tabs .nav-link:hover {
    border-color: var(--mn-border);
    color: var(--mn-teal);
}

.tab-content {
    color: var(--mn-text);
}

.tab-content .dataTables_wrapper {
    padding-top: 0.5rem;
}

/* ─── Detail Grid ─── */
.field-group {
    margin-bottom: 1rem;
}

.field-group label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mn-text-muted);
}

.field-group .form-control-plaintext {
    color: #fff;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 0;
}

@media (max-width: 768px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Detail Sections (grouped fields) ─── */
.detail-section {
    margin-bottom: 1.75rem;
}

.detail-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--mn-border);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mn-teal);
}

.detail-section-label {
    flex: 1 1 auto;
}

/* Waveform nod: a small mint signal-bar marking each section, echoing the app icon. */
.detail-section-marker {
    flex: 0 0 auto;
    width: 3px;
    height: 0.85em;
    border-radius: 2px;
    background: var(--mn-mint);
    box-shadow: 0 0 6px rgba(47, 232, 190, 0.5);
}

/* Collapsible secondary sections — native <details>, no JS. */
.detail-section-collapsible > summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
}

.detail-section-collapsible > summary::-webkit-details-marker {
    display: none;
}

.detail-section-collapsible[open] > summary {
    margin-bottom: 1rem;
}

.detail-section-collapsible > summary:hover {
    color: var(--mn-mint);
}

.detail-section-chevron {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--mn-text-muted);
    transition: transform 0.18s ease;
}

.detail-section-collapsible[open] > summary .detail-section-chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .detail-section-chevron {
        transition: none;
    }
}

/* ─── Alerts & Badges ─── */
.badge {
    font-weight: 500;
}

.alert {
    background-color: var(--mn-bg-surface);
    border-color: var(--mn-border);
    color: var(--mn-text);
}

/* ─── List groups ─── */
/* Bootstrap defaults list-group items to a white background; bring them onto the
   dark theme so list-group surfaces (e.g. the Add-SIP-account wizard's account-type
   cards + extension picker, the Config Hub) match cards/modals across the portal. */
.list-group-item {
    background-color: var(--mn-bg-surface);
    border-color: var(--mn-border);
    color: var(--mn-text);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(21, 204, 167, 0.08);
    color: var(--mn-text);
}

/* Selected card: a label.list-group-item wrapping a checked radio/checkbox
   (the wizard's account-type selection) gets a teal accent. */
.list-group-item:has(.form-check-input:checked),
.list-group-item.active {
    background-color: rgba(21, 204, 167, 0.12);
    border-color: var(--mn-teal);
    color: var(--mn-text);
}

.list-group-item.disabled,
.list-group-item:disabled {
    background-color: var(--mn-bg-surface);
    color: var(--mn-text-muted);
}

/* ─── Modals ─── */
.modal-content {
    background-color: var(--mn-bg-card);
    border: 1px solid var(--mn-border);
    color: var(--mn-text);
}

.modal-header {
    border-color: var(--mn-border);
}

.modal-footer {
    border-color: var(--mn-border);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--mn-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--mn-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mn-teal);
}

/* ─── Auth pages ─── */
/* Login / password-reset use _AuthLayout.cshtml + auth.css (petrol console). */

/* ─── Text utilities ─── */
.text-muted {
    color: var(--mn-text-muted) !important;
}

.text-primary {
    color: var(--mn-teal) !important;
}

a {
    color: var(--mn-teal);
}

a:hover {
    color: #12b896;
}

/* ─── Dashboard scoped overrides removed ───
   The dashboard now uses the global dark theme.
   Dashboard-specific styles remain in the view. */