/* Authentication fields: keep focus visible without the green glow. */

/* Remove the branded focus ring from authentication buttons and icon buttons. */

/* Employee editor: use the available viewport while preserving safe margins. */
.employee-modal {
    position: relative;
    width: min(1600px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
}

.employee-modal-close {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    z-index: 30;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    cursor: pointer;
}
.system-modal-close {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    z-index: 30;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    cursor: pointer;
}

.system-modal-standard {
    position: relative;
}

.system-modal-standard > .modal-context {
    padding-inline-end: 76px;
}

.system-modal-standard > .modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Employee evaluations */
.evaluation-nav-section > .nav-item.active + .evaluation-subnav {
    display: grid;
}
.evaluation-nav-section:focus-within .evaluation-subnav {
    display: grid;
}
.evaluation-nav-section.section-active > .evaluation-subnav {
    display: grid;
}

.evaluation-subnav {
    display: none;
    gap: 4px;
    margin: 4px 14px 10px 0;
    padding: 5px 10px 5px 0;
    border-inline-start: 1px solid var(--line);
}

.evaluation-subnav a {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 11px;
    text-decoration: none;
}

.evaluation-subnav a:hover {
    color: var(--primary);
    background: var(--surface-soft);
    outline: none;
}
.evaluation-subnav a:focus-visible {
    color: var(--primary);
    background: var(--surface-soft);
    outline: none;
}

.evaluation-subnav .unrated-link {
    color: var(--muted);
}

.employee-simple-table {
    overflow: auto;
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.employee-simple-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.employee-simple-table th {
    padding: 0.85rem 1rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.employee-simple-table td {
    padding: 0.85rem 1rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.employee-simple-table th {
    background: var(--surface-soft);
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.employee-simple-table tbody tr:hover {
    background: var(--surface-soft);
}

.employee-simple-table .empty-state {
    padding: 2rem;
    text-align: center;
}
.employee-simple-table .error-text {
    padding: 2rem;
    text-align: center;
}

.employee-simple-table .error-text {
    color: #b42318;
}

.form-validation-summary {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #f0aaa5;
    border-radius: 11px;
    background: #fff4f2;
    color: #9f221b;
    font-size: 12px;
}

.form-validation-summary > i {
    margin-top: 2px;
    font-size: 17px;
}

.form-validation-summary strong {
    display: block;
    margin-bottom: 4px;
}

.form-validation-summary ul {
    margin: 0;
    padding-inline-start: 18px;
    display: grid;
    gap: 2px;
}

.field-validation {
    display: block;
    margin-top: 4px;
    color: #b42318;
    font-size: 10px;
    font-weight: 600;
}

.modal input.field-invalid {
    border-color: #dc5148 !important;
    background: #fff8f7 !important;
}
.modal textarea.field-invalid {
    border-color: #dc5148 !important;
    background: #fff8f7 !important;
}
.modal select.field-invalid {
    border-color: #dc5148 !important;
    background: #fff8f7 !important;
}
.searchable-select.field-invalid .select-trigger {
    border-color: #dc5148 !important;
    background: #fff8f7 !important;
}

html[data-theme='dark'] .form-validation-summary {
    background: #341916;
    border-color: #7d3732;
    color: #ffb4ad;
}

html[data-theme='dark'] .field-validation {
    color: #ff9b93;
}

html[data-theme='dark'] .modal .modal-actions button[data-close] {
    background: #2a2140 !important;
    color: #f8fafc !important;
    border: 1px solid #655979 !important;
    box-shadow: none !important;
}
html[data-theme='dark']
    .modal
    .modal-actions
    button[type='button']:not(.primary-button):not(.danger-button):not(.warning-button) {
    background: #2a2140 !important;
    color: #f8fafc !important;
    border: 1px solid #655979 !important;
    box-shadow: none !important;
}

html[data-theme='dark'] .modal .modal-actions button[data-close] > .bi {
    color: #f8fafc !important;
    opacity: 1 !important;
}
html[data-theme='dark']
    .modal
    .modal-actions
    button[type='button']:not(.primary-button):not(.danger-button):not(.warning-button)
    > .bi {
    color: #f8fafc !important;
    opacity: 1 !important;
}

html[data-theme='dark'] .modal .modal-actions button[data-close]:hover {
    background: #451f25 !important;
    color: #ffaaa3 !important;
    border-color: #e45b52 !important;
    outline: none !important;
}
html[data-theme='dark'] .modal .modal-actions button[data-close]:focus-visible {
    background: #451f25 !important;
    color: #ffaaa3 !important;
    border-color: #e45b52 !important;
    outline: none !important;
}

.modal .modal-actions button[data-close]:hover {
    background: #fff1f0 !important;
    color: #b42318 !important;
    border-color: #e65b52 !important;
    outline: none !important;
    box-shadow: none !important;
}
.modal .modal-actions button[data-close]:focus {
    background: #fff1f0 !important;
    color: #b42318 !important;
    border-color: #e65b52 !important;
    outline: none !important;
    box-shadow: none !important;
}
.modal .modal-actions button[data-close]:focus-visible {
    background: #fff1f0 !important;
    color: #b42318 !important;
    border-color: #e65b52 !important;
    outline: none !important;
    box-shadow: none !important;
}

.modal .modal-actions button[data-close]:hover > .bi {
    color: #b42318 !important;
}
.modal .modal-actions button[data-close]:focus > .bi {
    color: #b42318 !important;
}
.modal .modal-actions button[data-close]:focus-visible > .bi {
    color: #b42318 !important;
}

html[data-theme='dark'] .modal .modal-actions button[data-close]:hover > .bi {
    color: #ffaaa3 !important;
}
html[data-theme='dark'] .modal .modal-actions button[data-close]:focus > .bi {
    color: #ffaaa3 !important;
}
html[data-theme='dark'] .modal .modal-actions button[data-close]:focus-visible > .bi {
    color: #ffaaa3 !important;
}