/* ═══════════════════════════════════════════════════════════════ 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%; } .sa-kpi-card__inner { padding: 20px 20px 14px; position: relative; z-index: 1; } .sa-kpi-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sa-kpi-card__label { font-size: 0.7rem; font-weight: 600; color: #6E6660; text-transform: uppercase; letter-spacing: 0.06em; } .sa-kpi-card__icon { width: 40px; height: 40px; 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; } .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; } .sa-scroll-table::-webkit-scrollbar { width: 6px; } .sa-scroll-table::-webkit-scrollbar-thumb { background: #B5AB9D; } /* 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; } @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 mini app header + sidebar */ .cs-brand-preview { border: 1px solid #D8D0C3; border-radius: 0; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); max-width: 320px; } .cs-brand-preview__header { padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; color: #fff; } .cs-brand-preview__logo { width: 44px; height: 44px; border-radius: 0; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 2px solid rgba(255,255,255,0.2); } .cs-brand-preview__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .cs-brand-preview__name { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; } .cs-brand-preview__body { padding: 1.25rem; } .cs-brand-preview__colors { display: flex; gap: 1rem; margin-bottom: 0.75rem; } .cs-brand-preview__color-block { flex: 1; text-align: center; } .cs-brand-preview__color-swatch { width: 100%; height: 36px; border-radius: 0; border: 1px solid rgba(0,0,0,0.08); margin-bottom: 0.25rem; } .cs-brand-preview__color-label { font-size: 0.68rem; color: #6E6660; font-weight: 600; font-family: monospace; } .cs-brand-preview__url { font-size: 0.78rem; color: #6E6660; padding-top: 0.5rem; border-top: 1px solid #EFEBE5; } .cs-brand-preview__mock-nav { padding: 0.75rem 1.25rem; background: #2A2622; display: flex; gap: 0.5rem; } .cs-brand-preview__mock-nav-item { height: 6px; border-radius: 0; background: rgba(255,255,255,0.15); } /* 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); } /* ═════════ 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 (2x2) -------------------------------------------------------- */ .sa-dash-grid { display: grid; grid-template-columns: 1fr 1fr 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 */ .sa-dash-table-wrap { flex: 1; overflow-y: auto; max-height: 240px; 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; } /* -------------------------------------------------------- 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: 1400px) { .sa-dash-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 992px) { .sa-dash-grid { grid-template-columns: 1fr; } } @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; } }