/*
 * DormTracker Mobile Stylesheet
 * Injected by auth-check.js (last in cascade) so these rules reliably override
 * desktop styles in page-specific CSS files.
 * Also linked directly on public pages (login, index, etc.)
 * See DESIGN.md for design system guidelines.
 */

/* ── Hamburger button (injected via JS) ──────────────────── */
.nav-burger {
  display: none;
}

/* ── Mobile nav ──────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Show hamburger */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 8px;
    border-radius: var(--radius);
    transition: background var(--transition);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger:hover,
  .nav-burger:focus-visible {
    background: rgba(255,255,255,0.1);
    outline: none;
  }
  .nav-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: rgba(255,255,255,0.9);
    border-radius: 2px;
    transition: transform var(--transition-normal), opacity var(--transition), width var(--transition);
    transform-origin: center;
  }
  .nav-burger.nav-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.nav-open span:nth-child(2) { opacity: 0; width: 0; }
  .nav-burger.nav-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav container becomes a flex row: [burger] ... [profile] */
  .nav-container {
    position: relative !important;
  }

  /* Collapse nav-menu out of the bar */
  .navbar .nav-menu {
    display: none !important;
    position: absolute;
    top: var(--nav-height, 60px);
    left: 0;
    right: 0;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    background: var(--color-nav-bg, #1e293b);
    padding: var(--space-2, 8px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    z-index: 999;
    border-top: 1px solid rgba(255,255,255,0.07);
    gap: 2px;
    max-height: calc(100vh - var(--nav-height, 60px));
    overflow-y: auto;
  }
  .navbar .nav-menu.nav-open {
    display: flex !important;
  }

  /* Full-width touch-friendly nav items in dropdown */
  .navbar .nav-menu .nav-item {
    width: 100%;
    margin: 0;
  }
  .navbar .nav-link {
    display: flex !important;
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: var(--text-base, 14px) !important;
    border-radius: var(--radius, 8px) !important;
    width: 100%;
    justify-content: flex-start !important;
    white-space: normal !important;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── Touch targets: global minimum 44px ─────────────────── */
@media (max-width: 900px) {
  /* Buttons that are too small on desktop */
  button, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Score radio buttons — 32px → 44px */
  .score-radio-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: var(--text-md, 15px) !important;
    border-radius: var(--radius, 8px) !important;
  }
  .score-radio-group {
    gap: var(--space-2, 8px) !important;
  }

  /* Photo upload buttons */
  .photo-btn {
    min-height: 40px;
    padding: 8px 14px !important;
    font-size: var(--text-sm, 13px) !important;
  }
  .remove-photo-btn {
    min-height: 36px;
    padding: 8px 14px !important;
    font-size: var(--text-sm, 13px) !important;
  }

  /* Delete / action buttons in table rows */
  .delete-btn,
  .action-btn,
  .btn-sm {
    min-height: 40px;
    padding: 8px 14px !important;
  }
}

/* ── Inspection form: mobile card layout ─────────────────── */
@media (max-width: 768px) {
  /* Strip the 30px outer padding from styles.css that overflows small screens */
  #inspectionForm {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .inspector-section { padding: var(--space-2, 8px) !important; }
  /* Allow room card box-shadows to show (inspection-grid clips them) */
  .inspection-grid { overflow: visible !important; }

  .grid-header { display: none !important; }

  /* Each room → its own card */
  .room-rows {
    max-height: none !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-direction: column;
    gap: var(--space-3, 12px) !important;
    padding: var(--space-3, 12px) !important;
    background: var(--color-bg, #f8fafc) !important;
  }

  .room-row {
    display: block !important;
    background: var(--color-surface, #fff) !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: var(--radius, 8px) !important;
    box-shadow: var(--shadow-xs) !important;
    padding: var(--space-4, 16px) !important;
    overflow: hidden;
  }

  .room-cell {
    display: block !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 0 !important;
  }

  /* Card header: room number */
  .room-cell:first-child {
    padding-bottom: var(--space-1, 4px) !important;
  }
  .room-number {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--color-text, #0f172a) !important;
  }

  /* Student names row */
  .room-cell:nth-child(2) {
    padding-bottom: var(--space-2, 8px) !important;
    margin-bottom: var(--space-3, 12px) !important;
    border-bottom: 1px solid var(--color-border, #e2e8f0) !important;
  }
  .student-names {
    font-size: var(--text-sm, 13px) !important;
    color: var(--color-text-secondary, #64748b) !important;
  }

  /* Score cell */
  .room-cell.score-cell {
    margin-bottom: var(--space-3, 12px) !important;
  }
  .score-radio-group {
    gap: var(--space-2, 8px) !important;
    justify-content: flex-start !important;
  }
  .score-radio-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 15px !important;
    border-radius: var(--radius, 8px) !important;
  }

  /* Notes / issues: full width */
  .issues-notes-cell { padding: 0 !important; }
  .room-notes-input { width: 100% !important; box-sizing: border-box !important; }

  /* Photo section */
  .photo-upload-section { margin-top: var(--space-3, 12px); }
  .photo-upload-btns {
    display: flex !important;
    gap: var(--space-2, 8px) !important;
  }
  .photo-btn {
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* ── Admin dashboard: card rows on mobile ────────────────── */
@media (max-width: 640px) {
  #reportsTable {
    display: block !important;
  }
  #reportsTable thead {
    display: none !important;
  }
  #reportsTable tbody {
    display: flex !important;
    flex-direction: column;
    gap: 0;                    /* use margin-bottom on rows so detail-rows don't double the gap */
    padding: var(--space-2, 8px);
  }

  /* Each inspection row = a card */
  #reportsTable .inspection-row {
    display: flex !important;
    flex-direction: column !important;
    background: var(--color-surface, #fff) !important;
    border-radius: var(--radius, 8px) !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: var(--space-3, 12px) var(--space-4, 16px) !important;
    position: relative !important;
    margin-bottom: var(--space-2, 8px) !important;
  }

  /* Reset all TD styles to a clean slate */
  #reportsTable tbody td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    background: transparent !important;  /* kills score-5 green strips */
  }

  /* Hide columns that clutter small screens */
  #reportsTable .col-check,
  #reportsTable .col-inspector,
  #reportsTable .col-student-emails,
  #reportsTable .col-parent-emails,
  #reportsTable .col-photo { display: none !important; }

  /* Reorder visible cells: room → dorm → students → notes → date */
  #reportsTable .col-room     { order: 1; }
  #reportsTable .col-dorm     { order: 2; }
  #reportsTable .col-students { order: 3; }
  #reportsTable .col-notes    { order: 4; }
  #reportsTable .col-date     { order: 5; }
  /* score is absolute-positioned so order doesn't matter */
  #reportsTable .col-score    { order: 0; }

  /* Score badge: top-right corner of card */
  #reportsTable .col-score {
    position: absolute !important;
    top: var(--space-3, 12px) !important;
    right: 24px !important;
  }
  #reportsTable .col-score .score-badge {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Room number — card heading */
  #reportsTable .col-room {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-text, #0f172a) !important;
    padding-right: 52px !important;   /* clear the score badge */
    margin-bottom: 2px !important;
  }

  /* Dorm — small uppercase label below room */
  #reportsTable .col-dorm {
    font-size: var(--text-xs, 11px) !important;
    color: var(--color-text-secondary, #64748b) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2, 8px) !important;
    padding-bottom: var(--space-2, 8px) !important;
    border-bottom: 1px solid var(--color-border, #e2e8f0) !important;
  }

  /* Students — names */
  #reportsTable .col-students {
    font-size: var(--text-sm, 13px) !important;
    color: var(--color-text-body, #1e293b) !important;
    margin-bottom: var(--space-1, 4px) !important;
  }

  /* Notes — muted, truncated to 2 lines */
  #reportsTable .col-notes {
    font-size: var(--text-sm, 13px) !important;
    color: var(--color-text-secondary, #64748b) !important;
    margin-bottom: var(--space-2, 8px) !important;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Date — bottom, muted */
  #reportsTable .col-date {
    font-size: var(--text-xs, 11px) !important;
    color: var(--color-text-muted, #94a3b8) !important;
    text-align: left !important;
    margin-bottom: var(--space-2, 8px) !important;
  }

  /* Actions — full-width delete button */
  #reportsTable .col-actions .delete-btn,
  #reportsTable .col-actions button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
    font-size: var(--text-sm, 13px) !important;
  }
}

/* ── Contacts: compact tap-to-expand rows on mobile ─────── */
@media (max-width: 640px) {
  .contacts-table { display: block !important; }
  .contacts-table thead { display: none !important; }
  .contacts-table tbody { display: block !important; }

  /* One-line row: name left, role badge right, chevron */
  .contacts-table tbody tr {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--color-surface, #fff) !important;
    cursor: pointer;
    gap: 10px;
    min-height: 48px;
  }
  .contacts-table tbody tr:active { background: #f8fafc !important; }

  /* Hide everything by default */
  .contacts-table tbody td { display: none !important; }

  /* Show: name */
  .contacts-table tbody td:nth-child(2) {
    display: block !important;
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-text, #0f172a) !important;
    padding: 0 !important;
    border: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Show: role badge */
  .contacts-table tbody td:nth-child(4) {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    flex-shrink: 0 !important;
  }

  /* Chevron */
  .contacts-table tbody tr::after {
    content: '';
    width: 6px; height: 6px;
    border-right: 1.5px solid #cbd5e1;
    border-top: 1.5px solid #cbd5e1;
    transform: rotate(45deg);
    flex-shrink: 0;
  }
}

/* ── Contacts: action bar buttons full-width on mobile ────── */
@media (max-width: 640px) {
  .page-header > div {
    width: 100% !important;
  }
  .page-header > div button {
    flex: 1 !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
}

/* ── Room history: tighten selector ─────────────────────── */
@media (max-width: 640px) {
  .history-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-2, 8px) !important;
  }
  .room-stats {
    flex-wrap: wrap !important;
    gap: var(--space-2, 8px) !important;
  }
  .stat-card {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 120px !important;
  }
}

/* ── Email templates: mobile layout ─────────────────────── */
@media (max-width: 640px) {
  /* Settings bar: collapsed by default — tap "Email Settings" to expand */
  .settings-details {
    border: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: var(--radius, 8px) !important;
    margin-bottom: 16px !important;
    background: var(--color-surface, #fff) !important;
    overflow: hidden !important;
  }
  .settings-summary {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text, #0f172a) !important;
    cursor: pointer !important;
    list-style: none !important;
    user-select: none !important;
  }
  .settings-summary::-webkit-details-marker { display: none !important; }
  .settings-summary::after {
    content: '';
    width: 6px; height: 6px;
    border-right: 1.5px solid #94a3b8;
    border-bottom: 1.5px solid #94a3b8;
    transform: rotate(45deg);
    margin-left: auto;
    transition: transform 0.2s;
  }
  .settings-details[open] .settings-summary::after {
    transform: rotate(-135deg);
  }

  /* Settings bar contents: stack groups vertically */
  .settings-bar {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-top: 1px solid var(--color-border, #e2e8f0) !important;
  }
  .sb-sep { display: none !important; }
  .sb-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--space-2, 8px) !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--color-border, #e2e8f0) !important;
  }
  .sb-group:last-child { border-bottom: none !important; }
  .sb-group { padding-right: 16px !important; }
  .sb-toggle-row { flex-shrink: 0 !important; }
  .sb-label { font-size: 13px !important; font-weight: 500 !important; }
  .sb-label-hint { display: none !important; }
  .sb-thresholds {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .sb-thresh-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  .threshold-input { width: 44px !important; text-align: center !important; padding: 4px !important; }
  .sb-thresh-label { font-size: 10px !important; color: #94a3b8; }
  .btn-save-threshold { padding: 6px 10px !important; font-size: 12px !important; }

  /* Tab navigation: 2×2 grid so all 4 tabs fit without overflow */
  .tab-navigation {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .tab-button {
    justify-content: center !important;
    min-height: 40px !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
  .tab-button i { display: none !important; }

  /* Editor: single column, no preview pane */
  .tab-split { grid-template-columns: 1fr !important; }
  .tab-split-preview { display: none !important; }

  /* Toolbar: hide insert bubbles and drag hint (not usable on touch) */
  .toolbar-inserts { display: none !important; }
  .toolbar-drag-hint { display: none !important; }
  .editor-toolbar {
    gap: 6px !important;
    padding: 8px !important;
  }
  .toolbar-format-row { flex-wrap: wrap !important; gap: 4px !important; }

  /* Schedule row: wrap onto two lines */
  .schedule-row {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    padding: 10px 0 !important;
  }

  /* Subject chips: wrap */
  .subject-chips { flex-wrap: wrap !important; }

  /* Editor iframe + textarea: full width */
  .template-editor, .tab-split-editor { min-width: 0 !important; }
  .email-editor-frame { width: 100% !important; box-sizing: border-box !important; }
}

/* ── Stats: chart grid + activity overflow fix ───────────── */
@media (max-width: 900px) {
  .charts-section { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  /* Activity note: remove fixed max-width that causes horizontal scroll */
  .act-note {
    max-width: 100% !important;
    white-space: normal !important;
  }
  .activity-item-compact {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  /* Recent activity card full width */
  .recent-activity { padding: 16px !important; }
}

/* ── Settings sidebar: 2-col grid (replaces horizontal scroll) */
@media (max-width: 768px) {
  .settings-layout {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .settings-sidebar {
    width: 100% !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2, 8px) !important;
    padding: var(--space-3, 12px) !important;
    border-bottom: 1px solid var(--color-border, #e2e8f0) !important;
    border-right: none !important;
    background: var(--color-surface, #fff);
  }
  .snav-item {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: var(--text-sm, 13px) !important;
    border-radius: var(--radius, 8px) !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
  .snav-item.active {
    background: var(--color-primary-faint, #f0fdf4) !important;
    border-color: var(--color-primary, #2d6a4f) !important;
    color: var(--color-primary, #2d6a4f) !important;
  }
  .snav-item i { display: none !important; }
  /* Hide the "Danger Zone" divider label — the button itself is enough in grid layout */
  .snav-divider { display: none !important; }
  .settings-content { padding: var(--space-4, 16px) !important; }
}


/* ── General: prevent horizontal overflow ────────────────── */
body {
  overflow-x: hidden;
}