/* ==========================================================================
   e-Paridarshan N24P - Primary Theme CSS (Maroon Color Palette & Utilities)
   District Administration, North 24 Parganas
   ========================================================================== */

:root {
  --maroon-primary: #670014;
  --maroon-dark: #4A000E;
  --maroon-deep: #320009;
  --maroon-light: #8B001B;
  --maroon-accent: #9E2A2B;
  --maroon-gold: #D4AF37;
  --maroon-gold-light: #FFF8DC;
  --maroon-bg: #FAF0F2;
  --maroon-card-border: #E8D0D5;
  --maroon-text-dark: #2D0008;
  --maroon-text-muted: #6B4C52;

  --status-draft-bg: #FEF3C7;
  --status-draft-text: #92400E;
  --status-sdo-bg: #E0F2FE;
  --status-sdo-text: #075985;
  --status-dm-bg: #F3E8FF;
  --status-dm-text: #6B21A8;
  --status-approved-bg: #D1FAE5;
  --status-approved-text: #065F46;
  --status-returned-bg: #FEE2E2;
  --status-returned-text: #991B1B;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--maroon-bg);
  color: var(--maroon-text-dark);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* Header & Banner Styling */
.header-maroon {
  background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon-primary) 60%, var(--maroon-light) 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(103, 0, 20, 0.25);
  border-bottom: 3px solid var(--maroon-gold);
}

.logo-glow {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  border: 2px solid var(--maroon-gold);
}

/* Custom Maroon Card Styling */
.card-maroon {
  background-color: #ffffff;
  border: 1px solid var(--maroon-card-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(103, 0, 20, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-maroon:hover {
  box-shadow: 0 4px 14px rgba(103, 0, 20, 0.12);
}

.card-header-maroon {
  background-color: #FAF0F2;
  border-bottom: 1px solid var(--maroon-card-border);
  color: var(--maroon-primary);
  font-weight: 700;
}

/* Buttons */
.btn-maroon {
  background-color: var(--maroon-primary);
  color: #ffffff;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-maroon:hover {
  background-color: var(--maroon-dark);
  box-shadow: 0 4px 10px rgba(74, 0, 14, 0.3);
}

.btn-maroon:active {
  transform: scale(0.98);
}

.btn-maroon-outline {
  background-color: transparent;
  color: var(--maroon-primary);
  font-weight: 600;
  border: 2px solid var(--maroon-primary);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-maroon-outline:hover {
  background-color: var(--maroon-primary);
  color: #ffffff;
}

.btn-gold {
  background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
  color: #2D0008;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
}

/* Radio Option Cards (Yes, Partial, No, N/A) */
.rating-option {
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  user-select: none;
}

.rating-option:hover {
  border-color: var(--maroon-primary);
}

.rating-option.selected-yes {
  background-color: #D1FAE5;
  border-color: #059669;
  color: #065F46;
}

.rating-option.selected-partial {
  background-color: #FEF3C7;
  border-color: #D97706;
  color: #92400E;
}

.rating-option.selected-no {
  background-color: #FEE2E2;
  border-color: #DC2626;
  color: #991B1B;
}

.rating-option.selected-na {
  background-color: #F1F5F9;
  border-color: #64748B;
  color: #334155;
}

/* Status Badges */
.badge-status {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-draft { background-color: var(--status-draft-bg); color: var(--status-draft-text); }
.badge-sdo { background-color: var(--status-sdo-bg); color: var(--status-sdo-text); }
.badge-dm { background-color: var(--status-dm-bg); color: var(--status-dm-text); }
.badge-approved { background-color: var(--status-approved-bg); color: var(--status-approved-text); }
.badge-returned { background-color: var(--status-returned-bg); color: var(--status-returned-text); }

/* Form inputs focus */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--maroon-primary) !important;
  box-shadow: 0 0 0 3px rgba(103, 0, 20, 0.15) !important;
}

/* Metric Pill */
.metric-pill {
  background: linear-gradient(135deg, #ffffff 0%, #FAF0F2 100%);
  border: 1px solid var(--maroon-card-border);
  border-left: 4px solid var(--maroon-primary);
  border-radius: 10px;
  padding: 14px;
}

/* Print Optimizations */
@media print {
  .no-print { display: none !important; }
  body { background-color: #ffffff !important; color: #000000 !important; }
  .card-maroon { border: 1px solid #ccc !important; box-shadow: none !important; }
}