@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* QR Attendance UI (Admin + Public) */
*,*::before,*::after{box-sizing:border-box;}

:root{
  --att-bg:#f6f7fb;
  --att-card:#ffffff;
  --att-text:#111827;
  --att-muted:#6b7280;
  --att-border:#e5e7eb;
  --att-primary:#2f6b1f;
  --att-primary-dark:#245116;
  --att-danger:#dc2626;
  --att-blue:#2563eb;
  --att-warning:#f9da1f;
  --att-radius:10px;
  --att-shadow:0 6px 18px rgba(17,24,39,.08);
  --att-font:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.att-wrap{font-family:var(--att-font); color:var(--att-text); font-size:14px; line-height:1.45; padding:18px 10px 32px; max-width:none}
.att-public.att-wrap{padding:10px 0;}

/* Location slot maps (Leaflet) */
.att-map{
  height: 440px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
}

@media (max-width: 640px){
  .att-map{
  height: 440px;}
}

/* Simple modal (used by Location Slot Edit) */
.att-modal{position:fixed; inset:0; z-index:99999;}
.att-modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.45);} 
.att-modal-card{
  position:relative;
  max-width: 760px;
  width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  overflow:auto;
  margin: 12px auto;
  background:#fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.2);
}
.att-header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px;}
.att-title{margin:0; font-size:26px; font-weight:600; letter-spacing:.2px;}
.att-subtitle{margin:6px 0 0; color:var(--att-muted); font-size:14px;}
.att-card{background:var(--att-card); border:1px solid var(--att-border); border-radius:var(--att-radius); box-shadow:var(--att-shadow); padding:16px;}
.att-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;}
.att-grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:16px;}
.att-grid-2 > *{min-width:0;}
/* 3-column grid used in Reports (Event / Session / Actions) and small stat rows */
.att-grid-3{display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap:16px;}
.att-grid-3 > *{min-width:0;}

/* 3 equal columns (used on Organiser Staff dashboard top row). */
.att-grid-3-eq{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px;}
.att-grid-3-eq > *{min-width:0;}

@media (max-width: 1100px){
  .att-grid-3-eq{grid-template-columns:1fr;}
}

