/* Additional styles for the admin app */
/* This file can be used to extend or override the styles in index.html */

/* Local Fallback Fonts */
@font-face {
    font-family: 'Sora';
    src: url('/fonts/Sora-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6,
.btn, .nav-item, .modal-title, .content-title,
.logo-text {
    font-family: 'Sora', sans-serif !important;
}

blockquote {
    font-family: 'Manrope', sans-serif !important;
    font-style: italic !important;
}

:root {
    /* Border Radius - Reduced */
    --br-xl: 12px;
    --br-lg: 8px;
    --br-md: 6px;
    --br-sm: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgba(71,16,235,0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(71,16,235,0.5);
}

/* Animation for content transitions */
.content-area>div {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive table adjustments */
@media (max-width: 768px) {
    .table {
        font-size: 9px;
    }

    .table th,
    .table td {
        padding: 6px 4px;
    }

    .status-badge {
        padding: 2px 6px;
        font-size: 8px;
    }
}

/* Chart container enhancements */
.chart-container {
    position: relative;
    overflow: hidden;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-wrapper {
    position: relative;
    height: 91%;
    min-height: 300px;
    width: 100%;
}

/* Form enhancements */
.form-control:focus {
    outline: none;
    border-color: #4710EB;
    box-shadow: 0 0 0 3px rgba(71,16,235,0.2);
}

/* Button hover effects */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

.reconcile-btn {
    min-width: 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
}

/* Card hover effects */

/* Side Pane Styles */
.side-pane-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.side-pane-overlay.active {
    opacity: 1;
}

.side-pane {
    position: fixed;
    top: 0;
    right: -750px;
    width: 750px;
    max-width: 90vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.side-pane.active {
    right: 0;
}

.side-pane-header {
    padding: 20px 25px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.side-pane-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.side-pane-header p {
    margin: 5px 0 0;
    font-size: 12px;
    opacity: 0.9;
}

.side-pane-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 18px;
}

.side-pane-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.side-pane-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.side-pane-footer {
    padding: 15px 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
    background: #f8fafc;
}

@media (max-width: 768px) {
    .side-pane {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Photo Upload Styles for Side Pane */
.photo-upload-section {
    margin-bottom: 24px;
}

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

.photo-preview-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px dashed #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8fafc;
    position: relative;
    transition: all 0.3s ease;
}

.photo-preview-circle.has-photo {
    border-style: solid;
    border-color: var(--primary-green);
}

.photo-preview-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.photo-preview-circle.has-photo img {
    display: block;
}

.photo-placeholder-icon {
    text-align: center;
    color: #94a3b8;
}

.photo-placeholder-icon i {
    font-size: 48px;
    margin-bottom: 8px;
}

.photo-placeholder-icon p {
    font-size: 12px;
    margin: 0;
}

.photo-preview-circle.has-photo .photo-placeholder-icon {
    display: none;
}

/* ── Cancel control for an in-flight document upload ──
   Sits in the progress bar header; disabled once the bytes are away and the
   server has taken over the transfer. */
.upload-progress-cancel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fef2f2;
    color: #dc2626;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.upload-progress-cancel:hover:not(:disabled) {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.upload-progress-cancel:focus-visible {
    outline: 3px solid rgba(220, 38, 38, 0.35);
    outline-offset: 2px;
}

.upload-progress-cancel:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Premium photo upload actions ── */
.photo-upload-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
}

.photo-upload-btn {
    position: relative;
    flex: 1;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 18px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease,
        background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.photo-upload-btn i {
    font-size: 15px;
    line-height: 1;
}

/* Sheen that sweeps across on hover; sits above the fill, below the label. */
.photo-upload-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateX(-120%);
    transition: transform 0.6s ease;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.3) 50%, transparent 80%);
}

.photo-upload-btn:hover::after {
    transform: translateX(120%);
}

/* Primary — the upload action, matching the pane's gradient CTA. */
.photo-upload-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #4710EB 0%, #312e81 100%);
    box-shadow: 0 10px 22px -10px rgba(71, 16, 235, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.photo-upload-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -12px rgba(71, 16, 235, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Secondary — the camera action, on a glassy lilac surface. */
.photo-upload-btn-secondary {
    color: #4710EB;
    background: #ffffff;
    border-color: #dcd6fb;
    box-shadow: 0 6px 16px -12px rgba(15, 23, 42, 0.45);
}

.photo-upload-btn-secondary::after {
    background: linear-gradient(120deg, transparent 20%, rgba(71, 16, 235, 0.14) 50%, transparent 80%);
}

.photo-upload-btn-secondary:hover {
    transform: translateY(-2px);
    color: #4710EB;
    background: #f5f3ff;
    border-color: #4710EB;
    box-shadow: 0 12px 22px -14px rgba(71, 16, 235, 0.6);
}

.photo-upload-btn:active {
    transform: translateY(0) scale(0.985);
}

.photo-upload-btn:focus-visible {
    outline: 3px solid rgba(71, 16, 235, 0.35);
    outline-offset: 2px;
}

.photo-upload-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.photo-upload-btn input[type="file"] {
    display: none;
}

/* Button Warning Style */
.btn-warning {
    background: #f59e0b;
    color: white;
    border: none;
}

.btn-warning:hover {
    background: #d97706;
}

/* Dropdown Menu Styles */
.dropdown-item:hover {
    background: #f3f4f6;
}

.action-menu-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Status Badge Styles */
.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-badge i {
    font-size: 10px;
}

.status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-inactive {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.stat-card,
.table-container,
.chart-container {
    transition: all 0.3s ease;
}

.stat-card:hover,
.table-container:hover,
.chart-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Chart legend adjustments */
.chart-container .chartjs-legend {
    margin-top: 20px;
}

.chart-container .chartjs-legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.chart-container .chartjs-legend li {
    display: flex;
    align-items: center;
    margin: 0 10px 5px 0;
    font-size: 10px;
}

.chart-container .chartjs-legend li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 2px;
}

/* Compact layout adjustments */
.stats-container {
    gap: 15px;
}

.stat-card {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 10px;
}

.chart-header {
    margin-bottom: 10px;
}

.table th,
.table td {
    padding: 10px;
}

.content-header {
    margin-bottom: 10px;
}

/* Fix for chart container overflow */
.content-area {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

/* Additional styles for editable table cells */
.form-control-sm {
    padding: 4px 6px;
    font-size: 9px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-dark);
    width: 100%;
    box-sizing: border-box;
}

.form-control-sm:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px rgba(71,16,235,0.2);
}

select.form-control-sm {
    height: 24px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px;
    padding-right: 24px;
    appearance: none;
}

/* Inline score editing (Result Management tab) */
td.score-edit-cell {
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
    white-space: nowrap;
}

td.score-edit-cell:hover {
    background: rgba(71, 16, 235, 0.06);
}

td.score-edit-cell .score-inline-input {
    width: 64px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--primary-green);
    border-radius: 4px;
    outline: none;
    box-shadow: 0 0 0 2px rgba(71, 16, 235, 0.15);
    color: var(--text-dark);
    background: #fff;
    box-sizing: border-box;
}

/* Score flag icons (Super Admin flags each exam component) */
td.score-edit-cell .score-value {
    vertical-align: middle;
}

td.score-edit-cell .score-flag-btn {
    vertical-align: middle;
    margin-left: 5px;
    background: none;
    border: none;
    padding: 2px 3px;
    font-size: 9px;
    line-height: 1;
    color: #cbd5e1;
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.15s ease, background 0.15s ease;
}

td.score-edit-cell .score-flag-btn:hover {
    color: #f57c00;
    background: rgba(245, 124, 0, 0.1);
}

td.score-edit-cell .score-flag-btn.is-flagged {
    color: #f57c00;
}

/* Graduated students grouped by session (collapsible group rows) */
tr.graduate-group-row td {
    background: #f1f5f9;
    padding: 10px 14px;
    font-size: 11px;
    color: #334155;
    cursor: pointer;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    user-select: none;
}

tr.graduate-group-row:hover td {
    background: #e2e8f0;
}

tr.graduate-group-row .graduate-group-chevron {
    display: inline-block;
    margin-right: 8px;
    color: #64748b;
    font-size: 10px;
    transition: transform 0.15s ease;
}

tr.graduate-group-row.expanded .graduate-group-chevron {
    transform: rotate(90deg);
}

tr.graduate-group-row .graduate-group-label {
    font-weight: 700;
    color: #1e293b;
}

tr.graduate-group-row .graduate-group-count {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 10px;
}

/* Nested class-level group rows inside an expanded session group */
tr.graduate-class-row td {
    background: #f8fafc;
    border-left: none;
}
tr.graduate-class-row:hover td {
    background: #f1f5f9;
}
tr.graduate-class-row .graduate-group-label {
    font-weight: 600;
    color: #475569;
}

/* Spinner styles */
.spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

/* Sub-tab Navigation */
.sub-tab-nav {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0;
}

.sub-tab-btn {
    background: none;
    border: none;
    padding: 12px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--dark-gray);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.sub-tab-btn:hover {
    color: var(--primary-green);
    background: rgba(71,16,235,0.05);
}

.sub-tab-btn.active {
    color: var(--primary-green);
    font-weight: 600;
    border-bottom-color: var(--primary-green);
}

/* Academic Performance Specific Styles */
.stat-card .stat-value {
    background: linear-gradient(135deg, var(--text-dark) 0%, var(--dark-gray) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-text {
    display: inline;
}

.btn-loading .btn-text {
    display: none;
}

.btn-loading .spinner {
    display: inline-block;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    background: white;
    border-radius: var(--br-lg);
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
}

/* Specific override for Promotion Modal to be EXTRA wide */
#promotionModal .modal-dialog {
    max-width: 1100px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.modal-content {
    border-radius: var(--br-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
}

.modal-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.btn-close {
    background: none;
    border: none;
    font-size: 19px;
    cursor: pointer;
    color: var(--dark-gray);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.btn-close:hover {
    color: var(--darker-gray);
    background: rgba(0, 0, 0, 0.05);
}

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

/* New Task modal - taller on desktop, body scrolls when content overflows */
#newTaskModal .modal-dialog {
    max-height: 95vh;
    display: flex;
    flex-direction: column;
}

#newTaskModal .modal-content {
    min-height: 0;
}

#newTaskModal .modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: rgba(255, 255, 255, 0.8);
}

.form-group {
    margin-bottom: 15px;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 500;
    color: var(--darker-gray);
}

.form-control {
    width: 100%;
    padding: 10px;
    border-radius: var(--br-sm);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    color: var(--text-dark);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(71,16,235,0.2);
}

select.form-control {
    height: 38px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    padding-right: 36px;
    appearance: none;
}

/* Form grid for horizontal layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Ensure form-grid stays 2-column on desktop */
@media (min-width: 769px) {
    .form-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Pagination styles */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    gap: 10px;
}

.pagination-info {
    font-size: 10px;
    color: var(--darker-gray);
}

.btn-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-sm:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Responsive adjustments for modal */
@media (max-width: 768px) {
    .modal-dialog {
        width: 95%;
        max-width: 95%;
        max-height: 95vh;
    }

    .modal-body {
        padding: 15px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Sub-tab navigation styles */
.sub-tab-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 5px;
}

.sub-tab-btn {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 500;
    color: var(--dark-gray);
    cursor: pointer;
    padding: 8px 12px;
    position: relative;
    transition: all 0.3s ease;
}

.sub-tab-btn:hover {
    color: var(--primary-green);
}

.sub-tab-btn.active {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

/* Wizard Steps */
.wizard-step {
    padding: 10px 10px;
}

/* Hero Section (Step 1) */
.promo-hero {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(71,16,235,0.03) 100%);
    border-radius: var(--br-lg);
}

.promo-hero-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(71,16,235,0.05) 0%, rgba(71,16,235,0.15) 100%);
    color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 26px;
    box-shadow: 0 10px 20px rgba(71,16,235,0.15);
}

.promo-hero h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.promo-req-list {
    background: white;
    padding: 20px;
    border-radius: var(--br-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.03);
    text-align: left;
    max-width: 400px;
    margin: 30px auto;
}

/* Summary Cards (Dashboard Style) */
.promotion-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background: white;
    padding: 20px;
    border-radius: var(--br-lg);
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.summary-card.promoted::before {
    background: linear-gradient(90deg, #0055EF, #81c784);
}

.summary-card.repeating::before {
    background: linear-gradient(90deg, #f44336, #e57373);
}

.summary-card.graduated::before {
    background: linear-gradient(90deg, #2196f3, #64b5f6);
}

.summary-card h3 {
    font-size: 19px;
    font-weight: 800;
    margin: 10px 0 5px;
    color: var(--text-dark);
}

.summary-card p {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #90a4ae;
}

.card-icon-bg {
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 48px;
    opacity: 0.05;
    transform: rotate(-15deg);
}

/* Modern Tabs */
.promotion-tabs {
    background: #f8f9fa;
    padding: 5px;
    border-radius: var(--br-md);
    display: inline-flex;
    gap: 5px;
    margin-bottom: 20px;
    border: none;
}

.promotion-tab {
    padding: 8px 20px;
    border-radius: var(--br-sm);
    font-size: 10px;
    font-weight: 600;
    color: var(--dark-gray);
    background: transparent;
    transition: all 0.2s ease;
}

.promotion-tab:hover {
    color: var(--text-dark);
    background: rgba(0, 0, 0, 0.02);
}

.promotion-tab.active {
    background: white;
    color: var(--primary-green);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Premium Table */
.promo-table-container {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--br-md);
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
}

.table.premium-table thead {
    background: #fcfcfc;
}

.table.premium-table th {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #90a4ae;
    font-weight: 700;
    padding: 15px 20px;
    border: none;
}

.table.premium-table td {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    font-size: 10px;
    vertical-align: middle;
}

.table.premium-table tr:hover td {
    background: #fafafa;
}

/* Status Badges */
.status-badge {
    padding: 5px 12px;
    border-radius: var(--br-xl);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.status-active,
.status-approved {
    background: rgba(71,16,235,0.1);
    color: #4710EB;
    border: 1px solid rgba(71,16,235,0.2);
}

.status-inactive,
.status-rejected,
.status-disapproved {
    background: rgba(211, 47, 47, 0.1);
    color: #d32f2f;
    border: 1px solid rgba(211, 47, 47, 0.2);
}

.status-pending {
    background: rgba(245, 124, 0, 0.1);
    color: #f57c00;
    border: 1px solid rgba(245, 124, 0, 0.2);
}

/* Premium Tooltip for Children Names */
.children-count-container {
    position: relative;
    display: inline-block;
}

.children-tooltip {
    visibility: hidden;
    width: max-content;
    max-width: 250px;
    background-color: var(--text-dark);
    color: #fff;
    text-align: left;
    border-radius: var(--br-sm);
    padding: 10px 14px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 9px;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.children-tooltip b {
    display: block;
    color: var(--primary-green-light);
    margin-bottom: 4px;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.children-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--text-dark) transparent transparent transparent;
}

.children-count-container:hover .children-tooltip {
    visibility: visible;
    opacity: 1;
    bottom: 140%;
}

/* Bulk Actions Toolbar */
.bulk-actions-toolbar {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--br-md);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.bulk-actions-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dark);
}

.bulk-actions-info span {
    background: var(--primary-green);
    color: white;
    padding: 2px 8px;
    border-radius: var(--br-xl);
    font-size: 10px;
}

.bulk-actions-btns {
    display: flex;
    gap: 10px;
}

/* Search Bar */
.search-container input {
    border-radius: 50px;
    background: #f1f3f4;
    border: 1px solid transparent;
    transition: all 0.3s;
    padding: 10px 20px 10px 40px;
}

.search-container input:focus {
    background: white;
    border-color: rgba(71,16,235,0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Buttons */
.btn-primary-gradient {
    background: linear-gradient(135deg, #4710EB 0%, #000033 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(71,16,235,0.3);
    transition: all 0.3s;
}

.btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(71,16,235,0.4);
}

/* Promotion Table Refinements */
.premium-table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    color: var(--dark-gray);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Checkout Modal Enhancements */
.search-results-dropdown {
    position: absolute;
    width: 100%;
    max-height: 250px;
    background: white;
    border-radius: var(--br-sm);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    overflow-y: auto;
    border: 1px solid var(--medium-gray);
    margin-top: 5px;
}

.search-result-item {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid #f1f5f9;
}

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

.search-result-item:hover {
    background: #f8fafc;
}

.search-result-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid #e2e8f0;
}

.search-result-info h4 {
    font-size: 11px;
    margin: 0;
    color: var(--text-dark);
}

.search-result-info p {
    font-size: 10px;
    margin: 0;
    color: var(--dark-gray);
}

.fee-row-selected {
    background-color: var(--accent-green) !important;
}

.premium-table tbody tr:hover {
    background-color: rgba(71,16,235,0.03) !important;
}

.premium-table tr.row-repeating td {
    background-color: rgba(0, 0, 0, 0.01);
}

.row-repeating {
    opacity: 0.95;
}

/* Promote / Repeat status badges - color + text signal for the review lists.
   .promoted = green (advancing), .repeating = amber (staying), .blocked =
   red (cannot move), .skipped = gray (no action this run). */
.status-badge.promoted {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.repeating {
    background: rgba(245, 124, 0, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 124, 0, 0.3);
}

.status-badge.skipped {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.status-badge.blocked {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

/* Row-level tint: promoting = green wash, repeating = amber wash. */
.premium-table tr.row-promoted td {
    background-color: rgba(16, 185, 129, 0.05);
}

.premium-table tr.row-repeating td {
    background-color: rgba(245, 124, 0, 0.06);
}

/* Override button inside the promotion review list. */
.promo-override-btn {
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.promo-override-btn:hover {
    border-color: #4710EB;
    color: #4710EB;
    background: rgba(71, 16, 235, 0.04);
}

.promo-override-btn.applied {
    border-color: #4710EB;
    color: #fff;
    background: #4710EB;
}

.promo-override-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Card Badge Animations */
.summary-card:hover .badge {
    opacity: 1 !important;
    transform: scale(1.1);
}

.badge {
    transition: all 0.3s ease;
}

/* Sticky Header Helper */
.table-container {
    max-height: 500px;
    overflow-y: auto;
}

/* Dropdown Functional Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #fff;
    min-width: 160px;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: var(--br-sm);
    padding: 8px 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    padding: 8px 16px;
    color: var(--text-dark);
    text-decoration: none;
    display: block;
    transition: all 0.2s;
}

.dropdown-item:hover {
    background-color: var(--accent-green);
    color: var(--primary-green-dark);
}

/* Attendance Comment Bubble Styles */
.comment-bubble {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: #4710EB;
    color: white;
    padding: 10px 15px;
    border-radius: var(--br-md);
    font-size: 10px;
    width: 250px;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    cursor: default;
    transform-origin: bottom center;
    animation: bubbleEmanate 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    line-height: 1.5;
}

.comment-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #4710EB transparent transparent transparent;
}

@keyframes bubbleEmanate {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

.comment-icon-wrapper i:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
}

/* --- Ultra-Premium POS Design Tokens --- */
:root {
    --pos-glass-bg: rgba(255, 255, 255, 0.7);
    --pos-glass-border: rgba(255, 255, 255, 0.2);
    --pos-accent: #4710EB;
    --pos-accent-light: rgba(71,16,235,0.05);
    --pos-text-main: #1e293b;
    --pos-text-muted: #64748b;
    --pos-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Wizard Animations */
.wizard-slide-in {
    animation: slideLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Financial Passport */
.financial-passport {
    background: white;
    border-radius: var(--br-xl);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--pos-shadow);
    margin-bottom: 25px;
    border: 1px solid #f1f5f9;
}

.sticky-passport {
    position: sticky;
    top: 0;
    z-index: 110;
    margin: 0 -5px 25px -5px;
    border-radius: 0 0 20px 20px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
}

.passport-identity {
    display: flex;
    align-items: center;
    gap: 20px;
}

.passport-photo-frame {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
}

.passport-stats {
    display: flex;
    gap: 30px;
}

.passport-stat-item {
    text-align: right;
}

.passport-stat-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pos-text-muted);
    letter-spacing: 0.5px;
}

.passport-stat-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--pos-text-main);
}

/* Fee Groups (Session/Term) */
.fee-group {
    margin-bottom: 10px;
}

.fee-group-header {
    font-size: 11px;
    font-weight: 800;
    color: var(--pos-text-main);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: var(--br-md);
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
    position: relative;
}

.fee-group-header:hover {
    background: #f1f5f9;
}

.fee-group-header .toggle-icon {
    margin-left: auto;
    transition: transform 0.3s;
}

.fee-group.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.fee-group.collapsed .fee-grid {
    display: none !important;
}

.fee-group-header i:first-child {
    color: var(--pos-accent);
}

/* Fee Shopping Cards */
.fee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.fee-card {
    background: white;
    border-radius: var(--br-lg);
    padding: 16px 20px;
    border: 1px solid #f1f5f9;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 20px;
}

.fee-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.fee-card.selected {
    border-color: var(--pos-accent);
    background: var(--pos-accent-light);
}

.fee-card.selected::after {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: var(--pos-accent);
    font-size: 14px;
    display: none;
    /* Hide default icon as we use layout now */
}

.fee-card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--br-md);
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--pos-text-muted);
    flex-shrink: 0;
}

.selected .fee-card-icon {
    background: white;
    color: var(--pos-accent);
}

.fee-card-info-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fee-card-title {
    font-weight: 800;
    font-size: 12px;
    color: var(--pos-text-main);
}

.fee-card-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pos-text-muted);
    letter-spacing: 0.5px;
}

.fee-card-balance {
    color: var(--pos-text-main);
    font-weight: 900;
    font-size: 14px;
    text-align: right;
    margin-left: auto;
}

.selected .fee-card-balance {
    color: var(--pos-accent);
}

.fee-card-input-wrapper {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.05);
    width: 100%;
}

