@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&display=swap');

/* ─── Typography ─────────────────────────────────────────────── */
html, body,
.navbar, .button, .input, .select select, .textarea,
.label, .notification, .box, .card, .panel, .title, .subtitle,
.table, .menu, .message, .breadcrumb, .pagination, .tabs, .tag {
    font-family: 'Sora', ui-sans-serif, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.title, .subtitle { letter-spacing: -0.01em; }
.title    { font-weight: 600; }
.subtitle { font-weight: 400; }

/* ─── Primary: charcoal in both themes — set early to prevent flash ── */
:root {
    --bulma-primary-h: 30deg;
    --bulma-primary-s: 4%;
    --bulma-primary-l: 13%;
    --bulma-primary-invert-l: 86%;
}

/* ─── Dark theme ─────────────────────────────────────────────── */
[data-theme="dark"] {
    --bulma-scheme-h: 30deg;
    --bulma-scheme-s: 4%;

    --bulma-text:        hsl(35deg, 6%, 78%);
    --bulma-text-strong: hsl(35deg, 7%, 90%);
    --bulma-text-light:  hsl(35deg, 4%, 50%);
    --bulma-text-weak:   hsl(35deg, 3%, 40%);
    --bulma-text-title:  hsl(35deg, 7%, 92%);
    --bulma-body-color:  var(--bulma-text);

    --bulma-link-h: 212deg;
    --bulma-link-s: 22%;
    --bulma-link-l: 65%;
    --bulma-link-hover-l: 74%;

    /* Structural tokens */
    --c-border:   hsl(30deg, 4%, 18%);
    --c-surface:  hsl(30deg, 4%, 11%);
    --c-hover:    hsl(30deg, 4%, 14%);
    --c-text-dim: hsl(35deg, 4%, 50%);
    --c-input-bg: hsl(30deg, 4%, 9%);

    /* Button overrides */
    --c-btn-bg:     hsl(30deg, 4%, 18%);
    --c-btn-border: hsl(30deg, 4%, 24%);
    --c-btn-text:   hsl(35deg, 6%, 86%);
    --c-btn-hover:  hsl(30deg, 4%, 22%);
}

/* ─── Light theme ────────────────────────────────────────────── */
[data-theme="light"] {
    --bulma-scheme-h: 35deg;
    --bulma-scheme-s: 5%;

    --bulma-text:        hsl(30deg, 6%, 18%);
    --bulma-text-strong: hsl(30deg, 7%, 8%);
    --bulma-text-light:  hsl(30deg, 5%, 48%);
    --bulma-text-weak:   hsl(30deg, 4%, 58%);
    --bulma-text-title:  hsl(30deg, 7%, 6%);
    --bulma-body-color:  var(--bulma-text);

    --bulma-link-h: 212deg;
    --bulma-link-s: 35%;
    --bulma-link-l: 42%;
    --bulma-link-hover-l: 32%;

    /* Structural tokens */
    --c-border:   hsl(30deg, 5%, 86%);
    --c-surface:  hsl(35deg, 5%, 98%);
    --c-hover:    hsl(30deg, 5%, 93%);
    --c-text-dim: hsl(30deg, 5%, 55%);
    --c-input-bg: hsl(35deg, 6%, 100%);

    /* Button overrides */
    --c-btn-bg:     hsl(30deg, 5%, 95%);
    --c-btn-border: hsl(30deg, 5%, 82%);
    --c-btn-text:   hsl(30deg, 6%, 16%);
    --c-btn-hover:  hsl(30deg, 5%, 90%);
}

/* ─── Sidebar layout ──────────────────────────────────────────── */
.cl-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar — always dark regardless of theme */
.cl-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: hsl(30deg, 4%, 9%);
    border-right: 1px solid hsl(30deg, 4%, 14%);
}

.cl-sidebar-brand {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid hsl(30deg, 4%, 14%);
}

.cl-sidebar-brand a {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: hsl(35deg, 7%, 92%);
    text-decoration: none;
}

.cl-sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
}

.cl-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.875rem;
    color: hsl(35deg, 5%, 60%);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}

.cl-sidebar-item .icon {
    width: 1rem;
    text-align: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.cl-sidebar-item:hover {
    background: hsl(30deg, 4%, 14%);
    color: hsl(35deg, 7%, 88%);
}

.cl-sidebar-item.is-active {
    background: hsl(30deg, 4%, 17%);
    color: hsl(35deg, 7%, 92%);
    font-weight: 500;
}

.cl-sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid hsl(30deg, 4%, 18%);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: hsl(30deg, 4%, 7%);
}

