/* ========================================================= app.css — Modern SaaS UI (no framework), Bootstrap-friendly Author: you Tips: Add to force dark mode ========================================================= */ /* --------- CSS Variables (Theme) --------- */ :root{ --bg: #ffffff; --bg-soft: #f7f8fa; --bg-elev: #ffffff; --text: #0f172a; --muted: #6b7280; --border: #e5e7eb; --primary: #3b82f6; --primary-600:#2563eb; --primary-700:#1d4ed8; --success:#10b981; --warning:#f59e0b; --danger: #ef4444; --info: #06b6d4; --ring: rgba(59,130,246,.35); --shadow: 0 8px 24px rgba(15,23,42,0.06); --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif; --container: 1100px; } @media (prefers-color-scheme: dark){ :root{ --bg:#0b1220; --bg-soft:#0f172a; --bg-elev:#0f172a; --text:#e5e7eb; --muted:#9ca3af; --border:#1f2a44; --shadow: 0 10px 30px rgba(0,0,0,0.35); --ring: rgba(59,130,246,.5); } } /* Force dark theme via class (overrides prefers-color-scheme) */ .theme-dark{ --bg:#0b1220; --bg-soft:#0f172a; --bg-elev:#0f172a; --text:#e5e7eb; --muted:#9ca3af; --border:#1f2a44; --shadow: 0 10px 30px rgba(0,0,0,0.35); --ring: rgba(59,130,246,.5); } /* --------- Reset & Base --------- */ *{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{max-width:100%; display:block} a{color:var(--primary); text-decoration:none} a:hover{color:var(--primary-600); text-decoration:underline} hr{border:none; border-top:1px solid var(--border); margin:24px 0} /* Container */ .container{max-width:var(--container); margin:0 auto; padding:0 16px} /* --------- Utilities (spacing / flex / grid / text) --------- */ .mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px} .mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px} .p-0{padding:0}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-6{padding:24px}.p-8{padding:32px} .px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-6{padding-left:24px;padding-right:24px} .py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px} .gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px} .flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center} .grid{display:grid}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1024px){ .grid-3{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} } .text-muted{color:var(--muted)} .text-center{text-align:center} .hidden{display:none!important} .rounded{border-radius:var(--radius)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xs{border-radius:var(--radius-xs)} .shadow{box-shadow:var(--shadow)} .border{border:1px solid var(--border)} .w-full{width:100%} .max-w-sm{max-width:420px}.max-w-md{max-width:680px}.max-w-lg{max-width:980px} /* --------- Headings --------- */ h1{font-size:clamp(28px,3.2vw,40px);line-height:1.2;margin:0 0 12px} h2{font-size:clamp(22px,2.4vw,28px);line-height:1.25;margin:0 0 10px} h3{font-size:clamp(18px,2vw,22px);line-height:1.3;margin:0 0 8px} .lead{font-size:1.125rem;color:var(--muted)} /* --------- Card --------- */ .card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden } .card-body{padding:16px} .card-header{padding:14px 16px; border-bottom:1px solid var(--border); font-weight:600} .card-footer{padding:12px 16px; border-top:1px solid var(--border); background:var(--bg-soft)} /* --------- Buttons --------- */ .btn{ --btn-bg: var(--bg-elev); --btn-color: var(--text); --btn-bd: var(--border); display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-color); padding:10px 14px; border-radius:12px; font-weight:600; line-height:1; transition:all .18s ease; cursor:pointer; text-decoration:none; } .btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)} .btn:active{transform:translateY(0)} .btn:focus{outline:none; box-shadow:0 0 0 4px var(--ring)} .btn-primary{--btn-bg:var(--primary);--btn-color:#fff;--btn-bd:var(--primary)} .btn-primary:hover{background:var(--primary-600);border-color:var(--primary-600)} .btn-outline{--btn-bg:transparent;--btn-color:var(--text);--btn-bd:var(--border)} .btn-success{--btn-bg:var(--success);--btn-color:#fff;--btn-bd:var(--success)} .btn-warning{--btn-bg:var(--warning);--btn-color:#111827;--btn-bd:var(--warning)} .btn-danger{--btn-bg:var(--danger);--btn-color:#fff;--btn-bd:var(--danger)} .btn-sm{padding:8px 10px;border-radius:10px;font-size:.9rem} .btn-lg{padding:12px 18px;border-radius:14px;font-size:1.05rem} /* Icon button (square) */ .icon-btn{width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--bg-elev)} .icon-btn:hover{box-shadow:var(--shadow)} /* --------- Forms --------- */ .input, input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],textarea,select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--bg-elev); color:var(--text); transition:border-color .15s ease, box-shadow .15s ease, background .2s; } textarea{min-height:120px;resize:vertical} .input:focus, input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--ring) } .input.is-invalid, .is-invalid{border-color:var(--danger)} .input-help{font-size:.85rem;color:var(--muted);margin-top:6px} /* Checkbox & Radio pretty */ .control{display:flex;align-items:center;gap:10px} .control input[type=checkbox], .control input[type=radio]{width:18px;height:18px;accent-color:var(--primary)} /* Input group */ .input-group{display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg-elev)} .input-group > .addon{padding:10px 12px;color:var(--muted);white-space:nowrap;border-right:1px solid var(--border);background:var(--bg-soft)} .input-group > .input{border:none;border-radius:0} /* Select styled */ .select{position:relative} .select:after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none} /* --------- Navbar & Sidebar --------- */ .navbar{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--border); } .navbar .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0} .navbar .brand{font-weight:800;letter-spacing:.2px} .navbar .nav{display:flex;gap:14px;align-items:center} .navbar .nav a{color:var(--muted);padding:8px 10px;border-radius:10px} .navbar .nav a:hover{background:var(--bg-soft);color:var(--text)} .layout{ display:grid; grid-template-columns:260px 1fr; gap:24px; } @media (max-width:1024px){ .layout{grid-template-columns:1fr} } .sidebar{ position:sticky; top:70px; height:calc(100vh - 90px); border:1px solid var(--border); border-radius:var(--radius); padding:12px; background:var(--bg-elev); } .sidebar .group{font-size:.82rem; color:var(--muted); margin:10px 8px} .sidebar a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:var(--text); } .sidebar a:hover{background:var(--bg-soft)} .sidebar a.active{background:color-mix(in oklab, var(--primary) 10%, transparent); color:var(--primary); font-weight:700} /* --------- Tables --------- */ .table{width:100%;border-collapse:separate;border-spacing:0 10px} .table thead th{font-size:.85rem;color:var(--muted);font-weight:700;padding:0 12px 6px;text-transform:uppercase} .table tbody tr{background:var(--bg-elev);box-shadow:var(--shadow)} .table tbody td{padding:14px 12px;border-top:1px solid var(--border)} .table tbody tr:first-child td{border-top:1px solid var(--border)} .table .td-actions{display:flex;gap:8px;justify-content:flex-end} /* --------- Badges --------- */ .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.78rem} .badge-primary{background:color-mix(in oklab, var(--primary) 18%, transparent); color:var(--primary)} .badge-success{background:color-mix(in oklab, var(--success) 18%, transparent); color:var(--success)} .badge-warning{background:color-mix(in oklab, var(--warning) 22%, transparent); color:#78350f} .badge-danger{background:color-mix(in oklab, var(--danger) 18%, transparent); color:#7f1d1d} .badge-muted{background:var(--bg-soft); color:var(--muted)} /* --------- Alerts --------- */ .alert{ border:1px solid var(--border); background:var(--bg-elev); padding:12px 14px; border-radius:12px; } .alert-success{border-color:color-mix(in oklab, var(--success) 35%, var(--border)); background:color-mix(in oklab, var(--success) 8%, var(--bg))} .alert-danger{border-color:color-mix(in oklab, var(--danger) 35%, var(--border)); background:color-mix(in oklab, var(--danger) 8%, var(--bg))} .alert-warning{border-color:color-mix(in oklab, var(--warning) 35%, var(--border)); background:color-mix(in oklab, var(--warning) 12%, var(--bg))} /* --------- Tabs --------- */ .tabs{display:flex;gap:8px;border-bottom:1px solid var(--border)} .tab{padding:10px 12px;border-radius:10px 10px 0 0;border:1px solid transparent} .tab[aria-selected="true"]{border-color:var(--border);border-bottom-color:transparent;background:var(--bg-elev);font-weight:700} /* --------- Progress --------- */ .progress{height:10px;background:var(--bg-soft);border-radius:999px;overflow:hidden} .progress > .bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-600));border-radius:999px;width:0;transition:width .3s ease} /* --------- Tooltip (simple) --------- */ .tooltip{position:relative} .tooltip:hover::after{ content:attr(data-tip); position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 6px); white-space:nowrap; background:#111827; color:#fff; padding:6px 8px; border-radius:8px; font-size:.8rem; } /* --------- Modal --------- */ .modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(2px);display:none} .modal{position:fixed;inset:0;display:none;place-items:center;padding:20px} .modal .panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:16px;max-width:600px;width:100%;box-shadow:var(--shadow)} .modal.show, .modal-backdrop.show{display:grid} /* --------- Drawer --------- */ .drawer{position:fixed; inset:0; display:none} .drawer .scrim{position:absolute; inset:0; background:rgba(2,6,23,.55)} .drawer .panel{position:absolute; top:0; right:0; width:min(92vw,420px); height:100%; background:var(--bg-elev); border-left:1px solid var(--border); box-shadow:var(--shadow); padding:16px} .drawer.show{display:block} /* --------- Toast --------- */ .toast-wrap{position:fixed; right:20px; bottom:20px; display:grid; gap:10px; z-index:60} .toast{background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow)} /* --------- Skeleton & Spinner --------- */ .skeleton{position:relative; overflow:hidden; background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 37%,#e5e7eb 63%); background-size:400% 100%; animation:shimmer 1.4s infinite} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .spinner{width:22px;height:22px;border-radius:50%;border:3px solid color-mix(in oklab,var(--primary) 20%, transparent);border-top-color:var(--primary);animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* --------- Breadcrumb --------- */ .breadcrumb{display:flex;gap:8px;color:var(--muted);font-size:.9rem} .breadcrumb a{color:inherit} .breadcrumb .sep{opacity:.5} /* --------- Tag/Chips --------- */ .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elev)} /* --------- Login / Auth panel --------- */ .auth-card{max-width:440px;margin:40px auto;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);box-shadow:var(--shadow)} /* --------- Payment status color --------- */ .status{display:inline-flex;align-items:center;gap:8px} .dot{width:10px;height:10px;border-radius:999px;display:inline-block} .dot.paid{background:var(--success)} .dot.pending{background:var(--warning)} .dot.failed{background:var(--danger)} /* --------- Attendance QR area --------- */ .qr-box{display:grid;place-items:center;border:1px dashed var(--border);padding:16px;border-radius:16px;background:var(--bg-soft)} .qr-hint{font-size:.9rem;color:var(--muted);margin-top:8px} /* --------- Certificate Print --------- */ @media print{ body{background:#fff;color:#000} .no-print{display:none!important} .certificate-page{width:210mm;height:297mm;margin:0 auto;padding:20mm; border:2px solid #000; background:#fff} .certificate-title{font-size:28pt;text-align:center;margin-bottom:12mm} .certificate-meta{margin-top:10mm;font-size:12pt} .qr-print{position:absolute;right:20mm;bottom:20mm;width:28mm;height:28mm} } /* --------- Animations helpers --------- */ .fade-in{animation:fade-in .22s ease both} @keyframes fade-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}} .scale-in{animation:scale-in .18s ease both} @keyframes scale-in{from{opacity:.5; transform:scale(.98)} to{opacity:1; transform:scale(1)}} /* --------- Sections / Hero --------- */ .hero{ border:1px solid var(--border); border-radius:20px; padding:30px; background:linear-gradient(180deg, color-mix(in oklab, var(--primary) 8%, transparent), transparent 40%), var(--bg-elev); } .hero h1{margin-bottom:6px} .hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} /* --------- Footer --------- */ .footer{border-top:1px solid var(--border);color:var(--muted);padding:24px 0;margin-top:32px} /* --------- Helper classes for Bootstrap mix --------- */ /* Make Bootstrap btn look like ours if used together */ .btn.btn-primary{background:var(--primary);border-color:var(--primary)} .btn.btn-outline-secondary{--btn-bd:var(--border)} .form-control{border-radius:12px;border-color:var(--border);background:var(--bg-elev);color:var(--text)} .form-control:focus{box-shadow:0 0 0 4px var(--ring);border-color:var(--primary)} .navbar.bg-light{background:color-mix(in oklab, var(--bg) 85%, transparent)!important;border-bottom:1px solid var(--border)} /* --------- End --------- */