/* Merchant Sticky Bar */
.merchant-footer {
    position: sticky;
    bottom: -30px;
    left: -30px;
    right: -30px;
    background: white;
    padding: 30px 40px 50px 40px;
    /* Increased bottom padding */
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.05);
    /* Enhanced shadow */
    margin: 30px -30px -30px -30px;
    /* Increased top margin */
}

.merchant-total-info {
    display: flex;
    flex-direction: column;
}

.merchant-total-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--pos-text-muted);
}

.merchant-total-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--pos-accent);
}

/* POS Search Hub */
.search-hub {
    text-align: center;
    padding: 60px 20px;
}

.hub-icon {
    font-size: 40px;
    color: var(--pos-accent);
    margin-bottom: 20px;
    opacity: 0.8;
}

.hub-chips {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.hub-chip {
    padding: 6px 14px;
    border-radius: var(--br-xl);
    background: #f1f5f9;
    font-size: 10px;
    font-weight: 600;
    color: var(--pos-text-muted);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.hub-chip:hover {
    background: white;
    border-color: var(--pos-accent);
    color: var(--pos-accent);
}

/* Loading States */
.pos-loader {
    display: none;
    margin: 20px 0;
}

.pos-loading-shimmer {
    height: 4px;
    width: 100%;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.pos-loading-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--pos-accent), transparent);
    animation: shimmerShift 1.2s infinite ease-in-out;
}

@keyframes shimmerShift {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(400%);
    }
}

/* Fee Card Details (Partial Amount Input) */
.fee-partial-input-group {
    background: #f8fafc;
    border-radius: var(--br-md);
    padding: 10px 15px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #edf2f7;
}

.fee-partial-input-group input {
    border: none;
    background: transparent;
    font-weight: 800;
    color: var(--pos-text-main);
    width: 120px;
    outline: none;
    font-size: 13px;
    padding: 0;
}

.fee-partial-input-group span {
    font-size: 8px;
    font-weight: 800;
    color: var(--pos-text-muted);
}

/* Refined Teacher Subject Table Popover */
.subjects-popover-wrapper {
    position: relative;
    display: inline-block;
}

.btn-subjects-toggle {
    background: linear-gradient(135deg, rgba(71,16,235,0.08) 0%, rgba(71,16,235,0.04) 100%);
    color: #4710EB;
    border: 1px solid rgba(71,16,235,0.2);
    padding: 6px 12px;
    border-radius: var(--br-sm);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.btn-subjects-toggle:hover {
    background: linear-gradient(135deg, rgba(71,16,235,0.12) 0%, rgba(71,16,235,0.08) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(71,16,235,0.1);
    border-color: rgba(71,16,235,0.3);
}

.subjects-popover {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    z-index: 100;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--br-md);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.subjects-popover.active {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.popover-header {
    background: rgba(71,16,235,0.05);
    padding: 10px 15px;
    font-size: 9px;
    font-weight: 800;
    color: var(--primary-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.popover-body {
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
}

.popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 10px;
    color: var(--text-dark);
    font-weight: 500;
    transition: background 0.2s ease;
    border-radius: 6px;
}

.popover-item i {
    color: var(--primary-green);
    font-size: 8px;
}

.popover-item:hover {
    background: rgba(71,16,235,0.05);
}

/* Modal Autocomplete Suggestions */
.nerdc-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.2s ease;
}

.nerdc-suggestions.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.suggestion-item {
    padding: 10px 15px;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dark);
    transition: all 0.2s;
}

.suggestion-item:hover {
    background: #f8fafc;
    color: var(--primary-green);
    padding-left: 20px;
}

.suggestion-item i {
    font-size: 10px;
    opacity: 0.5;
}

/* Tag Styles */
.tags-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--br-md);
    background: rgba(255, 255, 255, 0.95);
    min-height: 48px;
    align-items: center;
    position: relative;
}

