/* ===================== Design tokens ===================== */ :root { --color-bg: #f2f7f6; --color-surface: #ffffff; --color-surface-alt: #f5faf9; --color-border: #e2ece9; --color-text: #16241f; --color-text-muted: #5f7671; --color-text-faint: #94a8a3; --color-primary: #0d9488; --color-primary-dark: #0f766e; --color-primary-light: #e6f7f4; --color-accent: #f59e0b; --color-success: #16a34a; --color-success-light: #ecfdf3; --color-danger: #e11d48; --color-danger-light: #fef1f4; --color-warning: #d97706; --color-warning-light: #fef8ec; --sidebar-start: #0f766e; --sidebar-end: #0e7490; --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(22, 36, 31, 0.06), 0 1px 3px rgba(22, 36, 31, 0.06); --shadow-md: 0 8px 24px rgba(22, 36, 31, 0.08); --shadow-lg: 0 16px 40px rgba(22, 36, 31, 0.14); --sidebar-w: 248px; } /* ===================== Color themes ===================== */ /* Default (:root above) is "teal". Switched instantly via js/theme.js, which sets data-theme on from a per-device localStorage pref. */ :root[data-theme="sunset"] { --color-primary: #ea580c; --color-primary-dark: #c2410c; --color-primary-light: #fff1e6; --color-accent: #db2777; --sidebar-start: #c2410c; --sidebar-end: #db2777; } :root[data-theme="ocean"] { --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-primary-light: #e8f0fe; --color-accent: #06b6d4; --sidebar-start: #1e40af; --sidebar-end: #0891b2; } :root[data-theme="berry"] { --color-primary: #9333ea; --color-primary-dark: #7e22ce; --color-primary-light: #f4e8fe; --color-accent: #db2777; --sidebar-start: #6d28d9; --sidebar-end: #be185d; } :root[data-theme="forest"] { --color-primary: #16a34a; --color-primary-dark: #15803d; --color-primary-light: #e9f9ee; --color-accent: #84cc16; --sidebar-start: #166534; --sidebar-end: #4d7c0f; } :root[data-theme="midnight"] { --color-bg: #10151c; --color-surface: #171e28; --color-surface-alt: #1c2430; --color-border: #2a3441; --color-text: #e7edf5; --color-text-muted: #9aabbd; --color-text-faint: #64748b; --color-primary: #38bdf8; --color-primary-dark: #0ea5e9; --color-primary-light: #17313f; --color-accent: #f59e0b; --color-success: #4ade80; --color-success-light: #14301f; --color-danger: #fb7185; --color-danger-light: #3a1620; --color-warning: #fbbf24; --color-warning-light: #3a2c0f; --sidebar-start: #0b1220; --sidebar-end: #16202f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } body { background: var(--color-bg); color: var(--color-text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; min-height: 100vh; } h1, h2, h3, h4, h5, h6, .brand, .stat-card .stat-value { font-family: "Poppins", "Inter", sans-serif; } a { color: var(--color-primary); } ::selection { background: var(--color-primary-light); } /* ===================== App shell ===================== */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, var(--sidebar-start), var(--sidebar-end)); color: #fff; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040; transition: transform 0.25s ease; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 0.6rem; padding: 1.4rem 1.25rem 1rem; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; color: #fff; text-decoration: none; } .sidebar-brand .brand-badge { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } .sidebar-nav { flex: 1; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; } .sidebar-section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); padding: 0.9rem 0.75rem 0.3rem; font-weight: 600; } .sidebar .nav-link { display: flex; align-items: center; gap: 0.7rem; color: rgba(255, 255, 255, 0.82); padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .sidebar .nav-link i { font-size: 1.05rem; width: 1.3rem; text-align: center; } .sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .sidebar .nav-link.active { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 3px 0 0 #fff; } .sidebar-footer { padding: 0.9rem 1.1rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.14); } .sidebar-user { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; } .sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .sidebar-user-name { font-size: 0.85rem; font-weight: 600; color: #fff; line-height: 1.2; } .sidebar-user-role { font-size: 0.72rem; color: rgba(255, 255, 255, 0.65); text-transform: capitalize; } .sidebar-logout { width: 100%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #fff; border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; font-size: 0.82rem; font-weight: 500; } .sidebar-logout:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .main-area { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; } .topbar { display: none; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 1020; } .topbar-toggle { border: none; background: var(--color-primary-light); color: var(--color-primary); width: 38px; height: 38px; border-radius: var(--radius-sm); font-size: 1.1rem; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 30, 26, 0.45); z-index: 1030; } .content { padding: 1.75rem 2rem 3rem; max-width: 1180px; width: 100%; margin: 0 auto; } .page-header { margin-bottom: 1.5rem; position: relative; padding: 1.1rem 1.35rem; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--color-primary-light) 0%, transparent 65%), var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; } .page-header::after { content: ""; position: absolute; top: -40%; right: -8%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%); opacity: 0.16; pointer-events: none; } .page-header .eyebrow { color: var(--color-primary); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } .page-header h1 { font-size: 1.6rem; font-weight: 700; margin: 0.15rem 0 0.2rem; } .page-header p { color: var(--color-text-muted); margin: 0; font-size: 0.92rem; } @media (max-width: 991px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } .main-area { margin-left: 0; } .topbar { display: flex; } .sidebar-backdrop.show { display: block; } .content { padding: 1.25rem 1rem 2.5rem; } } /* ===================== Cards & surfaces ===================== */ .section-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.35rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .section-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .section-card-header h2, .section-card-header h5 { font-size: 1.05rem; font-weight: 700; margin: 0; } .section-card-header .subtitle { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 0.15rem; } @media (max-width: 576px) { .section-card { padding: 1.05rem; border-radius: var(--radius-sm); } } /* Dashboard tiles */ .nav-tile { display: block; text-decoration: none; color: inherit; height: 100%; } .tile-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.35rem 1.1rem; height: 100%; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; text-align: center; } .nav-tile:hover .tile-card { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-light); } .tile-icon { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; font-size: 1.5rem; color: #fff; } .tile-icon.bg-1 { background: linear-gradient(135deg, #0d9488, #0f766e); } .tile-icon.bg-2 { background: linear-gradient(135deg, #f59e0b, #d97706); } .tile-icon.bg-3 { background: linear-gradient(135deg, #10b981, #059669); } .tile-icon.bg-4 { background: linear-gradient(135deg, #6366f1, #4f46e5); } .tile-icon.bg-5 { background: linear-gradient(135deg, #06b6d4, #0891b2); } .tile-icon.bg-6 { background: linear-gradient(135deg, #f43f5e, #e11d48); } .tile-icon.bg-7 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } .tile-icon.bg-8 { background: linear-gradient(135deg, #64748b, #475569); } .stat-icon.bg-1 { background: linear-gradient(135deg, #0d9488, #0f766e); } .stat-icon.bg-2 { background: linear-gradient(135deg, #f59e0b, #d97706); } .stat-icon.bg-3 { background: linear-gradient(135deg, #e11d48, #be123c); } .stat-icon.bg-4 { background: linear-gradient(135deg, #6366f1, #4f46e5); } .tile-title { font-weight: 700; font-size: 0.95rem; } .tile-sub { color: var(--color-text-muted); font-size: 0.78rem; margin-top: 0.15rem; } /* Stat cards */ .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); height: 100%; } .stat-card .stat-label { color: var(--color-text-muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .stat-card .stat-value { font-size: 1.65rem; font-weight: 700; margin: 0.15rem 0; } .stat-card .stat-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; float: right; } .stat-trend { font-size: 0.78rem; font-weight: 600; } .stat-trend.up { color: var(--color-success); } .stat-trend.down { color: var(--color-danger); } /* Badges */ .badge-soft { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .badge-soft.primary { background: var(--color-primary-light); color: var(--color-primary-dark); } .badge-soft.success { background: var(--color-success-light); color: var(--color-success); } .badge-soft.danger { background: var(--color-danger-light); color: var(--color-danger); } .badge-soft.warning { background: var(--color-warning-light); color: var(--color-warning); } .badge-soft.neutral { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); } /* Buttons */ .btn-primary { background: var(--color-primary); border-color: var(--color-primary); } .btn-primary:hover, .btn-primary:focus { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); } .btn-outline-primary:hover { background: var(--color-primary); border-color: var(--color-primary); } /* Progress */ .progress { background: var(--color-surface-alt); border-radius: 999px; height: 0.55rem; } .progress-bar { background: var(--color-primary); } /* Empty state */ .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--color-text-muted); } .empty-state .empty-icon { font-size: 2.2rem; margin-bottom: 0.6rem; color: var(--color-text-faint); } .empty-state h6 { color: var(--color-text); font-weight: 600; margin-bottom: 0.25rem; } /* Auth page */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 15% 20%, #0e7490 0%, transparent 45%), radial-gradient(circle at 85% 85%, #0d9488 0%, transparent 45%), linear-gradient(160deg, #0f2b27, #134e4a 55%, #0f2b27); padding: 1.5rem; } .auth-card { max-width: 400px; width: 100%; margin: 0; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: none; } .auth-card .card-body { padding: 2.25rem 2rem; } .auth-logo { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--sidebar-start), var(--sidebar-end)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; margin: 0 auto 1rem; } .btn-google { display: flex; align-items: center; justify-content: center; gap: 0.6rem; background: #fff; border: 1px solid var(--color-border); color: var(--color-text); font-weight: 600; padding: 0.65rem 1rem; border-radius: var(--radius-sm); width: 100%; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .btn-google:hover { box-shadow: var(--shadow-sm); border-color: #c7cbe0; } /* Topic chips (quick re-log) */ .topic-chip { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.35rem 0.5rem 0.35rem 0.9rem; margin: 0.25rem; } .topic-chip .chip-input { width: 6rem; } .topic-breadcrumb { font-size: 0.8rem; color: var(--color-text-muted); } /* Misc */ .table { color: var(--color-text); } .table thead th { border-bottom-width: 1px; color: var(--color-text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; } textarea.form-control, input.form-control, select.form-select { border-radius: var(--radius-sm); border-color: var(--color-border); } textarea.form-control:focus, input.form-control:focus, select.form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.14); } @media (max-width: 576px) { .section-card { padding: 1rem; border-radius: 0.5rem; } } /* ===================== Pretty data tables ===================== */ .table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; } .pretty-table-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .pretty-table-scroll { max-height: 480px; overflow: auto; } .pretty-table { width: 100%; margin-bottom: 0; } .pretty-table thead th { background: linear-gradient(135deg, var(--color-primary), #0e7490); color: #fff; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.7rem 0.85rem; border: none; white-space: nowrap; position: sticky; top: 0; z-index: 2; } .pretty-table thead tr.filter-row th { background: var(--color-surface-alt); padding: 0.4rem 0.5rem; top: 2.4rem; } .pretty-table thead tr.filter-row input, .pretty-table thead tr.filter-row select { font-size: 0.78rem; padding: 0.28rem 0.55rem; border-radius: 999px; } .pretty-table tbody td { padding: 0.6rem 0.85rem; vertical-align: middle; font-size: 0.87rem; border-bottom: 1px solid var(--color-border); } .pretty-table tbody tr:hover { background: var(--color-primary-light); } .pretty-table tbody tr:nth-child(even) { background: rgba(13, 148, 136, 0.025); } .pretty-table tbody tr:nth-child(even):hover { background: var(--color-primary-light); } /* Generic color-coded name pill (subject/category — dynamic, admin-editable) */ .name-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; color: #fff; white-space: nowrap; } .name-pill.pill-1 { background: linear-gradient(135deg, #0d9488, #0f766e); } .name-pill.pill-2 { background: linear-gradient(135deg, #f59e0b, #d97706); } .name-pill.pill-3 { background: linear-gradient(135deg, #6366f1, #4f46e5); } .name-pill.pill-4 { background: linear-gradient(135deg, #e11d48, #be123c); } .name-pill.pill-5 { background: linear-gradient(135deg, #06b6d4, #0891b2); } .name-pill.pill-6 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } .name-pill.pill-7 { background: linear-gradient(135deg, #10b981, #059669); } .name-pill.pill-8 { background: linear-gradient(135deg, #64748b, #475569); } /* Status pills (homework) */ .status-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; } .status-pill.pending { background: var(--color-warning-light); color: var(--color-warning); } .status-pill.done { background: var(--color-success-light); color: var(--color-success); } .status-pill.overdue { background: var(--color-danger-light); color: var(--color-danger); } .row-actions .btn { padding: 0.25rem 0.5rem; } .owner-tag { font-size: 0.68rem; font-weight: 600; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.03em; } /* Weekday toggle buttons (Allen schedule) */ .weekday-toggle-group { display: flex; flex-wrap: wrap; gap: 0.4rem; } .weekday-toggle { border: 1.5px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text-muted); border-radius: var(--radius-sm); padding: 0.4rem 0; width: 3.1rem; font-size: 0.8rem; font-weight: 700; text-align: center; transition: all 0.15s ease; } .weekday-toggle.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* Pending/overdue homework list (dashboard + homework page) */ .pending-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 0.6rem; background: var(--color-surface-alt); } .pending-item.overdue { border-color: rgba(225, 29, 72, 0.35); background: var(--color-danger-light); } .pending-item .pending-desc { font-weight: 600; font-size: 0.9rem; } .pending-item .pending-meta { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.15rem; } /* Manage page: catalog list rows */ .catalog-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 0.5rem; background: var(--color-surface-alt); } .catalog-row.inactive { opacity: 0.55; } .catalog-row .catalog-row-main { display: flex; align-items: center; gap: 0.6rem; } /* ===================== Settings: theme swatches ===================== */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; } .theme-swatch { border: 2px solid var(--color-border); border-radius: var(--radius); padding: 1rem 0.9rem; background: var(--color-surface); cursor: pointer; text-align: center; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .theme-swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .theme-swatch.active { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .theme-swatch-preview { width: 100%; height: 52px; border-radius: var(--radius-sm); margin-bottom: 0.6rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); } .theme-swatch-name { font-weight: 700; font-size: 0.88rem; } .theme-swatch-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--color-primary); margin-top: 0.2rem; min-height: 1.1rem; } /* ===================== Daily Log: hours inputs ===================== */ .hours-input-group { display: flex; align-items: center; gap: 0.6rem; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; height: 100%; } .hours-input-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff; flex-shrink: 0; } .hours-input-icon.study { background: linear-gradient(135deg, #0d9488, #0f766e); } .hours-input-icon.sleep { background: linear-gradient(135deg, #6366f1, #4f46e5); } .hours-input-icon.play { background: linear-gradient(135deg, #f59e0b, #d97706); } .hours-input-icon.devotion { background: linear-gradient(135deg, #f43f5e, #e11d48); } .hours-input-group .form-label { margin: 0 0 0.1rem; font-size: 0.74rem; font-weight: 600; color: var(--color-text-muted); } .hours-input-group input { border: none; background: transparent; padding: 0; font-weight: 700; font-size: 1.05rem; } .hours-input-group input:focus { box-shadow: none; } .chart-canvas-wrap { position: relative; height: 280px; width: 100%; } @media (max-width: 576px) { .chart-canvas-wrap { height: 220px; } } /* ===================== Q&A ===================== */ .qna-chapter-group { margin-bottom: 1.25rem; } .qna-chapter-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.6rem; } .qna-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.85rem 1rem; margin-bottom: 0.6rem; background: var(--color-surface); } .qna-question { font-weight: 700; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; } .qna-answer { margin-top: 0.4rem; padding: 0.55rem 0.7rem; background: var(--color-surface-alt); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 0.85rem; } .qna-sample-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); }