/* assets/css/style.css — স্কুল রেজাল্ট সিস্টেম */

:root {
  --primary: #185FA5;
  --primary-dk: #0C447C;
  --primary-lt: #E6F1FB;
  --success: #3B6D11;
  --success-lt: #EAF3DE;
  --danger: #A32D2D;
  --danger-lt: #FCEBEB;
  --warn: #854F0B;
  --warn-lt: #FAEEDA;
  --gray: #5F5E5A;
  --gray-lt: #F1EFE8;
  --border: #E0DFDB;
  --text: #2C2C2A;
  --text-md: #5F5E5A;
  --text-lt: #888780;
  --bg: #F5F5F3;
  --white: #FFFFFF;
  --sidebar-w: 224px;
  --header-h: 54px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 4px rgba(0,0,0,0.07);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans Bengali', 'Noto Sans', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 14px; line-height: 1.6;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =====================
   লেআউট
   ===================== */
#app { display: flex; min-height: 100vh; }

/* সাইডবার */
.sidebar {
  width: var(--sidebar-w); background: var(--white);
  border-right: 1px solid var(--border);
  position: fixed; top: 0; left: 0; height: 100vh;
  display: flex; flex-direction: column; z-index: 100;
  overflow-y: auto;
}
.sidebar-logo {
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.logo-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex-shrink: 0;
}
.sidebar-logo h2 { font-size: 13px; font-weight: 600; line-height: 1.3; }
.sidebar-logo p  { font-size: 11px; color: var(--text-lt); margin-top: 1px; }

.sidebar-nav { flex: 1; padding: 8px 0; }
.nav-group-title {
  padding: 10px 18px 3px;
  font-size: 10px; font-weight: 700; color: var(--text-lt);
  text-transform: uppercase; letter-spacing: 0.7px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 18px; font-size: 13px; color: var(--text-md);
  transition: all 0.15s; border-left: 3px solid transparent;
  cursor: pointer;
}
.nav-item:hover { background: var(--gray-lt); color: var(--text); text-decoration: none; }
.nav-item.active {
  background: var(--primary-lt); color: var(--primary);
  border-left-color: var(--primary); font-weight: 600;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

.sidebar-footer {
  padding: 14px 18px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.user-info { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.user-name  { font-size: 13px; font-weight: 500; }
.user-role  { font-size: 11px; color: var(--text-lt); }
.btn-logout {
  display: block; width: 100%; padding: 7px;
  text-align: center; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12px;
  color: var(--danger); cursor: pointer; background: none;
  transition: background 0.15s;
}
.btn-logout:hover { background: var(--danger-lt); text-decoration: none; }

/* মেইন কন্টেন্ট */
.main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  height: var(--header-h); background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 50;
}
.topbar h1 { font-size: 16px; font-weight: 600; }
.topbar-right { font-size: 12px; color: var(--text-lt); }

.content { padding: 22px 24px; flex: 1; }

/* =====================
   কার্ড
   ===================== */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 18px;
  box-shadow: var(--shadow); overflow: hidden;
}
.card-header {
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--white);
}
.card-title { font-size: 14px; font-weight: 600; }
.card-body  { padding: 18px; }

/* স্ট্যাট কার্ড */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 22px;
}
.stat-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  box-shadow: var(--shadow);
}
.stat-label { font-size: 11px; font-weight: 600; color: var(--text-lt); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 700; }
.stat-sub   { font-size: 11px; color: var(--text-lt); margin-top: 3px; }
.stat-card.blue  .stat-value { color: var(--primary); }
.stat-card.green .stat-value { color: var(--success); }
.stat-card.amber .stat-value { color: var(--warn); }

/* =====================
   গ্রিড লেআউট
   ===================== */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* =====================
   টেবিল
   ===================== */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: 11px; font-weight: 600; color: var(--text-lt);
  padding: 10px 16px; text-align: left;
  background: var(--gray-lt); border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
