/* ============================================================
   DAS HR - Mobile Responsive Overrides
   Optimized for smartphones (< 768px)
   ============================================================ */

/* --- Base & Container --- */
@media (max-width: 767px) {
    body {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
    }

    .container,
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Alerts */
    .alert {
        padding: 10px 12px;
        font-size: 0.85rem;
        margin-bottom: 12px;
    }
}

/* --- Dashboard Header --- */
@media (max-width: 767px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        border-radius: 10px;
        margin-bottom: 16px;
        gap: 10px;
    }

    .dashboard-header h1 {
        font-size: 1.15rem;
        line-height: 1.4;
    }

    .user-info-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .user-welcome-text {
        font-size: 0.85rem;
    }

    .dashboard-header .btn {
        width: 100%;
        text-align: center;
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}

/* --- Dashboard Grid Cards --- */
@media (max-width: 767px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-bottom: 20px;
    }

    .dashboard-card {
        padding: 16px;
        border-radius: 12px;
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .dashboard-card > div {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .dashboard-card-icon {
        font-size: 2rem;
        margin-bottom: 0;
        min-width: 40px;
        text-align: center;
    }

    .dashboard-card h3 {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .dashboard-card p {
        font-size: 0.8rem;
        margin-bottom: 0;
        display: none;
    }

    .dashboard-card .btn-link-action {
        display: none;
    }

    /* Section headers */
    .section-header {
        padding: 8px 12px !important;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .section-header i {
        flex-shrink: 0;
        font-size: 1.1rem !important;
        min-width: 24px;
        text-align: center;
    }

    .section-header h4 {
        font-size: 0.92rem !important;
        line-height: 1.4;
        margin: 0;
        flex: 1;
        min-width: 0;
    }

    .section-header .btn {
        margin-top: 6px;
        font-size: 0.8rem !important;
    }

    /* Admin summary cards */
    .col-md-3.mb-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-3.mb-3 .card-header h5 {
        font-size: 0.8rem !important;
    }

    .col-md-3.mb-3 .card-body {
        font-size: 0.8rem;
    }
}

/* --- Page Header Card --- */
@media (max-width: 767px) {
    .page-header-card {
        padding: 14px;
        border-radius: 10px;
        margin-bottom: 14px;
    }

    .page-header-card h3,
    .page-header-card h4 {
        font-size: 1rem;
    }

    .page-header-card .d-flex {
        flex-direction: column;
        gap: 8px;
    }

    .page-header-card .btn {
        align-self: flex-end;
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    /* Attendance page header */
    .dashboard-header[style*="position: relative"] .btn {
        position: static !important;
        width: 100%;
        margin-top: 8px;
    }
}

/* --- Tables --- */
@media (max-width: 767px) {
    .table-responsive {
        margin: 0 -10px;
        width: calc(100% + 20px);
    }

    /* ดึงออกนอกกรอบได้เฉพาะเมื่อกล่องแม่มี padding ให้กินคืน
       ถ้าเป็นลูกตรงของการ์ด (padding เป็น 0 และการ์ดตัดขอบด้วย overflow:hidden)
       ส่วนที่ยื่นออกไปจะถูกตัดหายถาวร คอลัมน์แรกโดนกิน 10px และเลื่อนไปดูไม่ได้ */
    .card > .table-responsive,
    .whd-card > .table-responsive {
        margin: 0;
        width: 100%;
    }

    .modern-table th,
    .modern-table td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .modern-table th {
        font-size: 0.7rem;
    }

    .ot-table thead th {
        padding: 8px 10px;
        font-size: 0.7rem;
    }

    .ot-table tbody td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    /* Hide less important columns on mobile */
    .table .d-none-mobile,
    .modern-table .d-none-mobile,
    .ot-table .d-none-mobile {
        display: none !important;
    }

    /* Issue 1: Batch checkbox touch-friendly */
    .histBatchCheckbox,
    #histSelectAll {
        width: 20px !important;
        height: 20px !important;
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
        -webkit-appearance: checkbox;
    }

    /* Issue 1: Batch toolbar mobile */
    #histBatchBar {
        flex-wrap: wrap;
        padding: 8px 12px !important;
        gap: 8px !important;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    #histBatchBar .btn {
        font-size: 0.78rem;
        padding: 6px 10px;
    }
    #histBatchBar span {
        font-size: 0.82rem !important;
        width: 100%;
    }
    #btnHistBatchApprove {
        margin-left: 0 !important;
        flex: 1;
    }

    /* Employee Edit/Cancel OT buttons in Result modal */
    #modalOTResult .modal-footer {
        flex-wrap: wrap;
        gap: 6px;
    }
    #btnEditOTFromResult,
    #btnCancelOTFromResult {
        flex: 1 1 calc(50% - 6px);
        font-size: 0.8rem;
        padding: 8px 6px;
        min-height: 44px;
    }
}

