/* ==========================================================================
   Nairobi Yearly Meeting (NYM) - Main Stylesheet
   Brand Palette: Deep Navy (#1B438F) & Vibrant Red (#E21B23)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties / Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core Brand Colors */
  --nym-navy: #1B438F;
  --nym-navy-dark: #13326B;
  --nym-navy-light: #2552A8;
  --nym-red: #E21B23;
  --nym-red-dark: #C4141B;
  --nym-red-light: #FAD2D4;

  /* Neutral & Background Colors */
  --nym-bg-main: #F4F6F9;
  --nym-bg-sidebar: #FFFFFF;
  --nym-card-bg: #FFFFFF;
  --nym-text-primary: #2D3748;
  --nym-text-secondary: #64748B;
  --nym-border-color: rgba(27, 67, 143, 0.12);
}

/* --------------------------------------------------------------------------
   2. Global Reset & Base Styles
   -------------------------------------------------------------------------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--nym-bg-main);
  color: var(--nym-text-primary);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

/* Color & Text Helpers */
.text-nym-navy {
  color: var(--nym-navy) !important;
}

.text-nym-red {
  color: var(--nym-red) !important;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   3. Sidebar Navigation Styles
   -------------------------------------------------------------------------- */
.sidebar {
  height: 100%;
  background: var(--nym-bg-sidebar);
  border-right: 1px solid var(--nym-border-color);
}

.sidebar .nav-link {
  color: var(--nym-text-secondary);
  font-weight: 500;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
}

.sidebar .nav-link:hover {
  background-color: rgba(27, 67, 143, 0.06);
  color: var(--nym-navy);
}

.sidebar .nav-link.active {
  background-color: var(--nym-navy);
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(27, 67, 143, 0.22);
}

/* Sidebar Logout Specific State */
.sidebar .nav-link.hover-red {
  color: var(--nym-red);
}

.sidebar .nav-link.hover-red:hover {
  background-color: rgba(226, 27, 35, 0.08) !important;
  color: var(--nym-red-dark) !important;
}

/* --------------------------------------------------------------------------
   4. Buttons & Interactive Controls
   -------------------------------------------------------------------------- */
/* Primary Action Button (NYM Navy) */
.btn-primary,
.btn-nym-primary {
  background-color: var(--nym-navy);
  border-color: var(--nym-navy);
  color: #FFFFFF;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-nym-primary:hover {
  background-color: var(--nym-navy-dark) !important;
  border-color: var(--nym-navy-dark) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(27, 67, 143, 0.25);
}

/* Secondary / Highlight Action Button (NYM Red) */
.btn-danger,
.btn-nym-red {
  background-color: var(--nym-red);
  border-color: var(--nym-red);
  color: #FFFFFF;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-nym-red:hover {
  background-color: var(--nym-red-dark) !important;
  border-color: var(--nym-red-dark) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(226, 27, 35, 0.25);
}

/* Outline Buttons */
.btn-nym-outline {
  border: 1px solid var(--nym-navy);
  color: var(--nym-navy);
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}

.btn-nym-outline:hover {
  background-color: var(--nym-navy);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   5. Cards & Metrics
   -------------------------------------------------------------------------- */
.card,
.nym-card {
  border: none;
  border-radius: 12px;
  background-color: var(--nym-card-bg);
  box-shadow: 0 4px 12px rgba(27, 67, 143, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nym-card-interactive:hover,
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(27, 67, 143, 0.12);
}

/* Icon Container Boxes */
.nym-icon-box-navy {
  background-color: rgba(27, 67, 143, 0.1);
  color: var(--nym-navy);
}

.nym-icon-box-red {
  background-color: rgba(226, 27, 35, 0.1);
  color: var(--nym-red);
}

/* --------------------------------------------------------------------------
   6. Data Tables & Lists
   -------------------------------------------------------------------------- */
.nym-table thead th {
  background-color: rgba(27, 67, 143, 0.04);
  color: var(--nym-navy);
  font-weight: 600;
  border-bottom: 2px solid var(--nym-border-color);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.nym-table tbody td {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.nym-table tbody tr:hover {
  background-color: rgba(27, 67, 143, 0.02);
}

/* --------------------------------------------------------------------------
   7. Document Viewer & Security
   -------------------------------------------------------------------------- */
.document-viewer {
  width: 100%;
  height: 80vh;
  border: 1px solid var(--nym-border-color);
  border-radius: 10px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  -webkit-user-select: none;
  user-select: none;
}

/* Disable Context Menus & Touch Callouts for Document Protection */
.pdf-viewer {
  -webkit-touch-callout: none;
}

/* --------------------------------------------------------------------------
   8. Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .sidebar {
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--nym-border-color);
  }

  .document-viewer {
    height: 60vh;
  }
}