:root {
    --sidebar-width: 270px;
    --primary: #173b57;
    --primary-dark: #102a3f;
    --accent: #d7a94b;
    --surface: #ffffff;
    --background: #f4f7fa;
    --text: #243443;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    z-index: 1050;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 24px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #1a2b37;
    font-weight: 800;
}

.sidebar-brand small { display: block; opacity: .75; }
.sidebar-brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 12px;
    padding: 3px;
    background: #fff;
}
.login-brand-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
}
.branding-logo-preview {
    width: 100px;
    height: 100px;
    object-fit: contain;
    padding: 5px;
    border: 1px solid #d8dee5;
    border-radius: 12px;
    background: #fff;
}
.label-copy-input { max-width: 75px; }

.sidebar-nav {
    display: block;
    gap: 8px;
    margin-top: 24px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.28) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.28);
    border-radius: 10px;
}

.sidebar-nav a {
    display: block;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 12px;
}

.sidebar-nav a:hover {
    background: rgba(255,255,255,.12);
}

.disabled-link {
    opacity: .58;
    pointer-events: none;
}

.disabled-link span {
    float: right;
    font-size: 11px;
}

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.15);
    padding: 18px 8px 0;
}

.sidebar-footer small { display:block; opacity:.72; }
.sidebar-footer a { color: #ffe6ac; font-size: 14px; }

.main-content { margin-left: var(--sidebar-width); min-height: 100vh; }

.topbar {
    min-height: 92px;
    padding: 18px 28px;
    background: var(--surface);
    border-bottom: 1px solid #e4e9ee;
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar h1 { margin:0; font-size:1.45rem; }

.content-area { padding: 28px; }

.metric-card {
    background: white;
    border: 1px solid #e5eaef;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(22, 47, 68, .06);
}

.metric-label { color:#6b7b88; font-size:.9rem; }
.metric-value { font-size:1.8rem; font-weight:800; margin-top:8px; }

.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #102a3f, #1b5378);
    display: grid;
    place-items: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 440px;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
}

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: .25s; }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .content-area { padding: 18px; }
}
.sidebar-heading {
    margin: 20px 12px 4px;
    color: rgba(255,255,255,.5);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.sidebar-nav a.active {
    background: rgba(255,255,255,.16);
    box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-dashboard {
    margin-bottom: 8px;
}

.menu-icon {
    display: inline-block;
    width: 20px;
    font-size: 18px;
}

.sidebar-group {
    display: block;
    position: relative;
    height: auto;
    min-height: 0;
    margin: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    overflow: hidden;
}

.sidebar-group-toggle {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.sidebar-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.sidebar-group-label:hover,
.sidebar-group-toggle:checked + .sidebar-group-label {
    color: #fff;
    background: rgba(255, 255, 255, .075);
}

.group-chevron {
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
    transition: transform .2s ease;
}

.sidebar-group-toggle:checked + .sidebar-group-label .group-chevron {
    transform: rotate(90deg);
}

.sidebar-submenu {
    display: none;
    position: static;
    float: none;
    clear: both;
    width: 100%;
    height: auto;
    padding: 5px;
    background: rgba(0, 0, 0, .09);
}

.sidebar-group-toggle:checked ~ .sidebar-submenu {
    display: block;
}

.sidebar-group.is-open .sidebar-submenu {
    display: block;
}

.sidebar-group.is-open .group-chevron {
    transform: rotate(90deg);
}

.sidebar-submenu a {
    margin: 2px 0;
    padding: 9px 11px 9px 18px;
    border-radius: 7px;
    font-size: 14px;
}

.sidebar-submenu a.active {
    box-shadow: inset 3px 0 0 #ffd166;
}
.table thead th {
    background: #f8fafc;
    color: #556675;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.system-status {
    border-radius: 999px;
    padding: .3rem .65rem;
    font-size: .78rem;
    font-weight: 700;
}

.card-header {
    padding: 1rem 1.25rem;
}

code {
    color: #8a3f65;
}
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1040;
    display: none;
}

.sidebar-overlay.show {
    display: block;
}

.notification-badge {
    float: right;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.notification-button {
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid #e1e7ec;
    border-radius: 13px;
    display: grid;
    place-items: center;
    text-decoration: none;
    background: white;
    font-size: 20px;
}

.notification-button span {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #dc3545;
    color: white;
    font-size: 10px;
    font-weight: 800;
}

.notification-list {
    display: grid;
    gap: 14px;
}

.notification-card {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 1px solid #e4e9ee;
    border-radius: 16px;
    background: white;
    box-shadow: 0 8px 24px rgba(22, 47, 68, .05);
}

.notification-card.unread {
    border-color: #9ec5fe;
    background: #f8fbff;
}

.notification-type {
    width: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    body.menu-open {
        overflow: hidden;
    }
}
.current-session-card {
    border: 1px solid #9ec5fe !important;
    background: #f8fbff;
}

.login-card a {
    text-underline-offset: 3px;
}

.session-user-agent {
    overflow-wrap: anywhere;
}
.code-input {
    letter-spacing: .45rem;
    font-weight: 800;
    font-size: 1.6rem;
}

.api-token-once {
    overflow-wrap: anywhere;
}

.security-panel {
    border-left: 4px solid #0d6efd;
}
.unit-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

.unit-conversion-card {
    border-left: 4px solid var(--bs-primary);
}

@media (max-width: 767.98px) {
    .units-actions {
        display: grid;
        gap: .5rem;
    }

    .units-actions .btn,
    .units-actions form,
    .units-actions form .btn {
        width: 100%;
    }
}
.publisher-table-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: #fff;
    padding: .25rem;
}

.publisher-placeholder,
.publisher-detail-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-weight: 800;
    border-radius: .75rem;
}

.publisher-placeholder {
    width: 46px;
    height: 46px;
}

.publisher-detail-logo,
.publisher-detail-placeholder {
    width: 110px;
    height: 110px;
}

.publisher-detail-logo {
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: .5rem;
    background: #fff;
}

.publisher-logo-preview {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: .5rem;
}
.brand-table-logo{width:48px;height:48px;object-fit:contain;border:1px solid var(--bs-border-color);border-radius:.75rem;padding:.25rem;background:#fff}
.brand-placeholder,.brand-detail-placeholder{display:inline-flex;align-items:center;justify-content:center;background:var(--bs-primary-bg-subtle);color:var(--bs-primary);font-weight:800;border-radius:.75rem}
.brand-placeholder{width:48px;height:48px}
.brand-detail-logo,.brand-detail-placeholder{width:120px;height:120px}
.brand-detail-logo{object-fit:contain;border:1px solid var(--bs-border-color);border-radius:1rem;padding:.5rem;background:#fff}
.brand-logo-preview{width:130px;height:130px;object-fit:contain;border:1px solid var(--bs-border-color);border-radius:.75rem;padding:.5rem}
.imprint-table-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: #fff;
    padding: .25rem;
}

.imprint-placeholder,
.imprint-detail-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-weight: 800;
    border-radius: .75rem;
}

.imprint-placeholder {
    width: 48px;
    height: 48px;
}

.imprint-detail-logo,
.imprint-detail-placeholder {
    width: 120px;
    height: 120px;
}

.imprint-detail-logo {
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: #fff;
    padding: .5rem;
}

.imprint-logo-preview {
    width: 130px;
    height: 130px;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: #fff;
    padding: .5rem;
}
.supplier-table-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: #fff;
    padding: .25rem;
}

.supplier-placeholder,
.supplier-detail-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-weight: 800;
    border-radius: .75rem;
}

.supplier-placeholder {
    width: 48px;
    height: 48px;
}

.supplier-detail-logo,
.supplier-detail-placeholder {
    width: 120px;
    height: 120px;
}

.supplier-detail-logo {
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: .5rem;
    background: #fff;
}

.supplier-logo-preview {
    width: 130px;
    height: 130px;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: .5rem;
    background: #fff;
}
.supplier-contact-primary {
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .supplier-contact-actions .btn {
        margin-bottom: .25rem;
    }
}
.purchase-order-total-table th,
.purchase-order-total-table td {
    vertical-align: middle;
}

@media print {
    .sidebar,
    .topbar,
    .btn,
    form {
        display: none !important;
    }

    .card {
        border: 0 !important;
        box-shadow: none !important;
    }
}
.quotation-comparison-best {
    font-weight: 700;
}

@media print {
    .sidebar,
    .topbar,
    .btn,
    form {
        display: none !important;
    }

    .card {
        border: 0 !important;
        box-shadow: none !important;
    }
}

.supplier-return-summary th,
.supplier-return-summary td {
    vertical-align: middle;
}

@media print {
    .sidebar,
    .topbar,
    .btn,
    form {
        display: none !important;
    }

    .card {
        border: 0 !important;
        box-shadow: none !important;
    }
}

.location-card dt {
    font-weight: 600;
}

.location-card dd {
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .locations-table {
        min-width: 840px;
    }
}
.inventory-summary-card {
    min-height: 118px;
}

.inventory-table td,
.inventory-table th {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .inventory-table {
        min-width: 980px;
    }
}
.stock-count-table td,
.stock-count-table th {
    white-space: nowrap;
}

.stock-count-variance-positive {
    font-weight: 600;
}

.stock-count-variance-negative {
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .stock-count-table {
        min-width: 980px;
    }
}