/* ==========================================================================
   WireGuard Portal — portal.css
   Custom chrome on top of Bootstrap 5.3 (CDN). No build step.

   Component markup contracts used across views:
   - Signal bars:   <span class="signal-bars sig-3" title="72%"><i></i><i></i><i></i><i></i></span>
                    (modifiers sig-0 … sig-4; 4 child elements of any tag)
   - Online badge:  <span class="badge-online">Online</span> / <span class="badge-offline">Offline</span>
   - Sync badges:   <span class="badge-sync-pending|badge-sync-synced|badge-sync-error">…</span>
   - Sticky table:  <div class="table-sticky"><table class="table">…</table></div>
   - Truncated comment: <span class="comment-cell" title="full text">short…</span>
   ========================================================================== */

:root {
    --wgp-accent: #2563eb;
    --wgp-accent-hover: #1d4ed8;
    --wgp-accent-active: #1e40af;
    --wgp-sidebar-bg: #111827;
    --wgp-sidebar-bg-deep: #0b1220;
    --wgp-sidebar-hover: #1f2937;
    --wgp-sidebar-text: #9ca3af;
    --wgp-sidebar-w: 264px;
    --wgp-topbar-h: 64px;
    --bs-link-color: #2563eb;
    --bs-link-hover-color: #1d4ed8;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color-rgb: 29, 78, 216;
}

body.portal-body {
    background-color: #f3f4f6;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Accent re-theme of Bootstrap primaries
   -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--wgp-accent);
    --bs-btn-border-color: var(--wgp-accent);
    --bs-btn-hover-bg: var(--wgp-accent-hover);
    --bs-btn-hover-border-color: var(--wgp-accent-hover);
    --bs-btn-active-bg: var(--wgp-accent-active);
    --bs-btn-active-border-color: var(--wgp-accent-active);
    --bs-btn-disabled-bg: var(--wgp-accent);
    --bs-btn-disabled-border-color: var(--wgp-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--wgp-accent);
    --bs-btn-border-color: var(--wgp-accent);
    --bs-btn-hover-bg: var(--wgp-accent);
    --bs-btn-hover-border-color: var(--wgp-accent);
    --bs-btn-active-bg: var(--wgp-accent-active);
    --bs-btn-active-border-color: var(--wgp-accent-active);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .15);
}

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

.pagination {
    --bs-pagination-active-bg: var(--wgp-accent);
    --bs-pagination-active-border-color: var(--wgp-accent);
    --bs-pagination-color: var(--wgp-accent);
    --bs-pagination-hover-color: var(--wgp-accent-hover);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--wgp-accent);
}

/* --------------------------------------------------------------------------
   Shell layout
   -------------------------------------------------------------------------- */
.portal-shell {
    display: flex;
    min-height: 100vh;
}

.portal-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.portal-content {
    flex: 1 1 auto;
    padding: 1.5rem 1.25rem;
}

@media (min-width: 1200px) {
    .portal-content {
        padding: 1.75rem 2rem;
    }
}

.portal-footer {
    display: flex;
    align-items: center;
    padding: .75rem 1.25rem;
    color: #9ca3af;
    font-size: .8rem;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

/* --------------------------------------------------------------------------
   Sidebar (offcanvas below lg, sticky column at lg+)
   -------------------------------------------------------------------------- */
.portal-sidebar {
    width: var(--wgp-sidebar-w);
    background-color: var(--wgp-sidebar-bg) !important; /* beats offcanvas-lg transparent!important */
    color: var(--wgp-sidebar-text);
}

.portal-sidebar .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.portal-sidebar .offcanvas-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: transparent !important;
}

@media (min-width: 992px) {
    .portal-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        flex: 0 0 var(--wgp-sidebar-w);
        border-right: 1px solid rgba(255, 255, 255, .04);
    }

    .portal-sidebar .offcanvas-body {
        flex-grow: 1;
        height: 100%;
        overflow-y: auto;
    }
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sidebar-brand:hover {
    color: #fff;
}

.brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--wgp-accent), #7c3aed);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
}

.brand-mark-lg {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 1.7rem;
    display: grid;
}

.brand-text {
    line-height: 1.15;
    font-weight: 600;
    color: #fff;
}

