/* ============================================================================
   PRODUCT MANAGEMENT CSS - OPTIMIZED & ORGANIZED
   ============================================================================
   
   File: product.css
   Purpose: Comprehensive styling for Product Management module
   Combined from: Table.cshtml, Add.cshtml, and related components
   
   STRUCTURE:
   =========
   1. BASE & RESET STYLES
      - Global resets, font definitions
      - CSS Variables (color scheme, spacing, shadows)
      - Body and root element styles
   
   2. COMPONENTS (Organized by feature)
      - Page Header & Navigation (breadcrumbs, titles, actions)
      - Statistics Cards
      - Search Sections (inline, quick search, modal)
      - Tables & Data Display
      - Forms & Input Fields
      - Buttons & Actions
      - Modals & Dialogs
      - Mobile Card Views
      - Customer Info Components
      - Product Info Components
      - Badges & Status Indicators
   
   3. UTILITIES & HELPERS
      - Animation keyframes
      - Loading states
      - Notifications
      - Overlays
   
   4. RESPONSIVE DESIGN (Media Queries)
      - Mobile (< 768px)
      - Tablet (769px - 1024px)
      - Desktop (> 1024px)
   
   OPTIMIZATION NOTES:
   ===================
   - All styles grouped by component for easy maintenance
   - Media queries consolidated at the end for better performance
   - CSS Variables used for consistent theming
   - Selectors optimized for specificity and performance
   - Duplicate rules removed where possible
   
   MAINTENANCE:
   ============
   - When adding new styles, place them in the appropriate component section
   - Media queries should be added to the Responsive Design section at the end
   - Use CSS variables for colors and spacing
   - Follow the existing naming conventions
   
   ============================================================================ */

/* ============================================================================
   1. BASE & RESET STYLES
   ============================================================================ */

/* Base Styles */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Font Awesome Icons - Ensure proper display */
.fas,
.fa,
i[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    speak: none;
    line-height: 1;
    vertical-align: middle;
}

/* CSS Variables - Design System */
:root {
    --primary-blue: #244B94;
    --primary-orange: #F26017;
    --primary-green: #059669;
    --dark-gray: #1F2937;
    --medium-gray: #374151;
    --light-gray: #6B7280;
    --lighter-gray: #9CA3AF;
    --bg-light: #F3F4F6;
    --bg-lighter: #F9FAFB;
    --white: #FFFFFF;
    --border-color: #E5E7EB;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body {
    background: #F9FAFB;
    margin: 0;
}

/* ============================================================================
   2. COMPONENTS - PAGE HEADER & NAVIGATION
   ============================================================================ */
.page-header-modern {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    padding: 16px 24px;
    margin: -10px -10px 0px -10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 8px;
}

.breadcrumb-nav a {
    color: #244B94;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.breadcrumb-nav a:hover {
    color: #F26017;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: #9CA3AF;
}

.page-title-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 12px;
}

.page-title-content h2 {
    font-size: 24px;
    font-weight: 700;
    color: #244B94;
    margin: 0 0 4px 0;
}

.page-title-content p {
    font-size: 14px;
    color: #374151;
    margin: 0;
}

.page-actions {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 44px;
    line-height: 44px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.3px;
    min-width: 120px;
}

.action-btn i {
    margin-right: 6px;
    font-size: 16px;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Specific style for Font Awesome icons in action buttons */
.action-btn .fas,
.action-btn .fa,
.action-btn i[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    speak: none;
    text-rendering: auto;
}

/* Replace ok-icon with Font Awesome plus-circle icon for add button */
.action-btn-primary .ok-icon,
.action-btn[lay-event="add"] .ok-icon,
.layui-btn-primary .ok-icon,
.layui-btn[lay-event="add"] .ok-icon {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    position: relative;
}

/* Hide original ok-icon content and replace with Font Awesome icon */
.action-btn-primary .ok-icon,
.action-btn[lay-event="add"] .ok-icon,
.layui-btn-primary .ok-icon,
.layui-btn[lay-event="add"] .ok-icon {
    font-size: 0 !important;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

.action-btn-primary .ok-icon::after,
.action-btn[lay-event="add"] .ok-icon::after,
.layui-btn-primary .ok-icon::after,
.layui-btn[lay-event="add"] .ok-icon::after {
    content: "\f055" !important; /* fa-plus-circle icon */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.action-btn-primary {
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
}

.action-btn-primary:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.4);
    transform: translateY(-2px);
}

.action-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
}

.action-btn:not(.action-btn-primary) {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    color: #374151;
    border: 1.5px solid #E5E7EB;
}

.action-btn:not(.action-btn-primary):hover {
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-color: #D1D5DB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.action-btn:not(.action-btn-primary):active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Action button text wrapper for mobile hiding */
.action-btn-text {
    display: inline;
}

/* Reload button specific styles */
.action-btn-reload {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2) !important;
}

.action-btn-reload:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
    transform: translateY(-2px);
}

.action-btn-reload:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

.action-btn-reload i.fa-spin {
    animation: fa-spin 1s infinite linear;
}

/* Back Button - Professional Style (Add.cshtml) */
.back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    color: #244B94;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    min-width: 100px;
}

.back-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.6s ease;
}

.back-button:hover {
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-color: #244B94;
    color: #244B94;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.15);
    transform: translateY(-2px);
}

.back-button:hover::before {
    left: 100%;
}

.back-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.back-button i {
    font-size: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #244B94;
}

.back-button:hover i {
    transform: translateX(-3px);
    color: #244B94;
}

.back-button span {
    transition: color 0.3s ease;
    text-decoration: none !important;
}

.back-button:focus {
    outline: none;
    border-color: #244B94;
    text-decoration: none !important;
    box-shadow: 0 0 0 3px rgba(36, 75, 148, 0.12), 0 4px 12px rgba(0, 0, 0, 0.12);
}

.back-button:focus-visible {
    outline: 2px solid #244B94;
    outline-offset: 2px;
    text-decoration: none !important;
}

.back-button:visited {
    text-decoration: none !important;
    color: #244B94;
}

/* ============================================================================
   2. COMPONENTS - STATISTICS CARDS
   ============================================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.stat-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}

.stat-card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 22px;
}

.stat-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-blue {
    background: #E0E7FF;
    color: #244B94;
}

.stat-icon-green {
    background: #D1FAE5;
    color: #059669;
}

.stat-icon-yellow {
    background: #FED7AA;
    color: #F26017;
}

.stat-icon-red {
    background: #FEE2E2;
    color: #DC2626;
}

.stat-content p {
    margin: 0;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.stat-content h3 {
    margin: 4px 0 0 0;
    font-size: 24px;
    font-weight: 700;
    color: #244B94;
}

/* ============================================================================
   2. COMPONENTS - SEARCH SECTIONS
   ============================================================================ */
.search-section-modern {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.search-section-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #244B94 0%, #F26017 100%);
    opacity: 0.8;
}

.search-section-modern:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.1);
    border-color: #D1D5DB;
}

.search-title-modern {
    font-size: 18px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid #E5E7EB;
    position: relative;
}

.search-title-modern::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #244B94 0%, #244B94 100%);
}

.search-title-modern i {
    color: #244B94;
    font-size: 20px;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.15);
}

.ok-search {
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    width: 100%;
}

.ok-search .layui-input-inline {
    margin: 0;
    flex: 1;
    min-width: 200px;
}

.search-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.search-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.search-label i {
    font-size: 14px;
    color: #244B94;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    padding: 4px 6px;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.search-label:hover {
    color: #244B94;
}

.search-label:hover i {
    background: linear-gradient(135deg, #C7D2FE 0%, #A5B4FC 100%);
    transform: scale(1.1);
}

.input-icon-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.ok-search .layui-input {
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 14px;
    padding-right: 14px;
    height: 44px;
    line-height: 44px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    color: #1F2937;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ok-search .layui-input::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.ok-search .layui-input:hover {
    border-color: #D1D5DB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.ok-search .layui-input:focus {
    border-color: #244B94;
    box-shadow: 0 0 0 4px rgba(36, 75, 148, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1);
    outline: none;
    background: #FFFFFF;
    transform: translateY(-1px);
}

/* Select dropdown styling - Professional Design */
.ok-search select.layui-input,
.ok-search .search-select-modern {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23244B94' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 44px;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ok-search select.layui-input:hover,
.ok-search .search-select-modern:hover {
    border-color: #D1D5DB !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.ok-search select.layui-input:focus,
.ok-search .search-select-modern:focus {
    border-color: #244B94 !important;
    box-shadow: 0 0 0 4px rgba(36, 75, 148, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px);
}

/* Style select options */
.ok-search select.layui-input option,
.ok-search .search-select-modern option {
    padding: 10px 14px;
    font-size: 14px;
    color: #1F2937;
    background: #FFFFFF;
    font-weight: 400;
}

.ok-search select.layui-input option:hover,
.ok-search .search-select-modern option:hover {
    background: #F9FAFB;
}

.ok-search select.layui-input option:checked,
.ok-search .search-select-modern option:checked {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    color: #244B94;
    font-weight: 600;
}

/* Layui select wrapper styling */
.ok-search .layui-form-select {
    width: 100%;
    position: relative !important;
}

.ok-search .layui-form-select .layui-input {
    height: 44px;
    line-height: 44px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding-left: 14px;
    padding-right: 40px;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ok-search .layui-form-select:hover .layui-input {
    border-color: #D1D5DB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.ok-search .layui-form-select.layui-form-selected .layui-input,
.ok-search .layui-form-select:focus .layui-input {
    border-color: #244B94;
    box-shadow: 0 0 0 4px rgba(36, 75, 148, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ok-search .layui-form-select .layui-edge {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transform-origin: center center !important;
    margin-top: 0 !important;
    border-width: 6px !important;
    border-top-color: #244B94 !important;
    border-top-style: solid !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
    width: 0 !important;
    height: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

.ok-search .layui-form-select.layui-form-selected .layui-edge {
    transform: translateY(-50%) rotate(180deg) !important;
    transform-origin: center center !important;
    border-width: 6px !important;
    border-top-color: #244B94 !important;
    border-top-style: solid !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}

.ok-search .layui-form-select dl {
    border: 2px solid #244B94;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    overflow: hidden;
}

.ok-search .layui-form-select dl dd {
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.ok-search .layui-form-select dl dd:hover {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
}

.ok-search .layui-form-select dl dd.layui-this {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    color: #244B94;
    font-weight: 600;
}

.search-button-wrapper {
    display: flex;
    align-items: flex-end;
    margin-top: 0;
}

.ok-search .layui-btn {
    margin: 0;
    height: 44px;
    line-height: 44px;
    padding: 0 32px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    min-width: 120px;
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    border: none;
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}

.ok-search .layui-btn:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.4);
    transform: translateY(-2px);
}

.ok-search .layui-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
}

.ok-search .layui-btn i {
    margin-right: 6px;
    font-size: 16px;
}

.input-icon {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: #244B94;
    z-index: 1;
    font-size: 16px;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.input-icon-wrapper:hover .input-icon,
.input-icon-wrapper:focus-within .input-icon {
    opacity: 1;
}

/* ============================================================================
   2. COMPONENTS - QUICK SEARCH PANEL
   ============================================================================ */
.quick-search-panel {
    margin-bottom: 24px;
}

.quick-search-container {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.quick-search-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #244B94 0%, #F26017 100%);
    opacity: 0.8;
}

.quick-search-form {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.quick-search-field {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-search-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}

.quick-search-label i {
    font-size: 14px;
    color: #244B94;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    padding: 4px 6px;
    border-radius: 5px;
}

.quick-search-input {
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 14px;
    padding-right: 14px;
    height: 44px;
    line-height: 44px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    color: #1F2937;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.quick-search-input::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.quick-search-input:hover {
    border-color: #D1D5DB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.quick-search-input:focus {
    border-color: #244B94;
    box-shadow: 0 0 0 4px rgba(36, 75, 148, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.quick-search-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.quick-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.quick-search-btn i {
    font-size: 14px;
}

.quick-search-btn-primary {
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
}

.quick-search-btn-primary:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.4);
    transform: translateY(-2px);
}

.quick-search-btn-secondary {
    background: linear-gradient(135deg, #F26017 0%, #E04E0E 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(242, 96, 23, 0.3);
}

.quick-search-btn-secondary:hover {
    background: linear-gradient(135deg, #E04E0E 0%, #F26017 100%);
    box-shadow: 0 4px 12px rgba(242, 96, 23, 0.4);
    transform: translateY(-2px);
}

.quick-search-btn-reload {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
}

.quick-search-btn-reload:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
    transform: translateY(-2px);
}

.quick-search-btn-reload:hover i {
    animation: spin 0.6s linear;
}

.quick-search-btn-excel {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.quick-search-btn-excel:hover {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}

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

/* ============================================================================
   2. COMPONENTS - SEARCH MODAL
   ============================================================================ */
.search-button-container {
    margin-bottom: 24px;
    display: flex;
    justify-content: flex-end;
}

.search-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}

.search-modal-btn:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.4);
    transform: translateY(-2px);
}

.search-modal-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
}

.search-modal-btn i {
    font-size: 16px;
}

/* Modal Overlay */
.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

.search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.search-modal-container {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-modal-overlay.active .search-modal-container {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.search-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 2px solid #E5E7EB;
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
}

.search-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-modal-title i {
    font-size: 24px;
    color: #244B94;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.15);
}

.search-modal-title h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1F2937;
    letter-spacing: -0.01em;
}

.search-modal-close {
    background: #F3F4F6;
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6B7280;
}

.search-modal-close:hover {
    background: #E5E7EB;
    color: #374151;
    transform: rotate(90deg);
}

.search-modal-close i {
    font-size: 18px;
}

/* Modal Body */
.search-modal-body {
    padding: 0px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* Form container - Border radius */
.ok-search-modal {
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Form container padding */
.ok-search-modal .search-modal-grid {
    padding: 20px 20px 20px 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    width: 100%;
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
    .ok-search-modal .search-modal-grid {
        padding: 0 10px 0px 10px;
    }
}

@media (max-width: 768px) {
    .ok-search-modal .search-modal-grid {
        padding: 0 10px 10px 10px;
    }
}

/* Search Modal Header Section */
.search-modal-header-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 12px 12px 0 0;
    margin: 0px 0px 24px 0px;
    background: linear-gradient(135deg, #F0F4FF 0%, #E0E7FF 100%);
    border: 1px solid #E0E7FF;
    box-shadow: 0 2px 8px rgba(36, 75, 148, 0.08);
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
    .search-modal-header-section {
        padding: 16px 20px;
        margin: 20px 24px 20px 24px;
        gap: 14px;
    }
}

.search-modal-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.25);
    flex-shrink: 0;
}

.search-modal-header-icon i {
    font-size: 24px;
    color: #FFFFFF;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.search-modal-header-content {
    flex: 1;
}

.search-modal-header-title {
    margin: 0 0 6px 0;
    font-size: 19px;
    font-weight: 700;
    color: #1F2937;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.search-modal-header-description {
    margin: 0;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .search-modal-header-section {
        flex-direction: row;
        align-items: center;
        padding: 14px 12px;
        margin: 14px 12px 18px 12px;
        border-radius: 8px;
        gap: 12px;
    }
    
    .search-modal-header-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .search-modal-header-icon i {
        font-size: 18px;
    }
    
    .search-modal-header-content {
        flex: 1;
        min-width: 0;
    }
    
    .search-modal-header-title {
        font-size: 16px;
        margin-bottom: 3px;
        line-height: 1.2;
        text-align: left;
    }
    
    .search-modal-header-description {
        font-size: 11px;
        line-height: 1.4;
        text-align: left;
    }
}

/* Layui Layer - General border radius */
.layui-layer,
.layui-layer-page {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Search modal layer - ensure auto height */
.search-modal-layer .layui-layer-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 12px !important;
}

.search-modal-layer .layui-layer {
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    transform: translate(-50%, -50%) !important;
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
    .search-modal-layer .layui-layer {
        max-width: 90% !important;
        border-radius: 12px !important;
        top: 50% !important;
        left: 50% !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .search-modal-layer .layui-layer-content {
        border-radius: 12px !important;
    }
}

@media (max-width: 768px) {
    .search-modal-layer .layui-layer {
        width: 95% !important;
        max-height: 95vh !important;
        border-radius: 12px !important;
        top: 50% !important;
        left: 50% !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .search-modal-layer .layui-layer-content {
        border-radius: 12px !important;
        max-height: 95vh !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    .layui-layer,
    .layui-layer-page {
        border-radius: 12px !important;
    }
    
    .search-modal-layer .layui-layer-close {
        top: 10px !important;
        right: 10px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
}

.search-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 0;
    max-width: 100%;
    align-items: start;
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
    .search-modal-grid {
        gap: 18px;
    }
}

/* Responsive grid for search modal */
@media (max-width: 768px) {
    .search-modal-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .search-modal-grid .search-field-wrapper[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }
    
    .ok-search-modal .search-field-wrapper {
        gap: 8px;
    }
    
    .ok-search-modal .search-label {
        font-size: 11px;
        gap: 5px;
        margin-bottom: 0;
    }
    
    .ok-search-modal .search-label i,
    .ok-search-modal .search-label-icon {
        font-size: 12px !important;
        padding: 4px 6px !important;
        border-radius: 5px !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        display: inline-block !important;
    }
    
    .ok-search-modal .search-label {
        font-size: 12px;
        gap: 6px;
    }
    
    .search-modal-footer .fas,
    .search-modal-footer i {
        font-size: 13px !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        display: inline-block !important;
    }
    
    .search-modal-footer button {
        font-size: 12px;
        padding: 10px 14px;
    }
    
    .search-modal-footer button span {
        display: inline;
    }
    
    .ok-search-modal .layui-input {
        height: 38px;
        line-height: 38px;
        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 6px;
    }
    
    .ok-search-modal .layui-form-select .layui-input {
        height: 38px;
        line-height: 38px;
        padding-right: 32px;
        font-size: 13px;
    }
    
    .ok-search-modal select.layui-input,
    .ok-search-modal .search-select-modern {
        padding-right: 32px;
        background-size: 12px;
        background-position: right 10px center;
    }
}

/* Improve spacing in search modal */
.ok-search-modal .search-modal-grid .search-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ok-search-modal .search-modal-grid .input-icon-wrapper {
    width: 100%;
}

.ok-search-modal .search-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ok-search-modal .search-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.ok-search-modal .search-label i {
    font-size: 14px;
    color: #244B94;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    padding: 4px 6px;
    border-radius: 5px;
    transition: all 0.2s ease;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

/* Search Label Icons - Fixed display for Font Awesome */
.search-label-icon,
.search-section-modern .fas,
.search-section-modern .fa,
.search-modal-footer .fas,
.search-modal-footer .fa {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1 !important;
}

.search-label-icon {
    font-size: 14px !important;
    padding: 5px 7px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    width: auto !important;
    height: auto !important;
}

.search-label-icon-blue {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #244B94 0%, #1E3A8A 100%) !important;
}

.search-label-icon-green {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.search-label:hover .search-label-icon {
    transform: scale(1.05);
}

.ok-search-modal .search-label:hover {
    color: #244B94;
}

.ok-search-modal .search-label:hover i {
    background: linear-gradient(135deg, #C7D2FE 0%, #A5B4FC 100%);
    transform: scale(1.1);
}

.ok-search-modal .layui-input {
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 14px;
    padding-right: 14px;
    height: 44px;
    line-height: 44px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    color: #1F2937;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ok-search-modal .layui-input::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.ok-search-modal .layui-input:hover {
    border-color: #D1D5DB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.ok-search-modal .layui-input:focus {
    border-color: #244B94;
    box-shadow: 0 0 0 4px rgba(36, 75, 148, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1);
    outline: none;
    background: #FFFFFF;
    transform: translateY(-1px);
}

/* Select in modal */
.ok-search-modal select.layui-input,
.ok-search-modal .search-select-modern {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23244B94' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 44px;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Hide original select when Layui creates wrapper */
.ok-search-modal .input-icon-wrapper .layui-input-inline select.layui-input {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Ensure Layui wrapper takes full width in input-icon-wrapper */
.ok-search-modal .input-icon-wrapper .layui-form-select {
    width: 100% !important;
    position: relative !important;
}

.ok-search-modal .input-icon-wrapper .layui-form-select .layui-select-title {
    position: relative !important;
    width: 100% !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
}

.ok-search-modal .input-icon-wrapper .layui-input-inline {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

.ok-search-modal .layui-form-select {
    width: 100%;
    position: relative !important;
}

.ok-search-modal .layui-form-select .layui-input {
    height: 44px;
    line-height: 44px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding-left: 14px;
    padding-right: 40px;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ok-search-modal .layui-form-select:hover .layui-input {
    border-color: #D1D5DB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.ok-search-modal .layui-form-select.layui-form-selected .layui-input,
.ok-search-modal .layui-form-select:focus .layui-input {
    border-color: #244B94;
    box-shadow: 0 0 0 4px rgba(36, 75, 148, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ok-search-modal .layui-form-select dl {
    border: 2px solid #244B94;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    overflow: hidden;
}

.ok-search-modal .layui-form-select dl dd {
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.ok-search-modal .layui-form-select dl dd:hover {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
}

.ok-search-modal .layui-form-select dl dd.layui-this {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    color: #244B94;
    font-weight: 600;
}

.ok-search-modal .layui-form-select .layui-edge {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transform-origin: center center !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    border-width: 6px !important;
    border-top-color: #244B94 !important;
    border-top-style: solid !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
    z-index: 10 !important;
    width: 0 !important;
    height: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Ensure edge is visible in input-icon-wrapper context */
.ok-search-modal .input-icon-wrapper .layui-form-select .layui-edge {
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transform-origin: center center !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure edge positioning in select title */
.ok-search-modal .input-icon-wrapper .layui-form-select .layui-select-title {
    position: relative !important;
}

.ok-search-modal .input-icon-wrapper .layui-form-select .layui-select-title .layui-edge {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transform-origin: center center !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    border-width: 6px !important;
    box-sizing: border-box !important;
}

.ok-search-modal .layui-form-select.layui-form-selected .layui-edge {
    transform: translateY(-50%) rotate(180deg) !important;
    transform-origin: center center !important;
    right: 14px !important;
    border-width: 6px !important;
    border-top-color: #244B94 !important;
    border-top-style: solid !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}

.ok-search-modal .input-icon-wrapper .layui-form-select.layui-form-selected .layui-edge {
    transform: translateY(-50%) rotate(180deg) !important;
    transform-origin: center center !important;
    right: 14px !important;
    border-width: 6px !important;
    border-top-color: #244B94 !important;
    border-top-style: solid !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}

.ok-search-modal .input-icon-wrapper .layui-form-select.layui-form-selected .layui-select-title .layui-edge {
    transform: translateY(-50%) rotate(180deg) !important;
    transform-origin: center center !important;
    right: 14px !important;
}

/* Modal Footer */
.search-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    margin-top: auto;
    margin-bottom: 0;
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
    .search-modal-footer {
        padding: 20px 24px;
        gap: 10px;
    }
    
    .search-modal-btn-reset,
    .search-modal-btn-cancel,
    .search-modal-btn-submit {
        min-width: 100px;
        padding: 10px 16px;
    }
    
    .search-modal-btn-cancel {
        min-width: 85px;
    }
    
    .search-modal-btn-submit {
        min-width: 110px;
    }
}

@media (max-width: 768px) {
    .search-modal-body {
        max-height: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    
    .ok-search-modal {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        overflow: hidden !important;
    }
    
    .ok-search-modal .search-modal-grid {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .search-modal-footer {
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px;
        padding: 16px 12px;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        overflow-x: visible;
        flex-shrink: 0 !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .search-modal-footer button {
        width: auto;
        min-width: 44px;
        max-width: 44px;
        justify-content: center;
        padding: 10px;
        font-size: 0;
        border-radius: 8px;
        flex: 0 0 44px;
        flex-shrink: 0;
    }
    
    .search-modal-btn-reset,
    .search-modal-btn-cancel,
    .search-modal-btn-submit {
        min-height: 44px;
        height: 44px;
        width: 44px;
    }
    
    /* Hide text, show only icon */
    .search-modal-footer button span {
        display: none;
    }
    
    .search-modal-btn-reset i,
    .search-modal-btn-cancel i,
    .search-modal-btn-submit i,
    .search-modal-footer .fas,
    .search-modal-footer i {
        font-size: 16px !important;
        margin: 0 !important;
        display: inline-block !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-style: normal !important;
        font-variant: normal !important;
        text-rendering: auto !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        line-height: 1 !important;
    }
    
    /* Remove gap since no text */
    .search-modal-footer button {
        gap: 0;
    }
    
    /* Search label icons mobile */
    .ok-search-modal .search-label-icon {
        font-size: 12px !important;
        padding: 4px 6px !important;
        border-radius: 5px !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        display: inline-block !important;
    }
    
    .ok-search-modal .search-label {
        font-size: 12px;
        gap: 6px;
    }
}

/* Search Modal Footer Buttons - Base Styles */
.search-modal-btn-reset,
.search-modal-btn-cancel,
.search-modal-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    min-height: 42px;
    min-width: 110px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.search-modal-btn-reset i,
.search-modal-btn-cancel i,
.search-modal-btn-submit i,
.search-modal-btn-reset .fas,
.search-modal-btn-cancel .fas,
.search-modal-btn-submit .fas {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1 !important;
    font-size: 14px;
    margin: 0;
}

.search-modal-btn-reset {
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    color: #374151;
    border: 1.5px solid #D1D5DB;
}

.search-modal-btn-reset:hover {
    background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%);
    border-color: #9CA3AF;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-modal-btn-reset:hover i {
    animation: spin 0.6s linear;
}

.search-modal-btn-reset:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.search-modal-btn-cancel {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    color: #6B7280;
    border: 1.5px solid #E5E7EB;
    min-width: 90px;
}

.search-modal-btn-cancel:hover {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-color: #D1D5DB;
    color: #374151;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-modal-btn-cancel:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.search-modal-btn-submit {
    background: linear-gradient(135deg, #244B94 0%, #1E3A8A 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
    letter-spacing: 0.3px;
    min-width: 120px;
}

.search-modal-btn-submit:hover {
    background: linear-gradient(135deg, #1E3A8A 0%, #244B94 100%);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.4);
    transform: translateY(-2px);
}

.search-modal-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
}

/* ============================================================================
   2. COMPONENTS - TABLES & DATA DISPLAY
   ============================================================================ */
.table-section-modern {
    /* Table section styles - background and border commented out for flexibility */
    position: relative;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
}

.layui-table {
    width: 100% !important;
    min-width: 50px;
    table-layout: fixed;
    box-sizing: border-box;
}

.layui-table-view {
    width: 100% !important;
    box-sizing: border-box;
}

.layui-table-header {
    width: 100%;
    overflow: hidden;
}

.layui-table-body {
    width: 100%;
    overflow-x: auto;
}

.layui-table-cell {
    height: auto;
    line-height: 1.4;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.layui-table thead th {
    background: #F3F4F6;
    color: #244B94;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #244B94;
    padding: 12px 15px;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Table Header - Allow Text Wrapping */
.layui-table-header th,
.layui-table-header td {
    white-space: normal !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    padding: 12px 8px;
}

.layui-table-header th {
    vertical-align: middle;
    text-align: center;
}

/* Ensure table cells can wrap */
.layui-table th,
.layui-table td {
    white-space: normal !important;
    word-wrap: break-word;
    word-break: break-word;
}

/* Table column width synchronization - Additional styles */
.layui-table-header table,
.layui-table-body table {
    table-layout: fixed;
    width: 100%;
}

.layui-table-header colgroup col,
.layui-table-body colgroup col {
    width: auto;
}

/* Flexible column - takes remaining space */
/* Make flexible column (without width attribute) take remaining width */
.layui-table-header table colgroup col:not([width]),
.layui-table-body table colgroup col:not([width]) {
    width: auto;
    min-width: 500px;
}

/* Column with width='100%' - takes remaining space */
/* When Layui renders width='100%', it sets width="100%" on colgroup col */
.layui-table-header table colgroup col[width="100%"],
.layui-table-body table colgroup col[width="100%"] {
    width: auto !important;
    min-width: 500px;
}

/* Cells in 100% width column - ensure they expand */
.layui-table-header th[data-field="RealName"],
.layui-table-body td[data-field="RealName"] {
    width: 100%;
    min-width: 500px;
}

/* Support for Layui's generated class names */
.layui-table-header .laytable-cell-RealName,
.layui-table-body .laytable-cell-RealName {
    width: 100%;
    min-width: 500px;
}

/* Ensure consistent column widths */
.layui-table-header th,
.layui-table-body td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Allow wrapping for specific cells */
.layui-table-body td {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Ensure column widths are synchronized */
.layui-table-header table,
.layui-table-body table {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    box-sizing: border-box;
}

/* Synchronize header and body column widths */
.layui-table-header table colgroup,
.layui-table-body table colgroup {
    display: table-column-group;
}

.layui-table-header table colgroup col,
.layui-table-body table colgroup col {
    display: table-column;
}

/* Ensure header and body cells have same width and padding */
.layui-table-header table thead th,
.layui-table-body table tbody td {
    box-sizing: border-box;
    padding: 8px 12px;
}

/* Ensure header cells match body cell widths */
.layui-table-header .layui-table-cell {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
}

.layui-table-body .layui-table-cell {
    padding: 5px 0px;
    box-sizing: border-box;
    width: 100%;
}

/* Force column width synchronization - ensure both tables use same colgroup widths */
.layui-table-header table colgroup col[width],
.layui-table-body table colgroup col[width] {
    width: attr(width);
}

/* Additional synchronization for dynamic widths */
.layui-table-view {
    position: relative;
}

.layui-table-header {
    position: relative;
    overflow: hidden;
}

.layui-table-body {
    position: relative;
}

.layui-table tbody tr {
    transition: background-color 0.15s, box-shadow 0.15s;
    border-bottom: 1px solid #F3F4F6;
}

/* Zebra striping for better row differentiation */
.layui-table tbody tr:nth-child(even) {
    background-color: #FAFBFC;
}

.layui-table tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
}

.layui-table tbody tr:hover {
    background-color: #F0F4FF !important;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.08);
    transform: translateY(-1px);
}

.layui-table tbody td {
    border-bottom: 1px solid #F3F4F6;
}

/* ============================================================================
   2. COMPONENTS - MOBILE CARD VIEWS
   ============================================================================ */
.mobile-card-view {
    display: none;
}

.mobile-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 18px;
    margin: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mobile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #F26017 0%, #F26017 100%);
}

.mobile-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.mobile-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid #F3F4F6;
    gap: 12px;
}

.mobile-card-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    width: 100%;
}

.mobile-card-status {
    align-self: flex-start;
}

.mobile-card-stt {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 13px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    border-radius: 8px;
    flex-shrink: 0;
}

.mobile-card-title {
    font-weight: 700;
    font-size: 17px;
    color: #244B94;
    flex: 1;
    line-height: 1.4;
    margin: 0;
    text-align: left;
}

.mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F3F4F6;
    transition: background-color 0.2s;
}

.mobile-card-row:hover {
    background-color: #F9FAFB;
    margin: 0 -18px;
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 6px;
}

.mobile-card-row:last-of-type {
    border-bottom: none;
}

.mobile-card-label {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
    min-width: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-card-label::before {
    content: '';
    width: 3px;
    height: 3px;
    background: #244B94;
    border-radius: 50%;
    flex-shrink: 0;
}

.mobile-card-label i {
    font-size: 12px;
    color: #244B94;
    margin-right: 4px;
    opacity: 0.8;
}

/* Mobile Card Row Primary - Highlighted */
.mobile-card-row-primary {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-radius: 8px;
    padding: 14px 12px;
    margin: 0 -18px 12px -18px;
    padding-left: 18px;
    padding-right: 18px;
    border-bottom: none;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}

.mobile-card-value-primary {
    color: #244B94 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* Mobile Card Section */
.mobile-card-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F3F4F6;
}

.mobile-card-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mobile-card-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-card-section-title::before {
    content: '';
    width: 3px;
    height: 12px;
    background: linear-gradient(180deg, #244B94 0%, #F26017 100%);
    border-radius: 2px;
}

/* Mobile Card Value Phone */
.mobile-card-value-phone {
    color: #244B94 !important;
    font-weight: 600 !important;
}

/* Mobile Card Row Address */
.mobile-card-row-address {
    align-items: flex-start;
}

.mobile-card-value-address {
    text-align: right;
    word-break: break-word;
    line-height: 1.5;
    max-width: 60%;
}

/* Mobile Card Row Note */
.mobile-card-row-note {
    align-items: flex-start;
    background: linear-gradient(135deg, #FFFBF0 0%, #FEF3C7 100%);
    border-radius: 8px;
    padding: 12px;
    margin: 0 -18px;
    border: 1px solid #FDE68A;
    border-bottom: none;
}

.mobile-card-value-note {
    text-align: right;
    word-break: break-word;
    line-height: 1.6;
    max-width: 65%;
    color: #92400E !important;
    font-weight: 500 !important;
}

.mobile-card-value {
    font-size: 14px;
    color: #1F2937;
    font-weight: 600;
    text-align: right;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.mobile-card-value i {
    flex-shrink: 0;
}

/* Status Badge in Mobile Card */
.mobile-card-status .status-badge-modern {
    font-size: 11px;
    padding: 4px 10px;
}

.mobile-card-status .status-badge-modern i {
    font-size: 10px;
    margin-right: 4px;
}

/* Gender Badge in Mobile Card */
.mobile-card-value .gender-badge {
    font-size: 10px;
    padding: 4px 8px;
}

.mobile-card-value .gender-badge i {
    font-size: 10px;
    margin-right: 3px;
}

/* Date Value in Mobile Card */
.mobile-card-value.date-value-modern {
    font-size: 13px;
    color: #374151;
}

.mobile-card-value.date-value-modern i {
    font-size: 12px;
    margin-right: 4px;
    color: #9CA3AF;
}

/* System Info Section - Column Layout on Mobile */
.mobile-card-section-system .mobile-card-row-system {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
}

.mobile-card-section-system .mobile-card-row-system .mobile-card-label {
    min-width: auto;
    width: 100%;
    margin-bottom: 4px;
}

.mobile-card-section-system .mobile-card-row-system .mobile-card-value {
    text-align: left;
    justify-content: flex-start;
    width: 100%;
    flex: none;
}

/* Mobile Card Actions Section */
.mobile-card-actions-section {
    margin-top: 0;
    padding-top: 0;
}

.mobile-card-actions-section .mobile-card-section-title {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-card-actions-section .mobile-card-section-title::before {
    content: '';
    width: 3px;
    height: 16px;
    background: linear-gradient(135deg, #244B94 0%, #F26017 100%);
    border-radius: 2px;
}

.mobile-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 0;
    padding: 10px;
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Mobile Card Action Buttons - Professional Styling */
.mobile-card-actions .layui-btn,
.mobile-card-actions a.layui-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid transparent;
    flex: 1;
    min-width: 0;
    max-width: calc(50% - 5px);
}

.mobile-card-actions .layui-btn i,
.mobile-card-actions a.layui-btn i,
.mobile-card-actions .layui-btn .ok-icon,
.mobile-card-actions a.layui-btn .ok-icon {
    font-size: 15px;
    margin: 0;
    flex-shrink: 0;
}

.mobile-card-actions .layui-btn span,
.mobile-card-actions a.layui-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Edit Button - Blue */
.mobile-card-actions .layui-btn[lay-event="edit"],
.mobile-card-actions a.layui-btn[lay-event="edit"],
.mobile-card-actions .layui-btn[lay-event="edit"]:hover,
.mobile-card-actions a.layui-btn[lay-event="edit"]:hover {
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    border-color: #244B94;
}

.mobile-card-actions .layui-btn[lay-event="edit"]:hover,
.mobile-card-actions a.layui-btn[lay-event="edit"]:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.35);
}

.mobile-card-actions .layui-btn[lay-event="edit"]:active,
.mobile-card-actions a.layui-btn[lay-event="edit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

/* Info Button - Green */
.mobile-card-actions .layui-btn[lay-event="info"],
.mobile-card-actions a.layui-btn[lay-event="info"],
.mobile-card-actions .layui-btn[lay-event="info"]:hover,
.mobile-card-actions a.layui-btn[lay-event="info"]:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #FFFFFF;
    border-color: #059669;
}

.mobile-card-actions .layui-btn[lay-event="info"]:hover,
.mobile-card-actions a.layui-btn[lay-event="info"]:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
}

.mobile-card-actions .layui-btn[lay-event="info"]:active,
.mobile-card-actions a.layui-btn[lay-event="info"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

/* Delete Button - Red */
.mobile-card-actions .layui-btn[lay-event="del"],
.mobile-card-actions a.layui-btn[lay-event="del"],
.mobile-card-actions .layui-btn[lay-event="del"]:hover,
.mobile-card-actions a.layui-btn[lay-event="del"]:hover {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    color: #FFFFFF;
    border-color: #DC2626;
}

.mobile-card-actions .layui-btn[lay-event="del"]:hover,
.mobile-card-actions a.layui-btn[lay-event="del"]:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

.mobile-card-actions .layui-btn[lay-event="del"]:active,
.mobile-card-actions a.layui-btn[lay-event="del"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

/* Purchase Button - Orange */
.mobile-card-actions .layui-btn[lay-event="purchase"],
.mobile-card-actions a.layui-btn[lay-event="purchase"],
.mobile-card-actions .layui-btn[lay-event="purchase"]:hover,
.mobile-card-actions a.layui-btn[lay-event="purchase"]:hover {
    background: linear-gradient(135deg, #F26017 0%, #D9550F 100%);
    color: #FFFFFF;
    border-color: #F26017;
}

.mobile-card-actions .layui-btn[lay-event="purchase"]:hover,
.mobile-card-actions a.layui-btn[lay-event="purchase"]:hover {
    background: linear-gradient(135deg, #D9550F 0%, #F26017 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(242, 96, 23, 0.35);
}

.mobile-card-actions .layui-btn[lay-event="purchase"]:active,
.mobile-card-actions a.layui-btn[lay-event="purchase"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(242, 96, 23, 0.2);
}

/* Default button styling for other actions */
.mobile-card-actions .layui-btn:not([lay-event="edit"]):not([lay-event="info"]):not([lay-event="del"]):not([lay-event="purchase"]) {
    background: #FFFFFF;
    color: #374151;
    border-color: #E5E7EB;
}

.mobile-card-actions .layui-btn:not([lay-event="edit"]):not([lay-event="info"]):not([lay-event="del"]):not([lay-event="purchase"]):hover,
.mobile-card-actions a.layui-btn:not([lay-event="edit"]):not([lay-event="info"]):not([lay-event="del"]):not([lay-event="purchase"]):hover {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-color: #9CA3AF;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.mobile-card-actions .layui-btn:not([lay-event="edit"]):not([lay-event="info"]):not([lay-event="del"]):not([lay-event="purchase"]),
.mobile-card-actions a.layui-btn:not([lay-event="edit"]):not([lay-event="info"]):not([lay-event="del"]):not([lay-event="purchase"]) {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    color: #374151;
    border-color: #D1D5DB;
}

/* Responsive adjustments for mobile card actions */
@media (max-width: 480px) {
    .mobile-card-actions .layui-btn,
    .mobile-card-actions a.layui-btn {
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 12px;
        max-width: calc(50% - 4px);
    }
    
    .mobile-card-actions .layui-btn i,
    .mobile-card-actions a.layui-btn i,
    .mobile-card-actions .layui-btn .ok-icon,
    .mobile-card-actions a.layui-btn .ok-icon {
        font-size: 14px;
    }
    
    .mobile-card-actions-section .mobile-card-section-title {
        font-size: 13px;
        margin-bottom: 12px;
    }
}

/* ============================================================================
   2. COMPONENTS - MOBILE CARD PRODUCT VIEWS
   ============================================================================ */
.mobile-card-product {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.mobile-card-header-product {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F3F4F6;
}

.mobile-card-stt-product {
    flex-shrink: 0;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #244B94 0%, #1E3A8A 100%);
    border-radius: 8px;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

.mobile-card-title-product {
    flex: 1;
    font-weight: 700;
    font-size: 16px;
    color: #1F2937;
    line-height: 1.3;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-card-header-badges {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.mobile-card-code-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    background: #F3F4F6;
    color: #6B7280;
    border: 1px solid #E5E7EB;
}

.mobile-card-status-badge-product {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.mobile-card-status-badge-product.status-active-product {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.mobile-card-status-badge-product.status-active-product i {
    font-size: 10px;
}

.mobile-card-status-badge-product.status-locked-product {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #991B1B;
    border: 1px solid #FECACA;
}

.mobile-card-status-badge-product.status-locked-product i {
    font-size: 10px;
}

.mobile-card-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.mobile-card-price-card {
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 90px;
}

.mobile-card-price-card-green {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    border: 1px solid #A7F3D0;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.1);
}

.mobile-card-price-card-blue {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    border: 1px solid #93C5FD;
    box-shadow: 0 1px 3px rgba(30, 64, 175, 0.1);
}

.mobile-card-price-card-yellow {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #FCD34D;
    box-shadow: 0 1px 3px rgba(146, 64, 14, 0.1);
}

.mobile-card-price-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.mobile-card-price-icon {
    font-size: 13px;
    background: rgba(255, 255, 255, 0.7);
    padding: 5px 6px;
    border-radius: 6px;
    flex-shrink: 0;
}

.mobile-card-price-card-green .mobile-card-price-icon {
    color: #065F46;
}

.mobile-card-price-card-blue .mobile-card-price-icon {
    color: #1E40AF;
}

.mobile-card-price-card-yellow .mobile-card-price-icon {
    color: #92400E;
}

.mobile-card-price-label-text {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.mobile-card-price-card-green .mobile-card-price-label-text {
    color: #065F46;
}

.mobile-card-price-card-blue .mobile-card-price-label-text {
    color: #1E40AF;
}

.mobile-card-price-card-yellow .mobile-card-price-label-text {
    color: #92400E;
}

.mobile-card-price-value-box {
    background: rgba(255, 255, 255, 0.8);
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-card-price-card-yellow .mobile-card-price-value-box {
    flex-direction: column;
}

.mobile-card-price-value {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.mobile-card-price-card-green .mobile-card-price-value {
    color: #059669;
}

.mobile-card-price-card-blue .mobile-card-price-value {
    color: #1E40AF;
}

.mobile-card-price-card-yellow .mobile-card-price-value {
    color: #92400E;
}

.mobile-card-price-unit {
    font-size: 10px;
    color: #9CA3AF;
    font-weight: 500;
    margin-top: 2px;
}

.mobile-card-actions-product {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
}

/* Responsive for Mobile Card Product */
@media (max-width: 768px) {
    .mobile-card-product {
        padding: 14px;
        margin-bottom: 10px;
    }
    
    .mobile-card-header-product {
        gap: 8px;
        margin-bottom: 14px;
        padding-bottom: 12px;
    }
    
    .mobile-card-stt-product {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .mobile-card-title-product {
        font-size: 15px;
    }
    
    .mobile-card-price-grid {
        gap: 8px;
        margin-bottom: 10px;
    }
    
    .mobile-card-price-card {
        padding: 12px;
        min-height: 85px;
    }
    
    .mobile-card-price-icon {
        font-size: 12px;
        padding: 4px 5px;
    }
    
    .mobile-card-price-label-text {
        font-size: 10px;
    }
    
    .mobile-card-price-value {
        font-size: 12px;
    }
    
    .mobile-card-price-value-box {
        padding: 6px;
        min-height: 28px;
    }
}

/* ================================================================ */
/* Infinite Scroll Loading Indicator (Table.cshtml) */
/* ================================================================ */
.infinite-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 20px 0;
}

.loading-spinner {
    margin-bottom: 8px;
}

.loading-spinner .layui-icon {
    font-size: 24px;
    color: #244B94;
}

.loading-text {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.infinite-loading-end {
    text-align: center;
    padding: 20px;
    color: #374151;
    font-size: 13px;
}

/* ================================================================ */
/* Status Badge - Modern Style (Table.cshtml) */
/* ================================================================ */
.status-badge-modern {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.status-active-modern {
    background: #D1FAE5;
    color: #065F46;
    gap:5px;
}

.status-locked-modern {
    background: #FEE2E2;
    color: #991B1B;
}

/* Hide table toolbar */
.layui-table-tool {
    display: none !important;
}

/* ================================================================ */
/* Gender Badge - Enhanced Design (Customer Index.cshtml) */
/* ================================================================ */
.gender-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.gender-male {
    background: #DBEAFE;
    color: #1E3A8A;
}

.gender-male:hover {
    transform: translateY(-1px);
    background: #BFDBFE;
}

.gender-female {
    background: #FCE7F3;
    color: #9F1239;
}

.gender-female:hover {
    transform: translateY(-1px);
    background: #FBCFE8;
}

.gender-badge i {
    font-size: 11px;
    margin-right: 4px;
    opacity: 0.9;
}

/* ================================================================ */
/* Price Styles (Table.cshtml) - Đồng bộ kích thước */
/* ================================================================ */
.price-value-modern {
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Base styles cho tất cả price badges - Đồng bộ kích thước */
.price-primary-modern,
.price-success-modern,
.price-sale-modern,
.price-danger-modern {
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 8px;
    border: 1px solid;
    gap: 4px;
    line-height: 1.2;
    min-height: 32px;
    min-width: 80px;
    box-sizing: border-box;
}

/* Price Primary - Blue */
.price-primary-modern {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #1E40AF;
    border-color: #BFDBFE;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.15);
}

.price-primary-modern i {
    font-size: 13px;
    color: #1E40AF;
    margin-right: 0;
}

/* Price Success - Green */
.price-success-modern {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #065F46;
    border-color: #A7F3D0;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.15);
}

.price-success-modern i {
    font-size: 13px;
    color: #065F46;
    margin-right: 0;
}

/* Price Sale - Yellow */
.price-sale-modern {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border-color: #FDE68A;
    box-shadow: 0 1px 2px rgba(146, 64, 14, 0.15);
}

.price-sale-modern i {
    font-size: 13px;
    color: #92400E;
    margin-right: 0;
}

.price-danger-modern {
    color: #EF4444;
    border-color: #FECACA;
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.15);
}

.price-danger-modern i {
    font-size: 13px;
    color: #EF4444;
    margin-right: 0;
}

/* Date Style */
.date-value-modern {
    color: #374151;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}

/* ================================================================ */
/* Product Info Container - Modern Layout (Table.cshtml) */
/* ================================================================ */
.product-info-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

/* ================================================================ */
/* Customer Info Container - Professional Modern Design (Customer Index.cshtml) */
/* ================================================================ */
.customer-info-container {
    padding: 12px 0;
    line-height: 1.6;
}

/* Unified Customer Info Container - New Layout */
.customer-info-container-unified {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

/* Row color differentiation - inherit from parent tr */
.layui-table tbody tr:nth-child(even) .customer-info-container-unified {
    background-color: transparent;
}

.layui-table tbody tr:nth-child(odd) .customer-info-container-unified {
    background-color: transparent;
}

.customer-info-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.customer-header-section {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 3px;
    padding: 4px 0;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

/* Subtle background for even rows header */
.layui-table tbody tr:nth-child(even) .customer-header-section {
    background: rgba(248, 249, 250, 0.5);
}

/* Enhanced hover for header */
.layui-table tbody tr:hover .customer-header-section {
    background: rgba(240, 244, 255, 0.6);
}

.customer-header-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-start;
}

/* Override border for unified layout */
.customer-info-container-unified .customer-name-row {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    gap: 6px;
    row-gap: 6px;
    line-height: 24px;
}

/* Customer Card Row - Similar to Mobile Card */
.customer-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #F3F4F6;
    transition: background-color 0.2s ease;
}

/* Subtle variation for even rows */
.layui-table tbody tr:nth-child(even) .customer-card-row {
    background-color: transparent;
    border-bottom-color: #E9ECEF;
}

/* Enhanced hover state */
.layui-table tbody tr:hover .customer-card-row {
    background-color: rgba(240, 244, 255, 0.3);
}

.customer-card-row:last-of-type {
    border-bottom: none;
}

.customer-card-label {
    font-size: 11px;
    color: #6B7280;
    font-weight: 500;
    min-width: 90px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.customer-card-label::before {
    content: '';
    width: 3px;
    height: 3px;
    background: #244B94;
    border-radius: 50%;
    flex-shrink: 0;
}

.customer-card-label i {
    font-size: 11px;
    color: #244B94;
    margin-right: 4px;
    opacity: 0.8;
}

/* Customer Card Row Primary - Highlighted */
.customer-card-row-primary {
    background: #FFFFFF;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 3px;
    border-bottom: none;
    border: 1px solid #E5E7EB;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Subtle background variation for even rows */
.layui-table tbody tr:nth-child(even) .customer-card-row-primary {
    background: #F8F9FA;
    border-color: #E9ECEF;
}

/* Enhanced hover state */
.layui-table tbody tr:hover .customer-card-row-primary {
    background: #F0F4FF;
    border-color: #B8D4FF;
    box-shadow: 0 2px 6px rgba(36, 75, 148, 0.1);
}

.customer-card-value-primary {
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Customer Card Section */
.customer-card-section {
    padding-bottom: 6px;
    border-bottom: 1px solid #F3F4F6;
}

.customer-card-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* System Info Collapsible */
.customer-system-info-collapsible {
    border-bottom: 1px solid #F3F4F6;
    padding-bottom: 0;
}

.customer-system-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    border-radius: 6px;
    background: #F9FAFB;
    margin-bottom: 0;
}

/* Subtle variation for even rows */
.layui-table tbody tr:nth-child(even) .customer-system-info-header {
    background: #F5F6F7;
}

/* Enhanced hover state */
.layui-table tbody tr:hover .customer-system-info-header {
    background: #E8F0FF;
}

.customer-system-info-header:hover {
    background: #F3F4F6;
}

.customer-system-info-header.expanded {
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    border-radius: 6px 6px 0 0;
}

.customer-system-info-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.customer-system-info-title i {
    font-size: 14px;
    color: #6B7280;
}

.customer-system-info-toggle-icon {
    font-size: 12px;
    color: #6B7280;
    transition: transform 0.3s ease;
}

.customer-system-info-header.expanded .customer-system-info-toggle-icon {
    transform: rotate(180deg);
    color: #244B94;
}

.customer-system-info-content {
    padding: 8px;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    border-radius: 0 0 6px 6px;
    transition: background-color 0.2s ease;
}

/* Subtle variation for even rows */
.layui-table tbody tr:nth-child(even) .customer-system-info-content {
    background: #F8F9FA;
}

/* Enhanced hover state */
.layui-table tbody tr:hover .customer-system-info-content {
    background: #F0F4FF;
}

.customer-card-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    gap: 6px;
}

.customer-card-section-title::before {
    content: '';
    width: 3px;
    height: 12px;
    background: linear-gradient(180deg, #244B94 0%, #F26017 100%);
    border-radius: 2px;
}

.customer-card-value {
    font-size: 12px;
    color: #1F2937;
    font-weight: 600;
    text-align: right;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

.customer-card-value i {
    flex-shrink: 0;
}

/* Customer Card Value Phone */
.customer-card-value-phone {
    color: #244B94 !important;
    font-weight: 600 !important;
}

/* Customer Card Row Address */
.customer-card-row-address {
    align-items: flex-start;
}

.customer-card-value-address {
    text-align: right;
    word-break: break-word;
    line-height: 1.5;
    max-width: 60%;
}

/* Customer Card Row System - Single Row Layout */
.customer-card-row-system {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 0;
}

.customer-card-system-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.customer-card-row-system .customer-card-label {
    min-width: auto;
    margin-right: 0;
    font-size: 11px;
}

.customer-card-row-system .customer-card-value {
    flex: 0 0 auto;
    text-align: left;
    justify-content: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #1F2937;
}

.customer-card-separator {
    color: #D1D5DB;
    font-size: 16px;
    margin: 0 4px;
    flex-shrink: 0;
    line-height: 1;
}

/* Responsive: System Info on Mobile */
@media (max-width: 768px) {
    .customer-system-info-header {
        padding: 6px 8px;
    }
    
    .customer-system-info-title {
        font-size: 11px;
    }
    
    .customer-system-info-content {
        padding: 6px;
    }
    
    .customer-card-row-system {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 0;
    }
    
    .customer-card-system-item {
        width: 100%;
        flex: none;
        padding: 5px 0;
        border-bottom: 1px solid #F3F4F6;
    }
    
    .customer-card-system-item:last-child {
        border-bottom: none;
    }
    
    .customer-card-row-system .customer-card-label {
        min-width: 100px;
        font-size: 11px;
    }
    
    .customer-card-row-system .customer-card-value {
        font-size: 12px;
        flex: 1;
    }
    
    .customer-card-separator {
        display: none;
    }
}

/* Customer Note Wrapper - Modern Card Style */
.customer-note-wrapper {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-bottom: 12px;
    position: relative;
}

.customer-note-wrapper:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.customer-note-wrapper.note-clicking {
    background: #F3F4F6;
}

.customer-note-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.customer-note-icon-wrapper {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.customer-note-icon-wrapper i {
    color: #FFFFFF;
    font-size: 14px;
}

.customer-note-label {
    font-size: 13px;
    font-weight: 700;
    color: #92400E;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}

.customer-note-view-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    padding: 6px 14px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    border: none;
    position: relative;
    overflow: hidden;
}

.customer-note-view-more::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.customer-note-view-more:hover::before {
    width: 300px;
    height: 300px;
}

.customer-note-view-more i {
    font-size: 11px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.customer-note-view-more span {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.customer-note-wrapper:hover .customer-note-view-more {
    background: #244B94;
    color: #FFFFFF;
}

.customer-note-view-more:hover {
    background: #1A3A6F;
}

.customer-note-view-more:hover i {
    transform: translateX(2px);
}

.customer-note-view-more:active {
    transform: translateY(0) scale(1);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.customer-note-content {
    margin-top: 8px;
}

.customer-note-text {
    font-size: 13px;
    color: #78350F;
    line-height: 1.6;
    margin: 0;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-note-wrapper:hover .customer-note-text {
    color: #374151;
}

/* Legacy styles for backward compatibility */
.customer-card-row-note {
    align-items: flex-start;
    background: #FFFFFF;
    border-radius: 6px;
    padding: 10px;
    border: 1px solid #E5E7EB;
    border-bottom: none;
}

.customer-card-value-note {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    position: relative;
    cursor: pointer;
    flex: 1;
    flex-wrap: wrap;
}

.customer-card-value-note .customer-note-text-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.4;
    text-align: left;
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 20px);
    white-space: normal;
    /* Ensure ellipsis appears at the end */
    -webkit-box-pack: start;
    box-pack: start;
}

.customer-card-value-note .customer-note-link-icon {
    font-size: 11px;
    color: #F59E0B;
    opacity: 0.7;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
    align-self: flex-start;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.customer-card-row-primary.customer-note-clickable {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    width: 100%;
}

.customer-card-row-primary.customer-note-clickable:hover {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: #93C5FD;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.customer-card-row-primary.customer-note-clickable:hover .customer-card-label {
    color: #1E40AF;
}

.customer-card-row-primary.customer-note-clickable:hover .customer-note-text-content {
    color: #1E3A8A;
}

.customer-card-row-primary.customer-note-clickable:hover .customer-note-link-icon {
    opacity: 1;
    color: #2563EB;
    transform: scale(1.1);
}

.customer-card-row-primary.customer-note-clickable.note-clicking {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15);
}

/* Date Value in Customer Card */
.customer-card-value.date-value-modern {
    font-size: 12px;
    color: #374151;
}

.customer-card-value.date-value-modern i {
    font-size: 11px;
    margin-right: 4px;
    color: #9CA3AF;
}

/* Gender Badge in Customer Card */
.customer-card-value .gender-badge {
    font-size: 10px;
    padding: 4px 8px;
}

.customer-card-value .gender-badge i {
    font-size: 10px;
    margin-right: 3px;
}

.customer-info-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
    max-width: 240px;
    padding-left: 16px;
    border-left: 1px solid #E5E7EB;
    flex-shrink: 0;
}

.customer-system-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-radius: 6px;
    border: 1px solid #E5E7EB;
}

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

.system-info-label {
    font-size: 10px;
    color: #6B7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    line-height: 1.3;
}

.system-info-value {
    font-size: 12px;
    color: #1F2937;
    font-weight: 600;
    word-break: break-word;
    line-height: 1.4;
}

/* 2-Column Layout for Customer Info and Actions */
.customer-info-actions-wrapper {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    margin-top: 8px;
}

.customer-info-column {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.customer-actions-column {
    flex: 0 0 auto;
    min-width: 200px;
    display: flex !important;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
    visibility: visible !important;
    opacity: 1 !important;
}

.customer-actions-container {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2px;
    gap: 6px;
    width: 100%;
    min-height: 40px;
    height: auto;
    align-content: flex-start;
    visibility: visible !important;
    opacity: 1 !important;
}

.customer-actions-container .layui-btn,
.customer-actions-container a.layui-btn {
    width: auto;
    min-width: 40px;
    height: 32px;
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 12px;
    font-size: 13px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    line-height: 1.3;
    white-space: nowrap;
    font-weight: 500;
}

.customer-actions-container .layui-btn:hover,
.customer-actions-container a.layui-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Ensure buttons have consistent styling */
.customer-actions-container .layui-btn i,
.customer-actions-container a.layui-btn i {
    font-size: 15px;
    line-height: 1;
}

/* Desktop - Larger buttons */
@media (min-width: 1200px) {
    .customer-actions-container .layui-btn,
    .customer-actions-container a.layui-btn {
        min-width: 50px;
        height: 38px;
        padding: 8px 18px;
        font-size: 14px;
        border-radius: 8px;
        gap: 8px;
        font-weight: 600;
    }
    
    .customer-actions-container .layui-btn i,
    .customer-actions-container a.layui-btn i {
        font-size: 16px;
    }
}

/* Responsive adjustments for unified layout */
@media (max-width: 1200px) {
    .customer-info-sidebar {
        min-width: 180px;
        max-width: 200px;
    }
    
    .customer-actions-column {
        min-width: 180px;
        max-width: 240px;
    }
}

@media (max-width: 992px) {
    .customer-info-container-unified {
        gap: 0;
    }
    
    /* Giữ 2 cột ngang trên tablet, chỉ điều chỉnh kích thước */
    .customer-actions-column {
        min-width: 160px;
        max-width: 220px;
    }
    
    .customer-actions-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }
    
    .customer-actions-container .layui-btn,
    .customer-actions-container a.layui-btn {
        flex: 0 0 auto;
        min-width: 40px;
        height: 32px;
        padding: 5px 12px;
        font-size: 13px;
        width: auto;
    }
    
    .customer-actions-container .layui-btn i,
    .customer-actions-container a.layui-btn i {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .customer-info-container-unified {
        padding: 8px 0;
        gap: 0;
    }
    
    .customer-info-actions-wrapper {
        flex-direction: column;
        gap: 0px;
    }
    
    .customer-info-column {
        width: 100%;
    }
    
    .customer-actions-column {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        justify-content: flex-start;
    }
    
    .customer-card-value-note {
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 4px;
        justify-content: flex-start;
    }
    
    .customer-card-value-note .customer-note-text-content {
        max-width: calc(100% - 18px);
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        /* Ensure ellipsis works on mobile */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
    
    .customer-card-value-note .customer-note-link-icon {
        font-size: 10px;
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        margin-top: 3px;
        margin-left: 4px;
    }
    
    .customer-actions-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        padding: 0px;
        gap: 4px;
    }
    
    .customer-actions-container .layui-btn,
    .customer-actions-container a.layui-btn {
        width: auto;
        min-width: 32px;
        height: 28px;
        flex: 0 0 auto;
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
        gap: 4px;
    }
    
    .customer-actions-container .layui-btn i,
    .customer-actions-container a.layui-btn i {
        font-size: 12px;
    }
    
    /* Customer name row on mobile */
    .customer-info-container-unified .customer-name-row {
        gap: 6px;
        row-gap: 6px;
    }
    
    .customer-name-modern {
        font-size: 18px;
        min-width: 120px;
        margin-right: 4px;
    }
    
    .status-badge-modern,
    .gender-badge,
    .customer-birthday-badge,
    .customer-phone-badge,
    .customer-report-id-badge {
        font-size: 11px;
        padding: 3px 10px;
    }
}

.customer-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E7EB;
    align-content: flex-start;
    line-height: 28px;
}

.customer-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(36, 75, 148, 0.2);
    flex-shrink: 0;
    transition: all 0.2s ease;
    align-self: flex-start;
    line-height: 1;
    margin-top: 0;
}

.customer-number-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(36, 75, 148, 0.3);
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
}

.customer-name-modern {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1F2937;
    line-height: 24px;
    letter-spacing: -0.01em;
    flex: 0 1 auto;
    min-width: 150px;
    max-width: 100%;
    text-align: left;
    display: inline-block;
    word-break: break-word;
    margin-right: 6px;
    align-self: flex-start;
    margin-top: 0;
    vertical-align: top;
}

.customer-details-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.customer-phone-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
}

.customer-note-row {
    display: flex;
    align-items: flex-start;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #E5E7EB;
}

/* Birthday Badge - Warm Orange/Yellow - Similar to Status Badge */
.customer-birthday-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #FEF3C7;
    color: #92400E;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.customer-birthday-badge:hover {
    transform: translateY(-1px);
    background: #FDE68A;
}

.customer-birthday-badge i {
    font-size: 11px;
    margin-right: 4px;
    opacity: 0.9;
}

/* Phone Badge - Professional Blue - Similar to Status Badge */
.customer-phone-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #E0E7FF;
    color: #3730A3;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.customer-phone-badge:hover {
    transform: translateY(-1px);
    background: #C7D2FE;
}

.customer-phone-badge i {
    font-size: 11px;
    margin-right: 4px;
    opacity: 0.9;
}

/* Report ID Badge - Purple/Indigo - Distinct from other badges with colored border */
.customer-report-id-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #EDE9FE;
    color: #5B21B6;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.2);
}

.customer-report-id-badge:hover {
    transform: translateY(-1px);
    background: #DDD6FE;
    border-color: #6D28D9;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}

.customer-report-id-badge i {
    font-size: 11px;
    margin-right: 4px;
    opacity: 0.9;
}

/* Note Badge - Subtle Gray */
.customer-note-badge {
    display: inline-flex;
    align-items: flex-start;
    padding: 6px 10px;
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    color: #374151;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    max-width: 100%;
    word-break: break-word;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    border: 1px solid #E5E7EB;
}

.customer-note-badge:hover {
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-color: #D1D5DB;
}

.customer-note-badge i {
    font-size: 13px;
    margin-right: 6px;
    margin-top: 2px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* Customer Note Badge for HeadIcon - with text truncation */
.customer-note-row-headicon {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #E5E7EB;
}

.customer-note-badge-headicon {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.customer-note-badge-headicon i {
    flex-shrink: 0;
    margin-top: 2px;
}

.customer-note-badge-headicon .customer-note-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    line-height: 1.5;
    max-width: 100%;
}

/* Clickable note badge - hover effect */
.customer-note-clickable {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.customer-note-clickable:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.2);
}

/* Add visual indicator that note is clickable */
.customer-note-wrapper::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    background: #F59E0B;
    border-radius: 50%;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.customer-note-wrapper:hover::after {
    opacity: 1;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Responsive adjustments for customer note */
@media (max-width: 768px) {
    .customer-note-wrapper {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .customer-note-header {
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .customer-note-icon-wrapper {
        width: 28px;
        height: 28px;
    }
    
    .customer-note-icon-wrapper i {
        font-size: 12px;
    }
    
    .customer-note-label {
        font-size: 12px;
    }
    
    .customer-note-view-more {
        font-size: 11px;
        padding: 5px 10px;
    }
    
    .customer-note-view-more span {
        display: inline;
    }
    
    .customer-note-wrapper::after {
        display: none;
    }
    
    .customer-note-text {
        font-size: 12px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* ================================================================ */
/* Customer Note Modal - Professional Modern Design */
/* ================================================================ */

/* Custom Modal Overlay - Pure JS Implementation */
/* Custom Modal Overlay - Pure JS Implementation - Same style as search modal */
.custom-note-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.custom-note-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.custom-note-modal-overlay.closing {
    opacity: 0;
    visibility: hidden;
}

.custom-note-modal-container {
    position: relative;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: auto;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-note-modal-overlay.active .custom-note-modal-container {
    transform: scale(1) translateY(0);
}

.custom-note-modal-overlay.closing .custom-note-modal-container {
    transform: scale(0.9) translateY(20px);
}

.custom-note-modal-container .search-modal-body {
    max-height: none;
    overflow: visible;
    padding: 0;
}

/* Note: Modal ghi chú giờ sử dụng class search-modal-layer nên sẽ tự động áp dụng CSS từ .search-modal-layer */

/* Close button - same style as search modal */
.custom-note-modal-container .layui-layer-close,
.custom-note-modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1000;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: #F3F4F6;
    color: #6B7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
}

.custom-note-modal-container .layui-layer-close:hover,
.custom-note-modal-close-btn:hover {
    background: #E5E7EB;
    color: #374151;
    transform: rotate(90deg);
}

.custom-note-modal-container .layui-layer-close i,
.custom-note-modal-close-btn i {
    font-size: 18px;
}

.custom-note-modal-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    border-radius: 12px;
}

.custom-note-modal-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #E5E7EB;
    border-top-color: #244B94;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive adjustments for custom modal */
@media (max-width: 768px) {
    .custom-note-modal-overlay {
        padding: 10px;
    }
    
    .custom-note-modal-container {
        max-height: 90vh;
        border-radius: 10px;
    }
    
    .custom-note-modal-close-btn {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
    }
}

.customer-note-modal-layer {
    border-radius: 12px;
    overflow: hidden;
}

.customer-note-modal-layer .layui-layer {
    /* Hide scrollbar but allow scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.customer-note-modal-layer .layui-layer::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.customer-note-modal-layer .layui-layer-content {
    height: auto !important;
    max-height: none !important;
    /* Hide scrollbar but allow scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.customer-note-modal-layer .layui-layer-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.customer-note-modal-layer .layui-layer-title {
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 20px;
    border: none;
    border-radius: 12px 12px 0 0;
}

.customer-note-modal-title-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-note-modal-title-bar i {
    font-size: 18px;
    color: #FFFFFF;
}

.customer-note-modal-wrapper {
    background: #FFFFFF;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    /* Hide scrollbar but allow scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.customer-note-modal-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.customer-note-modal-header {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    padding: 0;
    border-bottom: 1px solid #E5E7EB;
    position: relative;
    flex-shrink: 0;
}

.customer-note-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #F26017 0%, #FF8C42 50%, #F26017 100%);
    box-shadow: 0 2px 4px rgba(242, 96, 23, 0.2);
}

.customer-note-modal-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 36px;
    width: 100%;
}

.customer-note-modal-left-section {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.customer-note-modal-right-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
    padding-left: 20px;
}

.customer-note-modal-avatar-container {
    flex-shrink: 0;
}

.customer-note-modal-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(36, 75, 148, 0.18);
    transition: all 0.3s ease;
    border: 2.5px solid rgba(36, 75, 148, 0.15);
}

.customer-note-modal-avatar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(36, 75, 148, 0.25);
}

.customer-note-modal-avatar i {
    font-size: 28px;
    color: #244B94;
}

.customer-note-modal-customer-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.customer-note-modal-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.4;
    word-break: normal;
    white-space: normal;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    display: block;
    width: 100%;
}

.customer-note-modal-extra-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    flex-wrap: wrap;
}

.customer-note-modal-info-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    border: 1px solid #D1D5DB;
    transition: all 0.2s ease;
}

.customer-note-modal-info-item:hover {
    background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%);
    border-color: #9CA3AF;
}

.customer-note-modal-info-item i {
    font-size: 14px;
    color: #244B94;
}

/* Tags row - Status, Birthday, Phone tags */
.customer-note-modal-tags-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: flex-end;
}

.customer-note-modal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.customer-note-modal-status-badge.status-active {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #065F46;
    border: 1.5px solid #10B981;
}

.customer-note-modal-status-badge.status-locked {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border: 1.5px solid #F59E0B;
}

.customer-note-modal-status-badge i {
    font-size: 13px;
}

.customer-note-modal-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    color: #244B94;
    border: 1.5px solid #6366F1;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.customer-note-modal-tag-badge:hover {
    background: linear-gradient(135deg, #C7D2FE 0%, #A5B4FC 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

.customer-note-modal-tag-badge i {
    font-size: 13px;
    color: #244B94;
}

/* Accordion sections */
.customer-note-modal-accordion-section {
    margin-bottom: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
    transition: all 0.3s ease;
}

.customer-note-modal-accordion-section:hover {
    border-color: #D1D5DB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.customer-note-modal-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    background: #F9FAFB;
    transition: all 0.2s ease;
    user-select: none;
}

.customer-note-modal-accordion-header:hover {
    background: #F3F4F6;
}

.customer-note-modal-accordion-header.active {
    background: #E0E7FF;
    border-bottom: 1px solid #C7D2FE;
}

.customer-note-modal-accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.customer-note-modal-accordion-title i {
    font-size: 16px;
    color: #244B94;
}

.customer-note-modal-accordion-header.active .customer-note-modal-accordion-title {
    color: #244B94;
}

.customer-note-modal-accordion-icon {
    font-size: 12px;
    color: #6B7280;
    transition: transform 0.3s ease;
}

.customer-note-modal-accordion-header.active .customer-note-modal-accordion-icon {
    color: #244B94;
    transform: rotate(180deg);
}

.customer-note-modal-accordion-content {
    padding: 0 18px;
    background: #FFFFFF;
    overflow: hidden;
}

.customer-note-modal-info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #F3F4F6;
}

.customer-note-modal-info-row:last-child {
    border-bottom: none;
}

.customer-note-modal-info-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    min-width: 120px;
    flex-shrink: 0;
}

.customer-note-modal-info-label i {
    font-size: 14px;
    color: #244B94;
    width: 16px;
    text-align: center;
}

.customer-note-modal-info-value {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1F2937;
    text-align: right;
    word-break: break-word;
}

.customer-note-modal-info-value i {
    font-size: 12px;
    margin-right: 4px;
    color: #244B94;
}

.customer-note-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    width: fit-content;
    border: 1px solid #D1D5DB;
}

.customer-note-modal-badge i {
    font-size: 13px;
    color: #244B94;
}

/* Customer Note Modal - Customer Section */
.customer-note-modal-customer-section {
    padding: 0 48px 32px 48px;
    background: #FFFFFF;
}

.customer-note-modal-customer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid #E5E7EB;
}

.customer-note-modal-body {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.customer-note-modal-note-section {
    padding: 28px 48px 36px 48px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #FAFBFC;
}

.customer-note-modal-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #E5E7EB;
}

.customer-note-modal-title-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(36, 75, 148, 0.15);
}

.customer-note-modal-title-icon i {
    color: #244B94;
    font-size: 18px;
}

.customer-note-modal-title-text {
    color: #374151;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.2px;
}

.customer-note-modal-note-content {
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px 28px;
    flex: 1;
    min-height: 260px;
    max-height: calc(100vh - 420px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.customer-note-modal-note-content:has(.customer-note-modal-textarea) {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    margin: 5px;
}

.customer-note-modal-note-content:hover {
    border-color: #D1D5DB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.customer-note-modal-note-content.scrolled-top::before {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), transparent);
    pointer-events: none;
    z-index: 1;
    margin: -24px -28px 0 -28px;
    padding: 0 28px;
}

.customer-note-modal-note-content.scrolled-bottom::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.98), transparent);
    pointer-events: none;
    z-index: 1;
    margin: 0 -28px -24px -28px;
    padding: 0 28px;
}

.customer-note-modal-note-text {
    color: #374151;
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.015em;
}

/* Textarea for note editing */
.customer-note-modal-textarea {
    width: 100%;
    min-height: 240px;
    padding: 20px 24px;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.75;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #374151;
    background: #FFFFFF;
    resize: vertical;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.customer-note-modal-textarea:focus {
    outline: none;
    border-color: #244B94;
    box-shadow: 0 0 0 3px rgba(36, 75, 148, 0.1);
}

.customer-note-modal-textarea::placeholder {
    color: #9CA3AF;
}

/* Adjust note content padding when it contains textarea */
.customer-note-modal-note-content .customer-note-modal-textarea {
    margin: 0;
}

/* Customer Note Modal Footer */
.customer-note-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    padding: 32px 48px;
    margin-top: 0;
    border-top: 2px solid #E5E7EB;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

.customer-note-modal-footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-height: 44px;
}

.customer-note-modal-footer button i {
    font-size: 14px;
}

.customer-note-modal-footer #btnSaveNote {
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

.customer-note-modal-footer #btnSaveNote:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #152A5C 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(36, 75, 148, 0.3);
}

.customer-note-modal-footer #btnCloseNote {
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    color: #374151;
    border: 1.5px solid #D1D5DB;
}

.customer-note-modal-footer #btnCloseNote:hover {
    background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%);
    border-color: #9CA3AF;
    transform: translateY(-1px);
}

/* Custom scrollbar for note content */
.customer-note-modal-note-content::-webkit-scrollbar {
    width: 8px;
}

.customer-note-modal-note-content::-webkit-scrollbar-track {
    background: #F9FAFB;
    border-radius: 4px;
    margin: 8px 0;
}

.customer-note-modal-note-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #CBD5E1 0%, #94A3B8 100%);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.customer-note-modal-note-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #94A3B8 0%, #64748B 100%);
}

/* Modal button styling */
.customer-note-modal-layer .layui-layer-btn {
    padding: 16px 20px;
    border-top: 1px solid #E5E7EB;
    background: #F9FAFB;
}

.customer-note-modal-layer .layui-layer-btn a {
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    border: none;
    border-radius: 10px;
    height: 40px;
    padding: 10px 32px;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

.customer-note-modal-layer .layui-layer-btn a:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.3);
    transform: translateY(-1px);
}

.customer-note-modal-layer .layui-layer-btn a:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

.customer-note-modal-layer .layui-layer-btn a i {
    margin-right: 6px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .customer-note-modal-layer {
        border-radius: 10px;
    }
    
    .customer-note-modal-layer .layui-layer {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        top: 5% !important;
        margin-top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .customer-note-modal-layer .layui-layer-content {
        height: auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .customer-note-modal-layer .layui-layer-title {
        border-radius: 10px 10px 0 0;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    .customer-note-modal-wrapper {
        border-radius: 0 0 10px 10px;
        max-height: calc(90vh - 100px);
        overflow-y: auto;
    }
    
    .customer-note-modal-customer-section {
        padding: 0 20px 24px 20px;
    }
    
    .customer-note-modal-customer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
        padding: 20px 0;
    }
    
    .customer-note-modal-right-section {
        padding-left: 0;
        width: 100%;
    }
    
    .customer-note-modal-header-content {
        padding: 14px 16px;
        gap: 12px;
        align-items: flex-start;
        flex-direction: row;
    }
    
    .customer-note-modal-left-section {
        width: 100%;
        gap: 12px;
    }
    
    .customer-note-modal-right-section {
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }
    
    .customer-note-modal-note-section {
        padding: 20px 16px 24px 16px;
    }
    
    .customer-note-modal-avatar {
        width: 56px !important;
        height: 56px !important;
    }
    
    .customer-note-modal-avatar i {
        font-size: 24px !important;
    }
    
    .customer-note-modal-customer-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    
    .customer-note-modal-name {
        font-size: 19px !important;
    }
    
    .customer-note-modal-tags-row {
        gap: 6px;
        margin-top: 0;
        justify-content: flex-start;
        width: 100%;
    }
    
    .customer-note-modal-status-badge,
    .customer-note-modal-tag-badge {
        padding: 8px 14px;
        font-size: 10px;
    }
    
    .customer-note-modal-status-badge i,
    .customer-note-modal-tag-badge i {
        font-size: 12px;
    }
    
    .customer-note-modal-accordion-header {
        padding: 12px 16px;
    }
    
    .customer-note-modal-accordion-title {
        font-size: 13px;
    }
    
    .customer-note-modal-accordion-content {
        padding: 0 16px;
    }
    
    .customer-note-modal-info-row {
        flex-direction: column;
        gap: 6px;
        padding: 10px 0;
    }
    
    .customer-note-modal-info-label {
        min-width: auto;
        font-size: 12px;
    }
    
    .customer-note-modal-info-value {
        text-align: left;
        font-size: 12px;
    }
    
    .customer-note-modal-note-section {
        padding: 20px 16px 24px 16px;
    }
    
    .customer-note-modal-note-content {
        max-height: calc(90vh - 340px) !important;
        padding: 18px 20px;
        min-height: 180px;
    }
    
    .customer-note-modal-note-text {
        font-size: 14px;
        line-height: 1.75;
    }
    
    .customer-note-modal-avatar {
        width: 30px !important;
        height: 30px !important;
        border-radius: 5px;
    }
    
    .customer-note-modal-footer {
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 10px;
        padding: 20px 20px;
        margin-top: 0;
    }
    
    .customer-note-modal-footer button {
        width: auto;
        min-width: 44px;
        max-width: 44px;
        justify-content: center;
        padding: 10px;
        font-size: 0;
        border-radius: 8px;
        flex: 0 0 44px;
        flex-shrink: 0;
        min-height: 44px;
        height: 44px;
    }
    
    .customer-note-modal-footer button span {
        display: none;
    }
    
    .customer-note-modal-footer button i {
        font-size: 16px !important;
        margin: 0 !important;
    }
    
    .customer-note-modal-layer .layui-layer-btn {
        padding: 12px 16px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .customer-note-modal-layer .layui-layer-btn a {
        padding: 10px 20px !important;
        font-size: 13px !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 50% !important;
        white-space: nowrap !important;
    }
    
    .customer-note-modal-avatar i {
        font-size: 24px;
    }
    
    .customer-note-modal-name {
        font-size: 19px;
    }
    
    .customer-note-modal-badge {
        font-size: 11px;
        padding: 5px 10px;
    }
    
    .customer-note-modal-extra-info {
        gap: 12px;
        margin-top: 10px;
    }
    
    .customer-note-modal-info-item {
        font-size: 12px;
        padding: 5px 10px;
    }
    
    .customer-note-modal-note-text {
        font-size: 14px;
        line-height: 1.75;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .customer-note-modal-layer .layui-layer {
        width: 85% !important;
        max-width: 85% !important;
        max-height: 85vh !important;
    }
    
    .customer-note-modal-layer .layui-layer-content {
        height: auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    
    .customer-note-modal-note-content {
        max-height: calc(85vh - 380px) !important;
    }
    
    .customer-note-modal-header-content {
        padding: 18px 24px;
    }
}

@media (max-width: 480px) {
    .customer-note-modal-header-content {
        flex-direction: row;
        align-items: center;
        padding: 12px 14px;
        gap: 10px;
    }
    
    .customer-note-modal-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    .customer-note-modal-avatar i {
        font-size: 18px !important;
    }
    
    .customer-note-modal-customer-info {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .customer-note-modal-name {
        font-size: 16px !important;
    }
    
    .customer-note-modal-tags-row {
        gap: 4px;
        margin-top: 0;
    }
    
    .customer-note-modal-extra-info {
        justify-content: center;
    }
    
    .customer-note-modal-note-section {
        padding: 16px;
    }
    
    .customer-note-modal-note-content {
        padding: 18px 20px;
        max-height: calc(100vh - 300px);
    }
}

/* Status Badge Inline - Professional */
.status-badge-inline {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.status-active-inline {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #065F46;
    border-color: rgba(5, 150, 105, 0.2);
}

.status-active-inline:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
    background: linear-gradient(135deg, #A7F3D0 0%, #6EE7B7 100%);
}

.status-locked-inline {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #991B1B;
    border-color: rgba(220, 38, 38, 0.2);
}

.status-locked-inline:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
    background: linear-gradient(135deg, #FECACA 0%, #FCA5A5 100%);
}

.status-badge-inline i {
    font-size: 12px;
    margin-right: 5px;
    opacity: 0.9;
}

/* User Create Info Container */
.user-create-info-container {
    padding: 8px 0;
    width: 100%;
    box-sizing: border-box;
}

.user-create-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.user-create-row:last-child {
    margin-bottom: 0;
}

.user-create-label {
    font-size: 11px;
    color: #6B7280;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.user-create-value {
    font-size: 12px;
    color: #374151;
    font-weight: 500;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.product-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.product-code-badge {
    display: inline-flex;
    align-items: center;
    background: #374151;
    color: #FFFFFF;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.product-name-modern {
    color: #F26017;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.product-details-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* Product Total Badge (Thành Tiền) */
.product-total-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #065F46;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.15);
}

.product-total-badge i {
    font-size: 13px;
    margin-right: 3px;
    color: #059669;
}

/* Product Point Badge */
.product-point-badge {
    display: inline-flex;
    align-items: center;
    background: #E0E7FF;
    color: #244B94;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
}

.product-point-badge i {
    font-size: 12px;
    margin-right: 3px;
    color: #244B94;
}

/* Product Status Inline */
.product-status-inline {
    display: inline-flex;
    align-items: center;
}

.status-badge-inline {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-active-inline {
    background: #D1FAE5;
    color: #065F46;
}

.status-active-inline i {
    font-size: 11px;
    margin-right: 3px;
    color: #059669;
}

.status-locked-inline {
    background: #FEE2E2;
    color: #991B1B;
}

.status-locked-inline i {
    font-size: 11px;
    margin-right: 3px;
    color: #DC2626;
}

/* ================================================================ */
/* Action Buttons - Desktop Table (Table.cshtml) */
/* ================================================================ */
.layui-table td .layui-btn {
    /* margin: 0 3px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 16px;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    gap: 0; */
}

.layui-table td .layui-btn i,
.layui-table td .layui-btn .ok-icon {
    font-size: 16px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

/* Edit Button - Blue */
.layui-table td .layui-btn[lay-event="edit"] {
    background: #244B94;
    color: #FFFFFF;
    border-color: #244B94;
}

.layui-table td .layui-btn[lay-event="edit"]:hover {
    background: #1A3A6F;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(36, 75, 148, 0.3);
}

.layui-table td .layui-btn[lay-event="edit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

/* Info Button - Green */
.layui-table td .layui-btn[lay-event="info"] {
    background: #059669;
    color: #FFFFFF;
    border-color: #059669;
}

.layui-table td .layui-btn[lay-event="info"]:hover {
    background: #047857;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
}

.layui-table td .layui-btn[lay-event="info"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

/* Delete Button - Red */
.layui-table td .layui-btn[lay-event="del"] {
    background: #DC2626;
    color: #FFFFFF;
    border-color: #DC2626;
}

.layui-table td .layui-btn[lay-event="del"]:hover {
    background: #B91C1C;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.layui-table td .layui-btn[lay-event="del"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

/* Purchase Button - Orange */
.layui-table td .layui-btn[lay-event="purchase"] {
    background: #F26017;
    color: #FFFFFF;
    border-color: #F26017;
}

.layui-table td .layui-btn[lay-event="purchase"]:hover {
    background: #D9550F;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(242, 96, 23, 0.3);
}

.layui-table td .layui-btn[lay-event="purchase"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(242, 96, 23, 0.2);
}

/* Default button hover for other actions */
.layui-table td .layui-btn:not([lay-event="edit"]):not([lay-event="info"]):not([lay-event="del"]):not([lay-event="purchase"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Action column specific styling */
.layui-table tbody td:last-child {
    padding: 8px 10px;
    white-space: nowrap;
}

.layui-table thead th:last-child {
    padding: 12px 10px;
}

/* ============================================================================
   2. COMPONENTS - OPERATION BUTTONS CONTAINER
   ============================================================================ */
.operation-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding: 0px;
    min-height: 60px;
    width: 100%;
}

/* Style buttons in operation column - Desktop size */
.layui-table-body td .operation-buttons-container .layui-btn,
.layui-table-body td .operation-buttons-container a.layui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 100px;
    min-height: 35px;
    max-width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    border-radius: 8px;
}

/* Button hover effects */
.layui-table-body td .operation-buttons-container .layui-btn:hover,
.layui-table-body td .operation-buttons-container a.layui-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Icon spacing in buttons - Desktop size */
.layui-table-body td .operation-buttons-container .layui-btn .ok-icon,
.layui-table-body td .operation-buttons-container a.layui-btn .ok-icon {
    margin-right: 0px;
    font-size: 16px;
}

.layui-table-body td .operation-buttons-container .layui-btn i,
.layui-table-body td .operation-buttons-container a.layui-btn i {
    font-size: 16px;
    margin-right: 6px;
}

/* Ensure operation column cells are properly aligned */
.layui-table-body td:last-child,
.layui-table-header th:last-child {
    vertical-align: middle;
    text-align: center;
    padding: 8px 10px;
    box-sizing: border-box;
}

/* Operation column container - Căn phải */
.layui-table-body td:last-child .operation-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

/* Responsive: if too many buttons, allow wrapping */
@media (max-width: 1200px) {
    .operation-buttons-container {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .layui-table-body td .operation-buttons-container .layui-btn,
    .layui-table-body td .operation-buttons-container a.layui-btn {
        min-width: 60px;
        max-width: 140px;
    }
}

/* Mobile: Center align operation buttons */
@media (max-width: 768px) {
    .layui-table-body td:last-child .operation-buttons-container {
        justify-content: center !important;
    }
    
    .layui-table-body td:last-child,
    .layui-table-header th:last-child {
        text-align: center !important;
    }
    
    .product-actions-container .operation-buttons-container {
        justify-content: center !important;
    }
}

/* ================================================================ */
/* Pagination Modern Style (Table.cshtml) */
/* ================================================================ */
.layui-laypage {
    margin: 20px 0;
}

.layui-laypage a, .layui-laypage span {
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    transition: all 0.2s;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: #244B94;
    border-color: #244B94;
    color: #FFFFFF;
}

.layui-laypage a:hover {
    color: #244B94;
    border-color: #244B94;
}

/* ================================================================ */
/* Form Styles (Add.cshtml) */
/* ================================================================ */
.form-container {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 24px;
}

.form-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--primary-blue);
}

.form-header h2 {
    color: var(--primary-blue);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-header h2 i {
    color: var(--primary-orange);
    font-size: 28px;
}

.layui-form-item {
    margin-bottom: 10px;
    position: relative;
}

/* Form Field Wrapper */
.form-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.layui-form-label {
    width: auto !important;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 !important;
    margin-bottom: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: left;
    line-height: 1.5;
}

.layui-form-label i {
    color: var(--primary-blue);
    font-size: 14px;
    width: auto;
    text-align: center;
    transition: color 0.2s ease;
}

.layui-form-label:hover {
    color: var(--primary-blue);
}

.layui-form-label:hover i {
    color: var(--primary-orange);
}

.layui-input-block {
    margin-left: 0 !important;
    position: relative;
    width: 100%;
    min-height: 40px;
}

.input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.layui-input {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    font-size: 14px;
    color: #1F2937;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--white);
    width: 100%;
    box-sizing: border-box;
    font-weight: 400;
}

.layui-input:focus {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(36, 75, 148, 0.1) !important;
    outline: none;
    background: #FFFFFF;
}

.layui-input:hover:not(:focus) {
    border-color: #D1D5DB !important;
    background: #FAFBFC;
}

.layui-input::placeholder {
    color: #9CA3AF;
    font-size: 14px;
    font-weight: 400;
}

/* Input focus với label */
.form-field-wrapper:focus-within .layui-form-label {
    color: var(--primary-blue);
}

.form-field-wrapper:focus-within .layui-form-label i {
    color: var(--primary-orange);
}

/* Button Styles */
#buttons {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

#buttons .layui-input-block {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-left: 0 !important;
}

#submit {
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 50%, #244B94 100%) !important;
    background-size: 200% 200% !important;
    border: 1.5px solid #244B94 !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 24px !important;
    border-radius: 8px !important;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(36, 75, 148, 0.2), 0 1px 3px rgba(36, 75, 148, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.3px;
}

#submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

#submit:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 50%, #1A3A6F 100%) !important;
    background-position: 100% 0 !important;
    border-color: #1A3A6F !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.3), 0 2px 6px rgba(36, 75, 148, 0.2);
}

#submit:hover::before {
    left: 100%;
}

#submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(36, 75, 148, 0.2);
    transition: all 0.15s ease;
}

#submit:focus {
    outline: none;
    border-color: #244B94 !important;
    box-shadow: 0 0 0 3px rgba(36, 75, 148, 0.15), 0 4px 12px rgba(36, 75, 148, 0.3);
}

#submit:focus-visible {
    outline: 2px solid #244B94;
    outline-offset: 2px;
}

#submit i {
    font-size: 16px;
    margin: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: inherit;
    position: relative;
    z-index: 1;
}

#submit:hover i {
    transform: scale(1.1);
}

#submit:active i {
    transform: scale(1);
}

/* Loading state */
#submit.loading {
    pointer-events: none;
    opacity: 0.8;
}

#submit.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#closeBtn {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%) !important;
    border: 1.5px solid #E5E7EB !important;
    color: #6B7280 !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 24px !important;
    border-radius: 8px !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#closeBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.6s ease;
}

#closeBtn:hover {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important;
    border-color: #F87171 !important;
    color: #DC2626 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2), 0 2px 6px rgba(220, 38, 38, 0.15);
}

#closeBtn:hover::before {
    left: 100%;
}

#closeBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15);
    transition: all 0.15s ease;
}

#closeBtn:focus {
    outline: none;
    border-color: #F87171 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15), 0 4px 12px rgba(220, 38, 38, 0.2);
}

#closeBtn:focus-visible {
    outline: 2px solid #F87171;
    outline-offset: 2px;
}

#closeBtn i {
    font-size: 16px;
    margin: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: inherit;
    position: relative;
    z-index: 1;
}

#closeBtn:hover i {
    transform: rotate(90deg);
    color: #DC2626;
}

#closeBtn:active i {
    transform: rotate(90deg) scale(0.95);
}

/* Radio Button Styles */
.layui-form-radio-group {
    display: flex;
    gap: 24px;
    align-items: center;
}

.layui-form-radio {
    margin-right: 0;
    margin-top: 0;
}

.layui-form-radio > i {
    color: var(--primary-blue) !important;
    font-size: 16px;
    transition: all 0.2s ease;
}

.layui-form-radio:hover > i {
    color: var(--primary-orange) !important;
}

.layui-form-radioed > i {
    color: var(--primary-orange) !important;
}

.layui-form-radio > div {
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.layui-form-radio:hover > div {
    color: var(--primary-blue);
}

.layui-form-radioed > div {
    color: var(--primary-blue);
    font-weight: 600;
}

/* ================================================================ */
/* Status Radio Group - Modern Style (Add.cshtml) */
/* ================================================================ */
.status-radio-group-modern {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.status-radio-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.status-radio-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.status-radio-option i {
    font-size: 16px;
    transition: all 0.3s ease;
}

/* Kinh Doanh - Active Status */
.status-radio-active .status-radio-content {
    background: #F0FDF4;
    color: #065F46;
    border-color: #D1FAE5;
}

.status-radio-active .status-radio-content i {
    color: #059669;
}

.status-radio-active:hover .status-radio-content {
    background: #D1FAE5;
    border-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
}

.status-radio-active input[type="radio"]:checked + .status-radio-content {
    background: #D1FAE5;
    color: #065F46;
    border-color: #059669;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
    transform: scale(1.02);
}

.status-radio-active input[type="radio"]:checked + .status-radio-content i {
    color: #059669;
    transform: scale(1.1);
}

/* Hết Hàng - Locked Status */
.status-radio-locked .status-radio-content {
    background: #FEF2F2;
    color: #991B1B;
    border-color: #FEE2E2;
}

.status-radio-locked .status-radio-content i {
    color: #DC2626;
}

.status-radio-locked:hover .status-radio-content {
    background: #FEE2E2;
    border-color: #DC2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.status-radio-locked input[type="radio"]:checked + .status-radio-content {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #DC2626;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    transform: scale(1.02);
}

.status-radio-locked input[type="radio"]:checked + .status-radio-content i {
    color: #DC2626;
    transform: scale(1.1);
}

/* Focus state for accessibility */
.status-radio-option input[type="radio"]:focus + .status-radio-content {
    outline: 2px solid #244B94;
    outline-offset: 2px;
}

/* Disabled state */
.status-radio-option input[type="radio"]:disabled + .status-radio-content {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-radio-option input[type="radio"]:disabled:hover + .status-radio-content {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Form Section Divider */
.form-section {
    margin: 24px 0;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.form-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.form-section-title {
    color: var(--primary-blue);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section-title i {
    color: var(--primary-blue);
    font-size: 18px;
}

/* Two Column Layout - Panel trái 2 phần, Panel phải 1 phần */
.form-panels-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.form-panel {
    background: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

/* .form-panel-left and .form-panel-right - No additional styles needed */

.form-panel-full {
    grid-column: 1 / -1; /* Chiếm toàn bộ chiều ngang */
    width: 100%;
}

@media screen and (max-width: 768px) {
    .form-panels-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .form-panel-full {
        grid-column: 1;
    }
}

.form-panel .form-section {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-top: none;
    border-bottom: 1px solid var(--border-color);
}

.form-panel .form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-panel .form-section:first-child {
    padding-top: 0;
}

/* Utility Classes */
.fr {
    float: right;
}

.img-headshot {
    border: medium none;
    border-radius: 50%;
    cursor: pointer;
    height: 90px;
    position: absolute;
    top: -30px;
    width: 90px;
}

/* Ẩn layui-layer-title */
.layui-layer-title {
    display: none !important;
}

/* ================================================================ */
/* Friendly Notification System - Professional Design */
/* ================================================================ */
.custom-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 320px;
    max-width: 420px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 20px 24px;
    z-index: 10000;
    animation: slideInRight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.custom-notification.success {
    border-left-color: #059669;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF4 100%);
}

.custom-notification.error {
    border-left-color: #DC2626;
    background: linear-gradient(135deg, #FFFFFF 0%, #FEF2F2 100%);
}

.custom-notification.info {
    border-left-color: #244B94;
    background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%);
}

.custom-notification.warning {
    border-left-color: #F26017;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF7ED 100%);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.custom-notification.success .notification-icon {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #059669;
}

.custom-notification.error .notification-icon {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #DC2626;
}

.custom-notification.info .notification-icon {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #244B94;
}

.custom-notification.warning .notification-icon {
    background: linear-gradient(135deg, #FED7AA 0%, #FCD34D 100%);
    color: #F26017;
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #1F2937;
}

.notification-message {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
    line-height: 1.6;
}

.notification-close {
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    font-size: 18px;
    padding: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.notification-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
    transform: rotate(90deg) scale(1.1);
}

.notification-close:active {
    transform: rotate(90deg) scale(0.95);
}

.custom-notification.hiding {
    animation: slideOutRight 0.5s ease forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ================================================================ */
/* Friendly Confirm Dialog - Professional Design */
/* ================================================================ */
/* Enhanced Layui Layer Confirm Dialog Styles */
.layui-layer-content {
    /* border-radius: 12px !important; */
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.layui-layer-title {
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
    border-radius: 12px 12px 0 0 !important;
    font-size: 16px !important;
    display: none !important;
    align-items: center !important;
    gap: 10px !important;
}

.layui-layer-title i {
    font-size: 18px !important;
    opacity: 0.95 !important;
}

.layui-layer-content .confirm-content-wrapper {
    padding: 32px 24px;
    text-align: center;
}

.layui-layer-content .confirm-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.2);
}

.layui-layer-content .confirm-icon-wrapper i {
    font-size: 40px;
    color: #244B94;
}

.layui-layer-content .confirm-title {
    font-size: 22px;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
}

.layui-layer-content .confirm-message {
    font-size: 15px;
    color: #6B7280;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.layui-layer-content .confirm-details {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-radius: 12px;
    padding: 16px;
    margin: 0 0 20px 0;
    border: 1px solid #E5E7EB;
}

.layui-layer-content .confirm-info-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #F0FDF4;
    border-radius: 8px;
    border: 1px solid #D1FAE5;
    margin-top: 16px;
}

.layui-layer-content .confirm-info-box i {
    font-size: 16px;
    color: #059669;
}

.layui-layer-content .confirm-info-box p {
    font-size: 13px;
    color: #065F46;
    margin: 0;
    font-weight: 500;
}

.layui-layer-btn {
    border-top: 1px solid #E5E7EB !important;
    padding: 16px 20px !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
}

.layui-layer-btn a {
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 14px !important;
    min-width: 120px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.layui-layer-btn .layui-layer-btn0 {
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%) !important;
    color: #FFFFFF !important;
}

.layui-layer-btn .layui-layer-btn0:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.4) !important;
}

.layui-layer-btn .layui-layer-btn0:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3) !important;
}

.layui-layer-btn .layui-layer-btn1 {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%) !important;
    color: #374151 !important;
    border: 1.5px solid #E5E7EB !important;
}

.layui-layer-btn .layui-layer-btn1:hover {
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%) !important;
    border-color: #D1D5DB !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.layui-layer-btn .layui-layer-btn1:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.layui-layer-btn a i {
    font-size: 16px !important;
    margin: 0 !important;
}

/* Delete Confirm - Red Theme */
.layui-layer-content.delete-confirm .confirm-icon-wrapper {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
}

.layui-layer-content.delete-confirm .confirm-icon-wrapper i {
    color: #DC2626;
}

.layui-layer-content.delete-confirm .layui-layer-btn .layui-layer-btn0 {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
}

.layui-layer-content.delete-confirm .layui-layer-btn .layui-layer-btn0:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

/* Warning Confirm - Orange Theme */
.layui-layer-content.warning-confirm .confirm-icon-wrapper {
    background: linear-gradient(135deg, #FED7AA 0%, #FCD34D 100%);
}

.layui-layer-content.warning-confirm .confirm-icon-wrapper i {
    color: #F26017;
}

.layui-layer-content.warning-confirm .layui-layer-btn .layui-layer-btn0 {
    background: linear-gradient(135deg, #F26017 0%, #E04E0E 100%) !important;
}

.layui-layer-content.warning-confirm .layui-layer-btn .layui-layer-btn0:hover {
    background: linear-gradient(135deg, #E04E0E 0%, #F26017 100%) !important;
    box-shadow: 0 4px 12px rgba(242, 96, 23, 0.4) !important;
}

/* Success Confirm - Green Theme */
.layui-layer-content.success-confirm .confirm-icon-wrapper {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
}

.layui-layer-content.success-confirm .confirm-icon-wrapper i {
    color: #059669;
}

.layui-layer-content.success-confirm .layui-layer-btn .layui-layer-btn0 {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.layui-layer-content.success-confirm .layui-layer-btn .layui-layer-btn0:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4) !important;
}

/* ================================================================ */
/* Mobile Responsive Styles for Friendly Confirm Dialog */
/* ================================================================ */
@media (max-width: 768px) {
    .layui-layer {
        max-width: 90% !important;
        margin: 0 auto !important;
    }

    .layui-layer-content {
        border-radius: 16px !important;
    }

    .layui-layer-content .confirm-content-wrapper {
        padding: 24px 20px !important;
    }

    .layui-layer-content .confirm-icon-wrapper {
        width: 64px !important;
        height: 64px !important;
        margin: 0 auto 16px !important;
    }

    .layui-layer-content .confirm-icon-wrapper i {
        font-size: 32px !important;
    }

    .layui-layer-content .confirm-title {
        font-size: 18px !important;
        margin: 0 0 12px 0 !important;
        padding: 0 10px !important;
    }

    .layui-layer-content .confirm-message {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0 0 16px 0 !important;
        padding: 0 10px !important;

    }

    .layui-layer-btn {
        padding: 16px 20px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .layui-layer-btn a {
        width: 100% !important;
        min-width: unset !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    .layui-layer-btn a i {
        font-size: 18px !important;
    }

    .layui-layer-title {
        padding: 14px 16px !important;
        font-size: 15px !important;
    }

    .layui-layer-title i {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .layui-layer {
        max-width: 95% !important;
    }

    .layui-layer-content .confirm-content-wrapper {
        padding: 20px 16px !important;
    }

    .layui-layer-content .confirm-icon-wrapper {
        width: 56px !important;
        height: 56px !important;
        margin: 0 auto 14px !important;
    }

    .layui-layer-content .confirm-icon-wrapper i {
        font-size: 28px !important;
    }

    .layui-layer-content .confirm-title {
        font-size: 16px !important;
        margin: 0 0 10px 0 !important;
    }

    .layui-layer-content .confirm-message {
        font-size: 13px !important;
        margin: 0 0 14px 0 !important;
    }

    .layui-layer-btn {
        padding: 14px 16px !important;
        gap: 8px !important;
    }

    .layui-layer-btn a {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #244B94;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   3. UTILITIES - SUCCESS MODAL & NOTIFICATIONS
   ============================================================================ */
.success-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInSuccess 0.3s ease;
}

.success-modal-container {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 90%;
    z-index: 100000;
    animation: slideUpSuccess 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
}

.success-modal-header {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    padding: 30px;
    text-align: center;
    color: white;
}

.success-modal-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleInSuccess 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.success-modal-icon svg {
    width: 45px;
    height: 45px;
    fill: white;
}

.success-modal-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.success-modal-body {
    padding: 40px 30px;
    text-align: center;
}

.success-modal-message {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.success-modal-button {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    border: none;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
    min-width: 180px;
}

.success-modal-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.6);
}

.success-modal-button:active {
    transform: translateY(0);
}

@keyframes fadeInSuccess {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUpSuccess {
    from {
        opacity: 0;
        transform: translateY(-40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes scaleInSuccess {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* ============================================================================
   4. RESPONSIVE DESIGN - MEDIA QUERIES
   ============================================================================
   
   NOTE: Media queries are organized by breakpoint for optimal performance.
   All responsive styles are consolidated here for easier maintenance.
   
   Breakpoints:
   - Mobile: max-width 768px
   - Tablet: 769px - 1024px  
   - Desktop: min-width 1025px
   
   ============================================================================ */
@media screen and (max-width: 768px) {
    body {
        padding: 12px;
    }

    .page-header-modern {
        padding: 12px 16px;
    }

    .page-title-section {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .page-actions {
        width: 100%;
        flex-direction: row;
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .page-actions .action-btn {
        width: auto;
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        min-width: 40px;
        flex-shrink: 0;
    }
    
    .page-actions .action-btn .action-btn-text {
        display: none;
    }
    
    .page-actions .action-btn i {
        margin-right: 0;
        font-size: 16px;
    }

    /* Statistics Cards - Mobile Compact */
    .stats-grid {
        display: none !important;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        margin-right: 12px;
        font-size: 18px;
    }

    .stat-icon i {
        font-size: 18px;
    }

    .stat-content p {
        font-size: 12px;
        margin: 0;
    }

    .stat-content h3 {
        font-size: 18px;
        margin: 2px 0 0 0;
    }

    /* Search Section - Mobile */
    .search-section-modern {
        padding: 16px;
        margin-bottom: 16px;
    }

    .search-title-modern {
        margin-bottom: 16px;
        font-size: 15px;
        gap: 8px;
    }

    .search-title-modern i {
        font-size: 16px;
    }

    .ok-search {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .search-field-wrapper {
        width: 100%;
    }

    .ok-search .layui-input-inline {
        width: 100%;
        min-width: 100%;
        margin-bottom: 0;
    }

    .search-label {
        font-size: 12px;
        gap: 5px;
    }

    .search-label i {
        font-size: 13px;
    }

    .ok-search .layui-input {
        height: 44px;
        line-height: 44px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 14px;
    }

    .input-icon {
        left: 12px;
        font-size: 15px;
    }

    .search-button-wrapper {
        width: 100%;
        margin-top: 4px;
    }

    .ok-search .layui-btn {
        width: 100%;
        height: 44px;
        line-height: 44px;
        padding: 0 24px;
    }

    /* Quick Search Panel - Mobile */
    .quick-search-form {
        flex-direction: column;
        gap: 12px;
    }

    .quick-search-field {
        width: 100%;
        min-width: 100%;
    }

    .quick-search-actions {
        width: 100%;
        flex-direction: column;
    }

    .quick-search-btn {
        width: 100%;
        justify-content: center;
    }

    .quick-search-input {
        height: 42px;
        line-height: 42px;
    }

    /* Search Modal - Mobile */
    .search-modal-overlay {
        padding: 10px;
    }

    .search-modal-container {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 12px;
    }

    .search-modal-header {
        padding: 20px;
    }

    .search-modal-title h3 {
        font-size: 18px;
    }

    .search-modal-body {
        padding: 0px !important;
        display: flex !important;
        flex-direction: column !important;
        max-height: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    
    .ok-search-modal {
        display: contents !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .search-modal-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .search-modal-footer {
        flex-direction: row;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
    }
    
    .search-modal-btn-cancel,
    .search-modal-btn-submit,
    .search-modal-btn-reset {
        width: auto;
        min-width: 44px;
        max-width: 44px;
        flex: 0 0 44px;
        flex-shrink: 0;
        justify-content: center;
    }

    .ok-search-modal .layui-input {
        height: 42px;
        line-height: 42px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .layui-input-inline {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Product info container mobile adjustments */
    .product-info-container {
        gap: 6px;
    }

    .product-name-row {
        gap: 6px;
    }

    .product-code-badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .product-name-modern {
        font-size: 14px;
    }

    .product-details-row {
        gap: 6px;
        flex-wrap: wrap;
    }

    .product-total-badge,
    .product-point-badge,
    .status-badge-inline {
        font-size: 11px;
        padding: 2px 6px;
    }

    .product-total-badge i,
    .product-point-badge i,
    .status-badge-inline i {
        font-size: 10px;
        margin-right: 2px;
    }

    /* Price sale modern mobile adjustments */
    /* Đồng bộ kích thước price badges trên mobile */
    .price-primary-modern,
    .price-success-modern,
    .price-sale-modern {
        font-size: 12px;
        padding: 5px 10px;
        min-height: 28px;
    }

    .price-primary-modern i,
    .price-success-modern i,
    .price-sale-modern i {
        font-size: 11px;
        margin-right: 0;
    }

    /* Mobile Card - Responsive Adjustments */
    .mobile-card {
        padding: 14px;
        margin: 8px 0;
        border-radius: 10px;
    }

    .mobile-card::before {
        width: 3px;
    }

    .mobile-card-header {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .mobile-card-title-wrapper {
        gap: 8px;
    }

    .mobile-card-title {
        font-size: 16px;
        line-height: 1.3;
    }

    .mobile-card-stt {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .mobile-card-row {
        padding: 10px 0;
        flex-wrap: wrap;
    }

    .mobile-card-row-primary {
        padding: 12px 14px;
        margin: 0 -14px 10px -14px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .mobile-card-label {
        font-size: 12px;
        min-width: 85px;
        gap: 4px;
    }

    .mobile-card-label i {
        font-size: 11px;
        margin-right: 3px;
    }

    .mobile-card-value {
        font-size: 13px;
        text-align: right;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .mobile-card-value-primary {
        font-size: 14px !important;
    }

    .mobile-card-section {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .mobile-card-section-title {
        font-size: 11px;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }

    .mobile-card-value-address,
    .mobile-card-value-note {
        max-width: 55%;
        font-size: 12px !important;
    }

    .mobile-card-row-note {
        margin: 0 -14px;
        padding: 10px;
    }

    .mobile-card-actions {
        /* Styles commented out - add properties as needed */
        display: flex;
    }

    .mobile-card-actions .layui-btn {
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    .mobile-card-actions .layui-btn i {
        font-size: 14px;
    }


    .table-wrapper {
        overflow-x: visible;
    }

    /* Form Styles - Mobile */
    .form-container {
        padding: 16px;
        border-radius: 6px;
    }

    .form-header {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }

    .form-header h2 {
        font-size: 20px;
    }

    .form-header h2 i {
        font-size: 24px;
    }

    .form-field-wrapper {
        gap: 6px;
    }

    .layui-form-label {
        width: auto !important;
        margin-bottom: 0;
        padding: 0 !important;
        font-size: 12px;
    }

    .layui-form-label i {
        font-size: 13px;
    }

    .layui-input-block {
        margin-left: 0 !important;
    }

    .layui-input {
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 12px !important;
    }

    .form-section {
        margin: 20px 0;
        padding: 16px 0;
    }

    .form-section-title {
        font-size: 15px;
        margin-bottom: 16px;
    }

    #buttons {
        margin-top: 20px;
        padding-top: 20px;
    }

    #buttons .layui-input-block {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        justify-content: center;
        align-items: stretch;
        width: 100%;
    }

    #submit, #closeBtn {
        flex: 1 1 0;
        min-width: 100px;
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    #submit i, #closeBtn i {
        font-size: 14px !important;
        margin-right: 4px;
    }

    /* Status Radio Group - Mobile Responsive */
    .status-radio-group-modern {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .status-radio-option {
        width: 100%;
    }

    .status-radio-content {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 13px;
    }

    .status-radio-content i {
        font-size: 15px;
    }

    /* Two column layout becomes single column on mobile */
    .form-panels-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-panel {
        padding: 16px;
    }

    .breadcrumb-nav {
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* Success Modal - Mobile */
    .success-modal-container {
        max-width: 90%;
        margin: 20px;
    }

    .success-modal-header {
        padding: 25px 20px;
    }

    .success-modal-body {
        padding: 30px 20px;
    }

    .success-modal-title {
        font-size: 20px;
    }

    /* Notification Mobile */
    .custom-notification {
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        right: 20px;
        left: 20px;
        padding: 16px 20px;
    }

    .notification-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .notification-title {
        font-size: 15px;
    }

    .notification-message {
        font-size: 13px;
    }

    /* Confirm Dialog Mobile */
    .layui-layer-content .confirm-content-wrapper {
        padding: 24px 16px;
    }

    .layui-layer-content .confirm-icon-wrapper {
        width: 60px;
        height: 60px;
        margin: 0 auto 16px;
    }

    .layui-layer-content .confirm-icon-wrapper i {
        font-size: 32px;
    }

    .layui-layer-content .confirm-title {
        font-size: 18px;
    }

    .layui-layer-content .confirm-message {
        font-size: 14px;
        word-break: break-word;
    }

    .layui-layer-btn {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .layui-layer-btn a {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Loading Overlay Mobile */
    .loading-spinner {
        width: 50px;
        height: 50px;
        border-width: 3px;
    }
}

@media screen and (min-width: 769px) {
    .mobile-card-view {
        display: none;
    }
}

/* Tablet Responsive - Page Actions and Search Buttons */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .page-actions {
        gap: 10px;
    }
    
    .page-actions .action-btn {
        min-width: 110px;
        padding: 0 20px;
        font-size: 13px;
    }
    
    .ok-search .layui-btn {
        min-width: 110px;
        padding: 0 24px;
    }
}

@media (max-width: 480px) {
    .success-modal-container {
        max-width: 90%;
        margin: 20px;
    }

    .success-modal-header {
        padding: 25px 20px;
    }

    .success-modal-body {
        padding: 30px 20px;
    }

    .success-modal-title {
        font-size: 20px;
    }
}

/* ================================================================ */
/* Customer Form - Enhanced Responsive Styles */
/* ================================================================ */

/* Read-only Field Display - Professional Style */
.readonly-field-display {
    padding: 10px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #F9FAFB;
    color: #1F2937;
    font-size: 14px;
    font-weight: 500;
    min-height: 40px;
    display: flex;
    align-items: center;
    word-break: break-word;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.readonly-field-display:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.readonly-field-display.multiline {
    min-height: 60px;
    white-space: pre-wrap;
    align-items: flex-start;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Textarea Enhanced Styling */
.layui-textarea {
    min-height: 120px;
    padding: 12px !important;
    line-height: 1.6 !important;
    resize: vertical;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.layui-textarea:focus {
    min-height: 140px;
}

/* Form Grid - Enhanced Responsive */
.form-grid-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media screen and (max-width: 768px) {
    .form-grid-two-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Action Buttons Section - Export Report */
.action-buttons-section {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.action-buttons-section .button-group-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.action-buttons-section .layui-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 0.5rem;
}

.action-buttons-section .layui-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.action-buttons-section .export-btn-word {
    background: #2b5797;
    color: white;
}

.action-buttons-section .export-btn-word:hover {
    background: #1e3f6b;
}

.action-buttons-section .export-btn-pdf {
    background: #dc2626;
    color: white;
}

.action-buttons-section .export-btn-pdf:hover {
    background: #b91c1c;
}

.action-buttons-section .export-btn-audio {
    background: #059669;
    color: white;
}

.action-buttons-section .export-btn-audio:hover {
    background: #047857;
}

.action-buttons-section .layui-btn-primary {
    background: #6b7280;
    color: white;
    border-color: #6b7280;
}

.action-buttons-section .layui-btn-primary:hover {
    background: #4b5563;
    border-color: #4b5563;
}

@media (max-width: 768px) {
    .action-buttons-section .button-group-container {
        flex-direction: column;
    }

    .action-buttons-section .layui-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Button Group - Professional Layout */
.button-group-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0 !important;
}

.button-group-container .layui-btn {
    margin: 0 !important;
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 44px;
    line-height: 44px;
    padding: 0 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.button-group-container .layui-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.button-group-container .layui-btn:active::before {
    width: 300px;
    height: 300px;
}

.button-group-container .layui-btn i {
    font-size: 15px;
    margin: 0;
    transition: transform 0.3s ease;
}

.button-group-container .layui-btn:hover i {
    transform: scale(1.1);
}

.button-group-container .layui-btn:active {
    transform: translateY(0);
}

.button-group-container .layui-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(36, 75, 148, 0.2);
}

/* Tablet Button Group */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .button-group-container {
        gap: 10px;
    }
    
    .button-group-container .layui-btn {
        min-width: 120px;
        padding: 0 20px;
        font-size: 13px;
        height: 42px;
        line-height: 42px;
    }
}

/* Export Button Styles - Professional & Unified */
.export-btn-word {
    background: linear-gradient(135deg, #2B579A 0%, #1E3A5F 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(43, 87, 154, 0.25) !important;
}

.export-btn-word:hover {
    background: linear-gradient(135deg, #1E3A5F 0%, #2B579A 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(43, 87, 154, 0.35) !important;
}

.export-btn-word:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(43, 87, 154, 0.25) !important;
}

.export-btn-pdf {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
}

.export-btn-pdf:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35) !important;
}

.export-btn-pdf:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
}

.export-btn-audio {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}

.export-btn-audio:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35) !important;
}

.export-btn-audio:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}

.export-btn-copy {
    background: linear-gradient(135deg, #F26017 0%, #E04E0E 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(242, 96, 23, 0.25) !important;
}

.export-btn-copy:hover {
    background: linear-gradient(135deg, #E04E0E 0%, #F26017 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(242, 96, 23, 0.35) !important;
}

.export-btn-copy:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(242, 96, 23, 0.25) !important;
}

/* Close Button - Unified Style */
.button-group-container .layui-btn-primary {
    background: #F3F4F6 !important;
    color: #374151 !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.button-group-container .layui-btn-primary:hover {
    background: #E5E7EB !important;
    color: #1F2937 !important;
    border-color: #9CA3AF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.button-group-container .layui-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Form Panel - Enhanced Spacing */
.form-panel .form-section {
    padding-bottom: 0px;
    margin-bottom: 5px;
}

.form-panel .form-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

/* Form Field Spacing - Mobile Optimized */
@media screen and (max-width: 768px) {
    .form-grid-two-columns {
        gap: 0;
    }
    
    .layui-form-item {
        margin-bottom: 18px;
    }
    
    .form-panel {
        padding: 16px;
    }
    
    .form-panel .form-section {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    .button-group-container {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    
    .button-group-container .layui-btn {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        justify-content: center;
        height: 48px;
        line-height: 48px;
        padding: 0 20px;
        font-size: 15px;
        border-radius: 12px;
        gap: 10px;
    }
    
    .button-group-container .layui-btn i {
        font-size: 16px;
    }
    
    .readonly-field-display {
        font-size: 13px;
        padding: 10px;
    }
    
    .layui-textarea {
        min-height: 100px;
        font-size: 14px;
    }
}

/* Link Input - Readonly Style */
input.layui-input[readonly] {
    background: #F9FAFB !important;
    color: #1F2937 !important;
    cursor: text;
    border-color: #E5E7EB !important;
}

input.layui-input[readonly]:focus {
    border-color: #D1D5DB !important;
    box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.1) !important;
}

/* Form Container - Enhanced Padding */
.form-container {
    padding: 24px;
}

/* Tablet Responsive */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .form-panels-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .form-grid-two-columns {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    
    .form-container {
        padding: 20px;
    }
}

@media screen and (max-width: 768px) {
    .form-container {
        padding: 16px;
    }
}

/* Page Header - Mobile Optimized */
@media screen and (max-width: 768px) {
    .page-header-modern {
        padding: 12px 16px;
        margin: -10px -10px 0px -10px;
    }
    
    .page-title-content h2 {
        font-size: 20px;
    }
    
    .page-title-content p {
        font-size: 13px;
    }
    
    .back-button {
        padding: 8px 16px;
        font-size: 13px;
        min-width: auto;
    }
    
    .back-button span {
        display: none;
    }
    
    .back-button i {
        margin: 0;
    }
}

/* Form Section Title - Mobile */
@media screen and (max-width: 768px) {
    .form-section-title {
        font-size: 15px;
        margin-bottom: 16px;
    }
    
    .form-section-title i {
        font-size: 16px;
    }
}

/* Gender Radio - Mobile Optimization */
@media screen and (max-width: 768px) {
    .layui-form-radio-group {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .layui-form-radio {
        width: 100%;
    }
}

/* Note Panel - Full Height Textarea */
.form-panel-note {
    display: flex;
    flex-direction: column;
}

.form-section-note {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.form-section-note .form-section-title {
    margin-bottom: 16px;
    flex-shrink: 0;
    padding-bottom: 0;
}

.layui-form-item-note {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    min-height: 0;
}

.layui-form-item-note .form-field-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
}

.layui-form-item-note .layui-input-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-left: 0 !important;
}

.input-wrapper-note {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.textarea-note {
    flex: 1;
    min-height: 200px;
    height: 100% !important;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

/* Desktop: Ensure note panel matches left panel height */
@media screen and (min-width: 769px) {
    .form-panels-container {
        align-items: stretch;
    }
    
    .form-panel-note {
        display: flex;
        flex-direction: column;
    }
    
    .textarea-note {
        min-height: 300px;
    }
}

/* Tablet: Medium height */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .textarea-note {
        min-height: 250px;
    }
}

/* Mobile: Reset full height behavior */
@media screen and (max-width: 768px) {
    .form-panel-note {
        height: auto;
    }
    
    .form-section-note {
        min-height: auto;
    }
    
    .layui-form-item-note {
        min-height: auto;
    }
    
    .textarea-note {
        min-height: 150px;
        height: auto !important;
        flex: none;
    }
}

/* ================================================================ */
/* SysSet Specific Styles */
/* ================================================================ */

/* Info Box - Helper Text Styling */
.form-field-wrapper .input-wrapper + div[style*="background"] {
    margin-top: 8px;
    padding: 12px 14px;
    background: #F9FAFB !important;
    border-left: 3px solid #244B94 !important;
    border-radius: 6px;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.6;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.form-field-wrapper .input-wrapper + div[style*="background"] i {
    color: #244B94;
    margin-right: 6px;
    font-size: 14px;
}

/* Checkbox Switch Styling - Modern Design */
.layui-form-switch {
    width: 56px;
    height: 28px;
    border-radius: 14px;
    background: #D1D5DB;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.layui-form-switch::after {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    top: 2px;
    left: 2px;
}

.layui-form-switch:hover {
    background: #9CA3AF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.layui-form-switch.layui-form-onswitch {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.layui-form-switch.layui-form-onswitch:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
}

.layui-form-switch.layui-form-onswitch::after {
    left: 30px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.layui-form-switch em {
    display: none;
}

/* Checkbox Switch with Text Labels */
.layui-form-switch[lay-text] {
    width: auto;
    min-width: 56px;
    padding: 0 8px;
}

.layui-form-switch[lay-text]::before {
    content: attr(lay-text);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
    z-index: 1;
    transition: opacity 0.2s;
}

.layui-form-switch[lay-text]::after {
    z-index: 2;
}

.layui-form-switch[lay-text].layui-form-onswitch::before {
    opacity: 1;
}

.layui-form-switch[lay-text]:not(.layui-form-onswitch)::before {
    opacity: 0;
}

/* Message Display Styling */
.div-msg {
    margin-left: 16px;
    padding: 12px 16px;
    background: #F0FDF4;
    border: 1px solid #D1FAE5;
    border-radius: 6px;
    color: #065F46;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.1);
}

.div-msg i {
    margin-right: 8px;
    font-size: 16px;
    color: #059669;
}

/* Select Dropdown in Forms - Enhanced Styling */
.form-field-wrapper select.layui-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23244B94' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 40px;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.form-field-wrapper select.layui-input:hover {
    border-color: #D1D5DB !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.form-field-wrapper select.layui-input:focus {
    border-color: #244B94 !important;
    box-shadow: 0 0 0 4px rgba(36, 75, 148, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px);
}

/* Password Input Styling */
input[type="password"].layui-input {
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

/* ================================================================ */
/* Icon Picker Button - Modern Style */
/* ================================================================ */
.icon-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
    white-space: nowrap;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.icon-picker-btn:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
    box-shadow: 0 4px 8px rgba(36, 75, 148, 0.3);
    transform: translateY(-2px);
    color: #FFFFFF;
    text-decoration: none;
}

.icon-picker-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

.icon-picker-btn i {
    font-size: 14px;
    margin: 0;
}

/* ================================================================ */
/* Checkbox Group - Modern Style */
/* ================================================================ */
.checkbox-group-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    min-height: 60px;
}

.checkbox-group-modern .layui-form-checkbox {
    margin: 0;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.checkbox-group-modern .layui-form-checkbox:hover {
    border-color: #244B94;
    background: #F0F7FF;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.1);
    transform: translateY(-1px);
}

.checkbox-group-modern .layui-form-checkbox > i {
    color: #244B94 !important;
    font-size: 16px;
    transition: all 0.2s ease;
}

.checkbox-group-modern .layui-form-checkbox:hover > i {
    color: #1A3A6F !important;
}

.checkbox-group-modern .layui-form-checked {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #244B94;
    box-shadow: 0 2px 6px rgba(36, 75, 148, 0.2);
}

.checkbox-group-modern .layui-form-checked > i {
    color: #244B94 !important;
}

.checkbox-group-modern .layui-form-checkbox > div {
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.checkbox-group-modern .layui-form-checkbox:hover > div {
    color: #244B94;
}

.checkbox-group-modern .layui-form-checked > div {
    color: #244B94;
    font-weight: 600;
}

/* Tree Select Styling */
.layui-form-select {
    position: relative !important;
}

.layui-form-select .layui-input {
    cursor: pointer;
}

.layui-form-select .layui-edge {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transform-origin: center center !important;
    margin-top: 0 !important;
    border-width: 6px !important;
    border-top-color: #244B94 !important;
    border-top-style: solid !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
    width: 0 !important;
    height: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

.layui-form-select.layui-form-selected .layui-edge {
    transform: translateY(-50%) rotate(180deg) !important;
    transform-origin: center center !important;
    border-width: 6px !important;
    border-top-color: #244B94 !important;
    border-top-style: solid !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}

.layui-form-select dl {
    border: 2px solid #244B94;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
}

.layui-form-select dl dd {
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.layui-form-select dl dd:hover {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
}

.layui-form-select dl dd.layui-this {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    color: #244B94;
    font-weight: 600;
}

/* Responsive Adjustments for SysSet Forms */
@media screen and (max-width: 768px) {
    .form-field-wrapper .input-wrapper + div[style*="background"] {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .layui-form-switch {
        width: 50px;
        height: 26px;
    }
    
    .layui-form-switch::after {
        width: 22px;
        height: 22px;
    }
    
    .layui-form-switch.layui-form-onswitch::after {
        left: 26px;
    }
    
    .div-msg {
        margin-left: 0;
        margin-top: 12px;
        width: 100%;
        display: block;
    }
    
    .icon-picker-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .checkbox-group-modern {
        padding: 12px;
        gap: 8px;
    }
    
    .checkbox-group-modern .layui-form-checkbox {
        padding: 6px 12px;
        font-size: 13px;
    }
    
   
}

/* ================================================================ */
/* Professional Notification Toast Animations */
/* ================================================================ */
@keyframes iconBounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes iconShake {
    0%, 100% {
        transform: translateX(0) scale(0);
        opacity: 0;
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-4px) scale(1);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(4px) scale(1);
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Notification Toast Styles */
.notification-toast {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-toast:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

.notification-icon-wrapper {
    transition: transform 0.3s ease;
}

.notification-icon-wrapper:hover {
    transform: scale(1.1);
}

.notification-success .notification-icon-wrapper {
    animation: iconBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.notification-error .notification-icon-wrapper {
    animation: iconShake 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Responsive adjustments for notifications */
@media (max-width: 768px) {
    .notification-toast {
        min-width: 300px !important;
        max-width: calc(100vw - 40px) !important;
        padding: 16px 20px !important;
    }
    
    .notification-icon-wrapper {
        width: 40px !important;
        height: 40px !important;
    }
    
    .notification-icon-wrapper i {
        font-size: 20px !important;
    }
}

/* ================================================================ */
/* Fix Layout Lồng Nhau Khi Load Trong Layer Iframe */
/* ================================================================ */

/* Fix cho layer iframe content - đảm bảo không bị lồng */
.layui-layer-content {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    height: -webkit-fill-available !important;
}

.layui-layer-content iframe {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Đảm bảo body trong iframe không có margin/padding thừa */
.layui-layer-content body,
body {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Đảm bảo html trong iframe không có margin/padding thừa */
.layui-layer-content html,
html {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Fix cho ok-body khi load trong iframe */
.layui-layer-content .ok-body {
    padding: 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Đảm bảo page-header-modern không bị lồng trong iframe */
.layui-layer-content .page-header-modern {
    position: relative !important;
    z-index: 1 !important;
    margin: -10px -10px 0px -10px !important;
    clear: both !important;
}

/* Đảm bảo form-container không bị lồng trong iframe */
.layui-layer-content .form-container {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    clear: both !important;
}

/* Fix cho nested html/body tags trong iframe */
.layui-layer-content html,
.layui-layer-content body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Đảm bảo tất cả elements trong iframe sử dụng box-sizing */
.layui-layer-content *,

/* ============================================
   Product Info Container - Modern Card Layout
   ============================================ */

/* Product Info Container - Modern Card Layout */
.product-info-container-unified {
    padding: 2px;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.product-info-main {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 5px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-info-main:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #D1D5DB;
}

/* Header Section */
.product-header-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 5px;
    border-bottom: 1px solid #F3F4F6;
}

.product-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #244B94 0%, #1E3A8A 100%);
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

.purchase-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #2563EB;
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
    transition: all 0.2s ease;
}

.purchase-number-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.35);
    background: #1D4ED8;
}

/* Purchase Code Wrapper with Copy Button */
.purchase-code-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #ECFDF5;
    border: 1px solid #D1FAE5;
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.purchase-code-wrapper i.fas.fa-barcode {
    color: #059669;
    font-size: 13px;
    opacity: 0.9;
}

.purchase-code-wrapper:hover {
    background: #D1FAE5;
    border-color: #10B981;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

.purchase-code-text {
    font-weight: 600;
    color: #047857;
    user-select: text;
    font-size: 13px;
}

.purchase-code-copy-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    color: #059669;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    margin-left: 2px;
}

.purchase-code-copy-btn:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
    opacity: 1;
    transform: scale(1.1);
}

.purchase-code-copy-btn:active {
    transform: scale(0.95);
    background: #059669 !important;
}

.purchase-code-copy-btn i {
    font-size: 11px;
    transition: all 0.2s ease;
}

.product-header-content {
    flex: 1;
    min-width: 0;
}

.product-info-container-unified .product-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.product-name-row-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.product-info-container-unified .product-name-modern {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.5;
    flex: 1;
    min-width: 200px;
    text-align: left;
}

.product-code-badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #F3F4F6;
    color: #6B7280;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.product-code-badge-modern i {
    font-size: 11px;
    color: #9CA3AF;
}

/* Content Row - Two Column Layout */
.product-content-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 0px;
}

.product-card-row-primary {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Price Info Grid */
.product-info-container-unified .product-card-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-price-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.product-price-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F9FAFB;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    transition: all 0.2s ease;
    min-height: 44px;
}

.product-price-item:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.product-info-container-unified .product-card-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6B7280;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
    width: auto;
    min-width: 120px;
    flex-basis: auto;
}

.product-info-container-unified .product-card-label i {
    font-size: 11px;
    color: #9CA3AF;
}

.product-info-container-unified .product-card-value {
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.4;
    flex: 1;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Actions Container */
.product-actions-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.product-actions-container .layui-btn {
    margin: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    min-height: 42px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.product-actions-container .layui-btn i {
    font-size: 16px;
    margin: 0;
}

.product-actions-container .layui-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Table Cell Padding */
.layui-table-cell .product-info-container-unified {
    padding: 0;
}

.layui-table-view .layui-table-body td {
    padding: 12px 8px;
}

/* Responsive Design for Product Info */
@media (max-width: 768px) {
    .product-info-main {
        padding: 5px;
    }

    .product-info-container-unified .product-name-modern {
        font-size: 15px;
        min-width: 100%;
    }

    .product-content-row {
        flex-direction: column;
        gap: 12px;
    }

    .product-card-row-primary {
        width: 100%;
    }

    .product-price-info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .product-price-item {
        width: 100%;
    }

    .product-actions-container {
        justify-content: center;
        width: 100%;
    }
    
    .product-actions-container .operation-buttons-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
    }

    .product-actions-container .layui-btn {
        flex: 0 0 auto;
        min-width: 0;
        font-size: 13px;
        padding: 8px 14px;
        min-height: 38px;
    }
    
    .product-actions-container .layui-btn i {
        font-size: 14px;
    }
    
    /* Căn giữa operation buttons container trên mobile */
    .layui-table-body td:last-child .operation-buttons-container {
        justify-content: center;
    }
    
    .layui-table-body td:last-child,
    .layui-table-header th:last-child {
        text-align: center;
    }
}

/* Desktop: Larger action buttons */
@media (min-width: 769px) {
    .layui-table td .layui-btn {
        /* min-height: 44px;
        padding: 10px 20px;
        font-size: 15px; */
    }
    
    .layui-table td .layui-btn i {
        font-size: 17px;
        margin-right: 8px;
    }
    
    .product-actions-container .layui-btn {
        min-height: 44px;
        padding: 12px 22px;
        font-size: 15px;
    }
    
    .product-actions-container .layui-btn i {
        font-size: 17px;
    }
    
    .layui-table-body td .operation-buttons-container .layui-btn,
    .layui-table-body td .operation-buttons-container a.layui-btn {
        min-height: 40px;
        padding: 5px;
        margin: 5px;
        font-size: 15px;
    }
    
    .layui-table-body td .operation-buttons-container .layui-btn i,
    .layui-table-body td .operation-buttons-container a.layui-btn i,
    .layui-table-body td .operation-buttons-container .layui-btn .ok-icon,
    .layui-table-body td .operation-buttons-container a.layui-btn .ok-icon {
        font-size: 17px;
        margin-right: 0px;
    }
}
.layui-layer-content *::before,
.layui-layer-content *::after {
    box-sizing: border-box !important;
}

/* ================================================================ */
/* Styles moved from Table.cshtml inline styles */
/* ================================================================ */

/* Action buttons */
.action-btn-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #244B94 0%, #1E3A8A 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.25);
    letter-spacing: 0.3px;
}

.action-btn-search:hover {
    background: linear-gradient(135deg, #1E3A8A 0%, #244B94 100%);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.35);
    transform: translateY(-2px);
}

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

.action-btn-reload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.25);
    letter-spacing: 0.3px;
}

.action-btn-reload:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
    transform: translateY(-2px);
}

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

.action-btn-search i,
.action-btn-reload i {
    font-size: 14px;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Breadcrumb */
.breadcrumb-current {
    color: #1F2937;
    font-weight: 600;
}

.breadcrumb-separator .layui-icon {
    font-size: 12px;
}

/* Search modal header */
.search-modal-header-section {
    background: linear-gradient(135deg, #244B94 0%, #1E3A8A 100%);
    padding: 5px 5px;
    border-radius: 12px 12px 0 0;
    margin: 0px 0px 0px 0px;
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.15);
}

.search-modal-header-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-modal-header-icon {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search-modal-header-icon i {
    font-size: 24px;
    color: #FFFFFF;
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.search-modal-header-content {
    flex: 1;
}

.search-modal-header-title {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 6px 0;
    letter-spacing: 0.3px;
}

.search-modal-header-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
}

/* Search modal grid */
.search-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0px;
    margin-bottom: -20px;
}

/* Search modal layer */
.search-modal-layer {
    border-radius: 16px;
    overflow: hidden;
    top: 50% !important;
    left: 50% !important;
    margin-top: 0;
    margin-left: 0;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-modal-layer .layui-layer-content {
    height: auto !important;
    max-height: 85vh !important;
    overflow-y: auto;
    overflow-x: visible;
    padding: 0;
    border-radius: 12px;
}

.search-modal-body {
    overflow-y: visible;
    overflow-x: visible;
    padding: 0;
}

.search-modal-body .search-field-wrapper {
    margin-bottom: 20px;
}

.search-modal-body .layui-input {
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-modal-body .layui-input:focus {
    border-color: #244B94;
    box-shadow: 0 0 0 4px rgba(36, 75, 148, 0.12);
    outline: none;
}

.search-modal-body form.ok-search-modal {
    padding: 0 10px 10px 10px;
}

.search-modal-footer {
    padding: 10px;
    background: #F9FAFB;
    border-top: 1px solid #E5E7EB;
    border-radius: 0 0 12px 12px;
}

/* ============================================
   Search Select Modern - Standalone Style
   ============================================ */
/* Hiển thị đúng mũi tên và viền cho select trạng thái trong form tìm kiếm */
.search-select-modern {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 42px;
    padding: 10px 40px 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.5L10 12L14.5 7.5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: #111827;
    font-size: 14px;
    line-height: 20px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-select-modern:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.search-select-modern::-ms-expand {
    display: none;
}

.search-select-modern option {
    color: #111827;
}

/* ============================================
   Date Picker in Modal - Z-index Fix
   ============================================ */
/* Đảm bảo date picker hiển thị đúng trên modal */
.layui-laydate {
    z-index: 9999999 !important;
}

.layui-laydate-content {
    z-index: 9999999 !important;
}

/* Đảm bảo input date có cursor pointer */
#StartEndDate {
    cursor: pointer;
}

/* Input wrapper cho trạng thái với icon */
.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper #searchEnabledMarkDisplay {
    padding-right: 40px;
}

.input-icon-wrapper .fa-chevron-down {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6B7280;
    font-size: 12px;
    z-index: 1;
}

/* ============================================
   Status Select Modal
   ============================================ */
#statusSelectModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999;
    display: none;
}

.status-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.status-modal-overlay.active {
    opacity: 1;
}

.status-modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow: hidden;
    transition: transform 0.3s ease;
    z-index: 100000000;
}

.status-modal-container.active {
    transform: translate(-50%, -50%) scale(1);
}

.status-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
}

.status-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-modal-header h3 i {
    color: #059669;
    font-size: 20px;
}

.status-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #6B7280;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-modal-close:hover {
    background: #F3F4F6;
    color: #1F2937;
}

.status-modal-body {
    padding: 16px;
}

.status-option {
    padding: 14px 16px;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #FFFFFF;
}

.status-option:last-child {
    margin-bottom: 0;
}

.status-option:hover {
    border-color: #244B94;
    background: linear-gradient(135deg, #F0F4FF 0%, #E0E7FF 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.15);
}

.status-option.selected {
    border-color: #244B94;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    box-shadow: 0 0 0 3px rgba(36, 75, 148, 0.1);
}

.status-option.selected .status-option-content {
    color: #244B94;
    font-weight: 600;
}

.status-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #374151;
    font-size: 15px;
    transition: all 0.2s ease;
}

.status-option-content i {
    font-size: 18px;
    color: #6B7280;
    width: 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.status-option:hover .status-option-content i,
.status-option.selected .status-option-content i {
    color: #244B94;
    transform: scale(1.1);
}

.status-option-content span {
    flex: 1;
}

@media (max-width: 768px) {
    .status-modal-container {
        width: 95%;
        max-width: none;
    }
    
    .status-modal-header {
        padding: 16px 20px;
    }
    
    .status-modal-header h3 {
        font-size: 16px;
    }
    
    .status-modal-body {
        padding: 12px;
    }
    
    .status-option {
        padding: 12px 14px;
    }
    
    .status-option-content {
        font-size: 14px;
    }
}

/* ============================================
   DATE RANGE PICKER MODAL STYLES
   ============================================ */
.date-picker-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 100000000;
    transition: background 0.3s ease;
    display: none;
}

.date-picker-modal-overlay.active {
    background: rgba(0, 0, 0, 0.5);
    display: block;
}

.date-picker-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 100000001;
    max-width: 560px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
}

.date-picker-modal-container.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    display: block;
}

.date-picker-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #E5E7EB;
    background: linear-gradient(135deg, #244B94 0%, #1e3a8a 100%);
}

.date-picker-modal-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.date-picker-modal-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
}

.date-picker-modal-title-section h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}

.date-picker-modal-title-section p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

.date-picker-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.date-picker-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.date-picker-modal-body {
    padding: 24px;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}

.date-picker-calendars-wrapper {
    margin-bottom: 24px;
}

.date-picker-calendar {
    background: #ffffff;
}

.date-picker-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 4px;
}

.date-picker-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #E5E7EB;
    background: #ffffff;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.date-picker-nav-btn:hover {
    background: #EFF6FF;
    border-color: #244B94;
    color: #244B94;
    transform: scale(1.05);
}

.date-picker-month-year {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    text-align: center;
    flex: 1;
}

.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}

.date-picker-weekday {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
    padding: 8px 4px;
}

.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.date-picker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 500;
}

.date-picker-day:hover:not(.date-picker-day-empty):not(.date-picker-day-disabled) {
    background: #F3F4F6;
    transform: scale(1.1);
}

.date-picker-day-empty {
    cursor: default;
}

.date-picker-day-today {
    background: #EFF6FF;
    color: #244B94;
    font-weight: 600;
}

.date-picker-day-selected,
.date-picker-day-start,
.date-picker-day-end {
    background: linear-gradient(135deg, #244B94 0%, #1e3a8a 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(36, 75, 148, 0.4);
}

.date-picker-day-in-range {
    background: #DBEAFE;
    color: #1e40af;
}

.date-picker-day-disabled {
    color: #D1D5DB;
    cursor: not-allowed;
    opacity: 0.5;
}

.date-picker-selected-range {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    margin-top: 20px;
}

.date-picker-range-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.date-picker-range-item:last-child {
    margin-bottom: 0;
}

.date-picker-range-item label {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-picker-range-item label i {
    color: #244B94;
    font-size: 13px;
}

.date-picker-range-value {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    padding: 6px 12px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    min-width: 120px;
    text-align: center;
}

.date-picker-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #E5E7EB;
    background: #F9FAFB;
}

.date-picker-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.date-picker-btn-clear {
    background: #ffffff;
    color: #6B7280;
    border: 1px solid #D1D5DB;
}

.date-picker-btn-clear:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
    color: #374151;
}

.date-picker-btn-cancel {
    background: #ffffff;
    color: #6B7280;
    border: 1px solid #D1D5DB;
}

.date-picker-btn-cancel:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
    color: #374151;
}

.date-picker-btn-apply {
    background: linear-gradient(135deg, #244B94 0%, #1e3a8a 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(36, 75, 148, 0.3);
}

.date-picker-btn-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.4);
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

.date-picker-btn-apply:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .date-picker-modal-container {
        width: 95%;
        max-width: none;
    }
    
    .date-picker-modal-header {
        padding: 20px;
    }
    
    .date-picker-modal-body {
        padding: 20px;
    }
    
    .date-picker-modal-footer {
        flex-wrap: wrap;
        padding: 16px 20px;
    }
    
    .date-picker-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
    
    .date-picker-day {
        font-size: 13px;
    }
}

/* ============================================================================
   INDEX PAGE LAYOUT STYLES
   ============================================================================
   Styles for main layout page (Index.cshtml)
   Includes: Header, Sidebar, Tabs, Navigation
   ============================================================================ */

/* Tab Navigation - Hidden */
.layui-tab-title.ok-tab-title,
.okadmin-tabs-control {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.layui-tab.ok-tab {
    padding-top: 0 !important;
}

.ok-tab-content {
    margin-top: 0 !important;
}

/* Header alignment fixes - Đảm bảo các thành phần ngang hàng */
.okadmin-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 49px !important;
    line-height: 49px !important;
    position: fixed !important;
    top: 0 !important;
    left: 260px !important;
    right: 0 !important;
    width: calc(100% - 260px) !important;
    z-index: 10000 !important;
    background: #fff !important;
    padding: 0 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: left 0.3s ease, width 0.3s ease !important;
}

/* Khi menu ẩn, header chiếm toàn bộ chiều rộng */
.layui-layout-admin.ok-left-hide .okadmin-header {
    left: 0 !important;
    width: 100% !important;
}

.okadmin-header .layui-nav {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.okadmin-header .layui-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    line-height: 49px !important;
    margin: 0 4px !important;
}

/* Chỉnh icon nằm giữa cho phần tử li đầu tiên trong layui-layout-right */
.okadmin-header .layui-layout-right .layui-nav-item:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.okadmin-header .layui-layout-right .layui-nav-item:first-child > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
}

/* Style cho badge số đơn chờ xác nhận */
.pending-order-badge {
    position: absolute !important;
    top: -2px !important;
    right: 8px !important;
    background: #F26017 !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 0 5px !important;
    box-shadow: 0 2px 4px rgba(242, 96, 23, 0.3) !important;
    z-index: 10 !important;
    animation: pulse 2s infinite !important;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.okadmin-header .layui-layout-right .layui-nav-item:first-child > a:hover .pending-order-badge {
    background: #E04E0E !important;
    box-shadow: 0 2px 6px rgba(242, 96, 23, 0.4) !important;
}

/* Chỉnh icon nằm giữa cho phần tử li thứ hai trong layui-layout-right */
.okadmin-header .layui-layout-right .layui-nav-item:nth-child(2) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.okadmin-header .layui-layout-right .layui-nav-item:nth-child(2) > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Chỉnh icon nằm giữa cho phần tử layui-hide-xs */
.okadmin-header .layui-layout-right .layui-nav-item.layui-hide-xs {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.okadmin-header .layui-layout-right .layui-nav-item.layui-hide-xs > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Chỉnh icon nằm chính giữa cho phần tử layui-this */
.okadmin-header .layui-layout-right .layui-nav-item.layui-this {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.okadmin-header .layui-layout-right .layui-nav-item.layui-this > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.okadmin-header .layui-nav-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    color: #374151 !important;
    font-weight: 500 !important;
    transition: all 300ms ease !important;
}

/* Chỉnh màu chữ trắng cho user info và căn giữa */
.okadmin-header .layui-layout-right .layui-nav-item.no-line > a {
    color: #FFFFFF !important;
    margin-right: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.okadmin-header .layui-layout-right .layui-nav-item.no-line > a:hover {
    color: #FFFFFF !important;
}

.okadmin-header .layui-layout-right .layui-nav-item.no-line {
    margin-right: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Đảm bảo nội dung trong li no-line được căn giữa */
.okadmin-header .layui-layout-right .layui-nav-item.no-line > a {
    justify-content: center !important;
    width: 100% !important;
}

.okadmin-header .layui-nav-item > a:hover {
    background-color: #F3F4F6 !important;
    color: #2563EB !important;
}

.okadmin-header .layui-nav-item .layui-icon {
    color: #374151 !important;
    font-size: 18px !important;
    transition: all 300ms ease !important;
}

.okadmin-header .layui-nav-item > a:hover .layui-icon {
    color: #2563EB !important;
}

.okadmin-header .layui-nav-item .layui-icon,
.okadmin-header .layui-nav-item i {
    vertical-align: middle !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Làm in đậm nút Home */
.okadmin-header .ok-home .layui-icon {
    font-weight: bold !important;
    text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.2) !important;
}

/* Chỉnh icon fullScreen nằm giữa */
.okadmin-header #fullScreen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important;
}

.okadmin-header #fullScreen .layui-icon {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Chỉnh icon refresh nằm giữa */
.okadmin-header .ok-refresh {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important;
    width: 100% !important;
    height: 100% !important;
}

.okadmin-header .ok-refresh .layui-icon {
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* Chỉnh icon Home nằm giữa */
.okadmin-header .ok-home {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important;
    text-align: center !important;
    width: 100% !important;
}

.okadmin-header .ok-home .layui-icon {
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.okadmin-header .layui-nav-img {
    vertical-align: middle !important;
    display: inline-block !important;
    margin-right: 8px !important;
}

.okadmin-header .avatar-initial {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3) !important;
    transition: all 300ms ease !important;
    text-align: center !important;
    line-height: 30px !important;
}

/* Đảm bảo chữ trong avatar-initial luôn màu trắng */
.okadmin-header .layui-layout-right .layui-nav-item .avatar-initial,
.okadmin-header .layui-layout-right .layui-nav-item .avatar-initial * {
    color: #FFFFFF !important;
}

.okadmin-header .avatar-initial:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.4) !important;
}

.okadmin-header .avatar-img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.okadmin-header .layui-layout-left,
.okadmin-header .layui-layout-right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 51px !important;
    gap: 4px !important;
}

.okadmin-header .layui-layout-right {
    margin-left: auto !important;
    margin-right: 2.5rem !important;
    padding-right: 0 !important;
}

.okadmin-header .layui-layout-right .layui-nav-item:last-child {
    margin-right: 0 !important;
}

.okadmin-header .layui-layout-right .layui-nav-item:last-child > a {
    padding-right: 12px !important;
    margin-right: 0 !important;
}

.okadmin-header .layui-layout-left .layui-nav-item,
.okadmin-header .layui-layout-right .layui-nav-item {
    margin: 0 !important;
}

.okadmin-header .layui-nav-item a span {
    vertical-align: middle !important;
    color: #374151 !important;
    font-weight: 500 !important;
    margin-left: 8px !important;
}

/* Ẩn tên người dùng trên mobile */
@media screen and (max-width: 768px) {
    .okadmin-header .user-account-name {
        display: none !important;
    }
}

.okadmin-header .layui-nav-item > a:hover span {
    color: #2563EB !important;
}

/* User dropdown menu styling */
.okadmin-header .layui-nav-child {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 4px 0 !important;
    min-width: 180px !important;
    top: 52px !important;
    left: auto !important;
    right: 5px !important;
}

/* Đảm bảo menu dropdown của user info căn phải với lề phải 5px */
.okadmin-header .layui-layout-right .layui-nav-item .layui-nav-child {
    left: auto !important;
    right: 5px !important;
}

/* Chỉnh lề phải cho menu dropdown userInfo */
.okadmin-header #userInfo.layui-nav-child {
    right: 5px !important;
}

.okadmin-header .layui-nav-child dd a {
    padding: 10px 16px !important;
    color: #374151 !important;
    transition: all 300ms ease !important;
    display: flex !important;
    align-items: center !important;
}

.okadmin-header .layui-nav-child dd a i {
    font-size: 16px !important;
    margin-right: 8px !important;
    width: 16px !important;
    text-align: center !important;
}

.okadmin-header .layui-nav-child dd a:hover {
    background: #F3F4F6 !important;
    color: #2563EB !important;
}

.okadmin-header .layui-nav-child dd a:hover i {
    color: #2563EB !important;
}

/* Chỉnh mũi tên dropdown màu đen và khoảng cách */
.okadmin-header .layui-layout-right .layui-nav-item > a {
    padding-right: 15px !important;
    position: relative !important;
}

.okadmin-header .layui-layout-right .layui-nav-item > a .layui-nav-more {
    border-top-color: #000000 !important;
    right: 8px !important;
}

.okadmin-header .layui-layout-right .layui-nav-item.layui-nav-itemed > a .layui-nav-more,
.okadmin-header .layui-layout-right .layui-nav-item > a .layui-nav-mored {
    border-top-color: transparent !important;
    border-bottom-color: #000000 !important;
    right: 8px !important;
}

/* Menu toggle button - positioned near sidebar */
.ok-show-menu {
    position: absolute !important;
    left: 0px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 10001 !important;
    border-radius: 6px !important;
    transition: all 300ms ease !important;
    color: #374151 !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.ok-show-menu .layui-icon {
    font-size: 18px !important;
    color: #374151 !important;
    transition: all 300ms ease !important;
}

.ok-show-menu:hover {
    background-color: #F3F4F6 !important;
    color: #2563EB !important;
}

.ok-show-menu:hover .layui-icon {
    color: #2563EB !important;
}

/* Adjust left nav to make room for menu button */
.okadmin-header .layui-layout-left {
    margin-left: 260px !important;
}

/* Menu button position when sidebar is hidden */
.layui-layout-admin.ok-left-hide .ok-show-menu {
    left: 5px !important;
}

.layui-layout-admin.ok-left-hide .okadmin-header .layui-layout-left {
    margin-left: 60px !important;
}

/* ============================================
   Sidebar Menu - Modern Professional Design
   ============================================ */

/* Sidebar Container - Enhanced Background - Blue Theme */
.ok-left.layui-side-menu {
    background: #2A58AE !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15) !important;
    width: 260px !important;
}

.layui-side-menu .layui-side-scroll {
    background: transparent !important;
    width: 260px !important;
}

/* Ensure okadmin-side also has blue background */
.okadmin-side {
    background: #2A58AE !important;
}

/* Ensure layui-side-scroll container has blue background */
.layui-side-scroll.okadmin-side {
    background: #2A58AE !important;
}

/* Override okadmin-bg-20222A class with blue background */
.ok-left.okadmin-bg-20222A,
.ok-left.layui-side-menu.okadmin-bg-20222A,
.okadmin-nav.okadmin-bg-20222A,
#navBar.okadmin-nav.okadmin-bg-20222A,
#navBar.layui-nav.okadmin-nav.okadmin-bg-20222A {
    background: transparent !important;
}

/* Ensure navBar has transparent background to show parent gradient */
#navBar.layui-nav,
#navBar.okadmin-nav,
#navBar.layui-nav-tree {
    background: transparent !important;
}

/* Menu Items - Modern Styling with Optimal Spacing */
.ok-left.layui-side-menu .layui-nav .layui-nav-item {
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Menu Links - Enhanced Typography & Spacing */
.ok-left.layui-side-menu .layui-nav .layui-nav-item > a {
    height: 48px !important;
    line-height: 48px !important;
    padding-left: 56px !important;
    padding-right: 20px !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Icons - Better Alignment & Size */
.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-icon,
.ok-left.layui-side-menu .layui-nav .layui-nav-item a i,
.ok-left.layui-side-menu .layui-nav .layui-nav-item a .ok-icon {
    position: absolute !important;
    left: 20px !important;
    font-size: 20px !important;
    width: 24px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Hover State - Smooth & Professional */
.ok-left.layui-side-menu .layui-nav-item > a:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.ok-left.layui-side-menu .layui-nav-item > a:hover i,
.ok-left.layui-side-menu .layui-nav-item > a:hover .ok-icon {
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* Active State - Modern Gradient */
.ok-left.layui-side-menu .layui-nav-item.layui-this > a {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important;
    font-weight: 600 !important;
}

.ok-left.layui-side-menu .layui-nav-item.layui-this > a i,
.ok-left.layui-side-menu .layui-nav-item.layui-this > a .ok-icon {
    color: #ffffff !important;
}

/* Active State Hover */
.ok-left.layui-side-menu .layui-nav-item.layui-this > a:hover {
    background: linear-gradient(135deg, #5b52f0 0%, #8b4af5 100%) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.5) !important;
    transform: translateX(2px) !important;
}

/* Submenu Items - Enhanced Styling with Visual Indicators */
.ok-left.layui-side-menu .layui-nav .layui-nav-child {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    margin: 8px 0 8px 0 !important;
    padding: 8px 0 !important;
    border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    position: relative !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Submenu Indicator Line */
.ok-left.layui-side-menu .layui-nav .layui-nav-child::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
    border-radius: 2px 0 0 2px !important;
}

.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a {
    height: 40px !important;
    line-height: 40px !important;
    padding-left: 32px !important;
    padding-right: 16px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 6px !important;
    margin: 3px 12px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Submenu Bullet Point Indicator */
.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a::before {
    content: '▸' !important;
    position: absolute !important;
    left: 8px !important;
    font-size: 10px !important;
    color: rgba(79, 70, 229, 0.6) !important;
    transition: all 0.25s ease !important;
    font-weight: bold !important;
}

.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding-left: 28px !important;
    transform: translateX(2px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a:hover::before {
    color: #F97316 !important;
    transform: translateX(2px) scale(1.2) !important;
}

/* Focus state for submenu items - Darker Orange color */
.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a:focus {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.3) 0%, rgba(194, 65, 12, 0.2) 100%) !important;
    color: #ffffff !important;
    outline: 2px solid rgba(234, 88, 12, 0.7) !important;
    outline-offset: 2px !important;
    border-left: 3px solid #EA580C !important;
    padding-left: 32px !important;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4) !important;
}

.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a:focus::before {
    color: #EA580C !important;
    transform: scale(1.3) !important;
}

/* Active focus state (when both active and focused) */
.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child .layui-this a:focus {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.45) 0%, rgba(194, 65, 12, 0.35) 100%) !important;
    outline: 2px solid rgba(234, 88, 12, 0.8) !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.5) !important;
}

.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.3) 0%, rgba(234, 88, 12, 0.2) 100%) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border-left: 3px solid #F97316 !important;
    padding-left: 32px !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3) !important;
}

.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child .layui-this a::before {
    color: #F97316 !important;
    transform: scale(1.3) !important;
}

/* Also update dd.layui-this for submenu items */
.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child dd.layui-this > a {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.3) 0%, rgba(234, 88, 12, 0.2) 100%) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border-left: 3px solid #F97316 !important;
    padding-left: 32px !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3) !important;
}

/* Submenu Icons */
.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a i,
.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a .ok-icon {
    position: static !important;
    margin-left: 8px !important;
    margin-right: 6px !important;
    font-size: 13px !important;
    opacity: 0.8 !important;
    transition: all 0.25s ease !important;
}

.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a:hover i,
.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a:hover .ok-icon {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* Submenu Container Animation */
.ok-left.layui-side-menu .layui-nav-itemed .layui-nav-child {
    animation: slideDown 0.3s ease-out !important;
}

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

/* Hide Vertical Scrollbar - Completely remove scrollbar */
.layui-side-menu .layui-side-scroll,
.okadmin-side,
.layui-side-scroll.okadmin-side,
div.layui-side-scroll.okadmin-side {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
    overflow-y: auto !important; /* Allow scrolling but hide scrollbar */
    overflow-x: hidden !important; /* Hide horizontal scrollbar */
}

/* Webkit browsers (Chrome, Safari, Opera, Edge) */
.layui-side-menu .layui-side-scroll::-webkit-scrollbar,
.okadmin-side::-webkit-scrollbar,
.layui-side-scroll.okadmin-side::-webkit-scrollbar,
div.layui-side-scroll.okadmin-side::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.layui-side-menu .layui-side-scroll::-webkit-scrollbar-track,
.okadmin-side::-webkit-scrollbar-track,
.layui-side-scroll.okadmin-side::-webkit-scrollbar-track,
div.layui-side-scroll.okadmin-side::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.layui-side-menu .layui-side-scroll::-webkit-scrollbar-thumb,
.okadmin-side::-webkit-scrollbar-thumb,
.layui-side-scroll.okadmin-side::-webkit-scrollbar-thumb,
div.layui-side-scroll.okadmin-side::-webkit-scrollbar-thumb {
    display: none !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Additional rules for all scrollbar pseudo-elements */
.layui-side-menu .layui-side-scroll *::-webkit-scrollbar,
.okadmin-side *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Menu Item Spacing */
#navBar.layui-nav {
    padding: 12px 0 !important;
}

/* Enhanced Text Readability */
.ok-left.layui-side-menu .layui-nav .layui-nav-item > a {
    letter-spacing: 0.3px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Update sidebar width in layout */
.ok-left {
    width: 260px !important;
}

/* Update logo width to match */
.ok-left .okadmin-logo {
    width: 260px !important;
}

/* Update content-body left position to match sidebar width */
.okadmin .content-body {
    /* Content body styles */
}

/* Update footer left position to match sidebar width */
.layui-layout-admin .layui-footer {
    /* Footer styles */
}

/* Center user-photo in sidebar */
.okadmin-side .user-photo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
    text-align: center !important;
}

.okadmin-side .user-photo a.img {
    display: block !important;
    width: auto !important;
    max-width: 180px !important;
    height: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.okadmin-side .user-photo a.img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 180px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Focus State for Accessibility */
.ok-left.layui-side-menu .layui-nav .layui-nav-item > a:focus {
    outline: 2px solid rgba(79, 70, 229, 0.5) !important;
    outline-offset: 2px !important;
}

/* Mobile: Set width auto for laytable-cell-1-0-2 */
.laytable-cell-1-0-2 {
    width: auto !important;
}

/* ================================================================ */
/* Button Info Container - Professional Modern Design (Button Index.cshtml) */
/* ================================================================ */
.button-info-container-unified {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.layui-table tbody tr:nth-child(even) .button-info-container-unified {
    background-color: transparent;
}

.layui-table tbody tr:nth-child(odd) .button-info-container-unified {
    background-color: transparent;
}

.button-info-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.button-header-section {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 3px;
    padding: 4px 0;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.layui-table tbody tr:nth-child(even) .button-header-section {
    background: rgba(248, 249, 250, 0.5);
}

.layui-table tbody tr:hover .button-header-section {
    background: rgba(240, 244, 255, 0.6);
}

.button-header-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-start;
}

.button-info-container-unified .button-name-row {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    gap: 6px;
    row-gap: 6px;
    line-height: 24px;
}

.button-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #244B94 0%, #1E3A8A 100%);
    color: #FFFFFF;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.2);
}

.button-name-modern {
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}

.button-code-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: #F3F4F6;
    color: #6B7280;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.button-code-badge i {
    font-size: 10px;
    color: #9CA3AF;
}

.button-icon-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: #F0F4FF;
    color: #244B94;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.button-icon-badge i {
    font-size: 12px;
}

.button-info-actions-wrapper {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    margin-top: 8px;
}

.button-info-column {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.button-card-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.button-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #F3F4F6;
}

.button-card-row:last-child {
    border-bottom: none;
}

.button-card-row-primary {
    flex-wrap: wrap;
}

.button-card-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.button-card-label {
    font-size: 11px;
    color: #6B7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 80px;
    white-space: nowrap;
}

.button-card-label i {
    font-size: 11px;
    color: #9CA3AF;
}

.button-card-value {
    font-size: 12px;
    color: #1F2937;
    font-weight: 600;
    text-align: right;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

.button-card-value.date-value-modern {
    font-size: 12px;
    color: #374151;
}

.button-actions-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    min-width: 120px;
    max-width: 200px;
    flex-shrink: 0;
}

.button-actions-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    width: 100%;
}

.button-actions-container .layui-btn,
.button-actions-container a.layui-btn {
    width: 100%;
    min-width: 80px;
    height: 32px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.button-actions-container .layui-btn i,
.button-actions-container a.layui-btn i {
    font-size: 13px;
}

/* Responsive: Button Info on Mobile */
@media (max-width: 768px) {
    .button-info-container-unified {
        padding: 8px 0;
        gap: 0;
    }
    
    .button-info-actions-wrapper {
        flex-direction: column;
        gap: 0px;
    }
    
    .button-info-column {
        width: 100%;
    }
    
    .button-actions-column {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        justify-content: flex-start;
    }
    
    .button-actions-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        padding: 0px;
        gap: 4px;
    }
    
    .button-actions-container .layui-btn,
    .button-actions-container a.layui-btn {
        width: auto;
        min-width: 32px;
        height: 28px;
        flex: 0 0 auto;
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
        gap: 4px;
    }
    
    .button-actions-container .layui-btn i,
    .button-actions-container a.layui-btn i {
        font-size: 12px;
    }
    
    .button-info-container-unified .button-name-row {
        gap: 6px;
        row-gap: 6px;
    }
    
    .button-name-modern {
        font-size: 14px;
    }
    
    .button-card-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .button-card-item {
        width: 100%;
        justify-content: space-between;
    }
    
    .button-card-value {
        text-align: left;
        justify-content: flex-start;
    }
}

/* ============================================
   Permission Role Assign Styles
   ============================================ */
.div-collapse {
    float: left;
    height: 18px;
    line-height: 18px;
    padding-left: 5px;
}

.layui-table-cell .layui-form-checkbox[lay-skin=primary] {
    top: -1px;
    padding-left: 25px;  /* 覆盖layui padding */
}

.assign-container {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    padding: 0px;
}

/* Cột 1 - FullName: Cho phép xuống dòng */
.layui-table-cell[data-field="FullName"] {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.6;
    padding: 12px 15px;
}

/* Cột 2 - ModuleButtonHtml: Styling cho các nút chọn */
.permission-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.permission-buttons-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.permission-buttons-row:hover {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-color: #CBD5E1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Style cho các checkbox và label có sẵn trong ModuleButtonHtml */
.permission-buttons-row .layui-form-checkbox {
    margin: 0;
    padding: 6px 10px;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.permission-buttons-row .layui-form-checkbox:hover {
    background: #E8F0FE;
    transform: translateY(-1px);
}

.permission-buttons-row .layui-form-checkbox span {
    font-size: 13px;
    color: #1F2937;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.permission-buttons-row .layui-form-checkbox[lay-skin="primary"] i {
    border-color: #244B94;
}

.permission-buttons-row .layui-form-checkbox[lay-skin="primary"]:hover i {
    border-color: #1A3A6F;
}

.permission-buttons-row .layui-form-checkbox[lay-skin="primary"][checked] i {
    background-color: #244B94;
    border-color: #244B94;
}

.permission-buttons-row input[type="checkbox"] {
    cursor: pointer;
}

.permission-buttons-row label {
    cursor: pointer;
    font-size: 13px;
    color: #1F2937;
    margin: 0;
    user-select: none;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.permission-buttons-row label:hover {
    color: #244B94;
}

.permission-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E2E8F0;
}

.permission-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.permission-action-btn i {
    font-size: 12px;
}

.permission-action-btn.select-all {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.permission-action-btn.select-all:hover {
    background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    transform: translateY(-2px);
    color: #FFFFFF;
}

.permission-action-btn.select-all:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.permission-action-btn.deselect-all {
    background: linear-gradient(135deg, #64748B 0%, #475569 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(100, 116, 139, 0.25);
}

.permission-action-btn.deselect-all:hover {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.35);
    transform: translateY(-2px);
    color: #FFFFFF;
}

.permission-action-btn.deselect-all:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.3);
}

.permission-empty-state {
    color: #6B7280;
    font-size: 13px;
    font-style: italic;
    padding: 16px;
    text-align: center;
    background: #F9FAFB;
    border-radius: 6px;
    border: 1px dashed #D1D5DB;
}

/* Cải thiện màu sắc cho cột 2 */
.layui-table-cell[data-field="ModuleButtonHtml"] {
    color: #1F2937;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .permission-buttons-row {
        gap: 8px;
        padding: 8px 10px;
    }
    
    .permission-actions {
        flex-direction: column;
    }
    
    .permission-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Product Buy Page Specific Styles
   ============================================ */

/* Product Buy Container */
.product-buy-container {
    background: #F9FAFB;
    min-height: 100vh;
    padding: 20px 0;
}

/* Page Header Spacing */
.product-buy-container .page-header-modern {
    margin-bottom: 32px;
}

/* Search Section */
.search-section-buy {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.search-form-buy {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.search-input-wrapper-buy {
    flex: 1;
    min-width: 250px;
}

.search-input-buy {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #FFFFFF;
}

.search-input-buy:focus {
    outline: none;
    border-color: #244B94;
    box-shadow: 0 0 0 4px rgba(36, 75, 148, 0.12);
}

.search-btn-buy {
    height: 44px;
    padding: 0 24px;
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(36, 75, 148, 0.3);
}

.search-btn-buy:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.4);
    transform: translateY(-2px);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Product Card */
.product-card-buy {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-card-buy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #244B94 0%, #F26017 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card-buy:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #244B94;
}

.product-card-buy:hover::before {
    opacity: 1;
}

.product-card-header {
    margin-bottom: 20px;
}

.product-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.product-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 20px;
}

.product-price-main {
    font-size: 32px;
    font-weight: 800;
    color: #244B94;
}

.product-price-unit {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

.product-card-details {
    flex: 1;
    margin-bottom: 20px;
}

.product-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #F3F4F6;
}

.product-detail-item:last-child {
    border-bottom: none;
}

.product-detail-label {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
    min-width: 100px;
}

.product-detail-value {
    font-size: 14px;
    color: #1F2937;
    font-weight: 600;
    flex: 1;
}

.product-card-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #F3F4F6;
}

.btn-buy-product {
    width: 100%;
    height: 44px;
    background: linear-gradient(135deg, #F26017 0%, #E04E0E 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(242, 96, 23, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-buy-product:hover {
    background: linear-gradient(135deg, #E04E0E 0%, #F26017 100%);
    box-shadow: 0 4px 12px rgba(242, 96, 23, 0.4);
    transform: translateY(-2px);
}

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

/* No Data Message */
.no-data-message {
    text-align: center;
    padding: 60px 20px;
    color: #6B7280;
    animation: fadeInUp 0.5s ease-out;
}

.no-data-message h2 {
    font-size: 24px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

/* Empty State Container */
.empty-state-container {
    padding: 80px 20px;
    text-align: center;
    animation: fadeInUp 0.5s ease-out;
}

.empty-state-content {
    max-width: 500px;
    margin: 0 auto;
}

.empty-state-icon-wrapper {
    width: 140px;
    height: 140px;
    margin: 0 auto 32px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(36, 75, 148, 0.15);
    animation: pulse 2s ease-in-out infinite;
}

.empty-state-icon {
    font-size: 64px;
    color: #244B94;
}

.empty-state-title {
    font-size: 28px;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
}

.empty-state-description {
    font-size: 15px;
    color: #6B7280;
    line-height: 1.7;
    margin: 0 0 32px 0;
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #E5E7EB;
}

.empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #244B94 0%, #1A3A6F 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(36, 75, 148, 0.3);
}

.empty-state-btn:hover {
    background: linear-gradient(135deg, #1A3A6F 0%, #244B94 100%);
    box-shadow: 0 6px 20px rgba(36, 75, 148, 0.4);
    transform: translateY(-2px);
}

.empty-state-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(36, 75, 148, 0.3);
}

.empty-state-btn i {
    font-size: 18px;
}

/* Pagination Wrapper */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* Custom Notification Styles */
.custom-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 320px;
    max-width: 420px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 20px 24px;
    z-index: 10000;
    animation: slideInRight 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.custom-notification.success {
    border-left-color: #059669;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF4 100%);
}

.custom-notification.error {
    border-left-color: #DC2626;
    background: linear-gradient(135deg, #FFFFFF 0%, #FEF2F2 100%);
}

.custom-notification.info {
    border-left-color: #244B94;
    background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%);
}

.custom-notification.warning {
    border-left-color: #F26017;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF7ED 100%);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.custom-notification.success .notification-icon {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #059669;
}

.custom-notification.error .notification-icon {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #DC2626;
}

.custom-notification.info .notification-icon {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #244B94;
}

.custom-notification.warning .notification-icon {
    background: linear-gradient(135deg, #FED7AA 0%, #FCD34D 100%);
    color: #F26017;
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #1F2937;
}

.notification-message {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
    line-height: 1.6;
}

.notification-message strong {
    font-weight: 600;
}

.notification-message br {
    line-height: 1.8;
}

.notification-close {
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    font-size: 18px;
    padding: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.notification-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
    transform: rotate(90deg) scale(1.1);
}

.notification-close:active {
    transform: rotate(90deg) scale(0.95);
}

.custom-notification.hiding {
    animation: slideOutRight 0.3s ease forwards;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #244B94;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 24px rgba(36, 75, 148, 0.15);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 32px rgba(36, 75, 148, 0.25);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .search-section-buy {
        padding: 16px;
    }

    .search-form-buy {
        flex-direction: column;
    }

    .search-input-wrapper-buy {
        width: 100%;
    }

    .search-btn-buy {
        width: 100%;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-card-buy {
        padding: 20px;
    }

    .product-price-main {
        font-size: 28px;
    }

    /* Notification Mobile */
    .custom-notification {
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        right: 20px;
        left: 20px;
        padding: 16px 20px;
    }

    .notification-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .notification-title {
        font-size: 15px;
    }

    .notification-message {
        font-size: 13px;
    }

    /* Loading Overlay Mobile */
    .loading-spinner {
        width: 50px;
        height: 50px;
        border-width: 3px;
    }
}

/* ===========================================
   EXPORT REPORT MODERN STYLES
   =========================================== */

/* Action Buttons Section - Modern */
.action-buttons-section-modern {
    margin-bottom: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
}

.action-buttons-section-modern::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><circle cx=\"20\" cy=\"20\" r=\"2\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"80\" cy=\"80\" r=\"2\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"60\" cy=\"30\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"30\" cy=\"70\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/></svg>");
    opacity: 0.5;
}

.action-buttons-container-modern {
    position: relative;
    z-index: 1;
}

.action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.action-btn-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-decoration: none;
    color: inherit;
}

.action-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

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

.action-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.action-btn-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.action-btn-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.action-btn-desc {
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
}

/* Button Variants */
.action-btn-word .action-btn-icon {
    background: linear-gradient(135deg, #2b77e6 0%, #1e5b9b 100%);
    color: white;
}

.action-btn-pdf .action-btn-icon {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
}

.action-btn-audio .action-btn-icon {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
}

.action-btn-copy .action-btn-icon {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
}

.action-btn-word:hover {
    background: rgba(43, 119, 230, 0.1);
    border: 1px solid rgba(43, 119, 230, 0.2);
}

.action-btn-pdf:hover {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.action-btn-audio:hover {
    background: rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

.action-btn-copy:hover {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.action-buttons-secondary {
    display: flex;
    justify-content: center;
}

.action-btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #6b7280;
    font-weight: 500;
    text-decoration: none;
}

.action-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #374151;
    transform: translateY(-1px);
}

/* Customer Information Section */
.customer-info-section-modern {
    margin-bottom: 32px;
}

.customer-info-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.customer-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.customer-info-title h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}

.customer-info-title p {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #6b7280;
}

.customer-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.customer-info-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.customer-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.customer-info-card-primary {
    border-left: 4px solid #3b82f6;
}

.customer-info-card-notes {
    grid-column: 1 / -1;
    border-left: 4px solid #10b981;
}

.customer-info-card-secondary {
    border-left: 4px solid #8b5cf6;
}

.customer-info-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.customer-info-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 14px;
    flex-shrink: 0;
}

.customer-info-card-primary .customer-info-card-icon {
    background: #dbeafe;
    color: #3b82f6;
}

.customer-info-card-notes .customer-info-card-icon {
    background: #d1fae5;
    color: #10b981;
}

.customer-info-card-secondary .customer-info-card-icon {
    background: #ede9fe;
    color: #8b5cf6;
}

.customer-info-card-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.customer-info-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.customer-info-card-value {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.5;
}

.customer-info-card-value.gender-value {
    font-size: 18px;
}

.gender-male {
    color: #2563eb;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gender-male i {
    color: #3b82f6;
}

.gender-female {
    color: #db2777;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gender-female i {
    color: #ec4899;
}

.phone-link {
    color: #059669;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.phone-link:hover {
    color: #047857;
    text-decoration: underline;
}

.phone-link i {
    font-size: 14px;
}

.notes-value {
    min-height: 40px;
    display: flex;
    align-items: center;
}

.no-notes {
    color: #9ca3af;
    font-style: italic;
}

/* Additional Information Section */
.additional-info-section {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.additional-info-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.additional-info-toggle:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.additional-info-toggle-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.3s ease;
}

.additional-info-toggle-text {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

.additional-info-toggle-desc {
    font-size: 14px;
    color: #6b7280;
    margin-left: auto;
}

.additional-info-content {
    padding: 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.additional-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.additional-info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.additional-info-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.additional-info-label i {
    width: 16px;
    color: #6b7280;
}

.additional-info-value {
    font-size: 14px;
    color: #1f2937;
    line-height: 1.5;
}

.link-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    font-size: 13px;
    color: #374151;
    font-family: "Inter", monospace;
}

.email-link {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.email-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.no-data {
    color: #9ca3af;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .action-buttons-section-modern {
        padding: 20px;
        margin-bottom: 24px;
    }

    .action-buttons-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }

    .action-btn-modern {
        padding: 14px 16px;
    }

    .action-btn-content {
        gap: 1px;
    }

    .action-btn-title {
        font-size: 13px;
    }

    .action-btn-desc {
        font-size: 11px;
    }

    .customer-info-header {
        padding: 16px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .customer-info-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .customer-info-title h3 {
        font-size: 18px;
    }

    .customer-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .customer-info-card {
        padding: 16px;
    }

    .customer-info-card-content {
        padding-left: 40px;
    }

    .additional-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .additional-info-toggle {
        padding: 14px 16px;
    }
}

/* Action Buttons Section - Modern Export Interface */
.action-buttons-section-modern {
    margin-bottom: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.action-buttons-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.action-buttons-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.action-buttons-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px 0;
    line-height: 1.3;
}

.action-buttons-title p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.action-buttons-container-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.action-btn-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.action-btn-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    background: #fafbfc;
}

.action-btn-modern:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.action-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.action-btn-content {
    flex: 1;
    min-width: 0;
}

.action-btn-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 2px;
    line-height: 1.3;
}

.action-btn-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Export Button Variants */
.export-btn-word {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    border-color: #1e3a8a !important;
    color: white !important;
}

.export-btn-word .action-btn-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.export-btn-word .action-btn-title {
    color: white !important;
}

.export-btn-word .action-btn-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

.export-btn-word:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
    border-color: #1e3a8a !important;
}

.export-btn-pdf {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: #b91c1c !important;
    color: white !important;
}

.export-btn-pdf .action-btn-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.export-btn-pdf .action-btn-title {
    color: white !important;
}

.export-btn-pdf .action-btn-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

.export-btn-pdf:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
    border-color: #b91c1c !important;
}

.export-btn-audio {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border-color: #047857 !important;
    color: white !important;
}

.export-btn-audio .action-btn-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.export-btn-audio .action-btn-title {
    color: white !important;
}

.export-btn-audio .action-btn-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

.export-btn-audio:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    border-color: #047857 !important;
}

.export-btn-copy {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    border-color: #6d28d9 !important;
    color: white !important;
}

.export-btn-copy .action-btn-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.export-btn-copy .action-btn-title {
    color: white !important;
}

.export-btn-copy .action-btn-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

.export-btn-copy:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
    border-color: #6d28d9 !important;
}

/* Customer Information Section */
.customer-info-section-modern {
    margin-bottom: 20px;
}

.customer-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.customer-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    flex-shrink: 0;
}

.customer-info-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px 0;
    line-height: 1.3;
}

.customer-info-title p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.customer-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.customer-info-card {
    background: white;
    border-radius: 14px;
    padding: 16px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.customer-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #3b82f6;
    transition: all 0.3s ease;
}

.customer-info-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.customer-info-card-primary::before {
    background: #3b82f6;
}

.customer-info-card-secondary::before {
    background: #8b5cf6;
}

.customer-info-card-tertiary::before {
    background: #f59e0b;
}

.customer-info-card-quaternary::before {
    background: #10b981;
}

.customer-info-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    color: white !important;
    margin-top: 1px;
}

.customer-info-card-icon i {
    color: white !important;
}

.customer-info-card-primary .customer-info-card-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white !important;
}

.customer-info-card-primary .customer-info-card-icon i {
    color: white !important;
}

.customer-info-card-secondary .customer-info-card-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white !important;
}

.customer-info-card-secondary .customer-info-card-icon i {
    color: white !important;
}

.customer-info-card-tertiary .customer-info-card-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white !important;
}

.customer-info-card-tertiary .customer-info-card-icon i {
    color: white !important;
}

.customer-info-card-quaternary .customer-info-card-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
}

.customer-info-card-quaternary .customer-info-card-icon i {
    color: white !important;
}

.customer-info-card-content {
    flex: 1;
}

.customer-info-card-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    line-height: 1.2;
}

.customer-info-card-value {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
}

/* Gender styling */
.gender-male {
    color: #2563eb;
    font-weight: 600;
}

.gender-male i {
    margin-right: 6px;
}

.gender-female {
    color: #db2777;
    font-weight: 600;
}

.gender-female i {
    margin-right: 6px;
}

/* Phone link styling */
.phone-link {
    color: #059669 !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.phone-link:hover {
    color: #047857 !important;
    text-decoration: underline;
}

/* Customer Notes Section */
.customer-notes-section {
    background: white;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.customer-notes-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.customer-notes-header i {
    color: #6b7280;
    font-size: 15px;
}

.customer-notes-content {
    padding: 16px;
}

.customer-notes-text {
    color: #374151;
    line-height: 1.6;
    font-size: 13px;
}

.no-notes {
    color: #9ca3af;
    font-style: italic;
}

/* Form Actions Section */
.form-actions-section {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.btn-close-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #f1f5f9;
    color: #475569;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-close-modern:hover {
    background: #e2e8f0;
    color: #334155;
    border-color: #94a3b8;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn-close-modern:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-close-modern i {
    font-size: 13px;
}

/* Responsive Design for New Components */
@media (max-width: 768px) {
    .action-buttons-section-modern {
        padding: 16px;
        border-radius: 12px;
    }

    .action-buttons-header {
        gap: 10px;
        margin-bottom: 14px;
    }

    .action-buttons-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .action-buttons-title h3 {
        font-size: 16px;
    }

    .action-buttons-title p {
        font-size: 12px;
    }

    .action-buttons-container-modern {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .action-btn-modern {
        padding: 10px 14px;
        gap: 10px;
        border-radius: 12px;
    }

    .action-btn-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .action-btn-title {
        font-size: 13px;
    }

    .action-btn-desc {
        font-size: 11px;
    }

    .customer-info-header {
        padding: 14px;
        gap: 10px;
        margin-bottom: 14px;
    }

    .customer-info-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .customer-info-title h3 {
        font-size: 16px;
    }

    .customer-info-title p {
        font-size: 12px;
    }

    .customer-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }

    .customer-info-card {
        padding: 14px;
        gap: 10px;
        border-radius: 12px;
    }

    .customer-info-card-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .customer-info-card-label {
        font-size: 10px;
    }

    .customer-info-card-value {
        font-size: 14px;
    }

    .customer-notes-section {
        border-radius: 12px;
    }

    .customer-notes-header {
        padding: 12px 14px;
        font-size: 13px;
    }

    .customer-notes-content {
        padding: 14px;
    }

    .customer-notes-text {
        font-size: 12px;
    }

    .form-actions-section {
        padding: 16px 0;
    }

    .btn-close-modern {
        padding: 8px 16px;
        font-size: 12px;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .action-buttons-section-modern {
        padding: 16px;
        border-radius: 12px;
    }

    .customer-info-header {
        padding: 12px;
    }

    .customer-info-card {
        padding: 12px;
    }

    .customer-info-card-content {
        padding-left: 36px;
    }

    .customer-info-card-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .additional-info-content {
        padding: 16px;
    }

    .action-buttons-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .customer-info-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .action-btn-modern {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .action-btn-content {
        text-align: center;
    }

    .customer-note-wrapper {
        padding: 8px;
    }

    .customer-note-header {
        padding: 6px 8px;
    }

    .customer-note-icon-wrapper {
        padding: 4px;
    }

    .customer-note-icon-wrapper i {
        font-size: 12px;
    }

    .customer-note-label {
        font-size: 12px;
    }

    .customer-note-view-more {
        padding: 4px 8px;
    }

    .customer-note-view-more span {
        display: inline;
    }

    .customer-note-wrapper::after {
        display: none;
    }

    .customer-note-text {
        padding: 4px 8px;
    }
}