/* ==========================================================================
   Administratorski panel — po dizajnu "Administratorski panel" (1440 px)

   Dizajn je radna ploča i traži širinu. Stupac teme na župnoj stranici je
   uzak (~700 px), pa se OVA JEDNA stranica razmiče do rubova prozora.
   Ostatak sajta se ne dira; prijava i korisnički panel ostaju u stupcu.
   ========================================================================== */

.ds-auth.ds-adm {
    /* Izlazak iz uskog stupca teme. Teme (Twenty Twenty-Five, TagDiv) postavljaju
       margin:auto i max-width na sadržaj, pa se ovdje mora nadjačati. Odnosi se
       samo na ovu jednu stranicu. */
    max-width: none !important;
    width: auto !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: max(20px, calc(50vw - 700px));
    padding-right: max(20px, calc(50vw - 700px));
    padding-top: clamp(24px, 3vw, 48px);
    padding-bottom: clamp(24px, 3vw, 48px);
    border: 0;
    background: #fdfbf7;
    overflow-x: clip;
}

.ds-adm::before {
    inset: clamp(10px, 1.4vw, 20px) max(10px, calc(50vw - 716px));
}

.ds-adm__inner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Zaglavlje
   -------------------------------------------------------------------------- */

.ds-adm__kicker { margin-bottom: 4px; }
.ds-adm__kicker-sep { margin: 0 6px; opacity: 0.5; }

.ds-adm__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
}

.ds-adm .ds-adm__title {
    font-weight: 600;
    font-size: clamp(30px, 4.4cqi, 58px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
    padding: 0;
    color: var(--ds-ink);
}

.ds-adm .ds-adm__who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    font-size: 16px;
}

.ds-adm__who-label { opacity: 0.72; }

.ds-adm__stats {
    text-align: right;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ds-gold-ink);
    line-height: 1.9;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Kartice
   -------------------------------------------------------------------------- */

.ds-adm__tabs { flex-wrap: wrap; gap: 30px; margin-top: 28px; }
.ds-adm__tab-short { display: none; }

.ds-adm .ds-panel2__tab { font-size: 16px; }

/* Tiha tekstualna radnja */
.ds-adm .ds-adm__linkbtn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--ds-gold-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.ds-adm .ds-adm__linkbtn:hover { color: var(--ds-gold); }
.ds-adm .ds-adm__linkbtn--danger { color: #a4123a; }
.ds-adm .ds-adm__linkbtn--danger:hover { color: #7d0d2c; }

/* Obrubljeni gumb (Arhiva, Izvezi, Traži) */
.ds-adm .ds-adm__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    color: var(--ds-ink) !important;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
}

.ds-adm .ds-adm__btn:hover { background: var(--ds-gold-tint); border-color: var(--ds-gold); }

.ds-adm__inline { display: inline; margin: 0; padding: 0; border: 0; background: none; }

.ds-adm__label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ds-gold-ink);
    margin-bottom: 12px;
}

.ds-adm__note { margin: 18px 0 0; font-size: 13px; line-height: 1.55; opacity: 0.72; }

/* --------------------------------------------------------------------------
   1. Kreiranje
   -------------------------------------------------------------------------- */

.ds-adm__create { background: none; border: 0; padding: 0; margin: 0; max-width: none; }

.ds-adm__create-grid { display: flex; flex-direction: column; gap: 30px; }

/* Kalendar — kvadratne ćelije, ponedjeljak prvi */
.ds-cal { max-width: 380px; }

.ds-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ds-adm .ds-cal__nav {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    color: var(--ds-gold-ink);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.ds-adm .ds-cal__nav:hover { background: var(--ds-gold-tint); border-color: var(--ds-gold); }

.ds-cal__month {
    flex: 1;
    text-align: center;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ds-gold-ink);
}

.ds-cal__dows,
.ds-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.ds-cal__dows {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ds-ink) 50%, transparent);
    text-align: center;
    margin-bottom: 8px;
}

.ds-adm .ds-cal__day {
    aspect-ratio: 1;
    min-height: 40px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    cursor: pointer;
    font-size: 16px;
    color: var(--ds-ink);
    padding: 0;
}

.ds-adm .ds-cal__day:hover { background: var(--ds-gold-tint); border-color: var(--ds-gold); }

.ds-adm .ds-cal__day.is-selected {
    background: var(--ds-gold);
    border-color: var(--ds-gold);
    color: #fff;
}

.ds-adm .ds-cal__day[disabled] {
    background: none;
    border-color: transparent;
    color: color-mix(in srgb, var(--ds-ink) 22%, transparent);
    cursor: default;
}

.ds-cal__blank { min-height: 40px; }

/* Termini */
.ds-adm__slots-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ds-adm__slots-tools { display: flex; gap: 18px; margin-bottom: 12px; }

