/* ============================================================================
   Ikaros Holidays — Admin panel layout (uses shared tokens + [data-theme=admin])
   ========================================================================== */

.admin-body { background: var(--bg-page); color: var(--text-body); min-height: 100vh; }

/* ---- Login gate ---- */
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter);
  background: radial-gradient(120% 90% at 80% 0%, #0E5568 0%, rgba(14,85,104,0) 50%), var(--bg-page); }
.login-card { width: 100%; max-width: 400px; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-elevated); padding: var(--sp-6); }
.login-card .brand { justify-content: center; margin-bottom: var(--sp-5); }
.login-card h1 { font-size: 1.5rem; text-align: center; margin-bottom: var(--sp-5); }
.login-hint { text-align: center; font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-4); }
.login-hint code { background: var(--bg-raised); padding: .1rem .4rem; border-radius: var(--r-xs); color: var(--c-accent); }

/* ---- Shell ---- */
.admin-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: 0; height: 100vh; }
.sidebar .brand { color: #fff; font-size: 1.1rem; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav button { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); padding: .7rem .8rem; border-radius: var(--r-sm); position: relative; transition: background var(--dur-fast), color var(--dur-fast); }
.side-nav button svg { width: 20px; height: 20px; flex: none; }
.side-nav button:hover { color: var(--text-strong); background: var(--bg-raised); }
.side-nav button.is-active { color: var(--text-strong); background: var(--bg-raised); }
.side-nav button.is-active::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--c-accent); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.side-foot a { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }

.admin-main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6);
  background: var(--bg-surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar h1 { font-size: 1.6rem; }
.topbar .search { width: 280px; max-width: 40vw; }
.admin-content { padding: var(--sp-6); flex: 1; }

.mobile-top { display: none; }
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform var(--dur-base); width: 248px; }
  .sidebar.is-open { transform: none; }
  .mobile-top { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-sidebar); position: sticky; top: 0; z-index: 30; }
  .mobile-top .icon-btn { color: #fff; }
  .topbar .search { display: none; }
}

/* ---- Banner ---- */
.banner { background: rgba(217,144,43,.14); border: 1px solid rgba(217,144,43,.4); color: #a96a13;
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); font-weight: 600; }
[data-theme="admin"] .banner { color: #f0c07a; }
.banner button { margin-left: auto; }

/* ---- KPI cards ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.kpi { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-elevated); padding: var(--sp-5); position: relative; overflow: hidden; }
.kpi .lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; }
.kpi .val { font-family: var(--font-body); font-weight: 800; font-size: 2.2rem; color: var(--text-strong); font-variant-numeric: tabular-nums; margin-top: .4rem; letter-spacing: -.02em; }
.kpi .val small { font-size: 1rem; font-weight: 700; color: var(--text-muted); }
.kpi .spark { position: absolute; right: 0; bottom: 0; left: 0; height: 40px; opacity: .5; }
.kpi .ic { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--c-accent-100); color: var(--c-accent); display: grid; place-items: center; }
.kpi .ic svg { width: 20px; height: 20px; }

/* ---- Panels ---- */
.panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); margin-bottom: var(--sp-5); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.panel__head h3 { font-size: 1.25rem; }
.panel__body { padding: var(--sp-5); }
.panel__body.flush { padding: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.chips { display: inline-flex; gap: .3rem; background: var(--bg-raised); padding: 3px; border-radius: var(--r-pill); }
.chips button { background: transparent; border: 0; color: var(--text-muted); font-weight: 700; font-size: var(--fs-xs); padding: .4rem .8rem; border-radius: var(--r-pill); }
.chips button.is-active { background: var(--c-accent); color: #04231f; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; min-width: 720px; }
table.data th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700;
  padding: .8rem var(--sp-4); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-surface); white-space: nowrap; }
