/* =========================================================================
   Stile vintage ispirato a assets/mockup-dashboard-vintage.png
   - texture, puntine e icone sono SVG inline (data URI): nessuna immagine esterna;
   - i bordi strappati usano i filtri SVG di Components/Layout/PaperFilters.razor,
     applicati allo pseudo-elemento ::before che disegna la carta (il testo resta nitido);
   - le misure della dashboard usano --u, che scala con larghezza e altezza del viewport
     (12.8px a 1280x800, circa 9px su un tablet 1024x600).
   ========================================================================= */

:root {
    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .22 0 0 0 0 .09 -1 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --texture-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .32 0 0 0 0 .12 1.1 0 0 0 -.52'/%3E%3C/filter%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .84 0 1 0 0 -.46'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");

    --pin-silver: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cdefs%3E%3CradialGradient id='h' cx='.38' cy='.32' r='.72'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.3' stop-color='%23dcd7cd'/%3E%3Cstop offset='.75' stop-color='%23878075'/%3E%3Cstop offset='1' stop-color='%234a443c'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23575149'/%3E%3Cstop offset='.45' stop-color='%23dcd7ce'/%3E%3Cstop offset='1' stop-color='%234b463f'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-50%25' y='-100%25' width='200%25' height='300%25'%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='14.5' cy='27.6' rx='6.6' ry='2.4' fill='%23281a0a' opacity='.45' filter='url(%23s)'/%3E%3Cpath d='M9.7 12.5h4.6l-.8 10.4h-3z' fill='url(%23b)'/%3E%3Cellipse cx='12' cy='23.4' rx='5' ry='1.9' fill='url(%23b)'/%3E%3Ccircle cx='12' cy='8.7' r='7' fill='url(%23h)'/%3E%3C/svg%3E");
    --pin-brass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23573c0e'/%3E%3Cstop offset='.32' stop-color='%23ecc874'/%3E%3Cstop offset='.6' stop-color='%23b4842e'/%3E%3Cstop offset='1' stop-color='%234d350b'/%3E%3C/linearGradient%3E%3CradialGradient id='t' cx='.4' cy='.35' r='.8'%3E%3Cstop offset='0' stop-color='%23f9e4a4'/%3E%3Cstop offset='.55' stop-color='%23cc9f45'/%3E%3Cstop offset='1' stop-color='%23704f14'/%3E%3C/radialGradient%3E%3ClinearGradient id='n' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23676159'/%3E%3Cstop offset='.5' stop-color='%23d8d3ca'/%3E%3Cstop offset='1' stop-color='%23575149'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M32 27 45.5 46.6' stroke='%23281a0a' stroke-opacity='.42' stroke-width='6' stroke-linecap='round' filter='url(%23s)'/%3E%3Cg transform='translate(24 19) rotate(-38)'%3E%3Cpath d='M-1.3 21h2.6L0 35z' fill='url(%23n)'/%3E%3Cellipse cx='0' cy='21' rx='8' ry='2.6' fill='url(%23c)'/%3E%3Crect x='-4.6' y='3' width='9.2' height='18' rx='1.5' fill='url(%23c)'/%3E%3Crect x='-4.6' y='10' width='9.2' height='1.6' fill='%235e4212' opacity='.55'/%3E%3Cpath d='M-10 0v3.4a10 3.6 0 0 0 20 0V0z' fill='url(%23c)'/%3E%3Cellipse cx='0' cy='0' rx='10' ry='3.6' fill='url(%23t)'/%3E%3C/g%3E%3C/svg%3E");

    --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5.2 4.5h1.3V2h2v2.5h7V2h2v2.5h1.3A2.2 2.2 0 0 1 21 6.7v12.6a2.2 2.2 0 0 1-2.2 2.2H5.2A2.2 2.2 0 0 1 3 19.3V6.7a2.2 2.2 0 0 1 2.2-2.2zM3 8.6h18v1.1H3zM5 10.8h2.6v2.4H5zm3.8 0h2.6v2.4H8.8zm3.8 0h2.6v2.4h-2.6zm3.8 0h2.6v2.4h-2.6zM5 14.4h2.6v2.4H5zm3.8 0h2.6v2.4H8.8zm3.8 0h2.6v2.4h-2.6zm3.8 0h2.6v2.4h-2.6zM5 18h2.6v2.4H5zm3.8 0h2.6v2.4H8.8zm3.8 0h2.6v2.4h-2.6zm3.8 0h2.6v2.4h-2.6z'/%3E%3C/svg%3E");
    --icon-calendar-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5.2 4.5h1.3V2h2v2.5h7V2h2v2.5h1.3A2.2 2.2 0 0 1 21 6.7v12.6a2.2 2.2 0 0 1-2.2 2.2H5.2A2.2 2.2 0 0 1 3 19.3V6.7a2.2 2.2 0 0 1 2.2-2.2zM4.8 9.6v9.5c0 .3.3.6.6.6h13.2c.3 0 .6-.3.6-.6V9.6zM5.9 10.3h2.2v2H5.9zm3.3 0h2.2v2H9.2zm3.3 0h2.2v2h-2.2zm3.3 0h2.2v2h-2.2zM5.9 13.6h2.2v2H5.9zm3.3 0h2.2v2H9.2zm3.3 0h2.2v2h-2.2zm3.3 0h2.2v2h-2.2zM5.9 16.9h2.2v2H5.9zm3.3 0h2.2v2H9.2zm3.3 0h2.2v2h-2.2z'/%3E%3C/svg%3E");
    --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.4'/%3E%3Cpath d='M12 6.6v5.6l3.8 2.5'/%3E%3C/svg%3E");
    --icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5 7.5 12l7.5 7.5'/%3E%3C/svg%3E");
    --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5l7.5 7.5L9 19.5'/%3E%3C/svg%3E");
    --icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 5l-7 7 7 7'/%3E%3C/svg%3E");
    --icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 3h14a2 2 0 0 1 2 2v10l-6 6H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM7 7.2v1.9h10V7.2zm0 3.7v1.9h10v-1.9zm0 3.7v1.9h5v-1.9zM14 19.6V14h5.6z'/%3E%3C/svg%3E");
    --icon-postit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 4h24a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H16.5l-7 5.5.9-5.5H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4z' fill='%234e3a69'/%3E%3Cpath d='M18.4 12.5h3.2v6.3h6.3V22h-6.3v6.3h-3.2V22h-6.3v-3.2h6.3z' fill='%23efe4cc'/%3E%3C/svg%3E");

    --weather-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3CradialGradient id='s' cx='.42' cy='.38' r='.66'%3E%3Cstop offset='0' stop-color='%23f3d07a'/%3E%3Cstop offset='.55' stop-color='%23dba545'/%3E%3Cstop offset='1' stop-color='%23bd8629'/%3E%3C/radialGradient%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M32 3.5V10M32 46v6.5M7.5 28H14M50 28h6.5M14.7 10.7l4.6 4.6M44.7 40.7l4.6 4.6M14.7 45.3l4.6-4.6M44.7 15.3l4.6-4.6' stroke='%23cf973a' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='28' r='12.5' fill='url(%23s)'/%3E%3C/g%3E%3C/svg%3E");
    --weather-partly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3CradialGradient id='s' cx='.42' cy='.38' r='.66'%3E%3Cstop offset='0' stop-color='%23f3d07a'/%3E%3Cstop offset='.55' stop-color='%23dba545'/%3E%3Cstop offset='1' stop-color='%23bd8629'/%3E%3C/radialGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='22' x2='0' y2='47'%3E%3Cstop offset='0' stop-color='%23d2d0c9'/%3E%3Cstop offset='.55' stop-color='%23aaa8a1'/%3E%3Cstop offset='1' stop-color='%23898781'/%3E%3C/linearGradient%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M41 8.5V3.5M49.8 12.2l3.6-3.6M53.5 21h5M49.8 29.8l3.6 3.6M32.2 12.2l-3.6-3.6' stroke='%23cf973a' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='41' cy='21' r='9.5' fill='url(%23s)'/%3E%3Cg fill='url(%23c)'%3E%3Ccircle cx='27' cy='33' r='11'/%3E%3Ccircle cx='15.5' cy='39' r='7.5'/%3E%3Ccircle cx='40' cy='37' r='9.5'/%3E%3Crect x='15.5' y='37' width='24.5' height='9.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --weather-rain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='14' x2='0' y2='39'%3E%3Cstop offset='0' stop-color='%23c9c8c2'/%3E%3Cstop offset='.55' stop-color='%23a3a29b'/%3E%3Cstop offset='1' stop-color='%23838179'/%3E%3C/linearGradient%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M22 43.5l-2.6 6.5M32 43.5l-2.6 6.5M42 43.5l-2.6 6.5' stroke='%234f7598' stroke-width='3.2' stroke-linecap='round'/%3E%3Cg fill='url(%23c)'%3E%3Ccircle cx='29' cy='25' r='11'/%3E%3Ccircle cx='17.5' cy='31' r='7.5'/%3E%3Ccircle cx='42' cy='29' r='9.5'/%3E%3Crect x='17.5' y='29' width='24.5' height='9.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --weather-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='14' x2='0' y2='39'%3E%3Cstop offset='0' stop-color='%23d4d3ce'/%3E%3Cstop offset='.55' stop-color='%23aeada7'/%3E%3Cstop offset='1' stop-color='%238d8b85'/%3E%3C/linearGradient%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M22 42.5v7M19 44.2l6 3.6M19 47.8l6-3.6M32 45.5v7M29 47.2l6 3.6M29 50.8l6-3.6M42 42.5v7M39 44.2l6 3.6M39 47.8l6-3.6' stroke='%237894ad' stroke-width='1.9' stroke-linecap='round'/%3E%3Cg fill='url(%23c)'%3E%3Ccircle cx='29' cy='25' r='11'/%3E%3Ccircle cx='17.5' cy='31' r='7.5'/%3E%3Ccircle cx='42' cy='29' r='9.5'/%3E%3Crect x='17.5' y='29' width='24.5' height='9.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --weather-fog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='14' x2='0' y2='39'%3E%3Cstop offset='0' stop-color='%23cfcec8'/%3E%3Cstop offset='.55' stop-color='%23aba9a2'/%3E%3Cstop offset='1' stop-color='%238c8a83'/%3E%3C/linearGradient%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M12 44q5-2.5 10 0t10 0 10 0 10 0M17 50.5q5-2.5 10 0t10 0 10 0' fill='none' stroke='%239a968b' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='url(%23c)'%3E%3Ccircle cx='29' cy='25' r='11'/%3E%3Ccircle cx='17.5' cy='31' r='7.5'/%3E%3Ccircle cx='42' cy='29' r='9.5'/%3E%3Crect x='17.5' y='29' width='24.5' height='9.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --weather-storm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='14' x2='0' y2='39'%3E%3Cstop offset='0' stop-color='%23a19f99'/%3E%3Cstop offset='.55' stop-color='%23797771'/%3E%3Cstop offset='1' stop-color='%235c5a55'/%3E%3C/linearGradient%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M34 34l-7 11h6l-3 9 11-13.5h-6.2l3.9-6.5z' fill='%23dfa83f'/%3E%3Cg fill='url(%23c)'%3E%3Ccircle cx='29' cy='25' r='11'/%3E%3Ccircle cx='17.5' cy='31' r='7.5'/%3E%3Ccircle cx='42' cy='29' r='9.5'/%3E%3Crect x='17.5' y='29' width='24.5' height='9.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --weather-unavailable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='22' x2='0' y2='47'%3E%3Cstop offset='0' stop-color='%23c3c1ba'/%3E%3Cstop offset='.55' stop-color='%239f9d96'/%3E%3Cstop offset='1' stop-color='%23817f79'/%3E%3C/linearGradient%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cg fill='url(%23c)'%3E%3Ccircle cx='27' cy='33' r='11'/%3E%3Ccircle cx='15.5' cy='39' r='7.5'/%3E%3Ccircle cx='40' cy='37' r='9.5'/%3E%3Crect x='15.5' y='37' width='24.5' height='9.5'/%3E%3C/g%3E%3Cpath d='M24 33a4.2 4.2 0 1 1 5.6 4c-1.1.45-1.6 1.1-1.6 2.3v.7' fill='none' stroke='%23f4ead6' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='43.4' r='1.6' fill='%23f4ead6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Foglio di pergamena (dashboard, calendario, login) ---------- */

.dashboard-shell,
.calendar-shell {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(0.35rem, 0.95vw, 0.85rem);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(61, 39, 16, 0.32), transparent 62%);
}