/* --- Sidebar + Content Layout (Petty Cash, Leave Request) --- */
@media (max-width: 767px) {
    .col-md-3 {
        margin-bottom: 12px;
    }

    /* Sidebar history: horizontal scrollable on mobile */
    .sidebar-history {
        max-height: 200px !important;
    }

    /* A4 Document Views */
    .a4-landscape,
    .a4-portrait {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 16px !important;
        margin: 0 !important;
        font-size: 0.78rem !important;
        box-shadow: 0 0 8px rgba(0,0,0,0.08) !important;
        overflow-x: auto;
    }

    .a4-landscape table,
    .a4-portrait table {
        font-size: 0.78rem;
    }

    .a4-landscape .doc-header-line,
    .a4-portrait .doc-header-line {
        margin: 6px 0 12px 0;
    }

    /* Petty cash item table */
    .a4-landscape .table th,
    .a4-landscape .table td {
        padding: 4px 6px;
        font-size: 0.75rem;
    }

    .a4-landscape .form-control,
    .a4-portrait .form-control {
        font-size: 0.8rem !important;
        min-height: 34px !important;
        padding: 4px 8px !important;
    }

    /* Header logo in document */
    .a4-landscape img[alt="DAS Logo"],
    .a4-portrait img[alt="DAS Logo"] {
        width: 80px !important;
    }

    .a4-landscape td[style*="width: 180px"],
    .a4-portrait td[style*="width: 180px"] {
        width: 90px !important;
    }

    /* Company address text */
    .a4-landscape td[style*="text-align: right"],
    .a4-portrait td[style*="text-align: right"] {
        font-size: 0.65rem;
        line-height: 1.3;
    }

    .a4-landscape h4,
    .a4-portrait h4 {
        font-size: 1rem !important;
    }

    /* Receipt thumbnails */
    .receipt-thumb,
    .upload-preview {
        width: 30px !important;
        height: 30px !important;
    }

    /* Action buttons below document */
    .a4-landscape + .mt-3,
    .text-center.no-print .btn {
        font-size: 0.82rem;
        padding: 8px 14px;
    }
}

/* --- Leave Request Page Specifics --- */
@media (max-width: 767px) {
    /* Leave type selector grid */
    .leave-type-label {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .leave-type-label i {
        font-size: 1.2em;
        margin-bottom: 4px;
    }

    /* Leave stat cards */
    .leave-stat-card {
        padding: 8px 10px;
        margin-bottom: 6px;
    }

    .leave-stat-value {
        font-size: 1.1em;
    }

    .leave-stat-label {
        font-size: 0.7em;
    }

    /* Signature area in leave doc */
    .a4-portrait .row .col-4,
    .a4-portrait .row .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
}

/* --- Modals --- */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 16px);
    }

    .modal-body {
        padding: 14px;
    }

    .modal-header {
        padding: 12px 14px;
    }

    .modal-footer {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .modal-footer .btn {
        flex: 1;
        min-width: 0;
        font-size: 0.85rem;
    }

    .modal-title {
        font-size: 1rem;
    }

    /* OT Modals */
    .ot-modal .modal-body {
        padding: 14px;
    }

    .ot-info-card {
        padding: 10px 12px;
        margin-bottom: 10px;
    }

    .ot-info-card .ot-info-label {
        font-size: 0.7rem;
    }

    .ot-info-card .ot-info-value {
        font-size: 0.9rem;
    }

    .ot-employee-row {
        gap: 8px;
        padding: 6px 0;
    }

    .ot-employee-avatar,
    .ot-employee-avatar-placeholder {
        width: 32px;
        height: 32px;
    }

    .ot-employee-name {
        font-size: 0.85rem;
    }

    .ot-employee-sub {
        font-size: 0.72rem;
    }

    .ot-hours-display {
        padding: 8px;
    }

    .ot-hours-display input,
    .ot-hours-display .ot-hours-value {
        font-size: 1.1rem;
    }

    .ot-time-pair {
        flex-direction: column;
        gap: 8px;
    }

    .ot-menu-btn {
        padding: 10px 14px;
        font-size: 0.88rem;
    }

    .ot-action-row {
        flex-direction: column;
    }

    .ot-action-row .btn {
        width: 100%;
    }

    .ot-duration-selector .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .ot-duration-selector .btn-group .btn {
        margin: 2px 0;
        width: 100%;
    }
}

