@font-face {
    font-family: "IRANSansWeb";
    src: url("../fonts/iransans/IRANSansWeb.eot");
    src: url("../fonts/iransans/IRANSansWeb.eot?#iefix") format("embedded-opentype"),
         url("../fonts/iransans/IRANSansWeb.woff2") format("woff2"),
         url("../fonts/iransans/IRANSansWeb.woff") format("woff"),
         url("../fonts/iransans/IRANSansWeb.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANSansWeb";
    src: url("../fonts/iransans/IRANSansWeb_Light.eot");
    src: url("../fonts/iransans/IRANSansWeb_Light.eot?#iefix") format("embedded-opentype"),
         url("../fonts/iransans/IRANSansWeb_Light.woff2") format("woff2"),
         url("../fonts/iransans/IRANSansWeb_Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANSansWeb";
    src: url("../fonts/iransans/IRANSansWeb_Medium.eot");
    src: url("../fonts/iransans/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"),
         url("../fonts/iransans/IRANSansWeb_Medium.woff2") format("woff2"),
         url("../fonts/iransans/IRANSansWeb_Medium.woff") format("woff"),
         url("../fonts/iransans/IRANSansWeb_Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANSansWeb";
    src: url("../fonts/iransans/IRANSansWeb_Bold.woff2") format("woff2"),
         url("../fonts/iransans/IRANSansWeb_Bold.woff") format("woff"),
         url("../fonts/iransans/IRANSansWeb_Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --melal-font-size-xs: 0.75rem;
    --melal-font-size-sm: 0.8125rem;
    --melal-font-size-base: 0.875rem;
    --melal-font-size-md: 0.95rem;
    --melal-font-size-lg: 1.05rem;
    --melal-font-size-xl: 1.25rem;
    --melal-font-size-page-title: 1.35rem;
    --melal-line-height: 1.75;
    --melal-bg: #f6f8fb;
    --melal-surface: #ffffff;
    --melal-surface-2: #eef2f7;
    --melal-border: #dbe3ef;
    --melal-text: #172033;
    --melal-muted: #6b778c;
    --melal-primary: #2563eb;
    --melal-primary-soft: #dbeafe;
    --melal-success: #16a34a;
    --melal-warning: #d97706;
    --melal-danger: #dc2626;
    --melal-radius: 18px;
    --melal-shadow: 0 16px 48px rgba(15, 23, 42, .08);
    --melal-font: "IRANSansWeb", Tahoma, Arial, sans-serif;
}

html[data-bs-theme="dark"] {
    --melal-bg: #0f172a;
    --melal-surface: #111827;
    --melal-surface-2: #1f2937;
    --melal-border: #263244;
    --melal-text: #f8fafc;
    --melal-muted: #a5b4c6;
    --melal-primary-soft: rgba(37, 99, 235, .18);
    --melal-shadow: 0 16px 48px rgba(0, 0, 0, .25);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--melal-bg);
    color: var(--melal-text);
    font-family: var(--melal-font);
}

a {
    color: inherit;
    text-decoration: none;
}

.melal-shell {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    min-height: 100vh;
}

[dir="ltr"] .melal-shell {
    direction: ltr;
}

.melal-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 22px 18px;
    background: var(--melal-surface);
    border-inline-end: 1px solid var(--melal-border);
}

.melal-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--melal-radius);
    background: var(--melal-primary-soft);
    margin-bottom: 22px;
}

.melal-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--melal-primary);
    color: #fff;
    font-weight: 800;
}

.melal-brand-text {
    display: grid;
    gap: 2px;
}

.melal-brand-text small,
.melal-eyebrow,
.melal-kpi-meta small,
.melal-card p,
.melal-context-pill span,
.melal-empty-state span {
    color: var(--melal-muted);
}

.melal-nav-group {
    margin-block: 18px;
}

.melal-nav-group h2 {
    font-size: .78rem;
    color: var(--melal-muted);
    margin: 0 10px 8px;
    font-weight: 700;
}

.melal-nav-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
}

.melal-nav-group a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--melal-muted);
}

.melal-nav-group a:hover,
.melal-nav-group a.active {
    background: var(--melal-primary-soft);
    color: var(--melal-primary);
}

.melal-nav-icon {
    font-size: .65rem;
}

.melal-main {
    min-width: 0;
}

.melal-topbar {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--melal-border);
    background: rgba(255, 255, 255, .76);
    backdrop-filter: blur(18px);
}

html[data-bs-theme="dark"] .melal-topbar {
    background: rgba(17, 24, 39, .76);
}

.melal-topbar h1 {
    margin: 4px 0 0;
    font-size: 1.35rem;
}

.melal-topbar-actions,
.melal-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.melal-context-pill {
    display: grid;
    gap: 4px;
    padding: 10px 14px;
    border: 1px solid var(--melal-border);
    border-radius: 14px;
    background: var(--melal-surface);
    min-width: 130px;
}

.melal-content {
    padding: 28px;
}

.melal-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.melal-page-header h2 {
    margin: 4px 0 6px;
    font-size: 1.8rem;
}

