/*
 * main.css
 * Variables, reset i estils globals de PennyKeeper.
 * Tots els components hereten d'aquí.
 */

/* Variables
   La identitat es de cafe: marrons calids sobre un fons crema. Els
   colors de text estan triats perque passin el contrast minim WCAG AA
   (4,5:1) tant en mode clar com en fosc. Els fons "soft" es calculen a
   partir del color base, aixi el mode fosc els te bons sense repetir-los. */
:root {
    --color-dark:    #6F4127;   /* accent: botons, enllacos, titols */
    --color-mid:     #A9774D;   /* accent secundari: barres, hover */
    --color-warm:    #B9937B;
    --color-light:   #D9C6B6;
    --color-muted:   #86705F;   /* icones i etiquetes petites */

    --color-bg:        #F8F4F0;
    --color-surface:   #FFFFFF;
    --color-surface-2: #F3ECE5; /* farciment subtil: hover, pistes de barres */
    --color-border:    #E8DDD3;

    --color-text:        #2A1C13;
    --color-text-muted:  #6E5A4C;

    --color-success: #2F7A4D;
    --color-danger:  #B23B3B;
    --color-warning: #95600F;

    /* text que va damunt d'un fons d'accent (botons plens) */
    --color-on-accent: #FFFFFF;

    --color-accent-soft:  color-mix(in srgb, var(--color-dark) 10%, transparent);
    --color-success-soft: color-mix(in srgb, var(--color-success) 12%, transparent);
    --color-danger-soft:  color-mix(in srgb, var(--color-danger) 11%, transparent);
    --color-warning-soft: color-mix(in srgb, var(--color-warning) 13%, transparent);
    --focus-ring:         0 0 0 3px color-mix(in srgb, var(--color-mid) 30%, transparent);

    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  22px;

    --shadow-sm: 0 1px 2px rgba(60, 35, 20, 0.05), 0 1px 3px rgba(60, 35, 20, 0.06);
    --shadow-md: 0 2px 4px rgba(60, 35, 20, 0.05), 0 8px 20px rgba(60, 35, 20, 0.08);
    --shadow-lg: 0 4px 8px rgba(60, 35, 20, 0.06), 0 18px 44px rgba(60, 35, 20, 0.14);

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', system-ui, sans-serif;

    --transition: 0.18s cubic-bezier(0.2, 0, 0, 1);
}

/* Mode fosc
   S'activa posant data-theme="dark" a <html> (ho fa el script inline
   que hi ha al <head> de cada pagina, abans que es pinti res, perque
   no es vegi un flaix del tema equivocat). L'usuari el canvia amb
   l'interruptor de la barra lateral (navbar.php), que ho guarda a
   localStorage; si no ha triat mai res es fa servir el que tingui
   configurat el sistema operatiu. */
:root[data-theme="dark"] {
    --color-dark:    #D8A97C;
    --color-mid:     #BF8F62;
    --color-warm:    #A87D57;
    --color-light:   #4A3A2F;
    --color-muted:   #A08D7D;

    --color-bg:        #15100D;
    --color-surface:   #1E1713;
    --color-surface-2: #29201A;
    --color-border:    #372B23;

    --color-text:        #F3EAE1;
    --color-text-muted:  #BBA998;

    --color-success: #6CC08C;
    --color-danger:  #EE8C8C;
    --color-warning: #E3B066;

    --color-on-accent: #1A120D;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}

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

/* l'atribut hidden ha d'amagar sempre, encara que l'element tingui un
   display propi (flex, grid...) */
[hidden] { display: none !important; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

html, body {
    /* Evita que qualsevol element una mica massa ample obri scroll
       horitzontal a tota la pàgina en mòbil. Amb "clip" i no "hidden",
       perque hidden a html i body alhora converteix el body en un
       contenidor de scroll i el menu lateral (sticky) deixa de quedar-se
       fix. hidden es queda nomes pels navegadors que no coneixen clip. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* Tipografia
   La serif (Playfair) nomes per als titols de pagina, que son els que
   donen caracter; la resta de titols van amb Inter, que es llegeix
   millor a mida petita */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--color-dark);
}

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

a:hover {
    color: var(--color-mid);
}

/* anell de focus visible a tot el que es pot fer servir amb el teclat
   (nomes quan es navega amb teclat, no en clicar amb el ratoli) */
:focus-visible {
    outline: 2px solid var(--color-mid);
    outline-offset: 2px;
}

/* les xifres de diners sempre amb numeros d'amplada fixa, aixi les
   columnes d'imports queden alineades */
.tx-amount, .summary-value, .category-bar-amount, .amount-positive, .amount-negative,
.text-right, .linked-value, .facts dd, .kpi-grid .summary-value {
    font-variant-numeric: tabular-nums;
}

/* qui te activat "reduir el moviment" al sistema no veu animacions */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* text nomes per als lectors de pantalla */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* "Salta al contingut": el primer que troba qui navega amb el teclat */
.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 300;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-dark);
    color: var(--color-on-accent);
    font-weight: 600;
    transform: translateY(-200%);
}

