/* ------------------------------------------------------------------
   Odbojkarna - administracija
   Odziven slog. Ohranja obstoječo podobo (modra #176ae6 na svetli
   podlagi), prilagojen je za uporabo na telefonu.

   Tabele se na ozkih zaslonih razgradijo v kartice; vsaka celica
   pokaže svoj naslov iz atributa data-label. Tabele, ki morajo ostati
   tabele (npr. SMS vrsta), se zavijejo v .wrap in drsijo vodoravno.
   ------------------------------------------------------------------ */

:root {
    --modra: #176ae6;
    --modra-temna: #144da3;
    --besedilo: #222;
    --tiho: #667085;
    --crta: #e4e8ee;
    --podlaga: #f4f6f9;
    --kartica: #fff;
    --rdeca: #b51212;
    --zelena: #206115;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--podlaga);
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    color: var(--besedilo);
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--kartica);
    padding: 20px 16px 40px;
    min-height: 100vh;
}

@media (min-width: 681px) {
    .container {
        margin: 32px auto;
        padding: 28px 32px 44px;
        border-radius: 12px;
        box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
        min-height: 0;
    }
}

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 28px 0 10px; }
h3 { font-size: 1rem; margin: 22px 0 8px; }
h1, h2, h3 { color: var(--modra); line-height: 1.25; }

a { color: var(--modra); }

/* --- navigacija --------------------------------------------------- */

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--crta);
}

.nav a {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 999px;
    background: #eef3fc;
    color: var(--modra);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}

.nav a:hover { background: #dfe9fa; text-decoration: none; }
.nav a:active { background: #cfdff7; }

/* --- sporočila ---------------------------------------------------- */

.error, .success {
    padding: 11px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.error   { color: var(--rdeca);  background: #ffeaea; border: 1px solid #f3b1b1; }
.success { color: var(--zelena); background: #e9ffe6; border: 1px solid #a3e2b1; }

/* --- obrazci ------------------------------------------------------ */

label { font-size: 0.875rem; color: var(--tiho); }

input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="tel"], select, textarea {
    font: inherit;
    font-size: 16px;            /* pod 16px iOS ob fokusu poveča stran */
    padding: 10px 12px;
    border: 1px solid #ccd3dd;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    width: 100%;
    max-width: 100%;
    margin: 3px 0;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(23, 106, 230, .35);
    outline-offset: 1px;
    border-color: var(--modra);
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--modra);
}

button {
    font: inherit;
    font-weight: 600;
    padding: 11px 18px;
    min-height: 44px;           /* dovolj velika tarča za prst */
    border: none;
    border-radius: 8px;
    background: var(--modra);
    color: #fff;
    cursor: pointer;
    margin: 4px 0;
}

button:hover  { background: var(--modra-temna); }
button:active { background: #103d80; }

/* --- tabele: široke ostanejo tabele in drsijo --------------------- */

.wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table th, table td {
    border: 1px solid var(--crta);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

table th {
    background: #f2f7fb;
    font-size: 0.8125rem;
    color: var(--tiho);
    font-weight: 600;
    white-space: nowrap;
}

.wrap table { margin-bottom: 0; }

/* --- urejanje v vrstici -------------------------------------------- */

.editrow {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.editrow input[type="text"] { flex: 1 1 150px; width: auto; }
.editrow select            { flex: 0 0 auto; width: auto; }
.editrow button            { flex: 0 0 auto; margin: 0; }

/* --- ozek zaslon --------------------------------------------------- */

@media (max-width: 680px) {

    .container {
        padding: 16px 12px 36px;
        border-radius: 0;
    }

    h1 { font-size: 1.3rem; }

    /* Tabele s podatki se razgradijo v kartice. */
    table { display: block; border: 0; margin-bottom: 16px; }
    thead { display: none; }
    tbody { display: block; }

    tr {
        display: block;
        border: 1px solid var(--crta);
        border-radius: 10px;
        padding: 4px 12px 10px;
        margin-bottom: 10px;
        background: #fff;
    }

    td {
        display: block;
        border: 0;
        border-bottom: 1px solid #f1f3f7;
        padding: 9px 0;
    }

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

    /* naslov stolpca pred vsebino celice */
    td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--tiho);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 3px;
    }

    /* prva celica je naslov kartice */
    td:first-child { font-weight: 600; font-size: 1.05rem; }
    td:first-child[data-label]::before { font-weight: 600; font-size: 0.75rem; }

    /* stolpci, ki jih na telefonu ne potrebujemo (podatek je v obrazcu) */
    td.only-desktop { display: none; }

    td button { width: 100%; }
    td a { display: inline-block; padding: 6px 0; }

    button { width: 100%; }

    .editrow { flex-direction: column; align-items: stretch; }
    .editrow input[type="text"],
    .editrow select { flex: none; width: 100%; }

    /* Tabele, ki morajo ostati tabele (SMS vrsta, izbira prejemnikov,
       prisotnost): ovite so v .wrap in po potrebi drsijo vodoravno. */
    .wrap table { display: table; margin-bottom: 0; }
    .wrap thead { display: table-header-group; }
    .wrap tbody { display: table-row-group; }
    .wrap tr {
        display: table-row;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0;
        background: none;
    }
    .wrap td {
        display: table-cell;
        border: 1px solid var(--crta);
        padding: 9px 10px;
        font-weight: inherit;
        font-size: inherit;
    }
    .wrap td::before { content: none; }
    .wrap td button { width: auto; }
    .wrap td a { display: inline; padding: 0; }
    .wrap select { width: auto; min-width: 7.5em; }
}

/* --- prijava ------------------------------------------------------- */

.login-box {
    max-width: 380px;
    margin: 10vh auto;
    padding: 26px 22px 30px;
    background: var(--kartica);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .08);
}

.login-box h2 { margin: 0 0 20px; }

.login-box label {
    display: block;
    margin: 12px 0 4px;
    font-weight: 600;
    color: var(--besedilo);
}

.login-box button { width: 100%; margin-top: 18px; }

@media (max-width: 480px) {
    .login-box {
        margin: 0;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
        padding-top: 8vh;
    }
}