/* ========================================================== */
/* 1. BASE & CORE                                             */
/* ========================================================== */

body {
    position: relative;
    color: #000;
    vertical-align: middle !important;
    background-image: url(../images/back.webp);
    background-repeat: repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    margin: 0;
    padding: 0 0 65px 0 !important;
    cursor: auto !important;
}

.navbar-fixed-bottom {
    z-index: 1030 !important;
}

.page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.date_padding {
    padding: 20px;
}

.text-dark {
    color: #000;
}

.font-weight-bold {
    font-weight: bold;
}

#loading {
    text-align: center;
    background: url(../images/loader.gif) no-repeat center;
    height: 150px
}

.back-color {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: -1;
}

.date {
    color: #231f20;
    font-size: 16px;
    top: 10px;
    position: absolute;
    right: 60px;
    direction: ltr;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #eee;
    -webkit-box-shadow: inset 0 0 6px #eee;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    background: #717b7d;
}

::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    background: linear-gradient(190deg, #040f25 0, #040507 60%);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: #2b2e33;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #575c68;
}

a {
    text-decoration: none;
}

a:focus,
a:hover {
    color: #739ec5;
    text-decoration: none
}

/* ========================================================== */
/* 2. LAYOUT: NAVBARS & SIDEBAR                               */
/* ========================================================== */

/* --- Nav Top --- */
.master-navbar .navbar-nav {
    padding: 0
}

.master-navbar .navbar-nav>li>a {
    padding: 8px 10px;
}

.master-navbar .navbar-nav>li>a:hover {
    color: #fff
}

.master-navbar .alert-new-mail {
    font-size: 20px;
    padding: 7px;
}

.master-navbar .navbar-toggle {
    margin: 4px 30px;
    padding: 5px;
}

.master-navbar .fa-chevron-down {
    padding: 0px 5px;
    font-size: 10px;
}

/* --- Nav Bottom --- */
#bottom-menu .navbar-shortcuts,
#bottom-menu .navbar-brand {
    padding: 0px 10px;
}

#bottom-menu .navbar-brand img {
    padding: 5px 10px;
    height: 40px;
}

#bottom-menu .logout {
    display: inline-block;
    vertical-align: middle;
}

#bottom-menu .logout button {
    background: transparent;
    border: 0;
    color: #231f20;
    font-size: 25px;
    top: 8px;
    position: absolute;
    right: 20px;
    direction: ltr;
}

/* --- Fixed Menu (Sidebar) --- */
.fixed-menu {
    background: #5d3e09;
    color: #fff;
    position: absolute;
    left: -250px;
    top: 0;
    width: 250px;
    z-index: 9999;
    padding: 20px;
    height: 100vh;
}

.fixed-menu h3 {
    margin: 10px auto;
}

.fixed-menu .menu {
    position: absolute;
    right: -50px;
    top: 5px;
    width: 55px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.fixed-menu::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background-image: url('../images/icons/elzahar.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.1;
    pointer-events: none;
}

/* --- Action Bar (Depart Nav) - Modern Premium --- */
.navbar.depart-nav {
    background: #fff !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    min-height: unset !important;
    padding: 0 !important;
    overflow: visible !important;
    width: 80% !important;
    max-width: 1400px !important;
    margin: 15px auto !important;
    float: none !important;
    display: block !important;
}

@media (max-width: 767px) {
    .navbar.depart-nav.hidden-xs {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .inventory-search-container {
        margin-top: 25px !important;
    }

    .inventory-inputs-row {
        margin-top: 15px !important;
    }
}

.depart-nav .nav-title-static {
    padding: 8px 15px !important;
    font-weight: 800;
    color: #fff !important;
    font-size: 13px;
    background: #34495e;
    border-radius: 20px;
    margin: 0 10px;
    cursor: default !important;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.depart-nav .navbar-nav>li>a,
.depart-nav .navbar-nav>li>form>button {
    color: #2c3e50 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 6px 12px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
}

.depart-nav .navbar-nav>li>a:hover,
.depart-nav .navbar-nav>li>form>button:hover {
    color: #2980b9 !important;
    background: rgba(41, 128, 185, 0.08) !important;
}

.depart-nav .break {
    display: block !important;
    width: 1px;
    height: 20px;
    background: #eef2f7;
    margin: 0 5px;
    text-indent: -9999px;
    overflow: hidden;
}

.depart-nav .emp-name {
    padding: 12px 15px !important;
    font-weight: 700;
    color: #2c3e50 !important;
    font-size: 14px;
    border-left: 1px solid #eef2f7;
    margin-left: 10px;
    background: #f8f9fa;
    border-radius: 6px;
}



.sort {
    cursor: pointer;
}

.sort_active {
    background: black !important;
    color: #fff !important;
}

.sort_active:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0dc";
    display: inline-block;
    padding-left: 4px;
    vertical-align: middle;
    font-weight: 900;
}


/* .depart-nav .container {
    width: 1090px;
} */

.table {
    margin-bottom: 5px;
}

.table-responsive {
    overflow-x: initial;
}

div.vertical {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    /* Safari/Chrome */
    -moz-transform: rotate(-90deg);
    /* Firefox */
    -o-transform: rotate(-90deg);
    /* Opera */
    -ms-transform: rotate(-90deg);
    /* IE 9 */
}

th.vertical {
    height: 80px !important;
    line-height: 14px;
    padding-bottom: 5px;
    text-align: center;
}

.input-group-addon {
    padding: 0 12px !important;
    font-size: 13px;
    text-align: center !important;
    vertical-align: middle !important;
    display: table-cell !important;
    line-height: normal !important;
    float: none !important;
}








/*.control form {
    display: inline
}*/

.print {
    display: none
}

/* Global Icon and Logo Spacing */
.fas,
.far,
.fab,
.fa {
    margin-left: 8px;
}

/* Ensure logos also have spacing if followed by text */
.navbar-brand img,
.logo img {
    margin-left: 10px;
}

body {
    padding-bottom: 70px;
    /* Global padding to accommodate fixed bottom menu */
}

.pagination {
    padding-bottom: 5px;
    margin: 5px 0;
}

.view-alert {
    margin-top: 50px;
}

.back-table {
    padding: 0px 20px 45px 20px
}

.view-alert span {
    background: #f3d0d0;
    color: #000;
    font-size: 17px;
    padding: 20px;
    width: 100%;
}

.view-alert .fas {
    color: #8c0a0a;
    text-shadow: 2px 2px 14px #a9a8a8;
    font-size: 50px;
}

.view-success {
    margin-top: 50px;
}

.view-success span {
    background: #d3f3d0;
    color: #000;
    font-size: 17px;
    padding: 20px
}

.view-success .fas {
    color: #119c2a !important;
    text-shadow: 2px 2px 14px #a9a8a8 !important;
    font-size: 50px !important;
}

.success {
    float: left;
    padding: 8px;
    width: 100%;
    text-align: center;
    border-radius: 5px;
}

.error {
    background: rgb(112, 32, 32);
    float: left;
    padding: 8px;
    width: 100%;
    text-align: center;
    margin-top: 5px;
    border-radius: 5px;
}

#search {
    margin: 0px;
    height: 30px;
    padding: 5px;
}

.pagination-container {
    margin-bottom: 10px;
}

a {
    text-decoration: none;
}

a:focus,
a:hover {
    color: #739ec5;
    text-decoration: none
}

.break {
    font-size: 20px;
    color: #cccccc52;
}



.input-group {
    direction: ltr;
}

.tr .btn-link {
    color: #333;
}

.box_form {
    background: currentColor !important;
}


/* ================================= */


/* ------- login page CSS ---------- */


/* ================================= */

/* --- Login Page --- */
.log-page {
    background-color: rgba(121, 78, 17, 0.42);
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

.login-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 420px;
    padding: 20px;
    animation: fadeInScale 0.6s ease-out;
}

.login-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
}


/* ================================= */


/* ------- Department CSS ---------- */


/* ================================= */

.view-head-dashboard {
    padding: 25px;
    overflow: auto;
    margin: 0 20px;
    border-radius: 10px;
    background: radial-gradient(black, transparent);
}

.view-head-dashboard .alert {
    padding: 5px;
    margin: auto;
    height: 87px;
    margin-bottom: 5px;
}

.view-head-dashboard .alert-info {
    background-color: #b3dbe5 !important;
    border: 2px dashed #4c93a5;
    padding: 10px;
    margin: auto;
    height: 100px;
    margin-bottom: 5px;
}

.view-head-dashboard .alert-email {
    background-color: #6aae8f !important;
    border: 2px dashed #207850;
    padding: 10px;
    margin: auto;
    height: 100px;
    color: #1e6143;
    margin-bottom: 5px;
}

.view-head-dashboard .alert-messenger {
    background-color: #8d5b23 !important;
    color: #d7a165;
    border: 2px dashed #5f370a;
    padding: 10px;
    margin: auto;
    height: 100px;
    margin-bottom: 5px;
}

.view-head-dashboard .alert-changed {
    background-color: #fcfbfb !important;
    border: 2px dotted #375785;
    padding: 0px;
    margin: auto;
    height: 100%;
    margin-bottom: 5px;
}

.view-head-dashboard .alert-changed img {
    width: 100%;
}

.view-head-dashboard .alert-changed .btn {
    color: black;
}

.view-head-dashboard .alert-changed .media-center {
    padding: 0;
}

.view-head-dashboard .alert-empname {
    background-color: #335a63 !important;
    border: 2px dashed #4c93a5;
    padding: 10px;
    margin: auto;
    height: 100px;
    margin-bottom: 5px;
}

.view-head-dashboard .alert-empname .empimg {
    padding: 0px;
}

.view-head-dashboard .alert-empname .empimg img {
    max-width: 75px;
}

.view-head-dashboard .alert-empname .empname {
    color: black;
}

.view-head-dashboard .alert-empcard {
    background-color: #530c0c !important;
    border: 2px dotted #375785;
    margin: auto;
    height: 100%;
    margin-bottom: 5px;
}

.view-head-dashboard .alert-empcard .well {
    background-color: #b66e6e;
    border: 4px dotted #762e2e;
}

.view-head-dashboard .alert-empcard .well ul {
    list-style: none;
    padding: 5px;
}

.view-head-dashboard .alert-empcard .well ul li {
    padding: 10px;
    font-size: 15px;
}

.view-head-dashboard .alert-emppermation {
    background-color: #555 !important;
    border: 2px dotted #375785;
    margin: auto;
    height: 370px;
    margin-bottom: 5px;
    min-height: 370px;
}

.view-head-dashboard .alert-emppermation .img1 {
    height: 345px;
    left: -2px;
    position: absolute;
}

.view-head-dashboard .alert-emppermation .img2 {
    height: 345px;
    right: -2px;
    position: absolute;
}

.view-head-dashboard .alert-emppermation .media-body {
    padding: 15px !important;
}

.view-head-dashboard .alert-emppermation .well {
    background-color: #705959;
    border: 4px dotted #3e2905;
    height: 355px;
    min-height: 355px;
}

.view-head-dashboard .alert-emppermation .well ul {
    list-style: none;
    padding: 5px;
}

.view-head-dashboard .alert-emppermation .well ul li {
    padding: 6px;
    font-size: 15px;
}

.view-head-dashboard .rounded-circle {
    border-radius: 75%;
}

.view-head-dashboard .media svg {
    font-size: 55px;
}

.view-head-dashboard .media-body {
    height: 75px;
}

.view-head-dashboard .media>div {
    padding: 10px;
}

.view-department {
    padding: 10px;
    overflow: auto;
    margin: 10px;
    /* margin-bottom: 80px; */
    border-radius: 10px;
}

.view-report-headpage {
    padding: 15px;
    overflow: auto;
    margin: 10px;
    margin-bottom: 5px;
    border-radius: 10px;
}

.view-department .input-group-addon {
    padding: 0 12px !important;
    text-align: center !important;
    vertical-align: middle !important;
    display: table-cell !important;
    line-height: normal !important;
}


/*
.view-department .form-control {
    height: 30px !important;
}*/

.view-department .image {
    height: 100%;
}

.view-department .image img {
    margin: 25px auto;
}

.view-department .info {
    padding: 0;
}

.view-department .info h5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.view-department .info>div {
    padding: 1px 15px;
    background-color: #ccc;
    margin-bottom: 2px;
    border-right: 10px solid #777;
}

.new_form_group {
    float: right;
    padding: 5px;
}

.new_form_group .input-group {
    width: 100%;
}

.new_form_group .input-group-addon {
    width: 40%;
    color: #000;
    font-weight: bold;
    text-align: center !important;
    vertical-align: middle !important;
    display: table-cell !important;
    padding: 0 10px !important;
    line-height: normal !important;
}


/* ========================================================== */
/* 3. GLOBAL COMPONENTS: TABLES, FORMS, BUTTONS, MODALS       */
/* ========================================================== */

/* --- Modals --- */
.modal-header .close {
    float: left !important;
    margin-top: -2px;
}

.modal-title {
    color: #000 !important;
    font-weight: bold;
}



table th {
    padding: 5px !important;
}

.table thead,
tbody {
    font-size: 13px;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    padding: 2px;
    text-align: right;
    vertical-align: middle;
    border-radius: 2px;
}

.table>tbody>tr:hover {
    background-color: antiquewhite
}

.report_sticky thead th {
    background-color: #f1f5f9;
    padding: 10px 8px !important;
    border-bottom: 2px solid #cbd5e1;
    font-size: 13px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}



.table .btn {
    padding: 0px 3px;
    font-size: 12px;
}

.btn-disabled {
    color: #6b6a6a !important;
}

.master-table {
    padding: 15px;
    background: #cccccc8c;
    border-radius: 10px;
}

#master-table {
    margin-bottom: 5px;
}

.details {
    margin-bottom: 0px
}

.sort {
    cursor: pointer
}

.maxRows {
    float: right;
    width: 200px;
    padding-right: 0;
}

#maxRows {
    padding: 0;
}

.pagination>li {
    cursor: pointer;
}

.fa-ban {
    color: rgb(98, 21, 21)
}

.email-icon .btn-link {
    text-decoration: none;
}

.table-permission {
    background: rgba(224, 200, 200, 0.38);
    margin: 5px auto;
}

.table-permission>tbody>tr:hover {
    background-color: rgba(140, 10, 10, 0.29);
    color: #381919;
}

.table-permission .permation-name {
    color: #e0c7ae
}

.tr_input input {
    width: 100%
}


/* ================================= */


/* ------- Form CSS ---------------- */


/* ================================= */

.add-new-fild {
    display: none
}

.edit-fild,
.edit-fild-btn {
    display: none
}

.edit-fild select {
    width: 40%;
    height: 38px;
    font-size: 14px;
    padding: 6px 10px;
}

.edit-fild input {
    width: 40%;
    height: 38px;
}

.edit-fild #save-edit {
    width: 20%;
}

/* --- Forms --- */
.form-control {
    padding: 10px 15px;
    height: 38px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: none;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #3498db;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.2);
}

.input-group-addon {
    padding: 0 12px !important;
    font-size: 13px;
    text-align: center !important;
    vertical-align: middle !important;
    display: table-cell !important;
    line-height: 38px !important;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
}


/* ================================= */


/* ------- Dropdown CSS ------------ */


/* ================================= */

.dropbtn {
    padding: 16px;
    font-size: 15px;
    border: none;
    cursor: pointer;
}


/* .dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    min-width: 180px;

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

    z-index: 1;

}



.dropdown-content a {

    padding: 12px 16px;

    display: block;

    -webkit-transition: height 0.3s ease-in;

    -moz-transition: height 0.3s ease-in;

    -o-transition: height 0.3s ease-in;

    -ms-transition: height 0.3s ease-in;

    transition: height 0.3s ease-in;

}



.dropdown:hover .dropdown-content {

    display: block;

    -webkit-transition: height 0.3s ease-in;

    -moz-transition: height 0.3s ease-in;

    -o-transition: height 0.3s ease-in;

    -ms-transition: height 0.3s ease-in;

    transition: height 0.3s ease-in;

}



.dropdown-menu>li>a {

    padding: 5px 20px;

}



.dropdown-menu>li>a:focus,

.dropdown-menu>li>a:hover {

    transition: .4s;

    width: 100%;

} */

