/* GROFAST CRM — "Aurora" design layer (2026-11-01), loaded after app.css and the parts files.
   Two body classes switch it on (set in includes/v3/layout_top.php):
     .gfx    the app shell: dark sidebar, glass topbar, command palette. Every page.
     .gfx-c  page content: cards, KPIs, buttons, forms, tables, modals, toasts. Every page EXCEPT the invoice
             pages (invoices.php, edit_invoice.php), which keep their original look.
   Remove this file's <link> to return to the plain v3 design. Layout sizes are not changed, only surfaces. */

/* ── tokens ─────────────────────────────────────────── */
.gfx {
  --x-ink: #0B1020;
  --x-ink-2: #111A2E;
  --x-brand-grad: linear-gradient(180deg, #F0476C 0%, #D21F48 100%);
  --x-accent-grad: linear-gradient(90deg, #F0476C 0%, #E0284F 40%, #7A5AF8 100%);
  --x-glow: 0 8px 22px -8px rgba(224, 40, 79, .65);
  --x-side-text: rgba(255, 255, 255, .72);
  --x-side-mute: rgba(255, 255, 255, .42);
  --x-side-line: rgba(255, 255, 255, .08);
}
.gfx-c {
  --canvas: #F3F5F9;
  --r: 10px;
  --r-lg: 16px;
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px -2px rgba(16, 24, 40, .08);
  --sh-md: 0 2px 4px rgba(16, 24, 40, .04), 0 12px 24px -8px rgba(16, 24, 40, .14);
  --sh-lg: 0 4px 8px -2px rgba(16, 24, 40, .06), 0 20px 40px -12px rgba(16, 24, 40, .18);
  --sh-xl: 0 8px 16px -4px rgba(16, 24, 40, .08), 0 32px 64px -16px rgba(16, 24, 40, .28);
  --ring: 0 0 0 4px rgba(224, 40, 79, .13);
  scrollbar-color: #C6CCD7 transparent;
}
.gfx-c ::selection { background: rgba(224, 40, 79, .16); }

/* soft aurora behind the page (fixed, so it stays at the top while scrolling) */
body.gfx-c::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 620px; pointer-events: none; z-index: -1;
  background:
    radial-gradient(640px 320px at 18% -80px, rgba(240, 71, 108, .16), transparent 70%),
    radial-gradient(560px 300px at 88% -60px, rgba(122, 90, 248, .13), transparent 70%),
    radial-gradient(420px 240px at 55% 0, rgba(46, 144, 250, .07), transparent 70%);
}

/* ── shell: sidebar ─────────────────────────────────── */
.gfx .sidebar {
  border-right: 1px solid rgba(255, 255, 255, .06);
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(240, 71, 108, .22), transparent 70%),
    radial-gradient(380px 300px at 100% 100%, rgba(122, 90, 248, .18), transparent 70%),
    linear-gradient(180deg, var(--x-ink-2) 0%, var(--x-ink) 100%);
}
.gfx .sidebar .logo-mark { filter: drop-shadow(0 6px 14px rgba(224, 40, 79, .45)); }
.gfx .sidebar .ws { border-radius: 12px; }
.gfx .sidebar .ws:hover { background: rgba(255, 255, 255, .06) !important; }
.gfx .sidebar .ws .name { color: #fff; }
.gfx .sidebar .ws .plan { color: var(--x-side-mute); }
.gfx .sidebar .ws .chev { color: var(--x-side-mute); }
.gfx .sidebar .nav { scrollbar-color: rgba(255, 255, 255, .14) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
.gfx .sidebar .nav-h { color: var(--x-side-mute); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.gfx .sidebar .nav-h:hover { color: rgba(255, 255, 255, .7); }
.gfx .sidebar .nav a { color: var(--x-side-text); border-radius: 10px; position: relative; transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.gfx .sidebar .nav a svg { color: var(--x-side-mute); }
.gfx .sidebar .nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.gfx .sidebar .nav a:hover svg { color: rgba(255, 255, 255, .9); }
.gfx .sidebar .nav a[aria-current="page"] {
  color: #fff; background: linear-gradient(135deg, rgba(240, 71, 108, .96) 0%, rgba(200, 30, 69, .96) 100%);
  box-shadow: var(--x-glow), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.gfx .sidebar .nav a[aria-current="page"] svg { color: #fff; }
.gfx .sidebar .nav a .cnt { background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .85); box-shadow: none; }
.gfx .sidebar .nav a .cnt.hot { background: rgba(240, 71, 108, .2); color: #FF9DB2; box-shadow: inset 0 0 0 1px rgba(240, 71, 108, .38); }
.gfx .sidebar .nav a[aria-current="page"] .cnt { background: rgba(255, 255, 255, .24); color: #fff; box-shadow: none; }
.gfx .sidebar .side-card { background: rgba(255, 255, 255, .05); border: 1px solid var(--x-side-line); }
.gfx .sidebar .side-card h3 { color: #fff; }
.gfx .sidebar .side-card p { color: rgba(255, 255, 255, .6); }
.gfx .sidebar .side-card .btn-link.gray { color: rgba(255, 255, 255, .6); }
.gfx .sidebar .side-card .btn-link.gray:hover { color: #fff; }
.gfx .sidebar .side-card .progress { background: rgba(255, 255, 255, .1); }
.gfx .sidebar .side-foot .me { border-top-color: var(--x-side-line); }
.gfx .sidebar .side-foot .me .who b { color: #fff; }
.gfx .sidebar .side-foot .me .who span { color: var(--x-side-mute); }
.gfx .sidebar .side-foot .me > .mw > .ibtn { color: var(--x-side-mute); }
.gfx .sidebar .side-foot .me > .mw > .ibtn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.gfx .sidebar .side-foot .me > .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); }
.gfx .app.mini .nav-sec + .nav-sec { border-top-color: var(--x-side-line); }
.gfx .sidebar .menu { border-radius: 12px; }

/* ── shell: topbar ──────────────────────────────────── */
.gfx .topbar {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8);
}
.gfx .topbar.scrolled {
  background: rgba(255, 255, 255, .82); border-bottom-color: rgba(16, 24, 40, .06);
  box-shadow: 0 10px 30px -18px rgba(16, 24, 40, .25);
}
.gfx .topbar .searchbtn { border-radius: 999px; border-color: rgba(16, 24, 40, .1); background: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04); padding-left: 14px; }
.gfx .topbar .searchbtn:hover { border-color: #F7A6B8; box-shadow: 0 0 0 4px rgba(224, 40, 79, .08); }
.gfx .topbar .searchbtn kbd { border-radius: 999px; padding: 0 8px; background: #F2F4F7; }
.gfx .topbar .iconbtn { border-radius: 12px; }
.gfx .topbar .iconbtn:hover { background: rgba(16, 24, 40, .05); color: var(--text); }
.gfx .topbar .iconbtn .pip { background: var(--x-brand-grad); box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(224, 40, 79, .6); }
.gfx .topbar .iconbtn .bdg { background: var(--x-brand-grad); box-shadow: 0 0 0 2px #fff, 0 4px 10px -2px rgba(224, 40, 79, .6); }
.gfx .topbar .crumbs b { background: linear-gradient(135deg, #FFF1F3, #FDE7EE); box-shadow: inset 0 0 0 1px rgba(224, 40, 79, .12); }
.gfx .topbar .btn-primary { background: var(--x-brand-grad); border-color: #C81E45; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), var(--x-glow), inset 0 1px 0 rgba(255, 255, 255, .22); }
.gfx .topbar .btn-primary:hover { background: linear-gradient(180deg, #E8355E 0%, #BF1A41 100%); }
.gfx .topbar .pop { border-radius: 16px; box-shadow: 0 32px 64px -16px rgba(16, 24, 40, .3), 0 0 0 1px rgba(16, 24, 40, .05); }

/* command palette (Ctrl+K) */
.gfx .scrim#cmdk { background: rgba(11, 16, 32, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gfx .cmdk { border-radius: 20px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 40px 80px -20px rgba(11, 16, 32, .45), 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 0 0 1px rgba(16, 24, 40, .06); }
.gfx .cmdk .it { border-radius: 12px; transition: background .12s; }
.gfx .cmdk .it.on { background: linear-gradient(90deg, rgba(224, 40, 79, .09), rgba(122, 90, 248, .06)); color: var(--text); box-shadow: inset 3px 0 0 #E0284F; }
.gfx .cmdk .it.on svg { color: #E0284F; }
.gfx .cmdk .ft { background: rgba(249, 250, 251, .8); }

/* navigation progress line (app.js adds #gf-progress on link clicks and form submits) */
#gf-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; pointer-events: none; opacity: 0;
  background: var(--x-accent-grad, linear-gradient(90deg, #F0476C, #7A5AF8)); box-shadow: 0 0 12px rgba(224, 40, 79, .55);
  transition: width 2.4s cubic-bezier(.1, .7, .2, 1), opacity .25s; border-radius: 0 3px 3px 0; }
#gf-progress.on { opacity: 1; width: 82%; }

/* ── content: entrance motion ───────────────────────── */
.gfx-c .content { animation: none; }
.gfx-c .content > * { animation: rise .5s var(--ease) both; }
.gfx-c .content > *:nth-child(2) { animation-delay: .04s; }
.gfx-c .content > *:nth-child(3) { animation-delay: .08s; }
.gfx-c .content > *:nth-child(4) { animation-delay: .12s; }
.gfx-c .content > *:nth-child(5) { animation-delay: .16s; }
.gfx-c .content > *:nth-child(n+6) { animation-delay: .2s; }

/* ── page header and tabs ───────────────────────────── */
.gfx-c .ph h1 { letter-spacing: -0.025em; }
.gfx-c .hello { background: linear-gradient(92deg, #0B1020 0%, #1D2939 45%, #C81E45 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.03em; }
.gfx-c .views [aria-selected="true"]::after { background: var(--x-accent-grad); box-shadow: 0 2px 10px rgba(224, 40, 79, .45); }
.gfx-c .views [aria-selected="true"] .n { background: var(--x-brand-grad); color: #fff; }
.gfx-c .pills-nav { background: #E9ECF2; border-color: transparent; box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06); }
.gfx-c .pills-nav [aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .06); }
.gfx-c .btn-group .btn.on, .gfx-c .btn-group .btn[aria-pressed="true"] { background: #FFF1F3; color: #A3173A; }

/* ── buttons ────────────────────────────────────────── */
.gfx-c .btn { transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease), color .15s var(--ease), transform .12s var(--ease); }
.gfx-c .btn:hover { border-color: #B9C0CC; box-shadow: 0 2px 6px -2px rgba(16, 24, 40, .12); }
.gfx-c .btn-primary { background: var(--x-brand-grad); border-color: #C81E45; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), var(--x-glow), inset 0 1px 0 rgba(255, 255, 255, .22); }
.gfx-c .btn-primary:hover { background: linear-gradient(180deg, #E8355E 0%, #BF1A41 100%); border-color: #B0183C; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 12px 26px -8px rgba(224, 40, 79, .75), inset 0 1px 0 rgba(255, 255, 255, .22); transform: translateY(-1px); }
.gfx-c .btn-primary:active, .gfx .topbar .btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 2px 4px rgba(0, 0, 0, .12); }
.gfx-c .btn-secondary:hover { border-color: #FDA4B8; }
.gfx-c .btn-danger-solid { background: linear-gradient(180deg, #F04438 0%, #D92D20 100%); box-shadow: 0 8px 20px -8px rgba(217, 45, 32, .6), inset 0 1px 0 rgba(255, 255, 255, .2); }
.gfx-c .btn-danger-solid:hover { background: linear-gradient(180deg, #E0362B 0%, #B42318 100%); }
.gfx-c .btn-ghost:hover, .gfx-c .btn-link:hover { box-shadow: none; }

/* ── forms ──────────────────────────────────────────── */
.gfx-c .input:hover:not(:focus):not(:disabled), .gfx-c .select:hover:not(:focus), .gfx-c .textarea:hover:not(:focus) { border-color: #B9C0CC; }
.gfx-c .input:focus, .gfx-c .select:focus, .gfx-c .textarea:focus { border-color: #F38BA3; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), var(--ring); }
.gfx-c .tgl:checked, .gfx-c .cb input:checked, .gfx-c input.ck:checked { background: var(--x-brand-grad); }

/* ── cards and KPIs ─────────────────────────────────── */
.gfx-c .card { border-color: rgba(16, 24, 40, .07); box-shadow: var(--sh-sm); }
.gfx-c .card-h h2, .gfx-c .tbar-h h2 { letter-spacing: -0.015em; }
.gfx-c a.card, .gfx-c .pcard, .gfx-c a.kpi, .gfx-c .bcard { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.gfx-c a.card:hover, .gfx-c .pcard:hover, .gfx-c a.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: rgba(224, 40, 79, .18); }
.gfx-c .kpi { background: radial-gradient(260px 140px at 100% 0%, rgba(224, 40, 79, .07), transparent 70%), var(--surface); }
/* accent bar sits inside the rounded corners, so the card needs no overflow clipping */
.gfx-c .kpi::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--x-accent-grad); opacity: .9; }
.gfx-c .kpi .val { letter-spacing: -0.03em; color: var(--x-ink); }
.gfx-c .stat-strip { box-shadow: var(--sh-sm); border-color: rgba(16, 24, 40, .07); }
.gfx-c .delta.up { background: linear-gradient(180deg, #ECFDF3, #DCFAE6); }
.gfx-c .delta.down { background: linear-gradient(180deg, #FEF3F2, #FEE4E2); }

/* ── tables ─────────────────────────────────────────── */
.gfx-c .t th { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #7A8499; background: linear-gradient(180deg, #FAFBFC 0%, #F4F6F9 100%); }
.gfx-c .t tbody tr:hover { background: linear-gradient(90deg, rgba(224, 40, 79, .05) 0%, rgba(224, 40, 79, .015) 55%, transparent 100%); }
.gfx-c .t tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 #E0284F; }
.gfx-c .t tbody tr.sel { background: rgba(224, 40, 79, .06); }
.gfx-c .t tfoot td { background: #F4F6F9; }
.gfx-c .pg .pages a.on { background: var(--x-brand-grad); color: #fff; box-shadow: var(--x-glow); }

/* ── badges, avatars, progress ──────────────────────── */
.gfx-c .pill { font-weight: 600; }
.gfx-c .cnt-badge { background: var(--x-brand-grad); color: #fff; box-shadow: none; }
.gfx-c .progress:not(.ok):not(.warn):not(.gray):not(.info) > i { background: var(--x-accent-grad); }
.gfx-c .itile.brand { background: linear-gradient(135deg, #FFF1F3, #FDE7EE); }

/* ── alerts, menus, popovers ────────────────────────── */
.gfx-c .alert, .gfx-c .banner { box-shadow: var(--sh-sm); }
.gfx-c .menu { border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .04); }
.gfx-c .menu a, .gfx-c .menu button { border-radius: 8px; }
.gfx-c .pop { border-radius: 16px; }

/* ── modals, drawers, toast ─────────────────────────── */
.gfx-c .scrim { background: rgba(11, 16, 32, .5); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
.gfx-c .modal { position: relative; border-radius: 20px; box-shadow: 0 40px 80px -24px rgba(11, 16, 32, .5), 0 0 0 1px rgba(16, 24, 40, .06);
  transform: translateY(16px) scale(.96); transition: transform .38s cubic-bezier(.2, 1.25, .35, 1); }
.gfx-c .modal::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--x-accent-grad); }
.gfx-c .scrim.open .modal { transform: none; }
.gfx-c .drawer { border-radius: 20px 0 0 20px; border-left-color: rgba(16, 24, 40, .06); box-shadow: -32px 0 64px -24px rgba(11, 16, 32, .35); }
.gfx-c .drawer-h h2 { letter-spacing: -0.015em; }
.gfx-c .toast { background: rgba(13, 19, 36, .94); border-color: rgba(255, 255, 255, .08); color: #fff; border-radius: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 48px -16px rgba(11, 16, 32, .55); }
.gfx-c .toast b { color: #fff; }
.gfx-c .toast span { color: rgba(255, 255, 255, .7); }
.gfx-c .toast .ti { color: #4ADE80; }
.gfx-c .toast .ibtn { color: rgba(255, 255, 255, .5); }
.gfx-c .toast .ibtn:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ── login page ─────────────────────────────────────── */
.gfx-c .auth { background: transparent; }
.gfx-c .auth-l { position: relative; }
.gfx-c .auth-form {
  padding: 36px 32px; max-width: 432px; border-radius: 24px;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 32px 64px -24px rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .04);
}
.gfx-c .auth-form h1 { background: linear-gradient(92deg, #0B1020, #C81E45); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gfx-c .auth-r { background: var(--x-ink); }
.gfx-c .auth-r::before { background: radial-gradient(900px 500px at 85% -10%, rgba(224, 40, 79, .42), transparent 60%), radial-gradient(700px 420px at 0% 110%, rgba(122, 90, 248, .35), transparent 60%); }

/* ── client portal ──────────────────────────────────── */
.gfx .ptop { background: rgba(255, 255, 255, .72); backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8); border-bottom-color: rgba(16, 24, 40, .06); }
.gfx .ptop nav a { border-radius: 999px; }
.gfx .ptop nav a[aria-current="page"] { background: var(--x-brand-grad); color: #fff; box-shadow: var(--x-glow); }

/* ── phones and reduced motion ──────────────────────── */
@media (max-width: 640px) {
  .gfx-c .auth-form { padding: 28px 20px; border-radius: 20px; }
  .gfx-c .drawer { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gfx-c .content > *, .gfx-c .modal, .gfx-c a.card, .gfx-c .pcard, .gfx-c a.kpi, .gfx-c .btn { animation: none !important; transition: none !important; }
  #gf-progress { display: none; }
}
@media print {
  body.gfx-c::before, #gf-progress { display: none !important; }
}