/* =====================================================================
   Truck Parts ERP — application theme
   Palette: dark navy blue (brand/sidebar), slate gray (surfaces), white
   (cards), orange (accent / calls-to-action) — tuned for RTL Arabic UI.
   ===================================================================== */

:root {
    --tpe-navy: #0f2942;
    --tpe-navy-dark: #0a1c2e;
    --tpe-navy-light: #16395c;
    --tpe-gray-bg: #f2f4f7;
    --tpe-gray-border: #e3e7ee;
    --tpe-orange: #f5821f;
    --tpe-orange-dark: #d96c0f;
    --tpe-text-muted: #6b7280;
    --tpe-sidebar-width: 300px;
}

body {
    background-color: var(--tpe-gray-bg);
    font-family: "Segoe UI", "Tahoma", system-ui, sans-serif;
    font-size: 0.925rem;
    color: #1f2937;
}

a { text-decoration: none; }

/* ---------------------------------------------------------------- Layout */
.tpe-wrapper {
    display: flex;
    min-height: 100vh;
}

.tpe-sidebar {
    width: var(--tpe-sidebar-width);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--tpe-navy) 0%, var(--tpe-navy-dark) 100%);
    color: #cfd8e3;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: margin-inline-start .2s ease;
    z-index: 1030;
}

.tpe-sidebar-brand {
    padding: 1.1rem .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.tpe-sidebar-brand img { height: 44px; max-width: 100%; object-fit: contain; }

.tpe-brand-mark { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.tpe-brand-mark-word { font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; color: #fff; line-height: 1; }
.tpe-brand-mark-accent { color: var(--tpe-orange); }
.tpe-sidebar.collapsed .tpe-brand-mark-word { display: none; }

/* ---------------------------------------------------- Collapsed icon rail
   Desktop-only mini sidebar: the full sidebar shrinks to an icon column
   instead of disappearing, so navigation stays reachable without needing
   the labels. Mobile keeps the separate show/hide drawer defined below. */
.tpe-sidebar.collapsed { width: 76px; }
.tpe-sidebar.collapsed .tpe-nav-heading,
.tpe-sidebar.collapsed .tpe-nav-link span:not(.tpe-nav-icon):not(.badge),
.tpe-sidebar.collapsed .tpe-nav-toggle-label,
.tpe-sidebar.collapsed .tpe-nav-chevron {
    display: none;
}
.tpe-sidebar.collapsed .tpe-nav-link,
.tpe-sidebar.collapsed .tpe-nav-toggle {
    justify-content: center;
    position: relative;
}
.tpe-sidebar.collapsed .tpe-nav-link .badge {
    position: absolute;
    top: .3rem;
    inset-inline-end: .5rem;
    margin: 0 !important;
}
.tpe-sidebar.collapsed .tpe-nav-icon {
    width: 32px;
    height: 32px;
    font-size: .95rem;
}
.tpe-sidebar.collapsed .tpe-nav-group .collapse {
    display: block !important; /* flatten grouped sub-items into visible icons */
}
.tpe-sidebar.collapsed .tpe-nav-group .collapse .tpe-nav-link {
    padding-inline-start: .6rem;
}

.tpe-nav { padding: .75rem .65rem; }

.tpe-nav .tpe-nav-heading {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    padding: 1rem .6rem .4rem;
}

.tpe-sidebar a.tpe-nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    margin: .05rem 0;
    border-radius: .55rem;
    color: #c3cee0;
    font-size: .845rem;
    transition: background .15s ease, color .15s ease;
}

/* Every label stays on one line regardless of length; the full bilingual
   text is still available via the link's title tooltip (set in sidebar.php
   and by nav-labels.js for any link that doesn't set one explicitly). */
.tpe-sidebar a.tpe-nav-link > span:not(.tpe-nav-icon):not(.badge) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tpe-sidebar a.tpe-nav-link:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
}

.tpe-sidebar a.tpe-nav-link.active {
    background: rgba(245,130,31,.18);
    color: #fff;
    font-weight: 600;
    box-shadow: inset -3px 0 0 var(--tpe-orange);
}

/* Icon badge: small rounded chip instead of a bare glyph */
.tpe-nav-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: .45rem;
    background: rgba(255,255,255,.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    color: #93a5c2;
    transition: background .15s ease, color .15s ease;
}

.tpe-sidebar a.tpe-nav-link:hover .tpe-nav-icon { background: rgba(255,255,255,.12); color: #fff; }
.tpe-sidebar a.tpe-nav-link.active .tpe-nav-icon { background: var(--tpe-orange); color: #fff; }

/* Collapsible groups (Finance / Reports) */
.tpe-nav-group { margin: .05rem 0; }

.tpe-nav-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .65rem;
    background: none;
    border: none;
    padding: .5rem .6rem;
    margin-top: .4rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #93a5c2;
    cursor: pointer;
    border-radius: .55rem;
}

.tpe-nav-toggle:hover { color: #fff; background: rgba(255,255,255,.07); }

.tpe-nav-toggle-label { flex-grow: 1; text-align: start; }

.tpe-nav-chevron {
    font-size: .65rem;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.tpe-nav-toggle[aria-expanded="true"] .tpe-nav-chevron { transform: rotate(180deg); }
.tpe-nav-toggle[aria-expanded="true"] { color: #b9c6dc; }

/* ------------------------------------------------------- Pin-to-favorites */
.tpe-nav-pin {
    background: none;
    border: none;
    color: #cfd8e3;
    opacity: .3;
    padding: .2rem .3rem;
    margin-inline-start: auto;
    flex-shrink: 0;
    font-size: .75rem;
    border-radius: .3rem;
    line-height: 1;
}
.tpe-nav-link:hover .tpe-nav-pin,
.tpe-nav-pin:hover { opacity: 1; }
.tpe-nav-pin .fa-solid { color: var(--tpe-orange); }
.tpe-sidebar.collapsed .tpe-nav-pin { display: none; }
#tpe-nav-pinned-section { border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .25rem; padding-bottom: .25rem; }
#tpe-nav-pinned-section .tpe-nav-heading { padding-top: 0; }

/* ------------------------------------------------------------ Quick search */
.tpe-quick-search-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--tpe-text-muted);
}
.tpe-quick-search-kbd {
    font-family: "Consolas", monospace;
    font-size: .68rem;
    background: var(--tpe-gray-bg);
    border: 1px solid var(--tpe-gray-border);
    border-radius: .3rem;
    padding: .05rem .35rem;
    color: var(--tpe-text-muted);
}

/* ------------------------------------------------------- Command palette */
.tpe-cmdk-content { border: none; overflow: hidden; }
.tpe-cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--tpe-gray-border);
}
.tpe-cmdk-icon { color: var(--tpe-text-muted); }
.tpe-cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    background: transparent;
    color: inherit;
}
.tpe-cmdk-results { max-height: 55vh; overflow-y: auto; padding: .4rem; }
.tpe-cmdk-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}
.tpe-cmdk-item i { width: 18px; text-align: center; color: var(--tpe-text-muted); }
.tpe-cmdk-item .tpe-cmdk-item-label { flex: 1; }
.tpe-cmdk-item .tpe-cmdk-item-group { font-size: .75rem; color: var(--tpe-text-muted); }
.tpe-cmdk-item:hover,
.tpe-cmdk-item.active { background: var(--tpe-gray-bg); }
[data-bs-theme="dark"] .tpe-cmdk-item:hover,
[data-bs-theme="dark"] .tpe-cmdk-item.active { background: rgba(255,255,255,.06); }
.tpe-cmdk-empty { padding: 2rem; text-align: center; color: var(--tpe-text-muted); }
.mono { font-family: "Consolas", "Courier New", monospace; direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------- Customer picker (sales) */
.tpe-customer-picker { position: relative; }
.tpe-customer-picker-input-wrap { position: relative; }
.tpe-customer-picker-input-wrap .form-control { padding-inline-end: 2.2rem; }
.tpe-customer-picker-clear {
    position: absolute;
    inset-inline-end: .5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--tpe-text-muted);
    line-height: 1;
    padding: .2rem .3rem;
    border-radius: .3rem;
}
.tpe-customer-picker-clear:hover { color: var(--tpe-orange); background: var(--tpe-gray-bg); }
.tpe-customer-picker-dropdown {
    position: absolute;
    z-index: 1055;
    inset-inline: 0;
    top: calc(100% + .25rem);
    max-height: 280px;
    overflow-y: auto;
    background: var(--tpe-card-bg, #fff);
    border: 1px solid var(--tpe-gray-border);
    border-radius: .6rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12);
    padding: .35rem;
}
.tpe-customer-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: .45rem;
    cursor: pointer;
    font-size: .9rem;
}
.tpe-customer-picker-item:hover,
.tpe-customer-picker-item.active { background: var(--tpe-gray-bg); }
[data-bs-theme="dark"] .tpe-customer-picker-item:hover,
[data-bs-theme="dark"] .tpe-customer-picker-item.active { background: rgba(255,255,255,.06); }
.tpe-customer-picker-chip { font-size: .75rem; font-weight: 600; }
.tpe-customer-picker-empty { padding: 1rem; text-align: center; color: var(--tpe-text-muted); font-size: .85rem; }
/* "بعض الموردين يتم التعامل معهم كزبون" — a supplier match in the same picker gets a quiet amber tint so it never looks like an ordinary customer row. */
.tpe-customer-picker-item--supplier { background: rgba(245, 158, 11, .07); border-inline-start: 2px solid #f59e0b; }
.tpe-customer-picker-item--supplier:hover,
.tpe-customer-picker-item--supplier.active { background: rgba(245, 158, 11, .16); }

/* --------------------------------------------------------- Global search
   A floating action button, not a header icon — reachable from anywhere on
   any page without competing for space in an already-busy topbar. Distinct
   gradient + wand icon so it never reads as a second Ctrl+K page-jumper.
   مكانها الأصلي (inset-inline-end، أي يسار الشاشة فعلياً في هذه الوثيقة
   RTL) — نُقلت مؤقتاً لليمين لتفادي تكدّسها فوق بطاقات لوحة التحكم، لكن
   ذلك كشف عن تصادمها هناك مع محتوى آخر (جدول "آخر الفواتير" وغيره من
   الشاشات) — أُعيدت لمكانها لأن حل بطاقات التنبيه نفسها (alerts.php:
   flex-column على الهواتف) يكفي وحده لمنع التصادم الأصلي بلا تحريك زر
   يظهر في كل صفحات النظام. */
.tpe-gs-fab {
    position: fixed;
    bottom: 28px;
    inset-inline-end: 28px;
    z-index: 1040;
    display: flex;
    align-items: center;
}
.tpe-gs-fab-btn {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255,255,255,.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tpe-navy) 0%, var(--tpe-navy-light) 55%, var(--tpe-orange) 130%);
    box-shadow: 0 8px 22px rgba(15,41,66,.4);
    transition: transform .15s ease;
    animation: tpeGsPulse 2.4s ease-in-out infinite;
}
.tpe-gs-fab-btn:hover { transform: scale(1.08); animation-play-state: paused; }
@keyframes tpeGsPulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(15,41,66,.4), 0 0 0 0 rgba(245,130,31,.35); }
    50% { box-shadow: 0 8px 22px rgba(15,41,66,.4), 0 0 0 10px rgba(245,130,31,0); }
}
.tpe-gs-fab-hide {
    position: absolute;
    top: -6px;
    inset-inline-start: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #6c757d;
    color: #fff;
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}
.tpe-gs-fab:hover .tpe-gs-fab-hide { opacity: 1; transform: scale(1); }
.tpe-gs-fab-hide:hover { background: #dc3545; }
/* Restore tab: deliberately large, labeled, and anchored to the same
   corner the FAB itself occupies — hiding the FAB must not require
   remembering an unlabeled sliver of color to get it back. */
.tpe-gs-fab-restore {
    position: fixed;
    bottom: 28px;
    inset-inline-end: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: .4rem;
    border: none;
    padding: .55rem .9rem .55rem 1rem;
    border-start-start-radius: 2rem;
    border-end-start-radius: 2rem;
    background: linear-gradient(135deg, var(--tpe-navy) 0%, var(--tpe-orange) 130%);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(15,41,66,.3);
    transition: padding-inline-end .15s ease;
}
.tpe-gs-fab-restore:hover { padding-inline-end: 1.3rem; color: #fff; }
@media (max-width: 576px) {
    .tpe-gs-fab { bottom: 14px; inset-inline-end: 14px; }
    .tpe-gs-fab-btn { width: 44px; height: 44px; font-size: 1.05rem; }
    .tpe-gs-fab-restore { bottom: 14px; }
}

.tpe-gs-content { border: none; overflow: hidden; }
.tpe-gs-input-wrap {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--tpe-gray-border);
    background: linear-gradient(135deg, rgba(15,41,66,.05), rgba(245,130,31,.05));
}
.tpe-gs-icon { color: var(--tpe-orange); font-size: 1.1rem; }
.tpe-gs-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    background: transparent;
    color: inherit;
}
.tpe-gs-results { max-height: 65vh; overflow-y: auto; padding: .6rem; }
.tpe-gs-empty { padding: 3rem 1.5rem; text-align: center; color: var(--tpe-text-muted); }
.tpe-gs-category { margin-bottom: .5rem; }
.tpe-gs-category-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--tpe-text-muted);
    text-transform: uppercase;
    padding: .4rem .5rem .3rem;
}
.tpe-gs-category-title i { color: var(--tpe-orange); }
.tpe-gs-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .7rem;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}
.tpe-gs-item:hover,
.tpe-gs-item.active { background: var(--tpe-gray-bg); color: inherit; }
[data-bs-theme="dark"] .tpe-gs-item:hover,
[data-bs-theme="dark"] .tpe-gs-item.active { background: rgba(255,255,255,.06); }
.tpe-gs-item-title { font-weight: 600; font-size: .92rem; }
.tpe-gs-item-subtitle { font-size: .78rem; color: var(--tpe-text-muted); }
.tpe-gs-more {
    display: block;
    text-align: center;
    font-size: .8rem;
    padding: .4rem;
    color: var(--tpe-orange);
    text-decoration: none;
}
.tpe-gs-more:hover { text-decoration: underline; color: var(--tpe-orange-dark); }
.tpe-gs-hint { font-size: .72rem; color: var(--tpe-text-muted); padding: 0 .5rem .5rem; }