/* Restored Dropdown Styles - Colors Removed */
.dropdown {
    width: 100%;
    /* background: #352405; REMOVED brown background */
    margin-bottom: 5px;
}

.dropdown-content {
    left: 210px;
    position: absolute;
    top: -1px;
}

.dropdown a {
    /* color: #eadfbb; REMOVED brown text */
    text-decoration: none;
}

.linked-nav li a:focus,
.linked-nav li a:hover {
    text-decoration: none;
    background-color: #3f5062;
    color: #fff;
}

.links-nav .open>a,
.links-nav .open>a:focus,
.links-nav .open>a:hover {
    border-left: 5px solid;
    transition: 0.5s
}

.links-nav>li>a:focus,
.links-nav>li>a:hover {
    border-left: 5px solid;
    transition: 0.5s
}

.links-nav>li>.active {
    border-left: 5px double;
    transition: 0.5s
}


/* ================================= */


/* ------- Index CSS --------------- */


/* ================================= */

#index {
    background-image: url(../images/back1.webp);
    background-repeat: none;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
    background-position: center;
}

#index .login {
    max-width: 400px;
    margin: 250px auto 5px auto
}

#index .login h3 {
    color: #e8e28f;
    text-shadow: 2px 2px 14px #000
}

#index .login input {
    margin-bottom: 10px;
    background-color: rgba(68, 71, 74, 0.83);
    color: #ece144 !important;
    font-size: 20px;
    padding: 5px 20px;
}


/* ================================= */


/* ------- Help page CSS ----------- */


/* ================================= */

.page .modal-content {
    margin-top: 100px;
}

.modal-header span {
    position: absolute;
    top: -2px;
    right: 2px;
    font-size: 30px;
}

.modal-header,
.modal-body {
    padding: 5px;
}

.modal-header .panel {
    margin-bottom: 5px;
}

.modal-body .well {
    margin-bottom: 0px;
}

.modal-body .form-control {
    padding: 0px 12px;
}

.change-pass .box_form .form-group {
    margin-bottom: 20px;
}

.change-pass .master-form {
    padding: 25px;
}

#accordion {
    margin: 15px;
    padding-bottom: 15px;
    height: 100%;
}

#accordion ul,
ol {
    list-style-type: decimal-leading-zero;
}

#accordion ul,
ol li {
    padding: 15px 5px;
}


/* ================================= */


/* ------- Employee Profile CSS ---- */


/* ================================= */

#edit-emp .icon {
    margin: auto;
    text-align: -webkit-center;
    min-height: 235px
}

#edit-emp .permission {
    margin: auto;
    text-align: -webkit-center;
    background: rgb(243, 219, 170);
}

#edit-emp .emp-img {
    opacity: 0;
    width: 92%;
    top: 10px;
    height: 81% !important;
    position: absolute;
    padding: 34px;
    margin: 0 auto;
}

.card-emp {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 100%;
    margin: 10px auto 55px;
    text-align: center;
}

.card-emp img {
    width: 150px;
    height: 150px;
    margin: 10px auto;
    box-shadow: 1px 1px 5px #404040;
}

.card-emp h2 {
    color: #000;
}

.card-emp .title {
    color: grey;
    font-size: 18px;
}

.card-emp button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
}

.card-emp span {
    text-decoration: none;
    font-size: 15px;
    color: black;
    cursor: default;
}

.card-emp button:hover,
.card-emp span:hover {
    opacity: 0.7;
}

.card-emp ul {
    padding: 15px;
    list-style: none;
}

.card-emp ul li {
    margin: 15px;
}


/* ================================= */


/* ------- Master Page CSS --------- */


/* ================================= */

.master-page {
    margin: 20px 15px 65px 15px;
    padding: 20px;
    border-radius: 10px;
    overflow: auto;
    min-height: 100%;
}

.master-page .well {
    padding: 10px;
    margin-bottom: 0px;
}

.master-page .emp-profile img {
    margin: 10px auto;
}

.master-page .emp-profile ul {
    padding: 0;
}


/* ================================= */


/* ------- permission Page CSS ----- */


/* ================================= */

.permission .tab-content {
    margin-bottom: 20px;
}

.permission form {
    padding: 10px 25px;
}

.permission form ul {
    padding: 15px;
}

.permission .btn-success {
    margin-bottom: 55px;
}

.input_switch {
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
}

.input_switch .input-group-addon {
    width: 45%;
}

.switch {
    position: relative;
    height: 15px;
    width: 120px;
    margin: 5px auto;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.switch-label {
    position: relative;
    z-index: 2;
    float: left;
    width: 58px;
    line-height: 15px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.switch-label:active {
    font-weight: bold;
}

.switch-label-off {
    padding-left: 5px;
}

.switch-label-on {
    padding-right: 5px;
}

.switch-input {
    display: none;
}

.switch-input:checked+.switch-label {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.65);
    text-shadow: 0 1px rgba(255, 255, 255, 0.25);
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -ms-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
    -webkit-transition-property: color, text-shadow;
    -moz-transition-property: color, text-shadow;
    -ms-transition-property: color, text-shadow;
    -o-transition-property: color, text-shadow;
    transition-property: color, text-shadow;
}

.switch-input:checked+.switch-label-on~.switch-selection {
    left: 60px;
    /* Note: left: 50%; doesn't transition in WebKit */
}

.switch-selection {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    display: block;
    width: 60px;
    height: 15px;
    border-radius: 3px;
    background-color: #e0c7ae;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -ms-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}

.user-permission table tr td .permation-name {
    color: #e0c7ae;
}


/* ================================= */


/* ------- Purchase Page CSS ------- */


/* ================================= */

#add-new-purchaseorder .header {
    color: #fff;
    padding: 10px;
    text-align: center;
    margin-top: 5px;
}

#add-new-purchaseorder .header input {
    border: 0px;
    text-align: center;
    font-size: 22px;
}

#add-new-purchaseorder .head {
    padding: 15px;
}

#add-new-purchaseorder .body {
    padding: 20px;
    border: 2px solid #e0c7ae;
}

#add-new-purchaseorder .footer {
    padding: 5px 10px;
}

#add-new-purchaseorder .submit {
    padding: 10px;
    overflow: hidden
}

#add-new-purchaseorder .submit input {
    width: 30%;
}


/* ================================= */


/* ------- E-Mail Page CSS --------- */


/* ================================= */

.new-mail {
    padding: 10px 25px;
    margin: 30px;
    border-radius: 10px;
    overflow: hidden
}

.new-mail .submit-email {
    margin-bottom: 60px;
}

.show-tick .btn {
    padding: 2px;
}

#attach_file {
    opacity: 0;
    top: 0;
    position: absolute;
    width: 100%;
    z-index: 4;
}

.body-email textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 300px;
    max-height: 300px;
    margin: 10px auto;
    padding: 15px;
}

.head-email-to {
    padding: 5px;
    margin-top: 5px;
}

.head-email-to .email-to {
    font-size: 20px;
    color: aliceblue;
}

.head-email-to ul {
    background: #404040;
    border-radius: 10px;
    padding: 10px;
}

.head-email-cc {
    padding: 5px;
    margin-bottom: 5px;
}

.head-email-cc .email-to {
    font-size: 20px;
}

.head-email-cc ul {
    border-radius: 10px;
    padding: 10px;
}

.head-email-cc .select {
    color: antiquewhite
}

.view-email {
    border-radius: 5px;
    margin: 5px auto 55px auto;
    padding: 5px;
    overflow: hidden
}

.view-email>div {
    padding: 5px;
}

.view-email img {
    width: 50px;
    border: 2px solid #ccc;
    box-shadow: 1px 1px 13px #733855;
    margin: 10px;
}

.view-email .panel-heading {
    margin-bottom: 2px
}

.view-email .email_to {
    padding: 1px 10px;
}

.view-email .email_cc {
    padding: 3px 10px;
}

.view-email .email_subject {
    padding: 5px 10px;
}

.view-email .email_subject h3 {
    margin-top: 10px;
}

.view-email .email_message {
    min-height: 200px;
}

.view-email .email_message textarea {
    min-height: 200px;
}

.form-control[disabled],
fieldset[disabled] .form-control {
    cursor: auto;
}

.bootstrap-select.btn-group .dropdown-menu li {
    text-align: right;
}

.not-for-all {
    background: transparent;
    border: 0;
    padding: 7px;
    color: #060606;
}



/* ------- Charts CSS -------------- */


/* ================================= */

#itemChart {
    background: rgb(240, 241, 241);
    width: 100%;
    height: 340px !important;
    padding: 10px;
    box-shadow: 1px 1px 3px #ccc;
}


/* ================================= */


/* ------- Timeline CSS ------------ */


/* ================================= */


/*************************************************/


/** timeline box structure **/

#messenger_view {
    background-color: #093a4d61 !important;
    border-radius: 10px;
    border: 2px solid #000;
}

.new_message_view {
    background-color: #fff;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
}

.error_message {
    background-color: aliceblue;
    color: black;
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
}

.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: #eee;
    left: 50%;
    margin-left: -1.5px;
}

.tldate {
    display: block;
    width: 270px;
    background: #414141;
    border: 3px solid #212121;
    color: #ededed;
    margin: 0 auto;
    padding: 3px 0;
    font-weight: bold;
    text-align: center;
}

.timeline li {
    margin-bottom: 25px;
    position: relative;
}

.timeline li:before,
.timeline li:after {
    content: " ";
    display: table;
}

.timeline li:after {
    clear: both;
}

.timeline li:before,
.timeline li:after {
    content: " ";
    display: table;
}


/** timeline panels **/

.timeline li .timeline-panel {
    width: 46%;
    float: left;
    background: #fff;
    border: 1px solid #d4d4d4;
    padding: 10px;
    position: relative;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}


/** panel arrows **/

.timeline li .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #ccc;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    content: " ";
}

.timeline li .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #fff;
    border-right: 0 solid #fff;
    border-bottom: 14px solid transparent;
    content: " ";
}

.timeline li .timeline-panel.noarrow:before,
.timeline li .timeline-panel.noarrow:after {
    top: 0;
    right: 0;
    display: none;
    border: 0;
}

.timeline li.timeline-inverted .timeline-panel {
    float: right;
}

.timeline-panel h5 {
    margin: 0;
}

.timeline li.timeline-inverted .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}

.timeline li.timeline-inverted .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}


/** timeline circle icons **/

.timeline li .tl-circ {
    position: absolute;
    top: 23px;
    left: 50%;
    text-align: center;
    background: #6a8db3;
    color: #fff;
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin-left: -16px;
    border: 3px solid #90acc7;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    z-index: 99999;
}


/** timeline content **/

.tl-heading h4 {
    margin: 0;
    color: #c25b4e;
}

.tl-body p,
.tl-body ul {
    margin-bottom: 0;
}

.tl-body>p+p {
    margin-top: 5px;
}


/** media queries **/

@media (max-width: 991px) {
    .timeline li .timeline-panel {
        width: 44%;
    }
}

@media (max-width: 700px) {
    .page-header h1 {
        font-size: 1.8em;
    }

    ul.timeline:before {
        left: 40px;
    }

    .tldate {
        width: 140px;
    }

    ul.timeline li .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline li .tl-circ {
        top: 22px;
        left: 22px;
        margin-left: 0;
    }

    ul.timeline>li>.tldate {
        margin: 0;
    }

    ul.timeline>li>.timeline-panel {
        float: right;
    }

    ul.timeline>li>.timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }

    ul.timeline>li>.timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }
}


/***************************************************/

.bg-gray {
    color: #000;
    background-color: #d2d6de !important;
}

.bg-gray-light {
    background-color: #f7f7f7;
}

.bg-black {
    background-color: #111111 !important;
}

.bg-red,
.callout.callout-danger,
.alert-danger,
.alert-error,
.label-danger,
.modal-danger .modal-body {
    background-color: #dd4b39 !important;
    color: #fff;
}

.bg-yellow,
.callout.callout-warning,
.alert-warning,
.label-warning,
.modal-warning .modal-body {
    background-color: #f39c12 !important;
}

.bg-aqua,
.callout.callout-info,
.alert-info,
.label-info,
.modal-info .modal-body {
    background-color: #00c0ef !important;
}

.bg-blue {
    background-color: #0073b7 !important;
}

.bg-light-blue,
.label-primary,
.modal-primary .modal-body {
    background-color: #3c8dbc !important;
}

.bg-green,
.callout.callout-success,
.alert-success,
.label-success,
.modal-success .modal-body {
    background-color: #00a65a !important;
}

.bg-navy {
    background-color: #001f3f !important;
}

.bg-teal {
    background-color: #39cccc !important;
}

.bg-olive {
    background-color: #3d9970 !important;
}

.bg-lime {
    background-color: #01ff70 !important;
}

.bg-orange {
    background-color: #ff851b !important;
}

.bg-fuchsia {
    background-color: #f012be !important;
}

.bg-purple {
    background-color: #605ca8 !important;
}

.bg-maroon {
    background-color: #d81b60 !important;
}

.bg-gray-active {
    color: #000;
    background-color: #b5bbc8 !important;
}

.bg-black-active {
    background-color: #000000 !important;
}

.bg-red-active,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    background-color: #d33724 !important;
}

.bg-yellow-active,
.modal-warning .modal-header,
.modal-warning .modal-footer {
    background-color: #db8b0b !important;
}

.bg-aqua-active,
.modal-info .modal-header,
.modal-info .modal-footer {
    background-color: #00a7d0 !important;
}

.bg-blue-active {
    background-color: #005384 !important;
}

.bg-light-blue-active,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: #357ca5 !important;
}

.bg-green-active,
.modal-success .modal-header,
.modal-success .modal-footer {
    background-color: #008d4c !important;
}

.bg-navy-active {
    background-color: #001a35 !important;
}

.bg-teal-active {
    background-color: #30bbbb !important;
}

.bg-olive-active {
    background-color: #368763 !important;
}

.bg-lime-active {
    background-color: #00e765 !important;
}

.bg-orange-active {
    background-color: #ff7701 !important;
}

.bg-fuchsia-active {
    background-color: #db0ead !important;
}

.bg-purple-active {
    background-color: #555299 !important;
}

.bg-maroon-active {
    background-color: #ca195a !important;
}


/* ================================= */


/* ------- Media print CSS --------- */


/* ================================= */

@media (min-width: 768px) {
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .dropdown-menu .divider {
        margin: 3px 0;
    }
}

@media print {
    body {
        font-size: 8px;
        margin: 0
    }

    .table {
        font-size: 8px
    }

    .control {
        display: none
    }

    .control form {
        display: inline
    }

    .print {
        display: block
    }

    .visible-print {
        display: block;
        font-size: 8px;
    }

    .supplier {
        position: absolute;
        top: 0;
        right: 0;
        padding-bottom: 5px
    }

    .order-items {
        margin-top: 25px;
        padding-top: 20px
    }

    .view-order {
        font-size: 8px;
        padding-top: 2px;
    }

    .view-order .order-logo img {
        max-width: 100px;
        width: 100px
    }

    .view-order .order-date {
        margin-bottom: 5px;
    }

    .view-order .order-tag {
        font-size: 1.2rem
    }

    .order-warehouse {
        font-size: 8px
    }

    .view-email .head-email .header {
        border: 2px #000;
    }

    .view-invoice1 {
        padding: 0px;
        margin: 0px
    }

    .view-invoice1 table tr {
        font-size: 8px !important
    }

    .view-invoice2 {
        padding: 0px;
        margin: 0px
    }

    .view-invoice2 table tr {
        font-size: 8px !important
    }

    .view-invoice2 .sign table tr td {
        padding: 20px
    }

    .table-body {
        padding-top: 2px;
    }

    .box_form .form-group label {
        font-size: 11px
    }

    .header-department {
        font-size: 20px !important;
        text-align: center
    }

    #bottom-menu {
        display: none;
    }

    .order-logo {
        margin-top: 0;
        padding-top: 0;
    }

    .total_report {
        font-size: 16px;
    }

    /* .noprint{
        display: none;
    }
     */
}


/* ================================= */


/* ------- View Order CSS ---------- */


/* ================================= */

.view-order {
    background-color: #e8e8e8;
    margin: 20px 15px 65px 15px !important;
    padding: 20px;
    color: #000;
    overflow: visible;
    min-height: 100%;
    border-radius: 20px;
}

