:root[data-theme="comfort"] {
    --app-bg: #202124;
    --surface: #202124;
    --surface-container: #282a2f;
    --surface-container-high: #32343a;
    --surface-container-highest: #3d4047;
    --on-surface: #f4f5f7;
    --on-surface-variant: #c5c8d0;
    --outline: rgba(255, 255, 255, 0.16);
    --primary: #4d9fff;
    --glass: rgba(40, 42, 47, 0.76);
    --input-bg: #303239;
    --shadow: rgba(0, 0, 0, 0.36);
    color-scheme: dark;
}

:root[data-theme="dark"] {
    --app-bg: #111214;
    --surface: #111214;
    --surface-container: #1c1d20;
    --surface-container-high: #282a2e;
    --surface-container-highest: #35373d;
    --on-surface: #ffffff;
    --on-surface-variant: #c8cad0;
    --outline: rgba(255, 255, 255, 0.16);
    --primary: #007aff;
    --glass: rgba(28, 29, 32, 0.74);
    --input-bg: #2d2f34;
    --shadow: rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}

:root[data-theme="oled"] {
    --app-bg: #000000;
    --surface: #000000;
    --surface-container: #09090b;
    --surface-container-high: #141416;
    --surface-container-highest: #222226;
    --on-surface: #ffffff;
    --on-surface-variant: #c7c7cc;
    --outline: rgba(255, 255, 255, 0.18);
    --primary: #0a84ff;
    --glass: rgba(8, 8, 10, 0.82);
    --input-bg: #151518;
    --shadow: rgba(0, 0, 0, 0.65);
    color-scheme: dark;
}

:root[data-theme="midnight"] {
    --app-bg: #07111f;
    --surface: #07111f;
    --surface-container: #0d1a2d;
    --surface-container-high: #14243a;
    --surface-container-highest: #1d3150;
    --on-surface: #eef6ff;
    --on-surface-variant: #b8c7da;
    --outline: rgba(173, 205, 255, 0.18);
    --primary: #5aa7ff;
    --glass: rgba(13, 26, 45, 0.78);
    --input-bg: #14243a;
    --shadow: rgba(0, 4, 18, 0.5);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --app-bg: #f4f6fb;
    --surface: #f4f6fb;
    --surface-container: #ffffff;
    --surface-container-high: #eef1f7;
    --surface-container-highest: #e1e6ef;
    --on-surface: #151821;
    --on-surface-variant: #596171;
    --outline: rgba(20, 27, 40, 0.16);
    --primary: #007aff;
    --glass: rgba(255, 255, 255, 0.82);
    --input-bg: #ffffff;
    --shadow: rgba(20, 27, 40, 0.12);
    color-scheme: light;
}

:root {
    --app-surface: var(--surface);
    --app-surface-container: var(--surface-container);
    --app-surface-container-high: var(--surface-container-high);
    --app-surface-container-highest: var(--surface-container-highest);
    --app-on-surface: var(--on-surface);
    --app-on-surface-variant: var(--on-surface-variant);
    --app-outline: var(--outline);
    --app-glass: var(--glass);
    --app-input: var(--input-bg);
    --app-input-text: var(--on-surface);
    --app-shadow: var(--shadow);
    --color-lavoro: #22c55e;
    --color-uscita: #ef4444;
    --color-pausa: #eab308;
    --color-straordinario: #06b6d4;
    --color-banca-ore: #3b82f6;
    --color-ferie-permesso: #6366f1;
    --color-ferie: #6366f1;
    --color-permessi: #0ea5e9;
    --color-utilizzo-banca-ore: #14b8a6;
    --color-mutua: #f97316;
    --color-reperibilita: #a855f7;
    --color-reperibilita-notturna: #4338ca;
    --color-intervento-reperibilita: #ec4899;
    --color-intervento-reperibilita-notturna: #7c3aed;
    --color-ticket-reperibilita: #f43f5e;
    --color-ticket-reperibilita-notturna: #8b5cf6;
    --color-festivo-pagato: #f59e0b;
    --color-non-assegnato: #dc2626;
    --color-anomalia: #fbbf24;
    --color-riposo-non-lavorativo: #64748b;
    --color-neutro: #9ca3af;
    --color-saldo-positivo: #22c55e;
    --color-saldo-negativo: #ef4444;
}

