/*
 * Base element styling (SRS §19). Consumes design tokens only.
 * Bootstrap provides grid + utilities; the visual identity is defined here, not by Bootstrap (SRS §19.4).
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3) 0;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Custom design-system button (SRS §19.3 — not the default Bootstrap button). */
.btn-ds {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--duration-base) var(--easing-standard),
                box-shadow var(--duration-base) var(--easing-standard);
}

.btn-ds--primary {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.btn-ds--primary:hover {
    background-color: var(--color-primary-hover);
    text-decoration: none;
}

.card-ds {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.btn-ds--secondary {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-ds--secondary:hover {
    background-color: var(--color-bg);
    text-decoration: none;
}

/* Destructive action — soft red so it reads as dangerous without overpowering the primary action. */
.btn-ds--danger {
    background-color: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 24%, var(--color-surface));
}

.btn-ds--danger:hover {
    background-color: color-mix(in srgb, var(--color-error) 18%, var(--color-surface));
    text-decoration: none;
}

/* Forms */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-field--full {
    grid-column: 1 / -1;
}

.form-field label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-1);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    background-color: var(--color-surface);
    color: var(--color-text);
}

.field-error {
    color: var(--color-error);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

.validation-summary-errors {
    color: var(--color-error);
    margin-bottom: var(--space-3);
}

.req {
    color: var(--color-error);
    margin-left: 2px;
}

.form-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

/* Accordion (native <details>) */
.accordion-ds {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.accordion-ds > summary {
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    list-style: none;
}

.accordion-ds > summary::-webkit-details-marker {
    display: none;
}

.accordion-ds > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: var(--space-2);
    transition: transform var(--duration-fast) var(--easing-standard);
}

.accordion-ds[open] > summary::before {
    transform: rotate(90deg);
}

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
 * Admin theme — warm cream surface, orange accent, dark sidebar (SRS §19.3, §19.22).
 * Scoped to .theme-admin (set on every admin <body>) so the Customer PWA, which
 * shares these tokens, keeps the default palette. Components consume the tokens,
 * so re-defining them here re-skins the whole admin surface with no markup churn.
 * Orange is reserved for selection/active/links; green is the primary call-to-action.
 * -------------------------------------------------------------------------- */
.theme-admin {
    /* Brand accent — warm orange. */
    --color-primary: #e8622e;
    --color-primary-hover: #d1521f;
    --color-secondary: #f59e5b;

    /* Semantic — a fresh green reads as the primary action colour here. */
    --color-success: #17b26a;
    --color-warning: #dd8a0b;
    --color-error: #e5484d;
    --color-info: #3b82f6;

    /* Warm, cream operational surface with warm neutrals. */
    --color-bg: #f4f0e8;
    --color-surface: #ffffff;
    --color-border: #ece5d8;
    --color-text: #211d17;
    --color-text-muted: #837c6e;

    /* Dark sidebar palette (admin only). */
    --admin-nav-bg: #17161a;
    --admin-nav-elev: #211f26;
    --admin-nav-text: #a7a3ad;
    --admin-nav-text-strong: #f6f4f1;
    --admin-nav-muted: #6f6b77;
    --admin-nav-border: rgba(255, 255, 255, 0.07);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(60, 45, 20, 0.05), 0 1px 3px rgba(60, 45, 20, 0.05);
    --shadow-md: 0 8px 24px rgba(60, 45, 20, 0.08);
    --shadow-lg: 0 20px 48px rgba(40, 30, 15, 0.16);
}

/* A modern focus ring on every admin input. */
.theme-admin input:focus,
.theme-admin select:focus,
.theme-admin textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

/* Primary call-to-action is green in this theme (matches the reference's action buttons). */
.theme-admin .btn-ds--primary {
    background-color: var(--color-success);
    color: #fff;
    box-shadow: 0 1px 2px rgba(23, 178, 106, 0.30);
}
.theme-admin .btn-ds--primary:hover {
    background-color: #0f9a59;
    box-shadow: 0 2px 8px rgba(23, 178, 106, 0.34);
}

/* Tables */
.table-ds {
    width: 100%;
    border-collapse: collapse;
}

.table-ds th,
.table-ds td {
    text-align: left;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.table-ds th {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.badge-ds {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    background-color: var(--color-border);
    color: var(--color-text);
}

/* Soft, tinted status badges (SRS §19.9, §19.29). Colored text on a light tint of the same hue. */
.badge-ds--success { background-color: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); color: var(--color-success); }
.badge-ds--warning { background-color: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); color: var(--color-warning); }
.badge-ds--danger  { background-color: color-mix(in srgb, var(--color-error) 14%, var(--color-surface)); color: var(--color-error); }
.badge-ds--info    { background-color: color-mix(in srgb, var(--color-info) 14%, var(--color-surface)); color: var(--color-info); }
.badge-ds--muted   { background-color: var(--color-border); color: var(--color-text-muted); }

/* Compact button for inline row actions in tables. */
.btn-ds--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

.btn-ds[disabled], .btn-ds:disabled { opacity: 0.6; cursor: not-allowed; }

/* Alerts / flash messages (SRS §19.9, §19.15). Tinted box matching the semantic colour. */
.alert-ds {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}
.alert-ds--success { background-color: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); color: var(--color-success); }
.alert-ds--danger  { background-color: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)); color: var(--color-error); }
.alert-ds--info    { background-color: color-mix(in srgb, var(--color-info) 12%, var(--color-surface)); color: var(--color-info); }

/* Reorderable list rows (SRS §9.13). */
.reorder-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    background-color: var(--color-surface);
}
.reorder-handle { cursor: grab; color: var(--color-text-muted); user-select: none; }
.reorder-dragging { opacity: 0.5; }

/* Toggle switch (SRS §19.7). Custom-built; the native checkbox stays for accessibility but is visually hidden.
   Shared by the admin sound control and the customer sound control. */
.switch-ds {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.switch-ds__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.switch-ds__track {
    position: relative;
    display: inline-block; /* keep explicit dimensions even if a .form-field rule tries to make it inline */
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border-radius: var(--radius-pill);
    /* Visible grey off-state (the plain border token is too pale to read on white). */
    background-color: color-mix(in srgb, var(--color-text-muted) 40%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 55%, var(--color-surface));
    transition: background-color var(--duration-base) var(--easing-standard),
                border-color var(--duration-base) var(--easing-standard);
}
.switch-ds__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform var(--duration-base) var(--easing-standard);
}
/* General-sibling (~) not adjacent (+): the asp-for checkbox tag helper injects a hidden <input> between
   the checkbox and the track, so the track is not always the immediately-adjacent sibling. */
.switch-ds__input:checked ~ .switch-ds__track {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.switch-ds__input:checked ~ .switch-ds__track .switch-ds__thumb {
    transform: translateX(18px);
}
.switch-ds__input:focus-visible ~ .switch-ds__track {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.switch-ds__label { font-weight: var(--font-weight-medium); }