.tag {
    background: linear-gradient(135deg, #4710EB 0%, #000033 100%);
    color: white;
    padding: 6px 14px;
    border-radius: var(--br-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(71,16,235,0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: tagPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tag i {
    cursor: pointer;
    font-size: 9px;
}

.tag-input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 120px;
    font-size: 11px;
}

@keyframes tagPop {
    from {
        transform: scale(0.6);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Clean Tooltip Styles */
.status-info-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    cursor: help;
}

.status-info-icon {
    font-size: 11px;
    color: var(--dark-gray);
    opacity: 0.6;
    transition: all 0.2s ease;
}

.status-info-wrapper:hover .status-info-icon {
    opacity: 1;
    color: var(--primary-green);
    transform: scale(1.1);
}

.status-tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
    padding: 8px 12px;
    border-radius: var(--br-sm);
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    pointer-events: none;
}

.status-info-wrapper:hover .status-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.status-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
}

/* Glassmorphic Chart Tooltip */
#chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--br-md);
    padding: 10px 15px;
    pointer-events: none;
    transition: all .2s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    z-index: 2000;
}

#chartjs-tooltip table {
    margin: 0;
}

#chartjs-tooltip .tooltip-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

#chartjs-tooltip .tooltip-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    gap: 6px;
}

#chartjs-tooltip .tooltip-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-green);
    box-shadow: 0 0 8px var(--primary-green);
}

/* =========================================
   PREMIUM TEACHER REGISTRATION MODAL STYLES
   ========================================= */

/* Glassmorphism Modal Overlay */
.modal {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.fade-in {
    opacity: 1;
}

/* Premium Modal Dialog */
.premium-modal-dialog {
    max-width: 900px;
    width: 95%;
    height: 90vh;
    margin: 5vh auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--br-xl);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    overflow: hidden;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.premium-modal-dialog .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--br-xl);
}

.premium-modal-dialog .modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
}

.modal.show .premium-modal-dialog {
    transform: scale(1);
    opacity: 1;
}

/* Modal Header with Gradient */
.premium-modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.premium-modal-title {
    font-size: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    margin: 0;
}

.btn-close-premium {
    width: 36px;
    height: 36px;
    border-radius: var(--br-md);
    border: none;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-premium:hover {
    background: #e2e8f0;
    color: #ef4444;
    transform: rotate(90deg);
}

/* Premium Toggle Switch */
.premium-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.premium-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.premium-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
}

.premium-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.premium-slider {
    background-color: #4710EB;
}

input:checked+.premium-slider:before {
    transform: translateX(18px);
}

.premium-slider.round {
    border-radius: 34px;
}

.premium-slider.round:before {
    border-radius: 50%;
}

/* Layout Grid */
.premium-modal-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    padding: 0;
    min-height: 0;
    /* Changed from 500px to avoid overflow issues */
    flex: 1;
    overflow-y: auto;
}

/* Sidebar / Profile Section */
.premium-sidebar {
    background: #f8fafc;
    padding: 24px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #94a3b8;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 0 0 4px #ffffff;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

/* Main Form Area */
.premium-form-area {
    padding: 24px;
    background: #ffffff;
}

.premium-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.full-width {
    grid-column: span 2;
}

/* Float Label Input */
.float-label-group {
    position: relative;
    margin-bottom: 8px;
}

.premium-input {
    width: 100%;
    padding: 8px 12px 8px 40px;
    /* Space for icon */
    border: 2px solid #e2e8f0;
    border-radius: var(--br-md);
    font-size: 10px;
    font-weight: 500;
    color: #334155;
    background: #fff;
    transition: all 0.2s ease;
    height: 42px;
    box-sizing: border-box;
}

.premium-input:focus {
    border-color: #4710EB;
    box-shadow: 0 0 0 4px rgba(71,16,235,0.1);
    outline: none;
}

.premium-input::placeholder {
    color: transparent;
    /* Hide default placeholder for float effect */
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    transition: color 0.2s ease;
    pointer-events: none;
}

.premium-input:focus~.input-icon {
    color: #4710EB;
}

.float-label {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 10px;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    padding: 0 4px;
}

/* Active State for Float Label */
.premium-input:focus~.float-label,
.premium-input:not(:placeholder-shown)~.float-label {
    top: 0;
    left: 14px;
    font-size: 8px;
    font-weight: 600;
    color: #4710EB;
}

/* Select styling */
select.premium-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 48px;
}

.premium-tag {
    background: rgba(71,16,235,0.05);
    color: #000033;
    padding: 6px 12px;
    border-radius: var(--br-xl);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: scaleIn 0.2s ease;
}

