/**
 * keyboard-accessibility.css
 * 키보드 접근성 공통 스타일 - 모든 JSP 페이지에서 참조
 * 경로: /css/common/keyboard-accessibility.css
 */

/* ===== 1. 기본 폼 요소 포커스 ===== */
input:not([type="text"])focus,
button:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25) !important;
}

/* ===== 2. 체크박스 & 라디오 버튼 포커스 ===== */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25) !important;
}

/* 체크박스/라디오 커스텀 스타일 (Material Dashboard 등에서 숨긴 경우 대응) */
.form-check-input:focus,
.custom-control-input:focus ~ .custom-control-label::before {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25) !important;
}

/* label 내부 체크박스/라디오 - label 자체에도 포커스 표시 */
label:focus-within {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ===== 3. 버튼 및 링크 포커스 ===== */
a.btn:focus,
a.btn-sm:focus,
a.btn-primary:focus,
a.btn-default:focus,
.btn:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25) !important;
}

/* cursor:pointer 스타일의 인라인 링크 */
a[style*="cursor: pointer"]:focus,
a[style*="cursor:pointer"]:focus,
span[style*="cursor: pointer"]:focus,
span[style*="cursor:pointer"]:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
}

/* role="button" 요소 */
[role="button"]:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
}

/* ===== 4. Bootstrap Selectpicker 포커스 ===== */
.selectpicker:focus,
.bootstrap-select .btn:focus,
.bootstrap-select .dropdown-toggle:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25) !important;
}

/* ===== 5. DataTable 동적 요소 포커스 ===== */
.hlink:focus,
.approval-link:focus,
.detail-link:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
}

/* DataTable 내 체크박스 */
table.dataTable input[type="checkbox"]:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25) !important;
}

/* ===== 6. 사이드바 포커스 ===== */
.sidebar a:focus,
.sidebar button:focus,
.sidebar .nav-link:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25) !important;
}

.sidebar .sidebar-normal[tabindex]:focus,
.sidebar .badge[tabindex]:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
    border-radius: 3px;
}

.sidebar .photo img:focus,
.sidebar .username:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
}

/* ===== 7. 다이얼로그 / 모달 포커스 ===== */
.ui-dialog .ui-dialog-titlebar-close:focus,
.ui-dialog .ui-button:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
}

/* ===== 8. dhtmlx 그리드 포커스 ===== */
.objbox td:focus,
.objbox input:focus,
.objbox select:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 1px !important;
}

/* ===== 9. 포커스 보이지 않아야 하는 경우 (마우스 클릭 시) ===== */
/* focus-visible 지원 브라우저에서만: 키보드 포커스만 표시, 마우스 클릭 시 숨김 */
@supports selector(:focus-visible) {
    input:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible),
    select:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

    /* 체크박스/라디오는 항상 포커스 표시 유지 */
    input[type="checkbox"]:focus,
    input[type="radio"]:focus {
        outline: 2px solid #1a73e8 !important;
        outline-offset: 3px !important;
        box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25) !important;
    }
}