/* ===========================================================================
   Aly Market — admin theme (Metronic-style, easy on the eyes)
   Loaded on every admin page via base_site.html + ModelAdmin.media.
   Soft palette: calm blue accent, off-white background, white cards,
   charcoal header, muted text. Light + dark. RTL-aware. No risky templates.
   =========================================================================== */

/* Project font — Tajawal (clean Arabic + Latin). Imported from Google Fonts
   so no font asset needs shipping; applied across the whole admin below. */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

body,
button, input, select, textarea,
.module, #header, #nav-sidebar, #content, .object-tools, table,
.aly-tab, .aly-tab-lbl, #content h1, .changelist-title {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
}

/* Sidebar sizing (owner-tuned): menu items 16px; section headers (caption)
   the SAME size as items + Capitalized small-caps look, not shouty uppercase. */
#nav-sidebar a { font-size: 16px !important; }
#nav-sidebar caption,
#nav-sidebar .module > caption,
#nav-sidebar .aly-grp-h {
    font-size: 16px !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
}
/* Bigger, clearer collapse caret. */
#nav-sidebar .aly-caret { font-size: 18px !important; opacity: .9; margin-inline-end: 6px; cursor: pointer; }
#nav-sidebar caption { cursor: pointer; }

/* Collapse/expand: when sidebarUX() adds .aly-collapsed to a section's table,
   hide its rows. Django's nav_sidebar.css forces tbody display, so override it
   so the toggle actually works (this was the missing piece). */
#nav-sidebar table.aly-collapsed tbody { display: none !important; }

/* Item icons (.aly-ico) sit before each link's label. */
#nav-sidebar .aly-ico { display: inline-block; width: 1.3em; text-align: center; opacity: .9; }
/* Smooth colour transition on hover (the colours themselves are set in the
   dark-mode block below, which is the single source of truth). */
#nav-sidebar a { transition: color .12s, background .12s; }

/* Variation / order / cart inline tables are wider than the screen — let them
   scroll horizontally so the right-hand columns (prices, stock) are reachable.
   ROOT CAUSE was `.module { overflow:hidden }` (card clipping) below: the
   parent fieldset clipped the table before `.tabular` could scroll. So we
   force the inline-group's module + wrapper to allow horizontal scrolling. */
.inline-group,
.inline-group .module,
.inline-group fieldset.module,
.js-inline-admin-formset .module {
    overflow-x: auto !important;
    overflow-y: visible !important;
}
.inline-group .tabular,
.inline-group div.tabular {
    overflow-x: auto !important;
}
.inline-group .tabular table,
.inline-group .tabular > table {
    min-width: max-content !important;
}

:root {
    --primary: #1b84ff;            /* Metronic calm blue */
    --primary-fg: #ffffff;
    --secondary: #056ee9;
    --accent: #1b84ff;
    --link-fg: #1b84ff;
    --link-hover-color: #056ee9;
    --link-selected-fg: #056ee9;

    --header-color: #b5b7c8;
    --header-branding-color: #ffffff;
    --header-bg: #1e1e2d;          /* charcoal */
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #5e6278;
    --breadcrumbs-link-fg: #1b84ff;
    --breadcrumbs-bg: #ffffff;

    --button-bg: #1b84ff;
    --button-hover-bg: #056ee9;
    --button-fg: #ffffff;
    --default-button-bg: #056ee9;
    --default-button-hover-bg: #0455bd;
    --close-button-bg: #7e8299;
    --close-button-hover-bg: #5e6278;
    --delete-button-bg: #f1416c;
    --delete-button-hover-bg: #d9214e;

    --object-tools-bg: #1b84ff;
    --object-tools-hover-bg: #056ee9;

    --body-bg: #f5f8fa;            /* soft off-white */
    --body-fg: #181c32;
    --body-quiet-color: #7e8299;
    --body-loud-color: #181c32;

    --darkened-bg: #f9fafc;
    --selected-bg: #f1faff;        /* faint blue tint */
    --selected-row: #eaf4ff;
    --border-color: #eff2f5;       /* very soft border */

    --message-success-bg: #e8fff3;
    --message-error-bg: #fff5f8;
    --message-warning-bg: #fff8dd;

    --link-fg-rgb: 27, 132, 255;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #1b84ff;
        --secondary: #5e9bff;
        --accent: #5e9bff;
        --link-fg: #6ba8ff;
        --link-hover-color: #9cc4ff;
        --header-bg: #1a1a27;
        --breadcrumbs-bg: #1e1e2d;
        --breadcrumbs-fg: #92929f;
        --body-bg: #151521;        /* Metronic dark */
        --body-fg: #e6e6ef;
        --body-quiet-color: #92929f;
        --darkened-bg: #1e1e2d;
        --selected-bg: #1b1b29;
        --selected-row: #2b2b40;
        --border-color: #2b2b40;
    }
}