.premium-tag i {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.premium-tag i:hover {
    opacity: 1;
}

.tag-input-ghost {
    border: none;
    outline: none;
    flex: 1;
    min-width: 120px;
    font-size: 11px;
    color: #334155;
    padding: 4px 0;
}

/* Footer Actions */
.premium-footer {
    padding: 24px 32px;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: #fff;
}

.btn-premium-ghost {
    padding: 12px 24px;
    border-radius: var(--br-md);
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-premium-ghost:hover {
    background: #f1f5f9;
    color: #334155;
}

.btn-premium-primary {
    padding: 12px 32px;
    border-radius: var(--br-md);
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #4710EB 0%, #000033 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(71,16,235,0.2);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-premium-primary:hover {
    box-shadow: 0 10px 15px -3px rgba(71,16,235,0.3);
    transform: translateY(-2px);
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

@keyframes avatarPop {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Role Selection Grid */
.role-selection-section {
    margin-bottom: 32px;
}

.section-label {
    font-size: 10px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-label i {
    color: #4710EB;
}

.role-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.role-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--br-md);
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.role-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(71,16,235,0.05) 0%, rgba(71,16,235,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.role-card:hover {
    border-color: #4710EB;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(71,16,235,0.15);
}

.role-card:hover::before {
    opacity: 1;
}

.role-card.selected {
    border-color: #4710EB;
    background: linear-gradient(135deg, rgba(71,16,235,0.08) 0%, rgba(71,16,235,0.03) 100%);
    box-shadow: 0 4px 12px rgba(71,16,235,0.2);
}

.role-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(71,16,235,0.05) 0%, rgba(71,16,235,0.15) 100%);
    border-radius: var(--br-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 19px;
    transition: all 0.3s ease;
}

.role-card.selected .role-card-icon {
    background: linear-gradient(135deg, #4710EB 0%, #000033 100%);
    color: white;
    transform: scale(1.1);
}

.role-card-title {
    font-size: 10px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.role-card.selected .role-card-title {
    color: #4710EB;
}

.role-card-desc {
    font-size: 9px;
    color: #64748b;
    line-height: 1.4;
}

.role-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #4710EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.role-card.selected .role-card-check {
    opacity: 1;
    transform: scale(1);
}

/* Floating Label Inputs */
.form-floating {
    position: relative;
    margin-bottom: 24px;
}

.form-floating-input {
    width: 100%;
    padding: 16px 16px 8px 44px;
    border: 2px solid #e2e8f0;
    border-radius: var(--br-md);
    font-size: 11px;
    color: #334155;
    background: white;
    transition: all 0.3s ease;
    outline: none;
}

.form-floating-input:focus {
    border-color: #4710EB;
    box-shadow: 0 0 0 4px rgba(71,16,235,0.1);
}

.form-floating-input:focus+.form-floating-label,
.form-floating-input:not(:placeholder-shown)+.form-floating-label {
    transform: translateY(-8px) scale(0.85);
    color: #4710EB;
    font-weight: 600;
}

.form-floating-label {
    position: absolute;
    left: 44px;
    top: 16px;
    font-size: 11px;
    color: #64748b;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left top;
    background: white;
    padding: 0 4px;
}

.form-floating-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    transition: color 0.3s ease;
}

.form-floating-input:focus~.form-floating-icon {
    color: #4710EB;
}

/* Enhanced Subject Tags */
.premium-subjects-section {
    margin-bottom: 24px;
}

.popular-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.popular-subject-btn {
    padding: 6px 14px;
    border-radius: var(--br-xl);
    font-size: 10px;
    font-weight: 500;
    color: #4710EB;
    background: rgba(71,16,235,0.08);
    border: 1px solid rgba(71,16,235,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.popular-subject-btn:hover {
    background: rgba(71,16,235,0.15);
    transform: translateY(-2px);
}

.popular-subject-btn i {
    font-size: 8px;
}

.tags-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: var(--br-md);
    background: white;
    min-height: 56px;
    transition: all 0.3s ease;
}

.tags-input-container:focus-within {
    border-color: #4710EB;
    box-shadow: 0 0 0 4px rgba(71,16,235,0.1);
}

.tag {
    padding: 6px 12px;
    border-radius: var(--br-xl);
    font-size: 10px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: tagSlideIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 1px solid;
}

@keyframes tagSlideIn {
    from {
        transform: scale(0) translateX(-20px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

/* Pastel color variations for tags */
.tag:nth-child(5n+1) {
    background: rgba(139, 195, 74, 0.15);
    color: #558b2f;
    border-color: rgba(139, 195, 74, 0.3);
}

.tag:nth-child(5n+2) {
    background: rgba(33, 150, 243, 0.15);
    color: #1565c0;
    border-color: rgba(33, 150, 243, 0.3);
}

.tag:nth-child(5n+3) {
    background: rgba(156, 39, 176, 0.15);
    color: #6a1b9a;
    border-color: rgba(156, 39, 176, 0.3);
}

.tag:nth-child(5n+4) {
    background: rgba(255, 152, 0, 0.15);
    color: #e65100;
    border-color: rgba(255, 152, 0, 0.3);
}

.tag:nth-child(5n+5) {
    background: rgba(0, 188, 212, 0.15);
    color: #00838f;
    border-color: rgba(0, 188, 212, 0.3);
}

.tag .remove-tag {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    font-size: 9px;
}

.tag .remove-tag:hover {
    opacity: 1;
}

.tag-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 150px;
    font-size: 10px;
    color: #334155;
    background: transparent;
}

.tag-input::placeholder {
    color: #94a3b8;
}

/* Form Sections */
.premium-form-section {
    margin-bottom: 32px;
    animation: sectionFadeIn 0.5s ease-out backwards;
}

.premium-form-section:nth-child(1) {
    animation-delay: 0.1s;
}

.premium-form-section:nth-child(2) {
    animation-delay: 0.2s;
}

.premium-form-section:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 50%, transparent 100%);
    margin: 32px 0;
}

/* ── Document drop zones ──
   The visual half of the shared upload UX in upload-helpers.js: a drag lands on
   one of these slots, or a click opens the file picker. Used by the Add New
   Teacher pane and the student Documents tab. The .doc-drag-over class is
   applied by bindDocDropZone(). */
.doc-dropzones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.doc-dropzone {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 132px;
    padding: 18px 14px;
    text-align: center;
    border: 1.5px dashed #c7d2fe;
    border-radius: 14px;
    background: linear-gradient(160deg, #ffffff 0%, #f5f3ff 100%);
    box-shadow: 0 6px 16px -14px rgba(15, 23, 42, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease,
        border-color 0.25s ease, background 0.25s ease;
}

/* Same sweeping sheen as the photo upload buttons; it sits above the fill and
   below the label. */
.doc-dropzone::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateX(-120%);
    transition: transform 0.6s ease;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.6) 50%, transparent 80%);
}

.doc-dropzone:hover::after {
    transform: translateX(120%);
}

.doc-dropzone:hover {
    transform: translateY(-2px);
    border-color: #4710EB;
    background: linear-gradient(160deg, #ffffff 0%, #ede9fe 100%);
    box-shadow: 0 16px 28px -20px rgba(71, 16, 235, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* The type icon reads as a chip, so each document type keeps its own colour. */
.doc-dropzone > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 3px;
    border-radius: 12px;
    font-size: 16px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(71, 16, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.doc-dropzone:hover > i,
.doc-dropzone.doc-drag-over > i {
    transform: translateY(-1px) scale(1.05);
}

.doc-dropzone-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.1px;
}

.doc-dropzone-hint {
    font-size: 10px;
    color: #94a3b8;
}

.doc-dropzone-name {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    word-break: break-word;
}

/* Filled: the dashed affordance gives way to a solid, gradient-tinted card. */
.doc-dropzone.has-file {
    border-style: solid;
    border-color: transparent;
    background: linear-gradient(160deg, #f5f3ff 0%, #ede9fe 100%);
    box-shadow: 0 12px 24px -18px rgba(71, 16, 235, 0.9), inset 0 0 0 1px rgba(71, 16, 235, 0.35);
}

.doc-dropzone.has-file .doc-dropzone-name {
    color: #4710EB;
}

/* A filled slot still lifts on hover, so it reads as replaceable. */
.doc-dropzone.has-file:hover {
    box-shadow: 0 18px 30px -18px rgba(71, 16, 235, 0.95), inset 0 0 0 1px rgba(71, 16, 235, 0.45);
}

/* Dragging: the strongest state, furthest lift and the deepest shadow. */
.doc-dropzone.doc-drag-over {
    transform: translateY(-3px) scale(1.02);
    border-color: #4710EB;
    background: linear-gradient(160deg, #ede9fe 0%, #ddd6fe 100%);
    box-shadow: 0 20px 34px -20px rgba(71, 16, 235, 0.95), inset 0 0 0 1px rgba(71, 16, 235, 0.3);
    outline: none;
}

.doc-dropzone:active {
    transform: translateY(0) scale(0.99);
}

.doc-dropzone:focus-visible {
    outline: 3px solid rgba(71, 16, 235, 0.35);
    outline-offset: 2px;
}

/* Every zone wired through bindDocDropZone() lights up while a file hovers it,
   so surfaces with their own card styling (admission, staff application) get the
   affordance without needing drop-specific rules of their own. The shared slots
   above carry the full treatment already, so they are excluded. */
.doc-drag-over:not(.doc-dropzone) {
    outline: 2px dashed #4710EB;
    outline-offset: 4px;
}

/* NERDC Autocomplete Enhancement */
.nerdc-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #4710EB;
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(71,16,235,0.15);
    display: none;
}

.nerdc-suggestions.active {
    display: block;
}

.suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #334155;
}

.suggestion-item:hover {
    background: rgba(71,16,235,0.08);
    color: #4710EB;
}

.suggestion-item i {
    color: #4710EB;
    font-size: 10px;
}

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

/* Wizard Progress Bar */
.wizard-progress-container {
    padding: 12px 20px 0;
    background: white;
}

.wizard-progress-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
}

.wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4710EB 0%, #0055EF 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

/* Step Indicators */
.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    position: relative;
}

.wizard-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.wizard-step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 10px;
    color: #94a3b8;
    transition: all 0.3s ease;
    margin-bottom: 4px;
}

.wizard-step-indicator.active .wizard-step-circle {
    background: linear-gradient(135deg, #4710EB 0%, #0055EF 100%);
    border-color: #4710EB;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(71,16,235,0.3);
}

.wizard-step-indicator.completed .wizard-step-circle {
    background: #4710EB;
    border-color: #4710EB;
    color: white;
}

.wizard-step-label {
    font-size: 8px;
    font-weight: 500;
    color: #94a3b8;
    text-align: center;
    transition: color 0.3s ease;
}

.wizard-step-indicator.active .wizard-step-label {
    color: #4710EB;
    font-weight: 600;
}

.wizard-step-indicator.completed .wizard-step-label {
    color: #4710EB;
}

/* Wizard Content */
.wizard-content {
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.wizard-step-content {
    display: none;
    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-step-content.active {
    display: block;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Step 1: Photo Capture */
.photo-capture-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.photo-preview-large {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    overflow: hidden;
    border: 2px dashed #cbd5e1;
    box-shadow: 0 10px 30px rgba(71,16,235,0.2);
    position: relative;
    transition: all 0.3s ease;
}

.photo-preview-large:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(71,16,235,0.3);
}

.photo-preview-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.photo-preview-large.has-photo img {
    display: block;
}

.photo-preview-large i {
    font-size: 24px;
    color: #4710EB;
    opacity: 0.3;
}

.photo-preview-large.has-photo i {
    display: none;
}

.photo-capture-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.photo-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.photo-badge:hover {
    transform: scale(1.1);
    background: #4710EB;
    color: white;
}

.photo-badge i {
    font-size: 16px;
    color: #4710EB;
}

.photo-badge:hover i {
    color: white;
}

/* Class Selection Cards (Step 3) */
.class-selection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.class-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--br-md);
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.class-card:hover {
    border-color: #4710EB;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(71,16,235,0.15);
}

.class-card.selected {
    border-color: #4710EB;
    background: linear-gradient(135deg, rgba(71,16,235,0.08) 0%, rgba(71,16,235,0.03) 100%);
    box-shadow: 0 4px 12px rgba(71,16,235,0.2);
}

.class-card-label {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    transition: color 0.3s ease;
}

.class-card.selected .class-card-label {
    color: #4710EB;
}

.class-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #4710EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.class-card.selected .class-card-check {
    opacity: 1;
    transform: scale(1);
}

/* Parent Search */
.parent-search-container {
    position: relative;
    margin-bottom: 24px;
}

.parent-search-result {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(71,16,235,0.08);
    border-radius: var(--br-sm);
    border-left: 3px solid #4710EB;
    display: none;
}

.parent-search-result.show {
    display: block;
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.parent-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--br-md);
    font-size: 9px;
    font-weight: 600;
    margin-left: 8px;
}

.parent-badge.existing {
    background: rgba(71,16,235,0.15);
    color: #4710EB;
}

.parent-badge.new {
    background: rgba(33, 150, 243, 0.15);
    color: #1565c0;
}

/* Step 4: Student Card Preview */
.student-card-preview {
    background: linear-gradient(135deg, #4710EB 0%, #000033 100%);
    border-radius: var(--br-lg);
    padding: 30px;
    color: white;
    box-shadow: 0 15px 40px rgba(71,16,235,0.4);
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.student-card-preview::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
}

.student-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.student-card-logo {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.9;
}

.student-card-body {
    display: flex;
    gap: 24px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.student-card-photo {
    width: 100px;
    height: 100px;
    border-radius: var(--br-md);
    background: white;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.student-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-card-photo i {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #4710EB;
}

.student-card-info {
    flex: 1;
}

.student-card-name {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
}

.student-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 10px;
    opacity: 0.9;
}

.student-card-detail {
    display: flex;
    align-items: center;
    gap: 6px;
}

.student-card-detail i {
    font-size: 10px;
    opacity: 0.7;
}

/* Review Sections */
.review-section {
    background: white;
    border-radius: var(--br-md);
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
}

.review-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.review-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-section-title i {
    color: #4710EB;
}

.review-edit-btn {
    padding: 6px 12px;
    border-radius: var(--br-sm);
    font-size: 10px;
    font-weight: 500;
    color: #4710EB;
    background: rgba(71,16,235,0.08);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-edit-btn:hover {
    background: rgba(71,16,235,0.15);
}

.review-field {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.review-field:last-child {
    border-bottom: none;
}

.review-field-label {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
}

.review-field-value {
    font-size: 10px;
    color: #334155;
    font-weight: 600;
}

/* Wizard Navigation */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    padding: 20px 32px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

.wizard-nav-btn {
    padding: 12px 24px;
    border-radius: var(--br-md);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-nav-btn.btn-back {
    background: transparent;
    color: #64748b;
}

.wizard-nav-btn.btn-back:hover {
    background: #f1f5f9;
    color: #334155;
}

.wizard-nav-btn.btn-next,
.wizard-nav-btn.btn-submit {
    background: linear-gradient(135deg, #4710EB 0%, #0055EF 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(71,16,235,0.3);
}

.wizard-nav-btn.btn-next:hover,
.wizard-nav-btn.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(71,16,235,0.4);
}

.wizard-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Success Animation */
@keyframes confetti {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #4710EB;
    position: absolute;
    animation: confetti 3s ease-out forwards;
}

/* Responsive */
@media (max-width: 768px) {
    .class-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wizard-steps {
        flex-wrap: wrap;
    }

    .wizard-step-label {
        font-size: 8px;
    }

    .student-card-body {
        flex-direction: column;
        text-align: center;
    }

    .student-card-details {
        grid-template-columns: 1fr;
    }
}

/* Cropper Overlays */
#cropperModal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.cropper-modal-content {
    background: white;
    margin: 5vh auto;
    padding: 24px;
    border-radius: var(--br-xl);
    width: 90%;
    max-width: 600px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

#cropper-container {
    width: 100%;
    height: 400px;
    background: #f8fafc;
    border-radius: var(--br-md);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Hostel Management Styles */
.status-badge {
    padding: 4px 10px;
    border-radius: var(--br-xl);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-active {
    background: rgba(71,16,235,0.1);
    color: #4710EB;
    border: 1px solid rgba(71,16,235,0.2);
}

.status-inactive {
    background: rgba(158, 158, 158, 0.1);
    color: #757575;
    border: 1px solid rgba(158, 158, 158, 0.2);
}

.icon-blue {
    background: rgba(33, 150, 243, 0.1) !important;
    color: #1976d2 !important;
}

.icon-green {
    background: rgba(76, 175, 80, 0.1) !important;
    color: #4710EB !important;
}

.icon-orange {
    background: rgba(255, 152, 0, 0.1) !important;
    color: #ef6c00 !important;
}



.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.review-card-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-edit-all-btn {
    background: rgba(71,16,235,0.1);
    color: var(--primary-green);
    border: none;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.review-edit-all-btn:hover {
    background: var(--primary-green);
    color: white;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.review-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fieldReveal 0.5s ease backwards;
}

@keyframes fieldReveal {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.review-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.review-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.review-value:empty::before {
    content: "Not provided";
    font-style: italic;
    font-weight: 400;
    color: #94a3b8;
}

/* Specific formatting for address/long fields */
.full-row {
    grid-column: 1 / -1;
}


/* --- CV-STYLE REGISTRATION SUMMARY --- */
.cv-container {
    padding: 20px;
    background: #f1f5f9;
    border-radius: var(--br-xl);
}

.cv-paper {
    background: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    min-height: 800px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

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

.cv-sidebar {
    width: 260px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 40px 30px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .cv-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--primary-green);
        padding: 30px 20px;
        text-align: center;
    }
}

.cv-photo-frame {
    width: 150px;
    height: 180px;
    background: #f1f5f9;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    margin: 0 auto 30px;
    overflow: hidden;
    position: relative;
}

.cv-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cv-photo-frame i {
    font-size: 60px;
    color: #cbd5e1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cv-sidebar-section {
    margin-bottom: 30px;
}

.cv-sidebar-title {
    font-size: 9px;
    font-weight: 800;
    color: var(--primary-green);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    display: block;
    border-bottom: 1px solid rgba(71,16,235,0.1);
    padding-bottom: 4px;
}

.cv-contact-item {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-contact-label {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.cv-contact-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dark);
    word-break: break-all;
}

.cv-main {
    flex: 1;
    padding: 50px 40px;
}

@media (max-width: 768px) {
    .cv-main {
        padding: 30px 20px;
    }
}

.cv-header {
    margin-bottom: 40px;
    border-bottom: 2px solid var(--primary-green);
    padding-bottom: 20px;
}

.cv-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: 4px;
}

.cv-role {
    font-size: 9.6px;
    font-weight: 700;
    color: var(--primary-green);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cv-section {
    margin-bottom: 35px;
}

.cv-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cv-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.cv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 480px) {
    .cv-grid {
        grid-template-columns: 1fr;
    }
}

.cv-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cv-item-label {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.cv-item-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dark);
}

@media print {
    .wizard-container, .wizard-navigation, .portal-header {
        display: none !important;
    }
    body {
        background: white;
        padding: 0;
    }
    .cv-container {
        padding: 0;
        background: white;
    }
    .cv-paper {
        box-shadow: none;
        border: none;
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

/* PWA Install Button - Floating Action Button */
.pwa-install-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: linear-gradient(135deg, #4710EB 0%, #000033 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(71,16,235,0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: slideUp 0.5s ease;
}

.pwa-install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(71,16,235,0.5);
}

.pwa-install-btn:active {
    transform: translateY(0);
}

.pwa-install-btn i {
    font-size: 16px;
}

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

@media (max-width: 768px) {
    .pwa-install-btn {
        bottom: 15px;
        right: 15px;
        padding: 12px 20px;
        font-size: 13px;
    }
}

/* Hide install button when app is installed */
@media all and (display-mode: standalone) {
    .pwa-install-btn {
        display: none !important;
    }
}

/* ── Premium Admission View Modal Styles ── */
#admissionViewModal {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(15, 23, 42, 0.6);
}

#admissionViewModal .modal-content {
    max-width: 850px;
    width: 95%;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25);
    background: #ffffff;
    overflow: hidden;
    animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

#admissionViewModal .modal-header {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    color: white;
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
}

#admissionViewModal .modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
}

#admissionViewModal .modal-header .close-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

#admissionViewModal .modal-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.adm-detail-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Applicant Header Card */
.adm-profile-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.adm-avatar-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid #ffffff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    flex-shrink: 0;
    background: #0f766e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.adm-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adm-profile-info {
    flex: 1;
    min-width: 200px;
}

.adm-profile-info h3 {
    margin: 0 0 0.4rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.adm-badges-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.adm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}

.adm-badge-appnum {
    background: #ccfbf1;
    color: #0f766e;
}

.adm-badge-school {
    background: #e0e7ff;
    color: #4338ca;
}

.adm-status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.adm-status-pending { background: #fef3c7; color: #d97706; }
.adm-status-admitted { background: #dcfce7; color: #15803d; }
.adm-status-notadmitted { background: #fee2e2; color: #b91c1c; }

/* Grid Sections */
.adm-grid-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}

.adm-section-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.adm-section-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.adm-section-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.adm-section-title i {
    color: #0f766e;
}

.adm-info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
}

.adm-info-item {
    display: flex;
    flex-direction: column;
}

.adm-info-item.full-width {
    grid-column: span 2;
}

.adm-info-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.adm-info-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    word-break: break-word;
}

/* Documents Gallery */
.adm-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.adm-doc-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.adm-doc-card:hover {
    border-color: #0f766e;
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.1);
}

.adm-doc-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #ccfbf1;
    color: #0f766e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.adm-doc-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.adm-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 8px;
    background: #0f766e;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.adm-doc-btn:hover {
    background: #0d9488;
    color: #ffffff;
}

/* Modal Footer Styling */
#admissionViewModal .modal-footer {
    background: #f8fafc;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

#admissionViewModal .modal-footer select {
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    background: #ffffff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

#admissionViewModal .modal-footer select:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

/* ── Inline Admission Score Inputs ── */
.inline-score-input {
    width: 75px;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    transition: all 0.2s ease;
}

.inline-score-input:focus {
    background: #ffffff;
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
}

.inline-score-input.saved {
    border-color: #10b981;
    background: #ecfdf5;
}

.inline-score-input.error {
    border-color: #ef4444;
    background: #fef2f2;
}

.score-total-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

/* =========================================
   PREMIUM QUERY VERDICT MODAL
   ========================================= */
/* Both classes are named in the selector on purpose. index.html carries its
   own inline `.modal { z-index: 1050 }` (a Bootstrap-style base), and a bare
   `.premium-verdict-overlay` rule loses that tie: equal specificity, but the
   inline <style> is parsed after the stylesheet <link>, so it wins and the
   dialog dropped to 1050 — behind the staff/student detail panes (overlay
   19998, pane 19999). Clicks aimed at the dialog's buttons then landed on the
   pane backdrop instead. Naming .modal here raises specificity above that
   inline rule, so this z-index actually applies. */
.modal.premium-verdict-overlay {
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 20500;
}

.premium-verdict-dialog {
    width: min(92vw, 560px);
    max-height: 92vh;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 30px 60px -15px rgba(2, 6, 23, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset,
        0 0 80px rgba(245, 158, 11, 0.08);
    display: flex;
    flex-direction: column;
    animation: premiumVerdictIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes premiumVerdictIn {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.premium-verdict-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.premium-verdict-header::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, transparent 70%);
}

.premium-verdict-title {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.premium-verdict-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.7);
}

.premium-verdict-title h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}

.premium-verdict-title p {
    margin: 2px 0 0;
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 0.2px;
}

.premium-verdict-header .btn-close-premium {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    position: relative;
    z-index: 1;
}

.premium-verdict-header .btn-close-premium:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Body */
.premium-verdict-body {
    padding: 20px 24px 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

/* Case / response card */
.premium-verdict-case {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 12px;
    color: #475569;
    margin-bottom: 18px;
}

.premium-verdict-case strong {
    color: #92400e;
}

.premium-verdict-case .pv-response {
    margin-top: 10px;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 12px;
}

.premium-verdict-case .pv-response .pv-resp-head {
    font-weight: 700;
    color: #92400e;
    margin-bottom: 3px;
}

.premium-verdict-case .pv-attach {
    margin-top: 8px;
    font-size: 11px;
    color: #92400e;
}

/* Section label */
.premium-verdict-section-label {
    font-size: 11px;
    font-weight: 800;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

/* Decision choice cards */
.premium-verdict-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.premium-verdict-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
}

.premium-verdict-choice:hover {
    border-color: #cbd5e1;
    background: #fff;
    transform: translateY(-1px);
}

.premium-verdict-choice input {
    position: absolute;
    opacity: 0;
}

.premium-verdict-choice .choice-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.premium-verdict-choice .choice-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.premium-verdict-choice .choice-text strong {
    font-size: 13px;
    color: #0f172a;
}

.premium-verdict-choice .choice-text span {
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.4;
}

.premium-verdict-choice .choice-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    color: #fff;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s ease;
}

/* Active state (toggled by JS .is-active) */
.premium-verdict-choice[data-choice="PARDONED"].is-active {
    border-color: #86efac;
    background: #f0fdf4;
}

.premium-verdict-choice[data-choice="PARDONED"].is-active .choice-icon {
    background: #dcfce7;
    color: #16a34a;
}

.premium-verdict-choice[data-choice="PARDONED"].is-active .choice-check {
    background: #16a34a;
    border-color: #16a34a;
    opacity: 1;
    transform: scale(1);
}

.premium-verdict-choice[data-choice="PENALIZED"].is-active {
    border-color: #fca5a5;
    background: #fef2f2;
}

.premium-verdict-choice[data-choice="PENALIZED"].is-active .choice-icon {
    background: #fee2e2;
    color: #dc2626;
}

.premium-verdict-choice[data-choice="PENALIZED"].is-active .choice-check {
    background: #dc2626;
    border-color: #dc2626;
    opacity: 1;
    transform: scale(1);
}

/* Penalty amount row */
.premium-verdict-amount-row {
    margin-top: 16px;
    animation: premiumFadeIn 0.25s ease;
}

@keyframes premiumFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.premium-verdict-amount-row label {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    display: block;
}

.premium-verdict-amount-input {
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
    transition: all 0.2s ease;
}

.premium-verdict-amount-input:focus-within {
    border-color: #f59e0b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.premium-verdict-amount-input .naira {
    padding-left: 14px;
    font-size: 16px;
    font-weight: 800;
    color: #b45309;
}

.premium-verdict-amount-input input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    min-width: 0;
}

.premium-verdict-amount-row small {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 10.5px;
}

/* Note */
.premium-verdict-note {
    margin-top: 16px;
    margin-bottom: 12px;
}

.premium-verdict-note label {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    display: block;
}

.premium-verdict-note input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.premium-verdict-note input:focus {
    border-color: #f59e0b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* Footer */
.premium-verdict-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
    background: #fff;
    border-top: 1px solid #f1f5f9;
}

.btn-verdict-ghost {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-verdict-ghost:hover {
    background: #e2e8f0;
}

.btn-verdict-primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(217, 119, 6, 0.6);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-verdict-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -6px rgba(217, 119, 6, 0.7);
}

.btn-verdict-primary:active {
    transform: translateY(0);
}

@media (max-width: 480px) {
    .premium-verdict-choices {
        grid-template-columns: 1fr;
    }
}

/* ── A payroll run changed on another screen ────────────────────────────────
   A bursar submits, or an approver signs, on a different dashboard. The payroll
   panel is moved to that run, and the two elements that identify it — the month
   picker and the status banner — are flashed rather than the whole panel
   repainting. The class is deliberately left on the element: with no
   fill-mode the computed style reverts when the animation ends, and re-adding it
   (after removing it and forcing a reflow) is what lets the same run flash twice
   in a row. */
@keyframes wfPayrollFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(71, 16, 235, 0.5);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(71, 16, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(71, 16, 235, 0);
    }
}

