/* ===================================================================
   GBVIMS - Standardized Controls Styles
   All buttons, inputs, selects, and filters set to 30px height
   Font sizes: Text 12px, Titles 14px
   =================================================================== */

/* Universal Button Styles - 30px height */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
button[type="submit"],
button[type="button"],
.button,
.action-button,
.btn-add,
.btn-add-user,
.btn-add-case,
.btn-add-role,
.btn-export,
.btn-action,
.btn-expand-all,
.dropdown-button,
.modal-btn,
.submit-btn,
.modal-btn-confirm,
.modal-btn-cancel,
.inbox-modal-btn,
.filter-button,
.apply-filter-btn,
.add-focal-point-btn,
.contact-btn,
.sort-select {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 12px !important;
    line-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}



/* Input Fields - 30px height */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
.form-control,
.input-field,
.modal-input-field,
.captcha-answer-input,
.modal-captcha-input {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: 30px !important;
    box-sizing: border-box !important;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid #d1d5db;
    transition: border-color 0.2s ease;
}

/* Select/Dropdown Fields - 30px height */
select,
.form-select,
select.form-control,
.select-field,
.dropdown-select,
.filter-select,
.records-select,
.custom-select {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    line-height: 30px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    font-size: 12px;
    border: 1px solid #d1d5db;
    background-position: right 8px center;
    background-size: 12px;
}

/* Filter Containers - 30px height */
.filter-button,
.filter-dropdown,
.search-input,
.search-bar input,
.filter-input {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: 30px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
}

/* Search Bar Specific Styles - 30px height, 6px border radius */
.search-input,
.search-input-wrapper input,
.filter-search-input,
.searchable-select-input,
.search-input-field,
input[type="search"] {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* Specific overrides for components with icons */
.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-right: 36px !important;
}

.password-wrapper input.password-input {
    padding-right: 36px !important;
}

/* Button with icons */
button svg,
.btn svg,
button img,
.btn img {
    max-height: 14px;
    max-width: 14px;
}

/* Tab buttons */
.tab-button {
    min-height: 40px !important;
    padding: 0 20px !important;
    font-size: 12px;
}

/* Pagination buttons - 26px height */
.pagination-button,
.pagination-btn {
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 6px !important;
    line-height: 26px !important;
    text-align: center;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    font-size: 11px;
}

/* Bootstrap button size overrides */
.btn-lg {
    height: 30px !important;
    padding: 0 16px !important;
    line-height: 30px !important;
}

.btn-sm {
    height: 30px !important;
    padding: 0 10px !important;
    line-height: 30px !important;
    font-size: 12px !important;
}

/* Ensure proper focus states */
input:focus,
select:focus,
button:focus,
.btn:focus {
    outline: none;
    border-color: #e15a11;
}

/* Disabled states maintain height */
input:disabled,
select:disabled,
button:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Textareas can be taller */
textarea {
    min-height: 60px !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px 10px !important;
    line-height: 1.5 !important;
    font-size: 12px;
}

/* Checkbox and radio inputs should not be affected */
input[type="checkbox"],
input[type="radio"] {
    height: 14px !important;
    width: 14px !important;
    min-height: 14px !important;
    padding: 0 !important;
}

/* Decorative elements should not be affected */
.logo-icon,
.feature-icon,
.welcome-icon,
.captcha-question-box,
.modal-captcha-question,
.captcha-refresh-icon,
.modal-captcha-icon {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Form Labels - 12px */
.form-label,
label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
}

/* Section Titles - 14px */
.section-title,
.form-section-title,
.card-title,
.modal-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

/* Records per page - smaller */
.records-per-page {
    font-size: 11px;
}

.records-select {
    height: 24px !important;
   
    font-size: 11px !important;
}
/* Override justify-content for header language option buttons */
button[type="button"].header-language-option,
button.header-language-option {
    justify-content: flex-start !important;
}

/* Case count values - 16px font size */
#totalCasesValue,
#openCasesValue,
#closedCasesValue {
    font-size: 16px !important;
}

/* Dashboard chart modal - no scroll, no white space */
#chartModal > div {
    width: 1000px !important;
    max-width: 95vw !important;
    margin-left: 200px !important;
    overflow: hidden !important;
}

/* Modal content container - no padding, no scroll */
#chartModal > div > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Flex container with graph and table - no gaps, no padding */
#chartModal > div > div:last-child > div.flex {
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Chart container - no padding */
#chartModal > div > div:last-child > div.flex > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50% !important;
    flex: 1 1 50% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Table container - no padding */
#chartModal > div > div:last-child > div.flex > div:last-child {
    width: 50% !important;
    flex: 1 1 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Table inside modal - full width, no margins */
#chartModal table {
    
    margin: 0 !important;
}

/* Chart image inside modal - fit to container */
#chartModal img {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
}

/* Remove ALL padding from modal content */
#chartModal > div > div.p-6 {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Remove padding from table wrapper */
#chartModal > div > div:last-child > div.flex > div:last-child > div {
    margin: 0 !important;
    padding: 0 !important;
    width: 80% !important;
}

/* Remove overflow from modal wrapper */
#chartModal {
    overflow: hidden !important;
}