/* ==================================================== PermitCore Admin Portal — Dark Theme ==================================================== */ :root { --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #818cf8; --accent: #06b6d4; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --dark: #0a0e1a; --dark-2: #0f1117; --dark-3: #161b27; --dark-4: #1e2535; --dark-5: #252d3d; --border: rgba(255,255,255,0.07); --border-bright: rgba(255,255,255,0.12); --text: #f1f5f9; --text-muted: #94a3b8; --text-dim: #7a8fa0; --card-bg: #161b27; --sidebar-w: 250px; --topbar-h: 60px; --radius: 10px; --radius-lg: 16px; --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-lg: 0 8px 40px rgba(0,0,0,0.6); } /* ==================================================== LIGHT THEME (applied when has class="light-theme") ==================================================== */ body.light-theme { --dark: #f0f4f8; --dark-2: #ffffff; --dark-3: #f8fafc; --dark-4: #e8edf2; --dark-5: #dde4ec; --border: rgba(0,0,0,0.09); --border-bright: rgba(0,0,0,0.15); --text: #1a2332; --text-muted: #4b5563; --text-dim: #6b7280; --card-bg: #ffffff; --shadow: 0 4px 24px rgba(0,0,0,0.08); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); } body.light-theme .sidebar { background: #ffffff; border-right: 1px solid var(--border); } body.light-theme .topbar { background: #ffffff; } body.light-theme .admin-layout { background: #f0f4f8; } body.light-theme code { background: rgba(99,102,241,0.08); color: #4f46e5; } body.light-theme .modal-content { background: #ffffff; } body.light-theme .btn-close { filter: none; } body.light-theme .form-control, body.light-theme .form-select { background: #f8fafc; border-color: rgba(0,0,0,0.12); color: var(--text); } body.light-theme .form-control:focus, body.light-theme .form-select:focus { background: #ffffff; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); } body.light-theme .table { --bs-table-bg: transparent; color: var(--text); } body.light-theme .dt-card { background: #ffffff; } body.light-theme .stat-card { background: #ffffff; } body.light-theme .card { background: #ffffff; border-color: var(--border); } body.light-theme .sidebar-nav .nav-section { color: #9ca3af; } body.light-theme .sidebar-user .user-name { color: var(--text); } body.light-theme .nav-link-active, body.light-theme .sidebar-nav a.active { background: rgba(99,102,241,0.1); } body.light-theme .nav-help-btn { color: var(--text-muted); } body.light-theme .nav-help-btn:hover { color: var(--text); background: rgba(0,0,0,0.04); } /* ==================================================== BOOTSTRAP DARK THEME OVERRIDES Map Bootstrap's color variables onto our dark palette so Bootstrap components (dt/dd, badges, .text-muted, code, breadcrumb) render consistently without manual inline-style patches in every Razor file. ==================================================== */ :root { --bs-body-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-emphasis-color: var(--text); --bs-link-color: var(--primary-light); --bs-link-hover-color: var(--primary-light); --bs-code-color: #c7d2fe; --bs-border-color: var(--border); } /* Definition lists — used in detail/view pages */ dl dt { color: #b0bec5; font-weight: 500; font-size: 0.82rem; padding-top: 0.2rem; } dl dd { color: var(--text); margin-bottom: 0.55rem; font-size: 0.875rem; } /* Inline code */ code { color: #c7d2fe; background: rgba(99,102,241,0.1); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.875em; } /* Bootstrap .text-muted and .text-secondary */ .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-muted) !important; } /* Breadcrumb */ .breadcrumb { margin-bottom: 0.4rem; } .breadcrumb-item, .breadcrumb-item a { color: var(--text-muted); font-size: 0.82rem; } .breadcrumb-item a:hover { color: var(--primary-light); } .breadcrumb-item.active { color: var(--text-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-dim); } /* Bootstrap badge variants used in detail views */ .badge.bg-success { background: rgba(16,185,129,0.15) !important; color: #34d399; border: 1px solid rgba(16,185,129,0.25); font-weight: 500; } .badge.bg-secondary { background: rgba(100,116,139,0.15) !important; color: #94a3b8; border: 1px solid rgba(100,116,139,0.25); font-weight: 500; } .badge.bg-info { background: rgba(6,182,212,0.15) !important; color: #67e8f9 !important; border: 1px solid rgba(6,182,212,0.25); font-weight: 500; } .badge.bg-warning { background: rgba(245,158,11,0.15) !important; color: #fcd34d !important; border: 1px solid rgba(245,158,11,0.25); font-weight: 500; } .badge.bg-danger { background: rgba(239,68,68,0.15) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,0.25); font-weight: 500; } /* hr */ hr { border-color: var(--border); opacity: 1; } * { box-sizing: border-box; } html, body { height: 100%; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--dark); color: var(--text); font-size: 0.875rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--primary-light); text-decoration: none; } a:hover { color: var(--primary-light); } /* ---- Loading Screen ---- */ .app-loading { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--dark); } .app-loading-inner { text-align: center; } .app-loading-logo { margin-bottom: 0.75rem; line-height: 0; } .app-loading-brand { font-size: 1.2rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.05em; } .app-loading-ring { width: 44px; height: 44px; border: 3px solid var(--dark-5); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 1rem auto 0; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ---- Layout ---- */ .admin-layout { display: flex; min-height: 100vh; } /* ==================================================== SIDEBAR ==================================================== */ .sidebar { width: var(--sidebar-w); min-height: 100vh; background: var(--dark-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; z-index: 200; } .sidebar-header { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; } .sidebar-logo-icon { width: 36px; height: 36px; flex-shrink: 0; line-height: 0; } .sidebar-logo-text { font-weight: 700; font-size: 1rem; color: var(--text); } .sidebar-logo-sub { font-size: 0.68rem; color: var(--text-dim); } .sidebar-user { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.65rem; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.72rem; color: white; flex-shrink: 0; } .user-name { font-size: 0.8rem; font-weight: 500; color: var(--text); line-height: 1.3; } .user-role { font-size: 0.68rem; color: var(--text-dim); } .sidebar-nav { list-style: none; padding: 0.75rem 0; margin: 0; flex: 1; overflow-y: auto; } .sidebar-nav .nav-section { padding: 0.9rem 1.25rem 0.3rem; font-size: 0.63rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); } .sidebar-nav li a, .sidebar-nav li .nav-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 1.25rem; color: var(--text-muted); font-size: 0.84rem; font-weight: 450; transition: all 0.15s; border-left: 2px solid transparent; } .sidebar-nav li a:hover { color: var(--text); background: rgba(255,255,255,0.03); border-left-color: var(--border-bright); } .sidebar-nav li a.active { color: var(--primary-light) !important; background: rgba(99,102,241,0.1); border-left-color: var(--primary); font-weight: 500; } .sidebar-nav .nav-icon { width: 18px; text-align: center; font-size: 0.88rem; } .nav-help-btn { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 1.25rem; width: 100%; color: var(--text-muted); background: none; border: none; cursor: pointer; font-size: 0.84rem; font-weight: 450; text-align: left; transition: all 0.15s; border-left: 2px solid transparent; } .nav-help-btn:hover { color: var(--text); background: rgba(255,255,255,0.03); border-left-color: var(--border-bright); } .sidebar-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); } .sidebar-footer .btn-link { color: var(--text-dim) !important; font-size: 0.82rem; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; width: 100%; background: none; border: none; cursor: pointer; } .sidebar-footer .btn-link:hover { color: #f87171 !important; } /* ==================================================== MAIN CONTENT ==================================================== */ .main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; background: var(--dark); } .topbar { height: var(--topbar-h); background: var(--dark-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 100; } .topbar-badge { background: rgba(99,102,241,0.22); border: 1px solid rgba(99,102,241,0.55); color: #c7d2fe; font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 20px; letter-spacing: 0.01em; } .page-content { padding: 1.75rem; flex: 1; } .search-result-row:hover { background: rgba(255,255,255,0.04); } /* ---- Page Header ---- */ .page-header { margin-bottom: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .page-header h1 { font-size: 1.45rem; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -0.02em; } .page-header p { color: var(--text-muted); margin: 0.2rem 0 0; font-size: 0.85rem; } /* ==================================================== CARDS ==================================================== */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 0.875rem 1.25rem; } .card-title { font-weight: 600; font-size: 0.88rem; color: var(--text); margin: 0; } .card-body { padding: 1.25rem; } /* ---- Stat Cards ---- */ .stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; position: relative; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .stat-card.sc-blue::before { background: linear-gradient(90deg, #6366f1, #818cf8); } .stat-card.sc-green::before { background: linear-gradient(90deg, #10b981, #34d399); } .stat-card.sc-purple::before { background: linear-gradient(90deg, #a855f7, #c084fc); } .stat-card.sc-orange::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .stat-card .card-body { padding: 1.25rem; } /* Simple stat-card variant (Tenants/Payments overview) skips the .card-body wrapper the richer Dashboard cards use — without this, .stat-value/.stat-label sit flush against the card's edge with no padding at all. Direct-child selector so it never double-pads the Dashboard variant, where .stat-value/.stat-label are nested inside .card-body > .stat-card-row instead. */ .stat-card > .stat-value { padding: 1.25rem 1.25rem 0; margin-top: 0; } .stat-card > .stat-label { padding: 0 1.25rem 1.25rem; } .stat-card-row { display: flex; align-items: center; justify-content: space-between; } .stat-icon-box { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } .si-blue { background: rgba(99,102,241,0.15); } .si-green { background: rgba(16,185,129,0.15); } .si-purple { background: rgba(168,85,247,0.15); } .si-orange { background: rgba(245,158,11,0.15); } .stat-value { font-size: 1.9rem; font-weight: 700; color: var(--text); line-height: 1; margin-top: 0.75rem; } .stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; } .stat-trend { font-size: 0.73rem; margin-top: 0.4rem; display: flex; align-items: center; gap: 0.2rem; } .trend-up { color: #34d399; } .trend-down { color: #f87171; } /* ---- Chart containers ---- */ .chart-container { position: relative; height: 220px; } .chart-container-sm { position: relative; height: 180px; } /* ==================================================== TABLES ==================================================== */ .table-dark-custom { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,0.018); --bs-table-hover-bg: rgba(255,255,255,0.03); --bs-table-border-color: var(--border); color: var(--text); margin-bottom: 0; } .table-dark-custom thead th { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); border-bottom: 1px solid var(--border-bright); padding: 0.75rem 1rem; white-space: nowrap; } .table-dark-custom tbody td { padding: 0.7rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--border); font-size: 0.84rem; } .table-dark-custom tbody tr:last-child td { border-bottom: none; } .table-dark-custom tbody tr:hover td { background: rgba(255,255,255,0.02); } .th-sortable { cursor: pointer; user-select: none; } .th-sortable:hover { color: var(--text-muted) !important; } .th-sort-icon { font-size: 0.55rem; opacity: 0.35; margin-left: 4px; vertical-align: middle; } .th-sort-icon.active { opacity: 1; color: var(--primary); } /* ── Generic data-table (used by WebhooksPage and similar) ── */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .data-table thead th { padding: 0.75rem 1.5rem; text-align: left; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table tbody td { padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: rgba(255,255,255,0.025); } /* ── Toast notifications ── */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; } .toast-item { display: flex; align-items: center; padding: 0.75rem 1.25rem; border-radius: 10px; font-size: 0.875rem; font-weight: 500; animation: toast-in 0.2s ease; min-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .toast-success { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4); color: #34d399; } .toast-error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); color: #f87171; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Data table card ─────────────────────────────────────── */ .dt-card { background: var(--card-bg); border: 1px solid var(--border-bright); border-radius: 12px; overflow: hidden; } /* Top bar */ .dt-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); gap: 12px; } .dt-top-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .dt-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .dt-title { font-size: 0.95rem; font-weight: 600; color: var(--text); white-space: nowrap; } .dt-count { font-size: 0.7rem; font-weight: 600; color: var(--text-dim); background: var(--dark-5); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; white-space: nowrap; } /* Filter bar */ .dt-filters { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.012); flex-wrap: nowrap; overflow-x: auto; } .dt-filter-select { height: 30px !important; background: var(--dark-5) !important; border: 1px solid var(--border-bright) !important; color: var(--text-muted) !important; border-radius: 7px !important; font-size: 0.78rem !important; padding: 0 10px !important; cursor: pointer; outline: none !important; -webkit-appearance: none; appearance: none; padding-right: 22px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; } .dt-filter-select:focus { border-color: var(--primary) !important; color: var(--text) !important; } .dt-filter-select option { background: var(--dark-4); color: var(--text); } .dt-filter-select.is-active { border-color: var(--primary) !important; color: var(--primary-light) !important; background-color: rgba(99,102,241,0.1) !important; } .dt-filter-clear { height: 30px; padding: 0 12px; background: transparent; border: 1px solid var(--border-bright); color: var(--text-dim); border-radius: 7px; font-size: 0.78rem; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 5px; } .dt-filter-clear:hover { border-color: var(--danger); color: var(--danger); } .dt-filter-divider { width: 1px; height: 18px; background: var(--border-bright); flex-shrink: 0; } .dt-filter-count { margin-left: auto; font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; } /* Toolbar search */ .dt-search { position: relative; flex-shrink: 0; } .dt-search input { height: 32px !important; width: 200px !important; background: var(--dark-5) !important; border: 1px solid var(--border-bright) !important; color: var(--text) !important; border-radius: 8px !important; padding: 0 12px 0 30px !important; font-size: 0.8rem !important; outline: none !important; transition: width 0.2s ease, border-color 0.15s; } .dt-search input:focus { width: 260px !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important; } .dt-search input::placeholder { color: var(--text-dim) !important; } .dt-search .dt-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 0.7rem; pointer-events: none; } /* User avatar */ .u-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; } /* Row checkbox */ .row-check { width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary); } .table-dark-custom thead th.cb-col, .table-dark-custom tbody td.cb-col { width: 44px; padding-right: 0; } /* Pagination footer */ .dt-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-top: 1px solid var(--border); gap: 12px; flex-wrap: nowrap; } .dt-rows-per-page { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; } .dt-rows-per-page select { height: 28px !important; background: var(--dark-5) !important; border: 1px solid var(--border-bright) !important; color: var(--text-muted) !important; border-radius: 6px !important; font-size: 0.78rem !important; padding: 0 6px !important; cursor: pointer; outline: none !important; } .dt-page-info { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; } .dt-pages { display: flex; align-items: center; gap: 3px; } .dt-pg { min-width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border-bright); background: transparent; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; transition: all 0.12s; } .dt-pg:hover:not(:disabled) { background: var(--dark-5); color: var(--text); } .dt-pg.cur { background: var(--primary); color: #fff; border-color: var(--primary); } .dt-pg:disabled { opacity: 0.25; cursor: default; } .dt-pg-dots { color: var(--text-dim); font-size: 0.78rem; padding: 0 4px; } /* Empty state */ .dt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 20px; gap: 8px; color: var(--text-dim); font-size: 0.85rem; } .dt-empty i { font-size: 2.2rem; opacity: 0.2; margin-bottom: 4px; } .dt-empty a { color: var(--primary-light); cursor: pointer; } /* ==================================================== BADGES ==================================================== */ .badge-pill { display: inline-flex; align-items: center; gap: 3px; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 500; white-space: nowrap; } .badge-active { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.2); } .badge-inactive { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); } .badge-admin { background: rgba(99,102,241,0.12); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.2); } .badge-user { background: rgba(6,182,212,0.12); color: #67e8f9; border: 1px solid rgba(6,182,212,0.2); } .badge-super { background: rgba(245,158,11,0.12); color: #fcd34d; border: 1px solid rgba(245,158,11,0.2); } .badge-free { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); } .badge-starter { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.2); } .badge-pro { background: rgba(99,102,241,0.12); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.2); } .badge-ent { background: rgba(245,158,11,0.12); color: #fcd34d; border: 1px solid rgba(245,158,11,0.2); } /* ==================================================== FORMS ==================================================== */ .form-control, .form-select { background: var(--dark-4); border: 1px solid var(--border-bright); color: var(--text); border-radius: 8px; font-size: 0.875rem; padding: 0.55rem 0.875rem; transition: border-color 0.15s, box-shadow 0.15s; } .form-control:focus, .form-select:focus { background: var(--dark-4); border-color: var(--primary); color: var(--text); box-shadow: 0 0 0 3px rgba(99,102,241,0.18); outline: none; } .form-control::placeholder { color: var(--text-dim); } .form-control:disabled, .form-control[readonly], .form-select:disabled, .form-select[readonly] { background: var(--dark-3); color: var(--text-muted); opacity: 0.8; } .form-label { font-size: 0.79rem; font-weight: 500; color: #cbd5e1; margin-bottom: 0.35rem; } /* Product group header on licenses page */ .license-group-hdr { display: flex; align-items: center; justify-content: space-between; background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; padding: 0.65rem 1rem; } .license-group-hdr + .group-table-wrap { border: 1px solid var(--border); border-top: none; } .license-group-hdr + .group-table-wrap + .group-pagination, .group-table-wrap + .group-pagination { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); } .license-group-hdr.is-collapsed { border-radius: var(--radius); } .license-group { margin-bottom: 1.75rem; } /* Collapse toggle button */ .btn-collapse { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: var(--text-dim); border-radius: 4px; cursor: pointer; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .btn-collapse:hover { color: var(--primary-light); background: rgba(99,102,241,0.1); } .btn-collapse i { font-size: 0.65rem; } /* Per-group pagination bar */ .group-pagination { display: flex; align-items: center; justify-content: space-between; background: var(--dark-3); padding: 0.5rem 1rem; border-radius: 0 0 var(--radius) var(--radius); border: 1px solid var(--border); border-top: none; } .group-pag-info { font-size: 0.72rem; color: var(--text-dim); } .group-pag-controls { display: flex; align-items: center; gap: 3px; } .group-pag-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--dark-4); color: var(--text-muted); font-size: 0.72rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .group-pag-btn:hover:not(:disabled) { background: var(--dark-5); color: var(--text); border-color: var(--border-bright); } .group-pag-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .group-pag-btn:disabled { opacity: 0.35; cursor: default; } .form-text { font-size: 0.74rem; color: var(--text-dim); } .form-check-input { background-color: var(--dark-5); border-color: var(--border-bright); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-check-label { font-size: 0.84rem; color: var(--text-muted); } /* ==================================================== BUTTONS ==================================================== */ .btn { font-size: 0.84rem; font-weight: 500; border-radius: 8px; padding: 0.5rem 1rem; transition: all 0.15s; } .btn-primary { background: var(--primary); border-color: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99,102,241,0.4); } .btn-outline-primary { border-color: rgba(99,102,241,0.35); color: var(--primary-light); background: rgba(99,102,241,0.06); } .btn-outline-primary:hover { background: rgba(99,102,241,0.14); border-color: var(--primary); color: var(--primary-light); } .btn-outline-secondary { border-color: var(--border-bright); color: var(--text-muted); background: transparent; } .btn-outline-secondary:hover { background: rgba(255,255,255,0.05); color: var(--text); border-color: var(--border-bright); } .btn-outline-danger { border-color: rgba(239,68,68,0.3); color: #f87171; background: transparent; } .btn-outline-danger:hover { background: rgba(239,68,68,0.1); border-color: var(--danger); } .btn-danger { background: var(--danger); border-color: var(--danger); color: white; } .btn-success{ background: var(--success); border-color: var(--success); color: white; } .btn-sm { padding: 0.3rem 0.7rem; font-size: 0.77rem; border-radius: 6px; } .btn-lg { padding: 0.65rem 1.5rem; font-size: 0.95rem; } .btn-icon{ width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* ==================================================== ALERTS ==================================================== */ .alert { border-radius: var(--radius); font-size: 0.84rem; padding: 0.7rem 1rem; } .alert-danger { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: #fca5a5; } .alert-success { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); color: #6ee7b7; } .alert-info { background: rgba(6,182,212,0.08); border-color: rgba(6,182,212,0.2); color: #67e8f9; } .alert-warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: #fcd34d; } /* ==================================================== MODALS ==================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .modal-box { background: var(--dark-2); border: 1px solid var(--border-bright); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } .modal-content { background: var(--dark-3); border: 1px solid var(--border-bright); border-radius: var(--radius-lg); } .modal-header { border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 1rem; font-weight: 600; margin: 0; } .modal-body { padding: 1.25rem; } .modal-footer { border-top: 1px solid var(--border); padding: 0.75rem 1.25rem; display: flex; justify-content: flex-end; gap: 0.5rem; } .btn-close { filter: invert(1); opacity: 0.5; background: none; border: none; cursor: pointer; } .btn-close:hover { opacity: 1; } /* ==================================================== INSTALL PAGE ==================================================== */ .install-wrapper { min-height: 100vh; background: var(--dark); } .install-header { background: var(--dark-2); border-bottom: 1px solid var(--border); padding: 1.5rem 0; } .install-logo h1 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0; } .install-logo p { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.875rem; } .install-body { max-width: 780px; padding: 2rem 1rem; } .install-section { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1.25rem; overflow: hidden; } .section-title { background: var(--dark-4); padding: 0.85rem 1.25rem; margin: 0; font-size: 0.9rem; font-weight: 600; border-bottom: 1px solid var(--border); color: var(--text); display: flex; align-items: center; gap: 0.5rem; } .section-body { padding: 1.25rem; } .install-footer { text-align: center; padding: 1rem 0 2rem; } .btn-install { min-width: 220px; padding: 0.75rem 2rem; font-size: 1rem; box-shadow: 0 4px 20px rgba(99,102,241,0.35); } .btn-install:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(99,102,241,0.5); } .install-footer-bar { background: var(--dark-2); border-top: 1px solid var(--border); text-align: center; padding: 1rem; font-size: 0.8rem; color: var(--text-dim); } .install-progress { text-align: center; padding: 4rem 0; } .install-success { text-align: center; padding: 4rem 0; } .success-icon { font-size: 3.5rem; margin-bottom: 1rem; } /* ==================================================== AUTH PAGES (Login + Register) ==================================================== */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: radial-gradient(ellipse at 30% 50%, rgba(99,102,241,0.1) 0%, transparent 60%), radial-gradient(ellipse at 70% 20%, rgba(6,182,212,0.06) 0%, transparent 50%), var(--dark); } .auth-card { background: var(--dark-3); border: 1px solid var(--border-bright); border-radius: 20px; padding: 2.5rem 2rem; width: 100%; max-width: 420px; box-shadow: 0 24px 80px rgba(0,0,0,0.5); animation: authFadeIn 0.3s ease; } .auth-card-wide { max-width: 540px; } @keyframes authFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .auth-logo { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1.75rem; } .auth-logo-icon { width: 40px; height: 40px; line-height: 0; display: flex; align-items: center; justify-content: center; } .auth-logo-name { font-size: 1.15rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; } .auth-title { font-size: 1.35rem; font-weight: 700; color: var(--text); margin: 0 0 0.35rem; text-align: center; } .auth-subtitle { font-size: 0.83rem; color: var(--text-dim); margin: 0 0 1.5rem; text-align: center; } /* Provider buttons */ .auth-providers { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; } .auth-provider-btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border-bright); border-radius: 10px; color: var(--text); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: background 0.15s, border-color 0.15s; cursor: pointer; } .auth-provider-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--text); text-decoration: none; } .auth-provider-soon { opacity: 0.45; cursor: not-allowed; } .auth-provider-badge { margin-left: auto; font-size: 0.65rem; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: rgba(251,191,36,0.15); color: #fbbf24; letter-spacing: 0.04em; } /* Divider */ .auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--text-dim); font-size: 0.78rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Fields */ .auth-field { margin-bottom: 1rem; } .auth-field label { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.35rem; } .auth-field-link { font-size: 0.78rem; color: var(--primary-light); font-weight: 400; } .auth-field-link:hover { color: var(--primary-light); } .auth-validation { font-size: 0.75rem; color: #f87171; margin-top: 4px; display: block; } .auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } /* Submit */ .auth-submit { width: 100%; padding: 0.65rem 1rem; margin-top: 0.5rem; background: var(--primary); color: #fff; border: none; border-radius: 10px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .auth-submit:hover:not(:disabled) { background: var(--primary-hover); } .auth-submit:active:not(:disabled) { transform: scale(0.99); } .auth-submit:disabled { opacity: 0.65; cursor: not-allowed; } /* Alerts */ .auth-alert { padding: 0.65rem 0.9rem; border-radius: 8px; font-size: 0.82rem; margin-bottom: 1rem; } .auth-alert-error { background: rgba(248,113,113,0.1); color: #f87171; border: 1px solid rgba(248,113,113,0.25); } .auth-alert-success { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.25); } /* Footer link */ .auth-footer-link { text-align: center; font-size: 0.82rem; color: var(--text-dim); margin: 1.25rem 0 0; } .auth-footer-link a { color: var(--primary-light); font-weight: 500; } /* Legacy — keep old .login-* for backwards compat */ .login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--dark); } .login-card { background: var(--dark-3); border: 1px solid var(--border-bright); border-radius: var(--radius-lg); padding: 2.5rem; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); } .login-logo { text-align: center; margin-bottom: 2rem; } .login-logo h2 { font-weight: 700; font-size: 1.4rem; color: var(--text); margin-bottom: 0.25rem; } .login-logo p { color: var(--text-muted); font-size: 0.84rem; margin: 0; } /* ==================================================== ACTIVITY FEED ==================================================== */ .activation-feed-row:hover { background: rgba(255,255,255,0.03); } .activation-feed-row:last-child { border-bottom: none !important; } .activity-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .activity-item:last-child { border-bottom: none; } .activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .activity-text { font-size: 0.81rem; color: var(--text-muted); flex: 1; } .activity-text strong { color: var(--text); font-weight: 500; } .activity-time { font-size: 0.71rem; color: var(--text-dim); white-space: nowrap; } /* ZK Info */ .zk-info { background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius); padding: 1rem 1.1rem; } .zk-info p { color: var(--text-muted); font-size: 0.81rem; } /* Tabs */ .nav-tabs { border-bottom: 1px solid var(--border); gap: 0.25rem; margin-bottom: 1.5rem; } .nav-tabs .nav-link { color: var(--text-muted); border: none; background: none; padding: 0.6rem 1rem; font-size: 0.84rem; font-weight: 450; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; transition: color 0.15s; } .nav-tabs .nav-link:hover { color: var(--text); } .nav-tabs .nav-link.active { color: var(--primary-light); border-bottom-color: var(--primary); background: none; } /* Utilities */ .font-mono { font-family: 'Consolas', 'Fira Code', monospace !important; } .fs-xs { font-size: 0.75rem !important; } .separator { height: 1px; background: var(--border); margin: 1rem 0; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--dark-2); } ::-webkit-scrollbar-thumb { background: var(--dark-5); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-bright); } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .main-content { margin-left: 0; } .page-content { padding: 1rem; } } /* ── FieldHelp Tooltip ──────────────────────────────────────────────── */ .fh-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; } .fh-icon { color: var(--text-dim, #64748b); font-size: 0.75rem; cursor: help; transition: color 0.15s; line-height: 1; } .fh-wrap:hover .fh-icon { color: var(--primary-light); } .fh-pop { visibility: hidden; opacity: 0; pointer-events: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 272px; background: var(--dark-4, #1e2535); border: 1px solid var(--border-bright); border-radius: 10px; padding: 0.7rem 0.875rem; box-shadow: 0 8px 28px rgba(0,0,0,0.45); z-index: 9999; text-align: left; transition: opacity 0.15s, visibility 0.15s; } .fh-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--dark-4, #1e2535); } .fh-wrap:hover .fh-pop { visibility: visible; opacity: 1; pointer-events: auto; } body.light-theme .fh-pop { background: #ffffff; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 28px rgba(0,0,0,0.12); } body.light-theme .fh-pop::after { border-top-color: #ffffff; } .fh-title { font-size: 0.77rem; font-weight: 700; color: var(--text); margin-bottom: 0.3rem; letter-spacing: 0.01em; } .fh-body { font-size: 0.74rem; color: var(--text-muted); line-height: 1.55; } .fh-body code { font-size: 0.72rem; color: #a5b4fc; background: rgba(99,102,241,0.15); padding: 0 3px; border-radius: 3px; } .fh-more { display: block; margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--border); font-size: 0.71rem; color: var(--primary-light); text-decoration: none; font-weight: 500; } .fh-more:hover { color: #a5b4fc; text-decoration: underline; } /* Leaflet dark popup override */ .permit-popup .leaflet-popup-content-wrapper, .permit-popup .leaflet-popup-tip { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: none !important; } .permit-popup .leaflet-popup-content { margin: 0 !important; line-height: 1; } .permit-popup .leaflet-popup-tip-container { display: none; } .leaflet-container { background: #0d0e1a; font-family: Inter, sans-serif; } .leaflet-container a.leaflet-popup-close-button { display: none; }