.wf-payroll-flash {
    animation: wfPayrollFlash 1.3s ease-out 2;
}

/* =========================================
   PREMIUM PAYROLL EDIT MODAL
   ========================================= */
/* The Edit Payroll editor is the widest sheet in the family: a 30/70 split with
   each records list sitting beside the form that adds to it. This base width is
   therefore 40% wider than the 900px it was; the smaller dialogs below keep
   their own widths. */
.ppx-dialog {
    width: min(96vw, 1260px);
    box-shadow:
        0 30px 60px -15px rgba(2, 6, 23, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset,
        0 0 80px rgba(71, 16, 235, 0.12);
}

/* The Edit Payroll editor packs a lot onto one sheet, so it is drawn at 70% of
   the family's size: the layout, type and spacing all shrink together as one
   piece rather than being restyled piecemeal. It is then stretched 20% taller
   than that 70% sheet (0.7 x 1.2 = 0.84), giving a slightly portrait sheet that
   shows more of the earnings/deduction lists before they scroll. Its entrance
   animation is restated here, ending on those same scales so the dialog does
   not flash at full size before settling. */
#payrollEditModal .ppx-dialog {
    transform: scale(0.7, 0.84);
    animation: payrollEditIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes payrollEditIn {
    from { opacity: 0; transform: translateY(18px) scale(0.672, 0.8064); }
    to { opacity: 1; transform: translateY(0) scale(0.7, 0.84); }
}

.ppx-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #312e81 100%);
    padding: 18px 22px;
}

.ppx-header::after {
    right: -50px;
    top: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(71, 16, 235, 0.45) 0%, transparent 70%);
}

.ppx-icon {
    background: linear-gradient(135deg, #6366f1, #4710EB);
    box-shadow: 0 8px 20px -6px rgba(71, 16, 235, 0.75);
}

.ppx-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
    padding: 16px 20px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Two columns keep the whole editor in one view: the figures on the left (30%),
   the earnings and deductions it builds them from on the right (70%). Only a
   list that outgrows its panel scrolls, never the modal itself. */
.ppx-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: 18px;
}

.ppx-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    min-height: 0;
}

.ppx-col-left {
    overflow-y: auto;
}

/* Two stacked rows — Allowances & other earnings, then Deductions. */
.ppx-col-right {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
    overflow: hidden;
}

/* Live pay summary */
.ppx-hero {
    position: relative;
    flex-shrink: 0;
    border-radius: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    box-shadow: 0 16px 32px -20px rgba(15, 23, 42, 0.8);
    overflow: hidden;
}

.ppx-hero::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(71, 16, 235, 0.55) 0%, transparent 70%);
}

.ppx-hero-top {
    position: relative;
    z-index: 1;
}

.ppx-hero-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #93c5fd;
}

.ppx-hero-net {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 3px;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.15;
    color: #ffffff;
    transition: color 0.2s ease;
}

.ppx-hero-net .naira {
    font-size: 17px;
    font-weight: 800;
    color: #a5b4fc;
}

.ppx-hero-net.is-negative {
    color: #fca5a5;
}

.ppx-hero-chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ppx-chip {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ppx-chip-allow {
    color: #4ade80;
}

.ppx-chip-ded {
    color: #f87171;
}

.ppx-hero-warn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fecaca;
    font-size: 10.5px;
    font-weight: 700;
}

/* Sections */
.ppx-section {
    margin: 0;
    flex-shrink: 0;
}

/* A section that owns a list: the label spans the whole panel and beneath it
   the records it keeps (left) sit beside the form that adds new ones (right).
   Only the list scrolls; the composer stays put. */
.ppx-section.is-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 16px;
    min-height: 0;
}

.ppx-section.is-panel > .ppx-section-label {
    grid-column: 1 / -1;
}

.ppx-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: #64748b;
}

.ppx-section-label i {
    color: #4710EB;
}

.ppx-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #e2e8f0, transparent);
}

.ppx-field {
    margin-bottom: 14px;
}

.ppx-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
}

.ppx-hint {
    display: block;
    margin-top: 5px;
    font-size: 10.5px;
    line-height: 1.5;
    color: #94a3b8;
}

/* Inputs */
.ppx-input {
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
    transition: all 0.2s ease;
}

.ppx-input:focus-within {
    border-color: #4710EB;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(71, 16, 235, 0.12);
}

.ppx-input .naira {
    padding-left: 14px;
    font-size: 15px;
    font-weight: 800;
    color: #4710EB;
}

.ppx-input input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.ppx-input input:disabled {
    color: #94a3b8;
}

.ppx-text {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.ppx-text:focus {
    border-color: #4710EB;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(71, 16, 235, 0.12);
}

.ppx-text:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

.ppx-select {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    outline: none;
    transition: all 0.2s ease;
}

.ppx-select:focus {
    border-color: #4710EB;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(71, 16, 235, 0.12);
}

.ppx-select:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

.ppx-select-sm {
    width: auto;
    min-width: 150px;
    padding: 8px 12px;
    font-size: 11.5px;
}

/* Active / Inactive segmented control */
.ppx-status {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
}

.ppx-status-option {
    display: flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 10px;
    background: transparent;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ppx-status-option:hover {
    color: #334155;
}

.ppx-status-option.is-active {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4710EB);
    box-shadow: 0 6px 14px -6px rgba(71, 16, 235, 0.75);
}

.ppx-status-option.is-active[data-value="false"] {
    background: linear-gradient(135deg, #f87171, #dc2626);
    box-shadow: 0 6px 14px -6px rgba(220, 38, 38, 0.75);
}

.ppx-status-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Notes */
.ppx-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 13px;
    font-size: 11px;
    line-height: 1.55;
    margin-top: 12px;
}

.ppx-note i {
    margin-top: 2px;
    flex-shrink: 0;
}

.ppx-note.is-warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.ppx-note.is-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.ppx-loading {
    padding: 28px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
}

.ppx-note-body {
    flex: 1;
    min-width: 0;
}

.ppx-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 9px;
    border: 1px solid #fcd34d;
    background: #fff;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ppx-inline-btn:hover {
    background: #fef3c7;
}

/* Lists */
.ppx-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.ppx-empty {
    padding: 10px 12px;
    border: 1px dashed #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
    font-size: 11px;
    color: #94a3b8;
}

.ppx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all 0.18s ease;
}

.ppx-item:hover {
    border-color: #e2e8f0;
    box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.6);
}

.ppx-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 12px;
    flex-shrink: 0;
}

.ppx-item.is-earn .ppx-item-icon {
    background: #ecfdf5;
    color: #059669;
}

.ppx-item.is-ded .ppx-item-icon {
    background: #fef2f2;
    color: #dc2626;
}

.ppx-item-body {
    flex: 1;
    min-width: 0;
}

.ppx-item-amount {
    font-size: 12.5px;
    font-weight: 800;
}

.ppx-item.is-earn .ppx-item-amount {
    color: #047857;
}

