/* ===== DESIGN 2.0 — one finishing layer over every section and every theme.
   Built only from each theme's own colours (--bg --tx --cd --bo --ac --ao --mu --sb --sn), so all 20 themes keep
   their character and simply look finer: calmer surfaces, clearer type, softer depth, one shape for every control.
   Screen only — the paper of a petition and anything printed are not touched. ===== */
@media screen{
:root{--rad:16px;--rad-s:11px;--ring:0 0 0 4px color-mix(in srgb,var(--ac) 22%,transparent);--lift:0 1px 2px rgba(0,0,0,.04),0 10px 30px -14px color-mix(in srgb,var(--tx) 26%,transparent);--lift2:0 2px 4px rgba(0,0,0,.05),0 18px 40px -16px color-mix(in srgb,var(--tx) 32%,transparent)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:color-mix(in srgb,var(--ac) 32%,transparent)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* the page itself: a very soft light from the theme colour, so it is not a flat sheet */
.mn{background:radial-gradient(900px 420px at 100% -10%,color-mix(in srgb,var(--ac) 7%,transparent),transparent 70%),radial-gradient(700px 380px at 0 110%,color-mix(in srgb,var(--tx) 4%,transparent),transparent 70%);gap:20px}

/* scrollbars: thin, quiet */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--tx) 22%,transparent) transparent}
*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--tx) 20%,transparent);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--tx) 34%,transparent)}

/* top bar: glass, stays at the top */
.pk{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--cd) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--bo) 80%,transparent);box-shadow:0 6px 20px -18px rgba(0,0,0,.5)}

/* side menu */
.sb{box-shadow:inset 1px 0 0 rgba(255,255,255,.06),0 0 30px -10px rgba(0,0,0,.35)}
.sb:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px 200px at 50% 0,rgba(255,255,255,.10),transparent 70%)}
.sb>*{position:relative}
.nl{gap:3px}
.nv{border-radius:12px;font-weight:600;letter-spacing:.1px;position:relative}
.nv:not(.on):hover{background:rgba(255,255,255,.08);color:var(--st)}
.nv.on{background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 88%,#fff),var(--ac));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px color-mix(in srgb,var(--ac) 70%,transparent)!important}
.nv.on:after{content:"";position:absolute;inset-inline-start:-12px;top:22%;bottom:22%;width:4px;border-radius:0 4px 4px 0;background:var(--ac);box-shadow:0 0 10px var(--ac)}
html[dir=rtl] .nv.on:after{border-radius:4px 0 0 4px}

/* headings */
.hd h1{font-size:25px;font-weight:800;letter-spacing:-.2px;line-height:1.3}
.cd h2,.cd h3{font-weight:800;letter-spacing:-.1px}
.mu{line-height:1.6}

/* cards and panels: one surface for everything */
.cd{border-radius:var(--rad);border:1px solid color-mix(in srgb,var(--bo) 90%,transparent);box-shadow:var(--lift);transition:box-shadow .2s ease,border-color .2s ease}
.cd:hover{box-shadow:var(--lift2)}
.hero{border-radius:calc(var(--rad) + 4px);box-shadow:var(--lift2);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;inset-inline-start:-120px;top:-170px;background:rgba(255,255,255,.07);pointer-events:none}

/* buttons: one shape, two weights */
.bt{border-radius:var(--rad-s);background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 86%,#fff),var(--ac));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -8px color-mix(in srgb,var(--ac) 80%,transparent);letter-spacing:.1px}
.bt:hover{filter:brightness(1.04)}
.b2{border-radius:var(--rad-s);background:var(--cd);border-color:color-mix(in srgb,var(--bo) 100%,transparent);font-weight:600}
.b2:hover{background:color-mix(in srgb,var(--ac) 8%,var(--cd));border-color:color-mix(in srgb,var(--ac) 40%,var(--bo))}
button.ib{border-radius:10px}
.bt:disabled,.b2:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}

/* fields */
input[type=text],input[type=date],input[type=time],input[type=number],input[type=search],input[type=email],input[type=tel],input[type=password],select,textarea{border:1.5px solid color-mix(in srgb,var(--bo) 100%,transparent);border-radius:var(--rad-s);background:var(--cd);transition:border-color .15s,box-shadow .15s,background .15s}
input[type=text]:hover,input[type=date]:hover,input[type=number]:hover,input[type=search]:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--tx) 22%,var(--bo))}
input[type=text]:focus,input[type=date]:focus,input[type=time]:focus,input[type=number]:focus,input[type=search]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=password]:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);box-shadow:var(--ring)}
::placeholder{color:color-mix(in srgb,var(--mu) 80%,transparent)}
label,.fl>span,.ff label{font-weight:600}

/* tables: the list of every section */
.tw{border-radius:var(--rad);overflow:auto}
.cd.tw{padding:8px}
table{border-collapse:separate;border-spacing:0}
thead th{padding:13px 12px;font-size:13px;font-weight:800;letter-spacing:.2px}
thead tr th:first-child{border-start-start-radius:12px;border-end-start-radius:12px}
thead tr th:last-child{border-start-end-radius:12px;border-end-end-radius:12px}
tbody td{padding:13px 12px;border-top:1px solid color-mix(in srgb,var(--bo) 75%,transparent);vertical-align:middle}
tbody tr:first-child td{border-top:0}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--tx) 2.2%,transparent)}
tbody tr.rr:hover td{background:color-mix(in srgb,var(--ac) 8%,transparent)}

/* badges, chips */
.bd{font-weight:700;letter-spacing:.1px;padding:3px 12px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bc) 14%,transparent)}

