/* ============================================================================
SOFONN — Apple Liquid Glass Kit (iOS 26 design language, web)
Portable, framework-free. Namespaced `lg-` / `--lg-` so it never collides
with Metronic, Bootstrap, or the auth pages' `a-*` classes.
HOW TO USE (any page)
1.
2. Include the SVG filter block ONCE per page (see the bottom of this file) so
`.lg-glass`/`.lg-btn` refraction works.
3. Theme + appearance are driven by two attributes on :
data-bs-theme = "light" | "dark" (persist in localStorage['data-bs-theme'])
data-glass = "clear" | "tinted" (persist in localStorage['data-glass'])
4. Give glassy elements a background to refract (a photo, gradient, or the
`.lg-bg-extend` blurred-image backdrop). Glass over a flat wall is invisible.
RULE (Apple): glass is CHROME, not content. Use it for controls / nav / badges,
never for long text or data tables. Keep body text on a floored, legible surface.
========================================================================== */
/* ── Tokens: iOS system palette ─────────────────────────────────────────── */
:root{
--lg-accent:#007aff; --lg-accent-2:#0a84ff; --lg-glow:rgba(0,122,255,.18);
--lg-text:#1c1c1e; --lg-muted:#566579; --lg-border:rgba(60,60,67,.13);
--lg-danger:#ff3b30; --lg-success:#34c759;
--lg-radius:14px; --lg-font:'Inter',system-ui,sans-serif; /* legal SF Pro substitute */
}
[data-bs-theme="dark"]{
--lg-accent:#0a84ff; --lg-glow:rgba(10,132,255,.28);
--lg-text:#f2f2f7; --lg-muted:#98a2b3; --lg-border:rgba(255,255,255,.12);
}
/* ── Tokens: glass materials, retinted by Clear / Tinted ────────────────── *
* --lg-input : small controls (fields, pills, checkboxes)
* --lg-hero : decorative chrome badges/tiles (the see-through ones)
* --lg-panel : a content-holding card (floored so it stays legible)
* --lg-btn : the prominent primary button (see .lg-btn) */
:root{
--lg-input:rgba(255,255,255,.55); --lg-hero:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.07)); --lg-hero-bd:rgba(255,255,255,.3);
--lg-panel:linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,255,255,.36)); --lg-panel-bd:rgba(255,255,255,.55);
--lg-btn:linear-gradient(180deg,rgba(96,168,255,.7),rgba(12,123,255,.64) 55%,rgba(4,97,220,.6)); --lg-btn-edge:rgba(255,255,255,.5);
}
:root[data-glass="clear"]{
--lg-input:rgba(255,255,255,.2); --lg-hero:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.07)); --lg-hero-bd:rgba(255,255,255,.62);
--lg-panel:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
--lg-btn:linear-gradient(180deg,rgba(86,158,255,.5),rgba(14,120,250,.46) 55%,rgba(6,96,220,.44)); --lg-btn-edge:rgba(255,255,255,.6);
}
:root[data-glass="tinted"]{
--lg-input:rgba(255,255,255,.74); --lg-hero:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.15)); --lg-hero-bd:rgba(255,255,255,.42);
--lg-panel:linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.5));
--lg-btn:linear-gradient(180deg,rgba(88,160,255,.74),rgba(8,118,255,.68) 55%,rgba(2,92,214,.64)); --lg-btn-edge:rgba(255,255,255,.44);
}
[data-bs-theme="dark"]{
--lg-input:rgba(30,30,32,.5); --lg-hero:linear-gradient(135deg,rgba(22,38,72,.5),rgba(12,24,52,.3)); --lg-hero-bd:rgba(130,175,255,.3);
--lg-panel:linear-gradient(135deg,rgba(16,22,42,.56),rgba(9,14,32,.4)); --lg-panel-bd:rgba(255,255,255,.1);
--lg-btn:linear-gradient(180deg,rgba(72,152,255,.6),rgba(10,132,255,.5) 55%,rgba(6,100,220,.46)); --lg-btn-edge:rgba(255,255,255,.34);
}
[data-bs-theme="dark"][data-glass="clear"]{
--lg-input:rgba(30,30,32,.22); --lg-hero:linear-gradient(135deg,rgba(40,64,120,.3),rgba(20,34,70,.16)); --lg-hero-bd:rgba(150,190,255,.5);
--lg-panel:linear-gradient(135deg,rgba(16,22,42,.15),rgba(9,14,32,.07));
--lg-btn:linear-gradient(180deg,rgba(84,162,255,.38),rgba(14,132,255,.32) 55%,rgba(8,104,222,.3)); --lg-btn-edge:rgba(160,200,255,.5);
}
[data-bs-theme="dark"][data-glass="tinted"]{
--lg-input:rgba(30,30,32,.74); --lg-hero:linear-gradient(135deg,rgba(22,38,72,.66),rgba(12,24,52,.48)); --lg-hero-bd:rgba(130,175,255,.3);
--lg-panel:linear-gradient(135deg,rgba(16,22,42,.66),rgba(9,14,32,.52));
--lg-btn:linear-gradient(180deg,rgba(64,146,255,.7),rgba(8,124,255,.62) 55%,rgba(4,96,216,.58)); --lg-btn-edge:rgba(255,255,255,.3);
}
/* ── Base glass utility: frosted body + crisp rim + edge refraction ─────── */
.lg-glass{
background:var(--lg-hero); border:1px solid var(--lg-hero-bd); border-radius:var(--lg-radius);
-webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.04);
backdrop-filter:blur(26px) saturate(190%) brightness(1.04) url(#lg-refract);
box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -8px 16px -12px rgba(120,150,220,.16), 0 14px 30px -16px rgba(8,16,44,.4);
}
/* ── Prominent capsule button (Apple .glassProminent) ───────────────────── */
.lg-btn{
position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:9px;
width:100%; padding:1rem 1.6rem; border-radius:999px; cursor:pointer; text-decoration:none;
font-family:var(--lg-font); font-size:.98rem; font-weight:600; letter-spacing:.01em; color:#fff; text-shadow:0 1px 2px rgba(0,20,60,.42);
background:var(--lg-btn); border:1px solid var(--lg-btn-edge);
-webkit-backdrop-filter:blur(30px) saturate(150%);
backdrop-filter:blur(30px) saturate(150%) url(#lg-refract);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 .5px rgba(255,255,255,.14), inset 0 -12px 20px -16px rgba(0,28,96,.42), inset 0 6px 12px -12px rgba(255,255,255,.32), 0 6px 18px -10px rgba(10,90,210,.26), 0 1px 4px rgba(0,20,60,.18);
transition:transform .2s cubic-bezier(.3,0,.2,1), box-shadow .25s, filter .2s, background .25s;
}
.lg-btn>*{position:relative; z-index:2;}
.lg-btn::after{content:''; position:absolute; left:6%; right:6%; top:2px; height:22%; z-index:0; pointer-events:none; border-radius:999px;
background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.05) 70%,transparent); opacity:.5; filter:blur(.5px);}
.lg-btn::before{content:''; position:absolute; top:0; left:-70%; width:55%; height:100%; z-index:1; pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent); transform:skewX(-18deg); transition:left .6s cubic-bezier(.3,0,.2,1);}
.lg-btn:hover{transform:translateY(-1px);}
.lg-btn:hover::before{left:130%;}
.lg-btn:active{transform:scale(.977);}
.lg-btn:focus-visible{outline:none; box-shadow:0 0 0 4px rgba(10,132,255,.35), inset 0 1.5px 0 rgba(255,255,255,.85);}
.lg-btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;}
/* Secondary / ghost glass button */
.lg-btn-ghost{
display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:.86rem 1.6rem;
border-radius:var(--lg-radius); cursor:pointer; text-decoration:none; font-family:var(--lg-font); font-size:.92rem; font-weight:500; color:var(--lg-accent);
background:var(--lg-input); border:1px solid var(--lg-border);
-webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2); transition:border-color .2s, color .2s, background .2s;
}
.lg-btn-ghost:hover{color:var(--lg-text); border-color:color-mix(in srgb,var(--lg-accent) 30%, var(--lg-border));}
/* ── Glass input field ──────────────────────────────────────────────────── */
.lg-field{
width:100%; padding:.92rem 1.15rem; border-radius:var(--lg-radius); font-family:var(--lg-font); font-size:.95rem; color:var(--lg-text); outline:none;
background:var(--lg-input); border:1px solid var(--lg-hero-bd);
-webkit-backdrop-filter:blur(30px) saturate(200%) brightness(1.05); backdrop-filter:blur(30px) saturate(200%) brightness(1.05);
box-shadow:inset 0 1px 0 rgba(255,255,255,.78), inset 0 -8px 16px -12px rgba(90,110,170,.18), 0 8px 22px -12px rgba(10,20,50,.22);
transition:border-color .22s, box-shadow .22s, background .22s;
}
.lg-field:focus{border-color:var(--lg-accent); box-shadow:0 0 0 4px var(--lg-glow), inset 0 1px 0 rgba(255,255,255,.7);}
/* ── Glass badge / tile (see-through decorative chrome) ─────────────────── */
.lg-tile{
position:relative; overflow:hidden; padding:1rem 1.25rem; border-radius:18px; color:#fff;
background:var(--lg-hero); border:1px solid var(--lg-hero-bd);
-webkit-backdrop-filter:blur(32px) saturate(190%) brightness(1.06); backdrop-filter:blur(32px) saturate(190%) brightness(1.06);
box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -8px 16px -12px rgba(120,150,220,.16), 0 14px 30px -16px rgba(8,16,44,.4);
}
.lg-tile::after{content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(70% 45% at 26% 12%,rgba(255,255,255,.4),transparent 58%);}
.lg-tile>*{position:relative; z-index:1;}
/* Glass pill (chips, trust badges) */
.lg-pill{
display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1rem; border-radius:999px; font-size:.72rem; color:var(--lg-muted);
background:var(--lg-input); border:1px solid var(--lg-border);
-webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
/* Segmented control (Clear / Tinted) — canonical version, identical to the login
header's .glass-seg so every header (auth + admin) renders the exact same pill. */
.lg-seg{display:inline-flex; height:32px; align-items:center; gap:2px; padding:3px; border-radius:999px; flex-shrink:0;
background:rgba(118,118,128,.16); border:1px solid rgba(0,0,0,.1);
-webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
[data-bs-theme="dark"] .lg-seg{background:rgba(120,120,128,.28); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
[data-glass="clear"] .lg-seg{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(20px) saturate(190%); backdrop-filter:blur(20px) saturate(190%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
[data-bs-theme="dark"][data-glass="clear"] .lg-seg{background:rgba(120,140,190,.14); border-color:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.16);}
.lg-seg button{height:26px; border:0; background:transparent; border-radius:999px; padding:0 .72rem; font-size:.72rem; font-weight:600; line-height:26px; color:#6b7280; cursor:pointer; transition:background .2s,color .2s;}
[data-bs-theme="dark"] .lg-seg button{color:#aeb4c2;}
.lg-seg button.sel{background:#fff; color:#007aff; box-shadow:0 1px 2px rgba(0,0,0,.14);}
[data-bs-theme="dark"] .lg-seg button.sel{background:rgba(10,132,255,.92); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4);}
[data-glass="clear"] .lg-seg button.sel{background:rgba(255,255,255,.55); color:#0a63d6; box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(10,40,90,.18);}
[data-bs-theme="dark"][data-glass="clear"] .lg-seg button.sel{background:rgba(10,132,255,.55); color:#fff;}
/* iOS glass theme SWITCH (light/dark) — canonical version, identical to the login
header's .ios-switch (60px track, sun/moon icons, glossy iridescent knob).
JS toggles data-bs-theme. Markup:
*/
.lg-switch{position:relative;width:60px;height:32px;flex-shrink:0;padding:0;border-radius:999px;cursor:pointer;overflow:hidden;
display:inline-flex;align-items:center;
background:rgba(118,118,128,.22);border:1px solid rgba(0,0,0,.20);
-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
box-shadow:inset 0 1px 3px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.7);transition:background .3s ease,border-color .3s ease;}
[data-bs-theme="dark"] .lg-switch{background:rgba(10,132,255,.62);border-color:rgba(10,132,255,.55);
box-shadow:inset 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.28);}
.lg-switch:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,122,255,.28), inset 0 1px 0 rgba(255,255,255,.6);}
.lg-switch-icon{position:absolute;top:0;bottom:0;width:26px;display:flex;align-items:center;justify-content:center;font-size:.82rem;pointer-events:none;transition:opacity .3s ease,color .3s ease;z-index:1;}
.lg-switch-sun{left:4px;color:#FF9F0A;opacity:1;}
.lg-switch-moon{right:4px;color:#4b5a7d;opacity:.85;}
[data-bs-theme="dark"] .lg-switch-sun{opacity:1;color:#FFD27A;}
[data-bs-theme="dark"] .lg-switch-moon{opacity:1;color:#eaf1ff;}
.lg-switch-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;z-index:2;
background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(228,233,244,.82));
box-shadow:0 2px 6px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.95);
transition:transform .34s cubic-bezier(.4,0,.2,1),background .3s ease;}
.lg-switch-knob::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:linear-gradient(135deg,rgba(120,180,255,.28),transparent 42%,rgba(255,150,220,.22));mix-blend-mode:screen;opacity:.75;}
[data-bs-theme="dark"] .lg-switch-knob{background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(232,238,248,.9));box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.95);}
[data-bs-theme="dark"] .lg-switch-knob{transform:translateX(28px);}
@media (prefers-reduced-motion:reduce){.lg-switch-knob{transition:none;}}
/* ── Round glass ICON BUTTON — a compact single-action control (e.g. the header
background picker trigger). Same height + glass material as .lg-switch, neutral. */
.lg-iconbtn{position:relative;width:32px;height:32px;flex-shrink:0;padding:0;border-radius:50%;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;color:var(--lg-muted);
background:rgba(118,118,128,.22);border:1px solid rgba(0,0,0,.20);
-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
box-shadow:inset 0 1px 3px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.7);
transition:background .2s ease,border-color .2s ease,color .2s ease,transform .12s ease;}
.lg-iconbtn svg{width:15px;height:15px;display:block;}
.lg-iconbtn:hover{color:var(--lg-text);background:rgba(118,118,128,.30);}
.lg-iconbtn:active{transform:scale(.94);}
.lg-iconbtn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,122,255,.28), inset 0 1px 0 rgba(255,255,255,.6);}
[data-bs-theme="dark"] .lg-iconbtn{background:rgba(120,140,190,.18);border-color:rgba(255,255,255,.14);color:#c7cfdd;
box-shadow:inset 0 1px 3px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);}
[data-bs-theme="dark"] .lg-iconbtn:hover{background:rgba(120,140,190,.28);color:#eaf1ff;}
[data-glass="clear"] .lg-iconbtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
[data-bs-theme="dark"][data-glass="clear"] .lg-iconbtn{background:rgba(120,140,190,.14);border-color:rgba(255,255,255,.18);}
@media (prefers-reduced-motion:reduce){.lg-iconbtn{transition:none;}}
/* ── BACKGROUND PICKER — a glass popover of theme-aware wallpaper thumbnails.
Trigger = .lg-iconbtn; panel = .lg-bgpop; each option = .lg-bgthumb (shows the
current theme's image via inline --thumb-light/--thumb-dark custom props). */
.lg-bgpicker{position:relative;display:inline-flex;}
.lg-bgpop{position:absolute;top:calc(100% + 10px);right:0;z-index:1090;width:270px;max-width:78vw;padding:12px;
border-radius:18px;
background:rgba(252,252,253,.9);border:1px solid rgba(225,228,234,.9);
-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
box-shadow:0 18px 44px -18px rgba(20,40,90,.34), inset 0 1px 0 rgba(255,255,255,.85);
animation:lgBgPopIn .16s ease;}
[data-bs-theme="dark"] .lg-bgpop{background:rgba(26,29,37,.92);border-color:rgba(255,255,255,.12);
box-shadow:0 20px 48px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.10);}
@keyframes lgBgPopIn{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.lg-bgpop{animation:none;}}
.lg-bgpop-title{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--lg-muted);margin:2px 4px 10px;}
.lg-bgpop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lg-bgthumb{padding:0;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:center;}
.lg-bgthumb-img{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:12px;
background:var(--thumb-light) center/cover no-repeat;
border:2px solid transparent;box-shadow:0 4px 12px -6px rgba(20,40,90,.4), inset 0 1px 0 rgba(255,255,255,.4);
transition:transform .14s ease,border-color .16s ease,box-shadow .16s ease;}
[data-bs-theme="dark"] .lg-bgthumb-img{background:var(--thumb-dark) center/cover no-repeat;}
.lg-bgthumb:hover .lg-bgthumb-img{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(20,40,90,.5);}
.lg-bgthumb-label{font-size:.72rem;font-weight:700;color:var(--lg-text);}
[data-bs-theme="dark"] .lg-bgthumb-label{color:#eaf1ff;}
/* Selected option — accent ring + a check badge. */
.lg-bgthumb.sel .lg-bgthumb-img{border-color:var(--lg-accent,#0a84ff);box-shadow:0 0 0 3px rgba(10,132,255,.28), 0 8px 18px -8px rgba(10,132,255,.5);}
.lg-bgthumb.sel .lg-bgthumb-img::after{content:'';position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;
background:var(--lg-accent,#0a84ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.485 1.929a.5.5 0 0 1 .086.702l-7 9a.5.5 0 0 1-.756.046l-3.5-3.5a.5.5 0 1 1 .708-.708l3.1 3.1 6.657-8.557a.5.5 0 0 1 .705-.083z'/%3E%3C/svg%3E") center/12px no-repeat;
box-shadow:0 2px 6px rgba(0,0,0,.35);}
.lg-bgthumb:focus-visible .lg-bgthumb-img{outline:none;border-color:var(--lg-accent,#0a84ff);box-shadow:0 0 0 4px rgba(10,132,255,.3);}
/* ── Background-extension: a full-viewport BLURRED copy of a hero photo, so a
sharp image / content in front dissolves into a blurred version of itself
(Apple's backgroundExtensionEffect). Set --lg-bg to the same image. */
.lg-bg-extend{position:fixed; inset:-60px; z-index:-2; pointer-events:none;
background:var(--lg-bg) center/cover no-repeat; filter:blur(48px) saturate(1.08); transform:scale(1.12);}
[data-bs-theme="dark"] .lg-bg-extend{filter:blur(52px) saturate(1.03) brightness(.92);}
/* ── Guardrails (MANDATORY — keep for accessibility) ────────────────────── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.lg-glass,.lg-tile,.lg-field,.lg-pill{background:rgba(20,26,44,.82);}
.lg-btn{background:linear-gradient(180deg,#3f95ff,#0a7bff);}
}
@media (prefers-reduced-transparency:reduce){
.lg-glass,.lg-tile,.lg-field,.lg-pill{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(20,26,44,.9);}
.lg-bg-extend{display:none;}
}
@media (prefers-reduced-motion:reduce){
.lg-btn::before{display:none;} .lg-btn:hover{transform:none;}
}
/* ── REQUIRED SVG FILTER — paste this once into each page's ─────────
(kept here as reference; SVG must live in the DOM, not in CSS)
──────────────────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════
DESIGN-PRINCIPLE PRIMITIVES (Design Motion reels — codified)
Three rules distilled from the reference reels, expressed as reusable tokens
+ utilities so every surface inherits them. See
docs/standards/apple-liquid-glass-design-system.md → "Design principles".
R1 "Pure black isn't dark mode — it's elevation." → surface ladder, no #000/#fff
R2 "A data table is a system." → .lg-table (tabular, hairline, sticky, hover)
R3 "Why Linear feels expensive." → one spacing scale, hairline borders,
tight small type, fast subtle motion
════════════════════════════════════════════════════════════════════════ */
:root{
/* R3 — motion: fast + subtle, one ease everywhere */
--lg-dur:.18s; --lg-dur-sm:.12s; --lg-dur-lg:.28s;
--lg-ease:cubic-bezier(.3,0,.2,1);
/* R3 — one 4px-based spacing scale (stop hand-picking gaps) */
--lg-space-1:4px; --lg-space-2:8px; --lg-space-3:12px; --lg-space-4:16px;
--lg-space-5:24px; --lg-space-6:32px; --lg-space-7:48px;
/* R3 — type tracking: crisp small text, headings pulled slightly tighter */
--lg-tracking-tight:-.014em; --lg-tracking-normal:0; --lg-tracking-caps:.06em;
/* R1 — elevation surfaces (LIGHT): each step up is a touch brighter, never #fff for body */
--lg-surface-0:#f4f5f7; /* app base */
--lg-surface-1:#fbfbfd; /* card */
--lg-surface-2:#ffffff; /* raised */
--lg-surface-line:rgba(60,60,67,.12); /* R3 — hairline, not a shadow */
}
[data-bs-theme="dark"]{
/* R1 — dark mode is ELEVATION, not ink. Base is a dark desaturated navy-grey;
every layer up gets LIGHTER (not a drop shadow), and nothing is pure #000. */
--lg-surface-0:#0e1116; /* app base */
--lg-surface-1:#161a22; /* card */
--lg-surface-2:#1e232d; /* raised */
--lg-surface-line:rgba(255,255,255,.09);
}
/* Elevation utilities — put content on a surface, separated by a hairline (R1/R3) */
.lg-elev-0{ background:var(--lg-surface-0); }
.lg-elev-1{ background:var(--lg-surface-1); border:1px solid var(--lg-surface-line); border-radius:var(--lg-radius); }
.lg-elev-2{ background:var(--lg-surface-2); border:1px solid var(--lg-surface-line); border-radius:var(--lg-radius); }
/* Heading helper — Linear-style tight tracking on display text (R3) */
.lg-heading{ letter-spacing:var(--lg-tracking-tight); font-weight:650; }
.lg-eyebrow{ font-size:.68rem; font-weight:800; letter-spacing:var(--lg-tracking-caps);
text-transform:uppercase; color:var(--lg-muted); }
/* ── R2 — data table as a system ─────────────────────────────────────────────
Content, not chrome: sits on a floored surface (never glass). Numbers align
right with tabular figures; NO vertical rules; faint horizontal rows only;
sticky header; generous row height; row hover instead of heavy zebra. */
.lg-table{
width:100%; border-collapse:collapse; font-family:var(--lg-font);
font-size:.9rem; color:var(--lg-text);
font-variant-numeric:tabular-nums lining-nums; /* stable digit widths */
}
.lg-table thead th{
position:sticky; top:0; z-index:2;
background:var(--lg-surface-1);
text-align:left; white-space:nowrap;
font-size:.72rem; font-weight:700; letter-spacing:var(--lg-tracking-caps); text-transform:uppercase;
color:var(--lg-muted);
padding:var(--lg-space-3) var(--lg-space-4);
border-bottom:1px solid var(--lg-surface-line);
}
.lg-table tbody td{
padding:var(--lg-space-3) var(--lg-space-4);
height:48px; vertical-align:middle;
border-bottom:1px solid var(--lg-surface-line); /* horizontal hairline only */
}
.lg-table tbody tr{ transition:background var(--lg-dur-sm) var(--lg-ease); }
.lg-table tbody tr:hover{ background:color-mix(in srgb, var(--lg-accent) 7%, transparent); }
.lg-table tbody tr:last-child td{ border-bottom:0; }
.lg-table .lg-num{ text-align:right; font-variant-numeric:tabular-nums lining-nums; } /* R2 — right-align numbers */
.lg-table .lg-cell-meta{ color:var(--lg-muted); font-size:.8rem; } /* R2 — secondary meta text */
@media (prefers-reduced-motion:reduce){
.lg-table tbody tr{ transition:none; }
}
/* ── Shared empty-state primitive (R3 — calm, not alarming) ───────────────────
Used by / components/dashboard/notEnoughDhata.blade.php
wherever a chart/list has no data for the current filter (dashboard cards,
asset/crew tracking, etc.) — small icon + muted title/sub, no red, no big gap. */
.asg-empty{
display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
gap:var(--lg-space-2); padding:var(--lg-space-6) var(--lg-space-4); min-height:140px;
}
.asg-empty-ico{
width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:color-mix(in srgb, var(--lg-muted) 14%, transparent); color:var(--lg-muted);
}
.asg-empty-title{ font-weight:700; font-size:.92rem; color:var(--lg-text); letter-spacing:var(--lg-tracking-tight); }
.asg-empty-sub{ font-size:.8rem; color:var(--lg-muted); max-width:26rem; }
/* ══ .lg-viewer — full-screen image viewer (gallery + Before/After compare) ═══
Markup: deck-ops/partials/image-viewer.blade.php · behaviour: deck-image-viewer.js.
A photo viewer is DARK IN BOTH THEMES: a light scrim washes a photo out, so the
light/dark axis collapses here and only Clear/Tinted varies. Still R1 — the
scrim is the dark app base (never #000) and text is one white at .87/.60/.38.
Glass is chrome only: the labels and the arrows. The photo is content and is
never filtered, tinted or rounded. R3: neutral icon buttons, no accent, no
glow, no lift; hover = one step lighter; 80 ms hover / 150 ms open. */
.lg-viewer{
--lgv-scrim:rgba(14,17,22,.97);
--lgv-chrome:rgba(255,255,255,.07);
--lgv-chrome-hover:rgba(255,255,255,.14);
--lgv-chrome-solid:#1e232d;
--lgv-line:rgba(255,255,255,.10);
--lgv-text:rgba(255,255,255,.87);
--lgv-text-2:rgba(255,255,255,.60);
--lgv-text-3:rgba(255,255,255,.38);
position:fixed; inset:0; z-index:1090;
display:flex; flex-direction:column;
background:var(--lgv-scrim); color:var(--lgv-text); font-family:var(--lg-font);
/* blur what is behind: a near-opaque scrim alone lets bright page controls ghost through */
-webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px);
opacity:0; transition:opacity .15s var(--lg-ease);
-webkit-user-select:none; user-select:none;
}
[data-glass="tinted"] .lg-viewer{ --lgv-chrome:rgba(30,35,45,.84); --lgv-chrome-hover:rgba(48,55,69,.92); }
.lg-viewer[hidden]{ display:none; }
.lg-viewer.is-open{ opacity:1; }
html.lg-viewer-open, html.lg-viewer-open body{ overflow:hidden; }
/* top bar — caption left, position switch centre, tools right */
.lg-viewer-bar{
flex:0 0 auto; display:flex; align-items:center; gap:var(--lg-space-4);
padding:var(--lg-space-3) var(--lg-space-4);
padding-top:max(var(--lg-space-3), env(safe-area-inset-top));
border-bottom:1px solid var(--lgv-line);
}
.lg-viewer-meta{ flex:1 1 0; min-width:0; }
.lg-viewer-title{ font-size:.72rem; color:var(--lgv-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-viewer-caption{
font-size:.86rem; font-weight:600; letter-spacing:var(--lg-tracking-tight);
font-variant-numeric:tabular-nums lining-nums;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lg-viewer-tools{ flex:0 0 auto; display:flex; align-items:center; gap:var(--lg-space-1); }
.lg-viewer-count{ font-size:.8rem; color:var(--lgv-text-2); font-variant-numeric:tabular-nums; margin-right:var(--lg-space-2); white-space:nowrap; }
.lg-viewer-btn{
width:36px; height:36px; flex:0 0 auto; padding:0;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid transparent; border-radius:10px;
background:transparent; color:var(--lgv-text-2); cursor:pointer;
transition:background-color .08s var(--lg-ease), color .08s var(--lg-ease);
}
.lg-viewer-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lg-viewer-btn:hover:not(:disabled){ background:var(--lgv-chrome-hover); color:var(--lgv-text); }
.lg-viewer-btn:focus-visible, .lg-viewer-seg-btn:focus-visible, .lg-viewer-thumb:focus-visible{ outline:2px solid var(--lgv-text-2); outline-offset:2px; }
.lg-viewer-btn:disabled{ color:var(--lgv-text-3); cursor:default; }
.lg-viewer-btn[hidden]{ display:none; }
.lg-viewer-btn[aria-pressed="true"]{ background:var(--lgv-chrome-hover); border-color:var(--lgv-line); color:var(--lgv-text); }
/* camera-position switch (only when the operation has 2+ positions) */
.lg-viewer-seg{ flex:0 0 auto; display:flex; gap:2px; padding:2px; border:1px solid var(--lgv-line); border-radius:10px; background:var(--lgv-chrome); }
.lg-viewer-seg[hidden]{ display:none; }
.lg-viewer-seg-btn{
border:0; border-radius:8px; padding:5px 12px; background:transparent; cursor:pointer;
color:var(--lgv-text-2); font:600 .76rem var(--lg-font); text-transform:capitalize;
transition:background-color .08s var(--lg-ease), color .08s var(--lg-ease);
}
.lg-viewer-seg-btn:hover{ color:var(--lgv-text); }
.lg-viewer-seg-btn[aria-pressed="true"]{ background:var(--lgv-chrome-hover); color:var(--lgv-text); }
/* stage — the photo(s). touch-action:none hands pinch/pan to the script. */
.lg-viewer-stage{ flex:1 1 0; min-height:0; position:relative; display:flex; touch-action:none; cursor:zoom-in; }
.lg-viewer.is-zoomed .lg-viewer-stage{ cursor:grab; }
.lg-viewer.is-zoomed.is-gesturing .lg-viewer-stage{ cursor:grabbing; }
.lg-viewer-pane{ flex:1 1 0; min-width:0; min-height:0; margin:0; position:relative; overflow:hidden; }
.lg-viewer-pane[hidden]{ display:none; }
.lg-viewer-pane img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; /* the WHOLE frame — never a crop */
transform-origin:center center; will-change:transform;
transition:transform var(--lg-dur-sm) var(--lg-ease), opacity var(--lg-dur-sm) var(--lg-ease);
pointer-events:none;
}
.lg-viewer.is-gesturing .lg-viewer-pane img{ transition:none; }
.lg-viewer-pane.is-loading img{ opacity:0; }
.lg-viewer-pane.is-loading::after{
content:"Loading\2026"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:.8rem; color:var(--lgv-text-3);
}
.lg-viewer.is-compare .lg-viewer-pane + .lg-viewer-pane{ border-left:1px solid var(--lgv-line); }
/* Before / After tags — compare mode only */
.lg-viewer-label{
display:none; position:absolute; top:var(--lg-space-3); left:var(--lg-space-3); z-index:1;
padding:4px 10px; border:1px solid var(--lgv-line); border-radius:999px;
background:var(--lgv-chrome); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
font-size:.74rem; font-weight:650; font-variant-numeric:tabular-nums; color:var(--lgv-text);
}
.lg-viewer.is-compare .lg-viewer-label{ display:block; }
/* prev / next — floating glass discs over the stage */
.lg-viewer-nav{
position:absolute; top:50%; z-index:2; width:44px; height:44px; margin-top:-22px; border-radius:50%;
border-color:var(--lgv-line); background:var(--lgv-chrome); color:var(--lgv-text);
-webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
}
.lg-viewer-nav.is-prev{ left:var(--lg-space-4); }
.lg-viewer-nav.is-next{ right:var(--lg-space-4); }
.lg-viewer-nav:disabled{ opacity:.35; }
.lg-viewer.is-compare .lg-viewer-nav, .lg-viewer.is-single .lg-viewer-nav{ display:none; }
/* thumbnail strip — gallery mode, 2+ captures */
.lg-viewer-strip{
flex:0 0 auto; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
padding:var(--lg-space-3) var(--lg-space-4);
padding-bottom:max(var(--lg-space-3), env(safe-area-inset-bottom));
border-top:1px solid var(--lgv-line);
}
.lg-viewer-strip-inner{ display:flex; gap:var(--lg-space-2); width:max-content; margin:0 auto; }
.lg-viewer.is-compare .lg-viewer-strip, .lg-viewer.is-single .lg-viewer-strip{ display:none; }
.lg-viewer-thumb{
position:relative; flex:0 0 auto; width:72px; height:48px; padding:0; overflow:hidden; cursor:pointer;
border:1px solid var(--lgv-line); border-radius:8px; background:var(--lgv-chrome-solid);
opacity:.5; transition:opacity .08s var(--lg-ease), border-color .08s var(--lg-ease);
}
.lg-viewer-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.lg-viewer-thumb:hover{ opacity:.85; }
.lg-viewer-thumb[aria-current="true"]{ opacity:1; border-color:var(--lgv-text); }
.lg-viewer-thumb-chip{
position:absolute; left:3px; bottom:3px; padding:0 5px; border-radius:4px;
background:rgba(14,17,22,.78); color:var(--lgv-text);
font-size:9px; font-weight:700; line-height:1.6; letter-spacing:.02em;
}
/* touch: 44 px targets */
@media (pointer:coarse){
.lg-viewer-btn{ width:44px; height:44px; }
}
/* narrow: stack the compare panes, give the caption its own line */
@media (max-width:768px){
.lg-viewer-bar{ flex-wrap:wrap; gap:var(--lg-space-2); padding-left:var(--lg-space-3); padding-right:var(--lg-space-3); }
.lg-viewer-meta{ flex-basis:100%; order:-1; }
.lg-viewer-tools{ margin-left:auto; }
.lg-viewer.is-compare .lg-viewer-stage{ flex-direction:column; }
.lg-viewer.is-compare .lg-viewer-pane + .lg-viewer-pane{ border-left:0; border-top:1px solid var(--lgv-line); }
.lg-viewer-nav.is-prev{ left:var(--lg-space-2); }
.lg-viewer-nav.is-next{ right:var(--lg-space-2); }
}
/* short landscape phone: the photo needs the height more than the strip does */
@media (max-height:480px){
.lg-viewer-strip{ display:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.lg-viewer{ --lgv-scrim:#0e1116; }
.lg-viewer-label, .lg-viewer-nav{ background:var(--lgv-chrome-solid); }
}
@media (prefers-reduced-transparency:reduce){
.lg-viewer{ --lgv-scrim:#0e1116; -webkit-backdrop-filter:none; backdrop-filter:none; }
.lg-viewer-label, .lg-viewer-nav{ background:var(--lgv-chrome-solid); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce){
.lg-viewer, .lg-viewer-btn, .lg-viewer-seg-btn, .lg-viewer-thumb, .lg-viewer-pane img{ transition:none; }
}
/* ── .lg-zoom-hint — the "open in the viewer" affordance on a thumbnail ────────
Wrap the ![]()
in .lg-zoom-host and drop the button inside. It sits ON a photo,
so like the viewer it is dark in both themes. R3: icon-only, neutral, hidden at
rest and revealed on hover / keyboard focus; always visible where there is no
hover (touch). No accent, no glow, no lift. */
.lg-zoom-host{ position:relative; }
.lg-zoom-hint{
position:absolute; top:6px; right:6px; z-index:2;
width:28px; height:28px; padding:0;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid rgba(255,255,255,.16); border-radius:8px;
background:rgba(14,17,22,.62); color:rgba(255,255,255,.87); cursor:zoom-in;
-webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
opacity:0; transition:opacity .08s var(--lg-ease), background-color .08s var(--lg-ease);
}
.lg-zoom-hint svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lg-zoom-host:hover .lg-zoom-hint, .lg-zoom-hint:focus-visible{ opacity:1; }
.lg-zoom-hint:hover{ background:rgba(30,35,45,.86); }
.lg-zoom-hint:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
@media (hover:none){ .lg-zoom-hint{ opacity:1; } }
@media (pointer:coarse){ .lg-zoom-hint{ width:36px; height:36px; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.lg-zoom-hint{ background:#1e232d; }
}
@media (prefers-reduced-transparency:reduce){
.lg-zoom-hint{ background:#1e232d; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce){ .lg-zoom-hint{ transition:none; } }