/* Píďalky.cz – administrace */
:root {
  --forest-dark: 120 32% 18%;
  --amber: 32 80% 44%;
  --amber-light: 36 88% 54%;
  --parchment: 38 28% 92%;
  --parchment-deep: 34 22% 83%;
  --cream: 44 48% 97%;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, 'Segoe UI', sans-serif; background: #f9fafb; color: #111827; }
a { color: inherit; text-decoration: none; }

/* ── Layout ── */
.admin-wrap { min-height: 100vh; display: flex; }
.sidebar { width: 16rem; background: hsl(var(--forest-dark)); display: flex; flex-direction: column; box-shadow: 2px 0 20px rgba(0,0,0,.2);
  position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); transition: transform .3s; }
.sidebar.open { transform: translateX(0); }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 0; height: 100vh; transform: none; } .burger { display: none; } }
.sidebar .brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar .brand .name { color: var(--c-cream, hsl(var(--cream))); font-weight: 700; }
.sidebar .brand .sub { color: hsl(var(--cream) / .4); font-size: .75rem; }
.sidebar nav { flex: 1; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.sidebar nav a { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 500; color: hsl(var(--cream) / .6); transition: all .2s; }
.sidebar nav a:hover { color: hsl(var(--cream)); background: rgba(255,255,255,.1); }
.sidebar nav a.active { background: hsl(var(--amber) / .2); color: var(--c-amber-light, hsl(var(--amber-light))); border: 1px solid hsl(var(--amber) / .2); }
.sidebar nav a .ico { font-size: 1.125rem; }
.sidebar .foot { padding: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar .foot a, .sidebar .foot button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; background: none; border: none; cursor: pointer; font-family: inherit; }
.sidebar .foot a { color: hsl(var(--cream) / .4); margin-bottom: .5rem; }
.sidebar .foot a:hover { color: hsl(var(--cream) / .7); background: rgba(255,255,255,.1); }
.sidebar .foot .logout { color: #f87171; }
.sidebar .foot .logout:hover { background: rgba(239,68,68,.1); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 30; }
.topbar h1 { font-size: 1.125rem; font-weight: 600; color: #1f2937; margin: 0; flex: 1; }
.burger { background: none; border: none; cursor: pointer; padding: .5rem; border-radius: .5rem; color: #4b5563; }
.burger:hover { background: #f3f4f6; }
.content { flex: 1; padding: 1.5rem; }
@media (max-width: 1023px) { .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; } }

/* ── Karty / panely ── */
.panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; }
.panel h2 { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; color: #1f2937; }
.panel h2.with-rule { border-bottom: 1px solid #f3f4f6; padding-bottom: .75rem; }

/* ── Formuláře ── */
.field { margin-bottom: 1rem; }
.field-label { display: block; font-size: .8125rem; font-weight: 600; color: #4b5563; margin-bottom: .375rem; }
.field-input, textarea.field-input, select.field-input {
  display: block; width: 100%; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .75rem;
  padding: .625rem .875rem; font-size: .875rem; color: #111827; outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.field-input:focus { border-color: hsl(var(--amber)); box-shadow: 0 0 0 3px hsl(var(--amber) / .15); background: #fff; }
textarea.field-input { resize: vertical; min-height: 6rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.field-check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #374151; }
.hint { color: #9ca3af; font-size: .75rem; margin-top: .25rem; }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: hsl(var(--amber)); color: hsl(var(--forest-dark)); font-weight: 700; font-size: .875rem; padding: .625rem 1.25rem; border-radius: .75rem; border: none; cursor: pointer; font-family: inherit; transition: background .15s, opacity .15s; }
.btn-primary:hover { background: hsl(var(--amber-light)); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondary { display: inline-flex; align-items: center; gap: .5rem; background: #f3f4f6; color: #374151; font-weight: 600; font-size: .875rem; padding: .625rem 1.25rem; border-radius: .75rem; border: 1px solid #e5e7eb; cursor: pointer; font-family: inherit; }
.btn-secondary:hover { background: #e9eaeb; }
.btn-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.btn-danger:hover { background: #fee2e2; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

/* ── Tabulky / seznamy ── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: .75rem; border-bottom: 1px solid #f3f4f6; font-size: .875rem; vertical-align: middle; }
.tbl th { color: #6b7280; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.tbl tr:hover td { background: #fafafa; }
.tbl .thumb { width: 3rem; height: 3rem; border-radius: .5rem; object-fit: cover; }
.tbl .thumb-round { border-radius: 50%; }
.row-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; border: none; cursor: pointer; font-size: .9rem; }
.btn-icon.edit { background: #f3f4f6; } .btn-icon.edit:hover { background: #e9eaeb; }
.btn-icon.del { background: #fef2f2; } .btn-icon.del:hover { background: #fee2e2; }

.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.badge.on { background: #dcfce7; color: #166534; }
.badge.off { background: #f3f4f6; color: #6b7280; }

.flash { border-radius: .75rem; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem; }
.flash.ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.flash.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.empty { text-align: center; padding: 2.5rem; color: #9ca3af; }
.page-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }

/* ── Dashboard ── */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.25rem; }
.stat .n { font-size: 2rem; font-weight: 700; color: hsl(var(--forest-dark)); }
.stat .l { color: #6b7280; font-size: .8125rem; margin-top: .25rem; }
.quick { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn-quick { display: inline-flex; align-items: center; gap: .5rem; background: hsl(var(--parchment)); border: 1px solid hsl(var(--parchment-deep)); color: hsl(var(--forest-dark)); font-size: .8125rem; font-weight: 600; padding: .5rem 1rem; border-radius: .625rem; }
.btn-quick:hover { background: hsl(var(--amber) / .15); border-color: hsl(var(--amber) / .4); }

/* ── Login ── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: linear-gradient(135deg, hsl(120,38%,9%) 0%, hsl(27,44%,15%) 100%); }
.login-box { width: 100%; max-width: 28rem; }
.login-box .logo { text-align: center; margin-bottom: 2rem; }
.login-box .logo .emoji { font-size: 3rem; }
.login-box .logo h1 { color: hsl(var(--cream)); font-size: 1.875rem; margin: .75rem 0 .25rem; }
.login-box .logo p { color: hsl(var(--cream) / .5); font-size: .875rem; }
.login-card { background: rgba(255,255,255,.05); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 2rem; box-shadow: 0 25px 50px rgba(0,0,0,.3); }
.login-card label { display: block; color: hsl(var(--cream) / .7); font-size: .875rem; font-weight: 500; margin-bottom: .5rem; }
.login-card input { width: 100%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: .75rem; padding: .75rem 1rem; color: hsl(var(--cream)); font-size: .875rem; margin-bottom: 1.25rem; font-family: inherit; }
.login-card input::placeholder { color: hsl(var(--cream) / .3); }
.login-card input:focus { outline: none; border-color: hsl(var(--amber) / .5); background: rgba(255,255,255,.15); }
.login-card button { width: 100%; background: hsl(var(--amber)); color: hsl(var(--forest-dark)); font-weight: 700; padding: .75rem; border-radius: .75rem; border: none; cursor: pointer; font-family: inherit; }
.login-card button:hover { background: hsl(var(--amber-light)); }
.login-card .notice { background: hsl(var(--amber) / .15); border: 1px solid hsl(var(--amber) / .3); border-radius: .75rem; padding: .75rem 1rem; color: hsl(var(--amber-light)); font-size: .875rem; margin-bottom: 1.5rem; }
.login-card .error { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); border-radius: .75rem; padding: .75rem 1rem; color: #fca5a5; font-size: .875rem; margin-bottom: 1.25rem; }
.login-back { text-align: center; margin-top: 1.5rem; }
.login-back a { color: hsl(var(--cream) / .3); font-size: .875rem; }
.login-back a:hover { color: hsl(var(--cream) / .6); }

.thumb-preview { width: 5rem; height: 5rem; border-radius: .5rem; object-fit: cover; border: 1px solid #e5e7eb; margin-bottom: .5rem; }