/* ============================================================ EDUBLOOM ERP – MASTER STYLESHEET v1.0 edubloom.css | All Pages, All Components ============================================================ */ /* ── 1. CSS VARIABLES ──────────────────────────────────────── */ :root { /* Primary palette (Admin / Blue) */ --c-primary: #4361ee; --c-secondary: #7209b7; --c-accent: #f72585; --c-grad: linear-gradient(135deg, #4361ee, #7209b7); --c-grad-rev: linear-gradient(135deg, #7209b7, #4361ee); /* Status colors */ --c-success: #06d6a0; --c-danger: #e63946; --c-warning: #fb8500; --c-info: #4cc9f0; --c-purple: #7209b7; /* Neutral */ --c-bg: #f0f4ff; --c-white: #ffffff; --c-border: #eaeeff; --c-input-bg: #f8f9ff; --c-text: #1a1a2e; --c-muted: #888888; --c-subtle: #cccccc; /* Sidebar */ --sb-width: 250px; --sb-bg: #ffffff; --sb-border: #e8ecff; --sb-hover: rgba(67, 97, 238, 0.08); --sb-active: linear-gradient(135deg, #4361ee, #7209b7); --sb-active-shadow: rgba(67, 97, 238, 0.3); --sb-scroll-thumb: #ddd; --sb-head-grad: linear-gradient(135deg, #4361ee, #7209b7); /* Topbar */ --topbar-h: 64px; --topbar-border: #eaeeff; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 4px 20px rgba(67,97,238,0.08); --shadow-lg: 0 8px 32px rgba(67,97,238,0.14); --shadow-xl: 0 16px 48px rgba(0,0,0,0.16); /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; /* Transitions */ --t-fast: 0.15s ease; --t-normal: 0.25s ease; --t-slow: 0.4s ease; } /* Theme overrides – add class to */ body.theme-fee { --c-primary:#06d6a0; --c-secondary:#0077b6; --c-grad:linear-gradient(135deg,#06d6a0,#0077b6); --c-bg:#f0fffb; --sb-head-grad:linear-gradient(135deg,#06d6a0,#0077b6); --sb-active:linear-gradient(135deg,#06d6a0,#0077b6); --sb-active-shadow:rgba(6,214,160,0.3); --sb-hover:rgba(6,214,160,0.1); --c-border:#d0f0e8; --c-input-bg:#f0fff8; } body.theme-teacher { --c-primary:#2dc653; --c-secondary:#0077b6; --c-grad:linear-gradient(135deg,#2dc653,#0077b6); --c-bg:#f0fff8; --sb-head-grad:linear-gradient(135deg,#06d6a0,#2dc653); --sb-active:linear-gradient(135deg,#06d6a0,#2dc653); --sb-active-shadow:rgba(45,198,83,0.3); --sb-hover:rgba(45,198,83,0.1); } body.theme-hod { --c-primary:#f72585; --c-secondary:#7209b7; --c-grad:linear-gradient(135deg,#f72585,#7209b7); --c-bg:#fff5fb; --sb-head-grad:linear-gradient(135deg,#f72585,#7209b7); --sb-active:linear-gradient(135deg,#f72585,#7209b7); --sb-active-shadow:rgba(247,37,133,0.3); --sb-hover:rgba(247,37,133,0.08); } body.theme-principal { --c-primary:#7209b7; --c-secondary:#3a0ca3; --c-grad:linear-gradient(135deg,#7209b7,#3a0ca3); --c-bg:#f5f0ff; --sb-head-grad:linear-gradient(135deg,#7209b7,#3a0ca3); --sb-active:linear-gradient(135deg,#7209b7,#3a0ca3); --sb-active-shadow:rgba(114,9,183,0.3); } body.theme-mgmt { --c-primary:#4cc9f0; --c-secondary:#4361ee; --c-grad:linear-gradient(135deg,#4cc9f0,#4361ee); --c-bg:#f0faff; --sb-head-grad:linear-gradient(135deg,#4cc9f0,#4361ee); --sb-active:linear-gradient(135deg,#4cc9f0,#4361ee); --sb-active-shadow:rgba(76,201,240,0.3); } body.theme-accountant{ --c-primary:#fb8500; --c-secondary:#e63946; --c-grad:linear-gradient(135deg,#fb8500,#e63946); --c-bg:#fffdf0; --sb-head-grad:linear-gradient(135deg,#fb8500,#e63946); --sb-active:linear-gradient(135deg,#fb8500,#e63946); --sb-active-shadow:rgba(251,133,0,0.3); --sb-hover:rgba(251,133,0,0.08); } /* ── 2. RESET & BASE ────────────────────────────────────────── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:'Nunito', sans-serif; background:var(--c-bg); color:var(--c-text); display:flex; min-height:100vh; line-height:1.5; } a { text-decoration:none; color:inherit; } button { font-family:inherit; cursor:pointer; } img { max-width:100%; } /* ── 3. SIDEBAR ─────────────────────────────────────────────── */ .sidebar { width:var(--sb-width); height:100vh; overflow:hidden; background:var(--sb-bg); border-right:1px solid var(--sb-border); display:flex; flex-direction:column; position:fixed; top:0; left:0; z-index:100; box-shadow:4px 0 20px rgba(0,0,0,0.06); transition:transform var(--t-normal); } /* Head */ .sb-head { padding:12px 14px; background:var(--sb-head-grad); display:flex; align-items:center; gap:10px; flex-shrink:0; } .sb-head img { width:30px; flex-shrink:0; } .sb-brand { font-family:'Rajdhani', sans-serif; font-size:1.2rem; font-weight:700; color:#fff; letter-spacing:2px; line-height:1; } .sb-sub { font-size:0.58rem; color:rgba(255,255,255,0.7); letter-spacing:2px; text-transform:uppercase; } /* alias: .sb-head-text .brand / .sb-head-text .sub */ .sb-head-text .brand { font-family:'Rajdhani',sans-serif;font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:2px;line-height:1; } .sb-head-text .sub { font-size:0.58rem;color:rgba(255,255,255,0.7);letter-spacing:2px;text-transform:uppercase; } /* Role Badge */ .sb-role-badge { margin:8px 10px 0; background:var(--c-grad); border-radius:9px; padding:7px 11px; display:flex; align-items:center; gap:8px; flex-shrink:0; } .srb-icon { font-size:1rem; } .srb-label { font-size:0.68rem; font-weight:800; color:#fff; letter-spacing:1px; text-transform:uppercase; } .srb-sub { font-size:0.6rem; color:rgba(255,255,255,0.8); } /* Nav */ .sb-nav { flex:1; padding:6px 0 4px; overflow-y:auto; min-height:0; scrollbar-width:thin; scrollbar-color:var(--sb-scroll-thumb) transparent; } .sb-nav::-webkit-scrollbar { width:3px; } .sb-nav::-webkit-scrollbar-track { background:transparent; } .sb-nav::-webkit-scrollbar-thumb { background:var(--sb-scroll-thumb); border-radius:4px; } .nav-sec { padding:6px 14px 3px; font-size:0.58rem; font-weight:800; color:var(--c-subtle); letter-spacing:2.5px; text-transform:uppercase; margin-top:4px; } .ni { display:flex; align-items:center; gap:8px; padding:7px 13px; color:var(--c-muted); font-size:0.8rem; font-weight:700; transition:all var(--t-fast); cursor:pointer; margin:1px 7px; border-radius:9px; text-decoration:none; line-height:1.3; } .ni:hover { background:var(--sb-hover); color:var(--c-primary); } .ni.active { background:var(--sb-active); color:#fff; box-shadow:0 3px 10px var(--sb-active-shadow); } .ni .ic { font-size:0.88rem; width:17px; text-align:center; flex-shrink:0; } .ni .nb { margin-left:auto; background:#f72585; color:#fff; font-size:0.58rem; padding:1px 5px; border-radius:8px; flex-shrink:0; } .ni .ni-badge-blue { margin-left:auto; background:var(--c-primary); color:#fff; font-size:0.58rem; padding:1px 5px; border-radius:8px; flex-shrink:0; } /* User Footer */ .sb-user { margin:4px 10px 8px; background:var(--c-input-bg); border-radius:10px; padding:9px 10px; display:flex; align-items:center; gap:8px; flex-shrink:0; } .ava { width:32px; height:32px; border-radius:50%; background:var(--c-grad); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; color:#fff; flex-shrink:0; } .un { font-size:0.8rem; font-weight:800; color:#333; } .ur { font-size:0.65rem; color:#999; } /* ── 4. MAIN / LAYOUT ───────────────────────────────────────── */ .main { margin-left:var(--sb-width); flex:1; display:flex; flex-direction:column; min-width:0; } /* ── 5. TOPBAR ──────────────────────────────────────────────── */ .topbar { height:var(--topbar-h); background:var(--c-white); border-bottom:1px solid var(--topbar-border); display:flex; align-items:center; padding:0 24px; gap:12px; position:sticky; top:0; z-index:50; box-shadow:var(--shadow-sm); flex-shrink:0; } .topbar::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--c-grad); } .tb-title { font-family:'Rajdhani',sans-serif; font-size:1.4rem; font-weight:700; color:var(--c-text); } .tb-sub { color:#aaa; font-size:0.77rem; } .bc { display:flex; align-items:center; gap:6px; font-size:0.76rem; color:#bbb; flex-wrap:wrap; } .bc a { color:var(--c-primary); font-weight:700; } .bc a:hover { text-decoration:underline; } .spacer { flex:1; } .ibtn { width:38px; height:38px; border-radius:11px; background:var(--c-input-bg); border:2px solid var(--c-border); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; flex-shrink:0; transition:all var(--t-fast); position:relative; } .ibtn:hover { background:var(--c-grad); border-color:transparent; } .nd { position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:#f72585; border:2px solid #fff; animation:blink 2s infinite; } @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} } /* ── 6. CONTENT ─────────────────────────────────────────────── */ .content { padding:22px; flex:1; } /* ── 7. STAT / KPI CARDS ────────────────────────────────────── */ .stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; } .stat-grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:20px; } .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; } .sc, .kpi { border-radius:18px; padding:20px; color:#fff; position:relative; overflow:hidden; transition:transform var(--t-normal), box-shadow var(--t-normal); cursor:default; } .sc:hover, .kpi:hover { transform:translateY(-5px); box-shadow:var(--shadow-xl); } .sc::after, .kpi::after { content:''; position:absolute; top:-20px; right:-20px; width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,0.12); } .sc::before, .kpi::before { content:''; position:absolute; bottom:-25px; right:15px; width:65px; height:65px; border-radius:50%; background:rgba(255,255,255,0.07); } .sc-icon, .kpi-icon { font-size:2rem; margin-bottom:6px; position:relative; z-index:1; } .sc-val, .kpi-val { font-family:'Rajdhani',sans-serif; font-size:2.2rem; font-weight:700; line-height:1; position:relative; z-index:1; } .sc-label, .kpi-label { font-size:0.76rem; opacity:0.9; font-weight:700; margin-top:4px; position:relative; z-index:1; } .sc-change, .kpi-change { margin-top:8px; font-size:0.7rem; font-weight:800; background:rgba(255,255,255,0.2); display:inline-block; padding:3px 10px; border-radius:20px; position:relative; z-index:1; } /* Card gradient themes */ .sc1 { background:linear-gradient(135deg,#4361ee,#3a0ca3); } .sc2 { background:linear-gradient(135deg,#f72585,#7209b7); } .sc3 { background:linear-gradient(135deg,#06d6a0,#0077b6); } .sc4 { background:linear-gradient(135deg,#fb8500,#e63946); } .sc5 { background:linear-gradient(135deg,#4cc9f0,#4361ee); } .k1 { background:linear-gradient(135deg,#06d6a0,#0077b6); } .k2 { background:linear-gradient(135deg,#4361ee,#3a0ca3); } .k3 { background:linear-gradient(135deg,#e63946,#c1121f); } .k4 { background:linear-gradient(135deg,#fb8500,#e63946); } /* Extra variants */ .grad-blue { background:linear-gradient(135deg,#4361ee,#3a0ca3); } .grad-pink { background:linear-gradient(135deg,#f72585,#7209b7); } .grad-green { background:linear-gradient(135deg,#06d6a0,#0077b6); } .grad-orange { background:linear-gradient(135deg,#fb8500,#e63946); } .grad-purple { background:linear-gradient(135deg,#7209b7,#3a0ca3); } .grad-cyan { background:linear-gradient(135deg,#4cc9f0,#4361ee); } .grad-red { background:linear-gradient(135deg,#e63946,#c1121f); } .grad-teal { background:linear-gradient(135deg,#06d6a0,#2dc653); } /* ── 8. PANEL / CARD ────────────────────────────────────────── */ .panel, .card, .form-card, .table-card { background:var(--c-white); border-radius:18px; padding:20px; box-shadow:var(--shadow-md); border:1px solid var(--c-border); } .panel-sm { border-radius:14px; padding:14px; } .panel-lg { border-radius:22px; padding:26px; } .ph, .card-title, .tc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; } .pt { font-family:'Rajdhani',sans-serif; font-size:1.05rem; font-weight:700; color:var(--c-text); } .pa { font-size:0.73rem; color:var(--c-primary); font-weight:800; cursor:pointer; background:var(--c-input-bg); padding:5px 12px; border-radius:8px; border:none; transition:all var(--t-fast); text-decoration:none; display:inline-block; } .pa:hover { background:var(--c-grad); color:#fff; } /* Section divider */ .sec-div { grid-column:1/-1; display:flex; align-items:center; gap:12px; margin:4px 0; } .sd-line { flex:1; height:1.5px; background:linear-gradient(90deg,rgba(67,97,238,0.2),transparent); } .sd-line.r { background:linear-gradient(90deg,transparent,rgba(67,97,238,0.2)); } .sd-label { font-size:0.65rem; font-weight:800; color:var(--c-primary); letter-spacing:2px; text-transform:uppercase; white-space:nowrap; } /* ── 9. GRID UTILITIES ──────────────────────────────────────── */ .dg2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; } .dg3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:18px; } .dg4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; margin-bottom:18px; } .dg-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-bottom:18px; } .dg-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:18px; margin-bottom:18px; } .layout { display:grid; grid-template-columns:360px 1fr; gap:20px; align-items:start; } .layout-sm { display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; } /* ── 10. FORM COMPONENTS ────────────────────────────────────── */ .fc-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--c-bg); } .fc-icon { width:44px; height:44px; border-radius:13px; background:var(--c-grad); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.3rem; box-shadow:0 6px 16px var(--sb-active-shadow, rgba(67,97,238,0.25)); } .fc-title { font-family:'Rajdhani',sans-serif; font-size:1.1rem; font-weight:700; color:var(--c-text); } .fc-sub { font-size:0.72rem; color:#aaa; } .fg { margin-bottom:13px; display:flex; flex-direction:column; } .fg.full { grid-column:1/-1; } .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; } label { display:block; font-size:0.7rem; font-weight:800; color:#666; margin-bottom:5px; letter-spacing:0.5px; text-transform:uppercase; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=password], select, textarea { width:100%; background:var(--c-input-bg); border:2px solid var(--c-border); border-radius:11px; padding:10px 13px; color:var(--c-text); font-family:'Nunito', sans-serif; font-size:0.86rem; outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } input:focus, select:focus, textarea:focus { border-color:var(--c-primary); background:var(--c-white); box-shadow:0 0 0 3px rgba(67,97,238,0.12); } select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; } textarea { resize:vertical; min-height:80px; } input[readonly] { background:#f0f0ff; color:var(--c-primary); font-weight:800; cursor:default; } /* Search bar */ .sbi, .f-search { background:var(--c-input-bg); border:2px solid var(--c-border); border-radius:10px; padding:8px 13px; font-family:'Nunito',sans-serif; font-size:0.84rem; outline:none; color:var(--c-text); transition:all var(--t-fast); } .sbi:focus, .f-search:focus { border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(67,97,238,0.1); } .f-sel { background:var(--c-input-bg); border:2px solid var(--c-border); border-radius:9px; padding:7px 10px; font-family:'Nunito',sans-serif; font-size:0.8rem; font-weight:700; color:#555; outline:none; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; padding-right:26px; transition:all var(--t-fast); } .f-sel:focus { border-color:var(--c-primary); } /* ── 11. BUTTONS ────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; border-radius:11px; border:none; font-family:'Nunito',sans-serif; font-size:0.88rem; font-weight:800; cursor:pointer; transition:all var(--t-normal); text-decoration:none; } .btn:hover { transform:translateY(-1px); } .btn:active { transform:translateY(0); } .btn-primary { background:var(--c-grad); color:#fff; box-shadow:0 4px 14px var(--sb-active-shadow, rgba(67,97,238,0.3)); } .btn-primary:hover { box-shadow:0 8px 22px var(--sb-active-shadow, rgba(67,97,238,0.4)); } .btn-save, .btn-send, .btn-submit, .btn-pay { flex:1; padding:11px; border-radius:11px; border:none; background:var(--c-grad); color:#fff; font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:700; letter-spacing:1.5px; cursor:pointer; transition:all var(--t-normal); box-shadow:0 4px 14px var(--sb-active-shadow, rgba(67,97,238,0.3)); } .btn-save:hover, .btn-send:hover, .btn-submit:hover, .btn-pay:hover { transform:translateY(-2px); box-shadow:0 8px 24px var(--sb-active-shadow, rgba(67,97,238,0.4)); } .btn-cancel, .btn-prev, .btn-back { padding:11px 18px; border-radius:11px; border:2px solid var(--c-border); background:var(--c-input-bg); color:#888; font-family:'Nunito',sans-serif; font-size:0.86rem; font-weight:800; cursor:pointer; transition:all var(--t-fast); } .btn-cancel:hover, .btn-prev:hover, .btn-back:hover { background:#eaeeff; } .btn-new, .btn-add { padding:9px 18px; border-radius:10px; border:none; background:var(--c-grad); color:#fff; font-family:'Nunito',sans-serif; font-size:0.82rem; font-weight:800; cursor:pointer; box-shadow:0 4px 14px var(--sb-active-shadow, rgba(67,97,238,0.3)); transition:all var(--t-fast); } .btn-new:hover, .btn-add:hover { transform:translateY(-1px); } .btn-export { padding:8px 16px; border-radius:9px; border:2px solid rgba(67,97,238,0.2); background:var(--c-input-bg); color:var(--c-primary); font-family:'Nunito',sans-serif; font-size:0.8rem; font-weight:800; cursor:pointer; transition:all var(--t-fast); } .btn-export:hover { background:var(--c-grad); color:#fff; border-color:transparent; } .btn-row { display:flex; gap:10px; margin-top:14px; } /* Inline action buttons */ .abtn { padding:5px 11px; border-radius:8px; border:none; font-size:0.72rem; font-weight:800; cursor:pointer; transition:all var(--t-fast); display:inline-flex; align-items:center; gap:4px; } .abtn:hover { transform:translateY(-1px); } .ab-view { background:#eff2ff; color:#4361ee; border:1.5px solid rgba(67,97,238,0.2); } .ab-view:hover { background:linear-gradient(135deg,#4361ee,#7209b7); color:#fff; border-color:transparent; } .ab-edit { background:#fff0f8; color:#f72585; border:1.5px solid rgba(247,37,133,0.2); } .ab-edit:hover { background:linear-gradient(135deg,#f72585,#7209b7); color:#fff; border-color:transparent; } .ab-green { background:#e8fff5; color:#06d6a0; border:1.5px solid rgba(6,214,160,0.25); } .ab-green:hover { background:linear-gradient(135deg,#06d6a0,#0077b6); color:#fff; border-color:transparent; } .ab-del { background:#fff0f0; color:#e63946; border:1.5px solid rgba(230,57,70,0.2); } .ab-del:hover { background:#e63946; color:#fff; border-color:transparent; } .act-grp { display:flex; gap:5px; align-items:center; flex-wrap:wrap; } /* ── 12. TABLE ──────────────────────────────────────────────── */ .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } .tbl-wrap table { min-width:520px; } table { width:100%; border-collapse:collapse; font-size:0.82rem; } th { font-weight:800; text-align:left; padding:10px 14px; border-bottom:2px solid var(--c-bg); font-size:0.68rem; color:#bbb; letter-spacing:1px; text-transform:uppercase; background:#fafbff; white-space:nowrap; } td { padding:11px 14px; border-bottom:1px solid var(--c-bg); color:#555; vertical-align:middle; } tr:last-child td { border-bottom:none; } tr:hover td { background:var(--c-input-bg); } .td-num { color:#bbb; font-size:0.72rem; font-weight:700; } .td-strong { font-weight:800; color:var(--c-text); } .td-muted { color:#aaa; font-size:0.78rem; } /* ── 13. TAGS / BADGES ──────────────────────────────────────── */ .tag { display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.71rem; font-weight:800; white-space:nowrap; } .tg { background:#e8fff5; color:#06d6a0; } .tr { background:#fff0f0; color:#e63946; } .to { background:#fff8ec; color:#fb8500; } .tb { background:#eff2ff; color:#4361ee; } .tp { background:#fdf0ff; color:#7209b7; } .tgr { background:#f0fff0; color:#2dc653; } .tc { background:#e0f7ff; color:#0077b6; } /* ── 14. PROGRESS BAR ───────────────────────────────────────── */ .pbar-cell { display:flex; align-items:center; gap:8px; } .pbar { flex:1; height:7px; background:var(--c-bg); border-radius:4px; overflow:hidden; min-width:50px; } .pbar-fill { height:100%; border-radius:4px; transition:width 0.5s ease; } .pbar-val { font-size:0.74rem; font-weight:800; min-width:36px; text-align:right; } .pbar-green .pbar-fill { background:#06d6a0; } .pbar-blue .pbar-fill { background:#4361ee; } .pbar-orange .pbar-fill { background:#fb8500; } .pbar-red .pbar-fill { background:#e63946; } /* ── 15. MODAL ──────────────────────────────────────────────── */ .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); z-index:300; align-items:center; justify-content:center; padding:16px; } .modal-overlay.show { display:flex; } .modal { background:var(--c-white); border-radius:20px; padding:26px; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.22); animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1); } @keyframes modalIn { from{transform:scale(0.85);opacity:0;} to{transform:scale(1);opacity:1;} } .modal-title { font-family:'Rajdhani',sans-serif; font-size:1.25rem; font-weight:700; color:var(--c-text); margin-bottom:16px; display:flex; align-items:center; gap:10px; justify-content:space-between; } .modal-close { background:none; border:none; font-size:1.1rem; cursor:pointer; color:#aaa; padding:4px; transition:color var(--t-fast); } .modal-close:hover { color:var(--c-danger); } .modal-footer { display:flex; gap:8px; margin-top:16px; } /* ── 16. TABS ───────────────────────────────────────────────── */ .tab-bar { background:var(--c-white); border-radius:14px; padding:5px; margin-bottom:18px; display:flex; gap:4px; overflow-x:auto; box-shadow:var(--shadow-md); border:1px solid var(--c-border); scrollbar-width:none; } .tab-bar::-webkit-scrollbar { display:none; } .tab-btn { flex:1; padding:9px 12px; border-radius:10px; border:none; background:transparent; font-family:'Nunito',sans-serif; font-size:0.8rem; font-weight:800; cursor:pointer; transition:all var(--t-fast); color:#888; white-space:nowrap; min-width:110px; } .tab-btn:hover { background:var(--c-input-bg); color:var(--c-primary); } .tab-btn.active { background:var(--c-grad); color:#fff; box-shadow:0 3px 10px var(--sb-active-shadow,rgba(67,97,238,0.3)); } .tab-panel { display:none; animation:fadeUp 0.3s ease; } .tab-panel.active { display:block; } @keyframes fadeUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} } /* ── 17. FILTER BAR ─────────────────────────────────────────── */ .filter-bar, .fbar { background:var(--c-white); border-radius:13px; padding:12px 16px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow-sm); border:1px solid var(--c-border); margin-bottom:14px; } .fr-group { display:flex; flex-direction:column; gap:4px; } .fr-label { font-size:0.64rem; font-weight:800; color:#aaa; text-transform:uppercase; letter-spacing:0.5px; } .fr-sel { min-width:120px; } .fr-spacer { flex:1; } /* ── 18. TOAST ──────────────────────────────────────────────── */ .toast { position:fixed; top:20px; right:20px; z-index:9999; background:var(--c-grad); color:#fff; padding:13px 22px; border-radius:13px; font-weight:800; font-size:0.9rem; box-shadow:0 8px 28px rgba(0,0,0,0.2); max-width:300px; animation:toastIn 0.3s ease; transition:opacity var(--t-slow); } @keyframes toastIn { from{transform:translateX(120%);opacity:0;} to{transform:translateX(0);opacity:1;} } /* ── 19. QUICK ACTIONS ──────────────────────────────────────── */ .qa-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; } .qa-btn { border-radius:13px; padding:13px 8px; border:none; font-family:'Nunito',sans-serif; font-size:0.8rem; font-weight:800; cursor:pointer; transition:all var(--t-normal); background:var(--c-white); color:var(--c-text); border:2px solid var(--c-border); text-align:center; } .qa-btn:hover { background:var(--c-grad); color:#fff; border-color:transparent; transform:translateY(-2px); box-shadow:var(--shadow-lg); } /* ── 20. HAMBURGER & OVERLAY ────────────────────────────────── */ .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px 9px; border-radius:10px; border:2px solid var(--c-border); background:var(--c-input-bg); flex-shrink:0; } .hamburger span { display:block; width:19px; height:2.5px; background:var(--c-primary); border-radius:3px; transition:all var(--t-normal); } .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); } .hamburger.open span:nth-child(2) { opacity:0; } .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); } .overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:99; backdrop-filter:blur(2px); } .overlay.show { display:block; } /* ── 21. STEPS WIZARD ───────────────────────────────────────── */ .steps-bar { display:flex; align-items:center; background:var(--c-white); border-radius:16px; padding:14px 22px; margin-bottom:20px; box-shadow:var(--shadow-md); border:1px solid var(--c-border); overflow-x:auto; gap:4px; } .step { display:flex; align-items:center; gap:8px; flex-shrink:0; } .step-num { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:800; transition:all var(--t-normal); } .step.done .step-num, .step.active .step-num { background:var(--c-grad); color:#fff; box-shadow:0 3px 10px var(--sb-active-shadow,rgba(67,97,238,0.3)); } .step.pending .step-num { background:var(--c-bg); color:#aaa; border:2px solid var(--c-border); } .step-label { font-size:0.78rem; font-weight:800; transition:color var(--t-normal); } .step.active .step-label, .step.done .step-label { color:var(--c-primary); } .step.pending .step-label { color:#bbb; } .step-line { flex:1; height:2px; background:var(--c-border); min-width:20px; border-radius:2px; } .step-line.done { background:var(--c-grad); } .form-panel { display:none; } .form-panel.active { display:block; animation:fadeUp 0.3s ease; } /* ── 22. ACTIVITY / NOTIFICATION ITEMS ─────────────────────── */ .activity-item, .act-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--c-bg); } .activity-item:last-child, .act-item:last-child { border-bottom:none; } .adot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; } .atxt { font-size:0.82rem; font-weight:700; color:var(--c-text); } .atime { font-size:0.7rem; color:#aaa; margin-top:2px; } /* ── 23. SECTION HEADING ────────────────────────────────────── */ .section-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; } .sh-icon { width:46px; height:46px; border-radius:14px; background:var(--c-grad); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.3rem; box-shadow:0 6px 18px var(--sb-active-shadow,rgba(67,97,238,0.28)); } .sh-title { font-family:'Rajdhani',sans-serif; font-size:1.2rem; font-weight:700; color:var(--c-text); } .sh-sub { font-size:0.74rem; color:#aaa; } /* ── 24. CHART DEFAULTS ─────────────────────────────────────── */ canvas { max-width:100%; } /* ── 25. PRINT ──────────────────────────────────────────────── */ @media print { .sidebar, .topbar, .hamburger, .overlay, .no-print { display:none !important; } .main { margin-left:0 !important; } body { background:#fff !important; } .panel, .card { box-shadow:none !important; border:1px solid #ddd !important; } } /* ── 26. RESPONSIVE ─────────────────────────────────────────── */ @media (max-width:1200px) { .dg3 { grid-template-columns:1fr 1fr; } .dg4 { grid-template-columns:1fr 1fr; } .stat-grid-5 { grid-template-columns:repeat(3,1fr); } } @media (max-width:1100px) { .sidebar { transform:translateX(calc(-1 * var(--sb-width))); transition:transform var(--t-normal); z-index:200; } .sidebar.open { transform:translateX(0); box-shadow:8px 0 40px rgba(0,0,0,0.15); } .main { margin-left:0; } .hamburger { display:flex; } .stat-grid { grid-template-columns:repeat(2,1fr); } .kpi-grid { grid-template-columns:repeat(2,1fr); } .dg2 { grid-template-columns:1fr; } .dg-2-1, .dg-1-2 { grid-template-columns:1fr; } .layout, .layout-sm { grid-template-columns:1fr; } .form-card { position:static !important; } .qa-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:700px) { .content { padding:14px; } .topbar { padding:0 14px; height:58px; gap:8px; } .tb-sub { display:none; } .stat-grid { grid-template-columns:1fr 1fr; } .stat-grid-5{ grid-template-columns:1fr 1fr; } .kpi-grid { grid-template-columns:1fr 1fr; } .dg3 { grid-template-columns:1fr; } .qa-grid { grid-template-columns:1fr 1fr; } .panel, .card { padding:15px; } .row2, .row3 { grid-template-columns:1fr; } .tab-btn { min-width:90px; font-size:0.74rem; padding:7px 10px; } .steps-bar { padding:12px; } .step-label { display:none; } } @media (max-width:480px) { .stat-grid { grid-template-columns:1fr 1fr; } .qa-grid { grid-template-columns:1fr; } .tb-title { font-size:1.1rem; } }