@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;
    }
}
.bg-danger {
    background-color: #f2dede !important;
}
.btn-big {
    padding: 10px 30px;
    font-size: 18px;
    line-height: 1.3333333;
}

.of-visible {
    overflow: visible !important;
}

#online_indicator {
  font-size: 8px;
  vertical-align: middle;
}

.pt-0 {
  padding-top: 0px;
}
.f-right {
  float: right;
}
.mb-10 {
  margin-bottom: 10px;
}
.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;
  line-height: 1;
  margin-bottom: 10px;
}
.bg-light-gray {
  background-color: #f8f8f8 !important;
}
.p-5-5 {
  padding: 5px 5px !important;
}
.m-4 {
  margin: 4px;
}
.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;
}
.mt-0{
  margin-top: 0 !important;
}
.table-pdf thead tr{
  background-color: #357ca5 !important;
  color: #fff;
}
.table-pdf thead tr th {
  color: #fff !important;
}
.blue-heading {
  background-color: #357ca5;
  color: #fff;
}

.table-pdf .odd {
    background-color: #DCE6F1;
}
.p-4{
  padding: 4px;
}
.p-10{
  padding: 10px !important;
}
.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:#b2b2b2;
  background:rgba(178,178,178,0.7);
  padding:7px;
  text-align: center;
  margin: 0 0 0 0;
  cursor:pointer;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s; 
  border-radius: 6px;   
}
.scroll:hover {
  background:rgba(178,178,178,1.0);
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;    
}
.scroll:hover .fas {
  padding-top:-10px;
}
.scroll .fas {
  font-size:25px;
  margin-top:-5px;
  margin-left:1px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;  
}

.f-left {
  float: left;
}
.align-left {
 text-align: left;
}
.align-right {
 text-align: right;
}

.table-pdf {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 8px 10px;
}
.td-border td, .td-border th{
  border-bottom: 1px solid lightgrey;
  padding: 8px 5px;
}

.ws-nowrap {
  white-space:nowrap;
}
tr.bg-gray.font-17.footer-total.text-center {
    background-color: #007bff !important; /* أزرق */
    color: #ffffff !important; /* خط أبيض */
}
tr.bg-gray.font-17.footer-total.text-center td {
    color: #ffffff !important; /* تأكد إن كل الـ td جواها أبيض */
}

.btn-app>.fas, .btn-app>.fab{
    font-size: 20px;
    display: block;
}
.dropdown-menu>li>a>.fas{
    margin-right: 6px;
}
.mt-5 {
  margin-top: 5px !important;
}
.pos-form-actions{
  height: auto;
  padding-top: 12px;
  padding-bottom: 20px;
  position: fixed;
  bottom: 0px;
  /* background-color: #D1D5DC; */
  width: 100%;
  z-index: 1000;
}
.mb-12 {
  margin-bottom: 12px !important;
}
.pb-0{
  padding-bottom: 0px !important;
}
.pr-12{
  padding-right: 12px !important;
}
.main-header .sidebar-toggle:before {
    content: "" !important;
}
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
} 
.margin-bottom-20 {
  margin-bottom: 20px !important;
}
.text-white {
  color: #fff;
}
.wizard > .steps > ul > li {
  width: 33.33% !important;
}
.wizard > .content {
  /* background: #445867 !important; */
}
legend {
  color: #fff;
  margin-bottom: 6px;
  border-bottom: none;
}
.left-col {
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.76),rgba(51, 51, 51, 0.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;
}
.btn-login {
  padding: 6px 52px !important;
}
/* .right-col {
  background-color: #243949;
  height: 100%;
  min-height: 100vh;
} */

/* Background color added by Prashant */
.right-col {
  background: url('../img/home-bg.png') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  height: 100%;
}


/* .right-col label {
  color: #fff;
}

.right-col a, .text-white a {
  color: #fff;
  font-weight: 600;
  font-size: 15px
}
.right-col a:hover, .text-white a:hover {
  color: #ccc;
}
.right-col-content {
  padding: 10% 16%;
  padding-bottom: 3%;
}
.right-col-content-register {
  padding: 2% 8%;
} */

.input_inline {
  width: 100%;
  display: inline-flex;
}
.input_inline input, .input_inline span {
  width: 50%;
}
.bg-manufacturing {
  background-color: #ff851b;
}
.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;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
  max-height: 350px;
}
.bg-aqua-lite {
  background-color: #7FFFD4;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
  white-space: normal;
}
.spacer {
  margin-top: 20px;
}
#product_list_body {
    max-height: 485px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.div-overlay {
    cursor: not-allowed;
    background: #e9e9e9; 
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.d-inline-table {
  display: inline-table;
}

.label-round{
  font-size: 8px;
  border-radius: 44%;
}
.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;
}
.bg-transparent{
  background-color: transparent !important;
}
.mb-0{
  margin-bottom: 0;
}

.nav-tabs>li>a{
  font-size: 18px;
  font-weight: 600;
}
.table-transparent, .table-transparent th {
    background-color: transparent !important;
    color: #000 !important;
}
.td-full-width {
  white-space:nowrap;
}
.font-17{
    font-size: 17px !important;
}
table.dataTable tbody>tr.selected{
    background-color: #B0BED9;
}
tr.footer-total > td {
    vertical-align: middle !important;
}
.error{
	color: red !important;
}
/*  pos tab */
div.pos-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
    margin-bottom: 28px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
}
div.pos-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 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;
  -moz-border-top-right-radius: 0;
}
div.pos-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-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-color: #3c8dbc;
  color: #ffffff;
    border-color: #3c8dbc;
} */

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: #ffffff;
  border-color: transparent;
}


div.pos-tab-menu div.list-group>a.active:after{
  /* content: ''; */
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #3c8dbc;
}

div.pos-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
  padding-left: 20px;
  padding-top: 20px;
}

div.pos-tab div.pos-tab-content:not(.active){
  display: none;
}

.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;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.active-cell {
    border: 2px dotted #3c8dbc !important;
}
.cursor-pointer{
    cursor: pointer !important;
}
.pos_product_div{
    /* min-height: 47vh;
    max-height: 57vh; */
    overflow-y: auto;
    /* margin-bottom: 20px; */
    height: 40vh !important;
}
.bg-lightgray{
    background-color: #F0EDED !important;
}
.balance_due_box >li{
    padding: 11px 5px 0px 5px;
}
.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;
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-bottom-12{
    margin-bottom: 12px;
}
.bg-info{
    background-color: #00c0ef !important;
}
.bg-info > a{
    color: #FFFFFF !important;
}
.bg-info>a:hover{
    background-color: #337ab7 !important;
}
ul.dt-button-collection{
    background-color: #00c0ef;
}
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;
}
.icheckbox_square-blue, .iradio_square-blue{
    margin-right: 10px;
}
.header-right-div{
    right: 10px;
    float: right;
    position: absolute;
    top: 15px;
}
.header-left-div{
    margin-top: 15px;
    display: inline-flex;
}
.m-8 {
    margin: 8px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.m-5 {
    margin: 5px;
}
.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;
}

.navbar-nav>.user-menu>.dropdown-menu>li.user-header>img {
    border: none;
    height: auto;
    width: 100%;
    max-height: 120px;
}
.bg-light-green{
    background-color: #98D973 !important;
    color: #fff !important
}
.hover-q {
    font-size: 16px;
    margin-left: 3px;
    cursor: help;
}
.input-group-addon .hover-q{
    margin-left: 0px;
}
.text-bold{
    font-weight: bold;
}
.tour .popover-content{
    padding: 18px 14px;
}
.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;
}

