/* ==========================================================
   2FA Authenticator - Material Design 3 (default baseline colours)
   Theme is chosen by theme.js: data-theme="auto" | "light" | "dark".
   ========================================================== */

/* Roboto, bundled in fonts/ so it works offline.
   If the files are missing, the font stack below falls back to system fonts. */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/roboto-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/roboto-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/roboto-latin-700-normal.woff2") format("woff2");
}

/* ----------------------------------------------------------
   Colour tokens: light scheme (M3 baseline, seed #6750A4)
   ---------------------------------------------------------- */
:root {
    color-scheme: light;

    --md-primary: #6750A4;
    --md-on-primary: #FFFFFF;
    --md-primary-container: #EADDFF;
    --md-on-primary-container: #21005D;

    --md-secondary-container: #E8DEF8;
    --md-on-secondary-container: #1D192B;

    --md-error-container: #F9DEDC;
    --md-on-error-container: #410E0B;

    --md-surface: #FFFBFE;
    --md-surface-container-low: #F7F2FA;
    --md-surface-container: #F3EDF7;
    --md-surface-container-high: #ECE6F0;
    --md-surface-variant: #E7E0EC;
    --md-on-surface: #1C1B1F;
    --md-on-surface-variant: #49454F;
    --md-outline: #79747E;
}

/* Dark scheme, forced with the Dark button */
:root[data-theme="dark"] {
    color-scheme: dark;

    --md-primary: #D0BCFF;
    --md-on-primary: #381E72;
    --md-primary-container: #4F378B;
    --md-on-primary-container: #EADDFF;

    --md-secondary-container: #4A4458;
    --md-on-secondary-container: #E8DEF8;

    --md-error-container: #8C1D18;
    --md-on-error-container: #F9DEDC;

    --md-surface: #1C1B1F;
    --md-surface-container-low: #1D1B20;
    --md-surface-container: #211F26;
    --md-surface-container-high: #2B2930;
    --md-surface-variant: #49454F;
    --md-on-surface: #E6E1E5;
    --md-on-surface-variant: #CAC4D0;
    --md-outline: #938F99;
}

/* Dark scheme, when Auto is selected and the system is dark */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --md-primary: #D0BCFF;
        --md-on-primary: #381E72;
        --md-primary-container: #4F378B;
        --md-on-primary-container: #EADDFF;

        --md-secondary-container: #4A4458;
        --md-on-secondary-container: #E8DEF8;

        --md-error-container: #8C1D18;
        --md-on-error-container: #F9DEDC;

        --md-surface: #1C1B1F;
        --md-surface-container-low: #1D1B20;
        --md-surface-container: #211F26;
        --md-surface-container-high: #2B2930;
        --md-surface-variant: #49454F;
        --md-on-surface: #E6E1E5;
        --md-on-surface-variant: #CAC4D0;
        --md-outline: #938F99;
    }
}

/* ----------------------------------------------------------
   Base
   ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

body {
    font-family: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--md-surface);
    color: var(--md-on-surface);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
}

.container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 16px 32px;
}

/* ----------------------------------------------------------
   Top app bar and theme switch
   ---------------------------------------------------------- */
.app-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 4px 24px;
}

.app-header h1 {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.25rem;
    color: var(--md-on-surface);
}

.subtitle {
    font-size: 0.875rem;
    color: var(--md-on-surface-variant);
}

.theme-switch {
    display: inline-flex;
    border: 1px solid var(--md-outline);
    border-radius: 999px;
    overflow: hidden;
}

.theme-option {
    appearance: none;
    min-height: 40px;
    padding: 8px 16px;
    background-color: transparent;
    border: 0;
    color: var(--md-on-surface);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.theme-option + .theme-option {
    border-left: 1px solid var(--md-outline);
}

.theme-option:hover:not([aria-pressed="true"]) {
    background-color: var(--md-surface-container-high);
}

.theme-option[aria-pressed="true"] {
    background-color: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

/* ----------------------------------------------------------
   Surfaces (M3 filled cards)
   ---------------------------------------------------------- */
section {
    background-color: var(--md-surface-container);
    border-radius: 28px;
    padding: 24px;
    margin-bottom: 16px;
}

section h2 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.75rem;
    margin-bottom: 12px;
    color: var(--md-on-surface);
}

/* Sections that only hold content, not a surface of their own */
#controls,
#cards-section {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* ----------------------------------------------------------
   File picker (M3 filled button)
   The real input is visually hidden inside the label, so it stays keyboard-accessible.
   ---------------------------------------------------------- */
.file-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 24px;
    border-radius: 999px;
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    cursor: pointer;
}

.file-button:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.file-button:focus-within {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
}

.file-button input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.hint {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--md-on-surface-variant);
}

/* ----------------------------------------------------------
   Messages
   ---------------------------------------------------------- */
.message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.875rem;
}

.message.error {
    background-color: var(--md-error-container);
    color: var(--md-on-error-container);
}

.message.success {
    background-color: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

/* ----------------------------------------------------------
   Search (M3 search bar)
   ---------------------------------------------------------- */
.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

#search-input {
    flex: 1 1 260px;
    min-height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: 28px;
    background-color: var(--md-surface-container-high);
    color: var(--md-on-surface);
    font: inherit;
    font-size: 1rem;
}

#search-input::placeholder {
    color: var(--md-on-surface-variant);
    opacity: 1;
}

#search-input:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
}

.stats {
    font-size: 0.875rem;
    color: var(--md-on-surface-variant);
}

/* ----------------------------------------------------------
   Code cards
   ---------------------------------------------------------- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.code-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 20px;
    background-color: var(--md-surface-container-high);
    color: var(--md-on-surface);
}

.account-name {
    font-size: 1rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.account-sub {
    font-size: 0.875rem;
    color: var(--md-on-surface-variant);
    overflow-wrap: anywhere;
}

.code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.code-main {
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: var(--md-primary);
    font-variant-numeric: tabular-nums;
}

/* M3 tonal button */
.copy-btn {
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background-color: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.copy-btn:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.copy-btn.copied {
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

/* M3 linear progress indicator */
.time-bar {
    height: 4px;
    border-radius: 999px;
    background-color: var(--md-surface-variant);
    overflow: hidden;
}

.time-fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--md-primary);
    transition: width 0.4s linear;
}

.time-text {
    font-size: 0.75rem;
    text-align: right;
    color: var(--md-on-surface-variant);
}

/* ----------------------------------------------------------
   Empty state and footer
   ---------------------------------------------------------- */
.empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--md-on-surface-variant);
    background-color: transparent;
}

footer {
    margin-top: 32px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--md-on-surface-variant);
}

/* ----------------------------------------------------------
   Small screens and motion preferences
   ---------------------------------------------------------- */
@media (max-width: 600px) {
    .app-header h1 {
        font-size: 1.5rem;
    }

    .code-main {
        font-size: 1.875rem;
    }

    .cards {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}