.melal-page-header p {
    margin: 0;
    color: var(--melal-muted);
}

.melal-button {
    border: 0;
    padding: 11px 16px;
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
}

.melal-button-secondary {
    background: var(--melal-surface);
    border: 1px solid var(--melal-border);
    color: var(--melal-text);
}

.melal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.melal-kpi-card,
.melal-card,
.melal-state-card {
    background: var(--melal-surface);
    border: 1px solid var(--melal-border);
    border-radius: var(--melal-radius);
    box-shadow: var(--melal-shadow);
}

.melal-kpi-card {
    padding: 18px;
    display: grid;
    gap: 14px;
    min-height: 140px;
}

.melal-kpi-card strong {
    font-size: 2rem;
}

.melal-kpi-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.melal-kpi-primary { border-top: 4px solid var(--melal-primary); }
.melal-kpi-info { border-top: 4px solid #0891b2; }
.melal-kpi-success { border-top: 4px solid var(--melal-success); }
.melal-kpi-warning { border-top: 4px solid var(--melal-warning); }
.melal-kpi-danger { border-top: 4px solid var(--melal-danger); }

.melal-card-grid {
    display: grid;
    gap: 16px;
}

.melal-card-grid.two-columns {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}

.melal-card {
    padding: 20px;
}

.melal-card header {
    margin-bottom: 14px;
}

.melal-card h3 {
    margin: 0;
}

.melal-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.melal-action-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--melal-border);
    background: var(--melal-surface-2);
}

.melal-empty-state {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px dashed var(--melal-border);
    border-radius: 16px;
    background: var(--melal-surface-2);
}

.melal-state-page {
    min-height: 55vh;
    display: grid;
    place-items: center;
}

.melal-state-card {
    max-width: 520px;
    width: 100%;
    padding: 26px;
    text-align: center;
}

.melal-state-card.danger {
    border-top: 4px solid var(--melal-danger);
}

.melal-toast-host {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    display: grid;
    gap: 10px;
    z-index: 1000;
}

.melal-toast {
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--melal-text);
    color: var(--melal-bg);
    box-shadow: var(--melal-shadow);
}

.melal-density-compact .melal-content { padding: 18px; }
.melal-density-spacious .melal-content { padding: 38px; }

@media (max-width: 1100px) {
    .melal-shell { grid-template-columns: 1fr; }
    .melal-sidebar { position: relative; height: auto; }
    .melal-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .melal-card-grid.two-columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .melal-topbar,
    .melal-page-header { align-items: stretch; flex-direction: column; }
    .melal-kpi-grid,
    .melal-action-grid { grid-template-columns: 1fr; }
    .melal-content { padding: 16px; }
}

.melal-rule-list {
    margin: 0;
    padding-inline-start: 20px;
    color: var(--melal-muted);
    display: grid;
    gap: 10px;
}

.melal-dashboard-context {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .8rem;
    color: var(--melal-muted);
    font-size: .86rem;
}

.melal-dashboard-context span {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    background: var(--melal-surface-2);
    border: 1px solid var(--melal-border);
    border-radius: 999px;
    padding: .35rem .7rem;
}

