/* --------------------------------------------------------------------------- Orbit-inspired reskin (themewagon.com/themes/orbit) - Orbit itself is a React/Tailwind SPA, so rather than adopting a build step this brings its visual language (rounded surfaces, soft tinted chips/badges, left-accent active nav indicator, blurred sticky topbar, collapsible sidebar) onto the existing Bootstrap 5 + jQuery shell as plain CSS. Every accent color below is a tint/shade of the single brand color, RGB(0,114,188) - Orbit's violet "primary" + cyan "accent" two-hue system is intentionally collapsed into one strict brand hue; only the semantic status colors (success/warning/ danger, already used firm-wide for badges/KPIs) stay distinct so states remain readable at a glance. --------------------------------------------------------------------------- */ :root{ --brand:#0072BC; /* RGB(0,114,188) - the ONE brand color, used strictly */ --brand-rgb:0,114,188; --brand-dark:#005a94; /* shade - hover/press states */ --brand-light:#3d93d1; /* tint - gradients, glows, "accent" role */ --brand-tint-08:rgba(var(--brand-rgb),.08); --brand-tint-12:rgba(var(--brand-rgb),.12); --brand-tint-15:rgba(var(--brand-rgb),.15); --brand-glow:rgba(var(--brand-rgb),.28); --navy:#0a67b9; --bg:#f4f6f9; --card:#ffffff; --border:#e3e7ee; --border-soft:#edf1f6; --text:#1c2430; --text-soft:#667085; --success:#1f9d6f; --warning:#c98a1f; --danger:#d1483f; --radius-lg:14px; --radius-md:10px; --shadow-card:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05); --shadow-pop:0 12px 32px rgba(6,40,69,.14); } /* ---- Dark theme - same brand blue throughout (RGB 0,114,188), only the neutral surface/text colors change. Toggled via data-theme="dark" on (see #themeToggle in layout_header.php / app.js), persisted in localStorage so it survives navigation. ---- */ :root[data-theme="dark"]{ --bg:#10151f; --card:#161d2b; --border:#262f42; --border-soft:#1e2536; --text:#e7ebf3; --text-soft:#8b95ab; --navy:#0a1626; --shadow-card:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.25); --shadow-pop:0 12px 32px rgba(0,0,0,.45); } /* Bootstrap 5.3 ships its own dark mode, switched by data-bs-theme="dark" (set alongside data-theme by layout_header.php / app.js). Pointing ITS neutral variables at OUR palette is what stops every Bootstrap surface we don't restyle by hand - cards, tables, nav-tabs, list-groups, modals, dropdowns, pagination - from keeping its white default on a dark page. --bs-body-bg is deliberately our CARD colour, not our page colour: Bootstrap derives card, modal, list-group and dropdown backgrounds from it. The page itself is set separately, by the body rule further down, so the two surfaces stay distinct. */ :root[data-theme="dark"]{ --bs-body-bg:var(--card); --bs-body-color:var(--text); --bs-emphasis-color:var(--text); --bs-heading-color:var(--text); --bs-secondary-color:var(--text-soft); --bs-secondary-bg:var(--border-soft); --bs-tertiary-bg:var(--border-soft); --bs-tertiary-color:var(--text-soft); --bs-border-color:var(--border); --bs-border-color-translucent:var(--border); --bs-link-color:var(--brand-light); --bs-link-hover-color:var(--brand); } :root[data-theme="dark"] .card-header{background:var(--card);color:var(--text);} /* .card sets no background of its own (see the Cards block below), so without this it fell back to Bootstrap's card default. Named explicitly rather than relying on inheritance. */ :root[data-theme="dark"] .card{background:var(--card);} :root[data-theme="dark"] .list-group-item{background:var(--card);color:var(--text);border-color:var(--border);} /* .alert-light and .text-bg-light are fixed light palettes - Bootstrap's dark mode does not restyle them, so on a dark card they render as a white slab. */ :root[data-theme="dark"] .alert-light, :root[data-theme="dark"] .alert-secondary{background:var(--border-soft);border-color:var(--border);color:var(--text);} :root[data-theme="dark"] .badge.text-bg-light{background:var(--border-soft)!important;color:var(--text)!important;} :root[data-theme="dark"] .btn-outline-secondary{color:var(--text);border-color:var(--border);} :root[data-theme="dark"] .btn-outline-secondary:hover{background:var(--border-soft);color:var(--text);border-color:var(--text-soft);} :root[data-theme="dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(200%);} :root[data-theme="dark"] .nav-tabs .nav-link.active{background:var(--card);border-color:var(--border) var(--border) var(--card);color:var(--text);} :root[data-theme="dark"] .nav-tabs{border-bottom-color:var(--border);} :root[data-theme="dark"] .table>:not(caption)>*>*{background-color:transparent;} :root[data-theme="dark"] .bg-body-tertiary, :root[data-theme="dark"] .bg-light{background-color:var(--border-soft)!important;} :root[data-theme="dark"] hr{border-color:var(--border);opacity:1;} :root[data-theme="dark"] .topbar{background:rgba(16,21,31,.86);} :root[data-theme="dark"] .topbar-search{background:var(--border-soft);} :root[data-theme="dark"] .table thead th{color:var(--text-soft);} :root[data-theme="dark"] .table{color:var(--text);} :root[data-theme="dark"] .table-hover>tbody>tr:hover>*{background:var(--border-soft);color:var(--text);} :root[data-theme="dark"] .modal-content{background:var(--card);color:var(--text);} /* --border-soft (not --bg) on purpose: --bg is the page background, a shade darker than --card, so an input using it inside a card read as a punched-out black hole rather than a field that belongs to the surface it sits in. --border-soft sits between --card and --border, the same "input on a dark card" tone already used for .topbar-search above, so form fields read as part of the page, not a clash. */ :root[data-theme="dark"] .form-control,:root[data-theme="dark"] .form-select{background:var(--border-soft);border-color:var(--border);color:var(--text);} :root[data-theme="dark"] .form-control:focus,:root[data-theme="dark"] .form-select:focus{background:var(--border-soft);color:var(--text);} :root[data-theme="dark"] .text-muted{color:var(--text-soft)!important;} :root[data-theme="dark"] .kpi-explainer{background:#2a2411;border-color:#4a3f1c;color:#e6c766;} /* --navy is repurposed in dark mode for a near-black sidebar shade (see :root[data-theme="dark"] above), so anything using it for TEXT rather than background - like the big number on a stat card - goes near-invisible on a dark card. --brand-light keeps the same "branded accent" intent, just readable. */ :root[data-theme="dark"] .stat-card .stat-value{color:var(--brand-light);} :root[data-theme="dark"] .badge.text-bg-secondary{background:var(--border-soft)!important;color:var(--text-soft)!important;} body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;} a{color:var(--brand);} .text-brand{color:var(--brand)!important;} .bg-brand{background-color:var(--brand)!important;} /* ---- Buttons (Orbit: rounded-lg, soft brand shadow, gentle press-down on click) ---- */ .btn{border-radius:9px;font-weight:600;font-size:13.5px;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;} .btn:active{transform:scale(.98);} .btn-primary{background-color:var(--brand);border-color:var(--brand);box-shadow:0 1px 2px var(--brand-tint-15);} .btn-primary:hover,.btn-primary:focus{background-color:var(--brand-dark);border-color:var(--brand-dark);} .btn-outline-primary{color:var(--brand);border-color:var(--brand);} .btn-outline-primary:hover{background-color:var(--brand);border-color:var(--brand);} .btn-light{background:var(--brand-tint-08);border-color:transparent;color:var(--brand);} .btn-light:hover{background:var(--brand-tint-15);color:var(--brand-dark);} .btn-sm{border-radius:8px;} /* ---- Form controls (match the buttons/cards radius so the whole app feels of a piece) ---- */ .form-control,.form-select{border-radius:9px;border-color:var(--border);} .form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem var(--brand-tint-15);} .form-control-sm,.form-select-sm{border-radius:8px;} .modal-content{border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;} /* ---- Expandable textareas (Performance Appraisals: Target/comment boxes) ---- */ .field-expand-wrap textarea{padding-right:20px;resize:vertical;} .field-expand-toggle{position:absolute;top:2px;right:2px;z-index:2;line-height:1;color:var(--text-soft);} .field-expand-toggle:hover{color:var(--brand);} .field-expand-toggle i{font-size:11px;} /* ---- Performance Appraisal KPI cards ---- Each KPI is a card, not a table row: the KPI and its targets get the full width, and the three raters get a third each. A five-column table left the Target box a few characters wide and gave each rater ~165px for a rating, a percentage, an achievement note and a comment. */ .apr-modal{max-width:1600px;width:96vw;margin-left:auto;margin-right:auto;} .apr-kpi-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;margin-bottom:14px;background:var(--card);} .apr-kpi-head{padding-bottom:10px;border-bottom:1px solid var(--border-soft);} .apr-kpa{font-weight:700;font-size:14px;color:var(--text);margin-top:4px;} .apr-kpi-desc{font-size:12.5px;color:var(--text-soft);} .apr-kpi-targets{padding:10px 0;border-bottom:1px solid var(--border-soft);} /* Each rater's block is visually its own lane, so it stays obvious whose column you are typing in. */ .apr-rater-row{margin-top:2px;} .apr-rater-row>[class^="col-"]{border-left:2px solid var(--border-soft);} .apr-rater-row>[class^="col-"]:first-child{border-left:0;} .rater-head{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;} .rater-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-soft);margin-bottom:2px;} /* Targets read as a checklist, so each bullet gets room for its own discussion beneath it. */ .target-list{list-style:none;margin:0;padding:0;} .target-list>li{padding:6px 0;border-bottom:1px dashed var(--border);} .target-list>li:last-child{border-bottom:0;} .target-text{display:block;font-weight:600;font-size:12.5px;color:var(--text);} .target-text::before{content:"\2022";color:var(--brand);font-weight:700;margin-right:6px;} .target-comment{font-size:11.5px;color:var(--text-soft);margin:3px 0 0 12px;padding-left:8px;border-left:2px solid var(--border);overflow-wrap:anywhere;} /* Appraisal-wide discussion - roomier than the per-target notes, it is a conversation not a margin note. */ .apr-comment{font-size:12.5px;padding:8px 10px;margin-bottom:6px;border-radius:var(--radius-md);background:var(--border-soft);overflow-wrap:anywhere;} /* ---- Home module launcher ---- Home doubles as the way into the system, so each module gets a tile with a one-line description rather than an icon alone - a name like "Terminal Mapping" does not explain itself. */ .launch-tile{display:flex;align-items:flex-start;gap:12px;height:100%;padding:14px 16px;background:var(--card); border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card); text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s;} .launch-tile:hover{transform:translateY(-1px);border-color:var(--brand-tint-15);box-shadow:0 4px 14px rgba(16,24,40,.07);} .launch-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0; border-radius:var(--radius-md);background:var(--brand-tint-08);color:var(--brand);font-size:17px;} .launch-body{display:flex;flex-direction:column;min-width:0;} .launch-title{font-weight:700;font-size:13.5px;color:var(--text);} .launch-blurb{font-size:11.5px;color:var(--text-soft);line-height:1.35;margin-top:2px;} /* ---- Notifications inbox ---- */ /* Stat cards double as the All/Unread/Read filter, so they are links that look like cards. */ .notif-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--card); border:1px solid var(--border);border-top:3px solid var(--border);border-radius:var(--radius-lg); box-shadow:var(--shadow-card);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s;} .notif-stat:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(16,24,40,.07);} .notif-stat-primary{border-top-color:var(--brand);} .notif-stat-warning{border-top-color:var(--warning);} .notif-stat-success{border-top-color:var(--success);} .notif-stat.active{box-shadow:0 0 0 2px var(--brand-tint-15),var(--shadow-card);} .notif-stat-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);} .notif-stat-value{font-size:28px;font-weight:800;color:var(--text);line-height:1.1;} .notif-stat-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-md); background:var(--border-soft);font-size:18px;flex-shrink:0;} /* A row is a 4-column strip: tick box, type icon, the notice, its actions. */ .notif-item{display:flex;align-items:flex-start;gap:12px;border-left:3px solid transparent;} .notif-item.notif-primary{border-left-color:var(--brand);} .notif-item.notif-warning{border-left-color:var(--warning);} .notif-item.notif-success{border-left-color:var(--success);} .notif-item.notif-danger{border-left-color:var(--danger);} /* Unread is a tint of the row, not a heavy fill - the list still has to read as one list. */ .notif-item.notif-unread{background:var(--brand-tint-08);} .notif-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;flex-shrink:0;font-size:15px;} .notif-body{flex:1 1 auto;min-width:0;} .notif-title{font-weight:700;font-size:13px;color:var(--text);display:flex;align-items:center;flex-wrap:wrap;gap:2px;} .notif-message{font-size:13px;color:var(--text);overflow-wrap:anywhere;margin-top:1px;} .notif-time{font-size:11.5px;color:var(--text-soft);margin-top:4px;} .notif-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-left:6px;} .notif-actions{display:flex;gap:6px;flex-shrink:0;} @media (max-width:575.98px){ .notif-item{flex-wrap:wrap;} .notif-actions{width:100%;justify-content:flex-end;} } /* ---- Permissions matrix (Security & Admin > Permissions) ---- */ .perm-table-wrap{max-height:62vh;overflow-y:auto;} /* Sticky header: the catalogue is long enough that the column meanings scroll away otherwise. */ .perm-table thead th{position:sticky;top:0;z-index:2;background:var(--card);border-bottom:2px solid var(--border);} .perm-group>td{background:var(--border-soft);font-weight:700;font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:var(--text-soft);position:sticky;top:33px;z-index:1;} .perm-desc{font-size:11.5px;line-height:1.35;} /* A row that departs from the role default is marked, so exceptions are visible at a glance. */ .perm-exception>td:first-child{box-shadow:inset 3px 0 0 var(--brand);} /* ---- Field visit location line on the Case Mgt Tracker activity log ---- */ .field-visit-loc{font-size:11.5px;background:var(--brand-tint-08);border-radius:6px;padding:3px 7px;display:inline-block;} /* ---- Appraisal Template editor ---- Grouped by category so the weight is entered once, where it belongs, instead of being repeated on every row and kept in sync by hand. */ .tpl-group{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:14px;overflow:hidden;} .tpl-group-head{background:var(--border-soft);padding:10px 12px;border-bottom:1px solid var(--border);} .tpl-group-body{padding:4px 12px 10px;} .tpl-row{padding:10px 0;border-bottom:1px dashed var(--border);} .tpl-row:last-child{border-bottom:0;} .tpl-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-soft);margin-bottom:2px;} /* ---- Login screen ---- */ .login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--brand));padding:20px;} .login-card{background:#fff;padding:38px 36px;border-radius:16px;width:400px;max-width:100%;box-shadow:0 24px 60px rgba(0,0,0,.28);} .login-card h1{font-size:20px;margin:0 0 2px;color:var(--navy);font-weight:800;} .login-card .sub{font-size:12.5px;color:var(--text-soft);margin-bottom:22px;} /* ---- App shell (Orbit-style: rounded inset nav pills, left accent bar on the active item, collapsible-to-icons sidebar, sticky blurred topbar) ---- */ .app-shell{display:flex;min-height:100vh;} .sidebar{width:260px;flex-shrink:0;background:var(--navy);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;transition:width .2s ease;} /* Brand lockup, STACKED. The artwork is itself a two-line lock-up (RKA over the MGI membership line), so setting it beside the system name in a 260px rail left the logo too small to read and still overflowed. Stacked, the logo gets the full column width and the name sits beneath it on a shared rule - the two read as one mark, and the name is optically matched to the logo's width rather than to some arbitrary point size. */ .sidebar-brand{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 16px 11px;border-bottom:1px solid rgba(255,255,255,.12);} /* 132px, not the full column: at 196px the brand block ran to ~230px tall - five nav rows' worth of masthead before the first link, which is what made the rail feel top-heavy. At this size the whole header is about two nav rows and the MGI line is still legible. */ .brand-mark{width:100%;max-width:132px;display:flex;align-items:center;justify-content:center;} .brand-mark img{width:100%;height:auto;object-fit:contain;} .brand-text{width:100%;max-width:132px;overflow:hidden;white-space:nowrap;text-align:center;padding-top:7px;border-top:1px solid rgba(255,255,255,.22);} .brand-name{display:block;font-weight:700;font-size:13.5px;line-height:1;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;} /* Icon rail: the wordmark and the MGI line are both unreadable at 44px, so only the mark shows. */ .sidebar.collapsed .brand-mark{max-width:48px;} .sidebar-nav{flex:1;padding:12px 10px;} .nav-section-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:14px 14px 6px;} .nav-section-label:first-child{padding-top:4px;} .sidebar.collapsed .nav-section-label{text-align:center;padding-left:0;padding-right:0;} .sidebar-nav .nav-link{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;margin:2px 0;font-size:13.5px;color:rgba(255,255,255,.62);border-radius:10px;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;} .sidebar-nav .nav-link i{width:18px;text-align:center;font-size:15px;color:rgba(255,255,255,.5);transition:color .15s;flex-shrink:0;} .sidebar-nav .nav-link span{overflow:hidden;text-overflow:ellipsis;} .sidebar-nav .nav-link:hover{background:rgba(255,255,255,.07);color:#fff;} .sidebar-nav .nav-link:hover i{color:rgba(255,255,255,.85);} .sidebar-nav .nav-link.active{background:var(--brand-tint-15);color:#fff;font-weight:600;} .sidebar-nav .nav-link.active i{color:var(--brand-light);} .sidebar-nav .nav-link.active::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:3px;height:60%;border-radius:0 3px 3px 0;background:var(--brand-light);} .sidebar-foot{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;} .sidebar-foot-avatar{display:none;width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--brand),var(--brand-light));align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;} .sidebar-foot-text{overflow:hidden;white-space:nowrap;} .sidebar-foot-logout-icon{display:none;width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;color:rgba(255,255,255,.75);flex-shrink:0;} .sidebar-foot-logout-icon:hover{background:rgba(255,255,255,.08);color:#fff;} /* Collapsed (desktop icon-rail) state - toggled via #sidebarToggle, see app.js */ /* ---- Collapsible sidebar groups ---- Frequent destinations sit at the top level; the long lists fold behind a chevron so the sidebar reads as six rows at rest rather than twenty. A group header is a