.dashboard-paper,
.calendar-paper {
    --u: min(1vw, 1.6vh, 12.8px);
    width: min(96vw, 1280px);
    height: min(800px, calc(100vh - 1rem));
    height: min(800px, calc(100dvh - 1rem));
    min-height: 0;
    padding: calc(var(--u) * 2.1) calc(var(--u) * 2.6) calc(var(--u) * 1.9);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: calc(var(--u) * 1.5);
}

.dashboard-paper::before,
.calendar-paper::before,
.login-paper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        var(--texture-grain),
        var(--texture-mottle),
        var(--texture-mottle) 280px 190px,
        radial-gradient(ellipse 70% 65% at 48% 42%, rgba(255, 246, 218, 0.4), transparent 72%),
        linear-gradient(155deg, #dcc596 0%, #d5bb8a 48%, #c9ab78 100%);
    box-shadow:
        inset 0 0 0 2px rgba(50, 28, 8, 0.72),
        inset 0 0 0.6rem 0.25rem rgba(84, 48, 15, 0.66),
        inset 0 0 2.2rem 0.6rem rgba(120, 76, 30, 0.46),
        inset 0 0 6rem 1rem rgba(150, 104, 48, 0.26);
    filter: url(#paper-edge-sheet);
}

/* Puntina d'ottone in alto a sinistra, come nel mockup. */
.paper-fastener {
    width: calc(var(--u, 12px) * 7.2);
    height: calc(var(--u, 12px) * 7.2);
    position: absolute;
    z-index: 4;
    top: calc(var(--u, 12px) * -0.9);
    left: calc(var(--u, 12px) * -0.4);
    background: var(--pin-brass) center / contain no-repeat;
    pointer-events: none;
}

.paper-fastener--top-right {
    display: none;
}

/* Puntina metallica piccola: post-it, meteo e modali. */
.paper-pin {
    width: calc(var(--u, 12px) * 2.3);
    height: calc(var(--u, 12px) * 3);
    position: absolute;
    left: calc(var(--u, 12px) * 1.6);
    top: calc(var(--u, 12px) * 0.6);
    z-index: 2;
    background: var(--pin-silver) center / contain no-repeat;
    pointer-events: none;
}

.paper-pin--top {
    left: 50%;
    top: calc(var(--u, 12px) * -0.8);
    transform: translateX(-50%);
}

/* Nelle modali la puntina fissa il bordo superiore della fascia del titolo, senza coprirlo. */
.postit-dialog .paper-pin {
    width: 1.15rem;
    height: 1.5rem;
}

/* ---------- Pezzi di carta appoggiati sul foglio ---------- */

.date-strip,
.weather-card,
.section-card,
.section-ribbon,
.postit-card,
.action-button,
.dashboard-feedback,
.calendar-top-strip,
.calendar-week-button,
.calendar-day-card,
.calendar-day-ribbon,
.calendar-back-button {
    position: relative;
    isolation: isolate;
}

.date-strip::before,
.weather-card::before,
.section-card::before,
.section-ribbon::before,
.postit-card::before,
.action-button::before,
.dashboard-feedback::before,
.calendar-top-strip::before,
.calendar-week-button::before,
.calendar-day-card::before,
.calendar-day-ribbon::before,
.calendar-back-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        var(--texture-grain),
        var(--texture-mottle),
        radial-gradient(ellipse at 45% 40%, rgba(255, 252, 235, 0.3), transparent 70%),
        var(--piece-color, #e4cfa6);
    background-position: 0 0, var(--mottle-offset, 0 0), 0 0;
    box-shadow:
        inset 0 0 0 1px rgba(98, 66, 28, 0.26),
        inset 0 0 1.1rem rgba(142, 100, 46, 0.32);
    filter: var(--piece-edge, url(#paper-edge)) drop-shadow(0 calc(var(--u, 12px) * 0.3) calc(var(--u, 12px) * 0.4) rgba(52, 32, 10, 0.36));
}

/* Le macchie partono da punti diversi, così fogli uguali affiancati non mostrano lo stesso disegno. */
.postit-card:nth-child(2),
.calendar-day-card:nth-child(2) {
    --mottle-offset: -210px -140px;
}

.postit-card:nth-child(3),
.calendar-day-card:nth-child(3) {
    --mottle-offset: -380px -60px;
}

.postit-card:nth-child(4),
.calendar-day-card:nth-child(4) {
    --mottle-offset: -90px -300px;
}

.postit-card:nth-child(5),
.calendar-day-card:nth-child(5) {
    --mottle-offset: -450px -250px;
}

.calendar-day-card:nth-child(6) {
    --mottle-offset: -300px -420px;
}

.calendar-day-card:nth-child(7) {
    --mottle-offset: -130px -480px;
}

/* ---------- Dashboard ---------- */

.dashboard-header,
.dashboard-main,
.bottom-actions {
    position: relative;
    z-index: 1;
}

.dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(var(--u) * 2.4);
    align-items: center;
}

.date-strip {
    --piece-color: #e9d8b2;
    min-width: 0;
    min-height: calc(var(--u) * 7.8);
    padding: calc(var(--u) * 1.1) calc(var(--u) * 3) calc(var(--u) * 1) calc(var(--u) * 3.6);
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 1.6);
    color: var(--ink);
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transform: rotate(-0.35deg);
}

.dashboard-time,
.dashboard-separator,
.dashboard-date {
    font-family: var(--font-hand);
    line-height: 1;
}

.dashboard-time {
    flex: 0 0 auto;
    font-size: calc(var(--u) * 5.4);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dashboard-separator {
    flex: 0 0 auto;
    font-size: calc(var(--u) * 3.6);
    font-weight: 300;
}

.dashboard-date {
    flex: 1 1 auto;
    min-width: 0;
    font-size: calc(var(--u) * 2.8);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-weather {
    display: flex;
    gap: calc(var(--u) * 1.7);
}

.weather-card {
    --piece-color: #e8d6af;
    width: calc(var(--u) * 16.6);
    min-height: calc(var(--u) * 10.4);
    padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2) calc(var(--u) * 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--u) * 0.1);
    color: var(--ink);
    background: transparent;
    border: 0;
    font: inherit;
    text-align: center;
    cursor: pointer;
    appearance: none;
    transform: rotate(-0.4deg);
}

.weather-card + .weather-card {
    --piece-edge: url(#paper-edge-alt);
    transform: rotate(0.5deg);
}

.weather-card .paper-pin {
    left: calc(var(--u) * 0.7);
    top: calc(var(--u) * -0.7);
    transform: none;
}

.weather-card-title {
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 1.85);
    line-height: 1.15;
}

.weather-card-body {
    display: grid;
    grid-template-columns: calc(var(--u) * 5.6) minmax(0, 1fr);
    column-gap: calc(var(--u) * 0.4);
    align-items: center;
}

.weather-card-reading {
    display: contents;
}

.weather-symbol {
    width: calc(var(--u) * 5.6);
    height: calc(var(--u) * 4.9);
    grid-row: 1;
    grid-column: 1;
    background: center / contain no-repeat;
}

.weather-symbol--sun {
    background-image: var(--weather-sun);
}

.weather-symbol--partly {
    background-image: var(--weather-partly);
}

.weather-symbol--rain {
    background-image: var(--weather-rain);
}

.weather-symbol--snow {
    background-image: var(--weather-snow);
}

.weather-symbol--fog {
    background-image: var(--weather-fog);
}

.weather-symbol--storm {
    background-image: var(--weather-storm);
}

.weather-symbol--unavailable {
    background-image: var(--weather-unavailable);
}

.weather-card strong {
    grid-row: 1;
    grid-column: 2;
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 3.9);
    font-weight: 700;
    line-height: 1;
}

/* La condizione sta sotto la temperatura e, se lunga, si allarga verso sinistra sotto l'icona
   (al massimo due righe). */
.weather-card-condition {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: end;
    min-width: calc(100% - var(--u) * 6);
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 1.3);
    line-height: 1.2;
    text-wrap: balance;
}

.dashboard-main {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: calc(var(--u) * 2.6);
}

.appointments-column {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--u) * 2);
}

.section-card {
    --piece-color: #e7d4ad;
    min-height: 0;
    padding: calc(var(--u) * 4.4) calc(var(--u) * 2.2) calc(var(--u) * 1);
    display: flex;
    flex-direction: column;
}

.section-card::before {
    box-shadow:
        inset 0 0 0 1px rgba(98, 66, 28, 0.24),
        inset 0 0 1.8rem rgba(150, 108, 52, 0.3);
}

.appointment-section + .appointment-section {
    --piece-edge: url(#paper-edge-alt);
}

/* Nastro di carta blu/grigio con il titolo della sezione. */
.section-ribbon {
    --piece-color: #4a535b;
    --piece-edge: url(#paper-edge-ribbon);
    min-width: calc(var(--u) * 19.5);
    height: calc(var(--u) * 4.6);
    padding: 0 calc(var(--u) * 4.6) 0 calc(var(--u) * 6.7);
    position: absolute;
    z-index: 2;
    left: calc(var(--u) * -0.6);
    top: calc(var(--u) * -0.9);
    display: flex;
    align-items: center;
    color: var(--ribbon-ink);
    transform: rotate(-0.5deg);
}

.section-ribbon::before,
.calendar-day-ribbon::before,
.calendar-week-button::before {
    background:
        var(--texture-grain),
        radial-gradient(ellipse 40% 70% at 22% 40%, rgba(255, 255, 255, 0.08), transparent 70%),
        radial-gradient(ellipse 35% 80% at 78% 60%, rgba(0, 0, 0, 0.12), transparent 70%),
        var(--piece-color);
    box-shadow:
        inset 0 0 0 1px rgba(226, 208, 168, 0.22),
        inset 0 0 0.9rem rgba(14, 18, 22, 0.42);
}

.section-ribbon h2 {
    margin: 0;
    padding-top: 0.12em;
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 2.4);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.section-icon {
    width: calc(var(--u) * 4.1);
    height: calc(var(--u) * 4.1);
    position: absolute;
    left: calc(var(--u) * 1.4);
    top: 50%;
    border-radius: 50%;
    background:
        var(--texture-grain),
        radial-gradient(circle at 40% 35%, #f4e9d0 0%, #e7d7b3 55%, #cdb68c 100%);
    box-shadow:
        inset 0 0 0 1px rgba(92, 66, 30, 0.35),
        inset 0 -0.15rem 0.35rem rgba(120, 88, 44, 0.3),
        0 0.12rem 0.3rem rgba(10, 8, 6, 0.45);
    transform: translateY(-50%);
}

.section-icon::before {
    content: "";
    position: absolute;
    inset: 23%;
    background: #343a40;
    -webkit-mask: var(--icon-calendar) center / contain no-repeat;
    mask: var(--icon-calendar) center / contain no-repeat;
}

.section-icon--note::before {
    background: #3a2b1b;
    -webkit-mask-image: var(--icon-note);
    mask-image: var(--icon-note);
}

/* Tabella appuntamenti tratteggiata: orologio, ora e titolo nel colore scelto. */
.appointment-list {
    min-height: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border: 1px dashed rgba(96, 72, 40, 0.5);
    background: rgba(255, 249, 228, 0.2);
    scrollbar-width: none;
}

/* Le liste restano scorrevoli al tocco, ma senza barra visibile sulla carta. */
.appointment-list::-webkit-scrollbar,
.postit-list::-webkit-scrollbar {
    display: none;
}

.appointment-row {
    width: 100%;
    flex: 0 1 calc(var(--u) * 4.1);
    min-height: calc(var(--u) * 2.75);
    padding: 0;
    display: grid;
    grid-template-columns: calc(var(--u) * 3.8) calc(var(--u) * 7.2) minmax(0, 1fr);
    align-items: center;
    color: var(--appointment-accent, var(--appointment-default-color));
    background: transparent;
    border: 0;
    border-bottom: 1px dashed rgba(96, 72, 40, 0.42);
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.appointment-row:last-child {
    border-bottom: 0;
}

.appointment-accent-bar {
    display: none;
}

.appointment-clock {
    width: calc(var(--u) * 2.2);
    height: calc(var(--u) * 2.2);
    justify-self: center;
    background: currentColor;
    -webkit-mask: var(--icon-clock) center / contain no-repeat;
    mask: var(--icon-clock) center / contain no-repeat;
}

.appointment-time,
.appointment-title {
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 2);
    font-weight: 700;
    line-height: 1.15;
}

.appointment-time {
    align-self: stretch;
    padding-left: calc(var(--u) * 0.6);
    display: flex;
    align-items: center;
    border-right: 1px dashed rgba(96, 72, 40, 0.42);
    white-space: nowrap;
}

.appointment-title {
    min-width: 0;
    padding: calc(var(--u) * 0.15) calc(var(--u) * 1) calc(var(--u) * 0.15) calc(var(--u) * 2.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-empty-message {
    margin: 0;
    padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6);
    color: rgba(64, 48, 28, 0.72);
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 1.75);
    line-height: 1.25;
}

/* Promemoria: strisce di carta colorata appuntate, con l'angolo in basso a destra sollevato. */
.postit-board {
    padding: calc(var(--u) * 4.6) calc(var(--u) * 1.4) calc(var(--u) * 1);
}

.postit-list {
    min-height: 0;
    flex: 1 1 auto;
    padding: calc(var(--u) * 0.4) calc(var(--u) * 0.4) calc(var(--u) * 0.6);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.postit-card {
    --piece-color: var(--postit-yellow);
    --piece-edge: url(#paper-edge-alt);
    --curl-w: calc(var(--u) * 3.4);
    --curl-h: calc(var(--u) * 2.6);
    flex: 1 1 0;
    max-height: calc(var(--u) * 7.6);
    margin: 0 calc(var(--u) * 2) 0 calc(var(--u) * 0.9);
    padding: calc(var(--u) * 0.85) calc(var(--u) * 4) calc(var(--u) * 0.85) calc(var(--u) * 6.4);
    display: flex;
    align-items: center;
    color: var(--ink);
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transform: rotate(var(--postit-tilt));
}

.postit-card:nth-child(even) {
    --piece-edge: url(#paper-edge);
    margin: 0 calc(var(--u) * 1.2) 0 calc(var(--u) * 1.6);
}

/* Il taglio diagonale lascia spazio all'angolo ripiegato (.paper-curl). */
.postit-card::before {
    clip-path: polygon(
        -12px -12px,
        calc(100% + 12px) -12px,
        calc(100% + 12px) calc(100% - var(--curl-h) - 9px),
        calc(100% - var(--curl-w) - 16px) calc(100% + 12px),
        -12px calc(100% + 12px)
    );
}

.postit-card p {
    margin: 0;
    padding-top: 0.1em;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 2.4);
    line-height: 1.12;
}

/* Con 5 promemoria (il massimo mostrato) il testo resta su una riga per stare tutto nel riquadro. */
.postit-list:has(> .postit-card:nth-child(5)) .postit-card p {
    -webkit-line-clamp: 1;
}

.postit-card .paper-pin {
    left: calc(var(--u) * 2.3);
    top: calc(var(--u) * 0.5);
}

.paper-curl {
    width: var(--curl-w);
    height: calc(var(--curl-h) * 1.26);
    position: absolute;
    right: 0;
    bottom: 0;
    filter: drop-shadow(calc(var(--u) * -0.18) calc(var(--u) * 0.22) calc(var(--u) * 0.22) rgba(52, 32, 10, 0.45));
    pointer-events: none;
}

.paper-curl::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ece0c2;
    background:
        linear-gradient(338deg, rgba(90, 62, 24, 0.42) 0%, transparent 55%),
        linear-gradient(338deg, transparent 55%, rgba(255, 255, 255, 0.4) 100%),
        color-mix(in srgb, var(--piece-color) 65%, #fffaf0);
    clip-path: polygon(100% 20.7%, 0 100%, 26.2% 0);
}

.postit-card--yellow {
    --piece-color: var(--postit-yellow);
}

.postit-card--blue {
    --piece-color: var(--postit-blue);
}

.postit-card--pink {
    --piece-color: var(--postit-pink);
}

.postit-card--green {
    --piece-color: var(--postit-green);
}

.postit-card--purple {
    --piece-color: var(--postit-purple);
}

.postit-card--beige {
    --piece-color: var(--postit-beige);
}

/* Pulsanti in basso: foglietti colorati con icona e scritta a mano. */
.bottom-actions {
    padding-inline: calc(var(--u) * 0.2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr);
    gap: calc(var(--u) * 2.8);
}

.action-button {
    min-height: calc(var(--u) * 6.6);
    padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 1.3);
    color: var(--ink);
    background: transparent;
    border: 0;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
}

.action-button span:last-child {
    padding-top: 0.12em;
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 2.95);
    line-height: 1;
    white-space: nowrap;
}

.action-button--postit {
    --piece-color: #cdb7bd;
    color: #45305f;
    transform: rotate(-0.4deg);
}

.action-button--appointment {
    --piece-color: #b9c3c6;
    --piece-edge: url(#paper-edge-alt);
    color: #1b3550;
    transform: rotate(0.3deg);
}

.action-button--calendar {
    --piece-color: #dfc89b;
    color: #3a2414;
    transform: rotate(-0.25deg);
}

.action-icon {
    width: calc(var(--u) * 3.7);
    height: calc(var(--u) * 3.7);
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--icon-calendar-outline) center / contain no-repeat;
    mask: var(--icon-calendar-outline) center / contain no-repeat;
}

.action-icon--postit {
    position: relative;
    background: var(--icon-postit) center / contain no-repeat;
    -webkit-mask: none;
    mask: none;
}

/* Puntina sull'icona del post-it, come nel mockup. */
.action-icon--postit::before {
    content: "";
    width: calc(var(--u) * 1.7);
    height: calc(var(--u) * 2.2);
    position: absolute;
    left: calc(var(--u) * -0.5);
    top: calc(var(--u) * -0.9);
    background: var(--pin-silver) center / contain no-repeat;
}

.dashboard-feedback {
    --piece-color: #efe2c2;
    margin: 0;
    padding: calc(var(--u, 12px) * 0.9) calc(var(--u, 12px) * 2);
    position: absolute;
    left: 50%;
    bottom: calc(var(--u, 12px) * 9.6);
    z-index: 4;
    color: var(--ink);
    font-family: var(--font-hand);
    font-size: calc(var(--u, 12px) * 1.9);
    line-height: 1.2;
    transform: translateX(-50%) rotate(-0.4deg);
}

/* ---------- Calendario settimanale (stessi pezzi di carta della dashboard) ---------- */

.calendar-page-header,
.week-calendar,
.calendar-footer-actions {
    position: relative;
    z-index: 1;
}

.calendar-top-strip {
    --piece-color: #e9d8b2;
    min-height: calc(var(--u) * 7.8);
    padding: calc(var(--u) * 1) calc(var(--u) * 2.2) calc(var(--u) * 1) calc(var(--u) * 3.6);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(var(--u) * 2.4);
    color: var(--ink);
    transform: rotate(-0.25deg);
}

.calendar-page-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 1.4);
}

.calendar-title-icon {
    width: calc(var(--u) * 4.4);
    height: calc(var(--u) * 4.4);
    flex: 0 0 auto;
    color: #3a2414;
    background: currentColor;
    -webkit-mask: var(--icon-calendar-outline) center / contain no-repeat;
    mask: var(--icon-calendar-outline) center / contain no-repeat;
}

.calendar-page-header h1 {
    margin: 0;
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 4.2);
    font-weight: 700;
    line-height: 1;
}