.melal-inline-form {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.melal-select {
    min-width: 12rem;
    border: 1px solid var(--melal-border);
    border-radius: .75rem;
    padding: .65rem .8rem;
    background: var(--melal-surface);
    color: var(--melal-text);
}

.melal-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.melal-alert {
    display: flex;
    gap: .75rem;
    align-items: center;
    border-radius: 1rem;
    border: 1px solid var(--melal-border);
    background: var(--melal-surface);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.melal-alert-list,
.melal-trace-list {
    display: grid;
    gap: .75rem;
}

.melal-alert-row,
.melal-trace-row {
    display: grid;
    gap: .2rem;
    border: 1px solid var(--melal-border);
    border-radius: .9rem;
    padding: .85rem 1rem;
    background: var(--melal-surface-2);
    text-decoration: none;
    color: inherit;
}

.melal-alert-row:hover,
.melal-trace-row:hover {
    transform: translateY(-1px);
    border-color: var(--melal-primary);
}

.melal-table-wrap {
    overflow-x: auto;
}

.melal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.melal-table th,
.melal-table td {
    border-bottom: 1px solid var(--melal-border);
    padding: .75rem .5rem;
    text-align: start;
    vertical-align: top;
}

.melal-table th {
    color: var(--melal-muted);
    font-weight: 700;
}

.melal-table td small {
    display: block;
    color: var(--melal-muted);
    margin-top: .2rem;
}

.melal-empty-state.compact {
    min-height: 6rem;
}

.tone-muted { --melal-tone: var(--melal-muted); }
.tone-primary { --melal-tone: var(--melal-primary); }
.tone-info { --melal-tone: #0ea5e9; }
.tone-success { --melal-tone: #16a34a; }
.tone-warning { --melal-tone: #d97706; }
.tone-danger { --melal-tone: #dc2626; }


.melal-page-section {
    display: grid;
    gap: 1rem;
}

.melal-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .25rem;
}

.melal-section-header h2 {
    margin: .15rem 0 .25rem;
    font-size: 1.35rem;
}

.melal-section-header p {
    margin: 0;
    color: var(--melal-muted);
}

.melal-grid.two-columns {
    grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.6fr);
}

.melal-grid.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.melal-list.compact-list {
    max-height: 38rem;
    overflow: auto;
}

.melal-list-row {
    display: grid;
    gap: .2rem;
    padding: .75rem .9rem;
    border-radius: .8rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
}

.melal-list-row:hover,
.melal-list-row.active {
    background: var(--melal-surface-2);
    border-color: var(--melal-border);
}

.melal-input {
    min-width: 18rem;
    border: 1px solid var(--melal-border);
    border-radius: .75rem;
    padding: .65rem .8rem;
    background: var(--melal-surface);
    color: var(--melal-text);
}

.melal-input.small,
.melal-select.small {
    min-width: 7rem;
}

.melal-button,
.melal-link {
    border: 0;
    border-radius: .75rem;
    background: var(--melal-primary);
    color: #fff;
    padding: .65rem 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
}

.melal-button.ghost {
    background: var(--melal-surface-2);
    color: var(--melal-text);
    border: 1px solid var(--melal-border);
}

.melal-link {
    padding: .4rem .7rem;
    font-size: .85rem;
}

.melal-definition-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem .9rem;
    margin: 0;
}

.melal-definition-list dt {
    color: var(--melal-muted);
    font-weight: 700;
}

.melal-definition-list dd {
    margin: 0;
}

.melal-muted {
    color: var(--melal-muted);
}

@media (max-width: 1100px) {
    .melal-section-header {
        flex-direction: column;
    }

    .melal-grid.two-columns,
    .melal-grid.three-columns {
        grid-template-columns: 1fr;
    }

    .melal-inline-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .melal-input,
    .melal-select {
        min-width: 100%;
    }
}

.melal-filter-card {
    padding: 1rem;
    margin-bottom: 1rem;
}

.melal-table-wrap {
    overflow-x: auto;
}

.melal-table-card {
    margin-block: 1rem;
}

.melal-table small {
    display: block;
    margin-top: .25rem;
}

.melal-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .25rem .55rem;
    font-size: .78rem;
    font-weight: 700;
    background: var(--melal-primary-soft);
    color: var(--melal-primary);
    white-space: nowrap;
}

.melal-badge.danger,
.melal-badge.Red,
.melal-badge.red,
.melal-badge.Critical,
.melal-badge.critical {
    background: rgba(220, 38, 38, .12);
    color: var(--melal-danger);
}

.melal-badge.Warning,
.melal-badge.warning,
.melal-badge.Yellow,
.melal-badge.yellow {
    background: rgba(217, 119, 6, .13);
    color: var(--melal-warning);
}

.melal-badge.Success,
.melal-badge.success,
.melal-badge.Green,
.melal-badge.green {
    background: rgba(22, 163, 74, .13);
    color: var(--melal-success);
}

.melal-mini-trace {
    display: inline-flex;
    margin: .15rem;
    padding: .2rem .45rem;
    border-radius: .6rem;
    background: var(--melal-surface-2);
    color: var(--melal-muted);
    font-size: .78rem;
    white-space: nowrap;
}

.melal-mini-trace.danger {
    color: var(--melal-danger);
    background: rgba(220, 38, 38, .1);
}

.melal-card-padded {
    padding: 1.25rem;
}

.melal-checkbox {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .8rem;
    border-radius: .75rem;
    background: var(--melal-surface-2);
    color: var(--melal-text);
    font-weight: 700;
}

.melal-muted-row {
    opacity: .58;
}

.melal-section-header span {
    color: var(--melal-muted);
    font-size: .9rem;
}


.melal-warning-card {
    display: flex;
    gap: .75rem;
    align-items: center;
    border-inline-start: 4px solid var(--tblr-warning, #f59f00);
    background: rgba(245, 159, 0, .08);
}

.melal-row-danger {
    background: rgba(214, 57, 57, .08);
}

.melal-row-muted {
    opacity: .65;
}

.melal-check {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    font-size: .875rem;
}

.melal-table td strong {
    display: block;
}

.melal-table td small {
    display: block;
    color: var(--tblr-secondary, #667085);
    margin-top: .15rem;
}

.melal-trace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.melal-trace-grid .melal-card span {
    display: block;
    color: var(--tblr-secondary, #667085);
    font-size: .8rem;
    margin-bottom: .35rem;
}

.melal-trace-grid .melal-card strong {
    display: block;
    overflow-wrap: anywhere;
}

html[data-font="IRANSansWeb"],
html[data-font="Vazirmatn"],
html[data-font="Shabnam"] {
    --melal-font: "IRANSansWeb", Tahoma, Arial, sans-serif;
}

.melal-page-header p,
.melal-section-header p {
    display: none;
}

.melal-page-header,
.melal-section-header {
    align-items: center;
    gap: 18px;
}

.melal-page-header h2,
.melal-section-header h2 {
    margin-bottom: 0;
}

.melal-empty-state.clean {
    min-height: 180px;
    align-items: center;
    justify-content: center;
}

.melal-table td small {
    display: block;
    margin-top: 4px;
    color: var(--melal-muted);
    font-size: .78rem;
}

.melal-card header p,
.melal-muted-help {
    display: none;
}


.melal-filter-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--melal-border);
    border-radius: 1rem;
    background: var(--melal-card-bg);
}

.melal-filter-bar label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--melal-muted);
}

.melal-filter-bar select,
.melal-filter-bar input {
    border: 1px solid var(--melal-border);
    border-radius: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: var(--melal-surface);
    color: var(--melal-text);
    font: inherit;
}

.melal-button {
    border: 0;
    border-radius: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--melal-primary);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.melal-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.melal-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.melal-card.danger,
.melal-kpi-card.danger {
    border-color: #ef4444;
}

.melal-badge.danger {
    background: #fee2e2;
    color: #991b1b;
}

.reports-grid {
    margin-bottom: 1rem;
}

@media (max-width: 1100px) {
    .melal-filter-bar,
    .melal-grid-2,
    .melal-detail-grid {
        grid-template-columns: 1fr;
    }
}


.melal-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-block: 1rem;
}

.melal-table code {
    direction: ltr;
    unicode-bidi: embed;
    font-size: .78rem;
}

@media (max-width: 1100px) {
    .melal-grid-2 {
        grid-template-columns: 1fr;
    }
}


/* Final admin UI fixes: mobile shell, exact navigation UX, compact cards */
.melal-sidebar-mobile-head,
.melal-mobile-menu-toggle,
.melal-mobile-backdrop {
    display: none;
}

.melal-icon-button,
.melal-mobile-menu-toggle {
    border: 0;
    background: var(--melal-surface-2);
    color: var(--melal-text);
    border-radius: 12px;
    cursor: pointer;
}

.melal-icon-button {
    width: 38px;
    height: 38px;
    font-size: 1.35rem;
    line-height: 1;
}

.melal-mobile-menu-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-direction: column;
    flex: 0 0 auto;
}

.melal-mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

.melal-topbar-title {
    min-width: 0;
}

.melal-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.melal-card-header h2,
.melal-card-header h3 {
    margin: 0;
}

.melal-state-card.success {
    border-top: 4px solid var(--melal-success);
}

@media (max-width: 1100px) {
    body.melal-mobile-nav-open {
        overflow: hidden;
    }

    .melal-shell {
        display: block;
    }

    .melal-mobile-menu-toggle,
    .melal-sidebar-mobile-head {
        display: flex;
    }

    .melal-sidebar-mobile-head {
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0 0 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--melal-border);
    }

    .melal-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(86vw, 330px);
        height: 100vh;
        z-index: 1200;
        transform: translateX(110%);
        transition: transform .22s ease;
        box-shadow: var(--melal-shadow);
    }

    [dir="ltr"] .melal-sidebar {
        transform: translateX(-110%);
    }

    body.melal-mobile-nav-open .melal-sidebar {
        transform: translateX(0);
    }

    .melal-mobile-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        backdrop-filter: blur(2px);
        z-index: 1190;
    }

    body.melal-mobile-nav-open .melal-mobile-backdrop {
        display: block;
    }

    .melal-topbar {
        position: sticky;
        top: 0;
        z-index: 900;
        min-height: auto;
        padding: .8rem 1rem;
        align-items: center;
    }

    .melal-topbar h1 {
        font-size: 1.05rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 46vw;
    }

    .melal-eyebrow {
        font-size: .72rem;
    }

    .melal-topbar-actions {
        margin-inline-start: auto;
        gap: .45rem;
    }

    .melal-context-pill {
        min-width: auto;
        padding: .45rem .6rem;
        font-size: .78rem;
    }

    .melal-context-pill span {
        display: none;
    }

    .melal-logout-button {
        padding: .45rem .7rem;
        border-radius: .7rem;
    }

    .melal-content {
        padding: 1rem;
    }

    .melal-brand {
        display: none;
    }
}

@media (max-width: 640px) {
    .melal-topbar {
        flex-direction: row;
    }

    .melal-topbar-actions {
        flex-wrap: nowrap;
    }

    .melal-context-pill:nth-of-type(1) {
        display: none;
    }

    .melal-table {
        font-size: .82rem;
    }

    .melal-section-header h2,
    .melal-page-header h2 {
        font-size: 1.2rem;
    }
}

.admin-autocomplete-panel {
    position: absolute;
    z-index: 50;
    inset-inline: 0;
    top: calc(100% + 6px);
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--melal-border);
    border-radius: 14px;
    background: var(--melal-surface);
    box-shadow: var(--melal-shadow);
    padding: 6px;
}

.admin-customer-search-field {
    position: relative;
}

.admin-autocomplete-item {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--melal-text);
    text-align: start;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
    cursor: pointer;
    font-family: inherit;
}

.admin-autocomplete-item small,
.admin-autocomplete-empty {
    color: var(--melal-muted);
}

