/* Global ERP Theme System - Industrial UI */
:root {
    --erp-font-family: "IBM Plex Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --erp-bg-app: #eef2f6;
    --erp-bg-surface: #ffffff;
    --erp-bg-soft: #f6f8fb;
    --erp-bg-dark: #1d2735;
    --erp-bg-dark-2: #263244;
    --erp-border: #d7e0ea;
    --erp-text: #233448;
    --erp-text-muted: #5d7087;

    --erp-primary: #2f6ea7;
    --erp-primary-strong: #255986;
    --erp-primary-soft: #e8f1fb;

    --erp-secondary: #6f7f92;
    --erp-secondary-soft: #edf2f7;

    --erp-success: #2f8d4e;
    --erp-success-soft: #e9f7ee;
    --erp-danger: #b24652;
    --erp-danger-soft: #fbecef;
    --erp-warning: #c08128;
    --erp-warning-soft: #fff6e8;
    --erp-info: #2f6ea7;
    --erp-info-soft: #e8f1fb;

    --erp-shadow-sm: 0 2px 8px rgba(17, 39, 64, 0.08);
    --erp-shadow-md: 0 10px 24px rgba(17, 39, 64, 0.10);

    --erp-radius-sm: 8px;
    --erp-radius-md: 12px;
    --erp-radius-lg: 16px;

    --erp-space-1: 4px;
    --erp-space-2: 8px;
    --erp-space-3: 12px;
    --erp-space-4: 16px;
    --erp-space-5: 20px;
    --erp-space-6: 24px;
}

html, body {
    font-family: var(--erp-font-family);
    color: var(--erp-text);
    background: var(--erp-bg-app);
}

.erp-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 258px 1fr;
}

.erp-sidebar {
    background: linear-gradient(180deg, var(--erp-bg-dark) 0%, var(--erp-bg-dark-2) 100%);
    color: #d9e4f2;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.erp-sidebar-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #91a7c1;
    margin: 18px 0 8px;
    padding: 0 14px;
}

.erp-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d9e4f2;
    text-decoration: none;
    padding: 10px 12px;
    margin: 2px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.erp-nav-link:hover,
.erp-nav-link.active {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}

.erp-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
}

.erp-header {
    background: #f9fbfd;
    border-bottom: 1px solid var(--erp-border);
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.erp-content {
    padding: 18px 22px;
}

.erp-page-title {
    font-size: 30px;
    line-height: 1.15;
    margin: 0;
    color: #13263d;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.erp-section-title {
    font-size: 18px;
    margin: 0;
    font-weight: 700;
}

.erp-card {
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    box-shadow: var(--erp-shadow-sm);
    padding: var(--erp-space-4);
}

.erp-kpi-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.erp-kpi-card {
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    box-shadow: var(--erp-shadow-sm);
    padding: 14px;
}

.erp-kpi-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--erp-text-muted);
    font-weight: 700;
}

.erp-kpi-value {
    margin-top: 8px;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    color: #172d46;
}

.erp-filter-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    padding: 12px;
}

.erp-form-field,
.erp-select,
.erp-input {
    border: 1px solid #c9d6e4;
    border-radius: 8px;
    background: #fff;
    min-height: 36px;
    padding: 8px 10px;
    width: 100%;
    color: var(--erp-text);
}

.erp-form-field:focus,
.erp-select:focus,
.erp-input:focus {
    outline: none;
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px rgba(47, 110, 167, 0.15);
}

