@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); /* ========================================================= Design tokens ========================================================= */ :root { /* neutrals */ --border: #e5e7eb; --text: #111827; --muted: #6b7280; --bg: #ffffff; /* tenant theming (safe fallbacks) */ --brand-bg: #ffffff; --brand-text: #111827; --brand-sidebar: #ffffff; --brand-accent: #0d6efd; --brand-primary: #0d6efd; /* extras */ --brand-primary-contrast: #ffffff; --brand-border: #dee2e6; /* nav tabs */ --brand-tab-bg: #f8f9fa; --brand-tab-hover-bg: #e9ecef; --brand-tab-disabled-bg: #f8f9fa; /* active sidebar token bridge */ --sidebar-active-bg: var(--brand-primary); --sidebar-active-contrast: var(--brand-primary-contrast); /* calendar theme */ --cal-bg: #ffffff; --cal-fg: #111827; --cal-border: #e5e7eb; --cal-cell-bg: #ffffff; --cal-cell-muted-bg: #fafafa; --cal-muted-fg: #9ca3af; --cal-hover: #f6f7f9; --cal-toolbar-bg: #ffffff; --cal-toolbar-fg: #111827; --cal-today-ring: #93c5fd; } /* ========================================================= Base ========================================================= */ html, body { height: 100%; } *, *::before, *::after { box-sizing: border-box; } body { background: var(--brand-bg, var(--bg)); color: var(--brand-text, var(--text)); } /* Utility */ .text-muted { color: var(--muted) !important; } /* ========================================================= App shell ========================================================= */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } /* Top bar */ .app-topbar { height: 56px; padding: 0 16px; border-bottom: 1px solid rgba(0,0,0,.06); background: var(--brand-navbar-bg, var(--brand-bg, var(--bg))); display: flex; align-items: center; justify-content: space-between; } .app-brand { font-weight: 700; text-decoration: none; color: var(--brand-navbar-text, var(--brand-text, var(--text))); display: inline-flex; align-items: center; gap: 8px; } .app-topbar-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; } .topbar-hello { color: var(--muted); white-space: nowrap; } .app-topbar-right .btn { border-radius: 10px; padding: 4px 10px; } /* Body (sidebar + content) */ .app-body { display: flex; flex: 1 1 auto; min-height: 0; } /* Sidebar */ .app-sidebar { width: 240px; flex: 0 0 240px; border-right: 1px solid rgba(0,0,0,.06); background: var(--brand-sidebar, var(--bg)); padding: 16px; } /* Sidebar links: ALWAYS tenant themed */ .app-sidebar .app-link { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; margin-bottom: 6px; transition: background 120ms ease, color 120ms ease; color: var(--brand-accent) !important; /* <-- this was the missing piece */ } .app-sidebar .app-link:hover, .app-sidebar .app-link:focus { background: rgba(0,0,0,.04); text-decoration: none; } /* Active/current page */ .app-sidebar .app-link.active, .app-sidebar .app-link[aria-current="page"] { background: var(--sidebar-active-bg); color: var(--sidebar-active-contrast) !important; font-weight: 600; } /* ========================================================= Tenant Menu Style Variants (per-tenant) Requires: ========================================================= */ /* Default (links) */ body[data-menu-style="links"] .app-sidebar .app-link { border: 0; background: transparent; font-weight: 600; } /* Buttons */ body[data-menu-style="buttons"] .app-sidebar .app-link { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, transparent); background: color-mix(in srgb, var(--brand-accent) 10%, transparent); font-weight: 700; } body[data-menu-style="buttons"] .app-sidebar .app-link:hover, body[data-menu-style="buttons"] .app-sidebar .app-link:focus { background: color-mix(in srgb, var(--brand-accent) 16%, transparent); border-color: color-mix(in srgb, var(--brand-accent) 45%, transparent); } /* Pills */ body[data-menu-style="pills"] .app-sidebar .app-link { display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent); background: transparent; font-weight: 700; } /* Main content */ .app-content { flex: 1 1 auto; padding: 24px; min-width: 0; } .app-content h1, .app-content h2, .app-content h3 { margin-top: 4px; } /* Content links (scoped; avoid globally styling every everywhere) */ .app-content a { color: var(--brand-accent); } .app-content a:hover { color: var(--brand-primary); } /* Focus outlines */ .app-link:focus-visible, .app-brand:focus-visible, .app-topbar-right .btn:focus-visible { outline: 2px solid var(--cal-today-ring); outline-offset: 2px; border-radius: 8px; } /* Home shell button spacing */ #home-topbar .btn + .btn { margin-left: .5rem; } /* ========================================================= Navbar (Bootstrap) ========================================================= */ .navbar { background: var(--brand-navbar-bg, var(--brand-bg)) !important; color: var(--brand-navbar-text, var(--brand-text)) !important; align-items: center; padding: .25rem 0; border-bottom: 1px solid rgba(0,0,0,.06) !important; } .navbar .navbar-brand span, .navbar .nav-link, .navbar .btn-outline-secondary { color: var(--brand-navbar-text, var(--brand-text)) !important; } .navbar .btn-outline-secondary { border-color: rgba(0,0,0,.35); } .navbar .brand-logo { height: 28px; filter: drop-shadow(0 0 2px rgba(0,0,0,.35)); } .navbar .brand-logo-large { height: 100px; width: auto; display: block; vertical-align: middle; } @media (max-width: 768px) { .navbar .brand-logo-large { height: 40px; } } /* Buttons */ .btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-primary-contrast); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 992px) { .app-sidebar { width: 200px; flex-basis: 200px; } } /* Optional: sidebar becomes a top bar on phones */ @media (max-width: 768px) { .app-body { flex-direction: column; } .app-sidebar { order: 0; width: 100%; flex-basis: auto; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.06); display: flex; justify-content: center; align-items: center; gap: .75rem; padding: .5rem 0; } .app-sidebar > nav { display: flex !important; flex-direction: row !important; justify-content: center; align-items: center; gap: 1rem; } .app-sidebar .app-link { display: inline-flex; align-items: center; padding: .25rem .75rem; margin: 0; border-radius: 4px; white-space: nowrap; font-size: .9rem; color: var(--brand-accent) !important; } .app-sidebar .app-link:hover, .app-sidebar .app-link:focus { background: rgba(255,255,255,0.1); } .app-content { padding: 1rem; } } /* Hide sidebar when collapsed (hotkey) */ .app-shell.sidebar-collapsed .app-sidebar { display: none !important; } .app-shell.sidebar-collapsed .app-content { width: 100%; padding-left: 1rem; } /* ========================================================= Forms & cards tweaks ========================================================= */ .card-body .form-label { font-size: .85rem; } .card-body .form-select-sm, .card-body .form-control-sm { min-height: calc(1.5em + .5rem + 2px); } @media (max-width: 768px) { .card-body form.row { flex-direction: column; } } /* ========================================================= Workspace / Tabs (GigBroker) ========================================================= */ .gb-workspace-card { height: calc(100dvh - var(--topbar-current, 56px) - 2rem); display: flex; } .gb-workspace-card > * { flex: 1 1 auto; min-height: 0; } .gb-tabs-header { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.85), #fff); padding: .25rem .5rem 0 .5rem; } .gb-tabs-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; } .gb-tabs-track { display: flex; align-items: flex-end; gap: .25rem; overflow: auto hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; flex: 1 1 auto; padding-bottom: .25rem; } .gb-tab { --tab-bg: #f5f7fb; --tab-fg: #334155; --tab-border: #e5e7eb; --tab-active-bg: #fff; --tab-active-fg: #0f172a; --tab-indicator: var(--brand-accent); position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--tab-bg); color: var(--tab-fg); border: 1px solid var(--tab-border); border-bottom-color: transparent; border-radius: .5rem .5rem 0 0; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; box-shadow: inset 0 -1px 0 rgba(0,0,0,.02); } .gb-tab:hover { background: #eef2f7; } .gb-tab.active { background: var(--tab-active-bg); color: var(--tab-active-fg); border-color: var(--tab-border); border-bottom-color: var(--tab-active-bg); } .gb-tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--tab-indicator); box-shadow: 0 1px 0 rgba(0,0,0,.04); } .gb-tab-icon { font-size: .9rem; opacity: .75; } .gb-tab-title { font-weight: 600; letter-spacing: .01em; } .gb-tab-close { margin-left: .15rem; width: 1rem; height: 1rem; line-height: 1rem; text-align: center; border-radius: .25rem; font-weight: 700; opacity: .5; display: inline-flex; align-items: center; justify-content: center; } .gb-tab-close:hover { background: rgba(0,0,0,.06); opacity: 1; } .gb-tabs-body { background: #fff; padding: 1rem; } /* ========================================================= Calendar — shared styles ========================================================= */ .gb-cal { color: var(--cal-fg); } .gb-cal-toolbar { background: var(--cal-toolbar-bg); color: var(--cal-toolbar-fg); border-bottom: 1px solid var(--cal-border); padding-bottom: .25rem; } /* Month grid */ .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: .5rem; } .cal-cell { background: var(--cal-cell-bg); color: var(--cal-fg); border: 1px solid var(--cal-border); border-radius: .5rem; min-height: 7rem; padding: .35rem; cursor: pointer; transition: background .12s ease, box-shadow .12s ease; } .cal-cell:hover { background: var(--cal-hover); } .cal-cell.muted { background: var(--cal-cell-muted-bg); color: var(--cal-muted-fg); } .cal-cell-head { display: flex; justify-content: flex-end; align-items: center; font-weight: 600; color: var(--cal-fg); } .cal-cell[data-today="1"] { box-shadow: 0 0 0 2px var(--cal-today-ring) inset; border-color: var(--cal-today-ring); } .cal-event-placeholder { height: 1.1rem; } /* Week list */ .week-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: .5rem; } .week-day { border: 1px solid var(--cal-border); border-radius: .5rem; background: var(--cal-cell-bg); color: var(--cal-fg); min-height: 8rem; padding: .5rem; transition: background .12s ease, box-shadow .12s ease; } .week-day:hover { background: var(--cal-hover); } .week-head { font-weight: 600; margin-bottom: .35rem; color: var(--cal-fg); } /* DayView */ .day-frame { position: relative; border: 1px solid var(--cal-border); border-radius: 6px; overflow: hidden; background: var(--cal-bg); } .time-gutter { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; background: #fff; z-index: 2; } .time-cell { text-align: right; padding-right: 8px; font-size: .85rem; color: var(--muted); } .lane-scroller { margin-left: 64px; overflow-x: scroll; overflow-y: hidden; touch-action: pan-x; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable both-edges; overscroll-behavior-x: contain; overscroll-behavior-y: auto; cursor: ew-resize; } @media (pointer: coarse) { .lane-scroller { cursor: default; } } .lane-canvas { position: relative; } .grid-row, .grid-half { position: absolute; left: 0; height: 0; } .grid-row { border-top: 1px solid var(--cal-border); } .grid-half { border-top: 1px dashed #f0f0f0; } .hour-hotspot { position: absolute; left: 0; } /* Default event bar styling uses tenant tokens (status colors still override in-line) */ .bar { position: absolute; border-radius: 6px; background: color-mix(in srgb, var(--brand-accent) 20%, transparent); border-left: 4px solid var(--brand-accent); padding: 4px 6px; cursor: pointer; } .bar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lane-canvas, .grid-row, .grid-half, .hour-hotspot, .bar { touch-action: pan-x; } /* Agenda */ .agenda-view .agenda-day[data-today="1"] .agenda-date { color: var(--brand-accent); } .agenda-pill { border-radius: 10px; padding: 8px 12px; color: #fff; background: var(--brand-accent); } /* Keep identity cards readable on light surfaces */ .identity-surface .card, .identity-surface .card * { color: #243036; } .identity-surface .card .form-control { background-color: #ffffff; color: #243036; border-color: rgba(0,0,0,.2); } .identity-surface .card .form-label, .identity-surface .card .form-text, .identity-surface .card h1, .identity-surface .card h2, .identity-surface .card h3 { color: #243036; } /* ========================================================= Forms & control width helpers ========================================================= */ .select-half { width: 50% !important; display: inline-block !important; } .select-clamp { width: clamp(12rem, 50%, 22rem) !important; display: inline-block !important; } .w-14rem-inline { width: 14rem !important; display: inline-block !important; } .form-select.select-half, .form-select.select-clamp, .form-select.w-14rem-inline { display: inline-block !important; } #Input_EventType.form-select, #Input_Status.form-select { width: clamp(12rem, 50%, 22rem) !important; display: inline-block !important; } /* Tenant-branded nav-tabs */ .nav-tabs { border-bottom: 2px solid var(--brand-border); } .nav-tabs .nav-link { color: var(--brand-text); background-color: var(--brand-tab-bg); border: 1px solid transparent; border-top-left-radius: .375rem; border-top-right-radius: .375rem; margin-right: .25rem; transition: all .15s ease; } .nav-tabs .nav-link:hover { color: var(--brand-primary); background-color: var(--brand-tab-hover-bg); border-color: var(--brand-accent); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--sidebar-active-contrast); background-color: var(--sidebar-active-bg); border-color: var(--sidebar-active-bg); border-bottom-color: var(--sidebar-active-bg); font-weight: 600; } .nav-tabs .nav-link.disabled { color: #adb5bd; background-color: var(--brand-tab-disabled-bg); border-color: transparent; opacity: .6; } /* Word wrapping for calendar pills */ .bar-text, .week-body .cal-event .small { white-space: normal; word-break: break-word; } /* Compact event header (avoid hard-coded bootstrap blue) */ .gb-ev-title { display: flex; align-items: baseline; gap: .35rem; font-size: 1rem; line-height: 1.2; margin: 0; } .gb-ev-label { font-weight: 600; color: var(--brand-text); } .gb-ev-code { font-weight: 600; color: color-mix(in srgb, var(--brand-text) 75%, transparent); } .gb-ev-name { font-weight: 700; color: var(--brand-accent); min-width: 0; max-width: 100%; } .gb-ev-when { font-size: .95rem; font-weight: 500; color: color-mix(in srgb, var(--brand-text) 55%, transparent); margin-top: .15rem; line-height: 1.2; }