/* ============================================================ modern.css — design system for the ledger apps Loaded AFTER style.css / global/style.css by header.php. Layers: 1. Tokens (light + dark) 2. Base + typography + focus 3. Components (button, field, card, table, badge, toast) 4. Legacy bridges — map the app's existing classes onto the components, since page markup isn't rewritten yet 5. App shell + responsive drawer 6. Legacy overrides — beat the old stylesheets Specificity notes (do NOT "simplify" these): • `html body` (0,0,2) — pages re-include style.css AFTER this file, and Bootstrap loads after it on global/ pages. • `body #menu .nav` (1,1,1) — beats Bootstrap `.nav{display:flex}`. • `body #menu ul li a` (1,0,4) — beats legacy `#menu ul li a`. • !important on mobile layout — beats the legacy ≤384px block. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root{ /* brand — taken from the app's existing colours */ --brand:#4a89dc; /* login accent */ --brand-strong:#165BD3; /* dashboard figures */ --brand-soft:#eaf2fc; --slate:#6F7D94; /* existing .button background */ --slate-strong:#5c6a80; /* surfaces */ --surface-0:#ededed; /* page */ --surface-1:#f6f7f9; /* subtle panel */ --surface-2:#ffffff; /* card */ /* text */ --text-1:#333333; --text-2:#767777; --text-3:#9b9b9b; --text-on-accent:#ffffff; /* lines */ --border:#dddddd; --border-strong:#c9ced6; /* status */ --success:#1f7a44; --success-bg:#e7f4ec; --warning:#8a5a00; --warning-bg:#fdf3e2; --danger:#a32d2d; --danger-bg:#fceaea; /* spacing (4pt scale) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; /* shape + elevation */ --radius:10px; --radius-sm:6px; --radius-pill:999px; --shadow-1:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); --shadow-2:0 6px 20px rgba(16,24,40,.12); --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; } /* Dark mode. Auto by preference, or forced with . The legacy stylesheets hardcode white surfaces, so section 6 re-points those at the tokens. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --surface-0:#15181d; --surface-1:#1b1f26; --surface-2:#22272f; --text-1:#e7e9ec; --text-2:#a8afba; --text-3:#828a96; --border:#333a44; --border-strong:#454e5a; --brand-soft:#1d2b3f; --success-bg:#12291d; --warning-bg:#2b2113; --danger-bg:#2c1718; --shadow-1:0 1px 3px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.5); } } :root[data-theme="dark"]{ --surface-0:#15181d; --surface-1:#1b1f26; --surface-2:#22272f; --text-1:#e7e9ec; --text-2:#a8afba; --text-3:#828a96; --border:#333a44; --border-strong:#454e5a; --brand-soft:#1d2b3f; --success-bg:#12291d; --warning-bg:#2b2113; --danger-bg:#2c1718; --shadow-1:0 1px 3px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.5); } /* ---------- 2. Base + typography + focus ---------- */ html body{ font-family:var(--font-sans); background:var(--surface-0); color:var(--text-1); font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%; } body h1,body h2,body h3,body h4,body h5,body h6{ font-family:var(--font-sans); color:var(--text-1); font-weight:600; line-height:1.25; } body h1{ font-size:clamp(24px,2.4vw,30px); } body h2{ font-size:clamp(20px,2vw,24px); } body h3{ font-size:18px; } body h4{ font-size:16px; } body a{ color:var(--brand); text-decoration:none; } body a:hover{ color:var(--brand-strong); text-decoration:underline; } /* Visible keyboard focus everywhere (the app had none) */ body :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--radius-sm); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } } /* ---------- 3. Components ---------- */ /* Buttons */ .btn, body .page-content .button, body button.button, body input[type=submit]{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); background:var(--slate); color:#fff; border:1px solid transparent; border-radius:var(--radius-sm); padding:0 var(--sp-5); width:auto; min-width:110px; min-height:44px; font-family:var(--font-sans); font-size:14px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-1); transition:background .15s,border-color .15s; } .btn:hover, body .page-content .button:hover, body button.button:hover, body input[type=submit]:hover{ background:var(--slate-strong); color:#fff; } .btn-primary, body .btn-primary{ background:var(--brand); border-color:var(--brand); color:var(--text-on-accent); } .btn-primary:hover, body .btn-primary:hover{ background:var(--brand-strong); border-color:var(--brand-strong); } .btn-ghost{ background:transparent; color:var(--text-1); border-color:var(--border-strong); box-shadow:none; } .btn-ghost:hover{ background:var(--surface-1); color:var(--text-1); } .btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; } /* Form card + field groups (replaces form layout) */ .form-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:var(--sp-5); max-width:560px; } .form-card .field input, .form-card .field select, .form-card .field textarea{ width:100%; } .form-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-4); } .form-actions{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border); } /* Fields */ .field{ display:block; margin-bottom:var(--sp-4); } .field > label{ display:block; font-size:13px; color:var(--text-2); margin-bottom:var(--sp-2); } .field .hint{ font-size:12px; color:var(--text-3); margin-top:var(--sp-1); } /* Inline radio / checkbox group */ .radio-group{ display:flex; flex-wrap:wrap; gap:var(--sp-2); } .radio-group label{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; min-height:40px; border:1px solid var(--border); border-radius:var(--radius-pill); font-size:14px; color:var(--text-1); cursor:pointer; transition:border-color .15s, background .15s; } .radio-group label:hover{ border-color:var(--border-strong); } .radio-group input{ min-height:auto; accent-color:var(--brand); margin:0; } .radio-group label:has(input:checked){ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-strong); } .field .error{ font-size:12px; color:var(--danger); margin-top:var(--sp-1); } body input[type=text], body input[type=password], body input[type=number], body input[type=date], body input[type=email], body input[type=tel], body select, body textarea{ padding:10px 12px; min-height:44px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); font-family:var(--font-sans); font-size:15px; color:var(--text-1); box-sizing:border-box; max-width:100%; transition:border-color .15s, box-shadow .15s; } body input::placeholder,body textarea::placeholder{ color:var(--text-3); } body input:focus, body select:focus, body textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); } body input[disabled],body select[disabled]{ background:var(--surface-1); color:var(--text-3); } /* Card */ .card, body .card, body .page-content .block{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); } /* Badge */ .badge{ display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:var(--radius-pill); line-height:1.6; } .badge-success{ background:var(--success-bg); color:var(--success); } .badge-warning{ background:var(--warning-bg); color:var(--warning); } .badge-danger{ background:var(--danger-bg); color:var(--danger); } /* Toast (styling now; JS helper wired in a later step) */ .toast-host{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:var(--sp-2); z-index:2000; } .toast{ background:var(--surface-2); color:var(--text-1); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:var(--radius-sm); box-shadow:var(--shadow-2); padding:12px 16px; font-size:14px; max-width:340px; } .toast-success{ border-left-color:var(--success); } .toast-danger{ border-left-color:var(--danger); } /* ---------- 4. Legacy bridges: tables ---------- */ /* Every table in .page-content becomes a card. `#dashTable` (layout) and `.mobiletable`/`#inv_det` (intentional stacked pattern) are excluded. */ body .page-content table:not(#dashTable):not(.mobiletable){ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); border-collapse:separate; border-spacing:0; width:100%; margin-bottom:var(--sp-4); overflow:hidden; } body .page-content table:not(#dashTable):not(.mobiletable) th{ background:var(--surface-1); color:var(--text-2); font-weight:600; font-size:13px; text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap; } body .page-content table:not(#dashTable):not(.mobiletable) td{ padding:12px 14px; vertical-align:middle; color:var(--text-1); } /* Row separators only on real DATA tables (those with a
); form-layout tables stay borderless. Degrades safely without :has(). */ body .page-content table:has(th) tbody tr td{ border-bottom:1px solid var(--border); } body .page-content table:has(th) tbody tr:last-child td{ border-bottom:none; } body .page-content table:has(th) tbody tr:hover td{ background:var(--surface-1); } /* Legacy centres these report cells via an ID selector, leaving them misaligned under left-aligned headers. */ body .page-content #searchResult table tr td, body .page-content #orderdetails table tr td{ text-align:left; } /* Form-layout tables: first column reads as a label */ body .page-content table:not(:has(th)):not(#dashTable) td:first-child{ color:var(--text-2); white-space:nowrap; } /* Dashboard layout table -> cards */ body .page-content #dashTable{ border-collapse:separate; border-spacing:var(--sp-3); width:100%; background:none; border:none; box-shadow:none; } body .page-content #dashTable td{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:var(--sp-4); vertical-align:top; } /* ---------- 4b. Print order form (new_bill.php) — CSS-only bridges ---------- Markup/JS untouched (autosum/addRow/validation reference ids). These style the legacy classes: tabs, the line-item grid inputs, and the totals block. */ body .page-content .tab{ display:flex; gap:4px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-1); padding:4px; margin-bottom:var(--sp-4); width:fit-content; max-width:100%; overflow-x:auto; } body .page-content .tab .tablinks{ background:transparent; border:none; color:var(--text-2); padding:9px 18px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; } body .page-content .tab .tablinks:hover{ color:var(--text-1); background:var(--surface-2); } body .page-content .tab .tablinks.active{ background:var(--surface-2); color:var(--brand-strong); box-shadow:var(--shadow-1); } /* Line-item grid: compact inputs (override the tall default so the grid stays dense) */ body .page-content .inp_box{ min-height:36px; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); font-size:14px; color:var(--text-1); box-sizing:border-box; max-width:100%; } body .page-content .inp_box:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); } body .page-content #orderTab{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface-2); } body .page-content #orderTab th{ background:var(--brand-soft); color:var(--brand-strong); font-weight:600; padding:10px 8px; text-align:left; } body .page-content #orderTab td{ padding:8px; border-bottom:1px solid var(--border); white-space:nowrap; } /* single-input cells fill the column; paired size inputs (size=3) stay inline+narrow */ body .page-content #orderTab td .inp_box{ width:100%; } body .page-content #orderTab td .inp_box[size="3"]{ width:46px; display:inline-block; } /* Totals block */ body .page-content .label_pad{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:var(--sp-4); margin:var(--sp-4) 0; max-width:360px; line-height:2.2; } body .page-content .label_pad .inp_box{ float:right; width:130px; } /* ---------- 5. App shell ---------- */ body .sidebar1{ background:var(--surface-2); border-right:1px solid var(--border); box-shadow:none; } body .nav{ list-style:none; margin:0; padding:var(--sp-2) 0; } body .nav li{ list-style:none; margin:0; } /* Bootstrap (global/ pages) sets `.nav{display:flex;flex-wrap:wrap}`. */ body #menu .nav{ display:block; flex-wrap:nowrap; } body #menu .nav li{ display:block; width:auto; float:none; } body .nav a{ display:block; color:var(--text-2); text-decoration:none; border-left:3px solid transparent; transition:background .15s,color .15s; } body .nav a:hover{ background:var(--brand-soft); color:var(--brand-strong); text-decoration:none; } body .nav a.selected, body .nav li.selected>a{ background:var(--brand-soft); color:var(--brand-strong); border-left-color:var(--brand); } /* legacy `#menu ul li a` (1,0,3) pins Oxygen + uppercase; take it back */ body #menu ul li a{ font-family:var(--font-sans); } body .header{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); background:var(--surface-2); border-bottom:1px solid var(--border); } body .header h2{ margin:0; } body .page-content{ padding:var(--sp-4) var(--sp-5); } body .page-content h3{ margin:0 0 var(--sp-3); } body .page-content h4{ margin:0 0 var(--sp-2); } body .footer{ color:var(--text-3); border-top:1px solid var(--border); padding:var(--sp-3) var(--sp-5); font-size:13px; } /* ---------- 6. Legacy surface overrides (needed for dark mode) ---------- */ body .container, body .pucontainer{ background:var(--surface-0); } body .main-panel{ background:var(--surface-0); } body .content{ background:transparent; } /* ---------- Mobile chrome (hidden on desktop) ---------- */ .mobile-topbar{ display:none; } .menu-toggle{ display:none; } .menu-overlay{ display:none; } /* ============================================================ Responsive — phones / small tablets ============================================================ */ @media (max-width: 768px){ /* Legacy ≤384px block sets `body{padding:0;width:384px}` and is re-included AFTER this file — `html body` out-specifies it. */ html body{ width:auto; min-width:0; } /* `.container` = root print app, `.pucontainer` = global ledger app (renamed there to avoid clashing with Bootstrap's `.container`). The fixed mobile top bar is a child of these, so the 52px offset lives here — NOT on `body` — so topbar-less public pages get no phantom gap. */ .container, .pucontainer{ min-width:0 !important; max-width:none !important; width:100% !important; height:auto !important; min-height:0 !important; padding-top:52px !important; } .mobile-topbar{ display:flex; align-items:center; gap:var(--sp-2); position:fixed; top:0; left:0; right:0; height:52px; background:var(--slate); padding:0 var(--sp-3); z-index:1000; box-shadow:var(--shadow-2); } .mobile-topbar .mt-title{ color:#fff; font-size:17px; font-weight:600; } .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; background:transparent; border:none; color:#fff; font-size:24px; line-height:1; cursor:pointer; } /* sidebar -> slide-in drawer */ body .sidebar1{ position:fixed !important; top:0; bottom:0; left:-88% !important; width:82% !important; max-width:300px; height:100% !important; max-height:100% !important; z-index:1100 !important; transition:left .25s ease; box-shadow:var(--shadow-2); padding-top:var(--sp-2); overflow:auto; } body.menu-open .sidebar1{ left:0 !important; } /* legacy ≤384px floats `#menu ul li a` at 18% width (ID selector) */ body #menu ul li a, body #menu .nav a{ display:block !important; float:none !important; width:auto !important; text-align:left !important; text-shadow:none !important; margin:0 !important; font:inherit !important; color:var(--text-2); padding:12px 18px; } body #menu .nav a.selected{ color:var(--brand-strong); } .menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1050; } body.menu-open .menu-overlay{ display:block; } body .main-panel{ position:static !important; float:none !important; width:100% !important; height:auto !important; max-height:none !important; overflow:visible !important; } body .header{ padding:var(--sp-3) var(--sp-4); } body .page-content{ padding:var(--sp-3); } /* dashboard cards stack */ body .page-content #dashTable, body .page-content #dashTable tbody, body .page-content #dashTable tr{ display:block; width:100%; } body .page-content #dashTable td{ display:block; width:100% !important; margin-bottom:var(--sp-3); box-sizing:border-box; } /* Legacy ≤384px CSS force-stacks ALL cells via a bare `thead,tbody,th,td,tr{display:block}` rule. Restore data tables. */ body .page-content table:not(.mobiletable):not(#dashTable){ display:table; width:100%; } body .page-content table:not(.mobiletable):not(#dashTable) thead{ display:table-header-group; } body .page-content table:not(.mobiletable):not(#dashTable) tbody{ display:table-row-group; } body .page-content table:not(.mobiletable):not(#dashTable) tr{ display:table-row; } body .page-content table:not(.mobiletable):not(#dashTable) th, body .page-content table:not(.mobiletable):not(#dashTable) td{ display:table-cell; } /* wide data tables scroll instead of breaking layout */ body .page-content #searchResult, body .page-content #orderdetails, body .page-content #orderTable{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } body .page-content #searchResult table, body .page-content #orderdetails table, body .page-content #orderTable table{ min-width:100%; width:auto; } /* thumb-friendly forms */ body .page-content input[type=text], body .page-content input[type=password], body .page-content input[type=number], body .page-content input[type=date], body .page-content select, body .page-content textarea{ width:100%; } body .page-content .button, body .page-content input[type=submit]{ width:100%; } .toast-host{ left:12px; right:12px; bottom:12px; } .toast{ max-width:none; } }