/* ===================================================================== One Step ISP Solution — Core Theme Concept: "NOC Control Room" — dark navy canvas, teal signal-pulse accent, a restrained gold hairline reserved for premium/super-admin cues. Theme system: every surface color is a variable. [data-theme="light"] below swaps the whole palette in one place — no page should ever hardcode rgba(255,255,255,...) directly, use the --veil-* tokens instead so both modes stay correct automatically. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Color tokens */ --bg-canvas: #0A0E1A; --bg-panel: #12172A; --bg-panel-raised:#161C33; --border-hair: rgba(255,255,255,0.08); --text-primary: #E8ECF5; --text-muted: #7C859E; --accent-signal: #00D9C0; --accent-signal-dim: rgba(0,217,192,0.15); --accent-gold: #D4AF37; --state-danger: #FF5C72; --state-warning: #FFB454; --state-success: #37D67A; /* Veils — subtle surface tints used for hover states, chips, progress tracks, chat bubbles etc. Dark mode = white veils, light mode (below) swaps these to ink veils so nothing goes invisible. */ --veil-015: rgba(255,255,255,0.015); --veil-03: rgba(255,255,255,0.03); --veil-04: rgba(255,255,255,0.04); --veil-05: rgba(255,255,255,0.05); --veil-06: rgba(255,255,255,0.06); --veil-accent: rgba(0,180,255,0.12); --shadow-card: 0 20px 60px -20px rgba(0,0,0,0.6); /* Type */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-card: 14px; --radius-control: 8px; } * { box-sizing: border-box; } /* --------------------------------------------------------------------- Light mode — same tokens, swapped for a bright NOC console feel. Toggle sets data-theme="light" on (see /assets/js/theme-init.js). --------------------------------------------------------------------- */ [data-theme="light"] { --bg-canvas: #F3F5FA; --bg-panel: #FFFFFF; --bg-panel-raised: #FFFFFF; --border-hair: rgba(23,27,43,0.10); --text-primary: #171B2B; --text-muted: #656C82; --accent-signal: #00A392; --accent-signal-dim: rgba(0,163,146,0.12); --accent-gold: #A6791F; --state-danger: #E0435A; --state-warning: #C87F0A; --state-success: #1FA35C; --veil-015: rgba(23,27,43,0.02); --veil-03: rgba(23,27,43,0.035); --veil-04: rgba(23,27,43,0.045); --veil-05: rgba(23,27,43,0.05); --veil-06: rgba(23,27,43,0.065); --veil-accent: rgba(0,120,200,0.10); --shadow-card: 0 12px 32px -18px rgba(23,27,43,0.18); } [data-theme="light"] .glass-card { background: linear-gradient(180deg, #FFFFFF, #FBFCFE); } [data-theme="light"] .field-input { background: #F7F9FC; } [data-theme="light"] .btn-sm { background: #F7F9FC; } [data-theme="light"] .theme-toggle { background: #F7F9FC; } html, body { margin: 0; background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } /* ---- Theme toggle switch ---- */ .theme-toggle { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-hair); background: var(--veil-03); color: var(--text-primary); cursor: pointer; font-size: 15px; line-height: 1; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .theme-toggle:hover { border-color: var(--accent-signal); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0); } h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: -0.01em; } .font-mono { font-family: var(--font-mono); } a { color: var(--accent-signal); text-decoration: none; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* --------------------------------------------------------------------- Signal Pulse — signature motif (radar-style concentric rings) --------------------------------------------------------------------- */ .signal-pulse-field { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .signal-pulse-field::before, .signal-pulse-field::after { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--accent-signal); opacity: 0; animation: pulseRing 3.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; } .signal-pulse-field::after { animation-delay: 1.6s; } .signal-pulse-core { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-signal); box-shadow: 0 0 20px 4px var(--accent-signal-dim); z-index: 2; } @keyframes pulseRing { 0% { width: 14px; height: 14px; opacity: 0.65; border-width: 2px; } 100% { width: 420px; height: 420px; opacity: 0; border-width: 1px; } } /* --------------------------------------------------------------------- Glass Card --------------------------------------------------------------------- */ .glass-card { background: linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel)); border: 1px solid var(--border-hair); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } /* --------------------------------------------------------------------- Form Controls --------------------------------------------------------------------- */ .field-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: block; margin-bottom: 6px; } .field-input { width: 100%; padding: 12px 14px; background: var(--veil-03); border: 1px solid var(--border-hair); border-radius: var(--radius-control); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field-input:focus { outline: none; border-color: var(--accent-signal); box-shadow: 0 0 0 3px var(--accent-signal-dim); } .btn-primary { width: 100%; padding: 13px; background: var(--accent-signal); color: #05141A; font-family: var(--font-display); font-weight: 600; font-size: 14px; border: none; border-radius: var(--radius-control); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn-primary:hover { box-shadow: 0 8px 24px -8px var(--accent-signal-dim); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .alert-error { background: rgba(255,92,114,0.1); border: 1px solid rgba(255,92,114,0.35); color: var(--state-danger); padding: 10px 14px; border-radius: var(--radius-control); font-size: 13px; margin-bottom: 16px; } /* --------------------------------------------------------------------- Dashboard Shell --------------------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; background: var(--bg-panel); border-right: 1px solid var(--border-hair); padding: 24px 16px; flex-shrink: 0; } .sidebar-brand { font-family: var(--font-display); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 32px; color: var(--text-primary); } .sidebar-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-signal); box-shadow: 0 0 8px var(--accent-signal); } .nav-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 20px 8px 8px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-control); color: var(--text-muted); font-size: 14px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nav-item:hover { background: var(--veil-04); color: var(--text-primary); } .nav-item.active { background: var(--accent-signal-dim); color: var(--accent-signal); } .main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: 64px; border-bottom: 1px solid var(--border-hair); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .badge-role { font-size: 11px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--accent-gold); color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.05em; } .content-area { padding: 28px; flex: 1; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { padding: 20px; } .stat-card .stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .stat-card .stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-top: 8px; } .stat-card .stat-trend { font-size: 12px; margin-top: 4px; } .trend-up { color: var(--state-success); } .trend-down { color: var(--state-danger); } .fade-in { animation: fadeIn 0.4s ease both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------------- Module pages: page header, buttons, table, flash messages, modals --------------------------------------------------------------------- */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .page-header h2 { margin: 0; font-size: 20px; } .page-subtitle { color: var(--text-muted); font-size: 13px; margin-top: 4px; } .btn-sm { display: inline-block; padding: 7px 14px; font-size: 13px; font-family: var(--font-body); font-weight: 500; border-radius: var(--radius-control); cursor: pointer; border: 1px solid var(--border-hair); background: var(--veil-03); color: var(--text-primary); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; } .btn-sm:hover { border-color: var(--accent-signal); color: var(--accent-signal); } .btn-sm.btn-accent { background: var(--accent-signal); color: #05141A; border-color: var(--accent-signal); font-weight: 600; } .btn-sm.btn-accent:hover { color: #05141A; opacity: 0.9; } .btn-sm.btn-danger { color: var(--state-danger); border-color: rgba(255,92,114,0.35); } .btn-sm.btn-danger:hover { background: rgba(255,92,114,0.1); border-color: var(--state-danger); } .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 12px 16px; border-bottom: 1px solid var(--border-hair); } .data-table td { padding: 13px 16px; border-bottom: 1px solid var(--border-hair); } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--veil-015); } .tier-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; } .tier-tag.tier-lite { background: rgba(0,217,192,0.12); color: var(--accent-signal); } .tier-tag.tier-regular { background: rgba(255,180,84,0.12); color: var(--state-warning); } .tier-tag.tier-premium { background: rgba(212,175,55,0.14); color: var(--accent-gold); } .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; } .status-dot.active { background: var(--state-success); box-shadow: 0 0 6px var(--state-success); } .status-dot.inactive { background: var(--text-muted); } .status-dot.suspended { background: var(--state-warning); box-shadow: 0 0 6px var(--state-warning); } .status-dot.left { background: var(--state-danger); } .empty-state { text-align: center; padding: 48px 16px; color: var(--text-muted); font-size: 14px; } /* ---- Search / Filter bar ---- */ .filter-bar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; } .filter-bar .field-input { max-width: 260px; } .filter-bar select.field-input { max-width: 160px; } /* ---- Pagination ---- */ .pagination { display: flex; gap: 6px; justify-content: flex-end; margin-top: 18px; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-control); font-size: 13px; border: 1px solid var(--border-hair); color: var(--text-muted); } .pagination a:hover { border-color: var(--accent-signal); color: var(--accent-signal); } .pagination .current { background: var(--accent-signal-dim); color: var(--accent-signal); border-color: var(--accent-signal); } .section-title { font-family: var(--font-display); font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; padding-top: 6px; border-top: 1px solid var(--border-hair); } .section-title:first-child { border-top: none; padding-top: 0; } .flash-message { padding: 12px 16px; border-radius: var(--radius-control); font-size: 13px; margin-bottom: 20px; } .flash-success { background: rgba(55,214,122,0.1); border: 1px solid rgba(55,214,122,0.35); color: var(--state-success); } .flash-error { background: rgba(255,92,114,0.1); border: 1px solid rgba(255,92,114,0.35); color: var(--state-danger); } .flash-warning { background: rgba(255,181,71,0.1); border: 1px solid rgba(255,181,71,0.35); color: var(--state-warning); } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- Phase 13 — Responsive shell for tablet/mobile ছোট স্ক্রিনে fixed sidebar আর content-এর অর্ধেক জায়গা খেয়ে ফেলছিল এবং টেবিল/ফর্ম overflow করে ভাঙছিল — এই ব্লকটা সেটা ঠিক করে। --------------------------------------------------------------------- */ @media (max-width: 900px) { .app-shell { flex-direction: column; min-height: 0; } .sidebar { width: 100%; display: flex; align-items: center; gap: 4px; padding: 10px 12px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; border-right: none; border-bottom: 1px solid var(--border-hair); } .sidebar-brand { margin-bottom: 0; margin-right: 8px; flex-shrink: 0; } .nav-group-label { display: none; } .nav-item { padding: 8px 12px; flex-shrink: 0; } .main-area { min-width: 0; } .topbar { padding: 0 14px; height: auto; min-height: 56px; flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; } .content-area { padding: 16px; } .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat-card { padding: 14px; } .stat-card .stat-value { font-size: 22px; } .page-header { flex-direction: column; align-items: flex-start; gap: 10px; } .page-header > a, .page-header > .btn-sm, .page-header > .btn-primary { align-self: stretch; text-align: center; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-bar .field-input, .filter-bar select.field-input { max-width: none; width: 100%; } /* সব ডেটা টেবিল ছোট স্ক্রিনে horizontally স্ক্রল হবে, লেআউট ভাঙবে না */ .data-table { min-width: 640px; } } @media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } .login-card { padding: 24px 18px !important; } } .checkbox-row { display: flex; align-items: center; gap: 8px; padding-top: 8px; } .checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent-signal); } /* --------------------------------------------------------------------- Shared "veil" surface utilities — used by pages for badges, progress tracks, chat bubbles, hover states etc. instead of raw rgba(255,255,255,x) so they render correctly in both themes. --------------------------------------------------------------------- */ .veil-03 { background: var(--veil-03); } .veil-05 { background: var(--veil-05); } .veil-06 { background: var(--veil-06); } .bubble-accent { background: var(--veil-accent); }