/* ============================================================================
   Inventory pages — shared "command bar" + polished grid shell.
   Same visual language as WorkOrdersList's .wo-appbar (navy/sky-blue brand,
   green CTA, pill search, icon filter chips) so Items / Warehouses /
   Suppliers / Stock documents / Stock audit read as one consistent app
   instead of bare Syncfusion defaults. Shared here (not copy-pasted per
   page) because all five pages use the exact same recipe.
   ============================================================================ */

.inv-page {
    --inv-blue: #3fa9f5;
    --inv-blue-deep: #2b8fe0;
    --inv-navy: #16213e;
    --inv-ink: #1f2a3a;
    --inv-muted: #8b96a5;
    --inv-line: #e3e8ef;
    --inv-green: #16a34a;
    --inv-green-deep: #128a3e;
}

/* ── Command bar ── */
.inv-appbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid var(--inv-line);
    box-shadow:
        0 1px 2px rgba(22, 33, 62, 0.04),
        0 8px 24px -12px rgba(22, 33, 62, 0.18);
    position: relative;
    animation: invBarIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.inv-appbar::before {
    content: "";
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--inv-blue), var(--inv-blue-deep));
    opacity: 0.9;
}
@keyframes invBarIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.inv-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--inv-navy);
    margin: 0 6px 0 8px;
    white-space: nowrap;
}
.inv-title i { color: var(--inv-blue-deep); font-size: 15px; }

/* ── Search pill ── */
.inv-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 220px;
    height: 38px;
    padding: 0 8px 0 13px;
    background: #fff;
    border: 1px solid var(--inv-line);
    border-radius: 999px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, width 0.22s ease;
}
.inv-search:focus-within {
    width: 268px;
    border-color: var(--inv-blue);
    box-shadow: 0 0 0 4px rgba(63, 169, 245, 0.16);
}
.inv-search-icon { color: var(--inv-muted); font-size: 13px; transition: color 0.18s ease; }
.inv-search:focus-within .inv-search-icon { color: var(--inv-blue-deep); }
.inv-search-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; font-size: 13px; color: var(--inv-ink); }
.inv-search-input::placeholder { color: var(--inv-muted); }

/* ── Divider & flex spacer ── */
.inv-divider { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--inv-line); }
.inv-spacer { margin-left: auto; }

/* ── Filter fields (icon + native select/input) ── */
.inv-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px 0 12px;
    background: #fff;
    border: 1px solid var(--inv-line);
    border-radius: 10px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.inv-field:focus-within {
    border-color: var(--inv-blue);
    box-shadow: 0 0 0 4px rgba(63, 169, 245, 0.16);
}
.inv-field-icon { color: var(--inv-muted); font-size: 12px; flex-shrink: 0; }
.inv-field select,
.inv-field input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--inv-ink);
    padding: 0;
    height: 34px;
    min-width: 0;
}
.inv-field select { cursor: pointer; }

/* ── Buttons ── */
.inv-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease,
                color 0.18s ease, border-color 0.18s ease;
}
.inv-btn i { font-size: 12px; }
.inv-btn:active { transform: translateY(1px); }

.inv-btn-primary {
    background: linear-gradient(180deg, var(--inv-blue), var(--inv-blue-deep));
    color: #fff;
    box-shadow: 0 2px 6px -1px rgba(43, 143, 224, 0.45);
}
.inv-btn-primary:hover { box-shadow: 0 5px 14px -3px rgba(43, 143, 224, 0.6); transform: translateY(-1px); }

