/* Rural MOMS Data Portal - Common Styles */

/* HRSA Color Palette */
:root {
   --hrsa-primary-blue: #006699;
   --hrsa-secondary-blue: #2c608a;
   --hrsa-light-blue: #e6f2ff;
   --hrsa-accent-orange: #ff6600;
   --hrsa-accent-red: #990000;
   --hrsa-gray-dark: #333333;
   --hrsa-gray-medium: #666666;
   --hrsa-gray-light: #f8f9fa;
   --hrsa-border: #dee2e6;
   --hrsa-success: #198754;
   --hrsa-warning: #fd7e14;
   --hrsa-danger: #dc3545;
}

/* Reset and Base Styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background: var(--hrsa-light-blue);
   min-height: 100vh;
   color: var(--hrsa-gray-dark);
   line-height: 1.5;
}

/* Container */
.container {
   max-width: 1500px;
   margin: 0 auto;
   padding: 20px;
}

/* Header Styles */
.header {
   background: white;
   border-radius: 8px;
   padding: 24px;
   margin-bottom: 24px;
   box-shadow: 0 2px 8px rgba(0, 62, 126, 0.1);
   border-left: 4px solid var(--hrsa-primary-blue);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo, .dashboard-title {
   font-size: 28px;
   font-weight: 700;
   color: var(--hrsa-primary-blue);
   margin: 0;
}

.user-info {
   display: flex;
   align-items: center;
   gap: 16px;
   font-size: 14px;
}

.user-email {
   color: var(--hrsa-gray-medium);
   font-weight: 500;
}

.role-badge, .record-count {
   background: var(--hrsa-secondary-blue);
   color: white;
   padding: 8px 12px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
}

.header-buttons {
   display: flex;
   gap: 12px;
}

/* Button Styles */
.btn-base {
   border: none;
   padding: 10px 16px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   transition: background-color 0.2s;
   display: flex;
   align-items: center;
   gap: 6px;
   text-decoration: none;
   font-family: inherit;
}

.change-password-btn {
   background: var(--hrsa-accent-orange);
   color: white;
}

.change-password-btn:hover {
   background: #e55a00;
}

.logout-btn {
   background: var(--hrsa-accent-red);
   color: white;
}

.logout-btn:hover {
   background: #b02a37;
}

.back-btn {
   background: var(--hrsa-primary-blue);
   color: white;
}

.back-btn:hover {
   background: var(--hrsa-secondary-blue);
}

.back-btn:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(0, 102, 153, 0.3);
}

/* Login Styles */
.login-container {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
}

.login-form {
   background: white;
   padding: 40px;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 62, 126, 0.1);
   border-left: 4px solid var(--hrsa-primary-blue);
   width: 400px;
   max-width: 90vw;
}

.login-form h1 {
   text-align: center;
   margin-bottom: 30px;
   color: var(--hrsa-primary-blue);
   font-weight: 700;
}

/* Form Styles */
.form-group {
   margin-bottom: 20px;
}

.form-group label {
   display: block;
   margin-bottom: 8px;
   font-weight: 600;
   color: var(--hrsa-gray-dark);
   font-size: 14px;
}

.form-group input {
   width: 100%;
   padding: 12px;
   border: 2px solid var(--hrsa-border);
   border-radius: 4px;
   font-size: 16px;
   transition: border-color 0.2s;
   font-family: inherit;
}