.ppx-item.is-ded .ppx-item-amount {
    color: #dc2626;
}

.ppx-item-label {
    font-weight: 600;
    color: #0f172a;
}

.ppx-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 10px;
    color: #94a3b8;
}

.ppx-item-reason {
    margin-top: 2px;
    font-size: 10px;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppx-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
}

.ppx-badge.is-penalty {
    background: #fef2f2;
    color: #dc2626;
}

.ppx-badge.is-statutory {
    background: #f5f3ff;
    color: #4710EB;
}

.ppx-badge.is-other {
    background: #eff6ff;
    color: #2563eb;
}

.ppx-badge.is-soft {
    background: #f1f5f9;
    color: #64748b;
}

.ppx-item-link {
    font-size: 10px;
    font-weight: 700;
    color: #4710EB;
    text-decoration: none;
}

.ppx-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
    font-size: 11px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.18s ease;
}

.ppx-item-remove:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    transform: scale(1.05);
}

.ppx-item-lock {
    flex-shrink: 0;
    color: #92400e;
    font-size: 12px;
}

/* Composer */
.ppx-composer {
    flex-shrink: 0;
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    padding: 11px;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #f8fafc;
}

.ppx-composer-grid {
    display: grid;
    grid-template-columns: 1fr 132px;
    gap: 8px;
}

.ppx-composer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.ppx-composer-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: #94a3b8;
}

.ppx-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

.ppx-check input {
    width: 14px;
    height: 14px;
    accent-color: #4710EB;
}

.ppx-add-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    border: none;
    border-radius: 11px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #4710EB);
    box-shadow: 0 8px 18px -8px rgba(71, 16, 235, 0.8);
    transition: all 0.2s ease;
}

.ppx-add-btn:hover {
    transform: translateY(-1px);
}

.ppx-add-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.ppx-save {
    background: linear-gradient(135deg, #6366f1, #4710EB);
    box-shadow: 0 8px 20px -6px rgba(71, 16, 235, 0.7);
}

.ppx-save:hover {
    box-shadow: 0 12px 24px -6px rgba(71, 16, 235, 0.85);
}

/* ── Shared shell for the smaller payroll dialogs ────────────────────────────
   Email Payslips, Amend Penalty and Payroll Variance reuse the same header,
   body and footer so the whole payroll flow reads as one family. */
.ppx-dialog-sm {
    width: min(96vw, 520px);
}

.ppx-dialog-lg {
    width: min(96vw, 1000px);
}

.ppx-body-plain {
    display: block;
    overflow-y: auto;
    padding: 18px 22px 22px;
}

/* Amber accent for the one dialog that is about taking money away. */
.ppx-header.is-amber::after {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.45) 0%, transparent 70%);
}

.ppx-icon.is-amber {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 8px 20px -6px rgba(217, 119, 6, 0.75);
}

.ppx-input-icon {
    padding-left: 14px;
    color: #94a3b8;
    font-size: 12px;
}

.ppx-input:focus-within .ppx-input-icon {
    color: #4710EB;
}

.ppx-optional {
    font-weight: 500;
    color: #94a3b8;
}

/* Two figures that summarise what the dialog will do. */
.ppx-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    box-shadow: 0 16px 32px -22px rgba(15, 23, 42, 0.8);
}

.ppx-summary-figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ppx-summary-value {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: #fff;
}

.ppx-summary-value-sm {
    font-size: 15px;
    letter-spacing: 0;
    padding-top: 8px;
}

.ppx-summary-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #93c5fd;
}

.ppx-summary-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.12);
}

.ppx-progress {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 11px;
    font-weight: 600;
}

/* ── Variance report ──────────────────────────────────────────────────────── */
.ppx-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.ppx-stat {
    padding: 12px 14px;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ppx-stat-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #94a3b8;
}

.ppx-stat-value {
    margin-top: 4px;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.6px;
    color: #0f172a;
}

.ppx-stat-delta {
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 700;
}

.ppx-stat-delta.is-up {
    color: #b45309;
}

.ppx-stat-delta.is-down {
    color: #047857;
}

.ppx-stat-delta.is-flat {
    color: #94a3b8;
}

.ppx-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11.5px;
    color: #475569;
}

.ppx-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 600;
}

.ppx-tag.is-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
    font-weight: 700;
}

.ppx-tag.is-ok {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
    font-weight: 700;
}

.ppx-flag {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

.ppx-flag.is-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.ppx-flag.is-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.ppx-table-wrap {
    max-height: 52vh;
    overflow: auto;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #fff;
}

.ppx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ppx-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #64748b;
    text-align: left;
    white-space: nowrap;
}

.ppx-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f6f8fb;
    vertical-align: top;
    color: #334155;
}

.ppx-table tbody tr:last-child td {
    border-bottom: none;
}

.ppx-table tbody tr:hover td {
    background: #fbfcfe;
}

.ppx-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ppx-strong {
    font-weight: 700;
    color: #0f172a;
}

.ppx-cell-sub {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
}

/* Narrow screens cannot hold two columns side by side, so they stack. This is
   the one place the modal is allowed to scroll. */
@media (max-width: 880px) {
    .ppx-dialog {
        width: 100%;
    }

    .ppx-stat-grid {
        grid-template-columns: 1fr;
    }

    .ppx-body {
        display: block;
        overflow-y: auto;
    }

    .ppx-grid {
        display: block;
    }

    .ppx-col {
        overflow: visible;
    }

    .ppx-col + .ppx-col {
        margin-top: 16px;
    }

    .ppx-section.is-panel {
        display: block;
    }

    .ppx-list {
        flex: none;
        min-height: 0;
        overflow: visible;
    }
}

@media (max-width: 520px) {
    .ppx-hero-net {
        font-size: 25px;
    }

    .ppx-composer-grid {
        grid-template-columns: 1fr;
    }

    .ppx-status-option {
        padding: 8px 12px;
        font-size: 11px;
    }
}

/* =========================================
   PREMIUM WORKFLOW SECTION
   ========================================= */
/* Sub-tab navigation */
#workflowContent .sub-tab-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 6px;
    margin-bottom: 22px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px -10px rgba(15, 23, 42, 0.14);
}

#workflowContent .wf-nav-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#workflowContent .wf-new-task-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 16px -8px rgba(13, 148, 136, 0.6);
    transition: all 0.22s ease;
    font-family: inherit;
}

#workflowContent .wf-new-task-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -8px rgba(13, 148, 136, 0.7);
}

#workflowContent .wf-new-task-btn:active {
    transform: translateY(0);
}

/* Premium dropdowns (tab bar) */
#workflowContent .wf-premium-select {
    appearance: none;
    -webkit-appearance: none;
    background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    padding: 8px 32px 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    max-width: 220px;
}

#workflowContent .wf-premium-select:hover {
    border-color: #cbd5e1;
    background-color: #fff;
}

#workflowContent .wf-premium-select:focus {
    outline: none;
    border-color: #d97706;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

#workflowContent .wf-premium-select option {
    background: #fff;
    color: #334155;
    font-weight: 600;
    padding: 8px;
}

#workflowContent .wf-premium-select option:checked {
    background: #fffbeb;
    color: #92400e;
}

#workflowContent .wf-premium-select option:hover {
    background: #f1f5f9;
}

#workflowContent .sub-tab-btn {
    background: transparent;
    border: none;
    border-radius: 11px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.22s ease;
    font-family: inherit;
}

#workflowContent .sub-tab-btn i {
    font-size: 11px;
}

#workflowContent .sub-tab-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

#workflowContent .sub-tab-btn.active {
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.5);
}

/* Stat cards */
#workflowContent .stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 178px));
    justify-content: start;
    gap: 6px;
    margin-bottom: 22px;
}

#workflowContent .stat-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px -14px rgba(15, 23, 42, 0.18);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

#workflowContent .stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wf-accent, #2563eb) 0%, transparent 90%);
}

#workflowContent .stat-card:nth-child(1)::before { --wf-accent: #2563eb; }
#workflowContent .stat-card:nth-child(2)::before { --wf-accent: #dc2626; }
#workflowContent .stat-card:nth-child(3)::before { --wf-accent: #d97706; }
#workflowContent .stat-card:nth-child(4)::before { --wf-accent: #16a34a; }

#workflowContent .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -16px rgba(15, 23, 42, 0.28);
}

#workflowContent .stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
}

#workflowContent .stat-title {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-top: 4px;
    line-height: 1.3;
}

#workflowContent .stat-value {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.8px;
    line-height: 1;
    background: linear-gradient(135deg, #0f172a 0%, #475569 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#workflowContent .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

#workflowContent .stat-icon.icon-blue { background: #eff6ff; color: #2563eb; }
#workflowContent .stat-icon.icon-red { background: #fef2f2; color: #dc2626; }
#workflowContent .stat-icon.icon-yellow { background: #fffbeb; color: #d97706; }
#workflowContent .stat-icon.icon-green { background: #f0fdf4; color: #16a34a; }

/* Table containers */
#workflowContent .table-container {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.22);
    margin-bottom: 22px;
    max-height: none;
}

#workflowContent .table-header {
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #fcfcfd 0%, #f8fafc 100%);
}

#workflowContent .table-title {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#workflowContent .table-title i {
    color: #d97706;
    font-size: 12px;
}

/* Status badges (class-based, generated by wfStatusBadge) */
#workflowContent .wf-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

#workflowContent .wf-badge-assigned,
#workflowContent .wf-badge-in_progress {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

#workflowContent .wf-badge-forwarded {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

#workflowContent .wf-badge-completed,
#workflowContent .wf-badge-pardoned {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

#workflowContent .wf-badge-expired,
#workflowContent .wf-badge-penalized {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

#workflowContent .wf-badge-queried,
#workflowContent .wf-badge-responded {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

#workflowContent .wf-badge-created,
#workflowContent .wf-badge-closed {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

/* Deadline cells */
#workflowContent .wf-deadline {
    font-weight: 600;
    color: #334155;
}

#workflowContent .wf-deadline-soon {
    color: #d97706;
}

#workflowContent .wf-deadline-overdue {
    color: #dc2626;
    font-weight: 700;
    animation: wfPulse 2s ease-in-out infinite;
}
@keyframes wfPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Recent activity feed */
#workflowContent .wf-activity {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #f8fafc;
    font-size: 12.5px;
    color: #334155;
    transition: background 0.15s ease;
}

#workflowContent .wf-activity:last-child {
    border-bottom: none;
}

#workflowContent .wf-activity:hover {
    background: #fafbfc;
}

#workflowContent .wf-activity .wf-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
}

#workflowContent .wf-activity .wf-activity-time {
    margin-left: auto;
    color: #94a3b8;
    font-size: 11px;
    white-space: nowrap;
    padding-left: 12px;
}

/* Chain view — premium timeline */
#workflowContent .wf-chain-view {
    animation: premiumFadeIn 0.25s ease;
}

#workflowContent .wf-chain-view .btn-secondary {
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
}

/* ── Premium task chain card (expanded rows + full-page view) ───────────── */
#workflowContent .wf-cc {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 16px 40px -24px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

/* Hero header */
#workflowContent .wf-cc-hero {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%);
    padding: 22px 24px 18px;
    overflow: hidden;
}

#workflowContent .wf-cc-hero-glow {
    position: absolute;
    right: -60px;
    top: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

#workflowContent .wf-cc-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

#workflowContent .wf-cc-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

#workflowContent .wf-cc-title-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.7);
    flex-shrink: 0;
}

#workflowContent .wf-cc h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.4px;
    color: #fff;
}

#workflowContent .wf-cc-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

#workflowContent .wf-cc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 10.5px;
    font-weight: 600;
}

#workflowContent .wf-cc-chip i {
    color: #10b981;
    font-size: 10px;
}

#workflowContent .wf-cc-prio-high i {
    color: #f59e0b;
}

#workflowContent .wf-cc-prio-urgent i {
    color: #f87171;
}

#workflowContent .wf-cc-fwd {
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    box-shadow: 0 10px 22px -8px rgba(16, 185, 129, 0.7);
    position: relative;
    z-index: 1;
}

#workflowContent .wf-cc-desc {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.55;
    position: relative;
    z-index: 1;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

/* Chain timeline */
#workflowContent .wf-cc-chain {
    padding: 18px 20px 22px;
}

#workflowContent .wf-cc-empty {
    color: #94a3b8;
    font-size: 12px;
    padding: 8px 0;
}

/* Timeline node */
#workflowContent .wf-tn {
    position: relative;
    padding-left: calc(20px + var(--depth, 0) * 26px);
    margin-bottom: 14px;
}

#workflowContent .wf-tn-rail {
    position: absolute;
    left: calc(8px + var(--depth, 0) * 26px);
    top: 0;
    bottom: 0;
    width: 10px;
}

#workflowContent .wf-tn-dot {
    position: absolute;
    top: 20px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    z-index: 1;
}

#workflowContent .wf-tn-dot.wf-tn-green {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}

#workflowContent .wf-tn-dot.wf-tn-amber {
    background: #d97706;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15);
}

#workflowContent .wf-tn-dot.wf-tn-red {
    background: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

