/* ===== LicenseWS Admin Dashboard – vanilla CSS ===== */

/* Design tokens */
:root {
    --bg: #0b0c10;
    --bg-soft: #11131a;
    --panel: #151823;
    --panel-2: #1b2030;
    --text: #e8eefc;
    --muted: #9aa7c7;
    --primary: #6aa6ff;
    --primary-2: #3e86ff;
    --danger: #ff6b6b;
    --warn: #ffcf5c;
    --ok: #39d98a;
    --border: #242a3a;
    --radius: 14px;
    --shadow: 0 8px 24px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.25);
    --gap: 16px;
    --gap-lg: 24px;
    --focus: 0 0 0 3px rgba(106,166,255,.35);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f6f8ff;
        --bg-soft: #f2f5ff;
        --panel: #ffffff;
        --panel-2: #f8faff;
        --text: #0f172a;
        --muted: #667085;
        --primary: #3b82f6;
        --primary-2: #2563eb;
        --border: #e6e9f5;
        --shadow: 0 8px 24px rgba(16,24,40,.08), 0 2px 10px rgba(16,24,40,.04);
    }
}

/* Page */
body {
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
}

h1, h2, h3 {
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: .2px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 16px;
    color: var(--muted);
    font-weight: 600;
}

/* Container columns (override inline) */
div[style*="display:flex"][style*="gap:24px"] {
    display: flex !important;
    gap: var(--gap-lg) !important;
    align-items: flex-start !important;
}

div[style*="width:360px"] {
    width: 360px !important;
}

@media (max-width: 980px) {
    div[style*="display:flex"][style*="gap:24px"] {
        flex-direction: column !important;
    }

    div[style*="width:360px"] {
        width: 100% !important;
    }
}

/* Panels (override inline borders) */
div[style*="border:1px solid #ddd"] {
    border: 1px solid var(--border) !important;
    background: var(--panel);
    border-radius: var(--radius);
    padding: 16px !important;
    box-shadow: var(--shadow);
}

div[style*="border:1px dashed #ccc"] {
    border: 1px dashed var(--border) !important;
    background: var(--panel);
    border-radius: var(--radius);
    padding: 24px !important;
}

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* Forms */
input[type="text"], input[type="password"], input[type="number"], input[type="datetime-local"], textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    transition: box-shadow .15s, border-color .15s;
}

    input[type="text"]::placeholder, textarea::placeholder {
        color: var(--muted);
    }

    input:focus, textarea:focus {
        border-color: var(--primary);
        box-shadow: var(--focus);
    }

form {
    display: block;
    gap: var(--gap);
}

label {
    display: inline-block;
    margin: 6px 0 4px;
    color: var(--muted);
    font-weight: 600;
}

/* Buttons (style all <button>) */
button, .btn {
    appearance: none;
    border: 1px solid transparent;
    cursor: pointer;
    background: linear-gradient(180deg, var(--primary), var(--primary-2));
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: var(--shadow);
    transition: transform .06s ease, filter .15s ease, box-shadow .15s;
}

    button:hover {
        filter: brightness(1.05);
    }

    button:active {
        transform: translateY(1px);
    }

    button[onclick] { /* destructive defaults for explicit actions */
    }

    button.btn-ghost {
        background: transparent;
        color: var(--primary);
        border-color: var(--primary);
    }

    button.btn-danger {
        background: linear-gradient(180deg, var(--danger), #d24d4d);
    }

    button.btn-warn {
        background: linear-gradient(180deg, var(--warn), #e0ad33);
        color: #1a1a1a;
    }

    button.btn-ok {
        background: linear-gradient(180deg, var(--ok), #14b46a);
    }

/* Quick action mini buttons (+30/+90/+365) — match your inline forms */
form[action*="QuickExtend"] button {
    padding: 6px 10px;
    border-radius: 10px;
    margin-right: 6px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
}

    form[action*="QuickExtend"] button:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

/* Tables */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

th, td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

th {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    color: var(--muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .6px;
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: rgba(106,166,255,.08);
}

tbody tr:nth-child(odd) {
    background: rgba(255,255,255,.02);
}

/* Sticky header */
table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Code badges */
code {
    background: var(--panel-2);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 8px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    color: var(--text);
}

/* Details / popovers */
details {
    display: block;
    margin: 8px 0;
}

summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    color: var(--text);
}

    summary::before {
        content: "▸";
        display: inline-block;
        margin-right: 8px;
        transform: translateY(-1px);
        transition: transform .15s ease;
        color: var(--muted);
    }

details[open] summary::before {
    transform: rotate(90deg) translateY(0);
}

details > div {
    margin-top: 8px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: var(--shadow);
}

/* Section titles inside panels */
h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--muted);
}

/* Utility spacing overrides for your inline-heavy markup */
hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 14px 0;
}

ul {
    margin: 8px 0;
    padding-left: 18px;
}

small {
    color: var(--muted);
}

/* Badges for status-like content (you can wrap text with <span class="badge ..."> in future) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-size: 12px;
    color: var(--muted);
}

    .badge.ok {
        color: #0e7a4f;
        background: rgba(57,217,138,.12);
        border-color: rgba(57,217,138,.25);
    }

    .badge.warn {
        color: #7a5a0e;
        background: rgba(255,207,92,.15);
        border-color: rgba(255,207,92,.3);
    }

    .badge.danger {
        color: #8a1f1f;
        background: rgba(255,107,107,.12);
        border-color: rgba(255,107,107,.3);
    }

/* Top right auth strip in your _AdminLayout */
.header-auth {
    text-align: right;
    margin-bottom: 10px;
    color: var(--muted);
}

    .header-auth a {
        color: var(--text);
        opacity: .85;
    }

        .header-auth a:hover {
            opacity: 1;
            text-decoration: underline;
        }