.form-group input:focus {
   outline: none;
   border-color: var(--hrsa-secondary-blue);
   box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.login-btn {
   width: 100%;
   background: var(--hrsa-primary-blue);
   color: white;
   border: none;
   padding: 12px;
   border-radius: 4px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s;
   font-family: inherit;
}

.login-btn:hover {
   background: var(--hrsa-secondary-blue);
}

.login-btn:disabled {
   background: var(--hrsa-gray-medium);
   cursor: not-allowed;
}

/* Filter Styles */
.filters-panel {
   background: white;
   border-radius: 8px;
   padding: 24px;
   box-shadow: 0 2px 8px rgba(0, 62, 126, 0.1);
   border-left: 4px solid var(--hrsa-accent-red);
   height: fit-content;
   position: sticky;
   top: 20px;
}

.filters-title {
   font-size: 20px;
   font-weight: 700;
   color: var(--hrsa-primary-blue);
   margin-bottom: 24px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.filter-group {
   margin-bottom: 20px;
}

.filter-label {
   display: block;
   font-weight: 600;
   color: var(--hrsa-gray-dark);
   margin-bottom: 8px;
   font-size: 14px;
}

.filter-select {
   width: 100%;
   padding: 10px 12px;
   border: 2px solid var(--hrsa-border);
   border-radius: 4px;
   font-size: 14px;
   background: white;
   transition: border-color 0.2s;
   font-family: inherit;
}

.filter-select:focus {
   outline: none;
   border-color: var(--hrsa-secondary-blue);
   box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.filter-clear {
   background: var(--hrsa-accent-red);
   color: white;
   border: none;
   padding: 10px 16px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   margin-top: 16px;
   width: 100%;
   transition: background-color 0.2s;
   font-family: inherit;
}

.filter-clear:hover {
   background: #b02a37;
}

/* Main Content */
.main-content {
   background: white;
   border-radius: 8px;
   padding: 24px;
   box-shadow: 0 2px 8px rgba(0, 62, 126, 0.1);
   border-left: 4px solid var(--hrsa-primary-blue);
}

.content-header {
   margin-bottom: 32px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--hrsa-border);
   display: flex;
   justify-content: space-between;
   align-items: baseline;
}

.content-header-left {
   flex: 1;
}

.content-title {
   font-size: 24px;
   font-weight: 700;
   color: var(--hrsa-primary-blue);
   margin-bottom: 4px;
}

.content-subtitle {
   color: var(--hrsa-gray-medium);
   font-size: 16px;
   font-style: italic;
}

.data-submitted {
   background: var(--hrsa-gray-light);
   color: var(--hrsa-gray-medium);
   padding: 8px 12px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
   white-space: nowrap;
}

/* Tab Styles */
.dashboard-tabs {
   display: flex;
   gap: 2px;
   margin-bottom: 24px;
   border-bottom: 2px solid var(--hrsa-border);
}

.tab-button {
   padding: 12px 20px;
   border: none;
   background: var(--hrsa-gray-light);
   font-size: 14px;
   font-weight: 600;
   color: var(--hrsa-gray-medium);
   cursor: pointer;
   border-radius: 4px 4px 0 0;
   transition: all 0.2s;
   font-family: inherit;
}

.tab-button.active {
   background: var(--hrsa-primary-blue);
   color: white;
}

.tab-button:hover:not(.active) {
   background: var(--hrsa-border);
   color: var(--hrsa-gray-dark);
}

.tab-content {
   display: none;
}

.tab-content.active {
   display: block;
}

/* Table Styles */
.data-table-container {
   border: 1px solid var(--hrsa-border);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 4px rgba(0, 62, 126, 0.05);
   margin-bottom: 32px;
}

.table-header {
   background: var(--hrsa-primary-blue);
   color: white;
   padding: 16px 20px;
   font-weight: 700;
   font-size: 16px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.data-table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
}

/* Base table header styles */
.data-table thead tr {
   background: transparent;
   border: none;
}

.data-table th {
   background: var(--hrsa-secondary-blue);
   color: white;
   padding: 12px 16px;
   text-align: left;
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin: 0;
   border: none;
   vertical-align: top;
   height: 100%;
   box-sizing: border-box;
}

.data-table th:first-child {
   text-align: left;
}

.data-table th:not(:first-child) {
   text-align: center;
}

/* Specific header styling */
.data-table th.planning-year-header {
   font-style: italic;
}

.data-table th.nvss-header {
   background: var(--hrsa-accent-orange);
   color: white;
   font-style: italic;
}

.data-table th.all-iy-population-header {
   position: relative;
   line-height: 1.2;
}

.data-table th.all-iy-population-header .population-label {
   display: block;
   font-size: 10px;
   font-weight: 500;
   opacity: 0.8;
   text-transform: none;
   letter-spacing: normal;
   margin-top: 2px;
}

/* Table body styles */
.data-table td {
   padding: 12px 16px;
   border-bottom: 1px solid var(--hrsa-border);
   font-size: 14px;
}

.data-table tr:nth-child(even) {
   background: #fbfcfd;
}

.data-table tr:hover {
   background: var(--hrsa-light-blue);
}

/* Cell type styles */
.awardee-cell, .cohort-cell {
   font-weight: 600;
   color: var(--hrsa-primary-blue);
}

.count-cell {
   text-align: center;
   font-weight: 600;
   color: var(--hrsa-primary-blue);
}

.percent-cell {
   text-align: center;
   color: var(--hrsa-gray-medium);
   font-weight: 500;
}

.all-iy-cell {
   text-align: center;
   color: var(--hrsa-primary-blue);
   font-weight: 600;
   line-height: 1.3;
}

.all-iy-cell .count-line {
   font-size: 14px;
   font-weight: 700;
   color: var(--hrsa-primary-blue);
}

.all-iy-cell .percent-line {
   font-size: 12px;
   font-weight: 500;
   color: var(--hrsa-gray-medium);
}

.nvss-cell {
   text-align: center;
   color: var(--hrsa-accent-orange);
   font-weight: 600;
   font-style: italic;
   background-color: rgba(255, 102, 0, 0.05);
}

.planning-year-cell {
   color: var(--hrsa-gray-medium) !important;
   font-style: italic;
   opacity: 0.75;
}

/* Special row styles */
.total-row {
   border-top: 2px solid var(--hrsa-primary-blue) !important;
   font-weight: 700 !important;
   background: var(--hrsa-light-blue) !important;
}

.total-row td {
   color: var(--hrsa-primary-blue) !important;
   font-weight: 700 !important;
}

.total-row .planning-year-cell {
   color: #4a5965 !important;
}

.total-row .nvss-cell {
   color: var(--hrsa-accent-orange) !important;
   font-weight: 700 !important;
}

.total-row .all-iy-cell {
   color: var(--hrsa-primary-blue) !important;
   font-weight: 700 !important;
}

.total-row .all-iy-cell .count-line {
   color: var(--hrsa-primary-blue) !important;
   font-weight: 700 !important;
}

.total-row .all-iy-cell .percent-line {
   color: #4a5965 !important;
   font-weight: 600 !important;
}

.cohort-divider {
   border-top: 3px solid var(--hrsa-primary-blue) !important;
   background: var(--hrsa-light-blue) !important;
   font-weight: 700;
   color: var(--hrsa-primary-blue);
   text-align: center;
}

.cohort-divider td {
   padding: 8px 16px !important;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 1px;
   background: var(--hrsa-light-blue) !important;
}

.cohort-divider:hover {
   background: var(--hrsa-light-blue) !important;
}

.cohort-divider:hover td {
   background: var(--hrsa-light-blue) !important;
}

.deemphasized-row {
   opacity: 0.6;
   font-style: italic;
}

.unknown-row {
   order: 9998;
}

.not-yet-12-weeks {
   opacity: 0.6;
   font-style: italic;
   color: var(--hrsa-gray-medium) !important;
   background-color: var(--hrsa-gray-light) !important;
   order: 9999;
}

.not-yet-12-weeks td {
   color: var(--hrsa-gray-medium) !important;
}

.not-yet-12-weeks:hover {
   background-color: #e9ecef !important;
}

/* Tooltip Styles */
.info-icon {
   cursor: help;
   font-size: 14px;
   opacity: 0.8;
   transition: opacity 0.2s;
}

.info-icon:hover {
   opacity: 1;
}

.tooltip {
   position: relative;
   display: inline-block;
}

.tooltip .tooltiptext {
   visibility: hidden;
   width: 300px;
   background-color: var(--hrsa-gray-dark);
   color: white;
   text-align: left;
   border-radius: 6px;
   padding: 12px;
   position: absolute;
   z-index: 1000;
   top: 100%;
   left: 50%;
   margin-left: -150px;
   margin-top: 8px;
   opacity: 0;
   transition: opacity 0.3s;
   font-size: 13px;
   line-height: 1.4;
   font-weight: normal;
   text-transform: none;
   letter-spacing: normal;
   transform: translateZ(0);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tooltip .tooltiptext::before {
   content: "";
   position: absolute;
   bottom: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: transparent transparent var(--hrsa-gray-dark) transparent;
}

.table-header .tooltip {
   z-index: 1001;
}

.mfm-tooltip .tooltiptext {
   left: 0;
   margin-left: 0;
   right: auto;
}

.mfm-tooltip .tooltiptext::before {
   left: 20px;
   margin-left: -5px;
}

.tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
}

/* NVSS Comparison Styles */
.nvss-comparison {
   background: linear-gradient(135deg, rgba(255, 102, 0, 0.08) 0%, rgba(255, 102, 0, 0.03) 100%);
   border: 1px solid rgba(255, 102, 0, 0.2);
   border-radius: 8px;
   padding: 16px 20px;
   margin-top: 16px;
   font-size: 13px;
   box-shadow: 0 2px 8px rgba(255, 102, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.02);
   animation: nvssSlideIn 0.3s ease-out;
   position: relative;
   overflow: hidden;
}

.nvss-comparison::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--hrsa-accent-orange), #e55a00);
   opacity: 0.8;
}

