/* ============================================================= PrayerMap — Design System White-label ready: tenant colors injected as CSS variables by PHP on every page load (see includes/tenant.php). ============================================================= */ /* ── 1. Base Variables ─────────────────────────────────────── */ :root { /* Tenant-injected (overridden per tenant in ) */ --color-primary: #1d4ed8; --color-primary-rgb: 29, 78, 216; --color-secondary: #1e40af; --color-secondary-rgb: 30, 64, 175; --color-accent: #f59e0b; --color-accent-rgb: 245, 158, 11; --color-on-primary: #ffffff; /* Neutral palette */ --color-text: #1e293b; --color-text-muted: #64748b; --color-text-faint: #94a3b8; --color-border: #e2e8f0; --color-border-dark: #cbd5e1; --color-surface: #ffffff; --color-bg: #f8fafc; --color-bg-hover: #f1f5f9; /* Semantic */ --color-success: #10b981; --color-success-bg: #ecfdf5; --color-error: #ef4444; --color-error-bg: #fef2f2; --color-warning: #f59e0b; --color-warning-bg: #fffbeb; --color-info: #3b82f6; --color-info-bg: #eff6ff; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05); /* Typography */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; /* Layout */ --sidebar-w: 68px; --topbar-h: 60px; --content-max: 960px; /* Transition */ --transition: 150ms ease; /* Chrome (topbar + sidebar + auth brand) — dark navy by default */ --color-chrome-bg: #0f172a; --color-chrome-border: rgba(255,255,255,.07); --color-chrome-text: rgba(255,255,255,.88); --color-chrome-muted: rgba(255,255,255,.6); --color-chrome-hover: rgba(255,255,255,.07); --color-chrome-active: rgba(29,78,216,.25); } /* ── 2. Reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 0.9375rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem; font-weight: 600; line-height: 1.3; color: var(--color-text); } p { margin: 0 0 1rem; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; } /* ── 3. Typography ─────────────────────────────────────────── */ .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .font-medium { font-weight: 500; } .font-semi { font-weight: 600; } .font-bold { font-weight: 700; } .text-muted { color: var(--color-text-muted); } .text-faint { color: var(--color-text-faint); } .text-primary { color: var(--color-primary); } .text-success { color: var(--color-success); } .text-error { color: var(--color-error); } /* ── 4. Utilities ──────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .flex { display: flex; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .w-full { width: 100%; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mb-4 { margin-bottom: 1rem; } /* ── 5. Buttons ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.575rem 1.25rem; font-family: var(--font); font-size: 0.9375rem; font-weight: 500; line-height: 1; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition); text-decoration: none; white-space: nowrap; user-select: none; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 3px solid rgba(var(--color-primary-rgb), .35); outline-offset: 2px; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-on-primary); } .btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); } .btn-secondary:hover { background: rgba(var(--color-primary-rgb), .06); } .btn-ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; } .btn-ghost:hover { background: var(--color-bg-hover); color: var(--color-text); } .btn-danger { background: var(--color-error); color: #fff; border-color: var(--color-error); } .btn-danger:hover { filter: brightness(0.9); } .btn-sm { padding: 0.35rem 0.875rem; font-size: 0.8125rem; border-radius: var(--radius-sm); } .btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; } .btn-block { width: 100%; } .btn-icon { padding: 0.5rem; border-radius: var(--radius-md); } /* ── 6. Forms ──────────────────────────────────────────────── */ .form-group { margin-bottom: 1.125rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-text); margin-bottom: 0.35rem; } .form-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; } .form-label-row .form-label { margin-bottom: 0; } .form-control { display: block; width: 100%; padding: 0.5625rem 0.875rem; font-family: var(--font); font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-dark); border-radius: var(--radius-md); transition: border-color var(--transition), box-shadow var(--transition); appearance: none; } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15); } .form-control::placeholder { color: var(--color-text-faint); } .form-control:disabled { background: var(--color-bg); opacity: 0.7; cursor: not-allowed; } select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; } /* Password toggle wrapper */ .input-icon-wrap { position: relative; display: flex; align-items: center; } .input-icon-wrap .form-control { padding-right: 2.75rem; flex: 1; } .input-icon-btn { position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--color-text-faint); display: flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: var(--radius-sm); line-height: 1; transition: color var(--transition); } .input-icon-btn:hover { color: var(--color-text-muted); } .input-icon-btn:focus-visible { outline: 2px solid rgba(var(--color-primary-rgb), .4); outline-offset: 1px; } .form-hint { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 0.3rem; } .form-error { font-size: 0.8125rem; color: var(--color-error); margin-top: 0.3rem; } .form-control.is-invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(239,68,68,.15); } /* Checkbox */ .form-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; } .form-check input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; } /* ── 7. Alerts ─────────────────────────────────────────────── */ .alert { padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.9rem; border: 1px solid transparent; margin-bottom: 1rem; } .alert--success { background: var(--color-success-bg); color: #065f46; border-color: #a7f3d0; } .alert--error { background: var(--color-error-bg); color: #991b1b; border-color: #fecaca; } .alert--warning { background: var(--color-warning-bg); color: #92400e; border-color: #fde68a; } .alert--info { background: var(--color-info-bg); color: #1e40af; border-color: #bfdbfe; } /* ── 8. Cards ──────────────────────────────────────────────── */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-body { padding: 1.5rem; } .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: 0.9375rem; } .card-footer { padding: 0.875rem 1.5rem; border-top: 1px solid var(--color-border); background: var(--color-bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* ── 9. Badges ─────────────────────────────────────────────── */ .badge { display: inline-block; padding: 0.2rem 0.55rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; border-radius: var(--radius-full); line-height: 1.4; } .badge-primary { background: rgba(var(--color-primary-rgb),.12); color: var(--color-primary); } .badge-accent { background: rgba(var(--color-accent-rgb),.15); color: #92400e; } .badge-success { background: var(--color-success-bg); color: #065f46; } .badge-muted { background: var(--color-bg-hover); color: var(--color-text-muted); } /* ── 10. Progress Bar ──────────────────────────────────────── */ .progress { height: 6px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; } .progress-bar { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width 0.4s ease; } /* ── 11. AUTH Layout ───────────────────────────────────────── */ .auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--color-bg); } @media (min-width: 900px) { .auth-page { grid-template-columns: 1fr 1fr; } } /* Left branding panel */ .auth-brand { display: none; flex-direction: column; justify-content: center; padding: 3rem; background: linear-gradient( 145deg, #060d1a 0%, #0c1628 35%, #112240 65%, #1a2f4a 100% ); color: var(--color-on-primary); position: relative; overflow: hidden; } .auth-brand::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23f59e0b' fill-opacity='.06'/%3E%3C/svg%3E") repeat; pointer-events: none; } @media (min-width: 900px) { .auth-brand { display: flex; } } .auth-brand-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 3rem; } .auth-brand-logo-icon { width: 44px; height: 44px; background: #2563eb; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #ffffff; letter-spacing: -0.5px; font-family: var(--font); flex-shrink: 0; } .auth-brand-appname { font-size: 1.25rem; font-weight: 700; color: var(--color-on-primary); opacity: 0.95; } .auth-brand-headline { font-size: 2rem; font-weight: 700; line-height: 1.25; margin-bottom: 1rem; color: var(--color-on-primary); position: relative; z-index: 1; } .auth-brand-subline { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.8); max-width: 380px; position: relative; z-index: 1; } .auth-brand-tagline { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: 0.875rem; color: rgba(255,255,255,.5); position: relative; z-index: 1; } /* Right form panel */ .auth-form-panel { display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.5rem; min-height: 100vh; } @media (min-width: 600px) { .auth-form-panel { padding: 3rem 2.5rem; } } .auth-form-inner { width: 100%; max-width: 400px; margin: 0 auto; } /* Mobile branding header — collapses the left panel into a strip at the top of the form */ .auth-mobile-header { background: linear-gradient( 120deg, #060d1a 0%, #1a2f4a 100% ); color: var(--color-on-primary); /* Negative margin bleeds to auth-form-panel edges; matches panel padding */ margin: -2rem -1.5rem 2rem; padding: 1.5rem 1.5rem 1.25rem; } @media (min-width: 600px) { .auth-mobile-header { margin: -3rem -2.5rem 2.5rem; padding: 1.75rem 2.5rem 1.5rem; } } @media (min-width: 900px) { /* Left panel is visible on desktop — header strip is not needed */ .auth-mobile-header { display: none; } } .auth-mobile-header-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .auth-mobile-logo-icon { width: 36px; height: 36px; background: #2563eb; border-radius: var(--radius-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #ffffff; letter-spacing: -0.5px; font-family: var(--font); } .auth-mobile-appname { font-size: 1.125rem; font-weight: 700; color: var(--color-on-primary); } .auth-mobile-tagline { font-size: 0.8125rem; color: rgba(255,255,255,.8); line-height: 1.5; margin: 0; } .auth-heading { font-size: 1.625rem; font-weight: 700; margin-bottom: 0.25rem; } .auth-subhead { color: var(--color-text-muted); margin-bottom: 1.75rem; font-size: 0.9375rem; } .auth-footer { margin-top: 1.75rem; font-size: 0.875rem; color: var(--color-text-muted); text-align: center; } .auth-footer a { color: var(--color-primary); font-weight: 500; } .auth-page-footer { margin-top: auto; padding-top: 2rem; font-size: 0.8125rem; color: var(--color-text-faint); text-align: center; } /* ── 12. APP Layout ────────────────────────────────────────── */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } /* Topbar */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 1.25rem; gap: 0.75rem; z-index: 100; box-shadow: var(--shadow-sm); } .topbar-brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; flex-shrink: 0; } .topbar-brand:hover { text-decoration: none; } .topbar-logo { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-primary); display: flex; align-items: center; justify-content: center; color: var(--color-on-primary); flex-shrink: 0; } .topbar-appname { font-size: 1.0625rem; font-weight: 700; color: var(--color-text); } .topbar-spacer { flex: 1; } .topbar-actions { display: flex; align-items: center; gap: 0.25rem; } /* User dropdown */ .user-menu { position: relative; } .user-menu-trigger { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--color-text); font-family: var(--font); font-size: 0.875rem; font-weight: 500; transition: background var(--transition); } .user-menu-trigger:hover { background: var(--color-bg-hover); } .user-avatar { width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .user-menu-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 200; padding: 0.375rem; overflow: hidden; } .user-menu-dropdown.is-open { display: block; } .dropdown-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; color: var(--color-text); text-decoration: none; cursor: pointer; transition: background var(--transition); border: none; background: none; width: 100%; font-family: var(--font); text-align: left; } .dropdown-item:hover { background: var(--color-bg-hover); text-decoration: none; } .dropdown-item.danger { color: var(--color-error); } .dropdown-item.danger:hover { background: var(--color-error-bg); } .dropdown-divider { height: 1px; background: var(--color-border); margin: 0.3rem 0; } .dropdown-header { padding: 0.5rem 0.75rem 0.375rem; font-size: 0.75rem; color: var(--color-text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } /* Sidebar */ .sidebar { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--sidebar-w); background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; z-index: 90; overflow-y: auto; transform: translateX(-100%); transition: transform 250ms ease; } .sidebar.is-open { transform: none; } @media (min-width: 900px) { .sidebar { transform: none; } } /* Sidebar overlay (mobile) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 89; top: var(--topbar-h); } .sidebar-overlay.is-open { display: block; } /* Nav */ .nav-section { padding: 0.75rem 0.375rem 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; } .nav-section-title { padding: 0 0.625rem; margin-bottom: 0.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-faint); } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.6rem 0.25rem; border-radius: var(--radius-md); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.01em; color: var(--color-text-muted); text-decoration: none; transition: background var(--transition), color var(--transition); cursor: pointer; border: none; background: none; width: 100%; font-family: var(--font); text-align: center; } .nav-item:hover { background: var(--color-bg-hover); color: var(--color-text); text-decoration: none; } .nav-item.active { background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); } .nav-item.active svg { color: var(--color-primary); } /* Tiny label below nav icon */ .nav-label { font-size: 0.6rem; font-weight: 500; line-height: 1; letter-spacing: 0.01em; } .nav-icon { width: 20px; height: 20px; flex-shrink: 0; } .nav-item.active .nav-icon { opacity: 1; } /* Hide long sidebar footer — no room in icon sidebar */ .sidebar-footer { display: none; } .sidebar-spacer { flex: 1; } .sidebar-footer { padding: 0.875rem 0.625rem; border-top: 1px solid var(--color-border); } /* Main content area */ .main-wrap { margin-top: var(--topbar-h); min-height: calc(100vh - var(--topbar-h)); transition: margin-left 250ms ease; } @media (min-width: 900px) { .main-wrap { margin-left: var(--sidebar-w); } } .main-content { max-width: var(--content-max); margin: 0 auto; padding: 1.75rem 1.25rem; } @media (min-width: 600px) { .main-content { padding: 2rem 1.75rem; } } /* Page header */ .page-header { margin-bottom: 1.75rem; } .page-title { font-size: 1.375rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.2rem; } .page-subtitle { font-size: 0.9rem; color: var(--color-text-muted); } /* ── 13. Today View / Assignments ──────────────────────────── */ .session-tabs { display: flex; gap: 0.375rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .session-tab { padding: 0.4rem 1rem; border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); cursor: pointer; transition: all var(--transition); text-decoration: none; } .session-tab:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; } .session-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } /* Count badge inside a session tab */ .session-tab-count { display: inline-block; margin-left: 0.375rem; font-size: 0.75rem; font-weight: 600; opacity: 0.75; } .session-tab-count.done { color: var(--color-success); opacity: 1; } .session-tab.active .session-tab-count { opacity: 0.85; color: var(--color-on-primary); } .session-tab.active .session-tab-count.done { color: var(--color-on-primary); } /* Live time chip in page header */ .now-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; color: var(--color-text-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.25rem 0.75rem; white-space: nowrap; align-self: center; } .now-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .session-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .session-progress-label { font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } /* Assignment card */ .assignment-list { display: flex; flex-direction: column; gap: 0.75rem; } .assignment-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; transition: border-color var(--transition), box-shadow var(--transition); } .assignment-card:hover { border-color: var(--color-border-dark); box-shadow: var(--shadow-sm); } .assignment-card.is-done { background: var(--color-bg); opacity: 0.72; } .assignment-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; } .assignment-subject { font-size: 0.8125rem; color: var(--color-text-muted); font-weight: 500; } .assignment-title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0; } .assignment-card.is-done .assignment-title { text-decoration: line-through; color: var(--color-text-muted); } .assignment-desc { display: none; font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.5rem; line-height: 1.6; } .assignment-desc.is-visible { display: block; } .assignment-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; gap: 0.75rem; } .assignment-completed-at { font-size: 0.8rem; color: var(--color-success); display: flex; align-items: center; gap: 0.35rem; } .btn-complete { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1.1rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 1.5px solid var(--color-border-dark); background: var(--color-surface); color: var(--color-text-muted); font-family: var(--font); transition: all var(--transition); min-width: 110px; justify-content: center; } .btn-complete:hover { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-bg); } .assignment-card.is-done .btn-complete { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); } .all-done-banner { text-align: center; padding: 3rem 1.5rem; color: var(--color-text-muted); } .all-done-banner .icon { font-size: 2.5rem; margin-bottom: 0.75rem; } .all-done-banner h3 { color: var(--color-success); margin-bottom: 0.25rem; } .no-session-banner { text-align: center; padding: 2.5rem 1.5rem; color: var(--color-text-muted); } .no-session-banner .icon { font-size: 2rem; margin-bottom: 0.75rem; } /* ── 14. Hamburger button ──────────────────────────────────── */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; padding: 8px; border: none; background: none; border-radius: var(--radius-md); cursor: pointer; flex-shrink: 0; transition: background var(--transition); } .hamburger:hover { background: var(--color-bg-hover); } .hamburger span { display: block; height: 2px; background: var(--color-text-muted); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; } @media (min-width: 900px) { .hamburger { display: none; } } /* ── 15. Responsive ────────────────────────────────────────── */ @media (max-width: 599px) { .auth-form-inner { max-width: 100%; } .main-content { padding: 1.25rem 1rem; } .session-tabs { gap: 0.25rem; } .session-tab { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } } /* ── 16. Bottom navigation bar (mobile only) ──────────────── */ .bottom-nav { display: none; /* shown only on mobile via media query */ } @media (max-width: 899px) { /* Show bottom nav */ .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 10px rgba(0,0,0,.07); z-index: 110; padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone notch */ } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; color: var(--color-text-faint); text-decoration: none; font-size: 0.6rem; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: color var(--transition); } .bottom-nav-item:hover, .bottom-nav-item:focus { color: var(--color-text); text-decoration: none; } .bottom-nav-item.active { color: var(--color-primary); } .bottom-nav-item svg { width: 22px; height: 22px; flex-shrink: 0; } /* Extra bottom padding so content clears the nav bar */ .main-content { padding-bottom: calc(56px + 1.5rem); } /* Hide hamburger — bottom nav handles mobile navigation */ .hamburger { display: none !important; } /* Sidebar is icon-only on desktop; on mobile it's unused */ .sidebar, .sidebar-overlay { display: none !important; } } /* ── 17. Prayer session start / picker screen ──────────────── */ .pray-start { max-width: 440px; margin: 0 auto; } .pray-start-heading { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-faint); margin: 1.25rem 0 0.5rem; } /* Session picker card */ .session-pick-card { display: block; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.1rem 1.25rem; margin-bottom: 0.6rem; text-decoration: none; color: inherit; transition: border-color var(--transition), box-shadow var(--transition); position: relative; } .session-pick-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); text-decoration: none; color: inherit; } .session-pick-card.is-featured { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), .03); padding: 1.35rem 1.5rem; } .session-pick-card.is-done { opacity: 0.6; } .session-pick-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.2rem; } .session-pick-name { font-size: 1rem; font-weight: 700; color: var(--color-text); } .session-pick-card.is-featured .session-pick-name { font-size: 1.15rem; } .session-pick-badge { font-size: 0.7rem; font-weight: 600; padding: 0.18rem 0.55rem; border-radius: 999px; white-space: nowrap; } .session-pick-badge.now { background: rgba(var(--color-primary-rgb), .12); color: var(--color-primary); } .session-pick-badge.done { background: var(--color-success-bg); color: var(--color-success); } .session-pick-badge.upcoming { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); } .session-pick-meta { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; } .session-pick-cta { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1rem; padding: 0.7rem 1rem; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; font-size: 0.9375rem; } .session-pick-card:hover .session-pick-cta { opacity: 0.9; } .session-pick-card.is-done .session-pick-cta { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border-dark); } /* Prayer list breadcrumb */ .pray-back { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; color: var(--color-text-muted); text-decoration: none; margin-bottom: 1.25rem; padding: 0.25rem 0; } .pray-back:hover { color: var(--color-text); text-decoration: none; } /* ── 18. Prayer List ───────────────────────────────────────── */ .prayers-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .subject-list { display: flex; flex-direction: column; gap: 0.75rem; } /* Subject accordion card */ .subject-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition); } .subject-card:hover { box-shadow: var(--shadow-sm); } .subject-card.is-inactive { opacity: 0.6; } /*
/ reset to our design */ .subject-card details { margin: 0; } .subject-card summary { list-style: none; cursor: pointer; } .subject-card summary::-webkit-details-marker { display: none; } .subject-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; } .subject-chevron { flex-shrink: 0; color: var(--color-text-faint); transition: transform 200ms ease; } details[open] .subject-chevron { transform: rotate(90deg); } .subject-info { flex: 1; min-width: 0; } .subject-name { font-size: 1rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subject-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; flex-wrap: wrap; } .subject-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } /* Detail list inside a subject */ .detail-list { border-top: 1px solid var(--color-border); } .detail-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem 0.75rem 2.75rem; border-bottom: 1px solid var(--color-border); transition: background var(--transition); } .detail-row:last-child { border-bottom: none; } .detail-row:hover { background: var(--color-bg); } .detail-row.is-inactive { opacity: 0.55; } .detail-info { flex: 1; min-width: 0; } .detail-title { font-size: 0.9375rem; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .detail-row.is-inactive .detail-title { text-decoration: line-through; } .detail-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; } .detail-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } /* Priority dots: ●●●○○ */ .priority-dots { display: inline-flex; gap: 2px; align-items: center; } .priority-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-dark); } .priority-dot.filled { background: var(--color-accent); } /* Detail add-row footer inside accordion */ .detail-add-row { padding: 0.75rem 1.25rem 0.75rem 2.75rem; background: var(--color-bg); } /* Empty states */ .empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--color-text-muted); } .empty-state-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.6; } .empty-state h3 { font-size: 1.125rem; color: var(--color-text); margin-bottom: 0.4rem; } .empty-state p { font-size: 0.9rem; margin-bottom: 1.25rem; } /* Detail count chip */ .detail-count { font-size: 0.75rem; color: var(--color-text-muted); } /* Inline icon-only delete confirmation uses standard btn styles */ .btn-icon-sm { padding: 0.3rem 0.45rem; border-radius: var(--radius-sm); font-size: 0.75rem; } /* ── 17. Form page (add/edit) ──────────────────────────────── */ .form-page-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); max-width: 600px; } .form-page-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.75rem; } .form-page-body { padding: 1.5rem; } .form-page-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); background: var(--color-bg); display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Priority radio buttons */ .priority-radio-group { display: flex; gap: 0.5rem; flex-wrap: wrap; } .priority-radio { position: relative; } .priority-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .priority-radio label { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; border: 1px solid var(--color-border-dark); border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); transition: all var(--transition); user-select: none; } .priority-radio input[type="radio"]:checked + label { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .priority-radio label:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ── 18. Schedule page ─────────────────────────────────────── */ .sched-sections { display: flex; flex-direction: column; gap: 1.25rem; max-width: 900px; } .sched-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .sched-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } .sched-card-sub { font-size: 0.8125rem; color: var(--color-text-muted); font-weight: 400; } .sched-card-body { padding: 1.25rem 1.5rem; } .sched-card-footer { padding: 0.875rem 1.5rem; border-top: 1px solid var(--color-border); background: var(--color-bg); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .sched-empty-hint { color: var(--color-text-muted); font-size: 0.9rem; padding: 0.5rem 0; } /* Session window list */ .win-list { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .win-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); transition: background var(--transition); } .win-row:last-child { border-bottom: none; } .win-row:hover { background: var(--color-bg); } .win-row.is-inactive { opacity: 0.55; } .win-info { flex: 1; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-width: 0; } .win-name { font-weight: 600; font-size: 0.9375rem; } .win-times { font-size: 0.8125rem; color: var(--color-text-muted); } .win-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } /* Timeframe radio buttons */ .tf-radio-group { display: flex; gap: 0.5rem; flex-wrap: wrap; } .tf-radio { position: relative; padding: 0.4rem 0.875rem; border: 1px solid var(--color-border-dark); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); cursor: pointer; transition: all var(--transition); user-select: none; display: flex; flex-direction: column; gap: 0.125rem; } .tf-radio input[type="radio"] { display: none; } .tf-radio-label { font-weight: 600; font-size: 0.875rem; } .tf-radio-hint { font-size: 0.7rem; font-weight: 400; opacity: 0.7; line-height: 1.3; max-width: 160px; } .tf-radio:has(input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .tf-radio:has(input:checked) .tf-radio-hint { opacity: 0.8; } .tf-radio:not(:has(input:checked)):hover { border-color: var(--color-primary); color: var(--color-primary); } /* Daily availability calendar */ .avail-month { margin-bottom: 1.75rem; } .avail-month:last-child{ margin-bottom: 0; } .avail-month-label { font-weight: 600; font-size: 0.9rem; color: var(--color-text); margin-bottom: 0.5rem; } .avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .avail-dow { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--color-text-faint); padding: 0.25rem 0 0.375rem; } .avail-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 4px 2px 5px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); min-height: 54px; } .avail-cell--empty, .avail-cell--out { border-color: transparent; background: transparent; } .avail-cell--out .avail-day-num { opacity: 0.5; } .avail-cell--today { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.05); } .avail-day-num { font-size: 0.68rem; color: var(--color-text-muted); line-height: 1; margin-bottom: 3px; } .avail-day-num.js-day-view { cursor: pointer; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); } .avail-day-num.js-day-view:hover { background: var(--color-primary); color: var(--color-on-primary); } .avail-cell--today .avail-day-num { color: var(--color-primary); font-weight: 700; } .avail-cell--today .avail-day-num.js-day-view:hover { color: var(--color-on-primary); } .avail-select { width: 100%; border: none; background: transparent; text-align: center; text-align-last: center; font-size: 0.8125rem; font-weight: 600; color: var(--color-text); padding: 0; border-radius: var(--radius-sm); cursor: pointer; appearance: none; -webkit-appearance: none; } .avail-select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } .avail-select[data-off="1"] { color: var(--color-text-faint); } /* Cycle status block */ .cycle-status { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .cycle-status-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--color-border); } .cycle-status-row:last-child { border-bottom: none; } .cycle-status-row:nth-child(even) { background: var(--color-bg); } .cycle-label { font-size: 0.8125rem; color: var(--color-text-muted); width: 130px; flex-shrink: 0; } .cycle-value { font-size: 0.9rem; font-weight: 500; color: var(--color-text); } @media (max-width: 600px) { .sched-card-body { padding: 1rem; } .avail-cell { min-height: 44px; } .avail-select { font-size: .8rem; } } /* ── 19. Danger button ─────────────────────────────────────── */ .btn-danger { background: var(--color-error); border-color: var(--color-error); color: #fff; } .btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; } /* ── 20. Confirmation modal ────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; z-index: 900; padding: 1rem; animation: modal-fade 0.15s ease; } .modal-overlay[hidden] { display: none; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } .modal-box { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 400px; width: 100%; padding: 2rem 1.75rem 1.75rem; text-align: center; animation: modal-up 0.18s ease; } @keyframes modal-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-icon-wrap { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; } .modal-icon-wrap--danger { background: var(--color-error-bg); } .modal-icon-wrap--warning { background: var(--color-warning-bg); } .modal-title { font-size: 1.125rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.5rem; } .modal-msg { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.55; margin: 0 0 1.5rem; } .modal-actions { display: flex; gap: 0.75rem; justify-content: center; } .modal-actions .btn { min-width: 90px; } @media (max-width: 480px) { .modal-box { padding: 1.5rem 1.25rem 1.25rem; } .modal-actions { flex-direction: column-reverse; } .modal-actions .btn { width: 100%; } } /* ── § 21 Reports ─────────────────────────────────────────── */ /* KPI stat boxes */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem 1rem; text-align: center; box-shadow: var(--shadow-sm); } .stat-num { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--color-text); letter-spacing: -0.02em; } .stat-label { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.04em; } /* Progress bars */ .bar-track { height: 8px; background: var(--color-border); border-radius: 99px; overflow: hidden; } .bar-track--sm { height: 6px; } .bar-fill { height: 100%; background: var(--color-success); border-radius: 99px; transition: width 0.4s ease; } .bar-fill--partial { background: var(--color-primary); } /* Report tables */ .report-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .report-table th { text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); padding: 0 0.75rem 0.6rem; border-bottom: 1px solid var(--color-border); } .report-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border-faint, var(--color-border)); vertical-align: middle; } .report-table tr:last-child td { border-bottom: none; } .report-table tr.row-today td { background: var(--color-primary-bg, rgba(37,99,235,.05)); } /* Priority weight pip */ .weight-pip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; background: var(--color-border); color: var(--color-text-muted); } /* Answered prayers list */ .answered-list { display: flex; flex-direction: column; gap: 0; } .answered-item { padding: 1rem 0; border-bottom: 1px solid var(--color-border-faint, var(--color-border)); } .answered-item:last-child { border-bottom: none; } .answered-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.2rem; } .answered-subject { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .answered-date { font-size: 0.75rem; color: var(--color-text-faint); margin-left: auto; } .answered-title { font-weight: 600; color: var(--color-text); font-size: 0.9375rem; } .answered-note { font-size: 0.875rem; color: var(--color-text-muted); margin: 0.35rem 0 0; line-height: 1.5; font-style: italic; } /* Badge variants */ .badge-success { background: var(--color-success-bg, #d1fae5); color: var(--color-success, #059669); } .badge-primary { background: var(--color-primary-bg, rgba(37,99,235,.1)); color: var(--color-primary); } @media (max-width: 600px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } .stat-num { font-size: 1.5rem; } } /* ── §18 Avatar upload ───────────────────────────────────────── */ .avatar-upload-wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } /* The circular preview */ .avatar-preview { width: 80px; height: 80px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 700; flex-shrink: 0; overflow: hidden; border: 2px solid var(--color-border); } .avatar-preview-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .avatar-preview-initials { line-height: 1; user-select: none; } .avatar-upload-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; } /* Topbar avatar photo */ .user-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* Dropdown help badge — matches the topbar square ? button */ .dropdown-help-badge { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 3px; border: 1px solid currentColor; font-size: .65rem; font-weight: 700; line-height: 1; flex-shrink: 0; opacity: .75; } /* ── §19 Legal Pages (Privacy / ToS) ────────────────────────── */ .legal-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); } .legal-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 2rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 50; } .legal-header-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--color-text); font-weight: 600; font-size: .9375rem; } .legal-header-icon { width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .legal-header-nav { display: flex; align-items: center; gap: 1.25rem; } .legal-header-nav a { font-size: .875rem; color: var(--color-text-secondary); text-decoration: none; transition: color .15s; } .legal-header-nav a:hover { color: var(--color-primary); } .legal-content { flex: 1; max-width: 720px; width: 100%; margin: 0 auto; padding: 3rem 1.5rem 4rem; } .legal-title { font-size: 2rem; font-weight: 700; line-height: 1.2; margin: 0 0 .375rem; color: var(--color-text); } .legal-meta { font-size: .875rem; color: var(--color-text-faint); margin: 0 0 2.5rem; } .legal-content h2 { font-size: 1.125rem; font-weight: 600; margin: 2rem 0 .5rem; color: var(--color-text); } .legal-content h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .375rem; color: var(--color-text); } .legal-content p { margin: 0 0 1rem; line-height: 1.7; color: var(--color-text-secondary); } .legal-content ul { margin: 0 0 1rem 1.5rem; padding: 0; line-height: 1.7; color: var(--color-text-secondary); } .legal-content ul li { margin-bottom: .375rem; } .legal-content a { color: var(--color-primary); } .legal-content strong { color: var(--color-text); font-weight: 600; } .legal-footer { padding: 1rem 2rem; border-top: 1px solid var(--color-border); font-size: .8125rem; color: var(--color-text-faint); text-align: center; } .legal-footer a { color: var(--color-text-faint); text-decoration: none; } .legal-footer a:hover { color: var(--color-primary); } @media (max-width: 600px) { .legal-header { padding: .75rem 1rem; } .legal-content { padding: 2rem 1rem 3rem; } .legal-title { font-size: 1.5rem; } } /* ── §20 Help Pages ─────────────────────────────────────────── */ .help-layout { display: grid; grid-template-columns: 210px 1fr; gap: 2.25rem; align-items: start; max-width: 960px; } .help-sidebar { position: sticky; top: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem .75rem; } .help-sidebar-title { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-faint); padding: 0 .5rem .5rem; display: block; } .help-toc { list-style: none; padding: 0; margin: 0; } .help-toc li { margin: 0; } .help-toc a { display: block; padding: .35rem .5rem; border-radius: var(--radius-sm); font-size: .8125rem; color: var(--color-text-secondary); text-decoration: none; transition: background .1s, color .1s; line-height: 1.4; } .help-toc a:hover { background: var(--color-bg); color: var(--color-primary); } .help-toc a.active { background: var(--color-bg); color: var(--color-primary); font-weight: 600; } .help-toc-sep { border: none; border-top: 1px solid var(--color-border); margin: .5rem 0; } /* Content area */ .help-content { min-width: 0; } .help-section { margin-bottom: 3rem; scroll-margin-top: 1.5rem; } .help-section h2 { font-size: 1.3125rem; font-weight: 800; margin: 0 0 .875rem; padding-bottom: .625rem; border-bottom: 2px solid var(--color-border); color: var(--color-text); display: flex; align-items: center; gap: .5rem; } .help-section h3 { font-size: 1rem; font-weight: 700; margin: 1.375rem 0 .5rem; color: var(--color-text); } .help-section p { font-size: .9375rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 .875rem; } .help-section ul, .help-section ol { padding-left: 1.375rem; margin: 0 0 .875rem; } .help-section li { font-size: .9375rem; line-height: 1.65; color: var(--color-text-secondary); margin-bottom: .3rem; } .help-section strong { color: var(--color-text); } .help-section code { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 3px; padding: .1rem .35rem; font-size: .875em; font-family: monospace; color: var(--color-text); } /* Numbered steps */ .help-steps { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: step-counter; } .help-steps li { display: flex; gap: .875rem; align-items: flex-start; margin-bottom: .875rem; counter-increment: step-counter; } .help-steps li::before { content: counter(step-counter); min-width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: .8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem; } .help-steps li > div { flex: 1; } .help-steps li strong { display: block; font-size: .9375rem; margin-bottom: .2rem; } .help-steps li > div > span { font-size: .875rem; color: var(--color-text-secondary); line-height: 1.55; } /* Callout boxes */ .help-tip, .help-note, .help-warning { padding: .75rem 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1rem 0; font-size: .875rem; line-height: 1.6; color: var(--color-text-secondary); } .help-tip { background: rgba(37,99,235,.05); border-left: 3px solid var(--color-primary); } .help-tip strong { color: var(--color-primary); } .help-note { background: rgba(16,185,129,.06); border-left: 3px solid #059669; } .help-note strong { color: #059669; } .help-warning { background: rgba(245,158,11,.06); border-left: 3px solid #d97706; } .help-warning strong { color: #d97706; } /* Help table */ .help-table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: 1rem 0 1.25rem; } .help-table th, .help-table td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--color-border); vertical-align: top; line-height: 1.45; } .help-table th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); background: var(--color-bg); } .help-table tr:last-child td { border-bottom: none; } body.dark-mode .help-table th { background: rgba(255,255,255,.04); } /* Setup flow diagram */ .help-flow { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; } .help-flow-step { display: flex; align-items: center; gap: .6rem; background: var(--color-surface-alt, #f5f5f5); border: 1px solid var(--color-border); border-radius: 10px; padding: .6rem .9rem; min-width: 128px; } .help-flow-step.is-cta { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } .help-flow-num { width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; } .help-flow-step.is-cta .help-flow-num { background: rgba(255,255,255,.22); } .help-flow-body { display: flex; flex-direction: column; gap: .1rem; } .help-flow-body strong { font-size: .82rem; font-weight: 600; line-height: 1.25; } .help-flow-body span { font-size: .7rem; opacity: .72; line-height: 1.3; } .help-flow-arrow { color: var(--color-text-muted); font-size: 1.1rem; flex-shrink: 0; user-select: none; } @media (max-width: 680px) { .help-flow { flex-direction: column; align-items: flex-start; } .help-flow-arrow { margin-left: .75rem; } } body.dark-mode .help-flow-step:not(.is-cta) { background: rgba(255,255,255,.04); } /* Screenshot placeholder */ .help-screenshot { border: 2px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: 1.75rem 1rem; text-align: center; margin: 1.125rem 0; } .help-screenshot-icon { font-size: 1.75rem; display: block; margin-bottom: .5rem; } .help-screenshot p { font-size: .8125rem; margin: 0; color: var(--color-text-faint); } /* Topbar help button — small square */ .topbar-help { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm, 4px); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: .875rem; font-weight: 700; line-height: 1; text-decoration: none; flex-shrink: 0; margin-right: .5rem; transition: border-color .15s, background .15s, color .15s; } .topbar-help:hover { border-color: var(--color-primary); background: var(--color-primary); color: #fff; text-decoration: none; } @media (max-width: 768px) { .help-layout { grid-template-columns: 1fr; } .help-sidebar { position: static; } } /* ── §21 Template / Suggestion Modal ────────────────────────── */ .tmpl-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 600; display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(2px); } .tmpl-overlay[hidden] { display: none; } .tmpl-modal { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.25); width: 100%; max-width: 540px; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; } .tmpl-header { display: flex; align-items: center; gap: .625rem; padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .tmpl-title { flex: 1; font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--color-text); } .tmpl-back-btn { background: none; border: none; cursor: pointer; color: var(--color-primary); font-size: .8125rem; font-weight: 600; padding: .25rem .5rem; border-radius: var(--radius-sm); display: flex; align-items: center; gap: .25rem; flex-shrink: 0; line-height: 1; } .tmpl-back-btn:hover { background: var(--color-bg); } .tmpl-close { background: none; border: none; cursor: pointer; color: var(--color-text-faint); font-size: 1.25rem; line-height: 1; padding: .25rem .375rem; border-radius: var(--radius-sm); flex-shrink: 0; } .tmpl-close:hover { color: var(--color-text); background: var(--color-bg); } .tmpl-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.375rem; -webkit-overflow-scrolling: touch; } /* Screen 1 — category grid */ .tmpl-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; } .tmpl-cat-card { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 1.125rem .75rem .875rem; text-align: center; cursor: pointer; background: var(--color-bg); transition: border-color .12s, background .12s, transform .1s; } .tmpl-cat-card:hover { border-color: var(--color-primary); background: rgba(37,99,235,.04); transform: translateY(-1px); } .tmpl-cat-icon { font-size: 2rem; line-height: 1; margin-bottom: .5rem; display: block; } .tmpl-cat-name { font-size: .875rem; font-weight: 700; color: var(--color-text); } .tmpl-cat-count { font-size: .75rem; color: var(--color-text-faint); margin-top: .2rem; } /* Screen 2 — template list */ .tmpl-list { display: flex; flex-direction: column; gap: .5rem; } .tmpl-item { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: .875rem 1rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; background: var(--color-bg); transition: border-color .12s, background .12s; text-align: left; } .tmpl-item:hover { border-color: var(--color-primary); background: rgba(37,99,235,.04); } .tmpl-item-name { font-weight: 600; font-size: .9375rem; color: var(--color-text); } .tmpl-item-count { font-size: .8125rem; color: var(--color-text-faint); display: flex; align-items: center; gap: .2rem; } /* Screen 3 — detail checkboxes */ .tmpl-name-row { margin-bottom: 1rem; } .tmpl-name-row label { display: block; font-size: .8125rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: .375rem; } .tmpl-name-row input { width: 100%; padding: .5rem .75rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: .9375rem; background: var(--color-bg); color: var(--color-text); font-family: inherit; } .tmpl-name-row input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .tmpl-select-all-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .625rem; } .tmpl-select-all-row span { font-size: .875rem; font-weight: 600; color: var(--color-text); } .tmpl-detail-list { display: flex; flex-direction: column; gap: .375rem; } .tmpl-det-check { display: flex; align-items: flex-start; gap: .625rem; padding: .625rem .75rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; background: var(--color-bg); transition: border-color .12s, background .12s; } .tmpl-det-check:has(input:checked) { border-color: var(--color-primary); background: rgba(37,99,235,.035); } .tmpl-det-check input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; } .tmpl-det-text { font-size: .875rem; color: var(--color-text); line-height: 1.45; } /* Footer */ .tmpl-footer { padding: .875rem 1.375rem; border-top: 1px solid var(--color-border); display: flex; gap: .625rem; justify-content: flex-end; flex-shrink: 0; } @media (max-width: 480px) { .tmpl-cat-grid { grid-template-columns: repeat(2, 1fr); } .tmpl-modal { max-height: 92vh; } } /* ── §22 Theme toggle button ─────────────────────────────────── */ .topbar-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; padding: 0; margin-right: .25rem; transition: border-color .15s, background .15s, color .15s; } .topbar-theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(245,158,11,.08); } /* ── §23 Dark / Prayer Mode ──────────────────────────────────── */ body.dark-mode { --color-text: rgba(255,255,255,.88); --color-text-muted: rgba(255,255,255,.52); --color-text-faint: rgba(255,255,255,.3); --color-border: rgba(255,255,255,.09); --color-border-dark: rgba(255,255,255,.14); --color-surface: #0d1630; --color-bg: #080f1e; --color-bg-hover: #111d36; --color-bg-alt: #0a1422; --color-success-bg: rgba(16,185,129,.15); --color-error-bg: rgba(239,68,68,.15); --color-warning-bg: rgba(245,158,11,.15); --color-info-bg: rgba(59,130,246,.15); background: linear-gradient(145deg, #060d1a 0%, #0a1422 55%, #0f172a 100%); background-attachment: fixed; } /* Dark mode — chrome (topbar + sidebar + bottom nav) */ body.dark-mode .topbar { background: var(--color-chrome-bg); border-bottom-color: var(--color-chrome-border); box-shadow: none; } body.dark-mode .topbar-appname { color: var(--color-chrome-text); } body.dark-mode .user-menu-trigger { color: var(--color-chrome-text); } body.dark-mode .user-menu-trigger:hover { background: var(--color-chrome-hover); } body.dark-mode .hamburger:hover { background: var(--color-chrome-hover); } body.dark-mode .hamburger span { background: var(--color-chrome-muted); } body.dark-mode .topbar-help { border-color: var(--color-chrome-border); background: transparent; color: var(--color-chrome-muted); } body.dark-mode .sidebar { background: var(--color-chrome-bg); border-right-color: var(--color-chrome-border); } body.dark-mode .nav-section-title { color: var(--color-chrome-muted); } body.dark-mode .nav-item { color: var(--color-chrome-muted); } body.dark-mode .nav-item:hover { background: var(--color-chrome-hover); color: var(--color-chrome-text); } body.dark-mode .sidebar-footer { border-top-color: var(--color-chrome-border); } body.dark-mode .bottom-nav { background: var(--color-chrome-bg); border-top-color: var(--color-chrome-border); box-shadow: none; } body.dark-mode .bottom-nav-item { color: var(--color-chrome-muted); } body.dark-mode .bottom-nav-item:hover, body.dark-mode .bottom-nav-item:focus { color: var(--color-chrome-text); } /* Dark mode — amber active nav icons */ body.dark-mode .nav-item.active { background: rgba(245,158,11,.14); color: var(--color-accent); } body.dark-mode .nav-item.active svg { color: var(--color-accent); } body.dark-mode .bottom-nav-item.active { color: var(--color-accent); } /* Dark mode — theme toggle glows amber when active */ body.dark-mode .topbar-theme-toggle { color: var(--color-accent); border-color: rgba(245,158,11,.35); } /* Dark mode — form inputs */ body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode input[type="number"], body.dark-mode input[type="date"], body.dark-mode input[type="time"], body.dark-mode textarea, body.dark-mode select { background: #0a1628; border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.88); color-scheme: dark; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: rgba(255,255,255,.28); } /* Dark mode — dropdown */ body.dark-mode .user-menu-dropdown { background: #0e1e38; border-color: rgba(255,255,255,.1); } body.dark-mode .dropdown-item { color: rgba(255,255,255,.82); } body.dark-mode .dropdown-item:hover { background: rgba(255,255,255,.06); } body.dark-mode .dropdown-item.danger { color: #f87171; } body.dark-mode .dropdown-item.danger:hover { background: rgba(239,68,68,.12); } body.dark-mode .dropdown-header { color: rgba(255,255,255,.38); } body.dark-mode .dropdown-divider { background: rgba(255,255,255,.08); } /* Dark mode — modals */ body.dark-mode .modal-box { background: #0d1630; border: 1px solid rgba(255,255,255,.1); } /* Dark mode — template modal */ body.dark-mode .tmpl-modal { background: #0d1630; } body.dark-mode .tmpl-header, body.dark-mode .tmpl-footer { border-color: rgba(255,255,255,.08); } body.dark-mode .tmpl-det-check { background: #0a1628; border-color: rgba(255,255,255,.09); } body.dark-mode .tmpl-det-check:has(input:checked) { border-color: var(--color-primary); background: rgba(29,78,216,.14); } body.dark-mode .tmpl-det-text { color: rgba(255,255,255,.85); } /* Dark mode — schedule calendar readability */ body.dark-mode .avail-dow { color: rgba(255,255,255,.5); } body.dark-mode .avail-day-num { color: rgba(255,255,255,.65); } body.dark-mode .avail-cell--out .avail-day-num { opacity: 0.45; } body.dark-mode .avail-select { color-scheme: dark; } /* Dark mode — cards and assignment rows */ body.dark-mode .card { box-shadow: 0 1px 4px rgba(0,0,0,.5); } body.dark-mode .session-tab { background: #0d1630; border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.55); } body.dark-mode .session-tab:hover { border-color: var(--color-primary); color: rgba(255,255,255,.9); } body.dark-mode .now-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } /* ── Day Assignments Modal ───────────────────────────────────── */ .day-modal-box { max-width: 440px; width: calc(100vw - 2rem); padding: 0; overflow: hidden; } .day-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); } .day-modal-title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); margin: 0; } .day-modal-close { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 0.25rem; border-radius: var(--radius-sm); display: flex; transition: color var(--transition); } .day-modal-close:hover { color: var(--color-text); } .day-modal-body { padding: 1rem 1.25rem 1.25rem; max-height: 60vh; overflow-y: auto; } .day-modal-loading, .day-modal-empty { color: var(--color-text-muted); font-size: 0.875rem; text-align: center; padding: 1rem 0; margin: 0; } .day-modal-session { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); margin: 1rem 0 0.375rem; } .day-modal-session:first-child { margin-top: 0; } .day-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; } .day-modal-item { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-sm); background: var(--color-surface-alt); border: 1px solid var(--color-border); font-size: 0.8125rem; } .day-modal-item.done { border-color: var(--color-success, #16a34a); background: rgba(22,163,74,.06); } .day-modal-item.skip { opacity: 0.55; } .day-modal-status { flex-shrink: 0; font-size: 0.75rem; line-height: 1.5; color: var(--color-text-muted); min-width: 14px; text-align: center; } .day-modal-item.done .day-modal-status { color: var(--color-success, #16a34a); } .day-modal-subject { display: block; font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.125rem; } .day-modal-item-title { color: var(--color-text); display: block; } /* Dark mode — day modal */ body.dark-mode .day-modal-header { border-color: rgba(255,255,255,.08); } body.dark-mode .day-modal-title { color: rgba(255,255,255,.9); } body.dark-mode .day-modal-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); } body.dark-mode .day-modal-item.done { border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.08); } body.dark-mode .day-modal-item-title { color: rgba(255,255,255,.85); } body.dark-mode .day-modal-subject { color: rgba(255,255,255,.45); } /* Dark mode — tf-radio cycle picker */ body.dark-mode .tf-radio { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.55); } body.dark-mode .tf-radio:has(input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } body.dark-mode .tf-radio:not(:has(input:checked)):hover { border-color: var(--color-primary); color: rgba(255,255,255,.9); }