/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}:root{--color-primary:#2196f3;--color-primary-dark:#1976d2;--color-primary-light:#42a5f5;--color-primary-lighter:#e3f2fd;--color-secondary:#6c757d;--color-secondary-dark:#5a6268;--color-secondary-light:#868e96;--color-success:#4caf50;--color-success-dark:#388e3c;--color-success-light:#81c784;--color-success-bg:#e8f5e9;--color-success-border:#a5d6a7;--color-warning:#ff9800;--color-warning-dark:#f57c00;--color-warning-light:#ffb74d;--color-warning-bg:#fff3e0;--color-warning-border:#ffcc80;--color-danger:#f44336;--color-danger-dark:#d32f2f;--color-danger-light:#ef5350;--color-danger-bg:#ffebee;--color-danger-border:#ef9a9a;--color-info:#2196f3;--color-info-dark:#1976d2;--color-info-light:#64b5f6;--color-info-bg:#e3f2fd;--color-info-border:#90caf9;--color-white:#fff;--color-black:#000;--color-gray-50:#fafafa;--color-gray-100:#f5f5f5;--color-gray-200:#eee;--color-gray-300:#e0e0e0;--color-gray-400:#bdbdbd;--color-gray-500:#9e9e9e;--color-gray-600:#757575;--color-gray-700:#616161;--color-gray-800:#424242;--color-gray-900:#212121;--color-text-primary:#333;--color-text-secondary:#666;--color-text-muted:#999;--color-text-disabled:#bdbdbd;--color-bg-page:#f5f7fa;--color-bg-card:#fff;--color-bg-hover:#fafafa;--color-bg-disabled:#f5f5f5;--color-border-light:#f0f0f0;--color-border:#e0e0e0;--color-border-medium:#ddd;--color-border-dark:#bbb;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:20px;--spacing-2xl:24px;--spacing-3xl:30px;--spacing-4xl:40px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-2xl:12px;--radius-pill:20px;--radius-circle:50%;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 2px 8px #0000001a;--shadow-lg:0 4px 16px #0000001f;--shadow-xl:0 8px 24px #00000026;--shadow-focus:0 0 0 3px #2196f31a;--font-family-base:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-family-mono:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--transition-fast:.15s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--z-index-dropdown:1000;--z-index-sticky:2000;--z-index-fixed:3000;--z-index-modal-backdrop:10000;--z-index-modal:10050;--z-index-tooltip:11000}.flex{display:flex}.hidden{display:none}.table-row{display:table-row}.border{border-style:var(--tw-border-style);border-width:1px}body{font-family:var(--font-family-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--color-text-primary);background-color:var(--color-bg-page);font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0}code{font-family:var(--font-family-mono)}*{box-sizing:border-box}.btn{padding:var(--spacing-md)var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);transition:all var(--transition-base);border:none;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:var(--color-white)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background-color:var(--color-secondary);color:var(--color-white)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-outline{background-color:var(--color-white);color:var(--color-text-secondary);border:1px solid var(--color-border-medium)}.btn-outline:hover:not(:disabled){background-color:var(--color-bg-hover);border-color:var(--color-border-dark)}.btn-danger{background-color:var(--color-danger);color:var(--color-white)}.btn-danger:hover:not(:disabled){background-color:var(--color-danger-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-success{background-color:var(--color-success);color:var(--color-white)}.btn-success:hover:not(:disabled){background-color:var(--color-success-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-sm{padding:var(--spacing-sm)var(--spacing-md);font-size:var(--font-size-sm)}.form-group{margin-bottom:var(--spacing-xs)}.form-group label{margin-bottom:var(--spacing-sm);color:var(--color-text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-base);display:block}.form-group input,.form-group select,.form-group textarea{width:100%;padding:var(--spacing-md);border:1px solid var(--color-border-medium);border-radius:var(--radius-md);font-size:var(--font-size-base);transition:border-color var(--transition-base);box-sizing:border-box;color:var(--color-text-primary);background-color:var(--color-white);font-family:inherit}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--color-primary);box-shadow:var(--shadow-focus);outline:none}.form-group input:disabled,.form-group select:disabled,.form-group textarea:disabled{background-color:var(--color-bg-disabled);cursor:not-allowed;opacity:.6}.form-row{gap:var(--spacing-xs);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.alert{padding:var(--spacing-lg);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl);font-weight:var(--font-weight-medium);border-left:4px solid}.alert-error{background-color:var(--color-danger-bg);color:var(--color-danger-dark);border-left-color:var(--color-danger)}.alert-success{background-color:var(--color-success-bg);color:var(--color-success-dark);border-left-color:var(--color-success)}.alert-info{background-color:var(--color-info-bg);color:var(--color-info-dark);border-left-color:var(--color-info)}.alert-warning{background-color:var(--color-warning-bg);color:var(--color-warning-dark);border-left-color:var(--color-warning)}.card{background:var(--color-bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}.card-header{padding:var(--spacing-xl);border-bottom:1px solid var(--color-border)}.card-body{padding:var(--spacing-xl)}.loading{text-align:center;padding:var(--spacing-4xl);color:var(--color-text-muted);font-size:var(--font-size-lg)}.modal-overlay{z-index:var(--z-index-modal-backdrop);padding:var(--spacing-xl);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--color-white);border-radius:var(--radius-lg);width:100%;max-width:600px;max-height:90vh;z-index:var(--z-index-modal);overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-header{padding:var(--spacing-xl);border-bottom:1px solid var(--color-border);background:var(--color-white);z-index:10;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.modal-header h2,.modal-header h3{font-size:var(--font-size-xl);color:var(--color-text-primary);margin:0}.modal-body{padding:var(--spacing-xl)}.close-btn{cursor:pointer;color:var(--color-text-muted);border-radius:var(--radius-sm);width:30px;height:30px;transition:all var(--transition-base);background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:1.5rem;display:flex}.close-btn:hover{background-color:var(--color-gray-100);color:var(--color-text-primary)}.close-btn:disabled{cursor:not-allowed;opacity:.5}.page-header{margin-bottom:var(--spacing-3xl);padding-bottom:var(--spacing-xl);border-bottom:2px solid var(--color-border);justify-content:center;align-items:center;display:flex}.page-header h1{font-size:var(--font-size-3xl);color:var(--color-text-primary);margin:0}.page-header h1 .btn{width:auto;margin-top:8px;margin-left:15px;padding:8px 10px;font-size:12pt;position:absolute}.filters-section{gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.filter-group{flex-direction:column;display:flex}.search-input,.filter-select{padding:var(--spacing-md);border:1px solid var(--color-border-medium);border-radius:var(--radius-md);font-size:var(--font-size-base);transition:border-color var(--transition-base);font-family:inherit}.search-input:focus,.filter-select:focus{border-color:var(--color-primary);box-shadow:var(--shadow-focus);outline:none}.search-input:disabled,.filter-select:disabled{background-color:var(--color-bg-disabled);cursor:not-allowed;opacity:.6}.table-container{margin-bottom:var(--spacing-3xl);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow-x:auto}.data-table{border-collapse:collapse;background:var(--color-white);width:100%}.data-table thead{background-color:var(--color-gray-100);border-bottom:2px solid var(--color-border)}.data-table th{padding:var(--spacing-lg);text-align:left;font-weight:var(--font-weight-semibold);color:var(--color-text-primary);font-size:var(--font-size-base)}.data-table td{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border-light);color:var(--color-text-secondary)}.data-table tbody tr{transition:background-color var(--transition-base)}.data-table tbody tr:hover{background-color:var(--color-bg-hover)}.table-row{cursor:pointer}.name-cell{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);word-break:break-word;max-width:250px}.actions-cell{gap:var(--spacing-sm);min-width:160px;display:flex}.badge{padding:var(--spacing-xs)var(--spacing-md);border-radius:var(--radius-pill);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);white-space:nowrap;text-transform:capitalize;display:inline-block}.badge-warning{background-color:var(--color-warning-bg);color:var(--color-warning-dark)}.badge-success{background-color:var(--color-success-bg);color:var(--color-success-dark)}.badge-danger{background-color:var(--color-danger-bg);color:var(--color-danger-dark)}.badge-info{background-color:var(--color-info-bg);color:var(--color-info-dark)}.badge-default{background-color:var(--color-gray-100);color:var(--color-text-secondary)}.status-badge{color:var(--color-white);border-radius:var(--radius-pill);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:capitalize;padding:6px 12px;display:inline-block}.detail-tabs{margin-bottom:var(--spacing-3xl);flex-wrap:wrap;gap:0;display:flex}.tab{padding:var(--spacing-lg)20px;background:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid var(--color-border);cursor:pointer;font-size:var(--font-size-base);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);margin:0 var(--spacing-xs);text-align:center;flex-grow:1;font-weight:700;transition:all .3s;display:flex}.tab:hover{color:var(--color-text-primary);background-color:var(--color-gray-100)}.tab.active{color:var(--color-white);background:var(--color-primary);border-color:#0000;flex-grow:1;display:flex}.info-grid{margin-bottom:var(--spacing-3xl);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;display:grid}.info-card{background:var(--color-gray-50);padding:var(--spacing-lg);border-radius:var(--radius-lg);border-left:4px solid var(--color-primary)}.info-card label{font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:block}.info-card p{font-size:var(--font-size-base);color:var(--color-text-primary);margin:0}.form{padding:var(--spacing-md)}.form-header{justify-content:space-between;align-items:center;padding:0 18px;display:flex}.form-header h2{margin:10px 0}.form-section{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm)}.form-section h3,.form-section h4{color:var(--color-text-primary);font-weight:var(--font-weight-semibold);margin:0 0 15px}.form-section h4{font-size:1.05rem}.form-actions{gap:var(--spacing-xs);padding-top:var(--spacing-sm);display:flex}.section-header{margin-bottom:var(--spacing-xl);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding-bottom:15px;display:flex}.section-header h2{font-size:var(--font-size-xl);color:var(--color-text-primary);margin:0}.empty-state{text-align:center;padding:var(--spacing-4xl)var(--spacing-xl);background:var(--color-gray-50);border-radius:var(--radius-lg);color:var(--color-text-muted)}h1{text-align:center}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--color-bg-page);
  padding: var(--spacing-xl);
}

