/* v20.10: display management in the approved sans-serif design. */
body[data-view="displays"] .main{background:#101113}
body[data-view="displays"] #content{font-family:"Segoe UI",system-ui,sans-serif;color:#eee9de}
body[data-view="displays"] #title{font-family:"Segoe UI",system-ui,sans-serif!important;font-weight:600!important}
body[data-view="displays"] .topbar{justify-content:flex-start;gap:28px!important}
body.staff-mode[data-view="displays"] #newDisplay{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;font-size:15px;background:#e5c576!important;color:#191b14!important;border:1px solid #efd798!important;box-shadow:none!important}
body[data-view="displays"] #newDisplay svg{width:20px!important;height:20px!important}
body[data-view="displays"] .ro210-summary{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 18px;color:#b5b5ac;font-size:13px}
body[data-view="displays"] .ro210-summary b{color:#eee9de;margin-right:5px}
body[data-view="displays"] .ro210-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));gap:18px;align-items:start}
body[data-view="displays"] .ro210-card,body[data-view="displays"] .ro210-settings,body[data-view="displays"] .ro210-empty{background:#191b1e;border:1px solid #33352f;border-radius:12px;padding:20px;min-width:0}
body[data-view="displays"] .ro210-card>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
body[data-view="displays"] .ro210-card h2{font:600 20px/1.35 "Segoe UI",system-ui,sans-serif!important;color:#eee9de;margin:0;overflow-wrap:anywhere}
body[data-view="displays"] .ro210-card header p{font-size:12px;color:#b5b5ac;margin:5px 0 0}
body[data-view="displays"] .ro210-monitor svg{width:24px!important;height:24px!important;color:#d6bd8b}
body[data-view="displays"] .ro210-screen{padding:16px;background:#101715;border:1px solid #344138;border-radius:8px;margin-bottom:16px;min-height:168px}
body[data-view="displays"] .ro210-screen-head{display:flex;justify-content:space-between;align-items:start;gap:12px;padding-bottom:12px;border-bottom:1px solid #344138;font-size:12px}
body[data-view="displays"] .ro210-screen-head b{color:#d6bd8b;overflow-wrap:anywhere}
body[data-view="displays"] .ro210-screen-head span{font-size:11px;color:#a6b4a9;flex-shrink:0}
body[data-view="displays"] .ro210-screen-lines{display:grid;gap:10px;margin:14px 0;font-size:13px;color:#d5ded6}
body[data-view="displays"] .ro210-screen-lines>div{display:flex;align-items:center;gap:10px}
body[data-view="displays"] .ro210-screen-lines svg{width:17px!important;height:17px!important;flex-shrink:0}
body[data-view="displays"] .ro210-screen-areas{padding-top:10px;border-top:1px solid #344138;font-size:11px;line-height:1.5;color:#a6b4a9;overflow-wrap:anywhere}
body[data-view="displays"] .ro210-options{display:flex;flex-wrap:wrap;gap:10px 14px;margin-bottom:14px}
body[data-view="displays"] .ro210-options label,body[data-view="displays"] .ro210-area-list label{display:flex;align-items:center;gap:7px;font-size:13px;color:#d4d2c8;min-width:0;cursor:pointer}
body[data-view="displays"] .ro210-card input[type="checkbox"]{width:17px;height:17px;min-height:0;flex-shrink:0;accent-color:#d6bd8b}
body[data-view="displays"] .ro210-card details{border-top:1px solid #33352f;padding-top:12px}
body[data-view="displays"] summary{cursor:pointer;color:#eee9de;font-weight:600;font-size:14px;line-height:1.5}
body[data-view="displays"] summary span{font-size:12px;color:#aaa99f;margin-left:6px}
body[data-view="displays"] .ro210-area-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
body[data-view="displays"] .ro210-area-list span{min-width:0;overflow-wrap:anywhere}
body[data-view="displays"] .ro210-area-list .ro-area-icon{width:18px!important;height:18px!important;color:#d6bd8b;flex-shrink:0}
body[data-view="displays"] .ro210-day{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
body[data-view="displays"] .ro210-day input{width:80px!important;min-width:0}
body[data-view="displays"] input[type="number"]{background:#101113;color:#eee9de;border:1px solid #3b3d37;border-radius:7px;min-height:40px;padding:8px;font-size:16px}
body[data-view="displays"] .ro210-passive{font-size:13px;line-height:1.6;color:#b5b5ac;margin:0}
body[data-view="displays"] .ro210-save-status{font-size:12px;line-height:1.5;color:#b5b5ac;margin:8px 0;min-height:18px;overflow-wrap:anywhere}
body[data-view="displays"] .ro210-card footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #33352f;padding-top:14px}
body[data-view="displays"] .ro210-card .btn,body[data-view="displays"] .ro210-settings .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#191b1e!important;border:1px solid #3b3d37!important;border-radius:8px;min-height:42px;box-shadow:none!important;color:#eee9de!important;font-size:13px;padding:9px 13px}
body.staff-mode[data-view="displays"] .ro210-card .btn.primary{background:#d6bd8b!important;border-color:#d6bd8b!important;color:#171813!important}
body[data-view="displays"] .ro210-card .btn.danger{color:#eaa39c!important}
body[data-view="displays"] .ro210-card .btn svg{width:17px!important;height:17px!important}
body[data-view="displays"] .ro210-settings{margin-top:18px}
body[data-view="displays"] .ro210-settings p{font-size:13px;line-height:1.6;color:#b5b5ac}
body[data-view="displays"] .ro210-motion{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:16px;margin:16px 0}
body[data-view="displays"] .ro210-motion label{display:grid;gap:8px;font-size:13px;color:#d4d2c8}
body[data-view="displays"] .ro210-motion input{width:100%}
body[data-view="displays"] .ro210-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px;margin-top:20px}
body[data-view="displays"] .ro210-links>div{display:grid;gap:6px;border-top:1px solid #33352f;padding-top:12px;min-width:0}
body[data-view="displays"] .ro210-links b{font-size:14px;overflow-wrap:anywhere}
body[data-view="displays"] .ro210-links span,body[data-view="displays"] .ro210-links a{font-size:12px;overflow-wrap:anywhere;color:#b5b5ac}
body[data-view="displays"] .ro210-links a{color:#d6bd8b}
body[data-view="displays"] .ro210-empty{grid-column:1/-1;text-align:center;padding:30px}
#displayEditor .ro210-editor{width:min(560px,94vw);background:#191b1e!important;border:1px solid #33352f!important;border-radius:12px;font-family:"Segoe UI",system-ui,sans-serif}
#displayEditor label{display:block;margin:16px 0 6px}#displayEditor input,#displayEditor select{width:100%;min-width:0;font-size:16px}
#displayEditor .ro-save-dock{background:#191b1e!important}#displayEditor .btn.primary{background:#d6bd8b!important;color:#171813!important;border-color:#d6bd8b!important;box-shadow:none!important}
@media(min-width:901px){body[data-view="displays"] .topbar>.row:first-child{flex:0 1 auto!important}body[data-view="displays"] .topbar>.row:last-child{flex-shrink:0}}
@media(max-width:650px){body[data-view="displays"] .ro210-card{padding:16px}body[data-view="displays"] .ro210-settings{padding:16px}body[data-view="displays"] .ro210-motion{grid-template-columns:1fr}body[data-view="displays"] .topbar{gap:12px!important}body[data-view="displays"] .topbar #actions{width:100%!important;margin-left:0}body[data-view="displays"] #newDisplay{width:100%}body[data-view="displays"] .ro210-settings .btn{white-space:normal;text-align:center}}
body[data-view="displays"] #content{max-width:none!important}
body.staff-mode[data-view="displays"] #actions #newDisplay{background:#e5c576!important;border-color:#efd798!important;color:#191b14!important}
@media(max-width:650px){body[data-view="displays"] .topbar>.row:first-child{grid-template-columns:1fr!important}body[data-view="displays"] #menuBtn{justify-self:start}body.staff-mode[data-view="displays"] .topbar .title-block h2{font-size:24px!important;white-space:nowrap;overflow-wrap:normal}}