.view-order .row>div {
    margin-bottom: 10px
}

.view-order .order-logo img {
    max-width: 120px;
    padding: 5px;
}

.view-order .table {
    margin-bottom: 0px;
    border-bottom: 1px solid #e3e3e3;
}

.view-order .order-header {
    padding: 10px;
}

.view-order .order-tag {
    margin: 25px auto 5px;
}

.view-order .order-total {
    margin-bottom: 20px;
}

.view-order .Signature {
    margin: 20px auto;
}

.view-order .Signature table tr {
    height: 40px
}

.view-order .remark textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 100px;
    max-height: 100px;
    margin: 10px auto;
    padding: 15px;
}

.view-order .submit {
    margin: 20px auto;
}

.view-order .order-status {
    padding: 10px 30px;
}

.view-order .order-status table tr td {
    padding: 10px
}

.view-order .ceo-approval {
    padding: 10px 30px;
}

.view-order .ceo-approval table tr td {
    padding: 10px
}


/* ========================================================== */
/* 4. MODULE: SALES & FINANCE                                 */
/* ========================================================== */

/* --- Order View (Premium) --- */
.order-view-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    overflow: hidden;
    border: 1px solid #eef2f7;
}

.order-view-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.order-view-table thead th {
    background: #f8fafc;
    color: #475569;
    padding: 12px 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 2px solid #eee;
    white-space: nowrap;
    text-align: center;
}

/* --- Daily Report (Modern) --- */
.daily-report-header {
    background: linear-gradient(135deg, #1a3c61 0%, #2c5282 100%);
    color: white;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
}

.daily-report-body .form-control {
    height: 45px !important;
    line-height: normal;
}

#report thead tr th {
    color: #ccc;
}


/* ================================= */


/* ------- Invoice Page CSS -------- */


/* ================================= */

.total-invoice {
    font-weight: bolder;
    color: red;
    margin-top: 30px;
    font-size: 16px;
}


/* ================================= */


/* ------- Nav Tabs CSS -------- */


/* ================================= */

.nav-tabs {
    border-bottom: 0
}

.nav-tabs a {
    color: #e2e2e2;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    color: #ffffff;
    cursor: default;
    background-color: rgba(64, 64, 64, 0);
    border: 0;
    border-bottom-color: transparent;
    padding: 8px 20px;
    margin: -1px;
}

.nav-tabs>li>a:focus,
.nav-tabs>li>a:hover {
    text-decoration: none;
    background-color: rgba(238, 238, 238, 0);
    border-color: transparent
}

.tab-content {
    margin-bottom: 55px;
}

.client-name {
    display: inline-block;
    max-width: 200px;
    /* غيّرها حسب المساحة المناسبة */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ================================= */


/* ------- Cart Page CSS -------- */


/* ================================= */

.total-cart {
    height: 38px;
}

.total-cart .form-control {
    height: 38px;
    padding: 6px 12px;
}

.total-cart .form-control .btn {
    height: 38px;
}


/* ================================= */


/* ------- Inv Items CSS ----------- */


/* ================================= */

.view-items {
    margin-top: -15px;
}

.view-items .offers-item {
    right: 0;
    margin: 10px auto;
    max-height: 200px;
    height: 200px;
    cursor: default;
    max-height: 180px;
    overflow: hidden;
    padding: 0px 10px;
}

.view-items .offers-item .offers-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
    border-radius: 5px;
    padding: 0;
    max-height: 180px;
    overflow: hidden;
    background: transparent !important;
    border: 0.5px dotted #d6c7c7a6;
}

.view-items .offers-item .offers-link .offers-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 180px;
    overflow: hidden;
    opacity: 0;
    z-index: 4;
    background: rgba(224, 199, 174, 0.48);
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}

.view-items .offers-item .offers-link .offers-hover:hover {
    opacity: 1;
}

.offers-hover-content {
    padding: 40px 5px;
}

.view-items .offers-item img {
    height: 135px;
    max-height: 135px;
    padding: 10px 25px 20px;
}

.items-serche {
    margin: 10px;
    overflow: hidden
}

.items-serche .form-control {
    padding: 0px 12px;
}

#items .item-list-row {
    color: #000;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

#items .item-list-row .master-item {
    background: #ccc;
    box-shadow: 0 3px 5px #000;
    padding: 10px;
    border-radius: 3px;
    margin: 5px;
    width: 100%;
}

.adjust_price {
    cursor: pointer;
}

.tags span {
    padding: 0px 5px !important;
    background-color: #dedede;
    display: inline-block;
    margin: 0 5px;
    border-radius: 8px;
    color: #292727;
    font-weight: bold;
}

.tags span .fa-times {
    margin-right: 5px;
    margin-left: 5px;
    color: #969696;
    cursor: pointer;
}

.tags span .fa-times:hover {
    color: #000;
    ;
}



.change-colors {
    list-style: none;
}

.change-colors li {
    display: inline-block;
    width: 30px;
    height: 25px;
    margin: 0 3px;
    padding: 0px !important;
}

.change-colors [data-color="green"] span #my_form #theme-green {
    background: rgb(47, 138, 47);
    border-radius: 90px;
    cursor: pointer;
    padding: 0px 10px;
    ;
}

.change-colors [data-color="brown"] span #my_form #theme-brown {
    background: #916f27;
    border-radius: 90px;
    cursor: pointer;
    padding: 0px 10px;
    ;
}

.change-colors [data-color="red"] span #my_form #theme-red {
    background: rgb(163, 59, 59);
    border-radius: 90px;
    cursor: pointer;
    padding: 0px 10px;
    ;
}

.change-colors [data-color="blue"] span #my_form #theme-blue {
    background: #176694;
    border-radius: 90px;
    cursor: pointer;
    padding: 0px 10px;
    ;
}

.change-lang {
    list-style: none;
    padding: 0
}

.change-lang li {
    display: inline-block;
    margin: 0 5px;
}

.change-lang .lan-ar {
    background: #5996a5;
    border-radius: 0 5px 5px 0;
    text-align: center;
    height: 30px;
    vertical-align: middle;
    cursor: pointer;
    width: 50%;
    margin: 0;
    float: right;
}

.change-lang .lan-ar form {
    width: 100%;
    height: 100%
}

.change-lang .lan-en {
    background: #79796c;
    border-radius: 5px 0 0 5px;
    text-align: center;
    height: 30px;
    vertical-align: middle;
    cursor: pointer;
    width: 50%;
    margin: 0;
    float: left
}

.change-lang .lan-en form {
    width: 100%;
    height: 100%
}

.change-lang .btn {
    text-decoration: none;
    padding: 0px;
    width: 50px;
    height: 100%;
    color: #fff;
    border: 0;
}

.change-lang .btn:active.focus,
.change-lang .btn:active:focus,
.change-lang .btn:focus {
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}

.links-nav {
    margin-top: 40px;
}

.icons {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
}

.change {
    position: absolute;
    left: -30px;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-9px, -7px);
}

.rotate {
    transition: all .5s linear
}

.rotate.right {
    transform: rotate(180deg);
    transition: all .5s linear
}


/* Contact form */

.master-form {
    overflow: hidden;
    padding: 10px;
    margin: 0;
    color: #fff;
}

.master-form h4 {
    color: #ccc
}

.box_form {
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.box_form .photo {
    padding: 20px;
}

.box_form h2 {
    margin: 25px;
    color: #73757e;
}

.box_form .form-group {
    margin: 5px auto;
    display: flex;
    padding: 3px;
    color: #000;
}

.back-radio {
    background: #323c50;
    padding: 0px;
}

.back-radio .radio {
    background: #2c3446;
    margin: 5px;
    padding: 5px 0 10px 0;
}

.back-radio .radio label {
    margin-left: 20px;
    margin-right: 10px
}

.back-radio .radio label span {
    margin-left: 10px;
}

.back-radio .radio input[type=checkbox],
.back-radio .radio input[type=radio] {
    width: 20px;
    height: 20px;
}

.box_form form.form-inline {
    padding-right: 27px;
    background: rgba(221, 221, 221, 0)
}

.box_form .form-inline .form-control {
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    height: 45px;
    margin: 8px;
    padding: 10px 20px;
    width: 250px;
    box-shadow: none;
}

.box_form .form-inline textarea.form-control {
    width: 388px;
    resize: none;
}

.box_form .form-control:focus {
    border: 2px solid #5684d2;
    box-shadow: 0px 0px 5px 1px #4a6aa0;
}

.box_form .checkbox,
.box_form .radio {
    margin-top: 5px;
    margin-bottom: 5px;
}

.box_form button {
    width: 100%;
}

.box_form .btn.submit_btn {
    background: #73757e none repeat scroll 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    height: 45px;
    width: 120px;
    border-radius: 10px;
    margin: 6px 8px 6px 0;
}

.form-control::-moz-placeholder {
    color: #adadad;
}

.form-control:-ms-input-placeholder {
    color: #adadad;
}

.form-control::-webkit-input-placeholder {
    color: #adadad;
}

.box_form .btn.submit_btn:hover {
    background: #555 none repeat scroll 0 0;
}


/* --------------------------------------- */

.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    background: #FFF;
    color: rgb(211, 92, 92);
    border-radius: 5px;
    padding: 5px;
}


/*
.control-label,
label {
    padding: 5px !important;
}*/

table {
    page-break-inside: auto
}

tr {
    page-break-inside: avoid;
    page-break-after: auto
}

thead {
    display: table-header-group;
    color: #fff;
}


/*
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    text-align: right !important
}*/

.control {
    margin-top: 5px;
    text-align: left !important;
}

.control span {
    float: right;
    padding: 14px;
}


/* tfoot { display:table-footer-group } */

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu>li>a {
        background: #e4e4e4;
        padding: 7px;
    }

    #index {
        background-position: center;
    }

    .view-order .order-logo img {
        max-width: 60px;
    }

    .table-responsive {
        padding: 0;
    }

    .view-order {
        margin: 0;
    }

    .dropdown-menu .divider {
        margin: 0;
    }

    .pagination {
        padding-right: 0;
    }
}

thead th {
    position: sticky;
    top: 0;
}

.report_sticky {
    background: #fdfdfe;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e8ecf1;
    padding: 15px;
    margin-bottom: 15px;
}

/* Override table-responsive overflow inside report_sticky to allow position:sticky to work */
.report_sticky .table-responsive,
.report_sticky .table-body {
    overflow: visible !important;
}

.report_sticky tbody {
    background: #fff;
    color: #2c3e50;
}

.report_sticky table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.report_sticky thead th {
    background: linear-gradient(135deg, #f0f4f8, #e2e8f0);
    color: #1a2a3a;
    font-weight: 700;
    padding: 10px 8px !important;
    border-bottom: 2px solid #cbd5e1;
    font-size: 13px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.report_sticky thead th:first-child {
    border-radius: 8px 0 0 0;
}

.report_sticky thead th:last-child {
    border-radius: 0 8px 0 0;
}

.report_sticky tbody tr {
    transition: background-color 0.2s ease;
}

.report_sticky tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

.report_sticky tbody tr:hover {
    background-color: #eef3f9 !important;
}

.report_sticky tbody td {
    padding: 7px 8px !important;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #334155;
}

.report_sticky .date_padding,
.report_sticky.date_padding {
    padding: 10px 15px;
    font-weight: 600;
    color: #1e3a5f;
    font-size: 14px;
}

.report_total_color {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe) !important;
    color: #0c4a6e !important;
    font-weight: 700;
    border-top: 2px solid #7dd3fc;
}

/* Report wrapper - margin around reports */
.view_report {
    margin: 10px 25px;
}

.pl_2 {
    padding-left: 10px !important;
}

.fiscal_year_alert {
    padding: 20px;
    margin: 10px 30px;
    border-radius: 20px;
    background: black;
}

.subject_table {
    border: 2px solid #000;
    padding: 10px;
}

.border_table {
    border: 2px solid #000;
    padding: 10px;
}

.p-2 {
    padding: 10px;
}

.form_box {
    background: #ccc;
    padding: 15px;
    border-radius: 20px;
    margin-top: 10px;
}

/* Custom Navbar Adjustments - Sidebar */
.links-nav>li>a,
.links-nav .dropdown-menu>li>a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.links-nav i {
    margin-left: 10px;
}

/* ========================================================== */
/* UNIVERSAL INPUT HEIGHT STANDARDIZATION (38px)             */
/* ========================================================== */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
select.form-control,
.form-control {
    height: 38px !important;
    line-height: normal !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ========================================================== */
/* GENERAL UTILITY CLASSES (FOR REFACTORING INLINE STYLES)   */
/* ========================================================== */
.w-100 {
    width: 100% !important;
}

.w-75 {
    width: 75% !important;
}

.w-50 {
    width: 50% !important;
}

.w-40 {
    width: 40% !important;
}

.w-35 {
    width: 35% !important;
}

.w-30 {
    width: 30% !important;
}

.w-25 {
    width: 25% !important;
}

.w-20 {
    width: 20% !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

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

.align-top {
    vertical-align: top !important;
}

.bg-purple-main {
    background: rgb(110, 54, 241) !important;
    color: #fff !important;
}

.bg-green-main {
    background: green !important;
    color: #fff !important;
}

.bg-black-main {
    background: #000 !important;
    color: #fff !important;
}

.bg-red-main {
    background: red !important;
    color: #fff !important;
}

.bg-blue-main {
    background: #007bff !important;
    color: #fff !important;
}

.bg-grey-main {
    background: #f0f0f0 !important;
}

/* دليل الاستخدام - التنسيقات */
.guide-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));
    border-radius: 20px;
    padding: 30px;
    margin: 20px auto;
    max-width: 1400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    color: #222;
}

.guide-container p {
    color: #333;
}

.guide-header {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    margin-bottom: 30px;
    color: white;
}

