.order-period-filter{grid-column:1/-1;min-width:0;padding:10px;border:1px solid #ddd;border-radius:8px;display:grid;gap:8px;color:#333;background:#fff}
.order-period-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.order-period-title label{display:flex!important;align-items:center;gap:6px}
.order-period-title input{width:84px!important;min-width:0;padding:6px!important}
.order-period-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
.order-period-months button{padding:8px 2px;border:1px solid #ccc;border-radius:6px;background:#fafafa;color:#333;min-width:0;cursor:pointer}
.order-period-months button[aria-pressed=true]{background:#650b12;color:#fff;border-color:#650b12}
.order-period-range{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);align-items:end;gap:8px}
.order-period-range>button{height:37px;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer}
.order-period-range label{display:grid!important;gap:4px;min-width:0;font-size:12px}
.order-period-range input{width:100%!important;min-width:0!important;box-sizing:border-box;padding:7px 4px!important}
.order-period-filter small{font-size:11px}.order-period-filter [role=alert]{color:#a00}
@media(max-width:600px){.order-period-months{grid-template-columns:repeat(6,minmax(0,1fr))}.order-period-range{gap:5px}.order-period-filter{padding:8px}}

.order-period-range input{font-size:12px!important;line-height:20px!important;min-height:36px!important}
.order-period-range>button{display:flex;align-items:center;justify-content:center}
@media(max-width:400px){.order-period-title b{font-size:12px}.order-period-title{gap:5px}.order-period-range label{padding-left:4px!important}}
.order-period-filter .order-period-range label input[type="date"]{font-size:12px!important;font-family:Arial,sans-serif!important;padding:4px 2px!important;letter-spacing:0!important}
.order-period-filter input[type="date"]::-webkit-datetime-edit{font-size:12px!important;padding:0!important}
.order-period-filter input[type="date"]::-webkit-calendar-picker-indicator{margin-left:0!important;padding:0!important;width:14px;height:14px}