.calendar-page-header p {
    margin: calc(var(--u) * 0.2) 0 0;
    color: var(--muted-ink);
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 1.6);
    line-height: 1.1;
}

.calendar-week-range {
    min-width: 0;
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 2.1);
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
}

.calendar-week-controls {
    display: flex;
    gap: calc(var(--u) * 1.2);
}

/* Linguette blu/grigie per cambiare settimana: la freccia è un'icona, il testo resta per compatibilità. */
.calendar-week-button {
    --piece-color: #4a535b;
    --piece-edge: url(#paper-edge-ribbon);
    width: calc(var(--u) * 6.6);
    height: calc(var(--u) * 4.8);
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--ribbon-ink);
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
    appearance: none;
    transform: rotate(-1deg);
}

.calendar-week-button--next {
    transform: rotate(0.8deg);
}

.calendar-week-button span {
    display: none;
}

.calendar-week-button::after {
    content: "";
    width: calc(var(--u) * 2.6);
    height: calc(var(--u) * 2.6);
    background: currentColor;
    -webkit-mask: var(--icon-chevron-left) center / contain no-repeat;
    mask: var(--icon-chevron-left) center / contain no-repeat;
}

.calendar-week-button--next::after {
    -webkit-mask-image: var(--icon-chevron-right);
    mask-image: var(--icon-chevron-right);
}

.week-calendar {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: calc(var(--u) * 1.3);
}

.calendar-day-card {
    --piece-color: #e7d4ad;
    min-height: 0;
    padding: calc(var(--u) * 6.2) calc(var(--u) * 0.7) calc(var(--u) * 1.1);
    display: flex;
    flex-direction: column;
}

.calendar-day-card::before {
    box-shadow:
        inset 0 0 0 1px rgba(98, 66, 28, 0.24),
        inset 0 0 1.4rem rgba(150, 108, 52, 0.3);
}

.calendar-day-card:nth-child(even) {
    --piece-edge: url(#paper-edge-alt);
}

/* Nastro con giorno e data, come i titoli OGGI/DOMANI. */
.calendar-day-ribbon {
    --piece-color: #4a535b;
    --piece-edge: url(#paper-edge-ribbon);
    min-height: calc(var(--u) * 5.2);
    padding: calc(var(--u) * 0.6) calc(var(--u) * 1) calc(var(--u) * 0.5);
    position: absolute;
    z-index: 2;
    left: calc(var(--u) * -0.5);
    right: calc(var(--u) * 0.6);
    top: calc(var(--u) * -0.6);
    display: grid;
    align-content: center;
    color: var(--ribbon-ink);
    transform: rotate(-0.8deg);
}

.calendar-day-card:nth-child(even) .calendar-day-ribbon {
    transform: rotate(0.6deg);
}

.calendar-day-ribbon h2,
.calendar-day-ribbon span {
    overflow: hidden;
    font-family: var(--font-hand);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calendar-day-ribbon h2 {
    margin: 0;
    font-size: calc(var(--u) * 2.05);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.calendar-day-ribbon span {
    font-size: calc(var(--u) * 1.35);
    line-height: 1.15;
    opacity: 0.85;
}

/* Elenco tratteggiato come nella dashboard: orologio e ora sopra, titolo sotto. */
.calendar-appointment-list {
    min-height: 0;
    flex: 0 1 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border: 1px dashed rgba(96, 72, 40, 0.5);
    background: rgba(255, 249, 228, 0.2);
    scrollbar-width: none;
}

.calendar-appointment-list::-webkit-scrollbar {
    display: none;
}

/* Nei giorni liberi basta la scritta, senza riquadro. */
.calendar-appointment-list:has(> .calendar-empty-message) {
    border-color: transparent;
    background: none;
}

.calendar-appointment-row {
    width: 100%;
    flex: 0 0 auto;
    padding: calc(var(--u) * 0.55) calc(var(--u) * 0.5) calc(var(--u) * 0.6);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--u) * 0.15) calc(var(--u) * 0.6);
    color: var(--appointment-accent, var(--appointment-default-color));
    background: transparent;
    border: 0;
    border-bottom: 1px dashed rgba(96, 72, 40, 0.42);
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.calendar-appointment-row:last-child {
    border-bottom: 0;
}

/* L'elemento d'accento diventa l'orologio colorato, come nelle righe della dashboard. */
.calendar-appointment-accent {
    width: calc(var(--u) * 1.8);
    height: calc(var(--u) * 1.8);
    background: currentColor;
    -webkit-mask: var(--icon-clock) center / contain no-repeat;
    mask: var(--icon-clock) center / contain no-repeat;
}

.calendar-appointment-row time,
.calendar-appointment-row span:last-child {
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 1.6);
    font-weight: 700;
}

.calendar-appointment-row time {
    line-height: 1.1;
}

.calendar-appointment-row span:last-child {
    min-width: 0;
    grid-column: 1 / -1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.28;
}

.calendar-empty-message {
    margin: 0;
    padding: calc(var(--u) * 0.6) calc(var(--u) * 0.4);
    color: rgba(64, 48, 28, 0.66);
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 1.4);
    line-height: 1.2;
    text-align: center;
    overflow-wrap: break-word;
}

.calendar-footer-actions {
    display: flex;
}

/* Ritorno alla dashboard: foglietto come i pulsanti in basso della dashboard. */
.calendar-back-button {
    --piece-color: #dfc89b;
    min-height: calc(var(--u) * 6);
    padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4) calc(var(--u) * 0.6) calc(var(--u) * 2);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 1.2);
    color: #3a2414;
    font-family: var(--font-hand);
    font-size: calc(var(--u) * 2.8);
    line-height: 1;
    text-decoration: none;
    transform: rotate(-0.4deg);
}

.calendar-back-button::after {
    content: "";
    width: calc(var(--u) * 2.8);
    height: calc(var(--u) * 2.8);
    order: -1;
    background: currentColor;
    -webkit-mask: var(--icon-back) center / contain no-repeat;
    mask: var(--icon-back) center / contain no-repeat;
}

.date-strip:focus-visible,
.weather-card:focus-visible,
.appointment-row:focus-visible,
.postit-card:focus-visible,
.action-button:focus-visible,
.calendar-week-button:focus-visible,
.calendar-appointment-row:focus-visible,
.calendar-back-button:focus-visible {
    outline: 3px solid rgba(72, 81, 90, 0.78);
    outline-offset: 3px;
}

@media (hover: hover) {
    .date-strip:hover,
    .weather-card:hover,
    .postit-card:hover,
    .action-button:hover,
    .calendar-week-button:hover,
    .calendar-back-button:hover {
        translate: 0 -2px;
    }

    .appointment-row:hover,
    .calendar-appointment-row:hover {
        background: rgba(255, 249, 228, 0.35);
    }
}

/* Tablet orizzontali bassi (es. 1024x600): si recupera spazio attorno al foglio. */
@media (min-width: 901px) and (max-height: 620px) {
    .dashboard-shell,
    .calendar-shell {
        padding: 0.25rem;
    }

    .dashboard-paper,
    .calendar-paper {
        --u: min(1vw, 1.64vh, 12.8px);
        width: calc(100vw - 0.5rem);
        height: calc(100vh - 0.5rem);
        height: calc(100dvh - 0.5rem);
    }
}

/* Telefoni e tablet in verticale: layout impilato con scroll. */
@media (max-width: 900px) {
    .dashboard-shell,
    .calendar-shell {
        overflow: auto;
    }

    .dashboard-paper,
    .calendar-paper {
        --u: clamp(8px, 1.1vw + 2px, 11px);
        height: auto;
        min-height: calc(100vh - 1rem);
    }

    .dashboard-header,
    .dashboard-main,
    .bottom-actions {
        grid-template-columns: 1fr;
    }

    .weather-card {
        flex: 1;
        width: auto;
    }

    .appointments-column {
        grid-template-rows: auto auto;
    }

    .date-strip {
        flex-wrap: wrap;
    }

    .calendar-top-strip {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .calendar-week-range {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
    }

    /* I giorni si dispongono su più colonne finché c'è spazio, poi uno sotto l'altro. */
    .week-calendar {
        grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 22), 1fr));
        gap: calc(var(--u) * 2.2) calc(var(--u) * 1.6);
    }

    .calendar-day-card {
        min-height: calc(var(--u) * 14);
    }
}

/* Sui telefoni ora e data vanno su due righe: il separatore resterebbe isolato.
   Nel calendario il titolo prende tutta la riga e le frecce scendono accanto alle date. */
@media (max-width: 560px) {
    .dashboard-separator {
        display: none;
    }

    .calendar-page-heading {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .calendar-week-range {
        grid-column: 1;
    }

    .calendar-week-controls {
        grid-column: 2;
        grid-row: 2;
    }
}

.login-shell {
    min-height: 100vh;
    padding: clamp(0.65rem, 1.6vw, 1.25rem);
    display: grid;
    place-items: center;
    overflow: auto;
    background:
        radial-gradient(ellipse at center, rgba(61, 39, 16, 0.34), transparent 58%),
        repeating-linear-gradient(90deg, rgba(255, 236, 180, 0.018) 0 1px, transparent 1px 12px);
}

.login-paper {
    width: min(100%, 44rem);
    min-height: 25rem;
    padding: clamp(1.4rem, 4vw, 2.4rem);
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
}

.login-card {
    width: min(100%, 31rem);
    padding: clamp(1.2rem, 3vw, 1.8rem);
    position: relative;
    z-index: 1;
    background:
        linear-gradient(145deg, rgba(255, 250, 224, 0.66), transparent 38%),
        repeating-linear-gradient(90deg, rgba(72, 43, 13, 0.03) 0 2px, transparent 2px 8px),
        rgba(239, 224, 184, 0.9);
    border: 1px solid rgba(88, 58, 22, 0.24);
    border-radius: 7px;
    box-shadow:
        0 0.68rem 1.25rem rgba(47, 30, 12, 0.3),
        inset 0 0 1.15rem rgba(255, 248, 218, 0.24);
}

.login-card h1 {
    width: fit-content;
    margin: 0 0 0.85rem;
    padding: 0.42rem 1.25rem;
    color: var(--ribbon-ink);
    background: var(--ribbon-bg);
    border-radius: 5px;
    font-size: clamp(1.9rem, 4vw, 2.65rem);
    font-style: italic;
    letter-spacing: 0.04rem;
    box-shadow: 0 0.35rem 0.75rem rgba(28, 23, 18, 0.3);
    clip-path: polygon(0 0, 100% 0, 96% 51%, 100% 94%, 78% 98%, 60% 93%, 38% 100%, 17% 94%, 0 99%);
}

.login-card p {
    margin: 0 0 1rem;
    color: var(--muted-ink);
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    font-style: italic;
    line-height: 1.25;
}

.login-message {
    padding: 0.68rem 0.8rem;
    color: #6f1d1b;
    background: rgba(223, 168, 160, 0.36);
    border: 1px solid rgba(111, 29, 27, 0.2);
    border-radius: 6px;
}

.login-form {
    display: grid;
    gap: 0.75rem;
}

.login-form label {
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 800;
}

.login-form input {
    min-height: 3.15rem;
    padding: 0.65rem 0.78rem;
    color: var(--ink);
    background: rgba(255, 248, 218, 0.72);
    border: 1px solid rgba(88, 58, 22, 0.32);
    border-radius: 6px;
    box-shadow: inset 0 0 0.7rem rgba(99, 63, 21, 0.08);
    font: inherit;
    font-size: 1.1rem;
}

.login-form input:focus {
    border-color: rgba(72, 81, 90, 0.72);
    outline: 3px solid rgba(72, 81, 90, 0.18);
}

.login-form .login-remember-option {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    color: var(--muted-ink);
    font-size: 1rem;
    font-style: italic;
    font-weight: 700;
}

.login-form .login-remember-option input {
    width: 1.22rem;
    height: 1.22rem;
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: #4b2f0e;
}

.login-form button {
    min-height: 3.25rem;
    padding: 0.68rem 1rem;
    color: #f7edcf;
    background: #4b2f0e;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 800;
    box-shadow:
        0 0.55rem 1rem rgba(47, 30, 12, 0.24),
        inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.login-form button:hover,
.login-form button:focus-visible {
    filter: brightness(1.08);
    outline: 3px solid rgba(247, 237, 207, 0.82);
    outline-offset: 2px;
}

.postit-dialog-backdrop {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 2vw, 2rem);
    background:
        radial-gradient(ellipse at center, rgba(29, 18, 7, 0.25), rgba(18, 11, 5, 0.58)),
        rgba(18, 11, 5, 0.38);
    backdrop-filter: blur(2px);
}

.postit-dialog {
    width: min(94vw, 44rem);
    max-height: min(92vh, 42rem);
    overflow: auto;
    padding: clamp(1.2rem, 2.3vw, 1.9rem);
    position: relative;
    color: var(--ink);
    background:
        radial-gradient(ellipse at 8% 5%, rgba(102, 57, 17, 0.22), transparent 6rem),
        radial-gradient(ellipse at 98% 12%, rgba(78, 42, 12, 0.2), transparent 7rem),
        linear-gradient(145deg, rgba(255, 250, 224, 0.68), transparent 48%),
        repeating-linear-gradient(96deg, rgba(78, 48, 17, 0.052) 0 2px, transparent 2px 8px),
        #e3cc98;
    border: 1px solid rgba(72, 43, 13, 0.42);
    border-radius: 8px;
    box-shadow:
        0 1.4rem 3.2rem rgba(0, 0, 0, 0.54),
        0 0 0 1px rgba(247, 237, 207, 0.18),
        inset 0 0 2rem rgba(255, 248, 218, 0.26),
        inset 0 0 0 0.6rem rgba(79, 47, 15, 0.045);
    clip-path: polygon(1% 3%, 9% 1%, 22% 3%, 37% 1%, 52% 3%, 70% 1%, 98% 4%, 96% 25%, 99% 50%, 97% 77%, 99% 98%, 79% 96%, 60% 99%, 42% 97%, 23% 99%, 2% 96%, 4% 72%, 1% 49%, 3% 25%);
}

.appointment-dialog {
    width: min(97vw, 62rem);
    max-height: min(96vh, 49rem);
    padding: clamp(1.05rem, 1.75vw, 1.75rem);
}

.weather-dialog {
    width: min(94vw, 38rem);
}

.data-backup-dialog {
    width: min(94vw, 47rem);
}

.postit-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(0.9rem, 1.8vw, 1.35rem);
}

.postit-dialog-header h2 {
    margin: 0;
    padding: 0.45rem 1rem;
    color: var(--ribbon-ink);
    background: var(--ribbon-bg);
    border-radius: 5px;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-style: italic;
    letter-spacing: 0.06rem;
    clip-path: polygon(0 8%, 7% 0, 94% 5%, 100% 1%, 96% 51%, 100% 94%, 78% 98%, 60% 93%, 38% 100%, 17% 94%, 0 99%);
    box-shadow: 0 0.35rem 0.72rem rgba(28, 23, 18, 0.24);
}

.postit-dialog-close {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(71, 43, 17, 0.28);
    border-radius: 50%;
    color: var(--ink);
    background: var(--paper-light);
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    box-shadow: 0 0.25rem 0.55rem rgba(42, 26, 10, 0.22);
}

.postit-dialog-form {
    display: grid;
    gap: clamp(0.9rem, 1.5vw, 1.2rem);
}

.postit-form-field,
.postit-color-field {
    margin: 0;
    min-width: 0;
    display: grid;
    gap: 0.45rem;
}

.postit-form-field label,
.postit-color-field legend {
    color: #372817;
    font-size: clamp(1.05rem, 1.45vw, 1.25rem);
    font-weight: 800;
    font-style: italic;
}

.postit-textarea,
.postit-date-input,
.appointment-input,
.appointment-notes {
    width: 100%;
    border: 1px dashed rgba(60, 45, 25, 0.34);
    border-radius: 6px;
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(255, 253, 237, 0.52), rgba(255, 248, 218, 0.58)),
        rgba(255, 248, 218, 0.58);
    box-shadow: inset 0 0 0.9rem rgba(107, 72, 27, 0.11);
    font: inherit;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
}

