/* KCKurzy — utility třídy (flex, grid, spacing, text). Sdílené mezi site.css a admin.css. */

/* ── Flex ─────────────────────────────────────────────── */
.u-flex         { display: flex; }
.u-flex-col     { display: flex; flex-direction: column; }
.u-flex-center  { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-start   { display: flex; align-items: center; justify-content: flex-start; }
.u-flex-end     { display: flex; align-items: center; justify-content: flex-end; }
.u-items-center { align-items: center; }
.u-items-start  { align-items: flex-start; }
.u-items-end    { align-items: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-justify-end  { justify-content: flex-end; }
.u-wrap         { flex-wrap: wrap; }
.u-flex-1       { flex: 1; }
.u-flex-auto    { flex: 0 0 auto; }

.u-gap-1 { gap: 4px; }
.u-gap-2 { gap: 8px; }
.u-gap-3 { gap: 12px; }
.u-gap-4 { gap: 16px; }
.u-gap-5 { gap: 20px; }
.u-gap-6 { gap: 24px; }

/* ── Grid ─────────────────────────────────────────────── */
.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.u-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.u-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.u-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
@media (max-width: 760px) {
    .u-grid-2, .u-grid-2-1, .u-grid-3 { grid-template-columns: 1fr; }
}

/* ── Spacing ──────────────────────────────────────────── */
.u-mt-0 { margin-top: 0; } .u-mt-1 { margin-top: 4px; } .u-mt-2 { margin-top: 8px; } .u-mt-3 { margin-top: 12px; }
.u-mt-4 { margin-top: 16px; } .u-mt-6 { margin-top: 24px; } .u-mt-8 { margin-top: 32px; } .u-mt-10 { margin-top: 40px; }
.u-mb-0 { margin-bottom: 0; } .u-mb-1 { margin-bottom: 4px; } .u-mb-2 { margin-bottom: 8px; } .u-mb-3 { margin-bottom: 12px; }
.u-mb-4 { margin-bottom: 16px; } .u-mb-6 { margin-bottom: 24px; } .u-mb-8 { margin-bottom: 32px; }
.u-m-0 { margin: 0; }

.u-p-0 { padding: 0; }
.u-p-4 { padding: 16px; }
.u-p-6 { padding: 24px; }

/* ── Text ─────────────────────────────────────────────── */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-text-sm { font-size: 13px; }
.u-text-xs { font-size: 12px; }
.u-text-lg { font-size: 18px; }
.u-text-xl { font-size: 20px; }
.u-text-2xl { font-size: 24px; }
.u-text-3xl { font-size: 28px; }
.u-font-bold { font-weight: 700; }
.u-font-semibold { font-weight: 600; }
.u-font-display { font-family: var(--font-display); }
.u-uppercase { text-transform: uppercase; letter-spacing: .05em; }
.u-italic { font-style: italic; }
.u-nowrap { white-space: nowrap; }
.u-break-words { word-break: break-word; overflow-wrap: break-word; }

/* ── Colors ───────────────────────────────────────────── */
.u-text-brand  { color: var(--brand-500); }
.u-text-navy   { color: var(--navy-900); }
.u-text-muted  { color: var(--muted, var(--muted-dark, #64748b)); }
.u-text-white  { color: #fff; }
.u-text-success { color: var(--success, #10b981); }
.u-text-danger  { color: var(--danger, #ef4444); }

.u-bg-white { background: #fff; }
.u-bg-navy-50 { background: var(--navy-50, #f1f5f9); }
.u-bg-brand  { background: var(--brand-500); color: #fff; }

/* ── Layout utilities ─────────────────────────────────── */
.u-sticky-top   { position: sticky; top: 80px; }
.u-min-h-screen { min-height: 100vh; }
.u-max-w-sm { max-width: 480px; margin-left: auto; margin-right: auto; }
.u-max-w-md { max-width: 720px; margin-left: auto; margin-right: auto; }
.u-max-w-lg { max-width: 900px; margin-left: auto; margin-right: auto; }
.u-max-w-xl { max-width: 1200px; margin-left: auto; margin-right: auto; }
.u-w-full { width: 100%; }

/* ── Borders + radius ─────────────────────────────────── */
.u-border-t { border-top: 1px solid var(--line, #e2e8f0); }
.u-border-b { border-bottom: 1px solid var(--line, #e2e8f0); }
.u-rounded { border-radius: 10px; }
.u-rounded-full { border-radius: 999px; }

/* ── Visibility ───────────────────────────────────────── */
.u-hidden { display: none !important; }
.u-visually-hidden {
    position: absolute !important;
    clip: rect(0 0 0 0);
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ── Cursor + a11y ────────────────────────────────────── */
.u-cursor-pointer { cursor: pointer; }
.u-focus-ring:focus { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ── Screen reader only ───────────────────────────────── */
.sr-only {
    display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── DBA shorthand utilities ──────────────────────────── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--c-muted, #6b7383); }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-lg { font-size: 18px; }
.mt-small { margin-top: 8px; }
.mt-medium { margin-top: 16px; }
.mt-large { margin-top: 32px; }
.mb-small { margin-bottom: 8px; }
.mb-medium { margin-bottom: 16px; }
.mb-large { margin-bottom: 32px; }
.m-0 { margin: 0; }
.inline { display: inline-block; }
.hidden { display: none; }

/* ── CozyStay redesign — bg/text utilities ───────────── */
.bg-dark-teal { background: var(--c-dark-teal); color: #fff; }
.bg-very-dark { background: var(--c-very-dark); color: rgba(255,255,255,0.85); }
.bg-cream     { background: var(--c-cream); }
.bg-cream-2   { background: var(--c-cream-2); }
.text-light       { color: rgba(255,255,255,0.92); }
.text-light-muted { color: rgba(255,255,255,0.62); }

/* ── Admin utility components (used by new admin views) ───── */
.admin-page { padding: 24px 32px; }
.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-filter-bar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.admin-filter-search { flex: 1; min-width: 240px; margin: 0; }
.admin-filter-bar .form-group { margin: 0; }
.admin-filter-bar .form-input,
.admin-filter-bar .form-select { height: 42px; box-sizing: border-box; }
.admin-filter-bar .btn { height: 42px; padding-top: 0; padding-bottom: 0; }

.admin-actions-bar {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.admin-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    background: var(--c-cream, #f3f4f6);
}
.admin-avatar--empty {
    background: var(--c-primary, #b99d75);
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 36px;
    text-transform: uppercase;
    font-family: var(--font-sans, system-ui);
}
.admin-image-preview {
    margin-bottom: 8px;
}
.admin-image-preview img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--c-line-soft, #e2e8f0);
}
.admin-truncate {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.admin-stat-card {
    background: #fff;
    padding: 18px 20px;
    border: 1px solid var(--c-line-soft, #e2e8f0);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-stat-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--c-ink, #1a1b1a);
}
.admin-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-muted, #707070);
}

.admin-pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.is-inactive { opacity: 0.55; }

/* ─────────────────────────────────────────────────────────────
   Doplňky pro admin refactor (2026-05-20) — odstranění inline stylů
   ───────────────────────────────────────────────────────────── */

/* Display */
.u-inline { display: inline; }
.u-block  { display: block; }
.u-hidden { display: none !important; }

/* Cursor */
.u-cursor-grab    { cursor: grab; }
.u-cursor-pointer { cursor: pointer; }

/* Text alignment & style */
.u-text-right  { text-align: right; }
.u-text-center { text-align: center; }
.u-text-mono   { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.u-text-uppercase { text-transform: uppercase; }
.u-fw-600 { font-weight: 600; }

/* Width helpers — primárně pro <th> v admin tabulkách */
.col-w-32  { width: 32px; }
.col-w-80  { width: 80px; }
.col-w-120 { width: 120px; }
.col-w-140 { width: 140px; }
.col-w-200 { width: 200px; }

/* Min-width / max-width helpers */
.u-min-w-200 { min-width: 200px; }
.u-min-w-240 { min-width: 240px; }
.u-max-w-500 { max-width: 500px; }

/* Whitespace */
.u-ws-prewrap { white-space: pre-wrap; }

/* Color helpers — semantic */
.u-text-danger    { color: var(--danger); }
.u-text-muted     { color: var(--muted-dark, var(--c-muted)); }
.u-text-muted-sm  { color: var(--muted-dark, var(--c-muted)); font-size: 12px; }

/* Grid helpers — admin filter bars */
.u-grid-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}
.u-grid-stretch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.u-grid-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* Filter bar wrapper (display:flex; gap:12px; align-items:end; flex-wrap:wrap) */
.u-filter-bar {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}

/* Form-group v u-filter-bar nesmí mít margin-bottom (default 16px ve form-group),
   jinak align-items: end posune buttony (které margin-bottom nemají) o 16px DOLŮ.
   Specifity 0,1,1 přebíjí .form-group (0,1,0) z admin.css.
   Stejný pattern už existuje pro .admin-filter-bar na řádku 152. */
.u-filter-bar > .form-group { margin: 0; }

/* ── Sjednocení výšky form prvků v admin filter rowech ──────────────
   Inputy mají padding 10px (=> height ~40-42px), buttony 9px (=> ~38px).
   V align-items:end gridu/flexu to vypadalo neurovnaně. Pevná výška 42px
   na obě → spodky perfektně zarovnané. */
.u-grid-filter .form-input,
.u-grid-filter .form-select,
.u-filter-bar .form-input,
.u-filter-bar .form-select {
    height: 42px;
    box-sizing: border-box;
}
.u-grid-filter .btn,
.u-filter-bar .btn {
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Posledni cell v gridu — wrap pro buttony bez vlastní form-group.
   align-self:end zajistí spodní zarovnání s ostatními cells (které mají label nahoře). */
.u-grid-filter > .u-flex,
.u-grid-filter > .u-filter-actions {
    align-self: end;
}

/* Form inline */
.u-form-inline { display: inline; }

/* Padding helpers */
.u-p-6 { padding: 24px; }