body,
.bg-surface,
.bg-background {
    background-color: var(--app-bg) !important;
    color: var(--on-surface) !important;
}

#app-shell {
    min-height: 100dvh;
}

body.mobile-landscape-lock {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
}

html.mobile-landscape-lock,
body.mobile-landscape-lock {
    overflow: hidden;
}

body.mobile-landscape-lock #app-shell {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 100dvh;
    height: 100dvw;
    min-height: 100dvw;
    max-height: 100dvw;
    overflow: hidden;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
}

body.mobile-landscape-lock #app-shell > .app-container {
    height: 100dvw;
    max-height: 100dvw;
}

body.mobile-landscape-lock #app-shell .calendar-register-overlay,
body.mobile-landscape-lock #app-shell .auth-screen {
    width: 100%;
    height: 100%;
}

.auth-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 36%),
        var(--app-bg);
}

.auth-screen.is-hidden {
    display: none;
}

.login-card {
    width: min(100%, 390px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 26px 20px 22px;
    border: 1px solid var(--outline);
    border-radius: 24px;
}

.login-brand {
    width: 58px;
    height: 58px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 16%, var(--surface-container-high));
    border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
}

.login-brand .material-symbols-outlined {
    font-size: 28px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--on-surface-variant);
    font-size: 11px;
    font-weight: 600;
}

.login-field input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--outline);
    border-radius: 13px;
    background: var(--input-bg);
    color: var(--on-surface);
    font-size: 16px;
}

.login-field input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 1px;
    border-color: var(--primary);
}

.login-submit {
    min-height: 48px;
    margin-top: 3px;
    border: 0;
    border-radius: 13px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.login-submit:disabled {
    opacity: 0.65;
}

.login-feedback {
    min-height: 18px;
    color: var(--color-uscita);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.login-offline-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--on-surface-variant);
    font-size: 11px;
}

.login-offline-note .material-symbols-outlined {
    font-size: 16px;
}

.calendar-register-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
}

.calendar-register-overlay.is-hidden {
    display: none;
}

