/* Role dashboards share the executive canvas while retaining their own data,
   actions, filters and access policy. All rules are scoped to dashboard roots. */
.kc-role-dashboard{max-width:1600px;margin-inline:auto;color:var(--crm-background-ink,#172033);font-family:var(--crm-font,'Anuphan',sans-serif);font-size:14px;min-width:0}
.kc-role-dashboard>:not([hidden])~:not([hidden]){margin-top:20px}
.kc-role-dashboard>div:first-child:has(h1){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.kc-role-dashboard h1{font-size:28px;line-height:1.4;font-weight:700;margin:6px 0;color:var(--crm-background-ink,#172033)}
.kc-role-dashboard>div:first-child:has(h1)>div:first-child::before{content:'KC CUTO / DASHBOARD OVERVIEW';display:block;font-size:12px;letter-spacing:.12em;color:#087f7c}
.kc-role-dashboard>div:first-child:has(h1)>div:first-child>p{font-size:14px;line-height:1.6;margin:4px 0;color:var(--crm-background-ink,#64748b)}
.kc-role-dashboard>div:first-child:has(h1)>div:last-child{flex-shrink:1;max-width:100%}
.kc-role-dashboard>div:first-child:has(h1)>div:last-child>div{flex-wrap:wrap}
.kc-role-dashboard>div:first-child button,.kc-role-dashboard>div:first-child select,.kc-role-dashboard>div:nth-child(2) select{min-height:44px;font-size:13px;padding:8px 14px;border-radius:10px}
.kc-role-dashboard button:focus-visible,.kc-role-dashboard select:focus-visible,.kc-role-dashboard input:focus-visible{outline:3px solid #0aada9;outline-offset:3px}
.kc-role-dashboard>div.bg-white.rounded-xl.shadow-sm:nth-child(2):has(input){gap:12px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.kc-role-dashboard>div:nth-child(2):has(input)>div{min-height:44px;background:var(--crm-surface,#fff);border-color:var(--crm-border,#dce6e7);border-radius:10px;padding:8px 14px;min-width:180px}
.kc-role-dashboard>div:nth-child(2) input{min-width:0;font-size:14px}
.kc-role-dashboard>div:nth-child(2) select{background:var(--crm-surface,#fff);color:var(--crm-surface-ink,#172033);border-color:var(--crm-border,#dce6e7);min-width:150px;max-width:100%}
.kc-role-dashboard .bg-white.rounded-xl.shadow-sm{background:var(--crm-surface,#fff);color:var(--crm-surface-ink,#172033);border:1px solid var(--crm-border,#dce6e7);border-radius:var(--crm-radius,16px);box-shadow:var(--crm-shadow,0 2px 8px #17203304);min-width:0}
.kc-role-dashboard .bg-white.rounded-xl.shadow-sm:is(.p-4,.p-5){padding:22px}
.kc-role-dashboard .kc-dash-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.kc-role-dashboard .kc-dash-kpis>div.bg-white.rounded-xl.shadow-sm{padding:20px;min-width:0}
.kc-role-dashboard .kc-dash-kpis>div>div>.min-w-0>p:first-child{font-size:14px;line-height:1.5;margin:0 0 10px;color:inherit}
.kc-role-dashboard .kc-dash-kpis .text-2xl{font-size:30px;line-height:1.2;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:0;color:inherit;overflow-wrap:anywhere}
.kc-role-dashboard .kc-dash-kpis>div>div>.min-w-0>p:nth-child(n+3){font-size:13px;line-height:1.6;margin-top:12px}
.kc-role-dashboard .kc-dash-kpis>div.bg-white.rounded-xl.shadow-sm:first-child{background:#087f7c;border-color:#087f7c;color:#fff}
.kc-role-dashboard .kc-dash-kpis>div:first-child p{color:#fff!important}
.kc-role-dashboard .kc-dash-kpis>div:first-child .shrink-0{background:#ffffff26!important}
.kc-role-dashboard .kc-dash-kpis>div:first-child svg{color:#fff!important}
.kc-role-dashboard>.grid[class*="xl:grid-cols-[1fr_"]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
.kc-role-dashboard>.grid[class*="xl:grid-cols-[1fr_"]>div{min-width:0}
.kc-role-dashboard :is(h2,h3){font-size:18px;line-height:1.5;color:var(--crm-surface-ink,#172033)}
.kc-role-dashboard table{font-size:14px;width:100%;border-collapse:collapse;white-space:nowrap}
.kc-role-dashboard th{font-size:12px;padding:12px 10px;background:#94a3b810}
.kc-role-dashboard td{padding:13px 10px;border-color:var(--crm-border,#e2e8f0);font-variant-numeric:tabular-nums}
.kc-role-dashboard .overflow-x-auto{max-width:100%;overflow-x:auto}
@media(min-width:1700px){.kc-role-dashboard .kc-dash-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1100px){.kc-role-dashboard>.grid[class*="xl:grid-cols-[1fr_"]{grid-template-columns:minmax(0,1fr)}.kc-role-dashboard .kc-dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .kc-role-dashboard>div:first-child:has(h1){align-items:flex-start;flex-direction:column;gap:10px}
 .kc-role-dashboard h1{font-size:23px}
 .kc-role-dashboard .kc-dash-kpis{gap:10px}
 .kc-role-dashboard .kc-dash-kpis>div.bg-white.rounded-xl.shadow-sm{padding:14px}
 .kc-role-dashboard .kc-dash-kpis>div>div{flex-wrap:wrap}
 .kc-role-dashboard .kc-dash-kpis>div>div>.min-w-0{width:100%}
 .kc-role-dashboard .kc-dash-kpis .text-2xl{font-size:25px}
 .kc-role-dashboard .kc-dash-kpis>div>div>.min-w-0>p:first-child{min-height:42px}
 .kc-role-dashboard .bg-white.rounded-xl.shadow-sm:is(.p-4,.p-5){padding:16px}
 .kc-role-dashboard>div:nth-child(2) select{flex:1;min-width:130px}
}
@media screen{
 html[data-crm-personal=true] .kc-app .kc-role-dashboard .kc-dash-kpis>div:first-child{background-color:#087f7c!important;border-color:#087f7c!important;color:#fff}
 html[data-crm-personal=true] .kc-app .kc-role-dashboard .kc-dash-kpis>div:first-child p{color:#fff!important}
}