table.data td { padding: .85rem var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: middle; }
table.data tbody tr { transition: background var(--dur-fast); }
table.data tbody tr:hover { background: var(--bg-raised); }
table.data .num { font-variant-numeric: tabular-nums; text-align: right; }
table.data .mono { font-variant-numeric: tabular-nums; font-weight: 700; }
.cell-strong { color: var(--text-strong); font-weight: 700; }
.cell-sub { color: var(--text-muted); font-size: var(--fs-xs); }
.row-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.empty { text-align: center; color: var(--text-muted); padding: var(--sp-7); }

/* ---- Status pills ---- */
.pill { display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--r-pill); padding: .28rem .7rem; font-weight: 700; font-size: var(--fs-xs); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-pending { background: rgba(217,144,43,.16); color: #d9902b; }
.pill-confirmed { background: rgba(22,183,160,.16); color: var(--c-accent); }
.pill-completed { background: rgba(31,157,107,.18); color: #2ecb8b; }
.pill-cancelled { background: rgba(196,68,58,.16); color: #e0685e; }

/* ---- Dashboard split ---- */
.dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 1080px) { .dash-split { grid-template-columns: 1fr; } }
.mini-list { display: flex; flex-direction: column; }
.mini-row { display: flex; align-items: center; gap: var(--sp-3); padding: .7rem var(--sp-5); border-bottom: 1px solid var(--border); }
.mini-row:last-child { border-bottom: 0; }
.mini-row .mono { margin-left: auto; }

/* ---- Calendar ---- */
.cal-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding: .3rem 0; }
.cal-cell { aspect-ratio: 1/1; border: 1px solid var(--border); border-radius: var(--r-sm); padding: .4rem; background: var(--bg-raised); font-size: var(--fs-xs); position: relative; }
.cal-cell.is-muted { opacity: .35; }
.cal-cell.is-today { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.cal-cell .day-n { font-weight: 700; color: var(--text-strong); }
.cal-cell .occ { position: absolute; bottom: .3rem; left: .4rem; right: .4rem; font-weight: 700; }
.cal-cell.is-full { background: rgba(196,68,58,.14); }
.cal-cell.is-part { background: rgba(217,144,43,.12); }
.cal-cell.is-free .occ { color: var(--c-accent); }

/* ---- Settings ---- */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-5); }
.disclaimer { font-size: var(--fs-xs); color: var(--text-muted); background: var(--bg-raised); border: 1px dashed var(--border); border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-4); }

/* ---- Customize (visual editor) ---- */
.cust-layout { display: grid; grid-template-columns: 400px 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 1100px) { .cust-layout { grid-template-columns: 1fr; } }
.cust-controls { display: flex; flex-direction: column; }
.cust-color { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: .5rem 0; }
.cust-color label { font-weight: 600; font-size: var(--fs-sm); color: var(--text-strong); }
.cust-color input[type=color] { width: 56px; height: 34px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-raised); cursor: pointer; padding: 2px; }
input[type=range] { width: 100%; accent-color: var(--c-accent); cursor: pointer; }
.cust-imgrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: .55rem 0; border-bottom: 1px solid var(--border); }
.cust-imgrow:last-child { border-bottom: 0; }
.cust-imgrow > span:first-child { font-weight: 600; font-size: var(--fs-sm); color: var(--text-strong); }
.cust-previewwrap { position: sticky; top: 84px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-elevated); background: var(--bg-surface); }
.cust-previewbar { display: flex; align-items: center; justify-content: space-between; padding: .5rem var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.cust-previewbar span svg { width: 16px; height: 16px; vertical-align: -3px; }
#cust-preview { width: 100%; height: 640px; border: 0; display: block; background: #fff; }
@media (max-width: 1100px) { #cust-preview { height: 480px; } .cust-previewwrap { position: static; } }

/* ---- Customize launch screen ---- */
.cust-howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); max-width: 720px; margin: var(--sp-7) auto 0; text-align: left; }
.cust-howto { display: flex; align-items: center; gap: var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); font-weight: 600; color: var(--text-strong); }
.cust-howto span:first-child { font-size: 1.6rem; line-height: 1; }