/* ==========================================================================
   Global 13-Inch Laptop Optimization (1280px - 1440px)
   Smart Density & Readability Enhancements for the Entire System
   ========================================================================== */

@media screen and (max-width: 1440px) {

    /* ----------------------------------------------------
       1. Base Typography & Hierarchy
       ---------------------------------------------------- */
    /* Page title hierarchy - Must be the most obvious element */
    h1,
    .account-page-title,
    .transaction-title,
    .datacapture-title,
    .page-title {
        font-size: 30px !important;
        margin-bottom: 0px !important;
    }

    /* Container / Margins - 保留左侧 sidebar 的空间 */
    .container,
    .transaction-container {
        padding-right: clamp(16px, 2.5vw, 40px) !important;
    }

    /* ----------------------------------------------------
       2. Controls & Interactions (Buttons, Inputs, Checkboxes)
       ---------------------------------------------------- */
    /* Make them easy to click and identify */
    .btn,
    .btn-add,
    .btn-delete,
    .btn-save,
    .btn-cancel,
    .btn-secondary,
    .btn-account-control,
    .btn-clearall,
    .account-btn,
    .transaction-submit-btn,
    .transaction-search-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
        height: auto !important;
    }

    .account-company-btn,
    .transaction-company-btn,
    .process-company-btn,
    .maintenance-company-btn,
    .datacapture-company-btn,
    .member-company-btn,
    .contract-company-btn,
    .ownership-company-btn {
        font-size: 13px !important;
        padding: 6px 14px !important;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .search-input,
    .account-search-input,
    .transaction-input,
    .transaction-select,
    .custom-select-button {
        font-size: 11px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .search-input,
    .account-search-input,
    #searchInput {
        padding-left: 32px !important;
        /* Prevent text from overlapping the magnifying glass icon */
        width: 100% !important;
        /* Ensure enough width for "Search by Account or Name" */
        max-width: 250px !important;
    }

    /* Checkboxes and Labels */
    label,
    .account-checkbox-section label,
    .checkbox-section label,
    .transaction-label {
        font-size: 14px !important;
    }

    input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
    }

    /* ----------------------------------------------------
       3. Table Headers (Div-based & native tables)
       ---------------------------------------------------- */
    .table-header,
    .account-table-header,
    .transaction-table-header,
    .contract-table-header,
    .datacapture-table-header,
    .member-table-header {
        font-size: 14px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .table-header .header-item,
    .account-table-header .header-item,
    .card-item,
    .account-card-item,
    .contract-card-item,
    .member-card-item {
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* For native tables th */
    table th,
    .transaction-table th,
    .datacapture-table th {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }

    /* ----------------------------------------------------
       4. Table Rows & Data (Smart Density)
       ---------------------------------------------------- */
    /* Div-based Rows (Cards) */
    .user-card,
    .account-card,
    .contract-card,
    .member-card {
        padding: 10px 22px !important;
        min-height: 20px !important;
    }

    .card-item,
    .account-card-item,
    .contract-card-item,
    .member-card-item {
        font-size: 14px !important;
        line-height: 1.5 !important;
        letter-spacing: 0.015em !important;
    }

    /* Native Table Rows */
    .transaction-table td,
    .datacapture-table td,
    table td {
        font-size: 14px !important;
        padding: 10px 14px !important;
        line-height: 1.5 !important;
    }

    /* SPECIFIC FIX: Bank Process List (15 columns) MUST be ultra-dense */
    .process-page.process-page--bank .bank-data-table th {
        font-size: 11px !important;
        padding: 4px 4px !important;
    }

    .process-page.process-page--bank .bank-data-table td {
        font-size: 11px !important;
        padding: 2px 4px !important;
        line-height: 1.15 !important;
    }

    /* Stop Bank badges from overflowing horizontally due to global constraints */
    .process-page.process-page--bank .bank-data-table .contract-badge,
    .process-page.process-page--bank .bank-data-table .status-badge {
        font-size: 9px !important;
        padding: 2px 4px !important;
        min-width: 0 !important;
        white-space: normal !important;
        text-align: center;
        line-height: 1.1 !important;
    }

    .transaction-table-row {
        min-height: 52px !important;
    }

    /* ----------------------------------------------------
       5. Status & Role Badges (Visual Cues)
       ---------------------------------------------------- */
    .role-badge,
    .account-role-badge,
    .contract-badge,
    .status-badge,
    .member-badge,
    span.account-role-badge {
        font-size: 10px !important;
        /* Set slightly smaller but perfectly legible, overriding the user's 9px edit */
        padding: 4px 10px !important;
        width: auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
    }

    /* ----------------------------------------------------
       6. Edit Action Buttons Sizing
       ---------------------------------------------------- */
    .btn-edit svg,
    .btn-edit img,
    .account-edit-btn svg,
    .account-edit-btn img,
    .contract-edit-btn svg,
    .contract-edit-btn img,
    .member-edit-btn svg,
    .member-edit-btn img {
        width: 18px !important;
        height: 18px !important;
    }

    /* ----------------------------------------------------
       7. Account Grid Synchronization
       ---------------------------------------------------- */
    .account-table-header,
    .account-card {
        grid-template-columns: 0.5fr 1.4fr 1.4fr 0.8fr 0.6fr 0.8fr 2fr 1.2fr 0.45fr !important;
    }

    .table-header,
    .user-card {
        grid-template-columns: 0.5fr 1.6fr 1.8fr 2.5fr 1.8fr 1.2fr 1.8fr 1.5fr 0.8fr !important;
    }

    /* ----------------------------------------------------
       8. Bank Process List Action Bar: Force single-row (override global label/checkbox/search sizes)
       Bank 有 5 个 checkbox，label 14px + checkbox 16px + search 250px 导致换行
       必须用 !important 覆盖上方的全局 !important 规则（高特异性选择器取胜）
       ---------------------------------------------------- */

    /* 全局 h1/page-title { margin-bottom: 20px !important } 会覆盖 h1 的 inline margin:0
       在 Bank 页面 h1 下方偷偷多占 20px，必须归零 */
    .process-page.process-page--bank .page-title {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .process-page.process-page--bank .action-controls-row {
        flex-wrap: nowrap !important;
        gap: clamp(4px, 0.45vw, 8px) !important;
    }

    .process-page.process-page--bank .action-controls-row .checkbox-section {
        gap: 3px !important;
        flex-shrink: 0 !important;
    }

    .process-page.process-page--bank .action-controls-row .checkbox-section label {
        font-size: clamp(9px, 0.58vw, 11px) !important;
        white-space: nowrap !important;
    }

    .process-page.process-page--bank .action-controls-row .checkbox-section input[type="checkbox"] {
        width: clamp(11px, 0.73vw, 13px) !important;
        height: clamp(11px, 0.73vw, 13px) !important;
        flex-shrink: 0 !important;
    }

    /* Search 框：覆盖全局 max-width: 250px，给 checkbox 腾出空间 */
    .process-page.process-page--bank #searchInput,
    .process-page.process-page--bank .action-controls-row .search-input {
        width: clamp(100px, 7.5vw, 150px) !important;
        max-width: clamp(100px, 7.5vw, 150px) !important;
    }

    /* Add Process 按钮在 Bank 紧凑一点 */
    .process-page.process-page--bank .action-controls-row .btn-add {
        width: clamp(80px, 6vw, 110px) !important;
        padding: 6px 10px !important;
    }
}

/* ==========================================================================
   Global Hover UI Polish (Applies to all screens for better UX)
   - Improves eye-tracking and highlights the specific row clearly.
   ========================================================================== */
.user-card:hover,
.account-card:hover,
.contract-card:hover,
.member-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
    background-color: #ebf5ff !important;
    border-radius: 4px;
    z-index: 5;
    position: relative;
}

/* For native table rows */
.transaction-table tbody tr:hover td,
.datacapture-table tbody tr:hover td {
    background-color: #ebf5ff !important;
    transition: background-color 0.15s ease;
}

/* ==========================================================================
   Global SaaS "Premium Feel" Upgrades
   ========================================================================== */

/* 1. Global Custom Scrollbars (Sleek MacOS style for Windows) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.7);
}

/* 2. Modal/Dialog Smart Overflow for 13-inch Screens */
@media screen and (max-height: 800px) {

    .modal-content,
    .transaction-modal-content,
    .notification-popup {
        max-height: 100% !important;
        display: flex;
        flex-direction: column;
    }

    /*.modal-body,
    .transaction-modal-body,
    .form-container {
        padding-bottom: 90px !important;
    }
}

/* 3. Interactive Polish (Micro-animations) */
    /* Checkbox snap animation */
    input[type="checkbox"] {
        cursor: pointer;
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    }

    input[type="checkbox"]:active {
        transform: scale(0.85);
    }

    /* Buttons click effect */
    .btn:active,
    .transaction-search-btn:active,
    .transaction-submit-btn:active,
    button:not(.fc-button):active {
        transform: translateY(1px) scale(0.98) !important;
        transition: all 0.1s;
    }

    /* Better glowing focus ring for inputs */
    input:focus,
    select:focus,
    textarea:focus,
    .search-input:focus {
        box-shadow: 0 0 0 3px rgba(15, 97, 255, 0.15) !important;
        border-color: #0F61FF !important;
        transition: all 0.2s ease-in-out;
    }

    /* Smooth HTML scroll */
    html {
        scroll-behavior: smooth;
    }

    /* ==========================================================================
   Global "WOW Factor" Final Polish
   ========================================================================== */

    /* 4. SPA-like Entrance Animation (Makes PHP page loads feel modern) */
    @keyframes premiumEntrance {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

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

    .container,
    .transaction-container,
    .modal-content,
    .datacapture-container {
        animation: premiumEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* 5. Custom Brand Text Selection */
    ::selection {
        background-color: rgba(15, 97, 255, 0.25) !important;
        color: #001f3f !important;
        text-shadow: none !important;
    }

    /* 6. Glowing Action Buttons on Hover */
    .btn-save:hover,
    .btn-add:hover,
    .transaction-submit-btn:hover {
        box-shadow: 0 0 15px rgba(15, 97, 255, 0.4) !important;
        -webkit-filter: brightness(1.05);
        filter: brightness(1.05);
    }

    .btn-delete:hover {
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.3) !important;
        -webkit-filter: brightness(1.05);
        filter: brightness(1.05);
    }

    /* 7. Chrome Autofill Premium Override (Removes the ugly yellow background) */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px white inset !important;
        -webkit-text-fill-color: #333 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    /* 8. Table Headers Sticky Drop-Shadow for 13-inch scrolling */
    .table-header,
    .account-table-header,
    .datacapture-table-header {
        position: sticky !important;
        top: 0;
        z-index: 10;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    }

    /* 9. Smart Text Truncation for Responsive Data Rows */
    /* Prevents long unspaced text (like emails or hashes) from blowing out the table width */
    td,
    .card-item,
    .account-card-item,
    .contract-card-item,
    .member-card-item {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* 10. Forms / Textareas Max-Height Constraints */
    textarea {
        max-height: 120px !important;
    }

    /* ==========================================================================
   Global Layout Unlock (Destroy nested scrolls, use Native Window Scroll)
   ========================================================================== */
    /* 1. Unlock the main bounding containers so they stretch infinitely downwards */
    html,
    body.user-page,
    body.account-page,
    body.transaction-page,
    body.datacapture-page,
    body.dashboard-page,
    body {
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }

    .container,
    .content,
    .transaction-container,
    .datacapture-container,
    .dashboard-container {
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 20px !important;
        /* Absolute guarantee we never cut off the bottom element */
    }

    /* 2. Remove all internal scrolling constraints on table wrappers (No vertical nested scrollbars) */
    .table-container,
    .account-cards,
    .process-cards,
    .process-table-wrapper,
    .dashboard-content,
    .transaction-main-content,
    .transaction-table-wrapper,
    .datacapture-table-wrapper {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        /* This forces the data to completely render out, triggering the global browser scrollbar */
    }

    /* 3. Ensure the aesthetic background doesn't tear or tile awkwardly when scrolling a long page natively */
    body {
        background-attachment: fixed !important;
        background-size: cover !important;
    }

}

/* ==========================================================================
   Chips with Overflow Component Styles
   Global — applies to ALL screen sizes (no media query)
   ========================================================================== */
.chip-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.chip,
.chip-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 12px;
    font-family: inherit;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 0;
}

.chip {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.chip-more {
    background-color: #e0f2fe;
    border: 1px solid transparent;
    color: #0284c7;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.chip-more:hover {
    background-color: #bae6fd;
    color: #0369a1;
}