#workflowContent .wf-tn-line {
    position: absolute;
    top: 34px;
    bottom: -14px;
    left: 4px;
    width: 2px;
    background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%);
    border-radius: 2px;
}

#workflowContent .wf-tn:last-child .wf-tn-line {
    display: none;
}

/* Node card */
#workflowContent .wf-tn-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.3);
    transition: all 0.2s ease;
}

#workflowContent .wf-tn-card:hover {
    box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.4);
    border-color: #e2e8f0;
}

/* Expired (past-deadline) states */
#workflowContent .wf-tn-card.wf-tn-card-expired {
    border-color: #fecaca;
    background: #fef2f2;
}

#workflowContent .wf-row-expired {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
}

#workflowContent .wf-row-tip-anchor { position: relative; z-index: 1; }

/* Hover tooltip on expired rows — explains the query/review path and
   links to the chain view. */
#workflowContent .wf-row-tip {
    display: none;
    position: absolute;
    right: 8px;
    width: min(340px, 55vw);
    max-width: 90vw;
    z-index: 9999;
    background: #fff;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: #7f1d1d;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}
/* Below (default) */
#workflowContent .wf-row-tip.wf-tip-below { top: calc(100% + 4px); }
/* Above — applied by JS when near viewport bottom */
#workflowContent .wf-row-tip.wf-tip-above { bottom: calc(100% + 4px); top: auto; }

#workflowContent .wf-row-expired:hover .wf-row-tip { display: block; }

#workflowContent .wf-tip-link { margin-top: 6px; }
#workflowContent .wf-tip-link a { font-weight: 700; color: #b91c1c; text-decoration: none; }
#workflowContent .wf-tip-link a:hover { text-decoration: underline; }

#workflowContent .wf-expired-note {
    margin-top: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 8px;
    font-size: 11px;
    color: #b91c1c;
}

/* Verdict pills on the Resolved sub-tab. */
#workflowContent .wf-verdict-cell {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

#workflowContent .wf-verdict-cell-penalized {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

#workflowContent .wf-verdict-cell-pardoned {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* Dark-mode variants: keep the red states readable when the OS prefers dark. */
@media (prefers-color-scheme: dark) {
    #workflowContent .wf-tn-card.wf-tn-card-expired {
        border-color: #7f1d1d;
        background: #1f1213;
    }

    #workflowContent .wf-row-expired {
        border-left-color: #ef4444;
        background: #1f1213;
    }

    #workflowContent .wf-badge-expired,
    #workflowContent .wf-badge-penalized {
        background: #2b1414;
        color: #fca5a5;
        border-color: #7f1d1d;
    }

    #workflowContent .wf-expired-note {
        background: #2b1414;
        border-color: #7f1d1d;
        color: #fca5a5;
    }

    #workflowContent .wf-row-tip {
        background: #1f1213;
        border-color: #7f1d1d;
        color: #fca5a5;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    }

    #workflowContent .wf-tip-link a { color: #f87171; }

    #workflowContent .wf-verdict-cell-penalized {
        background: #2b1414;
        color: #fca5a5;
        border-color: #7f1d1d;
    }

    #workflowContent .wf-verdict-cell-pardoned {
        background: #10231a;
        color: #86efac;
        border-color: #14532d;
    }
}

/* Per-task query history timeline */
#workflowContent .wf-qh {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

#workflowContent .wf-qh-title {
    font-weight: 800;
    font-size: 12px;
    color: #92400e;
    margin-bottom: 10px;
}

#workflowContent .wf-qh-event {
    border-left: 3px solid #f59e0b;
    padding: 2px 0 6px 12px;
    margin: 0 0 10px 0;
    font-size: 11px;
    line-height: 1.5;
}

#workflowContent .wf-tn-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

#workflowContent .wf-tn-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#workflowContent .wf-tn-avatar.wf-tn-green {
    background: #ecfdf5;
    color: #059669;
}

#workflowContent .wf-tn-avatar.wf-tn-amber {
    background: #fffbeb;
    color: #b45309;
}

#workflowContent .wf-tn-avatar.wf-tn-red {
    background: #fef2f2;
    color: #dc2626;
}

#workflowContent .wf-tn-who {
    flex: 1;
    min-width: 0;
}

#workflowContent .wf-tn-name {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#workflowContent .wf-tn-role {
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 2px 9px;
}

#workflowContent .wf-tn-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

#workflowContent .wf-tn-meta i {
    color: #94a3b8;
    font-size: 9.5px;
}

#workflowContent .wf-tn-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

#workflowContent .wf-tn-actions {
    display: flex;
    gap: 6px;
}

#workflowContent .wf-tn-btn {
    border-radius: 8px;
    font-size: 11px;
    padding: 5px 12px;
}

/* Query cards inside a node */
#workflowContent .wf-tq {
    margin-top: 12px;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 10px 13px;
    font-size: 11.5px;
    color: #475569;
}

#workflowContent .wf-tq-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #92400e;
}

#workflowContent .wf-tq-head i {
    color: #d97706;
    font-size: 12px;
}

#workflowContent .wf-tq-resp {
    margin-top: 8px;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 9px;
    padding: 8px 10px;
}

#workflowContent .wf-tq-resp-head {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

#workflowContent .wf-tq-resp p {
    margin: 0;
    font-size: 11.5px;
    color: #334155;
    line-height: 1.5;
}

#workflowContent .wf-tq-wait {
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #b45309;
    font-size: 11px;
}

#workflowContent .wf-tq-decision {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #1e40af;
}

#workflowContent .wf-tq-decision i {
    color: #2563eb;
}

#workflowContent .wf-tq-evidence {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: #78350f;
}

#workflowContent .wf-tq-evidence i {
    color: #92400e;
}

/* Collapsible Task Center rows */
#workflowContent .wf-center-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

#workflowContent .wf-center-row:hover td {
    background: #f8fafc;
}

#workflowContent .wf-center-chevron {
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
}

#workflowContent .wf-center-chevron.wf-chevron-open {
    transform: rotate(180deg);
    color: #d97706;
}

#workflowContent .wf-center-expand td {
    animation: premiumFadeIn 0.2s ease;
}

/* Small action buttons inside workflow tables */
#workflowContent .table .btn-sm,
#workflowContent .wf-tn-btn {
    border-radius: 8px;
    font-size: 11px;
    padding: 5px 12px;
}

/* ── Premium New Task modal ─────────────────────────────────────────────── */
.premium-task-overlay {
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1200;
}

.premium-task-dialog {
    width: min(92vw, 640px);
    max-height: 92vh;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 30px 60px -15px rgba(2, 6, 23, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset,
        0 0 80px rgba(16, 185, 129, 0.08);
    display: flex;
    flex-direction: column;
    animation: premiumVerdictIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.premium-task-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.premium-task-header::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.28) 0%, transparent 70%);
}

.premium-task-title {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.premium-task-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.7);
}

.premium-task-title h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}

.premium-task-title p {
    margin: 2px 0 0;
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 0.2px;
}

.premium-task-header .btn-close-premium {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    position: relative;
    z-index: 1;
}

.premium-task-header .btn-close-premium:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Body */
.premium-task-body {
    padding: 20px 24px 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

.premium-task-field {
    margin-bottom: 14px;
}

.premium-task-field label {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    display: block;
}

.premium-task-field label em {
    color: #dc2626;
    font-style: normal;
}

.premium-task-field input[type="text"],
.premium-task-field input[type="datetime-local"],
.premium-task-field textarea,
.premium-task-field select {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    color: #0f172a;
    transition: all 0.2s ease;
}

.premium-task-field textarea {
    resize: vertical;
    min-height: 76px;
}

.premium-task-field input:focus,
.premium-task-field textarea:focus,
.premium-task-field select:focus {
    border-color: #10b981;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.premium-task-field select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.premium-task-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Assignee pick list */
.premium-task-assignees {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    height: 150px;
    overflow-y: auto;
    padding: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.premium-task-assignees:focus-within {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    background: #fff;
}

.premium-task-assignees .wf-assignee-item {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    border-radius: 9px !important;
    transition: background 0.15s ease;
}

.premium-task-assignees .wf-assignee-item:hover {
    background: #ecfdf5;
}

.premium-task-assignees .wf-assignee-item input[type="checkbox"] {
    margin-top: 1px;
    width: 15px;
    height: 15px;
    accent-color: #10b981;
    cursor: pointer;
    flex-shrink: 0;
}

.premium-task-assignees .wf-assignee-item:has(input:checked) {
    background: #d1fae5;
    font-weight: 600;
}

/* Reminder chips */
.premium-task-reminders {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.premium-task-remind {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.premium-task-remind:hover {
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.premium-task-remind input {
    accent-color: #10b981;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.premium-task-remind:has(input:checked) {
    border-color: #6ee7b7;
    background: #d1fae5;
    color: #065f46;
}

/* Footer */
.premium-task-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
    background: #fff;
    border-top: 1px solid #f1f5f9;
}

.btn-task-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 24px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 22px -8px rgba(16, 185, 129, 0.7);
    transition: all 0.2s ease;
}

.btn-task-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -8px rgba(16, 185, 129, 0.8);
    filter: brightness(1.05);
}

.btn-task-primary:active {
    transform: translateY(0);
}

@media (max-width: 520px) {
    .premium-task-grid {
        grid-template-columns: 1fr;
    }
}

/* Expanded Task Center row — premium container */
#workflowContent .wf-center-expand-cell {
    padding: 16px 18px 20px !important;
    background: linear-gradient(180deg, #f1f5f9 0%, #eef2f7 100%) !important;
    border-bottom: 1px solid #e2e8f0;
}

#workflowContent .wf-center-expand-cell .wf-cc {
    animation: premiumFadeIn 0.22s ease;
}

/* Forward Task modal — blue accent + info banner */
.premium-task-icon-blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 8px 20px -6px rgba(59, 130, 246, 0.7);
}

.premium-task-header:has(.premium-task-icon-blue)::after {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.28) 0%, transparent 70%);
}

.premium-forward-info {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12px;
    color: #475569;
    margin-bottom: 16px;
    line-height: 1.5;
}

.premium-forward-info strong {
    color: #1e40af;
}

.premium-task-hint {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 10.5px;
}

/* ── Premium Query Reply modal (defaulter side) ─────────────────────────── */
.premium-reply-dialog {
    width: min(92vw, 620px);
}

.premium-reply-text {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    font-family: inherit;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
    color: #0f172a;
    resize: vertical;
    min-height: 96px;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.premium-reply-text:focus {
    border-color: #f59e0b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.premium-reply-text::placeholder {
    color: #94a3b8;
}

.premium-reply-attach-label {
    margin-top: 18px;
}

.premium-reply-attach-note {
    color: #94a3b8;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10.5px;
    margin-left: 4px;
}

.premium-reply-attachments {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    height: 128px;
    overflow-y: auto;
    padding: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.premium-reply-attachments:focus-within {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    background: #fff;
}

.premium-reply-attachments label {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    border-radius: 9px !important;
    transition: background 0.15s ease;
}

.premium-reply-attachments label:hover {
    background: #fffbeb;
}

.premium-reply-attachments input[type="checkbox"] {
    margin-top: 1px;
    width: 15px;
    height: 15px;
    accent-color: #d97706;
    cursor: pointer;
    flex-shrink: 0;
}

.premium-reply-attachments label:has(input:checked) {
    background: #fef3c7;
    font-weight: 600;
}

/* History tab — verdict summary card */
#workflowContent .wf-hs {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    margin-bottom: 16px;
    animation: premiumFadeIn 0.22s ease;
}
#workflowContent .wf-hs-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}
#workflowContent .wf-hs-icon {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 8px 18px -6px rgba(217, 119, 6, 0.6);
}
#workflowContent .wf-hs-titles {
    flex: 1;
    min-width: 0;
}
#workflowContent .wf-hs-title {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
}
#workflowContent .wf-hs-sub {
    color: #94a3b8;
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#workflowContent .wf-hs-out {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
#workflowContent .wf-hs-out-green { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
#workflowContent .wf-hs-out-red { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
#workflowContent .wf-hs-out-neutral { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); }
#workflowContent .wf-hs-body {
    padding: 16px 18px 18px;
}
#workflowContent .wf-hs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 14px;
}
#workflowContent .wf-hs-item label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 3px;
}
#workflowContent .wf-hs-item span {
    font-size: 13px;
    color: #334155;
    font-weight: 600;
}
#workflowContent .wf-hs-item-penalty span { color: #dc2626; }
#workflowContent .wf-hs-block {
    margin-top: 12px;
    border-radius: 12px;
    padding: 12px 14px;
}
#workflowContent .wf-hs-block-amber { background: linear-gradient(180deg, #fffbeb, #fef3c7); border: 1px solid #fde68a; }
#workflowContent .wf-hs-block-blue { background: linear-gradient(180deg, #eff6ff, #dbeafe); border: 1px solid #bfdbfe; }
#workflowContent .wf-hs-block-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 5px;
}
#workflowContent .wf-hs-block-blue .wf-hs-block-head { color: #1e40af; }
#workflowContent .wf-hs-block-time {
    margin-left: auto;
    font-weight: 600;
    color: #b45309;
    font-size: 11px;
}
#workflowContent .wf-hs-block-blue .wf-hs-block-time { color: #1d4ed8; }
#workflowContent .wf-hs-block p {
    margin: 0;
    font-size: 13px;
    color: #78350f;
    line-height: 1.5;
}