.inv-btn-ghost { background: #fff; color: var(--inv-muted); border-color: var(--inv-line); }
.inv-btn-ghost:hover { color: #e3576b; border-color: #f2c2c9; background: #fff6f7; }

.inv-btn-cta {
    background: linear-gradient(180deg, #1eb85a, var(--inv-green-deep));
    color: #fff;
    padding: 0 18px;
    box-shadow: 0 2px 7px -1px rgba(18, 138, 62, 0.5);
}
.inv-btn-cta:hover { box-shadow: 0 6px 18px -4px rgba(18, 138, 62, 0.65); transform: translateY(-1px); }
.inv-btn-cta i { font-size: 11px; }

@media (max-width: 1100px) {
    .inv-btn span { display: none; }
    .inv-btn { padding: 0 12px; }
}

/* ── Polished grid shell ── */
.inv-panel {
    background: #fff;
    border: 1px solid var(--inv-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 8px rgba(15, 23, 42, .04);
    padding: 8px;
}
.inv-panel .e-grid .e-columnheader,
.inv-panel .e-grid .e-headercontent { background: #1a5fba !important; }
.inv-panel .e-grid .e-headercell {
    font-size: 12.5px;
    font-weight: 700;
    background: #1a5fba !important;
    color: #fff !important;
    border-bottom: 2px solid #154fa3 !important;
    border-right: 1px solid #2470d4 !important;
}
.inv-panel .e-grid .e-headercell .e-headertext { color: #fff !important; }
.inv-panel .e-grid .e-headercell .e-sortfilterdiv,
.inv-panel .e-grid .e-headercell .e-filtermenudiv { color: rgba(255, 255, 255, .75) !important; }
.inv-panel .e-grid .e-rhandler { border-right-color: rgba(255, 255, 255, .25) !important; }
.inv-panel .e-grid .e-rowcell { padding: 7px 8px; font-size: 13px; }
.inv-panel .e-grid tr.e-row td.e-rowcell    { background-color: #fff;    border-bottom: 1px solid #f0f0f8; }
.inv-panel .e-grid tr.e-altrow td.e-rowcell { background-color: #f5f3ff; border-bottom: 1px solid #ece9fb; }
.inv-panel .e-grid tr.e-row:hover td.e-rowcell,
.inv-panel .e-grid tr.e-altrow:hover td.e-rowcell { background-color: #eef2ff !important; }
.inv-panel .e-grid .e-selectionbackground { background-color: #4f46e5 !important; }
.inv-panel .e-grid .e-active td.e-rowcell { background-color: #4f46e5 !important; color: #fff !important; }
.inv-panel .e-pager { border-top: 1px solid var(--inv-line); background: #fafbff; }

/* Toolbar buttons rendered inside the grid itself (e.g. Excel export) — keep them from
   fighting the appbar's own button styling. */
.inv-panel .e-toolbar { border-bottom: 1px solid var(--inv-line); }

/* ── SfDropDownButton CTA (e.g. "New Document") ──
   Syncfusion clones the button's CssClass onto its popup menu as well as the button itself,
   so a plain white-on-transparent text rule meant for the green button chrome was also
   landing on the popup's white background — invisible until a hover/focus style happened
   to override it. Hardcoded colors (not CSS custom properties) because the popup is
   portalled outside .inv-page, where the --inv-* variables aren't in scope. */
button.e-dropdown-btn.inv-newdoc-btn {
    background: linear-gradient(180deg, #1eb85a, #128a3e);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 10px;
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 7px -1px rgba(18, 138, 62, 0.5);
}
button.e-dropdown-btn.inv-newdoc-btn:hover {
    box-shadow: 0 6px 18px -4px rgba(18, 138, 62, 0.65);
}
.e-dropdown-popup.inv-newdoc-btn,
.e-dropdown-popup.inv-newdoc-btn .e-menu-parent {
    background: #fff !important;
}
.e-dropdown-popup.inv-newdoc-btn .e-item {
    color: #1f2a3a !important;
    background: #fff !important;
}
.e-dropdown-popup.inv-newdoc-btn .e-item.e-focused,
.e-dropdown-popup.inv-newdoc-btn .e-item:hover {
    color: #1f2a3a !important;
    background: #eef2ff !important;
}