/* SASPC mobile app UI. Loaded only below 768px, so desktop is not affected. */
:root {
  --sm-navy: #0a1a3f;
  --sm-gold: #d4a017;
  --sm-red: #e53935;
  --sm-bg: #f4f6fb;
  --sm-line: #e3e7f0;
  --sm-muted: #66708a;
  --sm-radius: 14px;
  --sm-bar: 64px;
  --sm-safe: env(safe-area-inset-bottom, 0px);
}

html, body { background: var(--sm-bg); -webkit-tap-highlight-color: transparent; }
body { font-size: 15px; }
#page, #page-wrapper { overflow-x: clip; max-width: 100vw; background: transparent; }
body.sm-has-tabbar #page-wrapper { padding-bottom: calc(var(--sm-bar) + var(--sm-safe) + 12px); }

/* Top app bar */
.navbar.fixed-top {
  height: 56px;
  min-height: 56px;
  background: var(--sm-navy) !important;
  border: 0 !important;
  box-shadow: 0 2px 10px rgba(10, 26, 63, .25);
}
.navbar.fixed-top .container-fluid { padding: 0 8px; }
.navbar.fixed-top .navbar-toggler-icon { filter: invert(1) brightness(2); }
.navbar.fixed-top .navbar-brand {
  display: flex !important;
  position: absolute;
  left: 54px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}
.navbar.fixed-top .navbar-brand .logo { height: 38px; width: auto; border-radius: 9px; margin: 0 !important; }
.navbar.fixed-top #usernavigation a,
.navbar.fixed-top #usernavigation .nav-link,
.navbar.fixed-top #usernavigation .icon,
.navbar.fixed-top .usermenu .login a { color: #fff !important; }
.navbar.fixed-top .usermenu .login { display: none; }
#page.drawers { margin-top: 56px !important; padding-top: 0 !important; }
#page.drawers .main-inner { margin-top: 0; }
.pagelayout-frontpage #page-header, .pagelayout-frontpage #topofscroll { margin-top: 0 !important; padding-top: 0 !important; }
.pagelayout-frontpage #region-main, .pagelayout-frontpage #region-main-box { padding-top: 0 !important; margin-top: 0 !important; }
.pagelayout-frontpage #page-content,
.pagelayout-frontpage #section-1,
.pagelayout-frontpage .section-item { margin-top: 0 !important; padding-top: 0 !important; }
.pagelayout-frontpage .my-3:has(#hero) { margin-top: 0 !important; }
.drawer.drawer-primary, .drawer.drawer-left, .drawer.drawer-right { top: 0; }

/* Page spacing and headers */
#page.drawers .main-inner { margin: 12px auto; padding: 12px; border-radius: var(--sm-radius); }
.pagelayout-frontpage #page.drawers .main-inner { margin-top: 0; padding: 0 12px; background: transparent; }
#page-header { padding: 0 12px !important; }
#page-header .d-flex { flex-wrap: wrap; }
#page-header .header-actions-container { width: 100%; gap: 8px; }
#page-header .header-actions-container .btn { flex: 1 1 0; margin: 0 !important; }
#page-content, .secondary-navigation { padding-left: 12px !important; padding-right: 12px !important; }
.pagelayout-frontpage #page-header { padding: 0 !important; }
.pagelayout-frontpage #page-content { padding-left: 0 !important; padding-right: 0 !important; }
#page-header h1, .page-header-headings h1 { font-size: 1.3rem; font-weight: 700; color: var(--sm-navy); }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.1rem; }
.head1 { font-size: 1.35rem; font-weight: 800; color: var(--sm-navy); text-align: center; }

/* Tap targets */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 600; }
.btn.btn-icon, .navbar .btn, .drawertoggle { min-height: 0; }
.dropdown-item { min-height: 44px; display: flex; align-items: center; }
.pagelayout-frontpage .program-card .btn { flex: 1 1 0; }

/* Forms: 16px text stops iOS zooming in on focus */
input.form-control, select.form-select, select.custom-select, textarea.form-control,
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=number] {
  font-size: 16px !important;
  min-height: 46px;
  border-radius: 10px;
}
textarea.form-control { min-height: 110px; }
.mform .fitem, .mform .form-group { display: block; }
.mform .col-md-3, .mform .col-md-9 { width: 100%; max-width: 100%; flex: 0 0 100%; text-align: left; }
.mform .felement input.form-control, .mform .felement select { width: 100%; max-width: 100%; }

/* Login and signup */
.pagelayout-login #page { margin-top: 0; }
.pagelayout-login .login-container img { max-height: 110px; width: auto; border-radius: 16px; }
.pagelayout-login .login-wrapper, .pagelayout-login .login-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.pagelayout-login .login-wrapper { padding: 12px !important; }
.pagelayout-login .login-container {
  padding: 22px 16px !important;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(10, 26, 63, .16);
}
.pagelayout-login .login-container * { max-width: 100%; }
.pagelayout-login .login-heading { font-size: 1.35rem; font-weight: 800; color: var(--sm-navy); }
.pagelayout-login #loginbtn, .pagelayout-login .login-form-submit .btn { width: 100%; min-height: 48px; }

