/* Keep Bootstrap components while matching the original compact school theme.
   app.css owns the original typography, spacing, buttons and navigation. */
:root {
    --bs-body-font-family: 'DM Sans', sans-serif;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--canvas);
    --bs-border-color: var(--line);
    --bs-primary: #087c70;
}
body { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.55; color: var(--ink); }
/* Keep short pages top-aligned in the sidebar grid; only centre horizontally. */
.main { width: 100%; margin: 0 auto; }
/* Bootstrap's flex-column card must not change existing panel/form layouts. */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: none; min-width: 0; color: var(--ink); }
.card.panel { display: block; }
.card-header { padding: 21px 23px; background: var(--paper); border-bottom: 1px solid var(--line); }
.card-body { padding: 23px; }
.card-header h2 { font-size: 15px; letter-spacing: 0; }
.card-body > .display-6 { font-family: Manrope, sans-serif; font-size: 30px; font-weight: 700; }
/* Match original table density even where Bootstrap has stronger selectors. */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-hover-bg: #f5faf8; --bs-table-hover-color: var(--ink); margin-bottom: 0; }
.table > :not(caption) > * > th { background: #fafcfc; color: #7c8b94; font-size: 10px; padding: 12px 20px; border-bottom-color: #edf1f2; }
.table > :not(caption) > * > td { font-size: 12px; padding: 16px 20px; border-bottom-color: #edf1f2; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.form-control, .form-select { font-size: 13px; line-height: 1.55; }
.field { min-width: 0; }
.field .form-select { background-image: var(--bs-form-select-bg-img); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 10px; padding-right: 34px; }
.form-control:focus, .form-select:focus { border-color: #7dcbbb; box-shadow: 0 0 0 3px #087c7012; }
.field .form-control:disabled, .field .form-select:disabled { background-color: #f3f6f7; }
.field input[type=file] { font-size: 12px; }
.btn { --bs-btn-line-height: 1.55; line-height: 1.55; }
.btn-primary, .progress-bar { background-color: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active { background-color: var(--brand); border-color: var(--brand); color: white; }
.btn-outline-primary { color: var(--brand); border-color: #b8d9cd; background: white; }
.btn-outline-primary:hover { color: var(--brand); background: var(--tint); border-color: var(--brand); }
.btn-outline-danger { color: #a1372e; border-color: #f0c8c2; background: #fff1ef; }
.badge { line-height: 1.55; }
.progress { height: 7px; background: #edf2f3; }
/* Wrap filters together instead of shrinking labels or inheriting card direction. */
.filterbar, .card.panel.filterbar { display: flex; flex-direction: row; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.filterbar > .field { flex: 1 1 180px; min-width: 0; max-width: 330px; margin: 0; }
.filterbar > .btn { flex: 0 0 auto; }
.promotions-filters, .card.panel.promotions-filters { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) auto; align-items: end; gap: 17px; }
.promotions-filters > .field { max-width: none; }
.promotions-filters > .btn { min-height: 42px; }
.action-row > * { width: auto; }
.offcanvas { font-size: 13px; }
@media(max-width:1050px) {
    .promotions-filters, .card.panel.promotions-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .promotions-filters > .btn { justify-self: start; }
}
@media(max-width:520px) {
    .card-header, .card-body { padding: 18px; }
    .promotions-filters, .card.panel.promotions-filters { grid-template-columns: minmax(0,1fr); }
    .promotions-filters > .btn { width: 100%; }
    .filterbar > .field { flex-basis: 100%; max-width: none; }
}

/* The desktop sidebar owns its scrolling; the document scrolls independently. */
@media screen and (min-width: 801px) {
    .app-shell[data-layout=side] .app-navigation {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        flex-wrap: nowrap;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        scrollbar-color: #668893 var(--nav);
    }
    .app-shell[data-layout=side] .app-navigation > * {
        flex-shrink: 0;
    }
}

/* Animated RFID feedback remains available in the compact theme. */
.scanner-visual{position:relative;width:220px;height:152px;margin:10px auto 24px}.reader-device{position:absolute;inset:50px 40px 5px;background:linear-gradient(145deg,#214c5b,#0b2534);border:4px solid #557781;border-radius:20px;box-shadow:0 12px 24px #163d4226}.reader-device:after{content:'';position:absolute;width:60px;height:5px;background:#4be0b4;left:36px;top:37px;border-radius:5px;box-shadow:0 0 12px #4be0b4}.swipe-card{position:absolute;top:8px;left:56px;width:110px;height:68px;background:white;border:2px solid #81b4a8;border-radius:9px;box-shadow:0 8px 12px #0001;transform:rotate(-12deg);z-index:2}.swipe-card:before{content:'';position:absolute;left:12px;top:13px;width:23px;height:23px;background:#d9ede5;border-radius:50%}.swipe-card:after{content:'';position:absolute;left:44px;top:18px;width:50px;height:5px;background:#90afa7;box-shadow:0 13px 0 #c9dad5}.reader-ring{position:absolute;inset:36px 45px 0;border:2px solid #4dbea2;border-radius:50%;opacity:0}.scanning .swipe-card{animation:card-swipe 2.4s ease-in-out infinite}.scanning .reader-ring{animation:reader-listen 2s ease-out infinite}.scanning .reader-ring.second{animation-delay:1s}.card-reader{background:linear-gradient(130deg,#f3fbf8,#fff);text-align:center;padding:26px}.card-reader[data-state=success]{border-color:#198754}.card-reader[data-state=error]{border-color:#dc3545}.reader-state{display:inline-flex;gap:9px;align-items:center;border-radius:30px;background:#e5efec;padding:7px 15px}.reader-state:before{content:'';width:9px;height:9px;border-radius:50%;background:#6b8480}.scanning .reader-state:before{background:#198754;animation:reader-blink 1s infinite}@keyframes card-swipe{0%,100%{transform:translateY(-4px) rotate(-12deg)}50%{transform:translateY(38px) rotate(0)}}@keyframes reader-listen{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.65);opacity:0}}@keyframes reader-blink{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.scanning *{animation:none!important}.scanning .reader-ring{opacity:.4}}