.postit-textarea:focus,
.postit-date-input:focus,
.appointment-input:focus,
.appointment-notes:focus {
    border-color: rgba(72, 81, 90, 0.62);
    background-color: rgba(255, 250, 226, 0.75);
}

.appointment-input {
    min-width: 0;
    max-width: 100%;
    min-height: 3.15rem;
    padding: 0.55rem 0.75rem;
}

.appointment-form-field--date .appointment-input {
    font-size: clamp(1.05rem, 1.35vw, 1.28rem);
    padding-inline: 0.6rem;
}

.appointment-form-field--time .appointment-input {
    font-size: clamp(1.08rem, 1.4vw, 1.32rem);
    padding-inline: 0.65rem;
}

.postit-textarea {
    min-height: 8.5rem;
    resize: vertical;
    padding: 0.85rem 0.95rem;
}

.appointment-notes {
    min-height: 6.8rem;
    resize: vertical;
    padding: 0.75rem 0.9rem;
}

.postit-date-input {
    max-width: 16rem;
    min-height: 3.1rem;
    padding: 0.55rem 0.75rem;
}

.postit-field-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(43, 33, 24, 0.68);
    font-size: 0.95rem;
    font-style: italic;
}

.postit-color-field {
    padding: 0;
    border: 0;
}

.appointment-dialog-grid {
    display: grid;
    grid-template-columns:
        minmax(9.25rem, 0.85fr)
        minmax(8rem, 0.75fr)
        minmax(8rem, 0.75fr)
        minmax(10rem, 1fr);
    gap: clamp(0.75rem, 1.3vw, 1rem);
}

.weather-location-grid {
    display: grid;
    gap: clamp(0.75rem, 1.3vw, 1rem);
}

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

.appointment-all-day-option {
    min-height: 3.15rem;
    align-self: end;
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid rgba(82, 54, 23, 0.22);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 252, 231, 0.45), transparent),
        rgba(255, 248, 218, 0.36);
    cursor: pointer;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    font-style: italic;
}

.appointment-all-day-option input {
    accent-color: #173d5a;
}

.postit-color-option:has(input:checked) {
    border-color: rgba(72, 81, 90, 0.58);
    box-shadow:
        0 0 0 0.12rem rgba(72, 81, 90, 0.13),
        inset 0 0 0.85rem rgba(255, 248, 218, 0.24);
}

.postit-color-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.postit-color-option {
    min-height: 3.2rem;
    padding: 0.55rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid rgba(82, 54, 23, 0.22);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 252, 231, 0.45), transparent),
        rgba(255, 248, 218, 0.36);
    cursor: pointer;
    font-size: clamp(0.95rem, 1.25vw, 1.08rem);
}

.postit-color-option input {
    accent-color: #4a3471;
}

.postit-color-swatch {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
    border: 1px solid rgba(53, 34, 13, 0.24);
    border-radius: 50%;
    box-shadow: inset 0 0 0.4rem rgba(255, 255, 255, 0.25);
}

.postit-color-swatch--yellow {
    background: var(--postit-yellow);
}

.postit-color-swatch--blue {
    background: var(--postit-blue);
}

.postit-color-swatch--pink {
    background: var(--postit-pink);
}

.postit-color-swatch--green {
    background: var(--postit-green);
}

.postit-color-swatch--purple {
    background: var(--postit-purple);
}

.postit-color-swatch--beige {
    background: var(--postit-beige);
}

.postit-dialog-message {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    font-style: italic;
}

.postit-dialog-message--error {
    color: #5f1717;
    background: rgba(223, 168, 160, 0.42);
    border: 1px solid rgba(125, 31, 31, 0.22);
}

.postit-dialog-message--info {
    color: #3a2a15;
    background: rgba(234, 216, 170, 0.48);
    border: 1px solid rgba(82, 54, 23, 0.2);
}

.data-backup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.55vw, 1.2rem);
}

.data-backup-panel {
    min-height: 13rem;
    padding: clamp(0.85rem, 1.35vw, 1.15rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid rgba(82, 54, 23, 0.22);
    border-radius: 7px;
    background:
        linear-gradient(145deg, rgba(255, 250, 224, 0.55), transparent 58%),
        repeating-linear-gradient(94deg, rgba(82, 53, 20, 0.045) 0 2px, transparent 2px 8px),
        rgba(255, 248, 218, 0.35);
}

.data-backup-panel h3 {
    margin: 0;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-style: italic;
}

.data-backup-panel p {
    margin: 0;
    color: rgba(43, 33, 24, 0.72);
    font-size: clamp(1rem, 1.25vw, 1.08rem);
    font-style: italic;
}

.data-backup-file-picker {
    min-height: 3.25rem;
    padding: 0.65rem 0.8rem;
    display: grid;
    align-items: center;
    border: 1px dashed rgba(82, 54, 23, 0.42);
    border-radius: 6px;
    background: rgba(255, 248, 218, 0.42);
    cursor: pointer;
    font-weight: 800;
    font-style: italic;
}

.data-backup-file-input {
    margin-top: 0.45rem;
    max-width: 100%;
    font: inherit;
}

.data-backup-file-name {
    overflow-wrap: anywhere;
}

.postit-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.postit-dialog-actions--split {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.postit-dialog-danger-zone,
.postit-dialog-main-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.postit-dialog-button {
    min-height: 3.35rem;
    min-width: 8.5rem;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(72, 43, 13, 0.28);
    border-radius: 6px;
    cursor: pointer;
    color: var(--ink);
    font-size: clamp(1.05rem, 1.45vw, 1.22rem);
    font-weight: 800;
    font-style: italic;
    box-shadow:
        0 0.4rem 0.8rem rgba(42, 26, 10, 0.24),
        inset 0 0 0.7rem rgba(255, 248, 218, 0.18);
}

.postit-dialog-button--secondary {
    background: #d7be8a;
}

.postit-dialog-button--primary {
    background: #b8c99f;
}

.postit-dialog-button--archive {
    background: #ead8aa;
}

.postit-dialog-button--danger {
    color: #5f1717;
    background: #dfa8a0;
}

.postit-dialog-button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.62;
}

.postit-dialog-button:not(:disabled):hover,
.postit-dialog-button:not(:disabled):focus-visible,
.postit-dialog-close:hover,
.postit-dialog-close:focus-visible {
    filter: brightness(1.04);
    outline: 3px solid rgba(247, 237, 207, 0.78);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .data-backup-grid {
        grid-template-columns: 1fr;
    }

    .postit-color-options {
        grid-template-columns: 1fr 1fr;
    }

    .appointment-dialog-grid {
        grid-template-columns: 1fr 1fr;
    }

    .postit-dialog-actions {
        flex-direction: column-reverse;
    }

    .postit-dialog-actions--split,
    .postit-dialog-danger-zone,
    .postit-dialog-main-actions {
        width: 100%;
    }

    .postit-dialog-button {
        width: 100%;
    }
}

/* Figma vintage refresh */
.postit-dialog {
    border-color: rgba(91, 62, 26, 0.28);
    box-shadow:
        0 0.58rem 1.05rem rgba(47, 30, 12, 0.26),
        inset 0 0 1rem rgba(255, 248, 218, 0.18);
}

.postit-dialog-backdrop {
    backdrop-filter: blur(1.5px);
}

.postit-dialog {
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 12% 8%, rgba(255, 248, 215, 0.38), transparent 12rem),
        repeating-linear-gradient(102deg, rgba(72, 43, 13, 0.04) 0 2px, transparent 2px 9px),
        #d6c293;
}

.postit-dialog-header {
    min-height: 3.8rem;
    margin: -0.25rem -0.25rem clamp(0.95rem, 1.55vw, 1.25rem);
    padding: 0.4rem 0.5rem 0.4rem 1rem;
    background: #48515a;
    border-radius: 5px;
    box-shadow: 0 0.35rem 0.72rem rgba(28, 23, 18, 0.24);
}

.postit-dialog-header h2 {
    padding: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    font-family: var(--font-hand);
    font-size: clamp(1.9rem, 2.8vw, 2.5rem);
}

.postit-dialog-close {
    width: 2.6rem;
    height: 2.6rem;
    color: #f7edcf;
    background: rgba(31, 26, 18, 0.22);
    border: 0;
}

.postit-textarea,
.postit-date-input,
.appointment-input,
.appointment-notes {
    border: 0;
    background: #f4e8c8;
    border-radius: 5px;
    box-shadow: inset 0 0 0.5rem rgba(107, 72, 27, 0.08);
}

.postit-color-options {
    grid-template-columns: repeat(6, minmax(2.4rem, 1fr));
}

.postit-color-option {
    min-height: 2.75rem;
    justify-content: center;
    padding: 0.42rem;
}

.postit-color-option span:not(.postit-color-swatch) {
    display: none;
}

.postit-color-swatch {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 5px;
}

.postit-dialog-button {
    min-height: 3.1rem;
    min-width: 6.5rem;
    border-radius: 6px;
    font-family: var(--font-hand);
    font-size: clamp(1.35rem, 1.95vw, 1.75rem);
    font-style: normal;
}

/* Appointment dialog: closer to the Figma card. */
.appointment-dialog {
    width: min(94vw, 49rem);
    max-height: min(88vh, 43rem);
    overflow: hidden;
    padding: clamp(0.9rem, 1.35vw, 1.15rem);
    border-radius: 14px;
    clip-path: none;
}

.appointment-dialog .paper-pin {
    top: 0.1rem;
}