/* --------------------------------------------------------- Smart buttons
   Odoo/ERPNext's product-form pattern: the record's key numbers doubling
   as shortcuts to where you'd act on them, instead of only living in a
   details table further down the page. */
.tpe-smart-btn {
    display: block;
    background: #fff;
    border: 1px solid var(--tpe-gray-border);
    border-radius: .6rem;
    padding: .7rem .9rem;
    color: inherit;
    height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
a.tpe-smart-btn:hover { border-color: var(--tpe-orange); box-shadow: 0 2px 8px rgba(245,130,31,.12); color: inherit; }
.tpe-smart-btn-value { font-size: 1.15rem; font-weight: 700; }
.tpe-smart-btn-label { font-size: .74rem; color: var(--tpe-text-muted); margin-top: .1rem; }
[data-bs-theme="dark"] .tpe-smart-btn { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }

/* ------------------------------------------------ Icon-rail sidebar layout
   Opt-in via Settings -> General -> Sidebar Layout. The classic <nav> stays
   in the DOM (display:none) so buildNavIndex()/pinned favorites keep
   working unchanged — only .tpe-rail-wrap is actually visible. */
.tpe-sidebar--rail { display: flex; flex-direction: column; }
.tpe-rail-wrap { display: flex; flex: 1; min-height: 0; }
.tpe-rail {
    flex: 0 0 56px;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .6rem 0;
    border-inline-end: 1px solid rgba(255,255,255,.08);
    overflow-y: auto;
}
.tpe-rail-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: .6rem;
    background: transparent;
    color: #93a5c2;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.tpe-rail-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.tpe-rail-btn.active { background: var(--tpe-orange); color: #fff; }
.tpe-rail-btn .badge {
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: .5rem;
    padding: .15em .35em;
}
.tpe-rail-panel { flex: 1; min-width: 0; padding: .75rem .6rem; overflow-y: auto; }
.tpe-rail-panel-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    padding: .2rem .6rem .6rem;
}
.tpe-rail-panel .tpe-nav-link .tpe-nav-pin { display: none; } /* icon-rail panel favors compactness over the pin affordance */