.erp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.erp-btn-primary { background: var(--erp-primary); border-color: var(--erp-primary-strong); color: #fff; }
.erp-btn-primary:hover { background: var(--erp-primary-strong); }
.erp-btn-secondary { background: #fff; border-color: var(--erp-border); color: #314760; }
.erp-btn-secondary:hover { background: var(--erp-bg-soft); }
.erp-btn-success { background: var(--erp-success); border-color: #21683a; color: #fff; }
.erp-btn-danger { background: var(--erp-danger); border-color: #8f3740; color: #fff; }
.erp-btn-warning { background: var(--erp-warning); border-color: #93611d; color: #fff; }
.erp-btn-info { background: var(--erp-info); border-color: #265b8b; color: #fff; }
.erp-btn-print { background: #224c78; border-color: #1a3a5b; color: #fff; }

.erp-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid transparent;
}
.erp-badge-draft { background: #f0f3f7; color: #4d6077; border-color: #d7e0ea; }
.erp-badge-pending { background: var(--erp-warning-soft); color: #8a5a15; border-color: #eccb92; }
.erp-badge-approved { background: var(--erp-success-soft); color: #1f6c37; border-color: #b9e2c7; }
.erp-badge-released { background: var(--erp-info-soft); color: #1f4f7a; border-color: #bdd6ee; }
.erp-badge-production { background: #e7f0ff; color: #255986; border-color: #bfd2ee; }
.erp-badge-completed { background: #ecf8ef; color: #247446; border-color: #b6dfc5; }
.erp-badge-rejected { background: var(--erp-danger-soft); color: #8f2f3a; border-color: #edbec6; }
.erp-badge-archived { background: #edf1f6; color: #5e7389; border-color: #d6e0ea; }
.erp-badge-hold { background: #fff2e5; color: #9a5512; border-color: #f0c99f; }

.erp-table-wrap {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    overflow: auto;
    background: #fff;
}

.erp-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 12px;
}

.erp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f3f7fb;
    color: #24425f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    border-bottom: 1px solid var(--erp-border);
    padding: 10px 8px;
    text-align: left;
}

.erp-table tbody td {
    border-bottom: 1px solid #e6edf5;
    padding: 9px 8px;
    vertical-align: top;
}

.erp-table tbody tr:hover { background: #f8fbff; }

.erp-alert {
    border: 1px solid var(--erp-border);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    font-size: 12px;
}
.erp-alert-info { border-left-color: var(--erp-info); background: #f4f9ff; }
.erp-alert-success { border-left-color: var(--erp-success); background: #f1fcf4; }
.erp-alert-warning,
.erp-alert.erp-alert-warning {
    border-left-color: #d82a3b;
    background: #fff1f3;
    color: #8f1f2b !important;
}
.erp-alert-danger { border-left-color: var(--erp-danger); background: #fff4f6; }

.erp-workflow {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 8px;
}

.erp-workflow-step {
    border: 1px solid var(--erp-border);
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #35516f;
}

.erp-workflow-step.active {
    background: var(--erp-primary);
    border-color: var(--erp-primary-strong);
    color: #fff;
}

.erp-page-stack {
    display: grid;
    gap: 16px;
}

.erp-page-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.erp-page-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--erp-text-muted);
}

.erp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.erp-actions-right {
    margin-left: auto;
}

.erp-cluster-card {
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    box-shadow: var(--erp-shadow-sm);
    padding: 12px;
}

.erp-card-compact {
    padding: 12px;
    border-radius: 6px;
}

.erp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.erp-card-title-stack {
    display: grid;
    gap: 4px;
}

.erp-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--erp-text-muted);
}

.erp-card-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--erp-text-muted);
}

.erp-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f7fb 100%);
    box-shadow: var(--erp-shadow-sm);
    padding: 12px 14px;
}

.erp-banner-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #18314b;
}

.erp-banner-copy {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--erp-text-muted);
}

.erp-kpi-grid-compact {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.erp-kpi-card-compact {
    padding: 12px;
    border-radius: 6px;
}

.erp-kpi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.erp-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--erp-primary-soft);
    color: var(--erp-primary-strong);
}

.erp-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid var(--erp-border);
    background: #fff;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 700;
    color: #425974;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.erp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.erp-status-chip.warning {
    color: #97601a;
    background: var(--erp-warning-soft);
    border-color: #eccb92;
}

.erp-status-chip.success {
    color: #24693a;
    background: var(--erp-success-soft);
    border-color: #b9e2c7;
}

.erp-status-chip.info {
    color: #255986;
    background: var(--erp-info-soft);
    border-color: #bdd6ee;
}

.erp-status-chip.danger {
    color: #8f2f3a;
    background: var(--erp-danger-soft);
    border-color: #edbec6;
}

.erp-tab-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.erp-tab-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border-radius: 6px;
    border: 1px solid var(--erp-border);
    padding: 7px 11px;
    background: #fff;
    color: #314760;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.erp-tab-button.is-active {
    background: var(--erp-primary);
    border-color: var(--erp-primary-strong);
    color: #fff;
}

.erp-dashboard-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.erp-queue-card {
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    box-shadow: var(--erp-shadow-sm);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.erp-queue-card-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--erp-primary-soft);
    color: var(--erp-primary-strong);
    font-size: 13px;
    font-weight: 800;
}

.erp-metric-list {
    display: grid;
    gap: 8px;
}

.erp-metric-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #314760;
}

.erp-metric-row strong {
    color: #13263d;
}

.erp-section-shell {
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    box-shadow: var(--erp-shadow-sm);
    padding: 14px;
}

.erp-filter-sidebar {
    background: #f4f7fb;
    border: 1px solid var(--erp-border);
    border-radius: 4px;
    padding: 12px;
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}

.erp-records-filter-sidebar {
    position: sticky;
    top: var(--erp-records-sticky-top, 96px);
    max-height: calc(100vh - var(--erp-records-sticky-top, 96px) - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 4;
    width: 100%;
}

.erp-records-filter-sidebar.is-collapsed .erp-records-filter-body {
    display: none;
}

.erp-records-filter-sidebar.is-collapsed {
    max-height: none;
    overflow: visible;
}

.erp-records-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.erp-records-filter-head .erp-filter-sidebar-title {
    margin: 0;
    font-size: 14px;
}

.erp-records-filter-toggle {
    border: 1px solid #bfd3e8;
    background: #fff;
    color: #1f4f8a;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.erp-records-filter-toggle:hover {
    background: #edf3fb;
}

.erp-records-filter-body,
.erp-records-filter-body .erp-filter-group {
    min-width: 0;
}

.erp-records-filter-sidebar .erp-input,
.erp-records-filter-sidebar .erp-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.erp-records-shell {
    width: 100%;
    min-width: 0;
}

.erp-content:has(.erp-records-shell) {
    max-width: none;
    overflow-x: hidden;
}

.erp-records-data-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.erp-records-pane-head {
    position: sticky;
    top: var(--erp-records-sticky-top, 96px);
    z-index: 5;
    background: #f3f5f8;
    padding-bottom: 8px;
}

.erp-records-table-wrap {
    flex: 1;
    min-height: 240px;
    max-height: calc(100vh - var(--erp-records-pane-offset, 320px));
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-width: 0;
}

.erp-table-wrap.erp-records-table-wrap,
.erp-table-scroll.erp-records-table-wrap {
    overflow-x: hidden;
}

.erp-records-table-wrap.is-scroll-x,
.erp-table-wrap.erp-records-table-wrap.is-scroll-x,
.erp-table-scroll.erp-records-table-wrap.is-scroll-x {
    overflow-x: auto;
}

.erp-records-table-wrap .erp-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}

.erp-records-table-wrap .erp-table th,
.erp-records-table-wrap .erp-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-records-table-wrap .records-actions-cell,
.erp-records-table-wrap .erp-col-actions {
    white-space: normal;
}

.erp-records-table-wrap .records-actions-cell .erp-actions {
    flex-wrap: wrap;
}

.erp-records-table-wrap .erp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef3f8;
    box-shadow: 0 1px 0 #d9e2ec;
}

.plate-queue-table col.col-jc { width: 10%; }
.plate-queue-table col.col-type { width: 6%; }
.plate-queue-table col.col-sku { width: 13%; }
.plate-queue-table col.col-job { width: 15%; }
.plate-queue-table col.col-awc { width: 7%; }
.plate-queue-table col.col-stage { width: 8%; }
.plate-queue-table col.col-plate-set { width: 7%; }
.plate-queue-table col.col-colors { width: 6%; }
.plate-queue-table col.col-impression { width: 7%; }
.plate-queue-table col.col-progress { width: 11%; }
.plate-queue-table col.col-requested { width: 10%; }

.plate-queue-table {
    min-width: 1020px;
}

.erp-records-table-wrap .plate-queue-table {
    min-width: 1020px;
}

.plates-records-table {
    min-width: 1100px;
}

.erp-records-table-wrap .plates-records-table {
    min-width: 1100px;
}

.plates-records-table col.col-jc { width: 9%; }
.plates-records-table col.col-type { width: 6%; }

.plate-requests-table col.col-jc { width: 8%; }
.plate-requests-table col.col-type { width: 5%; }
.plate-requests-table col.col-sku { width: 14%; }
.plate-requests-table col.col-job { width: 15%; }
.plate-requests-table col.col-set { width: 5%; }
.plate-requests-table col.col-awc { width: 7%; }
.plate-requests-table col.col-qty { width: 4%; }
.plate-requests-table col.col-workflow { width: 7%; }
.plate-requests-table col.col-machine { width: 6%; }
.plate-requests-table col.col-colors { width: 6%; }
.plate-requests-table col.col-impression { width: 5%; }
.plate-requests-table col.col-progress { width: 6%; }
.plate-requests-table col.col-date { width: 6%; }
.plate-requests-table col.col-user { width: 6%; }

.plate-requests-table {
    min-width: 1100px;
    table-layout: fixed;
}

.erp-records-table-wrap .plate-requests-table {
    min-width: 1100px;
}

.plate-requests-table thead th.plates-jc-cell,
.plate-requests-table tbody td.plates-jc-cell {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    background: #fff;
    box-shadow: 2px 0 6px rgba(31, 47, 67, 0.08);
}

.plate-requests-table thead th.plates-jc-cell {
    z-index: 5;
    background: #eef3f8;
}

.plates-jc-cell .plates-jc-link {
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-weight: 700;
    color: #284b6f;
    text-decoration: none;
}

.plates-jc-cell .plates-jc-link:hover {
    color: var(--erp-primary-strong);
    text-decoration: underline;
}

.plates-progress-cell {
    white-space: normal;
}

.plates-workflow-cell .erp-badge {
    font-size: 0.68rem;
}

.plates-module-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.plates-module-nav .erp-btn.is-active {
    background: var(--erp-primary, #2b6cb0);
    color: #fff;
    border-color: var(--erp-primary, #2b6cb0);
}

.plates-add-btn {
    background-color: #6f42c1;
    color: #fff;
    border: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.plates-filter-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plates-filter-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    color: #4a5568;
}

.plates-filter-link.is-active {
    color: #6f42c1;
    background: #f4f0fa;
    font-weight: 600;
}

.plates-filter-count {
    background: #edf2f7;
    color: #4a5568;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.plates-filter-link.is-active .plates-filter-count {
    background: #6f42c1;
    color: #fff;
}

.plate-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
}

.plate-detail-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 12px;
}

.plate-detail-stepper {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0 4%;
}

.plate-detail-stepper__track,
.plate-detail-stepper__fill {
    position: absolute;
    top: 15px;
    left: 10%;
    right: 10%;
    height: 2px;
    z-index: 1;
}

.plate-detail-stepper__track {
    background: #e2e8f0;
}

.plate-detail-stepper__fill {
    background: #6f42c1;
    right: auto;
    transition: width 0.3s;
}

.plate-detail-stepper.is-sent .plate-detail-stepper__fill { width: 33%; }
.plate-detail-stepper.is-received .plate-detail-stepper__fill { width: 66%; }
.plate-detail-stepper.is-issued .plate-detail-stepper__fill { width: 100%; }

.plate-detail-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    width: 25%;
}

