/* ========= Reset & Variables ========= */
* { box-sizing: border-box; }

:root{
    /* Typografia */
    --font-family: "Inter var", sans-serif;
    --font-feature-settings: "cv02","cv03","cv04","cv11","ss01";

    /* Kolory */
    --bg: #ffffff;
    --muted:#6b7b88;
    --text:#111827;
    --primary:#2563eb;
    --border:#e5e7eb;
    --sidebar-bg:#eef3fa;
    --sidebar-border:#d5e1f9;
    --menubar-bg:#f9fafb;

    /* Spójność z Prime* utilami */
    --p-primary-color: var(--primary);
    --title-text-color: #4b5563;
}

html, body{
    margin:0;
    height:100%;
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.4;
    color: var(--text);
    font-feature-settings: var(--font-feature-settings);
    background: var(--bg);
}

/* ========= MENUBAR ========= */
.menubar{
    position: sticky; top:0; z-index:10;
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:8px;
    min-height:38px;
    background: var(--menubar-bg);
    border-bottom:1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.menubar__start{ display:flex; align-items:center; gap:10px; }

.brand{
    display:flex; align-items:center; gap:10px;
    letter-spacing:.02em;
}

.brand__avatar{
    width:28px; height:28px; display:grid; place-items:center;
    border-radius:999px; background:var(--primary); color:#fff;
}

/* Jak w „oryginale”: większe, bold, primary */
.brand__text{
    font-family: var(--font-family);
    font-feature-settings: var(--font-feature-settings);
    font-weight: 700;              /* .font-bold */
    font-size: 1.125rem;           /* .text-lg (18px) */
    line-height: 1.4;
    color: var(--title-text-color); /* .text-primary */
}

.menubar__burger{
    display:inline-grid; place-items:center;
    padding:6px; border:none; background:transparent; color:#475569; border-radius:8px; cursor:pointer;
}
.menubar__burger:hover{ background:#f1f5f9; }

.menubar__center{ display:flex; align-items:center; }
.search{ display:flex; gap:8px; align-items:center; width:100%; max-width:520px; }
.search input{
    flex:1; height:34px; padding:6px 10px;
    border:1px solid var(--border); border-radius:10px; background:#fff;
    font-family: var(--font-family);
    font-feature-settings: var(--font-feature-settings);
}
.btn{
    height:34px; padding:6px 12px; border:1px solid var(--border); background:#fff; border-radius:10px; cursor:pointer;
    font-family: var(--font-family);
    font-feature-settings: var(--font-feature-settings);
}
.btn--primary{
    background: var(--primary);
    color:#fff;
    border-color: var(--primary);
}
.btn--primary:hover{
    background: #1d4ed8;
    color:#fff;
}
.btn--ghost{
    background:transparent;
}
.btn.is-open .pi{
    transform:rotate(180deg);
}
.btn .pi{
    transition:transform 0.16s ease;
}
.btn--danger{
    color:#dc2626;
    border-color:#fecaca;
    background:#fff5f5;
}
.btn--danger:hover{
    background:#fee2e2;
    color:#b91c1c;
}
.btn:hover{ background:#f8fafc; }

.menubar__end{ display:flex; justify-content:flex-end; align-items:center; }
.logout{
    display:inline-flex; gap:6px; align-items:center; color:var(--primary);
    text-decoration:none; padding:6px 8px; border-radius:8px;
    font-feature-settings: var(--font-feature-settings);
}
.logout:hover{ background:#eff6ff; }

.bl-offline-banner{
    position: sticky;
    top: 54px;
    z-index: 9;
    padding: 10px 14px;
    background: #fee2e2;
    border-bottom: 1px solid #fecaca;
    color: #991b1b;
    font-size: 14px;
    font-weight: 600;
}

/* ========= Layout ========= */
.layout{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    min-height: calc(100vh - 54px);
}

/* ========= Sidebar ========= */
.sidebar{
    min-width:220px; max-width:240px;
    background: var(--sidebar-bg);
    border-right:1px solid var(--sidebar-border);
    padding:18px 8px 8px 16px;
}

/* Tytuł z jednopiętrowym „a” */
.sidebar__title{
    margin: 0 0 10px 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--primary);
    font-feature-settings: "ss01" 1, "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;
    font-variant-alternates: stylistic(ss01);
}

.sidebar__actions{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }

.chip{
    font-size:12px; padding:4px 10px; min-width:0;
    border:1px solid var(--border); background:transparent; border-radius:999px; color:#64748b;
    font-family: var(--font-family);
    font-feature-settings: var(--font-feature-settings);
}
.chip[disabled]{ opacity:.6; }
.chip--primary{ background:#bfdbfe; color:var(--primary); border-color:#bfdbfe; }

.sidebar__list{ list-style:none; padding:0; margin:0; }

/* ========= Content ========= */
.content{
    flex:1; background:#fff;
    /*padding:12px 24px 24px;*/
}
.content__title{
    margin:0 0 24px 0;
    /*text-align:center;*/
    font-size:16px;
    color: var(--primary);
    font-weight:700;
    font-feature-settings: var(--font-feature-settings);
}
.content__empty{
    margin-top:40px;
    text-align:center;
    font-size:16px;
    font-feature-settings: var(--font-feature-settings);
}

/* ========= Utilities (jak w Prime*) ========= */
.flex{ display:flex !important; }
.align-items-center{ align-items:center !important; }
.gap-2{ gap:.5rem !important; }
.text-lg{ font-size:1.125rem !important; }
.font-bold{ font-weight:700 !important; }
.text-primary{ color: var(--p-primary-color) !important; }

/* ========= Responsive ========= */
@media (min-width: 900px){
    .menubar__burger{ display:none; }
}


.sidebar { min-width:220px; max-width:240px; padding:18px 8px 8px 16px; background:#eef3fa; border-right:1px solid #d5e1f9; }
.sidebar__title { font-weight:600; color:#2563eb; margin-bottom:10px; font-size:16px; }
.sidebar__actions { display:flex; gap:8px; margin-bottom:8px; }
.chip { font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid #d6e0f7; background:#f3f6ff; }
.chip--primary { background:#dbe7ff; border-color:#c9dbff; }
.sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar__list li {
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    font-weight: 400;
    padding: 2px 2px 2px 0;
    font-size: 13px;
    opacity: .9;
    cursor: pointer; /* <--- dodane */
    transition: background .12s ease, opacity .12s ease;
}

.sidebar__list li:hover {
    background: rgba(0,0,0,.05);   /* podświetlenie na hover */
}

.sidebar__list li.is-active {
    background: rgba(37,99,235,.1); /* tło aktywnego */
    outline: 1px solid rgba(37,99,235,.3); /* obrys aktywnego */
    opacity: 1; /* pełna widoczność */
}
.sidebar__list .color-box { width:14px; height:14px; border-radius:3px; margin-right:9px; border:1px solid #ddd; display:inline-block; }

.badge--clickable { cursor: pointer; }

.status-picker {
    position: absolute;
    z-index: 9999;
    min-width: 240px;
    max-height: 360px;
    overflow: auto;
    background: var(--surface-a, #fff);
    color: var(--text-color, #111);
    border: 1px solid var(--surface-d, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.status-picker__header {
    padding: 10px 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--surface-d, #e5e7eb);
}

.status-picker__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.status-picker__list li {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.status-picker__list li:hover {
    background: var(--surface-c, #f3f4f6);
}

.status-picker__list li.is-current {
    font-weight: 600;
}

.status-picker .color-box {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.06);
}


/* ====== MAGAZYN (HTML+CSS) ====== */
.inv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 14px}
.inv-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:12px 14px;box-shadow:0 1px 6px #c5d3ea22}
.inv-card__label{color:#64748b;font-size:12px}
.inv-card__value{color:#0f172a;font-weight:700;font-size:22px}

.inv-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:8px 10px;margin-bottom:8px}
.inv-search{position:relative;min-width:280px}
.inv-search .pi{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#64748b}
.inv-search input{width:100%;padding:8px 10px 8px 32px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.inv-select{padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.inv-quick{display:flex;gap:8px}
.inv-qbtn{background:#eef2ff}
.inv-qbtn--warn{background:#fff7ed}
.inv-qbtn--danger{background:#fff1f2}
.inv-qbtn.inv-qbtn--active{background:#e0ecff}
.ml-auto{margin-left:auto}

.inv-tablewrap {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: visible;   /* zamiast auto */
    max-height: none;    /* usuwa limit wysokości */
}

.inv-table{width:100%;border-collapse:collapse;font-size:13px}
.inv-table thead th{position:sticky;top:0;background:#f8fafc;border-bottom:1px solid #e5e7eb;padding:10px;text-align:left;font-weight:700;white-space:nowrap}
.inv-table tbody td{border-top:1px solid #f1f5f9;padding:10px;vertical-align:middle}
.inv-table tbody tr:nth-child(odd){background:#fafcff}
.ta-right{text-align:right}
.ta-center{text-align:center}

.th-sort{display:inline-block;width:14px;height:14px;vertical-align:middle;opacity:.55;margin-left:4px;background:transparent}
th.is-active .th-sort{opacity:1}
.th-sort--asc::after{content:"▲";font-size:10px}
.th-sort--desc::after{content:"▼";font-size:10px}

.inv-pill{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:9999px;font-weight:700;font-size:12px;color:#fff;padding:0 8px}
.inv-pill--ok{background:#22c55e}
.inv-pill--warn{background:#f59e0b}
.inv-pill--bad{background:#ef4444}

.inv-mono{font-family:ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}


.inv-pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;padding:10px 2px;color:#64748b}
.inv-pager__info{min-width:140px;text-align:center}

@media (max-width: 900px){
    .inv-stats{grid-template-columns:1fr}
    .inv-tablewrap{max-height:calc(100vh - 380px)}
}

/* Inventory – card-like row layout */
.inv-row { transition: background .12s ease; }
.inv-row:hover { background: #f9fbff; }

.inv-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #eef2ff;
    border: 1px solid #e5e7eb;
    display: block;
    box-sizing: border-box; /* <── kluczowe */
}

.inv-cell-main {
    display: flex; align-items: center; gap: 12px;
}
.inv-title {
    font-weight: 600; color: #0f172a; line-height: 1.25;
}
.inv-meta {
    font-size: 12px; color: #6b7280; margin-top: 2px;
}
.inv-meta strong { color: #374151; font-weight: 600; }

/* === Panel paddings (spójne jak Integracje) === */
#integrationsPanel,
#inventoryPanel,
#marketplacesPanel,
#automationPanel{
    padding-top: 16px;
    padding-left: 24px;
    box-sizing: border-box;
}
.card{
    margin:0 24px 18px 0;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15, 23, 42, 0.04);
    overflow:hidden;
}
.card__header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    background:linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
    border-bottom:1px solid var(--border);
}
.card__header > strong{
    font-size:15px;
    color:#0f172a;
}
.card__body{
    padding:16px;
}
.integration-title{
    font-weight:600;
    color:#1f2937;
    margin-bottom:10px;
}
.integration-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}
.integration-form{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.integration-form__row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap: wrap;
}
.integration-form__row input{
    flex:1;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    font-size:14px;
    font-family: var(--font-family);
}
.integration-form__row input:focus{
    outline:none;
    border-color: var(--primary);
    box-shadow:0 0 0 2px rgba(59,130,246,0.12);
}
.integration-hint{
    margin:0;
    color:#6b7280;
    font-size:13px;
}
.integration-accounts{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.integration-accounts__title{
    font-size:13px;
    color:#6b7280;
}
.integration-accounts__list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.integration-account{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#f8fafc;
    color:#1f2937;
    font-size:12px;
}
.integration-account__remove{
    margin-left:4px;
    border:none;
    background:transparent;
    color:#ef4444;
    cursor:pointer;
    font-size:11px;
    font-weight:600;
}
.integration-account__remove:hover{
    text-decoration: underline;
}
.integration-account__remove:disabled{
    opacity:0.5;
    cursor:default;
    text-decoration:none;
}
.integration-account__icon{
    color:#16a34a;
    font-size:12px;
}
.integration-connected{
    padding:10px 12px;
    border:1px dashed var(--border);
    border-radius:10px;
    background:#f0f4ff;
    color:#0f172a;
    margin-bottom:10px;
}
.integration-table{
    width:100%;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    background:#f9fafb;
    font-size:14px;
}
.integration-table--loading{
    padding:12px;
}
.integration-table__row{
    display:grid;
    grid-template-columns: 1.4fr 1.6fr 1.2fr 110px;
    align-items:center;
    min-height: 44px;
}
.integration-table__head{
    background:#e5edff;
    font-weight:700;
}
.integration-table__body .integration-table__row{
    background:#fff;
}
.integration-table__cell{
    padding:8px 12px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    height: 100%;
}
.integration-table__cell--actions{
    justify-content:flex-end;
}

.integration-table .btn--sm{
    padding:6px 8px;
    font-size:12px;
    line-height:1.1;
    white-space: nowrap;
}
.integration-table__row:last-child .integration-table__cell{
    border-bottom:none;
}
.integration-empty{
    padding:12px;
    color:#6b7280;
    font-size:14px;
    background:#f9fafb;
    border:1px dashed var(--border);
    border-radius:8px;
}
.automation-feedback{
    margin-top:14px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#f8fafc;
    color:#475569;
    font-size:13px;
}
.automation-feedback--success{
    border-color:#bbf7d0;
    background:#f0fdf4;
    color:#166534;
}
.automation-feedback--error{
    border-color:#fecaca;
    background:#fef2f2;
    color:#991b1b;
}
.automation-status-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 0.9fr);
    gap:18px;
    margin-top:16px;
}
.automation-status-layout--rules{
    grid-template-columns:minmax(0, 1fr);
}
.automation-statuses{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.automation-rules,
.automation-manual-list,
.automation-stack{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.automation-status{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow:0 4px 18px rgba(15, 23, 42, 0.04);
}
.automation-status--active{
    border-color:#93c5fd;
    box-shadow:0 0 0 2px rgba(59, 130, 246, 0.08);
}
.automation-status--inactive{
    opacity:0.82;
}
.automation-status__swatch{
    width:16px;
    height:16px;
    margin-top:2px;
    border-radius:5px;
    border:1px solid rgba(15, 23, 42, 0.10);
    background:var(--status-color, #cbd5e1);
}
.automation-status__identity{
    min-width:0;
}
.automation-status__title-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}
.automation-status__title{
    margin:0;
    font-size:15px;
    color:#0f172a;
}
.automation-status__meta{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    font-size:12px;
    color:#64748b;
}
.automation-status__actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.automation-rule{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow:0 4px 18px rgba(15, 23, 42, 0.04);
}
.automation-rule[draggable="true"]{
    cursor:grab;
}
.automation-rule--dragging{
    opacity:0.55;
}
.automation-rule--active{
    border-color:#93c5fd;
    box-shadow:0 0 0 2px rgba(59, 130, 246, 0.08);
}
.automation-rule__handle{
    width:30px;
    min-height:30px;
    display:grid;
    place-items:center;
    border:1px dashed #cbd5e1;
    border-radius:10px;
    color:#64748b;
    background:#f8fafc;
    font-size:13px;
}
.automation-rule__identity{
    min-width:0;
}
.automation-rule__title-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}
.automation-rule__title{
    margin:0;
    font-size:15px;
    color:#0f172a;
}
.automation-rule__meta,
.automation-rule__summary{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    font-size:12px;
    color:#64748b;
}
.automation-rule__summary code{
    padding:1px 6px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
}
.automation-rule__actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.automation-color-field{
    display:flex;
    align-items:center;
    gap:10px;
}
.automation-color-preview{
    width:18px;
    height:18px;
    flex:0 0 18px;
    border-radius:5px;
    border:1px solid rgba(15, 23, 42, 0.10);
    background:#cbd5e1;
}
.automation-editor__readonly{
    min-height:42px;
    display:flex;
    align-items:center;
    padding:10px 12px;
    border:1px dashed var(--border);
    border-radius:10px;
    background:#f8fafc;
    color:#475569;
    font-size:13px;
}
.automation-editor__section--compact{
    margin-top:16px;
    padding-top:16px;
}
.automation-editor__section{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid #e2e8f0;
}
.automation-editor__section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
    color:#0f172a;
}
.automation-layout__list,
.automation-layout__editor{
    min-width:0;
}
.automation-status-layout--rules .automation-layout__editor,
.automation-status-layout--rules .automation-layout__list{
    width:100%;
}
.automation-retired-note{
    margin-top:16px;
    padding:14px 16px;
    border-radius:14px;
    background:linear-gradient(135deg, #fff7ed 0%, #f8fafc 100%);
    border:1px solid #fed7aa;
    color:#9a3412;
    font-size:13px;
    line-height:1.5;
}
.automation-placeholder{
    min-height:260px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:28px 20px;
    border:1px dashed var(--border);
    border-radius:16px;
    background:linear-gradient(180deg, #f8fbff 0%, #fefefe 100%);
}
.automation-placeholder__icon{
    font-size:28px;
    color:#3b82f6;
    margin-bottom:12px;
}
.automation-placeholder__title{
    font-size:16px;
    font-weight:700;
    color:#0f172a;
}
.automation-placeholder__text{
    margin:8px 0 0 0;
    max-width:34ch;
    color:#64748b;
    font-size:13px;
    line-height:1.5;
}
.automation-editor{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    box-shadow:0 4px 18px rgba(15, 23, 42, 0.04);
    padding:16px;
}
.automation-editor__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.automation-editor__title{
    margin:0;
    font-size:16px;
    color:#0f172a;
}
.automation-editor__grid{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}
.automation-editor__field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:12px;
    color:#475569;
}
.automation-editor__field--wide{
    grid-column:1 / -1;
}
.automation-editor__input,
.automation-editor__select{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    color:#0f172a;
    font-size:14px;
    font-family:var(--font-family);
    box-sizing:border-box;
}
.automation-editor__input:focus,
.automation-editor__select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(59,130,246,0.12);
}
.automation-combobox{
    position:relative;
}
.automation-combobox__control{
    position:relative;
}
.automation-combobox__input{
    padding-right:44px;
}
.automation-combobox__toggle{
    position:absolute;
    top:50%;
    right:8px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:none;
    border-radius:8px;
    background:transparent;
    color:#64748b;
    cursor:pointer;
    transform:translateY(-50%);
}
.automation-combobox__toggle .pi{
    transition:transform 0.16s ease;
}
.automation-combobox.is-open .automation-combobox__toggle .pi{
    transform:rotate(180deg);
}
.automation-combobox__toggle:hover{
    background:#eff6ff;
    color:var(--primary);
}
.automation-combobox__toggle:focus-visible{
    outline:none;
    box-shadow:0 0 0 2px rgba(59,130,246,0.12);
}
.automation-combobox__dropdown{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    z-index:40;
    max-height:360px;
    overflow:auto;
    padding:8px;
    border:1px solid #cbd5e1;
    border-radius:14px;
    background:#ffffff;
    box-shadow:0 18px 40px rgba(15, 23, 42, 0.14);
}
.automation-combobox__group + .automation-combobox__group{
    margin-top:10px;
}
.automation-combobox__group-label{
    margin:0 0 6px 0;
    padding:0 4px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#64748b;
}
.automation-combobox__option{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:0;
    padding:10px 12px;
    border:1px solid transparent;
    border-radius:12px;
    background:transparent;
    color:#0f172a;
    text-align:left;
    cursor:pointer;
}
.automation-combobox__option:hover{
    border-color:#bfdbfe;
    background:#f8fbff;
}
.automation-combobox__option:focus-visible{
    outline:none;
    border-color:#60a5fa;
    box-shadow:0 0 0 2px rgba(59,130,246,0.12);
}
.automation-combobox__option + .automation-combobox__option{
    margin-top:4px;
}
.automation-combobox__option.is-highlighted{
    border-color:#93c5fd;
    background:#eff6ff;
}
.automation-combobox__option.is-selected{
    border-color:#2563eb;
    background:linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}
.automation-combobox__option.is-inactive{
    background:linear-gradient(180deg, #fff7ed 0%, #fffaf4 100%);
    border-color:#fed7aa;
}
.automation-combobox__option.is-selected.is-inactive{
    border-color:#fb923c;
    box-shadow:0 0 0 2px rgba(251,146,60,0.12);
}
.automation-combobox__option-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.automation-combobox__option-title{
    font-size:14px;
    font-weight:600;
    line-height:1.35;
    color:#0f172a;
}
.automation-combobox__option-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    font-size:12px;
    color:#64748b;
}
.automation-combobox__option-type{
    font-family:ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.automation-combobox__status{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}
.automation-combobox__status--active{
    background:#dcfce7;
    color:#166534;
}
.automation-combobox__status--inactive{
    background:#ffedd5;
    color:#9a3412;
}
.automation-combobox__empty{
    padding:12px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    background:#f8fafc;
    color:#64748b;
    font-size:13px;
}
.automation-editor__readonly--active{
    border-style:solid;
    border-color:#bbf7d0;
    background:#f0fdf4;
    color:#166534;
}
.automation-editor__readonly--inactive{
    border-style:solid;
    border-color:#fed7aa;
    background:#fff7ed;
    color:#9a3412;
}
.automation-check{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#334155;
    font-size:13px;
}
.automation-inline{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr)) auto;
    gap:10px;
    align-items:flex-start;
}
.automation-inline--trigger{
    grid-template-columns:minmax(0, 2fr) minmax(180px, 0.9fr);
}
.automation-inline--action{
    grid-template-columns:repeat(2, minmax(0, 1fr)) auto;
}
.automation-trigger{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.automation-trigger__card{
    background:linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.automation-trigger__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.automation-trigger__title-wrap{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.automation-trigger__title{
    color:#0f172a;
    font-weight:700;
    line-height:1.1;
}
.automation-trigger__title--primary{
    font-size:24px;
    letter-spacing:-0.02em;
}
.automation-trigger__title--secondary{
    font-size:15px;
}
.automation-trigger__subtitle{
    font-size:12px;
    color:#64748b;
}
.automation-trigger__separator{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 8px;
}
.automation-trigger__separator-line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg, rgba(148,163,184,0.15) 0%, rgba(148,163,184,0.65) 100%);
}
.automation-trigger__connector-chip{
    min-width:88px;
    height:30px;
    padding:4px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid #bfdbfe;
    background:#eff6ff;
    color:#1d4ed8;
    font-weight:700;
    text-align:center;
    box-shadow:0 6px 18px rgba(148,163,184,0.12);
}
.automation-card{
    padding:12px;
    border:1px solid #dbe5f0;
    border-radius:12px;
    background:#f8fbff;
}
.automation-card__meta{
    margin-top:6px;
    font-size:12px;
    color:#64748b;
}
.automation-card__row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}
.automation-card__error{
    margin-top:8px;
    padding:10px 12px;
    border-radius:10px;
    background:#fff1f2;
    border:1px solid #fecdd3;
    color:#9f1239;
    font-size:12px;
    white-space:pre-wrap;
    word-break:break-word;
}
.automation-card__error code{
    color:inherit;
}
.automation-muted{
    color:#64748b;
    font-size:12px;
}
.automation-editor__footer{
    margin-top:20px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
@media (max-width: 1180px){
    .automation-status-layout{
        grid-template-columns:1fr;
    }
}
@media (max-width: 820px){
    .automation-status,
    .automation-rule,
    .automation-editor__grid,
    .automation-inline,
    .automation-inline--trigger,
    .automation-inline--action{
        grid-template-columns:1fr;
    }
    .automation-trigger .btn[data-action="remove-trigger"]{
        margin-top:0;
    }
    .automation-trigger__header,
    .automation-trigger__separator{
        flex-direction:column;
        align-items:stretch;
    }
    .automation-trigger__separator{
        padding:0;
    }
    .card{
        margin-right:16px;
    }
}


/* === GÓRNE PRZYCISKI — styl Prime-like Menubar === */
.tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}

.tab {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-family);
    font-feature-settings: var(--font-feature-settings);
    color: #4b5563; /* neutralny szary jak w PrimeReact */
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tab:hover {
    background: #f1f5f9; /* delikatny hover */
    color: #111827;      /* ciemniejszy tekst */
}

.tab.active {
    background: #e0ecff;       /* lekki niebieski akcent */
    color: var(--primary);     /* kolor główny */
    font-weight: 600;
}

.tab.active:hover {
    background: #d5e3ff;       /* jaśniejszy hover */
}

/* Na mniejszych ekranach można lekko zmniejszyć padding */
@media (max-width: 900px) {
    .tab {
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* === Ikony w przyciskach tabs === */
.tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tab .pi {
    font-size: 15px;
    color: #64748b; /* neutralna ikona */
    transition: color .15s ease;
}

.tab:hover .pi {
    color: #111827; /* ciemniejsza przy hoverze */
}

.tab.active .pi {
    color: var(--primary); /* niebieska ikona przy aktywnej zakładce */
}

/* ——— Menubar: animowane rozsuwanie gdy AI pracuje ——— */
.menubar{
    position: sticky; top:0; z-index:10;
    display:grid;
    grid-template-columns: auto 1fr auto;
    grid-auto-rows: min-content;
    align-items:center;
    gap:12px;
    padding:8px;
    min-height:38px;
    background: var(--menubar-bg);
    border-bottom:1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: min-height .18s ease, padding-bottom .18s ease;
}

/* gdy AI aktywne – x3 wysokość + miejsce na panel */
.menubar.is-ai-open{
    min-height: 114px;              /* ~3× 38px */
    padding-bottom: 12px;            /* trochę oddechu dla panelu */
    align-items: start;
}

/* Panel AI wewnątrz headera, full width przez 3 kolumny grida */
.ai-panel{
    grid-column: 1 / -1;
    margin-top: 6px;
    width: 100%;
    background: var(--menubar-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03) inset;
}

/* Treść odpowiedzi/wait state */
.ai-reply{
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.4;
    color: #0f172a;
}

/* Styl „oczekiwania” – delikatniejszy kolor + spinner w linii */
.ai-reply.is-waiting{
    color: var(--muted);
}

/* Ułatwienie: styl przycisku disabled przy czasie oczekiwania */
.btn:disabled{
    opacity: .6;
    cursor: not-allowed;
}

/* (opcjonalnie) lepsze wpasowanie inputa w header przy rozsunięciu */
.menubar.is-ai-open .search input{
    background:#fff;
}


/* === Inventory: edytor po rozwinięciu === */
.inv-edit {
    background: #f9fafb;                      /* lekki, neutralny */
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: all .15s ease;
}

.inv-edit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.inv-edit__grid label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--muted);
    gap: 4px;
    font-family: var(--font-family);
}

.inv-edit__grid input.inv-inp {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: var(--text);
    font-family: var(--font-family);
    font-feature-settings: var(--font-feature-settings);
    transition: border .15s ease, box-shadow .15s ease;
}

.inv-edit__grid input.inv-inp:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}

.inv-edit__bar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

.inv-edit__bar .btn {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
}

.inv-edit__bar .btn--primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.inv-edit__bar .btn--primary:hover {
    background: #1d4ed8;
}

.inv-edit__bar .btn:not(.btn--primary):hover {
    background: #f3f4f6;
}

/* animacja pojawiania się wiersza */
.inv-edit-row[hidden] {
    display: none;
}

.inv-edit-row {
    background: #f9fafb;
    transition: background .15s ease;
}

/* strzałka „down/up” – delikatne wyrównanie */
.inv-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    color: var(--muted);
    transition: color .15s ease, background .15s ease;
}

.inv-toggle:hover {
    color: var(--primary);
    background: #eff6ff;
}

.inv-toggle .pi {
    font-size: 15px;
}

/* lekki efekt hover na wiersz główny */
.inv-row:hover {
    background: #f8fbff;
}