.nvss-header {
   font-weight: 600;
   color: var(--hrsa-accent-orange);
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   padding-bottom: 8px;
   border-bottom: 1px solid rgba(255, 102, 0, 0.2);
}

.nvss-header i {
   color: var(--hrsa-accent-orange);
   font-size: 12px;
   opacity: 0.8;
}

.nvss-item {
   margin-bottom: 12px;
   padding: 8px 0;
   border-bottom: 1px solid rgba(255, 102, 0, 0.08);
   transition: all 0.2s ease;
}

.nvss-item:last-child {
   margin-bottom: 0;
   border-bottom: none;
   padding-bottom: 0;
}

.nvss-item:hover {
   background: rgba(255, 102, 0, 0.05);
   border-radius: 4px;
   padding-left: 8px;
   padding-right: 8px;
   margin-left: -8px;
   margin-right: -8px;
}

.nvss-metric {
   font-weight: 600;
   color: var(--hrsa-gray-dark);
   margin-bottom: 6px;
   font-size: 13px;
   line-height: 1.3;
}

.nvss-values {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   align-items: center;
}

.nvss-us,
.nvss-state,
.nvss-rural {
   padding: 4px 12px;
   border-radius: 16px;
   font-size: 11px;
   font-weight: 600;
   white-space: nowrap;
   transition: all 0.2s ease;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   border: 1px solid transparent;
   position: relative;
   overflow: hidden;
}

