@import url("/static/css/style.css");

/* admin.css - Admin style system (issue 15a-onwards).
 *
 * Single style source for the admin area. Public site lives in style.css.
 *
 * Issue 15a: tokens + typography now match the public site so admin and
 * public feel like one continuous product. The @import above pulls in the
 * public-site tokens (--bg-primary, --text-primary, --accent-gold,
 * --border-light, --font-serif, --font-sans, --font-accent) so a future
 * tweak to style.css propagates here automatically. The :root block below
 * only declares admin-specific DELTAS — anything that style.css already
 * provides is intentionally NOT redeclared.
 *
 * Apple HIG's --fs-* / --sp-* / --fw-* modular scales are kept — they're
 * a fine numeric scale unrelated to the Apple aesthetic.
 */

/* === Admin-specific tokens (deltas from style.css) === */
:root {
    --bg-card: #FFFFFF;                  /* card chrome — white against cream surface */
    --text-muted: #8E8E93;               /* muted body / placeholder text */
    --accent-gold-hover: #7A5C11;        /* slightly darker than --accent-gold */
    --wood-tone: #6B4423;                /* destructive / "heavy" — replaces Apple red */
    --border-row: #F2F2F7;               /* table row hover / alternating row */
    --r-card: 4px;                       /* was Apple-flavored 12px */
    --r-button: 2px;                     /* was Apple-flavored 8px */
    --r-pill: 999px;
    --shadow-1: 0 1px 3px rgba(44, 36, 25, .06);   /* warm brown shadow for cream bg */
    --shadow-2: 0 4px 12px rgba(44, 36, 25, .08);  /* warm brown shadow */
    --t: 240ms ease;                     /* was 180ms Apple-flavored — slower reads warmer */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
    --fs-12: 12px; --fs-14: 14px; --fs-17: 17px;
    --fs-22: 22px; --fs-28: 28px;
    --fw-regular: 400; --fw-medium: 500; --fw-semi: 600;
    /* Body font inherits from style.css's --font-sans via @import above.
       Heading font (--font-serif) is applied via the heading rule below. */
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html, body { margin:0; padding:0; min-height:100% }
body {
    font-family: var(--font-sans);
    background: var(--bg-primary);            /* was --c-bg-page light gray — now cream */
    color: var(--text-primary);               /* was --c-text (gray-900) — same value, new name */
    font-size: var(--fs-14);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* === Headings + brand marks + form labels (issues 15a, 15c) — serif to match public site === */
h1, h2, h3, h4, .page-title, .login-brand, .product-form label {
    font-family: var(--font-serif);
}

/* === layout === */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--sp-8);
    background: var(--bg-primary);            /* was --c-bg white — now cream */
    border-bottom: 1px solid var(--border-light);
}
.admin-header .brand {
    font-family: var(--font-serif);            /* was SF Pro sans — now serif */
    font-size: var(--fs-17);
    font-weight: var(--fw-semi);
    letter-spacing: -.01em;
    color: var(--text-primary);
}
.admin-header .user-area {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-14);
}
.admin-header .user-area .username {
    color: var(--text-muted);
}
.admin-header .logout-form { margin:0 }
.admin-header .logout-form button {
    background: transparent;
    border: 0;
    color: var(--accent-gold);                /* was --c-primary blue — now gold */
    font-size: var(--fs-14);
    font-family: inherit;
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
    border-radius: 6px;
    transition: background var(--t);
}
.admin-header .logout-form button:hover {
    background: rgba(139, 105, 20, .08);      /* was rgba(0,113,227,.08) blue — now gold tint */
}

.admin-shell {
    padding: var(--sp-8);
    max-width: 1100px;
    margin: 0 auto;
}

.admin-card {
    background: var(--bg-card);                /* was --c-bg — same white, new name */
    border: 1px solid var(--border-light);     /* was --c-border (gray-200) — now warm beige */
    border-radius: var(--r-card);
    padding: var(--sp-6);
    box-shadow: var(--shadow-1);               /* warm shadow now */
}
.admin-card--login {
    max-width: 360px;
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-8);
}

/* login page layout - center the card vertically in the viewport */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    padding: var(--sp-8) var(--sp-4);
}
.login-brand {
    font-size: var(--fs-22);
    font-weight: var(--fw-semi);
    text-align: center;
    margin: 0 0 var(--sp-1);
}
.login-subtitle {
    font-size: var(--fs-14);
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 var(--sp-8);
}
.login-form .login-field { margin-bottom: var(--sp-4) }
.login-submit { width: 100%; margin-top: var(--sp-2) }