.guide-header h1 {
    font-size: 2.5em;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.guide-header p {
    font-size: 1.2em;
    opacity: 0.9;
}

.guide-header .icon {
    font-size: 4em;
    margin-bottom: 20px;
}

/* Guide Layout & Sidebar */
.guide-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

.guide-sidebar {
    flex: 0 0 300px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.guide-sidebar::-webkit-scrollbar {
    width: 6px;
}

.guide-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.guide-sidebar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.guide-sidebar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.guide-content {
    flex: 1;
    min-width: 0;
}

@media (max-width: 992px) {
    .guide-sidebar {
        flex: 0 0 100%;
        position: static;
        max-height: none;
    }
}

/* Table of Contents */
.toc-section {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border-right: 5px solid #667eea;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.toc-section h3 {
    color: #667eea;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

/* Vertical TOC for Sidebar */
.toc-list.vertical-toc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toc-list li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: white;
    border-radius: 10px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.toc-list li a:hover {
    background: #667eea;
    color: white;
    transform: translateX(-5px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}

.toc-list li a i {
    margin-left: 10px;
    font-size: 1.2em;
}

/* Section Styling */
.guide-section {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-right: 4px solid transparent;
    transition: all 0.3s ease;
}

.guide-section:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.guide-section.section-home {
    border-right-color: #28a745;
}

.guide-section.section-data {
    border-right-color: #17a2b8;
}

.guide-section.section-purchase {
    border-right-color: #ffc107;
}

.guide-section.section-warehouse {
    border-right-color: #6f42c1;
}

.guide-section.section-sales {
    border-right-color: #dc3545;
}

.guide-section.section-accounts {
    border-right-color: #20c997;
}

.guide-section.section-email {
    border-right-color: #fd7e14;
}

.guide-section.section-reports {
    border-right-color: #6610f2;
}

.guide-section h2 {
    display: flex;
    align-items: center;
    color: #333;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.guide-section h2 i {
    margin-left: 15px;
    font-size: 1.3em;
    padding: 15px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.guide-section h3 {
    color: #495057;
    margin: 25px 0 15px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
}

.guide-section h3::before {
    content: '◆';
    color: #667eea;
    margin-left: 10px;
    font-size: 0.7em;
}

/* Cards for features */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.feature-card {
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-card h4 {
    color: #667eea;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.feature-card h4 i {
    margin-left: 10px;
}

.feature-card ul {
    margin: 0;
    padding-right: 20px;
}

.feature-card li {
    margin-bottom: 8px;
    color: #333;
}

.feature-card p {
    color: #333;
    margin: 0;
}

/* Steps */
.steps-list {
    counter-reset: step-counter;
    list-style: none;
    padding: 0;
}

.steps-list li {
    counter-increment: step-counter;
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    color: #333;
}

.steps-list li::before {
    content: counter(step-counter);
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    flex-shrink: 0;
    font-weight: bold;
}

/* Tables */
.guide-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
}

.guide-table thead {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.guide-table th,
.guide-table td {
    padding: 15px;
    text-align: right;
    border-bottom: 1px solid #e9ecef;
}

.guide-table tbody tr:hover {
    background: #f8f9fa;
}

/* Alert boxes */
.guide-alert {
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    display: flex;
    align-items: center;
}

.guide-alert i {
    margin-left: 15px;
    font-size: 1.5em;
}

.guide-alert.alert-tip {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    border-right: 4px solid #28a745;
    color: #155724;
}

.guide-alert.alert-important {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    border-right: 4px solid #ffc107;
    color: #856404;
}

.guide-alert.alert-warning {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    border-right: 4px solid #dc3545;
    color: #721c24;
}

/* FAQ Section */
.faq-item {
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
}

.faq-question {
    padding: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.faq-question i {
    margin-left: 10px;
}

.faq-answer {
    padding: 20px;
    color: #222;
    background: #fff;
}

/* Print styles */
@media print {
    .guide-container {
        box-shadow: none;
    }

    .toc-section {
        page-break-after: always;
    }

    .guide-section {
        page-break-inside: avoid;
    }

    .navbar,
    .depart-nav,
    .fixed-menu,
    .header-department,
    .btn-disabled,
    .table .btn.btn-disabled,
    .master-table .btn.btn-disabled,
    .table-body .btn.btn-disabled,
    .btn.fa-ban,
    .btn:has(.fa-ban),
    .table .btn.fa-ban,
    .table .btn:has(.fa-ban),
    .master-table .btn.fa-ban,
    .master-table .btn:has(.fa-ban),
    .table-body .btn.fa-ban,
    .table-body .btn:has(.fa-ban) {
        display: none !important;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .guide-header h1 {
        font-size: 1.8em;
    }

    .guide-container {
        padding: 15px;
        margin: 10px;
    }

    .feature-cards {
        grid-template-columns: 1fr;
    }
}

/* Report Form Groups - from all-ajax files */
.new_form_group .input-group {
    display: flex;
}

/* ========================================================== */
/* Refactoring Utilities (Replaces Inline Styles)             */
/* ========================================================== */

/* Theme Selection Buttons */
.theme-btn-blue {
    background: linear-gradient(135deg, #004e92, #000428);
    border: none;
}

.theme-btn-dark {
    background: #242526;
    border: 1px solid #4e4f50;
}

.theme-btn-green {
    background: linear-gradient(135deg, #134e5e, #71b280);
    border: none;
}

.theme-btn-purple {
    background: linear-gradient(135deg, #4a00e0, #8e2de2);
    border: none;
}

/* Backup Dashboard Section - Premium Redesign */
.backup-dashboard-container {
    padding: 40px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin: 20px auto;
    max-width: 1200px;
}

.backup-header {
    text-align: center;
    margin-bottom: 40px;
}

.backup-header h2 {
    font-size: 2.5em;
    font-weight: 800;
    background: linear-gradient(135deg, #2c3e50, #4ca1af);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.backup-header p {
    color: #666;
    font-size: 1.1em;
}

.backup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

@media (min-width: 1200px) {
    .backup-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.backup-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.backup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #ccc, #eee);
    transition: 0.3s;
}

/* Card Variants */
.backup-card.card-database::before {
    background: linear-gradient(90deg, #11998e, #38ef7d);
}

.backup-card.card-restore::before {
    background: linear-gradient(90deg, #4568dc, #b06ab3);
}

/* Enhanced gradient for Restore */
.backup-card.card-email::before {
    background: linear-gradient(90deg, #f8b500, #fceabb);
}

.backup-card.card-project::before {
    background: linear-gradient(90deg, #cb2d3e, #ef473a);
}

.backup-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.backup-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.03);
    transition: 0.3s;
}

.backup-card:hover .backup-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.backup-card.card-database:hover .backup-icon-wrapper {
    background: rgba(56, 239, 125, 0.1);
    color: #11998e;
}

.backup-card.card-restore:hover .backup-icon-wrapper {
    background: rgba(69, 104, 220, 0.1);
    color: #4568dc;
}

.backup-card.card-email:hover .backup-icon-wrapper {
    background: rgba(248, 181, 0, 0.1);
    color: #e6a800;
}

.backup-card.card-project:hover .backup-icon-wrapper {
    background: rgba(203, 45, 62, 0.1);
    color: #cb2d3e;
}

.backup-card.card-fix::before {
    background: linear-gradient(90deg, #6a1b9a, #ab47bc);
}

.backup-card.card-fix:hover .backup-icon-wrapper {
    background: rgba(106, 27, 154, 0.1);
    color: #6a1b9a;
}

.backup-icon {
    font-size: 35px;
    transition: 0.3s;
    color: #555;
}

.backup-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.backup-desc {
    font-size: 0.9em;
    color: #888;
    line-height: 1.5;
}

/* Utilities */
.custom-alert-padding {
    padding: 30px !important;
}

.list-no-spacing {
    padding: 0 !important;
    margin: 0 !important;
}


/* ========================================================== */
/* Header Backgrounds (Dynamic Versions)                      */
/* ========================================================== */
.theme-bg-tax body,
.theme-bg-tax #index {
    background-image: url('../images/back_2/back111.webp') !important;
}

.theme-bg-alalmas body,
.theme-bg-alalmas #index {
    background-image: url('../images/back_2/newback.jpg') !important;
}

/* ========================================================== */
/* Fix Inventory / Maintenance Styles                         */
/* ========================================================== */
.maintenance-body {
    font-family: Tahoma, sans-serif;
    background: #f4f4f4;
}

.progress-container {
    width: 100%;
    background-color: #ddd;
    border-radius: 5px;
    margin: 20px 0;
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 30px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 30px;
    color: white;
    transition: width 0.1s linear;
}

.maintenance-container {
    width: 80%;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.maintenance-result-box {
    background: #333;
    color: #0f0;
    padding: 10px;
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #555;
    font-family: monospace;
    direction: ltr;
    text-align: left;
}


/* ========================================================== */
/* Utility Classes for Refactoring                            */
/* ========================================================== */
.d-inline-block-custom {
    display: inline-block !important;
}

.w-100-custom {
    width: 100% !important;
}


.text-left-important {
    text-align: left !important;
}

.text-center-important {
    text-align: center !important;
}

.text-right-important {
    text-align: right !important;
}

.bg-custom-green {
    background: #457e2a !important;
}

.bg-custom-brown {
    background: #8d5332 !important;
}

.bg-custom-gold {
    background: #ab8200 !important;
}

.bg-custom-dark-blue {
    background: #4b6584 !important;
}

.dir-rtl {
    direction: rtl;
}

.color-red {
    color: red !important;
}


.bg-custom-dark-blue-2 {
    background: #357bbd !important;
}

.bg-custom-skyblue {
    background: skyblue !important;
    color: black !important;
}

.bg-custom-transparent-black {
    background: rgba(0, 0, 0, .5) !important;
}

.text-white-important {
    color: #fff !important;
}

.d-inline-custom {
    display: inline !important;
}


.pb-20 {
    padding-bottom: 20px !important;
}

.opacity-60 {
    opacity: 0.6;
}

.margin-custom-1 {
    margin: -18px 0 10px !important;
}

.text-yellow-custom {
    color: #ead10e !important;
}

.cursor-pointer,
#printBtn {
    cursor: pointer !important;
}

.text-dark-important {
    color: #333 !important;
}

/* Hide disabled buttons globally to reduce clutter but keep them in DOM */
.btn-disabled,
.table .btn.btn-disabled,
.master-table .btn.btn-disabled,
.table-body .btn.btn-disabled,
.btn.fa-ban,
.btn:has(.fa-ban),
.table .btn.fa-ban,
.table .btn:has(.fa-ban),
.master-table .btn.fa-ban,
.master-table .btn:has(.fa-ban),
.table-body .btn.fa-ban,
.table-body .btn:has(.fa-ban) {
    display: none !important;
}

/* Premium Alert Styles */
.alert-premium {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.6;
    border-right: 5px solid transparent;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
}

.alert-premium-warning {
    background-color: #fff9e6;
    border-right-color: #ffc107;
    color: #856404;
}

.alert-premium i {
    font-size: 20px;
    margin-left: 15px;
}

/* Premium Order Header Styles */
.order-header-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
    gap: 20px;
}

.order-header-premium .header-left,
.order-header-premium .header-right {
    flex: 1;
}

.order-header-premium .header-center {
    flex: 1.5;
    text-align: center;
}

.order-header-premium .header-left img {
    max-height: 90px;
    width: auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}

.order-header-premium .header-center h4 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1a2a3a;
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

.order-header-premium .header-center h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 4px;
    background: linear-gradient(to left, #ffc107, #ff9800);
    border-radius: 10px;
}

.order-header-premium .header-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: #444;
    border-right: 4px solid #ffc107;
    padding-right: 25px;
}

.order-header-premium .data-item {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.order-header-premium .data-item b {
    color: #222;
    min-width: 110px;
    font-weight: 600;
}

.order-header-premium .data-item span {
    color: #666;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .order-header-premium {
        flex-direction: column;
        padding: 20px;
    }

    .order-header-premium .header-right {
        border-right: none;
        padding-right: 0;
        border-top: 2px solid #eee;
        padding-top: 20px;
        width: 100%;
        align-items: flex-start;
    }
}

.btn-premium-lock {
    background: linear-gradient(135deg, #d9534f 0%, #c9302c 100%);
    color: #fff !important;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(217, 83, 79, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-premium-lock:hover {
    background: linear-gradient(135deg, #c9302c 0%, #ac2925 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 83, 79, 0.4);
}

.btn-premium-lock:active {
    transform: translateY(0);
}

.btn-premium-success,
.btn-premium-add {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: #fff !important;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.btn-premium-success:hover,
.btn-premium-add:hover {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.3);
}

.btn-premium-edit {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #fff !important;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    border-left: 4px solid #ffc107;
    /* The "Gold" touch requested */
}

.btn-premium-edit:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
}

/* --- Universal Style for ALL Buttons inside Tables --- */
.table .btn,
.master-table .btn,
.table-body .btn {
    border-radius: 50px !important;
    border-left: 4px solid #ffc107 !important;
    /* Gold border for all table actions */
    padding: 6px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.table .btn:hover,
.master-table .btn:hover,
.table-body .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Enhanced gradients for standard bootstrap classes in tables to match premium feel */
.table .btn-info,
.master-table .btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
    color: #fff !important;
}

.table .btn-primary,
.master-table .btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: #fff !important;
}

.table .btn-success,
.master-table .btn-success {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important;
    color: #fff !important;
}

.table .btn-danger,
.master-table .btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #fff !important;
}

.table .btn-warning,
.master-table .btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    color: #212529 !important;
}

.table .btn-secondary,
.master-table .btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    color: #fff !important;
    border-left: 4px solid #343a40 !important;
}

/* Dark border for disabled/secondary for contrast */

.btn-premium-lock {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #fff !important;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Premium Status Tracker Styles */
.status-premium-tracker {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    margin-top: 10px;
}

.status-premium-tracker .status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f8f8f8;
}

.status-premium-tracker .status-item:last-child {
    border-bottom: none;
}

.status-premium-tracker .status-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #555;
    font-size: 14px;
}

.status-premium-tracker .status-label i {
    width: 20px;
    text-align: center;
    color: #ffc107;
}

.status-premium-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-premium-badge.success {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.status-premium-badge.danger {
    background-color: #ffebee;
    color: #c62828;
}

.status-premium-badge i {
    font-size: 10px;
}

.float-right-custom {
    float: right !important;
}

/* Print Specific Support */
@media print {
    .print-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: 1px solid #ddd !important;
        background-color: #f9f9f9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .order-header-premium .header-right {
        border-right: 4px solid #ffc107 !important;
    }

    .order-header-premium .header-center h4::after {
        background: #ffc107 !important;
    }

    .status-premium-badge {
        border: 1px solid #ddd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .status-premium-badge.success {
        background-color: #e8f5e9 !important;
        color: #2e7d32 !important;
    }

    .status-premium-badge.danger {
        background-color: #ffebee !important;
        color: #c62828 !important;
    }

    .visible-print {
        display: none !important;
    }

    /* Compact invoice header when printing */
    .view-invoice1 .order-header-premium.print-header {
        padding: 8px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        gap: 10px !important;
    }

    .view-invoice1 .order-header-premium .header-left img {
        max-height: 42px !important;
    }

    .view-invoice1 .order-header-premium .header-center h4 {
        font-size: 15px !important;
        padding-bottom: 4px !important;
    }

    .view-invoice1 .order-header-premium .header-center h4::after {
        height: 2px !important;
    }

    .view-invoice1 .order-header-premium .header-right {
        gap: 2px !important;
        padding-right: 10px !important;
        border-right-width: 2px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .view-invoice1 .order-header-premium .data-item {
        gap: 6px !important;
        margin: 0 !important;
    }

    .view-invoice1 .order-header-premium .data-item b {
        min-width: 84px !important;
        font-size: 11px !important;
    }

    .view-invoice1 .order-header-premium .data-item span {
        font-size: 11px !important;
    }


}

.mb-0 {
    margin-bottom: 0px !important;
}

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

.px-8-custom {
    padding: 0 8px !important;
}

.text-white-fs-20 {
    color: #fff !important;
    font-size: 20px !important;
}


.p-10 {
    padding: 10px !important;
}

.text-black-custom {
    color: #000 !important;
}

.dir-ltr {
    direction: ltr !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.fw-bold {
    font-weight: bold !important;
}

.fs-17 {
    font-size: 17px !important;
}

.text-left-dir-ltr-pl-15 {
    text-align: left !important;
    direction: ltr;
    padding-left: 15px;
}


/* ========================================================== */
/* Dropdown Menu Styling (Match Parent)                       */
/* ========================================================== */

/* ========================================================== */
/* Premium Form Styles (Employees Add/Edit)                   */
/* ========================================================== */
.premium-form {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0;
    direction: rtl;
    background: transparent;
    transition: all 0.3s ease;
}

.premium-form.full-width {
    max-width: 100%;
    margin: 20px 0;
}

.premium-form .form-header {
    background: var(--theme-primary);
    padding: 15px 25px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--theme-border);
    border-bottom: none;
}

.premium-form .form-header-logo img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px;
}

.premium-form .form-header-title {
    flex: 1;
}

.premium-form .form-header h3 {
    margin: 0;
    color: var(--theme-text);
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.premium-form .form-header h3 i {
    margin-left: 8px;
    color: var(--theme-link-hover);
}

/* Modern Modal Redesign */
.modern-modal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modern-modal .premium-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    color: #334155;
    padding: 20px 25px;
    border-bottom: 1px solid #e2e8f0;
}

.modern-modal .premium-header.edit-mode {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: #fff !important;
    border: none;
}

.modern-modal .premium-header.edit-mode .modal-title,
.modern-modal .premium-header.edit-mode .modal-title i,
.modern-modal .premium-header.edit-mode .close {
    color: #fff !important;
    opacity: 1;
}

.modern-modal .modal-title {
    font-weight: 700;
    font-size: 19px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
}

.modern-modal .modal-title i {
    font-size: 22px;
    opacity: 0.9;
}

.modern-modal .close {
    color: inherit;
    opacity: 0.6;
    text-shadow: none;
    transition: opacity 0.3s;
    font-size: 28px;
    font-weight: 300;
    margin-top: -5px;
    padding: 10px;
    line-height: 1;
}

.modern-modal .close:hover {
    opacity: 1;
    text-decoration: none;
    outline: none;
}

.modern-modal .premium-body {
    padding: 30px 40px;
    background: #fff;
}

.modern-modal .floating-group label {
    font-weight: 700;
    color: #34495e;
    margin-bottom: 10px;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modern-modal .floating-group label i {
    color: #3b82f6;
    font-size: 16px;
    width: 24px;
    height: 24px;
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.3s;
}

.modern-modal .floating-group:focus-within label i {
    background: #3b82f6;
    color: #fff;
    transform: scale(1.1);
}

.modern-modal .input-with-icon {
    display: block;
    width: 100%;
}

.modern-modal .premium-input {
    width: 100%;
    padding: 12px 15px !important;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
    text-align: right;
}

/* For LTR languages if needed */
[dir="ltr"] .modern-modal .premium-input {
    text-align: left;
}

.modern-modal .premium-input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
}

.modern-modal .input-with-icon:focus-within i,
.modern-modal .input-with-icon:focus-within .input-icon {
    color: #3b82f6;
}

.modern-modal .form-text {
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

.modern-modal .premium-footer {
    padding: 20px 40px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modern-modal .btn-close-modern {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
}

.modern-modal .btn-close-modern:hover {
    background: #f8fafc;
    color: #334155;
}

.modern-modal .btn-success-modern {
    background: #22c55e;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
    transition: 0.3s;
}

.modern-modal .btn-success-modern:hover {
    background: #16a34a;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(34, 197, 94, 0.3);
}

.modern-modal .btn-info-modern {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    transition: 0.3s;
}

.modern-modal .btn-info-modern:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3);
}

.premium-form .form-body {
    background: var(--theme-table-bg);
    padding: 30px;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--theme-border);
}

.premium-form .form-body.has-sidebar {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: flex-start;
}

/* Image Upload Section */
.premium-form .image-upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px dashed var(--theme-border);
}

.premium-form .profile-preview {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
    background: #f8f9fa;
}

.premium-form .profile-preview:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.premium-form .profile-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-form .upload-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 20, 30, 0.7);
    color: #fff;
    padding: 12px 5px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transition: 0.3s;
}

.premium-form .profile-preview:hover .upload-overlay {
    opacity: 1;
}

@media (max-width: 991px) {
    .premium-form .form-body.has-sidebar {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .premium-form .image-upload-section {
        order: -1;
        /* Image stays at top on mobile */
    }
}

.premium-form .form-body.has-footer {
    border-radius: 0;
    border-bottom: none;
}

.premium-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.premium-form .grid-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.premium-form .grid-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {

    .premium-form .form-grid,
    .premium-form .grid-2-cols,
    .premium-form .grid-3-cols {
        grid-template-columns: 1fr;
    }
}

.premium-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.premium-form .form-field label {
    color: var(--theme-table-text);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.premium-form .form-field label i {
    color: var(--theme-primary);
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.premium-form .form-field input,
.premium-form .form-field select,
.premium-form .form-field textarea {
    background: #ffffff !important;
    border: 2px solid #d1d9e6 !important;
    color: #333 !important;
    font-weight: 600 !important;
    padding: 1px 15px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    height: auto !important;
    transition: all 0.3s ease;
    outline: none !important;
    width: 100%;
}

.premium-form .form-field input:focus,
.premium-form .form-field select:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

.premium-form .form-field input[readonly],
.premium-form .readonly-wrapper input[readonly] {
    background: #f1f4f8 !important;
    border: 1px solid #d1d9e6 !important;
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
    opacity: 1 !important;
    cursor: default;
}

.premium-form .form-footer {
    background: var(--theme-table-bg);
    padding: 20px 30px;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--theme-border);
    border-top: none;
    text-align: left;
}

.premium-form .btn-premium-add,
.premium-form .btn-premium-edit {
    width: auto;
    padding: 12px 35px !important;
    background: var(--theme-btn-bg) !important;
    color: var(--theme-text) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.premium-form .btn-premium-add:hover,
.premium-form .btn-premium-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

.premium-form .btn-save {
    display: none;
    /* Replaced by btn-premium-add/edit */
}

/* Grid Layout Utilities */
.premium-form .form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.premium-form .form-row-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.premium-form .form-row-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {

    .premium-form .form-row-2-col,
    .premium-form .form-row-3-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .premium-form .form-body {
        grid-template-columns: 1fr;
    }

    .premium-form .form-grid {
        grid-template-columns: 1fr;
    }

    .premium-form .form-field.full-width {
        grid-column: span 1;
    }

    .premium-form .profile-preview {
        width: 140px;
        height: 140px;
    }
}

/* Premium Switch Toggle */
.premium-form .switch-field {
    display: flex;
    background: #f1f3f5;
    border-radius: 8px;
    padding: 4px;
    width: fit-content;
    border: 1px solid #e9ecef;
}

.premium-form .switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.premium-form .switch-field label {
    background-color: transparent;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    padding: 6px 12px;
    margin-right: 0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
    margin-bottom: 0 !important;
    font-weight: 600;
}

.premium-form .switch-field input:checked+label {
    background-color: #3498db;
    color: #fff;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

.premium-form .switch-field input[value="0"]:checked+label {
    background-color: #e74c3c;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
}

/* Permission Cards Grid System */
/* Permission Cards Grid System */
.permission-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 992px) {
    .permission-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .permission-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.permission-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.permission-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.permission-card-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.permission-card-header i {
    color: #3498db;
    font-size: 1.1em;
}

.permission-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.permission-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px dashed #eee;
}

.permission-toggle-row:last-child {
    border-bottom: none;
    padding-bottom: 0px;
}


.permission-toggle-label {
    font-size: 14px;
    color: #555;
    font-weight: 600;
}

/* =========================================
   Simple and Attractive Employee Profile View
   ========================================= */

.simple-profile-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 15px;
    min-height: calc(100vh - 150px);
}

.simple-profile-card {
    background: #ffffff;
    width: 100%;
    max-width: 650px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

[data-user-color="dark"] .simple-profile-card {
    background: #2c2e33;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
}

/* Header Cover */
.sp-header {
    height: 160px;
    background: var(--theme-bg-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    position: relative;
}

/* Action Buttons Header */
.sp-actions-top {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

.sp-action-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.sp-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Avatar Section */
.sp-avatar-container {
    text-align: center;
    margin-top: -75px;
    position: relative;
    z-index: 5;
}

.sp-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid #ffffff;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    display: inline-block;
}

[data-user-color="dark"] .sp-avatar {
    border-color: #2c2e33;
    background: #2c2e33;
}

/* Primary Info Text */
.sp-primary-info {
    text-align: center;
    padding: 15px 20px 25px;
}

.sp-primary-info h2 {
    margin: 0 0 5px 0;
    font-size: 26px;
    font-weight: 800;
    color: #2c3e50;
}

[data-user-color="dark"] .sp-primary-info h2 {
    color: #f1f1f1;
}

.sp-job-title {
    display: inline-block;
    background: rgba(0, 0, 0, 0.04);
    color: var(--theme-text, #6c757d);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
}

[data-user-color="dark"] .sp-job-title {
    background: rgba(255, 255, 255, 0.1);
    color: #ddd;
}

/* Divider */
.sp-divider {
    border: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 0 30px;
}

[data-user-color="dark"] .sp-divider {
    background: rgba(255, 255, 255, 0.05);
}

/* Details Grid */
.sp-details-container {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

@media (max-width: 500px) {
    .sp-details-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}



.sp-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.sp-detail-icon {
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--theme-secondary, #667eea);
    flex-shrink: 0;
}

[data-user-color="dark"] .sp-detail-icon {
    background: rgba(255, 255, 255, 0.05);
}

.sp-detail-text {
    display: flex;
    flex-direction: column;
}

.sp-detail-label {
    font-size: 13px;
    color: #95a5a6;
    margin-bottom: 3px;
    font-weight: 600;
}

.sp-detail-value {
    font-size: 15px;
    color: #34495e;
    font-weight: 700;
}

[data-user-color="dark"] .sp-detail-value {
    color: #e0e0e0;
}

/* Permissions Section */
.sp-permissions-section {
    padding: 25px 30px 30px;
    background: rgba(0, 0, 0, 0.015);
}

[data-user-color="dark"] .sp-permissions-section {
    background: rgba(0, 0, 0, 0.2);
}

.sp-section-title {
    font-size: 16px;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-user-color="dark"] .sp-section-title {
    color: #ddd;
}

.sp-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sp-tag {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.sp-tag:hover {
    background: var(--theme-bg-gradient, #f8f9fa);
    color: white;
    border-color: transparent;
}

.sp-tag i {
    color: #2ecc71;
}

.sp-tag:hover i {
    color: white;
}

[data-user-color="dark"] .sp-tag {
    background: #3a3f44;
    border-color: rgba(255, 255, 255, 0.05);
    color: #ccc;
}


.tab-trigger:hover {
    color: #2c3e50;
}

.tab-trigger.active {
    color: var(--theme-primary, #3498db);
    border-bottom-color: var(--theme-primary, #3498db);
}

.tab-content-panel {
    display: none;
    padding: 25px;
}

.tab-content-panel.active {
    display: block;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-item {
    padding: 15px;
    background: #f9f9f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-item i {
    color: #bdc3c7;
    width: 20px;
    text-align: center;
}

.info-item .label {
    font-size: 12px;
    color: #888;
    display: block;
}

.info-item .text {
    font-weight: 600;
    color: #444;
}

@media (max-width: 768px) {
    .profile-header-card {
        flex-direction: column;
        text-align: center;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .activity-tabs-header {
        overflow-x: auto;
        white-space: nowrap;
    }
}

.view-section-title {
    font-size: 22px;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f3f5;
    display: flex;
    align-items: center;
    gap: 15px;
}

.view-section-title i {
    color: #3498db;
    font-size: 24px;
}

.permission-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.permission-tag {
    background: #f0f9ff;
    border: 1px solid #b3e5fc;
    color: #0277bd;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}

.permission-tag:hover {
    background: #e1f5fe;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(2, 119, 189, 0.15);
}

.permission-tag i {
    color: #29b6f6;
    font-size: 18px;
}

.no-permissions-alert {
    text-align: center;
    padding: 30px;
    background: #fff8e1;
    color: #f57c00;
    border-radius: 8px;
    border: 1px solid #ffe0b2;
    font-weight: 600;
}

/* Mobile Navbar Optimization */


/* Premium Action Bar (Action Ribbon) */
.premium-action-bar {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin: 15px 20px 25px;
    padding: 0;
    border: 1px solid #eef2f7;
    overflow: hidden;
}

.premium-action-bar .action-container {
    display: flex;
    align-items: center;
    padding: 0 15px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar IE/Edge */
}

.premium-action-bar .action-container::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.premium-action-bar .action-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    white-space: nowrap;
}

.premium-action-bar .action-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #5d6d7e;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    gap: 8px;
}

.premium-action-bar .action-item i {
    font-size: 16px;
    color: #3498db;
    transition: all 0.3s ease;
}

.premium-action-bar .action-item:hover {
    color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.premium-action-bar .action-item.active {
    color: #3498db;
    border-bottom-color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.premium-action-bar .action-item.active i {
    color: #3498db;
}

.premium-action-bar .action-divider {
    width: 1px;
    height: 25px;
    background: #eef2f7;
    margin: 0 10px;
}

.premium-action-bar .action-label {
    padding: 15px 15px;
    font-weight: 800;
    color: #2c3e50;
    font-size: 15px;
    border-left: 1px solid #eef2f7;
    margin-left: 0px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 768px) {
    .premium-action-bar {
        margin: 10px;
        border-radius: 8px;
    }

    .premium-action-bar .action-item {
        padding: 12px 15px;
        font-size: 13px;
    }

    .premium-action-bar .action-label {
        display: none;
        /* Hide main label on very small screens to save space */
    }
}



/* Global Table Form Reset */
table form,
table button {
    margin: 0 !important;
    float: center !important;
    direction: ltr !important;
}

/* Center Align Last Column in Master Table */
#master-table tr td:last-child,
#master-table tr th:last-child {
    text-align: center !important;
}

/* =========================================
   Redesigned Premium Dashboard
   ================================********* */

/* Grid Layouts */
/* Grid Layouts - Updated Widths */
.dashboard-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px auto 25px auto;
    width: 85%;
    /* Gathered from sides on Desktop */
    max-width: 1400px;
}

.dashboard-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 0 auto 25px auto;
    width: 85%;
    /* Gathered from sides on Desktop */
    max-width: 1400px;
}

/* ... (rest of styles) ... */

/* Mobile Responsiveness */
@media (max-width: 991px) {

    .dashboard-grid-3,
    .dashboard-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        width: 95%;
        /* Wider on tablet/mobile */
        padding: 0 10px;
    }
}

@media (max-width: 600px) {

    .dashboard-grid-3,
    .dashboard-grid-4 {
        grid-template-columns: 1fr;
        width: 98%;
        /* Full width on small screens */
    }
}

/* Premium Card Design */
.dashboard-card {
    background: #fff;
    border-radius: 12px;
    /* Slightly smaller radius */
    padding: 15px;
    /* Reduced from 25px */
    position: relative;
    overflow: visible;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    /* Lighter shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

/* Theme Integration for Card Hover */
[data-user-color="blue"] .dashboard-card:hover {
    border-color: rgba(41, 128, 185, 0.3);
    box-shadow: 0 10px 25px rgba(41, 128, 185, 0.15);
    transform: translateY(-3px);
}

[data-user-color="dark"] .dashboard-card:hover {
    border-color: rgba(52, 58, 64, 0.4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}

[data-user-color="green"] .dashboard-card:hover {
    border-color: rgba(25, 135, 84, 0.3);
    box-shadow: 0 10px 25px rgba(25, 135, 84, 0.15);
    transform: translateY(-3px);
}

[data-user-color="purple"] .dashboard-card:hover {
    border-color: rgba(111, 66, 193, 0.3);
    box-shadow: 0 10px 25px rgba(111, 66, 193, 0.15);
    transform: translateY(-3px);
}

/* Card Content Elements */
.dashboard-icon-wrapper {
    width: 50px;
    /* Reduced from 70px */
    height: 50px;
    /* Reduced from 70px */
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 22px;
    /* Reduced from 28px */
    transition: all 0.3s ease;
}

[data-user-color] .dashboard-card:hover .dashboard-icon-wrapper {
    background: var(--theme-bg-gradient);
    color: #fff;
    transform: scale(1.1) rotate(5deg);
}

.dashboard-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #2c3e50 !important;
}

[data-user-color] .dashboard-card:hover .dashboard-title {
    color: var(--theme-primary) !important;
}

.dashboard-subtitle {
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Inner Action Buttons */
.dashboard-btn-group {
    width: 100%;
    margin-top: auto;
    /* Pushes buttons to bottom */
    display: flex;
    gap: 10px;
    justify-content: center;
}

.dashboard-btn-group .btn {
    flex: 1;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 10px;
}

/* Specialized Stats (Email/Messenger) */
.dashboard-stat-badge {
    background: #e74c3c;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    margin-left: 5px;
}

/* Form Styling inside Dashboard Grid 4 Cards */
.dashboard-grid-4 .dashboard-card>div:last-child,
.dashboard-grid-4 .dashboard-card>form {
    margin-top: auto;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.03);
}

/* Theme-colored Form Background */
[data-user-color="blue"] .dashboard-grid-4 .dashboard-card>div:last-child,
[data-user-color="blue"] .dashboard-grid-4 .dashboard-card>form {
    background: rgba(41, 128, 185, 0.08);
}

[data-user-color="dark"] .dashboard-grid-4 .dashboard-card>div:last-child,
[data-user-color="dark"] .dashboard-grid-4 .dashboard-card>form {
    background: rgba(52, 58, 64, 0.08);
}

[data-user-color="green"] .dashboard-grid-4 .dashboard-card>div:last-child,
[data-user-color="green"] .dashboard-grid-4 .dashboard-card>form {
    background: rgba(25, 135, 84, 0.08);
}

[data-user-color="purple"] .dashboard-grid-4 .dashboard-card>div:last-child,
[data-user-color="purple"] .dashboard-grid-4 .dashboard-card>form {
    background: rgba(111, 66, 193, 0.08);
}

/* =========================================
   Modern Messenger Redesign
   ================================********* */

/* Main Container */
.messenger-container {
    display: flex;
    height: calc(100vh - 120px);
    background: #efeae2;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    margin: 10px -15px 0 -15px; /* Bleed to edges within typical bootstrap container */
    border: 1px solid #d1d7db;
}

/* Sidebar (User List) */
.messenger-sidebar {
    width: 35%;
    min-width: 300px;
    max-width: 450px;
    background: #fff;
    border-left: 1px solid #d1d7db; /* Left border since Arabic RTL */
    display: flex;
    flex-direction: column;
}

.messenger-sidebar-header {
    height: 59px;
    padding: 10px 16px;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-avatar i {
    cursor: pointer;
}

.header-actions {
    display: flex;
    gap: 24px;
    color: #54656f;
    font-size: 19px;
    align-items: center;
}

.header-actions i {
    cursor: pointer;
}

/* Search Bar */
.messenger-search {
    padding: 7px 12px;
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
}

.search-box {
    display: flex;
    align-items: center;
    background: #f0f2f5;
    border-radius: 8px;
    padding: 0 10px;
    height: 35px;
}

.search-btn {
    border: none;
    background: transparent;
    color: #54656f;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 15px;
    outline: none;
}

.search-box input {
    flex: 1;
    border: none;
    background: transparent;
    height: 100%;
    outline: none;
    font-size: 15px;
    color: #3b4a54;
    padding: 0 5px;
}

.search-box input::placeholder {
    color: #8696a0;
}

/* Filter Tabs */
.messenger-filters {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #f2f2f2;
    background: #fff;
    overflow-x: auto;
}

.filter-tab {
    background: #f0f2f5;
    color: #54656f;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.filter-tab.active {
    background: #d9fdd3;
    color: #118c4f;
}

/* User List */
.messenger-user-list {
    flex: 1;
    overflow-y: auto;
    background: #fff;
}

/* Scrollbar styling for Whatsapp like look */
.messenger-user-list::-webkit-scrollbar {
    width: 6px;
}
.messenger-user-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
}

.messenger-user-card {
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 72px;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s;
}

.messenger-user-card:hover {
    background: #f5f6f6;
}

.messenger-user-card.active {
    background: #f0f2f5;
}

.user-avatar {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: #e9edef;
    margin-left: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #f2f2f2;
    height: 100%;
    padding-right: 5px;
}

.messenger-user-card:last-child .user-info {
    border-bottom: none;
}

.info-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.user-name-title {
    margin: 0;
    font-size: 17px;
    color: #111b21;
    font-weight: 500; /* WhatsApp uses normal to slight bold */
}

.info-bottom {
    display: flex;
    align-items: center;
}

.last-msg {
    margin: 0;
    font-size: 14px;
    color: #667781;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
    display: flex;
    align-items: center;
}

/* Chat Area */
.messenger-chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
    position: relative;
    border-bottom: 6px solid #43c960; /* WhatsApp signature green bottom line for empty state */
}

.messenger-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #f0f2f5;
    padding: 20px;
}

/* =========================================
   Daily Report Form Redesign
   ================================********* */

.daily-report-container {
    max-width: 1100px;
    margin: 30px auto;
}

.daily-report-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

[data-user-color='dark'] .daily-report-card {
    background: #2c2e33;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
}

.daily-report-header {
    background: var(--theme-bg-gradient);
    color: white;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    /* Ensure RTL for header text */
}

.daily-report-header h3 {
    margin: 0;
    font-weight: 800;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    gap: 15px;
}

.daily-report-header .header-icon {
    font-size: 24px;
    background: rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-left: 15px;
    /* RTL spacing */
}

.daily-report-body {
    padding: 40px;
    direction: rtl;
    /* Ensure body is RTL */
    text-align: right;
    background: #fff;
    /* White Background as requested */
}

.form-section-title {
    color: var(--theme-secondary, #667eea);
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 10px;
}

[data-user-color='dark'] .form-section-title {
    border-color: rgba(255, 255, 255, 0.05);
}

.form-section-title i {
    margin-left: 10px;
}

/* Standardize Input Heights */
.daily-report-body .form-control {
    height: 45px !important;
    line-height: normal;
    /* Better vertical alignment */
}

/* Fix Bootstrap Select Height */
.daily-report-body .bootstrap-select>.dropdown-toggle {
    height: 45px !important;
    padding-top: 10px;
    background: #fff;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
}

/* Fix Money Grid to be on one single line (7 items) */
.money-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* 200, 100, 50, 20, 10, 5, 1 */
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

/* Stack on Mobile */
@media (max-width: 991px) {
    .money-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

.money-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.money-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--theme-secondary, #667eea);
    background: white;
}

[data-user-color='dark'] .money-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-user-color='dark'] .money-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--theme-secondary);
}

.money-card label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    font-weight: 700;
    color: #333;
    /* Darkened from #6c757d */
}

[data-user-color='dark'] .money-card label {
    color: #adb5bd;
}

.money-icon {
    font-size: 1.8em;
    color: var(--theme-primary, #1a3c61);
    margin-bottom: 15px;
    opacity: 0.8;
}

.money-card input {
    text-align: center;
    font-size: 1.3em;
    font-weight: 800;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px;
    width: 100%;
    background: rgba(0, 0, 0, 0.03);
    color: #333333 !important;
    /* FIX: Force dark color permanently */
    transition: all 0.3s ease;
}

.money-card input:focus {
    background: white;
    border-color: var(--theme-secondary, #2980b9);
    box-shadow: 0 0 0 4px rgba(41, 128, 185, 0.1);
    outline: none;
    color: #333 !important;
    /* Keep it dark on focus too */
}

/* Specific Dark Theme Override for Money Input */
[data-user-color='dark'] .money-card input {
    color: #ffffff !important;
    /* White text for Dark Mode */
    background: rgba(0, 0, 0, 0.2);
}

[data-user-color='dark'] .money-card input:focus {
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff !important;
}

.submit-section {
    margin-top: 40px;
    text-align: center;
}

.btn-report-submit {
    background: var(--theme-btn-bg);
    color: white;
    font-size: 1.2em;
    padding: 15px 50px;
    border-radius: 50px;
    border: none;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-report-submit:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.btn-report-submit i {
    margin-left: 10px;
}

/* =========================================
   Daily Report View Styles
   ================================********* */

.report-view-container {
    max-width: 1200px;
    margin: 30px auto;
    font-family: inherit;
}

.report-view-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

[data-user-color='dark'] .report-view-card {
    background: #2c2e33;
    border-color: rgba(255, 255, 255, 0.05);
}

.report-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 25px;
    /* Increased padding */
    background: #fff;
    /* White background */
    border-bottom: 1px solid #f0f0f0;
}

[data-user-color='dark'] .report-info-grid {
    background: #242526;
    border-color: #444;
}

.report-info-item {
    display: flex;
    flex-direction: column;
}

.report-info-label {
    font-size: 13px;
    /* Slightly larger */
    color: #333;
    /* Darkened from #888 */
    font-weight: 600;
    margin-bottom: 5px;
}

.report-info-value {
    font-weight: 700;
    font-size: 15px;
    color: var(--theme-text);
}

.report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.report-table th {
    background: var(--theme-bg-gradient);
    color: white;
    padding: 15px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.report-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    text-align: center;
    color: #333;
    /* Darkened for visibility on white bg */
    font-weight: 600;
}

[data-user-color='dark'] .report-table td {
    border-color: #444;
}

.report-table tr:last-child td {
    border-bottom: none;
}

.report-table tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

[data-user-color='dark'] .report-table tr:hover td {
    background: #dae4f3 !important;
}

.result-box {
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    font-weight: 800;
    font-size: 18px;
    margin: 20px 0;
}

.result-box.success {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid #28a745;
}

.result-box.danger {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid #dc3545;
}

.result-box.info {
    background: rgba(23, 162, 184, 0.1);
    color: #135662;
    border: 1px solid #17a2b8;
}

/* Hide navbar and footer during print if needed, but keeping global print styles */
@media print {
    .daily-report-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}


/* =========================================
   Print and Precision Styles
   ================================********* */

/* Ensure white background for report view card on screen if requested, or just cleaner look */
.report-view-card {
    background: #fff !important;
    border: 1px solid #e0e0e0;
    box-shadow: none !important;
    /* Cleaner look requested */
}

/* Print Optimization */
@media print {

    body,
    .report-view-container,
    .report-view-card {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Force black text for clarity */
    .report-table th,
    .report-table td,
    .report-info-label,
    .report-info-value,
    .daily-report-header h3,
    .result-box {
        color: #000 !important;
        text-shadow: none !important;
    }

    /* Remove gradient from header for print to save ink and ensure clarity */
    .daily-report-header {
        background: none !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
        padding-bottom: 20px;
    }

    .daily-report-header .text-white-important {
        color: #000 !important;
    }

    /* Ensure specific elements are visible */
    .report-logo {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Hide non-essential elements */
    .btn,
    .navbar,
    .noprint {
        display: none !important;
    }
}

/* Font Clarity Enhancements */
.report-table td,
.report-table th {
    font-size: 14px;
    /* Larger font */
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Clean font */
}

.report-info-value {
    font-size: 16px;
    color: #333;
}

/* =========================================
   Final Report Theme Backgrounds
   ================================********* */

.final-report {
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
    /* Default light background */
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #2c3e50 !important;
    /* Forces dark text */
    font-weight: 700;
    /* Bold text */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for clarity */
}

/* Theme Specific Backgrounds (Light & Subtle) */
[data-user-color='blue'] .final-report {
    background: rgba(41, 128, 185, 0.08);
    border-color: rgba(41, 128, 185, 0.15);
}

[data-user-color='green'] .final-report {
    background: rgba(25, 135, 84, 0.08);
    border-color: rgba(25, 135, 84, 0.15);
}

[data-user-color='purple'] .final-report {
    background: rgba(111, 66, 193, 0.08);
    border-color: rgba(111, 66, 193, 0.15);
}

[data-user-color='dark'] .final-report {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Ensure printed version is clean */
@media print {
    .final-report {
        background: none !important;
        border: none !important;
    }
}

/* Final Report - Solid Backgrounds for White Text */
.final-report {
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
    background: #2c3e50;
    /* Default Dark */
    color: #fff !important;
    /* Forces White text as requested */
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Theme Specific Solid Backgrounds */
[data-user-color='blue'] .final-report {
    background: #2980b9;
    /* Solid Blue */
    border: none;
}

[data-user-color='green'] .final-report {
    background: #27ae60;
    /* Solid Green */
    border: none;
}

[data-user-color='purple'] .final-report {
    background: #8e44ad;
    /* Solid Purple */
    border: none;
}

[data-user-color='dark'] .final-report {
    background: #34495e;
    /* Lighter Dark for contrast */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================
   Readonly Tag Directional Positioning
   ================================********* */

.relative-input-container {
    position: relative;
    /* Wrapper for proper absolute positioning */
}

.readonly-tag {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* Let clicks pass through to input */
    color: #888;
    background: transparent;
    padding: 0 10px;
    font-size: 0.9em;
    font-weight: 600;
}

/* Default LTR (Input text Left -> Tag Right) */
.readonly-tag {
    right: 15px;
    left: auto;
}

/* RTL Context (Input text Right -> Tag Left) */
[dir='rtl'] .readonly-tag,
.daily-report-body .readonly-tag {
    /* Body is explicitly RTL */
    left: 15px;
    right: auto;
}

/* ==========================================================================
   Login Page Redesign (index.php)
   ========================================================================== */

#login-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: hidden;
}

.shop-background-open,
.shop-background-closed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.shop-background-open {
    background-image: url('../images/shop-open.png');
}

.shop-background-closed {
    background-image: url('../images/shop-closed.png');
    z-index: 0;
    /* Above the open layer */
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

#login-page.shop-open .shop-background-closed {
    transform: translateY(-100%);
}

.login-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 420px;
    padding: 20px;
    animation: fadeInScale 0.6s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.login-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.login-logo {
    margin-bottom: 30px;
}

.login-logo img {
    width: 140px;
    filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.3));
    transition: transform 0.3s ease;
}

.login-logo img:hover {
    transform: scale(1.05);
}

.form-title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 35px;
    letter-spacing: 0.5px;
}



.input-group-modern {
    position: relative;
    margin-bottom: 20px;
}

.input-group-modern i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 18px;
    transition: color 0.3s ease;
}

.input-group-modern input {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 15px 50px 15px 20px;
    color: #000;
    font-size: 15px;
    transition: all 0.3s ease;
    outline: none;
}

.input-group-modern input::placeholder {
    color: #999;
}

.input-group-modern input:focus {
    background: #fff;
    border-color: #ff9800;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.2);
}

.input-group-modern input:focus+i {
    color: #ff9800;
}

.btn-login {
    width: 100%;
    background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
    border: none;
    border-radius: 12px;
    padding: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(244, 67, 54, 0.3);
    filter: brightness(1.1);
}

.btn-login:active {
    transform: translateY(0);
}

.login-error {
    background: rgba(244, 67, 54, 0.15);
    border-right: 4px solid #f44336;
    padding: 12px;
    border-radius: 8px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffcdd2;
    font-size: 14px;
    animation: shake 0.5s ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Welcome Overlay Styles */
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease;
}

.welcome-overlay.active {
    opacity: 1;
    visibility: visible;
}

.welcome-content {
    text-align: center;
    color: #fff;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.welcome-overlay.active .welcome-content {
    transform: translateY(0);
}

.welcome-content i {
    font-size: 60px;
    color: #ff9800;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(255, 152, 0, 0.5));
}

.welcome-content h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
}

.welcome-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
}

/* Redefine transition for a more cinematic feel */
.shop-background-closed {
    background-image: url('../images/shop-closed.png');
    z-index: 0;
    /* Above the open layer */
    transition: transform 1.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* ========================================================== */
/* Premium Selects Global Styles                              */
/* ========================================================== */
.premium-select-group {
    display: flex !important;
    align-items: stretch;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
    background: #fff;
    border: 1px solid #e3e6ec;
    transition: all 0.3s ease;
    margin-bottom: 5px;
    height: 38px !important;
}

.premium-select-group:focus-within {
    border-color: #ffc107;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.15);
}

.premium-select-group .premium-addon {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: none;
    border-left: 1px solid #e3e6ec;
    color: #555;
    font-size: 14px;
    padding: 0 12px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 100%;
}

.premium-select-group .bootstrap-select {
    width: 100% !important;
    flex: 1;
    height: 100%;
}

.premium-select-group .bootstrap-select .dropdown-toggle {
    margin-bottom: 0 !important;
    height: 100%;
    outline: none !important;
}

.premium-select-group .btn-premium-select {
    background: #fff !important;
    border: none !important;
    color: #333 !important;
    padding: 0 15px !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    height: 100% !important;
    display: flex;
    align-items: center;
}

html[dir="rtl"] .premium-select-group .premium-addon {
    border-left: 1px solid #e3e6ec;
    border-right: none;
    border-radius: 0 8px 8px 0;
}

html[dir="rtl"] .premium-select-group .btn-premium-select {
    border-radius: 8px 0 0 8px !important;
}

html[dir="ltr"] .premium-select-group .premium-addon {
    border-left: none;
    border-right: 1px solid #e3e6ec;
    border-radius: 8px 0 0 8px;
}

html[dir="ltr"] .premium-select-group .btn-premium-select {
    border-radius: 0 8px 8px 0 !important;
}

.premium-select-group .bootstrap-select .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 10px 0;
    margin-top: 5px;
    width: auto !important;
    min-width: 100% !important;
    white-space: nowrap;
}

html[dir="rtl"] .premium-select-group .bootstrap-select .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}

html[dir="ltr"] .premium-select-group .bootstrap-select .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

.premium-select-group .bootstrap-select .bs-searchbox .form-control {
    border-radius: 20px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.premium-select-group .bootstrap-select .dropdown-menu li a {
    padding: 8px 20px;
    color: #444;
    font-weight: 500;
    transition: all 0.2s;
    border-radius: 5px;
    margin: 2px 10px;
}

.premium-select-group .bootstrap-select .dropdown-menu li a:hover,
.premium-select-group .bootstrap-select .dropdown-menu li.selected a {
    background-color: #f1f4f8 !important;
    color: #0056b3 !important;
    font-weight: 600;
}

html[dir="rtl"] .premium-select-group .bootstrap-select .dropdown-menu li a:hover {
    transform: translateX(-5px);
}

html[dir="ltr"] .premium-select-group .bootstrap-select .dropdown-menu li a:hover {
    transform: translateX(5px);
}

.premium-select-group .bootstrap-select .dropdown-menu li.selected a {
    border-right: 3px solid #ffc107;
}

html[dir="ltr"] .premium-select-group .bootstrap-select .dropdown-menu li.selected a {
    border-right: none;
    border-left: 3px solid #ffc107;
}

.premium-select-group .bootstrap-select .dropdown-toggle .filter-option {
    text-align: right;
    display: flex;
    align-items: center;
}

html[dir="ltr"] .premium-select-group .bootstrap-select .dropdown-toggle .filter-option {
    text-align: left;
}

.premium-select-group .bootstrap-select .dropdown-toggle .bs-caret {
    margin-right: 15px;
}

html[dir="ltr"] .premium-select-group .bootstrap-select .dropdown-toggle .bs-caret {
    margin-right: 0;
    margin-left: 15px;
}

/* ========================================================== */
/* Control Selects (Native) Styles                            */
/* ========================================================== */
.control select {
    background-color: #f8f9fa;
    border: 1px solid #e3e6ec;
    border-radius: 6px;
    padding: 6px 15px;
    color: #444;
    font-weight: 500;
    font-size: 13px;
    outline: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    height: 34px;
    width: 100%;
}

.control select:focus {
    border-color: #ffc107;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.15);
}

/* ========================================================== */
/* New Import Order Table Width Fixes                         */
/* ========================================================== */
.order-items .table-body th,
.order-items .table-body td {
    vertical-align: middle;
}

/* Ensure supplier and currency selects have enough space */
#supplier_id_new_import_order,
#payment_currency_import_order,
.payment_currency_import_order {
    min-width: 150px;
}

.order-items .table-body td .premium-select-group {
    min-width: 180px;
}

/* ========================================================== */
/* Fixed Menu Watermark Overlay                               */
/* ========================================================== */

.fixed-menu::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    /* Size of the watermark */
    height: 200px;
    transform: translate(-50%, -50%);
    background-image: url('../images/icons/elzahar.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.05;
    /* Light transparent effect */
    z-index: 0;
    pointer-events: none;
    /* Don't block clicks */
}

/* Ensure menu items stay above the watermark */
.fixed-menu .menu,
.fixed-menu h3,
.fixed-menu .list-unstyled {
    position: relative;
    z-index: 1;
}

/* ============================================ */
/* PREMIUM TAX FORM STYLING                    */
/* ============================================ */

/* Specialized Row for Tax/PO Info cards */
.tax-info-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--theme-table-bg);
    border: 1px solid var(--theme-border);
    border-bottom: none;
}

.tax-info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.2s ease;
}

.tax-info-card:hover {
    background: rgba(0, 0, 0, 0.02);
}

.tax-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--theme-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--theme-border);
}

.tax-info-icon i {
    color: var(--theme-primary);
    font-size: 15px;
}

.tax-info-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tax-info-label {
    font-size: 11px;
    color: var(--theme-table-text);
    opacity: 0.7;
    margin-bottom: 2px;
}

.tax-info-value {
    font-size: 14px;
    color: var(--theme-table-text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tax Already Done */
.tax-already-done {
    background: var(--theme-table-bg);
    color: var(--theme-table-text);
    padding: 25px;
    text-align: center;
    border-radius: 0 0 12px 12px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--theme-border);
    border-top: none;
}

.tax-already-done i {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
    color: #28a745;
}

/* Form Body */
.tax-form-body {
    background: var(--theme-table-bg);
    padding: 30px;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--theme-border);
    border-top: none;
}

.tax-inputs-row-triple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tax-input-group {
    margin-bottom: 20px;
}

.tax-input-group label {
    display: block;
    color: var(--theme-table-text);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700;
}

.tax-input-group label i {
    color: var(--theme-primary);
    margin-left: 6px;
    width: 16px;
    text-align: center;
}

.tax-input-readonly,
input.tax-input-readonly,
input.tax-input-readonly[readonly],
.tax-form-body input.tax-input-readonly {
    background: #f1f4f8 !important;
    border: 1px solid #d1d9e6 !important;
    color: #333 !important;
    font-weight: 700 !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    height: auto !important;
    -webkit-text-fill-color: #333 !important;
    opacity: 1 !important;
}

.tax-input-active {
    background: #ffffff !important;
    border: 2px solid #d1d9e6 !important;
    color: #333 !important;
    font-weight: 700 !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    height: auto !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Form Body */
.tax-inputs-row-triple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .tax-info-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .tax-inputs-row-triple {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ========================================
   Purchase Order View Page - Modern Cards
   ======================================== */

/* Card Container */
.order-view-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
    margin-bottom: 20px;
    overflow: hidden;
}

.order-view-card-header {
    background: var(--theme-bg-gradient, linear-gradient(135deg, #1a5c38, #2d8a5e));
    color: #fff;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-view-card-header i {
    font-size: 16px;
    opacity: 0.85;
}

.order-view-card-body {
    padding: 0;
}

/* Items Table */
.order-view-table {
    margin-bottom: 0;
    width: 100%;
}

.order-view-table thead tr {
    background: var(--theme-highlight, rgba(0, 0, 0, 0.03));
}

.order-view-table thead th {
    font-weight: 700;
    font-size: 12px;
    color: #444;
    padding: 12px 10px;
    border-bottom: 2px solid #eee;
    white-space: nowrap;
    text-align: center;
}

.order-view-table tbody tr {
    transition: background 0.2s ease;
}

.order-view-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

.order-view-table tbody tr:hover {
    background: rgba(0, 100, 50, 0.04);
}

.order-view-table tbody td {
    padding: 10px;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

/* Summary Card - compact on desktop */
.order-view-card-summary {
    max-width: 500px;
    margin-left: 0;
    margin-right: auto;
}

/* Summary Grid */
.order-summary-grid {
    padding: 15px 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-row:hover {
    background: rgba(0, 100, 50, 0.03);
}

.summary-label {
    font-size: 13px;
    color: #555;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-label i {
    color: var(--theme-primary, #1a5c38);
    width: 18px;
    text-align: center;
    font-size: 13px;
}

.summary-value {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}

.summary-highlight {
    background: var(--theme-highlight, rgba(26, 92, 56, 0.05));
    border-radius: 8px;
    margin: 10px 0;
    border: 1px solid rgba(26, 92, 56, 0.12);
    border-bottom: 1px solid rgba(26, 92, 56, 0.12);
}

.summary-value-big {
    font-size: 18px;
    color: var(--theme-primary, #1a5c38);
}

/* Bottom Row - Warehouse + Status side by side */
.order-view-bottom-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.order-view-card-flex {
    flex: 2;
}

.order-view-card-status {
    flex: 1;
}

/* Warehouse Info */
.warehouse-info-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.warehouse-badge {
    background: var(--theme-bg-gradient, linear-gradient(135deg, #1a5c38, #2d8a5e));
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.warehouse-badge i {
    margin-left: 5px;
}

.warehouse-address {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* Remarks */
.order-remark-section {
    padding: 15px 20px;
}

.order-remark-text {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    margin: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border: 1px dashed #ddd;
    min-height: 40px;
}

.order-remark-text .edir_remark {
    cursor: pointer;
    margin-left: 8px;
}

/* Status Badges */
.order-status-badges {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.status-badge-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.status-badge-item:last-child {
    border-bottom: none;
}

.status-badge-label {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.status-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-badge-success {
    background: rgba(40, 167, 69, 0.12);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.status-badge-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* ========================
   Responsive - View Page
   ======================== */
@media (max-width: 992px) {
    .order-view-bottom-row {
        grid-template-columns: 1fr;
    }

    .order-view-card-summary {
        max-width: 70%;
    }
}

@media (max-width: 768px) {
    .order-view-card-summary {
        max-width: 100%;
    }

    .order-view-card-header {
        font-size: 13px;
        padding: 12px 15px;
    }

    .summary-row {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 5px;
    }

    .summary-label {
        font-size: 12px;
    }

    .summary-value {
        font-size: 13px;
    }

    .summary-value-big {
        font-size: 16px;
    }

    .order-view-table thead th {
        font-size: 11px;
        padding: 8px 6px;
    }

    .order-view-table tbody td {
        font-size: 12px;
        padding: 8px 6px;
    }

    .warehouse-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .status-badge-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .order-remark-section {
        padding: 10px 12px;
    }
}

/* ============================================================ */
/*  PREMIUM ITEM VIEW CARD                                      */
/* ============================================================ */
.item-view-wrapper {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 15px;
}

/* Premium Item View Card - Theme Integrated */
.item-view-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

[data-user-color="dark"] .item-view-card {
    background: #2c2e33;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
}

/* Card Header with Theme Gradient */
.item-view-card .ivc-header {
    background: var(--theme-bg-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    padding: 22px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    position: relative;
    overflow: hidden;
}

.item-view-card .ivc-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/pattern.png');
    opacity: 0.1;
    pointer-events: none;
}

.item-view-card .ivc-header h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.item-view-card .ivc-header h2 i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
}

.item-view-card .ivc-header .ivc-code-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
    direction: ltr;
    position: relative;
    z-index: 2;
}

/* Card Body */
.item-view-card .ivc-body {
    padding: 35px;
    display: flex;
    gap: 40px;
    direction: rtl;
}

/* Image Column */
.item-view-card .ivc-image-col {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.item-view-card .ivc-image-frame {
    width: 230px;
    height: 230px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    padding: 10px;
}

[data-user-color="dark"] .item-view-card .ivc-image-frame {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.item-view-card .ivc-image-frame:hover {
    border-color: var(--theme-secondary);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px) scale(1.02);
}

.item-view-card .ivc-image-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.item-view-card .ivc-image-frame:hover img {
    transform: scale(1.08);
}

/* Details Column */
.item-view-card .ivc-details-col {
    flex: 1;
    min-width: 0;
}

/* Item Title */
.item-view-card .ivc-item-title {
    font-size: 26px;
    font-weight: 800;
    color: #2c3e50;
    margin: 0 0 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f3f5;
    position: relative;
}

[data-user-color="dark"] .item-view-card .ivc-item-title {
    color: #f1f1f1;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.item-view-card .ivc-item-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 80px;
    height: 2px;
    background: var(--theme-bg-gradient);
    border-radius: 2px;
}

/* Info Grid */
.item-view-card .ivc-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.item-view-card .ivc-info-item {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 15px 18px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    display: flex;
    flex-direction: column;
}

[data-user-color="dark"] .item-view-card .ivc-info-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.02);
}

.item-view-card .ivc-info-item::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: #e9ecef;
    border-radius: 4px 0 0 4px;
    transition: all 0.3s ease;
}

[data-user-color="dark"] .item-view-card .ivc-info-item::before {
    background: rgba(255, 255, 255, 0.1);
}

.item-view-card .ivc-info-item:hover {
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transform: translateX(-5px);
    border-color: rgba(0, 0, 0, 0.05);
}

[data-user-color="dark"] .item-view-card .ivc-info-item:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.item-view-card .ivc-info-item:hover::before {
    height: 100%;
    background: var(--theme-primary);
}

.item-view-card .ivc-info-label {
    font-size: 11px;
    color: #95a5a6;
    margin-bottom: 5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-view-card .ivc-info-value {
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
    word-break: break-word;
}

[data-user-color="dark"] .item-view-card .ivc-info-value {
    color: #e0e0e0;
}

/* Price Highlight - Premium Style */
.item-view-card .ivc-info-item.ivc-price {
    background: rgba(0, 0, 0, 0.02);
    border-right: 5px solid var(--theme-primary);
}

[data-user-color="dark"] .item-view-card .ivc-info-item.ivc-price {
    background: rgba(255, 255, 255, 0.05);
}

.item-view-card .ivc-info-item.ivc-price::before {
    display: none;
}

.item-view-card .ivc-info-item.ivc-price .ivc-info-label {
    color: var(--theme-primary);
}

.item-view-card .ivc-info-item.ivc-price .ivc-info-value {
    font-size: 24px;
    font-weight: 900;
    color: var(--theme-primary);
    display: flex;
    align-items: baseline;
    gap: 5px;
}

/* Section Labels (Small Headers inside details) */
.item-view-card .ivc-section-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--theme-primary);
    margin: 25px 0 15px;
    padding: 0 10px 8px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

[data-user-color="dark"] .item-view-card .ivc-section-label {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.item-view-card .ivc-section-label i {
    font-size: 16px;
    opacity: 0.8;
}

/* Tags Section */
.item-view-card .ivc-tags {
    margin-top: 10px;
}

.item-view-card .ivc-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 0;
}

.item-view-card .ivc-tag {
    background: var(--theme-highlight, rgba(0, 0, 0, 0.05));
    color: var(--theme-primary);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    transition: all 0.3s ease;
}

.item-view-card .ivc-tag:hover {
    background: var(--theme-primary);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Card Footer - Action Buttons */
.item-view-card .ivc-footer {
    padding: 25px 35px;
    border-top: 1px solid #f1f3f5;
    background: #f8f9fa;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-start;
    direction: rtl;
}

[data-user-color="dark"] .item-view-card .ivc-footer {
    background: rgba(0, 0, 0, 0.1);
    border-top-color: rgba(255, 255, 255, 0.05);
}

.item-view-card .ivc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.item-view-card .ivc-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.item-view-card .ivc-btn-primary {
    background: var(--theme-btn-bg, #3498db);
    color: #fff !important;
}

.item-view-card .ivc-btn-secondary {
    background: #6c757d;
    color: #fff !important;
}

.item-view-card .ivc-btn-info {
    background: #17a2b8;
    color: #fff !important;
}

.item-view-card .ivc-btn-danger {
    background: #e74c3c;
    color: #fff !important;
}

/* Image Column Modification for Detail View Buttons */
.ivc-image-col .ivc-btn {
    margin-top: 10px;
    justify-content: center;
}

/* Responsive Scaling */
@media (max-width: 991px) {
    .item-view-card .ivc-body {
        gap: 25px;
    }

    .item-view-card .ivc-image-col {
        flex: 0 0 200px;
    }

    .item-view-card .ivc-image-frame {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .item-view-card .ivc-body {
        flex-direction: column;
        align-items: stretch;
        padding: 25px;
    }

    .item-view-card .ivc-image-col {
        flex: none;
        width: 100%;
        margin-bottom: 30px;
    }

    .item-view-card .ivc-info-grid {
        grid-template-columns: 1fr;
    }

    .item-view-card .ivc-header {
        flex-direction: column;
        gap: 15px;
    }

    .item-view-card .ivc-footer {
        justify-content: center;
    }

    .item-view-card .ivc-item-title {
        text-align: center;
    }

    .item-view-card .ivc-item-title::after {
        right: 50%;
        transform: translateX(50%);
    }
}

/* ================================================
   Mobile Navbar Redesign - Hamburger Dropdown
   ================================================ */
@media (max-width: 768px) {

    /* Main navbar container - make it a positioned parent */
    .navbar.navbar-inverse.depart-nav {
        background: var(--theme-bg-gradient, linear-gradient(135deg, #1a5c38, #2d8a5e)) !important;
        border: none !important;
        border-radius: 12px !important;
        margin: 15px auto !important;
        width: 80% !important;
        padding: 0 !important;
        min-height: auto !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1000 !important;
        float: none !important;
    }

    .navbar.navbar-inverse.depart-nav .container {
        padding: 0 !important;
        width: 100% !important;
    }

    /* Navbar Header - title centered, toggle on left side */
    .navbar.navbar-inverse.depart-nav .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        float: none !important;
        margin: 0 !important;
        position: relative !important;
    }

    /* Hamburger toggle button - LEFT side (opposite sidebar) */
    .navbar.navbar-inverse.depart-nav .navbar-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px !important;
        margin: 8px 12px !important;
        padding: 8px 10px !important;
        float: none !important;
        position: absolute !important;
        left: 5px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .navbar.navbar-inverse.depart-nav .navbar-toggle i {
        color: #fff !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .navbar.navbar-inverse.depart-nav .navbar-toggle:hover,
    .navbar.navbar-inverse.depart-nav .navbar-toggle:focus {
        background: rgba(255, 255, 255, 0.25) !important;
    }

    /* Page title in mobile header - CENTERED */
    .navbar.navbar-inverse.depart-nav .nav-title-mobile {
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        padding: 12px 50px !important;
        height: auto !important;
        line-height: 1.4 !important;
        float: none !important;
        text-align: center !important;
        flex: 1 !important;
    }

    /* Hide the old title in the nav items */
    /* Definitively hide elements on mobile - MULTIPLE SELECTORS FOR SAFETY */
    .mobile-nav-hide,
    .navbar.navbar-inverse.depart-nav #printBtn,
    .navbar.navbar-inverse.depart-nav .fa-print,
    .navbar.navbar-inverse.depart-nav .break.pull-left:has(+ .mobile-nav-hide) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }

    /* ============================================
       Collapse dropdown - PREMIUM VIBRANT GLASS
       ============================================ */
    .navbar.navbar-inverse.depart-nav .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        /* Use a more vibrant theme glass */
        background: var(--theme-glass, rgba(26, 60, 97, 0.98)) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-bottom: 3px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
        max-height: 400px !important;
        overflow-y: auto !important;
        padding: 10px 0 !important;
        width: 100% !important;
        border-radius: 0 0 20px 20px !important;
        transition: all 0.3s ease-in-out !important;
    }

    /* Nav items - vertical list */
    .navbar.navbar-inverse.depart-nav .navbar-nav {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        width: 100% !important;
    }

    /* Each item */
    .navbar.navbar-inverse.depart-nav .navbar-nav>li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: none !important;
    }

    .navbar.navbar-inverse.depart-nav .navbar-nav>li:last-child {
        border-bottom: none !important;
    }

    /* Links and buttons */
    .navbar.navbar-inverse.depart-nav .navbar-nav>li>a,
    .navbar.navbar-inverse.depart-nav .navbar-nav>li>form>button,
    .navbar.navbar-inverse.depart-nav .navbar-nav>li>span:not(.nav-title-static) {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 13px 20px !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
        white-space: nowrap !important;
        line-height: 1.4 !important;
        justify-content: flex-end !important;
    }

    .navbar.navbar-inverse.depart-nav .navbar-nav>li>a:hover,
    .navbar.navbar-inverse.depart-nav .navbar-nav>li>form>button:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
    }

    /* Active item */
    .navbar.navbar-inverse.depart-nav .navbar-nav>li.active>a {
        background: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        font-weight: 700 !important;
        border-right: 3px solid rgba(255, 255, 255, 0.8) !important;
    }

    /* Icons in items */
    .navbar.navbar-inverse.depart-nav .navbar-nav>li>a i,
    .navbar.navbar-inverse.depart-nav .navbar-nav>li button i {
        font-size: 14px !important;
        width: 22px !important;
        text-align: center !important;
        opacity: 0.85 !important;
    }

    /* Hide separators */
    .navbar.navbar-inverse.depart-nav .break {
        display: none !important;
    }

    /* Emp name - compact */
    .navbar.navbar-inverse.depart-nav .emp-name {
        display: block !important;
    }

    .navbar.navbar-inverse.depart-nav .emp-name span {
        display: flex !important;
        padding: 10px 20px !important;
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        background: rgba(0, 0, 0, 0.08) !important;
        border: none !important;
        border-radius: 0 !important;
        justify-content: flex-end !important;
    }

    /* Hide the title li inside the dropdown */
    .navbar.navbar-inverse.depart-nav .navbar-nav>li:first-child .nav-title-static {
        display: none !important;
    }
}

/* Hide mobile brand on desktop */
.nav-title-mobile {
    display: none;
}

@media (max-width: 768px) {
    .nav-title-mobile {
        display: block !important;
    }
}

/* ============================================================ */
/*  FIX: Neutralize orphaned col- classes (no .row parent)      */
/*  These col- divs inside view-order/daily-report containers   */
/*  have extra padding/float from Bootstrap that breaks layout  */
/*  when there is no .row wrapper with negative margins.         */
/* ============================================================ */
.view-order>[class*='col-'],
.daily-report>[class*='col-'],
.view-order>form>[class*='col-'],
.view-order>.main-form>[class*='col-'] {
    padding-left: 0;
    padding-right: 0;
    float: none;
    width: 100%;
}

/* End of Global Styles */

/* =========================================
   Premium Profile Design System
   ========================================= */
.premium-profile-container {
    padding: 20px;
    padding-bottom: 80px;
    background: #f8f9fa;
    min-height: 100vh;
}

[data-user-color="dark"] .premium-profile-container {
    background: #1a1c1e;
}

/* Profile Header Card */
.profile-header-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

[data-user-color="dark"] .profile-header-card {
    background: #2c2e33;
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.profile-avatar-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-title-area h2 {
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 800;
    color: #2c3e50;
}

[data-user-color="dark"] .profile-title-area h2 {
    color: #fff;
}

.status-badge {
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.premium {
    background: #fff8e1;
    color: #f57c00;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

[data-user-color="dark"] .stat-card {
    background: #2c2e33;
    border-color: rgba(255, 255, 255, 0.05);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.stat-icon.blue {
    background: #e3f2fd;
    color: #1976d2;
}

.stat-icon.green {
    background: #e8f5e9;
    color: #2e7d32;
}

.stat-icon.red {
    background: #ffebee;
    color: #c62828;
}

.stat-icon.gold {
    background: #fff8e1;
    color: #f57c00;
}

.stat-content .label {
    display: block;
    font-size: 12px;
    color: #95a5a6;
    font-weight: 600;
    margin-bottom: 5px;
}

.stat-content .value {
    font-size: 18px;
    font-weight: 800;
    color: #2c3e50;
}

[data-user-color="dark"] .stat-content .value {
    color: #fff;
}

/* Tabs UI */
.profile-main-area {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

[data-user-color="dark"] .profile-main-area {
    background: #2c2e33;
}

.profile-tabs-header {
    background: #fcfcfc;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    padding: 0 20px;
}

[data-user-color="dark"] .profile-tabs-header {
    background: #34373c;
    border-color: rgba(255, 255, 255, 0.05);
}

.tab-trigger {
    padding: 20px;
    font-weight: 700;
    color: #7f8c8d;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tab-trigger:hover {
    color: #2c3e50;
}

.tab-trigger.active {
    color: var(--theme-primary, #3498db);
    border-bottom-color: var(--theme-primary, #3498db);
}

.tab-content-area {
    padding: 30px;
}

.tab-content-panel {
    display: none;
}

.tab-content-panel.active {
    display: block;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-item {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
}

[data-user-color="dark"] .info-item {
    background: rgba(0, 0, 0, 0.2);
}

.info-item i {
    color: #3498db;
    font-size: 18px;
}

.info-item .label {
    display: block;
    font-size: 12px;
    color: #95a5a6;
}

.info-item .text {
    font-weight: 700;
    color: #2c3e50;
}

[data-user-color="dark"] .info-item .text {
    color: #eee;
}

@media (max-width: 991px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .profile-header-card {
        flex-direction: column;
        text-align: center;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}

/* Premium Table Design */
.premium-table {
    border-collapse: separate;
    border-spacing: 0 10px;
    background: transparent !important;
}

.premium-table thead th {
    background: transparent;
    border: none;
    color: #95a5a6;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 20px;
}

.premium-table tbody tr {
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    transition: all 0.3s;
}

[data-user-color="dark"] .premium-table tbody tr {
    background: #34373c;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.premium-table tbody td {
    padding: 20px;
    border: none;
    vertical-align: middle;
}

.premium-table tbody tr td:first-child {
    border-radius: 12px 0 0 12px;
}

.premium-table tbody tr td:last-child {
    border-radius: 0 12px 12px 0;
}

.premium-table tbody tr:hover {
    transform: scale(1.005);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}

[data-user-color="dark"] .premium-table tbody tr:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    background-color: #dae4f3 !important;
}

/* Custom Animations */
.animate__animated {
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate__fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInUp {
    animation-name: fadeInUp;
}

/* Search Filters Premium Styling */
.search-filters-premium {
    background: #fdfdfd;
    padding: 8px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.search-filters-premium .filter-row {
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
    direction: rtl;
}

.search-filters-premium .filter-item {
    margin-bottom: 5px;
}

.search-filters-premium .form-control {
    height: 34px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    box-shadow: none;
    transition: all 0.3s ease;
    font-size: 13px;
}

.search-filters-premium .form-control:focus {
    border-color: #4361ee;
    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.1);
}

.search-filters-premium .btn-stk-exc {
    height: 34px;
    background: #4361ee;
    color: #fff !important;
    border-radius: 6px;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.3s;
    text-decoration: none !important;
}

.search-filters-premium .btn-stk-exc:hover {
    background: #304fd0;
}

.mt-10 {
    margin-top: 5px;
}

/* Dark theme support for filters */
.dark-theme .search-filters-premium {
    background: #25282c;
    border-color: #383b3e;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.dark-theme .search-filters-premium .form-control {
    background: #2c3034;
    border-color: #444;
    color: #eee;
}

.dark-theme .search-filters-premium .form-control:focus {
    border-color: #4361ee;
    background: #32363a;

}

/* =========================================
   TAX VERSION LOGIN STYLES (Professional Green)
   ========================================= */
.version-tax#login-page {
    background: linear-gradient(135deg, #0f5132, #198754) !important;
}

.version-tax .login-card {
    background: rgba(255, 255, 255, 1);
    border-top: 6px solid #0f5132;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.version-tax .login-form .form-title {
    color: #0f5132;
    border-bottom-color: #eee;
}

.version-tax .btn-login {
    background: #0f5132;
    box-shadow: 0 4px 15px rgba(15, 81, 50, 0.4);
}

.version-tax .btn-login:hover {
    background: #0a3d25;
    transform: translateY(-2px);
}

.version-tax .input-group-modern i {
    color: #0f5132;
}

.version-tax .input-group-modern input:focus {
    border-color: #198754;
}

/* Global Print Styles to hide navigation and buttons */
@media print {
    nav, 
    .navbar, 
    .depart-nav, 
    .fixed-menu, 
    .navbar-inverse,
    .hidden-print,
    .btn-export-nav,
    .no-print {
        display: none !important;
    }
}

/* =========================================
   Messenger Chat Area Additions
   ========================================= */

.div_view_chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background-color: #efeae2;
}

.messages-wrapper {
    flex: 1;
    padding: 20px 5%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    background-image: radial-gradient(#d1d7db 1px, transparent 1px);
    background-size: 20px 20px;
}

.messages-wrapper::-webkit-scrollbar {
    width: 6px;
}
.messages-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
}

.date-divider {
    text-align: center;
    margin: 15px 0;
    clear: both;
}
.date-divider span {
    background-color: #fff;
    color: #54656f;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 0.5px rgba(11,20,26,.13);
    display: inline-block;
}

.chat-bubble {
    max-width: 65%;
    margin-bottom: 2px;
    padding: 6px 7px 8px 9px;
    border-radius: 7.5px;
    position: relative;
    font-size: 14.2px;
    line-height: 19px;
    color: #111b21;
    box-shadow: 0 1px 0.5px rgba(11,20,26,.13);
    word-wrap: break-word;
    display: inline-block;
}

.chat-bubble::after {
    content: "";
    display: block;
    clear: both;
}

.chat-bubble + .chat-bubble {
    margin-top: 2px;
}
.chat-bubble.sent + .chat-bubble.received,
.chat-bubble.received + .chat-bubble.sent {
    margin-top: 12px;
}

/* SENT: Left (Green) */
.chat-bubble.sent {
    background-color: #d9fdd3;
    border-top-left-radius: 0;
    margin-right: auto; /* Push left in RTL */
    margin-left: 0;
}
.chat-bubble.sent::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #d9fdd3;
}

/* RECEIVED: Right (White) */
.chat-bubble.received {
    background-color: #fff;
    border-top-right-radius: 0;
    margin-left: auto; /* Push right in RTL */
    margin-right: 0;
}
.chat-bubble.received::before {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #fff;
}

.message-text {
    display: inline;
}
.message-text::after {
    content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}

.message-time {
    float: left;
    font-size: 11px;
    color: #667781;
    margin-top: 4px;
    margin-right: 15px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.chat-input-toolbar {
    height: 62px;
    background-color: #f0f2f5;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
    border-top: 1px solid #d1d7db;
}

.chat-input-toolbar input {
    flex: 1;
    height: 42px;
    border-radius: 8px;
    border: none;
    padding: 9px 12px 11px;
    font-size: 15px;
    background: #fff;
    outline: none;
    color: #111b21;
}

.chat-input-toolbar input::placeholder {
    color: #8696a0;
}

.chat-input-toolbar button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: #00a884;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    outline: none;
}

.chat-input-toolbar button:hover {
    background-color: #018f70;
}

.fa-check-double {
    color: #53bdeb; /* Blue read receipt ticks */
}

/* Sticky table headers for purchase orders */
#tablebarcode {
    border-collapse: separate;
}
#tablebarcode thead th,
#tablebarcode tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 101;
}
#tablebarcode tr:nth-child(2) th {
    position: sticky;
    top: 28px; /* height of the first header row */
    z-index: 100;
}

/* ========================================================== */
/* MODERN SIDEBAR & PREMIUM NAVIGATION UPGRADE                 */
/* ========================================================== */

/* Dark modern theme overrides for the fixed menu (sidebar) */
.fixed-menu {
    background-color: #0b1319 !important;
    width: 280px !important;
    padding: 15px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: none !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4) !important;
}

/* Make sure the text direction and layout is fully responsive and matches the premium look */
.links-nav {
    margin-top: 45px !important;
    width: 100% !important;
    float: none !important;
}

.links-nav > li {
    width: 100% !important;
    float: none !important;
    margin-bottom: 6px !important;
}

/* Menu item links */
.links-nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 8px 16px !important;
    color: #b1b9c1 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.1s ease-out !important;
    text-decoration: none !important;
}

/* Hover and active states */
.links-nav > li > a:hover,
.links-nav > li.open > a,
.links-nav > li.open > a:focus,
.links-nav > li.open > a:hover {
    background-color: #17242d !important;
    color: #ffffff !important;
    border-right: 4px solid var(--hover-border-color, #3b82f6) !important;
    padding-right: 12px !important; /* Adjust padding for the border */
    text-decoration: none !important;
}

/* Active status indicator */
.links-nav > li > a.active {
    background-color: #17242d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-right: 4px solid var(--hover-border-color, #ff5b5b) !important;
}

/* Adjust nested icons inside links */
.links-nav > li > a .menu-icon {
    font-size: 18px !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    transition: transform 0.2s ease !important;
    order: 3; /* Render on the far right in flex */
}

.links-nav > li > a span.menu-text {
    flex-grow: 1 !important;
    text-align: right !important;
    order: 2; /* Render in the middle */
}

.links-nav > li > a .arrow-icon {
    font-size: 12px !important;
    opacity: 0.6 !important;
    transition: transform 0.2s ease !important;
    order: 1; /* Render on the far left */
}

/* Rotate arrow when menu is open */
.links-nav > li.open > a .arrow-icon {
    transform: rotate(-90deg) !important;
}

/* Dropdown Content / Flyout sub-menus */
.links-nav .dropdown-menu {
    background-color: #0f1a22 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    width: 280px !important;
    left: 265px !important; /* Positioned relative to dropdown (15px padding + 265px = 280px) */
    top: 50% !important; /* Center vertically relative to parent link */
    transform: translateY(-50%) !important;
    max-height: calc(100vh - 40px) !important; /* Use almost full viewport height for scrolling if needed */
    overflow-y: auto !important;
}

/* Custom scrollbar for the sub-menu dropdowns */
.links-nav .dropdown-menu::-webkit-scrollbar {
    width: 4px;
}
.links-nav .dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}
.links-nav .dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}


.links-nav .dropdown-menu > li > a {
    color: #a0aec0 !important;
    padding: 6px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    transition: all 0.08s ease-out !important;
}

.links-nav .dropdown-menu > li:last-child > a {
    border-bottom: none !important;
}

.links-nav .dropdown-menu > li > a:hover {
    background-color: #17242d !important;
    color: #ffffff !important;
    padding-right: 25px !important; /* Slide-in effect */
}

.links-nav .dropdown-menu > li.active > a {
    background-color: #17242d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.links-nav .dropdown-menu .divider {
    background-color: rgba(255, 255, 255, 0.08) !important;
    margin: 4px 0 !important;
}