/* Custom scroll bar start*/

/* width */
/* ::-webkit-scrollbar {
    width: 7px;
} */

/* Track */
/* ::-webkit-scrollbar-track {
    background: #f1f1f1; 
} */
 
/* Handle */
/* ::-webkit-scrollbar-thumb {
    background: #888; 
} */

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
    background: #555; 
} */

/* Custom scroll bar end*/

.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;
}

/*CSS to print receipts*/
.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;
    }
}

.input-number .btn-default{
    background-color: white;
    padding: 6px 9px;
}

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

.font-30{
    font-size: 30px !important;
}

.font-23{
    font-size: 23px !important;
}
.padding-5{
    padding: 5px !important;
}
.padding-10{
    padding: 10px !important;
}
.padding-side-15{
    /*padding-left: 15px !important;
    padding-right: 15px !important;*/
}
.text-muted-imp{
    color: #A3A3A3 !important;
}

.table-no-top-cell-border td{
    border-top: 0px !important;
    border-bottom: 0px !important;
}
.table-no-top-cell-border th{
    border-top: 0px !important;
    border-bottom: 0px !important;
}

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

.color-555 {
    color: #555555 !important;
}
.color-555 *{
    color: #555555 !important;
}
.color-white {
    color: white !important;
}
.col-no-padding{
    padding-left: 0px;
    padding-right: 0px;
}
.col-2px-padding{
    padding: 2px;
}

.pos-express-btn{
    font-size: 23px !important;
    overflow: hidden !important;
    height: 73px !important;
    white-space: normal;
}
.word-wrap{
    word-wrap: break-word !important;
}

.modal-xl{
    width: 90%; /* respsonsive width */
    margin-left: auto !important;
    margin-right: auto !important;
}
table.ajax_view tbody tr{
    cursor: pointer;
}
.bg-white{
    background-color: #fff;
}

.product-thumbnail-small{
    height: 50px;
    width: 50px;
}

table.table-text-center td, table.table-text-center th{
    vertical-align: middle !important;
}
.product_list{
    padding-left: 3px;
    padding-right: 3px;
}
.product_box{
  width: 100%;
  /*padding-top: 5px;
  padding-bottom: 2px;*/
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  /*border: 1px solid darkgray;*/
  font-weight: 600;
  background-color: #fff;
  border-radius: 12px;
  padding: 8px;
}
.product_box .image-container{
  height: 50px;
  margin: auto;
  width: 100%;
  margin-bottom: 4px;
  
}
.product_box .image-container img{
  height: 100%;
  width: 100%;
  border-radius: 12px;
}
.eq-height-row{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex;
    flex-wrap: wrap;
}
.eq-height-col{
    display: flex;
}

.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; /* number of lines to show */
   line-height: 14px;        /* fallback */
   max-height: 14px;       /* fallback */
}
.small-box.bg-gray:hover{
    color: #000;
    text-decoration: none;
}

#calendar table tbody td {
    cursor: pointer;
}

.min-height-90hv{
    min-height: 90vh !important;
}

/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  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, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.text-link{
    cursor: pointer;
}

.text-link:hover{
    text-decoration: underline;
}

.v-center{
    vertical-align: middle !important;
}

.bg-woocommerce{
  background-color: #9E458B !important;
}

/*.box, .info-box, .nav-tabs-custom, .external-event{
  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2) !important;
}*/

.user_avatar {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 1px;
}

.fs-10 {
  font-size: 10px;
}

.timeline-lode-more-btn {
  margin-left: 50px;
  margin-top: 25px;
  padding-right: 12px;
  padding-left: 12px;
}

.pa-0 {
  padding: 0px !important;
}

.mt-56{
  margin-top: 56px !important;
}

.m-2{
  margin: 2px !important;
}

.treeview-menu i{
  display: none !important;
}
.treeview-menu a{
  padding-left: 25px !important;
  font-size: 95% !important;
}
.treeview-menu a::before{
  content: "\2192 ";
}

@media only screen and (max-width: 600px) {
  .pos-form-actions{
    position: absolute;
  }
}
.mr-8 {
  margin-right: 8px !important;
}

@media (max-width: 1024px) {
   .pos_form_totals{
        margin-bottom: 40px;
    }
}

.swal-modal .swal-text {
    text-align: center;
}

.pos-total {
    /* display: inline-block; */
    padding: 8px 10px;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 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;
}
.mb-40 {
    margin-bottom: 40px !important;
}

@media print {
    a:after { content:''; }
    a[href]:after { content: none !important; }
}

.fa-times{
    font-size: 30px
}
.mb-5{
  margin-bottom: 5px !important;
}
.tree-actions {
  margin-left: 20px;
  display: none;
}
.jstree-hovered .tree-actions {
  display: inherit;
}
.tw-text-lg.tw-font-medium.tw-text-center.tw-text-white.tw-mt-2.tw-shadow-md.tw-bg-blue-600.tw-rounded-md.tw-px-3.tw-py-1 {
    display: none !important;
}
/* ده علشان تبعد باقي الصفحة عن السايدبار اللي على اليمين */
.main-content,
.content-wrapper {
  margin-right: 250px; /* نفس عرض السايدبار */
  transition: all 0.3s ease; /* بس عشان لو عملت انيميشن */
}

/* شكل عام للـ Scrollbar */
::-webkit-scrollbar {
  width: 10px;              /* عرض الشريط */
  transition: all 0.3s ease-in-out;
}

/* الخلفية بتاعة المسار */
::-webkit-scrollbar-track {
  background: #e6e6ff;      /* سماوي فاتح */
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

/* الجزء اللي بتمسكه */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4B4BFF, #3737d9); /* تدرج لوني */
  border-radius: 10px;
  border: 2px solid #f0f0f0; /* حدود عشان تبان بارزة */
  transition: all 0.3s ease-in-out;
}

/* لما تحط الماوس عليه */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6464ff, #2a2ac7);
  box-shadow: 0 0 10px #4B4BFF, 0 0 5px #888 inset; /* توهّج */
  transform: scaleX(1.2); /* يكبر شوية */
}

/* لما تعمل كليك عليه */
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #2727ff, #0000cc);
  box-shadow: 0 0 15px #0000ff;
}
/* تخصيص الـ Scrollbar الخاص بالـ div اللي id بتاعه product_list_body */