.login-card {
  background: var(--color-white);
  padding: var(--spacing-4xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 400px;
}

.login-card h2 {
  margin-top: 0;
  margin-bottom: var(--spacing-3xl);
  text-align: center;
  color: var(--color-text-primary);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.form-group input {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.btn-primary {
  width: 100%;
  padding: var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.error-message {
  background: var(--color-danger-bg);
  color: var(--color-danger-dark);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--color-danger-border);
}

.success-message {
  background: var(--color-success-bg);
  color: var(--color-success-dark);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--color-success-border);
}

.register-link {
  text-align: center;
  margin-top: var(--spacing-xl);
  color: var(--color-text-secondary);
}

.register-link a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

.register-link a:hover {
  text-decoration: underline;
}
.dashboard-container {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding: var(--spacing-xl);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-white);
  padding: var(--spacing-xl) var(--spacing-4xl);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-md);
}

.dashboard-header h1 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-2xl);
}

.dashboard-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  gap: var(--spacing-xl);
  grid-template-columns: 1fr;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: var(--spacing-xl);
}

.chart-container {
  background: var(--color-white);
  padding: var(--spacing-3xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.chart-container h2 {
  margin-top: 0;
  margin-bottom: var(--spacing-xl);
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
}

.chart-container > div {
  flex: 1;
  position: relative;
}

/* Dashboard-specific message styles */
.error-message,
.success-message {
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
  font-weight: var(--font-weight-medium);
}

.error-message {
  background: var(--color-danger-bg);
  color: var(--color-danger-dark);
  border: 1px solid var(--color-danger-border);
}

.success-message {
  background: var(--color-success-bg);
  color: var(--color-success-dark);
  border: 1px solid var(--color-success-border);
}

.header-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.role-badge {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.role-badge.admin {
  background: var(--color-primary);
  color: var(--color-white);
}

@media (max-width: 1024px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

.grants-overview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  height: 100%;
}

.grants-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.summary-card {
  background: var(--color-gray-50);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  text-align: center;
}

.summary-card.highlight {
  border-left-color: var(--color-success);
  background: var(--color-success-bg);
}

.summary-card h3 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.summary-value {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 28px;
  font-weight: var(--font-weight-bold);
}

.summary-card.highlight .summary-value {
  color: var(--color-success);
}
.donors-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.results-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
}

.search-bar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.search-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Donor-specific table styling */
.donors-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
}

.donors-table thead {
  background-color: var(--color-gray-100);
  border-bottom: 2px solid var(--color-border);
}

.donors-table th {
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.actions-header {
  text-align: center !important;
}

.donors-table td {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}

.donors-table tbody tr {
  transition: background-color var(--transition-base);
}

.donors-table tbody tr:hover {
  background-color: var(--color-bg-hover);
}

.amount-column {
  text-align: right !important;
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-dark);
  padding-right: 6% !important;
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-dark, #5a6268);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Donor-specific overrides */
.empty-state h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
}

.empty-state p {
  margin: 0 0 var(--spacing-xl) 0;
  font-size: var(--font-size-base);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-3xl);
}

