/* AGC V2 — shared theme on top of Bootstrap 5.3 */
:root {
    --app-navy: #1b2a41;
    --app-navy-dark: #121d2e;
    --app-navy-light: #2c4266;
    --app-accent: #2f5d8a;
    --app-bg: #f4f6f9;
    --app-border: #dfe3ea;
    --sidebar-width: 260px;

    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: #27313f;
    --bs-primary: #2f5d8a;
    --bs-primary-rgb: 47, 93, 138;
    --bs-link-color: #2f5d8a;
    --bs-link-color-rgb: 47, 93, 138;
    --bs-link-hover-color: #1b2a41;
    --bs-border-color: var(--app-border);
}

body { background-color: var(--app-bg); }

.btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-navy-light);
    --bs-btn-hover-border-color: var(--app-navy-light);
    --bs-btn-active-bg: var(--app-navy);
    --bs-btn-active-border-color: var(--app-navy);
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
}

.form-control:focus, .form-select:focus {
    border-color: #8fa9c6;
    box-shadow: 0 0 0 .2rem rgba(47, 93, 138, .15);
}

.form-label { font-size: .8125rem; font-weight: 600; color: #3d4a5c; margin-bottom: .35rem; }
.text-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7686; }

.card { border-color: var(--app-border); border-radius: .5rem; }
.card-header { background-color: #fff; border-bottom-color: var(--app-border); font-weight: 600; padding: .9rem 1.25rem; }

/* ---------- Auth pages (login / setup) ---------- */
.auth-body { background: var(--app-bg); }
.auth-card { max-width: 920px; border: 1px solid var(--app-border); border-radius: .5rem; overflow: hidden; box-shadow: 0 10px 30px rgba(18, 29, 46, .08); }
.auth-brand {
    background: linear-gradient(160deg, var(--app-navy) 0%, var(--app-navy-dark) 100%);
    color: #c9d3e1;
}
.auth-brand .brand-logo { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: .5rem; padding: .5rem; }
.auth-brand h1 { color: #fff; letter-spacing: .04em; }
.auth-brand .rule { width: 48px; height: 3px; background: #8fa9c6; }
.auth-footer { font-size: .75rem; color: #8a94a3; }

/* ---------- App shell ---------- */
.sidebar { background-color: var(--app-navy); color: #c9d3e1; }
.sidebar .brand { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar .brand img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: .375rem; padding: .25rem; }
.sidebar .nav-heading { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7f8ea6; padding: 1rem .75rem .4rem; }
.sidebar .nav-link { color: #c9d3e1; border-radius: .375rem; font-size: .875rem; padding: .55rem .75rem; border-left: 3px solid transparent; }
.sidebar .nav-link:hover { color: #fff; background-color: rgba(255, 255, 255, .06); }
.sidebar .nav-link.active { color: #fff; background-color: rgba(255, 255, 255, .1); border-left-color: #8fa9c6; font-weight: 600; }
.sidebar .nav-group .chevron { font-size: .7rem; transition: transform .2s; }
.sidebar .nav-group:not(.collapsed) .chevron { transform: rotate(180deg); }
.sidebar .nav-group.open { color: #fff; }
.sidebar .submenu { margin: .15rem 0 .35rem 1.15rem; padding-left: .5rem; border-left: 1px solid rgba(255, 255, 255, .1); gap: .1rem; }
.sidebar .submenu .nav-link { font-size: .8125rem; padding: .4rem .65rem; }
.sidebar .nav-link.is-soon { color: #6f7f97; cursor: default; }
.sidebar .nav-link.is-soon:hover { color: #6f7f97; background: none; }
.sidebar .badge-soon { font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 1rem; background: rgba(255, 255, 255, .07); color: #7f8ea6; }
.sidebar .user-block { border-top: 1px solid rgba(255, 255, 255, .08); }

/* Sidebar scrollbar: thin, dark-themed, brightens on hover */
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; scrollbar-gutter: stable; }
.sidebar-nav:hover { scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .12); border-radius: 3px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .25); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .4); }
.sidebar-nav::-webkit-scrollbar-button { display: none; height: 0; }

.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .875rem; background: #e3e9f1; color: var(--app-navy); }
.sidebar .avatar { background: var(--app-navy-light); color: #fff; }

.topbar { height: 60px; background: #fff; border-bottom: 1px solid var(--app-border); }
.page-header h1 { font-size: 1.375rem; font-weight: 600; color: var(--app-navy); margin: 0; }
.page-header .breadcrumb { font-size: .8125rem; margin: 0; }

.info-list dt { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7686; }
.info-list dd { margin-bottom: 1rem; }

@media (min-width: 992px) {
    /* Bootstrap makes .offcanvas-lg transparent (!important) on lg+, so restate the background. */
    .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 1030; background-color: var(--app-navy) !important; }
    .app-content { margin-left: var(--sidebar-width); }
}

/* ---------- Maintenance › Product ---------- */
/* Underline tabs: the active tab gets a navy bar sitting on the header's bottom border. */
.product-tabs-bar { padding: 0 1rem; border-radius: .5rem .5rem 0 0 !important; }
.product-tabs { gap: .5rem; margin-bottom: -1px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.product-tabs .nav-link { display: flex; align-items: center; gap: .45rem; white-space: nowrap; color: #6b7686; font-size: .875rem; font-weight: 500; padding: .95rem .35rem .8rem; margin-right: .75rem; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; transition: color .15s, border-color .15s; }
.product-tabs .nav-link .bi { font-size: 1rem; }
.product-tabs .nav-link:hover { color: var(--app-navy); border-bottom-color: #c9d3e1; }
.product-tabs .nav-link.active { color: var(--app-navy); font-weight: 600; border-bottom-color: var(--app-navy); }
.product-tabs .nav-link.active .bi { color: var(--app-accent); }
.product-tabs .nav-link:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(47, 93, 138, .35); border-radius: .25rem .25rem 0 0; }

.pane-intro { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; color: #5b6676; background: #f8fafc; border-bottom: 1px solid var(--app-border); padding: .65rem 1rem; }
.pane-intro .bi { color: var(--app-accent); margin-top: .1rem; }
.table-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.5rem; padding: 1rem 1rem .25rem; }
.table-filters .form-select { min-width: 200px; }

/* Header uses the sidebar navy. */
.product-table thead th { --bs-table-bg: var(--app-navy); --bs-table-color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 0; white-space: nowrap; }
.product-table thead th:first-child { border-top-left-radius: .375rem; }
.product-table thead th:last-child { border-top-right-radius: .375rem; }
.product-table thead th .dt-column-order { opacity: .7; }
.product-table thead th.dt-ordering-asc, .product-table thead th.dt-ordering-desc { --bs-table-bg: var(--app-navy-light); }
.product-table tbody td { font-size: .875rem; border-color: #edf0f4; }
.product-table tbody tr.row-low > * { background-color: #fdf3f3; }
.product-table tbody tr.row-low > td:first-child { box-shadow: inset 3px 0 0 #dc3545; }
.product-table .cell-clip { display: block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-table .btn-edit { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .55rem; --bs-btn-font-size: .8125rem; white-space: nowrap; }
.dt-container .dt-search input { min-width: 240px; }
/* Wide tables scroll inside the card instead of stretching the page. */
.dt-container .dt-layout-table > div { overflow-x: auto; }
.app-content { min-width: 0; }
.dt-container .dt-info, .dt-container .dt-length { font-size: .8125rem; color: #6b7686; }

.stock-badge { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; border-radius: 1rem; padding: .25em .6em; }
.stock-low { background: #fbe2e4; color: #b02a37; }
.stock-out { background: #eceff3; color: #5b6676; }
.stock-ok { background: #e3f2ea; color: #1e7a4b; }
.stock-preorder { background: #fff1d6; color: #8a5a00; }

.cleanup-panel { border-top: 1px solid var(--app-border); background: #fcfcfd; padding: .85rem 1rem; border-radius: 0 0 .5rem .5rem; }

#productModal .modal-header { align-items: flex-start; }
.form-section-title { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--app-accent); padding-bottom: .4rem; margin-bottom: .9rem; border-bottom: 1px solid var(--app-border); }
.form-note { margin-top: 1.25rem; font-size: .8125rem; color: #5b6676; background: #f4f7fb; border-radius: .375rem; padding: .6rem .8rem; }
.type-option { display: flex; gap: .75rem; align-items: flex-start; height: 100%; padding: .8rem .9rem; border: 1px solid var(--app-border); border-radius: .5rem; cursor: pointer; background: #fff; transition: border-color .15s, background-color .15s; }
.type-option > .bi { font-size: 1.25rem; color: #7f8ea6; line-height: 1.2; }
.type-option:hover { border-color: #8fa9c6; }
.btn-check:checked + .type-option { border-color: var(--app-accent); background: #f1f5fa; box-shadow: 0 0 0 1px var(--app-accent); }
.btn-check:checked + .type-option > .bi { color: var(--app-accent); }
.btn-check:focus-visible + .type-option { box-shadow: 0 0 0 .2rem rgba(47, 93, 138, .25); }
.btn-check:disabled + .type-option { opacity: .45; cursor: not-allowed; }

/* ---------- Page preloader ---------- */
.page-preloader {
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    background: var(--app-bg); transition: opacity .35s ease, visibility .35s ease;
    /* Failsafe: never block the page if the script that hides it fails to load. */
    animation: preloader-failsafe 0s 25s forwards;
}
.page-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-preloader-logo { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: .75rem; padding: .5rem; box-shadow: 0 6px 20px rgba(18, 29, 46, .08); }
.page-preloader-bar { width: 160px; height: 4px; margin: 1.25rem auto 0; border-radius: 2px; background: #dfe3ea; overflow: hidden; }
.page-preloader-bar span { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--app-navy); animation: preloader-slide 1.1s ease-in-out infinite; }
@keyframes preloader-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .page-preloader-bar span { animation-duration: 2.5s; } }

/* Table loader: covers a card while its table reloads (filter change, after save/delete). */
.table-loader {
    position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .75); border-radius: inherit; transition: opacity .2s ease, visibility .2s ease;
}
.table-loader[hidden] { display: flex; opacity: 0; visibility: hidden; pointer-events: none; }
.table-loader .page-preloader-bar { margin-top: .75rem; }

/* ---------- Transaction › Purchase Order ---------- */
.step-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 50%; background: var(--app-navy); color: #fff; font-size: .75rem; font-weight: 600; }
.type-option-sm { padding: .65rem .75rem; gap: .6rem; }
.type-option-sm > .bi { font-size: 1.1rem; }

.po-items thead th { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7686; background: #f8fafc; white-space: nowrap; }
.po-items tbody td { font-size: .875rem; border-color: #edf0f4; vertical-align: top; padding-top: .75rem; padding-bottom: .75rem; }
.po-items .form-control-sm { min-width: 5.5rem; }
.cat-badge { display: inline-block; font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 1rem; padding: .1rem .45rem; margin-right: .2rem; background: #eceff3; color: #5b6676; }
.cat-bended { background: #e7eef7; color: var(--app-accent); }
.cat-panel { background: #e3f2ea; color: #1e7a4b; }
.cat-ceiling { background: #fff1d6; color: #8a5a00; }
.cat-hardware { background: #f1e8f7; color: #6a3d8a; }

.empty-state { text-align: center; padding: 2.5rem 1rem; }
.empty-state > .bi { display: block; font-size: 2.25rem; color: #b8c2d0; margin-bottom: .5rem; }

.po-summary { position: sticky; top: 76px; }
.summary-list { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .875rem; }
.summary-list dt { font-weight: 500; color: #6b7686; }
.summary-list dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; }
.grand-total { font-size: 1.5rem; font-weight: 700; color: var(--app-navy); }

.po-preview { border: 1px solid var(--app-border); border-radius: .5rem; background: #f8fafc; padding: .9rem 1rem; }
.price-list { font-size: .875rem; }
.price-list dt { font-weight: 400; color: #5b6676; }
.price-list dd { margin: 0 0 .25rem; }
.stock-chip { display: inline-block; font-size: .75rem; border: 1px solid var(--app-border); background: #fff; border-radius: 1rem; padding: .15rem .55rem; }

@media (max-width: 1199.98px) {
    .po-summary { position: static; }
}

/* ---------- Monitoring › Purchase Order ---------- */
.status-card { display: flex; flex-direction: column; gap: .15rem; width: 100%; height: 100%; text-align: left; background: #fff; border: 1px solid var(--app-border); border-radius: .5rem; padding: .75rem .9rem; transition: border-color .15s, box-shadow .15s; }
.status-card:hover { border-color: #8fa9c6; }
.status-card-static:hover { border-color: var(--app-border); } /* totals only, not a filter */
.status-card.active { border-color: var(--app-accent); box-shadow: 0 0 0 1px var(--app-accent); }
.status-card:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(47, 93, 138, .25); }
.status-card .bi { color: #7f8ea6; }
.status-card-label { font-size: .75rem; font-weight: 600; color: #5b6676; }
.status-card-count { font-size: 1.5rem; font-weight: 700; color: var(--app-navy); line-height: 1.2; }
.status-card-help { font-size: .6875rem; color: #8a94a3; }
.status-action.has-items { border-color: #f0b44c; background: #fffaf0; }
.status-action.has-items .bi, .status-action.has-items .status-card-count { color: #b26b00; }

.po-status { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; border-radius: 1rem; padding: .3em .65em; }
.po-status-pending { background: #fff1d6; color: #8a5a00; }
.po-status-approved, .po-status-for-signature { background: #ffe3c2; color: #9a4a00; }
.po-status-for-production, .po-status-processing { background: #e7eef7; color: var(--app-accent); }
.po-status-receiving { background: #dff3f3; color: #116466; }
.po-status-done { background: #e3f2ea; color: #1e7a4b; }
.po-status-deliver { background: #dff3f3; color: #116466; }
.po-status-cancelled { background: #eceff3; color: #5b6676; }
.po-status-cancel-request { background: #fbe2e4; color: #b02a37; }
.po-status-reset-request { background: #ece6f7; color: #5a3d99; }
.next-step { max-width: 16rem; white-space: normal; }

.type-badge { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.type-supplier { color: var(--app-accent); }
.type-branch { color: #6a3d8a; }
.product-table tbody tr.row-action > * { background-color: #fffaf0; }
.product-table tbody tr.row-action > td:first-child { box-shadow: inset 3px 0 0 #f0b44c; }

.po-steps { display: flex; list-style: none; padding: 0; margin: 0; counter-reset: none; overflow-x: auto; }
.po-steps li { flex: 1 1 0; min-width: 90px; position: relative; text-align: center; font-size: .75rem; color: #8a94a3; }
.po-steps li::before { content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--app-border); }
.po-steps li:first-child::before { display: none; }
.po-steps .dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--app-border); font-weight: 600; margin-bottom: .3rem; }
.po-steps .label { display: block; }
.po-steps li.done { color: #1e7a4b; }
.po-steps li.done .dot { background: #1e7a4b; border-color: #1e7a4b; color: #fff; }
.po-steps li.done::before, .po-steps li.current::before { background: #1e7a4b; }
.po-steps li.current { color: var(--app-navy); font-weight: 600; }
.po-steps li.current .dot { border-color: var(--app-accent); color: var(--app-accent); box-shadow: 0 0 0 3px rgba(47, 93, 138, .15); }
.po-detail-totals { min-width: 260px; font-size: .875rem; }

/* Signed copy viewer (SweetAlert popup). */
.signed-view { display: block; width: 100%; border: 1px solid var(--app-border); border-radius: .375rem; background: #f8fafc; }
.signed-pdf { height: 75vh; }
.signed-img { max-height: 75vh; object-fit: contain; }

/* ---------- Transaction › Production ---------- */
.product-tabs .nav-link:disabled { color: #aab3c0; cursor: not-allowed; }
.product-tabs .nav-link:disabled:hover { border-bottom-color: transparent; }
.badge-soon-light { font-size: .5625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 1rem; background: #eceff3; color: #7f8ea6; }
.cut-card { border-color: #8fa9c6; box-shadow: 0 0 0 1px rgba(47, 93, 138, .15); }

/* ---------- Support › Help Center ---------- */
.help-search { width: 100%; max-width: 22rem; }
.help-toc { position: sticky; top: 76px; }
.help-toc .nav-link { font-size: .875rem; color: #3d4a5c; border-radius: .375rem; padding: .45rem .65rem; }
.help-toc .nav-link:hover { background: #f1f5fa; color: var(--app-navy); }
.help-toc .nav-link .bi { color: #7f8ea6; }
.help-topic { scroll-margin-top: 76px; }
#faq { scroll-margin-top: 76px; }
.help-steps li + li { margin-top: .65rem; }
.help-notes { padding-left: 1.1rem; font-size: .875rem; color: #3d4a5c; }
.help-notes li + li { margin-top: .4rem; }
.help-statuses { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1rem; align-items: center; font-size: .875rem; }
.help-statuses dd { margin: 0; color: #5b6676; }
@media (max-width: 575.98px) {
    .help-statuses { grid-template-columns: 1fr; gap: .2rem; }
    .help-statuses dd { margin-bottom: .5rem; }
}

/* ---------- Transaction › Sales ---------- */
.lookup-card { border: 1px solid #b9d9c7; background: #f3faf6; border-radius: .5rem; padding: .75rem 1rem; }
.src-badge { display: inline-flex; align-items: center; gap: .2rem; font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 1rem; padding: .1rem .45rem; margin-left: .3rem; background: #e3f2ea; color: #1e7a4b; vertical-align: middle; }
.converter-panel { background: #f8fafc; border-bottom: 1px solid var(--app-border); padding: .9rem 1.25rem; }
.converter-panel .input-group .form-control { min-width: 0; }
.seg-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.seg-toggle .btn { border: 1px solid var(--app-border); background: #fff; color: #3d4a5c; font-size: .875rem; font-weight: 500; }
.seg-toggle .btn:hover { border-color: #8fa9c6; }
.seg-toggle .btn-check:checked + .btn { border-color: var(--app-accent); background: #f1f5fa; color: var(--app-navy); font-weight: 600; box-shadow: 0 0 0 1px var(--app-accent); }
.seg-toggle .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .2rem rgba(47, 93, 138, .25); }
.pay-box { border: 1px solid var(--app-border); border-radius: .5rem; background: #f8fafc; padding: .75rem .9rem; }
.pay-hint { color: #8a5a00; background: #fff6e5; border-radius: .375rem; padding: .4rem .6rem; }

/* ---------- Dashboard ---------- */
.kpi-card .card-body { padding: 1rem 1.15rem; }
.kpi-label { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; color: #5b6676; text-transform: uppercase; letter-spacing: .03em; }
.kpi-label .bi { color: #7f8ea6; font-size: .95rem; }
.kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--app-navy); line-height: 1.3; margin-top: .35rem; font-variant-numeric: tabular-nums; }
.kpi-help { font-size: .75rem; color: #8a94a3; margin-top: .15rem; }
.kpi-trend { font-weight: 600; }
.kpi-trend.up { color: #1e7a4b; }
.kpi-trend.down { color: #b02a37; }
.chart-box { position: relative; height: 280px; }
.mix-row + .mix-row { margin-top: 1rem; }
.mix-track { height: 8px; background: #eef1f5; border-radius: 4px; overflow: hidden; }
.mix-bar { height: 100%; background: var(--app-accent); border-radius: 4px; }
.section-title { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #5b6676; margin-bottom: .75rem; }
.dashboard-table thead th { font-size: .75rem; font-weight: 600; color: #5b6676; background: #f8f9fb; white-space: nowrap; }
.dashboard-table td { font-size: .875rem; font-variant-numeric: tabular-nums; }
.dashboard-table .cell-party { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-list .list-group-item { padding: .65rem 1.25rem; }