
/* Drillpro dashboard: desktop reference, compact mobile shell. */
:root{--dp-navy:#12336c;--dp-orange:#f87918;--dp-bg:#eef4fa;--dp-border:#e0e8f1}
body{background:var(--dp-bg)}
#app>aside{background:linear-gradient(165deg,#163b79,#102c60);gap:22px}
#app>aside nav button{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:9px;font-size:15px;min-height:46px}
#app>aside nav button:hover{background:#ffffff16}
#app>aside nav button[aria-current=page]{background:var(--dp-orange);box-shadow:0 3px 10px #071d3a22}
.dp-icon{width:22px;height:22px;flex:none;vertical-align:middle}
#app>aside .logo{width:180px}
#user{display:flex;align-items:center;gap:11px;font-size:14px}
#user small{display:block;font-size:12px;color:#d2def2}
.dp-avatar{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:#d7e6ff;color:#12336c;font-weight:800}
#logout{display:flex;align-items:center;gap:10px;background:transparent;color:white;border:1px solid #ffffff38;padding:9px 12px;font-size:14px}
#app>main{padding:0 28px 28px}
#app>main>header{min-height:72px;margin:0 -28px 24px;padding:14px 28px;background:#fff;border-bottom:1px solid var(--dp-border)}
#app>main>header p{font-weight:600;color:#536882;margin:0;font-size:14px}
#refresh{display:flex;align-items:center;gap:8px;background:white;padding:8px 12px;font-size:13px}
#content>h1{font-size:clamp(25px,2.5vw,32px);margin:0 0 8px}
#content .dp-link-card{display:flex;align-items:center;gap:12px}
.dp-card-icon,.dp-stat-icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:#eaf0ff;color:#254e9b;font-style:normal}
.dp-tone-green .dp-stat-icon,.dp-card-icon.dp-tone-green{background:#e3f4e9;color:#248655}
.dp-tone-orange .dp-stat-icon,.dp-card-icon.dp-tone-orange{background:#fff0e4;color:#ce5b0c}
.dp-card-copy{min-width:0;flex:1}
.dp-chevron{font-size:24px;color:#8fa3bc}
#content .dp-link-card strong{font-size:17px;line-height:1.35}
#content .dp-link-card span{font-size:13px;line-height:1.5;margin-top:5px;color:#62748a}
#content[data-portal-view=dashboard] .home-counts{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
#content[data-portal-view=dashboard] .home-count{display:flex;align-items:center;gap:13px;text-align:left;padding:20px 16px;margin:0;border:1px solid #e6edf4;box-shadow:0 4px 14px #173c6a06}
.home-count .dp-stat-icon{width:46px;height:46px;border-radius:50%}
#content[data-portal-view=dashboard] .home-count strong{font-size:29px;line-height:1.1}
#content[data-portal-view=dashboard] .home-count span{font-size:13px;font-weight:600;color:#60728a;margin-top:6px}
#content[data-portal-view=dashboard] .dp-date{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}
#content[data-portal-view=dashboard] .dp-date .dp-icon{width:17px;height:17px}
#content[data-portal-view=dashboard] .home-lists{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
#content[data-portal-view=dashboard] .home-list{margin:0;padding:18px;box-shadow:0 5px 18px #163b6907;border-color:#e3ebf4}
.home-list-heading{gap:10px}
#content[data-portal-view=dashboard] .home-list-heading h2{font-size:18px;margin:0;color:#16396c}
#content[data-portal-view=dashboard] .home-list-heading button{font-size:12px;padding:8px 10px;background:white;border-color:#e1e8f2}
#content[data-portal-view=dashboard] .home-list .card{border:0;border-radius:0;border-bottom:1px solid #e9eef5;padding:13px 0;margin:0;box-shadow:none}
#content[data-portal-view=dashboard] .home-list .card strong{font-size:14px}
#content[data-portal-view=dashboard] .home-list .card span{font-size:12px}
#content[data-portal-view=dashboard] .home-list .dp-card-icon{width:34px;height:34px;border-radius:50%}
#content[data-portal-view=dashboard] .home-list>.muted{font-size:12px;margin:12px 0 0}
#planner-dashboard-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
#planner-dashboard-tools>.panel{padding:18px;margin:0;min-width:0;border-color:#e3ebf4;box-shadow:0 5px 18px #163b6907}
#planner-dashboard-tools>.panel>h2,#planner-dashboard-tools>.panel>.home-list-heading>h2{font-size:18px;color:#16396c;margin-top:0}
#planner-dashboard-tools>.panel>p{font-size:13px;color:#62748a}
#planner-dashboard-tools .panel .panel{padding:12px;margin-bottom:10px;box-shadow:none}
#planner-dashboard-tools h3{font-size:15px}
#planner-dashboard-tools .panel .panel p{font-size:13px;margin:7px 0}
#planner-dashboard-tools .booking-actions{gap:6px}
#planner-dashboard-tools .booking-actions button,#planner-dashboard-tools .booking-actions a{font-size:12px;padding:9px}
#planner-dashboard-tools>.panel:nth-child(n+4){grid-column:span 3}
.dp-shortcuts{margin-top:24px}
.dp-shortcuts>summary{display:flex;align-items:center;gap:10px;font-size:19px;margin-bottom:16px}
.dp-shortcuts>summary:after{content:'⌄';margin-left:auto}
.dp-shortcuts:not([open])>summary:after{content:'›'}
.dp-shortcuts .grid{gap:12px}
.dp-shortcuts .card{padding:16px;margin:0}
#content[data-portal-view=dashboard] .badge{font-size:12px}
@media(min-width:801px){#app>aside{position:sticky;top:0;height:100vh;overflow-y:auto}#user{padding-top:18px;border-top:1px solid #ffffff20}}
@media(max-width:1150px) and (min-width:801px){
 #app:not([hidden]){grid-template-columns:210px minmax(0,1fr)}
 #content[data-portal-view=dashboard] .home-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
 #planner-dashboard-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
 #planner-dashboard-tools>.panel:nth-child(3){grid-column:span 2}
 #planner-dashboard-tools>.panel:nth-child(n+4){grid-column:span 2}
}
@media(max-width:800px){
 #app>aside{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 16px}
 #app>aside>a{align-self:center}#app>aside .logo{width:124px}
 #user{display:none}
 #logout{grid-column:2;grid-row:1;padding:8px;font-size:12px;margin:0}
 #logout .dp-icon{width:17px;height:17px}
 #app>aside nav{grid-row:2;grid-column:1/-1;display:flex;gap:5px;overflow-x:auto;padding-bottom:3px}
 #app>aside nav button{padding:8px 10px;font-size:12px;min-height:40px;gap:7px;flex:none}
 #app>aside nav .dp-icon{width:17px;height:17px}
 #app>main{padding:0 14px 22px}
 #app>main>header{margin:0 -14px 18px;padding:10px 14px;min-height:52px;gap:8px}
 #app>main>header p{font-size:11px}
 #refresh{font-size:11px;padding:7px 8px;gap:5px}
 #refresh .dp-icon{width:16px;height:16px}
 #content>h1{font-size:24px}
 #content[data-portal-view=dashboard] .home-counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
 #content[data-portal-view=dashboard] .home-count{padding:14px 10px;gap:9px}
 .home-count .dp-stat-icon{width:34px;height:34px}
 .home-count .dp-stat-icon .dp-icon{width:19px;height:19px}
 #content[data-portal-view=dashboard] .home-count strong{font-size:25px}
 #content[data-portal-view=dashboard] .home-count span{font-size:11px;line-height:1.35}
 #content[data-portal-view=dashboard] .home-lists{grid-template-columns:1fr;gap:14px}
 #content[data-portal-view=dashboard] .home-list{padding:14px}
 #content[data-portal-view=dashboard] .home-list-heading h2{font-size:16px}
 #content[data-portal-view=dashboard] .home-list-heading button{font-size:11px;max-width:46%}
 #planner-dashboard-tools{grid-template-columns:1fr;gap:14px}
 #planner-dashboard-tools>.panel:nth-child(n){grid-column:auto}
 .dp-shortcuts .grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:no-preference){#nav button,.dp-link-card{transition:background .15s,border-color .15s,box-shadow .15s}}

.dp-operations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.dp-operations .card{padding:16px;margin:0}
#planner-dashboard-tools>.panel h2{display:flex;align-items:center;gap:10px;line-height:1.3}
#planner-dashboard-tools>.panel h2 .dp-card-icon{width:34px;height:34px;border-radius:50%}
.dp-state{display:inline-block;font-size:11px;font-style:normal;font-weight:600;padding:2px 7px;border-radius:20px;margin-top:7px}
.dp-state-green{background:#e3f4e9;color:#206941}.dp-state-red{background:#ffe7e7;color:#a42c2c}.dp-state-orange{background:#fff0e4;color:#9c480c}
@media(max-width:800px){.dp-operations{grid-template-columns:1fr;gap:10px}.dp-operations .card{padding:13px}}
