/* =========================================================================
   NIYA BUSINESS SUITE — dark admin/backend theme (CEO & team)
   Uses the tokens from app.css. Same class names as before, restyled dark.
   ========================================================================= */

.admin-body { background: var(--bg); }

/* Shell */
.admin-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.admin-side { background: var(--bg-2); border-right: 1px solid var(--line); color: var(--muted); display: flex; flex-direction: column; padding: 26px 18px; position: sticky; top: 0; height: 100vh; }
.admin-logo { font-family: var(--serif); font-size: 25px; color: var(--cream); font-weight: 400; padding: 0 10px 22px; display: flex; align-items: baseline; gap: 8px; }
.admin-logo span { font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav a { padding: 12px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--muted); transition: all 0.15s ease; }
.admin-nav a:hover { background: var(--raised); color: var(--cream); }
.admin-nav a.is-active { background: var(--gold); color: #1A1509; }
.admin-side-foot { margin-top: auto; padding: 14px 14px 0; border-top: 1px solid var(--line); }
.admin-side-version { font-size: 12px; color: var(--faint); }

.admin-main { display: flex; flex-direction: column; min-width: 0; }
.admin-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 34px; background: var(--bg-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.admin-top-title { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--cream); margin: 0; }
.admin-user { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--muted); }
.admin-user-divider { width: 1px; height: 18px; background: var(--line); }
.btn-view-site { background: var(--gold); color: #1A1509; border-color: var(--gold); font-weight: 600; }
.btn-view-site:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.link-btn { background: none; border: none; color: var(--gold); font-weight: 600; font-size: 14px; cursor: pointer; font-family: var(--sans); padding: 0; }
.link-btn:hover { color: var(--gold-bright); }

.admin-content { padding: 30px 34px 60px; }
.admin-main > .alert { margin: 20px 34px 0; }

/* KPI */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 28px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-value { font-family: var(--serif); font-size: 44px; font-weight: 400; color: var(--gold-bright); line-height: 1; }
.kpi-link { font-size: 13px; font-weight: 600; color: var(--gold); margin-top: 6px; }
.kpi-link:hover { color: var(--gold-bright); }

/* Panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 24px; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); gap: 16px; flex-wrap: wrap; }
.panel-head h2 { font-size: 16px; font-weight: 600; color: var(--cream); margin: 0; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.table td { padding: 16px 22px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; color: var(--cream); }
.table tr:last-child td { border-bottom: none; }
.table strong { color: var(--cream); font-weight: 600; }
.muted { color: var(--muted); font-size: 13px; }

.thumb-cell { width: 56px; }
.thumb { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); background: #EFE6D2; }
.thumb-empty { display: grid; place-items: center; background: var(--raised); color: var(--gold); font-family: var(--serif); font-size: 18px; }
.actions { display: flex; gap: 8px; align-items: center; }
.actions form { margin: 0; }

/* Tags & statuses */
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--raised); color: var(--gold); margin-left: 4px; }
.tag-brass { background: rgba(203,162,76,0.16); color: var(--gold-bright); }
.status { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.status-active, .status-approved { background: rgba(148,167,108,0.16); color: #B6CC8C; }
.status-pending { background: rgba(203,162,76,0.16); color: var(--gold-bright); }
.status-draft, .status-archived { background: rgba(169,155,124,0.14); color: var(--muted); }
.status-rejected, .status-suspended { background: rgba(215,138,122,0.16); color: #E6AC9C; }

/* Small buttons */
.btn-sm { padding: 8px 16px; font-size: 13px; background: var(--raised); border-color: var(--line); color: var(--cream); }
.btn-sm:hover { border-color: var(--gold); color: var(--gold); }
.btn-primary.btn-sm { background: var(--gold); color: #1A1509; border-color: var(--gold); }
.btn-primary.btn-sm:hover { background: var(--gold-bright); color: #1A1509; }
.btn-danger { background: transparent; border-color: rgba(215,138,122,0.4); color: #E6AC9C; }
.btn-danger:hover { background: #B5503C; color: #fff; border-color: #B5503C; }
.btn-success { background: var(--sage); color: #12160A; border-color: var(--sage); }
.btn-success:hover { background: #A4B77C; border-color: #A4B77C; }
.btn-ghost-dark { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-ghost-dark:hover { border-color: var(--gold); color: var(--gold); }

/* Admin forms */
.admin-form { padding: 22px; }
.checkbox-field { justify-content: flex-start; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cream); font-weight: 400; cursor: pointer; }
.switch input { width: auto; }
.form-preview { margin: 6px 22px 22px; max-width: 160px; border-radius: 8px; border: 1px solid var(--line); }
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.field-hint { font-size: 12.5px; color: var(--muted); margin: -6px 0 20px; line-height: 1.5; }
.field-hint code { background: var(--raised); padding: 1px 5px; border-radius: 3px; font-size: 12px; color: var(--gold); }
.field-hint a { color: var(--gold); }

/* Detail view */
.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.detail-list { margin: 0; padding: 8px 22px 22px; }
.detail-list > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.detail-list > div:last-child { border-bottom: none; }
.detail-list dt { font-size: 13px; color: var(--faint); font-weight: 500; margin: 0; }
.detail-list dd { font-size: 14px; color: var(--cream); margin: 0; }
.detail-list dd a { color: var(--gold); }
.detail-list .full { grid-template-columns: 1fr; gap: 4px; }

/* Filter tabs */
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { font-size: 13px; font-weight: 500; color: var(--muted); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); }
.tab:hover { color: var(--cream); border-color: var(--gold); }
.tab.is-active { background: var(--gold); color: #1A1509; border-color: var(--gold); }

/* Auth */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(700px 460px at 50% -10%, rgba(203,162,76,0.14), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 40px; box-shadow: 0 30px 70px -40px rgba(0,0,0,0.8); }
.auth-brand { display: flex; justify-content: center; margin-bottom: 26px; }
.auth-title { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--cream); margin: 0 0 4px; text-align: center; }
.auth-sub { font-size: 14px; color: var(--muted); margin: 0 0 24px; text-align: center; }
.auth-form .field { margin-bottom: 16px; }
.auth-form .btn-block { margin-top: 6px; }

/* Responsive */
@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
    .admin-logo { padding: 0; }
    .admin-nav { flex-direction: row; flex-wrap: wrap; }
    .admin-side-foot { margin: 0 0 0 auto; padding: 0; border: none; }
    .kpi-row { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .admin-content { padding: 20px; }
    .admin-main > .alert { margin: 16px 20px 0; }
    .admin-top { padding: 16px 20px; }
}

/* =========================================================================
   Marketing dashboard — trend chart, deltas, legend
   ========================================================================= */

/* Change vs previous week */
.delta { display: inline-block; font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.delta-up   { color: var(--sage); }
.delta-down { color: var(--rose); }
.delta-flat { color: var(--faint); }

/* Legend */
.legend { display: flex; gap: 16px; flex-wrap: wrap; }
.legend-key { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.swatch-gold { background: var(--gold); }
.swatch-sage { background: var(--sage); }

/* Bar chart — pure CSS, no library */
.chart {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 26px 22px 16px; overflow-x: auto; min-height: 220px;
}
.chart-col { flex: 1 1 0; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chart-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 150px; width: 100%; }
.chart-bars .bar {
    position: relative; flex: 1; max-width: 16px; min-height: 3px;
    border-radius: 3px 3px 0 0; transition: opacity .15s ease;
}
.chart-bars .bar em {
    position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
    font-style: normal; font-size: 10.5px; color: var(--muted); opacity: 0;
    transition: opacity .15s ease;
}
.chart-col:hover .bar em { opacity: 1; }
.bar-gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); }
.bar-sage { background: linear-gradient(180deg, #A9BC80, #6E8047); }
.chart-label { font-size: 11px; color: var(--faint); white-space: nowrap; }

@media (max-width: 640px) {
    .chart { gap: 6px; padding: 22px 14px 14px; }
    .chart-col { min-width: 38px; }
    .chart-bars .bar em { opacity: 1; font-size: 9.5px; }
}

/* Warning tag — e.g. a distributor with no email, who can't sign in */
.tag-warn { background: rgba(215,138,122,.16); color: #E6AC9C; }

/* Login footnote */
.auth-foot { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.7; }
.auth-foot a { color: var(--gold); font-weight: 600; }

/* Danger zone — destructive actions, visually separated */
.danger-zone { border-color: rgba(215,138,122,.35); }
.danger-zone .panel-head h2 { color: #E6AC9C; }


/* =========================================================================
   Reachable tables
   The action column used to be pushed off-screen with no way to scroll to it,
   which made rows effectively dead. Tables now scroll at any width, rows are
   clickable, and the actions column stays pinned to the right.
   ========================================================================= */

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .table { min-width: 720px; }

.list-hint {
    margin: 0; padding: 12px 22px; font-size: 12.5px; color: var(--muted);
    border-bottom: 1px solid var(--line-soft); background: var(--bg-2);
}
.list-hint strong { color: var(--cream); }

/* Clickable rows */
.table-rows tbody tr { cursor: pointer; transition: background .12s ease; }
.table-rows tbody tr:hover { background: rgba(203,162,76,.06); }
.row-title { font-weight: 600; color: var(--cream); }
.row-title:hover { color: var(--gold); }

/* Keep the actions where they can always be reached */
.col-actions {
    position: sticky; right: 0;
    background: var(--panel);
    box-shadow: -12px 0 12px -12px rgba(0,0,0,.8);
    text-align: right;
}
.table-rows tbody tr:hover .col-actions { background: #262014; }
thead .col-actions { background: var(--panel); }
.col-actions .actions { justify-content: flex-end; flex-wrap: nowrap; }

@media (max-width: 640px) {
    .table-wrap .table { min-width: 640px; }
    .list-hint { padding: 10px 16px; }
}

/* Inline add-row forms (exhibition costs / sales / onboarding) */
.inline-add { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.inline-add .field { flex: 1 1 140px; margin: 0; }
.inline-add .field span { font-size: 12px; }
.inline-add .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
    .inline-add { flex-direction: column; align-items: stretch; }
    .inline-add .btn { width: 100%; }
}

/* Type-to-search combo box (exhibition distributor picker) */
.combo { position: relative; }
.combo-input.combo-error { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(215,138,122,.18); }
.combo-list {
    position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
    margin: 0; padding: 4px; list-style: none;
    background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(0,0,0,.45); max-height: 260px; overflow-y: auto;
}
.combo-list li {
    padding: 10px 12px; font-size: 14px; color: var(--cream); border-radius: 6px; cursor: pointer;
}
.combo-list li:hover { background: rgba(203,162,76,.14); color: var(--gold-bright); }

/* =========================================================================
   Phone polish — small-screen refinements (applies across all modules)
   ========================================================================= */
@media (max-width: 640px) {
    /* Prevent iOS zoom-on-focus: inputs must be >= 16px */
    .admin-form input,
    .admin-form select,
    .admin-form textarea,
    .combo-input { font-size: 16px; }

    /* KPI numbers were sized for desktop; ease them down so long money
       figures (e.g. big profit totals) don't overflow their card */
    .kpi-value { font-size: 26px !important; }
    .kpi { padding: 16px 18px; }

    /* Panel headers: let the title and the right-side meta/button wrap
       instead of colliding */
    .panel-head { flex-wrap: wrap; gap: 8px; }
    .panel-head h2 { font-size: 17px; }

    /* Section summary line under an exhibition title can get long */
    .admin-content { padding: 16px; }

    /* Tables: comfortable tap targets, and the horizontal scroll cue */
    .table th, .table td { padding: 12px 14px; }
    .table-wrap { border-radius: 8px; }

    /* The combo search dropdown should never exceed the viewport */
    .combo-list { max-height: 220px; }

    /* Back links and inline delete buttons get a bit more breathing room */
    .back-link { display: inline-block; margin-bottom: 12px; }

    /* Filter tabs (distributors/orders) scroll rather than wrap into a mess */
    .filter-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .filter-tabs .tab { white-space: nowrap; }
}

/* Very narrow phones */
@media (max-width: 380px) {
    .kpi-value { font-size: 22px !important; }
    .admin-logo { font-size: 18px; }
}

/* Team permission grid */
.perm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin: 8px 0 20px; }
.perm-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.perm-item span { font-size: 14px; color: var(--cream); }
@media (max-width: 640px) { .perm-grid { grid-template-columns: 1fr; } }

/* Wholesale price-break editor (product form) */
.breaks-editor { margin: 6px 0 12px; }
.breaks-head, .breaks-row { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr 40px; gap: 10px; align-items: center; }
.breaks-head { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; padding: 0 2px; }
.breaks-row { margin-bottom: 8px; }
.breaks-row input {
    width: 100%; font-size: 15px; color: var(--cream); padding: 10px 11px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised);
}
.breaks-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(203,162,76,.15); }
.break-remove { padding: 8px 10px; color: var(--muted); }
.break-remove:hover { color: var(--rose); }

/* Volume tiers on the distributor order row */
.order-tiers { font-size: 11.5px; line-height: 1.5; display: block; margin-top: 2px; }

@media (max-width: 640px) {
    .breaks-head { display: none; }
    .breaks-row { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; }
    .breaks-row input { font-size: 16px; }
    .break-remove { grid-column: 2; justify-self: end; }
}

/* Low-stock alert panel (dashboard) */
.alert-panel {
    background: linear-gradient(180deg, rgba(215,138,122,.10), rgba(215,138,122,.04));
    border: 1px solid rgba(215,138,122,.4); border-radius: var(--radius);
    padding: 18px 20px; margin-bottom: 22px;
}
.alert-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.alert-head h2 { font-size: 16px; margin: 0; color: var(--cream); }
.alert-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; background: var(--rose);
    color: #2a1512; font-weight: 700; font-size: 15px;
}
.alert-count {
    margin-left: auto; background: rgba(215,138,122,.2); color: var(--rose);
    padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.restock-list { list-style: none; margin: 0; padding: 0; }
.restock-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-top: 1px solid rgba(215,138,122,.15);
}
.restock-list li:first-child { border-top: none; }
.restock-list a { color: var(--cream); text-decoration: none; font-weight: 500; }
.restock-list a:hover { color: var(--gold-bright); }
.restock-qty { font-size: 14px; color: var(--cream); }
.restock-qty strong { color: var(--rose); }

/* Stock indicators (product list) */
.stock-low { color: var(--gold-bright); font-weight: 600; }
.stock-out { color: var(--rose); font-weight: 600; }
.stock-flag {
    display: inline-block; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; margin-left: 4px;
    background: rgba(203,162,76,.16); color: var(--gold-bright);
}

/* Bottle target bar (dashboard) */
.salesbar{position:relative;background:linear-gradient(135deg,rgba(203,162,76,.14),rgba(203,162,76,.04));border:1px solid rgba(203,162,76,.4);border-radius:14px;padding:22px 24px;margin-bottom:24px}
.salesbar .sb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.salesbar .sb-head strong{font-size:19px;color:var(--cream)}
.salesbar .sb-side{text-align:right}
.salesbar .bar{height:8px;border-radius:999px;background:var(--raised);overflow:hidden;margin-bottom:10px}
.salesbar .bar span{display:block;height:100%;background:var(--gold);border-radius:999px}
.salesbar .sb-foot{font-size:13px;color:var(--muted)}