@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
/* =========================
   Base Admin UI
   ========================= */
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;margin:0;background:#f6f7fb;color:#111;}
body{font-family: 'Manrope', Arial, sans-serif;}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0b2a4a;color:#fff;}
.brand{font-weight:700}
.topbar-right{display:flex;gap:10px;align-items:center;}
.shell{display:flex;min-height:calc(100vh - 52px);}
.sidebar{width:220px;background:#0f355f;padding:12px;display:flex;flex-direction:column;gap:8px;}
.sidebar a{color:#cfe2ff;text-decoration:none;padding:8px 10px;border-radius:10px;}
.sidebar a:hover{background:rgba(255,255,255,.08);}
.main{flex:1;padding:16px;max-width:1200px;}
.card{background:#fff;border-radius:14px;padding:14px 16px;margin:14px 0;box-shadow:0 6px 18px rgba(0,0,0,.06);}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{background:#fff;border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
h1{margin:0 0 10px 0}
h2{margin:0 0 10px 0;font-size:18px}
h3{margin:12px 0 8px 0;font-size:16px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #eee;text-align:left;font-size:14px}
.muted{opacity:.8}
.btn{background:#0b2a4a;color:#fff;border:none;border-radius:10px;padding:10px 12px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{opacity:.95}
.btn-sm{padding:6px 10px;font-size:13px}
.form-grid{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center}
.form-inline{display:flex;gap:10px;align-items:center}
input,select,textarea{padding:9px 10px;border:1px solid #ddd;border-radius:10px;font-size:14px}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.login{display:grid;place-items:center;height:100vh}
.login .card{width:min(420px,92vw)}
.alert{background:#ffe7e7;color:#7b1b1b;padding:10px;border-radius:10px;margin:10px 0}

/* =========================
   Slide list: grid + mini preview
   ========================= */
.cw-slides-grid{display:flex;flex-direction:column;gap:12px}
.cw-slide-card{background:#fff;border-radius:14px;padding:12px;box-shadow:0 6px 18px rgba(0,0,0,.06);border:2px solid transparent}
.cw-slide-card.cw-deleted{opacity:.55;border-color:#ddd}
.cw-slide-card.cw-dragging{opacity:.85;border-color:#0b2a4a}
.cw-slide-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.cw-actions{display:flex;gap:8px;align-items:center}
.cw-slide-body{display:grid;grid-template-columns:360px 1fr;gap:12px;align-items:start}
.cw-shot img{width:100%;height:auto;border-radius:12px;border:1px solid #eee}

/* Mini preview: scaled down rendered slide */
.cw-mini-preview{
  transform:scale(.55);
  transform-origin:top left;
  width:180%;
  max-height:240px;
  overflow:hidden;
  border:1px solid #eee;
  border-radius:12px;
  padding:8px;
  background:#f8f9ff;
}

/* =========================
   Textarea toolbar
   ========================= */
.cw-toolbar{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.cw-toolbar button{
  border:1px solid #ddd;
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer
}
.cw-toolbar select{
  border:1px solid #ddd;
  border-radius:10px;
  padding:6px 10px
}

/* =========================
   IPCA Universal Slide Background + Layout
   (this is the key part you asked for)
   ========================= */

/* Every template uses the same background */
.ipca-canvas{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background-image: url('/assets/bg/ipca_bg.jpeg');
  background-size: cover;
  background-position: center;
}

/* Inner content area aligned to your design */
.ipca-content{
  position:absolute;
  left: 5%;
  right: 5%;
  top: 18%;
  bottom: 12%;
  display: grid;
  gap: 2%;
}

/* Text blocks */
.ipca-text-left, .ipca-text-right{
  background: rgba(255,255,255,0.82);
  border-radius: 12px;
  padding: 14px;
  overflow: auto;
  font-size: 16px;
  line-height: 1.35;
}

/* Media blocks */
.ipca-media-left, .ipca-media-right, .ipca-media-center{
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ipca-media-left img,
.ipca-media-right img,
.ipca-media-center img{
  width:100%;
  height:auto;
  display:block;
}

/* Template layouts */
.tpl-tlmr .ipca-content{ grid-template-columns: 1fr 1fr; }
.tpl-tlmr .ipca-text-left{ grid-column:1; }
.tpl-tlmr .ipca-media-right{ grid-column:2; }

.tpl-mltr .ipca-content{ grid-template-columns: 1fr 1fr; }
.tpl-mltr .ipca-media-left{ grid-column:1; }
.tpl-mltr .ipca-text-right{ grid-column:2; }

.tpl-2col .ipca-content{ grid-template-columns: 1fr 1fr; }
.tpl-2col .ipca-text-left{ grid-column:1; }
.tpl-2col .ipca-text-right{ grid-column:2; }

.tpl-dual .ipca-content{ grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
.tpl-dual .ipca-text-left{ grid-column:1; grid-row:1; }
.tpl-dual .ipca-text-right{ grid-column:2; grid-row:1; }
.tpl-dual .ipca-media-left{ grid-column:1; grid-row:2; }
.tpl-dual .ipca-media-right{ grid-column:2; grid-row:2; }

.tpl-center .ipca-content{ grid-template-columns: 1fr; }
.tpl-center .ipca-media-center{ grid-column:1; }

/* Mentor bubble placeholder */
.ipca-mentor{
  position:absolute;
  top: 13%;
  right: 6%;
  width: 150px;
  height: 150px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.70);
  display:none;
}


/* =========================
   IPCA Topbar Upgrade (SAFE APPEND)
   - Keeps existing .topbar styles intact
   - Adds logo-left + centered title + user-right
   - Only affects pages that render .topbar-left/.topbar-center/.topbar-right
   ========================= */

.topbar{
  position: relative;         /* allow absolute-centered title */
  min-height: 52px;           /* keep your current bar height */
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-ipca{
  height: 30px;
  width: auto;
  display:block;
}

/* Centered title in the dark bar */
.topbar-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-weight:800;
  font-size:18px;
  letter-spacing:0.3px;
  white-space:nowrap;
  pointer-events:none; /* clicking won't select it */
}

/* Keep right side aligned and consistent */
.topbar-right{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Make sure the logo doesn't force-wrap on small widths */
@media (max-width: 680px){
  .topbar-center{ font-size:16px; }
  .logo-ipca{ height:26px; }
}


/* =========================
   Quick UI Polish (SAFE APPEND)
   - sticky sidebar
   - smoother feel
   - nicer hover + active states
   - better focus rings
   ========================= */

/* Smooth scrolling + slightly nicer text rendering */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Keep sidebar visible while scrolling */
.sidebar{
  position:sticky;
  top:52px;              /* matches .topbar height */
  align-self:flex-start;
  height:calc(100vh - 52px);
  overflow:auto;
}

/* Subtle active + hover states */
.sidebar a{
  transition:background .15s ease, transform .05s ease;
}
.sidebar a:hover{
  background:rgba(255,255,255,.10);
}
.sidebar a:active{
  transform:translateY(1px);
}

/* Auto-highlight current page link (works if href matches path) */
.sidebar a[href="/admin/dashboard.php"],
.sidebar a[href="/instructor/dashboard.php"],
.sidebar a[href="/student/dashboard.php"]{
  font-weight:800;
}
.sidebar a.active{
  background:rgba(255,255,255,.14);
}

/* Cleaner card hover (tiny) */
.card{
  transition:transform .08s ease, box-shadow .12s ease;
}
.card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* Better focus ring for keyboard / iPad external keyboard */
a:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(30,60,114,.25);
  border-color:rgba(30,60,114,.35);
}

/* Make tables a bit easier to scan */
table tr:hover td{
  background:rgba(30,60,114,.04);
}


/* =========================
   Login Screen (IPCA style)
   ========================= */

.login-bg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.06), transparent 45%),
    linear-gradient(135deg,#0b2a4a,#0f355f 60%,#1e3c72);

  padding:30px;
}

/* centered login container */
.login-wrap{
  width:min(420px,92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* IPCA logo */
.login-logo{
  width:200px;
  margin-bottom:22px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

/* login card */
.login-card{
  width:100%;
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 18px 45px rgba(0,0,0,0.22);
}

/* login inputs spacing */
.login-card input{
  width:100%;
  margin-top:8px;
}

/* login button */
.login-card .btn{
  width:100%;
  margin-top:14px;
}

/* small subtitle */
.login-title{
  font-weight:800;
  margin-bottom:10px;
  color:#0b2a4a;
  text-align:center;
}

/* =========================
   Login: subtle animated light (Apple-ish polish)
   ========================= */

.login-bg{
  position: relative;
  overflow: hidden;
}

/* soft moving light blobs */
.login-bg::before,
.login-bg::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%);
  filter: blur(2px);
  pointer-events:none;
  z-index:0;
  animation: ipcaGlow 12s ease-in-out infinite;
}

.login-bg::before{
  left:-180px;
  top:-140px;
}

.login-bg::after{
  right:-220px;
  bottom:-180px;
  animation-duration: 14s;
  animation-direction: reverse;
}

@keyframes ipcaGlow{
  0%   { transform: translate3d(0,0,0) scale(1);   opacity: .70; }
  50%  { transform: translate3d(60px,40px,0) scale(1.06); opacity: .95; }
  100% { transform: translate3d(0,0,0) scale(1);   opacity: .70; }
}

/* ensure login content sits above the glow */
.login-wrap,
.login-card{
  position: relative;
  z-index: 1;
}

/* premium logo shadow */
.login-logo{
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}