.plate-detail-step__dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    background: #fff;
    color: #a0aec0;
    border: 2px solid #cbd5e0;
}

.plate-detail-step.is-done .plate-detail-step__dot {
    background: #6f42c1;
    color: #fff;
    border-color: #6f42c1;
}

.plate-detail-step.is-done.is-final .plate-detail-step__dot {
    background: #48bb78;
    border-color: #48bb78;
}

.plate-detail-step__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aec0;
    margin-top: 6px;
    text-align: center;
}

.plate-detail-step.is-done .plate-detail-step__label {
    color: #2d3748;
}

.plate-detail-step.is-done.is-final .plate-detail-step__label {
    color: #48bb78;
}

.plate-action-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plate-action-callout {
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.plate-action-callout.is-info {
    background: #ebf8ff;
    border-left: 4px solid #3182ce;
    color: #2b6cb0;
}

.plate-action-callout.is-success {
    background: #f0fff4;
    border-left: 4px solid #38a169;
    color: #276749;
}

.plate-action-callout.is-warning {
    background: #fdf2f8;
    border-left: 4px solid #db2777;
    color: #be185d;
}

.plate-color-btn.is-active {
    background-color: #6f42c1 !important;
    color: #fff !important;
    border-color: #6f42c1 !important;
}

.plate-input-readonly {
    background-color: #e2e8f0;
    cursor: not-allowed;
}

.plate-detail-empty {
    text-align: center;
    padding: 15px 10px;
    color: #718096;
    font-size: 0.85rem;
}

@media (max-width: 1100px) {
    .plate-detail-layout {
        grid-template-columns: 1fr;
    }

    .plate-detail-side {
        position: static;
    }
}

.erp-records-table-wrap .erp-plate-type-cell {
    white-space: normal;
    text-align: center;
    overflow: visible;
}

.erp-plate-type-flag,
.plate-queue-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.2;
}

