/* ── Theme variables ─────────────────────────────────────────────────────────*/
:root,
[data-theme="dark"] {
    --ss-bg:        #0f172a;
    --ss-surface:   #1e293b;
    --ss-surface2:  #0f172a;
    --ss-border:    #334155;
    --ss-text:      #e2e8f0;
    --ss-muted:     #94a3b8;
    --ss-indigo:    #6366f1;
    --ss-indigo-lt: #818cf8;
    --ss-cyan:      #38bdf8;
    --ss-green:     #34d399;
    --ss-red:       #f87171;
    --ss-yellow:    #fbbf24;
    --ss-navbar-bg: #0d1424;
    --ss-shadow:    rgba(0,0,0,.5);
    --ss-table-stripe: rgba(255,255,255,.03);
}

[data-theme="light"] {
    --ss-bg:        #f1f5f9;
    --ss-surface:   #ffffff;
    --ss-surface2:  #f8fafc;
    --ss-border:    #cbd5e1;
    --ss-text:      #0f172a;
    --ss-muted:     #64748b;
    --ss-indigo:    #6366f1;
    --ss-indigo-lt: #4f46e5;
    --ss-cyan:      #0284c7;
    --ss-green:     #059669;
    --ss-red:       #dc2626;
    --ss-yellow:    #d97706;
    --ss-navbar-bg: #ffffff;
    --ss-shadow:    rgba(0,0,0,.12);
    --ss-table-stripe: rgba(0,0,0,.025);
}

