.daily-usage-page{--usage-border:#d9e7dc}
.usage-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px;margin-bottom:22px;padding:34px 38px;background:linear-gradient(135deg,#204e49 0%,#16756b 70%,#66cc33 145%);border-radius:16px;box-shadow:0 14px 32px rgba(18,79,68,.16)}
.usage-hero h2{position:relative;z-index:1;margin:10px 0 8px;max-width:760px;color:#fff;font:600 clamp(28px,3vw,40px)/1.1 'Space Grotesk';letter-spacing:-.6px}
.usage-hero p{position:relative;z-index:1;max-width:650px;margin:0;color:#edf9e9}
.usage-hero-mark{display:grid;place-items:center;width:76px;height:76px;border:1px solid rgba(255,255,255,.3);border-radius:18px;color:#d7f6c9;font:700 25px 'Space Grotesk';background:rgba(0,0,51,.14)}
.usage-panel{border:1px solid var(--usage-border);box-shadow:0 10px 25px rgba(0,0,51,.055)}
.usage-details-grid{margin-bottom:20px}
.usage-lines-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.usage-lines-heading h4{margin-bottom:5px}
.usage-line{display:grid;grid-template-columns:34px minmax(0,1.6fr) minmax(120px,.7fr) 36px;align-items:end;gap:12px;margin-top:10px;padding:12px;background:#fff;border:1px solid var(--usage-border);border-radius:9px}
.usage-line-number{display:grid;place-items:center;width:28px;height:28px;margin-bottom:8px;border-radius:50%;background:#e5f3ee;color:#176d5d;font:700 12px 'Space Grotesk'}
.remove-usage-line{width:32px;height:32px;margin-bottom:5px;border:1px solid #efc2bc;border-radius:7px;background:#fff;color:#a43e34;font-size:20px;line-height:1;cursor:pointer}
.usage-actions{margin-top:20px}
.usage-filter{display:grid;grid-template-columns:minmax(150px,1fr) minmax(170px,1fr) minmax(170px,1fr) auto auto;align-items:end;gap:14px;margin:20px 0;padding:16px 18px;border:1px solid #d5e7d8;border-radius:10px;background:#f8fbf7}
.usage-filter-intro{display:grid;gap:4px;align-self:center;padding-right:14px;border-right:1px solid #dceade}
.usage-filter-intro strong{color:#25443a;font:600 14px 'Space Grotesk'}
.usage-filter .form-field{min-width:0}
.usage-filter label{color:#52665a;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.usage-filter input,.usage-filter select{min-height:42px;background:#fff;border-color:#bfd8c3}
.usage-filter input:focus,.usage-filter select:focus{border-color:#16756b;outline:3px solid rgba(22,117,107,.14);outline-offset:1px}
.usage-filter-submit{min-height:42px;white-space:nowrap}
.usage-table-wrap{overflow-x:auto;border:1px solid var(--usage-border);border-radius:10px}
.usage-table{min-width:820px;margin:0;border:0}
.usage-empty{text-align:center;padding:26px!important;color:#718178}

/* Items removed by day */
.usage-days-panel .panel-header{align-items:flex-start}
.usage-day-picker{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(260px,390px);align-items:center;gap:18px;margin-top:20px;padding:20px;border:1px solid #bcd9c1;border-radius:10px;background:linear-gradient(105deg,#eef8ef 0%,#f9fcf8 52%,#fff 100%);box-shadow:0 8px 20px rgba(18,79,68,.06)}
.usage-day-picker-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:8px;background:#16756b;color:#fff;font:700 15px 'Space Grotesk';letter-spacing:.4px;box-shadow:0 7px 14px rgba(22,117,107,.2)}
.usage-day-picker-copy{display:grid;gap:5px}
.usage-day-picker-copy strong{color:#213b33;font:600 17px 'Space Grotesk'}
.usage-day-picker-copy small{color:#64766c;font-size:12px}
.usage-day-select{width:100%;min-height:54px;padding:0 42px 0 17px;border:2px solid #6daa7e;border-radius:8px;background-color:#fff;color:#174a3f;font:700 14px 'DM Sans';letter-spacing:.1px;cursor:pointer;box-shadow:0 3px 8px rgba(18,79,68,.1);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease}
.usage-day-select:hover{border-color:#16756b;background:#fbfffb;box-shadow:0 6px 14px rgba(18,79,68,.14);transform:translateY(-1px)}
.usage-day-select:focus{border-color:#126458;outline:3px solid rgba(22,117,107,.18);outline-offset:2px;box-shadow:0 6px 14px rgba(18,79,68,.14)}
.usage-day-select option{background:#fff;color:#203b32;font-weight:600}
.usage-day-empty{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px;padding:44px 20px;color:#718178;text-align:center;border:1px dashed var(--usage-border);border-radius:10px}
.usage-day-empty-icon{font:700 13px 'Space Grotesk';letter-spacing:.4px;text-transform:uppercase}

/* Day detail modal */
body.usage-day-modal-open{overflow:hidden}
.usage-day-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.usage-day-modal[hidden]{display:none}
.usage-day-modal-backdrop{position:absolute;inset:0;background:rgba(15,35,30,.55)}
.usage-day-modal-dialog{position:relative;width:100%;max-width:760px;max-height:82vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,51,.25);overflow:hidden;animation:usage-modal-in .18s ease}
.usage-day-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--usage-border)}
.usage-day-modal-header h3{margin:6px 0 0;font:600 20px 'Space Grotesk'}
.usage-day-modal-close{width:34px;height:34px;border:1px solid var(--usage-border);border-radius:8px;background:#fff;color:#3a4a41;font-size:20px;line-height:1;cursor:pointer}
.usage-day-modal-body{padding:16px 22px 22px;overflow-y:auto}
.usage-day-modal-body table.table{margin:0}
.usage-day-modal-body td small{display:block;color:#8a9a91;font-size:11px}
@keyframes usage-modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:900px){.usage-filter{grid-template-columns:minmax(150px,1fr) minmax(170px,1fr) minmax(170px,1fr) auto}.usage-filter-intro{grid-column:1/-1;padding:0 0 12px;border:0;border-bottom:1px solid #dceade}.usage-day-picker{grid-template-columns:52px minmax(0,1fr)}.usage-day-select{grid-column:1/-1}.usage-day-modal-dialog{max-height:88vh}}
@media(max-width:600px){.usage-filter{grid-template-columns:1fr;padding:16px}.usage-filter .form-field,.usage-filter-submit,.usage-filter .btn-secondary{width:100%}.usage-day-picker{grid-template-columns:1fr;padding:18px}.usage-day-picker-icon{width:44px;height:44px}.usage-day-picker-copy{margin-top:-52px;margin-left:58px;min-height:44px}.usage-day-select{margin-top:4px}}