/* ========================================================= Shop ERP — Premium Theme (Ink Navy + Gold + Teal) Supports Light & Dark mode via [data-bs-theme] on (Bootstrap 5.3's native color-mode system handles all Bootstrap components; the variables & rules below extend that same attribute to every custom component in this app.) ========================================================= */ :root, [data-bs-theme="light"] { --ink: #0a0f1e; --ink-2: #131c33; --ink-3: #1b2745; --paper: #f3f2ee; --paper-card: #ffffff; --paper-soft: #f7f6f2; --gold: #c9982f; --gold-dark: #a87e21; --gold-soft: #fbf3e2; --teal: #1f8a70; --teal-dark: #17694f; --teal-soft: #e6f4f0; --line: #e7e3d9; --line-strong: #d8d3c5; --ink-text: #1a1d29; --muted: #6b7280; --sidebar-from: var(--ink); --sidebar-to: var(--ink-2); --radius: 10px; --radius-lg: 16px; --radius-sm: 8px; --shadow-sm: 0 2px 8px rgba(10,15,30,0.06); --shadow-md: 0 8px 24px rgba(10,15,30,0.10); --shadow-lg: 0 20px 60px rgba(10,15,30,0.16); --focus-ring: rgba(201, 152, 47, 0.35); color-scheme: light; } [data-bs-theme="dark"] { --ink: #05070f; --ink-2: #0c1220; --ink-3: #141d33; --paper: #0b0e16; --paper-card: #131826; --paper-soft: #171d2e; --gold: #e0ac3d; --gold-dark: #c9982f; --gold-soft: rgba(224, 172, 61, 0.12); --teal: #35b295; --teal-dark: #1f8a70; --teal-soft: rgba(53, 178, 149, 0.14); --line: #232b3f; --line-strong: #2c3550; --ink-text: #e7e9f0; --muted: #98a1b8; --sidebar-from: #05070f; --sidebar-to: #0c1220; --shadow-sm: 0 2px 10px rgba(0,0,0,0.35); --shadow-md: 0 10px 28px rgba(0,0,0,0.45); --shadow-lg: 0 24px 60px rgba(0,0,0,0.55); --focus-ring: rgba(224, 172, 61, 0.35); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', 'Hind Siliguri', sans-serif; background: var(--paper); color: var(--ink-text); transition: background-color 0.25s ease, color 0.25s ease; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', 'Hind Siliguri', sans-serif; } .mono-text { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; } a { text-decoration: none; } ::selection { background: var(--gold-soft); color: var(--ink-text); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* --------------------------------------------------------- Login page --------------------------------------------------------- */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 15% -10%, rgba(201,152,47,0.18), transparent 60%), radial-gradient(1000px 700px at 110% 110%, rgba(31,138,112,0.18), transparent 60%), radial-gradient(ellipse at top, #16223f 0%, var(--ink) 60%); padding: 1rem; position: relative; overflow: hidden; } .login-theme-toggle { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 5; } .login-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.6rem 2.5rem; width: 100%; max-width: 430px; box-shadow: var(--shadow-lg); position: relative; z-index: 2; animation: loginRise 0.5s ease; } @keyframes loginRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .login-brand { text-align: center; margin-bottom: 1.8rem; } .login-brand i { font-size: 2.2rem; color: var(--ink); background: linear-gradient(135deg, var(--gold), var(--gold-dark)); width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.9rem; box-shadow: 0 10px 24px rgba(201,152,47,0.35); } .login-brand h4 { margin-bottom: 0.2rem; font-weight: 700; letter-spacing: 0.2px; } .login-card .form-control { border-radius: var(--radius); border-color: var(--line-strong); } .login-card .btn-primary { border-radius: var(--radius); padding-top: 0.7rem; padding-bottom: 0.7rem; } /* --------------------------------------------------------- Shell layout: sidebar + main --------------------------------------------------------- */ .erp-shell { display: flex; min-height: 100vh; } .erp-sidebar { width: 260px; background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%); color: #fff; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; transition: transform 0.3s ease; box-shadow: var(--shadow-lg); } .erp-brand { padding: 1.5rem 1.3rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .erp-brand i { color: var(--ink); background: linear-gradient(135deg, var(--gold), var(--gold-dark)); width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .erp-brand span { line-height: 1.2; } .erp-nav { flex-grow: 1; overflow-y: auto; padding: 0.9rem 0.7rem; } .erp-nav .nav-section { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.32); padding: 1rem 0.6rem 0.4rem; font-weight: 600; } .erp-nav .nav-link { color: rgba(255,255,255,0.78); padding: 0.62rem 0.8rem; font-size: 0.89rem; display: flex; align-items: center; gap: 0.75rem; border-radius: var(--radius-sm); margin-bottom: 2px; transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease; } .erp-nav .nav-link i { width: 18px; text-align: center; color: rgba(255,255,255,0.45); font-size: 0.92rem; } .erp-nav .nav-link:hover { background: rgba(255,255,255,0.07); color: #fff; transform: translateX(2px); } .erp-nav .nav-link:hover i { color: rgba(255,255,255,0.8); } .erp-nav .nav-link.active { background: linear-gradient(135deg, rgba(201,152,47,0.22), rgba(201,152,47,0.08)); color: #fff; box-shadow: inset 3px 0 0 var(--gold); } .erp-nav .nav-link.active i { color: var(--gold); } .erp-nav::-webkit-scrollbar { width: 6px; } .erp-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } .erp-user-box { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.2rem; border-top: 1px solid rgba(255,255,255,0.08); } .erp-user-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink); flex-shrink: 0; box-shadow: 0 4px 12px rgba(201,152,47,0.35); } .erp-user-box a:hover { color: #fff !important; } .erp-main { flex-grow: 1; margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; } .erp-topbar { background: var(--paper-card); border-bottom: 1px solid var(--line); padding: 0.85rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 500; backdrop-filter: saturate(1.4) blur(6px); transition: background-color 0.25s ease, border-color 0.25s ease; } .erp-content { padding: 1.6rem; flex-grow: 1; } @media (max-width: 992px) { .erp-sidebar { transform: translateX(-100%); } .erp-sidebar.show { transform: translateX(0); } .erp-main { margin-left: 0; } .erp-content { padding: 1rem; } } /* --------------------------------------------------------- Theme toggle switch --------------------------------------------------------- */ .theme-toggle-btn { --size: 38px; width: var(--size); height: var(--size); border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper-soft); color: var(--ink-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; flex-shrink: 0; } .theme-toggle-btn:hover { transform: rotate(-12deg) scale(1.06); border-color: var(--gold); } .theme-toggle-btn i { font-size: 1rem; } .theme-toggle-btn .icon-dark { display: none; } [data-bs-theme="dark"] .theme-toggle-btn .icon-light { display: none; } [data-bs-theme="dark"] .theme-toggle-btn .icon-dark { display: inline-block; color: var(--gold); } /* --------------------------------------------------------- Cards / stat boxes / tables --------------------------------------------------------- */ .stat-box { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-sm); height: 100%; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.25s ease, border-color 0.25s ease; position: relative; overflow: hidden; } a.stat-box { color: inherit; text-decoration: none; cursor: pointer; } a.stat-box:hover { border-color: var(--gold); } a.stat-box:hover .stat-value { color: var(--gold-dark); } [data-bs-theme="dark"] a.stat-box:hover .stat-value { color: var(--gold); } .stat-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .stat-icon { width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; flex-shrink: 0; box-shadow: var(--shadow-sm); } .stat-icon.bg-navy { background: linear-gradient(135deg, var(--ink-3), var(--ink)); } .stat-icon.bg-gold { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); } .stat-icon.bg-teal { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); } .stat-icon.bg-danger-soft { background: linear-gradient(135deg, #e2635e, #b5352f); } .stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--ink-text); } .stat-label { font-size: 0.78rem; color: var(--muted); margin-top: 2px; } .table-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: background-color 0.25s ease, border-color 0.25s ease; } .table-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--line); gap: 0.75rem; flex-wrap: wrap; } .table-card-header h6, .table-card-header h5 { margin: 0; font-weight: 700; } .table-card table { color: var(--ink-text); margin-bottom: 0; } .table-card table thead th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--paper-soft); font-weight: 700; } .table-card table td, .table-card table th { padding: 0.9rem 1.05rem; border-color: var(--line); vertical-align: middle; } .table-card table tbody tr { transition: background-color 0.15s ease; } .table-card table tbody tr:hover { background: var(--paper-soft); } .badge-status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.75rem; border-radius: 50px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2px; } .status-completed, .status-delivered { background: var(--teal-soft); color: var(--teal-dark); } .status-pending { background: var(--gold-soft); color: var(--gold-dark); } .status-progress { background: rgba(13,110,253,0.12); color: #4c8dff; } .status-due { background: rgba(217,83,79,0.14); color: #e2635e; } .status-cancelled { background: rgba(107,114,128,0.16); color: var(--muted); } [data-bs-theme="dark"] .status-progress { color: #7fb0ff; } [data-bs-theme="dark"] .status-due { color: #f29490; } /* --------------------------------------------------------- POS product grid --------------------------------------------------------- */ .pos-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.7rem; max-height: 520px; overflow-y: auto; padding-right: 2px; } .pos-product-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 0.65rem; text-align: center; cursor: pointer; transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s, background-color 0.25s ease; background: var(--paper-soft); } .pos-product-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-md); } .pos-product-card.disabled { opacity: 0.4; cursor: not-allowed; } .pos-product-name { font-size: 0.82rem; font-weight: 600; line-height: 1.2; margin: 0 !important; min-height: auto; color: var(--ink-text); } .pos-product-code { font-size: 0.68rem; font-weight: 500; color: var(--muted); line-height: 1.1; margin: 1px 0 3px !important; } .pos-product-price { color: var(--teal-dark); font-weight: 700; font-size: 0.9rem; } [data-bs-theme="dark"] .pos-product-price { color: var(--teal); } .pos-product-stock { font-size: 0.7rem; color: var(--muted); } /* --------------------------------------------------------- Invoice print --------------------------------------------------------- */ .invoice-box { max-width: 800px; margin: 0 auto; } @media print { .erp-sidebar, .erp-topbar, .d-print-none { display: none !important; } .erp-main { margin-left: 0 !important; } .erp-content { padding: 0 !important; } body { background: #fff; color: #000; } } /* --------------------------------------------------------- Buttons / forms / misc premium polish --------------------------------------------------------- */ .btn { border-radius: var(--radius-sm); font-weight: 600; } .btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); border: none; color: var(--ink); box-shadow: 0 4px 14px rgba(201,152,47,0.28); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: var(--ink); box-shadow: 0 6px 18px rgba(201,152,47,0.38); } .btn-outline-primary { color: var(--gold-dark); border-color: var(--gold); } .btn-outline-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } [data-bs-theme="dark"] .btn-outline-primary { color: var(--gold); } .btn-success { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border: none; } .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line-strong); background-color: var(--paper-card); color: var(--ink-text); } .form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 0.2rem var(--focus-ring); } .form-control::placeholder { color: var(--muted); opacity: 0.8; } .card { background-color: var(--paper-card); border-color: var(--line); } .modal-content { border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .modal-header, .modal-footer { border-color: var(--line); } .dropdown-menu { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow-md); } .alert { border-radius: var(--radius); border-width: 1px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } /* --------------------------------------------------------- DataTables — premium styling, light & dark aware --------------------------------------------------------- */ .dataTables_wrapper { color: var(--ink-text); padding: 0.2rem 1.3rem 1.1rem; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing { color: var(--muted); font-size: 0.85rem; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background-color: var(--paper-card); color: var(--ink-text); padding: 0.3rem 0.6rem; } .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 0.15rem var(--focus-ring); } .dataTables_wrapper .dataTables_paginate .page-link { border-radius: var(--radius-sm) !important; margin: 0 2px; border-color: var(--line); background-color: var(--paper-card); color: var(--ink-text); } .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); border-color: var(--gold); color: var(--ink); font-weight: 700; } .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { background-color: var(--paper-soft); color: var(--muted); } table.dataTable.table-striped > tbody > tr.odd > * { background-color: var(--paper-soft); box-shadow: none; } table.dataTable.table-hover > tbody > tr:hover > * { background-color: var(--gold-soft); } .dt-container .dt-search input { margin-left: 0.4rem; } /* Responsive DataTables details row */ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { background-color: var(--teal); } ul.dtr-details { color: var(--ink-text); }