/* ============================================================
   Academy Chat — Brand design system
   Identity: white / black / red
   ============================================================ */
:root {
  --brand-red: #e10600;
  --brand-red-dark: #b00500;
  --brand-red-soft: #ffe9e8;
  --brand-black: #0d0d0d;
  --brand-ink: #1b1b1f;
  --brand-gray: #6b7280;
  --brand-line: #e7e9ee;
  --brand-surface: #ffffff;
  --brand-bg: #f5f6f8;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(13, 13, 13, .06), 0 1px 3px rgba(13, 13, 13, .05);
  --shadow: 0 6px 24px rgba(13, 13, 13, .08);
  --shadow-lg: 0 18px 50px rgba(13, 13, 13, .16);
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  font-family: "Segoe UI", "Tajawal", Tahoma, system-ui, sans-serif;
  background: var(--brand-bg);
  color: var(--brand-ink);
}

a { color: var(--brand-red); text-decoration: none; }
a:hover { color: var(--brand-red-dark); }

/* ---- Color overrides (map Bootstrap "primary" to brand red) ---- */
.bg-primary { background-color: var(--brand-black) !important; }
.text-primary { color: var(--brand-red) !important; }
.border-primary { border-color: var(--brand-red) !important; }

.btn-primary {
  --bs-btn-bg: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: var(--brand-red-dark);
  --bs-btn-hover-border-color: var(--brand-red-dark);
  --bs-btn-active-bg: var(--brand-red-dark);
  --bs-btn-active-border-color: var(--brand-red-dark);
  --bs-btn-disabled-bg: var(--brand-red);
  --bs-btn-disabled-border-color: var(--brand-red);
  box-shadow: 0 6px 16px rgba(225, 6, 0, .25);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: var(--brand-red);
  --bs-btn-hover-border-color: var(--brand-red);
  --bs-btn-active-bg: var(--brand-red);
}
.btn { border-radius: 999px; font-weight: 600; padding-inline: 1.1rem; }
.btn-sm { padding-inline: .8rem; }
.badge.bg-primary { background-color: var(--brand-red) !important; }

