/* ==========================================================================
   Alico ERP — "Finch" theme. Glass, shine, waves and motion over the base kit.
   Colours from the Alico logo: navy diamond, finch red, golden yellow, olive leaf.
   Loaded after app.css + menubar.css. Print keeps plain black on white.
   ========================================================================== */
:root{
  --al-navy:#0B1D45; --al-navy-2:#132C66; --al-navy-3:#1E3F8A;
  --al-red:#E2382A; --al-orange:#F2771E; --al-gold:#F2B705; --al-gold-2:#FFD54A;
  --al-olive:#6B8E23; --al-leaf:#8DB43A; --al-sky:#3FA9F5;
  --al-glass:rgba(255,255,255,.62); --al-glass-2:rgba(255,255,255,.78); --al-glass-line:rgba(255,255,255,.75);
  --al-shadow:0 1px 1px rgba(11,29,69,.04),0 8px 24px rgba(11,29,69,.10),0 24px 60px -24px rgba(11,29,69,.25);
  --al-radius:18px;
  --canvas:#EEF2FA; --ink:#0B1D45; --ink-2:#14275A; --ink-3:#2D4378; --muted:#5E6E92;
  --brass:#E89B0C; --brass-lt:#F5C842; --rule:#D5DDEE; --rule-soft:#E8EDF7;
  --pos:#2E7D32; --neg:#C62828;
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:al-vt-out .28s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:al-vt-in .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes al-vt-out{to{opacity:0;transform:translateY(-10px) scale(.985);filter:blur(3px)}}
@keyframes al-vt-in{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(4px)}}

