/* =========================================================
   Business Academy — mobile app shell.

   Extends theme.css; introduces no new colours or typefaces.
   Phone-first: the bottom tab bar and compact app bar exist below 768px only, so the
   desktop layout is untouched.
   ========================================================= */

:root {
  /* Height of the fixed tab bar, plus the iOS home-bar inset underneath it. */
  --ba-tabbar-h: 4.25rem;
  --ba-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ba-tap: 2.75rem; /* 44px — the smallest comfortable touch target */
}

/* ---------- installed-app chrome ---------- */

/* Standalone has no browser UI, so the page itself owns the status-bar gutter. */
@media all and (display-mode: standalone) {
  .nabd-navbar,
  .ba-appbar {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Pull-to-refresh and rubber-banding feel wrong in an installed app. */
  html {
    overscroll-behavior-y: contain;
  }
}

/* ---------- install button ---------- */

.ba-install {
  min-height: var(--ba-tap);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-inline: 0.85rem;
  border: 1px solid var(--nabd-secondary);
  border-radius: var(--nabd-radius);
  background: transparent;
  color: var(--nabd-secondary);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.ba-install:hover {
  background: rgba(var(--nabd-secondary-rgb), 0.08);
}

/* ---------- bottom tab bar ---------- */

.ba-tabbar {
  display: none;
}

@media (max-width: 767.98px) {
  .ba-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    background: var(--nabd-surface);
    border-top: 1px solid var(--nabd-line);
    /* Sits above the iOS home bar instead of behind it. */
    padding-bottom: var(--ba-safe-bottom);
    box-shadow: 0 -8px 24px -18px rgba(15, 23, 42, 0.35);
  }

  .ba-tabbar__item {
    position: relative;
    min-height: var(--ba-tabbar-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;

    padding: 0.5rem 0.25rem;
    color: var(--nabd-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    /* Stops the grey flash on tap in mobile Safari and Chrome. */
    -webkit-tap-highlight-color: transparent;
  }

  .ba-tabbar__item svg {
    width: 1.4rem;
    height: 1.4rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ba-tabbar__item:hover {
    color: var(--nabd-primary);
  }

  /* The active tab is carried by colour AND a top rule, so it reads without relying on hue. */
  .ba-tabbar__item.is-active {
    color: var(--nabd-primary);
    box-shadow: inset 0 3px 0 0 var(--nabd-secondary);
  }

  .ba-tabbar__item:focus-visible {
    outline: 3px solid var(--nabd-secondary);
    outline-offset: -3px;
  }

  /* A count of things waiting — unread lectures, new material. */
  .ba-tabbar__badge {
    position: absolute;
    top: 0.75rem;
    /* RTL-aware: sits toward the centre of the tab on either direction. */
    inset-inline-start: calc(50% + 0.3rem);
    min-width: 1.05rem;
    height: 1.05rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--nabd-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.05rem;
    text-align: center;
  }

  /* Give the page room so the bar never covers the last control. */
  body {
    padding-bottom: calc(var(--ba-tabbar-h) + var(--ba-safe-bottom));
  }

  .nabd-footer {
    margin-bottom: 0;
  }

  /* ---------- phone-sized typography and spacing ---------- */

  .nabd-portal-hero {
    padding: 1rem;
    border-radius: var(--nabd-radius);
  }

  .nabd-portal-hero h1 {
    font-size: 1.3rem;
  }

  .nabd-card {
    padding: 1rem;
    border-radius: var(--nabd-radius);
  }

  h1.h3 {
    font-size: 1.25rem;
  }

  /* Full-width primary actions are easier to hit with a thumb. */
  .nabd-card form > .btn-success,
  .nabd-card form > .btn-primary {
    width: 100%;
    min-height: var(--ba-tap);
  }

  .btn {
    min-height: var(--ba-tap);
  }

  .btn-sm {
    min-height: 2.25rem;
  }

  /* Native-sized controls stop iOS zooming the page on focus (needs >= 16px). */
  .form-control,
  .form-select {
    min-height: var(--ba-tap);
    font-size: 1rem;
  }

  /* Admin tables stay tables but scroll in their own box, never widening the page. */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- the figure row ----------
     Bootstrap's col-md-4 goes full width on a phone, so three figures become three
     screens of scrolling. Keep them as one row of three and shrink the parts to match. */

  .nabd-portal-hero .row > [class*="col-md-4"] {
    width: 33.3333%;
    flex: 0 0 33.3333%;
  }

  .nabd-stat-tile {
    padding: 0.75rem 0.4rem;
  }

  .nabd-stat-icon {
    width: 1.9rem;
    height: 1.9rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
  }

  .nabd-stat-value {
    font-size: 1.45rem;
  }

  .nabd-stat-label {
    font-size: 0.68rem;
  }

  .nabd-stat-sub {
    font-size: 0.62rem;
  }

  /* The trainee's pill row duplicates the bottom tab bar, so drop it on phones.
     Admin keeps its row (it has ten destinations the tab bar cannot hold) and scrolls below. */
  body.portal-student .d-flex.gap-3.mb-3.flex-wrap {
    display: none !important;
  }

  /* A name and an action fighting over 375px: stack them instead. */
  .list-group-item.d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.6rem;
  }

  .list-group-item.d-flex.justify-content-between .btn {
    width: 100%;
  }

  /* The admin nav is a long pill row; let it scroll sideways rather than stack 10 rows deep. */
  .d-flex.gap-3.mb-3.flex-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: none;
  }

  .d-flex.gap-3.mb-3.flex-wrap::-webkit-scrollbar {
    display: none;
  }

  .d-flex.gap-3.mb-3.flex-wrap > .btn {
    flex: 0 0 auto;
  }
}

/* ---------- live lecture card ---------- */

.ba-live {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* The one place a red is spent: a lecture that is actually running. */
.ba-live__now {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--nabd-error);
  font-weight: 800;
  font-size: 0.85rem;
}

.ba-live__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--nabd-error);
  animation: ba-pulse 1.8s ease-in-out infinite;
}

