/* ============================================================
   Shah Jalal Ideal Academy — Global Responsive Fixes
   মোবাইল ও পিসি উভয়ের জন্য উন্নত responsive behaviour
   ============================================================ */

/* ---------- Base safety ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}
iframe { display: block; }

/* Long words / links / IDs never break the layout */
p, li, td, th, div, span, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Any bare <table> becomes horizontally scrollable */
table { max-width: 100%; }
.rf-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}
.rf-scroll table { min-width: 520px; }

/* Modals / dialogs never wider than viewport */
.modal, .modal-box, .dialog, .popup, [role="dialog"] {
  max-width: 95vw !important;
  max-height: 92vh;
  overflow: auto;
}

/* Fluid containers */
.wrap, .container, .content-wrap {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* ---------- Touch friendly form controls ---------- */
input, select, textarea, button {
  font-size: 16px; /* prevents iOS zoom */
  max-width: 100%;
}
input, select, textarea {
  min-height: 40px;
}
button, .btn, .icon-btn {
  min-height: 40px;
}

/* ---------- Hamburger button (injected by JS for admin) ---------- */
.rf-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e4c8a, #0e2f5c);
  color: #ffffff;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px -6px rgba(14,47,92,.55), inset 0 1px 0 rgba(255,255,255,.15);
  cursor: pointer;
  margin-right: 10px;
  transition: transform .15s ease, box-shadow .18s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-hamburger:hover { background: linear-gradient(135deg, #2f6bb8, #1e4c8a); box-shadow: 0 8px 22px -8px rgba(14,47,92,.7); }
.rf-hamburger:active { transform: scale(.94); }
.rf-hamburger i, .rf-hamburger svg { color: #ffffff; font-size: 1.15rem; }
/* Fallback icon when Font Awesome isn't loaded */
.rf-hamburger:empty::before,
.rf-hamburger.rf-fallback::before {
  content: "";
  width: 20px; height: 14px;
  background:
    linear-gradient(#fff,#fff) top/100% 2.5px no-repeat,
    linear-gradient(#fff,#fff) center/100% 2.5px no-repeat,
    linear-gradient(#fff,#fff) bottom/100% 2.5px no-repeat;
  border-radius: 2px;
}
.rf-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 998;
  display: none;
}
.rf-backdrop.show { display: block; }

/* ---------- Admin panel specific mobile fixes ---------- */
@media (max-width: 980px) {
  #app { grid-template-columns: 1fr !important; }
  #app > .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 260px !important;
    max-width: 80vw;
    height: 100vh !important;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform .25s ease;
    display: block !important;
    flex-wrap: nowrap !important;
    overflow-y: auto !important;
    box-shadow: 8px 0 22px rgba(0,0,0,.25);
  }
  #app > .sidebar.rf-open { transform: translateX(0); }
  .rf-hamburger { display: inline-flex; }
  .topbar, .header, .page-header, .main-head {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ---------- Global small-screen tweaks ---------- */
@media (max-width: 768px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .row-2, .row-3 { grid-template-columns: 1fr !important; }
  .info-grid, .action-grid { grid-template-columns: 1fr !important; }
  .card, .stat, .page-head { padding: 14px !important; }
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; }
  .hero h1 { font-size: 1.7rem !important; line-height: 1.25; }
  .hero p { font-size: .95rem !important; }
  .wrap, .container { padding-left: 14px !important; padding-right: 14px !important; }
  .ph-actions, .actions { flex-wrap: wrap; }
  .btn { padding: 9px 12px !important; font-size: .82rem !important; }
}

@media (max-width: 520px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .topbar .brand .txt small { display: none; }
  .topbar .logout-btn span,
  .topbar .avatar + span { display: none; }
  .page-head .ph-actions { width: 100%; }
  .page-head .ph-actions .btn { flex: 1; justify-content: center; }
  input, select, textarea { font-size: 16px; }
  .modal, .modal-box, .dialog { padding: 14px !important; border-radius: 12px !important; }
}

/* ---------- Print ---------- */
@media print {
  .rf-hamburger, .rf-backdrop, .sidebar, .topbar { display: none !important; }
  body { overflow: visible; }
}

/* ---------- Admin panel table & filter mobile polish ---------- */
@media (max-width: 768px) {
  /* Compact horizontally-scrolled tables get sticky first column and clear hint */
  .rf-scroll { position: relative; }
  .rf-scroll::after {
    content: "→ স্লাইড";
    position: absolute; top: 4px; right: 6px;
    font-size: 10px; color: #64748b;
    background: rgba(255,255,255,.85);
    padding: 2px 6px; border-radius: 10px;
    pointer-events: none;
  }
  .rf-scroll table { min-width: 640px; }
  .rf-scroll th, .rf-scroll td {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
  /* Any admin filter row inside admin-panel becomes a 2-col grid */
  #app .filter-row, #app .filters, #app .search-row {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    gap: 8px !important;
  }
  #app .filter-row input, #app .filters input,
  #app .filter-row select, #app .filters select,
  #app .search-box input {
    min-height: 40px;
    font-size: 14px;
  }
  #app .search-box { max-width: none !important; width: 100% !important; }
}

/* =========================================================
   Text Legibility Boost — universal
   ========================================================= */
:root { --rf-text: #0f172a; --rf-muted: #475569; }

body, .card, .modal-box, .ct-modal-box, .stat, .page-head {
  color: var(--rf-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fix low-contrast greys used across the app (scoped to light surfaces) */
.card .muted, .card small, .card .sub, .card .hint, .card .note, .card .meta,
.modal .muted, .modal small, .modal-box small,
.ct-modal-box .muted, .ct-modal-box small {
  color: var(--rf-muted) !important;
}

/* Base line-height & sizing */
body { line-height: 1.55; font-size: 15px; }
p, li, td, th, label, .row, .value, .ct-card .row { line-height: 1.55; }

/* Headings inside light content surfaces only — never on dark sidebar/topbar */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.modal h1, .modal h2, .modal h3, .modal h4,
.page-head h1, .page-head h2, .page-head h3,
.ct-modal-box h3 {
  color: #0b1a33; font-weight: 700; letter-spacing: -0.01em;
}

/* Tables — bigger, darker text */
table.ct-table, .ct-table, table.data, .rf-scroll table, .card table {
  font-size: 13.5px;
  color: var(--rf-text);
}
.ct-table th, table.data th, .card table th { color: #0b1a33; font-weight: 700; background: #f1f5f9; }
.ct-table td, table.data td, .card table td { color: #0f172a; }
.ct-table tr:hover td { background: #f8fafc; }

/* Badges — enforce readable contrast */
.ct-badge, .badge, .chip, .tag {
  font-weight: 600;
  letter-spacing: .01em;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
}

/* Buttons — clearer label */
.btn, .ct-btn { font-weight: 600; letter-spacing: .01em; }
.ct-btn { font-size: 13px; }

/* Form inputs — no more washed-out placeholders */
input, select, textarea { color: var(--rf-text); font-size: 15px; }
input::placeholder, textarea::placeholder { color: #64748b; opacity: 1; }
.card label, .modal label, .field label { color: #0b1a33; font-weight: 600; font-size: 13px; }

/* Cards / stats — darker numbers (only in card context) */
.card .stat .n, .card .kpi .n, .ct-stat .n { color: #0b1a33; font-weight: 800; }
.card .stat .l, .card .kpi .l, .ct-stat .l { color: #475569; font-weight: 600; }

/* ===== Dark surfaces (sidebar / topbar / dark chips) — keep icons visible ===== */
.sidebar, .sidebar *,
.topbar .brand, .topbar .brand *,
[style*="background:#0e2f5c"], [style*="background:#0b1a33"],
[style*="background:#0f172a"], [style*="background:#1e293b"] {
  /* Do NOT override colors here — let the component's own CSS decide.
     This selector exists only to document that these surfaces are dark. */
}
/* Explicit safety: sidebar icons/links must stay light on dark blue */
.sidebar i, .sidebar svg, .sidebar .nav-item, .sidebar .nav-item i,
.sidebar a, .sidebar .brand, .sidebar .brand * {
  color: inherit;
}
/* Icon-only buttons on white surface — ensure visible ink color */
.icon-btn, .icon-action { color: #1e293b; }
.icon-btn i, .icon-action i { color: inherit; }


/* Mobile — bump base size for readability */
@media (max-width: 768px) {
  body { font-size: 15.5px; }
  .ct-card .nm { font-size: 15px !important; }
  .ct-card .sub { font-size: 12px !important; color: #475569 !important; }
  .ct-card .row { font-size: 13px !important; color: #0f172a !important; }
  .ct-card .row .k { color: #475569 !important; }
  .ct-card .type { font-size: 14px !important; }
  .ct-btn { font-size: 13px !important; padding: 9px 10px !important; }
  .ct-badge, .badge { font-size: 12px !important; padding: 4px 9px !important; }
  table th, table td { font-size: 13px !important; }
  input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom */
  label { font-size: 13.5px !important; }
  .modal-box h3, .ct-modal-box h3 { font-size: 16px !important; }
  small, .muted, .hint { font-size: 12.5px !important; }
}

/* Very small phones */
@media (max-width: 380px) {
  body { font-size: 15px; }
  .ct-btn { padding: 8px 8px !important; }
}

/* =========================================================
   Fluid Typography — consistent legibility across all sizes
   Uses clamp(min, preferred, max) so text scales smoothly
   between mobile (~360px) and desktop (~1440px).
   ========================================================= */
:root {
  --fs-xxs:  clamp(10.5px, 0.65vw + 9px,   12px);
  --fs-xs:   clamp(11.5px, 0.7vw + 10px,   13px);
  --fs-sm:   clamp(12.5px, 0.75vw + 11px,  14px);
  --fs-base: clamp(14.5px, 0.85vw + 12.5px, 16.5px);
  --fs-md:   clamp(15.5px, 0.9vw + 13.5px, 17.5px);
  --fs-lg:   clamp(17px,   1vw + 14.5px,   20px);
  --fs-xl:   clamp(19px,   1.4vw + 15px,   24px);
  --fs-2xl:  clamp(22px,   2vw + 16px,     30px);
  --fs-3xl:  clamp(26px,   3vw + 17px,     40px);
  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-body:  1.6;
  --lh-loose: 1.7;
}

/* Base body — one size to rule them all */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* Paragraphs & lists — comfortable reading */
p, li, dd, blockquote { font-size: var(--fs-base); line-height: var(--lh-body); }
small, .small, .muted, .hint, .note, .meta, .sub, figcaption { font-size: var(--fs-xs); line-height: var(--lh-snug); }

/* Headings — fluid scale, tight leading */
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
h5, h6 { font-size: var(--fs-md); line-height: var(--lh-snug); }

/* Card / modal titles stay compact but readable */
.card h2, .card h3, .modal h2, .modal h3, .ct-modal-box h3, .page-head h2 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

/* Forms — inputs stay ≥16px so iOS doesn't zoom */
input, select, textarea, button {
  font-size: max(16px, var(--fs-sm));
  line-height: var(--lh-snug);
}
label, .field label { font-size: var(--fs-sm); line-height: var(--lh-snug); }

/* Tables — dense but readable */
table th, table td, .ct-table th, .ct-table td, .data th, .data td {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* Buttons & badges */
.btn, .ct-btn { font-size: var(--fs-sm); line-height: 1.2; }
.badge, .ct-badge, .chip, .tag { font-size: var(--fs-xxs); line-height: 1.4; }

/* Cards / stats numbers */
.stat .n, .ct-stat .n, .kpi .n { font-size: var(--fs-2xl); line-height: 1.1; }
.stat .l, .ct-stat .l, .kpi .l { font-size: var(--fs-xs);  line-height: 1.3; }

/* Sidebar / topbar labels */
.sidebar .nav-item, .sidebar a { font-size: var(--fs-sm); line-height: 1.35; }
.sidebar .brand .name { font-size: var(--fs-sm); }
.sidebar .brand .sub  { font-size: var(--fs-xxs); }
.topbar h1 { font-size: var(--fs-lg); line-height: var(--lh-snug); }

/* Certificate mobile-card view — tuned in fluid units */
.ct-card .nm  { font-size: var(--fs-md); line-height: var(--lh-snug); }
.ct-card .sub { font-size: var(--fs-xxs); line-height: 1.4; }
.ct-card .type{ font-size: var(--fs-sm); line-height: var(--lh-snug); }
.ct-card .row { font-size: var(--fs-xs); line-height: var(--lh-snug); }

/* Optical readability limit for long-form text */
.card p, .modal p, .prose, article p { max-width: 72ch; }

/* Reduce motion — keep transitions gentle for readability preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Override the older fixed mobile font-sizes added earlier so fluid values win */
@media (max-width: 768px) {
  body { font-size: var(--fs-base); }
  .ct-card .nm  { font-size: var(--fs-md) !important; }
  .ct-card .sub { font-size: var(--fs-xxs) !important; }
  .ct-card .row { font-size: var(--fs-xs) !important; }
  .ct-card .type{ font-size: var(--fs-sm) !important; }
  .ct-btn { font-size: var(--fs-sm) !important; }
  .ct-badge, .badge { font-size: var(--fs-xxs) !important; }
  table th, table td { font-size: var(--fs-sm) !important; }
  label { font-size: var(--fs-sm) !important; }
  small, .muted, .hint { font-size: var(--fs-xs) !important; }
}

/* ============================================================
   Mobile table UX — smooth horizontal scroll + sticky header
   ============================================================ */
.rf-scroll,.tbl-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:auto;
  max-height:70vh;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  position:relative;
  scrollbar-width:thin;
  scrollbar-color:rgba(59,111,209,.45) transparent;
}
.rf-scroll::-webkit-scrollbar,.tbl-wrap::-webkit-scrollbar{height:8px;width:8px}
.rf-scroll::-webkit-scrollbar-thumb,.tbl-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#3b6fd1,#1e4c8a);border-radius:999px;
}
.rf-scroll::-webkit-scrollbar-track,.tbl-wrap::-webkit-scrollbar-track{background:transparent}

.rf-scroll table,.tbl-wrap table,.card table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.rf-scroll thead th,
.tbl-wrap thead th,
.card table thead th{
  position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg,#f1f5f9,#e2e8f0);
  color:#0b1a33;font-weight:700;
  box-shadow:0 1px 0 rgba(15,23,42,.08), 0 2px 6px -4px rgba(15,23,42,.25);
  backdrop-filter:saturate(1.2);
}
.rf-scroll tbody td,.tbl-wrap tbody td,.card table tbody td{
  scroll-snap-align:start;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.rf-scroll tbody tr:hover td,.tbl-wrap tbody tr:hover td{background:#f8fafc}
.rf-scroll tbody tr:nth-child(even) td,.tbl-wrap tbody tr:nth-child(even) td{background:#fafbfd}

/* Sticky first column for wide tables (opt-in with .sticky-col) */
.rf-scroll table.sticky-col th:first-child,
.rf-scroll table.sticky-col td:first-child,
.tbl-wrap table.sticky-col th:first-child,
.tbl-wrap table.sticky-col td:first-child{
  position:sticky;left:0;z-index:4;background:#fff;
  box-shadow:2px 0 6px -4px rgba(15,23,42,.25);
}
.rf-scroll table.sticky-col thead th:first-child,
.tbl-wrap table.sticky-col thead th:first-child{z-index:6;background:#e2e8f0}

@media (max-width: 900px){
  .rf-scroll,.tbl-wrap{max-height:65vh}
  .rf-scroll table,.tbl-wrap table,.card table{min-width:560px}
  .rf-scroll th,.rf-scroll td,.tbl-wrap th,.tbl-wrap td,.card table th,.card table td{
    padding:9px 10px;font-size:13px;white-space:nowrap;
  }
  /* Scroll hint chip */
  .rf-scroll::before,.tbl-wrap::before{
    content:"→ স্লাইড করুন";
    position:sticky;left:calc(100% - 92px);top:4px;
    display:inline-block;
    background:rgba(30,76,138,.9);color:#fff;
    font-size:10px;font-weight:600;letter-spacing:.02em;
    padding:3px 8px;border-radius:999px;
    pointer-events:none;
    z-index:7;
    animation:rfHint 2.4s ease-in-out 2;
  }
}
@keyframes rfHint{
  0%,100%{opacity:.35;transform:translateX(0)}
  50%{opacity:1;transform:translateX(-6px)}
}