/* ========================================================= Vazirmatn — Self-hosted (WOFF2) ========================================================= */ @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/vazirmatn/Vazirmatn-Thin.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/vazirmatn/Vazirmatn-ExtraLight.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/vazirmatn/Vazirmatn-Light.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/vazirmatn/Vazirmatn-Black.woff2') format('woff2'); } /* ========================================================= Design Tokens ========================================================= */ :root { /* Brand — professional blue palette (Tailwind blue) */ --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-300: #93c5fd; --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8; --brand-800: #1e40af; --brand-900: #1e3a8a; /* Neutrals (slate) */ --ink: #0f172a; --ink-2: #1e293b; --ink-3: #334155; --muted: #64748b; --muted-2:#94a3b8; --line: #e2e8f0; --line-2: #cbd5e1; --surface:#ffffff; --surface-2:#f8fafc; --page: #f1f5f9; /* Status */ --info: #3b82f6; --info-bg: #dbeafe; --warn: #f59e0b; --warn-bg: #fef3c7; --ok: #10b981; --ok-bg: #d1fae5; --danger: #ef4444; --danger-bg:#fee2e2; --purple: #8b5cf6; --purple-bg:#ede9fe; /* Radius */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* Shadow */ --sh-xs: 0 1px 2px rgba(15, 23, 42, .04); --sh-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --sh-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04); --sh-lg: 0 12px 28px rgba(15, 23, 42, .08), 0 4px 10px rgba(15, 23, 42, .05); --sh-xl: 0 24px 60px rgba(15, 23, 42, .12), 0 10px 24px rgba(15, 23, 42, .08); --sh-ring: 0 0 0 4px rgba(59, 130, 246, .18); /* Layout */ --sidebar-w: 264px; --topbar-h: 64px; --container: 1320px; color-scheme: light; } /* ========================================================= Dark theme — token overrides (toggled via [data-theme="dark"] on ) ========================================================= */ [data-theme="dark"] { color-scheme: dark; --ink: #f1f5f9; --ink-2: #e2e8f0; --ink-3: #cbd5e1; --muted: #94a3b8; --muted-2: #64748b; --line: #233047; --line-2: #334155; --surface: #111a2e; --surface-2:#1b2540; --page: #0a1120; --sh-xs: 0 1px 2px rgba(0,0,0,.40); --sh-sm: 0 1px 3px rgba(0,0,0,.50), 0 1px 2px rgba(0,0,0,.40); --sh-md: 0 4px 12px rgba(0,0,0,.50), 0 2px 4px rgba(0,0,0,.40); --sh-lg: 0 12px 28px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.45); --sh-xl: 0 24px 60px rgba(0,0,0,.60), 0 10px 24px rgba(0,0,0,.50); } /* ========================================================= Reset & Base ========================================================= */ * { box-sizing: border-box; } html { font-size: 14.5px; min-height: 100%; position: relative; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } @media (min-width: 768px) { html { font-size: 15px; } } @media (min-width: 1280px) { html { font-size: 15.5px; } } body { margin: 0; min-height: 100vh; width: 100%; max-width: 100%; overflow-x: hidden; font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 400; background: var(--page); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "ss02"; } img, svg { max-width: 100%; height: auto; } a { color: var(--brand-700); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--brand-800); } h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.3; color: var(--ink); margin: 0; overflow-wrap: break-word; word-break: break-word; } p { margin: 0 0 1rem; overflow-wrap: break-word; } .detail-list dd, .compact-list strong, .session-row strong, .latest-payment strong, .kpi-tile strong, .hero-summary strong, .payment-total strong, .metric strong { overflow-wrap: break-word; word-break: break-word; } code, kbd, samp { font-family: 'JetBrains Mono', 'Fira Code', 'Vazirmatn', ui-monospace, Menlo, monospace; font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs); padding: .1em .4em; color: var(--ink-2); } /* Scrollbar polish */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 2px solid var(--page); } *::-webkit-scrollbar-thumb:hover { background: var(--muted-2); } /* ========================================================= App Shell — Sidebar + Topbar ========================================================= */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; width: 100%; max-width: 100%; } /* ---------- Sidebar ---------- */ .app-sidebar { background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%); color: #cbd5e1; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-inline-start: 1px solid rgba(255,255,255,.04); box-shadow: var(--sh-lg); z-index: 30; min-width: 0; } .sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); } .sidebar-brand .brand-logo { width: 38px; height: 38px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.1rem; box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.25); } .sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.25; } .sidebar-brand .brand-title { color: #fff; font-weight: 800; font-size: 1.02rem; } .sidebar-brand .brand-sub { color: #94a3b8; font-size: .75rem; font-weight: 500; } .sidebar-nav { flex: 1; padding: 1rem .75rem; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; } .sidebar-nav .nav-label { color: #64748b; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .9rem .75rem .4rem; margin: 0; } .sidebar-nav a { display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem; border-radius: var(--r-sm); color: #cbd5e1; font-weight: 500; font-size: .94rem; transition: all .15s ease; position: relative; } .sidebar-nav a:hover { background: rgba(255,255,255,.05); color: #fff; } .sidebar-nav a.active { background: linear-gradient(135deg, rgba(59,130,246,.20), rgba(59,130,246,.06)); color: #fff; box-shadow: inset 0 0 0 1px rgba(59,130,246,.30); } .sidebar-nav a.active::before { content: ''; position: absolute; inset-inline-end: -.75rem; top: 50%; transform: translateY(-50%); width: 4px; height: 24px; border-radius: var(--r-pill); background: var(--brand-400); box-shadow: 0 0 12px var(--brand-400); } .sidebar-nav svg, .sidebar-nav .nav-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: .85; } .sidebar-footer { padding: 1rem; border-top: 1px solid rgba(255,255,255,.06); } .user-chip { display: flex; align-items: center; gap: .7rem; padding: .7rem; border-radius: var(--r-md); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); } .user-chip .avatar { width: 38px; height: 38px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); color: #fff; display: grid; place-items: center; font-weight: 800; } .user-chip .info { flex: 1; min-width: 0; } .user-chip .name { color: #fff; font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-chip .role { color: #94a3b8; font-size: .75rem; font-weight: 500; } /* ---------- Topbar ---------- */ .app-content { display: flex; flex-direction: column; min-width: 0; max-width: 100%; overflow-x: hidden; } .app-topbar { height: var(--topbar-h); background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 20; } .topbar-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); color: var(--ink-2); align-items: center; justify-content: center; cursor: pointer; transition: all .15s; } .topbar-toggle:hover { background: var(--surface-2); } .topbar-title h1 { font-size: 1.05rem; font-weight: 700; line-height: 1; } .topbar-title small { color: var(--muted); font-size: .8rem; } .topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; } /* ---------- Main content area ---------- */ .app-main { flex: 1; padding: 1.5rem; max-width: var(--container); width: 100%; margin: 0 auto; } .app-footer { padding: 1.25rem 1.5rem; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .85rem; text-align: center; } /* ---------- Sidebar drawer on mobile ---------- */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 40; } .sidebar-backdrop.is-open { display: block; } @media (max-width: 992px) { .app-shell { grid-template-columns: minmax(0, 1fr); } /* Physical RIGHT-edge positioning (works in both LTR/RTL, but our app is RTL). translateX(100%) reliably pushes the element fully off-screen to the right. */ .app-sidebar { position: fixed; top: 0; right: 0; left: auto; bottom: 0; width: min(280px, 86vw); height: 100vh; height: 100dvh; /* mobile-friendly */ transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); z-index: 50; border-inline-start: 0; box-shadow: -8px 0 32px rgba(0,0,0,.35); } .app-sidebar.is-open { transform: translateX(0); } .topbar-toggle { display: inline-flex; } } /* ---------- Desktop: pin the sidebar, scroll only the content ---------- On desktop we make the shell a fixed-height, non-scrolling frame and let the content column scroll internally. This keeps the sidebar permanently in view on scroll WITHOUT relying on position:sticky (which is broken here by the ancestor overflow-x:hidden needed for mobile). Mobile keeps normal body scroll + the off-canvas drawer, so this change does not affect it. */ @media (min-width: 993px) { .app-shell { height: 100vh; max-height: 100vh; overflow: hidden; } .app-content { height: 100vh; overflow-y: auto; } } @media (max-width: 560px) { .app-topbar { padding: 0 .85rem; gap: .6rem; } .topbar-title h1 { font-size: .95rem; } .app-main { padding: .9rem; } .app-footer { padding: 1rem .9rem; font-size: .8rem; } } /* ========================================================= Page header (eyebrow + title + actions) ========================================================= */ .page-shell, .teacher-dashboard { display: flex; flex-direction: column; gap: 1.25rem; } .eyebrow { color: var(--brand-600); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .35rem; display: inline-flex; align-items: center; gap: .35rem; } .eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand-500), transparent); } /* ========================================================= Hero / Welcome banner ========================================================= */ .teacher-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 2.25rem; background: radial-gradient(circle at 100% 0%, rgba(59,130,246,.22), transparent 60%), radial-gradient(circle at 0% 100%, rgba(99,102,241,.14), transparent 55%), linear-gradient(135deg, #0b1220 0%, #0f172a 50%, #1e293b 100%); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 2rem; align-items: end; box-shadow: var(--sh-lg); width: 100%; max-width: 100%; min-width: 0; } .teacher-hero > * { min-width: 0; } .teacher-hero::before { content: ''; position: absolute; inset-inline-end: -80px; top: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(96,165,250,.28), transparent 60%); filter: blur(40px); pointer-events: none; } .teacher-hero .eyebrow { color: var(--brand-300); } .teacher-hero .eyebrow::before { background: linear-gradient(90deg, var(--brand-300), transparent); } .teacher-hero h1 { color: #fff; font-size: clamp(1.7rem, 3.5vw, 2.75rem); font-weight: 900; margin: .35rem 0 .75rem; letter-spacing: -.01em; } .teacher-hero p { color: #cbd5e1; max-width: 640px; margin: 0; font-size: 1rem; } .hero-summary { background: rgba(255,255,255,.08); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 1.4rem 1.5rem; color: #fff; position: relative; z-index: 1; } .hero-summary span { display: block; color: #94a3b8; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; } .hero-summary strong { display: block; font-size: 1.85rem; font-weight: 900; color: #fff; letter-spacing: -.01em; } .hero-summary small { color: #94a3b8; font-size: .8rem; } /* ========================================================= KPI grid ========================================================= */ .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; width: 100%; min-width: 0; } .kpi-grid > * { min-width: 0; } .kpi-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; box-shadow: var(--sh-xs); display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; position: relative; overflow: hidden; transition: all .2s ease; } .kpi-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--line-2); } .kpi-tile span { color: var(--muted); font-weight: 600; font-size: .88rem; } .kpi-tile strong { font-size: 2.1rem; line-height: 1; font-weight: 900; letter-spacing: -.02em; color: var(--ink); } .kpi-tile::after { content: ''; position: absolute; top: 0; inset-inline-start: 0; height: 4px; width: 100%; background: var(--accent, var(--brand-500)); } .accent-teal { --accent: linear-gradient(90deg, #22d3ee, #0891b2); } /* cyan — distinct from primary blue */ .accent-amber { --accent: linear-gradient(90deg, #fbbf24, #f59e0b); } .accent-blue { --accent: linear-gradient(90deg, var(--brand-400), var(--brand-600)); } .accent-green { --accent: linear-gradient(90deg, #34d399, #059669); } /* keep green for "paid / success" semantics */ .accent-purple{ --accent: linear-gradient(90deg, #a78bfa, #7c3aed); } .accent-rose { --accent: linear-gradient(90deg, #fb7185, #e11d48); } /* ========================================================= Dashboard grid ========================================================= */ .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1rem; width: 100%; min-width: 0; } .dashboard-grid > * { min-width: 0; } /* ========================================================= Panel (card) ========================================================= */ .panel, .section-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem; box-shadow: var(--sh-xs); min-width: 0; max-width: 100%; } .panel > *, .section-band > * { min-width: 0; max-width: 100%; } .section-band { display: flex; flex-direction: column; gap: 1rem; } .section-band > h1, .section-band > h2 { font-weight: 800; } .section-band > h1 { font-size: 1.35rem; } .section-band > h2 { font-size: 1.1rem; } .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .panel-heading:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .panel h2, .panel h3 { font-size: 1.05rem; font-weight: 800; margin: 0; } /* ========================================================= Detail list (key/value) ========================================================= */ .detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; } .detail-list > div, .latest-payment, .compact-list > div, .session-row { border: 1px solid var(--line); border-radius: var(--r-md); padding: .85rem 1rem; background: var(--surface-2); transition: border-color .15s, background .15s; } .detail-list > div:hover, .latest-payment:hover, .compact-list > div:hover, .session-row:hover { border-color: var(--brand-300); background: var(--brand-50); } .detail-list dt { color: var(--muted); font-weight: 600; font-size: .82rem; margin-bottom: .35rem; } .detail-list dd { margin: 0; font-weight: 700; color: var(--ink); font-size: .98rem; } .latest-payment, .compact-list, .session-list { display: flex; flex-direction: column; gap: .65rem; margin: 0; } .latest-payment { display: block; margin-top: 1rem; background: linear-gradient(135deg, var(--brand-50), #fff); border-color: var(--brand-200); } .latest-payment span, .compact-list > div span, .session-row span { display: block; color: var(--muted); font-size: .82rem; font-weight: 600; } .latest-payment strong, .compact-list > div strong { display: block; margin: .3rem 0; font-size: 1.1rem; font-weight: 800; color: var(--ink); } .latest-payment small, .compact-list > div em { display: block; color: var(--muted); font-style: normal; font-size: .8rem; } /* ========================================================= Payment total (highlight box) ========================================================= */ .payment-total { background: linear-gradient(135deg, #0f172a, #1e293b); color: #fff; border-radius: var(--r-md); padding: 1.25rem; margin-bottom: 1rem; position: relative; overflow: hidden; } .payment-total::before { content: ''; position: absolute; inset-inline-end: -40px; bottom: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(96,165,250,.32), transparent 60%); filter: blur(20px); } .payment-total span { display: block; color: rgba(255,255,255,.7); font-size: .85rem; font-weight: 600; margin-bottom: .4rem; position: relative; } .payment-total strong { display: block; font-size: 2rem; font-weight: 900; color: #fff; letter-spacing: -.02em; position: relative; } .payment-total small { color: rgba(255,255,255,.65); position: relative; } /* ========================================================= Session row ========================================================= */ .session-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; background: var(--surface-2); } .session-row > div:first-child strong { display: block; font-weight: 700; color: var(--ink); margin-bottom: .3rem; font-size: .98rem; } .session-row > div:last-child { text-align: end; } .session-row > div:last-child strong { display: block; color: var(--brand-700); font-weight: 800; font-size: 1rem; margin-top: .2rem; } /* ========================================================= Status pills ========================================================= */ .status-pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 26px; padding: .25rem .65rem; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); white-space: nowrap; } .status-pill::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; } .status-inprogress { background: #f1f5f9; color: #475569; border-color: #cbd5e1; } .status-readytosubmit{ background: #fef3c7; color: #92400e; border-color: #fde68a; } .status-submitted { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; } .status-approved { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; } .status-paid { background: #d1fae5; color: #065f46; border-color: #a7f3d0; } .status-rejected { background: #fee2e2; color: #991b1b; border-color: #fecaca; } .status-draft { background: #f1f5f9; color: #475569; border-color: #cbd5e1; } /* ========================================================= Tables ========================================================= */ .responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; /* edge-bleed effect on desktop only — disabled on mobile to prevent overflow */ margin-inline: 0; padding-inline: 0; } @media (min-width: 769px) { .responsive-table { margin-inline: -1.35rem; padding-inline: 1.35rem; } } .table, .finance-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; } .finance-table { min-width: 720px; } .table thead th, .finance-table thead th { background: var(--surface-2); color: var(--muted); font-size: .78rem; font-weight: 700; text-align: start; padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .table thead th:first-child, .finance-table thead th:first-child { border-start-start-radius: var(--r-md); } .table thead th:last-child, .finance-table thead th:last-child { border-start-end-radius: var(--r-md); } .table tbody td, .finance-table tbody td { padding: .85rem 1rem; border-top: 1px solid var(--line); vertical-align: middle; font-size: .92rem; color: var(--ink-2); background: var(--surface); } .table tbody tr:hover td, .finance-table tbody tr:hover td { background: var(--surface-2); } /* ========================================================= Buttons ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: inherit; font-weight: 700; font-size: .92rem; line-height: 1.2; padding: .55rem 1rem; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: all .15s cubic-bezier(.4, 0, .2, 1); text-decoration: none; white-space: nowrap; user-select: none; } .btn:focus-visible { outline: none; box-shadow: var(--sh-ring); } .btn-sm { padding: .35rem .7rem; font-size: .82rem; } .btn-lg { padding: .75rem 1.4rem; font-size: 1rem; } .btn-primary { background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); color: #fff; box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.2); } .btn-primary:hover { background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); color: #fff; transform: translateY(-1px); box-shadow: var(--sh-md); } .btn-primary:active { transform: translateY(0); } .btn-success { background: linear-gradient(180deg, #16a34a, #15803d); color: #fff; box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.2); } .btn-success:hover { background: linear-gradient(180deg, #15803d, #166534); color: #fff; } .btn-outline-primary { background: var(--surface); color: var(--brand-700); border-color: var(--line-2); } .btn-outline-primary:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-800); } .btn-outline-secondary, .btn-outline-dark { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); } .btn-outline-secondary:hover, .btn-outline-dark:hover { background: var(--surface-2); border-color: var(--muted); color: var(--ink); } .btn-outline-danger { background: var(--surface); color: var(--danger); border-color: #fecaca; } .btn-outline-danger:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; } /* ========================================================= Forms ========================================================= */ .form-control, .form-select { width: 100%; font-family: inherit; font-size: .92rem; font-weight: 500; padding: .55rem .8rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: inset 0 1px 0 rgba(15,23,42,.02); transition: border-color .15s, box-shadow .15s; } .form-control:focus, .form-select:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(59,130,246,.15); } .form-control::placeholder { color: var(--muted-2); } .form-control-sm, .form-select-sm { padding: .35rem .6rem; font-size: .85rem; } .form-label { font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-bottom: .35rem; display: block; } /* ========================================================= Metric tile (Management dashboard) ========================================================= */ .metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; box-shadow: var(--sh-xs); transition: all .2s; } .metric:hover { transform: translateY(-2px); box-shadow: var(--sh-md); } .metric > :first-child { color: var(--muted); font-size: .85rem; font-weight: 600; margin-bottom: .4rem; display: block; } .metric strong { font-size: 1.8rem; font-weight: 900; line-height: 1; color: var(--ink); letter-spacing: -.02em; } /* ========================================================= Empty state ========================================================= */ .empty-state { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 3rem 2rem; max-width: 760px; margin: 1.25rem auto; text-align: center; box-shadow: var(--sh-sm); } .empty-state .eyebrow { justify-content: center; } .empty-state h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; margin: .5rem 0 .75rem; line-height: 1.25; } .empty-state p { color: var(--muted); max-width: 520px; margin: 0 auto 1rem; } .empty-inline { border: 2px dashed var(--line-2); border-radius: var(--r-md); padding: 1.25rem; background: var(--surface-2); color: var(--muted); text-align: center; font-weight: 500; } /* ========================================================= Standalone page (login, denied) — centered card ========================================================= */ .page-shell { max-width: var(--container); margin: 0 auto; } .standalone-shell { min-height: calc(100vh - 4rem); display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(circle at 20% 20%, rgba(59,130,246,.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(99,102,241,.10), transparent 50%); } .standalone-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 2.5rem 2.25rem; max-width: 460px; width: 100%; box-shadow: var(--sh-xl); text-align: center; } .standalone-card .brand-mark-lg { width: 64px; height: 64px; border-radius: var(--r-lg); margin: 0 auto 1.25rem; background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 1.5rem; box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,.25); } .standalone-card h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: .5rem; } .standalone-card p { color: var(--muted); } .standalone-card .btn { width: 100%; padding: .75rem 1rem; font-size: .98rem; margin-top: 1rem; } /* ========================================================= Responsive — Mobile-first refinements ========================================================= */ /* Tablet & smaller laptops */ @media (max-width: 1100px) { .dashboard-grid { grid-template-columns: minmax(0, 1fr); } .teacher-hero { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: stretch; } } /* Tablets */ @media (max-width: 768px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .detail-list { grid-template-columns: minmax(0, 1fr); } .teacher-hero { padding: 1.4rem; border-radius: var(--r-lg); } .teacher-hero h1 { font-size: 1.5rem; } .teacher-hero p { font-size: .92rem; } .hero-summary { padding: 1rem 1.1rem; } .hero-summary strong { font-size: 1.55rem; } .panel, .section-band { padding: 1rem; border-radius: var(--r-md); } .panel-heading { flex-direction: column; align-items: flex-start; gap: .5rem; padding-bottom: .8rem; margin-bottom: .9rem; } .panel h2, .panel h3 { font-size: .98rem; } /* Tables become horizontally scrollable on their own */ .responsive-table { overflow-x: auto; margin-inline: -1rem; padding-inline: 1rem; } .finance-table { font-size: .85rem; } .finance-table thead th { padding: .6rem .7rem; font-size: .72rem; } .finance-table tbody td { padding: .65rem .7rem; } /* Forms wrap nicely */ .row.g-2 > *, .row.g-3 > * { margin-bottom: .5rem; } } /* Phones (large) */ @media (max-width: 560px) { .app-main { padding: .85rem; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .kpi-tile { padding: .85rem; min-height: 100px; } .kpi-tile strong { font-size: 1.7rem; } .teacher-hero { padding: 1.2rem; } .teacher-hero h1 { font-size: 1.3rem; margin: .25rem 0 .5rem; } .payment-total { padding: 1rem; } .payment-total strong { font-size: 1.55rem; } .session-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .session-row > div:last-child { text-align: start; } .standalone-card { padding: 1.75rem 1.25rem; } .standalone-card h1 { font-size: 1.35rem; } .standalone-card .brand-mark-lg { width: 56px; height: 56px; font-size: 1.3rem; } } /* Phones (small) — iPhone SE, Galaxy S small */ @media (max-width: 400px) { .kpi-grid { grid-template-columns: minmax(0, 1fr); } .teacher-hero { padding: 1rem; } .teacher-hero h1 { font-size: 1.2rem; } .panel, .section-band { padding: .85rem; } .panel-heading h2 { font-size: .92rem; } .topbar-title h1 { font-size: .85rem; } .app-topbar { padding: 0 .7rem; height: 56px; } :root { --topbar-h: 56px; } } /* Touch-friendly: bigger tap targets on touch devices */ @media (hover: none) and (pointer: coarse) { .btn, .form-control, .form-select { min-height: 40px; } .btn-sm { min-height: 34px; } .sidebar-nav a { min-height: 44px; } .topbar-toggle { min-width: 44px; min-height: 44px; } } /* ========================================================= Utility ========================================================= */ .muted { color: var(--muted); } .h4 { font-size: 1.35rem; font-weight: 800; } .h5 { font-size: 1.1rem; font-weight: 800; } .d-inline { display: inline-block; } .gap-2 { gap: .5rem; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } /* Bootstrap focus overrides */ .btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 4px rgba(59,130,246,.20) !important; } /* ========================================================= Theme toggle (topbar) + smooth theme transition ========================================================= */ body, .app-topbar, .panel, .section-band, .kpi-tile, .metric, .app-footer, .table tbody td, .finance-table tbody td { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .theme-toggle { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .theme-toggle:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (hover: none) and (pointer: coarse) { .theme-toggle { min-width: 44px; min-height: 44px; } } /* ========================================================= Flash message panels (theme-aware classes) ========================================================= */ .flash-ok { border-color: var(--brand-300); background: var(--brand-50); } .flash-ok strong { color: var(--brand-800); } .flash-err { border-color: #fca5a5; background: #fee2e2; } .flash-err strong { color: #991b1b; } /* ========================================================= Dark theme — component fixes for surfaces that hardcode light values ========================================================= */ [data-theme="dark"] .app-topbar { background: rgba(17, 26, 46, .85); border-bottom-color: var(--line); } [data-theme="dark"] a { color: #93c5fd; } [data-theme="dark"] a:hover { color: #bfdbfe; } [data-theme="dark"] .detail-list > div:hover, [data-theme="dark"] .latest-payment:hover, [data-theme="dark"] .compact-list > div:hover, [data-theme="dark"] .session-row:hover { background: rgba(59, 130, 246, .12); border-color: var(--brand-400); } [data-theme="dark"] .latest-payment { background: linear-gradient(135deg, rgba(59, 130, 246, .14), var(--surface-2)); border-color: rgba(59, 130, 246, .30); } [data-theme="dark"] .btn-outline-primary { color: #93c5fd; } [data-theme="dark"] .btn-outline-primary:hover { background: rgba(59, 130, 246, .15); border-color: var(--brand-400); color: #bfdbfe; } /* Light brand callout boxes → translucent brand on dark */ [data-theme="dark"] .discrepancy-hint, [data-theme="dark"] .dr-note { background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .30); color: #bfdbfe; } [data-theme="dark"] .timesheet-card.is-confirmed { background: linear-gradient(135deg, rgba(59, 130, 246, .12), var(--surface)); border-color: rgba(59, 130, 246, .35); } [data-theme="dark"] .timesheet-card.is-confirmed .ts-head { border-bottom-color: rgba(59, 130, 246, .25); } [data-theme="dark"] .flash-ok { background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .35); } [data-theme="dark"] .flash-ok strong { color: #bfdbfe; } [data-theme="dark"] .flash-err { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .40); } [data-theme="dark"] .flash-err strong { color: #fecaca; } /* ===== Finance dashboard: teacher cards ===== */ .teacher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .85rem; } .teacher-card { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border: 1px solid var(--line, #e2e8f0); border-radius: 16px; background: var(--surface, #fff); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .12s; } .teacher-card:hover { border-color: var(--brand-400, #60a5fa); box-shadow: 0 10px 26px rgba(15,23,42,.10); transform: translateY(-1px); } .tc-avatar { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; background: linear-gradient(135deg, var(--brand-500, #3b82f6), var(--brand-700, #1d4ed8)); color: #fff; } .tc-body { flex: 1 1 auto; min-width: 0; } .tc-name { font-weight: 700; font-size: 1rem; } .tc-sub { color: var(--muted, #64748b); font-size: .78rem; margin-top: .1rem; } .tc-meta { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; flex-wrap: wrap; } .tc-rate { font-weight: 700; font-size: .85rem; } .tc-chev { flex: 0 0 auto; color: var(--muted, #94a3b8); } [data-theme="dark"] .teacher-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.35); } /* ===== Finance teacher-detail page ===== */ .detail-head .dh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .dh-id { display: flex; align-items: center; gap: .8rem; } .dh-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--brand-500, #3b82f6), var(--brand-700, #1d4ed8)); } .dh-name { margin: 0; font-size: 1.25rem; } .dh-sub { color: var(--muted); font-size: .82rem; } .detail-actions { display: flex; gap: .45rem; flex-wrap: wrap; } .contract-readout { margin-top: 1rem; display: grid; gap: .65rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .contract-readout > div { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .7rem; background: var(--surface-2, #f8fafc); border: 1px solid var(--line, #e9eef5); border-radius: 12px; } .contract-readout span { color: var(--muted); font-size: .76rem; } .contract-readout strong { font-size: .98rem; } /* shared soft chip + session table (used here and on the teacher page) */ .badge-soft { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .76rem; background: var(--surface-2, #f1f5f9); border: 1px solid var(--line, #e2e8f0); color: var(--ink-3, #475569); } .badge-soft.badge-sub { background: #fef3c7; color: #92400e; border-color: #fcd34d; } [data-theme="dark"] .badge-soft.badge-sub { background: rgba(217,119,6,.18); color: #fcd34d; border-color: rgba(217,119,6,.4); } .ts-session-table { width: 100%; } .ts-when { white-space: nowrap; } /* timesheet finance cards */ .ts-fin-list { display: flex; flex-direction: column; gap: .8rem; } .ts-fin-card { border: 1px solid var(--line, #e2e8f0); border-radius: 16px; padding: .9rem 1rem; background: var(--surface, #fff); } .tf-main { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .tf-titles { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .tf-course { font-size: 1rem; } .tf-right { display: flex; align-items: center; gap: .8rem; } .tf-amount { font-weight: 800; font-size: 1.05rem; white-space: nowrap; } .tf-amount small { font-weight: 500; color: var(--muted); } .tf-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; } .tf-actions { display: flex; gap: .4rem; } .tf-sessions { margin-top: .7rem; } .ts-sessions-toggle { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface-2, #f1f5f9); border: 1px solid var(--line, #e2e8f0); color: var(--ink-3, #475569); border-radius: 999px; padding: .35rem .8rem; font-size: .82rem; font-weight: 600; cursor: pointer; } .ts-sessions-toggle .chev { transition: transform .18s ease; } .ts-sessions-toggle.is-open .chev { transform: rotate(180deg); } /* ===== Manager report quick-links ===== */ .report-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; } .report-link { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; background: var(--surface, #fff); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .12s; } .report-link:hover { border-color: var(--brand-400, #60a5fa); box-shadow: 0 8px 20px rgba(15,23,42,.08); transform: translateY(-1px); } .report-link span { font-weight: 700; } .report-link small { color: var(--muted, #64748b); font-size: .78rem; }