/* ERP Scale V2 - Custom CSS with orange primary theme */

:root {
 --c: #ef8632;
 --c-h: #d4741f;
 --c-rgb: 239,134,50;
 --bs-primary: var(--c) !important;
 --bs-primary-rgb: var(--c-rgb) !important;
 --bs-link-color: var(--c) !important;
 --bs-link-hover-color: var(--c-h) !important;
}

/* Default font size — Medium (0.875rem = 14px) */
html { font-size: 0.875rem; }

/* ===== Global primary orange overrides ===== */
a { color: var(--c); }
a:hover { color: var(--c-h); }
.text-primary { color: var(--c) !important; }
.bg-primary { background-color: var(--c) !important; }
.border-primary { border-color: var(--c) !important; }

/* Buttons */
.btn-primary { background-color: var(--c) !important; border-color: var(--c) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--c-h) !important; border-color: var(--c-h) !important; color: #fff !important; }
.btn-outline-primary { color: var(--c) !important; border-color: var(--c) !important; }
.btn-outline-primary:hover, .btn-outline-primary:active { background-color: var(--c) !important; border-color: var(--c) !important; color: #fff !important; }
.btn-secondary { background-color: var(--c) !important; border-color: var(--c) !important; color: #fff !important; }
.btn-secondary:hover, .btn-secondary:active { background-color: var(--c-h) !important; border-color: var(--c-h) !important; color: #fff !important; }

/* Dropdowns */
.dropdown-item.active, .dropdown-item:active { background-color: var(--c) !important; color: #fff !important; }

/* Forms */
.form-control:focus, .form-select:focus { border-color: var(--c) !important; box-shadow: 0 0 0 .25rem rgba(var(--c-rgb),.25) !important; }
.form-check-input:checked { background-color: var(--c) !important; border-color: var(--c) !important; }
.form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(var(--c-rgb),.25) !important; }

/* Pagination */
.pagination { margin: 0; }
.page-item.active .page-link { background-color: var(--c) !important; border-color: var(--c) !important; color: #fff !important; }
.page-link { color: var(--c) !important; }
.page-link:hover { color: var(--c-h) !important; background-color: #fff3e6 !important; }

/* Badge / Progress */
.badge.bg-primary { background-color: var(--c) !important; }
.progress-bar { background-color: var(--c) !important; }

/* ===== Body ===== */
body {
 font-family: 'Inter', sans-serif;
 background-color: #f8f9fa;
}

/* ===== Navbar ===== */
.navbar { background-color: var(--c) !important; }
.navbar .nav-link { color: rgba(255,255,255,.85) !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active { color: #fff !important; }
.navbar .navbar-brand { color: #fff !important; font-weight: 600; }
.navbar .navbar-toggler { border-color: rgba(255,255,255,.4); }
.navbar .navbar-toggler-icon { filter: brightness(100); }
.navbar .dropdown-menu { border: none; box-shadow: 0 .25rem .75rem rgba(0,0,0,.15); }

/* Mobile/tablet navbar - taller with bigger hamburger (below xl breakpoint) */
@media (max-width: 1199.98px) {
 .navbar { min-height: 52px; padding-top: .6rem !important; padding-bottom: .6rem !important; }
 .navbar .navbar-brand { font-size: 1.05rem !important; }
 .navbar [data-bs-toggle="offcanvas"] { font-size: 1.7rem !important; }
}

/* ===== Offcanvas Sidebar ===== */
.offcanvas { transition: transform .3s cubic-bezier(.4,0,.2,1) !important; z-index: 10050 !important; }
.offcanvas-backdrop { transition: opacity .3s ease !important; z-index: 10040 !important; }
.sidebar-group a:hover { background-color: rgba(var(--c-rgb),.08) !important; }
.sidebar-group .collapse a:hover:not(.text-white) { background-color: rgba(var(--c-rgb),.08) !important; }
.sidebar-group [data-bs-toggle="collapse"] .bi-chevron-down { transition: transform .2s ease; font-size: .65rem; }
.sidebar-group [data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* ===== Loader ===== */
.loader {
 position: fixed; top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(255,255,255,.8); z-index: 9998;
 display: flex; align-items: center; justify-content: center;
}

/* ===== Panel (BS3 compat) ===== */
.panel { border-radius: .375rem; border: 1px solid #dee2e6; background: #fff; margin-bottom: 1rem; }
.panel-heading { padding: .75rem 1rem; border-bottom: 1px solid #dee2e6; background: #f8f9fa; }
.panel-title { margin: 0; font-size: 1rem; font-weight: 600; }
.panel-body { padding: 1rem; }
.panel-body:has(> .table-responsive), .panel-body:has(> .table) { padding: 0 !important; }
.panel-body:has(> .table-responsive) .table, .panel-body:has(> .table) { margin-bottom: 0 !important; }
.panel-footer { padding: .75rem 1rem; border-top: 1px solid #dee2e6; background: #f8f9fa; }

/* ===== BS3 class compat ===== */
.btn-xs { padding: .15rem .4rem; font-size: .75rem; }
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
.btn-default:hover { background-color: #e6e6e6; border-color: #adadad; }
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.hide, .hidden { display: none !important; }
.text-grey { color: #6c757d; }
.img-circle { border-radius: 50%; }
.form-group { margin-bottom: 1rem; }
.input-group-addon {
 display: flex; align-items: center; padding: .375rem .75rem;
 background-color: #e9ecef; border: 1px solid #ced4da; border-radius: .375rem 0 0 .375rem;
}
.input-group-addon + .form-control { border-radius: 0 .375rem .375rem 0; }

/* ===== Pagination info ===== */
.paging-info { padding: .5rem 0; color: #6c757d; font-size: .875rem; }

/* ===== Table ===== */
.table thead th {
 background-color: #e9ecef; font-weight: 600; font-size: .875rem;
 white-space: nowrap; border-bottom: 2px solid #dee2e6; padding: .625rem .75rem;
}
.table td { font-size: .875rem; vertical-align: middle; padding: .5rem .75rem; }

/* ===== Scale Control Buttons ===== */
.scale-ctrl-btn {
 background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 100%);
 border: 1px solid #999;
 border-radius: .5rem;
 color: #333;
 min-width: 60px;
 box-shadow: 0 2px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5);
 transition: all .1s;
}
.scale-ctrl-btn:hover { background: linear-gradient(180deg, #d0d0d0 0%, #b0b0b0 100%); }
.scale-ctrl-btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.3); transform: translateY(1px); }

/* ===== Login Page ===== */
.login-page {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1rem;
 background: linear-gradient(135deg, #f5f0eb 0%, #e8e0d8 50%, #f0ebe5 100%);
}
.login-card {
 width: 100%;
 max-width: 440px;
 border-radius: 1rem;
 overflow: hidden;
 box-shadow: 0 10px 40px rgba(0,0,0,.1), 0 2px 10px rgba(0,0,0,.05);
 background: #fff;
}
.login-header {
 background: linear-gradient(135deg, var(--c) 0%, #d4741f 100%);
 padding: 2rem 1.5rem;
 text-align: center;
 color: #fff;
}
.login-header i { font-size: 2.5rem; opacity: .9; }
.login-header h3 { margin: .5rem 0 0; font-weight: 700; letter-spacing: .05em; }
.login-body { padding: 2rem 2rem 1rem; }
.login-btn {
 background: linear-gradient(135deg, var(--c) 0%, #d4741f 100%) !important;
 border: none !important;
 color: #fff !important;
 padding: .75rem;
 font-size: 1.05rem;
 letter-spacing: .03em;
 transition: transform .15s, box-shadow .15s;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,134,50,.4); }
.login-btn:active { transform: translateY(0); }
.btn-microsoft {
 background: #fff; color: #5e5e5e; border: 1px solid #8c8c8c;
 font-weight: 600; font-size: .9rem; padding: .6rem 1rem;
 display: flex; align-items: center; justify-content: center;
 transition: background .15s, box-shadow .15s;
}
.btn-microsoft:hover { background: #f3f3f3; box-shadow: 0 2px 6px rgba(0,0,0,.1); color: #333; }
.login-footer {
 text-align: center;
 padding: 1rem;
 background: #f8f9fa;
 color: #999;
 border-top: 1px solid #eee;
}
/* Company select page */
.unauth-page {
 min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
}

/* ===== Search panel ===== */
#search_panel { display: none; }

/* ===== Validation ===== */
label.error { color: #dc3545; font-size: .7rem; margin-top: .15rem; display: block; font-weight: 500; }
.table label.error { font-size: .65rem; margin-top: .1rem; }

/* ===== Datetimepicker positioning fix for BS5 ===== */

/* ===== Datetimepicker (BS3 plugin override for BS5) ===== */
.bootstrap-datetimepicker-widget.dropdown-menu {
 border: 1px solid #dee2e6 !important;
 border-radius: .5rem !important;
 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
 padding: .5rem !important;
 font-size: .875rem;
 z-index: 99999 !important;
}
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td {
 border-radius: .375rem !important;
 padding: .4rem .5rem !important;
 text-align: center;
 line-height: 1.5;
}
.bootstrap-datetimepicker-widget table th { font-weight: 600; font-size: .8rem; color: #6c757d; }
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
 background: var(--c) !important; color: #fff !important; text-shadow: none !important;
}
.bootstrap-datetimepicker-widget table td.today:before {
 border-bottom-color: var(--c) !important;
}
.bootstrap-datetimepicker-widget table td:hover,
.bootstrap-datetimepicker-widget table td span:hover {
 background: rgba(var(--c-rgb),.1) !important; border-radius: .375rem;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
 background: rgba(var(--c-rgb),.1) !important; border-radius: .375rem; cursor: pointer;
}
.bootstrap-datetimepicker-widget .datepicker-days thead th.dow { color: var(--c); font-weight: 700; }
.bootstrap-datetimepicker-widget .datepicker-months td span,
.bootstrap-datetimepicker-widget .datepicker-years td span {
 border-radius: .375rem !important; padding: .5rem !important;
}
/* Replace glyphicons with unicode arrows */
.bootstrap-datetimepicker-widget .glyphicon { font-family: inherit !important; font-style: normal; font-size: 1rem; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-left:before { content: '\2039'; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-right:before { content: '\203A'; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-up:before { content: '\2303'; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-down:before { content: '\2304'; }
.bootstrap-datetimepicker-widget .glyphicon-time:before { content: '\1F551'; }
.bootstrap-datetimepicker-widget .glyphicon-calendar:before { content: '\1F4C5'; }
.bootstrap-datetimepicker-widget .btn { border: none; }
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new { color: #ccc; }

/* ===== Print Modal ===== */
#printModal { overflow: hidden; }
.print-modal-dialog { max-width: 90%; margin: 2vh auto; height: 96vh; }
.print-modal-content { height: 100%; overflow: hidden; }
.print-modal-body { overflow: hidden; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.print-modal-body #printPreviewArea { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ===== Toastr fix (BS5 .toast conflicts with toastr .toast) ===== */
#toast-container > .toast { background-image: none !important; opacity: 1 !important; }
#toast-container > .toast-success { background-color: #198754 !important; color: #fff !important; }
#toast-container > .toast-error { background-color: #dc3545 !important; color: #fff !important; }
#toast-container > .toast-warning { background-color: #ffc107 !important; color: #333 !important; }
#toast-container > .toast-info { background-color: #0dcaf0 !important; color: #fff !important; }
#toast-container > div { box-shadow: 0 .25rem .75rem rgba(0,0,0,.2) !important; border-radius: .5rem !important; padding: 12px 20px !important; }

/* ===== Spacing (BS3 compat) ===== */
.mb-5 { margin-bottom: .5rem !important; }
.mb-15 { margin-bottom: 1rem !important; }
.mt-15 { margin-top: 1rem !important; }
.req::after { content: ' *'; color: #dc3545; }

/* ===== Preloader + Gemini Progress Bars ===== */
.preloader {
 position: fixed; cursor: wait; z-index: 9999;
 background-color: transparent; height: 100%; width: 100%;
 top: 0; left: 0; display: flex; align-items: center; justify-content: center;
 pointer-events: none;
}
.progress_bar {
 --thickness: 2px; --speed: 2s;
 position: fixed; top: 0; left: 50%; transform: translateX(-50%);
 width: 0%; height: var(--thickness); z-index: 99999;
 overflow: visible; opacity: 0;
 transition: width 200ms linear, opacity 400ms ease-out;
}
.progress_bar.is-active { opacity: 1; min-width: 40px; }
.progress_bar::before {
 content: ""; position: absolute; inset: 0; border-radius: 999px;
 background: linear-gradient(90deg, #4285F4, #34A853, #FBBC04, #EA4335, #4285F4);
 background-size: 300% 100%; animation: gemini-scan var(--speed) linear infinite; pointer-events: none;
}
.progress_bar::after {
 content: ""; position: absolute; top: -8px; left: 0; right: 0; bottom: 0; border-radius: 999px;
 background: linear-gradient(90deg, #4285F4, #34A853, #FBBC04, #EA4335, #4285F4);
 background-size: 300% 100%; animation: gemini-scan var(--speed) linear infinite;
 filter: blur(15px); opacity: 0.6; pointer-events: none;
}
.progress_bar.is-done { transition: opacity 400ms ease; opacity: 0; min-width: 0; }
.progress_bar.is-done::after { filter: blur(20px); opacity: 1; }
@keyframes gemini-scan { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* ===== Gemini Button Loader ===== */
@property --gem-angle {
 syntax: "<angle>";
 initial-value: 0deg;
 inherits: false;
}
@keyframes gemini-rotate { to { --gem-angle: 360deg; } }
@keyframes gem-bounce {
 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
 40% { transform: scale(1.1); opacity: 1; }
}
@keyframes gem-colors-dot {
 0% { background-color: #4285F4; } 25% { background-color: #34A853; }
 50% { background-color: #FBBC04; } 75% { background-color: #EA4335; }
 100% { background-color: #4285F4; }
}
@keyframes gem-pulse-colors {
 0%, 100% { background-color: #4285F4; transform: scale(1); }
 25% { background-color: #EA4335; transform: scale(0.8); }
 50% { background-color: #FBBC04; transform: scale(1); }
 75% { background-color: #34A853; transform: scale(0.8); }
}
[class*="btn-loading"] {
 position: relative !important; pointer-events: none !important;
 color: transparent !important; overflow: hidden !important;
 border-color: transparent !important;
 background: transparent !important; background-color: transparent !important;
 background-image: none !important; box-shadow: none !important;
}
[class*="btn-loading"] .icon,
[class*="btn-loading"] i,
[class*="btn-loading"] svg,
[class*="btn-loading"] > *:not(.btn-loading-label) { visibility: hidden !important; }
.btn-loading::before {
 content: ""; position: absolute; inset: -1px; border-radius: inherit;
 background: conic-gradient(from var(--gem-angle), #4285F4, #34A853, #FBBC04, #EA4335, #4285F4);
 animation: gemini-rotate 1.8s linear infinite;
 z-index: 0; filter: saturate(1.3) brightness(1.1);
}
.btn-loading::after {
 content: ""; position: absolute; inset: 1px; border-radius: inherit;
 background: #fff; z-index: 0;
}
.btn-loading .btn-loading-label {
 position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
 margin: 0 !important; padding: 0 !important;
 display: flex !important; align-items: center !important; justify-content: center !important;
 gap: 6px; z-index: 1;
 visibility: visible !important;
}
.btn-loading .btn-loading-label .gem-dot {
 visibility: visible !important;
}
.gem-dot {
 width: 9px; height: 9px; border-radius: 50%; display: inline-block;
 animation: gem-bounce 1.4s ease-in-out infinite, gem-colors-dot 2.8s linear infinite;
}
.gem-dot.d1 { animation-delay: 0s, 0s; }
.gem-dot.d2 { animation-delay: 0.12s, -0.7s; }
.gem-dot.d3 { animation-delay: 0.24s, -1.4s; }
.gem-dot.d4 { animation-delay: 0.36s, -2.1s; }
/* Small buttons: 4 dots with rainbow border, ensure minimum size */
.btn-loading.btn-sm { min-width: 60px; min-height: 28px; }
.btn-loading.btn-sm .gem-dot { width: 7px; height: 7px; }
.btn-loading.btn-sm .btn-loading-label { gap: 5px; }
@media (prefers-reduced-motion: reduce) {
 .btn-loading::before { animation: none; }
 .gem-dot { animation: none; background-color: #4285F4; }
 .progress_bar::before, .progress_bar::after { animation: none; background-position: 50% 0; }
}

/* ===== Inline Content Loader ===== */
.customload {
 display: flex; flex-direction: column; align-items: center;
 justify-content: center; padding: 3rem 1rem; gap: 0.75rem;
}
.customload-dots { display: flex; gap: 6px; }
.customload .loader-text { font-size: 0.8rem; color: #6c757d; }

/* ===== Element-level Loading ===== */
.ele-loading { position: relative; pointer-events: none; min-height: 60px; }
.ele-loading::after {
 content: ""; position: absolute; inset: 0; z-index: 10;
 background: rgba(255,255,255,.7);
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Ccircle cx='5' cy='5' r='4' fill='%234285F4'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='15' cy='5' r='4' fill='%2334A853'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.4s' begin='0.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='25' cy='5' r='4' fill='%23FBBC04'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.4s' begin='0.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='35' cy='5' r='4' fill='%23EA4335'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.4s' begin='0.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
 background-repeat: no-repeat; background-position: center; background-size: 40px 10px;
 border-radius: inherit;
}

/* ===== Prevent page horizontal scroll ===== */
body { max-width: 100vw; overflow-x: clip; }

/* ===== Responsive ===== */
@media (max-width: 767.98px) {
 .page-head h4 { font-size: 1.1rem; }
}

/* ===== Print ===== */
@media print {
 nav.navbar, .breadcrumb, .top-btns, .card-footer, #search_panel, .pagination { display: none !important; }
 .container-fluid { padding: 0 !important; }
}