/* AL RAYYAN - Royal Maroon and Gold. Loaded after app.css: fonts, colours, buttons and motion. */
@font-face{font-family:"Lora";src:url(fonts/lora.woff) format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-semibold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
:root{
  --gold:#C9A24B;--gold-hi:#E8C775;--gold-lo:#B88A2E;--gold-deep:#8A6420;
  --page:#F6F1E6;--bg:#FAF6EC;--line:#E4D9BC;--line-soft:#EFE7D0;
  --brass:#B88A2E;--brass-tint:#F6EEDB;--focus:#8A1538;
  --display:"Lora","Georgia","Noto Serif","Times New Roman",serif;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans","Noto Sans Arabic",sans-serif;
  --gold-btn:linear-gradient(180deg,#EBCB7C,#B88A2E);
}
body{font-size:14.5px;line-height:1.6;letter-spacing:.003em;text-rendering:optimizeLegibility}
h1,h2,h3{color:#3A0A1A;font-weight:600;letter-spacing:0}
h1{font-size:1.9rem;line-height:1.12}
h2{font-size:1.2rem}
.stat b,.plate b,.gnums b,.mini b,.pipeline b,.acard b,.gcard-head .pct{font-variant-numeric:lining-nums tabular-nums;font-weight:600}
a{color:var(--maroon)}a:hover{color:var(--gold-deep)}

/* ---------- side rail ---------- */
.sidebar{background:linear-gradient(180deg,#5A0D28,#2C0613);border-right:2px solid var(--gold)}
.brand b{font-family:"Inter",var(--font);font-weight:700;letter-spacing:.02em;font-size:1.02rem}
.nav a{border-radius:8px;transition:background .18s,transform .18s,color .18s}
.nav a:hover{background:rgba(201,162,75,.14);color:#fff;transform:translateX(2px)}
.nav a.active{background:linear-gradient(90deg,rgba(201,162,75,.38),rgba(201,162,75,.04));color:#fff}
.nav a.active:before{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));width:4px}
.nav-group{color:#E0C58A;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}
.nav-group:after{background:rgba(201,162,75,.3)}
.nav .count{background:var(--gold-btn);color:#2C0613}
.avatar{background:var(--gold-btn);color:#2C0613}

/* ---------- page, cards, metrics ---------- */
.page-head{border-bottom:1px solid var(--line)}
.card,.grid{background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(74,10,30,.06);border-radius:10px}
.card>h2:first-child{border-bottom-color:var(--line-soft)}
.stat{border-top:3px solid transparent;transition:background .2s,border-color .2s,transform .2s}
.stat.ok,.stat.warn,.stat.bad,.stat.info,.stat{border-top-color:var(--gold)}
a.stat:hover{background:#FFFBF0;transform:translateY(-2px);border-top-color:var(--gold-lo)}
.stat b{color:#4A0A1E}.stat.warn b{color:var(--gold-deep)}
.stat span:before{border-radius:50%}
th{border-bottom:1.5px solid var(--gold);color:#6B5A3A;letter-spacing:.02em}
tbody tr:hover td,table tr:hover td{background:#FFFBF0}
td a{color:var(--maroon)}
.utility input{background-color:#fff;border-color:var(--line);border-radius:10px}
.utility .bell{border-color:var(--line);border-radius:10px}

/* ---------- welcome band and quick tiles ---------- */
.hero{background:linear-gradient(120deg,#4A0A1E,#7A1031) ,var(--lattice);background-blend-mode:normal;border:1px solid var(--gold);border-radius:12px;box-shadow:0 18px 40px rgba(74,10,30,.25)}
.hero:after{content:"";position:absolute;inset:6px 6px 6px 30px;border:1px solid rgba(201,162,75,.35);border-radius:8px;pointer-events:none;z-index:-1}
.hero h1{font-size:2.1rem;color:#fff}
.hero-day{color:#E8C775;letter-spacing:.05em}
.tile{background:rgba(255,255,255,.07);border:1px solid rgba(224,189,106,.55);border-radius:8px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.tile:hover{background:var(--gold-btn);color:#2C0613;transform:translateY(-3px);box-shadow:0 0 0 3px rgba(224,189,106,.22),0 14px 30px rgba(0,0,0,.35)}
.tile:hover svg{stroke:#2C0613}

/* ---------- buttons: gold, with a sliding shine ---------- */
button,.btn{position:relative;overflow:hidden;border-radius:8px;transition:transform .18s ease,box-shadow .22s ease,background .2s,border-color .2s,color .2s}
button{background:var(--gold-btn);color:#2C0613;border:1px solid var(--gold-lo);box-shadow:0 1px 0 rgba(255,255,255,.45) inset}
button:hover{background:var(--gold-btn);border-color:var(--gold-deep);color:#2C0613;transform:translateY(-2px);box-shadow:0 0 0 3px rgba(224,189,106,.28),0 10px 22px rgba(138,100,32,.38)}
button:active,.btn:active{transform:translateY(0);box-shadow:none}
button:after,.btn:after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none}
button:hover:after,.btn:hover:after{animation:lxshine .75s ease}
@keyframes lxshine{to{left:130%}}
.btn,button.btn{background:#fff;color:#4A0A1E;border:1px solid var(--gold);box-shadow:none}
.btn:hover,button.btn:hover{background:#FFFBF0;color:#4A0A1E;border-color:var(--gold-lo);transform:translateY(-2px);box-shadow:0 0 0 3px rgba(224,189,106,.22),0 8px 18px rgba(74,10,30,.12)}
button.danger,.btn.danger{background:#fff;color:var(--bad);border-color:#E3B5B0;box-shadow:none}
button.danger:hover,.btn.danger:hover{background:var(--bad-bg);color:var(--bad);border-color:var(--bad);box-shadow:0 8px 18px rgba(179,38,30,.18)}
button svg,.btn svg{position:relative;z-index:1}
input,select,textarea{border-color:#D9CCA6;border-radius:8px;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--gold-lo)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold-lo);box-shadow:0 0 0 3px rgba(201,162,75,.35)}
label{color:#4A0A1E}
.flash{border-radius:8px}

/* ---------- motion: soft page entrance ---------- */
.content>*{animation:lxfade .5s ease both}
.content>*:nth-child(2){animation-delay:.05s}.content>*:nth-child(3){animation-delay:.1s}.content>*:nth-child(4){animation-delay:.15s}
@keyframes lxfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:900px){.tabbar{border-top:2px solid var(--gold)}.tabbar .on{color:var(--maroon)}}
@media(prefers-reduced-motion:reduce){.content>*,button:hover:after,.btn:hover:after{animation:none}button,.btn,.tile,.stat,.nav a{transition:none}button:hover,.btn:hover,.tile:hover,a.stat:hover{transform:none}}