.page-info {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  min-width: 120px;
  text-align: center;
}

.note-form-container {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.note-form-container h3 {
  margin: 0 0 15px 0;
  color: var(--color-text-primary);
  font-size: 1.2em;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.note-input-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.note-input-form textarea {
  padding: var(--spacing-md);
  border: 1px solid #d0d0d0;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.95em;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.note-input-form textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.note-input-form textarea:disabled {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
}

.btn-add-note {
  padding: 10px 20px;
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
}

.btn-add-note:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-add-note:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Alerts */
.alert {
  padding: var(--spacing-md) 15px;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  font-weight: var(--font-weight-medium);
  animation: slideIn 0.3s ease;
}

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

.alert-error {
  background-color: #fee;
  color: #c33;
  border: 1px solid #fcc;
}

.alert-success {
  background-color: #efe;
  color: #3c3;
  border: 1px solid #cfc;
}

/* Notes List */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.no-notes {
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
  padding: 10px 0;
  text-align: center;
}

.note-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background: #f9f9f9;
  border-left: 4px solid #667eea;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
}

.note-item:hover {
  background: #f0f4ff;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.note-content {
  flex: 1;
  min-width: 0;
}

.note-content p {
  margin: 0 0 5px 0;
  color: var(--color-text-primary);
  word-wrap: break-word;
  white-space: pre-wrap;
}

.note-meta {
  display: block;
  font-size: 0.8em;
  color: var(--color-text-muted);
  margin-top: 5px;
}

.btn-delete-note {
  padding: 4px 8px;
  background: #f44336;
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.btn-delete-note:hover {
  background: #d32f2f;
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 600px) {
  .note-form-container {
    padding: var(--spacing-lg);
  }

  .note-item {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .btn-delete-note {
    align-self: flex-end;
  }
}
.audit-history-container {
  padding: var(--spacing-xl) 0;
}

.audit-history-container h3 {
  margin: 0 0 20px 0;
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
}

.audit-timeline {
  position: relative;
  padding-left: 40px;
}

.audit-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background-color: #e0e0e0;
}

.audit-entry {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
  position: relative;
}

.audit-marker {
  position: absolute;
  left: -40px;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.activity-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: var(--font-size-base);
  border: 3px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.activity-badge.create {
  background-color: #4caf50;
}

.activity-badge.update {
  background-color: var(--color-primary);
}

.activity-badge.delete {
  background-color: #f44336;
}

.activity-badge.default {
  background-color: var(--color-text-muted);
}

.audit-content {
  background: #f9f9f9;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border-left: 4px solid #2196f3;
  flex: 1;
}

.audit-entry:nth-child(odd) .audit-content {
  border-left-color: #4caf50;
}

.audit-entry:nth-child(even) .audit-content {
  border-left-color: #ff9800;
}

.audit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-lg);
}

.activity-type {
  display: inline-block;
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.timestamp {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.audit-user {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.audit-user strong {
  color: var(--color-text-primary);
}

.audit-description {
  background-color: var(--color-white);
  padding: 10px;
  border-radius: var(--radius-sm);
  margin: 8px 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  border-left: 3px solid #ff9800;
}

.audit-changes {
  margin-top: 10px;
}

.audit-changes details {
  cursor: pointer;
}

.audit-changes summary {
  color: #2196f3;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.audit-changes summary:hover {
  text-decoration: underline;
}

.changes-detail {
  background-color: var(--color-white);
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  border: 1px solid var(--color-border);
}

.change-item {
  margin-bottom: var(--spacing-md);
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

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

.change-item strong {
  display: block;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 5px;
  font-size: var(--font-size-sm);
}

.change-values {
  padding: var(--spacing-sm);
  background-color: var(--color-bg-hover);
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.old-value {
  display: block;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  background: #f5f5f5;
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}

.empty-state p {
  margin: 0;
  font-size: var(--font-size-base);
}

.loading {
  text-align: center;
  padding: 40px;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.alert {
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
}

.alert-error {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ef5350;
}
.attachments-tab {
  padding: 20px;
}

.attachments-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.attachments-container h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 1.5rem;
}

/* Dropzone Styles */
.dropzone {
  border: 2px dashed #4CAF50;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  background-color: #f9fff9;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.dropzone:hover {
  background-color: #f0fff0;
  border-color: #45a049;
}

.dropzone.active {
  background-color: #e8f5e9;
  border-color: #2e7d32;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.dropzone.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.dropzone-content {
  pointer-events: none;
}

.dropzone-text {
  margin: 0 0 8px 0;
  color: #333;
  font-weight: 500;
  font-size: 1rem;
}

.dropzone-hint {
  margin: 0;
  color: #666;
  font-size: 0.875rem;
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-top: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Status Messages */
.error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  border-left: 4px solid #c62828;
}

.success-message {
  background-color: #e8f5e9;
  color: #2e7d32;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  border-left: 4px solid #2e7d32;
}

/* Attachments List */
.attachments-list {
  margin-top: 30px;
}

.attachments-list h4 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #333;
  font-size: 1.1rem;
}

.no-attachments {
  color: #999;
  font-style: italic;
  padding: 20px;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.attachments-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 12px;
  background-color: #fafafa;
  transition: all 0.2s ease;
}

.attachment-item:hover {
  background-color: #f5f5f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.attachment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: #333;
}

.file-icon {
  font-size: 1.25rem;
}

.filename {
  word-break: break-word;
  max-width: 400px;
  color: #1976d2;
}

.attachment-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: #666;
}

.file-size {
  background-color: #e3f2fd;
  padding: 2px 8px;
  border-radius: 3px;
  color: #1565c0;
  font-weight: 500;
}

.uploaded-by {
  color: #666;
}

.upload-date {
  color: #999;
}

.download-count {
  background-color: #fff3e0;
  padding: 2px 8px;
  border-radius: 3px;
  color: #e65100;
  font-weight: 500;
}

.download-button, .view-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin-left: 16px;
}

.view-button {
  background-color: #1976d2;
}

.download-button:hover {
  background-color: #45a049;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.download-button:active {
  transform: scale(0.98);
}

/* Responsive Design */
@media (max-width: 768px) {
  .attachment-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .download-button {
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
  }

  .attachment-details {
    flex-direction: column;
    gap: 4px;
  }

  .dropzone {
    padding: 30px 15px;
  }

  .filename {
    max-width: 100%;
  }
}
.donor-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--spacing-3xl);
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-border);
}

