/* ============================================================
   SAFFRON INVENTORY — site.css
   Ported from Angular CSS: login, header, buttons, form,
   models, table, styles, bootstrap-custom + BS5 patches
   ============================================================ */

/* ── Base ── */
html, .height-wrap { min-height: 100%; }
body {
    font-family: Arial;
    text-transform: capitalize;
    line-height: 19px;
    background: #212a2f;
    color: #000;
    height: 100%;
    letter-spacing: 1px;
    font-size: 12px;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-weight: normal;
}
* { font-family: Arial; }
ul li { list-style-type: none; }
ul { margin: 0; padding: 0; }
a { color: #e86801; text-decoration: underline; font-weight: bold; cursor: pointer; }
a:hover, a:hover span, a:hover::before { text-decoration: none; }
hr { border-top: 1px solid #cac9c9; margin-top: 12px; margin-bottom: 12px; }
.p-top { padding-top: 5px; }
.clearfix { clear: both; }
.no-padding { padding-left: 0 !important; padding-right: 0 !important; }
.d-flex { display: flex !important; }

/* ── Header ── */
header { background: #37404a; min-height: 60px; }
header .logo img { height: 30px; margin-top: 15px; }
header .btn-link { color: #fff; }

/* Logo panel */
.logo-panel { background: #37404a; }
.logo { margin-top: 13px; display: inline-block; margin-left: 10px; }
.logo-img { height: 30px; margin-top: 15px; margin-left: 10px; }

/* Head info (top-right user + logout) */
ul.head-info { float: right; height: 58px; margin-right: 23px; list-style: none; }
ul.head-info li { float: left; margin-right: 12px; line-height: 58px; font-size: 12px; color: #fff; }
ul.head-info li:last-child { margin-right: 10px; margin-left: 26px; }
ul.head-info li span { font-size: 17px; }
.head-info [class^="icon-"] { color: #fff; }
.icon-logout::before { position: absolute; color: #ffa256; font-size: 16px; top: 50%; margin-top: -7px; left: -20px; }
.icon-logout span { color: #ffa256 !important; font-size: 12px !important; }
.icon-logout { position: relative; text-decoration: none; }
.icon-add-new { position: relative; text-decoration: none; }
.icon-add-new span { font-size: 12px !important; color: #ff974a; font-weight: bold; }
.note-info { position: relative; }
.note-info .icon-bell { line-height: 58px; }
.mright-n { margin-right: 0 !important; }

/* ── Sidebar / Menu ── */
.menu {
    background: #121519;
    border-right: 2px solid #ff8c2e;
    padding-top: 26px;
    min-height: 768px;
}
.menu > ul { margin: 0; padding: 0; }
.menu > ul > li {
    display: block;
    color: #fff;
    position: relative;
    cursor: pointer;
    width: 100%;
    border-bottom: 1px solid #1e2329;
}
.menu > ul > li > a,
.menu > ul > li > .submenu-toggle {
    display: flex;
    align-items: center;
    padding: 14px 15px;
    color: #e2e2e2;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 1px;
    width: 100%;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    text-transform: capitalize;
}
.menu > ul > li:hover,
.menu > ul > li.active-menu { background: #373f49; }
.menu > ul > li > a:hover,
.menu > ul > li > .submenu-toggle:hover { color: #ff8c2e; text-decoration: none; }
.menu > ul > li > span[class^="icon-"],
.menu > ul > li > span[class*=" icon-"] {
    position: absolute;
    font-size: 20px;
    left: 15px;
    top: 13px;
    color: #e2e2e2;
    pointer-events: none;
}
.menu > ul > li > a,
.menu > ul > li > .submenu-toggle { padding-left: 45px; }

/* Submenu accordion */
.submenu { display: none; background: #0d0f12; list-style: none; margin: 0; padding: 0; }
.has-submenu.open > .submenu { display: block; }
.submenu > li { border-bottom: 1px dashed #1e2329; }
.submenu > li > a {
    display: block;
    padding: 10px 15px 10px 48px;
    color: #aaa;
    font-size: 11px;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.submenu > li > a:hover { color: #ff8c2e; background: #1a1f27; text-decoration: none; }
.submenu > li.active-sub > a { color: #ff8c2e; }

/* Submenu toggle chevron */
.submenu-toggle::after {
    content: '\ea3e';
    font-family: 'icomoon';
    font-size: 10px;
    margin-left: auto;
    padding-left: 8px;
    display: inline-block;
    transition: transform 0.2s;
    color: #666;
}
.has-submenu.open > .submenu-toggle::after { transform: rotate(180deg); }

/* ── Layout panels ── */
.menu-panel { width: 20% !important; }
.detail-panel { width: 80% !important; }
.logo-panel.menu-panel { width: 20% !important; background: #37404a; }

/* ── Body container ── */
.body-container {
    padding: 1px 20px 40px 20px;
    background: #ececec;
    min-height: 768px;
}

/* ── Headings ── */
h1 {
    border-bottom: 1px solid #cac9c9;
    padding-bottom: 5px;
    margin-bottom: 30px;
    font-size: 23px;
    font-weight: normal;
    color: #373f49;
}
h1 span { font-size: 15px; color: #909090; display: block; line-height: 20px; font-weight: normal; }
h1 span.head-arrow { font-size: 20px; display: inline; }
h2, .h2 { font-size: 17px; font-weight: bold; color: #373f49; border-bottom: 1px solid #dadada; padding-bottom: 5px; margin-top: 20px; margin-bottom: 10px; text-transform: uppercase; }
h3, .h3 { font-size: 16px; color: #373f49; border-bottom: 1px solid #dadada; padding-bottom: 5px; }
h2 label { font-size: 13px; margin-top: -8px; }
.heading-divide { border-bottom: 1px solid #cac9c9; padding-bottom: 16px; margin-bottom: 30px; font-size: 23px; font-weight: normal; }
.heading-divide span { font-size: 15px; color: #909090; display: block; line-height: 20px; font-weight: normal; }
.has-border { border-bottom: 1px solid #cac9c9; padding-bottom: 10px; }

/* ── Login ── */
.login-container {
    height: 100%;
    width: 100%;
    position: absolute;
    background: url('/Content/images/login-bg.jpg') 0 0 no-repeat;
    background-size: cover;
}
.login-box {
    border: 1px solid #535c61;
    color: #fff;
    background: rgba(121, 121, 121, 0.7);
    padding: 22px 28px 10px 28px;
    box-shadow: 0 0 35px -14px #333;
    width: 374px;
    margin: 200px auto 0 auto;
    border-radius: 5px;
}
.login-box h2 { margin-top: 10px; margin-bottom: 14px; color: #fff; font-size: 13px; border-bottom: none; }
.login-box a { color: #fff; }
.login-box .form-control { max-width: 100%; margin-bottom: 4px; border-radius: 4px; border: 1px solid #000000; }
.login-box .text-danger {
    display: block;
    color: #ff8080 !important;
    font-size: 12px !important;
    font-weight: 500;
    margin-bottom: 10px;
}
.login-logo {
    margin-top: -22px;
    text-align: center;
    background: #283238;
    margin-left: -28px;
    margin-right: -28px;
    border-radius: 5px 5px 0 0;
    margin-bottom: 14px;
}
.login-logo img { padding: 10px 0; }
.forgot-pass { line-height: 34px; }

/* ── Buttons ── */
.btn {
    display: inline-block;
    margin-bottom: 5px;
    height: 26px;
    vertical-align: middle;
    transform: none;
    box-shadow: 0 0 1px transparent;
    position: relative;
    transition-duration: 0.3s;
    transition-property: transform;
    padding: 4px 15px;
    cursor: pointer;
    margin-right: 5px;
    outline: none !important;
    border-radius: 4px;
    font-size: 12px;
}
.btn:hover, .btn:focus, .btn:active { transform: translateY(-2px); }
.btn:last-child { margin-right: 0; }
.btn-default { color: #fff; background: #e86800; border: 1px solid #f87c18; }
.btn-default:hover { color: #fff; background: #d05a00; border-color: #e86800; }
.btn-saffron { color: #fff !important; background-color: #e86800; border-color: #e86800; }
.btn-saffron:hover, .btn-saffron:focus, .btn-saffron:active { color: #fff !important; background-color: #c95e00; border-color: #c95e00; }
.picker-search-btn { background-color: #e86800 !important; border-color: #e86800 !important; color: #fff !important; }
.picker-search-btn:hover, .picker-search-btn:focus { background-color: #c95e00 !important; border-color: #c95e00 !important; }
.picker-confirm-btn { background-color: #e86800 !important; border-color: #e86800 !important; color: #fff !important; }
.picker-confirm-btn:hover, .picker-confirm-btn:focus { background-color: #c95e00 !important; border-color: #c95e00 !important; }
.btn-primary { color: #fff; background-color: #a39b98; border-color: #a39b98; transition: 1s; }
.btn-info { color: #000; background-color: #ffffff; border: 1px solid #dadada; }
.btn-link { color: #e86801; font-weight: bold; text-decoration: none; height: 24px; padding: 6px 4px; margin-right: 0; border: none; background: none; }
.btn-link:hover, .btn-link:visited, .btn-link:focus { text-decoration: none; color: #ffa256; }
.btn-block { display: block; width: 100%; }

/* ── Forms ── */
.form-control {
    height: 26px;
    font-size: 11px;
    display: inline-block;
    border: 1px solid #b1b1b1;
    max-width: 300px;
    border-radius: 4px;
    color: #797979;
    padding: 6px 8px;
}
.form-control.fluid { max-width: 100%; }
.form-control:focus { box-shadow: none !important; }
.form-group { margin-bottom: 10px; }
label { color: #000; font-weight: normal; font-size: 12px; }
.form-ico {
    position: absolute;
    right: 17px;
    bottom: 12px;
    border-radius: 3px;
    font-size: 11px !important;
    width: 26px;
    color: #fff !important;
    cursor: pointer;
    text-align: center;
    height: 22px;
    background: #e86801;
    line-height: 23px;
}
.showfilters { display: block; margin-top: 15px; }
.hidefilters { display: none; }
.showfilters .form-control { width: 100% !important; max-width: 100% !important; }
.showfilters .form-group { position: relative; }
.showfilters .form-group .form-ico { right: 2px; bottom: 2px; }
.count-input { width: 100px !important; text-align: center; }
.select-width { width: auto !important; display: inline-block; }
.has-icon { padding-left: 27px; }
.margin_tpm { margin-top: -2px; padding-left: 0 !important; }
.has-icon span[class^="icon-"] { position: absolute; left: 5px; font-size: 15px; top: 10px; color: #333; }
.date input { max-width: 140px; font-size: 12px; }
.date input::placeholder { color: #fff !important; }
.date .form-control { background: #e07f3b; color: #fff; border: none; }
.dropdown-menu-list { display: none; }
.dropdown-menu-list li { cursor: pointer; padding: 10px 0 10px 52px; border-bottom: 1px dashed #627486; color: #fff; font-size: 15px; font-weight: normal; background: #3e4d5a; }
.dropdown-menu-list li:hover { background: #2f3d48; }
.discount-input { max-width: 154px; margin-top: 5px; }
.w-auto { width: auto !important; }
.has-btn { line-height: 28px; }
.radio, .checkbox { padding-left: 20px; }
.checkbox-inline, .radio-inline { line-height: 22px; }
.add-details { padding-bottom: 5px; border-bottom: 1px solid #292b2c; }

/* Input group */
.input-group-text { font-size: 12px; }

/* ── Tables ── */
table { font-size: 11px; }
.table > thead > tr > th,
.table > thead > tr > td { background: #feb200; color: #fff; }
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th { border: 1px solid #f5f5f5; border-bottom-width: 1px; font-weight: normal; }
tbody > tr { background: #f5f5f5; }
td, th { vertical-align: middle !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f5f5f5; }
table > tbody > tr > td { color: #333; vertical-align: top !important; }
table.table-striped > tbody > tr > td { color: #4d5e6e; border-top: 0 !important; border-bottom: 0 !important; }
.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: 4px; }
table > thead > tr > td { font-weight: bold; }
table p { margin: 0 0 6px; }
.table.no-border > tbody > tr > td { border: none; }
table.no-td-border td { border: none !important; }
.reference-table { font-size: 17px; }
.valign-top td { vertical-align: top !important; }
.table-container { width: 100%; overflow-x: auto; }
table.bold { font-weight: bold; }
.borderless > tbody > tr > td,
.borderless > tbody > tr > th,
.borderless > tfoot > tr > td,
.borderless > tfoot > tr > th,
.borderless > thead > tr > td,
.borderless > thead > tr > th { border: none; }
.p-detail-tbl td { padding-bottom: 8px; }
.table-form-panel { margin-bottom: 12px; }
table [class^="icon-"],
table [class*=" icon-"] { font-size: 24px; color: #888; }

/* Table panels */
.table-panel { width: 100%; max-height: 385px; overflow-x: auto; overflow-y: auto; margin-bottom: 0; }
.table-panel .table { margin-bottom: 0; }
.table-panelreport { width: 100%; max-height: 685px; overflow-x: auto; overflow-y: auto; margin-bottom: 0; }
.table-panelreport .table { margin-bottom: 0; }

/* Table row highlight */
.payment-ndone { background: red; }
.buyers-pre-hightlight { background: #dadada; }
.product-hightlight { background: #ffffff; }

/* ── Modals ── */
.modal-body {
    position: relative;
    padding: 15px;
    max-height: 580px;
    overflow: auto;
    background: #f5f5f5;
}
.modal-body .table-panel { width: 100%; overflow-x: auto; overflow-y: auto; max-height: 285px; margin-bottom: 15px; }
.modal-body .table-panelreport { width: 100%; overflow-x: auto; overflow-y: auto; max-height: 285px; margin-bottom: 15px; }
.modal-title { font-weight: bold; }
.modal-footer { text-align: left; }
.popup-form-panel { margin: 0 0 10px; }
.model-panel .table > thead > tr > th { background: #feb200; }
.close { font-size: 27px; opacity: .9; }

/* ── Dashboard boxes ── */
.dashboard-boxes-panel .col-md-2 { width: 20% !important; }
.dashboard-boxes {
    background: #ffb200;
    margin-top: 10px;
    transition: 1s;
    border: 1px solid #fbfbfb;
    width: 100%;
    padding: 10px;
    box-shadow: 0 4px 8px -3px #888888;
    min-height: 127px;
    cursor: pointer;
}
.dashboard-boxes:hover { background: #ef9d0d; color: #fff; border: 1px solid #ef9d0d; }
.dashboard-boxes:hover h2,
.dashboard-boxes:hover p,
.dashboard-boxes:hover span { color: #fff; }
.dashboard-boxes span { position: absolute; transition: 0.5s; font-size: 34px; right: 19px; top: 13px; color: #000; }
.dashboard-boxes h2 { margin-top: 0; transition: 0.5s; font-weight: bold; color: #000; font-size: 15px; line-height: 23px; margin-bottom: 0; min-height: 44px; border-bottom: none; }
.dashboard-boxes p { margin: 16px 0 10px 0; transition: 0.5s; color: #fff; font-size: 12px; }

/* ── Order process cards ── */
.order-process { border: 1px solid #dadada; color: #444; text-align: center; transition: 0.5s; padding: 29px 20px 8px 20px; min-height: 200px; cursor: pointer; width: 100%; background: #fff; }
.order-process:hover { background: #fe9a22; color: #fff; }
.order-process h2 { margin-top: 7px; margin-bottom: 4px; font-size: 23px !important; font-weight: normal; }
.order-process p { line-height: 20px; }

/* ── Tabs ── */
.tab-content { border: 1px solid #dadada; padding: 20px; background: #fbfbfb; border-top: none; margin-bottom: 30px; }
.tab-content h3 { margin-top: 0; margin-bottom: 15px; }
.nav-tabs > li > a { font-size: 13px; font-weight: bold; text-transform: uppercase; border: none; color: #111; padding: 9px 6px; display: block; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { color: #ffffff; cursor: pointer; background: #ffb200; }
.nav-tabs > li > a:hover { background: none; border: none; }
.nav-tabs { margin-top: 25px; }
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus { border: 0; }
.nav-tabs.nav-justified > li > a { height: 34px; text-decoration: none; }

/* ── Product details panel ── */
.product-details td { color: #000; padding-top: 30px !important; }
.product-details h2 { margin-top: 0 !important; }
.product-details .form-control { height: 26px; padding: 2px 12px; color: #222; }
.product-details .btn { padding: 4px 10px; cursor: pointer; font-size: 13px; }
.product-details b { line-height: 26px; }
.product-details-panel table { border: 1px solid #dadada; }
.product-details-panel table td { color: #000; }

/* ── Shipping details ── */
.shipping-details .form-control { height: 26px; padding: 2px 12px; color: #222; text-align: right; margin-left: 50px; width: auto; }
.shipping-details .row { margin-bottom: 5px; }
.shipping-details .text-bold { margin-top: 25px; }
.shipping-details { margin-bottom: 25px; }

/* ── Order panels ── */
.order-detail-panel { background: #f5f5f5; padding: 15px; float: left; margin: 0 15px; width: 50%; }
.order-detail-panel h2 { font-size: 15px !important; font-weight: normal; margin-top: 4px; margin-bottom: 24px; }
.order-detail-panel p { line-height: 24px; font-size: 13px; }
.order-detail-container { display: flex; }
.order-details-p table td { vertical-align: top !important; }
.order-viewh { color: #761c19; font-size: 20px; padding-bottom: 10px; border-bottom: 1px solid #823332; }

/* ── Thumbnails ── */
.thumbnail_parent { background: #fff; border: 1px solid #a5a5a5; position: relative; height: 100px; width: 100px; display: inline-block; cursor: copy; }
.thumbnail_parent [type="checkbox"] { position: absolute; z-index: 99; left: 2px; top: -1px; }
.thumbnail-img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; max-width: 94px; max-height: 94px; }
.img-thumbnail { max-width: 100px; max-height: 100px; padding: 2px; cursor: copy; }
.img-thumbnail:hover { max-width: 100px; max-height: 100px; padding: 1px; cursor: copy; border: none; }
.Delivery-Challan .thumbnail_parent { margin-right: 15px; }

/* ── Misc utilities ── */
.divider { height: 1px; background: #d0d0d0; margin: 15px 0; }
.text-bold { font-weight: bold; }
.text-highlight { color: #ea6c06; }
.highlight { color: #761c19; }
.head-line { text-align: center; padding-bottom: 10px; margin-top: 15px; margin-bottom: 30px; }
.button-container { border-top: 1px solid #cac9c9; padding-top: 10px; text-align: right; margin-top: 15px; }
.user-id { margin-top: 20px; font-weight: bold; }
.user-id span { padding: 6px 15px; color: #cc5b00; background: #ffffff; border-radius: 18px; margin-left: 6px; border: 1px solid #dadada; }
ul.active-ico li span { font-size: 18px; color: #464646; }
ul.active-ico li { display: inline-block; margin-right: 8px; border-right: 1px solid #dadada; padding-right: 10px; }
ul.active-ico li:last-child { border-right: none; }
.total-count { font-size: 17px; padding: 6px 20px; border-radius: 19px; border: 1px solid #bdbdbd; text-align: right; display: block; }
.head-line { text-align: center; }
.invoice-panel { border: 1px solid #d6d6d6; padding: 10px; margin-top: 40px; }
.invoice-panel h2 { margin-top: 10px; }
.add-details { padding-bottom: 5px; border-bottom: 1px solid #292b2c; }
.search-table-mr { margin-top: 20px; }

/* Search input icon */
.dataTables_filter [type="search"],
.search_input { background: url('/Content/images/search_input.png') 96% 50% no-repeat #fff; padding-right: 34px; }

/* Well (Bootstrap 3 carry-over) */
.well { padding: 15px 19px; }

/* Tab button panel */
.tab-btn-panel { margin-top: 20px; width: 40%; padding-top: 15px; border-right: 1px solid #dadada; }
.tab-btn-panel .btn { height: 34px; padding: 4px 15px; margin-bottom: 8px; }
.tab-content-panel { margin-top: 20px; width: 59%; padding-top: 15px; padding-left: 25px; }

/* Print section */
#print-section p { display: inline-block; }

/* ── Pagination ── */
.pagination { margin: 0 0; }
.pagination > li { float: left; line-height: 31px; padding-right: 3px; }
.pagination > li > a { cursor: pointer; background: #333; color: #fff; border-radius: 4px; }
.pagination > li > a,
.pagination > li > span { padding: 1px 8px; border-radius: 2px; color: #6b6b6b; margin: 3px; background-color: #eaeaea; border: 1px solid #eaeaea; }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus { z-index: 3; color: #fff; cursor: default; background-color: #ec7b39; border-color: #ef7e3c; }
.pagination .previous,
.pagination .next { border: none !important; background-color: transparent !important; }
.pagination > li > a,
.pagination > li > span { margin-left: 0; }
li.page-item:last-child { padding-right: 0; }

/* ── Progress ── */
.progress { height: 4px; margin-bottom: 5px; }
.progress-bar-danger { background-color: #ff0000; }

/* ── Alerts ── */
.alert { padding: 10px 15px; }

/* ── InwardOutward / StockTransfer / InternalOutward form panel ── */
.io-form-panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 14px 16px 8px;
    margin-bottom: 14px;
}
.io-form-panel .form-control,
.io-form-panel .form-select {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 12px;
    height: auto;
    min-height: 26px;
}
.io-form-panel .form-label {
    font-size: 11px;
    color: #555;
    font-weight: normal;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
}
.io-form-panel .input-group > .form-control,
.io-form-panel .input-group > .form-select {
    width: 1%;
    flex: 1 1 auto;
    min-width: 0;
}
.io-form-panel .input-group .btn {
    height: auto;
    min-height: 26px;
    margin-bottom: 0;
    padding: 3px 8px;
}
.io-form-panel textarea.form-control {
    height: auto;
    min-height: 52px;
    resize: vertical;
}
.page-header h5 {
    font-size: 16px;
    font-weight: 600;
    color: #373f49;
    letter-spacing: 0.5px;
}

/* ── Bootstrap 5 compatibility patches ── */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.img-circle { border-radius: 50% !important; }
.btn-block { display: block; width: 100%; }

/* Container width overrides */
@media (min-width: 1200px) { .container { width: 1200px; } }
@media (min-width: 1400px) {
    .container { width: 1384px; }
    .menu-panel { width: 20% !important; }
    .detail-panel { width: 80% !important; }
}

/* Navbar overrides (Bootstrap 5) */
.btn-primary.active, .btn-primary:active { color: #fff; background-color: #2d0614; border-color: #2d0614; }
.btn { border: none; }

/* Table thead striped */
.table > thead > tr > th { background: #feb200; color: #fff; }

/* Form inline */
.form-inline .form-group { margin-right: 5px; }

/* Badge */
.badge { padding: 7px 12px; background-color: #4e4e4e; }

/* Select multiple */
select[multiple] { margin: 15px 0 20px 0; border-radius: 6px; height: 211px; }
select option { padding: 6px 0 6px 5px; }

/* Hover effects */
.hvr-fade { transition-duration: 1.2s; }
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { background-color: #36434b; color: white; }
.hvr-bounce-to-top:before { background-color: #36434b; color: white; }