.appointment-dialog .postit-dialog-header {
    min-height: clamp(3.05rem, 4.1vw, 3.45rem);
    margin: 0 0 clamp(0.62rem, 0.95vw, 0.78rem);
    padding: 0.35rem 0.58rem 0.35rem clamp(0.85rem, 1.4vw, 1.1rem);
    border-radius: 4px;
}

.appointment-dialog .postit-dialog-header h2 {
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    line-height: 1;
}

.appointment-dialog .postit-dialog-form {
    gap: clamp(0.52rem, 0.82vw, 0.72rem);
    padding-inline: clamp(0.65rem, 1.2vw, 1.05rem);
}

.appointment-dialog-grid {
    grid-template-columns:
        minmax(11rem, 1fr)
        minmax(8.25rem, 0.72fr)
        minmax(12rem, 1.25fr);
    align-items: end;
}

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

.appointment-all-day-option {
    width: max-content;
    min-height: 2.25rem;
    align-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-style: normal;
}

.appointment-all-day-option input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: #48515a;
}

.appointment-dialog .appointment-input,
.appointment-dialog .appointment-notes {
    background: #f4e8c8;
    border: 1px solid rgba(82, 54, 23, 0.12);
    box-shadow: inset 0 0 0.45rem rgba(107, 72, 27, 0.06);
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
}

.appointment-dialog .appointment-input {
    min-height: clamp(2.65rem, 3.45vw, 3rem);
    padding-inline: clamp(0.85rem, 1.25vw, 1.1rem);
}

.appointment-dialog .appointment-notes {
    min-height: clamp(3.3rem, 5.1vw, 4rem);
}

.appointment-dialog .postit-color-field {
    gap: 0.65rem;
}

.appointment-dialog .postit-color-options {
    display: flex;
    align-items: center;
    gap: clamp(0.65rem, 1vw, 0.95rem);
}

.appointment-dialog .postit-color-option {
    width: clamp(2.25rem, 3.4vw, 2.85rem);
    height: clamp(2.25rem, 3.4vw, 2.85rem);
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.appointment-dialog .postit-color-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-dialog .postit-color-swatch {
    width: clamp(1.8rem, 2.6vw, 2.22rem);
    height: clamp(1.8rem, 2.6vw, 2.22rem);
    border-radius: 50%;
    border: 0;
    box-shadow: inset 0 0 0.35rem rgba(255, 255, 255, 0.18);
}

.appointment-dialog .postit-color-option:has(input:checked) {
    border: 0.22rem solid rgba(31, 26, 18, 0.58);
    box-shadow: 0 0 0 0.12rem rgba(247, 237, 207, 0.46);
}

.appointment-dialog .postit-color-swatch--yellow {
    background: #b65a12;
}

.appointment-dialog .postit-color-swatch--blue {
    background: #1f4c7c;
}

.appointment-dialog .postit-color-swatch--pink {
    background: #a3304a;
}

.appointment-dialog .postit-color-swatch--green {
    background: #26642f;
}

.appointment-dialog .postit-color-swatch--purple {
    background: #5c3d88;
}

.appointment-dialog .postit-color-swatch--beige {
    background: #7d4a1e;
}

.appointment-dialog .postit-field-footer {
    margin-top: -0.25rem;
}

.appointment-dialog .postit-dialog-button {
    min-height: 2.62rem;
    min-width: 5.8rem;
    padding-block: 0.42rem;
    font-size: clamp(1.18rem, 1.65vw, 1.48rem);
    line-height: 1;
}

.appointment-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 1.35vw, 1.1rem);
    margin-top: -0.12rem;
}

.appointment-dialog-footer .appointment-all-day-option {
    flex: 0 0 auto;
}

.appointment-dialog-actions {
    flex: 1 1 auto;
    margin: 0;
    justify-content: flex-end;
}

.appointment-dialog-footer--edit .appointment-dialog-actions {
    gap: clamp(0.6rem, 1vw, 0.85rem);
}

/* Post-it dialog: straight compact card matching the Figma mockup. */
.postit-note-dialog {
    width: min(94vw, 35rem);
    max-height: min(91vh, 32rem);
    overflow: hidden;
    padding: clamp(0.85rem, 1.35vw, 1.1rem) clamp(1.2rem, 1.85vw, 1.5rem) clamp(1.15rem, 1.8vw, 1.45rem);
    border-radius: 14px;
    clip-path: none;
}

.postit-note-dialog .paper-pin {
    top: 0.1rem;
}

.postit-note-dialog .postit-dialog-header {
    min-height: clamp(3.5rem, 5vw, 3.85rem);
    margin: 0 0 clamp(0.85rem, 1.35vw, 1.05rem);
    padding: 0.38rem 0.6rem 0.38rem clamp(0.95rem, 1.55vw, 1.25rem);
    border-radius: 4px;
}

.postit-note-dialog .postit-dialog-header h2 {
    font-size: clamp(1.65rem, 2.5vw, 2.18rem);
    line-height: 1;
}

.postit-note-dialog .postit-dialog-close {
    width: 2.35rem;
    height: 2.35rem;
}

.postit-note-dialog .postit-dialog-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(0.72rem, 1.1vw, 0.95rem) clamp(1rem, 1.8vw, 1.35rem);
    padding-inline: clamp(0.35rem, 0.75vw, 0.6rem);
}

.postit-note-dialog .postit-form-field:not(.postit-form-field--compact),
.postit-note-dialog .postit-color-field,
.postit-note-dialog .postit-dialog-message {
    grid-column: 1 / -1;
}

.postit-note-dialog .postit-form-field label,
.postit-note-dialog .postit-color-field legend {
    font-size: clamp(0.95rem, 1.25vw, 1.1rem);
    font-style: normal;
}

.postit-note-dialog .postit-textarea,
.postit-note-dialog .postit-date-input {
    background: #f4e8c8;
    border: 1px solid rgba(82, 54, 23, 0.12);
    box-shadow: inset 0 0 0.45rem rgba(107, 72, 27, 0.06);
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
}

.postit-note-dialog .postit-textarea {
    min-height: clamp(4.9rem, 8.8vw, 5.65rem);
    padding: 0.78rem 0.9rem;
    resize: none;
}

.postit-note-dialog .postit-date-input {
    width: min(100%, 13.7rem);
    min-height: 3.2rem;
    padding-inline: 0.85rem;
}

.postit-note-dialog .postit-field-footer {
    margin-top: -0.08rem;
}

.postit-note-dialog .postit-color-field {
    gap: 0.62rem;
}

.postit-note-dialog .postit-color-options {
    display: flex;
    align-items: center;
    gap: clamp(0.72rem, 1.15vw, 1rem);
}

.postit-note-dialog .postit-color-option {
    width: clamp(2.25rem, 3.4vw, 2.42rem);
    height: clamp(2.25rem, 3.4vw, 2.42rem);
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
}

.postit-note-dialog .postit-color-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.postit-note-dialog .postit-color-swatch {
    width: clamp(2.05rem, 3.1vw, 2.28rem);
    height: clamp(2.05rem, 3.1vw, 2.28rem);
    border-radius: 5px;
    border: 1px solid rgba(82, 54, 23, 0.2);
    box-shadow:
        inset 0 0 0.35rem rgba(255, 255, 255, 0.18),
        0 0.1rem 0.2rem rgba(47, 30, 12, 0.12);
}

.postit-note-dialog .postit-color-option:has(input:checked) {
    outline: 2px solid rgba(31, 26, 18, 0.42);
    outline-offset: 2px;
}

.postit-note-dialog .postit-form-field--compact {
    min-width: min(100%, 13.7rem);
}

.postit-note-dialog .postit-form-field--compact label::after {
    content: " opzionale";
}

.postit-note-dialog .postit-dialog-actions {
    margin: 0;
    align-self: end;
    justify-content: end;
}

.postit-note-dialog--edit {
    width: min(94vw, 42rem);
    max-height: min(91vh, 38rem);
}

.postit-note-dialog--edit .postit-dialog-actions--split {
    grid-column: 1 / -1;
}

/* Weather and backup dialogs: straight compact cards like the Figma dialogs. */
.weather-dialog,
.data-backup-dialog {
    overflow: hidden;
    border-radius: 14px;
    clip-path: none;
}

.weather-dialog {
    width: min(94vw, 37rem);
    max-height: min(91vh, 28rem);
    padding: clamp(0.9rem, 1.45vw, 1.15rem) clamp(1rem, 1.65vw, 1.35rem) clamp(1.05rem, 1.65vw, 1.3rem);
}

.data-backup-dialog {
    width: min(94vw, 45rem);
    max-height: min(91vh, 34rem);
    padding: clamp(0.95rem, 1.5vw, 1.2rem) clamp(1.05rem, 1.75vw, 1.4rem) clamp(1.1rem, 1.7vw, 1.35rem);
}

.weather-dialog .paper-pin,
.data-backup-dialog .paper-pin {
    top: 0.1rem;
}

.weather-dialog .postit-dialog-header,
.data-backup-dialog .postit-dialog-header {
    min-height: clamp(3.65rem, 5.1vw, 4.05rem);
    margin: 0 0 clamp(0.9rem, 1.45vw, 1.15rem);
    padding: 0.38rem 0.6rem 0.38rem clamp(0.95rem, 1.55vw, 1.25rem);
    border-radius: 4px;
}

.weather-dialog .postit-dialog-header h2,
.data-backup-dialog .postit-dialog-header h2 {
    font-size: clamp(1.85rem, 2.8vw, 2.38rem);
    line-height: 1;
}

.weather-dialog .postit-dialog-close,
.data-backup-dialog .postit-dialog-close {
    width: 2.35rem;
    height: 2.35rem;
}

