/* =====================================================
   NextGEN TVETMARA v10 - Mobile / Responsive UI Fix
   Fokus: header smartphone, action buttons, dashboard cards,
   admin/counselor panels, bottom navigation, favicon cache.
   ===================================================== */

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }

/* Small tablets and phones */
@media (max-width: 768px) {
  body.has-footer { padding-bottom: 86px; }

  #navigation {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: .65rem .75rem !important;
  }

  #navigation .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .45rem .65rem;
    align-items: center !important;
  }

  /* Logo + title group */
  #navigation .container > .flex.items-center.space-x-3 {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: .45rem !important;
    align-items: center;
  }

  #hamburgerBtn {
    margin-right: 0 !important;
    padding: .45rem !important;
    min-width: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #navigation img[src*="nextgen"] {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    flex: 0 0 auto;
  }

  #navigation h1 {
    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* Welcome + logout area */
  #navigation .container > .flex.flex-col.items-end.gap-1 {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: .2rem .5rem !important;
    text-align: left !important;
  }

  #navigation .container > .flex.flex-col.items-end.gap-1 > .text-sm {
    grid-column: 1;
    font-size: .75rem !important;
    line-height: 1.1 !important;
    opacity: .95;
    text-align: left !important;
  }

  #headerRegName {
    grid-column: 1;
    max-width: 100% !important;
    font-size: .95rem !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  #logoutBtn {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0 !important;
    padding: .48rem .8rem !important;
    font-size: .85rem !important;
    border-radius: .55rem !important;
    align-self: center;
  }

  /* Admin/Counselor quick action buttons become swipeable chips */
  #roleButtons,
  #counselorQuickButtons {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    margin: .35rem 0 0 0 !important;
    padding: .1rem .05rem .25rem .05rem;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: .45rem !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #roleButtons button,
  #counselorQuickButtons button {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 38px;
    padding: .5rem .7rem !important;
    font-size: .85rem !important;
    line-height: 1.1 !important;
    border-radius: .55rem !important;
  }

  .container.mx-auto.p-4,
  body > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: .85rem !important;
  }

  .screen h2,
  #dashboard h2,
  #profile h2,
  #learning h2,
  #passport h2 {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    line-height: 1.12 !important;
  }

  #cover .max-w-md {
    margin-top: 2.2rem !important;
    padding: 1.35rem !important;
    width: min(100%, 420px) !important;
  }

  #cover h2 .text-3xl {
    font-size: 1.7rem !important;
  }

  /* Main cards */
  .bg-white.rounded-lg.shadow-lg.p-8,
  .bg-white.rounded-lg.shadow-lg.p-6 {
    padding: 1rem !important;
  }

  .grid,
  .md\:grid-cols-2,
  .md\:grid-cols-3,
  .md\:grid-cols-4,
  .lg\:grid-cols-2,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4 {
    min-width: 0;
  }

  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  input, select, textarea, button {
    font-size: 16px !important; /* elak auto zoom iOS */
  }

  #profilePictureDisplay {
    width: 112px !important;
    height: 112px !important;
  }

  /* Dashboard profile card */
  #dashboard .rounded-lg,
  #dashboard .rounded-xl,
  #dashboard .rounded-2xl {
    max-width: 100%;
  }

  /* Admin/counselor panels */
  #adminPanel,
  #counselorPanel {
    padding-bottom: 1rem;
  }

  #adminPanel .flex,
  #counselorPanel .flex {
    flex-wrap: wrap;
  }

  #adminPanel .admin-tab,
  #counselorPanel button,
  #adminPanel button {
    font-size: .88rem !important;
  }

  #adminPanel table,
  #counselorPanel table {
    font-size: .78rem !important;
  }

  #adminPanel .overflow-auto,
  #counselorPanel .overflow-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Passport compact mode */
  #passport .grid,
  #passport .flex {
    max-width: 100%;
  }

  #passportPhoto,
  .passport-photo,
  #passportProfilePhoto {
    width: 84px !important;
    height: 84px !important;
  }

  /* Footer nav */
  #footerNav {
    z-index: 70;
  }

  #footerNav .mx-auto {
    max-width: 100% !important;
  }

  #footerNav .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #footerNav button {
    min-width: 0;
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
  }

  #footerNav svg {
    width: 1.35rem !important;
    height: 1.35rem !important;
    margin-bottom: .15rem !important;
  }

  #footerNav span {
    font-size: .68rem !important;
    line-height: 1.05 !important;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* CV preview: allow horizontal scroll instead of breaking phone screen */
  .cv-modal .cv-dialog {
    inset: 2% 2% !important;
  }

  #cvFrame,
  #cvPreview,
  #cv-root {
    max-width: 100%;
  }
}

/* Extra small phones */
@media (max-width: 420px) {
  #navigation h1 {
    font-size: 1.55rem !important;
  }

  #navigation img[src*="nextgen"] {
    width: 38px !important;
    height: 38px !important;
  }

  #roleButtons button,
  #counselorQuickButtons button {
    font-size: .78rem !important;
    padding: .45rem .6rem !important;
  }

  #logoutBtn {
    font-size: .78rem !important;
    padding: .42rem .65rem !important;
  }
}


/* =====================================================
   v11 - Top navigation action row alignment fix
   Counselor-only accounts now use the same right-side row
   as Admin accounts: [Admin] [CV Builder] [Passport] [Counselor]
   followed by Logout underneath.
   ===================================================== */
#navigation .container > .flex.flex-col.items-end.gap-1 {
  align-items: flex-end !important;
}

#roleButtons {
  width: auto;
  max-width: min(100%, 720px);
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: .6rem !important;
  margin-top: .55rem !important;
}

#roleButtons button,
#counselorQuickCvBtn,
#counselorQuickPassportBtn {
  min-height: 42px;
  padding: .55rem .95rem !important;
  border-radius: .55rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

/* If a cached older JS still creates this wrapper, keep it aligned right. */
#counselorQuickButtons {
  width: auto;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: .6rem !important;
  margin-top: .55rem !important;
}

@media (min-width: 769px) {
  #navigation .container {
    gap: 1.25rem;
  }

  #navigation .container > .flex.flex-col.items-end.gap-1 {
    min-width: 360px;
  }

  #logoutBtn {
    margin-top: .4rem !important;
  }
}