.nvss-us {
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   color: var(--hrsa-gray-dark);
   border-color: #dee2e6;
}

.nvss-us:hover {
   background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
   transform: translateY(-1px);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.nvss-state {
   background: linear-gradient(135deg, rgba(255, 102, 0, 0.15) 0%, rgba(255, 102, 0, 0.08) 100%);
   color: var(--hrsa-accent-orange);
   border-color: rgba(255, 102, 0, 0.3);
}

.nvss-state:hover {
   background: linear-gradient(135deg, rgba(255, 102, 0, 0.25) 0%, rgba(255, 102, 0, 0.15) 100%);
   transform: translateY(-1px);
   box-shadow: 0 2px 6px rgba(255, 102, 0, 0.2);
}

.nvss-rural {
   background: linear-gradient(135deg, rgba(229, 90, 0, 0.15) 0%, rgba(229, 90, 0, 0.08) 100%);
   color: #e55a00;
   border-color: rgba(229, 90, 0, 0.3);
}

.nvss-rural:hover {
   background: linear-gradient(135deg, rgba(229, 90, 0, 0.25) 0%, rgba(229, 90, 0, 0.15) 100%);
   transform: translateY(-1px);
   box-shadow: 0 2px 6px rgba(229, 90, 0, 0.2);
}

.nvss-us::before {
   content: "🇺🇸";
   margin-right: 4px;
   font-size: 9px;
}

.nvss-state::before {
   content: "📍";
   margin-right: 4px;
   font-size: 9px;
}

.nvss-rural::before {
   content: "🌾";
   margin-right: 4px;
   font-size: 9px;
}

@keyframes nvssSlideIn {
   from {
      opacity: 0;
      transform: translateY(-12px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Note Styles */
.note {
   background: var(--hrsa-light-blue);
   color: var(--hrsa-gray-dark);
   padding: 12px 16px;
   border-radius: 4px;
   margin-bottom: 20px;
   border-left: 4px solid var(--hrsa-secondary-blue);
   font-size: 14px;
}

.nvss-note {
   background: rgba(255, 102, 0, 0.1);
   color: var(--hrsa-gray-dark);
   padding: 12px 16px;
   border-radius: 4px;
   margin-bottom: 20px;
   border-left: 4px solid var(--hrsa-accent-orange);
   font-size: 14px;
}

.tab-notes {
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border: 1px solid #dee2e6;
   border-radius: 6px;
   padding: 16px 20px;
   margin-bottom: 20px;
   font-size: 14px;
   line-height: 1.6;
   color: var(--hrsa-gray-dark);
   position: relative;
   overflow: hidden;
}

.tab-notes::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--hrsa-secondary-blue), var(--hrsa-primary-blue));
   opacity: 0.8;
}

.tab-notes-header {
   font-weight: 600;
   color: var(--hrsa-secondary-blue);
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
}

.tab-notes-header i {
   color: var(--hrsa-primary-blue);
   opacity: 0.8;
}

.tab-notes p {
   margin-bottom: 8px;
}

.tab-notes p:last-child {
   margin-bottom: 0;
}

.tab-notes .note-emphasis {
   background: rgba(0, 102, 153, 0.08);
   padding: 8px 12px;
   border-radius: 4px;
   border-left: 3px solid var(--hrsa-primary-blue);
   margin-top: 8px;
   font-style: italic;
}

/* Filter Status */
.filter-status {
   background: var(--hrsa-light-blue);
   border: 1px solid var(--hrsa-secondary-blue);
   border-radius: 6px;
   padding: 12px 16px;
   margin-bottom: 20px;
   font-size: 14px;
   color: var(--hrsa-gray-dark);
   position: sticky;
   top: 20px;
   z-index: 100;
   box-shadow: 0 2px 8px rgba(0, 62, 126, 0.1);
}

.filter-status.no-filters {
   background: var(--hrsa-gray-light);
   border-color: var(--hrsa-border);
   color: var(--hrsa-gray-medium);
}

.filter-status-label {
   font-weight: 600;
   margin-right: 8px;
}

.filter-tag {
   display: inline-block;
   background: var(--hrsa-secondary-blue);
   color: white;
   padding: 4px 8px;
   border-radius: 12px;
   font-size: 12px;
   margin-right: 8px;
   margin-bottom: 4px;
}

/* Population Summary */
.population-summary {
   background: linear-gradient(135deg, rgba(0, 102, 153, 0.08) 0%, rgba(0, 102, 153, 0.03) 100%);
   border: 1px solid rgba(0, 102, 153, 0.2);
   border-radius: 8px;
   padding: 20px;
   margin-bottom: 20px;
   box-shadow: 0 2px 8px rgba(0, 102, 153, 0.1);
   position: relative;
   overflow: hidden;
}

.population-summary::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--hrsa-primary-blue), var(--hrsa-secondary-blue));
   opacity: 0.8;
}

