* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            overflow-x: auto;
            overflow-y: auto;
            height: 100%;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f0f0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: auto;
            font-size: clamp(12px, 1.4vw, 16px);
        }

        @media (max-width: 640px) {
            body {
                height: auto;
                overflow: visible;
                overflow-x: hidden;
            }
        }

        /* ===== SKIP LINK ===== */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #000;
            color: #fff;
            padding: 8px 16px;
            z-index: 10000;
            text-decoration: none;
            font-weight: bold;
        }

        .skip-link:focus {
            top: 0;
            outline: 3px solid #FFC107;
            outline-offset: 2px;
        }

        /* ===== FOCUS STYLES ===== */
        *:focus {
            outline: 2px solid #005fcc;
            outline-offset: 2px;
        }

        *:focus:not(:focus-visible) {
            outline: none;
        }

        *:focus-visible {
            outline: 2px solid #005fcc;
            outline-offset: 2px;
        }

        /* ===== HEADER ===== */
        .header {
            background-color: #1a1a1a;
            color: #ffffff;
            padding: clamp(6px, 1vw, 10px) clamp(10px, 2vw, 20px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
            z-index: 1000;
            flex-wrap: wrap;
            gap: 8px;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .header-title {
            font-size: clamp(16px, 2vw, 20px);
            font-weight: bold;
        }

        .mode-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toggle-switch {
            position: relative;
            width: 60px;
            height: 30px;
        }

        .toggle-switch input {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 1;
            margin: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #0a7c7c;
            transition: 0.3s;
            border-radius: 30px;
            pointer-events: none;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        .toggle-switch input:checked + .toggle-slider {
            background-color: #0b6bcb;
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(30px);
        }

        .toggle-switch input:focus + .toggle-slider {
            box-shadow: 0 0 0 3px #005fcc;
        }

        .mode-label {
            font-weight: bold;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 14px;
        }

        .mode-label.build {
            background-color: #0a7c7c;
            color: #ffffff;
        }

        .mode-label.user {
            background-color: #0b6bcb;
            color: #ffffff;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn {
            padding: clamp(5px, 0.8vw, 8px) clamp(10px, 1.5vw, 16px);
            font-size: clamp(12px, 1.3vw, 14px);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.2s, transform 0.1s;
            white-space: nowrap;
            min-height: 44px;
            min-width: 44px;
        }

        .btn:hover {
            filter: brightness(0.9);
        }

        .btn:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

        .btn:active {
            transform: scale(0.98);
        }

        .btn-green {
            background-color: #0a7c7c;
            color: #ffffff;
        }

        .btn-blue {
            background-color: #0b6bcb;
            color: #ffffff;
        }

        .btn-red {
            background-color: #5f7285;
            color: #ffffff;
        }

        /* ===== BUILD TOOLBAR ===== */
        .build-toolbar {
            background-color: #2d2d2d;
            padding: clamp(6px, 1vw, 10px) clamp(10px, 2vw, 20px);
            display: flex;
            align-items: center;
            gap: clamp(5px, 1vw, 10px);
            flex-shrink: 0;
            flex-wrap: wrap;
        }

        .build-toolbar.hidden {
            display: none;
        }

        .toolbar-label {
            color: #ffffff;
            font-size: 14px;
            margin-right: 10px;
        }

        /* ===== BUILD TOOLBAR DROPDOWN MENUS ===== */
        .toolbar-dropdown {
            position: relative;
            display: inline-block;
        }
        .toolbar-menu {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            min-width: 280px;
            background: #ffffff;
            border: 1px solid #c2cbd6;
            border-radius: 8px;
            box-shadow: 0 8px 28px rgba(0,0,0,0.28);
            padding: 8px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .toolbar-menu.hidden {
            display: none;
        }
        .toolbar-menu-heading {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #5f7285;
            padding: 6px 10px 4px;
        }
        .toolbar-menu-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 8px 10px;
            border-radius: 6px;
            color: #1a2535;
            font-size: 14px;
        }
        .toolbar-menu-row:hover {
            background: #f1f4f8;
        }
        .toolbar-menu-row label,
        .toolbar-menu-row span {
            color: #1a2535;
            font-size: 14px;
            margin: 0;
        }
        .toolbar-menu-row select,
        .toolbar-menu-row input[type="number"] {
            padding: 6px 8px;
            font-size: 14px;
            border-radius: 4px;
            border: 1px solid #b9c2cc;
            min-height: 36px;
            background: #ffffff;
            color: #1a2535;
        }
        .toolbar-menu-check {
            cursor: pointer;
            user-select: none;
            justify-content: flex-start;
        }
        .toolbar-menu-check input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #0b6bcb;
            margin: 0;
            flex-shrink: 0;
        }
        .toolbar-menu-item {
            display: block;
            width: 100%;
            text-align: left;
            padding: 9px 10px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: #1a2535;
            font-size: 14px;
            cursor: pointer;
            min-height: 40px;
        }
        .toolbar-menu-item:hover {
            background: #f1f4f8;
        }
        .toolbar-divider {
            width: 1px;
            align-self: stretch;
            min-height: 28px;
            background: rgba(255,255,255,0.25);
            margin: 0 4px;
            flex-shrink: 0;
        }

        /* ===== CANVAS ===== */
        .canvas {
            flex: 1;
            position: relative;
            overflow: auto;
            background-color: #e8e8e8;
            background-image: 
                linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
background-size: 20px 20px;
        }

        .canvas:focus {
            outline: 3px solid #005fcc;
            outline-offset: -3px;
        }

        .canvas.build-mode-canvas {
            overflow: scroll;
        }

        .canvas.build-mode-canvas::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4000px;
            height: 4000px;
            pointer-events: none;
        }

        .canvas.user-mode {
            min-height: 100%;
        }

        @media (max-width: 640px) {
            .canvas {
                flex: none;
                overflow: visible;
                -webkit-overflow-scrolling: touch;
            }
        }

        .canvas.user-mode {
            background-image: none;
            background-color: #f5f5f5;
            height: auto !important;
            min-height: auto !important;
            padding-bottom: 40px;
        }

        /* ===== SECTION ===== */
        .section {
            position: absolute;
            background-color: #ffffff;
            border: 2px solid #767676;
            border-radius: 8px;
            min-width: 200px;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .section.build-mode {
            border: 2px dashed #0a7c7c;
        }

        .section.build-mode:hover {
            border-color: #0b6bcb;
        }

        .section.dragging {
            opacity: 0.8;
            z-index: 1000;
        }

        .section-header {
            background-color: #f5f5f5;
            padding: 8px 12px;
            border-bottom: 1px solid #767676;
            border-radius: 6px 6px 0 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: move;
        }

        .section.user-mode .section-header {
            cursor: default;
        }

        .section.user-mode .section-roles-btn {
            display: none !important;
        }

        .section.user-mode .section-tab-select {
            display: none !important;
        }

        .section-title {
            font-weight: bold;
            font-size: clamp(14px, 1.5vw, 16px);
            flex: 1;
            color: #1a1a1a;
        }

        .section-title.hidden {
            display: none;
        }

        .section-last-updated {
            font-size: clamp(8px, 0.9vw, 10px);
            color: #595959;
            font-weight: normal;
            margin-left: 10px;
        }

        .section-title-input {
            font-weight: bold;
            font-size: clamp(14px, 1.5vw, 16px);
            border: 2px dashed #767676;
            padding: 2px 6px;
            border-radius: 4px;
            background: transparent;
            width: 100%;
            max-width: 200px;
            color: #1a1a1a;
        }

        .section-title-input:focus {
            border-color: #005fcc;
            border-style: solid;
        }

        .section-title-input.hidden {
            display: none;
        }

        .section-controls {
            display: flex;
            gap: 5px;
        }

        .section-controls.hidden {
            display: none;
        }

        .section-btn {
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .section-btn:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

.section-btn.add {
    background-color: #0a7c7c;
    color: #ffffff;
}

.section-btn.move {
    background-color: #0b6bcb;
    color: #ffffff;
    font-size: 14px;
}

.section-btn.delete {
    background-color: #5f7285;
    color: #ffffff;
}
        .section-content {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
        }

        .resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20px;
            height: 20px;
            cursor: nwse-resize;
            background: linear-gradient(135deg, transparent 50%, #767676 50%);
            border-radius: 0 0 6px 0;
        }

        .resize-handle.hidden {
            display: none;
        }

        /* ===== ELEMENT ROW ===== */
        .element-row {
            display: flex;
            align-items: center;
            padding: 6px 8px;
            margin-bottom: 4px;
            background-color: #f9f9f9;
            border-radius: 4px;
            gap: 10px;
        }

        .element-row:nth-child(even) {
            background-color: #f0f0f0;
        }

        .element-name {
            flex: 1;
            font-size: clamp(12px, 1.3vw, 14px);
            font-weight: 500;
            color: #1a1a1a;
        }

        .element-name.hidden {
            display: none;
        }

        .element-name-input {
            flex: 1;
            font-size: clamp(12px, 1.3vw, 14px);
            padding: 4px 8px;
            border: 2px dashed #767676;
            border-radius: 4px;
            background: transparent;
            color: #1a1a1a;
        }

        .element-name-input:focus {
            border-color: #005fcc;
            border-style: solid;
        }

        .element-name-input.hidden {
            display: none;
        }

        .element-value-input {
            width: clamp(50px, 5vw, 60px);
            padding: 4px 8px;
            font-size: clamp(12px, 1.3vw, 14px);
            border: 1px solid #767676;
            border-radius: 4px;
            text-align: center;
            color: #1a1a1a;
            min-height: 44px;
        }

        .element-value-input:focus {
            border-color: #005fcc;
            border-width: 2px;
        }

        .element-value-input:disabled {
            background-color: #f5f5f5;
            color: #595959;
        }

        .census-label {
            font-size: clamp(9px, 1vw, 11px);
            display: flex;
            align-items: center;
            gap: 3px;
            color: #1a1a1a;
        }

        .census-label.hidden {
            display: none;
        }

        .row-delete-btn {
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 4px;
            background-color: #5f7285;
            color: #ffffff;
            cursor: pointer;
            font-size: 14px;
        }

        .row-delete-btn:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

        .row-delete-btn.hidden {
            display: none;
        }

        /* ===== STAFF/ONCALL ROW ===== */
        .staff-row {
            display: flex;
            align-items: center;
            padding: 6px 8px;
            margin-bottom: 4px;
            background-color: #f9f9f9;
            border-radius: 4px;
            gap: 8px;
        }

.staff-row:nth-child(even) {
            background-color: #f0f0f0;
        }

        .provider-status-row {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            margin-bottom: 6px;
            background-color: #f9f9f9;
            border-radius: 6px;
            gap: 10px;
            border: 1px solid #e0e0e0;
        }

        .provider-status-row:nth-child(even) {
            background-color: #f0f0f0;
        }

        .provider-photo-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .provider-photo-placeholder {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #d0d0d0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
        }

        .provider-photo-placeholder svg {
            width: 30px;
            height: 30px;
        }

        .provider-photo-placeholder.hidden {
            display: none;
        }

        .provider-photo-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #767676;
        }

        .provider-photo-img.hidden {
            display: none;
        }

        .provider-photo-paste-btn {
            font-size: 10px;
            padding: 2px 6px;
            background: #1976d2;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            min-height: 24px;
        }

        .provider-photo-paste-btn:hover {
            background: #1565c0;
        }

        .provider-photo-paste-btn:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

        .provider-info {
            flex: 1;
            min-width: 100px;
        }

        .provider-name-input {
            width: 100%;
            font-size: 14px;
            font-weight: 600;
            padding: 4px 8px;
            border: 2px dashed #767676;
            border-radius: 4px;
            color: #1a1a1a;
        }

        .provider-name-input:focus {
            border-color: #005fcc;
            border-style: solid;
        }

        .provider-name-input.hidden {
            display: none;
        }

        .provider-name-display {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
        }

        .provider-name-display.hidden {
            display: none;
        }

        .provider-team-section {
            width: 100%;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px dashed #ccc;
        }

        .provider-team-label {
            font-size: 10px;
            text-transform: uppercase;
            color: #888;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .team-member-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
            min-width: 0;
        }

        .team-member-name-input {
            flex: 1;
            min-width: 0;
            font-size: 12px;
            border: none;
            border-bottom: 1px dashed #bbb;
            background: transparent;
            padding: 2px 0;
            outline: none;
            color: #1a1a1a;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .team-member-name-input:focus {
            border-bottom-color: #005fcc;
            outline: 2px solid #005fcc;
            outline-offset: 1px;
        }

        .team-member-toggle {
            display: flex;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #767676;
            flex-shrink: 0;
        }

        .tm-toggle-btn {
            font-size: 10px;
            font-weight: bold;
            padding: 2px 7px;
            border: none;
            cursor: pointer;
            background: #e0e0e0;
            color: #555;
            min-height: 24px;
        }

        .tm-toggle-btn.in.selected {
            background: #0a7c7c;
            color: #fff;
        }

        .tm-toggle-btn.out.selected {
            background: #5f7285;
            color: #fff;
        }

        .tm-toggle-btn:focus {
            outline: 2px solid #005fcc;
            outline-offset: 1px;
        }

        .tm-delete-btn {
            background: none;
            border: none;
            color: #c0392b;
            cursor: pointer;
            font-size: 14px;
            line-height: 1;
            padding: 0 2px;
            min-height: 24px;
            min-width: 24px;
        }

        .tm-delete-btn:focus {
            outline: 2px solid #005fcc;
        }

        .add-team-member-btn {
            font-size: 11px;
            background: none;
            border: 1px dashed #0a7c7c;
            color: #0a7c7c;
            border-radius: 4px;
            cursor: pointer;
            padding: 2px 8px;
            margin-top: 2px;
            min-height: 24px;
        }

        .add-team-member-btn:hover {
            background: #e6f5f5;
        }

        .add-team-member-btn:focus {
            outline: 2px solid #005fcc;
        }

        .provider-status-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .provider-inout-toggle {
            display: flex;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #767676;
        }

        .provider-toggle-btn {
            padding: 6px 12px;
            font-size: 12px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            min-height: 36px;
            transition: background-color 0.2s;
        }

        .provider-toggle-btn.in {
            background-color: #e0f2f2;
            color: #0a7c7c;
        }

        .provider-toggle-btn.in.selected {
            background-color: #0a7c7c;
            color: white;
        }

        .provider-toggle-btn.out {
            background-color: #e8ecf0;
            color: #5f7285;
        }

        .provider-toggle-btn.out.selected {
            background-color: #5f7285;
            color: white;
        }

        .provider-toggle-btn:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
            z-index: 1;
            position: relative;
        }

        .provider-status-text {
            width: 120px;
            font-size: 12px;
            padding: 6px 8px;
            border: 1px solid #767676;
            border-radius: 4px;
            min-height: 36px;
        }

        .provider-status-text:focus {
            outline: 3px solid #005fcc;
            border-color: #005fcc;
        }

        .provider-status-text:disabled {
            background-color: #f5f5f5;
            border-style: dashed;
        }

        /* ===== CHECKLIST STYLES ===== */
        .checklist-row {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            margin-bottom: 6px;
            background-color: #f9f9f9;
            border-radius: 6px;
            gap: 10px;
            border: 1px solid #e0e0e0;
        }

        .checklist-row:nth-child(even) {
            background-color: #f0f0f0;
        }

        .checklist-info {
            flex: 1;
            min-width: 100px;
        }

        .checklist-name-input {
            width: 100%;
            font-size: 14px;
            font-weight: 600;
            padding: 4px 8px;
            border: 2px dashed #767676;
            border-radius: 4px;
            color: #1a1a1a;
        }

        .checklist-name-input:focus {
            border-color: #005fcc;
            border-style: solid;
        }

        .checklist-name-input.hidden {
            display: none;
        }

        .checklist-name-display {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
        }

        .checklist-name-display.hidden {
            display: none;
        }

        .checklist-status-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .checklist-toggle {
            display: flex;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #767676;
        }

        .checklist-toggle-btn {
            padding: 6px 12px;
            font-size: 12px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            min-height: 36px;
            transition: background-color 0.2s;
        }

        .checklist-toggle-btn.done {
            background-color: #e0f2e9;
            color: #2e7d32;
        }

        .checklist-toggle-btn.done.selected {
            background-color: #2e7d32;
            color: white;
        }

        .checklist-toggle-btn.notdone {
            background-color: #fce4ec;
            color: #c62828;
        }

        .checklist-toggle-btn.notdone.selected {
            background-color: #c62828;
            color: white;
        }

        .checklist-toggle-btn:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
            z-index: 1;
            position: relative;
        }

        .checklist-note-text {
            width: 150px;
            font-size: 12px;
            padding: 6px 8px;
            border: 1px solid #767676;
            border-radius: 4px;
            min-height: 36px;
        }

        .checklist-note-text:focus {
            outline: 3px solid #005fcc;
            border-color: #005fcc;
        }

        .checklist-note-text:disabled {
            background-color: #f5f5f5;
            border-style: dashed;
        }

        .staff-position {
            width: clamp(80px, 10vw, 120px);
            font-size: clamp(12px, 1.3vw, 14px);
            font-weight: 500;
            color: #1a1a1a;
        }

        .staff-position.hidden {
            display: none;
        }

        .staff-position-input {
            width: clamp(80px, 10vw, 120px);
            font-size: clamp(12px, 1.3vw, 14px);
            padding: 4px 8px;
            border: 2px dashed #767676;
            border-radius: 4px;
            color: #1a1a1a;
        }

        .staff-position-input:focus {
            border-color: #005fcc;
            border-style: solid;
        }

        .staff-position-input.hidden {
            display: none;
        }

        .staff-name-input {
            width: clamp(70px, 9vw, 100px);
            padding: 4px 8px;
            font-size: clamp(12px, 1.3vw, 14px);
            border: 1px solid #767676;
            border-radius: 4px;
            color: #1a1a1a;
            min-height: 44px;
        }

        .staff-name-input:focus {
            border-color: #005fcc;
            border-width: 2px;
        }

        .staff-name-input:disabled {
            background-color: #f5f5f5;
            color: #595959;
        }

        .staff-phone-input {
            width: clamp(90px, 10vw, 120px);
            padding: 4px 8px;
            font-size: clamp(12px, 1.3vw, 14px);
            border: 1px solid #767676;
            border-radius: 4px;
            color: #1a1a1a;
            min-height: 44px;
        }

        .staff-phone-input:focus {
            border-color: #005fcc;
            border-width: 2px;
        }

        .staff-assignment-label {
            font-size: clamp(9px, 1vw, 11px);
            display: flex;
            align-items: center;
            gap: 3px;
            color: #1a1a1a;
        }

        .staff-assignment-label.hidden {
            display: none;
        }

        .staff-shift-select {
            padding: 4px;
            font-size: 12px;
            border: 1px solid #767676;
            border-radius: 4px;
            color: #1a1a1a;
            min-height: 44px;
        }

        .staff-shift-select:focus {
            border-color: #005fcc;
            border-width: 2px;
        }

        .staff-shift-select.hidden {
            display: none;
        }

        .staff-assignment-input {
            width: clamp(120px, 15vw, 200px);
            padding: 4px 8px;
            font-size: clamp(12px, 1.3vw, 14px);
            border: 1px solid #767676;
            border-radius: 4px;
            color: #1a1a1a;
            min-height: 44px;
        }

        .staff-assignment-input:focus {
            border-color: #005fcc;
            border-width: 2px;
        }

        .staff-assignment-input:disabled {
            background-color: #f5f5f5;
            color: #595959;
        }

        .staff-assignment-input.hidden {
            display: none !important;
        }

        /* ===== STATUS INDICATOR ===== */
        .status-indicator {
            display: flex;
            gap: 5px;
            margin-left: 10px;
        }

        .status-indicator[role="radiogroup"] {
            padding: 4px;
        }

        .status-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid transparent;
            transition: transform 0.2s;
            min-width: 44px;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .status-dot:hover {
            transform: scale(1.1);
        }

        .status-dot:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

.status-dot.green {
    background-color: #0a7c7c;
}

.status-dot.green::after {
    content: "✓";
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
}

.status-dot.yellow {
    background-color: #b8860b;
}

.status-dot.yellow::after {
    content: "!";
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
}

.status-dot.red {
    background-color: #5f7285;
}

.status-dot.red::after {
    content: "✕";
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
}

.status-dot.selected {
    border: 3px solid #1a1a1a;
}

.status-dot[aria-checked="true"] {
    border: 3px solid #1a1a1a;
}
        .section.status-yellow {
            border: 3px solid #b8860b !important;
        }

        .section.status-red {
            border: 3px solid #5f7285 !important;
        }

        /* ===== COMMUNICATION ===== */
        .communication-textarea {
            width: 100%;
            height: calc(100% - 10px);
            min-height: 100px;
            padding: 10px;
            font-size: clamp(12px, 1.3vw, 14px);
            font-family: inherit;
            border: 1px solid #767676;
            border-radius: 4px;
            resize: none;
            color: #1a1a1a;
        }

        .communication-textarea:focus {
            border-color: #005fcc;
            border-width: 2px;
        }

        .communication-textarea:disabled {
            background-color: #f5f5f5;
            color: #595959;
        }

        .communication-editor-container {
            width: 100%;
            height: calc(100% - 10px);
            display: flex;
            flex-direction: column;
        }

        .communication-editor-container .ql-toolbar {
            display: none;
            border: 1px solid #767676;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
            background: #f9f9f9;
        }

        .communication-editor-container.show-toolbar .ql-toolbar {
            display: block;
        }

        .communication-editor-container .ql-container {
            flex: 1;
            border: 1px solid #767676;
            border-radius: 4px;
            font-size: clamp(12px, 1.3vw, 14px);
            font-family: inherit;
        }

        .communication-editor-container.show-toolbar .ql-container {
            border-radius: 0 0 4px 4px;
        }

.communication-editor-container .ql-editor {
            min-height: 100px;
            color: #1a1a1a;
            padding-bottom: 50px;
        }

        .communication-editor-container .ql-editor img {
            max-width: 100%;
            width: auto;
            height: auto;
            display: block;
            object-fit: contain;
        }

        .communication-editor-container .ql-editor {
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: break-word;
        }

        .communication-editor-container .ql-container {
            overflow: hidden;
        }

