/* Mobile app shell. Loaded last so legacy desktop positioning cannot leak in. */
.admin-mobile-tabs, .admin-menu-toggle, .admin-mobile-back { display: none; }
.pwa-install-popup { display: none; }
.pwa-install-footer { display: none; }

/* Standalone desktop PWAs do not have the browser toolbar's back control.
 * Keep the in-app back button available on inner pages while leaving normal
 * desktop browser tabs unchanged. */
@media screen and (display-mode: standalone) and (min-width: 768px) {
  .pcoded-header .m-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 240px;
    z-index: 1031;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 70px;
    pointer-events: none;
  }

  /* School panels use the compact 80px sidebar; the full academic panel
   * keeps the legacy 240px sidebar. */
  body.school-simple-mode .pcoded-header .m-header {
    left: 0;
  }

  /* The legacy collapsed sidebar expands to 240px on hover. Move the
   * floating control with it so it never sits underneath the open menu. */
  .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-header .m-header {
    left: 240px;
  }

  .pcoded-header .m-header .b-brand,
  .pcoded-header .m-header .admin-menu-toggle {
    display: none !important;
  }

  body.has-mobile-back .pcoded-header .m-header .admin-mobile-back {
    display: inline-flex;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
  }

  /* Use the header's leading slot for back navigation instead of placing the
   * button over the institution title. */
  body.has-mobile-back .pcoded-header .full-screen {
    display: none !important;
  }

  body.has-mobile-back .pcoded-header .navbar-nav.me-auto {
    padding-left: 58px;
  }
}

/* Keep normal mobile scrolling and pinch zoom, but disable the browser's
 * double-tap-to-zoom gesture so the PWA feels like an app. */
@media (max-width: 991px) {
  html, body,
  button, a, input, select, textarea, [role="button"] {
    touch-action: manipulation;
  }
}

