* {
            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. */
            /* Header action buttons → clean 3-per-row grid of card-style tiles,
               same height as the section cards below but a distinct teal scheme. */
            .header-right {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 8px !important;
                width: 100% !important;
                padding: 8px !important;
                box-sizing: border-box !important;
                align-items: stretch !important;
            }
            .ai-hdr-btns { display: contents !important; }
            #displayPageButtons:not([style*="display:none"]):not([style*="display: none"]) { display: block !important; margin: 0 !important; }
            /* Build- and admin-only controls never belong on mobile. */
            #layoutToggleBtn, #saveBtn, #archiveBtn, #compReportBtn { display: none !important; }
            /* Only the user-facing actions become tiles. */
            .header-right > .btn:not(#helpBtn):not(#layoutToggleBtn):not(#saveBtn):not(#archiveBtn):not([style*="display:none"]):not([style*="display: none"]),
            .ai-hdr-btns > .btn:not(#compReportBtn):not([style*="display:none"]):not([style*="display: none"]),
            .header-right > #displayPageButtons:not([style*="display:none"]):not([style*="display: none"]) {
                position: static !important;
                width: auto !important;
                min-width: 0 !important;
                height: 76px !important;
                min-height: 76px !important;
                margin: 0 !important;
                padding: 6px 8px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                font-size: 13px !important;
                font-weight: 700 !important;
                line-height: 1.2 !important;
                border-radius: 10px !important;
                background: linear-gradient(135deg, #0e8a8a, #0a5566) !important;
                color: #fff !important;
                border: 1px solid rgba(255,255,255,0.16) !important;
                box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
                overflow: hidden !important;
                white-space: normal !important;
                word-break: break-word !important;
                letter-spacing: 0 !important;
            }
            /* The Data Pages select fills its tile. */
            #displayPageButtons > #dataPageSelect {
                width: 100% !important;
                height: 100% !important;
                background: transparent !important;
                border: none !important;
                color: #fff !important;
                font-weight: 700 !important;
                font-size: 13px !important;
                text-align: center !important;
                text-align-last: center !important;
                cursor: pointer !important;
                display: block !important;
            }
            /* Help "?" keeps its own compact round style, out of the tile grid. */
            #helpBtn { justify-self: end !important; }
        }
        /* Login/Logout button states (all viewports). Orange = session expired /
           read-only; the user can log in again to restore editing. */
        #loginBtn.is-expired { background: #c2410c !important; border-color: #c2410c !important; color: #fff !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 ACTION ZONES: left = one-time products, center = sign in,
           right = subscription / no-login tools ===== */
        /* Only the Sign In button lives here, centered at the bottom, in normal flow. */
        .splash-actions {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 26px;
        }
        .splash-zone {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        /* The two product buttons are FLUNG UP to the clock's level and OUT to the
           screen edges (the "arms out" of the sketch) — pinned to the viewport so
           only Sign In sits at the bottom center. Direct children of .splash-screen
           (no transform) so `fixed` anchors to the viewport. They fade with the
           splash because they're descendants of it. */
        .splash-side { position: fixed; top: 30%; z-index: 9001; }
        .splash-side-left  { left: 6%; align-items: flex-start; }
        .splash-side-right { right: 6%; align-items: flex-end; }
        .splash-zone-label {
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #7f93b5;
            font-weight: 700;
        }
        .splash-zone .splash-wcag-btn,
        .splash-zone .splash-jobsearch-btn { margin-top: 0; }

        /* Left product button (single purchases: WCAG report, future items). */
        .splash-wcag-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 20px;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #c9d8f5;
            background: rgba(29, 79, 176, 0.18);
            border: 1px solid rgba(122, 162, 255, 0.45);
            border-radius: 10px;
            cursor: pointer;
            min-height: 46px;
            letter-spacing: 0.2px;
            transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
        }
        .splash-wcag-btn:hover {
            background: rgba(29, 79, 176, 0.32);
            border-color: rgba(122, 162, 255, 0.75);
            transform: translateY(-1px);
        }
        .splash-wcag-btn:active { transform: translateY(0); }
        .splash-wcag-btn:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }

        /* On narrower screens the arms-out layout would overlap the clock, so the
           side buttons drop into a normal stacked row centered under Sign In. */
        @media (max-width: 900px) {
            .splash-side {
                position: static; top: auto; left: auto; right: auto;
                align-items: center !important;
                margin: 14px auto 0; width: 100%; max-width: 340px;
            }
            .splash-side .splash-wcag-btn,
            .splash-side .splash-jobsearch-btn { width: 100%; }
            .splash-zone-label { text-align: center; }
        }

        /* Secondary splash action: public Job Search (no login). */
        .splash-jobsearch-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 28px;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #e6f0ff;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(148, 189, 255, 0.4);
            border-radius: 8px;
            cursor: pointer;
            min-height: 46px;
            letter-spacing: 0.3px;
            transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
        }
        .splash-jobsearch-btn:hover {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(148, 189, 255, 0.7);
            transform: translateY(-1px);
        }
        .splash-jobsearch-btn:active { transform: translateY(0); }
        .splash-jobsearch-btn:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }

        /* ===== PUBLIC JOB SEARCH OVERLAY (no login) ===== */
        .public-job-overlay {
            position: fixed;
            inset: 0;
            /* 9000 = the layer the old splash screen used. MUST stay BELOW the modal
               layer (.modal-overlay = 9999) or every modal opened from this view --
               the org picker, login, Feedback, "Don't see your org?" -- renders behind
               the job board and looks like a dead button. */
            z-index: 9000;
            background: #eef2f7;
            display: flex;
            flex-direction: column;
            overflow: hidden;          /* clip to viewport so the body scrolls, not the overlay */
        }
        .public-job-bar {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;           /* title + buttons drop to a second line on narrow phones */
            gap: 12px;
            padding: 12px 16px;
            background: #0a2847;
            color: #ffffff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        .public-job-title { font-size: 16px; font-weight: 700; letter-spacing: 0.2px; }
        .public-job-exit {
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            min-height: 40px;
        }
        .public-job-exit:hover { background: rgba(255, 255, 255, 0.22); }
        .public-job-exit:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
        /* LOGIN — sits where Exit used to, in the public job bar. Solid white so it
           reads as the primary action against the dark bar (the neighbouring buttons
           are translucent/secondary). */
        .public-job-login {
            background: #ffffff;
            color: #0a2847;
            border: 1px solid #ffffff;
            border-radius: 8px;
            padding: 8px 22px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            min-height: 40px;
            white-space: nowrap;
            font-family: inherit;
        }
        .public-job-login:hover { background: #e2e8f0; border-color: #e2e8f0; }
        .public-job-login:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
        /* (No #loginModal z-index override here on purpose. The public job overlay sits
           at 9000, below the 9999 modal layer, so modals stack correctly on their own.) */
        /* "Don't see your org?" request button — used in BOTH the public job bar
           and the data-page header (both dark), so it uses light translucent
           styling that reads on a dark background. */
        .jobboard-orgreq-btn, .jobboard-feedback-btn {
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            min-height: 40px;
            white-space: nowrap;
            font-family: inherit;
        }
        .jobboard-orgreq-btn:hover, .jobboard-feedback-btn:hover { background: rgba(255, 255, 255, 0.22); }
        .jobboard-orgreq-btn:focus-visible, .jobboard-feedback-btn:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
        .public-job-body {
            flex: 1 1 auto;
            min-height: 0;             /* REQUIRED so a flex child can shrink and its overflow:auto actually scrolls (fixes mobile no-scroll/overlap) */
            overflow: auto;
            padding: 16px;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        .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; }
            /* Tabs stay as buttons and scroll horizontally if they overflow. */
            .tab-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
            .tab-btn { padding: 4px 8px; font-size: 12px; max-width: 140px; min-height: 30px; flex: 0 0 auto; }
            .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; }
        }

        /* =========================================================
           COMPLIANCE + EMPLOYEE COMPLIANCE MODULES
           ========================================================= */
        .section.build-mode .comp-input-only { display: none; }
        .section.user-mode  .comp-build-only { display: none; }

        /* ---- Build mode: requirement editor ---- */
        .comp-builder { display: flex; flex-direction: column; gap: 8px; }
        .comp-b-head { font-weight: 700; color: #0a2847; font-size: 14px; }
        .comp-b-list { display: flex; flex-direction: column; gap: 8px; }
        .comp-b-empty { color: #6b7280; font-style: italic; font-size: 13px; margin: 4px 0; }
        .comp-b-row { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
        .comp-b-main { display: flex; gap: 6px; align-items: center; }
        .comp-b-name { flex: 2; min-width: 0; padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 13px; min-height: 32px; }
        .comp-b-cat { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 32px; }
        .comp-b-desc { padding: 5px 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 32px; width: 100%; box-sizing: border-box; }
        .comp-b-del { width: 30px; min-width: 30px; height: 30px; border: none; border-radius: 4px; background: #fee2e2; color: #b91c1c; font-size: 18px; line-height: 1; cursor: pointer; }
        .comp-b-del:hover { background: #fecaca; }
        .comp-b-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: #374151; }
        .comp-b-meta select, .comp-b-interval, .comp-b-warndays { padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 30px; }
        .comp-b-interval, .comp-b-warndays { width: 56px; }
        .comp-b-recur { display: inline-flex; gap: 4px; align-items: center; }
        .comp-b-warn { display: inline-flex; gap: 4px; align-items: center; }
        .comp-b-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .comp-b-add, .comp-b-tpl, .comp-b-savetpl { padding: 7px 12px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 36px; }
        .comp-b-add { background: #0a2847; color: #fff; }
        .comp-b-tpl { background: #0e7490; color: #fff; }
        .comp-b-savetpl { background: #475569; color: #fff; }
        .comp-b-hint { font-size: 11px; color: #6b7280; margin: 2px 0 0; }

        /* ---- Shared buttons / badges / pills ---- */
        .comp-btn { padding: 6px 11px; border: none; border-radius: 6px; background: #0a2847; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 32px; }
        .comp-btn:hover { filter: brightness(1.1); }
        .comp-btn-warn { background: #b45309; }
        .comp-mini { background: #e5e7eb; color: #1f2937; padding: 5px 9px; }
        .comp-done-btn { background: #15803d; }
        .comp-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
        .comp-badge-red { background: #fee2e2; color: #b91c1c; }
        .comp-badge-yel { background: #fef3c7; color: #92400e; }
        .comp-badge-grn { background: #dcfce7; color: #166534; }
        .comp-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
        .comp-pill.comp-overdue { background: #fee2e2; color: #b91c1c; }
        .comp-pill.comp-approaching { background: #fef3c7; color: #92400e; }
        .comp-pill.comp-ok { background: #dcfce7; color: #166534; }
        .comp-pill.comp-unset { background: #e5e7eb; color: #475569; }
        .comp-pill.comp-na { background: #eef2f7; color: #64748b; }
        .comp-lock { font-size: 13px; }
        .comp-empty { color: #6b7280; font-style: italic; font-size: 13px; text-align: center; padding: 14px 8px; }

        /* ---- Facility input list ---- */
        .comp-list { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
        .comp-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .comp-chips { display: flex; gap: 6px; }
        .comp-chip { padding: 5px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 30px; }
        .comp-chip.is-active { background: #0a2847; color: #fff; border-color: #0a2847; }
        .comp-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 0; }
        .comp-card { display: flex; gap: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
        .comp-card-l { width: 6px; flex: 0 0 6px; display: flex; }
        .comp-card.comp-overdue { border-left: 0; box-shadow: inset 6px 0 0 #c62828; }
        .comp-card.comp-approaching { box-shadow: inset 6px 0 0 #f9a825; }
        .comp-card.comp-ok { box-shadow: inset 6px 0 0 #2e7d32; }
        .comp-card.comp-unset { box-shadow: inset 6px 0 0 #90a4ae; }
        .comp-card.comp-na { box-shadow: inset 6px 0 0 #b0bec5; }
        .comp-card-dot { display: none; }
        .comp-card-body { padding: 8px 10px 9px; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        .comp-card-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
        .comp-card-name { font-weight: 700; color: #1f2937; font-size: 14px; }
        .comp-card-cat { font-size: 11px; color: #475569; background: #eef2f7; padding: 1px 7px; border-radius: 999px; }
        .comp-card-desc { font-size: 12px; color: #6b7280; }
        .comp-card-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #374151; }
        .comp-card-count { font-weight: 600; }
        .comp-card.comp-overdue .comp-card-count { color: #b91c1c; }
        .comp-card.comp-approaching .comp-card-count { color: #b45309; }
        .comp-card-na { color: #64748b; font-style: italic; }
        .comp-card-last { color: #6b7280; }
        .comp-card-ctrls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
        .comp-due-lbl { font-size: 11px; color: #6b7280; display: inline-flex; align-items: center; gap: 4px; }
        .comp-due-input { padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 30px; }

        /* ---- Modal (templates / history) ---- */
        .comp-modal-overlay { position: fixed; inset: 0; z-index: 1600; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
        .comp-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
        .comp-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #0a2847; color: #fff; }
        .comp-modal-title { font-weight: 700; font-size: 15px; }
        .comp-modal-x { width: 32px; height: 32px; border: none; border-radius: 6px; background: transparent; color: #fff; font-size: 20px; cursor: pointer; }
        .comp-modal-x:hover { background: rgba(255,255,255,.15); }
        .comp-modal-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
        .comp-modal-lbl { font-size: 12px; font-weight: 700; color: #374151; }
        .comp-tpl-select { padding: 8px; border: 1px solid #c3ccd6; border-radius: 6px; font-size: 14px; min-height: 38px; }
        .comp-modal-note { font-size: 12px; color: #6b7280; }
        .comp-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .comp-hist { width: 100%; border-collapse: collapse; font-size: 12px; }
        .comp-hist th, .comp-hist td { border: 1px solid #e5e7eb; padding: 5px 7px; text-align: left; }
        .comp-hist th { background: #f1f5f9; }

        /* ---- Employee roster ---- */
        .ecomp-roster { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
        .ecomp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .ecomp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; overflow-y: auto; flex: 1; min-height: 0; align-content: start; }
        .ecomp-emp { display: flex; gap: 9px; align-items: center; text-align: left; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 11px; cursor: pointer; }
        .ecomp-emp.comp-overdue { box-shadow: inset 5px 0 0 #c62828; }
        .ecomp-emp.comp-approaching { box-shadow: inset 5px 0 0 #f9a825; }
        .ecomp-emp.comp-ok { box-shadow: inset 5px 0 0 #2e7d32; }
        .ecomp-emp.comp-unset, .ecomp-emp.comp-na { box-shadow: inset 5px 0 0 #90a4ae; }
        .ecomp-emp:hover { background: #f8fafc; }
        .ecomp-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; }
        .ecomp-photo-ph { display: flex; align-items: center; justify-content: center; background: #0a2847; color: #fff; font-weight: 700; font-size: 17px; }
        .ecomp-emp-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
        .ecomp-emp-name { font-weight: 700; color: #1f2937; font-size: 14px; display: flex; align-items: center; gap: 6px; }
        .ecomp-emp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
        .ecomp-emp-job { font-size: 12px; color: #475569; }
        .ecomp-emp-sub { font-size: 11px; color: #6b7280; }
        .ecomp-add { align-self: flex-start; }

        /* ---- Employee overlay ---- */
        .ecomp-ov { max-width: 560px; }
        .ecomp-ov-edit { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
        .ecomp-ov-name, .ecomp-ov-job { padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 13px; min-height: 34px; flex: 1; min-width: 120px; }
        .ecomp-ov-reqs { display: flex; flex-direction: column; gap: 8px; }
        .ecomp-req { display: flex; gap: 9px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; }
        .ecomp-req.comp-overdue { box-shadow: inset 5px 0 0 #c62828; }
        .ecomp-req.comp-approaching { box-shadow: inset 5px 0 0 #f9a825; }
        .ecomp-req.comp-ok { box-shadow: inset 5px 0 0 #2e7d32; }
        .ecomp-req.comp-unset, .ecomp-req.comp-na { box-shadow: inset 5px 0 0 #90a4ae; }
        .ecomp-req .comp-card-dot { display: none; }
        .ecomp-req-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        .ecomp-req-top { display: flex; align-items: center; gap: 7px; }
        .ecomp-req-name { font-weight: 700; color: #1f2937; font-size: 13px; }
        .ecomp-req-sub { font-size: 12px; color: #6b7280; }
        .ecomp-req-ctrls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
        .ecomp-due { padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 30px; }

        /* ---- Attachments + build display-field selector ---- */
        .comp-b-display { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #374151; }
        .comp-b-display select { padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 30px; }
        .comp-attach-btn { display: inline-flex; align-items: center; cursor: pointer; }
        .comp-atts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
        .comp-att { display: inline-flex; align-items: center; gap: 2px; background: #eef2f7; border: 1px solid #d6deea; border-radius: 6px; padding: 2px 4px 2px 7px; font-size: 11px; max-width: 100%; }
        .comp-att a { color: #0a4d8c; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
        .comp-att a:hover { text-decoration: underline; }
        .comp-att-x { width: 18px; height: 18px; border: none; border-radius: 4px; background: transparent; color: #b91c1c; font-size: 14px; line-height: 1; cursor: pointer; }
        .comp-att-x:hover { background: #fee2e2; }

        /* ---- Notes, per-employee item form, employee build panel ---- */
        .comp-note-input { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px dashed #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 30px; margin-top: 4px; background: #fffdf5; }
        .comp-note-ro { font-size: 12px; color: #555; margin-top: 4px; }
        .ecomp-build { display: flex; flex-direction: column; gap: 6px; }
        .ecomp-ov-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
        .comp-item-form { gap: 6px; }
        .comp-item-form input, .comp-item-form select { padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 13px; min-height: 34px; }
        .comp-item-form .cif-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
        .comp-item-form .cif-interval { width: 60px; }
        .ecomp-tpl-select { padding: 8px; border: 1px solid #c3ccd6; border-radius: 6px; font-size: 14px; min-height: 38px; }
        .comp-card-hrs { font-weight: 600; color: #0e7490; }
        .comp-card-assigned { color: #475569; }
        .comp-b-assigned { flex: 1; min-width: 120px; padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 4px; font-size: 12px; min-height: 30px; }
        .comp-b-hours { width: 56px; }
        .comp-report-btns { display: inline-flex; gap: 6px; }

        @media (max-width: 640px) {
            .ecomp-grid { grid-template-columns: 1fr; }
            .comp-b-main { flex-wrap: wrap; }
            .comp-b-name, .comp-b-cat { flex-basis: 100%; }
            .comp-card-ctrls { width: 100%; }
            .comp-modal { max-height: 100vh; border-radius: 0; }
        }

        /* ===== AI CANVAS (floating, AI-rendered visualizations) ===== */
        .ai-canvas-panel {
            position: fixed;
            right: 24px;
            bottom: 24px;
            width: 560px;
            max-width: calc(100vw - 32px);
            height: 460px;
            max-height: calc(100vh - 48px);
            background: #ffffff;
            border: 1px solid #cdd7e2;
            border-radius: 12px;
            box-shadow: 0 18px 48px rgba(15, 30, 50, 0.32);
            display: none;
            flex-direction: column;
            overflow: hidden;
            z-index: 4000;
        }
        .ai-canvas-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px 8px 14px;
            background: linear-gradient(90deg, #1f3a5f, #2a5298);
            color: #fff;
            cursor: move;
            user-select: none;
            flex: 0 0 auto;
        }
        .ai-canvas-title {
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ai-canvas-btns { display: flex; gap: 6px; flex: 0 0 auto; }
        .ai-canvas-btn {
            width: 26px;
            height: 26px;
            border: none;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.16);
            color: #fff;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ai-canvas-btn:hover { background: rgba(255, 255, 255, 0.30); }
        .ai-canvas-body { flex: 1 1 auto; background: #fff; }
        .ai-canvas-frame { width: 100%; height: 100%; border: 0; display: block; }

        @media (max-width: 640px) {
            .ai-canvas-panel {
                right: 0; left: 0; bottom: 0; top: 0;
                width: 100%; height: 100%;
                max-width: 100vw; max-height: 100vh;
                border-radius: 0;
            }
        }

/* ===== Employee detail tabs (Profile / Documents / Performance / Notes) ===== */
.ecomp-ov-wide { max-width: 640px; }
.ecomp-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid #e1e6ec; margin:10px 0 12px; }
.ecomp-tab { border:none; background:none; padding:8px 12px; font-size:14px; font-weight:600; color:#5a6573; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.ecomp-tab:hover { color:#1f3a5f; }
.ecomp-tab.active { color:#1f3a5f; border-bottom-color:#2a5298; }
.ecomp-tab-content { min-height:80px; }
.ecomp-pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px){ .ecomp-pf-grid { grid-template-columns:1fr; } }
.ecomp-pf-field { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.ecomp-pf-field > span { color:#6b7785; font-weight:600; }
.ecomp-pf-field input, .ecomp-pf-field select { padding:7px 9px; border:1px solid #cfd6df; border-radius:7px; font-size:14px; }
.ecomp-pf-ro { padding:6px 0; font-weight:600; }
.ecomp-docs .ecomp-doc-add { display:inline-flex; margin-bottom:10px; }
.ecomp-doc-row { display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid #eef1f5; }
.ecomp-doc-row a { color:#1f3a5f; text-decoration:none; font-weight:600; flex:1; }
.ecomp-doc-row a:hover { text-decoration:underline; }
.ecomp-doc-meta { color:#8a94a2; font-size:12px; }
.ecomp-reviews > .comp-btn { margin-bottom:10px; }
.ecomp-rev-card { border:1px solid #e1e6ec; border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.ecomp-rev-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ecomp-rev-stars { color:#e0a800; letter-spacing:1px; }
.ecomp-rev-by { color:#8a94a2; font-size:12px; }
.ecomp-rev-tools { margin-left:auto; display:flex; gap:4px; }
.ecomp-rev-sum { margin-top:6px; font-size:14px; white-space:pre-wrap; }
.ecomp-rev-goals { margin-top:4px; font-size:13px; color:#41506a; }
.comp-rev-form textarea { width:100%; box-sizing:border-box; border:1px solid #cfd6df; border-radius:7px; padding:8px; font-family:inherit; font-size:14px; }
.ecomp-log-add { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.ecomp-log-add select, .ecomp-log-add input { padding:7px 9px; border:1px solid #cfd6df; border-radius:7px; font-size:14px; }
.ecomp-log-add input { flex:1; min-width:140px; }
.ecomp-log-row { display:flex; gap:10px; align-items:flex-start; padding:8px 4px; border-bottom:1px solid #eef1f5; }
.ecomp-log-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:12px; background:#eef1f5; color:#41506a; white-space:nowrap; }
.ecomp-log-badge.ecomp-log-disc { background:#fdeaea; color:#b42318; }
.ecomp-log-badge.ecomp-log-coach { background:#fff4e0; color:#9a6500; }
.ecomp-log-badge.ecomp-log-good { background:#e8f5ee; color:#1a7f4b; }
.ecomp-log-body { flex:1; font-size:14px; }
.ecomp-log-meta { color:#8a94a2; font-size:12px; margin-bottom:2px; }

/* ===== Modern read-only policy reader ===== */
.pol-doc .pol-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.72;
    color: #1f2937;
    max-width: 780px;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    padding: 30px 34px;
    box-shadow: 0 1px 3px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.05);
}
.pol-doc .pol-content > :first-child { margin-top: 0; }
.pol-doc .pol-content > :last-child { margin-bottom: 0; }
.pol-doc .pol-content h1 { font-size: 25px; font-weight: 700; color: #0a2847; margin: 0 0 14px; letter-spacing: -.012em; line-height: 1.25; }
.pol-doc .pol-content h2 { font-size: 19px; font-weight: 700; color: #0a2847; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #eef2f7; }
.pol-doc .pol-content h3 { font-size: 16px; font-weight: 700; color: #1f3a5f; margin: 22px 0 8px; }
.pol-doc .pol-content h4 { font-size: 14px; font-weight: 700; color: #1f3a5f; text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 6px; }
.pol-doc .pol-content p { margin: 0 0 14px; }
.pol-doc .pol-content ul, .pol-doc .pol-content ol { margin: 0 0 14px; padding-left: 26px; }
.pol-doc .pol-content li { margin: 5px 0; }
.pol-doc .pol-content li::marker { color: #0a7c7c; }
.pol-doc .pol-content a { color: #0a7c7c; text-decoration: underline; text-underline-offset: 2px; }
.pol-doc .pol-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; box-shadow: 0 1px 4px rgba(16,24,40,.08); }
.pol-doc .pol-content table { border-collapse: collapse; width: 100%; margin: 4px 0 18px; font-size: 14px; }
.pol-doc .pol-content th, .pol-doc .pol-content td { border: 1px solid #e2e6ee; padding: 9px 11px; text-align: left; vertical-align: top; }
.pol-doc .pol-content th { background: #f4f7fb; font-weight: 700; color: #1f3a5f; }
.pol-doc .pol-content tr:nth-child(even) td { background: #fafbfd; }
.pol-doc .pol-content blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 4px solid #0a7c7c; background: #f3fafa; color: #314; border-radius: 0 8px 8px 0; }
.pol-doc .pol-content hr { border: none; border-top: 1px solid #e6e9ef; margin: 24px 0; }
.pol-doc .pol-content code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
@media (max-width: 640px) {
    .pol-doc .pol-content { padding: 18px 16px; border-radius: 10px; font-size: 15px; }
}

/* ===== Archive + snapshot modal ===== */
.pol-modal-lg { max-width: 840px; width: 92vw; }
.pol-arc-sec { margin-bottom: 20px; }
.pol-arc-sec h4 { margin: 0 0 10px; font-size: 12.5px; color: #0a2847; text-transform: uppercase; letter-spacing: .05em; }
.pol-arc-row, .pol-arc-ver { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid #eef2f7; border-radius: 9px; margin-bottom: 7px; background: #fafbfd; }
.pol-arc-hist { border: 1px solid #eef2f7; border-radius: 11px; padding: 11px 13px; margin-bottom: 11px; background: #fff; }
.pol-arc-hist .pol-arc-name { font-weight: 600; margin-bottom: 8px; color: #1f3a5f; }
.pol-arc-hist .pol-arc-ver { background: #fafbfd; }
.pol-arc-name { font-weight: 600; }
.pol-arc-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.pol-snap-meta { font-size: 13px; color: #5b6b85; margin-bottom: 10px; }
.pol-snap-actions { margin-bottom: 14px; }
.pol-snap-body { max-width: none; }

/* ===== Shared signature pad ===== */
.sigpad-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; z-index:10000; padding:16px; }
.sigpad-box { background:#fff; border-radius:14px; width:100%; max-width:680px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
.sigpad-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#0a2847; color:#fff; }
.sigpad-head h3 { margin:0; font-size:16px; }
.sigpad-x { background:transparent; border:none; color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.sigpad-intent { padding:10px 18px 0; color:#41506a; font-size:13px; }
.sigpad-namerow { padding:12px 18px 4px; }
.sigpad-namerow label { display:block; font-size:12px; font-weight:600; color:#41506a; }
.sigpad-name { width:100%; margin-top:4px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; box-sizing:border-box; }
.sigpad-name.sigpad-err { border-color:#e5484d; box-shadow:0 0 0 2px rgba(229,72,77,.18); }
.sigpad-tabs { display:flex; gap:6px; padding:8px 18px 0; }
.sigpad-tab { border:1px solid #cbd5e1; background:#f6f8fb; border-radius:8px 8px 0 0; padding:6px 14px; cursor:pointer; font-size:13px; }
.sigpad-tab.is-active { background:#fff; border-bottom-color:#fff; font-weight:600; color:#0a2847; }
.sigpad-canvas-wrap { position:relative; margin:0 18px; border:1px dashed #94a3b8; border-radius:0 8px 8px 8px; background:#fbfdff; }
.sigpad-canvas { width:100%; height:220px; display:block; touch-action:none; cursor:crosshair; }
.sigpad-baseline { position:absolute; left:24px; right:24px; bottom:48px; border-bottom:1px solid #cbd5e1; pointer-events:none; }
.sigpad-clear { position:absolute; top:8px; right:8px; background:#eef1f5; border:1px solid #cbd5e1; border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; }
.sigpad-hint { padding:6px 0 10px; text-align:center; color:#8a94a2; font-size:12px; }
.sigpad-hint.sigpad-err { color:#e5484d; }
.sigpad-typewrap { margin:0 18px; border:1px dashed #94a3b8; border-radius:0 8px 8px 8px; background:#fbfdff; min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sigpad-typed-preview { font-family:"Brush Script MT","Segoe Script",cursive; font-size:48px; color:#0a2847; padding:18px; }
.sigpad-typed-preview.is-empty { color:#c2cad6; }
.sigpad-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 18px; }
.sigpad-cancel { background:#eef1f5; border:1px solid #cbd5e1; border-radius:8px; padding:9px 16px; cursor:pointer; font-size:14px; }
.sigpad-accept { background:#0a7c7c; color:#fff; border:none; border-radius:8px; padding:9px 18px; cursor:pointer; font-weight:600; font-size:14px; }
.sig-stamp { display:inline-flex; align-items:center; gap:8px; }
.sig-stamp-img { height:40px; max-width:160px; border:1px solid #e2e8f0; border-radius:4px; background:#fff; }
.sig-stamp-meta { display:flex; flex-direction:column; font-size:12px; line-height:1.3; }
.sig-stamp-when { color:#8a94a2; }

/* ===== Policies & Procedures ===== */
.pol-root { display:flex; flex-direction:column; height:100%; min-height:420px; font-size:14px; }
.pol-topbar { display:flex; gap:10px; align-items:center; padding:10px; border-bottom:1px solid #e6eaf0; flex-wrap:wrap; }
.pol-search-wrap { flex:1; min-width:180px; }
.pol-search { width:100%; padding:8px 12px; border:1px solid #cbd5e1; border-radius:20px; font-size:14px; box-sizing:border-box; }
.pol-topactions { display:flex; gap:6px; flex-wrap:wrap; }
.pol-btn { background:#eef1f5; border:1px solid #d6dce6; border-radius:8px; padding:7px 12px; cursor:pointer; font-size:13px; color:#1f3a5f; }
.pol-btn:hover { background:#e3e9f2; }
.pol-btn-primary { background:#0a7c7c; color:#fff; border-color:#0a7c7c; }
.pol-btn-primary:hover { background:#096a6a; }
.pol-btn-sm { padding:4px 10px; font-size:12px; }
.pol-ro-tag { font-size:12px; color:#8a94a2; padding:6px 10px; }
.pol-body { display:flex; flex:1; min-height:360px; }
.pol-tree { width:280px; min-width:220px; border-right:1px solid #e6eaf0; overflow:auto; padding:8px 4px; }
.pol-reader { flex:1; overflow:auto; padding:18px 22px; }
.pol-empty { color:#8a94a2; padding:16px; font-size:13px; }
.pol-node-row { display:flex; align-items:center; gap:2px; border-radius:6px; }
.pol-node.is-selected > .pol-node-row { background:#e8f1fb; }
.pol-twisty { background:transparent; border:none; cursor:pointer; font-size:12px; color:#5b6b85; width:18px; }
.pol-node-label { background:transparent; border:none; cursor:pointer; text-align:left; flex:1; padding:6px 4px; font-size:13px; color:#1f3a5f; }
.pol-folder > .pol-node-row > .pol-node-label { font-weight:600; }
.pol-node-actions { display:none; gap:1px; }
.pol-node-row:hover .pol-node-actions { display:flex; }
.pol-mini { background:transparent; border:none; cursor:pointer; font-size:12px; padding:2px 4px; border-radius:4px; }
.pol-mini:hover { background:#dbe3ee; }
.pol-mini-del:hover { background:#fde0e0; }
.pol-dot { width:8px; height:8px; border-radius:50%; margin:0 6px; flex:none; }
.pol-dot.pol-active { background:#1a9e5f; } .pol-dot.pol-pending { background:#e0a106; } .pol-dot.pol-draft { background:#b6bfcc; }
.pol-hidden { display:none !important; }
.pol-reader-empty { text-align:center; color:#9aa6b2; margin-top:60px; }
.pol-reader-empty-ic { font-size:42px; }
.pol-doc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pol-doc-head h2 { margin:0; font-size:20px; color:#0a2847; }
.pol-doc-actions, .pol-readeractions { display:flex; gap:6px; flex-wrap:wrap; }
.pol-readeractions { margin:12px 0; }
.pol-doc-meta { display:flex; gap:12px; flex-wrap:wrap; color:#667; font-size:12px; margin:8px 0 14px; align-items:center; }
.pol-pill { display:inline-block; padding:2px 9px; border-radius:12px; font-size:11px; font-weight:600; }
.pol-pill.pol-active { background:#e8f5ee; color:#1a7f4b; }
.pol-pill.pol-pending { background:#fff4e0; color:#9a6500; }
.pol-pill.pol-draft { background:#eef1f5; color:#5b6b85; }
.pol-content { line-height:1.55; color:#1f2733; }
.pol-content h2 { font-size:16px; margin:14px 0 6px; border:none; }
.pol-content ul, .pol-content ol { margin:8px 0 8px 22px; }
.pol-muted { color:#9aa6b2; }
.pol-folderrow { display:block; width:100%; text-align:left; background:#f6f8fb; border:1px solid #e6eaf0; border-radius:8px; padding:9px 12px; margin:6px 0; cursor:pointer; font-size:14px; }
.pol-folderrow:hover { background:#eef3f9; }
.pol-toolbar { display:flex; gap:4px; flex-wrap:wrap; border:1px solid #e6eaf0; border-bottom:none; border-radius:8px 8px 0 0; padding:6px; background:#f6f8fb; }
.pol-tb-btn { background:#fff; border:1px solid #d6dce6; border-radius:6px; padding:4px 9px; cursor:pointer; font-size:13px; min-width:30px; }
.pol-tb-btn:hover { background:#eef3f9; }
.pol-edit-area { border:1px solid #e6eaf0; border-radius:0 0 8px 8px; min-height:220px; padding:12px 14px; line-height:1.55; outline:none; }
.pol-quill { background:#fff; border-radius:8px; }
.pol-quill .ql-toolbar { border-top-left-radius:8px; border-top-right-radius:8px; border-color:#d6dce6; }
.pol-quill .ql-container { min-height:280px; font-size:14px; border-color:#d6dce6; border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
.pol-quill .ql-editor { min-height:280px; line-height:1.55; }
.pol-content img { max-width:100%; height:auto; }
.pol-content .ql-align-center { text-align:center; }
.pol-content .ql-align-right { text-align:right; }
.pol-content .ql-align-justify { text-align:justify; }
.pol-content .ql-size-small { font-size:.75em; }
.pol-content .ql-size-large { font-size:1.5em; }
.pol-content .ql-size-huge { font-size:2.5em; }
.pol-editbtns { display:flex; gap:8px; margin-top:10px; }
.pol-atts { margin-top:18px; }
.pol-atts h4 { margin:0 0 6px; font-size:13px; color:#0a2847; }
.pol-att { display:inline-flex; align-items:center; gap:4px; background:#eef3f9; border-radius:6px; padding:4px 8px; margin:0 6px 6px 0; font-size:13px; }
.pol-att-x { background:transparent; border:none; color:#b42318; cursor:pointer; font-size:15px; }
.pol-approvals { margin-top:22px; border-top:1px solid #e6eaf0; padding-top:14px; }
.pol-appr-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pol-appr-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* ===== Policy template builder (free-form canvas) ===== */
.ptpl-overlay { position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:9500; display:flex; align-items:stretch; justify-content:center; padding:14px; }
.ptpl-box { background:#f3f5f8; border-radius:12px; width:100%; max-width:1100px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.ptpl-head { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#0a2847; color:#fff; flex-wrap:wrap; }
.ptpl-head h3 { margin:0; font-size:16px; }
.ptpl-name { flex:1; min-width:160px; padding:7px 10px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; }
.ptpl-head-actions { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.ptpl-canvas-wrap { flex:1; overflow:auto; background:#e9edf2; padding:16px; }
.ptpl-canvas { position:relative; width:860px; min-height:1000px; max-width:100%; background:#fff; background-image:linear-gradient(#eef1f5 1px,transparent 1px),linear-gradient(90deg,#eef1f5 1px,transparent 1px); background-size:20px 20px; border:1px solid #d6dce6; border-radius:8px; margin:0 auto; }
.ptpl-hint { padding:8px 16px; font-size:12px; color:#5b6b85; background:#fff; }
.ptpl-bar { position:absolute; border:1px solid #94a3b8; border-radius:8px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.08); cursor:move; touch-action:none; }
.ptpl-bar-head { display:flex; align-items:center; gap:4px; padding:3px 4px 3px 6px; cursor:move; touch-action:none; }
.ptpl-grip { cursor:move; color:#475569; font-size:13px; line-height:1; padding:0 2px; user-select:none; }
.ptpl-bar-title { flex:1; border:none; background:transparent; font-weight:700; font-size:13px; outline:none; min-width:0; cursor:text; }
.ptpl-bar-x { border:none; background:transparent; color:#b42318; cursor:pointer; font-size:16px; line-height:1; padding:0 4px; }
.ptpl-bar-text { flex:1; padding:6px 8px; font-size:13px; line-height:1.5; outline:none; overflow:auto; cursor:text; background:rgba(255,255,255,.5); }
.ptpl-bar-color { padding:2px 6px 8px; }
.ptpl-bar-color input[type=range] { width:100%; cursor:pointer; }
.ptpl-bar-resize { position:absolute; right:0; bottom:0; width:20px; height:20px; z-index:6; cursor:nwse-resize; background:linear-gradient(135deg,transparent 45%,#64748b 45%,#64748b 60%,transparent 60%,transparent 70%,#64748b 70%,#64748b 85%,transparent 85%); border-bottom-right-radius:8px; touch-action:none; }
.ptpl-mrow { display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid #eef1f5; padding:8px 0; font-size:14px; }
/* Rendered canvas layout in the reader/print */
.pol-content .pol-canvas-doc { margin:0 auto; }

/* Browsable policy viewer on a data page (read-only, fits the section box) */
.display-section-content .pol-root { height:100%; min-height:0; }
.display-section-content .pol-body { min-height:0; }
.display-section-content .pol-topbar { padding:8px; }
@media (max-width:760px) {
  .ptpl-head-actions { width:100%; margin-left:0; }
  .ptpl-canvas { width:760px; }
}
.pol-appr-head h4 { margin:0; font-size:14px; color:#0a2847; }
.pol-signers { margin-top:10px; }
.pol-signer { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #e6eaf0; border-radius:8px; padding:8px 12px; margin:6px 0; flex-wrap:wrap; }
.pol-signer.is-signed { background:#f5fbf7; border-color:#cfe9da; }
.pol-signer-who { display:flex; flex-direction:column; }
.pol-signer-em { color:#8a94a2; font-size:12px; }
.pol-signer-right { display:flex; align-items:center; gap:8px; }
.pol-active-banner { margin-top:12px; background:#e8f5ee; color:#1a7f4b; border-radius:8px; padding:9px 12px; font-weight:600; font-size:13px; }
.pol-pending-banner { margin-top:12px; background:#fff4e0; color:#9a6500; border-radius:8px; padding:9px 12px; font-size:13px; }
.pol-revision-banner { margin:10px 0 4px; background:#eef4ff; border:1px solid #cdddff; color:#1f3a5f; border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.5; }
.pol-revision-banner .pol-btn-sm { margin-top:6px; }
.pol-rev-tag { background:#eef4ff; color:#2b59c3; border:1px solid #cdddff; border-radius:10px; padding:1px 8px; font-size:11px; font-weight:600; }
.pol-edit-note { background:#eef4ff; border:1px solid #cdddff; color:#1f3a5f; border-radius:8px 8px 0 0; padding:8px 12px; font-size:12px; }

/* ===== Policy Manager AI: flags + sweep ===== */
.pol-badge-amber { background:#e0a106; }
.pol-sweep-toggle.is-on { background:#0a7c7c; color:#fff; border-color:#0a7c7c; }
.pol-flagdot { background:#fdeaea; color:#b42318; border-radius:10px; font-size:11px; font-weight:700; padding:0 6px; margin:0 6px; flex:none; }
.pol-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#0a2847; color:#fff; padding:10px 18px; border-radius:22px; font-size:14px; z-index:10001; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.pol-aiblock { margin-top:22px; border-top:1px solid #e6eaf0; padding-top:14px; }
.pol-aiblock h4 { margin:0; font-size:14px; color:#0a2847; }
.pol-flag-note { font-size:12px; color:#8a6d1a; background:#fff8e6; border:1px solid #f0dca0; border-radius:8px; padding:8px 10px; margin:8px 0; }
.pol-flag { border:1px solid #e6eaf0; border-left:4px solid #b6bfcc; border-radius:8px; padding:10px 12px; margin:8px 0; }
.pol-sevbar-high { border-left-color:#e5484d; }
.pol-sevbar-medium { border-left-color:#e0a106; }
.pol-sevbar-low { border-left-color:#6b8cce; }
.pol-flag-top { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px; }
.pol-flag-sev { font-size:11px; font-weight:700; text-transform:uppercase; border-radius:10px; padding:1px 8px; color:#fff; }
.pol-sev-high { background:#e5484d; } .pol-sev-medium { background:#e0a106; } .pol-sev-low { background:#6b8cce; }
.pol-flag-yard { font-size:12px; font-weight:600; color:#1f3a5f; }
.pol-flag-conf { font-size:11px; color:#8a94a2; }
.pol-flag-gap { font-size:14px; color:#1f2733; line-height:1.45; }
.pol-flag-cite { font-size:12px; color:#41506a; margin-top:4px; }
.pol-flag-sugg { font-size:13px; color:#1a7f4b; background:#f5fbf7; border-radius:6px; padding:6px 8px; margin-top:6px; }
.pol-flag-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
@media (max-width:760px) {
  .pol-flag-actions .pol-btn { flex:1 1 auto; min-height:40px; }
  .pol-toast { left:12px; right:12px; transform:none; text-align:center; }
}
.pol-card { font-size:13px; }
.pol-card-num { font-weight:700; color:#0a2847; font-size:16px; }
.pol-card-row { margin-bottom:6px; }
.pol-card-pills { display:flex; gap:6px; flex-wrap:wrap; }
/* Touch devices (any width): node actions can't rely on hover. */
.pol-back { display:none; }
@media (hover: none) {
  .pol-node-actions { display:flex !important; }
}
/* Tablet / phone: stack to a master-detail (tree as cards → tap → full reader). */
@media (max-width:760px) {
  .pol-root { min-height:0; }
  .pol-topbar { gap:8px; padding:10px 8px; }
  .pol-search-wrap { flex:1 1 100%; }
  .pol-topactions { width:100%; }
  .pol-topactions .pol-btn { flex:1 1 auto; min-height:42px; }
  .pol-body { flex-direction:column; min-height:0; }
  .pol-tree { width:auto; border-right:none; border-bottom:1px solid #e6eaf0; max-height:none; padding:8px; }
  .pol-reader { padding:14px; }
  /* master-detail: show one pane at a time */
  .pol-root.pol-has-selection .pol-tree { display:none; }
  .pol-root:not(.pol-has-selection) .pol-reader { display:none; }
  .pol-back { display:inline-flex; margin-bottom:10px; min-height:40px; }
  /* always-visible, finger-sized node controls + truncating titles */
  .pol-node-actions { display:flex !important; }
  .pol-node-row { flex-wrap:nowrap; }
  .pol-node-label { padding:11px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .pol-mini, .pol-twisty { padding:7px 9px; font-size:16px; }
  .pol-doc-head h2 { font-size:18px; }
  .pol-doc-actions, .pol-readeractions { width:100%; }
  .pol-doc-actions .pol-btn, .pol-readeractions .pol-btn { flex:1 1 auto; min-height:42px; }
  .pol-folderrow { padding:13px; }
  .pol-edit-area { min-height:200px; }
  .pol-tb-btn { min-height:38px; }
}

/* ===== Policies — Binder control ===== */
.pol-badge { display:inline-block; background:#e5484d; color:#fff; border-radius:10px; font-size:11px; font-weight:700; padding:0 6px; margin-left:4px; }
.pol-modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; z-index:9000; padding:16px; }
.pol-modal { background:#fff; border-radius:14px; width:100%; max-width:640px; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
.pol-modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#0a2847; color:#fff; }
.pol-modal-head h3 { margin:0; font-size:16px; }
.pol-modal-body { padding:14px 18px; overflow:auto; }
.pol-modal-foot { display:flex; justify-content:space-between; gap:10px; padding:12px 18px; border-top:1px solid #e6eaf0; }
.pol-bsec { margin-bottom:18px; }
.pol-bsec h4 { margin:0 0 8px; font-size:14px; color:#0a2847; }
.pol-task { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #e6eaf0; border-radius:8px; padding:9px 12px; margin:6px 0; flex-wrap:wrap; }
.pol-task.is-pending { background:#fff8ec; border-color:#f0dca0; }
.pol-task-info { display:flex; flex-direction:column; gap:2px; }
.pol-task-when { color:#8a94a2; font-size:12px; }
.pol-task-done { color:#1a7f4b; font-size:13px; }
.pol-bdone { margin-top:8px; }
.pol-bdone summary { cursor:pointer; color:#5b6b85; font-size:13px; }
.pol-blist { margin:6px 0; }
.pol-brow { display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid #eef1f5; padding:6px 0; font-size:13px; }
.pol-doc-head { align-items:center; }

/* Binder modal + signature pad — mobile */
@media (max-width:760px) {
  .pol-modal { max-width:100%; max-height:92vh; border-radius:12px; }
  .pol-modal-body { padding:12px; }
  .pol-task, .pol-brow, .pol-signer { flex-direction:column; align-items:flex-start; }
  .pol-task-right, .pol-signer-right { width:100%; }
  .pol-task-right .pol-btn, .pol-signer-right .pol-btn { width:100%; min-height:42px; }
  .pol-modal-foot { flex-wrap:wrap; }
  .pol-modal-foot .pol-btn { flex:1 1 auto; min-height:42px; }
}
@media (max-width:560px) {
  .sigpad-box { max-width:100%; }
  .sigpad-canvas { height:180px; }
  .sigpad-foot { flex-direction:column-reverse; }
  .sigpad-foot button { width:100%; min-height:46px; }
  .sigpad-name { min-height:44px; }
  .sigpad-tab { flex:1; min-height:40px; }
}

/* ===== Policies: container-independent readability =====
   The app renders sections on three different surfaces: white cards on the
   desktop canvas, DARK gradient cards on the mobile canvas, and the dark navy
   data-page panel. The policies module is a document UI with dark text, so
   instead of re-theming it per surface, the module root carries its OWN light
   surface — readable everywhere, any viewport. (On desktop this is white-on-
   white: no visible change.) */
.pol-root {
    background: #ffffff;
    color: #1f2733;
    border-radius: 10px;
}

/* ===== Data-page readability (desktop + mobile) =====
   The data-page section panel is a dark navy gradient with white text. That suits
   the simple live "dashboard" widgets (census, on-call, assignments, RRT, provider
   status), which all emit `display-*` elements styled white-on-dark. But every
   other module (policies, compliance, employee compliance, inventory, tickets,
   staffing calendar, patient board, communication, etc.) is built for a LIGHT
   background and emits dark text, so on the dark panel its text becomes unreadable
   — especially on mobile, where the data page is the primary view. Give those
   modules a light surface so text always contrasts. Scoped to
   .display-section-content, so the build/main view is untouched. The `display-*`
   dashboard widgets and the phone directory (which has its own dark styling) are
   excluded so they keep their intended look. */
/* Only elements WITH a class get the light card: every light-themed module root
   is classed (pol-root, comp-list, ecomp-roster, inv-wrap, invst-display, tk-*,
   scal-tile, …), while the dark-designed widgets are either `display-*` prefixed
   (excluded below) or CLASSLESS markup with dark-theme inline colors (on-call,
   table copy, assignment display) — which must keep the dark panel behind their
   light text. */
.display-section-content > [class]:not([class^="display-"]):not([class*=" display-"]):not([class*="phonedirectory"]) {
    background:#ffffff;
    color:#1f2733;
    border-radius:10px;
}
/* Keep muted/secondary text readable on the new light surface. */
.display-section-content .pol-muted { color:#6b7787; }

/* ============================================================
   MEDCALC — dose calculator section module
   VISUAL-PARITY TRANSPLANT of the ORIGINAL standalone MedCalc
   app stylesheet (medcalc/index.html <style> blocks), scoped
   under .mc-root. Original class names are KEPT (.controls,
   .qf-btn, .table-wrapper, .section-row, .calc, .sub, .pill,
   .note-icon, .given-btn, …); original #id selectors became
   [data-mc-id="…"] attribute selectors (multi-instance scoping);
   original body-level rules live on .mc-root itself, which also
   carries the original app background (--bg-warm) so platform
   containers (dark mobile cards / data-page panels) never show
   through. Rules for elements that cannot exist inside the
   module (splash screen, fixed #appHeader, #clearBtn/#loginBtn,
   section overlay, original #editOverlay config editor, print
   chrome) were not transplanted. Colorzone row striping is
   applied inline by the JS, exactly like the original.
   Fidelity over leanness — this block is intentionally large.
   ============================================================ */
.mc-wrap { height:100%; display:flex; flex-direction:column; overflow:auto; min-width:0; max-width:100%; }
.mc-display { height:100%; overflow:auto; min-width:0; max-width:100%; }
/* The wrappers are ALSO `mcroot` containers: a @container rule whose subject
   is .mc-root itself (e.g. its narrow-mode padding) resolves against the
   nearest ANCESTOR container, which is the wrapper — same inline size. */
.mc-wrap, .mc-display { container-type: inline-size; container-name: mcroot; }

/* Build-mode editor vs live calculator visibility (same pattern as tk-*) */
.section.build-mode .mc-build-only { display:block; }
.section.user-mode  .mc-build-only { display:none; }
.section.build-mode .mc-surface { border-top:2px dashed #c0c8d4; margin-top:10px; padding-top:8px; }

/* ============================================================
   JOB BOARD — mobile layout
   The module's inline styles handle desktop; this block makes
   the filters, admin controls and posting cards finger-friendly
   on phones. 16px inputs prevent iOS focus-zoom; 44px minimum
   targets per touch guidelines.
   ============================================================ */
@media (max-width: 640px) {
    .jobboard-filters { gap: 8px !important; }
    .jobboard-filters input,
    .jobboard-filters select,
    .jobboard-filters button {
        flex: 1 1 100% !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }
    /* City + radius belong together — share one row. */
    .jobboard-filter-city  { flex: 1 1 46% !important; }
    .jobboard-filter-radius { flex: 1 1 46% !important; }
    .jobboard-config input { min-height: 44px !important; font-size: 16px !important; }
    .jobboard-admin { flex-direction: column; align-items: stretch !important; }
    .jobboard-admin button { min-height: 44px !important; font-size: 14px !important; }
    /* No height cap on mobile: the list grows to its full height and the PAGE
       scrolls. A max-height here (with the list's overflow:visible) made the rows
       spill out below the capped box and the pager overlap them. */
    .jobboard-row { padding: 12px !important; }
    /* Stack title/link vertically so the tap target is full-width. */
    .jobboard-row > div { flex-direction: column; }
    .jobboard-go-link { padding: 10px 0; display: inline-block; }
}

/* ----------------------------------------------------------------
   ROOT = original html/body/:root. The original app had a fixed
   62px header; inside the module there is none, so --header-h is 0
   (sticky table headers stick to the top of the scroll container,
   exactly as the original stuck below its header).
   ---------------------------------------------------------------- */
.mc-root {
    /* :root variables — verbatim from the original */
    --font: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --pad: 12px;
    --header-h: 0px;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #595959;
    --color-link: #0056b3;
    --color-link-hover: #003d80;
    --color-focus: #0056b3;
    --color-error: #c41e3a;
    --color-success: #006644;
    --color-warning: #7a4400;
    --color-purple: #6b21a8;
    --color-brown: #7c4a03;
    --bg-warm: #f4f6f9;
    --bg-cream-light: #ffffff;
    --bg-cream-deep: #f8f9fb;
    --bg-note: #fffbe6;
    --bg-section: #1e293b;
    --bg-subsection: #eef1f5;
    --bg-header: #1e293b;

    /* original body rules */
    font-family: var(--font);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.5;
    margin: 0;
    padding: 12px 20px 24px;
    background-color: var(--bg-warm);
    color: var(--color-text-primary);
    border-radius: 10px;
    min-width: 0;

    /* CONTAINER-RESPONSIVE FIX: the module renders inside a SECTION BOX whose
       width is independent of the viewport (narrow section on a wide desktop,
       data-page panel, mobile card). Make the root a CSS size container so the
       mobile card-mode below can key off the CONTAINER width via @container
       (the original viewport @media copy is kept as a fallback). overflow-x
       hidden is the last-resort guarantee — the @container rules below are
       designed so nothing actually needs clipping. overflow-x:clip (not
       hidden) so .mc-root does NOT become a scroll container — keeps the
       sticky thead working against the panel's own scroller; the hidden
       line before it is the fallback for engines without `clip`. */
    container-type: inline-size;
    container-name: mcroot;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}
.mc-root *, .mc-root *::before, .mc-root *::after { box-sizing: border-box; }
.mc-root { -webkit-text-size-adjust: 100%; }
.mc-root img, .mc-root a { -webkit-user-drag: none; user-drag: none; }

/* Headings — original h1 */
.mc-root h1 {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}
.mc-root .h1-subtitle {
    font-weight: normal;
    font-size: 0.5em;
    margin-left: 6px;
    color: var(--color-text-secondary);
}

/* Visually hidden (SR only) — original */
.mc-root .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;
}

/* ---------------- Patient Controls Card — original ---------------- */
.mc-root .controls-card {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #dde2e9;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    padding: 16px;
    margin-bottom: 16px;
    max-width: 100%;
    min-width: 0;
}
.mc-root .controls-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
}
.mc-root .title-block { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.mc-root h1, .mc-root .h1-subtitle { overflow-wrap: anywhere; }

/* Platform-only Log/Clear buttons in the card header — styled with the
   original design language (section-overlay-back aesthetics). */
.mc-header-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-root .mc-tool-btn {
    padding: 7px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    background: #eef1f5;
    border: 1.5px solid #c8cfd8;
    border-radius: 7px;
    font-weight: 600;
    min-height: 38px;
    color: var(--color-text-primary);
    font-family: var(--font);
}
.mc-root .mc-tool-btn:hover { background: #e2e7ee; border-color: #8fa0b8; }
.mc-root .mc-tool-btn:focus,
.mc-root .mc-tool-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------------- Controls grid — original ---------------- */
.mc-root .controls {
    display: grid;
    gap: 10px;
    /* min(160px, 100%) instead of the original 160px: in a container narrower
       than ~160px + padding the fixed minmax floor would force the grid (and
       thus the section) wider than its box → horizontal scroll. min(…,100%)
       lets each track shrink to the container while behaving identically at
       normal widths. */
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    margin-bottom: 0;
    opacity: 1;
    min-width: 0;
    max-width: 100%;
}
.mc-root .controls label { min-width: 0; }
.mc-root .controls input,
.mc-root .controls select { min-width: 0; max-width: 100%; }
.mc-root .controls label {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    gap: 4px;
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mc-root .controls input,
.mc-root .controls select {
    padding: 9px 10px;
    border-radius: 7px;
    border: 1.5px solid #c8cfd8;
    background: #ffffff;
    font-size: 15px;
    color: var(--color-text-primary);
    transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
    font-family: var(--font);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.mc-root .controls input:hover,
.mc-root .controls select:hover {
    border-color: #8fa0b8;
    background: #fafbfc;
}
.mc-root .controls input:focus,
.mc-root .controls select:focus,
.mc-root .controls input:focus-visible,
.mc-root .controls select:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-color: var(--color-focus);
}
.mc-root .controls select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-position: calc(100% - 12px) center;
    background-repeat: no-repeat;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
.mc-root .controls input::placeholder { color: #9aa5b4; opacity: 1; }

/* IBW Estimator fields wrapper — original (display:contents flows children
   into the parent .controls grid) */
.mc-root .ibw-estimator-fields { display: contents; }
.mc-root .ibw-estimator-fields[style*="display: none"] { display: none !important; }

/* Colorzone badge next to weight input — original */
.mc-root .colorzone-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
    border: 2px solid;
}

/* IBW UI (purple theme) — original */
.mc-root .purple-text { color: var(--color-purple) !important; font-weight: 700; }
.mc-root .readonly { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.mc-root .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 2px solid #666666;
    background: #fafafa;
    color: var(--color-text-primary);
}

/* Quick Find button + input — original */
.mc-root .qf-btn {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    background: var(--bg-section);
    border-radius: 7px;
    border: 1.5px solid #0f1929;
    cursor: pointer;
    transition: background 120ms ease-out;
    letter-spacing: 0.02em;
}
.mc-root .qf-btn:hover { background: #2d3f56; }
.mc-root .qf-btn:active { transform: translateY(1px); }
.mc-root .qf-btn:focus,
.mc-root .qf-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.mc-root .qf-input {
    width: 90%;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 7px;
    border: 1.5px solid #c8cfd8;
    background: #ffffff;
    font-size: 15px;
    color: var(--color-text-primary);
    font-family: var(--font);
}
.mc-root .qf-input:focus,
.mc-root .qf-input:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-color: var(--color-focus);
}
.mc-root .qf-input::placeholder { color: #9aa5b4; }

/* IBW method label / weight warning — original */
.mc-root .ibw-method-label {
    display: inline;
    margin-left: 4px;
    color: var(--color-purple);
    font-style: italic;
    font-size: 0.75rem;
    font-weight: 600;
}
.mc-root .weight-warning {
    display: none;
    margin-left: 4px;
    color: var(--color-error);
    font-weight: 700;
    font-size: 0.75rem;
}
.mc-root .weight-warning.visible { display: inline; }
.mc-root .ibw-method-label.tbw-mode { color: var(--color-brown); }

/* "Use Estimate" button — original #ibwUseEstimateBtn */
.mc-root [data-mc-id="ibwUseEstimateBtn"]:not(:disabled):hover { background: #333333 !important; }
.mc-root [data-mc-id="ibwUseEstimateBtn"]:focus,
.mc-root [data-mc-id="ibwUseEstimateBtn"]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.mc-root [data-mc-id="ibwUseEstimateBtn"]:disabled { cursor: default; opacity: 0.85; }

/* Dosing text color states — original body.ibw-active/tbw-active,
   scoped to the module root state classes set by the ported JS */
.mc-root.mc-ibw-active .calc,
.mc-root.mc-ibw-active .sub { color: var(--color-purple); }
.mc-root.mc-tbw-active .calc,
.mc-root.mc-tbw-active .sub { color: var(--color-brown); }

/* Jump rows scroll offset — original tr[id] (module uses data-mc-jump) */
.mc-root tr[data-mc-jump] { scroll-margin-top: calc(var(--header-h) + 48px); }

/* ---------------- Data table — original ---------------- */
.mc-root table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    /* table-layout:fixed + percentage <th> widths: columns are sized from the
       container, never from content, so long dose strings can NEVER push the
       table wider than its box (they wrap via overflow-wrap below). */
    table-layout: fixed;
    border-radius: 10px;
    overflow: hidden;
}
.mc-root caption {
    text-align: left;
    font-weight: 700;
    padding: 8px;
    font-size: 1rem;
    color: var(--color-text-primary);
}
.mc-root caption.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;
}
.mc-root thead th {
    text-align: left;
    font-size: 0.78rem;
    color: #ffffff;
    border-bottom: 2px solid rgba(255,255,255,0.15);
    padding: 12px 10px;
    background: #2f80c2;
    position: sticky;
    top: var(--header-h);
    z-index: 100;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.mc-root thead th[scope="col"] { vertical-align: bottom; }
.mc-root thead th { word-wrap: break-word; overflow-wrap: anywhere; }
.mc-root tbody td {
    border-bottom: 1px solid #e4e8ef;
    padding: 11px 10px;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
}
.mc-root tbody tr:first-child td { padding-top: 15px; }
.mc-root .drug { font-weight: 700; }
.mc-root .calc { font-weight: 700; font-size: 1.05rem; }
.mc-root .sub {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-top: 4px;
}
.mc-root .route { white-space: nowrap; }
.mc-root .note {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-top: 10px;
}
.mc-root .pill {
    display: inline-block;
    padding: 3px 9px;
    border: 1.5px solid #c8cfd8;
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--color-text-primary);
    background: #f0f4f8;
}

/* Section / subsection rows — original */
.mc-root .section-row td {
    background: var(--bg-section);
    color: #ffffff;
    font-weight: 700;
    padding: 11px 10px;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
}
.mc-root .section-row th {
    background: var(--bg-section);
    color: #ffffff;
    font-weight: 700;
    padding: 11px 10px;
}
.mc-root .subsection-row td {
    background: var(--bg-subsection);
    color: var(--color-text-primary);
    font-weight: 600;
    padding: 8px 10px;
    font-size: 0.83rem;
    border-bottom: 1px solid #dde2e9;
}
.mc-root .flag {
    font-size: 0.85rem;
    color: var(--color-success);
    font-weight: 700;
    display: inline-block;
    margin-left: 6px;
}

/* Note icon button — original */
.mc-root .note-icon {
    margin-left: 6px;
    cursor: pointer;
    border: 2px solid var(--color-focus);
    background: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 50%;
    color: var(--color-focus);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-root .note-icon:hover { background: var(--color-focus); color: #ffffff; }
.mc-root .note-icon:focus,
.mc-root .note-icon:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.mc-root .note-row td {
    background: var(--bg-note);
    color: #5c4b00;
    padding: 10px 12px;
    border-bottom: 1px solid #e8d98a;
}

/* Alternating row colors — original */
.mc-root tbody tr:not(.section-row):not(.subsection-row):not(.note-row) {
    background-color: var(--bg-cream-light);
}
.mc-root tbody tr:nth-child(even):not(.section-row):not(.subsection-row):not(.note-row) {
    background-color: var(--bg-cream-deep);
}

/* Table wrapper card — original (overflow:clip keeps radius AND sticky) */
.mc-root .table-wrapper {
    border-radius: 10px;
    overflow: clip;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    border: 1px solid #dde2e9;
    max-width: 100%;
    min-width: 0;
}
.mc-root [data-mc-id="doseTable"] { border-radius: 0; overflow: visible; }
.mc-root [data-mc-id="doseTable"] tbody:empty::after {
    content: "Loading...";
    display: block;
    text-align: center;
    padding: 20px;
    color: #595959;
}

/* Drug cell layout — original */
.mc-root .drug-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.mc-root .drug-name { font-weight: 700; }
.mc-root .given-btn {
    padding: 6px 10px;
    font-size: 14px;
    background: var(--color-focus);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    min-height: 36px;
    width: auto;
    max-width: fit-content;
    font-weight: 600;
    align-self: flex-start;
}
.mc-root .given-btn:focus,
.mc-root .given-btn:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }
.mc-root .given-btn:hover { background: var(--color-link-hover); }
.mc-root .given-btn:disabled { cursor: default; }
.mc-root .given-btn.mc-given-ok { background: var(--color-success); }

/* ---------------- PEDS/ADULT toggle — original #modeToggle ----------------
   Original moved the knob/track colors with inline JS; here the ported JS
   toggles .mc-adult-on on the root and these rules reproduce the exact
   same visual states. */
/* (class is mc-mode-toggle, NOT .mode-toggle: the platform globally hides
   .mode-toggle on mobile, which would remove the PEDS/ADULT switch) */
.mc-root .mc-mode-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    flex-shrink: 0;
}
.mc-root [data-mc-id="pedsLabel"] { color: var(--color-focus); }
.mc-root [data-mc-id="adultLabel"] { color: var(--color-text-muted); }
.mc-root.mc-adult-on [data-mc-id="pedsLabel"] { color: var(--color-text-muted); }
.mc-root.mc-adult-on [data-mc-id="adultLabel"] { color: #c41e3a; }
.mc-root .toggle-switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 28px;
    margin: 0;
}
.mc-root .toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
    margin: 0;
}
.mc-root .toggle-track {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--color-focus);
    border-radius: 28px;
    transition: 0.3s;
    border: 2px solid #004080;
}
.mc-root .toggle-knob {
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
.mc-root.mc-adult-on .toggle-track { background-color: #c41e3a; }
.mc-root.mc-adult-on .toggle-knob { transform: translateX(26px); }
.mc-root .toggle-switch input:focus + .toggle-track,
.mc-root .toggle-switch input:focus-visible + .toggle-track {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Section jump select — original #sectionJump */
.mc-root [data-mc-id="sectionJump"] { font-weight: 500; }
.mc-root [data-mc-id="sectionJump"] option { font-weight: 600; }
.mc-root [data-mc-id="sectionJump"] option[value=""] {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* iOS: prevent input zoom — original @supports rule, scoped */
@supports (-webkit-touch-callout: none) {
    .mc-root input, .mc-root select, .mc-root textarea, .mc-root button {
        font-size: 16px !important;
    }
    .mc-root .compact-input { font-size: 16px !important; line-height: 1.1; padding: 8px 10px; }
}

/* ----------------------------------------------------------------
   MOBILE CARD MODE — original transplanted rules, now keyed off the
   CONTAINER width (.mc-root is a size container, see above): inside
   the platform the calculator lives in a section box whose width is
   independent of the viewport (narrow section on a wide desktop,
   data-page panel, mobile card), so a viewport @media would never
   fire there. The @container block below is the primary mechanism;
   an IDENTICAL plain @media (max-width:640px) copy follows as a
   fallback for browsers without container-query support (harmless
   duplication — when both fire they apply the same declarations).
   KEEP THE TWO BLOCKS IN SYNC.
   ---------------------------------------------------------------- */
@container mcroot (max-width: 640px) {
    .mc-root { padding: 10px 12px 18px; }

    .mc-root thead {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .mc-root table, .mc-root tbody, .mc-root tr, .mc-root td {
        display: block;
        width: 100%;
    }
    .mc-root tr {
        background: var(--bg-cream-light);
        border: 2px solid #cccccc;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 8px;
        overflow: hidden;
    }
    .mc-root td {
        display: grid;
        grid-template-columns: 35% 65%;
        align-items: start;
        gap: 6px;
        padding: 8px 12px;
        min-height: 44px;
    }
    .mc-root td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: 0.8rem;
    }
    .mc-root td .calc { font-size: 1rem; font-weight: 700; }
    .mc-root tr.section-row {
        display: block;
        background: var(--bg-section);
        color: #ffffff;
    }
    .mc-root tr.section-row td {
        display: block;
        padding: 12px;
        grid-template-columns: 1fr;
    }
    .mc-root tr.subsection-row {
        display: block;
        background: var(--bg-subsection);
        margin: 4px 0 2px;
        border-radius: 6px;
        box-shadow: none;
    }
    .mc-root tr.subsection-row td {
        display: block;
        padding: 8px 12px;
        grid-template-columns: 1fr;
    }
    .mc-root tr.subsection-row td::before { content: ""; }
    .mc-root .note-row td {
        grid-template-columns: 1fr;
        background: var(--bg-note);
    }
    .mc-root td { min-width: 0; overflow-wrap: anywhere; }
    .mc-root td > * { min-width: 0; }
    /* In card mode each value is its own grid cell — let route text wrap
       rather than force the 65% column wider than the card. */
    .mc-root .route { white-space: normal; }

    /* Mode toggle + controls card — original mobile rules */
    .mc-root .mc-mode-toggle {
        display: inline-flex;
        font-size: 13px;
        gap: 8px;
        margin: 0;
        flex-wrap: wrap;
    }
    .mc-root .toggle-switch { width: 44px; height: 24px; }
    .mc-root .toggle-knob { height: 18px; width: 18px; left: 3px; bottom: 3px; }
    .mc-root .controls-card { padding: 12px; }
    .mc-root .controls-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .mc-root h1 { font-size: 1.15rem; }
}

/* Fallback copy of the card-mode block for browsers WITHOUT container
   queries — viewport-based exactly like the original standalone app.
   IDENTICAL declarations; keep in sync with the @container block above. */
@media (max-width: 640px) {
    .mc-root { padding: 10px 12px 18px; }

    .mc-root thead {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .mc-root table, .mc-root tbody, .mc-root tr, .mc-root td {
        display: block;
        width: 100%;
    }
    .mc-root tr {
        background: var(--bg-cream-light);
        border: 2px solid #cccccc;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 8px;
        overflow: hidden;
    }
    .mc-root td {
        display: grid;
        grid-template-columns: 35% 65%;
        align-items: start;
        gap: 6px;
        padding: 8px 12px;
        min-height: 44px;
    }
    .mc-root td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: 0.8rem;
    }
    .mc-root td .calc { font-size: 1rem; font-weight: 700; }
    .mc-root tr.section-row {
        display: block;
        background: var(--bg-section);
        color: #ffffff;
    }
    .mc-root tr.section-row td {
        display: block;
        padding: 12px;
        grid-template-columns: 1fr;
    }
    .mc-root tr.subsection-row {
        display: block;
        background: var(--bg-subsection);
        margin: 4px 0 2px;
        border-radius: 6px;
        box-shadow: none;
    }
    .mc-root tr.subsection-row td {
        display: block;
        padding: 8px 12px;
        grid-template-columns: 1fr;
    }
    .mc-root tr.subsection-row td::before { content: ""; }
    .mc-root .note-row td {
        grid-template-columns: 1fr;
        background: var(--bg-note);
    }
    .mc-root td { min-width: 0; overflow-wrap: anywhere; }
    .mc-root td > * { min-width: 0; }
    .mc-root .route { white-space: normal; }

    /* Mode toggle + controls card — original mobile rules */
    .mc-root .mc-mode-toggle {
        display: inline-flex;
        font-size: 13px;
        gap: 8px;
        margin: 0;
        flex-wrap: wrap;
    }
    .mc-root .toggle-switch { width: 44px; height: 24px; }
    .mc-root .toggle-knob { height: 18px; width: 18px; left: 3px; bottom: 3px; }
    .mc-root .controls-card { padding: 12px; }
    .mc-root .controls-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .mc-root h1 { font-size: 1.15rem; }
}

/* ----------------------------------------------------------------
   OVERLAYS (habitus reference + dose log) — appended to body,
   styled to the original #habitusOverlay / #logOverlay panels.
   ---------------------------------------------------------------- */
.mc-habitus-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 11000;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px;
    font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.mc-habitus-overlay .habitus-panel {
    background: #fff;
    color: #1a1a1a;
    /* never wider than the viewport minus the overlay's 12px side padding */
    max-width: min(480px, 100%);
    margin: 60px auto;
    padding: 16px 14px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}
.mc-habitus-overlay .habitus-back,
.mc-habitus-overlay .log-back {
    margin-bottom: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 2px solid #666666;
    border-radius: 6px;
    background: #f5f5f5;
    color: #1a1a1a;
    min-height: 44px;
    min-width: 44px;
    font-weight: 500;
}
.mc-habitus-overlay .habitus-back:hover,
.mc-habitus-overlay .log-back:hover { background: #e8e8e8; }
.mc-habitus-overlay .habitus-back:focus,
.mc-habitus-overlay .habitus-back:focus-visible,
.mc-habitus-overlay .log-back:focus,
.mc-habitus-overlay .log-back:focus-visible {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
}
.mc-habitus-overlay .log-panel {
    background: #fff;
    color: #1a1a1a;
    max-width: min(480px, 100%);
    margin: 60px auto;
    padding: 16px 14px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
    max-height: 80vh;
    /* internal scrolling is VERTICAL only */
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}
.mc-habitus-overlay .log-disclaimer {
    font-size: 0.75rem;
    color: #595959;
    margin: 0 0 8px;
}
.mc-habitus-overlay .log-entry {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.mc-habitus-overlay .log-entry:last-child { border-bottom: none; }
.mc-habitus-overlay .log-entry-main { font-weight: 600; color: #1a1a1a; }
.mc-habitus-overlay .log-entry-sub { font-size: 0.8rem; color: #595959; }
.mc-habitus-overlay .mc-log-note {
    color: #5c4b00;
    background: #fffbe6;
    border-radius: 5px;
    padding: 2px 7px;
    margin-top: 2px;
    display: inline-block;
}
.mc-habitus-title { margin: 6px 0 2px; font-size: 1.1rem; color: #1a1a1a; }
.mc-habitus-sub { font-size: 0.8rem; color: #595959; margin: 0 0 6px; }
.mc-habitus-imgwrap { text-align: center; }
.mc-habitus-img { max-width: 100%; height: auto; border-radius: 6px; }
.mc-log-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mc-log-headbtns { display: flex; gap: 6px; }
.mc-log-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---- build-mode config editor (platform-only; no original counterpart) ---- */
.mc-btn {
    padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer;
    border:2px solid #44505f; border-radius:6px; background:#f4f6f9; color:#1f2733;
    min-height:36px;
}
.mc-btn:hover { background:#e8edf3; }
.mc-btn-primary { background:#0a2847; border-color:#0a2847; color:#ffffff; }
.mc-btn-primary:hover { background:#143a63; }
.mc-builder { background:#f4f6f9; border:1px solid #d4dbe4; border-radius:10px; padding:10px; color:#1f2733; max-width:100%; min-width:0; overflow-x:hidden; }
.mc-ed-head { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.mc-ed-hint { font-size:11px; color:#5f6b7a; }
.mc-ed-toggle { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; margin-bottom:8px; cursor:pointer; }
.mc-ed-rows { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.mc-ed-row { background:#ffffff; border:1px solid #d4dbe4; border-radius:8px; padding:6px 8px; display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.mc-ed-section { border-left:5px solid #0a2847; }
.mc-ed-subsection { border-left:5px solid #7b8794; }
.mc-ed-drug { border-left:5px solid #2e7d32; }
.mc-ed-kind { font-size:11px; font-weight:800; white-space:nowrap; padding-top:6px; min-width:84px; }
.mc-ed-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap:6px; flex:1 1 300px; min-width:0; max-width:100%; }
.mc-ed-grid label { display:flex; flex-direction:column; gap:2px; font-size:11px; font-weight:700; }
.mc-ed-input { padding:5px 6px; font-size:13px; border:1px solid #9aa6b4; border-radius:5px; background:#fff; color:#1f2733; width:100%; }
.mc-ed-label { flex:1 1 200px; font-weight:700; }
.mc-ed-pair { display:flex; gap:4px; }
.mc-ed-pair > * { flex:1 1 0; min-width:0; }
.mc-ed-note { grid-column:1 / -1; }
.mc-ed-rowbtns { display:flex; gap:4px; margin-left:auto; }
.mc-ed-mini { border:1px solid #9aa6b4; background:#f4f6f9; border-radius:5px; min-width:28px; min-height:28px; cursor:pointer; font-size:13px; }
.mc-ed-del { color:#b00020; }
.mc-ed-addbar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.mc-ed-empty { font-size:12px; color:#5f6b7a; }
.mc-ed-adv summary { cursor:pointer; font-size:13px; font-weight:700; }
.mc-ed-json { width:100%; font-family:ui-monospace, monospace; font-size:11px; border:1px solid #9aa6b4; border-radius:6px; padding:6px; margin:6px 0; }
.mc-ed-json-msg { font-size:12px; margin-left:8px; font-weight:700; }
.mc-ed-json-msg.mc-ok { color:#0d6e3f; }
.mc-ed-json-msg.mc-err { color:#b00020; }

/* ---- dose log extras + toast (platform-only chrome) ---- */
.mc-log-who { font-size: 0.75rem; font-weight: 600; color: #595959; }
.mc-log-time { font-size: 0.72rem; color: #8a8a8a; margin-top: 2px; }
.mc-log-list { display: flex; flex-direction: column; }
.mc-toast {
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
    background:#1e293b; color:#ffffff; font-size:13px; font-weight:700;
    font-family:"Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    padding:10px 18px; border-radius:999px; z-index:12000;
    box-shadow:0 4px 14px rgba(0,0,0,0.3); max-width:90vw;
}
.mc-toast-err { background:#c41e3a; }

/* =====================================================================
   RESTORED FULL CONFIG EDITOR + INTERNAL TEST CALCULATOR overlays
   (build mode only). Ports the original standalone app's #editOverlay /
   #testCalcOverlay, modernized with rounded cards, cleaner spacing, and
   platform-teal accents — every original control is present and scoped.
   Container/viewport responsive: panels scroll INTERNALLY; no horizontal
   page scroll at narrow widths.
   --mc-teal: platform accent.
   ===================================================================== */
.mc-edit-overlay,
.mc-test-overlay {
    --mc-teal: #0d6e6e;
    --mc-teal-dark: #095353;
    position: fixed; inset: 0; z-index: 14000;
    background: rgba(15, 23, 32, 0.55);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px;
    font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: #1f2733;
}

/* ---- editor panel ---- */
.mc-edit-overlay .edit-panel {
    background: #fff; max-width: 1200px; width: 100%;
    margin: 12px auto; padding: 18px 20px 22px;
    border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    max-height: calc(100vh - 24px); display: flex; flex-direction: column;
    font-size: 0.85rem; min-width: 0;
}
.mc-edit-overlay .edit-header-bar {
    display: flex; justify-content: space-between; gap: 8px;
    align-items: center; margin-bottom: 12px; flex-wrap: wrap;
    border-bottom: 2px solid #e3e8ef; padding-bottom: 12px;
}
.mc-edit-overlay .edit-header-buttons { display: flex; gap: 8px; }
.mc-edit-overlay .edit-heading { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: #0f1722; }
.mc-edit-overlay .edit-subtext { margin: 0 0 12px; font-size: 0.8rem; color: #5f6b7a; }
.mc-edit-overlay .edit-btn {
    padding: 8px 14px; font-size: 0.85rem; border-radius: 8px;
    border: 2px solid #c2cbd6; background: #f6f8fb; cursor: pointer;
    min-height: 44px; min-width: 44px; font-weight: 600; color: #1f2733;
}
.mc-edit-overlay .edit-btn:hover { background: #eef2f7; }
.mc-edit-overlay .edit-btn:focus-visible,
.mc-test-overlay .edit-btn:focus-visible { outline: 3px solid var(--mc-teal); outline-offset: 2px; }
.mc-edit-overlay .edit-btn.primary { background: var(--mc-teal); color: #fff; border-color: var(--mc-teal-dark); }
.mc-edit-overlay .edit-btn.primary:hover { background: var(--mc-teal-dark); }
.mc-edit-overlay .mc-edit-testbtn { background: #0a3d3d; color: #fff; border-color: #062929; }
.mc-edit-overlay .edit-error { color: #c41e3a; font-size: 0.82rem; font-weight: 600; }
.mc-edit-overlay .mc-edit-success { color: #0d6e3f; font-weight: 600; font-size: 0.82rem; }

.mc-edit-overlay .edit-message-banner {
    display: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
    background: #e8f7ee; border: 2px solid #38b06f; font-size: 0.85rem;
    color: #0d5e34; font-weight: 600;
}
.mc-edit-overlay .edit-message-banner.edit-message-error { background: #fdecea; border-color: #c41e3a; color: #8b0000; }
.mc-edit-overlay .edit-message-banner.edit-message-success { background: #e8f7ee; border-color: #38b06f; color: #0d5e34; }

.mc-edit-overlay .edit-toolbar {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center;
}

/* Add Code / Paste Table panel */
.mc-edit-overlay .mc-edit-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.mc-edit-overlay .mc-edit-tab {
    padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    border: 2px solid #c2cbd6; border-radius: 8px 8px 0 0; background: #eef2f7; color: #5f6b7a; min-height: 40px;
}
.mc-edit-overlay .mc-edit-tab.mc-edit-tab-on { background: #fff; color: #0f1722; border-bottom-color: #fff; }
.mc-edit-overlay .mc-edit-tabpanel { border: 2px solid #c2cbd6; border-radius: 0 8px 8px 8px; padding: 12px; margin-bottom: 12px; }
.mc-edit-overlay .mc-edit-code {
    width: 100%; min-height: 120px; box-sizing: border-box; font-family: ui-monospace, monospace;
    font-size: 0.8rem; padding: 8px; border-radius: 8px; border: 2px solid #c2cbd6;
}
.mc-edit-overlay .mc-edit-tablepreview {
    margin-top: 8px; max-height: 220px; overflow: auto; border: 1px solid #c2cbd6; border-radius: 8px; font-size: 0.78rem;
}
.mc-edit-overlay .mc-edit-tablepreview th { background: #eef2f7; }
.mc-edit-overlay .mc-edit-tablepreview th,
.mc-edit-overlay .mc-edit-tablepreview td { border: 1px solid #d6dde6; padding: 4px 6px; text-align: left; }

/* editor table */
.mc-edit-overlay .edit-table-wrapper { max-width: 100%; min-width: 0; overflow: auto; border-radius: 10px; }
.mc-edit-overlay .mc-edit-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; table-layout: fixed; }
.mc-edit-overlay .mc-edit-table thead th {
    position: sticky; top: 0; z-index: 2; background: #eef2f7; border-bottom: 2px solid #c2cbd6;
    padding: 8px 6px; text-align: left; font-weight: 700; color: #1f2733; overflow-wrap: anywhere;
}
.mc-edit-overlay .mc-edit-table th,
.mc-edit-overlay .mc-edit-table td { border-right: 1px solid #e3e8ef; }
.mc-edit-overlay .mc-edit-table th:last-child,
.mc-edit-overlay .mc-edit-table td:last-child { border-right: none; }
.mc-edit-overlay .mc-edit-table tbody td { border-bottom: 1px solid #e3e8ef; padding: 6px 4px; vertical-align: middle; overflow-wrap: anywhere; }
.mc-edit-overlay .mc-edit-table tbody tr:nth-child(even) { background: #f6f8fb; }
.mc-edit-overlay .mc-edit-table tbody tr[data-kind="section"] { background: #0f1722 !important; }
.mc-edit-overlay .mc-edit-table tbody tr[data-kind="section"] td { color: #fff; }
.mc-edit-overlay .mc-edit-table tbody tr[data-kind="section"] .edit-input-text { background: #2a3543; color: #fff; border-color: #44505f; font-weight: 700; }
.mc-edit-overlay .mc-edit-table tbody tr[data-kind="subsection"] { background: #e8edf3 !important; }
.mc-edit-overlay .mc-edit-table tbody tr[data-kind="subsection"] .edit-input-text { font-weight: 600; }
.mc-edit-overlay .mc-edit-table tbody tr[data-kind="drug"] { border-left: 4px solid var(--mc-teal); }

.mc-edit-overlay .edit-row-index-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; }
.mc-edit-overlay .edit-row-index-label input[type="checkbox"],
.mc-edit-overlay .edit-row-check { width: 18px; height: 18px; cursor: pointer; accent-color: var(--mc-teal); }
.mc-edit-overlay .edit-input-text,
.mc-edit-overlay .edit-input-num,
.mc-edit-overlay .edit-select {
    width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 6px;
    border: 2px solid #c2cbd6; font-size: 0.8rem; min-height: 36px; min-width: 0; background: #fff; color: #1f2733;
}
.mc-edit-overlay .edit-input-text:focus,
.mc-edit-overlay .edit-input-num:focus,
.mc-edit-overlay .edit-select:focus { outline: 3px solid var(--mc-teal); outline-offset: 1px; border-color: var(--mc-teal); }
.mc-edit-overlay .edit-note-textarea {
    width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 6px; border: 2px solid #c2cbd6;
    font-size: 0.8rem; line-height: 1.3; height: 36px; max-height: 150px; resize: vertical; transition: height 0.15s ease;
}
.mc-edit-overlay .edit-note-textarea:focus { height: 90px; outline: 3px solid var(--mc-teal); outline-offset: 1px; border-color: var(--mc-teal); }
.mc-edit-overlay .edit-conc-cell-inner { display: flex; gap: 4px; align-items: center; }
.mc-edit-overlay .edit-conc-cell-inner .edit-input-num { flex: 0 0 64px; }
.mc-edit-overlay .edit-conc-cell-inner .edit-select { flex: 1; }
.mc-edit-overlay .edit-cell-peds > div { display: flex; flex-direction: column; gap: 4px; }
.mc-edit-overlay .edit-cell-peds > div > div { display: flex; gap: 4px; }

/* drag handle + ghost (original) */
.mc-edit-overlay .edit-drag-handle {
    cursor: grab; padding: 8px 6px; color: #5f6b7a; font-size: 1.2rem; user-select: none;
    -webkit-user-select: none; touch-action: none; display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; border-radius: 6px; background: #f6f8fb; border: 1px solid #d6dde6;
}
.mc-edit-overlay .edit-drag-handle:hover { background: #e8edf3; color: #1f2733; }
.mc-edit-overlay .edit-drag-handle[aria-pressed="true"] { background: #cdeaea; color: var(--mc-teal-dark); }
.mc-edit-overlay .mc-edit-table tbody tr.drag-active { opacity: 1; background: #cdeaea !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25); position: relative; z-index: 1000; }
.mc-edit-overlay .mc-edit-table tbody tr.drop-above { box-shadow: 0 -4px 0 0 var(--mc-teal), 0 -8px 12px -4px rgba(13,110,110,0.4); }
.mc-edit-overlay .mc-edit-table tbody tr.drop-below { box-shadow: 0 4px 0 0 var(--mc-teal), 0 8px 12px -4px rgba(13,110,110,0.4); }
.drag-ghost {
    position: fixed; pointer-events: none; z-index: 16000; background: #fff; border: 2px solid var(--mc-teal, #0d6e6e);
    border-radius: 8px; padding: 8px 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); font-size: 0.85rem; font-weight: 600;
    max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drag-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.mc-edit-overlay .edit-expand-btn {
    padding: 8px 10px; font-size: 0.85rem; font-weight: 600; background: #f6f8fb; border: 2px solid #c2cbd6;
    border-radius: 8px; cursor: pointer; min-height: 44px; min-width: 44px; color: #1f2733;
}
.mc-edit-overlay .mobile-only-col { display: none; }
.mc-edit-overlay .edit-cell-expand { display: none; }
.mc-edit-overlay .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.mc-ed-summary { font-size: 12px; color: #5f6b7a; margin: 2px 0 8px; }
.mc-btn-test { background: #0a3d3d; color: #fff; border-color: #062929; }
.mc-btn-test:hover { background: #062929; }

/* ---- test calculator panel ---- */
.mc-test-overlay .mc-test-panel {
    background: #fff; max-width: 1100px; width: 100%; margin: 12px auto; padding: 18px 20px 22px;
    border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); min-width: 0;
}
.mc-test-overlay .mc-test-header {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 16px; border-bottom: 2px solid #0f1722; padding-bottom: 12px;
}
.mc-test-overlay .mc-test-title { margin: 0; font-size: 1.2rem; color: #0f1722; }
.mc-test-overlay .mc-test-sub { margin: 4px 0 0; font-size: 0.82rem; color: #5f6b7a; }
.mc-test-overlay .mc-test-headbtns { display: flex; gap: 8px; }
.mc-test-overlay .edit-btn {
    padding: 8px 14px; font-size: 0.85rem; border-radius: 8px; border: 2px solid #c2cbd6;
    background: #f6f8fb; cursor: pointer; min-height: 44px; font-weight: 600; color: #1f2733;
}
.mc-test-overlay .edit-btn:hover { background: #eef2f7; }
.mc-test-overlay .mc-test-printbtn { background: var(--mc-teal); color: #fff; border-color: var(--mc-teal-dark); }
.mc-test-overlay .mc-test-printbtn:disabled { opacity: 0.55; cursor: default; }
.mc-test-overlay .mc-test-controls {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px;
    padding: 12px; background: #f6f8fb; border-radius: 10px; border: 1px solid #d6dde6;
}
.mc-test-overlay .mc-test-ctrlcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-test-overlay .mc-test-ctrllabel { font-size: 0.78rem; font-weight: 700; color: #1f2733; }
.mc-test-overlay .mc-test-scopetext { font-size: 0.78rem; color: #4a5666; }
.mc-test-overlay .mc-test-smallbtn { min-height: 36px; padding: 6px 10px; font-size: 0.8rem; }
.mc-test-overlay .mc-test-runbtn {
    padding: 8px 20px; font-size: 0.9rem; font-weight: 700; background: var(--mc-teal); color: #fff;
    border: 2px solid var(--mc-teal-dark); border-radius: 8px; cursor: pointer; min-height: 40px; white-space: nowrap;
}
.mc-test-overlay .mc-test-rowlist {
    max-height: 300px; overflow-y: auto; border: 1px solid #d6dde6; border-radius: 10px; padding: 8px; margin-bottom: 16px; background: #fff;
}
.mc-test-overlay .mc-test-loading { color: #5f6b7a; font-size: 0.84rem; text-align: center; margin: 12px 0; }
.mc-test-overlay .mc-test-secrow { background: #0f1722; color: #fff; padding: 6px 10px; font-weight: 700; font-size: 0.84rem; margin-top: 8px; border-radius: 6px; }
.mc-test-overlay .mc-test-subrow { background: #eef2f7; padding: 4px 10px; font-weight: 600; font-size: 0.8rem; color: #4a5666; border-bottom: 1px solid #d6dde6; }
.mc-test-overlay .mc-test-drugrow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #eef2f7; cursor: pointer; font-size: 0.85rem; }
.mc-test-overlay .mc-test-drugrow:hover { background: #f6f8fb; }
.mc-test-overlay .mc-test-check { width: 18px; height: 18px; accent-color: var(--mc-teal); cursor: pointer; flex-shrink: 0; }
.mc-test-overlay .mc-test-drugname { flex: 1; font-weight: 500; min-width: 0; }
.mc-test-overlay .mc-test-badge { font-size: 0.74rem; color: #7a4400; background: #fff7ed; padding: 2px 6px; border-radius: 6px; border: 1px solid #e0c080; white-space: nowrap; }
.mc-test-overlay .mc-test-resultshead { padding: 10px 12px; background: #0f1722; color: #fff; border-radius: 10px 10px 0 0; font-weight: 700; font-size: 0.92rem; }
.mc-test-overlay .mc-test-resultsbody { overflow: auto; border: 1px solid #d6dde6; border-radius: 0 0 10px 10px; max-height: 70vh; }
.mc-test-overlay .mc-test-resultstable { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.mc-test-overlay .mc-test-th, .mc-test-overlay .mc-test-th-left {
    border-bottom: 2px solid #8a96a4; padding: 6px 4px; position: sticky; top: 0; background: #f6f8fb; z-index: 1; vertical-align: bottom; font-size: 0.72rem;
}
.mc-test-overlay .mc-test-th { text-align: center; white-space: pre-line; }
.mc-test-overlay .mc-test-th-left { text-align: left; white-space: nowrap; font-size: 0.74rem; }
.mc-test-overlay .mc-test-th-adult { background: #e7f4ef; }
.mc-test-overlay .mc-test-th-manual { background: #fff3e0; min-width: 100px; }
.mc-test-overlay .mc-test-tr { border-bottom: 1px solid #e3e8ef; }
.mc-test-overlay .mc-test-tr-even { background: #f6f8fb; }
.mc-test-overlay .mc-test-td { padding: 5px 4px; font-size: 0.78rem; vertical-align: top; border-right: 1px solid #eef2f7; overflow-wrap: anywhere; }
.mc-test-overlay .mc-test-td-num { text-align: center; color: #9aa6b4; font-size: 0.7rem; }
.mc-test-overlay .mc-test-td-name { font-weight: 700; }
.mc-test-overlay .mc-test-td-dim { font-size: 0.72rem; color: #4a5666; }
.mc-test-overlay .mc-test-td-calc { text-align: center; }
.mc-test-overlay .mc-test-td-adult { background: #f1f8f4; }
.mc-test-overlay .mc-test-td-adult-even { background: #e7f4ef; }
.mc-test-overlay .mc-test-td-manual { min-width: 100px; background: #fffaf3; }
.mc-test-overlay .mc-test-td-manual-even { background: #fff8f0; }
.mc-test-overlay .mc-test-subval { color: #4a5666; font-size: 0.8rem; }
.mc-test-overlay .mc-test-max { color: #c41e3a; font-size: 0.74rem; }
.mc-test-overlay .mc-test-manual { color: #7a4400; font-style: italic; }
.mc-test-overlay .mc-test-info { color: #5f6b7a; font-style: italic; }
.mc-test-overlay .mc-test-null { color: #9aa6b4; font-style: italic; font-size: 0.7rem; }
.mc-test-overlay .mc-test-adultflag { color: var(--mc-teal-dark); font-weight: 700; font-size: 0.8rem; }

/* iOS: 16px inputs to stop focus-zoom in either overlay */
@supports (-webkit-touch-callout: none) {
    .mc-edit-overlay input, .mc-edit-overlay select, .mc-edit-overlay textarea,
    .mc-test-overlay input { font-size: 16px; }
}

/* Narrow viewport / container: editor table -> stacked card rows
   (mirrors the original mobile editor); panels scroll internally. */
@media (max-width: 760px) {
    .mc-edit-overlay, .mc-test-overlay { padding: 0; }
    .mc-edit-overlay .edit-panel, .mc-test-overlay .mc-test-panel {
        margin: 0; border-radius: 0; max-height: none; min-height: 100vh; width: 100%; box-shadow: none;
    }
    .mc-edit-overlay .mc-edit-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .mc-edit-overlay .mc-edit-table, .mc-edit-overlay .mc-edit-table tbody, .mc-edit-overlay .mc-edit-table tr { display: block; width: 100%; }
    .mc-edit-overlay .mc-edit-table tbody tr {
        display: flex; flex-wrap: wrap; align-items: center; background: #fff; border: 2px solid #d6dde6;
        border-radius: 10px; margin-bottom: 8px; padding: 8px; gap: 8px;
    }
    .mc-edit-overlay .mc-edit-table tbody tr td { display: none; }
    .mc-edit-overlay .mc-edit-table tbody tr td:nth-child(1),
    .mc-edit-overlay .mc-edit-table tbody tr td:nth-child(2) { display: flex; align-items: center; flex: 0 0 auto; }
    .mc-edit-overlay .mc-edit-table tbody tr td:nth-child(3) { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
    .mc-edit-overlay .mc-edit-table tbody tr td.edit-cell-expand { display: flex !important; flex: 0 0 auto; }
    .mc-edit-overlay .edit-cell-expand { display: flex; }
    .mc-edit-overlay .mc-edit-table tbody tr.expanded { flex-direction: column; align-items: stretch; }
    .mc-edit-overlay .mc-edit-table tbody tr.expanded td { display: block; width: 100%; padding: 8px 0; border-bottom: 1px solid #eef2f7; border-right: none; }
    .mc-edit-overlay .mc-edit-table tbody tr.expanded td:nth-child(1),
    .mc-edit-overlay .mc-edit-table tbody tr.expanded td:nth-child(2) { display: none; }
    .mc-edit-overlay .mc-edit-table tbody tr.expanded td::before {
        content: attr(data-mobile-label); display: block; font-weight: 600; font-size: 0.74rem; color: #5f6b7a; margin-bottom: 4px;
    }
    .mc-edit-overlay .mc-edit-table tbody tr.expanded td:nth-child(3)::before,
    .mc-edit-overlay .mc-edit-table tbody tr.expanded td.edit-cell-expand::before { display: none; }
    .mc-edit-overlay .mobile-only-col { display: none; }
    .mc-test-overlay .mc-test-resultsbody { max-height: 60vh; }
}


        /* ============================================================
           LOGIN WALL (v360, 2026-07-30) - NAE MEDI SOLUTIONS LLC.
           Full-screen pre-auth wall in the OPHub palette (#1a1a1a header
           black + #0a7c7c teal). Sits at z-index 9000 (the old landing
           layer) so the login modal (9999) opens ON TOP of it.
           ============================================================ */
        .login-wall {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9000;
            background: radial-gradient(ellipse 120% 90% at 50% -10%, #12292b 0%, #0c1414 45%, #090e0f 100%);
            overflow: hidden;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .login-wall.show { display: flex; }
        body.pre-auth .header,
        body.pre-auth .build-toolbar { visibility: hidden; }
        .lw-bg { position: absolute; inset: 0; pointer-events: none; }
        .lw-grid {
            position: absolute; inset: -1px;
            background-image:
                linear-gradient(rgba(10,124,124,.13) 1px, transparent 1px),
                linear-gradient(90deg, rgba(10,124,124,.13) 1px, transparent 1px);
            background-size: 44px 44px;
            -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 40%, #000 30%, transparent 78%);
            mask-image: radial-gradient(ellipse 95% 75% at 50% 40%, #000 30%, transparent 78%);
            animation: lwGridDrift 30s linear infinite;
        }
        @keyframes lwGridDrift { from { background-position: 0 0, 0 0; } to { background-position: 0 44px, 44px 0; } }
        .lw-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
        .lw-glow-a { width: 520px; height: 520px; left: -150px; top: -170px; background: radial-gradient(circle, rgba(10,124,124,.55) 0%, transparent 70%); }
        .lw-glow-b { width: 660px; height: 660px; right: -220px; bottom: -260px; background: radial-gradient(circle, rgba(13,95,102,.45) 0%, transparent 70%); }
        .lw-card {
            position: relative;
            width: min(430px, 100%);
            background: rgba(15,21,22,.9);
            border: 1px solid rgba(10,124,124,.38);
            border-radius: 18px;
            padding: 34px 32px 26px;
            box-shadow: 0 24px 90px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.03), 0 0 46px rgba(10,124,124,.14);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            text-align: center;
        }
        .lw-card::before {
            content: '';
            position: absolute; left: 26px; right: 26px; top: 0; height: 2px;
            background: linear-gradient(90deg, transparent, #12b3b3 28%, #8ae8dd 50%, #12b3b3 72%, transparent);
            border-radius: 2px; opacity: .95;
        }
        .lw-logo {
            width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 15px;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #0a7c7c 0%, #063d4a 100%);
            color: #eafffb; font-size: 27px; font-weight: 800;
            border: 1px solid rgba(138,232,221,.4);
            box-shadow: 0 10px 26px rgba(10,124,124,.35);
        }
        .lw-wordmark { color: #f2f7f7; font-size: 14px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; padding-left: .3em; }
        .lw-wordmark span { color: #59b8b0; font-weight: 700; }
        .lw-title { color: #ffffff; font-size: 25px; font-weight: 700; margin: 14px 0 6px; letter-spacing: .01em; }
        .lw-sub { color: #8fa8a6; font-size: 13px; line-height: 1.55; margin: 0 0 22px; }
        .lw-auth { display: flex; flex-direction: column; }
        .lw-btn {
            display: flex; align-items: center; justify-content: center; gap: 10px;
            width: 100%; min-height: 48px; margin-top: 11px;
            border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer;
            border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
            color: #eef4f4; font-family: inherit;
            transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
        }
        .lw-btn:hover { background: rgba(10,124,124,.18); border-color: rgba(18,179,179,.55); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
        .lw-btn:focus-visible { outline: 2px solid #12b3b3; outline-offset: 2px; }
        .lw-btn.lw-primary { background: linear-gradient(135deg, #0a7c7c, #0d5f66); border-color: rgba(138,232,221,.45); }
        .lw-btn.lw-primary:hover { background: linear-gradient(135deg, #0d9494, #0e6a72); }
        .lw-or {
            display: flex; align-items: center; gap: 12px;
            color: #5f7573; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
            margin: 17px 0 3px;
        }
        .lw-or::before, .lw-or::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(10,124,124,.45), transparent); }
        .lw-foot { margin-top: 26px; color: #516563; font-size: 11px; letter-spacing: .05em; }
        .lw-foot b { color: #7d9a97; font-weight: 700; }
        @media (max-width: 480px) { .lw-card { padding: 26px 20px 20px; } .lw-title { font-size: 22px; } }
        @media (prefers-reduced-motion: reduce) { .lw-grid { animation: none; } }