/* qr-design-system.css — layered after argon-dashboard.css */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Open+Sans:wght@400;600&display=swap');

:root {
  --qr-font-display: 'Plus Jakarta Sans', sans-serif;
  --qr-font-body:    'Open Sans', sans-serif;
  /* indigo defaults so unthemed bodies still look intentional */
  --qr-primary:#4f46e5; --qr-primary-dark:#3730a3;
  --qr-gradient:linear-gradient(160deg,#4f46e5 0%,#6d28d9 100%);
  --qr-accent-light:#ede9fe; --qr-accent-text:#6d28d9;
}
[data-theme="indigo"] { --qr-primary:#4f46e5; --qr-primary-dark:#3730a3; --qr-gradient:linear-gradient(160deg,#4f46e5 0%,#6d28d9 100%); --qr-accent-light:#ede9fe; --qr-accent-text:#6d28d9; }
[data-theme="teal"]   { --qr-primary:#0f766e; --qr-primary-dark:#134e4a; --qr-gradient:linear-gradient(160deg,#0f766e 0%,#059669 100%); --qr-accent-light:#d1fae5; --qr-accent-text:#059669; }
[data-theme="navy"]   { --qr-primary:#0f172a; --qr-primary-dark:#020617; --qr-gradient:linear-gradient(160deg,#0f172a 0%,#1e3a5f 100%); --qr-accent-light:#dbeafe; --qr-accent-text:#1e40af; }
[data-theme="rose"]   { --qr-primary:#be123c; --qr-primary-dark:#9f1239; --qr-gradient:linear-gradient(160deg,#be123c 0%,#e11d48 100%); --qr-accent-light:#ffe4e6; --qr-accent-text:#e11d48; }

body { font-family: var(--qr-font-body); }
h1,h2,h3,h4,h5,h6,.card-title,.navbar-brand { font-family: var(--qr-font-display); }

/* Map Argon's primary onto the theme so existing .bg-primary / .text-primary follow the theme */
.bg-primary { background: var(--qr-gradient) !important; }
.text-primary { color: var(--qr-primary) !important; }
.btn-primary { background: var(--qr-primary); border-color: var(--qr-primary); }
.btn-primary:hover { background: var(--qr-primary-dark); border-color: var(--qr-primary-dark); }

/* Shared component primitives reused across pages */
.qr-page-header { background: var(--qr-gradient); color:#fff; border-radius:0 0 18px 18px; padding:20px 18px 56px; }
.qr-float-zone  { position:relative; z-index:2; margin-top:-34px; }
.qr-card        { background:#fff; border-radius:14px; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.qr-filter-chip { font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; background:var(--qr-accent-light); color:var(--qr-accent-text); border:none; cursor:pointer; }
.qr-filter-chip.active { background:var(--qr-primary); color:#fff; }

/* Sidebar redesign */
/* .sidenav { background: var(--qr-gradient) !important; display:flex; flex-direction:column; } */
.sidenav { background: var(--qr-primary-dark) !important; display:flex; flex-direction:column; }
.sidenav .nav-link { color: rgba(255,255,255,.85) !important; border-radius:8px; }
.sidenav .nav-link:hover { background: rgba(255,255,255,.10) !important; color:#fff !important; }
.sidenav .nav-link.active { background: rgba(255,255,255,.18) !important; color:#fff !important; box-shadow: inset -3px 0 0 #fff; }
.sidenav .nav-link .icon { background: rgba(255,255,255,.12); }
.sidenav .nav-link.active .icon { background: rgba(255,255,255,.25); }
.sidenav .nav-link .icon i { color:#fff !important; }
.sidenav #org-name { color:#fff; font-size:14px; line-height:1.2; }
.sidenav .qr-org-sub { font-size:10px; color: rgba(255,255,255,.55); }
.sidenav .qr-org-logo { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.sidenav .qr-org-logo img { max-width:100%; max-height:100%; }
.sidenav hr.horizontal.light { background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.3), rgba(255,255,255,0)); }
.qr-nav-section { font-size:10px; letter-spacing:.6px; color: rgba(255,255,255,.6); }

/* Sidebar user footer */
.sidenav .qr-sidebar-footer { margin-top:auto; padding:12px 14px; border-top:1px solid rgba(255,255,255,.12); }
.sidenav .qr-user-avatar { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.25); border:1.5px solid rgba(255,255,255,.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; overflow:hidden; }
.sidenav .qr-user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.sidenav .qr-user-name { font-size:12px; font-weight:700; color:#fff; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:96px; }
.sidenav .qr-user-title { font-size:10px; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:96px; }
.sidenav .qr-user-logout { color:rgba(255,255,255,.55); font-size:14px; }
.sidenav .qr-user-logout:hover { color:#fff; }

/* Sidebar layout: fixed brand header + fixed user footer, scrollable nav region */
.sidenav { overflow: hidden; }                       /* aside itself does not scroll */
.sidenav .sidenav-header,
.sidenav > hr.horizontal { flex: 0 0 auto; }
#sidenav-collapse-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sidenav .qr-sidebar-footer { flex: 0 0 auto; margin-top: auto; }   /* pinned to bottom */

/* Mobile hamburger — fixed and OUTSIDE the (transformed) sidenav */
.qr-nav-burger {
  position: fixed; top: 14px; right: 14px; z-index: 1040;
  width: 42px; height: 42px; border-radius: 12px; border: none;
  background: var(--qr-primary); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer;
}
/* Dimmed backdrop behind the slid-in drawer */
.qr-nav-backdrop {
  position: fixed; inset: 0; z-index: 1035;
  background: rgba(0,0,0,.45); opacity: 0; visibility: hidden;
  transition: opacity .25s ease;
}
body.qr-nav-open .qr-nav-backdrop { opacity: 1; visibility: visible; }
body.qr-nav-open .qr-nav-burger { display: none; }   /* hide burger while open */

/* Hide the legacy per-page absolute toggles to avoid duplicate buttons */
.main-content #iconNavbarSidenav { display: none !important; }

/* Below xl: keep the slid-in panel above the dim backdrop */
@media (max-width: 1199.98px) {
  .sidenav { z-index: 1045; }
}
/* xl and up: drawer chrome never shows */
@media (min-width: 1200px) {
  .qr-nav-burger, .qr-nav-backdrop { display: none !important; }
}

/* User-info footer trigger + drop-up menu */
#sidebarUserBtn { cursor: pointer; padding: 6px; border-radius: 10px; transition: background .15s ease; }
#sidebarUserBtn:hover, #sidebarUserBtn[aria-expanded="true"] { background: rgba(255,255,255,.10); }
.qr-user-caret { color: rgba(255,255,255,.55); font-size: 12px; transition: transform .15s ease; }
#sidebarUserBtn[aria-expanded="true"] .qr-user-caret { transform: rotate(180deg); }

.qr-user-menu {
  position: fixed; z-index: 10000; min-width: 200px; /* above the sidenav's z-index:9999 */
  background: #fff; border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); border: 1px solid rgba(0,0,0,.06);
}
.qr-user-menu[hidden] { display: none; }
.qr-user-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: #344767; text-decoration: none;
}
.qr-user-menu-item i { width: 16px; text-align: center; color: var(--qr-primary); }
.qr-user-menu-item:hover { background: var(--qr-accent-light); color: var(--qr-accent-text); }
.qr-user-menu-item.disabled { opacity: .5; pointer-events: none; }
.qr-user-menu-danger { color: #d92d20; }
.qr-user-menu-danger i { color: #d92d20; }
.qr-user-menu-danger:hover { background: #fee4e2; color: #b42318; }

/* =========================================================
   Dashboard redesign (Task 7) — appended, non-destructive
   ========================================================= */
.qr-dash { max-width: 1100px; }

/* 1. Greeting header */
.qr-dash-header { margin-bottom: 0; }
.qr-dash-sub { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px; }
.qr-dash-qr-btn {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  border-radius: 9px; padding: 7px 13px; font-size: 12px; font-weight: 700; color: #fff;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap;
}
.qr-dash-qr-btn:hover { background: rgba(255,255,255,.28); color: #fff; }
.qr-dash-bell {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; position: relative; text-decoration: none; flex-shrink: 0;
}
.qr-dash-bell:hover { background: rgba(255,255,255,.28); color: #fff; }
.qr-dash-bell-dot {
  width: 9px; height: 9px; background: #fb6340; border-radius: 50%;
  position: absolute; top: 4px; right: 4px; border: 2px solid var(--qr-primary-dark);
}

/* 2. Floating stat cards */
.qr-stat-card { padding: 14px 16px; height: 100%; }
.qr-stat-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 9px;
}
.qr-stat-val { font-size: 24px; font-weight: 800; color: #1e293b; line-height: 1; font-family: var(--qr-font-display); }
.qr-stat-label { font-size: 10px; color: #94a3b8; margin-top: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }

/* Section spacing */
.qr-dash-section { margin-top: 16px; margin-bottom: 32px; }

/* Generic dashboard card (qr-dc) */
.qr-dc { overflow: hidden; display: flex; flex-direction: column; }
.qr-dc-head { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f1f5f9; }
.qr-dc-title { font-size: 15px; font-weight: 800; color: var(--qr-accent-text); display: flex; align-items: center; gap: 8px; font-family: var(--qr-font-display); }
.qr-dc-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--qr-accent-light); color: var(--qr-accent-text); }
.qr-dc-body { padding: 14px 16px; flex: 1 1 auto; display: flex; flex-direction: column; }
/* Footer "View all" link anchored to the bottom of the card */
.qr-dc-foot { margin-top: auto; }

/* 3. Leader Message — dark feature card */
.qr-leader-card { background: linear-gradient(135deg,#1e293b 0%,#0f172a 100%); border-left: 4px solid var(--qr-primary); }
.qr-leader-card .qr-dc-head { border-bottom-color: rgba(255,255,255,.08); }
.qr-leader-card .qr-dc-title { color: #fff; }
.qr-leader-card .qr-dc-icon { background: rgba(255,255,255,.12); color: #c4b5fd; }
.qr-leader-card .qr-dc-body { color: rgba(255,255,255,.85); }
/* Recolour the legacy leader card injected from get_specialties so it reads on dark */
.qr-leader-card .qr-dc-body .card { background: transparent; box-shadow: none; }
.qr-leader-card .qr-dc-body .card-body { padding: 0; }
.qr-leader-card .qr-dc-body h5,
.qr-leader-card .qr-dc-body h6 { color: #fff !important; }
.qr-leader-card .qr-dc-body .text-dark { color: #e2e8f0 !important; }
.qr-leader-card .qr-dc-body .btn-info { background: var(--qr-primary); border-color: var(--qr-primary); color: #fff; }

/* 4. Celebrations */
.qr-celebration-col { background: #f8fafc; border-radius: 10px; padding: 12px; height: 100%; }
.qr-celebration-heading { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.qr-cel-bday { color: #be185d; }
.qr-cel-anniv { color: #1d4ed8; }
.qr-celebration-col .card { box-shadow: none; background: transparent; }
.qr-celebration-col .card-body { padding: 0; }

/* 4a. Special-day banner (user's own birthday / work anniversary) */
.qr-special-day-banner {
  background: linear-gradient(135deg, #be185d 0%, #7c3aed 100%);
  border: none; gap: 14px; padding: 16px 18px;
}
.qr-special-day-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,.2); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}

/* 4c. Public holidays — sits directly above the Celebrations card. Rose -> amber
   so it reads as festive without colliding with the pink/purple special-day
   banner above it or the Meetings amber in the calendar. */
.qr-holiday-card {
  position: relative; overflow: hidden; border: none;
  background: linear-gradient(135deg, #f5365c 0%, #fb6340 100%);
  padding: 16px 18px;
}
/* Soft confetti wash — decorative only, sits under the content. */
.qr-holiday-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image:
    radial-gradient(circle at 12% 22%, #fff 2px, transparent 2.5px),
    radial-gradient(circle at 76% 14%, #fff 1.5px, transparent 2px),
    radial-gradient(circle at 44% 78%, #fff 2px, transparent 2.5px),
    radial-gradient(circle at 90% 66%, #fff 1.5px, transparent 2px);
  background-size: 120px 120px;
}
.qr-holiday-head {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: rgba(255,255,255,.85); margin-bottom: 10px;
}
.qr-holiday-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px; padding: 8px 0;
}
.qr-holiday-row + .qr-holiday-row { border-top: 1px solid rgba(255,255,255,.22); }
.qr-holiday-flags {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px;
  min-width: 56px; height: 46px; padding: 0 12px; border-radius: 14px;
  background: rgba(255,255,255,.2); font-size: 24px; line-height: 1;
}
.qr-holiday-flags-more { font-size: 12px; font-weight: 800; color: #fff; margin-left: 4px; }
.qr-holiday-text { min-width: 0; }
.qr-holiday-title {
  margin: 0; color: #fff; font-weight: 700; font-size: 15px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qr-holiday-sub {
  display: block; font-size: 12px; color: rgba(255,255,255,.9); line-height: 1.35;
}
/* Narrow screens: let the flags sit above the wrapped text rather than squeezing it. */
@media (max-width: 575.98px) {
  .qr-holiday-row { flex-wrap: wrap; gap: 10px; }
  .qr-holiday-title { white-space: normal; }
}

/* 4b. Your Wishes — clickable quiz/poll rows reuse the notice-row hover */
.qr-qp-row { cursor: pointer; }
.qr-qp-row:hover { background: #f8fafc; }
.qr-qp-row-status { flex-shrink: 0; }

/* 5. Poll + Quiz / generic injected legacy cards inside qr-dc bodies */
.qr-dc-body .card { box-shadow: none; background: transparent; }
.qr-dc-body > .card .card-body { padding: 0; }
.qr-dc-body .col-xl-4, .qr-dc-body .col-sm-6, .qr-dc-body .col-md-8, .qr-dc-body .col-lg-6 { width: 100%; max-width: 100%; flex: 0 0 100%; padding-left: 0; padding-right: 0; }

/* Empty states */
.qr-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 12px; color: #94a3b8; text-align: center; }
.qr-empty-state i { font-size: 22px; opacity: .55; }
.qr-empty-state span { font-size: 12px; font-weight: 600; }

/* Keep injected dashboard cards (notices/events/news from loadDashGrid) tidy under new layout */
.qr-dash-section #dashGrid .card-header h6 { font-family: var(--qr-font-display); }

/* =========================================================
   Content + Directory pages redesign (Task 8) — appended, non-destructive
   ========================================================= */
.qr-content-wrap { max-width: 1100px; }

/* Gradient page header with embedded search */
.qr-ph-title { font-size: 22px; font-weight: 800; color: #fff; font-family: var(--qr-font-display); line-height: 1.1; }
.qr-ph-sub   { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 3px; }
.qr-ph-search {
  flex: 1; max-width: 280px; min-width: 180px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 8px;
}
.qr-ph-search i { color: rgba(255,255,255,.7); font-size: 13px; }
.qr-ph-search input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: 13px;
}
.qr-ph-search input::placeholder { color: rgba(255,255,255,.55); }

/* Filter zone (chips floated over the header in a card) */
.qr-filter-zone { position: relative; z-index: 2; margin-top: -30px; }
.qr-filter-bar  { padding: 10px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qr-filter-label { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .6px; }
.qr-view-toggle { margin-left: auto; display: flex; background: #f1f5f9; border-radius: 9px; overflow: hidden; }
.qr-view-btn { padding: 6px 12px; font-size: 12px; font-weight: 700; color: #64748b; cursor: pointer; border: none; background: none; }
.qr-view-btn.active { background: var(--qr-primary); color: #fff; border-radius: 8px; }

/* ── NEWS: re-skin injected .card cards into the new grid look ── */
.qr-news-grid { padding-top: 6px; }
.qr-news-grid .card {
  border: none; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  transition: transform .15s, box-shadow .15s;
}
.qr-news-grid a:hover .card { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.qr-news-grid .card-img-top { height: 140px; object-fit: cover; }
.qr-news-grid .card-title { font-size: 15px; font-weight: 800; color: #1e293b; }
.qr-news-grid a { text-decoration: none; }

/* ── NOTICE BOARD: re-skin injected .card cards with a left accent bar ── */
.qr-notice-grid .card {
  border: none; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  border-left: 4px solid var(--qr-primary);
  transition: transform .15s, box-shadow .15s;
}
.qr-notice-grid .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.11); }
.qr-notice-grid .card-title { font-size: 15px; font-weight: 800; }
.qr-notice-grid [role="button"] { cursor: pointer; }

/* ── STAFF DIRECTORY: re-skin injected table rows into a responsive card grid ── */
/* The endpoint returns <tr> rows; we render them inside a flex grid container and
   restyle the table cells to behave as stacked cards. */
.qr-staff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qr-staff-grid > tbody,
.qr-staff-grid table { display: contents; }
.qr-staff-grid tr {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border-radius: 14px; padding: 16px 10px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  transition: transform .15s, box-shadow .15s;
}
.qr-staff-grid tr:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.qr-staff-grid td { display: block; border: none !important; padding: 0 !important; width: 100%; }
.qr-staff-grid td .d-flex.px-2 { flex-direction: column; align-items: center; }
.qr-staff-grid .avatar { width: 56px !important; height: 56px !important; margin: 0 0 8px 0 !important; border-radius: 50%; }
.qr-staff-grid h6 { font-size: 14px; font-weight: 800; color: #1e293b; }
.qr-staff-grid a { text-decoration: none; }
/* list view: rows back to full-width stacked bars */
.qr-staff-grid.qr-staff-list { display: block; }
.qr-staff-grid.qr-staff-list tr { flex-direction: row; align-items: center; text-align: left; margin-bottom: 8px; padding: 10px 14px; }
.qr-staff-grid.qr-staff-list td .d-flex.px-2 { flex-direction: row; align-items: center; }
.qr-staff-grid.qr-staff-list .avatar { margin: 0 12px 0 0 !important; }
@media (max-width: 991px) { .qr-staff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .qr-staff-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── STAFF PROFILE: gradient header + floating action tiles ── */
.qr-profile-header { display: flex; align-items: center; gap: 16px; }
.qr-profile-avatar {
  width: 112px; height: 112px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  border: 3px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: #fff; background: rgba(255,255,255,.18);
}
.qr-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qr-profile-name { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.15; font-family: var(--qr-font-display); }
.qr-profile-title { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 3px; }
.qr-profile-dept-chip {
  display: inline-block; margin-top: 7px;
  font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 11px;
  background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.25);
}
.qr-profile-avail { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 11px; color: rgba(255,255,255,.8); }
.qr-profile-avail-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.qr-profile-avail-dot.available { background: #22c55e; }

.qr-actions-card { padding: 14px 16px; }
.qr-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qr-action-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 12px; cursor: pointer;
  background: none; border: none; text-decoration: none; transition: background .15s;
}
.qr-action-tile:hover { background: #f8fafc; }
.qr-action-tile-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.qr-action-tile-label { font-size: 11px; font-weight: 700; color: #475569; }
.qr-ico-call    { background: #dcfce7; color: #15803d; }
.qr-ico-whatsapp{ background: #dcfce7; color: #15803d; }
.qr-ico-email   { background: #dbeafe; color: #1d4ed8; }
.qr-ico-qr      { background: var(--qr-accent-light); color: var(--qr-accent-text); }
.qr-ico-kudos   { background: #fef9c3; color: #b45309; }

.qr-details-card { padding: 16px 18px; }
.qr-details-title { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; }
.qr-detail-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.qr-detail-row:last-child { border-bottom: none; }
.qr-detail-icon { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; color: var(--qr-accent-text); }
.qr-detail-label { font-size: 12px; color: #94a3b8; width: 110px; flex-shrink: 0; }
.qr-detail-value { font-size: 13px; color: #334155; font-weight: 600; flex: 1; word-break: break-word; }

.qr-qrcard { background: linear-gradient(135deg,#1e293b,#0f172a); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 16px; }
.qr-qrcard-img { width: 76px; height: 76px; background: #fff; border-radius: 10px; padding: 5px; flex-shrink: 0; }
.qr-qrcard-img img { width: 100%; height: 100%; object-fit: contain; }
.qr-qrcard-label { font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.qr-qrcard-name { font-size: 16px; font-weight: 800; color: #fff; font-family: var(--qr-font-display); }
.qr-qrcard-role { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }

/* QR Card modal (dashboard "My QR Card" + staff profile "QR Card") */
.qr-qrmodal { padding: 8px 8px 24px; }
.qr-qrmodal-img {
  width: 200px; max-width: 70%; aspect-ratio: 1 / 1; margin: 6px auto 16px;
  background: #fff; border: 1px solid #eef0f4; border-radius: 16px; padding: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center;
}
.qr-qrmodal-img img { width: 100%; height: 100%; object-fit: contain; }
.qr-qrmodal-name { font-size: 18px; font-weight: 800; color: #1e293b; font-family: var(--qr-font-display); }
.qr-qrmodal-role { font-size: 13px; color: #64748b; margin-top: 2px; }

/* News row thumbnail (dashboard "Latest News" widget) */
.qr-news-row { text-decoration: none; }
.qr-news-row:hover h6 { color: var(--qr-primary); }
.qr-news-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }

/* Kudos transactions list (banking-style rows) */
.qr-kudos .qr-tx-item {
  border: none; border-left: 3px solid transparent; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 4px;
}
.qr-kudos .qr-tx-item.in  { background: #f0fdf4 !important; border-left-color: #22c55e !important; }
.qr-kudos .qr-tx-item.out { background: #fef2f2 !important; border-left-color: #ef4444 !important; }
.qr-kudos .qr-tx-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.qr-kudos .qr-tx-item h6 { font-size: 13px; font-weight: 800; color: #1e293b; }
.qr-kudos .qr-tx-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.qr-kudos .qr-tx-amount { font-size: 15px; font-weight: 800; font-family: var(--qr-font-display); white-space: nowrap; }
.qr-kudos .qr-tx-amount.in  { color: #15803d; }
.qr-kudos .qr-tx-amount.out { color: #dc2626; }
.qr-kudos .qr-tx-item .text-end .text-xs { color: #94a3b8; }

/* Kudos top background band matches the amber header (band uses .bg-primary = purple) */
.qr-kudos .min-height-300.bg-primary {
  /* background: linear-gradient(135deg, #b45309 0%, #d97706 60%, #f59e0b 100%) !important; */
  background: var(--qr-gradient) !important;
}


/* ── EVENTS CALENDAR (Task 9): FullCalendar theme + event popover ── */
.qr-cal-card { padding: 16px 18px 18px; }

/* FullCalendar visual theming to match the design system */
.qr-cal-card .fc { font-family: var(--qr-font-body); }
.qr-cal-card .fc .fc-toolbar-title { font-size: 18px; font-weight: 800; color: #1e293b; font-family: var(--qr-font-display); }
.qr-cal-card .fc .fc-button-primary {
  background: #fff; border: 1px solid #e2e8f0; color: #64748b;
  font-size: 12px; font-weight: 700; text-transform: capitalize; box-shadow: none;
}
.qr-cal-card .fc .fc-button-primary:hover { background: #f8fafc; color: var(--qr-primary); border-color: #c7d2fe; }
.qr-cal-card .fc .fc-button-primary:not(:disabled):active,
.qr-cal-card .fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--qr-primary); border-color: var(--qr-primary); color: #fff;
}
.qr-cal-card .fc .fc-button:focus { box-shadow: none; }
.qr-cal-card .fc .fc-today-button {
  background: var(--qr-accent-light); border-color: var(--qr-accent-light);
  color: var(--qr-accent-text);
}
.qr-cal-card .fc .fc-today-button:disabled { opacity: .65; }

/* Grid surface */
.qr-cal-card .fc .fc-col-header-cell {
  background: #f8fafc; padding: 8px 0;
}
.qr-cal-card .fc .fc-col-header-cell-cushion {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .5px; text-decoration: none;
}
.qr-cal-card .fc .fc-daygrid-day-number {
  font-size: 12px; font-weight: 700; color: #334155; text-decoration: none;
}
.qr-cal-card .fc .fc-day-other .fc-daygrid-day-number { color: #cbd5e1; }
.qr-cal-card .fc .fc-day-other { background: #fcfcfd; }
.qr-cal-card .fc-theme-standard td,
.qr-cal-card .fc-theme-standard th { border-color: #f1f5f9; }
.qr-cal-card .fc-theme-standard .fc-scrollgrid { border-color: #e2e8f0; border-radius: 12px; overflow: hidden; }

/* Today indicator uses the theme accent */
.qr-cal-card .fc .fc-day-today { background: transparent !important; }
.qr-cal-card .fc .fc-day-today .fc-daygrid-day-number {
  background: var(--qr-accent-text); color: #fff;
  border-radius: 50%; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; margin: 2px;
}

/* Event chips colour-coded by type (matches filter chip palette) */
.qr-cal-card .fc-event {
  border: none; border-radius: 5px; padding: 1px 6px;
  font-size: 11px; font-weight: 700; cursor: pointer;
}
/* Calendar event chips, color-coded per event type. The class is qr-fc-<type>
   (lowercased EventType). Colors mirror web-service/events/event_types.php and
   event-types.js — keep them in sync when adding a type. */
.qr-cal-card .fc-daygrid-event.qr-fc-calendar { background: var(--qr-accent-light); color: var(--qr-accent-text); }
.qr-cal-card .fc-daygrid-event.qr-fc-training { background: #dcfce7; color: #15803d; }
.qr-cal-card .fc-daygrid-event.qr-fc-meetings { background: #ffe9dd; color: #c2410c; }
.qr-cal-card .fc-daygrid-event.qr-fc-holidays { background: #ffe4ec; color: #9f1239; }
.qr-cal-card .fc-event.qr-fc-calendar .fc-event-time,
.qr-cal-card .fc-event.qr-fc-calendar .fc-event-title { color: var(--qr-accent-text); }
.qr-cal-card .fc-event.qr-fc-training .fc-event-time,
.qr-cal-card .fc-event.qr-fc-training .fc-event-title { color: #15803d; }
.qr-cal-card .fc-event.qr-fc-meetings .fc-event-time,
.qr-cal-card .fc-event.qr-fc-meetings .fc-event-title { color: #c2410c; }
.qr-cal-card .fc-event.qr-fc-holidays .fc-event-time,
.qr-cal-card .fc-event.qr-fc-holidays .fc-event-title { color: #9f1239; }
.qr-cal-card .fc .fc-daygrid-more-link { font-size: 11px; font-weight: 700; color: var(--qr-accent-text); }

/* Event detail popover (below the calendar) */
.qr-event-popover {
  margin-top: 16px; background: #fff; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 8px 28px rgba(0,0,0,.12);
  border-left: 4px solid var(--qr-primary);
}
.qr-popover-label {
  font-size: 11px; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .8px; font-weight: 700; margin-bottom: 6px;
}
.qr-popover-title {
  font-size: 17px; font-weight: 800; color: #1e293b;
  font-family: var(--qr-font-display); margin-bottom: 10px;
}
.qr-popover-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.qr-popover-meta-item { font-size: 13px; color: #475569; display: flex; align-items: center; gap: 6px; }
.qr-popover-meta-item i { color: var(--qr-accent-text); }
.qr-popover-desc { font-size: 13px; color: #64748b; line-height: 1.7; margin-bottom: 12px; }
.qr-popover-actions { display: flex; gap: 10px; }

/* =========================================================
   KUDOS DASHBOARD redesign (Task 10) — appended, non-destructive.
   All rules scoped under .qr-kudos so they only affect this page.
   Re-skins the markup returned by web-service/kudos/kudos_dash.php
   (balance cards, gift link, transactions feed, conditional scoreboard)
   into the amber/gold mockup look — no endpoint edits.
   ========================================================= */
.qr-kudos-wrap { max-width: 1100px; }

/* 1. Amber/gold gradient header (overrides .qr-page-header for THIS page only) */
.qr-kudos .qr-kudos-header {
  /* background: linear-gradient(135deg, #b45309 0%, #d97706 60%, #f59e0b 100%); */
  background: var(--qr-gradient) !important;
}
.qr-kudos .qr-kudos-sub { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 3px; }

/* Endpoint's first row carries an mt-2; neutralise it so the float overlap lands right */
.qr-kudos .qr-kudos-zone .row.mt-2 { margin-top: 0 !important; }

/* ── 2. Balance stats: re-skin the two .col-6 > .card balance cards ───────── */
/* The endpoint returns exactly two cards (Received + To Give). They sit inside
   .col-lg-8/.col-12. We turn that wrapper into one floating white card and the
   two inner cards into stat cells. */
.qr-kudos .qr-kudos-zone .card {
  border: none; border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
}
.qr-kudos .qr-kudos-zone .card .card-header { padding: 14px 12px 0 !important; margin: 0 !important; }
.qr-kudos .qr-kudos-zone .icon.icon-shape {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
/* Amber-tint the gift ("to Give") icon; warm-green the received icon */
.qr-kudos .qr-kudos-zone .icon.bg-gradient-warning {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
}
.qr-kudos .qr-kudos-zone .icon.bg-gradient-success {
  background: linear-gradient(135deg, #0f766e, #059669) !important;
}
.qr-kudos .qr-kudos-zone .card-body h6 {
  font-size: 10px; color: #94a3b8; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.qr-kudos .qr-kudos-zone .card-footer { padding: 0 12px 14px !important; }
.qr-kudos .qr-kudos-zone .card-footer hr { display: none; }
.qr-kudos .qr-kudos-zone .card-footer h5 {
  font-size: 30px; font-weight: 800; color: #1e293b; line-height: 1;
  font-family: var(--qr-font-display);
}
/* The "to Give" card is wrapped in an <a> to staff-phonebook — that IS the gift
   trigger. Keep it clickable & give it CTA affordance. */
.qr-kudos .qr-kudos-zone a[href^="staff-phonebook"] { text-decoration: none; display: block; height: 100%; }
.qr-kudos .qr-kudos-zone a[href^="staff-phonebook"] .card { transition: transform .15s, box-shadow .15s; }
.qr-kudos .qr-kudos-zone a[href^="staff-phonebook"]:hover .card {
  transform: translateY(-3px); box-shadow: 0 10px 26px rgba(217,119,6,.22);
}

/* ── 3. Scoreboard (Public only) → ranked leaderboard list ───────────────── */
/* Heading icon accent */
.qr-kudos .qr-kudos-zone .card-header h6 {
  font-family: var(--qr-font-display);
}
.qr-kudos .qr-kudos-zone .list-group { gap: 2px; }
.qr-kudos .qr-kudos-zone .list-group a { text-decoration: none; }
.qr-kudos .qr-kudos-zone .list-group .list-group-item {
  background: #fff; border-radius: 10px !important;
  padding: 8px 10px !important; transition: background .15s;
}
.qr-kudos .qr-kudos-zone .list-group a:hover .list-group-item { background: #fffbeb; }
.qr-kudos .qr-kudos-zone .list-group .avatar {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
}
.qr-kudos .qr-kudos-zone .list-group h6 { font-size: 12px; font-weight: 800; color: #1e293b; }
.qr-kudos .qr-kudos-zone .list-group .text-xs { font-size: 10px; color: #94a3b8; }
/* points pill on the right */
.qr-kudos .qr-kudos-zone .list-group .list-group-item > .d-flex.align-items-center.text-sm {
  font-size: 11px !important; font-weight: 800 !important; color: #d97706 !important;
}

/* ── 4. Transactions / received feed → chat-bubble cards ─────────────────── */
.qr-kudos #kudosTxList { gap: 4px; display: flex; flex-direction: column; }
.qr-kudos #kudosTxList .list-group-item {
  border: 1px solid #fde68a; background: #fffbeb;
  border-radius: 0 12px 12px 12px !important;
  padding: 10px 12px !important; margin-bottom: 0 !important;
}
.qr-kudos #kudosTxList .list-group-item:hover {
  background: #fef3c7 !important; box-shadow: 0 4px 14px rgba(217,119,6,.14);
}
.qr-kudos #kudosTxList .btn-icon-only {
  width: 34px !important; height: 34px !important; flex-shrink: 0;
}
.qr-kudos #kudosTxList .btn-outline-success {
  background: linear-gradient(135deg,#0f766e,#059669) !important;
  border: none !important; color: #fff !important;
}
.qr-kudos #kudosTxList .btn-outline-danger {
  background: linear-gradient(135deg,#b45309,#d97706) !important;
  border: none !important; color: #fff !important;
}
.qr-kudos #kudosTxList h6 { font-size: 12px; font-weight: 800; color: #92400e; }
.qr-kudos #kudosTxList .text-xs { font-size: 10px; color: #94a3b8; }

/* Section card headers + period filter polish */
.qr-kudos .qr-kudos-zone .card-header h6 { font-size: 13px; font-weight: 800; color: #1e293b; }
.qr-kudos .qr-kudos-zone .btn-outline-primary {
  border-color: #fcd34d; color: #b45309;
}
.qr-kudos .qr-kudos-zone .btn-outline-primary:hover:not(:disabled) {
  background: linear-gradient(135deg,#d97706,#f59e0b); border-color: transparent; color: #fff;
}
/* =========================================================
   Task 11 — Gallery, Houses Hub & Job Openings (appended, non-destructive)
   ========================================================= */

/* Reusable gradient header strip used by these pages. */
.qr-head-strip {
  position: relative; z-index: 1;
  padding: 18px 22px 60px;
  border-radius: 0 0 18px 18px;
  background: var(--qr-gradient); color: #fff;
}
.qr-head-strip .qr-head-title { font-family: var(--qr-font-display); font-size: 22px; font-weight: 800; color: #fff; margin: 0; line-height: 1.15; }
.qr-head-strip .qr-head-sub   { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 4px; }
.qr-head-strip .qr-head-search {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.30);
  border-radius: 10px; padding: 8px 14px; color: #fff; min-width: 200px;
}
.qr-head-strip .qr-head-search::placeholder { color: rgba(255,255,255,.7); }
.qr-head-strip .qr-head-search:focus { outline: none; background: rgba(255,255,255,.26); box-shadow: 0 0 0 .15rem rgba(255,255,255,.25); color:#fff; }
.qr-pull-up { position: relative; z-index: 2; margin-top: -44px; }

/* ── Gallery: album / category card grid ──────────────────────────────────
   The gallery + album endpoints emit:  .col > a > .card(.h-100) with
   .card-img-top and .card-body .numbers h5. We restyle those in place. */
.qr-gallery-page a { text-decoration: none; }
.qr-gallery-page .card {
  border: none; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  transition: transform .15s, box-shadow .15s;
}
.qr-gallery-page a:hover .card { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.qr-gallery-page .card-img-top { border-radius: 0; }
.qr-gallery-page .card-body { padding: 12px 14px !important; }
.qr-gallery-page .numbers h5 { font-family: var(--qr-font-display); font-size: 15px; font-weight: 800; color: #1e293b; }
.qr-gallery-page .numbers p  { color: var(--qr-accent-text) !important; font-size: 12px !important; }

/* ── Houses Hub ───────────────────────────────────────────────────────────
   Endpoint emits an outer .row > .col > .card containing a .card-header (h6)
   and a .list-group of house rows (each a clickable li opening a modal). */
.qr-houses-page .card {
  border: none; border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
}
.qr-houses-page .card-header h6 { font-family: var(--qr-font-display); font-weight: 800; color: #1e293b; }
.qr-houses-page .list-group-item {
  background: #f8fafc !important; border-radius: 14px !important;
  margin-bottom: 10px; padding: 14px 16px !important;
  border: 1px solid #eef2f7 !important;
  transition: transform .15s, box-shadow .15s, background .15s;
  cursor: pointer;
}
.qr-houses-page .list-group-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  background: #fff !important;
}
.qr-houses-page .list-group-item h6 { font-family: var(--qr-font-display); font-size: 15px; font-weight: 800; }
.qr-houses-page .list-group-item .fa-chevron-right { color: #cbd5e1; }
.qr-houses-page .modal-content { border: none; border-radius: 16px; overflow: hidden; }
.qr-houses-page .modal-header { border-bottom: none; }
.qr-houses-page .modal-body .form-control-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #64748b; }

/* ── Job Openings: list + detail ─────────────────────────────────────────
   Cards are built in job-opening-list.js / job-opening-detail.js. */
.qr-jobs-page .qr-job-summary { color: #64748b; font-size: 13px; }
.qr-jobs-page .qr-job-card {
  display: block; text-decoration: none;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .15s, box-shadow .15s;
}
.qr-jobs-page .qr-job-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.qr-jobs-page .qr-job-body { padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; }
.qr-jobs-page .qr-job-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; background: var(--qr-gradient);
}
.qr-jobs-page .qr-job-main { flex: 1; min-width: 0; }
.qr-jobs-page .qr-job-title { font-family: var(--qr-font-display); font-size: 15px; font-weight: 800; color: #1e293b; margin: 0 0 4px; }
.qr-jobs-page .qr-job-excerpt { font-size: 12px; color: #64748b; margin: 0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.qr-jobs-page .qr-job-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.qr-jobs-page .qr-job-meta-item { font-size: 11.5px; color: #64748b; }
.qr-jobs-page .qr-job-chevron { color: #cbd5e1; font-size: 18px; align-self: center; flex-shrink:0; }
.qr-jobs-page .qr-job-foot {
  padding: 10px 16px; background: #f8fafc; border-top: 1px solid #f1f5f9;
  display: flex; align-items: center; justify-content: space-between;
}
.qr-jobs-page .qr-job-deadline { font-size: 11.5px; color: #94a3b8; }
.qr-jobs-page .qr-tag {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--qr-accent-light); color: var(--qr-accent-text);
}
.qr-jobs-page .qr-tag.qr-tag-urgent { background: #fef3c7; color: #92400e; }

/* Job detail */
.qr-job-detail { max-width: 860px; }
.qr-job-detail .qr-detail-head {
  background: var(--qr-gradient); color: #fff;
  border-radius: 16px; padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 8px 28px rgba(79,70,229,.25);
}
.qr-job-detail .qr-detail-head h4 { font-family: var(--qr-font-display); color:#fff; font-weight: 800; margin: 0 0 8px; }
.qr-job-detail .qr-detail-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.qr-job-detail .qr-detail-meta span { font-size: 12.5px; color: rgba(255,255,255,.82); }
.qr-job-detail .qr-detail-card { border: none; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.qr-job-detail .qr-detail-card .card-header h6 { font-family: var(--qr-font-display); font-weight: 800; }
.qr-job-detail .qr-detail-card .qr-detail-text { font-size: 14px; color: #475569; line-height: 1.7; }

/* =========================================================
   Dashboard v2 data-driven sections (Task B4) — appended
   ========================================================= */
/* Celebration + notice rows */
.qr-cel-row + .qr-cel-row,
.qr-notice-row + .qr-notice-row { border-top: 1px solid #eef2f7; }

/* Poll / quiz clickable options */
.qr-vote-opts { display: flex; flex-direction: column; gap: 8px; }
.qr-vote-opt {
  width: 100%; text-align: left; font-size: 13px; font-weight: 600; color: #1e293b;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 12px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.qr-vote-opt:hover:not(:disabled) { background: var(--qr-accent-light); border-color: var(--qr-primary); }
.qr-vote-opt:disabled { opacity: .55; cursor: default; }

/* Poll result bars */
.qr-pollbar { margin-bottom: 10px; }
.qr-pollbar-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.qr-pollbar-label { font-size: 12px; font-weight: 600; color: #1e293b; }
.qr-pollbar-pct { font-size: 12px; font-weight: 800; color: #64748b; }
.qr-pollbar-track { height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.qr-pollbar-fill { height: 100%; background: var(--qr-primary); border-radius: 999px; transition: width .4s ease; }
.qr-pollbar-mine .qr-pollbar-label { color: var(--qr-primary); }
.qr-pollbar-mine .qr-pollbar-fill { background: var(--qr-gradient); }

/* Quiz answered states */
.qr-quiz-opt-result {
  font-size: 13px; font-weight: 600; color: #475569;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 12px; margin-bottom: 8px;
}
.qr-quiz-correct { background: #dcfce7; border-color: #86efac; color: #15803d; }
.qr-quiz-wrong   { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

/* =========================================================
   Content + Directory v2 data-driven render (Task B5) — appended
   ========================================================= */

/* ── NOTICE BOARD: priority accent + badge ── */
.qr-notice-grid .card.qr-notice-priority-urgent,
.qr-notice-grid .card.qr-notice-priority-high { border-left-color: #ef4444; }
.qr-notice-grid .card.qr-notice-priority-medium { border-left-color: #f59e0b; }
.qr-notice-grid .card.qr-notice-priority-low { border-left-color: #22c55e; }
.qr-notice-priority-badge { background: #fee2e2; color: #b91c1c; }
.qr-notice-grid .gap-1 { gap: 6px !important; }

/* ── STAFF DIRECTORY: avatar + availability dot + structured contact actions ── */
.qr-staff-avatar-wrap { position: relative; display: inline-block; }
.qr-staff-dot {
  position: absolute; bottom: 6px; right: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: #94a3b8; border: 2px solid #fff;
}
.qr-staff-dot.available { background: #22c55e; }
.qr-staff-grid .qr-staff-role { color: #64748b; font-weight: 600; }
.qr-staff-grid .qr-staff-dept { color: var(--qr-accent-text); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.qr-staff-contacts { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.qr-staff-contact-btn {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; text-decoration: none;
  background: var(--qr-accent-light); color: var(--qr-accent-text);
  transition: background .15s, color .15s;
}
.qr-staff-contact-btn:hover { background: var(--qr-primary); color: #fff; }
/* list-view tweaks: keep contact buttons inline and dept/role left-aligned */
.qr-staff-grid.qr-staff-list .qr-staff-contacts { justify-content: flex-start; margin-left: auto; margin-top: 0; }
.qr-staff-grid.qr-staff-list td .d-flex.px-2 { gap: 4px 12px; flex-wrap: wrap; }

/* =========================================================
   Kudos Dashboard v2 data-driven render (Task B7) — appended.
   Scoped under .qr-kudos so it only affects this page. Pairs with
   the data-driven kudos_dash.js consuming web-service/v2/kudos.php.
   ========================================================= */

/* Stat cards (amber/green icon tiles + big value) */
.qr-kudos .qr-kudos-stat { display: flex; flex-direction: column; align-items: flex-start; }
.qr-kudos .qr-kudos-stat .qr-stat-icon {
  width: 44px; height: 44px; border-radius: 12px; font-size: 17px; color: #fff;
}
.qr-kudos .qr-kudos-stat .qr-stat-icon.bg-gradient-warning {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
}
.qr-kudos .qr-kudos-stat .qr-stat-icon.bg-gradient-success {
  background: linear-gradient(135deg, #0f766e, #059669) !important;
}
.qr-kudos .qr-kudos-stat .qr-stat-val { font-size: 30px; }

/* Section card heading icon → amber accent on this page */
.qr-kudos .qr-dc-icon { background: #fef3c7; color: #b45309; }

/* ── Received feed → amber chat-bubble cards ── */
.qr-kudos #kudosTxList { gap: 8px; padding: 2px; }
.qr-kudos .qr-kudos-feed-item {
  border: 1px solid #fde68a !important; background: #fffbeb !important;
  border-radius: 0 12px 12px 12px !important;
  padding: 10px 12px !important; margin-bottom: 0 !important;
}
.qr-kudos .qr-kudos-feed-item:hover {
  background: #fef3c7 !important; box-shadow: 0 4px 14px rgba(217,119,6,.14);
}
.qr-kudos .qr-kudos-feed-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.qr-kudos .qr-kudos-feed-item h6 { font-size: 13px; font-weight: 800; color: #92400e; }
.qr-kudos .qr-kudos-feed-msg { font-size: 13px; color: #475569; line-height: 1.5; }
.qr-kudos .qr-kudos-feed-item .text-xs { font-size: 10px; color: #94a3b8; }
.qr-kudos .qr-kudos-chip { background: #fde68a; color: #92400e; }

/* ── Leaderboard rows ── */
.qr-kudos .qr-kudos-rank {
  width: 26px; height: 26px; flex-shrink: 0; margin-right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 12px; font-weight: 800;
  background: #fef3c7; color: #b45309; font-family: var(--qr-font-display);
}
.qr-kudos .list-group .avatar.avatar-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.qr-kudos .list-group h6 { font-size: 13px; font-weight: 800; color: #1e293b; }
.qr-kudos .list-group .text-xs { font-size: 10px; color: #94a3b8; }
.qr-kudos .qr-kudos-points { font-size: 13px; font-weight: 800; color: #d97706; flex-shrink: 0; }
.qr-kudos .list-group .list-group-item { border-radius: 10px; padding: 8px 10px; }

/* =========================================================
   Houses Hub v2 data-driven render (Task B8) — appended.
   Pairs with houses-hub.js consuming web-service/v2/houses.php.
   ========================================================= */

/* Floating standings strip overlapping the navy header */
.qr-houses-page .qr-standings-strip { padding: 14px 16px; }
.qr-houses-page .qr-standings-title {
  font-family: var(--qr-font-display); font-size: 13px; font-weight: 800;
  color: #1e293b; margin-bottom: 10px; display: flex; align-items: center;
}
.qr-houses-page .qr-standings-title i { color: var(--qr-accent-text); }
.qr-houses-page .qr-standing-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #f1f5f9;
}
.qr-houses-page .qr-standing-row:last-child { border-bottom: none; }
.qr-houses-page .qr-standing-rank {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: 12px; font-weight: 800;
  background: var(--qr-accent-light); color: var(--qr-accent-text);
  font-family: var(--qr-font-display);
}
.qr-houses-page .qr-standing-swatch {
  width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.08);
}
.qr-houses-page .qr-standing-name { font-size: 13px; font-weight: 700; color: #1e293b; flex: 1; min-width: 0; }
.qr-houses-page .qr-standing-points { font-size: 12px; font-weight: 800; color: #64748b; flex-shrink: 0; }

/* Full-width house cards */
.qr-houses-page .qr-houses-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.qr-houses-page .qr-house-card { padding: 16px 18px; }
.qr-houses-page .qr-house-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qr-houses-page .qr-house-name { font-family: var(--qr-font-display); font-size: 17px; font-weight: 800; margin: 0; }
.qr-houses-page .qr-house-points { font-size: 13px; font-weight: 800; color: #64748b; flex-shrink: 0; }
.qr-houses-page .qr-house-progress-track {
  height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin-bottom: 14px;
}
.qr-houses-page .qr-house-progress-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }

/* Member avatars */
.qr-houses-page .qr-house-members { display: flex; flex-wrap: wrap; gap: 6px; }
.qr-houses-page .qr-house-member {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12);
  display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9;
}
.qr-houses-page .qr-house-member img { width: 100%; height: 100%; object-fit: cover; }
.qr-houses-page .qr-house-member-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--qr-accent-text);
  background: var(--qr-accent-light); font-family: var(--qr-font-display);
}

/* Job detail chips wrapper inherits .qr-tag (white-on-gradient header) */
.qr-job-detail .qr-detail-chips .qr-tag { background: rgba(255,255,255,.2); color: #fff; }

/* =========================================================
   Training / Content pages v2 data-driven render (Task B9) — appended.
   Resource documents, useful links, useful numbers, leader messages,
   lunch menus, acceptable policy, FAQ. Pairs with their data-driven JS
   consuming web-service/v2/*. Scoped under page-specific wrappers.
   ========================================================= */

/* ── RESOURCE DOCUMENTS: collapsible folder tree ─────────────────────────── */
.qr-resources-page .qr-folder-tree { display: flex; flex-direction: column; gap: 8px; }
.qr-resources-page .qr-folder { border: 1px solid #dde0e3; border-radius: 12px; overflow: hidden; background: #fff; }
.qr-resources-page .qr-folder[data-depth="1"],
.qr-resources-page .qr-folder[data-depth="2"] { border: none; border-radius: 0; }
.qr-resources-page .qr-folder-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: #dde0e3; border: none; padding: 11px 14px; cursor: pointer;
  font-family: var(--qr-font-display); font-weight: 800; font-size: 14px; color: #1e293b; text-align: left;
}
.qr-resources-page .qr-folder[data-depth="1"] .qr-folder-head,
.qr-resources-page .qr-folder[data-depth="2"] .qr-folder-head { background: transparent; font-size: 13px; padding-left: 28px; }
.qr-resources-page .qr-folder-head:hover { background: #eef2f7; }
.qr-resources-page .qr-folder-caret { font-size: 11px; color: #94a3b8; transition: transform .2s; }
.qr-resources-page .qr-folder-head[aria-expanded="true"] .qr-folder-caret { transform: rotate(90deg); }
.qr-resources-page .qr-folder-ico { color: var(--qr-accent-text); font-size: 14px; }
.qr-resources-page .qr-folder-name { flex: 1; min-width: 0; }
.qr-resources-page .qr-folder-count {
  font-size: 11px; font-weight: 800; color: #64748b; background: #e2e8f0;
  border-radius: 999px; padding: 1px 9px; flex-shrink: 0;
}
.qr-resources-page .qr-folder-body { padding: 6px 10px 10px; }
.qr-resources-page .qr-folder-empty { font-size: 12px; color: #94a3b8; padding: 8px 12px; }

.qr-resources-page .qr-file-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  border-radius: 9px; text-decoration: none; transition: background .15s;
}
.qr-resources-page a.qr-file-row:hover { background: #f8fafc; }
.qr-resources-page .qr-file-row-disabled { opacity: .6; }
.qr-resources-page .qr-file-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--qr-accent-light); color: var(--qr-accent-text);
}
.qr-resources-page .qr-ft-pdf { background: #fee2e2; color: #b91c1c; }
.qr-resources-page .qr-ft-doc { background: #dbeafe; color: #1d4ed8; }
.qr-resources-page .qr-ft-xls { background: #dcfce7; color: #15803d; }
.qr-resources-page .qr-ft-ppt { background: #ffedd5; color: #c2410c; }
.qr-resources-page .qr-ft-img { background: #fae8ff; color: #a21caf; }
.qr-resources-page .qr-ft-zip { background: #fef9c3; color: #a16207; }
.qr-resources-page .qr-ft-vid { background: #e0e7ff; color: #4338ca; }
.qr-resources-page .qr-ft-aud { background: #cffafe; color: #0e7490; }
.qr-resources-page .qr-file-main { flex: 1; min-width: 0; }
.qr-resources-page .qr-file-name { font-size: 13px; font-weight: 700; color: #1e293b; word-break: break-word; }
.qr-resources-page .qr-file-meta { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.qr-resources-page .qr-file-type { font-size: 10px; font-weight: 800; color: #94a3b8; letter-spacing: .4px; }
.qr-resources-page .qr-file-size { font-size: 11px; color: #94a3b8; }
.qr-resources-page .qr-file-dl { color: #cbd5e1; font-size: 14px; flex-shrink: 0; }
.qr-resources-page a.qr-file-row:hover .qr-file-dl { color: var(--qr-accent-text); }

/* ── USEFUL LINKS: responsive link-card grid ─────────────────────────────── */
.qr-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 991px) { .qr-links-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .qr-links-grid { grid-template-columns: 1fr; } }
.qr-link-card {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.qr-link-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.qr-link-icon {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #f1f5f9;
}
.qr-link-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.qr-link-initials { font-family: var(--qr-font-display); font-weight: 800; font-size: 17px; color: var(--qr-accent-text); }
.qr-link-body { flex: 1; min-width: 0; }
.qr-link-name { font-family: var(--qr-font-display); font-size: 15px; font-weight: 800; color: #1e293b; }
.qr-link-desc { font-size: 12px; color: #64748b; margin-top: 2px; }
.qr-link-ext { color: #cbd5e1; font-size: 13px; flex-shrink: 0; }
.qr-link-card:hover .qr-link-ext { color: var(--qr-accent-text); }

/* ── USEFUL NUMBERS: contact cards ───────────────────────────────────────── */
.qr-numbers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 991px) { .qr-numbers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .qr-numbers-grid { grid-template-columns: 1fr; } }
.qr-num-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.qr-num-head { display: flex; align-items: center; gap: 12px; }
.qr-num-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--qr-accent-light); color: var(--qr-accent-text);
}
.qr-num-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.qr-num-initials { font-family: var(--qr-font-display); font-weight: 800; font-size: 16px; }
.qr-num-titles { flex: 1; min-width: 0; }
.qr-num-name { font-family: var(--qr-font-display); font-size: 15px; font-weight: 800; color: #1e293b; }
.qr-num-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.qr-num-dept, .qr-num-hours { font-size: 11.5px; color: #64748b; }
.qr-num-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-num-action {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 9px; text-decoration: none;
}
.qr-num-call { background: var(--qr-accent-light); color: var(--qr-accent-text); }
.qr-num-call:hover { background: var(--qr-primary); color: #fff; }
.qr-num-wa { background: #dcfce7; color: #15803d; }
.qr-num-wa:hover { background: #15803d; color: #fff; }

/* ── LEADER MESSAGES: message list + read-full modal ─────────────────────── */
.qr-leader-page .qr-leader-list { display: flex; flex-direction: column; gap: 14px; }
.qr-leader-page .qr-leader-item { padding: 16px 18px; }
.qr-leader-page .qr-leader-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.qr-leader-page .qr-leader-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--qr-font-display); font-weight: 800; font-size: 17px; color: #fff;
  background: var(--qr-gradient);
}
.qr-leader-page .qr-leader-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qr-leader-page .qr-leader-meta { flex: 1; min-width: 0; }
.qr-leader-page .qr-leader-name { font-family: var(--qr-font-display); font-size: 16px; font-weight: 800; color: #1e293b; }
.qr-leader-page .qr-leader-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.qr-leader-page .qr-leader-dot { margin: 0 7px; color: #cbd5e1; }
.qr-leader-page .qr-leader-title { font-family: var(--qr-font-display); font-size: 14px; font-weight: 700; color: #1e293b; margin: 0 0 6px; }
.qr-leader-page .qr-leader-excerpt { font-size: 13.5px; color: #475569; line-height: 1.6; margin: 0 0 12px; }
.qr-leader-page .qr-leader-badge {
  display: inline-flex; align-items: center; gap: 2px; margin: 0 0 12px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: var(--qr-accent-light); color: var(--qr-accent-text);
}
.qr-leader-page .qr-leader-readbtn {
  background: var(--qr-accent-light); color: var(--qr-accent-text);
  border: none; border-radius: 9px; font-size: 12.5px; font-weight: 800;
  padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s;
}
.qr-leader-page .qr-leader-readbtn:hover { background: var(--qr-primary); color: #fff; }
.qr-leader-modal-body { max-height: 60vh; overflow-y: auto; }
.qr-leader-modal-body img,
.qr-leader-modal-body video,
.qr-leader-modal-body audio,
.qr-leader-modal-body iframe { max-width: 100%; height: auto; border-radius: 10px; }
.qr-leader-modal-body audio { width: 100%; }

/* ── LUNCH MENUS: day tabs + sections ────────────────────────────────────── */
.qr-lunch-page .qr-lunch-card { padding: 16px 18px; }
.qr-lunch-page .qr-lunch-tabs { display: flex; flex-wrap: wrap; gap: 8px; border: none; padding: 0; list-style: none; }
.qr-lunch-page .qr-lunch-tab { border: none; }
.qr-lunch-page .qr-lunch-section { margin-bottom: 16px; }
.qr-lunch-page .qr-lunch-section:last-child { margin-bottom: 0; }
.qr-lunch-page .qr-lunch-section-name {
  font-family: var(--qr-font-display); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px; color: var(--qr-accent-text); margin-bottom: 8px;
}
.qr-lunch-page .qr-lunch-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 11px 12px; background: #f8fafc; border-radius: 10px; margin-bottom: 8px;
}
.qr-lunch-page .qr-lunch-item:last-child { margin-bottom: 0; }
.qr-lunch-page .qr-lunch-item-name { font-size: 14px; font-weight: 700; color: #1e293b; }
.qr-lunch-page .qr-lunch-item-desc { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.qr-lunch-page .qr-lunch-cal {
  font-size: 11px; font-weight: 800; color: #b45309; background: #fef3c7;
  border-radius: 999px; padding: 2px 10px; flex-shrink: 0; white-space: nowrap;
}

/* ── ACCEPTABLE POLICY: title + sections + accept ────────────────────────── */
.qr-policy-page .qr-policy-card { padding: 20px 22px; }
.qr-policy-page .qr-policy-title { font-family: var(--qr-font-display); font-size: 20px; font-weight: 800; color: #1e293b; margin-bottom: 14px; }
.qr-policy-page .qr-policy-section { margin-bottom: 16px; }
.qr-policy-page .qr-policy-heading { font-family: var(--qr-font-display); font-size: 14px; font-weight: 800; color: #1e293b; margin-bottom: 6px; }
.qr-policy-page .qr-policy-body { font-size: 14px; color: #475569; line-height: 1.75; }
.qr-policy-page .qr-policy-body img { max-width: 100%; height: auto; }
.qr-policy-page .qr-policy-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 8px; }
.qr-policy-page .qr-policy-accept { align-self: flex-start; font-weight: 800; padding: 10px 20px; }
.qr-policy-page .qr-policy-note { font-size: 12px; }
.qr-policy-page .qr-policy-accepted {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-weight: 800; font-size: 14px; color: #15803d;
  background: #dcfce7; border-radius: 10px; padding: 10px 18px;
}

/* ── ACCEPTABLE POLICY: list cards + progress + modal ────────────────────── */
.qr-policy-page .qr-policy-progress { padding: 16px 20px; }
.qr-policy-page .qr-policy-progress .qr-stat-val .text-muted { font-weight: 600; font-size: 18px; }

.qr-policy-page .qr-policy-list-card {
  padding: 18px 20px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.qr-policy-page .qr-policy-list-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.qr-policy-page .qr-policy-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--qr-accent-light); color: var(--qr-accent-text); font-size: 16px;
}
.qr-policy-page .qr-policy-card-title {
  font-family: var(--qr-font-display); font-size: 15px; font-weight: 800; color: #1e293b;
}
.qr-policy-page .qr-policy-card-date { font-size: 12px; }
.qr-policy-page .qr-policy-card-cta { font-weight: 700; }
.qr-policy-page .qr-policy-badge { font-weight: 700; font-size: 11px; padding: 6px 10px; }

/* Modal lives under <body> (outside .qr-policy-page), so restate the typography here. */
.qr-policy-modal .qr-policy-title {
  font-family: var(--qr-font-display); font-size: 18px; font-weight: 800; color: #1e293b; margin-bottom: 2px;
}
.qr-policy-modal .qr-policy-body { font-size: 14px; color: #475569; line-height: 1.75; }
.qr-policy-modal .qr-policy-body img { max-width: 100%; height: auto; }
.qr-policy-modal .modal-body.qr-policy-body { max-height: 60vh; overflow-y: auto; }
.qr-policy-modal .qr-policy-accept { font-weight: 800; padding: 10px 20px; }
.qr-policy-modal .qr-policy-accepted {
  display: inline-flex; align-items: center;
  font-weight: 800; font-size: 14px; color: #15803d;
  background: #dcfce7; border-radius: 10px; padding: 10px 18px;
}

/* ── FAQ: accordion + category badge + search ────────────────────────────── */
.qr-faq-page .qr-faq-accordion { display: flex; flex-direction: column; gap: 8px; }
.qr-faq-page .qr-faq-item { border: 1px solid #dde0e3; border-radius: 12px !important; overflow: hidden; }
.qr-faq-page .qr-faq-btn {
  font-family: var(--qr-font-display); font-weight: 800; font-size: 14px; color: #1e293b;
  background: #fff; box-shadow: none; padding: 14px 16px;
}
.qr-faq-page .qr-faq-btn:not(.collapsed) { background: var(--qr-accent-light); color: var(--qr-accent-text); box-shadow: none; }
.qr-faq-page .qr-faq-btn:focus { box-shadow: none; border-color: transparent; }
.qr-faq-page .qr-faq-q { flex: 1; }
.qr-faq-page .qr-faq-cat {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: var(--qr-accent-light); color: var(--qr-accent-text);
  border-radius: 999px; padding: 3px 10px; margin-right: 10px; flex-shrink: 0;
}
.qr-faq-page .qr-faq-btn:not(.collapsed) .qr-faq-cat { background: #fff; }
.qr-faq-page .qr-faq-a { font-size: 13.5px; color: #475569; line-height: 1.7; }
.qr-faq-page .qr-faq-a img { max-width: 100%; height: auto; }

/* =========================================================
   Task 12 — Auth & Settings redesign (appended, non-destructive)
   index.php / set-passcode.php / forgot-passcode.php /
   reset-password.php (data-theme="indigo") and user-settings.php.
   ========================================================= */

/* ── Shared auth shell ──────────────────────────────────── */
.qr-auth-body { min-height: 100vh; background: #f1f5f9; }
.qr-auth-wrap { min-height: 100vh; display: flex; flex-direction: column; }

/* Full-bleed gradient header with wave/curve transition into white body */
.qr-auth-header {
  background: var(--qr-gradient); color: #fff; position: relative;
  padding: 48px 24px 90px; text-align: center; overflow: hidden;
}
.qr-auth-header .qr-auth-logo {
  width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 22px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.qr-auth-header .qr-auth-logo img { max-width: 78%; max-height: 78%; object-fit: contain; }
.qr-auth-header .qr-auth-org {
  font-family: var(--qr-font-display); font-size: 22px; font-weight: 800;
  color: #fff; line-height: 1.15; margin: 0;
}
.qr-auth-header .qr-auth-tagline { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 4px; }
/* Wave curve transition into white body */
.qr-auth-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 48px;
  display: block; line-height: 0;
}
.qr-auth-wave svg { display: block; width: 100%; height: 100%; }

/* Body card floated up into the wave */
.qr-auth-main { flex: 1; padding: 0 18px 40px; }
.qr-auth-card {
  max-width: 420px; margin: -46px auto 0; position: relative; z-index: 3;
  padding: 26px 24px 30px;
}
.qr-auth-card .qr-auth-card-title {
  font-family: var(--qr-font-display); font-size: 19px; font-weight: 800; color: #1e293b; margin: 0 0 4px;
}
.qr-auth-card .qr-auth-card-sub { font-size: 13px; color: #64748b; margin: 0 0 20px; line-height: 1.5; }

/* Input with icon prefix */
.qr-auth-field { margin-bottom: 14px; }
.qr-auth-label { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 6px; display: block; }
.qr-input-group {
  display: flex; align-items: center; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 11px; padding: 0 12px;
  transition: border-color .15s, box-shadow .15s;
}
.qr-input-group:focus-within { border-color: var(--qr-primary); box-shadow: 0 0 0 3px var(--qr-accent-light); background: #fff; }
.qr-input-group > i { color: #94a3b8; font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.qr-input-group input {
  flex: 1; border: none; background: none; outline: none;
  padding: 12px 10px; font-size: 14px; color: #1e293b; min-width: 0;
}
.qr-input-group input::placeholder { color: #94a3b8; }
.qr-input-toggle { border: none; background: none; color: #94a3b8; cursor: pointer; padding: 4px 6px; font-size: 14px; }
.qr-input-toggle:hover { color: var(--qr-primary); }

/* Primary auth button */
.qr-auth-btn {
  width: 100%; border: none; border-radius: 11px; padding: 13px 16px;
  font-family: var(--qr-font-display); font-size: 15px; font-weight: 800; color: #fff;
  background: var(--qr-gradient); cursor: pointer; transition: filter .15s, transform .1s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.qr-auth-btn:hover:not(:disabled) { filter: brightness(1.06); }
.qr-auth-btn:active:not(:disabled) { transform: scale(.99); }
.qr-auth-btn:disabled { opacity: .65; cursor: default; }

/* Secondary / fingerprint button */
.qr-auth-btn-outline {
  width: 100%; border: 1.5px solid var(--qr-primary); border-radius: 11px; padding: 12px 16px;
  font-family: var(--qr-font-display); font-size: 14px; font-weight: 800; color: var(--qr-primary);
  background: #fff; cursor: pointer; transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.qr-auth-btn-outline:hover { background: var(--qr-accent-light); color: var(--qr-primary); }

.qr-auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.qr-auth-divider::before, .qr-auth-divider::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }

.qr-auth-links { text-align: center; margin-top: 18px; }
.qr-auth-link { font-size: 13px; font-weight: 700; color: var(--qr-primary); text-decoration: none; }
.qr-auth-link:hover { text-decoration: underline; color: var(--qr-primary-dark); }
.qr-auth-back { display: inline-flex; align-items: center; gap: 6px; }

/* Show-password switch row */
.qr-auth-switch { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.qr-auth-switch .form-check-input { margin: 0; }
.qr-auth-switch label { font-size: 13px; color: #475569; cursor: pointer; margin: 0; }

/* Info block ("Can't access your email?") */
.qr-auth-info {
  margin-top: 20px; background: var(--qr-accent-light); border-radius: 12px;
  padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start;
}
.qr-auth-info i { color: var(--qr-accent-text); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.qr-auth-info-title { font-size: 13px; font-weight: 800; color: #1e293b; margin: 0 0 2px; }
.qr-auth-info-text { font-size: 12.5px; color: #475569; line-height: 1.5; margin: 0; }

/* ── Passcode dots + numeric keypad (set-passcode) ──────── */
.qr-pin-dots { display: flex; justify-content: center; gap: 14px; margin: 6px 0 22px; }
.qr-pin-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #e2e8f0; border: 2px solid #e2e8f0; transition: background .15s, border-color .15s, transform .1s;
}
.qr-pin-dot.filled { background: var(--qr-primary); border-color: var(--qr-primary); transform: scale(1.08); }
.qr-pin-caption { text-align: center; font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 14px; }
.qr-pin-caption.error { color: #dc2626; }

.qr-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 300px; margin: 0 auto; }
.qr-key {
  border: none; background: #f8fafc; border-radius: 14px; padding: 16px 0;
  font-family: var(--qr-font-display); font-size: 22px; font-weight: 800; color: #1e293b;
  cursor: pointer; transition: background .12s, transform .08s;
}
.qr-key:hover { background: var(--qr-accent-light); color: var(--qr-accent-text); }
.qr-key:active { transform: scale(.95); }
.qr-key-action { background: transparent; font-size: 15px; font-weight: 700; color: #64748b; }
.qr-key-action:hover { background: #f1f5f9; color: #1e293b; }
.qr-key-del { color: #dc2626; }

/* ── User Settings (post-auth) ──────────────────────────── */
.qr-settings-wrap { max-width: 760px; }
.qr-settings-profile { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.qr-settings-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--qr-font-display); font-size: 24px; font-weight: 800; color: #fff;
  background: var(--qr-gradient);
}
.qr-settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qr-settings-prof-main { flex: 1; min-width: 0; }
.qr-settings-prof-name { font-family: var(--qr-font-display); font-size: 18px; font-weight: 800; color: #1e293b; line-height: 1.2; }
.qr-settings-prof-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
.qr-settings-edit {
  border: 1.5px solid #e2e8f0; background: #fff; border-radius: 10px;
  font-size: 12.5px; font-weight: 800; color: var(--qr-primary);
  padding: 8px 14px; text-decoration: none; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s;
}
.qr-settings-edit:hover { background: var(--qr-accent-light); border-color: var(--qr-primary); color: var(--qr-primary); }

.qr-settings-group { margin-top: 16px; }
.qr-settings-group-head {
  display: flex; align-items: center; gap: 10px; padding: 0 4px 10px;
}
.qr-settings-group-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.qr-settings-group-icon.qr-grp-notif { background: var(--qr-gradient); }
.qr-settings-group-icon.qr-grp-privacy { background: linear-gradient(135deg,#0ea5e9,#2563eb); }
.qr-settings-group-icon.qr-grp-security { background: linear-gradient(135deg,#059669,#0f766e); }
.qr-settings-group-title { font-family: var(--qr-font-display); font-size: 14px; font-weight: 800; color: #1e293b; }

.qr-settings-rows { padding: 4px 18px; }
.qr-settings-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
.qr-settings-row:last-child { border-bottom: none; }
.qr-settings-row-icon { width: 22px; text-align: center; color: var(--qr-accent-text); font-size: 15px; flex-shrink: 0; }
.qr-settings-row-main { flex: 1; min-width: 0; }
.qr-settings-row-label { font-size: 14px; font-weight: 700; color: #1e293b; }
.qr-settings-row-desc { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.qr-settings-row .form-check.form-switch { margin: 0; padding-left: 2.6em; }
.qr-settings-row-link { color: #cbd5e1; font-size: 14px; text-decoration: none; flex-shrink: 0; }
.qr-settings-link-row { text-decoration: none; }
.qr-settings-link-row:hover .qr-settings-row-link { color: var(--qr-accent-text); }
.qr-settings-link-row:hover .qr-settings-row-label { color: var(--qr-primary); }

.qr-settings-save-zone { padding: 16px 18px; }
.qr-settings-save-zone .qr-auth-btn { background: linear-gradient(135deg,#059669,#0f766e); }

/* =========================================================
   Generic detail pages (event / news) + comments + actions + notice modal.
   Reuses the qr-detail-* design language originally built for Job detail,
   now shared via the .qr-detail-page wrapper.
   ========================================================= */

/* Shared detail layout (mirrors .qr-job-detail) */
.qr-detail-page { max-width: 920px; }
.qr-detail-page .qr-detail-head {
  background: var(--qr-gradient); color: #fff;
  border-radius: 16px; padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 8px 28px rgba(79,70,229,.25);
}
.qr-detail-page .qr-detail-head h4 { font-family: var(--qr-font-display); color:#fff; font-weight: 800; margin: 0 0 8px; }
.qr-detail-page .qr-detail-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.qr-detail-page .qr-detail-meta span { font-size: 12.5px; color: rgba(255,255,255,.82); }
.qr-detail-page .qr-detail-chips .qr-tag { background: rgba(255,255,255,.2); color: #fff; }
.qr-detail-page .qr-detail-card { border: none; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.qr-detail-page .qr-detail-card .card-header { border-bottom: none; padding: 16px 18px 0; }
.qr-detail-page .qr-detail-card .card-header h6 { font-family: var(--qr-font-display); font-weight: 800; }
.qr-detail-page .qr-detail-text { font-size: 14px; color: #475569; line-height: 1.7; }
.qr-detail-page .qr-detail-text img { max-width: 100%; height: auto; border-radius: 10px; }

/* Detail hero/media image */
.qr-detail-media { width: 100%; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 18px rgba(0,0,0,.08); }

/* Event type badge — solid, high-contrast, color-coded by type. Sits on the
   gradient header, so it uses an opaque fill (overrides the translucent qr-tag). */
.qr-event-type {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  padding: 5px 13px; border-radius: 999px;
  background: #fff; color: #334155; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.qr-event-type--training { background: #dcfce7; color: #15803d; }
.qr-event-type--calendar { background: #e0e7ff; color: #4338ca; }
.qr-event-type--default  { background: #fff; color: #334155; }

/* Action bar (event like / RSVP / calendar / map) */
.qr-action-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.qr-action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: #475569;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 9px 16px; cursor: pointer; transition: all .15s ease;
}
.qr-action-btn:hover { border-color: var(--qr-accent-text); color: var(--qr-accent-text); }
.qr-action-btn.active { background: var(--qr-accent-light); border-color: var(--qr-accent-text); color: var(--qr-accent-text); }
.qr-action-btn.active .fa-heart { color: #e0245e; }

/* Comments list */
.qr-comment-list { list-style: none; margin: 0; padding: 0; }
.qr-comment-item { padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.qr-comment-item:last-child { border-bottom: none; }
.qr-comment-item .flex-1 { flex: 1; min-width: 0; }
.qr-comment-item p { color: #475569; word-break: break-word; }

/* =========================================================
   Notice modal — v2 redesign (replaces the red modal-danger look).
   Applies to dashboard popup, dashboard notice click, and noticeboard cards.
   ========================================================= */
.qr-notice-modal .modal-content {
  border: none; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(15,23,42,.28);
}
.qr-notice-modal .modal-header {
  background: var(--qr-gradient); color: #fff;
  border-bottom: none; padding: 18px 22px; align-items: center;
}
.qr-notice-modal .modal-header .modal-title {
  font-family: var(--qr-font-display); font-weight: 800; font-size: 16px;
  color: #fff; display: flex; align-items: center; gap: 10px; margin: 0;
}
.qr-notice-modal .modal-header .qr-dc-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.18); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.qr-notice-modal .modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(2); opacity: .9;
}
.qr-notice-modal .modal-body { padding: 22px; }
.qr-notice-modal .qr-notice-modal-img { margin-bottom: 14px; }
.qr-notice-modal .qr-notice-modal-img img { width: 100%; border-radius: 12px; }
/* Notice media (image or video) */
.qr-notice-modal-media { margin-bottom: 14px; }
.qr-notice-modal-media img,
.qr-notice-modal-media video { width: 100%; border-radius: 12px; display: block; background: #000; }
.qr-notice-modal .qr-notice-modal-title {
  font-family: var(--qr-font-display); font-weight: 800; font-size: 18px; color: #1e293b; margin-bottom: 6px;
}
.qr-notice-modal .qr-notice-modal-date { font-size: 12px; color: #94a3b8; margin-bottom: 12px; }
.qr-notice-modal .qr-notice-modal-body { font-size: 14px; color: #475569; line-height: 1.7; word-break: break-word; }
.qr-notice-modal .modal-footer { border-top: 1px solid #f1f5f9; padding: 14px 22px; }

/* =========================================================
   Gallery v2 redesign — client-rendered categories / albums / photos.
   Self-contained classes emitted by gallery-super/-albums/-photos.js
   and qr-lightbox.js. (Replaces the legacy server-rendered card grid.)
   ========================================================= */

/* Breadcrumb trail inside the gradient head strip. */
.qr-gallery-crumb { font-size: 12px; color: rgba(255,255,255,.7); }
.qr-gallery-crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.qr-gallery-crumb a:hover { color: #fff; text-decoration: underline; }
.qr-gallery-crumb .active { color: #fff; font-weight: 700; }

/* ── Category / album cards ───────────────────────────────────────────── */
.qr-gallery-link { text-decoration: none; display: block; height: 100%; }
.qr-gallery-card {
  border: none; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.qr-gallery-link:hover .qr-gallery-card,
.qr-gallery-link:focus-visible .qr-gallery-card {
  transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.qr-gallery-thumb { position: relative; aspect-ratio: 4 / 3; background: #e9ecef; overflow: hidden; }
.qr-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.qr-gallery-link:hover .qr-gallery-thumb img { transform: scale(1.05); }
.qr-gallery-card .card-body { padding: 12px 14px !important; }
.qr-gallery-name {
  font-family: var(--qr-font-display); font-size: 15px; font-weight: 800; color: #1e293b;
  margin: 0 0 6px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qr-count-badge {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 700;
  color: var(--qr-accent-text); background: rgba(0,0,0,.04);
  padding: 3px 9px; border-radius: 999px;
}
.qr-gallery-date { font-size: 11px; color: #94a3b8; }

.qr-gallery-empty { color: #94a3b8; }

/* ── Photo masonry grid (CSS columns; preserves native aspect ratios) ──── */
.qr-masonry { column-count: 2; column-gap: 12px; }
@media (min-width: 576px)  { .qr-masonry { column-count: 3; } }
@media (min-width: 992px)  { .qr-masonry { column-count: 4; } }
@media (min-width: 1400px) { .qr-masonry { column-count: 5; } }
.qr-masonry-item {
  position: relative; display: block; width: 100%; padding: 0; margin: 0 0 12px;
  border: none; background: #e9ecef; border-radius: 10px; overflow: hidden;
  cursor: pointer; break-inside: avoid; -webkit-column-break-inside: avoid;
}
.qr-masonry-item img { width: 100%; height: auto; display: block; transition: transform .3s ease; }
.qr-masonry-item:hover img, .qr-masonry-item:focus img { transform: scale(1.04); }
.qr-masonry-item:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.qr-masonry-fallback {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  color: #adb5bd; font-size: 2rem;
}
.qr-masonry-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; pointer-events: none;
}
.qr-masonry-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff;
  font-size: .72rem; padding: 16px 8px 6px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .2s;
}
.qr-masonry-item:hover .qr-masonry-caption, .qr-masonry-item:focus .qr-masonry-caption { opacity: 1; }

/* ── Skeleton loading shimmer ─────────────────────────────────────────── */
.qr-skeleton {
  position: relative; overflow: hidden; background: #e9edf2; border-radius: 6px;
}
.qr-skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: qr-shimmer 1.3s infinite;
}
.qr-skeleton-line { height: 12px; }
.qr-gallery-card .qr-skeleton.qr-gallery-thumb { aspect-ratio: 4 / 3; border-radius: 0; }
@keyframes qr-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .qr-skeleton::after { animation: none; } }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.qr-lb {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92);
  opacity: 0; transition: opacity .2s ease;
}
.qr-lb.is-open { opacity: 1; }
.qr-lb-stage {
  position: relative; max-width: 92vw; max-height: 86vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.qr-lb-img, .qr-lb-video {
  max-width: 92vw; max-height: 86vh; border-radius: 4px; display: block;
  transition: opacity .18s ease, transform .12s ease;
}
.qr-lb-video { background: #000; }
.qr-lb.is-switching .qr-lb-img, .qr-lb.is-switching .qr-lb-video { opacity: 0; }
.qr-lb-img { cursor: zoom-in; will-change: transform; }
.qr-lb-img.is-zoomed { cursor: grab; }
.qr-lb-spinner {
  position: absolute; top: 50%; left: 50%; margin: -18px 0 0 -18px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: qr-spin .8s linear infinite; display: none;
}
.qr-lb-spinner.is-on { display: block; }
@keyframes qr-spin { 100% { transform: rotate(360deg); } }
.qr-lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); border: none; color: #fff;
  font-size: 1.6rem; line-height: 1; padding: .4rem .85rem; border-radius: .35rem;
  cursor: pointer; transition: background .15s; z-index: 10000;
}
.qr-lb-nav:hover { background: rgba(255,255,255,.32); }
.qr-lb-prev { left: 16px; }
.qr-lb-next { right: 16px; }
.qr-lb-close {
  position: fixed; top: 16px; right: 20px; z-index: 10000;
  background: none; border: none; color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.qr-lb-counter { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); color: #ccc; font-size: .85rem; z-index: 10000; }
.qr-lb-caption { position: fixed; bottom: 20px; left: 0; right: 0; text-align: center; color: #e2e8f0; font-size: .9rem; padding: 0 16px; }
.qr-lb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 575.98px) {
  .qr-lb-nav { font-size: 1.3rem; padding: .3rem .6rem; }
  .qr-lb-prev { left: 6px; } .qr-lb-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-lb, .qr-lb-img, .qr-lb-video { transition: none; }
  .qr-lb-spinner { animation-duration: 1.6s; }
}

/* =========================================================
   Houses Hub v2 enhancements — My-House highlight, trend chart,
   clickable cards (houses-hub.js) + House Detail page (house-detail.js).
   ========================================================= */

/* ── Hub: My-House banner + highlights ─────────────────────────────────── */
.qr-houses-page .qr-myhouse-banner {
  background: #fff; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
  font-size: 13px; color: #334155; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.qr-houses-page .qr-standing-row.qr-standing-mine { background: var(--qr-accent-light); border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.qr-standing-tag {
  display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; vertical-align: middle;
  background: var(--qr-accent-light); color: var(--qr-accent-text); margin-left: 6px;
}
.qr-houses-page .qr-house-card { position: relative; display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.qr-houses-page .qr-house-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.qr-houses-page .qr-house-card-mine { box-shadow: 0 0 0 2px var(--qr-accent-text) inset, 0 2px 10px rgba(0,0,0,.06); }
.qr-house-card-chevron { position: absolute; top: 16px; right: 16px; color: #cbd5e1; font-size: 12px; }

/* ── Hub: points trend chart ───────────────────────────────────────────── */
.qr-houses-page .qr-trend-card { padding: 16px 18px; margin-top: 16px; }
.qr-houses-page .qr-trend-canvas-wrap { position: relative; height: 240px; }

/* ── Detail page: shared section card ──────────────────────────────────── */
.qr-house-detail-page .qr-house-section { padding: 16px 18px; margin-bottom: 16px; }
.qr-house-detail-page .qr-section-title {
  font-family: var(--qr-font-display); font-size: 13px; font-weight: 800; color: #1e293b;
  margin-bottom: 12px; display: flex; align-items: center;
}
.qr-house-detail-page .qr-section-title i { color: var(--qr-accent-text); }

/* ── Detail: hero header ───────────────────────────────────────────────── */
.qr-house-detail-page .qr-house-hero { padding: 20px; margin-bottom: 16px; }
.qr-house-detail-page .qr-house-hero-title { font-family: var(--qr-font-display); font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.qr-house-detail-page .qr-house-hero-sub { font-size: 13px; font-style: italic; color: #64748b; margin-bottom: 10px; }
.qr-house-detail-page .qr-house-hero-points { display: inline-flex; align-items: center; font-size: 14px; font-weight: 800; color: #334155; }
.qr-house-detail-page .qr-house-hero-points i { color: #f59e0b; }
.qr-house-detail-page .qr-house-hero-banner { margin: 14px 0; border-radius: 12px; overflow: hidden; }
.qr-house-detail-page .qr-house-hero-banner img { width: 100%; display: block; }
.qr-house-detail-page .qr-house-hero-desc { font-size: 14px; color: #475569; line-height: 1.6; margin: 12px 0 0; }
.qr-house-detail-page .qr-house-hero-video { margin-top: 14px; border-radius: 12px; overflow: hidden; }
.qr-house-detail-page .qr-house-hero-video video { width: 100%; display: block; border-radius: 12px; }
.qr-house-detail-page .qr-house-email-link { display: inline-flex; align-items: center; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--qr-accent-text); text-decoration: none; }

/* ── Detail: captain ───────────────────────────────────────────────────── */
.qr-house-detail-page .qr-captain-row, .qr-house-detail-page .qr-roster-row {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  padding: 10px; border-radius: 10px; background: #f8fafc; position: relative;
}
.qr-house-detail-page .qr-roster-row { margin-bottom: 8px; }
.qr-house-detail-page .qr-captain-row:hover, .qr-house-detail-page .qr-roster-row:hover { background: #eef2f7; }
.qr-house-detail-page .qr-captain-avatar, .qr-house-detail-page .qr-roster-avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9;
}
.qr-house-detail-page .qr-captain-avatar img, .qr-house-detail-page .qr-roster-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qr-house-detail-page .qr-captain-info, .qr-house-detail-page .qr-roster-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qr-house-detail-page .qr-captain-name, .qr-house-detail-page .qr-roster-name { font-size: 14px; font-weight: 700; color: #1e293b; }
.qr-house-detail-page .qr-captain-title, .qr-house-detail-page .qr-roster-meta { font-size: 12px; color: #64748b; }

/* ── Detail: roster search ─────────────────────────────────────────────── */
.qr-house-detail-page .qr-roster-search { margin-bottom: 12px; border-radius: 10px; }
.qr-house-detail-page .qr-roster-empty { font-size: 13px; color: #94a3b8; text-align: center; padding: 12px; }

/* ── Detail: activity timeline ─────────────────────────────────────────── */
.qr-house-detail-page .qr-activity-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.qr-house-detail-page .qr-activity-row:last-child { border-bottom: none; }
.qr-house-detail-page .qr-activity-pts {
  flex-shrink: 0; min-width: 44px; text-align: center; font-family: var(--qr-font-display);
  font-size: 13px; font-weight: 800; color: #16a34a; background: #dcfce7; border-radius: 8px; padding: 4px 6px;
}
.qr-house-detail-page .qr-activity-info { display: flex; flex-direction: column; min-width: 0; }
.qr-house-detail-page .qr-activity-label { font-size: 13px; font-weight: 700; color: #1e293b; }
.qr-house-detail-page .qr-activity-desc { font-size: 12px; color: #64748b; }
.qr-house-detail-page .qr-activity-date { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* ── Detail: message feed + compose ────────────────────────────────────── */
.qr-house-detail-page .qr-compose { background: #f8fafc; border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.qr-house-detail-page .qr-msg-list { display: flex; flex-direction: column; gap: 12px; }
.qr-house-detail-page .qr-msg-card { border: 1px solid #eef2f7; border-radius: 12px; padding: 14px; }
.qr-house-detail-page .qr-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.qr-house-detail-page .qr-msg-title { font-family: var(--qr-font-display); font-size: 15px; font-weight: 800; color: #1e293b; }
.qr-house-detail-page .qr-msg-reads { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #64748b; }
.qr-house-detail-page .qr-msg-body { font-size: 14px; color: #475569; line-height: 1.55; white-space: pre-wrap; }
.qr-house-detail-page .qr-msg-foot { margin-top: 8px; }
.qr-house-detail-page .qr-msg-meta { font-size: 11px; color: #94a3b8; }
.qr-house-detail-page .qr-react-bar { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.qr-house-detail-page .qr-react-btn {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: 3px 9px;
  font-size: 15px; line-height: 1; cursor: pointer; transition: transform .1s ease, background .15s ease;
}
.qr-house-detail-page .qr-react-btn:hover:not(:disabled) { transform: scale(1.12); }
.qr-house-detail-page .qr-react-btn:disabled { cursor: default; opacity: .55; }
.qr-house-detail-page .qr-react-btn.qr-react-active { background: var(--qr-accent-light); border-color: var(--qr-accent-text); }
.qr-house-detail-page .qr-react-count { font-size: 12px; font-weight: 700; color: #64748b; margin-left: 4px; }