.att-mini-table-wrap{max-height:170px; overflow:auto; padding-right:2px;}
.att-mini-table{width:100%; border-collapse:collapse; font-size:12px;}
.att-mini-table th,.att-mini-table td{padding:6px 0; border-top:1px solid var(--att-border); vertical-align:top;}
.att-mini-table thead th{border-top:none; color:var(--att-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em;}
.att-mini-link{display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.att-grid-4{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px;}
.att-grid-4 > *{min-width:0;}
.att-grid-5{display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:16px;}
.att-grid-5 > *{min-width:0;}
.att-grid-6{display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:16px;}
.att-grid-6 > *{min-width:0;}
@media (max-width: 960px){.att-grid,.att-grid-2{grid-template-columns:1fr;}}
@media (max-width: 960px){.att-grid-3{grid-template-columns:1fr;} .att-grid-4{grid-template-columns:1fr;} .att-grid-5{grid-template-columns:1fr;} .att-grid-6{grid-template-columns:1fr;}}

.att-userchip{display:flex; gap:8px; align-items:center;}
.att-tag{background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff; padding:4px 10px; border-radius:999px; font-size:12px;}
.att-badge{background:#f3f4f6; border:1px solid var(--att-border); padding:4px 10px; border-radius:999px; font-size:12px;}

.att-field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.att-field label{font-size:13px; font-weight:500;}
.att-field input,.att-field select{
  border:1px solid var(--att-border);
  border-radius:8px;
  padding:10px 10px;
  font-size:14px;
  font-family:var(--att-font);
  background-color:#fff;
  outline:none;
}

/* Live Report remark field: keep it compact and align helper text with the label. */
.att-remark-field{max-width:520px; margin-left:auto;}
.att-remark-labelrow{display:flex; align-items:center; gap:8px; margin-bottom:2px;}
.att-remark-labelrow label{margin:0;}
.att-remark-help{color:var(--att-muted); font-size:12px; font-weight:400;}
.att-remark-input{width:100%;}

/* Simple, clean controls used in inline filter grids (e.g., Events > Step 2 filter/search). */
.att-label{display:block; margin:0 0 6px; font-size:13px; font-weight:500; color:var(--att-text);}
.att-input{
  width:100%;
  border:1px solid var(--att-border) !important;
  border-radius:8px !important;
  padding:8px 10px !important;
  height:38px;
  font-size:13px;
  font-family:var(--att-font);
  background:#fff !important;
  box-shadow:none !important;
  outline:none;
}
.att-input::placeholder{color:#9ca3af;}

/* Location Check-in: increase form sizing to match QR Check-in page (att-field inputs use 14px). */
.att-wrap.att-location .att-input{
  font-size:14px !important;
  padding:10px 10px !important;
  height:40px;
}


/* Location Check-in: labels/content font size to 14px (match QR Check-in). */
.att-wrap.att-location .att-label,
.att-wrap.att-location label{
  font-size:14px !important;
}
/* Alias: some templates use .att-muted instead of .muted */
.att-muted{color:var(--att-muted);}

/* Prevent WP admin select caret background from repeating (multiple chevrons). */
select.att-input{
  background:#fff !important;
  background-image:none !important;
  background-repeat:no-repeat !important;
  -webkit-appearance:menulist;
  appearance:menulist;
  padding-right:34px !important;
}
select.att-input:disabled{background:#f3f4f6 !important; color:#9ca3af;}
.att-input:disabled{background:#f3f4f6 !important; color:#9ca3af;}
.att-input:focus{
  border-color:rgba(47,107,31,.45) !important;
  box-shadow:0 0 0 3px rgba(47,107,31,.12) !important;
}

/* Prevent WP admin select caret background from repeating (seen as many chevrons). */
.att-field select{
  background: #fff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  -webkit-appearance: menulist;
  appearance: menulist;
}
.att-field select:disabled{
  background: #f3f4f6 !important;
  color: #9ca3af;
}
.att-field input:focus,.att-field select:focus{border-color:rgba(47,107,31,.45); box-shadow:0 0 0 3px rgba(47,107,31,.12);}

/* Reports (Sessions Export) filter bar: keep Event, Date, Filter, Reset in one line */
.att-filterbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.att-filterbar .att-field{
  margin-bottom:0;
  min-width:220px;
  flex:1 1 280px;
}
.att-filterbar .att-field input[type="date"]{min-width:180px;}
.att-filterbar .att-field-actions{
  flex:0 0 auto;
  min-width:auto;
  flex-direction:row;
  gap:10px;
  align-items:flex-end;
}
.att-filterbar .att-field-actions label{display:none;}
.att-filterbar .att-field-actions .att-btn{
  height:40px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
}

/* Sessions Report filter: put Filter/Reset beside Event and make Event dropdown wider */
.att-filterbar.att-sessions-filter{
  flex-wrap:wrap;
  align-items:flex-end;
}
.att-filterbar.att-sessions-filter .att-field{
  flex:1 1 680px;
  min-width:360px;
}
.att-filterbar.att-sessions-filter .att-field select{
  width:100%;
}
.att-filterbar.att-sessions-filter .att-field-actions{
  margin-left:auto;
}


/* Sessions table extra column */
.att-col-organiser-staff{min-width:220px;}

/* Inline controls (used for button-row filters, etc.) */
.att-inline-control{
  border:1px solid var(--att-border);
  border-radius:8px;
  padding:10px 10px;
  font-size:14px;
  font-family:var(--att-font);
  background:#fff;
  outline:none;
  height:40px;
}

/* Fix WP admin select caret background repeating (multiple chevrons) for inline selects */
select.att-inline-control{
  background:#fff !important;
  background-image:none !important;
  background-repeat:no-repeat !important;
  -webkit-appearance:menulist;
  appearance:menulist;
  padding-right:32px;
  min-width:140px;
}
select.att-inline-control:disabled{
  background:#f3f4f6 !important;
  color:#9ca3af;
}
.att-inline-control:disabled{
  background:#f3f4f6;
  color:#9ca3af;
}
.att-inline-control:focus{
  border-color:rgba(47,107,31,.45);
  box-shadow:0 0 0 3px rgba(47,107,31,.12);
}

.att-btn{
  border:1px solid var(--att-border);
  background:#fff;
  padding:10px 14px;
  font-size:14px;
  line-height:1.1;
  border-radius:8px;
  cursor:pointer;
  font-family:var(--att-font);
  font-weight:500;
  color:#111827; /* explicit to avoid theme disabled styles hiding text */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Ensure <button> elements match <a> sizing when using .att-btn */
button.att-btn{
  -webkit-appearance:none;
  appearance:none;
}

/* Ensure <button> matches <a> sizing when both use .att-btn */
button.att-btn{
  font-size:inherit;
  line-height:inherit;
  -webkit-appearance:none;
  appearance:none;
}
.att-btn.is-disabled{opacity:.55; pointer-events:none;}
.att-btn.is-busy{opacity:.65; pointer-events:none; cursor:wait;}
/* Theme-safe disabled buttons (front-end themes may hide disabled text) */
.att-btn:disabled{opacity:.55; cursor:not-allowed; color:#111827 !important; background:#fff !important; border-color:var(--att-border) !important;}
.att-btn:link,.att-btn:visited{color:inherit; text-decoration:none !important;}
.att-btn:hover{box-shadow:0 6px 18px rgba(17,24,39,.12); transform: translateY(-1px);}
.att-btn:focus{outline:none; box-shadow:0 0 0 3px rgba(47,107,31,.12), 0 6px 18px rgba(17,24,39,.12);}
.att-btn-primary{background:var(--att-primary); border-color:var(--att-primary); color:#fff;}
.att-btn-primary:hover{background:var(--att-primary-dark); border-color:var(--att-primary-dark); color:#fff;}
.att-btn-primary:visited{color:#fff;}

.att-btn-warning{background:var(--att-warning); border-color:var(--att-warning); color:#111827;}
.att-btn-warning:hover{filter:brightness(.95); color:#111827;}
.att-btn-warning:visited{color:#111827;}
/* Ensure primary button links stay white (WP admin link rules can override via :link/:visited specificity) */
.att-btn.att-btn-primary:link,
.att-btn.att-btn-primary:visited{color:#fff;}

/* Secondary buttons (Back / Reset / Cancel / View) */
.att-btn-secondary{
  background:#fff;
  border-color:var(--att-border);
  color:#111827;
}
.att-btn-secondary:hover{
  background:#f9fafb;
  border-color:#d1d5db;
  color:#111827;
}
.att-btn.att-btn-secondary:link,
.att-btn.att-btn-secondary:visited{color:#111827;}
.att-btn-danger{background:var(--att-danger); border-color:var(--att-danger); color:#fff;}
.att-btn.att-btn-danger:link,
.att-btn.att-btn-danger:visited{color:#fff;}
.att-btn-small{padding:7px 10px; font-size:13px;}
.att-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.att-actions-inline{display:inline-flex; gap:8px; flex-wrap:nowrap; align-items:center; white-space:nowrap;}

/* Live report action buttons (Refresh / Export / Auto refresh) */
.att-live-actions{display:flex; justify-content:flex-end; gap:10px; flex-wrap:nowrap; align-items:center;}
.att-live-actions .att-btn{min-width:110px;}
.att-live-actions .att-live-auto{display:inline-flex; align-items:center; gap:8px; margin:0; white-space:nowrap;}
.att-live-actions .att-live-auto input{margin:0;}

/* Live Report – add separation between Event/Session controls and the stats cards */
.att-live-filterbar{margin-top:4px; padding-bottom:14px; border-bottom:1px solid #e5e7eb; margin-bottom:14px;}
@media (max-width: 1200px){
  .att-live-actions{flex-wrap:wrap; justify-content:flex-start;}
}

.muted{color:var(--att-muted);}
.small{font-size:14px;}
.att-hr{border:0; border-top:1px solid var(--att-border); margin:16px 0;}

.att-table-wrap{  /* Allow tables to use full width; scroll horizontally on small screens */  overflow-x:auto;  overflow-y:auto;  border:1px solid var(--att-border);  border-radius:10px;  max-width:100%;  -webkit-overflow-scrolling: touch;}.att-table{  width:100%;  border-collapse:collapse;  table-layout:auto;  font-size:14px;  min-width:980px;}.att-table th,.att-table td{  padding:10px 10px;  border-bottom:1px solid var(--att-border);  vertical-align:top;  white-space:normal;  overflow-wrap:break-word;  word-break:normal;}.att-table thead th{background:#f9fafb; text-align:left; font-weight:600;}

/* Sessions Report: make Event column wider */
.att-table th.att-col-event,
.att-table td.att-col-event{
  min-width: 420px;
  width: 45%;
}

/* Sessions Report table: keep compact columns readable */
.att-col-date,
.att-col-time,
.att-col-present,
.att-col-excused,
.att-col-absent,
.att-col-status,
.att-col-expires{
  white-space: nowrap;
}

.att-col-venue{
  min-width: 180px;
}



/* Mobile-friendly By Event report cards */
.att-mobile-cards{display:none;}
.att-rowcard{
  padding:14px;
  margin-top:12px;
  border:1px solid var(--att-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.att-rowcard-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.att-rowcard-title strong{font-size:15px; line-height:1.35; display:block;}
.att-rowcard-title .muted.small,
.att-rowcard-title .muted{margin-top:6px; line-height:1.5;}
.att-rowcard-badges{display:flex; align-items:flex-start; justify-content:flex-end; flex:0 0 auto;}
.att-rowcard-badges .att-pill{min-width:auto; max-width:100%; padding:7px 14px; font-size:13px; box-shadow:none;}
.att-rowcard-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px;}
.att-k{font-size:12px; color:var(--att-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.02em;}
.att-v{font-size:15px; line-height:1.45;}

@media (max-width: 720px){
  .att-table-wrap.att-byevent-table{display:none;}
  .att-mobile-cards{display:block;}
  .att-accordion{padding:14px; border-radius:18px;}
  .att-accordion summary{display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px;}
  .att-accordion summary > strong{flex:1 1 100%; display:block; font-size:16px; line-height:1.4; word-break:break-word;}
  .att-accordion summary > .att-pill{min-width:auto; padding:7px 12px;}
}
@media (max-width: 520px){
  .att-rowcard{padding:16px;}
  .att-rowcard-top{flex-direction:column; align-items:stretch;}
  .att-rowcard-badges{justify-content:flex-start; width:100%;}
  .att-rowcard-badges .att-pill{width:auto; min-width:0;}
  .att-rowcard-grid{grid-template-columns:1fr; gap:14px;}
}

@media (max-width: 420px){
  .att-rowcard-grid{grid-template-columns:1fr;}
}

.att-th-actions{width:120px;min-width:120px;}
.att-actions-col{white-space:nowrap;}
.att-actions-col .att-btn{display:inline-block; margin:0 6px 0 0;}

.att-pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--att-border); white-space:nowrap; min-width:78px; max-width:100%; justify-content:center; line-height:1.2;}
.pill-green{background:#ecfdf5; color:#065f46; border-color:#a7f3d0;}
.pill-gray{background:#f3f4f6; color:#374151; border-color:#e5e7eb;}
.pill-blue{background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe;}
.pill-orange{background:#fff7ed; color:#9a3412; border-color:#fed7aa;}
.pill-red{background:#fef2f2; color:#991b1b; border-color:#fecaca;}

.att-modal{display:none; position:fixed; inset:0; z-index:99999;}
.att-modal[aria-hidden="false"]{display:block;}
.att-modal-backdrop{position:absolute; inset:0; background:rgba(17,24,39,.45);}
.att-modal-dialog{position:relative; width:min(560px, 92vw); margin:7vh auto; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.22);}
.att-modal-header{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--att-border);}
.att-modal-body{padding:16px;}
.att-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:12px;}
.att-iconbtn{border:1px solid var(--att-border); background:#fff; width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:20px; line-height:1;}

.att-filters{display:grid; grid-template-columns: 1fr 1.3fr auto; gap:10px; align-items:end;}
@media(max-width:720px){.att-filters{grid-template-columns:1fr;}}
.att-selected-bar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:10px 0;}
.att-check{display:flex; align-items:center; gap:8px; font-size:13px;}

.att-multiselect{min-height:160px;}
.att-rolebox{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; border:1px solid var(--att-border); border-radius:10px; padding:10px; max-height:320px; overflow:auto;}
@media(max-width:720px){.att-rolebox{grid-template-columns:1fr;}}

.att-qrbox{display:flex; align-items:center; justify-content:center; min-height:280px; border:1px dashed var(--att-border); border-radius:12px; background:#fbfbfd;}
.att-countdown{font-size:14px;}
.att-qrmeta{font-size:14px;}

/* QR news ticker (projector banner above QR code) */
.att-qr-ticker{
  --att-ticker-duration: 25s;
  --att-ticker-size: 18px;
  --att-ticker-color: #111111;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--att-border);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}
.att-qr-ticker-track{
  width: 100%;
  overflow: hidden;
}
.att-qr-ticker-marquee{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 60px;
  font-size: var(--att-ticker-size);
  font-weight: 600;
  color: var(--att-ticker-color);
  animation: attTickerScroll var(--att-ticker-duration) linear infinite;
  will-change: transform;
}
.att-qr-ticker-marquee span{
  display: inline-block;
  padding-right: 60px;
}
@keyframes attTickerScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.att-qr-ticker:hover .att-qr-ticker-marquee{
  animation-play-state: paused;
}

/* Staff home ticker spacing */
.att-qr-ticker--staff-home{
  margin-top: 10px;
}

/* Fullscreen / projector QR meta line needs to be readable in large classrooms */
#attQrMetaLine{
  font-size:16px;
  font-weight:600;
  color: var(--att-text);
  text-align:center;
}

#attQrFsMetaLine{
  font-size:22px;
  font-weight:700;
  color: var(--att-text);
  text-align:center;
}
@media (max-width:720px){
  #attQrFsMetaLine{font-size:18px;}
}

.att-scan-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.att-scanner{border:1px solid var(--att-border); border-radius:12px; overflow:hidden;}

/* Full-screen scanner overlay (Staff Check-in) */
.att-scan-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0b0f14;
  display: none;
}

.att-scan-topbar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(11,15,20,0.75);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.att-scan-title{ color: #fff; font-weight: 700; }

/* Scan overlay controls: ensure buttons visible on dark background (mobile) */
.att-scan-topbar .att-btn,
.att-scan-tools-fs .att-btn{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
  color:#fff !important;
}
.att-scan-topbar .att-btn:hover,
.att-scan-tools-fs .att-btn:hover{
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.30);
}
.att-scan-tools-fs .att-btn{
  width:40px;
  height:36px;
  padding:0;
  font-size:18px;
  font-weight:700;
}
.att-scan-tools-fs .muted{ color: rgba(255,255,255,0.75) !important; }


.att-scan-tools-fs{
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: rgba(11,15,20,0.65);
  backdrop-filter: blur(8px);
}

.att-scanner-fs{
  position: absolute;
  left: 0;
  right: 0;
  top: 108px;
  bottom: 0;
  border: 0;
  border-radius: 0;
}

/* Make the video fill the full-screen container */
.att-scanner-fs video,
.att-scanner-fs canvas{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Prevent the page from zooming/scrolling while pinching on scanner */
.att-scanner-fs{ touch-action: none; }

body.att-scan-no-scroll{ overflow: hidden !important; }
.att-result{min-height:44px;}
.att-success{border:1px solid #86efac; background:#ecfdf5; color:#065f46; padding:12px; border-radius:12px; font-weight:600;}
.att-error{border:1px solid #fecaca; background:#fef2f2; color:#991b1b; padding:12px; border-radius:12px; font-weight:600;}

.att-toast-wrap{position:fixed; top:18px; right:18px; z-index:100000; display:flex; flex-direction:column; gap:10px;}
.att-toast{background:#111827; color:#fff; padding:10px 12px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2); font-size:13px; max-width:320px;}
.att-toast.att-toast-error{background:#991b1b;}
.att-qr-edit-modal .att-check input[type="checkbox"]{width:auto!important; min-width:16px; height:16px;}
.att-qr-edit-modal .att-check{align-items:center; padding:8px 0;}


.att-stat{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  background: var(--att-card);
  border: 1px solid var(--att-border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 6px 20px rgba(16,24,40,.06);
}

/* Use when a stat contains full-width content (e.g., tables) */
.att-stat.att-stat--stretch{
  align-items:stretch;
}

.att-stat.att-stat--stretch .att-table-wrap,
.att-stat.att-stat--stretch .att-table,
.att-stat.att-stat--stretch table{
  width:100%;
}
.att-stat-label{color:var(--att-muted); font-size:13px; font-weight:500;}
.att-stat-value{font-size:28px; font-weight:600;}
.att-stat-present{background:#ecfdf5; border-color:#a7f3d0;}
.att-stat-present .att-stat-label,.att-stat-present .att-stat-value{color:#065f46;}
.att-stat-excused{background:#eff6ff; border-color:#bfdbfe;}
.att-stat-excused .att-stat-label,.att-stat-excused .att-stat-value{color:#1d4ed8;}
.att-stat-absent{background:#fef2f2; border-color:#fecaca;}
.att-stat-absent .att-stat-label,.att-stat-absent .att-stat-value{color:#991b1b;}

.att-accordion{border:1px solid var(--att-border); border-radius:12px; padding:10px 12px; margin-top:12px; background:#fff;}
.att-accordion summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; justify-content:space-between;}
.att-accordion summary::-webkit-details-marker{display:none;}
.att-accordion[open] summary{margin-bottom:10px;}
.att-ol{margin:10px 0 0 18px; color:var(--att-text);}
.att-ul{margin:8px 0 0 18px; color:var(--att-text);}


/* Full-screen QR (public Organiser Staff page) */
.att-qrfs-dialog{width:min(980px, 96vw); margin:3vh auto;}
.att-qrfs-body{display:flex; flex-direction:column; align-items:center;}
.att-qrfs-box{width:100%; min-height:min(72vh, 760px);}
.att-qrfs-box img,.att-qrfs-box canvas{max-width:100% !important; max-height:100% !important;}

/* Reports header links as button tabs */
.att-tabbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.att-tabbar .att-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:var(--att-primary) !important;
  text-decoration:none !important;
  font-weight:600;
  box-shadow:none;
}
.att-tabbar .att-tab.active{
  background:var(--att-primary);
  border-color:var(--att-primary);
  color:#fff !important;
}
.att-tabbar .att-tab:hover{
  background:#f9fafb;
  border-color:#d1d5db;
}
.att-tabbar .att-tab.active:hover{
  background:var(--att-primary-dark);
  border-color:var(--att-primary-dark);
}

/* =========================================================
   WP Admin Menu: remove the light "submenu head" gap for our
   plugin menu so it matches the default WordPress UI.
   WordPress renders a <li class="wp-submenu-head">... element
   at the top of the submenu. On some installs/themes, its
   styling can appear as a blank white strip.
   ========================================================= */
#adminmenu li#toplevel_page_att_dashboard .wp-submenu-head{
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}
#adminmenu li#toplevel_page_att_dashboard .wp-submenu{
  padding-top:0 !important;
  margin-top:0 !important;
}
#adminmenu li#toplevel_page_att_dashboard .wp-submenu > li{
  margin-top:0 !important;
}

/* allow normal vertical scrolling, but avoid accidental horizontal scroll */
body[class*="toplevel_page_att_"],
body[class*="_page_att_"]{
  overflow-x: hidden;
}

/* ============================
 * Staff Report (List Style)
 * ============================ */
.att-session-list{ display:flex; flex-direction:column; gap:10px; }
.att-session-item{ border:1px solid #e5e7eb; background:#fff; border-radius:14px; padding:12px 14px; }
.att-session-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.att-session-date{ font-weight:700; }
.att-session-meta{ margin-top:8px; font-size:12px; display:flex; flex-wrap:wrap; gap:8px; }
.att-dot{ color:#9ca3af; }

/* ============================================================
 * Admin UI standardization (font, control sizing, colors)
 * Applies only inside plugin admin wrapper (.att-wrap)
 * ============================================================ */
.wp-admin .att-wrap{
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
.wp-admin .att-wrap h1{ font-size:22px; line-height:1.2; }
.wp-admin .att-wrap h2{ font-size:16px; }
.wp-admin .att-wrap label{ font-size:13px; }

/* Inputs / selects */
.wp-admin .att-wrap input[type="text"],
.wp-admin .att-wrap input[type="email"],
.wp-admin .att-wrap input[type="number"],
.wp-admin .att-wrap input[type="password"],
.wp-admin .att-wrap input[type="date"],
.wp-admin .att-wrap input[type="search"],
.wp-admin .att-wrap select,
.wp-admin .att-wrap textarea{
  border-radius: 10px !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
  font-size: 14px !important;
}
.wp-admin .att-wrap input[type="text"],
.wp-admin .att-wrap input[type="email"],
.wp-admin .att-wrap input[type="number"],
.wp-admin .att-wrap input[type="password"],
.wp-admin .att-wrap input[type="date"],
.wp-admin .att-wrap input[type="search"],
.wp-admin .att-wrap select{
  height: 40px !important;
  padding: 0 12px !important;
}
.wp-admin .att-wrap textarea{ padding: 10px 12px !important; }
.wp-admin .att-wrap input:focus,
.wp-admin .att-wrap select:focus,
.wp-admin .att-wrap textarea:focus{
  border-color: var(--att-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-primary) 18%, transparent) !important;
}

/* WP buttons inside plugin pages */
.wp-admin .att-wrap .button,
.wp-admin .att-wrap button{
  border-radius: 10px !important;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
}
.wp-admin .att-wrap .button.button-primary{
  background: var(--att-primary) !important;
  border-color: var(--att-primary) !important;
  color: #fff !important;
}
.wp-admin .att-wrap .button.button-primary:hover,
.wp-admin .att-wrap .button.button-primary:focus{
  background: var(--att-primary-700) !important;
  border-color: var(--att-primary-700) !important;
}
.wp-admin .att-wrap .button.button-secondary{
  border-color: #d1d5db !important;
}
.wp-admin .att-wrap .button.button-secondary:hover,
.wp-admin .att-wrap .button.button-secondary:focus{
  border-color: var(--att-primary) !important;
  color: var(--att-primary) !important;
}

/* Small pills */
.wp-admin .att-wrap .att-pill{ font-size: 12px; }

/* Center bulk-select checkboxes in ATT list tables */
.wp-admin .att-wrap table.widefat th.check-column,
.wp-admin .att-wrap table.widefat td.check-column{
  vertical-align: middle !important;
  text-align: center !important;
  width: 44px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wp-admin .att-wrap table.widefat th.check-column input[type="checkbox"],
.wp-admin .att-wrap table.widefat td.check-column input[type="checkbox"]{
  margin: 0 auto !important;
  float: none !important;
  display: inline-block !important;
}


/* Live Report: QR card */
.att-live-qr{display:flex; align-items:center; gap:12px;}
.att-live-qr-box{width:72px; height:72px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.att-live-qr-box canvas, .att-live-qr-box img{max-width:100%; max-height:100%;}
.att-live-qr-meta{display:flex; flex-direction:column; gap:6px; min-width:0;}
.att-live-qr-link{font-size:12px; color:#0f172a; text-decoration:underline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px;}
@media (max-width: 960px){.att-live-qr-link{max-width:100%;}}



/* ============================
 * Low Attendance Widget (Dashboard - Option B)
 * ============================ */
.att-lowatt .att-lowatt-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
}
.att-lowatt .att-lowatt-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.att-lowatt-summary{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
    margin:12px 0 14px;
}
.att-statcard{
    border:1px solid var(--att-border);
    border-radius:14px;
    padding:12px;
    background:#fff;
}
.att-statlabel{
    font-size:12px;
    color:var(--att-muted);
}
.att-statvalue{
    font-size:22px;
    font-weight:700;
    margin-top:4px;
}

.att-lowatt-toolbar{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr .9fr auto;
    gap:10px;
    align-items:end;
    margin-bottom:12px;
}
.att-lowatt-toolbar-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
}
.att-lowatt-actions-cell{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-start;
}

@media (max-width: 1200px){
    .att-lowatt-toolbar{
        grid-template-columns:1fr 1fr 1fr;
    }
    .att-lowatt-toolbar-actions{
        justify-content:flex-start;
    }
}
@media (max-width: 960px){
    .att-lowatt-summary{
        grid-template-columns:1fr;
    }
    .att-lowatt .att-lowatt-head{
        flex-direction:column;
        align-items:flex-start;
    }
    .att-lowatt-toolbar{
        grid-template-columns:1fr;
    }
    .att-lowatt-toolbar-actions{
        justify-content:flex-start;
    }
}


/* =========================
   Settings page UX improvements
   ========================= */
.att-settings-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
/*
  IMPORTANT:
  .att-pill is used across the plugin (status pills: Present/Absent/Expired/etc.).
  Do NOT redefine it globally here, otherwise it overrides the colored variants
  (.pill-green/.pill-red/...). Scope the “settings nav” pill styling instead.
*/
.att-settings-nav .att-pill{
  padding:6px 10px;
  background:#fff;
  color:var(--att-text);
  text-decoration:none;
  font-weight:600;
  font-size:12px;
  /* keep the global pill border + radius */
  min-width:auto;
}
.att-settings-nav .att-pill:hover{
  border-color:#cbd5e1;
  background:#f8fafc;
}

.att-acc{
  border:1px solid var(--att-border);
  border-radius:14px;
  background:#fff;
  box-shadow: var(--att-shadow);
  overflow:hidden;
}
.att-acc + .att-acc{ margin-top:12px; }
.att-acc summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  font-weight:800;
}
.att-acc summary::-webkit-details-marker{ display:none; }
.att-acc[open] summary{ border-bottom:1px solid var(--att-border); }
.att-acc-meta{
  font-weight:600;
  font-size:12px;
  color:#64748b;
  white-space:nowrap;
}
.att-acc-body{
  padding:14px;
}

.att-mini-acc{
  border:1px dashed #cbd5e1;
  border-radius:12px;
  padding:10px 12px;
  background:#fcfcfd;
}
.att-mini-acc summary{
  cursor:pointer;
  font-weight:700;
}
.att-mini-acc summary::-webkit-details-marker{ display:none; }

.att-rolebox{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
}
@media (max-width: 980px){
  .att-rolebox{ grid-template-columns:1fr; }
}

.att-check{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0;
  font-weight:500;
}
.att-check input[type="checkbox"]{ margin-top:2px; }

.att-shortcode-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.att-shortcode-item{
  display:grid;
  grid-template-columns: 180px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--att-border);
  border-radius:12px;
  background:#fff;
}
@media (max-width: 980px){
  .att-shortcode-item{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
}
.att-sc-title{ font-weight:800; }
.att-sc-code code{
  background:#f1f5f9;
  padding:4px 8px;
  border-radius:10px;
}

.att-btn-sm{
  padding:8px 10px;
  font-size:12px;
}
.att-field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.att-mini-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.att-email-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
  padding:10px 12px;
  border:1px solid var(--att-border);
  border-radius:12px;
  background:#f8fafc;
}

.att-sticky-save{
  position:fixed;
  left:22px;
  right:22px;
  bottom:18px;
  z-index:9999;
  pointer-events:none;
}
.att-sticky-save-inner{
  pointer-events:auto;
  margin-left:auto;
  max-width:560px;
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
}

/* =========================================================
   Organiser Staff Portal Mode (hide WordPress admin chrome)
   ========================================================= */

body.att-portal{
  background:#f4f6fb;
}

/* Hide WP admin chrome */
body.att-portal #wpadminbar,
body.att-portal #adminmenumain,
body.att-portal #adminmenuwrap,
body.att-portal #adminmenu,
body.att-portal #wpfooter{
  display:none !important;
}

/* Remove left padding reserved for WP menu */
body.att-portal #wpcontent,
body.att-portal #wpfooter{
  margin-left:0 !important;
  padding-left:0 !important;
}

/* The portal header is inside the application layout. Do not reserve a second
   fixed WordPress header spacer above the page content. */
body.att-portal #wpbody-content{
  padding-top:0;
}

/* Portal topbar (sticky within the application layout, not a fixed overlay) */
.att-portal-topbar{
  position:sticky;
  top:0;
  left:0;
  right:0;
  height:64px;
  z-index:99999;
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  box-shadow:0 6px 24px rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 18px;
  font-family:var(--att-font);
}

.att-portal-brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:220px;
}
.att-portal-brand-mark{
  font-weight:900;
  letter-spacing:1px;
  font-size:18px;
  color:var(--att-primary);
}
.att-portal-brand-title{
  font-weight:700;
  font-size:14px;
  color:#111827;
}

.att-portal-nav{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  justify-content:center;
  overflow:auto;
  white-space:nowrap;
}

.att-portal-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:12px;
  text-decoration:none;
  color:#374151;
  border:1px solid transparent;
  font-weight:600;
  font-size:13px;
}
.att-portal-link:hover{
  background:#f3f4f6;
  border-color:#e5e7eb;
}
.att-portal-link.is-active{
  background:rgba(46,125,50,0.10);
  color:#14532d;
  border-color:rgba(46,125,50,0.18);
}

.att-portal-user{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:260px;
  justify-content:flex-end;
}
.att-portal-greet{
  color:#111827;
  font-size:13px;
}
.att-portal-logout{
  text-decoration:none;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  font-weight:700;
  font-size:13px;
}
.att-portal-logout:hover{
  background:#f3f4f6;
}

.att-portal-profile{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  font-weight:700;
  font-size:13px;
}
.att-portal-profile:hover{ background:#f3f4f6; }
.att-portal-avatar{
  width:24px;
  height:24px;
  border-radius:999px;
  display:block;
}

.att-portal-toggle{
  display:none;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  padding:10px;
  line-height:0;
  cursor:pointer;
}
.att-portal-toggle:hover{ background:#f3f4f6; }
.att-portal-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#111827;
  border-radius:2px;
}
.att-portal-toggle span + span{ margin-top:4px; }

/* Make plugin pages feel like app pages (less WP spacing) */
body.att-portal .wrap{
  margin:0;
  padding:18px;
}
body.att-portal .att-wrap{
  max-width:none;
  margin:0;
}

/* Dashboard: keep the same centered width as other portal pages (e.g. Reports) */
body.att-portal-page-att_dashboard .att-wrap{
  max-width:none;
}

/* Mobile bottom nav: hidden by default, shown via media query */
.att-portal-bottomnav{
  display:none;
}

@media (max-width: 980px){
  .att-portal-brand{ min-width:auto; }
  .att-portal-topbar{ padding:0 12px; gap:10px; }
  /* Mobile: we rely on the fixed bottom navigation tabs.
     Hide the hamburger/toggle button to keep the header clean. */
  .att-portal-toggle{ display:none !important; }

  /* Hide top navigation on mobile (bottom tabs are used instead). */
  .att-portal-nav{
    display:none !important;
    position:absolute;
    top:64px;
    left:12px;
    right:12px;
    flex-direction:column;
    gap:6px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:10px;
    box-shadow:0 20px 50px rgba(15,23,42,0.12);
    z-index:9998;
  }
  .att-portal-topbar.is-open .att-portal-nav{ display:flex; }
  .att-portal-link{ width:100%; }

  .att-portal-user{ min-width:auto; gap:8px; }
  .att-portal-greet{ display:none; }
  .att-portal-profile span{ display:none; }
  body.att-portal #wpbody-content{ padding-top:0; }

  /* Mobile bottom navigation (always visible, avoids "missing top menu" issue) */
  .att-portal-bottomnav{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    gap:6px;
    padding:8px 10px;
    background:#ffffff;
    border-top:1px solid #e5e7eb;
    z-index:9999;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .att-portal-bottomlink{
    flex:0 0 auto;
    min-width:74px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:6px 8px;
    border-radius:14px;
    text-decoration:none;
    color:#0f172a;
    font-size:12px;
  }
  .att-portal-bottomicon{
    width:36px;
    height:36px;
    border-radius:12px;
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .att-portal-bottomicon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .att-portal-bottomlink.is-active{
    background:#e9f5ee;
    color:#1a5c32;
    font-weight:800;
  }
  .att-portal-bottomlink.is-active .att-portal-bottomicon{
    background:#d8efe1;
    border-color:rgba(26,92,50,.25);
  }

  /* Ensure content is not hidden behind the fixed bottom nav */
  body.att-portal #wpbody-content{ padding-bottom:86px; }
}

/* ================================
 * Organiser Staff Portal: Profile page
 * ================================ */
.att-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:0 0 14px;
}
.att-page-title{
  margin:0;
  font-size:22px;
  font-weight:800;
  color:#0f172a;
}
.att-page-subtitle{
  margin:4px 0 0;
  color:#64748b;
  font-size:13px;
}
.att-card-pad{ padding:16px; }
.att-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.att-field label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#475569;
  margin:0 0 6px;
}
.att-field small{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#64748b;
}
.att-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}
.att-notice{
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px 14px;
  margin:0 0 14px;
  background:#fff;
}
.att-notice.success{
  border-color:rgba(34,197,94,0.25);
  background:rgba(34,197,94,0.08);
  color:#14532d;
}
.att-notice.error{
  border-color:rgba(239,68,68,0.25);
  background:rgba(239,68,68,0.08);
  color:#7f1d1d;
}

@media (max-width: 680px){
  .att-form-grid{ grid-template-columns:1fr; }
  .att-page-head{ align-items:flex-start; flex-direction:column; }
}

/* ============================
 * Organiser Staff portal: mobile fixes
 * ============================ */

/* Prevent long greeting from pushing the top menu off-screen */
@media (max-width: 980px){
  .att-portal-user{ min-width: 0 !important; }
  .att-portal-greet{ display:none !important; }
  .att-portal-actions{ gap:8px !important; }
  .att-portal-toggle-text{ display:none !important; }
}

/* Assigned Events: mobile-friendly stacked table */
.att-table--stack{ min-width: 0 !important; }

@media (max-width: 980px){
  .att-table--stack thead{ display:none !important; }
  .att-table--stack,
  .att-table--stack tbody,
  .att-table--stack tr,
  .att-table--stack td{ display:block !important; width:100%; }

  .att-table--stack tr{
    background:#fff;
    border:1px solid var(--att-border);
    border-radius:14px;
    padding:12px 14px;
    margin:0 0 12px;
  }

  .att-table--stack td{
    border:none !important;
    padding:8px 0 !important;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
  }

  .att-table--stack td::before{
    content: attr(data-label);
    font-weight:600;
    color: var(--att-muted);
    flex:0 0 44%;
    max-width:44%;
  }

  .att-table--stack td:last-child{ padding-bottom:0 !important; }
}

/* ============================
 * Dashboard – Assigned Events
 * Make width consistent with Low Attendance (desktop)
 * and keep readable stacked layout on mobile.
 * ============================ */
.att-assigned-events{margin-bottom:18px;}

.att-assigned-events .att-table-wrap{width:100%;}

@media (min-width:781px){
  /* Ensure the table expands to the full card width (not just its min-content width) */
  .att-assigned-events .att-table{width:100% !important;min-width:100% !important;}
}

@media (max-width:780px){
  /* Slight emphasis on event identity in stacked rows */
  .att-assigned-events .att-table--stack td[data-label="Event Code"] a{font-weight:700;}
  .att-assigned-events .att-table--stack td[data-label="Event Name"] a{font-weight:600;}
}

/* ============================
 * Organiser Staff Dashboard – Mobile polish
 * Clean, simple, easy navigation
 * ============================ */
@media (max-width: 600px){
  /* Make the header more compact */
  .att-header{gap:10px;margin:0 0 14px;}
  .att-title{font-size:22px;line-height:1.2;}
  .att-subtitle{font-size:13px;line-height:1.4;}

  /* Avoid the long name taking space; keep only the role badge */
  .att-userchip .att-badge{display:none;}
  .att-userchip{justify-content:flex-start;}

  /* Summary cards spacing */
  .att-stats{gap:12px;}
  .att-card{border-radius:16px;}

  /* Event cards: a little more breathing room */
  .att-assigned-events{padding:12px;}
  .att-assigned-events .att-section-title{font-size:16px;}
  .att-assigned-events .att-section-desc{font-size:13px;}
  .att-assigned-events .att-table--stack tbody tr{padding:12px;}

  /* Topbar: prevent brand text from wrapping awkwardly */
  .att-portal-brand{white-space:nowrap;}
  .att-portal-brand-title{font-size:13px;}
  .att-portal-brand-mark{font-size:16px;}

  /* Bottom nav: slightly tighter and cleaner */
  .att-portal-bottomnav{border-top:1px solid rgba(0,0,0,.06);}
  .att-portal-bottomlink{padding:10px 4px;font-size:11px;}
  .att-portal-bottomicon{width:22px;height:22px;}
}

@media (max-width: 420px){
  /* Reduce clutter in the topbar actions */
  .att-portal-profilebtn,
  .att-portal-btn--logout{padding:8px 10px;}
  .att-portal-actions{gap:8px;}
}

/* ======================================================
 * Organiser Staff Portal - Laravel-style sidebar layout
 * ====================================================== */

.att-portal #wpbody-content{
  padding: 0 !important;
}

.att-portal-shell{
  display: flex;
  min-height: 100vh;
  background: #f5f7fb;
  font-family: var(--att-font);
  color: var(--att-text);
}

.att-portal-sidebar{
  width: 260px;
  background: #ffffff;
  border-right: 1px solid #e7ebf3;
  padding: 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.att-portal-sidebar-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 6px 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid #eef2f7;
}

.att-portal-brand-logo{
  display:block;
  width:100%;
  max-width: 190px;
  max-height: 72px;
  object-fit: contain;
  object-position: left center;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:8px;
}

.att-portal-brand-mark{
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--att-green);
  font-size: 16px;
  line-height: 1;
}

.att-portal-brand-title{
  font-weight: 700;
  color: #111827;
  font-size: 14px;
  line-height: 1.15;
}

.att-portal-sidenav{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.att-sidenav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  color: #374151;
  text-decoration: none;
  font-weight: 600;
}

.att-sidenav-link:hover{
  background: #f2f5fb;
  color: #111827;
}

.att-sidenav-link.is-active{
  background: rgba(50, 101, 4, 0.10);
  color: #1f2937;
}

.att-sidenav-icon{
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #4b5563;
}

.att-sidenav-link.is-active .att-sidenav-icon{
  color: var(--att-green);
}

.att-sidenav-icon svg,
.att-portal-bottomicon svg,
.att-portal-navicon svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.att-sidenav-label{
  font-size: 15px;
}

.att-portal-sidenav-footer{
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #eef2f7;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.att-sidenav-logout{
  color: #6b7280;
}

.att-portal-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.att-portal-topbar{
  height: 64px;
  background: #ffffff;
  border-bottom: 1px solid #e7ebf3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.att-portal-menu{
  width: 42px;
  height: 42px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}

.att-portal-menu span{
  display: block;
  width: 18px;
  height: 2px;
  background: #111827;
  border-radius: 2px;
}

.att-portal-topbar-title{
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.att-portal-user{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Organiser Staff portal: top-right user identity + settings icon */
.att-portal-userbox{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
}

.att-portal-settingsbtn{
  width: 42px;
  height: 42px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.att-portal-settingsbtn:hover{
  background: #f8fafc;
}

.att-portal-settingsicon svg{
  width: 18px;
  height: 18px;
}

.att-portal-userbtn{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}

.att-portal-avatar{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}

.att-portal-username{
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att-portal-caret{
  font-size: 12px;
  color: #6b7280;
}

.att-portal-usermenu{
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  min-width: 180px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12);
  padding: 8px;
  display: none;
  z-index: 30;
}

.att-portal-usermenu a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 10px;
  color: #111827;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.att-portal-usermenu a:hover{
  background: #f2f5fb;
}

.att-portal-user.is-open .att-portal-usermenu{
  display: block;
}

.att-portal-content{
  flex: 1;
  padding: 18px 18px 90px;
}

.att-portal-container{
  width: 100%;
  /* Full width content area (matches modern admin UI patterns) */
  max-width: none;
  margin: 0;
}

/* Make internal page wrappers use the portal container width */
.att-portal .att-wrap,
.att-portal .att-dashboard-wrap{
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep cards/tables from sticking to screen edge */
.att-portal .att-card,
.att-portal .att-section,
.att-portal .att-table-wrap{
  width: 100%;
}

/* Sidebar + topbar responsive (mobile) */
@media (max-width: 980px){
  .att-portal-shell{
    display: block;
  }

  .att-portal-sidebar{
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    width: 260px;
    z-index: 60;
    transition: left 180ms ease;
    box-shadow: 0 16px 50px rgba(17, 24, 39, 0.18);
  }

  body.att-portal-nav-open .att-portal-sidebar{
    left: 0;
  }

  .att-portal-menu{
    display: inline-flex;
  }

  .att-portal-username{
    display: none;
  }

  .att-portal-content{
    padding: 14px 14px 92px;
  }

  .att-portal-container{
    max-width: 100%;
  }
}

/* Overlay for mobile sidebar */
.att-portal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.30);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

body.att-portal-nav-open .att-portal-overlay{
  opacity: 1;
  pointer-events: auto;
}

/* Hide the old top navigation (legacy) if still present */
.att-portal .att-portal-nav{
  display: none !important;
}

/* Ensure bottom nav stays mobile-only */
@media (min-width: 981px){
  .att-portal-bottomnav{ display: none !important; }
}


.att-portal-usermenu.is-open{
  display: block;
}

/* ============================================================
 * Organiser Staff portal: larger typography (Dashboard / Generate QR /
 * Reports / Events / Staff)
 * Applies only when body has class `att-portal`.
 * ============================================================ */
body.att-portal{
  -webkit-text-size-adjust: 100%;
}

/* Page titles */
body.att-portal .att-title{ font-size: 28px; }
body.att-portal .att-subtitle{ font-size: 16px; }
body.att-portal .att-section-title{ font-size: 18px; }
body.att-portal .att-section-desc{ font-size: 14px; }

/* Stats cards */
body.att-portal .att-stat-label{ font-size: 14px; }
body.att-portal .att-stat-number{ font-size: 30px; }

/* Form controls */
body.att-portal .att-field label{ font-size: 14px; }
body.att-portal input[type="text"],
body.att-portal input[type="email"],
body.att-portal input[type="password"],
body.att-portal input[type="number"],
body.att-portal input[type="date"],
body.att-portal input[type="time"],
body.att-portal select,
body.att-portal textarea{
  font-size: 15px;
}

/* Tables */
body.att-portal .att-table th,
body.att-portal .att-table td{
  font-size: 15px;
}

/* Buttons */
body.att-portal .att-btn,
body.att-portal .button,
body.att-portal button{
  font-size: 15px;
}

/* Small UI pieces */
body.att-portal .att-badge,
body.att-portal .att-tag,
body.att-portal .att-chip,
body.att-portal .att-pill,
body.att-portal .att-mini{ font-size: 13px; }

/* Portal chrome */
body.att-portal .att-portal-top .att-portal-user{ font-size: 13px; }
body.att-portal .att-portal-menu a{ font-size: 15px; }
body.att-portal .att-portal-menu .att-portal-sec-title{ font-size: 14px; }
body.att-portal .att-portal-brand-mark{ font-size: 18px; }
body.att-portal .att-portal-brand-title{ font-size: 14px; }

/* Mobile: keep readable but avoid overflow */
@media (max-width: 700px){
  body.att-portal .att-title{ font-size: 24px; }
  body.att-portal .att-subtitle{ font-size: 15px; }
  body.att-portal .att-table th,
  body.att-portal .att-table td{ font-size: 14px; }
}


/* Quick Setup spacing */
.att-quick-setup-steps{padding-left:8px;}
.att-quick-setup-steps .att-ol{margin-left:26px;}



/* Settings page: make all body content slightly larger (headings keep their own sizes) */
.att-settings-page { font-size: 15px; line-height: 1.5; }
.att-settings-page, 
.att-settings-page p,
.att-settings-page label,
.att-settings-page input,
.att-settings-page select,
.att-settings-page textarea,
.att-settings-page .description,
.att-settings-page .att-subtitle,
.att-settings-page .att-help,
.att-settings-page .att-muted {
  font-size: 15px;
}

/* Make sure WordPress buttons and inputs feel balanced with the larger base type */
.att-settings-page .button,
.att-settings-page .button-primary,
.att-settings-page .button-secondary {
  font-size: 14px;
}

/* ============================
 * Staff Report: Low attendance highlight
 * ============================ */
.att-table tr.att-row-low td{background-color:#fff1f2 !important;}
.att-table tr.att-row-low td:first-child{box-shadow:inset 4px 0 0 #dc2626;}
.att-table tr.att-row-low .att-staff-attendance-pct{color:#991b1b;}
.att-badge-low{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:0.02em;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}


/* ============================
 * Sessions Report: Event/Organiser Staff search helper (Option A)
 * - Expand select as listbox when multiple matches
 * - Highlight select + show clickable match chips
 * ============================ */
.att-select-attention{
  outline: none;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18) !important;
}
.att-event-match-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.att-event-match{
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
}
.att-event-match:hover{
  border-color:#16a34a;
}

/* Live Report filter bar (Event/Session card) */
.att-live-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.att-live-actions .att-btn{ margin:0; }
.att-live-auto{ display:flex; align-items:center; gap:6px; margin:0; }

/* Responsive: stack actions on small screens */
@media (max-width: 782px){
  .att-live-actions{ justify-content:flex-start; }
}

/* ============================
 * Location slots: status badges
 * ============================ */
.att-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:18px;
  border:1px solid transparent;
}
.att-badge-success{
  background:#e9f7ee;
  border-color:#bfe6cc;
  color:#166534;
}
.att-badge-warn{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}
.att-badge-danger{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}
.att-badge-muted{
  background:#f3f4f6;
  border-color:#e5e7eb;
  color:#374151;
}

/* Location slots: mobile-friendly table */
.att-loc-slots-card{
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
}
.att-loc-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}
.att-loc-toolbar-select{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  min-height:40px;
}
.att-loc-toolbar-count{
  margin-left:auto;
  white-space:nowrap;
}
.att-loc-table-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}
.att-loc-table{
  min-width:1080px;
  table-layout:auto;
}
.att-loc-table thead th,
.att-loc-table tbody td{
  vertical-align:top;
  white-space:nowrap;
}
.att-loc-table .att-col-event{
  min-width:220px;
  white-space:normal;
}
.att-loc-table .att-col-venue{
  min-width:160px;
  white-space:normal;
}
.att-loc-table .att-col-status,
.att-loc-table .att-col-checkins,
.att-loc-table .att-col-total,
.att-loc-table .att-col-validity,
.att-loc-table .att-col-radius,
.att-loc-table .att-col-start{
  text-align:left;
}
.att-loc-table .att-col-start{
  min-width:130px;
}
.att-loc-table .att-col-expires{
  min-width:170px;
  white-space:normal;
}
.att-loc-table .att-col-actions{
  min-width:440px;
}
.att-loc-table .att-actions-inline{
  display:inline-flex;
  flex-wrap:nowrap;
  gap:8px;
  white-space:nowrap;
}
.att-loc-table .att-btn-small{
  min-width:72px;
  text-align:center;
}

@media (max-width: 782px){
  .att-loc-toolbar{
    padding:12px;
    gap:10px;
  }
  .att-loc-toolbar-select{
    width:100%;
  }
  .att-loc-toolbar .att-btn{
    min-height:42px;
  }
  .att-loc-toolbar-count{
    margin-left:0;
    width:100%;
  }
  .att-loc-table-scroll{
    position:relative;
  }
  .att-loc-table{
    min-width:980px;
  }
  .att-loc-table thead th,
  .att-loc-table tbody td{
    padding-top:14px;
    padding-bottom:14px;
  }
}


/* GPS status message + accuracy badge */
.att-gps-status{
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 13px;
  line-height: 1.35;
}
.att-gps-status--loading{ border-color:#c7d2fe; background:#eef2ff; }
.att-gps-status--success{ border-color:#b7e3c1; background:#ecfdf3; }
.att-gps-status--error{ border-color:#fecaca; background:#fff1f2; }

.att-acc-badge{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  vertical-align: middle;
}
.att-acc-good{ background:#dcfce7; border-color:#86efac; color:#14532d; }
.att-acc-fair{ background:#fef9c3; border-color:#fde047; color:#713f12; }
.att-acc-weak{ background:#ffe4e6; border-color:#fda4af; color:#881337; }
.att-acc-note{ color:#64748b; }



/* Sidebar section headings */
.att-sidenav-section-title{
  margin:14px 12px 6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
}

.att-portal-brand-subtitle{
  font-size:11px;
  color:#6b7280;
  margin-top:2px;
}

.att-btn.att-btn-disabled,
.att-btn.att-btn-secondary.is-disabled{background:#e5e7eb;border-color:#d1d5db;color:#6b7280;pointer-events:none;opacity:1;}


/* Staff list search card: keep the search controls on one clean row like Organiser Staff. */
.att-staff-filter-row{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;}
.att-staff-filter-row .att-input{flex:0 0 auto;}
.att-staff-filter-row .att-btn{flex:0 0 auto;}


/* ======================================================
 * Staff / Users list mobile overflow fix
 * Prevent whole-page sideways scrolling on small screens.
 * ====================================================== */
@media (max-width: 780px){
  body.att-portal,
  body.att-portal #wpbody,
  body.att-portal #wpbody-content,
  body.att-portal .att-portal-content,
  body.att-portal .att-wrap{
    overflow-x:hidden;
  }

  body.att-portal .att-header{
    flex-direction:column;
    align-items:stretch;
  }

  body.att-portal .att-actions-inline{
    display:flex;
    width:100%;
    flex-wrap:wrap;
    white-space:normal;
    justify-content:stretch !important;
    gap:10px;
  }

  body.att-portal .att-actions-inline form,
  body.att-portal .att-actions-inline > a,
  body.att-portal .att-actions-inline > button{
    flex:1 1 calc(50% - 5px);
    min-width:0;
    max-width:100%;
  }

  body.att-portal .att-actions-inline form button,
  body.att-portal .att-actions-inline > a,
  body.att-portal .att-actions-inline > button{
    width:100%;
    text-align:center;
  }

  body.att-portal .att-staff-filter-row{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  body.att-portal .att-staff-filter-row .att-input,
  body.att-portal .att-staff-filter-row input[type="text"],
  body.att-portal .att-staff-filter-row input[type="search"],
  body.att-portal .att-staff-filter-row select,
  body.att-portal .att-staff-filter-row .att-btn,
  body.att-portal #attStaffMemberFilterCard .att-input,
  body.att-portal #attStaffMemberFilterCard input[type="text"],
  body.att-portal #attStaffMemberFilterCard select,
  body.att-portal #attStaffMemberFilterCard .att-btn{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
    min-width:0 !important;
  }

  body.att-portal .att-table-actions > div,
  body.att-portal .att-table-actions > div > div,
  body.att-portal .att-pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100%;
  }

  body.att-portal .att-pagination > *,
  body.att-portal .att-table-actions .att-btn,
  body.att-portal .att-table-actions .att-input,
  body.att-portal .att-table-actions select{
    max-width:100%;
    min-width:0;
  }

  body.att-portal .att-table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* Click-to-sort table headers */
.att-table thead th.att-sortable,
.wp-list-table thead th.att-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 20px;
}
.att-table thead th.att-sortable::after,
.wp-list-table thead th.att-sortable::after {
  content: '↕';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #94a3b8;
}
.att-table thead th.att-sort-asc::after,
.wp-list-table thead th.att-sort-asc::after {
  content: '↑';
  color: #326504;
}
.att-table thead th.att-sort-desc::after,
.wp-list-table thead th.att-sort-desc::after {
  content: '↓';
  color: #326504;
}


/* Active QR Check-in edit modal */
.att-modal-open{overflow:hidden;}
.att-qr-edit-modal .att-qr-edit-dialog{
  width:min(920px, 96vw);
  max-height:92vh;
  margin:4vh auto;
  display:flex;
  flex-direction:column;
}
.att-qr-edit-modal .att-modal-body{
  overflow:auto;
  max-height:calc(92vh - 136px);
}
.att-qr-edit-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.att-qr-edit-modal .att-field{margin-bottom:0;}
.att-qr-edit-modal .att-field label:not(.att-check){
  display:block;
  font-weight:600;
  margin-bottom:6px;
}
.att-qr-edit-modal input,
.att-qr-edit-modal select{
  width:100%;
}
.att-qr-edit-actions{
  padding:14px 16px;
  border-top:1px solid var(--att-border);
  background:#fff;
}
@media(max-width:760px){
  .att-qr-edit-grid{grid-template-columns:1fr;}
  .att-qr-edit-modal .att-qr-edit-dialog{
    width:calc(100vw - 18px);
    margin:9px auto;
    max-height:calc(100vh - 18px);
  }
  .att-qr-edit-modal .att-modal-body{
    max-height:calc(100vh - 154px);
  }
}


/* Searchable select */
.att-sselect{position:relative; width:100%;}
.att-sselect-native{position:absolute !important; opacity:0 !important; pointer-events:none !important; inset:0 auto auto 0 !important; width:1px !important; height:1px !important;}
.att-sselect-trigger{
  width:100%; min-height:40px; border:1px solid var(--att-border); border-radius:8px; background:#fff; color:var(--att-text);
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; font:inherit; cursor:pointer; text-align:left;
}
.att-sselect-trigger:focus{outline:none; border-color:rgba(47,107,31,.45); box-shadow:0 0 0 3px rgba(47,107,31,.12);}
.att-sselect-label{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.att-sselect-label.is-placeholder{color:#6b7280;}
.att-sselect-caret{width:10px; height:10px; border-right:2px solid #6b7280; border-bottom:2px solid #6b7280; transform:rotate(45deg); flex:0 0 auto; margin-top:-4px;}
.att-sselect.is-open .att-sselect-caret{transform:rotate(-135deg); margin-top:2px;}
.att-sselect-panel{position:absolute; z-index:9999; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--att-border); border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.12); padding:8px;}
.att-sselect-search{width:100%; border:1px solid var(--att-border); border-radius:8px; padding:9px 10px; font:inherit; margin:0 0 8px;}
.att-sselect-search:focus{outline:none; border-color:rgba(47,107,31,.45); box-shadow:0 0 0 3px rgba(47,107,31,.12);}
.att-sselect-options{max-height:240px; overflow:auto; display:flex; flex-direction:column; gap:2px;}
.att-sselect-option{width:100%; border:0; background:#fff; border-radius:8px; text-align:left; padding:9px 10px; font:inherit; color:var(--att-text); cursor:pointer;}
.att-sselect-option:hover,.att-sselect-option:focus{background:#f3f4f6; outline:none;}
.att-sselect-option.is-selected{background:#eef6eb; color:#245116; font-weight:600;}
.att-sselect-empty{padding:12px 10px; color:var(--att-muted); font-size:13px;}
.att-field > .att-sselect{margin-top:0;}
.att-modal .att-sselect-panel{z-index:100000;}

/* Location code attendance remark badge in Reports */
.att-code-remark-badge{display:inline-block;margin:0 0 6px 0;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.2;white-space:normal;border:1px solid transparent;}
.att-code-remark-rep{background:#e8f5e9;color:#1b5e20;border-color:#a5d6a7;}
.att-code-remark-auto{background:#fff8e1;color:#7a4b00;border-color:#ffe082;}

@media (max-width: 782px){ body.att-mobile-mode, body.att-mobile-mode *, .att-mobile-app, .att-mobile-app *{font-family:'Poppins', Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;} }


/* v1.6.10.502 clean mobile font + generated code report badge */
@media (max-width: 782px) {
  body, .att-wrap, .att-card, .att-public, .att-btn, .att-input, .att-table, .att-table * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 15px;
  }
  .att-loc-page-card-title, .att-title { font-size: 20px !important; }
}
.att-code-remark-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  border: 1px solid #bbf7d0;
  background: #dcfce7;
  color: #166534;
  max-width: 100%;
  white-space: normal;
}
.att-code-remark-auto {
  border-color: #fed7aa;
  background: #ffedd5;
  color: #9a3412;
}

/* v1.6.10.503: clean separate cards for generated-code attendance remarks */
.att-remark-card{
  display:block;
  width:max-content;
  max-width:260px;
  margin:0 0 6px 0;
  padding:7px 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  line-height:1.25;
  white-space:normal;
  border:1px solid transparent;
}
.att-remark-card-name{
  background:#ffffff;
  color:#111827;
  border-color:#d1d5db;
  font-weight:600;
}
.att-code-remark-rep{
  background:#dcfce7 !important;
  color:#166534 !important;
  border-color:#86efac !important;
}
.att-code-remark-represented{
  background:#fef3c7 !important;
  color:#92400e !important;
  border-color:#fcd34d !important;
}
.att-code-remark-auto{
  background:#ffedd5 !important;
  color:#9a3412 !important;
  border-color:#fed7aa !important;
}

/* v1.6.10.505: editable generated-code remark cards */
.att-code-remark-wrap .att-code-remark-edit{
  margin-top:2px;
}
.att-code-remark-editor{
  min-width:220px;
  max-width:300px;
}
.att-code-remark-editor select,
.att-code-remark-editor input{
  width:100%;
  min-height:36px;
  margin:0 0 6px 0;
  padding:7px 10px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  line-height:1.3;
}
.att-code-remark-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* Location code options */
.att-loc-code-options .att-loc-code-suboptions{
  border-top:1px solid #eef2f7;
  padding-top:8px;
  transition:opacity .15s ease, filter .15s ease;
}
.att-loc-code-options .att-loc-code-suboptions.is-disabled{
  opacity:.45;
  filter:grayscale(1);
}
.att-loc-code-options .att-loc-code-suboptions.is-disabled label{
  cursor:not-allowed;
}
.att-loc-code-options input[disabled]{
  cursor:not-allowed;
}


/* Location Check-in: keep Active Location Slot action buttons visible after adding View Info */
#attLocActiveSlots .att-col-actions,
.att-location .att-col-actions{
  min-width: 420px;
  width: 420px;
}
#attLocActiveSlots .att-actions-inline,
.att-location .att-actions-inline{
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 6px;
  align-items: center;
  justify-items: stretch;
  max-width: 400px;
}
#attLocActiveSlots .att-actions-inline .att-btn,
.att-location .att-actions-inline .att-btn{
  margin: 0 !important;
  padding: 7px 9px !important;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}
#attLocActiveSlots .att-col-code,
.att-location .att-col-code{
  min-width: 150px;
}
@media (max-width: 782px){
  #attLocActiveSlots .att-col-actions,
  .att-location .att-col-actions{
    min-width: 340px;
    width: 340px;
  }
  #attLocActiveSlots .att-actions-inline,
  .att-location .att-actions-inline{
    max-width: 320px;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}


/* ============================================================
 * Unified one-line pagination controls
 * Keep Page / Prev / Next / Show / per-page select on one row.
 * ============================================================ */
.att-wrap .att-pagination:not(.att-pagination-bottom),
body.att-portal .att-pagination:not(.att-pagination-bottom){
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap;
}
.att-wrap .att-pagination:not(.att-pagination-bottom) > *,
body.att-portal .att-pagination:not(.att-pagination-bottom) > *{
  flex:0 0 auto !important;
  width:auto !important;
}
.att-wrap .att-pagination .att-pagination-page,
.att-wrap .att-pagination .att-pagination-show,
body.att-portal .att-pagination .att-pagination-page,
body.att-portal .att-pagination .att-pagination-show{
  color:#667085;
  font-size:12px;
  font-weight:700;
}
.att-wrap .att-pagination select.att-pagination-per-page,
body.att-portal .att-pagination select.att-pagination-per-page{
  width:78px !important;
  min-width:78px !important;
  max-width:78px !important;
  flex:0 0 78px !important;
}
@media (max-width:760px){
  body.att-portal .att-pagination:not(.att-pagination-bottom){
    width:100% !important;
    justify-content:flex-start !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  body.att-portal .att-pagination:not(.att-pagination-bottom) > *{
    max-width:none !important;
    min-width:0 !important;
  }
}

.att-pdf-group-wrap{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:7px 10px;
  border:1px solid var(--att-border);
  border-radius:10px;
  background:#fff;
}
.att-pdf-group-check{
  align-items:center;
  gap:5px;
  font-size:13px;
  white-space:nowrap;
}
.att-pdf-group-check input[type="checkbox"]{
  margin:0;
}


/* Active QR Check-in / Active Location Slots pagination */
.att-active-list-pagination{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap;
}
.att-active-list-pagination-top{
  margin-bottom:10px;
}
.att-active-list-pagination-bottom{
  margin-top:10px;
  padding:0 0 2px;
}
.att-loc-toolbar .att-active-list-pagination-top{
  margin-left:auto;
  margin-bottom:0;
}
.att-loc-toolbar .att-loc-toolbar-count{
  margin-left:0;
}
@media (max-width:782px){
  .att-loc-toolbar .att-active-list-pagination-top{
    width:100%;
    margin-left:0;
    justify-content:flex-start !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .att-active-list-pagination-bottom{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
}

/* Pagination Apply button */
.att-wrap .att-pagination .att-pagination-apply,
body.att-portal .att-pagination .att-pagination-apply{
  white-space:nowrap;
}


/* v1.6.10.588: Mobile-only regular button weight override */
body.att-mobile-mode .att-btn,
body.att-mobile-mode .att-btn span,
body.att-mobile-mode .att-btn strong,
body.att-mobile-mode .att-btn b,
body.att-mobile-mode button,
body.att-mobile-mode button span,
body.att-mobile-mode input[type="button"],
body.att-mobile-mode input[type="submit"],
body.att-mobile-mode input[type="reset"]{
  font-weight:400 !important;
}



/* v1.6.10.609 - Key-in Code page UI refinement */
.att-code-entry-panel{border-radius:22px; background:#fff;}
.att-code-entry-row{display:flex; gap:10px; align-items:stretch;}
.att-code-input{flex:1 1 auto; min-width:0;}
.att-code-submit-btn{min-width:150px; display:inline-flex; align-items:center; justify-content:center; border-radius:16px;}
.att-code-confirm-shell{padding:16px !important; margin:0; border:1px solid #e5e7eb; border-radius:22px; background:#fff; box-shadow:none;}
.att-code-event-summary{border:1px solid #e5e7eb; border-radius:18px; padding:18px; margin-bottom:16px; background:#fcfcfd; font-size:15px; line-height:1.55;}
.att-code-event-title{display:block; font-size:20px; font-weight:700; margin-bottom:12px; color:#111827; line-height:1.3; word-break:break-word;}
.att-code-event-grid{display:grid; gap:10px;}
.att-code-event-row{display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:start;}
.att-code-event-label{color:#6b7280; font-weight:500;}
.att-code-event-value{color:#111827; font-weight:600; word-break:break-word;}
.att-code-method-intro{margin:4px 0 14px; font-size:16px; line-height:1.6; color:#4b5563;}
.att-code-method-buttons{display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px;}
.att-code-method-btn{width:100%; min-height:46px; padding:8px 14px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:16px; line-height:1.25; white-space:normal;}
.att-code-method-btn-title,.att-code-method-btn-sub{display:block; width:100%;}
.att-code-method-btn-title{margin-bottom:0; line-height:1.15;}
.att-code-method-btn-sub{margin-top:-2px; line-height:1.1;}
.att-code-choice-area{margin-top:12px;}
.att-code-subcard{padding:14px !important; margin:0; box-shadow:none; border:1px solid #e5e7eb; border-radius:18px; background:#fafafa;}
.att-code-subtitle{margin-bottom:10px; font-size:14px; line-height:1.5;}
.att-code-staff-select{margin-bottom:12px;}
.att-code-confirm-btn{width:100%;}
@media (max-width: 767px){
  .att-code-entry-row{flex-direction:column;}
  .att-code-submit-btn{width:100%; min-height:48px;}
  .att-code-event-row{grid-template-columns:1fr; gap:4px;}
  .att-code-event-title{font-size:18px;}
  .att-code-method-btn{min-height:44px; padding:8px 12px;}
}

.att-code-method-selected{box-shadow:0 0 0 3px rgba(47,107,31,.18); filter:brightness(.95);}

.att-code-sub-actions{display:grid; grid-template-columns:1fr; gap:10px;}
.att-code-back-btn{width:100%; min-height:44px; padding:8px 14px; border-radius:16px;}

/* v1.6.10.628 - Professional Filter & Select Staff toolbar/table layout */
.att-event-select-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 10px;
  padding:10px 12px;
  background:#f9fafb;
  border:1px solid var(--att-border);
  border-radius:14px;
}
.att-event-select-summary{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.att-event-select-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:13px;
  font-weight:700;
  color:#111827;
  white-space:nowrap;
}
.att-event-select-all input[type="checkbox"],
.att-event-select-table input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
}
.att-event-select-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:5px 10px;
  border:1px solid var(--att-border);
  border-radius:999px;
  background:#fff;
  color:#667085;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.att-event-select-total{
  color:var(--att-primary);
  border-color:rgba(47,107,31,.18);
  background:rgba(47,107,31,.06);
}
.att-event-step2-pagination-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}
.att-event-step2-pagination-bottom{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #f3f4f6;
}
.att-wrap .att-event-step2-pagination,
body.att-portal .att-event-step2-pagination{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap;
}
.att-wrap .att-event-step2-pagination > *,
body.att-portal .att-event-step2-pagination > *{
  flex:0 0 auto !important;
}
.att-event-step2-pagination .att-event-step2-page-info{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid #eef2f7;
  color:#667085;
  font-size:12px;
  font-weight:800;
}
.att-event-step2-pagination .att-btn-sm{
  min-height:34px;
  padding:8px 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
}
.att-wrap .att-event-step2-pagination select.att-pagination-per-page,
body.att-portal .att-event-step2-pagination select.att-pagination-per-page{
  width:84px !important;
  min-width:84px !important;
  max-width:84px !important;
  height:34px !important;
  padding:6px 26px 6px 10px !important;
  border-radius:10px !important;
  font-size:12px;
  font-weight:700;
}
.att-event-select-table-wrap{
  margin-top:10px;
  border-radius:14px;
  background:#fff;
  overflow-x:auto;
  overflow-y:visible;
}
.att-event-select-table{
  min-width:1120px;
  border-collapse:separate;
  border-spacing:0;
}
.att-event-select-table thead th{
  background:#f8fafc;
  color:#111827;
  font-size:13px;
  font-weight:800;
  padding-top:12px;
  padding-bottom:12px;
  border-bottom:1px solid #e5e7eb;
}
.att-event-select-table tbody td{
  padding:12px 10px;
  vertical-align:middle;
}
.att-event-select-table tbody tr:hover td{
  background:#fbfdff;
}
@media (max-width: 1180px){
  .att-event-select-toolbar{
    align-items:flex-start;
  }
  .att-event-step2-pagination-wrap{
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .att-wrap .att-event-step2-pagination,
  body.att-portal .att-event-step2-pagination{
    justify-content:flex-start !important;
  }
}
@media (max-width: 760px){
  .att-event-select-toolbar{
    padding:10px;
  }
  .att-event-select-summary{
    width:100%;
  }
  .att-event-select-pill{
    font-size:11px;
    padding:5px 8px;
  }
  .att-event-select-table{
    min-width:980px;
  }
}

/* v1.6.10.629 - Removed IC No. column from Filter & Select Staff list for cleaner display */

/* v1.6.10.645: keep hidden report columns aligned between header and data cells. */
.att-table .att-col-hidden{display:none!important;}

/* Display/Hide column selector */
.att-column-toggle{position:relative; display:inline-flex; align-items:center;}
.att-column-toggle-menu{position:absolute; top:calc(100% + 6px); left:0; min-width:220px; background:#fff; border:1px solid #d0d5dd; border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,.12); padding:8px; z-index:100;}
.att-column-toggle.is-open .att-column-toggle-menu{display:block;}
.att-column-toggle-item{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; color:#1f2937; white-space:nowrap;}
.att-column-toggle-item:hover{background:#f8fafc;}
.att-column-toggle-item input{margin:0;}

/* Merged Sessions Report: professional desktop/mobile arrangement */
.att-merged-report-card,
.att-merged-summary-card{
  margin-top: 14px;
}
.att-merged-report-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--att-border);
}
.att-section-kicker,
.att-toolbar-label{
  display:block;
  color:var(--att-primary);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.att-merged-report-title h2{
  margin:4px 0 0;
  font-size:22px;
  line-height:1.25;
  font-weight:700;
}
.att-merged-report-title p,
.att-merged-summary-head p{
  margin:6px 0 0;
}
.att-merged-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.att-merged-actions-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:16px;
  padding:12px;
  border:1px solid var(--att-border);
  border-radius:14px;
  background:#f8fafc;
}
.att-merged-actions-copy{
  min-width:220px;
}
.att-merged-action-buttons{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.att-merged-stat-grid{
  margin-top:14px;
  gap:12px;
}
.att-merged-stat-grid .att-stat{
  min-height:86px;
}
.att-merged-session-panel{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--att-border);
  border-radius:14px;
  background:#fff;
}
.att-merged-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.att-merged-session-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:10px;
}
.att-merged-session-chip{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:11px 12px;
  border:1px solid var(--att-border);
  border-radius:12px;
  background:#f9fafb;
}
.att-merged-session-chip span{
  color:var(--att-muted);
  font-size:12px;
  font-weight:600;
}
.att-merged-session-chip strong{
  color:var(--att-text);
  font-size:13px;
  line-height:1.35;
}
.att-merged-summary-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
}
.att-merged-summary-head h3{
  margin:0;
  font-size:18px;
  line-height:1.3;
  font-weight:700;
}
.att-merged-summary-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--att-border);
  border-radius:14px;
  background:#f8fafc;
}
.att-merged-toolbar-left,
.att-merged-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.att-merged-toolbar-right{
  margin-left:auto;
  justify-content:flex-end;
}
.att-merged-summary-toolbar .att-pdf-group-wrap{
  background:#fff;
  border-radius:12px;
}
#att_merged_search{
  min-width:280px;
}
@media (max-width: 900px){
  .att-merged-report-head,
  .att-merged-actions-bar,
  .att-merged-summary-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  .att-merged-head-actions,
  .att-merged-action-buttons,
  .att-merged-toolbar-left,
  .att-merged-toolbar-right{
    width:100%;
    justify-content:flex-start;
  }
  .att-merged-action-buttons .att-btn,
  .att-merged-head-actions .att-btn,
  .att-merged-toolbar-right .att-btn,
  #att_merged_search{
    width:100%;
  }
  #att_merged_search{
    min-width:0;
  }
}

/* v1.6.10.686: Single Session Report professional layout */
.att-single-report-card,
.att-single-summary-card{
  margin-top:14px;
}
.att-single-report-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--att-border);
}
.att-single-report-title h2{
  margin:4px 0 0;
  font-size:22px;
  line-height:1.25;
  font-weight:700;
}
.att-single-report-title p,
.att-single-actions-copy p,
.att-single-panel-head p,
.att-single-summary-head p{
  margin:6px 0 0;
}
.att-single-head-actions,
.att-single-action-buttons{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.att-single-actions-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:16px;
  padding:12px;
  border:1px solid var(--att-border);
  border-radius:14px;
  background:#f8fafc;
}
.att-single-actions-copy{
  min-width:220px;
}
.att-single-stat-grid{
  margin-top:14px;
  gap:12px;
}
.att-single-stat-grid .att-stat{
  min-height:86px;
}
.att-single-stat-grid .att-stat > span{
  color:var(--att-muted);
  font-size:13px;
  font-weight:700;
}
.att-single-stat-grid .att-stat > strong{
  color:var(--att-text);
  font-size:26px;
  line-height:1.1;
  font-weight:800;
}
.att-single-stat-grid .att-stat-green{
  background:#ecfdf5;
  border-color:#a7f3d0;
}
.att-single-stat-grid .att-stat-green > span,
.att-single-stat-grid .att-stat-green > strong{
  color:#065f46;
}
.att-single-stat-grid .att-stat-blue{
  background:#eff6ff;
  border-color:#bfdbfe;
}
.att-single-stat-grid .att-stat-blue > span,
.att-single-stat-grid .att-stat-blue > strong{
  color:#1d4ed8;
}
.att-single-stat-grid .att-stat-red{
  background:#fef2f2;
  border-color:#fecaca;
}
.att-single-stat-grid .att-stat-red > span,
.att-single-stat-grid .att-stat-red > strong{
  color:#991b1b;
}
.att-single-session-panel{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--att-border);
  border-radius:14px;
  background:#fff;
}
.att-single-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.att-single-info-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:10px;
}
.att-single-info-item{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--att-border);
  border-radius:12px;
  background:#f9fafb;
}
.att-single-info-item span{
  color:var(--att-muted);
  font-size:12px;
  font-weight:700;
}
.att-single-info-item strong{
  color:var(--att-text);
  font-size:13px;
  line-height:1.35;
  font-weight:700;
  word-break:break-word;
}
.att-single-info-wide{
  grid-column:span 1;
}
.att-single-summary-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.att-single-summary-head h3{
  margin:0;
  font-size:18px;
  line-height:1.3;
  font-weight:700;
}
.att-single-summary-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--att-border);
  border-radius:14px;
  background:#f8fafc;
}
.att-single-toolbar-left,
.att-single-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.att-single-toolbar-left{
  flex:1 1 420px;
}
.att-single-toolbar-left .att-toolbar-label{
  flex:0 0 100%;
}
.att-single-toolbar-right{
  justify-content:flex-end;
}
#att_session_search{
  min-width:280px;
  max-width:420px;
  height:38px;
}
.att-single-pdf-group-block{
  align-items:flex-start;
  flex-direction:column;
  gap:8px;
}
.att-single-table-tools{
  align-items:flex-start;
  flex:1 1 420px;
}
.att-single-table-tools .att-toolbar-label{
  flex:0 0 100%;
}
.att-single-summary-card .att-pdf-group-wrap-single{
  display:flex;
  align-items:center;
  gap:8px 12px;
  flex-wrap:wrap;
  padding:8px 10px;
  border:1px solid var(--att-border);
  border-radius:12px;
  background:#fff;
}
.att-session-detail-list th[data-pdf-col],
.att-session-detail-list td{
  vertical-align:top;
}
.att-single-summary-card .att-report-pager-top{
  margin-top:0;
}
@media (max-width: 1200px){
  .att-single-info-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .att-single-info-wide{
    grid-column:span 2;
  }
}
@media (max-width: 900px){
  .att-single-report-head,
  .att-single-actions-bar,
  .att-single-summary-head,
  .att-single-summary-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  .att-single-head-actions,
  .att-single-action-buttons,
  .att-single-toolbar-left,
  .att-single-toolbar-right{
    width:100%;
    justify-content:flex-start;
  }
  .att-single-action-buttons .att-btn,
  .att-single-head-actions .att-btn,
  .att-single-toolbar-right .att-btn,
  #att_session_search{
    width:100%;
    max-width:none;
  }
  .att-single-table-tools,
  .att-single-pdf-group-block,
  .att-single-summary-card .att-pdf-group-wrap-single{
    width:100%;
  }
  .att-single-summary-card .att-pdf-group-wrap-single{
    align-items:flex-start;
    flex-direction:column;
  }
  #att_session_search{
    min-width:0;
  }
}
@media (max-width: 640px){
  .att-single-info-grid{
    grid-template-columns:1fr;
  }
  .att-single-info-wide{
    grid-column:auto;
  }
}


/* v1.6.10.693: My Attendance By Event title tab style */
.att-event-tab-accordion{
  border:1px solid var(--att-border);
  border-radius:18px;
  padding:0;
  margin-top:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.att-event-tab-accordion summary.att-event-tab-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  padding:16px 18px;
  background:#f8fafc;
  border-radius:18px;
  margin:0;
}
.att-event-tab-accordion summary.att-event-tab-summary::-webkit-details-marker{display:none;}
.att-event-tab-accordion[open] summary.att-event-tab-summary{
  border-bottom:1px solid var(--att-border);
  border-radius:18px 18px 0 0;
  margin-bottom:0;
}
.att-event-tab-title{
  flex:1 1 auto;
  min-width:0;
  color:#111827;
  font-size:17px;
  line-height:1.35;
  font-weight:700;
  word-break:break-word;
}
.att-event-tab-status{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}
.att-event-tab-arrow{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--att-border);
  color:#64748b;
}
.att-event-tab-arrow::before{
  content:'›';
  display:block;
  font-size:20px;
  line-height:1;
  transform:rotate(90deg);
  transition:transform .18s ease;
}
.att-event-tab-accordion[open] .att-event-tab-arrow::before{transform:rotate(-90deg);}
.att-event-tab-body{padding:14px;}
.att-event-tab-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:0 0 12px;
}
@media (max-width:720px){
  .att-event-tab-accordion{border-radius:20px; margin-top:12px;}
  .att-event-tab-accordion summary.att-event-tab-summary{padding:14px; border-radius:20px; align-items:flex-start;}
  .att-event-tab-title{font-size:16px; line-height:1.35;}
  .att-event-tab-status .att-pill{white-space:nowrap;}
  .att-event-tab-body{padding:12px;}
  .att-event-tab-metrics{margin-bottom:10px;}
}
@media (max-width:420px){
  .att-event-tab-accordion summary.att-event-tab-summary{gap:8px;}
  .att-event-tab-title{font-size:15px;}
  .att-event-tab-arrow{width:22px; height:22px;}
}


/* v1.6.10.694: Mobile My Attendance page - regular font weight everywhere */
.att-mobile-app.att-mobile-screen-report_staff_member,
.att-mobile-app.att-mobile-screen-report_staff_member *,
body.att-mobile-mode .att-mobile-app.att-mobile-screen-report_staff_member,
body.att-mobile-mode .att-mobile-app.att-mobile-screen-report_staff_member *{
  font-weight:400 !important;
}
.att-mobile-app.att-mobile-screen-report_staff_member strong,
.att-mobile-app.att-mobile-screen-report_staff_member b,
body.att-mobile-mode .att-mobile-app.att-mobile-screen-report_staff_member strong,
body.att-mobile-mode .att-mobile-app.att-mobile-screen-report_staff_member b{
  font-weight:400 !important;
}

/* v1.6.10.699 - Automatic Display/Hide tools for list tables */
.att-auto-column-toggle-row{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin:8px 0 10px;
}
.att-auto-column-toggle-row .att-column-toggle{position:relative;}

/* v1.6.10.707: highlight representative staff names in report lists */
.att-representative-staff-name{
  background:#fff3cd !important;
  color:#3b2f00 !important;
  border-left:4px solid #f59e0b !important;
  font-weight:700;
}
.att-representative-staff-name .att-representative-name-label{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#fde68a;
  color:#3b2f00;
  line-height:1.35;
}

/* v1.6.10.710: Edit QR modal venue/event controls must remain visible even if cloned from searchable dropdowns. */
#attQrEditModal .att-qr-edit-control,
#attQrEditModal select.att-qr-edit-control,
#attQrEditModal input.att-qr-edit-control{
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 42px !important;
  display: block !important;
}

/* v1.6.10.713: Standardize plugin button colours - white background with border */
.att-wrap .att-btn,
.att-wrap .att-btn-primary,
.att-wrap .att-btn-secondary,
.att-wrap .att-btn-warning,
.att-wrap .att-tabbar .att-tab,
.att-wrap .att-tabbar .att-tab.active,
.wp-admin .att-wrap .button,
.wp-admin .att-wrap .button.button-primary,
.wp-admin .att-wrap .button.button-secondary,
.wp-admin .att-wrap input[type="submit"],
.wp-admin .att-wrap input[type="button"],
.wp-admin .att-wrap button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss),
body.att-portal .att-btn,
body.att-portal .att-btn-primary,
body.att-portal .att-btn-secondary,
body.att-portal .att-btn-warning,
body.att-portal .button,
body.att-portal input[type="submit"],
body.att-portal input[type="button"],
body.att-portal button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss){
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #d1d5db !important;
  color:#245116 !important;
  box-shadow:none !important;
}
.att-wrap .att-btn:hover,
.att-wrap .att-btn-primary:hover,
.att-wrap .att-btn-secondary:hover,
.att-wrap .att-btn-warning:hover,
.att-wrap .att-tabbar .att-tab:hover,
.att-wrap .att-tabbar .att-tab.active:hover,
.wp-admin .att-wrap .button:hover,
.wp-admin .att-wrap .button.button-primary:hover,
.wp-admin .att-wrap .button.button-secondary:hover,
.wp-admin .att-wrap input[type="submit"]:hover,
.wp-admin .att-wrap input[type="button"]:hover,
.wp-admin .att-wrap button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss):hover,
body.att-portal .att-btn:hover,
body.att-portal .button:hover,
body.att-portal input[type="submit"]:hover,
body.att-portal input[type="button"]:hover,
body.att-portal button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss):hover{
  background:#f9fafb !important;
  border-color:#9ca3af !important;
  color:#245116 !important;
  transform:none !important;
  box-shadow:0 3px 10px rgba(17,24,39,.06) !important;
}
.att-wrap .att-tabbar .att-tab.active,
body.att-portal .att-tabbar .att-tab.active{
  border-color:var(--att-primary) !important;
  color:var(--att-primary) !important;
  box-shadow:inset 0 0 0 1px var(--att-primary) !important;
}
.att-wrap .att-btn-danger,
.wp-admin .att-wrap .att-btn-danger,
body.att-portal .att-btn-danger{
  background:#ffffff !important;
  border-color:#ef4444 !important;
  color:#b91c1c !important;
}
.att-wrap .att-btn-danger:hover,
.wp-admin .att-wrap .att-btn-danger:hover,
body.att-portal .att-btn-danger:hover{
  background:#fff5f5 !important;
  border-color:#dc2626 !important;
  color:#991b1b !important;
}
.att-wrap .att-btn:disabled,
.att-wrap button:disabled,
.att-wrap input[type="submit"]:disabled,
.att-wrap input[type="button"]:disabled,
body.att-portal .att-btn:disabled,
body.att-portal button:disabled,
body.att-portal input[type="submit"]:disabled,
body.att-portal input[type="button"]:disabled{
  background:#f9fafb !important;
  border-color:#e5e7eb !important;
  color:#9ca3af !important;
  opacity:1 !important;
  cursor:not-allowed !important;
}
.att-wrap .att-btn.att-btn-primary:link,
.att-wrap .att-btn.att-btn-primary:visited,
.att-wrap .att-tabbar .att-tab:link,
.att-wrap .att-tabbar .att-tab:visited,
body.att-portal .att-btn.att-btn-primary:link,
body.att-portal .att-btn.att-btn-primary:visited{
  color:#245116 !important;
}


/* v1.6.10.714: make all plugin buttons use the same white/border UI */
.att-wrap .att-btn,
.att-wrap .att-btn-primary,
.att-wrap .att-btn-secondary,
.att-wrap .att-btn-warning,
.att-wrap .att-tabbar .att-tab,
.att-wrap .att-tabbar .att-tab.active,
.wp-admin .att-wrap .button,
.wp-admin .att-wrap .button.button-primary,
.wp-admin .att-wrap .button.button-secondary,
.wp-admin .att-wrap input[type="submit"],
.wp-admin .att-wrap input[type="button"],
.wp-admin .att-wrap button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss),
body.att-portal .att-btn,
body.att-portal .att-btn-primary,
body.att-portal .att-btn-secondary,
body.att-portal .att-btn-warning,
body.att-portal .att-tabbar .att-tab,
body.att-portal .att-tabbar .att-tab.active,
body.att-portal .button,
body.att-portal input[type="submit"],
body.att-portal input[type="button"],
body.att-portal button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:40px !important;
  padding:9px 14px !important;
  border:1px solid #d1d5db !important;
  border-radius:10px !important;
  background:#ffffff !important;
  background-image:none !important;
  color:#245116 !important;
  font-family:var(--att-font) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none !important;
  transform:none !important;
  vertical-align:middle !important;
}
.att-wrap .att-btn:hover,
.att-wrap .att-btn-primary:hover,
.att-wrap .att-btn-secondary:hover,
.att-wrap .att-btn-warning:hover,
.att-wrap .att-tabbar .att-tab:hover,
.att-wrap .att-tabbar .att-tab.active:hover,
.wp-admin .att-wrap .button:hover,
.wp-admin .att-wrap .button.button-primary:hover,
.wp-admin .att-wrap .button.button-secondary:hover,
.wp-admin .att-wrap input[type="submit"]:hover,
.wp-admin .att-wrap input[type="button"]:hover,
.wp-admin .att-wrap button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss):hover,
body.att-portal .att-btn:hover,
body.att-portal .att-tabbar .att-tab:hover,
body.att-portal .att-tabbar .att-tab.active:hover,
body.att-portal .button:hover,
body.att-portal input[type="submit"]:hover,
body.att-portal input[type="button"]:hover,
body.att-portal button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss):hover{
  background:#f9fafb !important;
  border-color:#9ca3af !important;
  color:#245116 !important;
  box-shadow:none !important;
  transform:none !important;
}
.att-wrap .att-tabbar .att-tab.active,
.att-wrap .att-tabbar .att-tab.active:focus,
.att-wrap .att-tabbar .att-tab.active:hover,
body.att-portal .att-tabbar .att-tab.active,
body.att-portal .att-tabbar .att-tab.active:focus,
body.att-portal .att-tabbar .att-tab.active:hover{
  background:#ffffff !important;
  border-color:#d1d5db !important;
  color:#245116 !important;
  box-shadow:none !important;
}
.att-wrap .att-btn:focus,
.att-wrap .att-tabbar .att-tab:focus,
.wp-admin .att-wrap .button:focus,
.wp-admin .att-wrap input[type="submit"]:focus,
.wp-admin .att-wrap input[type="button"]:focus,
.wp-admin .att-wrap button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss):focus,
body.att-portal .att-btn:focus,
body.att-portal .att-tabbar .att-tab:focus,
body.att-portal .button:focus,
body.att-portal input[type="submit"]:focus,
body.att-portal input[type="button"]:focus,
body.att-portal button:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss):focus{
  background:#ffffff !important;
  border-color:#9ca3af !important;
  color:#245116 !important;
  box-shadow:0 0 0 3px rgba(47,107,31,.10) !important;
  transform:none !important;
}
.att-wrap .att-btn-danger,
.wp-admin .att-wrap .att-btn-danger,
body.att-portal .att-btn-danger{
  min-height:40px !important;
  padding:9px 14px !important;
  border-radius:10px !important;
  background:#ffffff !important;
  border-color:#ef4444 !important;
  color:#b91c1c !important;
  box-shadow:none !important;
}
.att-wrap .att-btn-small,
.att-wrap .button.att-btn-small,
body.att-portal .att-btn-small{
  min-height:34px !important;
  padding:7px 10px !important;
  border-radius:8px !important;
  font-size:13px !important;
}

/* Portal header hotfix: remove the blank square menu button and all topbar page titles. */
body.att-portal .att-portal-menu,
body.att-portal .att-portal-topbar-title{
  display:none !important;
  visibility:hidden !important;
}
body.att-portal .att-portal-topbar{
  justify-content:flex-end !important;
}
body.att-portal .att-portal-topbar-right{
  margin-left:auto !important;
}


/* v1.6.10.718: Left-align searchable dropdown text.
   The global button standardisation centers all buttons; searchable select
   triggers/options are buttons, so override them to behave like form controls. */
.att-wrap .att-sselect-trigger,
body.att-portal .att-sselect-trigger,
.wp-admin .att-wrap button.att-sselect-trigger{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  text-align:left !important;
  width:100% !important;
}
.att-wrap .att-sselect-label,
body.att-portal .att-sselect-label{
  flex:1 1 auto !important;
  min-width:0 !important;
  text-align:left !important;
}
.att-wrap .att-sselect-option,
body.att-portal .att-sselect-option,
.wp-admin .att-wrap button.att-sselect-option{
  display:block !important;
  width:100% !important;
  justify-content:flex-start !important;
  text-align:left !important;
  padding-left:12px !important;
  padding-right:12px !important;
}
.att-wrap .att-sselect-search,
body.att-portal .att-sselect-search,
.att-wrap select,
body.att-portal select,
#att_sessions_event_select{
  text-align:left !important;
}
.att-wrap .att-event-match,
body.att-portal .att-event-match{
  justify-content:flex-start !important;
  text-align:left !important;
}


/* v1.6.10.719: Force searchable event dropdown items to align left.
   This uses higher specificity than the global button standardisation rule. */
.wp-admin .att-wrap .att-sselect button.att-sselect-trigger:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss),
body.att-portal .att-sselect button.att-sselect-trigger:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss){
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  text-align:left !important;
  width:100% !important;
}
.wp-admin .att-wrap .att-sselect button.att-sselect-trigger:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss) .att-sselect-label,
body.att-portal .att-sselect button.att-sselect-trigger:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss) .att-sselect-label{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  text-align:left !important;
}
.wp-admin .att-wrap .att-sselect .att-sselect-options button.att-sselect-option:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss),
body.att-portal .att-sselect .att-sselect-options button.att-sselect-option:not(.att-icon-btn):not(.att-modal-close):not(.notice-dismiss){
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  width:100% !important;
  min-height:36px !important;
  padding-left:14px !important;
  padding-right:14px !important;
}
.wp-admin .att-wrap .att-sselect .att-sselect-search,
body.att-portal .att-sselect .att-sselect-search{
  text-align:left !important;
}


/* v1.6.10.721: Keep open Location Check-in shortcut yellow even after global button standardization. */
body.att-portal .att-mobile-app .att-home-loc-btn-open,
body.att-portal .att-mobile-app .att-btn.att-home-loc-btn-open,
.att-wrap .att-mobile-app .att-home-loc-btn-open,
.att-wrap .att-mobile-app .att-btn.att-home-loc-btn-open{
  background:#f9da1f !important;
  background-image:none !important;
  border-color:#d9a600 !important;
  color:#111827 !important;
}
body.att-portal .att-mobile-app .att-home-loc-btn-open:hover,
body.att-portal .att-mobile-app .att-btn.att-home-loc-btn-open:hover,
.att-wrap .att-mobile-app .att-home-loc-btn-open:hover,
.att-wrap .att-mobile-app .att-btn.att-home-loc-btn-open:hover{
  background:#f5c400 !important;
  border-color:#c49100 !important;
  color:#111827 !important;
}
body.att-portal .att-mobile-app .att-home-loc-btn-open span,
.att-wrap .att-mobile-app .att-home-loc-btn-open span{
  color:#111827 !important;
}

/* v1.6.10.729: status tabs for Active QR Check-in and Active Location Slots */
.att-active-status-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:0 0 12px 0;
}
.att-loc-status-toolbar{
  padding:12px 12px 0 12px;
  border-bottom:0;
}
.att-wrap .att-active-status-tab,
body.att-portal .att-active-status-tab{
  min-height:36px !important;
  padding:8px 12px !important;
}
.att-wrap .att-active-status-tab.active,
.att-wrap .att-active-status-tab.active:hover,
.att-wrap .att-active-status-tab.active:focus,
body.att-portal .att-active-status-tab.active,
body.att-portal .att-active-status-tab.active:hover,
body.att-portal .att-active-status-tab.active:focus{
  border-color:var(--att-primary) !important;
  color:#245116 !important;
  background:#f4fbf2 !important;
  box-shadow:inset 0 0 0 1px var(--att-primary) !important;
}
.att-active-status-tab .att-badge{
  min-width:22px;
  justify-content:center;
}
.att-archive-year-card{
  border:1px solid #e6e9ef !important;
  background:#fff !important;
}
@media (max-width: 782px){
  .att-active-status-tabs{gap:6px;}
  .att-wrap .att-active-status-tab,
  body.att-portal .att-active-status-tab{
    flex:1 1 calc(50% - 6px);
    justify-content:space-between !important;
    padding:8px 10px !important;
  }
}

/* v1.6.10.738: keep mobile Location Check-in shortcut text visible on all Android/mobile browsers. */
body.att-portal .att-mobile-app .att-home-loc-btn-visible,
.att-wrap .att-mobile-app .att-home-loc-btn-visible{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:72px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-align:center !important;
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
  text-indent:0 !important;
}


/* v1.6.10.739: Standardized admin/system font sizing */
:root{
  --att-font-size-base: 14px;
  --att-font-size-small: 12px;
  --att-font-size-label: 13px;
  --att-font-size-button: 13px;
  --att-font-size-title: 20px;
  --att-font-size-card-title: 16px;
}
.att-admin-shell,
.att-admin-shell *,
.att-wrap,
.att-wrap *,
.att-card,
.att-card *,
.att-settings-page,
.att-settings-page *{
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.att-wrap,
.att-card,
.att-admin-shell,
.att-settings-page,
.att-table,
.att-table td,
.att-table th,
.att-sessions-table,
.att-sessions-table td,
.att-sessions-table th{
  font-size: var(--att-font-size-base) !important;
  line-height: 1.45;
}
.att-title,
.att-page-title,
.att-wrap h1{
  font-size: var(--att-font-size-title) !important;
  line-height: 1.25 !important;
}
.att-card h2,
.att-card h3,
.att-section-title,
.att-card-title{
  font-size: var(--att-font-size-card-title) !important;
  line-height: 1.3 !important;
}
.att-field label,
.att-label,
.att-small-label,
.att-section-caption,
.att-tab,
.att-mini,
.att-muted,
.att-help,
.att-card small,
.att-field small{
  font-size: var(--att-font-size-label) !important;
  line-height: 1.4 !important;
}
.att-btn,
.att-button,
.att-action-btn,
.att-wrap button,
.att-wrap input[type="submit"],
.att-wrap input[type="button"],
.att-wrap select,
.att-wrap input,
.att-wrap textarea{
  font-size: var(--att-font-size-button) !important;
  line-height: 1.4 !important;
}
.att-table .att-badge,
.att-pill,
.att-status-pill,
.att-badge-low{
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* v1.6.10.741: smaller mobile home action button text for long labels */
body.att-mobile-mode .att-mobile-app .att-home-card .att-btn,
.att-mobile-app .att-home-card .att-btn{
  font-size: 16px !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
body.att-mobile-mode .att-mobile-app .att-home-loc-btn,
.att-mobile-app .att-home-loc-btn{
  font-size: 15px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
}
@media (max-width: 380px){
  body.att-mobile-mode .att-mobile-app .att-home-card .att-btn,
  .att-mobile-app .att-home-card .att-btn{
    font-size: 15px !important;
  }
  body.att-mobile-mode .att-mobile-app .att-home-loc-btn,
  .att-mobile-app .att-home-loc-btn{
    font-size: 14px !important;
  }
}

/* v1.6.10.743: Location check-out buttons must remain clickable so backend can validate timing. */
.attStaffMemberLocCheckin[data-action="checkout"].is-disabled{pointer-events:auto !important; opacity:1 !important;}

/* v1.6.10.745: After check-in, hide the action button until Check-out is available. */
.attStaffMemberLocCheckin[data-action="checkout"].att-checkout-pending{
  display:none !important;
  visibility:hidden !important;
}
.attStaffMemberLocCheckin.att-checkout-available,
.att-loc-staff-slot-checkout-available .attStaffMemberLocCheckin[data-action="checkout"]{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
.att-loc-staff-slot-checkout-available .att-loc-staff-slot-btn,
.attStaffMemberLocCheckin.att-checkout-available{
  font-weight:600 !important;
}

/* v1.6.10.745: Clear note shown after staff already checked in. */
.att-loc-staff-slot-card-recorded .att-loc-staff-slot-meta{
  font-weight:500;
}
.att-loc-staff-slot-card-recorded .att-loc-staff-slot-meta span{
  font-weight:400;
}


/* v1.6.10.746: after staff already checked in, keep mobile home Location button non-highlighted until Check-out opens. */
.att-home-loc-btn-recorded{
  background:#ffffff !important;
  color:#2f5d24 !important;
  border-color:#d1d5db !important;
  box-shadow:none !important;
}

/* v1.6.10.749: Mobile home Location button count/status on second line. */
body.att-mobile-mode .att-mobile-app .att-home-loc-btn,
.att-mobile-app .att-home-loc-btn,
body.att-portal .att-mobile-app .att-home-loc-btn,
.att-wrap .att-mobile-app .att-home-loc-btn{
  flex-direction:column !important;
  gap:4px !important;
  white-space:normal !important;
  text-align:center !important;
}
body.att-mobile-mode .att-mobile-app .att-home-loc-btn .att-home-loc-title,
body.att-mobile-mode .att-mobile-app .att-home-loc-btn .att-home-loc-state,
.att-mobile-app .att-home-loc-btn .att-home-loc-title,
.att-mobile-app .att-home-loc-btn .att-home-loc-state,
body.att-portal .att-mobile-app .att-home-loc-btn .att-home-loc-title,
body.att-portal .att-mobile-app .att-home-loc-btn .att-home-loc-state,
.att-wrap .att-mobile-app .att-home-loc-btn .att-home-loc-title,
.att-wrap .att-mobile-app .att-home-loc-btn .att-home-loc-state{
  display:block !important;
  width:100% !important;
  line-height:1.18 !important;
  text-align:center !important;
  font-weight:600 !important;
}
body.att-mobile-mode .att-mobile-app .att-home-loc-btn .att-home-loc-state,
.att-mobile-app .att-home-loc-btn .att-home-loc-state,
body.att-portal .att-mobile-app .att-home-loc-btn .att-home-loc-state,
.att-wrap .att-mobile-app .att-home-loc-btn .att-home-loc-state{
  margin-top:2px !important;
  font-size:.92em !important;
  letter-spacing:0 !important;
}


/* v1.6.10.751: keep mobile home Location shortcut text visible in every state, including recorded/default. */
body.att-mobile-mode .att-mobile-app .att-home-loc-btn,
.att-mobile-app .att-home-loc-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:72px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-align:center !important;
  text-indent:0 !important;
}
body.att-mobile-mode .att-mobile-app .att-home-loc-btn .att-home-loc-title,
body.att-mobile-mode .att-mobile-app .att-home-loc-btn .att-home-loc-state,
.att-mobile-app .att-home-loc-btn .att-home-loc-title,
.att-mobile-app .att-home-loc-btn .att-home-loc-state{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  text-indent:0 !important;
}
body.att-mobile-mode .att-mobile-app .att-home-loc-btn:not(.att-home-loc-btn-open) .att-home-loc-title,
body.att-mobile-mode .att-mobile-app .att-home-loc-btn:not(.att-home-loc-btn-open) .att-home-loc-state,
.att-mobile-app .att-home-loc-btn:not(.att-home-loc-btn-open) .att-home-loc-title,
.att-mobile-app .att-home-loc-btn:not(.att-home-loc-btn-open) .att-home-loc-state{
  color:#245116 !important;
}
body.att-mobile-mode .att-mobile-app .att-home-loc-btn-open .att-home-loc-title,
body.att-mobile-mode .att-mobile-app .att-home-loc-btn-open .att-home-loc-state,
.att-mobile-app .att-home-loc-btn-open .att-home-loc-title,
.att-mobile-app .att-home-loc-btn-open .att-home-loc-state{
  color:#111827 !important;
}

/* 1.0.2: WordPress exit button in the Location Attendance portal topbar. */
body.att-portal .att-portal-topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
body.att-portal a.att-back-to-wordpress,
body.att-portal a.att-back-to-wordpress:link,
body.att-portal a.att-back-to-wordpress:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  flex-shrink:0;
  padding:8px 13px;
  border:1px solid #d5e1d1;
  border-radius:10px;
  background:#fff;
  color:#2f6b1f;
  text-decoration:none;
  font-family:var(--att-font, inherit);
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  box-sizing:border-box;
  transition:background-color .15s ease, border-color .15s ease;
}
body.att-portal a.att-back-to-wordpress:hover,
body.att-portal a.att-back-to-wordpress:focus-visible{
  background:#f0f7ed;
  border-color:#8fb084;
  color:#275919;
  text-decoration:none;
}
body.att-portal a.att-back-to-wordpress:focus-visible{
  outline:2px solid var(--att-primary, #2f6b1f);
  outline-offset:2px;
}
body.att-portal a.att-back-to-wordpress svg{
  display:block;
  flex-shrink:0;
}
@media(max-width:600px){
  body.att-portal .att-portal-topbar{padding-left:10px;padding-right:10px;}
  body.att-portal .att-portal-topbar-right{gap:8px;}
  body.att-portal a.att-back-to-wordpress{min-height:36px;padding:7px 9px;font-size:11px;gap:5px;}
  body.att-portal .att-portal-userbox{padding:5px 6px;}
  body.att-portal .att-portal-username{max-width:85px;text-overflow:ellipsis;white-space:nowrap;}
}

/* v1.0.12: respect view-only navigation visibility even when legacy button
   rules force display:inline-flex!important.  Hidden remains accessible to
   script navigation while never appearing on the wrong screen. */
.att-wrap .att-header .att-actions-inline > a[hidden],
.att-wrap #attStaffMemberListCard[hidden] {
  display: none !important;
}

/* Location-only portal: legacy admin chrome overrides moved from inline hooks. */
body.php-error #adminmenuback,body.php-error #adminmenuwrap {margin-top:0!important;}
body[class*="att_"] .update-nag,
body[class*="att_"] .notice.update-nag,
body[class*="att_"] #update-nag {display:none!important;}