.product_box .image-container {
    height: 100px; /* حجم الصورة */
    width: 100%;
    margin: auto;
    margin-bottom: 10px; /* مسافة بين الصورة والكلام */
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
body, html {
    margin: 0;
    padding: 0;
    height: auto;
}

footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.tw-bg-gradient-to-r.tw-from-primary-800.tw-to-primary-900 {
  background: linear-gradient(135deg, #000428, #004e92, #0066cc, #0099ff) !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.3), /* لمعة داخلية */
    0 0 20px rgba(0, 153, 255, 0.6),         /* توهج أزرق خارجي */
    0 0 40px rgba(0, 102, 204, 0.4);         /* توهج أوسع */
}


.tw-transition-all.tw-duration-200.tw-bg-white.tw-shadow-sm.hover\:tw-shadow-md.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 {
  background-color: #f0f8ff !important; /* أزرق فاتح جدًا */
  color: #000 !important;
  border-radius: 12px !important;
  border: 2px solid rgba(0, 0, 0, 0.15) !important; /* تحديد أوضح شوية */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* شادو ناعم */
}

.tw-transition-all.tw-duration-200.tw-bg-white.tw-shadow-sm.hover\:tw-shadow-md.tw-rounded-xl.tw-ring-1.tw-ring-gray-200:hover {
  background-color: #f0f8ff !important;
  border: 2px solid rgba(0, 0, 0, 0.2) !important; /* يتقل سنة بسيطة في الهوفر */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important; /* شادو أقوى سنة */
}



.product_box {
  position: relative !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 6px !important;
  margin: 5px !important;
  background: #fff !important;
  display: inline-block !important;
  width: 100% !important;          /* نفس العرض الأصلي */
  height: 140px !important;        /* أقصر في الطول */
  vertical-align: top !important;
  transition: box-shadow 0.3s ease !important;
}

.product_box:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

.product_box:hover {
  box-shadow: 0 0 8px rgba(0,0,0,0.15) !important;
}

.image-container {
  position: relative !important;
  width: 100% !important;
  height: 60px !important; /* أقصر للصورة */
  overflow: hidden !important;
  margin-bottom: 2px !important;
}

.text_div {
  text-align: center !important;
  line-height: 1.1em !important;
}
.text_div small {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* اسم المنتج */
.name-line {
  font-weight: bold !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* الكود */
.sku-line {
  font-size: 12px !important;
  color: #666 !important;
  margin-top: 1px !important;
}

/* المخزون */
.stock-line {
  font-size: 11px !important;
  color: #444 !important;
  margin-top: 1px !important;
}

/* السعر */
.price-line {
  font-weight: bold !important;
  color: #007bff !important; /* أزرق */
  margin-top: 2px !important;
}

/* الدايرة الخضراء والحمراء على البوكس */
.box-stock-indicator {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  z-index: 10 !important;
}
.box-stock-indicator.in-stock {
  background-color: #28a745 !important; /* أخضر */
}
.box-stock-indicator.out-stock {
  background-color: #dc3545 !important; /* أحمر */
}
.select2-dropdown,
.select2-search__field {
    background-color: #ffffff !important; /* خلي الخلفية بيضا */
    color: #000000 !important; /* النص اسود عشان يبقى واضح */
}

.select2-results__option {
    background-color: #ffffff !important; /* خلي الخلفية بيضا للقائمة */
    color: #000000 !important; /* النص اسود */
}

.select2-results__option--highlighted {
    background-color: #007bff !important; /* لون التحديد */
    color: #ffffff !important; /* النص أبيض على التحديد */
}
/* الأزرار */
.buttons-csv,
.buttons-html5,
.buttons-print,
.buttons-collection,
.buttons-excel {
    background-color: #0066cc !important; /* الأزرق */
    color: #ffffff !important; /* الكتابة بيضاء */
    border: none !important;
    border-radius: 50px; /* جعل الزوايا بيضاوية */
    padding: 6px 12px;
    font-weight: bold;
    transition: all 0.3s ease;
}

a.sm\:tw-inline-flex.tw-transition-all.tw-duration-200.tw-gap-2.tw-bg-primary-800 {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-weight: bold !important;
  color: #fff !important;
  border: none !important;
  background: linear-gradient(135deg, #ff4d4d, #ff6666, #ff8080, #ff4d4d) !important; /* 🔥 تدرج أحمر فاتح */
  background-size: 300% 300% !important;
  animation: gradientRedLight 3s linear infinite;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease !important;
}

@keyframes gradientRedLight {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

a.sm\:tw-inline-flex.tw-transition-all.tw-duration-200.tw-gap-2.tw-bg-primary-800::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-20deg);
  animation: shineRedLight 2s infinite;
}

@keyframes shineRedLight {
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}

a.sm\:tw-inline-flex.tw-transition-all.tw-duration-200.tw-gap-2.tw-bg-primary-800:hover {
  transform: scale(1.05) !important;
}





/* لمعة شايني */
a.btn.btn-success.btn-flat.m-8.btn-sm.mt-10.pull-left::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-20deg);
  animation: shinePurple 2s infinite;
}

@keyframes shinePurple {
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}

/* الهوفر يحافظ على نفس التأثير */
a.btn.btn-success.btn-flat.m-8.btn-sm.mt-10.pull-left:hover {
  transform: scale(1.05) !important; /* تكبير خفيف */
  /* الخلفية واللمعة شغالة زي ما هي */
}

button#view_todays_profit {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #2e7d32, #388e3c, #43a047, #4caf50) !important; /* 💚 تدرج أخضر */
  background-size: 300% 300% !important;
  animation: gradientGreen 3s linear infinite; /* حركة التدرج */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease-in-out !important;
}

/* حركة التدرج */
@keyframes gradientGreen {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* لمعة شايني */
button#view_todays_profit::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-20deg);
  animation: shineGreen 2s infinite;
}

@keyframes shineGreen {
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}

/* الهوفر */
button#view_todays_profit:hover {
  transform: scale(1.05) !important; /* تكبير خفيف */
  /* التدرج واللمعة شغالة باستمرار */
}


/* الشكل الأساسي */
a#show_unread_notifications {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-weight: bold !important;
  color: #000000 !important; /* الايقونة والنص أسود */
  border: none !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #f1c40f, #f4d03f, #f5b041, #f1c40f) !important; /* 💛 تدرج أصفر */
  background-size: 300% 300% !important;
  animation: gradientYellow 3s linear infinite; /* حركة التدرج */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease-in-out !important;
}

/* حركة التدرج */
@keyframes gradientYellow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* لمعة شايني */
a#show_unread_notifications::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-20deg);
  animation: shineYellow 2s infinite;
}

@keyframes shineYellow {
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}

/* تأثير الهوفر */
a#show_unread_notifications:hover {
  transform: scale(1.05) !important; /* تكبير خفيف */
  /* التدرج واللمعة شغالين باستمرار */
}

/* الشكل الأساسي لزر الحاسبة مع التدرج */
button#btnCalculator {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-weight: bold !important;
  color: #000000 !important; /* أيقونة بيضاء */
  border: none !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #e67e22, #f39c12, #e67e22, #d35400) !important; /* 🧡 تدرج برتقالي */
  background-size: 300% 300% !important;
  animation: gradientOrange 3s linear infinite; /* حركة التدرج */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease-in-out !important;
}

/* حركة التدرج */
@keyframes gradientOrange {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* لمعة شايني */
button#btnCalculator::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-20deg);
  animation: shineOrange 2.5s infinite;
}

@keyframes shineOrange {
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}

/* الهوفر */
button#btnCalculator:hover {
  transform: scale(1.05) !important; /* تكبير خفيف */
  /* التدرج واللمعة شغّالين طول الوقت */
}

/* الشكل الافتراضي للـ checkbox */
input[type="checkbox"] {
  appearance: none;          /* نشيل الشكل الافتراضي */
  -webkit-appearance: none;  /* للمتصفحات التانية */
  width: 18px;
  height: 18px;
  border: 2px solid #007bff; /* إطار أزرق */
  border-radius: 4px;        /* حواف دائرية بسيطة */
  background-color: #ffffff; /* خلفية بيضاء */
  cursor: pointer;
  position: relative;
}

/* لما يكون متعلم */
input[type="checkbox"]:checked {
  background-color: #007bff; /* خلفية أزرق */
  border-color: #007bff;
}