/* --- Calendar (FullCalendar) --- */
@media (max-width: 767px) {
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 8px;
    }

    .fc .fc-toolbar-title {
        font-size: 1.1em !important;
    }

    .fc .fc-button {
        padding: 4px 8px !important;
        font-size: 0.78rem !important;
    }

    .fc .fc-daygrid-day-number {
        font-size: 0.8rem;
        padding: 2px 4px;
    }

    .fc .fc-event {
        font-size: 0.65rem !important;
        padding: 1px 2px;
        /* WCAG 2.2 (2.5.8) กำหนดพื้นที่กดอย่างน้อย 24x24px — เดิมสูง 22px */
        min-height: 24px;
        display: flex;
        align-items: center;
    }

    .fc .fc-event-main {
        padding: 1px 2px;
        /* พ่อเป็น flex แล้ว ต้องยืดเต็มและยอมหุบ ไม่งั้นข้อความไม่ตัดตามช่อง */
        flex: 1;
        min-width: 0;
    }

    .fc .fc-col-header-cell-cushion {
        font-size: 0.75rem;
        padding: 4px 2px;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 50px !important;
    }

    /* Clock widget */
    .clock-widget {
        padding: 12px;
    }

    .clock-time {
        font-size: 1.8rem;
    }
}

/* --- Forms --- */
@media (max-width: 767px) {
    .form-control {
        font-size: 14px;
        min-height: 42px;
        padding: 8px 10px;
    }

    .form-control-sm {
        min-height: 34px;
        font-size: 13px;
    }

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

    .form-row {
        gap: 0;
    }

    .custom-control-label {
        font-size: 0.88rem;
    }

}

/* --- Select dropdowns on touch devices ---
   Bootstrap 4 gives .form-control a fixed `height`, and iOS Safari draws
   <select> using its own control metrics on top of that, so the selected
   option text ends up vertically clipped by the field border. `height: auto`
   hands the height back to padding + line-height, which is what actually
   clears the clipping.
   This rule used to live inside `max-width: 767px`, so it never reached an
   iPad (which reports 768-1024px). The pointer test catches any touch device
   at any width, while leaving desktop browsers untouched. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    select.form-control {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: auto;
        min-height: 42px;
        line-height: 1.5;
        padding: 8px 34px 8px 12px;
        text-overflow: ellipsis;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 12px;
    }
}

/* --- Buttons: Larger Touch Targets --- */
@media (max-width: 767px) {
    .btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        min-height: 38px;
    }

    .btn-sm {
        padding: 5px 10px;
        font-size: 0.78rem;
        min-height: 32px;
    }

    .btn-group .btn {
        min-height: 36px;
    }

    /* Floating action style for important actions */
    .btn-block-mobile {
        display: block !important;
        width: 100% !important;
    }
}

/* --- Cards General --- */
@media (max-width: 767px) {
    .card {
        border-radius: 10px;
    }

    .card-header {
        padding: 8px 12px;
    }

    .card-body {
        padding: 10px 12px;
    }

    .card-header h5 {
        font-size: 0.9rem;
    }
}