tbody td { font-size: 13px; padding: 10px 16px; border-bottom: 1px solid #F0F0EE; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #FAFAF8; }
.td-empty { text-align: center; padding: 36px !important; color: var(--text-lt); font-style: italic; }

/* RC টেবিল */
.rc-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.rc-table { border-collapse: collapse; width: 100%; border: 1px solid #999; }
.rc-table th { background: var(--primary-lt); color: var(--primary); font-size: 12px; padding: 9px 12px; border: 1px solid #999; text-align: left; }
.rc-table td { padding: 8px 12px; border: 1px solid #999; font-size: 13px; }

/* =====================
   ফর্ম উপাদান
   ===================== */
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-group  { display: flex; flex-direction: column; gap: 4px; }
.form-label  { font-size: 12px; font-weight: 600; color: var(--text); }
.form-label.required::after { content: ' *'; color: var(--danger); }

.form-control {
  padding: 8px 11px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px;
  color: var(--text); background: var(--white);
  font-family: inherit; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1);
}
textarea.form-control { resize: vertical; }

/* =====================
   ফিল্টার বার
   ===================== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; margin-bottom: 18px;
}

/* =====================
   বাটন
   ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border); background: var(--white);
  color: var(--text); font-family: inherit;
  transition: all 0.15s; white-space: nowrap;
  text-decoration: none !important;
}
.btn:hover   { background: var(--gray-lt); }
.btn:active  { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm   { padding: 5px 10px; font-size: 12px; }
.btn-lg   { padding: 10px 22px; font-size: 15px; }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dk); }
.btn-success { background: var(--success); color: white; border-color: var(--success); }
.btn-success:hover { background: #27500A; }
.btn-danger  { background: var(--danger);  color: white; border-color: var(--danger); }
.btn-danger:hover  { background: #791F1F; }

/* =====================
   ব্যাজ
   ===================== */
.badge {
  display: inline-block; padding: 3px 9px;
  border-radius: 20px; font-size: 11px; font-weight: 600;
}
.badge-pass  { background: var(--success-lt); color: var(--success); }
.badge-fail  { background: var(--danger-lt);  color: var(--danger); }
.badge-a-plus   { background: #E6F1FB; color: #0C447C; }
.badge-a        { background: #EEEDFE; color: #3C3489; }
.badge-a-minus  { background: #E1F5EE; color: #085041; }
.badge-b        { background: #EAF3DE; color: #3B6D11; }
.badge-c        { background: var(--warn-lt); color: var(--warn); }
.badge-d        { background: var(--gray-lt); color: var(--gray); }
.badge-f        { background: var(--danger-lt); color: var(--danger); }
.badge-info     { background: var(--primary-lt); color: var(--primary); }

/* মেধাক্রম */
.rank-badge {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.rank-1     { background: #FAEEDA; color: #633806; }
.rank-2     { background: #F1EFE8; color: #444441; }
.rank-3     { background: #FAECE7; color: #712B13; }
.rank-other { background: var(--gray-lt); color: var(--text-lt); }

/* =====================
   ফ্ল্যাশ মেসেজ
   ===================== */
.flash-msg {
  padding: 12px 18px; font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
}
.flash-success { background: var(--success-lt); color: var(--success); border-bottom: 1px solid #C0DD97; }
.flash-error   { background: var(--danger-lt);  color: var(--danger);  border-bottom: 1px solid #F7C1C1; }
.flash-info    { background: var(--primary-lt); color: var(--primary); border-bottom: 1px solid #B5D4F4; }
.flash-close   { background: none; border: none; cursor: pointer; font-size: 16px; color: inherit; padding: 0 4px; }

/* অ্যালার্ট */
.alert { padding: 11px 15px; border-radius: var(--radius); font-size: 13px; margin-bottom: 14px; }
.alert-danger  { background: var(--danger-lt); color: var(--danger); border: 1px solid #F7C1C1; }
.alert-success { background: var(--success-lt); color: var(--success); }

/* =====================
   মার্কশিট ইনপুট
   ===================== */
.marks-input {
  width: 64px; padding: 5px 5px; text-align: center;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-family: inherit;
  transition: border-color 0.15s;
}
.marks-input:focus  { outline: none; border-color: var(--primary); }
.marks-input.pass   { background: var(--white); color: var(--text); border-color: var(--border); }
.marks-input.fail   { background: var(--white); color: var(--text); border-color: var(--border); }


/* মার্কশিট Sticky */
#marks-table th {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--gray-lt);
}
#marks-table thead tr:last-child th {
    top: 40px;
}
#marks-table th[rowspan="2"] {
    top: 0;
    z-index: 18;
}
/* বামে Sticky — রোল ও নাম */
#marks-table th:nth-child(1),
#marks-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 18;
    background: var(--gray-lt);
    box-shadow: 2px 0 3px rgba(0,0,0,0.08);
}
#marks-table th:nth-child(2),
#marks-table td:nth-child(2) {
    position: sticky;
    left: 55px;
    z-index: 18;
    background: var(--gray-lt);
    box-shadow: 2px 0 3px rgba(0,0,0,0.08);
}
#marks-table tbody td:nth-child(1),
#marks-table tbody td:nth-child(2) {
    background: #fff !important;
    z-index: 8;
}

/* =====================
   রিপোর্ট কার্ড
   ===================== */
.report-card-print {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; max-width: 860px;
}
.rc-header { text-align: center; border-bottom: 2px solid var(--primary); padding-bottom: 14px; margin-bottom: 18px; }
.rc-header h2 { font-size: 20px; font-weight: 700; color: var(--primary); }
.rc-header h3 { font-size: 15px; margin-top: 6px; font-weight: 600; }
.rc-header p  { font-size: 12px; color: var(--text-lt); margin-top: 3px; }

.rc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin-bottom: 18px; }
.rc-row { display: flex; gap: 6px; font-size: 13px; padding: 3px 0; }
.rc-row span { color: var(--text-lt); min-width: 90px; flex-shrink: 0; }

.rc-summary {
  display: grid; grid-template-columns: repeat(6,1fr);
  gap: 12px; margin: 16px 0; text-align: center;
}
.rc-sum-item { background: var(--gray-lt); padding: 10px 6px; border-radius: var(--radius); }
.rc-sum-label { font-size: 10px; color: var(--text-lt); font-weight: 600; text-transform: uppercase; }
.rc-sum-value { font-size: 17px; font-weight: 700; margin-top: 4px; }

.rc-signatures {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 20px; margin-top: 36px; font-size: 12px; color: var(--text-lt);
}
.rc-signatures > div { border-top: 1px solid var(--border); padding-top: 8px; }

/* =====================
   SMS প্রিভিউ
   ===================== */
#sms-preview { min-height: 60px; }

/* =====================
   খালি অবস্থা
   ===================== */
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-lt); }

/* =====================
   লগইন
   ===================== */
.login-body { background: linear-gradient(135deg, #E6F1FB 0%, #F5F5F3 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-wrapper { width: 100%; max-width: 420px; padding: 20px; }
.login-box { background: var(--white); padding: 36px; border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.1); border: 1px solid var(--border); }
.login-logo { text-align: center; margin-bottom: 28px; }
.login-icon { width: 56px; height: 56px; background: var(--primary); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.login-logo h1 { font-size: 18px; font-weight: 700; }
.login-logo p  { font-size: 13px; color: var(--text-lt); margin-top: 4px; }

/* =====================
   প্রিন্ট
   ===================== */
@media print {
  @page { size: A4 portrait; margin: 8mm; }
  .sidebar, .topbar, .filter-bar, .no-print,
  .flash-msg, #toast-container, .btn-print-hide { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; }
  .content { padding: 0 !important; }
  #app { display: block !important; }
  body { background: white !important; margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none; border: none; }
  .report-card-print { 
    border: none !important; 
    padding: 0 !important; 
    max-width: 100% !important; 
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .rc-table td { padding: 6px 8px !important; font-size: 11px !important; }
  .rc-table th { padding: 6px 8px !important; font-size: 11px !important; }
  .rc-summary { gap: 6px !important; margin: 10px 0 !important; }
  .rc-sum-item { padding: 6px 4px !important; }
  .rc-sum-value { font-size: 13px !important; }
  .rc-signatures { margin-top: 16px !important; }
}

/* =====================
   রেসপন্সিভ
   ===================== */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .grid-2col  { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { margin-left: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .rc-summary { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}