/* ========================================================= Central Vista Project Monitoring System Procurement and Delivery Management — core stylesheet ========================================================= */ :root{ --navy-deep:#0d1b4c; --blue-royal:#5468d4; --blue-mid:#6677de; --blue-light:#eef0fb; --blue-header-band:#0b2559; --white:#ffffff; --grey-bg:#f2f2f4; --grey-border:#e0e0e6; --text-dark:#22262f; --text-muted:#6b7280; --yellow:#f5c518; --yellow-dark:#e0ab00; --green:#22a559; --green-dark:#1c8a4a; --red:#e03b3b; --orange:#f2994a; --teal:#1f6f8b; --radius:6px; --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 14px rgba(0,0,0,.12); font-size:15px; } *{box-sizing:border-box;} html{ overflow-x:hidden; } body{ font-family:"Segoe UI", Roboto, Arial, sans-serif; color:var(--text-dark); background:var(--white); margin:0; overflow-x:hidden; /* safety net: the real fixes are the flyout menu (no longer nested in an overflow:auto ancestor) and the grid/table width constraints below; this just guards against any future 1px rounding overflow from creating a scrollbar. */ min-height:100vh; } a{ text-decoration:none; } /* ---------- Global Header (DO NOT REDESIGN) ---------- */ .gov-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 24px; border-bottom:2px solid var(--navy-deep); background:var(--white); } .gov-header .gov-left{ display:flex; align-items:center; gap:14px; } .gov-header .gov-left img{ height:64px; } .gov-header .gov-left .gov-text h1{ font-size:1.05rem; font-weight:700; margin:0; color:var(--text-dark); line-height:1.25; } .gov-header .gov-left .gov-text p{ margin:0; font-size:.95rem; color:var(--text-dark); line-height:1.25; } .gov-header .gov-left .gov-text .tagline{ color:#c81e2b; font-weight:600; font-size:.85rem; } .gov-header .gov-title{ font-size:1.85rem; font-weight:600; color:#3c3f46; text-align:center; flex:1; } .gov-header .gov-right img{ height:70px; } /* ---------- Top navigation ---------- */ .gov-nav{ background:linear-gradient(180deg, var(--blue-royal), #4f61c9); display:flex; align-items:stretch; position:relative; z-index:50; } .gov-nav .nav-items{ display:flex; align-items:stretch; flex:1; min-width:0; overflow-x:hidden; overflow-y:visible; scrollbar-width:none; } .gov-nav .nav-item{ position:relative; color:var(--white); font-weight:600; font-size:.92rem; padding:14px 16px; display:flex; align-items:center; gap:8px; white-space:nowrap; cursor:pointer; border:none; background:transparent; } .gov-nav .nav-item:hover{ background:rgba(255,255,255,.12); } .gov-nav .nav-item.active{ background:var(--white); color:var(--blue-royal); } .gov-nav .nav-item .caret{ font-size:.7rem; margin-left:2px; } /* ---------- Submenu flyout ---------- Rendered as a JS-managed layer appended to (see app.js cvSetupPdmFlyout). It is intentionally NOT nested inside .nav-items (which has overflow-x:auto — and therefore an implied overflow-y:auto — and was clipping/scrolling the old in-flow dropdown). Positioned with position:fixed and shown/hidden via the .show class so it never affects page layout or scroll. */ .nav-flyout{ position:fixed; min-width:190px; background:var(--white); box-shadow:var(--shadow-md); border-radius:0 0 6px 6px; display:flex; flex-direction:column; z-index:1000; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s; pointer-events:none; } .nav-flyout.show{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .15s ease, transform .15s ease; pointer-events:auto; } .nav-flyout a{ padding:11px 18px; color:var(--text-dark); font-weight:600; font-size:.9rem; border-bottom:1px solid var(--grey-border); } .nav-flyout a:last-child{ border-bottom:none; } .nav-flyout a:hover, .nav-flyout a:focus-visible{ background:var(--blue-light); outline:none; } .nav-flyout a.active{ background:#f0f0f0; color:var(--blue-royal); } .gov-nav .nav-item[aria-haspopup="true"]{ position:relative; } .gov-nav .nav-item[aria-haspopup="true"] .caret{ transition:transform .15s ease; display:inline-block; } .gov-nav .nav-item[aria-expanded="true"] .caret{ transform:rotate(180deg); } .gov-nav .nav-utilities{ display:flex; align-items:center; gap:14px; padding:0 18px; background:var(--navy-deep); } .gov-nav .badge-pill{ background:#c81e2b; color:#fff; border-radius:14px; padding:4px 10px; font-size:.8rem; font-weight:700; display:flex; align-items:center; gap:4px; } .gov-nav .msg-pill{ background:transparent; color:#fff; display:flex; align-items:center; gap:4px; font-size:.85rem; } .gov-nav .profile-circle{ width:34px;height:34px;border-radius:50%; background:var(--white); display:flex;align-items:center;justify-content:center; color:var(--navy-deep);font-weight:700; } /* ---------- Page container ---------- */ .page-wrap{ padding:22px 24px 60px; max-width:1980px; margin:0 auto; } .field-label{ font-weight:700; color:var(--text-dark); } .form-select-lg-custom, .form-control, .form-select{ border-radius:var(--radius); border:1px solid #c9ccd6; } .form-control:focus, .form-select:focus{ border-color:var(--blue-royal); box-shadow:0 0 0 .15rem rgba(84,104,212,.2); } .btn-cvpms-yellow{ background:var(--yellow); border-color:var(--yellow-dark); color:#3a2c00; font-weight:700; } .btn-cvpms-yellow:hover{ background:var(--yellow-dark); color:#2a1f00; } .btn-cvpms-green{ background:var(--green); border-color:var(--green-dark); color:#fff; font-weight:700; } .btn-cvpms-green:hover{ background:var(--green-dark); } .btn-cvpms-outline{ background:#fff; border:1px solid var(--blue-royal); color:var(--blue-royal); font-weight:600; } .btn-cvpms-outline:hover{ background:var(--blue-light); } .btn-cvpms-red{ background:var(--red); border-color:#b52a2a; color:#fff; font-weight:700; } .btn-cvpms-red:hover{ background:#b52a2a; } .tab-pill{ border:1px solid var(--grey-border); background:#fff; color:var(--text-dark); font-weight:700; padding:10px 22px; border-radius:4px; } .tab-pill.active{ background:var(--blue-royal); color:#fff; border-color:var(--blue-royal); } /* ---------- Cards / sections ---------- */ .section-card{ background:#fff; border-radius:6px; margin-bottom:20px; } .section-title{ font-weight:700; font-size:1.05rem; margin-bottom:10px; color:var(--text-dark); } .cvpms-table-wrap{ background:var(--grey-bg); border-radius:6px; overflow-x:auto; /* was overflow:hidden, which clipped any table wider than its container instead of letting it scroll — wide tables (e.g. the 5-column POC table inside the Vendor Information modal) were silently cutting off columns on narrower screens. auto lets it scroll horizontally inside the card, never the whole page. */ overflow-y:hidden; /* rounded corners still clip content vertically; any intentional vertical scrolling is handled by an inner wrapper with its own max-height, as already used on the dashboard tables. */ box-shadow:var(--shadow-sm); } table.cvpms-table{ width:100%; border-collapse:collapse; font-size:.9rem; } table.cvpms-table thead th{ background:var(--blue-royal); color:#fff; padding:12px 14px; font-weight:700; text-align:left; position:sticky; top:0; } table.cvpms-table.navy thead th{ background:var(--navy-deep); } table.cvpms-table tbody td{ padding:12px 14px; border-bottom:1px solid #e4e4ea; vertical-align:middle; } table.cvpms-table tbody tr:hover{ background:#e9ecfb; } table.cvpms-table tbody tr:nth-child(even){ background:rgba(0,0,0,.015); } .action-icon{ border:none; background:transparent; font-size:1.05rem; margin-right:8px; cursor:pointer; color:var(--text-dark); } .action-icon.view{ color:var(--teal); } .action-icon.edit{ color:var(--blue-royal); } .action-icon.delete{ color:var(--red); } .action-icon:hover{ opacity:.65; } .status-badge{ padding:5px 12px; border-radius:20px; font-size:.78rem; font-weight:700; display:inline-block; } .status-enroute{ background:#e4edff; color:#1f5fd6; } .status-delayed{ background:#ffe6d6; color:#c9560a; } .status-received{ background:#dff5e5; color:#1c8a4a; } .status-planned{ background:#efeff3; color:#54596b; } .days-delayed{ font-size:.72rem; color:var(--red); font-weight:700; display:block; } /* Empty state */ .empty-state{ text-align:center; padding:48px 20px; color:var(--text-muted); } .empty-state h6{ color:var(--text-dark); font-weight:700; margin-bottom:6px; } .empty-state .bi{ font-size:2.4rem; color:#c3c6d6; margin-bottom:10px; display:block; } /* Toasts */ .toast-stack{ position:fixed; top:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:10px; } .cvpms-toast{ min-width:280px; max-width:360px; background:#fff; border-left:5px solid var(--green); box-shadow:var(--shadow-md); border-radius:5px; padding:12px 16px; font-size:.9rem; display:flex; align-items:flex-start; gap:10px; animation:slideIn .25s ease; } .cvpms-toast.error{ border-color:var(--red); } .cvpms-toast.info{ border-color:var(--blue-royal); } @keyframes slideIn{ from{transform:translateX(30px);opacity:0;} to{transform:translateX(0);opacity:1;} } /* Skeleton loading */ .skel{ background:linear-gradient(90deg,#e9e9ee 25%,#f4f4f7 37%,#e9e9ee 63%); background-size:400% 100%; animation:skel-loading 1.3s ease infinite; border-radius:4px; } @keyframes skel-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} } /* Validation */ .invalid-feedback-custom{ color:var(--red); font-size:.78rem; margin-top:3px; display:none; } .is-invalid-custom{ border-color:var(--red) !important; background:#fff5f5; } .is-invalid-custom ~ .invalid-feedback-custom{ display:block; } /* Utility */ .text-muted-sm{ color:var(--text-muted); font-size:.85rem; } .cursor-pointer{ cursor:pointer; } .required-star{ color:var(--red); } .modal-content-cvpms{ border-radius:10px; border:1px solid var(--grey-border); box-shadow:0 10px 34px rgba(13,27,76,.16); } /* ---------- Modal header (design system) ---------- Structure: title + optional subtitle on the left, a single standardized close button on the right, with a subtle divider underneath. Every modal in the app should use this same markup rather than a one-off header. */ .modal-header-cvpms{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 24px 16px; border-bottom:1px solid var(--grey-border); } .modal-header-titles h4{ font-weight:700; font-size:1.15rem; margin:0; color:var(--navy-deep); } .modal-header-titles .modal-subtitle{ font-size:.82rem; color:var(--text-muted); margin-top:3px; } .modal-close-btn{ flex-shrink:0; width:32px; height:32px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:.95rem; cursor:pointer; transition:background .15s ease, color .15s ease; } .modal-close-btn:hover{ background:var(--grey-bg); color:var(--text-dark); } .modal-close-btn:focus-visible{ outline:2px solid var(--blue-royal); outline-offset:1px; } .modal-body-cvpms{ padding:18px 24px 20px; } .modal-footer-cvpms{ padding:14px 24px; border-top:1px solid var(--grey-border); background:var(--grey-bg); border-radius:0 0 10px 10px; } /* Slightly lighter, less "heavy government portal" backdrop, per spec: modal should be the visual focus without the page going near-black. */ .modal-backdrop{ --bs-backdrop-opacity:.45; } .modal.fade .modal-dialog{ transition:transform .2s ease-out, opacity .2s ease-out; } /* ---------- Section header (design system) ---------- Replaces the earlier filled navy "chip" label, which read as more decorative than functional. This is a quieter, more enterprise-appropriate section divider used consistently across every modal and info panel. */ .section-header{ font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-royal); padding-bottom:6px; margin-bottom:14px; border-bottom:2px solid var(--grey-border); } .section-header:not(:first-child){ margin-top:22px; } /* ---------- Info grid / info field (design system) ---------- Label/value pairs used throughout view modals (Vendor Information, Delivery Information, etc.) instead of ad-hoc "Label: value" inline text, so every modal presents facts the same way. */ .info-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px 24px; margin-bottom:6px; } .info-field .info-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; margin-bottom:3px; } .info-field .info-value{ font-size:.94rem; font-weight:600; color:var(--text-dark); line-height:1.35; } .info-field .info-value.muted{ color:var(--text-muted); font-weight:500; } /* ---------- Delay callout ---------- Consolidates status + duration + reason into one visually distinct block instead of three separate lines, per the Delivery Information redesign. */ .delay-callout{ display:flex; align-items:flex-start; gap:12px; background:#fff6ec; border:1px solid #f3d9b3; border-radius:8px; padding:12px 14px; margin-top:16px; } .delay-callout .delay-icon{ color:var(--orange); font-size:1.15rem; margin-top:1px; } .delay-callout .delay-title{ font-weight:700; color:#9a5b12; font-size:.9rem; } .delay-callout .delay-detail{ font-size:.85rem; color:var(--text-dark); margin-top:2px; } .delay-callout .delay-detail strong{ font-weight:700; } /* ---------- Modal button system ---------- Primary = navy/blue (Save, Update, Submit, Confirm). Secondary = outlined neutral (Cancel, Close). Danger = red, reserved for destructive actions only (Delete). Consistent height/padding/radius/states across all modals. */ .btn-modal-primary, .btn-modal-secondary, .btn-modal-danger{ height:40px; padding:0 18px; border-radius:6px; font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; } .btn-modal-primary{ background:var(--blue-royal); border:1px solid var(--blue-royal); color:#fff; } .btn-modal-primary:hover{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; } .btn-modal-primary:disabled, .btn-modal-primary.disabled{ opacity:.55; cursor:not-allowed; } .btn-modal-secondary{ background:#fff; border:1px solid #c9ccd6; color:var(--text-dark); } .btn-modal-secondary:hover{ background:var(--grey-bg); color:var(--text-dark); } .btn-modal-danger{ background:var(--red); border:1px solid #b52a2a; color:#fff; } .btn-modal-danger:hover{ background:#b52a2a; border-color:#b52a2a; color:#fff; } .btn-modal-primary:focus-visible, .btn-modal-secondary:focus-visible, .btn-modal-danger:focus-visible{ outline:2px solid var(--blue-royal); outline-offset:2px; } .btn-modal-loading{ position:relative; color:transparent !important; pointer-events:none; } .btn-modal-loading::after{ content:""; position:absolute; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:cv-spin .6s linear infinite; } @keyframes cv-spin{ to{ transform:rotate(360deg); } } /* Global focus-visible ring for keyboard navigation, applied broadly so accessibility isn't limited to modal controls only. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--blue-royal); outline-offset:2px; } .repeater-row{ position:relative; } .repeater-remove{ color:var(--red); background:transparent; border:none; font-size:1.1rem; cursor:pointer; } .repeater-add{ color:var(--green); background:transparent; border:none; font-size:1.2rem; cursor:pointer; } .timeline-flow{ display:flex; align-items:stretch; justify-content:space-between; gap:6px; flex-wrap:wrap; } .timeline-node{ flex:1; min-width:130px; text-align:center; padding:14px 10px 12px; border-radius:8px; background:var(--blue-light); border:1px solid var(--grey-border); } .timeline-node .kind-icon{ display:block; font-size:.9rem; color:var(--blue-royal); margin-bottom:5px; } .timeline-node.timeline-node-empty{ background:var(--grey-bg); } .timeline-node.timeline-node-empty .kind-icon{ color:#a9adbd; } .timeline-node.timeline-node-empty .value{ color:var(--text-muted); font-weight:600; } .timeline-node.delayed-node{ background:#fff3e6; border-color:#f2994a; } .timeline-node.delayed-node .kind-icon{ color:var(--orange); } .timeline-node .label{ font-size:.72rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; } .timeline-node .value{ font-weight:700; margin-top:4px; color:var(--text-dark); } .timeline-connector{ display:flex; align-items:center; color:#a9adbd; font-size:1rem; padding:0 2px; } @media (max-width: 1400px){ .gov-nav .nav-item{ padding-left: 9px; padding-right: 9px; font-size: 14px; } .gov-nav .nav-item i{ margin-right: 4px; } .gov-nav .nav-items{ overflow-x:hidden; } }