/* Le Mie Ore ♡ — responsive v10.
   Presentation only: original input IDs, types, values, events, login and data APIs stay intact. */
*,*::before,*::after { box-sizing:border-box; }
html,body { max-width:100%; overflow-x:clip; }
#appShell,#appShell .page,#appShell section.card,
#appShell .page .card,#appShell .hint,#appShell .leave-range-card,
#appShell .grid,#appShell .grid > *,#appShell .actions,#appShell .actions > *,
#appShell .print-filters,#appShell .print-filters > *,
#appShell .summary-filters,#appShell .summary-filters > *,
#appShell .favorite-config-grid,#appShell .favorite-config-grid > *,
#appShell .leave-range-grid,#appShell .leave-range-grid > *,
#appShell .shift,#appShell .shift .grid,#appShell .shift .grid > *,
#appShell .copy-row,#appShell .copy-row > * {min-width:0; max-width:100%;}
#appShell input,#appShell select,#appShell textarea,#appShell button {
 max-inline-size:100%;min-inline-size:0;box-sizing:border-box;
}
#appShell .page input:not([type=checkbox]):not([type=radio]):not([type=file]),
#appShell .page select,#appShell .page textarea {width:100%;min-width:0;}
:is(#appShell, dialog) .picker-shell {
 position:relative; display:flex; align-items:center; justify-content:space-between;
 width:100%; max-width:100%; min-width:0;
 height:52px; min-height:52px; max-height:52px;
 border:1.5px solid #e5bfd0; border-radius:13px;
 background:#fff; overflow:hidden; isolation:isolate;
 box-sizing:border-box; padding:0 11px;
}
:is(#appShell, dialog) .picker-shell:focus-within {outline:2px solid #bd527e;outline-offset:2px;}
:is(#appShell, dialog) .picker-shell .picker-readable {
 display:block; flex:1; min-width:0; max-width:100%;
 font-size:16px;line-height:20px;font-weight:500;color:#4c3440;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 text-align:center;padding:0 5px 0 20px;
}
:is(#appShell, dialog) .picker-shell .picker-symbol {
 flex:0 0 19px;text-align:center;color:#a74d77;font-size:15px;
 line-height:1;pointer-events:none;
}
:is(#appShell, dialog) .picker-shell input[type="date"],
:is(#appShell, dialog) .picker-shell input[type="time"],
:is(#appShell, dialog) .picker-shell input[type="month"] {
 position:absolute!important;inset:0!important;opacity:0!important;
 display:block!important;width:100%!important;height:100%!important;
 min-width:0!important;min-height:0!important;max-width:100%!important;
 margin:0!important;padding:0!important;border:0!important;
 cursor:pointer;z-index:2;-webkit-appearance:none;appearance:none;
}
:is(#appShell, dialog) .picker-shell:has(input:disabled){opacity:.6;background:#f5f1f3;}
:is(#appShell, dialog) .picker-shell input:disabled{cursor:not-allowed;}
:is(#appShell, dialog) .picker-shell:has(input:invalid) {border-color:#d984a4;}
/* Paired date controls: same height, same label baseline, real gap. */
#calendarPage .leave-range-grid,#calendarPage .editor-absence-range .leave-range-grid,
#profilePage .favorite-config-grid,#printPage .print-filters,
#summaryPage .summary-filters {align-items:start;column-gap:12px;row-gap:12px;}
#calendarPage .leave-range-grid > div,#calendarPage .editor-absence-range .leave-range-grid > div,
#profilePage .favorite-config-grid > div,#printPage .print-filters > div {min-width:0;width:100%;}
#calendarPage .leave-range-grid label,#calendarPage .editor-absence-range .leave-range-grid label,
#profilePage .favorite-config-grid label,#printPage .print-filters label,
#summaryPage .summary-filters label{
 margin:0 0 7px; min-height:19px; line-height:19px;
 font-size:clamp(13px,3.45vw,15px); overflow-wrap:normal;
}
#calendarPage .leave-range-grid .picker-shell,
#calendarPage .editor-absence-range .leave-range-grid .picker-shell,
#calendarPage .date-field .picker-shell {width:100%;}
#profilePage .favorite-config-grid .favorite-time-start,
#profilePage .favorite-config-grid .favorite-time-end {min-width:0;}
#calendarPage .shift .grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#calendarPage .shift .grid .picker-shell {min-width:0;}
#calendarPage .copy-row {grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;}
#calendarPage .copy-row > div {min-width:0;}
#calendarPage .copy-row button {white-space:nowrap;max-width:100%;}
#appShell .actions {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#appShell .actions button {min-width:0;width:100%;white-space:normal;overflow-wrap:break-word;}
#appShell .pdf-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#appShell .pdf-actions button{width:100%;min-width:0;white-space:normal;line-height:1.25;}
#appShell .pdf-actions .share-whatsapp {grid-column:1/-1;}
/* On narrow devices each PDF filter has an entire row: no wide native month field. */
@media(max-width:560px){
 #printPage .print-filters {display:grid;grid-template-columns:minmax(0,1fr)!important;gap:13px;}
 #printPage .print-filters>div {width:100%;}
 #summaryPage .summary-filters {grid-template-columns:repeat(2,minmax(0,1fr));}
 #calendarPage .leave-range-grid,#calendarPage .editor-absence-range .leave-range-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 #appShell .page h1 {font-size:clamp(20px,6vw,25px);}
 #appShell .page h2 {font-size:clamp(18px,5vw,22px);}
 #appShell .page h3 {font-size:clamp(17px,4.5vw,21px);}
 #appShell .card,#calendarPage .leave-range-card {padding:clamp(11px,3.4vw,16px);}
 :is(#appShell, dialog) .picker-shell .picker-readable {font-size:15px;padding-left:14px;}
 :is(#appShell, dialog) .picker-shell {padding:0 8px;}
}
@media(max-width:355px){
 #calendarPage .leave-range-grid,#calendarPage .editor-absence-range .leave-range-grid {grid-template-columns:minmax(0,1fr);}
 #calendarPage .shift .grid {gap:7px;grid-template-columns:repeat(2,minmax(0,1fr));}
 #calendarPage .copy-row {gap:6px;}
 :is(#appShell, dialog) .picker-shell .picker-readable {font-size:14px;}
}
/* The in-app preview is readable cards on phones, not a microscopic 4-column table.
   PDF created by report-pdf.js remains unchanged, landscape A4. */
@media(max-width:640px){
 #printPage .table-scroll {overflow:visible;width:100%;max-width:100%;}
 #printPage .print-table {display:block;width:100%;table-layout:auto;max-width:100%;border:0;}
 #printPage .print-table thead {display:none;}
 #printPage .print-table tbody {display:flex;flex-direction:column;gap:10px;width:100%;}
 #printPage .print-table tbody tr {
   display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
   gap:5px 10px; width:100%;min-width:0;
   background:#fff;border:1px solid #ecd5de;border-radius:13px;
   padding:10px 11px;box-shadow:0 1px 5px #82365810;
 }
 #printPage .print-table tbody td {
   display:block;border:0!important;min-width:0;width:auto;
   padding:3px 0!important;font-size:13px;line-height:1.45;
   overflow-wrap:anywhere;word-break:normal;
 }
 #printPage .print-table tbody td::before {
   display:block;color:#97647c;font-size:11px;line-height:1.3;
   font-weight:650;margin-bottom:3px;
 }
 #printPage .print-table tbody td:nth-child(1) {grid-column:1;grid-row:1;font-weight:700;}
 #printPage .print-table tbody td:nth-child(1)::before {content:'Data';}
 #printPage .print-table tbody td:nth-child(2) {grid-column:1/-1;grid-row:2;}
 #printPage .print-table tbody td:nth-child(2)::before {content:'Giornata';}
 #printPage .print-table tbody td:nth-child(3) {grid-column:1/-1;grid-row:3;}
 #printPage .print-table tbody td:nth-child(3)::before {content:'Turni e note';}
 #printPage .print-table tbody td:nth-child(4) {grid-column:2;grid-row:1;text-align:right;font-weight:700;}
 #printPage .print-table tbody td:nth-child(4)::before {content:'Ore';}
 #printPage .print-table tbody td[colspan] {grid-column:1/-1;grid-row:auto;text-align:center;}
 #printPage .print-table tbody td[colspan]::before {display:none;}
 #printPage .pdf-report-stats {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media print {
 #printPage .print-table {display:table;}
 #printPage .print-table thead {display:table-header-group;}
 #printPage .print-table tbody {display:table-row-group;}
 #printPage .print-table tbody tr {display:table-row;border:0;padding:0;}
 #printPage .print-table tbody td {display:table-cell;}
 #printPage .print-table tbody td::before {display:none;}
}

/* Build 88 TEST: readable dates in nested settings on small phones.
   Keep the native controls and all existing event handlers. */
@media screen and (max-width:430px){
 #profilePage .v13-grid > div:has(> .picker-date),
 #profilePage .v31-fields > div:has(> .picker-date){grid-column:1 / -1!important;min-width:0!important}
}
/* Portaled dialogs share the same native-picker presentation as the app shell. */
dialog .picker-shell{max-inline-size:100%;min-inline-size:0}
dialog .picker-shell .picker-readable{padding-left:5px}