/* Page-specific styles extending the design system */

        /* Admin Tabs */
        .admin-tabs {
            display: flex;
            gap: var(--space-2);
            background: var(--neutral-100);
            padding: var(--space-1);
            border-radius: var(--radius-xl);
        }

        .admin-tab {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-5);
            border: none;
            border-radius: var(--radius-lg);
            background: transparent;
            color: var(--neutral-600);
            font-family: inherit;
            font-size: var(--text-base);
            font-weight: var(--font-semibold);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .admin-tab:hover {
            background: var(--neutral-200);
            color: var(--neutral-800);
        }

        .admin-tab.active {
            background: white;
            box-shadow: var(--shadow-sm);
            color: var(--primary-700);
        }

        /* Quality Visit Section */
        .qv-section {
            margin-bottom: var(--space-6);
        }

        .qv-section-title {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-3);
            border-bottom: 2px solid var(--primary-200);
        }

        .qv-section-title h3 {
            color: var(--primary-700);
            font-size: var(--text-lg);
        }

        .qv-score-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-4);
            margin-bottom: var(--space-5);
        }

        .qv-score-card {
            background: var(--bg-secondary);
            border-radius: var(--radius-xl);
            padding: var(--space-5);
            text-align: center;
            border: 2px solid var(--neutral-200);
            transition: all var(--transition-base);
        }

        .qv-score-card.pass {
            background: linear-gradient(135deg, var(--success-light) 0%, #a7f3d0 100%);
            border-color: var(--success);
        }

        .qv-score-card.fail {
            background: linear-gradient(135deg, var(--error-light) 0%, #fecaca 100%);
            border-color: var(--error);
        }

        .qv-score-value {
            font-size: var(--text-3xl);
            font-weight: var(--font-extrabold);
            color: var(--primary-700);
        }

        .qv-score-card.pass .qv-score-value {
            color: #065f46;
        }

        .qv-score-card.fail .qv-score-value {
            color: #b91c1c;
        }

        .qv-score-label {
            font-size: var(--text-sm);
            color: var(--neutral-600);
            margin-top: var(--space-1);
        }

        .qv-threshold-status {
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-full);
            font-weight: var(--font-semibold);
            font-size: var(--text-sm);
            display: inline-block;
            margin-top: var(--space-2);
        }

        .qv-threshold-status.pass {
            background: var(--success);
            color: white;
        }

        .qv-threshold-status.fail {
            background: var(--error);
            color: white;
        }

        .qv-eval-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: var(--space-5);
        }

        .qv-eval-table th {
            background: var(--primary-600);
            color: white;
            padding: var(--space-3) var(--space-4);
            font-weight: var(--font-semibold);
            text-align: center;
        }

        .qv-eval-table td {
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--neutral-100);
            vertical-align: middle;
        }

        .qv-eval-table tr:hover td {
            background: var(--primary-50);
        }

        .qv-eval-table .category-header-row td {
            background: var(--primary-50);
            font-weight: var(--font-bold);
            color: var(--primary-700);
        }

        @media (max-width: 768px) {
            .admin-tabs {
                flex-direction: column;
            }

            .qv-score-summary {
                grid-template-columns: 1fr;
            }
        }

        @media print {
            .admin-tabs {
                display: none !important;
            }
        }

        /* Gateway Section */
        .gateway-section {
            background: linear-gradient(135deg, var(--accent-50) 0%, var(--accent-100) 100%);
            border: 2px solid var(--accent-500);
            border-radius: var(--radius-xl);
            padding: var(--space-6);
            margin-bottom: var(--space-6);
        }

        .gateway-header {
            text-align: center;
            margin-bottom: var(--space-5);
        }

        .gateway-header h3 {
            color: var(--accent-700);
            font-size: var(--text-xl);
            margin-bottom: var(--space-2);
        }

        .gateway-header p {
            color: var(--accent-600);
            font-size: var(--text-sm);
        }

        .gateway-quote {
            text-align: center;
            background: var(--accent-700);
            color: white;
            padding: var(--space-3) var(--space-5);
            border-radius: var(--radius-full);
            font-weight: var(--font-bold);
            margin-bottom: var(--space-5);
            display: inline-block;
            width: 100%;
        }

        /* Quality Cards */
        .quality-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-5);
            margin-bottom: var(--space-6);
        }

        .quality-card {
            background: var(--bg-secondary);
            border-radius: var(--radius-xl);
            padding: var(--space-6);
            text-align: center;
            border: 2px solid var(--secondary-500);
            transition: all var(--transition-base);
        }

        .quality-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .quality-card.educational {
            background: linear-gradient(135deg, var(--secondary-50) 0%, var(--secondary-100) 100%);
            border-color: var(--secondary-500);
        }

        .quality-card.operational {
            background: linear-gradient(135deg, var(--purple-50) 0%, #ede9fe 100%);
            border-color: var(--purple-500);
        }

        .quality-icon {
            width: 60px;
            height: 60px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--space-4);
        }

        .quality-icon.educational {
            background: var(--bg-gradient-secondary);
        }

        .quality-icon.operational {
            background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-400) 100%);
        }

        .quality-card h4 {
            color: var(--secondary-600);
            margin-bottom: var(--space-2);
            font-size: var(--text-lg);
        }

        .quality-card.operational h4 {
            color: var(--purple-500);
        }

        .quality-score-input {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-3);
            margin-bottom: var(--space-4);
        }

        .quality-score-input input {
            width: 80px;
            padding: var(--space-3);
            border: 2px solid var(--secondary-500);
            border-radius: var(--radius-lg);
            text-align: center;
            font-weight: var(--font-bold);
            font-size: var(--text-lg);
        }

        .quality-card.operational .quality-score-input input {
            border-color: var(--purple-500);
        }

        .quality-status {
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
        }

        .quality-link {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            margin-top: var(--space-4);
            font-weight: var(--font-semibold);
            transition: all var(--transition-fast);
        }

        .quality-link:hover {
            gap: var(--space-3);
        }

        /* Gateway Result */
        .gateway-result {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            padding: var(--space-5);
            border-radius: var(--radius-xl);
            margin-top: var(--space-5);
        }

        .gateway-result.pass {
            background: linear-gradient(135deg, var(--success-light) 0%, #a7f3d0 100%);
            border: 2px solid var(--success);
        }

        .gateway-result.fail {
            background: linear-gradient(135deg, var(--error-light) 0%, #fecaca 100%);
            border: 2px solid var(--error);
        }

        .gateway-result-icon {
            width: 50px;
            height: 50px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-2xl);
            font-weight: var(--font-bold);
            color: white;
            flex-shrink: 0;
        }

        .gateway-result.pass .gateway-result-icon {
            background: var(--success);
        }

        .gateway-result.fail .gateway-result-icon {
            background: var(--error);
        }

        .gateway-result-text h4 {
            font-size: var(--text-lg);
            margin-bottom: var(--space-1);
        }

        .gateway-result.pass .gateway-result-text h4 {
            color: #065f46;
        }

        .gateway-result.fail .gateway-result-text h4 {
            color: #b91c1c;
        }

        /* Level Header */
        .level-header {
            background: var(--bg-gradient-primary);
            color: white;
            padding: var(--space-4) var(--space-6);
            border-radius: var(--radius-xl);
            margin-bottom: var(--space-5);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .level-header h3 {
            color: white;
            font-size: var(--text-lg);
        }

        .level-header .ceiling {
            background: rgba(255,255,255,0.2);
            padding: var(--space-2) var(--space-5);
            border-radius: var(--radius-full);
            font-weight: var(--font-bold);
        }

        /* Criteria Table */
        .criteria-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .criteria-table th {
            background: var(--primary-600);
            color: white;
            padding: var(--space-4);
            font-weight: var(--font-semibold);
            text-align: center;
        }

        .criteria-table td {
            padding: var(--space-4);
            border-bottom: 1px solid var(--neutral-100);
            vertical-align: top;
        }

        .criteria-table tr:hover td {
            background: var(--primary-50);
        }

        /* Checkbox Options */
        .checkbox-options {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .checkbox-option {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            background: var(--neutral-50);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all var(--transition-fast);
            border: 2px solid transparent;
        }

        .checkbox-option:hover {
            background: var(--primary-50);
            border-color: var(--primary-200);
        }

        .checkbox-option.selected {
            background: var(--success-light);
            border-color: var(--success);
        }

        .checkbox-option input[type="radio"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary-600);
        }

        .checkbox-option label {
            margin: 0;
            cursor: pointer;
            flex: 1;
        }

        .checkbox-option .reward {
            background: var(--primary-600);
            color: white;
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: var(--font-semibold);
        }

        /* Reward Input */
        .reward-input {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            justify-content: center;
        }

        .reward-input input {
            width: 100px;
            text-align: center;
            font-weight: var(--font-bold);
            color: var(--primary-600);
            padding: var(--space-2) var(--space-3);
            border: 2px solid var(--neutral-200);
            border-radius: var(--radius-lg);
        }

        /* Results Section */
        .results-section {
            background: var(--bg-gradient-primary);
            border-radius: var(--radius-xl);
            padding: var(--space-8);
            color: white;
            margin-bottom: var(--space-6);
        }

        .results-section h2 {
            color: white;
            text-align: center;
            margin-bottom: var(--space-6);
        }

        .results-table {
            width: 100%;
            border-collapse: collapse;
            background: rgba(255,255,255,0.1);
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: var(--space-5);
        }

        .results-table th, .results-table td {
            padding: var(--space-4);
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .results-table th {
            background: rgba(255,255,255,0.15);
        }

        .total-reward {
            text-align: center;
            padding: var(--space-6);
            background: rgba(255,255,255,0.15);
            border-radius: var(--radius-xl);
            margin-top: var(--space-5);
        }

        .total-reward h4 {
            font-size: var(--text-lg);
            color: white;
            margin-bottom: var(--space-3);
            opacity: 0.9;
        }

        .total-reward .amount {
            font-size: var(--text-5xl);
            font-weight: var(--font-extrabold);
            color: var(--accent-300);
        }

        .total-reward .max {
            font-size: var(--text-sm);
            opacity: 0.8;
            margin-top: var(--space-2);
        }

        /* Approval Section */
        .approval-section {
            background: var(--bg-secondary);
            border-radius: var(--radius-xl);
            padding: var(--space-6);
            box-shadow: var(--shadow-card);
            margin-bottom: var(--space-6);
        }

        .approval-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-5);
            margin-bottom: var(--space-6);
        }

        .approval-card {
            border: 2px solid var(--neutral-200);
            border-radius: var(--radius-xl);
            padding: var(--space-5);
            text-align: center;
            transition: all var(--transition-base);
        }

        .approval-card.approved {
            background: linear-gradient(135deg, var(--success-light) 0%, #bbf7d0 100%) !important;
            border-color: var(--success) !important;
        }

        .approval-card h4 {
            color: var(--primary-600);
            margin-bottom: var(--space-4);
            font-size: var(--text-base);
        }

        .e-approval-status {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-4);
            background: var(--neutral-100);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-4);
        }

        .pending-icon {
            font-size: var(--text-3xl);
        }

        .e-approve-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            background: var(--bg-gradient-secondary);
            color: white;
            border: none;
            padding: var(--space-3) var(--space-6);
            border-radius: var(--radius-full);
            font-family: inherit;
            font-size: var(--text-base);
            font-weight: var(--font-semibold);
            cursor: pointer;
            transition: all var(--transition-base);
            box-shadow: var(--shadow-md);
        }

        .e-approve-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .e-approve-btn.executive-btn {
            background: var(--bg-gradient-accent);
            color: var(--primary-900);
        }

        .approved-badge {
            display: inline-block;
            background: var(--success);
            color: white;
            padding: var(--space-2) var(--space-5);
            border-radius: var(--radius-full);
            font-weight: var(--font-bold);
            margin-bottom: var(--space-3);
        }

        .approved-badge.executive-badge {
            background: var(--bg-gradient-accent);
            color: var(--primary-900);
        }

        .approved-details {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            color: var(--neutral-700);
            font-size: var(--text-sm);
        }

        /* Note Box */
        .note-box {
            background: var(--accent-50);
            border-right: 4px solid var(--accent-500);
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            margin: var(--space-4) 0;
            font-size: var(--text-sm);
            color: var(--accent-700);
        }

        .note-box strong {
            color: var(--accent-800);
        }

        /* Info & Staff Tables */
        .info-table, .staff-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: var(--space-5);
        }

        .info-table th, .info-table td,
        .staff-table th, .staff-table td {
            border: 1px solid var(--neutral-200);
            padding: var(--space-3);
            text-align: center;
        }

        .info-table th, .staff-table th {
            background: var(--primary-600);
            color: white;
            font-weight: var(--font-semibold);
        }

        .info-table input, .info-table select,
        .staff-table input {
            border: none;
            text-align: center;
            padding: var(--space-2);
            width: 100%;
            background: transparent;
        }

        .info-table select {
            background: var(--bg-secondary);
            cursor: pointer;
        }

        /* Matrix Section */
        .matrix-section {
            margin-top: var(--space-5);
            padding: var(--space-4);
            background: var(--primary-50);
            border-radius: var(--radius-lg);
        }

        .matrix-section h4 {
            color: var(--primary-700);
            margin-bottom: var(--space-3);
        }

        .matrix-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            background: var(--bg-gradient-primary);
            color: white;
            border: none;
            padding: var(--space-3) var(--space-5);
            border-radius: var(--radius-full);
            font-family: inherit;
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            cursor: pointer;
            transition: all var(--transition-base);
            margin-bottom: var(--space-4);
            box-shadow: var(--shadow-md);
        }

        .matrix-toggle-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .matrix-toggle-btn .toggle-icon {
            transition: transform var(--transition-base);
        }

        .matrix-toggle-btn.active .toggle-icon {
            transform: rotate(180deg);
        }

        .matrices-container {
            max-height: 0;
            overflow: hidden;
            transition: max-height var(--transition-slower) ease-out, opacity var(--transition-base);
            opacity: 0;
        }

        .matrices-container.show {
            max-height: 2000px;
            opacity: 1;
        }

        .matrix-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--text-sm);
            margin-bottom: var(--space-4);
        }

        .matrix-table th, .matrix-table td {
            border: 1px solid var(--neutral-200);
            padding: var(--space-2) var(--space-3);
            text-align: center;
        }

        .matrix-table th {
            background: var(--primary-600);
            color: white;
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z-modal);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background: var(--bg-secondary);
            border-radius: var(--radius-2xl);
            padding: var(--space-8);
            max-width: 450px;
            width: 90%;
            box-shadow: var(--shadow-2xl);
            text-align: center;
        }

        .modal-content h3 {
            color: var(--primary-700);
            margin-bottom: var(--space-4);
            font-size: var(--text-xl);
        }

        .modal-form {
            margin: var(--space-5) 0;
            text-align: right;
        }

        .modal-form input {
            width: 100%;
            padding: var(--space-3) var(--space-4);
            border: 2px solid var(--neutral-200);
            border-radius: var(--radius-lg);
            font-size: var(--text-base);
            transition: border-color var(--transition-fast);
        }

        .modal-form input:focus {
            outline: none;
            border-color: var(--primary-500);
        }

        .modal-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            background: var(--primary-50);
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-5);
            font-size: var(--text-sm);
            color: var(--primary-600);
        }

        .modal-actions {
            display: flex;
            gap: var(--space-3);
            justify-content: center;
        }

        /* Actions */
        .actions {
            display: flex;
            gap: var(--space-4);
            flex-wrap: wrap;
            justify-content: center;
            margin-top: var(--space-6);
        }

        /* Day Name Badge */
        .day-name-badge {
            background: var(--bg-gradient-secondary);
            color: white;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-full);
            font-weight: var(--font-semibold);
            min-width: 70px;
            text-align: center;
        }

        /* Print Signatures */
        .print-signatures {
            display: none;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .approval-grid {
                grid-template-columns: 1fr;
            }

            .level-header {
                flex-direction: column;
                gap: var(--space-3);
                text-align: center;
            }

            .quality-cards-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Print Styles */
        @media print {
            @page {
                size: A4 portrait;
                margin: 5mm;
            }

            body {
                background: white !important;
                font-size: 8pt !important;
            }

            .nav-header, .actions, .matrix-toggle-btn, .matrices-container,
            .note-box, .e-approval-status, .e-approve-btn, .modal-overlay,
            .gateway-quote, .quality-link, .no-print {
                display: none !important;
            }

            .container {
                max-width: 100% !important;
                padding: 0 !important;
            }

            .card, .form-section, .gateway-section, .approval-section {
                box-shadow: none !important;
                border: 1px solid #ccc !important;
                padding: 10px !important;
                margin-bottom: 10px !important;
            }

            .print-signatures {
                display: block !important;
            }

            .electronic-approval {
                display: none !important;
            }

            .signature-row {
                display: flex !important;
                gap: 15px !important;
                margin-bottom: 10px !important;
            }

            .signature-box {
                flex: 1 !important;
                border: 1px solid #999 !important;
                padding: 10px !important;
                border-radius: 5px !important;
            }

            .signature-box h4 {
                font-size: 9pt !important;
                text-align: center !important;
                margin-bottom: 8px !important;
                color: var(--primary-800) !important;
            }

            .sig-line {
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
                margin-bottom: 5px !important;
                font-size: 8pt !important;
            }

            .sig-line span:first-child {
                font-weight: 600 !important;
                min-width: 40px !important;
            }

            .sig-value {
                flex: 1 !important;
                border-bottom: 1px dotted #999 !important;
                min-height: 15px !important;
            }

            .sig-space {
                flex: 1 !important;
                border-bottom: 1px solid #333 !important;
                min-height: 25px !important;
            }

            .executive-row {
                justify-content: center !important;
            }

            .executive-box {
                max-width: 300px !important;
                background: #fffbeb !important;
            }
        }