/* ========================================================================== Greenpeace UI polish layer — cohesive refinements across the whole app. Loaded LAST in so it refines the existing green theme without replacing it. Bootstrap 5.3 + data-bs-theme aware. Mobile-first. ========================================================================== */ :root { /* refined neutrals + tokens layered onto the existing --primary-green etc. */ --gp-radius-sm: .375rem; --gp-radius: .625rem; --gp-radius-lg: 1rem; --gp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --gp-shadow: 0 2px 8px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06); --gp-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); --gp-border: #e7eaee; --gp-muted: #6b7280; --gp-ring: rgba(46, 170, 71, .25); --gp-transition: 160ms cubic-bezier(.4, 0, .2, 1); } [data-bs-theme="dark"] { --gp-border: #2b3038; --gp-muted: #9aa4b2; --gp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --gp-shadow: 0 2px 10px rgba(0, 0, 0, .35); --gp-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5); --gp-ring: rgba(46, 170, 71, .35); } /* ---- Cards: consistent radius, soft shadow, gentle hover lift ---- */ .card { border: 1px solid var(--gp-border); border-radius: var(--gp-radius); box-shadow: var(--gp-shadow-sm); transition: box-shadow var(--gp-transition), transform var(--gp-transition); } .card:hover { box-shadow: var(--gp-shadow); } .card .card-header { background: transparent; border-bottom: 1px solid var(--gp-border); font-weight: 600; padding: .85rem 1.1rem; } .card .card-body { padding: 1.1rem; } .card.shadow-sm, .card.shadow { box-shadow: var(--gp-shadow) !important; } /* dashboard stat cards lift a touch on hover */ .card.stat-card:hover, .card[class*="border-"]:hover { transform: translateY(-2px); } /* ---- Buttons: consistent radius, smooth states, real focus ring ---- */ .btn { border-radius: var(--gp-radius-sm); font-weight: 500; transition: background-color var(--gp-transition), border-color var(--gp-transition), box-shadow var(--gp-transition), transform var(--gp-transition); } .btn:active { transform: translateY(1px); } .btn:focus-visible { box-shadow: 0 0 0 .25rem var(--gp-ring) !important; outline: none; } .btn-sm { border-radius: var(--gp-radius-sm); } .btn-lg { border-radius: var(--gp-radius); } /* ---- Forms: green focus ring, consistent radius ---- */ .form-control, .form-select { border-radius: var(--gp-radius-sm); border-color: var(--gp-border); transition: border-color var(--gp-transition), box-shadow var(--gp-transition); } .form-control:focus, .form-select:focus { border-color: var(--primary-green); box-shadow: 0 0 0 .2rem var(--gp-ring); } .input-group-text { border-color: var(--gp-border); } /* ---- Tables: clean header, comfy rows, hover, rounded container ---- */ .table { --bs-table-hover-bg: rgba(46, 170, 71, .05); } .table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gp-muted); font-weight: 600; border-bottom: 2px solid var(--gp-border); white-space: nowrap; } .table tbody td { vertical-align: middle; } .table-responsive { border-radius: var(--gp-radius); } /* sticky header for tall tables inside a scroll container */ .table-responsive[style*="max-height"] thead th, .table-sticky thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); } /* ---- Badges / pills ---- */ .badge { font-weight: 600; border-radius: 999px; padding: .35em .65em; } /* ---- Navbar: cleaner active + hover ---- */ .navbar .nav-link { border-radius: var(--gp-radius-sm); transition: background-color var(--gp-transition); } .navbar .nav-link.active { font-weight: 600; } .navbar .nav-link:hover { background-color: rgba(46, 170, 71, .08); } /* ---- Dropdowns / modals: soft shadow + radius ---- */ .dropdown-menu { border: 1px solid var(--gp-border); border-radius: var(--gp-radius); box-shadow: var(--gp-shadow); } .dropdown-item { border-radius: var(--gp-radius-sm); } .modal-content { border: none; border-radius: var(--gp-radius-lg); box-shadow: var(--gp-shadow-lg); } /* ---- Alerts: softer, rounded ---- */ .alert { border: 1px solid transparent; border-radius: var(--gp-radius); } /* ---- Empty states: center + muted ---- */ .empty-state, .no-data { color: var(--gp-muted); text-align: center; padding: 2rem 1rem; } /* ---- Accessible focus everywhere ---- */ a:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible { outline: 2px solid var(--primary-green); outline-offset: 2px; border-radius: var(--gp-radius-sm); } /* ========================================================================== Dark mode refinements (the bespoke greens read poorly on dark otherwise) ========================================================================== */ [data-bs-theme="dark"] .card { background-color: #1a1d22; border-color: var(--gp-border); } [data-bs-theme="dark"] .card .card-header { border-bottom-color: var(--gp-border); } [data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(46, 170, 71, .1); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #11141a; border-color: var(--gp-border); } [data-bs-theme="dark"] .text-muted { color: var(--gp-muted) !important; } /* ========================================================================== Mobile / responsive (agents on tablets + phones) ========================================================================== */ @media (max-width: 768px) { /* comfortable touch targets */ .btn, .nav-link, .dropdown-item, .page-link { min-height: 42px; display: inline-flex; align-items: center; } .btn-sm { min-height: 36px; } /* tables never blow out the viewport */ .table-responsive { -webkit-overflow-scrolling: touch; } /* tighten card padding on small screens */ .card .card-body { padding: .9rem; } .container, .container-fluid { padding-left: .85rem; padding-right: .85rem; } /* stack toolbars/filter rows */ .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; } /* full-width primary actions read better on phones */ .btn-block-sm { width: 100%; } h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.15rem; } } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { .card, .btn, .form-control, .form-select, .navbar .nav-link { transition: none; } .card:hover, .btn:active { transform: none; } } /* ========================================================================== Agent status indicator (dialer) — always-obvious state at a glance ========================================================================== */ .gp-agent-status { font-size: .95rem; letter-spacing: .01em; box-shadow: var(--gp-shadow-sm); transition: background-color var(--gp-transition); } .gp-agent-status .bi { font-size: 1.1rem; } /* subtle blink on in-progress icons */ .gp-pulse { animation: gp-pulse 1.4s ease-in-out infinite; } @keyframes gp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } /* the "On Call" state gets an expanding ring so it's unmistakable */ .gp-status-oncall { animation: gp-ring 1.8s ease-out infinite; } @keyframes gp-ring { 0% { box-shadow: 0 0 0 0 rgba(40,167,69,.5); } 70% { box-shadow: 0 0 0 10px rgba(40,167,69,0); } 100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); } } @media (prefers-reduced-motion: reduce) { .gp-pulse, .gp-status-oncall { animation: none; } } /* ========================================================================== Fast disposition grid + "what to do next" hint ========================================================================== */ .gp-quick-disp { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; } @media (max-width: 576px) { .gp-quick-disp { grid-template-columns: repeat(2, 1fr); } } .gp-quick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .65rem .4rem; font-weight: 600; font-size: .8rem; min-height: 68px; line-height: 1.1; text-align: center; } .gp-quick-btn .bi { font-size: 1.4rem; } .gp-quick-btn:active { transform: translateY(1px); } .gp-next-hint { background: rgba(46, 170, 71, .07); border-left: 3px solid var(--primary-green); border-radius: var(--gp-radius-sm); padding: .5rem .65rem; line-height: 1.3; } [data-bs-theme="dark"] .gp-next-hint { background: rgba(46, 170, 71, .12); } /* ========================================================================== Header sticky + footer pinned to the bottom (no mid-page float on short pages) ========================================================================== */ body { min-height: 100vh; display: flex; flex-direction: column; } body > nav.navbar { position: sticky; top: 0; z-index: 1030; } body > main { flex: 1 0 auto; } body > footer.footer { flex-shrink: 0; margin-top: auto; } /* override the 3rem; pin to bottom */ /* lighter footer on phones */ @media (max-width: 768px) { body > footer.footer { padding: 1.25rem 0; } } /* keep the sticky nav crisp over scrolled content */ body > nav.navbar { backdrop-filter: saturate(180%) blur(6px); } [data-bs-theme="dark"] body > nav.navbar { background-color: rgba(26,29,34,.92) !important; } /* primary action emphasis + keyboard-shortcut badges */ .gp-primary-action { font-weight: 700; box-shadow: 0 2px 8px rgba(46,170,71,.3); } .gp-primary-action:not(:disabled):hover { box-shadow: 0 4px 14px rgba(46,170,71,.4); } .gp-quick-btn { position: relative; } .gp-key-badge { position: absolute; top: 3px; right: 4px; font-size: .58rem; font-weight: 700; line-height: 1; background: rgba(0,0,0,.12); border-radius: 4px; padding: 1px 4px; } [data-bs-theme="dark"] .gp-key-badge { background: rgba(255,255,255,.15); } /* ========================================================================== MODERN SIDEBAR CONSOLE SHELL (CallPro-style, Greenpeace green, light) ========================================================================== */ :root { --gp-sidebar-w: 256px; --gp-green: #2eaa47; --gp-green-d: #1d703e; --gp-bg: #f4f7fb; } [data-bs-theme="dark"] { --gp-bg: #0c0e12; } body { min-height: 100vh; display: flex; flex-direction: column; background: var(--gp-bg); } .gp-shell { flex: 1; display: grid; grid-template-columns: var(--gp-sidebar-w) 1fr; min-height: 100vh; } /* ---- Sidebar ---- */ .gp-sidebar { background: linear-gradient(180deg, #2eaa47, #16602f); color: #fff; padding: 18px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .gp-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; padding: 6px 8px 22px; } .gp-brand-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 1.3rem; flex: none; } .gp-brand-text { font-weight: 800; font-size: 1.08rem; line-height: 1.1; } .gp-brand-text small { display: block; font-weight: 500; font-size: .72rem; opacity: .8; } .gp-nav { display: flex; flex-direction: column; gap: 4px; } .gp-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: rgba(255,255,255,.88); text-decoration: none; font-weight: 600; font-size: .92rem; transition: background .15s, color .15s; } .gp-nav-link .bi { font-size: 1.15rem; width: 22px; text-align: center; flex: none; } .gp-nav-link:hover { background: rgba(255,255,255,.13); color: #fff; } .gp-nav-link.active { background: #fff; color: var(--gp-green-d); box-shadow: 0 4px 12px rgba(0,0,0,.15); } .gp-nav-sep { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6; padding: 16px 14px 6px; } .gp-sidebar-foot { margin-top: auto; padding-top: 16px; } .gp-side-status { display: flex; align-items: center; gap: 8px; font-size: .85rem; padding: 11px 14px; background: rgba(255,255,255,.1); border-radius: 12px; } .gp-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.3); flex: none; } /* ---- Main column ---- */ .gp-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .gp-topbar { display: flex; align-items: center; gap: 16px; padding: 13px 22px; background: var(--bs-body-bg); border-bottom: 1px solid var(--gp-border); position: sticky; top: 0; z-index: 1020; } .gp-burger { display: inline-flex; align-items: center; border: none; background: none; font-size: 1.4rem; color: inherit; padding: 4px 9px; cursor: pointer; border-radius: 9px; } .gp-burger:hover { background: rgba(15,23,42,.06); } .gp-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; background: var(--gp-bg); border: 1px solid var(--gp-border); border-radius: 12px; padding: 10px 16px; color: var(--gp-muted); cursor: text; } .gp-search input { border: none; background: none; outline: none; flex: 1; color: var(--bs-body-color); font-size: .92rem; } .gp-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .gp-icon-btn { border: none; background: var(--gp-bg); width: 42px; height: 42px; border-radius: 12px; color: inherit; font-size: 1.05rem; } .gp-user { display: flex; align-items: center; gap: 10px; border: none; background: var(--gp-bg); border-radius: 12px; padding: 6px 12px 6px 6px; color: inherit; font-weight: 600; } .gp-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gp-green); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; } .gp-th-light { display: none; } [data-bs-theme="dark"] .gp-th-dark { display: none; } [data-bs-theme="dark"] .gp-th-light { display: inline; } /* ---- Content area (full-width app feel) ---- */ .gp-main > main { flex: 1 0 auto; padding: 22px; } .gp-main > main > .container, .gp-main > main > .container-md, .gp-main > main > .container-lg { max-width: 100%; } .gp-main > footer.footer { margin-top: auto; } /* ---- Responsive: off-canvas sidebar ---- */ @media (max-width: 992px) { .gp-shell { grid-template-columns: 1fr; } .gp-sidebar { position: fixed; left: 0; top: 0; width: var(--gp-sidebar-w); z-index: 1050; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--gp-shadow-lg); } .gp-sidebar.open { transform: translateX(0); } .gp-burger { display: block; } .gp-main > main { padding: 16px; } } /* ========================================================================== Dialer agent workspace — 3-col (contact | call+script | performance) ========================================================================== */ /* 2-column workspace: wide MAIN (dial + script) + context SIDEBAR (contact + session + coach). No third contact-only column, so there is no big empty column when idle. */ .gp-dialer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: start; } @media (max-width: 992px) { .gp-dialer-grid { grid-template-columns: 1fr; } } /* Even vertical rhythm: each column stacks its cards with ONE consistent gap (kills the mixed mt-3/mb-3 that left uneven blank spaces between cards). */ .gp-col { display: flex; flex-direction: column; gap: 16px; } .gp-col > .card { margin-top: 0 !important; margin-bottom: 0 !important; } /* Script panel — readable, prominent (it's what the agent reads out) */ .gp-script-card { border-left: 4px solid var(--gp-green); } .gp-script-card .card-body { padding: 1rem 1.15rem; } .gp-script-body { font-size: 1.02rem; line-height: 1.65; color: var(--bs-body-color); } /* Performance metrics */ .gp-perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .gp-metric { background: var(--gp-bg); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 2px; } .gp-metric-val { font-size: 1.6rem; font-weight: 800; line-height: 1.05; } .gp-metric-lbl { font-size: .78rem; color: var(--gp-muted); } [data-bs-theme="dark"] .gp-metric { background: rgba(255,255,255,.04); } /* ========================================================================== Agent dashboard — clean stat cards (white card + colour icon + big number) ========================================================================== */ .gp-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; } @media (max-width: 1200px) { .gp-stats-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 576px) { .gp-stats-row { grid-template-columns: repeat(2, 1fr); } } .gp-stat-card { background: var(--bs-body-bg); border: 1px solid var(--gp-border); border-radius: var(--gp-radius); padding: 16px; display: flex; gap: 14px; align-items: center; box-shadow: var(--gp-shadow-sm); transition: box-shadow .15s, transform .15s; } .gp-stat-card:hover { box-shadow: var(--gp-shadow); transform: translateY(-2px); } .gp-stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); flex: none; } .gp-stat-val { font-size: 1.65rem; font-weight: 800; line-height: 1.05; } .gp-stat-lbl { font-size: .82rem; color: var(--gp-muted); font-weight: 600; } .gp-stat-sub { font-size: .72rem; color: var(--gp-muted); } .gp-rank-banner { border-left: 4px solid var(--gp-green); } .gp-rank-medal { font-size: 2.2rem; line-height: 1; } /* ========================================================================== Command palette (⌘K) + topbar search-trigger ========================================================================== */ .gp-search { cursor: pointer; } .gp-search .gp-search-ph { flex: 1; text-align: left; color: var(--gp-muted); font-size: .92rem; } .gp-kbd, .gp-cmdk kbd { font-family: inherit; font-size: .72rem; font-weight: 600; color: var(--gp-muted); background: var(--bs-body-bg); border: 1px solid var(--gp-border); border-radius: 6px; padding: 1px 6px; line-height: 1.5; } @media (max-width: 768px) { .gp-search-ph { display: none; } } .gp-cmdk { position: fixed; inset: 0; z-index: 1080; display: grid; place-items: start center; padding-top: 12vh; } .gp-cmdk[hidden] { display: none; } .gp-cmdk-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); } .gp-cmdk-panel { position: relative; width: min(620px, 92vw); background: var(--bs-body-bg); border: 1px solid var(--gp-border); border-radius: 16px; box-shadow: var(--gp-shadow-lg); overflow: hidden; } .gp-cmdk-input { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--gp-border); } .gp-cmdk-input i { color: var(--gp-muted); font-size: 1.1rem; } .gp-cmdk-input input { flex: 1; border: 0; outline: 0; background: none; font-size: 1.05rem; color: var(--bs-body-color); } .gp-cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow-y: auto; } .gp-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; } .gp-cmdk-item i { color: var(--primary-green); width: 20px; text-align: center; flex: none; } .gp-cmdk-label { flex: 1; font-weight: 500; } .gp-cmdk-group { font-size: .7rem; color: var(--gp-muted); text-transform: uppercase; letter-spacing: .04em; } .gp-cmdk-item.active, .gp-cmdk-item:hover { background: rgba(46,170,71,.1); } .gp-cmdk-empty { padding: 24px; text-align: center; color: var(--gp-muted); } .gp-cmdk-foot { display: flex; gap: 6px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--gp-border); font-size: .76rem; color: var(--gp-muted); } /* ========================================================================== Clean footer (overrides the old dark .footer) + component kit ========================================================================== */ .gp-footer { background: transparent !important; color: var(--gp-muted) !important; padding: 0 !important; margin-top: auto; border-top: 1px solid var(--gp-border); } .gp-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; font-size: .82rem; } .gp-footer-brand { color: var(--gp-muted); } .gp-footer-links { display: flex; gap: 18px; flex-wrap: wrap; } .gp-footer-links a { color: var(--gp-muted); text-decoration: none; transition: color .15s; } .gp-footer-links a:hover { color: var(--primary-green); } /* topbar: subtle elevation so it reads as the header band */ .gp-topbar { box-shadow: 0 1px 0 var(--gp-border); } /* */ .gp-page-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(46,170,71,.12); color: var(--primary-green); display: grid; place-items: center; font-size: 1.25rem; flex: none; } /* */ .gp-empty-icon { font-size: 2.6rem; color: var(--gp-border); line-height: 1; } [data-bs-theme="dark"] .gp-empty-icon { color: #3a4150; } /* kit alias inherits .card polish */ .gp-kit-card { } /* ========================================================================== Reports console — all reports on one page (sub-nav + embedded panel) ========================================================================== */ .gp-reports-console { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; } @media (max-width: 768px) { .gp-reports-console { grid-template-columns: 1fr; } } .gp-reports-nav { background: var(--bs-body-bg); border: 1px solid var(--gp-border); border-radius: var(--gp-radius); padding: 8px; position: sticky; top: 80px; box-shadow: var(--gp-shadow-sm); } .gp-reports-group { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gp-muted); font-weight: 700; padding: 12px 12px 4px; } .gp-reports-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--bs-body-color); text-decoration: none; font-size: .9rem; font-weight: 500; transition: background .12s; } .gp-reports-link i { color: var(--gp-muted); width: 18px; text-align: center; flex: none; } .gp-reports-link:hover { background: rgba(46,170,71,.08); } .gp-reports-link.active { background: var(--primary-green); color: #fff; } .gp-reports-link.active i { color: #fff; } .gp-reports-panel { background: var(--bs-body-bg); border: 1px solid var(--gp-border); border-radius: var(--gp-radius); overflow: hidden; min-height: 70vh; box-shadow: var(--gp-shadow-sm); } .gp-reports-panel iframe { width: 100%; height: 80vh; border: 0; display: block; background: var(--gp-bg); } .gp-embed-main { padding: 18px; } /* ========================================================================== FullCalendar — clean, console-consistent (kills the raw blue-underline look) ========================================================================== */ .fc { font-size: .9rem; } .fc .fc-toolbar-title { font-size: 1.2rem; font-weight: 700; } .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; } /* buttons */ .fc .fc-button { background: var(--bs-body-bg); border: 1px solid var(--gp-border); color: var(--bs-body-color); font-weight: 600; text-transform: capitalize; box-shadow: none; padding: .35rem .7rem; border-radius: var(--gp-radius-sm); } .fc .fc-button:hover { background: var(--gp-bg); color: var(--bs-body-color); } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--primary-green); border-color: var(--primary-green); color: #fff; } .fc .fc-button:focus { box-shadow: 0 0 0 .2rem var(--gp-ring); } .fc .fc-button-group > .fc-button { border-radius: 0; } .fc .fc-button-group > .fc-button:first-child { border-top-left-radius: var(--gp-radius-sm); border-bottom-left-radius: var(--gp-radius-sm); } .fc .fc-button-group > .fc-button:last-child { border-top-right-radius: var(--gp-radius-sm); border-bottom-right-radius: var(--gp-radius-sm); } /* day-of-week header — muted caps, no underline */ .fc .fc-col-header-cell { background: var(--gp-bg); border-color: var(--gp-border); } .fc .fc-col-header-cell-cushion { color: var(--gp-muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; font-weight: 700; text-decoration: none; padding: 8px; } /* date numbers — kill the blue underline links */ .fc .fc-daygrid-day-number { color: var(--bs-body-color); text-decoration: none; font-weight: 500; padding: 6px 8px; } .fc .fc-daygrid-day-number:hover { color: var(--primary-green); } .fc .fc-day-other .fc-daygrid-day-number { color: var(--gp-muted); opacity: .55; } /* grid + cell hover */ .fc .fc-scrollgrid, .fc td, .fc th { border-color: var(--gp-border) !important; } .fc .fc-scrollgrid { border-radius: var(--gp-radius); overflow: hidden; } .fc .fc-daygrid-day { transition: background .12s; } .fc .fc-daygrid-day:hover { background: rgba(46,170,71,.05); } /* today */ .fc .fc-day-today { background: rgba(46,170,71,.08) !important; } .fc .fc-day-today .fc-daygrid-day-number { color: var(--primary-green); font-weight: 800; } /* events as green pills */ .fc .fc-event, .fc .fc-daygrid-event { background: var(--primary-green); border: none; border-radius: 6px; padding: 1px 6px; font-size: .75rem; font-weight: 600; color: #fff; } .fc .fc-event:hover { filter: brightness(.94); } .fc .fc-daygrid-event-dot { border-color: #fff; } [data-bs-theme="dark"] .fc .fc-col-header-cell { background: rgba(255,255,255,.03); } [data-bs-theme="dark"] .fc .fc-daygrid-day:hover { background: rgba(46,170,71,.1); } /* ========================================================================== FullCalendar — premium polish (circle-today, spacious cells, refined header) ========================================================================== */ .fc .fc-toolbar-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; } /* circular prev/next, pill today */ .fc .fc-prev-button, .fc .fc-next-button { width: 38px; height: 38px; border-radius: 50% !important; padding: 0; display: inline-grid; place-items: center; } .fc .fc-today-button { border-radius: 999px !important; padding: .4rem 1.1rem; } /* spacious month cells */ .fc .fc-daygrid-day-frame { min-height: 96px; } .fc .fc-daygrid-day-top { justify-content: flex-end; } /* date number = circular chip; TODAY = filled green circle (the signature look) */ .fc .fc-daygrid-day-number { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; margin: 5px; padding: 0; font-weight: 600; } .fc .fc-daygrid-day-number:hover { background: rgba(46,170,71,.12); color: var(--primary-green); } .fc .fc-day-today { background: transparent !important; } .fc .fc-day-today .fc-daygrid-day-number { background: var(--primary-green); color: #fff; font-weight: 800; box-shadow: 0 2px 8px rgba(46,170,71,.45); } /* rounded grid container */ .fc .fc-scrollgrid { border-radius: 14px; } /* events as soft green pills */ .fc .fc-daygrid-event { background: var(--primary-green); color: #fff; border: none; border-radius: 8px; padding: 2px 8px; margin: 1px 5px; font-weight: 600; box-shadow: var(--gp-shadow-sm); } .fc .fc-daygrid-event:hover { filter: brightness(.94); } .fc .fc-h-event .fc-event-main { color: #fff; } /* subtle weekend tint */ .fc .fc-day-sat, .fc .fc-day-sun { background: rgba(15,23,42,.012); } [data-bs-theme="dark"] .fc .fc-day-sat, [data-bs-theme="dark"] .fc .fc-day-sun { background: rgba(255,255,255,.015); } /* ========================================================================== jpag82-inspired: grid of soft circles (every day a circle, today solid) ========================================================================== */ .fc .fc-daygrid-day-number { background: rgba(46,170,71,.07); } .fc .fc-daygrid-day-number:hover { background: rgba(46,170,71,.2); color: var(--primary-green); } .fc .fc-day-other .fc-daygrid-day-number { background: transparent; } .fc .fc-day-today .fc-daygrid-day-number { background: var(--primary-green) !important; color: #fff !important; } /* weekend circle tints (like jpag82's Sun/Sat) */ .fc .fc-day-sun .fc-daygrid-day-number { background: rgba(245,113,112,.12); } .fc .fc-day-sat .fc-daygrid-day-number { background: rgba(0,160,223,.12); } .fc .fc-day-today.fc-day-sun .fc-daygrid-day-number, .fc .fc-day-today.fc-day-sat .fc-daygrid-day-number { background: var(--primary-green) !important; } /* event = small dot under the number (jpag82 style) for dot-events, pills stay for timed */ .fc .fc-daygrid-day-events { min-height: 0; } /* ========================================================================== Refined buttons — modern, with subtle depth + hover lift ========================================================================== */ .btn { border-radius: 10px; font-weight: 600; padding: .5rem 1.05rem; letter-spacing: .005em; border-width: 1px; transition: transform .12s ease, box-shadow .15s ease, background-color .15s, border-color .15s, color .15s, filter .15s; } .btn-sm { border-radius: 8px; padding: .32rem .78rem; font-size: .82rem; } .btn-lg { border-radius: 12px; padding: .68rem 1.45rem; font-size: 1.02rem; } /* solid colour buttons: soft shadow, lift on hover, press on active */ .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary, .btn-dark { border-color: transparent; box-shadow: 0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.08); } .btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover, .btn-secondary:hover, .btn-dark:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,24,40,.2); filter: brightness(1.03); } .btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16,24,40,.14); } .btn:disabled, .btn.disabled { box-shadow: none; transform: none; filter: none; opacity: .55; } /* outline buttons: crisper border, gentle fill on hover */ .btn[class*="btn-outline-"] { border-width: 1.5px; font-weight: 600; box-shadow: none; } .btn[class*="btn-outline-"]:hover { transform: translateY(-1px); } /* link buttons stay flat */ .btn-link { box-shadow: none; } .btn-link:hover { transform: none; } /* tighten button groups + icon spacing */ .btn .bi { vertical-align: -.08em; } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } } /* ========================================================================== Flattened dashboard shell — outer card transparent so inner cards breathe ========================================================================== */ .gp-flush { background: transparent !important; border: none !important; box-shadow: none !important; margin-bottom: 0 !important; } .gp-flush > .card-header { background: transparent !important; border: none !important; padding: 0 0 1.1rem 0 !important; } .gp-flush > .card-body { padding: 0 !important; } .gp-flush > .card-header .btn { white-space: nowrap; } /* ========================================================================== Active-call panel — CallPro dark "in-call" view (focused accent during a call) ========================================================================== */ .gp-call-panel { background: linear-gradient(150deg, #0b1f3a, #0e2748); border: none; color: #fff; box-shadow: var(--gp-shadow); border-radius: 14px; } .gp-call-panel.is-connected { box-shadow: 0 0 0 1px rgba(74,222,128,.35), var(--gp-shadow); } .gp-call-panel .text-muted { color: rgba(255,255,255,.6) !important; } .gp-call-panel .text-success { color: #4ade80 !important; } .gp-call-panel .text-warning { color: #fbbf24 !important; } .gp-call-panel .fw-bold, .gp-call-panel .small { color: #fff; } .gp-call-panel #call-duration-display { font-size: 1rem; font-weight: 700; padding: .25rem .65rem; border-radius: 8px; } .gp-call-panel.is-connected #call-duration-display { background: #16a34a !important; color: #fff !important; } .gp-call-panel.is-ringing #call-duration-display { background: #f59e0b !important; color: #0b1f3a !important; } .gp-call-panel.is-connected .bi-telephone-outbound-fill { animation: gp-pulse 1.4s ease-in-out infinite; } /* ========================================================================== Refined data tables — comfier rows, soft zebra, clean hover, sticky headers ========================================================================== */ .table > :not(caption) > * > * { padding: .7rem .85rem; vertical-align: middle; } .table thead th { background: var(--gp-bg); border-bottom: 1.5px solid var(--gp-border); } .table tbody tr { transition: background .12s; } .table tbody tr:hover { background: rgba(46,170,71,.05); } /* soft zebra for plain tables inside cards (skip ones already striped) */ .card .table:not(.table-striped):not(.table-borderless) tbody tr:nth-child(even) > * { background: rgba(15,23,42,.018); } [data-bs-theme="dark"] .card .table:not(.table-striped) tbody tr:nth-child(even) > * { background: rgba(255,255,255,.02); } /* sticky header whenever the table scrolls in a responsive container */ .table-responsive thead th { position: sticky; top: 0; z-index: 1; } /* tidy the rounded container + remove the harsh outer border doubling */ .table-responsive { border: 1px solid var(--gp-border); border-radius: var(--gp-radius); } .table-responsive > .table { margin-bottom: 0; } .table-responsive > .table > :not(caption) > *:last-child > * { border-bottom: 0; } /* ========================================================================== Refined form controls — match the button polish (green focus, clean radius) ========================================================================== */ .form-control, .form-select { border-radius: 9px; border-color: var(--gp-border, #e2e8f0); padding: .5rem .8rem; transition: border-color .15s, box-shadow .15s; } .form-control:focus, .form-select:focus { border-color: var(--primary-green, #2eaa47); box-shadow: 0 0 0 3px rgba(46,170,71,.15); } .form-control::placeholder { color: #9aa4b2; opacity: 1; } .form-control-sm, .form-select-sm { border-radius: 7px; padding: .3rem .6rem; } .form-control-lg, .form-select-lg { border-radius: 11px; } .form-label { font-weight: 600; font-size: .84rem; color: #475569; margin-bottom: .35rem; } .input-group-text { border-radius: 9px; background: var(--gp-bg, #f4f7fb); border-color: var(--gp-border, #e2e8f0); color: #64748b; } .input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .form-check-input:checked { background-color: var(--primary-green, #2eaa47); border-color: var(--primary-green, #2eaa47); } .form-check-input:focus { border-color: var(--primary-green, #2eaa47); box-shadow: 0 0 0 3px rgba(46,170,71,.15); } .form-text { color: #94a3b8; } .was-validated .form-control:invalid, .form-control.is-invalid { border-color: #ef4444; } [data-bs-theme="dark"] .form-label { color: #cbd5e1; } [data-bs-theme="dark"] .input-group-text { background: rgba(255,255,255,.04); color: #9aa4b2; } /* ========================================================================== Report standard — filter bar + scope chips (used across all report pages) ========================================================================== */ .gp-filterbar { border: 1px solid var(--gp-border); box-shadow: none; background: var(--bs-body-bg); } .gp-filterbar .form-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; margin-bottom: .25rem; } .gp-report-meta { display: flex; flex-wrap: wrap; gap: .4rem; } .gp-report-meta .badge { font-weight: 500; padding: .4rem .7rem; font-size: .76rem; } /* Reports console — collapsible report list */ .gp-reports-console.nav-collapsed { grid-template-columns: 1fr; } .gp-reports-console.nav-collapsed .gp-reports-nav { display: none; } #gpNavToggle.active { background: var(--gp-green, #2eaa47); color: #fff; border-color: var(--gp-green, #2eaa47); } /* ========================================================================== Desktop collapsible main sidebar (icons-only rail) — toggled by the burger ========================================================================== */ .gp-shell.sidebar-collapsed { --gp-sidebar-w: 74px; } .gp-shell.sidebar-collapsed .gp-brand-text, .gp-shell.sidebar-collapsed .gp-nav-link span, .gp-shell.sidebar-collapsed .gp-nav-sep, .gp-shell.sidebar-collapsed .gp-side-status span:last-child { display: none; } .gp-shell.sidebar-collapsed .gp-nav-link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } .gp-shell.sidebar-collapsed .gp-nav-link .bi { width: auto; } .gp-shell.sidebar-collapsed .gp-brand { justify-content: center; } .gp-shell.sidebar-collapsed .gp-side-status { justify-content: center; } /* ── Duration escalation: nudge agents to wrap up (amber 2:30, red 2:50) ── */ .gp-dur-warn { color: var(--gp-status-paused, #b45309) !important; font-weight: 700; } .gp-dur-crit { color: var(--gp-status-failed, #dc2626) !important; font-weight: 700; animation: gp-dur-pulse 1s ease-in-out infinite; } @keyframes gp-dur-pulse { 50% { opacity: .45; } } /* ── In-call focus mode: collapse the queue while a call / disposition is live ── */ .gp-dialer.gp-in-call .gp-dialer-queue { display: none; } /* ── Campaign switcher progress ── */ .gp-camp-btn { position: relative; padding-bottom: .55rem; } .gp-camp-progress { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.12); overflow: hidden; display: block; } .gp-camp-progress > span { display: block; height: 100%; background: var(--gp-status-live, #2eaa47); } /* ── Coach card ── */ .gp-coach-card .card-header { background: #fffbeb; } /* Full-page responsive modal (Assigned Contacts / My Calls / Call Log) */ .gp-modal-overlay { position: fixed; inset: 0; z-index: 1060; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; } .gp-modal-card { width: min(1400px, 96vw); height: 96vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.35); } .gp-modal-card > .card-body { flex: 1 1 auto; overflow-y: auto; } @media (max-width: 768px) { .gp-modal-overlay { padding: 0; } .gp-modal-card { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; } }