.ds-adm .ds-adm__chosen-date {
    margin: 0 0 16px;
    font-size: clamp(20px, 2.4cqi, 30px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ds-ink);
}

.ds-adm__chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    align-content: start;
    padding-top: 2px;
}

.ds-adm .ds-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    cursor: pointer;
    font-size: 15px;
    margin: 0;
    font-weight: 400;
}

.ds-adm .ds-chip:hover { border-color: var(--ds-gold); background: var(--ds-gold-tint); }

.ds-adm .ds-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.ds-chip__mark { width: 15px; height: 15px; flex: none; }

.ds-adm .ds-chip:has(input:checked) {
    background: var(--ds-gold-tint);
    border-color: var(--ds-gold);
    color: var(--ds-gold-ink);
}

.ds-adm .ds-chip:has(input:checked) .ds-chip__mark {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%239c7c38'/%3E%3Cpath d='M7.5 12.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ds-adm .ds-chip:has(input:focus-visible) { outline: 2px solid var(--ds-gold); outline-offset: 2px; }

.ds-adm__sum-col .ds-choice { border-top: 1px solid var(--ds-gold-line); padding-top: 20px; }

/* --------------------------------------------------------------------------
   2. Popunjenost
   -------------------------------------------------------------------------- */

.ds-adm__fill-grid { display: flex; flex-direction: column; gap: 22px; }

.ds-adm__daylist {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.ds-adm .ds-adm__daylist .ds-day {
    flex: none;
    min-width: 82px;
    min-height: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
}

.ds-adm .ds-adm__daylist .ds-day.is-active {
    background: var(--ds-gold);
    border-color: var(--ds-gold);
    color: #fff;
}

.ds-fillday { display: none; }
.ds-fillday.is-active { display: block; }

.ds-fillday__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ds-adm .ds-fillday__title {
    margin: 0;
    font-size: clamp(22px, 2.8cqi, 34px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ds-ink);
}

.ds-fillday__sub {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-gold-ink);
}

.ds-fillday__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ds-adm__cap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: var(--ds-gold-ink);
    flex-wrap: wrap;
}

.ds-adm .ds-adm__cap input[type="number"] {
    width: 62px;
    min-height: 36px;
    padding: 4px 8px;
    font-size: 15px;
    color: var(--ds-ink);
    background: #fff;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    margin: 0;
}

.ds-adm .ds-adm__cap label { margin: 0; font-weight: 400; }

.ds-fill { margin-top: 20px; }

.ds-fill__head,
.ds-fill__row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 70px;
    gap: 20px;
    align-items: start;
}

.ds-fill__head {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ds-ink) 50%, transparent);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ds-gold-line);
}

.ds-fill__right { text-align: right; }

.ds-fill__row {
    padding: 12px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--ds-ink) 9%, transparent);
    border-left: 3px solid transparent;
}

/* Popunjen termin je jasno označen brončanom podlogom i rubom. */
.ds-fill__row.is-full {
    background: var(--ds-gold-tint);
    border-left-color: var(--ds-gold);
}

.ds-fill__range { font-size: 18px; padding-top: 5px; }

/* Svaka osoba u svom retku, sa svojim ikonama uz ime. */
.ds-fill__names { display: flex; flex-direction: column; min-width: 0; }

.ds-fill__person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    font-size: 16px;
}

.ds-fill__person + .ds-fill__person {
    border-top: 1px dotted color-mix(in srgb, var(--ds-ink) 14%, transparent);
}

.ds-fill__person--add { min-height: 30px; justify-content: flex-start; }

.ds-fill__name { min-width: 0; overflow-wrap: anywhere; }

.ds-fill__none { font-size: 15px; color: color-mix(in srgb, var(--ds-ink) 40%, transparent); }

.ds-fill__pair { display: inline-flex; gap: 2px; flex: none; }

.ds-adm .ds-fill__pair .ds-icon-btn {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--ds-gold-ink);
    border-radius: var(--ds-radius);
    padding: 0;
}

