/* Group Server — custom UI overrides. Loaded after app.min.css so it wins. */ /* Form fields: light outline + 5px corners + 14px text, matching the source "Add User" form. */ .form-control, .form-select { border-color: #e7e9eb; border-radius: 5px; padding: 7px 12px; font-size: 0.875rem; /* 14px */ } .form-control:focus, .form-select:focus { border-color: #8a93a0; } /* List tables (.le-datatable): clearer striped rows + hover highlight. */ .le-datatable > tbody > tr > * { transition: background-color .12s ease-in-out; } .le-datatable > tbody > tr:nth-of-type(odd) > * { background-color: #f4f6f9 !important; } .le-datatable > tbody > tr:hover > * { background-color: #e7ecf3 !important; } /* Page content: keep a gap below the top bar (the removed page-title row used to provide this spacing). Also make the content column fill the page so the footer sits at the bottom and list cards reach it (see .gs-fill-page below). */ .content-page > .container-fluid { padding-top: 0.75rem; display: flex; flex-direction: column; flex: 1 1 auto; } /* Footer touches the bottom (theme assumed a 65px bar; ours is 48px). */ .content-page { min-height: calc(100vh - 48px); } /* List pages: card grows to meet the footer even with few rows, so the page never ends mid-screen leaving a grey gap below the list. */ .gs-fill-page { flex: 1 1 auto; } .gs-fill-page > .col-12 { display: flex; flex-direction: column; padding-left: 0; padding-right: 0; } .gs-fill-page > .col-12 > .card { flex: 1 1 auto; margin-bottom: 10px; } /* Compact, non-sticky top bar — the table header sticks on scroll instead. Size the inner content to 48px too (it ships at 65px) and vertically center it. */ .app-topbar, .app-topbar .topbar-menu, .app-topbar .topbar-menu > .d-flex { min-height: 48px; height: 48px; } .app-topbar { position: static; } .app-topbar .topbar-menu { align-items: center; } /* Sticky table header on scroll. The page scrolls inside , so the DataTables FixedHeader plugin (which watches window scroll) doesn't fit; CSS position:sticky does. overflow:visible on the responsive wrapper lets the header stick to the body scroll rather than the (non-scrolling) wrapper. */ .card-body .table-responsive { overflow: visible; } .le-datatable thead th { position: sticky; top: 0; z-index: 3; background-color: var(--bs-card-bg, #ffffff); } /* Footer version number: bold + brown. */ .gs-version { font-weight: 700; color: #8b4513; } /* Uniform status badges: ACTIVE=green (bg-success), DELETED=red (bg-danger), INACTIVE=grey. The theme's bg-secondary is blue, so grey is defined here. */ .badge.gs-badge-inactive { background-color: #6c757d; color: #fff; } /* Select2: match the height/border of the Bootstrap form-control (the bundled Select2 has no Bootstrap-5 theme css), and show the red border on invalid. */ .select2-container--default .select2-selection--single { height: calc(1.5em + 0.75rem + 2px); border-color: #e7e9eb; display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; } .form-select.is-invalid + .select2-container--default .select2-selection--single { border-color: #ed5565; } /* ── Design alignment with the outlook "Add User" form — applied globally (2026-06-16) ── */ /* 1. Base font 14px (line-height stays 1.5 → 21px). */ body { font-size: 0.875rem; line-height: 1.5; } /* 6. Field labels: 14px / 600. */ .form-label { font-size: 0.875rem; font-weight: 600; } /* 2. Card titles: green + bold, like the source heading. */ .card-title { font-size: 15px; font-weight: 700; color: #1ab394; } /* 4. Cards: 8px corners (header top corners follow). */ .card { border-radius: 8px; } .card > .card-header:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; } /* The word "Status" — bold + blue everywhere it appears (2026-06-16). */ .gs-status-word { font-weight: 700; color: #0d6efd; } /* Product image sizing + crop UI + Logs scroll — class-based (the vhost CSP strips inline styles). */ .gs-product-thumb { width: 32px; height: 32px; object-fit: cover; } .gs-product-thumb-lg { width: 120px; height: 120px; object-fit: cover; } .gs-product-preview { width: 96px; height: 96px; object-fit: cover; background-color: #f1f3f5; } .gs-no-image { background-color: #f1f3f5; color: #adb5bd; } .gs-crop-container { background-color: #f7f7f7; max-height: 480px; min-height: 240px; } #gs-crop-image { max-width: 100%; display: block; } #gs-process-crop-image { max-width: 100%; display: block; } .gs-logs-scroll { max-height: 50vh; overflow: auto; } /* Process list requirement pills (CSP-safe: class only, no inline style). */ .badge.gs-pill-process { background-color: #e7ecf3; color: #2c7be5; } .badge.gs-pill-convert { background-color: #fdf3e3; color: #d97706; } .gs-pill-gender { color: #6c757d; } /* ── Darker form outlines — project-wide (2026-06-17) ── The base #e7e9eb outline is too faint; nudge every field/select/textarea/ group-addon and the Select2 containers one shade darker. !important so it wins over the base rule above and the theme's own border colour. */ .form-control, textarea.form-control, .form-select, .input-group-text, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border-color: #c2c8cf !important; } /* Checkboxes + radios: darken only the UNCHECKED border. No !important so the Bootstrap `.form-check-input:checked` brand border (higher specificity) still wins when the control is checked. */ .form-check-input { border-color: #b3b9c1; } /* ── Image-upload control icons one size larger — project-wide (2026-06-17) ── The select-image (photo) + remove (trash) icons in the Upload-Image input group ship at 13px; bump to 18px wherever the control appears (Process, Products). Class added to the icon in both form.php views. */ .gs-img-action i { font-size: 18px; } /* ── Process Flowchart canvas (GS-M4b) ────────────────────────────────────── The GoJS diagram canvas fills the modal width; its height is set from JS via CSSOM (el.style.height = innerHeight) — CSP-safe, no inline style= in markup. Replaces the original's inline style="width:100%". */ .gs-fc-canvas { width: 100%; }