.skip-link:focus { transform: none; color: var(--color-on-accent); }

kbd {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 5px;
    border: 1px solid currentColor;
    opacity: 0.7;
}

/* Botons
   Funcionen igual amb <button> que amb <a>, i alineen la icona amb el
   text sense haver de posar estils en linia a cada pagina. Tenen 40px
   d'alçada com a minim (44px en pantalles tactils) perque siguin facils
   de tocar per a tothom. */
.btn-primary-pk,
.btn-outline-pk,
.btn-danger-pk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn-primary-pk:active,
.btn-outline-pk:active,
.btn-danger-pk:active { transform: scale(0.97); }

.btn-primary-pk:disabled,
.btn-outline-pk:disabled,
.btn-danger-pk:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn-primary-pk {
    background-color: var(--color-dark);
    color: var(--color-on-accent);
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}

.btn-primary-pk:hover {
    background-color: color-mix(in srgb, var(--color-dark) 86%, #000);
    color: var(--color-on-accent);
}

.btn-outline-pk {
    background-color: var(--color-surface);
    color: var(--color-dark);
    border: 1px solid var(--color-border);
}

.btn-outline-pk:hover {
    background-color: var(--color-accent-soft);
    border-color: color-mix(in srgb, var(--color-dark) 35%, transparent);
    color: var(--color-dark);
}

/* Boto per a accions destructives (eliminar...) */
.btn-danger-pk {
    background-color: var(--color-danger);
    color: #FFFFFF;
    border: 1px solid transparent;
}

.btn-danger-pk:hover { background-color: color-mix(in srgb, var(--color-danger) 86%, #000); }

:root[data-theme="dark"] .btn-danger-pk { color: var(--color-on-accent); }

@media (pointer: coarse) {
    .btn-primary-pk, .btn-outline-pk, .btn-danger-pk { min-height: 44px; }
}

/* Formularis */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.form-input,
.form-select {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--color-muted));
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}

.form-input::placeholder { color: var(--color-muted); opacity: 1; }

.form-input:hover,
.form-select:hover { border-color: var(--color-muted); }

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-mid);
    box-shadow: var(--focus-ring);
}

.form-input.is-error {
    border-color: var(--color-danger);
}

/* Select amb la fletxa de l'app */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23A9774D' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.2rem;
    cursor: pointer;
}

/* Input de fitxer: el boto nadiu del navegador tambe porta l'estil de l'app */
input[type="file"].form-input {
    padding: 0.5rem 0.6rem;
    cursor: pointer;
}

input[type="file"].form-input::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.4rem 0.9rem;
    border: 1.5px solid var(--color-dark);
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--color-dark);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

input[type="file"].form-input::file-selector-button:hover {
    background-color: var(--color-dark);
    color: var(--color-surface);
}

/* Requadre d'avis/informacio dins d'un formulari (explicacions curtes,
   no un error). Fet servir a Importar CSV i a la Configuracio. */
.hint-box {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.5;
}

.hint-box i { margin-top: 0.15rem; flex-shrink: 0; }

