/* Shared density for every app surface. Keep native text scaling and usable controls. */
.compact-app { --compact-gap:12px; }
.compact-app :is(button, .btn, .staff-primary, .staff-secondary, .card-link, .next-shift-action) { min-height:44px; box-sizing:border-box; }
.compact-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height:44px; box-sizing:border-box; }
.compact-app :is(.staff-panel, .glass-card, .hero, .section, .action-card) { border-radius:14px; }
.compact-app :is(.staff-services, .dashboard-main > div) { padding:16px; }
.compact-app .dashboard-main > div > * + * { margin-top:12px; }
.compact-app :is(.page-header, .hero) { padding:18px; margin-bottom:14px; }
.compact-app :is(.page-header h1, .hero h1, .staff-heading h1) { font-size:clamp(22px,3vw,28px); line-height:1.25; }
.compact-app :is(.stats-grid, .stats-cards, .actions-grid) { gap:12px; }
.compact-app :is(.stat-card, .action-card) { padding:14px; }
.compact-app .stat-card .value { font-size:28px; margin:6px 0 2px; }
.compact-app .staff-services { padding-bottom:40px; }
.compact-app .staff-topbar { padding:12px max(16px,calc((100vw - 1040px)/2)); align-items:center; }
.compact-app .staff-topbar a { display:inline-flex; align-items:center; min-height:44px; }
.compact-app .staff-tabs { gap:8px; margin-bottom:16px; }
.compact-app .staff-tabs a { padding:10px 12px; min-height:44px; box-sizing:border-box; font-size:14px; border-radius:10px; }
.compact-app .staff-heading h1 { margin:4px 0 14px; }
.compact-app .staff-panel { padding:14px 16px; margin-bottom:12px; }
.compact-app .staff-panel h2 { font-size:17px; line-height:1.4; margin:0 0 6px; }
.compact-app .staff-panel p { margin:6px 0; line-height:1.5; }
.compact-app .staff-note { font-size:13px; line-height:1.5; }
.compact-app .staff-heading-actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.compact-app .staff-heading-actions p { flex:1 1 190px; margin:0; }
.compact-app :is(.staff-primary,.staff-secondary) { padding:10px 12px; font-size:13px; margin:0; line-height:1.4; }
.compact-app .staff-heading-actions button { flex:0 0 auto; }
.compact-app .staff-notification { margin-bottom:8px; }
.compact-app .staff-notification .staff-note { font-size:12px; margin:4px 0; }
.compact-app .staff-notification .staff-message { font-size:14px; margin:8px 0; overflow-wrap:anywhere; }
.compact-app .staff-notification-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.compact-app .staff-notification-actions a { display:inline-flex; align-items:center; }
.compact-app .staff-badge { font-size:11px; padding:3px 7px; vertical-align:middle; }
.compact-app .staff-record { padding:10px 0; }
.compact-app .staff-hour-grid { gap:10px; margin-bottom:12px; }
.compact-app .staff-hour-grid strong { font-size:26px; margin:6px 0; }
.compact-app .staff-shortcuts { gap:8px; margin:8px 0; }
.compact-app .staff-shortcuts a { padding:10px 12px; min-height:44px; box-sizing:border-box; font-size:13px; }
.compact-app .staff-review-times { padding:10px; gap:10px; }
.compact-app .shift-breakdown-summary { min-height:54px; padding:12px 16px; gap:10px; box-sizing:border-box; }
.compact-app .shift-breakdown-title { font-size:18px; }
.compact-app .shift-breakdown-count { min-width:36px; height:28px; font-size:14px; padding:0 10px; }
.compact-app .shift-breakdown-chevron { font-size:18px; }
.compact-app .shift-breakdown-body { padding:10px; gap:10px; }
.compact-app .shift-breakdown-empty { padding:12px; font-size:14px; }
.compact-app .active-shift-card { padding:18px; border-radius:14px; margin-bottom:12px; }
.compact-app .active-shift-card h2 { font-size:20px; }
.compact-app .active-shift-label { margin-bottom:8px; }
.compact-app .active-shift-controls { margin-top:14px; gap:12px; }
.compact-app .active-shift-timer { font-size:clamp(32px,6vw,44px); }
.compact-app .active-shift-clockout { min-height:48px; padding:12px 18px; font-size:16px; }
.compact-app .active-shift-hint { margin-top:12px; padding-top:10px; }
.compact-staff :is(.profile-card,.profile-form-card) { padding:16px; }
.compact-staff .profile-stats { gap:10px; }
.compact-staff .profile-stat-card { padding:12px; }
.compact-portal :is(.container,.page) { margin-top:14px; margin-bottom:24px; }
.compact-portal :is(.section-header,.section-body,.controls,.filters,.filter-bar,.header) { padding:14px 16px; }
.compact-portal :is(.section,.table-container,.stats-cards,.controls) { margin-bottom:14px; }
.compact-portal :is(.empty,.empty-state) { padding:24px 16px; }
.compact-portal .action-card h3 { margin:4px 0 6px; font-size:17px; }
.compact-portal .action-card p { margin:6px 0; line-height:1.45; }
.compact-portal .card-link { display:inline-flex; align-items:center; margin-top:4px; }
.compact-portal :is(.modal-header,.modal-body,.modal-footer) { padding:16px; }
.compact-auth { height:auto; min-height:100vh; }
.compact-auth #form-lgn { box-sizing:border-box; width:calc(100% - 32px); max-width:440px; padding:22px; margin:20px auto; }
.compact-auth #form-lgn input { width:100%; margin-bottom:12px; }
.compact-auth #form-lgn .password-row input { margin-bottom:0; }
.compact-auth #form-lgn h1 { margin:0 0 16px; }
.compact-auth .panel { padding:22px; }
.compact-auth .page { padding:20px 16px; }
.compact-public :is(.cta-card,.install-panel) { padding:24px; }
@media(min-width:769px) {
    .compact-portal :is(th,td) { padding-top:10px; padding-bottom:10px; }
}
@media(max-width:640px) {
    .compact-app :is(.staff-services,.dashboard-main > div) { padding:12px; }
    .compact-app .staff-services { padding-bottom:32px; }
    .compact-app .staff-tabs a { font-size:13px; padding:10px; }
    .compact-app :is(.page-header,.hero) { padding:16px; }
    .compact-app .active-shift-controls { flex-direction:row; align-items:center; flex-wrap:wrap; }
    .compact-app .active-shift-clockout { width:auto; flex:1 1 120px; }
    .compact-app .staff-notification { padding:12px; }
    .compact-app .staff-notification h2 { font-size:16px; }
    .compact-app .staff-hour-grid .staff-panel { padding:12px; }
    .compact-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) { font-size:16px; }
}
.compact-app .shift-list-card { padding:14px; }
.compact-app .shift-list-card > div > div:first-child { margin-bottom:10px; }
.compact-app .shift-list-card .rounded-full.flex-shrink-0 { padding:10px; }
.compact-app .shift-list-card h3 { font-size:16px; }
.compact-app .shift-list-card .items-end { align-items:flex-start; }
@media(min-width:768px) { .compact-app .shift-list-card .items-end { align-items:flex-end; } }
.compact-portal .action-card { display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:10px; align-content:start; }
.compact-portal .action-card .card-icon { margin:0; align-self:center; }
.compact-portal .action-card h3 { align-self:center; margin:0; }
.compact-portal .action-card :is(p,.card-link) { grid-column:1 / -1; }
.compact-auth .security-shell { margin:16px auto 28px; }
.compact-auth .security-panel { padding:18px; }
.compact-public .hero-section { padding-top:40px; padding-bottom:40px; min-height:0; }
.compact-public section.py-5 { padding-top:32px!important; padding-bottom:32px!important; }
.compact-portal .header h1 { font-size:clamp(22px,3vw,28px); margin-bottom:6px; }
.compact-portal .header p { font-size:14px; }
.compact-portal .empty-state svg { width:48px; height:48px; margin-bottom:8px; }
.compact-public .hero-section > .container.py-5 { padding-top:16px!important; padding-bottom:16px!important; }
@media(max-width:768px) {
    .compact-portal .admin-mobile-nav { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
}

/* Grouped portal navigation: disclosure menus work with pointer, touch and keyboard. */
.portal-navigation .nav-menu { flex-wrap:nowrap; gap:4px; }
.portal-navigation .portal-group { position:relative; }
.portal-navigation .portal-group .portal-group-toggle { display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 10px; border-radius:10px; color:#1f2937; font-size:13px; font-weight:700; cursor:pointer; list-style:none; white-space:nowrap; }
.portal-navigation .portal-group .portal-group-toggle::-webkit-details-marker { display:none; }
.portal-navigation .portal-group .portal-group-toggle::after { content:'⌄'; font-size:14px; }
.portal-navigation .portal-group.is-open summary::after { transform:rotate(180deg); }
.portal-navigation .portal-group .portal-group-toggle:hover,.portal-navigation .portal-group .portal-group-toggle.active,.portal-navigation .portal-group.is-open summary { background:#e6efed; color:#244c5a; }
.portal-navigation .nav-link { display:flex; align-items:center; gap:6px; min-height:44px; font-size:13px; }
.portal-navigation .portal-dropdown { position:absolute; top:calc(100% + 6px); right:0; z-index:110; min-width:220px; padding:6px; border:1px solid #dbe4e1; border-radius:12px; background:#fff; box-shadow:0 12px 28px #163e3a20; }
.portal-navigation .portal-dropdown .nav-link { border-radius:8px; white-space:normal; }
.portal-navigation :is(.portal-group-toggle,a,button):focus-visible { outline:3px solid #b7791f; outline-offset:2px; }
.portal-navigation [data-unread-count]:not([hidden]) { background:#2f6f5e; color:white; border-radius:20px; padding:2px 6px; font-size:11px; }
.portal-navigation [hidden] { display:none!important; }
@media(max-width:1200px) {
    .portal-navigation .nav-toggle { display:block; min-width:44px; }
    .portal-navigation .nav-menu { display:none; position:absolute; left:0; right:0; top:calc(100% + 10px); flex-direction:column; align-items:stretch; padding:8px; background:white; border:1px solid #dbe4e1; border-radius:12px; box-shadow:0 12px 28px #163e3a20; max-height:calc(100dvh - 150px); overflow-y:auto; }
    .portal-navigation .nav-menu.is-open { display:flex; }
    .portal-navigation .portal-group .portal-group-toggle { justify-content:space-between; }
    .portal-navigation .portal-dropdown { position:static; min-width:0; box-shadow:none; border:0; border-left:2px solid #dbe4e1; border-radius:0; margin:4px 0 6px 10px; padding:0 0 0 8px; }
}

.portal-navigation .portal-group-toggle { border:0; background:transparent; font-family:inherit; width:100%; text-align:left; }