/* =====================================================================
   ClassNode — লেআউট
   ফাইল   : public_html/assets/css/layout.css
   সংস্করণ : 1.4.0
   NODE CORPORATION

   ১.৪.০ (হটফিক্স ২৩): ফোনে হোমের চার পরিসংখ্যান-কার্ড আলাদা গোল-কোণ বক্সে (প্রান্ত-থেকে-প্রান্ত নিয়ম থেকে বাদ), মাঝে ফাঁক ও দুই পাশে মার্জিন।
   ১.৩.০ (হটফিক্স ২১.২.৫): ফোনে হোম প্রান্ত-থেকে-প্রান্ত (পাশের ফাঁক নেই, কোণ সোজা, অংশের মাঝে সরু ফাঁক)।
   ১.২.০ (ফেজ ২১.২ · ADR-129): নতুন হোমে (body.cn-home-nobar) মোবাইলে অ্যাপ বার লুকানো — স্কুলের নিজস্ব
   হেডার-বার (.cn-sbar) আছে; ডেস্কটপে অ্যাপ বার থাকে।
   ১.১.০ (ফেজ ২১.১ · ADR-128): SVG আইকনের মাপ, ঘণ্টার সংখ্যা-ব্যাজ (.cn-appbar__count),
   নিচের মেনুর সক্রিয় বোতামে সবুজ দাগ। কেবল চেহারা; কোনো রঙ হার্ডকোড নয় — থিম মানে।

   অ্যাপ বার · সাইডবার · নিচের ন্যাভিগেশন · পাতার খোল
   ব্লুপ্রিন্ট পর্ব ৪.৩ — মোবাইলে নিচে ৫টি বোতাম, ডেস্কটপে সাইডবার,
   দুটোতেই একই তথ্য ও একই নাম।
   ===================================================================== */

/* =====================================================================
   ১. অ্যাপ বার
   ===================================================================== */
.cn-appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-appbar);
  height: var(--appbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-2);
  background: var(--c-appbar-bg);
  color: var(--c-appbar-fg);
  padding-top: env(safe-area-inset-top);
}
.cn-appbar__title {
  flex: 1;
  min-width: 0;
  font-size: var(--t-md);
  font-weight: var(--fw-semi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--s-1);
}
.cn-appbar__btn {
  position: relative;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-btn);
  color: inherit;
  font-size: 19px;
  text-decoration: none;
}
.cn-appbar__btn:hover { background: rgba(255, 255, 255, .12); color: inherit; }
.cn-appbar__dot {
  position: absolute;
  top: 8px; right: 9px;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-danger);
  border: 1.5px solid var(--c-appbar-bg);
}

/* ঘণ্টার উপরে অপঠিতের সংখ্যা (সবুজ; গুরুত্বপূর্ণ থাকলে লাল) */
.cn-appbar__count {
  position: absolute;
  top: 6px; right: 4px;
  min-width: 17px; height: 17px;
  box-sizing: border-box;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--c-accent-bright);
  color: var(--c-appbar-bg);
  border: 1.5px solid var(--c-appbar-bg);
  font-size: 10.5px;
  font-style: normal;
  font-weight: var(--fw-bold);
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cn-appbar__count--important { background: var(--c-danger); color: var(--c-surface); }

/* নতুন হোম: মোবাইলে স্কুলের হেডার-বারই ওপরে (ফেজ ২১.২) */
@media (max-width: 899px) {
  .cn-home-nobar .cn-appbar { display: none; }

  /* হটফিক্স ২১.২.৫ — ফোনে হোম "প্রান্ত থেকে প্রান্ত" (ফেসবুকের মতো): বাঁ-ডানে-উপরে কোনো ফাঁক নেই,
     হেডার ও কার্ড স্ক্রিনের দুই কিনারা ছোঁয়, কোণ গোল নয়; অংশগুলোর মাঝে কেবল সরু ফাঁক (পাতার ধূসর পটভূমি) */
  .cn-home-nobar .cn-page { padding-left: 0; padding-right: 0; padding-top: 0; }
  .cn-home-nobar .cn-dash > * + * { margin-top: 6px; }
  .cn-home-nobar .cn-dash > .cn-sbar + .cn-ucard { margin-top: 0; }   /* হেডার ও ব্যবহারকারীর কার্ড একসাথে */
  .cn-home-nobar .cn-dash .cn-sbar,
  .cn-home-nobar .cn-dash .cn-ucard,
  .cn-home-nobar .cn-dash .cn-card,
  .cn-home-nobar .cn-dash .cn-alert {
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
    box-shadow: none;
  }
  /* হটফিক্স ২৩: পরিসংখ্যান-কার্ড সোজা-কোণ নয় — আলাদা গোল বক্স; ফাঁক ও পাশের মার্জিন components.css-এ */
  .cn-home-nobar .cn-dash .cn-stats { gap: var(--s-2); }
}