/* ---- typography & layout polish ----------------------------------------- */
body { font-size: 13.5px; }
#header {
    box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
    padding: 14px 40px;
}
#branding h1 { font-weight: 700; letter-spacing: .2px; }
div.breadcrumbs {
    padding: 11px 40px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
}

/* card-style modules with soft shadow */
.module {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(24, 28, 50, .05);
    overflow: hidden;
    background: #ffffff;
}
@media (prefers-color-scheme: dark) { .module { background: #1e1e2d; } }
.module > h2, .module caption, .inline-group .tabular caption {
    font-weight: 600;
    letter-spacing: .2px;
}

/* ---- sidebar ------------------------------------------------------------- */
#nav-sidebar { border-inline-end: 1px solid var(--border-color); }
#nav-sidebar a {
    border-radius: 8px;
    margin: 1px 6px;
    padding: 7px 12px !important;
    transition: background .12s ease, color .12s ease;
}
#nav-sidebar a:hover { background: var(--selected-bg); color: var(--primary); }
#nav-sidebar tr.selected a, #nav-sidebar .current-model a {
    background: var(--selected-row);
    color: var(--primary);
    font-weight: 600;
}
#nav-sidebar caption {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .6px;
    opacity: .7;
    padding-top: 14px;
}

/* ---- buttons (soft, rounded) -------------------------------------------- */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
    border-radius: 9px;
    font-weight: 600;
    padding: 9px 18px;
    box-shadow: none;
    transition: filter .12s ease, transform .04s ease;
}
.button:hover, input[type=submit]:hover, .submit-row input:hover { filter: brightness(1.06); }
.button:active, input[type=submit]:active { transform: translateY(1px); }
.object-tools a { border-radius: 9px; font-weight: 600; }

/* ---- inputs -------------------------------------------------------------- */
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField {
    border-radius: 9px !important;
    border: 1px solid var(--border-color) !important;
    padding: 9px 12px !important;
    background-clip: padding-box;
    transition: border-color .12s ease, box-shadow .12s ease;
}
/* native <select> needs auto height + line-height or the text clips vertically */
select, select.vSelect, .aligned select {
    height: auto !important;
    min-height: 40px;
    line-height: 1.5 !important;
    padding: 8px 12px !important;
    appearance: auto;
}
input:focus, textarea:focus, select:focus, .vTextField:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--link-fg-rgb), .15) !important;
    outline: none !important;
}

/* select2 (autocomplete / tags) */
.select2-container--admin-autocomplete .select2-selection {
    border-radius: 9px !important;
    border-color: var(--border-color) !important;
    min-height: 40px;
}
.select2-container--admin-autocomplete .select2-selection__choice {
    background: var(--selected-bg) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 999px !important;
    color: var(--body-fg) !important;
    padding: 2px 10px !important;
}

/* changelist */
#changelist table thead th { text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
#changelist-form .results tbody tr:hover > * { background: var(--selected-bg); }
.paginator a, .paginator .this-page { border-radius: 7px; padding: 4px 11px; }