.admin-autocomplete-item:hover,
.admin-autocomplete-item.active {
    background: var(--melal-primary-soft);
    color: var(--melal-primary);
}

.admin-autocomplete-empty {
    padding: 14px 12px;
    text-align: center;
}


/* Admin responsive shell: mobile/tablet must be usable. The sidebar is off-canvas on small screens. */
.melal-sidebar-mobile-head,
.melal-mobile-menu-toggle,
.melal-mobile-backdrop {
    display: none;
}

.melal-icon-button,
.melal-mobile-menu-toggle {
    border: 1px solid var(--melal-border);
    background: var(--melal-surface);
    color: var(--melal-text);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: inherit;
}

.melal-icon-button {
    width: 38px;
    height: 38px;
    font-size: 1.35rem;
    line-height: 1;
}

.melal-mobile-menu-toggle {
    width: 42px;
    height: 42px;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 4px;
}

.melal-mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

@media (max-width: 1100px) {
    body.melal-mobile-nav-open {
        overflow: hidden;
    }

    .melal-shell {
        display: block !important;
        min-width: 0 !important;
    }

    .melal-main {
        min-width: 0 !important;
    }

    .melal-mobile-menu-toggle,
    .melal-sidebar-mobile-head {
        display: flex !important;
    }

    .melal-sidebar-mobile-head {
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0 0 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--melal-border);
    }

    .melal-sidebar {
        position: fixed !important;
        inset-block: 0 !important;
        inset-inline-start: 0 !important;
        width: min(86vw, 330px) !important;
        max-width: 330px;
        height: 100vh !important;
        z-index: 1200 !important;
        transform: translateX(110%) !important;
        transition: transform .22s ease;
        box-shadow: var(--melal-shadow);
        overflow-y: auto;
    }

    [dir="ltr"] .melal-sidebar {
        transform: translateX(-110%) !important;
    }

    body.melal-mobile-nav-open .melal-sidebar {
        transform: translateX(0) !important;
    }

    .melal-mobile-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        backdrop-filter: blur(2px);
        z-index: 1190;
    }

    body.melal-mobile-nav-open .melal-mobile-backdrop {
        display: block !important;
    }

    .melal-topbar {
        position: sticky;
        top: 0;
        z-index: 900;
        min-height: auto;
        padding: .8rem 1rem;
        align-items: center;
    }

    .melal-topbar h1 {
        font-size: 1.05rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 46vw;
    }

    .melal-eyebrow {
        font-size: .72rem;
    }

    .melal-topbar-actions {
        margin-inline-start: auto;
        gap: .45rem;
        flex-wrap: nowrap;
    }

    .melal-context-pill {
        min-width: auto;
        padding: .45rem .6rem;
        font-size: .78rem;
    }

    .melal-context-pill span {
        display: none;
    }

    .melal-logout-button {
        padding: .45rem .7rem;
        border-radius: .7rem;
    }

    .melal-content {
        padding: 1rem;
    }

    .melal-brand {
        display: none;
    }

    .melal-table-wrap,
    .melal-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px) {
    .melal-topbar {
        flex-direction: row;
    }

    .melal-context-pill:nth-of-type(1) {
        display: none;
    }

    .melal-table {
        font-size: .82rem;
    }

    .melal-section-header h2,
    .melal-page-header h2 {
        font-size: 1.2rem;
    }
}
.melal-auth-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--melal-muted, #64748b);
}

.melal-auth-remember input {
    width: 1rem;
    height: 1rem;
}

.melal-mini-chart .btn-group .btn {
    padding: .15rem .45rem;
    font-size: .75rem;
}

.melal-chart-range {
    display: none;
}

.melal-chart-range.active {
    display: block;
}

.melal-chart-bars {
    direction: ltr;
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    min-height: 74px;
}

.melal-chart-bars span {
    flex: 1;
    min-width: 16px;
    border-radius: .6rem .6rem .2rem .2rem;
    background: linear-gradient(180deg, rgba(32, 107, 196, .95), rgba(32, 107, 196, .28));
}

.melal-mini-chart.tone-success .melal-chart-bars span {
    background: linear-gradient(180deg, rgba(47, 179, 68, .95), rgba(47, 179, 68, .28));
}

.melal-mini-chart.tone-warning .melal-chart-bars span {
    background: linear-gradient(180deg, rgba(245, 159, 0, .95), rgba(245, 159, 0, .28));
}

.melal-mini-chart.tone-info .melal-chart-bars span {
    background: linear-gradient(180deg, rgba(66, 153, 225, .95), rgba(66, 153, 225, .28));
}
/* Manual batch 2 polish: compact master-data board, form panels and action cells */
.melal-masterdata-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.melal-masterdata-panel {
    background: var(--melal-card-bg, #fff);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.melal-panel-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.melal-action-list {
    display: grid;
    gap: .45rem;
}

.melal-action-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .62rem .75rem;
    border-radius: .75rem;
    background: rgba(15, 23, 42, .035);
    color: inherit;
    text-decoration: none;
}

