/* Shared design tokens for the IUians app, lifted from the IUians Dashboard
   Redesign canvas (Landing/Signup/Login/Main/etc mockups). */

body {
  margin: 0;
  background: #F4F6F3;
  font-family: 'Hind Siliguri', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #16211C;
}

h1, h2, h3 { font-family: inherit; }

a { color: #0F6B45; text-decoration: none; }
a:hover { color: #0A4F33; }

.page-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}
.sidebar-col { flex: 1 1 220px; max-width: 260px; }
.content { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.lbl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #3F4A44; }
.in {
  height: 44px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #D5DCD7;
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  color: #16211C;
  background: #FFFFFF;
}
textarea.in { height: auto; padding: 10px 12px; resize: vertical; }
.in:focus { outline: 2px solid #0F6B45; outline-offset: 1px; border-color: #0F6B45; }
.in::placeholder { color: #8A948F; }

.card { background: #FFFFFF; border: 1px solid #E3E8E4; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.h2 { margin: 0; font-size: 18px; font-weight: 700; }
.help { margin: 0; font-size: 13px; color: #5B6660; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0;
  background: #0F6B45; color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { background: #0A4F33; }
.btn:disabled { opacity: .5; cursor: default; }
.btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid #CFE3D8;
  background: #FFFFFF; color: #0F6B45; font: inherit; font-weight: 600; cursor: pointer;
}
.del { min-height: 36px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: #A33A2B; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.del:hover { background: #FBECE9; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; border: 1px dashed #CFD8D2; border-radius: 12px; color: #5B6660; text-align: center; }
.row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 10px; border-radius: 10px; }
.row:hover { background: #F8FAF8; }

.banner-error {
  padding: 14px 16px; border-radius: 12px; background: #FBECE9; color: #A33A2B; font-size: 14px;
  display: none;
}
.banner-ok {
  padding: 14px 16px; border-radius: 12px; background: #EEF5F1; color: #0A4F33; font-size: 14px;
  display: none;
}

.skeleton-line { height: 14px; border-radius: 6px; background: #EEF2EF; animation: iu-pulse 1.4s ease-in-out infinite; }
@keyframes iu-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Custom dropdown that replaces native <select> popups (see enhanceSelect()
   in shared.js) -- some embedded/webview browsers flash native select
   popups open then immediately closed, so every select.in gets a fully
   DOM-rendered listbox instead of relying on the OS popup. */
.csel-wrap { position: relative; }
.csel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; text-align: left; appearance: none; -webkit-appearance: none;
}
.csel-btn:disabled { opacity: .5; cursor: default; }
.csel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-label.csel-placeholder { color: #8A948F; }
.csel-chevron { flex: none; color: #5B6660; transition: transform .15s ease; }
.csel-btn[aria-expanded="true"] .csel-chevron { transform: rotate(180deg); }
.csel-list {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; background: #FFFFFF; border: 1px solid #D5DCD7;
  border-radius: 12px; box-shadow: 0 12px 28px rgba(14,59,42,.14); padding: 6px;
  z-index: 60; box-sizing: border-box;
}
.csel-list.csel-open { display: block; }
.csel-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; color: #16211C; }
.csel-item:hover, .csel-item-active { background: #EEF2EF; }

/* Mobile bottom tab bar (see renderMobileTabBar() in shared.js) -- replaces
   the desktop sidebar at narrow widths with the 5-destination bottom nav
   from the design canvas's mobile screens (Home/Directory/Nearby/Reports/More).
   Uses env(safe-area-inset-bottom) so it doesn't crowd the home-indicator
   area on notched/gesture-nav phones -- the same fix just made in the
   design canvas's MTabBar.dc.html/MLanding.dc.html, applied here from the start. */
.mobile-tabbar { display: none; }
.header-search-compact { display: none; }
@media (max-width: 760px) {
  .sidebar-col { display: none; }
  .page-shell { padding-bottom: calc(24px + 72px + env(safe-area-inset-bottom)); }
  /* Header: on a narrow screen the logo + full search bar + name chip don't
     fit on one line and wrap to two. Swap the full search bar for an icon
     button (matches the design canvas's mobile header) and drop the profile
     name text, keeping just the avatar -- the bottom tab bar's "more" already
     covers account access, so the header doesn't need to repeat it.
     !important on the two display overrides: both elements carry an inline
     style="display:flex" (set by renderHeader() in shared.js), which beats
     a plain class rule regardless of specificity -- same bug just found and
     fixed on the signup/login page's .auth-aside. */
  .header-search-full { display: none !important; }
  .header-search-compact { display: flex; }
  .header-user-name { display: none; }
  .header-profile-link { padding: 4px !important; }
  /* Home hero/welcome card: desktop-sized padding, 64px avatar and 28px name
     all stay fixed inline (set by main.html) regardless of width, so on a
     phone the card reads oversized and the two action buttons wrap awkwardly.
     Every override below needs !important for the same reason as the header
     fixes above -- each targeted property is also set inline on the element. */
  .hero-card { padding: 18px !important; flex-direction: column !important; align-items: flex-start !important; }
  .hero-card-avatar { width: 52px !important; height: 52px !important; font-size: 17px !important; }
  .hero-card-name { font-size: 20px !important; }
  .hero-card-actions { width: 100%; }
  .hero-card-btn { flex: 1 1 0; justify-content: center; }
  /* Wide "card panel" grids across every page (committee/events/meetings/
     notices/careers tabs in admin.html, main.html's session/department
     cards, meetings.html, member.html, nearby.html, reports.html, activities.html,
     landing.html) use inline `grid-template-columns: repeat(auto-fit,
     minmax(280-340px, 1fr))`. minmax()'s first value is a hard MINIMUM a
     track can't shrink below, so on a phone narrower than that (content
     area is usually ~270-350px after .page-shell + .card padding) the grid
     refuses to shrink the column and forces horizontal overflow/scroll --
     this is the concrete cause of "admin coordinator list [and others] not
     mobile friendly". Targeted by attribute-substring selector (covers both
     the "minmax(Npx, 1fr)" and "minmax(Npx,1fr)" spacing used across files)
     since the grid is set inline per-page, not via a shared class. Smaller
     tile grids (stats, filter chips, 170-260px) are left alone -- those
     already fit 1-2 per row without overflowing and look better that way. */
  [style*="minmax(280px, 1fr)"], [style*="minmax(280px,1fr)"],
  [style*="minmax(300px, 1fr)"], [style*="minmax(300px,1fr)"],
  [style*="minmax(320px, 1fr)"], [style*="minmax(320px,1fr)"],
  [style*="minmax(340px, 1fr)"], [style*="minmax(340px,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Admin form field-pairs (department/session, etc.) go full width instead
     of two cramped half-width <select>s. Same substring-selector approach. */
  [style*="repeat(2,minmax(0,1fr))"], [style*="repeat(2, minmax(0, 1fr))"] {
    grid-template-columns: 1fr !important;
  }
  /* Careers tab's field-dropdown + input + button row (admin.html) -- three
     even columns are too narrow to use on a phone; stack them instead. */
  [style*="minmax(0,1fr) minmax(0,1fr) auto"] {
    grid-template-columns: 1fr !important;
  }
  .mobile-tabbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    height: calc(72px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    padding: 6px 4px calc(10px + env(safe-area-inset-bottom));
    background: #FFFFFF;
    border-top: 1px solid #E3E8E4;
  }
}
.mobile-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; text-decoration: none; font-size: 11px; font-weight: 600;
}
.mobile-tab-pill { width: 52px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }

/* District choropleth (Leaflet), shared by main.html and reports.html */
.leaflet-tooltip.district-label {
  background: transparent; border: none; box-shadow: none; padding: 0;
  font-size: 9px; font-weight: 700; color: #16211C;
  text-shadow: 0 0 3px #FFFFFF, 0 0 3px #FFFFFF, 0 0 3px #FFFFFF;
}
.leaflet-tooltip.district-label::before { display: none; }
.district-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #5B6660; margin-top: 8px; }
.district-legend .swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }