/* Milk Tea Tracker — app-specific styles.
   Subject: Hong Kong milk-tea culture. The accent is tea-amber, drawn from
   the colour of brewed Ceylon milk tea. Signature: a tea-stain radial glow on
   the upload card that reads as a ring mark left by a cup. */

:root {
    --bg-color: var(--md-surface-container-low);
    --text-color: var(--md-on-surface);
    --card-bg: var(--md-surface-container-lowest);
    --border-color: var(--md-outline-variant);

    /* Tea-amber accent — overrides the shared indigo for this app only */
    --mt-accent: #C68642;
    --mt-accent-on: #FFFFFF;
    --mt-accent-container: #F5E6D3;
    --mt-on-accent-container: #3D2410;
    --mt-accent-soft: color-mix(in srgb, #C68642 12%, transparent);
}

.dark {
    --bg-color: var(--md-surface);
    --text-color: var(--md-on-surface);
    --card-bg: var(--md-surface-container-low);
    --border-color: var(--md-outline-variant);

    --mt-accent: #E8B074;
    --mt-accent-on: #3D2410;
    --mt-accent-container: #5A3D1E;
    --mt-on-accent-container: #F5E6D3;
}

/* Override shared MD3 primary with tea-amber for this app's UI */
:root {
    --md-primary: var(--mt-accent);
    --md-on-primary: var(--mt-accent-on);
    --md-primary-container: var(--mt-accent-container);
    --md-on-primary-container: var(--mt-on-accent-container);
}

.input-field {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: all 0.2s ease;
}

.input-field:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 20%, transparent);
}

.dark .input-field {
    background-color: var(--md-surface-container-high);
    border-color: var(--md-outline-variant);
}

.dark .input-field:focus {
    background-color: var(--md-surface-container-highest);
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 15%, transparent);
}

.dark input[class*="bg-transparent"] {
    background-color: var(--md-surface-container-high) !important;
}

.dark input[class*="bg-transparent"]:focus {
    background-color: var(--md-surface-container-highest) !important;
}

.dark .modal-content input:not([type="hidden"]),
.dark .modal-content textarea {
    background-color: var(--md-surface-container-high);
    border-color: var(--md-outline-variant);
    color: var(--md-on-surface);
}

.dark .modal-content input:not([type="hidden"]):focus,
.dark .modal-content textarea:focus {
    background-color: var(--md-surface-container-highest);
    border-color: var(--md-primary);
}

.dark .modal-content .flex.rounded-lg {
    background-color: var(--md-surface-container-high);
    border-color: var(--md-outline-variant);
}

.dark .modal-content .flex.rounded-lg span {
    background-color: var(--md-surface-container-high);
    border-color: var(--md-outline-variant);
}

textarea.input-field {
    resize: vertical;
    min-height: 5.5rem;
}

#syncBtn.syncing .material-symbols-outlined {
    animation: spin 1s linear infinite;
}

/* Flow rail accent (add-drink modal step indicator) — tea-amber, dark-mode override.
   The light values are set inline on .modal-content (style="--flow-accent:...") so an
   ordinary selector here can't win the cascade — !important is required to override
   an inline declaration for the same custom property on the same element. */
.dark #recordModal .modal-content.flow-scope {
    --flow-accent: #f0a659 !important;
    --flow-accent-soft: #33261a !important;
}

/* ── Signature: tea-stain ring on the upload card ──
   A radial gradient that reads as the ring mark a cup of milk tea leaves
   on a paper doily. Only visible on the upload zone — one quiet detail. */
.tx-dropzone, .upload-area, #uploadArea {
    position: relative;
}
.tx-dropzone::before, .upload-area::before, #uploadArea::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--mt-accent) 8%, transparent) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.tx-dropzone > *, .upload-area > *, #uploadArea > * {
    position: relative;
    z-index: 1;
}