.calendar-register-overlay-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.calendar-register-overlay-content {
    position: relative;
    width: min(100%, 430px);
    max-height: calc(100dvh - max(28px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.calendar-register-overlay-content #inline-movement-editor {
    margin: 0;
}

.bg-surface\/80 {
    background-color: color-mix(in srgb, var(--surface) 80%, transparent) !important;
}

.glass-card {
    background: var(--glass) !important;
    border-color: var(--outline) !important;
    box-shadow: 0 10px 28px var(--shadow);
}

.bg-surface-container,
.bg-card {
    background-color: var(--surface-container) !important;
}

.bg-surface-container-high,
.bg-surface-container-high\/70 {
    background-color: var(--surface-container-high) !important;
}

.bg-surface-container-highest {
    background-color: var(--surface-container-highest) !important;
}

.text-on-surface,
.text-on-background {
    color: var(--on-surface) !important;
}

.text-on-surface-variant {
    color: var(--on-surface-variant) !important;
}

.border-outline\/20,
.border-outline\/10,
.border-outline {
    border-color: var(--outline) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.border-primary,
.border-primary\/20 {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

.text-green-300,
.text-green-400,
.text-green-500 {
    color: var(--color-lavoro) !important;
}

.bg-green-500,
.bg-green-500\/10,
.bg-green-500\/15 {
    background-color: color-mix(in srgb, var(--color-lavoro) 18%, transparent) !important;
}

.bg-green-500 {
    background-color: var(--color-lavoro) !important;
}

.border-green-500\/20,
.border-green-500\/30,
.border-green-500\/40 {
    border-color: color-mix(in srgb, var(--color-lavoro) 42%, transparent) !important;
}

.text-red-300,
.text-red-400,
.text-red-500,
.text-error {
    color: var(--color-uscita) !important;
}

.bg-red-500,
.bg-red-500\/15,
.bg-error,
.bg-error\/10,
.bg-error\/15 {
    background-color: color-mix(in srgb, var(--color-uscita) 18%, transparent) !important;
}

.bg-red-500,
.bg-error {
    background-color: var(--color-uscita) !important;
}

.border-red-500\/40,
.border-error\/20,
.border-error\/25,
.border-error\/30 {
    border-color: color-mix(in srgb, var(--color-uscita) 42%, transparent) !important;
}

.text-yellow-400,
.text-yellow-500,
.text-amber-300,
.text-amber-400,
.text-amber-500 {
    color: var(--color-pausa) !important;
}

.bg-yellow-500,
.bg-yellow-500\/15,
.bg-amber-500,
.bg-amber-500\/10,
.bg-amber-500\/15 {
    background-color: color-mix(in srgb, var(--color-pausa) 18%, transparent) !important;
}

.bg-yellow-500,
.bg-amber-500 {
    background-color: var(--color-pausa) !important;
}

.border-yellow-500\/30,
.border-yellow-500\/40,
.border-amber-500\/20 {
    border-color: color-mix(in srgb, var(--color-pausa) 42%, transparent) !important;
}

.text-cyan-300,
.text-cyan-400 {
    color: var(--color-straordinario) !important;
}

.bg-cyan-400,
.bg-cyan-500\/15 {
    background-color: color-mix(in srgb, var(--color-straordinario) 18%, transparent) !important;
}

.bg-cyan-400 {
    background-color: var(--color-straordinario) !important;
}

.text-primary {
    color: var(--color-banca-ore) !important;
}

.bg-primary,
.bg-primary\/10,
.bg-primary\/15 {
    background-color: color-mix(in srgb, var(--color-banca-ore) 18%, transparent) !important;
}

.bg-primary {
    background-color: var(--color-banca-ore) !important;
}

.border-primary,
.border-primary\/20 {
    border-color: color-mix(in srgb, var(--color-banca-ore) 42%, transparent) !important;
}

.text-blue-300,
.text-blue-400,
.text-blue-500 {
    color: var(--color-ferie-permesso) !important;
}

.bg-blue-500,
.bg-blue-500\/15 {
    background-color: color-mix(in srgb, var(--color-ferie-permesso) 18%, transparent) !important;
}

.bg-blue-500 {
    background-color: var(--color-ferie-permesso) !important;
}

.text-orange-300,
.text-orange-400,
.text-orange-500 {
    color: var(--color-mutua) !important;
}

.bg-orange-500,
.bg-orange-500\/15 {
    background-color: color-mix(in srgb, var(--color-mutua) 18%, transparent) !important;
}

.bg-orange-500 {
    background-color: var(--color-mutua) !important;
}

.border-orange-500\/40 {
    border-color: color-mix(in srgb, var(--color-mutua) 42%, transparent) !important;
}

.text-purple-300,
.text-purple-400,
.text-purple-500 {
    color: var(--color-reperibilita) !important;
}

.bg-purple-500,
.bg-purple-500\/10,
.bg-purple-500\/15 {
    background-color: color-mix(in srgb, var(--color-reperibilita) 18%, transparent) !important;
}

.bg-purple-500 {
    background-color: var(--color-reperibilita) !important;
}

.border-purple-500\/20 {
    border-color: color-mix(in srgb, var(--color-reperibilita) 42%, transparent) !important;
}

.text-fuchsia-300,
.text-fuchsia-400,
.text-fuchsia-500 {
    color: var(--color-intervento-reperibilita) !important;
}

.bg-fuchsia-500,
.bg-fuchsia-500\/15 {
    background-color: color-mix(in srgb, var(--color-intervento-reperibilita) 18%, transparent) !important;
}

.bg-fuchsia-500 {
    background-color: var(--color-intervento-reperibilita) !important;
}

.text-gray-500,
.text-slate-300,
.text-slate-500,
.text-slate-600 {
    color: var(--color-neutro) !important;
}

.bg-gray-500,
.bg-slate-500,
.bg-slate-500\/15,
.bg-slate-600 {
    background-color: color-mix(in srgb, var(--color-neutro) 18%, transparent) !important;
}

.bg-gray-500,
.bg-slate-500,
.bg-slate-600 {
    background-color: var(--color-neutro) !important;
}

.setting-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--outline);
    border-radius: 12px;
    background-color: var(--surface-container-high);
    color: var(--on-surface);
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
}

.setting-color-row > span {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.15;
}

.setting-color-row input[type="color"] {
    width: 38px;
    height: 30px;
    min-height: 30px;
    border-radius: 999px !important;
    padding: 2px !important;
    cursor: pointer;
    flex: 0 0 38px;
}

.calendar-dot-lavoro { background-color: var(--color-lavoro) !important; }
.calendar-dot-uscita { background-color: var(--color-uscita) !important; }
.calendar-dot-pausa { background-color: var(--color-pausa) !important; }
.calendar-dot-straordinario { background-color: var(--color-straordinario) !important; }
.calendar-dot-banca-ore { background-color: var(--color-banca-ore) !important; }
.calendar-dot-ferie { background-color: var(--color-ferie) !important; }
.calendar-dot-permessi { background-color: var(--color-permessi) !important; }
.calendar-dot-utilizzo-banca-ore { background-color: var(--color-utilizzo-banca-ore) !important; }
.calendar-dot-mutua { background-color: var(--color-mutua) !important; }
.calendar-dot-reperibilita { background-color: var(--color-reperibilita) !important; }
.calendar-dot-reperibilita-notturna { background-color: var(--color-reperibilita-notturna) !important; }
.calendar-dot-intervento-reperibilita { background-color: var(--color-intervento-reperibilita) !important; }
.calendar-dot-intervento-reperibilita-notturna { background-color: var(--color-intervento-reperibilita-notturna) !important; }
.calendar-dot-ticket-reperibilita { background-color: var(--color-ticket-reperibilita) !important; }
.calendar-dot-ticket-reperibilita-notturna { background-color: var(--color-ticket-reperibilita-notturna) !important; }
.calendar-dot-festivo-pagato { background-color: var(--color-festivo-pagato) !important; }
.calendar-dot-non-assegnato { background-color: var(--color-non-assegnato) !important; }
.calendar-dot-anomalia { background-color: var(--color-anomalia) !important; }
.calendar-dot-riposo { background-color: var(--color-riposo-non-lavorativo) !important; }
.calendar-dot-neutro { background-color: var(--color-neutro) !important; }

.calendar-badge-lavoro { --calendar-badge-color: var(--color-lavoro); }
.calendar-badge-riposo { --calendar-badge-color: var(--color-riposo-non-lavorativo); }
.calendar-badge-anomalia { --calendar-badge-color: var(--color-anomalia); }
.calendar-badge-straordinario { --calendar-badge-color: var(--color-straordinario); }
.calendar-badge-banca-ore { --calendar-badge-color: var(--color-banca-ore); }
.calendar-badge-utilizzo-banca-ore { --calendar-badge-color: var(--color-utilizzo-banca-ore); }
.calendar-badge-ferie { --calendar-badge-color: var(--color-ferie); }
.calendar-badge-permessi { --calendar-badge-color: var(--color-permessi); }
.calendar-badge-mutua { --calendar-badge-color: var(--color-mutua); }
.calendar-badge-reperibilita { --calendar-badge-color: var(--color-reperibilita); }
.calendar-badge-reperibilita-notturna { --calendar-badge-color: var(--color-reperibilita-notturna); }
.calendar-badge-intervento-reperibilita { --calendar-badge-color: var(--color-intervento-reperibilita); }
.calendar-badge-intervento-reperibilita-notturna { --calendar-badge-color: var(--color-intervento-reperibilita-notturna); }
.calendar-badge-ticket-reperibilita { --calendar-badge-color: var(--color-ticket-reperibilita); }
.calendar-badge-ticket-reperibilita-notturna { --calendar-badge-color: var(--color-ticket-reperibilita-notturna); }
.calendar-badge-festivo-pagato { --calendar-badge-color: var(--color-festivo-pagato); }
.calendar-badge-non-assegnato { --calendar-badge-color: var(--color-non-assegnato); }
.calendar-badge-neutro { --calendar-badge-color: var(--color-neutro); }

[class*="calendar-badge-"] {
    color: var(--calendar-badge-color) !important;
    background-color: color-mix(in srgb, var(--calendar-badge-color) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--calendar-badge-color) 28%, transparent) !important;
}

.calendar-movement-icon {
    background-color: color-mix(in srgb, var(--movement-color, var(--color-neutro)) 16%, transparent) !important;
    color: var(--movement-color, var(--color-neutro)) !important;
}

.calendar-movement-value {
    color: var(--movement-color, var(--color-neutro)) !important;
}

.widget-home-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--widget-icon-color, var(--color-neutro)) 22%, transparent);
    color: var(--widget-icon-color, var(--color-neutro));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--widget-icon-color, var(--color-neutro)) 24%, transparent);
}