/* ---- login --------------------------------------------------------------- */
body.login { background: linear-gradient(135deg, #1e1e2d 0%, #1b84ff 140%); }
.login #container {
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    border: none;
    overflow: hidden;
    margin-top: 7% !important;
}
.login #header { border-radius: 0; justify-content: center; }
.login .submit-row input { width: 100%; }

/* ===========================================================================
   Dashboard KPI cards (rendered on the admin index by templates/admin/index.html)
   =========================================================================== */
.aly-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin: 4px 0 26px;
}
.aly-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-inline-start: 4px solid var(--kpi-color, var(--primary));
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(24, 28, 50, .05);
    text-decoration: none;
    transition: transform .1s ease, box-shadow .12s ease;
}
.aly-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(24, 28, 50, .1);
}
.aly-kpi-value {
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    color: var(--body-loud-color);
}
.aly-kpi-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--body-quiet-color);
}
@media (prefers-color-scheme: dark) { .aly-kpi-card { background: #1e1e2d; } }

/* ---- 7-day sales bar chart ---------------------------------------------- */
.aly-chart-card { padding: 18px 22px 14px; margin-bottom: 26px; }
.aly-chart-card > h2 {
    background: transparent !important;
    color: var(--body-loud-color) !important;
    padding: 0 0 14px !important;
    font-size: 15px;
    font-weight: 700;
}
.aly-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; }
.aly-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
}
.aly-bar {
    width: 100%;
    max-width: 46px;
    min-height: 4px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #1b84ff, #66a8ff);
    transition: filter .12s ease;
}
.aly-bar-wrap:hover .aly-bar { filter: brightness(1.12); }
.aly-bar-x { font-size: 11px; color: var(--body-quiet-color); white-space: nowrap; }

/* ===========================================================================
   Toggle switches — boolean checkboxes in change forms (scoped to forms).
   =========================================================================== */
