/* PishkhanPlus RC6.1 — unified modern design system. Palette is driven by existing --acc setting. */
:root{
 --pp-accent:var(--acc,#0f7f8a);
 --pp-accent-soft:color-mix(in srgb,var(--pp-accent) 9%,#fff);
 --pp-accent-mid:color-mix(in srgb,var(--pp-accent) 18%,#fff);
 --pp-ink:#182b45;--pp-muted:#708198;--pp-line:#dfe7f0;
 --pp-canvas:#f4f7fb;--pp-surface:#fff;--pp-surface-2:#f8fafd;
 --pp-radius:18px;--pp-shadow:0 8px 26px rgba(24,48,78,.055);
 --pp-shadow-hover:0 13px 30px rgba(24,48,78,.09);
 --pp-ease:cubic-bezier(.2,.75,.25,1);
}
html,body{font-family:var(--f-ui,"Vazirmatn",Tahoma,sans-serif)!important}
body{background:var(--pp-canvas)!important;color:var(--pp-ink)!important}
button,input,select,textarea,.btn,.field{font-family:var(--f-ui,"Vazirmatn",Tahoma,sans-serif)!important}

/* Application shell */
.app{background:var(--pp-canvas)!important}
.side{background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)!important;border-inline-start:1px solid var(--pp-line)!important;box-shadow:-8px 0 28px rgba(20,40,70,.045)!important}
.brand{background:linear-gradient(135deg,color-mix(in srgb,var(--pp-accent) 13%,#fff),#fff 72%)!important;border:1px solid color-mix(in srgb,var(--pp-accent) 18%,var(--pp-line))!important;border-radius:20px!important;margin:10px!important;padding:14px!important}
.brand .mk{background:linear-gradient(145deg,var(--pp-accent),color-mix(in srgb,var(--pp-accent) 62%,#17365d))!important;box-shadow:0 8px 20px color-mix(in srgb,var(--pp-accent) 22%,transparent)!important;border-radius:14px!important}
.modules .mod{border-radius:13px!important;margin:3px 8px!important;transition:background .18s var(--pp-ease),color .18s var(--pp-ease),transform .18s var(--pp-ease)!important}
.modules .mod:hover{background:var(--pp-accent-soft)!important;color:var(--pp-accent)!important;transform:translateX(-2px)!important}
.modules .mod[aria-current="true"],.modules .mod.active{background:linear-gradient(100deg,color-mix(in srgb,var(--pp-accent) 13%,#fff),color-mix(in srgb,var(--pp-accent) 5%,#fff))!important;color:var(--pp-accent)!important;box-shadow:inset -3px 0 var(--pp-accent)!important;font-weight:800!important}
.work{background:var(--pp-canvas)!important;min-width:0}
.topbar{background:rgba(255,255,255,.94)!important;border:1px solid var(--pp-line)!important;border-top:0!important;box-shadow:0 5px 18px rgba(22,45,75,.035)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}
.tabs{gap:6px!important}
.tabs [role="tab"],.tabs button{border-radius:12px!important;transition:all .18s var(--pp-ease)!important}
.tabs [aria-selected="true"],.tabs .active{background:var(--pp-accent-soft)!important;color:var(--pp-accent)!important;box-shadow:inset 0 -2px var(--pp-accent)!important}
.cmd,.gpal,.gbell{border:1px solid var(--pp-line)!important;border-radius:13px!important;background:#fff!important;box-shadow:0 3px 10px rgba(20,40,70,.035)!important}

/* Page titles and section hierarchy */
.page{background:transparent!important}
.ph{padding:17px 20px!important;margin:4px 0 15px!important;border:1px solid var(--pp-line)!important;border-radius:20px!important;background:linear-gradient(110deg,#fff 0%,color-mix(in srgb,var(--pp-accent) 4%,#fff) 100%)!important;box-shadow:var(--pp-shadow)!important;position:relative;overflow:hidden}
.ph:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--pp-accent),color-mix(in srgb,var(--pp-accent) 35%,#fff));border-radius:0 4px 4px 0}
.ph h1{font-family:var(--f-brand,var(--f-ui,"Vazirmatn",Tahoma,sans-serif))!important;font-size:clamp(17px,1.5vw,22px)!important;font-weight:850!important;line-height:1.65!important;color:var(--pp-ink)!important;margin:0!important}
.ph .sub{font-size:12px!important;line-height:1.9!important;color:var(--pp-muted)!important;margin-top:4px!important}

/* Cards and their headers */
.box,.kpi,.coach,.tile2,.gcard,.ins,.viz .box,.uacc-card{border:1px solid var(--pp-line)!important;border-radius:var(--pp-radius)!important;background:var(--pp-surface)!important;box-shadow:var(--pp-shadow)!important;overflow:hidden}
.box-h,.uacc-card-h,.colk-h{min-height:48px!important;padding:11px 15px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--pp-accent) 3%,#f8fafd))!important;border-bottom:1px solid var(--pp-line)!important}
.box-h h2,.uacc-card-h h2{font-family:var(--f-brand,var(--f-ui,"Vazirmatn",Tahoma,sans-serif))!important;color:var(--pp-ink)!important;font-size:14px!important;font-weight:850!important;line-height:1.65!important;margin:0!important}
.box-h .sub,.uacc-card-h .sub{font-size:11px!important;color:var(--pp-muted)!important;line-height:1.7!important}
.box-b{padding:15px!important}
.kpi{transition:transform .18s var(--pp-ease),box-shadow .18s var(--pp-ease),border-color .18s var(--pp-ease)!important}
.kpi:hover,.box:hover{border-color:color-mix(in srgb,var(--pp-accent) 22%,var(--pp-line))!important;box-shadow:var(--pp-shadow-hover)!important}

/* Buttons, fields, chips */
.btn{border-radius:12px!important;font-weight:750!important;transition:transform .16s var(--pp-ease),box-shadow .16s var(--pp-ease),background .16s var(--pp-ease)!important}
.btn.pri,.btn.primary{background:linear-gradient(115deg,var(--pp-accent),color-mix(in srgb,var(--pp-accent) 66%,#2454a6))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 5px 14px color-mix(in srgb,var(--pp-accent) 20%,transparent)!important}
.btn.pri:hover,.btn.primary:hover{transform:translateY(-1px)!important;box-shadow:0 8px 18px color-mix(in srgb,var(--pp-accent) 25%,transparent)!important}
.btn:not(.pri):not(.primary){border-color:var(--pp-line)!important;background:#fff!important;color:#36516f!important}
.field{border:1px solid #d8e2ee!important;border-radius:11px!important;background:#fff!important;color:var(--pp-ink)!important;min-height:38px!important;transition:border-color .16s,box-shadow .16s!important}
.field:focus{border-color:var(--pp-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pp-accent) 13%,transparent)!important;outline:none!important}
.chip,.pill{border-radius:999px!important}
.pill.p-acc,.chip[aria-pressed="true"]{background:var(--pp-accent-soft)!important;border-color:color-mix(in srgb,var(--pp-accent) 20%,var(--pp-line))!important;color:var(--pp-accent)!important}

/* All bottom/status footers: compact, legible, and fluid */
.status{background:rgba(255,255,255,.96)!important;border-top:1px solid var(--pp-line)!important;box-shadow:0 -5px 20px rgba(22,45,75,.045)!important;color:#536a84!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;min-height:42px!important}
.status>*{font-size:11px!important;line-height:1.5!important}
.dlg .dlg-f,.dlg .ix2-foot,.modal-footer,.drawer-foot{background:linear-gradient(180deg,#fff,#f7fafd)!important;border-top:1px solid var(--pp-line)!important;box-shadow:0 -5px 18px rgba(22,45,75,.035)!important;padding:10px 14px!important;gap:8px!important}
.dlg .dlg-f .btn,.dlg .ix2-foot .btn{min-height:38px!important;border-radius:11px!important;font-size:12px!important}
.mnav{background:rgba(255,255,255,.97)!important;border-top:1px solid var(--pp-line)!important;box-shadow:0 -7px 22px rgba(22,45,75,.055)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
.mnav>*{border-radius:13px!important}
.mnav [aria-current="true"],.mnav .active{background:var(--pp-accent-soft)!important;color:var(--pp-accent)!important}

/* Popovers and modal headers */
.pop,.dlg{border:1px solid var(--pp-line)!important;border-radius:20px!important;box-shadow:0 22px 65px rgba(18,39,67,.17)!important}
.dlg .dlg-h{background:linear-gradient(110deg,#fff,color-mix(in srgb,var(--pp-accent) 5%,#f5f9fd))!important;border-bottom:1px solid var(--pp-line)!important;padding:13px 17px!important}
.dlg .dlg-h h2{font-size:15px!important;font-weight:850!important;color:var(--pp-ink)!important;line-height:1.7!important}
.pop-h{background:linear-gradient(110deg,#fff,color-mix(in srgb,var(--pp-accent) 5%,#f5f9fd))!important;border-bottom:1px solid var(--pp-line)!important}

/* Tables and report containers */
table{border-color:var(--pp-line)!important}
thead th,.tbl thead th{background:#f4f7fb!important;color:#435a76!important;font-weight:850!important;border-bottom:1px solid var(--pp-line)!important}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:color-mix(in srgb,var(--pp-accent) 4%,#fff)!important}
td,th{border-color:#e8edf4!important;line-height:1.8!important}

/* Palette selector becomes an immediately visible live preview */
.pals{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(82px,1fr))!important;gap:9px!important}
.palc{border:1px solid var(--pp-line)!important;border-radius:14px!important;padding:8px 6px!important;background:#fff!important;transition:transform .16s,box-shadow .16s,border-color .16s!important}
.palc .pw{height:25px!important;border-radius:8px!important;overflow:hidden!important;display:block!important;background:linear-gradient(90deg,var(--p1),var(--p2),var(--p3))!important}
.palc[aria-pressed="true"]{border-color:var(--pp-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pp-accent) 14%,transparent)!important;transform:translateY(-2px)!important}
.palc small{display:block;margin-top:6px!important;font-weight:750!important;color:#4d617b!important}

/* Remove broad page tint / excessive glow; keep modal backdrop neutral */
#layer:before,#layer:after{filter:none!important}
html body #layer{background:transparent}
html body #layer .dlg{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* Dark theme respects selected palette without washed-out surfaces */
html[data-theme="dark"] body{--pp-ink:#e7eef8;--pp-muted:#9aabc0;--pp-line:#293b51;--pp-canvas:#101b2b;--pp-surface:#17263a;--pp-surface-2:#1c2d43;background:#101b2b!important;color:#e7eef8!important}
html[data-theme="dark"] .side,html[data-theme="dark"] .topbar,html[data-theme="dark"] .status,html[data-theme="dark"] .mnav,html[data-theme="dark"] .box,html[data-theme="dark"] .kpi,html[data-theme="dark"] .dlg,html[data-theme="dark"] .pop{background:#17263a!important;color:#e7eef8!important;border-color:#293b51!important}
html[data-theme="dark"] .ph,html[data-theme="dark"] .box-h,html[data-theme="dark"] .dlg .dlg-h,html[data-theme="dark"] .dlg .dlg-f{background:#1c2d43!important;border-color:#293b51!important}
html[data-theme="dark"] .field,html[data-theme="dark"] .btn:not(.pri):not(.primary){background:#122033!important;color:#e7eef8!important;border-color:#344a63!important}
html[data-theme="dark"] .modules .mod[aria-current="true"]{background:color-mix(in srgb,var(--pp-accent) 18%,#17263a)!important}

@media(max-width:900px){
 .ph{padding:14px 15px!important;border-radius:17px!important}
 .box-h{padding:10px 12px!important}
 .box-b{padding:12px!important}
 .status{font-size:10px!important}
}
@media(max-width:640px){
 .side{box-shadow:none!important}
 .topbar{border-radius:0 0 15px 15px!important}
 .ph{margin:2px 0 11px!important;padding:12px 13px!important}
 .ph h1{font-size:16px!important}
 .box,.kpi,.coach,.tile2,.gcard,.ins{border-radius:15px!important}
 .box-h{min-height:44px!important}
 .box-h h2{font-size:13px!important}
 .status{min-height:36px!important}
 .dlg .dlg-f{flex-wrap:wrap!important}
 .dlg .dlg-f .btn{flex:1 1 auto!important;min-width:0!important}
 .pals{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}