.widget-home-icon .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

#widget-reperibilita-value {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: clamp(11px, 3.1vw, 13px) !important;
    line-height: 1.08 !important;
}

.reperibilita-card-value {
    display: block;
    font-size: 18px;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: pre-line;
    text-overflow: ellipsis;
}

@media (max-width: 430px) {
    .reperibilita-card-value {
        font-size: 16px;
    }
}

.bottom-nav-item {
    min-width: 58px;
    padding: 6px 7px;
    border: 1px solid color-mix(in srgb, var(--outline) 62%, transparent);
    border-radius: 16px;
    background-color: color-mix(in srgb, var(--surface-container-high) 46%, transparent);
    color: var(--on-surface-variant) !important;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.bottom-nav-item.is-active {
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 54%, transparent);
    background-color: color-mix(in srgb, var(--primary) 16%, var(--surface-container-high));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--on-surface) 12%, transparent),
        0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}

.bottom-nav-item.is-active .material-symbols-outlined {
    font-variation-settings: "FILL" 1;
}

.calendar-summary-widget {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-summary-widget .summary-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--summary-color, var(--color-neutro)) 20%, transparent);
    color: var(--summary-color, var(--color-neutro));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--summary-color, var(--color-neutro)) 24%, transparent);
}

.calendar-summary-widget .summary-icon .material-symbols-outlined {
    font-size: 17px;
    line-height: 1;
}

.calendar-summary-widget p:last-child {
    color: var(--summary-color, var(--color-neutro)) !important;
    white-space: nowrap;
}

#calendar-detail-paid-holiday-card {
    min-width: 0;
    min-height: 64px;
    overflow: hidden;
}

#calendar-detail-paid-holiday-card .calendar-summary-content,
#calendar-detail-paid-holiday {
    min-width: 0;
    max-width: 100%;
}

#calendar-detail-paid-holiday {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

#calendar-detail-paid-holiday .paid-holiday-status,
#calendar-detail-paid-holiday .paid-holiday-duration {
    display: block;
    max-width: 100%;
    white-space: nowrap;
}

#calendar-detail-paid-holiday .paid-holiday-status {
    font-size: 12px;
    font-weight: 700;
}

#calendar-detail-paid-holiday .paid-holiday-duration {
    font-size: 10px;
    font-weight: 600;
    color: var(--on-surface-variant);
}

.home-progress-ring {
    width: min(282px, 78vw);
    height: min(282px, 78vw);
    overflow: visible;
    display: block;
}

#home-main > section:first-of-type {
    min-height: 292px;
}

.home-progress-ring circle {
    stroke-width: 10px;
}

.home-ring-content {
    width: min(206px, 58vw);
    text-align: center;
    gap: 3px;
    padding: 0 10px;
}

#digital-clock {
    max-width: 100%;
    font-size: clamp(22px, 6.2vw, 34px) !important;
    white-space: nowrap;
    letter-spacing: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.02 !important;
}

.home-ring-time-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    max-width: 100%;
    line-height: 1;
}

.home-ring-time-main {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    font-size: inherit;
    line-height: 1;
}

.home-ring-time-seconds {
    display: block;
    max-width: 100%;
    color: var(--on-surface-variant);
    font-size: clamp(11px, 3vw, 15px) !important;
    font-weight: 600;
    line-height: 1;
    opacity: 0.72;
    white-space: nowrap;
}

#remaining-time,
.home-ring-extra {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-ring-extra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.12;
}

.home-overtime-target {
    margin: 0;
    padding: 2px 8px 0;
    color: var(--color-straordinario);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}

input,
textarea,
select {
    background-color: var(--input-bg) !important;
    color: var(--on-surface) !important;
    border-color: var(--outline) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--on-surface-variant) !important;
}

button.bg-surface-container-high,
button.bg-surface-container-highest,
.calendar-inline-editor,
#inline-movement-editor,
#extra-allocation-panel,
#calendar-edit-menu,
#calendar-form,
#home-time-editor {
    background-color: var(--surface-container) !important;
    color: var(--on-surface) !important;
    border-color: var(--outline) !important;
}

#inline-movement-editor,
#extra-allocation-panel,
#calendar-edit-menu,
#calendar-form,
#home-time-editor,
.calendar-inline-editor {
    border-radius: 16px !important;
    box-shadow: 0 12px 32px var(--shadow);
}

#bottom-nav,
header,
#home-header {
    background-color: color-mix(in srgb, var(--surface) 86%, transparent) !important;
    color: var(--on-surface) !important;
    border-color: var(--outline) !important;
}

