/* ==========================================================================
   BFFEA — সর্বজনীন রেসপন্সিভ স্তর (মোবাইল · ট্যাব · ডেস্কটপ)
   সব পেজের <head>-এ <link rel="stylesheet" href="<?= BASE_URL ?>/responsive.css">
   দিয়ে যুক্ত। নতুন পেজ বানালে শুধু এই লাইনটি + viewport মেটা যোগ করলেই
   পেজটি মোবাইল-বান্ধব হয়ে যাবে।

   ⚠️ এটি শুধু মোবাইল/ছোট স্ক্রিনে override যোগ করে — ডেস্কটপ ডিজাইন অপরিবর্তিত থাকে।
   ⚠️ body/html-এ overflow-x:hidden দেওয়া হয়নি (sticky হেডার ভাঙে) — নিরাপদ রাখা হয়েছে।
   ========================================================================== */

/* বড় টেবিলের র‍্যাপারে মসৃণ টাচ-স্ক্রল (সব ডিভাইসে) */
[style*="overflow-x"], .tw, .table-scroll {
  -webkit-overflow-scrolling: touch;
}

/* ছবি/মিডিয়া যেন স্ক্রিন ছাড়িয়ে না যায় */
img, video, canvas { max-width: 100%; }

/* ---------- মোবাইল ও ছোট ট্যাব (≤ 768px) ---------- */
@media (max-width: 768px) {
  /* আঙুলে সহজে চাপার মতো বোতাম ও ইনপুট */
  button, .btn, a.btn,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea {
    min-height: 42px;
    font-size: 15px;
  }
  /* সাধারণ দুই/তিন কলাম গ্রিড এক কলামে */
  .g2, .g3, .gcol2 { grid-template-columns: 1fr !important; }
  /* বড় স্প্রেডশিট টেবিল আড়াআড়ি স্ক্রল হবে — র‍্যাপার নিশ্চিত */
  .tw, .table-scroll { max-width: 100%; overflow-x: auto; }
}

/* ---------- ছোট ফোন (≤ 420px) ---------- */
@media (max-width: 420px) {
  .metrics { grid-template-columns: 1fr 1fr !important; }
}

/* ==========================================================================
   ঐচ্ছিক: টেবিল → কার্ড (মোবাইলে)
   ব্যবহার: <table class="cardify"> এবং প্রতিটি <td data-label="শিরোনাম">…</td>
   শুধু সরল, রিড-অনলি তালিকায় ব্যবহার করুন (এডিটযোগ্য স্প্রেডশিট টেবিলে নয়)।
   ========================================================================== */
@media (max-width: 640px) {
  table.cardify { min-width: 0 !important; }
  table.cardify thead { display: none; }
  table.cardify tr {
    display: block; margin-bottom: 10px; padding: 8px 12px;
    border: 1px solid #E2E8F0; border-radius: 12px; background: #fff;
  }
  table.cardify td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; border: none; padding: 6px 0; text-align: right;
  }
  table.cardify td::before {
    content: attr(data-label);
    font-weight: 700; color: #64748B; text-align: left; flex-shrink: 0;
  }
}