.desk-date-field { position:relative; min-width:0; }
.desk-date-label { display:block; margin-bottom:8px; color:var(--md-on-surface-variant); font-size:var(--desk-text-body); font-weight:500; }
.desk-date-trigger { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px 9px 14px; border:1px solid var(--md-outline-variant); border-radius:8px; background:var(--md-surface); color:var(--md-on-surface-variant); text-align:left; }
.desk-date-trigger.has-value { color:var(--md-on-surface); }
.desk-date-trigger:hover:not(:disabled) { border-color:var(--md-outline); background:var(--md-surface-container-low); }
.desk-date-trigger:focus-visible { outline:2px solid var(--md-primary); outline-offset:1px; }
.desk-date-trigger > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.desk-date-trigger > svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:var(--md-primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.desk-date-field.is-open { z-index:30; }
.desk-calendar { position:absolute; top:calc(100% + 8px); left:0; width:300px; max-width:min(300px,calc(100vw - 32px)); padding:12px; border:1px solid var(--md-outline-variant); border-radius:10px; background:var(--md-surface); box-shadow:0 14px 34px rgb(22 34 52 / 20%); color:var(--md-on-surface); }
.desk-date-field.opens-up .desk-calendar { top:auto; bottom:calc(100% + 8px); }
.desk-calendar-header { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; align-items:center; gap:8px; margin-bottom:10px; }
.desk-calendar-header strong { text-align:center; font-size:14px; font-weight:600; text-transform:capitalize; }
.desk-calendar-header button { width:32px; min-width:32px; height:32px; min-height:32px; padding:0; border-radius:7px; font-size:21px; line-height:1; }
.desk-calendar-weekdays,.desk-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.desk-calendar-weekdays { margin-bottom:5px; }
.desk-calendar-weekdays span { padding:4px 0; color:var(--md-on-surface-variant); font-size:11px; font-weight:600; text-align:center; text-transform:uppercase; }
.desk-calendar-day,.desk-calendar-empty { width:100%; min-width:0; height:32px; min-height:32px; padding:0; border:1px solid transparent; border-radius:7px; }
.desk-calendar-day { background:transparent; font-size:13px; }
.desk-calendar-day:hover { background:var(--md-surface-container); }
.desk-calendar-day.is-today { border-color:var(--md-outline); }
.desk-calendar-day.is-selected { border-color:var(--md-primary); background:var(--md-primary-container); color:var(--md-on-primary-container); font-weight:700; }
.desk-calendar-actions { display:flex; justify-content:space-between; gap:8px; margin-top:11px; padding-top:10px; border-top:1px solid var(--row-border); }
.desk-calendar-actions button { min-height:32px; padding:5px 10px; border-radius:7px; font-size:12px; }
.desk-calendar-actions button:last-child { border-color:var(--md-primary); color:var(--md-primary); }
@media(max-width:700px) { .desk-calendar { left:auto; right:0; } }