/*
 * Rappelo — UI inspirée de la "Direction B2 Argentine" du dashboard Finaxia.
 * Dark only (pas de mode light : Rappelo a une seule palette signature).
 *
 * Tokens OKLCH + fonte Geist + gradient argenté + cards translucides.
 */

/* Geist via Google Fonts (sans + mono) */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap');

:root {
    /* Surfaces — fond noir profond, séparation par la lumière (pas le trait) */
    --b2-bg:           oklch(0.115 0 0);
    --b2-surface:      oklch(0.255 0.006 250);
    --b2-surface-hi:   oklch(0.285 0.006 250);
    --b2-card:         oklch(1 0 0 / 0.025);
    --b2-card-hi:      oklch(1 0 0 / 0.04);
    --b2-card-hover:   oklch(1 0 0 / 0.06);
    --b2-border:       oklch(1 0 0 / 0.055);
    --b2-border-hi:    oklch(1 0 0 / 0.10);
    --b2-row-divider:  oklch(1 0 0 / 0.04);

    /* Texte — hiérarchie 3 niveaux */
    --b2-text:         oklch(0.97 0 0);
    --b2-text-2:       oklch(0.74 0.005 250);
    --b2-text-3:       oklch(0.56 0.005 250);

    /* Accent signature — violet feutré, utilisé sobrement */
    --b2-accent:       oklch(0.74 0.14 285);
    --b2-accent-soft:  oklch(0.74 0.14 285 / 0.18);
    --b2-accent-ring:  oklch(0.74 0.14 285 / 0.40);

    /* Sémantique : gain (success) / loss (danger) / warn */
    --b2-gain:         oklch(0.78 0.085 158);
    --b2-gain-soft:    oklch(0.78 0.085 158 / 0.10);
    --b2-gain-border:  oklch(0.78 0.085 158 / 0.22);
    --b2-loss:         oklch(0.72 0.10 28);
    --b2-loss-soft:    oklch(0.72 0.10 28 / 0.10);
    --b2-loss-border:  oklch(0.72 0.10 28 / 0.22);
    --b2-warn:         oklch(0.82 0.14 88);
    --b2-warn-soft:    oklch(0.82 0.14 88 / 0.14);

    /* Gradient argenté radial du dashboard (voile concentré sur les ~480 premiers pixels) */
    --b2-gradient:
        radial-gradient(ellipse 900px 360px at 50% -200px, oklch(0.40 0.018 250 / 0.60), transparent 75%),
        linear-gradient(180deg, oklch(0.20 0.008 250) 0%, oklch(0.135 0.005 250) 38%, oklch(0.115 0 0) 100%);

    /* Radius */
    --radius:    0.625rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Fontes */
    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

body {
    background: var(--b2-bg);
    color: var(--b2-text);
    line-height: 1.5;
    min-height: 100vh;
    font-feature-settings: 'tnum';  /* tabular-nums global */
    font-size: 14px;
}

/* Wrapper centré 1100px max avec gradient argenté en arrière-plan, sur la page principale */
body:not(.login-page) {
    background: var(--b2-gradient);
    background-attachment: fixed;
}

/* ───────────────────────── Header ───────────────────────── */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    /* Pas de border-bottom — la lumière du gradient suffit */
}

header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.logout {
    color: var(--b2-text-3);
    text-decoration: none;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.logout:hover {
    color: var(--b2-text);
    background: var(--b2-card-hi);
}

/* ───────────────────────── Main / Layout ───────────────────────── */

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ───────────────────────── Cards (langage B2 : translucides + ring) ───────────────────────── */

.card {
    background: var(--b2-card);
    box-shadow: inset 0 0 0 1px var(--b2-border-hi);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.card h2 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--b2-text-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.h2-like {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--b2-text-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ───────────────────────── Flash & Alert ───────────────────────── */

.flash {
    background: var(--b2-gain-soft);
    color: var(--b2-gain);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--b2-gain-border);
    font-size: 0.875rem;
}

.alert {
    background: var(--b2-loss-soft);
    color: var(--b2-loss);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    box-shadow: inset 0 0 0 1px var(--b2-loss-border);
    font-size: 0.875rem;
}

.muted { color: var(--b2-text-3); }
.muted-list { opacity: 0.6; }

/* ───────────────────────── Form ───────────────────────── */

.reminder-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.row .col-2 { grid-column: 1 / -1; }

label {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--b2-text-3);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

input, textarea, select {
    background: var(--b2-card-hi);
    color: var(--b2-text);
    border: none;
    box-shadow: inset 0 0 0 1px var(--b2-border-hi);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.8125rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    font-feature-settings: 'tnum';
    width: 100%;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}

input::placeholder, textarea::placeholder {
    color: var(--b2-text-3);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    background: var(--b2-card-hover);
    box-shadow:
        inset 0 0 0 1px var(--b2-accent),
        0 0 0 3px var(--b2-accent-ring);
}

textarea {
    resize: vertical;
    min-height: 64px;
    font-family: var(--font-sans);
}

select {
    appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a8b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem;
    padding-right: 2rem;
}

.actions {
    display: flex;
    gap: 0.625rem;
    margin-top: 0.25rem;
    align-items: center;
}

button {
    background: var(--b2-card-hi);
    color: var(--b2-text);
    border: none;
    box-shadow: inset 0 0 0 1px var(--b2-border-hi);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

button:hover {
    background: var(--b2-card-hover);
    box-shadow: inset 0 0 0 1px var(--b2-border-hi);
}

button:active {
    transform: translateY(1px);
}

button:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 1px var(--b2-accent),
        0 0 0 3px var(--b2-accent-ring);
}

button.primary {
    background: var(--b2-text);
    color: var(--b2-bg);
    box-shadow: none;
    font-weight: 600;
    padding: 0.5rem 1.125rem;
}

button.primary:hover {
    background: oklch(0.92 0 0);
}

.cancel {
    color: var(--b2-text-3);
    text-decoration: none;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    height: 2rem;
}

.cancel:hover {
    color: var(--b2-text);
    background: var(--b2-card-hi);
}

/* ───────────────────────── Reminder list ───────────────────────── */

.reminder-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reminder-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--b2-card);
    box-shadow: inset 0 0 0 1px var(--b2-border);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    gap: 1rem;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.reminder-list li:hover {
    background: var(--b2-card-hi);
    box-shadow: inset 0 0 0 1px var(--b2-border-hi);
}

.reminder-main {
    flex: 1;
    min-width: 0;
}

.reminder-title {
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: var(--b2-text);
    font-size: 0.9375rem;
}

.reminder-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    font-size: 0.8125rem;
    color: var(--b2-text-3);
    font-feature-settings: 'tnum';
}

.reminder-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.reminder-notes {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--b2-text-2);
    padding-top: 0.625rem;
    border-top: 1px solid var(--b2-row-divider);
}

.reminder-actions {
    display: flex;
    gap: 0.25rem;
    align-items: flex-start;
    flex-shrink: 0;
}

.inline { display: inline; }

.btn-small {
    background: transparent;
    color: var(--b2-text-2);
    padding: 0;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
    box-shadow: inset 0 0 0 1px var(--b2-border);
    border: none;
    text-decoration: none;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s ease;
}

.btn-small:hover {
    color: var(--b2-text);
    background: var(--b2-card-hi);
    box-shadow: inset 0 0 0 1px var(--b2-border-hi);
}

.btn-small.danger:hover {
    color: var(--b2-loss);
    background: var(--b2-loss-soft);
    box-shadow: inset 0 0 0 1px var(--b2-loss-border);
}

/* ───────────────────────── Details / Archived ───────────────────────── */

details summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

details summary::-webkit-details-marker { display: none; }

details summary::before {
    content: '▶';
    color: var(--b2-text-3);
    display: inline-block;
    font-size: 0.625rem;
    transition: transform 0.15s ease;
}

details[open] summary::before {
    transform: rotate(90deg);
}

details[open] summary {
    margin-bottom: 1rem;
}

/* ───────────────────────── Footer ───────────────────────── */

footer {
    text-align: center;
    color: var(--b2-text-3);
    padding: 2rem 1rem;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    max-width: 1100px;
    margin: 0 auto;
}

/* ───────────────────────── Login ───────────────────────── */

.login-page {
    background: var(--b2-gradient);
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.login-card {
    background: var(--b2-card);
    box-shadow: inset 0 0 0 1px var(--b2-border-hi);
    padding: 2.5rem 2rem;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 380px;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-card h1 {
    margin-bottom: 0.375rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.login-card p {
    margin-bottom: 1.75rem;
    font-size: 0.875rem;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-card input {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    text-align: center;
}

.login-card button.primary {
    padding: 0.75rem;
    height: auto;
    font-size: 0.875rem;
}

/* ───────────────────────── Mobile ───────────────────────── */

@media (max-width: 640px) {
    header { padding: 1rem 1rem; }
    main { padding: 0.25rem 1rem 2rem; }
    .card { padding: 1rem 1.125rem; }
    .row { grid-template-columns: 1fr; }
    .reminder-list li { flex-direction: column; align-items: stretch; }
    .reminder-actions { width: 100%; justify-content: flex-end; }
    .login-card { padding: 2rem 1.5rem; }
}