/* ═══════════════════════════════════════════════════════════════ Entity Admin Pages — Extracted inline styles Source files listed in section headers ═══════════════════════════════════════════════════════════════ */ /* === entity-admin/entity-admin-access-management.php === */ /* ── Access Management ── */ .sa-am-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; } .sa-am-stat { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.65rem; background: #F8F6F3; border: 1px solid #D8D0C3; font-size: 0.75rem; white-space: nowrap; } .sa-am-stat__value { font-weight: 700; color: #2A2622; } .sa-am-stat__label { color: #6E6660; } .sa-am-stat__icon { color: var(--sa-primary-color, #305e6d); font-size: 0.8rem; } /* Internal users table */ .sa-am-user-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid #EFEBE5; font-size: 0.8rem; } .sa-am-user-row:last-child { border-bottom: none; } .sa-am-user-row:hover { background: #F8F6F3; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; } .sa-am-user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #EFEBE5; flex-shrink: 0; } .sa-am-user-info { flex: 1; min-width: 0; } .sa-am-user-name { font-weight: 600; color: #2A2622; } .sa-am-user-meta { font-size: 0.72rem; color: #847C70; } .sa-am-user-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; flex-shrink: 0; } .sa-am-user-login { font-size: 0.7rem; color: #847C70; flex-shrink: 0; white-space: nowrap; } .sa-am-user-login--never { color: #B5AB9D; font-style: italic; } /* HCO tree */ .sa-am-hco { border: 1px solid #D8D0C3; margin-bottom: 0.75rem; background: #fff; } .sa-am-hco__header { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1rem; background: #F8F6F3; border-bottom: 1px solid #D8D0C3; cursor: pointer; user-select: none; } .sa-am-hco__header:hover { background: #EFEBE5; } .sa-am-hco__chevron { font-size: 0.65rem; color: #847C70; transition: transform 0.2s; } .sa-am-hco__header.collapsed .sa-am-hco__chevron { transform: rotate(-90deg); } .sa-am-hco__icon { width: 28px; height: 28px; object-fit: contain; background: #EFEBE5; flex-shrink: 0; } .sa-am-hco__name { font-size: 0.82rem; font-weight: 600; color: #2A2622; } .sa-am-hco__meta { font-size: 0.7rem; color: #847C70; } .sa-am-hco__body { padding: 0; } .sa-am-child { border-top: 1px solid #EFEBE5; } .sa-am-child__header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem 0.5rem 2.5rem; background: #fafbfc; border-bottom: 1px solid #EFEBE5; } .sa-am-child__icon { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #EFEBE5; flex-shrink: 0; } .sa-am-child__name { font-size: 0.78rem; font-weight: 600; color: #3D3833; } .sa-am-child__count { font-size: 0.65rem; color: #847C70; background: #EFEBE5; padding: 0.1rem 0.35rem; } /* Compact staff table */ .sa-am-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; } .sa-am-table thead th { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: #847C70; font-weight: 600; padding: 0.3rem 0.75rem; border-bottom: 1px solid #EFEBE5; text-align: left; background: #fff; } .sa-am-table tbody tr { border-bottom: 1px solid #f8f9fa; } .sa-am-table tbody tr:last-child { border-bottom: none; } .sa-am-table tbody tr:hover { background: #F8F6F3; } .sa-am-table td { padding: 0.4rem 0.75rem; vertical-align: middle; } .sa-am-table .td-avatar { width: 30px; padding-right: 0; } .sa-am-table .td-avatar img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #EFEBE5; } .sa-am-table .td-name { font-weight: 500; } .sa-am-table .td-login { font-size: 0.7rem; color: #847C70; } /* Clinic group in All Staff tab */ .sa-am-clinic-group { margin-bottom: 1rem; } .sa-am-clinic-group__header { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 700; color: #6E6660; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid #D8D0C3; } .sa-am-empty { text-align: center; padding: 2.5rem 1rem; color: #847C70; font-size: 0.82rem; } .sa-am-empty i { font-size: 1.4rem; margin-bottom: 0.4rem; display: block; opacity: 0.35; } @media (max-width: 768px) { .sa-am-user-row { flex-wrap: wrap; } .sa-am-user-badges { width: 100%; margin-top: 0.25rem; } .sa-am-child__header { padding-left: 1.5rem; } } /* === entity-admin/entity-admin-analytics.php === */ /* ── Analytics Page Styles ── */ /* legacy time-range classes removed — now using .sa-time-pills and .sa-controls-bar */ .sa-chart-card { background: #fff; border: 1px solid #D8D0C3; overflow: hidden; transition: box-shadow 0.2s ease; height: 100%; } .sa-chart-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.05); } .sa-chart-card__header { padding: 16px 20px; border-bottom: 1px solid #EFEBE5; display: flex; align-items: center; justify-content: space-between; } .sa-chart-card__title { font-size: 0.85rem; font-weight: 700; color: #2A2622; margin: 0; } .sa-chart-card__badge { font-size: 0.65rem; font-weight: 500; color: #847C70; background: #F8F6F3; border: 1px solid #D8D0C3; padding: 2px 8px; } .sa-chart-card__body { padding: 20px; } .sa-mini-stat { padding: 16px; text-align: center; border: 1px solid transparent; transition: transform 0.15s ease; } .sa-mini-stat:hover { transform: scale(1.02); } .sa-mini-stat__label { font-size: 0.62rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 6px; } .sa-mini-stat__value { font-size: 1.8rem; font-weight: 800; line-height: 1.1; } .sa-mini-stat__desc { font-size: 0.68rem; margin-top: 3px; opacity: 0.8; } .sa-perf-table { width: 100%; border-collapse: separate; border-spacing: 0; } .sa-perf-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: #6E6660; padding: 10px 12px; border-bottom: 2px solid #D8D0C3; white-space: nowrap; } .sa-perf-table tbody td { padding: 10px 12px; font-size: 0.82rem; border-bottom: 1px solid #EFEBE5; color: #3D3833; } .sa-perf-table tbody tr:hover { background: #F8F6F3; } .sa-perf-table tbody tr:last-child td { border-bottom: none; } @keyframes sa-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .sa-loading { background: linear-gradient(90deg, #EFEBE5 25%, #D8D0C3 50%, #EFEBE5 75%); background-size: 200% 100%; animation: sa-shimmer 1.5s ease-in-out infinite; color: transparent !important; user-select: none; } .sa-legend-item { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .sa-legend-dot { width: 12px; height: 12px; flex-shrink: 0; } .sa-legend-value { font-size: 1.15rem; font-weight: 700; color: #1A1715; line-height: 1; } .sa-legend-label { font-size: 0.72rem; color: #847C70; margin-top: 1px; } /* KPI row — enhanced cards with accents and sparklines */ .sa-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } @media (max-width: 1200px) { .sa-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media (max-width: 991px) { .sa-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; } .sa-kpi-card__inner { padding: 14px 14px 10px; } .sa-kpi-card__icon { width: 32px; height: 32px; font-size: 0.8rem; } .sa-kpi-card__sparkwrap { height: 36px; } .sa-kpi-card__sparkwrap canvas { height: 36px !important; } } @media (max-width: 768px) { .sa-kpi-row { gap: 8px; } .sa-kpi-card__inner { padding: 12px 12px 8px; } .sa-kpi-card__icon { width: 28px; height: 28px; } .sa-kpi-card__sparkwrap { height: 32px; } .sa-kpi-card__sparkwrap canvas { height: 32px !important; } } @media (max-width: 576px) { .sa-kpi-row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; } .sa-kpi-card__inner { padding: 10px 10px 6px; } .sa-kpi-card__icon { width: 26px; height: 26px; font-size: 0.7rem; } .sa-kpi-card__sparkwrap { height: 28px; } .sa-kpi-card__sparkwrap canvas { height: 28px !important; } } .sa-kpi-card { background: #fff; border: 1px solid #D8D0C3; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); } .sa-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -4px rgba(0,0,0,0.12); border-color: #B5AB9D; } .sa-kpi-card__accent { position: absolute; top: 0; left: 0; width: 4px; height: 100%; } /* flex column + the sub-line's margin-top:auto (below) is what actually keeps cards looking "even" in a stretch-height grid row: some cards have an extra .sa-kpi-card__delta row (Order Value) that others don't, so a plain block layout left the shorter cards with a dead gap between their sub-line and the stretched card's bottom edge while Order Value's content sat snug -- every card's sub-line now anchors to the same bottom edge regardless of how many rows of content sit above it. */ .sa-kpi-card__inner { padding: 20px 20px 14px; position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; } .sa-kpi-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } /* min-width:0 + wrap lets a long label ("Orders This Month") break onto a second line within its own space instead of pushing the flex row wider than the card and overlapping the icon beside it -- flex-shrink:0 on the icon (a fixed 40x40 box) keeps it from getting squeezed smaller instead. */ .sa-kpi-card__label { font-size: 0.7rem; font-weight: 600; color: #6E6660; text-transform: uppercase; letter-spacing: 0.06em; min-width: 0; white-space: normal; } .sa-kpi-card__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } .sa-kpi-card__value { font-size: 1.4rem; font-weight: 800; color: #1A1715; line-height: 1.1; margin-bottom: 8px; } @media (max-width: 1200px) { .sa-kpi-card__value { font-size: 1.15rem; } } @media (max-width: 991px) { .sa-kpi-card__value { font-size: 1.05rem; } .sa-kpi-card__label { font-size: 0.62rem; } } @media (max-width: 768px) { .sa-kpi-card__value { font-size: 1rem; } } @media (max-width: 576px) { .sa-kpi-card__value { font-size: 0.95rem; margin-bottom: 4px; } .sa-kpi-card__top { margin-bottom: 6px; } .sa-kpi-card__label { font-size: 0.58rem; } .sa-kpi-card__bar { margin-top: 6px; } .sa-kpi-card__change { font-size: 0.6rem; padding: 2px 6px; } .sa-kpi-card__prev { font-size: 0.58rem; } .sa-kpi-card__sub { font-size: 0.58rem; } } .sa-kpi-card__delta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .sa-kpi-card__change { font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; } .sa-kpi-card__change.positive { color: #5F7058; background: #F2F5EE; } .sa-kpi-card__change.negative { color: #dc2626; background: #fef2f2; } .sa-kpi-card__change.neutral { color: #6E6660; background: #EFEBE5; } .sa-kpi-card__prev { font-size: 0.66rem; color: #847C70; font-style: italic; } .sa-kpi-card__sub { font-size: 0.68rem; color: #847C70; margin-top: auto; padding-top: 6px; } .sa-kpi-card__sparkwrap { height: 44px; position: relative; overflow: hidden; } .sa-kpi-card__sparkwrap canvas { width: 100% !important; height: 44px !important; display: block; } .sa-kpi-card__bar { height: 5px; background: #EFEBE5; overflow: hidden; margin-top: 10px; } .sa-kpi-card__bar-fill { height: 100%; transition: width 1s ease; } /* Controls bar — glass morphism */ .sa-controls-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding: 12px 16px; background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(248,250,252,0.95)); border: 1px solid #D8D0C3; backdrop-filter: blur(10px); flex-wrap: wrap; } .sa-time-pills { display: inline-flex; align-items: center; gap: 2px; background: #EFEBE5; padding: 3px; } .sa-time-pill { border: none; background: transparent; color: #6E6660; font-size: 0.72rem; font-weight: 600; padding: 6px 14px; cursor: pointer; transition: all 0.25s ease; letter-spacing: 0.02em; } .sa-time-pill:hover { color: #3D3833; background: rgba(255,255,255,0.6); } .sa-time-pill.active { background: var(--sa-primary-color, #305e6d); color: #fff; box-shadow: 0 2px 8px rgba(48,94,109,0.25); } .sa-date-group { display: flex; align-items: center; gap: 6px; } .sa-date-field { position: relative; display: flex; align-items: center; } .sa-date-field i { position: absolute; left: 10px; font-size: 0.72rem; color: #847C70; pointer-events: none; z-index: 1; } .sa-date-field input { font-size: 0.78rem; padding: 7px 12px 7px 30px; border: 1px solid #D8D0C3; background: #fff; color: #3D3833; width: 140px; transition: all 0.25s ease; font-weight: 500; } .sa-date-field input:focus { outline: none; border-color: var(--sa-primary-color, #305e6d); box-shadow: 0 0 0 3px rgba(48,94,109,0.1); } .sa-date-sep { font-size: 0.7rem; color: #B5AB9D; font-weight: 600; } .sa-export-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; font-size: 0.78rem; font-weight: 600; color: #fff; background: var(--sa-primary-color, #305e6d); border: none; cursor: pointer; transition: all 0.25s ease; } .sa-export-pill:hover { background: #254a56; box-shadow: 0 4px 12px rgba(48,94,109,0.3); transform: translateY(-1px); } .sa-export-pill .dropdown-toggle::after { margin-left: 6px; } .sa-export-menu { border: 1px solid #D8D0C3; box-shadow: 0 8px 24px rgba(0,0,0,0.1); padding: 6px 0; } .sa-export-menu .dropdown-item { font-size: 0.78rem; padding: 8px 16px; color: #3D3833; } .sa-export-menu .dropdown-item:hover { background: #f0fdf9; color: var(--sa-primary-color, #305e6d); } .sa-last-updated { font-size: 0.68rem; color: #847C70; display: flex; align-items: center; gap: 6px; } .sa-live-dot { width: 6px; height: 6px; background: #7A8C6E; animation: sa-pulse-dot 2s infinite; } @keyframes sa-pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(122,140,110,0.4); } 50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(122,140,110,0); } } /* Funnel chart */ .sa-funnel { display: flex; flex-direction: column; gap: 4px; } .sa-funnel__step { display: flex; align-items: center; gap: 12px; padding: 10px 16px; transition: all 0.2s; } .sa-funnel__bar { height: 32px; transition: width 0.6s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 0.75rem; font-weight: 700; color: #fff; min-width: 40px; } .sa-funnel__label { font-size: 0.78rem; font-weight: 600; color: #3D3833; white-space: nowrap; min-width: 100px; } .sa-funnel__value { font-size: 0.85rem; font-weight: 700; color: #1A1715; } /* Report builder */ .sa-report-card { background: #fff; border: 1px solid #D8D0C3; padding: 20px; cursor: pointer; transition: all 0.2s; } .sa-report-card:hover { border-color: var(--sa-primary-color, #305e6d); box-shadow: 0 4px 16px rgba(0,0,0,0.08); } .sa-report-card.selected { border-color: var(--sa-primary-color, #305e6d); background: #f8fffe; } .sa-report-card__title { font-size: 0.9rem; font-weight: 700; color: #2A2622; margin-bottom: 4px; } .sa-report-card__desc { font-size: 0.75rem; color: #6E6660; } .sa-report-card__badge { font-size: 0.65rem; font-weight: 600; padding: 2px 8px; margin-top: 8px; display: inline-block; } /* Scrollable table */ .sa-scroll-table { max-height: 400px; overflow-y: auto; } /* scrollbar: platform-wide rules, atlasmps-custom.css */ /* Score badge */ .sa-score { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 24px; font-size: 0.7rem; font-weight: 700; } .sa-score.high { background: #DFE5D6; color: #5F7058; } .sa-score.medium { background: #E8E0D4; color: #3D3833; } .sa-score.low { background: #fef3c7; color: #A87825; } .sa-score.critical { background: #fef2f2; color: #dc2626; } /* ═══════════════════════════════════════════ ANALYTICS — MOBILE RESPONSIVE ═══════════════════════════════════════════ */ /* ── Tablet (<=991px) ── */ @media (max-width: 991px) { /* Chart heights — constrain to prevent tall scroll */ .sa-chart-card__body div[style*="height:320px"], .sa-chart-card__body div[style*="height:340px"] { height: 240px !important; } .sa-chart-card__body div[style*="height:300px"] { height: 220px !important; } .sa-chart-card__body div[style*="height:280px"], .sa-chart-card__body div[style*="height:220px"], .sa-chart-card__body div[style*="height:200px"] { height: 180px !important; } /* Controls bar — compact gap */ .sa-controls-bar { padding: 8px 10px; gap: 8px; margin-bottom: 16px; background: #fff; } .sa-controls-bar .d-flex.gap-3 { gap: 0.5rem !important; } /* Chart card compact */ .sa-chart-card__header { padding: 10px 14px; } .sa-chart-card__body { padding: 12px; } .sa-chart-card__title { font-size: 0.78rem; } /* Mini stats — smaller values */ .sa-mini-stat { padding: 10px; } .sa-mini-stat__value { font-size: 1.2rem !important; } .sa-mini-stat__desc { font-size: 0.62rem; } /* Perf tables — tighter */ .sa-perf-table thead th { font-size: 0.62rem; padding: 8px 8px; } .sa-perf-table tbody td { font-size: 0.75rem; padding: 8px 8px; } .sa-scroll-table { max-height: 300px; } /* Legend — compact */ .sa-legend-item { gap: 6px; margin-bottom: 8px; } .sa-legend-value { font-size: 0.9rem; } .sa-legend-label { font-size: 0.62rem; } .sa-legend-dot { width: 10px; height: 10px; } /* Funnel */ .sa-funnel__step { padding: 6px 10px; gap: 8px; } .sa-funnel__bar { height: 24px; font-size: 0.65rem; } .sa-funnel__label { font-size: 0.7rem; min-width: 70px; } /* CM2 goal tracker */ #cmGoalCard { padding: 0.75rem 1rem !important; } #cmGoalCard div[style*="font-size:2rem"] { font-size: 1.4rem !important; } #cmGoalCard div[style*="font-size:1.75rem"] { font-size: 1.25rem !important; } #cmGoalCard div[style*="min-width:250px"] { min-width: 180px !important; } /* Report cards */ .sa-report-card { padding: 14px; } .sa-report-card__title { font-size: 0.82rem; } .sa-report-card__desc { font-size: 0.7rem; } } /* ── Mobile (<=576px) ── */ @media (max-width: 576px) { /* Chart heights — much shorter on phone */ .sa-chart-card__body div[style*="height:320px"], .sa-chart-card__body div[style*="height:340px"] { height: 180px !important; } .sa-chart-card__body div[style*="height:300px"] { height: 170px !important; } .sa-chart-card__body div[style*="height:280px"], .sa-chart-card__body div[style*="height:220px"], .sa-chart-card__body div[style*="height:200px"] { height: 150px !important; } /* Pie/donut chart + legend — stack vertically */ .sa-chart-card .row.align-items-center > .col-7 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } .sa-chart-card .row.align-items-center > .col-5 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; margin-top: 8px; } .sa-chart-card .row.align-items-center > .col-7 div[style*="height"] { height: 140px !important; } /* Legend — horizontal on mobile */ .sa-chart-card .col-5 .sa-legend-item { display: inline-flex; margin-right: 10px; margin-bottom: 4px; } .sa-legend-value { font-size: 0.8rem; } .sa-legend-dot { width: 8px; height: 8px; } /* Chart card */ .sa-chart-card__header { padding: 8px 10px; } .sa-chart-card__body { padding: 8px; } .sa-chart-card__title { font-size: 0.72rem; } .sa-chart-card__badge { font-size: 0.58rem; padding: 1px 6px; } /* Mini stats — compact for phone */ .sa-mini-stat { padding: 8px; } .sa-mini-stat__value { font-size: 1rem !important; } .sa-mini-stat__desc { font-size: 0.58rem; } /* Controls bar */ .sa-controls-bar { flex-direction: column; align-items: stretch; padding: 6px; gap: 6px; margin-bottom: 10px; background: #fff; backdrop-filter: none; } .sa-controls-bar > .d-flex { flex-direction: column; gap: 6px !important; width: 100%; } .sa-time-pills { width: 100%; justify-content: center; flex-wrap: wrap; gap: 1px; } .sa-time-pill { flex: 1 1 auto; text-align: center; padding: 5px 6px; font-size: 0.62rem; } .sa-date-group { width: 100%; } .sa-date-field { flex: 1; } .sa-date-field input { width: 100% !important; font-size: 0.72rem; padding: 6px 10px 6px 26px; } .sa-date-sep { display: none; } .sa-export-pill { width: 100%; justify-content: center; font-size: 0.72rem; padding: 6px 12px; } .sa-last-updated { font-size: 0.58rem; justify-content: center; } /* Row gutters — tighter */ .tab-pane .row.g-3 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; } .tab-pane .row.g-3.mb-3 { margin-bottom: 0.5rem !important; } /* Perf tables */ .sa-perf-table thead th { font-size: 0.58rem; padding: 6px; } .sa-perf-table tbody td { font-size: 0.7rem; padding: 6px; } .sa-scroll-table { max-height: 250px; } /* Funnel */ .sa-funnel__step { padding: 4px 8px; gap: 6px; } .sa-funnel__bar { height: 20px; font-size: 0.6rem; min-width: 30px; } .sa-funnel__label { font-size: 0.62rem; min-width: 55px; } .sa-funnel__value { font-size: 0.72rem; } /* CM2 goal tracker — stack and shrink */ #cmGoalCard { padding: 0.625rem 0.75rem !important; } #cmGoalCard .d-flex.gap-3 { gap: 0.5rem !important; } #cmGoalCard div[style*="font-size:2rem"] { font-size: 1.1rem !important; } #cmGoalCard div[style*="font-size:1.75rem"] { font-size: 1.1rem !important; } #cmGoalCard div[style*="min-width:250px"] { min-width: 0 !important; width: 100% !important; } #cmGoalCard div[style*="max-width:550px"] { max-width: 100% !important; } /* Section dividers */ .d-flex.gap-2.mt-4.mb-3 { margin-top: 1rem !important; margin-bottom: 0.5rem !important; } .d-flex.gap-2.mt-4.mb-3 span { font-size: 0.62rem; } /* Report cards */ .sa-report-card { padding: 10px; } .sa-report-card__title { font-size: 0.78rem; } .sa-report-card__desc { font-size: 0.65rem; } /* Tab card header overflow */ .card-header[style*="overflow-x"] { padding: 0.375rem 0.5rem !important; } /* KPI hover — disable on touch */ .sa-kpi-card:hover { transform: none !important; box-shadow: none !important; } .sa-chart-card:hover { box-shadow: none; } .sa-mini-stat:hover { transform: none; } .sa-report-card:hover { box-shadow: none; } } /* === entity-admin/entity-admin-customer-config.php === */ .sa-activity-timeline { position: relative; padding-left: 40px; } .sa-activity-timeline::before { content: ''; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: #D8D0C3; } .sa-activity-timeline__item { position: relative; padding-bottom: 24px; } .sa-activity-timeline__item:last-child { padding-bottom: 0; } .sa-activity-timeline__icon { position: absolute; left: -40px; top: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; z-index: 1; } .sa-activity-timeline__content { padding: 2px 0 0 8px; } .sa-activity-timeline__title { font-weight: 600; font-size: 0.85rem; color: #2A2622; } .sa-activity-timeline__desc { font-size: 0.78rem; color: #6E6660; margin-top: 2px; } .sa-activity-timeline__date { font-size: 0.72rem; color: #847C70; margin-top: 3px; } /* === entity-admin/entity-admin-customer-return-entry.php === */ /* === Return Detail v3 === */ /* -- Header -- */ .sa-rd-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #D8D0C3; background: linear-gradient(135deg, #F8F6F3 0%, #EFEBE5 100%); } .sa-rd-header__left { display: flex; align-items: center; gap: 0.85rem; } .sa-rd-header__icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, #fef2f2, #fecaca); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #dc2626; } .sa-rd-header__title { font-size: 1.15rem; font-weight: 700; color: #1A1715; } .sa-rd-header__sub { font-size: 0.78rem; color: #6E6660; font-weight: 500; margin-top: 0.1rem; } .sa-rd-header__date::before { content: '\B7'; margin: 0 0.4rem; } .sa-rd-header__right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } /* -- Section -- */ .sa-rd-section { border-bottom: 1px solid #D8D0C3; } .sa-rd-section__head { padding: 0.65rem 1.5rem; font-size: 0.72rem; font-weight: 700; color: #524A45; background: #F8F6F3; border-bottom: 1px solid #D8D0C3; text-transform: uppercase; letter-spacing: 0.04em; } /* -- Items Table -- */ .sa-rd-table thead th { background: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6E6660; padding: 0.6rem 1.5rem; border-bottom: 2px solid #D8D0C3; } .sa-rd-table tbody td { padding: 0.75rem 1.5rem; font-size: 0.85rem; color: #3D3833; vertical-align: middle; border-bottom: 1px solid #EFEBE5; } .sa-rd-table tbody tr:hover { background: #fafbfc; } .sa-rd-table tfoot td { padding: 0.75rem 1.5rem; background: #F8F6F3; border-top: 2px solid #D8D0C3; } .sa-rd-total { color: #5F7058; font-size: 0.95rem; } /* -- Three-column info row -- */ .sa-rd-info-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; } .sa-rd-info-col { padding: 1.25rem 1.5rem; border-right: 1px solid #D8D0C3; } .sa-rd-info-col:last-child { border-right: none; } .sa-rd-info-col__head { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #847C70; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #EFEBE5; } /* -- Description List -- */ .sa-rd-dl { margin: 0; } .sa-rd-dl__row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.4rem 0; } .sa-rd-dl__row dt { font-size: 0.76rem; font-weight: 600; color: #6E6660; flex-shrink: 0; margin-right: 0.75rem; } .sa-rd-dl__row dd { font-size: 0.84rem; font-weight: 500; color: #2A2622; text-align: right; margin: 0; word-break: break-word; } /* -- Documents and Notes -- */ .sa-rd-doc { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #EFEBE5; } .sa-rd-doc a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--sa-primary-color, #305E6C); text-decoration: none; padding: 0.45rem 0.85rem; border: 1px solid #D8D0C3; border-radius: 6px; transition: all 0.15s; } .sa-rd-doc a:hover { background: #F8F6F3; border-color: #B5AB9D; } .sa-rd-notes { font-size: 0.84rem; color: #524A45; line-height: 1.5; } /* -- Status Stepper -- */ .sa-stepper { position: relative; padding: 2rem 4rem 1.25rem; border-bottom: 1px solid #D8D0C3; } .sa-stepper__track { position: absolute; top: 2.65rem; left: 4rem; right: 4rem; height: 4px; background: #D8D0C3; border-radius: 2px; } .sa-stepper__fill { height: 100%; background: var(--sa-primary-color, #305E6C); border-radius: 2px; transition: width 0.6s ease; } .sa-stepper__steps { position: relative; display: flex; justify-content: space-between; } .sa-stepper__step { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; z-index: 1; min-width: 80px; } .sa-stepper__dot { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 3px solid #D8D0C3; color: #847C70; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all 0.3s; } .sa-stepper__label { font-size: 0.75rem; font-weight: 600; color: #847C70; white-space: nowrap; } .sa-stepper__step--done .sa-stepper__dot { background: #DFE5D6; border-color: #7A8C6E; color: #5F7058; } .sa-stepper__step--done .sa-stepper__label { color: #5F7058; } .sa-stepper__step--current .sa-stepper__dot { background: var(--sa-primary-color, #305E6C); border-color: var(--sa-primary-color, #305E6C); color: #fff; box-shadow: 0 0 0 6px rgba(48, 94, 108, 0.15); transform: scale(1.15); } .sa-stepper__step--current .sa-stepper__label { color: var(--sa-primary-color, #305E6C); font-weight: 700; font-size: 0.78rem; } .sa-stepper__step--denied .sa-stepper__dot { background: #dc2626; border-color: #dc2626; color: #fff; box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.15); transform: scale(1.15); } .sa-stepper__step--denied .sa-stepper__label { color: #dc2626; font-weight: 700; font-size: 0.78rem; } /* -- Admin Actions Bar -- */ .sa-rd-actions { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: #F8F6F3; border-bottom: 1px solid #D8D0C3; } .sa-rd-actions__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6E6660; } .sa-rd-actions__btns { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* -- Activity Log -- */ .sa-activity-log__item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid #EFEBE5; } .sa-activity-log__item:last-child { border-bottom: none; } .sa-activity-log__icon { width: 28px; height: 28px; border-radius: 50%; background: #EFEBE5; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; margin-top: 0.1rem; } .sa-activity-log__title { font-size: 0.82rem; color: #2A2622; font-weight: 500; } .sa-activity-log__time { font-size: 0.7rem; color: #847C70; margin-top: 0.15rem; } /* -- Responsive -- */ @media (max-width: 991px) { .sa-rd-info-row { grid-template-columns: 1fr; } .sa-rd-info-col { border-right: none; border-bottom: 1px solid #D8D0C3; } .sa-rd-info-col:last-child { border-bottom: none; } } @media (max-width: 576px) { .sa-rd-header { padding: 1rem; } .sa-rd-section__head { padding: 0.65rem 1rem; } .sa-rd-table thead th, .sa-rd-table tbody td, .sa-rd-table tfoot td { padding-left: 1rem; padding-right: 1rem; } .sa-rd-info-col { padding: 1rem; } .sa-rd-dl__row { flex-direction: column; gap: 0.1rem; } .sa-rd-dl__row dd { text-align: left; } .sa-stepper { padding: 1.25rem 1rem 0.75rem; } .sa-stepper__dot { width: 34px; height: 34px; font-size: 0.75rem; } .sa-rd-actions { flex-direction: column; gap: 0.5rem; align-items: flex-start; } } /* === entity-admin/entity-admin-customer-settings.php === */ /* ── Customer Type Selector ──────────────────────────────────────── */ .sa-type-selector__options { display: flex; gap: 0.75rem; } .sa-type-selector__option { flex: 1; display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: #F8F6F3; border: 2px solid #D8D0C3; cursor: pointer; transition: all 0.2s ease; text-align: left; color: #6E6660; } .sa-type-selector__option:hover { border-color: #847C70; background: #EFEBE5; } .sa-type-selector__option--active { border-color: var(--sa-primary-color, #305E6C); background: rgba(var(--primary-rgb, 48, 94, 109), 0.04); color: #2A2622; } .sa-type-selector__option--active .sa-type-selector__icon { color: var(--sa-primary-color, #305E6C); background: rgba(var(--primary-rgb, 48, 94, 109), 0.1); } .sa-type-selector__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: #D8D0C3; color: #847C70; flex-shrink: 0; transition: all 0.2s ease; } .sa-type-selector__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sa-type-selector__name { font-size: 0.875rem; font-weight: 700; line-height: 1.2; } .sa-type-selector__desc { font-size: 0.72rem; color: #847C70; line-height: 1.3; } .sa-type-selector__option--active .sa-type-selector__name { color: var(--sa-primary-color, #305E6C); } .sa-type-guard { font-size: 0.78rem; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: 0.5rem 0.75rem; line-height: 1.4; } .sa-discount-inherit-note { font-size: 0.78rem; color: #847C70; line-height: 1.4; max-width: var(--sa-control-max, 440px); margin: -0.25rem 0 1rem calc(var(--sa-form-label-col, 180px) + var(--sa-form-gap, 12px)); } [data-theme-mode="dark"] .sa-discount-inherit-note { color: #A8A096; } /* Inherited (read-only) discount -- must not look editable */ #discountAmount[readonly] { background: #F3F0EB; color: #6B645A; cursor: not-allowed; } [data-theme-mode="dark"] #discountAmount[readonly] { background: rgba(255, 255, 255, 0.04); color: #A8A096; } @media (max-width: 768px) { .sa-discount-inherit-note { margin-left: 0; } } @media (max-width: 576px) { .sa-type-selector__options { flex-direction: column; } .sa-type-selector__option { padding: 0.75rem 1rem; } .sa-type-selector__icon { width: 36px; height: 36px; font-size: 1rem; } } /* ── Invoice Export Modal (mirrors entity-admin-export-view.php) ──── */ /* NOTE: .sa-export-* classes below are duplicated from entity-admin-export-view.php; keeping them here ensures the customer-settings invoice export modal works even without the export-view include. */ /* ── Customer Dashboard Layout ────────────────────────────────────── */ .cs-container { display: flex; gap: 0; min-height: calc(100vh - 280px); border-radius: 0; overflow: visible; } .cs-sidebar { width: 260px; flex-shrink: 0; border-right: 1px solid #D8D0C3; background: #f8f9fa; display: flex; flex-direction: column; } .cs-sidebar__header { padding: 1.25rem 1rem; border-bottom: 1px solid #D8D0C3; display: flex; align-items: center; gap: 0.75rem; } .cs-sidebar__logo { width: 40px; height: 40px; border-radius: 0; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #D8D0C3; color: #6E6660; font-size: 1rem; } .cs-sidebar__logo img { width: 100%; height: 100%; object-fit: cover; } .cs-sidebar__title { font-weight: 600; font-size: 0.875rem; color: #2A2622; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-sidebar__nav { padding: 0.5rem 0; flex: 1; overflow-y: auto; } .cs-sidebar__nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.65rem 1.25rem; font-size: 0.875rem; color: #524A45; text-decoration: none; transition: background 0.15s, color 0.15s; border-left: 3px solid transparent; } .cs-sidebar__nav-item:hover { background: #f0f0f0; color: #2A2622; } .cs-sidebar__nav-item.active { background: #fff; color: var(--sa-primary-color, #463C37); border-left-color: var(--sa-primary-color, #463C37); font-weight: 600; } .cs-sidebar__nav-item i { width: 18px; text-align: center; font-size: 0.78rem; } /* Content */ .cs-content { flex: 1; padding: 0; overflow: visible; min-width: 0; } .cs-panel { display: none; padding: 0.75rem 2rem 2rem; } .cs-panel.active { display: block; } .cs-panel__title { font-size: 1.1rem; font-weight: 600; color: #2A2622; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid #D8D0C3; } /* Stat Cards */ .cs-stat-card { display: flex; align-items: center; gap: 0.875rem; padding: 1rem; border-radius: 0; border: 1px solid #D8D0C3; background: #fff; transition: all 0.15s; } a.cs-stat-card--link { text-decoration: none; color: inherit; cursor: pointer; } a.cs-stat-card--link:hover { border-color: var(--sa-primary-color, #463C37); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); } a.cs-stat-card--link:hover .lni-chevron-right-circle { color: var(--sa-primary-color, #463C37) !important; } .cs-stat-card__icon { width: 44px; height: 44px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .cs-stat-card__value { font-size: 1.35rem; font-weight: 700; color: #2A2622; line-height: 1.2; } .cs-stat-card__label { font-size: 0.75rem; color: #6E6660; text-transform: uppercase; letter-spacing: 0.03em; } /* Info Sections (Contact) */ .cs-info-section { padding: 1rem; border: 1px solid #D8D0C3; border-radius: 0; background: #fafafa; } .cs-info-section__title { font-size: 0.85rem; font-weight: 600; color: #3D3833; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #D8D0C3; } .cs-info-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.82rem; } .cs-info-row__label { color: #6E6660; flex-shrink: 0; margin-right: 1rem; } .cs-info-row__value { color: #2A2622; font-weight: 500; text-align: right; } /* Map Placeholder */ .cs-map-placeholder { padding: 1rem; border-radius: 0; background: #D8D0C3; color: #6E6660; font-size: 0.8rem; text-align: center; } /* Image Previews (Branding) */ .cs-img-preview { display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; background: #f8f9fa; border: 2px dashed #dee2e6; } .cs-img-preview--rect { width: 80px; height: 80px; border-radius: 0; } .cs-img-preview--circle { width: 64px; height: 64px; border-radius: 50%; } .cs-img-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .cs-img-preview--circle img { width: 100%; height: 100%; object-fit: cover; } /* Brand Preview Card */ /* Brand Preview — mimics a browser tab, an app header, and a nav bar */ .cs-brand-preview { border: 1px solid #D8D0C3; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(42,38,34,0.10); } /* Browser tab mock -- gives the Icon upload a real, legible purpose instead of a second unexplained square next to the Logo. */ .cs-brand-preview__browser { background: #EFEBE5; padding: 0.6rem 0.7rem 0; } .cs-brand-preview__browser-dots { display: flex; gap: 5px; padding: 0 0.35rem 0.5rem; } .cs-brand-preview__browser-dots span { width: 8px; height: 8px; border-radius: 50%; background: #D8D0C3; display: block; } .cs-brand-preview__tab { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 200px; background: #fff; border: 1px solid #D8D0C3; border-bottom: none; border-radius: 8px 8px 0 0; padding: 0.45rem 0.85rem; margin-left: 0.6rem; } .cs-brand-preview__favicon { width: 16px; height: 16px; flex-shrink: 0; border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #F8F6F3; color: #A39A8F; font-size: 0.6rem; } .cs-brand-preview__favicon img { width: 100%; height: 100%; object-fit: cover; } .cs-brand-preview__tab-title { font-size: 0.72rem; color: #524A45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-brand-preview__header { padding: 2rem 1.5rem; text-align: center; color: #fff; } /* Logo lockup -- a flexible-width slot (not a forced square) so a wide wordmark logo renders at a readable size instead of being squeezed/clipped. The Icon upload appears here too, as a badge, so it's visibly connected to the Logo rather than living in its own disconnected corner of the form. */ .cs-brand-preview__logo-slot { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 88px; max-width: 210px; height: 72px; margin: 0 auto 0.85rem; padding: 0.5rem 1rem; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); border-radius: 10px; overflow: hidden; } .cs-brand-preview__logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; } .cs-brand-preview__logo-slot i { font-size: 1.85rem; opacity: 0.5; } .cs-brand-preview__badge { position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cs-brand-preview__badge img { width: 100%; height: 100%; object-fit: cover; } .cs-brand-preview__badge i { font-size: 0.85rem; color: #A39A8F; } .cs-brand-preview__name { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; text-wrap: balance; } .cs-brand-preview__body { padding: 1.25rem 1.5rem; background: #fff; } .cs-brand-preview__eyebrow { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #847C70; margin-bottom: 0.75rem; } .cs-brand-preview__colors { display: flex; gap: 1rem; margin-bottom: 1rem; } .cs-brand-preview__color-block { flex: 1; text-align: center; } .cs-brand-preview__color-swatch { width: 100%; height: 44px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.08); margin-bottom: 0.35rem; } .cs-brand-preview__color-name { font-size: 0.7rem; font-weight: 600; color: #524A45; } .cs-brand-preview__color-label { font-size: 0.68rem; color: #847C70; font-family: monospace; } .cs-brand-preview__url { font-size: 0.78rem; color: #6E6660; padding-top: 0.75rem; border-top: 1px solid #EFEBE5; } /* Mock nav strip -- shows the primary color doing real interface work, not just sitting in a swatch. */ .cs-brand-preview__mock-nav { padding: 0.85rem 1.5rem; background: #2A2622; display: flex; align-items: center; gap: 0.6rem; border-top: 1px solid rgba(255,255,255,0.06); } .cs-brand-preview__mock-nav-item { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.16); } .cs-brand-preview__mock-nav-item--active { background: var(--cs-brand-preview-accent, #847C70); } /* Global: Bigger buttons, consistent inputs */ .cs-panel .btn { font-size: 0.85rem; padding: 0.5rem 1.25rem; font-weight: 600; } .cs-panel .btn-sm { font-size: 0.8rem; padding: 0.4rem 1rem; } .cs-panel .form-control, .cs-panel .form-select { font-size: 0.85rem; padding: 0.5rem 0.75rem; } .cs-panel .form-label { font-size: 0.8rem; font-weight: 600; color: #3D3833; margin-bottom: 0.35rem; } .cs-panel textarea.form-control { min-height: 80px; } /* ── Responsive: Tablets (max-width: 991px) ─────────────────────── */ @media (max-width: 991px) { .cs-container { flex-direction: column; } .cs-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #D8D0C3; } .cs-sidebar__header { padding: 0.75rem 1rem; } .cs-sidebar__nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0; } .cs-sidebar__nav::-webkit-scrollbar { display: none; } .cs-sidebar__nav-item { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; padding: 0.5rem 1rem; flex-shrink: 0; } .cs-sidebar__nav-item.active { border-left-color: transparent; border-bottom-color: var(--sa-primary-color, #463C37); } .cs-panel { padding: 0.75rem 1.25rem 1.25rem; } .cs-panel__title { font-size: 1rem; } /* Overview: Stat cards side-by-side on iPad */ #panel-overview .row.g-3.mb-4 .col-sm-6 { flex: 0 0 50%; max-width: 50%; } /* Branding: stack form and brand board */ #panel-branding .col-lg-7, #panel-branding .col-lg-5 { flex: 0 0 100%; max-width: 100%; } /* Contact: side-by-side on iPad */ #panel-contact .col-lg-6 { flex: 0 0 50%; max-width: 50%; } /* Tables: horizontal scroll */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .table-responsive::-webkit-scrollbar { display: none; } /* Activity filters: wrap more tightly */ .sa-filter-group .d-flex.align-items-center.gap-2 { flex-wrap: wrap; } } /* ── Responsive: iPad specific (768px - 1024px) ─────────────────── */ @media (min-width: 768px) and (max-width: 1024px) { /* Overview quick info: side-by-side */ #panel-overview .row.g-3[style*="min-height"] .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .cs-panel { padding: 0.75rem 1.5rem 1.5rem; } } /* ── Responsive: Phones (max-width: 767px) ──────────────────────── */ @media (max-width: 767px) { /* Sidebar: compact horizontal pill bar */ .cs-sidebar__header { padding: 0.5rem 0.75rem; gap: 0.5rem; } .cs-sidebar__logo { width: 32px; height: 32px; } .cs-sidebar__title { font-size: 0.78rem; } .cs-sidebar__nav-item { font-size: 0.75rem; padding: 0.45rem 0.75rem; gap: 0.4rem; } .cs-sidebar__nav-item i { font-size: 0.7rem; } /* Panels: tighter padding, smaller text */ .cs-panel { padding: 0.6rem 0.75rem 1rem; } .cs-panel__title { font-size: 0.92rem; margin-bottom: 0.85rem; padding-bottom: 0.5rem; } .cs-panel .form-label { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-panel .form-control, .cs-panel .form-select { font-size: 0.8rem; padding: 0.4rem 0.6rem; } .cs-panel .btn { font-size: 0.78rem; padding: 0.4rem 0.9rem; } .cs-panel .btn-sm { font-size: 0.75rem; padding: 0.35rem 0.75rem; } /* Page header: smaller title */ .page-header-breadcrumb h4 { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; } .page-header-breadcrumb .breadcrumb { font-size: 0.72rem; } /* Overview: Clinic header */ #panel-overview .d-flex.align-items-center.gap-3.mb-4 h4 { font-size: 1.05rem; } #panel-overview .d-flex.align-items-center.gap-3.mb-4 { gap: 0.5rem !important; } #panel-overview .d-flex.align-items-center.gap-3.mb-4 .ms-auto .text-end div:last-child { font-size: 1.15rem; } /* Overview: Stat cards - horizontal scroll */ #panel-overview .row.g-3.mb-4 { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.5rem; margin-left: 0; margin-right: 0; padding-bottom: 0.25rem; } #panel-overview .row.g-3.mb-4::-webkit-scrollbar { display: none; } #panel-overview .row.g-3.mb-4 > [class*="col-"] { flex: 0 0 auto; width: auto; min-width: 160px; max-width: 200px; padding-left: 0; padding-right: 0; } .cs-stat-card { padding: 0.65rem 0.75rem; gap: 0.6rem; } .cs-stat-card__icon { width: 36px; height: 36px; font-size: 0.9rem; } .cs-stat-card__value { font-size: 1.1rem; } .cs-stat-card__label { font-size: 0.68rem; } /* Setup / Onboarding badges: horizontal scroll */ #panel-overview .d-flex.flex-wrap.gap-1.mt-2 { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } #panel-overview .d-flex.flex-wrap.gap-1.mt-2::-webkit-scrollbar { display: none; } #panel-overview .d-flex.flex-wrap.gap-1.mt-2 > span { flex-shrink: 0; white-space: nowrap; } /* Setup/Onboarding status boxes: smaller text */ #panel-overview .mb-4[style*="padding:0.75rem"] { padding: 0.5rem 0.75rem !important; } /* Overview: Quick info cards - stack on phone */ #panel-overview .row.g-3[style*="min-height"] { min-height: auto !important; } #panel-overview .row.g-3[style*="min-height"] .col-lg-6 { flex: 0 0 100%; max-width: 100%; } /* Contact: stack on phone */ #panel-contact .col-lg-6 { flex: 0 0 100%; max-width: 100%; } /* Contact info rows: don't wrap labels */ .cs-info-row { font-size: 0.78rem; } .cs-info-row__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; } .cs-info-row__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Google Map: responsive */ #panel-contact .mt-3 iframe, #panel-overview iframe { min-height: 180px; } /* Branding: stack form and preview */ #panel-branding .col-lg-7, #panel-branding .col-lg-5 { flex: 0 0 100%; max-width: 100%; } /* Branding: smaller image previews */ .cs-img-preview--rect { width: 60px; height: 60px; } .cs-img-preview--circle { width: 48px; height: 48px; } /* Branding: color inputs side by side */ #panel-branding .row.g-3.mb-3 .col-6 { flex: 0 0 50%; max-width: 50%; } /* Brand board: scale down */ #brandPreviewCard { font-size: 0.9em; } #brandPreviewCard [style*="padding:2rem"] { padding: 1.25rem 1rem !important; } #brandPreviewCard [style*="padding:1.25rem"] { padding: 0.85rem 1rem !important; } /* Configuration form: responsive labels */ .sa-form--label-180 .sa-form-label { width: auto; min-width: 110px; max-width: 130px; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Distributors: table horizontal scroll with sticky first column */ #distributorsContent .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #distributorsContent .table-responsive::-webkit-scrollbar { display: none; } #distributorsContent .table-responsive table th:first-child, #distributorsContent .table-responsive table td:first-child { position: sticky; left: 0; background: #fff; z-index: 2; } #distributorsContent .table-responsive table thead th:first-child { background: #f8f9fa; } /* Distributor toggle labels: no wrap */ #distributorsContent .form-check-label, #distEmailMatrix .form-check-label { white-space: nowrap; } /* Email Preferences: matrix horizontal scroll */ #emailPreferencesContent .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #emailPreferencesContent .table-responsive::-webkit-scrollbar { display: none; } #emailPreferencesContent .table-responsive table th:first-child, #emailPreferencesContent .table-responsive table td:first-child { position: sticky; left: 0; background: #fff; z-index: 2; } #emailPreferencesContent .table-responsive table thead th:first-child { background: #f8f9fa; } /* Email prefs: By Staff / By Email card grid */ #epByStaff .col-lg-6, #epByStaff .col-xl-4, #epByEmail .col-lg-6, #epByEmail .col-xl-4 { flex: 0 0 100%; max-width: 100%; } /* Email prefs tab pills: smaller */ #emailPreferencesContent .nav .nav-link { font-size: 0.78rem; padding: 0.4rem 0.65rem; white-space: nowrap; } /* Activity: compact timeline */ .sa-activity-timeline { padding-left: 32px; } .sa-activity-timeline::before { left: 13px; } .sa-activity-timeline__icon { left: -32px; width: 28px; height: 28px; font-size: 0.65rem; } .sa-activity-timeline__content { padding: 0 0 0 4px; } .sa-activity-timeline__title { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sa-activity-timeline__desc { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sa-activity-timeline__date { font-size: 0.65rem; } .sa-activity-timeline__item { padding-bottom: 16px; } /* Activity: filters scroll horizontally */ .sa-filter-group__options { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; gap: 0.25rem; } .sa-filter-group__options::-webkit-scrollbar { display: none; } .sa-filter-group__options .btn { flex-shrink: 0; white-space: nowrap; font-size: 0.75rem; padding: 0.25rem 0.6rem; } /* Activity: date range inputs stack */ .sa-filter-group .d-flex.align-items-center.gap-2 { flex-wrap: wrap; gap: 0.35rem !important; } .sa-filter-group .d-flex.align-items-center.gap-2 input[type="date"] { width: 120px !important; font-size: 0.78rem; } /* Activity: search bar */ #activitySearch { font-size: 0.8rem; } .sa-search-filter-wrapper { flex-wrap: wrap; gap: 0.5rem; } /* General: no text wrapping on badges */ .badge { white-space: nowrap; } /* Breadcrumb items: truncate */ .breadcrumb-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } } /* ── Responsive: Small phones (max-width: 480px) ────────────────── */ @media (max-width: 480px) { .page-header-breadcrumb h4 { font-size: 0.85rem; max-width: 60vw; } #panel-overview .d-flex.align-items-center.gap-3.mb-4 h4 { font-size: 0.92rem; } /* Stat cards: even more compact */ #panel-overview .row.g-3.mb-4 > [class*="col-"] { min-width: 140px; max-width: 170px; } .cs-stat-card { padding: 0.5rem 0.6rem; gap: 0.45rem; } .cs-stat-card__icon { width: 30px; height: 30px; font-size: 0.8rem; } .cs-stat-card__value { font-size: 0.95rem; } .cs-stat-card__label { font-size: 0.62rem; } /* Smaller panel text */ .cs-panel__title { font-size: 0.85rem; } .cs-panel .form-control, .cs-panel .form-select { font-size: 0.75rem; } /* Configuration form labels: even narrower */ .sa-form--label-180 .sa-form-label { min-width: 90px; max-width: 110px; font-size: 0.72rem; } /* Contact card text */ .cs-info-section__title { font-size: 0.78rem; } .cs-info-row { font-size: 0.72rem; } .cs-info-row__label { max-width: 80px; } /* Activity timeline: tighter */ .sa-activity-timeline { padding-left: 28px; } .sa-activity-timeline::before { left: 10px; } .sa-activity-timeline__icon { left: -28px; width: 24px; height: 24px; font-size: 0.6rem; } /* Email prefs: card text smaller */ #emailPreferencesContent .card-header .fw-semibold { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sidebar nav: even smaller */ .cs-sidebar__nav-item { font-size: 0.7rem; padding: 0.4rem 0.6rem; } } /* ═════════ Products Tab ═════════ */ .cs-product-cat-nav { margin-bottom: 1.25rem; } .cs-product-cat-nav .cs-product-category-tab { background: transparent; border: none; color: #6E6660; font-weight: 600; font-size: 0.85rem; padding: 0.65rem 1rem; cursor: pointer; } .cs-product-cat-nav .cs-product-category-tab:hover { color: #2A2622; } .cs-product-cat-nav .cs-product-category-tab.active { color: #2A2622; } .cs-product-cat-nav .cs-product-category-tab .badge { font-weight: 600; font-size: 0.68rem; } .cs-product-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 1rem; background: linear-gradient(135deg, #F8F6F3 0%, #EFEBE5 100%); border: 1px solid #D8D0C3; border-radius: 10px; margin-bottom: 1rem; } .cs-product-header__title { font-size: 0.95rem; font-weight: 700; color: #1A1715; } .cs-product-header__sub { font-size: 0.8rem; color: #6E6660; margin-top: 2px; } .cs-product-header__count { font-size: 0.8rem; font-weight: 600; color: #524A45; background: #fff; border: 1px solid #D8D0C3; padding: 0.35rem 0.75rem; border-radius: 999px; white-space: nowrap; } .cs-product-table { font-size: 0.825rem; } .cs-product-table thead th { background: #F8F6F3; color: #524A45; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #D8D0C3; } .cs-product-table tbody tr:hover { background: #F8F6F3; } .cs-product-table__sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: #3D3833; } .cs-product-table__name { font-weight: 600; color: #1A1715; } .cs-product-table__size { font-size: 0.72rem; color: #6E6660; } .cs-product-table__ext { font-weight: 700; color: var(--sa-brand, #0d6efd); } /* ═════════ Products Tab — Product Line Access chips ═════════ A self-contained toggle (hidden checkbox + custom track/thumb), not Bootstrap's .form-switch -- that class's negative margin-left is meant for an unbordered .form-check and overlaps/clips when nested in a bordered pill like this. */ .cs-pl-chip { position: relative; display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1.5px solid #D8D0C3; background: #fff; cursor: pointer; user-select: none; transition: border-color 0.15s ease, background-color 0.15s ease; } .cs-pl-chip:hover { border-color: #C2B8A6; } .cs-pl-chip__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .cs-pl-chip__switch { position: relative; flex-shrink: 0; width: 34px; height: 20px; border-radius: 999px; background: #D8D0C3; transition: background-color 0.15s ease; } .cs-pl-chip__switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s ease; } .cs-pl-chip__label { font-weight: 600; font-size: 0.85rem; color: #524A45; } .cs-pl-chip.is-on { border-color: #16a34a; background: rgba(22,163,74,0.07); } .cs-pl-chip.is-on:hover { border-color: #16a34a; } .cs-pl-chip.is-on .cs-pl-chip__switch { background: #16a34a; } .cs-pl-chip.is-on .cs-pl-chip__switch::before { transform: translateX(14px); } .cs-pl-chip.is-on .cs-pl-chip__label { color: #1A1715; } .cs-pl-chip.is-saving { opacity: 0.55; pointer-events: none; } [data-theme-mode="dark"] .cs-pl-chip { background: #202020; border-color: #303030; } [data-theme-mode="dark"] .cs-pl-chip:hover { border-color: #454545; } [data-theme-mode="dark"] .cs-pl-chip__switch { background: #454545; } [data-theme-mode="dark"] .cs-pl-chip__label { color: #C7C1B8; } [data-theme-mode="dark"] .cs-pl-chip.is-on { border-color: #4ade80; background: rgba(74,222,128,0.12); } [data-theme-mode="dark"] .cs-pl-chip.is-on .cs-pl-chip__switch { background: #4ade80; } [data-theme-mode="dark"] .cs-pl-chip.is-on .cs-pl-chip__label { color: #EFEBE5; } /* ═════════ Inventory Tab ═════════ */ .cs-inventory-beta-alert { font-size: 0.82rem; padding: 0.6rem 0.85rem; } .cs-inventory-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 0.5rem; } .cs-inventory-kpi { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: #fff; border: 1px solid #D8D0C3; border-radius: 10px; } .cs-inventory-kpi__icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } .cs-inventory-kpi__value { font-size: 1.15rem; font-weight: 700; color: #1A1715; line-height: 1.1; } .cs-inventory-kpi__label { font-size: 0.72rem; color: #6E6660; margin-top: 2px; } .cs-inventory-table { font-size: 0.82rem; } .cs-inventory-table thead th { background: #F8F6F3; color: #524A45; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } .cs-inventory-table__sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: #3D3833; } .cs-inventory-status { display: inline-block; padding: 0.2rem 0.55rem; font-size: 0.7rem; font-weight: 600; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; } .cs-inventory-status--in { background: #DFE5D6; color: #3F4D3A; } .cs-inventory-status--low { background: #fef3c7; color: #92400e; } .cs-inventory-status--out { background: #fee2e2; color: #991b1b; } /* === entity-admin/entity-admin-directory.php === */ /* Directory Card Grid */ .sa-dir-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; padding: 0.25rem 0; } .sa-dir-card { background: #fff; border: 1px solid #e9ecef; padding: 0.75rem; display: flex; gap: 0.6rem; align-items: center; transition: box-shadow 0.15s, border-color 0.15s; position: relative; cursor: pointer; } .sa-dir-card:hover { border-color: #c5cad0; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .sa-dir-card__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid #e9ecef; flex-shrink: 0; } .sa-dir-card__body { flex: 1; min-width: 0; } .sa-dir-card__name { font-weight: 600; font-size: 0.8rem; color: #212529; line-height: 1.2; } .sa-dir-card__meta { font-size: 0.68rem; color: #847C70; margin-top: 2px; line-height: 1.3; } .sa-dir-card__meta span { color: #847C70; } .sa-dir-card__meta i { font-size: 0.55rem; margin-right: 2px; opacity: 0.6; } .sa-dir-card__roles { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .sa-dir-card__roles .sa-pill { font-size: 0.58rem; padding: 1px 5px; } .sa-dir-card__actions { position: absolute; top: 0.35rem; right: 0.35rem; } .sa-dir-card__actions .btn { padding: 1px 4px; font-size: 0.65rem; line-height: 1; } .sa-dir-card-empty { grid-column: 1 / -1; text-align: center; padding: 2rem; color: #6c757d; } @media (max-width: 1399px) { .sa-dir-card-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .sa-dir-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .sa-dir-card-grid { grid-template-columns: 1fr; } } /* Directory View Switcher — pill-style segmented control */ .sa-dir-view-switcher{display:inline-flex;background:#EFEBE5;border-radius:0;padding:2px;gap:0;margin-left:.5rem;} .sa-dir-view-switcher .sa-view-btn{background:transparent;border:none;padding:6px 12px;font-size:.82rem;color:#6E6660;cursor:pointer;border-radius:0;transition:background .2s,color .2s;line-height:1;display:inline-flex;align-items:center;justify-content:center;} .sa-dir-view-switcher .sa-view-btn:hover{color:#3D3833;background:rgba(255,255,255,.5);} .sa-dir-view-switcher .sa-view-btn.active{background:var(--sa-primary-color,#3D3833);color:#fff;} .sa-dir-view-switcher .sa-view-btn:focus{outline:none;box-shadow:none;} /* === entity-admin/entity-admin-export-view.php === */ /* Export Modal Styles */ .sa-export-section { background: #f8f9fa; border: 1px solid #D8D0C3; padding: 14px 16px; } .sa-export-section__label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6E6660; margin-bottom: 8px; } /* Format cards */ .sa-export-format-options { display: flex; gap: 10px; } .sa-export-format-option { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border: 2px solid #D8D0C3; cursor: pointer; transition: all 0.15s ease; margin: 0; } .sa-export-format-option input[type="radio"] { display: none; } .sa-export-format-option:hover { border-color: #847C70; } .sa-export-format-option--active, .sa-export-format-option:has(input:checked) { border-color: var(--sa-primary-color, #305e6d); background: rgba(var(--primary-rgb, 48, 94, 109), 0.04); } .sa-export-format-option__icon { font-size: 1.4rem; color: #6E6660; width: 32px; text-align: center; } .sa-export-format-option--active .sa-export-format-option__icon, .sa-export-format-option:has(input:checked) .sa-export-format-option__icon { color: var(--sa-primary-color, #305e6d); } .sa-export-format-option__name { font-size: 0.85rem; font-weight: 700; color: #2A2622; } .sa-export-format-option__desc { font-size: 0.7rem; color: #847C70; } /* Date presets */ .sa-export-date-presets { display: flex; flex-wrap: wrap; gap: 6px; } .sa-export-preset { background: #fff; border: 1px solid #B5AB9D; color: #3D3833; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; } .sa-export-preset:hover { background: #EFEBE5; color: #3D3833; border-color: #847C70; } .sa-export-preset.active { background: var(--sa-primary-color, #305e6d); border-color: var(--sa-primary-color, #305e6d); color: #fff; } /* Filter buttons */ .sa-export-filter-btns { display: flex; flex-wrap: wrap; gap: 6px; } .sa-export-filter-btn { background: #fff; border: 1px solid #B5AB9D; color: #3D3833; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; } .sa-export-filter-btn:hover { background: #EFEBE5; color: #3D3833; border-color: #847C70; } .sa-export-filter-btn.active { background: var(--sa-primary-color, #305e6d); border-color: var(--sa-primary-color, #305e6d); color: #fff; } /* Column checkboxes */ .sa-export-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 16px; } .sa-export-col-check { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #3D3833; cursor: pointer; padding: 3px 0; margin: 0; } .sa-export-col-check input[type="checkbox"] { accent-color: var(--sa-primary-color, #305e6d); } /* Section header row */ .sa-export-section__header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .sa-export-section__header-row .sa-export-section__label { margin-bottom: 0; } .sa-export-section__actions a, .sa-export-col-group__actions a { font-size: 0.7rem; color: var(--sa-primary-color, #305e6d); text-decoration: none; font-weight: 600; } .sa-export-section__actions a:hover, .sa-export-col-group__actions a:hover { text-decoration: underline; } .sa-divider { color: #B5AB9D; font-size: 0.7rem; margin: 0 4px; } /* Column groups */ .sa-export-col-group { background: #fff; border: 1px solid #D8D0C3; border-radius: 8px; margin-bottom: 10px; padding: 14px 16px; } .sa-export-col-group:last-child { margin-bottom: 0; } .sa-export-col-group__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #EFEBE5; } .sa-export-col-group__name { font-size: 0.72rem; font-weight: 700; color: #6E6660; text-transform: uppercase; letter-spacing: 0.04em; } .sa-export-col-group .sa-export-columns { gap: 6px 20px; } .sa-export-col-group .sa-export-col-check { padding: 4px 0; } /* Preview bar */ .sa-export-preview { background: #EFEBE5; border: 1px solid #E8E0D4; color: #1A1715; font-size: 0.78rem; padding: 8px 14px; font-weight: 500; } /* Progress bar */ .sa-export-progress__bar { height: 8px; background: #D8D0C3; overflow: hidden; width: 100%; max-width: 400px; margin: 0 auto; } .sa-export-progress__fill { height: 100%; background: var(--sa-primary-color, #305e6d); width: 0%; transition: width 0.3s ease; } .sa-export-progress__text { font-size: 0.85rem; color: #6E6660; } /* Complete state */ .sa-export-complete__icon { font-size: 3rem; color: var(--sa-primary-color, #305e6d); } /* === entity-admin/index.php === */ /* -------------------------------------------------------- Dashboard Panel Grid (auto-fit) -------------------------------------------------------- */ /* The entity-205 dashboard's panel count has grown over time (4 -> 7) and will likely grow again -- a fixed grid-template-columns count always strands the last row's leftover panels next to empty, reserved column tracks whenever the panel count isn't an exact multiple of the column count (this happened at 4 panels against a 3-column rule; see git history on this file for the one-off "--quad" 2x2 fix that used to live here). auto-fit collapses unused tracks instead of reserving them, so any trailing row's panels simply stretch to fill the row -- correct at 4, 7, or any future count, with no per-count modifier class needed. Compound specificity isn't a concern here since this is the only rule for this selector on this page. */ .sa-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; } /* Individual panel */ .sa-dash-panel { background: #fff; border: 1px solid #D8D0C3; display: flex; flex-direction: column; overflow: hidden; } /* Panel header bar */ .sa-dash-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.85rem; border-bottom: 1px solid #D8D0C3; flex-shrink: 0; } .sa-dash-panel__title-group { display: flex; align-items: center; gap: 0.5rem; } .sa-dash-panel__title { font-size: 0.8rem; font-weight: 600; color: #6E6660; text-transform: uppercase; letter-spacing: 0.025em; margin: 0; } .sa-dash-panel__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 0.15rem 0.5rem; font-size: 0.72rem; font-weight: 700; border-radius: 10px; margin-left: 0.35rem; color: #6E6660; background: #EFEBE5; } .sa-dash-panel__count--loading { color: #847C70; background: #EFEBE5; } .sa-dash-panel--highlight .sa-dash-panel__count { color: #92400e; background: #fef3c7; } .sa-dash-panel--danger .sa-dash-panel__count { color: #991b1b; background: #fee2e2; } .sa-dash-panel--info .sa-dash-panel__count { color: #1A1715; background: #E8E0D4; } .sa-dash-panel__view-all { font-size: 0.72rem; font-weight: 600; color: var(--sa-primary-color, #305e6d); text-decoration: none; white-space: nowrap; } .sa-dash-panel__view-all:hover { text-decoration: underline; } /* Uniform block height — panels + stat cards */ .sa-dash-panel, .sa-stats-row .sa-stat-card { min-height: 280px; } .sa-stats-row .sa-stat-card { padding: 1.5rem; } /* Scrollable table body -- max-height matches .sa-cc-card__scroll/.sa-ops-table-wrap (420px) so every card's content caps and scrolls at the same point instead of each card drifting to its own limit. */ .sa-dash-table-wrap { flex: 1; overflow-y: auto; max-height: 420px; min-height: 120px; } /* Full-width table */ .sa-dash-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; color: #3D3833; } .sa-dash-table thead { position: sticky; top: 0; z-index: 1; } .sa-dash-table thead th { background: #f8f9fa; font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6E6660; padding: 0.4rem 0.65rem; border-bottom: 2px solid #D8D0C3; white-space: nowrap; } .sa-dash-table thead th[data-sort] { cursor: pointer; user-select: none; transition: color 0.15s; } .sa-dash-table thead th[data-sort]:hover { color: #3D3833; } .sa-dash-table thead th .sa-sort-icon { font-size: 0.6rem; margin-left: 0.25rem; opacity: 0.35; } .sa-dash-table thead th.sa-sort-active .sa-sort-icon { opacity: 1; color: var(--sa-primary-color, #305e6d); } .sa-dash-table tbody tr { border-bottom: 1px solid #EFEBE5; transition: background 0.1s; } .sa-dash-table tbody tr { cursor: pointer; } .sa-dash-table tbody tr:hover { background: #f0f7f9; } .sa-dash-table tbody tr:last-child { border-bottom: none; } .sa-dash-table td { padding: 0.45rem 0.65rem; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } .sa-dash-table td.td-customer { max-width: 160px; font-weight: 600; color: #212529; } .sa-dash-table td.td-patient { max-width: 140px; } .sa-dash-table td.td-date { width: 90px; color: #6E6660; font-size: 0.73rem; } .sa-dash-table td.td-actions { width: 40px; text-align: center; overflow: visible; padding: 0.3rem; } /* Dropdown inside scrollable table — escape overflow */ .sa-dash-table .dropdown { position: static; } .sa-dash-table-wrap .dropdown-menu { position: fixed; z-index: 1060; } /* Action ellipse button */ .sa-dash-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid transparent; color: #847C70; cursor: pointer; font-size: 1rem; line-height: 1; transition: all 0.15s; } .sa-dash-action-btn:hover { background: #EFEBE5; border-color: #D8D0C3; color: #3D3833; } .sa-dash-table tbody tr:hover .sa-dash-action-btn { color: #6E6660; } /* Empty / loading states */ .sa-dash-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #847C70; font-size: 0.8rem; padding: 2.5rem 1rem; text-align: center; } .sa-dash-empty i { font-size: 1.4rem; margin-bottom: 0.4rem; opacity: 0.4; } .sa-dash-loading { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; color: #847C70; font-size: 0.8rem; } /* -------------------------------------------------------- Overview Stats Row -------------------------------------------------------- */ .sa-stat-card__actions { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; flex-wrap: wrap; } .sa-stat-card__actions .btn { font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 0; } /* -------------------------------------------------------- Quick Actions Card -------------------------------------------------------- */ .sa-quick-actions-card { background: #fff; border: 1px solid #D8D0C3; margin-bottom: 1rem; } .sa-quick-actions-card__header { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-bottom: 1px solid #D8D0C3; } .sa-quick-actions-card__header h6 { font-size: 0.8rem; font-weight: 600; color: #6E6660; text-transform: uppercase; letter-spacing: 0.025em; margin: 0; } .sa-quick-actions-card__header i { color: var(--sa-primary-color, #305e6d); font-size: 0.85rem; } .sa-primary-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; padding: 1rem; } .sa-primary-action { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: #F8F6F3; border: 2px dashed #B5AB9D; text-decoration: none; color: #3D3833; transition: all 0.2s ease; cursor: pointer; } .sa-primary-action:hover { border-color: var(--sa-primary-color, #305e6d); background: #f0f7f9; color: #3D3833; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .sa-primary-action__icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: rgba(var(--primary-rgb, 48, 94, 109), 0.1); color: var(--sa-primary-color, #305e6d); font-size: 1.3rem; font-weight: 700; flex-shrink: 0; } .sa-primary-action__text h5 { font-size: 0.88rem; font-weight: 700; margin: 0 0 0.1rem; color: #212529; } .sa-primary-action__text p { font-size: 0.75rem; color: #6c757d; margin: 0; } /* -------------------------------------------------------- Google Map -------------------------------------------------------- */ .sa-map-card { background: #fff; border: 1px solid #D8D0C3; margin-bottom: 1rem; } .sa-map-card__header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid #D8D0C3; } .sa-map-card__header h6 { font-size: 0.8rem; font-weight: 600; color: #6E6660; text-transform: uppercase; letter-spacing: 0.025em; margin: 0; } .sa-map-card__header .sa-map-count { font-size: 0.75rem; color: #847C70; } #customerMap { width: 100%; height: 420px; } .sa-map-states { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 1rem; border-top: 1px solid #D8D0C3; background: #F8F6F3; } .sa-map-state-badge { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.5rem; background: #D8D0C3; color: #3D3833; } .sa-map-state-badge span { color: var(--sa-primary-color, #305e6d); font-weight: 700; } /* Map layer toggle */ .sa-map-toggle .btn { font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 0; } .sa-map-toggle .btn-sa-primary { background: var(--sa-primary-color, #305e6d); color: #fff; border-color: var(--sa-primary-color, #305e6d); } .sa-map-toggle .btn-sa-outline { background: #fff; color: #6E6660; border-color: #B5AB9D; } .sa-map-toggle .btn-sa-outline:hover { background: #EFEBE5; color: #3D3833; border-color: #847C70; } /* ========================================================== NuVida Command Center — entities/205/dashboard/index.php ========================================================== */ /* ---- Header ---- */ /* This is now the page's ONLY header -- the generic navy .page-header-breadcrumb banner (title + entity breadcrumb) was removed from this page entirely since it just duplicated the greeting/subtitle below it. Primary actions live in the same row as the greeting (top-right) rather than a separate "Quick actions" bar underneath, so the page opens with one clear, purposeful header instead of two stacked ones. */ .sa-cc-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; } /* min-width:0 is what actually lets long greeting/subtitle text wrap inside its own box instead of forcing the flex row wider than its container -- without it, a flex item's default min-width is "auto" (roughly its longest unbreakable content), which can push this column wide enough to overlap .sa-cc-header__actions sitting beside it, especially with a long entity name like "NuVida Biosciences" in the subtitle. */ .sa-cc-header__text { min-width: 0; flex: 1 1 auto; } .sa-cc-header__greeting { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; color: #1A1715; margin: 0 0 3px; text-wrap: balance; } .sa-cc-header__subtitle { font-size: 0.86rem; color: #6E6660; margin: 0; } /* Every control -- primary actions and the quieter utility controls -- on one row, vertically centered against the two-line greeting (via .sa-cc-header's align-items:center above). Previously this stacked buttons above a separate meta row, which forced two mismatched rows of content against a taller single text column and read as an awkward, unbalanced right side with dead space beneath the buttons. */ .sa-cc-header__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; } .sa-cc-header__divider { width: 1px; height: 22px; background: #D8D0C3; flex-shrink: 0; } .sa-cc-header__updated { font-size: 0.72rem; color: #847C70; white-space: nowrap; } .sa-cc-refresh-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #D8D0C3; color: #6E6660; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .sa-cc-refresh-btn:hover { background: #EFEBE5; color: #3D3833; border-color: #B5AB9D; } .sa-cc-refresh-btn:focus-visible { outline: 2px solid var(--sa-primary-color, #305e6d); outline-offset: 2px; } .sa-cc-refresh-btn.is-spinning i { animation: sa-cc-spin 0.7s linear infinite; } @keyframes sa-cc-spin { to { transform: rotate(360deg); } } /* ---- Today's Priorities band (header insight strip) ---- Contained band matching the .sa-cc-card idiom used by every other section on this page, with a title, instead of a few pills floating loose on the bare page background. Chips flex to fill the row evenly (flex:1, equal width) rather than clustering left with a lot of dead space trailing off to the right. */ .sa-cc-insights-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid #D8D0C3; padding: 12px 16px; margin-bottom: 1.5rem; } .sa-cc-insights-band__label { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; color: #4A4540; white-space: nowrap; flex-shrink: 0; } .sa-cc-insights-band__label i { color: var(--sa-primary-color, #282320); font-size: 0.85rem; } .sa-cc-insights { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; } .sa-cc-insight-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.78rem; font-weight: 600; padding: 7px 13px; background: #FAF8F4; border: 1px solid #E5DFD4; color: #3D3833; flex: 1 1 0; min-width: 180px; } .sa-cc-insight-chip i { font-size: 0.85rem; } .sa-cc-insight-chip.is-clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .sa-cc-insight-chip.is-clickable:hover { background: #EFEBE5; border-color: #B5AB9D; } .sa-cc-insight-chip.is-clickable:active { transform: scale(0.97); } .sa-cc-insight-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .sa-cc-insight-chip--critical .sa-cc-insight-chip__dot { background: #dc2626; } .sa-cc-insight-chip--warning .sa-cc-insight-chip__dot { background: #f59e0b; } .sa-cc-insight-chip--info .sa-cc-insight-chip__dot { background: #64748b; } .sa-cc-insight-chip--positive { color: #166534; border-color: rgba(22,101,52,0.22); background: rgba(74,222,128,0.08); } .sa-cc-insight-chip--positive i { color: #166534; } .sa-cc-insight-chip--negative { color: #dc2626; border-color: rgba(220,38,38,0.2); background: rgba(248,113,113,0.08); } .sa-cc-insight-chip--negative i { color: #dc2626; } .sa-cc-insight-chip--loading { color: #847C70; border-style: dashed; } /* ---- Toast ---- */ .sa-cc-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); background: #1A1715; color: #fff; font-size: 0.8rem; font-weight: 500; padding: 10px 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 2000; } .sa-cc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- Quick action buttons (now live in .sa-cc-header__buttons) ---- */ .sa-quick-bar__btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; padding: 7px 14px; background: #fff; border: 1px solid #D8D0C3; color: #3D3833; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .sa-quick-bar__btn i { font-size: 0.78rem; } .sa-quick-bar__btn:hover { background: #EFEBE5; border-color: #B5AB9D; } .sa-quick-bar__btn:active { transform: scale(0.97); } .sa-quick-bar__btn--primary { background: var(--sa-primary-color, #305e6d); border-color: var(--sa-primary-color, #305e6d); color: #fff; } .sa-quick-bar__btn--primary:hover { background: #264a57; border-color: #264a57; } /* ---- KPI row (extends the shared .sa-kpi-row/.sa-kpi-card system) ---- */ .sa-cc-kpi-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .sa-cc-kpi-card .sa-kpi-card__sub { font-size: 0.72rem; color: #847C70; margin-top: 2px; } /* Bottom row of each KPI card: sub-label on the left, a small inline trend graph (Chart.js sparkline) on the right -- mirrors the number+graph layout of a stock-ticker widget. margin-top:auto here (not on .sub) is what anchors this row to the card's bottom edge. */ .sa-cc-kpi-card .sa-kpi-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; } .sa-cc-kpi-card .sa-kpi-card__footer .sa-kpi-card__sub { margin-top: 0; } .sa-cc-kpi-card .sa-kpi-card__spark { flex-shrink: 0; width: 64px; height: 28px; } .sa-cc-kpi-card .sa-kpi-card__spark canvas { width: 100% !important; height: 28px !important; display: block; } @media (max-width: 576px) { .sa-cc-kpi-card .sa-kpi-card__spark { width: 48px; height: 22px; } .sa-cc-kpi-card .sa-kpi-card__spark canvas { height: 22px !important; } } /* ---- KPI card: unified dark treatment ---- Previously each of the 5 cards had its own accent color (navy, teal, slate, green, amber) -- five different hues in one row read as decoration, not information (nothing on this dashboard maps a specific color to a specific metric). Replaced with one shared gradient built from --sa-primary-color -- the SAME per-entity brand variable the topbar (.app-header) already uses, via :root[data-entity="205"] in atlasmps-custom.css (currently #282320 for NuVida Biosciences) -- so the cards are always exactly the topbar's color, on this entity or any other, never a separately invented hex that can drift out of sync with a rebrand. The plain `background: var(...)` line first is a fallback for browsers without color-mix() support -- if color-mix() is unsupported the gradient declaration is dropped entirely and this solid color remains. !important is necessary here because this needs to win over both the light-theme base `.sa-kpi-card` rule AND the equal-specificity `[data-theme-mode="dark"] .sa-kpi-card` rule below -- these cards look the same in both site themes by design, they're not a light/dark variant of anything. */ .sa-cc-kpi-card { background: var(--sa-primary-color, #282320) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--sa-primary-color, #282320) 100%, black 24%) 0%, var(--sa-primary-color, #282320) 55%, color-mix(in srgb, var(--sa-primary-color, #282320) 100%, white 16%) 100% ) !important; border-color: rgba(255, 255, 255, 0.10) !important; } .sa-cc-kpi-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.09) 46%, transparent 62%); transform: translateX(-120%); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .sa-cc-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -10px rgba(8, 34, 42, 0.55); border-color: rgba(255, 255, 255, 0.18) !important; } .sa-cc-kpi-card:hover::before { transform: translateX(120%); } .sa-cc-kpi-card .sa-kpi-card__label { color: rgba(255, 255, 255, 0.62) !important; } .sa-cc-kpi-card .sa-kpi-card__value { color: #fff !important; } .sa-cc-kpi-card .sa-kpi-card__sub, .sa-cc-kpi-card .sa-kpi-card__prev { color: rgba(255, 255, 255, 0.55) !important; } .sa-cc-kpi-card .sa-kpi-card__icon { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.14); color: #fff !important; backdrop-filter: blur(6px); position: relative; } .sa-cc-kpi-card .sa-kpi-card__change.positive { background: rgba(74, 222, 128, 0.18) !important; color: #6ee7a8 !important; } .sa-cc-kpi-card .sa-kpi-card__change.negative { background: rgba(248, 113, 113, 0.18) !important; color: #fca5a5 !important; } .sa-cc-kpi-card .sa-kpi-card__change.neutral { background: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.7) !important; } /* The old per-card colored accent bar is gone from the markup entirely (see index.php) -- nothing to hide here, just documenting the change for anyone who goes looking for it. */ /* Pending IVRs is the one card in the row that means "act on this," not just "here's a number" -- a small pulsing dot on its icon keeps that distinction after the background stopped doing it for us. */ .sa-cc-kpi-card--attention .sa-kpi-card__icon::after { content: ''; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 2px var(--sa-primary-color, #282320); animation: sa-cc-pulse-dot 2.2s ease-in-out infinite; } @keyframes sa-cc-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .sa-cc-kpi-card::before { transition: none; } .sa-cc-kpi-card--attention .sa-kpi-card__icon::after { animation: none; } } /* ---- Two-column content rows ---- */ /* align-items: stretch (grid's own default) so every card in a row shares the row's tallest card's height -- was explicitly set to `start` here, which is why sibling cards drifted to their own content height instead of matching. Each card's body scrolls internally past its own max-height rather than growing the card taller than its row. */ .sa-cc-row { display: grid; gap: 16px; margin-bottom: 16px; align-items: stretch; } .sa-cc-row--attention-ops { grid-template-columns: minmax(280px, 5fr) minmax(360px, 7fr); } .sa-cc-row--activity-health { grid-template-columns: minmax(320px, 7fr) minmax(280px, 5fr); } .sa-cc-row--trends { grid-template-columns: minmax(360px, 7fr) minmax(280px, 5fr); margin-bottom: 24px; } /* ---- Generic card shell used across the new sections ---- */ .sa-cc-card { background: #fff; border: 1px solid #D8D0C3; display: flex; flex-direction: column; min-width: 0; } .sa-cc-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0.85rem 1rem; border-bottom: 1px solid #D8D0C3; flex-wrap: wrap; } .sa-cc-card__title { font-size: 0.85rem; font-weight: 700; color: #2A2622; margin: 0; display: flex; align-items: center; } .sa-cc-card__count { font-size: 0.72rem; font-weight: 700; color: #847C70; background: #EFEBE5; padding: 3px 9px; border-radius: 10px; } .sa-cc-card__link { font-size: 0.75rem; font-weight: 600; color: var(--sa-primary-color, #305e6d); text-decoration: none; white-space: nowrap; } /* ---- Trend chart range dropdown ---- Same footprint as .sa-cc-card__count (the plain "Last 30 days" pill on the card next to this one) -- same padding/radius/muted background -- so both cards' headers land at the same height; a taller button here was pushing this card's header row taller than its neighbor's. */ .sa-cc-range-dropdown { position: relative; } .sa-cc-range-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: #847C70; background: #EFEBE5; border: 1px solid transparent; padding: 3px 9px; border-radius: 10px; cursor: pointer; transition: background 0.15s, color 0.15s; } .sa-cc-range-btn:hover { background: #E3DDD3; color: #3D3833; } .sa-cc-range-btn:focus { outline: none; } .sa-cc-range-btn:focus-visible { outline: 2px solid var(--sa-primary-color, #282320); outline-offset: 2px; } .sa-cc-range-btn i { font-size: 0.55rem; transition: transform 0.2s ease; } .sa-cc-range-dropdown.open .sa-cc-range-btn i { transform: rotate(180deg); } .sa-cc-range-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; background: #fff; border: 1px solid #D8D0C3; border-radius: 8px; box-shadow: 0 14px 32px -8px rgba(0,0,0,0.18); z-index: 20; display: none; flex-direction: column; padding: 4px; } .sa-cc-range-dropdown.open .sa-cc-range-menu { display: flex; } .sa-cc-range-opt { border: none; background: transparent; border-radius: 6px; text-align: left; font-size: 0.75rem; font-weight: 600; color: #3D3833; padding: 6px 10px; cursor: pointer; } .sa-cc-range-opt:hover { background: #EFEBE5; } .sa-cc-range-opt.active { background: var(--sa-primary-color, #282320); color: #fff; } .sa-cc-range-opt:focus { outline: none; } .sa-cc-range-opt:focus-visible { outline: 2px solid var(--sa-primary-color, #282320); outline-offset: -2px; } /* ---- Trend chart "in this view" summary ---- */ .sa-cc-trend-summary { padding: 10px 1rem 0; font-size: 0.78rem; color: #6E6660; } .sa-cc-trend-summary__num { font-size: 0.95rem; font-weight: 700; color: #1A1715; font-variant-numeric: tabular-nums; } .sa-cc-card__link:hover { text-decoration: underline; } .sa-cc-card__scroll { flex: 1; max-height: 420px; overflow-y: auto; padding: 0.9rem 1rem; } /* Chart cards (Orders & Revenue Trend, IVRs Processed) -- fills the remaining height of the now-stretched card instead of a fixed min-height, so both match their row sibling; the canvas/Chart.js instance inside sizes off this container's actual computed height. */ .sa-cc-chart-wrap { flex: 1; display: flex; flex-direction: column; padding: 1rem; min-height: 260px; } /* ---- Attention Required ---- */ .sa-attention__body { flex: 1; overflow-y: auto; max-height: 420px; padding: 0.4rem 0; } .sa-attention__row { display: flex; align-items: flex-start; gap: 10px; padding: 0.7rem 1rem; border-bottom: 1px solid #F1EDE6; transition: background 0.15s; } .sa-attention__row:last-child { border-bottom: none; } .sa-attention__row.is-clickable { cursor: pointer; } .sa-attention__row.is-clickable:hover { background: #FAF8F5; } .sa-attention__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: #B5AB9D; } .sa-attention__row--critical .sa-attention__dot { background: #dc2626; } .sa-attention__row--warning .sa-attention__dot { background: #f59e0b; } .sa-attention__row--info .sa-attention__dot { background: #64748b; } .sa-attention__body-text { flex: 1; min-width: 0; } .sa-attention__count { font-weight: 700; color: #1A1715; font-size: 0.85rem; } .sa-attention__label { font-size: 0.85rem; color: #3D3833; } .sa-attention__hint { font-size: 0.72rem; color: #847C70; margin-top: 1px; } .sa-attention__action { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--sa-primary-color, #305e6d); white-space: nowrap; margin-top: 2px; } .sa-attention__action i { font-size: 0.65rem; margin-left: 2px; } /* ---- Team Workload (Responsibility Matrix widget) ---- */ /* Same row rhythm as .sa-attention__row (padding, border, hover) so the two adjacent list-style cards read as one consistent system. */ .sa-tw-body { padding: 0.4rem 0; } .sa-tw-row { display: flex; align-items: center; gap: 10px; padding: 0.7rem 1rem; border-bottom: 1px solid #F1EDE6; transition: background 0.15s; } .sa-tw-row:last-child { border-bottom: none; } .sa-tw-row img, .sa-tw-row .sa-avatar-fallback { width: 32px; height: 32px; font-size: 0.72rem; flex-shrink: 0; } .sa-tw-body-text { flex: 1; min-width: 0; } .sa-tw-name { font-size: 0.85rem; font-weight: 700; color: #2A2622; } .sa-tw-lines { margin-top: 2px; } .sa-tw-line { font-size: 0.76rem; color: #6E6660; display: block; text-decoration: none; } .sa-tw-line:hover { color: var(--sa-primary-color, #282320); } .sa-tw-line + .sa-tw-line { margin-top: 1px; } .sa-tw-count { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--sa-primary-color, #282320); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } /* Dark mode sets --sa-primary-color to #fafafa (for text), which made these white counts invisible; use the dark CTA colour instead. */ [data-theme-mode="dark"] .sa-tw-count { background: #463C37; } /* ---- Order Operations (tabbed table) ---- */ .sa-ops-tabs { display: flex; gap: 2px; background: #F1EDE6; padding: 2px; } .sa-ops-tab { font-size: 0.75rem; font-weight: 600; color: #6E6660; background: transparent; border: none; padding: 5px 12px; cursor: pointer; transition: background 0.15s, color 0.15s; } .sa-ops-tab:hover { color: #3D3833; } .sa-ops-tab.active { background: #fff; color: var(--sa-primary-color, #305e6d); box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .sa-ops-table-wrap { max-height: 420px; overflow-y: auto; } .sa-ops-table th { white-space: nowrap; } /* ---- New sa-badge variants: distributor status ---- */ .sa-badge--dist-active { background: linear-gradient(135deg, #edf8f0, #dff0e5); color: #1e7a4d; border: 1px solid #c3e6d1; } .sa-badge--dist-inactive { background: linear-gradient(135deg, #fff8e1, #fff3cd); color: #856404; border: 1px solid #ffc107; } .sa-badge--dist-never { background: linear-gradient(135deg, #fdeeee, #fbdada); color: #a3282c; border: 1px solid #f0b8ba; } /* ---- Empty states (success variant) ---- */ .sa-dash-empty--success i { color: #16a34a; opacity: 0.9; } .sa-dash-empty__title { font-size: 0.85rem; font-weight: 600; color: #3D3833; margin-top: 2px; } .sa-dash-empty__sub { font-size: 0.75rem; color: #847C70; margin-top: 2px; max-width: 32ch; } /* ---- Map card compact modifier (dashboard only — .sa-map-card's base height is shared with distributor/locations and clinic-home-main pages, so this is scoped via a modifier rather than changing the base rule) ---- */ .sa-map-card--compact #customerMap { height: 260px; } .sa-map-card__count { font-size: 0.75rem; color: #847C70; margin-left: 10px; } /* ---- Responsive: Command Center ---- */ @media (max-width: 1200px) { .sa-cc-row--attention-ops, .sa-cc-row--activity-health, .sa-cc-row--trends { grid-template-columns: 1fr; } } @media (max-width: 768px) { .sa-cc-header { flex-direction: column; align-items: stretch; } .sa-cc-header__actions { align-items: stretch; } .sa-cc-header__buttons { justify-content: stretch; } .sa-cc-header__buttons .sa-quick-bar__btn { flex: 1 1 auto; justify-content: center; } .sa-cc-header__meta { justify-content: space-between; } .sa-cc-header__greeting { font-size: 1.15rem; } .sa-cc-card__header { flex-direction: column; align-items: flex-start; } .sa-map-card--compact #customerMap { height: 220px; } } /* Desktop: when the rail is collapsed, give the KPI strip room to breathe at a slightly wider minimum card width instead of just adding more columns at the same size. */ @media (min-width: 992px) { [data-sa-rail="collapsed"] .sa-cc-kpi-row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } @media (prefers-reduced-motion: reduce) { .sa-cc-refresh-btn.is-spinning i { animation: none; } .sa-cc-toast, .sa-attention__row, .sa-quick-bar__btn, .sa-cc-refresh-btn { transition: none; } } /* -------------------------------------------------------- Responsive -------------------------------------------------------- */ /* Branded buttons — global */ .btn-sa-primary { background: var(--sa-primary-color, #305e6d); color: #fff; border: 1px solid var(--sa-primary-color, #305e6d); } .btn-sa-primary:hover, .btn-sa-primary:focus { background: #264a57; border-color: #264a57; color: #fff; } .btn-sa-outline { background: transparent; color: var(--sa-primary-color, #305e6d); border: 1px solid var(--sa-primary-color, #305e6d); } .btn-sa-outline:hover, .btn-sa-outline:focus { background: var(--sa-primary-color, #305e6d); color: #fff; } @media (max-width: 768px) { .sa-stats-row { flex-direction: column; } .sa-primary-actions { grid-template-columns: 1fr; } #customerMap { height: 300px; } } /* === unauthorized/index.php === */ .auth-unauth-card { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06), 0 20px 60px rgba(0,0,0,0.08); padding: 3rem 2.5rem; text-align: center; max-width: 480px; width: 100%; } .auth-unauth-card__icon { width: 64px; height: 64px; border-radius: 50%; background: #EFEBE5; color: #6E6660; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1.5rem; } .auth-unauth-card h2 { font-size: 1.5rem; font-weight: 700; color: #1A1715; margin-bottom: 0.5rem; } .auth-unauth-card p { font-size: 0.875rem; color: #6E6660; line-height: 1.6; margin-bottom: 1.5rem; } .auth-unauth-card__user { display: inline-flex; align-items: center; gap: 0.5rem; background: #F8F6F3; border: 1px solid #D8D0C3; border-radius: 50px; padding: 0.5rem 1rem; font-size: 0.8rem; color: #6E6660; margin-bottom: 1.5rem; } .auth-unauth-card__user img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .auth-unauth-card__user strong { color: #1A1715; } .auth-unauth-card__modules { border-top: 1px solid #D8D0C3; padding-top: 1.25rem; margin-bottom: 1.5rem; } .auth-unauth-card__modules h6 { font-size: 0.72rem; font-weight: 600; color: #847C70; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .auth-unauth-card__module-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .auth-unauth-card__module { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 8px; font-size: 0.8rem; font-weight: 500; color: #3D3833; background: #F8F6F3; border: 1px solid #D8D0C3; text-decoration: none; transition: all 0.15s; } .auth-unauth-card__module:hover { border-color: var(--sa-primary-color, #282320); color: var(--sa-primary-color, #282320); background: #EFEBE5; } .auth-unauth-card__module i { font-size: 0.7rem; } .auth-unauth-card__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .auth-unauth-card__actions .btn { font-size: 0.85rem; padding: 0.5rem 1.25rem; } @media (max-width: 480px) { .auth-unauth-card { padding: 2rem 1.5rem; } .auth-unauth-card h2 { font-size: 1.25rem; } .auth-unauth-card__actions { flex-direction: column; } .auth-unauth-card__actions .btn { width: 100%; } } /* === entities/entity-dashboard.php === */ /* ── Entity Dashboard ─────────────────────────────────────────────── */ .ed-container { display: flex; gap: 0; min-height: calc(100vh - 280px); background: #fff; border: 1px solid #D8D0C3; border-radius: 0; overflow: hidden; } .ed-sidebar { width: 260px; flex-shrink: 0; border-right: 1px solid #D8D0C3; background: #fafbfc; display: flex; flex-direction: column; } .ed-sidebar__header { padding: 1.25rem 1rem; border-bottom: 1px solid #D8D0C3; display: flex; align-items: center; gap: 0.75rem; background: linear-gradient(180deg, #fff 0%, #fafbfc 100%); } .ed-sidebar__logo { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #EFEBE5; color: #6E6660; font-size: 1.1rem; border: 1px solid #D8D0C3; overflow: hidden; } .ed-sidebar__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .ed-sidebar__title { font-weight: 700; font-size: 0.9rem; color: #2A2622; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ed-sidebar__subtitle { font-size: 0.68rem; color: #847C70; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; } .ed-sidebar__nav { padding: 0.5rem 0; flex: 1; overflow-y: auto; } .ed-sidebar__nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.65rem 1.25rem; font-size: 0.875rem; color: #524A45; text-decoration: none; transition: background 0.15s, color 0.15s; border-left: 3px solid transparent; cursor: pointer; } .ed-sidebar__nav-item:hover { background: #f0f0f0; color: #2A2622; } .ed-sidebar__nav-item.active { background: #fff; color: #2A2622; border-left-color: var(--sa-primary-color, #305e6d); font-weight: 600; } .ed-sidebar__nav-item i { width: 18px; text-align: center; font-size: 0.82rem; color: #847C70; } .ed-sidebar__nav-item.active i { color: var(--sa-primary-color, #305e6d); } .ed-content { flex: 1; padding: 0; overflow: visible; min-width: 0; } .ed-panel { display: none; padding: 1.5rem 2rem 2rem; } .ed-panel.active { display: block; } .ed-panel__title { font-size: 1.05rem; font-weight: 700; color: #2A2622; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid #D8D0C3; display: flex; align-items: center; gap: 0.5rem; } .ed-panel__title i { color: var(--sa-primary-color, #305e6d); } /* Hero */ .ed-hero { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; background: linear-gradient(135deg, #F8F6F3 0%, #EFEBE5 100%); border: 1px solid #D8D0C3; border-left: 4px solid var(--ed-brand-color, #305e6d); margin-bottom: 1.5rem; } .ed-hero__logo { width: 84px; height: 84px; flex-shrink: 0; background: #fff; border: 1px solid #D8D0C3; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.04); } .ed-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .ed-hero__logo--placeholder { background: var(--ed-brand-light, #D8D0C3); color: var(--ed-brand-color, #305e6d); font-size: 2rem; } .ed-hero__text { flex: 1; min-width: 0; } .ed-hero__name { font-size: 1.5rem; font-weight: 800; color: #1A1715; letter-spacing: -0.01em; margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } .ed-hero__badge { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.6rem; border-radius: 4px; border: 1px solid; } .ed-hero__badge--active { background: #DFE5D6; color: #3F4D3A; border-color: #C7D2B7; } .ed-hero__badge--inactive { background: #fee2e2; color: #991b1b; border-color: #fecaca; } .ed-hero__id { font-size: 0.62rem; font-weight: 700; color: #524A45; background: #fff; border: 1px solid #B5AB9D; padding: 0.25rem 0.55rem; border-radius: 4px; letter-spacing: 0.04em; } .ed-hero__website { font-size: 0.82rem; color: #6E6660; text-decoration: none; } .ed-hero__website:hover { color: var(--ed-brand-color, #305e6d); } /* KPI Cards */ .ed-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; margin-bottom: 1.5rem; } .ed-kpi-card { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid #D8D0C3; border-radius: 8px; transition: all 0.15s; } .ed-kpi-card:hover { border-color: #B5AB9D; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .ed-kpi-card__icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--ed-brand-light, #D8D0C3); color: var(--ed-brand-color, #305e6d); font-size: 1rem; border-radius: 8px; flex-shrink: 0; } .ed-kpi-card__value { font-size: 1.4rem; font-weight: 800; color: #2A2622; line-height: 1.1; } .ed-kpi-card__label { font-size: 0.7rem; color: #6E6660; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-top: 2px; } /* Setup Checklist */ .ed-setup { padding: 1rem 1.1rem; border: 1px solid #D8D0C3; background: #F8F6F3; border-radius: 8px; margin-bottom: 1.5rem; } .ed-setup--complete { background: #F2F5EE; border-color: #C7D2B7; } .ed-setup__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; } .ed-setup__title { font-size: 0.85rem; font-weight: 700; color: #2A2622; display: flex; align-items: center; gap: 0.4rem; } .ed-setup__count { font-size: 0.72rem; color: #6E6660; font-weight: 600; } .ed-setup__bar { height: 6px; background: #D8D0C3; border-radius: 999px; overflow: hidden; margin-bottom: 0.65rem; } .ed-setup__bar-fill { height: 100%; background: var(--ed-brand-color, #305e6d); transition: width 0.4s ease; } .ed-setup--complete .ed-setup__bar-fill { background: #7A8C6E; } .ed-setup__items { display: flex; flex-wrap: wrap; gap: 0.4rem; } .ed-setup__item { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; font-size: 0.72rem; font-weight: 600; border-radius: 4px; border: 1px solid; } .ed-setup__item--done { color: #847C70; background: #fff; border-color: #D8D0C3; } .ed-setup__item--todo { color: var(--ed-brand-color, #305e6d); background: #fff; border-color: var(--ed-brand-color, #305e6d); cursor: pointer; transition: all 0.12s; } .ed-setup__item--todo:hover { background: var(--ed-brand-color, #305e6d); color: #fff; } .ed-setup__item i { font-size: 0.62rem; } /* Info Cards */ .ed-info-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; } @media (max-width: 768px) { .ed-info-row { grid-template-columns: 1fr; } } .ed-info-card { background: #fff; border: 1px solid #D8D0C3; border-radius: 8px; overflow: hidden; } .ed-info-card__head { padding: 0.75rem 1rem; background: #F8F6F3; border-bottom: 1px solid #D8D0C3; font-size: 0.7rem; font-weight: 700; color: #524A45; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.4rem; } .ed-info-card__head i { color: var(--ed-brand-color, #305e6d); } .ed-info-card__body { padding: 1rem; } .ed-info-card__body iframe { border: none; display: block; width: 100%; } .ed-info-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #2A2622; padding: 0.35rem 0; } .ed-info-line i { width: 14px; color: #847C70; font-size: 0.78rem; } .ed-info-empty { font-size: 0.82rem; color: #847C70; font-style: italic; } /* Form fields */ .ed-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; } .ed-form-grid > .span-3 { grid-column: span 3; } .ed-form-grid > .span-4 { grid-column: span 4; } .ed-form-grid > .span-6 { grid-column: span 6; } .ed-form-grid > .span-8 { grid-column: span 8; } .ed-form-grid > .span-12 { grid-column: span 12; } @media (max-width: 768px) { .ed-form-grid > [class*="span-"] { grid-column: span 12; } } .ed-label { display: block; font-size: 0.75rem; font-weight: 700; color: #524A45; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; } .ed-input { width: 100%; padding: 0.55rem 0.75rem; font-size: 0.85rem; color: #2A2622; background: #fff; border: 1px solid #B5AB9D; border-radius: 6px; transition: border-color 0.12s, box-shadow 0.12s; outline: none; } .ed-input:focus { border-color: var(--ed-brand-color, #305e6d); box-shadow: 0 0 0 3px rgba(48,94,109,0.12); } .ed-input:read-only { background: #F8F6F3; color: #6E6660; } textarea.ed-input { min-height: 100px; resize: vertical; } .ed-color-input { display: flex; align-items: center; gap: 0.5rem; } .ed-color-input input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid #B5AB9D; border-radius: 6px; background: #fff; cursor: pointer; } .ed-color-input .ed-input { flex: 1; } /* Brand board */ .ed-brand-board { border: 1px solid #D8D0C3; border-radius: 8px; overflow: hidden; background: #fff; } .ed-brand-board__hero { height: 110px; display: flex; align-items: center; padding: 0 1.5rem; color: #fff; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; background: linear-gradient(135deg, var(--ed-brand-color, #305e6d), var(--ed-brand-light, #D8D0C3)); } .ed-brand-board__body { padding: 1rem 1.25rem; } .ed-brand-board__swatches { display: flex; gap: 1.5rem; align-items: flex-start; } .ed-swatch { display: flex; flex-direction: column; gap: 0.4rem; } .ed-swatch__color { width: 70px; height: 70px; border: 1px solid #D8D0C3; border-radius: 6px; } .ed-swatch__hex { font-size: 0.7rem; color: #6E6660; font-family: monospace; text-align: center; } /* Image upload preview */ .ed-image-upload { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #fafbfc; border: 1px dashed #B5AB9D; border-radius: 8px; } .ed-image-upload__preview { width: 80px; height: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #D8D0C3; color: #B5AB9D; font-size: 1.5rem; overflow: hidden; } .ed-image-upload__preview--rect { border-radius: 6px; padding: 4px; } .ed-image-upload__preview--circle { border-radius: 50%; width: 64px; height: 64px; } .ed-image-upload__preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .ed-image-upload__preview--circle img { width: 100%; height: 100%; object-fit: cover; } .ed-image-upload__field { flex: 1; min-width: 0; } .ed-image-upload input[type="file"] { font-size: 0.78rem; padding: 0.4rem 0.6rem; } /* Tables */ .ed-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .ed-table thead th { background: #F8F6F3; color: #524A45; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem 0.85rem; text-align: left; border-bottom: 1px solid #D8D0C3; } .ed-table tbody td { padding: 0.75rem 0.85rem; border-bottom: 1px solid #EFEBE5; color: #2A2622; } .ed-table tbody tr:last-child td { border-bottom: none; } .ed-table tbody tr:hover { background: #fafbfc; } .ed-table-wrap { background: #fff; border: 1px solid #D8D0C3; border-radius: 8px; overflow: hidden; } /* Status badges in tables */ .ed-status { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .ed-status--active { background: #DFE5D6; color: #3F4D3A; } .ed-status--inactive { background: #fee2e2; color: #991b1b; } .ed-role-badge { display: inline-flex; font-size: 0.7rem; font-weight: 600; color: #524A45; background: #EFEBE5; padding: 0.2rem 0.55rem; border-radius: 4px; } /* Activity timeline */ .ed-timeline { position: relative; padding-left: 1.85rem; } .ed-timeline::before { content: ''; position: absolute; left: 0.6rem; top: 0.3rem; bottom: 0.3rem; width: 2px; background: #D8D0C3; } .ed-timeline__item { position: relative; padding-bottom: 1.1rem; } .ed-timeline__dot { position: absolute; left: -1.85rem; top: 0.1rem; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #D8D0C3; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; } .ed-timeline__title { font-size: 0.85rem; font-weight: 700; color: #2A2622; } .ed-timeline__detail { font-size: 0.78rem; color: #6E6660; margin-top: 1px; } .ed-timeline__ts { font-size: 0.68rem; color: #847C70; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } /* Action buttons */ .ed-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; font-size: 0.82rem; font-weight: 600; border-radius: 6px; border: 1px solid; cursor: pointer; transition: all 0.12s; text-decoration: none; } .ed-btn--primary { background: var(--ed-brand-color, #305e6d); color: #fff; border-color: var(--ed-brand-color, #305e6d); } .ed-btn--primary:hover { filter: brightness(0.92); color: #fff; } .ed-btn--ghost { background: #fff; color: #524A45; border-color: #B5AB9D; } .ed-btn--ghost:hover { background: #F8F6F3; border-color: #847C70; color: #2A2622; } .ed-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ed-section-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #D8D0C3; } @media (max-width: 991.98px) { .ed-container { flex-direction: column; } .ed-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #D8D0C3; } .ed-sidebar__nav { display: flex; overflow-x: auto; padding: 0.4rem; } .ed-sidebar__nav-item { flex-shrink: 0; border-left: none; border-bottom: 3px solid transparent; padding: 0.5rem 0.85rem; } .ed-sidebar__nav-item.active { border-left: none; border-bottom-color: var(--sa-primary-color, #305e6d); } .ed-panel { padding: 1rem 1.25rem 1.5rem; } .ed-hero { flex-wrap: wrap; } } /* ═══════════════════════════════════════════════════════════════ MOBILE AUDIT — Targeted overrides for entity-admin patterns ═══════════════════════════════════════════════════════════════ */ /* Customer Settings overview: setup/onboarding chip strip can squeeze title and progress count onto a too-narrow line. Stack header above count. */ @media (max-width: 480px) { #panel-overview .mb-4 .d-flex.align-items-center.justify-content-between { flex-wrap: wrap; gap: 0.25rem; } #panel-overview .mb-4 .d-flex.align-items-center.justify-content-between > span { font-size: 0.72rem; } } /* Customer Settings: large hero map iframe can't shrink below intrinsic size. Cap height on phone so it doesn't dominate the viewport. */ @media (max-width: 576px) { #panel-overview iframe[src*="google.com/maps"] { min-height: 180px !important; max-height: 220px !important; } #panel-overview .row.g-3[style*="min-height"] { min-height: 0 !important; } } /* Access Management: HCO tree nested padding compounds on small phones, leaving very little width for child clinic names. */ @media (max-width: 480px) { .sa-am-child__header { padding-left: 1rem; gap: 0.4rem; } .sa-am-hco__header { padding: 0.55rem 0.75rem; gap: 0.4rem; } .sa-am-hco__name { font-size: 0.78rem; } .sa-am-table th, .sa-am-table td { padding: 0.35rem 0.5rem; } .sa-am-table { font-size: 0.72rem; } } /* Dashboard table panels: action ellipsis is a tap target — bump to 36px on touch, keep desktop dense. */ @media (max-width: 768px) { .sa-dash-action-btn { width: 36px; height: 36px; } .sa-dash-table td.td-actions { width: 48px; } .sa-dash-panel__header { padding: 0.55rem 0.65rem; gap: 0.35rem; } .sa-dash-panel__title { font-size: 0.72rem; } } /* ─── Dark mode ────────────────────────────────────────────── */ [data-theme-mode="dark"] .sa-am-hco { background: #202020 !important; border-color: #303030 !important; } [data-theme-mode="dark"] .sa-am-hco__header:hover { background: #222222 !important; } [data-theme-mode="dark"] .sa-am-user-row:hover { background: #222222 !important; } [data-theme-mode="dark"] .sa-am-user-name { color: #E8E8E8 !important; } [data-theme-mode="dark"] .sa-am-stat__value { color: #E8E8E8 !important; } [data-theme-mode="dark"] .sa-chart-card { background: #202020 !important; border-color: #303030 !important; } [data-theme-mode="dark"] .sa-kpi-card { background: #202020 !important; border-color: #303030 !important; } [data-theme-mode="dark"] .sa-report-card { background: #202020 !important; border-color: #303030 !important; } [data-theme-mode="dark"] .sa-date-field input { background: #202020 !important; border-color: #303030 !important; color: #E8E8E8 !important; } /* ========================================================== Dark mode — NuVida Command Center ========================================================== */ /* KPI card text was never given dark-mode overrides anywhere in this codebase (only bg/border were) -- the hardcoded light-mode #1A1715 value color is nearly invisible on the #202020 dark panel background. Fixing here benefits every existing consumer of .sa-kpi-card, not just this page. */ [data-theme-mode="dark"] .sa-kpi-card__label { color: #A8A8A8 !important; } [data-theme-mode="dark"] .sa-kpi-card__value { color: #E8E8E8 !important; } [data-theme-mode="dark"] .sa-kpi-card__sub { color: #8A8A8A !important; } [data-theme-mode="dark"] .sa-kpi-card__change.positive { background: rgba(74,222,128,0.12) !important; color: #4ade80 !important; } [data-theme-mode="dark"] .sa-kpi-card__change.negative { background: rgba(248,113,113,0.12) !important; color: #f87171 !important; } [data-theme-mode="dark"] .sa-kpi-card__change.neutral { background: rgba(255,255,255,0.06) !important; color: #A8A8A8 !important; } /* The Command Center KPI cards keep their light-on-dark type in both site themes -- these re-declare (at equal specificity, later in the cascade so they win) what the generic dark-mode rules above would otherwise reset. Their background doesn't carry over: dark mode forces --sa-primary-color to the theme's near-white, so the brand gradient became a white edge around the #202020 inner panel. In dark mode they're that dark panel with a hairline, like the other cards. */ [data-theme-mode="dark"] .sa-cc-kpi-card { background: #202020 !important; border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme-mode="dark"] .sa-cc-kpi-card--attention .sa-kpi-card__icon::after { box-shadow: 0 0 0 2px #202020; } [data-theme-mode="dark"] .sa-cc-kpi-card .sa-kpi-card__label { color: rgba(255, 255, 255, 0.62) !important; } [data-theme-mode="dark"] .sa-cc-kpi-card .sa-kpi-card__value { color: #fff !important; } [data-theme-mode="dark"] .sa-cc-kpi-card .sa-kpi-card__sub, [data-theme-mode="dark"] .sa-cc-kpi-card .sa-kpi-card__prev { color: rgba(255, 255, 255, 0.55) !important; } [data-theme-mode="dark"] .sa-cc-kpi-card .sa-kpi-card__change.positive { background: rgba(74, 222, 128, 0.18) !important; color: #6ee7a8 !important; } [data-theme-mode="dark"] .sa-cc-kpi-card .sa-kpi-card__change.negative { background: rgba(248, 113, 113, 0.18) !important; color: #fca5a5 !important; } [data-theme-mode="dark"] .sa-cc-kpi-card .sa-kpi-card__change.neutral { background: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.7) !important; } [data-theme-mode="dark"] .sa-cc-kpi-card .sa-kpi-card__icon { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; } [data-theme-mode="dark"] .sa-cc-header__greeting { color: #E8E8E8; } [data-theme-mode="dark"] .sa-cc-header__subtitle, [data-theme-mode="dark"] .sa-cc-header__updated { color: #8A8A8A; } [data-theme-mode="dark"] .sa-cc-header__divider { background: #303030; } [data-theme-mode="dark"] .sa-cc-insights-band { background: #18181b; border-color: #303030; } [data-theme-mode="dark"] .sa-cc-insights-band__label { color: #C8C8C8; } [data-theme-mode="dark"] .sa-cc-insight-chip { background: #202020; border-color: #303030; color: #E8E8E8; } [data-theme-mode="dark"] .sa-cc-insight-chip.is-clickable:hover { background: #2a2a2a; border-color: #404040; } [data-theme-mode="dark"] .sa-cc-insight-chip--positive { background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.25); color: #6ee7a8; } [data-theme-mode="dark"] .sa-cc-insight-chip--positive i { color: #6ee7a8; } [data-theme-mode="dark"] .sa-cc-insight-chip--negative { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.25); color: #fca5a5; } [data-theme-mode="dark"] .sa-cc-insight-chip--negative i { color: #fca5a5; } [data-theme-mode="dark"] .sa-cc-insight-chip--loading { color: #8A8A8A; } [data-theme-mode="dark"] .sa-cc-refresh-btn { background: #202020; border-color: #303030; color: #A8A8A8; } [data-theme-mode="dark"] .sa-cc-refresh-btn:hover { background: #222222; color: #E8E8E8; } [data-theme-mode="dark"] .sa-quick-bar__btn { background: #202020; border-color: #303030; color: #E8E8E8; } [data-theme-mode="dark"] .sa-quick-bar__btn:hover { background: #222222; border-color: #404040; } [data-theme-mode="dark"] .sa-cc-card, [data-theme-mode="dark"] .sa-dash-panel, [data-theme-mode="dark"] .sa-map-card { background: #202020; border-color: #303030; } [data-theme-mode="dark"] .sa-cc-card__header, [data-theme-mode="dark"] .sa-dash-panel__header, [data-theme-mode="dark"] .sa-map-card__header { border-bottom-color: #303030; } [data-theme-mode="dark"] .sa-cc-card__title, [data-theme-mode="dark"] .sa-dash-panel__title, [data-theme-mode="dark"] #mapTitle { color: #E8E8E8; } [data-theme-mode="dark"] .sa-cc-card__count { background: #2a2a2a; color: #A8A8A8; } [data-theme-mode="dark"] .sa-cc-range-btn { background: #2a2a2a; color: #A8A8A8; } [data-theme-mode="dark"] .sa-cc-range-btn:hover { background: #333333; color: #E8E8E8; } [data-theme-mode="dark"] .sa-cc-range-menu { background: #202020; border-color: #303030; } [data-theme-mode="dark"] .sa-cc-range-opt { color: #E8E8E8; } [data-theme-mode="dark"] .sa-cc-range-opt:hover { background: #2a2a2a; } [data-theme-mode="dark"] .sa-cc-trend-summary { color: #8A8A8A; } [data-theme-mode="dark"] .sa-cc-trend-summary__num { color: #E8E8E8; } [data-theme-mode="dark"] .sa-map-card__count, [data-theme-mode="dark"] .sa-map-card__header .sa-map-count { color: #8A8A8A; } [data-theme-mode="dark"] .sa-attention__row { border-bottom-color: #2a2a2a; } [data-theme-mode="dark"] .sa-attention__row.is-clickable:hover { background: #252525; } [data-theme-mode="dark"] .sa-attention__count { color: #E8E8E8; } [data-theme-mode="dark"] .sa-attention__label { color: #C8C8C8; } [data-theme-mode="dark"] .sa-attention__hint { color: #8A8A8A; } [data-theme-mode="dark"] .sa-tw-row { border-bottom-color: #2a2a2a; } [data-theme-mode="dark"] .sa-tw-name { color: #E8E8E8; } [data-theme-mode="dark"] .sa-tw-line { color: #A8A8A8; } [data-theme-mode="dark"] .sa-tw-line:hover { color: #E8E8E8; } [data-theme-mode="dark"] .sa-ops-tabs { background: #171717; } [data-theme-mode="dark"] .sa-ops-tab { color: #A8A8A8; } [data-theme-mode="dark"] .sa-ops-tab:hover { color: #E8E8E8; } [data-theme-mode="dark"] .sa-ops-tab.active { background: #2a2a2a; color: #7fb8c9; } [data-theme-mode="dark"] .sa-dash-table { color: #C8C8C8; } [data-theme-mode="dark"] .sa-dash-table thead { background: #202020; } [data-theme-mode="dark"] .sa-dash-table thead th { background: #202020; color: #8A8A8A; border-bottom-color: #303030; } [data-theme-mode="dark"] .sa-dash-table tbody tr { border-bottom-color: #2a2a2a; } [data-theme-mode="dark"] .sa-dash-table tbody tr:hover { background: #252525; } [data-theme-mode="dark"] .sa-dash-table td.td-customer { color: #E8E8E8; } [data-theme-mode="dark"] .sa-dash-action-btn { color: #8A8A8A; } [data-theme-mode="dark"] .sa-dash-empty { color: #8A8A8A; } [data-theme-mode="dark"] .sa-dash-empty__title { color: #C8C8C8; } [data-theme-mode="dark"] .sa-dash-empty__sub { color: #8A8A8A; } [data-theme-mode="dark"] .sa-dash-empty--success i { color: #4ade80; } [data-theme-mode="dark"] .sa-loading { background: linear-gradient(90deg, #202020 25%, #2a2a2a 50%, #202020 75%); background-size: 200% 100%; } [data-theme-mode="dark"] .sa-badge--placed { background: rgba(59,130,246,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.3); } [data-theme-mode="dark"] .sa-badge--shipped { background: rgba(6,182,212,0.12); color: #67e8f9; border-color: rgba(6,182,212,0.3); } [data-theme-mode="dark"] .sa-badge--delivered, [data-theme-mode="dark"] .sa-badge--dist-active { background: rgba(74,222,128,0.12); color: #86efac; border-color: rgba(74,222,128,0.3); } [data-theme-mode="dark"] .sa-badge--pending, [data-theme-mode="dark"] .sa-badge--dist-inactive { background: rgba(245,158,11,0.12); color: #fcd34d; border-color: rgba(245,158,11,0.3); } [data-theme-mode="dark"] .sa-badge--dist-never { background: rgba(220,38,38,0.12); color: #fca5a5; border-color: rgba(220,38,38,0.3); } [data-theme-mode="dark"] .sa-map-toggle .btn-sa-outline { background: #202020; color: #A8A8A8; border-color: #303030; } [data-theme-mode="dark"] .sa-map-toggle .btn-sa-outline:hover { background: #2a2a2a; color: #E8E8E8; } [data-theme-mode="dark"] .sa-map-states { background: #171717; border-top-color: #303030; } [data-theme-mode="dark"] .sa-map-state-badge { background: #2a2a2a; color: #C8C8C8; } [data-theme-mode="dark"] .sa-cc-toast { background: #E8E8E8; color: #1A1715; } /* .sa-activity-timeline (from entity-admin-customer-config.php) never had dark-mode overrides before this page reused it -- title/desc/date all used hardcoded near-black/gray text that was nearly unreadable against a dark card background. */ [data-theme-mode="dark"] .sa-activity-timeline::before { background: #303030; } [data-theme-mode="dark"] .sa-activity-timeline__title { color: #E8E8E8; } [data-theme-mode="dark"] .sa-activity-timeline__desc { color: #A8A8A8; } [data-theme-mode="dark"] .sa-activity-timeline__date { color: #8A8A8A; }