/* Nazmi Packaging: the Nazmi look on top of the UI kit (app.css). Colours come from the Nazmi logo:
   olive green #4D803E, silver grey #A3A79F, charcoal #22261F. Smoked-glass side menu, frosted cards with a silver sheen,
   moving light on buttons, page and tab motion. Light and dark. Loaded after app.css. */
:root {
  --brand: #4D803E; --brand-2: #3B6630; --brand-3: #7FB35F; --brand-glow: rgba(77, 128, 62, .38); --accent: #B3261E;
  --silver: #A3A79F; --silver-2: #D9DCD4; --charcoal: #22261F; --charcoal-2: #2E342A;
  --ink: #161A15; --ink-2: #3D4239; --ink-3: #6B7066; --line: rgba(34, 38, 31, .10);
  --bg-1: #EEF2EA; --bg-2: #F4F5F1; --bg-3: #E7ECE3;
  --glass: rgba(255, 255, 255, .62); --glass-strong: rgba(255, 255, 255, .84); --glass-border: rgba(255, 255, 255, .85);
  --glass-shadow: 0 18px 48px -22px rgba(34, 38, 31, .38), 0 2px 6px rgba(34, 38, 31, .06);
  --shine: linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 60%);
  --ok: #1F7A4D; --ok-bg: rgba(31, 122, 77, .12); --warn: #A3620F; --warn-bg: rgba(196, 128, 32, .15);
  --bad: #B3261E; --bad-bg: rgba(179, 38, 30, .11); --info: #2B5E9E; --info-bg: rgba(43, 94, 158, .11);
  --neutral: #5d6358; --neutral-bg: rgba(93, 99, 88, .12);
  --radius: 16px; --radius-sm: 11px; --side-w: 268px;
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif; --mono: 'IBM Plex Mono', Consolas, monospace;
  --metal: linear-gradient(135deg, #8fc46c 0%, #4D803E 45%, #35592b 100%);
  --metal-silver: linear-gradient(135deg, #f4f5f2 0%, #c9cdc4 45%, #a3a79f 100%);
}
[data-theme="dark"] {
  --brand: #6FA35C; --brand-2: #8BC174; --brand-glow: rgba(111, 163, 92, .35);
  --ink: #E8EBE5; --ink-2: #C3C8BD; --ink-3: #9AA096; --line: rgba(255, 255, 255, .08);
  --bg-1: #0E110D; --bg-2: #141813; --bg-3: #10140f;
  --glass: rgba(30, 34, 28, .62); --glass-strong: rgba(34, 39, 32, .88); --glass-border: rgba(255, 255, 255, .08);
  --glass-shadow: 0 18px 48px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  --shine: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 50%);
}
body.app { font-feature-settings: 'cv11', 'ss01'; background: radial-gradient(1200px 700px at 85% -10%, rgba(77,128,62,.16), transparent 60%),
  radial-gradient(900px 600px at -10% 110%, rgba(163,167,159,.28), transparent 60%), linear-gradient(160deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3)); background-attachment: fixed; }
[data-theme="dark"] body.app { background: radial-gradient(1100px 700px at 85% -10%, rgba(77,128,62,.22), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(163,167,159,.10), transparent 60%), linear-gradient(160deg, var(--bg-1), var(--bg-2)); }
a { color: var(--brand-2); }
[data-theme="dark"] a { color: var(--brand-2); }

/* Background: two slow logo swooshes instead of colour blobs */
.aurora { opacity: 1; }
.blob { filter: blur(60px); opacity: .5; }
.b1 { background: radial-gradient(circle, rgba(127,179,95,.55), transparent 65%); }
.b2 { background: radial-gradient(circle, rgba(163,167,159,.55), transparent 65%); }
.b3 { background: radial-gradient(circle, rgba(77,128,62,.35), transparent 65%); opacity: .35; }
.swoosh { position: fixed; z-index: 0; pointer-events: none; right: -8vw; top: 6vh; width: 70vw; max-width: 1100px; opacity: .55; animation: swoosh 22s ease-in-out infinite alternate; }
[data-theme="dark"] .swoosh { opacity: .22; }
@keyframes swoosh { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-3vw, 4vh) rotate(-3deg); } }