/* page header / action bar */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
}
.page-title {
    font-size: var(--fs-22);
    font-weight: var(--fw-semi);
    margin: 0;
}
.action-bar {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}
.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 64px 0;
    border: 1px dashed var(--border-light);
    border-radius: var(--r-card);
}

/* buttons */
.btn {
    display: inline-block;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border-light);     /* was --c-border gray-200 — now warm beige */
    border-radius: var(--r-button);
    background: var(--bg-card);                /* was --c-bg — now white token */
    color: var(--text-primary);
    font-size: var(--fs-14);
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { background: var(--bg-primary) }  /* hover = cream surface (was gray-100) */
.btn-primary {
    background: var(--accent-gold);           /* was --c-primary blue — now gold */
    color: #FFFFFF;
    border-color: var(--accent-gold);
}
.btn-primary:hover {
    background: var(--accent-gold-hover);
    border-color: var(--accent-gold-hover);
}
.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-light);
}
.btn-secondary:hover { background: var(--bg-primary) }
.btn-danger {
    color: var(--wood-tone);                  /* was --c-danger Apple red — now wood brown */
    border-color: var(--wood-tone);
    background: var(--bg-card);
}
.btn-danger:hover {
    background: var(--wood-tone);
    color: #FFFFFF;
}

/* form controls */
.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-light);     /* was --c-border — now warm beige */
    border-radius: var(--r-button);
    font-size: var(--fs-14);
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
    transition: border-color var(--t), box-shadow var(--t);
    outline: 0;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--accent-gold);         /* was --c-primary blue — now gold */
    box-shadow: 0 0 0 3px rgba(139, 105, 20, .15);   /* was rgba(0,113,227,.15) — gold glow */
}
.form-textarea { min-height: 96px; resize: vertical; line-height: 1.5 }
.form-select { appearance: auto }
.form-label {
    display: block;
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}
.form-label .required {
    color: var(--wood-tone);                   /* was --c-danger — now wood */
    margin-left: 2px;
}
.form-hint {
    margin: 0;
    font-size: var(--fs-12);
    color: var(--text-muted);
}

/* tables */
.table-admin {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border-light);    /* was --c-border — now warm */
    border-radius: var(--r-card);
    overflow: hidden;
}
.table-admin th, .table-admin td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--border-row);
    font-size: var(--fs-14);
}
.table-admin th {
    background: var(--bg-primary);             /* was --c-gray-100 cold gray — now cream */
    font-weight: var(--fw-semi);
    color: var(--text-muted);
    font-size: 13px;
}
.table-admin tr:last-child td { border-bottom: 0 }
.table-admin tr:hover td { background: var(--bg-primary) }
/* 系列 column: nowrap so short Chinese names like 合香珠 don't wrap
   mid-word. The table layout will give the column whatever width the
   content needs (capped by container max-width: 1100px). */
.table-admin .category-cell { white-space: nowrap }
.table-admin .action-cell { min-width: 170px }
.table-admin .action-cell > a,
.table-admin .action-cell > form {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}
.table-admin .action-cell .btn {
    padding: var(--sp-1) var(--sp-2);
    font-size: 13px;
}

/* badges — issue 15a: warm green for published (was Apple fluoro green).
   Warm green reads as "live / published" against the cream background
   without breaking the visual harmony. */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}
.badge--draft {
    background: var(--border-light);
    color: var(--text-muted);
}
.badge--published {
    background: #E8F1E0;
    color: #3D6B2E;
}

/* flash — issue 15a: warm gold tint for info, warm wood tint for error */
.flash {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(139, 105, 20, .08);      /* was rgba(0,113,227,.08) blue — gold tint */
    color: var(--accent-gold);                 /* was --c-primary — gold */
    border: 1px solid rgba(139, 105, 20, .2);
    border-radius: var(--r-button);
    font-size: var(--fs-14);
}
.flash--error {
    background: rgba(107, 68, 35, .08);       /* was rgba(255,59,48,.08) red — wood tint */
    color: var(--wood-tone);
    border-color: rgba(107, 68, 35, .25);
}

/* thumbs — Option B (issue 07c follow-up): show full image at natural
   aspect ratio, capped at 160px on each side. object-fit: contain ensures
   no cropping even when source aspect doesn't match. .cover-cell on the
   wrapping <td> enforces a consistent row height + centers the image. */
