/* Battle Plan Web Design - Site Pulse Styles -------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # CSS Variables # Reset & Base # Login Page # App Layout # Sidebar # Sidebar Nav Items # Sidebar Footer # Mobile Header # Mobile Sidebar # Main Content # Panels # Dashboard Cards # Forms & Inputs # Buttons # Report List # Report Form # Report Detail # Filters # Admin Panels # Placeholder & Loading States # Utilities # Responsive --------------------------------------------------------------*/ /*-------------------------------------------------------------- # CSS Variables --------------------------------------------------------------*/ :root { /* ---- AutoDrive theme: cream canvas, orange accent, slate nav ---- */ --sp-sidebar-bg: #474c54; --sp-sidebar-bg-hover: #545a64; --sp-sidebar-bg-active: #ec9a3c; --sp-sidebar-text: #c8ccd3; --sp-sidebar-text-hover: #ffffff; --sp-sidebar-text-active: #ffffff; --sp-sidebar-accent: #ec9a3c; --sp-sidebar-accent-glow: rgba(236, 154, 60, 0.18); --sp-sidebar-width: 260px; --sp-sidebar-border: rgba(255,255,255,0.08); --sp-primary: #ec9a3c; --sp-primary-hover: #db8927; --sp-primary-light: #fcf2e3; --sp-success: #2f8f57; --sp-success-light: #eef7f1; --sp-warning: #c77d18; --sp-warning-light: #fbf1de; --sp-danger: #d0432f; --sp-danger-light: #fbeae6; --sp-text: #2c2a27; --sp-text-secondary: #6e6a63; --sp-text-light: #a39c90; --sp-bg: #f4eee3; --sp-bg-white: #ffffff; --sp-border: #e7ded0; --sp-border-focus: #eebb78; --sp-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --sp-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --sp-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); --sp-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); --sp-radius: 10px; --sp-radius-sm: 8px; --sp-radius-lg: 16px; --sp-radius-pill: 999px; --sp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --sp-transition: 0.2s ease; --input-padding: 8px 15px; --input-border-radius: var(--sp-radius-sm); --input-color: var(--sp-text); --input-background: var(--sp-bg-white); --input-border-focus: 1px solid var(--sp-border-focus); --input-border-radius-focus: var(--sp-radius-sm); --input-color-focus: var(--sp-text); --input-background-focus: var(--sp-bg-white); --input-border: 1px solid var(--sp-border); } input[type="checkbox"], input[type="radio"] { transform: translateY(0); margin-right: 0 !important; } /*-------------------------------------------------------------- # Reset & Base --------------------------------------------------------------*/ body.has-site-pulse { background: var(--sp-bg); font-family: var(--sp-font); color: var(--sp-text); line-height: 1.5; } body.has-site-pulse #primary, body.has-site-pulse .site-main-inner, body.has-site-pulse #main-content, body.has-site-pulse article[id^="post-"], body.has-site-pulse .entry-content { max-width: 100%; width: 100%; padding: 0; margin: 0; } /* The framework parks #main-content in its centered minmax(0,1280px) "default" grid track. Site Pulse's sidebar is position:fixed (pinned to the viewport's left edge), so a centered 1280px box leaves the main area floating in space with beige gutters on both sides. Break out to full-bleed so the grid's 260px sidebar column lines up with the fixed sidebar and .sp-main spans the entire non-menu area. Per-side gutters are handled on .sp-main below. */ body.has-site-pulse #main-content { grid-column: 1 / -1; display: block; } body.has-site-pulse *, body.has-site-pulse *::before, body.has-site-pulse *::after { box-sizing: border-box; } /* Site Pulse input overrides — loads after style-forms.css via battleplan-deferred dependency, so :root variables win normally. */ /* Spans use .unique class (added via JS) to escape framework's span:not(.unique) { color: inherit !important } rule. Buttons use class="unique" to escape framework's button styles via button:not(.unique) in style-forms.css. */ /*-------------------------------------------------------------- # God Mode Bar --------------------------------------------------------------*/ .sp-god-bar { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 10px; padding: 6px 16px; background: #7c3aed; color: #ffffff; font-size: 13px; font-family: var(--sp-font); position: fixed; top: 0; left: 0; right: 0; z-index: 300; } .sp-god-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 3px; } .sp-god-viewing { color: rgba(255,255,255,0.8); } .sp-god-select { padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); color: #ffffff; font-size: 13px; font-family: var(--sp-font); max-width: 350px; } .sp-god-select option { background: #1a1f2e; color: #ffffff; } .sp-god-reset { color: #ffffff; font-size: 12px; } .sp-god-reset:hover { color: #fbbf24; } body.has-site-pulse .sp-god-bar ~ .sp-sidebar { top: 34px; } body.has-site-pulse .sp-god-bar ~ .sp-main { padding-top: 62px; } body.has-site-pulse .sp-god-bar ~ .sp-mobile-header { top: 34px; } /*-------------------------------------------------------------- # Login Page --------------------------------------------------------------*/ #sp-login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 20px; background: var(--sp-sidebar-bg); } .sp-login-box { width: 100%; max-width: 400px; background: var(--sp-bg-white); border-radius: var(--sp-radius-lg); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); padding: 40px; } .sp-login-header { text-align: center; margin-bottom: 32px; } .sp-login-icon { margin-bottom: 16px; } .sp-login-icon svg { color: var(--sp-primary); } .sp-login-logo { max-width: 160px; height: auto; margin-bottom: 16px; } .sp-login-header h1 { font-size: 24px; font-weight: 700; color: var(--sp-text); margin: 0 0 4px; } .sp-login-header p { font-size: 14px; color: var(--sp-text-secondary); margin: 0; } /* "Log out" link under the forced password-change form. */ .sp-login-foot { text-align: center; margin: 18px 0 0; font-size: 13px; } /*-------------------------------------------------------------- # App Layout --------------------------------------------------------------*/ #sp-app { display: grid; grid-template-columns: var(--sp-sidebar-width) 1fr; min-height: 100vh; } /*-------------------------------------------------------------- # Sidebar --------------------------------------------------------------*/ .sp-sidebar { grid-column: 1; width: var(--sp-sidebar-width); min-height: 100vh; background: var(--sp-sidebar-bg); display: grid; grid-template-rows: auto 1fr auto; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; overflow-y: auto; overflow-x: hidden; } .sp-sidebar-header { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 20px 16px 16px; border-bottom: 1px solid var(--sp-sidebar-border); } .sp-sidebar-brand { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; } .sp-sidebar-brand .sp-icon { color: var(--sp-sidebar-accent); } .sp-sidebar-title { font-size: 17px; font-weight: 700; color: #ffffff; letter-spacing: -0.01em; } .sp-sidebar-close { display: none; background: none; border: none; color: var(--sp-sidebar-text); cursor: pointer; padding: 4px; } .sp-sidebar-nav { padding: 12px 8px; display: grid; grid-auto-rows: min-content; gap: 2px; align-content: start; } /*-------------------------------------------------------------- # Sidebar Nav Items --------------------------------------------------------------*/ .sp-nav-item { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; color: var(--sp-sidebar-text); font-size: 14px; font-weight: 500; font-family: var(--sp-font); cursor: pointer; border-radius: var(--sp-radius-sm); transition: background var(--sp-transition), color var(--sp-transition); position: relative; text-align: left; } .sp-nav-item:hover { background: var(--sp-sidebar-bg-hover); color: var(--sp-sidebar-text-hover); } .sp-nav-item.active { background: var(--sp-sidebar-bg-active); color: var(--sp-sidebar-text-active); } .sp-nav-item.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--sp-sidebar-accent); border-radius: 0 3px 3px 0; } .sp-nav-item .sp-icon { opacity: 0.7; transition: opacity var(--sp-transition); } .sp-nav-item:hover .sp-icon, .sp-nav-item.active .sp-icon { opacity: 1; } .sp-nav-arrow { display: grid; place-items: center; transition: transform var(--sp-transition); } .sp-nav-arrow .sp-icon { width: 16px; height: 16px; } .sp-nav-group.expanded > .sp-nav-item .sp-nav-arrow { transform: rotate(180deg); } .sp-nav-children { display: none; padding: 4px 0 4px 20px; } .sp-nav-group.expanded > .sp-nav-children { display: grid; grid-auto-rows: min-content; gap: 1px; } .sp-nav-child { display: grid; grid-template-columns: 1fr; align-items: center; width: 100%; padding: 8px 12px 8px 22px; border: none; background: none; color: var(--sp-sidebar-text); font-size: 13px; font-weight: 400; font-family: var(--sp-font); cursor: pointer; border-radius: var(--sp-radius-sm); transition: background var(--sp-transition), color var(--sp-transition); text-align: left; position: relative; } .sp-nav-child::before { content: ""; position: absolute; left: 12px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--sp-sidebar-text); opacity: 0.4; transition: opacity var(--sp-transition), background var(--sp-transition); } .sp-nav-child:hover { background: var(--sp-sidebar-bg-hover); color: var(--sp-sidebar-text-hover); } .sp-nav-child.active { color: var(--sp-sidebar-text-active); background: var(--sp-sidebar-bg-hover); /* subtle slate, not orange */ } .sp-nav-child.active::before { opacity: 0; /* keep the orange accent off sub-items */ } /*-------------------------------------------------------------- # Sidebar Footer --------------------------------------------------------------*/ .sp-sidebar-footer { padding: 12px 8px; border-top: 1px solid var(--sp-sidebar-border); } .sp-sidebar-user { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 10px 12px; } .sp-sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sp-sidebar-bg-hover); display: grid; place-items: center; } .sp-sidebar-avatar .sp-icon { color: var(--sp-sidebar-text); width: 16px; height: 16px; } .sp-sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--sp-sidebar-text-hover); } .sp-sidebar-user-role { font-size: 11px; color: var(--sp-sidebar-text); } .sp-nav-logout { margin-top: 4px; } .sp-nav-logout:hover { color: var(--sp-danger); } /*-------------------------------------------------------------- # Top Bar --------------------------------------------------------------*/ .sp-topbar { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 10px 0; margin-bottom: 20px; background: var(--sp-bg); border-bottom: 1px solid var(--sp-border); position: sticky; top: 0; z-index: 100; } .sp-topbar-left { display: grid; grid-auto-flow: column; align-items: center; gap: 8px; justify-content: start; font-size: 14px; } .sp-topbar-left .sp-icon { color: var(--sp-text-light); width: 18px; height: 18px; } .sp-topbar-name { font-weight: 600; color: var(--sp-text); } .sp-topbar-divider { color: var(--sp-text-light); } .sp-topbar-role { color: var(--sp-text-secondary); } .sp-topbar-location { color: var(--sp-text-secondary); } .sp-topbar-right { display: grid; grid-auto-flow: column; align-items: center; gap: 4px; } .sp-topbar-btn { display: grid; grid-auto-flow: column; align-items: center; gap: 6px; padding: 6px 10px; border: none; background: none; color: var(--sp-text-secondary); font-size: 13px; font-family: var(--sp-font); cursor: pointer; border-radius: var(--sp-radius-sm); transition: background var(--sp-transition), color var(--sp-transition); } .sp-topbar-btn:hover { background: var(--sp-bg); color: var(--sp-text); } .sp-topbar-btn .sp-icon { width: 18px; height: 18px; } .sp-notification-btn { position: relative; } .sp-notification-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--sp-danger); color: #ffffff; font-size: 10px; font-weight: 700; border-radius: 8px; display: grid; place-items: center; line-height: 1; } .sp-notification-badge[hidden] { display: none; } /*-------------------------------------------------------------- # Notification Panel --------------------------------------------------------------*/ .sp-notification-panel { position: fixed; top: 50px; right: 20px; width: 380px; max-height: 500px; background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); z-index: 250; display: grid; grid-template-rows: auto 1fr; overflow: hidden; } .sp-notification-panel[hidden] { display: none; } .sp-notification-header { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--sp-border); } .sp-notification-header h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--sp-text); } .sp-notification-list { overflow-y: auto; max-height: 420px; } .sp-notification-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--sp-border); font-size: 13px; cursor: pointer; transition: background var(--sp-transition); } .sp-notification-item:hover { background: var(--sp-bg); } .sp-notification-item.unread { background: var(--sp-primary-light); } .sp-notification-item.unread:hover { background: #dde5ff; } .sp-notification-message { color: var(--sp-text); line-height: 1.4; } .sp-notification-time { color: var(--sp-text-light); font-size: 11px; white-space: nowrap; align-self: start; } .sp-notification-empty { padding: 30px 20px; text-align: center; color: var(--sp-text-light); font-size: 14px; } /*-------------------------------------------------------------- # Mobile Header --------------------------------------------------------------*/ .sp-mobile-header { display: none; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; background: var(--sp-sidebar-bg); color: #ffffff; position: sticky; top: 0; z-index: 150; } .sp-hamburger { background: none; border: none; color: #ffffff; cursor: pointer; padding: 4px; } .sp-mobile-title { font-size: 16px; font-weight: 700; } .sp-mobile-user .sp-icon { color: var(--sp-sidebar-text); } .sp-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 190; } .sp-overlay.active { display: block; } /*-------------------------------------------------------------- # Main Content --------------------------------------------------------------*/ .sp-main { grid-column: 2; /* As a grid item, min-width defaults to `auto`, which lets wide children (tables, date inputs, button rows) push .sp-main past its track and out of the viewport — the "breaking out of the 100% shell" on mobile. min-width:0 lets it shrink to its column so inner content wraps/clips instead. */ min-width: 0; /* Centered, fluid side gutters. Min 2em (laptops ~1280px, near-full width); grows with the viewport until it caps at 10% of the non-menu area, i.e. the content settles at ~80% width centered on large monitors. The middle term is what scales between those two — it crosses 2em just above 1280px and reaches 10% around ~1850px, so wide screens fill out without the content going edge to edge. Vertical padding unchanged. */ padding: 28px clamp(2em, (100vw - 80em) * 0.28, 10%); min-height: 100vh; } /*-------------------------------------------------------------- # Panels --------------------------------------------------------------*/ .sp-panel { display: none; } .sp-panel.active { display: block; } .sp-panel-header { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 24px; } .sp-panel-header h2 { font-size: 24px; font-weight: 700; color: var(--sp-text); margin: 0; } /*-------------------------------------------------------------- # Dashboard Widgets --------------------------------------------------------------*/ .sp-dashboard-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sp-widget { background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); overflow: hidden; } .sp-widget-header { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--sp-border); } .sp-widget-header h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--sp-text); } .sp-widget-body { padding: 12px 20px; max-height: 320px; overflow-y: auto; } .sp-widget-item { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sp-bg); font-size: 14px; cursor: pointer; } .sp-widget-item:last-child { border-bottom: none; } .sp-widget-item:hover .sp-widget-item-title { color: var(--sp-primary); } .sp-widget-item-title { font-weight: 500; color: var(--sp-text); transition: color var(--sp-transition); } .sp-widget-item-meta { font-size: 12px; color: var(--sp-text-light); margin-top: 2px; } .sp-widget-action-item { display: grid; grid-template-columns: 4px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--sp-bg); font-size: 14px; } .sp-widget-action-item:last-child { border-bottom: none; } .sp-widget-action-bar { border-radius: 2px; min-height: 30px; align-self: stretch; } .sp-widget-action-bar.priority-high { background: var(--sp-danger); } .sp-widget-action-bar.priority-medium { background: #f97316; } .sp-widget-action-bar.priority-low { background: #eab308; } .sp-widget-action-desc { color: var(--sp-text); line-height: 1.4; } .sp-widget-action-category { font-size: 11px; color: var(--sp-text-light); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; } .sp-widget-empty { padding: 20px 0; text-align: center; color: var(--sp-text-light); font-size: 14px; } .sp-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .sp-card { background: var(--sp-bg-white); border-radius: var(--sp-radius); padding: 24px; box-shadow: var(--sp-shadow); border: 1px solid var(--sp-border); transition: box-shadow var(--sp-transition); } .sp-card:hover { box-shadow: var(--sp-shadow-md); } .sp-card-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sp-text-light); margin-bottom: 6px; } .sp-card-value { font-size: 20px; font-weight: 700; color: var(--sp-text); } /*-------------------------------------------------------------- # Shared Layout Primitives # Reusable page-hierarchy building blocks so every app (Reports, # Mileage, …) is laid out the same way: # Area 1 .sp-panel-header — title + actions # Area 2 .sp-meta-bar — at-a-glance label/value strip # Area 3 .sp-toolbar — filter / control row # Area 4 .sp-table-card — the data area --------------------------------------------------------------*/ /* Area 2 — label/value strip (report header + mileage summary share this). */ .sp-meta-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 24px; padding: 18px 22px; background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-sm); margin-bottom: 20px; } .sp-meta-bar .sp-card-value { font-size: 18px; } /* On phones, header strips whose column count the JS forces inline — the report detail header (.sp-meta-bar) and the report form header (.sp-report-header-grid) both set grid-template-columns: repeat(N, 1fr) inline — would run off the right edge. Override that to a wrapping auto-fit grid so the fields drop onto a second row instead. !important is needed to beat the inline style. Harmless to the mileage summary meta-bar, which already wraps. */ @media (max-width: 600px) { .sp-meta-bar, .sp-report-header-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; } } /* Area 3 — horizontal control/filter row. */ .sp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; } .sp-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sp-toolbar-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sp-text-light); } /* Area 4 — card wrapper for tables / data. */ .sp-table-card { background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); overflow: hidden; } /*-------------------------------------------------------------- # Forms & Inputs --------------------------------------------------------------*/ .sp-form-group { margin-bottom: 20px; } .sp-form-group label { display: block; font-size: 17px; font-weight: 700; color: var(--sp-text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; } .sp-input, .sp-select, .sp-textarea, #sp-login-form input[type="text"], #sp-login-form input[type="password"] { width: 100%; min-height: 40px; padding: 9px 14px; font-size: 14px; font-family: var(--sp-font); color: var(--sp-text); background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); transition: border-color var(--sp-transition), box-shadow var(--sp-transition); outline: none; } .sp-input:focus, .sp-select:focus, .sp-textarea:focus, #sp-login-form input:focus { border-color: var(--sp-border-focus); box-shadow: 0 0 0 3px rgba(236, 154, 60, 0.15); } .sp-textarea { min-height: 100px; resize: vertical; } .sp-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* Datalist-backed combobox inputs (location + purpose). Wear the SAME thin chevron as .sp-select and hide the browser's native datalist arrow so the two fields match. */ .sp-combo { position: relative; } .sp-combo-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* Hide the native datalist indicator (kept invisible-but-clickable so the chevron still opens the list in Chrome); other browsers never show it. */ .sp-combo-input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; } /* Google Places autocomplete dropdown must float above the add-destination modal. */ .pac-container { z-index: 100001 !important; } .sp-form-error { color: var(--sp-danger); font-size: 13px; margin-top: 8px; min-height: 20px; } .sp-password-input-wrap { position: relative; } .sp-password-input-wrap input { padding-right: 44px; } .sp-toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; color: var(--sp-text-light); } .sp-toggle-password:hover { color: var(--sp-text-secondary); } .sp-form-section { margin-bottom: 32px; } .sp-form-section-title { font-size: 16px; font-weight: 700; color: var(--sp-text); margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--sp-primary-light); } .sp-help-text { font-size: 12px; color: var(--sp-text-light); margin-top: 4px; } .sp-prior-answer { margin: 0 0 8px; padding: 8px 12px; background: var(--sp-bg); border-radius: var(--sp-radius-sm); font-size: 14px; color: var(--sp-text-secondary); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .sp-prior-answer-date { font-weight: 600; color: var(--sp-text); margin-right: 4px; } /*-------------------------------------------------------------- # Buttons --------------------------------------------------------------*/ /* Site Pulse buttons use class="unstyled" to opt out of the framework's button styles. The .sp-btn class provides its own system using private custom properties, same pattern as the framework refactor. */ .sp-btn { --_btn-color: inherit; --_btn-color-h: inherit; --_btn-bg: none; --_btn-bg-h: none; --_btn-border: 1px solid transparent; --_btn-border-h: 1px solid transparent; --_btn-padding: 0 18px; display: inline-grid; min-height: 40px; box-sizing: border-box; grid-auto-flow: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--sp-font); font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer; transition: all var(--sp-transition); border-radius: var(--sp-radius-pill); text-decoration: none; color: var(--_btn-color); background: var(--_btn-bg); border: var(--_btn-border); padding: var(--_btn-padding); } .sp-btn:hover, .sp-btn:active, .sp-btn:focus { color: var(--_btn-color-h); background: var(--_btn-bg-h); border: var(--_btn-border-h); padding: var(--_btn-padding); } .sp-btn-primary { --_btn-color: #ffffff; --_btn-color-h: #ffffff; --_btn-bg: var(--sp-primary); --_btn-bg-h: var(--sp-primary-hover); } .sp-btn-secondary { --_btn-color: var(--sp-text); --_btn-color-h: var(--sp-text); --_btn-bg: var(--sp-bg-white); --_btn-bg-h: var(--sp-bg); --_btn-border: 1px solid var(--sp-border); --_btn-border-h: 1px solid var(--sp-border-focus); } .sp-btn-ghost { --_btn-color: var(--sp-text-secondary); --_btn-color-h: var(--sp-text); --_btn-bg: rgba(44, 42, 39, 0.05); --_btn-bg-h: rgba(44, 42, 39, 0.10); } .sp-btn-danger { --_btn-color: #ffffff; --_btn-color-h: #ffffff; --_btn-bg: var(--sp-danger); --_btn-bg-h: #b91c1c; } .sp-btn-full { width: 100%; } .sp-btn:disabled { opacity: 0.6; cursor: not-allowed; } .sp-btn .btn-loading:not([hidden]) { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 4px; } .sp-spin-icon { animation: sp-spin 1s linear infinite; } @keyframes sp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*-------------------------------------------------------------- # Report List --------------------------------------------------------------*/ .sp-reports-list { display: grid; gap: 8px; } .sp-report-card { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 16px 20px; background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); cursor: pointer; transition: box-shadow var(--sp-transition), border-color var(--sp-transition); } .sp-report-card:hover { box-shadow: var(--sp-shadow); border-color: var(--sp-border-focus); } .sp-report-card-title { font-size: 15px; font-weight: 600; color: var(--sp-text); } .sp-report-card-meta { font-size: 13px; color: var(--sp-text-secondary); display: grid; grid-auto-flow: column; gap: 12px; justify-content: start; margin-top: 4px; } .sp-status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: capitalize; } .sp-status-draft { background: var(--sp-warning-light); color: var(--sp-warning); } .sp-status-submitted { background: var(--sp-primary-light); color: var(--sp-primary); } .sp-status-reviewed { background: var(--sp-success-light); color: var(--sp-success); } /*-------------------------------------------------------------- # Report Form --------------------------------------------------------------*/ .sp-report-form-wrap { position: relative; background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); padding: 32px; box-shadow: var(--sp-shadow); } .sp-report-form-header { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--sp-border); } .sp-report-form-header h3 { font-size: 18px; font-weight: 700; margin: 0; } .sp-report-form-actions { display: flex; gap: 12px; padding-top: 24px; border-top: 1px solid var(--sp-border); margin-top: 24px; } /*-------------------------------------------------------------- # Report Detail --------------------------------------------------------------*/ .sp-detail-nav { display: grid; grid-template-columns: auto 1fr; align-items: center; margin-bottom: 16px; } .sp-detail-nav-left { display: flex; align-items: center; gap: 8px; } .sp-detail-nav-arrows { display: grid; grid-auto-flow: column; gap: 4px; justify-content: end; } .sp-report-detail-wrap { background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); padding: 32px; box-shadow: var(--sp-shadow); } .sp-report-detail-header { display: grid; grid-template-columns: 1fr auto; align-items: start; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--sp-border); } .sp-report-detail-header h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; } .sp-detail-meta { font-size: 13px; color: var(--sp-text-secondary); } .sp-answer-group { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--sp-bg); } .sp-answer-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .sp-answer-label { font-size: 17px; font-weight: 700; color: var(--sp-text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .sp-answer-text { font-size: 15px; color: var(--sp-text); line-height: 1.6; white-space: pre-wrap; } /*-------------------------------------------------------------- # Filters --------------------------------------------------------------*/ .sp-report-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 20px; } .sp-role-manager .sp-report-filters, .sp-role-non-store-manager .sp-report-filters { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } #sp-panel-action-items .sp-report-filters { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /*-------------------------------------------------------------- # Admin Panels --------------------------------------------------------------*/ .sp-admin-content { background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 24px; min-height: 200px; } .sp-admin-toolbar { margin-bottom: 20px; } .sp-admin-table-wrap { overflow-x: auto; } .sp-admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .sp-admin-table th { text-align: left; padding: 10px 12px; font-weight: 600; color: var(--sp-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--sp-border); } .sp-admin-table td { padding: 12px; border-bottom: 1px solid var(--sp-border); color: var(--sp-text); } .sp-admin-table tbody tr:hover { background: var(--sp-bg); } .sp-admin-table td:last-child { text-align: right; } .sp-template-card { background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 20px; margin-bottom: 16px; } /* ---- Tiers (Roles) ---- */ /* Tiers run ACROSS as side-by-side columns; each column's caps stack DOWN. */ .sp-tier-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-items: start; } .sp-tier-card { background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 16px 18px; } .sp-tier-card-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; margin-bottom: 14px; } .sp-tier-card-head .sp-tier-badge { grid-column: 1; grid-row: 1; } .sp-tier-card-head .sp-tier-name { grid-column: 2; grid-row: 1; } .sp-tier-card-head .sp-tier-count { grid-column: 1; grid-row: 2; } .sp-tier-card-head .sp-tier-move { grid-column: 2; grid-row: 2; justify-self: end; } .sp-tier-badge { display: inline-block; padding: 4px 10px; border-radius: var(--sp-radius-pill); background: var(--sp-primary-light); color: var(--sp-primary-hover); font-size: 12px; font-weight: 700; white-space: nowrap; } .sp-tier-name { font-weight: 600; } .sp-tier-count { font-size: 13px; color: var(--sp-text-light); white-space: nowrap; } .sp-tier-move { display: inline-flex; gap: 4px; } .sp-tier-caps { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 16px; text-align: left; } .sp-tier-cap { display: flex; align-items: center; text-align: left; gap: 8px; font-size: 13px; line-height: 1.25; color: var(--sp-text); cursor: pointer; } .sp-tier-cap input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--sp-primary); } .sp-tier-card-foot { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--sp-border); } /* Roles-page picker that jumps to one user's Edit popup for per-user permission overrides. Sits below the role cards, separated by a divider. */ .sp-roles-user-picker { margin: 28px 0 8px; padding-top: 24px; border-top: 1px solid var(--sp-border); } .sp-roles-user-picker label { display: block; font-size: 13px; font-weight: 600; color: var(--sp-text); margin-bottom: 6px; /* The framework theme right-aligns bare labels; force left like .sp-form-group label does. */ text-align: left; } .sp-roles-user-picker select { display: block; max-width: 340px; } /* Per-user permission override grid in the Edit User popup: label · role default · this user. */ .sp-perm-grid { border: 1px solid var(--sp-border); border-radius: 8px; overflow: hidden; } .sp-perm-row { display: grid; grid-template-columns: 48px 48px 1fr; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border-top: 1px solid var(--sp-border); cursor: pointer; } .sp-perm-row:first-child { border-top: 0; } .sp-perm-head { background: var(--sp-bg); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sp-text-secondary); cursor: default; } .sp-perm-label { font-size: 13.5px; color: var(--sp-text); } /* Columns are left-aligned so each header (Role/User/Permission) sits directly above its checkbox/label below — one clean left edge per column. */ .sp-perm-cell { text-align: left; } .sp-perm-cell input { width: 16px; height: 16px; margin: 0; accent-color: var(--sp-primary); } /* Header: one "Default / Override" caption spanning the two checkbox columns, Reset on the right. */ .sp-perm-headcols { grid-column: 1 / 3; white-space: nowrap; } .sp-perm-head .sp-perm-reset { justify-self: end; } .sp-perm-reset { font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--sp-primary); background: none; border: 1px solid var(--sp-border); border-radius: 6px; padding: 3px 10px; cursor: pointer; } .sp-perm-reset:hover { background: var(--sp-bg-white); border-color: var(--sp-primary); } .sp-perm-cell input:disabled { opacity: 0.6; } .sp-perm-user-cb { cursor: pointer; } .sp-perm-row.sp-perm-changed { background: var(--sp-warning-bg, #fff7ed); } .sp-perm-row.sp-perm-changed .sp-perm-label { font-weight: 600; } .sp-tier-form { background: var(--sp-bg-white); border: 1px solid var(--sp-border-focus); border-radius: var(--sp-radius); padding: 20px; margin-bottom: 16px; } /* On narrow screens the tier grid simply collapses to a single full-width column. */ .sp-template-card-header { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 8px; } .sp-template-meta { font-size: 13px; color: var(--sp-text-secondary); margin-bottom: 16px; } .sp-template-fields { border-top: 1px solid var(--sp-border); padding-top: 12px; } /* Settings segment card — same look as the report-template cards, used to separate the distinct segments of the Mileage admin (Rates, Map Markers, Toll Pricing, etc.). */ .sp-settings-card { background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 20px; margin-bottom: 16px; } .sp-settings-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sp-settings-card-header h3 { margin: 0; } .sp-settings-card-actions { display: flex; gap: 8px; flex-wrap: wrap; } .sp-settings-card-body { border-top: 1px solid var(--sp-border); padding-top: 16px; margin-top: 12px; } .sp-settings-card-body > h4:first-child, .sp-settings-card-body > p:first-child { margin-top: 0; } .sp-field-list { display: grid; gap: 4px; } .sp-field-item { display: grid; grid-template-columns: 24px 1fr auto auto auto; align-items: center; gap: 8px; padding: 8px 10px; background: var(--sp-bg); border-radius: var(--sp-radius-sm); font-size: 14px; } .sp-field-item.sp-field-archived { opacity: 0.5; } .sp-field-drag { cursor: grab; color: var(--sp-text-light); font-size: 16px; } .sp-field-label { font-weight: 500; color: var(--sp-text); } .sp-field-type { font-size: 12px; color: var(--sp-text-light); text-transform: uppercase; } .sp-field-item.sp-dragging { opacity: 0.4; } .sp-field-item.sp-drag-over { border-top: 2px solid var(--sp-primary); padding-top: 6px; } /*-------------------------------------------------------------- # Analytics --------------------------------------------------------------*/ .sp-analytics-search { position: relative; margin-bottom: 24px; } .sp-analytics-search-inner { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .sp-coming-soon { opacity: 0.6; } .sp-coming-soon-badge { position: absolute; top: -10px; right: 12px; z-index: 1; } .sp-coming-soon-badge span { background: var(--sp-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .sp-coming-soon-text { font-size: 13px; color: var(--sp-text-light); margin: 8px 0 0; text-align: center; } .sp-analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sp-analytics-card { background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); overflow: hidden; } .sp-analytics-card h4 { font-size: 15px; font-weight: 700; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--sp-border); color: var(--sp-text); } .sp-analytics-card-body { padding: 16px 20px; } .sp-chart-bars { display: grid; gap: 10px; } .sp-chart-bar-row { display: grid; grid-template-columns: 100px 1fr 40px; align-items: center; gap: 10px; } .sp-chart-label { font-size: 13px; color: var(--sp-text-secondary); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-chart-bar-track { height: 20px; background: var(--sp-bg); border-radius: 4px; overflow: hidden; } .sp-chart-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; min-width: 2px; } .sp-chart-value { font-size: 14px; font-weight: 700; color: var(--sp-text); } .sp-resolution-stats { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; } .sp-resolution-ring { width: 120px; height: 120px; } .sp-ring-svg { width: 100%; height: 100%; } .sp-ring-bg { fill: none; stroke: var(--sp-bg); stroke-width: 3; } .sp-ring-fill { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; } .sp-ring-text { fill: var(--sp-text); font-size: 8px; font-weight: 700; text-anchor: middle; } .sp-resolution-details { display: grid; gap: 8px; } .sp-resolution-details div { display: grid; grid-template-columns: 1fr auto; font-size: 14px; } .sp-resolution-details div strong { margin-left: 7px; } /*-------------------------------------------------------------- # Submit Overlay --------------------------------------------------------------*/ .sp-submit-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; z-index: 500; } .sp-submit-overlay-inner { text-align: center; } .sp-submit-message { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--sp-text); } /*-------------------------------------------------------------- # Action Items --------------------------------------------------------------*/ .sp-action-items-list { display: grid; gap: 8px; } .sp-action-item { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; padding: 16px 20px; background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); border-left: 4px solid var(--sp-warning); } .sp-action-item.sp-priority-high { border-left-color: var(--sp-danger); } .sp-action-item.sp-priority-medium { border-left-color: #f97316; } .sp-action-item.sp-priority-low { border-left-color: #eab308; } .sp-action-item.sp-action-resolved-item { grid-template-columns: 1fr; opacity: 0.6; border-left-color: var(--sp-success); } .sp-pending-section { margin-bottom: 24px; padding: 16px 20px; background: var(--sp-warning-light); border: 1px solid #fde68a; border-radius: var(--sp-radius); } .sp-pending-heading { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--sp-text); display: flex; align-items: center; gap: 8px; } .sp-pending-count { display: inline-block; min-width: 22px; padding: 2px 8px; background: var(--sp-warning); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; } .sp-pending-intro { margin: 0 0 12px; font-size: 13px; color: var(--sp-text-secondary); } .sp-pending-section .sp-action-item { margin-bottom: 8px; } .sp-pending-section .sp-action-item:last-child { margin-bottom: 0; } .sp-action-review-actions { display: flex; flex-direction: column; gap: 6px; min-width: 110px; } .sp-action-review-actions .sp-btn { width: 100%; } .sp-action-drag { cursor: grab; color: var(--sp-text-light); font-size: 16px; padding-top: 2px; } .sp-action-item.sp-dragging { opacity: 0.4; } .sp-action-item.sp-drag-over { border-top: 2px solid var(--sp-primary); } .sp-action-item-category { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #f97316; margin-bottom: 2px; } .sp-priority-high .sp-action-item-category { color: var(--sp-danger); } .sp-priority-medium .sp-action-item-category { color: #f97316; } .sp-priority-low .sp-action-item-category { color: #eab308; } .sp-action-item-desc { font-size: 15px; color: var(--sp-text); line-height: 1.5; margin-bottom: 6px; } .sp-action-item-meta { font-size: 12px; color: var(--sp-text-light); } .sp-action-resolved { font-size: 12px; color: var(--sp-success); margin-top: 4px; } .sp-action-history { margin-bottom: 12px; padding: 12px 16px; background: var(--sp-bg); border-radius: var(--sp-radius-sm); border-left: 2px solid var(--sp-text-light); } .sp-action-history-entry { margin-bottom: 10px; } .sp-action-history-entry:last-child { margin-bottom: 0; } .sp-action-history-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sp-text-light); margin-bottom: 2px; } .sp-action-history-text { font-size: 13px; color: var(--sp-text-secondary); margin-bottom: 8px; line-height: 1.4; } .sp-action-history-ai { font-size: 13px; color: var(--sp-warning); font-style: italic; margin-bottom: 8px; line-height: 1.4; } .sp-resolve-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sp-border); } .sp-resolve-note { min-height: 70px; resize: vertical; } .sp-resolve-feedback { margin-top: 12px; } .sp-resolve-not-resolved { padding: 12px 16px; background: var(--sp-warning-light); border: 1px solid var(--sp-warning); border-radius: var(--sp-radius-sm); font-size: 14px; color: var(--sp-text); } .sp-resolve-not-resolved strong { color: var(--sp-warning); } .sp-resolve-not-resolved p { margin: 6px 0 0; } .sp-resolve-not-resolved em { color: var(--sp-text-secondary); } /*-------------------------------------------------------------- # Placeholder & Loading States --------------------------------------------------------------*/ .sp-placeholder { display: grid; place-items: center; padding: 60px 20px; color: var(--sp-text-light); } .sp-placeholder p { font-size: 15px; margin: 0; } .sp-empty-state { display: grid; place-items: center; padding: 40px 20px; color: var(--sp-text-light); } .sp-empty-state p { margin: 0; font-size: 14px; } .sp-coming-soon-panel { display: grid; place-items: center; gap: 12px; padding: 80px 20px; color: var(--sp-text-light); text-align: center; } .sp-coming-soon-panel .sp-icon { width: 48px; height: 48px; opacity: 0.5; } .sp-coming-soon-panel h3 { margin: 0; font-size: 20px; color: var(--sp-text); } .sp-coming-soon-panel p { margin: 0; font-size: 14px; } .sp-loading { display: grid; place-items: center; padding: 40px; } .sp-loading::after { content: ""; width: 32px; height: 32px; border: 3px solid var(--sp-border); border-top-color: var(--sp-primary); border-radius: 50%; animation: sp-spin 0.6s linear infinite; } /*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/ .sp-icon { display: inline-block; vertical-align: middle; } .sp-hidden { display: none !important; } .sp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sp-text-success { color: var(--sp-success); } .sp-text-warning { color: var(--sp-warning); } .sp-text-danger { color: var(--sp-danger); } /*-------------------------------------------------------------- # Responsive --------------------------------------------------------------*/ @media (max-width: 900px) { #sp-app { grid-template-columns: 1fr; } .sp-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; } .sp-sidebar.open { transform: translateX(0); } .sp-sidebar-close { display: grid; place-items: center; } .sp-mobile-header { display: grid; } .sp-topbar-role, .sp-topbar-location, .sp-topbar-divider { display: none; } .sp-notification-panel { right: 10px; left: 10px; width: auto; } .sp-main { grid-column: 1; padding: 20px 16px; } } @media (max-width: 768px) { .sp-dashboard-widgets, .sp-analytics-grid { grid-template-columns: 1fr; } .sp-chart-bar-row { grid-template-columns: 80px 1fr 30px; } .sp-resolution-stats { grid-template-columns: 1fr; justify-items: center; } } @media (max-width: 600px) { .sp-panel-header { grid-template-columns: 1fr; gap: 12px; } .sp-report-filters { grid-template-columns: 1fr; } .sp-report-card { grid-template-columns: 1fr; gap: 8px; } .sp-report-form-wrap, .sp-report-detail-wrap { padding: 20px; } .sp-report-form-actions { flex-wrap: wrap; } .sp-report-form-actions .sp-btn { width: 100%; } .sp-login-box { padding: 24px; } .sp-dashboard-grid { grid-template-columns: 1fr; } } /*-------------------------------------------------------------- # Mileage --------------------------------------------------------------*/ .sp-mileage-actions { display: flex; flex-wrap: wrap; gap: 8px; } .sp-mileage-summary { margin-bottom: 16px; } /* Mileage summary reuses the shared .sp-meta-bar (see Shared Layout Primitives). */ .sp-mileage-summary-grid { /* legacy alias */ } .sp-mileage-table { width: 100%; border-collapse: collapse; background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); overflow: hidden; } .sp-mileage-table thead { background: var(--sp-bg); } .sp-mileage-table th, .sp-mileage-table td { padding: 10px 14px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--sp-border); vertical-align: top; } .sp-mileage-table th { font-weight: 600; color: var(--sp-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .sp-mileage-table tbody tr:last-child td { border-bottom: 0; } .sp-mileage-path-cell { max-width: 360px; color: var(--sp-text-secondary); } .sp-mileage-path-loading { color: var(--sp-text-light); font-style: italic; } .sp-mileage-map-canvas { width: 100%; height: 540px; } .sp-mileage-map-notice { padding: 16px 20px; margin-bottom: 16px; background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); color: var(--sp-text-secondary); font-size: 14px; } /* Toll reconciliation panel */ .sp-toll-intro { font-size: 14px; line-height: 1.5; color: var(--sp-text-secondary); } .sp-toll-file { font-size: 14px; } .sp-toll-status { margin: 14px 0; padding: 12px 16px; border-radius: var(--sp-radius); background: var(--sp-bg); border: 1px solid var(--sp-border); font-size: 14px; color: var(--sp-text); } .sp-toll-status-error { background: var(--sp-danger-light, #fbeaea); border-color: var(--sp-danger, #c0392b); color: var(--sp-danger, #c0392b); } .sp-toll-status-ok { background: var(--sp-success-light, #e8f5ea); border-color: var(--sp-success, #2e7d32); color: var(--sp-success, #2e7d32); } .sp-toll-days { display: flex; flex-direction: column; gap: 16px; } .sp-toll-day { padding: 16px 18px; } .sp-toll-day-head { display: flex; align-items: center; gap: 12px; } .sp-toll-day-date { font-weight: 700; font-size: 16px; } .sp-toll-day-meta { color: var(--sp-text-secondary); font-size: 13px; } .sp-toll-day-head .sp-btn { margin-left: auto; } .sp-toll-day-done { opacity: 0.92; } .sp-toll-loading { padding: 16px 4px; color: var(--sp-text-secondary); font-size: 14px; } .sp-toll-day-body { margin-top: 14px; } .sp-toll-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; } .sp-toll-table th, .sp-toll-table td { padding: 8px 10px; border-bottom: 1px solid var(--sp-border); text-align: left; vertical-align: top; } /* Column budget — give "Assign to leg" enough room to show the full leg label. When (time only) and Charge are slim; Road/Gantry wraps onto two lines. */ .sp-toll-table th:nth-child(1), .sp-toll-table td:nth-child(1) { width: 8%; white-space: nowrap; } .sp-toll-table th:nth-child(2), .sp-toll-table td:nth-child(2) { width: 33%; } .sp-toll-table th:nth-child(3), .sp-toll-table td:nth-child(3) { width: 9%; } .sp-toll-table th:nth-child(4), .sp-toll-table td:nth-child(4) { width: 50%; } .sp-toll-assign { width: 100%; max-width: 100%; } .sp-toll-road { font-weight: 600; line-height: 1.3; } .sp-toll-gantry { font-size: 12px; color: var(--sp-text-secondary); line-height: 1.3; margin-top: 1px; word-break: break-word; } .sp-toll-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sp-text-secondary); } .sp-toll-row-amb { background: var(--sp-warning-light, #fff7e6); } .sp-toll-row-exc { opacity: 0.6; } .sp-toll-flag { color: var(--sp-warning, #b8860b); cursor: help; } .sp-toll-reason { font-size: 12px; color: var(--sp-text-secondary); margin-top: 2px; } .sp-toll-compare { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; padding: 14px 16px; background: var(--sp-bg); border-radius: var(--sp-radius); } .sp-toll-compare-stat { min-width: 130px; } .sp-toll-var-over { color: var(--sp-danger, #c0392b); } .sp-toll-var-under { color: var(--sp-success, #2e7d32); } .sp-toll-apply-row { display: flex; justify-content: flex-end; gap: 8px; align-items: center; } .sp-map-info { font-size: 13px; line-height: 1.45; min-width: 140px; } .sp-map-info-cat { font-style: italic; color: var(--sp-text-secondary); } .sp-reminder-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; user-select: none; } .sp-quickentry { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .sp-quickentry .sp-input { flex: 1; } .sp-quickentry-mic { flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--sp-border); background: var(--sp-bg-white); color: var(--sp-text-secondary); } @media (max-width: 640px) { .sp-mileage-form-top { grid-template-columns: 1fr; gap: 12px; } } .sp-quickentry-mic.sp-mic-active { color: #dc2626; border-color: #dc2626; animation: sp-mic-pulse 1s ease-in-out infinite; } @keyframes sp-mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .sp-quickentry-note { font-size: 12.5px; color: var(--sp-text-secondary); margin-bottom: 10px; } .sp-mileage-date { font-weight: 500; } .sp-mileage-row-actions { display: flex; gap: 4px; margin-top: 8px; } /* Mobile: reflow the cramped 5-column mileage log into stacked cards. Each row becomes a flex container — Date and Route each take the full width (so the route text gets room instead of jamming into a narrow column), then the numeric cells (Miles / $ / Tolls / Trailer) wrap onto their own row below, each with a small label since the table header is hidden. Status + row actions sit on a final full-width row. */ @media (max-width: 600px) { .sp-mileage-table, .sp-mileage-table tbody, .sp-mileage-table tfoot, .sp-mileage-table td { display: block; } .sp-mileage-table thead { display: none; } /* Desktop-only alignment spacers aren't needed in the stacked card view. */ .sp-leg-blank { display: none; } .sp-mileage-table tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 20px; padding: 14px 16px; border-bottom: 1px solid var(--sp-border); } .sp-mileage-table td { padding: 0; border: none; font-size: 15px; } /* Date + Route each claim a full-width line. */ .sp-mileage-table .sp-m-date, .sp-mileage-table .sp-mileage-path-cell { flex: 0 0 100%; max-width: none; } .sp-mileage-table .sp-m-date { font-weight: 700; color: var(--sp-text); } /* Numeric columns share the next row, each label stacked above its value. */ .sp-mileage-table .sp-m-num { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; } .sp-mileage-table .sp-m-num::before { content: attr(data-label); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sp-text-light); } /* Status badge and edit/delete actions on a final full-width row. */ .sp-mileage-table .sp-m-status { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; } .sp-mileage-table .sp-m-status .sp-mileage-row-actions { margin-top: 0; } } .sp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--sp-border); background: var(--sp-bg-white); color: var(--sp-text-light); border-radius: var(--sp-radius-sm); cursor: pointer; line-height: 0; transition: background 0.12s, color 0.12s, border-color 0.12s; } .sp-icon-btn:hover { border-color: var(--sp-border-focus); color: var(--sp-text); } /* Edit turns primary, Delete turns danger — outline by default, color on hover. */ .sp-icon-btn.sp-icon-edit:hover { color: var(--sp-primary); border-color: var(--sp-primary); } .sp-icon-btn.sp-icon-delete:hover { color: var(--sp-danger); border-color: var(--sp-danger); background: var(--sp-danger-light); } .sp-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } .sp-icon-btn:disabled:hover { border-color: var(--sp-border); color: var(--sp-text-light); background: var(--sp-bg-white); } .sp-mileage-delete-btn:hover { color: #dc2626; } .sp-mileage-stops { display: grid; gap: 10px; margin-bottom: 10px; padding: 18px 20px; background: rgba(255, 255, 255, 0.55); /* lighter than the cream page, groups the route */ border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); } /* DATE + ROUTE share the top row. */ .sp-mileage-form-top { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 20px; align-items: start; margin-bottom: 18px; } /* Every route row uses the SAME column template so the gutter, location, purpose and remove controls line up vertically across START / 1·2·3 / END. */ .sp-mileage-stop { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.5fr) 24px; gap: 10px; align-items: center; } .sp-mileage-stop-num, .sp-mileage-bookend-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--sp-text-light); text-align: left; } /* Locked START/END read-only field, spanning the location + purpose columns. */ .sp-mileage-stop-fixed .sp-mileage-stop-home { grid-column: 2 / -1; min-height: 40px; display: flex; align-items: center; padding: 0 14px; background: rgba(44, 42, 39, 0.04); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); font-weight: 600; } /* The END (drive-home) row mirrors a stop: home in the location column, its own Charge To in the charge column, and the Toll/Trailer flags lined up under the middle stops' flags. */ .sp-mileage-stop-end .sp-mileage-stop-home { grid-column: 2 / 3; } .sp-mileage-stop-end .sp-mileage-end-charge { grid-column: 3 / 4; } .sp-mileage-stop-end .sp-mileage-end-extras { grid-column: 4 / 5; } /* "Charge To" picker sits in its own column between the location and the purpose. Greyed like a placeholder until a store is chosen, so it reads the same as the location/purpose placeholders. */ .sp-mileage-charge { min-width: 0; } .sp-mileage-charge.sp-charge-empty { color: var(--sp-text-light); } /* Required entry fields flag themselves with a red border while still empty — the location, Charge To, business purpose, and the additional-details line when it's shown. The border clears the instant the field has a value. Charge selects use the .sp-charge-empty class the JS already maintains; the text inputs use :placeholder-shown. */ .sp-mileage-stop-loc:placeholder-shown, .sp-mileage-stop-purpose:placeholder-shown, .sp-mileage-stop-note:placeholder-shown, .sp-mileage-charge.sp-charge-empty { border-color: var(--sp-danger); filter: drop-shadow(0 0 3px var(--sp-danger)); } /* Optional per-stop note: a full-width text input on its own line beneath the row, aligned under the inputs. Hidden (via the [hidden] attr) until the chosen purpose requires it. */ .sp-mileage-stop-note { grid-column: 2 / -1; min-width: 0; margin-top: 2px; font-size: 13px; } .sp-mileage-stop-remove { justify-self: center; width: 26px; height: 26px; padding: 0; border: none; background: transparent; color: var(--sp-text-light); font-size: 18px; line-height: 1; border-radius: 50%; cursor: pointer; } .sp-mileage-stop-remove:hover { background: var(--sp-danger-light); color: var(--sp-danger); } /* Purpose column = the business-purpose input + a small "Toll" flag beside it. The flag marks a drive that incurred tolls; amounts are reconciled later. */ .sp-mileage-stop-purpose-cell { display: flex; align-items: center; gap: 8px; min-width: 0; } .sp-mileage-stop-purpose-cell .sp-mileage-stop-purpose { flex: 1 1 auto; min-width: 0; } .sp-mileage-toll-toggle { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 13px; line-height: 1; font-weight: 600; color: var(--sp-text-light); white-space: nowrap; cursor: pointer; user-select: none; } /* Extra space between the Toll and Trailer toggles so each checkbox visibly binds to the word on its right, not the one on its left. */ .sp-mileage-toll-toggle + .sp-mileage-toll-toggle { margin-left: 10px; } .sp-mileage-toll-toggle input { width: auto; min-height: 0; margin: 0; accent-color: var(--sp-primary); cursor: pointer; } .sp-mileage-purposes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .sp-purpose-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 14px; border-radius: 999px; background: var(--sp-bg-white); border: 1px solid var(--sp-border); font-size: 13px; color: var(--sp-text); } .sp-purpose-text { padding-right: 2px; } .sp-purpose-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--sp-border); background: var(--sp-bg-white); color: var(--sp-text-light); border-radius: var(--sp-radius-sm); cursor: pointer; line-height: 0; transition: background 0.12s, color 0.12s, border-color 0.12s; } .sp-purpose-icon svg { width: 14px; height: 14px; } .sp-purpose-edit-input { width: 150px; padding: 4px 12px; border: 1px solid var(--sp-border-focus); border-radius: 999px; font-size: 13px; font-family: inherit; color: var(--sp-text); outline: none; } .sp-mileage-purpose-add { display: flex; gap: 8px; margin-bottom: 10px; max-width: 420px; } /* Purpose library as a vertical list of rows: name (grows) · Requires-note toggle · edit · delete. */ .sp-purpose-rows { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-width: 560px; } .sp-purpose-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); } .sp-purpose-row .sp-purpose-text { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--sp-text); } .sp-purpose-row .sp-purpose-edit-input { flex: 1 1 auto; width: auto; border-radius: var(--sp-radius-sm); } .sp-purpose-req { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 12.5px; line-height: 1; font-weight: 600; color: var(--sp-text-light); white-space: nowrap; cursor: pointer; user-select: none; } .sp-purpose-req input { width: 15px; height: 15px; margin: 0; accent-color: var(--sp-primary); cursor: pointer; } .sp-mileage-quickranges { /* now a .sp-toolbar-group; layout handled there */ gap: 6px; } /* Two stacked rows beside the PERIOD label: presets on top, date pickers below. */ .sp-mileage-period-controls { display: flex; flex-direction: column; gap: 10px; } /* Keep the date row inline — base .sp-input is width:100%, which would stack them. */ #sp-mileage-toolbar .sp-input, #sp-mileage-toolbar .sp-select { width: auto; } #sp-mileage-toolbar .sp-input { min-width: 150px; } .sp-mileage-month-picker { min-width: 210px; max-width: 300px; } .sp-btn-tiny { --_btn-padding: 0 10px; min-height: 26px; font-size: 11px; margin-left: 8px; } .sp-mileage-matrix-wrap { overflow: auto; max-height: 520px; margin: 8px 0 16px; border: 1px solid var(--sp-border, #d7dde3); border-radius: 8px; } .sp-matrix-table { border-collapse: collapse; font-size: 12px; } .sp-matrix-table th, .sp-matrix-table td { border: 1px solid var(--sp-border, #e4e2da); padding: 5px 8px; text-align: center; white-space: nowrap; } .sp-matrix-table thead th, .sp-matrix-table tbody th { position: sticky; background: var(--sp-bg-subtle, #f4f6f8); font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .sp-matrix-table thead th { top: 0; z-index: 2; } .sp-matrix-table tbody th { left: 0; text-align: left; z-index: 1; } .sp-matrix-cell { cursor: pointer; } .sp-matrix-self { color: var(--sp-text-secondary, #9aa0aa); background: #fafafa; } .sp-matrix-api { background: #e6eaf1; } .sp-matrix-manual { background: #e8f2eb; } .sp-matrix-missing { background: #fbe7e4; color: #b23b2e; font-weight: 600; } .sp-matrix-cell:hover { outline: 2px solid var(--sp-accent, #15243a); outline-offset: -2px; } .sp-modal-wide { max-width: 720px; width: 92vw; } .sp-import-candidates { max-height: 360px; overflow: auto; margin: 10px 0; } .sp-import-candidates input.sp-input { padding: 4px 8px; font-size: 12.5px; } .sp-mileage-widget-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 14px; } .sp-mileage-widget-stats .sp-card-value { font-size: 22px; font-weight: 700; line-height: 1.1; } .sp-mileage-widget-stats .sp-card-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sp-text-secondary, #6b7280); margin-top: 2px; } .sp-mileage-route-line { line-height: 1.5; } .sp-route-purpose { color: var(--sp-text-secondary, #6b7280); font-style: italic; } /* Per-leg miles + mileage $ broken into the Miles/$ columns, one line per stop, aligned line-for-line with the route names beside them (matching line-height). The trip total sits on the first line in the normal weight; each leg below is muted grey. */ .sp-mileage-table td.sp-m-num > div { line-height: 1.5; text-align: right; } /* Numeric column headers right-align so MILES / $ / TOLLS sit above their right-aligned values. */ .sp-mileage-table th.sp-th-num { text-align: right; } /* Extra gap before the Status column so the right-aligned Tolls values don't butt against it. Desktop only — the mobile card reflow zeroes cell padding and stacks Status on its own row. */ @media (min-width: 601px) { .sp-mileage-table th:last-child, .sp-mileage-table td.sp-m-status { padding-left: 34px; } } .sp-leg-stat { color: var(--sp-text-light); font-variant-numeric: tabular-nums; } div.sp-leg-stat + .sp-day-total-line { border-top: 1px solid var(--light-grey); } /* A leg's miles are clickable to adjust for a detour/closure. Subtle dotted underline hints it's editable; the "+7.8" badge marks how far the saved miles differ from the computed ones. The underline rides the inner .sp-leg-val span so it hugs just the number, while the column stays right-aligned so every leg + the day total line up on the decimal. */ .sp-leg-edit { cursor: pointer; } .sp-leg-edit .sp-leg-val { border-bottom: 1px dotted transparent; } .sp-leg-edit:hover { color: var(--sp-text); } .sp-leg-edit:hover .sp-leg-val { border-bottom-color: var(--sp-border-focus, #cbd5e1); } .sp-leg-adjust { color: var(--sp-primary); font-weight: 600; } /* Each day's total sits on its own line at the BOTTOM of the stop rows — same weight as the per-leg figures, just a slightly darker shade to set it apart. The blank spacers keep the per-leg columns aligned line-for-line on desktop and collapse away in the mobile cards. */ .sp-day-total-line { color: var(--black); line-height: 1.5; } .sp-leg-blank { line-height: 1.5; } .sp-mileage-home-hint { font-size: 12.5px; color: var(--sp-text-secondary, #6b7280); background: var(--sp-bg-subtle, #f4f6f8); border: 1px dashed var(--sp-border, #d7dde3); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; } .sp-mileage-stop-actions { display: flex; gap: 10px; padding-left: 64px; /* align under the location column */ margin: 2px 0 4px; } .sp-mileage-totals { font-size: 13px; margin-top: 4px; margin-bottom: 4em; /* breathing room before Notes */ } .sp-text-warning { color: var(--sp-warning); font-weight: 600; } .sp-text-secondary { color: var(--sp-text-secondary); } .sp-admin-mileage-rate { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; padding: 12px 16px; background: var(--sp-bg); border-radius: var(--sp-radius); flex-wrap: wrap; } /* Inside a settings card the card already provides the framing, so the rate row sits flush. */ .sp-settings-card-body .sp-admin-mileage-rate { margin-bottom: 0; padding: 0; background: none; } .sp-flash { position: fixed; bottom: 24px; right: 24px; background: var(--sp-text); color: #fff; padding: 10px 18px; border-radius: var(--sp-radius-pill); font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 100000; } .sp-flash.show { opacity: 1; transform: translateY(0); } .sp-autosave-hint { align-self: center; font-size: 13px; color: var(--sp-text-light); font-style: italic; } .sp-mileage-destinations-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 24px 0 4px; } .sp-mileage-destinations-head h3 { margin: 0; } .sp-admin-mileage-rate label { font-weight: 600; font-size: 14px; margin-bottom: 0; } .sp-admin-mileage-rate .sp-input { max-width: 100px; } .sp-mileage-api-test { margin: 16px 0 24px; padding: 16px 20px; background: var(--sp-bg-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); } .sp-api-row { padding: 10px 14px; margin-bottom: 8px; background: var(--sp-bg); border-left: 4px solid var(--sp-text-light); border-radius: var(--sp-radius-sm); font-size: 13px; line-height: 1.5; } .sp-api-row strong { display: block; font-size: 14px; margin-bottom: 4px; } .sp-api-row code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--sp-bg-white); padding: 1px 5px; border-radius: 3px; } .sp-api-row.sp-api-ok { border-left-color: var(--sp-success); background: var(--sp-success-light); } .sp-api-row.sp-api-fail { border-left-color: var(--sp-danger); background: var(--sp-danger-light); } .sp-api-hint { margin-top: 12px; padding: 10px 14px; background: var(--sp-warning-light); border: 1px solid var(--sp-warning); border-radius: var(--sp-radius-sm); font-size: 13px; line-height: 1.5; color: var(--sp-text); } /* Sidebar nav badge */ .sp-nav-label-with-badge { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; } .sp-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 7px; background: var(--sp-warning); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; line-height: 1; } /* Modal */ .sp-modal-backdrop { position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.75) !important; display: flex !important; align-items: center; justify-content: center; z-index: 99999 !important; padding: 16px; } .sp-modal { position: relative; width: min(600px, 100%); max-height: 90vh; overflow-y: auto; padding: 28px; background: #ffffff !important; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); font-family: var(--sp-font); color: var(--sp-text); } .sp-modal h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--sp-text); text-transform: none; text-align: left; } .sp-modal p { margin: 0 0 16px; font-size: 14px; color: var(--sp-text-secondary); line-height: 1.5; } .sp-modal .sp-form-group { margin-bottom: 14px; } .sp-modal-actions { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sp-border); } /* The admin add/edit forms render their existing card straight into the backdrop; cap it to the same ~600px width and let tall forms scroll inside the popup. */ .sp-form-modal-backdrop > * { width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; margin: 0 !important; } /* Print */ @media print { body.sp-printing-mileage .sp-sidebar, body.sp-printing-mileage .sp-mobile-header, body.sp-printing-mileage .sp-topbar, body.sp-printing-mileage .sp-god-bar, body.sp-printing-mileage .sp-mileage-actions, body.sp-printing-mileage .sp-report-filters, body.sp-printing-mileage .sp-mileage-row-actions, body.sp-printing-mileage .sp-mileage-form-wrap, body.sp-printing-mileage .sp-overlay, body.sp-printing-mileage .sp-notification-panel { display: none !important; } body.sp-printing-mileage .sp-main { margin-left: 0; padding: 0; } body.sp-printing-mileage .sp-panel { display: none; } body.sp-printing-mileage #sp-panel-mileage { display: block; } body.sp-printing-mileage .sp-mileage-table { border: 1px solid #000; } body.sp-printing-mileage .sp-mileage-table th, body.sp-printing-mileage .sp-mileage-table td { border-bottom: 1px solid #ccc; } }