/*
  Page: assets/css/desktop-polish.css
  Purpose: Desktop UI polish and Bootstrap-utility compatibility for CampusHub.
  Notes: Most layout changes are desktop-only so the mobile PWA view remains safe.
*/

:root {
  --cc-surface: #ffffff;
  --cc-page: #f3f6fb;
  --cc-line: rgba(148, 163, 184, 0.22);
  --cc-soft-line: rgba(226, 232, 240, 0.85);
  --cc-text: #0f172a;
  --cc-soft-text: #64748b;
  --cc-card-shadow: 0 14px 38px rgba(15, 23, 42, 0.065);
  --cc-card-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.045);
  --cc-radius-xl: 24px;
  --cc-radius-lg: 20px;
  --cc-radius-md: 16px;
}

/* Bootstrap-lite utility shims used by older pages but not provided by the app. */
.shadow-sm { box-shadow: var(--cc-card-shadow-soft) !important; }
.border-0 { border: 0 !important; }
.bg-white { background: #fff !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.ms-auto { margin-left: auto !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-between { justify-content: space-between !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.text-muted { color: var(--cc-soft-text) !important; }
.text-danger { color: #dc2626 !important; }
.text-success { color: #16a34a !important; }
.text-primary { color: var(--primary) !important; }
.fw-bold { font-weight: 800 !important; }
.small { font-size: .875rem !important; }
.w-100 { width: 100% !important; }

.card-header {
  padding: 15px 18px;
  border-bottom: 1px solid var(--cc-soft-line);
  font-weight: 900;
  color: var(--cc-text);
}
.card-body { padding: 18px; }
.card-footer { padding: 14px 18px; border-top: 1px solid var(--cc-soft-line); background: #f8fafc; }

.table-responsive,
.admin-table-wrap,
.ai-table-wrap,
.comm-table-wrap,
.mod-table-wrap,
.log-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table,
table {
  max-width: 100%;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table th,
.table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--cc-soft-line);
  vertical-align: middle;
}
.table th {
  background: #f8fafc;
  color: #475569;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 900;
}
.table tr:last-child td { border-bottom: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .75rem;
  font-weight: 900;
  line-height: 1;
}
.badge.bg-success, .badge-success { background: #dcfce7 !important; color: #166534 !important; }
.badge.bg-warning, .badge-warning { background: #fef3c7 !important; color: #92400e !important; }
.badge.bg-danger, .badge-danger { background: #fee2e2 !important; color: #991b1b !important; }
.badge.bg-primary, .badge-primary { background: #dbeafe !important; color: #1d4ed8 !important; }
.badge.bg-secondary, .badge-secondary { background: #f1f5f9 !important; color: #475569 !important; }

/* Safer controls everywhere. */
.btn,
button,
input,
select,
textarea { max-width: 100%; }

/* Desktop-only polish. */
@media (min-width: 992px) {
  body { padding-bottom: 0 !important; background: var(--cc-page); }

  .app-shell { min-height: 100vh; }

  .topbar {
    padding: 12px clamp(20px, 3vw, 36px);
    min-height: 74px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.035);
  }

  .brand-mark { width: 42px; height: 42px; border-radius: 15px; }
  .brand-name { font-size: 17px; letter-spacing: -0.02em; }
  .brand-sub { font-size: 11px; }

  .topbar-center { flex: 1 1 auto; display: flex !important; justify-content: center; min-width: 0; }
  .top-search { width: min(560px, 100%); min-width: 280px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035); }
  .topbar-right { flex: 0 0 auto; }

  .layout {
    width: min(100%, 1500px);
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    gap: 22px;
    padding: 22px clamp(18px, 2.4vw, 34px) 34px;
    align-items: start;
  }

  .layout > * { min-width: 0; }
  .main-content { min-width: 0; }
  .right-panel { min-width: 0; }

  .app-sidebar { top: 96px; }
  .sidebar-nav { max-height: calc(100vh - 245px); }

  .main-content,
  .right-panel,
  .card,
  .compact-card,
  .sidebar-card,
  .admin-stat-card,
  .admin-soft-card,
  .admin-table-card,
  .admin-profile-card,
  .admin-form-card,
  .admin-list-card,
  .settings-card,
  .privacy-card,
  .people-card,
  .ai-card,
  .ai-admin-card,
  .ai-h-card,
  .safety-card,
  .password-card,
  .comm-card,
  .mod-card,
  .log-card,
  .inst-card {
    border-color: var(--cc-line) !important;
    box-shadow: var(--cc-card-shadow) !important;
  }

  .card,
  .compact-card,
  .main-content,
  .right-panel {
    border-radius: var(--cc-radius-xl);
  }

  /* Modern pages already contain cards; remove the outer white panel on desktop. */
  .account-settings-page .main-content,
  .privacy-page .main-content,
  .password-page .main-content,
  .people-page .main-content,
  .ai-study-page .main-content,
  .ai-history-page .main-content,
  .ai-view-page .main-content,
  .ai-admin-page .main-content,
  .page-admin-dashboard .main-content,
  .page-admin-user-view .main-content,
  .page-admin-institution-view .main-content,
  .page-admin-users .main-content,
  .page-campus-wall .main-content,
  .page-campus-meetups .main-content,
  .page-edit-profile .main-content,
  .page-profile .main-content,
  .page-user .main-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* More comfortable desktop reading widths. */
  .page-change-password .password-shell,
  .page-privacy-settings .privacy-shell,
  .page-account-settings .settings-shell,
  .page-people .people-shell,
  .page-ai-study .ai-feed,
  .page-ai-study-history .ai-h-shell {
    width: 100%;
    margin-inline: auto;
  }

  .page-change-password .password-shell { max-width: 760px; }
  .page-privacy-settings .privacy-shell { max-width: 1180px; }
  .page-account-settings .settings-shell { max-width: 1180px; }
  .page-people .people-shell { max-width: 1040px; }
  .page-ai-study .ai-feed { max-width: 920px; }
  .page-ai-study-history .ai-h-shell { max-width: 1100px; }

  /* Desktop grid fixes across new modules. */
  .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch; }
  .settings-admin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .privacy-grid { grid-template-columns: minmax(0, 1fr) 330px !important; align-items: start; }
  .privacy-options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .privacy-option { min-height: auto !important; padding: 10px 11px !important; border-radius: 15px !important; }
  .privacy-option span b { font-size: 13px !important; }
  .privacy-option span small { font-size: 11px !important; line-height: 1.3 !important; }
  .privacy-section { padding: 14px !important; border-radius: 18px !important; }
  .privacy-switch { padding: 11px 12px !important; min-height: auto !important; }

  .people-grid,
  .people-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ai-radio-card { min-height: auto !important; }

  .admin-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr) !important; }
  .admin-stat-grid,
  .ai-admin-stats,
  .ai-stat-grid,
  .comm-stat-grid,
  .mod-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .admin-shortcut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .admin-panel-grid,
  .ai-grid-2,
  .comm-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-detail-grid { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr) !important; }

  .inst-hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr) !important; }
  .inst-main-grid,
  .inst-detail-grid { grid-template-columns: minmax(0, 1fr) 330px !important; align-items: start; }
  .inst-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .profile-grid,
  .enhanced-profile-grid { grid-template-columns: minmax(0, 1fr) 320px !important; align-items: start; }
  .profile-membership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .feed-grid,
  .wall-grid,
  .meet-grid { grid-template-columns: minmax(0, 1fr) 320px !important; align-items: start; }

  /* Legacy pages that use Bootstrap-like cards/tables. */
  .page-admin-institution-admins .main-content,
  .page-admin-institutions .main-content,
  .page-institution-alumni .main-content,
  .page-institution-students .main-content,
  .page-verifications .main-content,
  .page-verify-account .main-content,
  .page-users .main-content,
  .page-campus-hub .main-content {
    padding: 20px !important;
  }

  .page-admin-institution-admins .card,
  .page-admin-institutions .card,
  .page-institution-alumni .card,
  .page-institution-students .card,
  .page-verifications .card,
  .page-verify-account .card,
  .page-users .card,
  .page-campus-hub .card {
    overflow: hidden;
  }

  /* Tables should not burst out of desktop cards. */
  .card:has(table),
  .compact-card:has(table),
  .admin-table-card,
  .ai-card:has(table),
  .comm-card:has(table),
  .mod-card:has(table),
  .log-card:has(table) {
    overflow: hidden;
  }

  .card > table,
  .compact-card > table,
  .card-body > table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  /* Desktop forms: prevent overly long one-column forms where grids exist. */
  .form-row,
  .admin-form-grid,
  .ai-form-grid,
  .inst-form-grid,
  .setup-membership-grid {
    gap: 14px !important;
  }

  .main-content input,
  .main-content select,
  .main-content textarea {
    min-height: 44px;
  }

  textarea { line-height: 1.55; }

  .hero-card,
  .compact-hero,
  .settings-hero,
  .privacy-hero,
  .wall-hero-card,
  .meet-hero-card,
  .inst-hero-card,
  .admin-hero-card,
  .ai-result-hero {
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.11) !important;
  }

  /* Better desktop spacing for repeated list/card components. */
  .compact-card,
  .feed-card,
  .notification-card,
  .user-result-card,
  .institution-result-card,
  .chat-list-card,
  .compact-chat-card,
  .compact-institution-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .compact-card:hover,
  .user-result-card:hover,
  .institution-result-card:hover,
  .chat-list-card:hover,
  .compact-chat-card:hover,
  .compact-institution-card:hover {
    border-color: rgba(37, 99, 235, 0.22) !important;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.085) !important;
  }

  .btn { min-height: 42px; }
  .btn-sm, .btn-sm-app { min-height: 36px; padding: 8px 12px; border-radius: 10px; font-size: .86rem; }
}

@media (min-width: 1200px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr) 330px; }
  .page-admin-dashboard .layout,
  .page-admin-users .layout,
  .page-admin-user-reports .layout,
  .page-admin-community-reports .layout,
  .page-admin-ai-usage-reports .layout,
  .page-admin-ai-documents .layout,
  .page-admin-ai-settings .layout {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }
}

@media (min-width: 1500px) {
  .layout { max-width: 1560px; }
}

/* Mobile guardrails: keep previous PWA/mobile behavior. */
@media (max-width: 991.98px) {
  .table-responsive,
  .admin-table-wrap,
  .ai-table-wrap,
  .comm-table-wrap,
  .mod-table-wrap,
  .log-table-wrap { overflow-x: auto; }

  .card-header { padding: 13px 14px; }
  .card-body { padding: 14px; }
}

/* End Page: assets/css/desktop-polish.css */