/* --- Login Page --- */
@media (max-width: 767px) {
    .login-container {
        padding: 24px 20px;
        margin: 16px;
        max-width: calc(100% - 32px);
    }

    .login-page .logo {
        max-width: 120px;
    }

    .login-links {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* --- Registration Page --- */
@media (max-width: 767px) {
    .registration-container {
        margin: 16px auto;
    }

    .registration-header {
        padding: 16px;
    }

    .registration-header h2 {
        font-size: 1.2rem;
    }

    .registration-body {
        padding: 16px;
    }

    .profile-preview-wrapper {
        width: 100px;
        height: 100px;
    }

    .subordinate-item {
        padding: 12px;
        margin-bottom: 12px;
    }
}

/* --- Financial / Admin Pages --- */
@media (max-width: 767px) {
    /* Tabs */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .nav-tabs .nav-link {
        font-size: 0.8rem;
        padding: 8px 12px;
        white-space: nowrap;
    }

    /* Financial section cards */
    .table-container {
        border-radius: 10px;
        overflow-x: auto;
    }
}

/* --- Manage Users / Projects Tables --- */
@media (max-width: 767px) {
    .table th,
    .table td {
        white-space: nowrap;
    }

    /* Profile images in tables */
    .table img.rounded-circle {
        width: 30px !important;
        height: 30px !important;
    }

    /* User list actions */
    .ui-list-item {
        flex-wrap: wrap;
        gap: 6px;
    }

    .ui-list-actions {
        margin-left: 0 !important;
        width: 100%;
        justify-content: flex-end;
    }
}

/* --- Image Preview Modal --- */
@media (max-width: 767px) {
    #imagePreviewModal .modal-dialog {
        margin: 4px;
        max-width: 100%;
    }

    #imagePreviewModal img {
        max-height: 70vh;
    }

    #dualImageView .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }
}

/* --- Holiday Announcement Modal --- */
@media (max-width: 767px) {
    #modalHolidayAnnouncement .a4-paper {
        width: 100%;
        padding: 16px;
    }

    #modalHolidayAnnouncement .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #modalHolidayAnnouncement .col-6[style*="border-right"] {
        border-right: none !important;
        border-bottom: 2px solid #003366;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .doc-header {
        flex-direction: column;
        gap: 8px;
    }

    .doc-logo {
        height: 40px;
    }

    .doc-address {
        text-align: left !important;
    }

    .doc-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .doc-footer {
        width: 100%;
        padding-right: 0;
        text-align: center;
    }
}

/* --- DC Overtime Page --- */
@media (max-width: 767px) {
    .dc-employee-grid {
        grid-template-columns: 1fr !important;
    }

    /* Work duration radio buttons - stack vertically */
    .ot-duration-selector .d-flex {
        flex-direction: column !important;
        gap: 6px;
    }

    /* Batch complete table - smaller text */
    #batch_complete_list td,
    #batch_complete_list input {
        font-size: 0.8rem;
    }
}

/* --- Badges --- */
@media (max-width: 767px) {
    .badge {
        font-size: 0.7rem;
        padding: 3px 6px;
    }

    .ot-badge {
        font-size: 0.72rem;
        padding: 3px 8px;
    }

    .ot-type-badge {
        font-size: 0.68rem;
        padding: 2px 6px;
    }
}

