/* ── LightCraft Design Tokens ───────────────────────────────────── Dark theme default. Light theme activates via data-theme="light" on (stored in user profile and loaded by PHP on page load). ─────────────────────────────────────────────────────────────── */ :root { /* Backgrounds */ --lc-bg-base: #0d0d0d; --lc-bg-surface: #1a1a1a; --lc-bg-elevated: #242424; --lc-bg-input: #1e2330; /* Text */ --lc-text-primary: #f0ece4; --lc-text-secondary: #a0a0a0; --lc-text-muted: #666666; /* Accent — amber/gold */ --lc-accent: #e09200; --lc-accent-hover: #c47f00; --lc-accent-dim: rgba(224, 146, 0, 0.15); /* Borders */ --lc-border: #2a2a2a; --lc-border-light: #333333; /* Status colours */ --lc-danger: #dc3545; --lc-danger-dim: rgba(220, 53, 69, 0.15); --lc-success: #28a745; --lc-success-dim: rgba(40, 167, 69, 0.15); --lc-success-light: #84cc16; --lc-info: #2d7dd2; --lc-info-dim: rgba(45, 125, 210, 0.15); --lc-warning: #f59e0b; --lc-warning-dim: rgba(245, 158, 11, 0.15); /* Gantt bar colours */ --lc-gantt-bar: #383838; /* dark grey task bar — stands out from bg without colour */ --lc-gantt-complete: #aaff00; /* luminous lime green completion overlay */ /* Typography */ --lc-font-body: 'Barlow', Arial, sans-serif; --lc-font-heading: 'Barlow Condensed', Arial, sans-serif; /* Spacing */ --lc-space-xs: 4px; --lc-space-sm: 8px; --lc-space-md: 16px; --lc-space-lg: 24px; --lc-space-xl: 32px; /* Radius */ --lc-radius-sm: 4px; --lc-radius-md: 6px; --lc-radius-lg: 10px; /* Z-index scale */ --lc-z-nav: 100; --lc-z-sticky: 200; --lc-z-modal: 1000; --lc-z-toast: 10000; } /* ── Light Theme Override ── */ body[data-theme="light"] { --lc-bg-base: #f2f4f7; --lc-bg-surface: #ffffff; --lc-bg-elevated: #eaecf0; --lc-bg-input: #f8f9fb; --lc-text-primary: #1a1a2e; --lc-text-secondary: #555570; --lc-text-muted: #8888a0; --lc-accent: #b87800; --lc-accent-hover: #8f5c00; --lc-accent-dim: rgba(184, 120, 0, 0.12); --lc-border: #d0d4dc; --lc-border-light: #e0e4ea; --lc-gantt-bar: var(--lc-info); /* keep blue task bar on light theme */ --lc-gantt-complete: #5c9900; /* darker lime — legible on white backgrounds */ --lc-success-light: #65a30d; --lc-warning: #d97706; --lc-warning-dim: rgba(217, 119, 6, 0.12); } /* ── General ── */ body { font-family: var(--lc-font-body); margin: 0; padding: 0; background-color: var(--lc-bg-base); color: var(--lc-text-primary); background-image: url('/images/grid.png'); background-repeat: repeat; background-size: 128px 92px; } /* ── Logo Banner ── */ .Logomodal { position: fixed; top: 20px; left: 0; width: 100%; height: 100px; background-color: rgba(255, 255, 255, 0.8); z-index: 100; display: flex; align-items: center; padding: 10px 0; padding-left: 150px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Smooth transition on ALL properties that change */ transition: padding 0.4s ease, height 0.4s ease; will-change: height; } .Logomodal.small { padding-left: 50px; height: 25px; } .Logomodal img.logo { display: block; width: 80%; max-width: 800px; min-width: 100px; height: auto; margin: 0 10%; /* Smooth logo resize */ transition: width 0.4s ease, max-width 0.4s ease, margin 0.4s ease; will-change: width; /* hint to browser: animate this efficiently */ } .Logomodal img.logo.small { width: 30%; max-width: 240px; min-width: 50px; margin-right: 20%; } /* ── Layout ── */ .content-wrapper { margin-left: 15%; } /* ── Floating Navigation ── */ .floating-nav { position: fixed; left: 20px; top: 40%; transform: translateY(-40%); display: flex; flex-direction: column; height: auto; z-index: 101; } .nav-expand-btn { visibility: hidden; font-size: 1.5em; color: white; margin: 10px 0; cursor: pointer; justify-content: flex-start; transition: transform 0.3s ease; width: 30px; height: 30px; background-image: url('/images/menu_open.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8); border-radius: 5px; } .nav-button { background-image: url('/images/button.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; width: 200px; min-height: 50px; display: flex; align-items: center; justify-content: flex-start; border-radius: 8px; color: white; font-size: 14px; font-weight: bold; text-decoration: none; white-space: nowrap; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8); margin: 5px 0; padding: 0 5px; gap: 10px; overflow: hidden; transition: width 0.3s ease, padding 0.3s ease; } .nav-button:hover { transform: scale(1.05); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); } .icon-badge { background-color: var(--button-color, #00BFFF); border-radius: 5px; padding: 8px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.7), inset -2px -2px 1px rgba(255, 255, 255, 0.7); } .nav-button img { filter: drop-shadow(2px 2px 2px rgba(250, 250, 250, 0.5)); } .button-label { display: inline; margin-left: 5px; } .nav-button > * { z-index: 1; } .floating-nav.collapsed .nav-button, .nav-button.collapsed { width: 37px; background-image: url('/images/shortbutton.png'); background-size: 100% 100%; } /* ── Modal (unified — was defined twice) ── Default state is hidden. Use display:flex to show. */ .modal { display: none; justify-content: center; align-items: center; position: fixed; inset: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); overflow: auto; } .modal-content { background-color: var(--lc-bg-surface); color: var(--lc-text-primary); margin: 8% auto; padding: 20px 25px; border-radius: var(--lc-radius-lg); width: 40%; min-width: 300px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); position: relative; animation: fadeIn 0.3s ease-out; } .modal-content h2, .modal-content h3 { margin-top: 0; color: var(--lc-accent); text-align: center; } .modal-content label { display: block; margin-top: 10px; color: var(--lc-text-secondary); font-weight: 500; } .modal-content input, .modal-content select { width: 100%; padding: 6px 10px; margin-top: 0; border: 1px solid var(--lc-border); border-radius: var(--lc-radius-md); box-sizing: border-box; background-color: var(--lc-bg-input); color: var(--lc-text-primary); } /* Wide modal */ .modal-content.wide-modal { display: flex; flex-direction: column; position: relative; width: 80%; max-width: 1200px; max-height: 90vh; background: var(--lc-bg-surface); border-radius: 12px; overflow: hidden; margin-top: 2vh; } /* Image search modal */ .wide-modal.imagesearch { width: 90vw; max-width: 90%; height: 80vh; max-height: 80vh; z-index: 1100; display: none; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); justify-content: center; align-items: flex-start; background: rgba(0, 0, 0, 0.5); } .wide-modal.imagesearch .modal-content { width: 100%; height: 100%; padding: 20px; overflow-y: auto; border-radius: 12px; background-color: #fff; } /* Scrollable modal area */ .modal-scrollable { overflow-y: auto; flex: 1 1 auto; padding: 1rem 0; } /* Editor layout */ .editor-body { display: flex; gap: 20px; margin-bottom: 1rem; overflow: hidden; } .editor-image { flex: 0 0 40%; } .editor-fields { flex: 0 0 calc(60% - 20px); scrollbar-gutter: stable; max-width: 80%; box-sizing: border-box; } /* ── Buttons ── */ .button { --btn-color: #007bff; background-color: var(--btn-color); color: white; border: none; height: 30px; padding: 0 10px; line-height: 30px; box-sizing: border-box; font-size: 14px; vertical-align: middle; border-radius: 6px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: filter 0.2s, transform 0.1s; } .button:hover { filter: brightness(85%); transform: scale(1.02); } .btn-blue { --btn-color: #007bff; } .btn-green { --btn-color: #28a745; } .btn-red { --btn-color: #dc3545; } .btn-orange { --btn-color: #fd7e14; } .btn-grey { --btn-color: #aaaaaa; } /* bluebutton — single definition */ .bluebutton { background-color: #007bff; color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; margin-top: 10px; transition: background-color 0.2s, transform 0.1s; } .bluebutton:hover { background-color: #0056b3; transform: scale(1.02); } .sendbutton { background-color: #28a745; color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; margin-top: 10px; transition: background-color 0.2s, transform 0.1s; } .sendbutton:hover { background-color: #218838; transform: scale(1.02); } /* ── Close buttons ── */ .close-btn { position: absolute; top: 8px; right: 10px; font-size: 1.2em; cursor: pointer; color: var(--lc-text-muted); background: none; border: none; padding: 4px 6px; border-radius: var(--lc-radius-sm); line-height: 1; transition: color 0.15s, background 0.15s; } .close-btn:hover { color: var(--lc-danger); background: var(--lc-danger-dim); } .modal-content .close, .close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; } /* ── Animation (single definition) ── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes alertDrop { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Containers ── */ .container { color: var(--lc-text-primary); width: 80%; max-width: 1200px; margin: 30px auto; padding: 20px; background: var(--lc-bg-surface); border-radius: var(--lc-radius-lg); box-shadow: 0 0 50px var(--lc-info-dim); } .list-container { max-width: 1200px; max-height: 60vh; overflow-y: auto; margin: auto; padding: 20px; color: black; background: white; border-radius: 10px; box-shadow: 0 0 50px rgba(0, 255, 128, 0.9); } /* ── Filter Modal ── */ .filter-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .filter-modal-content { background: #fff; margin: 10% auto; padding: 20px; border-radius: 10px; width: 80%; max-width: 600px; max-height: 80vh; overflow: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .filter-column-options { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: center; text-align: center; margin-top: 10px; } .filter-column-options label { display: flex; align-items: center; justify-content: space-between; padding: 5px; background: #f4f4f4; border-radius: 5px; } .filter-column-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: center; text-align: center; } .filter-column-header { font-weight: bold; background: #ddd; padding: 5px; text-align: center; } .filter-column-label { padding: 5px 5px 5px 10px; background: #f4f4f4; border-radius: 5px; text-align: left; } /* ── Search Bar ── */ .search-container { display: flex; margin: 10px; width: 90%; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .search-container > div { flex: 1; min-width: 300px; display: flex; align-items: center; gap: 0.5rem; } .centeredtext { font-size: 14px; display: flex; align-items: center; justify-content: flex-start; width: auto; margin: 0; } .search-bar, .field-bar { height: 30px; padding: 0 10px; line-height: 30px; box-sizing: border-box; font-size: 14px; vertical-align: middle; border: 1px solid #ccc; border-radius: 5px; } .search-bar { width: 40%; min-width: 160px; } .field-bar { width: 15%; min-width: 80px; } /* ── Forms ── */ form { margin-block-end: 0; } .form-group { width: 100%; padding: 2px; display: flex; align-items: center; } .form-group textarea { width: 50%; padding: 2px; box-sizing: border-box; resize: vertical; } .form-group label { width: 50%; text-align: right; padding-right: 10px; } .form-group input { width: 40%; padding: 5px; border: 1px solid #ccc; } .form-group .readonly-field { width: 40%; padding: 5px; border: 1px solid #ccc; background-color: #f9f9f9; text-align: left; box-sizing: border-box; } .form-grid { display: grid; grid-template-columns: 20% 70%; column-gap: 10px; row-gap: 8px; } .form-grid label { text-align: right; font-weight: 600; } .form-grid input, .form-grid select, .form-grid textarea { width: 90%; padding: 5px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; resize: vertical; } /* ── Tables ── */ .table-container { margin-top: 10px; } table { width: 100%; border-collapse: collapse; font-size: small; } table, th, td { border: 1px solid var(--lc-border); } th, td { white-space: nowrap; padding: 2px; text-align: left; height: 12px; color: var(--lc-text-primary); } #weathertable th, #weathertable td { color: unset; } /* ── Components ── */ .components-section { display: flex; flex-direction: column; gap: 0.3rem; width: 91%; } .component-block { border: 1px solid var(--lc-border); border-radius: 8px; padding: 0.5rem; background: var(--lc-bg-surface); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .components-section table, .components-table { width: 100%; border-collapse: collapse; margin-bottom: 0.5rem; } .components-table th, .components-table td, .components-section th, .components-section td { border: 1px solid #ccc; padding: 0.4rem; text-align: left; } .components-table td { padding: 0; margin-top: 0; } .component-qty { padding: 2px 4px; margin: 0; width: 100%; box-sizing: border-box; background-color: var(--lc-bg-input); color: var(--lc-text-primary); border: 1px solid var(--lc-border); border-radius: var(--lc-radius-sm); } /* ── Tabs (single definition) ── */ .tabs { margin-top: 20px; } .tab-buttons { display: flex; gap: 8px; margin-bottom: 5px; } .tab-btn.active { background: var(--lc-accent); color: #000; } .tab-content { display: none; max-height: 300px; overflow-y: auto; } .tab-content.active { display: block; } /* ── Toggle / Add buttons ── */ .toggle-btn { width: 100%; text-align: left; font-weight: bold; background: #f0f0f0; border: none; padding: 0.6rem; font-size: 1rem; border-radius: 6px; cursor: pointer; transition: background 0.2s ease; } .toggle-btn:hover { background: #e2e2e2; } .toggle-btn.active { background: #d0d0d0; } .add-btn { background: #007bff; color: white; border: none; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; } .add-btn:hover { background: #0056b3; } /* ── Submit fixed ── */ .submit-fixed { position: sticky; bottom: 0; display: block; margin: 0 auto; padding: 10px 20px; background: #007bff; color: #fff; border-radius: 6px; } /* ── Misc ── */ .currency::before { content: "R "; } .percentage::after { content: "%"; } .image-container { position: relative; } .image { width: 250px; height: 250px; object-fit: contain; } .icon { width: 30px; height: 30px; object-fit: contain; } .listresultsbody { overflow: auto; } .modal, .editcontainer { align-items: center; display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .itemeditor { color: black; display: grid; grid-template-columns: 60% 40%; background-color: white; margin: auto; padding: 20px; max-width: 1000px; text-align: center; border-radius: 10px; position: relative; gap: 20px; } .readonly-field { margin: 0; padding: 8px 10px; line-height: 1.2; text-align: left; height: 30px; display: inline-block; width: 90%; border: 1px solid #ccc; border-radius: 4px; background-color: #f9f9f9; font-size: 14px; color: #333; box-sizing: border-box; } .selected { border: 2px solid red; } .dropZone { border: 2px dashed #888; padding: 40px; text-align: center; color: #555; border-radius: 5px; margin-bottom: 10px; } .selectFilesBtn { padding: 10px 20px; margin-bottom: 10px; background-color: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer; } select { height: 30px; padding: 4px; font-size: 14px; } input { height: 24px; padding: 2px; font-size: 14px; } /* ── Custom Alert ── */ .custom-alert-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; justify-content: center; align-items: flex-start; padding-top: 20vh; z-index: 10000; } .custom-alert-box { background: var(--lc-bg-surface); border: 1px solid var(--lc-border); padding: 20px 24px; border-radius: var(--lc-radius-md); max-width: 500px; width: calc(100% - 40px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); animation: alertDrop .25s ease-out; text-align: center; } .custom-alert-box p { text-align: center; color: var(--lc-text-primary); margin: 20px 20px 16px; } .custom-alert-box button { padding: 6px 14px; background: var(--lc-accent); color: #000; border: none; border-radius: var(--lc-radius-sm); font-family: var(--lc-font-heading); font-weight: 600; width: 100px; cursor: pointer; transition: filter 0.15s; } .custom-alert-box button:hover { filter: brightness(1.15); } /* ── Unified Headings ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--lc-font-heading); color: var(--lc-text-primary); margin-top: 0; letter-spacing: 0.04em; } h1 { font-size: 2rem; font-weight: 700; } h2 { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; } h3 { font-size: 1.2rem; font-weight: 600; } h4 { font-size: 1rem; font-weight: 600; } /* ── Unified Table (.lc-table) ── */ .lc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-family: var(--lc-font-body); } .lc-table th { background: var(--lc-bg-elevated); color: var(--lc-text-secondary); font-family: var(--lc-font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 10px; border-bottom: 2px solid var(--lc-accent); text-align: left; white-space: nowrap; } .lc-table td { padding: 8px 10px; color: var(--lc-text-primary); border-bottom: 1px solid var(--lc-border); vertical-align: middle; } .lc-table tr:hover td { background: var(--lc-bg-elevated); } .lc-table tr:last-child td { border-bottom: none; } /* ── Unified Buttons (.lc-btn) ── */ .lc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 14px; border: none; border-radius: var(--lc-radius-md); font-family: var(--lc-font-heading); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: filter 0.15s, transform 0.1s; text-decoration: none; } .lc-btn:hover:not([disabled]) { filter: brightness(1.15); transform: scale(1.02); } .lc-btn:active { transform: scale(0.98); } .lc-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .lc-btn-primary { background: var(--lc-accent); color: #000; } .lc-btn-info { background: var(--lc-info); color: #fff; } .lc-btn-success { background: var(--lc-success); color: #fff; } .lc-btn-danger { background: var(--lc-danger); color: #fff; } .lc-btn-ghost { background: transparent; color: var(--lc-accent); border: 1px solid var(--lc-accent); } .lc-btn-secondary { background: var(--lc-bg-elevated); color: var(--lc-text-primary); border: 1px solid var(--lc-border); } .lc-btn-warning { background: var(--lc-warning); color: #000; } /* Small size modifier */ .lc-btn-sm { height: 26px; padding: 0 10px; font-size: 0.78rem; } /* ── Scrollbars ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--lc-bg-base); } ::-webkit-scrollbar-thumb { background: var(--lc-border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--lc-border); } /* ── FK clear button ── */ .fk-clear-btn, .cc-mat-clear { flex-shrink: 0; padding: 4px 8px; background: transparent; border: 1px solid var(--lc-border); border-radius: var(--lc-radius-sm); color: var(--lc-text-muted); cursor: pointer; font-size: 0.8rem; line-height: 1; transition: color 0.15s, border-color 0.15s; } .fk-clear-btn:hover, .cc-mat-clear:hover { color: var(--lc-danger); border-color: var(--lc-danger); } /* ── Unified Form Inputs (.lc-input, .lc-select, .lc-textarea) ── */ .lc-input, .lc-select, .lc-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--lc-border); border-radius: var(--lc-radius-md); background-color: var(--lc-bg-input); color: var(--lc-text-primary); font-family: var(--lc-font-body); font-size: 0.9rem; box-sizing: border-box; transition: border-color 0.15s; } .lc-input:focus, .lc-select:focus, .lc-textarea:focus { outline: none; border-color: var(--lc-accent); box-shadow: 0 0 0 2px var(--lc-accent-dim); } .lc-textarea { resize: vertical; min-height: 80px; } /* ── Unified Form Layout (.lc-form-grid, .lc-form-row) ── */ .lc-form-grid { display: grid; grid-template-columns: minmax(120px, 22%) 1fr; column-gap: 12px; row-gap: 10px; align-items: start; } .lc-form-grid label { text-align: right; font-size: 0.85rem; color: var(--lc-text-secondary); padding-top: 9px; } .lc-form-row { display: flex; align-items: center; gap: var(--lc-space-md); flex-wrap: wrap; } /* ── Unified Badges (.lc-badge + variants) ── */ .lc-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; font-family: var(--lc-font-heading); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor; } .lc-badge-draft { color: var(--lc-text-secondary); background: var(--lc-bg-elevated); border-color: var(--lc-border); } .lc-badge-pending { color: var(--lc-warning); background: var(--lc-warning-dim); } .lc-badge-approved { color: var(--lc-success); background: var(--lc-success-dim); } .lc-badge-rejected { color: var(--lc-danger); background: var(--lc-danger-dim); } .lc-badge-info { color: var(--lc-info); background: var(--lc-info-dim); } .lc-badge-accent { color: var(--lc-accent); background: var(--lc-accent-dim); } .lc-badge-invoiced { color: var(--lc-success-light); background: rgba(132, 204, 22, 0.12); } /* ── Toggle Switch (.lc-toggle + .lc-slider) ── */ .lc-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .lc-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .lc-slider { position: absolute; inset: 0; background: var(--lc-border-light); border-radius: 22px; transition: background 0.2s; cursor: pointer; } .lc-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; } .lc-toggle input:checked + .lc-slider { background: var(--lc-accent); } .lc-toggle input:checked + .lc-slider::before { transform: translateX(18px); } .lc-toggle input:focus + .lc-slider { box-shadow: 0 0 0 2px var(--lc-accent-dim); } /* ── Tab Navigation (.lc-tab-btn system) ── */ .lc-tab-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; } .lc-tab-btn { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 16px; cursor: pointer; font-family: var(--lc-font-heading); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.05em; color: var(--lc-text-secondary); transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .lc-tab-btn:hover { color: var(--lc-text-primary); } .lc-tab-btn.active { color: var(--lc-accent); border-bottom-color: var(--lc-accent); } /* ── Subnav Tab (.subnav-link) — sticky page sub-navigation strip ── */ .subnav-link { font-family: var(--lc-font-heading); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lc-text-secondary); text-decoration: none; padding: 3px 18px; border-bottom: 3px solid transparent; white-space: nowrap; transition: color 0.2s, border-color 0.2s; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; } .subnav-link:hover, .subnav-link.active { color: var(--lc-accent); border-bottom-color: var(--lc-accent); } /* ── View Tab (.view-tab) — BOQ/Gantt/Claims tab strip ── */ /* .proc-tab shares the same visual style for the Materials/Tools/Labour strip */ .view-tab, .proc-tab { font-family: var(--lc-font-heading); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: none; border: none; border-bottom: 3px solid transparent; color: var(--lc-text-secondary); padding: 10px 20px; cursor: pointer; margin-bottom: -2px; transition: color 0.2s, border-color 0.2s; user-select: none; } .view-tab:hover, .proc-tab:hover { color: var(--lc-text-primary); } .view-tab.active, .proc-tab.active { color: var(--lc-accent); border-bottom-color: var(--lc-accent); } /* ── Floating Save Button (.save-btn) — sticky dirty-state save ── */ .save-btn { position: fixed; right: 24px; z-index: var(--lc-z-sticky); background: var(--lc-accent); color: #000; border: none; border-radius: var(--lc-radius-md); padding: 10px 22px; font-family: var(--lc-font-heading); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 20px var(--lc-accent-dim); display: flex; align-items: center; gap: 8px; transition: opacity 0.2s; } .save-btn.hidden { display: none; } .dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc-danger); display: inline-block; animation: pulse 1.6s ease-in-out infinite; } /* ── Toast (.lc-toast) — temporary feedback message ── */ .lc-toast { position: fixed; bottom: 20px; right: 20px; background: var(--lc-bg-elevated); color: var(--lc-text-primary); border: 1px solid var(--lc-border); padding: 10px 16px; border-radius: var(--lc-radius-md); z-index: var(--lc-z-toast); font-size: 0.85rem; box-shadow: 0 4px 16px rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s; } .lc-toast.visible { opacity: 1; } /* ── Card (.lc-card) — general surface container ── */ .lc-card { background: var(--lc-bg-surface); border: 1px solid var(--lc-border); border-radius: var(--lc-radius-lg); padding: var(--lc-space-md) var(--lc-space-lg); } .lc-card-elevated { background: var(--lc-bg-elevated); border: 1px solid var(--lc-border); border-radius: var(--lc-radius-md); padding: var(--lc-space-md); } /* ── Action Buttons in tables (.lc-action-btn) ── */ .lc-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--lc-radius-sm); border: none; cursor: pointer; font-size: 0.8rem; transition: background 0.15s; } .lc-action-edit { background: var(--lc-info-dim); color: var(--lc-info); } .lc-action-delete { background: var(--lc-danger-dim); color: var(--lc-danger); } .lc-action-edit:hover { filter: brightness(1.3); } .lc-action-delete:hover { filter: brightness(1.3); } /* ── Section Title (.lc-section-title) ── */ .lc-section-title { font-family: var(--lc-font-heading); font-size: 1.4rem; font-weight: 700; color: var(--lc-text-primary); letter-spacing: 0.04em; margin: 0 0 var(--lc-space-md); } /* ── Top Band (.lc-top-band) — header strip used on list/editor pages ── */ .lc-top-band { padding: 20px 24px 14px; background: var(--lc-bg-base); border-bottom: 1px solid var(--lc-border); } /* ── Search Wrap (.lc-search-wrap) ── */ .lc-search-wrap { display: flex; align-items: center; gap: 8px; background: var(--lc-bg-input); border: 1px solid var(--lc-border); border-radius: 8px; padding: 6px 14px; } .lc-search-wrap svg { flex-shrink: 0; opacity: 0.4; color: var(--lc-text-secondary); } .lc-search-wrap input[type="text"] { background: transparent; border: none; outline: none; color: var(--lc-text-primary); font-family: var(--lc-font-body); font-size: 0.95rem; width: 100%; } .lc-search-wrap input[type="text"]::placeholder { color: var(--lc-text-muted); } /* ── Theme Toggle Button ── */ .theme-toggle-btn { cursor: pointer; background: none; border: none; padding: 0; } #theme-toggle-label { transition: none; } /* ── Footer ── */ footer { background-color: #333; color: white; text-align: center; padding: 20px; } /* ================================================ RESPONSIVE BREAKPOINTS ================================================ */ /* Tablet & small laptop (up to 1024px) */ @media screen and (max-width: 1024px) { .Logomodal { padding-left: 40px; } .wide-modal { top: 10px; width: 80%; min-width: 500px; } .nav-expand-btn { visibility: visible; } .floating-nav.auto-collapse .nav-button { width: 38px; background-image: url('/images/shortbutton.png'); } } /* Tablet & large phone (up to 768px) */ @media screen and (max-width: 768px) { .wide-modal { top: 10px; width: 90%; min-width: unset; } .editor-body { flex-direction: column; } .editor-image { width: 100%; margin-bottom: 10px; } .form-grid { grid-template-columns: 30% 60%; } } /* Small phones (up to 500px) */ @media screen and (max-width: 500px) { .modal-content { width: 80%; min-width: 250px; margin-top: 20%; } .wide-modal { top: 10px; width: 95%; min-width: unset; margin-top: 10%; } .bluebutton { width: 100%; } } /* ================================================ SYSTEM DARK MODE FALLBACK Applies when no data-theme attribute is set (e.g. logged-out pages). When data-theme is set by PHP, these CSS variable overrides on body take precedence via the body[data-theme="light"] rule above. ================================================ */ @media (prefers-color-scheme: light) { body:not([data-theme]) { --lc-bg-base: #f2f4f7; --lc-bg-surface: #ffffff; --lc-bg-elevated: #eaecf0; --lc-bg-input: #f8f9fb; --lc-text-primary: #1a1a2e; --lc-text-secondary: #555570; --lc-text-muted: #8888a0; --lc-accent: #b87800; --lc-accent-hover: #8f5c00; --lc-accent-dim: rgba(184, 120, 0, 0.12); --lc-border: #d0d4dc; --lc-border-light: #e0e4ea; } }