/* CampusAttend - shared UI styles (mobile-first)
 * Design tokens live in: /public/assets/css/theme.css
 */
:root{
  --aa-muted:#5b6776;
  --aa-radius:16px;
}

html,body{height:100%; overflow-x:hidden;}
body{background:var(--aa-bg); color:var(--aa-text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}

/* Bootstrap component polish with brand palette */
.btn-primary{
  --bs-btn-bg: var(--aa-primary);
  --bs-btn-border-color: var(--aa-primary);
  --bs-btn-hover-bg: #085a41;
  --bs-btn-hover-border-color: #085a41;
}
.btn-outline-primary{
  --bs-btn-color: var(--aa-primary);
  --bs-btn-border-color: var(--aa-primary);
  --bs-btn-hover-bg: var(--aa-primary);
  --bs-btn-hover-border-color: var(--aa-primary);
}
.badge.text-bg-info{ background-color: color-mix(in srgb, var(--aa-secondary) 55%, #ffffff 45%)!important; color:#0a2f22!important; }
.badge.text-bg-warning{ background-color: var(--aa-accent)!important; color:#222!important; }

/* Typography */
.aa-muted{color:var(--aa-muted)!important;}
.aa-title{letter-spacing:-0.02em;}

/* Cards */
.aa-card{
  background:var(--aa-card);
  border:1px solid var(--aa-border);
  border-radius:var(--aa-radius);
  box-shadow:var(--shadow-soft, 0 10px 28px rgba(2,6,23,.06));
}
.aa-card .card-header{
  background:transparent;
  border-bottom:1px solid var(--aa-border);
}
.aa-kpi{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
}
.aa-kpi .kpi-label{font-size:.85rem; color:var(--aa-muted);}
.aa-kpi .kpi-value{font-size:1.4rem; font-weight:800; line-height:1.15;}
.aa-kpi .kpi-icon{
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--aa-secondary) 25%, #ffffff 75%);
  color:var(--aa-primary);
}
.aa-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .55rem; border-radius:999px;
  font-size:.78rem; border:1px solid var(--aa-border);
  background:#fff;
}
.aa-badge.dot::before{
  content:''; width:.45rem; height:.45rem; border-radius:999px; background:var(--aa-muted);
}
.aa-badge.ok{border-color:#bbf7d0; background:#f0fdf4;}
.aa-badge.ok.dot::before{background:var(--aa-success);}
.aa-badge.warn{border-color:#fde68a; background:#fffbeb;}
.aa-badge.warn.dot::before{background:var(--aa-warning);}
.aa-badge.bad{border-color:#fecaca; background:#fef2f2;}
.aa-badge.bad.dot::before{background:var(--aa-danger);}

/* Sidebar (mobile-first: off-canvas) */
.sidebar{
  background:var(--aa-sidebar);
  color:var(--aa-sidebar-text, #fff);
  height:100vh; /* lock sidebar to viewport height */
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* keep nav scrolling inside, not outside background */
  position:relative;
  width:260px;
  max-width:100%;
  white-space:nowrap; /* prevent horizontal scrollbars */
}
.sidebar .nav-link{
  color:var(--aa-sidebar-text, #fff);
  display:flex; align-items:center; gap:10px;
  padding:12px 18px;
  text-decoration:none;
  border-left:4px solid transparent;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar .nav-link i{flex:0 0 auto; width:18px; text-align:center;}
.sidebar .nav-link:hover{background:var(--aa-sidebar-hover, rgba(255,255,255,.07));}
.sidebar .nav-link.active{
  background:var(--aa-sidebar-hover, rgba(255,255,255,.12));
  border-left-color:var(--aa-accent);
  color:var(--aa-sidebar-text, #fff);
}
.sidebar-content{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.sidebar .nav{
  overflow-x:hidden;
}
.sidebar .nav.flex-column.flex-grow-1{ /* legacy markup compatibility */
  flex:1 1 auto;
  overflow:auto;
}
.sidebar-footer{
  padding:12px;
  text-align:center;
  font-size:12px;
  background:var(--aa-sidebar);
  color:color-mix(in srgb, var(--aa-sidebar-text, #fff) 75%, transparent);
}
.sidebar-section{
  width:100%;
  background:transparent;
  border:0;
  color:color-mix(in srgb, var(--aa-sidebar-text, #fff) 75%, transparent);
  text-align:left;
  padding:10px 18px 6px 18px;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.sidebar-section:hover{color:var(--aa-sidebar-text, #fff);}
.sidebar-section .chev{opacity:.9}
.sidebar-section-links{display:block}
.sidebar-section-links.collapsed{display:none}
.aa-sidebar-wrap{
  position:fixed; inset:0 auto 0 0; width:280px; max-width:88vw;
  transform:translateX(-101%);
  transition:transform .22s ease;
  z-index:1040;
  height:100vh; /* keep sidebar background full height on all breakpoints */
  background:var(--aa-sidebar);
  overflow:hidden;
}

/* Sidebar role badge: remove inline colors from templates */
.aa-role-badge{
  background: color-mix(in srgb, var(--aa-sidebar-text, #fff) 12%, transparent);
  border-color: color-mix(in srgb, var(--aa-sidebar-text, #fff) 22%, transparent);
  color: var(--aa-sidebar-text, #fff);
}

/* Notifications dropdown styling (moved from inline styles) */
.aa-notif-list{max-height:340px;overflow:auto}
.aa-notif-item{border-bottom:1px solid var(--aa-border);padding:.6rem .75rem;cursor:pointer}
.aa-notif-item:last-child{border-bottom:none}
.aa-notif-item.unread{background:color-mix(in srgb, var(--aa-secondary) 12%, var(--aa-bg) 88%)}
.aa-notif-item .meta{font-size:.75rem;color:var(--aa-muted)}
.aa-notif-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.aa-notif-dot.normal{background:var(--aa-muted)}
.aa-notif-dot.important{background:var(--aa-accent)}
.aa-notif-dot.urgent{background:var(--aa-danger)}

/* Public pages (index/scan/qr) helpers */
.aa-wrap{max-width:560px;margin:4vh auto}
.aa-card-soft{border-radius:var(--aa-radius);box-shadow:var(--shadow-soft);border:1px solid var(--aa-border)}
.aa-pill{padding:2px 10px;border-radius:999px;font-size:.78rem;border:1px solid var(--aa-border);background:var(--surface-neutral);color:var(--aa-text)}
.aa-pill-live{background:var(--surface-success);color:var(--text-success);border-color:color-mix(in srgb, var(--success) 28%, var(--border-color) 72%)}
.aa-pill-upcoming{background:var(--surface-warning);color:var(--text-warning);border-color:color-mix(in srgb, var(--warning) 28%, var(--border-color) 72%)}
.aa-pill-done{background:var(--surface-neutral);color:var(--aa-text);border-color:var(--border-color)}
.aa-slot{border-left:3px solid var(--border-color);padding:.75rem;border-radius:12px}
.aa-slot.live{border-color:var(--aa-primary);background:var(--surface-success)}
.aa-slot.upcoming{border-color:var(--aa-accent);background:var(--surface-warning)}
.aa-slot.done{border-color:var(--border-color);background:var(--surface-neutral);opacity:.95}
.aa-fac-card{border:1px solid var(--aa-border);border-radius:14px;padding:14px;background:var(--aa-card);height:100%;cursor:pointer}
.aa-avatar{border:1px solid var(--aa-border)}
.aa-sidebar-open .aa-sidebar-wrap{transform:translateX(0);}
.aa-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.55);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
  z-index:1039;
}
.aa-sidebar-open .aa-backdrop{opacity:1; pointer-events:auto;}

@media (min-width: 992px){
  .aa-sidebar-wrap{position:sticky; top:0; height:100vh; transform:none; width:auto; max-width:none; z-index:auto;}
  .aa-backdrop{display:none;}
}

/* Forms: mobile-friendly touch targets */
.form-control,.form-select,.btn{border-radius:12px;}
.btn{padding:.55rem .9rem;}
.input-group .btn{border-radius:12px;}

/* Loading skeletons */
.aa-skeleton{
  background:linear-gradient(90deg,#eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size:200% 100%;
  animation:aa-shimmer 1.25s infinite;
  border-radius:12px;
}
@keyframes aa-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}