#home-header:empty {
    display: none !important;
}

.home-card-header {
    padding: 7px 2px 0;
}

#bottom-nav {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 0;
    z-index: 40;
    width: min(100%, 430px);
    transform: translateX(-50%);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

#home-main {
    padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(118px + env(safe-area-inset-bottom));
    scrollbar-width: none;
}

#home-main::-webkit-scrollbar {
    display: none;
}

@media (max-width: 480px) {
    #home-main {
        gap: 5px !important;
        overflow-y: hidden !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .home-actions-section {
        gap: 4px !important;
    }

    .home-actions-section h2 {
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    .home-actions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    .home-action-button {
        height: 54px !important;
        max-height: 58px !important;
        min-height: 0 !important;
        padding: 4px 6px !important;
        gap: 2px !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    .home-action-button > div {
        width: 24px !important;
        height: 24px !important;
    }

    .home-action-button .material-symbols-outlined {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .home-action-button span:last-child {
        font-size: 10px !important;
        line-height: 1.05 !important;
        white-space: nowrap;
    }
}

#settings-screen,
#history-screen,
#calendar-screen,
#documents-screen {
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}

#documents-screen .glass-card,
#paycheck-estimate-result {
    overflow: hidden;
}

#paycheck-real-net {
    display: block;
    max-width: 100%;
}

@media (max-width: 480px) and (max-height: 760px) {
    #home-header > div {
        padding-top: 22px !important;
        padding-bottom: 4px !important;
    }

    #home-main {
        gap: 4px !important;
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        overflow-y: hidden !important;
    }

    .home-status-card {
        min-height: 198px !important;
        padding: 6px !important;
    }

    .home-status-card > .relative {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .home-progress-ring {
        width: min(190px, 56vw) !important;
        height: min(190px, 56vw) !important;
    }

    #home-main > section:first-of-type {
        min-height: 198px !important;
    }

    .home-progress-ring circle {
        stroke-width: 8px !important;
    }

    .home-ring-content {
        width: min(148px, 44vw) !important;
        gap: 1px !important;
        padding: 0 8px !important;
    }

    #digital-clock {
        font-size: clamp(20px, 5.4vw, 28px) !important;
    }

    #remaining-time,
    .home-ring-extra {
        font-size: 10px !important;
        line-height: 1.08 !important;
    }

    .home-widget-grid {
        gap: 4px !important;
    }

    .home-widget-grid .glass-card {
        padding: 6px 8px !important;
        min-height: 42px;
    }

    .home-widget-grid span[id$="-title"] {
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    .home-widget-grid span[id$="-value"] {
        font-size: 13px !important;
        line-height: 1.1 !important;
    }

    .home-shift-card {
        padding: 7px !important;
        gap: 4px !important;
    }

    .home-shift-card h2 {
        font-size: 12px !important;
    }

    .home-shift-card [id^="shift-"] {
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    .home-overtime-target {
        padding-top: 1px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .home-shift-card .uppercase {
        font-size: 9px !important;
        line-height: 1.05 !important;
    }

    .home-actions-section {
        gap: 4px !important;
    }

    .home-actions-section h2 {
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    .home-actions-grid {
        gap: 4px !important;
    }

    .home-action-button {
        min-height: 54px;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        gap: 3px !important;
    }

    .home-action-button > div {
        width: 28px !important;
        height: 28px !important;
    }

    .home-action-button .material-symbols-outlined {
        font-size: 20px !important;
    }

    .home-action-button span:last-child {
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    #bottom-nav {
        padding-top: 4px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    .bottom-nav-item {
        min-height: 44px !important;
        padding: 4px 6px !important;
    }
}

@media (max-width: 380px) and (max-height: 700px) {
    .home-progress-ring {
        width: min(176px, 52vw) !important;
        height: min(176px, 52vw) !important;
    }

    .home-status-card,
    #home-main > section:first-of-type {
        min-height: 184px !important;
    }

    .home-action-button {
        min-height: 50px;
    }
}

#inline-movement-editor label:has(input[type="checkbox"]),
#extra-allocation-panel label:has(input[type="checkbox"]),
#calendar-edit-menu label:has(input[type="checkbox"]),
#calendar-form label:has(input[type="checkbox"]),
#home-time-editor label:has(input[type="checkbox"]),
.calendar-inline-editor label:has(input[type="checkbox"]) {
    background-color: var(--surface-container-high) !important;
    color: var(--on-surface) !important;
    border-color: var(--outline) !important;
}

#inline-movement-editor label:not(:has(input[type="checkbox"])),
#extra-allocation-panel label:not(:has(input[type="checkbox"])),
#calendar-edit-menu label:not(:has(input[type="checkbox"])),
#calendar-form label:not(:has(input[type="checkbox"])),
#home-time-editor label:not(:has(input[type="checkbox"])),
.calendar-inline-editor label:not(:has(input[type="checkbox"])) {
    background-color: transparent !important;
    color: var(--on-surface) !important;
    border-color: transparent !important;
    padding: 0 !important;
}

#home-time-editor .home-time-field {
    background-color: var(--surface-container-high) !important;
    padding: 8px !important;
}

#home-time-editor .home-time-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#home-time-editor .home-time-field span {
    color: inherit;
}

#home-time-editor .home-time-entry {
    border-color: rgba(34, 197, 94, 0.35) !important;
}

