/* =====================================================================
   ClassNode — বেস স্টাইল
   ফাইল   : public_html/assets/css/base.css
   সংস্করণ : 1.0.0
   NODE CORPORATION

   রিসেট · টাইপোগ্রাফি · অ্যাক্সেসিবিলিটি · প্রিন্ট
   tokens.css-এর পরে লোড হবে।
   ===================================================================== */

/* ---------------------------------------------------------------------
   ১. রিসেট
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-bn);
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* লম্বা আইডি, ইমেইল বা লিংক (যেমন CN0001T00001 বা দীর্ঘ ঠিকানা) যেন
   ভেঙে না গিয়ে পুরো পাতাটাকে চওড়া করে না ফেলে — মোবাইলে ডানে-বামে
   স্ক্রল আসার সবচেয়ে সাধারণ কারণ এটিই।
   ⚠ html/body-তে overflow-x: hidden দেওয়া হয়নি ইচ্ছাকৃতভাবে: অ্যাপ
     বার ও সাইডবার position: sticky ব্যবহার করে, আর overflow-x লুকালে
     অনেক ব্রাউজারে sticky কাজ করা বন্ধ করে দেয়। */
body { overflow-wrap: break-word; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--s-5) 0;
}

/* ---------------------------------------------------------------------
   ২. টাইপোগ্রাফি
   বাংলা যুক্তাক্ষরের জন্য লাইন-হাইট বেশি রাখা হয়েছে —
   ক্ষ, ঞ্চ, স্ত্র উপরে-নিচে ছড়ায়।
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--s-3);
  line-height: var(--lh-tight);
  color: var(--c-primary);
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); font-weight: var(--fw-semi); color: var(--c-text-soft); }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--c-primary-soft); }

small { font-size: var(--t-sm); }
strong, b { font-weight: var(--fw-semi); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
}
code {
  background: var(--c-line-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

/* সহায়ক ক্লাস */
.cn-muted   { color: var(--c-muted); }
.cn-faint   { color: var(--c-faint); }
.cn-small   { font-size: var(--t-sm); }
.cn-xs      { font-size: var(--t-xs); }
.cn-bold    { font-weight: var(--fw-semi); }
.cn-center  { text-align: center; }
.cn-right   { text-align: right; }
.cn-nowrap  { white-space: nowrap; }

/* সংখ্যা — কলামে সাজানো থাকবে, লাফাবে না */
.cn-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* টাকার অঙ্ক */
.cn-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-money--due  { color: var(--c-danger); font-weight: var(--fw-semi); }
.cn-money--paid { color: var(--c-accent); font-weight: var(--fw-semi); }

/* ---------------------------------------------------------------------
   ৩. অ্যাক্সেসিবিলিটি (ব্লুপ্রিন্ট পর্ব ১৫.৩)
   --------------------------------------------------------------------- */

/* ফোকাস রিং — কখনো outline:none নয়।
   কীবোর্ড দিয়ে চলা ব্যবহারকারী না দেখলে অ্যাপটি অচল। */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* স্ক্রিন রিডারের জন্য — চোখে দেখা যায় না, পড়া যায় */
.cn-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* কীবোর্ডে Tab চাপলে প্রথমেই "মূল অংশে যান" */
.cn-skip {
  position: absolute;
  left: var(--s-3);
  top: -100px;
  z-index: var(--z-toast);
  background: var(--c-primary);
  color: #fff;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-btn);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.cn-skip:focus { top: var(--s-3); color: #fff; }

/* ---------------------------------------------------------------------
   ৪. নির্বাচন ও স্ক্রলবার
   --------------------------------------------------------------------- */
::selection { background: var(--c-primary-tint); color: var(--c-primary); }

/* ---------------------------------------------------------------------
   ৫. প্রিন্ট
   রসিদ, মার্কশিট, আইডি কার্ড — সবই ব্রাউজারের প্রিন্ট দিয়ে বের হবে,
   PHP-র PDF লাইব্রেরি দিয়ে নয় (বাংলা যুক্তাক্ষর ভাঙে)।
   --------------------------------------------------------------------- */
@media print {
  :root { --c-bg: #fff; }

  body {
    background: #fff;
    font-size: 12pt;
    line-height: 1.6;
  }

  .cn-appbar,
  .cn-bottomnav,
  .cn-sidebar,
  .cn-noprint,
  .cn-skip { display: none !important; }

  .cn-page { padding: 0; max-width: none; }

  .cn-card {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }

  a { text-decoration: none; color: #000; }

  /* সারি বা টেবিল যেন পাতার মাঝখানে ভাগ না হয় */
  tr, .cn-listrow { break-inside: avoid; }
  thead { display: table-header-group; }
}