/* ==========================================================================
   teachers-redesign.css — Teachers पेज (admin-teachers.html) को नयाँ रूप।

   सबै नियम `body.tp` भित्र मात्र लाग्छ, त्यसैले अरू पेजका साझा .btn-gold /
   .btn-primary / .card / .ledger जस्ताको तस्तै रहन्छन्। JS ले बनाउने class
   नाम (js-edit, js-td-print, comm-icon-btn, row-action-link …) नफेरिएकाले
   सबै बटनको काम पहिलेकै हो — यहाँ रूप मात्र फेरिएको छ।

   रङ: पोर्टलकै नीलो (--ink) र सुनौलो (--gold), नयाँ सहायक रङ मात्र तल :root मा।
   ========================================================================== */

body.tp {
  --tp-ink: #1b2a4a;
  --tp-ink-2: #2f4270;
  --tp-gold: #e8a33d;
  --tp-gold-2: #c8811f;
  --tp-line: #ebe5d8;
  --tp-soft: #f5f1e8;
  --tp-shadow-sm: 0 1px 2px rgba(27, 42, 74, .05), 0 1px 1px rgba(27, 42, 74, .03);
  --tp-shadow-md: 0 1px 2px rgba(27, 42, 74, .04), 0 10px 28px -14px rgba(27, 42, 74, .22);
  background: linear-gradient(180deg, #faf7f2 0%, #f4efe5 100%);
  background-attachment: fixed;
}

/* ---- पृष्ठको शीर्षक पट्टी (desktop) ---------------------------------- */
body.tp .tp-hero {
  position: relative;
  background: linear-gradient(120deg, #16233f 0%, #1b2a4a 45%, #2f4270 100%);
  border-bottom: 0;
  padding: 1.35rem 2rem;
  overflow: visible;   /* hidden थियो → account popover (Switch view / Log out) काटिन्थ्यो */
  z-index: 60;
}
body.tp .tp-hero::after {            /* तलको पातलो सुनौलो रेखा */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--tp-gold) 0%, rgba(232, 163, 61, .15) 70%, transparent 100%);
}
body.tp .tp-hero h1 {
  display: flex; align-items: center; gap: .8rem;
  color: #fff;
  font-size: 1.35rem;
  letter-spacing: .005em;
}
body.tp .tp-hero h1::before {        /* शीर्षकअघिको आइकन टाइल */
  content: "\f0c0";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 12px;
  font-size: 1rem;
  color: var(--tp-ink);
  background: linear-gradient(135deg, #f4bd5e, var(--tp-gold));
  box-shadow: 0 6px 14px -6px rgba(232, 163, 61, .8);
}

/* ---- बटनहरू --------------------------------------------------------- */
body.tp .btn-gold,
body.tp .btn-primary,
body.tp .btn-cancel,
body.tp .btn-delete {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, filter .14s ease;
}
body.tp .btn-gold i,
body.tp .btn-primary i { font-size: .9em; }

body.tp .btn-gold {
  color: var(--tp-ink);
  background: linear-gradient(135deg, #f5c068 0%, var(--tp-gold) 55%, #dc9226 100%);
  border: 1px solid rgba(200, 129, 31, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 16px -8px rgba(200, 129, 31, .75);
}
body.tp .btn-gold:hover {
  background: linear-gradient(135deg, #f7c874 0%, #efab47 55%, #d98f22 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 20px -8px rgba(200, 129, 31, .85);
}

body.tp .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #34497b 0%, var(--tp-ink-2) 40%, var(--tp-ink) 100%);
  border: 1px solid rgba(27, 42, 74, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 16px -8px rgba(27, 42, 74, .8);
}
body.tp .btn-primary:hover {
  background: linear-gradient(135deg, #3d5589 0%, #34497b 40%, #22345c 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 20px -8px rgba(27, 42, 74, .9);
}

body.tp .btn-cancel {
  color: var(--tp-ink);
  background: #fff;
  border: 1.5px solid var(--tp-line);
  box-shadow: var(--tp-shadow-sm);
}
body.tp .btn-cancel:hover {
  background: #fffaf0;
  border-color: var(--tp-gold);
  transform: translateY(-1px);
}

body.tp .btn-delete {
  color: var(--error);
  background: #fff;
  border: 1.5px solid rgba(193, 68, 60, .35);
}
body.tp .btn-delete:hover { background: var(--error); color: #fff; border-color: var(--error); transform: translateY(-1px); }

body.tp .btn-gold:active,
body.tp .btn-primary:active,
body.tp .btn-cancel:active,
body.tp .btn-delete:active { transform: translateY(0) scale(.98); box-shadow: none; }

body.tp .btn-gold:disabled,
body.tp .btn-primary:disabled,
body.tp .btn-cancel:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.25); }

/* रेखांकित "लिङ्क" बटन (Select All, Clear All, खाली टेम्प्लेट, कागजात) → सफा चिप */
body.tp button.underline {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none;
  color: var(--tp-ink);
  font-weight: 600;
  background: #fff;
  border: 1.5px solid var(--tp-line);
  border-radius: 999px;
  padding: .32rem .85rem;
  box-shadow: var(--tp-shadow-sm);
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
body.tp button.underline:hover { border-color: var(--tp-gold); background: #fffaf0; transform: translateY(-1px); }
body.tp button.underline i { color: var(--tp-gold-2); }

/* ---- माथिका मुख्य ट्याब (segmented control) ------------------------- */
body.tp .jinsi-tabs {
  gap: .3rem;
  padding: .35rem;
  background: #fff;
  border: 1px solid var(--tp-line);
  border-radius: 16px;
  box-shadow: var(--tp-shadow-md);
  margin-bottom: 1.25rem;
}
body.tp .jinsi-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 0;
  padding: .6rem 1.15rem;
  border: 0;
  border-radius: 12px;
  font-size: .86rem;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
body.tp .jinsi-tab:hover { background: var(--tp-soft); color: var(--tp-ink); }
body.tp .jinsi-tab.active,
body.tp .jinsi-tab.active:hover {
  color: #fff;
  background: linear-gradient(135deg, #34497b, var(--tp-ink));
  box-shadow: 0 8px 16px -8px rgba(27, 42, 74, .85), inset 0 -3px 0 var(--tp-gold);
}

/* ---- उप-ट्याब (Teachers / System Accounts, कार्यविभाजन भित्रका) ----- */
body.tp .jinsi-tabs-sub {
  display: inline-flex;
  max-width: 100%;
  gap: .25rem;
  padding: .28rem;
  background: var(--tp-soft);
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
body.tp .jinsi-tab-sub {
  margin-bottom: 0;
  padding: .45rem 1rem;
  border: 0;
  border-radius: 999px;
  font-size: .82rem;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
body.tp .jinsi-tab-sub:hover { background: rgba(255, 255, 255, .7); }
body.tp .jinsi-tab-sub.active,
body.tp .jinsi-tab-sub.active:hover {
  color: var(--tp-ink);
  background: #fff;
  box-shadow: 0 2px 8px -2px rgba(27, 42, 74, .25), inset 0 -2px 0 var(--tp-gold);
}
body.tp .jinsi-tab-sub i { color: var(--tp-gold-2); }

/* ---- कार्ड र फाराम -------------------------------------------------- */
body.tp .card {
  border: 1px solid var(--tp-line);
  border-radius: 18px;
  box-shadow: var(--tp-shadow-md);
  background: #fff;
}
body.tp .card > h2.display {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tp-ink);
}
body.tp .card > h2.display::before {
  content: "";
  width: 4px; height: 1.15em;
  border-radius: 4px;
  background: linear-gradient(180deg, #f5c068, var(--tp-gold-2));
}

body.tp .input-field {
  background: #fdfcf9;
  border: 1.5px solid #e4ddcd;
  border-radius: 12px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
body.tp .input-field:hover { border-color: #d6cdb8; }
body.tp .input-field:focus {
  background: #fff;
  border-color: var(--tp-gold);
  box-shadow: 0 0 0 4px rgba(232, 163, 61, .22);
}
body.tp input[type="checkbox"],
body.tp input[type="radio"] { accent-color: var(--tp-ink); }

/* ---- शिक्षक तालिका -------------------------------------------------- */
body.tp #tdPrintBar {
  padding: .55rem .8rem;
  background: #fff;
  border: 1px solid var(--tp-line);
  border-radius: 14px;
  box-shadow: var(--tp-shadow-sm);
}
body.tp #teacherFilterCount {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(27, 42, 74, .07);
  color: var(--tp-ink);
  font-weight: 700;
}

body.tp .table-scroll {
  background: #fff;
  border: 1px solid var(--tp-line);
  border-radius: 18px;
  box-shadow: var(--tp-shadow-md);
}
body.tp .teacher-ledger { border-collapse: separate; border-spacing: 0; }
body.tp .teacher-ledger thead th {
  background: linear-gradient(180deg, #f8f4ea, #f1ecdf);
  color: var(--tp-ink);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  padding: .8rem .7rem;
  border: 0;
  border-bottom: 2px solid var(--tp-gold);
}
body.tp .teacher-ledger tbody tr { background: #fff; border: 0; transition: background .12s ease; }
body.tp .teacher-ledger tbody tr:nth-child(even) { background: #fff; }
body.tp .teacher-ledger tbody tr:hover { background: #fffaf0; }
body.tp .teacher-ledger td {
  border: 0;
  border-bottom: 1px solid #f1ece0;
  padding: .75rem .7rem;
}
body.tp .teacher-ledger tbody tr:last-child td { border-bottom: 0; }

body.tp .teacher-ledger .user-circle {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #eef1f8, #dfe5f1);
  color: var(--tp-ink);
  font-size: 14px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(232, 163, 61, .55);
}
body.tp .teacher-ledger td.ledger-name-col span:last-child { font-weight: 700; color: var(--tp-ink); }

/* भूमिका (Role) ब्याज */
body.tp .tp-role {
  display: inline-flex; align-items: center;
  padding: .18rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tp-ink);
  background: rgba(27, 42, 74, .08);
}
body.tp .tp-role.is-admin { color: #7a4700; background: rgba(232, 163, 61, .24); }
body.tp .tp-flags { margin-left: .4rem; display: inline-flex; gap: .3rem; vertical-align: middle; }

/* पङ्क्तिका कार्य (Actions) */
body.tp .tp-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem;
}
body.tp .tp-comm { display: inline-flex; gap: .3rem; padding-right: .35rem; margin-right: .1rem; border-right: 1px solid var(--tp-line); }
body.tp .comm-icon-btn {
  width: 30px; height: 30px;
  margin: 0;
  border-radius: 50%;
  font-size: .85rem;
  transition: transform .14s ease, box-shadow .14s ease;
}
body.tp .comm-icon-btn:not(.is-disabled):hover { transform: translateY(-2px); filter: none; box-shadow: 0 6px 12px -6px currentColor; }

body.tp .tp-actions .js-edit,
body.tp .tp-actions .js-edit-system,
body.tp .js-edit-system { border-radius: 999px; padding: .42rem 1rem; }
body.tp .tp-actions .js-td-print { padding: .38rem .8rem; font-size: .72rem; margin-left: 0; }

body.tp .row-action-link {
  margin-left: 0;
  padding: .38rem .8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
body.tp .row-action-subjects { border-color: rgba(26, 61, 124, .22); }
body.tp .row-action-classteacher { color: #8a5200; border-color: rgba(200, 129, 31, .35); }
body.tp .row-action-link:hover { transform: translateY(-1px); }

/* ---- शिक्षक E-Attendance ट्याब ------------------------------------- */
body.tp .tatt-config-bar {
  background: #fff;
  border: 1px solid var(--tp-line);
  border-radius: 16px;
  box-shadow: var(--tp-shadow-md);
  padding: .9rem 1.1rem;
}
body.tp .tatt-config-field label { font-size: .72rem; font-weight: 700; color: var(--tp-ink); }

body.tp .tatt-day-nav {
  padding: .6rem .8rem;
  background: #fff;
  border: 1px solid var(--tp-line);
  border-radius: 16px;
  box-shadow: var(--tp-shadow-sm);
}
body.tp .tatt-day-nav button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1.5px solid var(--tp-line);
  border-radius: 12px;
  background: #fff;
  color: var(--tp-ink);
  font-weight: 700;
  box-shadow: var(--tp-shadow-sm);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
body.tp .tatt-day-nav button:hover { border-color: var(--tp-gold); background: #fffaf0; transform: translateY(-1px); }
body.tp .tatt-day-nav #tattPrevDayBtn,
body.tp .tatt-day-nav #tattNextDayBtn { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; }
body.tp .tatt-day-nav .tatt-today-btn {
  color: #7a4700;
  background: rgba(232, 163, 61, .2);
  border-color: rgba(200, 129, 31, .4);
  border-radius: 999px;
  padding: .4rem 1rem;
}
body.tp .tatt-date-label { color: var(--tp-ink); font-size: 1rem; }

body.tp .tatt-day-nav #tattBatchQrBtn {
  border-radius: 12px; padding: .55rem 1rem; font-size: .78rem; color: var(--tp-ink);
  background: linear-gradient(135deg, #f5c068 0%, var(--tp-gold) 55%, #dc9226 100%);
  border: 1px solid rgba(200, 129, 31, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 16px -8px rgba(200, 129, 31, .75);
}
body.tp .tatt-day-nav #tattBatchQrBtn:hover { background: linear-gradient(135deg, #f7c874, #efab47 55%, #d98f22); }
body.tp .tatt-day-nav #tattPrintDayBtn {
  border-radius: 12px; padding: .55rem 1rem; font-size: .78rem; color: #fff;
  background: linear-gradient(135deg, #34497b 0%, var(--tp-ink-2) 40%, var(--tp-ink) 100%);
  border: 1px solid rgba(27, 42, 74, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 16px -8px rgba(27, 42, 74, .8);
}
body.tp .tatt-day-nav #tattPrintDayBtn:hover { background: linear-gradient(135deg, #3d5589, #34497b 40%, #22345c); }

body.tp .tatt-now-btn,
body.tp .tatt-clear-btn { transition: transform .14s ease, background .14s ease; }
body.tp .tatt-now-btn:hover { transform: scale(1.08); }

/* ---- Edit Teacher modal का बटन ------------------------------------- */
body.tp .record-edit-close {
  border-radius: 50%;
  transition: background .14s ease, transform .14s ease;
}
body.tp .record-edit-close:hover { transform: rotate(90deg); }
body.tp .record-edit-quick-btn {
  border-radius: 999px;
  font-weight: 700;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
body.tp .record-edit-quick-btn:hover { transform: translateY(-1px); box-shadow: var(--tp-shadow-md); }

/* ---- मोबाइल -------------------------------------------------------- */
@media (max-width: 767px) {
  body.tp .jinsi-tab { padding: .55rem .9rem; font-size: .8rem; }
  body.tp .tp-actions { justify-content: flex-start; }
  body.tp .tp-comm { border-right: 0; padding-right: 0; }
  body.tp .table-scroll,
  body.tp .card { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  body.tp * { transition: none !important; }
  body.tp .btn-gold:hover, body.tp .btn-primary:hover, body.tp .btn-cancel:hover,
  body.tp button.underline:hover, body.tp .row-action-link:hover { transform: none; }
}

@media print {
  body.tp { background: #fff; }
  body.tp .tp-hero { display: none; }
}