html{scroll-behavior:smooth}
body{background:#E9EEF8;color:var(--ink-2);min-height:100vh;position:relative;overflow-x:hidden}
body::before{ /* living colour mesh */
  content:"";position:fixed;inset:-20%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(38% 42% at 12% 18%,rgba(63,169,245,.30),transparent 70%),
    radial-gradient(32% 38% at 88% 12%,rgba(242,183,5,.30),transparent 70%),
    radial-gradient(36% 40% at 80% 86%,rgba(226,56,42,.18),transparent 70%),
    radial-gradient(40% 44% at 20% 92%,rgba(141,180,58,.22),transparent 70%),
    linear-gradient(160deg,#F4F7FD 0%,#E6ECF8 55%,#EEF1F8 100%);
  animation:al-mesh 26s ease-in-out infinite alternate;
}
@keyframes al-mesh{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-3%,2%,0) rotate(4deg)}100%{transform:translate3d(2%,-2%,0) rotate(-3deg)}}
.al-waves{position:fixed;left:0;right:0;bottom:0;height:220px;z-index:-2;pointer-events:none;overflow:hidden}
.al-waves svg{position:absolute;bottom:0;width:200%;height:100%;left:0}
.al-waves .w1{animation:al-wave 22s linear infinite;opacity:.55}
.al-waves .w2{animation:al-wave 15s linear infinite reverse;opacity:.45}
.al-waves .w3{animation:al-wave 30s linear infinite;opacity:.35}
@keyframes al-wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.al-orb{position:fixed;border-radius:50%;filter:blur(40px);z-index:-2;pointer-events:none;opacity:.5;animation:al-float 18s ease-in-out infinite}
.al-orb.o1{width:320px;height:320px;background:radial-gradient(circle,#FFD54A,transparent 65%);top:12%;right:-80px}
.al-orb.o2{width:260px;height:260px;background:radial-gradient(circle,#3FA9F5,transparent 65%);top:46%;left:-90px;animation-delay:-6s}
.al-orb.o3{width:220px;height:220px;background:radial-gradient(circle,#E2382A,transparent 65%);bottom:8%;right:22%;opacity:.25;animation-delay:-11s}
@keyframes al-float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.08)}66%{transform:translate(-20px,24px) scale(.95)}}

/* ---------- top bar ---------- */
.mb-head{
  background:linear-gradient(115deg,rgba(9,22,54,.96),rgba(19,44,102,.92) 55%,rgba(30,63,138,.9));
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:0;position:sticky;top:0;z-index:60;box-shadow:0 10px 30px -12px rgba(11,29,69,.55);overflow:hidden;
}
.mb-head::after{ /* shine line */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--al-gold),var(--al-red),var(--al-leaf),var(--al-sky),transparent);
  background-size:200% 100%;animation:al-shine-line 6s linear infinite;
}
.mb-head::before{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);animation:al-sweep 7s ease-in-out infinite;pointer-events:none}
@keyframes al-shine-line{to{background-position:-200% 0}}
@keyframes al-sweep{0%,60%{left:-40%}100%{left:130%}}
.mb-brand{gap:12px}
.mb-brand .mono.mono-logo,.al-logo-badge{
  width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%,#fff,#EAF0FB);box-shadow:0 0 0 2px rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.35);
  padding:4px;animation:al-badge-glow 4s ease-in-out infinite;
}
.mb-brand .mono.mono-logo img,.al-logo-badge img{width:100%;height:100%;object-fit:contain}
@keyframes al-badge-glow{0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 2px rgba(242,183,5,.85),0 0 22px rgba(242,183,5,.55)}}
.al-brand-name{display:flex;flex-direction:column;line-height:1.05}
.al-brand-name b{font-family:'Audiowide',Inter,sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:.06em;
  background:linear-gradient(90deg,#fff,#FFE08A,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:al-text-shine 5s linear infinite}
.al-brand-name small{font-size:.7rem;color:rgba(255,255,255,.72);letter-spacing:.08em;text-transform:uppercase}
@keyframes al-text-shine{to{background-position:-200% 0}}
.mb-head .fy-chip,.mb-head .badge-user{border-radius:999px}
.mb-head .badge-role{background:linear-gradient(135deg,var(--al-gold),var(--al-orange))}
.al-clock{color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;font-size:.82rem;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.al-kbtn{display:inline-flex;align-items:center;gap:8px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:5px 12px;font-size:.82rem;cursor:pointer;transition:all .2s}
.al-kbtn:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.al-kbtn kbd{background:rgba(255,255,255,.18);border-radius:5px;padding:0 5px;font-size:.7rem;color:#fff}

/* ---------- menu bar ---------- */
.mb-bar{background:rgba(255,255,255,.55);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.7);box-shadow:0 8px 24px -16px rgba(11,29,69,.35);position:sticky;top:64px;z-index:55}
.cl-menu-btn{border-radius:12px 12px 0 0;position:relative}
.cl-menu-btn::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--al-gold),var(--al-red));transform:scaleX(0);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.cl-menu-btn:hover::after,.cl-menu.open>.cl-menu-btn::after,.cl-menu.has-active>.cl-menu-btn::after{transform:scaleX(1)}
.cl-menu-btn:hover,.cl-menu.open>.cl-menu-btn,.cl-menu.has-active>.cl-menu-btn{border-bottom-color:transparent!important;background:rgba(255,255,255,.6)}
.cl-drop{background:rgba(255,255,255,.86);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 24px 60px -18px rgba(11,29,69,.45);padding:8px;
  transform-origin:top left}
.cl-menu.open .cl-drop{animation:al-drop .26s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes al-drop{from{opacity:0;transform:translateY(-8px) scale(.96)}}
.cl-menu.open .cl-drop a{animation:al-fade-up .3s both}
.cl-menu.open .cl-drop a:nth-child(2){animation-delay:.02s}.cl-menu.open .cl-drop a:nth-child(3){animation-delay:.04s}
.cl-menu.open .cl-drop a:nth-child(4){animation-delay:.06s}.cl-menu.open .cl-drop a:nth-child(5){animation-delay:.08s}
.cl-menu.open .cl-drop a:nth-child(n+6){animation-delay:.1s}
.cl-drop a{border-radius:10px;transition:background .15s,transform .15s}
.cl-drop a:hover{transform:translateX(3px);background:linear-gradient(90deg,rgba(242,183,5,.16),rgba(63,169,245,.08))}
.cl-drop a:hover .cl-k,.cl-drop a.active .cl-k{background:linear-gradient(135deg,var(--al-gold),var(--al-orange));border-color:transparent}
.cl-menu.al-new>.cl-menu-btn span::after{content:"NEW";font-size:.55rem;font-weight:800;margin-left:6px;padding:1px 5px;border-radius:5px;
  background:linear-gradient(135deg,var(--al-red),var(--al-orange));color:#fff;vertical-align:2px}

/* ---------- open windows strip ---------- */
.al-tabs{display:flex;gap:6px;align-items:center;padding:8px 22px 0;width:100%;max-width:1320px;margin:0 auto;box-sizing:border-box;min-width:0;overflow-x:auto;scrollbar-width:none}
.al-tabs::-webkit-scrollbar{display:none}
.al-tabs-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-right:4px;white-space:nowrap}
.al-tab{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;border-radius:12px;font-size:.8rem;white-space:nowrap;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);color:var(--ink-3);text-decoration:none;
  box-shadow:0 2px 8px rgba(11,29,69,.06);transition:all .2s;animation:al-tab-in .35s cubic-bezier(.2,.9,.25,1.2) both}
.al-tab:hover{background:#fff;color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(11,29,69,.35)}
.al-tab.cur{background:linear-gradient(135deg,var(--al-navy-2),var(--al-navy-3));color:#fff;border-color:transparent}
.al-tab i.x{opacity:.5;padding:0 3px;border-radius:5px;font-style:normal;cursor:pointer}
.al-tab i.x:hover{opacity:1;background:rgba(226,56,42,.2)}
@keyframes al-tab-in{from{opacity:0;transform:translateY(6px) scale(.9)}}

/* ---------- page ---------- */
.mb-content{animation:al-page-in .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes al-page-in{from{opacity:.35;transform:translateY(14px)}}
.page-head{position:relative;padding:18px 22px;border-radius:var(--al-radius);margin-bottom:20px!important;
  background:linear-gradient(120deg,rgba(255,255,255,.75),rgba(255,255,255,.45));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--al-glass-line);box-shadow:var(--al-shadow);overflow:hidden}
.page-head::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,183,5,.25),transparent 70%);pointer-events:none}
.page-head h1{font-family:'Source Serif 4',Georgia,serif;font-weight:700;color:var(--al-navy);
  background:linear-gradient(90deg,var(--al-navy),var(--al-navy-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-head::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--al-gold),var(--al-red))}