.population-summary-header {
   font-weight: 600;
   color: var(--hrsa-primary-blue);
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 16px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding-bottom: 8px;
   border-bottom: 1px solid rgba(0, 102, 153, 0.2);
}

.population-summary-header i {
   color: var(--hrsa-secondary-blue);
   font-size: 14px;
   opacity: 0.8;
}

.population-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 16px;
   margin-bottom: 16px;
}

.stat-item {
   background: rgba(255, 255, 255, 0.7);
   padding: 12px 16px;
   border-radius: 6px;
   border: 1px solid rgba(0, 102, 153, 0.1);
   transition: all 0.2s ease;
}

.stat-item:hover {
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 2px 6px rgba(0, 102, 153, 0.15);
}

.stat-item.primary {
   border-color: var(--hrsa-primary-blue);
   background: rgba(0, 102, 153, 0.05);
}

.stat-item.primary:hover {
   background: rgba(0, 102, 153, 0.1);
}

.stat-label {
   font-size: 13px;
   font-weight: 600;
   color: var(--hrsa-gray-dark);
   margin-bottom: 4px;
   line-height: 1.3;
}

.stat-value {
   font-size: 18px;
   font-weight: 700;
   color: var(--hrsa-primary-blue);
   display: flex;
   align-items: center;
   gap: 8px;
}