.erp-plate-type-flag.is-new,
.plate-queue-flag.is-new {
    color: #3182ce;
    background: #ebf8ff;
    border: 1px solid #90cdf4;
}

.erp-plate-type-flag.is-repeat,
.plate-queue-flag.is-repeat {
    color: #d69e2e;
    background: #fffff0;
    border: 1px solid #f6e05e;
}

.erp-plate-type-flag.is-replacement,
.plate-queue-flag.is-replacement {
    color: #c05621;
    background: #fffaf0;
    border: 1px solid #fbd38d;
}

.plate-queue-jc {
    display: block;
    min-width: 0;
}

.plate-queue-jc a {
    color: #284b6f;
    text-decoration: none;
    font-weight: 700;
}

.plate-queue-jc a:hover {
    color: var(--erp-primary-strong);
    text-decoration: underline;
}

.plate-queue-progress {
    white-space: normal;
}

.plate-queue-progress a {
    color: #284b6f;
    font-weight: 600;
    text-decoration: none;
}

.plate-queue-progress a:hover {
    color: var(--erp-primary-strong);
    text-decoration: underline;
}

.erp-empty-state {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(115, 115, 115, 0.08);
    color: #4a5568;
    margin: 0;
}

@media (max-width: 960px) {
    .erp-records-filter-sidebar,
    .erp-records-pane-head {
        position: static;
        max-height: none;
    }

    .erp-records-table-wrap {
        max-height: none;
    }
}

