/* style.css - basic styling for public display and admin panels */
* { box-sizing: border-box; }
html { min-width: 320px; }
body { font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif; }

/* Public display */
.tv-board {
  background: #eef9ff;
  color: #0f172a;
  min-height:100vh;
  padding:0;
  overflow:hidden;
}
.tv-board::before {
  content:none;
}
.board-inner { width: 100%; min-height: 100vh; position:relative; z-index:1; }
.dashboard-shell {
  width: min(1560px, 100%);
  min-height: 100vh;
  padding: clamp(24px, 4vw, 64px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: clamp(20px, 3vh, 34px);
}
.dashboard-header {
  gap: 18px;
  padding-bottom: clamp(14px, 2vh, 24px);
  border-bottom: 1px solid rgba(15,23,42,0.12);
}
.brand {
  color: #0f172a;
  font-weight:800;
  font-family: 'Merriweather', serif;
  letter-spacing:0;
  font-size: clamp(1.45rem, 2.1vw, 2.4rem);
  line-height:1.08;
}
.dashboard-subtitle {
  color: #475569;
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  margin-top: 6px;
}
.board-logo {
  width: clamp(58px, 6vw, 92px);
  height: clamp(58px, 6vw, 92px);
  border-radius:8px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,0.18);
  flex:0 0 auto;
}
.dashboard-date {
  color: #475569;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  flex:0 0 auto;
}
.dashboard-date strong {
  display:block;
  color:#0f172a;
  font-size: clamp(1.25rem, 2vw, 2.2rem);
  line-height:1.1;
  margin-top: 4px;
}
.dashboard-main {
  display:grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(520px, 1.4fr);
  gap: clamp(18px, 2vw, 30px);
  align-items:stretch;
}
.hero-panel {
  min-height: 320px;
  border-radius:8px;
  padding: clamp(26px, 3vw, 44px);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.86), rgba(255,255,255,0.68)),
    linear-gradient(135deg, rgba(20,184,166,0.28), rgba(251,191,36,0.22), rgba(56,189,248,0.20));
  border:1px solid rgba(15,23,42,0.10);
  box-shadow: 0 22px 60px rgba(15,23,42,0.14);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
}
.hero-panel::after {
  content:none;
}
.hero-panel > * { position:relative; z-index:1; }
.eyebrow {
  color:#0f766e;
  text-transform:uppercase;
  letter-spacing:0;
  font-weight:800;
  font-size:0.86rem;
  margin-bottom:14px;
}
.hero-panel h1 {
  max-width: 640px;
  font-size: clamp(2.2rem, 4vw, 5rem);
  line-height: 1;
  margin:0;
  font-weight:800;
  color:#0f172a;
}
.hero-panel p {
  max-width: 640px;
  color: #475569;
  margin: 18px 0 0;
  font-size: clamp(1rem, 1.2vw, 1.24rem);
  line-height:1.45;
}
.stats {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items:stretch;
}
.stat {
  min-height: 320px;
  padding: clamp(22px, 2.6vw, 40px);
  border-radius:8px;
  text-align:left;
  border:1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 18px 44px rgba(15,23,42,0.13);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.stat::before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(14,165,233,0.12), transparent 46%);
  opacity:0.55;
  pointer-events:none;
}
.stat-gold { border-top: 5px solid #f59e0b; background: linear-gradient(180deg, rgba(255,247,237,0.96), rgba(255,255,255,0.84)); }
.stat-rose { border-top: 5px solid #e11d48; background: linear-gradient(180deg, rgba(255,241,242,0.96), rgba(255,255,255,0.84)); }
.stat-teal { border-top: 5px solid #14b8a6; background: linear-gradient(180deg, rgba(240,253,250,0.96), rgba(255,255,255,0.84)); }
.stat .num {
  font-size: clamp(4rem, 7vw, 7.8rem);
  line-height:0.95;
  font-weight:800;
  color:#0f172a;
  font-family: 'Montserrat', sans-serif;
  text-shadow: none;
}
.stat .label { font-size: clamp(1.05rem, 1.4vw, 1.45rem); opacity:0.98; color:#0f172a; margin-top:22px; font-weight:700; }
.stat .sub { color: #64748b; margin-top:8px; font-size: clamp(0.88rem, 1vw, 1rem); line-height:1.35; }
.info-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.info-card {
  min-height: 150px;
  padding: clamp(18px, 2vw, 26px);
  border-radius:8px;
  background: rgba(255,255,255,0.94);
  color:#1f2937;
  border-left: 6px solid #f59e0b;
  box-shadow:0 18px 40px rgba(15,23,42,0.12);
  overflow-wrap:anywhere;
  position:relative;
  overflow:hidden;
}
.info-card::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background: linear-gradient(90deg, rgba(245,158,11,0.9), rgba(20,184,166,0.9), rgba(96,165,250,0.9));
  opacity:0.72;
}
.accent-gold { border-left-color:#f59e0b; }
.accent-teal { border-left-color:#14b8a6; }
.accent-rose { border-left-color:#fb7185; }
.accent-blue { border-left-color:#60a5fa; }
.accent-green { border-left-color:#22c55e; }
.info-title {
  text-transform:uppercase;
  color:#667085;
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0;
}
.info-value {
  color:#101828;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height:1.12;
  font-weight:800;
  margin-top:10px;
}
.info-detail {
  color:#475467;
  font-size: clamp(0.9rem, 1vw, 1.04rem);
  line-height:1.35;
  margin-top:10px;
}
.leave-panel {
  border-radius:8px;
  padding: clamp(18px, 2vw, 28px);
  background: rgba(255,255,255,0.78);
  border:1px solid rgba(15,23,42,0.10);
  box-shadow:0 18px 44px rgba(15,23,42,0.12);
}
.leave-panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}
.leave-panel h2 {
  margin:0;
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  font-weight:800;
  line-height:1.1;
  color:#0f172a;
}
.leave-count {
  min-width:54px;
  height:54px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#e11d48;
  color:#fff;
  font-size:1.6rem;
  font-weight:800;
}
.leave-list {
  display:block;
}
.leave-row {
  display:none;
  justify-content:space-between;
  gap:18px;
  min-height:86px;
  padding:16px 18px;
  border-radius:8px;
  background: rgba(255,255,255,0.92);
  color:#101828;
  border-left:5px solid #e11d48;
  align-items:center;
  overflow-wrap:anywhere;
}
.leave-row-active {
  display:flex;
}
.leave-name {
  font-size: clamp(1rem, 1.3vw, 1.28rem);
  font-weight:800;
  line-height:1.1;
}
.leave-role {
  color:#667085;
  margin-top:6px;
  font-size:0.9rem;
}
.leave-dates {
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#344054;
  font-size:0.92rem;
  font-weight:700;
  text-align:right;
}
.leave-empty {
  min-height:72px;
  display:flex;
  align-items:center;
  padding:18px;
  border-radius:8px;
  background:rgba(255,255,255,0.92);
  color:#344054;
  font-weight:700;
}
.min-w-0 { min-width:0; }

/* Static display */
.announcement-slide {
  display:flex;
  gap:clamp(14px, 1.6vw, 28px);
  align-items:stretch;
  justify-content:center;
  width:98vw;
  height:94vh;
  max-height:94vh;
  margin:0 auto;
  padding:clamp(10px, 1.4vw, 22px);
  border-radius:8px;
  background:#fff;
  box-shadow:0 18px 48px rgba(15,23,42,0.20);
  overflow:hidden;
}
.announcement-with-image {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:auto minmax(0, 1fr) auto;
}
.announcement-media {
  min-width:0;
  min-height:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  border-radius:8px;
  overflow:hidden;
}
.announcement-image {
  width:100%;
  height:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.announcement-content {
  min-width:0;
  max-height:100%;
  padding:0;
  background:#fff;
  border-radius:8px;
  overflow:visible;
  overflow-wrap:anywhere;
}
.announcement-title { font-size:clamp(1.7rem, 3vw, 3.6rem); color:#08293a; margin-bottom:clamp(8px, 1vh, 14px); font-weight:700; font-family: 'Merriweather', serif; line-height:1.04; }
.announcement-body { min-height:0; font-size:clamp(0.95rem, 1.1vw, 1.18rem); line-height:1.45; color:#21343a; overflow:auto; }
.announcement-body img,
.announcement-body video,
.announcement-body iframe {
  max-width:100%;
  max-height:100%;
  height:auto;
  object-fit:contain;
}

/* Make text readable on TV */
.announcement-content p, .announcement-content li { color: #21343a; font-size:inherit; }
.announcement-slide > .announcement-content:only-child {
  width:100%;
  height:100%;
  padding:clamp(12px, 1.8vw, 26px);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
}
.announcement-slide > .announcement-content:only-child .announcement-title {
  text-align:center;
}
.announcement-slide > .announcement-content:only-child .announcement-body {
  min-height:0;
  display:block;
}
.announcement-slide > .announcement-content:only-child .announcement-body p:has(img) {
  height:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.announcement-slide > .announcement-content:only-child .announcement-body p:has(img) img {
  width:auto;
  max-width:100%;
  max-height:100%;
}
.announcement-slide > .announcement-content:only-child .text-muted {
  text-align:center;
  margin-top:clamp(8px, 1vh, 14px) !important;
}
.announcement-with-image .announcement-content {
  display:contents;
}
.announcement-with-image .announcement-title {
  grid-row:1;
  align-self:end;
  text-align:center;
}
.announcement-with-image .announcement-media {
  grid-row:2;
  width:100%;
  height:100%;
}
.announcement-with-image .announcement-body {
  display:none;
}
.announcement-with-image .text-muted {
  grid-row:3;
  margin-top:clamp(8px, 1.2vh, 16px) !important;
  text-align:center;
  font-size:clamp(0.9rem, 1.1vw, 1.1rem);
}

/* Tablet and small laptop */
@media (max-width: 1180px) {
  .dashboard-main { grid-template-columns:1fr; }
  .hero-panel { min-height: 240px; }
  .stat { min-height: 220px; }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Responsive tweaks for smaller screens */
@media (max-width: 900px) {
  .tv-board { overflow:auto; }
  .tv-board::before { position:absolute; }
  .slide { position:relative; min-height:100vh; height:auto; padding:0; }
  .slide-hidden { display:none; }
  .dashboard-shell { justify-content:flex-start; }
  .dashboard-header { align-items:flex-start !important; flex-direction:column; }
  .dashboard-date { text-align:left !important; }
  .hero-panel, .stat { min-height:auto; }
  .stats, .info-grid { grid-template-columns:1fr; }
  .leave-row { align-items:flex-start; flex-direction:column; }
  .leave-dates { text-align:left; }
  .stat .num { font-size:3.8rem; }
  .announcement-slide,
  .announcement-with-image { display:flex; flex-direction:column; height:auto; min-height:100vh; max-height:none; }
  .announcement-image, .announcement-content { max-width:100%; width:100%; }
  .announcement-media { max-height:42vh; }
  .announcement-image { max-height:42vh; }
  .announcement-content { max-height:none; }
  .announcement-content { margin-top:16px; }
}


/* Slides fill the screen without visual animation */
.slide { position: fixed; width:100%; height:100vh; left:0; top:0; display:flex; align-items:center; justify-content:center; }
.slide-hidden { opacity:0; pointer-events:none; }
.slide-visible { opacity:1; pointer-events:auto; }

/* Admin styles */
.admin-wrap { max-width:1100px; margin:30px auto; padding-inline:16px; }
.sidebar { min-width:220px; }
.table { min-width: 620px; }
.card-body { overflow-x:auto; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .announcement-slide { flex-direction:column; }
  .announcement-image, .announcement-content { max-width:100%; }
}

@media (max-width: 640px) {
  .dashboard-shell { padding:18px; gap:18px; }
  .board-logo { width:54px; height:54px; }
  .brand { font-size:1.18rem; }
  .dashboard-subtitle { font-size:0.86rem; }
  .hero-panel { padding:22px; }
  .hero-panel h1 { font-size:2rem; line-height:1.05; }
  .stats { gap:12px; }
  .stat { padding:20px; }
  .stat .num { font-size:3.2rem; }
  .info-card,
  .leave-panel,
  .leave-row { padding:16px; }
  .leave-panel-header { align-items:flex-start; }
  .leave-count { min-width:46px; height:46px; font-size:1.25rem; }
  .announcement-slide { padding:18px; width:100%; }
  .announcement-body img { max-width:100%; height:auto; }
  .admin-wrap { margin:16px auto; }
}

@media (max-width: 900px) {
  .slide {
    position:relative;
    min-height:100vh;
    height:auto;
    padding:0;
  }
  .slide-hidden {
    display:none;
  }
}