@keyframes ba-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .ba-live__dot {
    animation: none;
  }
}

/* Countdown digits: tabular so the text does not jitter every second. */
.ba-countdown {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--nabd-radius-sm);
  background: rgba(var(--nabd-accent-rgb), 0.12);
  color: var(--nabd-accent-600);
  font-weight: 800;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- material list ---------- */

.ba-material {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--nabd-line);
}

.ba-material:last-child {
  border-bottom: 0;
}

.ba-material__icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--nabd-radius-sm);
  background: var(--nabd-surface-2);
  font-size: 1.15rem;
}

.ba-material__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ba-material__title {
  font-weight: 700;
  /* Long Arabic file titles wrap instead of pushing the download button off screen. */
  overflow-wrap: anywhere;
}

.ba-material__meta {
  color: var(--nabd-muted);
  font-size: 0.8rem;
}

.ba-material__action {
  flex: 0 0 auto;
  min-height: var(--ba-tap);
  display: inline-flex;
  align-items: center;
}

/* =========================================================
   Month calendar — the lecturer's schedule.
   Seven columns on a desktop; on a phone it becomes a day list, because a 7-column
   grid at 375px gives each day about 50px and nothing readable fits in it.
   ========================================================= */

.ba-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.ba-cal__head {
  padding: 0.4rem 0.25rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--nabd-muted);
}

.ba-cal__cell {
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem;
  border: 1px solid var(--nabd-line);
  border-radius: var(--nabd-radius-sm);
  background: var(--nabd-surface);
  cursor: pointer;
}

.ba-cal__cell--empty {
  border-style: dashed;
  background: transparent;
  cursor: default;
}

.ba-cal__cell.is-today {
  border-color: var(--nabd-secondary);
  box-shadow: inset 0 0 0 1px var(--nabd-secondary);
}

/* Past days stay visible but recede — history, not a place to book into. */
.ba-cal__cell.is-past {
  background: var(--nabd-surface-2);
}

.ba-cal__day {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--nabd-primary);
  font-variant-numeric: tabular-nums;
}

.ba-cal__chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.25rem 0.4rem;
  border: 0;
  border-inline-start: 3px solid transparent;
  border-radius: 0.375rem;
  background: var(--nabd-surface-2);
  color: var(--nabd-text);
  font-family: inherit;
  font-size: 0.7rem;
  text-align: start;
  cursor: pointer;
}