/* --------------------------------------------- Compact (hover-flyout) rail
   Icon-only rail with no permanent second column — a group's items show in
   a floating flyout only while hovering that icon, so the sidebar never
   takes more than the rail's own width. */
.tpe-sidebar--compact { width: 68px; }
.tpe-sidebar--compact .tpe-rail-wrap { display: block; }
.tpe-sidebar--compact .tpe-rail { width: 100%; border-inline-end: none; }
.tpe-compact-flyout {
    position: fixed;
    background: linear-gradient(180deg, var(--tpe-navy) 0%, var(--tpe-navy-dark) 100%);
    color: #cfd8e3;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .65rem;
    padding: .6rem;
    min-width: 210px;
    box-shadow: 0 16px 32px rgba(0,0,0,.35);
    z-index: 1080;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .12s ease, transform .12s ease;
}
[dir="rtl"] .tpe-compact-flyout { transform: translateX(-6px); }
.tpe-compact-flyout.show { opacity: 1; visibility: visible; transform: translateX(0); }

/* ---------------------------------------------- Settings: sidebar style picker */
.tpe-sidebar-style-option { display: block; cursor: pointer; }
.tpe-sidebar-style-option .tpe-sidebar-style-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.tpe-sidebar-style-card {
    border: 2px solid var(--tpe-gray-border);
    border-radius: .65rem;
    padding: .9rem 1rem;
    height: 100%;
    transition: border-color .15s ease, background .15s ease;
}
.tpe-sidebar-style-option.selected .tpe-sidebar-style-card { border-color: var(--tpe-orange); background: rgba(245,130,31,.06); }
.tpe-sidebar-style-title { font-weight: 600; margin-bottom: .3rem; }
.tpe-sidebar-style-title i { color: var(--tpe-orange); width: 20px; text-align: center; }

