/* ================= MakeIdBd mobile bottom tab bar =================
   Phone/tablet only. On those widths it replaces the floating WhatsApp
   button, which would otherwise sit on top of it. */

:root { --tabbar-h: 62px; }

/* master.css ships a global `svg { position:absolute; left:0; top:0; width:100%;
   height:100%; transform:rotate(-90deg) }` for a loader widget, which throws every
   inline icon out of its box. Undo it inside the bar. */
.tabbar svg {
  position: static;
  left: auto;
  top: auto;
  width: 22px;
  height: 22px;
  -webkit-transform: none;
  transform: none;
}
.tabbar .tabbar-fab svg { width: 26px; height: 26px; }

.tabbar { display: none; }

@media (max-width: 991px) {

  .tabbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid #e3e9f2;
    box-shadow: 0 -8px 30px -18px rgba(13, 27, 46, .55);
    padding-bottom: env(safe-area-inset-bottom);
    /* own compositing layer: keeps the bar from smearing while the hero slider
       animates, and keeps scrolling smooth on low-end phones */
    transform: translateZ(0);
    will-change: transform;
  }

  .tabbar-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 520px;
    margin: 0 auto;
  }

  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
    padding: 9px 2px 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: #6b7a99;
    text-decoration: none;
    text-align: center;
    transition: color .2s, transform .15s;
  }
  .tabbar-item:hover,
  .tabbar-item:focus { color: #F5325C; text-decoration: none; }
  .tabbar-item:active { transform: scale(.92); }
  .tabbar-item.active { color: #F5325C; }

  .tabbar-item svg { flex: none; }

  /* the tap registered, the drawer script just is not up yet (see the inline
     script in partials/dashboard_tabbar.html) */
  .tabbar-item.is-waiting { opacity: .45; }

  /* centre WhatsApp button, lifted out of the bar */
  .tabbar-wa { color: #1f8f4d; }
  .tabbar-fab {
    position: relative;
    margin-top: -26px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: #25D366;
    box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .9);
  }
  .tabbar-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: waRipple 2.4s ease-out infinite;   /* keyframes: makeidbd_enhanced.css */
    pointer-events: none;
  }

  /* keep the page clear of the bar */
  body { padding-bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); }

  /* the float button and the tab bar would otherwise stack on top of each other */
  .whatsapp-float { display: none !important; }

  /* lift the back-to-top button above the bar */
  #return-to-top { bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom)) !important; }
}

/* installed app: the tab bar is the main navigation, so give it a little more room */
html.standalone .tabbar-item { padding-bottom: 9px; }


/* ── Dashboard variant ────────────────────────────────────────────────────
   Same bar, used inside the Metronic admin layout. Two differences matter:
   the theme's drawer sits at z-index 110 with its overlay at 109, so this must
   stay UNDER them or the open sidebar would appear behind the bar; and the
   centre action is a brand-coloured "create ID card" button rather than
   WhatsApp. */