.comm-toolbar-toggle {
            position: absolute;
            bottom: 5px;
            right: 5px;
            padding: 8px 12px;
            font-size: 12px;
            background: #0b6bcb;
            color: #ffffff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            z-index: 10;
            min-height: 44px;
            min-width: 44px;
        }

        .comm-toolbar-toggle:hover {
            background: #0856a3;
        }

        .comm-toolbar-toggle:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

        .build-mode .communication-editor-container .ql-toolbar {
            display: none !important;
        }

        .build-mode .communication-editor-container .ql-container {
            border-radius: 4px !important;
        }

        .build-mode .comm-toolbar-toggle {
            display: none;
        }

        /* ===== RRT ===== */
        .rrt-container {
            font-size: clamp(11px, 1.2vw, 13px);
        }

        /* rrt-header now defined in rrt-row block above */

        .rrt-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr auto;
            gap: 5px;
            margin-bottom: 5px;
            align-items: center;
        }

        .rrt-header {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr auto;
            gap: 5px;
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
            padding-bottom: 5px;
            border-bottom: 1px solid #767676;
            color: #1a1a1a;
        }

        .rrt-role {
            font-size: clamp(10px, 1.1vw, 12px);
            color: #1a1a1a;
        }

        .rrt-role-input {
            font-size: clamp(10px, 1.1vw, 12px);
            color: #1a1a1a;
            border: 1px dashed #767676;
            border-radius: 4px;
            padding: 3px 6px;
            width: 100%;
            background: transparent;
        }

        .rrt-role-input:focus {
            outline: 2px solid #005fcc;
            border-color: #005fcc;
            border-style: solid;
        }

        .rrt-row-delete-btn {
            background: none;
            border: none;
            color: #c0392b;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            padding: 0 4px;
            min-height: 32px;
            min-width: 28px;
        }

        .rrt-row-delete-btn:focus {
            outline: 2px solid #005fcc;
        }

        .rrt-row-delete-btn.hidden {
            display: none;
        }

        .rrt-add-row-btn {
            margin-top: 8px;
            font-size: 12px;
            background: none;
            border: 1px dashed #0a7c7c;
            color: #0a7c7c;
            border-radius: 4px;
            cursor: pointer;
            padding: 4px 12px;
            min-height: 32px;
        }

        .rrt-add-row-btn:hover { background: #e6f5f5; }
        .rrt-add-row-btn:focus { outline: 2px solid #005fcc; }
        .rrt-add-row-btn.hidden { display: none; }

        .rrt-select {
            font-size: clamp(10px, 1.1vw, 12px);
            padding: 4px;
            border: 1px solid #767676;
            border-radius: 4px;
            color: #1a1a1a;
            min-height: 44px;
        }

        .rrt-select:focus {
            border-color: #005fcc;
            border-width: 2px;
        }

        .rrt-select:disabled {
            background-color: #f5f5f5;
            color: #595959;
        }

        /* ===== TYPE BADGE ===== */
        .type-badge {
            font-size: clamp(8px, 0.9vw, 10px);
            padding: 2px 6px;
            border-radius: 10px;
            background-color: #4a4a4a;
            color: #ffffff;
            margin-left: 10px;
        }

        .type-badge.elements { background-color: #7b1fa2; }
        .type-badge.staff { background-color: #0b6bcb; }
        .type-badge.oncall { background-color: #c56000; }
        .type-badge.communication { background-color: #0a7c7c; }
        .type-badge.rrt { background-color: #5f7285; }
        .type-badge.census { background-color: #ad1457; }
        .type-badge.assignmentdisplay { background-color: #512da8; }
.type-badge.otheritems { background-color: #00796b; }
        .type-badge.providerstatus { background-color: #5c6bc0; }
        .type-badge.checklist { background-color: #7cb342; }
        .type-badge.phonedirectory { background-color: #ff7043; }
        .type-badge.patientboard { background-color: #7b1fa2; }

        /* ===== OTHER ITEMS SECTION ===== */
        .other-item-row {
            display: flex;
            align-items: flex-start;
            padding: 6px 8px;
            margin-bottom: 4px;
            background-color: #f9f9f9;
            border-radius: 4px;
            gap: 10px;
        }

        .other-item-row:nth-child(even) {
            background-color: #f0f0f0;
        }

        .other-item-label {
            min-width: 100px;
            font-size: clamp(12px, 1.3vw, 14px);
            font-weight: 500;
            padding-top: 6px;
            color: #1a1a1a;
        }

        .other-item-label.hidden {
            display: none;
        }

        .other-item-label-input {
            min-width: 100px;
            max-width: 150px;
            font-size: clamp(12px, 1.3vw, 14px);
            padding: 4px 8px;
            border: 2px dashed #767676;
            border-radius: 4px;
            background: transparent;
            color: #1a1a1a;
        }

        .other-item-label-input:focus {
            border-color: #005fcc;
            border-style: solid;
        }

        .other-item-label-input.hidden {
            display: none;
        }

        .other-item-value-input {
            flex: 1;
            min-height: 44px;
            padding: 6px 10px;
            font-size: clamp(12px, 1.3vw, 14px);
            font-family: inherit;
            border: 1px solid #767676;
            border-radius: 4px;
            resize: none;
            overflow: hidden;
            line-height: 1.4;
            color: #1a1a1a;
        }

        .other-item-value-input:focus {
            border-color: #005fcc;
            border-width: 2px;
        }

        .other-item-value-input:disabled {
            background-color: #f5f5f5;
            color: #595959;
        }

        /* ===== CENSUS DISPLAY ===== */
        .census-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
        }

        .census-display-label {
            font-size: clamp(14px, 1.8vw, 18px);
            font-weight: bold;
            color: #1a1a1a;
            margin-bottom: 10px;
        }

        .census-display-value {
            font-size: clamp(32px, 5vw, 48px);
            font-weight: bold;
            color: #5f7285;
        }

        /* ===== PHONE NUMBERS MODAL ===== */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .modal-overlay.show {
            display: flex !important;
        }

        .modal-content {
            background-color: #ffffff;
            border-radius: 8px;
            padding: clamp(12px, 2vw, 20px);
            width: clamp(300px, 50vw, 500px);
            max-width: 90%;
            max-height: 80%;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 10000;
        }

        .modal-content[role="dialog"] {
            outline: none;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .modal-title {
            font-size: clamp(14px, 1.8vw, 18px);
            font-weight: bold;
            color: #1a1a1a;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: clamp(18px, 2.5vw, 24px);
            cursor: pointer;
            color: #4a4a4a;
            min-width: 44px;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-close:hover {
            color: #1a1a1a;
        }

        .modal-close:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

        .modal-body {
            flex: 1;
            overflow: auto;
        }

        .phone-numbers-textarea {
            width: 100%;
            height: 300px;
            padding: 10px;
            font-size: clamp(12px, 1.3vw, 14px);
            font-family: monospace;
            border: 1px solid #767676;
            border-radius: 4px;
            resize: vertical;
            color: #1a1a1a;
        }

        .phone-numbers-textarea:focus {
            border-color: #005fcc;
            border-width: 2px;
        }

        /* ===== PHONE DIRECTORY SECTION ===== */
        .phonedirectory-container {
            padding: 5px;
            height: calc(100% - 10px);
            display: flex;
            flex-direction: column;
        }

        .phonedirectory-search-input {
            transition: border-color 0.2s;
        }

        .phonedirectory-search-input:focus {
            border-color: #005fcc;
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 95, 204, 0.2);
        }

        .phonedirectory-results {
            flex: 1;
            min-height: 100px;
        }

        .phonedirectory-item {
            padding: 10px 12px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.15s;
        }

        .phonedirectory-item:last-child {
            border-bottom: none;
        }

        .phonedirectory-item:hover {
            background-color: #f5f5f5;
        }

        .phonedirectory-item-name {
            font-weight: 500;
            color: #1a1a1a;
        }

        .phonedirectory-item-phone {
            color: #0b6bcb;
            font-family: monospace;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .phonedirectory-item-phone a {
            color: #0b6bcb;
            text-decoration: none;
        }

        .phonedirectory-item-phone a:hover {
            text-decoration: underline;
        }

        .phonedirectory-call-btn {
            background: none;
            border: none;
            font-size: 14px;
            font-family: monospace;
            color: #0b6bcb;
            text-decoration: none;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            transition: background-color 0.15s;
        }

        .phonedirectory-call-btn:hover {
            background-color: #e3f2fd;
            text-decoration: underline;
        }

        .phonedirectory-call-btn:focus {
            outline: 2px solid #005fcc;
            outline-offset: 2px;
        }

        .phonedirectory-no-results {
            padding: 20px;
            text-align: center;
            color: #666;
            font-style: italic;
        }

        .phonedirectory-highlight {
            background-color: #fff3cd;
            padding: 1px 2px;
            border-radius: 2px;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 15px;
        }

        .modal-hint {
            font-size: clamp(10px, 1.1vw, 12px);
            color: #4a4a4a;
            margin-bottom: 10px;
        }

        /* ===== DISPLAY PAGE OVERLAY ===== */
.display-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(270deg, #0f172a, #1e3a5f, #0f2a4a, #162032, #0f172a);
            background-size: 300% 300%;
            animation: headerShift 18s ease infinite;
            z-index: 5000;
            flex-direction: column;
            overflow: hidden;
            overscroll-behavior: contain;
        }

        .display-overlay.show {
            display: flex;
        }

        .display-header {
            background-color: #0d1a30;
            color: #ffffff;
            padding: clamp(6px, 1vw, 10px) clamp(10px, 2vw, 20px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
            flex-wrap: wrap;
            gap: 10px;
        }

        .display-title {
            font-size: clamp(18px, 2.5vw, 24px);
            font-weight: bold;
        }

        .display-close-btn {
            padding: clamp(5px, 0.8vw, 8px) clamp(12px, 2vw, 20px);
            font-size: clamp(12px, 1.3vw, 14px);
            background-color: #5f7285;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            min-height: 44px;
            min-width: 44px;
        }

        .display-close-btn:focus {
            outline: 3px solid #FFC107;
            outline-offset: 2px;
        }

        .display-canvas {
            flex: 1;
            position: relative;
            overflow: hidden;
            background: transparent;
        }

        .display-section {
            position: absolute;
            background: linear-gradient(270deg, #071020, #1a4a7a, #071020);
            background-size: 200% 200%;
            animation: headerShift 24s ease infinite;
            border: 2px solid #0a2847;
            border-radius: 8px;
            color: #ffffff;
            overflow: hidden;
        }

        .display-section-header {
            background-color: #0a2847;
            padding: clamp(5px, 0.8vw, 8px) clamp(8px, 1.2vw, 12px);
            font-weight: bold;
            font-size: clamp(1em, 1.2vw, 1.2em);
            border-bottom: 1px solid #061423;
        }

        .display-section-content {
            padding: clamp(6px, 1vw, 10px);
            font-size: clamp(0.85em, 1vw, 1em);
            overflow-y: auto;
            height: calc(100% - 40px);
        }

        .display-row {
            padding: 0.4em 0;
            border-bottom: 1px solid #0a2847;
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

.display-row:last-child {
            border-bottom: none;
        }

        .display-provider-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .display-provider-row {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 16px;
            padding: 14px 16px 14px 0;
            background: rgba(255,255,255,0.04);
            border-radius: 4px;
            border-left: 6px solid #5f7285;
            position: relative;
        }

        .display-provider-row.provider-in {
            border-left-color: #2e7d32;
            background: rgba(46,125,50,0.08);
        }

        .display-provider-row.provider-out {
            border-left-color: #c62828;
            background: rgba(198,40,40,0.08);
        }

        .display-provider-photo {
            flex-shrink: 0;
            margin-left: 14px;
        }

        .display-provider-img {
            width: 54px;
            height: 64px;
            border-radius: 3px;
            object-fit: cover;
            border: 1px solid rgba(255,255,255,0.15);
        }

        .display-provider-placeholder {
            width: 54px;
            height: 64px;
            border-radius: 3px;
            background: rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.3);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .display-provider-placeholder svg {
            width: 28px;
            height: 28px;
        }

        .display-provider-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }

        .display-provider-name {
            font-size: 1.25em;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.02em;
            line-height: 1.2;
        }

        .display-provider-note {
            font-size: 0.92em;
            color: #c8d4e0;
            font-weight: 400;
        }

        .display-provider-team-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }

        .display-tm-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.88em;
        }

        .display-tm-name {
            flex: 1;
            color: #b8c4d0;
            font-weight: 500;
        }

        .display-tm-badge {
            font-size: 0.75em;
            font-weight: 700;
            padding: 0.15em 0.6em;
            border-radius: 3px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .display-tm-badge.tm-in {
            background: #2e7d32;
            color: #fff;
        }

        .display-tm-badge.tm-out {
            background: rgba(95,114,133,0.8);
            color: #fff;
        }

        .display-provider-status {
            font-size: 1.1em;
            font-weight: 800;
            padding: 10px 22px;
            border-radius: 3px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            min-width: 90px;
            text-align: center;
            margin-right: 12px;
        }

        .display-provider-status.provider-in {
            background: #2e7d32;
            color: #ffffff;
            box-shadow: 0 0 0 1px rgba(46,125,50,0.4);
        }

        .display-provider-status.provider-out {
            background: rgba(95,114,133,0.6);
            color: #ffffff;
            box-shadow: 0 0 0 1px rgba(95,114,133,0.3);
        }

        /* Display Checklist Styles */
        .display-checklist-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .display-checklist-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            background: rgba(255,255,255,0.05);
            border-radius: 8px;
            border-left: 4px solid #5f7285;
        }

        .display-checklist-row.checklist-done {
            border-left-color: #2e7d32;
            background: rgba(46,125,50,0.1);
        }

        .display-checklist-row.checklist-notdone {
            border-left-color: #c62828;
            background: rgba(198,40,40,0.1);
        }

        .display-checklist-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .display-checklist-name {
            font-weight: 600;
            font-size: 1em;
        }

        .display-checklist-note {
            font-size: 0.85em;
            color: #b0b0b0;
            font-style: italic;
        }

        .display-checklist-status {
            font-size: 0.9em;
            font-weight: bold;
            padding: 6px 14px;
            border-radius: 20px;
            text-transform: uppercase;
        }

        .display-checklist-status.checklist-done {
            background: #2e7d32;
            color: #ffffff;
        }

        .display-checklist-status.checklist-notdone {
            background: #c62828;
            color: #ffffff;
        }

        /* ===== DISPLAY PHONE DIRECTORY STYLES ===== */
        .display-section .phonedirectory-container {
            padding: 5px;
        }

        .display-section .phonedirectory-search-input {
            background: #0d1a30;
            color: #ffffff;
            border-color: #4a6a8a;
        }

        .display-section .phonedirectory-search-input::placeholder {
            color: #888;
        }

        .display-section .phonedirectory-search-input:focus {
            border-color: #4fc3f7;
            outline: none;
            box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.3);
        }

        .display-section .phonedirectory-results {
            background: #0d1a30;
            border-color: #4a6a8a;
        }

        .display-section .phonedirectory-item:hover {
            background-color: rgba(255,255,255,0.05);
        }

     .display-label {
    color: #d0d0d0;
    font-size: 1em;
}

        .display-value {
            color: #ffffff;
            font-weight: 500;
            text-align: right;
            font-size: 1em;
        }

        .display-census-value {
            font-size: clamp(3em, 5vw, 5em);
            font-weight: bold;
            color: #5f7285;
            text-align: center;
            padding: 20px;
        }

        .display-rrt-table {
            width: 100%;
        }

        .display-rrt-header {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 5px;
            padding: clamp(5px, 0.8vw, 8px) 5px;
            background-color: #0a2847;
            border-bottom: 2px solid #061423;
            font-weight: bold;
            text-align: center;
        }

        .display-rrt-row {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 5px;
            padding: clamp(4px, 0.6vw, 6px) 5px;
            border-bottom: 1px solid #0a2847;
        }

        .display-rrt-row:last-child {
            border-bottom: none;
        }

        .display-rrt-cell {
            padding: clamp(2px, 0.4vw, 4px);
        }

        .display-rrt-role {
            color: #d0d0d0;
            text-align: left;
        }

        .display-rrt-value {
            color: #ffffff;
            text-align: center;
            font-weight: 500;
        }

        .display-page-btn {
            padding: clamp(4px, 0.6vw, 6px) clamp(8px, 1.2vw, 12px);
            font-size: clamp(10px, 1.1vw, 12px);
            background-color: #0a2847;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            min-height: 44px;
            min-width: 44px;
        }

        .display-page-btn:hover {
            background-color: #0d3a6d;
        }

        .display-page-btn:focus {
            outline: 3px solid #FFC107;
            outline-offset: 2px;
        }

        /* ===== MOBILE STYLES ===== */
        @media (max-width: 640px) {
            /* Hide build mode controls on mobile */
            .mode-toggle,
            #archiveBtn,
            .build-toolbar,
            #saveBtn,
            .resize-handle,
            .section-controls,
            .section-title-input,
            .element-rank-input,
            .element-name-input,
            .census-label,
            .row-delete-btn,
            .staff-position-input,
            .staff-assignment-label,
            .staff-shift-select {
                display: none !important;
            }

            /* Show display labels on mobile */
            .section-title,
            .element-name,
            .staff-position {
                display: block !important;
            }

            /* Body adjustments */
            body {
                overflow-y: auto !important;
                height: auto !important;
            }

            /* Header mobile adjustments */
            .header {
                padding: 10px 12px;
                flex-wrap: wrap;
                gap: 8px;
            }

            .header-title {
                font-size: 16px;
            }

            #dateTimeDisplay {
                font-size: 11px !important;
                margin-left: 8px !important;
            }

            /* Canvas becomes a scrollable container */
            .canvas {
                position: relative !important;
                overflow: visible !important;
                padding: 12px;
                background: #0d1a30 !important;
                min-height: 100vh;
            }

            /* Section navigation dropdown - mobile only */
            .mobile-section-nav {
                display: block !important;
                position: sticky;
                top: 0;
                z-index: 100;
                background: #0d1a30;
                padding: 12px;
                margin: -12px -12px 12px -12px;
                border-bottom: 1px solid #0a2847;
            }

            /* Move display buttons into the nav area on mobile */
.header-right {
                width: 100% !important;
                padding: 0 12px !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 8px !important;
            }

            .header-right .btn {
                width: 100% !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }

            #displayPageButtons {
                width: calc(100% - 24px) !important;
                margin: 0 12px 8px 12px !important;
            }

            .mobile-section-nav select {
                width: 100%;
                padding: 12px 16px;
                font-size: 16px;
                font-family: inherit;
                background: #0a2847;
                color: #ffffff;
                border: 2px solid #1a4a7c;
                border-radius: 8px;
                appearance: none;
                -webkit-appearance: none;
                cursor: pointer;
                min-height: 48px;
            }

            .mobile-section-nav select:focus {
                border-color: #FFC107;
                outline: none;
            }

            .mobile-section-nav::after {
                content: "▼";
                position: absolute;
                right: 24px;
                top: 50%;
                transform: translateY(-50%);
                color: #d0d0d0;
                pointer-events: none;
                font-size: 12px;
            }

            /* Sections become cards - hidden by default */
            .section {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: 100% !important;
                height: auto !important;
                min-height: auto !important;
                max-height: none !important;
                margin-bottom: 12px;
                border: 1px solid rgba(100, 160, 220, 0.2) !important;
                border-radius: 12px;
                background: linear-gradient(270deg, #0a1628, #1a3a5c, #2a4a6e, #1a3a5c, #0a1628) !important;
                background-size: 300% 300% !important;
                animation: headerShift 22s ease infinite !important;
                box-shadow: 0 4px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(150,190,240,0.06);
                display: none !important;
                overflow: visible !important;
            }

            /* Show only the active section */
            .section.mobile-active {
                display: flex !important;
            }

            /* Back button styling */
            .mobile-back-btn {
                display: block !important;
                width: auto;
                padding: 12px 20px;
                margin-top: 10px;
                background: #5f7285;
                color: #ffffff;
                border: none;
                border-radius: 6px;
                font-size: 16px;
                font-family: inherit;
                cursor: pointer;
                text-align: center;
                min-height: 48px;
            }

            .mobile-back-btn:focus {
                outline: 3px solid #FFC107;
                outline-offset: 2px;
            }

            /* Mobile section card grid */
            .mobile-section-cards {
                display: grid !important;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                padding: 0 0 12px 0;
            }

            .mobile-section-cards.hidden {
                display: none !important;
            }

            .mobile-section-card {
                background: linear-gradient(270deg, #0a1628, #1a3a5c, #2a4a6e, #1a3a5c, #0a1628);
                background-size: 300% 300%;
                animation: headerShift 18s ease infinite;
                border: 1px solid rgba(100, 160, 220, 0.25);
                border-radius: 10px;
                padding: 14px 12px;
                cursor: pointer;
                text-align: center;
                min-height: 80px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;
                transition: border-color 0.2s, box-shadow 0.2s;
                box-shadow: 0 2px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(150,190,240,0.08);
            }

            .mobile-section-card:focus {
                outline: 3px solid #FFC107;
                outline-offset: 2px;
            }

            .mobile-section-card:active {
                border-color: rgba(120, 180, 255, 0.5);
                box-shadow: 0 4px 20px rgba(30, 80, 160, 0.4);
            }

            .mobile-section-card.card-status-yellow {
                border-color: #b8860b;
            }

            .mobile-section-card.card-status-red {
                border-color: #5f7285;
            }

            .mobile-section-card-title {
                font-size: 14px;
                font-weight: 600;
                color: #ffffff;
                line-height: 1.2;
                word-break: break-word;
            }

            .mobile-section-card-type {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.5px;
                padding: 2px 8px;
                border-radius: 4px;
                color: #ffffff;
            }

            .mobile-section-card-type.elements { background-color: #7b1fa2; }
            .mobile-section-card-type.staff { background-color: #0b6bcb; }
            .mobile-section-card-type.oncall { background-color: #c56000; }
            .mobile-section-card-type.communication { background-color: #0a7c7c; }
            .mobile-section-card-type.rrt { background-color: #5f7285; }
            .mobile-section-card-type.census { background-color: #ad1457; }
            .mobile-section-card-type.assignmentdisplay { background-color: #512da8; }
            .mobile-section-card-type.otheritems { background-color: #00796b; }
            .mobile-section-card-type.providerstatus { background-color: #5c6bc0; }
            .mobile-section-card-type.checklist { background-color: #7cb342; }
            .mobile-section-card-type.phonedirectory { background-color: #ff7043; }
            .mobile-section-card-type.patientboard { background-color: #7b1fa2; }

            .mobile-section-card-lock {
                font-size: 14px;
            }

            .section.status-yellow {
                border-color: #b8860b !important;
            }

            .section.status-red {
                border-color: #5f7285 !important;
            }

            /* Allow scrolling on mobile */
            html {
                overflow-y: scroll !important;
                overflow-x: hidden !important;
                height: 100% !important;
            }

            body {
                overflow-y: scroll !important;
                overflow-x: hidden !important;
                height: 100% !important;
                min-height: 100vh;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: none;
            }

            .canvas {
                overflow: visible !important;
                overscroll-behavior: none;
            }

            /* Hide status indicators on mobile */
            .status-indicator {
                display: none !important;
            }

            /* Hide census source dropdown on mobile */
            .census-source-select {
                display: none !important;
            }

            /* Hide census label edit on mobile */
            .census-label-edit {
                display: none !important;
            }

            /* Hide visibility checkbox on mobile */
            .oncall-visible-label {
                display: none !important;
            }

            /* Show phone call button on mobile */
            .phone-call-btn {
                display: inline-flex !important;
                font-size: 24px;
                padding: 8px;
                min-width: 48px;
                min-height: 48px;
                align-items: center;
                justify-content: center;
            }

            /* Hide row if not visible on mobile */
            .staff-row.oncall-hidden {
                display: none !important;
            }

            /* Show phone button in display pages on mobile */
            .display-phone-btn {
                display: inline !important;
            }

            /* Hide phone icon when unchecked */
            .phone-hidden {
                display: none !important;
            }

            /* Section header mobile */
            .section-header {
                background: #0a2847 !important;
                padding: 14px 16px;
                cursor: default !important;
                border-radius: 12px 12px 0 0;
            }

            .section-title {
                color: #ffffff !important;
                font-size: 16px !important;
            }

            .section-last-updated {
                color: #d0d0d0 !important;
                font-size: 10px !important;
            }

            .type-badge {
                font-size: 9px;
                padding: 3px 8px;
            }

            /* Section content mobile - card style, no internal scroll */
            .section-content {
                padding: 12px 16px;
                padding-bottom: 40px !important;
                overflow: visible !important;
                max-height: none !important;
                height: auto !important;
            }

            /* Element rows mobile */
            .element-row {
                background: rgba(255,255,255,0.08) !important;
                border-radius: 8px;
                padding: 12px;
                margin-bottom: 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .element-name {
                color: #d0d0d0 !important;
                font-size: 14px !important;
            }

            .element-value-input {
                width: 80px !important;
                padding: 12px !important;
                font-size: 16px !important;
                background: #0a2847 !important;
                border: 2px solid #1a4a7c !important;
                color: #ffffff !important;
                border-radius: 6px !important;
                text-align: center !important;
                min-height: 48px !important;
            }

            .element-value-input:focus {
                border-color: #FFC107 !important;
            }

            .element-value-input:disabled {
                background: #142842 !important;
                color: #d0d0d0 !important;
            }

/* Staff rows mobile */
            .staff-row {
                background: rgba(255,255,255,0.08) !important;
                border-radius: 8px;
                padding: 12px;
                margin-bottom: 8px;
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }

            /* Provider status rows mobile */
            .provider-status-row {
                background: rgba(255,255,255,0.08) !important;
                border-radius: 8px;
                padding: 12px;
                margin-bottom: 8px;
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
                border-color: rgba(255,255,255,0.2);
            }

            .provider-photo-container {
                flex-direction: row;
                align-items: center;
                gap: 10px;
            }

            .provider-info {
                flex: 1;
            }

            .provider-name-display {
                color: #d0d0d0 !important;
                font-size: 16px !important;
            }

            .provider-status-controls {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 10px;
            }

            .provider-status-text {
                flex: 1;
                min-width: 120px;
                background: rgba(255,255,255,0.1);
                border-color: rgba(255,255,255,0.3);
                color: #d0d0d0;
            }

            .provider-status-text:disabled {
                background: rgba(255,255,255,0.05);
            }

            .provider-toggle-btn.in.selected {
                background-color: #43a047;
            }

            .provider-toggle-btn.out.selected {
                background-color: #e53935;
            }

            /* Team member mobile overrides */
            .team-member-row {
                gap: 8px;
            }

            .team-member-name-input {
                color: #d0d0d0 !important;
                border-bottom-color: rgba(255,255,255,0.3);
                font-size: 13px;
            }

            .tm-toggle-btn {
                background: rgba(255,255,255,0.15);
                color: #d0d0d0;
                min-height: 32px;
                padding: 4px 10px;
                font-size: 11px;
            }

            .tm-toggle-btn.in.selected {
                background: #43a047;
                color: #fff;
            }

            .tm-toggle-btn.out.selected {
                background: #e53935;
                color: #fff;
            }

            .provider-team-label {
                color: #aaa;
            }

            .provider-team-section {
                border-top-color: rgba(255,255,255,0.15);
            }

            /* Checklist rows mobile */
            .checklist-row {
                background: rgba(255,255,255,0.08) !important;
                border-radius: 8px;
                padding: 12px;
                margin-bottom: 8px;
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
                border-color: rgba(255,255,255,0.2);
            }

            .checklist-info {
                flex: 1;
            }

            .checklist-name-display {
                color: #d0d0d0 !important;
                font-size: 16px !important;
            }

            .checklist-status-controls {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 10px;
            }

            .checklist-note-text {
                flex: 1;
                min-width: 120px;
                background: rgba(255,255,255,0.1);
                border-color: rgba(255,255,255,0.3);
                color: #d0d0d0;
            }

            .checklist-note-text:disabled {
                background: rgba(255,255,255,0.05);
            }

            .checklist-toggle-btn.done.selected {
                background-color: #43a047;
            }

            .checklist-toggle-btn.notdone.selected {
                background-color: #e53935;
            }

            .staff-position {
                color: #d0d0d0 !important;
                font-size: 12px !important;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-bottom: 4px;
            }

            .staff-name-input,
            .staff-phone-input,
            .staff-assignment-input {
                width: 100% !important;
                padding: 12px !important;
                font-size: 16px !important;
                background: #0a2847 !important;
                border: 2px solid #1a4a7c !important;
                color: #ffffff !important;
                border-radius: 6px !important;
                min-height: 48px !important;
            }

            .staff-name-input:focus,
            .staff-phone-input:focus,
            .staff-assignment-input:focus {
                border-color: #FFC107 !important;
            }

            .staff-name-input:disabled,
            .staff-phone-input:disabled,
            .staff-assignment-input:disabled {
                background: #142842 !important;
                color: #d0d0d0 !important;
            }

            /* Communication section mobile */
            .communication-editor-container {
                height: auto !important;
            }

            .communication-editor-container .ql-container {
                background: #0a2847 !important;
                border-color: #1a4a7c !important;
                border-width: 2px !important;
                border-radius: 8px !important;
                color: #ffffff !important;
            }

            .communication-editor-container .ql-editor {
                min-height: 120px !important;
                color: #ffffff !important;
            }

            .communication-editor-container .ql-editor img {
                max-width: 100% !important;
                width: 100% !important;
                height: auto !important;
                object-fit: contain !important;
                display: block !important;
            }

            .communication-editor-container .ql-container {
                overflow: visible !important;
            }

            .communication-editor-container .ql-toolbar {
                background: #142842 !important;
                border-color: #1a4a7c !important;
                border-radius: 8px 8px 0 0 !important;
            }

.comm-toolbar-toggle {
                display: none !important;
            }

            .status-indicator {
                margin-top: 12px;
                justify-content: center;
            }

            .status-dot {
                width: 48px;
                height: 48px;
            }

            /* RRT section mobile */
            .rrt-container {
                color: #ffffff;
            }

            .rrt-header {
                background: rgba(255,255,255,0.08);
                border-radius: 6px;
                padding: 8px;
                margin-bottom: 8px;
                font-size: 11px;
                color: #d0d0d0;
            }

            .rrt-row {
                background: rgba(255,255,255,0.05);
                border-radius: 6px;
                padding: 8px;
                margin-bottom: 6px;
                grid-template-columns: 1fr 1fr 1fr auto;
            }

            .rrt-role {
                color: #d0d0d0 !important;
                font-size: 12px !important;
            }

            .rrt-role-input {
                color: #d0d0d0 !important;
                border-color: rgba(255,255,255,0.3) !important;
                font-size: 12px !important;
            }

            .rrt-row-delete-btn {
                color: #ff6b6b;
            }

            .rrt-add-row-btn {
                color: #4dd0c4;
                border-color: #4dd0c4;
            }

            .rrt-select {
                background: #0a2847 !important;
                border: 2px solid #1a4a7c !important;
                color: #ffffff !important;
                font-size: 14px !important;
                padding: 12px !important;
                border-radius: 6px !important;
                min-height: 48px !important;
            }

            .rrt-select:focus {
                border-color: #FFC107 !important;
            }

            .rrt-select:disabled {
                background: #142842 !important;
                color: #d0d0d0 !important;
            }

            /* Other Items mobile */
            .other-item-row {
                background: rgba(255,255,255,0.08) !important;
                border-radius: 8px;
                padding: 12px;
                margin-bottom: 8px;
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }

            .other-item-label {
                color: #d0d0d0 !important;
                font-size: 12px !important;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .other-item-value-input {
                width: 100% !important;
                padding: 12px !important;
                font-size: 16px !important;
                background: #0a2847 !important;
                border: 2px solid #1a4a7c !important;
                color: #ffffff !important;
                border-radius: 6px !important;
                min-height: 60px !important;
            }

            .other-item-value-input:focus {
                border-color: #FFC107 !important;
            }

            .other-item-value-input:disabled {
                background: #142842 !important;
                color: #d0d0d0 !important;
            }

            /* Census display mobile */
            .census-display {
                padding: 20px;
            }

            .census-display-label {
                color: #d0d0d0 !important;
                font-size: 14px !important;
            }

            .census-display-value {
                font-size: 56px !important;
                color: #5f7285 !important;
            }

            /* Display page dropdown mobile */
            #displayPageButtons {
                display: flex !important;
                width: 100% !important;
                padding: 0 12px !important;
                margin: 8px 0 !important;
                box-sizing: border-box !important;
            }

            #dataPageSelect {
                width: 100% !important;
                padding: 12px 16px !important;
                font-size: 16px !important;
                background: #0a7c7c !important;
                color: #ffffff !important;
                border: 2px solid #1a4a7c !important;
                border-radius: 8px !important;
                cursor: pointer !important;
                text-align: center !important;
                box-sizing: border-box !important;
                appearance: none !important;
                -webkit-appearance: none !important;
                min-height: 48px !important;
            }

            #dataPageSelect:focus {
                border-color: #FFC107 !important;
            }

            .display-page-btn {
                width: 100%;
                padding: 12px 16px;
                font-size: 16px;
                background: #0a7c7c;
                color: #ffffff;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                min-height: 48px;
            }

            /* Display header buttons mobile */
            #displayHeaderButtons {
                display: flex !important;
                flex-direction: column !important;
                gap: 6px !important;
                width: 100% !important;
                margin: 10px 0 !important;
                order: 10;
            }

            #displayHeaderButtons button {
                width: 100% !important;
                padding: 12px 16px !important;
                font-size: 14px !important;
                min-height: 48px !important;
            }

            .display-header {
                flex-wrap: wrap !important;
            }

            .display-close-btn {
                order: 11;
                width: 100% !important;
                margin-top: 6px !important;
                min-height: 48px !important;
            }

            /* Display overlay mobile */
            .display-overlay {
                padding: 0;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
            }

            .display-header {
                padding: 12px 16px;
                flex-wrap: nowrap;
                position: sticky;
                top: 0;
                z-index: 10;
            }

            .display-title {
                font-size: 16px;
            }

            .display-canvas {
                padding: 12px;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
            }

            .display-section {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: 100% !important;
                height: auto !important;
                margin-bottom: 12px;
                border-radius: 12px;
            }

            .display-section.mobile-hidden {
                display: none !important;
            }

            .display-section-header {
                padding: 12px 16px;
                font-size: 14px;
            }

            .display-section-content {
                padding: 12px 16px;
                height: auto !important;
                overflow: visible !important;
            }

            .display-row {
                padding: 10px 0;
            }

            .display-label {
                font-size: 13px;
            }

            .display-value {
                font-size: 13px;
            }

            .display-census-value {
                font-size: 48px !important;
            }

            /* Hide scale controls on mobile */
            #displayScaleControl,
            #canvasScaleValue {
                display: none !important;
            }

            /* ===== DATA PAGE PATIENT BOARD MOBILE ===== */
            /* Kill the horizontal scroll wrapper */
            .display-pb-table { display: block !important; }
            /* Hide header row — labels come from data-label */
            .display-pb-table thead { display: none !important; }
            /* Stack everything as blocks */
            .display-pb-table tbody,
            .display-pb-table tr,
            .display-pb-table td {
                display: block !important;
                width: 100% !important;
            }
            /* Each row = a card */
            .display-pb-row {
                background: rgba(255,255,255,0.07) !important;
                border: 1px solid rgba(255,255,255,0.18) !important;
                border-radius: 10px !important;
                margin-bottom: 14px !important;
                padding: 10px 12px !important;
                overflow: visible !important;
            }
            .display-pb-row.pb-accepted {
                background: rgba(40,167,69,0.22) !important;
                border-color: rgba(40,167,69,0.5) !important;
            }
            /* Each cell: dim label on top, white value below */
            .display-pb-table td {
                padding: 5px 0 !important;
                border: none !important;
                font-size: 14px !important;
                color: #ffffff !important;
            }
            .display-pb-table td::before {
                content: attr(data-label);
                font-weight: 700;
                font-size: 10px;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: #7a9abf;
                display: block;
                margin-bottom: 3px;
            }
            /* Accept / Decline buttons — full width, large tap targets */
            .display-pb-action-btn {
                display: block !important;
                width: 100% !important;
                min-height: 48px !important;
                font-size: 15px !important;
                margin-bottom: 6px !important;
            }
            .display-pb-responses { margin-top: 6px !important; }
            .display-pb-response { font-size: 12px !important; padding: 4px 8px !important; }
            .display-pb-range-wrap {
                width: 100%; gap: 8px; background: rgba(255,255,255,0.08);
                border-radius: 6px; padding: 5px 10px;
            }
            .display-pb-range-wrap label { font-size: 12px !important; }
            .display-pb-range-wrap input[type="number"] {
                width: 70px !important; min-height: 36px !important;
                font-size: 15px !important; border: 2px solid #1a4a7c !important;
            }
            .display-pb-range-unit { font-size: 12px !important; }
            .display-pb-loc-warn { font-size: 11px !important; }
            .pb-range-wrap {
                margin-left: 0 !important; margin-top: 6px;
                background: rgba(255,255,255,0.08); border-radius: 6px;
                padding: 5px 10px; width: 100%; justify-content: flex-start; gap: 8px;
            }
            .pb-range-wrap label { color: #d0d0d0 !important; font-size: 12px !important; }
            .pb-range-wrap input[type="number"] {
                width: 70px !important; min-height: 36px !important; font-size: 15px !important;
                background: #0a2847 !important; border: 2px solid #1a4a7c !important;
                color: #ffffff !important; border-radius: 6px !important;
            }
            .pb-range-unit { color: #a0c0e0 !important; font-size: 12px !important; }
            .pb-loc-warn { font-size: 11px !important; color: #ff8a80 !important; }
        }

        /* Hide mobile nav and back button on desktop */
        .mobile-section-nav {
            display: none;
        }

        .mobile-back-btn {
            display: none;
        }

        .mobile-section-cards {
            display: none;
        }

        /* ===== PATIENT BOARD SECTION ===== */
        .pb-section-wrap { display: flex; flex-direction: column; gap: 10px; height: 100%; }
        .pb-form-area {
            background: #f5f5f5; border: 1px solid #ddd; border-radius: 8px;
            padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
        }
        .pb-form-field { display: flex; flex-direction: column; gap: 3px; }
        .pb-form-field label { font-size: 11px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .04em; }
        .pb-form-field input[type="number"], .pb-form-field select, .pb-form-field input[type="text"] {
            padding: 7px 10px; font-size: 13px; border: 1px solid #767676;
            border-radius: 5px; min-height: 38px; color: #1a1a1a; background: #fff;
        }
        .pb-form-field input[type="number"] { width: 85px; }
        .pb-form-field select { width: 130px; }
        .pb-form-field.condition-field { flex: 1; min-width: 160px; }
        .pb-form-field.condition-field input[type="text"] { width: 100%; }
        .pb-submit-btn {
            padding: 8px 20px; background: #0a7c7c; color: #fff; border: none;
            border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer;
            min-height: 38px; align-self: flex-end; white-space: nowrap;
        }
        .pb-submit-btn:hover { filter: brightness(.9); }
        .pb-submit-btn:focus { outline: 3px solid #005fcc; outline-offset: 2px; }
        .pb-table-wrap { overflow-x: auto; flex: 1; }
        .pb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .pb-table th {
            background: #2d2d2d; color: #fff; padding: 8px 10px;
            text-align: left; font-size: 11px; text-transform: uppercase;
            letter-spacing: .04em; white-space: nowrap;
        }
        .pb-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.15); vertical-align: top; color: #ffffff; }
        .pb-row { transition: background .3s; }
        .pb-row.accepted { background: #1a3d2a !important; }
        .pb-row.neutral { background: #0a2847; }
        .pb-row td:first-child { white-space: nowrap; font-size: 11px; color: #8aa8c7; }
        .pb-action-btn {
            padding: 5px 12px; border: none; border-radius: 4px; font-size: 12px;
            font-weight: 600; cursor: pointer; min-height: 32px;
        }
        .pb-action-btn.accept { background: #0a7c7c; color: #fff; }
        .pb-action-btn.decline { background: #5f7285; color: #fff; }
        .pb-action-btn:hover { filter: brightness(.9); }
        .pb-action-btn:focus { outline: 3px solid #005fcc; outline-offset: 2px; }
        .pb-responses { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
        .pb-response-entry {
            font-size: 11px; padding: 3px 7px; border-radius: 3px;
            background: #e8f4f8; color: #1a1a1a; border-left: 3px solid #0b6bcb;
        }
        .pb-response-entry.declined { background: #f4f4f4; border-left-color: #5f7285; }
        .pb-expires { font-size: 10px; color: #7a9abf; margin-top: 2px; }
        .pb-empty { text-align: center; color: #8aa8c7; padding: 20px; font-size: 13px; }
        /* Prompt modal for org/phone */
        .pb-prompt-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,.5); z-index: 7000;
            align-items: center; justify-content: center;
        }
        .pb-prompt-overlay.show { display: flex; }
        .pb-noloc-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,.55); z-index: 10000;
            align-items: center; justify-content: center;
        }
        .pb-noloc-overlay.show { display: flex; }
        .pb-noloc-box {
            background: #fff; border-radius: 8px; padding: 24px;
            max-width: 400px; width: 90%; box-shadow: 0 4px 24px rgba(0,0,0,0.25);
            display: flex; flex-direction: column; gap: 16px;
        }
        .pb-noloc-box h3 { font-size: 16px; color: #1a1a1a; margin: 0; }
        .pb-noloc-box p { font-size: 13px; color: #444; line-height: 1.6; margin: 0; }
        .pb-noloc-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
        .pb-range-wrap {
            display: flex; align-items: center; gap: 5px;
            margin-left: 8px; font-size: 12px; color: #444; white-space: nowrap;
        }
        .pb-range-wrap label { font-weight: 600; font-size: 11px; color: #555; }
        .pb-range-wrap input[type="number"] {
            width: 60px; padding: 2px 5px; border: 1px solid #bbb;
            border-radius: 4px; font-size: 12px; min-height: 28px; text-align: center;
        }
        .pb-range-unit { font-size: 11px; color: #666; }
        .loc-dot {
            width: 10px; height: 10px; border-radius: 50%;
            display: inline-block; flex-shrink: 0; background: #ccc;
            box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
            transition: background 0.4s, box-shadow 0.4s;
        }
        .loc-dot.loc-green { background: #27ae60; box-shadow: 0 0 5px rgba(39,174,96,0.7); }
        .loc-dot.loc-yellow { background: #f39c12; box-shadow: 0 0 5px rgba(243,156,18,0.7); }
        .loc-dot.loc-red { background: #e74c3c; box-shadow: 0 0 5px rgba(231,76,60,0.6); }
        .pb-loc-warn { font-size: 11px; color: #c0392b; font-weight: 600; display: none; }
        .section.build-mode .pb-range-wrap { display: none !important; }
        .display-pb-range-wrap {
            display: flex; align-items: center; gap: 5px;
            font-size: 11px; white-space: nowrap;
        }
        .display-pb-range-wrap label { font-weight: 600; color: #a0c0e0; font-size: 11px; }
        .display-pb-range-wrap input[type="number"] {
            width: 58px; padding: 2px 5px; border: 1px solid #1a4a7c;
            border-radius: 4px; font-size: 12px; min-height: 26px;
            text-align: center; background: #0d1a30; color: #ffffff;
        }
        .display-pb-range-unit { font-size: 11px; color: #7a9abf; }
        .display-pb-loc-warn { font-size: 11px; color: #ff8a80; font-weight: 600; display: none; }
        .canvas.user-mode .section .display-pb-table { width: 100% !important; table-layout: fixed !important; word-wrap: break-word !important; }
        .canvas.user-mode .pb-table-wrap { overflow-x: auto !important; }

        /* ===== MASTER ADMIN OVERLAY ===== */
        .masteradmin-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,.6); z-index: 8000;
            align-items: center; justify-content: center;
        }
        .masteradmin-overlay.show { display: flex; }

        /* ===== ORG ADMIN OVERLAY ===== */
        .masteradmin-login-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,.7); z-index: 9500;
            align-items: center; justify-content: center;
        }
        .masteradmin-login-overlay.show { display: flex; }
        .masteradmin-login-box {
            background: #fff; border-radius: 10px; padding: 30px 35px;
            max-width: 420px; width: 90%;
            box-shadow: 0 12px 40px rgba(0,0,0,.4);
        }
        .orgadmin-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,.6); z-index: 8500;
            align-items: center; justify-content: center;
        }
        .orgadmin-overlay.show { display: flex; }
        .orgadmin-box {
            background: #fff; border-radius: 8px; padding: 25px 30px;
            max-width: 600px; width: 92%; max-height: 85vh; overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0,0,0,.3);
        }
        .orgadmin-list { display: flex; flex-direction: column; gap: 6px; max-height: 400px; overflow-y: auto; }
        .orgadmin-org-item {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 14px; background: #f5f5f5; border-radius: 6px;
            border-left: 4px solid #4caf50;
        }
        .orgadmin-org-item.paused { border-left-color: #ff9800; background: #fff8e1; }
        .orgadmin-org-id { font-weight: 600; font-size: 14px; color: #333; flex: 1; }
        .orgadmin-org-status {
            font-size: 11px; font-weight: 700; text-transform: uppercase;
            padding: 2px 8px; border-radius: 3px;
        }
        .orgadmin-org-status.active { background: #e8f5e9; color: #2e7d32; }
        .orgadmin-org-status.paused { background: #fff3e0; color: #e65100; }
        .orgadmin-toggle-btn {
            border: none; padding: 6px 14px; border-radius: 4px;
            cursor: pointer; font-size: 12px; font-weight: 600;
            min-height: 32px; color: #fff;
        }
        .orgadmin-toggle-btn.pause { background: #ff9800; }
        .orgadmin-toggle-btn.activate { background: #4caf50; }
        .orgadmin-org-meta { font-size: 10px; color: #999; }
        .orgadmin-org-storage {
            font-size: 10px; font-weight: 700; padding: 2px 8px;
            border-radius: 3px; margin-right: 6px;
        }
        .orgadmin-org-storage.cosmos { background: #e3f2fd; color: #1565c0; }
        .orgadmin-org-storage.blob   { background: #f3e5f5; color: #6a1b9a; }
        .orgadmin-storage-btn {
            border: 1px solid #1565c0; padding: 6px 10px; border-radius: 4px;
            cursor: pointer; font-size: 11px; font-weight: 600;
            min-height: 32px; background: transparent; color: #1565c0;
            margin-right: 6px;
        }
        .orgadmin-storage-btn:hover { background: #e3f2fd; }
        .orgadmin-ai-btn {
            border: 1px solid #0a7c7c; padding: 6px 10px; border-radius: 4px;
            cursor: pointer; font-size: 12px; font-weight: 600;
            min-height: 32px; background: transparent; color: #0a7c7c;
            margin-right: 6px;
        }
        .orgadmin-ai-btn:hover { background: #e0f2f1; }

        /* =========================================================
           AI ASSISTANT — Master admin config overlay
           ========================================================= */
        .ai-config-overlay {
            position: fixed; inset: 0; z-index: 9500;
            background: rgba(15,23,42,0.55);
            display: flex; align-items: center; justify-content: center;
            padding: 16px;
        }
        .ai-config-box {
            background: #fff; border-radius: 8px; padding: 24px 28px;
            max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        .ai-config-row { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
        .ai-config-row:last-child { border-bottom: none; padding-bottom: 0; }

        /* =========================================================
           AI ASSISTANT — In-app chat panel
           ========================================================= */
        .ai-chat-panel {
            position: fixed; right: 16px; bottom: 16px;
            width: 380px; max-width: 95vw; height: 560px; max-height: 80vh;
            background: #fff; border-radius: 12px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.3);
            z-index: 1800;
            display: flex; flex-direction: column;
            overflow: hidden;
            border: 1px solid #cbd5e1;
        }
        .ai-chat-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 14px; background: #0a2847; color: #fff;
            cursor: move; cursor: grab; user-select: none; touch-action: none;
        }
        .ai-chat-header:active { cursor: grabbing; }
        .ai-chat-close {
            background: transparent; border: 1px solid #1f4a78; color: #c8d4e3;
            width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
            font-size: 18px; line-height: 1;
        }
        .ai-chat-close:hover { background: #15406b; color: #fff; }
        .ai-chat-messages {
            flex: 1; overflow-y: auto; padding: 12px;
            display: flex; flex-direction: column; gap: 8px;
            background: #f8fafc;
        }
        .ai-chat-msg {
            padding: 8px 12px; border-radius: 10px; font-size: 13px;
            line-height: 1.4; max-width: 85%; word-wrap: break-word;
            white-space: pre-wrap;
        }
        .ai-chat-msg-user { align-self: flex-end; background: #2563eb; color: #fff; }
        .ai-chat-msg-assistant { align-self: flex-start; background: #fff; border: 1px solid #e5e7eb; color: #1f2937; }
        .ai-chat-msg-system { align-self: stretch; background: #eff6ff; color: #1e40af; font-style: italic; font-size: 12px; }
        .ai-chat-msg-error { align-self: stretch; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; font-size: 12px; }
        .ai-chat-msg-thinking { align-self: flex-start; background: #f1f5f9; color: #6b7280; font-style: italic; font-size: 12px; }
        .ai-chat-tool-list { align-self: flex-start; font-size: 10px; color: #6b7280; font-family: ui-monospace, monospace; padding: 2px 6px; }
        .ai-chat-input-bar {
            display: flex; align-items: flex-end; gap: 6px;
            padding: 8px; background: #fff; border-top: 1px solid #e5e7eb;
        }
        .ai-chat-input-bar textarea {
            flex: 1; resize: none; border: 1px solid #cbd5e1; border-radius: 6px;
            padding: 8px 10px; font-size: 13px; min-height: 36px; max-height: 100px;
            font-family: inherit;
        }
        .ai-chat-mic, .ai-chat-send {
            width: 36px; height: 36px; border-radius: 6px;
            border: 1px solid #cbd5e1; background: #fff; cursor: pointer;
            font-size: 16px; padding: 0;
        }
        .ai-chat-mic:hover, .ai-chat-send:hover { background: #f1f5f9; }
        .ai-chat-mic.ai-chat-mic-active {
            background: #fef2f2; border-color: #ef4444; color: #b91c1c;
            animation: ai-chat-mic-pulse 1.2s ease-in-out infinite;
        }
        @keyframes ai-chat-mic-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
            50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
        }
        @media (max-width: 640px) {
            .ai-chat-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: 75vh; }
            /* On phones the AI Assistant launcher becomes a floating action button
               so it's always reachable and clearly tappable. Display is still
               controlled by JS (only shown when AI is enabled), so we never force it. */
            /* AI + scheduler: small icon buttons that live IN the header (scroll
               away with it) instead of floating over the page. */
            .ai-hdr-btns { width: auto !important; align-self: flex-start !important; flex: 0 0 auto !important; }
            #aiAssistantBtn, #aiSchedulerBtn, #aiTrendsBtn {
                position: static !important;
                width: 84px !important;
                height: 42px !important;
                min-width: 0 !important;
                min-height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border-radius: 9px !important;
                font-size: 16px !important;
                line-height: 42px !important;
                text-align: center !important;
                flex: 0 0 auto !important;
            }
            #aiTrendsBtn { width: 168px !important; font-size: 14px !important; }
        }
        .masteradmin-box {
            background: #fff; border-radius: 8px; padding: 25px 30px;
            max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0,0,0,.3);
        }
        .masteradmin-section-list { display: flex; flex-direction: column; gap: 8px; }
        .masteradmin-section-item {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px; background: #f5f5f5; border-radius: 6px;
            cursor: pointer; user-select: none; transition: background 0.15s;
        }
        .masteradmin-section-item:hover { background: #e8e8e8; }
        .masteradmin-section-item input[type="checkbox"] {
            width: 18px; height: 18px; accent-color: #b71c1c; cursor: pointer;
        }
        .masteradmin-section-item label {
            font-size: 14px; font-weight: 500; color: #333; cursor: pointer; flex: 1;
        }
        .masteradmin-section-item .section-type-tag {
            font-size: 10px; color: #999; font-family: monospace;
        }
        .pb-prompt-box {
            background: #fff; border-radius: 8px; padding: 24px;
            min-width: 300px; max-width: 420px; width: 90%;
            box-shadow: 0 8px 32px rgba(0,0,0,.25);
        }
        .pb-prompt-box h3 { font-size: 16px; margin-bottom: 12px; color: #1a1a1a; }
        .pb-prompt-box label { font-size: 12px; font-weight: 600; color: #444; display: block; margin-bottom: 4px; }
        .pb-prompt-box input {
            width: 100%; padding: 9px 12px; font-size: 14px;
            border: 1px solid #767676; border-radius: 5px; min-height: 44px;
            margin-bottom: 14px; color: #1a1a1a;
        }
        .pb-prompt-box input:focus { outline: 2px solid #005fcc; }
        .pb-prompt-actions { display: flex; gap: 10px; justify-content: flex-end; }

        /* ===== PATIENT BOARD MOBILE ===== */
        @media (max-width: 640px) {
            /* Form fields full width, dark theme */
            .pb-form-area {
                flex-direction: column;
                align-items: stretch;
                background: rgba(255,255,255,0.06) !important;
                border: 1px solid rgba(255,255,255,0.15) !important;
            }
            .pb-form-field label {
                color: #d0d0d0 !important;
            }
            .pb-form-field input[type="number"],
            .pb-form-field select,
            .pb-form-field input[type="text"] {
                width: 100% !important;
                font-size: 16px !important;
                min-height: 48px !important;
                background: #0a2847 !important;
                border: 2px solid #1a4a7c !important;
                color: #ffffff !important;
                border-radius: 6px !important;
            }
            .pb-form-field input::placeholder { color: #7a9abf !important; }
            .pb-form-field select option { background: #0d1a30; color: #fff; }
            .pb-submit-btn {
                width: 100%;
                min-height: 48px;
                font-size: 16px;
            }
            /* Section wrap: block layout on mobile, no flex height issues */
            .pb-section-wrap {
                display: block !important;
                height: auto !important;
                min-height: 0 !important;
                flex: none !important;
                overflow: visible !important;
            }
            /* Table wrap: no overflow clipping so stacked cards show fully */
            .pb-table-wrap {
                overflow: visible !important;
                flex: none !important;
                height: auto !important;
            }
            .pb-table {
                overflow: visible !important;
            }
            /* Section itself must not constrain patient board height — :has() for modern browsers */
            .section.mobile-active:has(.pb-section-wrap),
            .section.pb-mobile-active {
                overflow: visible !important;
                height: auto !important;
            }
            .section.mobile-active:has(.pb-section-wrap) .section-content,
            .section.pb-mobile-active .section-content {
                overflow: visible !important;
                height: auto !important;
                flex: none !important;
                max-height: none !important;
            }
            /* Stack table rows as cards */
            .pb-table thead { display: none !important; }
            .pb-table,
            .pb-table tbody,
            .pb-table tr,
            .pb-table td {
                display: block !important;
                width: 100% !important;
            }
            /* Each row is a dark-themed card */
            .pb-row,
            .pb-row.neutral {
                background: #0d1a30 !important;
                border: 1px solid rgba(255,255,255,0.15) !important;
                border-radius: 10px !important;
                margin-bottom: 12px !important;
                padding: 10px 12px !important;
            }
            .pb-row.accepted {
                background: #1a3d2a !important;
                border-color: rgba(40,167,69,0.5) !important;
            }
            /* Each cell: label on top in dim text, value below */
            .pb-table td {
                padding: 5px 0 !important;
                border: none !important;
                font-size: 14px !important;
                color: #ffffff !important;
            }
            .pb-table td::before {
                content: attr(data-label);
                font-weight: 700;
                font-size: 10px;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: #7a9abf;
                display: block;
                margin-bottom: 2px;
            }
            /* Expiry text */
            .pb-expires { color: #7a9abf !important; font-size: 10px; }
            /* Accept / Decline buttons — full width, large touch targets */
            .pb-action-btn {
                min-height: 48px !important;
                font-size: 15px !important;
                flex: 1 !important;
                width: 100% !important;
            }
            /* Responses under each row */
            .pb-response-entry {
                background: rgba(255,255,255,0.08) !important;
                color: #d0d0d0 !important;
                border-left-color: #4a9abf !important;
                font-size: 12px !important;
            }
            .pb-response-entry.declined { border-left-color: #5f7285 !important; }
            /* Empty state */
            .pb-empty { color: #7a9abf !important; }
            /* Prompt modal */
            .pb-prompt-box { padding: 16px; }
            .pb-prompt-box input { font-size: 16px !important; }
        }

        /* Hide patient board input form in build mode - input only in user mode */
        .section.build-mode .pb-form-area { display: none !important; }
        .section.build-mode .pb-build-placeholder { display: flex !important; }
        .section.user-mode .pb-build-placeholder { display: none !important; }
        .pb-build-placeholder {
            display: none;
            align-items: center;
            justify-content: center;
            padding: 12px;
            background: #f0f4f8;
            border: 1px dashed #aaa;
            border-radius: 6px;
            color: #666;
            font-size: 12px;
            font-style: italic;
            margin-bottom: 10px;
            text-align: center;
        }

        /* Data page patient board table */
        .display-pb-table { width: 100%; border-collapse: collapse; font-size: 0.93em; }
        .display-pb-table th {
            background: rgba(255,255,255,0.1); color: #fff;
            padding: 7px 10px; text-align: left; font-size: 0.79em;
            text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
        }
        .display-pb-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; vertical-align: top; }
        .display-pb-row.pb-accepted { background: rgba(40,167,69,0.25) !important; }
        .display-pb-action-btn {
            padding: 5px 12px; border: none; border-radius: 4px;
            font-size: 0.86em; font-weight: 600; cursor: pointer; min-height: 32px;
        }
        .display-pb-action-btn.accept { background: #0a7c7c; color: #fff; }
        .display-pb-action-btn.decline { background: #5f7285; color: #fff; }
        .display-pb-action-btn:hover { filter: brightness(.9); }
        .display-pb-action-btn:focus { outline: 3px solid #FFC107; outline-offset: 2px; }
        .display-pb-responses { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
        .display-pb-response {
            font-size: 0.79em; padding: 2px 6px; border-radius: 3px;
            background: rgba(255,255,255,0.1); color: #d0d0d0;
            border-left: 3px solid #0b6bcb;
        }
        .display-pb-response.declined { border-left-color: #5f7285; }
        .display-pb-empty { text-align: center; color: #aaa; padding: 16px; font-size: 0.93em; font-style: italic; }

        /* Hide census source dropdown in user mode */
        .user-mode .census-source-select {
            display: none !important;
        }

        .build-mode .census-source-select {
            display: block !important;
        }

        /* Hide assignment source dropdown in user mode */
        .user-mode .assignment-source-select {
            display: none !important;
        }

        .build-mode .assignment-source-select {
            display: block !important;
        }

        /* Hide census label edit in user mode */
        .user-mode .census-label-edit {
            display: none !important;
        }

        .build-mode .census-label-edit {
            display: block !important;
        }

        /* ===== ON-CALL VISIBILITY CHECKBOX ===== */
        .oncall-visible-label {
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 3px;
            color: #4a4a4a;
        }

        .oncall-visible-label.hidden {
            display: none !important;
        }

        .oncall-visible-label input[type="checkbox"] {
            width: 20px;
            height: 20px;
            min-width: 20px;
            min-height: 20px;
        }

        /* ===== PHONE CALL BUTTON ===== */
        .phone-call-btn {
            display: none;
            text-decoration: none;
            font-size: 20px;
            padding: 10px;
            -webkit-touch-callout: default;
            -webkit-user-select: none;
            cursor: pointer;
            min-width: 44px;
            min-height: 44px;
            text-align: center;
        }

        .phone-call-btn:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

        .display-phone-btn {
            display: inline;
            text-decoration: none;
            font-size: 18px;
            margin-left: 8px;
            min-width: 44px;
            min-height: 44px;
        }

        .display-phone-btn:focus {
            outline: 3px solid #FFC107;
            outline-offset: 2px;
        }

        /* ===== DATA PAGE DROPDOWN ===== */
        .data-page-dropdown {
            padding: 8px 12px;
            font-size: 14px;
            border-radius: 4px;
            border: none;
            background: #0a7c7c;
            color: #ffffff;
            cursor: pointer;
            min-height: 44px;
        }

        .data-page-dropdown:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

        .data-page-dropdown option {
            background: #0d1a30;
            color: #ffffff;
            padding: 10px;
        }

        #dataPageSelect {
            padding: 8px 12px;
            font-size: 14px;
            border-radius: 4px;
            border: none;
            background: #0a7c7c;
            color: #ffffff;
            cursor: pointer;
            min-height: 44px;
        }

        #dataPageSelect:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

        #dataPageSelect option {
            background: #0d1a30;
            color: #ffffff;
            padding: 10px;
        }

        /* ===== LOCKED SECTIONS (RBAC) ===== */
        .section-locked {
            opacity: 0.7;
        }

        .section-locked .section-header {
            background-color: #e0e0e0 !important;
        }

        .section-lock-icon {
            margin-left: 5px;
            font-size: 14px;
        }

        .section-locked input,
        .section-locked textarea,
        .section-locked select {
            cursor: not-allowed !important;
            background-color: #f0f0f0 !important;
        }

/* ===== ERROR MESSAGE ICON ===== */
#loginError::before,
#firstRunError::before,
.error-message::before {
    content: "⚠";
    position: absolute;
    left: 0;
    top: 0;
}

/* ===== HIDDEN UTILITY ===== */
.hidden {
    display: none !important;
}

        /* ===== UNIFORM GRID MODE ===== */
        .canvas.uniform-grid-mode {
            display: flex !important;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 16px;
            padding: 20px !important;
            overflow-y: auto !important;
            height: auto !important;
            min-height: 100vh !important;
            background-color: #f5f5f5 !important;
            background-image: none !important;
        }

        .canvas.uniform-grid-mode .mobile-section-nav,
        .canvas.uniform-grid-mode .mobile-section-cards {
            display: none !important;
        }

        .canvas.uniform-grid-mode .section {
            position: relative !important;
            left: auto !important;
            top: auto !important;
            width: calc(33.333% - 12px) !important;
            height: 320px !important;
            min-width: 0 !important;
            min-height: 0 !important;
            flex-shrink: 0;
            cursor: default;
            transition: box-shadow 0.2s;
            overflow: visible !important;
            border: 2px solid #767676;
            border-radius: 10px;
        }

        .canvas.uniform-grid-mode .section:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            border-color: #767676;
        }

        .canvas.uniform-grid-mode .section .section-header {
            cursor: default;
            padding: 10px 14px;
            border-radius: 8px 8px 0 0;
        }

        .canvas.uniform-grid-mode .section .section-content {
            flex: 1;
            overflow-y: auto;
            padding: 8px 10px;
        }

        .canvas.uniform-grid-mode .section .resize-handle {
            display: none !important;
        }

        .canvas.uniform-grid-mode .section.section-locked {
            opacity: 0.7;
        }

        /* Expand overlay for uniform mode */
        .uniform-expand-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.6);
            z-index: 6000;
            justify-content: center;
            align-items: center;
            padding: 30px;
        }

        .uniform-expand-overlay.show {
            display: flex;
        }

        .uniform-expand-container {
            background: #ffffff;
            border-radius: 12px;
            width: 90%;
            max-width: 900px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 12px 48px rgba(0,0,0,0.3);
            overflow: hidden;
        }

        .uniform-expand-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            background: #f5f5f5;
            border-bottom: 1px solid #767676;
            border-radius: 12px 12px 0 0;
        }

        .uniform-expand-title {
            font-weight: bold;
            font-size: 18px;
            color: #1a1a1a;
        }

        .uniform-expand-close {
            padding: 8px 18px;
            font-size: 14px;
            background: #5f7285;
            color: #ffffff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            min-height: 44px;
            min-width: 44px;
        }

        .uniform-expand-close:hover {
            background: #4a5a6a;
        }

        .uniform-expand-close:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

        .uniform-expand-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        @media (max-width: 1200px) {
            .canvas.uniform-grid-mode .section {
                width: calc(50% - 8px) !important;
            }
        }

        @media (max-width: 640px) {
            .canvas.uniform-grid-mode .section {
                width: 100% !important;
            }
            #layoutToggleBtn {
                display: none !important;
            }
        }

        /* ===== VISUALLY HIDDEN (for screen readers) ===== */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        /* ===== BUILD MODE UNIFORM GRID ===== */
        .canvas.build-uniform-grid-mode {
            display: flex !important;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 16px;
            padding: 20px !important;
            overflow-y: auto !important;
            height: auto !important;
            min-height: 100vh !important;
            background-color: #e8e8e8 !important;
            background-image: none !important;
            transform: none !important;
            width: 100% !important;
        }
        .canvas.build-uniform-grid-mode .mobile-section-nav,
        .canvas.build-uniform-grid-mode .mobile-section-cards { display: none !important; }
        .canvas.build-uniform-grid-mode .section {
            position: relative !important;
            left: auto !important;
            top: auto !important;
            width: calc(33.333% - 12px) !important;
            height: 280px !important;
            min-width: 0 !important;
            min-height: 0 !important;
            flex-shrink: 0;
            cursor: grab;
            transition: box-shadow 0.2s, transform 0.15s, opacity 0.2s;
            overflow: visible !important;
            border: 2px dashed #0a7c7c;
            border-radius: 10px;
        }
        .canvas.build-uniform-grid-mode .section:hover {
            box-shadow: 0 6px 24px rgba(0,0,0,0.18);
            border-color: #0b6bcb;
        }
        .canvas.build-uniform-grid-mode .section:focus {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }
        .canvas.build-uniform-grid-mode .section[aria-pressed="true"] {
            border: 3px solid #0b6bcb !important;
            box-shadow: 0 0 0 3px rgba(11,107,203,0.3), 0 8px 24px rgba(0,0,0,0.2);
            background-color: #f0f7ff;
        }
        .canvas.build-uniform-grid-mode .section.build-grid-dragging {
            opacity: 0.5;
            transform: scale(0.95);
            cursor: grabbing;
        }
        .canvas.build-uniform-grid-mode .section.build-grid-dragover {
            border: 3px solid #0b6bcb !important;
            box-shadow: 0 0 20px rgba(11,107,203,0.4);
            transform: scale(1.02);
        }
        .canvas.build-uniform-grid-mode .section .section-header {
            cursor: grab;
            padding: 10px 14px;
        }
        .canvas.build-uniform-grid-mode .section .section-content {
            overflow-y: auto;
            pointer-events: auto;
            opacity: 1;
        }
        .canvas.build-uniform-grid-mode .section .resize-handle { display: none !important; }
        .canvas.build-uniform-grid-mode .section .section-controls { display: none !important; }
        .build-grid-order-badge {
            display: none;
            position: absolute;
            top: 8px; right: 8px;
            background: #1a1a1a; color: #fff;
            width: 28px; height: 28px; border-radius: 50%;
            font-size: 13px; font-weight: bold;
            text-align: center; line-height: 28px;
            z-index: 10; pointer-events: none;
        }
        .canvas.build-uniform-grid-mode .build-grid-order-badge { display: block; }
        .build-grid-hint {
            display: none; width: 100%;
            text-align: center; padding: 12px 16px;
            font-size: 14px; color: #1a1a1a;
            background: #fff3cd; border-radius: 8px;
            margin-bottom: 8px; border: 2px solid #b8860b; line-height: 1.5;
        }
        .canvas.build-uniform-grid-mode .build-grid-hint { display: block; }
        .build-grid-kbd {
            display: inline-block; background: #1a1a1a; color: #fff;
            padding: 2px 8px; border-radius: 4px;
            font-size: 12px; font-family: monospace; margin: 0 2px;
        }
        @media (max-width: 1200px) {
            .canvas.build-uniform-grid-mode .section { width: calc(50% - 8px) !important; }
        }
        @media (max-width: 640px) {
            .canvas.build-uniform-grid-mode .section { width: 100% !important; }
        }
        /* ===== ONCALL NAME SUGGESTION DROPDOWN ===== */
        .oncall-suggest-wrap { position:relative; flex:1; display:flex; }
        .oncall-suggest-wrap .staff-name-input { width:100%; }
        .oncall-suggest-list {
            position:absolute; top:100%; left:0; right:0; z-index:500;
            background:#ffffff; border:1px solid #0b6bcb; border-top:none;
            border-radius:0 0 4px 4px; max-height:160px; overflow-y:auto;
            box-shadow:0 4px 8px rgba(0,0,0,0.15);
        }
        .oncall-suggest-item {
            padding:6px 10px; cursor:pointer; font-size:13px;
            display:flex; justify-content:space-between; align-items:center;
            border-bottom:1px solid #f0f0f0; color:#1a1a1a;
        }
        .oncall-suggest-item:last-child { border-bottom:none; }
        .oncall-suggest-item:hover, .oncall-suggest-item.active {
            background:#e8f0fe; color:#0b6bcb;
        }
        .oncall-suggest-name { font-weight:500; }
        .oncall-suggest-phone { font-size:11px; color:#595959; font-family:monospace; }
        .oncall-suggest-item:hover .oncall-suggest-phone,
        .oncall-suggest-item.active .oncall-suggest-phone { color:#0b6bcb; }
        .oncall-suggest-highlight { background:#fff3cd; border-radius:2px; }

        /* ===== TABLE COPY SECTION ===== */
        .tablecopy-container { width:100%; height:100%; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
        .tablecopy-paste-area {
            width:100%; min-height:56px; padding:7px; font-size:12px;
            border:2px dashed #767676; border-radius:4px; resize:none;
            font-family:monospace; background:#fafafa; color:#1a1a1a; box-sizing:border-box;
        }
        .tablecopy-paste-area:focus { border-color:#005fcc; border-style:solid; outline:none; }
        .tablecopy-build-hint { font-size:11px; color:#0a7c7c; font-weight:500; }
        .tablecopy-paste-hint { font-size:11px; color:#595959; }
        .tablecopy-table-wrap { flex:1; overflow:auto; min-height:0; }
        .tablecopy-table {
            border-collapse:collapse; width:100%; font-size:1em;
            table-layout:auto; word-break:break-word;
        }
        .tablecopy-table th, .tablecopy-table td {
            border:1px solid #767676; padding:3px 6px; text-align:left; vertical-align:top;
            min-width:40px; max-width:220px; white-space:pre-wrap;
        }
        .tablecopy-table th { background:#e8e8e8; font-weight:bold; font-size:0.95em; }
        .tablecopy-table td[contenteditable="true"] { background:#fff; cursor:text; }
        .tablecopy-table td[contenteditable="true"]:focus { outline:2px solid #005fcc; outline-offset:-2px; background:#fffde7; }
        .tablecopy-table td[contenteditable="true"]:hover { background:#f0f7ff; }
        .tablecopy-empty { color:#595959; font-style:italic; font-size:12px; padding:8px 0; margin:0; }
        .tc-searchable-bar { display:flex; align-items:center; gap:6px; padding:4px 0; }
        .tc-searchable-label { display:flex; align-items:center; gap:5px; font-size:11px; color:#0a7c7c; font-weight:600; cursor:pointer; user-select:none; }
        .tc-searchable-label input[type="checkbox"] { width:16px; height:16px; cursor:pointer; accent-color:#0a7c7c; }
        .tc-searchable-badge { display:none; font-size:10px; background:#0a7c7c; color:#fff; padding:1px 6px; border-radius:10px; }
        .tc-searchable-badge.active { display:inline; }
        /* Multi-table support */
        .tc-build-info { font-size:11px; color:#0a7c7c; font-weight:500; margin:0; }
        .tc-table-block { border:1px solid #d0d0d0; border-radius:4px; padding:6px; margin-bottom:8px; background:#fff; }
        .tc-table-titlebar { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
        .tc-table-name-input {
            flex:1; padding:3px 6px; font-size:12px; font-weight:600;
            border:1px solid #c0c0c0; border-radius:3px; background:#fafafa; color:#1a1a1a;
        }
        .tc-table-name-input:focus { border-color:#005fcc; outline:2px solid #005fcc; outline-offset:-2px; background:#fffde7; }
        .tc-table-name-input:disabled { background:transparent; color:#1a1a1a; border-color:transparent; font-weight:700; padding-left:0; }
        .tc-table-delete-btn {
            padding:3px 8px; font-size:11px; font-weight:600;
            background:#c0392b; color:#fff; border:none; border-radius:3px;
            cursor:pointer; min-height:28px; flex-shrink:0;
        }
        .tc-table-delete-btn:hover { background:#962d22; }
        .tc-table-delete-btn:focus { outline:2px solid #FFC107; outline-offset:2px; }

        /* ============================================================
           MODERN VISUAL OVERRIDES — visual only, zero functional change
           ============================================================ */

        /* --- CSS Custom Properties --- */
        :root {
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 14px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.06);
            --shadow-lg: 0 8px 28px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
            --shadow-xl: 0 20px 60px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.12);
            --radius-sm: 7px;
            --radius-md: 11px;
            --radius-lg: 14px;
        }

        /* --- Base typography --- */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
            background-color: #eaecf0;
            letter-spacing: -0.01em;
        }

        /* --- Header --- */
        .header {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #162032 100%);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            box-shadow: 0 2px 16px rgba(0,0,0,0.28);
        }

        .header-title {
            font-weight: 700;
            letter-spacing: -0.03em;
            font-size: clamp(16px, 2.2vw, 22px);
            background: linear-gradient(130deg, #ffffff 20%, #9ec4e8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* --- Mode label pill --- */
        .mode-label {
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            padding: 4px 14px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.25);
        }
        .mode-label.build {
            background: linear-gradient(135deg, #0e8a8a 0%, #0a6a6a 100%);
        }
        .mode-label.user {
            background: linear-gradient(135deg, #1877d4 0%, #0b5fb8 100%);
        }

        /* --- Toggle slider --- */
        .toggle-slider {
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.22);
        }
        .toggle-slider:before {
            box-shadow: 0 1px 5px rgba(0,0,0,0.28);
        }

        /* --- Buttons --- */
        .btn {
            border-radius: var(--radius-sm);
            font-weight: 600;
            letter-spacing: 0.01em;
            transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
            box-shadow: var(--shadow-sm);
        }
        .btn:hover {
            filter: none;
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .btn:active {
            transform: translateY(0) scale(0.98);
            box-shadow: none;
        }
        .btn-green {
            background: linear-gradient(135deg, #0e8a8a 0%, #0a6a6a 100%);
            border: 1px solid rgba(255,255,255,0.10);
        }
        .btn-blue {
            background: linear-gradient(135deg, #1877d4 0%, #0b5fb8 100%);
            border: 1px solid rgba(255,255,255,0.10);
        }
        .btn-red {
            background: linear-gradient(135deg, #6e8093 0%, #546070 100%);
            border: 1px solid rgba(255,255,255,0.10);
        }

        /* --- Build toolbar --- */
        .build-toolbar {
            background: linear-gradient(180deg, #282828 0%, #202020 100%);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            box-shadow: 0 2px 10px rgba(0,0,0,0.22);
        }

        /* --- Canvas --- */
        .canvas {
            background-color: #eaecf0;
            background-image: radial-gradient(circle, rgba(0,0,0,0.065) 1px, transparent 1px);
            background-size: 22px 22px;
        }
        .canvas.user-mode {
            background-color: #eef0f4;
            background-image: none;
        }
        .canvas.uniform-grid-mode {
            background-color: #eef0f4 !important;
        }
        .canvas.build-uniform-grid-mode {
            background-color: #e4e7ec !important;
        }

        /* --- Section cards --- */
        .section {
            background-color: #ffffff;
            border: 1px solid rgba(0,0,0,0.07);
            border-radius: var(--radius-lg) !important;
            box-shadow: var(--shadow-md);
            transition: box-shadow 0.2s ease;
        }
        .section:not(.build-mode):hover {
            box-shadow: var(--shadow-lg);
        }
        .section.build-mode {
            border: 1.5px dashed #0e8a8a !important;
        }
        .section.build-mode:hover {
            border-color: #1877d4 !important;
        }
        .section.status-yellow {
            border: 2px solid #c49a14 !important;
        }
        .section.status-red {
            border: 2px solid #5f7285 !important;
        }

        /* --- Section header --- */
        .section-header {
            background: linear-gradient(135deg, #f8f9fb 0%, #f0f3f7 100%);
            border-bottom: 1px solid rgba(0,0,0,0.06);
            border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
            padding: 10px 14px;
        }
        .section-title {
            font-weight: 700;
            letter-spacing: -0.015em;
        }
        .section-last-updated {
            color: #8494a6;
        }

        /* --- Section buttons --- */
        .section-btn {
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-sm);
            transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
        }
        .section-btn:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .section-btn.add {
            background: linear-gradient(135deg, #0e8a8a 0%, #0a6a6a 100%);
        }
        .section-btn.move {
            background: linear-gradient(135deg, #1877d4 0%, #0b5fb8 100%);
        }
        .section-btn.delete {
            background: linear-gradient(135deg, #6e8093 0%, #546070 100%);
        }

        /* --- Row delete btn --- */
        .row-delete-btn {
            background: linear-gradient(135deg, #6e8093 0%, #546070 100%);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-sm);
            transition: transform 0.15s, filter 0.15s;
        }
        .row-delete-btn:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }

        /* --- Element / Staff rows --- */
        .element-row {
            background-color: #f8f9fb;
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            transition: background-color 0.13s, border-color 0.13s;
        }
        .element-row:nth-child(even) {
            background-color: #f1f4f8;
        }
        .element-row:hover {
            background-color: #eaf1fb;
            border-color: rgba(11,107,203,0.12);
        }

        .staff-row {
            background-color: #f8f9fb;
            border-radius: var(--radius-sm);
            transition: background-color 0.13s;
        }
        .staff-row:nth-child(even) {
            background-color: #f1f4f8;
        }
        .staff-row:hover {
            background-color: #eaf1fb;
        }

        .provider-status-row {
            border-radius: var(--radius-sm);
            border: 1px solid #e5eaf0;
            transition: box-shadow 0.13s;
        }
        .provider-status-row:hover {
            box-shadow: var(--shadow-sm);
        }

        .checklist-row {
            border-radius: var(--radius-sm);
            border: 1px solid #e5eaf0;
            transition: box-shadow 0.13s;
        }
        .checklist-row:hover {
            box-shadow: var(--shadow-sm);
        }

        .other-item-row {
            background-color: #f8f9fb;
            border-radius: var(--radius-sm);
            transition: background-color 0.13s;
        }
        .other-item-row:nth-child(even) {
            background-color: #f1f4f8;
        }
        .other-item-row:hover {
            background-color: #eaf1fb;
        }

        /* --- Inputs --- */
        .element-value-input,
        .staff-name-input,
        .staff-phone-input,
        .staff-assignment-input,
        .other-item-value-input,
        .rrt-select,
        .staff-shift-select,
        .communication-textarea,
        .checklist-note-text,
        .provider-status-text {
            border-color: #cdd4de;
            border-radius: var(--radius-sm);
            transition: border-color 0.15s, box-shadow 0.15s;
            background-color: #ffffff;
        }
        .element-value-input:focus,
        .staff-name-input:focus,
        .staff-phone-input:focus,
        .staff-assignment-input:focus,
        .other-item-value-input:focus,
        .rrt-select:focus,
        .staff-shift-select:focus,
        .communication-textarea:focus,
        .checklist-note-text:focus,
        .provider-status-text:focus {
            border-color: #0b6bcb;
            box-shadow: 0 0 0 3px rgba(11,107,203,0.13);
            outline: none;
        }

        /* --- Type badges --- */
        .type-badge {
            border-radius: 20px;
            font-weight: 700;
            letter-spacing: 0.04em;
            padding: 3px 9px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.18);
        }

        /* --- Status dots --- */
        .status-dot {
            box-shadow: var(--shadow-sm);
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .status-dot:hover {
            transform: scale(1.12);
            box-shadow: var(--shadow-md);
        }
        .status-dot.green {
            background: linear-gradient(135deg, #0e8a8a 0%, #0a6060 100%);
        }
        .status-dot.yellow {
            background: linear-gradient(135deg, #c9a316 0%, #9e7c0a 100%);
        }
        .status-dot.red {
            background: linear-gradient(135deg, #6e8093 0%, #546070 100%);
        }

        /* --- Resize handle --- */
        .resize-handle {
            background: linear-gradient(135deg, transparent 50%, #b8c4d0 50%);
        }

        /* --- Census display (edit canvas) --- */
        .census-display-value {
            font-weight: 800;
            background: linear-gradient(135deg, #0e8a8a 0%, #0b6bcb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* --- Modals --- */
        .modal-content {
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            border: 1px solid rgba(255,255,255,0.9);
        }
        .modal-header {
            border-bottom: 1px solid #eef0f4;
            padding-bottom: 14px;
        }
        .modal-title {
            font-weight: 700;
            letter-spacing: -0.015em;
        }
        .modal-close {
            border-radius: var(--radius-sm);
            transition: background-color 0.13s;
        }
        .modal-close:hover {
            background-color: #f0f3f7;
        }
        .modal-footer {
            border-top: 1px solid #eef0f4;
            padding-top: 14px;
        }

        /* --- Display overlay (dark data pages) --- */
        .display-overlay {
            background: linear-gradient(270deg, #0f172a, #1e3a5f, #0f2a4a, #162032, #0f172a);
            background-size: 300% 300%;
            animation: headerShift 18s ease infinite;
        }
        .display-header {
            background: linear-gradient(135deg, #071120 0%, #0d1c34 100%);
            border-bottom: 1px solid rgba(255,255,255,0.07);
            box-shadow: 0 2px 14px rgba(0,0,0,0.4);
        }
        .display-title {
            font-weight: 700;
            letter-spacing: -0.025em;
            background: linear-gradient(130deg, #ffffff 20%, #8eb8d8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .display-canvas {
            background: transparent;
        }
        .display-section {
            background: linear-gradient(270deg, #071020, #1a4a7a, #071020);
            background-size: 200% 200%;
            animation: headerShift 24s ease infinite;
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: var(--radius-lg) !important;
            box-shadow: 0 4px 28px rgba(0,0,0,0.38);
        }
        .display-section-header {
            background: linear-gradient(135deg, #0c1e3c 0%, #091628 100%);
            border-bottom: 1px solid rgba(255,255,255,0.07);
            border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
            letter-spacing: 0.01em;
        }
        .display-close-btn {
            background: linear-gradient(135deg, #6e8093 0%, #546070 100%);
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: var(--shadow-sm);
            transition: transform 0.15s, filter 0.15s;
        }
        .display-close-btn:hover {
            filter: brightness(1.15);
            transform: translateY(-1px);
        }
        .display-page-btn {
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, #0f2b52 0%, #0a1e3a 100%);
            border: 1px solid rgba(255,255,255,0.09);
            box-shadow: var(--shadow-sm);
            transition: transform 0.15s, background 0.15s;
        }
        .display-page-btn:hover {
            background: linear-gradient(135deg, #1a3d6e 0%, #0f2b52 100%);
            transform: translateY(-1px);
        }
        .display-census-value {
            font-weight: 800;
            background: linear-gradient(135deg, #4dd0e1 0%, #0b6bcb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .display-provider-row {
            border-radius: var(--radius-sm);
        }
        .display-checklist-row {
            border-radius: var(--radius-sm);
        }
        .display-rrt-header {
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        }

        /* --- Provider / Checklist toggles --- */
        .provider-toggle-btn.in.selected {
            background: linear-gradient(135deg, #0e8a8a 0%, #0a6a6a 100%);
        }
        .provider-toggle-btn.out.selected {
            background: linear-gradient(135deg, #6e8093 0%, #546070 100%);
        }
        .checklist-toggle-btn.done.selected {
            background: linear-gradient(135deg, #2e7d32 0%, #1f5722 100%);
        }
        .checklist-toggle-btn.notdone.selected {
            background: linear-gradient(135deg, #c62828 0%, #9e1e1e 100%);
        }

        /* --- Patient Board --- */
        .pb-form-area {
            background: linear-gradient(135deg, #f8f9fb 0%, #f0f4f9 100%);
            border: 1px solid #dde3ec;
            border-radius: var(--radius-md);
        }
        .pb-submit-btn {
            background: linear-gradient(135deg, #0e8a8a 0%, #0a6a6a 100%);
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.10);
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .pb-submit-btn:hover {
            filter: none;
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .pb-table th {
            background: linear-gradient(135deg, #1e2a3a 0%, #2d3748 100%);
            letter-spacing: 0.055em;
        }
        .pb-table td {
            border-bottom-color: #f1f4f8;
        }
        .pb-row.accepted {
            background: #1a3d2a !important;
        }
        .pb-action-btn.accept {
            background: linear-gradient(135deg, #0e8a8a 0%, #0a6a6a 100%);
            border-radius: var(--radius-sm);
        }
        .pb-action-btn.decline {
            background: linear-gradient(135deg, #6e8093 0%, #546070 100%);
            border-radius: var(--radius-sm);
        }
        .pb-prompt-box {
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
        }
        .pb-prompt-box h3 {
            font-weight: 700;
            letter-spacing: -0.015em;
        }

        /* --- Uniform expand overlay --- */
        .uniform-expand-container {
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
        }
        .uniform-expand-header {
            background: linear-gradient(135deg, #f8f9fb 0%, #f0f3f7 100%);
            border-bottom: 1px solid rgba(0,0,0,0.06);
            border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
        }
        .uniform-expand-title {
            font-weight: 700;
            letter-spacing: -0.015em;
        }
        .uniform-expand-close {
            background: linear-gradient(135deg, #6e8093 0%, #546070 100%);
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.10);
            transition: transform 0.15s, filter 0.15s;
        }
        .uniform-expand-close:hover {
            filter: brightness(1.12);
            transform: translateY(-1px);
        }

        /* --- Data page select/dropdown --- */
        .data-page-dropdown,
        #dataPageSelect {
            background: linear-gradient(135deg, #0e8a8a 0%, #0a6a6a 100%);
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: var(--shadow-sm);
            transition: filter 0.15s, box-shadow 0.15s;
        }
        .data-page-dropdown:hover,
        #dataPageSelect:hover {
            filter: brightness(1.1);
            box-shadow: var(--shadow-md);
        }

        /* --- Phone directory items --- */
        .phonedirectory-item {
            border-radius: var(--radius-sm);
            transition: background-color 0.12s;
        }
        .phonedirectory-item:hover {
            background-color: #f0f4f9;
        }

        /* --- Autocomplete suggestion list --- */
        .oncall-suggest-list {
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
            box-shadow: var(--shadow-md);
        }
        .oncall-suggest-item:hover,
        .oncall-suggest-item.active {
            background: #eef4ff;
        }

        /* --- Mobile section cards --- */
        .mobile-section-card {
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            transition: transform 0.13s, box-shadow 0.13s;
        }
        .mobile-section-card:active {
            transform: scale(0.97);
        }

        /* --- Table Copy --- */
        .tablecopy-paste-area {
            border-color: #cdd4de;
            border-radius: var(--radius-sm);
            background: #fafbfc;
        }
        .tablecopy-table th {
            background: #f0f3f7;
        }

        /* --- Build grid hint --- */
        .build-grid-hint {
            border-radius: var(--radius-md);
        }

        /* ============================================================
           WOW FACTOR ENHANCEMENTS — CSS only, zero functional change
           ============================================================ */

        /* 1. ANIMATED HEADER GRADIENT */
        @keyframes headerShift {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .header {
            background: linear-gradient(270deg, #0f172a, #1e3a5f, #0f2a4a, #162032, #0f172a);
            background-size: 300% 300%;
            animation: headerShift 12s ease infinite;
        }

        /* 2. GLASSMORPHISM SECTION CARDS — desktop only */
        @media (min-width: 641px) {
            .canvas.user-mode .section,
            .canvas.uniform-grid-mode .section {
                background: rgba(255, 255, 255, 0.72) !important;
                backdrop-filter: blur(18px) saturate(160%);
                -webkit-backdrop-filter: blur(18px) saturate(160%);
                border: 1px solid rgba(255, 255, 255, 0.55) !important;
                box-shadow:
                    0 4px 24px rgba(0,0,0,0.08),
                    0 1px 3px rgba(0,0,0,0.05),
                    inset 0 1px 0 rgba(255,255,255,0.9) !important;
            }
            .canvas.user-mode .section:hover,
            .canvas.uniform-grid-mode .section:hover {
                background: rgba(255, 255, 255, 0.85) !important;
                box-shadow:
                    0 10px 40px rgba(0,0,0,0.13),
                    0 2px 6px rgba(0,0,0,0.07),
                    inset 0 1px 0 rgba(255,255,255,0.95) !important;
                transform: translateY(-2px);
                transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
            }
            /* Glass header inside sections */
            .canvas.user-mode .section .section-header,
            .canvas.uniform-grid-mode .section .section-header {
                background: rgba(248, 250, 253, 0.85) !important;
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border-bottom: 1px solid rgba(0,0,0,0.05) !important;
            }
        }

        /* 3. SECTION TYPE COLOR ACCENT BARS — desktop only */
        @media (min-width: 641px) {
            .section[data-type="elements"]         { border-top: 3px solid #7b1fa2 !important; }
            .section[data-type="staff"]             { border-top: 3px solid #0b6bcb !important; }
            .section[data-type="oncall"]            { border-top: 3px solid #c56000 !important; }
            .section[data-type="communication"]     { border-top: 3px solid #0a7c7c !important; }
            .section[data-type="rrt"]               { border-top: 3px solid #5f7285 !important; }
            .section[data-type="census"]            { border-top: 3px solid #ad1457 !important; }
            .section[data-type="assignmentdisplay"] { border-top: 3px solid #512da8 !important; }
            .section[data-type="otheritems"]        { border-top: 3px solid #00796b !important; }
            .section[data-type="providerstatus"]    { border-top: 3px solid #5c6bc0 !important; }
            .section[data-type="checklist"]         { border-top: 3px solid #7cb342 !important; }
            .section[data-type="phonedirectory"]    { border-top: 3px solid #ff7043 !important; }
            .section[data-type="patientboard"]      { border-top: 3px solid #7b1fa2 !important; }
            .section[data-type="tablecopy"]         { border-top: 3px solid #00897b !important; }
            /* keep the top corners rounded where the accent bar sits */
            .section[data-type] {
                border-radius: var(--radius-lg) !important;
                overflow: hidden;
            }
            /* Build mode — keep dashed border, accent color on top only */
            .section.build-mode[data-type] {
                border-left: 1.5px dashed #0e8a8a !important;
                border-right: 1.5px dashed #0e8a8a !important;
                border-bottom: 1.5px dashed #0e8a8a !important;
            }
        }

        /* 4. CUSTOM STYLED SCROLLBARS */
        .section-content::-webkit-scrollbar,
        .display-section-content::-webkit-scrollbar,
        .modal-body::-webkit-scrollbar,
        .uniform-expand-body::-webkit-scrollbar,
        .pb-table-wrap::-webkit-scrollbar,
        .tablecopy-table-wrap::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        .section-content::-webkit-scrollbar-track,
        .display-section-content::-webkit-scrollbar-track,
        .modal-body::-webkit-scrollbar-track,
        .uniform-expand-body::-webkit-scrollbar-track,
        .pb-table-wrap::-webkit-scrollbar-track,
        .tablecopy-table-wrap::-webkit-scrollbar-track {
            background: transparent;
        }
        .section-content::-webkit-scrollbar-thumb,
        .modal-body::-webkit-scrollbar-thumb,
        .uniform-expand-body::-webkit-scrollbar-thumb,
        .pb-table-wrap::-webkit-scrollbar-thumb,
        .tablecopy-table-wrap::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.18);
            border-radius: 10px;
        }
        .section-content::-webkit-scrollbar-thumb:hover,
        .modal-body::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.30);
        }
        .display-section-content::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.18);
            border-radius: 10px;
        }
        .display-section-content::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.30);
        }

        /* 5. SECTION FADE-IN ENTRANCE ANIMATION */
        @keyframes sectionFadeUp {
            from {
                opacity: 0;
                transform: translateY(14px) scale(0.985);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .section {
            animation: sectionFadeUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        /* Stagger for uniform grid */
        .canvas.uniform-grid-mode .section:nth-child(1)  { animation-delay: 0.04s; }
        .canvas.uniform-grid-mode .section:nth-child(2)  { animation-delay: 0.08s; }
        .canvas.uniform-grid-mode .section:nth-child(3)  { animation-delay: 0.12s; }
        .canvas.uniform-grid-mode .section:nth-child(4)  { animation-delay: 0.16s; }
        .canvas.uniform-grid-mode .section:nth-child(5)  { animation-delay: 0.20s; }
        .canvas.uniform-grid-mode .section:nth-child(6)  { animation-delay: 0.24s; }
        .canvas.uniform-grid-mode .section:nth-child(7)  { animation-delay: 0.28s; }
        .canvas.uniform-grid-mode .section:nth-child(8)  { animation-delay: 0.32s; }
        .canvas.uniform-grid-mode .section:nth-child(9)  { animation-delay: 0.36s; }
        .canvas.uniform-grid-mode .section:nth-child(10) { animation-delay: 0.40s; }
        .canvas.uniform-grid-mode .section:nth-child(11) { animation-delay: 0.44s; }
        .canvas.uniform-grid-mode .section:nth-child(12) { animation-delay: 0.48s; }

        /* 6. STATUS DOT PULSE GLOW */
        @keyframes pulseYellow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(201,163,22,0.55), var(--shadow-sm); }
            50%       { box-shadow: 0 0 0 7px rgba(201,163,22,0), var(--shadow-sm); }
        }
        @keyframes pulseRed {
            0%, 100% { box-shadow: 0 0 0 0 rgba(95,114,133,0.55), var(--shadow-sm); }
            50%       { box-shadow: 0 0 0 7px rgba(95,114,133,0), var(--shadow-sm); }
        }
        .status-dot.yellow[aria-checked="true"],
        .status-dot.yellow.selected {
            animation: pulseYellow 2s ease-in-out infinite;
        }
        .status-dot.red[aria-checked="true"],
        .status-dot.red.selected {
            animation: pulseRed 2s ease-in-out infinite;
        }
        /* Section border pulse when in alert state */
        @keyframes borderPulseYellow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(201,163,22,0.35), var(--shadow-md); }
            50%       { box-shadow: 0 0 18px 4px rgba(201,163,22,0.18), var(--shadow-md); }
        }
        @keyframes borderPulseRed {
            0%, 100% { box-shadow: 0 0 0 0 rgba(95,114,133,0.35), var(--shadow-md); }
            50%       { box-shadow: 0 0 18px 4px rgba(95,114,133,0.18), var(--shadow-md); }
        }
        .section.status-yellow {
            animation: sectionFadeUp 0.38s cubic-bezier(0.22,1,0.36,1) both,
                       borderPulseYellow 2.5s ease-in-out infinite;
        }
        .section.status-red {
            animation: sectionFadeUp 0.38s cubic-bezier(0.22,1,0.36,1) both,
                       borderPulseRed 2.5s ease-in-out infinite;
        }

        /* 7. CENSUS NUMBER GLOW */
        .census-display-value {
            font-weight: 800;
            background: linear-gradient(135deg, #0e8a8a 0%, #0b6bcb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 18px rgba(11,107,203,0.28));
        }
        .display-census-value {
            font-weight: 800;
            background: linear-gradient(135deg, #4dd0e1 0%, #1e90ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 22px rgba(77,208,225,0.55));
        }
        /* Subtle pulse on the census glow */
        @keyframes censusGlow {
            0%, 100% { filter: drop-shadow(0 0 22px rgba(77,208,225,0.55)); }
            50%       { filter: drop-shadow(0 0 36px rgba(77,208,225,0.80)); }
        }
        .display-census-value {
            animation: censusGlow 3s ease-in-out infinite;
        }

        /* BONUS: Canvas background upgrade — subtle animated gradient mesh */
        @keyframes canvasShift {
            0%   { background-position: 0% 0%, 22px 22px; }
            100% { background-position: 440px 440px, calc(22px + 440px) calc(22px + 440px); }
        }
        .canvas:not(.build-mode-canvas) {
            background-color: #e8edf4;
            background-image: radial-gradient(circle, rgba(11,107,203,0.07) 1px, transparent 1px);
            background-size: 22px 22px;
            animation: canvasShift 40s linear infinite;
        }

        /* BONUS: Modal entrance animation */
        @keyframes modalPop {
            from { opacity: 0; transform: scale(0.94) translateY(10px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }
        .modal-overlay.show .modal-content,
        .uniform-expand-overlay.show .uniform-expand-container {
            animation: modalPop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        /* BONUS: Button shimmer on hover */
        .btn {
            position: relative;
            overflow: hidden;
        }
        .btn::after {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
            transform: skewX(-20deg);
            transition: left 0.45s ease;
            pointer-events: none;
        }
        .btn:hover::after {
            left: 160%;
        }

        /* ===== TRENDS OVERLAY (desktop only) ===== */
        #trendsOverlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(270deg, #1a2535, #2a3d55, #1e3048, #243848, #1a2535);
            background-size: 300% 300%;
            animation: headerShift 20s ease infinite;
            z-index: 2000;
            flex-direction: column;
            overflow: hidden;
            max-width: 100vw;
            box-sizing: border-box;
        }
        #trendsOverlay.show { display: flex; }

        .trends-header {
            background: #0f1a28;
            color: #fff;
            padding: 10px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
            border-bottom: 2px solid #3a5a7a;
            flex-wrap: wrap;
        }
        .trends-header h2 {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
            white-space: nowrap;
        }
        .trends-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            flex: 1;
        }
        .trends-date-label {
            font-size: 12px;
            color: #8aa8c8;
            white-space: nowrap;
        }
        .trends-date-input {
            padding: 5px 9px;
            font-size: 13px;
            border: 1px solid #4a6a8a;
            border-radius: 4px;
            background: #1a2a3a;
            color: #d0dce8;
            min-height: 34px;
        }
        .trends-date-input:focus { border-color: #6a9aca; outline: none; }
        .trends-chart-toggle {
            display: flex;
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid #4a6a8a;
        }
        .trends-chart-toggle button {
            padding: 5px 13px;
            font-size: 12px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            background: #1a2a3a;
            color: #90b8d8;
            min-height: 34px;
            transition: background 0.15s, color 0.15s;
        }
        .trends-chart-toggle button.active {
            background: #3a6a9a;
            color: #fff;
        }
        .trends-chart-toggle button:focus { outline: 2px solid #005fcc; outline-offset: -2px; }
        .trends-load-btn {
            padding: 5px 14px;
            font-size: 13px;
            font-weight: 600;
            border: none;
            border-radius: 4px;
            background: #0a7c7c;
            color: #fff;
            cursor: pointer;
            min-height: 34px;
        }
        .trends-load-btn:hover { filter: brightness(1.1); }
        .trends-load-btn:focus { outline: 3px solid #005fcc; outline-offset: 2px; }
        .trends-close-btn {
            padding: 5px 13px;
            font-size: 13px;
            font-weight: 600;
            border: none;
            border-radius: 4px;
            background: #5f7285;
            color: #fff;
            cursor: pointer;
            min-height: 34px;
            margin-left: auto;
        }
        .trends-close-btn:hover { filter: brightness(1.1); }
        .trends-close-btn:focus { outline: 3px solid #005fcc; outline-offset: 2px; }

        .trends-body {
            display: flex;
            flex: 1;
            overflow: hidden;
            min-height: 0;
        }

        /* Sidebar element picker */
        .trends-sidebar {
            width: 210px;
            min-width: 170px;
            background: rgba(12, 20, 35, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-right: 1px solid rgba(255,255,255,0.12);
            overflow-y: auto;
            padding: 8px 0 16px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .trends-sidebar-hd {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #6a8aa8;
            padding: 4px 12px 6px;
        }
        .trends-sel-btns {
            display: flex;
            gap: 5px;
            padding: 0 12px 8px;
            border-bottom: 1px solid #2a4a5a;
        }
        .trends-sel-btn {
            font-size: 10px;
            padding: 2px 7px;
            border: 1px solid #4a6a8a;
            border-radius: 3px;
            background: #1a2a3a;
            color: #90b8d8;
            cursor: pointer;
        }
        .trends-sel-btn:hover { background: #3a6a9a; color: #fff; border-color: #3a6a9a; }
        .trends-section-group { margin-top: 6px; }
        .trends-section-lbl {
            font-size: 10px;
            font-weight: 700;
            color: #4dc9ef;
            padding: 5px 12px 2px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .trends-elem-row {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 3px 12px 3px 20px;
            cursor: pointer;
        }
        .trends-elem-row:hover { background: #1a2e42; }
        .trends-elem-row input[type="checkbox"] {
            width: 14px; height: 14px;
            cursor: pointer;
            accent-color: #0b6bcb;
            flex-shrink: 0;
        }
        .trends-elem-row label {
            font-size: 12px;
            color: #c0dae8;
            cursor: pointer;
            flex: 1;
        }

        /* Charts area */
        .trends-charts-area {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 14px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 12px;
            min-width: 0;
            background: transparent;
            box-sizing: border-box;
        }
        .trends-chart-card {
            background: rgba(15, 25, 40, 0.9);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border-radius: 8px;
            border: 1px solid rgba(100, 140, 180, 0.25);
            padding: 10px 12px 12px;
            width: calc(33.33% - 9px);
            min-width: 0;
            max-width: 100%;
            flex-grow: 1;
            flex-shrink: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
            box-sizing: border-box;
        }
        .trends-card-title {
            font-size: 12px;
            font-weight: 700;
            color: #b0d0f0;
        }
        .trends-card-section {
            font-size: 10px;
            color: #6a8aa8;
        }
        .trends-canvas-wrap {
            position: relative;
            height: 130px;
        }
        .trends-no-data {
            color: #6a8aa8;
            font-size: 12px;
            font-style: italic;
            text-align: center;
            padding: 40px 0;
        }
        .trends-status {
            background: #0f1a28;
            color: #6a8aa8;
            font-size: 11px;
            padding: 4px 16px;
            flex-shrink: 0;
            border-top: 1px solid #3a5a7a;
        }

        /* ===== TRENDS DETAIL OVERLAY ===== */
        #trendsDetailOverlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.82);
            z-index: 7000;
            align-items: center;
            justify-content: center;
        }
        #trendsDetailOverlay.show { display: flex; }

        .trends-detail-box {
            background: #1a2a3a;
            border: 1px solid #3a5a7a;
            border-radius: 10px;
            width: 88vw;
            max-width: 1100px;
            height: 80vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 8px 40px rgba(0,0,0,0.7);
        }

        .trends-detail-header {
            background: rgba(10, 18, 30, 0.9);
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid #3a5a7a;
            flex-shrink: 0;
            flex-wrap: wrap;
        }

        .trends-detail-title {
            font-size: 15px;
            font-weight: 700;
            color: #b0d0f0;
            flex: 1;
        }

        .trends-detail-subtitle {
            font-size: 11px;
            color: #6a8aa8;
        }

        .trends-zoom-group {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .trends-zoom-label {
            font-size: 11px;
            color: #8aa8c8;
            white-space: nowrap;
        }

        .trends-zoom-btn {
            width: 32px;
            height: 32px;
            border: 1px solid #4a6a8a;
            border-radius: 4px;
            background: #1a2a3a;
            color: #c0d8e8;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .trends-zoom-btn:hover { background: #3a6a9a; border-color: #3a6a9a; }
        .trends-zoom-btn:focus { outline: 2px solid #005fcc; }
        .trends-zoom-btn:disabled { opacity: 0.35; cursor: default; }

        .trends-resolution-label {
            font-size: 12px;
            font-weight: 700;
            color: #4dc9ef;
            min-width: 60px;
            text-align: center;
        }

        .trends-detail-print-btn {
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 600;
            border: none;
            border-radius: 4px;
            background: #0a7c7c;
            color: #fff;
            cursor: pointer;
            min-height: 32px;
        }
        .trends-detail-print-btn:hover { filter: brightness(1.1); }
        .trends-detail-print-btn:focus { outline: 2px solid #005fcc; }

        .trends-detail-close-btn {
            padding: 5px 11px;
            font-size: 13px;
            font-weight: 700;
            border: none;
            border-radius: 4px;
            background: #5f7285;
            color: #fff;
            cursor: pointer;
            min-height: 32px;
        }
        .trends-detail-close-btn:hover { filter: brightness(1.1); }
        .trends-detail-close-btn:focus { outline: 2px solid #005fcc; }

        .trends-detail-canvas-wrap {
            flex: 1;
            padding: 16px;
            position: relative;
            min-height: 0;
        }

        /* Print styles for detail overlay */
        @media print {
            body > * { display: none !important; }
            #trendsDetailOverlay {
                display: flex !important;
                position: static !important;
                background: #fff !important;
                width: 100% !important;
                height: auto !important;
            }
            .trends-detail-box {
                width: 100% !important;
                height: auto !important;
                border: none !important;
                box-shadow: none !important;
                background: #fff !important;
            }
            .trends-detail-header {
                background: #fff !important;
                border-bottom: 1px solid #ccc !important;
            }
            .trends-detail-title,
            .trends-detail-subtitle,
            .trends-zoom-label,
            .trends-resolution-label { color: #000 !important; }
            .trends-detail-print-btn,
            .trends-detail-close-btn,
            .trends-zoom-btn,
            .trends-zoom-group { display: none !important; }
            .trends-detail-canvas-wrap {
                height: 70vh !important;
                padding: 20px !important;
            }
        }

        /* Help button - mobile: fixed top-right corner */
        #displayCanvas {
            transition: opacity 0.5s ease;
        }

        #mobileTrendsBar {
            display: none;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 12px 14px;
            gap: 12px;
            background: rgba(10,18,30,0.95);
            border-top: 1px solid rgba(100,140,180,0.2);
            flex-shrink: 0;
            flex-direction: column;
        }
        .mobile-trend-card {
            flex: 0 0 auto;
            width: 100%;
            background: rgba(15,25,40,0.9);
            border: 1px solid rgba(100,140,180,0.25);
            border-radius: 8px;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .mobile-trend-card-title {
            font-size: 12px;
            font-weight: 700;
            color: #b0d0f0;
        }
        .mobile-trend-card-section {
            font-size: 10px;
            color: #6a8aa8;
        }
        .mobile-trend-canvas-wrap {
            position: relative;
            height: 110px;
        }
        @media (max-width: 640px) {
            #helpBtn {
                position: fixed !important;
                top: 8px;
                right: 8px;
                z-index: 1001;
                width: 32px !important;
                height: 32px !important;
                padding: 0 !important;
                font-size: 15px !important;
                min-height: 32px !important;
                display: flex !important;
                align-items: center;
                justify-content: center;
                background: rgba(0,0,0,0.4) !important;
                border: none !important;
                border-radius: 50% !important;
            }
        }

        /* ===== SPLASH / LOGIN SCREEN — hospital ops command center =====
           z-index 9000 keeps it above the app (header=1000, in-app overlays max 7000)
           but BELOW the login modal (9999), so the modal floats over it cleanly. */
        .splash-screen {
            position: fixed;
            inset: 0;
            z-index: 9000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(ellipse at center, #0f172a 0%, #020617 70%),
                #020617;
            overflow: hidden;
            opacity: 1;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }

        .splash-screen.splash-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Faint blueprint / dashboard grid backdrop */
        .splash-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(to right, rgba(96, 165, 250, 0.045) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(96, 165, 250, 0.045) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
            pointer-events: none;
        }

        /* Center content */
        .splash-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 40px 30px;
            max-width: 90vw;
            color: #f8fafc;
            animation: splashContentIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        @keyframes splashContentIn {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Dial wrapper (anchors the LIVE badge) */
        .splash-dial-wrap {
            position: relative;
            display: inline-block;
            margin: 0 auto 36px;
        }

        .splash-dial {
            display: block;
            width: clamp(180px, 28vw, 230px);
            height: auto;
            filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.25));
        }

        /* Rotating radar sweep — 12s per full revolution, calm */
        .splash-sweep {
            transform-origin: 120px 120px;
            animation: splashSweep 12s linear infinite;
        }

        @keyframes splashSweep {
            to { transform: rotate(360deg); }
        }

        /* Pulsing department nodes around the perimeter */
        .splash-node {
            transform-origin: center;
            transform-box: fill-box;
            filter: drop-shadow(0 0 4px currentColor);
            animation: splashNodePulse 3s ease-in-out infinite;
        }
        .splash-node.node-1 { animation-delay: 0s;    }
        .splash-node.node-2 { animation-delay: 0.6s;  }
        .splash-node.node-3 { animation-delay: 1.2s;  }
        .splash-node.node-4 { animation-delay: 1.8s;  }
        .splash-node.node-5 { animation-delay: 2.4s;  }

        @keyframes splashNodePulse {
            0%, 100% { opacity: 0.3; }
            50%      { opacity: 1; }
        }

        /* LIVE badge tagged to the dial */
        .splash-live {
            position: absolute;
            top: 4px;
            right: -4px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px 4px 8px;
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.45);
            border-radius: 12px;
            font-size: 10px;
            font-weight: 700;
            color: #fca5a5;
            letter-spacing: 1.8px;
            font-family: 'Segoe UI', system-ui, sans-serif;
            backdrop-filter: blur(8px);
        }

        .splash-live-dot {
            width: 6px;
            height: 6px;
            background: #ef4444;
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
            animation: splashLivePulse 1.5s ease-in-out infinite;
        }

        @keyframes splashLivePulse {
            0%, 100% { opacity: 0.55; transform: scale(1);   }
            50%      { opacity: 1;    transform: scale(1.25); }
        }

        .splash-title {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            font-size: clamp(30px, 5vw, 44px);
            font-weight: 600;
            color: #f8fafc;
            letter-spacing: -0.5px;
            margin: 0 0 10px 0;
            line-height: 1.1;
        }

        .splash-subtitle {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            font-size: clamp(13px, 1.6vw, 15px);
            color: #94a3b8;
            font-weight: 400;
            margin: 0 0 36px 0;
            letter-spacing: 0.4px;
        }

        .splash-subtitle .dot-sep {
            color: #475569;
            margin: 0 8px;
        }

        .splash-signin-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 34px;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            font-size: 15px;
            font-weight: 600;
            color: #ffffff;
            background: #2563eb;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            min-height: 48px;
            letter-spacing: 0.3px;
            box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35), 0 0 0 1px rgba(96, 165, 250, 0.15);
            transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        .splash-signin-btn:hover {
            background: #1d4ed8;
            transform: translateY(-1px);
            box-shadow: 0 6px 22px rgba(37, 99, 235, 0.5), 0 0 0 1px rgba(96, 165, 250, 0.25);
        }

        .splash-signin-btn:active {
            transform: translateY(0);
        }

        .splash-signin-btn:focus-visible {
            outline: 3px solid #60a5fa;
            outline-offset: 3px;
        }

        .splash-signin-btn svg {
            transition: transform 0.2s ease;
        }

        .splash-signin-btn:hover svg {
            transform: translateX(3px);
        }

        .splash-footer {
            position: absolute;
            bottom: 24px;
            left: 0;
            right: 0;
            text-align: center;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            color: #475569;
            font-size: 12px;
            letter-spacing: 0.5px;
            z-index: 2;
            padding: 0 16px;
        }

        /* Respect reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .splash-sweep,
            .splash-node,
            .splash-live-dot { animation: none !important; }
            .splash-sweep   { transform: rotate(45deg); }
            .splash-node    { opacity: 0.8; }
        }

        /* ===================== TICKETING VERTICAL ===================== */
        /* Build vs User mode visibility (the section element carries these classes) */
        .section.build-mode .tk-input-only { display: none; }
        .section.user-mode  .tk-build-only { display: none; }

        /* ---- Intake form (shared: canvas + data page) ---- */
        .tk-form { display: flex; flex-direction: column; gap: 10px; }
        .tk-intro { font-size: 13px; color: inherit; margin: 0 0 4px 0; }
        .tk-field { display: flex; flex-direction: column; gap: 4px; }
        .tk-field-label { font-size: 12px; font-weight: 600; color: inherit; }
        .tk-req { color: #c62828; }
        .tk-field-control {
            padding: 8px 10px; font-size: 14px; border: 1px solid #767676;
            border-radius: 6px; background: #fff; color: #1a1a1a; min-height: 40px; width: 100%;
            box-sizing: border-box;
        }
        textarea.tk-field-control { min-height: 64px; resize: vertical; }
        .tk-yesno { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: inherit; }
        .tk-yesno input { width: 20px; height: 20px; }
        .tk-form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
        .tk-submit-btn {
            padding: 9px 18px; font-size: 14px; font-weight: 600; color: #fff;
            background: #2563eb; border: none; border-radius: 6px; cursor: pointer; min-height: 42px;
        }
        .tk-submit-btn:hover { background: #1d4ed8; }
        .tk-attach-btn {
            padding: 8px 12px; font-size: 13px; background: #eef2f7; color: #333;
            border: 1px solid #c3ccd6; border-radius: 6px; cursor: pointer; min-height: 40px;
        }
        .tk-form-empty { font-size: 13px; color: #6b7280; font-style: italic; margin: 6px 0; }
        .tk-pending { display: flex; gap: 8px; flex-wrap: wrap; }
        .tk-pending-thumb { position: relative; display: inline-block; }
        .tk-pending-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1px solid #c3ccd6; }
        .tk-pending-x {
            position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
            border: none; background: #c62828; color: #fff; cursor: pointer; line-height: 1; font-size: 13px;
        }

        /* ---- Build-mode field builder ---- */
        .tk-builder { display: flex; flex-direction: column; gap: 10px; }
        .tk-build-hint, .tk-build-note { font-size: 12px; color: #555; margin: 0; }
        .tk-build-note { font-style: italic; color: #777; }
        .tk-build-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: #444; }
        .tk-build-field input, .tk-build-field select {
            padding: 7px 9px; font-size: 13px; border: 1px solid #767676; border-radius: 6px; min-height: 38px; font-weight: 400;
        }
        .tk-fields { display: flex; flex-direction: column; gap: 8px; }
        .tk-field-row {
            display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
            padding: 8px; border: 1px solid #dde3ea; border-radius: 8px; background: #f7f9fc;
        }
        .tk-fld-label { flex: 1 1 160px; padding: 6px 8px; font-size: 13px; border: 1px solid #767676; border-radius: 5px; min-height: 36px; }
        .tk-fld-type { padding: 6px 8px; font-size: 13px; border: 1px solid #767676; border-radius: 5px; min-height: 36px; }
        .tk-fld-req { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #444; }
        .tk-fld-opts { flex: 1 1 100%; padding: 6px 8px; font-size: 12px; border: 1px solid #767676; border-radius: 5px; min-height: 48px; resize: vertical; }
        .tk-fld-btns { display: flex; gap: 4px; }
        .tk-fld-move, .tk-fld-del {
            width: 32px; height: 32px; border: 1px solid #c3ccd6; background: #fff; border-radius: 5px; cursor: pointer; font-size: 14px;
        }
        .tk-fld-del { color: #c62828; border-color: #e3a3a3; }
        .tk-addfield-btn {
            align-self: flex-start; padding: 8px 14px; font-size: 13px; font-weight: 600;
            background: #2e7d32; color: #fff; border: none; border-radius: 6px; cursor: pointer; min-height: 40px;
        }

        /* ---- Queue board ---- */
        .tk-queue-config { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e3e8ee; }
        .tk-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
        .tk-search { flex: 1 1 140px; padding: 7px 10px; font-size: 13px; border: 1px solid #767676; border-radius: 6px; min-height: 38px; }
        .tk-filter { padding: 7px 8px; font-size: 13px; border: 1px solid #767676; border-radius: 6px; min-height: 38px; }
        .tk-iconbtn {
            width: 38px; height: 38px; border: 1px solid #c3ccd6; background: #fff; border-radius: 6px; cursor: pointer; font-size: 16px;
        }
        .tk-stats-btn { background: #eef2f7; }
        .tk-queue-body { display: flex; flex-direction: column; gap: 10px; }

        .tk-card {
            background: #ffffff; border: 1px solid #d7dee6; border-radius: 10px; padding: 10px 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06); color: #1a1a1a;
        }
        .tk-card-closed { opacity: 0.72; }
        .tk-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .tk-card-num { font-weight: 700; font-size: 14px; }
        .tk-pill { color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
        .tk-age { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: #444; }
        .tk-age-warn { background: #fff3e0; color: #b25e00; }
        .tk-age-alert { background: #fde2e2; color: #b71c1c; }
        .tk-card-meta { font-size: 11px; color: #6b7280; margin: 4px 0; }
        .tk-card-body { display: flex; flex-direction: column; gap: 3px; }
        .tk-card-field { font-size: 13px; }
        .tk-card-fl { font-weight: 600; color: #374151; }
        .tk-card-res { font-size: 12px; background: #f0f7f0; border-left: 3px solid #2e7d32; padding: 5px 8px; border-radius: 4px; margin-top: 4px; }
        .tk-card-attach { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
        .tk-card-attach img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid #c3ccd6; }
        .tk-card-activity { margin-top: 6px; font-size: 12px; }
        .tk-card-activity summary { cursor: pointer; color: #2563eb; }
        .tk-act { padding: 3px 0; color: #4b5563; }
        .tk-act-t { color: #9ca3af; }
        .tk-act-by { font-weight: 600; }
        .tk-card-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
        .tk-status-select, .tk-prio-select { padding: 5px 7px; font-size: 12px; border: 1px solid #767676; border-radius: 5px; min-height: 34px; }
        .tk-btn {
            padding: 5px 10px; font-size: 12px; background: #eef2f7; color: #333;
            border: 1px solid #c3ccd6; border-radius: 5px; cursor: pointer; min-height: 34px;
        }
        .tk-btn:hover { background: #e2e8f0; }
        .tk-btn-danger { color: #c62828; border-color: #e3a3a3; background: #fdf0f0; }

        /* Board (kanban) view */
        .tk-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
        .tk-col { flex: 0 0 230px; background: #f4f6f9; border-radius: 10px; padding: 8px; }
        .tk-col-head { font-size: 12px; font-weight: 700; padding: 4px 6px 8px; border-bottom: 2px solid #ccc; margin-bottom: 8px; color: #1f2937; }
        .tk-col-count { float: right; color: #6b7280; }
        .tk-col-body { display: flex; flex-direction: column; gap: 8px; }
        .tk-col .tk-card { padding: 8px; }

        .tk-display-queue { display: flex; flex-direction: column; gap: 10px; }

        /* ---- Stats overlay ---- */
        .tk-stats-overlay {
            position: fixed; inset: 0; z-index: 7500; background: rgba(0,0,0,0.55);
            display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        .tk-stats-modal {
            background: #fff; color: #1a1a1a; border-radius: 12px; padding: 18px 20px;
            width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto;
            box-shadow: 0 12px 40px rgba(0,0,0,0.4);
        }
        .tk-stats-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .tk-stats-modal-head h3 { margin: 0; font-size: 18px; }
        .tk-stats-close { width: 34px; height: 34px; border: none; background: #eef2f7; border-radius: 6px; font-size: 18px; cursor: pointer; }
        .tk-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
        .tk-stat-big { background: #f4f6f9; border-radius: 10px; padding: 10px; text-align: center; font-size: 12px; color: #6b7280; }
        .tk-stat-big span { display: block; font-size: 24px; font-weight: 700; color: #1a1a1a; }
        .tk-stats-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 12px; }
        .tk-stats-cols h4 { margin: 0 0 8px; font-size: 13px; color: #374151; }
        .tk-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 13px; }
        .tk-stats-oldest { font-size: 12px; color: #6b7280; }
        .tk-stats-chart-wrap { display: flex; justify-content: center; margin: 10px 0; }
        .tk-stats-actions { display: flex; justify-content: flex-end; }
        @media (max-width: 640px) {
            .tk-stats-grid { grid-template-columns: repeat(2, 1fr); }
            .tk-stats-cols { grid-template-columns: 1fr; }
        }

        /* ---- Submit confirmation banner ---- */
        .tk-confirm {
            display: flex; align-items: center; gap: 10px; padding: 10px 12px;
            background: #e6f6ea; border: 1px solid #2e7d32; color: #1b5e20;
            border-radius: 8px; margin-bottom: 8px; font-size: 14px;
            animation: tkConfirmIn 180ms ease-out;
        }
        @keyframes tkConfirmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
        .tk-confirm-icon { font-size: 18px; font-weight: 700; }
        .tk-confirm-msg { flex: 1; }
        .tk-confirm-x {
            background: transparent; border: none; color: #1b5e20;
            font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; min-height: 32px;
        }
        .tk-confirm-x:hover { color: #0d3f10; }
        .tk-confirm-link { color: #1b5e20; font-weight: 700; text-decoration: underline; white-space: nowrap; }
        .tk-confirm-link:hover { color: #0d3f10; }

        /* Token-aware confirmation banner: more vertical, more prominent link */
        .tk-confirm-token { align-items: flex-start; padding: 12px 14px; }
        .tk-confirm-token .tk-confirm-msg { display: flex; flex-direction: column; gap: 4px; }
        .tk-confirm-title { font-weight: 700; font-size: 14px; }
        .tk-confirm-sub { font-size: 12px; color: #1b5e20; }
        .tk-confirm-linkrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
        .tk-confirm-copy {
            font-size: 12px; padding: 5px 10px; background: #fff; color: #1b5e20;
            border: 1px solid #2e7d32; border-radius: 6px; cursor: pointer; min-height: 30px; font-weight: 600;
        }
        .tk-confirm-copy:hover { background: #e6f6ea; }

        /* ---- "Lost your link?" recovery row on the intake form ---- */
        .tk-form-track {
            margin-top: 12px; padding-top: 10px; border-top: 1px dashed #c3ccd6;
            font-size: 13px;
        }
        .tk-form-track-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .tk-form-track-lbl { color: #4a4a4a; font-weight: 600; }
        .tk-form-track-email {
            flex: 1 1 160px; padding: 8px 10px; font-size: 14px;
            border: 1px solid #767676; border-radius: 6px; min-height: 38px; background: #fff; color: #1a1a1a;
        }
        .tk-form-track-input {
            flex: 0 1 110px; padding: 8px 10px; font-size: 14px;
            border: 1px solid #767676; border-radius: 6px; min-height: 38px; background: #fff; color: #1a1a1a;
        }
        .tk-form-track-btn {
            padding: 8px 14px; font-size: 13px; font-weight: 600; color: #fff;
            background: #6b7280; border: none; border-radius: 6px; cursor: pointer; min-height: 38px;
        }
        .tk-form-track-btn:hover { background: #4b5563; }
        .tk-form-track-btn:disabled { background: #aaa; cursor: not-allowed; }
        .tk-form-track-msg { margin-top: 6px; font-size: 13px; }
        .tk-form-track-ok { color: #1b5e20; }
        .tk-form-track-err { color: #b71c1c; }

        /* ---- Queue toolbar date filter ---- */
        .tk-toolbar-date {
            display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
            margin: 6px 0 10px; padding: 8px 10px;
            background: #f4f6f9; border: 1px solid #d7dee6; border-radius: 8px;
            font-size: 13px;
        }
        .tk-date-lbl { font-weight: 600; color: #374151; }
        .tk-date-input {
            padding: 7px 10px; font-size: 13px; min-height: 38px;
            border: 1px solid #767676; border-radius: 6px;
            background: #fff; color: #1a1a1a;
            /* Reserve enough width for native pickers on iOS/Android without overflow */
            min-width: 140px;
        }
        .tk-date-clear {
            margin-left: auto; font-size: 12px; padding: 5px 10px;
        }

        /* Stats panel active-range subtitle */
        .tk-stats-range {
            margin: 0 0 12px; font-size: 13px; color: #4b5563;
        }
        .tk-stats-range strong { color: #0a2847; }

        /* ===== Mobile responsiveness for the ticketing UI =====
           The whole platform is device-agnostic; the additions above mostly inherit
           that, but a few specifics need tighter rules at narrow widths so nothing
           overflows or becomes hard to tap. */
        @media (max-width: 640px) {
            /* Queue toolbar: each control gets its own row's worth of width so users
               can tap them comfortably without misfires. */
            .tk-toolbar { gap: 6px; }
            .tk-toolbar > .tk-search { flex: 1 1 100%; }
            .tk-toolbar > .tk-filter { flex: 1 1 calc(50% - 6px); min-width: 0; }
            .tk-toolbar > .tk-btn,
            .tk-toolbar > .tk-iconbtn { flex: 0 0 auto; }
            .tk-toolbar-date { flex-wrap: wrap; }
            .tk-toolbar-date .tk-date-input { flex: 1 1 calc(50% - 16px); min-width: 0; }
            .tk-date-clear { margin-left: 0; flex: 0 0 auto; }

            /* Confirmation banner: stack the icon/text/close cleanly on small phones. */
            .tk-confirm-token .tk-confirm-linkrow { flex-direction: row; align-items: center; }
            .tk-confirm-link { font-size: 14px; }

            /* "Lost your link?" recovery row: stack vertically so each control is full-width. */
            .tk-form-track-row { flex-direction: column; align-items: stretch; }
            .tk-form-track-email,
            .tk-form-track-input { flex: 1 1 auto; }
            .tk-form-track-btn { width: 100%; }

            /* Stats grid already collapses; tighten typography for narrow screens. */
            .tk-stat-big span { font-size: 20px; }
            .tk-stats-modal { padding: 14px 14px; }
            .tk-stats-canvas { width: 100% !important; }

            /* Kanban columns: keep horizontal scroll (touch-friendly) but narrower columns. */
            .tk-col { flex: 0 0 200px; }

            /* Per-ticket controls wrap onto multiple lines, each comfortably tappable. */
            .tk-card-controls .tk-btn { flex: 0 1 auto; }

            /* Build-mode config: less horizontal cramping. */
            .tk-queue-config { flex-direction: column; gap: 8px; }

            /* Bulk-action bar: count moves to the start, actions wrap nicely. */
            .tk-bulk-bar { padding: 8px 10px; }
            .tk-bulk-count { flex: 1 1 100%; margin: 0 0 4px; }

            /* Full-screen overlay on phones — make the close button thumb-reachable. */
            .tk-fs-close { width: 100%; }
            .tk-fs-bar { justify-content: stretch; }
        }
        @media (max-width: 380px) {
            /* Very narrow phones: ensure even tighter wrapping. */
            .tk-toolbar > .tk-filter { flex: 1 1 100%; }
            .tk-toolbar-date .tk-date-input { flex: 1 1 100%; }
            .tk-card-num { font-size: 13px; }
            .tk-pill { font-size: 10px; padding: 2px 6px; }
        }

        /* ===================== INVENTORY VERTICAL ===================== */
        /* Build/Input visibility (matches the section's mode classes). */
        .section.build-mode .inv-input-only { display: none; }
        .section.user-mode  .inv-build-only { display: none; }

        /* ---- Wrap + status header ---- */
        .inv-wrap { display: flex; flex-direction: column; gap: 8px; color: #1a1a1a; }
        .inv-header {
            display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
            gap: 8px; padding: 10px 12px; background: #f4f6f9; border: 1px solid #d7dee6; border-radius: 8px;
        }
        .inv-header-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
        .inv-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
        .inv-dot-green { background: #2e7d32; }
        .inv-dot-amber { background: #e8820c; }
        .inv-dot-red   { background: #c62828; }
        .inv-dot-empty { background: #9ca3af; }
        .inv-status-lbl { font-weight: 700; }
        .inv-status-red  .inv-status-lbl { color: #c62828; }
        .inv-status-amber .inv-status-lbl { color: #b25e00; }
        .inv-status-green .inv-status-lbl { color: #2e7d32; }
        .inv-status-empty .inv-status-lbl { color: #6b7280; }
        .inv-lastcheck { color: #6b7280; }
        .inv-header-actions { display: flex; flex-wrap: wrap; gap: 6px; }

        /* When a section's status is red, color the section header border. */
        .section.inv-status-red    > .section-header { box-shadow: inset 0 -3px 0 0 #c62828; }
        .section.inv-status-amber  > .section-header { box-shadow: inset 0 -3px 0 0 #e8820c; }
        .section.inv-status-green  > .section-header { box-shadow: inset 0 -3px 0 0 #2e7d32; }
        .display-section.inv-status-red    { border-color: #c62828; }
        .display-section.inv-status-amber  { border-color: #e8820c; }
        .display-section.inv-status-green  { border-color: #2e7d32; }

        /* ---- Buttons (shared inventory button) ---- */
        .inv-btn {
            padding: 7px 12px; font-size: 13px; background: #eef2f7; color: #1a1a1a;
            border: 1px solid #c3ccd6; border-radius: 6px; cursor: pointer; min-height: 36px; font-weight: 600;
        }
        .inv-btn:hover { background: #e2e8f0; }
        .inv-btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
        .inv-btn-primary:hover { background: #1d4ed8; }
        .inv-btn-danger { background: #fdf0f0; color: #c62828; border-color: #e3a3a3; }
        .inv-scan-btn { background: #fff; }
        .inv-check-btn { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
        .inv-check-btn:hover { background: #c8e6c9; }

        /* ---- Body + locations + items ---- */
        .inv-body { display: flex; flex-direction: column; gap: 12px; }
        .inv-loc {
            background: #fff; border: 1px solid #d7dee6; border-radius: 10px; padding: 10px 12px;
            display: flex; flex-direction: column; gap: 6px;
        }
        .inv-loc-h { margin: 0 0 4px; font-size: 14px; color: #0a2847; display: flex; align-items: center; gap: 8px; }
        .inv-loc-count {
            font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
            background: #eef2f7; color: #6b7280;
        }
        .inv-loc-items { display: flex; flex-direction: column; gap: 4px; }
        .inv-item {
            display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
            padding: 8px 10px; border-radius: 8px; border: 1px solid #e3e8ee; background: #fafbfc;
        }
        .inv-item.inv-soon    { background: #fff3e0; border-color: #ffb74d; }
        .inv-item.inv-expired { background: #fde2e2; border-color: #ef9a9a; }
        .inv-item-name { display: flex; flex-direction: column; gap: 2px; }
        .inv-item-title { font-weight: 600; font-size: 14px; }
        .inv-item-meta { font-size: 11px; color: #6b7280; display: flex; gap: 8px; flex-wrap: wrap; }
        .inv-exp { font-weight: 600; }
        .inv-exp-amber { color: #b25e00; }
        .inv-exp-red { color: #c62828; }
        .inv-exp-none { color: #9ca3af; }
        .inv-lot { font-family: monospace; }
        .inv-par { font-weight: 600; color: #4b5563; }
        .inv-par-low { color: #c62828; }
        .inv-item-amt {
            min-width: 44px; text-align: center; font-size: 18px; font-weight: 700;
        }
        .inv-amt-zero { color: #c62828; }
        .inv-item-ctrl { display: flex; gap: 4px; }
        .inv-item-ctrl .inv-btn { padding: 5px 10px; min-height: 32px; }
        .inv-plus, .inv-minus { font-size: 18px; line-height: 1; width: 34px; padding: 4px 0; }
        .inv-plus { background: #e6f6ea; color: #1b5e20; border-color: #a5d6a7; }
        .inv-minus { background: #fdf0f0; color: #c62828; border-color: #e3a3a3; }
        .inv-edit { padding: 4px 8px; min-height: 32px; }

        .inv-addnew {
            align-self: flex-start; padding: 6px 12px; font-size: 12px; font-weight: 600;
            background: #fff; color: #2563eb; border: 1px dashed #2563eb; border-radius: 6px; cursor: pointer; min-height: 32px;
        }
        .inv-addnew:hover { background: #eef4ff; }

        .inv-empty { color: #6b7280; font-style: italic; font-size: 13px; margin: 0; padding: 4px 0; }

        /* ---- Build-mode (locations editor) ---- */
        .inv-builder { display: flex; flex-direction: column; gap: 10px; }
        .inv-cfg-section { padding: 6px 0; border-top: 1px solid #e3e8ee; }
        .inv-cfg-section[open] { padding-bottom: 8px; }
        .inv-cfg-section > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #0a2847; user-select: none; }
        .inv-build-hint, .inv-build-note { font-size: 12px; color: #555; margin: 0; }
        .inv-build-note { font-style: italic; color: #777; }
        .inv-build-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: #444; margin: 8px 0; }
        .inv-build-field input { padding: 7px 9px; font-size: 13px; border: 1px solid #767676; border-radius: 6px; min-height: 38px; font-weight: 400; }
        .inv-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; padding: 4px 0; }
        .inv-toggle input { width: 18px; height: 18px; }
        .inv-loc-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
        .inv-loc-row {
            display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center;
            padding: 8px; border: 1px solid #dde3ea; border-radius: 8px; background: #f7f9fc;
        }
        .inv-loc-name { padding: 6px 8px; font-size: 13px; border: 1px solid #767676; border-radius: 5px; min-height: 36px; }
        .inv-loc-mv, .inv-loc-del {
            width: 32px; height: 32px; border: 1px solid #c3ccd6; background: #fff; border-radius: 5px; cursor: pointer; font-size: 14px;
        }
        .inv-loc-del { color: #c62828; border-color: #e3a3a3; }
        .inv-addloc-btn {
            align-self: flex-start; padding: 8px 14px; font-size: 13px; font-weight: 600;
            background: #2e7d32; color: #fff; border: none; border-radius: 6px; cursor: pointer; min-height: 40px;
        }

        /* ---- Modal (shared with scanner / signature / item edit / adjust) ---- */
        .inv-modal-overlay {
            position: fixed; inset: 0; z-index: 7600; background: rgba(0,0,0,0.55);
            display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        .inv-modal {
            background: #fff; color: #1a1a1a; border-radius: 12px; padding: 18px 20px;
            width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto;
            box-shadow: 0 12px 40px rgba(0,0,0,0.4);
        }
        .inv-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .inv-modal-head h3 { margin: 0; font-size: 17px; color: #0a2847; }
        .inv-modal-x { width: 34px; height: 34px; border: none; background: #eef2f7; border-radius: 6px; font-size: 18px; cursor: pointer; }
        .inv-modal-sub { margin: 0 0 10px; font-size: 13px; color: #4b5563; }
        .inv-modal-label { display: block; font-weight: 600; font-size: 12px; color: #374151; margin: 10px 0 4px; }
        .inv-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .inv-modal-grid > div { display: flex; flex-direction: column; }
        .inv-modal input[type="text"],
        .inv-modal input[type="number"],
        .inv-modal input[type="date"],
        .inv-modal select,
        .inv-modal textarea {
            width: 100%; padding: 8px 10px; font-size: 14px; border: 1px solid #c3ccd6; border-radius: 6px; min-height: 40px; box-sizing: border-box;
            background: #fff; color: #1a1a1a; font-family: inherit;
        }
        .inv-modal textarea { min-height: 60px; resize: vertical; }
        .inv-mode-toggle { display: flex; gap: 14px; margin: 6px 0 8px; font-size: 14px; }
        .inv-amt-label { display: block; font-weight: 600; font-size: 12px; color: #374151; margin: 8px 0 4px; }
        .inv-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
        .inv-req { color: #c62828; }

        /* ---- Scanner ---- */
        .inv-scan-video-wrap {
            position: relative; width: 100%; max-width: 480px; margin: 8px auto;
            background: #000; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3;
        }
        .inv-scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
        .inv-scan-reticle {
            position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,0.85); border-radius: 8px;
            box-shadow: 0 0 0 9999px rgba(0,0,0,0.25);
        }
        .inv-scan-msg { font-size: 13px; color: #4b5563; text-align: center; margin: 4px 0 10px; }

        /* ---- Daily check ---- */
        .inv-check-list { margin: 8px 0; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
        .inv-list-red   { background: #fde2e2; color: #b71c1c; }
        .inv-list-amber { background: #fff3e0; color: #b25e00; }
        .inv-check-list ul { margin: 4px 0 0; padding-left: 18px; }
        .inv-check-list li { margin: 2px 0; }
        .inv-check-ok { background: #e6f6ea; color: #1b5e20; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
        .inv-sig-wrap { position: relative; }
        .inv-sig-canvas {
            width: 100%; height: 160px; background: #fafbfc; border: 1px dashed #9ca3af; border-radius: 6px;
            touch-action: none; display: block;
        }
        .inv-sig-clear {
            position: absolute; top: 6px; right: 6px; font-size: 11px; padding: 3px 8px;
            background: #fff; border: 1px solid #c3ccd6; border-radius: 4px; cursor: pointer; min-height: 26px;
        }

        /* ---- Mobile ---- */
        @media (max-width: 640px) {
            .inv-header { flex-direction: column; align-items: stretch; }
            .inv-header-actions { width: 100%; justify-content: stretch; }
            .inv-header-actions .inv-btn { flex: 1 1 auto; }
            .inv-item { grid-template-columns: 1fr; grid-template-areas: 'name' 'amt' 'ctrl'; gap: 6px; }
            .inv-item-name { grid-area: name; }
            .inv-item-amt { grid-area: amt; text-align: left; font-size: 20px; }
            .inv-item-ctrl { grid-area: ctrl; }
            .inv-item-ctrl .inv-btn { flex: 1 1 auto; min-height: 40px; font-size: 16px; }
            .inv-modal { padding: 14px 14px; max-width: 100%; }
            .inv-modal-grid { grid-template-columns: 1fr; }
            .inv-modal-actions .inv-btn { flex: 1 1 auto; }
            .inv-loc-row { grid-template-columns: 1fr auto auto auto; }
            .inv-sig-canvas { height: 140px; }
        }
        @media (max-width: 380px) {
            .inv-loc-row { grid-template-columns: 1fr auto auto; }
            .inv-loc-row .inv-loc-del { grid-column: 3; }
            .inv-loc-row .inv-loc-mv:nth-of-type(2) { display: none; } /* hide one of the move buttons on tiny screens */
        }

        /* ---- Inventory check history + erase ---- */
        .inv-hist-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
        .inv-hist-row {
            background: #f7f9fc; border: 1px solid #dde3ea; border-radius: 8px;
            padding: 8px 10px; font-size: 13px;
        }
        .inv-hist-row-head {
            display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-bottom: 4px;
        }
        .inv-hist-time { font-weight: 600; color: #1a1a1a; }
        .inv-hist-by { color: #6b7280; }
        .inv-hist-summary { color: #4b5563; }
        .inv-hist-notes {
            margin-top: 4px; padding: 4px 8px; background: #fff; border-left: 3px solid #c3ccd6; color: #1a1a1a; font-size: 12px;
        }
        .inv-hist-sig { margin-top: 6px; }
        .inv-hist-sig summary { cursor: pointer; color: #2563eb; font-size: 12px; }
        .inv-hist-sig img { display: block; max-width: 100%; max-height: 120px; margin-top: 4px; background: #fff; border: 1px solid #c3ccd6; border-radius: 4px; }
        .inv-erase-log-btn {
            align-self: flex-start; margin-top: 8px;
            padding: 6px 12px; font-size: 12px; font-weight: 600;
            background: #fdf0f0; color: #c62828; border: 1px solid #e3a3a3; border-radius: 6px; cursor: pointer; min-height: 34px;
        }
        .inv-erase-log-btn:hover { background: #fbd9d9; }
        .inv-hist-btn { background: #eef4ff; color: #1c3d8c; border-color: #c3d4f0; }
        .inv-hist-btn:hover { background: #dde9ff; }

        /* ---- Per-location FULL SCREEN ---- */
        .inv-loc-h {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        }
        .inv-loc-h-name { font-weight: 700; }
        .inv-loc-expand {
            margin-left: auto;
            width: 36px; height: 36px; padding: 0; line-height: 1;
            background: #fff; color: #0a2847;
            border: 1px solid #c3ccd6; border-radius: 6px; cursor: pointer;
            font-size: 16px;
        }
        .inv-loc-expand:hover { background: #eef4ff; color: #1c3d8c; }

        .inv-fs-overlay {
            position: fixed; inset: 0; z-index: 7400;
            background: #f0f3f7;
            display: flex; flex-direction: column;
            padding: 12px; overflow: hidden;
        }
        .inv-fs-modal {
            background: #fff; border-radius: 10px;
            padding: 12px 14px;
            display: flex; flex-direction: column;
            flex: 1 1 auto; min-height: 0;
            box-shadow: 0 6px 20px rgba(0,0,0,0.10);
        }
        .inv-fs-head {
            display: flex; align-items: flex-start; gap: 10px; justify-content: space-between;
            padding-bottom: 8px; border-bottom: 1px solid #e3e8ee; margin-bottom: 8px;
        }
        .inv-fs-title { display: flex; flex-direction: column; gap: 2px; }
        .inv-fs-eyebrow { font-size: 11px; text-transform: uppercase; color: #6b7280; letter-spacing: 0.05em; }
        .inv-fs-head h3 { margin: 0; font-size: 18px; color: #0a2847; display: flex; align-items: center; gap: 8px; }
        .inv-fs-close {
            padding: 8px 14px; font-size: 13px; font-weight: 600;
            background: #c62828; color: #fff; border: none; border-radius: 6px;
            cursor: pointer; min-height: 40px;
        }
        .inv-fs-close:hover { background: #a01e1e; }

        .inv-fs-toolbar {
            display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
            padding: 8px 0 10px;
        }
        .inv-fs-filter {
            flex: 1 1 200px;
            padding: 8px 10px; font-size: 14px;
            border: 1px solid #c3ccd6; border-radius: 6px; min-height: 40px;
            background: #fff; color: #1a1a1a;
        }
        .inv-fs-actions { display: flex; gap: 6px; flex-wrap: wrap; }
        .inv-fs-body {
            flex: 1 1 auto; min-height: 0; overflow-y: auto;
            display: flex; flex-direction: column; gap: 4px;
            padding: 4px 2px;
        }

        @media (max-width: 640px) {
            .inv-fs-overlay { padding: 8px; }
            .inv-fs-modal { padding: 10px; border-radius: 8px; }
            .inv-fs-head { flex-direction: column; align-items: stretch; }
            .inv-fs-close { width: 100%; }
            .inv-fs-toolbar { flex-direction: column; align-items: stretch; }
            .inv-fs-actions { width: 100%; }
            .inv-fs-actions .inv-btn { flex: 1 1 auto; }
        }

        /* ===================== INVENTORY STATUS (aggregator) ===================== */
        .section.build-mode .invst-input-only { display: none; }
        .section.user-mode  .invst-build-only { display: none; }

        /* ---- Roll-up summary line ---- */
        .invst-rollup {
            display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
            padding: 8px 10px; margin-bottom: 10px;
            background: #f4f6f9; border: 1px solid #d7dee6; border-radius: 8px;
        }
        .invst-rollup-pill {
            display: inline-flex; align-items: center; padding: 4px 12px;
            font-size: 13px; font-weight: 700; border-radius: 999px; color: #fff;
        }
        .invst-pill-red    { background: #c62828; }
        .invst-pill-amber  { background: #e8820c; }
        .invst-pill-green  { background: #2e7d32; }
        .invst-pill-empty  { background: #6b7280; }
        .invst-rollup-total { margin-left: auto; font-size: 12px; color: #6b7280; }

        /* ---- Cards grid ---- */
        .invst-grid {
            display: grid; gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        }
        .invst-grid-detailed {
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }
        .invst-card {
            display: flex; flex-direction: column; gap: 6px; text-align: left;
            padding: 12px 14px; background: #ffffff;
            border: 1px solid #d7dee6; border-radius: 10px;
            cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            color: #1a1a1a;
            font-family: inherit;
            min-height: 90px;
        }
        .invst-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
        .invst-card:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
        .invst-card-head {
            display: flex; align-items: center; gap: 8px;
        }
        .invst-card-title {
            font-weight: 700; font-size: 14px; line-height: 1.3; flex: 1 1 auto;
        }
        .invst-card-issue {
            margin: 0; font-size: 13px; color: #4b5563;
        }
        .invst-card-details {
            list-style: none; padding: 0; margin: 0; font-size: 12px; color: #4b5563;
            display: flex; flex-direction: column; gap: 2px;
        }
        .invst-card-details .invst-bad  { color: #c62828; font-weight: 600; }
        .invst-card-details .invst-warn { color: #b25e00; }
        .invst-card-details .invst-ok   { color: #1b5e20; }
        .invst-card-meta {
            margin: 0; font-size: 11px; color: #6b7280;
        }

        /* Card left-edge accent by status */
        .invst-status-red    { border-left: 5px solid #c62828; }
        .invst-status-amber  { border-left: 5px solid #e8820c; }
        .invst-status-green  { border-left: 5px solid #2e7d32; }
        .invst-status-empty  { border-left: 5px solid #9ca3af; }

        .invst-dot {
            width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: 0 0 14px;
        }
        .invst-dot-red    { background: #c62828; }
        .invst-dot-amber  { background: #e8820c; }
        .invst-dot-green  { background: #2e7d32; }
        .invst-dot-empty  { background: #9ca3af; }

        .invst-empty {
            color: #6b7280; font-size: 13px; font-style: italic; padding: 6px 2px; margin: 0;
        }

        /* ---- Build mode UI ---- */
        .invst-builder { display: flex; flex-direction: column; gap: 10px; }
        .invst-cfg-section { padding: 6px 0; border-top: 1px solid #e3e8ee; }
        .invst-cfg-section[open] { padding-bottom: 8px; }
        .invst-cfg-section > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #0a2847; user-select: none; }
        .invst-build-hint, .invst-build-note { font-size: 12px; color: #555; margin: 4px 0; }
        .invst-build-note { font-style: italic; color: #777; }
        .invst-build-list {
            display: flex; flex-direction: column; gap: 4px; margin: 6px 0;
            max-height: 260px; overflow-y: auto;
            padding: 6px; background: #f7f9fc; border: 1px solid #dde3ea; border-radius: 8px;
        }
        .invst-build-check {
            display: flex; align-items: center; gap: 8px; padding: 4px 6px;
            font-size: 13px; cursor: pointer; border-radius: 4px;
        }
        .invst-build-check:hover { background: #eef2f7; }
        .invst-build-check input { width: 18px; height: 18px; }
        .invst-build-bulk { display: flex; gap: 6px; margin-top: 4px; }
        .invst-btn {
            padding: 6px 12px; font-size: 12px; font-weight: 600;
            background: #eef2f7; color: #1a1a1a; border: 1px solid #c3ccd6; border-radius: 6px;
            cursor: pointer; min-height: 32px;
        }
        .invst-btn:hover { background: #e2e8f0; }
        .invst-build-field {
            display: flex; flex-direction: column; gap: 3px; margin: 8px 0;
            font-size: 12px; font-weight: 600; color: #444;
        }
        .invst-build-field select {
            padding: 7px 9px; font-size: 13px; border: 1px solid #767676; border-radius: 6px;
            min-height: 38px; font-weight: 400;
        }

        /* ---- Drill-in modal (cart full inventory) ---- */
        .invst-modal-overlay {
            position: fixed; inset: 0; z-index: 7500;
            background: rgba(0,0,0,0.55);
            display: flex; align-items: center; justify-content: center; padding: 16px;
        }
        .invst-modal {
            background: #ffffff; color: #1a1a1a;
            border-radius: 12px;
            width: 100%; max-width: 760px; max-height: 92vh;
            display: flex; flex-direction: column;
            box-shadow: 0 12px 40px rgba(0,0,0,0.4);
            overflow: hidden;
        }
        .invst-modal-head {
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 14px 16px; border-bottom: 1px solid #e3e8ee;
        }
        .invst-modal-title { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
        .invst-modal-title h3 { margin: 0; font-size: 17px; color: #0a2847; }
        .invst-modal-status { font-size: 12px; color: #6b7280; font-weight: 600; padding: 2px 8px; background: #f4f6f9; border-radius: 999px; }
        .invst-modal-x {
            width: 36px; height: 36px; border: none; background: #eef2f7;
            border-radius: 6px; font-size: 18px; cursor: pointer;
        }
        .invst-modal-body { padding: 14px 16px; overflow-y: auto; flex: 1 1 auto; }

        /* ---- Mobile ---- */
        @media (max-width: 640px) {
            .invst-grid { grid-template-columns: 1fr; }
            .invst-grid-detailed { grid-template-columns: 1fr; }
            .invst-card { min-height: 70px; padding: 10px 12px; }
            .invst-rollup { font-size: 12px; }
            .invst-rollup-pill { padding: 3px 9px; font-size: 12px; }
            .invst-rollup-total { margin-left: 0; flex: 1 1 100%; }
            .invst-modal { max-width: 100%; max-height: 96vh; border-radius: 8px; }
            .invst-modal-head { padding: 12px; }
            .invst-modal-body { padding: 10px; }
        }

        /* ---- Full-screen queue overlay ---- */
        .tk-fs-overlay {
            position: fixed; inset: 0; z-index: 7400;
            background: #f0f3f7;
            display: flex; flex-direction: column;
            padding: 12px; overflow: hidden;
        }
        .tk-fs-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
        .tk-fs-close {
            padding: 8px 14px; font-size: 13px; font-weight: 600;
            background: #c62828; color: #fff; border: none; border-radius: 6px;
            cursor: pointer; min-height: 40px;
        }
        .tk-fs-close:hover { background: #a01e1e; }
        .tk-fs-holder {
            flex: 1; min-height: 0; overflow: auto;
            background: #fff; border-radius: 8px; padding: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }
        /* Strip the canvas-only chrome while a section is hosted by the overlay */
        .tk-section-fs .section-controls,
        .tk-section-fs .resize-handle,
        .tk-section-fs .section-lock-icon { display: none !important; }
        .tk-section-fs { box-shadow: none !important; border: none !important; background: transparent !important; }

        /* ---- Build-mode collapsible config sections ---- */
        .tk-cfg-section { margin: 6px 0; padding: 6px 0; border-top: 1px solid #e3e8ee; }
        .tk-cfg-section[open] { padding-bottom: 8px; }
        .tk-cfg-section > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #0a2847; padding: 4px 0; user-select: none; }
        .tk-cfg-section > summary:hover { color: #2563eb; }
        .tk-build-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; padding: 4px 0; }
        .tk-build-toggle input { width: 18px; height: 18px; }
        .tk-build-field textarea { padding: 7px 9px; font-size: 13px; border: 1px solid #767676; border-radius: 6px; min-height: 60px; resize: vertical; font-family: inherit; font-weight: 400; }

        /* ---- Share intake URL ---- */
        .tk-share-row { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
        .tk-share-url { flex: 1; padding: 7px 9px; font-size: 12px; border: 1px solid #c3ccd6; border-radius: 6px; background: #f9fbfd; color: #1a1a1a; min-height: 36px; }

        /* ---- Internal vs public activity entries ---- */
        .tk-act-internal { background: #fff5f0; border-left: 3px solid #c97a44; padding-left: 6px; }
        .tk-act-tag { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: #c97a44; padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }

        /* ---- Watchers ---- */
        .tk-watchers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; font-size: 12px; }
        .tk-watchers-lbl { font-weight: 600; color: #374151; }
        .tk-watchers-empty { color: #888; }
        .tk-watcher { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: #eef2f7; border-radius: 999px; color: #1a1a1a; }
        .tk-watcher-x { background: transparent; border: none; color: #6b7280; font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1; }
        .tk-watcher-x:hover { color: #c62828; }
        .tk-watcher-add { background: transparent; border: 1px dashed #9ca3af; color: #2563eb; font-size: 11px; cursor: pointer; padding: 2px 8px; border-radius: 999px; }
        .tk-watcher-add:hover { background: #eef2f7; }

        /* ---- Card selection + bulk actions ---- */
        .tk-card-sel { width: 18px; height: 18px; cursor: pointer; margin-right: 4px; }
        .tk-bulk-bar {
            display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
            padding: 8px 12px; background: #fff8e1; border: 1px solid #f6c870; border-radius: 8px;
            margin: 0 0 10px;
        }
        .tk-bulk-count { font-weight: 700; color: #7a5800; margin-right: auto; }

        /* ---- KB suggestions on intake form ---- */
        .tk-kb { background: #f4f8ff; border: 1px solid #c3d4f0; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
        .tk-kb-h { margin: 0 0 6px; font-size: 13px; color: #1c4587; }
        .tk-kb-item { padding: 6px 0; border-bottom: 1px dashed #d3e0f0; }
        .tk-kb-item:last-child { border-bottom: 0; }
        .tk-kb-item strong { font-size: 13px; color: #1a1a1a; }
        .tk-kb-item p { margin: 4px 0; font-size: 13px; color: #4b5563; }
        .tk-kb-item a { color: #2563eb; font-weight: 600; text-decoration: none; }
        .tk-kb-item a:hover { text-decoration: underline; }

        /* ---- KB builder (build mode) ---- */
        .tk-kb-row {
            display: grid; grid-template-columns: 1fr 1fr 30px;
            grid-template-areas: 'kw title del' 'body body body' 'url url url';
            gap: 6px; padding: 8px; background: #f7f9fc; border: 1px solid #dde3ea; border-radius: 8px; margin: 6px 0;
        }
        .tk-kb-row .tk-kb-keywords { grid-area: kw; }
        .tk-kb-row .tk-kb-title { grid-area: title; }
        .tk-kb-row .tk-fld-del { grid-area: del; align-self: start; }
        .tk-kb-row .tk-kb-body { grid-area: body; resize: vertical; }
        .tk-kb-row .tk-kb-url { grid-area: url; }
        .tk-kb-row input, .tk-kb-row textarea { padding: 6px 8px; font-size: 12px; border: 1px solid #767676; border-radius: 5px; }

        /* ---- Reusable small dialog (note, etc.) ---- */
        .tk-dlg-overlay {
            position: fixed; inset: 0; z-index: 7500; background: rgba(0,0,0,0.55);
            display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        .tk-dlg {
            background: #fff; color: #1a1a1a; border-radius: 12px; padding: 18px 20px;
            width: 100%; max-width: 460px; box-shadow: 0 12px 40px rgba(0,0,0,0.4);
        }
        .tk-dlg-title { margin: 0 0 6px; font-size: 16px; color: #0a2847; }
        .tk-dlg-sub { margin: 0 0 10px; font-size: 12px; color: #6b7280; }
        .tk-dlg-input { width: 100%; padding: 9px 11px; font-size: 14px; border: 1px solid #c3ccd6; border-radius: 6px; resize: vertical; font-family: inherit; }
        .tk-dlg-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; margin: 10px 0 0; }
        .tk-dlg-toggle input { width: 18px; height: 18px; }
        .tk-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
        .tk-btn-primary { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }
        .tk-btn-primary:hover { background: #1d4ed8 !important; }

        /* ---- Board column drop hover ---- */
        .tk-col-drop { background: #e0f0ff !important; outline: 2px dashed #2563eb; }
        .tk-card[draggable="true"] { cursor: grab; }
        .tk-card[draggable="true"]:active { cursor: grabbing; }

        /* =========================================================
           TAB BAR (above canvas)
           ========================================================= */
        .tab-bar:empty { display: none; }
        .tab-bar {
            display: flex;
            align-items: center;
            background: #0a2847;
            border-bottom: 1px solid #061423;
            padding: 6px 10px;
            gap: 8px;
            overflow-x: auto;
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch;
            min-height: 40px;
        }
        .tab-bar::-webkit-scrollbar { height: 6px; }
        .tab-bar::-webkit-scrollbar-thumb { background: #1f4a78; border-radius: 3px; }

        .tab-strip {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            min-width: 0;
        }

        .tab-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            background: transparent;
            color: #c8d4e3;
            border: 1px solid transparent;
            border-radius: 6px 6px 0 0;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            max-width: 200px;
            min-height: 32px;
            transition: background 0.15s, color 0.15s;
        }
        .tab-btn:hover { background: #15406b; color: #fff; }
        .tab-btn.is-active {
            background: #f4f6f9;
            color: #1f2937;
            border-color: #061423;
            border-bottom-color: #f4f6f9;
            margin-bottom: -1px;
        }
        .tab-btn .tab-name {
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 160px;
        }
        .tab-btn .tab-count {
            background: rgba(0,0,0,0.18);
            color: inherit;
            padding: 0 6px;
            border-radius: 9px;
            font-size: 11px;
            line-height: 16px;
            min-width: 18px;
            text-align: center;
        }
        .tab-btn.is-active .tab-count { background: #d6dde6; color: #1f2937; }
        .tab-btn .tab-lock { font-size: 11px; }
        .tab-btn.has-lock .tab-name { font-style: italic; }

        .tab-add {
            margin-left: 4px;
            min-width: 30px;
            height: 30px;
            border-radius: 6px;
            background: #1f4a78;
            color: #fff;
            border: 1px solid #2a5f99;
            cursor: pointer;
            font-size: 17px;
            line-height: 1;
            font-weight: 700;
        }
        .tab-add:hover { background: #2a5f99; }

        .tab-edit-group {
            display: flex;
            gap: 4px;
            margin-left: auto;
            padding-left: 8px;
            border-left: 1px solid #1f4a78;
        }
        .tab-edit-btn {
            min-width: 32px;
            height: 30px;
            border-radius: 6px;
            background: transparent;
            border: 1px solid #1f4a78;
            color: #c8d4e3;
            cursor: pointer;
            font-size: 14px;
        }
        .tab-edit-btn:hover { background: #15406b; color: #fff; }
        .tab-edit-btn.tab-edit-danger:hover { background: #6b1f1f; border-color: #b03b3b; color: #fff; }

        /* Mobile dropdown variant of the tab bar */
        .tab-select {
            width: 100%;
            max-width: 100%;
            background: #15406b;
            color: #fff;
            border: 1px solid #1f4a78;
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 14px;
            min-height: 36px;
        }

        /* Section visibility — only the active tab's sections render */
        .section.tab-hidden { display: none !important; }

        /* =========================================================
           UNSAVED CHANGES — Save button indicator
           Triggered by markBuildDirty() / cleared by clearBuildDirty().
           Currently wired to tab CRUD; can be hooked into section edits later.
           ========================================================= */
        #saveBtn.has-unsaved {
            background-color: #d97706 !important;
            color: #fff !important;
            box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35), 0 0 12px rgba(217, 119, 6, 0.6);
            animation: ophub-save-pulse 1.6s ease-in-out infinite;
        }
        #saveBtn.has-unsaved:hover { background-color: #b45309 !important; }
        @keyframes ophub-save-pulse {
            0%, 100% { box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35), 0 0 8px rgba(217, 119, 6, 0.45); }
            50%      { box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.55), 0 0 16px rgba(217, 119, 6, 0.85); }
        }
        @media (prefers-reduced-motion: reduce) {
            #saveBtn.has-unsaved { animation: none; }
        }

        /* =========================================================
           STAFFING CALENDAR
           ========================================================= */

        /* ---- Build mode: positions editor ---- */
        .section.user-mode .scal-build-only { display: none; }
        .scal-builder { padding: 8px; font-size: 13px; color: #1f2937; }
        .scal-build-head { font-weight: 700; margin-bottom: 6px; }
        .scal-pos-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
        .scal-pos-row {
            display: flex; align-items: center; gap: 6px;
            padding: 4px 6px; background: #f1f5f9; border-radius: 6px;
            position: relative;
        }
        .scal-pos-drag {
            cursor: grab; user-select: none; color: #94a3b8;
            font-size: 14px; padding: 0 4px;
            line-height: 1; letter-spacing: -2px;
        }
        .scal-pos-drag:active { cursor: grabbing; }
        .scal-pos-row.scal-row-dragging { opacity: 0.4; }
        .scal-pos-row.scal-row-drop-before { box-shadow: 0 -3px 0 0 #d97706; }
        .scal-pos-row.scal-row-drop-after  { box-shadow: 0  3px 0 0 #d97706; }
        .scal-pos-card.scal-reorder-before { box-shadow: 0 -3px 0 0 #d97706; }
        .scal-pos-card.scal-reorder-after  { box-shadow: 0  3px 0 0 #d97706; }
        .scal-pos-name { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 13px; min-height: 30px; }
        .scal-pos-start, .scal-pos-end { width: 96px; padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 30px; }
        .scal-pos-sep { color: #6b7280; }
        .scal-pos-del { width: 26px; height: 26px; border-radius: 4px; background: transparent; color: #6b7280; border: 1px solid transparent; cursor: pointer; font-size: 14px; }
        .scal-pos-del:hover { background: #fde2e2; color: #b91c1c; border-color: #f0a3a3; }
        .scal-add-pos { padding: 6px 12px; background: #1f4a78; color: #fff; border: 1px solid #2a5f99; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
        .scal-add-pos:hover { background: #2a5f99; }
        .scal-build-hint { font-size: 11px; color: #6b7280; margin: 6px 0 0; }

        /* ---- Compact tile (input-mode + data-page) ---- */
        .section.build-mode .scal-input-only { display: none; }
        .scal-tile { padding: 10px; color: #1f2937; font-size: 13px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
        .scal-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
        .scal-tile-stats { font-size: 12px; color: #4b5563; }
        .scal-tile-stat strong { color: #1f2937; }
        .scal-tile-warn strong { color: #b45309; }
        .scal-btn { padding: 6px 12px; background: #1f4a78; color: #fff; border: 1px solid #2a5f99; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 32px; }
        .scal-btn:hover { background: #2a5f99; }
        .scal-expand-btn { font-size: 12px; }
        .scal-tile-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; }
        .scal-tile-item { padding: 4px 6px; border-bottom: 1px solid #e5e7eb; font-size: 12px; }
        .scal-tile-item:last-child { border-bottom: none; }
        .scal-tile-item.is-open { background: #fff7ed; }
        .scal-tile-pos { font-weight: 600; }
        .scal-tile-who { color: #4b5563; }
        .scal-tile-time { color: #6b7280; font-size: 11px; }
        .scal-open { color: #b45309; font-weight: 700; }
        .scal-tile-empty, .scal-tile-more { padding: 6px; color: #6b7280; font-size: 12px; font-style: italic; }

        /* ---- Weekly default tile (week strip + today's shifts) ---- */
        .scal-tile-title { font-size: 14px; font-weight: 700; color: #1f2937; display: flex; align-items: center; gap: 4px; }
        .scal-lock { font-size: 12px; }
        .scal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 6px 0 10px; }
        .scal-wk-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border: 1px solid #d7dde6; border-radius: 6px; background: #f8fafc; cursor: pointer; min-height: 58px; }
        .scal-wk-day:hover { background: #eef4ff; border-color: #93c5fd; }
        .scal-wk-day.is-today { background: #2563eb; border-color: #2563eb; }
        .scal-wk-day.is-today .scal-wk-dow { color: #dbeafe; }
        .scal-wk-day.is-today .scal-wk-date { color: #ffffff; }
        .scal-wk-dow { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .02em; }
        .scal-wk-date { font-size: 17px; font-weight: 700; color: #1f2937; line-height: 1.1; }
        .scal-wk-count { display: flex; gap: 3px; margin-top: 3px; min-height: 15px; align-items: center; }
        .scal-wk-filled { background: #dcfce7; color: #166534; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 0 4px; }
        .scal-wk-open { background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 0 4px; }
        .scal-wk-none { color: #cbd5e1; font-size: 14px; line-height: 1; }
        .scal-today { border-top: 1px solid #e5e7eb; padding-top: 8px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
        .scal-today-head { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
        .scal-today-open { color: #b45309; }
        .scal-day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; flex: 1; min-height: 0; }
        .scal-day-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "pos time" "who who"; gap: 1px 8px; padding: 7px 10px; background: #f8fafc; border-radius: 6px; border-left: 3px solid #2563eb; }
        .scal-day-row.is-open { border-left-color: #f59e0b; background: #fffbeb; }
        .scal-day-pos { grid-area: pos; font-weight: 700; color: #1f2937; font-size: 13px; }
        .scal-day-time { grid-area: time; font-size: 12px; color: #6b7280; white-space: nowrap; align-self: center; }
        .scal-day-who { grid-area: who; color: #374151; font-size: 13px; }
        .scal-day-row .scal-open { font-size: 12px; }
        .scal-day-empty { padding: 14px 10px; color: #6b7280; font-style: italic; font-size: 13px; text-align: center; }

        /* ---- Fullscreen calendar overlay ---- */
        .scal-fs-overlay {
            position: fixed; inset: 0; z-index: 1500;
            background: #f8fafc;
            display: flex; flex-direction: column;
        }
        .scal-fs { display: flex; flex-direction: column; height: 100%; width: 100%; }
        .scal-fs-head {
            display: flex; align-items: center; gap: 12px;
            padding: 8px 16px; background: #0a2847; color: #fff;
            border-bottom: 1px solid #061423; min-height: 48px;
        }
        .scal-fs-title { font-size: 16px; font-weight: 700; }
        .scal-fs-tabs { display: flex; gap: 4px; margin-left: 16px; flex: 1; overflow-x: auto; }
        .scal-month-tab {
            padding: 5px 12px; background: transparent; color: #c8d4e3;
            border: 1px solid transparent; border-radius: 6px 6px 0 0;
            font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; min-height: 32px;
        }
        .scal-month-tab:hover { background: #15406b; color: #fff; }
        .scal-month-tab.is-active { background: #f8fafc; color: #1f2937; border-color: #061423; border-bottom-color: #f8fafc; margin-bottom: -1px; font-weight: 700; }
        .scal-fs-close { width: 36px; height: 36px; border-radius: 6px; background: transparent; color: #c8d4e3; border: 1px solid #1f4a78; cursor: pointer; font-size: 20px; line-height: 1; }
        .scal-fs-close:hover { background: #15406b; color: #fff; }

        .scal-fs-search-wrap {
            display: flex; align-items: center; gap: 8px;
            margin-right: 8px;
        }
        .scal-fs-search {
            padding: 6px 10px; border: 1px solid #1f4a78; border-radius: 6px;
            background: #15406b; color: #fff;
            font-size: 13px; min-height: 32px; width: 220px;
        }
        .scal-fs-search::placeholder { color: #93a3b3; }
        .scal-fs-search:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
        .scal-fs-search-info { font-size: 11px; color: #d6dde6; white-space: nowrap; }

        /* Day cells: matching / dimmed */
        .scal-cell-match {
            background: #fef9c3 !important;
            border-color: #d97706 !important; border-width: 2px;
            box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35);
        }
        .scal-cell-dim { opacity: 0.35; }

        .scal-list-day-match {
            background: #fef9c3 !important;
            border-color: #d97706 !important; border-width: 2px;
        }
        .scal-list-day-dim { opacity: 0.35; }

        .scal-cell-shift-match {
            background: #fde68a;
            font-weight: 700;
            border-radius: 3px;
            padding: 1px 3px !important;
        }

        .scal-fs-body { flex: 1; display: flex; min-height: 0; }

        /* ---- Positions sidebar (drag sources) ---- */
        .scal-pos-sidebar {
            width: 220px; flex-shrink: 0;
            background: #fff; border-right: 1px solid #e5e7eb;
            padding: 12px; overflow-y: auto;
        }
        .scal-pos-sb-head { font-size: 14px; font-weight: 700; color: #1f2937; margin-bottom: 4px; }
        .scal-pos-sb-hint { font-size: 11px; color: #6b7280; margin: 0 0 10px; }
        .scal-pos-sb-list { display: flex; flex-direction: column; gap: 6px; }
        .scal-pos-card {
            padding: 8px 10px; background: #eff6ff; border: 1px solid #93c5fd;
            border-radius: 6px; cursor: grab; user-select: none;
            transition: background 0.15s, transform 0.1s;
        }
        .scal-pos-card:active { cursor: grabbing; }
        .scal-pos-card:hover { background: #dbeafe; }
        .scal-pos-card.scal-dragging { opacity: 0.5; }
        .scal-pos-card.scal-armed { background: #fde68a; border-color: #d97706; box-shadow: 0 0 0 2px rgba(217,119,6,0.4); }
        .scal-pos-card-name { font-size: 13px; font-weight: 700; color: #1e3a8a; }
        .scal-pos-card-time { font-size: 11px; color: #4b5563; margin-top: 2px; }
        .scal-pos-empty { font-size: 12px; color: #6b7280; font-style: italic; }

        /* ---- Calendar grid (desktop) ---- */
        .scal-cal-wrap { flex: 1; overflow-y: auto; padding: 12px; background: #f8fafc; }
        .scal-cal-grid { display: flex; flex-direction: column; gap: 4px; }
        .scal-cal-weekrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
        .scal-cal-weekday { font-size: 11px; font-weight: 700; color: #4b5563; text-align: center; padding: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
        .scal-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
        .scal-cell {
            min-height: 110px; max-height: 180px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
            padding: 4px 6px; cursor: pointer; display: flex; flex-direction: column;
            font-size: 11px; color: #1f2937; transition: background 0.1s, border-color 0.1s;
            overflow: hidden;
        }
        .scal-cell:hover { background: #f0f9ff; border-color: #93c5fd; }
        .scal-cell-out { background: #f9fafb; color: #9ca3af; }
        .scal-cell-today { border-color: #2563eb; border-width: 2px; padding: 3px 5px; }
        .scal-cell-weekend { background: #fefce8; }
        .scal-cell-weekend.scal-cell-out { background: #fafaf5; }
        .scal-cell-has-open { background: #fff7ed; }
        .scal-cell-has-open:hover { background: #ffedd5; }
        .scal-cell-head {
            /* Sticky header so day number + summary stay visible while scrolling */
            position: sticky; top: 0; background: inherit; z-index: 1;
            padding-bottom: 2px;
            border-bottom: 1px solid transparent;
        }
        .scal-cell-num { font-size: 12px; font-weight: 700; }
        .scal-cell-today .scal-cell-num { color: #2563eb; }
        .scal-cell-sum { font-size: 10px; color: #6b7280; }
        .scal-cell-sum .scal-cell-filled { color: #047857; margin-right: 4px; }
        .scal-cell-sum .scal-cell-open { color: #b45309; font-weight: 700; }
        .scal-cell-shifts {
            /* Internal scrolling list — each day independently */
            flex: 1; min-height: 0;
            overflow-y: auto; overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
            padding-right: 2px;
            margin-top: 2px;
        }
        .scal-cell-shifts::-webkit-scrollbar { width: 6px; }
        .scal-cell-shifts::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        .scal-cell-shifts::-webkit-scrollbar-track { background: transparent; }
        .scal-cell-shift { font-size: 10px; line-height: 1.3; padding: 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .scal-cell-shift.is-open { color: #b45309; font-weight: 600; }
        .scal-cell-shift-pos { font-weight: 600; }
        .scal-cell-shift-who { color: #4b5563; }
        .scal-cell.scal-drop-hover { background: #fef3c7 !important; border-color: #d97706 !important; box-shadow: inset 0 0 0 2px rgba(217,119,6,0.4); }

        /* ---- Calendar list (mobile) ---- */
        .scal-cal-list { display: flex; flex-direction: column; gap: 6px; }
        .scal-list-day {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 12px; background: #fff; border: 1px solid #e5e7eb;
            border-radius: 8px; cursor: pointer;
        }
        .scal-list-day:hover { background: #f0f9ff; border-color: #93c5fd; }
        .scal-list-day.is-today { border-color: #2563eb; border-width: 2px; }
        .scal-list-day.has-open { background: #fff7ed; }
        .scal-list-day-l { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
        .scal-list-day-num { font-size: 20px; font-weight: 700; color: #1f2937; line-height: 1; }
        .scal-list-day.is-today .scal-list-day-num { color: #2563eb; }
        .scal-list-day-wd { font-size: 10px; color: #6b7280; margin-top: 2px; text-transform: uppercase; }
        .scal-list-day-r { flex: 1; }
        .scal-list-day-sum { font-size: 13px; color: #4b5563; }
        .scal-list-day.scal-drop-hover { background: #fef3c7 !important; border-color: #d97706 !important; }

        /* ---- Submit bar ---- */
        .scal-submit-bar {
            display: flex; align-items: center; justify-content: space-between;
            padding: 8px 16px; background: #fff; border-top: 1px solid #e5e7eb;
            gap: 12px; flex-wrap: wrap;
        }
        .scal-submit-hint { font-size: 12px; color: #6b7280; transition: color 0.2s; }
        .scal-submit-hint.scal-submit-success { color: #047857; font-weight: 700; }
        .scal-submit-btn { background: #047857; border-color: #065f46; padding: 8px 20px; font-size: 14px; min-height: 38px; }
        .scal-submit-btn:hover { background: #065f46; }
        .scal-submit-btn.scal-submit-dirty {
            background: #d97706 !important; border-color: #b45309 !important; color: #fff !important;
            box-shadow: 0 0 0 2px rgba(217,119,6,0.35), 0 0 12px rgba(217,119,6,0.55);
            animation: scal-submit-pulse 1.5s ease-in-out infinite;
        }
        .scal-submit-btn.scal-submit-dirty:hover { background: #b45309 !important; }
        @keyframes scal-submit-pulse {
            0%, 100% { box-shadow: 0 0 0 2px rgba(217,119,6,0.35), 0 0 8px rgba(217,119,6,0.45); }
            50%      { box-shadow: 0 0 0 2px rgba(217,119,6,0.55), 0 0 16px rgba(217,119,6,0.85); }
        }
        @media (prefers-reduced-motion: reduce) {
            .scal-submit-btn.scal-submit-dirty { animation: none; }
        }

        /* ---- Day-detail modal ---- */
        .scal-day-overlay {
            position: fixed; inset: 0; z-index: 1600;
            background: rgba(15, 23, 42, 0.55);
            display: flex; align-items: center; justify-content: center;
            padding: 16px;
        }
        .scal-day-modal {
            background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            max-width: 640px; width: 100%; max-height: 90vh; display: flex; flex-direction: column;
            overflow: hidden;
        }
        .scal-day-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #0a2847; color: #fff; }
        .scal-day-title { font-size: 16px; font-weight: 700; }
        .scal-day-x { width: 32px; height: 32px; border-radius: 6px; background: transparent; color: #c8d4e3; border: 1px solid #1f4a78; cursor: pointer; font-size: 18px; line-height: 1; }
        .scal-day-x:hover { background: #15406b; color: #fff; }
        .scal-day-body { padding: 16px; overflow-y: auto; flex: 1; }
        .scal-day-shifts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
        .scal-shift-row {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 10px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px;
            font-size: 13px; flex-wrap: wrap;
        }
        .scal-shift-row.is-open { background: #fff7ed; border-color: #fed7aa; }
        .scal-shift-pos { font-weight: 700; min-width: 110px; }
        .scal-shift-row.is-open .scal-shift-pos::after { content: ' · OPEN'; color: #b45309; font-weight: 600; }
        .scal-shift-name { flex: 1; min-width: 160px; padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 13px; min-height: 30px; }
        .scal-shift-start, .scal-shift-end { width: 96px; padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 30px; }
        .scal-shift-sep { color: #6b7280; }
        .scal-shift-del { width: 28px; height: 28px; border-radius: 4px; background: transparent; color: #6b7280; border: 1px solid transparent; cursor: pointer; font-size: 16px; }
        .scal-shift-del:hover { background: #fde2e2; color: #b91c1c; border-color: #f0a3a3; }
        .scal-day-empty { color: #6b7280; font-style: italic; padding: 16px; text-align: center; }
        .scal-day-add { border-top: 1px solid #e5e7eb; padding-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .scal-day-add-head { font-size: 13px; font-weight: 700; color: #1f2937; width: 100%; margin-bottom: 4px; }
        .scal-day-add-pos { flex: 1; min-width: 180px; padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 13px; min-height: 32px; }
        .scal-day-add-btn { padding: 6px 14px; font-size: 13px; min-height: 32px; }
        .scal-day-add-other {
            flex-basis: 100%;
            display: flex; align-items: center; gap: 6px;
            margin-top: 6px; padding: 8px; background: #fffbeb;
            border: 1px solid #fbbf24; border-radius: 4px;
        }
        .scal-day-add-othername {
            flex: 1; min-width: 140px;
            padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 4px;
            font-size: 13px; min-height: 30px;
        }
        .scal-day-add-otherstart, .scal-day-add-otherend {
            width: 96px; padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 4px;
            font-size: 12px; min-height: 30px;
        }
        .scal-day-add-sep { color: #6b7280; }
        @media (max-width: 640px) {
            .scal-day-add-other { flex-wrap: wrap; }
            .scal-day-add-othername { flex-basis: 100%; }
        }

        /* ---- Mobile responsiveness ---- */
        @media (max-width: 900px) {
            .scal-pos-sidebar { width: 180px; padding: 8px; }
            .scal-fs-tabs { margin-left: 6px; }
            .scal-fs-title { font-size: 14px; }
            .scal-cell { min-height: 70px; padding: 3px 4px; }
            .scal-cell-shift { font-size: 9px; }
        }
        @media (max-width: 640px) {
            .scal-fs-body { flex-direction: column; }
            .scal-pos-sidebar { width: 100%; max-height: 32vh; border-right: none; border-bottom: 1px solid #e5e7eb; }
            .scal-pos-sb-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
            .scal-fs-head { padding: 6px 10px; min-height: 44px; flex-wrap: wrap; }
            .scal-fs-title { font-size: 13px; flex: 1; }
            .scal-month-tab { font-size: 12px; padding: 4px 8px; min-height: 30px; }
            .scal-fs-close { width: 30px; height: 30px; }
            .scal-fs-search-wrap { width: 100%; order: 99; margin: 4px 0 0; }
            .scal-fs-search { width: 100%; }
            .scal-cal-wrap { padding: 8px; }
            .scal-submit-bar { padding: 6px 10px; }
            .scal-submit-hint { font-size: 11px; flex-basis: 100%; }
            .scal-day-modal { max-height: 100vh; border-radius: 0; }
            .scal-shift-row { padding: 6px 8px; }
            .scal-shift-pos { min-width: 100%; }
            .scal-shift-name { min-width: 100%; }
            .scal-shift-start, .scal-shift-end { flex: 1; }
        }
        @media (max-width: 380px) {
            .scal-pos-sb-list { grid-template-columns: 1fr; }
            .scal-pos-sb-hint { font-size: 10px; }
        }

        /* Sync button group inside the calendar submit bar */
        .scal-submit-actions { display: flex; gap: 8px; }
        .scal-sync-btn { background: #1f4a78; }
        .scal-sync-btn:hover { background: #2a5f99; }
        .scal-synclog-btn { background: #475569; border-color: #334155; padding: 8px 10px; }
        .scal-synclog-btn:hover { background: #334155; }

        /* External name field next to the position row in build mode */
        .scal-pos-extnames {
            flex: 1; min-width: 140px; padding: 4px 6px;
            border: 1px solid #c3ccd6; border-radius: 4px;
            font-size: 12px; min-height: 30px; background: #fffbeb;
        }
        .scal-integration-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #cbd5e1; }

        /* =========================================================
           UNIVERSAL SYNC ENGINE — UI
           ========================================================= */

        /* ---- Build panel ---- */
        .sync-build-panel {
            background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px;
            padding: 10px 12px; font-size: 13px; color: #1f2937;
        }
        .sync-toggle { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
        .sync-toggle input { width: 18px; height: 18px; }
        .sync-build-body { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
        .sync-build-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .sync-build-row label { font-size: 12px; font-weight: 600; min-width: 110px; }
        .sync-build-row select, .sync-build-row input[type="text"] {
            padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 4px;
            font-size: 13px; min-height: 32px; flex: 1; min-width: 140px;
        }
        .sync-build-formats { background: #fff; padding: 8px; border-radius: 6px; border: 1px solid #e5e7eb; }
        .sync-build-formats label { min-width: 100px; }
        .sync-provider-cfg { background: #fff; padding: 10px 12px; border-radius: 6px; border: 1px solid #e5e7eb; }
        .sync-pcfg { display: flex; flex-direction: column; gap: 8px; }
        .sync-pcfg label { font-size: 12px; font-weight: 600; }
        .sync-pcfg input[type="text"], .sync-pcfg input[type="password"], .sync-pcfg select {
            padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 4px;
            font-size: 13px; min-height: 32px;
        }
        .sync-pcfg-hint { font-size: 11px; color: #4b5563; margin: 0 0 6px; }
        .sync-pcfg-tip { font-size: 11px; color: #6b7280; background: #fffbeb; padding: 6px 8px; border-left: 3px solid #fbbf24; border-radius: 2px; margin: 6px 0 0; }
        .sync-pcfg-tip code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; font-size: 11px; }
        .sync-webhook-url { display: flex; gap: 6px; }
        .sync-webhook-url-input { flex: 1; font-family: monospace; font-size: 11px; }
        .sync-webhook-copy { padding: 6px 10px; background: #1f4a78; color: #fff; border: 1px solid #2a5f99; border-radius: 4px; cursor: pointer; font-size: 12px; min-height: 32px; }
        .sync-rest-paths, .sync-rest-xform {
            margin-top: 8px; padding: 8px;
            background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px;
        }
        .sync-rest-paths summary, .sync-rest-xform summary {
            cursor: pointer; font-weight: 600; font-size: 13px; color: #1f2937;
        }
        .sync-rest-paths > label, .sync-rest-xform > label,
        .sync-rest-paths > p, .sync-rest-xform > p {
            margin-top: 6px;
        }
        .sync-rest-transform {
            width: 100%; min-height: 180px;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 12px; padding: 8px; border: 1px solid #c3ccd6; border-radius: 4px;
            resize: vertical;
        }
        .sync-rest-test-bar { margin-top: 6px; }
        .sync-rest-test-panel {
            margin-top: 8px; padding: 8px; background: #fffbeb;
            border: 1px solid #fbbf24; border-radius: 4px;
        }
        .sync-rest-test-sample {
            width: 100%; min-height: 100px;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 11px; padding: 6px; border: 1px solid #c3ccd6; border-radius: 4px;
            resize: vertical; margin: 6px 0;
        }
        .sync-rest-test-output { margin-top: 8px; }
        .sync-rest-test-table {
            width: 100%; border-collapse: collapse; margin-top: 6px;
            font-size: 11px;
        }
        .sync-rest-test-table th, .sync-rest-test-table td {
            border: 1px solid #e5e7eb; padding: 3px 6px; text-align: left;
        }
        .sync-rest-test-table th { background: #f1f5f9; font-weight: 700; }

        .sync-rest-cred { background: #fffbeb; padding: 8px; border-radius: 4px; border: 1px solid #fbbf24; display: flex; flex-direction: column; gap: 6px; }
        .sync-rest-cred-save { padding: 6px 12px; background: #047857; color: #fff; border: 1px solid #065f46; border-radius: 4px; cursor: pointer; font-size: 12px; min-height: 32px; align-self: flex-start; }
        .sync-oauth-status { padding: 8px 10px; border-radius: 4px; font-size: 12px; }
        .sync-oauth-ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
        .sync-oauth-warn { background: #fffbeb; color: #b45309; border: 1px solid #fbbf24; }
        .sync-oauth-connect, .sync-oauth-disconnect { padding: 4px 10px; background: #1f4a78; color: #fff; border: 1px solid #2a5f99; border-radius: 4px; cursor: pointer; font-size: 12px; min-height: 28px; margin-left: 8px; }

        /* ---- Sync modal ---- */
        .sync-modal-overlay {
            position: fixed; inset: 0; z-index: 1700;
            background: rgba(15, 23, 42, 0.55);
            display: flex; align-items: center; justify-content: center;
            padding: 16px;
        }
        .sync-modal {
            background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            max-width: 720px; width: 100%; max-height: 90vh;
            display: flex; flex-direction: column;
        }
        .sync-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #0a2847; color: #fff; border-radius: 12px 12px 0 0; }
        .sync-modal-head h3 { margin: 0; font-size: 16px; }
        .sync-modal-x { width: 32px; height: 32px; border-radius: 6px; background: transparent; color: #c8d4e3; border: 1px solid #1f4a78; cursor: pointer; font-size: 18px; line-height: 1; }
        .sync-modal-x:hover { background: #15406b; color: #fff; }
        .sync-modal-body { padding: 16px; overflow-y: auto; flex: 1; }
        .sync-modal-foot { padding: 12px 16px; border-top: 1px solid #e5e7eb; display: flex; gap: 8px; justify-content: flex-end; }
        .sync-modal-hint { font-size: 13px; color: #4b5563; margin: 0 0 12px; }
        .sync-btn { padding: 8px 16px; background: #1f4a78; color: #fff; border: 1px solid #2a5f99; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; min-height: 36px; }
        .sync-btn:hover { background: #2a5f99; }
        .sync-cancel-btn { background: transparent; color: #4b5563; border-color: #cbd5e1; }
        .sync-cancel-btn:hover { background: #f3f4f6; color: #1f2937; }
        .sync-apply-btn { background: #047857; border-color: #065f46; }
        .sync-apply-btn:hover { background: #065f46; }

        .sync-daterange { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
        .sync-daterange label { font-size: 12px; font-weight: 600; }
        .sync-daterange input[type="date"] { padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 13px; min-height: 32px; }
        .sync-range-today, .sync-range-week, .sync-range-month { padding: 5px 10px; background: #f3f4f6; border: 1px solid #c3ccd6; border-radius: 4px; cursor: pointer; font-size: 12px; min-height: 32px; }
        .sync-range-today:hover, .sync-range-week:hover, .sync-range-month:hover { background: #e5e7eb; }

        .sync-paste-area { margin: 12px 0; }
        .sync-paste-text { width: 100%; padding: 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-family: monospace; font-size: 12px; resize: vertical; min-height: 140px; }

        .sync-preview { margin-top: 16px; padding: 12px; background: #f8fafc; border-radius: 8px; }
        .sync-preview h4 { margin: 0 0 8px; font-size: 14px; }
        .sync-preview-stats { margin-bottom: 8px; }
        .sync-stat-row { display: flex; gap: 16px; font-size: 13px; font-weight: 600; }
        .sync-stat-ok { color: #047857; }
        .sync-stat-warn { color: #b45309; }
        .sync-preview-unmapped { margin: 8px 0; }
        .sync-preview-unmapped summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #b45309; }
        .sync-preview-unmapped ul { margin: 6px 0; padding-left: 22px; font-size: 12px; color: #4b5563; }
        .sync-preview-unmapped code { background: #fff; padding: 1px 4px; border-radius: 3px; font-size: 11px; }
        .sync-unmapped-hint { font-size: 11px; color: #6b7280; margin: 4px 0; }
        .sync-preview-list { margin: 8px 0; }
        .sync-preview-list summary { cursor: pointer; font-size: 12px; font-weight: 600; }
        .sync-prev-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 200px; overflow-y: auto; font-size: 12px; }
        .sync-prev-list li { padding: 4px 6px; border-bottom: 1px solid #e5e7eb; display: grid; grid-template-columns: 110px 1fr 1fr auto; gap: 8px; align-items: center; }
        .sync-prev-list li:last-child { border-bottom: none; }
        .sync-prev-date { font-weight: 600; color: #1f2937; }
        .sync-prev-key { color: #2563eb; font-family: monospace; font-size: 11px; }
        .sync-prev-who { color: #4b5563; }
        .sync-prev-time { color: #6b7280; font-size: 11px; }
        .sync-prev-more { color: #6b7280; font-style: italic; }
        .sync-prev-empty { color: #6b7280; font-style: italic; padding: 8px; }

        .sync-apply-options { margin-top: 12px; padding: 10px; background: #fff; border-radius: 6px; border: 1px solid #e5e7eb; }
        .sync-apply-head { font-size: 12px; font-weight: 700; margin-bottom: 6px; color: #1f2937; }
        .sync-apply-options label { display: block; padding: 4px 0; font-size: 12px; cursor: pointer; }
        .sync-apply-options input[type="radio"] { margin-right: 6px; }

        .sync-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 8px 12px; border-radius: 6px; margin-top: 12px; font-size: 13px; }

        /* ---- Sync log modal ---- */
        .sync-log-overlay { position: fixed; inset: 0; z-index: 1700; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
        .sync-log-modal { background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); max-width: 720px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; }
        .sync-log-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #0a2847; color: #fff; border-radius: 12px 12px 0 0; }
        .sync-log-head h3 { margin: 0; font-size: 16px; }
        .sync-log-x { width: 32px; height: 32px; border-radius: 6px; background: transparent; color: #c8d4e3; border: 1px solid #1f4a78; cursor: pointer; font-size: 18px; }
        .sync-log-body { padding: 16px; overflow-y: auto; flex: 1; }
        .sync-log-row { padding: 8px; border-bottom: 1px solid #e5e7eb; display: grid; grid-template-columns: 160px 100px 1fr; gap: 8px; align-items: center; font-size: 12px; }
        .sync-log-when { color: #1f2937; font-weight: 600; }
        .sync-log-who { color: #6b7280; }
        .sync-log-summary { color: #4b5563; }

        /* Mobile adjustments */
        @media (max-width: 640px) {
            .sync-modal { max-height: 100vh; border-radius: 0; }
            .sync-modal-foot { flex-direction: column; }
            .sync-btn { width: 100%; }
            .sync-prev-list li { grid-template-columns: 1fr; gap: 2px; padding: 6px; }
            .sync-log-row { grid-template-columns: 1fr; gap: 2px; }
            .scal-submit-actions { flex-wrap: wrap; width: 100%; }
            .scal-sync-btn, .scal-synclog-btn, .scal-submit-btn { flex: 1; }
        }


        /* Compact tab bar on small screens */
        @media (max-width: 640px) {
            .tab-bar { padding: 4px 6px; gap: 4px; min-height: 36px; }
            .tab-btn { padding: 4px 8px; font-size: 12px; max-width: 140px; min-height: 30px; }
            .tab-btn .tab-name { max-width: 110px; }
            .tab-add { min-width: 28px; height: 28px; font-size: 16px; }
            .tab-edit-btn { min-width: 28px; height: 28px; font-size: 13px; }
        }
        @media (max-width: 380px) {
            .tab-btn .tab-count { display: none; }
            .tab-edit-group { padding-left: 4px; }
        }