.detail-header h1 {
  margin: 0;
  font-size: var(--font-size-3xl);
  color: var(--color-text-primary);
  flex: 1;
}

.header-actions {
  display: flex;
  gap: var(--spacing-md);
}

.detail-section {
  padding: var(--spacing-xl) 0;
}

/* Donor-specific info card styles */
.info-card .amount {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4caf50;
}

.label-badge {
  display: inline-block;
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  margin-left: 8px;
}

.donations-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.donations-table thead {
  background-color: var(--color-gray-100);
  border-bottom: 2px solid var(--color-border);
}

.donations-table th {
  padding: var(--spacing-md) 15px;
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.donations-table td {
  padding: var(--spacing-md) 15px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.donations-table tr:hover {
  background-color: #f9f9f9;
}

.donations-table .amount {
  color: #4caf50;
  font-weight: var(--font-weight-semibold);
}

.donations-table .notes-cell {
  color: var(--color-text-secondary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.note-item {
  background: #f9f9f9;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border-left: 4px solid #ff9800;
}

.note-text {
  margin: 0 0 10px 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: 1.6;
}

.note-meta {
  display: flex;
  gap: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.note-author {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.empty-state p {
  margin: 10px 0;
  font-size: var(--font-size-base);
}

/* Donor-specific button overrides */
.btn-secondary {
  background-color: #f0f0f0;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium);
}

.btn-secondary:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.btn-danger {
  background-color: #f44336;
  color: var(--color-white);
}

.btn-danger:hover:not(:disabled) {
  background-color: #da190b;
}

.grants-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.results-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
}

/* Grant-specific table styling */
.grants-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
}

.grants-table thead {
  background-color: var(--color-gray-100);
  border-bottom: 2px solid var(--color-border);
}

.grants-table th {
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.grants-table td {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}

.grants-table tbody tr {
  transition: background-color var(--transition-base);
}

.grants-table tbody tr:hover {
  background-color: var(--color-bg-hover);
}

/* Grant-specific overrides if needed */
.empty-state h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
}

.empty-state p {
  margin: 0 0 var(--spacing-xl) 0;
  font-size: var(--font-size-base);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-3xl);
}

.page-info {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  min-width: 120px;
  text-align: center;
}

.grant-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--spacing-3xl);
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-border);
  flex-wrap: wrap;
}

.header-content {
  flex: 1;
  min-width: 250px;
}

.detail-header h1 {
  margin: 0 0 10px 0;
  font-size: var(--font-size-3xl);
  color: var(--color-text-primary);
}

.header-meta {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.header-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.detail-section {
  padding: var(--spacing-xl) 0;
}

/* Grant-specific info card styles */
.info-card .amount {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4caf50;
}

.info-card .status {
  display: inline-block;
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

.description-section {
  background: #f9f9f9;
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  border-left: 4px solid #ff9800;
}

.description-section h3 {
  margin: 0 0 15px 0;
  color: var(--color-text-primary);
}

.description-section p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.note-item {
  background: #f9f9f9;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border-left: 4px solid #ff9800;
}

.note-text {
  margin: 0 0 10px 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: 1.6;
}

.note-meta {
  display: flex;
  gap: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.note-author {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.empty-state p {
  margin: 10px 0;
  font-size: var(--font-size-base);
}

/* Grant-specific button overrides */
.btn-danger {
  background-color: #f44336;
  color: var(--color-white);
}

.btn-danger:hover:not(:disabled) {
  background-color: #da190b;
}

.organizations-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

/* Organizations-specific table styling */
.organizations-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
}

.organizations-table thead {
  background-color: var(--color-gray-100);
  border-bottom: 2px solid var(--color-border);
}

.organizations-table th {
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.organizations-table td {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}

.organizations-table tbody tr {
  transition: background-color var(--transition-base);
}

.organizations-table tbody tr:hover {
  background-color: var(--color-bg-hover);
}

.org-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #667eea;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
  font-family: inherit;
  transition: all var(--transition-base);
}

.org-link-btn:hover {
  color: #764ba2;
  text-decoration: underline;
}

.org-link-btn:active {
  color: #555;
}

.organizations-table a {
  color: #2196f3;
  text-decoration: none;
}

.organizations-table a:hover {
  text-decoration: underline;
}

.organization-form {
  padding: var(--spacing-xl);
}

/* Organizations-specific button overrides */
.btn-secondary {
  background-color: #f0f0f0;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium);
}

.btn-secondary:hover {
  background-color: #e0e0e0;
}

.btn-secondary:disabled {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
  color: var(--color-text-muted);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: var(--spacing-xl);
  margin-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.page-info {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Responsive */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-lg);
  }

  .table-container {
    overflow-x: auto;
  }

  .organizations-table th,
  .organizations-table td {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .pagination {
    flex-wrap: wrap;
  }

  .actions-cell {
    flex-direction: column;
    gap: 5px;
  }

  .btn-sm {
    width: 100%;
  }
}

.organization-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl);
  background: #f5f5f5;
  min-height: 100vh;
}

.detail-header {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.detail-header .btn {
  padding: var(--spacing-sm) 12px;
  font-size: 0.9em;
  margin-bottom: var(--spacing-md);
}

.header-content {
  flex: 1;
}

.header-content h1 {
  margin: 0 0 10px 0;
  color: var(--color-text-primary);
  font-size: 2em;
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.header-info {
  color: var(--color-text-secondary);
  font-size: 0.95em;
}

.header-actions {
  display: flex;
  gap: var(--spacing-md);
}

.header-actions .btn {
  white-space: nowrap;
}

/* Edit Form */
.edit-form-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-form {
  position: relative;
  background: var(--color-white);
  border-radius: 12px;
  padding: 30px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.edit-form h2 {
  margin-top: 0;
  color: var(--color-text-primary);
  border-bottom: 2px solid #667eea;
  padding-bottom: 15px;
}

/* Detail Section */
.detail-section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: 15px;
  border-bottom: 2px solid var(--color-border);
}

.section-header h2 {
  margin: 0;
  color: var(--color-text-primary);
}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.info-card {
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  border-left: 4px solid #667eea;
}

.info-card label {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  font-size: 0.9em;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-card p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.1em;
  word-break: break-word;
}

.info-card a {
  color: #667eea;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.info-card a:hover {
  text-decoration: underline;
}

.amount {
  font-weight: var(--font-weight-bold);
  color: #4caf50;
  font-size: 1.3em;
}

/* Description Section */
.description-section {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #e0e0e0;
}

.description-section h3 {
  color: var(--color-text-primary);
  margin: 0 0 15px 0;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.description-section p {
  color: #555;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Table */
.table-container {
  overflow-x: auto;
  margin-top: 20px;
}

.grants-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.grants-table thead {
  color: var(--color-white);
}

.grants-table th {
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: var(--font-weight-semibold);
}

.grants-table td {
  padding: var(--spacing-md) 15px;
  border-bottom: 1px solid var(--color-border);
}

.grants-table tbody tr {
  transition: background-color var(--transition-base);
}

.grants-table tbody tr:hover {
  background-color: #f5f7ff;
}

.grants-table tbody tr:nth-child(even) {
  background-color: #fafbff;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: 0.85em;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
}

.empty-state p {
  font-size: 1.1em;
  margin: 0;
}

/* Loading */
.loading {
  text-align: center;
  padding: 40px 20px;
  font-size: 1.1em;
  color: var(--color-text-secondary);
}

/* Alerts */
.alert {
  padding: var(--spacing-lg) 20px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  font-weight: var(--font-weight-medium);
}

.alert-error {
  background-color: #fee;
  color: #c33;
  border: 1px solid #fcc;
}

/* Buttons */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
  font-size: 1em;
  text-decoration: none;
  display: inline-block;
}

.btn-secondary {
  background: #f0f0f0;
  color: var(--color-text-primary);
  border: 2px solid #d0d0d0;
}

.btn-secondary:hover {
  background: #e0e0e0;
  border-color: #667eea;
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-outline:hover {
  background: #f0f4ff;
}

.btn-danger {
  background: #f44336;
  color: var(--color-white);
}

.btn-danger:hover {
  background: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.85em;
}

/* Responsive */
@media (max-width: 768px) {
  .organization-detail-container {
    padding: 10px;
  }

  .detail-header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    flex-direction: column;
  }

  .header-actions .btn {
    width: 100%;
  }

  .tab {
    width: 100%;
  }

  .detail-section {
    padding: var(--spacing-xl);
  }

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

  .edit-form {
    width: 95%;
    padding: var(--spacing-xl);
  }

  .grants-table {
    font-size: 0.85em;
  }

  .grants-table th,
  .grants-table td {
    padding: 10px;
  }
}
.reports-container {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding: var(--spacing-xl);
}

.reports-header {
  text-align: center;
  color: var(--color-text-primary);
  margin-bottom: 40px;
  padding-top: 20px;
}

.reports-header h1 {
  font-size: 2.5em;
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.reports-header p {
  font-size: 1.1em;
  margin: 10px 0 0 0;
  opacity: 0.9;
}

.reports-main {
  max-width: 1400px;
  margin: 0 auto;
}

/* Report Type Selection - Compact */
.report-selector-compact {
  background: var(--color-white);
  border-radius: 12px;
  padding: var(--spacing-xl) 30px;
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.report-type-selector {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.report-type-selector label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: 0.95em;
}

.report-type-selector select {
  padding: var(--spacing-md) 15px;
  border: 2px solid #d0d0d0;
  border-radius: var(--radius-md);
  font-size: 1em;
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  background-color: var(--color-white);
  cursor: pointer;
  transition: all 0.3s ease;
}

.report-type-selector select:hover {
  border-color: #667eea;
}

.report-type-selector select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.report-description {
  margin: 0;
  font-size: 0.9em;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Report Filters */
.report-filters {
  background: var(--color-white);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: var(--spacing-3xl);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.report-filters h2 {
  font-size: 1.5em;
  margin: 0 0 20px 0;
  color: var(--color-text-primary);
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: var(--spacing-xl);
}

.filter-group {
  display: flex;
  flex-direction: column;
}

.filter-group label {
  margin-bottom: 8px;
  font-weight: var(--font-weight-semibold);
  color: #555;
  font-size: 0.95em;
}

.filter-group input,
.filter-group select {
  padding: var(--spacing-md);
  border: 1px solid #d0d0d0;
  border-radius: var(--radius-md);
  font-size: 1em;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-actions {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.btn-generate,
.btn-export {
  padding: var(--spacing-md) 30px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1em;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-generate {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-generate:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-generate:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-export {
  background: #4CAF50;
  color: var(--color-white);
}

.btn-export:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

/* Alerts */
.alert {
  padding: var(--spacing-lg) 20px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  font-weight: var(--font-weight-medium);
}

.alert-error {
  background-color: #fee;
  color: #c33;
  border: 1px solid #fcc;
}

.alert-success {
  background-color: #efe;
  color: #3c3;
  border: 1px solid #cfc;
}

/* Report Content */
.report-content {
  background: var(--color-white);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.report-section {
  margin-bottom: 40px;
}

.report-section:last-child {
  margin-bottom: 0;
}

.report-section h3 {
  font-size: 1.3em;
  margin: 0 0 20px 0;
  color: var(--color-text-primary);
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

/* Summary Grid */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.summary-item {
  background: var(--color-primary-lighter);
  padding: var(--spacing-xl);
  border-radius: 10px;
  border-left: 4px solid #667eea;
}

.summary-item label {
  display: block;
  font-size: 0.9em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 8px;
}

.summary-value {
  display: block;
  font-size: 1.8em;
  font-weight: var(--font-weight-bold);
  color: #667eea;
}

/* Summary Details / Breakdowns */
.summary-details {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.summary-breakdown {
  background: #f0f4ff;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border-left: 4px solid #667eea;
}

.summary-breakdown h4 {
  margin: 0 0 12px 0;
  font-size: 1em;
  color: #667eea;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.breakdown-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.breakdown-item:last-child {
  border-bottom: none;
}

.breakdown-label {
  font-weight: var(--font-weight-semibold);
  color: #555;
  font-size: 0.9em;
}

.breakdown-value {
  font-weight: var(--font-weight-bold);
  color: #667eea;
  font-size: 1.1em;
}

/* Table */
.table-container {
  overflow-x: auto;
  margin-top: 20px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.report-table thead {
  background: var(--color-primary);
  color: var(--color-white);
}

.report-table th {
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  border: none;
}

.report-table td {
  padding: var(--spacing-md) 15px;
  border-bottom: 1px solid var(--color-border);
}

.report-table tbody tr {
  transition: background-color var(--transition-base);
}

.report-table tbody tr:hover {
  background-color: #f5f7ff;
}

.report-table tbody tr:nth-child(even) {
  background-color: #fafbff;
}

/* Responsive */
@media (max-width: 768px) {
  .reports-header h1 {
    font-size: 2em;
  }

  .report-selector,
  .report-filters,
  .report-content {
    padding: var(--spacing-xl);
  }

  .report-types-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-md);
  }

  .filters-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .filter-actions {
    flex-direction: column;
  }

  .btn-generate,
  .btn-export {
    width: 100%;
  }

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

  .report-table {
    font-size: 0.85em;
  }

  .report-table th,
  .report-table td {
    padding: 10px;
  }
}
.admin-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  min-height: calc(100vh - 80px);
  background: #f5f7fa;
}

.admin-header {
  margin-bottom: 40px;
  padding: 0 20px;
}

.admin-header h1 {
  font-size: 2.5rem;
  color: #1a202c;
  margin: 0 0 10px 0;
  font-weight: var(--font-weight-bold);
}

.admin-header p {
  font-size: var(--font-size-base);
  color: #718096;
  margin: 0;
}

.new-user-form {
  background-color: var(--color-white);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.new-user-form .form-actions {
  justify-content: end;
}

/* Admin-specific alert animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert {
  animation: slideDown 0.3s ease-out;
}

/* Controls */
.admin-controls {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-3xl);
  align-items: center;
  flex-wrap: wrap;
}

.search-bar {
  flex: 1;
  min-width: 250px;
}

.search-bar input {
  width: 100%;
  padding: var(--spacing-md) 16px;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  transition: all 0.3s ease;
}

.search-bar input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Admin-specific button styles */
.btn-success {
  background-color: #48bb78;
  color: var(--color-white);
}

.btn-success:hover {
  background-color: #38a169;
  transform: translateY(-2px);
}

.btn-info {
  background-color: #4299e1;
  color: var(--color-white);
}

.btn-info:hover {
  background-color: #3182ce;
  transform: translateY(-2px);
}

.btn-warning {
  background-color: #ed8936;
  color: var(--color-white);
}

.btn-warning:hover {
  background-color: #dd6b20;
  transform: translateY(-2px);
}

.btn-small {
  padding: 6px 12px;
  font-size: var(--font-size-sm);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checkbox-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  color: #2d3748;
}

.checkbox-label input {
  cursor: pointer;
  width: 18px;
  height: 18px;
}

/* Users Section */
.users-section {
  background: var(--color-white);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.users-section h2 {
  margin: 0 0 20px 0;
  font-size: 1.5rem;
  color: #1a202c;
}

.loading,
.no-results {
  text-align: center;
  padding: 40px 20px;
  color: #718096;
  font-size: 1.1rem;
}

.users-table-wrapper {
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.users-table thead {
  background: #f7fafc;
  border-bottom: 2px solid #e2e8f0;
}

.users-table th {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: var(--font-weight-bold);
  color: #2d3748;
  white-space: nowrap;
}

.users-table td {
  padding: var(--spacing-lg) 12px;
  border-bottom: 1px solid #e2e8f0;
  color: #4a5568;
}

.users-table tbody tr:hover {
  background: #f7fafc;
}

.users-table tbody tr.deleted {
  opacity: 0.6;
  background: #f5f5f5;
}

.email-cell {
  font-weight: var(--font-weight-semibold);
  color: #2d3748;
}

.date-cell {
  font-size: var(--font-size-sm);
  color: #718096;
}

.roles-badges {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.badge-user {
  background-color: #bee3f8;
  color: #2c5aa0;
}

.badge-admin {
  background-color: #feebc8;
  color: #7c2d12;
}

.badge-moderator {
  background-color: #c6f6d5;
  color: #22543d;
}

.badge-success {
  background-color: #c6f6d5;
  color: #22543d;
}

.badge-warning {
  background-color: #fed7d7;
  color: #c53030;
}

.actions-cell {
  padding: var(--spacing-lg) 12px;
}

.action-buttons {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.action-buttons .btn {
  margin: 0;
  padding: 6px 10px;
  font-size: 0.8rem;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.page-info {
  color: #718096;
  font-weight: var(--font-weight-medium);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 90%;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.close-btn {
  background: none;
  border: none;
  font-size: var(--font-size-3xl);
  cursor: pointer;
  color: #718096;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #f7fafc;
  color: #2d3748;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
}

.modal-footer .btn {
  margin: 0;
}

.roles-group {
  margin-left: var(--spacing-lg);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .admin-container {
    padding: 30px 15px;
  }

  .admin-header {
    padding: 0;
  }

  .admin-header h1 {
    font-size: var(--font-size-3xl);
  }

  .admin-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-controls .btn {
    width: 100%;
    justify-content: center;
  }

  .search-bar {
    min-width: 100%;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .admin-container {
    padding: var(--spacing-xl) 10px;
  }

  .admin-header h1 {
    font-size: 1.5rem;
  }

  .users-section {
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
  }

  .users-table {
    font-size: var(--font-size-sm);
  }

  .users-table th,
  .users-table td {
    padding: 10px;
  }

  .users-table-wrapper {
    -webkit-overflow-scrolling: touch;
  }

  .roles-badges,
  .action-buttons {
    flex-direction: column;
    gap: 6px;
  }

  .badge,
  .action-buttons .btn {
    width: 100%;
    text-align: center;
  }

  .modal {
    width: 95%;
    max-width: 400px;
  }

  .checkbox-group {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .admin-container {
    padding: var(--spacing-lg) 10px;
    min-height: calc(100vh - 60px);
  }

  .admin-header h1 {
    font-size: var(--font-size-xl);
  }

  .admin-header p {
    font-size: var(--font-size-sm);
  }

  .users-section {
    padding: var(--spacing-lg);
  }

  .users-section h2 {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-lg);
  }

  .users-table {
    font-size: 0.8rem;
  }

  .users-table th,
  .users-table td {
    padding: var(--spacing-sm) 6px;
  }

  .pagination {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .pagination .btn {
    width: 100%;
    justify-content: center;
  }
}
.navigation {
  background-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

/* Brand/Logo */
.nav-brand {
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  transition: opacity var(--transition-base);
}

.logo:hover {
  opacity: 0.9;
}

.logo-icon {
  font-size: 1.5rem;
}

.logo-text {
  letter-spacing: 0.5px;
}

/* Navigation Links */
.nav-links {
  display: flex;
  gap: 0;
  align-items: center;
  flex: 1;
  margin: 0 30px;
}

.nav-link {
  color: var(--color-white);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-slow);
  font-size: var(--font-size-base);
  position: relative;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom: 3px solid var(--color-white);
}

.nav-link.admin-link {
  background-color: rgba(255, 152, 0, 0.25);
  border: 1px solid rgba(255, 152, 0, 0.4);
  margin-left: auto;
}

.nav-link.admin-link:hover {
  background-color: rgba(255, 152, 0, 0.4);
}

.nav-link.admin-link.active {
  background-color: rgba(255, 152, 0, 0.5);
  border-bottom: 3px solid var(--color-warning);
}

/* Right Side - User Info & Logout */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex-shrink: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-white);
}

.user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.admin-badge {
  background-color: var(--color-warning);
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logout-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-base);
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}

.logout-btn:active {
  background-color: rgba(255, 255, 255, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-container {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 15px;
  }

  .nav-brand {
    width: 100%;
    margin-bottom: 10px;
  }

  .logo-text {
    display: none;
  }

  .nav-links {
    width: 100%;
    margin: 0;
    gap: 5px;
    flex-wrap: wrap;
  }

  .nav-link {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .nav-link.admin-link {
    margin-left: 0;
    margin-top: 5px;
  }

  .nav-right {
    width: 100%;
    margin-top: 10px;
    justify-content: space-between;
  }

  .user-info {
    gap: 5px;
  }

  .user-name {
    font-size: 0.8rem;
  }

  .logout-btn {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 8px 10px;
  }

  .logo {
    font-size: 1.1rem;
    gap: 5px;
  }

  .logo-icon {
    font-size: 1.2rem;
  }

  .nav-links {
    gap: 3px;
  }

  .nav-link {
    padding: 5px 8px;
    font-size: 0.75rem;
  }

  .admin-badge {
    display: none;
  }

  .user-name {
    display: none;
  }
}
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}