1023 lines
31 KiB
CSS
1023 lines
31 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
MITRA ERP Portal — Professional Light Theme
|
|
Clean white/light-gray surfaces, blue accent, soft shadows —
|
|
same palette family as work-order.html's --wo-* tokens, applied
|
|
portal-wide via the shared class vocabulary below.
|
|
Include via <link rel="stylesheet" href="/theme.css"/> in each page
|
|
OR loaded dynamically by sidebar.js
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
:root {
|
|
/* ── Core palette ── */
|
|
--primary-bg: #f4f6f9;
|
|
--secondary-bg: #ffffff;
|
|
--accent-color: #2563eb;
|
|
--accent-color2: #1d4ed8;
|
|
--accent-glow: rgba(37, 99, 235, 0.16);
|
|
--text-main: #0f172a;
|
|
--text-dim: #64748b;
|
|
--text-faint: #94a3b8;
|
|
--glass: #ffffff;
|
|
--glass-solid: #ffffff;
|
|
--glass-border: #e2e8f0;
|
|
--glass-border-strong: #cbd5e1;
|
|
--error: #dc2626;
|
|
--success: #16a34a;
|
|
--warning: #d97706;
|
|
--font-main: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* ── Legacy / per-page token names ── */
|
|
--bg: #f4f6f9;
|
|
--dark: #f4f6f9;
|
|
/* Several older pages (admin.html, production.html) use --ink/--ink2/--ink3
|
|
as BACKGROUND surfaces (page bg / card+modal bg / a third tier), not as
|
|
text-ink colors — keep these as light surfaces so those pages' own
|
|
.modal/.comp-card/readonly-input rules (which reference var(--ink2)
|
|
directly, not through a class this file already overrides) render
|
|
correctly instead of picking up a stray dark/black value. */
|
|
--ink: #f4f6f9;
|
|
--ink2: #ffffff;
|
|
--ink3: #f8fafc;
|
|
--blue: #2563eb;
|
|
--blue2: #1d4ed8;
|
|
--blue-light: #eff6ff;
|
|
--blue-glow: rgba(37, 99, 235, 0.12);
|
|
--accent: #2563eb;
|
|
--accent2: #1d4ed8;
|
|
--accent3: #3b82f6;
|
|
--text4: #94a3b8;
|
|
--text-muted: #64748b;
|
|
--text-label: #64748b;
|
|
--danger: #dc2626;
|
|
--amber: #d97706;
|
|
--amber2: #b45309;
|
|
--green: #16a34a;
|
|
--green2: #15803d;
|
|
--teal2: #0d9488;
|
|
--teal3: #14b8a6;
|
|
--red: #dc2626;
|
|
--purple: #7c3aed;
|
|
--teal: #0d9488;
|
|
--gold: #d97706;
|
|
--orange: #ea580c;
|
|
--border: #e2e8f0;
|
|
--border2: #cbd5e1;
|
|
--text: #0f172a;
|
|
--text2: #334155;
|
|
--text3: #64748b;
|
|
--surface: #ffffff;
|
|
--surface2: #f8fafc;
|
|
--surface3: #eef1f5;
|
|
--radius: 10px;
|
|
--radius-lg: 14px;
|
|
--shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
/* ── Global sizing ──
|
|
Pages hardcode pixel font-sizes, so a body zoom is the most
|
|
reliable way to scale all text/UI uniformly. Reset to 100% (normal,
|
|
un-zoomed) — was 1.18 (18% larger). */
|
|
body {
|
|
zoom: 1;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--primary-bg) !important;
|
|
background-image: none !important;
|
|
color: var(--text-main) !important;
|
|
font-family: var(--font-main) !important;
|
|
}
|
|
|
|
body::before {
|
|
display: none !important;
|
|
}
|
|
.bg-glow {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ── Glass utilities from source (kept as solid light surfaces now) ── */
|
|
.glass-card {
|
|
background: var(--glass) !important;
|
|
backdrop-filter: none !important;
|
|
border: 1px solid var(--glass-border) !important;
|
|
border-radius: 12px !important;
|
|
box-shadow: var(--shadow) !important;
|
|
}
|
|
.accent-glow {
|
|
box-shadow: 0 0 0 3px var(--accent-glow) !important;
|
|
}
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color2) 100%) !important;
|
|
-webkit-background-clip: text !important;
|
|
background-clip: text !important;
|
|
-webkit-text-fill-color: transparent !important;
|
|
}
|
|
|
|
/* ── SIDEBAR — clean light ───────────── */
|
|
.sb {
|
|
background: #ffffff !important;
|
|
border-right: 1px solid var(--glass-border) !important;
|
|
box-shadow: 1px 0 0 rgba(15, 23, 42, 0.03) !important;
|
|
}
|
|
.sb-logo {
|
|
padding: 18px 16px 16px !important;
|
|
border-bottom: 1px solid var(--glass-border) !important;
|
|
}
|
|
.sb-logo-mark {
|
|
background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
|
|
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
|
|
border-radius: 9px !important;
|
|
letter-spacing: .3px !important;
|
|
}
|
|
.sb-logo-text {
|
|
color: #0f172a !important;
|
|
letter-spacing: .3px !important;
|
|
}
|
|
.sb-logo-text small {
|
|
color: #94a3b8 !important;
|
|
}
|
|
|
|
.sb-links { padding: 10px 10px !important; }
|
|
.sb-link {
|
|
color: #64748b !important;
|
|
border-radius: 9px !important;
|
|
font-weight: 500 !important;
|
|
position: relative !important;
|
|
margin: 2px 0 !important;
|
|
}
|
|
.sb-link:hover {
|
|
color: #0f172a !important;
|
|
background: #f1f5f9 !important;
|
|
}
|
|
.sb-link.active {
|
|
color: #1d4ed8 !important;
|
|
background: #eff6ff !important;
|
|
font-weight: 600 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
/* Active left indicator bar */
|
|
.sb-link.active::before {
|
|
display: block !important;
|
|
content: '' !important;
|
|
position: absolute !important;
|
|
left: 0; top: 50%; transform: translateY(-50%);
|
|
width: 3px; height: 58%;
|
|
border-radius: 0 4px 4px 0;
|
|
background: linear-gradient(180deg, #60a5fa, #2563eb) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.sb-link svg { color: #94a3b8 !important; }
|
|
.sb-link:hover svg { color: #334155 !important; }
|
|
.sb-link.active svg { color: #2563eb !important; }
|
|
|
|
.sb-divider { background: var(--glass-border) !important; }
|
|
|
|
.sb-group {
|
|
color: #94a3b8 !important;
|
|
font-size: 10px !important;
|
|
letter-spacing: 1px !important;
|
|
font-weight: 700 !important;
|
|
margin-top: 12px !important;
|
|
}
|
|
.sb-group:hover {
|
|
color: #334155 !important;
|
|
background: #f8fafc !important;
|
|
}
|
|
.sb-group.open { color: #1e293b !important; }
|
|
.sb-group svg { color: #94a3b8 !important; opacity: 1 !important; }
|
|
.sb-chev { color: #cbd5e1 !important; }
|
|
.sb-group.open .sb-chev { color: #2563eb !important; }
|
|
.sb-sub svg { color: #cbd5e1 !important; }
|
|
.sb-sub.active svg { color: #2563eb !important; }
|
|
|
|
.sb-bottom { border-top: 1px solid var(--glass-border) !important; }
|
|
.sb-user {
|
|
background: #f8fafc !important;
|
|
border: 1px solid var(--glass-border) !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
.sb-user:hover {
|
|
background: #eff6ff !important;
|
|
border-color: rgba(37, 99, 235, 0.3) !important;
|
|
}
|
|
.sb-avatar {
|
|
background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
|
|
border-radius: 9px !important;
|
|
}
|
|
.sb-role { color: #94a3b8 !important; }
|
|
.sb-name { color: #1e293b !important; }
|
|
.sb-logout {
|
|
color: #dc2626 !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
border-radius: 9px !important;
|
|
}
|
|
.sb-logout:hover {
|
|
color: #b91c1c !important;
|
|
background: rgba(220, 38, 38, 0.08) !important;
|
|
border-color: transparent !important;
|
|
}
|
|
.sb-toggle-btn { color: #94a3b8 !important; }
|
|
.sb-toggle-btn:hover { color: #1e293b !important; background: #f1f5f9 !important; }
|
|
|
|
/* ── MOBILE BOTTOM BAR ─────────────────────── */
|
|
.mob-bar {
|
|
background: rgba(255, 255, 255, 0.96) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
border-top: 1px solid var(--glass-border) !important;
|
|
box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06) !important;
|
|
}
|
|
.mob-bar a {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
.mob-bar a.active {
|
|
color: var(--accent-color) !important;
|
|
background: var(--blue-light) !important;
|
|
}
|
|
.mob-bar .mb-more {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
|
|
/* ── CARDS ──────────────────────────────────── */
|
|
.card, .win {
|
|
background: var(--glass) !important;
|
|
backdrop-filter: none !important;
|
|
border-color: var(--glass-border) !important;
|
|
box-shadow: var(--shadow) !important;
|
|
}
|
|
.card:hover, .win:hover {
|
|
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10) !important;
|
|
}
|
|
.card-hd, .win-bar {
|
|
background: var(--surface2) !important;
|
|
border-bottom-color: var(--glass-border) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
/* ── FORM FIELDS ───────────────────────────── */
|
|
.fi, .f-inp, .form-input, .t-inp, .comp-inp, .line-inp, .batch-inp {
|
|
background: #ffffff !important;
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
.fi:focus, .f-inp:focus, .form-input:focus, .comp-inp:focus, .line-inp:focus {
|
|
border-color: var(--accent-color) !important;
|
|
box-shadow: 0 0 0 3px var(--accent-glow) !important;
|
|
}
|
|
.fi::placeholder, .f-inp::placeholder, .form-input::placeholder {
|
|
color: var(--text-faint) !important;
|
|
}
|
|
select.fi, .f-sel, .form-select, .t-sel {
|
|
background-color: #ffffff !important;
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
select.fi option, .f-sel option, .form-select option, .t-sel option {
|
|
background: #ffffff !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
/* ── LABELS ────────────────────────────────── */
|
|
.fl, .f-lbl, .form-label, .comp-fl, .line-fl {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
|
|
/* ── BUTTONS ───────────────────────────────── */
|
|
.b-primary, .b-planned, .b-save {
|
|
background: var(--accent-color) !important;
|
|
color: #fff !important;
|
|
box-shadow: var(--shadow) !important;
|
|
}
|
|
.b-primary:hover:not(:disabled), .b-planned:hover:not(:disabled), .b-save:hover:not(:disabled) {
|
|
background: var(--accent-color2) !important;
|
|
}
|
|
.b-cancel {
|
|
background: #ffffff !important;
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text2) !important;
|
|
}
|
|
.b-cancel:hover {
|
|
background: var(--surface2) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
.b-add, .b-new {
|
|
background: var(--blue-light) !important;
|
|
color: var(--accent-color2) !important;
|
|
border-color: #bfdbfe !important;
|
|
}
|
|
.b-add:hover, .b-new:hover {
|
|
background: #dbeafe !important;
|
|
}
|
|
.b-del {
|
|
background: rgba(220, 38, 38, 0.06) !important;
|
|
color: var(--error) !important;
|
|
border-color: rgba(220, 38, 38, 0.25) !important;
|
|
}
|
|
.b-issue, .b-release {
|
|
background: var(--accent-color) !important;
|
|
box-shadow: var(--shadow) !important;
|
|
}
|
|
.b-issue:hover:not(:disabled), .b-release:hover:not(:disabled) {
|
|
background: var(--accent-color2) !important;
|
|
}
|
|
.b-close {
|
|
background: var(--warning) !important;
|
|
}
|
|
|
|
/* ── TABS ──────────────────────────────────── */
|
|
.tabs, .module-tabs {
|
|
background: var(--surface3) !important;
|
|
}
|
|
.tab, .module-tab {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
.tab.on, .module-tab.on {
|
|
background: #ffffff !important;
|
|
color: var(--accent-color) !important;
|
|
border-color: var(--glass-border) !important;
|
|
box-shadow: var(--shadow) !important;
|
|
}
|
|
.tab-btn.on {
|
|
color: var(--accent-color) !important;
|
|
border-bottom-color: var(--accent-color) !important;
|
|
}
|
|
|
|
/* ── COMPONENT CARDS ───────────────────────── */
|
|
.comp-card, .line-card, .po-card, .blist-card, .req-card {
|
|
background: #ffffff !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
.comp-card:hover, .po-card:hover, .blist-card:hover, .req-card:hover {
|
|
border-color: var(--accent-color) !important;
|
|
box-shadow: 0 4px 14px var(--accent-glow) !important;
|
|
}
|
|
.comp-item, .po-code, .blist-id {
|
|
color: var(--accent-color2) !important;
|
|
}
|
|
.comp-fv {
|
|
color: var(--text2) !important;
|
|
}
|
|
|
|
/* ── ALERTS ────────────────────────────────── */
|
|
.alert, .al-info, .al-teal, .al-purple {
|
|
background: var(--blue-light) !important;
|
|
border-color: #bfdbfe !important;
|
|
color: var(--accent-color2) !important;
|
|
}
|
|
.al-green {
|
|
background: #f0fdf4 !important;
|
|
border-color: #bbf7d0 !important;
|
|
color: #15803d !important;
|
|
}
|
|
.al-amber, .al-gold {
|
|
background: #fffbeb !important;
|
|
border-color: #fde68a !important;
|
|
color: #b45309 !important;
|
|
}
|
|
.al-red {
|
|
background: #fef2f2 !important;
|
|
border-color: #fecaca !important;
|
|
color: #b91c1c !important;
|
|
}
|
|
|
|
/* ── BADGES / PILLS ────────────────────────── */
|
|
.status-badge, .po-badge, .comp-type, .rc-type-badge {
|
|
font-weight: 700 !important;
|
|
}
|
|
.po-badge.released {
|
|
background: var(--blue-light) !important;
|
|
color: var(--accent-color2) !important;
|
|
border-color: #bfdbfe !important;
|
|
}
|
|
.po-badge.planned {
|
|
background: #fffbeb !important;
|
|
color: #b45309 !important;
|
|
border-color: #fde68a !important;
|
|
}
|
|
.po-badge.closed {
|
|
background: #f0fdf4 !important;
|
|
color: #15803d !important;
|
|
border-color: #bbf7d0 !important;
|
|
}
|
|
|
|
/* ── STATS / PILLS ─────────────────────────── */
|
|
.stat-pill {
|
|
background: var(--surface2) !important;
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
/* ── TABLE ──────────────────────────────────── */
|
|
.bom-tbl th, .p-tbl th, .sr-tbl th, .comp-table th {
|
|
background: var(--surface3) !important;
|
|
color: var(--text-dim) !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
.bom-tbl td, .p-tbl td {
|
|
background: transparent !important;
|
|
color: var(--text2) !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
.bom-tbl tbody tr:nth-child(even) td, .p-tbl tbody tr:nth-child(even) td {
|
|
background: var(--surface2) !important;
|
|
}
|
|
.bom-tbl tbody tr:hover td, .p-tbl tbody tr:hover td {
|
|
background: var(--blue-light) !important;
|
|
}
|
|
|
|
/* ── SEARCH DROPDOWN ───────────────────────── */
|
|
.search-dd, .item-dd {
|
|
background: var(--glass-solid) !important;
|
|
border-color: var(--accent-color) !important;
|
|
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16) !important;
|
|
z-index: 500 !important;
|
|
}
|
|
.card, .card-bd, .win {
|
|
overflow: visible !important;
|
|
}
|
|
.sd-row, .dd-row {
|
|
border-bottom-color: var(--glass-border) !important;
|
|
color: var(--text2) !important;
|
|
}
|
|
.sd-row:hover, .dd-row:hover {
|
|
background: var(--blue-light) !important;
|
|
}
|
|
.sd-code, .dd-code {
|
|
color: var(--accent-color2) !important;
|
|
}
|
|
|
|
/* ── TOAST ──────────────────────────────────── */
|
|
.t-ok {
|
|
background: var(--success) !important;
|
|
}
|
|
.t-err {
|
|
background: var(--error) !important;
|
|
}
|
|
|
|
/* ── MODAL ─────────────────────────────────── */
|
|
.modal, .modal-overlay .modal {
|
|
background: var(--glass-solid) !important;
|
|
border-color: var(--glass-border) !important;
|
|
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25) !important;
|
|
}
|
|
.modal-hd, .modal-header {
|
|
background: var(--surface2) !important;
|
|
border-bottom-color: var(--glass-border) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
.modal-bd, .modal-body {
|
|
background: transparent !important;
|
|
}
|
|
.modal-footer {
|
|
background: var(--surface2) !important;
|
|
border-top-color: var(--glass-border) !important;
|
|
}
|
|
|
|
/* ── TOTALS ────────────────────────────────── */
|
|
.total-row, .tot-strip {
|
|
background: var(--surface3) !important;
|
|
}
|
|
.total-row .tv {
|
|
color: var(--teal) !important;
|
|
}
|
|
|
|
/* ── PIPELINE ──────────────────────────────── */
|
|
.pipeline-header {
|
|
background: var(--surface2) !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
|
|
/* ── BATCH SECTION ─────────────────────────── */
|
|
.batch-sec {
|
|
background: var(--surface2) !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
|
|
/* ── ORDER INFO ────────────────────────────── */
|
|
.order-info, .oi-item {
|
|
color: var(--text2) !important;
|
|
}
|
|
.oi-l {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
|
|
/* ── SUCCESS BOX ───────────────────────────── */
|
|
.suc-box, .success-page {
|
|
background: var(--glass) !important;
|
|
}
|
|
.suc-title {
|
|
color: #15803d !important;
|
|
}
|
|
.suc-pill {
|
|
background: var(--blue-light) !important;
|
|
color: var(--accent-color2) !important;
|
|
border-color: #bfdbfe !important;
|
|
}
|
|
|
|
/* ── SKELETON ──────────────────────────────── */
|
|
.skeleton {
|
|
background: linear-gradient(90deg, #eef1f5 25%, #f8fafc 50%, #eef1f5 75%) !important;
|
|
}
|
|
|
|
/* ── EMPTY MESSAGE ─────────────────────────── */
|
|
.empty-msg, .bom-msg, .po-empty {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
|
|
/* ── FILTER TABS ───────────────────────────── */
|
|
.filter-tab {
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text-dim) !important;
|
|
background: #ffffff !important;
|
|
}
|
|
.filter-tab.on, .filter-tab:hover {
|
|
border-color: var(--accent-color) !important;
|
|
color: var(--accent-color2) !important;
|
|
background: var(--blue-light) !important;
|
|
}
|
|
|
|
/* ── DT ROWS (detail) ──────────────────────── */
|
|
.dt-row {
|
|
border-bottom-color: var(--glass-border) !important;
|
|
}
|
|
.dt-row .dt-l {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
.dt-row .dt-v {
|
|
color: var(--text2) !important;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
LOGIN PAGE + HOME DASHBOARD
|
|
═══════════════════════════════════════════ */
|
|
.login-card {
|
|
background: var(--glass) !important;
|
|
backdrop-filter: none !important;
|
|
border-color: var(--glass-border) !important;
|
|
box-shadow: var(--shadow) !important;
|
|
}
|
|
.login-h {
|
|
color: var(--text-main) !important;
|
|
}
|
|
.login-sub {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
.login-logo-box, .login-logo-mark {
|
|
background: var(--accent-color) !important;
|
|
box-shadow: 0 4px 14px var(--accent-glow) !important;
|
|
}
|
|
.login-logo-text {
|
|
color: var(--text-main) !important;
|
|
}
|
|
.field-label {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
.field-input {
|
|
background: #ffffff !important;
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
.field-input:focus {
|
|
border-color: var(--accent-color) !important;
|
|
box-shadow: 0 0 0 3px var(--accent-glow) !important;
|
|
}
|
|
.field-input::placeholder {
|
|
color: var(--text-faint) !important;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent-color) !important;
|
|
border: none !important;
|
|
box-shadow: var(--shadow) !important;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--accent-color2) !important;
|
|
}
|
|
.err-box {
|
|
background: #fef2f2 !important;
|
|
border-color: #fecaca !important;
|
|
color: #b91c1c !important;
|
|
}
|
|
|
|
/* Dashboard cards */
|
|
.dash-card, .quick-card {
|
|
background: var(--glass) !important;
|
|
backdrop-filter: none !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
.dash-card:hover, .quick-card:hover {
|
|
border-color: var(--accent-color) !important;
|
|
box-shadow: 0 4px 16px var(--accent-glow) !important;
|
|
}
|
|
.stat-box {
|
|
background: var(--glass) !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
.page-title {
|
|
color: var(--text-main) !important;
|
|
}
|
|
.page-sub {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
|
|
/* Stat cards on dashboard */
|
|
.stat-card {
|
|
background: var(--glass) !important;
|
|
backdrop-filter: none !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
.stat-val {
|
|
color: var(--text-main) !important;
|
|
}
|
|
.stat-label {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
.stats-grid {
|
|
gap: 12px !important;
|
|
}
|
|
|
|
/* Info pill on dashboard */
|
|
.info-pill, .pipeline-info {
|
|
background: var(--surface2) !important;
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text-dim) !important;
|
|
}
|
|
|
|
/* Action cards / Quick links on dashboard */
|
|
.actions-grid > div, [class*="action"] {
|
|
background: var(--glass) !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
|
|
/* Old top nav — fully replaced by the sidebar (sidebar.js removes the element
|
|
on load). Hidden here so it never flashes during page load: every page that
|
|
loads theme.css also loads sidebar.js, so no page still needs it. The
|
|
sidebar itself is a div.sb, not <nav>, so this cannot hide the sidebar. */
|
|
nav {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Role badges */
|
|
.badge {
|
|
border-radius: 6px !important;
|
|
}
|
|
.badge-blue {
|
|
background: var(--blue-light) !important;
|
|
color: var(--accent-color2) !important;
|
|
border-color: #bfdbfe !important;
|
|
}
|
|
.badge-amber {
|
|
background: #fffbeb !important;
|
|
color: #b45309 !important;
|
|
border-color: #fde68a !important;
|
|
}
|
|
.badge-green {
|
|
background: #f0fdf4 !important;
|
|
color: #15803d !important;
|
|
border-color: #bbf7d0 !important;
|
|
}
|
|
|
|
/* ── Generic text/heading fallbacks ── */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
/* ── Scrollbar ── */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--primary-bg);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
FULL-WIDTH LAYOUT
|
|
Pages hardcode their own `main{max-width:...}` to center content in a
|
|
narrow column — override so every page's main content area fills the
|
|
full available width next to the sidebar instead. Card-grid lists
|
|
(.wo-grid, .po-grid, .req-grid, etc.) already use auto-fill columns, so
|
|
the extra width just means more tiles per row, not awkward stretching.
|
|
═══════════════════════════════════════════ */
|
|
main {
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
MODERN ROUNDED CORNERS
|
|
═══════════════════════════════════════════ */
|
|
.card, .win, .req-card, .po-card, .blist-card, .comp-card, .line-card {
|
|
border-radius: 12px !important;
|
|
}
|
|
.card-hd, .win-bar {
|
|
border-radius: 12px 12px 0 0 !important;
|
|
}
|
|
.btn {
|
|
border-radius: 10px !important;
|
|
}
|
|
.fi, .f-inp, .form-input, .form-select, .f-sel {
|
|
border-radius: 8px !important;
|
|
}
|
|
.tab, .filter-tab, .status-badge, .po-badge, .comp-type, .rc-type-badge {
|
|
border-radius: 8px !important;
|
|
}
|
|
.tabs {
|
|
border-radius: 12px !important;
|
|
}
|
|
.modal {
|
|
border-radius: 16px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
.alert {
|
|
border-radius: 10px !important;
|
|
}
|
|
.search-dd, .item-dd {
|
|
border-radius: 10px !important;
|
|
}
|
|
.toast {
|
|
border-radius: 10px !important;
|
|
}
|
|
.batch-sec {
|
|
border-radius: 10px !important;
|
|
}
|
|
.suc-pill {
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
GENERIC LIGHT BASE
|
|
For bespoke pages that hardcode their own class vocabulary and no
|
|
shared CSS variables — e.g. gstr1/gstr2, reports, salary, costing-*,
|
|
general-ledger, business-master, itc04, project-approvals/form,
|
|
balance-sheet, cash-flow, cost-sheet, register. These rules catch
|
|
structural elements and the recurring container classes so those
|
|
pages render the same light theme too.
|
|
═══════════════════════════════════════════ */
|
|
|
|
/* ── Tables (generic) ── */
|
|
table {
|
|
background: transparent !important;
|
|
color: var(--text2) !important;
|
|
}
|
|
th, thead th {
|
|
background: var(--surface3) !important;
|
|
color: var(--text-dim) !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
td, tbody td {
|
|
color: var(--text2) !important;
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
tr, tbody tr {
|
|
border-color: var(--glass-border) !important;
|
|
}
|
|
tbody tr:nth-child(even) td {
|
|
background: var(--surface2) !important;
|
|
}
|
|
tbody tr:hover td {
|
|
background: var(--blue-light) !important;
|
|
}
|
|
|
|
/* ── Form controls (generic) ── */
|
|
input, select, textarea {
|
|
background: #ffffff !important;
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
input::placeholder, textarea::placeholder {
|
|
color: var(--text-faint) !important;
|
|
}
|
|
select option {
|
|
background: #ffffff !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
/* ── Home dashboard (index.html) ── */
|
|
.login-wrap, .dash-page {
|
|
background: transparent !important;
|
|
}
|
|
.mc {
|
|
background: var(--glass) !important;
|
|
backdrop-filter: none !important;
|
|
border-color: var(--glass-border) !important;
|
|
box-shadow: var(--shadow) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
.mc:hover {
|
|
border-color: var(--accent-color) !important;
|
|
box-shadow: 0 4px 16px var(--accent-glow) !important;
|
|
}
|
|
.mc-title {
|
|
color: var(--text-main) !important;
|
|
}
|
|
.mc-desc, .mc-arrow, .sec-hdr span {
|
|
color: var(--text-dim) !important;
|
|
}
|
|
.mc:hover .mc-arrow {
|
|
color: var(--accent-color) !important;
|
|
}
|
|
.welcome-row, .welcome-row * {
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
/* ── Recurring container / surface classes → light surface ── */
|
|
.card, .card-header, .card-hd,
|
|
.modal, .modal-header, .modal-footer,
|
|
.detail-panel, .detail-header, .detail-footer,
|
|
.filter-bar, .search-bar, .sel-bar, .status-bar, .total-bar,
|
|
.summary-chips, .chip, .tabs, .report-tabs, .cfg-subtabs, .grp-tab,
|
|
.snap-item, .snap-picker, .type-card, .addr-block, .ref-box, .ack-box,
|
|
.info-note, .upload-zone, .progress-bar-wrap, .cfg-ord, .cfg-sel,
|
|
.bs-tbl, .cf-tbl, .pl-s-divider, .cs-section-hd, .part,
|
|
.step-circle, .msme-toggle, .toggle-row, .approve-panel, .attach-preview,
|
|
.ap-thumb, .acct-group-hdr {
|
|
background: var(--glass) !important;
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
/* ── Secondary/outline buttons & editable fields → light field ── */
|
|
.btn-outline, .btn-secondary, .acct-pick-btn, .add-addr-btn, .remove-row,
|
|
.cost-input, .note-inp, .edit-inp, .team-name-inp, .team-resp-ta,
|
|
.detail-edit-select, .detail-edit-input, .dept-map-select,
|
|
.snap-picker select, .cfg-sel select {
|
|
background: #ffffff !important;
|
|
border-color: var(--glass-border) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
/* ── Text labels/values on light bg ── */
|
|
.code, .num, .lbl, .sname, .cr, .part,
|
|
.cost-label, .cs-section-label, .detail-val, .type-card-title,
|
|
.team-func-cell, .acct-row, .snap-item {
|
|
color: var(--text2) !important;
|
|
}
|
|
|
|
/* ── Save / approve buttons → blue accent ── */
|
|
.btn-success, .cfg-save-btn, .btn-tcs, .b-save, .save-btn, .b-approve, .btn-approve {
|
|
background: var(--accent-color) !important;
|
|
color: #fff !important;
|
|
border-color: transparent !important;
|
|
box-shadow: var(--shadow) !important;
|
|
}
|
|
.btn-success:hover, .cfg-save-btn:hover, .btn-tcs:hover,
|
|
.b-approve:hover, .btn-approve:hover, .save-btn:hover {
|
|
background: var(--accent-color2) !important;
|
|
}
|
|
/* Grand-total rows and highlight badges → blue tint */
|
|
.bs-tbl tr.grand td, .cf-tbl tr.grand td,
|
|
.stmt-tbl tr.s-net td, .stmt-tbl tr.s-increase td, .stmt-tbl tr.s-closing td {
|
|
background: var(--blue-light) !important;
|
|
border-top-color: var(--accent-color) !important;
|
|
color: var(--text-main) !important;
|
|
}
|
|
.snap-tag, .tab.active .tab-badge, .tab-badge {
|
|
background: var(--accent-color) !important;
|
|
color: #fff !important;
|
|
}
|
|
.sect-tab button.active, .tab.active, .tabs .active {
|
|
color: var(--accent-color) !important;
|
|
}
|
|
|
|
/* ── Highlight labels, badges, chips → blue tint ── */
|
|
.badge-added, .badge-autofill, .amt-pos, .bb-split-total, .cat-title,
|
|
.cc-item, .cfg-add, .cfg-code-chip, .cfg-fixed, .cfg-item-title, .cfg-subtab,
|
|
.cmp, .cost-total, .cost-total-amt, .detail-toggle, .fg, .ic-green, .ic-teal,
|
|
.pl-s-title, .pl-s-total, .sel-chip, .sheet-badge, .step-date, .stmt-period,
|
|
.tag-gen, .grand-total-row, .add-form-title, .acct-chip, .role-badge.user {
|
|
color: var(--accent-color2) !important;
|
|
}
|
|
.already-chip, .auto-tag, .can-approve-chip, .snap-tag, .step-label,
|
|
.suc-pill, .badge-added, .badge-autofill, .cfg-code-chip, .sheet-badge,
|
|
.ic-green, .ic-teal, .role-badge.user {
|
|
background: var(--blue-light) !important;
|
|
border-color: #bfdbfe !important;
|
|
}
|
|
|
|
/* ── Common divider / section borders ── */
|
|
.card-header, .detail-header, .filter-bar, .search-bar, .summary-chips,
|
|
.tabs, .report-tabs {
|
|
border-bottom-color: var(--glass-border) !important;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
BOM MODULE — MOBILE RESPONSIVE
|
|
═══════════════════════════════════════════ */
|
|
@media(max-width:768px){
|
|
.hdr-grid {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 8px !important;
|
|
}
|
|
.hdr-fields {
|
|
padding: 10px !important;
|
|
}
|
|
.f-row {
|
|
flex-wrap: wrap !important;
|
|
}
|
|
.f-lbl {
|
|
min-width: 80px !important;
|
|
font-size: 9px !important;
|
|
}
|
|
.f-inp, .f-sel {
|
|
min-width: 0 !important;
|
|
flex: 1 !important;
|
|
}
|
|
.tbl-wrap {
|
|
overflow-x: auto !important;
|
|
-webkit-overflow-scrolling: touch !important;
|
|
}
|
|
.bom-tbl {
|
|
min-width: 700px !important;
|
|
font-size: 10px !important;
|
|
}
|
|
.bom-tbl th {
|
|
font-size: 8px !important;
|
|
padding: 4px 4px !important;
|
|
}
|
|
.bom-tbl td {
|
|
padding: 0 2px !important;
|
|
height: 28px !important;
|
|
}
|
|
.tab-row, .tab-btn {
|
|
font-size: 10px !important;
|
|
padding: 6px 10px !important;
|
|
}
|
|
.win-footer {
|
|
flex-direction: column !important;
|
|
gap: 6px !important;
|
|
padding: 8px 10px !important;
|
|
}
|
|
.f-left {
|
|
flex-wrap: wrap !important;
|
|
width: 100% !important;
|
|
}
|
|
.f-left .btn {
|
|
flex: 1 !important;
|
|
min-width: 0 !important;
|
|
font-size: 11px !important;
|
|
padding: 8px 10px !important;
|
|
}
|
|
.sr-tbl {
|
|
font-size: 10px !important;
|
|
}
|
|
.search-bar {
|
|
flex-direction: column !important;
|
|
gap: 6px !important;
|
|
}
|
|
.search-bar .f-inp, .search-bar .f-sel, .search-bar .btn {
|
|
width: 100% !important;
|
|
}
|
|
main {
|
|
padding: 8px !important;
|
|
}
|
|
.req-grid {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
.pipeline-header {
|
|
overflow-x: auto !important;
|
|
padding: 10px !important;
|
|
}
|
|
.stats-row {
|
|
flex-wrap: wrap !important;
|
|
gap: 4px !important;
|
|
}
|
|
.stat-pill {
|
|
font-size: 10px !important;
|
|
padding: 4px 10px !important;
|
|
}
|
|
.filter-bar {
|
|
flex-wrap: wrap !important;
|
|
gap: 4px !important;
|
|
}
|
|
.filter-tab {
|
|
font-size: 9px !important;
|
|
padding: 4px 10px !important;
|
|
}
|
|
.mgr-grid, .form-grid, .detail-grid {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
.mgr-grid.g3 {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
.modal {
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
border-radius: 0 !important;
|
|
min-height: 100vh !important;
|
|
}
|
|
.modal-overlay {
|
|
padding: 0 !important;
|
|
}
|
|
}
|