.stat-item.primary .stat-value {
   color: var(--hrsa-secondary-blue);
   font-size: 20px;
}

.population-note {
   background: rgba(0, 102, 153, 0.05);
   padding: 12px 16px;
   border-radius: 6px;
   border-left: 3px solid var(--hrsa-primary-blue);
   font-size: 13px;
   color: var(--hrsa-gray-dark);
   line-height: 1.4;
   display: flex;
   align-items: flex-start;
   gap: 8px;
}

.population-note i {
   color: var(--hrsa-primary-blue);
   margin-top: 2px;
   opacity: 0.8;
   flex-shrink: 0;
}

/* State Styles */
.loading {
   text-align: center;
   padding: 40px;
   color: var(--hrsa-gray-medium);
   font-style: italic;
}

.error {
   background: #f8d7da;
   color: var(--hrsa-danger);
   padding: 12px;
   border-radius: 4px;
   margin-bottom: 20px;
   border: 1px solid #f5c6cb;
   text-align: center;
}

.error-message {
   background: #f8d7da;
   color: var(--hrsa-danger);
   padding: 12px;
   border-radius: 4px;
   margin-bottom: 20px;
   border: 1px solid #f5c6cb;
   text-align: center;
}

/* Layout Styles */
.dashboard {
   display: none;
}

.dashboard.active {
   display: block;
}

.dashboard-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 24px;
   margin-bottom: 24px;
}

.dashboard-container {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 24px;
   margin-bottom: 24px;
}

.tables-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 24px;
}

/* Card Styles */
.card {
   background: white;
   border-radius: 8px;
   padding: 24px;
   box-shadow: 0 2px 8px rgba(0, 62, 126, 0.1);
   border-left: 4px solid var(--hrsa-accent-orange);
   transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 62, 126, 0.15);
}

.card h3 {
   color: var(--hrsa-primary-blue);
   margin-bottom: 15px;
   font-size: 18px;
   font-weight: 700;
}

.card p {
   color: var(--hrsa-gray-medium);
   line-height: 1.6;
}

/* Accessibility */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
   .container {
      padding: 15px;
   }
   
   .header {
      flex-direction: column;
      gap: 15px;
   }

   .user-info {
      flex-direction: column;
      align-items: center;
      gap: 12px;
   }

   .header-buttons {
      flex-direction: column;
      width: 100%;
   }

   .change-password-btn,
   .logout-btn,
   .back-btn {
      justify-content: center;
   }

   .dashboard-grid {
      grid-template-columns: 1fr;
   }

   .dashboard-container {
      grid-template-columns: 1fr;
   }
   
   .filters-panel {
      position: static;
   }

   .tables-grid {
      grid-template-columns: 1fr;
   }

   .content-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
   }

   .dashboard-title, .logo {
      font-size: 24px;
   }

   .tooltip .tooltiptext {
      width: 250px;
      margin-left: -125px;
      font-size: 12px;
   }

   .nvss-comparison {
      padding: 14px 16px;
      margin-top: 12px;
   }
   
   .nvss-values {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
   }
   
   .nvss-us,
   .nvss-state,
   .nvss-rural {
      width: 100%;
      text-align: center;
      padding: 6px 12px;
   }
   
   .nvss-header {
      font-size: 10px;
   }
   
   .nvss-metric {
      font-size: 12px;
   }

   .population-stats {
      grid-template-columns: 1fr;
      gap: 12px;
   }
   
   .stat-value {
      font-size: 16px;
   }
   
   .stat-item.primary .stat-value {
      font-size: 18px;
   }
   
   .population-summary {
      padding: 16px;
   }
   
   .population-note {
      font-size: 12px;
   }

   .filter-status {
      font-size: 13px;
   }
   
   .filter-tag {
      font-size: 11px;
   }
}

@media (max-width: 480px) {
   .nvss-comparison {
      padding: 12px 14px;
   }
   
   .nvss-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
   }

   .tooltip .tooltiptext {
      width: 200px;
      margin-left: -100px;
      font-size: 11px;
   }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
   * {
      transition: none !important;
   }
}