.weather-dialog .postit-dialog-form,
.data-backup-dialog .data-backup-grid,
.data-backup-dialog > .postit-dialog-message,
.data-backup-dialog > .postit-dialog-actions {
    margin-inline: clamp(0.2rem, 0.65vw, 0.45rem);
}

.weather-dialog .postit-dialog-form {
    gap: clamp(0.95rem, 1.45vw, 1.2rem);
}

.weather-dialog .weather-location-grid {
    gap: clamp(0.85rem, 1.3vw, 1rem);
}

.weather-dialog .appointment-input {
    min-height: clamp(3.15rem, 4.7vw, 3.45rem);
    background: #f4e8c8;
    border: 1px solid rgba(82, 54, 23, 0.12);
    box-shadow: inset 0 0 0.45rem rgba(107, 72, 27, 0.06);
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
}

.weather-dialog .postit-dialog-actions {
    margin-top: clamp(0.2rem, 0.6vw, 0.35rem);
}

.data-backup-dialog .data-backup-grid {
    gap: clamp(0.85rem, 1.35vw, 1.05rem);
}

.data-backup-dialog .data-backup-panel {
    min-height: clamp(11.5rem, 18vw, 13rem);
    padding: clamp(0.82rem, 1.25vw, 1rem);
    border-radius: 7px;
    background:
        linear-gradient(145deg, rgba(255, 250, 224, 0.48), transparent 58%),
        repeating-linear-gradient(94deg, rgba(82, 53, 20, 0.035) 0 2px, transparent 2px 8px),
        rgba(255, 248, 218, 0.32);
}

.data-backup-dialog .data-backup-panel h3 {
    font-size: clamp(1.18rem, 1.7vw, 1.42rem);
}

.data-backup-dialog .data-backup-panel p,
.data-backup-dialog .data-backup-file-name {
    font-size: clamp(0.96rem, 1.18vw, 1.05rem);
}

.data-backup-dialog .data-backup-file-picker {
    min-height: 4.1rem;
    align-content: center;
    border-style: dashed;
    background: rgba(255, 248, 218, 0.3);
}

.data-backup-dialog .postit-dialog-actions {
    margin-top: clamp(0.65rem, 1.2vw, 0.9rem);
}

@media (max-width: 900px) {
    .postit-color-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .appointment-dialog-grid {
        grid-template-columns: 1fr;
    }

    .appointment-dialog {
        overflow: auto;
    }

    .appointment-dialog .postit-color-options {
        flex-wrap: wrap;
    }

    .appointment-dialog-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .appointment-dialog-actions,
    .appointment-dialog-footer--edit .appointment-dialog-actions,
    .appointment-dialog .postit-dialog-main-actions,
    .appointment-dialog .postit-dialog-danger-zone {
        width: 100%;
    }

    .postit-note-dialog {
        overflow: auto;
    }

    .weather-dialog,
    .data-backup-dialog {
        overflow: auto;
    }

    .postit-note-dialog .postit-dialog-form {
        grid-template-columns: 1fr;
    }

    .postit-note-dialog .postit-dialog-actions {
        justify-content: stretch;
    }
}

@media (min-width: 900px) and (max-width: 1100px) and (max-height: 620px) and (orientation: landscape) {
    .postit-dialog-backdrop {
        padding: 0.34rem;
    }

    .postit-dialog,
    .appointment-dialog,
    .postit-note-dialog,
    .weather-dialog,
    .data-backup-dialog {
        max-height: calc(100dvh - 0.68rem);
        overflow: auto;
        border-radius: 10px;
    }

    .appointment-dialog {
        width: min(97vw, 47rem);
        padding: 0.58rem 0.72rem 0.68rem;
    }

    .appointment-dialog .paper-pin,
    .postit-note-dialog .paper-pin,
    .weather-dialog .paper-pin,
    .data-backup-dialog .paper-pin {
        top: 0.05rem;
    }

    .appointment-dialog .postit-dialog-header,
    .postit-note-dialog .postit-dialog-header,
    .weather-dialog .postit-dialog-header,
    .data-backup-dialog .postit-dialog-header {
        min-height: 2.5rem;
        margin-bottom: 0.42rem;
        padding: 0.22rem 0.42rem 0.22rem 0.72rem;
    }

    .appointment-dialog .postit-dialog-header h2,
    .postit-note-dialog .postit-dialog-header h2,
    .weather-dialog .postit-dialog-header h2,
    .data-backup-dialog .postit-dialog-header h2 {
        font-size: 1.45rem;
    }

    .postit-dialog-close,
    .appointment-dialog .postit-dialog-close,
    .postit-note-dialog .postit-dialog-close,
    .weather-dialog .postit-dialog-close,
    .data-backup-dialog .postit-dialog-close {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 1.45rem;
    }

    .postit-dialog-form,
    .appointment-dialog .postit-dialog-form,
    .postit-note-dialog .postit-dialog-form,
    .weather-dialog .postit-dialog-form {
        gap: 0.48rem;
    }

    .appointment-dialog-grid {
        grid-template-columns: minmax(8.5rem, 1fr) minmax(7.1rem, 0.74fr) minmax(7.1rem, 0.74fr) minmax(7.6rem, 0.85fr);
        gap: 0.45rem;
    }

    .postit-form-field label,
    .postit-color-field legend,
    .postit-note-dialog .postit-form-field label,
    .postit-note-dialog .postit-color-field legend {
        font-size: 0.86rem;
    }

    .appointment-input,
    .appointment-dialog .appointment-input,
    .weather-dialog .appointment-input {
        min-height: 2.45rem;
        padding: 0.34rem 0.5rem;
        font-size: 0.96rem;
    }

    .appointment-form-field--date .appointment-input,
    .appointment-form-field--time .appointment-input {
        font-size: 0.88rem;
        padding-inline: 0.42rem;
    }

    .appointment-dialog .appointment-notes {
        min-height: 4.1rem;
        padding: 0.45rem 0.55rem;
        font-size: 0.94rem;
    }

    .postit-note-dialog {
        width: min(94vw, 33rem);
        padding: 0.56rem 0.72rem 0.72rem;
    }

    .postit-note-dialog .postit-dialog-form {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.42rem 0.74rem;
    }

    .postit-note-dialog .postit-textarea {
        min-height: 4.25rem;
        padding: 0.5rem 0.58rem;
        font-size: 1rem;
    }

    .postit-note-dialog .postit-date-input {
        min-height: 2.45rem;
        width: 12.2rem;
        padding-inline: 0.58rem;
        font-size: 0.92rem;
    }

    .postit-note-dialog .postit-color-options {
        gap: 0.46rem;
    }

    .postit-note-dialog .postit-color-option {
        width: 1.85rem;
        height: 1.85rem;
    }

    .postit-note-dialog .postit-color-swatch {
        width: 1.62rem;
        height: 1.62rem;
    }

    .appointment-dialog .postit-color-options {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.36rem;
    }

    .appointment-dialog .postit-color-option {
        min-height: 2.35rem;
        padding: 0.3rem;
        justify-content: center;
    }

    .appointment-dialog .postit-color-option span:not(.postit-color-swatch) {
        display: none;
    }

    .appointment-dialog .postit-color-swatch {
        width: 1.52rem;
        height: 1.52rem;
    }

    .appointment-dialog-footer {
        gap: 0.48rem;
    }

    .appointment-all-day-option,
    .appointment-dialog-footer .appointment-all-day-option {
        min-height: 2.45rem;
        padding: 0.36rem 0.5rem;
        font-size: 0.86rem;
    }

    .postit-dialog-actions,
    .appointment-dialog-actions,
    .appointment-dialog-footer--edit .appointment-dialog-actions,
    .postit-dialog-danger-zone,
    .postit-dialog-main-actions {
        gap: 0.45rem;
    }

    .postit-dialog-button,
    .appointment-dialog .postit-dialog-button {
        min-height: 2.45rem;
        min-width: 5.9rem;
        padding: 0.38rem 0.62rem;
        font-size: 0.94rem;
    }

    .weather-dialog {
        width: min(94vw, 35rem);
        padding: 0.6rem 0.72rem 0.72rem;
    }

    .weather-dialog .weather-location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.62rem;
    }

    .data-backup-dialog {
        width: min(94vw, 42rem);
        padding: 0.6rem 0.72rem 0.72rem;
    }

    .data-backup-dialog .data-backup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.58rem;
    }

    .data-backup-dialog .data-backup-panel {
        min-height: 8.8rem;
        padding: 0.58rem;
        gap: 0.42rem;
    }

    .data-backup-dialog .data-backup-panel h3 {
        font-size: 1rem;
    }

    .data-backup-dialog .data-backup-panel p,
    .data-backup-dialog .data-backup-file-name {
        font-size: 0.78rem;
        line-height: 1.08;
    }

    .data-backup-dialog .data-backup-file-picker {
        min-height: 2.72rem;
        padding: 0.42rem 0.5rem;
    }

    .postit-dialog-message {
        padding: 0.36rem 0.5rem;
        font-size: 0.84rem;
    }

    .login-shell {
        min-height: 100dvh;
        padding: 0.3rem;
    }

    .login-paper {
        width: min(100%, 42rem);
        min-height: calc(100dvh - 0.6rem);
        padding: 0.7rem;
    }

    .login-card {
        width: min(100%, 28rem);
        padding: 0.9rem;
    }

    .login-card h1 {
        margin-bottom: 0.45rem;
        padding: 0.28rem 0.86rem;
        font-size: 1.65rem;
    }

    .login-card p,
    .login-form label,
    .login-form .login-remember-option {
        font-size: 0.9rem;
    }

    .login-form {
        gap: 0.48rem;
    }

    .login-form input,
    .login-form button {
        min-height: 2.58rem;
        font-size: 0.98rem;
    }
}