/* ============================================================
   MONIKAMALA ASSOCIATION — Admin Panel CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --admin-primary:  #1a4f7a;
  --admin-dark:     #0d2b4e;
  --admin-accent:   #c9972c;
  --admin-success:  #2e7d32;
  --admin-danger:   #c0392b;
  --admin-warning:  #f39c12;
  --admin-info:     #0288d1;
  --admin-sidebar:  #0d2b4e;
  --admin-sidebar2: #122f52;
  --admin-bg:       #f0f4f8;
  --admin-white:    #ffffff;
  --admin-border:   #dee2e6;
  --admin-text:     #2c3e50;
  --admin-muted:    #7f8c8d;
  --admin-shadow:   0 2px 15px rgba(13,43,78,0.1);
  --admin-radius:   10px;
  --admin-transition: all 0.25s ease;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--admin-bg);
  color:var(--admin-text);
  line-height:1.6;
}
a { color:var(--admin-primary); text-decoration:none; }
a:hover { color:var(--admin-accent); }
img { max-width:100%; }

/* ============================================================
   ADMIN LAYOUT
   ============================================================ */
.admin-layout { display:flex; min-height:100vh; }

/* --- Sidebar --- */
.admin-sidebar {
  width:270px;
  background:linear-gradient(180deg,var(--admin-dark) 0%,var(--admin-sidebar) 100%);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:200;
  transition:var(--admin-transition);
  overflow-y:auto;
}
.admin-sidebar::-webkit-scrollbar { width:4px; }
.admin-sidebar::-webkit-scrollbar-track { background:transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:2px; }

.sidebar-brand {
  padding:25px 20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; gap:12px;
}
.sidebar-logo {
  width:42px; height:42px;
  background:linear-gradient(135deg,var(--admin-accent),#e8b84d);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.2rem; color:white;
  flex-shrink:0;
}
.sidebar-title { font-size:0.85rem; font-weight:700; color:white; line-height:1.3; }
.sidebar-sub   { font-size:0.65rem; color:var(--admin-accent); letter-spacing:2px; text-transform:uppercase; }

.sidebar-nav { padding:15px 0; flex:1; }
.nav-section-label {
  font-size:0.65rem; color:rgba(255,255,255,0.35);
  letter-spacing:3px; text-transform:uppercase; font-weight:700;
  padding:15px 20px 8px;
}
.sidebar-nav a {
  display:flex; align-items:center; gap:12px;
  padding:12px 20px; color:rgba(255,255,255,0.7);
  font-size:0.88rem; font-weight:500;
  transition:var(--admin-transition);
  border-left:3px solid transparent;
  position:relative;
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
  color:white; background:rgba(255,255,255,0.08);
  border-left-color:var(--admin-accent);
}
.sidebar-nav a .icon { width:20px; text-align:center; font-size:0.95rem; flex-shrink:0; }
.sidebar-nav a .badge-count {
  margin-left:auto;
  background:var(--admin-accent); color:white;
  font-size:0.65rem; font-weight:700; padding:2px 7px; border-radius:50px;
}

.sidebar-footer {
  padding:20px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.sidebar-admin-info { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.sidebar-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--admin-accent),#e8b84d);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.9rem; color:white; flex-shrink:0;
}
.sidebar-admin-name { font-size:0.85rem; font-weight:600; color:white; }
.sidebar-admin-role { font-size:0.7rem; color:rgba(255,255,255,0.5); }
.sidebar-logout {
  display:flex; align-items:center; gap:8px;
  color:rgba(255,255,255,0.6); font-size:0.85rem;
  padding:10px 15px; border-radius:8px;
  transition:var(--admin-transition); width:100%;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  cursor:pointer; font-family:inherit;
}
.sidebar-logout:hover { background:rgba(192,57,43,0.2); color:#e74c3c; border-color:rgba(192,57,43,0.3); }

/* --- Main Content --- */
.admin-main {
  margin-left:270px;
  flex:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* --- Top Bar --- */
.admin-topbar {
  background:var(--admin-white);
  padding:15px 30px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--admin-shadow);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--admin-border);
}
.topbar-left { display:flex; align-items:center; gap:15px; }
.topbar-title { font-size:1.1rem; font-weight:700; color:var(--admin-primary); }
.topbar-subtitle { font-size:0.78rem; color:var(--admin-muted); }
.topbar-right { display:flex; align-items:center; gap:15px; }
.topbar-badge-btn {
  position:relative;
  background:none; border:none; cursor:pointer;
  color:var(--admin-muted); font-size:1.1rem;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:var(--admin-transition);
  background:var(--admin-bg);
}
.topbar-badge-btn:hover { color:var(--admin-primary); background:rgba(26,79,122,0.1); }
.topbar-badge { position:absolute; top:4px; right:4px; width:16px; height:16px; border-radius:50%; background:var(--admin-danger); color:white; font-size:0.6rem; display:flex; align-items:center; justify-content:center; font-weight:700; }
.mobile-toggle { display:none; background:none; border:none; cursor:pointer; font-size:1.2rem; color:var(--admin-primary); }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:199; }
.sidebar-overlay.active { display:block; }

