/* ========================================================= LMS Platform — Main Stylesheet Aesthetic: Refined Modern Minimalist ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); /* --------------------------------------------------------- CSS Variables --------------------------------------------------------- */ :root { --sidebar-w: 280px; --sidebar-rail-w: 68px; --topbar-h: 72px; /* Brand — KOLORAN palette, dark variant (matches yeni_dizayn) */ --brand-50: rgba(59, 130, 246, 0.16); /* primarySoft (dark) */ --brand-100: #1e3a8a; --brand-500: #3b82f6; /* primary (dark) */ --brand-600: #2563eb; /* primaryDark */ --brand-700: #1d4ed8; --accent-500: #2dd4bf; --accent-600: #14b8a6; /* Legacy aliases — dark theme */ --blue-50: rgba(59, 130, 246, 0.16); --blue-600: #3b82f6; --neo-yellow: #131c2e; /* btn-secondary → dark chip */ --neo-pink: #f87171; --neo-cyan: #131c2e; --neo-green: #2dd4bf; --neo-purple: #3b82f6; --neo-orange: #f59e0b; /* Sidebar — dark panel */ --sb-bg: #0b1322; --sb-border: #1e293b; --sb-text: #64748b; --sb-text-hover: #f1f5f9; --sb-active-bg: rgba(59, 130, 246, 0.16); --sb-active-text: #bfdbfe; --sb-active-bar: #3b82f6; /* Surfaces — dark (design values) */ --bg: #070b14; --surface: #0f172a; --surface2: #131c2e; --surface3: #1e293b; --border: #1e293b; --border2: #334155; /* Text */ --tx-1: #f1f5f9; --tx-2: #a8b4c4; --tx-3: #64748b; /* Status — dark */ --green: #2dd4bf; --green-bg: rgba(20, 184, 166, 0.16); --green-600: #2dd4bf; --amber: #f59e0b; --amber-bg: rgba(245, 158, 11, 0.16); --red: #f87171; --red-bg: rgba(248, 113, 113, 0.16); --red-600: #f87171; --info: #3b82f6; --info-bg: rgba(59, 130, 246, 0.16); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.16); --purple-600: #a78bfa; /* Shadows — dark depth (design values) */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --sh: 0 10px 30px -14px rgba(0, 0, 0, 0.6); --sh-md: 0 18px 44px -20px rgba(0, 0, 0, 0.65); --sh-lg: 0 24px 60px -22px rgba(0, 0, 0, 0.7); --sh-xl: 0 28px 70px -24px rgba(0, 0, 0, 0.75); --radius: 11px; --radius-lg: 16px; --radius-xl: 18px; --radius-2xl: 24px; --border-w: 1px; --transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1); color-scheme: dark; } /* --------------------------------------------------------- Light theme — activated with Only re-declares tokens; everything else propagates automatically. --------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; /* Brand — KOLORAN palette (matches yeni_dizayn design tokens) */ --brand-50: #eaf0fe; /* primarySoft — active/hover wash */ --brand-100: #dbeafe; --brand-500: #2563eb; /* primary */ --brand-600: #1d4ed8; /* primaryDark — hover */ --brand-700: #1e40af; --accent-500: #14b8a6; /* teal */ --accent-600: #0d9488; --blue-50: #eaf0fe; --blue-600: #2563eb; --neo-yellow: #f8fafc; --neo-pink: #dc2626; --neo-cyan: #eaf0fe; --neo-green: #0d9488; --neo-purple: #2563eb; --neo-orange: #d97706; /* Sidebar — pure white */ --sb-bg: #ffffff; --sb-border: #e7ecf3; --sb-text: #64748b; --sb-text-hover: #2563eb; --sb-active-bg: #eaf0fe; --sb-active-text: #1d4ed8; --sb-active-bar: #2563eb; /* Surfaces */ --bg: #f1f5f9; --surface: #ffffff; --surface2: #f8fafc; --surface3: #f1f5f9; --border: #e7ecf3; --border2: #d3dce6; /* Text */ --tx-1: #0f172a; --tx-2: #475569; --tx-3: #94a3b8; /* Status — success is teal in this palette */ --green: #0d9488; --green-bg: #e2f5f2; --green-600: #0d9488; --amber: #d97706; --amber-bg: #fcf0dd; --red: #dc2626; --red-bg: #fbe8e8; --red-600: #dc2626; --info: #2563eb; --info-bg: #eaf0fe; --purple: #7c3aed; --purple-bg: #f0eafe; --purple-600: #7c3aed; /* Shadows — soft, design-matched */ --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); --sh: 0 4px 16px -8px rgba(15, 23, 42, 0.14); --sh-md: 0 12px 30px -16px rgba(15, 23, 42, 0.18); --sh-lg: 0 18px 44px -22px rgba(15, 23, 42, 0.22); --sh-xl: 0 28px 60px -24px rgba(15, 23, 42, 0.26); } /* Light-theme specific badge/alert tone remaps (icons & colored chips looked dim on white in dark-theme palette) */ [data-theme="light"] .badge-blue { background:#eaf0fe; color:#1d4ed8; border-color:#d4e2fd; } [data-theme="light"] .badge-green { background:#e2f5f2; color:#0d7a70; border-color:#c4ebe5; } [data-theme="light"] .badge-amber { background:#fcf0dd; color:#b45309; border-color:#f6e0bb; } [data-theme="light"] .badge-red { background:#fbe8e8; color:#b91c1c; border-color:#f6cccc; } [data-theme="light"] .badge-purple { background:#f0eafe; color:#6d28d9; border-color:#e0d4fb; } [data-theme="light"] .badge-gray { background:#f1f5f9; color:#475569; border-color:#e2e8f0; } [data-theme="light"] .alert-success { background:#e2f5f2; color:#0d7a70; border-color:#c4ebe5; } [data-theme="light"] .alert-error { background:#fbe8e8; color:#b91c1c; border-color:#f6cccc; } [data-theme="light"] .alert-warning { background:#fcf0dd; color:#b45309; border-color:#f6e0bb; } [data-theme="light"] .alert-info { background:#eaf0fe; color:#1d4ed8; border-color:#d4e2fd; } [data-theme="light"] .stat-icon.blue { background:#eaf0fe; color:#1d4ed8; border-color:#d4e2fd; } [data-theme="light"] .stat-icon.green { background:#e2f5f2; color:#0d9488; border-color:#c4ebe5; } [data-theme="light"] .stat-icon.amber { background:#fcf0dd; color:#b45309; border-color:#f6e0bb; } [data-theme="light"] .stat-icon.red { background:#fbe8e8; color:#b91c1c; border-color:#f6cccc; } [data-theme="light"] .stat-icon.purple { background:#f0eafe; color:#6d28d9; border-color:#e0d4fb; } [data-theme="light"] .topbar { background: rgba(248, 250, 252, 0.8); } [data-theme="light"] thead th { background: #f8fafc; } [data-theme="light"] tbody tr:hover { background: rgba(37, 99, 235, 0.04); } /* --------------------------------------------------------- Language + Theme switcher (topbar + React shells) --------------------------------------------------------- */ .switcher-group { display: inline-flex; align-items: center; gap: 8px; } .lang-switch { display: inline-flex; align-items: center; height: 40px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; margin: 0; } .lang-pill { appearance: none; -webkit-appearance: none; background: transparent; border: 0; height: 100%; padding: 0 11px; font: 700 12px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: 0.3px; color: var(--tx-3); border-radius: 8px; cursor: pointer; transition: color 0.15s, background 0.15s; } .lang-pill:hover { color: var(--tx-1); } .lang-pill.is-active { background: var(--surface); color: var(--tx-1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } [data-theme="light"] .lang-pill.is-active { background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); color: var(--brand-600); } .theme-btn { appearance: none; -webkit-appearance: none; background: var(--surface); border: 1px solid var(--border); padding: 0; width: 40px; height: 40px; border-radius: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--tx-2); transition: color 0.15s, background 0.15s, border-color 0.15s; } .theme-btn:hover { color: var(--brand-500); border-color: var(--brand-500); } .theme-ico { display: inline-flex; align-items: center; justify-content: center; } .theme-ico-sun { display: none; } .theme-ico-moon { display: inline-flex; } [data-theme="light"] .theme-ico-sun { display: inline-flex; } [data-theme="light"] .theme-ico-moon { display: none; } /* --------------------------------------------------------- Reset & Base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; line-height: 1.6; color: var(--tx-1); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .topbar-title, .card-title, .sidebar-logo-text { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; } code, .stat-value, .badge, .form-input, .course-card-meta { font-family: 'Plus Jakarta Sans', sans-serif; } a { color: var(--brand-600); text-decoration: none; transition: color var(--transition); font-weight: 500; } a:hover { color: var(--brand-500); text-decoration: none; } img { max-width: 100%; display: block; border-radius: var(--radius); } hr, .divider { border: 0; border-top: 1px solid var(--border); margin: 16px 0; } /* Readable form inputs on dark */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="tel"], input[type="search"], input[type="url"], select, textarea { color-scheme: dark; color: var(--tx-1); background: var(--surface); } ::placeholder { color: var(--tx-3); opacity: 1; } /* Scrollbars */ * { scrollbar-color: rgba(148, 163, 184, 0.25) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.35); } /* Selection */ ::selection { background: rgba(37, 99, 235, 0.4); color: #fff; } ul, ol { list-style: none; } /* --------------------------------------------------------- Layout Shell --------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } /* --------------------------------------------------------- Sidebar --------------------------------------------------------- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--sb-bg); border-right: var(--border-w) solid var(--border); display: flex; flex-direction: column; z-index: 100; overflow-y: auto; overflow-x: hidden; box-shadow: var(--sh-xl); } .sidebar-logo { display: flex; align-items: center; gap: 12px; padding: 24px 20px 20px; border-bottom: 1px solid var(--border); text-decoration: none; background: transparent; color: var(--tx-1); } .sidebar-logo:hover { text-decoration: none; background: var(--surface2); } .sidebar-logo-icon { width: 38px; height: 38px; border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-logo-icon img { width: 100%; height: 100%; object-fit: contain; } .sidebar-logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.05; color: var(--tx-1); } .sidebar-logo-sub { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; color: var(--tx-3); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px; } .sidebar-section { margin-top: 14px; padding: 0 0 2px; } .sidebar-section:first-of-type { margin-top: 8px; } .sidebar-section:last-child { flex: 1; } .sidebar-section-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tx-3); padding: 4px 12px 7px; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--sb-text); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; transition: background 0.16s, color 0.16s; position: relative; margin: 2px 12px; border-radius: 11px; } /* Hover: subtle wash only — must remain visually distinct from .active. */ .sidebar-link:hover:not(.active) { background: var(--surface3); color: var(--tx-1); text-decoration: none; } /* Active: colored left accent bar + soft tint + bolder text. */ .sidebar-link.active { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 700; } .sidebar-link.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px; background: var(--sb-active-bar); } .sidebar-icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.18s ease; } /* Force every glyph to the same box + stroke weight so the rail reads as a uniform, evenly-sized icon column. */ .sidebar-icon svg { width: 20px; height: 20px; display: block; stroke-width: 1.85; } .sidebar-link:hover .sidebar-icon { transform: scale(1.12); } .sidebar-link.active .sidebar-icon { transform: scale(1.06); } .sidebar-badge { margin-left: auto; background: var(--neo-purple); color: var(--surface); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); } .sidebar-user { padding: 14px 16px; border-top: var(--border-w) solid var(--border); background: rgba(148, 163, 184, 0.04); display: flex; align-items: center; gap: 10px; } .sidebar-avatar { width: 36px; height: 36px; border: none; border-radius: var(--radius); box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.35); background: linear-gradient(135deg, var(--brand-700), var(--accent-500)); display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; color: #ffffff; flex-shrink: 0; } .sidebar-user-name { font-size: 15px; font-weight: 800; color: var(--tx-1); letter-spacing: -0.5px; } .sidebar-user-role { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; color: var(--tx-2); } /* --------------------------------------------------------- Sidebar rail mode (desktop) When , the sidebar collapses to a narrow icon-only rail. Hovering expands it as an overlay (main-content stays put). Toggled by the topbar pin button. --------------------------------------------------------- */ .sidebar { transition: width 0.22s ease, box-shadow 0.22s ease; } .sidebar-link, .sidebar-logo, .sidebar-user { transition: padding 0.22s ease; } @media (min-width: 768px) { html.sidebar-rail .sidebar { width: var(--sidebar-rail-w); } html.sidebar-rail .sidebar:hover { width: var(--sidebar-w); box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.45); } html.sidebar-rail .main-content { margin-left: var(--sidebar-rail-w); } /* When in rail mode AND not hovered, hide text content so only icons show */ html.sidebar-rail .sidebar:not(:hover) .sidebar-section-label, html.sidebar-rail .sidebar:not(:hover) .sidebar-logo > div:nth-child(2), html.sidebar-rail .sidebar:not(:hover) .sidebar-user > div:nth-child(2), html.sidebar-rail .sidebar:not(:hover) .sidebar-user > a { opacity: 0; visibility: hidden; pointer-events: none; width: 0; height: 0; overflow: hidden; margin: 0; padding: 0; } /* Sidebar links: center the icon in the rail and collapse the label. `font-size: 0` shrinks the bare label text node to zero width so only the fixed-size icon remains — then justify-content:center truly centers it (previously flex-start + 22px padding pushed icons right of centre). */ html.sidebar-rail .sidebar:not(:hover) .sidebar-link { white-space: nowrap; overflow: hidden; justify-content: center; gap: 0; font-size: 0; padding-left: 0; padding-right: 0; margin-left: 10px; margin-right: 10px; } /* Badges would overflow a centered icon — hide them until expanded. */ html.sidebar-rail .sidebar:not(:hover) .sidebar-badge { display: none; } /* Active accent sits flush to the rail's left edge, icon stays centered. */ html.sidebar-rail .sidebar:not(:hover) .sidebar-link.active::before { left: -10px; height: 22px; } html.sidebar-rail .sidebar:not(:hover) .sidebar-logo { padding-left: 0; padding-right: 0; justify-content: center; } html.sidebar-rail .sidebar:not(:hover) .sidebar-user { padding-left: 16px; padding-right: 16px; } } /* Pin button (topbar, desktop only) */ .sidebar-pin-btn { display: none; background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; cursor: pointer; color: var(--tx-2); font-size: 16px; line-height: 1; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .sidebar-pin-btn:hover { background: var(--surface2); color: var(--tx-1); } .sidebar-pin-btn[aria-pressed="true"] { background: var(--brand-600); color: #fff; border-color: var(--brand-600); } @media (min-width: 768px) { .sidebar-pin-btn { display: inline-flex; align-items: center; gap: 6px; } } /* --------------------------------------------------------- Main Content --------------------------------------------------------- */ .main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left 0.22s ease; } /* Top bar */ .topbar { position: sticky; top: 0; z-index: 99; height: var(--topbar-h); background: rgba(2, 6, 23, 0.75); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: var(--border-w) solid var(--border); display: flex; align-items: center; padding: 0 32px; gap: 16px; box-shadow: none; } .topbar-head { flex: 1; min-width: 0; } .topbar-eyebrow { font-size: 11px; font-weight: 600; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-title { font-size: 21px; font-weight: 800; letter-spacing: -0.025em; color: var(--tx-1); margin: 1px 0 0; } .topbar-actions { display: flex; align-items: center; gap: 11px; } /* Search box (design-matched presentational launcher) */ .topbar-search { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px; min-width: 240px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); color: var(--tx-3); text-decoration: none; transition: var(--transition); } .topbar-search:hover { border-color: var(--border2); } .topbar-search svg { width: 16px; height: 16px; } .topbar-search span { font-size: 13.5px; } .topbar-search kbd { margin-left: auto; font: 600 11px/1 "Plus Jakarta Sans", sans-serif; padding: 3px 7px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border); color: var(--tx-3); } @media (max-width: 900px) { .topbar-search { display: none; } } /* Page content */ .page-content { /* This is the global vertical rhythm: the top padding plus a 32px gap between every top-level block added up to a lot of dead space on every screen. Tightened once here rather than patching each page. */ padding: 24px 32px; flex: 1; display: flex; flex-direction: column; gap: 20px; } /* --------------------------------------------------------- Cards --------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); position: relative; transition: box-shadow var(--transition); overflow: hidden; } .card:hover { box-shadow: var(--sh); transform: none; } .card-header { padding: 18px 22px; border-bottom: var(--border-w) solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: transparent; } .card-title { font-size: 18px; color: var(--tx-1); } .card-subtitle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: var(--tx-2); margin-top: 4px; } /* A subtitle sitting *beside* the title splits the header into two narrow columns and both texts wrap mid-word (see the course sidebar cards). As a direct flex child it gets its own line under the title instead; buttons and other header actions still sit next to the title. The negative margin eats most of the 16px row gap. Subtitles nested in a wrapper div are untouched. */ .card-header > .card-title { flex: 1 1 auto; min-width: 0; } .card-header > .card-subtitle { flex: 1 1 100%; order: 2; margin-top: -10px; } .card-body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; line-height: 1.6; color: var(--tx-1); background: var(--surface); padding: 24px; -webkit-font-smoothing: antialiased; } .card-footer { padding: 16px 24px; border-top: var(--border-w) solid var(--border); background: var(--surface2); } /* Stat cards */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; margin-bottom: 0; } /* Icon left (spanning the whole card), number above its label on the right. As a single flex row the label was squeezed to a few pixels and broke one letter per line — the number and the label were competing for the same row. */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 4px; box-shadow: var(--sh); transition: all 0.1s linear; overflow: hidden; /* Lets the number scale to the card's own width (cqi below). */ container-type: inline-size; } .stat-card > .stat-icon { grid-column: 1; grid-row: 1 / -1; } .stat-card > .stat-value, .stat-card > .stat-label, .stat-card > .stat-trend { grid-column: 2; } .stat-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .stat-card:nth-child(2n):hover { background: var(--surface2); } .stat-card:nth-child(2n):hover .stat-value, .stat-card:nth-child(2n):hover .stat-label { color: var(--tx-1); } .stat-icon { width: 52px; height: 52px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; background: var(--surface); } .stat-icon.blue { background: rgba(37, 99, 235, 0.15); color: #93c5fd; border-color: rgba(37, 99, 235, 0.25); } .stat-icon.green { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.25); } .stat-icon.amber { background: rgba(217, 119, 6, 0.18); color: #fcd34d; border-color: rgba(217, 119, 6, 0.3); } .stat-icon.red { background: rgba(225, 29, 72, 0.16); color: #fda4af; border-color: rgba(225, 29, 72, 0.28); } .stat-icon.purple { background: rgba(124, 58, 237, 0.18); color: #d8b4fe; border-color: rgba(124, 58, 237, 0.28); } .stat-value { font-family: 'Plus Jakarta Sans', sans-serif; /* A money figure ("₼ 8,250.00") is far wider than a count — size it against the card so it never has to wrap or spill. The plain value first: a browser without container-query units drops the clamp line and keeps this one. */ font-size: 30px; font-size: clamp(20px, 11cqi, 32px); font-weight: 800; color: var(--tx-1); line-height: 1.1; letter-spacing: -1px; text-shadow: none; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--tx-2); font-weight: 800; min-width: 0; line-height: 1.35; /* Wrap between words — never inside one. */ overflow-wrap: break-word; word-break: normal; } .stat-trend { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; margin-top: 8px; font-weight: 800; padding: 2px 6px; border: 1px solid var(--border); display: inline-block; } .stat-trend.up { background: var(--neo-green); color: var(--tx-1); } .stat-trend.down { background: var(--neo-pink); color: var(--surface); } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 700; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, color 0.16s; white-space: nowrap; letter-spacing: -0.01em; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; } .btn-primary { background: var(--brand-500); color: #ffffff; border: 1px solid transparent; box-shadow: 0 6px 16px -8px var(--ring, rgba(37, 99, 235, 0.45)); } .btn-primary:hover { background: var(--brand-600); color: #ffffff; } .btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--tx-1); box-shadow: var(--sh-sm); } .btn-secondary:hover { background: var(--surface2); border-color: var(--border2); box-shadow: var(--sh); transform: translateY(-1px); } .btn-danger { background: #e11d48; color: #ffffff; border: 1px solid transparent; box-shadow: 0 6px 14px -4px rgba(225, 29, 72, 0.35); } .btn-danger:hover { background: #be123c; color: #ffffff; box-shadow: 0 10px 20px -6px rgba(225, 29, 72, 0.45); transform: translateY(-1px); } .btn-ghost { background: transparent; box-shadow: none; color: var(--tx-2); } .btn-ghost:hover { background: var(--surface2); color: var(--tx-1); box-shadow: none; transform: none; } .btn-sm { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; } .btn-lg { padding: 14px 28px; font-size: 18px; } .btn-icon { padding: 10px; } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form-group { margin-bottom: 28px; } .form-label { font-family: 'Plus Jakarta Sans', sans-serif; display: block; font-size: 14px; font-weight: 800; color: var(--tx-1); margin-bottom: 8px; } .form-label .required { color: var(--neo-pink); margin-left: 4px; } /* The field styling every form in the app relies on. .form-input MUST stay in this selector list: it was once spliced onto the spinner rule below, which left every text/date/time input with no padding, border or radius at all. */ .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; font-size: 14.5px; color: var(--tx-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; outline: none; } /* Amount fields are typed, not nudged — the native spinner arrows only get in the way (and they clip the value on narrow inputs). */ .form-input[type="number"]::-webkit-outer-spin-button, .form-input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .form-input[type="number"], input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .form-input:focus, .form-select:focus, .form-textarea:focus { background: var(--surface); border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); transform: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--tx-3); font-family: 'Plus Jakarta Sans', sans-serif; } .form-textarea { resize: vertical; min-height: 120px; } /* Hide the browser's datalist dropdown arrow on free-text inputs that offer suggestions (e.g. the quiz "Növ" field). The suggestions still appear while typing — only the confusing indicator is removed. */ input[list]::-webkit-calendar-picker-indicator { display: none !important; } /* flatpickr: keep the calendar a hidden popup until opened. Guards against a CSS/CDN conflict that left the calendar rendered inline (a stray grid under date fields, e.g. on the attendance page). */ .flatpickr-calendar:not(.open) { display: none !important; } .form-hint { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: var(--tx-2); margin-top: 6px; font-weight: 600; } .form-error { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: var(--surface); background: var(--neo-pink); padding: 4px 8px; border: 1px solid var(--border); display: inline-block; margin-top: 6px; font-weight: 800; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* Checkbox */ .form-check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; } .form-check-input { width: 20px; height: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); cursor: pointer; accent-color: var(--neo-purple); appearance: none; background: var(--surface); position: relative; } .form-check-input:checked { background: var(--neo-purple); } /* Checked = a tick, never an ✕ — an X on a filled box reads as "rejected". */ .form-check-input:checked::after { content: ''; position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); background: var(--surface); } /* A .table-wrap standing on its own draws its own frame (above). But inside a .card the card ALREADY supplies the border, radius and shadow — drawing them twice stacks a second frame straight under the card header, which is what made the header and the column row look welded together. Drop the inner chrome so the table reads as part of the card. */ .card > .table-wrap, .card > .card-body > .table-wrap { border: 0; border-radius: 0; box-shadow: none; background: transparent; } /* Table sitting directly under a card header: let the column row breathe. */ .card > .table-wrap > table > thead > tr > th, .card > .table-wrap > table thead th { padding-top: 16px; padding-bottom: 16px; } /* Count pill used next to list-page titles (design's primarySoft chip) */ .count-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); } table { width: 100%; border-collapse: collapse; } thead th { text-align: left; padding: 14px 18px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--tx-3); background: rgba(148, 163, 184, 0.04); border-bottom: var(--border-w) solid var(--border); border-right: none; } thead th:last-child { border-right: none; } tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: rgba(37, 99, 235, 0.06); } tbody td { padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--tx-1); vertical-align: middle; border-right: none; } tbody td:last-child { border-right: none; } .td-actions { display: flex; gap: 8px; } /* --------------------------------------------------------- Badges / Pills --------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; border-radius: 8px; border: 1px solid transparent; white-space: nowrap; } .badge-blue { background: rgba(37, 99, 235, 0.15); color: #bfdbfe; border-color: rgba(37, 99, 235, 0.3); } .badge-green { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.3); } .badge-amber { background: rgba(217, 119, 6, 0.18); color: #fcd34d; border-color: rgba(217, 119, 6, 0.3); } .badge-red { background: rgba(225, 29, 72, 0.16); color: #fda4af; border-color: rgba(225, 29, 72, 0.3); } .badge-purple { background: rgba(124, 58, 237, 0.18); color: #d8b4fe; border-color: rgba(124, 58, 237, 0.3); } .badge-gray { background: rgba(148, 163, 184, 0.1); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.2); } /* --------------------------------------------------------- Alerts / Toasts --------------------------------------------------------- */ .alert { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh); } .alert-success { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.3); } .alert-error { background: rgba(225, 29, 72, 0.14); color: #fda4af; border-color: rgba(225, 29, 72, 0.3); } .alert-warning { background: rgba(217, 119, 6, 0.14); color: #fcd34d; border-color: rgba(217, 119, 6, 0.3); } .alert-info { background: rgba(37, 99, 235, 0.14); color: #bfdbfe; border-color: rgba(37, 99, 235, 0.3); } /* Toast */ #toast-container { bottom: 32px; right: 32px; gap: 16px; } .toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-xl); padding: 16px 20px; font-weight: 700; } /* --------------------------------------------------------- Page header --------------------------------------------------------- */ .page-header { border-bottom: var(--border-w) solid var(--border); /* 24 + 32 = 56px of air under every page title was far too much — the first card floated away from its own heading. */ padding-bottom: 14px; margin-bottom: 20px; } .page-header-left h1 { font-size: 32px; letter-spacing: -1px; } .page-header-left p { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 14px; margin-top: 8px; display: inline-block; background: var(--neo-yellow); padding: 2px 8px; border: 1px solid var(--border); } /* Breadcrumb */ .breadcrumb { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 13px; margin-bottom: 12px; } .breadcrumb a { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 8px; color: var(--tx-2); } .breadcrumb a:hover { background: var(--surface2); color: var(--tx-1); text-decoration: none; } /* --------------------------------------------------------- Filters row + modern search bar --------------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; } .search-bar { position: relative; flex: 1 1 280px; max-width: 380px; } .search-bar .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 0; /* hide emoji glyph; show SVG instead */ pointer-events: none; color: var(--tx-3); } .search-bar .search-icon::before { content: ""; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: contain; } .search-bar input { width: 100%; padding: 10px 14px 10px 42px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--tx-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; outline: none; } .search-bar input::placeholder { color: var(--tx-3); font-weight: 400; } .search-bar input:hover { border-color: var(--border2); } .search-bar input:focus { background: var(--surface); border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); transform: none; } /* --------------------------------------------------------- Empty state --------------------------------------------------------- */ .empty-state { border: 1px dashed var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 64px 40px; text-align: center; } .empty-state h3 { font-size: 24px; margin-top: 16px; } /* Inline empty-state banners (form hints / onboarding prompts) */ .empty-state-banner { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface2); } .empty-state-warn { background: var(--amber-bg); border-color: var(--amber); } .empty-state-info { background: var(--info-bg); border-color: var(--info); } .esb-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; } .esb-body { flex: 1; } .esb-body strong { display: block; font-size: 0.95rem; font-weight: 700; margin-bottom: 3px; } .esb-body p { font-size: 0.85rem; color: var(--tx-2); margin: 0 0 8px; } .esb-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600; padding: 6px 14px; border-radius: var(--radius); text-decoration: none; background: var(--brand-600); color: #fff; transition: background var(--transition); } .esb-link:hover { background: var(--brand-700); } .hint-warn { color: var(--amber); } .hint-info { color: var(--brand-600); } .hint-link { font-weight: 600; text-decoration: none; margin-left: 4px; transition: opacity 0.15s; } .hint-link:hover { opacity: 0.75; } /* --------------------------------------------------------- Tinted icon box (list/card leading glyphs) --------------------------------------------------------- */ .icon-box { width: 44px; height: 44px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-box.blue { background: var(--blue-50); color: var(--blue-600); } .icon-box.purple { background: var(--purple-bg); color: var(--purple-600); } .icon-box.green { background: var(--green-bg); color: var(--green-600); } .icon-box.amber { background: var(--amber-bg); color: var(--amber); } .icon-box-sm { width: 36px; height: 36px; border-radius: 9px; } .icon-box-lg { width: 96px; height: 96px; border-radius: var(--radius-lg); } /* Soft-tint button (secondary action that stays on-brand) */ .btn-soft { background: var(--blue-50); color: var(--blue-600); box-shadow: none; } .btn-soft:hover { background: var(--brand-100); color: var(--brand-700); } /* Outline button (white fill + hairline border) */ .btn-outline { background: var(--surface); border: 1px solid var(--border); color: var(--tx-1); box-shadow: none; } .btn-outline:hover { background: var(--surface2); box-shadow: none; transform: none; } /* --------------------------------------------------------- Card grid (departments & similar) --------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; /* Every card in a row starts on the same line and fills the row's height, so cards stay level even when their content differs in length. */ align-items: stretch; } .card-grid > .card, .card-grid > .stat-card { height: 100%; margin-top: 0; } .tile-card { display: flex; flex-direction: column; gap: 16px; padding: 18px; height: 100%; } /* Push the action row to the bottom so buttons line up across cards. */ .tile-card > :last-child { margin-top: auto; } .tile-stats { display: flex; align-items: flex-end; gap: 24px; } .tile-stat-num { font-size: 24px; font-weight: 800; line-height: 1; } .tile-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tx-3); margin-top: 5px; } .tile-actions { display: flex; gap: 8px; } .tile-actions .btn { flex: 1; } /* Status dot label (e.g. ● Aktiv) */ .status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--green-600); white-space: nowrap; } .status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status-dot.muted { color: var(--tx-3); } /* Thin progress bar (capacity / completion) */ .progress-track { flex: 1; height: 6px; max-width: 170px; background: var(--surface3); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: var(--brand-500); border-radius: 999px; } /* Small meta chip (course / date pills on cards) */ .meta-chip { display: inline-flex; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; padding: 2px 9px; font-size: 12px; font-weight: 600; color: var(--tx-2); } /* Pill tabs (parent child-overview, segmented switching) */ .pill-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; } .pill-tab { padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--tx-2); background: transparent; border: none; cursor: pointer; font-family: inherit; } .pill-tab:hover { background: var(--surface2); color: var(--tx-1); } .pill-tab.active { background: var(--brand-600); color: #fff; } .pill-panel { display: none; } .pill-panel.active { display: block; } /* --------------------------------------------------------- Avatar --------------------------------------------------------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; font-weight: 700; font-size: 14px; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 38px; height: 38px; font-size: 13px; } .avatar-lg { width: 56px; height: 56px; font-size: 18px; border-radius: 14px; } .avatar-blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; } .avatar-green { background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff; } .avatar-amber { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; } .avatar-purple { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; } /* --------------------------------------------------------- Course / Lesson cards --------------------------------------------------------- */ .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; align-items: stretch; } .course-card { border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--sh-sm); display: block; } /* Cards in the grid: same height per row, and the same inner rows (title / teacher / progress) line up across neighbouring cards. */ .course-grid > .course-card { display: flex; flex-direction: column; height: 100%; } .course-grid > .course-card > .course-card-body { flex: 1; display: flex; flex-direction: column; } /* Reserve two lines for the name so a wrapped title doesn't shift the rest down. */ .course-card-name { font-weight: 700; font-size: 16px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .course-card-dept { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .course-card-foot { margin-top: auto; padding-top: 14px; } .course-card:hover { box-shadow: var(--sh); transform: translateY(-3px); } .course-card-cover { height: 24px; border-bottom: var(--border-w) solid var(--border); background: var(--neo-purple); } .course-card-cover.green { background: var(--neo-green); } .course-card-cover.purple { background: var(--neo-purple); } .course-card-cover.amber { background: var(--neo-yellow); } /* Status-based cover colours (course/quiz cards): published → green, draft → yellow, archived/cancelled → grey. */ .course-card-cover.status-published, .course-card-cover.status-active, .course-card-cover.status-open { background: var(--neo-green); } .course-card-cover.status-draft, .course-card-cover.status-scheduled { background: var(--neo-yellow); } .course-card-cover.status-archived, .course-card-cover.status-cancelled { background: #94a3b8; } /* HTMX modal overlay (in-place add/edit forms) */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: none; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 1000; overflow-y: auto; } .modal-overlay.open { display: flex; } .modal-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-xl); width: 100%; max-width: 560px; padding: 24px; } .modal-close { position: absolute; top: 12px; right: 12px; background: transparent; border: none; font-size: 18px; cursor: pointer; color: var(--tx-2); line-height: 1; padding: 4px 8px; border-radius: var(--radius); } .modal-close:hover { background: var(--surface2); color: var(--tx-1); } .modal-title { font-size: 18px; font-weight: 800; margin-bottom: 16px; color: var(--tx-1); } .course-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } .course-tab { padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--tx-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .course-tab:hover { color: var(--tx-1); } .course-tab.active { color: var(--brand-600); border-bottom-color: var(--brand-600); } .pending-review-row { transition: background 0.12s ease; } .pending-review-row:hover { background: var(--surface2); } .pending-review-row:last-child { border-bottom: none !important; } .course-card-body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; line-height: 1.6; color: var(--tx-1); background: var(--surface); padding: 20px; -webkit-font-smoothing: antialiased; } .course-card-title { font-size: 20px; letter-spacing: -0.5px; /* Keep long course names from blowing out the card / merging frames. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .course-card-meta { font-size: 13px; font-weight: 600; margin-top: 12px; } .course-card-meta span { background: var(--surface2); border: 1px solid var(--border); padding: 2px 6px; color: var(--tx-2); } .course-card-footer { border-top: var(--border-w) solid var(--border); background: var(--surface); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; } /* Progress bar */ .progress { border: 1px solid var(--border); border-radius: 999px; height: 12px; background: var(--surface2); margin-top: 16px; box-shadow: var(--sh-sm); } .progress-bar { border-radius: 999px; background: var(--neo-green); border-right: 1px solid var(--border); } /* --------------------------------------------------------- Module / Lesson list in course detail --------------------------------------------------------- */ .module-item { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh); margin-bottom: 16px; } .module-header { background: var(--neo-yellow); border-bottom: var(--border-w) solid var(--border); padding: 16px 20px; } .module-header:hover { background: var(--neo-cyan); } .module-toggle { display: inline-block; transition: transform 0.2s ease; } .module-header[aria-expanded="false"] .module-toggle { transform: rotate(-90deg); } .module-number { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--brand-600); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 800; line-height: 1; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28); } .module-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; } .lesson-item { border-bottom: 1px solid var(--border); font-weight: 500; padding: 14px 20px; transition: background 0.14s; } .lesson-item:hover { background: var(--blue-50); } .lesson-item.active { background: var(--blue-50); color: var(--brand-600); box-shadow: inset 3px 0 0 var(--brand-600); } /* Per-lesson order chip ("Dərs N") on the right of each row */ .lesson-seq { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--tx-3); background: var(--surface3); padding: 3px 11px; border-radius: 999px; } .lesson-item:hover .lesson-seq, .lesson-item.active .lesson-seq { background: var(--brand-100); color: var(--brand-700); } /* --------------------------------------------------------- Attendance grid --------------------------------------------------------- */ .att-pill { border: 1px solid var(--border); box-shadow: var(--sh-sm); border-radius: var(--radius-lg); font-family: 'Plus Jakarta Sans', sans-serif; } .att-pill.present { background: var(--neo-green); color: var(--tx-1); } .att-pill.absent { background: var(--neo-pink); color: var(--surface); } .att-pill.late { background: var(--neo-yellow); color: var(--tx-1); } /* --------------------------------------------------------- Attendance journal (class register grid) --------------------------------------------------------- */ .journal-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--tx-2); } .journal-legend > span { display: inline-flex; align-items: center; gap: 6px; } .journal-legend-hint { color: var(--tx-3); font-style: italic; } .jr-key { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); font-weight: 700; font-size: 12px; } .journal-wrap { overflow-x: auto; } .journal-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; } .journal-table th, .journal-table td { border-bottom: 1px solid var(--border); padding: 6px 8px; } .journal-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface2); font-size: 12px; color: var(--tx-2); text-align: center; white-space: nowrap; } /* Frozen student-name column */ .journal-table .jr-student { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; min-width: 200px; font-weight: 500; } .journal-table thead .jr-student { z-index: 3; background: var(--surface2); } .jr-datecol { min-width: 44px; } .jr-datecol .jr-day { display: block; font-weight: 700; color: var(--tx-1); font-size: 13px; } .jr-datecol .jr-month { display: block; font-size: 10.5px; color: var(--tx-3); } .jr-datecol .jr-dow { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--tx-3); margin-bottom: 3px; } /* Today's date column = red (active). Every other column = blue (locked). */ .jr-datecol.jr-today { background: rgba(220, 38, 38, 0.10); } .jr-datecol.jr-today .jr-day { color: var(--red-600); } .jr-datecol.jr-today .jr-dow { color: var(--red-600); } .jr-datecol:not(.jr-today) { background: rgba(37, 99, 235, 0.05); } .jr-cell { text-align: center; padding: 4px; } .jr-mark { width: 34px; height: 34px; border-radius: 8px; border: 1px dashed var(--border); background: transparent; color: var(--tx-3); cursor: pointer; font-weight: 800; font-size: 15px; line-height: 1; transition: transform 0.08s ease; font-family: 'Plus Jakarta Sans', sans-serif; } .jr-mark:hover { transform: scale(1.08); border-color: var(--tx-3); } .jr-mark.present, .jr-key.present { background: var(--neo-green); border-style: solid; color: var(--tx-1); } .jr-mark.late, .jr-key.late { background: var(--neo-yellow); border-style: solid; color: var(--tx-1); } .jr-mark.absent, .jr-key.absent { background: var(--neo-pink); border-style: solid; color: var(--surface); } .jr-mark.excused, .jr-key.excused { background: var(--blue-50); border-style: solid; color: var(--blue-700); } /* ── Journal edit-lock ────────────────────────────────────────────────────── Today's column (.jr-cell-today) is always editable — it gets a full-height highlight matching the header. Every other day is read-only while the form carries `.journal-locked`; "Keçmişi redaktə et" removes that class. */ .jr-cell-today { background: rgba(220, 38, 38, 0.07); } .jr-cell:not(.jr-cell-today) { background: rgba(37, 99, 235, 0.045); } .journal-locked .jr-cell:not(.jr-cell-today) .jr-mark { opacity: .45; cursor: not-allowed; } .journal-locked .jr-cell:not(.jr-cell-today) .jr-mark:hover { transform: none; border-color: var(--border); } .jr-summary { text-align: center; white-space: nowrap; font-weight: 700; font-size: 13px; } .jr-count.present { color: var(--green-600); } .jr-count.absent { color: var(--red-600); } .jr-count-sep { color: var(--tx-3); margin: 0 2px; } /* --------------------------------------------------------- Auth --------------------------------------------------------- */ .auth-wrap { background: var(--neo-yellow); background-image: radial-gradient(var(--border) 2px, transparent 2px); background-size: 30px 30px; } .auth-left-inner h2 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--tx-1); text-shadow: 4px 4px 0px white; } .auth-left-inner p { color: var(--tx-1); font-weight: 700; font-size: 18px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--sh-sm); } .auth-feature-icon { border: 1px solid var(--border); background: var(--surface2); color: var(--tx-1); box-shadow: var(--sh-sm); border-radius: var(--radius-lg); } .auth-feature-text { color: var(--tx-1); font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; } .auth-right { border-left: var(--border-w) solid var(--border); box-shadow: -10px 0px 0px rgba(0, 0, 0, 0.1); } .auth-logo-icon { background: var(--neo-purple); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); border-radius: var(--radius-lg); } .auth-logo-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; } /* --------------------------------------------------------- Landing page --------------------------------------------------------- */ .landing-nav { background: var(--surface); border-bottom: var(--border-w) solid var(--border); box-shadow: var(--sh-sm); } .landing-logo-icon { background: var(--neo-cyan); color: var(--tx-1); border: 1px solid var(--border); border-radius: var(--radius-lg); } .landing-logo-name { color: var(--tx-1); } .landing-nav-links a { color: var(--tx-1); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; border: 2px solid transparent; } .landing-nav-links a:hover { background: var(--neo-yellow); color: var(--tx-1); border: 1px solid var(--border); box-shadow: var(--sh-sm); } .hero { background: var(--neo-purple); background-image: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 2px, transparent 2px, transparent 10px); position: relative; z-index: 1; } .hero::before { display: none; } .hero-inner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 60px; box-shadow: var(--sh-sm); } .hero-label { background: var(--neo-cyan); color: var(--tx-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); border-radius: var(--radius-lg); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; } .hero h1 { color: var(--tx-1); text-shadow: 4px 4px 0px var(--neo-yellow); } .hero h1 span { color: var(--neo-pink); } .hero p { color: var(--tx-2); font-weight: 600; font-size: 18px; } .hero-actions .btn-primary { background: var(--neo-pink); box-shadow: var(--sh-sm); } .hero-actions .btn-outline { background: var(--surface); color: var(--tx-1); border-color: var(--border); box-shadow: var(--sh-sm); border-radius: 999px; } .features { background: var(--bg); border-top: var(--border-w) solid var(--border); } .section-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; background: var(--neo-yellow); border: 1px solid var(--border); display: inline-block; padding: 4px 10px; color: var(--tx-1); box-shadow: var(--sh-sm); } .feat-card { border-radius: var(--radius-lg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-lg); } .feat-card:hover { background: var(--neo-cyan); box-shadow: var(--sh-xl); transform: translate(-4px, -4px); } .feat-icon { width: 56px; height: 56px; background: var(--surface2); border: 1px solid var(--border); box-shadow: var(--sh-sm); display: flex; align-items: center; justify-content: center; } .feat-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; } /* Lang switcher */ .lang-switcher .lang-btn { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-sm); padding: 8px 12px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; cursor: pointer; } .lang-dropdown { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); margin-top: 8px; } .lang-option { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; border-bottom: 1px solid var(--border); } .lang-option:last-child { border-bottom: none; } .lang-option:hover { background: var(--neo-yellow); } .lang-option.active { background: var(--neo-cyan); } /* Override Auth Specific styles that were broken */ .auth-wrap { display: flex !important; min-height: 100vh !important; background-color: var(--bg) !important; align-items: stretch !important; } .auth-left { flex: 1 !important; background-color: #0f172a !important; color: #f8fafc !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 48px !important; } .auth-left-inner { max-width: 480px; } .auth-left-inner h2 { color: #ffffff !important; font-size: 40px !important; margin-bottom: 16px; } .auth-left-inner p { color: #94a3b8 !important; font-size: 18px !important; } .auth-feature { display: flex; align-items: center; margin-bottom: 24px; gap: 16px; } .auth-feature-icon { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.1) !important; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .auth-feature-text { color: #e2e8f0 !important; font-size: 15px; font-weight: 500; } .auth-right { display: flex !important; flex: 1 !important; justify-content: center !important; align-items: center !important; background-color: #ffffff !important; } .auth-form-wrap { width: 100%; max-width: 400px; } .auth-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 40px; text-decoration: none; } .auth-logo-icon { width: 36px; height: 36px; background: #0f172a; color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; } .auth-logo-name { font-size: 24px; font-weight: 700; color: #0f172a; letter-spacing: -0.5px; } .auth-heading { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 8px; letter-spacing: -1px; } .auth-subheading { font-size: 15px; color: #475569; margin-bottom: 32px; margin-top: 0px; } /* Fix missing media query for small screens */ @media(max-width: 900px) { .auth-left { display: none !important; } } /* ---- Final Auth text fixes ---- */ .auth-left-inner h2 { color: #ffffff !important; font-size: 36px !important; font-weight: 700 !important; letter-spacing: -1px !important; text-shadow: none !important; line-height: 1.15 !important; margin-bottom: 16px !important; } .auth-left-inner p { color: #94a3b8 !important; font-size: 16px !important; font-weight: 400 !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin-bottom: 32px !important; line-height: 1.6 !important; } .auth-feature-icon { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 12px !important; box-shadow: none !important; flex-shrink: 0 !important; } .auth-feature-text { color: #e2e8f0 !important; font-weight: 500 !important; font-size: 15px !important; text-shadow: none !important; } /* Auth footer */ .auth-footer { margin-top: 32px; padding: 20px 0 8px; font-size: 14px; color: #64748b; text-align: center; border-top: 1px solid #e2e8f0; } .auth-footer a { font-weight: 700; color: #0f172a; text-decoration: underline; text-underline-offset: 3px; } .auth-footer a:hover { color: #1d4ed8; } /* ---- Final Auth text fixes ---- */ .auth-left-inner h2 { color: #ffffff !important; font-size: 36px !important; font-weight: 700 !important; letter-spacing: -1px !important; text-shadow: none !important; line-height: 1.15 !important; margin-bottom: 16px !important; } .auth-left-inner p { color: #94a3b8 !important; font-size: 16px !important; font-weight: 400 !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin-bottom: 32px !important; line-height: 1.6 !important; } .auth-feature-icon { background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 12px !important; box-shadow: none !important; flex-shrink: 0 !important; } .auth-feature-text { color: #e2e8f0 !important; font-weight: 500 !important; font-size: 15px !important; text-shadow: none !important; } /* ========================================================= Profile menu (topbar) + Account pages ========================================================= */ /* ---- Topbar profile dropdown ---- */ .profile-menu { position: relative; } .profile-trigger { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 3px 10px 3px 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; cursor: pointer; transition: var(--transition); } .profile-trigger:hover { border-color: var(--border2); } .profile-trigger-avatar { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; font: 700 13px/1 "Plus Jakarta Sans", sans-serif; overflow: hidden; } .profile-trigger-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-trigger-caret { color: var(--tx-3); font-size: 11px; } .profile-dropdown { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 268px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-lg); overflow: hidden; animation: dd-in 0.14s ease; } @keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .profile-dropdown-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface2); } .profile-dropdown-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-500); color: #fff; font: 700 16px/1 "Plus Jakarta Sans", sans-serif; overflow: hidden; } .profile-dropdown-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-dropdown-id { min-width: 0; } .profile-dropdown-name { font-weight: 700; font-size: 14px; color: var(--tx-1); } .profile-dropdown-role { font-size: 12px; color: var(--brand-600); font-weight: 600; } .profile-dropdown-org { font-size: 12px; color: var(--tx-3); } .profile-dropdown-items, .profile-dropdown-foot { padding: 6px; } .profile-dropdown-foot { border-top: 1px solid var(--border); } .profile-dropdown-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius); color: var(--tx-2); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background 0.12s, color 0.12s; } .profile-dropdown-link:hover { background: var(--surface2); color: var(--tx-1); } .profile-dropdown-link.is-danger { color: var(--red); } .profile-dropdown-link.is-danger:hover { background: var(--red-bg); } /* ---- Account layout (left sub-nav + content) ---- */ .account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; } .account-nav { padding: 8px; } .account-nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius); color: var(--tx-2); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.12s, color 0.12s; } .account-nav-link:hover { background: var(--surface2); color: var(--tx-1); } .account-nav-link.active { background: var(--brand-50); color: var(--brand-600); font-weight: 600; } .account-nav-icon { font-size: 16px; } .account-identity { display: flex; gap: 20px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; } .account-avatar-lg { width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-500); color: #fff; font: 700 28px/1 "Plus Jakarta Sans", sans-serif; overflow: hidden; } .account-avatar-lg img { width: 100%; height: 100%; object-fit: cover; } .account-identity-fields { flex: 1; min-width: 220px; } .account-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 22px 0; padding: 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); } .account-fact { display: flex; flex-direction: column; gap: 3px; } .account-fact-label { font-size: 11.5px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .4px; } .account-fact-value { font-size: 14px; color: var(--tx-1); font-weight: 600; } .form-actions { margin-top: 22px; display: flex; gap: 10px; } /* ---- Toggle switch (notifications) ---- */ .form-switch { position: relative; display: inline-flex; cursor: pointer; } .form-switch-input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; } .form-switch-track { width: 44px; height: 24px; border-radius: 999px; background: var(--surface3); transition: background 0.18s; position: relative; display: inline-block; } .form-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.18s; box-shadow: var(--sh-sm); } .form-switch-input:checked + .form-switch-track { background: var(--brand-500); } .form-switch-input:checked + .form-switch-track::after { transform: translateX(20px); } .form-switch-input:focus-visible + .form-switch-track { outline: 2px solid var(--brand-600); outline-offset: 2px; } .notif-table { width: 100%; } .notif-table .notif-col { width: 92px; text-align: center; } @media (max-width: 720px) { .account-layout { grid-template-columns: 1fr; } .account-nav { display: flex; overflow-x: auto; } .account-nav-link { white-space: nowrap; } } /* ---- Attendance journal: paper-register polish ---- */ .journal-meta { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; background: var(--surface2); } .journal-meta-cell { flex: 1; min-width: 140px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); } .journal-meta-cell:last-child { border-right: 0; } .journal-meta-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--tx-3); } .journal-meta-value { font-size: 14px; font-weight: 700; color: var(--tx-1); } /* Frozen index column, sits left of the student column */ .journal-table .jr-num { position: sticky; left: 0; z-index: 1; width: 40px; min-width: 40px; text-align: center; color: var(--tx-3); font-weight: 600; font-size: 12px; background: var(--surface); } .journal-table thead .jr-num { z-index: 3; background: var(--surface2); } .journal-grid .jr-student { left: 40px; } /* Crisp full grid lines (vertical borders on every cell) */ .journal-grid th, .journal-grid td { border-right: 1px solid var(--border); } .journal-grid thead th { border-top: 1px solid var(--border); } .journal-grid tbody tr:hover td { background: var(--surface2); } .journal-grid tbody tr:hover .jr-student, .journal-grid tbody tr:hover .jr-num { background: var(--surface2); } /* ---- Parent: consolidated child overview ---- */ .parent-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .parent-jump-link { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--tx-2); background: var(--surface2); border: 1px solid var(--border); text-decoration: none; transition: var(--transition); } .parent-jump-link:hover { color: var(--brand-600); border-color: var(--brand-500); } .parent-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .attendance-mini { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .progress-track { background: var(--surface3); border-radius: 999px; height: 8px; overflow: hidden; } .progress-fill { height: 100%; background: var(--brand-500); border-radius: 999px; } @media (max-width: 800px) { .parent-cols { grid-template-columns: 1fr; } } /* Anchor jump offset so section headers clear the sticky topbar */ [id="courses"], [id="upcoming"], [id="attendance"], [id="assessments"], [id="finance"] { scroll-margin-top: 88px; } /* ---- Profile read-only view (mock-up layout) ---- */ .profile-view { display: flex; gap: 28px; flex-wrap: wrap; } .profile-view-aside { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; width: 140px; } .profile-view-fields { flex: 1; min-width: 260px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; } .info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); } .info-label { font-size: 13px; color: var(--tx-3); } .info-value { font-size: 14px; color: var(--tx-1); font-weight: 600; text-align: right; } @media (max-width: 640px) { .profile-view-fields { grid-template-columns: 1fr; } } /* ---- Topbar icon buttons (bell, messages) ---- */ .topbar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); color: var(--tx-2); text-decoration: none; transition: var(--transition); } .topbar-icon:hover { color: var(--brand-500); border-color: var(--brand-500); } .topbar-icon svg { width: 18px; height: 18px; } /* ---- Dashboard hero banner (navy, matches design) ---- */ .dash-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 28px 32px; background: #0f172a; color: #fff; margin-bottom: 22px; } .dash-hero-inner { position: relative; } .dash-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .dash-hero-title { margin: 8px 0 6px; font-weight: 800; font-size: 28px; letter-spacing: -.03em; color: #fff; } .dash-hero-sub { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .7); } .dash-hero-blob { position: absolute; right: -30px; top: -50px; width: 200px; height: 200px; border-radius: 50%; } .dash-hero-blob-teal { background: radial-gradient(circle, rgba(20, 184, 166, .4), transparent 70%); } .dash-hero-blob-violet { background: radial-gradient(circle, rgba(124, 58, 237, .45), transparent 70%); } /* ---- Course detail hero (design's coloured banner) ---- */ .course-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 26px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; box-shadow: var(--sh-sm); } .course-hero-inner { position: relative; } .course-hero-blob { position: absolute; right: -30px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .13); } .course-hero-title { margin: 0; font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: #fff; } .course-hero-desc { margin: 6px 0 0; opacity: .9; font-size: 14px; line-height: 1.6; } .course-hero-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 18px; } .course-hero-meta > div { display: flex; flex-direction: column; gap: 3px; } .course-hero-meta span { opacity: .7; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .course-hero-meta strong { font-weight: 700; font-size: 13.5px; } /* ───────────────────────────────────────────────────────────── Billing / student-centric enrollment ───────────────────────────────────────────────────────────── */ .enroll-card { transition: box-shadow .15s, border-color .15s; } .enroll-card[open] { border-color: var(--brand-100); box-shadow: var(--sh); } .enroll-card > summary { list-style: none; cursor: pointer; } .enroll-card > summary::-webkit-details-marker { display: none; } .enroll-chevron { transition: transform .2s ease; color: var(--tx-3); display: inline-flex; } .enroll-card[open] > summary .enroll-chevron { transform: rotate(180deg); } .enroll-sub { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; background: var(--surface2); } /* Quick-action rows (right rail) */ .qa-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 9px; text-decoration: none; color: var(--tx-1); font-size: 13.5px; font-weight: 500; transition: background .15s; } .qa-row:hover { background: var(--surface2); } .qa-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--blue-50); color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .qa-arrow { margin-left: auto; color: var(--tx-3); } /* CSS donut (payment-status breakdown) */ .donut { width: 148px; height: 148px; border-radius: 50%; margin: 4px auto 0; position: relative; } .donut::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: var(--surface); } .donut-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .donut-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .donut-legend-row .val { margin-left: auto; color: var(--tx-2); font-weight: 600; } /* Payment-status pill (green/amber/red/blue/gray per spec) */ .pay-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .pay-pill.paid { background: var(--green-bg); color: var(--green-600); } .pay-pill.pending { background: var(--amber-bg); color: var(--amber); } .pay-pill.overdue { background: var(--red-bg); color: var(--red-600); } .pay-pill.partial { background: var(--purple-bg); color: var(--purple-600); } .pay-pill.prepaid { background: var(--blue-50); color: var(--blue-600); } .pay-pill.none { background: var(--surface3); color: var(--tx-3); } /* Payment journal grid cells (student × month) */ .pj-cell { min-width: 92px; text-align: center; padding: 6px 8px; border-radius: 9px; font-size: 12.5px; line-height: 1.35; } .pj-cell .pj-amt { font-weight: 700; } .pj-cell .pj-lbl { font-size: 10.5px; font-weight: 600; } .pj-cell.paid { background: var(--green-bg); color: var(--green-600); } .pj-cell.partial { background: var(--amber-bg); color: var(--amber); } .pj-cell.overdue { background: var(--red-bg); color: var(--red-600); } .pj-cell.pending { background: var(--surface3); color: var(--tx-3); } .pj-cell.prepaid { background: var(--blue-50); color: var(--blue-600); } .pj-cell.empty { color: var(--tx-3); } .pj-table th.pj-month { text-align: center; min-width: 92px; } .pj-subrow td { background: var(--surface2); font-size: 12.5px; } /* ───────────────────────────────────────────────────────────── Lesson content nav (student lesson detail — "Kurs Məzmunu") ───────────────────────────────────────────────────────────── */ .lsn-nav { max-height: 640px; overflow-y: auto; } .lsn-nav-mod { padding: 11px 16px; background: var(--surface2); border-top: 1px solid var(--border); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tx-3); position: sticky; top: 0; z-index: 1; } .lsn-nav-mod:first-child { border-top: none; } .lsn-nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--tx-1); font-size: 13px; line-height: 1.4; transition: background 0.14s; } .lsn-nav-item:hover { background: var(--surface2); } .lsn-nav-item.active { background: var(--blue-50); color: var(--brand-600); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-600); } .lsn-nav-ico { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; background: var(--surface3); color: var(--tx-3); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; } .lsn-nav-item.active .lsn-nav-ico { background: var(--brand-600); color: #fff; } .lsn-nav-item.done .lsn-nav-ico { background: var(--green-bg); color: var(--green-600); } .lsn-nav-title { flex: 1; min-width: 0; } /* ───────────────────────────────────────────────────────────── Help & Support (tickets) ───────────────────────────────────────────────────────────── */ .tk-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .tk-prio-high { background: var(--red-bg); color: var(--red-600); } .tk-prio-medium { background: var(--amber-bg); color: var(--amber); } .tk-prio-low { background: var(--green-bg); color: var(--green-600); } .tk-st-new { background: var(--blue-50); color: var(--blue-600); } .tk-st-in_progress { background: var(--purple-bg); color: var(--purple-600); } .tk-st-answered { background: var(--green-bg); color: var(--green-600); } .tk-st-closed { background: var(--surface3); color: var(--tx-3); } /* Activity timeline */ .tk-timeline { position: relative; } .tk-tl-item { position: relative; padding: 0 0 18px 24px; } .tk-tl-item::before { content: ""; position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-600); box-shadow: 0 0 0 3px var(--blue-50); } .tk-tl-item::after { content: ""; position: absolute; left: 4px; top: 15px; bottom: -3px; width: 2px; background: var(--border); } .tk-tl-item:last-child::after { display: none; } /* Conversation bubbles */ .tk-msg { display: flex; gap: 12px; margin-bottom: 18px; } .tk-bubble { flex: 1; min-width: 0; border-radius: 12px; padding: 12px 15px; font-size: 14px; line-height: 1.55; background: var(--surface2); border: 1px solid var(--border); } .tk-msg.mine .tk-bubble { background: var(--blue-50); border-color: var(--brand-100); } .tk-msg.support .tk-bubble { background: var(--green-bg); border-color: transparent; } .tk-info-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--border); } .tk-info-row:first-child { border-top: none; } /* ───────────────────────────────────────────────────────────── Forum ───────────────────────────────────────────────────────────── */ .fk-menu { position: relative; display: inline-flex; } .fk-menu > summary { list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--tx-3); transition: background .15s, color .15s; } .fk-menu > summary::-webkit-details-marker { display: none; } .fk-menu > summary:hover { background: var(--surface2); color: var(--tx-1); } .fk-menu-pop { position: absolute; right: 0; top: 34px; z-index: 20; min-width: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--sh); padding: 6px; } .fk-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 8px; border: none; background: transparent; cursor: pointer; font-size: 13.5px; color: var(--tx-1); text-align: left; } .fk-menu-item:hover { background: var(--surface2); } .fk-menu-item.danger { color: var(--red-600); } .forum-card { transition: box-shadow .15s, border-color .15s; } .forum-card:hover { border-color: var(--brand-100); box-shadow: var(--sh); } .forum-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx-2); } .forum-composer { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .forum-composer textarea { width: 100%; border: none; background: transparent; resize: none; padding: 12px 14px; font-size: 14px; color: var(--tx-1); outline: none; min-height: 52px; } .forum-composer-bar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface2); } /* ───────────────────────────────────────────────────────────── Quiz question builder (question_form redesign) ───────────────────────────────────────────────────────────── */ .qb-layout { display: grid; grid-template-columns: 1fr 168px; gap: 20px; align-items: start; } .qb-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; } .qb-card { overflow: visible; } .qb-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .qb-grip { color: var(--tx-3); cursor: grab; display: inline-flex; flex-shrink: 0; } .qb-num { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--brand-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .qb-num.sm { width: 26px; height: 26px; font-size: 12.5px; border-radius: 7px; } .qb-head-tools { display: flex; gap: 6px; margin-left: 4px; } .qb-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--tx-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .qb-icon-btn:hover { background: var(--blue-50); color: var(--brand-600); } .qb-type { margin-left: auto; display: flex; align-items: center; gap: 8px; } .qb-type-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tx-3); font-weight: 600; } .qb-type .form-select { width: auto; min-width: 150px; } .qb-chevron { color: var(--tx-3); display: inline-flex; } .qb-body { display: grid; grid-template-columns: 1fr 210px; gap: 22px; padding: 18px; } .qb-body-main { min-width: 0; } .qb-body-side { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); align-self: start; } .qb-attach { display: none; } .qb-attach.open { display: block; } .qb-options { display: flex; flex-direction: column; gap: 8px; } .qb-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); } .qb-option.is-correct { border-color: var(--green-600); background: var(--green-bg); } .qb-radio-form { margin: 0; display: inline-flex; flex-shrink: 0; } .qb-radio { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; padding: 0; } .qb-radio.on { border-color: var(--green-600); background: var(--green-600); } .qb-option-text { flex: 1; min-width: 0; font-size: 14px; color: var(--tx-1); } .qb-option-del { margin: 0; } .qb-x { width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: var(--tx-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .qb-x:hover { background: var(--red-bg); color: var(--red-600); } .qb-add-option { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .qb-add-option textarea { flex: 1; min-width: 160px; min-height: 40px; resize: none; } .qb-add-option input[type="number"] { width: 64px; } .qb-add-correct { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; color: var(--tx-2); } .qb-stepper { display: flex; align-items: center; gap: 8px; } .qb-stepper .form-input { width: 90px; } .qb-stepper-suffix { font-size: 13px; color: var(--tx-3); } .qb-toggle-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--tx-1); } .qb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; } .qb-foot-danger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; color: var(--red-600); font-weight: 600; font-size: 13.5px; padding: 6px 4px; } .qb-foot-right { display: flex; gap: 10px; } .qb-collapsed { display: flex; align-items: center; gap: 12px; padding: 14px 18px; text-decoration: none; color: var(--tx-1); transition: box-shadow .15s, border-color .15s; } .qb-collapsed:hover { border-color: var(--brand-100); box-shadow: var(--sh); } .qb-collapsed-text { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qb-add-question { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: var(--radius-lg); border: 1.5px dashed var(--border); background: var(--surface); color: var(--brand-600); font-weight: 700; text-decoration: none; transition: background .15s, border-color .15s; } .qb-add-question:hover { background: var(--blue-50); border-color: var(--brand-500); } /* ── Spacing utilities ────────────────────────────────────────────────────── These were used across ~12 templates (e.g. `card mt-4`) but never defined, so stacked cards rendered flush against each other. */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 12px !important; } .mt-4 { margin-top: 16px !important; } .mt-5 { margin-top: 20px !important; } .mt-6 { margin-top: 24px !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 12px !important; } .mb-4 { margin-bottom: 16px !important; } .mb-5 { margin-bottom: 20px !important; } .mb-6 { margin-bottom: 24px !important; } /* NOTE: do NOT add a blanket `.card + .card { margin-top }` rule here. Cards are very often laid out side by side in a grid (.card-grid, .tile-card, …), and an adjacent-sibling margin pushes every card after the first one *downwards*, so the row stops being level. Use the .mt-* utilities for genuinely stacked cards. */ /* ── "Əməliyyatlar ▾" dropdown (payment journal) ─────────────────────────── */ .ops-menu { position: relative; display: inline-block; } .ops-menu > summary { list-style: none; cursor: pointer; user-select: none; } .ops-menu > summary::-webkit-details-marker { display: none; } .ops-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-lg); display: flex; flex-direction: column; gap: 2px; } .ops-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--tx-1); text-decoration: none; white-space: nowrap; } .ops-item:hover { background: var(--surface2); } .ops-danger { color: var(--red-600); } .ops-danger:hover { background: var(--red-bg, var(--surface2)); } .ops-ico { width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface3); color: var(--tx-2); font-size: 13px; } /* ── Per-purchase payment schedule grid (Ödəniş cədvəli) ────────────────── */ .pj-sched { width: 100%; } .pj-sched th, .pj-sched td { text-align: center; white-space: nowrap; padding: 10px 12px; } .pj-sched thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--tx-3); background: var(--surface2); border-bottom: 1px solid var(--border); } .pj-sched thead th.pjs-overdue { color: var(--red-600); background: rgba(220, 38, 38, 0.07); } .pj-sched .pjs-rowlabel { text-align: left; font-weight: 700; font-size: 13px; color: var(--tx-2); background: var(--surface2); position: sticky; left: 0; } .pj-sched .pjs-total { font-weight: 800; background: var(--blue-50); color: var(--brand-700); } .pj-sched tfoot td { border-top: 2px solid var(--border); } /* ── Tarif təyin et — 3-step wizard ─────────────────────────────────────── */ .pa-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .pa-step { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--tx-3); background: var(--surface2); border: 1px solid var(--border); } .pa-step i { width: 18px; height: 18px; border-radius: 50%; font-style: normal; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--surface3); color: var(--tx-3); } .pa-step.active { color: var(--brand-700); background: var(--blue-50); border-color: var(--brand-500); } .pa-step.active i { background: var(--brand-600); color: #fff; } .pa-sec { margin-bottom: 18px; } .pa-sec-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--tx-1); margin-bottom: 10px; } .pa-sec-title i { width: 20px; height: 20px; border-radius: 50%; font-style: normal; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--brand-600); color: #fff; } /* Live answer-format preview (reacts to the selected question type) */ .qb-answer-preview { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-lg); border: 1.5px dashed var(--border); background: var(--surface2); } .qbp-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); } .qbp-opt-txt { font-size: 13.5px; color: var(--tx-2); } .qbp-radio, .qbp-check { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--brand-500); background: var(--surface); } .qbp-radio { border-radius: 50%; } .qbp-check { border-radius: 5px; } .qbp-input, .qbp-textarea { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--tx-3); font-size: 13.5px; } .qbp-textarea { min-height: 66px; } .qbp-audio { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); } .qbp-play { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--brand-600); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; } .qbp-wave { flex: 1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-500) 35%, var(--border) 35%); } .qbp-time { font-size: 12px; color: var(--tx-3); font-variant-numeric: tabular-nums; } .qb-toolbar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh); } .qb-tool { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--radius); background: transparent; border: none; cursor: pointer; color: var(--tx-2); font-size: 11.5px; font-weight: 600; text-decoration: none; text-align: center; } .qb-tool:hover { background: var(--surface2); color: var(--tx-1); } .qb-tool-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--surface2); color: var(--tx-2); display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .qb-layout { grid-template-columns: 1fr; } .qb-body { grid-template-columns: 1fr; } .qb-toolbar { position: static; flex-direction: row; flex-wrap: wrap; } .qb-tool { flex: 1; min-width: 90px; } } /* ========================================================================= Responsive layer ------------------------------------------------------------------------- The shell was desktop-only: .main-content kept a 280px margin at every width and the ☰ button was hidden with an inline style, so on a phone the page simply started off-screen. Below 900px the sidebar becomes a drawer. Layout helpers used by the page templates (a page with an aside used to inline `grid-template-columns:1fr 320px`, which no media query can undo — the width now rides on --split-aside so it can collapse here). ========================================================================= */ .page-split { display: grid; grid-template-columns: 1fr var(--split-aside, 320px); gap: 20px; align-items: start; } .page-split-left { display: grid; grid-template-columns: var(--split-aside, 280px) 1fr; gap: 20px; align-items: start; } .page-split-fr { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: stretch; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Tablet and below: any aside drops under the main column. */ @media (max-width: 1024px) { .page-split, .page-split-left, .page-split-fr, .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 900px) { /* ---- Shell: sidebar becomes an off-canvas drawer ---- */ .sidebar { transform: translateX(-100%); transition: transform 0.22s ease; width: min(var(--sidebar-w), 86vw); } .sidebar.open { transform: translateX(0); box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.45); } .main-content, /* The desktop rail (min-width:768px) still matches in the 768–900px band and would leave a 68px gutter next to an off-canvas drawer. */ html.sidebar-rail .main-content { margin-left: 0; min-width: 0; } html.sidebar-rail .sidebar, html.sidebar-rail .sidebar:hover { width: min(var(--sidebar-w), 86vw); } /* The drawer is a full menu, never an icon rail: undo the rail's text collapsing (it hides labels until :hover, which a touch screen has not). */ html.sidebar-rail .sidebar:not(:hover) .sidebar-section-label, html.sidebar-rail .sidebar:not(:hover) .sidebar-logo > div:nth-child(2), html.sidebar-rail .sidebar:not(:hover) .sidebar-user > div:nth-child(2), html.sidebar-rail .sidebar:not(:hover) .sidebar-user > a { opacity: 1; visibility: visible; pointer-events: auto; width: auto; height: auto; overflow: visible; margin: revert; padding: revert; } html.sidebar-rail .sidebar:not(:hover) .sidebar-link { justify-content: flex-start; gap: 12px; font-size: 14px; padding-left: 22px; padding-right: 22px; margin-left: 0; margin-right: 0; } html.sidebar-rail .sidebar:not(:hover) .sidebar-badge { display: inline-flex; } html.sidebar-rail .sidebar:not(:hover) .sidebar-logo { justify-content: flex-start; } .sidebar-backdrop { position: fixed; inset: 0; z-index: 99; background: rgba(2, 6, 23, 0.5); } #sidebar-toggle { display: inline-flex; } .sidebar-pin-btn { display: none; } /* ---- Topbar: wraps instead of squeezing ---- */ .topbar { height: auto; min-height: var(--topbar-h); padding: 10px 14px; flex-wrap: wrap; row-gap: 8px; } .topbar-head { flex: 1 1 auto; min-width: 0; } .topbar-title { font-size: 18px; } .topbar-actions { flex-wrap: wrap; gap: 8px; } /* ---- Page frame ---- */ .page-content { padding: 20px 14px; gap: 20px; min-width: 0; } .page-header { padding-bottom: 16px; margin-bottom: 20px; } .page-header-left h1 { font-size: 24px; } /* ---- Forms, cards, tables ---- */ .form-row { grid-template-columns: 1fr; gap: 0; } .card-header { padding: 14px 16px; } .card-body, .card-footer { padding: 16px; } .stat-card { padding: 16px 18px; column-gap: 14px; } /* A table is the one thing that genuinely cannot fit: let it scroll inside its own box rather than stretching the page. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 640px) { .page-content { padding: 16px 12px; } .btn { padding: 8px 14px; } .card-grid { grid-template-columns: 1fr; } /* Toolbars (search + filters + submit) stack instead of overflowing. */ .filters, .form-actions { flex-direction: column; align-items: stretch; } .filters .form-input, .filters .form-select, .filters .btn { width: 100%; } } /* Desktop only. This has to be a media query, not a bare rule: an unscoped `display:none` sits later in the file than the drawer's `inline-flex` and, at equal specificity, would win at every width — hiding the ☰ on phones too. */ @media (min-width: 901px) { #sidebar-toggle { display: none; } } /* Wide children scroll inside their own box (.table-wrap), so the shell itself never needs a clip — which would only hide overflow bugs and, on html/body, break the sticky topbar. */ .app-shell, .main-content, .page-content { min-width: 0; } /* Grids may not force a track wider than the screen. */ .card-grid, .course-grid, .stat-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); } .form-actions { flex-wrap: wrap; } /* ------------------------------------------------------------------------- React islands Tailwind's preflight is disabled project-wide (it would flatten the legacy design system), so a bare