.tpe-sidebar-preview { border: 1px dashed var(--tpe-gray-border); border-radius: .65rem; padding: 1rem; display: flex; justify-content: center; }
.tpe-sidebar-preview-mock {
    width: 100%;
    max-width: 360px;
    background: linear-gradient(180deg, var(--tpe-navy) 0%, var(--tpe-navy-dark) 100%);
    border-radius: .5rem;
    overflow: hidden;
    font-size: .8rem;
    color: #c3cee0;
}
.tpe-sidebar-preview-mock--classic { padding: .6rem; }
.tpe-sidebar-preview-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .5rem;
    border-radius: .4rem;
}
.tpe-sidebar-preview-row i { width: 16px; text-align: center; color: #93a5c2; }
.tpe-sidebar-preview-row--group { color: #fff; font-weight: 600; }
.tpe-sidebar-preview-mock--rail { display: flex; min-height: 170px; }
.tpe-sidebar-preview-rail {
    flex: 0 0 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .6rem 0;
    border-inline-end: 1px solid rgba(255,255,255,.08);
}
.tpe-sidebar-preview-rail-btn {
    width: 30px;
    height: 30px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #93a5c2;
    font-size: .8rem;
}
.tpe-sidebar-preview-rail-btn.active { background: var(--tpe-orange); color: #fff; }
.tpe-sidebar-preview-panel { flex: 1; padding: .6rem .7rem; }
.tpe-sidebar-preview-panel-title { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin-bottom: .4rem; font-weight: 700; }

.tpe-sidebar-preview-mock--compact { position: relative; display: flex; min-height: 170px; overflow: visible; }
.tpe-sidebar-preview-rail--compact { border-inline-end: none; }
.tpe-sidebar-preview-flyout {
    position: absolute;
    top: .5rem;
    inset-inline-start: 52px;
    width: 150px;
    background: linear-gradient(180deg, var(--tpe-navy) 0%, var(--tpe-navy-dark) 100%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .5rem;
    padding: .5rem .6rem;
    box-shadow: 0 10px 22px rgba(0,0,0,.3);
}

/* ------------------------------------------- Settings: collapsible cards */
.tpe-settings-card-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.tpe-settings-card-toggle {
    color: var(--tpe-text-muted);
    font-size: .8rem;
    transition: transform .15s ease;
}
.tpe-settings-card-header:hover .tpe-settings-card-toggle { color: var(--tpe-orange); }

.tpe-main {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tpe-topbar {
    background: #fff;
    border-bottom: 1px solid var(--tpe-gray-border);
    padding: .6rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.tpe-alerts-menu {
    width: 340px;
    max-width: calc(100vw - 2rem);
    max-height: 420px;
    overflow-y: auto;
}

.tpe-topbar .tpe-clock {
    font-size: .8rem;
    color: var(--tpe-text-muted);
}

/* Thin seam between the utility-toggle icons and the POS/branch/account
   group in the header — see header.php for why. */
.tpe-topbar-sep {
    align-self: stretch;
    width: 1px;
    margin-block: .4rem;
    background: var(--tpe-gray-border);
    flex: 0 0 auto;
}
[data-bs-theme="dark"] .tpe-topbar-sep { background: rgba(255,255,255,.12); }

.tpe-content { padding: 1.25rem; flex-grow: 1; }

.tpe-footer {
    padding: .85rem 1.25rem;
    font-size: .8rem;
    color: var(--tpe-text-muted);
    border-top: 1px solid var(--tpe-gray-border);
    background: #fff;
}

/* ----------------------------------------------------------------- Cards */
.tpe-card {
    background: #fff;
    border: 1px solid var(--tpe-gray-border);
    border-radius: .6rem;
    box-shadow: 0 2px 8px rgba(16,24,40,.08);
    transition: box-shadow .2s ease, border-color .2s ease;
}

/* فقاعة رسالة الموظف في صندوق وارد المحادثة الحية — "bg-orange" وحدها ليست
   فئة أدوات Bootstrap حقيقية هنا (فقط .tpe-stat-card.bg-orange مُعرَّفة)،
   فاستخدامها مع text-white كان يُنتج نصاً أبيض على خلفية بيضاء غير مرئي. */
.tpe-lc-staff-bubble { background: var(--tpe-orange); color: #fff; }

.tpe-card:hover {
    box-shadow: 0 4px 12px rgba(16,24,40,.12);
    border-color: #d4d8e0;
}

/* لوحة مالك المنصة (/platform) — شريط تنقّل حقيقي بدل صفّ أزرار متجاورة
   بلا تمايز؛ كل قسم أيقونة + تسمية بطاقة صغيرة، يلتفّ بلا تكسّر على شاشة
   ضيّقة (flex-wrap)، ويُبرِز القسم النشط بلون العلامة التجارية. */
.tpe-platform-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    background: rgba(15,41,66,.04);
    border-radius: .7rem;
    padding: .4rem;
}
.tpe-platform-nav-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: .5rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--tpe-navy);
    background: #fff;
    border: 1px solid rgba(15,41,66,.08);
    text-decoration: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tpe-platform-nav-item i { color: var(--tpe-orange); width: 1em; text-align: center; }
.tpe-platform-nav-item:hover {
    background: var(--tpe-navy);
    color: #fff;
    box-shadow: 0 3px 10px rgba(15,41,66,.25);
}
.tpe-platform-nav-item:hover i { color: var(--tpe-orange); }
.tpe-platform-nav-item.active {
    background: var(--tpe-orange);
    border-color: var(--tpe-orange);
    color: #fff;
}
.tpe-platform-nav-item.active i { color: #fff; }

/* شارة "النسخة مرخَّصة" — تظهر فقط حين يوجد اشتراك/ترخيص نشط فعلاً حالياً
   لهذا التنصيب، لا وعداً تصميمياً بلا مصدر حقيقي. */
.tpe-license-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, #0f7a4a, #12a05e);
    color: #fff;
    padding: .5rem .9rem;
    border-radius: .6rem;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(18,160,94,.25);
}
.tpe-license-badge-key {
    font-family: 'Courier New', monospace;
    background: rgba(255,255,255,.18);
    padding: .15rem .5rem;
    border-radius: .35rem;
    letter-spacing: .03em;
    font-size: .78rem;
    unicode-bidi: plaintext;
}

.tpe-stat-card {
    /* height:100% — بطاقة بشارة إضافية (chip) قد يلتفّ رقمها لسطر ثانٍ عند
       عرض عمود ضيّق (مثلاً "1 صنف" مع "160.00 د.ل" في عمود col-lg-3)،
       فيطول صندوقها الفعلي عن بقية بطاقات نفس الصفّ رغم تساوي ارتفاع
       أعمدة Bootstrap نفسها (stretch افتراضي على .row). بلا هذا تبقى
       البطاقة بارتفاع محتواها فقط، فيظهر التفاوت بصرياً كما لو كانت
       الأعمدة نفسها غير متساوية. */
    height: 100%;
    padding: 1.1rem 1.25rem;
    border-radius: .6rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: transform .2s ease, box-shadow .2s ease;
}

.tpe-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

.tpe-stat-card .tpe-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: .6rem;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.tpe-stat-card .tpe-stat-value { font-size: 1.4rem; font-weight: 700; }
.tpe-stat-card .tpe-stat-label {
    font-size: .78rem;
    opacity: .9;
}

/* شارة ثانوية بجانب الرقم الأساسي — رقم مساعد (عدد الأصناف مثلاً) على نفس
   السطر بدل سطر ثالث يُطيل البطاقة ويكسر تساوي ارتفاعات الصف. مُلحقة بسطر
   القيمة لا التسمية لأن التسمية ثنائية اللغة وطويلة، فتلتفّ على الشاشات
   الضيقة وتُعيد الشارة إلى سطر مستقل. */
.tpe-stat-card .tpe-stat-chip {
    display: inline-block;
    background: rgba(255,255,255,.22);
    border-radius: 999px;
    padding: .05rem .5rem;
    margin-inline-start: .4rem;
    font-size: .72rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

/* Dark text override for specific stat labels */
.tpe-stat-card .tpe-stat-label[style*="color: #1f2937"] {
    color: #1f2937 !important;
}

.tpe-stat-card.bg-navy { background: linear-gradient(135deg, var(--tpe-navy), var(--tpe-navy-light)); }
.tpe-stat-card.bg-orange { background: linear-gradient(135deg, var(--tpe-orange), var(--tpe-orange-dark)); }
.tpe-stat-card.bg-teal { background: linear-gradient(135deg, #0f766e, #115e59); }
.tpe-stat-card.bg-rose { background: linear-gradient(135deg, #be123c, #9f1239); }

/* --------------------------------------------- Invoice line-items table
   رؤوس أعمدة بسطر واحد. التسميات ثنائية اللغة كانت تلتفّ على سطرين داخل
   أعمدة ضيقة ثابتة العرض (110-160px)، فيبدو الرأس مكسوراً وغير مرتّب.
   nowrap يجعل العرض المحدَّد حداً أدنى لا سقفاً، والالتفاف الأفقي — إن
   لزم — يتكفّل به .table-responsive المحيط أصلاً. */
#tpe-items-table thead th {
    white-space: nowrap;
    vertical-align: middle;
}

/* d-block على النصف الإنجليزي كان يفرض سطراً ثانياً بذاته. */
#tpe-items-table thead th small {
    display: inline !important;
}

/* ------------------------------------------------------------- About modal */
.tpe-about-logo { max-width: 160px; max-height: 90px; object-fit: contain; }
.tpe-about-contacts { max-width: 260px; margin: 0 auto; }
.tpe-about-contacts li { padding: .25rem 0; }
.tpe-about-contacts i { color: var(--tpe-orange); width: 1.4rem; }
.tpe-about-contacts a { color: inherit; }
.tpe-about-contacts a:hover { color: var(--tpe-orange); }

/* ---------------------------------------------------------------- Forms */
.tpe-label-bilingual { font-weight: 600; font-size: .85rem; }
.tpe-label-bilingual small { color: var(--tpe-text-muted); font-weight: 400; }

.btn-orange { background: var(--tpe-orange); border-color: var(--tpe-orange); color: #fff; }
.btn-orange:hover { background: var(--tpe-orange-dark); border-color: var(--tpe-orange-dark); color: #fff; }

.btn-navy { background: var(--tpe-navy); border-color: var(--tpe-navy); color: #fff; }
.btn-navy:hover { background: var(--tpe-navy-dark); border-color: var(--tpe-navy-dark); color: #fff; }

/* --------------------------------------------------------------- Tables */
table.dataTable thead th { background: #f8fafc; font-size: .8rem; }
table.dataTable td, table.dataTable th { vertical-align: middle; }

/* ---------------------------------------------------------- Responsive */
@media (max-width: 991.98px) {
    /**
     * الشريط الجانبي خارج الشاشة على الجوال/التابلت — قبل هذا كان يُخفى
     * بـmargin-inline-start سالب فوق موضع ثابت (position:fixed) بينما
     * dir="rtl" على <html> بالتطبيق كله — تركيبة تُنتج شريحة من الشريط
     * (تتفاوت 15-90px بحسب العرض) تبقى داخل الشاشة دائماً، تضغط المحتوى
     * وتقصّه من الحافة، وهو بالضبط ما ظهر في تقرير المستخدم على شاشات
     * الجوال والتابلت معاً.
     *
     * البديل: تثبيت الشريط فعلياً بـright:0 (يمين الشاشة — حيث يقف فعلاً
     * في هذا التطبيق الآحادي الاتجاه RTL بلا حاجة لخاصية منطقية)، وإخفاؤه
     * بـtransform: translateX(100%) — تُحسَب دائماً كنسبة من عرض العنصر
     * نفسه، فلا يمكن أن تترك شريحة مهما كان عرض الشاشة، وتُتيح انزلاقاً
     * سلساً مجاناً بدل قفزة فورية.
     */
    .tpe-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        transform: translateX(100%);
        transition: transform .25s ease;
    }
    .tpe-sidebar.show { transform: translateX(0); }
    .tpe-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1025; display: none;
    }
    .tpe-backdrop.show { display: block; }
}

@media (max-width: 767.98px) {
    /* Page headers are "title on one side, actions on the other". At phone
       width the action group is wider than the screen and, without wrapping,
       simply hangs off the edge — measured at 217px past the viewport on the
       database page, which scrolled the whole document sideways. Wrapping is
       applied here rather than in each view because every screen repeats this
       pattern and the next one added would repeat the bug with it. */
    .d-flex.gap-2,
    .d-flex.gap-3 { flex-wrap: wrap; }

    .tpe-content { padding: 1rem .75rem; }

    /* Stat cards read as a 2-up grid on a phone rather than four cramped
       columns of clipped numbers. */
    .tpe-stat-value { font-size: 1.25rem; }
    .tpe-stat-icon { font-size: 1.5rem; }

    /* Modals get the full width they need for forms; the default margin
       wastes a sixth of a 375px screen. */
    .modal-dialog { margin: .5rem; }

    /* A table that must scroll should look like it can. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* Touch targets.
   Two conditions, either one enough: pointer:coarse catches a touch device at
   any width (a tablet in landscape is wide but still a thumb, not a mouse),
   and max-width:767.98px catches a phone even when a testing tool reports a
   desktop pointer for a merely-narrowed window rather than true touch
   emulation. 31px was the measured height of the header icon buttons, well
   under what a fingertip can reliably hit. */
@media (pointer: coarse), (max-width: 767.98px) {
    .btn,
    .form-control,
    .form-select,
    .page-link {
        min-height: 40px;
    }

    .btn-sm,
    .form-control-sm,
    .form-select-sm {
        min-height: 38px;
        padding-block: .375rem;
    }

    /* Icon-only buttons need width as well as height to be hittable. */
    .btn-sm > i:only-child,
    .btn > i:only-child { pointer-events: none; }
    .btn-sm:has(> i:only-child),
    .btn:has(> i:only-child) { min-width: 40px; }

    /* The rule above misses every header action button: POS carries a
       hidden (d-none below md) text span next to its icon, and the alerts
       bell carries an absolutely-positioned unread badge — both are DOM
       siblings of the icon even though neither is visible, so :only-child
       never matches. Measured at 27–30px wide (well under the 40px target)
       until this ran. Scoped to the topbar so it doesn't widen every
       multi-child button elsewhere in the app. */
    .tpe-topbar .btn { min-width: 40px; }

    /* Table action buttons sit in tight rows; give them room to breathe
       instead of overlapping fingertips. */
    td .btn + .btn,
    td form + form,
    td .btn + form { margin-inline-start: .25rem; }

    .form-check-input { width: 1.25rem; height: 1.25rem; }

    /* Bootstrap's own close button isn't a .btn, so the rule above misses it
       — measured at 31px, the smallest control in every modal on the site.
       Selector matches .modal-header's own override (padding: calc(...)) on
       specificity, which otherwise wins the cascade and leaves this inert. */
    .modal-header .btn-close { padding: .75em; }

    /* Bootstrap's dropdown items are comfortable with a mouse and cramped
       under a thumb. */
    .dropdown-item { padding-block: .625rem; }
}

/* ------------------------------------------------------------- Dark theme
   Toggled explicitly via the header button (assets/js/app.js), persisted in
   localStorage, applied as data-bs-theme="dark" on <html> before first paint
   (see the inline script in the layout <head>) to avoid a flash of light mode.
   Bootstrap 5.3 itself reskins its own components (buttons, forms, dropdowns,
   modals) automatically from this same attribute; these rules only cover the
   app's own custom .tpe-* classes and hardcoded colors that Bootstrap doesn't
   touch. */
[data-bs-theme="dark"] {
    --tpe-gray-bg: #0b1220;
    --tpe-gray-border: #263447;
    --tpe-text-muted: #94a3b8;
}

[data-bs-theme="dark"] body { color: #e5e7eb; }

[data-bs-theme="dark"] .tpe-card,
[data-bs-theme="dark"] .tpe-topbar,
[data-bs-theme="dark"] .tpe-footer {
    background: #111827;
    border-color: var(--tpe-gray-border);
    color: #e5e7eb;
}

[data-bs-theme="dark"] table.dataTable thead th { background: #1f2937; color: #e5e7eb; }
[data-bs-theme="dark"] .tpe-about-modal { background: #111827; color: #e5e7eb; }
[data-bs-theme="dark"] .badge.text-bg-light { background-color: #1f2937 !important; color: #cbd5e1 !important; }

/* Global image lightbox (click-to-zoom) */
img.tpe-zoomable { cursor: zoom-in; }
body.tpe-lightbox-open { overflow: hidden; }
.tpe-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .88);
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.tpe-lightbox-overlay.show { display: flex; }
.tpe-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    cursor: zoom-out;
}
.tpe-lightbox-close {
    position: absolute;
    top: 16px;
    inset-inline-end: 24px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

/* ------------------------------------------------------------------------
   Exchange-rate board (dashboard widget)

   Laid out like the board on an exchange office wall rather than as another
   dashboard table: the rate is the largest thing in the row, and the move
   since the previous rate sits directly under it, because "which way did it
   go" is the question the board is actually asked.
   ------------------------------------------------------------------------ */

.tpe-fx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    margin: -.75rem -.75rem .6rem -.75rem;
    border-bottom: 2px solid var(--tpe-orange);
    background: linear-gradient(135deg, rgba(245,130,31,.04), rgba(245,130,31,.02));
    border-radius: .4rem .4rem 0 0;
}
.tpe-fx-base { display: flex; align-items: center; gap: .5rem; }
.tpe-fx-base-flag { font-size: 1.5rem; line-height: 1; }
.tpe-fx-base strong { display: block; font-size: 1rem; line-height: 1.1; }
.tpe-fx-base small { color: var(--tpe-text-muted); font-size: .68rem; }
.tpe-fx-updated {
    display: flex; align-items: center; gap: .35rem;
    color: var(--tpe-text-muted); font-size: .72rem;
    font-variant-numeric: tabular-nums;
}
.tpe-fx-updated .fa-arrows-rotate { transition: transform .6s ease; }
.tpe-fx-updated .fa-arrows-rotate.is-spinning { transform: rotate(360deg); }

.tpe-fx-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .6rem;
    margin: 0 -.6rem;
    border-bottom: 1px solid var(--tpe-gray-border);
    background: transparent;
    transition: background .2s ease;
}
.tpe-fx-row:hover {
    background: rgba(245,130,31,.03);
}
.tpe-fx-row:last-child { border-bottom: none; }
.tpe-fx-flag { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }

.tpe-fx-id { flex: 1 1 auto; min-width: 0; }
.tpe-fx-pair { display: flex; align-items: baseline; gap: .3rem; }
.tpe-fx-pair strong { font-size: .95rem; letter-spacing: .02em; }
.tpe-fx-pair span { color: var(--tpe-text-muted); font-size: .8rem; }
.tpe-fx-name {
    font-size: .7rem; color: var(--tpe-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tpe-fx-value {
    flex: 0 0 auto;
    text-align: end;
    padding: .4rem .6rem;
    background: #f9fafc;
    border-radius: .4rem;
    border: 1px solid #e8eaf0;
}
.tpe-fx-rate {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #1f2937;
}
.tpe-fx-rate em {
    font-style: normal;
    font-size: .62em;
    font-weight: 500;
    color: #6b7280;
    margin-inline-start: .2em;
}
.tpe-fx-rate-none {
    color: #9ca3af;
    font-weight: 500;
    padding: .4rem .6rem;
    background: #f3f4f6;
    border-radius: .3rem;
}

.tpe-fx-meta { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; margin-top: .15rem; }
.tpe-fx-move { font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tpe-fx-move.up { color: #dc3545; }     /* the dinar buying less — bad news locally */
.tpe-fx-move.down { color: #1e7e34; }
.tpe-fx-move.flat { color: var(--tpe-text-muted); font-weight: 500; }

.tpe-fx-age { font-size: .6rem; padding: .1rem .35rem; border-radius: 999px; white-space: nowrap; }
.tpe-fx-age.is-fresh { background: rgba(30,126,52,.14); color: #1e7e34; }
.tpe-fx-age.is-ok { background: var(--tpe-gray-bg); color: var(--tpe-text-muted); }
.tpe-fx-age.is-stale { background: rgba(255,193,7,.18); color: #a97b00; }
.tpe-fx-age.is-missing { background: rgba(220,53,69,.14); color: #dc3545; }

.tpe-fx-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: .75rem -.6rem -.75rem -.6rem;
    padding: .5rem .6rem;
    border-top: 1px solid var(--tpe-gray-border);
    background: #f9fafc;
    border-radius: 0 0 .4rem .4rem;
    font-size: .66rem;
    color: #6b7280;
}
.tpe-fx-foot a {
    text-decoration: none;
    color: var(--tpe-orange);
    transition: color .2s ease;
}
.tpe-fx-foot a:hover {
    color: var(--tpe-orange-dark);
}

.tpe-fx-empty {
    text-align: center;
    padding: 1.75rem .5rem;
    color: #6b7280;
    background: #f9fafc;
    border-radius: .4rem;
    border: 1px solid #e5e7eb;
}
.tpe-fx-empty i {
    font-size: 1.75rem;
    display: block;
    margin-bottom: .5rem;
    opacity: .4;
    color: #9ca3af;
}
.tpe-fx-empty p {
    margin-bottom: .5rem;
    font-weight: 500;
    color: #374151;
}

/* ======================================== Sidebar section groups (admin/reports) */
.tpe-nav-section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7a8ca0;
    padding: .9rem .6rem .4rem;
    display: block;
    margin-top: .4rem;
}

.tpe-nav-section-label:first-child {
    margin-top: 0;
    padding-top: .6rem;
}

.tpe-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, .06);
    margin: .5rem .6rem;
    display: block;
}

/* Nested links styling within sections */
.tpe-nav-group .collapse .tpe-nav-link {
    padding-inline-start: .8rem;
    font-size: .825rem;
    color: #b9c6dc;
}

.tpe-nav-group .collapse .tpe-nav-link:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

.tpe-nav-group .collapse .tpe-nav-link.active {
    background: rgba(245,130,31,.15);
    color: #fff;
    font-weight: 600;
}

.tpe-sidebar.collapsed .tpe-nav-section-label,
.tpe-sidebar.collapsed .tpe-nav-divider {
    display: none;
}

/* Quick-info popover (assets/js/quickinfo.js) */
.tpe-qi-card {
    position: absolute;
    z-index: 2000;
    width: 280px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    padding: .9rem 1rem;
    font-size: .85rem;
}

.tpe-qi-table-scroll {
    max-height: 220px;
    overflow-y: auto;
}

.tpe-qi-close {
    position: absolute;
    top: .4rem;
    inset-inline-end: .5rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
}

.tpe-qi-close:hover {
    color: #1e293b;
}

.tpe-qi-title {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .5rem;
    padding-inline-end: 1.2rem;
}

.tpe-qi-row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px dashed #f1f5f9;
    color: #475569;
}

.tpe-qi-row:last-child {
    border-bottom: none;
}

.tpe-qi-table {
    width: 100%;
    margin-top: .5rem;
    font-size: .8rem;
    border-collapse: collapse;
}

.tpe-qi-table th {
    text-align: start;
    color: #94a3b8;
    font-weight: 600;
    padding: .25rem 0;
}

.tpe-qi-table td {
    padding: .25rem 0;
    border-top: 1px solid #f1f5f9;
    color: #334155;
}

.tpe-qi-loading {
    color: #94a3b8;
}

/* ---- Product list type-ahead ------------------------------------------
   Anchored under the search box. Panel scrolls rather than growing past
   the viewport, since a 68k-row catalogue can match a lot. */
.tpe-suggest {
    position: absolute; z-index: 1050; inset-inline: 0; top: calc(100% + 4px);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 60vh; overflow-y: auto;
}
.tpe-suggest-item {
    display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem;
    text-decoration: none; color: inherit; border-bottom: 1px solid var(--bs-border-color-translucent, #f1f1f1);
}
.tpe-suggest-item:last-of-type { border-bottom: none; }
.tpe-suggest-item:hover,
.tpe-suggest-item.active { background: var(--bs-tertiary-bg, #f6f7f9); }
.tpe-suggest-thumb {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 5px; overflow: hidden;
    background: var(--bs-tertiary-bg, #f1f3f5);
    display: flex; align-items: center; justify-content: center; color: #9aa3ad;
}
.tpe-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tpe-suggest-body { flex: 1 1 auto; min-width: 0; }
.tpe-suggest-title {
    display: block; font-weight: 600; font-size: .86rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpe-suggest-tag {
    display: inline-block; margin-inline-start: .35rem; padding: .05rem .35rem;
    border-radius: 99px; font-size: .68rem; font-weight: 700;
    background: var(--tpe-orange, #f5821f); color: #fff;
}
.tpe-suggest-meta {
    display: block; font-size: .72rem; color: var(--bs-secondary-color, #6c757d);
    direction: ltr; text-align: start;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpe-suggest-right { flex: 0 0 auto; text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.tpe-suggest-price { font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.tpe-suggest-stock {
    font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 99px;
    font-variant-numeric: tabular-nums;
}
.tpe-suggest-stock.in { background: #d1fae5; color: #065f46; }
.tpe-suggest-stock.out { background: #fee2e2; color: #991b1b; }
.tpe-suggest-empty { padding: .8rem .75rem; font-size: .85rem; color: var(--bs-secondary-color, #6c757d); }
.tpe-suggest-all {
    display: block; width: 100%; border: none; background: var(--bs-tertiary-bg, #f6f7f9);
    padding: .5rem; font-size: .8rem; font-weight: 600; color: var(--bs-primary, #0d6efd); cursor: pointer;
}
.tpe-suggest-all:hover { background: var(--bs-secondary-bg, #e9ecef); }

/* ---------------------------------------------- Leaflet map loading overlay
   (assets/js/tpe-leaflet-loading.js) — the free public OpenStreetMap tile
   server this app uses has no SLA, so a first cold load can take a few
   seconds; without this a slow-loading map is visually indistinguishable
   from a broken one. */
.tpe-map-loading-overlay {
    position: absolute; inset: 0; z-index: 500;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    background: rgba(255, 255, 255, .85); border-radius: inherit;
    transition: opacity .25s ease;
}
:root:not([data-theme="light"]) .tpe-map-loading-overlay { background: rgba(15, 23, 42, .82); }
:root[data-theme="dark"] .tpe-map-loading-overlay { background: rgba(15, 23, 42, .82); }
.tpe-map-loading-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(148, 163, 184, .35); border-top-color: var(--tpe-orange, #f97316);
    animation: tpe-map-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .tpe-map-loading-spinner { animation-duration: 2s; } }
@keyframes tpe-map-spin { to { transform: rotate(360deg); } }
.tpe-map-loading-text { font-size: .82rem; color: var(--bs-secondary-color, #6c757d); text-align: center; padding: 0 1rem; }
.tpe-map-loading-overlay.tpe-map-loading-hidden { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------- Floating assistant
   (assets/js/tpe-assistant.js) — a friendly CSS-only face, deliberately at
   the bottom-LEFT corner (physical, not logical — inset-inline-start would
   put it back in the notification cluster's own corner under RTL) so it
   never competes with the top-right notification bell. That same corner
   already hosts the global-search FAB (.tpe-gs-fab, 60px, bottom:28px) —
   stacked above it with a clear gap instead of the higher z-index simply
   burying it, which is what happened before this offset existed. */
.tpe-assistant { position: fixed; left: 26px; bottom: 100px; z-index: 1050; direction: rtl; }
.tpe-assistant-face {
    width: 56px; height: 56px; border-radius: 50%; border: none; padding: 0;
    background: linear-gradient(160deg, var(--tpe-orange, #f5821f), var(--tpe-orange-dark, #d96c0f));
    box-shadow: 0 4px 16px rgba(217, 108, 15, .4);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; animation: tpe-assistant-breathe 4s ease-in-out infinite;
}
.tpe-assistant-face:hover { animation-play-state: paused; transform: scale(1.06); }
.tpe-assistant-face.tpe-assistant-has-tip { animation: tpe-assistant-nudge 1.6s ease-in-out infinite; }
.tpe-assistant-face-inner { position: relative; width: 26px; height: 16px; }
.tpe-assistant-eye {
    position: absolute; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: tpe-assistant-blink 4.5s ease-in-out infinite;
}
.tpe-assistant-eye-l { left: 2px; }
.tpe-assistant-eye-r { right: 2px; }
.tpe-assistant-mouth {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 16px; height: 8px; border-radius: 0 0 16px 16px; border: 2px solid #fff; border-top: none;
}
.tpe-assistant-badge {
    position: absolute; top: -2px; inset-inline-end: -2px; width: 14px; height: 14px; border-radius: 50%;
    background: #dc2626; border: 2px solid var(--tpe-gray-bg, #f2f4f7); display: none;
}
.tpe-assistant-face.tpe-assistant-has-tip .tpe-assistant-badge { display: block; }
@keyframes tpe-assistant-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes tpe-assistant-nudge { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes tpe-assistant-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) {
    .tpe-assistant-face, .tpe-assistant-face.tpe-assistant-has-tip, .tpe-assistant-eye { animation: none; }
}
/* على الهواتف: ثلاثة أزرار عائمة (المساعد + الاتصال + البحث الذكي) مكدَّسة
   فوق بعضها على نفس الحافة تحجب عمود ارتفاعه ~180px من محتوى الصفحة —
   ملحوظ بوضوح فوق بطاقات لوحة التحكم. تصغير الأزرار الثلاثة وتقريب
   مسافاتها هنا يقلّص العمود المحجوب بلا أي تغيير في وظيفتها. */
@media (max-width: 576px) {
    .tpe-assistant { left: 14px; bottom: 66px; }
    .tpe-assistant-face { width: 44px; height: 44px; }
    .tpe-assistant-face-inner { width: 20px; height: 12px; }
    .tpe-assistant-mouth { width: 12px; height: 6px; }
}

.tpe-assistant-bubble {
    position: absolute; bottom: 68px; left: 0; width: min(300px, calc(100vw - 40px));
    background: #fff; border: 1px solid var(--tpe-gray-border, #e3e7ee); border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 41, 66, .18); padding: .85rem 1rem; text-align: right;
    animation: tpe-assistant-pop .18s ease-out;
}
.tpe-assistant-bubble::after {
    content: ''; position: absolute; bottom: -8px; left: 22px; width: 16px; height: 16px;
    background: inherit; border-inline-end: 1px solid var(--tpe-gray-border, #e3e7ee);
    border-bottom: 1px solid var(--tpe-gray-border, #e3e7ee); transform: rotate(45deg);
}
@keyframes tpe-assistant-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tpe-assistant-bubble-close {
    position: absolute; top: .4rem; inset-inline-start: .5rem; border: none; background: none;
    font-size: 1.1rem; line-height: 1; color: var(--tpe-text-muted, #6b7280); cursor: pointer; padding: .2rem;
}
.tpe-assistant-bubble-body { font-size: .85rem; line-height: 1.6; padding-inline-start: 1.4rem; min-height: 1.5rem; }
.tpe-assistant-bubble-body strong { color: var(--tpe-orange-dark, #d96c0f); }
.tpe-assistant-promo { display: flex; align-items: center; gap: .5rem; }
.tpe-assistant-promo-mark { font-weight: 800; color: var(--tpe-navy, #0f2942); white-space: nowrap; }
.tpe-assistant-stats-btn {
    display: block; width: 100%; margin-top: .6rem; border: 1px solid var(--tpe-gray-border, #e3e7ee);
    background: var(--bs-tertiary-bg, #f6f7f9); border-radius: 8px; padding: .35rem .5rem;
    font-size: .78rem; font-weight: 600; color: var(--tpe-navy, #0f2942); cursor: pointer;
}
.tpe-assistant-stats-btn:hover { background: var(--tpe-gray-border, #e3e7ee); }
.tpe-assistant-stats-row {
    display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem;
    padding: .3rem 0; border-bottom: 1px dashed var(--tpe-gray-border, #e3e7ee);
}
.tpe-assistant-stats-row:last-child { border-bottom: none; }
.tpe-assistant-stats-row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

.tpe-assistant-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.tpe-assistant-actions .tpe-assistant-stats-btn { flex: 1; margin-top: 0; }
.tpe-assistant-bubble.tpe-assistant-chat-mode { width: min(340px, calc(100vw - 40px)); }
.tpe-assistant-chat { display: flex; flex-direction: column; gap: .5rem; }
.tpe-assistant-chat-log {
    max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: .45rem;
    padding-inline-start: .1rem;
}
.tpe-assistant-chat-msg { font-size: .82rem; line-height: 1.55; padding: .45rem .65rem; border-radius: 10px; max-width: 88%; }
.tpe-assistant-chat-msg.user { align-self: flex-end; background: var(--tpe-orange, #f5821f); color: #fff; border-bottom-end-radius: 3px; }
.tpe-assistant-chat-msg.assistant { align-self: flex-start; background: var(--tpe-gray-bg, #f1f3f6); color: inherit; border-bottom-start-radius: 3px; }
.tpe-assistant-chat-msg.pending { opacity: .65; }
.tpe-assistant-chat-form { display: flex; gap: .4rem; }
.tpe-assistant-chat-form input {
    flex: 1; border: 1px solid var(--tpe-gray-border, #e3e7ee); border-radius: 8px;
    padding: .4rem .6rem; font-size: .82rem; background: #fff; color: inherit;
}
.tpe-assistant-chat-form button {
    border: none; background: var(--tpe-orange, #f5821f); color: #fff; border-radius: 8px;
    width: 34px; flex-shrink: 0; cursor: pointer;
}
.tpe-assistant-chat-form button:disabled { opacity: .6; cursor: default; }
[data-bs-theme="dark"] .tpe-assistant-chat-msg.assistant { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .tpe-assistant-chat-form input { background: rgba(255,255,255,.05); border-color: var(--tpe-gray-border, #263447); }

[data-bs-theme="dark"] .tpe-assistant-bubble { background: #16233a; border-color: var(--tpe-gray-border, #263447); color: #e5e7eb; }
[data-bs-theme="dark"] .tpe-assistant-badge { border-color: var(--tpe-gray-bg, #0b1220); }
[data-bs-theme="dark"] .tpe-assistant-promo-mark,
[data-bs-theme="dark"] .tpe-assistant-stats-btn { color: #e5e7eb; }
[data-bs-theme="dark"] .tpe-assistant-stats-btn { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .tpe-assistant-stats-btn:hover { background: rgba(255,255,255,.12); }

/* ------------------------------------------------- بدء اتصال (زملاء/شركاء)
   نفس فلسفة .tpe-gs-fab حرفياً (زر عائم، لسان إخفاء عند التحويم، لسان
   استعادة عند الإخفاء) — "ايقونة هاتف جميلة... يمكن اظهارها فوق الايقونات
   ويمكن اخفاؤها" (طلب المستخدم صراحةً). تُكدَّس فوق .tpe-assistant مباشرة
   (نفس الزاوية، left فيزيائي بلا inset-inline لتطابق .tpe-assistant تماماً)
   لا فوق .tpe-gs-fab (البحث الذكي) في الزاوية المقابلة تجنّباً للتزاحم. */
.tpe-call-dialer-fab {
    position: fixed;
    left: 26px;
    bottom: 172px;
    z-index: 1045;
    display: flex;
    align-items: center;
}
.tpe-call-dialer-btn {
    width: 52px;
    height: 52px;
    border: 3px solid rgba(255,255,255,.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, #16a34a 0%, #0f7a37 100%);
    box-shadow: 0 8px 22px rgba(15,41,66,.35);
    transition: transform .15s ease;
}
.tpe-call-dialer-btn:hover { transform: scale(1.08); }
.tpe-call-dialer-hide {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #6c757d;
    color: #fff;
    font-size: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}
.tpe-call-dialer-fab:hover .tpe-call-dialer-hide { opacity: 1; transform: scale(1); }
.tpe-call-dialer-hide:hover { background: #dc3545; }
.tpe-call-dialer-restore {
    position: fixed;
    bottom: 172px;
    left: 0;
    z-index: 1045;
    display: flex;
    align-items: center;
    gap: .4rem;
    border: none;
    padding: .5rem .9rem .5rem 1rem;
    border-start-end-radius: 2rem;
    border-end-end-radius: 2rem;
    background: linear-gradient(135deg, #0f7a37 0%, #16a34a 100%);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(15,41,66,.3);
    transition: padding-inline-start .15s ease;
}
.tpe-call-dialer-restore:hover { padding-inline-start: 1.3rem; color: #fff; }
@media (max-width: 576px) {
    .tpe-call-dialer-fab { bottom: 118px; left: 14px; }
    .tpe-call-dialer-btn { width: 40px; height: 40px; font-size: 1rem; }
    .tpe-call-dialer-restore { bottom: 118px; }
}

/* ------------------------------------------------- إخفاء تلقائي عند التمرير
   الأزرار العائمة الثلاثة (المساعد + الاتصال + البحث الذكي) تقف جميعاً عند
   نفس الشريط الرأسي على كل صفحة، فتتصادم مع أي جدول/بطاقة يمر محتواها في
   ذلك الشريط أثناء التمرير — "طلب المستخدم صراحةً: إخفاء تلقائي عند
   التمرير لأسفل، وإظهار فوري عند التمرير لأعلى أو تقريب الماوس من الحافة"
   (انظر assets/js/app.js لمنطق التبديل). pointer-events:none أثناء
   الإخفاء يضمن مرور النقر لما تحتها بدل حجبه. */
.tpe-assistant,
.tpe-call-dialer-fab,
.tpe-gs-fab {
    transition: opacity .2s ease;
}
.tpe-assistant.tpe-fab-faded,
.tpe-call-dialer-fab.tpe-fab-faded,
.tpe-gs-fab.tpe-fab-faded {
    opacity: .3;
    pointer-events: none;
    transition: opacity .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .tpe-assistant, .tpe-call-dialer-fab, .tpe-gs-fab,
    .tpe-assistant.tpe-fab-faded, .tpe-call-dialer-fab.tpe-fab-faded, .tpe-gs-fab.tpe-fab-faded {
        transition: none;
    }
}

/* ------------------------------------------------- مكالمات شبكة الشركاء
   نفس فلسفة .tpe-assistant تماماً (عائم، ثابت الموضع، فوق كل شيء) لكن في
   الزاوية المقابلة (right بدل left) لتفادي التداخل — "يمكن المستخدم يعمل
   حتى في حال هناك اتصال" (طلب المستخدم صراحةً): بطاقة صغيرة لا تحجب
   الشاشة، لا نافذة كاملة. */
.tpe-partner-call { position: fixed; right: 26px; bottom: 100px; z-index: 1060; direction: rtl; }
.tpe-partner-call-incoming, .tpe-partner-call-active {
    display: flex; align-items: center; gap: .7rem; background: #fff;
    border: 1px solid var(--tpe-gray-border, #e3e7ee); border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 41, 66, .22); padding: .7rem .9rem;
    min-width: 240px; animation: tpe-assistant-pop .18s ease-out;
}
.tpe-partner-call-incoming { animation: tpe-call-ring-shake 1s ease-in-out infinite; }
.tpe-partner-call-icon {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff;
    background: linear-gradient(160deg, #16a34a, #0f7a37);
}
.tpe-partner-call-incoming .tpe-partner-call-icon { background: linear-gradient(160deg, #16a34a, #0f7a37); }
.tpe-partner-call-icon-pulse { animation: tpe-call-pulse 1.6s ease-in-out infinite; }
.tpe-partner-call-info { flex: 1; min-width: 0; }
.tpe-partner-call-title { font-size: .72rem; color: var(--tpe-text-muted, #6b7280); }
.tpe-partner-call-peer { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpe-partner-call-timer { font-size: .78rem; color: var(--tpe-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.tpe-partner-call-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.tpe-partner-call-btn {
    width: 38px; height: 38px; border-radius: 50%; border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
    background: var(--tpe-gray-bg, #6b7280);
}
.tpe-partner-call-btn-accept { background: #16a34a; }
.tpe-partner-call-btn-accept:hover { background: #128a3e; }
.tpe-partner-call-btn-reject { background: #dc2626; }
.tpe-partner-call-btn-reject:hover { background: #b91c1c; }
.tpe-partner-call-btn.tpe-call-muted { background: #dc2626; }
.tpe-partner-call-min-btn {
    position: absolute; top: -8px; inset-inline-start: -8px; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--tpe-gray-border, #e3e7ee); background: #fff; color: var(--tpe-text-muted, #6b7280);
    font-size: .65rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tpe-partner-call-active { position: relative; }
.tpe-partner-call-active.tpe-call-minimized { min-width: 0; padding: .5rem; }
.tpe-partner-call-active.tpe-call-minimized .tpe-partner-call-info,
.tpe-partner-call-active.tpe-call-minimized .tpe-partner-call-actions { display: none; }
@keyframes tpe-call-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes tpe-call-ring-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) {
    .tpe-partner-call-incoming, .tpe-partner-call-icon-pulse { animation: none; }
}
[data-bs-theme="dark"] .tpe-partner-call-incoming,
[data-bs-theme="dark"] .tpe-partner-call-active { background: #16233a; border-color: var(--tpe-gray-border, #263447); color: #e5e7eb; }
[data-bs-theme="dark"] .tpe-partner-call-min-btn { background: #16233a; border-color: var(--tpe-gray-border, #263447); color: #e5e7eb; }

/* ------------------------------------------------- الطباعة من داخل الصفحة
   بعض الشاشات تُطبع كما هي بدل فتح صفحة طباعة منفصلة — لأن ما يُراد طباعته
   هو نتيجة بحث/فلترة جرت للتوّ، وصفحة منفصلة تفقدها وتطبع كل شيء. هذه
   القواعد تُخفي هيكل التطبيق (القائمة، الترويسة، الأزرار، المساعد) فيبقى
   المحتوى وحده على الورق. */
@media print {
    .tpe-sidebar,
    .tpe-header,
    .tpe-footer,
    .tpe-assistant,
    .tpe-gs-fab,
    .tpe-gs-fab-restore,
    .tpe-call-dialer-fab,
    .tpe-call-dialer-restore,
    #tpe-progress-bar,
    .tpe-page-actions,
    .btn,
    form.d-flex,
    .pagination,
    .dataTables_paginate,
    .dataTables_length,
    .dataTables_filter {
        display: none !important;
    }

    /* الهيكل يستخدم flex وهوامش تُبقي المحتوى في عمود ضيّق — على الورق
       يجب أن يأخذ العرض كاملاً. */
    .tpe-wrapper,
    .tpe-main,
    .tpe-content {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .tpe-card {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* صفّ يُقصّ بين صفحتين يُقرأ نصفه فقط. */
    table { width: 100% !important; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; page-break-inside: avoid; }

    a[href]::after { content: none !important; }

    @page { size: A4; margin: 12mm; }
}

/* ---- زرّ إظهار كلمة المرور (assets/js/tpe-password-reveal.js) ----
   الزرّ داخل الحقل لا بجانبه: لا يتغيّر عرض الحقل ولا ينكسر تخطيط قائم. */
.tpe-reveal-wrap { position: relative; display: block; }
.tpe-reveal-wrap > input { padding-inline-start: 2.6rem; }
.tpe-reveal-btn {
    position: absolute;
    inset-inline-start: .5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: .25rem .4rem;
    line-height: 1;
    color: var(--tpe-muted, #6c757d);
    cursor: pointer;
    border-radius: 6px;
}
.tpe-reveal-btn:hover { color: var(--tpe-orange, #e8590c); }
.tpe-reveal-btn:focus-visible { outline: 2px solid var(--tpe-orange, #e8590c); outline-offset: 1px; }
/* داخل input-group يعلو الحقل بمقدار z-index، فيُرفع الزرّ فوقه. */
.input-group .tpe-reveal-wrap { flex: 1 1 auto; }
.tpe-reveal-btn { z-index: 5; }