/* Collapse animation for chain-card expansion rows */
#workflowContent tr.wf-center-expand.wf-expand-collapsing td {
    animation: wfExpandCollapse 0.22s ease forwards;
    overflow: hidden;
}
@keyframes wfExpandCollapse {
    from {
        opacity: 1;
        transform: translateY(0);
        padding-top: 16px;
        padding-bottom: 20px;
    }
    to {
        opacity: 0;
        transform: translateY(-6px);
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Keep expanded chain cards from slamming against the top edge when scrolled into view */
#workflowContent tr.wf-center-expand {
    scroll-margin-top: 14px;
}

/* Verdict action inside the expanded chain card's query card */
#workflowContent .wf-tq-verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 12px -4px rgba(217, 119, 6, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#workflowContent .wf-tq-verdict:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px -4px rgba(217, 119, 6, 0.65);
}

/* ── My Tasks: Progress bar & per-assignee breakdown ──────────────────────── */
#workflowContent .wf-progress-track {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
#workflowContent .wf-progress-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 999px;
    transition: width 0.3s ease;
}
#workflowContent .wf-progress-fill.wf-progress-done {
    background: #16a34a;
}
#workflowContent .wf-progress-fill.wf-progress-partial {
    background: #f59e0b;
}
#workflowContent .wf-progress-label {
    font-size: 10px;
    color: #64748b;
    margin-top: 5px;
    font-weight: 600;
}

/* Per-assignee breakdown rows inside My Tasks */
#workflowContent .wf-assignee-list {
    padding: 8px 16px 10px;
    border-top: 1px dashed #e2e8f0;
}
#workflowContent .wf-assignee-row {
    padding: 8px 0 10px;
    border-bottom: 1px dashed #e2e8f0;
}
#workflowContent .wf-assignee-row:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}
#workflowContent .wf-assignee-name {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
}
#workflowContent .wf-assignee-role {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    margin-left: 6px;
}
#workflowContent .wf-assignee-meta {
    font-size: 10px;
    color: #64748b;
    margin-top: 3px;
}
#workflowContent .wf-assignee-row .wf-completion-info,
#workflowContent .wf-assignee-row .wf-verdict-info {
    margin-top: 6px;
    padding: 8px;
    border-radius: 8px;
    font-size: 10.5px;
}
#workflowContent .wf-assignee-row .wf-completion-info {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
#workflowContent .wf-assignee-row .wf-verdict-info {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
#workflowContent .wf-assignee-row .wf-verdict-info.wf-verdict-pardoned {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}
#workflowContent .wf-completion-note,
#workflowContent .wf-verdict-note {
    margin-top: 4px;
    font-style: italic;
    font-size: 10px;
    color: #64748b;
}
#workflowContent .wf-overdue-label {
    color: #dc2626;
    font-weight: 600;
    font-size: 10px;
    animation: wfPulse 2s ease-in-out infinite;
}
#workflowContent .wf-row-between-g8 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
#workflowContent .wf-badge-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
#workflowContent .wf-assignee-detail-row {
    background: #fafbfc;
}
#workflowContent .wf-assignee-detail-row:hover {
    background: #f1f5f9;
}

/* ═══════════════════════════════════════════════════════════════
   STAFF APPLICATION VIEW MODAL — Premium Design  (sav-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.sav-overlay {
    position: fixed;
    inset: 0;
    z-index: 50000;
    background: rgba(10, 12, 28, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: savOverlayIn 0.25s ease;
}
@keyframes savOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Dialog shell ── */
.sav-dialog {
    background: #ffffff;
    border-radius: 24px;
    width: 100%;
    max-width: 820px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px -16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.12);
    animation: savDialogIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes savDialogIn {
    from { opacity: 0; transform: scale(0.93) translateY(20px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── Hero Banner ── */
.sav-hero {
    position: relative;
    background: linear-gradient(135deg, #3b0eb0 0%, #4710EB 40%, #7c3aed 100%);
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
}
.sav-hero-bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 50%, rgba(255,255,255,0.07) 0%, transparent 50%),
        radial-gradient(circle at 85% 20%, rgba(255,255,255,0.05) 0%, transparent 40%);
    pointer-events: none;
}
.sav-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
}

/* ── Avatar ── */
.sav-avatar-ring {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    border: 3px solid rgba(255,255,255,0.35);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
    font-size: 2rem;
    transition: transform 0.3s ease;
}
.sav-avatar-ring:hover { transform: scale(1.04); }
.sav-avatar-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Hero text ── */
.sav-hero-info { flex: 1; min-width: 0; }
.sav-hero-name {
    margin: 0 0 0.45rem 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sav-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Meta Chips ── */
.sav-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
}
.sav-chip-appnum  { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.25); cursor: pointer; transition: background 0.2s ease; }
.sav-chip-appnum:hover { background: rgba(255,255,255,0.3); }
.sav-chip-pending  { background: rgba(251,191,36,0.25);  color: #fde68a; border: 1px solid rgba(251,191,36,0.4); }
.sav-chip-passed   { background: rgba(16,185,129,0.25);  color: #6ee7b7; border: 1px solid rgba(16,185,129,0.4); }
.sav-chip-accepted { background: rgba(16,185,129,0.25);  color: #6ee7b7; border: 1px solid rgba(16,185,129,0.4); }
.sav-chip-failed   { background: rgba(239,68,68,0.25);   color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }
.sav-chip-rejected { background: rgba(239,68,68,0.25);   color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }
.sav-chip-onboarded{ background: rgba(139,92,246,0.3);   color: #c4b5fd; border: 1px solid rgba(139,92,246,0.5); }
.sav-chip-role     { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.2); }

/* ── Close button ── */
.sav-close-btn {
    margin-left: auto;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.sav-close-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg);
}

/* ── Scrollable body ── */
.sav-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: #f8fafc;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.sav-body::-webkit-scrollbar { width: 5px; }
.sav-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ── Section cards ── */
.sav-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.2rem 1.35rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease;
}
.sav-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.07); }

.sav-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1.5px solid #f1f5f9;
}
.sav-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.sav-card-icon-violet  { background: #ede9fe; color: #4710EB; }
.sav-card-icon-blue    { background: #dbeafe; color: #1d4ed8; }
.sav-card-icon-emerald { background: #d1fae5; color: #059669; }
.sav-card-icon-amber   { background: #fef3c7; color: #d97706; }
.sav-card-icon-rose    { background: #fee2e2; color: #dc2626; }
.sav-card-icon-slate   { background: #f1f5f9; color: #475569; }

.sav-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.sav-card-subtitle {
    font-size: 0.76rem;
    color: #94a3b8;
    margin: 0;
}

/* ── Info grid ── */
.sav-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.25rem;
}
.sav-info-grid.full { grid-template-columns: 1fr; }
.sav-info-item { display: flex; flex-direction: column; gap: 3px; }
.sav-info-item.span2 { grid-column: span 2; }

.sav-info-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sav-info-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    word-break: break-word;
}
.sav-info-value a { color: #4710EB; text-decoration: none; }
.sav-info-value a:hover { text-decoration: underline; }
.sav-info-value.muted { color: #94a3b8; font-weight: 500; font-style: italic; }

/* ── Two-column card row ── */
.sav-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* ── Subject pill tags ── */
.sav-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sav-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #ede9fe;
    color: #4710EB;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
}

/* ── Document / resume card ── */
.sav-doc-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}
.sav-doc-row:hover {
    border-color: #4710EB;
    background: #f5f3ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(71,16,235,0.08);
}
.sav-doc-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ede9fe;
    color: #4710EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.sav-doc-info { flex: 1; min-width: 0; }
.sav-doc-name { font-size: 0.88rem; font-weight: 700; color: #1e293b; }
.sav-doc-meta { font-size: 0.74rem; color: #94a3b8; }
.sav-doc-dl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: #4710EB;
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}
.sav-doc-dl:hover { background: #3b0eb0; color: #fff; transform: scale(1.04); }

/* ── Review status callout ── */
.sav-review-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 0.25rem;
}
.sav-review-callout.notes {
    background: #fefce8;
    border: 1px solid #fde047;
    color: #713f12;
}
.sav-review-callout.onboarded {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

/* ══ Footer ══ */
.sav-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.sav-footer-left {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
    min-width: 0;
}
.sav-footer-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Footer field groups ── */
.sav-field-group { display: flex; flex-direction: column; gap: 4px; }
.sav-notes-group { flex: 1; min-width: 150px; max-width: 260px; }
.sav-footer-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sav-status-select {
    padding: 0.5rem 0.8rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sav-status-select:focus {
    border-color: #4710EB;
    box-shadow: 0 0 0 3px rgba(71,16,235,0.12);
    background: #ffffff;
}
.sav-review-notes {
    padding: 0.5rem 0.8rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.83rem;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    resize: none;
    outline: none;
    width: 100%;
    min-height: 38px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sav-review-notes:focus {
    border-color: #4710EB;
    box-shadow: 0 0 0 3px rgba(71,16,235,0.12);
    background: #ffffff;
}

/* ── Footer Buttons ── */
.sav-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0.55rem 1.15rem;
    border-radius: 11px;
    font-size: 0.83rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    font-family: inherit;
}
.sav-btn:active { transform: scale(0.97); }

.sav-btn-primary {
    background: linear-gradient(135deg, #4710EB 0%, #6d28d9 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(71,16,235,0.3);
}
.sav-btn-primary:hover {
    background: linear-gradient(135deg, #3b0eb0 0%, #5b21b6 100%);
    box-shadow: 0 6px 18px rgba(71,16,235,0.4);
    transform: translateY(-1px);
}

.sav-btn-emerald {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.sav-btn-emerald:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 6px 18px rgba(16,185,129,0.4);
    transform: translateY(-1px);
}

.sav-btn-danger {
    background: #fff5f5;
    color: #dc2626;
    border: 1.5px solid #fecaca;
}
.sav-btn-danger:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    transform: translateY(-1px);
}

.sav-btn-ghost {
    background: #f1f5f9;
    color: #64748b;
    border: 1.5px solid #e2e8f0;
}
.sav-btn-ghost:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* ── Divider ── */
.sav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 0.25rem 0;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .sav-hero-inner  { flex-wrap: wrap; }
    .sav-hero-name   { font-size: 1.1rem; }
    .sav-info-grid   { grid-template-columns: 1fr; }
    .sav-info-item.span2 { grid-column: span 1; }
    .sav-grid-2      { grid-template-columns: 1fr; }
    .sav-footer      { flex-direction: column; align-items: stretch; }
    .sav-footer-left { flex-direction: column; }
    .sav-notes-group { max-width: 100%; }
    .sav-footer-right{ justify-content: flex-end; }
}

/* ═══════════════════════════════════════════
   SAV — Exam Results Card (sec5)
═══════════════════════════════════════════ */
.sav-card-icon-rose { background: linear-gradient(135deg,#ffe4e6,#fecdd3); color:#e11d48; }

/* Pass / Fail verdict badge in card header */
.sav-result-verdict {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
}
.sav-result-verdict.pass { background:#d1fae5; color:#065f46; }
.sav-result-verdict.fail { background:#fee2e2; color:#991b1b; }

/* Layout: dial on left, breakdown bars on right */
.sav-score-total-row {
  display: flex; gap: 24px; align-items: flex-start;
  padding: 16px 0 6px;
  flex-wrap: wrap;
}

/* Circular progress dial */
.sav-score-dial-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 120px;
}
.sav-score-dial {
  position: relative; width: 96px; height: 96px;
}
.sav-score-ring {
  width: 96px; height: 96px;
  transform: rotate(-90deg);
}
.sav-score-ring-bg {
  fill: none; stroke: #e2e8f0; stroke-width: 3.5;
}
.sav-score-ring-fill {
  fill: none; stroke-width: 3.5; stroke-linecap: round;
  transition: stroke-dasharray .6s ease;
}
.sav-score-dial-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
}
.sav-score-dial-label {
  font-size: 12px; color: #64748b; text-align: center; line-height: 1.5;
}

/* Per-subject breakdown bars */
.sav-score-breakdown {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  min-width: 200px;
}
.sav-score-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center; gap: 10px;
}
.sav-score-row-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: #475569;
}
.sav-score-row-label i { color: #94a3b8; font-size: 12px; }
.sav-score-row-bar-wrap {
  height: 7px; background: #f1f5f9; border-radius: 99px; overflow: hidden;
}
.sav-score-row-bar {
  height: 100%; border-radius: 99px;
  transition: width .5s ease;
}
.sav-score-row-val {
  font-size: 13px; font-weight: 700; text-align: right;
}
.sav-score-row-val span { font-weight: 400; color: #94a3b8; }

@media (max-width: 600px) {
  .sav-score-total-row { flex-direction: column; align-items: center; }
  .sav-score-row { grid-template-columns: 75px 1fr 50px; }
}