/* ---- Cards / surfaces ---- */
.card {
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.table { --bs-table-hover-bg: #fafbfc; }
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table-light th { color: var(--brand-gray); font-weight: 700; text-transform: none; }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; color: var(--brand-black); }

/* ---- Navbar ---- */
.navbar.bg-primary {
  background: linear-gradient(90deg, var(--brand-black), #232327) !important;
  border-bottom: 3px solid var(--brand-red);
}
.navbar-brand { letter-spacing: -.02em; }
.navbar-brand .fa-shield-halved { color: var(--brand-red); }
.navbar .nav-link {
  border-radius: 999px;
  padding: .35rem .85rem !important;
  margin-inline: .1rem;
  transition: background .15s, color .15s;
  color: rgba(255, 255, 255, .82) !important;
  font-weight: 600;
}
.navbar .nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff !important; }
.navbar .nav-link.active { background: var(--brand-red); color: #fff !important; }

/* ============================================================
   App-like navbar + offcanvas drawer + reload + loader
   ============================================================ */
.app-navbar { position: sticky; top: 0; z-index: 1030; padding-top: calc(.5rem + env(safe-area-inset-top)); }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  display: inline-grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 1rem;
  transition: background .15s, transform .1s;
}
.icon-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.icon-btn:active { transform: scale(.92); }
#reloadBtn.spin i { animation: ac-spin .6s linear infinite; }
.app-nav-inline { overflow-x: auto; max-width: 56vw; scrollbar-width: none; }
.app-nav-inline::-webkit-scrollbar { display: none; }
.app-nav-inline .nav-link { white-space: nowrap; }

/* Offcanvas drawer (mobile/tablet navigation) */
.app-drawer { background: linear-gradient(160deg, var(--brand-black), #232327); color: #fff; width: 290px; max-width: 86vw; }
.app-drawer .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.1); }
.app-drawer-user { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.app-drawer-nav { padding: .6rem; gap: .15rem; }
.app-drawer-nav .nav-link {
  color: rgba(255,255,255,.85) !important; border-radius: 12px;
  padding: .7rem .9rem !important; margin: 0; font-weight: 600; display: flex; align-items: center; gap: .2rem;
}
.app-drawer-nav .nav-link.active { background: var(--brand-red); color: #fff !important; }
.app-drawer-nav .nav-link:hover { background: rgba(255,255,255,.1); }
.app-drawer-nav .badge { margin-inline-start: auto; }

/* Tables inside flush cards scroll horizontally instead of overflowing the page on mobile */
.card-body.p-0 { overflow-x: auto; }
.import-card .card-body { overflow: visible; }

/* Full-screen loading overlay + circular spinner */
.app-loader {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.66); backdrop-filter: blur(2px);
}
.app-loader.show { display: flex; }
.app-spinner {
  width: 52px; height: 52px; border-radius: 50%;
  border: 4px solid var(--brand-red-soft); border-top-color: var(--brand-red);
  animation: ac-spin .7s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }
/* Small inline button spinner */
.btn .btn-spin { width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: ac-spin .6s linear infinite; vertical-align: -2px; }

/* ============================================================
   Chat — native-app style (mobile-first messaging UI)
   ============================================================ */
.chat-wrapper {
  height: calc(100vh - 150px);
  min-height: 480px;
  border-radius: var(--radius);
  border: 1px solid var(--brand-line);
  box-shadow: var(--shadow);
  background: #fff;
}

/* Avatars (initials) */
.avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: .95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  box-shadow: 0 2px 6px rgba(225,6,0,.25);
  text-transform: uppercase;
}
.avatar.avatar-sm { width: 34px; height: 34px; font-size: .8rem; }

/* Navbar profile + profile page avatars */
.nav-profile-btn { line-height: 0; border-radius: 50%; }
.nav-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.7); background: #fff;
}
.nav-avatar-initials {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff; font-weight: 800; font-size: .85rem; text-transform: uppercase;
}
.profile-avatar {
  width: 96px; height: 96px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff; font-weight: 800; font-size: 2rem; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(225,6,0,.3);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar.profile-avatar-sm { width: 56px; height: 56px; font-size: 1.1rem; box-shadow: none; }
.profile-avatar.profile-avatar-sm span { display: grid; place-items: center; width: 100%; height: 100%; }

/* Room list */
.room-list { overflow-y: auto; background: #fff; }
.room-list-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1rem; font-size: 1.05rem;
  border-bottom: 1px solid var(--brand-line);
  background: #fff; position: sticky; top: 0; z-index: 2;
}
.room-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem;
  cursor: pointer; transition: background .15s;
  border-bottom: 1px solid var(--brand-line);
  border-inline-start: 3px solid transparent;
}
.room-item:hover { background: #fafafa; }
.room-item.active { background: var(--brand-red-soft); border-inline-start-color: var(--brand-red); }
.room-meta { min-width: 0; flex: 1 1 auto; }
.room-title { font-weight: 700; color: var(--brand-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-sub { font-size: .8rem; color: var(--brand-gray); }
.room-item .unread {
  flex: 0 0 auto; min-width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 999px; font-size: .72rem;
}

/* Chat panel + app bar */
.chat-panel { height: 100%; min-width: 0; }
.chat-appbar {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--brand-line);
  background: #fff; min-height: 60px;
}
.chat-appbar #chatHeader { min-width: 0; }
.min-w-0 { min-width: 0; }
.chat-menu-btn { color: var(--brand-black); background: transparent; border: 0; font-size: 1.15rem; width: 38px; height: 38px; border-radius: 50%; }
.chat-menu-btn:hover { background: rgba(13,13,13,.06); }

.chat-messages {
  overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 1px 1px, rgba(13,13,13,.04) 1px, transparent 0) 0 0 / 22px 22px,
    #f3f4f6;
}

/* Message bubbles (WhatsApp-like tails) */
.msg-bubble {
  position: relative;
  max-width: 75%;
  padding: .5rem .7rem .35rem;
  border-radius: 14px;
  box-shadow: 0 1px 1px rgba(13,13,13,.08);
  word-break: break-word;
  font-size: .95rem;
  line-height: 1.45;
}
.msg-bubble.mine { background: #fff; border-top-right-radius: 4px; }
.msg-bubble.theirs { background: var(--brand-black); color: #fff; border-top-left-radius: 4px; }
.msg-sender { font-size: .78rem; font-weight: 800; color: var(--brand-red); margin-bottom: .15rem; }
.msg-bubble.theirs .msg-sender { color: #ff9b97; }
.msg-meta { font-size: .68rem; text-align: end; margin-top: .15rem; color: var(--brand-gray); }
.msg-bubble.theirs .msg-meta { color: rgba(255,255,255,.6); }
.msg-bubble.theirs a { color: #fff; text-decoration: underline; }

.unread { background: var(--brand-red) !important; }

/* Composer */
#sendForm { background: #fff; }
#sendForm .form-control { border-radius: 999px; background: #f3f4f6; border-color: transparent; }
#sendForm .btn-light { border-radius: 50%; width: 42px; height: 42px; padding: 0; }
#sendForm #sendBtn { border-radius: 50%; width: 46px; height: 46px; padding: 0; }

/* ---- Single pane + full-screen app feel on mobile ---- */
.chat-back-btn { display: none; background: transparent; border: 0; color: var(--brand-black); font-size: 1.1rem; }
@media (max-width: 767.98px) {
  /* When a chat is open, take over the whole screen like a native app */
  body:has(.chat-wrapper.show-chat) header { display: none; }
  body:has(.chat-wrapper) .container { padding-inline: 0; max-width: 100%; }
  body:has(.chat-wrapper) main.pb-3 { padding-bottom: 0 !important; }

  .chat-wrapper {
    height: auto; min-height: calc(100dvh - 70px); margin: 0;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .chat-wrapper.show-chat { height: 100dvh; min-height: 0; }
  .chat-wrapper .room-list,
  .chat-wrapper .chat-panel { flex: 0 0 100%; max-width: 100%; }
  .chat-wrapper .chat-panel { display: none !important; }
  .chat-wrapper.show-chat .room-list { display: none !important; }
  .chat-wrapper.show-chat .chat-panel { display: flex !important; }
  .chat-wrapper.show-chat .chat-back-btn { display: inline-flex !important; }

  /* App-bar in brand black, edge-to-edge with safe-area for notch */
  .chat-appbar {
    background: var(--brand-black); color: #fff;
    padding-top: calc(.6rem + env(safe-area-inset-top));
  }
  .chat-appbar #chatHeader { color: #fff; }
  .chat-back-btn { color: #fff; }
  .chat-appbar .chat-menu-btn { color: #fff; }
  .chat-appbar .chat-menu-btn:hover { background: rgba(255,255,255,.15); }

  .msg-bubble { max-width: 82%; }
  /* Composer pinned with safe-area inset for the home indicator */
  #sendForm { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
  .room-list-bar { padding-top: calc(.9rem + env(safe-area-inset-top)); }
}

/* ---- Stat / KPI cards ---- */
.kpi-card { border-radius: var(--radius); border: 1px solid var(--brand-line); background: #fff; transition: transform .15s, box-shadow .15s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ---- Auth screens ---- */
.auth-shell { min-height: calc(100vh - 130px); display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 420px; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: none; overflow: hidden; }
.auth-card .auth-head { background: var(--brand-black); color: #fff; padding: 1.6rem; border-bottom: 3px solid var(--brand-red); }
.academy-logo { max-height: 84px; max-width: 200px; object-fit: contain; border-radius: 10px; background: #fff; padding: 6px; }
.academy-logo-fallback {
  width: 84px; height: 84px; margin-inline: auto;
  display: grid; place-items: center; font-size: 2.2rem;
  background: var(--brand-red); color: #fff; border-radius: 18px; padding: 0;
}
.auth-footer { padding-bottom: 2rem; }
.portal-link-card { border: 1px solid var(--brand-line); border-inline-start: 4px solid var(--brand-red); background: var(--brand-red-soft); }
.announcement-card { border: 1px solid var(--brand-line); border-inline-start: 4px solid var(--brand-red); }
.whatsapp-banner-on { border: 1px solid #25d36633; border-inline-start: 4px solid #25d366; background: #25d3660d; }
.whatsapp-banner-off { border: 1px solid var(--brand-line); border-inline-start: 4px solid #adb5bd; }

/* Registration */
.reg-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-red); color: #fff; font-size: .8rem; margin-inline-end: .35rem; }
.reg-plan { position: relative; display: block; cursor: pointer; border: 2px solid var(--brand-line); border-radius: var(--radius-sm); padding: .8rem .6rem; text-align: center; transition: border-color .15s, background .15s; height: 100%; }
.reg-plan:hover { border-color: var(--brand-red); }
.btn-check:checked + .reg-plan { border-color: var(--brand-red); background: var(--brand-red-soft); }
.reg-plan-tag { position: absolute; top: -10px; inset-inline-start: 50%; transform: translateX(50%); font-size: .65rem; }

/* Payment page */
.pay-method { border: 1px solid var(--brand-line); border-inline-start: 4px solid var(--brand-red); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: .6rem; }
.pay-method .pm-acct { font-family: monospace; font-size: 1.05rem; font-weight: 700; }

/* Bulk import + teacher↔student linking */
.import-card { border: 1px solid #25d36633; border-inline-start: 4px solid #25d366; background: #25d3660d; }
.link-teacher-list { display: flex; flex-direction: column; gap: .4rem; max-height: 60vh; overflow-y: auto; }
.link-teacher { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--brand-line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.link-teacher:hover { border-color: var(--brand-red); }
.link-teacher input { margin: 0; }
.link-teacher:has(input:checked) { border-color: var(--brand-red); background: var(--brand-red-soft); }
.link-student-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; max-height: 56vh; overflow-y: auto; padding: 2px; }
.link-student { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 1px solid var(--brand-line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.link-student:hover { border-color: var(--brand-red); }
.link-student:has(input:checked) { border-color: var(--brand-red); background: var(--brand-red-soft); }
.link-student input { margin: 0; }
.link-student-meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.link-student-meta .fw-bold { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Floating platform support chat (academy admin) ---- */
.pcw { position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 1050; }
.pcw-fab {
  position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff; font-size: 1.4rem; box-shadow: 0 6px 18px rgba(225,6,0,.4); cursor: pointer;
  transition: transform .15s;
}
.pcw-fab:hover { transform: scale(1.06); }
.pcw-badge {
  position: absolute; top: -4px; inset-inline-end: -4px; min-width: 22px; height: 22px;
  background: #0d0d0d; color: #fff; border: 2px solid #fff; border-radius: 999px;
  font-size: .72rem; display: grid; place-items: center; padding: 0 5px;
}
.pcw-panel {
  position: absolute; inset-inline-start: 0; bottom: 70px;
  width: min(360px, calc(100vw - 40px)); height: 460px; max-height: calc(100vh - 120px);
  background: #fff; border: 1px solid var(--brand-line); border-radius: 16px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.pcw-head { background: var(--brand-black); color: #fff; padding: .7rem 1rem; display: flex; justify-content: space-between; align-items: center; font-weight: 700; border-bottom: 3px solid var(--brand-red); }
.pcw-body { flex: 1 1 auto; overflow-y: auto; padding: .8rem; background: #f3f4f6; display: flex; flex-direction: column; gap: .4rem; }
.pcw-empty { margin: auto; text-align: center; color: #888; font-size: .9rem; padding: 1rem; }
.pcw-row { display: flex; }
.pcw-row.me { justify-content: flex-start; }
.pcw-row.them { justify-content: flex-end; }
.pcw-bubble { max-width: 82%; padding: .45rem .65rem; border-radius: 12px; font-size: .9rem; box-shadow: 0 1px 1px rgba(13,13,13,.08); }
.pcw-row.me .pcw-bubble { background: #fff; border-top-right-radius: 4px; }
.pcw-row.them .pcw-bubble { background: var(--brand-black); color: #fff; border-top-left-radius: 4px; }
.pcw-sender { font-size: .72rem; font-weight: 800; color: #ff9b97; margin-bottom: .1rem; }
.pcw-time { font-size: .65rem; opacity: .65; text-align: end; margin-top: .15rem; }
.pcw-foot { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--brand-line); background: #fff; }
#scwList { padding: 0; background: #fff; gap: 0; }
.scw-room { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; background: #fff; border-bottom: 1px solid var(--brand-line); padding: .7rem .9rem; text-align: start; }
.scw-room:hover { background: #f3f4f6; }

/* ---- Guidelines / contact panels ---- */
.guideline-item { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; font-size: .92rem; }
.guideline-item i { color: var(--brand-red); margin-top: .2rem; }
.contact-card { display: flex; gap: .6rem; align-items: center; border: 1px solid var(--brand-line); border-radius: var(--radius-sm); padding: .55rem .75rem; margin-bottom: .5rem; color: var(--brand-black); transition: background .15s, border-color .15s; }
a.contact-card:hover { background: var(--brand-red-soft); border-color: var(--brand-red); color: var(--brand-black); }
.contact-card i { width: 20px; text-align: center; font-size: 1.1rem; }
.contact-card span { color: #777; font-size: .85rem; min-width: 110px; }
.contact-card b { margin-inline-start: auto; }

/* ============================================================
   Public landing page
   ============================================================ */
.lp { color: var(--brand-ink); }
.lp-nav { background: rgba(13,13,13,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); }
.lp-nav .navbar-brand, .lp-nav .nav-link { color: #fff !important; }
.lp-nav .fa-shield-halved { color: var(--brand-red); }

.lp-hero {
  position: relative;
  background: radial-gradient(1200px 500px at 80% -10%, rgba(225,6,0,.35), transparent 60%), var(--brand-black);
  color: #fff;
  overflow: hidden;
}
.lp-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: linear-gradient(180deg, #000, transparent);
}
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.1; }
.lp-pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: .4rem .9rem; border-radius: 999px; font-weight: 600; font-size: .85rem; }
.lp-hero .text-red { color: #ff5b54; }

.lp-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.feature-card { height: 100%; background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius); padding: 1.6rem; transition: transform .18s, box-shadow .18s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-red-soft); color: var(--brand-red); font-size: 1.4rem; margin-bottom: 1rem; }

.price-card { height: 100%; border: 1px solid var(--brand-line); border-radius: var(--radius); background: #fff; padding: 2rem; }
.price-card.featured { border: 2px solid var(--brand-red); box-shadow: var(--shadow-lg); position: relative; }
.price-card.featured::before { content: "الأكثر طلباً"; position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(50%); background: var(--brand-red); color: #fff; font-size: .75rem; font-weight: 700; padding: .25rem .8rem; border-radius: 999px; }
.price-amount { font-size: 2.5rem; font-weight: 800; color: var(--brand-black); }

.lp-footer { background: var(--brand-black); color: rgba(255,255,255,.7); }
.lp-footer a { color: rgba(255,255,255,.7); }
.lp-footer a:hover { color: #fff; }