/* Shared admin styles load after page-specific component styles. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --primary-green: #28633e;
  --secondary-brown: #594b42;
  --admin-ink: #24332b;
  --admin-muted: #637369;
  --admin-border: #dce4df;
  --bs-font-sans-serif: 'Inter', sans-serif;
}
* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--admin-ink); background: #f4f7f5; }
h1,h2,h3,h4,h5,h6,input,select,textarea,button { font-family: inherit; }
h1,h2,h3,h4,h5,h6 { letter-spacing: -.025em; }
a,p,td,.message-preview,.contact-message,.message-content { overflow-wrap: anywhere; }
.btn { min-height: 44px; width: auto; white-space: normal; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.btn-sm { min-height: 40px; }
.btn-primary,.btn-success { background-color: var(--primary-green); border-color: var(--primary-green); }
.text-success { color: var(--primary-green)!important; }
.bg-success { background-color: var(--primary-green)!important; }
.form-control,.form-select { min-height: 44px; font-size: 1rem; }
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline: 3px solid #b56b0a; outline-offset: 3px; }
body > .container-fluid { padding: 0; }
body > .container-fluid > .row { display: grid; grid-template-columns: minmax(0,1fr); margin: 0; }
body > .container-fluid > .row > [class*='col-'] { width: auto; padding: 0; min-width: 0; }
.main-content { width: 100%; max-width: 1440px; margin: auto; padding: 24px 16px; }
.page-header,.stat-card,.contact-card,.volunteer-card,.partnership-card,.contact-details,.volunteer-details,.partnership-details,.reply-form,.email-form,.status-form,.recent-panel {
  background: #fff; border: 1px solid var(--admin-border); border-radius: 12px; box-shadow: 0 2px 6px #233b2b05;
}
.contact-card.unread { border-color: var(--admin-border); }
.page-header { padding: 24px; margin-bottom: 24px; }
.page-header h1,.page-header h2 { font-size: clamp(1.5rem,2.2vw,2rem); font-weight: 650; }
.page-header .d-flex { gap: 16px; flex-wrap: wrap; }
.page-header .d-flex > *,.flex-grow-1,.row > [class*='col-'] { min-width: 0; }
.stat-card:hover,.contact-card:hover,.volunteer-card:hover,.partnership-card:hover { transform: none; box-shadow: 0 2px 6px #233b2b05; }
.contact-card,.volunteer-card,.partnership-card,.contact-details,.volunteer-details,.partnership-details { overflow-wrap: anywhere; }
.action-buttons { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.table { overflow-wrap: anywhere; }
.table td { vertical-align: top; }
.badge { white-space: normal; line-height: 1.4; }
.status-badge { display: inline-flex; flex-wrap: wrap; align-items: center; white-space: normal; }
.status-badge.bg-success,.status-badge.bg-danger,.status-badge.bg-secondary { color: #fff; }
.status-badge.bg-warning,.status-badge.bg-info { color: #17251d; }
.logout-btn { color: #254d35; border: 1px solid #254d35; background: #fff; }
.logout-btn:hover,.logout-btn:focus-visible { color: #fff; background: #254d35; }
.header-brand { display: block; max-width: 100%; }
.header-brand img { max-width: 100%; height: auto!important; max-height: 40px; object-fit: contain; }
.sidebar { background: #254d35; min-height: 0; }
.sidebar .nav-link { color: #fff; min-height: 44px; display: flex; align-items: center; text-align: left; margin: 4px 0; padding: 12px; border-radius: 8px; font-size: 14px; }
.sidebar button.nav-link { background: transparent; border: 0; width: 100%; font-family: inherit; }
.sidebar .nav-link.active { background: #ffffff24; font-weight: 650; }
.sidebar .nav-link:hover { background: #ffffff20; }
.sidebar .text-warning { color: #ffe4a8!important; }
.admin-navigation { background: #254d35; color: #fff; }
.admin-navigation summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; min-height: 64px; cursor: pointer; list-style: none; }
.admin-navigation summary::-webkit-details-marker { display: none; }
.mobile-brand { font-size: 14px; font-weight: 650; }
.menu-toggle-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #ffffff40; border-radius: 8px; }
.menu-toggle-icon svg { width: 24px; height: 24px; }
.menu-icon-close,.admin-navigation[open] .menu-icon-open { display: none; }
.admin-navigation[open] .menu-icon-close { display: block; }
body.menu-open { overflow: hidden; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1200; background: #fff; padding: 16px; }
.skip-link:focus { top: 16px; }
/* Dashboard grids keep equal card heights and align panel footers. */
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dashboard-header h1 { margin: 0 0 8px; }
.dashboard-header p { margin: 0; color: var(--admin-muted); font-size: 14px; }
.dashboard-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.online-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-green); font-size: 13px; font-weight: 600; }
.online-indicator > span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.dashboard-metrics .stat-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 24px; margin: 0; text-decoration: none; color: var(--admin-ink); }
.dashboard-metrics a.stat-card:hover { border-color: #a4b9ab; background: #fcfdfc; }
.stat-number { font-size: 32px; font-weight: 650; line-height: 1.2; color: var(--primary-green); }
.stat-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #edf4ef; color: var(--primary-green); font-size: 20px; }
.stat-label { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--admin-muted); }
.dashboard-recent { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
.recent-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.recent-panel-header { display: flex; align-items: center; gap: 10px; padding: 20px; border-bottom: 1px solid var(--admin-border); }
.recent-panel-header > i { color: var(--primary-green); font-size: 18px; }
.recent-panel-header h2 { font-size: 16px; font-weight: 650; margin: 0; }
.recent-panel-body { flex: 1; padding: 4px 20px; }
.recent-item { display: block; padding: 16px 0; border: 0; border-bottom: 1px solid #edf1ee; border-radius: 0; color: var(--admin-ink); text-decoration: none; }
.recent-item:last-child { border-bottom: 0; }
.recent-item:hover { color: var(--primary-green); background: #f7faf8; }
.recent-item-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; font-size: 14px; }
.recent-item-heading strong { font-weight: 600; }
.recent-item time { font-size: 11px; color: var(--admin-muted); white-space: nowrap; }
.recent-item-subtitle,.recent-item-detail { display: block; font-size: 12px; line-height: 1.7; color: var(--admin-muted); }
.recent-panel-footer { padding: 8px 20px; border-top: 1px solid var(--admin-border); }
.recent-panel-footer a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--primary-green); text-decoration: none; }
.recent-panel-footer a:hover { text-decoration: underline; }
.recent-empty { padding: 32px 0; text-align: center; color: var(--admin-muted); }
.recent-empty p { margin: 8px 0 0; font-size: 14px; }
/* Keep sign-in contained independently of the admin shell. */
.login-container { width: calc(100% - 32px); max-width: 440px; margin: 16px auto; padding: 0; }
.login-card { max-width: 100%; padding: 32px; }
.login-header { color: var(--admin-ink); }
.green,.login-header h1,.login-header h2 { color: var(--primary-green)!important; }
@media (max-width: 1023.98px) {
  body > .container-fluid > .row > :first-child { position: sticky; top: 0; z-index: 1050; }
  .admin-navigation:not([open]) .sidebar { display: none; }
  .admin-navigation[open] .sidebar { position: fixed; top: 64px; bottom: 0; left: 0; width: min(88vw,320px); overflow-y: auto; box-shadow: 10px 0 0 100vmax #10221988; }
}
@media (min-width: 1024px) {
  body > .container-fluid > .row { grid-template-columns: 248px minmax(0,1fr); }
  .main-content { padding: 32px; }
  .admin-navigation { position: sticky; top: 0; height: 100vh; }
  .admin-navigation summary { display: none; }
  .admin-navigation > .sidebar { display: block!important; height: 100vh; overflow-y: auto; padding: 24px 16px!important; }
}
@media (min-width: 1200px) {
  .dashboard-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
  .dashboard-recent { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 575.98px) {
  .page-header { padding: 20px; margin-bottom: 16px; }
  .dashboard-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .page-header .logout-btn { display: none; }
  .dashboard-metrics { gap: 12px; margin-bottom: 16px; }
  .dashboard-metrics .stat-card { padding: 16px; gap: 8px; }
  .stat-number { font-size: 28px; }
  .stat-icon { width: 32px; height: 32px; font-size: 18px; }
  .dashboard-recent { gap: 16px; }
  .recent-panel-header { padding: 16px; }
  .recent-panel-body { padding: 4px 16px; }
  .recent-panel-footer { padding: 8px 16px; }
  .contact-details,.volunteer-details,.partnership-details,.reply-form,.email-form,.status-form,.contact-card,.volunteer-card,.partnership-card { padding: 16px; }
  .contact-card > .d-flex,.volunteer-card > .d-flex,.partnership-card > .d-flex { flex-direction: column; gap: 16px; }
  .action-buttons { width: 100%; }
  .btn-group,.d-flex.gap-2 { flex-wrap: wrap; gap: 8px; }
  .table { table-layout: fixed; }
  .table td:first-child { width: 35%; }
  .table td,.table th { padding: .6rem .3rem; }
  .login-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}

.logout-btn { gap: 8px; }
/* Submission lists and record details share the dashboard's spacing system. */
.list-page,.detail-page { font-size: 14px; line-height: 1.6; }
.list-page .page-header p,.detail-page .page-header p { font-size: 14px; }
.list-page .page-header .badge { background: #edf4ef!important; color: var(--primary-green); padding: 8px 12px; align-self: center; font-weight: 600; }
.list-page h2,.detail-page h2 { font-size: 16px; font-weight: 650; line-height: 1.5; }
.list-page .contact-card,.list-page .volunteer-card,.list-page .partnership-card { padding: 24px; margin-bottom: 16px; }
.list-page .contact-card.unread { background: #fff; }
.list-page .contact-card > .d-flex,.list-page .volunteer-card > .d-flex,.list-page .partnership-card > .d-flex { gap: 24px; }
.list-page .flex-grow-1 > .d-flex { flex-wrap: wrap; gap: 8px; }
.list-page h2 .badge { font-size: 11px; font-weight: 600; vertical-align: middle; margin-left: 8px; background: #edf4ef!important; color: var(--primary-green); }
.contact-meta,.volunteer-meta,.partnership-meta,.contact-info { color: var(--admin-muted); font-size: 12px; line-height: 1.8; }
.contact-meta .ms-3,.volunteer-meta .ms-3,.partnership-meta .ms-3,.contact-info .ms-3 { display: inline-block; }
.btn-action { padding: 8px 12px; font-size: 13px; gap: 6px; }
.list-page .action-buttons { align-items: center; }
.list-page .btn-danger,.detail-page .btn-danger { background: #fff; color: #b42318; border-color: #e7bab5; }
.list-page .btn-danger:hover,.detail-page .btn-danger:hover { background: #fff1f0; border-color: #b42318; }
.interest-badge,.type-badge,.new-badge,.unread-badge { display: inline-block; padding: 4px 8px; border-radius: 6px; background: #edf4ef; color: var(--primary-green); font-size: 12px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.status-badge { font-size: 12px; padding: 4px 8px; border-radius: 6px; }
.search-box,.empty-state { padding: 24px; margin-bottom: 24px; background: #fff; border: 1px solid var(--admin-border); border-radius: 12px; box-shadow: 0 2px 6px #233b2b05; }
.filter-panel form { display: grid; grid-template-columns: minmax(140px,1fr) minmax(200px,2fr) minmax(140px,1fr) auto; gap: 16px; align-items: end; }
.filter-panel form > .row { display: contents; }
.filter-panel form > .mb-3 { margin: 0!important; }
.filter-panel form > .row > * { width: auto; padding: 0; margin: 0; min-width: 0; }
.filter-panel form > .mt-2 { grid-column: 1 / -1; margin: 0!important; }
.filter-panel form:not(:has(select[name='interest'],select[name='type'])) { grid-template-columns: minmax(140px,1fr) minmax(200px,3fr) auto; }
.form-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.input-group-text { background: #f7faf8; border-color: var(--admin-border); }
.form-control,.form-select { border-color: var(--admin-border); border-radius: 8px; }
.form-control[readonly] { background: #f7faf8; color: var(--admin-muted); }
textarea.form-control { min-height: 112px; }
.pagination { flex-wrap: wrap; gap: 8px; }
.pagination .page-link { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border: 1px solid var(--admin-border); border-radius: 8px!important; color: var(--primary-green); }
.pagination .active .page-link { background: var(--primary-green); border-color: var(--primary-green); color: #fff; }
.detail-page .contact-details,.detail-page .volunteer-details,.detail-page .partnership-details { padding: 24px; }
.detail-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-left: 0; margin-right: 0; }
.detail-summary > * { padding: 0; width: auto; }
.info-card { height: 100%; padding: 20px; border: 1px solid var(--admin-border); border-radius: 10px; background: #f9fbfa; }
.info-card .table { margin: 0; table-layout: fixed; --bs-table-bg: transparent; font-size: 13px; }
.info-card .table td { padding: 8px 0; }
.info-card .table td:first-child { width: 34%!important; padding-right: 12px; color: var(--admin-muted); font-weight: 500!important; }
.detail-page h2 > .bi { color: var(--primary-green)!important; }
.detail-page a:not(.btn):not(.nav-link):not(.header-brand) { color: var(--primary-green); }
.message-content { border: 1px solid var(--admin-border); border-radius: 10px; padding: 20px; white-space: pre-line; line-height: 1.8; }
.reply-section,.email-section,.status-section { padding: 24px; margin-top: 24px; border: 1px solid var(--admin-border); border-radius: 10px; background: #f9fbfa; }
.detail-page .card { border-color: var(--admin-border); border-radius: 10px; }
.detail-page .card-body { padding: 24px; }
.detail-page .d-flex.gap-2 { flex-wrap: wrap; }
.detail-page .btn-reply:hover { transform: none; }
.detail-page .status-section .row { --bs-gutter-x: 24px; }
@media (max-width: 1199.98px) {
 .filter-panel form,.filter-panel form:not(:has(select[name='interest'],select[name='type'])) { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .list-page .contact-card > .d-flex,.list-page .volunteer-card > .d-flex,.list-page .partnership-card > .d-flex { flex-direction: column; gap: 16px; }
 .detail-summary { grid-template-columns: minmax(0,1fr); gap: 16px; }
}
@media (max-width: 575.98px) {
 .filter-panel form,.filter-panel form:not(:has(select[name='interest'],select[name='type'])) { grid-template-columns: minmax(0,1fr); }
 .search-box,.list-page .contact-card,.list-page .volunteer-card,.list-page .partnership-card,.detail-page .contact-details,.detail-page .volunteer-details,.detail-page .partnership-details { padding: 16px; }
 .search-box { margin-bottom: 16px; }
 .info-card,.reply-section,.email-section,.status-section,.detail-page .card-body,.message-content { padding: 16px; }
 .contact-meta .ms-3,.volunteer-meta .ms-3,.partnership-meta .ms-3,.contact-info .ms-3 { display: block; margin-left: 0!important; margin-top: 4px; }
 .list-page .action-buttons { border-top: 1px solid var(--admin-border); padding-top: 16px; }
 .list-page .action-buttons > * { flex: 1 1 auto; }
 .list-page .action-buttons form .btn { width: 100%; }
 .detail-page .page-header .d-flex { align-items: flex-start!important; }
 .detail-page .info-card .table tr { display: grid; grid-template-columns: minmax(0,1fr); padding: 8px 0; }
 .detail-page .info-card .table td { width: 100%!important; padding: 0; }
 .detail-page .info-card .table td:first-child { margin-bottom: 2px; }
}