.brand-text small {
    display: block;
    font-weight: 400;
    color: var(--wgp-sidebar-text);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-nav {
    padding: 1rem .75rem;
    gap: .15rem;
}

.sidebar-nav .nav-link {
    color: var(--wgp-sidebar-text);
    border-radius: .5rem;
    padding: .55rem .85rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .925rem;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-nav .nav-link i {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus {
    color: #fff;
    background-color: var(--wgp-sidebar-hover);
}

.sidebar-nav .nav-link.active {
    color: #fff;
    background-color: var(--wgp-accent);
    box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}

.sidebar-section {
    padding: .95rem .95rem .3rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #6b7280;
}

.sidebar-footer {
    margin-top: auto;
    padding: .9rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    background: var(--wgp-sidebar-bg-deep);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.sidebar-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sidebar-user-name {
    color: #e5e7eb;
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.btn-sidebar-logout {
    color: var(--wgp-sidebar-text);
    border: 0;
    font-size: 1.05rem;
    line-height: 1;
}

.btn-sidebar-logout:hover,
.btn-sidebar-logout:focus {
    color: #fff;
    background-color: var(--wgp-sidebar-hover);
}

/* --------------------------------------------------------------------------
   Avatars & role badges
   -------------------------------------------------------------------------- */
.avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--wgp-sidebar-hover);
    color: #e5e7eb;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: .95rem;
}

.avatar-sm {
    width: 28px;
    height: 28px;
    font-size: .78rem;
    background: #e5e7eb;
    color: #374151;
}

.role-badge {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    align-self: flex-start;
}

.role-admin {
    background-color: #fee2e2;
    color: #b91c1c;
}

.role-manager {
    background-color: #e0f2fe;
    color: #0369a1;
}

.role-reseller {
    background-color: #e5e7eb;
    color: #374151;
}

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */
.portal-topbar {
    height: var(--wgp-topbar-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user .btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: .9rem;
}

.topbar-user .btn:hover,
.topbar-user .btn:focus {
    background: #f9fafb;
}

.btn-sidebar-toggle {
    font-size: 1.15rem;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Cards, tables, alerts
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.card > .card-header {
    background: #fff;
    font-weight: 600;
}

.flash-area .alert {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.table thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    background-color: #f8fafc;
    white-space: nowrap;
}

.table tbody td {
    vertical-align: middle;
}

/* Scrollable table with sticky header */
.table-sticky {
    max-height: 65vh;
    overflow-y: auto;
}

.table-sticky thead th,
.table-responsive .table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: inset 0 -1px 0 #e5e7eb;
}

/* Truncated comments (full text via title tooltip) */
.comment-cell,
.text-truncate-comment {
    display: inline-block;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    color: #6b7280;
}

/* --------------------------------------------------------------------------
   Status badges: online / offline / sync states
   -------------------------------------------------------------------------- */
.badge-online,
.badge-offline,
.badge-sync-pending,
.badge-sync-synced,
.badge-sync-error {
    display: inline-flex;
    align-items: center;
    gap: .38em;
    padding: .32em .65em;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.badge-online {
    background-color: #dcfce7;
    color: #166534;
}

.badge-online::before {
    content: "";
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
}

.badge-offline {
    background-color: #f3f4f6;
    color: #6b7280;
}

.badge-offline::before {
    content: "";
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: #9ca3af;
}

.badge-sync-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-sync-synced {
    background-color: #dcfce7;
    color: #166534;
}

.badge-sync-error {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* --------------------------------------------------------------------------
   Wi-Fi signal bars — sig-0 … sig-4, 4 child elements
   -------------------------------------------------------------------------- */
.signal-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    vertical-align: middle;
}

.signal-bars > * {
    display: inline-block;
    width: 3px;
    border-radius: 1px;
    background-color: #d1d5db;
    font-style: normal;
}

.signal-bars > :nth-child(1) { height: 5px; }
.signal-bars > :nth-child(2) { height: 8px; }
.signal-bars > :nth-child(3) { height: 11px; }
.signal-bars > :nth-child(4) { height: 14px; }

.signal-bars.sig-1 > :nth-child(-n+1) { background-color: #ef4444; }
.signal-bars.sig-2 > :nth-child(-n+2) { background-color: #f59e0b; }
.signal-bars.sig-3 > :nth-child(-n+3) { background-color: #22c55e; }
.signal-bars.sig-4 > :nth-child(-n+4) { background-color: #16a34a; }

/* --------------------------------------------------------------------------
   Misc helpers
   -------------------------------------------------------------------------- */
/* One-time checkin secret display (device create) */
.secret-box {
    font-family: var(--bs-font-monospace);
    font-size: .95rem;
    background: var(--wgp-sidebar-bg-deep);
    color: #a5f3fc;
    padding: .8rem 1rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    word-break: break-all;
}

.secret-box .btn {
    flex: 0 0 auto;
}

/* Dashboard stat cards (optional helper) */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: rgba(37, 99, 235, .1);
    color: var(--wgp-accent);
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-card .stat-label {
    color: #6b7280;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* JSON dumps in modals (device status) */
.json-dump {
    background: var(--wgp-sidebar-bg-deep);
    color: #d1fae5;
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    padding: 1rem;
    border-radius: .5rem;
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0;
}

code {
    color: #be185d;
}

/* --------------------------------------------------------------------------
   Login page (standalone view — no app layout)
   -------------------------------------------------------------------------- */
body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 550px at 75% -10%, rgba(37, 99, 235, .45) 0%, rgba(37, 99, 235, 0) 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(124, 58, 237, .35) 0%, rgba(124, 58, 237, 0) 60%),
        linear-gradient(160deg, #111827 0%, #0b1220 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
}

.login-card .card-footer {
    background: #f9fafb;
    border-top: 1px solid #eef0f3;
}