#home-time-editor .home-time-entry input {
    border-color: rgba(34, 197, 94, 0.28) !important;
}

#home-time-editor .home-time-exit {
    border-color: rgba(239, 68, 68, 0.4) !important;
}

#home-time-editor .home-time-exit input {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

#home-time-editor .home-time-break-start {
    border-color: rgba(234, 179, 8, 0.38) !important;
}

#home-time-editor .home-time-break-start input {
    border-color: rgba(234, 179, 8, 0.3) !important;
}

#home-time-editor .home-time-break-end {
    border-color: rgba(249, 115, 22, 0.4) !important;
}

#home-time-editor .home-time-break-end input {
    border-color: rgba(249, 115, 22, 0.3) !important;
}

#inline-movement-editor input,
#inline-movement-editor textarea,
#inline-movement-editor select,
#extra-allocation-panel input,
#extra-allocation-panel textarea,
#extra-allocation-panel select,
#calendar-edit-menu input,
#calendar-edit-menu textarea,
#calendar-edit-menu select,
#calendar-form input,
#calendar-form textarea,
#calendar-form select,
#home-time-editor input,
#home-time-editor textarea,
#home-time-editor select,
.calendar-inline-editor input,
.calendar-inline-editor textarea,
.calendar-inline-editor select {
    background-color: var(--input-bg) !important;
    color: var(--on-surface) !important;
    border-color: var(--outline) !important;
    border-radius: 12px !important;
    min-height: 38px;
    padding: 8px 10px;
}

#inline-movement-editor p,
#inline-movement-editor span,
#inline-movement-editor h3,
#extra-allocation-panel p,
#extra-allocation-panel span,
#extra-allocation-panel h3,
#calendar-edit-menu p,
#calendar-edit-menu span,
#calendar-edit-menu h3,
#calendar-form p,
#calendar-form span,
#calendar-form h3,
#home-time-editor p,
#home-time-editor span,
#home-time-editor h3,
.calendar-inline-editor p,
.calendar-inline-editor span,
.calendar-inline-editor h3 {
    color: inherit;
}
/* Spazio alto Home */
#home-screen {
    padding-top: 45px !important;
}
html,
body,
.app-container {
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

#settings-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 4px 0 10px !important;
    overflow: visible !important;
    touch-action: pan-y !important;
}

#settings-tabs > button.settings-tab {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--outline) !important;
    border-radius: 12px !important;
    background: var(--surface-container-high) !important;
    color: var(--on-surface-variant) !important;
    font-family: Inter, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    touch-action: manipulation !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

#settings-tabs > button.settings-tab[aria-selected="true"],
#settings-tabs > button.settings-tab.bg-primary {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #ffffff !important;
}

#settings-tabs .settings-tab-icon {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    overflow: hidden !important;
    color: currentColor !important;
    font-family: "Material Symbols Outlined" !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 18px !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
}

#settings-tabs > button.settings-tab > span:last-child {
    display: block !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 1.35em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    max-width: 1.4em;
}

.material-symbols-outlined {
    color: inherit;
}

.home-action-button > .home-action-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.home-action-button > .home-action-icon .material-symbols-outlined {
    width: 30px;
    max-width: 30px;
    font-size: 28px !important;
    overflow: visible;
}