/* v20.3: approved sans-serif mockup, scoped exclusively to shift plans. */
body[data-view="shifts"] { --sp-bg:#101113; --sp-panel:#191b1e; --sp-line:#33352f; --sp-text:#eee9de; --sp-muted:#aaa99f; --sp-gold:#d6bd8b; }
body[data-view="shifts"] .main { background:var(--sp-bg); }
body[data-view="shifts"] #title { font-family:"Segoe UI",system-ui,sans-serif!important; font-weight:600!important; letter-spacing:-.4px; }
body[data-view="shifts"] #actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
body[data-view="shifts"] #actions [data-print] { order:-1; }
body[data-view="shifts"] .ro203-shifts { color:var(--sp-text); font-family:"Segoe UI",system-ui,sans-serif; }
body[data-view="shifts"] .ro203-filters { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px; margin:0 0 22px; }
body[data-view="shifts"] .ro203-filters label { display:grid; gap:7px; margin:0; color:var(--sp-muted); font-size:12px; }
body[data-view="shifts"] .ro203-filters select { width:100%; min-width:0; min-height:44px; background:var(--sp-panel); color:var(--sp-text); border:1px solid var(--sp-line); border-radius:8px; }
body[data-view="shifts"] .ro203-board { background:var(--sp-panel); border:1px solid var(--sp-line); border-radius:12px; padding:22px; margin:0 0 16px; min-width:0; box-shadow:none; }
body[data-view="shifts"] .ro203-board-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:20px; }
body[data-view="shifts"] .ro203-board-head>div { min-width:0; }
body[data-view="shifts"] .ro203-day { color:var(--sp-gold); font-size:11px; letter-spacing:1px; margin-bottom:6px; overflow-wrap:anywhere; }
body[data-view="shifts"] .ro203-board h2 { font:600 22px/1.3 "Segoe UI",system-ui,sans-serif!important; letter-spacing:0; color:var(--sp-text); margin:0; overflow-wrap:anywhere; }
body[data-view="shifts"] .ro203-area-lead { text-align:right; max-width:45%; }
body[data-view="shifts"] .ro203-area-lead>small { display:block; color:var(--sp-muted); font-size:12px; margin-bottom:5px; }
body[data-view="shifts"] .ro203-area-lead .ro203-person { background:transparent; padding:0; color:var(--sp-gold); justify-content:flex-end; }
body[data-view="shifts"] .ro203-shift { display:grid; grid-template-columns:120px minmax(0,1fr) 155px; align-items:start; gap:18px; padding:20px 0; border-top:1px solid var(--sp-line); }
body[data-view="shifts"] .ro203-shift:last-child { padding-bottom:0; }
body[data-view="shifts"] .ro203-time { font-size:14px; font-weight:600; overflow-wrap:normal; }
body[data-view="shifts"] .ro203-assignment { min-width:0; }
body[data-view="shifts"] .ro203-description { margin:0 0 12px; color:var(--sp-text); font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
body[data-view="shifts"] .ro203-role+.ro203-role { margin-top:14px; }
body[data-view="shifts"] .ro203-role-title { font-size:13px; font-weight:600; margin-bottom:8px; overflow-wrap:anywhere; }
body[data-view="shifts"] .ro203-people { display:flex; flex-wrap:wrap; gap:6px; }
body[data-view="shifts"] .ro203-person { display:inline-flex; align-items:center; justify-content:flex-start; gap:7px; border:0; background:#24262a; color:var(--sp-text); border-radius:7px; min-height:36px; padding:5px 9px; max-width:100%; font:400 13px/1.4 "Segoe UI",system-ui,sans-serif; text-align:left; box-shadow:none; }
body[data-view="shifts"] .ro203-person>span:not(.face) { overflow-wrap:anywhere; min-width:0; }
body[data-view="shifts"] .ro203-person:hover { background:#302b21; color:var(--sp-gold); }
body[data-view="shifts"] .ro203-person .face { width:25px!important; height:25px!important; flex:0 0 25px; font-size:12px; border-radius:50%; }
body[data-view="shifts"] .ro203-leader { color:var(--sp-gold); font-size:11px; }
body[data-view="shifts"] .ro203-shift-side { text-align:right; min-width:0; }
body[data-view="shifts"] .ro203-status { display:inline-block; padding:4px 8px; font-size:12px; border-radius:5px; }
body[data-view="shifts"] .ro203-status.full { background:#202f28; color:#9ecba9; }
body[data-view="shifts"] .ro203-status.open { background:#332c1f; color:#e0c184; }
body[data-view="shifts"] .ro203-total { display:block; font-size:11px; color:var(--sp-muted); margin:5px 0; }
body[data-view="shifts"] .ro203-edit { margin-top:4px; padding:0; border:0; background:transparent; }
body[data-view="shifts"] .ro203-edit summary { color:var(--sp-muted); padding:8px 0; font-size:12px; cursor:pointer; }
body[data-view="shifts"] .ro203-edit>div { display:grid; gap:6px; margin-top:5px; }
body[data-view="shifts"] .ro203-edit .btn { width:100%; min-width:0; min-height:38px; height:auto; padding:8px; white-space:normal; font-size:12px; }
@media(max-width:1050px){ body[data-view="shifts"] .ro203-shift{grid-template-columns:100px minmax(0,1fr) 135px;gap:12px} }
@media(max-width:650px){
 body[data-view="shifts"] .ro203-board{padding:16px}
 body[data-view="shifts"] .ro203-board-head{align-items:flex-start;gap:12px}
 body[data-view="shifts"] .ro203-area-lead{max-width:48%}
 body[data-view="shifts"] .ro203-area-lead .face{display:none}
 body[data-view="shifts"] .ro203-shift{grid-template-columns:100px minmax(0,1fr);gap:10px}
 body[data-view="shifts"] .ro203-shift-side{grid-column:2;text-align:left}
 body[data-view="shifts"] .ro203-edit>div{grid-template-columns:1fr}
 body[data-view="shifts"] .ro203-person{min-height:44px;flex-wrap:wrap}
 body[data-view="shifts"] .ro203-edit summary{min-height:44px;display:list-item;padding:12px 0}
 body[data-view="shifts"] .ro203-filters{gap:10px;grid-template-columns:1fr 1fr}
 body[data-view="shifts"] .ro203-filters select{font-size:16px;padding-left:8px;padding-right:24px}
}
@media(max-width:380px){
 body[data-view="shifts"] .ro203-filters{grid-template-columns:1fr}
 body[data-view="shifts"] .ro203-board-head{flex-wrap:wrap}
 body[data-view="shifts"] .ro203-area-lead{max-width:100%;text-align:left}
 body[data-view="shifts"] .ro203-shift{grid-template-columns:1fr}
 body[data-view="shifts"] .ro203-shift-side{grid-column:1}
}
/* Keep the page actions and filters in the mockup's restrained sand palette. */
body.staff-mode[data-view="shifts"] #actions .btn.primary { background:#d6bd8b!important; color:#171813!important; border:1px solid #d6bd8b!important; box-shadow:none!important; }
body[data-view="shifts"] .ro203-filters select { background:#191b1e!important; border-color:#33352f!important; }
@media(max-width:650px){
 body[data-view="shifts"] .topbar>.row:first-child{flex-wrap:wrap!important;gap:14px!important}
 body[data-view="shifts"] .topbar .title-block{flex-basis:100%!important;width:100%!important;min-width:0!important}
 body[data-view="shifts"] #title{font-size:24px!important;white-space:nowrap!important;word-break:normal!important}
}
/* v20.4: stronger dates, area-first filters, use wide screens for parallel day cards. */
body[data-view="shifts"] .ro203-day {font-size:17px;font-weight:600;line-height:1.4;letter-spacing:0;margin-bottom:7px;}
body[data-view="shifts"] .ro203-filters {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
body[data-view="shifts"] #shiftBoards {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,660px),1fr));gap:16px;align-items:start;}
body[data-view="shifts"] .ro203-board {margin:0;container-type:inline-size;}
@container (max-width:800px){
 body[data-view="shifts"] .ro203-shift {grid-template-columns:100px minmax(0,1fr) 118px;gap:12px;}
 body[data-view="shifts"] .ro203-board-head {gap:12px;}
}
@container (max-width:560px){
 body[data-view="shifts"] .ro203-shift {grid-template-columns:100px minmax(0,1fr);gap:10px;}
 body[data-view="shifts"] .ro203-shift-side {grid-column:2;text-align:left;}
}
@container (max-width:300px){
 body[data-view="shifts"] .ro203-shift {grid-template-columns:1fr;}
 body[data-view="shifts"] .ro203-shift-side {grid-column:1;}
 body[data-view="shifts"] .ro203-board-head {flex-wrap:wrap;}
 body[data-view="shifts"] .ro203-area-lead {max-width:100%;text-align:left;}
}
@media(max-width:380px){body[data-view="shifts"] .ro203-filters {grid-template-columns:1fr;}}

/* v20.6: use each area's existing configured icon, with the standard name fallback. */
body[data-view="shifts"] .ro203-board h2.ro206-area-title {display:flex;align-items:center;gap:10px;}
body[data-view="shifts"] .ro206-area-title>span:last-child {min-width:0;overflow-wrap:anywhere;}
body[data-view="shifts"] .ro206-area-icon {display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border-radius:8px;background:#302b21;color:#d6bd8b;}
body[data-view="shifts"] .ro206-area-icon .ro-area-icon {display:block;width:22px!important;height:22px!important;flex:none;}