/* --- Scrollbar on mobile (thinner) --- */
@media (max-width: 767px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* --- Photo Upload Areas --- */
@media (max-width: 767px) {
    .ot-photo-upload {
        padding: 14px;
    }

    .ot-photo-upload .ot-upload-icon {
        font-size: 1.5rem;
    }

    .ot-photo-upload .ot-upload-text {
        font-size: 0.8rem;
    }

    .ot-photo-preview {
        max-height: 150px;
    }
}

/* --- Salary Management --- */
@media (max-width: 767px) {
    .salary-card,
    .benefit-card {
        margin-bottom: 10px;
    }
}

/* --- Universal Form Row Fix (my_profile, edit_user, register) --- */
@media (max-width: 767px) {
    .form-row[style*="display: flex"] {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .form-row[style*="display: flex"] > .form-group {
        flex: none !important;
        width: 100% !important;
    }

    /* Document photo upload rows */
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 15px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

/* --- My Profile --- */
@media (max-width: 767px) {
    .profile-upload-container .profile-preview-wrapper {
        width: 100px;
        height: 100px;
    }

    /* Form rows stack vertically */
    .profile-form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Profile photo section stack */
    .profile-photo-row {
        flex-direction: column !important;
        text-align: center;
        gap: 12px !important;
    }

    /* Button row */
    .profile-btn-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .profile-btn-row .btn {
        flex: none !important;
        width: 100%;
    }

    /* Profile card body less padding on mobile */
    .card-body[style*="padding: 40px"] {
        padding: 20px 16px !important;
    }

    /* Profile header */
    .card-header[style*="padding: 25px"] {
        padding: 16px !important;
    }

    .card-header[style*="padding: 25px"] h2 {
        font-size: 1.15rem;
    }

    .card-header[style*="padding: 25px"] .d-flex,
    .card-header[style*="padding: 25px"] div[style*="display: flex"] {
        flex-direction: column !important;
        text-align: center;
        gap: 8px !important;
    }

    /* Education cards */
    .col-md-6.mb-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- Utility Classes --- */
@media (max-width: 767px) {
    .d-mobile-none {
        display: none !important;
    }

    .d-mobile-block {
        display: block !important;
    }

    .d-mobile-flex {
        display: flex !important;
    }

    .w-mobile-100 {
        width: 100% !important;
    }

    .text-mobile-center {
        text-align: center !important;
    }

    .mb-mobile-2 {
        margin-bottom: 0.5rem !important;
    }

    .p-mobile-2 {
        padding: 0.5rem !important;
    }

    /* Stack flex items vertically on mobile */
    .flex-mobile-column {
        flex-direction: column !important;
    }

    .gap-mobile-sm {
        gap: 6px !important;
    }
}

/* --- Leave Management (Admin) --- */
@media (max-width: 767px) {
    .leave-management-card {
        margin-bottom: 10px;
    }
}

/* --- Leave Management --- */
@media (max-width: 767px) {
    .lm-sidebar {
        margin-bottom: 16px;
    }

    .lm-sidebar .list-group {
        flex-direction: row !important;
        overflow-x: auto;
    }

    .lm-sidebar .list-group-item {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}

/* --- Edit User Page --- */
@media (max-width: 767px) {
    .card-body[style*="padding: 40px"] {
        padding: 20px 16px !important;
    }

    .card-header[style*="padding: 25px"] {
        padding: 16px !important;
    }
}

/* --- LINE Messaging Admin --- */
@media (max-width: 767px) {
    .line-messaging-page .card {
        margin-bottom: 10px;
    }
}

/* --- Public Document Templates (LINE links) --- */
@media (max-width: 576px) {
    /* Label column in detail tables */
    .detail-table .label-col {
        width: auto !important;
        white-space: normal !important;
        display: block;
        font-size: 0.8rem;
    }

    .detail-table td {
        display: block;
        padding: 2px 10px;
    }

    /* Signature area - stack on mobile */
    .row.text-center .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 16px;
    }

    /* Company header table */
    .a4-portrait table td[style*="width: 140px"] {
        width: 80px !important;
    }

    .a4-portrait table td[style*="width: 140px"] img {
        width: 70px !important;
    }

    .a4-portrait table td[style*="text-align: right"] {
        font-size: 0.7rem;
    }

    /* Petty cash view - landscape turns portrait */
    .a4-landscape {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        min-height: auto !important;
    }

    /* Header bar in public pages */
    .header-bar {
        padding: 12px 14px;
    }

    .header-bar img {
        height: 28px !important;
    }
}

/* ============================================================
   ขั้นต่ำของ "กดง่าย" และ "อ่านออก" บนมือถือ
   วางไว้ท้ายไฟล์เพื่อทับค่าที่เล็กเกินไปในหมวดข้างบน
   อ้างอิง: เป้าหมายการกดควรใหญ่อย่างน้อย 40x40px และตัวอักษรอย่างน้อย 12px
   ============================================================ */
@media (max-width: 767px) {
    /* --- เป้าหมายการกด --- */
    .btn {
        min-height: 44px;
        min-width: 40px;
    }

    .btn-sm {
        min-height: 40px;
        padding: 7px 12px;
        font-size: 0.8rem;
    }

    .btn-group .btn,
    .fc .fc-button {
        min-height: 40px;
    }

    /* ปุ่ม/ลิงก์เฉพาะของระบบที่ยังเล็กกว่าเกณฑ์
       ต้องมี display: inline-block ด้วย เพราะ min-height ไม่มีผลกับ
       element ที่เป็น display: inline ตามค่าเริ่มต้นของ <a> */
    .dash-range-btn,
    .fin-nav-caret,
    .pm-btn-new,
    .pm-open,
    .btn-back,
    a.back,
    .fc-btn {
        display: inline-block;
        min-height: 40px;
        min-width: 40px;
    }

    /* ลิงก์ที่ยืนเดี่ยว ๆ ไม่ได้แทรกกลางประโยค — ขยายพื้นที่กดด้วย padding
       แทนการตั้งความสูง เพื่อไม่ให้ระยะบรรทัดของข้อความรอบข้างเพี้ยน */
    .login-links a,
    .whd-overall-hint {
        display: inline-block;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    /* ไอคอนเครื่องหมายคำถามที่กดได้ เล็กเพียง 12px */
    [role="button"] > i.fas.fa-question-circle,
    i.fas.fa-question-circle[role="button"] {
        padding: 6px;
    }

    /* ลิงก์เดี่ยวในช่องตารางและในแถวการ์ด สูงราว 21px ตามความสูงบรรทัด
       เติม padding บาง ๆ ให้ข้ามเกณฑ์ AA 24px โดยแถวไม่ยืดจนเสียทรง */
    td > a,
    .wh-top-name > a {
        display: inline-block;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    /* ป้ายของช่องติ๊กคือพื้นที่ที่ผู้ใช้กดจริง เดิมสูงเพียง 18px */
    .form-check-label {
        display: inline-block;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* ตัวเลือกแบบ dropdown ที่ไม่ได้ใส่ .form-control */
    select,
    .custom-select {
        min-height: 40px;
    }

    /* รายการที่กดได้ในลิสต์ */
    .list-group-item-action {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* --- ขนาดตัวอักษรขั้นต่ำ --- */
    small,
    .small,
    .badge,
    .ot-badge,
    .ot-type-badge,
    .leave-type-badge,
    .leave-stat-label,
    .sc-late-chip,
    .sc-rate-label,
    .live-pill,
    .lbl,
    .ot-close-sub,
    .table th,
    .modern-table th,
    .ot-table thead th {
        font-size: 12px;
    }

    /* ชุดนี้ถูก selector ของแต่ละหน้าที่เจาะจงกว่าทับอยู่ (เช่น `.sum-card .sc-late-chip`
       ซึ่งมี specificity สูงกว่าและประกาศทีหลังใน <style> ของหน้า) จึงต้องบังคับ
       เฉพาะรายการที่วัดแล้วยังต่ำกว่า 12px จริง ไม่เหมารวมทั้งไฟล์ */
    .sc-late-chip,
    .sc-rate-label,
    .live-pill,
    .lbl,
    .pm-code,
    .chat-time,
    .sal-sidebar-sub,
    .whd-ind-w,
    .whd-overall-hint,
    .bar-label,
    .fc-tpl-meta,
    .fc-tpl-badge {
        font-size: 12px !important;
    }

    /* ชิป "สาย" ในการ์ดสรุปกดได้จริง (role="button") แต่สูงแค่ 19px
       ยกให้ถึงเกณฑ์ WCAG AA (24px) โดยยังคงทรงกลมกะทัดรัดไว้ */
    .sc-late-chip {
        min-height: 24px !important;
        padding: 2px 8px !important;
    }

    /* ยกเว้นมุมมองเอกสาร A4 และปฏิทิน ที่ต้องคงสัดส่วนของกระดาษ/ช่องวันไว้ */
    .a4-portrait small,
    .a4-landscape small,
    .a4-paper small,
    .a4-portrait .badge,
    .a4-landscape .badge,
    .a4-portrait .table th,
    .a4-landscape .table th,
    .fc .fc-event,
    .fc .fc-event * {
        font-size: inherit;
    }
}

/* --- Print overrides (prevent mobile styles on print) --- */
@media print {
    .a4-landscape,
    .a4-portrait,
    .a4-paper {
        width: auto !important;
        max-width: none !important;
        padding: 20mm !important;
        font-size: 0.9rem !important;
        box-shadow: none !important;
        border: none !important;
    }
}