fieldset .form-row input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    position: relative; display: inline-block;
    width: 42px; height: 22px; border-radius: 22px;
    background: #d6dae0; cursor: pointer; vertical-align: middle;
    margin: 0 6px; flex: 0 0 auto; transition: background .2s ease;
}
fieldset .form-row input[type="checkbox"]::after {
    content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s ease;
}
fieldset .form-row input[type="checkbox"]:checked { background: #50cd89; }
fieldset .form-row input[type="checkbox"]:checked::after { transform: translateX(20px); }
[dir="rtl"] fieldset .form-row input[type="checkbox"]:checked::after { transform: translateX(-20px); }
fieldset .form-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===========================================================================
   Arabic / English side-by-side — pair each *_ar field with its *_en field
   in one row on wide screens (scoped to known bilingual fields).
   =========================================================================== */
@media (min-width: 1200px) {
    .aligned .form-row.field-name_ar, .aligned .form-row.field-name_en,
    .aligned .form-row.field-desc_ar, .aligned .form-row.field-desc_en,
    .aligned .form-row.field-content_ar, .aligned .form-row.field-content_en,
    .aligned .form-row.field-description_ar, .aligned .form-row.field-description_en,
    .aligned .form-row.field-desc_ar_front, .aligned .form-row.field-desc_en_front,
    .aligned .form-row.field-features_ar, .aligned .form-row.field-usage_ar {
        display: inline-block;
        width: 49.2%;
        box-sizing: border-box;
        vertical-align: top;
    }
    .aligned .form-row.field-name_ar, .aligned .form-row.field-desc_ar,
    .aligned .form-row.field-content_ar, .aligned .form-row.field-description_ar,
    .aligned .form-row.field-desc_ar_front {
        margin-inline-end: 1.2%;
    }

    /* Put the label ABOVE the field so the input/editor fills the whole column
       (instead of being squeezed next to the floated label). */
    .aligned .form-row.field-name_ar label, .aligned .form-row.field-name_en label,
    .aligned .form-row.field-desc_ar label, .aligned .form-row.field-desc_en label,
    .aligned .form-row.field-content_ar label, .aligned .form-row.field-content_en label,
    .aligned .form-row.field-description_ar label, .aligned .form-row.field-description_en label,
    .aligned .form-row.field-desc_ar_front label, .aligned .form-row.field-desc_en_front label,
    .aligned .form-row.field-features_ar label, .aligned .form-row.field-usage_ar label {
        float: none !important;
        display: block !important;
        width: auto !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        text-align: start !important;
    }
    .aligned .form-row.field-name_ar > div, .aligned .form-row.field-name_en > div,
    .aligned .form-row.field-desc_ar > div, .aligned .form-row.field-desc_en > div,
    .aligned .form-row.field-content_ar > div, .aligned .form-row.field-content_en > div,
    .aligned .form-row.field-description_ar > div, .aligned .form-row.field-description_en > div,
    .aligned .form-row.field-desc_ar_front > div, .aligned .form-row.field-desc_en_front > div,
    .aligned .form-row.field-features_ar > div, .aligned .form-row.field-usage_ar > div {
        margin-inline-start: 0 !important;
        padding-inline-start: 0 !important;
        max-width: 100% !important;
    }
    .aligned .form-row .tox-tinymce { width: 100% !important; }
    .aligned .form-row textarea, .aligned .form-row input[type="text"] { max-width: 100% !important; }

    /* The 3 category levels in one row (3 columns) to save vertical space. */
    .aligned .form-row.field-categories1,
    .aligned .form-row.field-categories2,
    .aligned .form-row.field-categories3 {
        display: inline-block;
        width: 32.5%;
        box-sizing: border-box;
        vertical-align: top;
    }
    .aligned .form-row.field-categories1,
    .aligned .form-row.field-categories2 { margin-inline-end: 1.1%; }
    .aligned .form-row.field-categories1 label,
    .aligned .form-row.field-categories2 label,
    .aligned .form-row.field-categories3 label {
        float: none !important;
        display: block !important;
        width: auto !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        text-align: start !important;
    }
    .aligned .form-row.field-categories1 > div,
    .aligned .form-row.field-categories2 > div,
    .aligned .form-row.field-categories3 > div {
        margin-inline-start: 0 !important;
        padding-inline-start: 0 !important;
        max-width: 100% !important;
    }
}

/* ===========================================================================
   Bilingual / rich-text fields: label ALWAYS on top + field full width
   (applies at every screen size, not just side-by-side).
   =========================================================================== */
.aligned .form-row.field-name_ar label, .aligned .form-row.field-name_en label,
.aligned .form-row.field-desc_ar label, .aligned .form-row.field-desc_en label,
.aligned .form-row.field-content_ar label, .aligned .form-row.field-content_en label,
.aligned .form-row.field-description_ar label, .aligned .form-row.field-description_en label,
.aligned .form-row.field-desc_ar_front label, .aligned .form-row.field-desc_en_front label,
.aligned .form-row.field-features_ar label, .aligned .form-row.field-usage_ar label,
.aligned .form-row.field-categories1 label, .aligned .form-row.field-categories2 label,
.aligned .form-row.field-categories3 label {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    text-align: start !important;
    font-weight: 600;
}
.aligned .form-row.field-name_ar > div, .aligned .form-row.field-name_en > div,
.aligned .form-row.field-desc_ar > div, .aligned .form-row.field-desc_en > div,
.aligned .form-row.field-content_ar > div, .aligned .form-row.field-content_en > div,
.aligned .form-row.field-description_ar > div, .aligned .form-row.field-description_en > div,
.aligned .form-row.field-desc_ar_front > div, .aligned .form-row.field-desc_en_front > div,
.aligned .form-row.field-features_ar > div, .aligned .form-row.field-usage_ar > div {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
    max-width: 100% !important;
}
.aligned .form-row .tox-tinymce { width: 100% !important; }

/* ===========================================================================
   Sidebar — dark with white text + indented levels (Metronic style)
   =========================================================================== */
#nav-sidebar { background: #1e1e2d !important; }
#nav-sidebar .module { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; }
#nav-sidebar caption { color: #8c8ca3 !important; background: transparent !important; }
#nav-sidebar a { color: #b5b7c8 !important; padding-inline-start: 22px !important; }
#nav-sidebar a:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
#nav-sidebar a.aly-sub { color: #6f7287 !important; }
#nav-sidebar a.aly-sub:hover { color: #fff !important; }
#nav-sidebar tr.selected a, #nav-sidebar .current-model a { background: var(--primary) !important; color: #fff !important; border-radius: 8px; }
#nav-sidebar th, #nav-sidebar td { border: none !important; }
#nav-sidebar #nav-filter { background: #2b2b40 !important; color: #fff !important; border: none !important; }
#nav-sidebar #nav-filter::placeholder { color: #8c8ca3 !important; }
#toggle-nav-sidebar { background: #1e1e2d !important; color: #e7e7ef !important; }

/* changelist list-filters rendered as dropdowns */
.aly-filter-select {
    width: 100%;
    margin: 4px 0 12px;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    border: 1px solid var(--border-color) !important;
}

/* ===========================================================================
   Changelist filters as a full-width bar above the results + full-width table
   =========================================================================== */
.aly-filters-bar {
    display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end;
    padding: 14px 16px; margin: 0 0 16px;
    background: #fff; border: 1px solid var(--border-color);
    border-radius: 12px; box-shadow: 0 2px 8px rgba(24, 28, 50, .05);
}
.aly-filter-item { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.aly-filter-item > label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--body-quiet-color); font-weight: 600; margin: 0; float: none;
}
#changelist-form { width: 100% !important; }
#changelist .results { width: 100% !important; overflow-x: auto; }
@media (prefers-color-scheme: dark) { .aly-filters-bar { background: #1e1e2d; } }

/* sidebar: drop the per-row Add links + collapse caret */
#nav-sidebar td { display: none !important; }
#nav-sidebar caption .aly-caret { font-size: 10px; opacity: .8; }

/* ===========================================================================
   Internal iframe tabs (MDI workspace)
   =========================================================================== */
.aly-in-frame #header, .aly-in-frame div.breadcrumbs, .aly-in-frame #nav-sidebar,
.aly-in-frame #footer, .aly-in-frame #toggle-nav-sidebar, .aly-in-frame #aly-tabshell { display: none !important; }
.aly-in-frame #main, .aly-in-frame #container, .aly-in-frame #content { margin: 0 !important; }
.aly-in-frame body { min-width: 0 !important; }
#aly-tabbar { display: flex; align-items: center; gap: 4px; background: #1e1e2d; padding: 6px 8px 0; overflow-x: auto; }
.aly-tab { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #2b2b40; color: #cdd3de; border-radius: 9px 9px 0 0; cursor: pointer; white-space: nowrap; font-size: 13px; max-width: 240px; }
.aly-tab.active { background: #f5f8fa; color: #181c32; }
.aly-tab-lbl { overflow: hidden; text-overflow: ellipsis; }
.aly-tab-x { opacity: .55; font-size: 16px; line-height: 1; }
.aly-tab-x:hover { opacity: 1; }
#aly-tab-plus { padding: 6px 13px; color: #cdd3de; cursor: pointer; font-size: 18px; }
#aly-frames { height: calc(100vh - 150px); background: #fff; border-top: 1px solid var(--border-color); }
.aly-frame { width: 100%; height: 100%; border: 0; background: #fff; }
@media (prefers-color-scheme: dark) { .aly-tab.active { background: #0f172a; color: #fff; } #aly-frames, .aly-frame { background: #0f172a; } }

/* tab-bar right controls (refresh active tab + close all) */
.aly-tab-ctrls { display: flex; gap: 2px; margin-inline-start: auto; padding-inline-end: 6px; }
.aly-tab-btn { padding: 6px 11px; color: #cdd3de; cursor: pointer; font-size: 15px; border-radius: 7px; }
.aly-tab-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ===========================================================================
   Compact changelist chrome — smaller search + half-size filter dropdowns
   so the results table gets more room (esp. inside tabs).
   =========================================================================== */
#toolbar { padding: 8px 14px !important; }
#searchbar { padding: 6px 10px !important; min-height: 0 !important; }
#content { padding-top: 6px !important; }
.aly-in-frame #content > h1, .aly-in-frame .changelist-title { margin: 2px 0 8px !important; font-size: 18px; }

.aly-filters-bar { padding: 8px 12px !important; gap: 7px 12px !important; margin: 0 0 10px !important; }
.aly-filter-item { min-width: 130px; gap: 2px; }
.aly-filter-item > label { font-size: 10px !important; letter-spacing: .4px; }
.aly-filter-select {
    min-height: 0 !important;
    height: auto !important;
    padding: 5px 9px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
}

/* ===========================================================================
   Reclaim the old right-hand filter-sidebar space — table fills full width,
   and no filter-flash on load (the dropdowns live in the top bar now).
   =========================================================================== */
#changelist-filter { display: none !important; }
#changelist .results,
#changelist .paginator,
#changelist .actions,
#changelist #toolbar,
#changelist-form,
#changelist.filtered .results,
#changelist.filtered .paginator,
#changelist.filtered .actions {
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    width: 100% !important;
}

/* filters a touch smaller still */
.aly-filter-item { min-width: 112px; }
.aly-filter-item > label { font-size: 9.5px !important; }
.aly-filter-select { padding: 4px 8px !important; font-size: 12px !important; }

/* keep the object-tools (Add) button fully visible inside a tab */
.aly-in-frame #content { padding-top: 18px !important; }
.aly-in-frame .object-tools { margin-top: 2px; }
/* reduce the layout-shift flash on changelist load */
#changelist-filter, .change-list #changelist-filter { display: none !important; }

/* make the results table stretch to fill the full width (no empty right gap) */
#result_list { width: 100% !important; }
#changelist .results > table { width: 100% !important; }

/* Django nav_sidebar.css caps the content at calc(100% - 299px) next to the
   sidebar — let the content use the full remaining width. */
.main.shifted > #nav-sidebar + .content { max-width: 100% !important; }

/* tab bar v3: scrollable tabs on the left, controls (refresh + close-all) on the right */
#aly-tabbar { display: flex !important; align-items: flex-end; gap: 8px; }
#aly-tabs-scroll { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; overflow-x: auto; min-width: 0; }
.aly-tab-ctrls { display: flex !important; align-items: center; gap: 6px; flex: 0 0 auto; margin: 0 !important; padding-bottom: 6px; }
.aly-tab-btn { padding: 6px 11px; color: #cdd3de; cursor: pointer; font-size: 16px; border-radius: 8px; line-height: 1; }
.aly-tab-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ADD button (object-tools) pinned to the top-right empty space inside a tab */
.aly-in-frame #content { position: relative; }
.aly-in-frame .object-tools { position: absolute; top: 10px; inset-inline-end: 20px; margin: 0 !important; z-index: 6; }
.aly-in-frame #content > h1, .aly-in-frame .changelist-title { padding-inline-end: 160px; }

/* tab controls: force a clean horizontal row, top-right of the bar */
#aly-tabbar { flex-wrap: nowrap !important; }
.aly-tab-ctrls { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 10px; margin-inline-start: auto !important; padding-bottom: 4px; }
.aly-tab-btn { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; }

/* ===========================================================================
   Tab shrink-to-fit (v4): when many tabs are open they squeeze down to share
   the bar width instead of overflowing past the page edge. The flexbox
   `min-width: 0` is the key — without it a flex item refuses to shrink below
   its text width, so tabs would overflow + scroll. With it, each tab shrinks
   and the label truncates with an ellipsis. A small floor keeps the × usable;
   the scroll container is the last-resort fallback if even that won't fit.
   =========================================================================== */
.aly-tab {
    flex: 1 1 auto !important;   /* grow to share space, shrink when crowded */
    min-width: 46px !important;  /* floor: keep the × + a couple chars tappable */
}
.aly-tab-lbl { min-width: 0; flex: 1 1 auto; }
/* the active tab keeps a touch more room so you can always read where you are */
.aly-tab.active { flex-shrink: 0.4 !important; }

/* ===========================================================================
   Inline tables (product variations / desc images) — scroll horizontally
   instead of overflowing the page when there are many columns.
   =========================================================================== */
.inline-group .tabular { overflow-x: auto; }
.inline-group .tabular > table { min-width: max-content; }
.inline-group .tabular .original p { white-space: nowrap; }