/* ===== Global Site Theme (standard for all pages) ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;600;700;800&display=swap');

:root{
  /* Brand */
  --brand:        #9d1115;
  --brand-600:    #7a0d11;
  --brand-700:    #5c0a0c;
  --accent:       #0a7d6f;

  /* Surfaces */
  --bg:           #f5f6fa;
  --card:         rgba(255,255,255,.65);
  --card-border:  rgba(255,255,255,.25);
  --shadow:       0 10px 30px rgba(0,0,0,.10);

  /* Text */
  --text:         #1f2937;
  --muted:        #6b7280;

  /* Widgets */
  --clock-face-url: url('img/clock-face.png'); /* ? your analogue clock image */
}

html, body{
  font-family: "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: radial-gradient(1200px circle at 10% 10%, #ffffff 0, #f3f4f7 45%, #eceff3 100%);
}

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

/* Glass + lift cards */
.glass{
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  border-radius: 16px;
}
.card-lift{ transition: transform .18s ease, box-shadow .18s ease; }
.card-lift:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.14); }

/* Buttons */
.btn-modern{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-weight: 700;
}
.btn-outline-modern{
  color: var(--brand);
  border-color: var(--brand);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-weight: 700;
}
.btn-outline-modern:hover{ color:#fff; background:var(--brand); border-color:var(--brand); }

/* Title */
.brand-title{ font-weight:800; color: var(--brand-700); }

/* Table styles (reusable) */
.table-wrapper{ overflow: hidden; }
.table-modern thead th{
  background: var(--brand);
  color:#fff;
  border: none !important;
  font-weight:700;
}
.table-modern tbody td{
  background: rgba(255,255,255,.9);
  vertical-align: top;
}
.table-modern .side-th{
  width: 200px;
  font-weight:700;
  color: var(--brand-700);
  background:#fff !important;
}

/* Tooltip for staff thumbs */
.tooltip .tooltiptext{
  visibility:hidden; opacity:0; position:absolute; z-index:10;
  background:#000; color:#fff; border-radius:6px; padding:4px 8px;
  transform: translateY(-6px);
  transition: opacity .15s ease;
  white-space: nowrap; font-size:.8rem;
}
.tooltip:hover .tooltiptext{ visibility:visible; opacity:1; }
.teacher-avatar{
  width: 44px; height: 44px; object-fit: cover; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

/* Analogue clock (uses your image) */
.clock{
  width: 160px; aspect-ratio: 1/1; position: relative; border-radius: 50%;
  background-image: var(--clock-face-url);
  background-size: cover; background-position: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 0 0 2px rgba(255,255,255,.8);
}
.clock .hand{
  position:absolute; top: 10%; left: 50%;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 90%;
  border-radius: 4px;
}
.hand.hour{   width: 6px; height: 33%; background: #1f2937; }
.hand.minute{ width: 4px; height: 43%; background: #1f2937; }
.hand.second{ width: 2px; height: 48%; background: var(--brand); }
.clock .center-dot{
  position:absolute; width: 10px; height: 10px; border-radius:50%;
  background: var(--brand); border: 2px solid #fff; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Print */
@media print{
  .no-print{ display:none !important; }
  .glass{ box-shadow:none !important; backdrop-filter:none !important; }
  a[href]:after{ content:""; }
  body{ background:#fff; }
}