/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    --bg: #090d14;
    --card: #101722;
    --card2: #0d131d;
    --line: #202a38;
    --text: #e5e7eb;
    --muted: #8b96a8;
    --blue: #60a5fa;
    --dark: #f8fafc;
    --green: #86efac;
    --red: #fca5a5;
    --amber: #fbbf24;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
}

a {
    color: var(--blue);
    text-decoration: none;
}

.subtle {
    color: var(--muted);
    font-size: 12.5px;
}

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

.error {
    color: var(--red);
}

.icon {
    color: #8b96a8;
}

/* ==========================================================================
   Page shell / top bar / page heading
   ========================================================================== */
.shell {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -18px -18px 16px -18px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    color: #f8fafc;
}

.brand-title {
    color: #cbd5e1;
    font-weight: 600;
}

/* logotip MGML je privzeto temen (SVG brez fill="..."), zato ga z
   brightness(0) invert(1) prebarvamo v belo, ne glede na izvorne barve */
.brand-logo {
    display: block;
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 14px;
    flex-wrap: wrap;
}

.page-head h1 {
    font-size: 25px;
    line-height: 1.3;
    margin: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   Navigation (top nav, sub-tabs, mobile bottom tab bar)
   ========================================================================== */
.nav,
.tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.nav a,
.tabs a {
    color: #aab4c3;
    text-decoration: none;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
}

.nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.icon-svg {
    display: inline-block;
    flex: none;
    vertical-align: -3px;
}

.nav a:hover,
.nav a.active,
.tabs a:hover,
.tabs a.active {
    background: #111827;
    border-color: var(--line);
    color: #f8fafc;
}

.bottom-tabbar a.active {
    color: #f8fafc;
}

.tabs {
    margin-bottom: 12px;
}

.bottom-tabbar {
    display: none;
}

/* ==========================================================================
   Grid & cards
   ========================================================================== */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.card {
    background: #101722;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    margin: 0;
}

.card h2 {
    margin: 0 0 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card h2 .icon-svg {
    color: var(--muted);
    vertical-align: 0;
}

.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #334155;
    background: #e5e7eb;
    color: #0f172a;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13px;
    cursor: pointer;
}

.btn.secondary {
    background: #111827;
    color: #dbeafe;
    border-color: var(--line);
}

.btn.danger,
.danger {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fee2e2;
}

.mini-btn {
    border: 1px solid #1d4ed8;
    background: #10213a;
    color: #93c5fd;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 11.5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mini-btn.danger {
    border-color: #991b1b;
    background: #3a1414;
    color: #fee2e2;
}

/* ==========================================================================
   Table
   ========================================================================== */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #101722;
    font-size: 12.5px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 7px 9px;
    text-align: left;
    vertical-align: top;
}

.table-actions {
    vertical-align: top !important;
    padding-top: 9px;
}

.table-actions form,
.table-actions a,
.table-actions button {
    vertical-align: top;
}

.table-actions .mini-btn {
    min-height: 34px;
    line-height: 1.2;
}

.table-actions form {
    display: inline-flex;
}

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

tr:hover td {
    background: rgba(255, 255, 255, .018);
}

th {
    background: #0d131d;
    color: #8290a3;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

.description {
    font-size: 11.5px;
    white-space: pre-wrap;
    color: #b6c0cf;
}

/* ==========================================================================
   Status pills
   ========================================================================== */
.status-pill {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.status-matched { background: #172554; color: #93c5fd; }
.status-posted { background: #052e16; color: #86efac; }
.status-error { background: #450a0a; color: #fca5a5; }

/* ==========================================================================
   Forms
   ========================================================================== */
input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 9px;
    font: inherit;
    background: #0b111a;
    color: #e5e7eb;
    margin-bottom: 10px;
}

input::placeholder,
textarea::placeholder {
    color: #5f6b7c;
}

label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8b96a8;
    font-weight: 700;
    margin-bottom: 5px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

/* znotraj vrstice obrazca poravnaj gumb natanko z dnom vnosnega polja
   (brez tega spodnji rob polja "pade" nižje zaradi privzetega margin-bottom) */
.form-row input,
.form-row select,
.form-row textarea {
    margin-bottom: 0;
}

/* ==========================================================================
   Ločnica med sklopi vsebine na strani (npr. obstoječi zapisi / dodaj novo)
   ========================================================================== */
.section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}

.section-divider::before,
.section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* kartice za dodajanje novih zapisov - rahlo vizualno ločene (črtkan rob) */
.card-add {
    border-style: dashed;
    background: #0d1420;
}

.inline-edit {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.inline-edit input {
    margin-bottom: 0;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 14px;
    background: #0b111a;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    max-height: 220px;
    overflow-y: auto;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--text);
}

.checkbox-line input {
    width: auto;
    margin: 0;
}

/* ==========================================================================
   Flash sporočila
   ========================================================================== */
.flash {
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 13.5px;
}

.flash-success {
    background: #052e16;
    border: 1px solid #15803d;
    color: #dcfce7;
}

.flash-error {
    background: #450a0a;
    border: 1px solid #991b1b;
    color: #fee2e2;
}

/* ==========================================================================
   Prijava
   ========================================================================== */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 340px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    color: #f8fafc;
    margin-bottom: 18px;
}

.login-brand .brand-logo {
    height: 38px;
}

/* ==========================================================================
   Mini koledar (trimesečni pregled)
   ========================================================================== */
.mini-cal-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    margin-bottom: 14px;
}

table.mini-cal {
    font-size: 11px;
    border-radius: 10px;
    flex: none;
}

table.mini-cal th,
table.mini-cal td {
    padding: 3px 5px;
    text-align: center;
    border-bottom: 0;
}

table.mini-cal thead tr:first-child th {
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: #cbd5e1;
    background: transparent;
}

table.mini-cal td a {
    color: var(--text);
    display: block;
    border-radius: 6px;
    padding: 1px 4px;
}

table.mini-cal td.mini-cal-out a {
    color: #4b5566;
}

table.mini-cal td.mini-cal-today a {
    border: 1px solid var(--blue);
}

table.mini-cal td.mini-cal-selected a {
    background: var(--blue);
    color: #08111e;
    font-weight: 700;
}

/* ==========================================================================
   Koledar - dnevni, tedenski, mesečni pogled
   ========================================================================== */
.date-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.allday-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    margin-bottom: 10px;
    background: #0b111a;
    border: 1px dashed var(--line);
    border-radius: 10px;
}