.thumb {
    max-width: 160px;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--r-button);
    display: block;
}
.cover-cell {
    width: 180px;
    height: 160px;
    padding: var(--sp-3) var(--sp-4);
    vertical-align: middle;
    text-align: center;
    background: var(--bg-primary);             /* issue 15a — cream (was transparent over gray) */
}
.empty-cover {
    width: 160px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg-primary);             /* was --c-gray-100 cold — now cream */
    border-radius: var(--r-button);
    font-size: 13px;
}

/* admin product grid (placeholder for future tile layouts) */
.product-grid-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-4);
}

/* search box (issue 11) — flex row sitting above .page-header on the
   products list; input width fixed at 240px so it doesn't compete with
   the action bar's right-aligned buttons. Reuses existing .form-input /
   .btn tokens. */
.search-form {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin: 0 0 var(--sp-4);
}
.search-form input[type="search"] { width: 240px }

/* Excel-import forms (issue 13). Each form is itself a flex row so the
   file picker and its submit button sit side-by-side inside the
   .action-bar's flex row; .import-file-input gets a fixed width so the
   native picker doesn't stretch and steal horizontal space from
   neighbouring buttons. */
.import-form { display: flex; gap: var(--sp-2); align-items: center }
.import-env-form { display: flex; gap: var(--sp-2); align-items: center }
.import-form .import-file-input { max-width: 220px }

/* bulk-action toolbar (issue 12) — fixed-height row shown above the
   table only when at least one row is checked (.hidden applies when
   zero are ticked; JS toggles the class). Selected count sits on the
   left, action buttons on the right (flex space-between). */
.bulk-toolbar {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-primary);             /* was --c-gray-100 cold — now cream */
    border: 1px solid var(--border-light);
    border-radius: var(--r-button);
    margin: 0 0 var(--sp-4);
}
.bulk-toolbar.hidden { display: none }
.bulk-toolbar .selected-count {
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    margin-right: auto;
}

/* Leftmost checkbox column on .table-admin (issue 12). Width fixed so
   the column doesn't widen with label length. */
.table-admin .select-cell { width: 40px; text-align: center }
.table-admin .select-cell input[type="checkbox"] { cursor: pointer }

/* === Product form (merged from product_form.html, issue 15c) ===
 *
 * Previously a ~115-line inline <style> block in product_form.html.
 * After 15a's purge of `--c-*` tokens that block was broken in the cascade
 * (every `var(--c-bg)` / `var(--c-border)` / `var(--c-danger)` resolved to
 * nothing). 15c moves the rules here, retokenizes them to 15a's palette,
 * and flattens `.product-form .field-error` → `.field-error` (the import-
 * error page already uses `.flash .flash--error`, so there's no collision).
 *
 * `.form-hint` is NOT redeclared here — the top-level `.form-hint` rule
 * above (lines 237-241) is functionally identical (same margin, same 12px,
 * same color value) and is the single source of truth. The form's variant
 * was a duplicate that 15c removes.
 */
.product-form {
    max-width: 720px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 24px 28px;
}
.product-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.product-form label {
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}
.product-form label .required {
    color: var(--wood-tone);
    margin-left: 2px;
}
.product-form input[type="text"],
.product-form input[type="number"],
.product-form select,
.product-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-button);
    font-size: var(--fs-14);
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
    transition: border-color var(--t), box-shadow var(--t);
}
.product-form input:focus,
.product-form select:focus,
.product-form textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(139, 105, 20, .15);   /* gold glow — same as .form-input:focus */
}
.product-form textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}
/* `.product-form .form-hint` consolidated into the top-level `.form-hint`
   rule above. No rule here — see section header comment. */
/* `.product-form .field-error` flattened to top-level `.field-error` —
   no collision with `.flash .flash--error` (import error, post-15b). */
.field-error {
    margin: 4px 0 0;
    padding: 8px 10px;
    background: #FAF3E8;                            /* warm peach — was Apple-tinted #FFF5F5 */
    color: var(--wood-tone);                        /* destructive brown — was --c-danger red */
    border: 1px solid #E8D4B8;                      /* warm beige border — was #FFD7D5 */
    border-radius: var(--r-button);
    font-size: 13px;
}
.product-form .form-actions {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-row);
}
/* Cover image section (edit mode only) — separate <form> so the multipart
   cover upload doesn't conflict with the urlencoded product-fields form. */
.product-image-section {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-row);
}
.product-image-section h2 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: var(--fw-medium);
}
.product-image-section .current-thumb {
    max-width: 240px;
    height: auto;
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-button);
}
.product-image-section .no-thumb {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.product-image-section .image-form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.product-image-section .image-form input[type="file"] {
    font-size: 13px;
    font-family: inherit;
}