/** * Design tokens — tweak these to shift the whole UI (Phase F). * Optional light theme: set and adjust --lw-* if needed. */ :root, [data-bs-theme="dark"] { --lw-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --lw-space-1: 0.25rem; --lw-space-2: 0.5rem; --lw-space-3: 1rem; --lw-space-4: 1.5rem; --lw-space-5: 2.5rem; --lw-radius: 0.5rem; --lw-brand: #3498db; --lw-brand-muted: #5dade2; --lw-surface-elevated: #1e1e1e; --lw-surface-input: #252525; --lw-border-subtle: #444; --lw-link: var(--lw-brand-muted); --lw-navbar-h: 56px; } [data-bs-theme="light"] { --lw-surface-elevated: #f8f9fa; --lw-surface-input: #fff; --lw-border-subtle: #dee2e6; --lw-link: #0d6efd; } .lw-app { font-family: var(--lw-font-sans); } .lw-app a:not(.btn):not(.dropdown-item):not(.nav-link) { color: var(--lw-link); } img { max-width: 100%; height: auto; } /* ---- Admin shell (from examples/theme and style) ---- */ .lw-wrapper { display: flex; min-height: calc(100vh - var(--lw-navbar-h)); } #lw-sidebar { width: 250px; background: var(--bs-secondary-bg); color: var(--bs-body-color); padding-top: var(--lw-space-4); transition: transform 0.25s ease, width 0.25s ease; flex-shrink: 0; } #lw-content { flex-grow: 1; height: calc(100vh - var(--lw-navbar-h)); overflow: auto; background-color: var(--bs-tertiary-bg); width: calc(100vw - 250px); max-width: 100%; display: flex; flex-direction: column; } .lw-sidebar-heading { text-transform: uppercase; font-size: 0.7rem; font-weight: 700; padding: var(--lw-space-2) var(--lw-space-3); opacity: 0.75; } #lw-sidebar .nav-link { padding: var(--lw-space-2) var(--lw-space-3); color: inherit; transition: background 0.15s ease, color 0.15s ease; } #lw-sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.06); } [data-bs-theme="light"] #lw-sidebar .nav-link:hover { background: rgba(0, 0, 0, 0.04); } .lw-user-icon { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 1.1rem; } @media (max-width: 1199.98px) { #lw-sidebar { position: fixed; left: 0; top: var(--lw-navbar-h); height: calc(100vh - var(--lw-navbar-h)); z-index: 1040; transform: translateX(-100%); } #lw-sidebar.lw-sidebar-open { transform: translateX(0); } #lw-content { width: 100%; } } @media (min-width: 1200px) { #lw-sidebar { position: relative; transform: none; } #lw-sidebar.lw-sidebar-collapsed { width: 0; padding-left: 0; padding-right: 0; overflow: hidden; border: none; } } /* ---- Dark-friendly forms (aligned with example style.css) ---- */ [data-bs-theme="dark"] .lw-form-surface .form-control, [data-bs-theme="dark"] .lw-form-surface .form-control:disabled { background-color: var(--lw-surface-input); border: 1px solid var(--lw-border-subtle); color: #fff; } [data-bs-theme="dark"] .lw-form-surface .form-control::placeholder { color: #bbb; opacity: 0.75; } [data-bs-theme="dark"] .lw-form-surface .form-control:focus { background-color: #2d2d2d; border-color: var(--lw-brand); color: #fff; box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25); } [data-bs-theme="dark"] .lw-form-surface .form-label { color: #e8e8e8; } [data-bs-theme="dark"] .lw-form-surface .form-check-input { background-color: #333; border-color: #555; } [data-bs-theme="dark"] .lw-form-surface .form-check-input:checked { background-color: var(--lw-brand); border-color: var(--lw-brand); } [data-bs-theme="dark"] .lw-form-surface .form-select { background-color: var(--lw-surface-input); border: 1px solid var(--lw-border-subtle); color: #fff; } [data-bs-theme="dark"] .lw-form-surface textarea.form-control { min-height: 200px; } /* Receipt add/edit: mobile col-3 thumb (left); desktop preview fills column; modal for full size */ .lw-receipt-thumb-btn { cursor: zoom-in; max-width: 100%; line-height: 0; } .lw-receipt-thumb-btn:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.35); } .lw-receipt-thumb { display: block; max-height: 132px; max-width: 100%; width: auto; height: auto; object-fit: contain; vertical-align: middle; } .lw-receipt-preview-modal-img { max-height: calc(100vh - 7rem); width: auto; max-width: 100%; object-fit: contain; } /* Add receipt, mobile: inline preview under Upload card */ .lw-receipt-add-mobile-preview-img { max-height: 280px; width: auto; max-width: 100%; object-fit: contain; } @media (min-width: 992px) { .lw-receipt-preview-panel { min-height: calc(100vh - 10rem); display: flex; flex-direction: column; } .lw-receipt-preview-panel .card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: 0; } .lw-receipt-preview-panel .lw-receipt-thumb-btn { width: 100%; flex: 1 1 auto; min-height: min(62vh, 560px); max-height: none; display: flex; align-items: center; justify-content: center; padding: var(--lw-space-2) !important; background: rgba(0, 0, 0, 0.28) !important; } .lw-receipt-preview-panel .lw-receipt-thumb { max-height: min(72vh, 780px); max-width: 100%; width: auto; } .lw-receipt-preview-panel #imagePreview { width: 100%; } } [data-bs-toggle="collapse"][data-bs-target="#lwReceiptUploadCollapse"] .bi-chevron-down { display: inline-block; transition: transform 0.2s ease; } [data-bs-toggle="collapse"][data-bs-target="#lwReceiptUploadCollapse"]:not(.collapsed) .bi-chevron-down { transform: rotate(-180deg); } /* Captcha (moved from inline module styles) */ .cwds-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }