/* ============================================================ */
            /* FLEXBOX LAYOUT FOR STICKY FOOTER                              */
            /* ============================================================ */
            

            

            .ui-icon {
                text-indent: 0 !important;
            }

            .ui-button.ui-button-icon-only {
                width: 36px !important;
                min-width: 36px !important;
                height: 36px !important;
                padding: 0 !important;
                position: relative !important;
                display: inline-block !important;
                vertical-align: middle !important;
            }

            .ui-button.ui-button-icon-only .ui-button-text {
                display: block !important;
                width: 100% !important;
                height: 100% !important;
                padding: 0 !important;
                font-size: 0 !important;
                overflow: hidden !important;
            }

            

            

            

            /* ============================================================ */
            /* STYLED DIALOG GLOBAL STYLES                                   */
            /* ============================================================ */
            .styled-dialog .ui-dialog-content {
                padding: 20px !important;
            }

            .styled-dialog .ui-dialog-titlebar {
                background: linear-gradient(135deg, #2c3e50, #1a252f);
                color: white;
                border-bottom: none;
                padding: 15px 20px !important;
                font-size: 1.2rem;
                border-radius: 6px 6px 0 0;
            }

            .styled-dialog .ui-dialog-titlebar-icon {
                color: white !important;
            }

            .styled-dialog .ui-dialog-titlebar-icon:hover {
                color: #ddd !important;
            }

            /* Form field styling inside styled dialogs */
            .styled-dialog input,
            .styled-dialog .ui-selectonemenu,
            .styled-dialog .ui-inputtextarea {
                border-radius: 6px;
                border: 1px solid #ced4da;
                transition: all 0.2s ease;
            }

            .styled-dialog input:focus,
            .styled-dialog .ui-selectonemenu:focus {
                border-color: #86b7fe;
                box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
                outline: none;
            }

            .styled-dialog .ui-button-primary {
                background: linear-gradient(135deg, #2c3e50, #1a252f);
                background: #e67e22;
                border: none;
                font-weight: 600;
            }

            .styled-dialog .ui-button-primary:hover {
                background: linear-gradient(135deg, #1a252f, #2c3e50);
            }

            /* ============================================================ */
            /* FILTER PANEL STYLES                                          */
            /* ============================================================ */
            #filterPanel input,
            #filterPanel .ui-selectonemenu {
                border-radius: 6px !important;
                border: 1px solid #ced4da !important;
                transition: all 0.2s ease;
            }

            #filterPanel input:focus,
            #filterPanel .ui-selectonemenu:focus {
                border-color: #86b7fe !important;
                box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
                outline: none;
            }

            /* ============================================================ */
            /* INPUT FIELD STYLES - Consistent width and overflow           */
            /* ============================================================ */
            .filter-item input,
            .filter-item .ui-inputfield,
            .filter-item .ui-selectonemenu {
                width: 100% !important;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            /* For textareas, allow wrapping */
            .filter-item .ui-inputtextarea {
                white-space: normal;
                resize: vertical;
            }

            /* Limit max characters visually */
            .filter-item input[type="text"],
            .filter-item input[type="email"],
            .filter-item input[type="tel"] {
                box-sizing: border-box;
            }

            /* ============================================================ */
            /* DATA TABLE STYLES                                           */
            /* ============================================================ */
            .ui-datatable .ui-datatable-data tr.ui-state-highlight {
                background: linear-gradient(135deg, #2c3e50, #1a252f);
                color: white;
            }

            .ui-datatable thead th {
                background: #f8f9fa;
                font-weight: 600;
                padding: 12px 8px;
                border-bottom: 2px solid #dee2e6;
            }

            /* ============================================================ */
            /* TOOLBAR BUTTON STYLES                                       */
            /* ============================================================ */
            .ui-toolbar .ui-button {
                border-radius: 6px;
                padding: 8px 16px;
                transition: all 0.2s ease;
            }

            .ui-toolbar .ui-button:hover {
                transform: translateY(-1px);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            /* ============================================================ */
            /* GROWL MESSAGES                                              */
            /* ============================================================ */
            .ui-growl-item {
                border-radius: 8px;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            }

            /* ============================================================ */
            /* RESPONSIVE GRID FOR FILTERS                                  */
            /* ============================================================ */
            .filter-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 15px;
                padding: 15px;
            }

            .filter-item {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .filter-item i {
                font-size: 1.2rem;
                color: #6c757d;
                min-width: 28px;
            }

            /* ============================================================ */
            /* CARD STYLES - Only apply when content has the card class    */
            /* ============================================================ */
            .crud-demo .card {
                background: white;
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                padding: 20px;
                margin: 0;
            }

            /* Remove default card styling from empty content */
            #content .card:empty {
                display: none;
                box-shadow: none;
                background: transparent;
                padding: 0;
            }

            /* ============================================================ */
            /* STATUS LABELS                                               */
            /* ============================================================ */
            .status-active {
                color: #2e7d32;
                font-weight: bold;
            }

            .status-inactive {
                color: #c62828;
                font-weight: bold;
            }

            /* ============================================================ */
            /* CONTENT AREA - Remove extra spacing when empty               */
            /* ============================================================ */
            #content.center_content:empty {
                min-height: 0;
                padding: 0;
            }

            /* Style the Choose File button to look like primary buttons */
            .ui-fileupload-simple .ui-button {
                background: linear-gradient(135deg, #2c3e50, #1a252f) !important;
                border: none !important;
                color: white !important;
                padding: 10px 20px !important;
                font-weight: 600 !important;
                border-radius: 6px !important;
                font-size: 1rem !important;
                transition: all 0.2s ease;
            }

            .ui-fileupload-simple .ui-button:hover {
                background: linear-gradient(135deg, #1a252f, #2c3e50) !important;
                transform: translateY(-1px);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            /* Style the file name display text (the input field) */
            .ui-fileupload-simple input {
                padding: 10px 12px !important;
                border-radius: 6px !important;
                border: 1px solid #ced4da !important;
                font-size: 1rem !important;
                background: #fff !important;
                width: auto !important;
                min-width: 200px;
            }

            /* Prevent layout shift during lazy data loading */
            

            .crud-demo .card {
                min-height: 400px;
            }
        
html, body { margin: 0; padding: 0; min-height: 100%; }
.body-wrapper { min-width: 0; }
.sidebar-menu { flex-shrink: 0; }
.main-content { min-width: 0; }
.sidebar-collapsed .sidebar-menu { visibility: hidden; }
@media (max-width: 768px) {
    #headerForm > div { flex-wrap: wrap; gap: 8px; }
    .body-wrapper { overflow-x: auto; }
    .main-content { padding: 12px; }
}

body { font-size: 14px; }