/* ============================================================
   Member Directory — Stylesheet
   ============================================================
   Colors follow Rotary International brand guidelines:
     --accent  = Rotary Blue  (#17458F)
     --gold    = Rotary Gold  (#F7A81B)  used for club badges
   To adjust: edit these two variables in :root below.
   ============================================================ */

/* ---- Custom properties ------------------------------------ */
:root {
  --accent:       #17458F;   /* Rotary Blue — buttons, links, focus rings */
  --accent-hover: #103470;   /* darker Rotary Blue for hover states */
  --accent-tint:  rgba(23, 69, 143, 0.10);  /* light blue tint */
  --accent-ring:  rgba(23, 69, 143, 0.25);  /* focus ring / subtle borders */

  --gold:         #F7A81B;   /* Rotary Gold — club badges */
  --gold-tint:    rgba(247, 168, 27, 0.15); /* light gold badge background */
  --gold-text:    #7a4f00;   /* dark warm brown — readable on gold tint */

  --bg:           #f7f7f5;   /* page background */
  --surface:      #ffffff;   /* cards, modals, inputs */
  --border:       #e4e4e7;   /* subtle dividers and input borders */

  --text:         #18181b;   /* primary body text */
  --text-muted:   #71717a;   /* secondary / caption text */
  --text-light:   #a1a1aa;   /* very subtle text (admin toggle, etc.) */

  --shadow-sm:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 8px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-lg:    0 12px 24px -4px rgba(0,0,0,.10), 0 4px 8px -2px rgba(0,0,0,.05);

  --radius:       10px;
  --radius-sm:    6px;
  --radius-pill:  999px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
          Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

  --transition: 0.15s ease;
}

/* ---- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ---- Layout container ------------------------------------ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- Site header ----------------------------------------- */
.site-header {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  padding:       1.125rem 0;
  position:      sticky;
  top:           0;
  z-index:       100;
  box-shadow:    var(--shadow-sm);
}

.site-header .container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  flex-wrap:       wrap;
}

.site-title {
  font-size:      1.375rem;
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--text);
}

/* ---- Buttons --------------------------------------------- */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.375rem;
  padding:         0.6rem 1.25rem;
  border-radius:   var(--radius-sm);
  font-size:       0.9rem;
  font-weight:     500;
  font-family:     var(--font);
  cursor:          pointer;
  border:          none;
  transition:      background-color var(--transition), box-shadow var(--transition), transform var(--transition);
  white-space:     nowrap;
  line-height:     1.4;
}
.btn:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  color:      #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
  background: var(--surface);
  color:      var(--text);
  border:     1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg); }

.btn-full { width: 100%; }

/* ---- Search & filter controls ---------------------------- */
.controls {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-wrap:   wrap;
  padding:     1.5rem 0 1.125rem;
}

.search-input,
.club-select {
  padding:     0.6rem 0.875rem;
  border:      1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:   0.9rem;
  font-family: var(--font);
  background:  var(--surface);
  color:       var(--text);
  transition:  border-color var(--transition), box-shadow var(--transition);
}
.search-input:focus,
.club-select:focus {
  outline:    none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.club-select { cursor: pointer; }

.entry-count {
  font-size:  0.82rem;
  color:      var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
}

/* ---- Banner messages (directory-level) ------------------- */
.error-banner {
  background:    #fef2f2;
  color:         #b91c1c;
  border:        1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding:       0.875rem 1rem;
  margin-bottom: 1rem;
  font-size:     0.9rem;
}

/* ---- Card grid ------------------------------------------- */
.card-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1.25rem;
  padding-bottom:        3rem;
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Cards (visual member showcase) ---------------------- */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.5rem 1.25rem 1.25rem;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  text-align:    center;
  gap:           0.625rem;
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-2px);
}

/* Profile photo (circular, centered) */
.card-photo-wrap {
  position:       relative;
  width:          120px;
  height:         120px;
  border-radius:  50%;
  overflow:       hidden;
  background:     var(--bg);
  margin-bottom:  0.5rem;
  flex-shrink:    0;
  border:         3px solid var(--accent-tint);
}

.card-photo {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}