table.day-grid,
table.week-grid {
    font-size: 11px;
}

table.day-grid th,
table.day-grid td,
table.week-grid th,
table.week-grid td {
    padding: 2px 6px;
    line-height: 1.35;
}

table.day-grid .time-col,
table.week-grid .time-col {
    white-space: nowrap;
    font-weight: 700;
    color: #8290a3;
    width: 64px;
    background: #0d131d;
}

table.day-grid td.empty-cell {
    cursor: cell;
    height: 20px;
}

table.day-grid td.empty-cell:hover {
    background: rgba(96, 165, 250, .08);
}

table.day-grid td.event-cell,
table.week-grid td {
    vertical-align: top;
}

table.week-grid th.is-today,
table.month-grid td.is-today {
    background: rgba(96, 165, 250, .12);
}

.event-chip {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #0f1a2b;
    border-left: 3px solid var(--blue);
    border-radius: 6px;
    padding: 3px 6px;
    margin-bottom: 3px;
    font-size: 11px;
    color: var(--text);
}

.event-chip:hover {
    background: #16233a;
}

.event-chip-time {
    font-weight: 700;
    color: #cbd5e1;
    font-size: 10px;
}

.event-chip-title {
    font-weight: 600;
}

.event-chip-resp {
    color: var(--muted);
    font-size: 10px;
}

table.month-grid {
    font-size: 11px;
    table-layout: fixed;
}

table.month-grid td {
    vertical-align: top;
    height: 100px;
    width: 14.28%;
}

table.month-grid td.out-month {
    background: #0b0f16;
    color: #4b5566;
}

.month-day-num {
    font-weight: 700;
    font-size: 12.5px;
    display: inline-block;
    margin-bottom: 3px;
}

.month-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ==========================================================================
   Tisk (dan naj bo viden brez scrolla, od 9h do polnoči)
   ========================================================================== */
@media print {
    .topbar, .bottom-tabbar, .nav, .tabs, .date-nav, .page-head .btn,
    .mini-cal-row, .flash, form.inline-edit, .subtle a {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
        font-size: 9px;
    }
    .card {
        border: 1px solid #999;
        background: #fff;
    }
    table.day-grid th, table.day-grid td {
        padding: 1px 4px;
        line-height: 1.1;
        border-color: #ccc;
    }
    .event-chip {
        background: #f1f5f9;
        color: #000;
    }
}

/* ==========================================================================
   Mobile (<= 900px)
   ========================================================================== */
@media (max-width: 900px) {
    .shell {
        padding: 12px;
        padding-bottom: 76px;
    }

    .topbar {
        margin: -12px -12px 16px -12px;
        padding: 10px 12px;
    }

    .topbar,
    .page-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .span-4,
    .span-5,
    .span-6,
    .span-7,
    .span-8,
    .span-12 {
        grid-column: span 12;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    table {
        font-size: 11px;
    }

    .nav {
        display: none;
    }

    .bottom-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #101722;
        border-top: 1px solid var(--line);
        z-index: 150;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-tabbar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 4px 10px;
        color: #aab4c3;
        text-decoration: none;
        font-size: 11px;
    }

    .bottom-tabbar-icon {
        display: flex;
    }
}