/* علامة الصح جوة الـ checkbox */
input[type="checkbox"]:checked::after {
  content: '✓';              /* علامة صح */
  color: #ffffff;            /* لون العلامة أبيض */
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-weight: bold;
}
a.tw-flex.tw-items-center.tw-justify-center.tw-w-full.tw-border-r.tw-h-15 {
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff); /* تدريج أزرق غامق إلى فاتح */
  color: #ffffff !important; /* خلي الخط أبيض عشان يبان */
  font-weight: 600;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2), 0 0 10px rgba(0, 123, 255, 0.6); /* لمعة */
  border: none; /* لو فيه إطار شيله */
}

p.tw-text-sm.tw-font-medium.tw-text-gray-500 {
  color: #000000 !important;       /* أسود */
  font-size: .8rem !important;    /* أكبر */
  font-weight: 700 !important;     /* Bold */
}

button.tw-hidden.lg\:tw-inline-flex {
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 50px; /* بيضاوي */
  padding: 0.5rem 1rem;
  height: 32px; /* نفس المقاس */
  box-shadow: 0 4px 8px rgba(0, 51, 102, 0.4) !important; /* شادو ناعم */
  transition: all 0.3s ease-in-out;
  background-size: 200% 200%;
}

button.tw-hidden.lg\:tw-inline-flex:hover {
  background-position: right center; /* حركة خفيفة */
  box-shadow: 0 6px 12px rgba(0, 51, 102, 0.6) !important;
  transform: translateY(-2px); /* دلع بسيط */
}
button.clock_in_btn {
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 50px; /* بيضاوي */
  padding: 8px 20px !important; /* زيادة العرض والارتفاع */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 51, 102, 0.4) !important; /* شادو خفيف */
  transition: all 0.3s ease-in-out;
  background-size: 200% 200%;
}

button.clock_in_btn:hover {
  background-position: right center; /* حركة التدرج */
  box-shadow: 0 6px 12px rgba(0, 51, 102, 0.6) !important; /* شادو أقوى */
  transform: translateY(-2px); /* حركة بسيطة */
}
summary.tw-dw-m-1.tw-inline-flex.tw-transition-all.tw-ring-1.tw-ring-white\/10.tw-cursor-pointer {
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff) !important; /* تدرج أزرق ثابت */
  color: #ffffff !important;              /* النص والأيقونة أبيض */
  border-radius: 50px !important;         /* بيضاوي */
  padding: 8px 16px !important;           /* نفس مقاس باقي الأزرار */
  font-weight: bold !important;           /* بولد */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important; /* ظل خفيف */
  transition: all 0.3s ease-in-out !important;
  cursor: pointer !important;
}

/* تأثير الهوفر */
summary.tw-dw-m-1.tw-inline-flex.tw-transition-all.tw-ring-1.tw-ring-white\/10.tw-cursor-pointer:hover {
  background: linear-gradient(135deg, #001a33, #003366, #004d99, #0073e6) !important; /* تدرج أزرق أغمق شوية عند الهوفر */
  box-shadow: 0 0 15px rgba(0, 102, 204, 0.6) !important; /* لمعة بسيطة */
  transform: scale(1.05) !important; /* تكبير خفيف */
}
summary.tw-inline-flex.tw-transition-all.tw-ring-1.tw-ring-white\/10 {
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff) !important; /* 🔵 تدرج أزرق ثابت */
  color: #ffffff !important;               /* النص والأيقونة أبيض */
  border-radius: 50px !important;          /* بيضاوي */
  padding: 8px 16px !important;            /* مقاس مريح */
  font-weight: bold !important;            /* بولد */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important; /* ظل خفيف */
  transition: all 0.3s ease-in-out !important;
  cursor: pointer !important;
}

/* تأثير الهوفر */
summary.tw-inline-flex.tw-transition-all.tw-ring-1.tw-ring-white\/10:hover {
  background: linear-gradient(135deg, #001a33, #003366, #004d99, #0073e6) !important; /* أزرق أغمق شوية */
  box-shadow: 0 0 15px rgba(0, 102, 204, 0.6) !important; /* لمعة بسيطة */
  transform: scale(1.05) !important; /* تكبير خفيف */
}

html[dir="rtl"] ul.tw-p-2.tw-w-48.tw-absolute.tw-right-0.tw-z-10.tw-mt-2.tw-origin-top-right {
  right: auto !important;           /* نشيل تأثير الـ right */
  left: 10px !important;            /* نزقه شوية من الشمال */
  transform-origin: top left !important; /* خلي أصل الحركة من الشمال */
  text-align: center !important;    /* خلي الكلام اللي جوه يتوسط */
}

h1.tw-text-2xl.md\:tw-text-4xl.tw-tracking-tight.tw-text-primary-800.tw-font-semibold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

h1.tw-text-2xl.md\:tw-text-4xl.tw-tracking-tight.tw-text-primary-800.tw-font-semibold::after {
  content: "👋";
  display: inline-block;
  font-size: 1.2em;
  animation: waveHand 1.5s infinite ease-in-out;
  transform-origin: 70% 70%; /* نقطة الدوران */
  margin-right: 6px;
}

/* الحركة بتاعة الإيد 👋 */
@keyframes waveHand {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(14deg); }
  20%  { transform: rotate(-8deg); }
  30%  { transform: rotate(14deg); }
  40%  { transform: rotate(-4deg); }
  50%  { transform: rotate(10deg); }
  60%  { transform: rotate(-2deg); }
  70%  { transform: rotate(6deg); }
  80%  { transform: rotate(-2deg); }
  90%  { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}
button.tw-dw-btn.tw-dw-btn-primary.tw-text-white.tw-dw-btn-lg {
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff) !important; /* تدرج الأزرق */
  color: #ffffff !important;           /* الكتابة أبيض */
  border-radius: 50px !important;      /* بيضاوي */
  font-weight: bold !important;        /* الخط عريض */
  padding: 12px 24px !important;       /* مساحة مريحة */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  transition: all 0.3s ease-in-out !important;
}

/* تأثير الهوفر بدون أي تكبير */
button.tw-dw-btn.tw-dw-btn-primary.tw-text-white.tw-dw-btn-lg:hover {
  background: linear-gradient(135deg, #004080, #0066cc, #0099ff, #33ccff) !important; /* أزرق أفتح ولمعة */
  box-shadow: 0 0 15px rgba(0, 153, 255, 0.6) !important; /* لمعة أزرق */
}
button.tw-dw-btn.tw-dw-btn-primary.tw-text-white.pull-right {
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff) !important; /* تدرج الأزرق */
  color: #ffffff !important;           /* كتابة بيضاء */
  border-radius: 50px !important;      /* حواف بيضاوية */
  font-weight: bold !important;
  padding: 10px 20px !important;       /* مساحة مريحة */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  transition: all 0.3s ease-in-out !important;
}

/* تأثير الهوفر بدون أي تكبير */
button.tw-dw-btn.tw-dw-btn-primary.tw-text-white.pull-right:hover {
  background: linear-gradient(135deg, #004080, #0066cc, #0099ff, #33ccff) !important; /* أزرق أفتح ولمعة */
  box-shadow: 0 0 15px rgba(0, 153, 255, 0.6) !important; /* لمعة أزرق */
}
div.box-tools a.tw-dw-btn {
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff) !important; /* التدرج الأزرق */
  color: #ffffff !important;           /* الكتابة أبيض */
  border-radius: 50px !important;      /* بيضاوي */
  font-weight: bold !important;
  padding: 10px 20px !important;       /* مساحة مريحة */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  transition: all 0.3s ease-in-out !important;
  text-decoration: none !important;
}

