/* ============================================================ Spectlance Modern Theme — main stylesheet ============================================================ */ /* Google Font loaded via layout */ :root { --sidebar-bg: #0f172a; --sidebar-hover: rgba(255,255,255,.06); --sidebar-active: rgba(99,102,241,.18); --sidebar-text: rgba(255,255,255,.60); --sidebar-text-h: rgba(255,255,255,.95); --sidebar-accent: #6366f1; --sidebar-w: 260px; --topbar-h: 62px; --primary: #6366f1; --primary-rgb: 99,102,241; --primary-dark: #4f46e5; --primary-light: #eef2ff; --success: #10b981; --success-light: #d1fae5; --warning: #f59e0b; --warning-light: #fef3c7; --danger: #ef4444; --danger-light: #fee2e2; --info: #3b82f6; --info-light: #dbeafe; --purple: #8b5cf6; --purple-light: #ede9fe; --cyan: #06b6d4; --cyan-light: #cffafe; --orange: #f97316; --orange-light: #ffedd5; --body-bg: #f1f5f9; --card-bg: #ffffff; --text: #1e293b; --text-secondary: #64748b; --text-muted: #94a3b8; --border: #e2e8f0; --radius: 12px; --radius-sm: 8px; --radius-xs: 6px; --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.07); --shadow: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 10px 30px rgba(0,0,0,.12); --transition: all .2s ease; } *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--body-bg); color: var(--text); font-size: 14px; line-height: 1.6; margin: 0; } /* ── LAYOUT ─────────────────────────────────────────────── */ .app-wrapper { display: flex; min-height: 100vh; } /* ── SIDEBAR ────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 1000; display: flex; flex-direction: column; transition: transform .3s ease; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; } .sidebar::-webkit-scrollbar { width: 3px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; } /* Logo strip */ .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 20px; height: var(--topbar-h); border-bottom: 1px solid rgba(255,255,255,.07); text-decoration: none; flex-shrink: 0; } .sidebar-logo-mark { width: 34px; height: 34px; background: var(--sidebar-accent); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; } .sidebar-logo-name { color: #fff; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* User card */ .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.07); } .sidebar-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sidebar-accent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0; overflow: hidden; } .sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .sidebar-user-name { color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { color: var(--sidebar-text); font-size: 11px; white-space: nowrap; } /* Nav */ .sidebar-nav { padding: 8px 0; flex: 1; } .nav-section { padding: 16px 20px 4px; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(255,255,255,.28); } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: var(--sidebar-text); font-size: 13.5px; font-weight: 400; text-decoration: none; cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: var(--transition); } .nav-link:hover, .nav-link:focus { background: var(--sidebar-hover); color: var(--sidebar-text-h); text-decoration: none; outline: none; } .nav-link.active { background: var(--sidebar-active); color: #fff; } .nav-link.active .nav-ico { color: var(--sidebar-accent); } .nav-ico { width: 18px; height: 18px; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(255,255,255,.42); transition: var(--transition); } .nav-link:hover .nav-ico { color: rgba(255,255,255,.75); } .nav-label { flex: 1; } .nav-arrow { font-size: 11px; color: rgba(255,255,255,.28); transition: transform .2s ease; } .nav-item.open > .nav-link .nav-arrow { transform: rotate(90deg); } /* Submenu */ .nav-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: rgba(0,0,0,.18); } .nav-item.open > .nav-sub { max-height: 800px; } .nav-sub a { display: block; padding: 8px 20px 8px 48px; color: rgba(255,255,255,.50); font-size: 13px; text-decoration: none; transition: var(--transition); } .nav-sub a:hover { color: rgba(255,255,255,.88); text-decoration: none; } /* Overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 999; } .sidebar-overlay.active { display: block; } /* ── MAIN CONTENT ────────────────────────────────────────── */ .main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; } /* ── TOPBAR ──────────────────────────────────────────────── */ .topbar { height: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 10px; position: sticky; top: 0; z-index: 100; } .topbar-toggle { width: 36px; height: 36px; border: none; background: none; cursor: pointer; display: none; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-secondary); transition: var(--transition); font-size: 18px; } .topbar-toggle:hover { background: var(--body-bg); color: var(--text); } .topbar-brand { display: none; font-weight: 700; font-size: 15px; color: var(--text); } .topbar-spacer { flex: 1; } .topbar-actions { display: flex; align-items: center; gap: 6px; } /* Credits/admin badge */ .topbar-credits { display: flex; align-items: center; gap: 6px; background: var(--primary-light); color: var(--primary-dark); padding: 5px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 500; white-space: nowrap; } .topbar-credits a { color: var(--primary-dark); font-weight: 600; margin-left: 8px; } .topbar-credits a:hover { text-decoration: underline; } .topbar-admin-badge { background: #fef3c7; color: #92400e; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: .4px; } /* Icon buttons */ .topbar-icon-btn { width: 36px; height: 36px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-secondary); transition: var(--transition); position: relative; font-size: 18px; } .topbar-icon-btn:hover { background: var(--body-bg); color: var(--text); } .topbar-badge { position: absolute; top: 4px; right: 4px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* Language select */ .topbar-lang { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 12.5px; color: var(--text-secondary); background: #fff; cursor: pointer; } .topbar-lang:focus { outline: none; border-color: var(--primary); } /* User dropdown */ .topbar-user-wrap { position: relative; } .topbar-user { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); } .topbar-user:hover { background: var(--body-bg); } .topbar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; overflow: hidden; } .topbar-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .topbar-user-info { line-height: 1.25; } .topbar-user-name { font-size: 13px; font-weight: 500; color: var(--text); } .topbar-user-role { font-size: 11px; color: var(--text-secondary); } /* Dropdown panel */ .dropdown-panel { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 200px; padding: 6px; display: none; z-index: 1001; } .dropdown-panel.show { display: block; } .dropdown-panel a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--text); font-size: 13.5px; text-decoration: none; border-radius: var(--radius-sm); transition: var(--transition); } .dropdown-panel a:hover { background: var(--body-bg); text-decoration: none; } .dropdown-panel a i { font-size: 16px; color: var(--text-secondary); } .dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; } /* ── PAGE CONTENT ────────────────────────────────────────── */ .page-content { flex: 1; padding: 24px; background: #fff; } /* Breadcrumb */ .breadcrumb { background: none; padding: 0; margin-bottom: 18px; font-size: 13px; } .breadcrumb-item { color: var(--text-secondary); } .breadcrumb-item.active { color: var(--text); font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* Page title */ .page-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 20px; } /* ── STAT CARDS ──────────────────────────────────────────── */ .stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); transition: var(--transition); text-decoration: none; display: block; color: var(--text); height: 100%; } .stat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; color: var(--text); } .stat-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; } .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .si-primary { background: var(--primary-light); color: var(--primary); } .si-success { background: var(--success-light); color: var(--success); } .si-warning { background: var(--warning-light); color: var(--warning); } .si-danger { background: var(--danger-light); color: var(--danger); } .si-info { background: var(--info-light); color: var(--info); } .si-purple { background: var(--purple-light); color: var(--purple); } .si-cyan { background: var(--cyan-light); color: var(--cyan); } .si-orange { background: var(--orange-light); color: var(--orange); } .stat-value { font-size: 28px; font-weight: 700; line-height: 1.2; margin-bottom: 3px; color: var(--text); } .stat-label { font-size: 13px; color: var(--text-secondary); font-weight: 400; } .stat-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); } .stat-link { font-size: 12px; color: var(--primary); font-weight: 500; } .stat-link:hover { text-decoration: underline; } /* ── CARDS ───────────────────────────────────────────────── */ .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); background: none; border-radius: var(--radius) var(--radius) 0 0; display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 14.5px; font-weight: 600; color: var(--text); margin: 0; } .card-body { padding: 20px; } .card-footer { padding: 12px 20px; border-top: 1px solid var(--border); background: #fafafa; border-radius: 0 0 var(--radius) var(--radius); font-size: 13px; } /* element-wrapper compatibility */ .element-wrapper { margin-bottom: 24px; } .element-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .element-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); } .element-box-tp { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } /* ── TABLES ──────────────────────────────────────────────── */ .table { font-size: 13.5px; margin-bottom: 0; } .table thead th { font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); border-bottom: 2px solid var(--border); border-top: none; padding: 12px 16px; background: #f8fafc; } .table td { padding: 11px 16px; vertical-align: middle; border-top: 1px solid #f1f5f9; } .table tbody tr:hover { background: #f8fafc; } .table-responsive { border-radius: var(--radius); } /* ── FORMS ───────────────────────────────────────────────── */ .form-control { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 14px; color: var(--text); transition: var(--transition); background: #fff; height: auto; } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12); outline: none; } .form-group label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; } .form-text { font-size: 12px; color: var(--text-muted); } /* ── BUTTONS ─────────────────────────────────────────────── */ .btn { border-radius: var(--radius-sm); font-weight: 500; font-size: 13.5px; padding: 9px 18px; transition: var(--transition); border: none; cursor: pointer; font-family: inherit; } .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--primary-rgb),.35); } .btn-success { background: var(--success); border-color: var(--success); color: #fff; } .btn-success:hover { background: #059669; border-color: #059669; color: #fff; } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; } .btn-info { background: var(--info); border-color: var(--info); color: #fff; } .btn-outline-primary { border: 1.5px solid var(--primary); color: var(--primary); background: transparent; } .btn-outline-primary:hover { background: var(--primary); color: #fff; } .btn-sm { padding: 5px 12px; font-size: 12.5px; } .btn-lg { padding: 12px 24px; font-size: 15px; } /* ── BADGES ──────────────────────────────────────────────── */ .badge { border-radius: 6px; font-weight: 500; font-size: 11px; padding: 3px 8px; } .badge-primary { background: var(--primary-light); color: var(--primary); } .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-info { background: var(--info-light); color: var(--info); } /* ── ALERTS ──────────────────────────────────────────────── */ .alert { border: none; border-radius: var(--radius-sm); padding: 13px 16px; font-size: 13.5px; } .alert-success { background: var(--success-light); color: #065f46; } .alert-danger { background: var(--danger-light); color: #991b1b; } .alert-warning { background: var(--warning-light); color: #92400e; } .alert-info { background: var(--info-light); color: #1e40af; } /* ── FOOTER ──────────────────────────────────────────────── */ .app-footer { background: #fff; border-top: 1px solid var(--border); padding: 12px 24px; font-size: 12.5px; color: var(--text-muted); text-align: center; } /* legacy footer-login class */ .footer-login { background: #fff; border-top: 1px solid var(--border); padding: 12px 24px; font-size: 12.5px; color: var(--text-muted); text-align: center; } /* ── CHART CONTAINER ─────────────────────────────────────── */ .chart-container { position: relative; width: 100%; } /* ── DASHBOARD TABLE ─────────────────────────────────────── */ .dash-table-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .dash-table-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .dash-table-title { font-size: 14.5px; font-weight: 600; color: var(--text); margin: 0; } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 991.98px) { .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } .topbar-toggle { display: flex; } .topbar-brand { display: block; } .topbar-credits { display: none; } .topbar-user-info { display: none; } .topbar-lang { display: none; } } @media (max-width: 575.98px) { .page-content { padding: 14px; } .stat-value { font-size: 24px; } .topbar { padding: 0 14px; } } /* ── LOGIN / AUTH ────────────────────────────────────────── */ .auth-page { min-height: 100vh; display: flex; } .auth-brand-logo { position: fixed; top: 20px; left: 28px; z-index: 999; } .auth-brand-logo img { height: 90px; max-width: 300px; object-fit: contain; } .auth-left { flex: 0 0 46%; background: linear-gradient(160deg, #eef2ff 0%, #faf5ff 55%, #fff8ed 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 36px 32px; position: relative; overflow: hidden; } /* Subtle radial colour blushes */ .auth-left::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 28% 38%, rgba(99,102,241,.07) 0%, transparent 58%), radial-gradient(ellipse at 72% 78%, rgba(245,158,11,.07) 0%, transparent 58%); } /* Illustration — fills the whole panel behind the content card */ .auth-lady-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; user-select: none; z-index: 0; } /* Frosted-glass card pinned near the top, overlapping the illustration */ .auth-left-content { position: relative; z-index: 2; flex-shrink: 0; background: rgba(255,255,255,.52); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.45); border-radius: 18px; padding: 22px 24px; max-width: 400px; width: 100%; box-shadow: 0 4px 28px rgba(99,102,241,.12); } .auth-logo { margin-bottom: 24px; } .auth-logo-mark { width: 64px; height: 64px; border-radius: 18px; background: var(--sidebar-accent); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #fff; margin: 0 auto 12px; } .auth-logo-name { color: #1e293b; font-size: 22px; font-weight: 700; letter-spacing: -.3px; } .auth-tagline { color: #374151; font-size: 14.5px; font-weight: 500; margin-bottom: 18px; line-height: 1.65; } .auth-features { list-style: none; padding: 0; margin: 0; text-align: left; } .auth-features li { display: flex; align-items: flex-start; gap: 12px; color: #374151; font-size: 13.5px; margin-bottom: 13px; } .auth-features li i { width: 22px; height: 22px; border-radius: 6px; background: rgba(99,102,241,.13); display: flex; align-items: center; justify-content: center; color: #6366f1; font-size: 13px; flex-shrink: 0; margin-top: 1px; } .auth-right { flex: 1; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 40px; overflow-y: auto; } .auth-form-wrap { width: 100%; max-width: 400px; } .auth-form-logo { text-align: center; margin-bottom: 24px; } .auth-form-logo img { height: 110px; max-width: 300px; width: auto; object-fit: contain; display: block; margin: 0 auto; } .auth-form-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .auth-form-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 28px; } .auth-form .form-control { border: 1.5px solid #e2e8f0; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 14px; } .auth-form .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10); } .auth-form label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; } .btn-auth { width: 100%; padding: 12px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: var(--transition); font-family: inherit; } .btn-auth:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--primary-rgb),.35); } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-divider span { font-size: 12px; color: var(--text-muted); } .auth-links { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 13px; } .auth-links a { color: var(--primary); text-decoration: none; } .auth-links a:hover { text-decoration: underline; } .auth-footer { margin-top: 32px; font-size: 12px; color: var(--text-muted); text-align: center; } .auth-footer a { color: var(--text-secondary); } .auth-terms { font-size: 12px; color: var(--text-muted); margin-top: 16px; text-align: center; } .auth-terms a { color: var(--primary); } @media (max-width: 767.98px) { .auth-left { display: none; } .auth-right { padding: 32px 24px; } .auth-form-wrap { max-width: 100%; } } /* ── STATIC PAGE (privacy/terms) ─────────────────────────── */ .static-page-wrap { max-width: 780px; margin: 0 auto; } .static-page-wrap h1 { font-size: 26px; font-weight: 700; margin-bottom: 8px; } .static-page-wrap h2 { font-size: 18px; font-weight: 600; margin-top: 28px; margin-bottom: 10px; } .static-page-wrap p, .static-page-wrap li { font-size: 14.5px; line-height: 1.8; color: var(--text-secondary); } .static-page-wrap ul { padding-left: 20px; } /* ── MISC UTILITIES ──────────────────────────────────────── */ .text-primary-mod { color: var(--primary) !important; } .bg-primary-mod { background: var(--primary) !important; } .rounded-mod { border-radius: var(--radius) !important; } .shadow-mod { box-shadow: var(--shadow) !important; } /* GridView Kartik compat */ .grid-view { overflow-x: auto; } .kv-grid-container table { font-size: 13.5px; } .kv-panel-before .panel-default { border: 1px solid var(--border); border-radius: var(--radius); } /* Active form error */ .help-block { font-size: 12px; color: var(--danger); margin-top: 4px; } .has-error .form-control { border-color: var(--danger); } .has-error .control-label { color: var(--danger); } /* ── SIMULATION BAR ──────────────────────────────────────── */ .simulation-bar { background: linear-gradient(90deg, #d97706, #f59e0b); color: #fff; padding: 9px 24px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; position: sticky; top: 0; z-index: 200; } .sim-end-btn { margin-left: auto; background: rgba(0,0,0,.18); color: #fff; padding: 5px 14px; border-radius: 6px; text-decoration: none; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: all .2s ease; white-space: nowrap; } .sim-end-btn:hover { background: rgba(0,0,0,.32); text-decoration: none; color: #fff; } /* ── DARK MODE ────────────────────────────────────────────── */ [data-theme="dark"] { --body-bg: #0f172a; --text: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --border: rgba(255,255,255,.08); --primary-light: rgba(99,102,241,.18); --primary-dark: #818cf8; --success-light: rgba(16,185,129,.15); --warning-light: rgba(245,158,11,.15); --danger-light: rgba(239,68,68,.15); --info-light: rgba(59,130,246,.15); --purple-light: rgba(139,92,246,.15); --cyan-light: rgba(6,182,212,.15); --orange-light: rgba(249,115,22,.15); } [data-theme="dark"] .topbar { background: #1e293b; border-bottom-color: rgba(255,255,255,.07); } [data-theme="dark"] .topbar-lang { background: #0f172a; border-color: rgba(255,255,255,.1); color: var(--text-secondary); } [data-theme="dark"] .topbar-icon-btn:hover { background: rgba(255,255,255,.07); color: var(--text); } [data-theme="dark"] .topbar-user:hover { background: rgba(255,255,255,.07); } [data-theme="dark"] .topbar-admin-badge { background: rgba(245,158,11,.15); color: #fbbf24; } [data-theme="dark"] .topbar-credits { background: rgba(99,102,241,.15); color: #818cf8; } [data-theme="dark"] .topbar-credits a { color: #818cf8; } [data-theme="dark"] .topbar-user-name { color: var(--text); } [data-theme="dark"] .topbar-user-role { color: var(--text-secondary); } [data-theme="dark"] .stat-card { background: #1e293b; } [data-theme="dark"] .stat-card:hover { background: #253347; } [data-theme="dark"] .card { background: #1e293b; } [data-theme="dark"] .card-footer { background: rgba(255,255,255,.03); } [data-theme="dark"] .element-box, [data-theme="dark"] .element-box-tp { background: #1e293b; } [data-theme="dark"] .dash-table-wrap { background: #1e293b; } [data-theme="dark"] .dropdown-panel { background: #1e293b; border-color: rgba(255,255,255,.1); } [data-theme="dark"] .dropdown-panel a { color: var(--text); } [data-theme="dark"] .dropdown-panel a:hover { background: rgba(255,255,255,.06); } [data-theme="dark"] .dropdown-divider { border-top-color: rgba(255,255,255,.08); } [data-theme="dark"] .app-footer, [data-theme="dark"] .footer-login { background: #1e293b; border-top-color: rgba(255,255,255,.07); } [data-theme="dark"] .form-control { background: #0f172a; border-color: rgba(255,255,255,.12); color: var(--text); } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } [data-theme="dark"] .table thead th { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.08); } [data-theme="dark"] .table td { border-top-color: rgba(255,255,255,.05); } [data-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,.04); } [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item.active { color: var(--text-secondary); } [data-theme="dark"] .nav-sub { background: rgba(0,0,0,.25); } [data-theme="dark"] .page-content { background: var(--body-bg); } [data-theme="dark"] .app-footer { background: #1e293b; } /* ── QUICK ACTION TILES ──────────────────────────────────── */ .quick-action-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px; border-radius: var(--radius-sm); text-decoration: none; transition: all .2s ease; gap: 8px; } .quick-action-tile i { font-size: 24px; } .quick-action-tile span { font-size: 12px; font-weight: 500; } /* ── GRIDVIEW HEADER + FOOTER ROWS ──────────────────────── */ .gv-header-row, .gv-footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 20px; background: var(--card-bg, #fff); } .gv-header-row { border-bottom: 1px solid var(--border, #e2e8f0); } .gv-footer-row { border-top: 1px solid var(--border, #e2e8f0); } /* Summary text (moved from above the table into the header row) */ .gv-summary { font-size: 13px; color: var(--text-muted, #94a3b8); font-weight: 500; } /* Per-page selector pill */ .gv-pp { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary, #64748b); background: var(--body-bg, #f1f5f9); border: 1.5px solid var(--border, #e2e8f0); border-radius: 10px; padding: 6px 14px 6px 12px; white-space: nowrap; flex-shrink: 0; } .gv-pp select { border: none; background: transparent; font-size: 13px; font-weight: 600; color: #6366f1; cursor: pointer; padding: 0 2px; outline: none; appearance: auto; -webkit-appearance: auto; } .gv-pp select:focus { outline: none; } .gv-pp:focus-within { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99,102,241,.1); } /* ── MODERN PAGINATION ───────────────────────────────────── */ ul.pagination { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; list-style: none; /* standalone (outside .gv-footer-row) gets top spacing */ } ul.pagination > li { float: none !important; display: block; margin: 0; padding: 0; border: none; background: none; } ul.pagination > li > a, ul.pagination > li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 9px; border: 1.5px solid var(--border, #e2e8f0); background: var(--card-bg, #fff); color: var(--text-secondary, #475569); font-size: 13px; font-weight: 500; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s; white-space: nowrap; cursor: pointer; line-height: 1; box-sizing: border-box; } ul.pagination > li > a:hover { background: #f1f5f9; border-color: #a5b4fc; color: #6366f1; box-shadow: 0 2px 8px rgba(99,102,241,.12); transform: translateY(-1px); text-decoration: none !important; } ul.pagination > li.active > a, ul.pagination > li.active > span { background: #6366f1; border-color: #6366f1; color: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(99,102,241,.4); pointer-events: none; transform: translateY(-1px); } ul.pagination > li.disabled > a, ul.pagination > li.disabled > span { opacity: .35; cursor: not-allowed !important; pointer-events: none; background: #f8fafc; color: #94a3b8; border-color: var(--border, #e2e8f0); transform: none; box-shadow: none; } /* Prev / Next — indigo tint pill */ ul.pagination > li.prev > a, ul.pagination > li.next > a { padding: 0 16px; font-weight: 600; font-size: 13px; color: #6366f1; background: #eef2ff; border-color: #c7d2fe; letter-spacing: .01em; } ul.pagination > li.prev > a:hover, ul.pagination > li.next > a:hover { background: #e0e7ff; border-color: #a5b4fc; color: #4338ca; box-shadow: 0 3px 10px rgba(99,102,241,.18); } ul.pagination > li.prev.disabled > a, ul.pagination > li.next.disabled > a { background: #f8fafc; border-color: var(--border, #e2e8f0); color: #94a3b8; } /* When pagination sits inside the footer row, it right-aligns itself */ .gv-footer-row ul.pagination { justify-content: flex-end; } /* Standalone pagination (no footer row) gets top padding */ .grid-view > ul.pagination, ul.pagination:not(.gv-footer-row ul) { padding: 16px 0 8px; justify-content: center; } /* ── Dark mode ── */ [data-theme="dark"] .gv-header-row, [data-theme="dark"] .gv-footer-row { background: var(--card-bg, #1e293b); border-top-color: rgba(255,255,255,.07); } [data-theme="dark"] .gv-pp { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #94a3b8; } [data-theme="dark"] .gv-pp select { color: #a5b4fc; } [data-theme="dark"] ul.pagination > li > a, [data-theme="dark"] ul.pagination > li > span { background: #1e293b; border-color: rgba(255,255,255,.1); color: #94a3b8; } [data-theme="dark"] ul.pagination > li > a:hover { background: #334155; border-color: rgba(99,102,241,.5); color: #a5b4fc; box-shadow: 0 2px 8px rgba(99,102,241,.15); } [data-theme="dark"] ul.pagination > li.active > a, [data-theme="dark"] ul.pagination > li.active > span { background: #6366f1; border-color: #6366f1; color: #fff; } [data-theme="dark"] ul.pagination > li.prev > a, [data-theme="dark"] ul.pagination > li.next > a { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.25); color: #a5b4fc; } [data-theme="dark"] ul.pagination > li.prev > a:hover, [data-theme="dark"] ul.pagination > li.next > a:hover { background: rgba(99,102,241,.22); color: #c7d2fe; } .quick-action-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); text-decoration: none; }