/* dialogs */
dialog{border-radius:22px;padding:24px;border:1px solid color-mix(in srgb,var(--bo) 90%,transparent)}
dialog::backdrop{background:color-mix(in srgb,#000 48%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
dialog h2:first-child,dialog h3:first-child{font-weight:800}

/* empty states and notes */
.mu:empty{display:none}

/* the Word editor: a calm ribbon like Word, a desk under the page */
.wpt{border-radius:var(--rad);overflow:hidden;border:1px solid color-mix(in srgb,var(--bo) 90%,transparent);background:var(--cd);box-shadow:var(--lift)}
.rbt{background:color-mix(in srgb,var(--tx) 3%,var(--cd));padding:6px 10px 0;gap:4px}
.wpt .rtab{border:0;border-radius:9px 9px 0 0;padding:0 14px;color:var(--mu);font-weight:700;position:relative;background:transparent}
.wpt .rtab:hover{color:var(--tx);background:color-mix(in srgb,var(--tx) 5%,transparent)}
.wpt .rtab.on{background:var(--cd);color:var(--tx);box-shadow:0 -1px 0 var(--bo),1px 0 0 var(--bo),-1px 0 0 var(--bo)}
.wpt .rtab.on:after{content:"";position:absolute;inset-inline:12px;bottom:0;height:3px;border-radius:3px;background:var(--ac)}
.rbp{padding:8px 10px;gap:0}
.rg{padding:0 12px;border-inline-start:1px solid color-mix(in srgb,var(--bo) 80%,transparent)}
.rgl{font-weight:700;letter-spacing:.2px;opacity:.85}
.wpt .rbb{border-radius:9px;border:1px solid transparent;background:transparent}
.wpt .rbb:hover{background:color-mix(in srgb,var(--ac) 10%,transparent);border-color:color-mix(in srgb,var(--ac) 25%,transparent)}
.wpt .rbb.on{background:color-mix(in srgb,var(--ac) 22%,transparent);border-color:color-mix(in srgb,var(--ac) 45%,transparent)}
.wpt select,.wpt input[type=text],.wpt input[type=number]{min-height:30px;border-radius:8px}
.wpd{background:linear-gradient(180deg,color-mix(in srgb,var(--tx) 7%,var(--bg)),color-mix(in srgb,var(--tx) 11%,var(--bg)));border-radius:calc(var(--rad) + 2px);padding:28px 12px;box-shadow:inset 0 2px 10px rgba(0,0,0,.06)}
.wsh{box-shadow:0 1px 3px rgba(0,0,0,.12),0 12px 34px -10px rgba(0,0,0,.30);border-radius:2px}

/* home tiles of each section (petitions, courts, templates...) get the same soft lift */
.p3tab,.p3c,.ptc,.gvt,.ct,.kc{transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.p3tab:hover,.ct:hover{transform:translateY(-2px)}

/* big numbers (dashboard, financial report): never cut off — written left-to-right, with even-width digits */
.kp{overflow:visible!important;direction:ltr;unicode-bidi:isolate;text-align:end;font-variant-numeric:tabular-nums;letter-spacing:-.3px;white-space:nowrap}
html[dir=rtl] .kp{text-align:right}
.kc>div:not(.ic){flex:1;min-width:0}
.kc{overflow:visible!important}

/* action buttons in every list: each action has its own colour, so it is found at a glance */
td button.ib,.fc button.ib{border:1px solid color-mix(in srgb,var(--bo) 100%,transparent);background:var(--cd)}
button.ib[data-a=view],button.ib[data-a=det],button.ib[data-a=dt],button.ib[title*="بینین"],button.ib[title*="دیتن"]{color:#2563EB;background:color-mix(in srgb,#2563EB 9%,var(--cd));border-color:color-mix(in srgb,#2563EB 22%,var(--bo))}
button.ib[data-a=edit],button.ib[title*="دەستکاری"]{color:#B7791F;background:color-mix(in srgb,#F59E0B 11%,var(--cd));border-color:color-mix(in srgb,#F59E0B 26%,var(--bo))}
button.ib[data-a=del],button.ib[data-a=pwdel],button.ib[data-a=crdel],button.ib[title*="سڕینەوە"],button.ib.wpdl{color:#C0362C;background:color-mix(in srgb,#EF4444 9%,var(--cd));border-color:color-mix(in srgb,#EF4444 22%,var(--bo))}
button.ib[data-a=prn],button.ib[title*="چاپ"]{color:#475569;background:color-mix(in srgb,#64748B 9%,var(--cd))}
button.ib:hover{filter:saturate(1.2) brightness(1.03)}

/* the small icon tiles before names (clients, companies...) and the page title icon: same soft 3D */
.hd .ic,.kc .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -8px color-mix(in srgb,var(--bc) 60%,transparent)}
.av{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px -6px rgba(0,0,0,.35)}
svg[data-ic]{stroke-linecap:round;stroke-linejoin:round}

/* small screens: a little tighter */
@media (max-width:800px){.hd h1{font-size:21px}.cd{border-radius:14px}.mn{gap:14px}thead th,tbody td{padding:11px 10px}}

/* motion only for those who want it */
@media (prefers-reduced-motion:reduce){.cd,.p3tab,.p3c,.ptc,.ct,.kc{transition:none}}
}
/* dark themes: a touch more contrast on surfaces */
@media screen{body[data-t="n"] .cd{border-color:color-mix(in srgb,var(--bo) 100%,#fff 4%)}body[data-t="n"] tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}}
/* ===== /DESIGN 2.0 ===== */