/* VPN Coordinator — Aviro360 brand theme */

/* ── Design tokens ─────────────────────────────────── */
:root {
    --av-blue:        #0074b8;
    --av-blue-hover:  #005f9a;
    --av-accent:      #13a3dd;
    --av-green:       #00bc7d;
    --av-dark:        #1c2331;
    --av-text:        #222222;
    --av-muted:       #6b7280;
    --av-border:      #e2e8f0;
    --av-surface:     #f8fafc;
    --av-white:       #ffffff;
}

/* ── Base ──────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--av-text);
    background: var(--av-surface);
}

/* ── Override Bootstrap primary ────────────────────── */
.btn-primary {
    background-color: var(--av-blue);
    border-color: var(--av-blue);
    border-radius: 9999px;
    font-weight: 500;
    padding: .45rem 1.2rem;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--av-blue-hover);
    border-color: var(--av-blue-hover);
}
.btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(0,116,184,.3); }

.btn-outline-primary {
    color: var(--av-blue);
    border-color: var(--av-blue);
    border-radius: 9999px;
    font-weight: 500;
    padding: .45rem 1.2rem;
}
.btn-outline-primary:hover {
    background-color: var(--av-blue);
    border-color: var(--av-blue);
}

.btn-outline-secondary  { border-radius: 9999px; }
.btn-outline-danger     { border-radius: 9999px; }
.btn-outline-warning    { border-radius: 9999px; }
.btn-outline-success    { border-radius: 9999px; }
.btn-outline-info       { border-radius: 9999px; }
.btn-outline-light      { border-radius: 9999px; }
.btn-secondary          { border-radius: 9999px; }
.btn-danger             { border-radius: 9999px; }
.btn-success            { border-radius: 9999px; }
.btn-sm                 { border-radius: 9999px !important; }

/* ── Small action buttons in tables ────────────────── */
.btn-xs {
    padding: .18rem .55rem;
    font-size: .72rem;
    border-radius: 9999px;
    line-height: 1.4;
    font-weight: 500;
}

/* ── Navbar ─────────────────────────────────────────── */
.av-navbar {
    background: var(--av-white);
    border-bottom: 1px solid var(--av-border);
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    padding: .6rem 1.25rem;
}

.av-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--av-dark);
    letter-spacing: -.2px;
}

.av-navbar .navbar-brand .brand-accent {
    color: var(--av-blue);
}

.av-navbar .navbar-brand img {
    /* tint the currentColor SVG to --av-blue (#0074b8) */
    filter: brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(800%) hue-rotate(183deg) brightness(97%) contrast(103%);
    display: block;
}

.av-navbar .nav-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.av-navbar .nav-user {
    font-size: .82rem;
    color: var(--av-muted);
    font-weight: 500;
}

/* ── Tabs ───────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--av-border);
    gap: .25rem;
}
.nav-tabs .nav-link {
    color: var(--av-muted);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-weight: 500;
    padding: .55rem 1rem;
    border-radius: .375rem .375rem 0 0;
    transition: color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover { color: var(--av-blue); background: transparent; }
.nav-tabs .nav-link.active {
    color: var(--av-blue);
    border-bottom: 2px solid var(--av-blue);
    background: transparent;
    font-weight: 600;
}

/* ── Cards ──────────────────────────────────────────── */
.card {
    border: 1px solid var(--av-border);
    border-radius: .625rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.card-title { font-weight: 600; color: var(--av-dark); }

/* ── Tables ─────────────────────────────────────────── */
.table td, .table th {
    vertical-align: middle;
    padding: .55rem .75rem;
}
.table-light th {
    background: var(--av-surface);
    color: var(--av-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border-bottom: 1px solid var(--av-border);
}
.table-hover tbody tr:hover { background: rgba(0,116,184,.04); }

/* ── Forms ──────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--av-accent);
    box-shadow: 0 0 0 .2rem rgba(19,163,221,.2);
}

/* ── Code ───────────────────────────────────────────── */
code {
    font-size: .82rem;
    color: var(--av-blue);
    background: transparent;
}
.table code {
    background: rgba(0,116,184,.07);
    padding: .1em .35em;
    border-radius: .2em;
}

/* ── Badges ─────────────────────────────────────────── */
.badge { font-weight: 500; border-radius: 9999px; }
.badge.bg-primary { background-color: var(--av-blue) !important; }

/* ── Alerts ─────────────────────────────────────────── */
.alert-primary { border-color: var(--av-accent); color: var(--av-blue); background: rgba(0,116,184,.08); }

/* ── Login / Setup card ─────────────────────────────── */
.av-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fb 100%);
}

.av-login-card {
    width: 360px;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0,116,184,.12);
    border: none;
    padding: 2rem;
}

.av-login-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.av-login-logo img {
    /* tint the currentColor SVG to --av-blue (#0074b8) */
    filter: brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(800%) hue-rotate(183deg) brightness(97%) contrast(103%);
    display: block;
    margin: 0 auto .35rem;
}
.av-login-logo .subtitle {
    font-size: .78rem;
    color: var(--av-muted);
    margin-top: .15rem;
}

/* ── Token display ──────────────────────────────────── */
#token-display, #deploy-node-cmd {
    font-family: monospace;
    font-size: .82rem;
    word-break: break-all;
    background: #f1f5f9;
    border: 1px solid var(--av-border);
    border-radius: .5rem;
    padding: .75rem;
    user-select: all;
}

/* ── Theme toggle button ────────────────────────────── */
.btn-theme {
    background: none;
    border: 1px solid var(--av-border);
    border-radius: 9999px;
    padding: .3rem .65rem;
    cursor: pointer;
    color: var(--av-muted);
    line-height: 1;
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: .3rem;
    transition: color .15s, border-color .15s;
}
.btn-theme:hover { color: var(--av-blue); border-color: var(--av-blue); }

/* ── Dark theme ─────────────────────────────────────── */
[data-bs-theme="dark"] {
    --av-surface:  #0f172a;
    --av-white:    #1e293b;
    --av-text:     #e2e8f0;
    --av-muted:    #94a3b8;
    --av-border:   #334155;
    --av-dark:     #f1f5f9;
}
[data-bs-theme="dark"] body     { background: var(--av-surface); color: var(--av-text); }
[data-bs-theme="dark"] .av-navbar {
    background: #1e293b;
    border-bottom-color: #334155;
    box-shadow: 0 1px 8px rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .av-login-wrap {
    background: linear-gradient(135deg, #0c1624 0%, #1e293b 100%);
}
[data-bs-theme="dark"] .av-login-card {
    background: #1e293b;
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] #token-display,
[data-bs-theme="dark"] #deploy-node-cmd {
    background: #0f172a;
    border-color: #334155;
    color: var(--av-text);
}

/* ── Tab pane animation ─────────────────────────────── */
.tab-pane { animation: fadeIn .12s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal ──────────────────────────────────────────── */
.modal-header {
    border-bottom: 1px solid var(--av-border);
    background: var(--av-surface);
    border-radius: .5rem .5rem 0 0;
}
.modal-footer { border-top: 1px solid var(--av-border); }
.modal-content { border: none; box-shadow: 0 16px 48px rgba(0,0,0,.15); border-radius: .625rem; }