/* Custom Application Styles */

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Font Awesome Icon Mapping for ExtJS */
.x-fa {
    font-family: FontAwesome !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Map x-fa classes to Font Awesome icons */
.x-fa.fa-plus:before {
    content: "\f067";
}

.x-fa.fa-times:before {
    content: "\f00d";
}

.x-fa.fa-save:before {
    content: "\f0c7";
}

.x-fa.fa-trash:before {
    content: "\f1f8";
}

.x-fa.fa-edit:before {
    content: "\f044";
}

.x-fa.fa-refresh:before {
    content: "\f021";
}

.x-fa.fa-user:before {
    content: "\f007";
}

.x-fa.fa-sign-out:before {
    content: "\f08b";
}

.x-fa.fa-envelope:before {
    content: "\f0e0";
}

.x-fa.fa-lock:before {
    content: "\f023";
}

/* Button Icon Fix - Ensure icon shows correctly in buttons */
.x-btn-icon .x-fa,
.x-btn-icon-el .x-fa {
    font-family: FontAwesome !important;
    display: inline-block;
}

/* Remove background image that ExtJS might add */
.x-btn-icon-el[class*="x-fa"] {
    background-image: none !important;
}

/* Fix for button icon display and position */
.x-btn-icon-el {
    text-align: center !important;
    line-height: 1 !important;
}

.x-btn-icon-left .x-btn-icon-el {
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
}

.x-btn-medium .x-btn-icon-el {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    line-height: 16px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

.x-btn-medium .x-btn-icon-left .x-btn-icon-el:before {
    font-family: FontAwesome !important;
    display: block !important;
    line-height: 1 !important;
}

.x-border-layout-ct {
    background-color: #f5f5f5;
}

/* Booking Form Styles */
.x-fieldset {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: #fafafa !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.x-fieldset-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding: 10px 15px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #495057 !important;
}

.x-fieldset-body {
    padding: 15px 20px !important;
}

/* Form Field Styles */
.x-form-item-label {
    color: #495057 !important;
    font-size: 13px !important;
}

.x-form-text-field,
.x-form-combo,
.x-form-date-field,
.x-form-number-field {
    border-radius: 4px !important;
    border: 1px solid #ced4da !important;
    transition: all 0.2s ease !important;
}

.x-form-text-field:focus,
.x-form-combo:focus,
.x-form-date-field:focus,
.x-form-number-field:focus {
    border-color: #4A90E2 !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
}

/* Radio Group Styles */
.x-form-radio-group {
    padding: 8px 0 !important;
}

.x-form-radio {
    margin-right: 15px !important;
}

/* Button Styles */
.x-btn-default-small,
.x-btn-default-medium {
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.x-btn-default-small:hover,
.x-btn-default-medium:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
}

/* Grid Styles */
.x-grid-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.x-grid-header-text {
    font-weight: 600 !important;
    color: #495057 !important;
}

/* Menu Link Styles */
.menu-link {
    transition: background-color 0.2s ease;
}

.menu-link:hover,
.menu-link-hover {
    background-color: #e8f4f8 !important;
    color: #4A90E2 !important;
}

/* Readonly Field Styles */
.field-readonly .x-form-text,
.field-readonly .x-form-field {
    background-color: #f5f5f5 !important;
    color: #888 !important;
    cursor: not-allowed !important;
}

.field-readonly .x-form-trigger {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Login Window - Remove all borders */
.login-window-no-border {
    border: none !important;
}

.login-window-no-border .x-form-text-field,
.login-window-no-border .x-form-combo,
.login-window-no-border .x-form-date-field,
.login-window-no-border .x-form-number-field {
    border: none !important;
    border-radius: 0 !important;
}

.login-window-no-border .x-form-text-field:focus,
.login-window-no-border .x-form-combo:focus,
.login-window-no-border .x-form-date-field:focus,
.login-window-no-border .x-form-number-field:focus {
    border: none !important;
    box-shadow: none !important;
}

.login-window-no-border .x-btn {
    border: none !important;
}

.login-window-no-border .x-form-item {
    border: none !important;
}