@media (max-width: 991px) {
  .tabbar--dashboard {
    z-index: 98;
    background: rgba(255, 255, 255, .97);
  }
  .tabbar--dashboard .tabbar-item {
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
  }
  .tabbar-fab--brand {
    background: linear-gradient(135deg, #F5325C 0%, #FF3131 130%);
    box-shadow: 0 12px 28px -8px rgba(245, 50, 92, .85);
  }
  .tabbar-fab--brand::before { border-color: #F5325C; }
  .tabbar--dashboard .tabbar-action { color: #F5325C; }

  /* keep the admin footer and any sticky toolbar clear of the bar */
  .app-footer,
  #kt_app_footer { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

/* the dashboard layout scrolls an inner wrapper, so padding on body is not
   enough on every page */
@media (max-width: 991px) {
  .app-wrapper,
  #kt_app_main { padding-bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom)); }
}


/* ── select2: keep the hidden native <select> hidden ──────────────────────
   select2 hides the real <select> with
       .select2-hidden-accessible { position:absolute; width:1px !important; ... }
   but six dashboard templates put Bootstrap's `w-100` on that same element, and
   `.w-100 { width:100% !important }` has the SAME specificity (0,1,0) as
   select2's rule, so source order decided it and the hidden select stayed full
   width. Being absolutely positioned, it then stuck out past the card and gave
   every one of those pages a horizontal scrollbar (measured: scrollWidth 524 vs
   clientWidth 518 on a 540px phone).

   `select.select2-hidden-accessible` is (0,1,1) - an element plus a class - so
   it wins on specificity rather than on load order. */
select.select2-hidden-accessible {
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}


/* ═══ Phone action toolbars — one size for every button in a row ═════════
   Problem: the dashboard toolbars are content-sized flex rows, so on a phone
   each button was as wide as its own label. Measured at 540px on
   /id_card/student_id_data/: Search 65x32, Generate Barcode 125x32, Front
   54x32, PDF 69x49, PNG (ZIP) 100x49, Illustrator Help 125x49 - six different
   sizes on one screen, and "Illustrator Help" wrapped inside its own button so
   that row was visibly taller than its neighbours.

   Fix: below the theme's own lg drawer breakpoint each toolbar becomes ONE
   6-column grid. 6 divides by 2 and by 3, so a 3-up row and a 2-up row keep
   identical column edges. Grid items stay align-self:stretch on purpose -
   that is what makes a button whose label wraps to two lines the same HEIGHT
   as its neighbours instead of towering over them. Do not add
   align-self:center here; it brings the ragged-height bug straight back.

   Why a hook class and not a structural selector: this file is also loaded by
   the PUBLIC site (site_base.html), where templates/index.html has real
   .card-body blocks containing real .btn elements, and the dashboard reuses
   #btn_portrait / #btn_landscape on BOTH card_editor.html and the two
   settings upload pages. Anything keyed off .card-body, .btn or those ids
   restyles pages nobody asked us to touch. `.idp-btnrow` is opt-in: it exists
   only on the rows listed in the templates, so there is nothing to collide
   with. It also needs no :has(), so old engines get the same layout.

   `screen` keeps this out of the print path - student_card.html sets
   @page { size: 2.15in }, and a 206px print page would otherwise match. */
@media screen and (max-width: 991.98px) {

  .idp-btnrow {
    display: grid !important;              /* .d-flex is display:flex !important */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .5rem !important;                 /* beats .gap-2 / .gap-3 */
    width: 100%;
    flex: 1 0 100%;                        /* claim the whole line inside a
                                              justify-content-between card-body */
    margin: 0 0 .5rem !important;          /* beats .mb-3 / .my-1 */
    align-items: stretch;
  }

  /* captions - "Print:", "Orientation:", "Zoom:" - and the #pdf-status /
     #save-status placeholders each take their own line, so no non-button ever
     steals width from a button row */
  .idp-btnrow > span {
    grid-column: 1 / -1;
    margin: 0 !important;                  /* beats .me-1 */
    font-size: 12px;                       /* .8rem would be 9.6px here - see
                                              the rem-base note further down */
    align-self: center;
  }
  .idp-btnrow > span:empty { display: none; }

  /* Metronic wraps single controls in a bare <div>; two per line by default */
  .idp-btnrow > div { grid-column: span 3; min-width: 0; margin: 0 !important; }

  /* bare buttons sit three per line, so the print row reads
     Front | Back | Both  /  PDF | PNG (ZIP) | Illustrator Help */
  .idp-btnrow > .btn { grid-column: span 2; }

  /* row modifiers, set in the template where the button count is known */
  .idp-btnrow--2up > .btn { grid-column: span 3; }
  .idp-btnrow--1up > .btn { grid-column: 1 / -1; }
  .idp-btnrow > .idp-btnrow-full,
  .idp-btnrow > .idp-btnrow-full.btn { grid-column: 1 / -1; }

  .idp-btnrow .btn {
    display: flex;                         /* .btn is inline-block */
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: 100% !important;                /* beats .w-100 and .w-md-auto, which
                                              is live from 768px to 991.98px */
    min-width: 0;
    min-height: 44px;                      /* comfortable touch target */
    margin: 0 !important;                  /* beats .ms-1 / .ms-3 */
    padding: .35rem .5rem !important;      /* beats btn-sm and .px-10 */
    font-size: 13px;                       /* .85rem would be 10.2px here */
    line-height: 1.15;
    text-align: center;
    white-space: normal;                   /* let a long label wrap instead of
                                              widening its own track */
    overflow-wrap: anywhere;
  }

  /* .btn > i already carries padding-right:.35rem, which would double the gap */
  .idp-btnrow .btn > i {
    font-size: 1rem !important;            /* beats .fs-4 (1.25rem !important) */
    padding-right: 0;
    flex: none;
  }

  /* select2 stamps an inline px width on its container; the native <select>
     stays clamped to 1px by the block above - never widen .form-select here */
  .idp-btnrow .select2-container { width: 100% !important; }
  .idp-btnrow .select2-selection,
  .idp-btnrow .form-control { min-height: 44px; }
  .idp-btnrow .select2-selection {
    display: flex;
    align-items: center;
  }
  .idp-btnrow .select2-selection__rendered {
    flex: 1 1 auto;                        /* keep text-overflow:ellipsis alive
                                              now that the parent is a flex box */
    min-width: 0;
  }
}


/* ═══ Page toolbar on phones — title, breadcrumb, page actions ═══════════
   #kt_app_toolbar_container (partials/base.html:89) is .d-flex.flex-stack:
   space-between, align-items:center, and NO wrap (style.bundle.css:41786).
   So the page heading and the two action buttons fought over one line and
   each button label broke in half - "Add / Teacher", "Add / Student" - which
   is the first thing a phone user sees on every dashboard page.

   Stack them: heading on its own line, actions full width beneath as an even
   pair (they carry .idp-btnrow--2up, added in actions/action.html).
   flex-wrap has to be turned on here or .idp-btnrow's `flex: 1 0 100%` cannot
   wrap and simply overflows - flex-shrink is 0 in that shorthand.

   Every hook below is dashboard-only. Verified: #kt_app_toolbar_container,
   .page-title, .page-heading and .breadcrumb appear in none of site_base.html,
   index.html, sample_gallery.html or blank_page.html. */
@media screen and (max-width: 991.98px) {
  #kt_app_toolbar_container {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  #kt_app_toolbar_container > .page-title {
    flex: 1 0 100%;
    margin-right: 0 !important;          /* beats .me-3 on partials/title.html:2 */
  }
  #kt_app_toolbar_container .page-heading {
    font-size: 20px;                     /* a page title, at a size a phone
                                            actually reads as one */
    line-height: 1.35;
  }
  /* An app does not show a breadcrumb trail. "Home > Create Student ID"
     repeats the heading and the bottom tab bar, and costs ~24px on every
     page. Desktop keeps it. */
  #kt_app_toolbar_container .breadcrumb { display: none; }
}


/* ═══ Back chevron (partials/title.html) ════════════════════════════════
   Desktop keeps the breadcrumb and has no need for it; phones hide the
   breadcrumb (block above) and would otherwise have no way up except the
   drawer. Hidden by default so it can never appear on the public site, which
   loads this file too and has no .idp-back anywhere. */
.idp-back { display: none; }

@media screen and (max-width: 991.98px) {
  .idp-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: -12px;          /* sit on the page gutter, like a nav bar */
    margin-right: 2px;
    border-radius: 50%;
    color: var(--bs-gray-800, #252f4a);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .idp-back:hover, .idp-back:focus-visible { color: var(--bs-primary, #1b84ff); }
  .idp-back:active { background: rgba(0, 0, 0, .06); }

  /* master.css only ships on the public site today, but its global
     `svg { position:absolute; ... }` would throw this icon out of its box if
     it ever landed here - the same trap the tab bar guards against above. */
  .idp-back svg {
    position: static;
    left: auto;
    top: auto;
    width: 23px;
    height: 23px;
    -webkit-transform: none;
    transform: none;
  }

  /* ── pagination ──────────────────────────────────────────────────────
     idcard/views.py:page_window() now sends first / last / current ± 2 with
     a "…" for the gaps, so this is a short strip rather than 40 numbers -
     but each pill still has to be thumb-sized. */
  .pagination { gap: 4px; row-gap: 6px; justify-content: center; width: 100%; }
  .pagination .page-link {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pagination .page-item.disabled .page-link { background: transparent; border: 0; }
}


/* ═══ Sidebar: keep the Logout button on screen ═════════════════════════
   Metronic's .flex-column-fluid is `flex: 1 0 auto` - grow yes, shrink NO -
   and a flex item's default min-height:auto refuses to go below its content
   anyway. So whenever the menu block is taller than the gap between the logo
   and the footer, the menu keeps its full height and shoves the footer past
   the bottom of the sidebar. Measured on /dashboard/: the Logout button sat
   at 845..885 in an 860px viewport and 745..785 in a 760px one - 25px below
   the fold at BOTH, because the overflow is the scroll block's own `my-5`
   margins (40px), not the window height. It was cut off on every screen.

   Rather than trusting KTScroll's height arithmetic (it writes an inline px
   height that does not account for those margins), let flex do it: every box
   between the sidebar and the scroller may shrink, and the scroller takes
   whatever is left. It has its own scrollbar, so no menu item is lost.

   #kt_app_sidebar lives only in partials/sidebar.html - it appears in none of
   the templates that extend site_base.html, which loads this file too. */
#kt_app_sidebar .app-sidebar-menu {
  flex-shrink: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#kt_app_sidebar #kt_app_sidebar_menu_wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#kt_app_sidebar #kt_app_sidebar_menu_scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;      /* both written inline by KTScroll */
  max-height: none !important;
  overflow-y: auto;
}


/* ═══ Phone legibility and touch targets across the dashboard ════════════
   Metronic sets `body, html { font-size: 12px !important }` below 992px
   (style.bundle.css:43353) - a rem base chosen for the theme's own layout
   maths, not for reading. Everything authored in rem therefore lands ~8%
   under its desktop pixel size, and anything written at .8-.85rem arrives at
   9.6-10.2px. Audited across all 31 dashboard pages at 390px: 451 elements
   at 9.8px, 155 at 11px, 6 at 7.2px.

   Raising the root itself would scale every padding and card with it and put
   the currently overflow-free layout at risk, so the sizes people actually
   READ are set here in px instead, and layout rems are left alone.

   #kt_app_content is dashboard-only: it appears in none of site_base.html,
   index.html, sample_gallery.html or blank_page.html, which also load this
   file. */
@media screen and (max-width: 991.98px) {

  /* A bare <input type="checkbox|radio"> renders at 13x13 - the settings and
     upload pages are full of them, one per field row. `:not([class])` picks
     out exactly those: anything the theme has styled keeps its own size. */
  #kt_app_content input[type="checkbox"]:not([class]),
  #kt_app_content input[type="radio"]:not([class]) {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
    accent-color: var(--bs-primary, #1b84ff);
  }
  /* and give the row itself enough height to aim at */
  #kt_app_content td:has(> input[type="checkbox"]:not([class])),
  #kt_app_content td:has(> input[type="radio"]:not([class])) {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* per-row controls in the settings tables: 30px selects and 32px buttons */
  #kt_app_content .form-select-sm,
  #kt_app_content .form-control-sm {
    min-height: 38px;
    font-size: 13px;
  }
  #kt_app_content .btn-sm { font-size: 13px; }

  /* helper lines under fields: .form-text is .85rem = 10.2px here */
  #kt_app_content .form-text { font-size: 12px; }
}


/* ═══ .idp-tap — make a whole cell the target for its control ════════════
   Used by the field tables on settings/student_id_upload.html and
   employee_id_upload.html, where a bare 13px checkbox or radio was the only
   thing you could hit and the field name beside it was inert. A <label> that
   fills its cell turns the row into the target, on desktop as well as phone,
   so this deliberately sits outside the media query. */
.idp-tap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.idp-tap--center { justify-content: center; }
.idp-tap input { flex: none; cursor: pointer; }


/* ═══ Remaining phone touch targets ═════════════════════════════════════
   Measured across all 31 dashboard pages at 390px. Everything here is a
   control someone taps, sized by the theme for a mouse. */
@media screen and (max-width: 991.98px) {
  /* a .idp-tap row was 32px: 20px control + 6px padding each side */
  .idp-tap { padding: 10px 0; }

  /* btn-sm lands at 35px and btn-xs at 22px once the 12px rem base applies */
  #kt_app_content .btn-sm { min-height: 40px; }
  #kt_app_content .btn-xs { min-height: 40px; font-size: 12px; }

  /* a still-unstyled <input> renders 24px tall - raw {{ form.field }} output
     anywhere in the dashboard, not just the pages audited today */
  #kt_app_content input[type="text"]:not([class]),
  #kt_app_content input[type="number"]:not([class]),
  #kt_app_content input[type="email"]:not([class]),
  #kt_app_content input[type="tel"]:not([class]),
  #kt_app_content input[type="url"]:not([class]),
  #kt_app_content input[type="password"]:not([class]),
  #kt_app_content input[type="date"]:not([class]),
  #kt_app_content textarea:not([class]) {
    min-height: 42px;
    font-size: 16px;            /* below 16px iOS zooms the page in on focus */
    padding: 8px 10px;
    border: 1px solid var(--bs-gray-300, #dbdfe9);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
    color: inherit;
    /* An <input> with no width sizes itself from the `size` attribute, which
       defaults to 20 characters - so raising the font-size above made these
       WIDER and pushed institute_font_upload 33px off the screen. Fill the
       container instead of sizing from the text. */
    width: 100%;
    max-width: 100%;
  }
}


/* ═══ Per-person photo upload rows on a phone ═══════════════════════════
   settings/student_pic_upload.html and employee_pic_upload.html lay each
   person out as a four-column table: avatar + name, a Remove-BG button, the
   processed preview, and a file input. Four columns inside 390px leaves the
   file input a sliver, so below 768px each row becomes a block instead - the
   person on top, the controls under them, full width.

   The header row is four empty <th>s, so hiding it loses nothing. */
@media screen and (max-width: 767.98px) {
  .idp-uploadtable thead { display: none; }

  .idp-uploadtable tbody tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--bs-gray-200, #f1f1f4);
  }
  .idp-uploadtable tbody tr:last-child { border-bottom: 0; }

  .idp-uploadtable tbody td {
    display: block;
    width: 100%;
    padding: 4px 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  /* the empty remove-bg preview cell would otherwise leave a gap */
  .idp-uploadtable tbody td:has(> span:empty) { display: none; }

  .idp-uploadtable img[height="150"] { height: 84px !important; width: auto; }
  .idp-uploadtable input[type="file"] { width: 100%; }

  /* the Remove-BG control is rotated 90deg, which on a phone turns a 162px
     wide button into a 162px TALL one. Put it back upright. */
  .idp-uploadtable .js-remove-bg-btn { transform: none !important; min-height: 40px; }
}


/* A .form-check row (radio/checkbox + its label) comes out 36px tall on a
   phone - just under a comfortable target, and these are the choices on the
   institute profile and the transfer screens. */
@media screen and (max-width: 991.98px) {
  #kt_app_content .form-check {
    min-height: 38px;
    display: flex;
    align-items: center;
  }
  #kt_app_content .form-check .form-check-label { padding: 8px 0; }
  #kt_app_content input[type="color"] { min-height: 40px; }
}