/* glass surfaces */
.card,.kpi,.result-strip,.tile,.stmt-card,.sheet,.filter-bar,.al-glass{
  background:var(--al-glass)!important;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--al-glass-line)!important;border-radius:var(--al-radius)!important;box-shadow:var(--al-shadow)!important;
}
.card,.kpi,.tile,.result-strip,.al-glass{position:relative;overflow:hidden}
.card-header{background:linear-gradient(90deg,rgba(11,29,69,.06),transparent)!important;font-weight:700;color:var(--al-navy);border-bottom:1px solid rgba(11,29,69,.08)!important}
/* shine sweep on hover */
.kpi::after,.tile::after,.al-shine::after,.card.al-shine::after{
  content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);transition:none}
.kpi:hover::after,.tile:hover::after,.al-shine:hover::after{left:130%;transition:left .9s ease}
.kpi,.tile{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.kpi:hover,.tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(11,29,69,.45)!important}
.kpi-value{font-size:1.75rem!important;color:var(--al-navy)!important;font-weight:800!important;letter-spacing:-.01em}
.kpi-ico{background:linear-gradient(135deg,var(--al-navy-2),var(--al-navy-3))!important;color:#fff!important;border-radius:14px!important;
  box-shadow:0 8px 18px -6px rgba(19,44,102,.6)}
