/* 
 * Cairo Display Fix - Layout & Spacing Corrections
 * Fixes display issues caused by Cairo font
 */

/* ========================================
 * BUTTON DISPLAY FIXES
 * ======================================== */

/* Reset button line-height */
.btn, button {
    line-height: 1.42857143 !important;
    padding: 6px 12px !important;
    vertical-align: middle !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.btn-xs {
    padding: 1px 5px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

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

.btn-lg {
    padding: 10px 16px !important;
    font-size: 18px !important;
    line-height: 1.33 !important;
}

/* Button with icons */
.btn > i,
.btn > .fa,
.btn > .glyphicon {
    margin-right: 5px !important;
    vertical-align: middle !important;
}

/* ========================================
 * PAGINATION DISPLAY FIXES
 * ======================================== */

/* Bootstrap pagination */
.pagination > li > a,
.pagination > li > span {
    padding: 6px 12px !important;
    line-height: 1.42857143 !important;
    text-align: center !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* DataTables pagination */
.dataTables_paginate .paginate_button {
    padding: 6px 12px !important;
    line-height: 1.42857143 !important;
    text-align: center !important;
    display: inline-block !important;
}

/* ========================================
 * DROPDOWN DISPLAY FIXES
 * ======================================== */

/* Bootstrap dropdown */
.dropdown-menu > li > a {
    padding: 3px 20px !important;
    line-height: 1.42857143 !important;
    display: block !important;
    white-space: nowrap !important;
}

/* Select2 dropdown */
.select2-container .select2-selection {
    line-height: 1.42857143 !important;
    padding: 6px 12px !important;
}

.select2-results__option {
    padding: 6px 12px !important;
    line-height: 1.42857143 !important;
}

/* ========================================
 * FORM DISPLAY FIXES
 * ======================================== */

/* Input groups */
.input-group-addon {
    padding: 6px 12px !important;
    line-height: 1.42857143 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.input-group-btn > .btn {
    padding: 6px 12px !important;
    line-height: 1.42857143 !important;
}

/* Form controls */
.form-control {
    padding: 6px 12px !important;
    line-height: 1.42857143 !important;
    height: 34px !important;
}

select.form-control {
    height: 34px !important;
    line-height: 1.42857143 !important;
}

textarea.form-control {
    height: auto !important;
}

/* ========================================
 * TABLE DISPLAY FIXES
 * ======================================== */

/* Table cells */
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    padding: 8px !important;
    line-height: 1.42857143 !important;
    vertical-align: middle !important;
}

/* Table buttons */
.table td .btn,
.table td button {
    padding: 3px 8px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 1px !important;
}

/* ========================================
 * NAVIGATION DISPLAY FIXES
 * ======================================== */

/* Navbar */
.navbar-nav > li > a {
    padding: 15px !important;
    line-height: 20px !important;
}

/* Sidebar menu */
.sidebar-menu > li > a {
    padding: 12px 5px 12px 15px !important;
    line-height: 1.42857143 !important;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon {
    margin-right: 10px !important;
}

/* ========================================
 * BADGE & LABEL FIXES
 * ======================================== */

.badge, .label {
    padding: 3px 7px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    text-align: center !important;
}

/* ========================================
 * MODAL DISPLAY FIXES
 * ======================================== */

.modal-header .close {
    padding: 0 !important;
    margin: -2px -2px 0 0 !important;
    font-size: 21px !important;
    line-height: 1 !important;
}

.modal-footer .btn {
    margin-left: 5px !important;
}

/* ========================================
 * DATATABLES EXPORT BUTTONS FIXES
 * ======================================== */

/* DataTables buttons container */
.dt-buttons {
    margin-bottom: 10px !important;
    display: inline-block !important;
}

.dt-button {
    padding: 6px 12px !important;
    margin-right: 5px !important;
    line-height: 1.42857143 !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Export button icons */
.buttons-html5,
.buttons-print,
.buttons-pdf,
.buttons-excel,
.buttons-csv,
.buttons-copy {
    font-size: 14px !important;
}

/* ========================================
 * POS SYSTEM DISPLAY FIXES
 * ======================================== */

/* POS buttons */
.pos-tab-container .btn,
.pos-product-div .btn,
#pos_form .btn {
    padding: 8px 12px !important;
    line-height: 1.42857143 !important;
    font-size: 14px !important;
}

/* POS product cards */
.pos-product-card {
    padding: 10px !important;
}

/* ========================================
 * BREADCRUMB FIXES
 * ======================================== */

.breadcrumb > li + li:before {
    padding: 0 5px !important;
    content: "/\00a0" !important;
}

/* ========================================
 * ALERT FIXES
 * ======================================== */

.alert {
    padding: 15px !important;
    line-height: 1.42857143 !important;
}

.alert .close {
    line-height: 1 !important;
    font-size: 21px !important;
}

/* ========================================
 * ICON DISPLAY FIXES
 * ======================================== */

/* Ensure icons don't break layout */
i.fa, i.fas, i.far, i.fab, i.glyphicon {
    display: inline-block !important;
    width: auto !important;
    min-width: 14px !important;
    text-align: center !important;
}