/* Side menu: smoked charcoal glass with a silver edge */
.side.glass { background: linear-gradient(180deg, rgba(34,38,31,.92), rgba(24,27,22,.94)); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); color: #E3E6DF; }
.side.glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 30%); }
.side .brand { color: #fff; }
.brand-logo { display: block; background: #fff; border-radius: 12px; padding: 6px 8px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.6); transition: transform .45s var(--spring); }
.brand-logo img { display: block; height: 38px; width: auto; }
.brand:hover .brand-logo { transform: translateY(-2px) scale(1.02); }
.side-mini .brand-logo { display: none; }
.brand .brand-mark { display: none; filter: none; }
.side-mini .brand .brand-mark { display: block; width: 44px; height: 44px; }
.side .nav-link { color: #C9CDC4; }
.side .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.side .nav-link.active { color: #fff; background: var(--metal); box-shadow: 0 10px 24px -10px rgba(77,128,62,.9), inset 0 1px 0 rgba(255,255,255,.35); overflow: hidden; }
.side .nav-link.active::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); animation: sheen 3.6s ease-in-out 0.6s infinite; }
@keyframes sheen { 0% { left: -60%; } 40%, 100% { left: 130%; } }
.side .nav-group-btn { color: #9AA096; }
.side .nav-group-btn:hover { background: rgba(255,255,255,.05); color: #fff; }
.side .nav-group-btn i:first-child { color: var(--brand-3); }
.side .side-collapse { color: #9AA096; }
.side .side-collapse:hover { background: rgba(255,255,255,.06); color: #fff; }
.side .practice-chip { background: linear-gradient(90deg, #c4801f, #a3620f); }

/* Top bar */
.topbar.glass { background: rgba(255,255,255,.66); }
[data-theme="dark"] .topbar.glass { background: rgba(30,34,28,.7); }
.top-title h1 { font-weight: 750; letter-spacing: -.02em; }
.search-pill:hover { box-shadow: 0 0 0 4px var(--brand-glow); }
.help-btn { background: linear-gradient(135deg, #f6d27a, #d9a440); color: #3a2a06; border-color: transparent; }
.avatar { background: var(--metal); color: #fff; }

/* Company picker */
.co-pick { position: relative; }
.co-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.6); color: var(--ink); font: 700 13px var(--font); cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s; }
[data-theme="dark"] .co-btn { background: rgba(255,255,255,.06); }
.co-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0,0,0,.4); }
.co-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #22261F); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #22261F) 22%, transparent); flex: none; }
.co-drop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; border-radius: 16px; padding: 6px; opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .22s, transform .3s var(--spring); z-index: 40; }
.co-drop.open { opacity: 1; transform: none; pointer-events: auto; }
.co-drop.glass, .user-drop.glass { background: rgba(255,255,255,.97); box-shadow: 0 24px 50px -18px rgba(34,38,31,.45), 0 2px 8px rgba(34,38,31,.08); }
[data-theme="dark"] .co-drop.glass, [data-theme="dark"] .user-drop.glass { background: rgba(30,34,28,.98); }
.co-drop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 11px; background: none; color: var(--ink); font: 600 13px var(--font); cursor: pointer; text-align: left; }
.co-drop button:hover { background: var(--ok-bg); }
.co-drop button.on { background: var(--brand-glow); color: var(--ink); }
.co-drop small { margin-left: auto; color: var(--ink-3); font-weight: 600; }
.co-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.co-NPCO { --c: #4D803E; } .co-RT { --c: #2B5E9E; } .co-AP { --c: #A3620F; } .co-YE { --c: #6B4C9A; } .co-FOC { --c: #6B7066; } .co-ALL { --c: #22261F; }
[data-theme="dark"] .co-ALL { --c: #C3C8BD; }

/* Cards: frosted glass, silver sheen, lift on hover */
.card-g { border-radius: var(--radius); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card-g::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); pointer-events: none; }
.card-g:hover { box-shadow: 0 26px 60px -28px rgba(34,38,31,.45), 0 2px 6px rgba(34,38,31,.06); }
.card-title i, .card-title .bi { color: var(--brand); }

/* Stat tiles: metallic icon, light sweep, coloured ring */
.stat { border-radius: var(--radius); transition: transform .45s var(--spring), box-shadow .35s; }
.stat::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(255,255,255,.9), rgba(255,255,255,0) 40%, var(--tone, var(--brand-glow)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.stat:hover { transform: translateY(-6px) scale(1.01); }
.stat-icon { background: var(--metal); box-shadow: 0 10px 22px -10px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.4); }
.stat.blue { --c1: #6f9fd8; --c2: #2B5E9E; --tone: rgba(43, 94, 158, .35); }
.stat.orange { --c1: #e3a64b; --c2: #A3620F; --tone: rgba(196, 128, 32, .35); }
.stat.red { --c1: #e0736c; --c2: #B3261E; --tone: rgba(179, 38, 30, .3); }
.stat.purple { --c1: #9a83c4; --c2: #6B4C9A; --tone: rgba(107, 76, 154, .3); }
.stat.blue .stat-icon, .stat.orange .stat-icon, .stat.red .stat-icon, .stat.purple .stat-icon { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.stat-val { font-weight: 800; letter-spacing: -.03em; }

/* Buttons: metallic green with a light sweep */
.btn-glow { background: var(--metal) !important; box-shadow: 0 10px 24px -12px rgba(77,128,62,.9), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-glow:hover { box-shadow: 0 16px 32px -12px rgba(77,128,62,.85), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-soft { color: var(--brand-2) !important; background: var(--ok-bg); }
.btn-ghost { border-color: var(--line); }
.btn-danger { background: linear-gradient(135deg, #d9534a, #9e1f18) !important; }

/* Tabs: silver track, metallic sliding pill */
.tabs { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4)); box-shadow: inset 0 1px 2px rgba(34,38,31,.08); }
.tab-ind, .tabs:not([data-tabs]) .tab.active { background: var(--metal); box-shadow: 0 8px 18px -8px rgba(77,128,62,.85), inset 0 1px 0 rgba(255,255,255,.35); }
.tab-panel.active { animation: tabIn .45s var(--ease) both; }
@keyframes tabIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* Tables */
.tbl th { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(244,245,241,.85)); color: var(--ink-3); }
[data-theme="dark"] .tbl th { background: rgba(255,255,255,.04); }
.tbl tbody tr:hover { background: rgba(77, 128, 62, .07); }
.tbl tbody tr:nth-child(-n+30) { animation: rowIn .45s var(--ease) both; }
.tbl tbody tr:nth-child(1) { animation-delay: .02s; } .tbl tbody tr:nth-child(2) { animation-delay: .04s; } .tbl tbody tr:nth-child(3) { animation-delay: .06s; }
.tbl tbody tr:nth-child(4) { animation-delay: .08s; } .tbl tbody tr:nth-child(5) { animation-delay: .1s; } .tbl tbody tr:nth-child(n+6) { animation-delay: .12s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Inputs */
input:focus, select:focus, textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 4px var(--brand-glow) !important; outline: none; }

/* Page change: a thin metallic bar at the top, and the page slides in */
.nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: linear-gradient(90deg, #7FB35F, #4D803E, #A3A79F); box-shadow: 0 0 12px rgba(77,128,62,.7); transition: width .5s var(--ease), opacity .3s; }
.nav-progress.go { width: 72%; } .nav-progress.done { width: 100%; opacity: 0; }
.page-enter > *:not(.modal) { animation: pageIn .6s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body.leaving .content { animation: pageOut .22s ease-in forwards; }
@keyframes pageOut { to { opacity: 0; transform: translateY(-8px); } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease-in both vtOut; }
::view-transition-new(root) { animation: .38s cubic-bezier(.22,.9,.28,1) both vtIn; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Books check */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.check-tile { position: relative; padding: 16px; border-radius: var(--radius); background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); overflow: hidden; }
.check-tile .big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.check-tile .state { position: absolute; top: 14px; right: 14px; font-size: 22px; }
.check-tile.ok .state { color: var(--ok); } .check-tile.bad .state { color: var(--bad); }
.check-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--brand)); }

/* Costing */
.cost-hero { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cost-chip { padding: 14px 16px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.cost-chip .k { font-size: 12px; color: var(--ink-3); font-weight: 600; } .cost-chip .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cost-chip.main { background: var(--metal); color: #fff; } .cost-chip.main .k { color: rgba(255,255,255,.8); }
.sheet-pic { width: 100%; max-width: 520px; }

/* Login */
.login-page .login-photo { background: linear-gradient(120deg, rgba(20,24,18,.86), rgba(34,38,31,.55)), url(../img/login-cartons.jpg) center / cover no-repeat; }
.login-page .login-hero h1 { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; }
.login-hero-tag { background: rgba(77,128,62,.28) !important; border-color: rgba(127,179,95,.5) !important; }
.login-logo { display: block; background: #fff; border-radius: 16px; padding: 12px 16px; margin: 0 auto 14px; box-shadow: 0 14px 30px -16px rgba(0,0,0,.4); max-width: 280px; }
.login-logo img { display: block; width: 100%; height: auto; }
.login-card .brand { display: none; }

/* Prints never show colour */
@media print { .swoosh, .nav-progress { display: none !important; } .co-tag { background: none !important; color: #000 !important; padding: 0; } }
@media (max-width: 860px) { .co-btn .co-name { display: none; } .swoosh { display: none; } }