/* Home sections */
.pagelayout-frontpage #hero { border-radius: 0; }
.pagelayout-frontpage .admission-banner { width: 100%; border-radius: var(--sm-radius); box-shadow: 0 6px 16px rgba(229, 57, 53, .25); }
.program-card, .card, .dashboard-card, .coursebox {
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--sm-radius) !important;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(10, 26, 63, .07) !important;
}
.program-grid { gap: 14px; }
.pagelayout-frontpage .achievements-section { padding: 32px 14px; border-radius: var(--sm-radius); }
.achievements-title { font-size: 1.4rem; }
.achievements-subtitle { margin-bottom: 20px; }
.achievements-grid { gap: 12px; }
.pagelayout-frontpage #branches-section { padding: 26px 14px !important; }

/* Dashboard, my courses, course lists */
.dashboard-card-deck, .card-deck { display: grid !important; grid-template-columns: 1fr; gap: 12px; margin: 0 !important; }
.dashboard-card-deck .dashboard-card, .card-deck .card { width: 100% !important; margin: 0 !important; }
.block.card { margin-bottom: 12px; }
.course-listitem, .list-group-item { border-radius: 10px; }
.category.loaded .info, .categoryname { min-height: 44px; display: flex; align-items: center; }

/* Course page */
.course-section { border-radius: var(--sm-radius); background: #fff; margin-bottom: 12px; padding: 4px 10px !important; }
.activity-item { border-radius: 12px; padding: 10px !important; }
.activity-item .activityname a { font-weight: 600; }
.secondary-navigation .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.secondary-navigation .nav-tabs::-webkit-scrollbar { display: none; }
.secondary-navigation .nav-link { white-space: nowrap; }

/* Forum discussion list: cards instead of a wide table */
table.discussion-list { display: block; overflow: visible; border: 0; }
.discussion-list thead { display: none; }
.discussion-list tbody { display: block; }
.discussion-list tbody tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-radius);
  box-shadow: 0 3px 12px rgba(10, 26, 63, .07);
}
.discussion-list tbody tr > * { border: 0 !important; padding: 0 !important; width: auto !important; max-width: 100%; background: none !important; }
.discussion-list tbody tr > .topic { flex: 0 0 100%; order: -1; font-weight: 600; line-height: 1.5; }
.discussion-list tbody tr > .author { flex: 1 1 0; min-width: 0; }
.discussion-list tbody tr > :nth-child(4),
.discussion-list tbody tr > :nth-child(6),
.discussion-list tbody tr > :nth-child(7) { display: none; }
.discussion-list tbody tr > :nth-child(5)::before { content: "উত্তর: "; color: var(--sm-muted); }

/* Wide content scrolls by itself instead of moving the page */
table.generaltable, table.flexible, .table-responsive { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, video, iframe { max-width: 100%; }
#region-main img { height: auto; }
.mod_quiz-prev-nav, .mod_quiz-next-nav, .submitbtns .btn { min-width: 44%; }

/* Fixed Moodle items sit above the tab bar */
body.sm-has-tabbar #sticky-footer, body.sm-has-tabbar .stickyfooter { bottom: calc(var(--sm-bar) + var(--sm-safe)); }
body.sm-has-tabbar .drawer-toggles .drawer-toggler {
  top: auto;
  bottom: calc(var(--sm-bar) + var(--sm-safe) + 12px);
  left: auto;
  right: 0;
}
body.sm-has-tabbar .drawer-toggles .drawer-right-toggle { bottom: calc(var(--sm-bar) + var(--sm-safe) + 64px); }

/* The login link and support details move to the tab bar */
#page-footer .footer-content-popover { display: none; }
#page-footer { background: transparent !important; }

/* Bottom tab bar */
.sm-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  display: flex;
  height: calc(var(--sm-bar) + var(--sm-safe));
  padding-bottom: var(--sm-safe);
  background: #fff;
  border-top: 1px solid var(--sm-line);
  box-shadow: 0 -4px 16px rgba(10, 26, 63, .09);
  transition: transform .2s ease;
}
.sm-tabbar.sm-hidden { transform: translateY(110%); }
.sm-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--sm-muted) !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
}
.sm-tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sm-tab.sm-active { color: var(--sm-navy) !important; }
.sm-tab.sm-active svg { stroke: var(--sm-gold); }
/* The site's own "Join Now" style matches every signup link, so reset it here */
a.sm-tab.sm-cta {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sm-red) !important;
  animation: none !important;
  transform: none !important;
}
.sm-tab.sm-cta svg { stroke: var(--sm-red); }