/* SVG আইকন — currentColor, তাই থিম ও সক্রিয়-অবস্থার রঙ নিজে মানে */
.cn-ico { display: block; flex: none; }

/* =====================================================================
   ২. খোল ও পাতা
   ===================================================================== */
.cn-shell { display: flex; align-items: flex-start; }

.cn-main { flex: 1; min-width: 0; }

.cn-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-4);
}

/* নিচের ন্যাভিগেশনের নিচে যেন কনটেন্ট চাপা না পড়ে */
.cn-hasnav .cn-page {
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--s-5));
}

.cn-pagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.cn-pagehead h1 { font-size: var(--t-xl); margin: 0; }
.cn-pagehead__sub { font-size: var(--t-sm); color: var(--c-muted); }

/* =====================================================================
   ৩. নিচের ন্যাভিগেশন — মোবাইলের প্রধান পথ
   ===================================================================== */
.cn-bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-nav);
  display: flex;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.cn-bottomnav__item {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: var(--bottomnav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s-1) 2px;
  text-decoration: none;
  color: var(--c-muted);
}
.cn-bottomnav__icon  { display: grid; place-items: center; height: 24px; font-size: 19px; line-height: 1.2; }
.cn-bottomnav__label {
  font-size: 11px;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cn-bottomnav__item.is-active {
  color: var(--c-primary);
  font-weight: var(--fw-semi);
}
/* সক্রিয় বোতামের উপরে ব্র্যান্ড-সবুজ দাগ (আকৃতি + রঙ — রঙ একা সংকেত নয়) */
.cn-bottomnav__item.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 30%; right: 30%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--c-accent-bright);
}
.cn-bottomnav__item:hover { color: var(--c-primary); }

/* =====================================================================
   ৪. সাইডবার — শুধু ডেস্কটপে
   ===================================================================== */
.cn-sidebar { display: none; }

.cn-only-desktop { display: none; }

@media (min-width: 900px) {
  .cn-bottomnav { display: none; }
  .cn-hasnav .cn-page { padding-bottom: var(--s-5); }

  .cn-only-desktop { display: grid; }

  .cn-sidebar {
    display: block;
    position: sticky;
    top: var(--appbar-h);
    flex: none;
    width: var(--sidebar-w);
    height: calc(100vh - var(--appbar-h));
    overflow-y: auto;
    background: var(--c-surface);
    border-right: 1px solid var(--c-line);
    padding: var(--s-4) var(--s-3);
  }
  body.cn-sidebar-hidden .cn-sidebar { display: none; }

  .cn-sidebar__brand {
    padding: 0 var(--s-2) var(--s-4);
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--c-line-soft);
  }
  .cn-sidebar__list { display: flex; flex-direction: column; gap: 2px; }
  .cn-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--touch-min);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-btn);
    color: var(--c-text-soft);
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
  }
  .cn-sidebar__link:hover { background: var(--c-primary-tint); color: var(--c-primary); }
  .cn-sidebar__link.is-active {
    background: var(--c-primary-tint);
    color: var(--c-primary);
    font-weight: var(--fw-semi);
  }
  .cn-sidebar__icon { display: grid; place-items: center; font-size: var(--t-md); width: 22px; text-align: center; flex: none; }
}

/* =====================================================================
   ৫. প্রিন্টে খোলের কিছুই থাকবে না
   ===================================================================== */
@media print {
  .cn-appbar, .cn-bottomnav, .cn-sidebar, .cn-netbar { display: none !important; }
  .cn-shell { display: block; }
  .cn-page { padding: 0; max-width: none; }
}