/* ========== design-tokens.css ========== */
/* ============================================================
AAKASH SAHAKARI — ADMIN DESIGN SYSTEM v1.0
Single source of truth for ALL admin pages.
Include via:
============================================================ */
:root {
/* Brand — bridged to global dynamic vars from _color-vars.php + design-tokens.css
Admin Settings बाट primary_color बदल्दा यिनले automatically follow गर्छन् */
--brand-primary: var(--primary-color, #0d5c2e);
--brand-primary-hover:var(--primary-dark, #0a4a25);
--brand-primary-glow: var(--primary-light, #1a8754);
--brand-accent: var(--accent-color, #f4b400);
--brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-glow));
/* Surfaces */
--surface: #ffffff;
--surface-elevated: #ffffff;
--surface-muted: #f7f9f8;
--surface-sunken: #eef3f0;
--surface-overlay: rgba(13, 92, 46, 0.04);
/* Text */
--text-primary: #0f1f17;
--text-secondary: #4a5d52;
--text-muted: #8a9b91;
--text-inverse: #ffffff;
/* Status */
--success: #1a8754;
--success-bg: #e6f4ec;
--warning: #d97706;
--warning-bg: #fef3e2;
--danger: #dc2626;
--danger-bg: #fde8e8;
--info: #0369a1;
--info-bg: #e0f2fe;
/* Borders */
--border: #e2e8e5;
--border-strong: #cbd5d0;
--border-focus: var(--brand-primary-glow);
/* Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
/* Spacing scale (4px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(15, 31, 23, 0.05);
--shadow-md: 0 4px 12px rgba(15, 31, 23, 0.08);
--shadow-lg: 0 10px 30px rgba(13, 92, 46, 0.12);
--shadow-focus: 0 0 0 3px rgba(26, 135, 84, 0.18);
/* Typography */
--font-sans: var(--font-primary, "Mukta", "Noto Sans Devanagari", -apple-system, "Segoe UI", Roboto, sans-serif);
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 14px;
--fs-md: 15px;
--fs-lg: 18px;
--fs-xl: 22px;
--fs-2xl: 28px;
}
/* ============================================================
BASE
============================================================ */
* { box-sizing: border-box; }
body.admin-shell {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
color: var(--text-primary);
background: var(--surface-muted);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* ============================================================
PAGE LAYOUT
============================================================ */
.admin-page {
padding: var(--space-5);
max-width: 1280px;
margin: 0 auto;
}
.admin-page-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.admin-page-title {
font-size: var(--fs-xl);
font-weight: 700;
color: var(--brand-primary);
margin: 0;
display: flex;
align-items: center;
gap: var(--space-2);
}
.admin-page-subtitle {
font-size: var(--fs-sm);
color: var(--text-secondary);
margin-top: var(--space-1);
}
/* ============================================================
CARDS — single canonical style
============================================================ */
.admin-card {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-4);
}
.admin-card-title {
font-size: var(--fs-md);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-4);
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Stat / metric cards */
.admin-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.admin-stat-card {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
transition: transform .15s ease, box-shadow .15s ease;
}
.admin-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.admin-stat-card .stat-icon {
width: 44px; height: 44px;
border-radius: var(--radius-sm);
display: grid; place-items: center;
background: var(--success-bg);
color: var(--success);
font-size: 20px;
flex-shrink: 0;
}
.admin-stat-card .stat-icon.warn { background: var(--warning-bg); color: var(--warning); }
.admin-stat-card .stat-icon.danger{ background: var(--danger-bg); color: var(--danger); }
.admin-stat-card .stat-icon.info { background: var(--info-bg); color: var(--info); }
.admin-stat-card .stat-value { font-size: var(--fs-xl); font-weight: 700; line-height: 1; }
.admin-stat-card .stat-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
/* ============================================================
BUTTONS — only 4 variants, used everywhere
============================================================ */
.admin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 10px 18px;
font-size: var(--fs-sm);
font-weight: 600;
font-family: inherit;
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all .15s ease;
white-space: nowrap;
line-height: 1;
}
.admin-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.admin-btn:disabled { opacity: .55; cursor: not-allowed; }
.admin-btn-primary {
background: var(--brand-gradient);
color: var(--text-inverse);
box-shadow: var(--shadow-sm);
}
.admin-btn-primary:hover:not(:disabled) {
filter: brightness(1.06);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.admin-btn-secondary {
background: var(--surface);
color: var(--brand-primary);
border-color: var(--border-strong);
}
.admin-btn-secondary:hover:not(:disabled) {
background: var(--surface-overlay);
border-color: var(--brand-primary);
}
.admin-btn-danger {
background: var(--danger);
color: var(--text-inverse);
}
.admin-btn-danger:hover:not(:disabled) { filter: brightness(.92); }
.admin-btn-ghost {
background: transparent;
color: var(--text-secondary);
}
.admin-btn-ghost:hover:not(:disabled) { background: var(--surface-overlay); color: var(--brand-primary); }
.admin-btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }
.admin-btn-lg { padding: 14px 24px; font-size: var(--fs-md); }
/* ============================================================
FORMS
============================================================ */
.admin-form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.admin-input, .admin-select, .admin-textarea {
width: 100%;
padding: 10px 12px;
font-size: var(--fs-sm);
font-family: inherit;
color: var(--text-primary);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
transition: border-color .15s, box-shadow .15s;
}
.admin-input:focus, .admin-select:focus, .admin-textarea:focus {
outline: none;
border-color: var(--border-focus);
box-shadow: var(--shadow-focus);
}
.admin-textarea { min-height: 90px; resize: vertical; }
/* ============================================================
TABLES
============================================================ */
.admin-table-wrap {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-4);
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.admin-table thead th {
background: var(--brand-primary);
color: var(--text-inverse);
text-align: left;
padding: 12px 14px;
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: .03em;
text-transform: uppercase;
}
.admin-table tbody td {
padding: 12px 14px;
border-top: 1px solid var(--border);
color: var(--text-primary);
vertical-align: middle;
}
.admin-table tbody tr:hover { background: var(--surface-overlay); }
.admin-table tbody tr:nth-child(even) { background: var(--surface-muted); }
.admin-table tbody tr:nth-child(even):hover { background: var(--surface-overlay); }
/* ============================================================
BADGES
============================================================ */
.admin-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: var(--fs-xs);
font-weight: 600;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
color: var(--text-secondary);
line-height: 1;
}
.admin-badge-success { background: var(--success-bg); color: var(--success); }
.admin-badge-warning { background: var(--warning-bg); color: var(--warning); }
.admin-badge-danger { background: var(--danger-bg); color: var(--danger); }
.admin-badge-info { background: var(--info-bg); color: var(--info); }
/* ============================================================
EMPTY STATE
============================================================ */
.admin-empty {
text-align: center;
padding: var(--space-10) var(--space-5);
color: var(--text-muted);
}
.admin-empty .empty-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--surface-sunken);
color: var(--text-muted);
display: grid; place-items: center;
margin: 0 auto var(--space-3);
font-size: 28px;
}
.admin-empty .empty-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.admin-empty .empty-text { font-size: var(--fs-sm); }
/* ============================================================
ALERTS / NOTICES
============================================================ */
.admin-alert {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--info-bg);
color: var(--info);
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin-bottom: var(--space-4);
font-size: var(--fs-sm);
}
.admin-alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(26,135,84,.2); }
.admin-alert-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(217,119,6,.2); }
.admin-alert-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(220,38,38,.2); }
/* ============================================================
UTILITIES
============================================================ */
.admin-flex { display: flex; gap: var(--space-3); align-items: center; }
.admin-flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.admin-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-mb-0 { margin-bottom: 0 !important; }
.admin-mt-4 { margin-top: var(--space-4); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 720px) {
.admin-page { padding: var(--space-3); }
.admin-card { padding: var(--space-3); }
.admin-table thead { display: none; }
.admin-table tbody td { display: block; padding: 8px 14px; border: none; }
.admin-table tbody tr { display: block; border-top: 1px solid var(--border); padding: 10px 0; }
.admin-table tbody td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-muted);
font-size: var(--fs-xs);
text-transform: uppercase;
display: block;
margin-bottom: 2px;
}
}
/* ========== admin-tokens.css ========== */
/**
* 🎨 Admin Panel — Dynamic Color Override
* ─────────────────────────────────────────────────────────────
* `admin/assets/admin.css` पछि load हुन्छ। ती सबै hardcoded
* #1a5f2a (154 places) लाई CSS variables बाट override गर्छ।
*
* Admin → Settings → Primary Color बदले admin sidebar/buttons
* पनि auto-update हुन्छ।
*/
/* Sidebar — तपाईंको actual class names */
.sidebar, .sidebar-header,
.sidebar-nav .nav-group-header.open,
.sidebar-nav li.active > a {
background: var(--primary-color) !important;
}
.sidebar-nav li > a:hover { background: var(--primary-dark) !important; }
.sidebar-user-strip { background: var(--primary-dark) !important; }
/* Active group highlight */
.nav-group-header.open .nav-group-icon,
.nav-group-header.open .nav-group-label { color: #fff !important; }
/* Buttons (admin) */
.btn-admin-primary, .admin-btn-primary,
.btn-primary, .admin-card-header,
.admin-stat-card.primary, .quick-action-btn.primary {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #fff !important;
}
.btn-admin-primary:hover, .btn-primary:hover {
background: var(--primary-dark) !important;
border-color: var(--primary-dark) !important;
}
/* Text accents */
.admin-text-primary, .text-primary,
.admin-stat-value, .admin-section-title,
.admin-pill.active { color: var(--primary-color) !important; }
/* Form focus */
.admin-form-control:focus,
.admin-fancy-input:focus,
.form-control:focus {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 3px rgba(26,95,42,.12) !important;
}
/* Badges & pills */
.group-badge, .nav-badge, .admin-badge-primary {
background: var(--secondary-color) !important;
color: var(--text-on-secondary, #fff) !important;
}
/* Font unify */
.admin-body, .sidebar, .sidebar-nav, .admin-content,
.admin-card, .admin-form-control, .admin-fancy-input,
.admin-btn, .admin-table, .admin-topbar {
font-family: var(--font-primary, 'Mukta', 'Noto Sans Devanagari', sans-serif) !important;
}
.admin-shell,
.admin-shell body {
color: var(--text-primary, #0f1f17) !important;
}
.admin-shell .topbar,
.admin-shell .admin-topbar {
color: var(--text-primary, #0f1f17) !important;
}
.admin-shell .sidebar,
.admin-shell .sidebar * {
color: var(--text-on-primary, #fff);
}
.admin-shell .sidebar .nav-badge,
.admin-shell .group-badge {
color: var(--text-on-secondary, #fff) !important;
}
.admin-shell .card,
.admin-shell .admin-card,
.admin-shell .ds-card,
.admin-shell .stat-card {
background: #fff !important;
border-color: var(--border-color, #e5e7eb) !important;
color: var(--text-primary, #0f1f17) !important;
}
.admin-shell .card h1,
.admin-shell .card h2,
.admin-shell .card h3,
.admin-shell .card h4,
.admin-shell .card h5,
.admin-shell .card h6,
.admin-shell .admin-card h1,
.admin-shell .admin-card h2,
.admin-shell .admin-card h3,
.admin-shell .admin-card h4,
.admin-shell .admin-card h5,
.admin-shell .admin-card h6 {
color: var(--text-primary, #0f1f17) !important;
}
.admin-shell .admin-card-header,
.admin-shell .card-header.bg-primary,
.admin-shell .card-header.bg-secondary {
color: var(--text-on-primary, #fff) !important;
}
.admin-shell .text-muted,
.admin-shell small,
.admin-shell .admin-help-text {
color: var(--text-muted, #6b7280) !important;
}
.admin-shell .btn-outline-primary {
color: var(--primary-color, #1a5f2a) !important;
border-color: var(--primary-color, #1a5f2a) !important;
}
.admin-shell .btn-outline-primary:hover,
.admin-shell .btn-outline-primary:focus,
.admin-shell .btn-outline-primary:active {
background: var(--primary-color, #1a5f2a) !important;
color: var(--text-on-primary, #fff) !important;
}
/* ========== admin.css ========== */
/*
* =====================================================
* ADMIN PANEL — CSS STYLESHEET
* फाइल: admin/assets/admin.css
*
* यो file मा admin panel को सम्पूर्ण design छ।
* रंग, साइज, र layout यहीँबाट परिवर्तन गर्न सकिन्छ।
*
* ⚠️ नोट: यो file परिवर्तन गर्नु अघि backup लिनुहोस्।
* =====================================================
*/
/* =====================================================
रंग र साइज — GLOBAL VARIABLES
यहाँ रंग र साइज परिवर्तन गर्दा सम्पूर्ण admin panel मा लागू हुन्छ।
🎨 रंग परिवर्तन गर्न: var(--primary-color) जस्ता hex code बदल्नुहोस्।
Online color picker: https://www.w3schools.com/colors/colors_picker.asp
📏 Sidebar चौडाइ: --sidebar-width को मान बदल्नुहोस् (px मा)
📐 Header उचाइ: --header-height को मान बदल्नुहोस् (px मा)
===================================================== */
:root {
/* --primary-color & --secondary-color अब `assets/css/design-tokens.css` +
`assets/css/_color-vars.php` बाट आउँछन् (admin Settings → Primary Color
बदल्दा यहाँ पनि auto-update हुन्छ)। यहाँ हटाइएको — circular self-reference
sidebar gradient invalid बनाउथ्यो। */
--sidebar-width: 260px; /* Sidebar को चौडाइ — घटाउन/बढाउन सकिन्छ */
--header-height: 60px; /* माथिको header bar को उचाइ */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Mukta', sans-serif;
background: #f4f6f9;
min-height: 100vh;
/* Improved text rendering for Nepali/Devanagari */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga" 1, "kern" 1;
}
/* Admin Wrapper */
.admin-wrapper {
display: flex;
min-height: 100vh;
}
/* =====================================================
SIDEBAR — बायाँ तर्फको Navigation Menu
— Background रंग परिवर्तन गर्न: linear-gradient मा रंग बदल्नुहोस्
— चौडाइ परिवर्तन गर्न: माथि :root मा --sidebar-width बदल्नुहोस्
===================================================== */
.sidebar {
width: var(--sidebar-width);
background: linear-gradient(180deg, var(--primary-color) 0%, #145021 100%);
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 1000;
transition: transform 0.3s ease;
overflow-y: auto;
}
.sidebar-header {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-header .logo {
display: flex;
align-items: center;
gap: 12px;
color: white;
}
.sidebar-header .logo i {
font-size: 28px;
}
.sidebar-header .logo span {
font-size: 18px;
font-weight: 600;
}
.sidebar-nav ul {
list-style: none;
padding: 6px 0;
}
.sidebar-nav li {
margin: 1px 8px;
}
.sidebar-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 12px;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
font-size: 0.92rem;
}
.sidebar-nav a:hover,
.sidebar-nav li.active a {
background: rgba(255, 255, 255, 0.15);
color: white;
}
.sidebar-section-label {
margin: 10px 10px 2px 10px;
padding: 0 12px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
pointer-events: none;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
}
.sidebar-section-label::before {
content: '';
display: block;
width: 12px;
height: 1px;
background: rgba(255, 255, 255, 0.25);
}
.sidebar-section-label::after {
content: '';
flex: 1;
display: block;
height: 1px;
background: rgba(255, 255, 255, 0.12);
}
.nav-icon-wrap {
width: 28px;
height: 28px;
border-radius: 7px;
background: rgba(255, 255, 255, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.25s;
font-size: 12px;
}
.sidebar-nav a:hover .nav-icon-wrap,
.sidebar-nav li.active a .nav-icon-wrap {
background: rgba(255, 255, 255, 0.22);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
transform: scale(1.08);
}
.sidebar-nav li.active a .nav-icon-wrap {
background: var(--secondary-color);
}
.sidebar-nav a i {
width: 20px;
text-align: center;
}
.sidebar-nav .badge {
margin-left: auto;
background: var(--color-danger);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
min-width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}
/* Main Content */
.main-content {
flex: 1;
margin-left: var(--sidebar-width);
min-height: 100vh;
}
.admin-table-card {
border: 0;
border-radius: 18px;
box-shadow: 0 14px 36px rgba(16, 24, 40, 0.08);
overflow: hidden;
}
.gradient-card-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%) !important;
color: #fff !important;
border-bottom: 0;
padding: 16px 20px;
}
.gradient-card-header h5 {
margin: 0;
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
}
/* gradient-card-header भित्रको button सधैं visible हुने fix
color:#fff !important inheritance ले button text invisible बन्थ्यो */
.gradient-card-header .btn-outline-light {
color: #fff !important;
border-color: rgba(255,255,255,0.75) !important;
background: transparent !important;
}
.gradient-card-header .btn-outline-light:hover,
.gradient-card-header .btn-outline-light:focus {
color: var(--primary-color) !important;
background: #fff !important;
border-color: #fff !important;
}
/* Table column header (thead) — gradient card header को तल आउँछ */
.table-col-header {
background: linear-gradient(135deg, rgba(26,95,42,0.08), rgba(40,167,69,0.12));
}
.table-col-header th {
color: var(--primary-color);
font-weight: 700;
border-bottom: 2px solid #c8e6c9;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.03em;
padding-top: 10px;
padding-bottom: 10px;
}
.admin-form-grid .form-label,
.card .form-label {
font-weight: 600;
color: #24412b;
}
.admin-form-grid .form-control,
.admin-form-grid .form-select,
.admin-table-card .form-control,
.admin-table-card .form-select {
border-radius: 10px;
border-color: #dce8df;
min-height: 44px;
}
.admin-form-grid .form-control:focus,
.admin-form-grid .form-select:focus,
.admin-table-card .form-control:focus,
.admin-table-card .form-select:focus {
border-color: var(--secondary-color);
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.14);
}
.fancy-switch {
background: #f4fbf6;
border: 1px solid #dce8df;
border-radius: 12px;
padding: 11px 14px 11px 40px;
width: 100%;
}
.table thead th {
font-weight: 700;
color: #24412b;
}
/* =====================================================
ADMIN HEADER — माथिको सेतो bar
— यसमा page title, bell icon, र admin नाम देखिन्छ
— height परिवर्तन गर्न: माथि :root मा --header-height बदल्नुहोस्
===================================================== */
.admin-header {
background: white;
height: var(--header-height);
padding: 0 25px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 100;
}
.header-left {
display: flex;
align-items: center;
gap: 15px;
}
.sidebar-toggle {
background: none;
border: none;
font-size: 20px;
color: #333;
cursor: pointer;
display: none;
}
.page-title-wrap {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.page-title {
font-size: 1.15rem;
font-weight: 700;
color: #1a2c3a;
margin: 0;
letter-spacing: -0.01em;
}
/* Header date pill — replaces the old big Namaste hero greeting */
.header-date-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 600;
color: #047857;
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
padding: 5px 11px;
border-radius: 999px;
border: 1px solid rgba(5, 150, 105, 0.18);
line-height: 1;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08);
}
.header-date-pill i {
font-size: 0.75rem;
opacity: 0.85;
}
@media (max-width: 600px) {
.header-date-pill { display: none; }
}
/* Compact dashboard quick-action bar (replaces big hero) */
.dash-quickbar {
display: flex;
gap: 10px;
flex-wrap: wrap;
padding: 4px 0;
}
.dash-qa-btn {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.85rem;
font-weight: 600;
padding: 8px 16px;
border-radius: 10px;
text-decoration: none;
background: #fff;
color: var(--primary-color, #047857);
border: 1.5px solid var(--border-color, #e5e7eb);
transition: all 0.18s ease;
}
.dash-qa-btn:hover {
border-color: var(--primary-color, #047857);
color: var(--primary-color, #047857);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
}
.dash-qa-btn.dash-qa-primary {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.22);
}
.dash-qa-btn.dash-qa-primary:hover {
color: #fff;
box-shadow: 0 6px 16px rgba(5, 150, 105, 0.32);
}
.header-right {
display: flex;
align-items: center;
gap: 15px;
}
.btn-view-site {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
background: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 14px;
transition: background 0.3s;
}
.btn-view-site:hover {
background: var(--secondary-color);
color: white;
}
.user-dropdown {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 10px;
background: none;
border: 1px solid #ddd;
border-radius: 25px;
cursor: pointer;
}
.user-avatar {
width: 32px;
height: 32px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Page Content */
.page-content {
padding: 25px;
}
/* Cards */
.card {
border: none;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.card-header {
background: white;
border-bottom: 1px solid #eee;
padding: 15px 20px;
}
.card-header h5 {
margin: 0;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.card-body {
padding: 20px;
}
/* Stat Cards */
.stat-card {
padding: 25px;
border-radius: 12px;
color: white;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 15px;
}
.stat-card.bg-primary {
background: linear-gradient(135deg, var(--primary-color), var(--color-success));
}
.stat-card.bg-success {
background: linear-gradient(135deg, var(--color-success), #20c997);
}
.stat-card.bg-warning {
background: linear-gradient(135deg, var(--color-warning), #fd7e14);
}
.stat-card.bg-danger {
background: linear-gradient(135deg, var(--color-danger), #e83e8c);
}
.stat-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.stat-info h3 {
font-size: 28px;
font-weight: 700;
margin-bottom: 5px;
}
.stat-info p {
margin: 0;
opacity: 0.9;
}
.stat-link {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 35px;
height: 35px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
}
/* Quick Actions */
.quick-actions {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.quick-action-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px 25px;
background: #f8f9fa;
border-radius: 10px;
text-decoration: none;
color: #333;
transition: all 0.3s;
min-width: 120px;
}
.quick-action-btn:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
.quick-action-btn i {
font-size: 24px;
color: var(--primary-color);
}
.quick-action-btn:hover i {
color: white;
}
/* Tables */
.table {
margin-bottom: 0;
}
.table th {
background: #f8f9fa;
font-weight: 600;
border-bottom: 2px solid #dee2e6;
}
/* ==============================================
ENHANCED FORM STYLES - Admin Panel
============================================== */
.form-label {
font-weight: 600;
color: #333;
margin-bottom: 8px;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 5px;
}
.form-label .required {
color: #e53935;
font-weight: 400;
}
.form-control,
.form-select {
border-radius: 10px;
padding: 10px 14px;
min-height: 44px;
border: 1.5px solid #d1d5db;
background: #fafafa;
font-size: 0.95rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
line-height: 1.4;
}
.form-control:hover,
.form-select:hover {
border-color: #d0d0d0;
background: #fff;
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary-color);
background: #fff;
box-shadow: 0 0 0 4px rgba(26, 95, 42, 0.1), 0 4px 15px rgba(26, 95, 42, 0.08);
outline: none;
}
.form-control::placeholder {
color: #aaa;
}
/* Form Group Enhancement */
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group.has-icon .form-control {
padding-left: 45px;
}
.form-group .form-icon {
position: absolute;
left: 15px;
top: 42px;
color: #aaa;
transition: color 0.3s ease;
}
.form-group:focus-within .form-icon {
color: var(--primary-color);
}
/* Checkbox Enhancement */
.form-check-input {
width: 20px;
height: 20px;
border: 2px solid #d0d0d0;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease;
}
.form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 10px 15px;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.2s ease;
}
.checkbox-label:hover {
background: #f0f8f2;
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
/* =====================================================
BUTTONS — सबै button को style
— padding: button को भित्री खाली ठाउँ
— border-radius: button को कुनाको गोलाइ (px बढायो = बढी गोलो)
— रंग परिवर्तन गर्न: .btn-primary, .btn-success आदि मा background बदल्नुहोस्
===================================================== */
.btn {
padding: 12px 24px;
border-radius: 10px;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border: none;
box-shadow: 0 4px 15px rgba(26, 95, 42, 0.25);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(26, 95, 42, 0.35);
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}
.btn-secondary {
background: #6c757d;
border: none;
}
.btn-secondary:hover {
background: #5a6268;
transform: translateY(-2px);
}
.btn-success {
background: linear-gradient(135deg, var(--color-success), #20c997);
border: none;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.25);
}
.btn-success:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.35);
}
.btn-danger {
background: linear-gradient(135deg, var(--color-danger), #e83e8c);
border: none;
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.25);
}
.btn-danger:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(220, 53, 69, 0.35);
}
.btn-outline-primary {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline-primary:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
.btn i {
transition: transform 0.3s ease;
}
.btn:hover i {
transform: scale(1.1);
}
/* DataTables Override */
.dataTables_wrapper .dataTables_filter input {
border-radius: 6px;
padding: 5px 10px;
}
/* =====================================================
MODAL (POPUP BOX) — popup window को style
— admin panel मा थप्ने, सम्पादन गर्ने popup हरू
— max-width: popup को चौडाइ — बढाउन सकिन्छ
— border-radius: popup को कुनाको गोलाइ
===================================================== */
.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
overflow-y: auto;
padding: 20px;
}
.modal.show {
display: flex;
align-items: flex-start;
justify-content: center;
}
.modal-content {
background-color: white;
border-radius: 20px;
width: 100%;
max-width: 550px;
margin: 40px auto;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
position: relative;
}
.modal-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #20c997);
}
.modal-content.modal-lg {
max-width: 750px;
}
.modal-content.modal-xl {
max-width: 950px;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 25px 20px;
border-bottom: 1px solid #f0f0f0;
background: linear-gradient(180deg, #fafafa, #fff);
}
.modal-header h3 {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
color: var(--primary-color);
display: flex;
align-items: center;
gap: 12px;
}
.modal-header h3 i {
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(26, 95, 42, 0.15));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.modal-header .close {
width: 40px;
height: 40px;
background: #f5f5f5;
border: none;
border-radius: 12px;
font-size: 24px;
cursor: pointer;
color: #666;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.modal-header .close:hover {
background: #ffebee;
color: #e53935;
transform: rotate(90deg);
}
.modal-body,
.modal-content form {
padding: 25px;
}
.modal-content .form-group {
margin-bottom: 20px;
position: relative;
}
.modal-content .form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
font-size: 0.9rem;
}
.modal-content .form-group input,
.modal-content .form-group textarea,
.modal-content .form-group select {
width: 100%;
padding: 14px 16px;
border: 2px solid #e8e8e8;
border-radius: 12px;
font-size: 0.95rem;
background: #fafafa;
transition: all 0.3s ease;
}
.modal-content .form-group input:hover,
.modal-content .form-group textarea:hover,
.modal-content .form-group select:hover {
border-color: #d0d0d0;
background: #fff;
}
.modal-content .form-group input:focus,
.modal-content .form-group textarea:focus,
.modal-content .form-group select:focus {
outline: none;
border-color: var(--primary-color);
background: #fff;
box-shadow: 0 0 0 4px rgba(26, 95, 42, 0.1);
}
.modal-content .form-group textarea {
min-height: 100px;
resize: vertical;
}
.modal-content .form-group input::placeholder,
.modal-content .form-group textarea::placeholder {
color: #aaa;
}
/* Form Grid Layout in Modal */
.modal-content .form-row {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.modal-content .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
/* Modal Checkbox Enhancement */
.modal-content .checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.modal-content .checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 10px;
border: 2px solid transparent;
transition: all 0.3s ease;
flex: 1;
min-width: 150px;
}
.modal-content .checkbox-label:hover {
background: #f0f8f2;
border-color: rgba(26, 95, 42, 0.2);
}
.modal-content .checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--primary-color);
}
.modal-content .checkbox-label.checked {
background: #e8f5e9;
border-color: var(--primary-color);
}
/* Modal Footer/Action Buttons */
.modal-footer,
.modal-content .form-actions {
display: flex;
gap: 12px;
padding: 20px 25px 25px;
justify-content: flex-end;
border-top: 1px solid #f0f0f0;
background: #fafafa;
}
.modal-content .btn-submit,
.modal-content .btn-primary {
min-width: 140px;
justify-content: center;
}
/* File Upload in Modal */
.modal-content .file-upload {
border: 2px dashed #d0d0d0;
border-radius: 12px;
padding: 25px;
text-align: center;
background: #fafafa;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.modal-content .file-upload:hover {
border-color: var(--primary-color);
background: rgba(26, 95, 42, 0.02);
}
.modal-content .file-upload input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.modal-content .file-upload i {
font-size: 35px;
color: #ccc;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.modal-content .file-upload:hover i {
color: var(--primary-color);
transform: scale(1.1);
}
.modal-content .file-upload p {
margin: 0;
color: #666;
font-size: 0.9rem;
}
.modal-content .file-upload small {
color: #999;
font-size: 0.8rem;
}
/* Preview Image in Modal */
.modal-content .preview-image {
width: 100px;
height: 100px;
border-radius: 12px;
object-fit: cover;
border: 3px solid #f0f0f0;
margin-top: 10px;
}
/* Section Divider in Modal */
.modal-content .section-divider {
display: flex;
align-items: center;
gap: 15px;
margin: 25px 0;
color: #999;
font-size: 0.85rem;
font-weight: 500;
}
.modal-content .section-divider::before,
.modal-content .section-divider::after {
content: '';
flex: 1;
height: 1px;
background: #e8e8e8;
}
/* Help Text in Modal */
.modal-content .help-text {
font-size: 0.8rem;
color: #999;
margin-top: 5px;
display: flex;
align-items: center;
gap: 5px;
}
.modal-content .help-text i {
font-size: 12px;
}
/* Row and Column for modals - Enhanced */
.modal-content .row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.modal-content .col-md-3,
.modal-content .col-md-4,
.modal-content .col-md-6,
.modal-content .col-md-8,
.modal-content .col-md-12 {
padding: 0 10px;
}
.modal-content .col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.modal-content .col-md-4 {
flex: 0 0 33.333%;
max-width: 33.333%;
}
.modal-content .col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.modal-content .col-md-8 {
flex: 0 0 66.666%;
max-width: 66.666%;
}
.modal-content .col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
@media (max-width: 767px) {
.modal-content .col-md-3,
.modal-content .col-md-4,
.modal-content .col-md-6,
.modal-content .col-md-8 {
flex: 0 0 100%;
max-width: 100%;
}
.modal-content {
margin: 20px auto;
border-radius: 16px;
}
.modal-header {
padding: 20px;
}
.modal-body,
.modal-content form {
padding: 20px;
}
.modal-footer,
.modal-content .form-actions {
padding: 15px 20px 20px;
flex-direction: column;
}
.modal-content .btn {
width: 100%;
justify-content: center;
}
}
/* Card Form Styles */
.card-form {
background: white;
border-radius: 16px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.card-form .card-header {
background: linear-gradient(135deg, #fafafa, #f5f5f5);
padding: 20px 25px;
border-bottom: 1px solid #eee;
}
.card-form .card-header h4 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-color);
display: flex;
align-items: center;
gap: 10px;
}
.card-form .card-body {
padding: 25px;
}
.card-form .card-footer {
padding: 20px 25px;
background: #fafafa;
border-top: 1px solid #eee;
display: flex;
gap: 12px;
justify-content: flex-end;
}
/* Alert Styles */
.alert {
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.alert-success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert-danger {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.alert-warning {
background: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
}
.alert-info {
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
/* =====================================================
DATA TABLE — सूची (table) को design
— th: table को header row (title row)
— td: table को data cells
— btn-action: Edit, Delete, View buttons (table भित्र)
• btn-view: हेर्ने button (नीलो)
• btn-edit: सम्पादन गर्ने button (सुन्तला)
• btn-delete: मेटाउने button (रातो)
===================================================== */
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: white;
border-radius: 10px;
overflow: hidden;
}
.data-table th,
.data-table td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid #eee;
vertical-align: middle;
}
.data-table th {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
font-weight: 600;
color: white;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.5px;
white-space: nowrap;
}
.data-table th:first-child {
border-top-left-radius: 10px;
}
.data-table th:last-child {
border-top-right-radius: 10px;
}
.data-table tbody tr {
transition: all 0.2s ease;
}
.data-table tbody tr:hover {
background: #f0f8f2;
}
.data-table tbody tr:nth-child(even) {
background: #fafafa;
}
.data-table tbody tr:nth-child(even):hover {
background: #f0f8f2;
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
.data-table tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
.data-table tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
/* Table action buttons */
.data-table .btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
font-size: 14px;
transition: all 0.2s ease;
margin: 0 2px;
}
.data-table .btn-action.btn-view {
background: #e3f2fd;
color: #1976d2;
}
.data-table .btn-action.btn-view:hover {
background: #1976d2;
color: white;
}
.data-table .btn-action.btn-edit {
background: #fff3e0;
color: #f57c00;
}
.data-table .btn-action.btn-edit:hover {
background: #f57c00;
color: white;
}
.data-table .btn-action.btn-delete {
background: #ffebee;
color: #e53935;
}
.data-table .btn-action.btn-delete:hover {
background: #e53935;
color: white;
}
/* Status badges in tables */
.data-table .badge-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 500;
}
.data-table .badge-status.active {
background: #e8f5e9;
color: #2e7d32;
}
.data-table .badge-status.pending {
background: #fff8e1;
color: #f9a825;
}
.data-table .badge-status.inactive {
background: #ffebee;
color: #c62828;
}
/* Photo thumbnails in tables */
.data-table .table-thumb {
width: 45px;
height: 45px;
border-radius: 8px;
object-fit: cover;
border: 2px solid #f0f0f0;
}
.data-table .table-thumb-placeholder {
width: 45px;
height: 45px;
border-radius: 8px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
color: #ccc;
font-size: 18px;
}
/* Admin Content */
.admin-content {
padding: 25px;
}
.content-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.content-header h1 {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
/* =====================================================
RESPONSIVE DESIGN — मोबाइल/ट्याब्लेट को लागि
— 991px भन्दा सानो screen: Sidebar लुकाउँछ (tablet)
— 767px भन्दा सानो screen: अझ compact layout (mobile)
— यी settings परिवर्तन नगर्नु सिफारिस गरिन्छ
===================================================== */
@media (max-width: 991px) {
/* Tablet: Sidebar लुकाउँछ, hamburger button देखिन्छ */
.sidebar {
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0); /* hamburger click गर्दा sidebar देखिन्छ */
}
.main-content {
margin-left: 0;
}
.sidebar-toggle {
display: block; /* hamburger button देखाउँछ */
}
}
@media (max-width: 767px) {
/* Mobile: padding घटाउँछ */
.page-content {
padding: 15px;
}
.stat-card {
padding: 20px;
}
.stat-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
.stat-info h3 {
font-size: 24px;
}
.btn-view-site span {
display: none;
}
}
/* ==============================================
NEPALI DATE PICKER STYLES
============================================== */
.nepali-datepicker-wrapper {
position: relative;
}
.nepali-datepicker-wrapper input {
cursor: pointer;
background-color: #fff !important;
}
.nepali-datepicker-wrapper .input-group-text {
cursor: pointer;
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.nepali-datepicker-wrapper .input-group-text:hover {
background: var(--secondary-color);
border-color: var(--secondary-color);
}
/* Nepali datepicker dropdown styling */
.ndp-container {
z-index: 9999 !important;
font-family: 'Mukta', sans-serif !important;
}
.ndp-container .ndp-header {
background: var(--primary-color) !important;
}
.ndp-container .ndp-table td.ndp-active {
background: var(--primary-color) !important;
}
.ndp-container .ndp-table td:hover {
background: rgba(26, 95, 42, 0.1) !important;
}
/* ==============================================
ENHANCED TABLE WRAPPER
============================================== */
.table-wrapper {
background: white;
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.table-wrapper .table-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #eee;
flex-wrap: wrap;
gap: 15px;
}
.table-wrapper .table-header h5 {
margin: 0;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.table-wrapper .table-actions-header {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.table-wrapper .table-body {
overflow-x: auto;
}
.table-wrapper .table-footer {
padding: 15px 20px;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
/* Responsive table improvements */
@media (max-width: 991px) {
.data-table th,
.data-table td {
padding: 12px 14px;
font-size: 0.9rem;
}
}
@media (max-width: 767px) {
.data-table th,
.data-table td {
padding: 10px 12px;
font-size: 0.85rem;
}
.data-table .btn-action {
width: 28px;
height: 28px;
font-size: 12px;
}
.data-table .table-thumb,
.data-table .table-thumb-placeholder {
width: 36px;
height: 36px;
}
.table-wrapper .table-header {
padding: 15px;
}
}
/* Empty state for tables */
.table-empty {
text-align: center;
padding: 50px 20px;
color: #999;
}
.table-empty i {
font-size: 48px;
margin-bottom: 15px;
color: #ddd;
}
.table-empty h5 {
margin-bottom: 5px;
color: #666;
}
.table-empty p {
margin: 0;
font-size: 0.9rem;
}
/* ==============================================
ENHANCED ADMIN COMPONENTS - Eye-Catching
============================================== */
/* Page Header Enhancement */
.page-header-enhanced {
background: linear-gradient(135deg, #fff, #f8fdf9);
border-radius: 16px;
padding: 25px;
margin-bottom: 25px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(26, 95, 42, 0.08);
}
.page-header-enhanced .header-left h1 {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
margin: 0 0 5px;
display: flex;
align-items: center;
gap: 12px;
}
.page-header-enhanced .header-left h1 i {
width: 45px;
height: 45px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.15));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.page-header-enhanced .header-left p {
margin: 0;
color: #666;
font-size: 0.9rem;
}
/* Search Bar Enhancement */
.search-bar-enhanced {
display: flex;
gap: 10px;
background: #fff;
padding: 8px;
border-radius: 12px;
border: 2px solid #eee;
transition: all 0.3s ease;
}
.search-bar-enhanced:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(26, 95, 42, 0.1);
}
.search-bar-enhanced input {
border: none;
padding: 10px 15px;
font-size: 0.95rem;
background: transparent;
min-width: 250px;
}
.search-bar-enhanced input:focus {
outline: none;
}
.search-bar-enhanced .btn {
border-radius: 8px;
}
/* Filter Chips */
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: #fff;
border: 2px solid #eee;
border-radius: 25px;
font-size: 0.9rem;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-chip:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(26, 95, 42, 0.05);
}
.filter-chip.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.filter-chip .count {
background: rgba(0, 0, 0, 0.1);
padding: 2px 8px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 600;
}
.filter-chip.active .count {
background: rgba(255, 255, 255, 0.2);
}
/* Enhanced Card Styles */
.admin-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.admin-card:hover {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.admin-card .card-header {
background: linear-gradient(135deg, #fafafa, #f5f5f5);
padding: 20px 25px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.admin-card .card-header h5 {
margin: 0;
font-weight: 600;
color: var(--primary-color);
display: flex;
align-items: center;
gap: 10px;
}
.admin-card .card-header h5 i {
width: 35px;
height: 35px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.15));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.admin-card .card-body {
padding: 25px;
}
/* Form Sections */
.form-section {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}
.form-section-title {
font-size: 1rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(26, 95, 42, 0.1);
display: flex;
align-items: center;
gap: 8px;
}
.form-section-title i {
font-size: 14px;
}
/* Inline Edit */
.inline-edit {
display: flex;
align-items: center;
gap: 10px;
}
.inline-edit input {
flex: 1;
padding: 8px 12px;
border: 2px solid transparent;
border-radius: 8px;
background: transparent;
transition: all 0.3s ease;
}
.inline-edit input:hover {
background: #f5f5f5;
}
.inline-edit input:focus {
background: #fff;
border-color: var(--primary-color);
outline: none;
}
/* =====================================================
SWITCH TOGGLE — on/off toggle button
— Settings page मा enable/disable गर्न प्रयोग हुन्छ
— input:checked को background रंग परिवर्तन गर्न:
.switch-toggle input:checked+.slider मा background बदल्नुहोस्
===================================================== */
.switch-toggle {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
}
.switch-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.switch-toggle .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.3s;
border-radius: 26px;
}
.switch-toggle .slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.switch-toggle input:checked+.slider {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.switch-toggle input:checked+.slider:before {
transform: translateX(24px);
}
/* Progress Bars */
.progress-enhanced {
height: 10px;
background: #e9ecef;
border-radius: 5px;
overflow: hidden;
}
.progress-enhanced .progress-bar {
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 5px;
transition: width 0.6s ease;
}
/* Action Dropdown */
.action-dropdown {
position: relative;
display: inline-block;
}
.action-dropdown .dropdown-toggle {
background: #f5f5f5;
border: none;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.2s;
}
.action-dropdown .dropdown-toggle:hover {
background: #eee;
}
.action-dropdown .dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
min-width: 180px;
z-index: 1000;
padding: 8px;
display: none;
}
.action-dropdown .dropdown-menu.show {
display: block;
animation: dropdownFadeIn 0.2s ease;
}
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.action-dropdown .dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
color: #333;
text-decoration: none;
border-radius: 8px;
transition: all 0.2s;
}
.action-dropdown .dropdown-item:hover {
background: #f5f5f5;
}
.action-dropdown .dropdown-item.text-danger:hover {
background: #ffebee;
}
/* =====================================================
STATUS PILLS — आवेदन/रेकर्डको अवस्था देखाउने label
— success: हरियो (approved, active)
— warning: पहेँलो (pending, waiting)
— danger: रातो (rejected, inactive)
— info: नीलो (information)
===================================================== */
.status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.status-pill.success {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: #2e7d32;
}
.status-pill.warning {
background: linear-gradient(135deg, #fff8e1, #ffecb3);
color: #f9a825;
}
.status-pill.danger {
background: linear-gradient(135deg, #ffebee, #ffcdd2);
color: #c62828;
}
.status-pill.info {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: var(--color-info);
}
.status-pill i {
font-size: 10px;
}
/* Notification Badge */
.notification-badge {
position: relative;
}
.notification-badge .badge-count {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, var(--color-danger), #e83e8c);
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 3px 7px;
border-radius: 10px;
min-width: 18px;
text-align: center;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}
/* Timeline */
.timeline {
position: relative;
padding-left: 30px;
}
.timeline::before {
content: '';
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 2px;
background: #eee;
}
.timeline-item {
position: relative;
padding-bottom: 25px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -24px;
top: 5px;
width: 12px;
height: 12px;
background: var(--primary-color);
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.2);
}
.timeline-item .timeline-date {
font-size: 0.8rem;
color: #999;
margin-bottom: 5px;
}
.timeline-item .timeline-content {
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
}
/* Info Cards Grid */
.info-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.info-card {
background: #fff;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 1px solid transparent;
}
.info-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: rgba(26, 95, 42, 0.1);
}
.info-card .info-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.15));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--primary-color);
flex-shrink: 0;
}
.info-card .info-content h4 {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
color: #333;
}
.info-card .info-content p {
margin: 0;
font-size: 0.85rem;
color: #666;
}
/* Animated Loading */
.loading-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Responsive improvements */
@media (max-width: 991px) {
.page-header-enhanced {
flex-direction: column;
align-items: flex-start;
}
.search-bar-enhanced input {
min-width: 180px;
}
}
@media (max-width: 575px) {
.filter-chips {
gap: 8px;
}
.filter-chip {
padding: 8px 14px;
font-size: 0.85rem;
}
.admin-card .card-body {
padding: 15px;
}
}
/* ==============================================
ENHANCED DATA TABLES
============================================== */
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.data-table thead th {
background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
padding: 16px 15px;
font-weight: 600;
color: #333;
text-align: left;
border-bottom: 2px solid #e0e0e0;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.data-table thead th:first-child {
border-radius: 12px 0 0 0;
}
.data-table thead th:last-child {
border-radius: 0 12px 0 0;
}
.data-table tbody td {
padding: 18px 15px;
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
font-size: 0.95rem;
transition: all 0.2s ease;
}
.data-table tbody tr {
background: #fff;
transition: all 0.2s ease;
}
.data-table tbody tr:hover {
background: #f8fdf9;
}
.data-table tbody tr:hover td {
border-color: rgba(26, 95, 42, 0.1);
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
.data-table tbody tr:last-child td:first-child {
border-radius: 0 0 0 12px;
}
.data-table tbody tr:last-child td:last-child {
border-radius: 0 0 12px 0;
}
/* Action Buttons */
.btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
border: none;
background: #f5f5f5;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
margin-right: 5px;
}
.btn-action:last-child {
margin-right: 0;
}
.btn-action:hover {
transform: translateY(-2px);
}
.btn-action.btn-edit {
background: #e3f2fd;
color: #1976d2;
}
.btn-action.btn-edit:hover {
background: #1976d2;
color: #fff;
box-shadow: 0 5px 15px rgba(25, 118, 210, 0.3);
}
.btn-action.btn-view {
background: #e8f5e9;
color: #388e3c;
}
.btn-action.btn-view:hover {
background: #388e3c;
color: #fff;
box-shadow: 0 5px 15px rgba(56, 142, 60, 0.3);
}
.btn-action.btn-delete {
background: #ffebee;
color: #c62828;
}
.btn-action.btn-delete:hover {
background: #c62828;
color: #fff;
box-shadow: 0 5px 15px rgba(198, 40, 40, 0.3);
}
/* Help Text */
.help-text {
font-size: 0.85rem;
color: #999;
margin-top: 5px;
display: flex;
align-items: center;
gap: 5px;
}
.help-text i {
color: var(--primary-color);
}
/* Required asterisk */
.required {
color: #e53935;
}
/* Modal Body and Footer */
.modal-body {
padding: 25px;
}
.modal-footer {
padding: 15px 25px;
background: #f8f9fa;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
gap: 10px;
border-radius: 0 0 16px 16px;
}
/* Admin Form Groups */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 8px;
font-size: 0.95rem;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 0.95rem;
transition: all 0.3s ease;
background: #fafafa;
}
.form-control:hover {
border-color: #ccc;
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
background: #fff;
box-shadow: 0 0 0 4px rgba(26, 95, 42, 0.1);
}
textarea.form-control {
min-height: 120px;
resize: vertical;
}
/* Row layouts for forms */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.col-md-4,
.col-md-6,
.col-md-8 {
padding: 0 10px;
}
.col-md-4 {
flex: 0 0 33.333%;
max-width: 33.333%;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-md-8 {
flex: 0 0 66.666%;
max-width: 66.666%;
}
@media (max-width: 767px) {
.col-md-4,
.col-md-6,
.col-md-8 {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ==============================================
FIX: DROPDOWN OVERFLOW IN TABLES
Ensure action dropdowns don't get clipped
============================================== */
.table-responsive,
.table-wrapper .table-body {
overflow: visible !important;
}
.table-wrapper {
overflow: visible;
}
/* Action dropdown in tables - position fix */
.data-table .action-dropdown,
.table .action-dropdown {
position: relative;
}
.data-table .action-dropdown .dropdown-menu,
.table .action-dropdown .dropdown-menu,
.action-dropdown .dropdown-content {
position: absolute;
right: 0;
top: 100%;
z-index: 1050;
min-width: 160px;
background: white;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
padding: 8px 0;
display: none;
border: 1px solid #eee;
}
.action-dropdown.show .dropdown-content,
.action-dropdown .dropdown-menu.show {
display: block;
}
.action-dropdown .dropdown-content a,
.action-dropdown .dropdown-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
color: #333;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.action-dropdown .dropdown-content a:hover,
.action-dropdown .dropdown-menu a:hover {
background: #f5f5f5;
color: var(--primary-color);
}
.action-dropdown .dropdown-content a.text-danger:hover,
.action-dropdown .dropdown-menu a.text-danger:hover {
background: #ffebee;
color: #e53935;
}
/* Ensure last rows dropdown goes UP instead of DOWN */
.data-table tbody tr:nth-last-child(-n+2) .action-dropdown .dropdown-content,
.data-table tbody tr:nth-last-child(-n+2) .action-dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 5px;
}
/* ==============================================
FIX: MOBILE SIDEBAR TOGGLE
============================================== */
.sidebar-toggle {
display: none;
background: none;
border: none;
font-size: 24px;
color: var(--primary-color);
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
}
.sidebar-toggle:hover {
background: rgba(26, 95, 42, 0.1);
}
@media (max-width: 991px) {
.sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-close {
position: absolute;
top: 15px;
right: 15px;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
color: white;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.sidebar-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
/* Sidebar overlay for mobile */
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
backdrop-filter: blur(3px);
}
.sidebar-overlay.active {
display: block;
}
}
/* ==============================================
NEW BADGE STYLES
For services and menu items
============================================== */
.new-badge,
.badge-new {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
font-size: 0.65rem;
font-weight: 700;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 8px;
animation: newBadgePulse 2s ease-in-out infinite;
}
@keyframes newBadgePulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(238, 90, 36, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 10px 3px rgba(238, 90, 36, 0.2);
}
}
/* ==============================================
SEARCH ICON FOR HEADER
============================================== */
.header-search-btn {
width: 40px;
height: 40px;
background: #f5f5f5;
border: none;
border-radius: 10px;
color: #666;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.header-search-btn:hover {
background: var(--primary-color);
color: white;
}
/* ==============================================
DARK MODE TOGGLE (Basic Structure)
============================================== */
.dark-mode-toggle {
width: 40px;
height: 40px;
background: #f5f5f5;
border: none;
border-radius: 10px;
color: #666;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
}
.dark-mode-toggle:hover {
background: #333;
color: var(--color-warning);
}
.dark-mode-toggle .fa-sun {
display: none;
}
.dark-mode-toggle .fa-moon {
display: block;
}
body.dark-mode .dark-mode-toggle .fa-sun {
display: block;
}
body.dark-mode .dark-mode-toggle .fa-moon {
display: none;
}
/* ==============================================
NEPALI DATE VALIDATION STYLES
============================================== */
.date-input-wrapper {
position: relative;
}
.date-input-wrapper .date-validation-hint {
position: absolute;
right: 45px;
top: 50%;
transform: translateY(-50%);
font-size: 0.75rem;
color: #999;
}
.date-input-wrapper.invalid .form-control {
border-color: #e53935;
background: #fff5f5;
}
.date-input-wrapper.invalid .date-validation-hint {
color: #e53935;
}
.date-input-wrapper.valid .form-control {
border-color: var(--secondary-color);
}
.date-input-wrapper.valid .date-validation-hint {
color: var(--secondary-color);
}
/* ==============================================
TRACKING NUMBER STYLES
============================================== */
.tracking-number {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
color: #1976d2;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
font-weight: 600;
border-radius: 6px;
border: 1px solid rgba(25, 118, 210, 0.2);
}
.tracking-number i {
font-size: 0.75rem;
}
.tracking-number:hover {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}
/* =====================================================
ADMIN PANEL — सबै CARD को डिजाइन
=====================================================
यो section ले admin panel को हरेक "card" (box) को
रंग, shape र style control गर्छ।
यहाँ परिवर्तन गर्दा admin का सबै pages मा एकसाथ असर पर्छ।
===================================================== */
/* --- Card को बाहिरी shape --- */
.main-content .card {
border: 0 !important; /* card को border/रेखा हटाइएको */
border-radius: 18px !important; /* कुना कति गोलो: 0 = सिधा, 18 = गोलो */
box-shadow: 0 14px 36px rgba(16, 24, 40, 0.08) !important; /* छाया: हटाउन 'none' लेख्नुहोस् */
overflow: hidden;
}
/* --- Card को माथिल्लो हरियो header --- */
.main-content .card > .card-header {
/* हरियो gradient रंग: var(--primary-color) = गाढा हरियो, var(--color-success) = हल्का हरियो
रंग बदल्न यी दुई color code फेर्नुहोस् */
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%) !important;
color: #fff !important; /* header को लेखाइ सेतो */
border-bottom: 0 !important;
padding: 16px 20px; /* header भित्रको spacing */
}
/* --- Header भित्रका सबै text सेतो बनाउने --- */
.main-content .card > .card-header * {
color: #fff !important;
}
/* --- Header को title (शीर्षक) को style --- */
.main-content .card > .card-header h4,
.main-content .card > .card-header h5,
.main-content .card > .card-header h6 {
margin: 0;
display: flex;
align-items: center;
gap: 10px; /* icon र title बीचको दुरी */
font-weight: 700; /* 700 = मोटो, 400 = सामान्य */
}
/* --- Header मा देखिने badge (count badge) को रंग --- */
.main-content .card > .card-header .badge {
color: var(--primary-color) !important; /* badge को text रंग — हरियो */
background: #fff !important; /* badge को पृष्ठभूमि — सेतो */
}
/* --- Form का input box हरूको style --- */
.main-content .card .form-control,
.main-content .card .form-select,
.main-content .card .form-control-sm,
.main-content .card .form-select-sm {
border-radius: 10px !important; /* input को गोलो कुना */
border-color: #dce8df !important; /* input को border रंग */
}
/* --- Input मा click गर्दा देखिने highlight रंग --- */
.main-content .card .form-control:focus,
.main-content .card .form-select:focus {
border-color: var(--color-success) !important; /* focus border: हरियो रंग */
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.14) !important;
}
/* --- Form को label (Input को नाम) को style --- */
.main-content .card .form-label {
font-weight: 600; /* मोटो label */
color: #24412b; /* label को रंग — गाढा हरियो */
}
/* --- Table (तालिका) को style --- */
.main-content .card .table {
margin: 0;
}
/* --- Table को header row (th) --- */
.main-content .card .table th {
background: #f8fdf9; /* th को पृष्ठभूमि रंग */
color: var(--primary-color); /* th को text रंग */
font-weight: 600;
border-bottom: 2px solid #dce8df;
white-space: nowrap;
padding: 12px 16px; /* th भित्रको spacing */
}
/* --- Table को data rows (td) --- */
.main-content .card .table td {
padding: 12px 16px; /* td भित्रको spacing */
vertical-align: middle;
border-bottom: 1px solid #f0f7f2;
}
/* --- Table row मा mouse राख्दा highlight हुने रंग --- */
.main-content .card .table tbody tr:hover {
background: #f8fdf9; /* hover रंग: हल्का हरियो */
}
/* --- Card को body (content area) भित्रको spacing --- */
.main-content .card .card-body {
padding: 24px; /* बढाउन 30px, घटाउन 16px */
}
/* --- Card भित्रका Primary button (हरियो button) --- */
.main-content .card .btn-primary {
/* बायाँ रंग: गाढा, दायाँ रंग: हल्का — दुवै बदल्न सकिन्छ */
background: linear-gradient(135deg, var(--primary-color), var(--color-success));
border: none;
border-radius: 10px; /* button को गोलो कुना */
}
/* --- Button मा mouse राख्दा हुने effect --- */
.main-content .card .btn-primary:hover {
background: linear-gradient(135deg, #155222, #218838); /* hover गर्दा अझ गाढा हुन्छ */
transform: translateY(-1px); /* hover मा थोडा माथि उठ्छ */
box-shadow: 0 4px 12px rgba(40,167,69,0.3);
}
/* ==========================================================
Issue #9: Admin Panel Menu UI/UX Enhancement
- Sidebar navigation improved
- Section labels better visibility
- Active/hover states more polished
- Flash messages nicer
- Dashboard cards nicer
========================================================== */
/* Sidebar section labels — अझ राम्रो देखिन्छ */
.sidebar-section-label {
/* छोटो section title — जस्तै "सामग्री", "आवेदनहरू" */
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.45) !important;
padding: 14px 18px 6px;
margin-top: 4px;
cursor: default;
}
/* Nav links hover — improved gradient */
.sidebar-nav a:hover {
background: rgba(255,255,255,0.12) !important;
color: #fff !important;
transform: translateX(3px); /* slight right nudge */
}
/* Active nav item — more prominent */
.sidebar-nav li.active > a {
background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)) !important;
color: #fff !important;
border-left: 3px solid #7fff8a; /* left accent */
padding-left: 12px !important;
font-weight: 600;
}
/* Nav icon wrapper — icon को surrounding */
.nav-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 7px;
background: rgba(255,255,255,0.1);
flex-shrink: 0;
transition: background 0.2s;
}
.sidebar-nav li.active > a .nav-icon-wrap,
.sidebar-nav a:hover .nav-icon-wrap {
background: rgba(255,255,255,0.2);
}
/* Badge — notification count bubble */
.sidebar-nav .badge {
background: linear-gradient(135deg, #ff6b6b, #e53935) !important;
color: #fff !important;
font-size: 0.68rem;
padding: 3px 7px;
border-radius: 20px;
margin-left: auto;
animation: badge-pulse 2s infinite;
}
@keyframes badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* Top header bar — improved */
.admin-header {
background: #fff;
box-shadow: 0 2px 12px rgba(26,95,42,0.08);
border-bottom: 2px solid #e8f5e9;
}
/* Page title in header */
.admin-header .page-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-color);
}
/* View Site button */
.btn-view-site {
background: linear-gradient(135deg, var(--primary-color), #2d8b47);
color: #fff !important;
border-radius: 8px;
padding: 7px 14px;
font-size: 0.85rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: all 0.2s;
}
.btn-view-site:hover {
background: linear-gradient(135deg, #145022, #218838);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(26,95,42,0.2);
}
/* Flash messages — improved */
.page-content .alert {
border-radius: 10px;
border: none;
padding: 14px 20px;
font-size: 0.9rem;
margin-bottom: 20px;
}
.page-content .alert-success {
background: linear-gradient(90deg, #e8f5e9, #f1fbf2);
color: var(--primary-color);
border-left: 4px solid var(--color-success);
}
.page-content .alert-danger {
background: linear-gradient(90deg, #fdecea, #fff5f4);
color: #c62828;
border-left: 4px solid #e53935;
}
/* Stats/summary cards on dashboard — improved */
.stats-card, .summary-card {
border-radius: 14px !important;
border: none !important;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.stats-card:hover, .summary-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
}
/* DataTable improvements */
.dataTables_wrapper .dataTables_filter input {
border-radius: 8px;
border: 1px solid #dce8df;
padding: 6px 12px;
}
.dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--color-success);
outline: none;
box-shadow: 0 0 0 3px rgba(40,167,69,0.12);
}
/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 6px !important;
margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: linear-gradient(135deg, var(--primary-color), var(--color-success)) !important;
color: #fff !important;
border-color: transparent !important;
}
/* Card header improvements */
.main-content .card .card-header {
background: linear-gradient(90deg, #f8fdf9, #f0f8f2);
border-bottom: 2px solid #e8f5e9;
padding: 14px 20px;
}
.main-content .card .card-header h5 {
color: var(--primary-color);
font-weight: 600;
margin: 0;
}
/* Scrollbar — custom thin scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
width: 4px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.35);
}
/* =============================================================
EYE-CATCHING FORM INPUTS — आकर्षक form fields
Admin panel का सबै form fields लाई राम्रो देखाउँछ।
============================================================= */
/* मुख्य fancy input style — focus मा हरियो border र glow */
.admin-fancy-input {
border: 1.5px solid #d1e8d6;
border-radius: 10px;
padding: 10px 14px;
font-size: 0.95rem;
background: #f8fdf9;
transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
color: #1a3a22;
}
.admin-fancy-input:focus {
border-color: var(--color-success);
background: #fff;
box-shadow: 0 0 0 3px rgba(40,167,69,0.14), 0 2px 8px rgba(26,95,42,0.08);
outline: none;
color: #111;
}
.admin-fancy-input::placeholder {
color: #a8c4b0;
font-size: 0.88rem;
}
/* Input group icon suffix (calendar, percent, etc) */
.input-group .input-group-text.bg-success {
border-radius: 0 10px 10px 0;
font-size: 0.9rem;
}
/* Toggle switch wrapper — visual container */
.admin-toggle-wrap {
background: #f4fbf6;
border: 1px solid #dce8df;
border-radius: 12px;
padding: 10px 16px;
}
.admin-toggle-wrap .form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
/* =============================================================
ADMIN TABS — Form/Table tabs for better UX
admin-nav-tabs: Bootstrap tabs लाई custom style
============================================================= */
.admin-nav-tabs {
border-bottom: 2px solid #e8f5e9;
gap: 4px;
}
.admin-nav-tabs .nav-link {
border: 1.5px solid transparent;
border-radius: 10px 10px 0 0;
color: #555;
font-weight: 600;
padding: 10px 22px;
transition: all 0.22s;
background: #f8fdf9;
}
.admin-nav-tabs .nav-link:hover {
color: var(--primary-color);
border-color: #c8e6c9 #c8e6c9 transparent;
background: #edf7ef;
}
.admin-nav-tabs .nav-link.active {
color: var(--primary-color);
background: #fff;
border-color: var(--color-success) var(--color-success) #fff;
border-bottom: 2px solid #fff;
box-shadow: 0 -2px 8px rgba(26,95,42,0.08);
}
.admin-nav-tabs .nav-link .badge {
font-size: 0.72rem;
padding: 3px 7px;
}
/* Category toggle buttons in rate form */
.cat-btn {
border-radius: 10px;
padding: 10px 0;
font-weight: 600;
transition: all 0.2s;
}
.cat-btn.active-cat {
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
/* =============================================================
POPUP MODAL IMPROVEMENTS
Admin modals लाई professional देखाउँछ।
============================================================= */
/* Modal animation — उपर बाट तल आउँछ */
.modal.fade .modal-dialog {
transform: translateY(-30px);
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.modal.show .modal-dialog {
transform: translateY(0);
}
/* Modal content border */
.modal-content {
border-radius: 18px;
overflow: hidden;
}
/* Modal header gradient (overrides inline if needed) */
.modal .modal-header {
padding: 18px 24px;
}
.modal .modal-title {
font-size: 1.05rem;
letter-spacing: 0.01em;
}
/* Modal body padding */
.modal .modal-body {
padding: 24px;
}
/* Modal footer */
.modal .modal-footer {
padding: 14px 24px;
border-top: 1px solid #e8f5e9;
}
/* =============================================================
ADMIN INFO DROPDOWN — header मा admin नाम र menu
— admin नाम click/hover गर्दा profile/password/logout देखिन्छ
— .admin-info: बाहिरी container (position: relative चाहिन्छ)
— .admin-name: admin को नाम देखाउने span
— .admin-menu: drop-down list (hidden by default, hover मा देखिन्छ)
============================================================= */
.header-item {
display: flex;
align-items: center;
}
/* Admin नाम र dropdown wrapper */
.admin-info {
position: relative;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 6px 12px;
border-radius: 30px;
border: 1.5px solid #e0ede3;
background: #f8fdf9;
transition: background 0.2s, border-color 0.2s;
user-select: none;
}
.admin-info:hover,
.admin-info:focus-within {
background: #edf7ef;
border-color: var(--color-success);
}
/* Admin नाम — text */
.admin-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--primary-color);
white-space: nowrap;
}
/* Admin नाम पछि सानो arrow icon देखाउने */
.admin-name::after {
content: '\f107'; /* fa-chevron-down */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 0.7rem;
margin-left: 6px;
opacity: 0.6;
display: inline-block;
}
/* Admin avatar icon */
.admin-info::before {
content: '\f007'; /* fa-user */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 0.85rem;
color: #fff;
background: linear-gradient(135deg, var(--primary-color), var(--color-success));
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Dropdown menu — profile / password / logout */
.admin-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
background: #fff;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(26, 95, 42, 0.15), 0 2px 8px rgba(0,0,0,0.06);
border: 1px solid #e8f5e9;
min-width: 190px;
padding: 8px;
z-index: 2000;
display: none; /* hover मा देखिन्छ — तल CSS ले control गर्छ */
flex-direction: column;
animation: adminMenuIn 0.18s cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes adminMenuIn {
from { opacity: 0; transform: translateY(-8px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Hover/focus-within गर्दा menu देखाउँछ */
.admin-info:hover .admin-menu,
.admin-info:focus-within .admin-menu {
display: flex;
}
/* Menu items — links */
.admin-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
color: #333;
text-decoration: none;
border-radius: 9px;
font-size: 0.88rem;
font-weight: 500;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.admin-menu a i {
width: 18px;
text-align: center;
color: var(--primary-color);
font-size: 0.88rem;
}
.admin-menu a:hover {
background: #f0f8f2;
color: var(--primary-color);
}
/* Logout link — रातो */
.admin-menu a:last-child {
color: #c62828;
border-top: 1px solid #f0f0f0;
margin-top: 4px;
padding-top: 12px;
}
.admin-menu a:last-child i { color: #c62828; }
.admin-menu a:last-child:hover { background: #ffebee; color: #c62828; }
/* Notification Bell — alerts count */
.notification-bell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: #f8fdf9;
border: 1.5px solid #e0ede3;
border-radius: 50%;
color: var(--primary-color);
font-size: 1rem;
cursor: default;
transition: background 0.2s, border-color 0.2s;
}
.notification-bell:hover {
background: #edf7ef;
border-color: var(--color-success);
}
/* Red count badge on bell */
.notif-count {
position: absolute;
top: -5px;
right: -5px;
background: linear-gradient(135deg, #e53935, #ef5350);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 5px;
border-radius: 10px;
min-width: 17px;
text-align: center;
line-height: 1.3;
box-shadow: 0 2px 5px rgba(229,57,53,0.35);
}
/* =============================================================
VERSION BADGE — Admin header मा version देखाउँछ
(click गर्यो भने settings.php#version मा जान्छ)
============================================================= */
.version-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(40,167,69,0.12);
color: var(--primary-color);
border: 1px solid #c8e6c9;
border-radius: 20px;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.03em;
cursor: pointer; /* pointer cursor — clickable देखाउँछ */
transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
text-decoration: none !important; /* underline हटाउँछ */
}
/* Hover state — user ले hover गर्दा highlight हुन्छ */
.version-badge:hover {
background: rgba(40,167,69,0.28);
border-color: #81c784;
color: #0d3a1a;
box-shadow: 0 2px 8px rgba(40,167,69,0.20);
text-decoration: none !important;
}
/* Edit icon — hover मा देखिन्छ */
.version-badge .edit-hint {
font-size: 0.68rem;
opacity: 0;
transition: opacity 0.18s;
margin-left: 2px;
}
.version-badge:hover .edit-hint {
opacity: 1;
}
/* =============================================================
RESPONSIVE: Mobile admin panel
============================================================= */
@media (max-width: 768px) {
/* Mobile मा modal full-width हुन्छ */
.modal-dialog { margin: 10px; }
.admin-nav-tabs .nav-link { padding: 8px 12px; font-size: 0.85rem; }
.admin-fancy-input { font-size: 0.9rem; }
.page-content { padding: 15px; }
}
/* =====================================================
Admin Table Action Buttons — एउटै line मा
Edit/Delete buttons को लागि nowrap र inline flex
(सबै admin tables मा automatically apply हुन्छ)
===================================================== */
/* Action column — last td मा buttons एकै line मा */
.data-table td:last-child,
.table td:last-child,
td.action-col {
white-space: nowrap;
width: 1%; /* column जति चाहिन्छ उति मात्र लिन्छ */
}
/* Action column header पनि minimum width */
.data-table th:last-child,
.table th:last-child,
th.action-col {
white-space: nowrap;
width: 1%;
text-align: center;
}
/* सबै btn-sm buttons icon + text एकै line मा */
.table td .btn-sm,
.data-table td .btn-sm {
display: inline-flex;
align-items: center;
gap: 3px;
white-space: nowrap;
vertical-align: middle;
}
/* Table action buttons container — एउटै line */
.table-actions,
.btn-actions,
.action-buttons,
.btn-group-action {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
}
/* Edit/Delete buttons बिचको gap */
.table td .btn-sm + .btn-sm,
.data-table td .btn-sm + .btn-sm {
margin-left: 2px;
}
/* ── Modal font size fixes (reduced oversized text) ── */
.modal-title {
font-size: 1.1rem !important;
}
.modal-body {
font-size: 0.9rem;
}
.modal-body label {
font-size: 0.85rem;
font-weight: 600;
}
.modal-body .form-control,
.modal-body .form-select {
font-size: 0.9rem;
}
.modal-body .form-text {
font-size: 0.78rem;
}
.modal .btn {
font-size: 0.88rem;
}
/* ── Tab panel forms ── */
.nav-tabs .nav-link {
font-size: 0.88rem;
}
.tab-content .form-label {
font-size: 0.85rem;
font-weight: 600;
}
/* ── Prevent modal backdrop z-index from hiding WhatsApp CTA ── */
#whatsappCta, .whatsapp-cta, .whatsapp-btn {
z-index: 1060 !important;
}
/* ══════════════════════════════════════════════════
TOGGLE SWITCH (form-switch) FONT SIZE FIX
fs-5 class makes labels too large inside modals
══════════════════════════════════════════════════ */
.form-check.form-switch.fs-5 {
font-size: 0.92rem !important;
padding: 8px 12px 8px 44px;
background: #f4fbf6;
border: 1px solid #dce8df;
border-radius: 10px;
}
.form-check.form-switch.fs-5 .form-check-input {
width: 2.5em;
height: 1.3em;
margin-top: 0.1em;
}
.form-check.form-switch.fs-5 .form-check-label {
font-size: 0.92rem !important;
font-weight: 600;
line-height: 1.4;
}
/* Keep modal toggle labels compact */
.modal .form-check.form-switch .form-check-label,
.modal .form-check-label {
font-size: 0.9rem !important;
font-weight: 600;
}
.modal .form-check.form-switch .form-check-input {
width: 2.5em;
height: 1.3em;
}
/* ══════════════════════════════════════════════════
ADMIN SIDEBAR — Mobile Responsive Improvements
══════════════════════════════════════════════════ */
/* Submenu items styling — hide/show logic is in admin-header.php inline style */
.nav-submenu li {
margin: 0 !important;
}
.nav-submenu li a {
border-radius: 6px;
padding: 7px 12px !important;
font-size: 0.83rem !important;
}
.nav-submenu li a:hover {
background: rgba(255,255,255,0.12);
}
/* Section label fix — cleaner separators */
.sidebar-section-label {
opacity: 1 !important;
font-size: 0.68rem !important;
color: rgba(255,255,255,0.55) !important;
letter-spacing: 1px;
text-transform: uppercase;
padding: 8px 16px 2px !important;
}
/* Nav group header — open state indicator */
.nav-group-header.open {
background: rgba(255,255,255,0.12) !important;
}
.nav-group-header.open .group-arrow {
transform: rotate(90deg);
}
.group-arrow {
transition: transform 0.25s ease;
display: inline-block;
}
/* Sidebar mobile overlay touch fix */
@media (max-width: 991px) {
.sidebar {
z-index: 1050 !important;
}
.sidebar-overlay {
z-index: 1040 !important;
}
.sidebar-nav {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ══════════════════════════════════════════════════
MODAL LAYOUT — Form boxes alignment fix
══════════════════════════════════════════════════ */
.modal .row {
--bs-gutter-x: 1rem;
}
.modal .form-control,
.modal .form-select {
min-height: 38px;
font-size: 0.88rem !important;
}
.modal .input-group .form-control {
min-height: 38px;
}
/* Fix modal-dialog max-width on small screens */
@media (max-width: 575px) {
.modal-dialog {
margin: 0.5rem;
}
.modal-dialog.modal-lg {
max-width: calc(100vw - 1rem);
}
}
/* New Badge label fix */
.badge.bg-warning,
.badge.bg-success,
.badge.bg-secondary {
font-size: 0.72rem !important;
padding: 3px 8px !important;
font-weight: 600;
}
/* ══════════════════════════════════════════════════════════════
UNIVERSAL ADMIN UI — admin-ui.php helpers ko consistent design
Feedbacks.php ko design pattern sabai pages ma enforce garcha.
Yo section ले sabai admin pages lai uniform look dina CSS dinca.
══════════════════════════════════════════════════════════════ */
/* ── Page Header ── */
.admin-page-header {
padding-bottom: 16px;
border-bottom: 2px solid #e9ecef;
margin-bottom: 24px !important;
}
.admin-page-header h4 {
font-size: 1.25rem;
font-weight: 700;
color: #1a3a25;
line-height: 1.6;
}
.admin-page-header small {
font-size: 0.82rem;
margin-top: 3px;
}
/* ── Table card ── */
.admin-table-card {
border: none;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}
.admin-table-card table th {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
background: var(--primary-color) !important;
color: #fff !important;
border-color: #155224 !important;
padding: 10px 12px;
white-space: nowrap;
}
.admin-table-card table td {
font-size: 0.86rem;
padding: 10px 12px;
vertical-align: middle;
border-color: #f0f0f0;
}
.admin-table-card table tbody tr:hover {
background: #f0faf3 !important;
}
/* ── Section Cards (for form grouping) ── */
.admin-section-card {
border-radius: 8px !important;
overflow: hidden;
}
.admin-section-card .card-header {
padding: 10px 16px;
font-weight: 600;
}
.admin-section-card .card-header h6 {
font-size: 0.875rem;
}
.admin-section-card .card-body {
padding: 18px 16px;
background: #fff;
}
/* ── Empty state ── */
.admin-empty-state {
font-size: 0.9rem;
}
.admin-empty-state i {
color: #c5d5ca;
}
/* ── Action buttons (edit + delete) ── */
td .btn-outline-primary,
td .btn-outline-danger,
td .btn-outline-info,
td .btn-outline-secondary {
padding: 4px 10px !important;
font-size: 0.78rem !important;
}
/* ── Stat badges in header ── */
.admin-page-header .badge.fs-6 {
font-size: 0.8rem !important;
border-radius: 20px;
transition: transform 0.1s, box-shadow 0.1s;
}
.admin-page-header .badge.fs-6:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
/* ── Alert boxes ── */
.alert {
border-radius: 8px;
font-size: 0.88rem;
}
/* ── Form labels ── */
.form-label {
font-size: 0.83rem;
font-weight: 600;
color: #2d4a35;
margin-bottom: 5px;
}
/* ── Form inputs consistent sizing ── */
.form-control,
.form-select {
font-size: 0.88rem;
border-radius: 6px;
border-color: #ced4da;
min-height: 38px;
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(26,95,42,0.15);
}
textarea.form-control {
min-height: unset;
}
/* ── Card with green header (feedbacks.php style) ── */
.admin-card-header-green {
background: var(--primary-color);
color: white;
padding: 14px 18px;
border-radius: 0;
}
.admin-card-header-green h5,
.admin-card-header-green h6 {
margin: 0;
font-weight: 600;
}
/* ── Back button consistent ── */
.admin-back-btn {
font-size: 0.85rem;
}
/* ── View/Edit detail panel ── */
.admin-detail-panel {
border: none;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
border-radius: 10px;
overflow: hidden;
}
.admin-detail-panel .card-body {
padding: 24px;
}
/* ── Info key-value table inside detail panels ── */
.admin-kv-table th {
width: 38%;
font-size: 0.82rem;
font-weight: 600;
color: #555;
background: #f8faf9;
}
.admin-kv-table td {
font-size: 0.88rem;
}
/* ── Filter bar ── */
.admin-filter-bar {
background: #fff;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
border: 1px solid #e5ede8;
}
.admin-filter-bar .form-select,
.admin-filter-bar .form-control {
max-width: 180px;
font-size: 0.83rem;
}
/* ── Page form (full page add/edit, not modal) ── */
.admin-form-page .card {
border: none;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
border-radius: 10px;
overflow: hidden;
}
.admin-form-page .card-header {
background: var(--primary-color);
color: white;
padding: 14px 20px;
}
.admin-form-page .card-header h5 {
font-size: 1rem;
font-weight: 700;
margin: 0;
}
.admin-form-page .form-footer {
background: #f8faf9;
border-top: 1px solid #e5ede8;
padding: 16px 20px;
display: flex;
gap: 10px;
align-items: center;
}
/* ── Nepali rupee amounts ── */
.admin-amount {
font-weight: 600;
font-size: 0.85rem;
white-space: nowrap;
}
.admin-amount-sub {
font-size: 0.75rem;
color: var(--color-success);
}
/* ── NPA color indicators ── */
.npa-good { background: var(--color-success) !important; }
.npa-warning { background: var(--color-warning) !important; color: #000 !important; }
.npa-danger { background: var(--color-danger) !important; }
/* ══════════════════════════════════════════════════════════════
INSTITUTIONAL PROFILE specific enhancements
══════════════════════════════════════════════════════════════ */
.profile-stat-row {
background: linear-gradient(135deg, #f0faf3 0%, #e8f5ed 100%);
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 4px;
}
.profile-stat-label {
font-size: 0.75rem;
color: #666;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
}
.profile-stat-value {
font-size: 1rem;
font-weight: 700;
color: var(--primary-color);
}
/* ══════════════════════════════════════════════════════════════
NEPALI DATEPICKER — Calendar Popup Styling
nepalidatepicker.sajanmaharjan.com.np v4 ko overrides
══════════════════════════════════════════════════════════════ */
/* Calendar popup container */
.nepali-datepicker-calendar,
.ndp-calendar,
.calendar-container {
z-index: 9999 !important; /* Modal भन्दा माथि */
border-radius: 10px !important;
box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;
border: 1px solid #d4e8da !important;
font-family: 'Mukta', sans-serif !important;
overflow: hidden;
}
/* Calendar header (month/year area) */
.ndp-calendar .ndp-day-of-week,
.ndp-calendar .ndp-nav-header,
.nepali-datepicker-calendar .header {
background: var(--primary-color) !important;
color: white !important;
font-size: 0.82rem !important;
}
/* Selected date highlight */
.ndp-calendar .ndp-selected,
.nepali-datepicker-calendar .selected {
background: var(--primary-color) !important;
color: white !important;
border-radius: 50% !important;
}
/* Today highlight */
.ndp-calendar .ndp-today,
.nepali-datepicker-calendar .today {
border: 2px solid var(--primary-color) !important;
border-radius: 50% !important;
color: var(--primary-color) !important;
font-weight: 700 !important;
}
/* Hover state */
.ndp-calendar .ndp-day:hover,
.nepali-datepicker-calendar .day:hover {
background: #e8f5ed !important;
border-radius: 50% !important;
cursor: pointer;
}
/* Year/Month dropdowns inside calendar */
.ndp-calendar select {
border-radius: 4px !important;
font-size: 0.82rem !important;
border-color: var(--color-success) !important;
padding: 2px 6px !important;
}
/* Calendar icon button — input-group addon */
.ndp-trigger {
border-radius: 0 6px 6px 0 !important;
transition: background 0.2s;
}
.ndp-trigger:hover {
background: #155221 !important;
}
/* Input field when datepicker is active */
.nepali-datepicker:focus {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 0.2rem rgba(26,95,42,0.15) !important;
}
/* Fix z-index inside Bootstrap modals */
.modal .nepali-datepicker-calendar,
.modal .ndp-calendar {
z-index: 99999 !important;
}
/* Autocomplete off styling — remove outline on autofill */
.nepali-datepicker:-webkit-autofill {
-webkit-box-shadow: 0 0 0 100px white inset !important;
}
/* =============================================================
UNIVERSAL ADMIN UI — v6 Global Overrides
admin-ui.php lagako hoina teti pages ka lagi pani same look
============================================================= */
/* ── Universal Page Header ── */
.main-content .d-flex.justify-content-between.align-items-center.mb-4 {
background: #fff;
border-left: 5px solid var(--primary-color);
border-radius: 0 8px 8px 0;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem !important;
box-shadow: 0 2px 8px rgba(26,95,42,0.08);
}
.main-content .d-flex.justify-content-between.align-items-center.mb-4 h4,
.main-content .d-flex.justify-content-between.align-items-center.mb-4 h3 {
color: var(--primary-color) !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
margin-bottom: 0 !important;
}
/* ── Universal Table Head — Dark Green ── */
.main-content table thead,
.main-content table thead tr {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%) !important;
color: #fff !important;
}
.main-content table thead th,
.main-content table thead td {
background: transparent !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 0.83rem !important;
letter-spacing: 0.02em !important;
border: none !important;
padding: 0.85rem 0.75rem !important;
white-space: nowrap;
}
/* ── Universal Card styling ── */
.main-content .card,
.main-content .admin-table-card {
border: none !important;
border-radius: 12px !important;
box-shadow: 0 2px 16px rgba(26,95,42,0.09) !important;
overflow: hidden;
}
.main-content .card-header {
background: #f8fffe !important;
border-bottom: 2px solid #e8f5e9 !important;
font-weight: 600;
color: var(--primary-color);
}
/* ── Universal table rows ── */
.main-content table tbody tr:hover {
background-color: #f0f9f2 !important;
transition: background-color 0.15s ease;
}
.main-content table tbody tr {
border-bottom: 1px solid #f0f4f0;
}
.main-content table tbody td {
vertical-align: middle !important;
padding: 0.75rem !important;
}
/* ── Universal action buttons ── */
.main-content .btn-outline-primary {
border-color: var(--primary-color) !important;
color: var(--primary-color) !important;
}
.main-content .btn-outline-primary:hover {
background: var(--primary-color) !important;
color: #fff !important;
}
.main-content .btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--color-success)) !important;
border: none !important;
border-radius: 8px !important;
font-weight: 600;
}
.main-content .btn-primary:hover {
background: linear-gradient(135deg, #145023, #1e8c34) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26,95,42,0.3) !important;
}
.main-content .btn-outline-danger:hover {
transform: translateY(-1px);
}
/* ── Universal badge styling ── */
.main-content .badge.bg-success {
background: var(--primary-color) !important;
color: #fff !important;
}
.main-content .badge.bg-success i,
.main-content .badge.bg-success .fas,
.main-content .badge.bg-success .far {
color: #fff !important;
}
.main-content .badge {
font-size: 0.75rem !important;
padding: 0.35em 0.65em !important;
border-radius: 6px !important;
}
/* ── Universal form controls ── */
.main-content .form-control:focus,
.main-content .form-select:focus {
border-color: var(--color-success) !important;
box-shadow: 0 0 0 0.2rem rgba(26,95,42,0.15) !important;
}
.main-content .form-label {
font-weight: 600;
color: #2d3748;
font-size: 0.875rem;
}
/* ── Modal universal header ── */
.modal-header {
background: linear-gradient(135deg, var(--primary-color), var(--color-success)) !important;
color: #fff !important;
border-radius: 12px 12px 0 0 !important;
}
.modal-header .modal-title {
color: #fff !important;
font-weight: 700 !important;
}
.modal-header .btn-close {
filter: invert(1) !important;
}
.modal-content {
border-radius: 12px !important;
border: none !important;
box-shadow: 0 8px 40px rgba(26,95,42,0.18) !important;
}
/* ── Universal tab styling ── */
.main-content .nav-tabs .nav-link.active {
color: var(--primary-color) !important;
border-bottom: 3px solid var(--primary-color) !important;
font-weight: 700 !important;
}
.main-content .nav-tabs .nav-link:hover {
color: var(--color-success) !important;
}
.main-content .nav-tabs {
border-bottom: 2px solid #e8f5e9 !important;
}
/* ── Universal alert boxes ── */
.main-content .alert-success {
background: #f0faf2 !important;
border-left: 4px solid var(--primary-color) !important;
border-radius: 8px !important;
color: var(--primary-color) !important;
}
.main-content .alert-danger {
background: #fff5f5 !important;
border-left: 4px solid var(--color-danger) !important;
border-radius: 8px !important;
}
.main-content .alert-warning {
background: #fffbf0 !important;
border-left: 4px solid var(--color-warning) !important;
border-radius: 8px !important;
}
/* ── Select dropdown green ── */
.main-content .form-select:focus {
border-color: var(--color-success) !important;
}
/* ── Reports page container override ── */
.main-content .container-fluid.py-4 h4 {
color: var(--primary-color) !important;
font-weight: 700 !important;
border-left: 4px solid var(--primary-color);
padding-left: 0.75rem;
}
/* ── Image thumbnail in tables ── */
.main-content table tbody td img {
border-radius: 6px;
object-fit: cover;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
/* ── Pagination ── */
.main-content .page-item.active .page-link {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
.main-content .page-link {
color: var(--primary-color) !important;
}
.main-content .page-link:hover {
background: #e8f5e9 !important;
}
/* ── DataTable search/length dropdowns ── */
.dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--color-success) !important;
box-shadow: 0 0 0 0.2rem rgba(26,95,42,0.15) !important;
outline: none;
}
/* ── Flash message styling ── */
.flash-success,
div[class*="alert"][class*="success"] {
animation: slideInFromTop 0.4s ease-out;
}
@keyframes slideInFromTop {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Settings page tab nav pills ── */
.main-content .nav-pills .nav-link.active {
background: var(--primary-color) !important;
color: #fff !important;
}
.main-content .nav-pills .nav-link:hover:not(.active) {
background: #e8f5e9 !important;
color: var(--primary-color) !important;
}
/* ── Responsive table wrapper ── */
.main-content .table-responsive {
border-radius: 0 0 12px 12px;
}
/* ── Settings section card headers ── */
.main-content .card-header h5,
.main-content .card-header h6 {
color: var(--primary-color) !important;
font-weight: 700 !important;
}
/* ====================================================
SPACING FIX — Sidebar nav padding कम गरिएको
==================================================== */
.sidebar-nav ul {
padding: 8px 0;
}
.sidebar-nav li {
margin: 1px 8px;
}
.sidebar-nav > ul > li {
margin: 1px 8px;
}
.sidebar-nav a {
padding: 7px 12px;
font-size: 0.87rem;
}
.nav-icon-wrap {
width: 28px;
height: 28px;
font-size: 12px;
}
.sidebar-nav a:hover .nav-icon-wrap,
.sidebar-nav li.active a .nav-icon-wrap {
transform: scale(1.05);
}
.nav-group-header {
padding: 7px 14px;
font-size: 0.8rem;
margin: 1px 8px;
}
.nav-group-wrap {
margin-top: 2px;
}
/* ====================================================
UNIFORM DASHBOARD CARD HEADERS
==================================================== */
.card-header-gradient {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%) !important;
color: #fff !important;
border-bottom: 0;
padding: 12px 18px;
}
.card-header-gradient h5 {
margin: 0;
color: #fff !important;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
}
.card-header-gradient .btn-outline-light {
color: #fff !important;
border-color: rgba(255,255,255,0.7) !important;
font-size: 0.78rem;
padding: 4px 12px;
}
.card-header-gradient .btn-outline-light:hover {
background: #fff !important;
color: var(--primary-color) !important;
}
/* Uniform stat card size */
.stat-card {
min-height: 95px;
}
/* Uniform quick action buttons */
.quick-action-btn {
min-width: 100px;
padding: 14px 18px;
font-size: 0.85rem;
}
.quick-action-btn i {
font-size: 20px;
}
/* ====================================================
ADMIN TABLE CARD UNIFORM
==================================================== */
.admin-table-card {
border: none;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(16,24,40,0.07);
overflow: hidden;
background: #fff;
}
.admin-table-card .table thead th {
background: linear-gradient(135deg, rgba(26,95,42,0.08), rgba(40,167,69,0.12));
color: var(--primary-color);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 2px solid #c8e6c9;
padding: 10px 14px;
}
.admin-table-card .table tbody tr:hover {
background: #f0faf3;
}
.admin-table-card .table td {
padding: 10px 14px;
vertical-align: middle;
font-size: 0.88rem;
border-bottom: 1px solid #f2f4f3;
}
/* NPA badge colors */
.npa-good { background:#d4edda; color:#155724; padding:3px 10px; border-radius:10px; font-weight:600; }
.npa-warning { background:#fff3cd; color:#856404; padding:3px 10px; border-radius:10px; font-weight:600; }
.npa-danger { background:#f8d7da; color:#721c24; padding:3px 10px; border-radius:10px; font-weight:600; }
/* admin-amount — financial values in table */
.admin-amount { font-weight: 700; color: var(--primary-color); font-size: 0.9rem; }
.admin-amount-sub { color: #888; font-size: 0.75rem; }
/* version badge in header */
.version-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(26,95,42,0.08);
color: var(--primary-color);
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid rgba(26,95,42,0.15);
}
.version-badge .edit-hint { font-size: 0.65rem; opacity: 0.6; }
.version-badge:hover { background: rgba(26,95,42,0.15); }
/* notification bell */
.notification-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: #f5f5f5;
border-radius: 50%;
color: #555;
cursor: pointer;
font-size: 16px;
}
.notif-count {
position: absolute;
top: -3px; right: -3px;
background: var(--color-danger);
color: #fff;
font-size: 0.6rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 10px;
min-width: 16px;
text-align: center;
}
.header-item { display: flex; align-items: center; }
.admin-info { position: relative; cursor: pointer; }
.admin-name {
font-weight: 600;
font-size: 0.88rem;
color: #333;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid #eee;
display: block;
white-space: nowrap;
}
.admin-menu {
display: none;
position: absolute;
right: 0; top: 100%;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
min-width: 160px;
z-index: 2000;
padding: 6px;
margin-top: 4px;
}
.admin-info:hover .admin-menu,
.admin-info:focus-within .admin-menu { display: block; }
.admin-menu a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
color: #333;
text-decoration: none;
border-radius: 8px;
font-size: 0.85rem;
}
.admin-menu a:hover { background: #f0f8f2; color: var(--primary-color); }
/* ================================================================
COMPREHENSIVE ADMIN PANEL IMPROVEMENT — SAHAKARI THEME v2.0
All improvements below are additive — no existing rules removed
================================================================ */
/* ---------------------------------------------------------------
1. Bootstrap 5 Modal — Complete Overhaul
Bootstrap 4 styles in admin.css conflict with BS5 — fix below
--------------------------------------------------------------- */
/* Remove BS4 interference — let Bootstrap 5 handle display */
.modal { --bs-modal-border-radius: 14px; }
.modal-dialog { pointer-events: all; }
.modal-content {
border: 0 !important;
border-radius: 14px !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
overflow: hidden;
}
/* Green gradient header for all admin modals */
.modal-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%) !important;
color: #fff !important;
border-bottom: 0 !important;
padding: 16px 22px !important;
border-radius: 0 !important;
}
.modal-header .modal-title,
.modal-header h5 {
font-size: 1rem !important;
font-weight: 700 !important;
letter-spacing: 0.3px;
color: #fff !important;
}
.modal-header .btn-close {
filter: brightness(0) invert(1) !important;
opacity: 0.85;
}
.modal-header .btn-close:hover { opacity: 1; }
.modal-body {
padding: 22px 24px !important;
background: #fff;
}
.modal-footer {
background: #f8fdf9 !important;
border-top: 1px solid #e2f0e7 !important;
padding: 12px 20px !important;
gap: 8px;
}
/* Modal form controls — better than generic styles */
.modal .form-control,
.modal .form-select {
border: 1.5px solid #dee2e6;
border-radius: 8px;
padding: 8px 12px;
font-size: 0.9rem;
transition: border-color 0.2s, box-shadow 0.2s;
background-color: #fdfdfd;
}
.modal .form-control:focus,
.modal .form-select:focus {
border-color: var(--color-success);
box-shadow: 0 0 0 3px rgba(40,167,69,0.12);
background-color: #fff;
}
.modal .form-label {
font-weight: 600;
font-size: 0.82rem;
color: #2d6a4f;
margin-bottom: 5px;
letter-spacing: 0.2px;
}
.modal .input-group-text {
border: 1.5px solid #dee2e6;
background: #f0faf3;
}
.modal textarea.form-control { min-height: 90px; resize: vertical; }
.modal .form-check-input:checked { background-color: var(--color-success); border-color: var(--color-success); }
/* ---------------------------------------------------------------
2. Page Header — Consistent across all admin pages
--------------------------------------------------------------- */
.admin-page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
flex-wrap: wrap;
gap: 10px;
}
.admin-page-header .page-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary-color);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.admin-page-header .page-title i {
font-size: 1.1rem;
opacity: 0.85;
}
.admin-page-header .page-subtitle {
font-size: 0.78rem;
color: #6c757d;
margin-top: 2px;
}
/* Existing pattern fix: d-flex justify-content-between mb-4 */
.d-flex.justify-content-between.align-items-center.mb-4 h4 {
font-size: 1.2rem;
}
/* ---------------------------------------------------------------
3. Table Headers — Standardize GREEN GRADIENT across ALL tables
This ensures every table has consistent green thead
--------------------------------------------------------------- */
.table > thead > tr > th,
.table thead th {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%);
color: #fff !important;
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.3px;
border-bottom: 0 !important;
white-space: nowrap;
padding: 11px 14px;
}
/* Override inline styles on thead rows */
.table thead tr[style] {
background: none !important;
}
/* Table body rows */
.table tbody tr {
transition: background 0.15s;
}
.table tbody tr:hover {
background-color: #f0faf3 !important;
}
.table tbody td {
vertical-align: middle;
font-size: 0.875rem;
border-color: #f0f4f2;
padding: 10px 14px;
}
/* Zebra striping — subtle */
.table-striped > tbody > tr:nth-of-type(even) > td { background-color: #fafcfb; }
/* ---------------------------------------------------------------
4. Status Badges — Complete set for sahakari
--------------------------------------------------------------- */
.badge {
font-weight: 600;
letter-spacing: 0.2px;
font-size: 0.75rem;
padding: 5px 10px;
border-radius: 6px;
}
.badge.bg-success { background-color: #1e7e34 !important; color: #fff !important; }
.badge.bg-danger { background-color: #c82333 !important; }
.badge.bg-warning { background-color: #e0a800 !important; color: #212529 !important; }
.badge.bg-info { background-color: #117a8b !important; }
.badge.bg-primary { background-color: #0062cc !important; }
.badge.bg-secondary { background-color: #545b62 !important; }
.badge.bg-light { background-color: #f8f9fa !important; color: #495057 !important; border: 1px solid #dee2e6; }
/* Cooperative-specific status badges */
.status-active { background: #d4edda; color: #155724; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; }
.status-inactive { background: #f8d7da; color: #721c24; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; }
.status-pending { background: #fff3cd; color: #856404; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; }
.status-reviewed { background: #cce5ff; color: #004085; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; }
/* ---------------------------------------------------------------
5. Action Buttons in Tables — Compact icon buttons
--------------------------------------------------------------- */
.btn-action-edit {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border: 1.5px solid #3a86d4;
border-radius: 7px;
color: #3a86d4;
background: #fff;
font-size: 0.8rem;
transition: all 0.15s;
cursor: pointer;
text-decoration: none;
}
.btn-action-edit:hover { background: #3a86d4; color: #fff; border-color: #3a86d4; }
.btn-action-delete {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border: 1.5px solid var(--color-danger);
border-radius: 7px;
color: var(--color-danger);
background: #fff;
font-size: 0.8rem;
transition: all 0.15s;
cursor: pointer;
text-decoration: none;
}
.btn-action-delete:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-action-view {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border: 1.5px solid var(--color-success);
border-radius: 7px;
color: var(--color-success);
background: #fff;
font-size: 0.8rem;
transition: all 0.15s;
cursor: pointer;
text-decoration: none;
}
.btn-action-view:hover { background: var(--color-success); color: #fff; }
/* Compact btn-sm overrides */
.btn-sm { border-radius: 7px !important; font-size: 0.8rem !important; padding: 4px 8px !important; }
.btn-sm i { font-size: 0.78rem; }
/* ---------------------------------------------------------------
6. Empty State in Tables
--------------------------------------------------------------- */
.admin-empty-state {
text-align: center;
padding: 48px 20px;
color: #6c757d;
}
.admin-empty-state i {
font-size: 2.5rem;
display: block;
margin-bottom: 12px;
opacity: 0.25;
color: var(--primary-color);
}
.admin-empty-state p {
margin: 0;
font-size: 0.9rem;
font-weight: 500;
}
td .admin-empty-state, .empty-row td { text-align: center; }
/* ---------------------------------------------------------------
7. Flash Messages / Alerts — Better styling
--------------------------------------------------------------- */
.alert {
border-radius: 10px !important;
border-left: 4px solid transparent !important;
font-size: 0.88rem;
padding: 12px 16px !important;
}
.alert-success {
background: #d4edda !important;
border-left-color: var(--color-success) !important;
color: #155724 !important;
}
.alert-danger {
background: #f8d7da !important;
border-left-color: var(--color-danger) !important;
color: #721c24 !important;
}
.alert-warning {
background: #fff3cd !important;
border-left-color: var(--color-warning) !important;
color: #856404 !important;
}
.alert-info {
background: #d1ecf1 !important;
border-left-color: #17a2b8 !important;
color: #0c5460 !important;
}
.alert .btn-close { font-size: 0.75rem; }
/* ---------------------------------------------------------------
8. Form Controls — Consistent across entire admin panel
--------------------------------------------------------------- */
.admin-fancy-input,
.form-control.admin-fancy-input,
.form-select.admin-fancy-input {
border: 1.5px solid #ced4da !important;
border-radius: 8px !important;
padding: 8px 12px !important;
font-size: 0.88rem !important;
transition: border-color 0.18s, box-shadow 0.18s !important;
background-color: #fdfffe !important;
color: #2c3e2d !important;
}
.admin-fancy-input:focus {
border-color: var(--color-success) !important;
box-shadow: 0 0 0 3px rgba(40,167,69,0.12) !important;
background-color: #fff !important;
outline: none !important;
}
.admin-fancy-input::placeholder { color: #adb5bd !important; font-size: 0.85rem; }
/* File inputs */
input[type="file"].admin-fancy-input,
.form-control[type="file"] {
padding: 6px 10px !important;
cursor: pointer;
}
/* ---------------------------------------------------------------
9. Toggle Switches — Green style
--------------------------------------------------------------- */
.admin-toggle-wrap {
background: #f0faf3;
border: 1px solid #c8e6c9;
border-radius: 8px;
padding: 10px 14px;
}
.admin-toggle-wrap .form-check-input {
width: 2.4em;
height: 1.3em;
cursor: pointer;
margin-top: 0.12em;
}
.admin-toggle-wrap .form-check-input:checked {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
.admin-toggle-wrap .form-check-label {
font-size: 0.88rem;
color: #2d6a4f;
cursor: pointer;
}
/* Standalone switch without .admin-toggle-wrap */
.form-check.form-switch .form-check-input:checked {
background-color: var(--color-success);
border-color: var(--color-success);
}
/* ---------------------------------------------------------------
10. Nav Tabs — Consistent for all admin tab pages
--------------------------------------------------------------- */
.admin-nav-tabs {
border-bottom: 2px solid #e2f0e7 !important;
gap: 4px;
}
.admin-nav-tabs .nav-link {
color: #495057;
border: 1.5px solid transparent !important;
border-radius: 8px 8px 0 0 !important;
padding: 8px 18px !important;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.15s;
background: transparent;
}
.admin-nav-tabs .nav-link:hover {
background: #f0faf3;
color: var(--primary-color);
border-color: #c8e6c9 #c8e6c9 transparent !important;
}
.admin-nav-tabs .nav-link.active {
background: #fff !important;
color: var(--primary-color) !important;
border-color: #c8e6c9 #c8e6c9 #fff !important;
border-bottom-color: #fff !important;
}
.admin-nav-tabs .nav-link .badge { font-size: 0.68rem; vertical-align: middle; }
/* ---------------------------------------------------------------
11. Card improvements — better shadows and spacing
--------------------------------------------------------------- */
.admin-table-card,
.card.admin-table-card {
border: 0 !important;
border-radius: 12px !important;
box-shadow: 0 2px 16px rgba(26,95,42,0.08) !important;
overflow: hidden;
transition: box-shadow 0.2s;
}
.admin-table-card:hover { box-shadow: 0 4px 24px rgba(26,95,42,0.12) !important; }
.admin-table-card .card-header,
.card-header-gradient,
.gradient-card-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%) !important;
color: #fff !important;
border-bottom: 0 !important;
padding: 14px 20px !important;
border-radius: 0 !important;
}
.card-header-gradient h4,
.card-header-gradient h5,
.gradient-card-header h4,
.gradient-card-header h5 {
color: #fff !important;
font-weight: 700;
font-size: 0.95rem;
margin: 0;
}
.admin-table-card .card-body { padding: 0; }
.admin-table-card .card-body.padded,
.admin-table-card .card-body.p-4 { padding: 22px 24px !important; }
/* ---------------------------------------------------------------
12. Section Form Cards — for add/edit forms within pages
--------------------------------------------------------------- */
.admin-form-card {
background: #fff;
border: 1px solid #e2f0e7;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(26,95,42,0.05);
}
.admin-form-card .form-section-title {
font-size: 0.78rem;
font-weight: 700;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.8px;
padding-bottom: 8px;
border-bottom: 2px solid #e2f0e7;
margin-bottom: 16px;
}
.form-label.required::after {
content: ' *';
color: var(--color-danger);
font-weight: 700;
}
/* Input group — green icon */
.input-group-text.bg-success {
background: linear-gradient(135deg, var(--primary-color), var(--color-success)) !important;
border-color: var(--primary-color) !important;
cursor: pointer;
}
/* ---------------------------------------------------------------
13. Datepicker — Better integration
--------------------------------------------------------------- */
.nepali-datepicker {
letter-spacing: 0.3px;
}
/* Datepicker calendar z-index fix for modals */
.nepali-datepicker-calendar,
.nepDatePickerWrapper {
z-index: 9999 !important;
border-radius: 10px !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.18) !important;
}
/* Date field indicator */
.nepali-datepicker + .input-group-text,
.input-group .nepali-datepicker ~ .input-group-text {
cursor: pointer;
}
/* ---------------------------------------------------------------
14. Dashboard specific — Stat cards
--------------------------------------------------------------- */
.dashboard-stat-card {
background: #fff;
border-radius: 12px;
padding: 18px 20px;
border-left: 4px solid var(--color-success);
box-shadow: 0 2px 12px rgba(26,95,42,0.07);
transition: transform 0.15s, box-shadow 0.15s;
text-decoration: none;
display: block;
color: inherit;
}
.dashboard-stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26,95,42,0.13);
color: inherit;
text-decoration: none;
}
.dashboard-stat-card .stat-value {
font-size: 1.7rem;
font-weight: 800;
color: var(--primary-color);
line-height: 1.2;
}
.dashboard-stat-card .stat-label {
font-size: 0.78rem;
color: #6c757d;
font-weight: 500;
margin-top: 2px;
}
.dashboard-stat-card .stat-icon {
font-size: 1.8rem;
opacity: 0.2;
color: var(--primary-color);
float: right;
margin-top: -8px;
}
/* ---------------------------------------------------------------
15. Pagination — Green theme
--------------------------------------------------------------- */
.pagination .page-link {
color: var(--primary-color);
border-radius: 6px !important;
margin: 0 2px;
border-color: #dee2e6;
font-size: 0.85rem;
padding: 5px 11px;
}
.pagination .page-link:hover { background: #f0faf3; border-color: var(--color-success); color: var(--primary-color); }
.pagination .page-item.active .page-link {
background: linear-gradient(135deg, var(--primary-color), var(--color-success));
border-color: var(--primary-color);
color: #fff;
}
/* ---------------------------------------------------------------
16. DataTable customization — override dark default
--------------------------------------------------------------- */
.dataTables_wrapper .dataTables_filter input {
border: 1.5px solid #c8e6c9;
border-radius: 8px;
padding: 5px 12px;
font-size: 0.85rem;
transition: border-color 0.15s;
}
.dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--color-success);
outline: none;
box-shadow: 0 0 0 2px rgba(40,167,69,0.1);
}
.dataTables_wrapper .dataTables_length select {
border: 1.5px solid #c8e6c9;
border-radius: 6px;
padding: 4px 8px;
font-size: 0.85rem;
}
.dataTables_info { font-size: 0.82rem; color: #6c757d; }
div.dataTables_paginate { margin-top: 8px; }
table.dataTable thead th { border-bottom: 0 !important; }
table.dataTable tbody td { border-top: 1px solid #f0f4f2; }
/* ---------------------------------------------------------------
17. Button improvements
--------------------------------------------------------------- */
.btn-success, button.btn-success {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%);
border-color: var(--primary-color);
font-weight: 600;
letter-spacing: 0.2px;
}
.btn-success:hover, button.btn-success:hover {
background: linear-gradient(135deg, #155224 0%, #218838 100%);
border-color: #155224;
}
.btn-primary, button.btn-primary {
background: linear-gradient(135deg, #0d5c99 0%, #007bff 100%);
border-color: #0d5c99;
font-weight: 600;
}
.btn-primary:hover { background: linear-gradient(135deg, #0a4f87 0%, #0069d9 100%); }
.btn-outline-secondary {
border-color: #adb5bd;
color: #495057;
font-weight: 500;
}
.btn-outline-secondary:hover { background: #f8f9fa; color: #343a40; }
/* ---------------------------------------------------------------
18. File upload area
--------------------------------------------------------------- */
.upload-preview {
display: inline-block;
max-width: 100px;
max-height: 60px;
object-fit: cover;
border-radius: 6px;
border: 2px solid #c8e6c9;
margin-top: 6px;
}
/* ---------------------------------------------------------------
19. Sahakari / Cooperative identity — special accents
--------------------------------------------------------------- */
.sahakari-brand-strip {
height: 3px;
background: linear-gradient(90deg, var(--primary-color) 0%, var(--color-success) 50%, #c8e6c9 100%);
border-radius: 2px;
margin-bottom: 16px;
}
/* Info boxes for cooperative metrics */
.coop-metric-box {
background: linear-gradient(135deg, #f0faf3 0%, #e8f5e9 100%);
border: 1px solid #c8e6c9;
border-radius: 10px;
padding: 14px 18px;
text-align: center;
}
.coop-metric-box .metric-value {
font-size: 1.4rem;
font-weight: 800;
color: var(--primary-color);
}
.coop-metric-box .metric-label {
font-size: 0.75rem;
color: #6c757d;
font-weight: 500;
}
/* ---------------------------------------------------------------
20. Responsive improvements
--------------------------------------------------------------- */
@media (max-width: 768px) {
.modal-dialog { margin: 10px; max-width: calc(100% - 20px) !important; }
.modal-body { padding: 16px !important; }
.admin-nav-tabs .nav-link { padding: 6px 10px !important; font-size: 0.8rem !important; }
.table thead th { font-size: 0.78rem; padding: 8px 10px; }
.table tbody td { padding: 8px 10px; font-size: 0.82rem; }
.btn-sm { padding: 3px 7px !important; }
.admin-fancy-input { font-size: 0.85rem !important; }
.dashboard-stat-card .stat-value { font-size: 1.4rem; }
}
@media (max-width: 576px) {
.d-flex.justify-content-between.align-items-center.mb-4 {
flex-direction: column;
align-items: flex-start !important;
}
.d-flex.justify-content-between.align-items-center.mb-4 .btn {
align-self: flex-start;
margin-top: 8px;
}
}
/* ---------------------------------------------------------------
21. Print styles — for reports
--------------------------------------------------------------- */
@media print {
.sidebar, .admin-topbar, .btn, .pagination, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate { display: none !important; }
.main-content { margin-left: 0 !important; width: 100% !important; padding: 0 !important; }
.card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
.table thead th { background: var(--primary-color) !important; color: #fff !important; -webkit-print-color-adjust: exact; }
}
/* ---------------------------------------------------------------
22. Scrollbar — subtle green theme
--------------------------------------------------------------- */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f1f3f2; }
::-webkit-scrollbar-thumb { background: rgba(26,95,42,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(26,95,42,0.5); }
/* ---------------------------------------------------------------
23. Input focus ring — remove default blue, use green
--------------------------------------------------------------- */
.form-control:focus,
.form-select:focus,
input:focus, select:focus, textarea:focus {
border-color: var(--color-success) !important;
box-shadow: 0 0 0 3px rgba(40,167,69,0.12) !important;
outline: none !important;
}
/* ---------------------------------------------------------------
24. Table th inline style override — force gradient on ALL tables
All pages use inline style on thead which we can't override unless
we use specific selectors. Adding !important to our thead th rule.
--------------------------------------------------------------- */
.table > thead > tr > th {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%) !important;
color: #fff !important;
}
/* Some pages wrap in card with no border-radius on table */
.card .table-responsive .table thead th,
.card .table thead th {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%) !important;
color: #fff !important;
}
/* ══════════════════════════════════════════════════════════════
STAT-CARD — Legacy compatibility + modern upgrade
Old pages (loan-applications, kyc-applications, etc.)
══════════════════════════════════════════════════════════════ */
.stat-card {
border-radius: 12px !important;
padding: 1.25rem 1rem;
display: flex;
align-items: center;
gap: 1rem;
color: #fff;
border: none !important;
box-shadow: 0 4px 15px rgba(0,0,0,.15) !important;
transition: transform .2s, box-shadow .2s;
margin-bottom: 1rem;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,.2) !important; }
.stat-card.bg-primary { background: linear-gradient(135deg, var(--primary-color), var(--color-success)) !important; }
.stat-card.bg-success { background: linear-gradient(135deg, var(--primary-color), var(--color-success)) !important; }
.stat-card.bg-info { background: linear-gradient(135deg, #0dcaf0, #0891b2) !important; }
.stat-card.bg-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.stat-card.bg-danger { background: linear-gradient(135deg, #dc2626, #ef4444) !important; }
.stat-card.bg-dark { background: linear-gradient(135deg, #374151, #1f2937) !important; }
.stat-card.bg-secondary { background: linear-gradient(135deg, #6b7280, #4b5563) !important; }
.stat-card .stat-icon { font-size: 2rem; opacity: .85; flex-shrink: 0; }
.stat-card .stat-info h3 { font-size: 1.8rem; font-weight: 700; margin: 0; line-height: 1; }
.stat-card .stat-info p { margin: .2rem 0 0; font-size: .8rem; opacity: .85; }
/* ╔══════════════════════════════════════════════════════════════╗
║ UNIFORM DESIGN SYSTEM v3 — एकरूप रंग, आकार, font size ║
║ सबै तालिका, फर्म, बटन, badge, count-box एकरूप ║
╚══════════════════════════════════════════════════════════════╝ */
/* ── 1. Base font for all admin content ── */
.main-content,
.modal-content,
.offcanvas-body {
font-size: 13.5px;
font-family: 'Noto Sans Devanagari', var(--font-primary), sans-serif;
}
/* ── 2. TABLE: uniform compact header + readable cells ── */
.table th {
font-size: 0.7rem !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #4b5563 !important;
background: #f0f7f1 !important;
padding: 10px 13px !important;
border-bottom: 2px solid #c7e0cc !important;
white-space: nowrap;
}
.table td {
font-size: 0.82rem !important;
padding: 8px 13px !important;
vertical-align: middle !important;
color: #374151;
}
.table th:first-child,
.table td:first-child { padding-left: 16px !important; }
.table th:last-child,
.table td:last-child { padding-right: 16px !important; }
.table tbody tr:hover td { background: #f9fdfb !important; }
/* ── 3. FORM LABELS: uniform ── */
.form-label,
label.form-label,
.card .form-label,
.modal-body .form-label,
.admin-form-grid .form-label {
font-size: 0.77rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin-bottom: 5px !important;
letter-spacing: 0.01em;
display: flex;
align-items: center;
gap: 4px;
}
/* ── 4. FORM INPUTS / SELECTS: compact uniform ── */
.form-control,
.form-select,
.modal-body .form-control,
.modal-body .form-select,
.admin-table-card .form-control,
.admin-table-card .form-select {
font-size: 0.84rem !important;
padding: 7px 12px !important;
border-radius: 8px !important;
border-width: 1.5px !important;
}
textarea.form-control {
padding: 10px 12px !important;
min-height: 90px;
}
/* ── 5. BUTTONS: compact uniform size ── */
.btn {
font-size: 0.81rem !important;
padding: 7px 16px !important;
border-radius: 8px !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
}
.btn-sm {
font-size: 0.74rem !important;
padding: 4px 10px !important;
border-radius: 6px !important;
}
.btn i,
.btn svg { font-size: 0.88em; }
/* ── 6. BADGES + COUNT BOXES: uniform ── */
.badge,
.stat-badge,
.admin-stat-badge {
font-size: 0.69rem !important;
font-weight: 700 !important;
padding: 4px 9px !important;
border-radius: 20px !important;
letter-spacing: 0.02em;
}
/* Stat count number inside dashboard cards */
.stat-card .stat-info h3 {
font-size: 1.75rem !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.stat-card .stat-info p {
font-size: 0.76rem !important;
opacity: 0.88 !important;
}
/* DataTables info row counts */
.dataTables_info,
.dataTables_wrapper .dataTables_info {
font-size: 0.78rem !important;
color: #6b7280 !important;
}
/* ── 7. CARD HEADERS: uniform ── */
.card-header h5,
.card-header h5.mb-0,
.gradient-card-header h5,
.admin-card-header-green h5,
.admin-card-header-green h6,
.admin-section-card .card-header h6 {
font-size: 0.88rem !important;
font-weight: 700 !important;
margin: 0 !important;
}
/* ── 8. PAGE HEADER: uniform ── */
.admin-page-header h4,
.admin-page-header .page-title,
.admin-page-header h1,
.admin-page-header h2 {
font-size: 1.05rem !important;
font-weight: 700 !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.admin-page-header small,
.admin-page-header .page-subtitle,
.admin-page-header p {
font-size: 0.76rem !important;
}
/* ── 9. MODAL: uniform title + body ── */
.modal-title {
font-size: 0.92rem !important;
font-weight: 700 !important;
}
.modal-header {
padding: 12px 18px !important;
}
.modal-body {
padding: 16px 18px !important;
}
.modal-footer {
padding: 10px 18px !important;
}
/* ── 10. NAV TABS: uniform ── */
.nav-tabs .nav-link,
.admin-nav-tabs .nav-link {
font-size: 0.79rem !important;
padding: 7px 14px !important;
font-weight: 600 !important;
}
/* ── 11. FILTER / DATATABLE CONTROLS: uniform ── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
font-size: 0.81rem !important;
padding: 5px 10px !important;
border-radius: 7px !important;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
font-size: 0.8rem !important;
color: #4b5563 !important;
font-weight: 500 !important;
}
/* Filter section (top filter bars above tables) */
.filter-section .form-label,
.filter-bar .form-label,
.row.mb-3 .form-label,
.row.g-2 .form-label,
.row.g-3 .form-label {
font-size: 0.74rem !important;
font-weight: 700 !important;
color: #374151 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px !important;
}
.filter-section .form-control,
.filter-section .form-select,
.filter-bar .form-control,
.filter-bar .form-select {
font-size: 0.81rem !important;
padding: 6px 11px !important;
}
/* ── 12. SELECT2 / custom selects ── */
.select2-selection,
.select2-results__option {
font-size: 0.83rem !important;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ SIDEBAR v3 — नयाँ, सफा, व्यावसायिक style ║
╚══════════════════════════════════════════════════════════════╝ */
/* ── Sidebar container ── */
.sidebar {
background: linear-gradient(175deg, #0e3d1a 0%, #155a27 55%, #1a6e30 100%) !important;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28) !important;
border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* ── Logo / Header area ── */
.sidebar-header {
background: rgba(0, 0, 0, 0.22) !important;
padding: 16px 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
position: relative;
}
.sidebar-header::after {
content: '';
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}
.sidebar-header .logo i {
font-size: 22px !important;
background: linear-gradient(135deg, #4ade80, #86efac);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sidebar-header .logo span {
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
color: #fff !important;
}
/* Tagline under logo */
.sidebar-header .logo-tagline {
font-size: 0.62rem;
color: rgba(255,255,255,0.4);
margin-top: 2px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ── Nav list spacing ── */
.sidebar-nav ul { padding: 10px 0 !important; }
.sidebar-nav li { margin: 1px 8px !important; }
/* ── Every nav link: default state ── */
.sidebar-nav a {
padding: 8px 11px !important;
border-radius: 9px !important;
font-size: 0.81rem !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.72) !important;
gap: 9px !important;
transition: all 0.22s ease !important;
border-left: 3px solid transparent;
}
.sidebar-nav a:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
border-left-color: rgba(255,255,255,0.3);
transform: translateX(2px);
}
/* ── ACTIVE nav item: white card with green text ── */
.sidebar-nav li.active > a,
.sidebar-nav li.active a {
background: #ffffff !important;
color: #145021 !important;
font-weight: 700 !important;
border-left: 3px solid #4ade80 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25),
0 1px 4px rgba(0, 0, 0, 0.15) !important;
transform: translateX(0) !important;
}
/* ── Icon wrap: default ── */
.nav-icon-wrap {
width: 28px !important;
height: 28px !important;
border-radius: 7px !important;
font-size: 11.5px !important;
background: rgba(255, 255, 255, 0.1) !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.22s ease !important;
}
.sidebar-nav a:hover .nav-icon-wrap {
background: rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
/* Active icon wrap: green background */
.sidebar-nav li.active a .nav-icon-wrap {
background: var(--primary-color) !important;
box-shadow: 0 2px 10px rgba(26,95,42,0.5) !important;
color: #fff !important;
}
.sidebar-nav li.active a .nav-icon-wrap i {
color: #fff !important;
}
/* ── Section labels ── */
.sidebar-section-label {
font-size: 0.6rem !important;
letter-spacing: 1.6px !important;
color: rgba(255, 255, 255, 0.38) !important;
margin: 14px 10px 3px !important;
padding: 0 8px !important;
font-weight: 700 !important;
}
/* ── Notification badges in sidebar ── */
.sidebar-nav .badge {
font-size: 0.62rem !important;
padding: 2px 7px !important;
min-width: 20px !important;
height: 20px !important;
border-radius: 10px !important;
background: #ef4444 !important;
box-shadow: 0 0 0 2px rgba(255,255,255,0.2) !important;
}
/* ── Submenu items ── */
.nav-submenu li { margin: 1px 8px 1px 18px !important; }
.nav-submenu li a {
padding: 5px 10px !important;
font-size: 0.78rem !important;
color: rgba(255, 255, 255, 0.65) !important;
border-radius: 7px !important;
border-left: 2px solid transparent;
transition: all 0.2s ease !important;
}
.nav-submenu li a:hover {
background: rgba(255,255,255,0.09) !important;
color: #fff !important;
border-left-color: rgba(255,255,255,0.25) !important;
}
.nav-submenu li.active > a,
.nav-submenu li.active a {
background: #fff !important;
color: #145021 !important;
font-weight: 700 !important;
border-left: 2px solid #4ade80 !important;
box-shadow: 0 3px 12px rgba(0,0,0,0.2) !important;
}
.nav-submenu li.active a .nav-icon-wrap {
background: var(--primary-color) !important;
color: #fff !important;
}
.nav-submenu li.active a .nav-icon-wrap i { color: #fff !important; }
/* ── Nav Group Header (collapsible section title) ── */
.nav-group-header {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 11px !important;
margin: 1px 8px !important;
border-radius: 9px !important;
cursor: pointer;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 0.79rem !important;
font-weight: 600 !important;
transition: all 0.2s ease;
letter-spacing: 0.01em;
}
.nav-group-header:hover {
background: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.9) !important;
}
.nav-group-header.open {
color: rgba(255,255,255,0.95) !important;
background: rgba(255,255,255,0.07) !important;
}
.nav-group-icon {
width: 28px !important;
height: 28px !important;
border-radius: 7px !important;
background: rgba(255,255,255,0.1) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
flex-shrink: 0;
}
.nav-group-header.open .nav-group-icon {
background: rgba(74,222,128,0.2) !important;
color: #4ade80 !important;
}
.group-arrow {
margin-left: auto;
font-size: 0.65rem !important;
opacity: 0.5;
transition: transform 0.25s ease !important;
}
.nav-group-header.open .group-arrow {
transform: rotate(90deg);
opacity: 0.8;
}
/* ── Admin top header bar ── */
.admin-header {
background: #fff !important;
border-bottom: 1.5px solid #e8f4ea !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
padding: 10px 24px !important;
}
.admin-header .page-title {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
}
.admin-header .page-subtitle {
font-size: 0.74rem !important;
color: #6b7280 !important;
}
/* ── Scrollbar in sidebar ── */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.15);
border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }
/* ═══════════════════════════════════════════════════════════════
VISUAL UPGRADE 2.0 — Public page जस्तो eye-catching admin UI
यहाँका rules सबैभन्दा पछि load हुन्छन् — highest priority
═══════════════════════════════════════════════════════════════ */
/* ── Body background: subtle pattern ── */
body { background: #f0f4f1 !important; }
/* ── Sidebar: subtle inner glow ── */
.sidebar {
background: linear-gradient(180deg, var(--primary-color) 0%, #124220 60%, #0d3318 100%) !important;
box-shadow: 4px 0 20px rgba(0,0,0,0.18) !important;
}
.sidebar-header {
background: rgba(0,0,0,0.15) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* ── Sidebar nav active item — badge style ── */
.sidebar-nav li.active > a {
background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)) !important;
color: #fff !important;
font-weight: 600 !important;
border-left: 3px solid #4ade80 !important;
}
.sidebar-nav li.active > a .nav-icon-wrap {
background: rgba(74,222,128,0.25) !important;
}
/* ── Nav-group-header: open state left accent ── */
.nav-group-header.open {
border-left: 3px solid rgba(74,222,128,0.5) !important;
padding-left: 12px !important;
}
/* ── Admin header bar ── */
.admin-header {
background: #fff !important;
border-bottom: 2px solid #e8f4ea !important;
box-shadow: 0 2px 16px rgba(26,95,42,0.07) !important;
}
/* ── Content area ── */
.main-content {
background: #f0f4f1 !important;
}
.admin-content, .page-content, .container-fluid.py-4 {
padding: 24px !important;
}
/* ══════════════════════════════════════════════════
PAGE HEADERS — content-header र adminPageHeader दुवैको लागि
══════════════════════════════════════════════════ */
.content-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%);
color: #fff;
padding: 20px 24px !important;
border-radius: 14px;
margin-bottom: 24px !important;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 6px 24px rgba(26,95,42,0.22);
}
.content-header h1 {
color: #fff !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
margin: 0 !important;
display: flex;
align-items: center;
gap: 10px;
}
.content-header h1 i { opacity: 0.85; }
/* adminPageHeader() helper ले generate गर्ने structure */
.admin-page-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%);
color: #fff;
padding: 18px 24px;
border-radius: 14px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
box-shadow: 0 6px 24px rgba(26,95,42,0.22);
}
.admin-page-header h1, .admin-page-header .page-header-title {
color: #fff !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
margin: 0 !important;
}
.admin-page-header a.btn-outline-light,
.admin-page-header .btn-outline-light {
color: #fff !important;
border-color: rgba(255,255,255,0.7) !important;
background: transparent !important;
border-radius: 8px;
font-weight: 600;
}
.admin-page-header a.btn-outline-light:hover,
.admin-page-header .btn-outline-light:hover {
background: rgba(255,255,255,0.15) !important;
}
/* ══════════════════════════════════════════════════
CARDS — Glass effect + better shadow
══════════════════════════════════════════════════ */
.card {
border: 0 !important;
border-radius: 14px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.11) !important; }
/* Card with gradient header — gradient-card-header */
.gradient-card-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #2eb554 100%) !important;
color: #fff !important;
border-radius: 14px 14px 0 0 !important;
padding: 14px 20px !important;
border-bottom: 0 !important;
}
.gradient-card-header, .gradient-card-header h5,
.gradient-card-header h4, .gradient-card-header h6 {
color: #fff !important;
}
/* card-header-gradient (dashboard pages) */
.card-header-gradient {
background: linear-gradient(135deg, var(--primary-color) 0%, #2eb554 100%) !important;
color: #fff !important;
border-radius: 14px 14px 0 0 !important;
padding: 14px 20px !important;
border-bottom: 0 !important;
}
.card-header-gradient, .card-header-gradient h5,
.card-header-gradient h4 { color: #fff !important; }
/* ══════════════════════════════════════════════════
STAT CARDS — Better gradients + hover
══════════════════════════════════════════════════ */
.stat-card {
border-radius: 14px !important;
padding: 20px 18px !important;
box-shadow: 0 6px 20px rgba(0,0,0,0.14) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
position: relative;
overflow: hidden;
}
.stat-card::after {
content: '';
position: absolute;
top: -30px; right: -30px;
width: 90px; height: 90px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
pointer-events: none;
}
.stat-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 32px rgba(0,0,0,0.2) !important;
}
.stat-card .stat-icon {
width: 52px !important;
height: 52px !important;
border-radius: 12px !important;
background: rgba(255,255,255,0.22) !important;
font-size: 20px !important;
}
.stat-card .stat-info h3 {
font-size: 2rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.stat-card .stat-info p { font-size: 0.82rem !important; opacity: 0.92 !important; }
/* Extra color variants */
.stat-card.bg-secondary {
background: linear-gradient(135deg, #4b5563, #6b7280) !important;
}
.stat-card.bg-info {
background: linear-gradient(135deg, var(--secondary-dark,#922b21), var(--secondary-color,#c0392b)) !important;
}
/* ══════════════════════════════════════════════════
ADMIN TABLE CARD
══════════════════════════════════════════════════ */
.admin-table-card {
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
border: 0 !important;
}
/* Table thead */
.admin-table-card .table thead th,
.table-col-header th {
background: linear-gradient(135deg, #f0f7f2, #e8f5e9) !important;
color: var(--primary-color) !important;
font-weight: 700 !important;
font-size: 0.78rem !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border-bottom: 2px solid #c8e6c9 !important;
padding: 12px 14px !important;
}
/* Table rows */
.admin-table-card .table tbody tr {
transition: background 0.15s ease !important;
}
.admin-table-card .table tbody tr:hover {
background: rgba(26,95,42,0.04) !important;
}
.admin-table-card .table td {
vertical-align: middle !important;
padding: 10px 14px !important;
border-color: #f0f4f1 !important;
}
/* ══════════════════════════════════════════════════
FORMS — Modern floating-label style
══════════════════════════════════════════════════ */
.form-control, .form-select {
border-radius: 10px !important;
border: 1.5px solid #d1e4d7 !important;
min-height: 42px !important;
font-size: 0.92rem !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.form-control:focus, .form-select:focus {
border-color: var(--color-success) !important;
box-shadow: 0 0 0 3px rgba(40,167,69,0.12) !important;
}
.form-label {
font-weight: 600 !important;
color: #2d5a35 !important;
font-size: 0.87rem !important;
margin-bottom: 5px !important;
}
.form-text { font-size: 0.78rem !important; }
/* Textarea */
textarea.form-control { min-height: 100px !important; }
/* ══════════════════════════════════════════════════
BUTTONS — Pill style for primary actions
══════════════════════════════════════════════════ */
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--color-success)) !important;
border: 0 !important;
border-radius: 9px !important;
font-weight: 600 !important;
box-shadow: 0 3px 10px rgba(26,95,42,0.22) !important;
transition: transform 0.15s, box-shadow 0.15s !important;
}
.btn-primary:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 18px rgba(26,95,42,0.32) !important;
background: linear-gradient(135deg, #145021, #22993a) !important;
}
.btn-success {
background: linear-gradient(135deg, #059669, #10b981) !important;
border: 0 !important;
border-radius: 9px !important;
font-weight: 600 !important;
}
.btn-danger {
border-radius: 9px !important;
font-weight: 600 !important;
}
.btn-secondary {
border-radius: 9px !important;
font-weight: 600 !important;
}
.btn-outline-primary {
border-color: var(--primary-color) !important;
color: var(--primary-color) !important;
border-radius: 9px !important;
font-weight: 600 !important;
}
.btn-outline-primary:hover {
background: var(--primary-color) !important;
color: #fff !important;
}
/* Icon-only delete/action buttons — छोटो */
.btn-sm { border-radius: 7px !important; }
/* ══════════════════════════════════════════════════
BADGES — Rounded pill
══════════════════════════════════════════════════ */
.badge {
border-radius: 7px !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
padding: 4px 9px !important;
}
/* ══════════════════════════════════════════════════
DASHBOARD MINI CARDS (db-mini-card) — Better hover
══════════════════════════════════════════════════ */
.db-mini-card {
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.14) !important;
transition: transform 0.18s, box-shadow 0.18s !important;
}
.db-mini-card:hover {
transform: translateY(-4px) scale(1.01) !important;
box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
}
.db-mini-num { font-size: 1.55rem !important; }
.db-mini-lbl { font-size: 0.7rem !important; }
/* ══════════════════════════════════════════════════
MODAL — Rounded, modern look
══════════════════════════════════════════════════ */
.modal-content {
border: 0 !important;
border-radius: 16px !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}
.modal-header {
background: linear-gradient(135deg, var(--primary-color), var(--color-success)) !important;
color: #fff !important;
border-radius: 16px 16px 0 0 !important;
border-bottom: 0 !important;
padding: 16px 20px !important;
}
.modal-header .modal-title { color: #fff !important; font-weight: 700 !important; }
.modal-header .btn-close { filter: invert(1) brightness(2) !important; }
.modal-footer { border-top: 1px solid #e8f4ea !important; border-radius: 0 0 16px 16px !important; }
/* ══════════════════════════════════════════════════
ALERT — Rounded
══════════════════════════════════════════════════ */
.alert {
border-radius: 10px !important;
border: 0 !important;
font-size: 0.9rem !important;
}
.alert-success { background: #ecfdf5 !important; color: #065f46 !important; }
.alert-danger { background: #fff1f2 !important; color: #9f1239 !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; }
.alert-info { background: #fef2f2 !important; color: var(--secondary-dark,#922b21) !important; }
/* ══════════════════════════════════════════════════
QUICK ACTIONS BUTTON — dashboard
══════════════════════════════════════════════════ */
.quick-action-btn {
border-radius: 10px !important;
box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
transition: transform 0.18s, box-shadow 0.18s !important;
}
.quick-action-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 22px rgba(0,0,0,0.2) !important;
}
/* ══════════════════════════════════════════════════
RESPONSIVE — Mobile
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
.admin-content, .page-content, .container-fluid.py-4 {
padding: 14px !important;
}
.content-header { border-radius: 10px !important; padding: 14px 16px !important; }
.stat-card { border-radius: 10px !important; }
}
/* adminPageHeader() ले h4 generate गर्छ — text-{color} icon सेतो गर्ने */
.admin-page-header h4,
.admin-page-header h5,
.admin-page-header h6 {
color: #fff !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
margin: 0 !important;
}
.admin-page-header h4 i,
.admin-page-header i {
color: rgba(255,255,255,0.88) !important;
}
.admin-page-header small, .admin-page-header .text-muted {
color: rgba(255,255,255,0.75) !important;
}
/* btn links inside admin-page-header */
.admin-page-header .btn {
border-radius: 9px !important;
font-weight: 600 !important;
}
.admin-page-header .btn-primary {
background: rgba(255,255,255,0.2) !important;
border: 1px solid rgba(255,255,255,0.5) !important;
color: #fff !important;
}
.admin-page-header .btn-primary:hover {
background: rgba(255,255,255,0.32) !important;
}
/* content-header भित्रका buttons — green gradient background मा visible */
.content-header .btn-primary,
.content-header .btn {
background: rgba(255,255,255,0.2) !important;
border: 1.5px solid rgba(255,255,255,0.65) !important;
color: #fff !important;
font-weight: 700 !important;
border-radius: 9px !important;
box-shadow: none !important;
}
.content-header .btn-primary:hover,
.content-header .btn:hover {
background: rgba(255,255,255,0.32) !important;
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════════
GLOBAL CONSISTENCY FIX — सबै admin pages को card-headers
.main-content भित्रका सबै .card-header → green gradient
(यसले 20+ pages automatically fix हुन्छन् — कुनै page नछुटोस्)
═══════════════════════════════════════════════════════════════ */
/* सबै card-headers — gradient green */
.main-content .card-header,
.admin-card .card-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #2eb554 100%) !important;
color: #fff !important;
border-bottom: 0 !important;
border-radius: 14px 14px 0 0 !important;
padding: 14px 20px !important;
}
/* card-header भित्रका सबै text/icon — सेतो */
.main-content .card-header *,
.admin-card .card-header * {
color: rgba(255,255,255,0.95) !important;
}
/* card-header भित्रको badge — सेतो border */
.main-content .card-header .badge,
.admin-card .card-header .badge {
border: 1.5px solid rgba(255,255,255,0.4) !important;
background: rgba(255,255,255,0.2) !important;
color: #fff !important;
}
/* card-header भित्रको btn — सेतो outline */
.main-content .card-header .btn,
.admin-card .card-header .btn {
background: rgba(255,255,255,0.18) !important;
border: 1.5px solid rgba(255,255,255,0.55) !important;
color: #fff !important;
border-radius: 8px !important;
font-weight: 600 !important;
}
.main-content .card-header .btn:hover,
.admin-card .card-header .btn:hover {
background: rgba(255,255,255,0.32) !important;
}
/* card-header भित्रको link — सेतो */
.main-content .card-header a,
.admin-card .card-header a {
color: rgba(255,255,255,0.9) !important;
text-decoration: none !important;
}
/* ── Exception: specifically colored card-headers — override नगरिनुस् ── */
.main-content .card-header.bg-danger,
.admin-card .card-header.bg-danger {
background: linear-gradient(135deg, var(--color-danger) 0%, #c82333 100%) !important;
}
.main-content .card-header.bg-dark,
.admin-card .card-header.bg-dark {
background: linear-gradient(135deg, #343a40 0%, #495057 100%) !important;
}
.main-content .card-header.bg-info,
.admin-card .card-header.bg-info {
background: linear-gradient(135deg, var(--secondary-dark,#922b21) 0%, var(--secondary-color,#c0392b) 100%) !important;
}
.main-content .card-header.bg-warning {
background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
color: #fff !important;
}
/* Light/transparent header — हल्का राख्ने */
.main-content .card-header.bg-opacity-10 {
background: rgba(26,95,42,0.06) !important;
color: var(--primary-color) !important;
border-bottom: 1px solid rgba(26,95,42,0.12) !important;
}
.main-content .card-header.bg-opacity-10 * { color: var(--primary-color) !important; }
/* Table thead — consistent green tint */
.main-content .table thead th,
.main-content .table thead tr th {
background: linear-gradient(135deg, #f0f7f2, #e8f5e9) !important;
color: var(--primary-color) !important;
font-weight: 700 !important;
font-size: 0.78rem !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border-bottom: 2px solid #c8e6c9 !important;
padding: 11px 14px !important;
}
/* table-warning rows — unread messages etc. */
.main-content .table tbody tr.table-warning {
background: rgba(255,193,7,0.08) !important;
}
.main-content .table tbody tr.table-warning td { border-color: rgba(255,193,7,0.15) !important; }
/* table thead inside modal — modal theme राखिनुस् */
.modal .table thead th { background: none !important; color: inherit !important;
border-bottom: 1px solid rgba(0,0,0,0.1) !important; font-size: inherit !important;
letter-spacing: normal !important; text-transform: none !important; padding: 8px 12px !important; }
/* ════════════════════════════════════════════════════════════════
COMPREHENSIVE MODAL FORM IMPROVEMENTS — v3 (Popup UI Fix)
सबै Bootstrap modal form fields लाई consistent र beautiful बनाउने
════════════════════════════════════════════════════════════════ */
/* Modal body padding consistent */
.modal-body {
padding: 1.5rem 1.75rem !important;
}
.modal-footer {
padding: 0.9rem 1.75rem !important;
}
/* Modal form labels — clearly visible, Nepali font */
.modal .form-label,
.modal .col-form-label {
font-weight: 600 !important;
font-size: 0.875rem !important;
margin-bottom: 5px !important;
line-height: 1.4 !important;
display: block !important;
}
/* Modal inputs — consistent look */
.modal .form-control,
.modal .form-select,
.modal .admin-fancy-input {
border-radius: 8px !important;
border: 1.5px solid #d1d9e0 !important;
padding: 0.5rem 0.85rem !important;
font-size: 0.9rem !important;
background: #fafbfc !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
line-height: 1.5 !important;
color: #2d3748 !important;
}
.modal .form-control:focus,
.modal .form-select:focus,
.modal .admin-fancy-input:focus {
border-color: var(--primary-color) !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(26,95,42,0.12) !important;
outline: none !important;
}
.modal .form-control::placeholder,
.modal .admin-fancy-input::placeholder {
color: #adb5bd !important;
font-size: 0.83rem !important;
}
/* Row gap inside modals */
.modal .row.g-3 { --bs-gutter-y: 0.75rem; }
.modal .row.g-4 { --bs-gutter-y: 1rem; }
/* Textarea */
.modal textarea.form-control,
.modal textarea.admin-fancy-input {
min-height: 90px !important;
resize: vertical !important;
}
/* Input group inside modal */
.modal .input-group .form-control { border-radius: 8px 0 0 8px !important; }
.modal .input-group .input-group-text {
border-radius: 0 8px 8px 0 !important;
border: 1.5px solid #d1d9e0 !important;
border-left: none !important;
}
/* Form switch in modals */
.modal .form-check.form-switch {
padding-top: 0.4rem;
}
.modal .form-check-input:checked { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; }
/* File input in modals */
.modal input[type="file"].form-control {
padding: 0.4rem 0.85rem !important;
}
/* Modal header gradient consistent */
.modal .modal-header[style*="background"] { border-bottom: none; }
.modal .modal-header[style*="background"] .modal-title { font-size: 1rem; letter-spacing: 0.01em; }
/* Small badges/text inside modals */
.modal .form-text,
.modal small.text-muted { font-size: 0.775rem !important; }
/* Spacing between form rows in modal */
.modal .mb-3 { margin-bottom: 0.85rem !important; }
.modal .mb-4 { margin-bottom: 1.1rem !important; }
/* Select element specific */
.modal select.form-control,
.modal select.form-select {
appearance: auto;
background-image: none !important;
}
/* Required asterisk */
.modal .text-danger { color: var(--color-danger) !important; }
/* Save/Cancel buttons consistent */
.modal .modal-footer .btn { font-size: 0.9rem; padding: 0.45rem 1.2rem; border-radius: 7px; }
.modal .modal-footer .btn-success { background: linear-gradient(135deg, var(--primary-color), var(--color-success)); border: none; }
.modal .modal-footer .btn-success:hover { background: linear-gradient(135deg, #155220, #228b3a); }
/* ==========================================================================
██╗ ██╗██╗ ██╗██╗ ██╗ ███████╗███╗ ██╗██╗ ██╗ █████╗ ███╗ ██╗
██║ ██║██║ ██║╚██╗██╔╝ ██╔════╝████╗ ██║██║ ██║██╔══██╗████╗ ██║
██║ ██║██║ ██║ ╚███╔╝ █████╗ ██╔██╗ ██║███████║███████║██╔██╗ ██║
██║ ██║██║ ██║ ██╔██╗ ██╔══╝ ██║╚██╗██║██╔══██║██╔══██║██║╚██╗██║
╚██████╔╝╚██████╔╝██╔╝ ██╗ ███████╗██║ ╚████║██║ ██║██║ ██║██║ ╚████║
╚═════╝ ╚═════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═══╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝
Admin UI/UX Enhancement Layer 2.0
Nepali Cooperative Admin Panel — Eye-catching, Consistent, Professional
========================================================================== */
/* ─────────────────────────────────────────────────────────────────────────
1. CSS TOKENS — ENHANCEMENT LAYER
───────────────────────────────────────────────────────────────────────── */
:root {
--green-50: #f0fdf4;
--green-100: #dcfce7;
--green-200: #bbf7d0;
--green-500: #22c55e;
--green-600: #16a34a;
--green-700: #15803d;
--green-800: #166534;
--green-900: #14532d;
--glow-green: rgba(26, 95, 42, 0.15);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
--shadow-md: 0 4px 16px rgba(0,0,0,0.09);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
--shadow-card: 0 2px 12px rgba(26,95,42,0.07), 0 1px 3px rgba(0,0,0,0.04);
--transition-fast: 0.15s ease;
--transition-mid: 0.25s ease;
}
/* ─────────────────────────────────────────────────────────────────────────
2. SIDEBAR — ACTIVE STATE GLOW INDICATOR
Left glow bar + radiant background for active menu item
───────────────────────────────────────────────────────────────────────── */
.sidebar-nav li.active > a {
background: linear-gradient(90deg, rgba(74,222,128,0.18) 0%, rgba(255,255,255,0.06) 100%) !important;
color: #fff !important;
border-radius: 0 8px 8px 0 !important;
margin-left: 0 !important;
padding-left: 13px !important;
border-left: 3px solid #4ade80 !important;
box-shadow: inset 0 0 12px rgba(74,222,128,0.08) !important;
}
.sidebar-nav li.active > a .nav-icon-wrap {
background: rgba(74,222,128,0.22) !important;
box-shadow: 0 0 0 2px rgba(74,222,128,0.3), 0 2px 8px rgba(0,0,0,0.2) !important;
transform: scale(1.06) !important;
}
/* Hover state — aba bhai pani better */
.sidebar-nav a:hover {
background: rgba(255,255,255,0.10) !important;
color: #fff !important;
border-radius: 8px;
}
/* ─────────────────────────────────────────────────────────────────────────
3. SIDEBAR LOGO HEADER — Upgrade
───────────────────────────────────────────────────────────────────────── */
.sidebar-header {
padding: 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
background: rgba(0,0,0,0.12);
}
.sidebar-header .logo {
padding: 18px 18px 16px !important;
gap: 10px !important;
}
.sidebar-header .logo i {
font-size: 22px !important;
color: #4ade80;
filter: drop-shadow(0 0 6px rgba(74,222,128,0.5));
}
.sidebar-header .logo span {
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
}
/* Sidebar bottom — user strip */
.sidebar-user-strip {
position: sticky;
bottom: 0;
background: rgba(0,0,0,0.2);
border-top: 1px solid rgba(255,255,255,0.08);
padding: 10px 14px;
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.8);
font-size: 0.8rem;
}
.sidebar-user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(74,222,128,0.22);
border: 1px solid rgba(74,222,128,0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
color: #4ade80;
flex-shrink: 0;
}
/* ─────────────────────────────────────────────────────────────────────────
4. NAV GROUP HEADERS — Better open state
───────────────────────────────────────────────────────────────────────── */
.nav-group-header.open {
background: rgba(74,222,128,0.10) !important;
color: #fff !important;
border-radius: 8px;
}
.nav-group-header.open .nav-group-icon {
color: #4ade80;
}
.nav-group-header.open .nav-arrow {
opacity: 1 !important;
color: #4ade80;
}
.nav-group-header .group-badge {
animation: badge-pulse-red 2s infinite;
}
@keyframes badge-pulse-red {
0%, 100% { box-shadow: 0 0 0 0 rgba(229,62,62,0.4); }
50% { box-shadow: 0 0 0 4px rgba(229,62,62,0); }
}
/* Submenu — open state: nicer left border */
.nav-submenu.open {
border-left: 2px solid rgba(74,222,128,0.4) !important;
}
/* ─────────────────────────────────────────────────────────────────────────
5. TOPBAR HEADER — Glassmorphism
───────────────────────────────────────────────────────────────────────── */
.admin-header {
background: rgba(255,255,255,0.97) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-bottom: 1px solid rgba(26,95,42,0.07) !important;
box-shadow: 0 1px 0 rgba(26,95,42,0.05), 0 2px 12px rgba(0,0,0,0.04) !important;
}
.page-title {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
letter-spacing: -0.01em !important;
}
/* Notification bell — pulse animation */
.notification-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: #fef2f2;
cursor: pointer;
color: var(--color-danger);
font-size: 0.95rem;
transition: all var(--transition-fast);
}
.notification-bell:hover {
background: #fee2e2;
transform: scale(1.05);
}
.notification-bell .notif-count {
position: absolute;
top: -4px;
right: -4px;
width: 18px;
height: 18px;
background: var(--color-danger);
color: #fff;
border-radius: 50%;
font-size: 0.6rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
animation: notif-pulse 2s infinite;
}
@keyframes notif-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,0.4); }
50% { box-shadow: 0 0 0 5px rgba(220,53,69,0); }
}
/* Version badge — redesigned */
.version-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--green-50);
border: 1px solid var(--green-200);
color: var(--green-700) !important;
border-radius: 20px;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 600;
transition: all var(--transition-fast);
}
.version-badge:hover {
background: var(--green-100);
border-color: var(--green-500);
transform: translateY(-1px);
}
.version-badge .edit-hint {
font-size: 0.6rem;
opacity: 0.5;
}
/* ─────────────────────────────────────────────────────────────────────────
6. PAGE CONTENT — Better padding and layout
───────────────────────────────────────────────────────────────────────── */
.page-content {
padding: 20px 24px !important;
}
/* ─────────────────────────────────────────────────────────────────────────
7. ADMIN PAGE HEADER — Gradient accent + clean card
(Output of adminPageHeader() function)
───────────────────────────────────────────────────────────────────────── */
.admin-page-header {
background: linear-gradient(135deg, var(--green-50) 0%, #fffffe 100%) !important;
border-radius: var(--radius-lg) !important;
padding: 16px 22px !important;
border-left: 4px solid var(--primary-color) !important;
box-shadow: var(--shadow-card) !important;
border: 1px solid rgba(26,95,42,0.06) !important;
border-left-width: 4px !important;
border-left-style: solid !important;
border-left-color: var(--primary-color) !important;
}
.admin-page-header h4 {
font-size: 1.1rem !important;
font-weight: 700 !important;
color: #1a2e1d !important;
letter-spacing: -0.01em;
}
.admin-page-header h4 i {
font-size: 1rem !important;
}
.admin-page-header .text-muted {
font-size: 0.8rem !important;
color: #6b7280 !important;
}
/* ─────────────────────────────────────────────────────────────────────────
8. CARDS — Refined shadows and borders
───────────────────────────────────────────────────────────────────────── */
.card {
border: 1px solid rgba(0,0,0,0.05) !important;
border-radius: var(--radius-xl) !important;
box-shadow: var(--shadow-card) !important;
transition: box-shadow var(--transition-mid), transform var(--transition-mid);
}
.admin-table-card {
border-radius: var(--radius-xl) !important;
box-shadow: 0 4px 20px rgba(26,95,42,0.07), 0 1px 4px rgba(0,0,0,0.04) !important;
}
/* Card header — clean design */
.card-header {
border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
background: rgba(255,255,255,0.9) !important;
padding: 14px 20px !important;
}
/* Gradient card header (existing .gradient-card-header) — keeps its gradient */
.gradient-card-header {
border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
padding: 14px 20px !important;
background: linear-gradient(135deg, var(--primary-color) 0%, #2eb554 100%) !important;
}
/* Section cards from adminSectionCard() */
.admin-section-card {
border-radius: var(--radius-lg) !important;
overflow: hidden;
box-shadow: var(--shadow-sm) !important;
}
.admin-section-card .card-header {
padding: 10px 16px !important;
}
/* ─────────────────────────────────────────────────────────────────────────
9. TABLES — Gradient thead, alternating rows, smooth hover
───────────────────────────────────────────────────────────────────────── */
.table thead tr {
background: transparent !important;
}
.table thead th,
.table-col-header th {
background: linear-gradient(180deg, var(--green-50) 0%, #e8f5e9 100%) !important;
color: var(--primary-color) !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
border-bottom: 2px solid #c8e6c9 !important;
padding: 10px 14px !important;
white-space: nowrap;
}
.table tbody tr {
transition: background var(--transition-fast), box-shadow var(--transition-fast);
border-bottom: 1px solid rgba(0,0,0,0.03) !important;
}
.table tbody tr:hover {
background: var(--green-50) !important;
box-shadow: inset 3px 0 0 var(--green-500) !important;
}
.table tbody tr:nth-child(even) {
background: rgba(240,253,244,0.5);
}
.table tbody td {
vertical-align: middle !important;
padding: 10px 14px !important;
font-size: 0.875rem;
color: #374151;
}
.table tbody td:first-child {
color: #111827;
font-weight: 500;
}
/* ─────────────────────────────────────────────────────────────────────────
10. ACTION BUTTONS — Compact icon-only buttons with tooltip
───────────────────────────────────────────────────────────────────────── */
/* Action button group — wrap edit/toggle/delete together */
.action-btns,
.btn-group-action,
td .d-flex,
td .d-inline-flex {
gap: 3px !important;
flex-wrap: nowrap !important;
align-items: center;
}
/* All small buttons in table cells */
.table .btn-sm,
td .btn-sm {
padding: 5px 8px !important;
font-size: 0.72rem !important;
border-radius: var(--radius-sm) !important;
border-width: 1.5px !important;
transition: all var(--transition-fast) !important;
height: 30px;
min-width: 30px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 3px;
}
.table .btn-sm:hover,
td .btn-sm:hover {
transform: translateY(-1px) !important;
box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
}
/* Edit button — blue outline */
.btn-outline-primary.btn-sm {
border-color: var(--secondary-color,#c0392b) !important;
color: var(--secondary-color,#c0392b) !important;
}
.btn-outline-primary.btn-sm:hover {
background: var(--secondary-color,#c0392b) !important;
color: #fff !important;
}
/* Delete button — red ghost */
.btn-outline-danger.btn-sm {
border-color: #ef4444 !important;
color: #ef4444 !important;
}
.btn-outline-danger.btn-sm:hover {
background: #ef4444 !important;
color: #fff !important;
}
/* View button — teal */
.btn-outline-info.btn-sm {
border-color: var(--secondary-color,#c0392b) !important;
color: var(--secondary-color,#c0392b) !important;
}
.btn-outline-info.btn-sm:hover {
background: var(--secondary-color,#c0392b) !important;
color: #fff !important;
}
/* Toggle: Active state — bright green */
.btn-success.btn-sm {
background: linear-gradient(135deg, #22c55e, #16a34a) !important;
border: none !important;
color: #fff !important;
font-size: 0.72rem !important;
}
/* Toggle: Hidden state — gray ghost */
.btn-outline-secondary.btn-sm {
border-color: #9ca3af !important;
color: #9ca3af !important;
}
.btn-outline-secondary.btn-sm:hover {
background: #6b7280 !important;
color: #fff !important;
border-color: #6b7280 !important;
}
/* ─────────────────────────────────────────────────────────────────────────
11. STATUS BADGES — Soft pill style (universal)
───────────────────────────────────────────────────────────────────────── */
.badge {
font-weight: 600 !important;
letter-spacing: 0.01em !important;
padding: 4px 10px !important;
border-radius: 20px !important;
font-size: 0.72rem !important;
}
/* Soft variants */
.badge.bg-success,
.badge.text-bg-success {
background: #dcfce7 !important;
color: #166534 !important;
}
.badge.bg-danger,
.badge.text-bg-danger {
background: #fee2e2 !important;
color: #991b1b !important;
}
.badge.bg-warning,
.badge.text-bg-warning {
background: #fef9c3 !important;
color: #713f12 !important;
}
.badge.bg-info,
.badge.text-bg-info {
background: #fef2f2 !important;
color: var(--secondary-dark,#922b21) !important;
}
.badge.bg-secondary,
.badge.text-bg-secondary {
background: #f3f4f6 !important;
color: #4b5563 !important;
}
.badge.bg-primary,
.badge.text-bg-primary {
background: var(--green-100) !important;
color: var(--green-800) !important;
}
/* Sidebar badge (notification count) — keep red for alerts */
.sidebar-nav .badge {
background: var(--color-danger) !important;
color: #fff !important;
border-radius: 10px !important;
padding: 2px 7px !important;
font-size: 0.65rem !important;
}
/* ─────────────────────────────────────────────────────────────────────────
12. FLASH ALERTS — Modern border-left style
───────────────────────────────────────────────────────────────────────── */
.alert {
border-radius: var(--radius-lg) !important;
border: 1px solid transparent !important;
border-left: 4px solid !important;
box-shadow: var(--shadow-sm) !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.alert-success {
background: var(--green-50) !important;
border-left-color: #22c55e !important;
border-color: rgba(34,197,94,0.15) !important;
color: var(--green-800) !important;
}
.alert-danger {
background: #fef2f2 !important;
border-left-color: #ef4444 !important;
border-color: rgba(239,68,68,0.15) !important;
color: #991b1b !important;
}
.alert-warning {
background: #fffbeb !important;
border-left-color: #f59e0b !important;
border-color: rgba(245,158,11,0.15) !important;
color: #92400e !important;
}
.alert-info {
background: #fef2f2 !important;
border-left-color: var(--secondary-color,#c0392b) !important;
border-color: rgba(192,57,43,0.15) !important;
color: var(--secondary-dark,#922b21) !important;
}
.alert .btn-close {
margin-left: auto !important;
filter: none !important;
opacity: 0.5 !important;
}
.alert .btn-close:hover { opacity: 1 !important; }
/* ─────────────────────────────────────────────────────────────────────────
13. DATATABLES — Better filter, pagination, info
───────────────────────────────────────────────────────────────────────── */
.dataTables_wrapper {
padding: 14px !important;
}
.dataTables_wrapper .dataTables_filter label {
font-size: 0.82rem !important;
color: #6b7280 !important;
font-weight: 500;
}
.dataTables_wrapper .dataTables_filter input {
border: 1.5px solid #d1d9e0 !important;
border-radius: 8px !important;
padding: 6px 12px !important;
font-size: 0.85rem !important;
margin-left: 6px !important;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
background: var(--green-50) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 3px rgba(26,95,42,0.08) !important;
outline: none !important;
background: #fff !important;
}
.dataTables_wrapper .dataTables_length select {
border: 1.5px solid #d1d9e0 !important;
border-radius: 8px !important;
padding: 5px 8px !important;
font-size: 0.82rem !important;
color: #374151 !important;
}
.dataTables_wrapper .dataTables_info {
font-size: 0.8rem !important;
color: #9ca3af !important;
padding-top: 10px !important;
}
.dataTables_wrapper .dataTables_paginate {
padding-top: 10px !important;
}
.dataTables_paginate .paginate_button {
border-radius: var(--radius-sm) !important;
border: 1px solid transparent !important;
font-size: 0.82rem !important;
padding: 4px 10px !important;
transition: all var(--transition-fast) !important;
color: #4b5563 !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
background: var(--primary-color) !important;
color: #fff !important;
border-color: var(--primary-color) !important;
box-shadow: 0 2px 8px rgba(26,95,42,0.3) !important;
}
.dataTables_paginate .paginate_button:not(.disabled):not(.current):hover {
background: var(--green-50) !important;
color: var(--primary-color) !important;
border-color: var(--green-200) !important;
}
.dataTables_paginate .paginate_button.disabled {
opacity: 0.4 !important;
}
/* ─────────────────────────────────────────────────────────────────────────
14. MODALS — Refined header + animation + form inputs
───────────────────────────────────────────────────────────────────────── */
/* Bootstrap 5 modal — consistent gradient header */
.modal .modal-header {
padding: 16px 20px !important;
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.modal .modal-header[style*="background"],
.modal .modal-header[class*="bg-"] {
border-bottom: none !important;
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.modal .modal-content {
border-radius: var(--radius-xl) !important;
border: none !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
overflow: hidden;
}
/* Top accent line on all modals */
.modal .modal-content::before {
content: '';
display: block;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), #22c55e, #4ade80);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal .modal-footer {
padding: 12px 20px !important;
background: #fafafa !important;
border-top: 1px solid rgba(0,0,0,0.05) !important;
border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}
/* ─────────────────────────────────────────────────────────────────────────
15. FORMS — Better focus, labels, input groups
───────────────────────────────────────────────────────────────────────── */
/* All form inputs and selects across admin */
.form-control,
.form-select {
border-radius: var(--radius-md) !important;
border: 1.5px solid #e2e8f0 !important;
background: #fafcff !important;
font-size: 0.88rem !important;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast) !important;
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary-color) !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(26,95,42,0.10) !important;
outline: none !important;
}
.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
border-color: #94a3b8 !important;
background: #fff !important;
}
.form-label {
font-size: 0.82rem !important;
font-weight: 600 !important;
color: #374151 !important;
margin-bottom: 5px !important;
}
/* Required asterisk */
.form-label .text-danger,
.form-label span[style*="color:red"],
.form-label span[style*="color:#e"] {
font-size: 0.9em;
}
/* Input group addon */
.input-group-text {
background: var(--green-50) !important;
border-color: #e2e8f0 !important;
color: var(--primary-color) !important;
font-size: 0.85rem !important;
border-radius: var(--radius-md) !important;
}
/* Textarea */
textarea.form-control {
min-height: 90px !important;
resize: vertical !important;
}
/* Form switch toggle */
.form-switch .form-check-input {
width: 2.5em !important;
cursor: pointer !important;
}
.form-switch .form-check-input:checked {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
/* ─────────────────────────────────────────────────────────────────────────
16. EMPTY STATE — Beautiful placeholder
───────────────────────────────────────────────────────────────────────── */
.admin-empty-state {
padding: 48px 20px !important;
color: #9ca3af !important;
font-size: 0.875rem !important;
}
.admin-empty-state i {
color: #d1d5db !important;
display: block;
margin-bottom: 12px;
font-size: 2.5rem !important;
opacity: 1 !important;
}
.admin-empty-state p {
margin: 4px 0 0 !important;
font-size: 0.8rem;
color: #d1d5db;
}
/* ─────────────────────────────────────────────────────────────────────────
17. DASHBOARD STAT CARDS — Eye-catching with shimmer effect
───────────────────────────────────────────────────────────────────────── */
.stat-card {
border-radius: var(--radius-xl) !important;
padding: 20px !important;
overflow: hidden;
position: relative;
border: 1px solid rgba(255,255,255,0.15) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
transition: transform var(--transition-mid), box-shadow var(--transition-mid) !important;
}
.stat-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 36px rgba(0,0,0,0.18) !important;
}
/* Shimmer overlay */
.stat-card::after {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 100px;
height: 200%;
background: rgba(255,255,255,0.08);
transform: rotate(25deg);
pointer-events: none;
}
.stat-icon {
width: 52px !important;
height: 52px !important;
border-radius: var(--radius-lg) !important;
background: rgba(255,255,255,0.2) !important;
font-size: 22px !important;
backdrop-filter: blur(4px);
}
.stat-info h3 {
font-size: 2rem !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
}
.stat-info p {
font-size: 0.82rem !important;
opacity: 0.88 !important;
font-weight: 500;
}
/* Mini stat cards on dashboard */
.db-mini-card {
border-radius: var(--radius-lg) !important;
transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.db-mini-card:hover {
transform: translateY(-3px) scale(1.01) !important;
box-shadow: 0 10px 28px rgba(0,0,0,0.2) !important;
}
/* ─────────────────────────────────────────────────────────────────────────
18. BREADCRUMB STRIP — Under topbar
───────────────────────────────────────────────────────────────────────── */
.admin-breadcrumb {
background: var(--green-50);
border-bottom: 1px solid rgba(26,95,42,0.06);
padding: 6px 24px;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: #6b7280;
}
.admin-breadcrumb a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: color var(--transition-fast);
}
.admin-breadcrumb a:hover {
color: var(--secondary-color);
text-decoration: underline;
}
.admin-breadcrumb .bc-sep {
color: #d1d5db;
font-size: 0.65rem;
}
.admin-breadcrumb .bc-current {
color: #374151;
font-weight: 600;
}
/* ─────────────────────────────────────────────────────────────────────────
19. TABS — Better tab navigation for list/add pages
───────────────────────────────────────────────────────────────────────── */
.nav-tabs {
border-bottom: 2px solid #e8f5e9 !important;
gap: 4px;
flex-wrap: nowrap;
overflow-x: auto;
}
.nav-tabs .nav-link {
border: none !important;
border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
padding: 9px 18px !important;
color: #6b7280 !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
transition: all var(--transition-fast) !important;
background: transparent !important;
position: relative;
}
.nav-tabs .nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: transparent;
transition: background var(--transition-fast);
}
.nav-tabs .nav-link:hover {
color: var(--primary-color) !important;
background: var(--green-50) !important;
}
.nav-tabs .nav-link.active {
color: var(--primary-color) !important;
font-weight: 700 !important;
background: var(--green-50) !important;
}
.nav-tabs .nav-link.active::after {
background: var(--primary-color);
}
/* ─────────────────────────────────────────────────────────────────────────
20. SCROLLBAR — Thin green scrollbar
───────────────────────────────────────────────────────────────────────── */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.sidebar::-webkit-scrollbar-thumb { background: rgba(74,222,128,0.3); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(74,222,128,0.5); }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: #f8fafc; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* ─────────────────────────────────────────────────────────────────────────
21. MOBILE RESPONSIVE — Enhanced
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.page-content { padding: 14px !important; }
.admin-page-header { padding: 12px 16px !important; }
.admin-page-header h4 { font-size: 1rem !important; }
.table thead th { font-size: 0.7rem !important; padding: 8px 10px !important; }
.table tbody td { padding: 8px 10px !important; font-size: 0.82rem !important; }
.dataTables_wrapper { padding: 8px !important; }
.stat-card { padding: 14px !important; }
.stat-info h3 { font-size: 1.6rem !important; }
}
/* ─────────────────────────────────────────────────────────────────────────
22. TAB FORM SUBMIT BUTTONS — Consistent styling
───────────────────────────────────────────────────────────────────────── */
.tab-content .btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
border: none !important;
box-shadow: 0 3px 12px rgba(26,95,42,0.25) !important;
padding: 10px 24px !important;
font-weight: 600 !important;
border-radius: var(--radius-md) !important;
transition: all var(--transition-fast) !important;
}
.tab-content .btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(26,95,42,0.35) !important;
}
.tab-content .btn-secondary,
.tab-content .btn-outline-secondary {
border-radius: var(--radius-md) !important;
font-weight: 500 !important;
}
/* ─────────────────────────────────────────────────────────────────────────
23. DROPDOWN MENUS — Admin profile dropdown
───────────────────────────────────────────────────────────────────────── */
.admin-info .admin-menu {
border-radius: var(--radius-lg) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
overflow: hidden !important;
min-width: 160px !important;
}
.admin-info .admin-menu a {
padding: 10px 16px !important;
font-size: 0.85rem !important;
transition: background var(--transition-fast) !important;
}
.admin-info .admin-menu a:hover {
background: var(--green-50) !important;
color: var(--primary-color) !important;
}
/* ─────────────────────────────────────────────────────────────────────────
24. FILE UPLOAD — Better dashed border
───────────────────────────────────────────────────────────────────────── */
.file-upload,
input[type="file"].form-control {
border-radius: var(--radius-md) !important;
}
.file-upload {
border: 2px dashed #c8e6c9 !important;
background: var(--green-50) !important;
transition: all var(--transition-fast) !important;
}
.file-upload:hover {
border-color: var(--primary-color) !important;
background: var(--green-100) !important;
}
/* ─────────────────────────────────────────────────────────────────────────
25. ANIMATIONS — Smooth page entry
───────────────────────────────────────────────────────────────────────── */
.page-content > * {
animation: pageEntry 0.3s ease both;
}
.page-content > *:nth-child(2) { animation-delay: 0.04s; }
.page-content > *:nth-child(3) { animation-delay: 0.08s; }
.page-content > *:nth-child(4) { animation-delay: 0.12s; }
@keyframes pageEntry {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Modal entry — snappier */
.modal.show .modal-dialog {
animation: modalSnap 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes modalSnap {
from { opacity: 0; transform: scale(0.94) translateY(-16px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ==========================================================================
END UI/UX ENHANCEMENT LAYER 2.0
========================================================================== */
/* ==========================================================================
STATUS BADGE — Improved visibility (soft pill style)
Tables मा प्रयोग भएका सबै status badges को लागि
========================================================================== */
.table .badge.bg-success,
.card-body .table .badge.bg-success {
background-color: #dcfce7 !important;
color: #15803d !important;
border: 1px solid #86efac !important;
font-weight: 600;
}
.table .badge.bg-secondary,
.card-body .table .badge.bg-secondary {
background-color: #f3f4f6 !important;
color: #374151 !important;
border: 1px solid #d1d5db !important;
font-weight: 600;
}
.table .badge.bg-danger,
.card-body .table .badge.bg-danger {
background-color: #fee2e2 !important;
color: #b91c1c !important;
border: 1px solid #fca5a5 !important;
font-weight: 600;
}
.table .badge.bg-warning,
.card-body .table .badge.bg-warning {
background-color: #fef9c3 !important;
color: #854d0e !important;
border: 1px solid #fde047 !important;
font-weight: 600;
}
.table .badge.bg-info,
.card-body .table .badge.bg-info {
background-color: #fef2f2 !important;
color: var(--secondary-dark,#922b21) !important;
border: 1px solid #fecaca !important;
font-weight: 600;
}
.table .badge.bg-primary,
.card-body .table .badge.bg-primary {
background-color: #fef2f2 !important;
color: var(--secondary-color,#c0392b) !important;
border: 1px solid #fecaca !important;
font-weight: 600;
}
/* =====================================================
NOTIFICATION BELL DROPDOWN — Clickable Notification Panel
===================================================== */
/* Bell button — clickable, plain background */
.notif-toggle-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.notif-toggle-btn:focus { outline: none; }
/* Wrapper — dropdown को anchor point */
.notif-wrapper { position: relative; }
/* Dropdown panel */
.notif-dropdown {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 320px;
background: #fff;
border-radius: 14px;
box-shadow: 0 8px 40px rgba(0,0,0,.18);
z-index: 9999;
overflow: hidden;
border: 1px solid rgba(0,0,0,.06);
animation: notifFadeIn .18s ease;
}
@keyframes notifFadeIn {
from { opacity:0; transform:translateY(-6px); }
to { opacity:1; transform:translateY(0); }
}
/* Dropdown header */
.notif-dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px 10px;
font-weight: 700;
font-size: .85rem;
color: #1a202c;
border-bottom: 1px solid #f0f4f8;
background: #f8fafc;
}
.notif-total-badge {
background: var(--color-danger);
color: #fff;
font-size: .7rem;
font-weight: 700;
padding: 2px 10px;
border-radius: 20px;
}
/* Dropdown body — scrollable */
.notif-dropdown-body {
max-height: 360px;
overflow-y: auto;
padding: 6px 0;
}
/* Each notification item */
.notif-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
text-decoration: none !important;
color: #374151;
transition: background .15s;
border-bottom: 1px solid #f9fafb;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover {
background: #f0f7ff;
color: #1a56db;
}
/* Icon circle */
.notif-item-icon {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .85rem;
flex-shrink: 0;
}
/* Label text */
.notif-item-label {
flex: 1;
font-size: .85rem;
font-weight: 500;
}
/* Count badge */
.notif-item-count {
min-width: 24px;
height: 24px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: .75rem;
font-weight: 700;
padding: 0 8px;
}
/* Empty state */
.notif-empty {
padding: 32px 16px;
text-align: center;
color: #6b7280;
font-size: .85rem;
}
/* Footer link */
.notif-dropdown-footer {
border-top: 1px solid #f0f4f8;
padding: 10px 16px;
text-align: center;
background: #f8fafc;
}
.notif-dropdown-footer a {
font-size: .82rem;
color: var(--secondary-color,#c0392b);
text-decoration: none;
font-weight: 500;
}
.notif-dropdown-footer a:hover { color: var(--secondary-dark,#922b21); }
/* Mobile: full width */
@media (max-width: 480px) {
.notif-dropdown {
width: 290px;
right: -40px;
}
}
/* =====================================================
ADMIN TABLE SEARCH BOX — खोज बक्स
===================================================== */
.admin-search-wrap {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.admin-search-wrap .input-group-text {
background: #fff;
border-color: #cbd5e1;
color: #64748b;
}
.admin-search-wrap .form-control {
border-color: #cbd5e1;
font-size: .875rem;
}
.admin-search-wrap .form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 .15rem rgba(26,95,42,.12);
}
.admin-search-wrap .search-count {
font-size: .78rem;
color: #94a3b8;
min-width: 60px;
}
/* =====================================================
ACTION BUTTONS — Gold Standard
Edit=primary, Delete=danger, View=info (icon only)
===================================================== */
/* Action button group spacing */
.btn-group-action {
display: inline-flex;
gap: 4px;
align-items: center;
flex-wrap: nowrap;
}
/* Icon-only action buttons tooltip */
.btn[title] {
position: relative;
}
/* ═══════════════════════════════════════════════════════
APPLICATION TABLES v3 — Eye-Catching, Status-Colored
═══════════════════════════════════════════════════════ */
/* Uniform table rows — clean, simple (matches messages.php look)
Status indicators are shown via the status badge column, NOT as full-row colors */
.app-table tbody tr { border-left: none; background: transparent; transition: background 0.12s; }
.app-table tbody tr[data-status] { background: transparent; border-left: none; }
.app-table tbody tr:hover { background: #f8fafb; filter: none; }
.app-table tbody td { border-bottom: 1px solid #f1f3f5; }
/* Column widths */
.app-table { table-layout: auto; font-size: 0.855rem; }
.app-table th { background: #f8fafb; font-weight: 700; color: #374151; font-size: 0.78rem;
text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 12px !important;
white-space: nowrap; border-bottom: 2px solid #e5e9ef !important; }
.app-table td { padding: 10px 12px !important; vertical-align: middle; }
/* Avatar letter circle */
.av-letter {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-success) 100%);
color: #fff; font-size: 0.82rem; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; box-shadow: 0 2px 6px rgba(26,95,42,0.25);
}
.av-letter.av-kyc { background: linear-gradient(135deg,var(--secondary-dark,#922b21),var(--secondary-color,#c0392b)); }
.av-letter.av-acc { background: linear-gradient(135deg,var(--secondary-color,#c0392b),#d45d50); }
.av-letter.av-grv { background: linear-gradient(135deg,#b45309,#f59e0b); }
.av-letter.av-vnd { background: linear-gradient(135deg,#0f766e,#2dd4bf); }
.av-letter.av-anon { background: linear-gradient(135deg,#6b7280,#9ca3af); }
/* Tracking ID badge */
.track-badge {
font-family: 'Courier New', monospace; font-size: 0.7rem; letter-spacing: 0.5px;
background: #fef2f2; border: 1px solid #fecaca; color: var(--secondary-dark,#922b21);
padding: 2px 7px; border-radius: 4px; display: inline-block; white-space: nowrap;
}
/* Amount cell */
.amount-cell { font-weight: 800; color: var(--primary-color); font-size: 0.95rem; }
/* Quick approve/reject buttons */
.btn-qapprove, .btn-qreject, .btn-qresolve {
font-size: 0.72rem; padding: 3px 9px; border-radius: 5px; font-weight: 600;
border: 1.5px solid; cursor: pointer; transition: all 0.15s; white-space: nowrap;
line-height: 1.4;
}
.btn-qapprove { background:#ecfdf5; color:#16a34a; border-color:#bbf7d0; }
.btn-qapprove:hover { background:#16a34a; color:#fff; border-color:#16a34a; }
.btn-qreject { background:#fff5f5; color:#dc2626; border-color:#fecaca; }
.btn-qreject:hover { background:#dc2626; color:#fff; border-color:#dc2626; }
.btn-qresolve { background:#f0fdf4; color:#15803d; border-color:#86efac; }
.btn-qresolve:hover { background:#15803d; color:#fff; border-color:#15803d; }
/* Quick action form (inline) */
.qaction-form { display:inline; }
/* Status badges — enhanced */
.badge-status {
font-size: 0.73rem; font-weight: 600; padding: 4px 10px; border-radius: 20px;
display: inline-flex; align-items: center; gap: 4px;
}
.badge-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.7; }
.badge-pending { background:#fef9c3; color:#b45309; }
.badge-processing { background:#fef2f2; color:var(--secondary-dark,#922b21); }
.badge-approved { background:#dcfce7; color:#15803d; }
.badge-rejected { background:#fee2e2; color:#b91c1c; }
.badge-disbursed { background:#ede9fe; color:#6d28d9; }
.badge-resolved { background:#dcfce7; color:#15803d; }
.badge-pending-review { background:#fef3c7; color:#92400e; }
.badge-in_progress { background:#fef2f2; color:var(--secondary-dark,#922b21); }
.badge-closed { background:#f3f4f6; color:#6b7280; }
/* Filter bar */
.adm-filter-bar {
background: #fff; border-radius: 10px; padding: 14px 18px;
border: 1px solid #e8edf3; margin-bottom: 18px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.adm-filter-bar label { font-size: 0.73rem; font-weight: 700; color: #6b7280;
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: block; }
.adm-filter-bar .form-select, .adm-filter-bar .form-control {
font-size: 0.86rem; border-radius: 7px; border-color: #d1d5db;
}
/* Table card header with count */
.tbl-header-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px; border-bottom: 1px solid #e5e9ef; background: #fff;
border-radius: 10px 10px 0 0;
}
.tbl-header-bar h6 { font-size: 0.92rem; font-weight: 700; color: #1a2e1d; margin: 0; }
.result-count-badge {
font-size: 0.75rem; background: #f0f9f2; color: var(--primary-color); border: 1px solid #bbf7d0;
padding: 3px 12px; border-radius: 20px; font-weight: 600;
}
/* Stat mini cards — row at top */
.stat-mini-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-mini {
flex: 1; min-width: 130px; background: #fff; border-radius: 10px;
border: 1.5px solid #e8edf3; padding: 14px 16px; text-decoration: none !important;
transition: box-shadow 0.18s, border-color 0.18s; display: flex; flex-direction: column;
justify-content: flex-start; min-height: 122px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.stat-mini:hover { box-shadow: 0 4px 18px rgba(26,95,42,0.12); border-color:#22c55e; }
.stat-mini.active-filter { border-color: var(--primary-color); background: #f0fdf4; box-shadow: 0 2px 10px rgba(26,95,42,0.15); }
.stat-mini .sm-val { font-size: 1.6rem; font-weight: 800; color: #1a2e1d; line-height: 1; }
.stat-mini .sm-lbl { font-size: 0.73rem; color: #6b7280; margin-top: 2px; line-height: 1.35; min-height: 2em; }
.stat-mini .sm-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; margin-bottom:8px; }
.sm-icon.ic-total { background:#fef2f2; color:var(--secondary-dark,#922b21); }
.sm-icon.ic-pending { background:#fef9c3; color:#b45309; }
.sm-icon.ic-process { background:#fef2f2; color:var(--secondary-color,#c0392b); }
.sm-icon.ic-approved { background:#dcfce7; color:#15803d; }
.sm-icon.ic-rejected { background:#fee2e2; color:#b91c1c; }
.sm-icon.ic-disbursed { background:#fef2f2; color:var(--secondary-dark,#922b21); }
.sm-icon.ic-amount { background:#fef3c7; color:#92400e; }
.sm-icon.ic-resolved { background:#dcfce7; color:#15803d; }
.sm-icon.ic-anon { background:#f3f4f6; color:#6b7280; }
/* Bootstrap-based stat cards (member-online-portal etc.) */
.stat-uniform-card {
min-height: 122px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.stat-uniform-card .stat-value {
font-size: 1.9rem;
font-weight: 800;
line-height: 1;
}
.stat-uniform-card .stat-label {
font-size: 0.78rem;
color: #6b7280;
line-height: 1.35;
min-height: 2.1em;
text-align: center;
}
/* Pagination improvements */
.adm-pagination { display:flex; gap:4px; justify-content:center; align-items:center; flex-wrap:wrap; }
.adm-pagination a, .adm-pagination span {
min-width: 34px; height: 34px; display:inline-flex; align-items:center; justify-content:center;
border-radius:7px; font-size:0.83rem; font-weight:600; text-decoration:none;
border: 1.5px solid #e5e9ef; color: #374151; background: #fff; transition: all 0.15s;
}
.adm-pagination a:hover { background:#e8f5e9; border-color:#22c55e; color:var(--primary-color); }
.adm-pagination span.active { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.adm-pagination a.disabled { opacity:0.4; pointer-events:none; }
/* Export CSV button */
.btn-csv { background:#fff; color:#059669; border:1.5px solid #6ee7b7; font-size:0.8rem;
padding:5px 14px; border-radius:7px; font-weight:600; text-decoration:none;
display:inline-flex; align-items:center; gap:5px; transition:all 0.15s; }
.btn-csv:hover { background:#059669; color:#fff; border-color:#059669; }
/* Phone / contact cell */
.contact-cell small { color: #6b7280; font-size:0.75rem; }
/* Info row inside cells */
.cell-main { font-weight: 600; color: #1a2e1d; }
.cell-sub { font-size: 0.75rem; color: #6b7280; margin-top: 1px; }
/* No results row */
.no-results-row td { text-align:center; padding:40px !important; color:#9ca3af; }
/* ── Admin Detail Info Table — replaces table-bordered in detail views ── */
.adm-detail-table { border-collapse: separate; border-spacing: 0; width: 100%; margin-bottom: 0; table-layout: fixed; }
.adm-detail-table tr td,
.adm-detail-table tr th { padding: 9px 10px; border: none; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
.adm-detail-table tr td { padding: 9px 10px; border: none; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
.adm-detail-table tr:last-child td,
.adm-detail-table tr:last-child th { border-bottom: none; }
.adm-detail-table th {
width: 38% !important; overflow-wrap: break-word; hyphens: auto; font-size: 0.76rem; font-weight: 700; color: #475569;
text-transform: uppercase; letter-spacing: 0.4px;
background: #f8fafc !important; text-align: left; padding-left: 14px; padding-right: 10px;
border-right: 1px solid #e2e8f0;
white-space: normal;
word-break: break-word;
}
.adm-detail-table td { width: 62% !important; font-size: 0.86rem; color: #0f172a; background: transparent !important; }
.adm-detail-table tr:hover td,
.adm-detail-table tr:hover th { background: #f9fafb !important; }
/* Wrapper card for each detail group */
.adm-info-group { background: #fff; border: 1.5px solid #e8edf3; border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.adm-info-group-header {
display: flex; align-items: center; gap: 8px;
width: 100%;
padding: 9px 16px; background: #f8fafc;
border-bottom: 1.5px solid #e8edf3;
font-size: 0.78rem; font-weight: 700; color: #374151;
text-transform: uppercase; letter-spacing: 0.5px;
}
.adm-info-group-header i { color: var(--primary-color); font-size: 0.82rem; }
/* Auto-style existing h6 section headings in detail views */
.card-body h6.fw-bold.text-muted,
.card-body h6.fw-bold[class*="text-"] {
font-size: 0.74rem !important; font-weight: 700 !important;
text-transform: uppercase; letter-spacing: 0.5px;
color: #374151 !important;
padding: 8px 0 6px; border-bottom: 1.5px solid #e8edf3;
margin-bottom: 0 !important;
}
/* Ensure table immediately after heading has top-connected look */
.card-body h6.fw-bold + .table.adm-detail-table { margin-top: 0; }
/* Standalone adm-detail-table (not inside adm-info-group) */
.card-body .table.adm-detail-table { border: 1.5px solid #e8edf3; border-top: none; border-radius: 0 0 10px 10px; margin-bottom: 16px; }
/* Tables inside adm-info-group already have outer border */
.adm-info-group .table.adm-detail-table { border: none; border-radius: 0; margin-bottom: 0; }
@media (max-width: 768px) {
.adm-detail-table tr {
display: block;
border-bottom: 1px solid #e5e7eb;
}
.adm-detail-table tr:last-child {
border-bottom: none;
}
.adm-detail-table th,
.adm-detail-table td {
display: block;
width: 100% !important;
border-right: none !important;
border-bottom: none !important;
text-align: left !important;
padding: 7px 10px !important;
}
.adm-detail-table th {
background: #f8fafc !important;
font-size: 0.74rem;
padding-bottom: 2px !important;
}
.adm-detail-table td {
padding-top: 2px !important;
word-break: break-word;
}
}
/* ── Admin Filter Bar (.afb-*) — global, used on all list pages ── */
.adm-filter-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.afb-group { display:flex; flex-direction:column; gap:4px; }
.afb-group > label { font-size:11.5px; font-weight:600; color:#555; margin:0; text-transform:none; letter-spacing:0; }
.afb-search { flex:1; min-width:180px; }
.afb-select { height:36px; border:1px solid #ced4da; border-radius:6px; padding:0 10px; font-size:13px; min-width:140px; }
.afb-search-wrap { position:relative; }
.afb-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#aaa; font-size:12px; pointer-events:none; }
.afb-input { width:100%; height:36px; border:1px solid #ced4da; border-radius:6px; padding:0 10px 0 30px; font-size:13px; }
.afb-input:focus,.afb-select:focus { outline:none; border-color:var(--primary-color); box-shadow:0 0 0 2px rgba(26,95,42,.12); }
.afb-btn-search { height:36px; padding:0 16px; background:var(--primary-color); color:#fff; border:none; border-radius:6px; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; text-decoration:none; }
.afb-btn-search:hover { background:#155224; color:#fff; }
.afb-btn-reset { height:36px; padding:0 14px; background:#f8f9fa; color:#555; border:1px solid #ced4da; border-radius:6px; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap; }
.afb-btn-reset:hover { background:#e9ecef; color:#333; }
/* Print support */
@media print {
.no-print { display:none !important; }
.app-table th { background:#e8f5e9 !important; }
}
/* ════════════════════════════════════════════════════════
v6.6 — SIDEBAR COMPACT FIX (especially mobile slide-out)
Top-level menu items spacing कम — sub-menu जस्तै tight
════════════════════════════════════════════════════════ */
.sidebar-nav ul { padding: 4px 0 !important; }
.sidebar-nav li { margin: 1px 6px !important; }
.sidebar-nav > ul > li { margin: 1px 6px !important; }
.sidebar-nav a { padding: 6px 10px !important; font-size: 0.82rem !important; line-height: 1.25 !important; gap: 8px !important; }
.sidebar-nav .nav-icon-wrap { width: 26px !important; height: 26px !important; font-size: 11px !important; border-radius: 6px !important; }
.sidebar-section-label { margin: 8px 10px 2px !important; font-size: 0.58rem !important; }
.nav-group-header { padding: 6px 10px !important; font-size: 0.82rem !important; margin: 1px 6px !important; gap: 8px !important; }
.nav-group-wrap { margin-top: 1px !important; }
.nav-submenu { padding: 2px 0 !important; }
/* Mobile slide-out sidebar — even tighter so menu fits without huge gaps */
@media (max-width: 991px) {
.sidebar {
left: 0 !important;
width: min(86vw, 320px) !important;
max-width: 320px !important;
transform: translateX(-110%);
}
.sidebar.active { transform: translateX(0) !important; }
.sidebar-nav ul { padding: 3px 0 !important; }
.sidebar-nav li { margin: 1px 6px !important; }
.sidebar-nav a { padding: 7px 11px !important; font-size: 0.86rem !important; min-height: 0 !important; }
.sidebar-nav .nav-icon-wrap { width: 28px !important; height: 28px !important; font-size: 12px !important; }
.nav-group-header { padding: 7px 11px !important; font-size: 0.86rem !important; }
.nav-submenu li { margin: 1px 8px 1px 22px !important; }
.nav-submenu li a { padding: 5px 10px !important; font-size: 0.82rem !important; }
.header-right { gap: 6px !important; }
.admin-info { max-width: 180px; }
.admin-name { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-dropdown { width: min(92vw, 320px) !important; right: -6px !important; }
}
@media (max-width: 767px) {
.header-date-pill,
.admin-name,
.version-badge {
display: none !important;
}
.admin-header {
padding: 10px 12px !important;
gap: 8px !important;
}
.header-right { gap: 4px !important; }
.admin-info {
padding: 6px 8px !important;
border-radius: 999px !important;
min-width: auto !important;
}
.notif-dropdown {
position: fixed !important;
top: 68px !important;
right: 10px !important;
left: 10px !important;
width: auto !important;
max-width: none !important;
}
.page-content { padding: 12px 12px 84px !important; }
.main-content .card,
.admin-table-card { border-radius: 14px !important; }
}
/* ════════════════════════════════════════════════════════════
v9.7 — Admin panel mobile UI improvements
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Page header — compact */
.admin-page-header {
padding: 14px 14px !important;
margin-bottom: 12px !important;
}
.admin-page-header h1, .admin-page-header .h1 {
font-size: 1.1rem !important;
line-height: 1.6 !important;
}
.admin-page-header .admin-page-subtitle,
.admin-page-header p {
font-size: .78rem !important;
}
/* Cards — reduce padding */
.admin-card, .admin-table-card {
border-radius: 10px !important;
}
.admin-card .card-header,
.admin-table-card .card-header {
padding: 12px 14px !important;
font-size: .92rem !important;
}
.admin-card .card-body,
.admin-table-card .card-body {
padding: 12px !important;
}
/* Tables — horizontal scroll friendly + smaller cells */
.admin-table-card .table-responsive {
border-radius: 8px;
-webkit-overflow-scrolling: touch;
}
.admin-table-card table {
font-size: .82rem !important;
min-width: 540px;
}
.admin-table-card table th,
.admin-table-card table td {
padding: 8px 10px !important;
white-space: nowrap;
}
.admin-table-card table .badge { font-size: .68rem !important; }
/* Forms — full-width, larger touch targets */
.admin-fancy-input,
.form-control, .form-select {
font-size: .92rem !important;
padding: 10px 12px !important;
min-height: 42px;
}
.form-label { font-size: .82rem !important; margin-bottom: 4px !important; }
.row.g-3 > [class*="col-"] { padding-top: 6px !important; padding-bottom: 6px !important; }
/* Buttons — full width on mobile */
.admin-page-header .btn,
.admin-table-card .btn-success,
.admin-table-card .btn-primary { font-size: .85rem !important; padding: 8px 14px !important; }
/* Tabs — scroll horizontally without breaking */
.admin-nav-tabs {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.admin-nav-tabs .nav-link {
white-space: nowrap !important;
font-size: .85rem !important;
padding: 9px 12px !important;
}
/* Search wrap */
.admin-search-wrap {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.admin-search-wrap .input-group { max-width: 100% !important; }
/* Stats cards spacing */
.admin-stat-card {
padding: 12px !important;
margin-bottom: 10px !important;
}
}
/* ════════════════════════════════════════════════════════════
v10.7 — Admin Font Consistency (heading/body normalization)
नोट: केही pages मा inline style ले heading ठूलो देखिने भएकाले
यहाँ एउटै scale force गरिएको छ।
════════════════════════════════════════════════════════════ */
.admin-content .page-header h1 {
font-size: 1.55rem !important;
line-height: 1.6 !important;
font-weight: 700 !important;
}
.admin-content .page-header p {
font-size: 0.92rem !important;
line-height: 1.45 !important;
}
.admin-content .page-header p small {
font-size: 0.82rem !important;
}
@media (max-width: 768px) {
.admin-content .page-header h1 {
font-size: 1.28rem !important;
}
.admin-content .page-header p {
font-size: 0.86rem !important;
}
.admin-content .page-header p small {
font-size: 0.78rem !important;
}
}
/* =====================================================
v10.7.1 — Admin top header uniform polish
===================================================== */
.admin-header {
background: linear-gradient(180deg, #ffffff 0%, #f8fffb 100%) !important;
border-bottom: 1px solid #deefe4 !important;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.admin-topbar-brand {
border: 1px solid #d9ede0;
border-radius: 12px;
padding: 5px 12px;
background: #ffffff;
box-shadow: 0 6px 16px rgba(13, 92, 46, 0.10);
}
.admin-topbar-brand.has-logo img {
height: auto;
max-height: 40px;
max-width: min(210px, 42vw);
width: auto;
object-fit: contain;
}
.admin-topbar-brand.no-logo .topbar-brand-text {
font-weight: 800;
color: var(--primary-dark, #0d5c2e);
}
.header-date-pill {
border: 1px solid #cde9d8;
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
color: #065f46;
font-weight: 700;
}
.header-item > a,
.header-item > button {
border-radius: 10px;
}
/* ========== admin-modern.css ========== */
/**
* admin-modern.css — Modern Design Overlay v1.0
* ================================================
* Bootstrap 5 + admin.css माथि load हुन्छ।
* पुरानो styles override गर्छ — admin.css नछुईकन।
*
* ─── Non-developer को लागि सरल guide ───────────────
* रंग बदल्न: design-tokens.css मा --primary-color बदल्नुहोस्
* Layout: admin/assets/admin.css मा --sidebar-width बदल्नुहोस्
* ────────────────────────────────────────────────────
*/
/* ═══════════════════════════════════════════════════
1. ROOT OVERRIDES — Modern spacing & radius
═══════════════════════════════════════════════════ */
:root {
--adm-radius: 12px;
--adm-radius-sm: 8px;
--adm-radius-lg: 16px;
--adm-shadow-xs: 0 1px 3px rgba(0,0,0,.06);
--adm-shadow-sm: 0 2px 8px rgba(0,0,0,.08);
--adm-shadow-md: 0 4px 16px rgba(0,0,0,.10);
--adm-border: #e5e7eb;
--adm-bg: #f5f7f5;
--adm-surface: #ffffff;
--adm-text: #1a2e1f;
--adm-muted: #6b7280;
--adm-success-bg: #f0fdf4;
--adm-danger-bg: #fef2f2;
--adm-warn-bg: #fffbeb;
--adm-info-bg: #fef2f2;
}
html {
/* Admin pages मा global fonts धेरै ठूलो देखिँदै थियो।
rem आधारित अधिकांश layout/typography यहीबाट scale हुन्छ। */
font-size: 14px !important;
}
/* ═══════════════════════════════════════════════════
2. PAGE BACKGROUND
═══════════════════════════════════════════════════ */
body {
background: var(--adm-bg) !important;
}
/* ═══════════════════════════════════════════════════
3. SIDEBAR — Flat modern dark green
═══════════════════════════════════════════════════ */
.sidebar {
background: #18272e !important; /* flat dark, no gradient */
border-right: none !important;
box-shadow: 2px 0 12px rgba(0,0,0,.15) !important;
}
.sidebar-header {
background: #111f25 !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
padding: 16px 20px !important;
}
.sidebar-nav a {
color: rgba(255,255,255,.75) !important;
border-radius: var(--adm-radius-sm) !important;
padding: 8px 12px !important;
font-size: .88rem !important;
transition: all .18s ease !important;
}
.sidebar-nav a:hover {
background: rgba(255,255,255,.08) !important;
color: #fff !important;
}
.sidebar-nav li.active > a,
.sidebar-nav a.active {
background: var(--primary-color) !important;
color: #fff !important;
font-weight: 600 !important;
}
.nav-group-header {
color: rgba(255,255,255,.5) !important;
font-size: .72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
padding: 14px 14px 5px !important;
border-radius: 0 !important;
}
.nav-group-header:hover {
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.75) !important;
border-radius: var(--adm-radius-sm) !important;
}
/* Sidebar scrollbar subtle */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
/* ═══════════════════════════════════════════════════
4. ADMIN HEADER (top bar)
═══════════════════════════════════════════════════ */
.admin-header {
background: #fff !important;
border-bottom: 1px solid var(--adm-border) !important;
box-shadow: none !important;
height: 58px !important;
}
.page-title {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--adm-text) !important;
letter-spacing: -.01em !important;
}
/* ═══════════════════════════════════════════════════
5. CARDS — Clean white with subtle border
═══════════════════════════════════════════════════ */
.card,
.admin-table-card,
.ds-section {
background: var(--adm-surface) !important;
border: 1px solid var(--adm-border) !important;
border-radius: var(--adm-radius) !important;
box-shadow: var(--adm-shadow-xs) !important;
transition: box-shadow .2s ease !important;
}
.ds-section {
padding: 18px 22px !important;
margin-bottom: 18px !important;
}
.card:hover {
box-shadow: var(--adm-shadow-sm) !important;
}
.card-header {
background: #fafbfa !important;
border-bottom: 1px solid var(--adm-border) !important;
border-radius: var(--adm-radius) var(--adm-radius) 0 0 !important;
padding: 14px 20px !important;
font-weight: 700 !important;
font-size: .92rem !important;
color: var(--adm-text) !important;
}
.card-body {
padding: 20px !important;
}
/* ═══════════════════════════════════════════════════
6. PAGE HEADER — Clean, not heavy
═══════════════════════════════════════════════════ */
.page-header,
.admin-page-header {
background: #fff !important;
border: 1px solid var(--adm-border) !important;
border-radius: var(--adm-radius) !important;
padding: 16px 22px !important;
margin-bottom: 20px !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
/* ═══════════════════════════════════════════════════
7. TABLES — Clean modern style
═══════════════════════════════════════════════════ */
.table {
font-size: .9rem !important;
border-color: var(--adm-border) !important;
margin-bottom: 0 !important;
}
.table thead th {
background: #f9fafb !important;
color: #374151 !important;
font-weight: 700 !important;
font-size: .78rem !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
border-bottom: 2px solid var(--adm-border) !important;
padding: 10px 14px !important;
white-space: nowrap !important;
}
.table tbody td {
padding: 11px 14px !important;
vertical-align: middle !important;
border-color: #f3f4f6 !important;
color: #374151 !important;
}
.table-hover tbody tr:hover td {
background: color-mix(in srgb, var(--primary-color,#1a5f2a) 6%, white) !important;
}
.table tbody tr:last-child td {
border-bottom: none !important;
}
/* ═══════════════════════════════════════════════════
8. BUTTONS — Modern flat style
═══════════════════════════════════════════════════ */
.btn {
border-radius: var(--adm-radius-sm) !important;
font-weight: 600 !important;
font-size: .84rem !important;
padding: 7px 16px !important;
transition: all .18s ease !important;
border-width: 1.5px !important;
}
.btn-primary {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
.btn-primary:hover {
background: var(--primary-dark) !important;
border-color: var(--primary-dark) !important;
box-shadow: 0 3px 8px rgba(var(--primary-rgb,26,95,42),.25) !important;
transform: translateY(-1px) !important;
}
.btn-sm {
padding: 4px 10px !important;
font-size: .8rem !important;
border-radius: 6px !important;
}
.btn-outline-primary {
color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
.btn-outline-primary:hover {
background: var(--primary-color) !important;
color: #fff !important;
}
/* Action button group */
.btn-group-action {
display: flex;
gap: 4px;
flex-wrap: nowrap;
}
.btn-group-action .btn {
padding: 4px 10px !important;
font-size: .78rem !important;
}
/* ═══════════════════════════════════════════════════
9. FORM CONTROLS — Clean modern inputs
═══════════════════════════════════════════════════ */
.form-control,
.form-select {
border-radius: 10px !important;
border: 1.5px solid #d1d5db !important;
font-size: .9rem !important;
padding: 10px 14px !important;
transition: border-color .18s, box-shadow .18s !important;
background-color: #fff !important;
min-height: 44px !important;
line-height: 1.4 !important;
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.12) !important;
outline: none !important;
}
.form-label {
font-weight: 600 !important;
font-size: .87rem !important;
color: #374151 !important;
margin-bottom: 5px !important;
}
.form-text {
font-size: .8rem !important;
color: var(--adm-muted) !important;
margin-top: 4px !important;
}
/* ═══════════════════════════════════════════════════
10. ALERTS — Soft modern style
═══════════════════════════════════════════════════ */
.alert {
border-radius: var(--adm-radius-sm) !important;
border-left-width: 4px !important;
border-top-width: 1px !important;
border-right-width: 1px !important;
border-bottom-width: 1px !important;
padding: 12px 16px !important;
font-size: .9rem !important;
font-weight: 500 !important;
}
.alert-success {
background: var(--adm-success-bg) !important;
border-color: #86efac !important;
border-left-color: #16a34a !important;
color: #14532d !important;
}
.alert-danger {
background: var(--adm-danger-bg) !important;
border-color: #fca5a5 !important;
border-left-color: #dc2626 !important;
color: #7f1d1d !important;
}
.alert-warning {
background: var(--adm-warn-bg) !important;
border-color: #fde68a !important;
border-left-color: #d97706 !important;
color: #78350f !important;
}
.alert-info {
background: var(--adm-info-bg) !important;
border-color: #bfdbfe !important;
border-left-color: var(--secondary-color,#c0392b) !important;
color: var(--secondary-dark,#922b21) !important;
}
/* ═══════════════════════════════════════════════════
11. BADGES — Soft modern
═══════════════════════════════════════════════════ */
.badge {
border-radius: 6px !important;
font-weight: 600 !important;
font-size: .72rem !important;
padding: 3px 8px !important;
letter-spacing: .02em !important;
}
/* Soft badge variants */
.badge-soft-success { background:#dcfce7; color:#15803d; }
.badge-soft-danger { background:#fee2e2; color:#dc2626; }
.badge-soft-warning { background:#fef9c3; color:#a16207; }
.badge-soft-info { background:#fef2f2; color:var(--secondary-dark,#922b21); }
.badge-soft-primary { background:#d1fae5; color:#065f46; }
.badge-soft-muted { background:#f3f4f6; color:#4b5563; }
/* ═══════════════════════════════════════════════════
12. TABS — Modern underline style
═══════════════════════════════════════════════════ */
.nav-tabs {
border-bottom: 2px solid var(--adm-border) !important;
gap: 4px !important;
}
.nav-tabs .nav-link {
border: none !important;
border-bottom: 3px solid transparent !important;
border-radius: 0 !important;
padding: 10px 18px !important;
font-weight: 600 !important;
font-size: .9rem !important;
color: var(--adm-muted) !important;
transition: color .15s !important;
margin-bottom: -2px !important;
}
.nav-tabs .nav-link:hover {
color: var(--primary-color) !important;
border-bottom-color: rgba(var(--primary-rgb,26,95,42),.3) !important;
background: transparent !important;
}
.nav-tabs .nav-link.active {
color: var(--primary-color) !important;
border-bottom-color: var(--primary-color) !important;
background: transparent !important;
font-weight: 700 !important;
}
/* ═══════════════════════════════════════════════════
13. PAGINATION — Clean
═══════════════════════════════════════════════════ */
.pagination .page-link {
border-radius: 6px !important;
margin: 0 2px !important;
border-color: var(--adm-border) !important;
color: var(--adm-text) !important;
font-size: .88rem !important;
padding: 6px 12px !important;
}
.pagination .page-item.active .page-link {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
/* ═══════════════════════════════════════════════════
14. HELP TIP BOX — Non-developer guidance
═══════════════════════════════════════════════════ */
.admin-help-tip {
background: color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, white);
border: 1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 30%, white);
border-left: 4px solid var(--primary-color);
border-radius: var(--adm-radius-sm);
padding: 12px 16px;
margin-bottom: 18px;
font-size: .88rem;
color: var(--primary-dark,#0a4a25);
display: flex;
gap: 10px;
align-items: flex-start;
}
.admin-help-tip .help-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
background: var(--primary-color,#1a5f2a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: .7rem;
margin-top: 1px;
}
.admin-help-tip ul { margin: 6px 0 0 0; padding-left: 18px; }
.admin-help-tip ul li { margin-bottom: 3px; }
/* ═══════════════════════════════════════════════════
15. STAT CARDS (Dashboard)
═══════════════════════════════════════════════════ */
.ds-card {
border-radius: var(--adm-radius) !important;
border: 1px solid var(--adm-border) !important;
box-shadow: var(--adm-shadow-xs) !important;
transition: all .2s ease !important;
}
.ds-card:hover {
border-color: var(--primary-color) !important;
box-shadow: var(--adm-shadow-sm) !important;
transform: translateY(-2px) !important;
}
/* ═══════════════════════════════════════════════════
16. MODAL — Cleaner dialogs
═══════════════════════════════════════════════════ */
.modal-content {
border-radius: var(--adm-radius) !important;
border: none !important;
box-shadow: var(--adm-shadow-md) !important;
}
.modal-header {
background: #fafbfa !important;
border-bottom: 1px solid var(--adm-border) !important;
border-radius: var(--adm-radius) var(--adm-radius) 0 0 !important;
padding: 16px 20px !important;
}
.modal-footer {
border-top: 1px solid var(--adm-border) !important;
padding: 14px 20px !important;
}
/* ═══════════════════════════════════════════════════
17. EMPTY STATE
═══════════════════════════════════════════════════ */
.empty-state {
text-align: center;
padding: 50px 20px;
color: var(--adm-muted);
}
.empty-state i {
font-size: 2.5rem;
opacity: .3;
margin-bottom: 12px;
display: block;
}
.empty-state p {
font-size: .95rem;
margin-bottom: 16px;
}
/* ═══════════════════════════════════════════════════
18. CONTENT AREA SPACING
═══════════════════════════════════════════════════ */
.page-content {
padding: 20px 22px !important;
}
@media (max-width: 768px) {
.page-content { padding: 14px 14px !important; }
.card-body { padding: 16px !important; }
}
/* ═══════════════════════════════════════════════════
19. SCROLLBAR — subtle global style
═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
/* ═══════════════════════════════════════════════════
20. MISC — Small polish
═══════════════════════════════════════════════════ */
/* Remove focus outline on non-keyboard elements */
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
/* Input group */
.input-group-text {
background: #f9fafb !important;
border-color: #d1d5db !important;
border-radius: var(--adm-radius-sm) !important;
color: #6b7280 !important;
}
/* Divider */
hr { border-color: var(--adm-border) !important; opacity: 1 !important; }
/* Table responsive wrapper — no extra border */
.table-responsive { border: none !important; }
/* Select2 / custom dropdowns */
.select2-container--bootstrap-5 .select2-selection {
border-radius: var(--adm-radius-sm) !important;
}
/* Flash message auto-dismiss animation */
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.alert { animation: fadeSlideIn .25s ease; }
/* ── Desktop: topbar-brand hidden (sidebar already shows logo) ─────────
On mobile (<992px) the sidebar slides off-screen, so the topbar-brand
remains the only visible logo — keep it visible there. ── */
@media (min-width: 992px) {
.admin-topbar-brand { display: none !important; }
}
/* ═══════════════════════════════════════════════════
21. CLEAN FORM MODE (v1.1)
Reduce clutter and improve readability across admin forms.
═══════════════════════════════════════════════════ */
.main-content {
background: #f6f8f7 !important;
}
.content-area,
.admin-content,
.container-fluid {
max-width: 100% !important;
}
.card,
.admin-table-card,
.admin-form-page .card,
.tab-content > .tab-pane > .card {
border-radius: 10px !important;
border: 1px solid #dfe5e1 !important;
box-shadow: none !important;
}
.card-header,
.gradient-card-header,
.tab-content .card > .card-header {
background: #f8faf9 !important;
color: #1f2937 !important;
border-bottom: 1px solid #e3e8e5 !important;
}
.card-header[style*="linear-gradient"],
.card-header[style*="var(--primary-color)"] {
background: #f8faf9 !important;
color: #1f2937 !important;
}
/* admin.css: .main-content .card > .card-header * { color:#fff } — हल्का हेडरमा टेक्स्ट/आइकन लुक्छ */
.main-content .card > .card-header * {
color: inherit !important;
}
.table-col-header,
.table thead,
.table thead th {
background: #f4f7f5 !important;
color: #1f2937 !important;
border-color: #dfe5e1 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 0.84rem !important;
}
.nav-tabs,
.admin-nav-tabs {
border-bottom: none !important;
gap: 8px !important;
margin-bottom: 12px !important;
flex-wrap: wrap !important;
}
.nav-tabs .nav-link,
.admin-nav-tabs .nav-link {
border: 1px solid #d7dfda !important;
border-radius: 8px !important;
margin-bottom: 0 !important;
padding: 9px 14px !important;
background: #ffffff !important;
color: #374151 !important;
font-weight: 600 !important;
}
.nav-tabs .nav-link:hover,
.admin-nav-tabs .nav-link:hover {
background: color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, white) !important;
border-color: color-mix(in srgb, var(--primary-color,#1a5f2a) 35%, white) !important;
color: var(--primary-dark, #0a4a25) !important;
}
.nav-tabs .nav-link.active,
.admin-nav-tabs .nav-link.active {
background: color-mix(in srgb, var(--primary-color,#1a5f2a) 14%, white) !important;
border-color: color-mix(in srgb, var(--primary-color,#1a5f2a) 55%, white) !important;
color: var(--primary-dark, var(--primary-color, #0a4a25)) !important;
box-shadow: none !important;
}
.form-label {
font-size: 0.92rem !important;
font-weight: 700 !important;
color: #253238 !important;
}
.form-control,
.form-select,
textarea.form-control {
min-height: 46px !important;
font-size: 0.96rem !important;
padding: 11px 13px !important;
border: 1px solid #cfd8d3 !important;
border-radius: 8px !important;
box-shadow: none !important;
}
textarea.form-control {
min-height: 120px !important;
line-height: 1.45 !important;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
border-color: var(--primary-color, #2f8f55) !important;
box-shadow: 0 0 0 2px rgba(var(--primary-rgb,26,95,42), 0.12) !important;
}
.row.g-2 > [class*="col-"],
.row.g-3 > [class*="col-"],
.row.g-4 > [class*="col-"] {
margin-bottom: 2px !important;
}
.card-body {
padding: 18px !important;
}
.btn {
border-radius: 8px !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
box-shadow: none !important;
transform: none !important;
}
.btn-primary,
.btn-success {
background: var(--primary-color, #1f7a46) !important;
border-color: var(--primary-color, #1f7a46) !important;
}
.btn-primary:hover,
.btn-success:hover {
background: var(--primary-dark, #176238) !important;
border-color: var(--primary-dark, #176238) !important;
}
.btn-outline-danger {
border-color: #f1b3b3 !important;
color: #b42323 !important;
}
.d-flex.gap-3,
.d-flex.gap-2 {
flex-wrap: wrap !important;
}
/* Shared helper classes from admin-ui.php */
.admin-page-subtitle-text {
font-style: normal !important;
font-size: 0.86rem !important;
color: #5b6770 !important;
}
.admin-page-header small,
.admin-page-header .text-muted,
.admin-page-header .admin-page-subtitle-text,
.admin-page-header p {
color: #5b6770 !important;
opacity: 1 !important;
}
.admin-page-header i:not(.btn i):not(.badge i) {
color: var(--primary-color, #1f7a46) !important;
}
.admin-page-header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
margin-right: 10px;
background: linear-gradient(135deg, #eef8f1, #dff1e5);
color: #166534;
border: 1px solid #b9d9c4;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.admin-icon-btn {
min-width: 34px !important;
height: 32px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.admin-action-group .btn {
min-height: 32px !important;
}
/* Uniform form wrappers used by many pages */
.admin-form-page .card,
.admin-section-card,
.admin-table-card {
overflow: hidden !important;
}
.admin-form-page .card .card-header h4,
.admin-form-page .card .card-header h5,
.admin-form-page .card .card-header h6,
.admin-section-card .card-header h6,
.admin-table-card .card-header h5 {
font-size: 0.93rem !important;
font-weight: 700 !important;
color: #1f2937 !important;
}
/* Consistent table paddings and row height in all admin list pages */
.admin-table-card .table td,
.admin-table-card .table th,
.card .table td,
.card .table th {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* ─────────────────────────────────────────────────────────────
22. Sidebar minimal/simple mode
───────────────────────────────────────────────────────────── */
.sidebar {
background: #143126 !important;
box-shadow: none !important;
border-right: 1px solid rgba(255,255,255,.08) !important;
}
.sidebar-header {
background: #11291f !important;
box-shadow: none !important;
}
.sidebar .nav-icon-wrap {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
transform: none !important;
}
.sidebar-nav a {
border-radius: 6px !important;
font-weight: 500 !important;
padding: 7px 10px !important;
}
.sidebar-nav li.active > a,
.sidebar-nav a.active {
background: rgba(255,255,255,0.16) !important;
border-left: 3px solid #9fdbb7 !important;
padding-left: 9px !important;
}
.nav-group-header {
background: transparent !important;
border-radius: 6px !important;
font-size: .78rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Sidebar global simplification: clean tones + separators */
.sidebar {
background: #123327 !important;
}
.sidebar-header {
background: #102b21 !important;
border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
.sidebar-nav > ul > li > a,
.sidebar-nav .nav-submenu > li > a,
.sidebar-nav .nav-group-header {
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.sidebar-nav > ul > li:last-child > a {
border-bottom: 0 !important;
}
.sidebar-nav .nav-submenu > li:last-child > a {
border-bottom: 0 !important;
}
.sidebar-nav a {
color: rgba(255,255,255,.86) !important;
}
.sidebar-nav a:hover,
.sidebar-nav .nav-group-header:hover {
background: rgba(255,255,255,.07) !important;
color: #ffffff !important;
}
.sidebar-nav li.active > a,
.sidebar-nav a.active {
background: rgba(255,255,255,.15) !important;
border-left: 3px solid #b8e9ca !important;
color: #ffffff !important;
}
.sidebar .nav-icon-wrap i,
.sidebar .nav-group-icon i,
.sidebar .nav-submenu i,
.sidebar-nav a i {
color: rgba(255,255,255,.86) !important;
}
.sidebar .group-badge,
.sidebar .badge {
background: rgba(255,255,255,.2) !important;
color: #fff !important;
}
.sidebar-link-flex {
display: flex;
align-items: center;
}
.sidebar-link-label {
flex: 1;
}
.sa-mini-badge {
background: #dc3545;
color: #fff;
font-size: 0.58rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 7px;
margin-left: 4px;
}
.nav-icon-accent.nav-icon-gold { color: #f59e0b !important; }
.nav-icon-accent.nav-icon-primary-soft { color: #86efac !important; }
.nav-icon-accent.nav-icon-cyan { color: #22d3ee !important; }
.nav-icon-accent.nav-icon-purple { color: #c4b5fd !important; }
.nav-icon-accent.nav-icon-primary { color: #86efac !important; }
.nav-icon-accent.nav-icon-amber { color: #fbbf24 !important; }
.nav-icon-accent.nav-icon-violet { color: #c4b5fd !important; }
.nav-icon-accent.nav-icon-pink { color: #f9a8d4 !important; }
.nav-icon-accent.nav-icon-red { color: #f87171 !important; }
.nav-icon-accent.nav-icon-green { color: #4ade80 !important; }
.sidebar-user-avatar-media {
overflow: hidden;
}
.sidebar-user-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar-user-fallback-icon {
font-size: 0.7rem;
}
.sidebar-user-meta {
flex: 1;
min-width: 0;
overflow: hidden;
}
.sidebar-user-name {
font-weight: 600;
font-size: 0.78rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(255,255,255,0.9);
}
.sidebar-user-role {
font-size: 0.65rem;
color: rgba(255,255,255,0.5);
}
.sidebar-strip-logout {
color: rgba(255,255,255,0.45) !important;
font-size: 0.8rem;
transition: color 0.15s;
}
.sidebar-strip-logout:hover {
color: #f87171 !important;
}
.notif-wrapper {
position: relative;
}
.notif-dropdown {
display: none;
}
.admin-name-inline {
display: inline-flex;
align-items: center;
gap: 8px;
}
.admin-avatar-sm {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #d1e7d9;
}
.superadmin-pill {
background: #dc3545;
color: #fff;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.5px;
padding: 2px 7px;
border-radius: 10px;
vertical-align: middle;
margin-left: 5px;
}
.notif-item-icon.notif-tone-red { background: rgba(220,53,69,.15); color: #dc3545; }
.notif-item-icon.notif-tone-orange { background: rgba(253,126,20,.15); color: #fd7e14; }
.notif-item-icon.notif-tone-amber { background: rgba(245,158,11,.18); color: #d97706; }
.notif-item-icon.notif-tone-purple { background: rgba(111,66,193,.15); color: #6f42c1; }
.notif-item-icon.notif-tone-cyan { background: rgba(13,202,240,.16); color: #0891b2; }
.notif-item-icon.notif-tone-green { background: rgba(25,135,84,.15); color: #198754; }
.notif-item-icon.notif-tone-teal { background: rgba(32,201,151,.15); color: #0f766e; }
.notif-item-icon.notif-tone-slate { background: rgba(108,117,125,.15); color: #475569; }
.notif-item-icon.notif-tone-blue { background: rgba(13,110,253,.15); color: #0d6efd; }
.notif-item-count.notif-tone-bg-red { background: #dc3545; }
.notif-item-count.notif-tone-bg-orange { background: #fd7e14; }
.notif-item-count.notif-tone-bg-amber { background: #d97706; }
.notif-item-count.notif-tone-bg-purple { background: #6f42c1; }
.notif-item-count.notif-tone-bg-cyan { background: #0891b2; }
.notif-item-count.notif-tone-bg-green { background: #198754; }
.notif-item-count.notif-tone-bg-teal { background: #0f766e; }
.notif-item-count.notif-tone-bg-slate { background: #475569; }
.notif-item-count.notif-tone-bg-blue { background: #0d6efd; }
/* Staff page inline-style cleanup classes */
.stf-page-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.stf-title {
margin: 0;
color: var(--primary-color);
}
.stf-subtitle {
color: var(--text-muted);
margin: 6px 0 0;
}
.stf-card-table-wrap {
padding: 0;
overflow: hidden;
}
.stf-table {
font-family: var(--font-primary);
}
.stf-soft-head {
background: var(--bg-soft);
}
.stf-align-right {
text-align: right;
}
.stf-status-dot {
font-weight: 600;
}
.stf-status-active {
color: var(--color-success);
}
.stf-status-inactive {
color: var(--color-danger);
}
.stf-inline-form {
display: inline;
}
.stf-self-note {
color: var(--text-muted);
}
.stf-mt24 {
margin-top: 24px;
}
.stf-section-title {
color: var(--primary-color);
margin-top: 0;
}
.stf-table-no-margin {
margin: 0;
}
.stf-modal-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 9999;
align-items: center;
justify-content: center;
}
.stf-modal-card {
width: 92%;
}
.stf-modal-card-lg {
max-width: 480px;
}
.stf-modal-card-sm {
max-width: 420px;
}
.stf-grid-gap {
display: grid;
gap: 12px;
}
.stf-muted-note {
color: var(--text-muted);
}
.stf-actions-row {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.stf-actions-row-lg {
margin-top: 18px;
}
.stf-actions-row-sm {
margin-top: 14px;
}
/* Members page class-based style cleanup */
.mem-avatar-lg {
width: 80px;
height: 80px;
object-fit: cover;
border: 3px solid var(--primary-color);
}
.mem-avatar-fallback-lg {
width: 80px;
height: 80px;
font-size: 2rem;
font-weight: 700;
}
.mem-badge-google { background: #ea4335; color: #fff; }
.mem-badge-facebook { background: #1877f2; color: #fff; }
.mem-card-secret {
background: linear-gradient(135deg,#fefce8,#fef9c3);
}
.mem-cvv-code {
letter-spacing: .2em;
}
.mem-help-xs {
font-size: .7rem;
}
.mem-service-badge {
background: var(--mem-service-color, #16a34a);
}
.mem-notif-pill {
font-size: .7rem;
padding: 5px 7px;
}
.mem-unread-pill {
font-size: .55rem;
}
.mem-notif-message {
font-size: .78rem;
}
.mem-notif-time {
font-size: .68rem;
}
.mem-filter-kyc { min-width: 150px; }
.mem-filter-search { min-width: 220px; }
.mem-avatar-sm {
width: 32px;
height: 32px;
object-fit: cover;
}
.mem-avatar-fallback-sm {
width: 32px;
height: 32px;
font-size: .9rem;
}
.mem-email-xs {
font-size: .7rem;
}
.mem-kyc-wrap {
margin-top: 2px;
}
.mem-kyc-pill {
font-size: .58rem;
}
.mem-login-pill {
font-size: .65rem;
}
.mem-status-pill {
font-size: .6rem;
margin-top: 2px;
}
/* Dashboard inline-style cleanup classes */
.dash-title-main {
font-size: 1.3rem;
margin: 0;
color: var(--primary-color);
font-weight: 700;
line-height: 1.6;
}
.dash-icon-purple {
background: linear-gradient(135deg,#7c3aed,#a855f7);
}
.dash-muted-block {
color: #6b7280;
}
.dash-empty-icon-lg {
font-size: 2rem;
margin-bottom: 6px;
}
.dash-empty-icon-xl {
font-size: 2.4rem;
margin-bottom: 8px;
}
.dash-log-icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: #dcfce7;
color: #166534;
display: grid;
place-items: center;
flex-shrink: 0;
}
.dash-log-title {
font-weight: 600;
font-size: .9rem;
}
.dash-log-time {
font-size: .75rem;
color: #6b7280;
}
.ds-no-top-gap {
margin-top: 0;
}
.dash-section-title {
margin: 0;
font-size: 1.05rem !important;
font-weight: 700 !important;
line-height: 1.6 !important;
color: var(--primary-color) !important;
}
/* ds-section direct h2 — override global h2 size for admin dashboard sections */
.ds-section > h2 {
font-size: 1.05rem !important;
font-weight: 700 !important;
line-height: 1.6 !important;
color: var(--primary-color) !important;
margin: 0 0 12px 0 !important;
}
.dash-flex-grow {
flex-grow: 1;
min-width: 0;
}
.dash-meta-sm {
font-size: .8rem;
color: #6b7280;
}
.dash-subtitle-row {
font-size: .95rem;
color: var(--primary-color);
margin: 18px 0 8px;
}
.dash-subtitle-lg {
margin: 22px 0 10px;
}
.dash-subtitle-tight {
margin: 0 0 10px;
}
.dash-heart-icon {
color: #e91e63;
}
.dash-val-pending { color: #d97706; }
.dash-val-review { color: #1e40af; }
.dash-val-approved { color: #166534; }
.wf-summary-bar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 0 0 18px;
}
.wf-stat-chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 74px;
padding: 14px 16px;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 16px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
text-decoration: none;
color: #0f172a;
}
.wf-stat-chip:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
text-decoration: none;
}
.wf-stat-chip .val {
font-size: 1.8rem;
line-height: 1;
font-weight: 800;
}
.wf-stat-chip .lbl {
font-size: .9rem;
font-weight: 700;
color: #475569;
}
.wf-stat-icon {
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 46px;
border-radius: 14px;
font-size: 1.05rem;
}
.wf-stat-icon.pending {
background: #fff7ed;
color: #d97706;
}
.wf-stat-icon.review {
background: #eff6ff;
color: #1e40af;
}
.wf-stat-icon.approved {
background: #ecfdf5;
color: #166534;
}
.wf-type-row {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin-bottom: 10px;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 14px;
background: #fff;
}
.wf-type-icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #f1f5f9;
color: var(--primary-color, #198754);
}
.wf-type-name {
min-width: 0;
font-weight: 800;
color: #1f2937;
}
.wf-badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: .28rem .62rem;
font-size: .76rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.wf-badge.pending {
background: #fff7ed;
color: #c2410c;
}
.wf-badge.review {
background: #eff6ff;
color: #1d4ed8;
}
.wf-badge.approved {
background: #ecfdf5;
color: #047857;
}
@media (max-width: 768px) {
.wf-summary-bar {
grid-template-columns: 1fr;
}
.wf-type-row {
grid-template-columns: 42px minmax(0, 1fr);
}
.wf-type-row > .d-flex {
grid-column: 1 / -1;
}
}
.dash-empty-note {
color: #9ca3af;
font-size: .85rem;
}
.dash-type-total {
font-size: .7rem;
font-weight: 400;
color: #6b7280;
}
.dash-empty-note-lg {
color: #6b7280;
font-size: .88rem;
}
.dash-empty-note-md {
color: #6b7280;
font-size: .9rem;
}
.dash-program-title {
font-weight: 600;
font-size: .88rem;
}
.dash-program-meta {
font-size: .75rem;
color: #6b7280;
}
/* Services page inline-style cleanup */
.svc-flat-top-card {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.svc-search-wrap {
flex-wrap: wrap;
}
.svc-search-group {
max-width: 300px;
}
.svc-icon-mark {
color: var(--primary-color);
font-size: 20px;
}
.svc-inline-form {
display: inline;
}
.svc-form-header-grad {
background: linear-gradient(135deg,var(--primary-color),var(--primary-light));
color: var(--text-on-primary);
}
.svc-form-header-grad .btn-light {
background: color-mix(in srgb, var(--text-on-primary) 14%, transparent);
border-color: color-mix(in srgb, var(--text-on-primary) 28%, transparent);
color: var(--text-on-primary);
}
.svc-form-header-grad .btn-light:hover {
background: color-mix(in srgb, var(--text-on-primary) 22%, transparent);
color: var(--text-on-primary);
}
/* Settings page structure cleanup */
.settings-tab-note {
background: #f8faf9 !important;
border-color: #dfe7e2 !important;
color: #475569 !important;
border-radius: 10px !important;
}
.stg-section-card {
overflow: hidden;
}
.stg-section-header {
background: #f8faf9 !important;
border-bottom: 1px solid #e3e8e5 !important;
}
.stg-section-title {
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: #1f2937 !important;
font-size: 0.96rem !important;
font-weight: 700 !important;
}
.stg-section-title i {
color: var(--primary-color) !important;
}
.stg-accent-card {
border-left: 4px solid var(--primary-color) !important;
}
.stg-soft-green-header {
background: linear-gradient(90deg, #f0f9f2, #e8f5e9) !important;
}
.stg-subtabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px;
border: 1px solid #dfe7e2;
border-radius: 10px;
background: #f8faf9;
}
.stg-subtab-btn {
border: 1px solid #d3ddd6;
background: #ffffff;
color: #475569;
border-radius: 999px;
padding: 6px 12px;
font-size: .82rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: all .18s ease;
}
.stg-subtab-btn:hover {
border-color: #a9c2b2;
color: #1f2937;
}
.stg-subtab-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
/* Admin login surface (index.php) */
body.admin-auth-page {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
}
.admin-auth-page .auth-card {
border-top: 4px solid var(--primary-color);
}
.ntf-cursor-pointer {
cursor: pointer;
}
/* News page inline-style cleanup */
.news-thumb-img {
width: 55px;
height: 55px;
object-fit: cover;
border-radius: 10px;
border: 2px solid #e0f0e8;
}
.news-thumb-placeholder {
width: 55px;
height: 55px;
background: linear-gradient(135deg,rgba(26,95,42,.1),rgba(40,167,69,.15));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.news-preview-img {
max-height: 80px;
border-radius: 8px;
border: 2px solid #e0f0e8;
}
/* Analytics page inline-style cleanup */
.anl-progress-md {
height: 8px;
}
.anl-progress-sm {
height: 6px;
min-width: 60px;
}
.anl-table-compact {
font-size: .88rem;
}
.anl-pct-label {
min-width: 36px;
}
/* Appointments / job applications inline-style cleanup */
.apt-track-chip {
font-size: 0.83rem;
background: rgba(255,255,255,0.15);
padding: 2px 10px;
border-radius: 6px;
margin-left: 8px;
}
.apt-text-block {
white-space: pre-wrap;
font-size: 0.9rem;
color: #374151;
}
.apt-text-block-success {
background: #f0fff4;
}
.app-rounded-card {
border-radius: 10px;
overflow: hidden;
}
.apt-track-code {
letter-spacing: 0.4px;
}
.job-icon-interview-bg {
background: linear-gradient(135deg,#64748b20,#64748b10);
}
.job-icon-interview-fg {
color: #64748b;
}
/* Auctions page inline-style cleanup */
.auc-icon-completed-bg {
background: linear-gradient(135deg,#6f42c1,#9b6fe0);
}
.auc-icon-completed-fg {
color: #fff;
}
.auc-badge-xxs {
font-size: .6rem;
}
.auc-badge-xs {
font-size: .7rem;
}
/* Messages page inline-style cleanup */
.msg-info-card {
border-left: 4px solid transparent;
}
.msg-info-sender {
background: linear-gradient(135deg,#f0f7f2,#e8f5e9);
border-left-color: var(--primary-light);
}
.msg-info-email {
background: linear-gradient(135deg,#eff6ff,#dbeafe);
border-left-color: #3b82f6;
}
.msg-info-phone {
background: linear-gradient(135deg,#fff7ed,#fed7aa);
border-left-color: #f97316;
}
.msg-subject-box {
background: #f8f9fa;
border-left: 4px solid var(--primary-color);
}
.msg-body-wrap {
background: linear-gradient(135deg,#f8fdf9,#eef7f0);
border: 1px solid rgba(26,95,42,0.1);
}
.msg-body-text {
line-height: 1.9;
font-size: 1rem;
color: #333;
}
.msg-badge-xxs {
font-size: 0.65rem;
}
.msg-text-clamp {
max-width: 260px;
}
/* Useful links page inline-style cleanup */
.ul-link-clamp {
max-width: 200px;
}
/* Partner facilities / help-center inline-style cleanup */
.pf-search-group {
max-width: 280px;
}
.pf-type-filter {
max-width: 200px;
}
.pf-location-icon {
font-size: .75rem;
}
.pf-type-badge {
background: #e8f5e9;
color: var(--primary-color);
font-weight: 600;
font-size: .78rem;
}
.pf-discount-badge {
font-size: .85rem;
}
.hc-col-order {
width: 60px;
}
.hc-col-actions {
width: 120px;
}
/* Account applications inline-style cleanup */
.acc-doc-thumb {
height: 100px;
object-fit: cover;
width: 100%;
}
.acc-title-icon {
color: #7c3aed;
}
.acc-col-applicant {
width: 200px;
}
.acc-page-meta {
font-size: 0.78rem;
color: #6b7280;
margin-left: 8px;
}
/* Team page — theme tokens only (no hardcoded badge / chip colors) */
.tm-search-wrap {
background: var(--bg-soft) !important;
border-color: var(--border-color) !important;
}
.tm-search-wrap .tm-input-addon {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
}
.tm-search-wrap .search-count {
color: var(--text-muted) !important;
}
.tm-search-ico {
color: var(--text-muted);
}
.tm-tab-count {
background: color-mix(in srgb, var(--primary-color) 85%, var(--primary-dark)) !important;
color: var(--text-on-primary) !important;
font-weight: 600;
}
.tm-stat-badge {
font-weight: 600;
font-size: 0.78rem;
padding: 0.35rem 0.65rem;
border-radius: 999px;
border: 1px solid transparent;
}
.tm-stat-badge--total {
background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-card));
color: var(--primary-color);
border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.tm-stat-badge--active {
background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-card));
color: var(--primary-dark);
border-color: color-mix(in srgb, var(--primary-color) 28%, transparent);
}
.tm-stat-badge--arch {
background: color-mix(in srgb, var(--text-muted) 10%, var(--bg-card));
color: var(--text-secondary);
border-color: var(--border-color);
}
.tm-form-label {
color: var(--primary-color) !important;
}
.tm-req-star {
color: var(--secondary-color);
font-weight: 800;
}
.tm-meta-muted {
color: var(--text-muted) !important;
}
.tm-inline-link {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
}
.tm-inline-link:hover {
color: var(--primary-dark);
text-decoration: underline;
}
.tm-ico-accent {
color: var(--primary-color) !important;
}
.tm-empty-state-ico {
color: color-mix(in srgb, var(--primary-color) 45%, var(--text-muted)) !important;
}
.tm-role-badge {
font-weight: 600;
font-size: 0.72rem;
padding: 0.35rem 0.5rem;
border-radius: 8px;
border: 1px solid transparent;
}
.tm-role-badge--info {
background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-card));
color: var(--primary-color);
border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.tm-role-badge--griev {
background: color-mix(in srgb, var(--secondary-color) 12%, var(--bg-card));
color: var(--secondary-color);
border-color: color-mix(in srgb, var(--secondary-color) 28%, transparent);
}
.tm-status--on {
background: var(--primary-color) !important;
color: var(--text-on-primary) !important;
}
.tm-status--off {
background: color-mix(in srgb, var(--text-muted) 12%, var(--bg-card)) !important;
color: var(--text-muted) !important;
border: 1px solid var(--border-color) !important;
}
.tm-btn-edit {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: var(--text-on-primary) !important;
}
.tm-btn-edit:hover {
background: var(--primary-dark) !important;
border-color: var(--primary-dark) !important;
color: var(--text-on-primary) !important;
}
.tm-btn-del {
border-color: color-mix(in srgb, var(--secondary-color) 55%, var(--border-color)) !important;
color: var(--secondary-color) !important;
}
.tm-btn-del:hover {
background: color-mix(in srgb, var(--secondary-color) 10%, var(--bg-card)) !important;
color: var(--secondary-dark) !important;
}
.tm-btn-submit {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: var(--text-on-primary) !important;
}
.tm-btn-submit:hover {
background: var(--primary-dark) !important;
border-color: var(--primary-dark) !important;
color: var(--text-on-primary) !important;
}
.tm-btn-cancel {
border-color: var(--border-color) !important;
color: var(--text-secondary) !important;
background: var(--bg-card) !important;
}
.tm-btn-cancel:hover {
border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)) !important;
color: var(--primary-dark) !important;
background: var(--bg-soft) !important;
}
.tm-avatar-photo {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color));
}
.tm-avatar-fallback {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(var(--primary-rgb), 0.22));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.tm-cat-badge {
font-weight: 600;
font-size: .78rem;
padding: 5px 10px;
--tm-cat: var(--primary-color);
background: color-mix(in srgb, var(--tm-cat) 16%, var(--bg-card));
color: var(--tm-cat);
border: 1px solid color-mix(in srgb, var(--tm-cat) 32%, transparent);
}
.tm-status-toggle-btn {
cursor: pointer;
}
.tm-note-xs {
font-size: .72rem;
line-height: 1.35;
}
.tm-photo-preview {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color));
}
/* Committees page inline-style cleanup */
.cmt-flat-top-card {
border-top-left-radius: 0 !important;
}
.cmt-header-green {
background: linear-gradient(135deg,var(--primary-color),var(--primary-light));
color: #fff;
}
.cmt-header-blue {
background: linear-gradient(135deg,#0c4da2,#1a73e8);
color: #fff;
}
.cmt-header-cyan {
background: linear-gradient(135deg,#1565c0,#0288d1);
color: #fff;
}
.cmt-top-border-green {
border-top: 3px solid var(--primary-light);
}
.cmt-top-border-blue {
border-top: 3px solid #1a73e8;
}
.cmt-top-border-cyan {
border-top: 3px solid #0288d1;
}
.cmt-mem-avatar {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 50%;
border: 2px solid #dee2e6;
}
.cmt-mem-avatar-fallback {
width: 48px;
height: 48px;
background: #e9ecef;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cmt-preview-img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
}
.cmt-preview-img-cyan {
border: 2px solid #0288d1;
}
.cmt-preview-img-green {
border: 2px solid var(--primary-light);
}
/* Loan / KYC inline-style cleanup */
.loan-stat-static {
cursor: default;
}
.loan-stat-amount {
font-size: 1.1rem;
}
.kyc-photo-main {
max-height: 160px;
border-radius: 8px;
}
.kyc-id-requested {
background: var(--primary-color);
font-size: .8rem;
}
.kyc-id-not-requested {
font-size: .85rem;
}
.kyc-doc-thumb {
height: 110px;
object-fit: cover;
width: 100%;
}
.kyc-col-relation {
width: 28%;
}
.kyc-col-phone {
width: 24%;
}
.kyc-sm-icon-muted {
background: #e5e7eb;
color: #334155;
}
.kyc-rounded-card {
border-radius: 10px;
}
.kyc-list-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
/* ─────────────────────────────────────────────────────────────
23. Strict form layout:
Desktop max 2 columns, mobile strict 1 column
───────────────────────────────────────────────────────────── */
.admin-form-page form .row > [class*="col-"],
form.kyc-form .row > [class*="col-"],
.tab-pane form .row > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
@media (min-width: 992px) {
.admin-form-page form .row > [class*="col-"],
.tab-pane form .row > [class*="col-"] {
width: 50% !important;
max-width: 50% !important;
flex: 0 0 50% !important;
}
.admin-form-page form .row > .col-12,
.admin-form-page form .row > .col-lg-12,
.admin-form-page form .row > .col-md-12,
.tab-pane form .row > .col-12,
.tab-pane form .row > .col-lg-12,
.tab-pane form .row > .col-md-12 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
/* तालिका/लिस्ट भएको कलम — 50% मा नछोपियोस् */
.tab-pane form .row > [class*="col-"]:has(.table-responsive),
.tab-pane form .row > [class*="col-"]:has(table),
.tab-pane form .row > [class*="col-"]:has(.admin-table-card) {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
}
@media (max-width: 991.98px) {
.admin-form-page form .row > [class*="col-"],
.tab-pane form .row > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
}
/* ─────────────────────────────────────────────────────────────
24. Neutral buttons:
keep only primary + danger color emphasis
───────────────────────────────────────────────────────────── */
.btn-success,
.btn-info,
.btn-warning,
.btn-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-secondary,
.btn-outline-primary {
background: #ffffff !important;
color: #1f2937 !important;
border-color: #cfd8d3 !important;
}
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover {
background: #f3f6f4 !important;
color: #111827 !important;
border-color: #b8c7be !important;
}
.btn-primary {
background: #1f7a46 !important;
border-color: #1f7a46 !important;
color: #fff !important;
}
.btn-primary:hover {
background: #176238 !important;
border-color: #176238 !important;
}
.btn-danger,
.btn-outline-danger {
color: #b42323 !important;
border-color: #e3aaaa !important;
}
.btn-danger {
background: #fbecec !important;
}
.btn-danger:hover,
.btn-outline-danger:hover {
background: #f7dede !important;
border-color: #d99191 !important;
color: #962222 !important;
}
/* ─────────────────────────────────────────────────────────────
25. Force plain table header colors (no gradients)
───────────────────────────────────────────────────────────── */
.main-content table thead th,
.main-content .table thead th,
.main-content .admin-table-card table thead th,
.main-content .admin-table-card .table thead th,
.main-content .card .table thead th,
.main-content .card .table-responsive .table thead th,
.main-content .data-table thead th,
.main-content .table-col-header th {
background: #f0f4f2 !important;
color: #1f2937 !important;
border-color: #d1d5db !important;
border-bottom: 2px solid #c7cdd4 !important;
font-weight: 700 !important;
}
/* clearer table grid lines */
.main-content .admin-table-card .table th,
.main-content .admin-table-card .table td {
border-bottom: 1px solid #d1d5db !important;
}
.main-content .admin-table-card .table th:not(:last-child),
.main-content .admin-table-card .table td:not(:last-child) {
border-right: 1px solid #d8dde3 !important;
}
/* action button color tune: edit (blue), delete (red) */
.main-content .admin-table-card td .btn-outline-primary,
.main-content .admin-table-card td .btn-edit-svc {
background: transparent !important;
border-color: transparent !important;
color: #1d4ed8 !important;
box-shadow: none !important;
padding: 0 !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
border-radius: 6px !important;
}
.main-content .admin-table-card td .btn-outline-primary:hover,
.main-content .admin-table-card td .btn-edit-svc:hover {
background: #eaf1ff !important;
border-color: #eaf1ff !important;
color: #1e40af !important;
}
.main-content .admin-table-card td .btn-outline-danger {
background: transparent !important;
border-color: transparent !important;
color: #be123c !important;
box-shadow: none !important;
padding: 0 !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
border-radius: 6px !important;
}
.main-content .admin-table-card td .btn-outline-danger:hover {
background: #ffecef !important;
border-color: #ffecef !important;
color: #9f1239 !important;
}
/* Stronger visual separators for header row */
.main-content .admin-table-card .table thead th {
border-top: 1px solid #e5e7eb !important;
border-bottom: 2px solid #c3cad3 !important;
}
.main-content .admin-table-card .table thead th:not(:last-child) {
border-right: 1px solid #cfd6df !important;
}
/* extra-strong grid for all admin tables */
.main-content .table {
border-collapse: collapse !important;
}
.main-content .table > :not(caption) > * > * {
border-color: #d2d8e0 !important;
}
.main-content .table tbody tr + tr td {
border-top: 1px solid #d2d8e0 !important;
}
/* full cell grid on all admin tables (vertical + horizontal) */
.main-content .table thead th,
.main-content .table tbody td,
.main-content .table tfoot td,
.main-content .table tfoot th {
border-right: 1px solid #d2d8e0 !important;
border-bottom: 1px solid #d2d8e0 !important;
}
.main-content .table thead th:first-child,
.main-content .table tbody td:first-child,
.main-content .table tfoot td:first-child,
.main-content .table tfoot th:first-child {
border-left: 1px solid #d2d8e0 !important;
}
.main-content .table thead th {
border-top: 1px solid #d2d8e0 !important;
}
/* ensure all admin table cards and lower tables stay full-width + same header */
.main-content .admin-table-card,
.main-content .card.admin-table-card,
.main-content .admin-table-card .table-responsive,
.main-content .admin-table-card .table {
width: 100% !important;
}
.main-content .table-responsive,
.tab-content .table-responsive {
width: 100% !important;
max-width: 100% !important;
}
.main-content .table,
.tab-content .table,
.main-content table.dataTable {
width: 100% !important;
}
.main-content .dataTables_wrapper {
width: 100% !important;
max-width: 100% !important;
}
.main-content .gradient-card-header,
.main-content .card-header-gradient,
.main-content .admin-card-header-green,
.main-content .admin-table-card .card-header {
background: #f8faf9 !important;
color: #1f2937 !important;
border-bottom: 1px solid #e3e8e5 !important;
}
.main-content .gradient-card-header h4,
.main-content .gradient-card-header h5,
.main-content .gradient-card-header h6,
.main-content .card-header-gradient h4,
.main-content .card-header-gradient h5,
.main-content .card-header-gradient h6,
.main-content .admin-card-header-green h4,
.main-content .admin-card-header-green h5,
.main-content .admin-card-header-green h6 {
color: #1f2937 !important;
}
/* ─────────────────────────────────────────────────────────────
27. Nav-pills visibility fix (always readable, not white-washed)
───────────────────────────────────────────────────────────── */
.main-content .nav-pills .nav-link {
background: #f3f4f6 !important;
color: #1f2937 !important;
border: 1px solid #d7dde5 !important;
border-radius: 8px !important;
font-weight: 600 !important;
opacity: 1 !important;
}
.main-content .nav-pills .nav-link:hover {
background: #e8edf3 !important;
color: #111827 !important;
border-color: #c8d0da !important;
}
.main-content .nav-pills .nav-link.active,
.main-content .nav-pills .show > .nav-link {
background: #1f7a46 !important;
color: #ffffff !important;
border-color: #1f7a46 !important;
}
.main-content .nav-pills .nav-link .badge {
background: #e5e7eb !important;
color: #1f2937 !important;
border: 1px solid #d1d5db !important;
}
.main-content .nav-pills .nav-link.active .badge,
.main-content .nav-pills .show > .nav-link .badge {
background: rgba(255,255,255,0.22) !important;
color: #ffffff !important;
border-color: rgba(255,255,255,0.28) !important;
}
/* भित्रको उप-ट्याब — ब्रान्ड ट्रे + सेतो सक्रिय (Member Online Portal / सूची उप-ट्याब) */
.main-content ul.nav.nav-pills.admin-inner-tabstrip {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
border-radius: 10px !important;
border: none !important;
}
.main-content ul.nav.admin-inner-tabstrip .nav-item {
margin: 0;
}
.main-content ul.nav.admin-inner-tabstrip .nav-link {
background: transparent !important;
color: color-mix(in srgb, var(--text-on-primary) 94%, transparent) !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 0.82rem !important;
padding: 0.42rem 0.9rem !important;
opacity: 1 !important;
}
.main-content ul.nav.admin-inner-tabstrip .nav-link:hover {
background: color-mix(in srgb, var(--text-on-primary) 14%, transparent) !important;
color: var(--text-on-primary) !important;
border-color: transparent !important;
}
.main-content ul.nav.admin-inner-tabstrip .nav-link.active,
.main-content ul.nav.admin-inner-tabstrip .show > .nav-link {
background: var(--bg-card) !important;
color: var(--text-primary) !important;
border-color: transparent !important;
box-shadow: 0 1px 4px rgba(var(--primary-rgb), 0.12) !important;
}
.main-content ul.nav.admin-inner-tabstrip .nav-link .badge.adm-subpill-count {
font-weight: 700 !important;
font-size: 0.72rem !important;
padding: 0.2rem 0.45rem !important;
border-radius: 999px !important;
}
/* Inactive tab (on brand strip): soft pill counts */
.main-content ul.nav.admin-inner-tabstrip .nav-link:not(.active) .adm-subpill-count {
background: color-mix(in srgb, var(--text-on-primary) 18%, transparent) !important;
color: var(--text-on-primary) !important;
border: 1px solid color-mix(in srgb, var(--text-on-primary) 28%, transparent) !important;
}
.main-content ul.nav.admin-inner-tabstrip .nav-link:not(.active) .adm-subpill-count--live {
background: color-mix(in srgb, var(--text-on-primary) 22%, transparent) !important;
}
.main-content ul.nav.admin-inner-tabstrip .nav-link:not(.active) .adm-subpill-count--arch {
background: color-mix(in srgb, var(--text-on-primary) 14%, transparent) !important;
}
/* Active tab (white chip): counts use brand / muted tokens */
.main-content ul.nav.admin-inner-tabstrip .nav-link.active .adm-subpill-count--live,
.main-content ul.nav.admin-inner-tabstrip .show > .nav-link .adm-subpill-count--live {
background: color-mix(in srgb, var(--primary-color) 16%, var(--bg-card)) !important;
color: var(--primary-dark) !important;
border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent) !important;
}
.main-content ul.nav.admin-inner-tabstrip .nav-link.active .adm-subpill-count--arch,
.main-content ul.nav.admin-inner-tabstrip .show > .nav-link .adm-subpill-count--arch {
background: color-mix(in srgb, var(--text-muted) 12%, var(--bg-card)) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-color) !important;
}
.main-content .admin-inner-tabstrip-tray {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 6px;
box-shadow: 0 5px 15px rgba(15, 23, 42, 0.04);
}
.main-content .admin-inner-tabstrip-tray .btn {
font-weight: 700;
font-size: 0.85rem;
border-radius: 8px !important;
padding: 9px 14px !important;
line-height: 1;
transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.main-content .admin-inner-tabstrip-tray .btn.btn-outline-success,
.main-content .admin-inner-tabstrip-tray .btn.btn-success {
color: #334155 !important;
background: transparent !important;
border: 1px solid transparent !important;
}
.main-content .admin-inner-tabstrip-tray .btn.btn-outline-success:hover,
.main-content .admin-inner-tabstrip-tray .btn.btn-success:hover {
background: #ecfdf5 !important;
color: var(--primary-color, #1a5f2a) !important;
border-color: transparent !important;
}
.main-content .admin-inner-tabstrip-tray .btn.btn-success.active,
.main-content .admin-inner-tabstrip-tray .btn.btn-outline-success.active {
background: var(--primary-color, #1a5f2a) !important;
color: #ffffff !important;
border: 1px solid var(--primary-color, #1a5f2a) !important;
box-shadow: 0 4px 10px rgba(26, 95, 42, 0.18);
}
/* ─────────────────────────────────────────────────────────────
28. Strong minimal mode (global)
Remove remaining green-heavy visuals across admin
───────────────────────────────────────────────────────────── */
.main-content .admin-table-card .card-header,
.main-content .admin-table-card > .card-header,
.main-content .card.admin-table-card > .card-header {
background: #f8faf9 !important;
color: #1f2937 !important;
border-bottom: 1px solid #dbe3de !important;
}
.main-content .admin-table-card .card-header .badge,
.main-content .admin-table-card .card-header .bg-primary,
.main-content .admin-table-card .card-header .bg-success {
background: #edf2f7 !important;
color: #374151 !important;
border: 1px solid #d8e0e8 !important;
}
.main-content .table-success,
.main-content .table-success > td,
.main-content .table-success > th {
background: #f7faf8 !important;
}
.main-content .progress {
background: #eef2f5 !important;
}
.main-content .progress-bar {
background: #7c8ea3 !important;
}
/* keep only primary/danger emphasis */
.main-content .btn-success:not(.btn-primary),
.main-content .btn-outline-success {
background: #ffffff !important;
color: #1f2937 !important;
border-color: #cfd8d3 !important;
}
.main-content .btn-success:not(.btn-primary):hover,
.main-content .btn-outline-success:hover {
background: #f3f6f4 !important;
color: #111827 !important;
border-color: #b8c7be !important;
}
/* ─────────────────────────────────────────────────────────────
29. Global form bottom actions (Submit / Cancel / Add)
───────────────────────────────────────────────────────────── */
.main-content .card-body form .btn:not(.btn-sm):not(.btn-link) {
min-height: 40px !important;
padding: 0 16px !important;
border-radius: 8px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
/* Primary action: submit/update/add */
.main-content .card-body form button[type="submit"].btn,
.main-content .card-body form .btn.btn-primary {
background: #1f7a46 !important;
border-color: #1f7a46 !important;
color: #fff !important;
}
.main-content .card-body form button[type="submit"].btn:hover,
.main-content .card-body form .btn.btn-primary:hover {
background: #176238 !important;
border-color: #176238 !important;
}
/* Secondary actions: cancel/back/list/new */
.main-content .card-body form .btn.btn-outline-secondary,
.main-content .card-body form .btn.btn-secondary,
.main-content .card-body form button[type="button"].btn {
background: #ffffff !important;
border-color: #d1d5db !important;
color: #374151 !important;
}
.main-content .card-body form .btn.btn-outline-secondary:hover,
.main-content .card-body form .btn.btn-secondary:hover,
.main-content .card-body form button[type="button"].btn:hover {
background: #f3f4f6 !important;
border-color: #bfc6cf !important;
color: #1f2937 !important;
}
/* Header actions must always stay visible (fix blank/hidden add button) */
.admin-page-header .btn,
.admin-page-header a.btn {
min-height: 38px !important;
padding: 0 14px !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
opacity: 1 !important;
visibility: visible !important;
}
.admin-page-header .btn-primary,
.admin-page-header a.btn-primary {
background: #1f7a46 !important;
border-color: #1f7a46 !important;
color: #ffffff !important;
}
.admin-page-header .btn-primary:hover,
.admin-page-header a.btn-primary:hover {
background: #176238 !important;
border-color: #176238 !important;
color: #ffffff !important;
}
.admin-page-header .btn-outline-secondary,
.admin-page-header a.btn-outline-secondary {
background: #ffffff !important;
border-color: #d1d5db !important;
color: #374151 !important;
}
/* Common action row used in many forms */
.main-content .col-12.d-flex.gap-2,
.main-content .d-flex.flex-wrap.gap-2.mt-2,
.main-content .form-footer {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Auto-generated list/form tabs from footer script */
.admin-auto-tabs {
margin-top: 8px !important;
}
/* search/filter bars center aligned and consistent */
.admin-search-wrap,
.admin-table-card .card-body > form.row.g-2.align-items-end,
.admin-table-card .card-body > form.row.g-3.align-items-end {
align-items: center !important;
}
.admin-search-wrap .input-group,
.admin-table-card .card-body > form .input-group {
max-width: 420px !important;
}
/* ─────────────────────────────────────────────────────────────
26. Global icon standardization
───────────────────────────────────────────────────────────── */
/* All button icons: consistent size/alignment */
.btn i.fas,
.btn i.far,
.btn i.fa,
.nav-link i.fas,
.nav-link i.far,
.nav-link i.fa {
font-size: 0.86rem !important;
line-height: 1 !important;
vertical-align: middle !important;
}
/* Table action icon buttons: same look everywhere */
.main-content table td .btn-sm i.fas,
.main-content table td .btn-sm i.far,
.main-content table td .btn-sm i.fa {
font-size: 0.82rem !important;
}
.main-content table td .btn-sm {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
padding: 0 !important;
border-radius: 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Edit / view / delete icon colors (global for table actions) */
.main-content table td .btn-outline-primary,
.main-content table td .btn-primary {
background: transparent !important;
border-color: transparent !important;
color: #1d4ed8 !important;
}
.main-content table td .btn-outline-primary:hover,
.main-content table td .btn-primary:hover {
background: #eaf1ff !important;
border-color: #eaf1ff !important;
color: #1e40af !important;
}
.main-content table td .btn-outline-secondary,
.main-content table td .btn-secondary {
background: transparent !important;
border-color: transparent !important;
color: #475569 !important;
}
.main-content table td .btn-outline-secondary:hover,
.main-content table td .btn-secondary:hover {
background: #eef2f7 !important;
border-color: #eef2f7 !important;
color: #334155 !important;
}
.main-content table td .btn-outline-danger,
.main-content table td .btn-danger {
background: transparent !important;
border-color: transparent !important;
color: #be123c !important;
}
.main-content table td .btn-outline-danger:hover,
.main-content table td .btn-danger:hover {
background: #ffecef !important;
border-color: #ffecef !important;
color: #9f1239 !important;
}
/* Notification template page: clean and consistent look */
.notification-template-page .card {
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
overflow: hidden;
}
.notification-template-page .card-header {
background: linear-gradient(90deg, #166534 0%, #16a34a 100%) !important;
color: #fff !important;
border-bottom: 0 !important;
min-height: 54px;
}
.notification-template-page .notif-events-card .list-group-item {
border-left: 0 !important;
border-right: 0 !important;
border-color: #edf2f7 !important;
}
.notification-template-page .notif-events-card .list-group-item-action {
transition: background-color 0.18s ease, color 0.18s ease;
}
.notification-template-page .notif-events-card .list-group-item-action:hover {
background: #f8fafc !important;
}
.notification-template-page .notif-events-card .list-group-item-action.active {
background: #ecfdf3 !important;
color: #14532d !important;
border-left: 3px solid #16a34a !important;
}
.notification-template-page .notif-events-card .list-group-item-action.active small,
.notification-template-page .notif-events-card .list-group-item-action.active .text-muted {
color: #166534 !important;
}
.notification-template-page .badge.bg-success {
background: #166534 !important;
}
.notification-template-page textarea.form-control.font-monospace {
min-height: 220px;
line-height: 1.5;
}
.notification-template-page .form-check-input:checked {
background-color: #16a34a !important;
border-color: #16a34a !important;
}
@media (max-width: 991.98px) {
.notification-template-page .card {
border-radius: 12px !important;
}
.notification-template-page .card-header h5 {
font-size: 1rem !important;
}
}
/* About settings page cleanup */
.about-settings-page .card {
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
overflow: hidden;
}
.about-settings-page .card-header {
background: linear-gradient(90deg, #166534 0%, #16a34a 100%) !important;
color: #ffffff !important;
border-bottom: 0 !important;
}
.about-settings-page .alert-warning {
background: #fffbeb !important;
border-color: #fde68a !important;
color: #92400e !important;
}
.about-settings-page textarea.form-control {
min-height: 180px;
line-height: 1.55;
}
/* Satisfaction widget settings page consistency */
.satisfaction-settings-page .card {
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
overflow: hidden;
}
.satisfaction-settings-page .card-header {
background: linear-gradient(90deg, #166534 0%, #16a34a 100%) !important;
color: #fff !important;
border-bottom: 0 !important;
}
.satisfaction-settings-page .widget-status-icon {
font-size: 2rem;
}
.satisfaction-settings-page .widget-status-icon.is-active {
color: #2e7d32;
}
.satisfaction-settings-page .widget-status-icon.is-inactive {
color: #94a3b8;
}
.satisfaction-settings-page .satisfaction-link-icon {
color: #16a34a;
font-size: 1.1rem;
}
/* Site settings: compact form and better balance */
.settings-page-compact .card {
border-radius: 12px !important;
}
.settings-page-compact .card-header h5 {
margin: 0 !important;
font-size: 1rem !important;
}
.settings-page-compact .card-body {
padding: 1rem 1rem 0.9rem !important;
}
.settings-page-compact .form-label {
font-size: 0.92rem;
margin-bottom: 0.35rem !important;
}
.settings-page-compact .mb-3 {
margin-bottom: 0.75rem !important;
}
.settings-page-compact .form-control,
.settings-page-compact .form-select,
.settings-page-compact .input-group-text {
min-height: 40px !important;
padding-top: 0.45rem !important;
padding-bottom: 0.45rem !important;
font-size: 0.95rem !important;
}
.settings-page-compact textarea.form-control {
min-height: 96px !important;
}
/* Settings: file input माथि लागेको ठूलो min-height हटाउने */
.settings-page-compact .form-control[type="file"] {
min-height: auto !important;
padding-top: 0.4rem !important;
padding-bottom: 0.4rem !important;
font-size: 0.875rem !important;
line-height: 1.35 !important;
}
/* Admin: फाइल अपलोड एकरूप, बटन/पङ्क्ति अनावश्यक ठूलो नहोस् */
.admin-wrapper .form-control[type="file"] {
font-size: 0.875rem;
line-height: 1.35;
padding: 0.4rem 0.65rem;
}
/* मिडिया छैन भन्ने सानो पट्टी (हेडर हिमाल आदि) — पूरै कार्ड भरिने ठूलो बाकस होइन */
.admin-media-placeholder {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 3rem;
max-height: 3.75rem;
padding: 0.45rem 0.85rem;
margin-bottom: 0.75rem;
border-radius: 8px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: rgba(255, 255, 255, 0.95);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.35;
text-align: center;
}
.admin-media-placeholder i {
opacity: 0.9;
flex-shrink: 0;
}
/* Pravidh pages: consistent compact visual style */
body.admin-page-run-migration .card,
body.admin-page-backup-restore .card,
body.admin-page-update-checklist .card,
body.admin-page-site-health .card,
body.admin-page-system-info .card,
body.admin-page-db-setup .card,
body.admin-page-error-log .card,
body.admin-page-help-guide .card,
body.admin-page-site-license .card {
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
overflow: hidden;
}
body.admin-page-run-migration .card-header,
body.admin-page-backup-restore .card-header,
body.admin-page-update-checklist .card-header,
body.admin-page-site-health .card-header,
body.admin-page-system-info .card-header,
body.admin-page-db-setup .card-header,
body.admin-page-error-log .card-header,
body.admin-page-help-guide .card-header,
body.admin-page-site-license .card-header {
background: linear-gradient(90deg, #166534 0%, #16a34a 100%) !important;
color: #ffffff !important;
border-bottom: 0 !important;
}
/* White pill tabs inside these headers: `card-header * { color: inherit }` ले सेतो टेक्स्ट सेतो पिलमा लुक्छ — hover मात्र देखिने */
body.admin-page-run-migration .card-header .nav-tabs .nav-link,
body.admin-page-run-migration .card-header .admin-nav-tabs .nav-link,
body.admin-page-backup-restore .card-header .nav-tabs .nav-link,
body.admin-page-backup-restore .card-header .admin-nav-tabs .nav-link,
body.admin-page-update-checklist .card-header .nav-tabs .nav-link,
body.admin-page-update-checklist .card-header .admin-nav-tabs .nav-link,
body.admin-page-site-health .card-header .nav-tabs .nav-link,
body.admin-page-site-health .card-header .admin-nav-tabs .nav-link,
body.admin-page-system-info .card-header .nav-tabs .nav-link,
body.admin-page-system-info .card-header .admin-nav-tabs .nav-link,
body.admin-page-db-setup .card-header .nav-tabs .nav-link,
body.admin-page-db-setup .card-header .admin-nav-tabs .nav-link,
body.admin-page-error-log .card-header .nav-tabs .nav-link,
body.admin-page-error-log .card-header .admin-nav-tabs .nav-link,
body.admin-page-help-guide .card-header .nav-tabs .nav-link,
body.admin-page-help-guide .card-header .admin-nav-tabs .nav-link,
body.admin-page-site-license .card-header .nav-tabs .nav-link,
body.admin-page-site-license .card-header .admin-nav-tabs .nav-link {
color: #374151 !important;
}
body.admin-page-run-migration .card-header .nav-tabs .nav-link:hover,
body.admin-page-run-migration .card-header .admin-nav-tabs .nav-link:hover,
body.admin-page-backup-restore .card-header .nav-tabs .nav-link:hover,
body.admin-page-backup-restore .card-header .admin-nav-tabs .nav-link:hover,
body.admin-page-update-checklist .card-header .nav-tabs .nav-link:hover,
body.admin-page-update-checklist .card-header .admin-nav-tabs .nav-link:hover,
body.admin-page-site-health .card-header .nav-tabs .nav-link:hover,
body.admin-page-site-health .card-header .admin-nav-tabs .nav-link:hover,
body.admin-page-system-info .card-header .nav-tabs .nav-link:hover,
body.admin-page-system-info .card-header .admin-nav-tabs .nav-link:hover,
body.admin-page-db-setup .card-header .nav-tabs .nav-link:hover,
body.admin-page-db-setup .card-header .admin-nav-tabs .nav-link:hover,
body.admin-page-error-log .card-header .nav-tabs .nav-link:hover,
body.admin-page-error-log .card-header .admin-nav-tabs .nav-link:hover,
body.admin-page-help-guide .card-header .nav-tabs .nav-link:hover,
body.admin-page-help-guide .card-header .admin-nav-tabs .nav-link:hover,
body.admin-page-site-license .card-header .nav-tabs .nav-link:hover,
body.admin-page-site-license .card-header .admin-nav-tabs .nav-link:hover {
color: #14532d !important;
}
body.admin-page-run-migration .card-header .nav-tabs .nav-link.active,
body.admin-page-run-migration .card-header .admin-nav-tabs .nav-link.active,
body.admin-page-backup-restore .card-header .nav-tabs .nav-link.active,
body.admin-page-backup-restore .card-header .admin-nav-tabs .nav-link.active,
body.admin-page-update-checklist .card-header .nav-tabs .nav-link.active,
body.admin-page-update-checklist .card-header .admin-nav-tabs .nav-link.active,
body.admin-page-site-health .card-header .nav-tabs .nav-link.active,
body.admin-page-site-health .card-header .admin-nav-tabs .nav-link.active,
body.admin-page-system-info .card-header .nav-tabs .nav-link.active,
body.admin-page-system-info .card-header .admin-nav-tabs .nav-link.active,
body.admin-page-db-setup .card-header .nav-tabs .nav-link.active,
body.admin-page-db-setup .card-header .admin-nav-tabs .nav-link.active,
body.admin-page-error-log .card-header .nav-tabs .nav-link.active,
body.admin-page-error-log .card-header .admin-nav-tabs .nav-link.active,
body.admin-page-help-guide .card-header .nav-tabs .nav-link.active,
body.admin-page-help-guide .card-header .admin-nav-tabs .nav-link.active,
body.admin-page-site-license .card-header .nav-tabs .nav-link.active,
body.admin-page-site-license .card-header .admin-nav-tabs .nav-link.active {
color: #14532d !important;
}
body.admin-page-update-checklist .checklist-item {
cursor: pointer;
}
body.admin-page-update-checklist .progress {
background: #e9eef5 !important;
}
body.admin-page-update-checklist .progress-bar {
background: #16a34a !important;
}
body.admin-page-update-checklist .card-header.bg-dark,
body.admin-page-update-checklist .card-header.bg-primary,
body.admin-page-update-checklist .card-header.bg-success {
color: #fff !important;
}
body.admin-page-error-log pre.error-log-output {
background: #0f172a !important;
color: #f8fafc !important;
padding: 1rem !important;
margin: 0 !important;
font-size: 0.78rem !important;
line-height: 1.45 !important;
max-height: 600px !important;
overflow-y: auto !important;
white-space: pre-wrap !important;
word-break: break-word !important;
}
/* DataTables global visibility + full width fix */
.main-content .dataTables_wrapper,
.main-content .dataTables_wrapper .dataTables_scroll,
.main-content .dataTables_wrapper .dataTables_scrollHead,
.main-content .dataTables_wrapper .dataTables_scrollBody,
.main-content .dataTables_wrapper .dataTables_scrollHeadInner,
.main-content .dataTables_wrapper table.dataTable {
width: 100% !important;
}
.main-content .dataTables_wrapper .dataTables_paginate .paginate_button {
border: 1px solid #d7dee8 !important;
background: #ffffff !important;
color: #334155 !important;
border-radius: 8px !important;
margin: 0 3px !important;
min-width: 36px;
min-height: 36px;
line-height: 1.4 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.main-content .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #f1f5f9 !important;
color: #1f2937 !important;
border-color: #cbd5e1 !important;
}
.main-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.main-content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: #166534 !important;
border-color: #166534 !important;
color: #ffffff !important;
}
.main-content .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.main-content .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
background: #f8fafc !important;
color: #94a3b8 !important;
border-color: #e2e8f0 !important;
opacity: 1 !important;
}
/* Info officer page refinements */
.info-officer-page .card {
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
overflow: hidden;
}
.info-officer-page .card-header {
background: linear-gradient(90deg, #166534 0%, #16a34a 100%) !important;
color: #fff !important;
border-bottom: 0 !important;
}
.info-officer-page .card-header h5,
.info-officer-page .card-header i {
color: #fff !important;
}
.info-officer-page .current-officer-position {
color: #166534 !important;
}
/* Deep cleanup: site-setup / manage-admins / system-info */
body.admin-page-site-setup .card,
body.admin-page-manage-admins .card,
body.admin-page-system-info .card {
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}
body.admin-page-site-setup .card-header,
body.admin-page-manage-admins .card-header,
body.admin-page-system-info .card-header {
background: linear-gradient(90deg, #166534 0%, #16a34a 100%) !important;
color: #ffffff !important;
border-bottom: 0 !important;
}
body.admin-page-site-setup .card-header *,
body.admin-page-manage-admins .card-header *,
body.admin-page-system-info .card-header * {
color: inherit !important;
}
body.admin-page-site-setup .btn.btn-success {
background: #166534 !important;
border-color: #166534 !important;
}
body.admin-page-site-setup .btn.btn-success:hover {
background: #14532d !important;
border-color: #14532d !important;
}
body.admin-page-manage-admins table tr[style*="background:var(--primary-color)"] {
background: #166534 !important;
color: #ffffff !important;
}
body.admin-page-system-info .mb-3.p-3.rounded[style*="background:#f8fdf9"],
body.admin-page-system-info .mb-3.p-3.rounded[style*="background:#fff8e1"],
body.admin-page-system-info .p-3.rounded[style*="background:#e3f2fd"] {
background: #f8fafc !important;
border-left: 4px solid #16a34a !important;
}
body.admin-page-site-setup .ss-title-icon {
color: var(--primary-color);
}
body.admin-page-site-setup .ss-status-icon {
font-size: 2rem;
margin-bottom: 6px;
}
body.admin-page-site-setup .ss-icon-locked {
color: var(--primary-color);
}
body.admin-page-site-setup .ss-icon-unlocked {
color: var(--danger);
}
body.admin-page-site-setup .ss-icon-info {
color: #0d6efd;
}
body.admin-page-site-setup .ss-icon-warn {
color: #f59e0b;
}
body.admin-page-site-setup .ss-site-settings-subtitle {
opacity: 0.82;
font-size: 0.78rem;
font-weight: 400;
}
body.admin-page-site-setup .ss-lock-card.is-locked {
border-left: 4px solid #166534 !important;
}
body.admin-page-site-setup .ss-lock-card.is-unlocked {
border-left: 4px solid #b91c1c !important;
}
body.admin-page-site-setup .ss-lock-card.is-unlocked .card-header {
background: linear-gradient(90deg, #991b1b 0%, #dc2626 100%) !important;
}
body.admin-page-manage-admins .ma-table-head-row {
background: #166534;
color: #fff;
}
body.admin-page-manage-admins .ma-empty-icon {
font-size: 3rem;
opacity: 0.18;
}
body.admin-page-manage-admins .ma-avatar-chip {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: #fff;
font-weight: 700;
font-size: .9rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.admin-page-manage-admins .ma-avatar-chip-sm {
width: 32px;
height: 32px;
font-size: .85rem;
}
body.admin-page-manage-admins .ma-tight-line {
line-height: 1.2;
}
body.admin-page-manage-admins .ma-you-badge {
font-size: .55rem;
}
body.admin-page-manage-admins .ma-id-text {
font-size: .72rem;
}
body.admin-page-manage-admins .ma-username-chip {
background: #f1f5f9;
color: #334155;
}
body.admin-page-manage-admins .ma-role-badge {
color: #fff;
}
body.admin-page-manage-admins .ma-role-super {
background: var(--danger);
}
body.admin-page-manage-admins .ma-role-admin {
background: #0d6efd;
}
body.admin-page-manage-admins .ma-status-active {
background: var(--primary-color);
}
body.admin-page-manage-admins .ma-status-dot {
font-size: .55rem;
}
body.admin-page-manage-admins .ma-reset-btn {
min-width: 82px;
}
body.admin-page-manage-admins .ma-modal-header {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light)) !important;
color: #fff !important;
}
body.admin-page-manage-admins .ma-modal-admin-pill {
background: #e8f5e9;
}
body.admin-page-manage-admins .ma-password-hint-box {
background: #fff8e1;
border: 1px solid #ffe082;
}
body.admin-page-manage-admins .ma-security-note {
background: #f0faf0;
border: 1px solid #c3e6cb;
color: #155724;
}
body.admin-page-manage-admins .ma-pass-ok {
color: #15803d;
}
body.admin-page-manage-admins .ma-pass-bad {
color: #b91c1c;
}
/* System info class-based upgrade boxes */
body.admin-page-system-info .si-upgrade-box {
border-left: 4px solid #16a34a;
}
body.admin-page-system-info .si-upgrade-81 {
background: #f8fdf9;
}
body.admin-page-system-info .si-upgrade-82 {
background: #fff8e1;
border-left-color: #f59e0b;
}
body.admin-page-system-info .si-upgrade-83 {
background: #e3f2fd;
border-left-color: #2196f3;
}
/* Grievances class-only style replacements */
body.admin-page-grievances .grv-track-code {
font-size: .83rem;
background: rgba(255,255,255,.15);
padding: 2px 10px;
border-radius: 6px;
margin-left: 8px;
letter-spacing: 1px;
}
body.admin-page-grievances .grv-subject-box {
font-size: .9rem;
color: #374151;
}
body.admin-page-grievances .grv-desc-box {
min-height: 80px;
white-space: pre-wrap;
font-size: .9rem;
line-height: 1.7;
color: #374151;
}
body.admin-page-grievances .grv-response-box {
white-space: pre-wrap;
font-size: .9rem;
color: #374151;
background: #f0fff4;
}
body.admin-page-grievances .grv-note-head {
background: #fff9e6;
border-color: #ffc107;
}
body.admin-page-grievances .grv-note-icon {
color: #b45309;
}
body.admin-page-grievances .grv-note-box {
white-space: pre-wrap;
font-size: .9rem;
color: #5c4400;
background: #fffdf0;
}
body.admin-page-grievances .grv-note-textarea {
border-color: #ffc107;
background: #fffdf0;
}
body.admin-page-grievances .grv-table-card {
border-radius: 10px;
overflow: hidden;
}
body.admin-page-grievances .grv-person-col {
width: 200px;
}
body.admin-page-grievances .grv-anon-badge {
font-size: .65rem;
}
/* DB setup class-only style replacements (first pass) */
body.admin-page-db-setup .dbs-bootstrap-wrap {
max-width: 520px;
}
body.admin-page-db-setup .dbs-boot-note {
font-size: .85rem;
font-weight: 500;
opacity: .95;
margin-top: 8px;
}
body.admin-page-db-setup .dbs-page-icon {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: #fff;
padding: 14px 18px;
border-radius: 14px;
}
body.admin-page-db-setup .dbs-stat-icon {
font-size: 2rem;
}
body.admin-page-db-setup .dbs-stat-icon.is-ok { color: var(--primary-color); }
body.admin-page-db-setup .dbs-stat-icon.is-bad { color: var(--danger); }
body.admin-page-db-setup .dbs-stat-icon.is-info { color: #0d6efd; }
body.admin-page-db-setup .dbs-stat-icon.is-muted { color: #999; }
body.admin-page-db-setup .dbs-card.dbs-card-primary {
border-left: 4px solid var(--primary-color) !important;
}
body.admin-page-db-setup .dbs-soft-ok {
background: #e8f5e9;
border: 1px solid #a5d6a7;
}
body.admin-page-db-setup .dbs-card.dbs-card-danger {
border-left: 4px solid #dc3545 !important;
}
body.admin-page-db-setup .dbs-card.dbs-card-danger > .card-header {
background: linear-gradient(135deg, #dc3545, #b42330) !important;
color: #fff !important;
}
body.admin-page-db-setup .dbs-card.dbs-card-info {
border-left: 4px solid #0d6efd !important;
}
body.admin-page-db-setup .dbs-card.dbs-card-info > .card-header {
background: linear-gradient(135deg, #0d6efd, #0b5ed7) !important;
color: #fff !important;
}
body.admin-page-db-setup .dbs-inline-code {
background: rgba(255,255,255,.15);
padding: 1px 5px;
border-radius: 4px;
}
body.admin-page-db-setup .dbs-upload-strip {
background: #f8f9fe;
}
body.admin-page-db-setup .dbs-mini-help {
font-size: .7rem;
}
body.admin-page-db-setup .dbs-soft-head {
background: #e8f0fe;
}
body.admin-page-db-setup .dbs-mini-badge {
font-size: .6rem;
}
body.admin-page-db-setup .dbs-table-footnote {
background: #f8f9fa;
}
body.admin-page-db-setup .dbs-lock-icon {
font-size: 2.5rem;
}
body.admin-page-db-setup .dbs-lock-icon.is-locked {
color: var(--primary-color);
}
body.admin-page-db-setup .dbs-lock-icon.is-unlocked {
color: #dc3545;
}
body.admin-page-db-setup .dbs-head-badge {
background: rgba(255,255,255,.2);
font-size: .6rem;
}
body.admin-page-db-setup .dbs-form-label-sm {
font-size: .8rem;
}
body.admin-page-db-setup .dbs-cred-warning {
background: #fff3cd;
border: 1px solid #ffc107;
font-size: .72rem;
}
body.admin-page-db-setup .dbs-table-status-item {
font-size: .82rem;
}
body.admin-page-db-setup .dbs-table-status-label {
max-width: 120px;
}
/* Vendor enlistment (vendor-enlistment.php) */
.ven-desc-box {
min-height: 80px;
font-size: 0.9rem;
}
.ven-title-icon {
color: #0f766e;
}
.ven-search-group {
max-width: 220px;
}
.ven-col-company {
width: 210px;
}
/* Grievance officer assignment (grievance-officer.php) */
.gof-card-header {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: #fff;
}
.gof-avatar-photo {
width: 100px;
height: 100px;
object-fit: cover;
border-color: #8b5cf6 !important;
}
.gof-avatar-fallback {
width: 100px;
height: 100px;
background: #ede9fe;
border-color: #8b5cf6 !important;
}
.gof-accent-icon,
.gof-position-accent {
color: #8b5cf6;
}
.gof-badge-violet {
background: #8b5cf6;
color: #fff;
}
.gof-empty-state-icon {
opacity: 0.3;
}
.gof-row-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
margin-right: 6px;
}
.gof-btn-violet {
background: #8b5cf6;
color: #fff;
border-color: #8b5cf6;
}
.gof-btn-violet:hover {
background: #7c3aed;
color: #fff;
border-color: #7c3aed;
}
/* ═══════════════════════════════════════════════════════════════
Plain light sidebar — सेतो सादा मेनु पृष्ठभूमि (नमूना जस्तै)
admin.css / अगाडिका dark-sidebar नियमहरू override
═══════════════════════════════════════════════════════════════ */
.sidebar {
background: #ffffff !important;
box-shadow: 1px 0 0 #e5e7eb !important;
border-right: none !important;
}
.sidebar-header {
background: #ffffff !important;
border-bottom: 1px solid #e5e7eb !important;
box-shadow: none !important;
}
.sidebar-header .logo {
color: #1f2937 !important;
}
.sidebar .nav-icon-wrap {
background: #f3f4f6 !important;
box-shadow: none !important;
transform: none !important;
flex-shrink: 0 !important;
min-width: 28px !important;
min-height: 28px !important;
}
.sidebar-nav a:hover .nav-icon-wrap {
background: #e5e7eb !important;
transform: none !important;
box-shadow: none !important;
}
.sidebar-nav li.active > a .nav-icon-wrap,
.sidebar-nav li.active a .nav-icon-wrap,
.sidebar-nav a.active .nav-icon-wrap {
background: rgba(255, 255, 255, 0.22) !important;
box-shadow: none !important;
transform: none !important;
}
.sidebar-nav a {
color: #1f2937 !important;
font-weight: 500 !important;
}
.sidebar-nav a:hover,
.sidebar-nav .nav-group-header:hover {
background: #f3f4f6 !important;
color: #111827 !important;
}
.sidebar-nav li.active > a,
.sidebar-nav a.active {
background: var(--primary-color) !important;
color: #fff !important;
border-left: none !important;
padding-left: 10px !important;
font-weight: 600 !important;
}
.sidebar-nav > ul > li > a,
.sidebar-nav .nav-submenu > li > a,
.sidebar-nav .nav-group-header {
border-bottom: none !important;
}
.sidebar .nav-icon-wrap i,
.sidebar .nav-group-icon i,
.sidebar .nav-submenu a i,
.sidebar-nav > ul > li > a i {
color: #4b5563 !important;
}
.sidebar-nav li.active > a .nav-icon-wrap i,
.sidebar-nav li.active > a i,
.sidebar-nav a.active .nav-icon-wrap i,
.sidebar-nav a.active i,
.sidebar-nav li.active > a .nav-icon-accent,
.sidebar-nav a.active .nav-icon-accent {
color: #fff !important;
}
.nav-group-header.open {
background: #ecfdf3 !important;
color: #14532d !important;
}
.nav-group-header.open:hover {
background: #dcfce7 !important;
color: #14532d !important;
}
.nav-group-header.open .nav-group-icon,
.nav-group-header.open .nav-group-label {
color: #14532d !important;
}
.nav-group-header .nav-group-icon {
color: #6b7280 !important;
}
.nav-group-header.open .nav-group-icon {
color: #14532d !important;
opacity: 1 !important;
}
/* Final hard override: plain white sidebar + black text + green hover */
.sidebar,
aside.sidebar {
background: #ffffff !important;
border-right: 1px solid #e5e7eb !important;
}
.sidebar-header {
background: #ffffff !important;
border-bottom: 1px solid #e5e7eb !important;
}
.sidebar-nav a,
.sidebar-nav .nav-group-header,
.sidebar-nav .nav-submenu > li > a {
color: #111827 !important;
background: transparent !important;
}
/* Menu item separators (restore subtle bottom lines) */
.sidebar-nav > ul > li > a,
.sidebar-nav .nav-group-header {
border-bottom: 1px solid #d6dde8 !important;
}
.sidebar-nav .nav-submenu > li > a {
border-bottom: 1px solid #e2e8f0 !important;
}
.sidebar-nav a:hover,
.sidebar-nav .nav-group-header:hover,
.sidebar-nav .nav-submenu > li > a:hover {
background: #dff7e9 !important;
color: #14532d !important;
}
/* Dashboard hover: clearer premium highlight */
.sidebar-nav a[href="dashboard.php"]:hover {
background: #ccefdc !important;
color: #134e2a !important;
box-shadow: inset 0 0 0 1px #9dd8b8 !important;
}
.sidebar-nav li.active > a,
.sidebar-nav a.active,
.sidebar-nav .nav-submenu li.active > a {
background: #dcfce7 !important;
color: #14532d !important;
border-left: 3px solid #16a34a !important;
}
.sidebar-nav li.active > a i,
.sidebar-nav a.active i,
.sidebar-nav li.active > a .nav-icon-wrap i,
.sidebar-nav a.active .nav-icon-wrap i {
color: #166534 !important;
}
/* Consistent click/open color (beats legacy admin.css rules) */
aside.sidebar .sidebar-nav .nav-group-header.open,
aside.sidebar .sidebar-nav .nav-group-header.open:hover,
aside.sidebar .sidebar-nav li.active > a,
aside.sidebar .sidebar-nav a.active,
aside.sidebar .sidebar-nav .nav-submenu li.active > a,
aside.sidebar .sidebar-nav .nav-submenu li.active > a:hover {
background: #dcfce7 !important;
color: #14532d !important;
border-left: 3px solid #16a34a !important;
}
aside.sidebar .sidebar-nav .nav-group-header.open .nav-group-icon,
aside.sidebar .sidebar-nav .nav-group-header.open .nav-group-label,
aside.sidebar .sidebar-nav .nav-group-header.open .nav-arrow,
aside.sidebar .sidebar-nav li.active > a i,
aside.sidebar .sidebar-nav a.active i,
aside.sidebar .sidebar-nav .nav-submenu li.active > a i {
color: #166534 !important;
opacity: 1 !important;
}
/* सूचना गिन्ने बैज — हल्का हरियो; रातो समूह बैज तलै छुट्टै */
.sidebar-nav > ul > li > a .badge:not(.group-badge),
.sidebar-nav .nav-submenu a .badge:not(.group-badge) {
background: rgba(26, 95, 42, 0.12) !important;
color: var(--primary-color) !important;
}
.sidebar-nav li.active > a .badge:not(.group-badge),
.sidebar-nav a.active .badge:not(.group-badge) {
background: rgba(255, 255, 255, 0.28) !important;
color: #fff !important;
}
.sidebar-user-strip {
background: #f9fafb !important;
border-top: 1px solid #e5e7eb !important;
color: #374151 !important;
}
.sidebar-user-name {
color: #111827 !important;
}
.sidebar-user-role {
color: #6b7280 !important;
}
.sidebar-user-avatar {
background: rgba(26, 95, 42, 0.1) !important;
border-color: rgba(26, 95, 42, 0.28) !important;
color: var(--primary-color) !important;
}
.sidebar-strip-logout {
color: #6b7280 !important;
}
.sidebar-strip-logout:hover {
color: #dc2626 !important;
}
.sidebar::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12) !important;
}
.nav-submenu.open {
border-left-color: rgba(26, 95, 42, 0.35) !important;
}
@media (max-width: 991px) {
.sidebar-close {
background: #f3f4f6 !important;
color: #374151 !important;
}
.sidebar-close:hover {
background: #e5e7eb !important;
color: #111827 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
Admin मोबाइल/ट्याब्लेट: मुख्य क्षेत्र पूर्ण चौडाइ, फ्लेक्स ओभरफ्लो रोक
(v9-mobile-fix सँग मिल्दो; रेल साइडबार नियम यहाँ लाग्दैन)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
.admin-wrapper {
max-width: 100%;
}
.admin-wrapper .main-content {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
/* उप-ट्याब / पिल्स — टच लक्ष्य (~44px), सानो स्क्रिनमा र्याप */
.main-content ul.nav.admin-inner-tabstrip .nav-link {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.5rem 0.85rem !important;
}
.main-content ul.nav.nav-pills.admin-inner-tabstrip {
gap: 6px !important;
padding: 10px 10px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
Desktop + mouse: सानो आइकन रेल — hover मा पूरा लेबल (ठूलो main)
coarse pointer (धेरै ट्याब्लेट): यो ब्लक छैन — पूर्ण चौडाइ साइडबार
═══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
:root {
--sidebar-rail-width: 72px;
}
.admin-wrapper .main-content {
margin-left: var(--sidebar-rail-width) !important;
transition: margin-left 0.22s ease;
}
aside.sidebar#sidebar,
aside.sidebar {
width: var(--sidebar-rail-width) !important;
transition: width 0.22s ease, box-shadow 0.2s ease !important;
overflow-x: hidden !important;
}
aside.sidebar#sidebar:hover,
aside.sidebar:hover {
width: var(--sidebar-width, 260px) !important;
box-shadow: 8px 0 28px rgba(15, 23, 42, 0.1) !important;
z-index: 1050 !important;
}
/* बन्द: लेबल, तीर, बैज, सबमेनु */
.sidebar:not(:hover) .sidebar-link-label,
.sidebar:not(:hover) .nav-group-label,
.sidebar:not(:hover) .nav-arrow,
.sidebar:not(:hover) .sa-mini-badge,
.sidebar:not(:hover) .nav-group-header .group-badge,
.sidebar:not(:hover) .sidebar-nav > ul > li > a > .group-badge,
.sidebar:not(:hover) .sidebar-nav > ul > li > a > span:not(.nav-icon-wrap):not(.badge):not(.group-badge),
.sidebar:not(:hover) .nav-submenu a > span:not(.nav-icon-wrap):not(.badge),
.sidebar:not(:hover) .nav-submenu a > .badge {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.sidebar:not(:hover) .nav-submenu {
max-height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
transform: translateY(-4px) !important;
}
.sidebar:not(:hover) .sidebar-nav > ul > li > a,
.sidebar:not(:hover) .sidebar-nav .nav-group-header {
justify-content: center !important;
gap: 0 !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
.sidebar:not(:hover) .sidebar-link-flex {
justify-content: center !important;
}
.sidebar:not(:hover) .sidebar-header .sidebar-brand {
justify-content: center !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
.sidebar:not(:hover) .sidebar-brand-logo {
max-width: 44px !important;
max-height: 40px !important;
margin: 0 auto !important;
}
.sidebar:not(:hover) .sidebar-user-meta,
.sidebar:not(:hover) .sidebar-strip-logout {
display: none !important;
}
.sidebar:not(:hover) .sidebar-user-strip {
justify-content: center !important;
padding: 10px 4px !important;
}
.sidebar .sidebar-nav > ul > li > a,
.sidebar .sidebar-nav .nav-group-header {
position: relative;
}
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
.admin-wrapper .main-content,
aside.sidebar#sidebar,
aside.sidebar {
transition: none !important;
}
}
/* ──────────────────────────────────────────────────────────
Unified Action Icons — used in admin list "कार्य" column
(View / Edit / Delete / Print / Reply)
Reusable across all admin pages.
────────────────────────────────────────────────────────── */
.adm-action-icons {
display: inline-flex;
gap: 6px;
align-items: center;
}
.adm-action-icons .adm-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: #fff;
color: #6b7280;
text-decoration: none;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
font-size: 0.85rem;
line-height: 1;
}
.adm-action-icons .adm-icon-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.adm-action-icons .adm-icon-btn:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
.adm-action-icons .adm-icon-btn--view:hover { border-color: #3b82f6; color: #1e40af; background: #eff6ff; }
.adm-action-icons .adm-icon-btn--edit:hover { border-color: var(--primary-color, #1a5f2a); color: var(--primary-dark, #0e3d1a); background: #ecfdf5; }
.adm-action-icons .adm-icon-btn--delete:hover{ border-color: #ef4444; color: #991b1b; background: #fee2e2; }
.adm-action-icons .adm-icon-btn--print:hover { border-color: #6366f1; color: #3730a3; background: #eef2ff; }
.adm-action-icons .adm-icon-btn--reply:hover { border-color: #0ea5e9; color: #075985; background: #e0f2fe; }
.adm-action-icons .adm-icon-form {
display: inline;
margin: 0;
padding: 0;
}
.adm-action-icons .adm-icon-btn:focus-visible {
outline: 2px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 60%, transparent);
outline-offset: 2px;
}
/* ──────────────────────────────────────────────────────────
Unified Legacy Detail Tabs
Gives older single-record admin pages the same detail shell
without changing their existing forms or server handlers.
────────────────────────────────────────────────────────── */
.arv-legacy-detail {
border: 1px solid #e5e7eb !important;
border-radius: 18px !important;
overflow: hidden;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
}
.arv-legacy-detail > .card-header,
.arv-legacy-detail .gradient-card-header {
background: linear-gradient(135deg, var(--primary-color, #1a5f2a), #0f766e) !important;
color: #fff !important;
border: 0 !important;
padding: 16px 20px !important;
}
.arv-legacy-detail > .card-body {
background: #f8fafc;
padding: 18px;
}
.arv-legacy-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 18px;
align-items: start;
}
.arv-legacy-shell.arv-legacy-shell--single {
grid-template-columns: 1fr;
}
.arv-legacy-main,
.arv-legacy-sidebar {
min-width: 0;
}
.arv-legacy-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: -18px -18px 18px;
padding: 0 18px;
list-style: none;
background: #fff;
border-bottom: 1px solid #e5e7eb;
}
.arv-legacy-tabs button {
border: 0;
border-bottom: 3px solid transparent;
background: transparent;
color: #334155;
border-radius: 0;
padding: 14px 16px 11px;
font-weight: 800;
line-height: 1;
}
.arv-legacy-tabs button:hover {
color: var(--primary-color, #1a5f2a);
}
.arv-legacy-tabs button.active {
border-bottom-color: var(--primary-color, #1a5f2a);
color: var(--primary-color, #1a5f2a);
}
.arv-legacy-pane {
display: none;
}
.arv-legacy-pane.active {
display: block;
}
.arv-legacy-pane > .adm-info-group,
.arv-legacy-pane > .card,
.arv-legacy-pane > .alert,
.arv-legacy-sidebar > .card,
.arv-legacy-sidebar > form,
.arv-legacy-sidebar > .alert {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.arv-legacy-pane > .adm-info-group {
padding: 16px;
margin-bottom: 14px;
}
.arv-legacy-pane > .adm-info-group:last-child {
margin-bottom: 0;
}
.arv-legacy-sidebar .card,
.arv-legacy-sidebar form,
.arv-legacy-sidebar .alert {
margin-bottom: 14px;
}
.arv-empty-tab {
display: grid;
place-items: center;
gap: 8px;
min-height: 180px;
padding: 28px;
text-align: center;
color: #64748b;
background: #fff;
border: 1px dashed #cbd5e1;
border-radius: 16px;
}
.arv-empty-tab i {
width: 48px;
height: 48px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background: #ecfdf5;
color: var(--primary-color, #1a5f2a);
font-size: 1.15rem;
}
.arv-empty-tab strong {
color: #334155;
font-weight: 800;
}
.arv-empty-tab span {
font-size: .9rem;
}
/* ──────────────────────────────────────────────────────────
Unified primary "खोज" / Submit button — flat modern green.
पुरानो blue→green gradient सबैतिरबाट हटाउने।
────────────────────────────────────────────────────────── */
.main-content .btn-primary,
.main-content button.btn-primary,
.main-content a.btn-primary,
.main-content .card .btn-primary,
.main-content .adm-filter-bar .btn-primary,
.main-content form .btn-primary,
.main-content .tab-content .btn-primary {
background: var(--primary-color, #1a5f2a) !important;
background-image: none !important;
border: 1px solid var(--primary-color, #1a5f2a) !important;
color: #ffffff !important;
box-shadow: 0 4px 10px rgba(26, 95, 42, 0.18) !important;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
.main-content .btn-primary:hover,
.main-content button.btn-primary:hover,
.main-content a.btn-primary:hover,
.main-content .card .btn-primary:hover,
.main-content .adm-filter-bar .btn-primary:hover,
.main-content form .btn-primary:hover,
.main-content .tab-content .btn-primary:hover {
background: var(--primary-dark, #144a21) !important;
background-image: none !important;
border-color: var(--primary-dark, #144a21) !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(26, 95, 42, 0.22) !important;
}
.main-content .btn-primary:focus-visible {
outline: 2px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 60%, transparent) !important;
outline-offset: 2px !important;
}
.main-content .admin-page-header .btn-primary,
.main-content .admin-page-header a.btn-primary {
background: rgba(255, 255, 255, 0.18) !important;
background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
color: #ffffff !important;
box-shadow: none !important;
}
.main-content .admin-page-header .btn-primary:hover {
background: rgba(255, 255, 255, 0.3) !important;
border-color: rgba(255, 255, 255, 0.8) !important;
}
/* ──────────────────────────────────────────────────────────
Filter-bar duplicate search icon fix:
Pages have
inside the input-group AND a separate green submit button.
That's two search icons. Hide the redundant prepend.
────────────────────────────────────────────────────────── */
.main-content .adm-filter-bar .input-group .input-group-text:has(.fa-search),
.main-content .adm-filter-bar .input-group .input-group-text:has(.fa-magnifying-glass) {
display: none !important;
}
/* Once the prepend is gone, the input must regain full radius and full borders. */
.main-content .adm-filter-bar .input-group .form-control {
border-radius: 10px !important;
border: 1.5px solid #e2e8f0 !important;
border-left-width: 1.5px !important;
}
.main-content .adm-filter-bar .input-group .form-control.border-start-0 {
border-left-width: 1.5px !important;
}
/* Align all filter rows so labels + fields + buttons sit on one line. */
.main-content .adm-filter-bar form.row,
.main-content .adm-filter-bar > form > .row {
align-items: end !important;
row-gap: 8px !important;
}
/* Uniform height for every interactive element on the row. */
.main-content .adm-filter-bar .form-select-sm,
.main-content .adm-filter-bar .form-control-sm,
.main-content .adm-filter-bar .form-control,
.main-content .adm-filter-bar .form-select,
.main-content .adm-filter-bar .input-group {
height: 38px !important;
}
/* ──────────────────────────────────────────────────────────
Submit + reset button column — horizontal compact icon pair
Submit (खोज) = green Q, Reset (हटाउनुहोस्) = grey ×.
Both 38×38, side-by-side, same row baseline as inputs.
────────────────────────────────────────────────────────── */
.main-content .adm-filter-bar form.row > [class*="col-"]:last-child {
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 6px !important;
}
.main-content .adm-filter-bar form.row > [class*="col-"]:last-child > * {
margin: 0 !important;
}
/* Both submit and reset become identical compact icon chips. */
.main-content .adm-filter-bar button[type="submit"].btn-primary,
.main-content .adm-filter-bar button[type="submit"].btn.btn-primary,
.main-content .adm-filter-bar a.btn.btn-outline-secondary.btn-sm,
.main-content .adm-filter-bar a.btn.btn-outline-danger.btn-sm,
.main-content .adm-filter-bar button.btn.btn-outline-secondary.btn-sm,
.main-content .adm-filter-bar button.btn.btn-outline-danger.btn-sm {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 !important;
border-radius: 10px !important;
font-size: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
flex: 0 0 38px !important;
}
.main-content .adm-filter-bar button[type="submit"].btn-primary i,
.main-content .adm-filter-bar a.btn.btn-outline-secondary.btn-sm i,
.main-content .adm-filter-bar a.btn.btn-outline-danger.btn-sm i,
.main-content .adm-filter-bar button.btn.btn-outline-secondary.btn-sm i,
.main-content .adm-filter-bar button.btn.btn-outline-danger.btn-sm i {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1 !important;
}
/* Reset (हटाउनुहोस्) — clear-style colour: subtle grey w/ × */
.main-content .adm-filter-bar a.btn.btn-outline-secondary.btn-sm,
.main-content .adm-filter-bar button.btn.btn-outline-secondary.btn-sm {
background: #fff !important;
border: 1.5px solid #cbd5e1 !important;
color: #475569 !important;
}
.main-content .adm-filter-bar a.btn.btn-outline-secondary.btn-sm:hover,
.main-content .adm-filter-bar button.btn.btn-outline-secondary.btn-sm:hover {
background: #f1f5f9 !important;
border-color: #94a3b8 !important;
color: #1e293b !important;
}
/* Override w-100 / mt-1 utilities applied inline on these specific buttons */
.main-content .adm-filter-bar form.row > [class*="col-"]:last-child .w-100,
.main-content .adm-filter-bar form.row > [class*="col-"]:last-child .mt-1 {
width: 38px !important;
margin-top: 0 !important;
}
/* ──────────────────────────────────────────────────────────
Density Polish — सबै admin pages मा एकैसाथ effect:
- Page header banner: tighter padding
- Stat cards: smaller height, uniform alignment
- Filter bar: smaller labels, less spacing
- Help tip / banner alerts: compact
────────────────────────────────────────────────────────── */
.main-content .stat-uniform-card,
.main-content .stat-mini,
.main-content .col-6.col-md-3 > .card.stat-uniform-card {
padding: 14px 12px !important;
border-radius: 14px !important;
}
.main-content .stat-uniform-card i.fa-2x,
.main-content .stat-uniform-card .fa-2x {
font-size: 1.45rem !important;
margin-bottom: 6px !important;
}
.main-content .stat-uniform-card .stat-value,
.main-content .stat-uniform-card .sm-val {
font-size: 1.35rem !important;
font-weight: 800 !important;
line-height: 1.1 !important;
}
.main-content .stat-uniform-card .stat-label,
.main-content .stat-uniform-card .sm-lbl {
font-size: .76rem !important;
color: #64748b !important;
margin-top: 2px !important;
}
.main-content .stat-mini-row {
gap: 10px !important;
}
.main-content .adm-filter-bar {
padding: 12px 14px !important;
border-radius: 14px !important;
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
margin-bottom: 14px !important;
}
.main-content .adm-filter-bar label {
font-size: .72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
color: #64748b !important;
margin-bottom: 4px !important;
}
.main-content .adm-filter-bar .form-select-sm,
.main-content .adm-filter-bar .form-control-sm,
.main-content .adm-filter-bar .input-group-sm > .form-control,
.main-content .adm-filter-bar .input-group-sm > .input-group-text {
font-size: .85rem !important;
height: 38px !important;
border-radius: 10px !important;
}
.main-content .admin-help-tip {
padding: 10px 14px !important;
background: #f1f5f9 !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
font-size: .82rem !important;
color: #475569 !important;
}
.main-content .alert {
border-radius: 12px !important;
padding: 10px 14px !important;
font-size: .88rem !important;
}
.main-content .admin-page-header {
padding: 14px 18px !important;
border-radius: 14px !important;
margin-bottom: 14px !important;
}
.main-content .admin-page-subtitle-text {
font-size: .82rem !important;
color: rgba(255, 255, 255, 0.85) !important;
}
.main-content .tbl-header-bar {
padding: 10px 14px !important;
background: #ffffff !important;
border-bottom: 1px solid #e5e7eb !important;
}
.main-content .tbl-header-bar h6 {
font-size: .92rem !important;
margin: 0 !important;
font-weight: 800 !important;
color: #1e293b !important;
}
.main-content .result-count-badge {
font-size: .72rem !important;
background: #ecfdf5 !important;
color: var(--primary-color, #1a5f2a) !important;
padding: 4px 10px !important;
border-radius: 999px !important;
font-weight: 700 !important;
}
@media (max-width: 991.98px) {
.arv-legacy-shell {
grid-template-columns: 1fr;
}
.arv-legacy-detail > .card-body {
padding: 14px;
}
.arv-legacy-tabs {
margin: -14px -14px 14px;
padding: 0 12px;
}
}
/* ═══════════════════════════════════════════════════
45. CREDENTIALS PAGE (admin/credentials.php)
═══════════════════════════════════════════════════ */
.cred-page-title { margin: 0; color: var(--primary-color); font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
.cred-page-sub { color: var(--text-muted); margin: 6px 0 0; font-size: .92rem; }
.cred-inline-actions .btn-coop.btn-outline { background: var(--white,#fff) !important; color: var(--primary-dark,var(--primary-color)) !important; border: 1.5px solid var(--primary-color) !important; }
.cred-inline-actions .btn-coop.btn-outline:hover { background: color-mix(in srgb, var(--primary-color) 10%, white) !important; color: var(--primary-dark,var(--primary-color)) !important; }
.cred-inline-actions .btn-coop[type="submit"] { background: var(--primary-color) !important; color: var(--text-on-primary,white) !important; }
.cred-inline-actions .btn-coop[type="submit"]:hover { background: var(--primary-dark,var(--primary-color)) !important; }
.cred-empty-title { font-size: .95rem; font-weight: 600; color: var(--text-color) !important; }
.cred-empty-hint { font-size: .875rem; color: var(--text-light) !important; max-width: 26rem; margin-left: auto; margin-right: auto; }
.cred-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.cred-warn-note { color: var(--secondary-dark,var(--secondary-color)); }
.cred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 18px; }
.cred-card { padding: 18px; position: relative; }
.cred-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cred-favicon { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-soft)); }
.cred-head-meta { flex: 1; min-width: 0; }
.cred-name { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-cat { color: var(--text-muted); }
.cred-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cred-code { flex: 1; background: var(--bg-soft); padding: 6px 10px; border-radius: 6px; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-code.pw { letter-spacing: 2px; }
.cred-open-btn { width: 100%; font-size: .85rem; padding: 8px; }
.cred-actions-top { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.cred-icon-btn { padding: 4px; color: var(--text-muted); }
.cred-icon-btn.danger { color: var(--secondary-color); }
.cred-panel { max-width: 700px; width: 100%; margin: 18px auto 0; }
.cred-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cred-panel-title { color: var(--primary-color); margin-top: 0; }
.cred-form-grid { display: grid; gap: 12px; }
.cred-form-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.cred-toast { position: fixed; bottom: 24px; right: 24px; background: var(--primary-color); color: var(--text-on-primary,white); padding: 12px 20px; border-radius: 10px; box-shadow: 0 4px 16px rgba(var(--primary-rgb),.24); z-index: 99999; font-family: var(--font-primary); }
@media (max-width: 768px) { .cred-page-title { font-size: 1.28rem; } .cred-page-sub { font-size: .86rem; } }
/* ═══════════════════════════════════════════════════
46. APP FEATURES PAGE (admin/app-features.php)
═══════════════════════════════════════════════════ */
.appfeat-flat-top { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.appfeat-icon-wrap { width: 44px; height: 44px; background: linear-gradient(135deg, color-mix(in srgb,var(--primary-color) 12%,white), color-mix(in srgb,var(--primary-light) 16%,white)); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.appfeat-inline-form { display: inline; }
.appfeat-toggle-badge { cursor: pointer; }
.appfeat-form-header { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary); }
.appfeat-stat-pill { background: color-mix(in srgb,var(--primary-color) 14%,white); color: var(--primary-dark); border: 1px solid color-mix(in srgb,var(--primary-color) 24%,white); }
.appfeat-count-badge { background: var(--primary-color) !important; color: var(--text-on-primary) !important; }
.appfeat-icon { color: var(--primary-color); }
.appfeat-order-badge { background: color-mix(in srgb,var(--primary-color) 10%,white); color: var(--primary-dark); border: 1px solid color-mix(in srgb,var(--primary-color) 20%,white); }
.appfeat-label { color: var(--primary-dark); }
.appfeat-icon-prev { background: var(--primary-color); color: var(--text-on-primary); }
.appfeat-submit { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.appfeat-submit:hover, .appfeat-submit:focus { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary); }
.appfeat-muted { color: var(--text-muted) !important; }
.appfeat-toggle-on { background: color-mix(in srgb,var(--secondary-color) 16%,white); color: var(--secondary-dark); }
.appfeat-toggle-off { background: color-mix(in srgb,var(--text-muted) 12%,white); color: var(--text-light); }
.appfeat-status-on { background: color-mix(in srgb,var(--primary-color) 16%,white); color: var(--primary-dark); }
.appfeat-status-off { background: color-mix(in srgb,var(--text-muted) 14%,white); color: var(--text-light); }
.appfeat-btn-edit { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.appfeat-btn-edit:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary); }
.appfeat-btn-delete { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--text-on-secondary); }
.appfeat-btn-delete:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); color: var(--text-on-secondary); }
.appfeat-cancel-btn { background: color-mix(in srgb,var(--primary-color) 8%,white); color: var(--primary-dark); border: 1px solid color-mix(in srgb,var(--primary-color) 18%,white); }
.appfeat-required { color: var(--secondary-color); }
/* ═══════════════════════════════════════════════════
47. ADMIN FOOTER PARTIAL (admin/_partials/footer.php)
═══════════════════════════════════════════════════ */
.admin-bottom-nav .admin-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-muted); text-decoration: none; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-sm); transition: color .15s; }
.admin-bottom-nav .admin-nav-item:hover { color: var(--brand-primary,var(--primary-color)); }
.admin-bottom-nav .admin-nav-item i { font-size: 18px; }
body.admin-shell { padding-bottom: 70px; }
@media (min-width: 900px) { .admin-bottom-nav { display: none; } body.admin-shell { padding-bottom: 0; } }
/* ═══════════════════════════════════════════════════
48. SITE LICENSE BLOCKED (admin/site-license-blocked.php)
═══════════════════════════════════════════════════ */
.slb-shell { width: 100%; max-width: 540px; }
.slb-card-main { border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(15,23,42,.06), 0 20px 50px -12px rgba(22,101,52,.12); overflow: hidden; background: var(--white,#fff); }
.slb-card-head { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); color: var(--white,#fff); padding: 1.35rem 1.5rem 1.25rem; text-align: center; }
.slb-card-head h1 { margin: 0; font-size: clamp(1.1rem,3.2vw,1.3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; }
.slb-card-head .sub { margin: .65rem 0 0; opacity: .92; font-size: .9rem; line-height: 1.55; }
.slb-ico-wrap { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; background: #fffbeb; border: 1px solid #fcd34d; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(217,119,6,.15); }
.slb-ico-wrap i { font-size: 1.85rem; color: #d97706; }
.slb-card-body { padding: 1.4rem 1.5rem 1.5rem; }
.slb-pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1rem; }
.slb-pill { font-size: .78rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.slb-dates-box { background: var(--bg-soft,#f8fafc); border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1.15rem; font-size: .9rem; }
.slb-dates-box .lbl { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted,#64748b); margin-bottom: .2rem; }
.slb-vendor-note { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1rem; font-size: .82rem; line-height: 1.55; color: #1e3a5f; }
.slb-pay-box { background: var(--bg-soft,#f8fafc); border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem; font-size: .85rem; }
.slb-pay-box code { color: var(--secondary-dark,#be185d); font-weight: 600; }
.slb-amt-locked { background: #f3f4f6; border: 2px dashed #9ca3af; border-radius: 10px; padding: .65rem .85rem; font-weight: 700; font-size: .95rem; }
.slb-steps { background: rgba(var(--primary-rgb,26,95,42),.06); border: 1px solid rgba(var(--primary-rgb,26,95,42),.2); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.slb-steps ol { margin: 0; padding-left: 1.2rem; font-size: .88rem; line-height: 1.65; color: var(--text-color,#334155); }
.slb-btn-logout { border-radius: 12px; font-weight: 600; padding: .5rem 1.25rem; }
/* ═══════════════════════════════════════════════════
49. SITE HEALTH PAGE (admin/site-health.php)
═══════════════════════════════════════════════════ */
#fp-canvas { min-height: 280px; }
.fp-section-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-color); border-left: 3px solid var(--primary-color); padding: 2px 0 2px 10px; margin-bottom: 1rem; }
.fp-simfocus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.15) !important; }
#fp-canvas.fp-dark { background: #1e293b; border-radius: 0 0 .375rem .375rem; }
#fp-canvas.fp-dark .form-control, #fp-canvas.fp-dark .form-select, #fp-canvas.fp-dark .input-group-text { background: #0f172a; border-color: #334155; color: #e2e8f0; }
#fp-canvas.fp-dark .form-control::placeholder { color: #64748b; }
#fp-canvas.fp-dark .form-label, #fp-canvas.fp-dark .form-check-label, #fp-canvas.fp-dark .fp-section-label, #fp-canvas.fp-dark .form-text { color: #94a3b8 !important; }
#fp-canvas.fp-dark .fp-section-label { border-left-color: #4ade80; color: #4ade80 !important; }
#fp-canvas.fp-dark .form-check-input { background-color: #0f172a; border-color: #475569; }
#fp-canvas.fp-dark .btn-outline-secondary { color: #94a3b8; border-color: #475569; }
#fp-canvas.fp-dark label.form-label { color: #94a3b8 !important; }
/* ═══════════════════════════════════════════════════
50. ADMIN AUCTIONS (admin/auctions.php)
═══════════════════════════════════════════════════ */
.info-section { background: #f8f9fa; padding: 20px; border-radius: 12px; margin-bottom: 1.5rem; }
.section-heading { color: var(--primary-color); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.area-unit { font-size: .75rem; color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.map-preview { border-radius: 10px; overflow: hidden; border: 2px solid #dee2e6; margin-top: 8px; }
.doc-preview { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.img-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 2px solid #dee2e6; cursor: pointer; }
.img-thumb:hover { border-color: var(--primary-color); }
.remove-img-btn { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #dc3545; color: #fff; border: none; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* ═══════════════════════════════════════════════════
51. ADMIN DASHBOARD (admin/dashboard.php)
═══════════════════════════════════════════════════ */
.ds-card { background: var(--surface-color); border: 2px solid color-mix(in srgb, var(--primary-color) 12%, white); border-radius: 16px; padding: 1.25rem 1rem; text-decoration: none; color: inherit; display: flex; align-items: center; gap: 1rem; transition: all .3s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; box-shadow: 0 4px 16px rgba(var(--primary-rgb), .1); }
.ds-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-color) 10%, white), transparent); transition: left .5s; }
.ds-card:hover::before { left: 100%; }
.ds-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 32px rgba(var(--primary-rgb), .2); border-color: var(--primary-color); text-decoration: none; color: inherit; }
.ds-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 15%, white), color-mix(in srgb, var(--primary-color) 25%, white)); color: var(--primary-color); box-shadow: 0 4px 12px rgba(var(--primary-rgb), .2); transition: all .3s; }
.ds-card:hover .ds-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 16px rgba(var(--primary-rgb), .3); }
.ds-icon.warn { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 15%, white), color-mix(in srgb, var(--secondary-color) 25%, white)); color: var(--secondary-dark); box-shadow: 0 4px 12px rgba(var(--secondary-rgb), .2); }
.ds-card:hover .ds-icon.warn { transform: scale(1.1) rotate(-5deg); box-shadow: 0 6px 16px rgba(var(--secondary-rgb), .3); }
.ds-icon.danger { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 20%, white), color-mix(in srgb, var(--secondary-color) 30%, white)); color: var(--secondary-dark); box-shadow: 0 4px 12px rgba(var(--secondary-rgb), .3); }
.ds-card:hover .ds-icon.danger { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 20px rgba(var(--secondary-rgb), .4); }
.ds-val { font-size: 1.8rem; font-weight: 900; line-height: 1; color: var(--primary-dark); transition: all .3s; }
.ds-card:hover .ds-val { color: var(--primary-color); transform: scale(1.05); }
.ds-lbl { font-size: .78rem; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-top: .2rem; }
.dash-title-main { font-size: 1.6rem; font-weight: 800; color: var(--primary-dark); margin: 0; display: flex; align-items: center; gap: .75rem; background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ds-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--primary-color) 5%, white)); border-radius: 12px; padding: 4px; box-shadow: 0 2px 12px rgba(var(--primary-rgb), .1); overflow-x: auto; }
.ds-tab { flex: 1; min-width: 120px; padding: .75rem 1rem; border: none; background: transparent; color: var(--text-muted); font-weight: 600; font-size: .88rem; cursor: pointer; border-radius: 8px; transition: all .3s; position: relative; overflow: hidden; }
.ds-tab::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition: left .5s; }
.ds-tab:hover::before { left: 100%; }
.ds-tab:hover { color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 8%, white); }
.ds-tab.active { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--text-on-primary); box-shadow: 0 2px 8px rgba(var(--primary-rgb), .3); transform: scale(1.02); }
.ds-tab i { margin-right: .4rem; position: relative; z-index: 1; }
.ds-tab span { position: relative; z-index: 1; }
.dash-btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); border-color: var(--primary-color); color: var(--text-on-primary); box-shadow: 0 2px 8px rgba(var(--primary-rgb), .3); transition: all .3s; }
.dash-btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); border-color: var(--primary-dark); color: var(--text-on-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--primary-rgb), .4); }
.dash-btn-outline-primary { border-color: var(--primary-color); color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 8%, white); transition: all .3s; }
.dash-btn-outline-primary:hover { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--text-on-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--primary-rgb), .3); }
.dash-btn-outline-secondary { border-color: var(--secondary-color); color: var(--secondary-color); background: color-mix(in srgb, var(--secondary-color) 8%, white); transition: all .3s; }
.dash-btn-outline-secondary:hover { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)); color: var(--text-on-secondary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--secondary-rgb), .3); }
.dash-btn-outline-warn { border-color: var(--secondary-color); color: var(--secondary-color); background: color-mix(in srgb, var(--secondary-color) 8%, white); transition: all .3s; }
.dash-btn-outline-warn:hover { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)); color: var(--text-on-secondary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--secondary-rgb), .3); }
.dash-badge-alert { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)); color: var(--text-on-secondary); box-shadow: 0 2px 6px rgba(var(--secondary-rgb), .3); }
.dash-badge-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--text-on-primary); box-shadow: 0 2px 6px rgba(var(--primary-rgb), .3); }
.dash-muted-inline { color: var(--text-light); }
.ds-pane { display: none; animation: fadeIn .3s ease-in-out; }
.ds-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* ═══════════════════════════════════════════════════
52. ADMIN GALLERY (admin/gallery.php)
═══════════════════════════════════════════════════ */
.gal-yt-icon { color: var(--secondary-color); }
.gal-search-group { max-width: 300px; }
.gal-thumb { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; }
.gal-inline-form { display: inline; }
.gal-upload-drop { border: 2px dashed var(--primary-light); border-radius: 12px; background: color-mix(in srgb, var(--primary-color) 6%, white); cursor: pointer; }
.gal-video-head { background: linear-gradient(135deg, var(--secondary-dark, var(--secondary-color)), var(--secondary-color)); color: var(--text-on-secondary, var(--text-on-primary, white)); }
.gal-hover-shadow { box-shadow: 0 8px 24px rgba(var(--primary-rgb,26,95,42), .22); }
.gal-hover-overlay { background: linear-gradient(transparent, rgba(var(--primary-rgb,26,95,42), .86)); }
.gallery-card { border-radius: 10px; overflow: hidden; position: relative; transition: transform .2s; }
.gallery-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(var(--primary-rgb,26,95,42), .22); }
.gallery-hover-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(var(--primary-rgb,26,95,42), .86)); padding: 30px 8px 8px; opacity: 0; transition: opacity .3s; }
.gallery-card:hover .gallery-hover-overlay { opacity: 1; }
/* ═══════════════════════════════════════════════════
53. ADMIN SETTINGS (admin/settings.php)
═══════════════════════════════════════════════════ */
.stg-help-compact { font-size: .82rem; }
.stg-color-input { height: 50px; }
.stg-media-preview-logo { max-height: 100px; }
.stg-media-preview-md { max-height: 120px; }
.stg-media-preview-sm { max-height: 90px; }
.stg-ico-primary, .stg-title-primary { color: var(--primary-color) !important; }
.stg-title-accent { color: var(--primary-dark) !important; }
.stg-ico-danger { color: var(--secondary-color) !important; }
.stg-ico-info { color: var(--accent-color) !important; }
.stg-ico-success { color: var(--primary-color) !important; }
.stg-save-btn { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.stg-save-btn:hover, .stg-save-btn:focus { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary); }
.stg-badge-warn { background: var(--secondary-color) !important; color: var(--text-on-secondary) !important; }
.stg-date-addon { background: var(--primary-color) !important; color: var(--text-on-primary) !important; border-color: var(--primary-color) !important; }
.stg-alert-success { background: color-mix(in srgb, var(--primary-color) 12%, white); border-color: color-mix(in srgb, var(--primary-color) 24%, white); color: var(--primary-dark); }
.stg-muted { color: var(--text-muted) !important; }
/* ═══════════════════════════════════════════════════
54. ADMIN NOTICES (admin/notices.php)
═══════════════════════════════════════════════════ */
.ntc-stat-pill { background: color-mix(in srgb, var(--primary-color) 14%, white); color: var(--primary-dark); border: 1px solid color-mix(in srgb, var(--primary-color) 24%, white); }
.ntc-count-badge { background: var(--primary-color) !important; color: var(--text-on-primary) !important; }
.ntc-file-icon, .ntc-date-icon, .ntc-title-label i, .ntc-content-label i, .ntc-date-label i, .ntc-attach-label i, .ntc-attach-link { color: var(--primary-color) !important; }
.ntc-popup-badge { background: color-mix(in srgb, var(--accent-color) 16%, white); color: var(--accent-dark); }
.ntc-status-on { background: color-mix(in srgb, var(--primary-color) 16%, white); color: var(--primary-dark); }
.ntc-status-off { background: color-mix(in srgb, var(--secondary-color) 16%, white); color: var(--secondary-dark); }
.ntc-btn-edit { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.ntc-btn-edit:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary); }
.ntc-btn-delete { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--text-on-secondary); }
.ntc-btn-delete:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); color: var(--text-on-secondary); }
.ntc-label { color: var(--primary-dark); }
.ntc-required { color: var(--secondary-color); }
.ntc-date-trigger { background: var(--primary-color); color: var(--text-on-primary); }
.ntc-bell-icon { color: var(--secondary-color); }
.ntc-submit { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.ntc-submit:hover, .ntc-submit:focus { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary); }
.ntc-soft-bg { background: color-mix(in srgb, var(--primary-color) 8%, white) !important; }
.ntc-muted { color: var(--text-muted) !important; }
.ntc-bulk-active { background: color-mix(in srgb, var(--primary-color) 14%, white); border-color: color-mix(in srgb, var(--primary-color) 24%, white); color: var(--primary-dark); }
.ntc-bulk-inactive { background: color-mix(in srgb, var(--secondary-color) 14%, white); border-color: color-mix(in srgb, var(--secondary-color) 24%, white); color: var(--secondary-dark); }
.ntc-no-badge { background: color-mix(in srgb, var(--text-muted) 12%, white); color: var(--text-light); }
/* ═══════════════════════════════════════════════════
55. ADMIN SLIDERS (admin/sliders.php)
═══════════════════════════════════════════════════ */
.sl-info-left { border-left: 4px solid var(--accent-color, #17a2b8); }
.sl-flat-top { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.sl-search-wrap { flex-wrap: wrap; }
.sl-search-group { max-width: 300px; }
.sl-prev-img { width: 110px; height: 40px; object-fit: cover; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--primary-color) 20%, white); }
.sl-prev-empty { width: 110px; height: 40px; background: color-mix(in srgb, var(--primary-color) 8%, white); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.sl-inline-form { display: inline; }
.sl-form-header { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary, white); }
.sl-edit-prev { max-height: 70px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--primary-color) 20%, white); }
.sl-prev-upload { max-height: 70px; border-radius: 8px; border: 2px solid var(--primary-light); }
/* ═══════════════════════════════════════════════════
56. ADMIN HELP GUIDE (admin/help-guide.php)
═══════════════════════════════════════════════════ */
.hg-wrap { display: grid; grid-template-columns: 270px 1fr; gap: 22px; padding: 0 20px 40px; align-items: start; }
@media(max-width:991px) { .hg-wrap { grid-template-columns: 1fr; } }
.hg-sidebar { background: #fff; border-radius: 14px; padding: 14px 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06); position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
.hg-sidebar::-webkit-scrollbar { width: 4px; } .hg-sidebar::-webkit-scrollbar-thumb { background: #d1fae5; border-radius: 4px; }
.hg-sidebar .grp { font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; color: #9ca3af; font-weight: 800; padding: 12px 10px 4px; margin-top: 4px; }
.hg-sidebar a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: #374151; text-decoration: none; font-size: .84rem; margin-bottom: 2px; border-left: 3px solid transparent; transition: all .15s; }
.hg-sidebar a:hover { background: #f0fdf4; color: #166534; }
.hg-sidebar a.active { background: #dcfce7; color: #14532d; font-weight: 700; border-left-color: #16a34a; }
.hg-sidebar a i { width: 16px; text-align: center; font-size: .82rem; color: #6b7280; }
.hg-sidebar a.active i { color: #16a34a; }
.hg-content { background: #fff; border-radius: 14px; padding: 32px 36px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
@media(max-width:767px) { .hg-content { padding: 20px 16px; } }
.hg-section { padding: 26px 0; border-bottom: 1.5px solid #f1f5f9; scroll-margin-top: 80px; }
.hg-section:last-child { border-bottom: none; }
.hg-section h3 { color: var(--primary-color, #1a5f2a); font-weight: 800; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 1.15rem; }
.hg-icon { background: linear-gradient(135deg, var(--primary-color, #1a5f2a), var(--primary-light, #28a745)); color: #fff; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.hg-section h5 { font-weight: 700; color: #1f2937; margin: 18px 0 10px; font-size: .97rem; }
.hg-step { background: #f8fafc; border-left: 4px solid var(--primary-color, #1a5f2a); padding: 13px 17px; border-radius: 0 10px 10px 0; margin: 9px 0; font-size: .9rem; }
.hg-step b, .hg-step strong { color: var(--primary-color, #1a5f2a); }
.hg-warn { background: #fef3c7; border-left: 4px solid #f59e0b; padding: 13px 17px; border-radius: 0 10px 10px 0; margin: 9px 0; color: #78350f; font-size: .9rem; }
.hg-info { background: #fef2f2; border-left: 4px solid var(--secondary-color, #c0392b); padding: 13px 17px; border-radius: 0 10px 10px 0; margin: 9px 0; color: var(--secondary-dark, #922b21); font-size: .9rem; }
.hg-success { background: #dcfce7; border-left: 4px solid #16a34a; padding: 13px 17px; border-radius: 0 10px 10px 0; margin: 9px 0; color: #14532d; font-size: .9rem; }
.hg-danger { background: #fee2e2; border-left: 4px solid #ef4444; padding: 13px 17px; border-radius: 0 10px 10px 0; margin: 9px 0; color: #7f1d1d; font-size: .9rem; }
.hg-steps-list { counter-reset: step; list-style: none; padding: 0; margin: 10px 0; }
.hg-steps-list li { counter-increment: step; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; font-size: .9rem; }
.hg-steps-list li::before { content: counter(step); background: var(--primary-color, #1a5f2a); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; flex-shrink: 0; margin-top: 2px; }
.hg-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .87rem; }
.hg-table th { background: var(--primary-color, #1a5f2a); color: #fff; padding: 10px 13px; text-align: left; }
.hg-table td { padding: 9px 13px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.hg-table tr:hover td { background: #f0fdf4; }
.kbd { background: #1f2937; color: #f9fafb; padding: 2px 8px; border-radius: 4px; font-family: 'Courier New',monospace; font-size: .8rem; }
.hg-faq details { background: #f8fafc; border-radius: 8px; padding: 12px 16px; margin: 8px 0; border: 1px solid #e5e7eb; }
.hg-faq summary { cursor: pointer; font-weight: 700; color: #1f2937; font-size: .9rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.hg-faq summary::-webkit-details-marker { display: none; }
.hg-faq summary::after { content: '＋'; color: #9ca3af; font-size: 1rem; }
.hg-faq details[open] summary::after { content: '－'; }
.hg-faq details[open] summary { color: var(--primary-color, #1a5f2a); }
.hg-faq details .mt-2 { padding-top: 10px; font-size: .88rem; color: #374151; }
.hg-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.hg-badge-green { background: #dcfce7; color: #14532d; }
.hg-badge-blue { background: #fef2f2; color: var(--secondary-dark, #922b21); }
.hg-badge-yellow { background: #fef3c7; color: #78350f; }
.hg-badge-red { background: #fee2e2; color: #7f1d1d; }
.code-map { font-family: 'Courier New',monospace; font-size: .8rem; background: #1f2937; color: #f9fafb; padding: 18px; border-radius: 10px; overflow-x: auto; line-height: 1.8; }
.code-map .folder { color: #fbbf24; font-weight: 700; }
.code-map .file { color: #a5f3fc; }
.code-map .desc { color: #9ca3af; font-style: italic; }
.hg-search-wrap { position: relative; margin-bottom: 14px; }
.hg-search-wrap input { width: 100%; padding: 8px 12px 8px 34px; border: 1.5px solid #d1fae5; border-radius: 8px; font-size: .84rem; outline: none; }
.hg-search-wrap input:focus { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.15); }
.hg-search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: .82rem; }
.hg-mobile-toggle { display: none; }
@media(max-width:991px) { .hg-mobile-toggle { display: block; margin-bottom: 14px; } .hg-sidebar.mobile-hidden { display: none; } }
#hg-read-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--primary-color, #1a5f2a); z-index: 9999; transition: width .1s; }
/* ═══════════════════════════════════════════════════
57. ADMIN MEMBERS (admin/members.php)
═══════════════════════════════════════════════════ */
.stat-uniform-card { background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--primary-color) 5%, white)); border: 2px solid color-mix(in srgb, var(--primary-color) 12%, white); border-radius: 16px; transition: all .3s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; }
.stat-uniform-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-color) 10%, white), transparent); transition: left .5s; }
.stat-uniform-card:hover::before { left: 100%; }
.stat-uniform-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 32px rgba(var(--primary-rgb), .2); border-color: var(--primary-color); }
.stat-uniform-card i { transition: all .3s; }
.stat-uniform-card:hover i { transform: scale(1.1) rotate(5deg); }
.stat-value { font-size: 2rem; font-weight: 900; color: var(--primary-dark); transition: all .3s; }
.stat-uniform-card:hover .stat-value { color: var(--primary-color); transform: scale(1.05); }
.stat-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.mem-search-group { border-radius: 25px; overflow: hidden; box-shadow: 0 2px 8px rgba(var(--primary-rgb), .1); }
.mem-search-group .input-group-text { background: var(--primary-color); color: var(--text-on-primary); border: none; }
.mem-filter-search { border-left: none; border-radius: 0 25px 25px 0; transition: all .3s; }
.mem-filter-search:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); border-color: var(--primary-color); }
.mem-filter-kyc { border-radius: 20px; border: 2px solid color-mix(in srgb, var(--primary-color) 15%, white); background: var(--surface-color); transition: all .3s; }
.mem-filter-kyc:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.mem-avatar-sm { width: 40px; height: 40px; object-fit: cover; border: 2px solid var(--primary-color); transition: all .3s; }
.mem-avatar-sm:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(var(--primary-rgb), .3); }
.mem-avatar-fallback-sm { width: 40px; height: 40px; font-size: 1rem; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); border: 2px solid var(--primary-color); transition: all .3s; }
.mem-avatar-fallback-sm:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(var(--primary-rgb), .3); }
.mem-kyc-pill { font-size: .7rem; font-weight: 600; border-radius: 12px; padding: .25rem .6rem; transition: all .3s; }
.mem-kyc-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.mem-login-pill { font-size: .7rem; font-weight: 600; border-radius: 10px; padding: .2rem .5rem; margin-right: .25rem; transition: all .3s; }
.mem-login-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.mem-badge-google { background: linear-gradient(135deg, #4285f4, #1a73e8); color: white; border: none; }
.mem-badge-facebook { background: linear-gradient(135deg, #1877f2, #0e5fd8); color: white; border: none; }
.mem-service-badge { font-weight: 600; font-size: .75rem; padding: .3rem .6rem; border-radius: 12px; border: none; transition: all .3s; }
.mem-service-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.mem-notif-pill { font-size: .7rem; padding: .4rem .6rem; transition: all .3s; }
.mem-notif-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.mem-unread-pill { font-size: .6rem; padding: .2rem .4rem; animation: pulse-unread 2s infinite; }
@keyframes pulse-unread { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@media (max-width: 768px) { .stat-uniform-card { margin-bottom: 1rem; } .mem-search-group { max-width: 100%; } .mem-avatar-sm, .mem-avatar-fallback-sm { width: 32px; height: 32px; font-size: .8rem; } }
/* ═══════════════════════════════════════════════════
58. ADMIN REPORTS (admin/reports.php)
═══════════════════════════════════════════════════ */
.filter-buttons .btn { border-radius: 20px; font-weight: 600; padding: .375rem .875rem; transition: all .2s ease; border-width: 1.5px; }
.filter-buttons .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
@media (max-width: 768px) { .filter-buttons { width: 100%; justify-content: center; } .filter-buttons .btn { font-size: .8rem; padding: .25rem .6rem; } }
/* ═══════════════════════════════════════════════════
59. ADMIN WELFARE CLAIMS (admin/welfare-claims.php)
═══════════════════════════════════════════════════ */
.wlf-info-section { background: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 20px; }
.wlf-info-section h6 { color: var(--primary-color); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); }
.wlf-info-section p { margin-bottom: 8px; }
/* ═══════════════════════════════════════════════════
60. DIGITAL SERVICE REQUESTS (admin/digital-service-requests.php)
═══════════════════════════════════════════════════ */
.dsr-remark-box { background: color-mix(in srgb, var(--secondary-color) 12%, white); padding: 12px; border-radius: 10px; color: var(--secondary-dark); }
.dsr-update-btn { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.dsr-update-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary); }
.dsr-track-text { color: var(--primary-color); }
.dsr-search-btn { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.dsr-search-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary); }
.dsr-head-icon, .dsr-track-inline { color: var(--primary-color); }
.dsr-view-btn { background: color-mix(in srgb, var(--accent-color) 18%, white); border-color: color-mix(in srgb, var(--accent-color) 28%, white); color: var(--accent-dark); }
.dsr-view-btn:hover { background: color-mix(in srgb, var(--accent-color) 26%, white); border-color: color-mix(in srgb, var(--accent-color) 36%, white); color: var(--accent-dark); }
.dsr-attachment-btn { border-color: var(--primary-color); color: var(--primary-color); }
.dsr-attachment-btn:hover { background: var(--primary-color); color: var(--text-on-primary); }
.dsr-label-strong { color: var(--primary-dark); }
.dsr-search-icon { color: var(--text-muted); }
.dsr-st-badge { font-weight: 700; }
.dsr-st-warning { background: color-mix(in srgb, var(--secondary-color) 16%, white); color: var(--secondary-dark); }
.dsr-st-info { background: color-mix(in srgb, var(--accent-color) 16%, white); color: var(--accent-dark); }
.dsr-st-success { background: color-mix(in srgb, var(--primary-color) 16%, white); color: var(--primary-dark); }
.dsr-st-danger { background: color-mix(in srgb, var(--secondary-color) 20%, white); color: var(--secondary-dark); }
.dsr-st-primary { background: color-mix(in srgb, var(--primary-color) 22%, white); color: var(--primary-dark); }
.dsr-st-secondary { background: color-mix(in srgb, var(--text-muted) 16%, white); color: var(--text-light); }
.dsr-muted { color: var(--text-muted) !important; }
.dsr-soft-bg { background: color-mix(in srgb, var(--primary-color) 8%, white) !important; }
/* ═══════════════════════════════════════════════════
61. ADMIN INTEREST RATES (admin/interest-rates.php)
═══════════════════════════════════════════════════ */
.ir-flat-top { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.ir-head-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); }
.ir-head-loan { background: linear-gradient(135deg, var(--secondary-dark, var(--secondary-color)), var(--secondary-color)); }
.ir-head-theme { color: var(--text-on-primary, white); }
.ir-rate-badge { background: color-mix(in srgb, var(--primary-color) 12%, white); color: var(--primary-color); border: 1px solid var(--primary-light); }
.ir-inline-form { display: inline; }
/* ═══════════════════════════════════════════════════
62. INSTITUTIONAL PROFILE (admin/institutional-profile.php)
═══════════════════════════════════════════════════ */
.ip-profile-table-wrap[data-ip-view="main"] .ip-col-fin,
.ip-profile-table-wrap[data-ip-view="finance"] .ip-col-main { display: none !important; }
#ipTable { font-size: .84rem; }
#ipTable thead th { padding: 10px; font-size: .73rem; letter-spacing: .25px; text-transform: uppercase; color: var(--text-color, #475569); white-space: nowrap; }
#ipTable tbody td { padding: 9px 10px; vertical-align: middle; }
#ipTable tbody tr.ip-data-row:hover { background: color-mix(in srgb, var(--primary-color) 3%, white); }
#ipTable .btn, #ipTable .btn-sm { padding: .26rem .45rem; min-height: 30px; border-radius: 8px; }
#ipTable .d-flex.gap-1 { gap: 4px !important; }
#ipTable .badge { font-size: .72rem; padding: .36em .62em; border-radius: 999px; }
#ipTable .npa-good { background: color-mix(in srgb, var(--primary-color) 14%, white) !important; color: var(--primary-dark) !important; }
#ipTable .npa-warning { background: color-mix(in srgb, var(--secondary-color) 16%, white) !important; color: var(--secondary-dark, var(--secondary-color)) !important; }
#ipTable .npa-danger { background: color-mix(in srgb, var(--secondary-color) 18%, white) !important; color: var(--secondary-dark, var(--secondary-color)) !important; }
.ip-search-bar .input-group-text i { font-size: 12px; }
.form-footer { border-top: 1px solid var(--border-color, #e5e7eb); padding: 12px 16px; background: white; display: flex; gap: 8px; align-items: center; }
.ip-search-shell { border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 18%, white); background: color-mix(in srgb, var(--primary-color) 4%, white); }
.ip-search-group { max-width: 280px; }
.ip-search-addon, .ip-search-input, .ip-filter-select { border-color: color-mix(in srgb, var(--primary-color) 32%, white); }
.ip-filter-select { max-width: 160px; }
.ip-count-badge { font-size: .78rem; padding: .42em .72em; border-radius: 999px; }
.ip-count-default { background: color-mix(in srgb, var(--primary-color) 13%, white); color: var(--primary-color); }
.ip-count-empty { background: color-mix(in srgb, var(--secondary-color) 16%, white); color: var(--secondary-dark, var(--secondary-color)); }
.ip-col-actions { min-width: 120px; }
.ip-hidden { display: none; }
.ip-pointer { cursor: pointer; }
@media (max-width: 768px) { #ipTable { font-size: .8rem; } #ipTable thead th, #ipTable tbody td { padding: 8px; } }
/* ═══════════════════════════════════════════════════
63. JOB APPLICATIONS (admin/job-applications.php)
═══════════════════════════════════════════════════ */
.job-bucket-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.job-bucket { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid #e5e7eb; color: #374151; font-size: .85rem; font-weight: 600; text-decoration: none; transition: all .15s; }
.job-bucket:hover { border-color: var(--primary-color, #1a5f2a); color: var(--primary-color, #1a5f2a); transform: translateY(-1px); }
.job-bucket-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: .72rem; font-weight: 700; }
.job-bucket.is-on { background: var(--primary-color, #1a5f2a); border-color: var(--primary-color, #1a5f2a); color: #fff; box-shadow: 0 4px 14px rgba(26,95,42,.18); }
.job-bucket.is-on .job-bucket-count { background: rgba(255,255,255,.22); color: #fff; }
.job-bucket--done.is-on { background: #0f766e; border-color: #0f766e; }
.job-bucket--all.is-on { background: #374151; border-color: #374151; }
/* ═══════════════════════════════════════════════════
64. MEMBER ONLINE PORTAL (admin/member-online-portal.php)
═══════════════════════════════════════════════════ */
.portal-badge-xs { font-size: .7rem; }
.portal-badge-xxs { font-size: .58rem; }
.portal-badge-mini { font-size: .65rem; }
.portal-pending-pulse-badge { font-size: .85rem; padding: 6px 12px; animation: badge-pulse 2s ease-in-out infinite; }
.portal-stat-link { text-decoration: none; }
.portal-avatar-lg { width: 80px; height: 80px; object-fit: cover; border: 3px solid var(--primary-color); }
.portal-avatar-fallback-lg { width: 80px; height: 80px; font-size: 2rem; font-weight: 700; }
.portal-avatar-sm { width: 32px; height: 32px; object-fit: cover; }
.portal-avatar-fallback-sm { width: 32px; height: 32px; font-size: .9rem; }
.portal-rating-strong { color: var(--secondary-color, #c0392b); font-weight: 700; }
.portal-rating-sub { font-size: .67rem; }
.portal-card-security-wrap { background: linear-gradient(135deg, #fefce8, #fef9c3); }
.portal-cvv-code { letter-spacing: .2em; }
.portal-search-input { min-width: 220px; }
.portal-status-select { width: auto; }
.portal-email-xs { font-size: .7rem; }
.portal-member-meta-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-member-meta-list .list-group-item { border-left: 0; border-right: 0; }
.portal-partner-filter-wrap { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
.portal-partner-filter-select { max-width: 380px; }
.portal-partner-table-wrap { border-top: 1px solid #eef2f7; }
.portal-partner-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: #475569; }
.portal-partner-table tbody td { padding-top: 9px; padding-bottom: 9px; }
.portal-service-chip { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #fef2f2; color: var(--secondary-dark, #922b21); border: 1px solid #fecaca; font-size: .74rem; font-weight: 600; }
@media (max-width: 991.98px) { .portal-member-meta-list { grid-template-columns: 1fr; } .portal-partner-filter-select { max-width: 100%; } .portal-partner-table thead th { white-space: nowrap; } }
/* ═══════════════════════════════════════════════════
65. ADMIN LOGIN PAGE (admin/index.php)
═══════════════════════════════════════════════════ */
body.admin-auth-page { font-family: var(--font-primary,'Mukta','Noto Sans Devanagari','Segoe UI',sans-serif); min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.card-logo-wrap img { max-height: 56px; max-width: 200px; object-fit: contain; border-radius: 8px; }
.input-icon { position: relative; }
.input-icon i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .88rem; pointer-events: none; }
.field input { padding-left: 38px; }
.alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 10px 13px; border-radius: 9px; margin-bottom: 14px; font-size: .82rem; display: flex; align-items: center; gap: 8px; }
.security-note { margin-top: 18px; padding: 11px 13px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px; font-size: .76rem; color: #15803d; display: flex; align-items: center; gap: 8px; }
.alert-info-soft { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }
.field-compact { font-size: .82rem; }
.link-primary-strong { color: var(--primary-color, #1a8754); font-weight: 600; }
.security-note-warning { background: #fff7ed; border-color: #fed7aa; color: #9a3412; margin-top: 14px; }
.license-renew-on-login { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #86efac; border-radius: 12px; padding: 14px 14px 12px; margin-bottom: 16px; font-size: .8rem; line-height: 1.55; color: #14532d; }
.license-renew-on-login h4 { margin: 0 0 8px; font-size: .88rem; font-weight: 800; color: #166534; display: flex; align-items: center; gap: 6px; }
.license-renew-on-login .pay-row { margin: 4px 0; word-break: break-all; }
.license-renew-on-login code { background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 6px; font-size: .85em; }
.license-renew-on-login .sub { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(22,101,52,.25); font-size: .76rem; color: #15803d; }
.license-renew-vendor { font-size: .76rem; line-height: 1.55; color: #334155; background: rgba(255,255,255,.75); border: 1px solid rgba(22,101,52,.2); border-radius: 10px; padding: 10px 11px; margin-bottom: 12px; }
.license-renew-success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; border-radius: 10px; padding: 11px 12px; margin-bottom: 12px; font-size: .78rem; line-height: 1.5; }
.license-renew-form .lr-fld { margin-bottom: 10px; }
.license-renew-form label { display: block; font-size: .7rem; font-weight: 700; color: #374151; margin-bottom: 4px; }
.license-renew-form input, .license-renew-form select, .license-renew-form textarea { width: 100%; padding: 8px 10px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: .85rem; font-family: inherit; background: #fff; }
.license-renew-form textarea { min-height: 56px; resize: vertical; }
.license-renew-form .lr-submit { margin-top: 6px; width: 100%; padding: 10px 14px; border: none; border-radius: 10px; font-size: .88rem; font-weight: 700; font-family: inherit; cursor: pointer; background: linear-gradient(135deg, var(--primary-dark, #0f4f20), var(--primary-color, #1a8754)); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.license-renew-form .lr-submit:hover { filter: brightness(1.05); }
.license-renew-form .lr-amt-display { padding: 9px 11px; background: #f3f4f6; border: 1.5px dashed #9ca3af; border-radius: 8px; font-size: .88rem; font-weight: 700; color: #111827; }
.license-renew-form .lr-amt-hint { font-size: .68rem; color: #6b7280; margin-top: 4px; font-weight: 500; }
.mini-login-link { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(22,101,52,.25); background: rgba(255,255,255,.85); color: #14532d; text-decoration: none; }
.mini-login-link:hover { filter: brightness(1.04); }
.license-expired-login-first { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: .78rem; line-height: 1.55; color: #78350f; text-align: left; }
.license-expired-login-first a { color: var(--primary-color, #1a8754); font-weight: 700; }
@media (max-width:480px) { .auth-card { border-radius: 16px; } }
/* ═══════════════════════════════════════════════════
66. KYC APPLICATIONS (admin/kyc-applications.php)
═══════════════════════════════════════════════════ */
#kycInfoTabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 10px; border-bottom: 1px dashed #d1d5db; margin-bottom: 10px; }
#kycInfoTabs .kyc-mini-tab-btn { border-radius: 999px; font-size: .75rem; font-weight: 700; }
@media (max-width: 1024px) { #kycLeftDetailsCol .adm-detail-table { table-layout: auto; } #kycLeftDetailsCol .adm-detail-table th { width: 34% !important; min-width: 140px; } #kycLeftDetailsCol .adm-detail-table td { width: 66% !important; padding-left: 14px !important; } }
/* ═══════════════════════════════════════════════════
67. ADMIN HEADER NAV (admin/includes/admin-header.php)
═══════════════════════════════════════════════════ */
.nav-group-header { display: flex; align-items: center; gap: 12px; padding: 10px 15px; margin: 2px 10px; color: #1f2937; font-size: .82rem; font-weight: 600; letter-spacing: .5px; cursor: pointer; border-radius: 8px; transition: background .2s, color .2s; user-select: none; list-style: none; }
.nav-group-header:hover { background: #f3f4f6; color: #111827; }
.nav-group-header.open { background: #ecfdf3; color: #14532d; }
.nav-group-header .nav-group-icon { width: 22px; text-align: center; font-size: .9rem; opacity: .85; }
.nav-group-header .nav-group-label { flex: 1; }
.nav-group-header .nav-arrow { font-size: .65rem; transition: transform .25s ease; opacity: .55; color: #6b7280; order: 10; flex-shrink: 0; }
.nav-group-header.open .nav-arrow { transform: rotate(90deg); opacity: 1; color: #166534; }
.nav-group-header .group-badge { background: #e53e3e; color: #fff; font-size: .62rem; font-weight: 800; padding: 2px 7px; border-radius: 20px; min-width: 20px; text-align: center; line-height: 1.4; letter-spacing: .2px; box-shadow: 0 2px 6px rgba(229,62,62,.5); animation: badge-pulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes badge-pulse { 0%, 100% { box-shadow: 0 2px 6px rgba(229,62,62,.5); } 50% { box-shadow: 0 2px 12px rgba(229,62,62,.85); } }
.nav-submenu { list-style: none; padding: 0; margin: 0 8px 0 0; overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility .2s, transform .2s ease; }
.nav-submenu.open { max-height: 900px; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); border-left: 2px solid rgba(74,222,128,.35); margin-left: 18px; padding-left: 2px; }
.nav-submenu li { margin: 0 8px 0 20px; }
.nav-submenu li a { padding: 5px 12px; font-size: .83rem; }
.nav-submenu li a .nav-icon-wrap { width: 20px; text-align: center; font-size: .8rem; }
.nav-submenu li a .badge { margin-left: auto; background: #e53e3e !important; color: #fff !important; font-size: .6rem; font-weight: 800; padding: 2px 6px; border-radius: 20px; min-width: 18px; text-align: center; line-height: 1.4; box-shadow: 0 1px 4px rgba(229,62,62,.45); flex-shrink: 0; }
.nav-submenu li a { display: flex !important; align-items: center; }
.nav-group-wrap { margin-top: 4px; }
.sa-label-badge { background: var(--primary-color); color: #fff; font-size: .55rem; font-weight: 700; padding: 1px 5px; border-radius: 7px; margin-left: 4px; flex-shrink: 0; }
.nav-total-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e53e3e; margin-left: auto; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(229,62,62,.3); animation: badge-pulse 1.8s ease-in-out infinite; }
.sidebar-header { overflow: hidden !important; }
.sidebar-brand.has-logo { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; text-decoration: none !important; overflow: hidden !important; min-width: 0 !important; }
.sidebar-brand-logo { display: block !important; height: auto !important; width: auto !important; max-height: 44px !important; max-width: min(176px, 72%) !important; object-fit: contain !important; object-position: left center !important; border-radius: 6px !important; background: #f3f4f6 !important; padding: 3px 5px !important; flex-shrink: 0 !important; }
.sidebar-brand.no-logo .sidebar-brand-text { font-size: .85rem; font-weight: 700; color: #1f2937; white-space: normal; word-break: break-word; overflow-wrap: break-word; line-height: 1.3; max-width: 160px; }
.adm-info-group-header, .content-header h4, .content-header h5, th, label.form-label, .admin-page-title { overflow-wrap: break-word; word-break: break-word; }
.admin-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: flex-end; }
.admin-form-actions .btn { width: auto; max-width: 100%; }
/* ═══════════════════════════════════════════════════
68. ADMIN REQUEST VIEW (admin/includes/admin-request-view.php)
═══════════════════════════════════════════════════ */
.arv-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05); overflow: hidden; margin-bottom: 24px; }
.arv-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid #eef2f7; background: linear-gradient(180deg, #fbfdfa 0%, #ffffff 100%); }
.arv-header-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.arv-avatar { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--primary-color, #1a5f2a) 14%, #fff); color: var(--primary-color, #1a5f2a); display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }
.arv-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arv-subtitle { font-size: .78rem; color: #6b7280; margin-top: 2px; }
.arv-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.4; letter-spacing: .01em; }
.arv-status-success { background: #dcfce7; color: #166534; }
.arv-status-warning { background: #fef9c3; color: #854d0e; }
.arv-status-danger { background: #fee2e2; color: #991b1b; }
.arv-status-info { background: #dbeafe; color: #1e40af; }
.arv-status-secondary { background: #f3f4f6; color: #374151; }
.arv-status-primary { background: #dcfce7; color: #166534; }
.arv-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; color: #374151; font-size: .78rem; font-weight: 600; text-decoration: none; transition: all .15s; flex-shrink: 0; }
.arv-back-btn:hover { background: #f9fafb; border-color: #d1d5db; color: #111827; }
.arv-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 22px; border-bottom: 1px solid #eef2f7; background: #fff; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.arv-tab { appearance: none; background: none; border: none; padding: 14px 18px 12px; font-size: .85rem; font-weight: 600; color: #6b7280; border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; margin-bottom: -1px; }
.arv-tab:hover { color: #111827; }
.arv-tab.is-active { color: var(--primary-color, #1a5f2a); border-bottom-color: var(--primary-color, #1a5f2a); }
.arv-tab i { font-size: .82rem; }
.arv-body { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 0; align-items: stretch; }
.arv-body.no-sidebar { grid-template-columns: 1fr; }
.arv-main { padding: 22px; min-width: 0; }
.arv-sidebar { border-left: 1px solid #eef2f7; background: #fafbfc; padding: 18px 18px 22px; }
@media (max-width:991.98px) { .arv-body { grid-template-columns: 1fr; } .arv-sidebar { border-left: none; border-top: 1px solid #eef2f7; } }
.arv-pane { display: none; }
.arv-pane.is-active { display: block; animation: arvFade .18s ease-out; }
@keyframes arvFade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.arv-section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-color, #1a5f2a); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.arv-section-title i { font-size: .78rem; }
.arv-section + .arv-section { margin-top: 22px; }
.arv-kv { width: 100%; border-collapse: collapse; }
.arv-kv td { padding: 8px 12px; font-size: .85rem; vertical-align: top; border-bottom: 1px solid #f3f4f6; }
.arv-kv tr:last-child td { border-bottom: none; }
.arv-kv td:first-child { color: #6b7280; font-weight: 600; width: 38%; }
.arv-kv td:last-child { color: #111827; word-break: break-word; }
.arv-kv a { color: var(--primary-color, #1a5f2a); text-decoration: none; }
.arv-kv a:hover { text-decoration: underline; }
.arv-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.arv-doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #374151; text-decoration: none; font-size: .83rem; font-weight: 600; transition: all .15s; }
.arv-doc:hover { border-color: var(--primary-color, #1a5f2a); background: #fbfdfa; color: #111827; transform: translateY(-1px); }
.arv-doc i { font-size: 1.1rem; color: var(--primary-color, #1a5f2a); flex-shrink: 0; }
.arv-doc-empty { font-size: .85rem; color: #9ca3af; padding: 14px 0; }
.arv-text-block { background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 10px; padding: 12px 14px; font-size: .85rem; line-height: 1.65; color: #374151; white-space: pre-wrap; word-break: break-word; }
.arv-log-list { display: flex; flex-direction: column; gap: 8px; }
.arv-log-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; }
.arv-log-arrow { font-weight: 700; color: #111827; font-size: .85rem; }
.arv-log-arrow .arv-log-from { color: #9ca3af; font-weight: 600; }
.arv-log-arrow .arv-sep { color: #9ca3af; margin: 0 4px; }
.arv-log-comment { font-size: .83rem; color: #374151; margin-top: 4px; }
.arv-log-meta { font-size: .72rem; color: #9ca3af; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.arv-log-meta .dot { color: #d1d5db; }
.arv-log-empty { font-size: .85rem; color: #9ca3af; padding: 14px; text-align: center; background: #f9fafb; border-radius: 10px; }
.arv-log-notify { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.arv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.4; border: 1px solid transparent; }
.arv-chip i { font-size: .65rem; }
.arv-chip--ok { background: #dcfce7; color: #166634; border-color: #bbf7d0; }
.arv-chip--err { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.arv-chip--skip { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.arv-chip--none { background: #f9fafb; color: #9ca3af; border-color: #f3f4f6; }
.arv-chip--intent { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.arv-chip--intent-off { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.arv-notify-row { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; }
.arv-notify-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .83rem; font-weight: 600; color: #111827; margin-bottom: 6px; }
.arv-notify-toggle input { margin: 0; cursor: pointer; }
.arv-notify-toggle i { color: var(--primary-color, #1a5f2a); }
.arv-notify-channels { display: flex; flex-wrap: wrap; gap: 10px; font-size: .72rem; font-weight: 600; }
.arv-notify-channels span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; }
.arv-notify-channels .is-on { background: #ecfdf5; color: #047857; }
.arv-notify-channels .is-off { background: #f3f4f6; color: #9ca3af; }
.arv-notify-channels i { font-size: .7rem; }
.arv-action-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }
.arv-action-card + .arv-action-card { margin-top: 14px; }
.arv-action-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #374151; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.arv-action-title i { color: var(--primary-color, #1a5f2a); }
.arv-action-card .form-label { font-size: .78rem; font-weight: 600; color: #374151; margin-bottom: 5px; }
.arv-action-card .form-select, .arv-action-card .form-control { font-size: .85rem; }
.arv-action-card .btn { font-size: .85rem; font-weight: 600; }
.arv-meta-list { font-size: .82rem; color: #374151; line-height: 1.7; }
.arv-meta-list i { color: var(--primary-color, #1a5f2a); width: 14px; text-align: center; margin-right: 4px; }
.arv-meta-list b { color: #111827; font-weight: 600; }
/* ═══════════════════════════════════════════════════
69. STAT CARDS (includes/components/stat-card.php)
── Used in admin dashboard and any page that
includes the shared stat-card component.
═══════════════════════════════════════════════════ */
/* ── Outer card ────────────────────────────────────── */
.stat-card {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 12px;
padding: 13px 15px;
text-decoration: none !important;
color: inherit !important;
transition: box-shadow .2s ease, border-color .2s, transform .18s ease;
box-shadow: 0 1px 4px rgba(15,23,42,.05);
min-height: 74px;
}
.stat-card:hover {
box-shadow: 0 5px 18px rgba(15,23,42,.10) !important;
border-color: var(--sc-accent, var(--primary-color, #1a5f2a)) !important;
transform: translateY(-2px);
color: inherit !important;
text-decoration: none !important;
}
/* ── Icon box ──────────────────────────────────────── */
.stat-card-icon {
width: 44px !important;
height: 44px !important;
border-radius: 10px !important;
flex-shrink: 0 !important;
font-size: 1.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── Text body ─────────────────────────────────────── */
.stat-card-body { flex: 1; min-width: 0; }
.stat-card-value {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.1;
color: #111827;
letter-spacing: -.02em;
}
.stat-card-label {
font-size: .7rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: .35px;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-card-trend {
font-size: .68rem;
color: #9ca3af;
margin-top: 2px;
}
.stat-card-badge {
display: inline-flex;
align-items: center;
font-size: .58rem;
font-weight: 700;
padding: 2px 6px;
background: var(--sc-accent, var(--primary-color, #1a5f2a));
color: #fff;
border-radius: 999px;
vertical-align: middle;
}
/* ── Trailing chevron ──────────────────────────────── */
.stat-card-chev {
color: #d1d5db !important;
font-size: .7rem !important;
transition: color .18s;
}
.stat-card:hover .stat-card-chev { color: var(--sc-accent, var(--primary-color, #1a5f2a)) !important; }
/* ── Neutralise Bootstrap .card styles bleeding in ─── */
.stat-card.stat-card-flat {
box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
}
.stat-card.stat-card-flat:hover {
box-shadow: 0 5px 18px rgba(15,23,42,.10) !important;
}
/* ── Mobile ────────────────────────────────────────── */
@media (max-width: 480px) {
.stat-card { padding: 10px 11px; gap: 9px; min-height: 62px; }
.stat-card-icon { width: 38px !important; height: 38px !important; font-size: .95rem !important; border-radius: 8px !important; }
.stat-card-value { font-size: 1.25rem; }
.stat-card-label { font-size: .64rem; }
}
/* ═══════════════════════════════════════════════════
70. ADMIN TOPBAR BRAND + LOGO FALLBACK
(admin/includes/admin-header.php — .admin-topbar-brand)
═══════════════════════════════════════════════════ */
/* ── Topbar brand link (logo or fallback) ─────────── */
.admin-topbar-brand {
display: flex !important;
align-items: center !important;
gap: 8px !important;
text-decoration: none !important;
flex-shrink: 0 !important;
margin-right: 4px !important;
}
.admin-topbar-brand img {
height: 34px !important;
width: auto !important;
max-width: 110px !important;
object-fit: contain !important;
border-radius: 6px !important;
}
/* ── No-logo fallback pill ─────────────────────────── */
.admin-logo-fallback {
width: 34px !important;
height: 34px !important;
border-radius: 9px !important;
background: color-mix(in srgb, var(--primary-color, #1a5f2a) 12%, #fff) !important;
border: 1.5px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 22%, #fff) !important;
color: var(--primary-color, #1a5f2a) !important;
display: grid !important;
place-items: center !important;
font-size: .95rem !important;
flex-shrink: 0 !important;
}
.admin-topbar-brand .brand-text {
font-size: .82rem !important;
font-weight: 700 !important;
color: #374151 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 110px !important;
}
/* ── Page title + date pill in topbar ──────────────── */
.page-title-wrap {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
}
.header-date-pill {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
background: color-mix(in srgb, var(--primary-color, #1a5f2a) 8%, #fff) !important;
border: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 18%, #fff) !important;
color: var(--primary-color, #1a5f2a) !important;
font-size: .7rem !important;
font-weight: 600 !important;
padding: 3px 9px !important;
border-radius: 999px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
letter-spacing: .1px !important;
}
.header-date-pill i { font-size: .68rem !important; opacity: .8; }
/* ── Suppress the mobile `display:none` override for topbar brand ─ */
@media (min-width: 769px) {
.admin-topbar-brand { display: flex !important; }
}
/* ========== admin-mobile.css ========== */
/**
* ════════════════════════════════════════════════════════════
* ADMIN MOBILE — Responsive Improvements v6.5
* Dev Bandana Cooperative
* ════════════════════════════════════════════════════════════
* Admin panel मा mobile-first experience सुधार्न।
* admin-modern.css को supplementary file।
* Load order: admin-modern.css → admin-mobile.css
* ════════════════════════════════════════════════════════════
*/
/* ─── MOBILE SIDEBAR OVERLAY BEHAVIOR ─────────────────────── */
@media (max-width: 991.98px) {
/* Content area full-width जब sidebar बन्द छ */
.main-content {
margin-left: 0 !important;
width: 100% !important;
}
/* Page content padding compact */
.page-content {
padding: 12px 12px 80px !important;
}
/* Sidebar: overlay mode */
.sidebar {
position: fixed !important;
top: 0; left: -280px;
width: 272px !important;
height: 100vh !important;
z-index: var(--z-sidebar, 950) !important;
transition: left .28s cubic-bezier(.4,0,.2,1) !important;
overflow-y: auto;
overflow-x: hidden;
}
.sidebar.active,
.sidebar.open,
.sidebar.sidebar-open {
left: 0 !important;
box-shadow: 4px 0 32px rgba(0,0,0,.22) !important;
}
/* Sidebar backdrop */
.sidebar-backdrop {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.50);
z-index: calc(var(--z-sidebar, 950) - 1);
/* backdrop-filter removed — causes entire page blur on mobile */
}
.sidebar.active ~ .sidebar-backdrop,
.sidebar.open ~ .sidebar-backdrop,
.sidebar.sidebar-open ~ .sidebar-backdrop {
display: block;
}
/* v9-mobile-fix.js uses .sidebar-overlay */
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.50);
z-index: calc(var(--z-sidebar, 950) - 1);
}
.sidebar-overlay.active { display: block; }
/* Admin header height compact */
.admin-header { height: 52px !important; }
/* Page header — wrap on mobile */
.page-header, .admin-page-header {
padding: 12px 14px !important;
gap: 8px !important;
}
/* Card body compact */
.card-body { padding: 14px !important; }
/* Table: horizontal scroll */
.table-responsive-stack {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Stat grid: 2 columns on tablet */
.ds-stats-grid,
.row-cols-md-4 > [class*="col-"],
.row-cols-lg-4 > [class*="col-"] {
flex: 0 0 50%;
max-width: 50%;
}
/* Form actions: stack on mobile */
.admin-form-actions {
flex-direction: row;
flex-wrap: wrap;
}
.admin-form-actions .btn {
flex: 1 1 auto;
min-width: 120px;
}
/* Modal: full-screen on mobile */
.modal-dialog {
margin: 6px !important;
max-width: calc(100vw - 12px) !important;
}
.modal-body {
max-height: calc(100svh - 140px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal-footer {
flex-wrap: wrap; gap: 8px;
}
.modal-footer .btn { flex: 1 1 auto; }
/* DataTables: compact header */
.dataTables_wrapper .dataTables_filter input {
width: 140px;
}
.dataTables_wrapper .row > div {
flex: 1 1 50%;
min-width: 0;
}
/* Nav-tabs: scrollable */
.nav-tabs {
flex-wrap: nowrap !important;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
white-space: nowrap;
}
}
/* ─── PHONE PORTRAIT ───────────────────────────────────────── */
@media (max-width: 575.98px) {
/* Stat grid: single column on phone */
.ds-stats-grid,
.row-cols-md-4 > [class*="col-"],
.row-cols-md-3 > [class*="col-"],
.row-cols-sm-2 > [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
}
/* Buttons: stacked in action bar */
.btn-group-action {
flex-wrap: wrap;
}
.btn-group-action .btn {
flex: 1 1 auto;
font-size: .78rem !important;
padding: 5px 8px !important;
}
/* Table th/td compact */
.table thead th { font-size: .72rem !important; padding: 7px 8px !important; }
.table tbody td { font-size: .82rem !important; padding: 8px 8px !important; }
/* Form controls: 100% on tiny screens */
.input-group { flex-wrap: wrap; }
.input-group > * { flex: 1 1 100%; border-radius: var(--adm-radius-sm) !important; margin-bottom: 4px; }
.input-group > *:last-child { margin-bottom: 0; }
/* Page title truncate */
.page-title {
font-size: .9rem !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 52vw;
}
/* Admin header logo */
.admin-topbar-brand img { max-height: 32px !important; }
/* Hide less important table columns — add .d-none-xs to td/th */
.d-none-xs { display: none !important; }
/* Card body padding minimal */
.card-body { padding: 12px !important; }
.card-header { padding: 10px 14px !important; }
/* Page header vertical on phone */
.page-header, .admin-page-header {
flex-direction: column !important;
align-items: flex-start !important;
padding: 10px 12px !important;
}
}
/* ─── ADMIN TABLE CARD-VIEW (mobile ≤640px) ───────────────── */
@media (max-width: 640px) {
.admin-table-card .table-responsive-stack table,
.admin-table-card .table-responsive-stack thead,
.admin-table-card .table-responsive-stack tbody,
.admin-table-card .table-responsive-stack th,
.admin-table-card .table-responsive-stack td,
.admin-table-card .table-responsive-stack tr,
table.admin-card-table,
table.admin-card-table thead,
table.admin-card-table tbody,
table.admin-card-table th,
table.admin-card-table td,
table.admin-card-table tr {
display: block;
width: 100%;
}
.admin-table-card .table-responsive-stack thead tr,
table.admin-card-table thead tr {
position: absolute;
top: -9999px; left: -9999px;
}
.admin-table-card .table-responsive-stack td[data-label],
table.admin-card-table td[data-label] {
padding: 7px 12px !important;
border: none !important;
border-bottom: 1px solid #f3f4f6 !important;
display: flex !important;
align-items: flex-start;
gap: 8px;
font-size: .84rem !important;
}
.admin-table-card .table-responsive-stack td[data-label]::before,
table.admin-card-table td[data-label]::before {
content: attr(data-label);
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #6b7280;
min-width: 100px;
flex-shrink: 0;
}
.admin-table-card .table-responsive-stack tr,
table.admin-card-table tr {
background: #fff;
border: 1px solid #e8edeb;
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
}
/* ─── TOUCH TARGETS — minimum 44×44px ─────────────────────── */
@media (max-width: 991.98px) {
.btn, .nav-link, .page-link,
.form-control, .form-select {
min-height: 44px;
}
.btn-sm { min-height: 36px; }
.btn-group-action .btn { min-height: 34px; }
/* Sidebar nav links */
.sidebar-nav li a {
min-height: 44px !important;
display: flex !important;
align-items: center !important;
}
}
/* ─── PRINT ADMIN ──────────────────────────────────────────── */
@media print {
.sidebar, .admin-header, .sidebar-backdrop,
.btn-group-action, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.pagination { display: none !important; }
.main-content { margin: 0 !important; }
.page-content { padding: 0 !important; }
.card { box-shadow: none !important; border: 1px solid #ccc !important; }
.table thead th { background: #f0f0f0 !important; color: #000 !important; }
}
/* ========== admin-stat-cards.css ========== */
/* Uniform Stat/Count Cards CSS */
.stat-uniform-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.stat-uniform-card {
min-height: 118px;
border-radius: 0.75rem;
transition: all 0.2s ease;
border-left: 4px solid var(--bs-primary);
background: #fff;
color: inherit;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.stat-uniform-card:hover {
transform: translateY(-2px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
text-decoration: none;
color: inherit;
}
.stat-uniform-card:focus {
outline: none;
box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.05) !important;
}
/* Color variants */
.stat-uniform-card[data-bg="primary"] {
border-left-color: var(--bs-primary);
}
.stat-uniform-card[data-bg="secondary"] {
border-left-color: var(--bs-secondary);
}
.stat-uniform-card[data-bg="success"] {
border-left-color: var(--bs-success);
}
.stat-uniform-card[data-bg="danger"] {
border-left-color: var(--bs-danger);
}
.stat-uniform-card[data-bg="warning"] {
border-left-color: var(--bs-warning);
}
.stat-uniform-card[data-bg="info"] {
border-left-color: var(--bs-info);
}
.stat-uniform-card[data-bg="light"] {
border-left-color: var(--bs-light);
}
.stat-uniform-card[data-bg="dark"] {
border-left-color: var(--bs-dark);
}
/* Icon styling */
.stat-uniform-icon {
font-size: 1.4rem;
color: var(--bs-secondary);
margin-bottom: 0.25rem;
line-height: 1;
}
/* Value styling */
.stat-uniform-value {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.1;
margin: 0.25rem 0;
}
/* Label styling */
.stat-uniform-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
/* Mobile responsive */
@media (max-width: 575.98px) {
.stat-uniform-value {
font-size: 1.2rem;
}
.stat-uniform-icon {
font-size: 1.1rem;
}
.stat-uniform-card {
min-height: 100px;
padding: 1rem !important;
}
.stat-uniform-label {
font-size: 0.65rem;
}
}
/* Tablet responsive */
@media (min-width: 576px) and (max-width: 767.98px) {
.stat-uniform-card {
min-height: 110px;
}
}
/* ========== theme-overrides-v4.css ========== */
/* Merged from theme-overrides-v3.css — kept before v4 rules to preserve cascade order */
/* ═══════════════════════════════════════════════════════════════
THEME OVERRIDES v3 — Phase 3 visual unification
Catches off-theme colors, fonts, and spacing across:
- member-welfare.php (claim type icons)
- online-kyc.php (wizard step buttons)
- छिटो लिंक quick-link dropdown
- notice cards, top-bar, mobile fonts
═══════════════════════════════════════════════════════════════ */
/* ─── 1. CLAIM TYPE ICONS (member-welfare.php) ─────────────────
Inline background-color attrs override theme; we use !important
to recolor them as soft theme-derived tints with subtle hue shift
for distinction (still semantic but no longer rainbow). */
.claim-types-list .claim-type-item .type-icon {
background-color: var(--primary-color) !important;
color: var(--text-on-primary, #fff) !important;
box-shadow: 0 2px 6px rgba(var(--primary-rgb,26,95,42), .25);
border-radius: 10px;
}
.claim-types-list .claim-type-item[data-type="death"] .type-icon { background-color: #475569 !important; }
.claim-types-list .claim-type-item[data-type="accident"] .type-icon { background-color: var(--color-warning, #d97706) !important; }
.claim-types-list .claim-type-item[data-type="medical"] .type-icon { background-color: var(--color-success, #16a34a) !important; }
.claim-types-list .claim-type-item[data-type="insurance"] .type-icon { background-color: var(--color-info, #0891b2) !important; }
.claim-types-list .claim-type-item[data-type="maternity"] .type-icon { background-color: #db2777 !important; }
.claim-types-list .claim-type-item[data-type="other"] .type-icon { background-color: var(--primary-color) !important; }
/* Radio-card type-box — outline + theme-tinted hover */
.claim-type-selector .type-option .type-box {
border: 1.5px solid var(--border-color, #e5e7eb);
border-radius: var(--radius-md, 10px);
padding: 10px 12px;
transition: all .18s ease;
background: #fff;
}
.claim-type-selector .type-option:hover .type-box,
.claim-type-selector .type-option input:checked + .type-box {
border-color: var(--primary-color);
background: rgba(var(--primary-rgb,26,95,42), .06);
color: var(--primary-dark);
box-shadow: var(--shadow-focus);
}
/* ─── 2. ONLINE KYC — wizard step pills visibility fix ─────── */
#kymWizardNav.kym-wizard-nav {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
#kymWizardNav .kym-step-btn {
border-radius: 999px !important;
flex-shrink: 0;
font-family: var(--font-primary);
}
#kymWizardNav .kym-step-btn .kym-step-num {
margin-right: 4px;
}
#kymWizardNav .kym-step-label {
max-width: 140px;
}
@media (max-width: 576px) {
#kymWizardNav .kym-step-label { max-width: 90px; }
}
/* ─── 3. QUICK-LINK (छिटो लिंक) DROPDOWN — kill red, use theme ─ */
.dropdown-menu.quick-link-menu,
.quick-links-dropdown .dropdown-menu,
.dropdown-menu[data-quick="links"],
.topbar .dropdown-menu {
background: #fff !important;
color: var(--text-primary, #1a2e1f) !important;
border: 1px solid var(--border-color, #e5e7eb) !important;
border-radius: var(--radius-md, 10px) !important;
box-shadow: var(--shadow-lg) !important;
padding: 6px !important;
}
.topbar .dropdown-menu .dropdown-item,
.quick-links-dropdown .dropdown-menu .dropdown-item {
color: var(--text-primary, #1a2e1f) !important;
border-radius: 6px;
padding: 8px 12px;
font-size: var(--font-size-sm, .875rem);
}
.topbar .dropdown-menu .dropdown-item:hover,
.quick-links-dropdown .dropdown-menu .dropdown-item:hover {
background: rgba(var(--primary-rgb,26,95,42), .08) !important;
color: var(--primary-dark) !important;
}
.topbar .dropdown-menu .dropdown-item i,
.quick-links-dropdown .dropdown-menu .dropdown-item i {
color: var(--primary-color);
width: 18px;
text-align: center;
}
.pfl-quick-links > li.has-drop .pfl-drop{
min-width: 350px !important;
max-width: min(350px, calc(100vw - 28px)) !important;
padding: 10px !important;
background: var(--bg-card, #fff) !important;
border: 1px solid var(--border-color, #e5e7eb) !important;
border-top: 3px solid var(--primary-color, #1a5f2a) !important;
border-radius: 0 0 10px 10px !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, .16) !important;
}
.pfl-drop a{
display: flex !important;
align-items: center !important;
gap: 14px !important;
width: 100% !important;
min-height: 44px !important;
padding: 8px 14px !important;
color: var(--text-primary, #1f2937) !important;
font-size: 1.02rem !important;
font-weight: 500 !important;
line-height: 1.35 !important;
border-radius: 8px !important;
white-space: nowrap !important;
}
.pfl-drop a i{
width: 22px !important;
min-width: 22px !important;
text-align: center !important;
color: var(--text-secondary, #374151) !important;
font-size: 1.05rem !important;
}
.pfl-drop a:hover,
.pfl-drop a:focus{
background: color-mix(in srgb, var(--primary-color, #1a5f2a) 8%, #fff) !important;
color: var(--primary-color, #1a5f2a) !important;
}
.pfl-drop a:hover i,
.pfl-drop a:focus i{
color: var(--primary-color, #1a5f2a) !important;
}
@media (max-width: 420px){
.pfl-quick-links > li.has-drop .pfl-drop{
left: -10px !important;
min-width: calc(100vw - 24px) !important;
}
}
/* ─── 4. NOTICE LIST CARDS — homepage सूचनाहरू unify gradient ── */
.notices-box-enhanced .notices-header,
.notice-card .notice-card-header,
.notices-section .section-header,
.notice-list-card > .card-header {
background: linear-gradient(135deg,
var(--primary-dark, #144a21),
var(--primary-color, #1a5f2a)) !important;
color: var(--text-on-primary, #fff) !important;
}
.notices-box-enhanced .notices-header h3,
.notices-box-enhanced .notices-header h3 i { color: #fff !important; }
/* Date pill — theme-tinted instead of orange */
.notice-date-box,
.notice-date,
.notice-item .date-badge {
background: rgba(var(--primary-rgb,26,95,42), .10) !important;
color: var(--primary-dark) !important;
}
.notice-date-box .day,
.notice-date .day { color: var(--primary-color) !important; }
/* ─── 5. FONT SIZE — bump small/cramped text on mobile ──────── */
@media (max-width: 768px) {
body, .form-control, .form-select {
font-size: var(--font-size-base, 0.9375rem);
}
.small, small { font-size: 0.825rem; }
.breadcrumb, .breadcrumb-modern { font-size: 0.8rem; }
.page-title-modern { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
h1 { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }
h2 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
h3 { font-size: clamp(1.05rem, 4vw, 1.4rem); }
}
/* ─── 6. TABLE LIST — consistent header/row styling ─────────── */
.table.table-modern thead th,
.admin-table thead th,
.member-table thead th {
background: rgba(var(--primary-rgb,26,95,42), .08);
color: var(--primary-dark);
font-weight: 700;
font-size: var(--font-size-sm);
border-bottom: 2px solid var(--primary-color);
}
.table.table-modern tbody tr:hover,
.admin-table tbody tr:hover,
.member-table tbody tr:hover {
background: rgba(var(--primary-rgb,26,95,42), .04);
}
/* ─── 7. TABS — unified theme look ──────────────────────────── */
.nav-tabs .nav-link {
color: var(--text-secondary);
border-radius: 8px 8px 0 0;
font-weight: 600;
font-size: var(--font-size-sm);
}
.nav-tabs .nav-link.active {
color: var(--primary-color);
border-color: var(--border-color) var(--border-color) #fff;
border-bottom: 2px solid var(--primary-color);
background: #fff;
}
.nav-pills .nav-link.active {
background: var(--primary-color) !important;
color: var(--text-on-primary) !important;
}
/* ─── 8. ICONS in cards — match brand ───────────────────────── */
.feature-card .icon, .service-card .icon, .stat-card .icon,
.info-card i:first-child, .quick-action i {
color: var(--primary-color);
}
/* ─── 9. FORM controls — consistent on every panel ──────────── */
.form-control, .form-select, .input-group-text {
border-radius: var(--radius-sm, 6px);
font-family: var(--font-primary);
font-size: var(--font-size-base);
}
.form-label { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); }
/* ─── 10. BUTTONS — kill stray bootstrap red/yellow on brand ── */
.btn-warning.btn-brand-override,
.btn-danger.btn-brand-override {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: var(--text-on-primary) !important;
}
/* ════════════════════════════════════════════════════════════
* Theme Overrides v4 — gradient/token unification (2026-05-13)
* Targets remaining hardcoded amber/yellow & gradient mixes
* in assets/css/style.css. Token-only — zero brand colors.
* ════════════════════════════════════════════════════════════ */
:root{
--primary-soft-bg: color-mix(in oklab, var(--primary-color, #1a5f2a) 8%, #fff);
--primary-soft-bd: color-mix(in oklab, var(--primary-color, #1a5f2a) 18%, #fff);
--secondary-soft-bg: color-mix(in oklab, var(--secondary-color, #dc2626) 8%, #fff);
--gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-light, var(--primary-color)));
--gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--secondary-light, var(--secondary-color)));
--shadow-elev-1: 0 4px 12px rgba(15,23,42,.08);
--shadow-elev-2: 0 10px 24px rgba(15,23,42,.12);
}
/* Remove stray hard-coded amber/yellow tones from style.css gradients */
[style*="#ffd54f"], [style*="#ffca2c"]{ background-image: var(--gradient-secondary) !important; }
/* Buttons — use brand tokens consistently */
.btn-primary{
background: var(--gradient-primary);
border-color: var(--primary-color);
box-shadow: 0 2px 6px color-mix(in oklab, var(--primary-color) 25%, transparent);
}
.btn-primary:hover, .btn-primary:focus{
filter: brightness(1.05);
background: var(--gradient-primary);
border-color: var(--primary-color);
}
.btn-warning, .btn-secondary-brand{
background: var(--gradient-secondary);
border-color: var(--secondary-color);
color:#fff;
}
/* Cards / sections that previously used random yellow accents */
.card-accent-yellow, .badge-yellow, .pill-yellow{
background: var(--secondary-soft-bg);
color: var(--secondary-color);
border:1px solid color-mix(in oklab, var(--secondary-color) 22%, #fff);
}
/* Tables — soften header to brand tint */
.table > thead{ background: var(--primary-soft-bg); }
.table > thead th{ color: var(--primary-color); border-color: var(--primary-soft-bd); font-weight:700; }
/* Admin KPI stat cards — remove nested text box/background artifacts */
.stat-card.stat-card-flat,
.stat-card.stat-card-compact{
background: var(--bg-card, #fff) !important;
background-image: none !important;
border: 1px solid var(--border-soft, #edf2ef) !important;
border-radius: 12px !important;
box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
overflow: hidden !important;
}
.stat-card .stat-card-body,
.stat-card .stat-card-value,
.stat-card .stat-card-label,
.stat-card .stat-card-trend{
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
}
.stat-card .stat-card-body{
display: flex !important;
min-width: 0 !important;
flex-direction: column !important;
justify-content: center !important;
gap: 2px !important;
}
.stat-card .stat-card-value{
color: var(--sc-accent, var(--primary-color, #1a5f2a)) !important;
line-height: 1.05 !important;
}
.stat-card .stat-card-label,
.stat-card .stat-card-trend{
color: var(--text-secondary, #647067) !important;
line-height: 1.25 !important;
}
.stat-card .stat-card-label::before,
.stat-card .stat-card-label::after,
.stat-card .stat-card-body::before,
.stat-card .stat-card-body::after{
display: none !important;
content: none !important;
}
/* Form controls — consistent focus ring */
.form-control:focus, .form-select:focus{
border-color: var(--primary-color);
box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary-color) 22%, transparent);
}
/* Floating helpers (admin / public) */
.admin-fab-msg, .public-fab-help{ box-shadow: var(--shadow-elev-2); }
/* Bottom-nav active item — token instead of hardcoded green tint */
.admin-bottom-nav .admin-nav-item.active,
.admin-bottom-nav .admin-nav-item:hover,
.mob-bn-item.active{
color: var(--primary-color) !important;
background: var(--primary-soft-bg) !important;
}
/* Mobile typography baseline */
@media (max-width:640px){
body{ font-size: .9375rem; line-height:1.55; }
h1{ font-size: clamp(1.35rem, 4.5vw, 1.75rem); }
h2{ font-size: clamp(1.2rem, 4vw, 1.5rem); }
h3{ font-size: clamp(1.05rem, 3.5vw, 1.25rem); }
}
/* ════════════════════════════════════════════════════════════
* v11.2 — Flat single-box stat-card (kills "double box" bug)
* ════════════════════════════════════════════════════════════ */
:root{
--color-success: var(--color-success, #16a34a);
--color-danger: var(--color-danger, #dc2626);
--color-warning: var(--color-warning, #f59e0b);
--color-info: var(--color-info, #0ea5e9);
}
.stat-card-row .stat-card.stat-card-flat{
background: #fff !important;
border: 1px solid color-mix(in oklab, var(--sc-accent) 18%, #e5e7eb) !important;
box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card-row .stat-card.stat-card-flat:hover{
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(15,23,42,.08) !important;
}
.stat-card-row .stat-card-icon{
width:44px; height:44px; border-radius:12px; font-size:1.05rem;
box-shadow: 0 4px 10px color-mix(in oklab, var(--sc-accent) 35%, transparent);
}
.stat-card-row .stat-card-value{
font-weight:800; line-height:1; font-size:1.5rem;
color: var(--sc-accent);
margin-bottom:2px;
}
.stat-card-row .stat-card-label{
font-size:.75rem; font-weight:600; color:#6b7280;
text-transform:uppercase; letter-spacing:.03em;
}
.stat-card-row .stat-card-trend{
font-size:.7rem; font-weight:600; color:var(--sc-accent); margin-top:2px;
}
.stat-card-row .stat-card-chev{ color:var(--sc-accent); opacity:.45; font-size:.75rem; }
.stat-card-row .stat-card-badge{
font-size:.6rem; background: color-mix(in oklab, var(--sc-accent) 15%, #fff);
color: var(--sc-accent); border:1px solid color-mix(in oklab, var(--sc-accent) 25%, #fff);
}
@media (max-width:480px){
.stat-card-row .stat-card-value{ font-size:1.25rem; }
.stat-card-row .stat-card-icon{ width:38px; height:38px; font-size:.95rem; }
}
/* Public-side floating chat button (v11.2) */
.public-fab-help[data-chat="1"]{ right:18px; }
#publicChatPanel{
position:fixed; right:18px; bottom:160px; z-index:65;
width:340px; max-width:calc(100vw - 24px);
background:#fff; border:1px solid #e6e9ef; border-radius:16px;
box-shadow:0 16px 40px rgba(15,23,42,.18);
display:none; flex-direction:column; overflow:hidden; font-family:inherit;
}
#publicChatPanel.open{ display:flex; }
#publicChatPanel .pcp-h{
background:var(--primary-color,#1a5f2a); color:#fff;
padding:12px 14px; display:flex; align-items:center; gap:10px;
}
#publicChatPanel .pcp-h .pcp-title{ font-weight:700; font-size:14px; }
#publicChatPanel .pcp-h .pcp-sub{ font-size:11px; opacity:.85; }
#publicChatPanel .pcp-x{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:18px; cursor:pointer; }
#publicChatPanel .pcp-body{ padding:14px; max-height:420px; overflow:auto; }
#publicChatPanel .pcp-body label{ font-size:12px; font-weight:600; color:#374151; display:block; margin-bottom:4px; }
#publicChatPanel .pcp-body input,
#publicChatPanel .pcp-body textarea{
width:100%; border:1px solid #e6e9ef; border-radius:10px;
padding:9px 11px; font-size:14px; margin-bottom:10px;
font-family:inherit;
}
#publicChatPanel .pcp-body textarea{ min-height:90px; resize:vertical; }
#publicChatPanel .pcp-body button{
width:100%; border:0; border-radius:10px; padding:10px 14px;
background:var(--primary-color,#1a5f2a); color:#fff;
font-weight:700; font-size:14px; cursor:pointer;
}
#publicChatPanel .pcp-msg{ font-size:12.5px; padding:8px 10px; border-radius:8px; margin-top:6px; }
#publicChatPanel .pcp-msg.ok{ background:#ecfdf5; color:#065f46; border:1px solid #6ee7b7; }
#publicChatPanel .pcp-msg.err{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
/* ════════════════════════════════════════════════════════════
* v11.3 — Final live/cPanel visibility fixes
* These overrides load last in public/admin/member headers.
* ════════════════════════════════════════════════════════════ */
html, body{
font-family: var(--font-primary, 'Mukta', 'Noto Sans Devanagari', system-ui, sans-serif) !important;
color: var(--text-color, #1f2937);
}
body{ background: var(--bg-soft, #f6faf7); }
/* Public header: avoid random blue utility bar from stale secondary color */
.pfl-top-bar,
.top-bar{
background: var(--primary-color, #1a5f2a) !important;
color: var(--text-on-primary, #fff) !important;
}
.pfl-top-bar a,
.top-bar a{ color: var(--text-on-primary, #fff) !important; }
.pfl-drop,
.main-nav .dropdown,
.nav-menu .dropdown{
background: var(--bg-card, #fff) !important;
border: 1px solid var(--border-color, #e5e7eb) !important;
box-shadow: 0 16px 34px rgba(15,23,42,.12) !important;
}
.pfl-drop a,
.main-nav .dropdown a,
.nav-menu .dropdown a{
color: var(--text-color, #1f2937) !important;
background: transparent !important;
}
.pfl-drop a:hover,
.main-nav .dropdown a:hover,
.nav-menu .dropdown a:hover{
color: var(--primary-color, #1a5f2a) !important;
background: color-mix(in srgb, var(--primary-color, #1a5f2a) 9%, #fff) !important;
}
/* Online KYC stepper: screenshot issue — no giant outlined buttons */
#kymWizardNav.kym-wizard-nav,
.kym-wizard-nav{
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 10px 12px !important;
background: color-mix(in srgb, var(--primary-color, #1a5f2a) 6%, #fff) !important;
border: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 16%, #e5e7eb) !important;
border-radius: 14px !important;
scrollbar-width: thin;
}
#kymWizardNav .kym-step-btn,
.kym-step-btn{
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
flex: 0 0 auto !important;
max-width: 176px !important;
min-height: 34px !important;
padding: 6px 12px !important;
border: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 22%, #d7dde5) !important;
border-radius: 999px !important;
background: var(--bg-card, #fff) !important;
color: var(--text-color, #1f2937) !important;
box-shadow: none !important;
font: 700 .78rem/1.15 var(--font-primary, 'Mukta', sans-serif) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-decoration: none !important;
}
#kymWizardNav .kym-step-btn.active,
.kym-step-btn.active{
background: var(--primary-color, #1a5f2a) !important;
color: var(--text-on-primary, #fff) !important;
border-color: var(--primary-color, #1a5f2a) !important;
}
#kymWizardNav .kym-step-btn.done,
.kym-step-btn.done{
background: color-mix(in srgb, var(--primary-color, #1a5f2a) 11%, #fff) !important;
color: var(--primary-dark, var(--primary-color, #1a5f2a)) !important;
}
#kymWizardNav .kym-step-num,
.kym-step-btn .kym-step-num{
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: color-mix(in srgb, var(--primary-color, #1a5f2a) 12%, #fff) !important;
color: inherit !important;
font-size: .72rem !important;
}
#kymWizardNav .kym-step-btn.active .kym-step-num,
.kym-step-btn.active .kym-step-num{
background: color-mix(in srgb, #fff 24%, transparent) !important;
color: var(--text-on-primary, #fff) !important;
}
#kymWizardNav .kym-step-label,
.kym-step-label{
display: block !important;
max-width: 124px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.kym-wizard-hint{
font-size: .92rem !important;
color: var(--text-light, #4b5563) !important;
}
@media (max-width: 576px){
#kymWizardNav .kym-step-btn,
.kym-step-btn{ max-width: 136px !important; padding: 6px 10px !important; font-size: .74rem !important; }
#kymWizardNav .kym-step-label,
.kym-step-label{ max-width: 92px !important; }
}
/* Cooperative programs: make cards styled even when older pages missed public-modern.css */
.cp-hero{ background: linear-gradient(135deg, var(--primary-dark, var(--primary-color)), var(--primary-color)) !important; color: var(--text-on-primary, #fff) !important; padding: 2rem 0 1.7rem !important; }
.cp-hero-inner{ display:flex !important; align-items:center !important; gap:1.25rem !important; flex-wrap:wrap !important; }
.cp-hero-icon{ width:64px !important; height:64px !important; border-radius:14px !important; background:rgba(255,255,255,.14) !important; display:grid !important; place-items:center !important; font-size:1.8rem !important; color:#fff !important; }
.cp-hero-text{ flex:1 1 260px !important; }
.cp-hero-text h2{ color:#fff !important; font-size:1.55rem !important; font-weight:800 !important; margin:0 0 .25rem !important; }
.cp-hero-text p{ color:rgba(255,255,255,.82) !important; margin:0 !important; }
.cp-hero-stats{ display:flex !important; gap:.7rem !important; flex-wrap:wrap !important; }
.cp-stat-box{ min-width:78px !important; padding:.65rem .95rem !important; border-radius:10px !important; background:rgba(255,255,255,.13) !important; border:1px solid rgba(255,255,255,.22) !important; text-align:center !important; }
.cp-stat-num{ color:#fff !important; font-size:1.35rem !important; font-weight:800 !important; line-height:1 !important; }
.cp-stat-lbl{ color:rgba(255,255,255,.72) !important; font-size:.7rem !important; }
.cp-shell{ background: var(--bg-soft, #f6faf7) !important; padding:2rem 0 3rem !important; }
.cp-section-sub h3{ color:var(--primary-dark, var(--primary-color)) !important; font-weight:800 !important; display:flex !important; align-items:center !important; gap:.5rem !important; }
.cp-card{ height:100% !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; border-radius:14px !important; background:var(--bg-card,#fff) !important; border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 14%, #e5e7eb) !important; box-shadow:0 6px 18px rgba(15,23,42,.07) !important; }
.cp-card-head{ display:flex !important; gap:.85rem !important; align-items:flex-start !important; padding:.95rem 1.1rem !important; background:linear-gradient(135deg, var(--primary-color), var(--primary-dark,var(--primary-color))) !important; color:#fff !important; }
.cp-date-box{ min-width:46px !important; padding:.34rem .55rem !important; text-align:center !important; border-radius:9px !important; background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.25) !important; }
.cp-date-box .dd{ color:#fff !important; font-size:1.22rem !important; font-weight:800 !important; line-height:1 !important; }
.cp-date-box .mm{ color:rgba(255,255,255,.78) !important; font-size:.62rem !important; font-weight:700 !important; }
.cp-head-right h5{ color:#fff !important; font-size:1rem !important; line-height:1.35 !important; font-weight:800 !important; margin:0 0 .35rem !important; }
.cp-open-badge,.cp-closed-badge{ display:inline-flex !important; align-items:center !important; gap:.28rem !important; border-radius:999px !important; padding:.2rem .62rem !important; font-size:.72rem !important; font-weight:800 !important; }
.cp-open-badge{ background:#fff !important; color:var(--primary-color,#1a5f2a) !important; }
.cp-closed-badge{ background:rgba(255,255,255,.16) !important; color:rgba(255,255,255,.78) !important; }
.cp-card-body{ padding:1rem 1.1rem !important; flex:1 !important; }
.cp-meta-row{ display:flex !important; flex-wrap:wrap !important; gap:.42rem !important; margin-bottom:.8rem !important; }
.cp-pill{ display:inline-flex !important; align-items:center !important; gap:.28rem !important; border-radius:999px !important; padding:.28rem .65rem !important; font-size:.8rem !important; font-weight:700 !important; background:color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important; color:var(--primary-dark,var(--primary-color)) !important; }
.cp-desc-text{ color:var(--text-light,#4b5563) !important; font-size:.92rem !important; line-height:1.55 !important; margin-bottom:.9rem !important; }
.cp-btn-prereg,.cp-att-btn{ border:0 !important; border-radius:9px !important; display:inline-flex !important; align-items:center !important; gap:.38rem !important; text-decoration:none !important; font-weight:800 !important; }
.cp-btn-prereg{ background:var(--primary-color,#1a5f2a) !important; color:#fff !important; padding:.46rem .95rem !important; }
.cp-card-footer{ padding:.7rem 1.1rem !important; border-top:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important; background:color-mix(in srgb, var(--primary-color,#1a5f2a) 4%, #fff) !important; text-align:right !important; }
.cp-att-btn{ color:var(--primary-color,#1a5f2a) !important; background:color-mix(in srgb, var(--primary-color,#1a5f2a) 9%, #fff) !important; border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 20%, #e5e7eb) !important; padding:.34rem .72rem !important; }
@media (max-width:575px){ .cp-hero-icon{display:none!important;} .cp-hero-text h2{font-size:1.25rem!important;} .cp-card-head{padding:.85rem .95rem!important;} }
/* Member header/nav: compact desktop, quick-application links do not dominate header */
.mem-nav{
display:flex !important;
gap:8px !important;
overflow-x:auto !important;
padding:10px !important;
margin:12px 0 18px !important;
border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important;
border-radius:14px !important;
background:var(--bg-card,#fff) !important;
box-shadow:0 4px 14px rgba(15,23,42,.06) !important;
}
.mem-nav-item{
flex:0 0 auto !important;
min-width:72px !important;
max-width:118px !important;
min-height:58px !important;
padding:8px 10px !important;
border-radius:12px !important;
color:var(--text-muted,#6b7280) !important;
background:transparent !important;
text-align:center !important;
font-size:.78rem !important;
line-height:1.15 !important;
font-weight:700 !important;
text-decoration:none !important;
}
.mem-nav-item i{ display:block !important; margin:0 auto 5px !important; font-size:1.05rem !important; color:currentColor !important; }
.mem-nav-item.active,.mem-nav-item:hover{ background:var(--primary-color,#1a5f2a) !important; color:#fff !important; }
@media (min-width: 992px){
.mem-nav .mem-nav-item[href*="loan-apply"],
.mem-nav .mem-nav-item[href*="account-apply"],
.mem-nav .mem-nav-item[href*="digital-service"],
.mem-nav .mem-nav-item[href*="service-request"],
.mem-nav .mem-nav-item[href*="appointment"]{ display:none !important; }
}
/* Admin header: keep it CLEAN + readable (light header, token-driven) */
.admin-header{
min-height:64px !important;
background: var(--bg-card, #fff) !important;
color: var(--text-primary, #0f172a) !important;
}
.admin-header .page-title{
color: var(--text-primary, #0f172a) !important;
font-size:1.1rem !important;
}
.admin-header .header-date-pill,
.admin-header .version-badge{
background: color-mix(in srgb, var(--primary-color,#1a5f2a) 10%, #fff) !important;
color: var(--primary-color,#1a5f2a) !important;
border-color: color-mix(in srgb, var(--primary-color,#1a5f2a) 20%, #e5e7eb) !important;
}
.admin-header .admin-name-inline{ color: var(--primary-color,#1a5f2a) !important; }
.admin-avatar-sm{ width:32px !important; height:32px !important; border-radius:50% !important; object-fit:cover !important; }
.stat-card-row{ row-gap:14px !important; }
.stat-card-row .stat-card,
.mem-stat,
.ds-card{ border-radius:12px !important; box-shadow:0 4px 14px rgba(15,23,42,.06) !important; border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important; background:var(--bg-card,#fff) !important; }
/* Footer / mobile bottom nav: no overlap with chat buttons */
.mob-bottomnav,
.mp-bottom-nav{ box-shadow:0 -8px 24px rgba(15,23,42,.10) !important; border-top:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important; }
.mob-bn-item,
.mp-bottom-nav a{ color:var(--text-muted,#6b7280) !important; }
.mob-bn-item.active,
.mob-bn-item:hover,
.mp-bottom-nav a.active,
.mp-bottom-nav a:hover{ color:var(--primary-color,#1a5f2a) !important; background:color-mix(in srgb, var(--primary-color,#1a5f2a) 9%, #fff) !important; }
.public-fab-help,.admin-fab-msg{ bottom:92px !important; }
@media (min-width:900px){ .public-fab-help,.admin-fab-msg{ bottom:24px !important; } }
/* ════════════════════════════════════════════════════════════
* v11.4 — Deep polish (2026-05-13 PM)
* - Admin top bar: cleaner Super Admin pill, no red box
* - Stat-card values: kill any inherited box/highlight
* - Welfare claims tiles: tighter, unified
* - Modal forms: force white inputs + readable text
* - Single quick-help launcher (collapses WhatsApp/Help/Chat)
* ════════════════════════════════════════════════════════════ */
/* ── Admin top bar refinement (light header) ── */
.admin-header .admin-info{
background: color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important;
border: 1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 20%, #e5e7eb) !important;
border-radius:999px !important;
padding:4px 10px 4px 4px !important;
display:inline-flex !important; align-items:center !important; gap:8px !important;
}
.admin-header .admin-info .role-badge,
.admin-header .admin-info .badge,
.admin-header .role-pill{
background:rgba(255,255,255,.92) !important;
color:var(--primary-color,#1a5f2a) !important;
border:0 !important;
font-weight:700 !important;
border-radius:999px !important;
padding:2px 10px !important;
font-size:.72rem !important;
}
.admin-header .header-date-pill,
.admin-header .version-badge{
border-radius:999px !important;
padding:4px 10px !important;
font-size:.78rem !important;
font-weight:600 !important;
}
/* ── Stat-card value: no white-box / outline shadow ── */
.stat-card .stat-card-value,
.stat-card-flat .stat-card-value{
background:transparent !important;
box-shadow:none !important;
text-shadow:none !important;
border:0 !important;
padding:0 !important;
font-weight:800 !important;
font-size:1.6rem !important;
line-height:1.1 !important;
color:var(--primary-color,#1a5f2a) !important;
}
.stat-card .stat-card-label,
.stat-card-flat .stat-card-label{
color:var(--text-muted,#6b7280) !important;
font-weight:600 !important;
font-size:.86rem !important;
}
.stat-card-icon{
width:46px !important; height:46px !important;
border-radius:12px !important;
font-size:1.15rem !important;
box-shadow:none !important;
}
/* ── Welfare claims summary tiles ── */
.welfare-summary,
.kalyan-summary{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:14px !important; }
.welfare-summary .ws-tile,
.kalyan-summary .ws-tile{
background:var(--bg-card,#fff) !important;
border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important;
border-radius:14px !important;
padding:14px 16px !important;
display:flex !important; align-items:center !important; gap:12px !important;
box-shadow:0 4px 14px rgba(15,23,42,.05) !important;
}
.welfare-summary .ws-icon,
.kalyan-summary .ws-icon{
width:42px !important; height:42px !important; border-radius:12px !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
background:color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #fff) !important;
color:var(--primary-color,#1a5f2a) !important;
}
.welfare-summary .ws-num,
.kalyan-summary .ws-num{ font-size:1.45rem !important; font-weight:800 !important; line-height:1 !important; }
@media (max-width:640px){
.welfare-summary,.kalyan-summary{ grid-template-columns:1fr !important; }
}
/* ── Modal forms: prevent green/dark theme bleeding into inputs ── */
.stf-modal-card .form-control,
.stf-modal-card .form-select,
.stf-modal-card input[type="text"],
.stf-modal-card input[type="email"],
.stf-modal-card input[type="tel"],
.stf-modal-card input[type="date"],
.stf-modal-card input[type="number"],
.stf-modal-card textarea,
.stf-modal-card select,
.modal .form-control,
.modal .form-select,
.modal input,
.modal textarea,
.modal select{
background:#ffffff !important;
color:#0f172a !important;
border:1px solid #d1d5db !important;
border-radius:8px !important;
padding:.5rem .65rem !important;
font-size:.92rem !important;
-webkit-text-fill-color:#0f172a !important;
}
.stf-modal-card .form-control::placeholder,
.modal .form-control::placeholder,
.stf-modal-card textarea::placeholder{ color:#9ca3af !important; opacity:1 !important; }
.stf-modal-card label,
.modal label{ color:#1f2937 !important; font-weight:600 !important; font-size:.86rem !important; }
.stf-modal-card .form-control:focus,
.stf-modal-card .form-select:focus,
.modal .form-control:focus,
.modal .form-select:focus{
border-color:var(--primary-color,#1a5f2a) !important;
box-shadow:0 0 0 .15rem color-mix(in srgb, var(--primary-color,#1a5f2a) 22%, transparent) !important;
}
/* ── Unified Quick-Help Launcher ── */
/* Hide the legacy individual triggers; we re-expose them inside one menu */
.whatsapp-float,
.useful-links-toggle,
.chatbot-toggle,
.public-fab-help{ display:none !important; }
.qh-launcher{
position:fixed; right:18px; bottom:96px; z-index:80;
display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
@media (min-width:900px){ .qh-launcher{ bottom:24px; } }
.qh-fab{
width:56px; height:56px; border-radius:50%;
background:var(--primary-color,#1a5f2a); color:#fff; border:0;
box-shadow:0 12px 28px rgba(15,23,42,.22);
display:inline-flex; align-items:center; justify-content:center;
cursor:pointer; transition:transform .15s ease;
}
.qh-fab:hover{ transform:translateY(-2px); }
.qh-fab i{ font-size:22px; }
.qh-menu{
display:none; flex-direction:column; gap:8px;
background:#fff; border:1px solid #e5e7eb; border-radius:14px;
padding:8px; min-width:220px;
box-shadow:0 18px 40px rgba(15,23,42,.18);
}
.qh-launcher.open .qh-menu{ display:flex; }
.qh-launcher.open .qh-fab i.qh-i-open{ display:none; }
.qh-fab i.qh-i-close{ display:none; }
.qh-launcher.open .qh-fab i.qh-i-close{ display:inline-block; }
.qh-item{
display:flex; align-items:center; gap:10px;
padding:9px 12px; border-radius:10px; text-decoration:none;
color:#1f2937; font-weight:600; font-size:.92rem; background:transparent;
border:0; text-align:left; cursor:pointer; width:100%;
}
.qh-item:hover{ background:color-mix(in srgb, var(--primary-color,#1a5f2a) 10%, #fff); color:var(--primary-color,#1a5f2a); }
.qh-item .qh-ic{
width:34px; height:34px; border-radius:10px;
display:inline-flex; align-items:center; justify-content:center;
color:#fff; font-size:14px; flex-shrink:0;
}
.qh-ic.wa{ background:#25D366; }
.qh-ic.help{ background:var(--primary-color,#1a5f2a); }
.qh-ic.chat{ background:#0ea5e9; }
.qh-ic.links{ background:#6366f1; }
/* ════════════════════════════════════════════════════════════
* v11.5 — Targeted UI fixes (2026-05-14)
* - Hide all legacy floating triggers on EVERY breakpoint
* - Hide admin sidebar-close on desktop
* - Hide mobile bottomnav above 768px (defensive)
* - Compact public footer-bottom; readable text contrast
* - Admin header: collapse to single user pill, icon-first
* - License-expired page: ensure tokens defined
* - HRM employee modal -> inline admin panel
* ════════════════════════════════════════════════════════════ */
/* 1. Force-hide legacy floating buttons (covered by Quick-Help launcher) */
html body .whatsapp-float,
html body .useful-links-float .useful-links-toggle,
html body .chatbot-widget .chatbot-toggle,
html body .chatbot-widget > .chatbot-toggle,
html body .public-fab-help{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
}
/* keep popup boxes operable when opened via qh-launcher (but don't block clicks when hidden) */
html body .chatbot-widget .chatbot-box{
visibility: visible;
opacity: 1;
}
/* Useful links popup — hidden unless .active; close button always clickable */
html body .useful-links-float .useful-links-popup-box{
z-index: 9995;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(12px) scale(0.96) !important;
}
html body .useful-links-float .useful-links-popup-box.active{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) scale(1) !important;
}
html body .useful-links-float .useful-links-header{ position: relative; }
html body .useful-links-float .useful-links-close{
position: relative;
z-index: 3;
pointer-events: auto !important;
cursor: pointer;
}
/* 2. Admin sidebar close button: only mobile */
@media (min-width:992px){
.sidebar #sidebarClose,
.sidebar .sidebar-close{ display:none !important; }
}
/* 3. Mobile bottom nav: hide on ≥769px (defensive against page-level overrides) */
@media (min-width:769px){
.mob-bottomnav{ display:none !important; }
body.has-bottomnav{ padding-bottom:0 !important; }
body.has-bottomnav .main-footer{ padding-bottom:0 !important; }
}
/* 4. Public footer-bottom — compact like .pfl-top-bar (~36px), theme-aware text */
.main-footer .footer-bottom{
padding:0 !important;
background:color-mix(in srgb, var(--footer-dark, var(--footer-color)) 55%, #000) !important;
font-size:.74rem !important;
line-height:1.2 !important;
min-height:36px;
}
.main-footer .footer-bottom .container{
display:flex !important; flex-wrap:wrap !important;
align-items:center !important; justify-content:center !important;
gap:.2rem .75rem !important;
text-align:center !important;
min-height:36px !important;
padding-top:6px !important;
padding-bottom:6px !important;
}
.main-footer .footer-bottom p,
.main-footer .footer-bottom .copyright,
.main-footer .footer-bottom .developer,
.main-footer .footer-bottom .footer-policy-links a,
.main-footer .footer-bottom .visitor-item{
margin:0 !important;
color:color-mix(in srgb, var(--text-on-footer, #fff) 92%, transparent) !important;
font-weight:500 !important;
line-height:1.2 !important;
}
.main-footer .footer-bottom .footer-policy-links a{ opacity:.95; }
.main-footer .footer-bottom .footer-policy-links a:hover{
color:var(--text-on-footer, #fff) !important; opacity:1; text-decoration:underline;
}
.main-footer .footer-bottom .footer-policy-dot{
color:color-mix(in srgb, var(--text-on-footer, #fff) 45%, transparent) !important;
}
.main-footer .footer-bottom .developer a{
color:color-mix(in srgb, var(--secondary-color, var(--text-on-footer)) 70%, var(--text-on-footer, #fff)) !important;
font-weight:700 !important; text-decoration:none !important;
}
.main-footer .footer-bottom .developer a:hover{ text-decoration:underline !important; }
.main-footer .footer-bottom .visitor-counter{ display:inline-flex !important; gap:.5rem !important; align-items:center !important; }
.main-footer .footer-bottom .visitor-item i{
color:color-mix(in srgb, var(--text-on-footer, #fff) 65%, transparent) !important;
margin-right:.2rem;
}
/* 5. Admin header user widget — single-line pill, no doubled name */
.admin-header .header-right{ gap:8px !important; align-items:center !important; }
.admin-header .admin-info{ position:relative; }
.admin-header .admin-info .admin-name-inline{
display:inline-flex !important; align-items:center !important; gap:8px !important;
padding:0 !important; margin:0 !important;
font-size:.82rem !important; font-weight:600 !important;
white-space:nowrap !important; max-width:180px !important;
overflow:hidden !important; text-overflow:ellipsis !important;
}
.admin-header .admin-info .superadmin-pill{
background:rgba(255,255,255,.92) !important;
color:var(--primary-color,#1a5f2a) !important;
font-size:.62rem !important; padding:2px 7px !important;
border-radius:999px !important; font-weight:800 !important;
letter-spacing:.04em !important;
}
@media (max-width:768px){
.admin-header .admin-info .admin-name-inline > :not(img):not(.superadmin-pill){
display:none !important;
}
.admin-header .admin-info{ padding:3px !important; }
}
/* notif bell + lang/version pills — uniform height */
.admin-header .notification-bell{
width:36px !important; height:36px !important; border-radius:50% !important;
background: color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important;
color: var(--primary-color,#1a5f2a) !important;
border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 20%, #e5e7eb) !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
.admin-header .notif-count{ background:#dc2626 !important; color:#fff !important; }
/* 6. License-expired page — token fallbacks, theme alignment */
:root{
--primary-rgb: var(--primary-rgb, 26,95,42);
--bg-soft: var(--bg-soft, #f6faf7);
--bg-card: var(--bg-card, #ffffff);
--bg-page: var(--bg-page, #f8faf9);
--text-primary: var(--text-primary, #0f172a);
--text-secondary: var(--text-secondary, #475569);
--text-muted: var(--text-muted, #6b7280);
--border-color: var(--border-color, #e5e7eb);
--border-soft: var(--border-soft, #f1f5f9);
--color-warning: var(--color-warning, #d97706);
--radius-md: var(--radius-md, 10px);
--radius-lg: var(--radius-lg, 16px);
--radius-xl: var(--radius-xl, 24px);
}
.svc-expired-pill{
background:linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 8%, #fff), color-mix(in srgb, var(--primary-color) 14%, #fff)) !important;
color:var(--primary-color) !important;
border-color: color-mix(in srgb, var(--primary-color) 28%, #fff) !important;
}
/* 7. HRM Employee modal -> inline admin panel (no popup overlay) */
#empModal.stf-modal-backdrop{
position:static !important;
background:transparent !important;
inset:auto !important;
padding:0 !important; margin:0 0 1.25rem 0 !important;
z-index:auto !important;
display:none;
}
#empModal.stf-modal-backdrop[style*="display:flex"],
#empModal.stf-modal-backdrop[style*="display: flex"]{
display:block !important;
}
#empModal .stf-modal-card,
#empModal .card-coop.stf-modal-card{
max-width:100% !important; width:100% !important;
margin:0 !important;
box-shadow:0 4px 14px rgba(15,23,42,.06) !important;
border:1px solid #e5e7eb !important; border-radius:14px !important;
background:#fff !important;
}
/* ════════════════════════════════════════════════════════════
* v11.6 — Footer/CTA auto contrast (2026-05-15)
* body { color: --text-primary } was bleeding into green footer/CTA
* ════════════════════════════════════════════════════════════ */
.main-footer{
line-height:1.55 !important;
color:var(--text-on-footer, #fff) !important;
}
.main-footer .footer-top,
.main-footer .footer-widget,
.main-footer .footer-widget p,
.main-footer .footer-widget h4,
.main-footer .footer-contact li,
.main-footer .footer-contact span,
.main-footer .footer-sahakari-name{
color:var(--text-on-footer, #fff) !important;
}
.main-footer .footer-widget p,
.main-footer .footer-contact li,
.main-footer .footer-notices .notice-date{
color:color-mix(in srgb, var(--text-on-footer, #fff) 84%, transparent) !important;
}
.main-footer .footer-links a,
.main-footer .footer-notices a{
color:color-mix(in srgb, var(--text-on-footer, #fff) 88%, transparent) !important;
}
.main-footer .footer-links a:hover,
.main-footer .footer-notices a:hover{
color:var(--text-on-footer, #fff) !important;
}
.main-footer .footer-contact i,
.main-footer .footer-social a,
.main-footer .footer-social a i{
color:var(--text-on-footer, #fff) !important;
}
/* CTA band (आज नै सदस्य बन्नुहोस्) — above footer */
.cta-section,
.cta-section .cta-content,
.cta-section .cta-content h2,
.cta-section .home-heading-unified{
color:var(--text-on-primary, #fff) !important;
}
.cta-section .cta-content p{
color:color-mix(in srgb, var(--text-on-primary, #fff) 90%, transparent) !important;
opacity:1 !important;
}
/* ════════════════════════════════════════════════════════════
* v11.7 — Admin compact header + uniform stat cards (2026-05-15)
* ════════════════════════════════════════════════════════════ */
/* Header: clean white bar, icon toolbar (no overlay clutter) */
.admin-header.admin-header--compact,
.admin-header.admin-header--compact.admin-header{
min-height:52px !important;
height:auto !important;
padding:6px 14px !important;
background:var(--bg-card,#fff) !important;
color:var(--text-primary,#0f172a) !important;
border-bottom:1px solid var(--border-color,#e5e7eb) !important;
box-shadow:0 1px 0 rgba(15,23,42,.04) !important;
gap:8px !important;
flex-wrap:nowrap !important;
}
.admin-header--compact .header-left{ gap:10px !important; min-width:0 !important; flex:1 1 auto !important; }
.admin-header--compact .page-title-wrap{ gap:8px !important; min-width:0 !important; }
.admin-header--compact .page-title{
font-size:1rem !important;
font-weight:700 !important;
color:var(--text-primary,#0f172a) !important;
margin:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
max-width:min(220px,42vw) !important;
}
.admin-header--compact .header-date-pill{
font-size:.72rem !important;
padding:3px 8px !important;
white-space:nowrap !important;
}
@media (max-width:991px){
.admin-header--compact .header-date-pill{ display:none !important; }
.admin-header--compact .admin-topbar-brand.has-logo img{ max-height:34px !important; max-width:120px !important; }
}
/* Icon-only action buttons (lang, version, bell, user) */
.admin-header-actions{
display:flex !important;
align-items:center !important;
gap:6px !important;
flex-shrink:0 !important;
}
.admin-header-icon,
.admin-header--compact .notification-bell{
width:36px !important;
height:36px !important;
min-width:36px !important;
padding:0 !important;
border-radius:10px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:4px !important;
background:color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important;
color:var(--primary-color,#1a5f2a) !important;
border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 18%, #e5e7eb) !important;
text-decoration:none !important;
font-size:.85rem !important;
line-height:1 !important;
box-shadow:none !important;
}
.admin-header-icon:hover,
.admin-header--compact .notification-bell:hover{
background:color-mix(in srgb, var(--primary-color,#1a5f2a) 14%, #fff) !important;
}
.admin-header-icon-label{ font-size:.7rem; font-weight:700; }
/* User menu — avatar only; no duplicate ::before icon */
.admin-header--compact .admin-info{
width:36px !important;
height:36px !important;
min-width:36px !important;
padding:0 !important;
border-radius:10px !important;
border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 18%, #e5e7eb) !important;
background:color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:0 !important;
position:relative !important;
}
.admin-header--compact .admin-info::before{ display:none !important; }
.admin-header--compact .admin-name::after{ display:none !important; }
.admin-header--compact .admin-info-chevron{ display:none !important; }
.admin-header--compact .admin-avatar-sm,
.admin-header--compact .admin-avatar-fallback{
width:28px !important;
height:28px !important;
margin:0 !important;
border-radius:8px !important;
object-fit:cover !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:.8rem !important;
color:var(--primary-color,#1a5f2a) !important;
background:color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #fff) !important;
border:0 !important;
}
.admin-header--compact .admin-last-login-badge{ display:none !important; }
.admin-header--compact .admin-menu-head{
padding:8px 10px 10px !important;
border-bottom:1px solid var(--border-soft,#f1f5f9) !important;
margin-bottom:4px !important;
display:flex !important;
flex-direction:column !important;
gap:4px !important;
}
.admin-header--compact .admin-menu-head strong{
font-size:.88rem !important;
color:var(--text-primary,#111827) !important;
}
.admin-header--compact .admin-menu-meta{
font-size:.72rem !important;
color:var(--text-muted,#6b7280) !important;
}
.admin-header--compact .superadmin-pill{
align-self:flex-start !important;
font-size:.62rem !important;
padding:2px 8px !important;
background:color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #fff) !important;
color:var(--primary-color,#1a5f2a) !important;
}
/* Stat cards — single flat box (no inner bordered box), member-portal scale */
.stat-card-row{ --bs-gutter-x:.75rem; row-gap:.75rem !important; margin-bottom:1rem !important; }
.stat-card-row .stat-card.stat-card-flat,
.stat-card-row .stat-card.stat-card-compact,
.stat-card-row a.stat-card.stat-card-flat{
padding:10px 12px !important;
min-height:0 !important;
gap:10px !important;
border-radius:10px !important;
background:#fff !important;
border:1px solid color-mix(in oklab, var(--sc-accent, var(--primary-color)) 16%, #e5e7eb) !important;
box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
}
.stat-card-row .stat-card.stat-card-flat:hover{
transform:none !important;
box-shadow:0 3px 10px rgba(15,23,42,.07) !important;
}
.stat-card-row .stat-card-body,
.stat-card-row .stat-card-flat .stat-card-body{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
min-width:0 !important;
}
.stat-card-row .stat-card-icon{
width:38px !important;
height:38px !important;
min-width:38px !important;
border-radius:9px !important;
font-size:.95rem !important;
box-shadow:none !important;
}
.stat-card-row .stat-card-value,
.stat-card-row .stat-card-flat .stat-card-value{
font-size:1.28rem !important;
font-weight:800 !important;
line-height:1.05 !important;
color:var(--sc-accent, var(--primary-color,#1a5f2a)) !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
margin:0 0 2px !important;
}
.stat-card-row .stat-card-label,
.stat-card-row .stat-card-flat .stat-card-label{
font-size:.68rem !important;
font-weight:600 !important;
line-height:1.25 !important;
text-transform:none !important;
letter-spacing:0 !important;
color:var(--text-muted,#6b7280) !important;
white-space:normal !important;
}
.stat-card-row .stat-card-trend{
font-size:.65rem !important;
margin-top:2px !important;
color:var(--text-muted,#9ca3af) !important;
}
.stat-card-row .stat-card-chev{ font-size:.65rem !important; opacity:.35 !important; }
/* Legacy admin-stat-card / ds-card on list pages — same compact look */
.admin-stat-grid{ gap:.75rem !important; }
.admin-stat-card,
.main-content .ds-card{
padding:10px 12px !important;
min-height:0 !important;
border-radius:10px !important;
}
.admin-stat-card .stat-value,
.ds-card .ds-val{
font-size:1.25rem !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
@media (max-width:575px){
.stat-card-row .stat-card-value{ font-size:1.15rem !important; }
.stat-card-row .stat-card-icon{ width:34px !important; height:34px !important; }
}
/* Corporate banking unification pass — minimal, calm, mobile-first */
:root{
--corp-bg:#f7faf8;
--corp-surface:#ffffff;
--corp-surface-soft:#f3f7f4;
--corp-border:#dfe7e2;
--corp-border-soft:#edf2ef;
--corp-text:#102015;
--corp-muted:#647067;
--corp-shadow:0 1px 3px rgba(15,23,42,.05);
--corp-shadow-hover:0 8px 20px rgba(15,23,42,.08);
--corp-radius:12px;
--corp-radius-sm:9px;
}
html{
background:var(--corp-bg) !important;
-webkit-text-size-adjust:100%;
}
body{
background:var(--bg-page,var(--corp-bg)) !important;
color:var(--text-primary,var(--corp-text)) !important;
overflow-x:hidden;
}
body,
button,
input,
select,
textarea{
font-family:var(--font-primary,'Mukta','Noto Sans Devanagari',system-ui,sans-serif) !important;
}
.container,
.container-fluid,
.container-coop{
max-width:min(var(--container-max,1280px),100%) !important;
}
.card,
.card-coop,
.panel,
.admin-card,
.mem-card,
.dashboard-card,
.settings-card,
.content-card,
.table-card,
.tracker-card,
.rates-card-modern,
.cr-card,
.cr-sidebar,
.vp-card,
.auth-card,
.sr-inner{
background:var(--bg-card,var(--corp-surface)) !important;
border:1px solid var(--border-soft,var(--corp-border-soft)) !important;
border-radius:var(--radius-lg,var(--corp-radius)) !important;
box-shadow:var(--corp-shadow) !important;
}
.card:hover,
.card-coop:hover,
.admin-card:hover,
.mem-card:hover,
.dashboard-card:hover,
.content-card:hover{
box-shadow:var(--corp-shadow-hover) !important;
transform:none !important;
}
.card-header,
.card-footer,
.modal-header,
.modal-footer,
.data-table-header,
.data-table-footer{
background:var(--bg-soft,var(--corp-surface-soft)) !important;
border-color:var(--border-soft,var(--corp-border-soft)) !important;
}
.btn,
.btn-coop,
.cr-apply-btn,
.vp-submit,
.submit-btn,
.cp-btn-prereg,
.qh-fab{
border-radius:var(--radius-md,var(--corp-radius-sm)) !important;
box-shadow:none !important;
min-height:38px;
transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease !important;
}
.btn:hover,
.btn-coop:hover,
.cr-apply-btn:hover,
.vp-submit:hover,
.submit-btn:hover,
.cp-btn-prereg:hover{
transform:none !important;
box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color,#1a5f2a) 14%,transparent) !important;
}
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-secondary-brand,
.vp-submit,
.submit-btn,
.cr-apply-btn,
.cp-btn-prereg,
.qh-fab{
background-image:none !important;
background-color:var(--primary-color,#1a5f2a) !important;
border-color:var(--primary-color,#1a5f2a) !important;
color:var(--text-on-primary,#fff) !important;
}
.btn-danger{
background-image:none !important;
background-color:var(--color-danger,#b91c1c) !important;
border-color:var(--color-danger,#b91c1c) !important;
}
.form-control,
.form-select,
.form-check-input,
.field-coop,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select{
background:var(--bg-card,#fff) !important;
color:var(--text-primary,var(--corp-text)) !important;
border:1px solid var(--border-color,var(--corp-border)) !important;
border-radius:var(--radius-md,var(--corp-radius-sm)) !important;
box-shadow:none !important;
min-height:40px;
}
.form-control:focus,
.form-select:focus,
.field-coop:focus,
input:focus,
textarea:focus,
select:focus{
border-color:var(--primary-color,#1a5f2a) !important;
box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color,#1a5f2a) 16%,transparent) !important;
outline:0 !important;
}
.table,
.data-table{
--bs-table-bg:var(--bg-card,#fff);
--bs-table-color:var(--text-primary,var(--corp-text));
border-color:var(--border-soft,var(--corp-border-soft)) !important;
}
.table > :not(caption) > * > *{
border-color:var(--border-soft,var(--corp-border-soft)) !important;
vertical-align:middle;
}
.table > thead th,
.data-table thead th{
background:var(--bg-soft,var(--corp-surface-soft)) !important;
color:var(--text-secondary,var(--corp-muted)) !important;
font-size:.78rem !important;
letter-spacing:.02em;
text-transform:none;
}
.badge,
.type-pill,
.cp-pill,
.track-badge,
.status-badge,
.badge-status{
border-radius:999px !important;
box-shadow:none !important;
}
.page-hero,
.tracker-hero-section,
.cr-hero,
.cp-hero,
.rates-header-modern,
.dash-stat-icon,
.vp-icon,
.cr-sidebar-header,
.cp-card-head{
background-image:none !important;
background-color:var(--primary-color,#1a5f2a) !important;
}
.section-divider{
background:var(--primary-color,#1a5f2a) !important;
}
@media (max-width:768px){
:root{ --container-pad:12px; }
body{ font-size:.96rem !important; line-height:1.62 !important; }
.container,
.container-fluid,
.container-coop{ padding-left:12px !important; padding-right:12px !important; }
.card-body,
.card-header,
.card-footer,
.modal-body,
.data-table-header,
.data-table-footer{ padding:.85rem !important; }
.btn,
.btn-coop,
.form-control,
.form-select,
input,
select,
textarea{ font-size:16px !important; }
.btn,
.btn-coop{ width:auto; min-height:42px; justify-content:center; }
.table-responsive,
.table-overflow-x{
overflow-x:auto !important;
-webkit-overflow-scrolling:touch;
}
.qh-launcher{ right:14px !important; bottom:86px !important; }
.qh-fab{ width:52px !important; height:52px !important; }
}
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:.01ms !important;
}
}
.stat-card-row,
.stat-mini-row,
.admin-stat-grid,
.ds-stats-grid{
align-items: stretch !important;
gap: .75rem !important;
}
.stat-card-row > [class*="col-"],
.row > [class*="col-"] > .stat-uniform-card{
display: flex !important;
}
.stat-card,
.stat-card.stat-card-flat,
.stat-card.stat-card-compact,
.stat-uniform-card,
.stat-mini,
.admin-stat-card,
.ds-card,
.mem-stat,
.mem-stat-card,
.dashboard-card.stat-card,
.dashboard-stat-card{
min-height: 78px !important;
height: 100% !important;
padding: 12px 14px !important;
border-radius: 12px !important;
background: var(--bg-card, #fff) !important;
background-image: none !important;
border: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 12%, #e5e7eb) !important;
box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
transform: none !important;
overflow: hidden !important;
}
.stat-card:hover,
.stat-uniform-card:hover,
.stat-mini:hover,
.admin-stat-card:hover,
.ds-card:hover,
.mem-stat:hover,
.mem-stat-card:hover,
.dashboard-stat-card:hover{
transform: none !important;
box-shadow: 0 4px 12px rgba(15,23,42,.08) !important;
}
.stat-card,
.stat-mini,
.admin-stat-card,
.ds-card,
.mem-stat,
.mem-stat-card{
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.stat-uniform-card{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
.stat-card-icon,
.stat-mini .sm-icon,
.admin-stat-card .stat-icon,
.ds-card .ds-icon,
.mem-stat-icon,
.mem-stat-card .stat-icon,
.stat-uniform-card > i:first-child{
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1rem !important;
line-height: 1 !important;
box-shadow: none !important;
}
.stat-uniform-card > i:first-child{
margin: 0 !important;
background: color-mix(in srgb, var(--primary-color, #1a5f2a) 10%, #fff) !important;
}
.stat-card-body,
.stat-mini > div:not(.sm-icon),
.admin-stat-card > div:not(.stat-icon),
.ds-card > div:not(.ds-icon),
.mem-stat-card > div:not(.stat-icon){
min-width: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.stat-card-value,
.stat-value,
.sm-val,
.ds-val,
.mem-stat-value,
.mem-stat-card .stat-value{
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--sc-accent, var(--primary-color, #1a5f2a)) !important;
font-size: 1.25rem !important;
font-weight: 800 !important;
line-height: 1.05 !important;
letter-spacing: -.01em !important;
}
.stat-card-label,
.stat-label,
.sm-lbl,
.ds-label,
.mem-stat-label,
.mem-stat-card .stat-label{
margin: 2px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--text-secondary, #647067) !important;
font-size: .72rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
text-transform: none !important;
letter-spacing: 0 !important;
white-space: normal !important;
}
.stat-card-trend,
.ds-sub,
.stat-mini small{
margin-top: 2px !important;
color: var(--text-muted, #8a948c) !important;
font-size: .66rem !important;
line-height: 1.2 !important;
background: transparent !important;
box-shadow: none !important;
}
.stat-card::before,
.stat-card::after,
.stat-card-body::before,
.stat-card-body::after,
.stat-uniform-card::before,
.stat-uniform-card::after,
.stat-mini::before,
.stat-mini::after,
.admin-stat-card::before,
.admin-stat-card::after,
.ds-card::before,
.ds-card::after,
.mem-stat-card::before,
.mem-stat-card::after{
display: none !important;
content: none !important;
}
.active-filter.stat-mini,
.stat-mini.active,
.stat-card.active,
.admin-stat-card.active,
.ds-card.active{
border-color: var(--primary-color, #1a5f2a) !important;
box-shadow: inset 0 0 0 1px var(--primary-color, #1a5f2a), 0 2px 8px rgba(15,23,42,.07) !important;
}
@media (max-width: 575px){
.stat-card,
.stat-card.stat-card-flat,
.stat-card.stat-card-compact,
.stat-uniform-card,
.stat-mini,
.admin-stat-card,
.ds-card,
.mem-stat,
.mem-stat-card,
.dashboard-stat-card{
min-height: 72px !important;
padding: 10px 12px !important;
gap: 10px !important;
}
.stat-card-icon,
.stat-mini .sm-icon,
.admin-stat-card .stat-icon,
.ds-card .ds-icon,
.mem-stat-icon,
.mem-stat-card .stat-icon,
.stat-uniform-card > i:first-child{
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
}
.stat-card-value,
.stat-value,
.sm-val,
.ds-val,
.mem-stat-value,
.mem-stat-card .stat-value{
font-size: 1.12rem !important;
}
}
@media (max-width: 899px){
:root{
--mobile-bottom-nav-h: 64px;
--mobile-bottom-gap: 12px;
--mobile-floating-bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-bottom-gap) + env(safe-area-inset-bottom, 0px));
}
body.has-bottomnav,
body.admin-shell{
padding-bottom: calc(var(--mobile-bottom-nav-h) + 18px + env(safe-area-inset-bottom, 0px)) !important;
}
body.has-bottomnav .main-footer,
body.has-bottomnav footer.main-footer,
body.has-bottomnav .site-footer,
body.has-bottomnav .footer,
body.admin-shell .admin-page,
body.admin-shell .page-content,
.mem-container{
padding-bottom: calc(var(--mobile-bottom-nav-h) + 22px + env(safe-area-inset-bottom, 0px)) !important;
}
.mob-bottomnav,
.admin-bottom-nav,
.mp-bottom-nav,
.mem-nav{
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
min-height: var(--mobile-bottom-nav-h) !important;
height: auto !important;
padding-top: 6px !important;
padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
border-radius: 16px 16px 0 0 !important;
background: var(--bg-card, #fff) !important;
border-top: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 14%, #e5e7eb) !important;
box-shadow: 0 -8px 24px rgba(15,23,42,.12) !important;
z-index: 900 !important;
}
.mob-bn-item,
.admin-bottom-nav .admin-nav-item,
.mp-bottom-nav a,
.mp-bn-more,
.mem-nav-item{
min-height: 48px !important;
line-height: 1.1 !important;
}
.qh-launcher,
.public-fab-help,
.admin-fab-msg,
.whatsapp-float,
.useful-links-float,
.chatbot-widget{
bottom: var(--mobile-floating-bottom) !important;
z-index: 850 !important;
}
#publicChatPanel,
.chatbot-widget .chatbot-box,
.useful-links-float .useful-links-popup-box{
bottom: calc(var(--mobile-bottom-nav-h) + 82px + env(safe-area-inset-bottom, 0px)) !important;
max-height: calc(100vh - 170px) !important;
}
#scrollAccessibilityPanel.sa-panel{
bottom: var(--mobile-floating-bottom) !important;
left: 10px !important;
z-index: 840 !important;
}
}
@media (max-width: 420px){
.mob-bn-item,
.admin-bottom-nav .admin-nav-item,
.mp-bottom-nav a,
.mp-bn-more,
.mem-nav-item{
font-size: .62rem !important;
padding-left: 2px !important;
padding-right: 2px !important;
}
.mob-bn-item i,
.admin-bottom-nav .admin-nav-item i,
.mp-bottom-nav a i,
.mp-bn-more i,
.mem-nav-item i{
font-size: 1rem !important;
}
}
.main-content .row.g-3.mb-3 > [class*="col-"] > .card.admin-table-card,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card.admin-table-card,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.main-content .row.g-3.mb-4 > [class*="col-"] > .stat-uniform-card,
.main-content .stat-mini,
.main-content .stat-uniform-card,
.main-content .admin-stat-card,
.main-content .ds-card,
.admin-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.admin-content .row.g-3.mb-3 > [class*="col-"] > .card-coop,
.admin-content .stat-mini,
.admin-content .stat-uniform-card,
.admin-content .admin-stat-card,
.admin-content .ds-card{
min-height: 76px !important;
height: 100% !important;
padding: 12px 14px !important;
border-radius: 12px !important;
background: var(--bg-card, #fff) !important;
background-image: none !important;
border: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 12%, #e5e7eb) !important;
box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
transform: none !important;
overflow: hidden !important;
}
.main-content .row.g-3.mb-3 > [class*="col-"] > .card.admin-table-card > .card-body,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card.admin-table-card > .card-body,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.admin-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.admin-content .row.g-3.mb-3 > [class*="col-"] > .card-coop{
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 4px !important;
}
.main-content .stat-uniform-card:hover,
.main-content .ds-card:hover,
.main-content .stat-mini:hover,
.main-content .admin-stat-card:hover,
.main-content .card.admin-table-card:hover,
.admin-content .stat-uniform-card:hover,
.admin-content .ds-card:hover,
.admin-content .stat-mini:hover,
.admin-content .admin-stat-card:hover,
.admin-content .card-coop:hover{
transform: none !important;
box-shadow: 0 3px 10px rgba(15,23,42,.08) !important;
}
.main-content .stat-uniform-card::before,
.main-content .ds-card::before,
.main-content .stat-mini::before,
.main-content .admin-stat-card::before,
.admin-content .stat-uniform-card::before,
.admin-content .ds-card::before,
.admin-content .stat-mini::before,
.admin-content .admin-stat-card::before{
display: none !important;
content: none !important;
}
.main-content .stat-uniform-card i,
.main-content .ds-icon,
.main-content .stat-mini .sm-icon,
.main-content .admin-stat-card .stat-icon,
.admin-content .stat-uniform-card i,
.admin-content .ds-icon,
.admin-content .stat-mini .sm-icon,
.admin-content .admin-stat-card .stat-icon{
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
margin: 0 auto 4px !important;
border-radius: 10px !important;
font-size: .95rem !important;
transform: none !important;
box-shadow: none !important;
}
.main-content .stat-value,
.main-content .sm-val,
.main-content .ds-val,
.main-content .h3.mb-0,
.main-content .h4.mb-0,
.main-content .h5.mb-0,
.admin-content .stat-value,
.admin-content .sm-val,
.admin-content .ds-val,
.admin-content .h3.mb-0,
.admin-content .h4.mb-0,
.admin-content .h5.mb-0{
font-size: 1.22rem !important;
font-weight: 800 !important;
line-height: 1.05 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
.main-content .stat-label,
.main-content .sm-lbl,
.main-content .ds-lbl,
.main-content .small.text-muted,
.admin-content .stat-label,
.admin-content .sm-lbl,
.admin-content .ds-lbl,
.admin-content .small.text-muted{
font-size: .72rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.admin-page-header [style*="display:inline-flex"],
.admin-page-header a.text-decoration-none,
.admin-stat-badge,
.ntc-stat-pill,
.appfeat-stat-pill{
display: inline-flex !important;
align-items: center !important;
min-height: 30px !important;
padding: 5px 10px !important;
border-radius: 999px !important;
font-size: .76rem !important;
box-shadow: none !important;
white-space: nowrap !important;
}
.pfl-quick-links > li.has-drop .pfl-drop,
.pfl-quick-links .pfl-drop{
min-width: 190px !important;
max-width: min(230px, calc(100vw - 28px)) !important;
padding: 6px !important;
}
.pfl-quick-links > li.has-drop .pfl-drop a,
.pfl-quick-links .pfl-drop a{
min-height: 34px !important;
padding: 7px 10px !important;
font-size: .84rem !important;
}
.verify-shell,
.verify-card,
.verify-panel,
.verify-result-card,
.vp-card{
text-align: start !important;
line-height: 1.6 !important;
}
.verify-shell p,
.verify-card p,
.verify-panel p,
.verify-result-card p,
.vp-card p{
text-align: start !important;
text-wrap: pretty;
}
.pfl-top-bar,
.pfl-top-bar a,
.pfl-top-bar span,
.pfl-quick-links > li > a,
.main-header,
.main-header a,
.site-header,
.site-header a{
color: var(--text-on-header, #fff) !important;
}
.main-footer,
.main-footer a,
.main-footer p,
.main-footer li,
.main-footer .footer-sahakari-name{
color: var(--text-on-footer, #fff) !important;
}
.sr-hidden,
[data-aos]{
transition-duration: .55s !important;
animation-duration: .55s !important;
transition-timing-function: ease-out !important;
}
.form-check-input,
input[type="checkbox"],
input[type="radio"]{
width: 1.05em !important;
height: 1.05em !important;
min-width: 1.05em !important;
vertical-align: -0.15em !important;
}
.form-switch .form-check-input{
width: 2.2em !important;
height: 1.15em !important;
}
@media (max-width: 575px){
.main-content .row.g-3.mb-3 > [class*="col-"] > .card.admin-table-card,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card.admin-table-card,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.main-content .row.g-3.mb-4 > [class*="col-"] > .stat-uniform-card,
.main-content .stat-mini,
.main-content .stat-uniform-card,
.main-content .admin-stat-card,
.main-content .ds-card,
.admin-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.admin-content .row.g-3.mb-3 > [class*="col-"] > .card-coop,
.admin-content .stat-mini,
.admin-content .stat-uniform-card,
.admin-content .admin-stat-card,
.admin-content .ds-card{
min-height: 70px !important;
padding: 10px 12px !important;
}
.main-content .stat-value,
.main-content .sm-val,
.main-content .ds-val,
.main-content .h3.mb-0,
.main-content .h4.mb-0,
.main-content .h5.mb-0,
.admin-content .stat-value,
.admin-content .sm-val,
.admin-content .ds-val,
.admin-content .h3.mb-0,
.admin-content .h4.mb-0,
.admin-content .h5.mb-0{
font-size: 1.08rem !important;
}
}
body.has-bottomnav .main-footer,
body.has-bottomnav footer.main-footer,
.main-footer,
footer.main-footer,
.site-footer{
color: rgba(255,255,255,.92) !important;
}
.main-footer .footer-widget h4,
.main-footer .footer-widget h5,
.main-footer .footer-widget h6,
.main-footer .footer-title,
.main-footer .footer-sahakari-name,
.main-footer .copyright,
.main-footer .developer,
.main-footer p,
.main-footer li,
.main-footer span,
.main-footer small,
.main-footer i,
.main-footer a:not(.btn),
.main-footer .footer-links a,
.main-footer .footer-contact li,
.main-footer .footer-contact span,
.main-footer .footer-policy-links a,
.main-footer .visitor-counter,
.main-footer .visitor-item{
color: rgba(255,255,255,.88) !important;
}
.main-footer .footer-widget h4,
.main-footer .footer-widget h5,
.main-footer .footer-widget h6,
.main-footer .footer-title{
color: #fff !important;
}
.main-footer .footer-widget h4::after,
.main-footer .footer-title::after{
background: rgba(255,255,255,.72) !important;
}
.main-footer .footer-links a:hover,
.main-footer .footer-policy-links a:hover,
.main-footer .developer a{
color: #fff !important;
}
.main-footer .footer-top{
background: color-mix(in srgb, var(--footer-color, var(--primary-color, #15803d)) 88%, #000) !important;
}
.main-footer .footer-bottom{
background: color-mix(in srgb, var(--footer-color, var(--primary-color, #15803d)) 72%, #000) !important;
border-top: 1px solid rgba(255,255,255,.12) !important;
}
.main-footer .visitor-item,
.main-footer .footer-social a{
background: rgba(255,255,255,.12) !important;
border: 1px solid rgba(255,255,255,.18) !important;
}
@media (max-width: 899px){
body.has-bottomnav{
padding-bottom: calc(var(--mobile-bottom-nav-h, 64px) + 28px + env(safe-area-inset-bottom, 0px)) !important;
}
body.has-bottomnav .main-footer,
body.has-bottomnav footer.main-footer,
body.has-bottomnav .site-footer,
body.has-bottomnav .footer{
margin-bottom: 0 !important;
padding-bottom: calc(var(--mobile-bottom-nav-h, 64px) + 34px + env(safe-area-inset-bottom, 0px)) !important;
}
.main-footer .footer-top{
padding-top: 34px !important;
padding-bottom: 24px !important;
}
.main-footer .footer-bottom{
padding-bottom: 16px !important;
}
.main-footer .footer-bottom .container{
gap: 8px 12px !important;
padding-bottom: 12px !important;
}
.main-footer .footer-policy-links,
.main-footer .visitor-counter{
justify-content: center !important;
}
.mob-bottomnav{
z-index: 1200 !important;
border-radius: 14px 14px 0 0 !important;
}
.qh-launcher,
.public-fab-help,
.whatsapp-float,
.useful-links-float,
.chatbot-widget,
#scrollAccessibilityPanel.sa-panel{
bottom: calc(var(--mobile-bottom-nav-h, 64px) + 18px + env(safe-area-inset-bottom, 0px)) !important;
z-index: 1050 !important;
}
}
@media (max-width: 991px){
body.header-v2.mobile-nav-open{
overflow: hidden !important;
}
body.header-v2 #mainNavV2,
body.header-v2 #mainNavV2.main-nav,
body.header-v2 .pfl-nav-area #mainNavV2{
position: fixed !important;
inset: 0 auto 0 0 !important;
width: min(86vw, 336px) !important;
max-width: 336px !important;
height: 100dvh !important;
max-height: 100dvh !important;
padding: 76px 10px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
background: linear-gradient(180deg, var(--primary-dark, #064e1f) 0%, var(--primary-color, #15803d) 100%) !important;
box-shadow: 12px 0 34px rgba(0,0,0,.32) !important;
transform: translate3d(-110%, 0, 0) !important;
z-index: 200050 !important;
display: block !important;
}
body.header-v2 #mainNavV2.nav-open,
body.header-v2 #mainNavV2.open,
body.header-v2 #mainNavV2.active{
transform: translate3d(0, 0, 0) !important;
}
body.header-v2 #mainNavV2::before{
content: none !important;
display: none !important;
}
body.header-v2 #mainNavV2 .close-menu{
position: absolute !important;
top: 18px !important;
right: 14px !important;
width: 38px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
background: rgba(255,255,255,.16) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.18) !important;
z-index: 2 !important;
}
body.header-v2 #mainNavV2 .nav-menu{
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
}
body.header-v2 #mainNavV2 .nav-menu > li{
position: relative !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
body.header-v2 #mainNavV2 .nav-menu > li > a{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 42px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
color: rgba(255,255,255,.94) !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.08) !important;
font-size: .92rem !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: none !important;
}
body.header-v2 #mainNavV2 .nav-menu > li.active > a,
body.header-v2 #mainNavV2 .nav-menu > li.open > a{
color: #fff !important;
background: rgba(255,255,255,.15) !important;
border-color: rgba(255,255,255,.18) !important;
}
body.header-v2 #mainNavV2 .nav-menu > li > a > i.fa-chevron-down{
color: rgba(255,255,255,.86) !important;
font-size: .72rem !important;
margin-left: auto !important;
transition: transform .18s ease !important;
}
body.header-v2 #mainNavV2 .nav-menu > li.open > a > i.fa-chevron-down{
transform: rotate(180deg) !important;
}
body.header-v2 #mainNavV2 .nav-menu .dropdown,
body.header-v2 #mainNavV2 .nav-menu .sub-menu{
position: static !important;
inset: auto !important;
display: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
margin: 6px 0 0 !important;
padding: 6px !important;
list-style: none !important;
background: rgba(0,0,0,.18) !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 12px !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
body.header-v2 #mainNavV2 .nav-menu .has-dropdown.open > .dropdown,
body.header-v2 #mainNavV2 .nav-menu .has-sub.open > .sub-menu{
display: block !important;
}
html body .header-v2 .main-nav > ul > li.has-dropdown.open > .dropdown,
html body .header-v2 .main-nav > ul > li.has-dropdown.active > .dropdown{
display: block !important;
position: static !important;
opacity: 1 !important;
border: 0 !important;
}
body.header-v2 #mainNavV2 .nav-menu .dropdown li,
body.header-v2 #mainNavV2 .nav-menu .sub-menu li{
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
body.header-v2 #mainNavV2 .nav-menu .dropdown li a,
body.header-v2 #mainNavV2 .nav-menu .sub-menu li a{
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 36px !important;
padding: 8px 10px 8px 12px !important;
margin: 0 !important;
border-radius: 9px !important;
color: rgba(255,255,255,.88) !important;
background: transparent !important;
border: 0 !important;
font-size: .84rem !important;
font-weight: 600 !important;
text-decoration: none !important;
white-space: normal !important;
line-height: 1.25 !important;
}
body.header-v2 #mainNavV2 .nav-menu .dropdown li a i,
body.header-v2 #mainNavV2 .nav-menu .sub-menu li a i{
width: 16px !important;
min-width: 16px !important;
text-align: center !important;
color: rgba(255,255,255,.72) !important;
font-size: .78rem !important;
}
body.header-v2 #mainNavV2 .nav-menu .dropdown li a:hover,
body.header-v2 #mainNavV2 .nav-menu .sub-menu li a:hover{
background: rgba(255,255,255,.10) !important;
color: #fff !important;
}
body.header-v2 .menu-overlay.active,
body.header-v2 .mobile-nav-backdrop.active,
body.header-v2 #pflMobileBackdrop.active{
z-index: 200040 !important;
background: rgba(15,23,42,.58) !important;
}
}
/* Final compact stat/count card normalization — admin member, dashboard programs, welfare */
.main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card,
.admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card{
min-height: 98px !important;
height: 98px !important;
padding: 12px 10px !important;
justify-content: center !important;
gap: 5px !important;
}
.main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card > i,
.admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card > i{
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
font-size: 1rem !important;
margin-bottom: 2px !important;
border-radius: 9px !important;
}
.main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card .stat-value,
.admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card .stat-value{
font-size: 1.08rem !important;
line-height: 1 !important;
}
.main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card .stat-label,
.admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card .stat-label{
min-height: 0 !important;
font-size: .68rem !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
#pane-programs .stat-card-row,
/* ============================================================
ADMIN STAT CARD THEME UNIFICATION
Applies the same border, radius, and hover treatment
to count cards across admin dashboards, KYC, portals, and reports.
============================================================ */
.admin-stat-card,
.stat-card,
.stat-uniform-card,
.dashboard-stat-card,
.mem-stat-card,
.portal-stat-card {
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.admin-stat-card,
.stat-uniform-card,
.portal-stat-card {
background: var(--surface-elevated);
}
.admin-stat-card:hover,
.stat-card:hover,
.stat-uniform-card:hover,
.dashboard-stat-card:hover,
.mem-stat-card:hover,
.portal-stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Ensure portal cards inherit the unified admin card appearance */
.portal-stat-card {
border-left: 4px solid var(--border);
}
#pane-programs .row:has(.stat-card){
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
align-items: stretch !important;
margin-bottom: 16px !important;
}
#pane-programs .stat-card-row > [class*="col-"],
#pane-programs .row:has(.stat-card) > [class*="col-"]{
width: auto !important;
max-width: none !important;
flex: none !important;
padding: 0 !important;
}
#pane-programs .stat-card,
#pane-programs .stat-card.stat-card-flat,
#pane-programs .stat-card.stat-card-compact{
min-height: 72px !important;
height: 72px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
}
#pane-programs .stat-card-icon{
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 10px !important;
font-size: .95rem !important;
}
#pane-programs .stat-card-value{ font-size: 1.12rem !important; line-height: 1 !important; }
#pane-programs .stat-card-label{ font-size: .7rem !important; line-height: 1.2 !important; }
#pane-welfare .dash-section-title{ font-size: .98rem !important; }
#pane-welfare .wf-summary-bar{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-bottom: 12px !important;
}
#pane-welfare .wf-stat-chip{
min-height: 66px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(15,23,42,.05) !important;
align-items: center !important;
}
#pane-welfare .wf-stat-chip:hover{
transform: none !important;
box-shadow: 0 5px 16px rgba(15,23,42,.08) !important;
}
#pane-welfare .wf-stat-icon{
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 10px !important;
font-size: .92rem !important;
}
#pane-welfare .wf-stat-chip .val{ font-size: 1.15rem !important; line-height: 1 !important; }
#pane-welfare .wf-stat-chip .lbl{ font-size: .72rem !important; line-height: 1.2 !important; }
@media (max-width: 768px){
#pane-programs .stat-card-row,
#pane-programs .row:has(.stat-card),
#pane-welfare .wf-summary-bar{ grid-template-columns: 1fr !important; }
.main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card,
.admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card{
height: 86px !important;
min-height: 86px !important;
}
}
/* v12.1 — Public service/auth polish and icon sizing */
#publicChatPanel .pcp-h{
position: relative !important;
padding-right: 48px !important;
}
#publicChatPanel .pcp-x{
position: absolute !important;
top: 50% !important;
right: 12px !important;
transform: translateY(-50%) !important;
width: 30px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
border-radius: 999px !important;
font-size: 18px !important;
}
#publicChatPanel .pcp-x:hover{
background: rgba(255,255,255,.16) !important;
}
.form-check-input,
.grievance-form .form-check-input,
.kyc-form .form-check-input,
.needs-validation .form-check-input{
width: 1.05em !important;
height: 1.05em !important;
min-width: 1.05em !important;
min-height: 1.05em !important;
margin-top: .22em !important;
background-size: .68em .68em !important;
}
.form-check{
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
}
.form-check .form-check-input{
flex: 0 0 auto !important;
margin-left: 0 !important;
}
.form-check .form-check-label{
line-height: 1.35 !important;
}
select.form-control,
select.form-select,
select.field-coop{
background-size: 12px 10px !important;
}
body.auth-page,
.auth-wrapper,
.login-page,
.verify-page{
color: #0f172a !important;
}
.auth-card,
.login-card,
.verify-form-card,
.vp-card{
background: rgba(255,255,255,.96) !important;
color: #0f172a !important;
box-shadow: 0 18px 45px rgba(15,23,42,.16) !important;
}
.auth-card label,
.login-card label,
.verify-form-card label,
.vp-field label{
color: #111827 !important;
font-weight: 700 !important;
}
.auth-card input,
.login-card input,
.verify-form-card input,
.vp-field input{
color: #111827 !important;
background: #fff !important;
border-color: #cbd5e1 !important;
}
.verify-form-card,
.verify-form-card p,
.verify-form-card .hint,
.vp-help{
text-align: left !important;
}
[lang="ne"] .verify-form-card,
[lang="ne"] .verify-form-card p,
[lang="ne"] .verify-form-card .hint,
[lang="ne"] .vp-help{
text-align: justify !important;
}
.employee-id-card,
.hrm-id-card,
.member-id-card,
.id-card-preview{
color-scheme: light !important;
background: #fff !important;
}