.melal-action-list a:hover {
    background: rgba(59, 130, 246, .10);
}

.melal-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.melal-inline-delete {
    display: inline;
    margin: 0;
}

.melal-link.danger,
.melal-inline-delete .danger {
    color: #dc2626;
    border: 0;
    background: transparent;
    padding: 0;
}

.melal-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.melal-stat-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, .10), rgba(16, 185, 129, .08));
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    padding: 1rem;
}

.melal-stat-card span,
.melal-stat-card small {
    display: block;
    color: #64748b;
}

.melal-stat-card strong {
    display: block;
    font-size: 1.35rem;
    margin: .3rem 0;
}

.melal-form-card {
    padding: 1rem;
}


.melal-form-grid .melal-input,
.melal-form-grid .melal-select,
.melal-inline-form .melal-input,
.melal-inline-form .melal-select {
    min-width: 0;
    width: 100%;
}

.melal-form-grid .melal-checkbox-label {
    align-self: end;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .8rem;
    border: 1px solid var(--melal-border);
    border-radius: .75rem;
    background: var(--melal-surface);
}

.melal-checkbox-label input[type="checkbox"] {
    margin: 0;
}

.melal-form-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.melal-role-card {
    min-height: 5.5rem;
}

.melal-role-card small {
    display: block;
    margin-top: .35rem;
    color: var(--melal-muted);
    line-height: 1.7;
}

.melal-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.melal-form-grid label,
.melal-form-panel label {
    display: grid;
    gap: .35rem;
}

.melal-form-grid .span-2,
.melal-form-panel .span-2 {
    grid-column: span 2;
}

.melal-form-panel {
    border: 1px dashed rgba(15, 23, 42, .16);
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem 0;
    background: rgba(248, 250, 252, .75);
}

.melal-toggle-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin: 1rem 0;
}

.melal-toggle-grid label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.melal-form-actions,
.melal-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1rem;
}

.melal-alert.danger {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: .75rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .melal-form-grid .span-2,
    .melal-form-panel .span-2 {
        grid-column: span 1;
    }
}
/* Manual batch 3 polish: login hint, dashboard visual cards and reliable charts */
.melal-auth-remember-hint {
    margin-top: -.45rem;
    font-size: .75rem;
    color: var(--melal-muted, #64748b);
}

.melal-dashboard-kpi-card {
    position: relative;
    overflow: hidden;
    border: 0;
    box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .08);
}

.melal-dashboard-kpi-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 100%;
    height: .35rem;
    background: linear-gradient(90deg, rgba(32,107,196,.95), rgba(66,153,225,.35));
}

.melal-dashboard-kpi-card.tone-success::before { background: linear-gradient(90deg, rgba(47,179,68,.95), rgba(47,179,68,.25)); }
.melal-dashboard-kpi-card.tone-warning::before { background: linear-gradient(90deg, rgba(245,159,0,.95), rgba(245,159,0,.25)); }
.melal-dashboard-kpi-card.tone-danger::before { background: linear-gradient(90deg, rgba(214,57,57,.95), rgba(214,57,57,.25)); }
.melal-dashboard-kpi-card.tone-info::before { background: linear-gradient(90deg, rgba(66,153,225,.95), rgba(66,153,225,.25)); }

.melal-dashboard-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    background: rgba(32, 107, 196, .10);
    color: var(--melal-primary, #206bc4);
    font-size: 1.45rem;
    flex: 0 0 auto;
}

