/* VarioERP visual template inspired by the provided dashboard mockups. */
:root {
    --vario-app-bg: #f5f7fb;
    --vario-content-bg: #f5f7fb;
    --vario-surface: #ffffff;
    --vario-surface-muted: #f8fafd;
    --vario-border: #e5eaf2;
    --vario-border-soft: #eef2f7;
    --vario-border-strong: #d8e0ec;
    --vario-text: #263244;
    --vario-text-strong: #111827;
    --vario-text-muted: #6b7788;
    --vario-accent: #2563EB;
    --vario-active-bg: #2563EB;
    --vario-active-text: #ffffff;
    --vario-button-radius: 5px;
    --vario-control-radius: 5px;
    --bs-primary: #1769e0;
}

html,
body {
    background: #f5f7fb !important;
    color: #263244;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.btn {
    border-radius: 5px !important;
    font-weight: 700;
}

.btn-primary {
    background: #1769e0 !important;
    border-color: #1769e0 !important;
}

.btn-outline-secondary,
.btn-outline-primary,
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-waning) {
    color: #253247;
    background: #ffffff;
    border-color: #e0e6ef;
}

.form-control,
.form-select {
    border-color: #dfe6f0;
    border-radius: 5px !important;
    background-color: #ffffff;
}

.vario-page-title,
.vario-hero {
    padding: 0;
    margin-bottom: 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.vario-page-title h1,
.vario-hero h1,
.vario-dashboard-header h1 {
    color: #111827;
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: 0;
}

.vario-page-title p,
.vario-hero p {
    color: #6b7788;
}

.vario-panel,
.vario-erp-section,
.vario-erp-module-card,
.vario-erp-process-card,
.admin-action,
.vario-win-grid-pane,
.vario-win-details-pane {
    background: #ffffff !important;
    border: 1px solid #e5eaf2 !important;
    border-radius: 7px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.vario-warehouse-access-panel {
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid #e5eaf2 !important;
    border-radius: 7px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.vario-warehouse-type-rail {
    display: grid;
    align-content: start;
    gap: 0.16rem;
    min-height: 0;
    padding: 0.24rem;
    background: #ffffff !important;
    border: 1px solid #e5eaf2 !important;
    border-radius: 7px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.vario-win-workbench {
    background: transparent !important;
    border: 0 !important;
}

.vario-win-document-tabs {
    min-height: 34px !important;
    padding: 0 !important;
    margin-bottom: 12px;
    background: transparent !important;
    border: 0 !important;
    gap: 4px !important;
}

.vario-win-tab {
    min-width: 0 !important;
    height: 32px !important;
    padding: 7px 12px !important;
    color: #5d6b7d !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 5px !important;
    font-size: 0.84rem !important;
    font-weight: 750 !important;
}

.vario-win-tab.active {
    color: #1769e0 !important;
    background: #eef5ff !important;
}

.vario-win-commandbar,
.vario-win-filterbar,
.vario-warehouse-summarybar {
    margin-bottom: 12px;
    padding: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e5eaf2 !important;
    border-radius: 7px !important;
}

.vario-moden-table {
    color: #263244;
    font-size: 0.78rem;
}

.vario-data-grid thead th,
.vario-moden-table thead th {
    background: #ffffff !important;
    color: #6b7788 !important;
    border-bottom: 1px solid #e5eaf2 !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    text-transform: none !important;
}

.vario-moden-table td {
    border-color: #edf1f6 !important;
}

.vario-status-pill,
.vario-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 0;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}

.vario-pill.yellow,
.vario-status-pill.waning,
.vario-status-pill.warning {
    color: #9a6a00;
    background: #fff4cf;
}

.vario-pill.blue,
.vario-status-pill.info {
    color: #1769e0;
    background: #eaf2ff;
}

.vario-pill.gray {
    color: #596579;
    background: #f0f3f7;
}

.vario-status-pill.success {
    color: #168052;
    background: #e8f8f0;
}

.vario-status-pill.danger {
    color: #c82245;
    background: #fff0f4;
}

.vario-dashboard-page {
    display: grid;
    gap: 16px;
}

.vario-dashboard-header,
.vario-dashboard-header-actions,
.vario-dashboard-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vario-dashboard-header h1,
.vario-dashboard-card h2,
.vario-quick-actions-card h2 {
    margin: 0;
}

.vario-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 14px;
}

.vario-kpi-card,
.vario-dashboard-card,
.vario-quick-actions-card {
    background: #ffffff;
    border: 1px solid #e5eaf2;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.vario-kpi-card {
    display: flex;
    justify-content: space-between;
    min-height: 116px;
    padding: 20px;
}

.vario-kpi-card div:first-child {
    display: grid;
    align-content: start;
    gap: 8px;
}

.vario-kpi-card span,
.vario-dashboard-card header small {
    color: #6b7788;
    font-size: 0.78rem;
}

.vario-kpi-card strong {
    color: #111827;
    font-size: 1.28rem;
    font-weight: 850;
}

.vario-kpi-card a,
.vario-dashboard-card a,
.vario-quick-actions-card a {
    color: #1769e0;
    text-decoration: none;
    font-weight: 700;
}

.vario-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-weight: 850;
}

.vario-kpi-icon.green {
    color: #168052;
    background: #e8f8f0;
}

.vario-kpi-icon.amber {
    color: #b77900;
    background: #fff6d7;
}

.vario-kpi-icon.blue {
    color: #1769e0;
    background: #eaf2ff;
}

.vario-kpi-icon.rose {
    color: #c82245;
    background: #fff0f4;
}

.positive {
    color: #168052 !important;
}

.negative,
.danger {
    color: #c82245 !important;
}

.vario-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr) 300px;
    gap: 14px;
    align-items: start;
}