.erp-filter-sidebar-title {
    margin: 0;
    font-size: 16px;
    color: #18314b;
}

.erp-filter-group {
    display: grid;
    gap: 8px;
}

.erp-field-label {
    font-size: 11px;
    color: #3c4b5c;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.erp-filter-actions {
    display: grid;
    gap: 8px;
}

.erp-records-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.erp-table-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.erp-table-meta-text {
    margin: 0;
    font-size: 12px;
    color: var(--erp-text-muted);
}

.erp-table-scroll {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #e5eaf0;
    border-radius: 4px;
    background: #fff;
}

.erp-table-scroll:not(.erp-records-table-wrap) {
    max-height: calc(100vh - 260px);
}

.erp-table-scroll.is-scroll-x {
    overflow-x: auto;
}

.erp-table-dense {
    font-size: 11px;
}

.erp-table-dense thead th {
    font-size: 10px;
    padding: 8px 8px;
    background: #eef3f8;
}

.erp-table-dense tbody td {
    padding: 7px 8px;
}

.erp-table-link {
    color: #284b6f;
    text-decoration: none;
    font-weight: 700;
}

.erp-table-link:hover {
    color: var(--erp-primary-strong);
}

.erp-inline-message {
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--erp-border);
    font-size: 12px;
}

.erp-inline-message.success {
    background: #e6f4ea;
    color: #1e6d33;
    border-color: #bee3c7;
}

.erp-inline-message.error,
.erp-inline-message.danger {
    background: #fce8e6;
    color: #8a1c1c;
    border-color: #f5c2c7;
}

.erp-text-muted {
    color: var(--erp-text-muted);
}

.erp-text-danger {
    color: #b03a00;
    font-weight: 700;
}

.erp-text-success {
    color: #1a6830;
    font-weight: 700;
}

.erp-text-soft {
    color: #888;
}

.erp-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

.erp-pill-info {
    background: #d0ebff;
    color: #1a5e96;
}

