/* ==========================================================================
   TanzeemMS Responsive UI Enhancements (RTL & Mobile-First Responsive CSS)
   ========================================================================== */

/* Prevent unintended horizontal page overflow */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Responsive Tables, Report Documents & NOC Certificates
   -------------------------------------------------------------------------- */
.table-responsive,
div.k-grid,
.k-grid-content,
div.k-pager-wrap,
table.Reports,
table.paginated,
table.paginated1,
#table1,
#table2,
#Resulttable,
.printarea,
#printarea,
.slip,
.containerd,
.table-Details,
.noc-letter-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.noc-letter-container {
    margin-right: 160px;
}

@media (max-width: 991px) {
    div[style*="margin-right: 160px"],
    div[style*="margin-right:160px"],
    div[style*="margin-right"],
    .noc-letter-container,
    .printarea,
    #printarea,
    .slip,
    .containerd {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

table.Reports, table.paginated, table.paginated1, #table1, #table2, #Resulttable, table.ListTable, table.ListTable2 {
    display: table;
}

/* Eliminate Horizontal Scrolling on Mobile Devices (< 768px) */
@media (max-width: 767px) {
    .printarea,
    #printarea,
    .slip,
    .noc-letter-container,
    .containerd,
    .table-Details {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 5px 2px !important;
        box-sizing: border-box !important;
    }

    table#print,
    table.ListTable,
    table.ListTable2,
    table.Reports,
    table.paginated,
    #table1,
    #table2,
    #Resulttable {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        word-break: break-word !important;
    }

    table.ListTable2 td,
    table.ListTable2 th,
    table.ListTable td,
    table.ListTable th {
        padding: 4px 2px !important;
        font-size: 13px !important;
        word-wrap: break-word !important;
    }

    table.ListTable2 input,
    table.ListTable2 select,
    table.ListTable input,
    table.ListTable select {
        width: 100% !important;
        min-width: 0 !important;
        padding: 2px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    .headers td {
        width: auto !important;
    }

    .test:before {
        display: none !important;
    }

    #startTextContainer {
        font-size: 15px !important;
        line-height: 1.4 !important;
        display: block !important;
        word-break: break-word !important;
    }
}

/* Kendo Grid Toolbar and Pager Responsiveness */
.k-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px !important;
}

.k-pager-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
    height: auto !important;
    padding: 8px 5px !important;
}

.k-pager-wrap .k-pager-nav,
.k-pager-wrap .k-pager-numbers,
.k-pager-wrap .k-dropdown {
    margin: 2px !important;
}

/* --------------------------------------------------------------------------
   2. Responsive Popups, Modals, & SweetAlert Dialogs
   -------------------------------------------------------------------------- */
#popup_box, #popup_box1 {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 92vw !important;
    max-width: 780px !important;
    height: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    z-index: 10000 !important;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.swal-modal, .swal2-popup {
    max-width: 92vw !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    #popup_box, #popup_box1 {
        width: 95vw !important;
        padding: 12px !important;
        top: 50% !important;
    }

    .swal2-html-container, .swal-content, .swal-text {
        font-size: 1.2em !important;
    }

    .swal2-popup {
        width: 95vw !important;
        padding: 15px !important;
    }
}

/* --------------------------------------------------------------------------
   3. Header & Navigation Bar
   -------------------------------------------------------------------------- */
#header #logo img {
    max-height: 38px;
    width: auto;
}

@media (max-width: 767px) {
    #header {
        padding: 0 10px;
    }

    .login-info span a {
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   4. Form Layouts & Inputs Responsiveness & Right-Aligned Labels
   -------------------------------------------------------------------------- */
/* Global Right Alignment for Form Labels across all devices */
label,
.label,
.control-label,
.smart-form .label,
.smart-form label,
.form-group label,
fieldset label,
.input-group-addon,
.k-label,
legend {
    text-align: right !important;
    direction: rtl !important;
    display: inline-block;
}

/* Header & Profile Dropdown Menu Right Alignment & Anchor Positioning */
.header-dropdown-list .dropdown-menu,
#header .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 2px !important;
    z-index: 1000 !important;
}

.dropdown-menu {
    text-align: right !important;
    direction: rtl !important;
}

.dropdown-menu > li > a {
    text-align: right !important;
    direction: rtl !important;
    padding: 6px 15px !important;
}

.dropdown-menu > li > a > i,
.dropdown-menu > li > a > .fa {
    float: right !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    line-height: inherit;
}

.form-group {
    margin-bottom: 15px;
}

.form-control, select, textarea, input[type="text"], input[type="number"], input[type="password"], input[type="email"] {
    max-width: 100%;
    box-sizing: border-box;
}