.cl-user-name {
    flex: 1;
    font-size: 0.8rem;
    color: hsl(35deg, 5%, 70%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-logout {
    font-size: 0.8rem;
    color: hsl(35deg, 5%, 60%);
    text-decoration: none;
    transition: color 0.1s;
}

.cl-logout:hover {
    color: hsl(35deg, 7%, 88%);
}

/* Theme toggle inside sidebar */
.cl-sidebar-footer .theme-toggle {
    color: hsl(35deg, 5%, 60%);
    border: none;
    padding: 0.25em 0.4em;
    transition: color 0.1s;
}

.cl-sidebar-footer .theme-toggle:hover {
    color: hsl(35deg, 7%, 88%);
    background: hsl(30deg, 4%, 14%) !important;
}

.cl-main {
    margin-left: 220px;
    flex: 1;
    min-width: 0;
}

/* Overlay for mobile */
.cl-overlay {
    position: fixed;
    inset: 0;
    background: hsl(0deg, 0%, 0% / 0.5);
    z-index: 39;
}

/* Mobile top bar */
.cl-mobile-bar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3rem;
    background: hsl(30deg, 4%, 9%);
    border-bottom: 1px solid hsl(30deg, 4%, 14%);
    align-items: center;
    padding: 0 1rem;
    gap: 0.75rem;
    z-index: 38;
}

.cl-mobile-brand {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: hsl(35deg, 7%, 88%);
}

.cl-mobile-logout {
    color: hsl(35deg, 5%, 55%);
    display: flex;
    align-items: center;
    padding: 0.25rem;
    transition: color 0.1s;
}

.cl-mobile-logout:hover { color: hsl(35deg, 7%, 85%); }

.cl-burger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
}

.cl-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: hsl(35deg, 5%, 70%);
    border-radius: 1px;
    transition: background 0.1s;
}

.cl-burger:hover span { background: hsl(35deg, 7%, 90%); }

@media (max-width: 1023px) {
    .cl-mobile-bar { display: flex; }
    .cl-sidebar { transform: translateX(-100%); transition: transform 0.2s ease; }
    .cl-sidebar.is-open { transform: translateX(0); }
    .cl-main { margin-left: 0; padding-top: 3rem; }
}

/* ─── Boxes & panels ──────────────────────────────────────────── */
.box {
    border: 1px solid var(--c-border);
    box-shadow: none;
    background-color: var(--c-surface);
}

.panel {
    box-shadow: none;
    border: 1px solid var(--c-border);
}

.panel-heading {
    background-color: var(--c-hover);
    border-bottom-color: var(--c-border);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}

.panel-block {
    border-top-color: var(--c-border);
}

a.panel-block:hover {
    background-color: var(--c-hover);
}

/* ─── Inputs ──────────────────────────────────────────────────── */
.input,
.textarea,
.select select {
    background-color: var(--c-input-bg);
    border-color: var(--c-border);
    box-shadow: none;
}

.input:focus,
.textarea:focus,
.select select:focus {
    border-color: hsl(30deg, 4%, 45%);
    box-shadow: 0 0 0 2px hsl(30deg, 4%, 30% / 0.4);
}

[data-theme="light"] .input:focus,
[data-theme="light"] .textarea:focus,
[data-theme="light"] .select select:focus {
    border-color: hsl(30deg, 5%, 55%);
    box-shadow: 0 0 0 2px hsl(30deg, 5%, 70% / 0.3);
}

/* ─── Primary buttons ─────────────────────────────────────────── */
.button.is-primary {
    background-color: var(--c-btn-bg);
    border-color: var(--c-btn-border);
    color: var(--c-btn-text);
}

.button.is-primary:hover {
    background-color: var(--c-btn-hover);
    border-color: var(--c-btn-border);
    color: var(--c-btn-text);
}

/* ─── Notifications ───────────────────────────────────────────── */
.notification {
    border: 1px solid var(--c-border);
    border-radius: 4px;
}

/* ─── Tables ──────────────────────────────────────────────────── */
.table {
    background: transparent;
}

.table td,
.table th {
    border-color: var(--c-border);
}

.table thead th {
    color: var(--c-text-dim);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom-color: var(--c-border);
}

/* ─── Tags ────────────────────────────────────────────────────── */
.tag:not(body) {
    background-color: var(--c-hover);
    color: var(--c-text-dim);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    border-radius: 3px;
}

/* ─── Cards ───────────────────────────────────────────────────── */
.card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: none;
}

.card-content { padding: 1rem 1.25rem; }

/* ─── Section spacing ─────────────────────────────────────────── */
.section { padding: 2rem 1.5rem; }

/* ─── Login page ──────────────────────────────────────────────── */
.hero.is-fullheight { background-color: var(--c-surface); }

.hero .title {
    font-weight: 600;
    letter-spacing: -0.03em;
}

.hero .subtitle { font-weight: 300; }

.hero .button {
    background-color: var(--c-surface);
    border-color: var(--c-border);
}

.hero .button:hover {
    background-color: var(--c-hover);
}

/* ─── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 7px; height: 7px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--c-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: hsl(30deg, 4%, 35%); }

/* ─── Modal ───────────────────────────────────────────────────── */
.modal-card-body {
    background: var(--c-surface) !important;
}

.modal-card-head,
.modal-card-foot {
    background: var(--c-surface);
    border-color: var(--c-border);
}

/* ─── Page transition ─────────────────────────────────────────── */
main { animation: page-in 0.08s ease; }

@keyframes page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}