.vario-dashboard-card {
    padding: 16px;
    min-width: 0;
}

.vario-dashboard-card.span-2 {
    grid-column: span 2;
}

.vario-dashboard-card h2 {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 850;
}

.vario-card-tabs {
    display: flex;
    gap: 18px;
    margin-top: 18px;
}

.vario-card-tabs button {
    padding: 0 0 8px;
    color: #6b7788;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 0.78rem;
}

.vario-card-tabs button.active {
    color: #1769e0;
    border-bottom-color: #1769e0;
}

.vario-moden-table {
    margin-top: 8px;
    margin-bottom: 0;
}

.vario-dashboard-card footer {
    padding-top: 8px;
    text-align: right;
}

.vario-document-list,
.vario-alert-list,
.vario-task-list,
.vario-product-bars {
    display: grid;
    gap: 0;
}

.vario-document-list a {
    display: grid;
    grid-template-columns: 34px minmax(95px, 0.9fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    color: #263244;
    border-bottom: 1px solid var(--vario-color-border-subtle);
    text-decoration: none;
}

.vario-document-list b {
    color: #168052;
    font-size: 0.78rem;
}

.vario-doc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 800;
}

.vario-doc-badge.green {
    color: #168052;
    background: #e8f8f0;
}

.vario-doc-badge.blue {
    color: #1769e0;
    background: #eaf2ff;
}

.vario-doc-badge.purple {
    color: #6f42c1;
    background: #f2edff;
}

.vario-doc-badge.red {
    color: #c82245;
    background: #fff0f4;
}

.vario-dashboard-side {
    display: grid;
    gap: 14px;
}

.vario-alert-list div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vario-color-border-subtle);
}

.vario-alert-list i {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
}

.vario-alert-list i.yellow {
    background: #f4b400;
}

.vario-alert-list i.red {
    background: #e11d48;
}

.vario-alert-list i.blue {
    background: #1769e0;
}

.vario-alert-list span,
.vario-task-list small,
.vario-document-list small {
    color: #6b7788;
    font-size: 0.72rem;
}

.vario-task-list label,
.vario-task-list-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6;
}

.vario-task-open {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.vario-task-open:hover,
.vario-task-open:focus-visible {
    color: var(--vario-color-primary-600);
}

.vario-task-list-state {
    padding: 12px 0;
    color: #6b7788;
    font-size: 0.78rem;
}

.vario-task-list-state.error {
    color: #c82245;
}

.vario-task-list span {
    display: grid;
}

.vario-task-list b {
    color: #c82245;
    font-size: 0.72rem;
}

.vario-line-chart {
    height: 214px;
    padding-top: 12px;
}

.vario-line-chart svg {
    width: 100%;
    height: 100%;
}

.vario-line-chart .grid {
    fill: none;
    stroke: #edf1f6;
    stroke-width: 1;
}

.vario-line-chart .line {
    fill: none;
    stroke: #1769e0;
    stroke-width: 3;
}

.vario-product-bars>div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px 46px;
    gap: 10px;
    align-items: center;
    min-height: 30px;
}

.vario-product-bars div div {
    height: 8px;
    border-radius: 999px;
    background: #edf1f6;
    overflow: hidden;
}

.vario-product-bars i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1769e0;
}

.vario-quick-actions-card {
    padding: 16px;
}

.vario-quick-actions-card div {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.vario-quick-actions-card a {
    min-width: 170px;
    padding: 14px 18px;
    border-radius: 6px;
    text-align: center;
}

.vario-quick-actions-card a.green {
    color: #168052;
    background: #e8f8f0;
}

.vario-quick-actions-card a.blue {
    color: #1769e0;
    background: #eaf2ff;
}

.vario-quick-actions-card a.purple {
    color: #6f42c1;
    background: #f2edff;
}

.vario-quick-actions-card a.yellow {
    color: #9a6a00;
    background: #fff6d7;
}

.vario-quick-actions-card a.teal {
    color: #0f766e;
    background: #e8fbf8;
}

@media (max-width: 1400px) {
    .vario-kpi-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .vario-dashboard-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
    }

    .vario-dashboard-side {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .vario-kpi-grid,
    .vario-dashboard-grid,
    .vario-dashboard-side {
        grid-template-columns: 1fr;
    }

    .vario-dashboard-card.span-2 {
        grid-column: auto;
    }
}