/* ============================================
   Noor Quran Classes — Panel (Student/Teacher/Admin)
   Reuses color variables and .btn/.card styles from
   ../css/style.css — this file only adds panel-specific layout.
   ============================================ */

.panel-shell {
  min-height: 100vh;
  background: var(--cream-deep);
}

/* ---- Top bar (dashboards) ---- */
.panel-topbar {
  background: var(--navy);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-topbar .panel-logo {
  font-family: "Marcellus", serif;
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
}
.panel-topbar a.panel-logo:hover { opacity: 0.85; }
.panel-topbar .panel-logo span { color: var(--gold-light); }
.panel-topbar .panel-user {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9rem;
  color: var(--gold-light);
}
.panel-topbar button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.panel-topbar button:hover { background: rgba(255,255,255,0.12); }

.panel-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}
.panel-main h1 { margin-bottom: 6px; }
.panel-main .panel-subtitle { color: var(--ink-soft); margin-bottom: 28px; }

/* ---- Sidebar layout (admin) ---- */
.panel-layout {
  display: flex;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}
.panel-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 12px;
  position: sticky;
  top: 0;
}
.sidebar-nav-item {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.sidebar-nav-item:hover { background: var(--border); color: var(--navy); }
.sidebar-nav-item.active { background: var(--navy); color: #fff; }

.panel-content {
  flex: 1;
  min-width: 0;
  padding: 32px 24px 60px;
}
.panel-content h1 { margin-bottom: 6px; }
.panel-content .panel-subtitle { color: var(--ink-soft); margin-bottom: 20px; }

@media (max-width: 720px) {
  .panel-layout { flex-direction: column; }
  .panel-sidebar {
    width: 100%;
    flex-direction: row;
    position: static;
    padding: 12px;
    overflow-x: auto;
  }
}

/* ---- Students toolbar (search + filter chips) ---- */
.students-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.students-toolbar input[type="text"] {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
}
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--navy); }
.filter-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- Login page ---- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.login-card .panel-logo {
  font-family: "Marcellus", serif;
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 6px;
  display: block;
}
.login-card .panel-logo span { color: var(--gold); }
.login-card p { color: var(--ink-soft); margin-bottom: 24px; }
.login-card input[type="email"] {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 14px;
  font-family: inherit;
}
.login-card .btn { width: 100%; justify-content: center; }
.login-status {
  margin-top: 16px;
  font-size: 0.9rem;
  min-height: 1.2em;
}
.login-status.success { color: var(--green-deep); }
.login-status.error { color: #b3413a; }

/* ---- Status pill ---- */
.status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.status-pill.trial { background: var(--gold-light); color: var(--navy); }
.status-pill.active { background: #dcefe0; color: var(--green-deep); }
.status-pill.expired { background: #f6d9d6; color: #8a2e26; }
.status-pill.paused { background: var(--border); color: var(--ink-soft); }

/* ---- Simple data table (admin/teacher lists) ---- */
.panel-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel-table th, .panel-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  vertical-align: middle;
}
.panel-table th {
  background: var(--cream-deep);
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}
.panel-table tr:last-child td { border-bottom: none; }

/* ---- Wide, horizontally-scrollable tables (Students / Payments) ---- */
.panel-table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.panel-table-scroll .panel-table {
  border: none;
  border-radius: 0;
}
.wide-table { min-width: 1600px; }
.wide-table td input[type="text"],
.wide-table td input[type="url"],
.wide-table td input[type="number"],
.wide-table td input[type="date"],
.wide-table td select {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  width: 100%;
  box-sizing: border-box;
}
.wide-table td.col-name { min-width: 170px; }
.wide-table td.col-phone { min-width: 120px; }
.wide-table td.col-teacher { min-width: 220px; }
.wide-table td.col-status { min-width: 130px; }
.wide-table td.col-course, .wide-table td.col-schedule, .wide-table td.col-meet { min-width: 150px; }
.wide-table td.col-fee { min-width: 180px; }
.wide-table td.col-login { min-width: 160px; }

/* Fee field: number input + currency select side by side. Without an explicit min-width,
   the number input collapses to almost nothing under flexbox's default shrink behavior. */
.fee-field { display: flex; gap: 4px; }
.fee-field input[type="number"] { flex: 1 1 80px; min-width: 70px; width: auto; }
.fee-field select { flex-shrink: 0; width: 70px; }

.wide-table td.col-log-payment { min-width: 350px; }

/* ---- Payments summary strip ---- */
.payments-summary {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.payments-summary .stat-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 22px;
  text-align: center;
}
.payments-summary .stat-chip strong { display: block; font-size: 1.5rem; font-family: "Marcellus", serif; }
.payments-summary .stat-chip span { font-size: 0.8rem; color: var(--ink-soft); }
.payments-summary .stat-chip.overdue strong { color: #b3413a; }
.payments-summary .stat-chip.warning strong { color: #b9791f; }
.payments-summary .stat-chip.ok strong { color: var(--green-deep); }

.panel-empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 20px;
}

/* ---- Dashboard ---- */
.dashboard-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dashboard-stats .stat-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 24px;
  text-align: center;
  min-width: 110px;
}
.dashboard-stats .stat-chip strong { display: block; font-size: 1.7rem; font-family: "Marcellus", serif; color: var(--navy); }
.dashboard-stats .stat-chip span { font-size: 0.8rem; color: var(--ink-soft); }
.dashboard-stats .stat-chip.overdue strong { color: #b3413a; }
.dashboard-stats .stat-chip.warning strong { color: #b9791f; }
.dashboard-stats .stat-chip.ok strong { color: var(--green-deep); }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}
.dashboard-grid .card h3 { margin-bottom: 12px; }

.attention-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.attention-row:last-child { border-bottom: none; }
.attention-empty { color: var(--ink-soft); font-size: 0.9rem; padding: 8px 0; }

/* Same idea as .attention-row but for the 4-column "Due This Week" list — wraps on
   narrow screens instead of squeezing 4 columns into one line. */
.due-week-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.due-week-row:last-child { border-bottom: none; }
.due-week-row .due-week-name { font-weight: 600; min-width: 140px; }

/* ---- Teacher panel: daily attendance marking ---- */
.attendance-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.attendance-label { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.attendance-present-btn, .attendance-absent-btn {
  padding: 6px 14px;
  font-size: 0.82rem;
}
.attendance-active-present { background: var(--green-deep, #2f6f4f); color: #fff; border-color: var(--green-deep, #2f6f4f); }
.attendance-active-absent { background: #b3413a; color: #fff; border-color: #b3413a; }
.attendance-marked-note { font-size: 0.8rem; color: var(--ink-soft); }

.money-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.money-row:last-child { border-bottom: none; }
.money-row .money-label { color: var(--ink-soft); }
.money-row .money-value { font-weight: 700; color: var(--navy); }

/* ---- Overdue / warning text (admin student cards) ---- */
.overdue-text { color: #b3413a; }
.warning-text { color: #b9791f; }

/* ---- Teacher dashboard: shared resources (PDFs, games) ---- */
.resource-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
@media (max-width: 600px) {
  .resource-list { grid-template-columns: 1fr; }
}
.resource-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.resource-list li:last-child,
.resource-list li:nth-last-child(2) { border-bottom: none; }
.resource-list a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.resource-list a:hover { text-decoration: underline; }

/* ---- Student dashboard status banner ---- */
.student-alert {
  padding: 14px 18px;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 0.95rem;
}
.student-alert.overdue { background: #f6d9d6; color: #8a2e26; }
.student-alert.warning { background: var(--gold-light); color: var(--navy); }
.student-alert.info { background: var(--cream-deep); color: var(--ink-soft); border: 1px solid var(--border); }

/* ---- Editable card fields (admin student cards) ---- */
.panel-main .card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.panel-main .card label input,
.panel-main .card label select {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
}

/* ---- Notifications ---- */
.notification-item {
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fff;
}
.notification-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.notification-item h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--navy);
}
.notification-item p {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  white-space: pre-wrap;
}
.notification-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.notification-audience-tag {
  background: var(--gold-light);
  color: var(--navy-deep);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 700;
  white-space: nowrap;
}