/* --- Admin Content Area --- */
.admin-content { padding:30px; flex:1; }

/* ============================================================
   DASHBOARD STATS
   ============================================================ */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:30px; }
.stat-card {
  background:var(--admin-white);
  border-radius:var(--admin-radius);
  padding:25px;
  box-shadow:var(--admin-shadow);
  display:flex; align-items:center; gap:18px;
  transition:var(--admin-transition);
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:3px;
}
.stat-card.primary::before { background:linear-gradient(90deg,var(--admin-primary),var(--admin-info)); }
.stat-card.success::before { background:linear-gradient(90deg,var(--admin-success),#4caf50); }
.stat-card.warning::before { background:linear-gradient(90deg,var(--admin-warning),#f9ca24); }
.stat-card.danger::before  { background:linear-gradient(90deg,var(--admin-danger),#e74c3c); }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(13,43,78,0.15); }
.stat-icon {
  width:55px; height:55px; border-radius:var(--admin-radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex-shrink:0;
}
.stat-icon.primary { background:rgba(26,79,122,0.1); color:var(--admin-primary); }
.stat-icon.success { background:rgba(46,125,50,0.1); color:var(--admin-success); }
.stat-icon.warning { background:rgba(243,156,18,0.1); color:var(--admin-warning); }
.stat-icon.danger  { background:rgba(192,57,43,0.1); color:var(--admin-danger); }
.stat-number { font-size:1.9rem; font-weight:800; color:var(--admin-text); line-height:1; margin-bottom:5px; }
.stat-label  { font-size:0.82rem; color:var(--admin-muted); font-weight:500; letter-spacing:0.3px; }
.stat-change { font-size:0.75rem; color:var(--admin-success); font-weight:600; margin-top:4px; }

/* ============================================================
   ADMIN CARDS / PANELS
   ============================================================ */
.admin-card {
  background:var(--admin-white);
  border-radius:var(--admin-radius);
  box-shadow:var(--admin-shadow);
  overflow:hidden;
}
.admin-card-header {
  padding:18px 25px;
  border-bottom:1px solid var(--admin-border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--admin-white);
}
.admin-card-header h3 {
  font-size:0.95rem; font-weight:700;
  color:var(--admin-primary); margin:0;
  display:flex; align-items:center; gap:8px;
}
.admin-card-body { padding:25px; }

/* ============================================================
   DATA TABLES
   ============================================================ */
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
  background:var(--admin-bg); padding:12px 16px;
  font-size:0.78rem; font-weight:700; color:var(--admin-muted);
  text-align:left; letter-spacing:0.5px; text-transform:uppercase;
  border-bottom:2px solid var(--admin-border);
  white-space:nowrap;
}
.data-table td {
  padding:14px 16px; font-size:0.88rem; color:var(--admin-text);
  border-bottom:1px solid rgba(222,226,230,0.5);
  vertical-align:middle;
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(26,79,122,0.03); }
.data-table .actions { display:flex; gap:8px; flex-wrap:wrap; }
.table-responsive { overflow-x:auto; }
.table-wrap { overflow-x:auto; border-radius:var(--admin-radius); }

/* ============================================================
   ADMIN FORMS
   ============================================================ */
.admin-form-group { margin-bottom:20px; }
.admin-form-group label {
  display:block; font-size:0.85rem; font-weight:600;
  color:var(--admin-text); margin-bottom:8px;
}
.admin-form-control {
  width:100%; padding:11px 15px;
  border:1.5px solid var(--admin-border);
  border-radius:8px; font-size:0.9rem;
  font-family:inherit; color:var(--admin-text);
  background:var(--admin-white); outline:none;
  transition:var(--admin-transition);
}
.admin-form-control:focus { border-color:var(--admin-primary); box-shadow:0 0 0 3px rgba(26,79,122,0.08); }
textarea.admin-form-control { resize:vertical; min-height:100px; }
.admin-form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.admin-form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display:inline-block; padding:4px 10px;
  border-radius:50px; font-size:0.72rem; font-weight:700;
  letter-spacing:0.5px; text-transform:uppercase;
}
.badge-success { background:#d4edda; color:#155724; }
.badge-warning { background:#fff3cd; color:#856404; }
.badge-danger  { background:#f8d7da; color:#721c24; }
.badge-secondary { background:#e9ecef; color:#495057; }
.badge-primary { background:rgba(26,79,122,0.1); color:var(--admin-primary); }
.badge-info    { background:rgba(2,136,209,0.1); color:var(--admin-info); }

/* ============================================================
   ADMIN BUTTONS
   ============================================================ */
.admin-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 20px; border-radius:8px;
  font-size:0.85rem; font-weight:600;
  cursor:pointer; border:none; font-family:inherit;
  transition:var(--admin-transition);
  text-decoration:none; white-space:nowrap;
}
.admin-btn-primary   { background:var(--admin-primary); color:white; }
.admin-btn-primary:hover { background:#15406a; color:white; }
.admin-btn-success   { background:var(--admin-success); color:white; }
.admin-btn-success:hover { background:#245f27; color:white; }
.admin-btn-danger    { background:var(--admin-danger); color:white; }
.admin-btn-danger:hover { background:#a93226; color:white; }
.admin-btn-warning   { background:var(--admin-warning); color:white; }
.admin-btn-warning:hover { background:#d68910; color:white; }
.admin-btn-info      { background:var(--admin-info); color:white; }
.admin-btn-info:hover{ background:#0277bd; color:white; }
.admin-btn-outline   { background:white; border:1.5px solid var(--admin-border); color:var(--admin-text); }
.admin-btn-outline:hover { border-color:var(--admin-primary); color:var(--admin-primary); }
.admin-btn-sm { padding:6px 14px; font-size:0.78rem; border-radius:6px; }
.admin-btn-lg { padding:13px 28px; font-size:0.95rem; }

/* ============================================================
   ALERTS
   ============================================================ */
.admin-alert {
  padding:13px 18px; border-radius:8px;
  margin-bottom:20px; font-size:0.9rem;
  display:flex; align-items:center; gap:10px;
  font-weight:500;
}
.admin-alert-success { background:#d4edda; color:#155724; border-left:4px solid #28a745; }
.admin-alert-danger  { background:#f8d7da; color:#721c24; border-left:4px solid #dc3545; }
.admin-alert-warning { background:#fff3cd; color:#856404; border-left:4px solid #ffc107; }
.admin-alert-info    { background:#d1ecf1; color:#0c5460; border-left:4px solid #17a2b8; }

/* ============================================================
   SEARCH & FILTER BAR
   ============================================================ */
.filter-bar {
  background:white; padding:18px 25px;
  border-radius:var(--admin-radius);
  box-shadow:var(--admin-shadow);
  margin-bottom:20px;
  display:flex; gap:15px; align-items:center; flex-wrap:wrap;
}
.filter-bar .search-wrap { position:relative; flex:1; min-width:200px; }
.filter-bar .search-wrap input {
  width:100%; padding:10px 15px 10px 40px;
  border:1.5px solid var(--admin-border); border-radius:8px;
  font-size:0.88rem; font-family:inherit; outline:none;
  transition:var(--admin-transition);
}
.filter-bar .search-wrap input:focus { border-color:var(--admin-primary); }
.filter-bar .search-wrap .icon {
  position:absolute; left:13px; top:50%;
  transform:translateY(-50%); color:var(--admin-muted); font-size:0.9rem;
}
.filter-bar select {
  padding:10px 15px; border:1.5px solid var(--admin-border);
  border-radius:8px; font-size:0.88rem; font-family:inherit;
  color:var(--admin-text); outline:none; background:white;
  cursor:pointer; transition:var(--admin-transition);
}
.filter-bar select:focus { border-color:var(--admin-primary); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display:flex; gap:5px; align-items:center; margin-top:20px; justify-content:center; }
.pagination a, .pagination span {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:0.85rem; font-weight:600;
  border:1.5px solid var(--admin-border); color:var(--admin-text);
  transition:var(--admin-transition);
}
.pagination a:hover { border-color:var(--admin-primary); color:var(--admin-primary); }
.pagination .active { background:var(--admin-primary); color:white; border-color:var(--admin-primary); }

/* ============================================================
   MEMBER VIEW / DETAIL PAGES
   ============================================================ */
.detail-card { background:white; border-radius:var(--admin-radius); box-shadow:var(--admin-shadow); padding:30px; margin-bottom:20px; }
.detail-card h4 { color:var(--admin-primary); font-size:1rem; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--admin-border); }
.detail-row { display:flex; gap:10px; margin-bottom:15px; }
.detail-label { font-size:0.82rem; font-weight:600; color:var(--admin-muted); min-width:160px; flex-shrink:0; }
.detail-value { font-size:0.9rem; color:var(--admin-text); }
.profile-photo-lg { width:100px; height:100px; border-radius:50%; object-fit:cover; border:4px solid white; box-shadow:0 4px 15px rgba(0,0,0,0.15); }
.member-id-display {
  background:linear-gradient(135deg,var(--admin-primary),var(--admin-dark));
  color:white; padding:15px 25px; border-radius:var(--admin-radius);
  font-size:1.3rem; font-weight:800; letter-spacing:3px; text-align:center;
  margin-bottom:10px;
}

/* ============================================================
   DASHBOARD CHARTS AREA
   ============================================================ */
.dashboard-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; margin-bottom:20px; }
.recent-list { padding:0; }
.recent-item {
  display:flex; align-items:center; gap:15px;
  padding:14px 0; border-bottom:1px solid rgba(222,226,230,0.5);
}
.recent-item:last-child { border-bottom:none; }
.recent-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--admin-primary),var(--admin-info));
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:700; font-size:0.85rem; flex-shrink:0;
}
.recent-info { flex:1; }
.recent-name  { font-size:0.88rem; font-weight:600; color:var(--admin-text); }
.recent-meta  { font-size:0.78rem; color:var(--admin-muted); }
.recent-amount { font-size:0.9rem; font-weight:700; color:var(--admin-success); }

/* ============================================================
   DOCUMENT VIEWER
   ============================================================ */
.doc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.doc-card {
  border:2px solid var(--admin-border); border-radius:var(--admin-radius);
  padding:15px; text-align:center; transition:var(--admin-transition);
}
.doc-card:hover { border-color:var(--admin-primary); }
.doc-card .icon { font-size:2rem; color:var(--admin-primary); margin-bottom:8px; }
.doc-card .label { font-size:0.78rem; color:var(--admin-muted); margin-bottom:10px; }

/* ============================================================
   PAGE CONTENT EDITOR
   ============================================================ */
.editor-tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.editor-tab {
  padding:9px 20px; border-radius:8px;
  border:1.5px solid var(--admin-border); background:white;
  font-size:0.85rem; font-weight:600; color:var(--admin-muted);
  cursor:pointer; transition:var(--admin-transition); font-family:inherit;
}
.editor-tab.active { border-color:var(--admin-primary); color:var(--admin-primary); background:rgba(26,79,122,0.05); }

/* ============================================================
   SETTINGS PAGE
   ============================================================ */
.settings-tabs {
  display:flex; gap:0; margin-bottom:25px;
  border-bottom:2px solid var(--admin-border);
}
.settings-tab {
  padding:12px 22px; cursor:pointer;
  border:none; background:none; font-family:inherit;
  font-size:0.88rem; font-weight:600; color:var(--admin-muted);
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:var(--admin-transition);
  display:flex; align-items:center; gap:8px;
}
.settings-tab.active { color:var(--admin-primary); border-bottom-color:var(--admin-primary); }
.settings-tab:hover  { color:var(--admin-primary); }
.settings-section { display:none; }
.settings-section.active { display:block; }

/* ============================================================
   SEND EMAIL FORM
   ============================================================ */
.email-recipients { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.recipient-opt {
  border:1.5px solid var(--admin-border); border-radius:8px;
  padding:14px; text-align:center; cursor:pointer;
  transition:var(--admin-transition);
}
.recipient-opt:hover, .recipient-opt.selected { border-color:var(--admin-primary); background:rgba(26,79,122,0.05); }
.recipient-opt .icon { font-size:1.4rem; color:var(--admin-primary); margin-bottom:5px; }
.recipient-opt .label { font-size:0.8rem; font-weight:600; color:var(--admin-text); }
.recipient-opt .count { font-size:0.7rem; color:var(--admin-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr; }
  .admin-form-row-3 { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .admin-sidebar { transform:translateX(-100%); }
  .admin-sidebar.open { transform:translateX(0); }
  .admin-main { margin-left:0; }
  .mobile-toggle { display:block; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .doc-grid { grid-template-columns:1fr 1fr; }
  .email-recipients { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .admin-content { padding:15px; }
  .stats-grid { grid-template-columns:1fr; }
  .admin-form-row { grid-template-columns:1fr; }
  .admin-form-row-3 { grid-template-columns:1fr; }
  .admin-topbar { padding:12px 15px; }
  .filter-bar { padding:15px; }
  .email-recipients { grid-template-columns:1fr; }
}

/* Utility */
.text-center { text-align:center; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.gap-2 { gap:10px; }
.d-flex { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.w-100 { width:100%; }
.fw-bold { font-weight:700; }
.text-primary { color:var(--admin-primary) !important; }
.text-success { color:var(--admin-success) !important; }
.text-danger  { color:var(--admin-danger) !important; }
.text-muted   { color:var(--admin-muted) !important; }
.hidden { display:none !important; }