.erp-pill-warning {
    background: #fff3cd;
    color: #7a4200;
}

.erp-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
}

.erp-inline-form .erp-input {
    width: 220px;
    min-height: 32px;
    padding: 6px 8px;
}

.erp-pagination {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
    flex-wrap: wrap;
}

.erp-header-shell {
    position: sticky;
    top: 0;
    z-index: 70;
    background: #f3f5f8;
}

.erp-header-topbar {
    background: #1f2c3f;
    color: #dbe5f2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.erp-header-brand-stack {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.erp-header-brand {
    display: grid;
    gap: 2px;
    text-decoration: none;
}

.erp-header-title {
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.1;
}

.erp-header-subtitle {
    font-size: 11px;
    color: #9db2c9;
}

.erp-header-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.erp-header-nav a,
.erp-header-subnav a {
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
}

.erp-header-nav a {
    color: #c2d2e5;
}

.erp-header-nav a:hover,
.erp-header-nav a.is-active {
    color: #ffffff;
}

.erp-header-subbar {
    background: #e8ecf2;
    border-bottom: 1px solid #d3dbe5;
    padding: 6px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.erp-header-subnav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.erp-header-subnav a {
    color: #4a5f78;
}

.erp-header-subnav a:hover,
.erp-header-subnav a.is-active {
    color: #1f3c5a;
}

.erp-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.erp-header-note {
    color: #72839a;
    font-size: 11px;
}

.erp-workflow-card {
    display: grid;
    gap: 10px;
}

.erp-workflow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.erp-workflow-meta {
    font-size: 11px;
    color: var(--erp-text-muted);
}

.erp-workflow-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 8px;
}

.erp-workflow-step-link {
    position: relative;
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    background: #fff;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    color: #35516f;
}

.erp-workflow-step-link.is-active {
    background: var(--erp-primary);
    border-color: var(--erp-primary-strong);
    color: #fff;
    box-shadow: 0 8px 18px rgba(47, 110, 167, 0.18);
}

@media (max-width: 1200px) {
    .erp-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .erp-shell { grid-template-columns: 1fr; }
    .erp-sidebar { position: static; max-height: none; }
    .erp-records-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .erp-filter-bar { grid-template-columns: 1fr; }
    .erp-workflow { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .erp-content { padding: 14px; }
    .erp-header-subbar,
    .erp-header-topbar,
    .erp-page-intro,
    .erp-banner,
    .erp-card-header,
    .erp-workflow-header {
        align-items: flex-start;
    }
    .erp-header-actions,
    .erp-actions-right {
        margin-left: 0;
    }
    .erp-workflow-track {
        grid-template-columns: 1fr 1fr;
    }
    .erp-table-scroll {
        max-height: none;
    }
}

/* ── Dropdown Navigation ────────────────────────────────────────── */
.erp-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.erp-nav-item > a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.erp-nav-caret {
    font-size: 9px;
    opacity: 0.65;
    line-height: 1;
    margin-left: 1px;
}

.erp-nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #1b2635;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    min-width: 190px;
    z-index: 1000;
    padding: 5px 0;
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}

.erp-nav-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
}

.erp-nav-dropdown a {
    display: block !important;
    padding: 8px 14px !important;
    color: #c2d2e5 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    border-left: 2px solid transparent;
    text-decoration: none !important;
    transition: background 0.1s, border-color 0.1s;
}

.erp-nav-dropdown a:hover,
.erp-nav-dropdown a.is-active {
    background: rgba(255,255,255,0.07) !important;
    color: #ffffff !important;
    border-left-color: #4a90d9 !important;
}

.erp-nav-item:hover .erp-nav-dropdown,
.erp-nav-item:focus-within .erp-nav-dropdown {
    display: block;
}

/* Module nav on base.html pages */
.erp-module-nav-bar {
    background: #1f2c3f;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.erp-module-nav-bar .erp-header-nav {
    gap: 12px;
}

.erp-module-nav-bar .erp-header-actions {
    margin-left: auto;
}

/* Page header with module nav */
.erp-header-with-nav {
    display: grid;
    grid-template-rows: auto auto;
}

.erp-header-page-row {
    background: #f9fbfd;
    border-bottom: 1px solid var(--erp-border);
    padding: 10px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}