/* Cards */
.card-pk {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

/* els fills d'un grid tenen min-width:auto i un text llarg amb nowrap
   (descripcio d'un moviment) eixampla la columna mes enlla de la
   pantalla; amb min-width:0 la columna s'ajusta i el text fa "..." */
:is(.dashboard-grid, .detail-grid, .group-detail-grid, .account-grid,
    .budgets-grid, .plans-grid, .groups-grid, .kpi-grid, .summary-cards,
    .history-stats-row, .import-stats) > * {
    min-width: 0;
}

/* Components compartits entre pagines.
   Abans vivien a transactions.css / history.css / groups.css i nomes
   funcionaven a les pagines que carregaven aquell fitxer: a Estalvis,
   Pressupostos, Inversions, Grups i Importar CSV sortien sense estils. */

/* Botons d'accio quadrats (editar, eliminar, aportar...) */
.tx-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* amb el dit, 30px es massa petit per encertar editar/esborrar */
@media (pointer: coarse) {
    .action-btn { width: 38px; height: 38px; }
}

.action-btn:hover,
.action-btn:focus-visible {
    background-color: var(--color-bg);
    color: var(--color-dark);
    border-color: var(--color-mid);
    outline: none;
}

.action-btn[class*="btn-delete"]:hover,
.action-btn[class*="btn-remove"]:hover,
.action-btn[class*="btn-delete"]:focus-visible,
.action-btn[class*="btn-remove"]:focus-visible {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Confirmar eliminacio (dins dels modals) */
.delete-confirm {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.delete-confirm p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.delete-confirm strong {
    color: var(--color-text);
}

.delete-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Taula de moviments */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.tx-table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.tx-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition);
}

.tx-table tbody tr:last-child { border-bottom: none; }
.tx-table tbody tr:hover      { background-color: var(--color-bg); }

.tx-table td {
    padding: 0.8rem 0.75rem;
    color: var(--color-text);
    vertical-align: middle;
}

.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }

.tx-table thead th.text-right { text-align: right; }

.amount-positive { color: var(--color-success); font-weight: 600; }
.amount-negative { color: var(--color-danger);  font-weight: 600; }

/* Etiquetes petites */
.badge-recurring {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--color-dark);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 0.15rem 0.55rem;
}

.tx-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 0.1rem 0.5rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* Boto quadrat de "tornar" de la capcalera */
.btn-back-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
    flex-shrink: 0;
}

.btn-back-nav:hover {
    background-color: var(--color-dark);
    color: var(--color-surface);
    border-color: var(--color-dark);
}

/* Alertes / feedback */
.alert-pk {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    display: none;
}

.alert-pk.show {
    display: block;
}

.alert-pk--error {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
    border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent);
}

.alert-pk--success {
    background-color: var(--color-success-soft);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
}

/* Pàgines d'autenticació */
.auth-wrapper {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.auth-panel--left {
    background: linear-gradient(155deg, var(--color-dark) 0%, var(--color-mid) 100%);
    color: #fff;
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
}

.auth-panel--left h1 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    color: #fff;
    font-weight: 700;
}

.auth-panel--left p {
    font-size: 1.05rem;
    opacity: 0.82;
    max-width: 320px;
    line-height: 1.7;
}

.auth-panel--right {
    background-color: var(--color-surface);
}

