/* styles.css — OneSystem themeable base (mobile-first) Supports: pastel (default), glass (light), glass-dark, light, dark Driven entirely by CSS variables for instant theme + branding swaps. */ /* ================= Base Tokens (Pastel default) ================= */ :root{ /* Core palette */ --bg-gradient: linear-gradient(145deg,#edf3f0,#ece9f6,#fff0e6); --mint:#C8E3D2; --lav:#D7CEF0; --peach:#FFD8B8; --pink:#FBD6E3; --teal:#C8F5E4; --amber:#FFE9B3; --sky:#E0F4FF; --card:#ffffff; --surface:#ffffffcc; --glass:rgba(255,255,255,.65); --ink:#0f172a; --muted:#475569; --primary:#17B26A; /* Layout + effects */ --r:16px; --shadow:0 8px 24px rgba(0,0,0,.08); --gap:12px; --container:1100px; /* Banner controls (overridable by Settings) */ --banner-h:160px; /* height */ --banner-fit:contain; /* contain | cover */ --banner-bg: var(--lav); /* backdrop tint */ } /* Optional AM/PM auto if nothing set (does not override explicit data-theme) */ @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg-gradient:linear-gradient(145deg,#0b1220,#101826,#0d141f); --card:#0f172acc; --surface:#0f172a; --glass:rgba(17,24,39,.6); --ink:#e5e7eb; --muted:#94a3b8; --primary:#22d3ee; --mint:#1e293b; --lav:#1f2540; --peach:#2b1d16; --pink:#2b2230; --teal:#0f2f2b; --amber:#3a2c10; --sky:#0d2332; --shadow:0 10px 28px rgba(0,0,0,.45); --banner-bg:#101826; } } /* ================= Theme Variants (set ) ================= */ /* Pastel (default / safe) */ :root[data-theme="pastel"]{ --bg-gradient:linear-gradient(145deg,#edf3f0,#ece9f6,#fff0e6); --mint:#C8E3D2; --lav:#D7CEF0; --peach:#FFD8B8; --pink:#FBD6E3; --teal:#C8F5E4; --amber:#FFE9B3; --sky:#E0F4FF; --card:#ffffff; --surface:#ffffffcc; --glass:rgba(255,255,255,.65); --ink:#0f172a; --muted:#475569; --primary:#17B26A; --shadow:0 8px 24px rgba(0,0,0,.08); --banner-bg: var(--lav); } /* Glass (light) */ :root[data-theme="glass"]{ --bg-gradient:linear-gradient(135deg,#eef2ff,#ecfeff,#fef9c3); --mint:#E0F2FE; --lav:#E9D5FF; --peach:#FFE4E6; --pink:#FFE0F0; --teal:#D1FAE5; --amber:#FFF1B8; --sky:#DDF4FF; --card:#ffffff; --surface:#ffffffcc; --glass:rgba(255,255,255,.55); --ink:#0f172a; --muted:#475569; --primary:#0EA5E9; --shadow:0 10px 28px rgba(2,6,23,.08); --banner-bg: color-mix(in oklab, var(--lav) 70%, white 30%); } /* Glass (dark) */ :root[data-theme="glass-dark"]{ --bg-gradient:linear-gradient(145deg,#0b1220,#101826,#0d141f); --mint:#122033; --lav:#1b2040; --peach:#2b1d16; --pink:#2b2230; --teal:#0f2f2b; --amber:#3a2c10; --sky:#0d2332; --card:#0f172acc; --surface:#0b1320cc; --glass:rgba(15,23,42,.55); --ink:#e5e7eb; --muted:#94a3b8; --primary:#22d3ee; --shadow:0 14px 36px rgba(0,0,0,.55); --banner-bg:#0f172a; } /* Light (flat, minimal) */ :root[data-theme="light"]{ --bg-gradient:linear-gradient(180deg,#f7f9fb,#f8fafc); --mint:#E8F4EE; --lav:#EEE7FF; --peach:#FFE7D6; --pink:#FFE3EC; --teal:#E6FBF2; --amber:#FFF3C2; --sky:#EAF6FF; --card:#ffffff; --surface:#ffffff; --glass:rgba(255,255,255,.8); --ink:#0f172a; --muted:#475569; --primary:#0A84FF; --shadow:0 6px 18px rgba(0,0,0,.06); --banner-bg:#EEF2FF; } /* Dark (flat, high-contrast) */ :root[data-theme="dark"]{ --bg-gradient:linear-gradient(180deg,#0a0f17,#0d121b); --mint:#142433; --lav:#171c33; --peach:#221710; --pink:#231b24; --teal:#0f2621; --amber:#2d220f; --sky:#0e1f2c; --card:#0e1621; --surface:#0a0f17; --glass:rgba(14,22,33,.65); --ink:#e6edf3; --muted:#9fb0bf; --primary:#22c55e; --shadow:0 12px 30px rgba(0,0,0,.5); --banner-bg:#0e1621; } /* ================= Core Layout ================= */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; color:var(--ink); background:var(--bg-gradient); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--container); margin:0 auto; padding:0 10px} /* ================= Header ================= */ .header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; margin-top:10px; border-radius:12px; background: color-mix(in oklab, var(--mint) 80%, white 20%); border:1px solid #0001; box-shadow:var(--shadow); backdrop-filter:saturate(120%) blur(6px); } .header .logo{height:40px} .title{font-weight:900; font-size:18px} .sub{font-size:12px; color:var(--muted)} /* ================= Banner (fully variable-driven) ================= */ .banner{ margin:10px 0; border-radius:var(--r); height:var(--banner-h); background:var(--banner-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; box-shadow:var(--shadow); } .banner img{ width:100%; max-height:calc(var(--banner-h) - 12px); object-fit:var(--banner-fit); object-position:center; mix-blend-mode:multiply; opacity:.95; border-radius:var(--r); } /* ================= Cards, Rows, Grids ================= */ .card{ background:var(--card); border-radius:var(--r); padding:14px; border:1px solid #0001; box-shadow:var(--shadow); } .row{display:flex; flex-wrap:wrap; gap:10px; align-items:center} .grid2{display:grid; gap:var(--gap); grid-template-columns:1fr} .grid3{display:grid; gap:var(--gap); grid-template-columns:1fr} @media (min-width:720px){ .grid2{grid-template-columns:1fr 1fr} .grid3{grid-template-columns:repeat(3,1fr)} } /* ================= Buttons & Inputs ================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border-radius:999px; font-weight:800; background:#fff; color:var(--ink); border:1px solid #cbd5e1; cursor:pointer; transition:transform .08s ease, background .15s ease, box-shadow .15s ease; text-decoration:none; user-select:none; } .btn:hover{background:#f1f5f9} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--primary); color:#fff; border:none} .btn.ghost{background:transparent; border:1px dashed #cbd5e1} .input, select, textarea{ width:100%; padding:8px 10px; background:#fff; color:var(--ink); border:1px solid #cbd5e1; border-radius:8px; } select{appearance:none; background-image:linear-gradient(45deg,transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat:no-repeat;} textarea{resize:vertical} /* Dark-friendly inputs */ :root[data-theme="dark"] .input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="glass-dark"] .input, :root[data-theme="glass-dark"] select, :root[data-theme="glass-dark"] textarea{ background: var(--surface); color: var(--ink); border-color: #1f2a37; } /* ================= Glass Utilities ================= */ .glass{ background:var(--glass); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); border:1px solid rgba(255,255,255,.22); box-shadow:var(--shadow); } /* ================= Tabs ================= */ .tabs{display:flex; flex-wrap:wrap; gap:8px} .tab{ padding:8px 12px; border-radius:10px; background:#f3f4f6; cursor:pointer; font-weight:800; border:1px solid #e5e7eb; } .tab.active{background:#111827; color:#fff; border-color:#111827} :root[data-theme="dark"] .tab, :root[data-theme="glass-dark"] .tab{ background:#111827; color:#e5e7eb; border-color:#1f2937 } :root[data-theme="dark"] .tab.active, :root[data-theme="glass-dark"] .tab.active{ background:var(--primary); color:#031215; border-color:var(--primary) } /* ================= Tables ================= */ table{width:100%; border-collapse:collapse} th,td{padding:8px; border-bottom:1px solid #e5e7eb; text-align:left} th{background:#f8fafc; position:sticky; top:0; z-index:1} .right{text-align:right} :root[data-theme="dark"] th, :root[data-theme="glass-dark"] th{ background:#0f172a; border-color:#1f2a37 } :root[data-theme="dark"] td, :root[data-theme="glass-dark"] td{ border-color:#1f2a37 } /* ================= KPIs ================= */ .kpis{display:grid; gap:10px; grid-template-columns:1fr 1fr} @media (min-width:720px){ .kpis{grid-template-columns:repeat(3,1fr)} } @media (min-width:1024px){ .kpis{grid-template-columns:repeat(6,1fr)} } .kpi{border-radius:16px; padding:12px; border:1px solid #e2e8f0; background:#fff; box-shadow:var(--shadow)} .kpi h4{margin:0; font-size:12px; color:#334155; text-transform:uppercase; letter-spacing:.3px} .kpi b{display:block; font-size:20px; margin-top:6px} .kpi--sales{background:var(--peach)} .kpi--purchases{background:var(--lav)} .kpi--profit{background:var(--teal)} .kpi--margin{background:var(--amber)} .kpi--stock{background:var(--mint)} .kpi--expiry{background:#f4f4f5} .kpi--consult{background:var(--pink)} .kpi--lab{background:var(--sky)} :root[data-theme="dark"] .kpi, :root[data-theme="glass-dark"] .kpi{ background:var(--surface); border-color:#1f2a37; color:var(--ink) } /* ================= Badges/Chips ================= */ .badge{display:inline-block; border:1px solid #e2e8f0; border-radius:999px; padding:3px 10px; background:#fff; font-size:12px; font-weight:800} .chip{display:inline-flex; align-items:center; gap:6px; border:1px solid #e2e8f0; border-radius:999px; padding:4px 10px; background:#fff; font-size:12px; font-weight:700} .dot{width:8px; height:8px; border-radius:50%} .ok .dot{background:#16a34a} .warn .dot{background:#f59e0b} .err .dot{background:#ef4444} :root[data-theme="dark"] .badge, :root[data-theme="glass-dark"] .badge, :root[data-theme="dark"] .chip, :root[data-theme="glass-dark"] .chip{ background:var(--surface); border-color:#1f2a37; color:var(--ink) } /* ================= Footer ================= */ .footer{color:#64748b; font-size:12px; text-align:center; margin:18px 0 10px} :root[data-theme="dark"] .footer, :root[data-theme="glass-dark"] .footer{ color:#9fb0bf } /* ================= Morph Animations (optional flair) ================= */ .morph{ position:relative; overflow:hidden; isolation:isolate; border-radius:24px; } .morph::before, .morph::after{ content:""; position:absolute; width:280px; height:280px; border-radius:50%; filter:blur(28px); opacity:.22; z-index:-1; transform:translate(-30%,-30%); transition:transform .8s ease, opacity .4s ease; background: conic-gradient(from 180deg at 50% 50%, var(--primary), transparent, var(--teal), transparent, var(--pink), transparent); } .morph:hover::before{ transform:translate(10%,-10%) } .morph:hover::after{ transform:translate(40%,10%); opacity:.3 } /* ================= Utilities ================= */ .muted{color:var(--muted)} .hide{display:none !important} .center{text-align:center} /* ================= Desktop Tweaks ================= */ @media (min-width:1200px){ .wrap{max-width:1200px} } /* ================= Print ================= */ @media print{ body{background:#fff} .header,.banner,.footer,.tabs,.btn{display:none !important} .card{box-shadow:none; border:1px solid #0002} }