/* ============================================================ v3.2 — Single top bar with inline menu + global COMPACT density Browser-first: small paddings, tight tables, excel-like boxes. ============================================================ */ /* ---- kill old sidebar layout ---- */ .dash-sidebar { display: none !important; } .dash-main { margin-left: 0 !important; width: 100%; } .dash-body { display: block !important; } #dashMenuBtn, .dash-quicknav { display: none !important; } /* ---- single top bar ---- */ .dash-topbar { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px; } .dash-topbar h1 { font-size: 13.5px; margin: 0 6px 0 0; white-space: nowrap; } /* ---- Nexcod POS company logo (actual brand mark + wordmark) ---- */ .nx-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; margin-right: 12px; flex-shrink: 0; } .nx-brand-mark { width: 34px; height: 34px; border-radius:50%; object-fit: contain; flex-shrink: 0; } .nx-brand-txt { font-family: var(--ff-sans); font-weight: 800; font-size: 18px; letter-spacing: .2px; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); white-space: nowrap; } .nx-brand-txt span { color: #ff5a5f; } /* "POS" in brand red */ .dash-topbar h1 { color: rgba(255,255,255,.9) !important; font-weight: 600; padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,.28); } /* menu inline in the top bar */ .nx-menu { display: flex; align-items: center; gap: 1px; min-width: 0; flex-wrap: nowrap; } .nx-item { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius:6px; font-size: 12.5px; font-weight: 600; color: inherit; opacity: .82; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; } .nx-item:hover { opacity: 1; background: rgba(127,127,127,.14); } .nx-item.active, .nx-drop.active > .nx-item { opacity: 1; background: rgba(127,127,127,.2); font-weight: 700; } .nx-drop { position: relative; } .nx-panel { position: absolute; top: calc(100% + 4px); left: 0; min-width: 188px; padding: 4px; background: var(--bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius:8px; box-shadow: 0 10px 26px rgba(0,0,0,.16); display: none; flex-direction: column; z-index: 95; } [data-theme="dark"] .nx-panel { background: var(--bg-elevated, #1f2937); } .nx-panel.nx-right { left: auto; right: 0; } .nx-drop.open .nx-panel { display: flex; } .nx-panel a { padding: 7px 10px; border-radius:6px; font-size: 12.5px; font-weight: 500; color: var(--text, #111827); text-decoration: none; } .nx-panel a:hover { background: var(--bg-subtle, #f3f4f6); } .nx-panel a.on { color: var(--primary, #1d4ed8); font-weight: 700; background: color-mix(in srgb, var(--primary, #1d4ed8) 8%, transparent); } .nx-burger { display: none; background: none; border: 1px solid var(--border); border-radius:6px; padding: 5px; color: inherit; cursor: pointer; } @media (max-width: 1080px) { .dash-topbar { flex-wrap: wrap; height: auto; padding: 6px 10px; } .dash-topbar h1 { display: none; } .nx-burger { display: inline-flex; } .nx-menu { display: none; flex-direction: column; align-items: stretch; width: 100%; order: 10; } .dash-topbar.open .nx-menu { display: flex; } .nx-item { width: 100%; justify-content: space-between; } .nx-panel { position: static; box-shadow: none; border: 0; padding-left: 12px; min-width: 0; } } /* ============================================================ GLOBAL COMPACT DENSITY — excel-like, minimal margins ============================================================ */ .dash-content { padding: 6px 8px !important; max-width: 100% !important; } .form-section { padding: 8px 10px !important; margin-bottom: 6px !important; border-radius:6px !important; } .dash-table-wrap { border-radius:4px !important; margin-bottom: 6px !important; } /* tables: Marg-ERP style — full gridlines, tight rows, small font, zero fat */ .dash-table { border-collapse: collapse !important; } .dash-table th, .dash-table td { padding: 2px 6px !important; font-size: 11.5px !important; border: 1px solid var(--border) !important; } .dash-table th { font-size: 10px !important; letter-spacing: .2px !important; padding: 3px 6px !important; background: var(--bg-subtle); } .dash-table tbody tr td { line-height: 1.3; } .dash-table tbody tr:last-child td { border-bottom: 1px solid var(--border) !important; } .dash-table .btn-sm { padding: 1px 6px !important; font-size: 10.5px !important; } /* forms */ .form-input, .form-select { height: 30px !important; padding: 3px 8px !important; font-size: 12.5px !important; border-radius:6px !important; } textarea.form-input { height: auto !important; } .form-group { margin-bottom: 8px !important; } .form-label { font-size: 10.5px !important; margin-bottom: 2px !important; } /* buttons */ .btn { padding: 5px 11px !important; font-size: 12.5px !important; border-radius:6px !important; } .btn-sm { padding: 3px 8px !important; font-size: 11.5px !important; } /* alerts: unmistakable colored boxes */ .alert { padding: 9px 12px !important; border-radius:8px !important; font-size: 12.5px !important; font-weight: 600; border: 1.5px solid transparent; } .alert-danger { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; } .alert-success { background: #f0fdf4 !important; color: #15803d !important; border-color: #86efac !important; } .alert-warning { background: #fffbeb !important; color: #b45309 !important; border-color: #fcd34d !important; } .alert-info { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #93c5fd !important; } /* dashboard stat cards: uniform small boxes */ .stat-grid { gap: 8px !important; } .stat-card { padding: 9px 11px !important; border-radius:8px !important; min-height: 0 !important; } .stat-card .stat-value { font-size: 17px !important; } .stat-card .stat-top { font-size: 10px !important; } /* empty states smaller */ .empty { padding: 26px 14px !important; } .empty h3 { font-size: 14px !important; } .empty p { font-size: 12px !important; } /* modals a bit larger for easy filling */ .nx-modal-card, .co-card, .modal-card { max-width: 880px !important; width: min(96vw, 880px) !important; } /* ============================================================ BILLING — fixed-viewport excel screen (no outer scroll) ============================================================ */ body.page-billing .dash-content { padding: 6px 8px !important; } body.page-billing .bill-wrap { grid-template-columns: 1fr !important; height: calc(100vh - 46px - 12px) !important; min-height: 440px !important; gap: 0 !important; } body.page-billing .bill-main { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius:8px; overflow: hidden; } body.page-billing .bill-toolbar { padding: 6px 8px !important; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 6px !important; } body.page-billing .bill-table-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; } /* excel grid cells */ body.page-billing .bill-table th, body.page-billing .bill-table td { padding: 2px 4px !important; font-size: 12px !important; border: 1px solid var(--border) !important; } body.page-billing .bill-table th { font-size: 10px !important; position: sticky; top: 0; z-index: 5; background: #1e293b !important; color: #ffffff !important; font-weight: 700; } body.page-billing .bill-table .cell:focus { outline: 2px solid var(--primary, #1d4ed8); outline-offset: -2px; box-shadow: none !important; } /* bottom summary bar: excel-type total boxes, always visible */ body.page-billing .bill-botbar { border-top: 2px solid var(--border); padding: 6px 8px !important; display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; background: var(--bg-subtle, #f8fafc); } body.page-billing .bb-totals { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; } body.page-billing .bb-totals span { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--border); border-radius:6px; background: var(--bg, #fff); padding: 4px 12px; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); min-width: 92px; } body.page-billing .bb-totals span b { font-size: 15px; color: var(--text); letter-spacing: 0; margin-top: 1px; } body.page-billing .bb-totals .bb-grand { border-color: var(--primary, #1d4ed8); background: color-mix(in srgb, var(--primary, #1d4ed8) 7%, var(--bg, #fff)); } body.page-billing .bb-totals .bb-grand b { color: var(--primary, #1d4ed8); font-size: 17px; } body.page-billing .bb-totals .bb-disc b { color: #dc2626; } @media (max-width: 980px) { body.page-billing .bill-wrap { height: auto !important; } body.page-billing .bill-table-scroll { max-height: 55vh; } } /* ===== All software tables → BLACK, readable text (headers + cells + secondary). Covers both table classes used on the dashboard: .dash-table (compact grid) and the generic .table. Scoped to light theme so dark mode keeps its light-on-dark text. Coloured amount cells use inline green/red, which still win — only greys turn black. The billing header (body.page-billing .bill-table th) has higher specificity, so it keeps its white-on-dark styling untouched. ===== */ :root:not([data-theme="dark"]) .dash-table th, :root:not([data-theme="dark"]) .table th { color: #111827 !important; } :root:not([data-theme="dark"]) .dash-table td, :root:not([data-theme="dark"]) .table td { color: #111827; } :root:not([data-theme="dark"]) .dash-table td small, :root:not([data-theme="dark"]) .dash-table td .text-muted, :root:not([data-theme="dark"]) .dash-table .text-muted, :root:not([data-theme="dark"]) .dash-table [style*="text-muted"], :root:not([data-theme="dark"]) .dash-table [style*="#64748b"], :root:not([data-theme="dark"]) .dash-table [style*="#94a3b8"], :root:not([data-theme="dark"]) .dash-table [style*="#6b7280"], :root:not([data-theme="dark"]) .dash-table [style*="#9ca3af"], :root:not([data-theme="dark"]) .dash-table [style*="#475569"], :root:not([data-theme="dark"]) .table td small, :root:not([data-theme="dark"]) .table td .text-muted, :root:not([data-theme="dark"]) .table .text-muted, :root:not([data-theme="dark"]) .table [style*="text-muted"], :root:not([data-theme="dark"]) .table [style*="#64748b"], :root:not([data-theme="dark"]) .table [style*="#94a3b8"], :root:not([data-theme="dark"]) .table [style*="#6b7280"], :root:not([data-theme="dark"]) .table [style*="#9ca3af"], :root:not([data-theme="dark"]) .table [style*="#475569"] { color: #111827 !important; } /* ===== Excel-style VISIBLE gridlines: strong near-black cell borders on every software table — billing POS grid, inventory, dashboard, and generic .table. Light theme only, so dark mode keeps its theme border via the base var(--border) rules. The billing header (th) is intentionally left out so its light separators still show on the dark bar. ===== */ :root:not([data-theme="dark"]) .dash-table th, :root:not([data-theme="dark"]) .dash-table td, :root:not([data-theme="dark"]) .table th, :root:not([data-theme="dark"]) .table td, :root:not([data-theme="dark"]) body.page-billing .bill-table td { border: 1px solid #111827 !important; } /* generic .table gets a full outer frame too (it normally only draws bottom lines) */ :root:not([data-theme="dark"]) .table { border: 1px solid #111827 !important; border-collapse: collapse !important; } /* billing POS cells: black, fully-readable text (header stays white-on-dark) */ :root:not([data-theme="dark"]) body.page-billing .bill-table td, :root:not([data-theme="dark"]) body.page-billing .bill-table td .cell, :root:not([data-theme="dark"]) body.page-billing .bill-table td input { color: #111827; } /* ===== Software buttons: slightly LARGER + CRISPER (flat, no soft shadow) + LESS-ROUND corners. Small buttons were reading blurry (tiny white text + inset shadow) and corners felt too round. Theme-agnostic (size/radius/shadow). Kept moderate so layouts don't break. ===== */ /* size only — the look (radius, gloss, shadows) is set in the glossy block lower down */ .btn { padding: 7px 14px !important; font-size: 13px !important; } .btn-sm { padding: 5px 11px !important; font-size: 12px !important; } .btn-lg { padding: 10px 18px !important; font-size: 14.5px !important; border-radius:5px !important; } /* in-table action buttons (Edit/Delete) were 10.5px — bump so they're clear, not fuzzy */ .dash-table .btn, .dash-table .btn-sm { padding: 3px 9px !important; font-size: 11.5px !important; border-radius:4px !important; } .btn svg, .btn-sm svg { vertical-align: middle; } /* tighter, less-round corners across cards / panels / inputs / modals */ .form-section, .dash-card, .card, .stat-card, .dash-table-wrap, .alert, .empty { border-radius:6px !important; } .nx-modal-card, .co-card, .modal-card { border-radius:8px !important; } .form-input, .form-select { border-radius:4px !important; } .nx-item { border-radius:5px !important; } /* qa-btn/mo-btn get 10px in the glossy block below */ /* ============================================================ CRISP-UI PASS — text sharpness, boxed cards, bordered submenus. (Dashboard-only stylesheet, so the public marketing site is untouched.) ============================================================ */ /* ---- 1. HEADER MENU TEXT: was faded via opacity:.82 on a dark navy bar, which reads as "blurry". Full-opacity solid white = crisp. ---- */ .nx-item { opacity: 1 !important; color: #fff !important; font-weight: 600; } .nx-item:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; } .nx-item.active, .nx-drop.active > .nx-item, .nx-drop.open > .nx-item { background: rgba(255,255,255,.26) !important; color: #fff !important; font-weight: 700; } /* brand wordmark: drop the text-shadow (it literally blurs the glyph edges) */ .nx-brand-txt { text-shadow: none !important; } /* topbar page title: full white instead of 90% */ .dash-topbar h1 { color: #fff !important; } /* ---- 2. SUBMENUS (Sales ▸ Invoices / Sales Return …): visible black frame, a divider under every row so each item is clearly separated, square corners, and an unmistakable hover so you always know which row you are on. ---- */ .nx-panel { border: 1.5px solid #111827 !important; border-radius:3px !important; padding: 0 !important; box-shadow: 0 6px 18px rgba(0,0,0,.22) !important; overflow: hidden; } .nx-panel a { border-radius:0 !important; border-bottom: 1px solid #111827 !important; padding: 8px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #111827 !important; } .nx-panel a:last-child { border-bottom: 0 !important; } .nx-panel a:hover { background: #111827 !important; color: #fff !important; } .nx-panel a.on { background: #e8eef8 !important; color: #111827 !important; font-weight: 800 !important; } .nx-panel a.on:hover { background: #111827 !important; color: #fff !important; } [data-theme="dark"] .nx-panel a { color: #e5e7eb !important; border-bottom-color: #475569 !important; } [data-theme="dark"] .nx-panel { border-color: #334155 !important; } [data-theme="dark"] .nx-panel a:hover { background: #334155 !important; color: #fff !important; } /* ---- 3. DASHBOARD BOXES: every card gets a visible near-black frame and only-slightly-rounded corners (was 9-18px = far too round). ---- */ :root:not([data-theme="dark"]) .stat-card, :root:not([data-theme="dark"]) .sales-card, :root:not([data-theme="dark"]) .dash-card, :root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .form-section, :root:not([data-theme="dark"]) .dash-table-wrap, :root:not([data-theme="dark"]) .wallet-hero, :root:not([data-theme="dark"]) .mo-card, :root:not([data-theme="dark"]) .hs-card, :root:not([data-theme="dark"]) .fin-card, :root:not([data-theme="dark"]) .dash-plan-card, :root:not([data-theme="dark"]) .empty { border: 1.5px solid #111827 !important; } .stat-card, .sales-card, .dash-card, .card, .form-section, .dash-table-wrap, .wallet-hero, .mo-card, .hs-card, .fin-card, .dash-plan-card, .empty, .stat-card-icon, .sales-card .sales-anim, .wallet-hero .wallet-anim { border-radius:4px !important; } /* flat, not floaty — soft drop shadows also read as "blurry" */ .stat-card, .sales-card, .dash-card, .card, .form-section, .wallet-hero, .mo-card, .hs-card, .fin-card { box-shadow: none !important; } /* card numbers/labels: solid black instead of grey-on-white */ :root:not([data-theme="dark"]) .sales-card .sales-top, :root:not([data-theme="dark"]) .sales-card .sales-sub, :root:not([data-theme="dark"]) .stat-card .stat-top { color: #111827 !important; } /* keep the coloured/gradient hero cards readable (their text is white) */ .sales-card-total .sales-top, .sales-card-total .sales-sub { color: rgba(255,255,255,.94) !important; } [data-theme="dark"] .stat-card, [data-theme="dark"] .sales-card, [data-theme="dark"] .dash-card, [data-theme="dark"] .card, [data-theme="dark"] .form-section, [data-theme="dark"] .hs-card, [data-theme="dark"] .fin-card, [data-theme="dark"] .mo-card { border: 1.5px solid #64748b !important; } /* ---- 4. BUTTONS: solid colours (no gradient "AI glow"), crisp label, square-ish corners. Gradients + inset highlights were making the text edges mushy on small buttons. ---- */ .btn-primary { background: #1d4ed8 !important; color: #fff !important; border-color: #111827 !important; text-shadow: none !important; } .btn-primary:hover { background: #1e40af !important; filter: none !important; } .btn-danger { background: #dc2626 !important; border-color: #111827 !important; text-shadow: none !important; } .btn-danger:hover { background: #b91c1c !important; } .btn-success { background: #059669 !important; border-color: #111827 !important; text-shadow: none !important; } .btn-success:hover { background: #047857 !important; } .btn { text-shadow: none !important; letter-spacing: 0 !important; } /* ---- Dashboard quick-action buttons: GLOSSY CANDY (owner-approved style F) ---- The glow stays INSIDE the button and the edge is kept crisp, so each button reads as a distinct object against the page instead of bleeding into it. 1. the button's own gradient (already set inline per button) 2. ::before — a glass shine, bright at the top, gone by the middle 3. inset shadows — the light lives inside: a bright top edge and a deep bottom, which is what makes it look moulded rather than flat 4. a thin dark outline + one tight drop shadow = clear separation The old flat/black-border rules are replaced here, not merely overridden. */ .qa-btn, .mo-btn { position: relative; isolation: isolate; border: 1px solid rgba(0,0,0,.28) !important; /* crisp edge against the page */ border-radius:3px !important; text-shadow: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.60), /* lit top edge */ inset 0 -6px 12px rgba(0,0,0,.22), /* depth at the bottom */ inset 0 0 14px rgba(255,255,255,.20), /* the glow — inside only */ 0 1px 3px rgba(15,23,42,.35) !important; /* tight shadow, no halo */ transition: filter .15s ease, transform .12s ease, box-shadow .15s ease; } /* 2 — the shine */ /* z-index:-1 (inside the isolate) paints the shine ABOVE the button's gradient but BELOW its label. The label is a bare text node, so it cannot be lifted with a `> *` rule — putting the shine underneath is the only way to keep text readable. */ .qa-btn::before, .mo-btn::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 52%; pointer-events: none; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 100%); border-radius:3px 3px 40% 40% / 3px 3px 3px 3px; } .qa-btn:hover, .mo-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.70), inset 0 -6px 12px rgba(0,0,0,.22), inset 0 0 20px rgba(255,255,255,.32), /* inner glow lifts on hover */ 0 2px 5px rgba(15,23,42,.40) !important; } /* the label + icon must sit above the shine */ .qa-btn > *, .mo-btn > * { position: relative; z-index: 2; } /* No wrapper panel around the quick actions — the buttons stand on their own. (A tinted box was tried here for separation; the owner did not want it.) */ .qa-row { gap: 12px !important; } /* Pharmacy health strip (Nearby Expiry / Expired / Low Stock …). These tiles are plain elements, so the earlier "black border on every box" pass never reached them and they were the only boxes left with a faint grey outline. */ .hs-tile { background: var(--bg, #fff); border: 1.5px solid #111827; border-radius:6px; transition: transform .12s ease, box-shadow .12s ease; } .hs-tile:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,.18); } [data-theme="dark"] .hs-tile { background: #111c33; border-color: #334155; } /* ============================================================ EVERY OTHER BUTTON IN THE SOFTWARE — same glossy treatment. Not one blanket rule: a white Secondary button needs a much softer shine than a solid blue Primary, and a transparent Ghost button must stay flat or it turns into a grey blob. Table buttons stay tighter so rows don't grow. ============================================================ */ /* The shine is painted as a BACKGROUND LAYER, not an overlay element. An absolutely-positioned ::before sits above a button's plain text node (text is not a child element, so `.btn > *` cannot lift it) and washed every label out — that is what made the buttons look transparent. As a background-image the text is always on top, and any button that has no colour of its own still gets one. */ .btn { position: relative; border-radius:8px !important; text-shadow: none !important; /* default look for a bare `.btn` with no colour variant — never transparent */ background-color: #eef2f8; color: #111827; background-image: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%); border: 1px solid #111827; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -4px 8px rgba(15,23,42,.10), 0 1px 3px rgba(15,23,42,.20); transition: filter .15s ease, transform .12s ease, box-shadow .15s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(1px); } /* --- solid colour buttons: keep their colour, add gloss on top of it --- */ .btn-primary, .btn-danger, .btn-success { color: #fff !important; background-image: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.06) 50%, rgba(0,0,0,.10) 100%) !important; border: 1px solid rgba(0,0,0,.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -5px 10px rgba(0,0,0,.22), 0 1px 3px rgba(15,23,42,.32) !important; } .btn-primary { background-color: #1d4ed8 !important; } .btn-danger { background-color: #dc2626 !important; } .btn-success { background-color: #059669 !important; } .btn-primary:hover { background-color: #1e40af !important; } .btn-danger:hover { background-color: #b91c1c !important; } .btn-success:hover { background-color: #047857 !important; } .btn-primary:hover, .btn-danger:hover, .btn-success:hover { filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.68), inset 0 -5px 10px rgba(0,0,0,.22), 0 2px 5px rgba(15,23,42,.36) !important; } /* --- white / light buttons --- */ .btn-secondary { background-color: #f8fafc !important; color: #111827; /* inline colours must still win */ background-color: rgba(255,255,255,.95) !important; border: 1px solid #111827 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -4px 8px rgba(15,23,42,.10), 0 1px 3px rgba(15,23,42,.20) !important; } .btn-secondary:hover { background-color: #eef2f8 !important; } /* --- ghost buttons (View / Edit / Delete / Return — used ~139 times) --- These were left flat at first and that is why most of the software still looked unchanged. They have no background of their own, so they get a light glossy surface; the TEXT colour set inline (red for delete, green for paid…) still wins. */ .btn-ghost { background-color: #f1f5f9 !important; background-color: rgba(255,255,255,.95) !important; /* NOT !important on purpose — an inline style="color:#1d4ed8" (Download) or "#16a34a" (WhatsApp) must still win over this default. */ color: #111827; border: 1px solid #111827 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -4px 8px rgba(15,23,42,.10), 0 1px 3px rgba(15,23,42,.22) !important; } .btn-ghost:hover { background-color: #e2e8f0 !important; } [data-theme="dark"] .btn-ghost { background-color: #2b3648 !important; background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.18) 100%) !important; border-color: #334155 !important; } [data-theme="dark"] .btn-ghost:hover { background-color: #3a4759 !important; } [data-theme="dark"] .btn { background-color: #2b3648; color: #e5e7eb; border-color: #334155; background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.18) 100%); } /* --- inside tables the buttons are tiny: shallower gloss, tighter radius --- */ .dash-table .btn, .dash-table .btn-sm, .table .btn, .table .btn-sm { border-radius:5px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(15,23,42,.25) !important; } /* the billing grid is dense and fast-moving — no lift, no extra height there */ body.page-billing .bill-table .btn:hover { transform: none; } /* ---- Buttons that never had a .btn class ---- Modal actions, the AI panel, the UPI/plan popups, sync, send — these are written as bare