.melal-dashboard-kpi-card.tone-success .melal-dashboard-kpi-icon { background: rgba(47,179,68,.12); color: #2fb344; }
.melal-dashboard-kpi-card.tone-warning .melal-dashboard-kpi-icon { background: rgba(245,159,0,.14); color: #f59f00; }
.melal-dashboard-kpi-card.tone-danger .melal-dashboard-kpi-icon { background: rgba(214,57,57,.12); color: #d63939; }
.melal-dashboard-kpi-card.tone-info .melal-dashboard-kpi-icon { background: rgba(66,153,225,.12); color: #4299e1; }

.melal-mini-chart {
    border: 0;
    box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .07);
}

.melal-chart-bars {
    height: 96px;
}

.melal-chart-bars span {
    display: block;
    min-height: 10px;
}

/* Admin Web typography and field help baseline */
body {
    font-size: var(--melal-font-size-base);
    line-height: var(--melal-line-height);
}

.melal-section-header h1,
.melal-section-header h2,
.melal-page-title {
    font-size: var(--melal-font-size-page-title);
    line-height: 1.55;
}

.melal-card h3,
.melal-panel-title {
    font-size: var(--melal-font-size-lg);
}

.melal-card,
.melal-table,
.melal-input,
.melal-select,
.melal-button,
.melal-badge {
    font-size: var(--melal-font-size-base);
}

.melal-muted,
.melal-card small,
.melal-field-hint {
    font-size: var(--melal-font-size-sm);
}

.melal-dashboard-number,
.melal-stat-card strong {
    font-size: var(--melal-font-size-xl);
}

.melal-form-panel,
.melal-child-panel,
.melal-upload-panel {
    border: 1px solid var(--melal-border-color, #e5e7eb);
    border-radius: 16px;
    padding: 1rem;
    background: var(--melal-surface-color, #fff);
    margin-bottom: 1rem;
}

.melal-child-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
}

.melal-form-row-actions {
    display: flex;
    align-items: end;
    gap: 0.5rem;
}

.melal-label-line {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.melal-upload-panel input[type="file"] {
    width: 100%;
}

.melal-image-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.melal-image-chip {
    border: 1px solid var(--melal-border-color, #e5e7eb);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    background: #f8fafc;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.melal-section-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.melal-lookup-action-form {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}

.melal-color-picker-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.melal-color-picker-row input[type="color"] {
    width: 3rem;
    height: 2.35rem;
    padding: 0.15rem;
}
/* Manual batch 5: real dashboard chart axis and shared dashboard-like cards */
.melal-chart-bars {
    position: relative;
    overflow: hidden;
}

.melal-chart-bar {
    position: relative;
    display: block;
}

.melal-chart-bar-value {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    display: none;
    white-space: nowrap;
    padding: 2px 5px;
    border-radius: 6px;
    background: rgba(15, 23, 42, .88);
    color: #fff;
    font-size: .68rem;
    line-height: 1.2;
    z-index: 2;
}

.melal-chart-bar:hover .melal-chart-bar-value {
    display: inline-block;
}

.melal-chart-axis {
    direction: ltr;
    display: flex;
    justify-content: space-between;
    gap: .2rem;
    margin-top: .45rem;
    color: #64748b;
    font-size: .68rem;
    line-height: 1;
    overflow: hidden;
}

.melal-chart-axis span {
    min-width: 0;
    flex: 1;
    text-align: center;
}

.melal-masterdata-panel,
.melal-stat-card,
.melal-form-card {
    box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .06);
    border: 0;
}

@media (max-width: 576px) {
    .melal-chart-axis {
        font-size: .58rem;
    }

    .melal-chart-bars {
        gap: .16rem;
    }
}
/* Product images, mobile menu and action colors */
.melal-button-secondary {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.melal-button-secondary:hover {
    background: #115e59;
    border-color: #115e59;
    color: #fff;
}

.melal-product-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: .75rem;
    border: 1px solid var(--melal-border-color, #e5e7eb);
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    color: #64748b;
}

.melal-image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}

.melal-product-image-card {
    border: 1px solid var(--melal-border-color, #e5e7eb);
    border-radius: .9rem;
    background: #fff;
    padding: .55rem;
    display: grid;
    gap: .45rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.melal-product-image-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: .65rem;
    background: #f1f5f9;
}

.melal-product-image-path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
    font-size: .72rem;
    color: #64748b;
}

.melal-product-image-remove {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #991b1b;
    font-size: .78rem;
}

.melal-product-brand-field,
.melal-product-conversion-field {
    min-width: 0;
}

@media (max-width: 992px) {
    body.melal-sidebar-open .melal-sidebar {
        z-index: 1050;
    }

    body.melal-sidebar-open .melal-shell-backdrop {
        z-index: 1040;
    }
}
/* Unified module typography and reliable mobile sidebar */
.melal-content,
.melal-content .container-xl,
.melal-content .card,
.melal-content .table,
.melal-content .form-control,
.melal-content .form-select,
.melal-content .btn,
.melal-content .form-check-label,
.melal-content label,
.melal-content input,
.melal-content select,
.melal-content textarea {
    font-family: var(--melal-admin-font-family, 'IRANSansWeb', Tahoma, Arial, sans-serif) !important;
    font-size: var(--melal-font-size-base, .875rem) !important;
    line-height: 1.75;
}

.melal-content .page-title,
.melal-content h1.page-title,
.melal-content h1 {
    font-size: var(--melal-font-size-page-title, 1.35rem) !important;
    font-weight: 800;
    line-height: 1.55;
}

.melal-content h2,
.melal-content .card-title {
    font-size: var(--melal-font-size-lg, 1.05rem) !important;
    font-weight: 800;
}

.melal-content .h2,
.melal-content .metric-value,
.melal-content .melal-kpi-value {
    font-size: 1.35rem !important;
    font-weight: 800;
}

@media (max-width: 992px) {
    body.melal-sidebar-open .melal-sidebar,
    body.melal-mobile-nav-open .melal-sidebar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        right: 0 !important;
        z-index: 1060 !important;
    }

    body.melal-sidebar-open .melal-shell-backdrop,
    body.melal-mobile-nav-open .melal-shell-backdrop,
    body.melal-mobile-nav-open .melal-mobile-backdrop {
        display: block !important;
        z-index: 1050 !important;
    }
}

/* Tree presentation for chart of accounts inline lists. */
.melal-tree-cell {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.melal-tree-branch {
    width: .55rem;
    height: .55rem;
    border-inline-start: 1px solid var(--melal-border-color, #d1d5db);
    border-bottom: 1px solid var(--melal-border-color, #d1d5db);
    flex: 0 0 auto;
}

.melal-tree-root-row {
    background: var(--melal-soft-surface, #f8fafc);
}

.melal-tree-root-badge {
    border: 1px solid var(--melal-border-color, #d1d5db);
    border-radius: 999px;
    padding: .08rem .45rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--melal-muted-color, #64748b);
    background: #fff;
}

.melal-link[data-danger-action="true"] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.melal-link[data-danger-action="true"]:hover,
.melal-link[data-danger-action="true"]:focus {
    background: #fecaca;
    color: #7f1d1d;
}

button.melal-link:disabled,
.melal-link[disabled] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
/* Admin batch: inline settings and branch edits */
.melal-settings-inline-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    min-width: 260px;
}

.melal-settings-inline-form .form-control,
.melal-settings-inline-form .form-select {
    min-width: 180px;
}

.melal-inline-edit-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.melal-compact-input {
    width: 140px;
    min-width: 120px;
}

.melal-compact-checkbox {
    margin: 0;
    white-space: nowrap;
}

.melal-button-sm {
    min-height: 32px;
    padding: .25rem .75rem;
}

/* Product administration compact actions and boolean indicators */
.melal-icon-actions-cell {
    display: flex;
    gap: .35rem;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
}

.melal-icon-actions-cell form {
    display: inline-flex;
    margin: 0;
}

.melal-icon-actions-cell .melal-icon-button {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 1rem;
    text-decoration: none;
}

.melal-icon-button-danger {
    color: #b91c1c;
}

.melal-status-pill {
    display: inline-flex;
    min-width: 28px;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid var(--melal-border);
}

.melal-status-pill.success {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.melal-status-pill.muted {
    color: var(--melal-muted);
    background: var(--melal-surface-2);
}

.melal-alert.success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

/* Stable icon-only actions and local icon fallback. */
.melal-actions-cell {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}

.melal-action-row,
.melal-actions-cell > .btn-list {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: .35rem;
    align-items: center;
}

.melal-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0;
}

.ti {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    font-family: var(--melal-admin-font-family, Tahoma, Arial, sans-serif);
}

.ti::before { content: "•"; }
.ti-eye::before { content: "👁"; }
.ti-pencil::before { content: "✎"; }
.ti-pencil-plus::before { content: "+"; }
.ti-cash::before,
.ti-cash-banknote::before { content: "﷼"; }
.ti-trash::before { content: "×"; }
.ti-building-warehouse::before { content: "⌂"; }
.ti-key::before { content: "⚿"; }
.ti-list-details::before { content: "☰"; }
.ti-users::before,
.ti-users-group::before { content: "👥"; }
.ti-logout::before { content: "↩"; }
.ti-menu-2::before { content: "☰"; }
.ti-settings::before,
.ti-settings-automation::before { content: "⚙"; }
.ti-dashboard::before,
.ti-layout-dashboard::before { content: "▦"; }
.ti-package::before,
.ti-packages::before { content: "▣"; }
.ti-building-bank::before { content: "▥"; }
.ti-chart-bar::before,
.ti-chart-line::before,
.ti-chart-pie::before { content: "⌁"; }
.ti-bell::before,
.ti-bell-ringing::before { content: "!"; }
.ti-send::before { content: "↗"; }
.ti-template::before { content: "▤"; }
.ti-tools-kitchen-2::before,
.ti-chef-hat::before,
.ti-burger::before { content: "☕"; }
.ti-calculator::before { content: "#"; }
.ti-receipt::before { content: "▧"; }
.ti-wallet::before { content: "▰"; }
.ti-language::before { content: "فا"; font-size: .72em; }
.ti-palette::before { content: "◒"; }
.ti-plug-connected::before { content: "⌁"; }
.ti-inbox::before { content: "▣"; }
.ti-address-book::before { content: "☎"; }
.ti-brand-telegram::before { content: "↗"; }
.ti-shopping-cart::before { content: "🛒"; }

/* Keep the mobile sidebar backdrop click target outside the open sidebar.
   Playwright and real users must be able to close the menu by clicking the dimmed area. */
@media (max-width: 992px) {
    body.melal-sidebar-open .melal-shell-backdrop,
    body.melal-mobile-nav-open .melal-shell-backdrop,
    body.melal-mobile-nav-open .melal-mobile-backdrop {
        inset-block: 0 !important;
        inset-inline-start: min(86vw, 330px) !important;
        inset-inline-end: 0 !important;
        width: auto !important;
        pointer-events: auto !important;
        cursor: pointer;
    }
}

.melal-order-thumbnail-link {
    display: inline-flex;
    border-radius: 0.65rem;
    overflow: hidden;
    border: 1px solid var(--melal-border-color, #e5e7eb);
    background: #eef2f7;
}

.melal-order-thumbnail {
    display: inline-flex;
    width: 72px;
    height: 72px;
    object-fit: contain;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: rgb(232, 232, 232);
    color: #64748b;
    font-size: 0.7rem;
    text-align: center;
}

.melal-order-thumbnail-empty {
    border: 1px dashed var(--melal-border-color, #cbd5e1);
    padding: 0.35rem;
}