/* V1.12 — in-app guide and overflow-safe information banners */
.banner-track{
  width:100%;max-width:100%;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:2px 2px 8px;
}
.info-banner{
  box-sizing:border-box;position:relative;isolation:isolate;flex:0 0 min(78%,900px);
  width:min(78%,900px);min-width:0;min-height:180px;max-height:220px;aspect-ratio:16/5.5;
  overflow:hidden;contain:paint;scroll-snap-align:start;background-size:cover!important;
  background-position:center!important;background-repeat:no-repeat!important;
}
.info-banner:before{
  content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,21,49,.96),rgba(5,21,49,.48));
}
.info-banner h3,.info-banner p{overflow-wrap:anywhere}
.info-banner p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tutorial-banner{
  background:
    radial-gradient(circle at 88% 25%,rgba(255,193,61,.95) 0 8%,transparent 8.5%),
    radial-gradient(circle at 82% 60%,rgba(52,200,215,.7) 0 13%,transparent 13.5%),
    linear-gradient(120deg,#071a3c 0%,#123c77 62%,#6d49f8 100%)!important;
}
.tutorial-banner:after{content:"?";position:absolute;right:7%;top:50%;transform:translateY(-50%);font-size:96px;font-weight:900;color:rgba(255,255,255,.15);line-height:1}
.banner-cta{display:inline-flex;margin-top:8px;padding:8px 12px;border-radius:999px;background:#ffc13d;color:#07152f;font-size:12px;font-weight:800}
.field-help{display:block;margin-top:7px;color:#77839c;font-size:11px;line-height:1.5}
.dashboard-grid,.announcement-grid,.dashboard-grid>.panel{min-width:0;max-width:100%}
.announcement-grid{overflow:hidden}
.announcement-card{min-width:0;max-width:100%;overflow:hidden}
.announcement-card p,.announcement-card h3{overflow-wrap:anywhere;word-break:break-word}
.announcement-card>img{display:block;width:100%;height:auto;max-height:240px;aspect-ratio:16/9;object-fit:cover;object-position:center}
.tutorial-info-card{text-decoration:none;color:inherit}
.tutorial-card-art{display:flex;align-items:center;justify-content:center;gap:14px;min-height:150px;background:linear-gradient(135deg,#071a3c,#174a8d 62%,#6d49f8);color:#fff}
.tutorial-card-art span{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:#ffc13d;color:#07152f;font-size:36px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.tutorial-card-art b{letter-spacing:.18em;font-size:18px}

.guide-hero{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:28px;align-items:center;padding:36px;border-radius:24px;overflow:hidden;color:#fff;background:radial-gradient(circle at 82% 12%,rgba(255,193,61,.28),transparent 28%),linear-gradient(135deg,#07152f,#174a8d 68%,#6d49f8);box-shadow:0 18px 50px rgba(7,21,47,.15)}
.guide-hero h2{margin:7px 0 10px;font-size:clamp(26px,4vw,42px);line-height:1.08}
.guide-hero p{max-width:720px;margin:0;color:rgba(255,255,255,.8);line-height:1.7}
.guide-jumps{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.guide-jumps a{padding:9px 13px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;text-decoration:none;font-size:12px;font-weight:700;background:rgba(255,255,255,.08)}
.guide-hero-mark{display:grid;place-items:center;justify-self:end;width:150px;height:150px;border-radius:38px;background:#ffc13d;color:#07152f;transform:rotate(4deg);box-shadow:0 20px 45px rgba(0,0,0,.2)}
.guide-hero-mark span{font-size:58px;line-height:1;font-weight:950}.guide-hero-mark small{margin-top:-28px;font-weight:900;letter-spacing:.12em}
.guide-section{margin-top:18px;scroll-margin-top:90px}
.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.guide-grid-wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.guide-card{position:relative;min-width:0;padding:20px;border:1px solid #e5eaf2;border-radius:18px;background:#f8faff}
.guide-card>b{display:grid;place-items:center;width:38px;height:38px;margin-bottom:16px;border-radius:12px;background:#e9f1ff;color:#1154b7}
.guide-card h4,.guide-steps h4,.guide-status-grid h4{margin:0 0 7px;color:#0b2247;font-size:15px}
.guide-card p,.guide-steps p,.guide-status-grid p,.guide-faq p{margin:0;color:#66728a;line-height:1.65;font-size:13px}
.guide-steps{display:grid;gap:0;margin:0;padding:0;list-style:none}
.guide-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:15px;padding:15px 0;border-bottom:1px solid #edf0f5}
.guide-steps li:last-child{border-bottom:0}
.guide-steps li>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#ffc13d;color:#07152f;font-weight:900}
.guide-tip{margin-top:15px;padding:14px 16px;border-radius:14px;background:#fff7df;color:#66501a;font-size:13px;line-height:1.6}
.guide-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guide-status-grid>div{padding:18px;border-radius:16px;background:#f7f9fc;border-left:4px solid #4d7cf7}
.guide-faq{display:grid;gap:9px}
.guide-faq details{border:1px solid #e4e9f1;border-radius:14px;background:#fff;padding:0 16px}
.guide-faq summary{cursor:pointer;padding:15px 0;color:#0b2247;font-weight:800}
.guide-faq details p{padding:0 0 16px}

.ticket-qr-layout{align-items:start}
.read-source-qr{margin-top:10px;width:100%}
.qr-token-status.valid{border-color:#60c58a!important;background:#effcf4!important;color:#17653b!important}
.qr-token-status.invalid{border-color:#ed9999!important;background:#fff3f3!important;color:#a52828!important}
.ticket-qr-form textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.55;overflow-wrap:anywhere}
.qr-result-panel{position:sticky;top:92px;text-align:center}
.qr-empty{display:grid;place-items:center;min-height:300px;border:2px dashed #dce3ee;border-radius:18px;color:#7b879d;background:#fafbfe}
.qr-ticket{width:min(100%,430px);margin:0 auto;padding:22px;border:1px solid #dfe5ee;border-radius:20px;background:#fff;color:#07152f;box-shadow:0 16px 40px rgba(7,21,47,.08)}
.qr-brand{display:flex;align-items:center;gap:11px;text-align:left}.qr-brand img{width:42px;height:42px;border-radius:11px;object-fit:contain}.qr-brand b,.qr-brand small{display:block}.qr-brand small{color:#76839a;margin-top:2px}
.qr-code-image{display:block;width:min(100%,330px);height:auto;aspect-ratio:1;object-fit:contain;margin:20px auto 15px;image-rendering:pixelated}
.qr-ticket>small{display:block;color:#7b879d;font-size:10px;letter-spacing:.16em}.qr-ticket-number{display:block;margin:5px 0 13px;font-size:clamp(18px,4vw,27px);overflow-wrap:anywhere}
.qr-meta{display:flex;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px dashed #ccd5e3;color:#526079;font-size:11px}.qr-ticket>p{margin:10px 0 0;color:#8290a6;font-size:10px}
.qr-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}
.privacy-note{margin-top:14px;padding:12px 14px;border-radius:12px;background:#fff8e6}
.evidence-links{display:flex;flex-wrap:wrap;gap:5px}.evidence-links a{padding:5px 8px;border-radius:8px;background:#edf3ff;font-size:10px;font-weight:800;text-decoration:none}
.lost-ticket-actions{min-width:180px}.lost-ticket-verify{display:grid;grid-template-columns:1fr;gap:5px;width:180px}.lost-ticket-verify select,.lost-ticket-verify input{min-width:0;padding:7px;font-size:10px}

.schedule-filter-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.schedule-filter-form label{display:block;margin-bottom:6px;font-size:11px;font-weight:800;color:#526079}
.schedule-filter-actions{display:flex;gap:8px;align-items:center;grid-column:1/-1}
.btn.ghost{background:transparent;color:#526079;border:1px solid #dce3ee;text-decoration:none}
.bulk-schedule-toolbar{display:grid;grid-template-columns:auto minmax(170px,.7fr) minmax(230px,1.3fr) auto;gap:10px;align-items:center;padding:13px 18px;border-top:1px solid #e7ebf2;border-bottom:1px solid #e7ebf2;background:#f8faff}
.bulk-schedule-toolbar>b{white-space:nowrap;color:#10284f;font-size:12px}.bulk-schedule-toolbar select{min-width:0}
.schedule-check-cell{width:42px!important;min-width:42px!important;text-align:center!important;padding-left:12px!important;padding-right:8px!important}
.schedule-check-cell input{width:18px;height:18px;accent-color:#f7b834;cursor:pointer}
.bulk-schedule-form tbody tr:has(.schedule-row-check:checked){background:#fff8df}

.employee-filter-panel{border-top:4px solid #f5b63f}.employee-result-count,.location-count{padding:7px 11px;border-radius:999px;background:#fff3d4;color:#8a5a00;font-size:10px;font-weight:800;white-space:nowrap}
.employee-filter-grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(150px,.75fr));gap:12px;align-items:end}.employee-filter-actions{display:flex;gap:8px;grid-column:1/-1}.employee-filter-actions .btn{min-width:130px}
.location-group-head{display:flex;align-items:center;justify-content:space-between;margin:0 5px 12px}.location-group-head h2{margin:4px 0 0;font-size:19px}.employee-card{border:1px solid #e2e8f1;box-shadow:0 10px 26px rgba(20,43,82,.05);transition:transform .18s,box-shadow .18s}.employee-card:hover{transform:translateY(-2px);box-shadow:0 15px 34px rgba(20,43,82,.09)}
.employee-summary{display:flex;align-items:center;gap:14px}.employee-summary h3{margin:3px 0 4px;font-size:16px}.employee-summary p{margin:0}.employee-detail .payroll-account{padding:10px;margin-top:6px;border-radius:10px;background:#fff8e6}.employee-detail .payroll-account dd{color:#17284a}.account-empty{display:inline-flex;padding:5px 8px;border-radius:999px;background:#f0f2f6;color:#7d899d;font-size:9px;font-weight:800}
.employee-bank-editor{background:#fffaf0;border:1px solid #f7dfad!important;border-radius:12px;padding:12px!important}.employee-bank-editor summary:before{content:'$'!important}.payroll-account-form{grid-template-columns:repeat(4,minmax(0,1fr))!important}.payroll-account-form button{align-self:end}.generator-people select[multiple]{min-height:174px;padding:6px}.generator-people option{padding:8px;border-radius:7px}.generator-people option:checked{background:#315fce;color:#fff}.generator-select-actions{display:flex;gap:12px;margin-top:6px}.generator-select-actions .link-btn{padding:3px 0;font-weight:800}.field-help{display:block;margin-top:6px;color:#7b879d;font-size:9px;line-height:1.5}

@media(max-width:900px){
  .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schedule-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bulk-schedule-toolbar{grid-template-columns:1fr 1fr}.bulk-schedule-toolbar>b{grid-column:1/-1}.bulk-schedule-toolbar button{grid-column:1/-1}
  .employee-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-account-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:780px){
  .banner-track{gap:10px;padding-bottom:7px}
  .info-banner{flex-basis:calc(100vw - 64px);width:calc(100vw - 64px);min-height:160px;max-height:180px;aspect-ratio:auto;padding:18px}
  .info-banner p{max-width:90%;-webkit-line-clamp:3}
  .tutorial-banner:after{right:5%;font-size:72px}
  .announcement-card>img{max-height:190px;aspect-ratio:16/9}
  .guide-hero{grid-template-columns:1fr;padding:25px 20px;border-radius:20px}
  .guide-hero-mark{display:none}
  .guide-jumps{gap:6px}.guide-jumps a{padding:8px 10px}
  .guide-grid,.guide-grid-wide,.guide-status-grid{grid-template-columns:1fr}
  .guide-card{padding:17px}
  .qr-result-panel{position:static}.qr-empty{min-height:190px}.qr-ticket{padding:17px}.qr-actions{flex-wrap:wrap}
  .schedule-filter-form{grid-template-columns:1fr}.schedule-filter-actions{flex-wrap:wrap}.schedule-filter-actions .btn{flex:1}
  .bulk-schedule-toolbar{grid-template-columns:1fr;padding:12px}.bulk-schedule-toolbar>b,.bulk-schedule-toolbar button{grid-column:auto}.bulk-schedule-toolbar select,.bulk-schedule-toolbar button{width:100%}
  .employee-filter-grid,.payroll-account-form{grid-template-columns:1fr!important}.employee-filter-actions{flex-wrap:wrap}.employee-filter-actions .btn{flex:1}.employee-result-count{font-size:9px}.employee-card:hover{transform:none}
}
@media(max-width:420px){
  .info-banner{flex-basis:calc(100vw - 52px);width:calc(100vw - 52px);min-height:156px;max-height:174px}
  .tutorial-banner:after{display:none}
  .guide-section{padding-left:15px;padding-right:15px}
  .guide-steps li{grid-template-columns:38px minmax(0,1fr);gap:11px}
  .guide-steps li>span{width:34px;height:34px}
}

@media print{
  body *{visibility:hidden!important}
  .qr-ticket,.qr-ticket *{visibility:visible!important}
  .qr-ticket{position:fixed;left:50%;top:20mm;transform:translateX(-50%);width:90mm!important;max-width:90mm;border:1px solid #222!important;box-shadow:none!important}
  .qr-code-image{width:65mm!important}
}