/* ========================================================================== Advargo Agent Portal — Sidebar Theme Restyles the stock Perfex customer-area top navbar into a fixed dark left sidebar (Crizac-style layout), using the Advargo brand indigo. Loaded entirely from this module (see advargo_sub_agents_portal.php, hooked into app_customers_head) — no core theme files are touched. Targets the navbar's existing stock classes (.navbar.navbar-default.header) rather than any custom class, so it keeps working even if core theme files are updated. ========================================================================== */ :root { --advargo-primary: #2e3192; --advargo-primary-light: #4d51c9; --advargo-primary-soft: rgba(46, 49, 146, 0.10); --advargo-sidebar-bg: #14162a; --advargo-sidebar-bg-active: #2e3192; --advargo-sidebar-text: rgba(255, 255, 255, 0.68); --advargo-sidebar-text-active: #ffffff; --advargo-sidebar-width: 260px; --advargo-radius: 12px; } /* ---------- Sidebar shell ---------- */ body.customers nav.navbar.navbar-default.header { margin-bottom: 0; border: 0; border-radius: 0; background: var(--advargo-sidebar-bg); z-index: 1030; } @media (min-width: 768px) { body.customers { padding-top: 0 !important; } body.customers nav.navbar.navbar-default.header { position: fixed; top: 0; left: 0; width: var(--advargo-sidebar-width); height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 0; transition: transform .22s ease; } /* ---------- Collapsible sidebar (roll-up toggle) ---------- Slides the sidebar fully off-screen so the agent gets the whole width of the screen for the page content. Toggled by a small round button injected via JS (see advargo_print_sidebar_toggle_js) that adds/removes this class on - using rather than so the collapsed state can be applied before even exists, avoiding a flash of the expanded sidebar on each page load. */ html.advargo-sidebar-collapsed nav.navbar.navbar-default.header { transform: translateX(-100%); } html.advargo-sidebar-collapsed #wrapper, html.advargo-sidebar-collapsed body.customers .footer { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; } body.customers nav.navbar.navbar-default.header .container { width: 100%; padding: 0; display: flex; flex-direction: column; height: 100%; } body.customers nav.navbar.navbar-default.header .navbar-header { float: none; padding: 22px 20px 16px; } body.customers nav.navbar.navbar-default.header .navbar-collapse { border: 0; box-shadow: none; padding: 0 12px 16px; flex: 1 1 auto; display: flex !important; flex-direction: column; overflow-y: auto; } body.customers nav.navbar.navbar-default.header .navbar-collapse > .nav.navbar-nav { display: flex; flex-direction: column; flex: 1 1 auto; margin: 0; float: none; width: 100%; } body.customers nav.navbar.navbar-default.header .navbar-toggle { display: none; } } /* Logo */ body.customers nav.navbar.navbar-default.header .navbar-brand.logo, body.customers nav.navbar.navbar-default.header .navbar-brand.logo img { height: auto; max-height: 34px; padding: 0; margin: 0 !important; filter: brightness(0) invert(1); } /* CTA menu item, injected via the customers_navigation_start hook */ body.customers nav.navbar.navbar-default.header li.advargo-cta-item { margin: 4px 6px 14px; list-style: none; } body.customers nav.navbar.navbar-default.header li.advargo-cta-item > a { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 8px; padding: 12px 10px !important; border-radius: var(--advargo-radius); background: var(--advargo-primary); color: #fff !important; font-weight: 600; font-size: 12.5px; line-height: 1.2; box-shadow: 0 6px 16px rgba(46, 49, 146, 0.35); transition: background .15s ease, transform .15s ease; } body.customers nav.navbar.navbar-default.header li.advargo-cta-item > a i { flex: 0 0 auto; width: auto !important; font-size: 13px !important; } body.customers nav.navbar.navbar-default.header li.advargo-cta-item > a span { white-space: nowrap; flex: 0 1 auto; } body.customers nav.navbar.navbar-default.header li.advargo-cta-item > a:hover { background: var(--advargo-primary-light); transform: translateY(-1px); } /* Nav items — sized to match the "Add New Application" CTA button above (same padding/font-size/font-weight/radius), just left-aligned instead of centered since these are a list of links, not a single button. */ body.customers nav.navbar.navbar-default.header .nav.navbar-nav > li > a { display: flex; align-items: center; gap: 10px; padding: 12px 10px; margin: 2px 6px; border-radius: var(--advargo-radius); color: var(--advargo-sidebar-text); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: normal; } body.customers nav.navbar.navbar-default.header .nav.navbar-nav > li > a i, body.customers nav.navbar.navbar-default.header .nav.navbar-nav > li > a svg { width: auto; text-align: center; font-size: 13px; flex-shrink: 0; } body.customers nav.navbar.navbar-default.header .nav.navbar-nav > li:not(.advargo-cta-item) > a:hover, body.customers nav.navbar.navbar-default.header .nav.navbar-nav > li:not(.advargo-cta-item) > a:focus { background: rgba(255, 255, 255, 0.06); color: var(--advargo-sidebar-text-active); } body.customers nav.navbar.navbar-default.header .nav.navbar-nav > li.active > a { background: var(--advargo-sidebar-bg-active); color: #fff; box-shadow: 0 4px 12px rgba(46, 49, 146, 0.45); } /* Profile item pinned to the bottom of the sidebar */ @media (min-width: 768px) { body.customers nav.navbar.navbar-default.header .nav.navbar-nav > li.customers-nav-item-profile { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 10px; } } body.customers nav.navbar.navbar-default.header .customers-nav-item-profile > a { padding: 8px 10px; } body.customers nav.navbar.navbar-default.header .customers-nav-item-profile .client-profile-image-small { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); } body.customers nav.navbar.navbar-default.header .customers-nav-item-profile .dropdown-menu { left: 12px; right: 12px; bottom: 100%; top: auto; border-radius: var(--advargo-radius); } /* Mobile toggle */ @media (max-width: 767px) { body.customers nav.navbar.navbar-default.header .navbar-toggle { border-color: rgba(255, 255, 255, 0.3); margin-right: 0; } body.customers nav.navbar.navbar-default.header .navbar-toggle .icon-bar { background: #fff; } body.customers nav.navbar.navbar-default.header .navbar-header { display: flex; align-items: center; padding: 10px 16px; } } /* ---------- Push page content right of the fixed sidebar ---------- */ /* Explicit width (not just margin-left) so the content column never extends past the right edge of the viewport — a plain margin-left next to a width:100% element (which is how core Perfex styles #wrapper) pushes the box 260px past the visible area, forcing an unwanted horizontal scrollbar / "zoom out to see it properly" symptom. */ @media (min-width: 768px) { #wrapper, body.customers .footer { margin-left: var(--advargo-sidebar-width) !important; width: calc(100% - var(--advargo-sidebar-width)) !important; max-width: calc(100% - var(--advargo-sidebar-width)) !important; box-sizing: border-box !important; transition: margin-left .22s ease, width .22s ease, max-width .22s ease; } } /* ---------- Sidebar roll-up toggle button ---------- Small round button pinned to the edge of the sidebar; JS moves it with the sidebar and flips its arrow. Hidden on mobile, where the sidebar is already a slide-out drawer with its own hamburger toggle. */ @media (min-width: 768px) { .advargo-sidebar-toggle { position: fixed; top: 24px; left: calc(var(--advargo-sidebar-width) - 14px); width: 28px; height: 28px; border-radius: 50%; background: var(--advargo-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(20, 22, 42, 0.28); cursor: pointer; z-index: 1031; border: 2px solid #fff; transition: left .22s ease, background .15s ease; } .advargo-sidebar-toggle:hover { background: var(--advargo-primary-light); } .advargo-sidebar-toggle i { font-size: 11px; transition: transform .22s ease; } html.advargo-sidebar-collapsed .advargo-sidebar-toggle { left: 14px; } html.advargo-sidebar-collapsed .advargo-sidebar-toggle i { transform: rotate(180deg); } } @media (max-width: 767px) { .advargo-sidebar-toggle { display: none; } } body.customers, body.customers * { box-sizing: border-box; } body.customers { background: #f4f5fb; } /* ---------- Cards / panels ---------- */ body.customers .panel_s { border-radius: var(--advargo-radius); border: 1px solid #eceefb; box-shadow: 0 2px 10px rgba(20, 22, 42, 0.04); } body.customers .btn-primary, body.customers a.btn-primary { background-color: var(--advargo-primary); border-color: var(--advargo-primary); color: #fff !important; } body.customers .btn-primary:hover, body.customers .btn-primary:focus, body.customers a.btn-primary:hover, body.customers a.btn-primary:focus { background-color: var(--advargo-primary-light); border-color: var(--advargo-primary-light); color: #fff !important; } body.customers .btn-primary i, body.customers a.btn-primary i { color: #fff !important; } /* Plain links (not buttons) use the brand indigo — but this must come AFTER the .btn-primary rules above and NOT win against them, since .btn-primary is also an tag: an indigo link color on an indigo button background made "Create New Application" render as an invisible blank button. The :not() here keeps this rule from ever touching a button-styled link again. */ body.customers a:not(.btn) { color: var(--advargo-primary); } /* ---------- Hide the core "Files" / "Calendar" top submenu — this is an Applications-only portal, agents don't need either. ---------- */ body.customers .customers-top-submenu-files, body.customers .customers-top-submenu-calendar { display: none !important; } /* ---------- Prevent horizontal overflow of the whole page ---------- */ body.customers { overflow-x: hidden; } body.customers #wrapper { max-width: 100%; } /* ---------- Applications Summary stat cards (Crizac-style icon tiles) ---------- */ dl.advargo-stat-grid, .advargo-stat-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 12px !important; list-style: none !important; margin: 0 0 24px !important; padding: 0 !important; } .advargo-stat-grid dt, .advargo-stat-grid dd { margin: 0; } .advargo-stat-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #eceefb !important; border-radius: var(--advargo-radius) !important; padding: 16px !important; transition: box-shadow .15s ease, transform .15s ease; } .advargo-stat-card:hover { box-shadow: 0 8px 20px rgba(20, 22, 42, 0.08); transform: translateY(-2px); } .advargo-stat-card > div:last-child { min-width: 0; } .advargo-stat-card .advargo-stat-label { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .advargo-stat-card .advargo-stat-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--advargo-primary-soft); color: var(--advargo-primary); } .advargo-stat-card .advargo-stat-label { font-size: 12.5px; font-weight: 600; color: #6b6f8a; text-transform: none; } .advargo-stat-card .advargo-stat-value { font-size: 22px; font-weight: 700; color: #14162a; line-height: 1.1; margin-top: 2px; } /* ---------- Tables ---------- */ body.customers .table-projects thead th, body.customers .table-contacts thead th { color: #6b6f8a; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #eceefb; } body.customers .table-projects a { font-weight: 600; } body.customers .table > tbody > tr > td { vertical-align: middle; border-color: #f0f1f9; } body.customers .table-projects .label, body.customers .table-contacts .label { font-weight: 600; padding: 4px 10px; border-radius: 999px; } /* ---------- "Sub Agent" highlight pill ---------- Always-visible marker next to a sub agent/sub user's name (Application History "Created By" column, admin Project Overview "Submitted By" field, and the client-area Sub Users list) - see render_application_submitter_badge() in the module helper. */ body.customers .advargo-subuser-pill { background: var(--advargo-primary-soft); color: var(--advargo-primary); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; } /* ---------- Page header row (heading + primary action) ---------- */ .advargo-history-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .advargo-history-header .btn-primary i { margin-right: 4px; } .advargo-history-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body.customers .advargo-history-header-actions .btn-default { border-radius: 8px; border-color: #e2e4f3; color: #6b6f8a; font-weight: 600; } body.customers .advargo-history-header-actions .btn-default:hover, body.customers .advargo-history-header-actions .btn-default:focus { color: var(--advargo-primary); border-color: var(--advargo-primary); background: var(--advargo-primary-soft); } /* ---------- Filter bar (status dropdown, Uni Finder search) ---------- */ body.customers .advargo-filter-bar { margin-bottom: 16px; } body.customers .advargo-filter-bar .panel-body { padding: 16px 20px; } body.customers .advargo-filter-bar label { font-size: 12px; font-weight: 600; color: #6b6f8a; text-transform: uppercase; letter-spacing: .02em; } .advargo-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .advargo-filter-actions { display: flex; justify-content: flex-end; margin-top: 14px; } body.customers .advargo-uni-finder-form .btn { margin-top: 4px; } /* ---------- DataTables polish ---------- */ body.customers .dataTables_wrapper .dataTables_filter input { border-radius: 8px; border: 1px solid #e2e4f3; padding: 6px 10px; margin-left: 8px; } body.customers .dataTables_wrapper .dataTables_filter, body.customers .dataTables_wrapper .dataTables_length { margin-bottom: 10px; } body.customers .dataTables_wrapper .pagination > li > a, body.customers .dataTables_wrapper .pagination > li > span { border-radius: 8px !important; margin: 0 2px; color: var(--advargo-primary); } body.customers .dataTables_wrapper .pagination > .active > a, body.customers .dataTables_wrapper .pagination > .active > span { background: var(--advargo-primary); border-color: var(--advargo-primary); } /* ---------- Form controls ---------- */ body.customers .form-control { border-radius: 8px; border-color: #e2e4f3; box-shadow: none; } body.customers .form-control:focus { border-color: var(--advargo-primary); box-shadow: 0 0 0 3px var(--advargo-primary-soft); } body.customers .btn { border-radius: 8px; font-weight: 600; } /* ---------- Uni Finder ---------- */ .advargo-uni-card { margin-bottom: 14px; } .advargo-uni-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .advargo-uni-courses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .advargo-uni-course-chip { background: var(--advargo-primary-soft); color: #23255e; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; } .advargo-uf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } body.customers .advargo-uf-badge { background: #f4f5fb; color: #4a4e6b; border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; text-transform: none; } body.customers .advargo-uf-badge-success { background: rgba(34, 197, 94, 0.12); color: #158a45; } body.customers .advargo-uf-badge-accent { background: var(--advargo-primary-soft); color: var(--advargo-primary); } .advargo-uf-moi-field { display: flex; flex-direction: column; justify-content: flex-end; } .advargo-uf-checkbox { padding: 8px 0; } .advargo-uf-checkbox label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #4a4e6b; text-transform: none; cursor: pointer; } .advargo-uf-checkbox input[type="checkbox"] { width: 16px; height: 16px; margin: 0; } /* ========================================================================== Create New Application — multi-step wizard ========================================================================== */ .advargo-app-stepper { display: flex; align-items: center; margin-bottom: 26px; flex-wrap: wrap; gap: 0; } .advargo-app-step-marker { display: flex; align-items: center; gap: 8px; padding: 6px 18px 6px 0; opacity: 0.5; } .advargo-app-step-marker.active, .advargo-app-step-marker.done { opacity: 1; } .advargo-app-step-num { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; background: #eceeF8; color: #4a4e6b; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .advargo-app-step-marker.active .advargo-app-step-num { background: var(--advargo-primary); color: #fff; } .advargo-app-step-marker.done .advargo-app-step-num { background: rgba(34, 197, 94, 0.15); color: #158a45; } .advargo-app-step-label { font-size: 13px; font-weight: 600; color: #4a4e6b; text-transform: none; } .advargo-app-step-marker.active .advargo-app-step-label { color: var(--advargo-primary); } .advargo-app-step-heading { font-size: 14px; font-weight: 700; color: #23255e; text-transform: none; margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #eceef4; } .advargo-app-step-heading:first-of-type { margin-top: 0; } .advargo-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 20px; } .advargo-app-grid .form-group { margin-bottom: 14px; } .advargo-app-step-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid #eceef4; } /* ========================================================================== Application overview — Course Details / Student Details panels ========================================================================== */ body.customers .row.mtop15 > .col-md-6 .tw-flex.tw-space-x-4 { padding: 6px 0; border-bottom: 1px dashed #eceef4; } body.customers .row.mtop15 > .col-md-6 .tw-flex.tw-space-x-4 p.bold { min-width: 170px; color: #4a4e6b; text-transform: none; font-size: 13px; } /* ========================================================================== Admin — redesigned Application overview right panel (Course & Student Details, replacing the generic Open Tasks / Expenses / Logged Hours box) ========================================================================== */ .advargo-admin-details-panel { border: 1px solid #eceef4; border-radius: var(--advargo-radius); padding: 16px 18px; background: #fbfbfe; } .advargo-admin-details-heading { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--advargo-primary); margin: 0 0 10px; } .advargo-admin-details-panel .advargo-admin-details-heading:not(:first-child) { margin-top: 20px; padding-top: 16px; border-top: 1px dashed #e2e4f0; } .advargo-admin-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; margin: 0; } .advargo-admin-dl dt { font-size: 11.5px; font-weight: 600; color: #8b8fa8; text-transform: none; margin-bottom: 2px; } .advargo-admin-dl dd { font-size: 13.5px; font-weight: 500; color: #23255e; margin: 0; }