/* Initials fallback shown when the photo URL fails to load */
.card-photo-fallback {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--accent);
  color:           #fff;
  font-size:       2.25rem;
  font-weight:     600;
  letter-spacing:  -0.02em;
}

.card-name {
  font-size:      1.05rem;
  font-weight:    600;
  line-height:    1.3;
  letter-spacing: -0.01em;
}

.card-badge {
  display:        inline-block;
  background:     var(--gold-tint);
  color:          var(--gold-text);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding:        0.22rem 0.7rem;
  border-radius:  var(--radius-pill);
  white-space:    nowrap;
}

/* Button group shown on cards that have a drive_link */
.card-actions {
  display:         flex;
  gap:             0.5rem;
  flex-wrap:       wrap;
  justify-content: center;
  margin-top:      auto;
  padding-top:     0.5rem;
  width:           100%;
}

.card-drive-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.25rem;
  padding:       0.35rem 0.75rem;
  font-size:     0.825rem;
  font-weight:   500;
  border-radius: var(--radius-sm);
  transition:    background-color var(--transition), color var(--transition);
  white-space:   nowrap;
  cursor:        pointer;
  font-family:   var(--font);
}
/* "View" — outlined style */
.card-drive-btn.btn-view {
  color:  var(--accent);
  border: 1px solid var(--accent-ring);
  background: transparent;
}
.card-drive-btn.btn-view:hover {
  background:      var(--accent-tint);
  text-decoration: none;
}
/* "Download" — filled style using Rotary Gold */
.card-drive-btn.btn-download {
  color:      #fff;
  background: var(--gold);
  border:     1px solid transparent;
}
.card-drive-btn.btn-download:hover {
  background:      #d98d0a;
  text-decoration: none;
}

/* ---- Loading skeletons ----------------------------------- */
.skeleton-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.375rem 1.5rem;
  min-height:    190px;
  overflow:      hidden;
  position:      relative;
}
.skeleton-card::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.65) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-line {
  height:        12px;
  border-radius: var(--radius-pill);
  background:    #e9e9eb;
  margin-bottom: 10px;
}
.skeleton-line.short { width: 55%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line.long   { width: 100%; }
.skeleton-line.badge  { width: 30%; height: 18px; border-radius: var(--radius-pill); }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Empty state ----------------------------------------- */
.empty-state {
  text-align: center;
  padding:    4rem 1.5rem;
  color:      var(--text-muted);
}
.empty-state p { font-size: 0.95rem; }

/* ---- Modal ----------------------------------------------- */
.modal {
  position:        fixed;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         500;
  padding:         1rem;
}

.modal-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.45);
}

.modal-box {
  position:   relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding:    2rem;
  width:      100%;
  max-width:  520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-close {
  position:    absolute;
  top:         1rem;
  right:       1rem;
  background:  transparent;
  border:      none;
  font-size:   1.375rem;
  line-height: 1;
  color:       var(--text-muted);
  cursor:      pointer;
  padding:     0.25rem 0.375rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  transition:  background-color var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--bg); color: var(--text); }

.modal-box h2 {
  font-size:      1.175rem;
  font-weight:    700;
  margin-bottom:  1.5rem;
  letter-spacing: -0.01em;
}

/* ---- Form ------------------------------------------------ */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  margin-bottom:  0.875rem;
}

.form-group label {
  font-size:   0.84rem;
  font-weight: 500;
  color:       var(--text);
}

.form-group input,
.form-group textarea,
.form-group select {
  width:         100%;
  padding:       0.6rem 0.875rem;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:     0.9rem;
  font-family:   var(--font);
  background:    var(--surface);
  color:         var(--text);
  transition:    border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline:      none;
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-ring);
}
.form-group textarea { resize: vertical; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-light); }