/* Coordinated admin colors on desktop and mobile. */
@media screen {
  :root { --admin-page: #f2f6fc; --admin-border: #dfe8f5; }
  .pcoded-header {
    align-items: stretch;
    flex-wrap: nowrap !important;
    background: linear-gradient(115deg, #173c80 0%, #245cbb 65%, #2878ba 100%) !important;
    border-bottom: 1px solid #ffffff20;
    box-shadow: 0 4px 16px #173c801c;
  }
  .pcoded-header .collapse.navbar-collapse {
    flex: 1 1 auto;
    flex-basis: auto !important;
    min-width: 0;
  }
  .pcoded-header .navbar-nav.me-auto {
    min-width: 0;
    flex: 1 1 auto;
  }
  .pcoded-header .topbar-title {
    max-width: min(58vw, 820px);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
  }
  .pcoded-header .topbar-title { color: #fff; font-weight: 700; letter-spacing: .2px; }
  .pcoded-header .navbar-nav > li > a,
  .pcoded-header .navbar-nav > li > .dropdown > .dropdown-toggle { color: #fff !important; }
  .pcoded-main-container { background: linear-gradient(180deg, #edf3fd 0, #f5f7fc 300px); }
  .admin-page-heading h1 { color: #193e78; }
  .card { border-color: #dfe8f5; box-shadow: 0 4px 18px #234d8108; }
  .card .card-header { background: #f5f8fe; border-bottom-color: #e3ebf7; }
  .card .card-header h5 { color: #214775; }
  .card .card-footer { background: #f5f8fe; }
  .pcoded-main-container .nav-pills { padding: 5px; gap: 4px; border-radius: 12px; background: #edf3fc; }
  .pcoded-main-container .nav-pills .nav-link { border-radius: 9px; color: #3c5579; font-weight: 600; }
  .pcoded-main-container .nav-pills .nav-link.active,
  .pcoded-main-container .nav-pills .show > .nav-link { background: #245cbb; color: #fff; box-shadow: 0 3px 8px #245cbb25; }
  .pcoded-main-container .nav-pills .nav-link:not(.active):hover { background: #dfeafb; color: #173c80; }
  .form-control:focus, .custom-select:focus { background-color: #fff; }
}
@media screen and (max-width: 991.98px) {
  /* Toastr uses top: 12px by default and its very high z-index lets an
     error cover the sticky mobile header and the first page controls. Keep
     messages below the header and inside the phone viewport. */
  #toast-container.toast-top-right,
  #toast-container.toast-top-left,
  #toast-container.toast-top-center,
  #toast-container.toast-top-full-width {
    top: calc(68px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
  }

  #toast-container > div {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    border-radius: 12px;
    line-height: 1.35;
  }

  .pcoded-header.headerpos-fixed {
    position: sticky !important;
    top: 0;
    width: 100% !important;
    max-width: 100vw;
    min-height: calc(60px + env(safe-area-inset-top));
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    box-sizing: border-box;
    overflow: visible;
  }
  .pcoded-header .collapse.navbar-collapse {
    flex-basis: auto !important;
    flex-grow: 1 !important;
    width: auto !important;
    height: 60px !important;
    min-height: 60px !important;
  }
  .pcoded-header .m-header {
    width: 44px !important;
    height: 60px !important;
    min-height: 60px !important;
    flex: 0 0 44px !important;
    align-items: center;
  }
  .pcoded-header .navbar-collapse {
    min-width: 0;
    overflow: hidden;
  }
  .pcoded-header .navbar-nav.me-auto { min-width: 0; overflow: hidden; }
  .pcoded-header .navbar-nav.me-auto > li { min-width: 0; max-width: 100%; overflow: hidden; }
  .pcoded-header .topbar-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 60px;
  }
  .pcoded-header .navbar-nav.ms-auto { margin-left: auto; }
  .pcoded-header .navbar-nav.ms-auto > li { min-width: 44px; min-height: 60px; display: flex; align-items: center; justify-content: center; }
  .pcoded-header .navbar-nav.ms-auto .drp-user { display: flex; align-items: center; }

  .pwa-install-popup {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 1035;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid #cfe0fb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(24, 34, 48, .18);
  }
  .pwa-install-popup:not([hidden]) { display: flex; }
  .pwa-install-popup__icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; background: #eaf1ff; color: #2563eb; }
  .pwa-install-popup__content { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
  .pwa-install-popup__content strong { color: #182230; font-size: 12px; }
  .pwa-install-popup__content span { color: #667085; font-size: 10px; line-height: 1.3; }
  .pwa-install-popup__action { min-width: 61px; height: 24px; padding: 5px 5px; border: 0; border-radius: 17px; background: #2563eb; color: #fff; font-size: 12px; }
  .pwa-install-popup__close { align-self: flex-start; border: 0; background: transparent; color: #98a2b3; font-size: 20px; line-height: 16px; }
  .school-simple-mode .pcoded-navbar .pcoded-inner-navbar > li > a {
    display: flex;
    width: calc(100% - 20px);
    min-height: 48px;
    margin: 2px 10px;
    padding: 10px 12px;
    align-items: center;
    touch-action: manipulation;
  }
  .school-simple-mode .pcoded-navbar .pcoded-inner-navbar .pcoded-submenu li > a {
    display: flex;
    width: calc(100% - 20px);
    min-height: 44px;
    margin: 2px 10px;
    padding: 10px 14px 10px 28px;
    align-items: center;
    touch-action: manipulation;
  }
  html { scroll-padding-top: 80px; }
  body { font-size: 14px; }
  .pcoded-header.headerpos-fixed { position: sticky; top: 0; display: flex; flex-wrap: nowrap; height: calc(60px + env(safe-area-inset-top)); min-height: 60px; padding: env(safe-area-inset-top) 8px 0; z-index: 1020; }
  .pcoded-header .m-header { display: flex !important; width: 44px; height: 60px; min-height: 60px; flex: 0 0 44px; padding: 0; }
  .pcoded-header .m-header .b-brand, .pcoded-header #mobile-header { display: none !important; }
  .pcoded-header .collapse.navbar-collapse { display: flex !important; flex: 1; min-width: 0; height: 60px !important; min-height: 60px; border: 0; background: transparent; padding: 0; }
  .pcoded-header .admin-menu-toggle { color: #fff; background: #ffffff16; border: 1px solid #ffffff25; border-radius: 12px; }
  .pcoded-header .navbar-nav > li > .drp-user > .dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; height: 44px; padding: 0 8px; line-height: 1; border: 1px solid #ffffff25; border-radius: 12px; background: #ffffff16; }
  .pcoded-header .navbar-nav { flex-direction: row; align-items: center; }
  .pcoded-header .navbar-nav.me-auto { flex: 1; min-width: 0; overflow: hidden; }
  .pcoded-header .navbar-nav.me-auto > li:first-child { display: none; }
  .pcoded-header .navbar-nav.me-auto > li { min-width: 0; padding: 0 8px; }
  .pcoded-header .topbar-title { display: block; max-width: 100%; margin: 0; line-height: 1.3; font-size: 15px; }
  .pcoded-header .navbar-nav.ms-auto { flex: 0 0 auto; }
  .pcoded-header .navbar-nav.ms-auto > li { padding: 0 4px; }
  .pcoded-header .navbar-nav.ms-auto > li:not(:last-child) { display: none; }
  .pcoded-header .dropdown-menu { position: fixed !important; top: calc(64px + env(safe-area-inset-top)) !important; left: auto !important; right: 10px !important; transform: none !important; width: min(340px, calc(100vw - 20px)); max-height: calc(100dvh - 145px); overflow-y: auto; }
  .pcoded-header.headerpos-fixed ~ .pcoded-main-container { padding: 0 !important; margin: 0 !important; min-width: 0; }
  .pcoded-content { padding: 12px 12px calc(76px + env(safe-area-inset-bottom)); }
  .pcoded-inner-content, .main-body, .page-wrapper, .row > [class*="col-"] { min-width: 0; }
  .page-wrapper { min-height: 0; }
  .admin-page-heading { min-height: 0; margin: 0 0 12px; }
  .admin-page-heading nav { display: none; }
  .admin-page-heading h1 { font-size: 20px; line-height: 1.3; }
  .pcoded-header.headerpos-fixed ~ .pcoded-main-container {
    min-height: calc(100dvh - 60px - env(safe-area-inset-top));
    padding-top: 0 !important;
  }
  .admin-menu-toggle { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--admin-ink); min-width: 44px; min-height: 44px; border-radius: 12px; cursor: pointer; }
  .admin-menu-toggle:focus-visible, .admin-mobile-tabs a:focus-visible { outline: 3px solid #93b4ff; outline-offset: -3px; }
  .admin-mobile-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1025; padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: #fff; border-top: 1px solid var(--admin-border); box-shadow: 0 -4px 20px #18223008; }
  .admin-mobile-tabs > a, .admin-mobile-tabs > button { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 52px; color: #667085; font: inherit; font-size: 11px; font-weight: 600; border-radius: 12px; text-decoration: none; }
  .admin-mobile-tabs > .pwa-install-footer:not([hidden]) { display: flex; }
  .admin-mobile-tabs > .pwa-install-footer { border: 0; background: transparent; color: #2563eb; }
  .admin-mobile-tabs i { font-size: 19px; }
  .admin-mobile-tabs [aria-current="page"], .admin-mobile-tabs [aria-expanded="true"] { color: #fff; background: #245cbb; box-shadow: 0 3px 9px #245cbb25; }
  .admin-mobile-tabs { border-top-color: #dce7f6; background: #fafdff; }
  .pcoded-main-container .nav-pills { flex-wrap: nowrap; overflow-x: auto; }
  .pcoded-main-container .nav-pills .nav-item { flex: 1 0 0; min-width: 90px; }
  .pcoded-main-container .nav-pills .nav-link { min-height: 44px; height: 100%; padding: 9px 6px; justify-content: center; text-align: center; font-size: 11px; line-height: 1.4; }
  body.admin-nav-open { overflow: hidden; }
  .pcoded-navbar, .pcoded-navbar.navbar-collapsed { width: min(304px, 86vw); margin-left: 0; left: -100%; top: 0; height: 100dvh; padding-top: env(safe-area-inset-top); z-index: 1040; transition: left .2s ease; }
  .pcoded-navbar.mob-open { left: 0; }
  .pcoded-navbar .navbar-brand { display: flex; width: 100%; height: 64px; }
  .pcoded-navbar .navbar-content { height: calc(100dvh - 64px - env(safe-area-inset-top)) !important; overflow-y: auto !important; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
  .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a > .pcoded-mtext { display: inline; opacity: 1; position: static; }
  .pcoded-navbar.mob-open ~ .pcoded-header:before, .pcoded-navbar.mob-open ~ .pcoded-main-container:before { display: none; }
  .card { overflow: visible; margin-bottom: 12px; }
  .card .card-header, .card .card-block, .card .card-body { padding: 12px; }
  .card .card-header[hidden] { display: none; }
  .card > .card-block + .card-block { padding-top: 0; }
  .card .card-footer { padding: 10px 12px; }
  .form-group { margin-bottom: 12px; }
  .form-group label { margin-bottom: 5px; }
  .dashboard-welcome { padding: 16px; margin-bottom: 12px; }
  .dashboard-welcome h2 { margin-top: 4px; font-size: 21px; }
  .dashboard-date { margin-top: 10px; padding: 6px 10px; }
  .school-action { min-height: 96px; padding: 12px; gap: 8px; }
  .school-quick-actions .row { row-gap: 12px; }
  .card .card-header { border-radius: 12px 12px 0 0; }
  .card .card-footer { border-radius: 0 0 12px 12px; }
  /* One touch sizing scale for page actions, table actions, and dialogs. */
  .btn, .btn-sm, .btn-group-sm > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    height: auto;
    max-width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    vertical-align: middle;
    border-radius: 10px;
  }
  .btn > i { flex-shrink: 0; margin: 0; }
  .btn.btn-icon, .btn.drp-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    line-height: 1;
    font-size: 16px;
  }
  .btn-lg, .btn-group-lg > .btn { min-height: 48px; padding: 12px 18px; font-size: 16px; }
  .card-footer .btn, .modal-footer .btn { min-height: 46px; }
  .input-group > .btn { margin: 0; }
  .dataTables_wrapper .dt-buttons .btn { margin: 0; }
  .pagination .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .btn:hover { transform: none; }
  .form-control, .custom-select, .select2-selection { min-height: 46px; font-size: 16px; box-shadow: none; }
  .form-control:focus, .custom-select:focus, textarea.form-control:focus {
    border-color: #2563eb !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.22) !important;
    caret-color: #1554c7;
    outline: 2px solid rgba(37,99,235,.18);
    outline-offset: 1px;
  }
  .form-group:focus-within > label { color: #1554c7; font-weight: 700; }
  .select2-container--focus .select2-selection,
  .select2-container--open .select2-selection { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.22) !important; }
  .wizard-sec-bg { border-radius: 0 0 12px 12px; }
  .wizard { padding: 0 12px 12px; }
  .wizard > .steps > ul { display: flex; gap: 8px; overflow-x: auto; margin: 0; padding: 0 0 8px; }
  .wizard > .steps > ul > li { float: none; flex: 1 0 140px; width: auto; max-width: none; }
  .wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active { margin: 0; padding: 12px; min-height: 46px; border-radius: 10px; }
  .wizard > .content { border: 0; background: transparent; margin: 8px 0; min-height: 0; }
  .wizard > .content > .body { padding: 4px 0; min-height: 0; }
  .wizard .scheduler-border { margin: 0 0 12px !important; padding: 8px 0 0 !important; border: 0; border-top: 1px solid var(--admin-border); border-radius: 0; }
  .wizard > .actions { margin-top: 8px; padding-top: 8px; }
  .wizard > .actions a { min-height: 46px; display: flex; align-items: center; justify-content: center; padding: 10px 14px; font-size: 14px; line-height: 1.4; border-radius: 10px; }
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .nav-tabs .nav-link { white-space: nowrap; }
  .dataTables_wrapper { border: 0; overflow: visible; }
  .dataTables_wrapper .row { min-width: 0; }
  .dataTables_wrapper .row > div { min-width: 0; }
  .dataTables_wrapper .dataTables_filter input { max-width: 100%; width: 100%; margin: 6px 0 0; min-height: 44px; font-size: 16px; }
  .dataTables_wrapper .dataTables_filter label { display: block; white-space: normal; }
  .dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
  .admin-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .admin-table-scroll > table { display: table !important; }
  .modal-dialog { margin: 10px; max-width: calc(100% - 20px); }
  .modal { z-index: 1060; }
  .delete-confirmation-modal { z-index: 1072; pointer-events: auto; }
  .modal-backdrop { z-index: 1055; }
  .modal-dialog, .modal-content, .modal-content button, .modal-content a { pointer-events: auto; }
  .modal-content { max-height: calc(100dvh - 20px); overflow-y: auto; }
  input, select, textarea { scroll-margin-bottom: 100px; }
}
@media screen and (min-width: 360px) and (max-width: 575.98px) {
  /* Preserve intentional two-column shortcuts instead of stretching each tile. */
  .school-quick-actions .row > .col-6 { flex: 0 0 50%; width: 50%; max-width: 50%; }
}

/* Final compact pass for narrow phone screens. */
@media screen and (max-width: 767.98px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
  .pcoded-main-container, .pcoded-content, .pcoded-inner-content,
  .main-body, .page-wrapper, .page-wrapper > .row,
  .page-wrapper > .row > [class*="col-"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .card, .card-block, .card-body, .student-mobile-list, .id-card-mobile-list, .fees-mobile-list { max-width: 100%; min-width: 0; box-sizing: border-box; }

  .student-mobile-card__details,
  .id-card-mobile-item__meta,
  .fee-mobile-card__meta,
  .fee-mobile-card__amounts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; min-width: 0; }
  .student-mobile-card__details span,
  .id-card-mobile-item__meta span,
  .fee-mobile-card__meta span,
  .fee-mobile-card__amounts span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .student-mobile-card, .id-card-mobile-item, .fee-mobile-card { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; }

  /* Generic fallback for every list table without a custom card template. */
  .mobile-card-table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent;
  }
  /* The legacy mobile stylesheet gives responsive tables a desktop-sized
     minimum width. A transformed card list must be allowed to fit the phone. */
  .table-responsive > .mobile-card-table,
  .dataTables_wrapper > .mobile-card-table { min-width: 0 !important; }
  .mobile-card-table thead { display: none !important; }
  .mobile-card-table tbody { display: grid; gap: 8px; }
  .mobile-card-table tbody tr {
    display: block;
    padding: 9px;
    border: 1px solid #dfe8f5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(24, 34, 48, .04);
  }
  .mobile-card-table tbody td {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: left;
    line-height: 1.35;
    font-size: 12px;
  }
  .mobile-card-table tbody td::before {
    flex: 0 0 38%;
    min-width: 0;
    color: #98a2b3;
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
  }
  .mobile-card-table tbody td > *:not(.checkbox) {
    min-width: 0;
    max-width: 62%;
    overflow-wrap: anywhere;
  }
  .mobile-card-table tbody td > a,
  .mobile-card-table tbody td > span:not(.badge) {
    flex: 1 1 auto;
  }
  .mobile-card-table tbody td:first-child {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 0 3px !important;
    border-bottom: 1px solid #edf1f6 !important;
    align-items: center;
  }
  .mobile-card-table tbody td:first-child::before {
    display: none;
    padding-top: 0;
    line-height: 20px;
  }
  .mobile-card-table tbody td:first-child .mobile-card-row-number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-width: 24px;
    color: #667085;
    font-size: 11px;
    text-align: left;
  }
  .mobile-card-table tbody td:first-child > .checkbox {
    margin-left: auto;
  }
  .mobile-card-table tbody td:first-child .checkbox {
    display: inline-flex;
    align-items: center;
    margin: 0;
    line-height: 1;
  }
  .mobile-card-table tbody td:first-child input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
  }
  .mobile-card-table tbody td:last-child {
    display: block !important;
    margin-top: 4px;
    padding-top: 8px !important;
    border-top: 1px solid #edf1f6 !important;
    text-align: left;
    overflow: visible;
    font-size: 0 !important;
  }
  .mobile-card-table tbody td:last-child::before {
    display: block;
    width: 100%;
    padding-top: 0;
    margin-bottom: 6px;
  }
  .mobile-card-table tbody td:last-child > * {
    display: inline-flex;
    max-width: none;
    vertical-align: middle;
    font-size: 11px;
  }
  .mobile-card-table tbody td:last-child script,
  .mobile-card-table tbody td:last-child .modal { display: none !important; }
  .mobile-card-table tbody td .btn { margin: 0 4px 4px 0; white-space: nowrap; font-size: 11px !important; }
  .mobile-card-table tbody td .badge { white-space: nowrap; }

  /* Calendar-style student pages keep their matrix readable with a small
     touch-scrolling viewport instead of becoming a tall key/value card. */
  .student-portal-mode .table-responsive {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .student-portal-mode .table-responsive > .table-attendance,
  .student-portal-mode .table-responsive > .class-routine-table {
    min-width: 680px !important;
  }

  .fees-mobile-list { display: grid !important; gap: 8px; width: 100%; }
  .fees-table-wrapper { display: none !important; }
  .fees-mobile-list + * { display: none !important; }
  .fee-mobile-card { padding: 10px; border: 1px solid #dfe8f5; border-radius: 10px; background: #fff; }
  .fee-mobile-card__top, .fee-mobile-card__actions { display: flex; align-items: center; gap: 7px; }
  .fee-mobile-card__identity { flex: 1; min-width: 0; }
  .fee-mobile-card__identity strong, .fee-mobile-card__identity a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fee-mobile-card__identity strong { color: #182230; font-size: 13px; }
  .fee-mobile-card__identity a { font-size: 11px; }
  .fee-mobile-card__meta, .fee-mobile-card__amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #edf1f6; }
  .fee-mobile-card__meta span, .fee-mobile-card__amounts span { min-width: 0; overflow: hidden; color: #475467; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .fee-mobile-card small { display: block; margin-bottom: 2px; color: #98a2b3; font-size: 9px; text-transform: uppercase; }
  .fee-mobile-card__balance { color: #2563eb !important; font-weight: 700; }
  .fee-mobile-card__actions { justify-content: flex-end; margin-top: 8px; }
  .fee-mobile-card__actions .btn { min-width: 61px !important; min-height: 24px !important; height: 24px !important; padding: 5px 5px !important; border-radius: 17px !important; }
  .student-mobile-card__bottom { flex-wrap: wrap; align-items: center; }
  .student-mobile-card__actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 4px; width: 100%; margin-top: 7px; }
  .student-mobile-card__actions form { display: inline-flex; margin: 0; }
  .student-mobile-card__actions .btn { min-width: 61px !important; min-height: 24px !important; height: 24px !important; padding: 5px 5px !important; border-radius: 17px !important; font-size: 11px !important; white-space: nowrap; }

  .id-card-page .table-responsive { display: none !important; }
  .id-card-page .id-card-mobile-list { display: grid !important; gap: 8px; width: 100%; }
  .id-card-mobile-item { padding: 10px; border: 1px solid #dfe8f5; border-radius: 10px; background: #fff; }
  .id-card-mobile-item__main { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .id-card-mobile-item__identity { flex: 1; min-width: 0; }
  .id-card-mobile-item__name, .id-card-mobile-item__id { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .id-card-mobile-item__name { color: #182230; font-size: 13px; font-weight: 700; }
  .id-card-mobile-item__id { margin-top: 2px; font-size: 11px; }
  .id-card-mobile-item__main .btn { min-width: 61px !important; min-height: 24px !important; height: 24px !important; padding: 5px 5px !important; border-radius: 17px !important; }
  .id-card-mobile-item__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #edf1f6; }
  .id-card-mobile-item__meta span { min-width: 0; overflow: hidden; color: #475467; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .id-card-mobile-item__meta small { display: block; margin-bottom: 2px; color: #98a2b3; font-size: 9px; text-transform: uppercase; }

  .pcoded-content { padding-left: 8px; padding-right: 8px; }
  .page-wrapper > .row { row-gap: 8px; }
  .page-wrapper > .row > [class*="col-"] { margin-bottom: 0; }
  .card { margin-bottom: 8px; }
  .card .card-header, .card .card-block, .card .card-body { padding: 10px; }
  .card .card-header h5 { margin: 0; font-size: 14px; }
  .card .card-block + .card-block { padding-top: 4px; }
  .card .row { row-gap: 0; }
  .form-group { margin-bottom: 9px; }
  .form-group label { font-size: 12px; }
  .page-wrapper .btn { margin-bottom: 4px; }
  .page-wrapper .btn + .btn { margin-left: 2px; }
  .dataTables_wrapper { margin-top: 0; }
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length { margin: 4px 0 8px; }
  .dataTables_wrapper .dataTables_info { font-size: 11px; }
  .dataTables_wrapper .dataTables_paginate { margin-top: 5px; }
  .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 6px 10px !important; }
  .admin-mobile-tabs { min-height: 64px; }
  .pcoded-content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* Compact action controls for phone list pages. */
  .page-wrapper .btn,
  .page-wrapper .btn-sm,
  .page-wrapper .btn-group-sm > .btn,
  .modal-content .btn {
    min-width: 61px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 5px 5px !important;
    border-radius: 17px !important;
    font-size: 12px !important;
    line-height: 1.2;
  }
  .page-wrapper .btn.btn-icon,
  .page-wrapper .btn.drp-icon {
    width: 61px !important;
    min-width: 61px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0;
    font-size: 12px !important;
  }
  .page-wrapper .btn i { font-size: 12px; }
  .student-mobile-card__bottom .btn {
    min-width: 61px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 5px 5px !important;
    border-radius: 17px !important;
    font-size: 12px !important;
  }

  /* Mobile form layout */
  .page-wrapper form .row {
    margin-left: -4px;
    margin-right: -4px;
  }
  .page-wrapper form .row > [class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
  }
  .page-wrapper form .form-group {
    width: 100%;
    margin-bottom: 10px;
  }
  .page-wrapper form label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
  }
  .page-wrapper form .form-control,
  .page-wrapper form select,
  .page-wrapper form textarea,
  .page-wrapper form .select2-container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .page-wrapper form textarea.form-control {
    min-height: 76px;
  }
  .page-wrapper form .btn-filter,
  .page-wrapper form button[type="submit"] {
    margin-top: 2px;
  }
  .wizard {
    padding: 0 4px 8px;
    overflow: hidden;
  }
  .wizard > .steps {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .wizard > .steps > ul {
    width: max-content;
    min-width: 100%;
    gap: 6px;
  }
  .wizard > .steps > ul > li {
    flex: 0 0 min(235px, calc(100vw - 55px));
    max-width: none;
  }
  .wizard > .steps a,
  .wizard > .steps a:hover,
  .wizard > .steps a:active {
    min-height: 42px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
  }
  .wizard > .content > .body {
    padding: 2px 0;
  }
  .wizard .scheduler-border {
    padding-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .wizard > .actions {
    display: flex;
    gap: 6px;
  }
  .wizard > .actions > ul {
    width: 100%;
    gap: 6px;
  }
  .wizard > .actions > ul > li {
    flex: 1;
  }
}

@media screen and (max-width: 380px) {
  .pcoded-header .topbar-title { font-size: 13px; }
  .pcoded-content { padding-left: 6px; padding-right: 6px; }
  .card .card-header, .card .card-block, .card .card-body { padding: 8px; }
  .page-wrapper .btn { padding-left: 10px; padding-right: 10px; font-size: 12px; }
  .student-mobile-card__details { gap: 5px; }
  .student-mobile-card__details span { font-size: 11px; }
}
/* Shared mobile form defaults for every admin form, including pages that do
   not use the admission wizard. */
@media screen and (max-width: 767.98px) {
  .pcoded-main-container form:not(.d-inline) .form-control,
  .pcoded-main-container form:not(.d-inline) select,
  .pcoded-main-container form:not(.d-inline) textarea,
  .pcoded-main-container form:not(.d-inline) .select2-container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .pcoded-main-container form:not(.d-inline) .form-group { margin-bottom: 10px; }
  .pcoded-main-container form:not(.d-inline) label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
  }
  .pcoded-main-container form:not(.d-inline) .row { row-gap: 0; }
}

@media (prefers-reduced-motion: reduce) { .pcoded-navbar, .btn { transition: none !important; } }
@media print { .admin-mobile-tabs, .admin-menu-toggle { display: none !important; } }

/* Header stability: Bootstrap's collapsed navbar can put the title and the
   account controls on separate rows at zoomed desktop widths. Keep the app
   header a single toolbar so the page content never slides underneath it. */
@media screen and (min-width: 992px) {
  .pcoded-header.headerpos-fixed {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: 70px !important;
    min-height: 70px !important;
  }
  .pcoded-header > .collapse.navbar-collapse {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 70px !important;
    min-height: 70px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .pcoded-header > .collapse.navbar-collapse > .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 70px !important;
  }
  .pcoded-header > .collapse.navbar-collapse > .navbar-nav.me-auto {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .pcoded-header > .collapse.navbar-collapse > .navbar-nav.me-auto > li:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
  }
  .pcoded-header > .collapse.navbar-collapse > .navbar-nav.ms-auto {
    flex: 0 0 auto !important;
  }
  .pcoded-header.headerpos-fixed ~ .pcoded-main-container {
    padding-top: 70px !important;
  }
}

/* Final PWA app-shell pass. Keep the admin surface feeling like a phone app
   instead of a desktop page squeezed into a narrow viewport. */
@media screen and (max-width: 767.98px) {
  body {
    background: #f2f6fc;
    -webkit-tap-highlight-color: transparent;
  }

  .pcoded-header.headerpos-fixed {
    min-height: calc(64px + env(safe-area-inset-top));
    height: calc(64px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 10px 0;
    border-bottom: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 24px rgba(23, 60, 128, .20);
  }

  .pcoded-header .m-header {
    width: 88px !important;
    min-width: 88px;
    height: 64px;
    min-height: 64px;
    flex: 0 0 auto !important;
    gap: 6px;
  }

  .pcoded-header .m-header .b-brand {
    display: flex !important;
    width: 36px;
    max-width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 11px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
  }

  .pcoded-header .m-header .b-brand .b-bg,
  .pcoded-header .m-header .b-brand img {
    display: block;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    padding: 3px;
    object-fit: contain;
    border-radius: 11px;
    background: #fff;
  }

  .pcoded-header .m-header .admin-menu-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
  }

  .admin-mobile-back {
    display: none;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
  }

  body.has-mobile-back .pcoded-header .m-header .admin-menu-toggle { display: none !important; }
  body.has-mobile-back .pcoded-header .m-header .admin-mobile-back { display: inline-flex; }

  .pcoded-header .collapse.navbar-collapse,
  .pcoded-header > .collapse.navbar-collapse > .navbar-nav {
    height: 64px !important;
    min-height: 64px !important;
  }

  .pcoded-header .collapse.navbar-collapse {
    display: flex !important;
    align-items: center !important;
  }

  .pcoded-header .navbar-nav.me-auto,
  .pcoded-header .navbar-nav.me-auto > li,
  .pcoded-header .navbar-nav.me-auto > li:last-child {
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    min-height: 64px !important;
  }

  .pcoded-header .navbar-nav.me-auto > li:last-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .pcoded-header .topbar-title {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    max-width: calc(100vw - 165px);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25 !important;
    text-align: left;
  }

  .pcoded-header .navbar-nav.ms-auto > li {
    min-width: 40px;
    min-height: 40px;
  }

  .pcoded-header .navbar-nav.ms-auto > li > .drp-user > .dropdown-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
  }

  .pcoded-main-container {
    background: linear-gradient(180deg, #edf3fd 0, #f7f9fc 280px);
  }

  .pcoded-content {
    padding: 14px 10px calc(84px + env(safe-area-inset-bottom));
  }

  .admin-page-heading {
    margin: 0 2px 12px;
  }

  .admin-page-heading h1 {
    font-size: 21px;
    letter-spacing: -.25px;
  }

  .card {
    border-radius: 16px;
    border-color: #dfe8f5;
    box-shadow: 0 5px 18px rgba(24, 34, 48, .055);
  }

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

  .admin-mobile-tabs {
    gap: 4px;
    min-height: 70px;
    padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    border-top: 1px solid #dce7f6;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -8px 26px rgba(24, 34, 48, .10);
    backdrop-filter: blur(16px);
  }

  .admin-mobile-tabs > a,
  .admin-mobile-tabs > button {
    min-height: 54px;
    padding: 5px 3px;
    gap: 3px;
    border: 0;
    border-radius: 14px;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
    touch-action: manipulation;
  }

  .admin-mobile-tabs i { font-size: 18px; }

  .admin-mobile-tabs [aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, #245cbb, #2878ba);
    box-shadow: 0 5px 12px rgba(36, 92, 187, .24);
  }

  .admin-nav-backdrop {
    backdrop-filter: blur(3px);
  }

  .pcoded-navbar,
  .pcoded-navbar.navbar-collapsed {
    width: min(310px, 88vw);
    border-radius: 0 22px 22px 0;
    overflow: hidden;
    box-shadow: 14px 0 34px rgba(16, 24, 40, .28);
  }

  .pcoded-navbar .navbar-brand {
    height: 72px;
    min-height: 72px;
    padding: 12px 16px;
  }

  .pcoded-navbar .navbar-content {
    height: calc(100dvh - 72px - env(safe-area-inset-top)) !important;
  }

  .pcoded-navbar .pcoded-inner-navbar li > a {
    display: flex;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    margin: 3px 0;
    align-items: center;
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(36, 92, 187, .18);
    touch-action: manipulation;
  }

  .pcoded-navbar .pcoded-inner-navbar,
  .pcoded-navbar .pcoded-inner-navbar > li,
  .pcoded-navbar .pcoded-inner-navbar .pcoded-submenu,
  .pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    touch-action: manipulation;
  }

  .pcoded-navbar .pcoded-inner-navbar > li > a,
  .pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li > a {
    padding-right: 16px;
    padding-left: 16px;
  }

  .pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li > a {
    padding-left: 30px;
  }

  /* Keep the mobile drawer labels in the flex row. The legacy desktop rule
     positions .pcoded-mtext absolutely, which makes long College and
     Super Admin labels start on top of their icons on narrow screens. */
  .pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    margin-right: 10px;
    padding: 4px;
    box-sizing: border-box;
    justify-content: center;
  }

  .pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-mtext {
    position: static !important;
    top: auto;
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a {
    padding-right: 44px;
  }

  .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }

  .school-menu-label {
    margin-top: 18px;
  }
}

@media screen and (display-mode: standalone) and (max-width: 767.98px) {
  .pcoded-header.headerpos-fixed {
    box-shadow: 0 9px 28px rgba(23, 60, 128, .25);
  }

  .pcoded-content {
    padding-top: 16px;
  }
}

@media screen and (max-width: 767.98px) {
  /* Dashboard is the app home: keep the key numbers visible above the fold
     as compact tiles instead of stacking desktop columns into a long list. */
  .dashboard-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 12px !important;
  }

  .dashboard-stats-row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .dashboard-stats-row .dashboard-stat {
    min-height: 112px;
    margin: 0;
    border-radius: 16px;
  }

  .dashboard-stats-row .dashboard-stat .card-block {
    min-height: 112px;
    padding: 14px;
  }

  .dashboard-stats-row .dashboard-stat h5 {
    max-width: 85%;
    margin-bottom: 8px !important;
    font-size: 11px;
    line-height: 1.25;
  }

  .dashboard-stats-row .dashboard-stat h2 {
    font-size: 26px;
    font-weight: 800;
  }

  .dashboard-stats-row .dashboard-stat i {
    right: 12px !important;
    bottom: 12px !important;
    font-size: 42px !important;
  }

  .school-quick-actions {
    border-radius: 16px;
  }

  .school-quick-actions .card-header {
    display: flex;
    align-items: center;
    min-height: 48px;
  }

  .school-quick-actions .card-body {
    padding: 10px;
  }

  .school-action {
    min-height: 88px;
    padding: 10px 6px;
    border-radius: 14px;
    font-size: 12px;
  }

  .school-action i { font-size: 23px; }
}

@media screen and (max-width: 991.98px) {
  .pcoded-header.headerpos-fixed {
    flex-wrap: nowrap !important;
    height: calc(60px + env(safe-area-inset-top)) !important;
    min-height: 60px !important;
  }
  .pcoded-header > .collapse.navbar-collapse {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 60px !important;
    min-height: 60px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .pcoded-header > .collapse.navbar-collapse > .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 60px !important;
  }
  .pcoded-header > .collapse.navbar-collapse > .navbar-nav.me-auto {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .pcoded-header > .collapse.navbar-collapse > .navbar-nav.me-auto > li:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
  }
  .pcoded-header > .collapse.navbar-collapse > .navbar-nav.ms-auto {
    flex: 0 0 auto !important;
  }
  .pcoded-header.headerpos-fixed ~ .pcoded-main-container {
    padding-top: 0 !important;
  }
}