/* ============================================================ DistrictNavigator mobile.css. ------------------------------------------------------------ Shared SBCSS theme (colors, header, footer, container, typography, buttons) lives in /css/sbcss-tool.css. This file only covers DN's tool-specific styles: login screen, district selector, data cards, avatar menu, etc. ============================================================ */ :root { /* Aliases so DN's existing rules that reference --blue / --yellow / etc. resolve to the shared --sbcss-* palette. */ --blue: var(--sbcss-blue); --blue-dark: var(--sbcss-blue-dark); --yellow: var(--sbcss-yellow); --green: #2e7d32; --light-bg: var(--sbcss-bg); --white: var(--sbcss-white); --text: var(--sbcss-text); --muted: var(--sbcss-muted); --border: var(--sbcss-border); } /* Login screen */ .login-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: calc(100vh - 60px); } .login-screen-card { background: var(--white); padding: 40px; width: 100%; max-width: 400px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); text-align: center; } .login-screen-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 20px; } .login-screen-card .modal-field { text-align: left; padding: 0 16px; } .login-screen-card .modal-submit { margin-left: 16px; margin-right: 16px; width: calc(100% - 32px); } .login-screen-card .modal-divider { margin: 24px 0; } /* Spinner */ .login-spinner { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px 0; } .login-spinner p { color: var(--muted); font-size: 0.85rem; } .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } form, .data-wrap { flex: 1; } /* DN-specific header override: hide the right-side spacer since the logged-in view uses .header-avatar-wrap there instead. */ .header-spacer { display: none; } /* Desktop max-width container — keeps content from stretching too wide on big screens */ .content-wrap { max-width: 800px; margin: 0 auto; width: 100%; padding: 0 16px; flex: 1; } /* Wider variant — used on form-heavy pages like submit_service.php. */ .content-wrap.is-wide { max-width: 1200px; } /* DN form pages override the shared SBCSS pale-blue body background with a neutral warm grey. Add the matching `page-…` class to on each page. */ body.page-submit-service, body.page-mobile { background-color: #f4f4f2; } /* Tighter top section so the form fits in one viewport without scrolling on typical desktop screens. Strips browser-default h2 margin and trims the district-header padding/margin. */ body.page-submit-service .data-wrap { padding-top: 4px; } body.page-submit-service .district-header { margin-bottom: 16px; padding-bottom: 6px; } body.page-submit-service .district-header h2 { margin: 0; } body.page-submit-service .district-header .meta { margin-top: 2px; } /* (Sticky header/footer now applied sitewide via /css/sbcss-tool.css.) */ /* The "+ Add a new …" sentinel option stands out from existing-name picks. */ .form-field select option[value="__new__"] { font-weight: 700; } /* Selector */ .selector-section { padding: 20px 0 8px; } .selector-section label { display: block; font-weight: 600; font-size: 0.94rem; color: var(--blue-dark); margin-bottom: 7px; } .selector-section select { width: 100%; padding: 12px 14px; font-size: 1rem; font-family: 'Inter', Arial, sans-serif; border: 2px solid #c9dff0; border-radius: 8px; background: var(--white); color: var(--text); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23026AB0' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .selector-section select:focus { outline: none; border-color: var(--blue); } /* Data sections */ .data-wrap { padding: 14px 0 40px; } .district-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border); } .district-header h2 { font-size: 1.3rem; color: var(--blue); font-weight: 700; } .district-header .meta { font-size: 0.9rem; color: var(--muted); margin-top: 4px; } /* Section label */ .section-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); margin: 18px 0 8px; display: flex; align-items: center; justify-content: space-between; } .expand-all-btn { font-size: 0.72rem; font-weight: 600; font-family: inherit; color: var(--blue); background: var(--light-bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; cursor: pointer; text-transform: none; letter-spacing: 0; } .expand-all-btn:hover { background: var(--border); } /* Stats grid */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); gap: 10px; margin-bottom: 4px; } /* Status indicators flex layout */ .status-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; } .status-grid .stat-card { flex: 1 1 calc(33.333% - 10px); min-width: 0; } .stat-card { background: var(--white); border-radius: 10px; padding: 14px 8px 22px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-top: 3px solid var(--blue); } /* When a stat-card is also an anchor (e.g. assessment cards link to the detail page), strip the underline / inherited link color so it still looks like a card. */ a.stat-card { display: block; text-decoration: none; color: inherit; } a.stat-card:hover, a.stat-card:focus { text-decoration: none; color: inherit; } .perf-grid .stat-card, .assess-grid .stat-card { padding: 10px 8px 14px; } .stat-value { font-size: 1.3rem; font-weight: 700; color: var(--blue); overflow-wrap: break-word; word-break: break-word; } .stat-value.shrink { font-size: 0.95rem; line-height: 1.3; } .stat-label { font-size: 0.78rem; color: var(--muted); margin-top: 3px; line-height: 1.3; } /* State Assessments grid */ .assess-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; } .assess-grid .stat-card { min-width: 0; } .assess-count-4 .stat-card { flex: 1 1 calc(50% - 5px); } .assess-count-3 .stat-card { flex: 1 1 calc(33.333% - 7px); } .assess-count-2 .stat-card { flex: 1 1 calc(50% - 5px); } .assess-count-1 .stat-card { flex: 1 1 100%; } /* Info rows */ .info-card { background: var(--white); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 4px; } .info-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid #eef3f8; gap: 10px; } .info-row:last-child { border-bottom: none; } .info-label { font-size: 0.88rem; color: var(--muted); font-weight: 600; flex-shrink: 0; } .info-value { font-size: 0.92rem; color: var(--text); text-align: right; word-break: break-word; } .info-value a { color: var(--blue); text-decoration: underline; } /* Link buttons */ .link-grid { display: flex; flex-direction: column; gap: 9px; } .link-btn { display: block; padding: 12px 16px; background: var(--white); border: 1.5px solid var(--border); border-radius: 8px; color: var(--blue); text-decoration: none; font-size: 0.9rem; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .link-btn span { float: right; color: var(--muted); font-weight: 400; } /* Status badges */ .badge-grid { display: flex; flex-wrap: wrap; gap: 8px; } .status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; } .badge-yes { background: #e8f5e9; color: #2e7d32; } .badge-no { background: #f5f5f5; color: #888; } .badge-val { background: #e3f0fb; color: var(--blue-dark); } /* Team groups */ .team-group { margin-bottom: 16px; } .team-group-header { font-size: 1rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 0; cursor: pointer; list-style: none; border-bottom: 2px solid var(--blue); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .team-group-header::-webkit-details-marker { display: none; } .team-group-header::before { content: '\25B6'; font-size: 0.7rem; color: var(--blue); transition: transform 0.2s; } .team-group[open] > .team-group-header::before { transform: rotate(90deg); } .team-group-count { font-weight: 400; font-size: 0.85rem; color: var(--muted); text-transform: none; } /* Services */ .services-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .service-card { background: var(--white); border-radius: 10px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 3px solid var(--blue); } .svc-team { font-size: 0.82rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; } .svc-subteam { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; } .svc-manager { font-size: 0.84rem; color: var(--muted); margin-bottom: 6px; } .svc-desc { font-size: 0.94rem; color: var(--text); line-height: 1.4; margin-bottom: 8px; } .svc-meta { display: flex; flex-wrap: wrap; gap: 6px; } .svc-meta span { font-size: 0.82rem; color: var(--muted); background: var(--light-bg); padding: 3px 8px; border-radius: 12px; } /* Service card expand/collapse */ details.service-card { cursor: pointer; } details.service-card summary { list-style: none; position: relative; padding-right: 28px; cursor: pointer; } details.service-card summary::-webkit-details-marker { display: none; } details.service-card summary::after { content: '\25B8'; position: absolute; right: 4px; top: 0; font-size: 0.85rem; color: var(--blue); transition: transform 0.2s; } details.service-card[open] summary::after { transform: rotate(90deg); } .svc-schools { margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef3f8; } .svc-schools-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .svc-schools ul { margin: 0; padding-left: 16px; } .svc-schools li { font-size: 0.92rem; color: var(--text); padding: 3px 0; line-height: 1.4; } /* Header avatar circle + dropdown */ .header-avatar-wrap { margin-left: auto; flex-shrink: 0; position: relative; } .header-avatar { width: 36px; height: 36px; border-radius: 50%; background: #FFDA39; color: #1a1a2e; font-size: 0.82rem; font-weight: 700; font-family: inherit; border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1; } .header-avatar:hover { background: #ffe46a; } .avatar-menu { position: absolute; right: 0; top: 42px; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); min-width: 120px; z-index: 1000; overflow: hidden; } .avatar-menu-item { display: block; width: 100%; padding: 10px 16px; background: none; border: none; cursor: pointer; font-size: 0.85rem; font-family: inherit; color: #333; text-align: left; } .avatar-menu-item:hover { background: #f0f6fb; } /* Sign-in prompt (unauthenticated services view) */ .svc-signin-prompt { background: var(--white); border-radius: 10px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 3px solid var(--blue); margin-bottom: 4px; } .svc-count { font-size: 0.95rem; font-weight: 700; color: var(--blue); margin-bottom: 10px; } .svc-team-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; } .svc-team-list li { font-size: 0.82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 5px 10px; background: var(--light-bg); border-radius: 6px; display: flex; justify-content: space-between; align-items: center; } .team-count { font-weight: 400; font-size: 0.78rem; text-transform: none; } .svc-signin-btn { display: block; width: 100%; padding: 11px; background: var(--blue); color: white; border: none; border-radius: 8px; font-size: 0.92rem; font-weight: 600; cursor: pointer; font-family: inherit; } .svc-signin-btn:hover { background: var(--blue-dark); } /* Modal overlay */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 16px; } .modal-card { background: var(--white); border-radius: 12px; padding: 28px 24px; width: 100%; max-width: 380px; position: relative; box-shadow: 0 8px 30px rgba(0,0,0,0.18); } .modal-card h3 { font-size: 1.15rem; color: var(--blue); font-weight: 700; margin-bottom: 4px; } .modal-sub { font-size: 0.84rem; color: var(--muted); margin-bottom: 18px; } .modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.5rem; color: var(--muted); cursor: pointer; line-height: 1; } .modal-close:hover { color: var(--text); } .modal-field { margin-bottom: 14px; } .modal-field label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--blue-dark); margin-bottom: 5px; } .modal-field input { width: 100%; padding: 10px 12px; font-size: 0.95rem; font-family: inherit; border: 2px solid #c9dff0; border-radius: 8px; background: var(--white); color: var(--text); } .modal-field input:focus { outline: none; border-color: var(--blue); } .modal-submit { display: block; width: 100%; padding: 11px; background: var(--blue); color: white; border: none; border-radius: 8px; font-size: 0.92rem; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 4px; } .modal-submit:hover { background: var(--blue-dark); } .modal-msg { font-size: 0.84rem; margin-top: 10px; text-align: center; min-height: 1.2em; } .modal-msg-error { color: #c62828; } .modal-msg-success { color: var(--green); } /* Top action row: ← Home link on the left, owner-only buttons on the right. */ .top-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 16px; } .top-action-btn { display: inline-block; padding: 6px 12px; background: var(--blue); color: #fff; text-decoration: none; border-radius: 6px; font-size: 0.82rem; font-weight: 600; font-family: inherit; line-height: 1.2; } .top-action-btn:hover { background: var(--blue-dark); } /* ── Submit Service form (Pages/submit_service.php) ── */ .service-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-weight: 600; font-size: 0.92rem; color: var(--blue-dark); } .form-field .req { color: #c62828; font-weight: 700; } .form-field .optional { color: var(--muted); font-weight: 400; font-size: 0.85em; } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"], .form-field input[type="date"], .form-field select, .form-field textarea { width: 100%; padding: 10px 12px; font-size: 0.95rem; font-family: inherit; border: 2px solid #c9dff0; border-radius: 8px; background: var(--white); color: var(--text); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--blue); } /* Replace the native select arrow with an SBCSS-blue caret so the dropdown visually matches the other form controls. */ .form-field select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; } .form-field textarea { resize: vertical; min-height: 90px; } .form-row { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } } /* "Did you mean…" warning under the contact-new input */ .contact-suggest { margin-top: 8px; padding: 10px 12px; background: #fff8e1; border: 1px solid #ffd54f; border-radius: 8px; font-size: 0.9rem; color: var(--text); } .contact-suggest-name { color: var(--blue-dark); } .contact-suggest-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .contact-suggest-actions button { padding: 5px 12px; font-size: 0.85rem; font-family: inherit; border-radius: 6px; border: 1px solid var(--border); background: var(--white); color: var(--text); cursor: pointer; } .contact-suggest-actions button:hover { border-color: var(--blue); } .contact-suggest-actions .contact-suggest-use { border-color: var(--blue); background: var(--blue); color: var(--white); } .contact-suggest-actions .contact-suggest-use:hover { background: var(--blue-dark); border-color: var(--blue-dark); } .form-fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px 16px; background: var(--white); } /* Section title sits flush with the card's content edge — no fieldset-legend browser indent and no straddling of the card border. */ .form-fieldset-title { margin: 0 0 14px; padding: 0; font-weight: 700; color: var(--blue-dark); font-size: 1rem; } /* District-block: combined Schools + Contact card on submit_service.php. A divider separates the two subsections inside one card. */ .district-block { padding: 16px 18px 18px; } .district-block-section + .district-block-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .district-block-section-title { margin: 0 0 8px; font-size: 0.88rem; font-weight: 700; color: var(--blue-dark); text-transform: uppercase; letter-spacing: 0.04em; } .form-hint { font-size: 0.82rem; color: var(--muted); margin: 2px 0 10px; } /* ── Checkbox dropdown (used for the district picker) ── Wrapper is position:relative so the panel can absolutely-position beneath the trigger. The panel is hidden via the [hidden] attribute (toggled by JS) and scrolls when its content is taller than max-height. */ .dropdown-multiselect { position: relative; } .dropdown-trigger { width: 100%; padding: 10px 14px; font-size: 0.95rem; font-family: inherit; text-align: left; cursor: pointer; border: 2px solid #c9dff0; border-radius: 8px; background: var(--white); color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .dropdown-trigger:hover { border-color: var(--blue); } .dropdown-trigger:focus { outline: none; border-color: var(--blue); } .dropdown-multiselect.is-open .dropdown-trigger { border-color: var(--blue); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dropdown-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown-summary.is-placeholder { color: var(--muted); } .dropdown-caret { color: var(--blue); font-size: 0.85em; transition: transform 0.15s; } .dropdown-multiselect.is-open .dropdown-caret { transform: rotate(180deg); } .dropdown-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; max-height: 320px; overflow-y: auto; background: var(--white); border: 2px solid var(--blue); border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); padding: 4px 0; } .dropdown-option { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; font-size: 0.92rem; transition: background 0.1s; } .dropdown-option:hover { background: var(--light-bg); } .dropdown-option input { margin: 0; } .dropdown-option input:checked + span { font-weight: 700; color: var(--blue-dark); } .radio-grid, .checkbox-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 4px; } .radio-card, .checkbox-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--light-bg); cursor: pointer; font-size: 0.9rem; transition: background 0.12s, border-color 0.12s; } .radio-card:hover, .checkbox-row:hover { background: #eaf3fb; border-color: var(--blue); } .radio-card input, .checkbox-row input { margin: 0; flex-shrink: 0; } .radio-card span, .checkbox-row span { line-height: 1.3; } .radio-card input:checked + span, .checkbox-row input:checked + span { font-weight: 700; color: var(--blue-dark); } .form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .btn-primary, .btn-secondary { display: inline-block; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 0.92rem; text-decoration: none; cursor: pointer; border: none; font-family: inherit; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-dark); } .btn-secondary { background: var(--light-bg); color: var(--blue-dark); border: 1px solid var(--border); } .btn-secondary:hover { background: #eaf3fb; } .form-errors { padding: 14px 16px; border-left: 4px solid #c62828; color: #842029; background: #fdecea; } .form-errors strong { display: block; margin-bottom: 4px; } .form-errors ul { margin: 0; padding-left: 22px; } .form-success { padding: 18px 20px; border-left: 4px solid var(--green); background: #e8f5e9; } .form-success h3 { color: var(--green); margin: 0 0 6px; } .form-success p { margin: 0 0 12px; color: var(--text); } /* ── Assessment Detail page (Pages/assessment_detail.php) ── */ .district-school { color: var(--blue-dark); font-weight: 600; font-size: 0.95em; } .school-selector { margin-top: 4px; margin-bottom: 4px; } .school-selector .selector-section { margin-bottom: 0; } .chart-wrap { position: relative; width: 100%; height: 280px; margin: 4px 0 2px; } .chart-wrap-wide { height: 340px; } @media (min-width: 700px) { .chart-wrap { height: 340px; } .chart-wrap-wide { height: 400px; } } /* Sub-line under stat-value (e.g. "12,345 students"). */ .stat-sub { font-size: 0.72rem; color: var(--muted); margin-top: 4px; } /* Claims breakdown — stacked bars. */ .claims-card { padding: 14px 16px 18px; } .claims-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.78rem; color: var(--muted); margin-bottom: 14px; } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; } .swatch-above { background: #2e7d32; } .swatch-near { background: #f6c145; } .swatch-below { background: #c62828; } .claim-row { margin-bottom: 14px; } .claim-row:last-child { margin-bottom: 0; } .claim-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; gap: 10px; } .claim-name { font-size: 0.92rem; font-weight: 600; color: var(--blue-dark); } .claim-n { font-size: 0.78rem; color: var(--muted); white-space: nowrap; } .claim-bar { display: flex; width: 100%; height: 28px; background: var(--light-bg); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); } .bar-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.76rem; font-weight: 600; overflow: hidden; white-space: nowrap; min-width: 0; } .bar-above { background: #2e7d32; } .bar-near { background: #f6c145; color: #4a3a00; } .bar-below { background: #c62828; } /* Hide the % text on very narrow segments — keep the segment visible but let the legend explain the color when there isn't room for the number. */ .bar-seg .bar-label { padding: 0 6px; } .bar-seg[style*="width: 0"] { display: none; } .claim-empty { font-size: 0.85rem; color: var(--muted); padding: 6px 0; } /* Year-over-year claims table. */ .claims-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .claims-table th, .claims-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); } .claims-table th { color: var(--blue-dark); font-weight: 700; font-size: 0.82rem; background: var(--light-bg); } .claims-table td:not(:first-child), .claims-table th:not(:first-child) { text-align: right; } .claims-table tr:last-child td { border-bottom: none; } /* Subtle hover hint so users know the assessment cards are clickable. */ .assess-card { transition: transform 0.12s ease, box-shadow 0.12s ease; } .assess-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* Google SSO button — scaled up since Google's max height is "large" */ .google-btn-wrap { display: flex; justify-content: center; margin: 10px 0; } /* "or sign in with password" link */ .pw-login-link { display: block; margin: 18px 0 4px; font-size: 0.85rem; color: var(--muted); text-decoration: underline; cursor: pointer; } .modal-divider { display: flex; align-items: center; margin: 16px 0; color: var(--muted); font-size: 0.8rem; } .modal-divider::before, .modal-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); } .modal-divider span { padding: 0 10px; white-space: nowrap; } /* Password requirements checklist */ .pw-requirements { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 3px; } .pw-requirements li { font-size: 0.8rem; color: var(--muted); padding-left: 20px; position: relative; } .pw-requirements li::before { content: '\25CB'; position: absolute; left: 0; top: 0; font-size: 0.75rem; color: var(--muted); } .pw-requirements li.pw-met { color: var(--green); } .pw-requirements li.pw-met::before { content: '\2714'; color: var(--green); } /* ============================================================ PRE-SELECTION DASHBOARD Landing-view snapshot shown before a district is chosen. Three big-number cards on top, then a stack of Chart.js cards below. To resize a chart, change the height on .dash-chart-canvas-wrap (or its `.tall` modifier). ============================================================ */ .dashboard { padding: 8px 0 30px; } .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; } .dash-stat { background: var(--white); border-radius: 10px; padding: 14px 8px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-top: 3px solid var(--blue); } .dash-stat-value { font-size: 1.6rem; font-weight: 700; color: var(--blue); line-height: 1.1; } .dash-stat-label { font-size: 0.78rem; color: var(--muted); margin-top: 4px; line-height: 1.3; } .dash-chart-card { background: var(--white); border-radius: 10px; padding: 14px 14px 12px; margin-top: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .dash-chart-title { font-size: 0.95rem; font-weight: 700; color: var(--blue-dark); margin: 0 0 10px; } /* Wrapper sets a fixed height because Chart.js needs a sized container when maintainAspectRatio is false. `.tall` is for charts with many labels (services-by-team, top-10) that need more vertical room. */ .dash-chart-canvas-wrap { position: relative; height: 280px; } .dash-chart-canvas-wrap.tall { height: 360px; } @media (max-width: 480px) { .dash-stats { gap: 6px; } .dash-stat { padding: 12px 4px; } .dash-stat-value { font-size: 1.3rem; } .dash-stat-label { font-size: 0.72rem; } .dash-chart-card { padding: 12px 10px 10px; } .dash-chart-canvas-wrap { height: 260px; } .dash-chart-canvas-wrap.tall { height: 340px; } } /* Footer */ /* Footer styled by shared /css/sbcss-tool.css via .site-footer; DN's