/* app.css v10 — Finance Manager */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap'); /* ════════════════════════════════════════════════════════════ DESIGN TOKENS — Light Mode (default) ════════════════════════════════════════════════════════════ */ :root { --bg: #eef0f5; --surface: #ffffff; --surface2: #f5f6fa; --border: #e2e5ed; --text: #1a1d27; --text-muted: #8891a8; --text-light: #b0b8cc; --primary: #2563eb; --primary-light: #dbeafe; --success: #16a34a; --success-light: #dcfce7; --danger: #dc2626; --danger-light: #fee2e2; --warning: #d97706; --warning-light: #fef3c7; --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); --shadow: 0 4px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.05); --shadow-lg: 0 12px 40px rgba(0,0,0,.12); --radius: 10px; --radius-sm: 6px; /* Sidebar — LIGHT mode */ --sb-bg: #ffffff; --sb-border: #e8eaf0; --sb-text: #6b7280; --sb-hover: rgba(37,99,235,.06); --sb-active-bg: rgba(37,99,235,.1); --sb-active-txt: #1d4ed8; --sb-brand-text: #111827; --sb-co-text: #9ca3af; --sb-usr-text: #111827; --sb-w: 252px; --sb-w-col: 64px; --topbar-h: 56px; /* Page header — light mode */ --ph-bg: #ffffff; --ph-border: #e2e5ed; --ph-shadow: 0 1px 4px rgba(0,0,0,.06); } /* ════════════════════════════════════════════════════════════ DARK MODE — applied when ════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface2: #1c2128; --border: #30363d; --text: #e6edf3; --text-muted: #8b949e; --text-light: #484f58; --primary: #388bfd; --primary-light: #1c2f5b; --success: #3fb950; --success-light: #0d2618; --danger: #f85149; --danger-light: #2d0e0e; --warning: #e3b341; --warning-light: #2a1f00; --shadow-sm: 0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2); --shadow: 0 4px 16px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.3); --shadow-lg: 0 12px 40px rgba(0,0,0,.5); /* Sidebar — DARK mode */ --sb-bg: #0f1219; --sb-border: rgba(255,255,255,.06); --sb-text: #8891a8; --sb-hover: rgba(255,255,255,.05); --sb-active-bg: rgba(255,255,255,.09); --sb-active-txt: #ffffff; --sb-brand-text: #ffffff; --sb-co-text: rgba(255,255,255,.38); --sb-usr-text: rgba(255,255,255,.85); /* Page header — dark mode */ --ph-bg: #161b22; --ph-border: #30363d; --ph-shadow: 0 1px 4px rgba(0,0,0,.3); } /* ── Reset ───────────────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html,body { height:100%; font-family:'DM Sans',sans-serif; font-size:14px; color:var(--text); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; transition:background .25s,color .25s; } a { color:inherit; text-decoration:none; } button { font-family:inherit; } /* ════════════════════════════════════════════════════════════ APP SHELL ════════════════════════════════════════════════════════════ */ .app-layout { display:flex; height:100vh; overflow:hidden; } /* ════════════════════════════════════════════════════════════ TOPBAR (≤1024px — mobile/tablet) Layout: [hamburger] [sys | company-name] [avatar | user | logout] ════════════════════════════════════════════════════════════ */ .topbar { display:none; position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:400; background:var(--sb-bg); align-items:center; padding:0 14px; gap:10px; border-bottom:1px solid var(--sb-border); transition:background .25s, border-color .25s, color .25s; } /* Left brand block */ .topbar-brand { flex:1; display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; } .topbar-sys { font-size:16px; font-weight:800; letter-spacing:.5px; color:var(--sb-brand-text,#111827); flex-shrink:0; } .topbar-sep { color:var(--sb-border); flex-shrink:0; } .topbar-co-wrap { display:flex; flex-direction:column; min-width:0; overflow:hidden; } .topbar-co { font-size:11px; color:var(--sb-text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .topbar-coname { font-size:10px; color:var(--sb-text); opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Right user block in topbar */ .topbar-ph-right { display:flex; align-items:center; gap:9px; flex-shrink:0; } .topbar-avatar { width:30px; height:30px; font-size:12px; } .topbar-user-info { text-align:left; } .topbar-user-info .ph-username { font-size:12px; color:var(--sb-usr-text,#111827); } .topbar-user-info .ph-designation { font-size:10px; color:var(--sb-text); } .topbar-logout { width:30px; height:30px; font-size:12px; background:var(--sb-hover); border:1px solid var(--sb-border); color:var(--sb-text); } .topbar-logout:hover { background:rgba(220,38,38,.15); color:#dc2626; border-color:rgba(220,38,38,.3); } [data-theme="dark"] .topbar-logout:hover { background:rgba(220,38,38,.25); color:#f87171; border-color:rgba(220,38,38,.4); } /* Hamburger */ .hamburger { width:36px; height:36px; flex-shrink:0; border:none; border-radius:var(--radius-sm); background:var(--sb-hover); color:var(--sb-text); cursor:pointer; display:grid; place-items:center; transition:background .15s, color .15s; } .hamburger:hover { background:var(--sb-active-bg); color:var(--sb-active-txt,#1d4ed8); } /* ── Sidebar Overlay ─────────────────────────────────────────────────────── */ .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.52); z-index:390; backdrop-filter:blur(2px); } .sidebar-overlay.active { display:block; animation:fadeIn .2s; } /* ════════════════════════════════════════════════════════════ SIDEBAR ════════════════════════════════════════════════════════════ */ .sidebar { width:var(--sb-w); background:var(--sb-bg); display:flex; flex-direction:column; flex-shrink:0; position:relative; z-index:200; transition:width .28s cubic-bezier(.4,0,.2,1), background .25s; overflow:hidden; } /* ── ERP Header ──────────────────────────────────────────────────────────── */ .sb-header { flex-shrink:0; display:flex; align-items:center; gap:13px; padding:18px 14px 16px; border-bottom:1px solid var(--sb-border); transition:padding .28s; } .sb-logo-icon { width:36px; height:36px; flex-shrink:0; background:var(--primary); border-radius:var(--radius-sm); display:grid; place-items:center; } .sb-logo-icon svg { color:white; width:19px; height:19px; } .sb-brand-text { flex:1; min-width:0; overflow:hidden; transition:opacity .2s,width .28s; } .sb-sys-name { font-size:16px; font-weight:800; color:var(--sb-brand-text,#111827); letter-spacing:.6px; line-height:1.1; } .sb-co-name { font-size:9.5px; font-weight:600; color:var(--sb-co-text,#9ca3af); letter-spacing:1.1px; text-transform:uppercase; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sb-collapse-btn { width:22px; height:22px; flex-shrink:0; border:none; background:var(--sb-hover); border-radius:4px; color:var(--sb-text); cursor:pointer; display:grid; place-items:center; transition:background .15s; } .sb-collapse-btn:hover { background:var(--sb-active-bg); } .sb-collapse-btn svg { transition:transform .28s; } /* ── Slide viewport ──────────────────────────────────────────────────────── */ .sb-viewport { flex:1; overflow:hidden; position:relative; } .sb-slider { display:flex; height:100%; transition:transform .3s cubic-bezier(.4,0,.2,1); will-change:transform; } .sb-panel { min-width:var(--sb-w); width:var(--sb-w); height:100%; overflow-y:auto; overflow-x:hidden; flex-shrink:0; padding:8px 0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.07) transparent; } .sb-panel::-webkit-scrollbar { width:3px; } .sb-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,.07); border-radius:3px; } /* Back button in sub-panels */ .sb-back-btn { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px 12px; background:var(--sb-hover); border:none; border-bottom:1px solid var(--sb-border); color:var(--sb-text); font-size:13px; font-weight:600; cursor:pointer; margin-bottom:4px; text-align:left; transition:background .15s; } .sb-back-btn:hover { background:var(--sb-active-bg); color:var(--sb-active-txt,#1d4ed8); } .sb-back-btn svg { width:16px; height:16px; flex-shrink:0; } .sb-back-btn span { flex:1; } /* Nav links */ .nav-link { display:flex; align-items:center; gap:11px; width:100%; padding:10px 14px; background:none; border:none; color:var(--sb-text); font-size:13px; font-weight:450; cursor:pointer; text-align:left; white-space:nowrap; position:relative; transition:background .12s,color .12s; } .nav-link svg { width:16px; height:16px; flex-shrink:0; opacity:.65; } .nav-link span { flex:1; overflow:hidden; text-overflow:ellipsis; } /* Light mode hover: subtle blue tint */ .nav-link:hover { background:var(--sb-hover); color:var(--sb-active-txt,#1d4ed8); } .nav-link:hover svg { opacity:1; } /* Active: use --sb-active-txt so it's readable in both modes */ .nav-link.active { color:var(--sb-active-txt,#1d4ed8); background:var(--sb-active-bg); font-weight:600; } .nav-link.active svg { opacity:1; } .nav-link.active::before { content:''; position:absolute; left:0; top:5px; bottom:5px; width:3px; background:var(--primary); border-radius:0 3px 3px 0; } .nav-has-sub .nav-caret { margin-left:auto; flex-shrink:0; } .nav-has-sub .nav-caret svg { width:14px; height:14px; opacity:.4; } .nav-has-sub:hover .nav-caret svg { opacity:.8; } /* ── Sidebar Footer ──────────────────────────────────────────────────────── */ .sidebar-footer { flex-shrink:0; border-top:1px solid var(--sb-border); background:var(--sb-bg); padding:12px 14px; display:flex; flex-direction:column; gap:10px; transition:padding .28s, background .25s, border-color .25s; } /* FIX 1: .sb-user-pill was set to display:none — restored to display:flex. Responsive media queries below handle hiding it on tablet/mobile. */ .sb-user-pill { display:flex; align-items:center; gap:9px; } .user-avatar { width:30px; height:30px; border-radius:50%; background:var(--primary); color:white; font-size:12px; font-weight:700; display:grid; place-items:center; flex-shrink:0; } .user-info { flex:1; min-width:0; overflow:hidden; } .user-name { display:block; font-size:12.5px; color:var(--sb-usr-text,#111827); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .user-id { display:block; font-size:10px; color:var(--sb-text); font-family:'DM Mono',monospace; } .logout-btn { width:28px; height:28px; flex-shrink:0; border-radius:var(--radius-sm); border:1px solid var(--sb-border); background:var(--sb-hover); color:var(--sb-text); cursor:pointer; display:grid; place-items:center; transition:background .15s,color .15s; text-decoration:none; } .logout-btn:hover { background:rgba(220,38,38,.2); color:#f87171; } .logout-btn svg { width:15px; height:15px; } /* Dark / Light toggle row */ .sb-theme-row { display:flex; align-items:center; gap:8px; padding:6px 2px; } .sb-theme-label { display:flex; align-items:center; gap:4px; color:var(--sb-text); font-size:10.5px; } .sb-theme-label svg { width:13px; height:13px; } .theme-icon-sun svg { color:#f59e0b; } .theme-icon-moon svg { color:#818cf8; } .theme-text { display:inline; } /* Toggle switch */ .sb-theme-toggle { flex:1; position:relative; height:22px; min-width:40px; max-width:44px; border:1px solid rgba(255,255,255,.15); border-radius:100px; background:rgba(255,255,255,.07); cursor:pointer; display:flex; align-items:center; padding:2px; transition:background .25s,border-color .25s; } .sb-theme-toggle .toggle-thumb { width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.4); transition:transform .25s,background .25s; flex-shrink:0; } /* Light mode toggle — thumb LEFT, neutral grey */ .sb-theme-toggle { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.12); } .sb-theme-toggle .toggle-thumb { background: #6b7280; transform: translateX(0); } /* Dark mode toggle — thumb RIGHT, blue */ [data-theme="dark"] .sb-theme-toggle { background: rgba(56,139,253,.25); border-color: rgba(56,139,253,.4); } [data-theme="dark"] .sb-theme-toggle .toggle-thumb { transform: translateX(19px); background: #388bfd; } /* System info strip */ .sb-sysinfo { padding:4px 2px 0; border-top:1px solid var(--sb-border); } .sb-sysinfo-name { font-size:10px; font-weight:600; color:var(--sb-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; } .sb-sysinfo-meta { display:flex; align-items:center; gap:5px; } .sb-sysinfo-ver { font-size:10px; font-family:'DM Mono',monospace; color:var(--sb-text); opacity:.6; } .sb-sysinfo-dot { font-size:10px; color:var(--sb-border); } .sb-sysinfo-date { font-size:10px; font-family:'DM Mono',monospace; color:var(--sb-text); opacity:.6; } /* ════════════════════════════════════════════════════════════ COLLAPSED SIDEBAR (desktop + tablet) ════════════════════════════════════════════════════════════ */ .sidebar.collapsed { width:var(--sb-w-col); } .sidebar.collapsed .sb-brand-text { opacity:0; width:0; overflow:hidden; flex:0; } .sidebar.collapsed .sb-header { padding:14px 0; justify-content:center; flex-direction:column; gap:8px; align-items:center; } .sidebar.collapsed .sb-collapse-btn { display:grid; margin:0 auto; } .sidebar.collapsed .sb-collapse-btn svg { transform:rotate(180deg); } .sidebar.collapsed .sb-logo-icon { margin:0 auto; } .sidebar.collapsed .sb-panel { min-width:var(--sb-w-col); width:var(--sb-w-col); } .sidebar.collapsed .nav-link { padding:12px 0; justify-content:center; } .sidebar.collapsed .nav-link span, .sidebar.collapsed .nav-caret, .sidebar.collapsed .sb-back-btn span { display:none; } .sidebar.collapsed .sb-back-btn { justify-content:center; padding:12px 0; } .sidebar.collapsed .sidebar-footer { padding:10px 0; align-items:center; } .sidebar.collapsed .sb-user-pill { justify-content:center; } .sidebar.collapsed .user-info, .sidebar.collapsed .sb-theme-label, .sidebar.collapsed .sb-sysinfo-name, .sidebar.collapsed .sb-sysinfo-meta, .sidebar.collapsed .theme-text { display:none; } .sidebar.collapsed .sb-theme-row { justify-content:center; } .sidebar.collapsed .sb-sysinfo { display:none; } /* ── Content Area ────────────────────────────────────────────────────────── */ .content-area { flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; min-width:0; transition:margin-left .28s cubic-bezier(.4,0,.2,1); } #page-content { flex:1; padding:28px 32px; transition:opacity .15s; } /* ── Page Header — left: title | right: avatar+user+logout ──────────────── */ .page-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; background: var(--ph-bg); border: 1px solid var(--ph-border); border-radius: var(--radius); box-shadow: var(--ph-shadow); padding: 14px 20px; transition: background .25s, border-color .25s; } .ph-left { min-width:0; } .page-title { font-size:22px; font-weight:700; line-height:1.2; color:var(--text); } .page-sub { font-size:12.5px; color:var(--text-muted); margin-top:2px; } .ph-right { display:flex; align-items:center; gap:12px; flex-shrink:0; } /* ph-username and ph-designation adapt via --text / --text-muted */ [data-theme="dark"] .ph-username { color: var(--text); } [data-theme="dark"] .ph-designation { color: var(--text-muted); } .ph-avatar { width:38px; height:38px; border-radius:50%; background:var(--primary); color:white; font-size:14px; font-weight:700; display:grid; place-items:center; flex-shrink:0; } .ph-user { text-align:right; } .ph-username { font-size:13px; font-weight:600; color:var(--text); line-height:1.2; } .ph-designation { font-size:11px; color:var(--text-muted); } .ph-logout { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); color:var(--text-muted); cursor:pointer; text-decoration:none; transition:background .15s,color .15s,border-color .15s; flex-shrink:0; } .ph-logout:hover { background:var(--danger-light); color:var(--danger); border-color:var(--danger); } .ph-logout svg { width:16px; height:16px; } /* ── Card ────────────────────────────────────────────────────────────────── */ .card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm); } .card-body { padding:20px; } /* ── Stat Grid ───────────────────────────────────────────────────────────── */ .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:24px; } .stat-card { border-radius:var(--radius); padding:20px; color:white; } .stat-card.income-card { background:#1e3a8a; } .stat-card.expense-card { background:#7f1d1d; } .stat-card.balance-card { background:#1e293b; } .stat-card.bank-card { background:#14532d; } .stat-card.cash-card { background:#78350f; } .stat-label { font-size:10px; letter-spacing:1px; text-transform:uppercase; opacity:.65; font-weight:600; } .stat-value { font-size:24px; font-weight:700; font-family:'DM Mono',monospace; margin-top:6px; line-height:1; } .stat-value span { font-size:12px; opacity:.7; margin-right:2px; } /* ── Filter Bar ──────────────────────────────────────────────────────────── */ .filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; } .filter-group { display:flex; align-items:center; gap:7px; } .filter-group label { font-size:12px; color:var(--text-muted); font-weight:500; white-space:nowrap; } /* ── Form Controls ───────────────────────────────────────────────────────── */ input[type=text],input[type=date],input[type=number], input[type=email],input[type=password],select,textarea { font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 11px; outline:none; transition:border-color .15s,box-shadow .15s,background .25s; width:100%; } input:focus,select:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.1); } textarea { resize:vertical; min-height:80px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; } .form-row.single { grid-template-columns:1fr; } .form-row.triple { grid-template-columns:1fr 1fr 1fr; } .form-group { display:flex; flex-direction:column; gap:5px; } .form-group label { font-size:12px; font-weight:600; color:var(--text-muted); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:var(--radius-sm); border:none; font-size:13px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:background .15s; white-space:nowrap; } .btn svg { width:15px; height:15px; } .btn-primary { background:var(--primary); color:white; } .btn-primary:hover { filter:brightness(1.1); } .btn-success { background:var(--success); color:white; } .btn-success:hover { filter:brightness(1.1); } .btn-danger { background:var(--danger); color:white; } .btn-danger:hover { filter:brightness(1.1); } .btn-dark { background:#1a1d27; color:white; } .btn-dark:hover { background:#2d3142; } .btn-outline { background:transparent; color:var(--text-muted); border:1px solid var(--border); } .btn-outline:hover { background:var(--surface2); } .btn-sm { padding:5px 11px; font-size:12px; } /* ── Badges ──────────────────────────────────────────────────────────────── */ .badge { display:inline-block; padding:2px 8px; border-radius:100px; font-size:11px; font-weight:600; } .badge-success { background:var(--success-light); color:var(--success); } .badge-danger { background:var(--danger-light); color:var(--danger); } .badge-warning { background:var(--warning-light); color:var(--warning); } .badge-blue { background:var(--primary-light); color:var(--primary); } /* ── Summary Chips ───────────────────────────────────────────────────────── */ .summary-chips { display:flex; gap:10px; margin-left:auto; } .chip { border-radius:var(--radius-sm); padding:10px 18px; color:white; text-align:right; min-width:120px; } .chip.payment { background:#991b1b; } .chip.receivable { background:#1e40af; } .chip.balance { background:#1e293b; } .chip-label { font-size:9px; letter-spacing:1px; text-transform:uppercase; opacity:.65; font-weight:600; } .chip-value { font-size:18px; font-weight:700; font-family:'DM Mono',monospace; } /* ── Data Table ──────────────────────────────────────────────────────────── */ .data-table-wrap { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; overflow-x:auto; } table.data-table { width:100%; border-collapse:collapse; min-width:480px; } table.data-table thead th { padding:11px 14px; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--surface2); white-space:nowrap; } table.data-table tbody td { padding:11px 14px; font-size:13px; border-bottom:1px solid var(--border); color:var(--text); } table.data-table tbody tr:last-child td { border-bottom:none; } table.data-table tbody tr:hover { background:var(--surface2); } .td-right { text-align:right; } .td-mono { font-family:'DM Mono',monospace; font-size:12.5px; } .td-green { color:var(--success); } .td-red { color:var(--danger); } .empty-row td { text-align:center; padding:48px; color:var(--text-muted); } /* ── Content + Side Panel ────────────────────────────────────────────────── */ .content-with-panel { display:grid; grid-template-columns:1fr 270px; gap:20px; align-items:start; } .balance-panel { display:flex; flex-direction:column; gap:12px; } .balance-card-item { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:16px 18px; } .balance-card-item .bc-title { font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--primary); margin-bottom:8px; } .balance-card-item .bc-total { font-size:24px; font-weight:700; font-family:'DM Mono',monospace; color:var(--primary); text-align:right; } .bc-sub { display:flex; justify-content:space-between; margin-top:8px; } .bc-sub span { font-size:12px; font-family:'DM Mono',monospace; color:var(--success); } /* ── Modal ───────────────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: fadeIn .15s; padding: 16px; } .modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; animation: slideUp .2s; border: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--surface); z-index: 1; } .modal-title { font-size:15px; font-weight:700; color:var(--text); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: var(--radius-sm); transition: .15s; flex-shrink: 0; } .modal-close:hover { background: var(--surface2); } .modal-close svg { width: 18px; height: 18px; display: block; } .modal-body { padding: 22px; } .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: var(--surface); z-index: 1; } /* ── Responsive modal ──────────────────────────────────────────── */ @media (max-width: 600px) { .modal-backdrop { align-items: flex-end; padding: 0; } .modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; animation: slideUpMobile .22s ease; } .modal-header { padding: 16px 18px; } .modal-body { padding: 16px 18px; } .modal-footer { padding: 12px 18px; } } @media (max-width: 380px) { .modal-header { padding: 14px 14px; } .modal-body { padding: 14px; } .modal-footer { padding: 10px 14px; } } .pay-method-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; } .pay-method-option { border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; display:flex; align-items:center; gap:8px; cursor:pointer; transition:.15s; } .pay-method-option:has(input:checked) { border-color:var(--primary); background:var(--primary-light); } .pay-method-option input { accent-color:var(--primary); } .pay-method-option label { cursor:pointer; font-weight:500; font-size:13px; color:var(--text); } /* ── Toast ───────────────────────────────────────────────────────────────── */ #toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; } .toast { background:var(--text); color:var(--surface); padding:12px 18px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; box-shadow:var(--shadow-lg); animation:slideRight .25s; max-width:320px; } .toast.success { background:var(--success); color:white; } .toast.error { background:var(--danger); color:white; } /* ── Context Menu ────────────────────────────────────────────────────────── */ .ctx-menu { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow); z-index:500; min-width:140px; overflow:hidden; animation:fadeIn .1s; } .ctx-menu-item { padding:9px 14px; font-size:13px; cursor:pointer; transition:.1s; display:flex; align-items:center; gap:8px; color:var(--text); } .ctx-menu-item:hover { background:var(--surface2); } .ctx-menu-item.danger { color:var(--danger); } /* ── Login Page ──────────────────────────────────────────────────────────── */ .login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f1422,#1a2035); padding:24px; } .login-box { background:var(--surface); border-radius:14px; padding:40px 36px; width:100%; max-width:380px; box-shadow:var(--shadow-lg); border:1px solid var(--border); } .login-logo { width:44px; height:44px; background:var(--primary); border-radius:var(--radius); display:grid; place-items:center; margin-bottom:20px; } .login-logo svg { color:white; width:22px; height:22px; } .login-title { font-size:22px; font-weight:700; margin-bottom:4px; color:var(--text); } .login-sub { font-size:13px; color:var(--text-muted); margin-bottom:28px; } .login-field { margin-bottom:16px; } .login-field label { display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; } .error-msg { background:var(--danger-light); color:var(--danger); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; margin-bottom:16px; } .kicked-msg { display:flex; align-items:flex-start; gap:10px; background:#fff7ed; color:#92400e; border:1px solid #fed7aa; border-radius:var(--radius-sm); padding:12px 14px; font-size:13px; line-height:1.5; margin-bottom:16px; } /* ── Pulse Dot Loader ────────────────────────────────────────────────────── */ #spa-loader { position:fixed; inset:0; z-index:9900; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .18s; background:rgba(0,0,0,.1); backdrop-filter:blur(1px); } #spa-loader.active { opacity:1; pointer-events:all; } .pulse-wrap { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:16px 28px; box-shadow:var(--shadow-lg); } .pulse-dot { width:11px; height:11px; border-radius:50%; animation:pulseDot 1.3s cubic-bezier(.455,.03,.515,.955) infinite both; } .pulse-dot.d1 { background:#2563eb; animation-delay:0s; } .pulse-dot.d2 { background:#7c3aed; animation-delay:.18s; } .pulse-dot.d3 { background:#16a34a; animation-delay:.36s; } @keyframes pulseDot { 0%,100%{transform:scale(.55);opacity:.28} 45%{transform:scale(1.25);opacity:1} 55%{transform:scale(1.10);opacity:.95} } /* ── Kicked Session Overlay ──────────────────────────────────────────────── */ #kicked-overlay { position:fixed; inset:0; z-index:99999; background:rgba(10,12,20,.75); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; animation:fadeIn .3s; padding:24px; } .kicked-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:40px 44px; max-width:420px; width:100%; text-align:center; box-shadow:var(--shadow-lg); animation:slideUp .3s; } .kicked-icon { width:56px; height:56px; border-radius:50%; background:#fef2f2; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; } .kicked-title { font-size:20px; font-weight:700; margin-bottom:10px; color:var(--text); } .kicked-body { font-size:14px; color:var(--text-muted); line-height:1.6; margin-bottom:20px; } .kicked-countdown { font-size:13px; color:var(--text-light); background:var(--surface2); border-radius:100px; padding:8px 18px; display:inline-block; } .kicked-countdown b { color:var(--danger); } /* ── Pagination ──────────────────────────────────────────────────────────── */ .pg-wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 18px; border-top:1px solid var(--border); background:var(--surface2); border-radius:0 0 var(--radius) var(--radius); } .pg-info { font-size:12.5px; color:var(--text-muted); } .pg-controls { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .pg-btn { min-width:34px; height:34px; padding:0 10px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; transition:background .12s,border-color .12s,color .12s; display:inline-flex; align-items:center; justify-content:center; } .pg-btn:hover:not(:disabled) { background:var(--primary-light); border-color:var(--primary); color:var(--primary); } .pg-btn.pg-active { background:var(--primary); border-color:var(--primary); color:white; font-weight:700; } .pg-btn.pg-disabled,.pg-btn:disabled { opacity:.35; cursor:not-allowed; pointer-events:none; } .pg-ellipsis { min-width:28px; text-align:center; color:var(--text-muted); font-size:14px; line-height:34px; } /* ── Animations ──────────────────────────────────────────────────────────── */ @keyframes fadeIn { from{opacity:0}to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} } @keyframes slideRight{ from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)} } /* ════════════════════════════════════════════════════════════ RESPONSIVE — TABLET 769–1024px ════════════════════════════════════════════════════════════ */ @media (max-width:1024px) and (min-width:769px) { .topbar { display:flex; } .app-layout { height:calc(100vh - var(--topbar-h)); margin-top:var(--topbar-h); overflow:hidden; } .content-area { overflow-y:auto; } .sidebar { position:fixed; top:var(--topbar-h); left:0; height:calc(100vh - var(--topbar-h)); z-index:200; } .content-area { margin-left:var(--sb-w); } .content-area.sb-collapsed { margin-left:var(--sb-w-col); } #page-content { padding:22px 24px; } .content-with-panel { grid-template-columns:1fr 240px; } .stat-grid { grid-template-columns:repeat(3,1fr); } .sb-user-pill { display:none; } .ph-right .ph-designation { display:none; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE — MOBILE ≤768px ════════════════════════════════════════════════════════════ */ @media (max-width:768px) { .topbar { display:flex; } .app-layout { flex-direction:column; height:auto; overflow:visible; } .content-area { margin-top:var(--topbar-h); } .sidebar { position:fixed; top:var(--topbar-h); left:0; width:var(--sb-w) !important; height:calc(100vh - var(--topbar-h)); transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); z-index:400; } .sidebar.mobile-open { transform:translateX(0); } .sb-collapse-btn { display:none !important; } .sb-user-pill { display:none; } .ph-right { display:none; } #page-content { padding:16px; } .stat-grid { grid-template-columns:1fr 1fr; } .content-with-panel { grid-template-columns:1fr; } .form-row,.form-row.triple { grid-template-columns:1fr; } .summary-chips { display:none; } .page-title { font-size:18px; } .modal { border-radius:var(--radius) var(--radius) 0 0; } .modal-backdrop { align-items:flex-end; padding:0; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE — SMALL MOBILE ≤480px ════════════════════════════════════════════════════════════ */ @media (max-width:480px) { .topbar-user-info { display:none; } /* avatar + logout remain */ .stat-grid { grid-template-columns:1fr; } #page-content { padding:12px; } .login-box { padding:28px 18px; } .kicked-card { padding:28px 20px; } .btn { padding:7px 12px; font-size:12px; } .page-title { font-size:16px; } table.data-table thead th, table.data-table tbody td { padding:8px 10px; font-size:12px; } .filter-bar { gap:6px; } } /* ════════════════════════════════════════════════════════════ TOAST SYSTEM v11 DOM-only, no storage. Auto-disappears. ════════════════════════════════════════════════════════════ */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 99000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 360px; width: calc(100% - 48px); } .toast { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; line-height: 1.45; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; pointer-events: all; animation: toastSlideIn .3s cubic-bezier(.4,0,.2,1) both; border: 1px solid transparent; } .toast-hiding { animation: toastSlideOut .4s cubic-bezier(.4,0,.2,1) both; } .toast-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; } .toast-icon svg { width: 18px; height: 18px; display: block; } .toast-msg { flex: 1; } .toast-close { background: none; border: none; cursor: pointer; padding: 0; opacity: .6; flex-shrink: 0; transition: opacity .15s; color: inherit; } .toast-close:hover { opacity: 1; } .toast-close svg { width: 15px; height: 15px; display: block; } /* Progress bar */ .toast-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.35); animation: toastProgress linear both; transform-origin: left; } @keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* Type variants */ .toast-success { background: var(--success); color: white; border-color: rgba(255,255,255,.15); } .toast-error { background: var(--danger); color: white; border-color: rgba(255,255,255,.15); } .toast-warning { background: var(--warning); color: white; border-color: rgba(255,255,255,.15); } .toast-info { background: var(--primary); color: white; border-color: rgba(255,255,255,.15); } .toast-default { background: var(--surface); color: var(--text); border-color: var(--border); } .toast-default .toast-progress { background: rgba(0,0,0,.12); } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); max-height: 80px; margin-bottom: 0; } to { opacity: 0; transform: translateX(110%); max-height: 0; margin-bottom: -10px; } } @media (max-width: 480px) { #toast-container { bottom: 16px; right: 12px; left: 12px; width: auto; } } /* ════════════════════════════════════════════════════════════ CONFIRMATION MODAL v11 ════════════════════════════════════════════════════════════ */ .confirm-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .confirm-icon svg { width: 32px; height: 32px; } .confirm-message { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.55; margin: 0; } .btn-warning { background: var(--warning); color: white; } .btn-warning:hover { filter: brightness(1.1); } .confirm-circle-danger { background:var(--danger-light); color:var(--danger); } .confirm-circle-warning { background:var(--warning-light); color:var(--warning); } .confirm-circle-info { background:var(--primary-light); color:var(--primary); } /* ════════════════════════════════════════════════════════════ THEME — additional component overrides Topbar and sidebar already use --sb-bg which auto-switches. These handle edge cases in dark mode. ════════════════════════════════════════════════════════════ */ /* FIX 2: Removed empty ruleset for .topbar-sys/.topbar-co/.topbar-coname — these already use white/rgba colours that work in both themes. */ [data-theme="dark"] input[type=text], [data-theme="dark"] input[type=date], [data-theme="dark"] input[type=number], [data-theme="dark"] input[type=email], [data-theme="dark"] input[type=password], [data-theme="dark"] select, [data-theme="dark"] textarea { color-scheme: dark; /* Makes browser-native date pickers dark */ } [data-theme="dark"] .data-table-wrap table.data-table thead th { background: var(--surface2); } [data-theme="dark"] .pay-method-option:has(input:checked) { border-color:var(--primary); background:var(--primary-light); color:var(--text); } /* ── Sidebar Home Button (footer) ────────────────────────────────────────── */ .sb-home-btn { margin-bottom: 4px; } .sb-home-btn .nav-link { border-radius: var(--radius-sm); margin: 0 2px; padding: 9px 12px; background: var(--sb-hover); border: 1px solid var(--sb-border); width: calc(100% - 4px); font-size: 13px; font-weight: 500; color: var(--sb-text); transition: background .15s, color .15s, border-color .15s; } .sb-home-btn .nav-link:hover { background: var(--sb-active-bg); color: var(--sb-active-txt, #1d4ed8); border-color: var(--sb-active-bg); } .sb-home-btn .nav-link.active { background: var(--primary); border-color: var(--primary); color: white; } .sb-home-btn .nav-link.active::before { display: none; } .sb-home-btn .nav-link svg { opacity: .8; } .sb-home-btn .nav-link:hover svg, .sb-home-btn .nav-link.active svg { opacity: 1; } .sidebar.collapsed .sb-home-btn .nav-link { width: var(--sb-w-col); margin: 0; padding: 12px 0; justify-content: center; border-radius: 0; border-left: none; border-right: none; } /* ═══════════════════════════════════════════════════════════════════════════ LOAN MODAL (class="Loan_modal") Complete design system — light + dark mode — responsive to 1024px Used by: New Loan Given / New Loan Taken / Recovery / Repayment modals ═══════════════════════════════════════════════════════════════════════════ */ .Loan_modal { background: var(--surface); border-radius: 14px; width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto; overflow-x: hidden; padding: 24px 22px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.10); border: 1px solid var(--border); font-family: 'DM Sans', sans-serif; color: var(--text); position: relative; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .Loan_modal::-webkit-scrollbar { width: 4px; } .Loan_modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .Loan_modal * { box-sizing: border-box; } .Loan_modal .lm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .Loan_modal .lm-header h2 { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -.2px; } .Loan_modal .lm-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 6px; font-size: 20px; line-height: 1; color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0; } .Loan_modal .lm-close:hover { background: var(--surface2); color: var(--text); } .Loan_modal .toggle-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 100px; padding: 4px; margin-bottom: 18px; } .Loan_modal .toggle-btn { padding: 8px 12px; border: none; border-radius: 100px; font-size: 13px; font-weight: 500; cursor: pointer; background: transparent; color: var(--text-muted); font-family: 'DM Sans', sans-serif; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; } .Loan_modal .toggle-btn.active { background: var(--primary); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(37,99,235,.25); } [data-theme="dark"] .Loan_modal .toggle-btn.active { box-shadow: 0 2px 8px rgba(56,139,253,.30); } .Loan_modal .lm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .Loan_modal .lm-row.lm-full { grid-template-columns: 1fr; } .Loan_modal .lm-row.lm-three { grid-template-columns: 1fr 1fr 1fr; } .Loan_modal .lm-field { display: flex; flex-direction: column; gap: 5px; } .Loan_modal .lm-field label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .1px; text-transform: none; } .Loan_modal .lm-field input, .Loan_modal .lm-field select, .Loan_modal .lm-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 13.5px; color: var(--text); background: var(--surface); font-family: 'DM Sans', sans-serif; outline: none; min-height: 38px; transition: border-color .15s, box-shadow .15s, background .25s; appearance: auto; } .Loan_modal .lm-field textarea { min-height: 72px; resize: vertical; line-height: 1.5; } .Loan_modal .lm-field input:focus, .Loan_modal .lm-field select:focus, .Loan_modal .lm-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); outline: none; } [data-theme="dark"] .Loan_modal .lm-field input:focus, [data-theme="dark"] .Loan_modal .lm-field select:focus, [data-theme="dark"] .Loan_modal .lm-field textarea:focus { box-shadow: 0 0 0 3px rgba(56,139,253,.18); } .Loan_modal .lm-field input[readonly], .Loan_modal .lm-readonly { background: var(--surface2) !important; color: var(--text-muted) !important; cursor: default; border-color: var(--border) !important; box-shadow: none !important; } .Loan_modal .lm-calc { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 14px 10px; margin: 4px 0 14px; transition: background .25s, border-color .25s; } .Loan_modal .lm-calc-label { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } .Loan_modal .lm-date-row { display: flex; align-items: center; gap: 10px; } .Loan_modal .lm-date-row input { flex: 1; min-width: 0; } .Loan_modal .lm-auto-label { font-size: 11.5px; color: var(--primary); font-weight: 500; white-space: nowrap; flex-shrink: 0; } .Loan_modal .lm-balance { display: flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text); margin-bottom: 14px; } .Loan_modal .lm-balance strong { color: var(--danger); font-size: 15px; font-family: 'DM Mono', monospace; margin-left: auto; } .Loan_modal .lm-summary { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 4px 0 14px; font-size: 13px; } .Loan_modal .lm-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text); transition: background .2s; } .Loan_modal .lm-sum-row:last-child { border-bottom: none; } .Loan_modal .lm-sum-row .lm-sum-label { color: var(--text-muted); font-size: 12.5px; } .Loan_modal .lm-sum-row .lm-sum-val { font-family: 'DM Mono', monospace; font-size: 13px; } .Loan_modal .lm-sum-row.lm-sum-discount .lm-sum-val { color: var(--danger); } .Loan_modal .lm-sum-row.lm-sum-total { background: var(--surface2); font-weight: 700; padding: 11px 14px; } .Loan_modal .lm-sum-row.lm-sum-total .lm-sum-label { color: var(--text); font-weight: 700; font-size: 13.5px; } .Loan_modal .lm-sum-row.lm-sum-total .lm-sum-val { color: var(--success); font-size: 15px; font-weight: 700; } .Loan_modal .lm-save-btn { width: 100%; height: 46px; border: none; border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 14px; color: #fff; font-family: 'DM Sans', sans-serif; letter-spacing: .1px; transition: filter .15s, transform .1s; } .Loan_modal .lm-save-btn:hover { filter: brightness(1.09); } .Loan_modal .lm-save-btn:active { transform: scale(.98); } .Loan_modal .lm-save-blue { background: var(--primary); } .Loan_modal .lm-save-green { background: var(--success); } [data-theme="dark"] .Loan_modal { box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3); } [data-theme="dark"] .Loan_modal .lm-field input, [data-theme="dark"] .Loan_modal .lm-field select, [data-theme="dark"] .Loan_modal .lm-field textarea { color-scheme: dark; } [data-theme="dark"] .Loan_modal .lm-save-blue { background: var(--primary); } [data-theme="dark"] .Loan_modal .lm-save-green { background: var(--success); } @media (max-width: 1024px) { .Loan_modal { max-width: 540px; padding: 20px 18px 16px; } .Loan_modal .lm-row.lm-three { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .Loan_modal { max-width: 100%; border-radius: 14px 14px 0 0; padding: 18px 16px 14px; max-height: 92vh; } .modal-backdrop { align-items: flex-end; padding: 0; } .Loan_modal .lm-row, .Loan_modal .lm-row.lm-three { grid-template-columns: 1fr; gap: 10px; } .Loan_modal .lm-header h2 { font-size: 16px; } .Loan_modal .lm-save-btn { height: 44px; font-size: 14px; } .Loan_modal .lm-calc { padding: 12px 12px 8px; } .Loan_modal .lm-date-row { flex-wrap: wrap; } .Loan_modal .lm-auto-label { width: 100%; } } @media (max-width: 480px) { .Loan_modal { padding: 14px 12px 12px; } .Loan_modal .lm-header { margin-bottom: 14px; padding-bottom: 10px; } .Loan_modal .lm-field input, .Loan_modal .lm-field select { font-size: 13px; padding: 8px 10px; } .Loan_modal .lm-summary { font-size: 12px; } .Loan_modal .lm-sum-row { padding: 8px 12px; } .Loan_modal .lm-balance { font-size: 12px; } .Loan_modal .toggle-btn { font-size: 12px; padding: 7px 8px; } } /* ═══════════════════════════════════════════════════════════════════ DASHBOARD — Loan Summary Cards (.dash-loan-*) ═══════════════════════════════════════════════════════════════════ */ .dash-loan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .dash-loan-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow .15s; } .dash-loan-card:hover { box-shadow: var(--shadow); } .dash-loan-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .dash-loan-card-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .dash-loan-card-title { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); flex: 1; min-width: 0; } .dash-loan-card-link { font-size: 12px; font-weight: 600; color: var(--primary); background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; font-family: 'DM Sans', sans-serif; transition: opacity .15s; } .dash-loan-card-link:hover { opacity: .75; } .dash-loan-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .dash-loan-stat-label { font-size: 10px; color: var(--text-muted); font-weight: 500; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-loan-stat-val { font-size: 15px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 900px) { .dash-loan-grid { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 480px) { .dash-loan-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .dash-loan-stat-val { font-size: 13px; } .dash-loan-card { padding: 14px; } .dash-loan-card-title { font-size: 10px; } } /* ═══════════════════════════════════════════════════════════════════ DASHBOARD — ARAP (Receivables / Payables) Cards v19 ═══════════════════════════════════════════════════════════════════ */ .dash-arap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .dash-arap-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow .15s; } .dash-arap-card:hover { box-shadow: var(--shadow); } .dash-receivables-card { border-left: 3px solid var(--success); } .dash-payable-card { border-left: 3px solid var(--danger); } .dash-arap-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); } .dash-receivables-card .dash-arap-card-header { color: var(--success); } .dash-payable-card .dash-arap-card-header { color: var(--danger); } .dash-arap-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--primary); background: none; border: none; cursor: pointer; padding: 0; font-family: 'DM Sans', sans-serif; transition: opacity .15s; text-transform: none; letter-spacing: 0; } .dash-arap-link:hover { opacity: .7; } .dash-arap-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .dash-arap-label { font-size: 10px; color: var(--text-muted); font-weight: 500; margin-bottom: 4px; } .dash-arap-val { font-size: 15px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--text); } .dash-arap-grid-table { margin-bottom: 24px; } @media (max-width: 900px) { .dash-arap-grid { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 480px) { .dash-arap-stats { grid-template-columns: 1fr 1fr; } .dash-arap-val { font-size: 13px; } .dash-arap-card { padding: 14px; } } /* ═══════════════════════════════════════════════════════════════════ DASHBOARD — User List Widget v20 ═══════════════════════════════════════════════════════════════════ */ .dash-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .dash-user-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; } .dash-user-card:hover { box-shadow: var(--shadow); } .dash-user-card.dash-user-online { border-left: 3px solid #22c55e; } .dash-user-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; position: relative; } .dash-user-dot { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); } .dash-dot-on { background: #22c55e; } .dash-dot-off { background: #94a3b8; } .dash-user-info { flex: 1; min-width: 0; } .dash-user-name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-user-desig { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .dash-user-badge { font-size: 10px; font-weight: 700; color: #16a34a; background: #dcfce7; padding: 2px 7px; border-radius: 100px; flex-shrink: 0; letter-spacing: .3px; } [data-theme="dark"] .dash-user-badge { color: #4ade80; background: rgba(74,222,128,.15); } @media (max-width: 768px) { .dash-user-grid { grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); } } @media (max-width: 480px) { .dash-user-grid { grid-template-columns: 1fr 1fr; } .dash-user-name { font-size: 11px; } } /* ══════════════════════════════════════════════════════════════════ SHARED FORM FIELD SYSTEM — txn-rf / txn-rl / txn-ri Used by: transactions.php, ManageCheques.php, and any modal ══════════════════════════════════════════════════════════════════ Layout: label LEFT (fixed width, right-aligned) + input RIGHT (flex:1)
Modifiers: .txn-rf-top → label aligns to top (for textarea) .txn-df → alias for inline date row ══════════════════════════════════════════════════════════════════ */ /* ── Row ──────────────────────────────────────────────────────── */ .txn-rf { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; } /* ── Label ────────────────────────────────────────────────────── */ .txn-rl { font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 96px; flex-shrink: 0; text-align: right; white-space: nowrap; line-height: 1.4; } /* ── Input / Select / Textarea ────────────────────────────────── */ .txn-ri { flex: 1; min-width: 0; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text); font-size: 13px; font-family: 'DM Sans', sans-serif; transition: border-color .15s, background .15s; box-sizing: border-box; } .txn-ri:focus { outline: none; border-color: var(--primary); } .txn-ri::placeholder { color: var(--text-muted); } select.txn-ri { cursor: pointer; } /* Readonly — display value, not editable */ .txn-ri[readonly] { background: var(--surface2); color: var(--text); cursor: default; font-weight: 700; font-family: 'DM Mono', monospace; text-align: right; border-color: var(--border); } .txn-ri[readonly]:focus { border-color: var(--border); } /* Textarea */ .txn-ta { resize: vertical; min-height: 68px; line-height: 1.5; } /* ── Modifiers ────────────────────────────────────────────────── */ /* Date row: keep inline */ .txn-df { flex-direction: row; align-items: center; } .txn-df .txn-rl { min-width: 96px; text-align: right; } .txn-df .txn-ri { flex: 1; min-width: 0; } /* Textarea row: label top-aligned */ .txn-rf-top { align-items: flex-start; } .txn-rf-top .txn-rl { padding-top: 9px; } /* ── Dynamic panel (method-specific right panel) ──────────────── */ .txn-dp { display: flex; flex-direction: column; gap: 8px; } /* ── Toggle pill (Single / Multiple, Cash / Bank) ─────────────── */ .txn-toggle-wrap, .txn-bd-toggle-wrap { width: 100%; background: #1f6fff; padding: 5px; border-radius: 8px; display: flex; gap: 5px; margin-bottom: 2px; } .txn-tb { flex: 1; height: 26px; border: none; outline: none; border-radius: 6px; background: transparent; color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: background .22s ease, color .22s ease, box-shadow .22s ease; } .txn-tb:hover { color: #fff; } .txn-ta-active { background: #ffffff; color: #1a1a2e; box-shadow: 0 2px 8px rgba(0,0,0,.18); } /* ── Add button (Multiple cheque + Add) ───────────────────────── */ .txn-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif; background: var(--text); color: var(--surface); border: none; border-radius: 8px; cursor: pointer; transition: opacity .15s; align-self: flex-start; } .txn-add-btn:hover { opacity: .82; } /* ── Cheque list (Multiple mode) ──────────────────────────────── */ .txn-chq-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .txn-chq-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 6px 0; } .txn-chq-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; } .txn-chq-info { flex: 1; min-width: 0; } .txn-chq-bank { font-size: 11px; font-weight: 600; color: var(--primary); margin-bottom: 2px; } .txn-chq-meta { display: flex; gap: 8px; flex-wrap: wrap; } .txn-chq-meta span { font-size: 10.5px; color: var(--text-muted); } .txn-chq-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .txn-chq-amt { font-size: 13px; font-weight: 700; font-family: 'DM Mono',monospace; color: var(--text); } .txn-chq-del { background: none; border: none; cursor: pointer; color: var(--danger); font-size: 13px; padding: 2px 4px; border-radius: 4px; transition: background .12s; } .txn-chq-del:hover { background: rgba(220,38,38,.1); } /* ── Inner overlay modal (Add Cheque) ─────────────────────────── */ .txn-inner-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.18); width: 460px; max-width: 95vw; animation: slideUp .18s ease; } .txn-inner-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .txn-inner-title { font-size: 15px; font-weight: 700; color: var(--text); } .txn-inner-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .txn-inner-ftr { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE — form fields adapt at each breakpoint ══════════════════════════════════════════════════════════════════ */ /* Tablet (≤ 900px) — shrink label min-width slightly */ @media (max-width: 900px) { .txn-rl { min-width: 84px; } } /* Phablet (≤ 600px) — stack label ABOVE input */ @media (max-width: 600px) { .txn-rf, .txn-df { flex-direction: column; align-items: stretch; gap: 4px; } .txn-rl { min-width: 0; text-align: left; font-size: 11px; } .txn-rf-top .txn-rl { padding-top: 0; } .txn-ri { width: 100%; } .txn-ri[readonly] { text-align: left; } /* Toggle pill — smaller text */ .txn-tb { font-size: 12px; height: 28px; } } /* Small phone (≤ 400px) */ @media (max-width: 400px) { .txn-ri { font-size: 12px; padding: 7px 9px; } .txn-rl { font-size: 10.5px; } .txn-inner-modal { width: 95vw; } }