/* =====================================================================
* ux-refresh.css — "Burgundy Court" design system for منصة عدالة (web)
* ---------------------------------------------------------------------
* Full cosmetic overhaul + layout change: the horizontal tab strip becomes
* a fixed LEFT SIDEBAR, everything else shifts right into a cream canvas.
* Palette: burgundy + antique gold + cream (user-chosen).
*
* Pure CSS, injected into by the server (toggle ADALA_UX=0). It
* restyles/repositions existing elements only — never touches the DOM, the
* .page/.hide tab logic, or the calculation. Scoped @media screen so the
* printable report is unaffected. Collapses back to a top bar on mobile.
* ===================================================================== */
@media screen {
:root{
--c-wine:#6d1f2c; /* burgundy — sidebar / brand */
--c-wine-2:#8a2a3a;
--c-wine-3:#4c1420; /* deep shade */
--c-brass:#b8892d; /* antique gold accent */
--c-brass-2:#d7b45c;
--c-brass-soft:#eed9a3;
--c-canvas:#f7f1e6; /* cream page */
--c-canvas-2:#f0e7d6;
--c-paper:#fffdf9; /* warm white cards */
--c-ink:#2a1f22; /* text */
--c-muted:#7a6b6e;
--c-line:#e8ddc9;
--c-line-2:#dccbae;
--sidebar-w:252px;
--r:18px; --r-sm:12px;
--sh-sm:0 1px 2px rgba(60,25,32,.05), 0 2px 8px rgba(60,25,32,.06);
--sh:0 8px 22px rgba(60,25,32,.08), 0 18px 46px rgba(60,25,32,.09);
--sh-lg:0 14px 34px rgba(60,25,32,.12), 0 36px 70px rgba(60,25,32,.13);
--focus:0 0 0 3px rgba(184,137,45,.42);
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ---- Canvas + app shell (content shifted right of the sidebar) --- */
body{
padding-left:calc(var(--sidebar-w) + 18px) !important;
background:
radial-gradient(1000px 460px at 92% -8%, rgba(184,137,45,.10), transparent 60%),
linear-gradient(180deg, var(--c-canvas), var(--c-canvas-2)) !important;
color:var(--c-ink) !important;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:.1px;
}
body::before{
content:""; position:fixed; inset:0 0 0 var(--sidebar-w); z-index:0; pointer-events:none;
background-image:url('data:image/svg+xml;utf8,');
opacity:.045;
}
main.wrap, header .wrap, .footer .wrap{ position:relative; z-index:1; }
::selection{ background:rgba(184,137,45,.25); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-thumb{ background:var(--c-line-2); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
/* ---- LEFT SIDEBAR (was the horizontal tab bar) ------------------- */
nav.toolbar{
position:fixed !important; top:0 !important; left:0 !important; right:auto !important; bottom:0 !important;
width:var(--sidebar-w) !important; max-width:var(--sidebar-w) !important; min-width:var(--sidebar-w) !important;
margin:0 !important; border-radius:0 !important; z-index:60 !important;
display:flex !important; flex-direction:column; padding:0 !important;
background:linear-gradient(180deg, var(--c-wine-2) 0%, var(--c-wine) 45%, var(--c-wine-3) 100%) !important;
border-right:1px solid rgba(238,217,163,.35) !important; border-bottom:0 !important;
box-shadow:8px 0 30px rgba(40,15,20,.18) !important;
backdrop-filter:none !important; filter:none !important;
}
/* Brand header at the top of the sidebar */
nav.toolbar::before{
content:"⚖ منصة عدالة";
display:block; color:#f6e7c6; font-weight:900; font-size:15px; letter-spacing:.3px;
padding:16px 18px 13px; margin-bottom:2px;
border-bottom:1px solid rgba(238,217,163,.22);
text-shadow:0 1px 8px rgba(0,0,0,.35);
}
/* ---- Top ribbon (المملكة المغربية) — burgundy, to merge with sidebar */
body .royal-strip, body .top-royal-strip{
background:linear-gradient(90deg, #4c1420, var(--c-wine) 55%, #4c1420) !important;
border-bottom:1px solid rgba(238,217,163,.3) !important;
box-shadow:0 6px 18px rgba(40,15,20,.16) !important;
}
body .royal-strip span{
background:rgba(38,12,18,.5) !important;
border:1px solid rgba(238,217,163,.35) !important;
color:#f6e7c6 !important;
}
nav.toolbar .wrap.tabs{
flex:1 1 auto; display:flex !important; flex-direction:column; align-items:stretch;
gap:4px; overflow-y:auto; overflow-x:hidden;
max-width:none !important; width:auto !important; margin:0 !important; padding:12px 12px 18px !important;
background:transparent !important; border:0 !important; box-shadow:none !important;
}
nav.toolbar .wrap.tabs::-webkit-scrollbar{ width:6px; }
nav.toolbar .wrap.tabs::-webkit-scrollbar-thumb{ background:rgba(238,217,163,.3); }
.tab{
display:flex; align-items:center; justify-content:flex-start; gap:8px;
width:100%; text-align:right;
border:1px solid transparent !important; background:transparent !important;
color:#efd9bf !important; font-weight:700 !important; font-size:13.5px;
padding:9px 13px !important; border-radius:10px !important; white-space:normal; line-height:1.3; cursor:pointer;
transition:background .16s var(--ease), color .16s var(--ease), transform .1s var(--ease);
}
.tab::before{ content:"›"; color:var(--c-brass-2); font-weight:900; opacity:.7; }
.tab:hover{ background:rgba(255,255,255,.09) !important; color:#fff !important; }
.tab:active{ transform:translateX(-2px); }
.tab.active{
background:linear-gradient(135deg, #e6c46e, #b8892d) !important;
color:#3a1508 !important; border-color:rgba(255,255,255,.28) !important;
box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.tab.active::before{ content:"⚖"; color:#3a1508; opacity:1; }
.tab.active::after{ display:none !important; }
/* ---- Hero (burgundy, to match the shell) ------------------------- */
/* header.hero.golden-hero (0,2,1) beats the app's .hero.golden-hero navy !important */
header.hero.golden-hero, .golden-hero{
position:relative;
background:
radial-gradient(760px 340px at 84% -10%, rgba(215,180,92,.30), transparent 60%),
linear-gradient(135deg, #4a1520 0%, #7a2333 55%, #4a1520 100%) !important;
border-radius:0 0 28px 28px !important;
box-shadow:0 24px 60px rgba(40,15,20,.32) !important;
overflow:hidden;
}
.golden-hero::before{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:url('data:image/svg+xml;utf8,');
opacity:.10; -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.golden-hero::after{
content:""; position:absolute; left:6%; right:6%; bottom:0; height:2px;
background:linear-gradient(90deg, transparent, rgba(238,217,163,.9), transparent);
}
.golden-hero-inner{ position:relative; z-index:1; padding:20px 0 22px !important; gap:24px !important; }
.golden-icon{
width:70px !important; height:70px !important; border-radius:22px !important;
background:linear-gradient(160deg, #f0d488, #c39a3f 60%, #a9781f) !important;
color:#4a1520 !important; font-size:38px !important;
box-shadow:0 16px 40px rgba(184,137,45,.45), inset 0 1px 0 rgba(255,255,255,.5) !important;
border:1px solid rgba(255,255,255,.25);
}
.golden-title-block h1{
color:#fff !important; background:none !important; -webkit-text-fill-color:#fff !important;
font-weight:900 !important; font-size:clamp(20px,2.4vw,30px) !important;
line-height:1.35 !important; letter-spacing:.3px; margin:2px 0 8px !important;
text-shadow:0 2px 16px rgba(0,0,0,.4); display:inline-block;
}
.golden-title-block h1::after{
content:""; display:block; height:3px; width:96px; margin-top:12px; border-radius:3px;
background:linear-gradient(90deg, #eed9a3, #b8892d); box-shadow:0 2px 10px rgba(184,137,45,.5);
}
.golden-title-block .subtitle{
color:#f0dbc9 !important; font-weight:600 !important;
font-size:clamp(13px,1.4vw,16px) !important; line-height:1.85 !important; max-width:62ch;
}
.author-card, .home-badge-card{
background:rgba(50,15,22,.40) !important; border:1px solid rgba(238,217,163,.5) !important;
border-radius:24px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 20px 46px rgba(0,0,0,.3) !important; backdrop-filter:blur(2px);
}
.home-badge-img{ border-radius:18px !important; }
/* ---- Panels / cards ---------------------------------------------- */
.dashboard{ gap:20px !important; }
.card{
background:var(--c-paper) !important; border:1px solid var(--c-line) !important;
border-radius:var(--r) !important; box-shadow:var(--sh) !important; padding:24px !important;
transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{ box-shadow:var(--sh-lg) !important; border-color:var(--c-line-2) !important; }
.dashboard .card{ position:relative; overflow:hidden; }
.dashboard .card::before{
content:""; position:absolute; inset:0 0 auto 0; height:3px;
background:linear-gradient(90deg, var(--c-brass), var(--c-brass-2), var(--c-brass));
}
.card h2, .card h3{
color:var(--c-wine) !important; font-weight:900; letter-spacing:.2px; line-height:1.55;
display:flex; align-items:center; gap:11px; margin-top:4px;
}
.card h2::before{
content:""; flex:0 0 auto; width:6px; height:22px; border-radius:3px;
background:linear-gradient(180deg, var(--c-brass-2), var(--c-brass)); box-shadow:0 2px 8px rgba(184,137,45,.4);
}
/* ---- Chips ------------------------------------------------------- */
.mahakim-chip{
display:inline-flex; align-items:center; gap:7px;
background:linear-gradient(135deg, rgba(109,31,44,.10), rgba(184,137,45,.18)) !important;
color:var(--c-wine) !important; border:1px solid rgba(184,137,45,.45) !important;
border-radius:999px !important; padding:6px 14px !important; font-weight:800; font-size:12.5px;
}
.mahakim-chip::before{ content:"⚖"; font-size:13px; opacity:.85; }
/* ---- Form fields ------------------------------------------------- */
label{ color:var(--c-wine) !important; font-weight:800; }
input, select, textarea{
border:1.5px solid var(--c-line-2) !important; border-radius:var(--r-sm) !important;
background:#fffdf8 !important; color:var(--c-ink) !important;
padding:11px 13px !important; min-height:44px; font-size:15px;
transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
input:hover, select:hover, textarea:hover{ border-color:#c9b78f !important; }
input:focus, select:focus, textarea:focus{
outline:none !important; border-color:var(--c-brass) !important; box-shadow:var(--focus) !important; background:#fff !important;
}
input::placeholder, textarea::placeholder{ color:#a99b8b !important; }
/* ---- Buttons ----------------------------------------------------- */
.btn{
border-radius:12px !important; font-weight:800 !important; padding:11px 18px !important;
min-height:44px; border:1px solid transparent !important; box-shadow:var(--sh-sm);
transition:transform .12s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--sh); }
.btn:active{ transform:translateY(0); filter:brightness(.97); }
.btn.gold{ background:linear-gradient(135deg, #e0bd63, #b8892d) !important; color:#3a1508 !important; border-color:rgba(120,90,22,.4) !important; }
.btn.primary, .btn.primary.wide{ background:linear-gradient(135deg, var(--c-wine-2), var(--c-wine)) !important; color:#fff !important; border-color:rgba(184,137,45,.45) !important; }
.btn.light{ background:#f4ead7 !important; color:var(--c-wine) !important; border-color:var(--c-line-2) !important; }
.btn.light:hover{ background:#eee0c8 !important; }
.btn.danger{ background:linear-gradient(135deg, #a83a3f, #7f1d2a) !important; color:#fff !important; }
/* ---- Focus visibility -------------------------------------------- */
a:focus-visible, button:focus-visible, .tab:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, summary:focus-visible{
outline:3px solid var(--c-brass) !important; outline-offset:2px !important; border-radius:8px;
}
/* ---- Result — focal point ---------------------------------------- */
.result{
background:linear-gradient(135deg, #fdf8ee, #fffdf9) !important;
border:1.5px solid rgba(184,137,45,.5) !important; border-radius:var(--r) !important;
box-shadow:var(--sh) !important; padding:20px 22px !important; position:relative; overflow:hidden;
}
.result::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg, var(--c-wine), var(--c-brass)); }
.result strong, .result b{ color:var(--c-wine) !important; }
/* ---- Tables ------------------------------------------------------ */
.tablewrap{ border:1px solid var(--c-line) !important; border-radius:var(--r-sm) !important; box-shadow:var(--sh-sm); overflow:auto; }
table.table th, .tablewrap table th{ background:linear-gradient(180deg, var(--c-wine-2), var(--c-wine)) !important; color:#fff !important; font-weight:800; }
.tablewrap table tr:nth-child(even) td{ background:#faf4e9 !important; }
.tablewrap table td, .tablewrap table th{ border-color:var(--c-line) !important; }
/* ---- Banners ----------------------------------------------------- */
.marjaa-final-review-banner{ background:linear-gradient(135deg, #fbf4e7, #fffdf9) !important; border:1px solid rgba(184,137,45,.35) !important; border-radius:var(--r-sm) !important; box-shadow:var(--sh-sm); line-height:1.95; }
.trial-subscription-banner{ border-radius:var(--r-sm) !important; box-shadow:var(--sh-sm); line-height:1.9; }
/* ---- Footer ------------------------------------------------------ */
.footer{ background:linear-gradient(180deg, var(--c-wine), var(--c-wine-3)) !important; color:#f0dcc9 !important; border-top:2px solid var(--c-brass) !important; }
/* ---- Motion ------------------------------------------------------ */
section.page:not(.hide){ animation:ux-fade .3s var(--ease) both; }
@keyframes ux-fade{ from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none;} }
/* ---- Responsive: collapse the sidebar back to a top bar ---------- */
@media (max-width:960px){
body{ padding-left:0 !important; }
body::before{ inset:0 !important; }
nav.toolbar{
position:sticky !important; top:0 !important; left:auto !important; right:auto !important; bottom:auto !important;
width:auto !important; max-width:none !important; min-width:0 !important; flex-direction:row;
border-right:0 !important; border-bottom:1px solid rgba(238,217,163,.35) !important; box-shadow:var(--sh-sm) !important;
}
nav.toolbar::before{ display:none; }
nav.toolbar .wrap.tabs{ flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:9px 12px !important; gap:8px; }
.tab{ width:auto; white-space:nowrap; }
.tab::before{ display:none; }
.golden-hero-inner{ grid-template-columns:1fr !important; text-align:center; }
.golden-title-block{ text-align:center !important; }
.golden-title-block h1::after{ margin-inline:auto; }
}
@media (max-width:820px){
main.wrap, .wrap{ padding-left:14px; padding-right:14px; }
.dashboard{ grid-template-columns:1fr !important; }
.card{ padding:18px 16px !important; }
}
@media (max-width:520px){ .btn{ width:100%; justify-content:center; } }
/* ---- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }
}