/* ============================================================
   EG2.TOP — Custom AdminLTE / Bootstrap Theme
   Cleaned & Refactored
   ============================================================ */

/* ============================================================
   1. MEDIA QUERIES — Responsive Header
   ============================================================ */
@media (max-width: 767px) {
    .main-header .navbar-custom-menu {
        float: none !important;
        display: block !important;
    }
    .main-header .navbar-custom-menu .dropdown-menu {
        left: auto !important;
    }
    .skin-blue-light .main-header .navbar .dropdown-menu li a {
        color: #777;
    }
    .main-header .navbar { height: auto; }
}

/* ============================================================
   2. UTILITIES — Helpers
   ============================================================ */
/* Backgrounds */
.bg-danger        { background-color: #f2dede !important; }
.bg-white         { background-color: #fff; }
.bg-transparent   { background-color: transparent !important; }
.bg-light-gray    { background-color: #f8f8f8 !important; }
.bg-lightgray     { background-color: #F0EDED !important; }
.bg-light-green   { background-color: #98D973 !important; color: #fff !important; }
.bg-aqua-lite     { background-color: #7FFFD4; }
.bg-manufacturing { background-color: #ff851b; }
.bg-woocommerce   { background-color: #9E458B !important; }
.bg-info          { background-color: #00c0ef !important; }
.bg-info > a      { color: #FFFFFF !important; }
.bg-info > a:hover{ background-color: #337ab7 !important; }

/* Text */
.text-bold        { font-weight: bold; }
.text-white       { color: #fff; }
.text-muted-imp   { color: #A3A3A3 !important; }
.color-white      { color: white !important; }
.color-555        { color: #555555 !important; }
.color-555 *      { color: #555555 !important; }
.error            { color: red !important; }

/* Helpers */
.of-visible       { overflow: visible !important; }
.cursor-pointer   { cursor: pointer !important; }
.text-link        { cursor: pointer; }
.text-link:hover  { text-decoration: underline; }
.word-wrap        { word-wrap: break-word !important; }
.ws-nowrap        { white-space: nowrap; }
.d-inline-table   { display: inline-table; }
.v-center         { vertical-align: middle !important; }
.f-right          { float: right; }
.f-left           { float: left; }
.align-left       { text-align: left; }
.align-right      { text-align: right; }
.col-no-padding   { padding-left: 0; padding-right: 0; }
.col-2px-padding  { padding: 2px; }
.min-height-90hv  { min-height: 90vh !important; }
.spacer           { margin-top: 20px; }
#online_indicator { font-size: 8px; vertical-align: middle; }

/* Spacing */
.pt-0  { padding-top: 0; }
.pa-0  { padding: 0 !important; }
.pb-0  { padding-bottom: 0 !important; }
.p-4   { padding: 4px; }
.p-10  { padding: 10px !important; }
.p-5-5 { padding: 5px 5px !important; }
.padding-5  { padding: 5px !important; }
.padding-10 { padding: 10px !important; }
.pr-12 { padding-right: 12px !important; }
.padding-side-15 { /* unused */ }

.mt-0  { margin-top: 0 !important; }
.mt-5  { margin-top: 5px !important; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-56 { margin-top: 56px !important; }
.mb-5  { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px !important; }
.mb-40 { margin-bottom: 40px !important; }
.margin-bottom-12 { margin-bottom: 12px; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-left-10   { margin-left: 10px; }
.m-2 { margin: 2px !important; }
.m-4 { margin: 4px; }
.m-5 { margin: 5px; }
.m-8 { margin: 8px; }
.mr-8 { margin-right: 8px !important; }

/* Font sizes */
.fs-10   { font-size: 10px; }
.font-17 { font-size: 17px !important; }
.font-23 { font-size: 23px !important; }
.font-30 { font-size: 30px !important; }

/* Widths */
.width-40  { width: 40% !important; }
.width-50  { width: 50% !important; }
.width-60  { width: 60% !important; }
.width-100 { width: 100% !important; }

/* Buttons */
.btn-big   { padding: 10px 30px; font-size: 18px; line-height: 1.3333333; }
.btn-login { padding: 6px 52px !important; }

/* ============================================================
   3. TABLES
   ============================================================ */
.table-pdf {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 8px 10px;
}
.table-pdf thead tr { background-color: #357ca5 !important; color: #fff; }
.table-pdf thead tr th { color: #fff !important; }
.table-pdf .odd { background-color: #DCE6F1; }
.blue-heading { background-color: #357ca5; color: #fff; }

.td-border td, .td-border th {
    border-bottom: 1px solid lightgrey;
    padding: 8px 5px;
}
.table > tbody + tbody { border-top: 0; }
.table-pl-12 td, .table-pl-12 th { padding-left: 12px !important; }
table tbody td.pl-20-td { padding-left: 20px !important; }

table.table-border-center > tbody > tr > td:first-child,
table.table-border-center > thead > tr > th:first-child,
table.table-border-center > tfoot > tr > td:first-child {
    border-right: 1px solid darkgray;
}
table.table-border-center-col > tbody > tr > td:nth-child(2),
table.table-border-center-col > thead > tr > th:nth-child(2),
table.table-border-center-col > tfoot > tr > td:nth-child(2) {
    border-right: 1px solid darkgray;
    border-left: 1px solid darkgray;
}

.table-transparent, .table-transparent th {
    background-color: transparent !important;
    color: #000 !important;
}
.td-full-width { white-space: nowrap; }
table.dataTable tbody > tr.selected { background-color: #B0BED9; }
tr.footer-total > td { vertical-align: middle !important; }

.table-slim > tbody > tr > td,
.table-slim > tbody > tr > th,
.table-slim > tfoot > tr > td,
.table-slim > tfoot > tr > th,
.table-slim > thead > tr > td,
.table-slim > thead > tr > th { padding: 1px; }

.table-no-top-cell-border td,
.table-no-top-cell-border th {
    border-top: 0 !important;
    border-bottom: 0 !important;
}
.table-no-side-cell-border td,
.table-no-side-cell-border th {
    border-left: 0 !important;
    border-right: 0 !important;
}

table.table-text-center td,
table.table-text-center th { vertical-align: middle !important; }
table.ajax_view tbody tr { cursor: pointer; }

/* ============================================================
   4. CARDS & PRODUCTS
   ============================================================ */
.discount-badge {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 18px;
    padding: 7px;
}
.discount-badge-small {
    position: absolute;
    top: -2px;
    left: 10px;
    font-size: 12px;
    padding: 6px;
}
.product-info-table td, .product-info-table th { font-size: 12px; }

.catalogue { max-height: 127px; margin: auto; margin-bottom: 18px; }
.catalogue-title {
    display: inline-block;
    font-size: 18px;
    margin: 0 0 10px;
    line-height: 1;
}
.img-thumbnail {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    transition: border .2s ease-in-out;
    padding: 4px;
    margin: 3px;
    text-align: center;
}
.img-thumbnail > .badge {
    position: absolute;
    top: -5px;
    right: -7px;
    font-size: 9px;
    font-weight: 400;
    cursor: pointer;
}
.label-round { font-size: 8px; border-radius: 44%; }
.user_avatar { border-radius: 50%; width: 25px; height: 25px; margin: 1px; }
.product-thumbnail-small { height: 50px; width: 50px; }
.product_cell { height: 100px; padding: 1%; }
.product_cell_div {
    height: 100% !important;
    width: 100% !important;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    cursor: pointer;
    overflow: hidden;
}
.product_box {
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    background-color: #fff;
    border-radius: 12px;
    padding: 8px;
}
.product_box .image-container {
    height: 50px;
    margin: auto auto 4px;
    width: 100%;
}
.product_box .image-container img {
    height: 100%;
    width: 100%;
    border-radius: 12px;
}
.product_box .text_div { margin-top: 3px; }
.product_box .text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 14px;
    max-height: 14px;
}
.product_list { padding-left: 3px; padding-right: 3px; }

.eq-height-row {
    display: flex;
    flex-wrap: wrap;
}
.eq-height-col { display: flex; }

#product_list_body {
    max-height: 485px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.div-overlay {
    cursor: not-allowed;
    background: #e9e9e9;
    display: none;
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

/* ============================================================
   5. NAV, TABS, SIDEBAR
   ============================================================ */
.nav-tabs > li > a { font-size: 18px; font-weight: 600; }
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu { max-height: 350px; }
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a { white-space: normal; }
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
    border: none;
    height: auto;
    width: 100%;
    max-height: 120px;
}
.dropdown-menu > li > a > .fas { margin-right: 6px; }
.btn-app > .fas, .btn-app > .fab { font-size: 20px; display: block; }

.icon-link { text-align: center; display: block; margin-bottom: 18px; }
.icon-link > a { display: grid; }
.icon-link > .badge { position: absolute; top: 20px; right: 67px; }
.link-des { display: inline-block; text-align: left; }

.treeview-menu i { display: none !important; }
.treeview-menu a { padding-left: 25px !important; font-size: 95% !important; }
.treeview-menu a::before { content: "\2192 "; }
.tree-actions { margin-left: 20px; display: none; }
.jstree-hovered .tree-actions { display: inherit; }

.ui-autocomplete { max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.wizard > .steps > ul > li { width: 33.33% !important; }
.icheckbox_square-blue, .iradio_square-blue { margin-right: 10px; }

/* Header */
.header-right-div {
    right: 10px;
    float: right;
    position: absolute;
    top: 15px;
}
.header-left-div { margin-top: 15px; display: inline-flex; }
.main-header .sidebar-toggle:before { content: "" !important; }
.skin-black .main-header,
.skin-black-light .main-header { color: #525f7f !important; }
.skin-black .main-header .navbar .nav .open > a { color: #999 !important; }
.skin-black .main-header .navbar .nav > li > a:hover { color: #999 !important; }
.skin-black .main-header .navbar > .sidebar-toggle:hover { color: #999 !important; }

/* ============================================================
   6. LOGIN
   ============================================================ */
legend { color: #fff; margin-bottom: 6px; border-bottom: none; }
.left-col {
    background: linear-gradient(0deg, rgba(0,0,0,.76), rgba(51,51,51,.32)), url(../img/home-bg.jpg);
    text-align: center;
    background-size: cover;
    background-position: center;
}
.left-col-content { color: #1A7BF9; width: 100%; }
.login-header { font-size: 27px; font-weight: 600; }
.login-header a { color: #fff; }
.form-header { font-size: 18px; margin: 16px 0; }
.right-col {
    background: linear-gradient(to right, #6366f1, #3b82f6);
    height: 100%;
}
.input_inline { width: 100%; display: inline-flex; }
.input_inline input, .input_inline span { width: 50%; }

/* ============================================================
   7. POS
   ============================================================ */
.pos-form-actions {
    height: auto;
    padding-top: 12px;
    padding-bottom: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}
.pos_product_div { overflow-y: auto; height: 40vh !important; }
.balance_due_box > li { padding: 11px 5px 0; }

.option-div {
    padding: 15px;
    background-color: #d2d6de;
    color: #333;
    border: 1px solid #d2d6de;
    cursor: pointer;
}
.option-div input[type="radio"] { display: none; }
.option-div-group .icon { color: #d33724; display: none; }
.option-div-group .option-div:hover { border: 1px solid gray; }
.option-div-group .active .icon { display: block; }
.active-cell { border: 2px dotted #3c8dbc !important; }

.add-product-price-table th { background-color: #5cb85c; color: white; }
.blue-header th { background-color: #3c8dbc; color: white; }
.table-th-green th { background-color: #5cb85c; color: white; }

.pos-express-btn {
    font-size: 23px !important;
    overflow: hidden !important;
    height: 73px !important;
    white-space: normal;
}
.pos-total { padding: 8px 10px; vertical-align: middle; margin: 0 5px; }
.pos-total span.number { font-size: 26px; vertical-align: middle; font-weight: bolder; }
.pos-total span.text { font-weight: bolder; display: inline-block; width: 60px; vertical-align: middle; }

/* POS Tabs */
div.pos-tab-container {
    z-index: 10;
    background-color: #fff;
    padding: 0 !important;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin-bottom: 28px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}
div.pos-tab-menu { padding: 0; }
div.pos-tab-menu div.list-group { margin-bottom: 0; }
div.pos-tab-menu div.list-group > a { margin-bottom: 0; }
div.pos-tab-menu div.list-group > a .glyphicon,
div.pos-tab-menu div.list-group > a .fa { color: #5A55A3; }
div.pos-tab-menu div.list-group > a:first-child { border-top-right-radius: 0; }
div.pos-tab-menu div.list-group > a:last-child { border-bottom-right-radius: 0; }
div.pos-tab-menu div.list-group > a.active,
div.pos-tab-menu div.list-group > a.active .glyphicon,
div.pos-tab-menu div.list-group > a.active .fa {
    background: linear-gradient(to right, #6366f1, #3b82f6);
    color: #fff;
    border-color: transparent;
}
div.pos-tab-content { background-color: #fff; padding-left: 20px; padding-top: 20px; }
div.pos-tab div.pos-tab-content:not(.active) { display: none; }

/* ============================================================
   8. SCROLL
   ============================================================ */
.jquery-top-scrollbar { height: 6px !important; }
.jquery-top-scrollbar div { height: 6px !important; }
.scroll-top-bottom { width: 100%; overflow: scroll; }
.scroll-top-bottom::-webkit-scrollbar { height: 6px; }
.scrolltop {
    display: none;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    bottom: 20px;
    right: 10px;
}
.scroll {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: rgba(178,178,178,.7);
    padding: 7px;
    text-align: center;
    margin: 0;
    cursor: pointer;
    transition: 0.5s;
    border-radius: 6px;
}
.scroll:hover { background: rgba(178,178,178,1); }
.scroll .fas {
    font-size: 25px;
    margin-top: -5px;
    margin-left: 1px;
    transition: 0.5s;
}

/* ============================================================
   9. HOVER EFFECTS
   ============================================================ */
.hvr-grow-shadow {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    transition-duration: .3s;
    transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover,
.hvr-grow-shadow:focus,
.hvr-grow-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0,0,0,.5);
    transform: scale(1.1);
}

/* ============================================================
   10. DATATABLE DETAILS
   ============================================================ */
td.details-control {
    background: url('/img/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('/img/details_close.png') no-repeat center center;
}

/* ============================================================
   11. TOAST / SWAL
   ============================================================ */
.swal-modal .swal-text { text-align: center; }

/* ============================================================
   12. INPUT EXCEPTIONS
   ============================================================ */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.input-number .btn-default { background-color: white; padding: 6px 9px; }

/* ============================================================
   13. MODAL XL
   ============================================================ */
.modal-xl {
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   14. MEDIA QUERIES (extra)
   ============================================================ */
@media only screen and (max-width: 600px) {
    .pos-form-actions { position: absolute; }
}
@media (max-width: 1024px) {
    .pos_form_totals { margin-bottom: 40px; }
}

/* ============================================================
   15. PRINT
   ============================================================ */
.print_section { display: none; }
@media print {
    .print_section { display: inline !important; }
    .modal-xl { width: 100% !important; }
    ::-webkit-scrollbar { display: none !important; }
    #toast-container { display: none; }
    a:after { content: ''; }
    a[href]:after { content: none !important; }
}

/* ============================================================
   16. FONT — Cairo
   ============================================================ */
body, h1, h2, h3, h4, h5, h6, p, div, label, input, button, textarea,
span:not(.fas):not(.fab):not(.fa):not(.glyphicon) {
    font-family: 'Cairo', sans-serif !important;
}

/* FontAwesome fix */
.fas, .fab, .far, .fa, .glyphicon {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
}
.input-group-addon .fa,
.input-group-addon i {
    font-family: "Font Awesome 5 Free" !important;
}

/* ============================================================
   17. GLOBAL TEXT COLOR — Tables
   ============================================================ */
.table td, .table th {
    vertical-align: middle !important;
    text-align: right;
    padding: 12px 8px !important;
    white-space: normal !important;
    word-wrap: break-word;
    color: #000000 !important;
}
.table td { min-width: 80px; }
.table tbody tr { max-height: 80px; }
.table img { border-radius: 4px; object-fit: cover; }
.table.dataTable tbody tr:hover {
    background-color: #f1f7ff !important;
    transition: background-color .2s ease;
}

/* ============================================================
   18. GLOBAL HEADINGS — Bold & Dark
   ============================================================ */
.small-box h3,
.small-box .inner h3,
.small-box p,
.info-box-text,
.info-box-number,
.box-title,
.box-header h3,
.box-header .box-title,
.chart-title,
.panel-heading,
h1, h2, h3, h4, h5, h6,
.page-header,
.content-header h1,
.card-title,
.card-header,
.card-body h3,
.card-body h4 {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* ============================================================
   19. SIDEBAR — Main Menu
   ============================================================ */
.sidebar-menu > li > a,
.sidebar-menu > li > a > span,
.sidebar-menu > li > a > i,
.sidebar-menu > li > a > .title {
    color: #000000 !important;
    font-weight: 700 !important;
}
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:hover > span,
.sidebar-menu > li > a:hover > i {
    color: #000000 !important;
    font-weight: 700 !important;
    background-color: #e8f0fe !important;
}

/* ============================================================
   20. SIDEBAR — Sub-Menu (treeview)
   ============================================================ */
.treeview-menu > li > a,
.treeview-menu > li > a > span,
.treeview-menu > li > a > i {
    color: #333333 !important;
    font-weight: 600 !important;
}
.treeview-menu > li > a:hover,
.treeview-menu > li > a:hover > span,
.treeview-menu > li > a:hover > i {
    color: #0071e3 !important;
    background-color: #e8f0fe !important;
}

/* ============================================================
   21. SIDEBAR — Theme Custom Classes
   ============================================================ */
.theme-sidebar-child,
.theme-sidebar-child *,
.theme-sidebar-child span,
.theme-sidebar-child i {
    color: #333333 !important;
    font-weight: 600 !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

.theme-sidebar-child:hover,
.theme-sidebar-child:hover *,
.theme-sidebar-child-hover:hover,
.theme-sidebar-child-hover:hover * {
    color: #0071e3 !important;
    background-color: #e8f0fe !important;
}

/* Active item — NO blue bg, dark text */
.theme-sidebar-child-active,
.theme-sidebar-child-active *,
.theme-sidebar-child-active span,
.theme-sidebar-child-active i,
a.theme-sidebar-child-active,
.sidebar-menu li.active > a,
.sidebar-menu li.active > a * {
    color: #1d1d1f !important;
    font-weight: 700 !important;
    background-color: transparent !important;
    background: transparent !important;
    text-shadow: none !important;
}

.theme-sidebar-child-active:hover,
.theme-sidebar-child-active:hover * {
    color: #0071e3 !important;
    background-color: #e8f0fe !important;
}

/* Override Tailwind gray text on sidebar */
.theme-sidebar-child-active[class*="tw-text-gray"],
.theme-sidebar-child-active[class*="tw-text-gray"] *,
.theme-sidebar-child[class*="tw-text-gray"],
.theme-sidebar-child[class*="tw-text-gray"] * {
    color: inherit !important;
}

/* ============================================================
   22. BUTTONS — Colored (white text)
   ============================================================ */
.btn-primary,  .btn-primary *,
.btn-info,     .btn-info *,
.btn-success,  .btn-success *,
.btn-danger,   .btn-danger *,
.btn-warning,  .btn-warning *,
.bg-primary,   .bg-primary *,
.bg-info,      .bg-info *,
.bg-success,   .bg-success *,
.bg-danger,    .bg-danger * {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ============================================================
   23. BUTTONS — Light (dark text)
   ============================================================ */
.btn-default, .btn-default *,
.btn-light,   .btn-light *,
.btn-link,    .btn-link *,
.btn-secondary, .btn-secondary *,
.btn-gray,    .btn-gray *,
.btn-light-gray, .btn-light-gray *,
.btn-file,    .btn-file *,
input[type="file"],
input[type="file"] *,
.file-input, .file-input *,
.custom-file-label, .custom-file-label *,
.btn-upload, .btn-upload * {
    color: #333333 !important;
    font-weight: 600 !important;
}

/* Outlined buttons — blue text */
.btn-outline-primary, .btn-outline-primary *,
.btn-outline-info,    .btn-outline-info * {
    color: #007bff !important;
    font-weight: 600 !important;
}

/* Buttons inside tables */
.table td .btn-primary,
.table td .btn-info,
.table td .btn-success,
.table td .btn-danger,
.table td .btn-warning {
    color: #ffffff !important;
}
.table td .btn-default,
.table td .btn-light {
    color: #333333 !important;
}

/* ============================================================
   24. FORMS
   ============================================================ */
.form-control,
.form-control *,
select.form-control,
textarea.form-control,
input.form-control {
    color: #333333 !important;
}
.form-control::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* Muted text */
.text-muted,
small,
.help-block,
.text-muted-imp,
span.text-muted {
    color: #6c757d !important;
    font-weight: 500 !important;
}

/* Separators */
hr {
    border-top: 1px solid #d2d6de !important;
    opacity: 1 !important;
}