/* DCU ExamHub — Home & mobile UX layer. Loaded LAST.
   Goal: answer "when is my next exam, where, how long left?" in the first screen.
   No exam data, Supabase logic or admin behaviour is changed here. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,select,input,textarea{-webkit-tap-highlight-color:transparent}
.view>.section-head h1,.welcome h1,.next-card h2,.center-name{text-wrap:balance}
.metric strong,.count-unit strong,.timer-face,.datebox strong,.streak-content strong{font-variant-numeric:tabular-nums}
.top-title .eyebrow{display:none}
.top-title strong{font-size:18px}

/* ================= HOME: order by importance (visual order only) ================= */
#dashboard.active{display:flex!important;flex-direction:column}
#dashboard>*{order:50}
#dashboard>.welcome{order:1}
#dashboard>.routine-chip{order:2}
#dashboard>.filter-panel{order:3}
#dashboard>.hero-grid{order:4}
#dashboard>.banner-section{order:5}
#dashboard>.metrics{order:6}
#dashboard>.duo-grid{order:7}
#dashboard>.mobile-download{order:8}
#dashboard>.myroutine-box{order:9}
/* Quick tiles repeated the sidebar / bottom navigation */
#dashboard>.quick-access{display:none!important}

/* ================= Routine chip (replaces the always-open selector panel) ================= */
.routine-chip{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0 0 14px;padding:11px 14px 11px 16px;text-align:left;background:#fff;border:1px solid #e1e5f7;border-radius:16px;color:#1c3152;box-shadow:0 4px 16px rgba(40,41,126,.05);transition:border-color .15s ease,box-shadow .15s ease}
.routine-chip:hover{border-color:#b5c0f2;box-shadow:0 6px 20px rgba(40,41,126,.09)}
.routine-chip-main{display:grid;gap:1px;min-width:0}
.routine-chip-main b{font-size:16px;line-height:1.3;color:#14284a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.routine-chip-main small{font-size:13px;line-height:1.35;color:#566383;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.routine-chip-edit{flex:0 0 auto;font-size:13px;font-weight:800;color:#3447b8;background:#edf0ff;border-radius:999px;padding:8px 15px;min-height:36px;display:inline-flex;align-items:center}
#dashboard #routineFilterPanel.is-collapsed{display:none!important}
#routineFilterPanel .tiny-tag{display:none} /* was a hard-coded "Session 2024–25"; the Session select shows the real one */

/* ================= Greeting: one calm line instead of a second hero ================= */
@media(min-width:761px){
 #dashboard .welcome{min-height:0!important;padding:14px 24px!important;margin-bottom:14px!important}
 #dashboard .welcome h1{font-size:clamp(22px,2.1vw,28px)!important;margin:0 0 2px!important}
 #dashboard .welcome .muted{font-size:14px!important}
 #dashboard .welcome-art{font-size:34px!important}
}

/* ================= Next exam card (exam + center together) ================= */
#dashboard .hero-grid{margin-bottom:18px}
#dashboard .next-card .next-header .hero-status{font-size:12px!important}
#dashboard .next-widget-pin{font-size:12px!important}
.next-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.next-action{min-height:42px;padding:9px 16px;border-radius:12px;border:1px solid rgba(60,70,160,.22);background:rgba(255,255,255,.78);color:#2c3a86;font-size:14px;font-weight:800;transition:background-color .15s ease,transform .12s ease}
.next-action:hover{background:#fff}
.next-action:active{transform:scale(.98)}
.sync-line{display:flex;align-items:center;gap:7px;margin:6px 0 0;font-size:12.5px;line-height:1.4;color:#5a6785}
.sync-line:empty{display:none}
.sync-line::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#9aa6c0}
.sync-line.is-live::before{background:#1eae83;box-shadow:0 0 0 3px #1eae8322}
.sync-line.is-stale::before{background:#d99a1f}
.sync-line.is-error::before{background:#d4493f}
.exam-day-note{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:11px 14px;border-radius:13px;background:#fff3d6;border:1px solid #efce84;color:#684808;font-size:14px;line-height:1.4;font-weight:700}
.exam-day-note[hidden]{display:none!important}
.exam-day-link{border:0;border-radius:9px;background:#684808;color:#fff;font-size:13px;font-weight:800;padding:7px 13px;min-height:36px}
#dashboard .next-card.is-exam-day{box-shadow:0 0 0 2px #f0b94a,0 14px 36px rgba(150,100,10,.16)!important}

@media(min-width:761px){
 #dashboard .hero-grid{display:block!important}
 #dashboard .center-card{display:none!important}
 #dashboard .next-card{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(250px,.46fr);grid-template-areas:"head head" "note note" "next center" "count center" "actions center" "time time" "sync sync";column-gap:28px;row-gap:0;align-content:start;min-height:0!important;padding:24px 28px 20px!important}
 #dashboard .next-card>.next-header{grid-area:head}
 #dashboard .next-card>.exam-day-note{grid-area:note}
 #dashboard .next-card>#nextContent{grid-area:next}
 #dashboard .next-card>.count-grid{grid-area:count}
 #dashboard .next-card>.mobile-center-inline{display:block!important;grid-area:center;align-self:stretch;margin:22px 0 0;padding:18px;border-radius:16px;background:rgba(255,255,255,.62);border:1px solid rgba(110,95,190,.16)}
 #dashboard .next-card>.next-actions{grid-area:actions}
 #dashboard .next-card>.time-notice{grid-area:time;margin-top:16px!important}
 #dashboard .next-card>.sync-line{grid-area:sync}
 #dashboard .mobile-center-label{display:block;font-size:13px;font-weight:800;letter-spacing:0;color:#4564a4;margin-bottom:8px}
 #dashboard .mobile-center-inline .center-name{font-size:20px!important;line-height:1.3!important;margin:0!important;letter-spacing:-.2px!important;color:#1c3152!important;overflow-wrap:anywhere}
 #dashboard .mobile-center-inline .center-code{display:inline-flex!important;font-size:13px!important;padding:6px 10px!important;margin:10px 0 0!important;border-radius:8px!important;background:#eaf0ff!important;color:#3454a2!important}
 #dashboard .mobile-center-inline .center-caption{display:none!important}
}

/* ================= Metrics: three that matter ================= */
#dashboard .metrics .metric:first-child{display:none!important} /* "Total papers" = Completed + Remaining */
#dashboard .metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:0 0 18px!important}

/* ================= Loading skeletons (instead of an empty card) ================= */
@keyframes uxShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
#nextContent:empty::before,#upcomingList:empty::before{content:"";display:block;height:84px;border-radius:12px;background:linear-gradient(90deg,rgba(150,160,200,.16),rgba(150,160,200,.34),rgba(150,160,200,.16));background-size:200% 100%;animation:uxShimmer 1.4s linear infinite}
#upcomingList:empty::before{height:150px}
#countGrid:empty::before{content:"";display:block;height:64px;border-radius:12px;background:linear-gradient(90deg,rgba(150,160,200,.14),rgba(150,160,200,.3),rgba(150,160,200,.14));background-size:200% 100%;animation:uxShimmer 1.4s linear infinite}

/* ================= Pinned widget: keep text legible ================= */
#nextExamWidget .next-widget-label{font-size:11px}
#nextExamWidget .next-widget-unit span{font-size:10px}
#nextExamWidget .next-widget-date{font-size:12px}

/* ================= Desktop extras ================= */
@media(min-width:761px){
 .topbar{position:sticky;top:0;z-index:25}
 #dashboard .myroutine-box{padding:20px 24px!important;border-radius:20px!important;margin-top:4px!important}
 #dashboard .myroutine-head h2{font-size:18px!important}
 #dashboard .myroutine-head p{display:block!important;font-size:14px!important;margin-top:3px!important}
 #dashboard .myroutine-pill{font-size:13px!important;padding:6px 12px!important}
 #dashboard .myroutine-details{font-size:15px!important;margin-top:12px!important}
 #dashboard .myroutine-actions{gap:10px!important;margin-top:14px!important}
 #dashboard .myroutine-actions button{min-height:44px!important;font-size:14px!important;padding:8px 18px!important;border-radius:11px!important}
 #dashboard .myroutine-status{font-size:13px!important}
}

/* ================= Mobile ================= */
@media(max-width:760px){
 /* header: no clipped brand, notch-safe */
 .topbar{height:auto!important;min-height:64px;padding:max(8px,env(safe-area-inset-top)) 14px 8px!important;gap:10px}
 .mini-brand{flex:1 1 auto;min-width:0;gap:8px!important;font-size:17px!important;letter-spacing:-.3px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mini-brand img{flex:0 0 auto;height:36px!important;width:36px!important}
 .mini-brand small{display:none!important}
 .header-actions{flex:0 0 auto;gap:6px!important}
 .connection{font-size:11.5px!important;padding:6px 9px!important;white-space:nowrap}
 .header-actions .iconbutton{width:38px;height:38px;flex:0 0 auto}

 /* banner: whole artwork visible, true 16:9 uploads still fill the frame */
 #dashboard .banner-frame{isolation:isolate;background:#e8eef8!important}
 #dashboard .banner-frame:before{content:"";position:absolute;inset:-20px;z-index:-1;background-image:var(--banner-image);background-size:cover;background-position:center;filter:blur(20px);opacity:.5}
 #dashboard .banner-frame img,.banner-frame img{object-fit:contain!important;position:relative;z-index:0}
 .banner-controls button{width:36px!important;height:36px!important}

 /* chip + selector panel */
 .routine-chip{margin-bottom:12px;padding:10px 12px 10px 14px;border-radius:15px}
 .routine-chip-main b{font-size:15px}
 #dashboard .filter-panel .selectors,#profileRoutineSettings .filter-panel .selectors{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .filter-panel .selectors label:nth-child(-n+2){grid-column:1/-1}
 .filter-panel .selectors select{min-height:46px}
 .routine-setup-done{width:100%;min-height:46px!important;font-size:15px}
 .routine-setup-help{font-size:13px!important}

 /* next card: readable sizes, comfortable actions */
 #dashboard .next-card{padding:16px 15px 14px!important}
 #dashboard .next-header .next-heading-label{font-size:12px!important}
 #dashboard .count-unit span{font-size:10.5px!important}
 #dashboard .mobile-center-label{font-size:12px!important;letter-spacing:0!important;font-weight:800!important}
 #dashboard .mobile-center-inline .center-name{font-size:15px!important}
 #dashboard .mobile-center-inline .center-code{font-size:12px!important;padding:4px 9px!important}
 #dashboard .time-notice{font-size:12px!important}
 .next-action{flex:1 1 0;justify-content:center;font-size:13.5px}
 .sync-line{font-size:12px}

 /* stats */
 #dashboard .metrics{gap:8px!important;margin:0 0 14px!important}
 #dashboard .metrics .metric{padding:11px 10px!important;border-radius:14px!important;min-width:0}
 #dashboard .metrics .metric>span{font-size:12px!important;font-weight:700;line-height:1.25!important}
 #dashboard .metrics .metric strong{font-size:24px!important;line-height:1.15!important}

 /* saved routine + install */
 #dashboard .myroutine-head h2{font-size:16px!important}
 #dashboard .myroutine-details{font-size:14px!important}
 #dashboard .myroutine-pill{font-size:12px!important}
 #dashboard .myroutine-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
 #dashboard .myroutine-actions .primary{grid-column:1/-1}
 #dashboard .myroutine-actions button{min-height:44px!important;font-size:13.5px!important;padding:8px 10px!important}
 #dashboard .myroutine-status{font-size:12.5px!important}
 #dashboard .mobile-download{grid-template-columns:30px minmax(0,1fr) auto!important;column-gap:10px!important}
 #dashboard .mobile-download .install-card-icon{align-self:center;justify-self:center;display:grid!important;place-items:center;width:30px!important;height:30px!important}
 #dashboard .mobile-download .install-card-copy strong{font-size:13.5px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
 #dashboard .mobile-download .install-app-cta{min-height:40px!important;font-size:12.5px!important;padding:8px 12px!important}

 /* routine page actions: PDF + Share on a row, Add to calendar full width */
 #schedule>.section-head{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
 #schedule>.section-head>div:first-child{grid-column:1/-1}
 #schedule>.section-head .small{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center}
 #schedule>.section-head #exportIcs{grid-column:1/-1}
 .searchbox{min-height:48px}
 .searchbox input{font-size:16px}

 .gapchip{font-size:12px!important}
 .tiny-tag{font-size:12px!important}
 .bottom-nav a{min-height:56px;justify-content:center}
 #toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;left:14px!important;right:14px!important;text-align:center}
}
@media(max-width:340px){
 #dashboard .filter-panel .selectors,#profileRoutineSettings .filter-panel .selectors{grid-template-columns:1fr!important}
 .mini-brand{font-size:16px!important}
}

/* ================= Everyone ================= */
.primary:active,.secondary:active,.danger:active,.install-app-cta:active,.mode-btn:active{transform:scale(.98)}
.primary,.secondary,.danger,.install-app-cta,.mode-btn,.navlink,.calendar-day{transition:transform .12s ease,background-color .2s ease,filter .2s ease}
.calendar-day{min-height:48px}
body.theme-dark .iconbutton{background:#213852;color:#f1f6fa;border-color:#415672}

/* ================= Dark theme for the new pieces ================= */
body.theme-dark .routine-chip{background:#192c43;border-color:#334963;color:#eef4fb;box-shadow:none}
body.theme-dark .routine-chip-main b{color:#f4f8ff}
body.theme-dark .routine-chip-main small{color:#b9c8dc}
body.theme-dark .routine-chip-edit{background:#2b3f66;color:#dbe5ff}
body.theme-dark .next-action{background:rgba(255,255,255,.08);border-color:#4a5f86;color:#e8efff}
body.theme-dark .sync-line{color:#b9c8dc}
body.theme-dark .exam-day-note{background:#4a3921;border-color:#79663a;color:#ffe4a2}
body.theme-dark .exam-day-link{background:#ffe4a2;color:#4a3921}
body.theme-dark #dashboard .next-card>.mobile-center-inline{background:rgba(255,255,255,.06);border-color:#41527a}
body.theme-dark #dashboard .mobile-center-label{color:#b9c8ff}
body.theme-dark #dashboard .mobile-center-inline .center-name{color:#f4f7ff!important}
body.theme-dark #dashboard .mobile-center-inline .center-code{background:#3b3566!important;color:#e9deff!important}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Dark theme: "Keep on screen" pill was white-on-white */
body.theme-dark .next-widget-pin{background:#2b3f66!important;color:#e3ebff!important;border-color:#4a5f86!important}
body.theme-dark .next-widget-pin[aria-pressed="true"]{background:#1f4a3f!important;color:#c9f3e2!important;border-color:#2f7a63!important}
body.theme-dark #dashboard .time-notice{color:#b9c8dc!important}


/* Dark-mode date badge contrast fix — routine cards.
   The general dark-theme rules color strong/small text pale, but the date badge
   keeps a light background. Set the badge and its date/month text together. */
body.theme-dark #schedule .routine-exam-card .timeline-bullet {
  background: #263b57 !important;
  border-color: #4a6380 !important;
  color: #f0f6ff !important;
}
body.theme-dark #schedule .routine-exam-card .timeline-bullet strong,
body.theme-dark #schedule .routine-exam-card .timeline-bullet small {
  color: #f0f6ff !important;
  opacity: 1 !important;
}
body.theme-dark #schedule .routine-exam-card.is-next-exam .timeline-bullet {
  background: #2459a8 !important;
  border-color: #5a91e0 !important;
  color: #ffffff !important;
}
body.theme-dark #schedule .routine-exam-card.is-next-exam .timeline-bullet strong,
body.theme-dark #schedule .routine-exam-card.is-next-exam .timeline-bullet small {
  color: #ffffff !important;
}
body.theme-dark #schedule .routine-exam-card.is-past .timeline-bullet {
  background: #2b394b !important;
  border-color: #45556c !important;
  color: #d3deef !important;
}
body.theme-dark #schedule .routine-exam-card.is-past .timeline-bullet strong,
body.theme-dark #schedule .routine-exam-card.is-past .timeline-bullet small {
  color: #d3deef !important;
}
body.theme-dark #schedule .routine-exam-card.is-undated .timeline-bullet {
  background: #493a25 !important;
  border-color: #7a5b2a !important;
  color: #ffe0a3 !important;
}
body.theme-dark #schedule .routine-exam-card.is-undated .timeline-bullet strong,
body.theme-dark #schedule .routine-exam-card.is-undated .timeline-bullet small {
  color: #ffe0a3 !important;
}