/* Responsive Grid Form Column Stacking */
@media (max-width: 767px) {
    .smart-form section[class*="col-"],
    .smart-form section.col,
    .smart-form section.col-1,
    .smart-form section.col-2,
    .smart-form section.col-3,
    .smart-form section.col-4,
    .smart-form section.col-5,
    .smart-form section.col-6 {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
    }

    .form-group label {
        display: block;
        width: 100% !important;
        text-align: right;
        margin-bottom: 5px;
    }

    .form-inline .form-group,
    .form-inline .form-control {
        width: 100% !important;
        display: block !important;
        margin-bottom: 10px;
    }

    table#table1 td input.reren, table#table1 td input.Crdt, table#table1 td input.dedt, 
    table#table1 td input.Amount, table#table1 td input.Amount1, table#table1 td input.MultiplyBy, 
    table#table1 td input.hiddentotal, table#table1 td input.dblDebitAmount,
    table#table2 td input.reren, table#table2 td input.Amount, table#table2 td input.Amount1, 
    table#table2 td input.MultiplyBy, table#table2 td input.hiddentotal, table#table2 td input.dblDebitAmount {
        width: 100% !important;
        min-width: 70px;
    }

    table#table1 td input.desig, table#table1 td input.Amounttotal, table#table1 td input.Amounttotal1 {
        width: 100% !important;
        min-width: 100px;
    }
}

/* --------------------------------------------------------------------------
   5. Responsive Cards & Dashboard Widgets
   -------------------------------------------------------------------------- */
.card, .panel, .jarviswidget {
    margin-bottom: 20px;
    max-width: 100%;
}

.topper-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.topper-card-item {
    flex: 1 1 280px;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   6. Touch Target Accessibility & Button Scaling
   -------------------------------------------------------------------------- */
.btn, .btns, button, input[type="button"], input[type="submit"], input[type="reset"] {
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

@media (max-width: 480px) {
    .btn, .btns {
        padding: 8px 12px !important;
        font-size: 14px !important;
        width: 100%;
        margin-bottom: 5px;
    }

    .btn-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-group > .btn {
        width: 100% !important;
        border-radius: 4px !important;
        margin-bottom: 4px;
    }
}

/* --------------------------------------------------------------------------
   7. RTL & Typography Scaling
   -------------------------------------------------------------------------- */
body.smart-rtl {
    direction: rtl;
    text-align: right;
}

@media (max-width: 767px) {
    h1, .h1 { font-size: 24px !important; }
    h2, .h2 { font-size: 20px !important; }
    h3, .h3 { font-size: 18px !important; }
    .k-link { font-size: 16px !important; }
}

/* Center Login Container vertically in middle of screen on Desktop / Laptop screens */
@media (min-width: 768px) {
    html body div.container,
    html body div.container.log-in {
        top: 0 !important;
        margin: 0 auto !important;
        transform: none !important;
    }
}

/* High-Specificity Mobile Vertical (UP/DOWN Split) Login Page Overrides */
@media (max-width: 767px) {
    html body div.container,
    html body div.container.log-in {
        position: relative !important;
        width: 100% !important;
        max-width: 380px !important;
        height: auto !important;
        margin: 0 auto !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 0 !important;
        background-color: #999ede !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html body div.container .box,
    html body div.container.log-in .box,
    html body div.container .box:before,
    html body div.container .box:after {
        display: none !important;
    }

    html body div.container div.container-forms,
    html body div.container.log-in div.container-forms {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html body div.container div.container-info,
    html body div.container.log-in div.container-info {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding: 18px 15px 12px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html body div.container div.container-info div.info-item,
    html body div.container.log-in div.container-info div.info-item {
        display: none !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        opacity: 1 !important;
        left: 0 !important;
        top: 0 !important;
    }

    html body div.container:not(.log-in) div.container-info div.info-item:nth-child(2) {
        display: block !important;
        opacity: 1 !important;
    }

    html body div.container.log-in div.container-info div.info-item:nth-child(1) {
        display: block !important;
        opacity: 1 !important;
    }

    html body div.container div.container-form,
    html body div.container.log-in div.container-form {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 340px !important;
        background-color: #ffffff !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: none !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    html body div.container div.container-form div.form-item,
    html body div.container.log-in div.container-form div.form-item,
    html body div.container div.container-form div.form-item.log-in,
    html body div.container.log-in div.container-form div.form-item.log-in,
    html body div.container div.container-form div.form-item.sign-up,
    html body div.container.log-in div.container-form div.form-item.sign-up {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
    }

    html body div.container:not(.log-in) div.container-form div.form-item.log-in {
        display: block !important;
        opacity: 1 !important;
        left: 0 !important;
    }

    html body div.container:not(.log-in) div.container-form div.form-item.sign-up {
        display: none !important;
        opacity: 0 !important;
        left: 0 !important;
    }

    html body div.container.log-in div.container-form div.form-item.log-in {
        display: none !important;
        opacity: 0 !important;
        left: 0 !important;
    }

    html body div.container.log-in div.container-form div.form-item.sign-up {
        display: block !important;
        opacity: 1 !important;
        left: 0 !important;
    }
}