.ds-adm .ds-fill__pair .ds-icon-btn:hover { background: #fff; color: var(--ds-gold); }

.ds-fill__cap {
    text-align: right;
    font-size: 14px;
    color: color-mix(in srgb, var(--ds-ink) 55%, transparent);
    font-variant-numeric: tabular-nums;
    padding-top: 8px;
}

.ds-fill__cap.is-full { color: var(--ds-gold-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   3. Rezervacija
   -------------------------------------------------------------------------- */

.ds-adm__rez-grid { display: flex; flex-direction: column; gap: 22px; }

.ds-adm .ds-slot--taken {
    background: color-mix(in srgb, var(--ds-ink) 4%, transparent);
    border-color: color-mix(in srgb, var(--ds-ink) 12%, transparent);
    cursor: default;
    color: color-mix(in srgb, var(--ds-ink) 55%, transparent);
}

.ds-slot__holder { font-size: 14px; text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   5. Korisnici
   -------------------------------------------------------------------------- */

.ds-adm__users-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.ds-adm .ds-adm__users-title {
    margin: 0;
    font-size: clamp(24px, 3cqi, 34px);
    font-weight: 400;
    color: var(--ds-ink);
}

.ds-adm__users-note { margin: 8px 0 0; font-size: 14px; opacity: 0.72; max-width: 46ch; }

.ds-adm__search { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: none; }

.ds-adm .ds-adm__search input[type="search"] {
    min-height: 42px;
    min-width: 240px;
    padding: 4px 12px;
    font-size: 15px;
    background: #fff;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    color: var(--ds-ink);
}

.ds-users__head,
.ds-users__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 2px;
}

.ds-users__head { display: none; }
.ds-users__row { border-bottom: 1px solid color-mix(in srgb, var(--ds-ink) 9%, transparent); }

.ds-users__name { font-size: 17px; }
.ds-users__email { font-size: 15px; opacity: 0.75; overflow-wrap: anywhere; }
.ds-users__login { font-size: 14px; opacity: 0.6; }

.ds-users__badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    color: var(--ds-gold-ink);
    white-space: nowrap;
}

.ds-users__member { font-size: 14px; opacity: 0.7; }
.ds-users__right { text-align: right; }

/* Prozor "Dodaj osobu" */
.ds-adm__when {
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--ds-gold-ink);
}

/* --------------------------------------------------------------------------
   Laptop — 1000 px i šire (mjeri se okvir panela)
   -------------------------------------------------------------------------- */

@container dsauth (min-width: 1000px) {
    .ds-adm__tab-long { display: inline; }

    .ds-adm__create-grid {
        display: grid;
        grid-template-columns: 380px minmax(0, 1fr) 300px;
        gap: 56px;
        align-items: start;
    }

    .ds-adm__chips { grid-template-columns: repeat(4, 1fr); }

    .ds-adm__fill-grid,
    .ds-adm__rez-grid {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }

    .ds-adm__rez-grid { grid-template-columns: 230px minmax(0, 1fr) 300px; }

    /* Dani postaju okomit popis */
    .ds-adm__daylist {
        flex-direction: column;
        gap: 0;
        overflow-x: visible;
        overflow-y: auto;
        max-height: 520px;
    }

    .ds-adm .ds-adm__daylist .ds-day {
        min-width: 0;
        width: 100%;
        min-height: 0;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        text-align: left;
        padding: 14px 12px;
        background: none;
        border: 0;
        border-left: 2px solid transparent;
        border-bottom: 1px solid var(--ds-gold-line);
        border-radius: 0;
    }

    .ds-adm .ds-adm__daylist .ds-day.is-active {
        background: var(--ds-gold-tint);
        border-left-color: var(--ds-gold);
        border-bottom-color: var(--ds-gold-line);
        color: var(--ds-gold-ink);
    }

    .ds-adm .ds-adm__daylist .ds-day__name { font-size: 18px; }
    .ds-adm .ds-adm__daylist .ds-day__free { font-size: 13px; }

    .ds-users__head,
    .ds-users__row {
        grid-template-columns: 1.1fr 1.5fr 0.7fr 0.9fr 190px;
        gap: 20px;
        align-items: center;
    }

    .ds-users__head {
        display: grid;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ds-ink) 50%, transparent);
        border-bottom: 1px solid var(--ds-gold-line);
        padding-bottom: 10px;
    }

    .ds-users__name { font-size: 18px; }
    .ds-users__action { text-align: right; }
}

/* --------------------------------------------------------------------------
   Uski okvir
   -------------------------------------------------------------------------- */

@container dsauth (max-width: 700px) {
    .ds-adm__tab-long { display: none; }
    .ds-adm__tab-short { display: inline; }
    .ds-adm__tabs { gap: 18px; }
    .ds-adm__stats { text-align: left; }

    .ds-fill__head { display: none; }

    .ds-fill__row {
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        align-items: baseline;
    }

    .ds-fill__names { grid-column: 1 / -1; }
    .ds-fill__cap { grid-column: 2; grid-row: 1; padding-top: 0; }
    .ds-fill__range { padding-top: 0; }
}

/* Pretraga osoba u prozoru "Dodaj osobu". */
#ds_add_filter {
    width: 100%;
    margin-bottom: 8px;
}

.ds-add__count {
    margin: 0 0 8px;
    font-size: 13px;
    color: color-mix(in srgb, var(--ds-ink) 55%, transparent);
    min-height: 18px;
}

#ds_add_user {
    width: 100%;
}