.field-required { color: #dc2626; margin-left: 2px; }
.field-optional {
  color:       var(--text-muted);
  font-weight: 400;
  font-size:   0.78rem;
}
.field-hint {
  font-size:   0.78rem;
  color:       var(--text-muted);
  line-height: 1.45;
  margin-top:  0.125rem;
}
.field-hint strong { color: var(--text); font-weight: 500; }

.form-error {
  background:    #fef2f2;
  color:         #b91c1c;
  border:        1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding:       0.625rem 0.875rem;
  font-size:     0.875rem;
  margin-bottom: 0.875rem;
}

.submit-success {
  text-align:  center;
  padding:     1.5rem 0 0.5rem;
}
.submit-success p {
  font-size:     0.95rem;
  color:         #166534;
  margin-bottom: 1.25rem;
  line-height:   1.5;
}

/* ---- Admin section --------------------------------------- */
.admin-section {
  border-top: 1px solid var(--border);
  padding:    2rem 0 3rem;
  margin-top: 1rem;
}

.admin-toggle-btn {
  background:      transparent;
  border:          none;
  font-family:     var(--font);
  font-size:       0.75rem;
  color:           var(--text-light);
  cursor:          pointer;
  text-decoration: underline;
  padding:         0;
}
.admin-toggle-btn:hover { color: var(--text-muted); }

.admin-auth-row {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-wrap:   wrap;
  margin-top:  0.625rem;
}
.admin-auth-row input {
  padding:       0.5rem 0.75rem;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     0.875rem;
}
.admin-auth-row input:focus {
  outline:      none;
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-ring);
}
.admin-auth-error {
  font-size: 0.825rem;
  color:     #b91c1c;
}

.admin-panel { margin-top: 1.75rem; }

.admin-panel h2 {
  font-size:      1.1rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  margin-bottom:  1.25rem;
}

.admin-subsection { margin-bottom: 2rem; }

.admin-subsection-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.75rem;
  margin-bottom:   1rem;
  flex-wrap:       wrap;
}
.admin-subsection-header h2 {
  margin-bottom: 0;
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
}

.admin-divider {
  border:        none;
  border-top:    1px solid var(--border);
  margin:        2rem 0 1.75rem;
}

/* ---- Pending count badge --------------------------------- */
.count-badge {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-width:      1.5rem;
  height:         1.4rem;
  padding:        0 0.5rem;
  background:     var(--accent);
  color:          #fff;
  font-size:      0.75rem;
  font-weight:    600;
  border-radius:  var(--radius-pill);
  line-height:    1;
}

/* ---- Approval status (loading / empty / error) ----------- */
.approval-status {
  font-size:     0.9rem;
  padding:       0.75rem 1rem;
  border-radius: var(--radius-sm);
  background:    var(--bg);
  color:         var(--text-muted);
  margin-bottom: 1rem;
}
.approval-status.is-empty {
  background: #f0fdf4;
  color:      #166534;
  border:     1px solid #bbf7d0;
}
.approval-status.is-error {
  background: #fef2f2;
  color:      #b91c1c;
  border:     1px solid #fecaca;
}

/* ---- Pending submission cards ---------------------------- */
.pending-list {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1rem;
}
@media (min-width: 768px) {
  .pending-list { grid-template-columns: repeat(2, 1fr); }
}

.pending-card {
  background:     var(--surface);
  border:         1px solid var(--border);
  border-left:    4px solid var(--gold);
  border-radius:  var(--radius);
  padding:        1.125rem 1.25rem;
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
  box-shadow:     var(--shadow-sm);
  transition:     opacity 0.25s ease, transform 0.25s ease;
}
.pending-card-busy { opacity: 0.55; pointer-events: none; }
.pending-card-removing { opacity: 0; transform: scale(0.96); }

.pending-card-head {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
}
.pending-card-titlebox {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  flex:           1 1 auto;
  min-width:      0;
}