/* تأثير الهوفر بدون تكبير */
div.box-tools a.tw-dw-btn:hover {
  background: linear-gradient(135deg, #004080, #0066cc, #0099ff, #33ccff) !important; /* تدرج أزرق أفتح */
  box-shadow: 0 0 15px rgba(0, 153, 255, 0.6) !important; /* لمعة حلوة */
}
button.tw-dw-btn.tw-dw-btn-primary.tw-text-white {
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff) !important; /* تدرج الأزرق */
  color: #ffffff !important;              /* الكتابة بيضاء */
  border-radius: 50px !important;         /* بيضاوي */
  padding: 8px 16px !important;           /* نفس المقاس */
  font-weight: bold !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important; /* ظل خفيف */
  transition: all 0.3s ease-in-out !important;
}

/* الهوفر بدون تكبير */
button.tw-dw-btn.tw-dw-btn-primary.tw-text-white:hover {
  background: linear-gradient(135deg, #004080, #0055aa, #0077e6, #33aaff) !important; /* تدرج أفتح شوية عند المرور */
  box-shadow: 0 0 15px rgba(0, 128, 255, 0.6) !important; /* لمعة بسيطة */
}
a.tw-dw-btn.tw-dw-btn-success.tw-text-white {
  background: linear-gradient(135deg, #2e7d32, #388e3c, #43a047, #4caf50) !important; /* تدرج أخضر */
  color: #ffffff !important;           /* النص أبيض */
  border-radius: 50px !important;      /* بيضاوي */
  padding: 8px 16px !important;        /* نفس الحجم */
  font-weight: bold !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important; /* ظل خفيف */
  transition: all 0.3s ease-in-out !important;
}

/* الهوفر بدون تكبير */
a.tw-dw-btn.tw-dw-btn-success.tw-text-white:hover {
  background: linear-gradient(135deg, #388e3c, #43a047, #4caf50, #66bb6a) !important; /* أخضر أفتح عند الهوفر */
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.6) !important; /* لمعة بسيطة */
}
.scroll.icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: linear-gradient(135deg, #001f3f, #004080, #0066cc, #0099ff) !important; /* تدرج الأزرق */
  color: #ffffff !important;        /* الأيقونة أبيض */
  border-radius: 50% !important;    /* دائرة أو بيضاوي */
  padding: 8px !important;
  text-align: center !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease-in-out !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important; /* ظل بسيط */
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* تأثير الهوفر */
.scroll.icon:hover {
  background: linear-gradient(135deg, #004080, #0066cc, #0099ff, #33b5ff) !important; /* تدرج أفتح عند الهوفر */
  box-shadow: 0 0 12px rgba(0, 153, 255, 0.8) !important; /* لمعة خفيفة */
}
table.dataTable tbody tr.selected {
  background-color: rgba(0, 123, 255, 0.2) !important; /* أزرق فاتح شفاف */
  /* تقدر تغير rgba على مزاجك: 
     rgba(0, 123, 255, 0.1) أفتح
     rgba(0, 123, 255, 0.3) أغمق
  */
}
.small-box {
  border-radius: 20px !important; /* حواف بيضاوية */
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.25) !important; /* برواز خفيف */
  box-shadow: inset 0 0 15px rgba(255,255,255,0.15),
              0 4px 8px rgba(0,0,0,0.15) !important;
  transition: all 0.3s ease-in-out !important;
  overflow: hidden !important;
  position: relative !important;
}

/* لمعة عند المرور بالماوس */
.small-box:hover {
  box-shadow: inset 0 0 25px rgba(255,255,255,0.4),
              0 6px 15px rgba(0,0,0,0.3) !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* ✅ الألوان الأصلية مع تدرجات جميلة */
.small-box.color-تم-الاستلام {
  background: linear-gradient(135deg, #4d6dff, #3f51b5) !important; /* أزرق أصلي */
}

.small-box.color-تم-التصليح {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important; /* بنفسجي أصلي */
}

.small-box.color-جاري-الاصلاح {
  background: linear-gradient(135deg, #26a69a, #00796b) !important; /* أخضر تركوازي أصلي */
}

.small-box.color-تصليح-غير-متاح {
  background: linear-gradient(135deg, #ff4d6d, #f90f3d) !important; /* أحمر وردي أصلي */
}
/* الكلمات اللي فوق الأرقام */
.small-box .inner p {
  color: #fff !important;        /* ✅ أبيض */
  font-weight: bold !important;  /* ✅ Bold */
  font-size: 1.3rem !important;  /* ✅ تكبير الكلمات */
  text-align: center !important; /* ✅ توسيط النص */
  margin: 0 !important;
}

/* الأرقام */
.small-box .inner h3 {
  color: #fff !important;        /* ✅ أبيض */
  font-weight: bold !important;  /* ✅ Bold */
  font-size: 2rem !important;    /* ✅ تكبير الأرقام */
  margin: 10px 0 5px 0 !important;
  text-align: center !important; /* ✅ توسيط الرقم */
}
ul.pagination li a,
ul.pagination li span {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  font-weight: bold;
  color: #fff !important;
  background: linear-gradient(135deg, #0057ff, #00aaff) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-decoration: none !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* عند المرور بالماوس يلمع */
ul.pagination li a:hover,
ul.pagination li span:hover {
  box-shadow: 0 0 10px rgba(0, 120, 255, 0.7);
  transform: scale(1.05);
}

/* لو الزرار مفعّل (current page) */
ul.pagination li.active span {
  background: linear-gradient(135deg, #003bb5, #0077ff) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(0, 100, 255, 0.8);
}

/* لو الزرار disabled */
ul.pagination li.disabled span,
ul.pagination li.disabled a {
  background: #ccc !important;
  color: #777 !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}
tr.bg-gray.font-17.footer-total.text-center td {
  color: #ffffff !important;   /* الخط أبيض */
  font-weight: bold !important; /* الخط عريض */
  font-size: 18px !important;  /* حجم أوضح لو حبيت */
  text-shadow: 0 0 3px rgba(0,0,0,0.3); /* لمعان خفيف يخليه أوضح */
}
tr.bg-gray th {
  background-color: #007bff !important; /* نفس اللون الأزرق اللي في الصورة */
  color: #ffffff !important;            /* الخط أبيض */
  font-weight: bold !important;         /* الخط عريض */
  font-size: 18px !important;           /* تكبير الخط */
  text-align: center;                   /* توسيط النص */
  padding: 10px;                        /* مسافة داخلية مريحة */
}
tr.bg-gray th,
tr.bg-gray td {
  background-color: #007bff !important; /* أزرق قوي */
  color: #ffffff !important;            /* الخط أبيض */
  font-weight: bold !important;         /* الخط عريض */
  font-size: 18px !important;           /* حجم الخط */
  text-align: center;                   /* توسيط */
  padding: 10px;                        /* مسافة داخلية */
  border: 1px solid #ffffff40;          /* برواز خفيف */
}
#bs-example-navbar-collapse-1 a {
  color: #000000 !important; /* أسود واضح */
  font-weight: 700 !important; /* بولد */
  font-size: 17px !important; /* أكبر شوية */
  text-decoration: none !important;
}
a.navbar-brand {
  color: #000000 !important;   /* أسود واضح */
  font-weight: 700 !important; /* بولد */
  font-size: 20px !important;  /* أكبر شوية */
  text-decoration: none !important; /* من غير خط تحت */
}
.tw-bg-gray-200.tw-text-primary-700 {
  background: #d0e7ff !important; /* أزرق فاتح وجميل */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 102, 255, 0.2) !important;
  border-radius: 8px !important; /* لو عايز الزوايا ناعمة */
}

button.tw-bg-\[\#646EE4\],
label.tw-bg-gradient-to-r,
div.tw-bg-\[\#646EE4\] {
  background: linear-gradient(135deg, #0044ff, #007bff, #00aaff) !important;
  color: #fff !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 9999px !important; /* بيضاوي */
  padding: 8px 18px !important;
  box-shadow: 0 4px 10px rgba(0,123,255,0.4) !important;
  transition: all 0.3s ease-in-out !important;
}

/* نفس التأثير عند الهوفر */
button.tw-bg-\[\#646EE4\]:hover,
label.tw-bg-gradient-to-r:hover,
div.tw-bg-\[\#646EE4\]:hover {
  background: linear-gradient(135deg, #0033cc, #0056b3, #0088cc) !important;
}
.text-link.text-info.cursor-pointer {
    color: #000000 !important;   /* أسود */
    font-weight: bold !important; /* تخين وواضح */
}
button#btnCalculator {
  background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700); /* اصفر ذهبي متدرج */
  color: #000000 !important; /* الأيقونة أو النص جوه أسود */
  border-radius: 8px;
  box-shadow: 0 0 10px #FFD700, 0 0 20px #FFA500, 0 0 30px #FFD700;
  animation: shine 2s infinite linear;
}

/* لمعة مستمرة */
@keyframes shine {
  0% {
    box-shadow: 0 0 5px #FFD700, 0 0 10px #FFA500, 0 0 20px #FFD700;
  }
  50% {
    box-shadow: 0 0 20px #FFD700, 0 0 30px #FFA500, 0 0 40px #FFD700;
  }
  100% {
    box-shadow: 0 0 5px #FFD700, 0 0 10px #FFA500, 0 0 20px #FFD700;
  }
}

button#btnCalculator i {
  color: #000000 !important; /* لو الأيقونة جواها لسه بلون تاني */
}
button#view_suspended_sales {
  width: 32px; /* نفس مقاس الآلة الحاسبة */
  height: 32px;
  border-radius: 50% !important; /* دائري */
  background: linear-gradient(135deg, #FFC107, #FF9800); /* أصفر ذهبي متدرج */
  color: #000000 !important; /* الأيقونة جوا الزرار أسود */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  position: relative;
  overflow: hidden;
}

/* اللمعة المستمرة */
button#view_suspended_sales::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
  animation: shinyMove 1.8s infinite linear;
}

@keyframes shinyMove {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

button#view_suspended_sales i {
  color: #000000 !important; /* الأيقونة من الداخل سوداء */
  font-size: 16px; /* حجم الأيقونة جوه الزرار */
}
button#full_screen {
  width: 32px;
  height: 32px;
  border-radius: 50% !important; /* دائري */
  background: linear-gradient(135deg, #8BC34A, #4CAF50); /* أخضر فاتح متدرج */
  color: #000000 !important; /* الأيقونة من جوة سوداء */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  position: relative;
  overflow: hidden;
}

/* اللمعة المستمرة */
button#full_screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
  animation: shinyMove 1.8s infinite linear;
}

@keyframes shinyMove {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

button#full_screen i {
  color: #000000 !important; /* الأيقونة من الداخل سوداء */
  font-size: 16px;
}
button#return_sale {
  width: 32px;
  height: 32px;
  border-radius: 50% !important; /* دائري */
  background: linear-gradient(135deg, #ff4c4c, #ff6b9c); /* أحمر مع بينك */
  color: #000000 !important; /* الأيقونة جواها أسود */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  position: relative;
  overflow: hidden;
}

/* تأثير اللمعة المستمرة */
button#return_sale::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
  animation: shinyReturn 1.8s infinite linear;
}

@keyframes shinyReturn {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

button#return_sale i {
  color: #000000 !important; /* الأيقونة بالأسود */
  font-size: 16px;
}
button#register_details {
  width: 32px;
  height: 32px;
  border-radius: 50% !important; /* دائري */
  background: linear-gradient(135deg, #c084fc, #a78bfa); /* بربل فاتح */
  color: #000000 !important; /* الأيقونة أسود */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  position: relative;
  overflow: hidden;
}

/* تأثير اللمعة المستمرة */
button#register_details::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
  animation: shinyPurple 1.8s infinite linear;
}

@keyframes shinyPurple {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

button#register_details i {
  color: #000000 !important; /* الأيقونة بالأسود */
  font-size: 16px;
}
button#close_register {
  width: 32px;
  height: 32px;
  border-radius: 50% !important; /* دائري */
  background: linear-gradient(135deg, #d32f2f, #d32f2f); /* أحمر فاتح */
  color: #FFFFFF !important; /* الأيقونة أسود */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  position: relative;
  overflow: hidden;
}

/* تأثير اللمعة المستمرة */
button#close_register::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
  animation: shinyRed 1.8s infinite linear;
}

@keyframes shinyRed {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

button#close_register i {
  color: #FFFFFF !important; 
  font-size: 16px;
}


button#add_expense {
  background: linear-gradient(to right, #0015ff, #0040ff, #0077ff, #00aaff); /* التدرج الأزرق الجامد */
  color: #ffffff !important; /* النص أبيض */
  border: none !important; /* شيل أي برواز */
  border-radius: 50px; /* نفس الشكل النعس لو محتاجه */
  font-weight: bold;
  box-shadow: 0 0 15px rgba(0, 119, 255, 0.7); /* لمعة خارجية مستمرة */
  transition: all 0.3s ease-in-out;
}

button#add_expense:hover {
  filter: brightness(1.2); /* لمعة عند المرور */
}

/* الشكل العام لكل العناصر */
.dropdown-menu > li > a {
    color: #000 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 6px 10px !important;
    text-decoration: none !important;
}

.dropdown-menu > li > a i {
    font-size: 16px !important;
    color: #000 !important;
}

/* أيقونة الحذف بالاسم */
.dropdown-menu > li > a i.fa-trash {
    color: #d9534f !important; /* الايقونة حمراء */
}

/* لو الرابط نفسه يحتوي على كلمة حذف بالعربي */
.dropdown-menu > li > a:contains("حذف") {
    color: #000 !important; /* النص يظل أسود */
    font-weight: bold !important;
}

/* لو الرابط نفسه يحتوي على كلمة Delete بالإنجليزي */
.dropdown-menu > li > a:contains("Delete") {
    color: #000 !important; /* النص يظل أسود */
    font-weight: bold !important;
}

/* تأثير عند المرور */
.dropdown-menu > li > a:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px;
}

/* تحديد عام على القائمة المنسدلة */
ul.dropdown-menu {
    border: 1px solid rgba(0, 123, 255, 0.3);
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.15);
    background-color: #fff;
}

ul.dropdown-menu {
    border: 1px solid rgba(0, 123, 255, 0.3); /* إطار أزرق خفيف */
    border-radius: 6px; /* حواف ناعمة */
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.15); /* شادو أزرق خفيف */
    background-color: #fff; /* خلفية بيضاء */
}
button.tw-dw-btn.tw-text-white.tw-dw-btn-lg.bg-maroon.submit_product_form {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  border-radius: 50px !important; /* بيضاوي */
  font-weight: bold !important;
  color: #fff !important;
  border: none !important;
  background: linear-gradient(135deg, #d81b60, #e63c75, #ff5c8a) !important; /* التدرج الأساسي */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
  cursor: pointer;
}

/* تأثير اللمعة عند المرور بالماوس */
button.tw-dw-btn.tw-text-white.tw-dw-btn-lg.bg-maroon.submit_product_form:hover {
  background: linear-gradient(135deg, #e63c75, #ff5c8a, #ff80a0) !important; /* أفتح شوية */
  box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important; /* ظل أعمق عشان يبان لامع */
}

button.tw-dw-btn.tw-dw-btn-neutral.tw-text-white.no-print {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  border-radius: 50px !important;      /* بيضاوي */
  font-weight: bold !important;
  color: #fff !important;              /* النص أبيض */
  background: linear-gradient(135deg, #b30000, #cc0000, #e60000) !important; /* أحمر أغمق متدرج */
  border: none !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
  cursor: pointer;
}

/* الهوفر */
button.tw-dw-btn.tw-dw-btn-neutral.tw-text-white.no-print:hover {
  background: linear-gradient(135deg, #cc0000, #e60000, #ff1a1a) !important; /* أغمق مع لمعة خفيفة */
  box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
}
button#pos-cancel {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;   /* بيضاوي */
  font-weight: bold !important;
  color: #fff !important;          /* الكتابة أبيض */
  border: none !important;
  background: linear-gradient(135deg, #b30000, #cc0000, #e60000) !important; /* أحمر غامق متدرج */
  background-size: 200% 200% !important;
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
}

/* الهوفر: يدي إحساس باللمعة */
button#pos-cancel:hover {
  background: linear-gradient(135deg, #cc0000, #e60000, #ff1a1a) !important; /* أفتح شوية وتلمع */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
button[data-pay_method="cash"] {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  border-radius: 50px !important; /* بيضاوي */
  font-weight: bold !important;
  color: #fff !important;
  border: none !important;
  background: linear-gradient(135deg, #006400, #008000, #00a000) !important;
  background-size: 200% 200% !important;
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
}

button[data-pay_method="cash"]:hover {
  background: linear-gradient(135deg, #007000, #009000, #00b000) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
button#pos-finalize {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  border-radius: 50px !important; /* بيضاوي */
  font-weight: bold !important;
  color: #fff !important;
  border: none !important;
  background: linear-gradient(135deg, #2196F3, #1565C0, #0D47A1) !important; /* 💙 تدرج أزرق مع غامق في الآخر */
  background-size: 200% 200% !important;
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
}

button#pos-finalize:hover {
  background: linear-gradient(135deg, #1E88E5, #0D47A1, #002171) !important; /* أغمق عند الهوفر */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; /* لمسة لمعة */
}
/* الزرار الأساسي */
button.tw-bg-gradient-to-r {
  background: linear-gradient(135deg, #1e3a8a, #2563eb, #3b82f6) !important; /* درجات الأزرق الغامق */
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: bold !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important; /* شادو خفيف */
  transition: all 0.3s ease-in-out !important;
}

/* تأثير الماوس */
button.tw-bg-gradient-to-r:hover {
  background: linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa) !important; /* أفتح شوية مع لمعة */
  box-shadow: 0 4px 8px rgba(0,0,0,0.25) !important; /* شادو أكبر */
  transform: scale(1.02) !important; /* تكبير خفيف */
}

/* تأثير عند الضغط */
button.tw-bg-gradient-to-r:active {
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8, #2563eb) !important; /* غامق أكتر */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset !important;
}
button#save-and-print {
  background: linear-gradient(45deg, #00c853, #4caf50, #43a047); /* أخضر تدريجي */
  background-size: 200% 200%;
  color: #ffffff !important;
  font-weight: bold;
  border: none;
  border-radius: 12px; /* شياكة */
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.7); /* لمعة أخضر حوالين الزرار */
  transition: all 0.4s ease-in-out;
  animation: greenGlow 3s infinite alternate; /* حركة ولمعة مستمرة */
}

button#save-and-print:hover {
  background-position: right center;
  box-shadow: 0 0 25px rgba(0, 255, 0, 0.9); /* لمعة أقوى عند الهوفر */
  transform: scale(1.05); /* تكبير بسيط */
}

/* حركة التدريج */
@keyframes greenGlow {
  0% {
    background-position: left center;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
  }
  100% {
    background-position: right center;
    box-shadow: 0 0 25px rgba(0, 255, 0, 1);
  }
}
button#save-and-print {
  background: linear-gradient(45deg, #00c853, #4caf50, #43a047); /* أخضر تدريجي */
  background-size: 200% 200%;
  color: #ffffff !important;
  font-weight: bold;
  border: none;
  border-radius: 50px; /* بيضاوي */
  padding: 12px 30px; /* حجم كويس */
  font-size: 1.1rem;
  transition: all 0.4s ease-in-out;
  box-shadow: none; /* بدون شادو عادي */
}

/* عند المرور بالماوس */
button#save-and-print:hover {
  background-position: right center; /* لمعة بالتدرج */
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.4); /* شادو خفيف أخضر */
  transform: scale(1.03); /* تكبير خفيييف */
}
/* زرار حفظ وتحميل المستندات (أزرق سماوي) */
button#save_and_upload_docs {
  background: linear-gradient(45deg, #0dcaf0, #0aaedc, #0dcaf0);
  background-size: 200% 200%;
  color: #fff !important;
  font-weight: bold;
  border: none;
  border-radius: 50px; /* بيضاوي */
  padding: 10px 22px;
  font-size: 1rem;
  transition: all 0.4s ease-in-out;
  box-shadow: none;
}
button#save_and_upload_docs:hover {
  background-position: right center;
  box-shadow: 0 0 10px rgba(13, 202, 240, 0.6);
  transform: scale(1.05);
}

/* زرار حفظ (أزرق غامق) */
button#save {
  background: linear-gradient(45deg, #1572e8, #135cc9, #1572e8);
  background-size: 200% 200%;
  color: #fff !important;
  font-weight: bold;
  border: none;
  border-radius: 50px; /* بيضاوي */
  padding: 10px 22px;
  font-size: 1rem;
  transition: all 0.4s ease-in-out;
  box-shadow: none;
}
button#save:hover {
  background-position: right center;
  box-shadow: 0 0 10px rgba(21, 114, 232, 0.6);
  transform: scale(1.05);
}

نسميه حاجه اكثر تحديد submit and add بس button#save_and_add_parts.btn.btn-success.submit_button {
  border-radius: 50px !important;     /* اجبره يكون بيضاوي */
  padding: 12px 30px !important;      /* حواف كبيرة من الجنب عشان يبان بيضاوي */
  width: auto !important;             /* خليه على قد المحتوى */
  height: auto !important;            /* خليه على قد المحتوى */
  background: linear-gradient(45deg, #28c76f, #22a45d, #28c76f) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  font-weight: bold !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.4s ease-in-out !important;
}

button#save_and_add_parts.btn.btn-success.submit_button:hover {
  background-position: right center !important;
  box-shadow: 0 0 10px rgba(40, 199, 111, 0.6) !important;
  transform: scale(1.05) !important;
}
button.tw-dw-btn.tw-dw-btn-neutral.tw-text-white {
  background: linear-gradient(45deg, #b71c1c, #d32f2f, #b71c1c); /* أحمر غامق بتدرج */
  background-size: 200% 200%;
  color: #fff !important;
  font-weight: bold;
  border: none;
  border-radius: 50px; /* بيضاوي */
  padding: 10px 26px;
  font-size: 1rem;
  transition: all 0.4s ease-in-out;
  box-shadow: none; /* بدون شادو عادي */
}

button.tw-dw-btn.tw-dw-btn-neutral.tw-text-white:hover {
  background-position: right center;
  box-shadow: 0 0 10px rgba(183, 28, 28, 0.5); /* شادو خفيف أحمر */
  transform: scale(1.05); /* تكبير بسيط */
}
button.dashboard-date-filter {
  background: linear-gradient(135deg, #FFD700, #FFC107, #FFD700);
  background-size: 200% 100%;
  color: #000 !important;
  font-weight: 700;
  font-size: 14px;
  padding: 0 20px;
  height: 32px !important;
  line-height: 32px !important;
  border: none;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

/* شريط اللمعة */
button.dashboard-date-filter::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transform: skewX(-20deg);
  animation: shineMove 2s linear infinite;
}

/* الحركة */
@keyframes shineMove {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

a.tw-hidden.sm\:tw-inline-flex.tw-transition-all.tw-duration-200.tw-gap-2.tw-bg-primary-800 {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-weight: bold !important;
  color: #fff !important;
  border: none !important;
  background: linear-gradient(135deg, #4b0082, #5e0acc, #6b21a8, #4b0082) !important; /* 💜 بنفسجي غامق متدرج */
  background-size: 300% 300% !important;
  animation: gradientPurpleLight 3s linear infinite;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease !important;
}

@keyframes gradientPurpleLight {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

a.tw-hidden.sm\:tw-inline-flex.tw-transition-all.tw-duration-200.tw-gap-2.tw-bg-primary-800::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-20deg);
  animation: shinePurpleLight 2s infinite;
}

@keyframes shinePurpleLight {
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}

a.tw-hidden.sm\:tw-inline-flex.tw-transition-all.tw-duration-200.tw-gap-2.tw-bg-primary-800:hover {
  transform: scale(1.05) !important;
}
.box-header.text-center {
  background-color: #0084FF !important;
  color: white !important;
  font-size: 30px;
  font-weight: bold;
  padding: 15px;
  border-radius: 6px;
  text-align: center;
}
button#opening_stock_button {
  background: linear-gradient(135deg, #4b0082, #5e0acc, #6b21a8, #4b0082) !important;
  background-size: 300% 300% !important;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  border: none !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease-in-out !important;
  z-index: 1;
}

/* لمعة تظهر فقط مع الهوفر */
button#opening_stock_button:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-20deg);
  animation: shineOnHover 1.8s ease-out;
  z-index: 2;
}

/* الحركة تظهر لمرة واحدة عند الهوفر */
@keyframes shineOnHover {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* تأثير تكبير خفيف */
button#opening_stock_button:hover {
  transform: scale(1.05);
}

button.tw-dw-btn.tw-dw-btn-lg.bg-maroon.submit_product_form {
  background: linear-gradient(135deg, #4b0082, #5e0acc, #6b21a8, #4b0082) !important;
  background-size: 300% 300% !important;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  border: none !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease-in-out !important;
  z-index: 1;
}

/* لمعة تظهر فقط عند الـ hover */
button.tw-dw-btn.tw-dw-btn-lg.bg-maroon.submit_product_form:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-20deg);
  animation: shineHoverOnce 1.8s ease-out;
  z-index: 2;
}

/* حركة لمعة لمرة واحدة */
@keyframes shineHoverOnce {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* تكبير بسيط مع الـ hover */
button.tw-dw-btn.tw-dw-btn-lg.bg-maroon.submit_product_form:hover {
  transform: scale(1.05);
}
input.form-control.input-sm {
  border-radius: 30px !important;   /* بيضاوية */
  border: 2px solid #007bff !important; /* تحديد باللون الأزرق الجميل */
  padding: 6px 12px !important;     /* مسافة داخلية مريحة */
  font-size: 14px !important;       /* حجم خط مناسب */
  font-weight: 500 !important;      /* تخانة بسيطة */
  transition: all 0.3s ease-in-out; /* حركة نعومة عند التركيز */
}

input.form-control.input-sm:focus {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.6) !important; /* ظل أزرق عند التركيز */
  border-color: #0056b3 !important;                     /* غامق شوية عند التركيز */
}
select.form-control.input-sm {
  border-radius: 30px !important;        /* زوايا بيضاوية */
  border: 2px solid #007bff !important;  /* تحديد أزرق جميل */
  padding: 4px 10px !important;          /* مسافات داخلية */
  font-size: 14px !important;            /* تكبير بسيط للخط */
  font-weight: 500 !important;           /* الخط تخين شوية */
  transition: all 0.3s ease-in-out;      /* حركة ناعمة */
  background-color: #fff !important;     /* خلفية بيضاء واضحة */
}

select.form-control.input-sm:focus {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.6) !important; /* ظل أزرق عند التركيز */
  border-color: #0056b3 !important;                     /* تحديد أزرق غامق */
}
label {
  font-size: 16px !important;   /* كبرنا الخط درجة واحدة عن الافتراضي */
  font-weight: 700 !important;  /* خط بولد واضح */
  color: #000 !important;       /* لون أسود واضح */
}

#dashboard_date_filter {
    background: linear-gradient(135deg, #FFD700, #FFC107); /* أصفر مع تدرج لمعة */
    color: black !important; /* خط أسود */
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5), 0 2px 6px rgba(0,0,0,0.15); /* لمعة ثابتة */
    transition: all 0.3s ease-in-out;
}

/* Hover رقيق */
#dashboard_date_filter:hover {
    background: linear-gradient(135deg, #FFEB3B, #FFC107);
    box-shadow: inset 0 0 12px rgba(255,255,255,0.6), 0 3px 8px rgba(0,0,0,0.2);
    transform: scale(1.02);
}

 button.tw-dw-btn.tw-dw-btn-lg.bg-maroon.submit_product_form {
  background: linear-gradient(135deg, #006400, #0b8a2e, #1db954, #006400) !important;
  background-size: 300% 300% !important;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  border: none !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease-in-out !important;
  z-index: 1;
}

/* لمعة تظهر فقط عند الـ hover */
button.tw-dw-btn.tw-dw-btn-lg.bg-maroon.submit_product_form:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-20deg);
  animation: shineHoverOnce 1.8s ease-out;
  z-index: 2;
}

/* حركة لمعة لمرة واحدة */
@keyframes shineHoverOnce {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* تكبير بسيط مع الـ hover */
button.tw-dw-btn.tw-dw-btn-lg.bg-maroon.submit_product_form:hover {
  transform: scale(1.05);
} 
/* تعديل شكل زرار select الخاص بـ custom_labels_products */
select.custom_labels_products,
select.custom_labels_products:focus,
select.custom_labels_products:active {
    background-color: #cce6ff !important;    /* أزرق فاتح فاتح زي الصورة */
    color: #000000 !important;               /* الكتابة بالأسود */
    border: 1px solid #99ccff !important;
    border-radius: 6px;
    padding: 6px 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 35px; /* مساحة للسهم */
}

#profit_percent {
    position: relative !important;
    top: 8px !important; /* عدل الرقم حسب التساوي المطلوب */
}