/* Hero */
.ms-hero {
  background: var(--ms-primary-tint);
  border-radius: var(--ms-radius);
  padding: 40px 32px;
  text-align: center;
}

.ms-hero-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--ms-primary-dark);
  margin: 0 0 8px;
}

.ms-hero-subtitle {
  font-size: 15px;
  color: var(--ms-primary-dark);
  max-width: 520px;
  margin: 0 auto 20px;
}

.ms-hero-actions .btn {
  border-radius: 8px;
}

/* Stats bar */
.ms-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  overflow: hidden;
  margin: 24px 0;
}

.ms-stat {
  padding: 16px;
  text-align: center;
  border-right: 1px solid var(--ms-border);
}

.ms-stat:last-child {
  border-right: none;
}

.ms-stat-value {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.ms-stat-label {
  font-size: 12px;
  color: var(--ms-text-muted);
  margin: 2px 0 0;
}

/* Feature grid */
.ms-feature-card {
  background: #fff;
  border-radius: var(--ms-radius);
  padding: 18px;
  text-align: center;
  height: 100%;
}

.ms-feature-icon {
  font-size: 26px;
}

.ms-feature-title {
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 4px;
}

.ms-feature-desc {
  font-size: 12px;
  color: var(--ms-text-muted);
  margin: 0;
}

/* Content cards (news / links / vision-home CMS content) */
.ms-info-card {
  background: #fff;
  border-radius: var(--ms-radius);
  padding: 18px;
  height: 100%;
}

.ms-info-card-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
}

.ms-info-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ms-primary-dark);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--ms-border);
}

.ms-info-link:last-child {
  border-bottom: none;
}

/* Public nav (sidebar) — extra depth beyond what ms-nav/ms-subnav (theme.css) already style */
.ms-nav-section-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--ms-text-muted);
}

/* SuperAdmin console page shell - replaces the old sparkline12-list /
   shadow-reset / data-table-area template used across Admin/* pages
   before this pass. Same recipe as .ms-info-card above, named
   separately since it's the primary content wrapper for a whole page
   rather than one card among several. */
.ms-page-card {
  background: #fff;
  border-radius: var(--ms-radius);
  padding: 20px;
  margin-bottom: 16px;
}

/* Shared fixed-width vocabulary for form fields that shouldn't stretch
   full-width in the Bootstrap 5 grid (short codes, emails, passwords) -
   a small set of named sizes instead of one-off inline max-width values
   per page. */
.ms-field-sm {
  max-width: 200px;
}

.ms-field-md {
  max-width: 240px;
}

.ms-field-lg {
  max-width: 320px;
}

.ms-page-header {
  margin-bottom: 16px;
}

.ms-page-header h1,
.ms-page-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* Tab-style sub-navigation - replaces the TabHeader/TabChiled jQuery
   pattern used by the "hub" pages (ManageInstitute, ManageBaseData,
   ManageMember, ManageSiteContent, QuestionManager). Restyles the
   existing links only; the jQuery active-class toggle logic those
   pages already ship is unchanged. */
.ms-tabnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--ms-border);
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.ms-tabnav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-text-muted);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 20px;
}

.ms-tabnav a:hover {
  background: var(--ms-primary-tint);
  color: var(--ms-primary-dark);
}

.ms-tabnav a.active {
  background: var(--ms-primary);
  color: #fff;
}

/* jQuery DataTables (used by several SuperAdmin grids, e.g.
   ViewAllInstitute, Payment/Receivable, Reports/Activity) restyled to
   the v3 palette instead of its default jQuery-UI theme. These pages
   all run the same vendored old build (FundSite/Datatable/*, initialized
   with bJQueryUI:true + sPaginationType:"full_numbers"), not modern
   datatables.net - hence the paging_full_numbers/paginate_active class
   names below, not the newer paginate_button.current. Only the
   plugin's own chrome (search box, length select, pager, header,
   row striping) is targeted here - the underlying <table> gets
   standard Bootstrap classes (table table-hover align-middle)
   applied per-page. */
.ms-page-card .dataTables_wrapper .dataTables_filter input,
.ms-page-card .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ms-border);
  border-radius: 8px;
  padding: 4px 8px;
}

.ms-page-card table.dataTable thead th {
  border-bottom: 2px solid var(--ms-border);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ms-text-muted);
}

/* The vendored build's jquery-ui-1.8.4.custom.css gives header cells a
   .ui-state-default gray gradient background image via bJQueryUI:true -
   plain background-color rules can't beat a background shorthand with
   an image, so this resets it explicitly. Scoped to .ms-page-card's
   DataTables header/pager elements specifically (not the bare
   .ui-state-default/.ui-widget-header classes) so this never strips
   theming from some other jQuery-UI widget (datepicker, dialog, tabs)
   that might get placed inside a .ms-page-card in the future. */
.ms-page-card table.dataTable thead th.ui-state-default,
.ms-page-card .dataTables_wrapper .ui-widget-header,
.ms-page-card .paging_full_numbers .ui-state-default {
  background: none !important;
  border: none !important;
}

/* jquery.dataTables_themeroller.css hardcodes blue/white zebra striping
   on tr.odd/tr.even, plus a darker tint on whichever column is
   currently sorted (td.sorting_1/2/3 - DataTables sorts the first
   sortable column by default, so this is visible on load, not just
   after a user clicks a header). All neutralized here so table-hover's
   own hover tint is the only row-level color, matching plain Bootstrap
   GridView pages like Admin/AddSubject.aspx. td.sorting_* has higher
   specificity than tr.odd/tr.even, so it needs its own rule. */
.ms-page-card table.dataTable tr.odd,
.ms-page-card table.dataTable tr.even,
.ms-page-card table.dataTable tr.odd td.sorting_1,
.ms-page-card table.dataTable tr.odd td.sorting_2,
.ms-page-card table.dataTable tr.odd td.sorting_3,
.ms-page-card table.dataTable tr.even td.sorting_1,
.ms-page-card table.dataTable tr.even td.sorting_2,
.ms-page-card table.dataTable tr.even td.sorting_3 {
  background-color: transparent;
}

.ms-page-card .paging_full_numbers a.paginate_button {
  border: 1px solid var(--ms-border);
  border-radius: 8px;
  background: #fff;
}

.ms-page-card .paging_full_numbers a.paginate_button:hover {
  background: var(--ms-primary-tint);
}

.ms-page-card .paging_full_numbers a.paginate_active {
  background: var(--ms-primary) !important;
  border-color: var(--ms-primary) !important;
  color: #fff !important;
}

/* Ajax status-toggle icons (tick/cross images with a click handler,
   e.g. ManageOfficeAdmin/ManageInstituteAdmin/ManageReferral) render as
   bare <img class="Link"> with no button semantics - this just adds the
   missing pointer-cursor affordance, no JS/markup behavior touched. */
.ms-page-card img.Link {
  cursor: pointer;
}

/* Telerik RadAsyncUpload (Institute/Settings.aspx logo upload,
   Staff/UploadPhoto.aspx) renders its widget at a fixed ~430px width
   from its own skin CSS regardless of container size, which overflows
   the viewport and forces the whole page to scroll horizontally below
   the sm breakpoint. Constrained to the container width on mobile only
   - left untouched at desktop widths where 430px fits comfortably. */
@media (max-width: 575px) {
  .RadAsyncUpload.RadUpload {
    width: 100% !important;
  }
}