/* Pending profile photo (small circle on the left) */
.pending-photo-wrap {
  position:      relative;
  width:         56px;
  height:        56px;
  flex-shrink:   0;
  border-radius: 50%;
  overflow:      hidden;
  background:    var(--bg);
  border:        2px solid var(--accent-tint);
}
.pending-photo {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.pending-photo-fallback {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--accent);
  color:           #fff;
  font-size:       1.1rem;
  font-weight:     600;
}
.pending-card-name {
  font-size:      1rem;
  font-weight:    600;
  line-height:    1.3;
  letter-spacing: -0.01em;
}
.pending-time {
  font-size:   0.75rem;
  color:       var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.pending-business {
  font-size: 0.875rem;
  color:     var(--text-muted);
}

.pending-contact {
  font-size:   0.875rem;
  line-height: 1.55;
  word-break:  break-word;
}
.pending-contact a { color: var(--accent); }

.pending-drive-link {
  font-size:   0.825rem;
  color:       var(--accent);
  align-self:  flex-start;
}

.pending-actions {
  display:     flex;
  justify-content: flex-end;
  gap:         0.5rem;
  margin-top:  0.5rem;
  padding-top: 0.75rem;
  border-top:  1px solid var(--border);
}

.btn-approve {
  background: #16a34a;
  color:      #fff;
  padding:    0.45rem 1rem;
  font-size:  0.85rem;
}
.btn-approve:hover:not(:disabled) { background: #15803d; }

.btn-reject {
  background: var(--surface);
  color:      #b91c1c;
  border:     1px solid #fecaca;
  padding:    0.45rem 1rem;
  font-size:  0.85rem;
}
.btn-reject:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fca5a5;
}

/* ---- CSV import UI --------------------------------------- */
.csv-dropzone {
  border:        2px dashed var(--border);
  border-radius: var(--radius);
  padding:       2rem 1.5rem;
  text-align:    center;
  cursor:        pointer;
  transition:    border-color var(--transition), background-color var(--transition);
  user-select:   none;
}
.csv-dropzone:hover,
.csv-dropzone.drag-over {
  border-color: var(--accent);
  background:   var(--accent-tint);
}
.csv-dropzone p   { font-size: 0.9rem; color: var(--text-muted); }
.csv-dropzone em  { font-style: normal; color: var(--accent); font-weight: 500; }
.csv-file-name    { margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-muted); }

.import-section-title {
  font-size:      0.85rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--text-muted);
  margin:         1.5rem 0 0.625rem;
}

/* Tables shared by mapping, preview, and validation */
.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.85rem;
  margin-bottom:   0.5rem;
  overflow-x:      auto;
  display:         block;
}
.data-table th,
.data-table td {
  padding:     0.45rem 0.75rem;
  border:      1px solid var(--border);
  text-align:  left;
  white-space: nowrap;
}
.data-table th {
  background:  var(--bg);
  font-weight: 600;
  font-size:   0.8rem;
}
.data-table td select {
  padding:       0.25rem 0.5rem;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     0.82rem;
  background:    var(--surface);
  cursor:        pointer;
}

.map-ok   { color: #166534; font-size: 0.82rem; }
.map-warn { color: #92400e; font-size: 0.82rem; }
.row-pass { color: #166534; }
.row-fail { color: #b91c1c; }

.target-radios {
  display:     flex;
  gap:         1.5rem;
  margin:      0.75rem 0 1.25rem;
  flex-wrap:   wrap;
}
.target-radios label {
  display:     flex;
  align-items: center;
  gap:         0.375rem;
  font-size:   0.9rem;
  cursor:      pointer;
}

.progress-wrap {
  margin: 1.25rem 0 0.5rem;
}
.progress-bar-track {
  background:    var(--border);
  border-radius: var(--radius-pill);
  height:        8px;
  overflow:      hidden;
}
.progress-bar-fill {
  background:    var(--accent);
  height:        100%;
  border-radius: var(--radius-pill);
  transition:    width 0.3s ease;
  width:         0%;
}
.progress-status {
  font-size:  0.82rem;
  color:      var(--text-muted);
  margin-top: 0.375rem;
}

.import-report {
  background:    #f0fdf4;
  border:        1px solid #bbf7d0;
  border-radius: var(--radius);
  padding:       1rem 1.25rem;
  margin-top:    1rem;
  font-size:     0.875rem;
  line-height:   1.6;
}
.import-report.has-errors {
  background:  #fffbeb;
  border-color: #fde68a;
}
.import-report p { margin-bottom: 0.25rem; }
.import-report ul { margin: 0.5rem 0 0 1.25rem; }

/* ---- Responsive tweaks ----------------------------------- */
@media (max-width: 480px) {
  .site-header .container { flex-direction: column; align-items: flex-start; }
  .modal-box { padding: 1.5rem; }
  .controls { gap: 0.5rem; }
}