/* ── Theme transition ─────────────────────────────────────────────────────── */
*, *::before, *::after {
    transition: background-color .2s ease, border-color .2s ease, color .15s ease;
}
/* But keep interactive transitions snappy */
button, a, .btn, input, select, textarea {
    transition: background-color .15s ease, border-color .15s ease,
                color .1s ease, opacity .15s, transform .15s, box-shadow .15s;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html, body {
    background: var(--ss-bg);
    color: var(--ss-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.ss-navbar {
    background: var(--ss-navbar-bg);
    border-bottom: 1px solid var(--ss-border);
    padding: .75rem 0;
}
[data-theme="light"] .ss-navbar {
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.ss-navbar .navbar-brand { color: var(--ss-text); font-size: 1.1rem; }
.text-indigo { color: var(--ss-indigo-lt); }
.ss-navbar .nav-link { color: var(--ss-muted); transition: color .15s; }
.ss-navbar .nav-link:hover,
.ss-navbar .nav-link.active { color: var(--ss-text); }
.ss-navbar .nav-link.active { font-weight: 600; }
/* Make Bootstrap's navbar-dark/light controls respect our theme */
.ss-navbar .navbar-toggler { border-color: var(--ss-border); }
.ss-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(148,163,184,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.theme-toggle {
    background: none;
    border: 1px solid var(--ss-border);
    color: var(--ss-muted);
    border-radius: .5rem;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: .95rem;
    transition: border-color .15s, color .15s, background .15s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: var(--ss-indigo);
    color: var(--ss-indigo-lt);
    background: rgba(99,102,241,.1);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.ss-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: .75rem;
    padding: 1.5rem;
}
.ss-card-sm {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
}
[data-theme="light"] .ss-card,
[data-theme="light"] .ss-card-sm {
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ss-indigo), #3b82f6);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.avatar-circle-lg {
    width: 48px; height: 48px;
    font-size: 1.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ss-indigo), #3b82f6);
    color: #fff;
    font-weight: 700;
}

/* ── Vault cards ─────────────────────────────────────────────────────────── */
.vault-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: .75rem;
    padding: 1.25rem;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    cursor: pointer;
    text-decoration: none;
    color: var(--ss-text);
    display: block;
}
.vault-card:hover {
    border-color: var(--ss-indigo);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99,102,241,.2);
    color: var(--ss-text);
}
[data-theme="light"] .vault-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.vault-icon {
    width: 48px; height: 48px;
    border-radius: .625rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: .75rem;
}

/* ── Secret rows ─────────────────────────────────────────────────────────── */
.secret-row {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: .625rem;
    padding: .875rem 1rem;
    margin-bottom: .5rem;
    transition: border-color .15s;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.secret-row:hover { border-color: var(--ss-indigo); }
[data-theme="light"] .secret-row {
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.secret-icon {
    width: 36px; height: 36px;
    border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(99,102,241,.12);
    color: var(--ss-indigo-lt);
}
.secret-value-masked {
    font-family: monospace;
    color: var(--ss-muted);
    letter-spacing: .1em;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control, .form-select, .input-group-text {
    background: var(--ss-surface2);
    border-color: var(--ss-border);
    color: var(--ss-text);
}
.form-control:focus, .form-select:focus {
    background: var(--ss-surface2);
    border-color: var(--ss-indigo);
    color: var(--ss-text);
    box-shadow: 0 0 0 .25rem rgba(99,102,241,.2);
}
.form-control::placeholder { color: var(--ss-muted); }
.input-group-text {
    background: var(--ss-surface2);
    border-color: var(--ss-border);
    color: var(--ss-muted);
}
.form-check-input {
    background-color: var(--ss-surface2);
    border-color: var(--ss-border);
}
.form-check-input:checked {
    background-color: var(--ss-indigo);
    border-color: var(--ss-indigo);
}
.form-text { color: var(--ss-muted) !important; }
.form-label { color: var(--ss-text); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-indigo {
    background: linear-gradient(135deg, var(--ss-indigo), #3b82f6);
    color: #fff; border: none;
}
.btn-indigo:hover { opacity: .9; color: #fff; }
.btn-outline-secondary {
    border-color: var(--ss-border);
    color: var(--ss-muted);
    background: transparent;
}
.btn-outline-secondary:hover {
    background: var(--ss-border);
    color: var(--ss-text);
    border-color: var(--ss-border);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.bg-indigo { background-color: var(--ss-indigo) !important; }
.badge-permission { font-size: .65rem; padding: .25em .6em; border-radius: .375rem; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { color: var(--ss-text); --bs-table-color: var(--ss-text); }
.table-dark {
    --bs-table-bg: var(--ss-surface);
    --bs-table-border-color: var(--ss-border);
    --bs-table-color: var(--ss-text);
    --bs-table-striped-bg: var(--ss-table-stripe);
}
.table > :not(caption) > * > * {
    background: transparent;
    color: var(--ss-text);
    border-color: var(--ss-border);
}
thead th {
    color: var(--ss-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    background: var(--ss-surface2) !important;
}

/* ── Dropdown ────────────────────────────────────────────────────────────── */
.dropdown-menu {
    background: var(--ss-surface);
    border-color: var(--ss-border);
    box-shadow: 0 8px 24px var(--ss-shadow);
}
.dropdown-item { color: var(--ss-text); background: transparent; }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--ss-border);
    color: var(--ss-text);
}
.dropdown-divider { border-color: var(--ss-border); }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
    background: var(--ss-surface);
    border-color: var(--ss-border);
    box-shadow: 0 20px 60px var(--ss-shadow);
}
.modal-header, .modal-footer { border-color: var(--ss-border); }
.modal-backdrop { --bs-backdrop-opacity: .6; }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stat-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: .75rem;
    padding: 1.25rem 1.5rem;
}
[data-theme="light"] .stat-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.stat-number { font-size: 2rem; font-weight: 700; line-height: 1; }

/* ── Password strength ───────────────────────────────────────────────────── */
.strength-bar { height: 4px; border-radius: 2px; transition: all .3s; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ss-footer {
    border-top: 1px solid var(--ss-border);
    background: var(--ss-bg);
    color: var(--ss-muted);
}

/* ── Copy button flash ───────────────────────────────────────────────────── */
.btn-copy.copied {
    background: var(--ss-green) !important;
    border-color: var(--ss-green) !important;
    color: #fff !important;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert { border-radius: .625rem; }
[data-theme="light"] .alert-warning { --bs-alert-bg: #fffbeb; --bs-alert-color: #92400e; --bs-alert-border-color: #fde68a; }
[data-theme="light"] .alert-danger  { --bs-alert-bg: #fef2f2; --bs-alert-color: #991b1b; --bs-alert-border-color: #fecaca; }
[data-theme="light"] .alert-success { --bs-alert-bg: #f0fdf4; --bs-alert-color: #166534; --bs-alert-border-color: #bbf7d0; }
[data-theme="light"] .alert-info    { --bs-alert-bg: #eff6ff; --bs-alert-color: #1e40af; --bs-alert-border-color: #bfdbfe; }

/* ── Tags ────────────────────────────────────────────────────────────────── */
.type-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    padding: .2em .6em;
    border-radius: .375rem;
    background: rgba(99,102,241,.12);
    color: var(--ss-indigo-lt);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Shared / Login containers ───────────────────────────────────────────── */
.shared-container,
.login-container {
    min-height: 100vh;
    background: var(--ss-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.shared-card,
.login-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: 1rem;
    padding: 2.5rem;
    max-width: 540px;
    width: 100%;
    box-shadow: 0 25px 50px var(--ss-shadow);
}
.login-card { max-width: 420px; }
.logo-text {
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ss-indigo-lt), var(--ss-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb-item + .breadcrumb-item::before { color: var(--ss-muted); }
.breadcrumb-item.active { color: var(--ss-text); }

/* ── Code / pre ──────────────────────────────────────────────────────────── */
code { color: var(--ss-indigo-lt); }
pre  { color: var(--ss-text); }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ss-bg); }
::-webkit-scrollbar-thumb { background: var(--ss-border); border-radius: 3px; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.expiry-badge { font-size: .7rem; }
hr { border-color: var(--ss-border); opacity: 1; }
.text-secondary { color: var(--ss-muted) !important; }