.kpi.a-green .kpi-ico{background:linear-gradient(135deg,#5E8C2E,#8DB43A)!important}
.kpi.a-red .kpi-ico{background:linear-gradient(135deg,#C62828,#F2771E)!important}
.kpi.a-brass .kpi-ico,.kpi.a-amber .kpi-ico{background:linear-gradient(135deg,#E89B0C,#F5C842)!important}
.kpi.a-teal .kpi-ico{background:linear-gradient(135deg,#0E7C86,#3FA9F5)!important}

/* entrance stagger (JS sets --i) */
.al-in{animation:al-fade-up .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes al-fade-up{from{opacity:.3;transform:translateY(18px)}}

/* tables */
.table thead th,.stmt thead th{background:linear-gradient(180deg,#132C66,#0B1D45)!important;color:#fff!important;border:0!important;
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.table thead th:first-child{border-top-left-radius:12px}.table thead th:last-child{border-top-right-radius:12px}
.table tbody tr{transition:background .15s}
.table tbody tr:hover>*{background:rgba(242,183,5,.10)!important}
.table tbody tr.al-in{animation-duration:.45s;animation-delay:calc(var(--i,0) * 18ms)}

/* buttons */
.btn{border-radius:12px;transition:transform .15s,box-shadow .2s,background .2s;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-brass,.btn-ink,.btn-primary{border:0!important;color:#fff!important;box-shadow:0 8px 20px -8px rgba(11,29,69,.55)}
.btn-brass{background:linear-gradient(135deg,var(--al-gold),var(--al-orange) 60%,var(--al-red))!important;background-size:160% 100%!important}
.btn-brass:hover{background-position:100% 0!important;transform:translateY(-1px)}
.btn-ink,.btn-primary{background:linear-gradient(135deg,var(--al-navy),var(--al-navy-3))!important}
.btn-ink:hover,.btn-primary:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-outline-secondary{background:rgba(255,255,255,.65);border-color:rgba(11,29,69,.18)}
.btn-outline-secondary:hover{background:#fff;color:var(--al-navy);border-color:var(--al-gold)}
.al-ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);animation:al-ripple .6s linear;pointer-events:none}
@keyframes al-ripple{to{transform:scale(4);opacity:0}}
.form-control,.form-select{border-radius:12px;background:rgba(255,255,255,.85);border-color:rgba(11,29,69,.15);transition:box-shadow .2s,border-color .2s}
.form-control:focus,.form-select:focus{border-color:var(--al-gold);box-shadow:0 0 0 4px rgba(242,183,5,.22)}
.section-title{font-family:'Source Serif 4',Georgia,serif;color:var(--al-navy);display:flex;align-items:center;gap:10px}
.section-title::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(242,183,5,.6),transparent)}
.alert{border-radius:14px;backdrop-filter:blur(10px);animation:al-fade-up .45s both}
.mb-foot{background:rgba(255,255,255,.5);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.7)}

/* progress bar while the next page loads */
#al-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--al-gold),var(--al-red),var(--al-sky));box-shadow:0 0 12px rgba(242,183,5,.8);transition:width .3s ease,opacity .3s}

/* ---------- command palette ("switch window") ---------- */
.al-pal-back{position:fixed;inset:0;background:rgba(9,22,54,.45);backdrop-filter:blur(6px);z-index:900;display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.al-pal-back.show{display:flex;animation:al-fade .2s both}
@keyframes al-fade{from{opacity:0}}
.al-pal{width:min(640px,92vw);background:rgba(255,255,255,.92);backdrop-filter:blur(24px);border-radius:20px;border:1px solid #fff;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.6);overflow:hidden;animation:al-drop .3s cubic-bezier(.2,.9,.25,1.15) both}
.al-pal input{width:100%;border:0;padding:18px 22px;font-size:1.1rem;outline:0;background:transparent;border-bottom:1px solid var(--rule)}
.al-pal ul{list-style:none;margin:0;padding:8px;max-height:52vh;overflow:auto}
.al-pal li a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;color:var(--ink-2);text-decoration:none}
.al-pal li a small{margin-left:auto;color:var(--muted)}
.al-pal li.sel a,.al-pal li a:hover{background:linear-gradient(90deg,rgba(242,183,5,.2),rgba(63,169,245,.1));color:var(--al-navy)}
.al-pal li a i{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--al-navy-2),var(--al-navy-3));color:#fff}
.al-pal .al-pal-foot{padding:8px 16px;font-size:.75rem;color:var(--muted);border-top:1px solid var(--rule-soft)}

/* ---------- Alico pages: hero, charts, maps ---------- */
.al-hero{position:relative;border-radius:24px;padding:28px 30px;color:#fff;overflow:hidden;margin-bottom:22px;
  background:linear-gradient(120deg,#0B1D45 0%,#132C66 45%,#1E3F8A 100%);box-shadow:0 30px 70px -30px rgba(11,29,69,.75)}
.al-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(40% 70% at 85% 20%,rgba(242,183,5,.35),transparent 70%),radial-gradient(30% 60% at 65% 110%,rgba(226,56,42,.35),transparent 70%);pointer-events:none}
.al-hero .al-hero-waves{position:absolute;left:0;right:0;bottom:-2px;height:90px;opacity:.5}
.al-hero .al-hero-waves svg{width:200%;height:100%;animation:al-wave 14s linear infinite}
.al-hero-in{position:relative;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.al-hero-logo{width:96px;height:96px;border-radius:26px;background:#fff;padding:8px;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 14px 30px rgba(0,0,0,.35);
  animation:al-bob 5s ease-in-out infinite}
.al-hero-logo img{width:100%;height:100%;object-fit:contain}
@keyframes al-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.al-hero h1{font-family:'Source Serif 4',Georgia,serif;font-size:2rem;margin:0;font-weight:700;color:#fff}
.al-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--al-gold-2),var(--al-orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.al-hero p{margin:6px 0 0;color:rgba(255,255,255,.8)}
.al-hero-stats{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}
.al-hero-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);border-radius:16px;padding:10px 16px;min-width:150px}
.al-hero-stat b{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums}
.al-hero-stat span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.al-grid{display:grid;gap:18px}
.al-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.al-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.al-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.al-grid.g21{grid-template-columns:2fr 1fr}.al-grid.g12{grid-template-columns:1fr 2fr}
@media(max-width:980px){.al-grid.g2,.al-grid.g3,.al-grid.g4,.al-grid.g21,.al-grid.g12{grid-template-columns:1fr}}
.al-panel{padding:18px 20px}
.al-panel h3{font-size:1rem;font-weight:800;color:var(--al-navy);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.al-panel h3 i{color:var(--al-orange)}
.al-panel .al-sub{font-size:.8rem;color:var(--muted);margin-bottom:12px}
.al-chart svg{width:100%;height:auto;display:block;overflow:visible}
.al-chart .bar{transform-origin:bottom;animation:al-grow 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes al-grow{from{transform:scaleY(0)}}
.al-chart .hbar{transform-origin:left;animation:al-growx 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes al-growx{from{transform:scaleX(0)}}
.al-chart .line{stroke-dasharray:3000;stroke-dashoffset:3000;animation:al-draw 2.2s ease forwards}
@keyframes al-draw{to{stroke-dashoffset:0}}
.al-chart .area{animation:al-fade 1.6s .6s both}
.al-chart .dot{animation:al-pop .4s both;animation-delay:calc(1.2s + var(--i,0)*30ms);transform-box:fill-box;transform-origin:center}
@keyframes al-pop{from{transform:scale(0)}}
.al-chart .donut-seg{animation:al-donut 1.4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*120ms)}
@keyframes al-donut{from{stroke-dasharray:0 999}}
.al-chart text{font-family:Inter,sans-serif}
.al-legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.8rem;margin-top:10px}
.al-legend span{display:inline-flex;align-items:center;gap:6px}
.al-legend i{width:11px;height:11px;border-radius:4px;display:inline-block}
.al-tip{position:fixed;z-index:950;pointer-events:none;background:rgba(11,29,69,.95);color:#fff;padding:7px 11px;border-radius:10px;font-size:.78rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transition:opacity .15s;white-space:nowrap}
.al-mini{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed rgba(11,29,69,.12)}
.al-mini:last-child{border-bottom:0}
.al-mini b{font-variant-numeric:tabular-nums}
.al-meter{height:8px;border-radius:8px;background:rgba(11,29,69,.08);overflow:hidden;margin-top:4px}
.al-meter span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--al-gold),var(--al-orange));
  transform-origin:left;animation:al-growx 1.2s cubic-bezier(.2,.8,.2,1) both}
.al-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;
  background:rgba(11,29,69,.07);color:var(--al-navy)}
.al-chip.ok{background:rgba(46,125,50,.12);color:#2E7D32}.al-chip.warn{background:rgba(242,119,30,.15);color:#B85A0C}.al-chip.bad{background:rgba(198,40,40,.12);color:#C62828}

/* process map */
.al-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 30px;position:relative;padding:8px 4px}
@media(max-width:1100px){.al-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.al-flow{grid-template-columns:1fr}}
.al-step{position:relative;padding:18px;border-radius:20px;background:var(--al-glass-2);border:1px solid #fff;box-shadow:var(--al-shadow);
  backdrop-filter:blur(14px);transition:transform .3s,box-shadow .3s;overflow:hidden}
.al-step:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 34px 70px -28px rgba(11,29,69,.5)}
.al-step .no{position:absolute;top:12px;right:14px;font-family:'Audiowide',sans-serif;font-size:1.6rem;color:rgba(11,29,69,.09)}
.al-step .ico{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  background:linear-gradient(135deg,var(--c1,#132C66),var(--c2,#1E3F8A));box-shadow:0 12px 22px -10px var(--c1,#132C66)}
.al-step .ico svg{width:34px;height:34px}
.al-step h4{font-size:1rem;font-weight:800;margin:0;color:var(--al-navy)}
.al-step .dept{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.al-step p{font-size:.84rem;margin:8px 0 10px;color:var(--ink-3)}
.al-step .fig{display:flex;justify-content:space-between;font-size:.82rem;padding:5px 0;border-top:1px dashed rgba(11,29,69,.12)}
.al-step .fig b{font-variant-numeric:tabular-nums;color:var(--al-navy)}
.al-step::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.al-flow-svg{position:absolute;inset:0;pointer-events:none;z-index:0}
.al-flow-svg path{fill:none;stroke:url(#alFlowGrad);stroke-width:3;stroke-dasharray:8 10;animation:al-dash 1.2s linear infinite}
@keyframes al-dash{to{stroke-dashoffset:-36}}
.al-step{z-index:1}

/* product cards */
.al-prod{padding:0;overflow:hidden}
.al-prod-art{height:190px;display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.9),rgba(232,238,250,.4) 70%)}
.al-prod-art svg{height:160px;width:auto;filter:drop-shadow(0 18px 18px rgba(11,29,69,.25));animation:al-bob 6s ease-in-out infinite}
.al-prod-body{padding:16px 18px}
.al-prod-body h3{font-size:1.1rem;font-weight:800;color:var(--al-navy);margin:0}
.al-spin{animation:al-spin 18s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes al-spin{to{transform:rotate(360deg)}}

/* calculator */
.al-calc-out{font-variant-numeric:tabular-nums}
.al-calc-line{display:grid;grid-template-columns:1.2fr 2fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;font-size:.88rem}
.al-calc-line:nth-child(odd){background:rgba(11,29,69,.035)}
.al-calc-line .f{color:var(--muted);font-family:ui-monospace,Consolas,monospace;font-size:.8rem}
.al-calc-line .v{font-weight:800;color:var(--al-navy);text-align:right;white-space:nowrap}
.al-calc-line.total{background:linear-gradient(90deg,rgba(242,183,5,.25),rgba(242,119,30,.12))!important;font-size:1rem}
.al-calc-line.flash .v{animation:al-flash .6s}
@keyframes al-flash{0%{color:var(--al-orange);transform:scale(1.08)}100%{transform:none}}
.al-seg{display:inline-flex;background:rgba(11,29,69,.07);border-radius:14px;padding:4px;gap:4px;flex-wrap:wrap}
.al-seg button{border:0;background:transparent;padding:8px 16px;border-radius:11px;font-weight:700;color:var(--ink-3);transition:all .25s}
.al-seg button.on{background:linear-gradient(135deg,var(--al-navy),var(--al-navy-3));color:#fff;box-shadow:0 8px 18px -8px rgba(11,29,69,.6)}

/* FBR invoice preview */
.al-fbr-inv{background:#fff;border-radius:6px;padding:26px 30px;box-shadow:0 30px 80px -30px rgba(11,29,69,.5);position:relative;max-width:900px;margin:0 auto;color:#111}
.al-fbr-inv .stamp{position:absolute;right:38%;top:150px;transform:rotate(-12deg);border:3px solid #2E7D32;color:#2E7D32;border-radius:10px;
  padding:6px 14px;font-weight:800;letter-spacing:.08em;opacity:.85;animation:al-stamp .7s .4s cubic-bezier(.2,.9,.25,1.4) both}
@keyframes al-stamp{from{opacity:0;transform:rotate(-12deg) scale(2.2)}}
.al-fbr-inv table{width:100%;border-collapse:collapse;font-size:.82rem}
.al-fbr-inv th,.al-fbr-inv td{border:1px solid #333;padding:5px 7px}
.al-fbr-inv th{background:#f1f3f8}
.al-fbr-band{display:flex;gap:16px;align-items:center;border:2px solid #0B6B3A;border-radius:10px;padding:10px 14px;margin-top:14px;background:#F2FBF5}
.al-fbr-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;width:86px;height:86px;border-radius:50%;
  background:radial-gradient(circle,#0B6B3A,#06472A);color:#fff;font-weight:800;font-size:.66rem;text-align:center;line-height:1.1;box-shadow:inset 0 0 0 3px #fff,0 0 0 2px #0B6B3A}
.al-fbr-mark b{font-size:1.2rem;letter-spacing:.06em}
.al-json{background:#0B1D45;color:#CFE3FF;border-radius:14px;padding:14px;font-size:.76rem;max-height:420px;overflow:auto;font-family:ui-monospace,Consolas,monospace}
.al-json .k{color:#FFD54A}.al-json .s{color:#9BE48A}.al-json .n{color:#FF9E7A}

/* login */
body.login-split{background:#0B1D45}
body.login-split .ls-story{background:linear-gradient(135deg,#091636,#132C66 55%,#1E3F8A)!important;position:relative;overflow:hidden}
body.login-split .ls-story::after{content:"";position:absolute;inset:0;background:
  radial-gradient(40% 50% at 80% 15%,rgba(242,183,5,.35),transparent 70%),radial-gradient(40% 50% at 10% 90%,rgba(226,56,42,.3),transparent 70%);pointer-events:none}
.ls-story-in{position:relative;z-index:2}
.ls-title em{background:linear-gradient(90deg,var(--al-gold-2),var(--al-orange));-webkit-background-clip:text;background-clip:text;color:transparent!important}
body.login-split .ls-form{background:linear-gradient(160deg,#F4F7FD,#E3EAF8)}
body.login-split .login-card{background:rgba(255,255,255,.7)!important;backdrop-filter:blur(20px);border:1px solid #fff!important;border-radius:26px!important;
  box-shadow:0 40px 90px -30px rgba(11,29,69,.5)!important;animation:al-fade-up .7s both}
.login-logo img{width:120px;height:120px;object-fit:contain;animation:al-bob 5s ease-in-out infinite}
.ls-products{display:flex;gap:18px;align-items:flex-end;margin:22px 0}
.ls-products svg{height:110px;width:auto;filter:drop-shadow(0 16px 18px rgba(0,0,0,.45));animation:al-bob 6s ease-in-out infinite}
.ls-products svg:nth-child(2){animation-delay:-2s;height:90px}.ls-products svg:nth-child(3){animation-delay:-4s;height:76px}
.ls-waves{position:absolute;left:0;right:0;bottom:0;height:160px;z-index:1;opacity:.5}
.ls-waves svg{width:200%;height:100%;animation:al-wave 16s linear infinite}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{
  body::before,.al-waves,.al-orb,.al-tabs,#al-progress,.al-pal-back,.al-tip{display:none!important}
  body{background:#fff!important}
  .card,.kpi,.result-strip,.tile,.page-head,.al-glass,.al-step{backdrop-filter:none!important;background:#fff!important;box-shadow:none!important;border:1px solid #bbb!important}
  .page-head h1{color:#000!important;-webkit-text-fill-color:#000}
  .table thead th{background:#eee!important;color:#000!important}
  .al-hero{background:#fff!important;color:#000!important;box-shadow:none!important;border:1px solid #bbb}
  .al-hero h1,.al-hero p{color:#000!important}
  .mb-content,.al-in{animation:none!important}
}
/* header on narrower screens */
.mb-head .fy-chip,.mb-head .badge-user,.mb-head .btn,.al-kbtn{white-space:nowrap}
.al-brand-name small{white-space:nowrap}
@media(max-width:1280px){.al-clock{display:none!important}}
@media(max-width:1100px){.al-kbtn .t{display:none}.mb-head .badge-user .u{display:none}.mb-hint{display:none}}
@media(max-width:760px){.al-brand-name small{display:none}.al-kbtn{display:none}.mb-head .fy-chip{display:none}}

/* ---------- readability first: solid text colours everywhere (13 Nov 2026) ----------
   Gradient-filled text disappears on browsers, PDF printers and phones that skip background-clip, so headings use solid colours.
   Glass is a little denser so text keeps its contrast whatever colour moves behind it. */
:root{--al-glass:rgba(255,255,255,.78);--al-glass-2:rgba(255,255,255,.88);--muted:#4F5E80}
.page-head h1{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#0B1D45!important;-webkit-text-fill-color:#0B1D45}
.al-brand-name b{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#fff!important;-webkit-text-fill-color:#fff;
  text-shadow:0 0 12px rgba(255,213,74,.55);animation:al-glow-text 4s ease-in-out infinite}
@keyframes al-glow-text{0%,100%{text-shadow:0 0 6px rgba(255,213,74,.25)}50%{text-shadow:0 0 16px rgba(255,213,74,.8)}}
.al-hero h1 em,.ls-title em{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#FFD54A!important;-webkit-text-fill-color:#FFD54A}
.al-step .no{color:rgba(11,29,69,.16)}
.text-muted{color:#4F5E80!important}
.al-hero p,.al-hero-stat span{color:rgba(255,255,255,.9)}
.al-hero .btn-outline-light{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.al-hero .btn-outline-light:hover{background:#fff;color:#0B1D45}
a{color:#1E4FBF}

/* horizontal bar lists (HTML) */
.al-hb-row{padding:6px 0}
.al-hb-top{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;color:#14275A}
.al-hb-top span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-hb-top b{white-space:nowrap;color:#0B1D45}
.al-hb-track{height:10px;border-radius:10px;background:rgba(11,29,69,.08);margin-top:4px;overflow:hidden}
.al-hb-track i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#132C66,#3FA9F5)}

/* ---------- phones and small tablets ---------- */
@media(max-width:760px){
  body{font-size:14px}
  .mb-head{position:relative;padding:8px 12px;gap:8px}
  .mb-brand .mono.mono-logo{width:38px;height:38px;border-radius:11px}
  .al-brand-name b{font-size:1.05rem}
  .mb-head-right{gap:6px}
  .mb-head .btn{padding:4px 8px}
  .mb-bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.97)!important;top:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 6px!important}
  .mb-bar::-webkit-scrollbar{display:none}
  .cl-menu-btn{padding:12px 10px!important;white-space:nowrap}
  .cl-drop{position:fixed!important;left:8px!important;right:8px!important;top:auto;width:auto!important;min-width:0!important;max-height:68vh;overflow-y:auto;margin-top:0;z-index:80}
  .cl-drop a{padding:11px 12px;font-size:.95rem}
  .al-tabs{padding:6px 10px 0}
  .mb-content{padding:12px 10px!important}
  .page-head{padding:14px 14px 14px 18px;flex-direction:column;align-items:flex-start!important;gap:10px}
  .page-head h1{font-size:1.35rem}
  .page-head .head-actions{flex-wrap:wrap;gap:6px;width:100%}
  .al-hero{padding:18px 16px;border-radius:18px}
  .al-hero h1{font-size:1.4rem}
  .al-hero-logo{width:64px;height:64px;border-radius:18px}
  .al-hero-stats{margin-left:0;width:100%}
  .al-hero-stat{flex:1 1 calc(50% - 12px);min-width:0}
  .al-hero-stat b{font-size:1.1rem}
  .kpi-grid{grid-template-columns:1fr!important;gap:12px}
  .kpi-value{font-size:1.45rem!important}
  .al-panel{padding:14px}
  .al-chart svg text{font-size:20px}
  .al-flow{gap:16px}
  .al-step{padding:14px}
  .al-calc-line{grid-template-columns:1fr auto;gap:2px 10px}
  .al-calc-line .f{grid-column:1 / -1;order:3;font-size:.72rem}
  .al-fbr-inv{padding:14px;overflow-x:auto}
  .al-fbr-inv table{min-width:640px}
  .al-fbr-band{flex-wrap:wrap}
  .table-responsive,.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{font-size:.84rem}
  .al-seg{display:flex}
  .al-seg button,.al-seg a{flex:1 1 auto;padding:8px 10px}
  .al-orb{display:none}
  .al-waves{height:120px}
  input,select,textarea{font-size:16px!important}   /* no zoom-in on iPhone when typing */
}
@media(max-width:420px){
  .mb-head .badge-user,.mb-head .fy-chip{display:none!important}
  .al-hero-stat{flex:1 1 100%}
}

.al-grid>*{min-width:0}