.ba-cal__time {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ba-cal__label {
  /* Long Arabic titles must not widen the column. */
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status carried by the edge stripe, so it survives at chip size. */
.ba-cal__chip.is-ready     { border-inline-start-color: var(--nabd-secondary); }
.ba-cal__chip.is-nolink    { border-inline-start-color: var(--nabd-accent); }
.ba-cal__chip.is-done      { border-inline-start-color: var(--nabd-muted); opacity: 0.7; }
.ba-cal__chip.is-cancelled { border-inline-start-color: var(--nabd-error); text-decoration: line-through; opacity: 0.6; }

.ba-cal__chip:focus-visible {
  outline: 3px solid var(--nabd-secondary);
  outline-offset: 1px;
}

.ba-cal__key {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.2rem;
  vertical-align: -0.1rem;
}

.ba-cal__key.is-ready     { background: var(--nabd-secondary); }
.ba-cal__key.is-nolink    { background: var(--nabd-accent); }
.ba-cal__key.is-done      { background: var(--nabd-muted); }
.ba-cal__key.is-cancelled { background: var(--nabd-error); }

@media (max-width: 767.98px) {
  /* One column, and only the days that hold something — a phone-sized agenda. */
  .ba-cal {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .ba-cal__head {
    display: none;
  }

  .ba-cal__cell--empty {
    display: none;
  }

  .ba-cal__cell {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .ba-cal__day {
    flex: 0 0 2rem;
    font-size: 1rem;
  }

  .ba-cal__chip {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8rem;
    min-height: var(--ba-tap);
  }

  /* An empty day is just its number on a phone; keep it short. */
  .ba-cal__cell:not(:has(.ba-cal__chip)) {
    min-height: 2.5rem;
    opacity: 0.6;
  }
}

/* =========================================================
   Dark theme.

   An installed app sits on a phone that is dark half the day, so the tokens are redefined
   rather than the components — every component already reads its colour from a token, so
   this block is the whole change.

   Only prefers-color-scheme drives it: the app has no theme switch, so there is nothing to
   guard against. The navy brand stays the accent; the ground moves, not the identity.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --nabd-bg: #0B1220;
    --nabd-surface: #141C2E;
    --nabd-surface-2: #1D2739;
    --nabd-text: #E8EDF5;
    --nabd-muted: #97A3B6;
    --nabd-line: #26324A;

    /* Navy is the light theme's darkest ink; on a dark ground it disappears, so headings
       and the active tab take the lighter brand blue instead. */
    --nabd-primary: #93B4FF;
    --nabd-primary-rgb: 147, 180, 255;
    --nabd-primary-600: #6E97F5;

    /* Teal and amber are lifted enough to clear 4.5:1 on the new surfaces. */
    --nabd-secondary: #2DD4BF;
    --nabd-secondary-rgb: 45, 212, 191;
    --nabd-accent: #FBBF24;
    --nabd-accent-rgb: 251, 191, 36;
    --nabd-accent-600: #FCD34D;
    --nabd-error: #F87171;
    --nabd-success: #4ADE80;

    /* Shadows read as nothing on a dark ground; borders carry separation instead. */
    --nabd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --nabd-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.7);
    --nabd-shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.8);

    --nabd-gradient-deep: linear-gradient(135deg, #0E1730 0%, #16223C 55%, #1E2E52 100%);

    color-scheme: dark;
  }

  /* Bootstrap paints these from its own light palette, so they need the tokens. */
  .table {
    --bs-table-color: var(--nabd-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--nabd-line);
    --bs-table-striped-color: var(--nabd-text);
    --bs-table-hover-color: var(--nabd-text);
    --bs-table-hover-bg: var(--nabd-surface-2);
  }

  .form-control,
  .form-select {
    background-color: var(--nabd-surface-2);
    border-color: var(--nabd-line);
    color: var(--nabd-text);
  }

  .form-control::placeholder {
    color: var(--nabd-muted);
  }

  .form-control:focus,
  .form-select:focus {
    background-color: var(--nabd-surface-2);
    border-color: var(--nabd-secondary);
    color: var(--nabd-text);
  }

  .modal-content,
  .list-group-item {
    background-color: var(--nabd-surface);
    color: var(--nabd-text);
    border-color: var(--nabd-line);
  }

  .btn-close {
    /* The default close icon is a dark SVG; invert it or it vanishes. */
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  /* A light-tinted badge on a dark card is unreadable as-is. */
  .badge.text-bg-light {
    background-color: var(--nabd-surface-2) !important;
    color: var(--nabd-text) !important;
  }

  .alert-success { background-color: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.3); color: #BBF7D0; }
  .alert-danger  { background-color: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); color: #FECACA; }
  .alert-warning { background-color: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); color: #FDE68A; }
  .alert-info    { background-color: rgba(45, 212, 191, 0.12); border-color: rgba(45, 212, 191, 0.3); color: #99F6E4; }
}