.auth-form-box {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* passos del login (contrasenya / codi 2FA): mateix espaiat que el
   formulari, encara que els camps quedin dins d'un div */
.auth-step {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.auth-form-box h2 {
    font-size: 1.75rem;
}

.auth-form-box .subtitle {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
}

/* Logo mark */
.logo-mark {
    width: 56px;
    height: 56px;
    background-color: rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

/* Responsive */
@media (max-width: 768px) {
    .auth-wrapper {
        grid-template-columns: 1fr;
    }

    .auth-panel--left {
        padding: 2rem 1.5rem;
        min-height: auto;
    }

    .auth-panel--left h1 {
        font-size: 2rem;
    }

    .auth-panel--right {
        padding: 2rem 1.5rem;
    }

    /* Els inputs i selects amb font-size < 16px fan que Safari iOS
       faci zoom automàtic en tocar-los. Els pugem a 16px només en
       mòbil per evitar-ho, sense canviar l'aspecte a l'escriptori. */
    .form-input,
    .form-select,
    .history-month-select {
        font-size: 16px;
    }
}
/* Utilitats
   Substitueixen estils en linia que es repetien a moltes pagines. */

/* boto que ocupa tota l'amplada (submit dels modals) */
.btn-block {
    width: 100%;
    padding: 0.75rem 1.4rem;
}

/* boto petit per a accions secundaries dins de files i capcaleres de targeta */
.btn-sm {
    font-size: 0.78rem;
    padding: 0.35rem 0.8rem;
}

/* fila de la capcalera de pagina amb boto "tornar" + titol */
.page-header-lead {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* columna que apila targetes amb el mateix espai */
.stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* titol de targeta amb una accio a la dreta */
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.card-head .card-title { margin-bottom: 0; }

.inline-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* targeta d'accions destructives */
.card-pk--danger { border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }

/* text d'ajuda sota un titol o dins un formulari */
.text-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* boto dins d'un estat buit */
.empty-state .btn-primary-pk,
.empty-state .btn-outline-pk {
    margin-top: 0.85rem;
}

/* titol de secció secundaria (p. ex. "Completats") */
.section-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.section-subtitle i { color: var(--color-success); }

input[type="checkbox"].check-pk {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-dark);
}

.card-title--flush { margin-bottom: 0; }
.tx-amount--neutral { color: var(--color-dark); }

.check-label {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.text-hint--sm { font-size: 0.75rem; margin-top: 0.3rem; }
.text-hint--md { font-size: 0.88rem; margin-bottom: 0.25rem; }

/* ------------------------------------------------------------
   Avis de cookies (common.js). Nomes informatiu, no bloqueja res.
   ------------------------------------------------------------ */
.cookie-notice {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    max-width: 420px;
    z-index: 90; /* per sota dels modals */
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.cookie-notice p { margin: 0; line-height: 1.45; }
.cookie-notice a { color: var(--color-dark); font-weight: 600; }
.cookie-notice .btn-primary-pk { flex-shrink: 0; }

/* mentre surt l'avis, espai a sota perque es pugui fer scroll fins al
   final de la pagina sense que l'avis tapi l'ultim boto */
body:has(.cookie-notice) { padding-bottom: 220px; }

/* ------------------------------------------------------------
   Avis de correu sense confirmar (navbar.php)
   ------------------------------------------------------------ */
.verify-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--color-warning);
    background-color: var(--color-surface);
    font-size: 0.85rem;
    color: var(--color-text);
}

.verify-banner i { color: var(--color-warning); font-size: 1.1rem; }
.verify-banner span { flex: 1; min-width: 200px; }

/* enllac "Instal·la l'app": el display:flex dels items guanyaria a hidden */
.nav-item[hidden],
.mobile-more-item[hidden] { display: none !important; }

/* ------------------------------------------------------------
   Panell "Més" del mobil (surt de baix, damunt la barra inferior)
   ------------------------------------------------------------ */
.mobile-more { display: none; }

@media (max-width: 768px) {
    .mobile-nav button.mobile-nav-item {
        border: none;
        background: none;
        font: inherit;
        font-size: 0.68rem;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-more.open {
        display: flex;
        align-items: flex-end;
        position: fixed;
        inset: 0;
        z-index: 49;
        background-color: rgba(30, 18, 10, 0.4);
        animation: pk-fade 0.18s ease;
    }

    .mobile-more-sheet {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 1.1rem 1rem calc(88px + env(safe-area-inset-bottom));
        /* en mobils baixos (o en horitzontal) no hi cap sencer */
        max-height: 100dvh;
        overflow-y: auto;
        background-color: var(--color-surface);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: var(--shadow-lg);
        animation: pk-sheet-up 0.24s cubic-bezier(0.2, 0, 0, 1);
    }

    .mobile-more-sheet form { margin: 0; }

    .mobile-more-item {
        width: 100%;
        min-height: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.7rem 0.3rem;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        background: var(--color-surface-2);
        color: var(--color-text);
        font: inherit;
        font-size: 0.76rem;
        font-weight: 550;
        text-align: center;
        cursor: pointer;
    }

    .mobile-more-item i { font-size: 1.25rem; color: var(--color-dark); }
    .mobile-more-item.active { border-color: var(--color-dark); background: var(--color-accent-soft); }

    .mobile-more-support { grid-column: 1 / -1; }

    .mobile-more-legal {
        grid-column: 1 / -1;
        margin: 0.4rem 0 0;
        text-align: center;
        font-size: 0.75rem;
        color: var(--color-text-muted);
    }

    .mobile-more-legal a { color: var(--color-text-muted); }

    .cookie-notice {
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        max-width: none;
    }

    /* nomes a l'app hi ha la barra inferior; al login i al registre
       no, i l'avis quedava a mitja pantalla tapant el boto */
    body:has(.mobile-nav) .cookie-notice { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@keyframes pk-fade     { from { opacity: 0; } }
@keyframes pk-sheet-up { from { transform: translateY(100%); } }

/* ------------------------------------------------------------
   Pagines de text (avis legal, privacitat, cookies)
   ------------------------------------------------------------ */
.legal-page {
    min-height: 100vh;
    background-color: var(--color-bg);
    padding: 2.5rem 1rem 4rem;
}

.legal-box {
    max-width: 760px;
    margin: 0 auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2.25rem 2.5rem;
    line-height: 1.7;
    font-size: 0.93rem;
    color: var(--color-text);
}

.legal-box h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--color-dark);
    margin: 0 0 0.3rem;
}

.legal-box h2 {
    font-size: 1.05rem;
    margin: 1.8rem 0 0.5rem;
    color: var(--color-dark);
}

.legal-box p, .legal-box ul { margin: 0 0 0.8rem; }
.legal-box ul { padding-left: 1.3rem; }
.legal-box a { color: var(--color-dark); }

.legal-box table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1rem;
    font-size: 0.85rem;
}

.legal-box th, .legal-box td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.legal-updated { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
    font-size: 0.85rem;
    color: var(--color-dark);
    text-decoration: none;
}

.legal-nav {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

@media (max-width: 600px) {
    .legal-box { padding: 1.5rem 1.2rem; }
    .legal-box table { display: block; overflow-x: auto; }
}

/* enllac petit sota dels formularis de login/registre */
.auth-links {
    text-align: center;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.auth-links a { color: var(--color-dark); font-weight: 600; }

.auth-terms {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.auth-terms input { margin-top: 0.2rem; accent-color: var(--color-dark); }
.auth-terms a { color: var(--color-dark); font-weight: 600; }

.auth-legal-foot {
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.auth-legal-foot a { color: var(--color-text-muted); }

/* =============================================================
   Components compartits de les pagines de planificacio (comptes,
   inversions, pressupostos i estalvi) i de les fitxes de detall
   ============================================================= */

/* fitxa de detall: contingut principal + columna lateral */
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

/* fila de xifres clau (reaprofita .summary-card) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
}

.kpi-hint {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* etiquetes petites d'estat */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--color-text-muted);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
}

.pill--success { color: var(--color-success); background-color: color-mix(in srgb, var(--color-success) 12%, transparent); border-color: transparent; }
.pill--warning { color: var(--color-warning); background-color: color-mix(in srgb, var(--color-warning) 14%, transparent); border-color: transparent; }
.pill--danger  { color: var(--color-danger);  background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);  border-color: transparent; }
.pill--accent  { color: var(--color-dark);    background-color: color-mix(in srgb, var(--color-dark) 12%, transparent);    border-color: transparent; }

/* barra de progres amb marca opcional ("avui", "on hauries de ser") */
.progress {
    position: relative;
    height: 8px;
    border-radius: 6px;
    background-color: var(--color-bg);
    overflow: visible;
}

.progress-fill {
    height: 100%;
    max-width: 100%;
    border-radius: 6px;
    background-color: var(--color-mid);
    transition: width 0.6s ease;
}

.progress-fill--success { background-color: var(--color-success); }
.progress-fill--warning { background-color: var(--color-warning); }
.progress-fill--danger  { background-color: var(--color-danger); }

.progress-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background-color: var(--color-text);
    opacity: 0.55;
}

/* selector de 2-4 opcions en fila (tipus d'operacio, aportar/retirar...) */
.segmented {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
}

.segmented input { position: absolute; opacity: 0; pointer-events: none; }

.segmented label {
    flex: 1;
    text-align: center;
    padding: 0.45rem 0.5rem;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.segmented input:checked + label {
    background-color: var(--color-surface);
    color: var(--color-dark);
    box-shadow: var(--shadow-sm);
}

.segmented input:focus-visible + label { outline: 2px solid var(--color-mid); outline-offset: 1px; }

/* dos camps de formulari un al costat de l'altre */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* resum calculat dins d'un formulari ("Total: 1.001,00 €") */
.form-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.form-total strong { font-size: 1rem; color: var(--color-text); }

/* camp de cerca dins d'una targeta */
.list-search {
    position: relative;
    display: block;
    margin-bottom: 0.85rem;
    flex-shrink: 0;
}

.list-search i {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
}

.list-search .form-input { padding-left: 2.2rem; }

.list-search-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    padding: 1rem 0;
}

/* llista de parelles etiqueta / valor (columna lateral de les fitxes) */
.facts {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.facts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.facts dt { color: var(--color-text-muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* enllac petit a la dreta del titol d'una targeta ("Historial >") */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.card-link:hover { text-decoration: underline; }

/* boto de contorn per a accions destructives (eliminar) */
.btn-outline-pk.btn-outline-danger { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); }
.btn-outline-pk.btn-outline-danger:hover { background-color: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); }

/* llista d'elements enllacats amb nom a l'esquerra i xifra a la dreta
   (inversions i plans d'un compte, comptes remunerats...) */
.linked-list { list-style: none; margin: 0; padding: 0; }

.linked-list li + li { border-top: 1px solid var(--color-border); }

.linked-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    color: var(--color-text);
    font-size: 0.87rem;
}

.linked-list a:hover { color: var(--color-dark); }

.linked-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-weight: 600;
}

.linked-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.linked-value small { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.linked-value small.positive { color: var(--color-success); }
.linked-value small.negative { color: var(--color-danger); }

/* accions secundaries o destructives al peu d'una fitxa (arxivar, eliminar) */
.danger-actions {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
}

.danger-actions .btn-sm { flex: 1; }

/* grup de camps amb titol dins d'un formulari ("Primera compra") */
.form-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem 0.1rem;
    margin: 0 0 1rem;
}

.form-fieldset legend {
    padding: 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}

/* missatge petit sota d'un camp (validacio en directe) */
.field-feedback {
    margin-top: 0.3rem;
    min-height: 1.1em;
    font-size: 0.74rem;
    color: var(--color-text-muted);
}

.field-feedback.is-ok    { color: var(--color-success); }
.field-feedback.is-error { color: var(--color-danger); }

/* camp per a codis (ISIN, simbol): majuscules i lletra monoespaiada */
.code-input {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.code-input::placeholder { text-transform: none; letter-spacing: 0; }

/* boto que sembla un enllac ("Vendre-ho tot") */
.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--color-dark);
    cursor: pointer;
    text-decoration: underline;
}

/* codi (ISIN, simbol) */
.code-tag {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

/* fila sencera clicable d'una taula (porta a la fitxa) */
.tx-table tr.row-link { cursor: pointer; }
.tx-table tr.row-link:focus-visible { outline: 2px solid var(--color-mid); outline-offset: -2px; }

@media (max-width: 1100px) {
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    /* al mobil les xifres clau van de dues en dues, mes compactes */
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .kpi-grid .summary-card { padding: 0.8rem 0.9rem; }
    .kpi-grid .summary-value { font-size: 1.15rem; }
    .kpi-grid .summary-label { font-size: 0.76rem; }
}

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

/* insignia rodona del logo (menu, landing, peu) */
.logo-badge {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--color-mid), var(--color-dark));
    color: var(--color-on-accent);
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
}