/* ==========================================================================
   Lilo Telegram Brand Stylesheet - Pantone Color System & Arabic RTL Shell
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Outfit:wght@400;500;600;700&display=swap');

:root {
    /* Brand Pantone Palette */
    --pantone-bright-blue: #008CE3;
    --pantone-turquoise: #00A3AD;
    --pantone-deep-navy: #0F0552;
    --pantone-purple: #9F19FF;
    --pantone-yellow: #FFA000;
    --pantone-light-bg: #F4F8FC;

    /* Auxiliary Palette */
    --color-white: #FFFFFF;
    --color-gray-dark: #1E293B;
    --color-gray-medium: #475569;
    --color-gray-light: #94A3B8;
    --color-gray-border: #E2E8F0;

    /* UX-A1 Telegram Design System Tokens */
    --tg-bg-app: #F4F8FC;
    --tg-bg-surface: #FFFFFF;
    --tg-bg-surface-elevated: #FFFFFF;
    --tg-bg-sidebar: #FFFFFF;
    --tg-bg-topbar: #FFFFFF;
    --tg-bg-subtle: #F8FAFC;
    --tg-border-color: #E2E8F0;
    --tg-border-light: #F1F5F9;

    /* Typography Colors */
    --tg-text-primary: #0F0552;
    --tg-text-body: #1E293B;
    --tg-text-secondary: #475569;
    --tg-text-muted: #94A3B8;

    /* Accent & Interactive States */
    --tg-accent: #008CE3;
    --tg-accent-hover: #0077C4;
    --tg-accent-subtle: rgba(0, 140, 227, 0.08);
    --tg-accent-ring: rgba(0, 140, 227, 0.25);

    /* Status Colors */
    --tg-success-bg: #DCFCE7;
    --tg-success-text: #166534;
    --tg-success-border: #BBF7D0;
    --tg-warning-bg: #FEF3C7;
    --tg-warning-text: #92400E;
    --tg-warning-border: #FDE68A;
    --tg-danger-bg: #FEE2E2;
    --tg-danger-text: #991B1B;
    --tg-danger-border: #FECACA;
    --tg-info-bg: #E0F2FE;
    --tg-info-text: #075985;
    --tg-info-border: #BAE6FD;

    /* Typography Scale */
    --font-ar: 'Cairo', system-ui, -apple-system, sans-serif;
    --font-en: 'Outfit', system-ui, sans-serif;
    --text-xs: 12px;
    --text-sm: 13.5px;
    --text-base: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;

    /* Radius Scale */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* Elevation & Shadows */
    --shadow-sm: 0 1px 3px rgba(15, 5, 82, 0.05);
    --shadow-soft: 0 4px 20px rgba(15, 5, 82, 0.04);
    --shadow-medium: 0 10px 30px rgba(15, 5, 82, 0.08);
    --shadow-premium: 0 18px 44px -12px rgba(15, 5, 82, 0.20);

    /* Layout Sizing & Touch Targets */
    --topbar-height: 60px;
    --sidebar-width: 260px;
    --touch-target-min: 44px;
    --content-max-width: 1280px;

    /* Motion */
    --transition-fast: all 0.15s ease-in-out;
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    direction: rtl;
    text-align: right;
    font-size: 16px;
}

body {
    font-family: var(--font-ar);
    background-color: var(--pantone-light-bg);
    color: var(--color-gray-dark);
    line-height: 1.6;
    padding-top: 60px;
    min-height: 100vh;
}

/* Header & Topbar */
.lh-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 60px;
    z-index: 1200;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid rgba(15, 5, 82, 0.08);
    box-shadow: 0 2px 14px rgba(15, 5, 82, 0.06);
}

.lh-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--pantone-deep-navy);
    text-decoration: none;
    font-weight: 800;
    font-size: 18px;
}

.lh-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pantone-bright-blue), var(--pantone-turquoise));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.lh-acct {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.lh-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
}

.lh-user-btn:hover {
    background: rgba(0, 140, 227, 0.06);
}

.lh-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 140, 227, 0.1);
    border: 1px solid rgba(0, 140, 227, 0.2);
    color: var(--pantone-bright-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.lh-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-premium);
    padding: 8px 0;
    z-index: 1300;
    display: none;
}

.lh-dropdown.show {
    display: block;
}

.lh-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--color-gray-dark);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition-smooth);
    border: none;
    background: none;
    width: 100%;
    text-align: right;
    cursor: pointer;
}

.lh-dropdown-item:hover {
    background: rgba(0, 140, 227, 0.06);
    color: var(--pantone-bright-blue);
}

/* Layout Shell */
.app-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

.app-sidebar {
    width: 260px;
    background: var(--color-white);
    border-left: 1px solid var(--color-gray-border);
    padding: 20px 14px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.app-sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.app-sidebar-group-title {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-gray-light);
    letter-spacing: 0.5px;
    user-select: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    color: var(--color-gray-medium);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition-smooth);
}

.nav-link:hover {
    background: rgba(0, 140, 227, 0.06);
    color: var(--pantone-bright-blue);
}

.nav-link.active {
    background: var(--pantone-deep-navy);
    color: #fff;
}

.app-main {
    flex: 1;
    padding: 32px 28px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* UI Elements */
.card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-gray-border);
    margin-bottom: 24px;
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--pantone-deep-navy);
    margin-bottom: 16px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.btn-primary {
    background: var(--pantone-bright-blue);
    color: #fff;
}

.btn-primary:hover {
    background: #0077c4;
}

.btn-secondary {
    background: rgba(15, 5, 82, 0.06);
    color: var(--pantone-deep-navy);
}

.btn-secondary:hover {
    background: rgba(15, 5, 82, 0.12);
}

.btn-outline {
    background: transparent;
    border-color: var(--color-gray-border);
    color: var(--color-gray-dark);
}

.btn-outline:hover {
    background: var(--pantone-light-bg);
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--color-gray-dark);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-ar);
    font-size: 14px;
    outline: none;
    transition: var(--transition-smooth);
}

.form-control:focus {
    border-color: var(--pantone-bright-blue);
    box-shadow: 0 0 0 3px rgba(0, 140, 227, 0.15);
}

.table-responsive {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.table th, .table td {
    padding: 14px 16px;
    text-align: right;
    border-bottom: 1px solid var(--color-gray-border);
    font-size: 14px;
}

.table th {
    background: var(--pantone-light-bg);
    color: var(--pantone-deep-navy);
    font-weight: 700;
}

.badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-info { background: #e0f2fe; color: #075985; }
/* Referenced in five views since the SaaS Admin surface existed, but never
   defined -- so the Product Admin badge rendered as unstyled text. */
.badge-purple { background: #f3e8ff; color: #6b21a8; }

.alert {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Without JavaScript the drawer cannot open, so the sidebar keeps its old
   stacked layout instead of disappearing. With JavaScript the responsive
   shell at the end of this file takes over. */
@media (max-width: 768px) {
    html:not(.js) .app-layout { flex-direction: column; }
    html:not(.js) .app-sidebar { width: 100%; border-left: none; border-bottom: 1px solid var(--color-gray-border); }
    .app-main { padding: 20px 16px; }
}

/* ==========================================================================
   Targets & Telegram administrator management
   Presentation only. Reuses the existing tokens above -- no new palette,
   radius scale or type ramp, so these pages stay part of the same product.
   ========================================================================== */

/* A signed Telegram id must never be reordered by the surrounding RTL text.
   `unicode-bidi: isolate` alone still lets the sign migrate, so the value is
   also forced LTR: -1004361422214, never 1004361422214-. */
.lt-id {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-family: var(--font-en);
    font-size: 13px;
    letter-spacing: 0.02em;
    background: var(--pantone-light-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    color: var(--color-gray-dark);
    white-space: nowrap;
}

.lt-handle {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-family: var(--font-en);
    color: var(--color-gray-medium);
    font-size: 13px;
}

/* Label / value rows. A definition grid rather than prose, so the eye can
   scan down the values instead of reading sentences. */
.lt-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 20px;
    align-items: center;
    margin: 0;
}

.lt-meta dt {
    color: var(--color-gray-medium);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.lt-meta dd {
    margin: 0;
    color: var(--color-gray-dark);
    font-size: 14px;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Permission chips replace comma-separated walls of text. */
.lt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.lt-chip {
    display: inline-flex;
    align-items: center;
    background: #e0f2fe;
    color: #075985;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}

.lt-chip-muted { background: var(--pantone-light-bg); color: var(--color-gray-medium); }
.lt-chip-warn  { background: #fef3c7; color: #92400e; }

/* One administrator, one card. */
.lt-person {
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--color-white);
}

.lt-person:last-child { margin-bottom: 0; }

/* The creator is the one row that can never be acted on. Marking it
   structurally, not just with a badge, keeps that obvious at a glance. */
.lt-person-creator { border-color: var(--pantone-deep-navy); background: #fbfcff; }
.lt-person-bot { border-style: dashed; }

.lt-person-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.lt-person-name { font-weight: 800; color: var(--pantone-deep-navy); font-size: 15px; }

.lt-note { font-size: 12px; color: var(--color-gray-medium); margin-top: 8px; }
.lt-note-ok { color: #166534; }

.lt-section-hint {
    font-size: 12.5px;
    color: var(--color-gray-medium);
    line-height: 1.8;
    margin: 0 0 14px;
}

/* Constructive and destructive actions must not sit shoulder to shoulder. */
.lt-danger-zone {
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    background: #fff7f7;
    padding: 20px;
}

.lt-danger-zone h2 { color: #991b1b; font-size: 15px; font-weight: 800; margin: 0 0 6px; }

.btn-danger-outline {
    background: transparent;
    border: 1px solid #dc2626;
    color: #b91c1c;
}

.btn-danger-outline:hover { background: #fee2e2; }

/* Rights form, grouped so nine checkboxes read as three ideas. */
.lt-right-group { margin-bottom: 14px; }

.lt-right-group > h3 {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-gray-medium);
    margin: 0 0 8px;
}

.lt-right-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px 16px;
}

.lt-right {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: var(--color-gray-dark);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.lt-right:hover { background: var(--pantone-light-bg); }
.lt-right input { margin-top: 3px; flex: none; }
.lt-right-sensitive { color: #92400e; }

/* Requested vs effective: two blocks, never one line. */
.lt-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.lt-compare > div {
    background: var(--pantone-light-bg);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.lt-compare h4 {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-gray-medium);
    margin: 0 0 6px;
}

.lt-op { border-bottom: 1px solid var(--color-gray-border); padding: 14px 0; }
.lt-op:last-child { border-bottom: 0; padding-bottom: 0; }
.lt-op:first-child { padding-top: 0; }

@media (max-width: 640px) {
    /* Stacked labels read better than a squeezed two-column grid. */
    .lt-meta { grid-template-columns: 1fr; gap: 2px 0; }
    .lt-meta dt { margin-top: 10px; }
    .lt-right-grid { grid-template-columns: 1fr; }
    .card { padding: 16px; }
}

/* ==========================================================================
   Workspace context switcher (header)
   Tenancy is context, not an account setting, so it sits beside the brand
   and stays readable without opening anything.
   ========================================================================== */
.lh-ws { position: relative; margin-inline-start: 20px; }

.lh-ws-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pantone-light-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    max-width: 260px;
    transition: var(--transition-smooth);
}

.lh-ws-btn:hover { border-color: var(--pantone-bright-blue); }

.lh-ws-icon { color: var(--pantone-bright-blue); font-size: 14px; flex: none; }
.lh-ws-caret { color: var(--color-gray-light); font-size: 11px; flex: none; }

.lh-ws-text { text-align: start; min-width: 0; }
.lh-ws-caption { display: block; font-size: 10.5px; color: var(--color-gray-light); line-height: 1.4; }

.lh-ws-name {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--pantone-deep-navy);
    line-height: 1.4;
    /* A long tenant name truncates rather than pushing the brand off-screen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lh-ws-dropdown { min-width: 260px; }
.lh-ws-dropdown form { margin: 0; }
.lh-ws-dropdown .lh-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; }

.lh-ws-current { background: #f0f9ff; font-weight: 800; color: var(--pantone-deep-navy); }
.lh-ws-badge { margin-inline-start: auto; font-size: 10px; }
.lh-ws-role { margin-inline-start: auto; font-size: 11px; color: var(--color-gray-medium); }

.lh-ws-sep { height: 1px; background: var(--color-gray-border); margin: 6px 0; }

@media (max-width: 720px) {
    /* Keep the tenant name; drop only the caption. Hiding tenancy entirely on
       mobile is how someone posts to the wrong customer's channel. */
    .lh-ws { margin-inline-start: 10px; }
    .lh-ws-btn { max-width: 150px; padding: 6px 8px; }
    .lh-ws-caption { display: none; }
}

/* Workspace management + members */
.lt-ws-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
}

.lt-ws-row:last-child { margin-bottom: 0; }
.lt-ws-row-active { border-color: var(--pantone-bright-blue); background: #f8fcff; }
.lt-ws-row-owner { border-inline-start: 3px solid var(--pantone-deep-navy); }
.lt-ws-main { flex: 1 1 240px; min-width: 0; }
.lt-ws-name { font-weight: 800; color: var(--pantone-deep-navy); font-size: 15px; }
.lt-ws-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.lt-ws-actions form { margin: 0; }

/* Crossing into the Platform control plane.
   Deliberately not styled like the customer navigation beside it: this is a
   context transition, not another page in the same application. */
.lh-plane-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    background: var(--pantone-deep-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.lh-plane-switch:hover { background: #1B0C74; color: #fff; }
.lh-plane-switch i { font-size: 13px; }

@media (max-width: 720px) {
    .lh-plane-switch span { display: none; }
    .lh-plane-switch { padding: 7px 10px; }
}

/* ==========================================================================
   Component foundation (MOD-J2-A)
   The views were written against Bootstrap class names that this stylesheet
   never defined, so most of them rendered as unstyled markup. This section
   defines only the classes the views actually use, drawn with the tokens
   above. It is not Bootstrap: no reboot, no JavaScript plugins, no palette.
   Components come first and utilities last, so a utility on an element wins
   by source order, with no importance overrides anywhere.
   ========================================================================== */

/* ---- Base ---------------------------------------------------------------- */
.app-main {
    min-width: 0;
    overflow-wrap: break-word;
}

:where(.app-main) a { color: #0077c4; }
:where(.app-main) img { max-width: 100%; }
:where(.app-main) :where(ul, ol) { padding-inline-start: 22px; }

.app-main code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85em;
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

.app-main pre {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.h4 {
    font-size: 20px;
    font-weight: 800;
    color: var(--pantone-deep-navy);
    line-height: 1.4;
}

.small { font-size: 13px; }

/* Stored post text. Prose, not code: it keeps its line breaks, joins Arabic
   letters in the brand font and wraps long URLs instead of widening the page.
   Each paragraph takes its own direction, so an English line reads LTR. */
.content-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
    text-align: start;
    font-family: var(--font-ar);
    font-size: 15px;
    line-height: 1.9;
    color: var(--color-gray-dark);
    background: var(--pantone-light-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    padding: 16px;
    max-width: 100%;
}

.content-body-sm { font-size: 13.5px; line-height: 1.8; padding: 12px; }

/* ---- Cards --------------------------------------------------------------- */
/* A card built from header/body/footer sections gets its padding from those
   sections; a plain card keeps the padding it always had. */
.card:has(> .card-header),
.card:has(> .card-body),
.card:has(> .card-footer),
.card:has(> .table-responsive:first-child),
.card:has(> .list-group:first-child) {
    padding: 0;
}

.card-header {
    padding: 14px 20px;
    background: #FBFCFE;
    border-bottom: 1px solid var(--color-gray-border);
    color: var(--pantone-deep-navy);
    font-weight: 700;
}

.card-body { padding: 20px; }

.card-footer {
    padding: 12px 20px;
    background: #FBFCFE;
    border-top: 1px solid var(--color-gray-border);
}

.card > :first-child { border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); }
.card > :last-child { border-end-start-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.card > .table-responsive > .table { margin-top: 0; }

/* ---- Grid ---------------------------------------------------------------- */
/* Mobile first: every column is full width until its breakpoint. */
.row,
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -8px;
}

.form-row { margin-inline: -6px; }

.col-sm-3, .col-sm-4, .col-sm-8, .col-sm-9,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8,
.col-lg-5, .col-lg-7 {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: 8px;
}

.col-6 { flex: 0 0 50%; max-width: 50%; min-width: 0; padding-inline: 8px; }
.col-12 { flex: 0 0 100%; max-width: 100%; min-width: 0; padding-inline: 8px; }

.form-row > [class*="col-"] { padding-inline: 6px; }

/* A card body that is itself a row keeps its own padding instead of pulling
   the columns past the card edge. */
.card-body.form-row { margin-inline: 0; padding-inline: 14px; }

@media (min-width: 576px) {
    .col-sm-3 { flex-basis: 25%; max-width: 25%; }
    .col-sm-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
    .col-sm-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
    .col-sm-9 { flex-basis: 75%; max-width: 75%; }
}

@media (min-width: 768px) {
    .col-md-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
    .col-md-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
    .col-md-3 { flex-basis: 25%; max-width: 25%; }
    .col-md-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
    .col-md-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
    .col-md-6 { flex-basis: 50%; max-width: 50%; }
    .col-md-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
    .col-md-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
}

@media (min-width: 992px) {
    .col-lg-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
    .col-lg-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    font-family: inherit;
    line-height: 1.4;
    min-height: 40px;
    text-align: center;
}

.btn:focus-visible,
.form-check-input:focus-visible,
.custom-control-input:focus-visible,
.nav-link:focus-visible,
.lh-nav-toggle:focus-visible,
.lh-nav-close:focus-visible,
.page-link:focus-visible {
    outline: 3px solid rgba(0, 140, 227, 0.45);
    outline-offset: 2px;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 36px;
    min-width: 36px;
}

.btn-block { display: flex; width: 100%; }

.btn-light {
    background: var(--pantone-light-bg);
    border-color: var(--color-gray-border);
    color: var(--color-gray-dark);
}

.btn-light:hover { background: #E8EFF7; }

.btn-link {
    background: transparent;
    color: #0077c4;
    padding-inline: 8px;
}

.btn-link:hover { text-decoration: underline; }

.btn-outline-primary { background: transparent; border-color: var(--pantone-bright-blue); color: #0077c4; }
.btn-outline-primary:hover { background: rgba(0, 140, 227, 0.08); }
.btn-outline-secondary { background: transparent; border-color: #CBD5E1; color: var(--color-gray-dark); }
.btn-outline-secondary:hover { background: var(--pantone-light-bg); }
.btn-outline-danger { background: transparent; border-color: #DC2626; color: #B91C1C; }
.btn-outline-danger:hover { background: #FEE2E2; }
.btn-outline-warning { background: transparent; border-color: #D97706; color: #92400E; }
.btn-outline-warning:hover { background: #FEF3C7; }
.btn-outline-success { background: transparent; border-color: #16A34A; color: #166534; }
.btn-outline-success:hover { background: #DCFCE7; }

/* ---- Badges and alerts --------------------------------------------------- */
.badge { align-items: center; line-height: 1.5; }
.badge-secondary { background: #E2E8F0; color: #334155; }
.badge-light { background: var(--pantone-light-bg); color: var(--color-gray-medium); border: 1px solid var(--color-gray-border); }
.badge-primary { background: rgba(0, 140, 227, 0.12); color: #005F9E; }
.badge-pill { border-radius: 20px; }

.alert-warning { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.alert-info { background: #E0F2FE; color: #075985; border: 1px solid #BAE6FD; }
.alert-secondary { background: var(--pantone-light-bg); color: var(--color-gray-dark); border: 1px solid var(--color-gray-border); }

/* ---- Tables -------------------------------------------------------------- */
.table-responsive {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.table-sm th,
.table-sm td { padding: 8px 10px; }

.table-hover tbody tr:hover { background: #F8FBFF; }
.thead-light th { background: var(--pantone-light-bg); }

.align-middle,
.align-middle th,
.align-middle td { vertical-align: middle; }

/* ---- Forms --------------------------------------------------------------- */
.form-control {
    max-width: 100%;
    min-width: 0;
    background-color: var(--color-white);
    color: var(--color-gray-dark);
}

select.form-control { text-overflow: ellipsis; }
textarea.form-control { resize: vertical; }

.form-control-sm { padding: 8px 12px; font-size: 13px; }

.form-text {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
}

/* Checkboxes and radios: a 20px box and a label at least 40px tall, so the
   tap target is the whole row rather than the box alone. The native control
   stays visible -- there is no Bootstrap pseudo-element to replace it. */
.form-check,
.custom-control {
    display: flex;
    align-items: flex-start;
    min-height: 40px;
}

.form-check-inline {
    display: inline-flex;
    margin-inline-end: 16px;
    vertical-align: top;
}

.form-check-input,
.custom-control-input,
:where(.app-main) input[type="checkbox"],
:where(.app-main) input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--pantone-bright-blue);
    cursor: pointer;
}

.form-check-input,
.custom-control-input { margin-top: 10px; }

/* The label starts at the box, with no gap between them, so every point of
   the row from box to text toggles the control. */
.form-check-label,
.custom-control-label {
    display: block;
    min-height: 40px;
    padding-block: 8px;
    padding-inline-start: 10px;
    line-height: 24px;
    cursor: pointer;
}

/* Bare <label><input> pairs. Zero specificity, so a utility such as d-block
   on the same label still decides its display. */
:where(.app-main label:has(> input[type="checkbox"], > input[type="radio"])) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    cursor: pointer;
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.form-inline .form-control {
    width: auto;
    flex: 1 1 180px;
}

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
}

.input-group > .form-control:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.input-group-append { display: flex; }

.input-group-append > .btn {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* ---- Lists, media, progress ---------------------------------------------- */
.list-unstyled,
.list-group {
    list-style: none;
    padding: 0;
}

.list-group { display: flex; flex-direction: column; }

.list-group-item {
    display: block;
    padding: 12px 16px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
}

.list-group-item + .list-group-item { border-top: 0; }
.list-group-flush > .list-group-item { border-inline: 0; }
.list-group-flush > .list-group-item:first-child { border-top: 0; }
.list-group-flush > .list-group-item:last-child { border-bottom: 0; }

.img-fluid { max-width: 100%; height: auto; }

.progress {
    display: flex;
    overflow: hidden;
    height: 8px;
    background: #E2E8F0;
    border-radius: 20px;
}

.progress-bar { background: var(--pantone-bright-blue); height: 100%; }

/* ---- Pagination ---------------------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-gray-dark);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

a.page-link:hover { border-color: var(--pantone-bright-blue); color: #0077c4; }
.page-item.active .page-link { background: var(--pantone-deep-navy); border-color: var(--pantone-deep-navy); color: #fff; }
.page-item.disabled .page-link { color: var(--color-gray-light); background: var(--pantone-light-bg); }

/* The paginator prints a left-pointing arrow for "previous". In a
   right-to-left page previous sits on the right, so both end arrows are
   mirrored to point outward. */
.page-item:first-child .page-link,
.page-item:last-child .page-link { transform: scaleX(-1); }

/* ---- Responsive shell ---------------------------------------------------- */
.lh-nav-toggle,
.lh-nav-close {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--pantone-deep-navy);
    font-size: 17px;
    cursor: pointer;
}

.lh-nav-toggle:hover,
.lh-nav-close:hover { background: var(--pantone-light-bg); }

.app-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lh-nav-backdrop { display: none; }

@media (max-width: 991.98px) {
    .js .lh-nav-toggle,
    .js .lh-nav-close { display: inline-flex; }

    .js .lh-topbar {
        justify-content: flex-start;
        gap: 8px;
        padding: 0 12px;
    }

    .js .lh-acct { margin-inline-start: auto; gap: 8px; }

    /* The sidebar becomes a drawer from the right-hand (start) edge. Hidden
       with visibility as well as transform, so its links leave the tab order
       while it is closed. */
    .js .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        z-index: 1400;
        width: min(300px, 86vw);
        padding: 12px 12px 24px;
        gap: 4px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-left: 1px solid var(--color-gray-border);
        box-shadow: var(--shadow-premium);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .js body.lh-nav-open .app-sidebar {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }

    .js body.lh-nav-open { overflow: hidden; }

    .js body.lh-nav-open .lh-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1350;
        background: rgba(15, 5, 82, 0.45);
    }

    .js .app-sidebar .nav-link { padding: 10px 14px; }

    /* The toggle takes room from the header. The name leaves; the Workspace
       switcher stays, because the tenant must remain visible. */
    .lh-ws { min-width: 0; flex: 0 1 auto; }
    .lh-ws-btn { min-height: 40px; }
    .lh-user-meta,
    .lh-user-caret { display: none; }
    .lh-user-btn { padding: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .js .app-sidebar,
    .js body.lh-nav-open .app-sidebar { transition: none; }
}

@media (max-width: 767.98px) {
    .app-main { padding: 16px 12px; }
    .card { margin-bottom: 16px; }
    .card-header { padding: 12px 16px; }
    .card-body { padding: 16px; }
    .card-footer { padding: 10px 16px; }
    .table th,
    .table td { padding: 10px 12px; }
    .btn-sm { min-height: 40px; min-width: 40px; }
    .lh-ws { margin-inline-start: 0; }
    .lh-ws-btn { max-width: 100%; }

    .lh-dropdown {
        position: fixed;
        top: 64px;
        left: 8px;
        right: 8px;
        min-width: 0;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
}

@media (max-width: 575.98px) {
    .lh-brand-text { display: none; }
    .lh-brand { min-width: 40px; min-height: 40px; justify-content: center; }
}

/* ---- Scheduling forms and lists (MOD-J2-B) ------------------------------- */
.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;
}

/* Conditional sections carry [hidden]; layout classes such as .form-row
   would otherwise display them anyway. */
.lt-schedule-form [hidden] { display: none; }

/* Section numbers count only the sections that are showing. */
.lt-schedule-form { counter-reset: lt-section; }
.lt-form-section { counter-increment: lt-section; }
.lt-form-section > .card-header::before {
    content: counter(lt-section, arabic-indic) ". ";
    color: var(--pantone-bright-blue);
}

.lt-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.lt-fieldset > legend { padding: 0; }

.lt-choice-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.lt-choice-stack { grid-template-columns: 1fr; }

.lt-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
}

.lt-choice > input { margin-top: 2px; }
.lt-choice:hover { border-color: var(--pantone-bright-blue); }
.lt-choice:has(> input:checked) { border-color: var(--pantone-bright-blue); background: #F0F8FF; }
.lt-choice:has(> input:focus-visible) { outline: 3px solid rgba(0, 140, 227, 0.45); outline-offset: 2px; }

.lt-choice-title {
    display: block;
    font-weight: 700;
    color: var(--pantone-deep-navy);
}

.lt-choice-hint {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--color-gray-medium);
}

.lt-choice-row { margin-bottom: 8px; }
.lt-choice-compact { align-items: center; }
.lt-choice-compact > input { margin-top: 0; }

.lt-weekdays {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.lt-weekday {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
}

.lt-weekday:has(> input:checked) { border-color: var(--pantone-bright-blue); background: #F0F8FF; font-weight: 700; }
.lt-weekday:has(> input:focus-visible) { outline: 3px solid rgba(0, 140, 227, 0.45); outline-offset: 2px; }

input[type="date"].form-control,
input[type="time"].form-control { min-height: 46px; }

.form-control.is-invalid { border-color: #DC2626; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }

.invalid-feedback {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #B91C1C;
}

.lt-form-actions,
.lt-entry-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lt-entry-actions form { margin: 0; }

/* A visually hidden header label is absolutely positioned; without this it
   escapes a scrolling table and widens the whole page. */
.table-responsive { position: relative; }

/* Links that are the target of a row or a summary line get a full tap height. */
.lt-cell-link,
.lt-summary a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

.lt-summary dt { color: var(--color-gray-medium); font-weight: 700; }
.lt-summary dt,
.lt-summary dd { margin: 0; padding-block: 8px; border-bottom: 1px solid var(--color-gray-border); }
.lt-summary dt:last-of-type,
.lt-summary dd:last-of-type { border-bottom: 0; }

@media (max-width: 575.98px) {
    .lt-summary dt { padding-bottom: 0; border-bottom: 0; }
    .lt-form-actions .btn,
    .lt-entry-actions > .btn,
    .lt-entry-actions form,
    .lt-entry-actions form .btn { flex: 1 1 auto; }
}

/* A table of records reads as one card per row on a phone: each cell shows
   its column name from data-label. The markup stays a real table. */
@media (max-width: 767.98px) {
    .lt-stack-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .lt-stack-table,
    .lt-stack-table tbody,
    .lt-stack-table tr,
    .lt-stack-table td { display: block; width: 100%; }

    .lt-stack-table tr {
        padding: 12px 14px;
        margin-bottom: 12px;
        background: var(--color-white);
        border: 1px solid var(--color-gray-border);
        border-radius: var(--radius-sm, 8px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .lt-stack-table tr:last-child {
        margin-bottom: 0;
    }

    .lt-stack-table td {
        display: grid;
        grid-template-columns: 7.5em minmax(0, 1fr);
        gap: 8px;
        padding: 6px 0;
        border-bottom: 0;
        white-space: normal;
        align-items: baseline;
    }

    .lt-stack-table td::before {
        content: attr(data-label);
        font-size: 12.5px;
        font-weight: 700;
        color: var(--color-gray-medium);
    }

    .lt-stack-table td.lt-stack-actions,
    .lt-stack-table td[data-label="الإجراءات"],
    .lt-stack-table td[data-label="إجراءات"] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px dashed var(--color-gray-border);
        width: 100%;
    }

    .lt-stack-table td.lt-stack-actions::before,
    .lt-stack-table td[data-label="الإجراءات"]::before,
    .lt-stack-table td[data-label="إجراءات"]::before {
        display: none;
        content: none;
    }

    .lt-stack-table td > * { min-width: 0; }
    .lt-stack-table .lt-stack-empty td,
    .lt-stack-table tr > td[colspan] { display: block; text-align: center; }
    .lt-stack-table .lt-stack-empty td::before,
    .lt-stack-table tr > td[colspan]::before { content: none; display: none; }
}

@media (max-width: 480px) {
    .lt-stack-table td {
        grid-template-columns: 6.2em minmax(0, 1fr);
        font-size: 13px;
    }
    .lt-stack-table td::before {
        font-size: 12px;
    }
    .lt-stack-table tr {
        padding: 10px 12px;
        margin-bottom: 10px;
    }
}

/* ---- Interval recurrence (MOD-J2-D) --------------------------------------- */
/* "كل [number] [unit]" reads as one line and wraps cleanly on a phone. */
.lt-interval {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.lt-interval-word {
    font-weight: 700;
    color: var(--pantone-deep-navy);
}

.lt-interval-field { flex: 0 0 110px; min-width: 0; }
.lt-interval-unit { flex: 1 1 180px; }
.lt-interval input[type="number"].form-control { min-height: 46px; text-align: center; }
.lt-interval select.form-control { min-height: 46px; }

.lt-interval-preview {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: #F0F8FF;
    border: 1px solid #BAE6FD;
    color: #075985;
    font-weight: 600;
    font-size: 13.5px;
}

/* ---- Saved library, pickers (MOD-J2-E) ------------------------------------ */
.lt-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

@media (max-width: 576px) {
    .lt-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin-bottom: 14px;
        scrollbar-width: none;
    }
    .lt-tabs::-webkit-scrollbar {
        display: none;
    }
    .lt-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.lt-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--color-gray-border);
    border-radius: 20px;
    background: var(--color-white);
    color: var(--color-gray-dark);
    font-weight: 600;
    text-decoration: none;
}

.lt-tab:hover { border-color: var(--pantone-bright-blue); }
.lt-tab.is-active { background: var(--pantone-deep-navy); border-color: var(--pantone-deep-navy); color: #fff; }

.lt-tab-count {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: rgba(15, 5, 82, 0.08);
    font-size: 12px;
    text-align: center;
}

.lt-tab.is-active .lt-tab-count { background: rgba(255, 255, 255, 0.2); }

.lt-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.lt-filter-search { flex: 3 1 260px; min-width: 0; }
.lt-filter-type { flex: 1 1 160px; min-width: 0; }
.lt-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.lt-empty { text-align: center; padding: 36px 20px; }
.lt-empty-icon { font-size: 34px; color: var(--color-gray-light); margin-bottom: 10px; display: inline-block; }

.lt-row-archived td { background: #FAFAFB; }
.lt-row-archived .lt-cell-link { color: var(--color-gray-medium); }

.lt-snippet {
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.lt-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.lt-media-preview img { max-height: 320px; object-fit: contain; }

.lt-picker-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.lt-picker-search { flex: 1 1 220px; min-width: 0; }
.lt-picker-clear { flex: none; }
.lt-picker select.form-control { min-height: 46px; }

.lt-picker-feedback {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 12.5px;
}

.lt-picker-chosen { font-weight: 700; color: var(--pantone-deep-navy); overflow-wrap: anywhere; }

/* Without JavaScript the plain select is the whole picker. */
html:not(.js) .lt-picker-tools,
html:not(.js) .lt-picker-feedback { display: none; }

/* ---- Content campaigns and sections (MOD-J2-F1) --------------------------- */
.lt-section > .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.lt-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-inline-start: auto;
}

.lt-section-actions form { margin: 0; }

.lt-campaign-items { display: flex; flex-direction: column; gap: 10px; }

.lt-campaign-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
}

.lt-campaign-item-main { flex: 1 1 220px; min-width: 0; }

.lt-campaign-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.lt-campaign-item-actions form { margin: 0; }

.lt-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.lt-inline-field { flex: 1 1 200px; min-width: 0; }
.lt-inline-field .form-label { margin-bottom: 4px; }
.lt-inline-form select.form-control-sm { min-height: 40px; }

/* ---- Utilities ----------------------------------------------------------- */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }

.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; min-width: 0; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }

/* A page header (title beside an action) wraps rather than squeezing. */
.d-flex.justify-content-between { flex-wrap: wrap; gap: 8px 12px; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-decoration-none { text-decoration: none; }

.text-muted { color: var(--color-gray-medium); }
.text-dark { color: var(--color-gray-dark); }
.text-primary { color: #0077c4; }
.text-success { color: #166534; }
.text-danger { color: #B91C1C; }

.font-weight-bold { font-weight: 700; }
.font-weight-normal { font-weight: 400; }
.font-italic { font-style: italic; }

.bg-light { background-color: var(--pantone-light-bg); }
.bg-white { background-color: var(--color-white); }
.bg-warning { background-color: var(--pantone-yellow); }

.border { border: 1px solid var(--color-gray-border); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--color-gray-border); }
.border-bottom { border-bottom: 1px solid var(--color-gray-border); }
/* Written for a left-to-right page, where it marks the start edge. */
.border-left { border-inline-start: 3px solid var(--color-gray-border); }
.border-primary { border-color: var(--pantone-bright-blue); }
.border-secondary { border-color: #CBD5E1; }
.border-info { border-color: var(--pantone-turquoise); }

.rounded { border-radius: var(--radius-sm); }
.shadow-sm { box-shadow: 0 1px 4px rgba(15, 5, 82, 0.08); }

/* Spacing: 1 = 4px, 2 = 8px, 3 = 16px, 4 = 24px, 5 = 48px. mr/ml were
   authored for a left-to-right page, so they map to the logical edges. */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.my-3 { margin-block: 16px; }
.mr-1 { margin-inline-end: 4px; }
.mr-2 { margin-inline-end: 8px; }
.mr-3 { margin-inline-end: 16px; }
.ml-1 { margin-inline-start: 4px; }
.ml-2 { margin-inline-start: 8px; }
.ml-3 { margin-inline-start: 16px; }

.p-0 { padding: 0; }
.p-2 { padding: 8px; }
.p-3 { padding: 16px; }
.py-2 { padding-block: 8px; }
.py-3 { padding-block: 16px; }
.py-4 { padding-block: 24px; }
.py-5 { padding-block: 48px; }
.pb-2 { padding-bottom: 8px; }
.pr-3 { padding-inline-end: 16px; }

@media (min-width: 768px) {
    .mb-md-0 { margin-bottom: 0; }
}

/* ==========================================================================
   UX-A1 TELEGRAM DESIGN SYSTEM FOUNDATION COMPONENTS
   ========================================================================== */

/* Page Header Foundation */
.lt-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 24px;
}

.lt-page-title {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--tg-text-primary);
    line-height: 1.3;
}

.lt-page-subtitle {
    font-size: var(--text-sm);
    color: var(--tg-text-secondary);
    margin-top: 4px;
}

.lt-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

/* Button Foundation Extensions */
.btn-ghost {
    background: transparent;
    color: var(--tg-text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--tg-accent-subtle);
    color: var(--tg-accent);
}

.btn-danger {
    background: var(--tg-danger-text);
    color: #FFFFFF;
    border-color: transparent;
}

.btn-danger:hover {
    background: #7F1D1D;
    color: #FFFFFF;
}

.btn-sm {
    padding: 6px 14px;
    font-size: var(--text-xs);
    min-height: 36px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: var(--text-base);
    min-height: 52px;
}

.btn-icon {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    padding: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:focus-visible,
.form-control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--tg-accent-ring);
}

/* List Row Component Foundation */
.lt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lt-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--tg-bg-surface);
    border: 1px solid var(--tg-border-color);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--tg-text-body);
    transition: var(--transition-fast);
}

.lt-list-row:hover {
    border-color: var(--tg-accent);
    box-shadow: var(--shadow-sm);
}

.lt-list-row.is-active {
    background: var(--tg-accent-subtle);
    border-color: var(--tg-accent);
}

.lt-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--tg-accent-subtle);
    border: 1px solid var(--tg-accent-ring);
    color: var(--tg-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.lt-list-main {
    flex: 1 1 auto;
    min-width: 0;
}

.lt-list-title {
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--tg-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-list-subtitle {
    font-size: var(--text-xs);
    color: var(--tg-text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-list-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--tg-text-muted);
}

/* Badge System Extensions */
.badge-neutral { background: #F1F5F9; color: #475569; }
.badge-primary { background: var(--tg-accent-subtle); color: var(--tg-accent); }

/* Alert Banner Extensions */
.alert {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.alert-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
}

.alert-close:hover { opacity: 1; }

/* Empty States Foundation */
.lt-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--tg-bg-surface);
    border: 1px dashed var(--tg-border-color);
    border-radius: var(--radius-md);
}

.lt-empty-icon {
    font-size: 42px;
    color: var(--tg-text-muted);
    margin-bottom: 12px;
    display: inline-block;
}

.lt-empty-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--tg-text-primary);
    margin-bottom: 6px;
}

.lt-empty-desc {
    font-size: var(--text-sm);
    color: var(--tg-text-secondary);
    max-width: 440px;
    margin: 0 auto 18px;
}

/* Loading Spinner */
.lt-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 140, 227, 0.2);
    border-top-color: var(--tg-accent);
    border-radius: 50%;
    animation: lt-spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes lt-spin {
    to { transform: rotate(360deg); }
}

/* Search Box Foundation */
.lt-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.lt-search-box .form-control {
    padding-inline-start: 38px;
}

.lt-search-icon {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--tg-text-muted);
    font-size: 14px;
    pointer-events: none;
}

/* Dialog & Modal Foundation */
.lt-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 5, 82, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.lt-dialog-modal {
    background: var(--tg-bg-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-premium);
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tg-border-color);
    overflow: hidden;
}

.lt-dialog-header {
    flex-shrink: 0;
    padding: 18px 24px;
    border-bottom: 1px solid var(--tg-border-color);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--tg-text-primary);
}

.lt-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    font-size: var(--text-base);
    color: var(--tg-text-body);
}

.lt-dialog-footer {
    flex-shrink: 0;
    padding: 16px 24px;
    background: var(--tg-bg-subtle);
    border-top: 1px solid var(--tg-border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS & MOBILE DRAWER SHELL (< 992px)
   ========================================================================== */

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 60px;
        bottom: 0;
        right: 0;
        width: 280px;
        z-index: 1300;
        box-shadow: var(--shadow-premium);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

    body.lh-nav-open .app-sidebar {
        transform: translateX(0);
    }

    .lh-nav-backdrop {
        position: fixed;
        top: 60px;
        inset-inline: 0;
        bottom: 0;
        background: rgba(15, 5, 82, 0.35);
        z-index: 1250;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease-in-out;
    }

    body.lh-nav-open .lh-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .app-main {
        max-width: 100%;
        padding: 20px 16px;
    }

    .lh-topbar {
        padding: 0 16px;
    }

    .lh-nav-toggle {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Compact Mobile Devices (320px - 480px) */
@media (max-width: 480px) {
    .lh-brand-text {
        font-size: 15px;
    }

    .lh-brand-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .lh-ws-caption {
        display: none;
    }

    .lt-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .lt-page-actions {
        width: 100%;
    }

    .lt-page-actions .btn {
        flex: 1;
    }
}

/* ==========================================================================
   TELEGRAM INBOX REDESIGN (UX-A2 + INBOX UX POLISH)
   ========================================================================== */

.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;
}

body:has(.lt-inbox-container) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.app-layout:has(.lt-inbox-container) {
    height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
    min-height: 0;
    overflow: hidden;
}

.app-main:has(.lt-inbox-container) {
    flex: 1 1 0%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-main:has(.lt-inbox-container) > .alert {
    flex-shrink: 0;
    margin-bottom: 8px;
    padding: 8px 14px;
    font-size: 13px;
}

.lt-inbox-container {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    background: var(--tg-bg-surface);
    border: 1px solid var(--tg-border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Sidebar List Pane */
.lt-inbox-sidebar {
    width: 372px;
    flex-shrink: 0;
    min-height: 0;
    height: 100%;
    border-inline-end: 1px solid var(--tg-border-color);
    display: flex;
    flex-direction: column;
    background: var(--tg-bg-surface);
    overflow: hidden;
}

.lt-inbox-sidebar-header {
    flex-shrink: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--tg-border-color);
    background: var(--tg-bg-subtle);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lt-inbox-sidebar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tg-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.25;
}

/* Unified Compact Toolbar: [ Search field ] [ Bot filter ] [ Type filter ] */
.lt-inbox-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin: 0;
}

.lt-inbox-toolbar .form-control {
    min-height: 32px;
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 8px;
    line-height: 1.2;
}

.lt-toolbar-search {
    flex: 1 1 0%;
    min-width: 118px;
}

.lt-toolbar-search .form-control {
    padding-inline-start: 28px;
    padding-inline-end: 8px;
}

.lt-toolbar-search .lt-search-icon {
    inset-inline-start: 9px;
    font-size: 12px;
}

.lt-inbox-toolbar .form-control.lt-toolbar-select,
.lt-toolbar-select {
    flex: 0 0 92px;
    width: 92px;
    max-width: 96px;
    padding-inline: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--tg-bg-surface);
    cursor: pointer;
}

.lt-inbox-list {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lt-inbox-item-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--tg-border-light);
    transition: background 0.15s ease;
}

.lt-inbox-item-wrap:hover {
    background: var(--tg-bg-subtle);
}

.lt-inbox-item-wrap.is-active {
    background: var(--tg-accent-subtle);
    border-inline-start: 4px solid var(--tg-accent);
}

.lt-inbox-item {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    padding-inline-end: 34px;
    text-decoration: none;
    color: inherit;
}

.lt-inbox-item:hover {
    text-decoration: none;
    color: inherit;
}

.lt-inbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.lt-inbox-avatar,
.lt-inbox-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 1px;
}

.lt-inbox-row-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lt-inbox-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.lt-inbox-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--tg-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.lt-inbox-time {
    font-size: 11px;
    color: var(--tg-text-muted);
    flex-shrink: 0;
    font-family: var(--font-en);
}

.lt-inbox-time[dir="rtl"] {
    font-family: var(--font-ar);
}

.lt-inbox-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 11px;
    color: var(--tg-text-muted);
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lt-inbox-handle {
    font-family: var(--font-en);
    color: var(--tg-text-secondary);
    font-weight: 500;
    unicode-bidi: isolate;
    flex-shrink: 0;
}

.lt-inbox-bot-name {
    color: var(--tg-text-muted);
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-inbox-bot-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--tg-text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.lt-meta-dot {
    color: #CBD5E1;
    font-weight: 700;
    flex-shrink: 0;
}

.lt-inbox-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 1px;
}

.lt-inbox-preview {
    font-size: 12px;
    color: var(--tg-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.lt-inbox-preview > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-inbox-sidebar-footer {
    flex-shrink: 0;
    padding: 6px 12px;
    border-top: 1px solid var(--tg-border-color);
    background: var(--tg-bg-subtle);
    font-size: var(--text-xs);
}

/* Chat View Pane */
.lt-chat-pane {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #eef2f5;
    overflow: hidden;
}

.lt-chat-header {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--tg-bg-surface);
    border-bottom: 1px solid var(--tg-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    z-index: 20;
    min-height: 52px;
}

.lt-chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lt-chat-back {
    display: none;
}

.lt-chat-header-avatar,
.lt-chat-header-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 14px;
}

.lt-chat-title-group {
    min-width: 0;
}

.lt-chat-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.lt-chat-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--tg-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    line-height: 1.3;
}

.lt-chat-header-handle {
    font-size: 12px;
    color: var(--tg-text-secondary);
    font-family: var(--font-en);
    font-weight: 500;
    unicode-bidi: isolate;
}

.lt-chat-subtitle {
    font-size: 11.5px;
    color: var(--tg-text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 1px;
    line-height: 1.25;
}

.lt-chat-last-activity {
    color: var(--tg-text-muted);
    font-size: 11px;
}

.lt-chat-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Compact Action Menu (⋯) for Conversations & Messages */
.lt-action-menu {
    position: relative;
    display: inline-block;
}

.lt-action-menu > summary {
    list-style: none;
}

.lt-action-menu > summary::-webkit-details-marker {
    display: none;
}

.lt-action-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--tg-text-secondary);
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.lt-action-trigger:hover,
.lt-action-menu[open] > .lt-action-trigger {
    background: rgba(15, 23, 42, 0.08);
    color: var(--tg-text-primary);
}

.lt-conv-row-menu {
    position: absolute;
    inset-inline-end: 6px;
    top: 8px;
    z-index: 15;
}

.lt-msg-action-trigger {
    width: 22px;
    height: 22px;
    font-size: 14px;
    opacity: 0.7;
}

.lt-msg-action-trigger:hover,
.lt-msg-action-menu[open] > .lt-msg-action-trigger {
    opacity: 1;
}

.lt-action-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-end: 0;
    min-width: 175px;
    background: #ffffff;
    border: 1px solid var(--tg-border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    padding: 4px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lt-action-dropdown form {
    margin: 0;
}

.lt-action-menu-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tg-text-muted);
    padding: 4px 8px 2px;
    border-bottom: 1px solid var(--tg-border-light);
    margin-bottom: 2px;
}

.lt-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--tg-text-body);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease;
}

.lt-action-item:hover {
    background: var(--tg-bg-subtle);
    color: var(--tg-text-primary);
    text-decoration: none;
}

.lt-action-danger {
    color: #B91C1C;
}

.lt-action-danger:hover {
    background: #FEE2E2;
    color: #991B1B;
}

.lt-bubble-top-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Timeline & Bubbles */
.lt-chat-timeline {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lt-date-separator {
    text-align: center;
    margin: 6px 0;
    position: relative;
}

.lt-date-separator span {
    background: rgba(15, 23, 42, 0.5);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
    display: inline-block;
}

.lt-bubble-wrapper {
    display: flex;
    width: 100%;
}

.lt-bubble-wrapper.outbound {
    justify-content: flex-end;
}

.lt-bubble-wrapper.inbound {
    justify-content: flex-start;
}

.lt-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    word-break: break-word;
}

.lt-bubble.outbound {
    background: #e3f2fd;
    color: #0d47a1;
    border-bottom-start-radius: 12px;
    border-bottom-end-radius: 2px;
    border: 1px solid #bbdefb;
}

.lt-bubble.inbound {
    background: #ffffff;
    color: var(--tg-text-primary);
    border-bottom-start-radius: 2px;
    border-bottom-end-radius: 12px;
    border: 1px solid var(--tg-border-color);
}

.lt-bubble-sender {
    font-size: var(--text-xs);
    font-weight: 700;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lt-bubble-text {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.lt-bubble-service-text {
    font-size: 12.5px;
    color: var(--tg-text-secondary);
    font-style: italic;
}

.lt-bubble-meta {
    font-size: 10px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0.72;
    font-family: var(--font-en);
}

/* Composer Area & AI Strip */
.lt-chat-composer-wrap {
    flex-shrink: 0;
    background: var(--tg-bg-surface);
    border-top: 1px solid var(--tg-border-color);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lt-ai-assistant-panel {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 4px 10px;
}

.lt-ai-assistant-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
}

.lt-ai-assistant-panel .btn-sm {
    min-height: 26px;
    padding: 2px 8px;
    font-size: 11.5px;
}

/* Normal Chat Composer: [ 📎 ] [ اكتب ردك هنا... ] [ إرسال ] */
.lt-composer-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lt-composer-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lt-attach-wrap {
    position: relative;
    flex-shrink: 0;
}

.lt-attach-btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid var(--tg-border-color);
    background: var(--tg-bg-subtle);
    color: var(--tg-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lt-attach-btn:hover,
.lt-attach-btn[aria-expanded="true"] {
    background: var(--tg-accent-subtle);
    color: var(--tg-accent);
    border-color: var(--tg-accent-ring);
}

.lt-attach-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 215px;
    background: #ffffff;
    border: 1px solid var(--tg-border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-medium);
    padding: 5px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lt-attach-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--tg-text-body);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
}

.lt-attach-menu-item i {
    color: var(--tg-accent);
    width: 16px;
    text-align: center;
}

.lt-attach-menu-item:hover {
    background: var(--tg-bg-subtle);
    color: var(--tg-text-primary);
}

.lt-composer-input-wrap {
    flex: 1 1 0%;
    min-width: 0;
}

.lt-composer-bar .form-control.lt-composer-textarea,
.lt-composer-textarea {
    min-height: 38px;
    max-height: 96px;
    height: 38px;
    padding: 7px 12px;
    font-size: 13.5px;
    line-height: 1.4;
    border-radius: 10px;
    resize: none;
}

.lt-composer-active-indicator {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 12px;
    background: var(--tg-bg-subtle);
    border: 1px dashed var(--tg-border-color);
    border-radius: 10px;
}

.lt-composer-bar .btn.lt-composer-send-btn,
.lt-composer-send-btn {
    flex-shrink: 0;
    height: 38px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Compact Attachment Drawers (Media Library / Link / Upload / Import) */
.lt-composer-drawer,
.lt-composer-aux-drawer {
    background: var(--tg-bg-subtle);
    border: 1px solid var(--tg-border-color);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 4px;
    max-height: 210px;
    overflow-y: auto;
}

.lt-composer-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.lt-drawer-close {
    border: none;
    background: transparent;
    color: var(--tg-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}

.lt-drawer-close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--tg-text-primary);
}

.lt-composer-asset-strip {
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.lt-composer-asset-item {
    flex: 0 0 88px;
    width: 88px;
    border: 1px solid var(--tg-border-color);
    border-radius: 8px;
    padding: 5px;
    background: #ffffff;
    cursor: pointer;
    text-align: center;
    margin: 0;
    transition: border-color 0.15s ease;
}

.lt-composer-asset-item:hover {
    border-color: var(--tg-accent);
}

.lt-composer-asset-thumb {
    width: 100%;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    margin: 2px 0;
}

.lt-composer-asset-file {
    width: 100%;
    height: 44px;
    background: #F1F5F9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
}

.lt-composer-media-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.lt-media-mode-radios {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.lt-media-caption-wrap {
    flex: 1 1 180px;
}

.lt-media-caption-wrap .form-control {
    min-height: 32px;
    height: 32px;
    padding: 4px 10px;
    font-size: 12.5px;
}

.lt-composer-inline-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.lt-composer-inline-form .form-control {
    min-height: 34px;
    height: 34px;
    padding: 4px 10px;
    font-size: 12.5px;
    flex: 1 1 180px;
}

.lt-composer-inline-form .lt-scope-select {
    flex: 0 1 160px;
}

.lt-composer-inline-form .btn {
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    font-size: 12.5px;
}

/* Compact Read-Only Conversation Notice */
.lt-chat-readonly-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 8px 14px;
    background: var(--tg-bg-subtle);
    border: 1px solid var(--tg-border-color);
    border-radius: 10px;
    color: var(--tg-text-secondary);
}

.lt-readonly-primary {
    font-size: 13px;
    font-weight: 700;
    color: var(--tg-text-primary);
}

.lt-readonly-secondary {
    font-size: 12px;
    color: var(--tg-text-secondary);
}

/* Conversation Details Modal Polish */
.lt-details-modal {
    max-width: 560px;
}

.lt-details-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--tg-border-light);
}

.lt-details-avatar,
.lt-details-avatar-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 22px;
}

.lt-details-identity-info {
    min-width: 0;
    flex: 1 1 auto;
}

.lt-details-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--tg-text-primary);
    line-height: 1.3;
}

.lt-details-handle {
    font-family: var(--font-en);
    font-size: 13px;
    color: var(--tg-text-secondary);
    font-weight: 500;
    margin-top: 2px;
    unicode-bidi: isolate;
}

.lt-details-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.lt-details-contact-link {
    text-decoration: none;
    color: var(--tg-accent);
    border: 1px solid var(--tg-accent-ring);
    background: var(--tg-accent-subtle);
}

.lt-details-contact-link:hover {
    text-decoration: none;
    background: var(--tg-accent);
    color: #ffffff;
}

.lt-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.lt-details-card {
    background: var(--tg-bg-subtle);
    border: 1px solid var(--tg-border-light);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lt-details-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--tg-text-muted);
}

.lt-details-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--tg-text-primary);
    word-break: break-word;
}

/* Empty Active Chat Selection State */
.lt-chat-empty-state {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
    color: var(--tg-text-muted);
}

.lt-chat-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.05);
    color: var(--tg-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.lt-chat-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tg-text-primary);
    margin: 0 0 4px;
}

.lt-chat-empty-subtitle {
    font-size: 13px;
    color: var(--tg-text-secondary);
    max-width: 280px;
    margin: 0;
}

/* Mobile Responsive Adjustments */
@media (max-width: 991.98px) {
    .app-main:has(.lt-inbox-container) {
        padding: 0;
    }

    .lt-inbox-container {
        height: 100%;
        border-radius: 0;
        border: none;
    }

    .lt-inbox-sidebar {
        width: 100%;
        display: flex;
    }

    .lt-chat-pane {
        width: 100%;
        display: none;
    }

    .lt-inbox-container.has-active-chat .lt-inbox-sidebar {
        display: none;
    }

    .lt-inbox-container.has-active-chat .lt-chat-pane {
        display: flex;
    }

    .lt-chat-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 16px;
        border-radius: 50%;
        background: var(--tg-bg-subtle);
        color: var(--tg-text-primary);
        text-decoration: none;
        margin-inline-end: 4px;
        flex-shrink: 0;
    }
}

@media (max-width: 576px) {
    .lt-inbox-toolbar {
        flex-wrap: wrap;
    }

    .lt-toolbar-search {
        flex: 1 1 100%;
    }

    .lt-toolbar-select {
        flex: 1 1 calc(50% - 4px);
        width: auto;
        max-width: none;
    }

    .lt-details-grid {
        grid-template-columns: 1fr;
    }

    .lt-chat-readonly-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ==========================================================================
   UX-A4 GLOBAL MOBILE & RESPONSIVE CLOSURE SYSTEM
   ========================================================================== */

/* 1. Global Responsive Containers & Breakpoint Utilities */
.lt-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

@media (max-width: 480px) {
    .lt-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* Fluid Text & Long String Handling Site-Wide */
.app-main,
.card,
.table-responsive,
.modal-body,
.lt-dialog-body {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.lt-id, .lt-handle, code, pre, .lt-code, .font-monospace {
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Layout & Component Bounding (No broad overflow-x hacks) */
.app-layout,
.app-main,
.card,
.table-responsive {
    max-width: 100%;
    box-sizing: border-box;
}

.lt-bubble video,
.lt-bubble audio,
.lt-bubble img {
    max-width: 100%;
    height: auto;
}

/* 2. RTL Off-Canvas Navigation Drawer (< 992px) */
body.lh-nav-open {
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 60px;
        bottom: 0;
        right: 0;
        left: auto;
        width: 280px;
        z-index: 1300;
        background: var(--color-white);
        box-shadow: var(--shadow-premium);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
        overflow-y: auto;
        visibility: hidden;
    }

    body.lh-nav-open .app-sidebar {
        transform: translateX(0);
        visibility: visible;
    }

    .lh-nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border: none;
        background: var(--tg-bg-subtle);
        color: var(--tg-text-primary);
        border-radius: 50%;
        cursor: pointer;
        font-size: 16px;
    }

    .lh-nav-backdrop {
        position: fixed;
        top: 60px;
        inset: 0;
        background: rgba(15, 5, 82, 0.4);
        z-index: 1250;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease-in-out;
    }

    body.lh-nav-open .lh-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

/* 3. Topbar Responsiveness (< 768px & < 480px) */
@media (max-width: 768px) {
    .lh-topbar {
        padding: 0 12px;
    }

    .lh-ws-text {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lh-user-meta {
        display: none;
    }
}

@media (max-width: 480px) {
    .lh-ws-btn {
        padding: 4px 6px;
    }
    
    .lh-ws-text {
        max-width: 90px;
    }

    .lh-dropdown {
        max-width: calc(100vw - 24px);
        left: 12px;
        right: 12px;
    }
}

/* 4. Touch Targets & Form Controls (320px - 430px) */
.btn,
.form-control,
.form-select,
.input-group-text {
    min-height: 44px;
}

@media (max-width: 576px) {
    .btn-block-xs {
        width: 100%;
        display: block;
    }

    .form-row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        margin-bottom: 12px;
    }

    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .form-inline .input-group {
        width: 100%;
    }

    .form-inline .btn {
        width: 100%;
        margin-top: 8px;
    }
}

/* 5. Responsive Filter Bars & Search Toolbar */
.lt-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

@media (max-width: 768px) {
    .lt-filter-toolbar > * {
        flex: 1 1 100%;
    }
}

/* 6. Tables & Scroll Wrappers */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px) {
    .table td, .table th {
        padding: 10px 8px;
        font-size: 13px;
    }
}

/* 7. Dialogs & Modals */
.modal-dialog,
.lt-dialog {
    max-width: calc(100vw - 32px);
    margin: 16px auto;
}

@media (max-width: 576px) {
    .lt-dialog-backdrop {
        padding: 8px;
    }

    .lt-dialog-modal {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }
}

@media (max-width: 480px) {
    .modal-dialog,
    .lt-dialog {
        max-width: calc(100vw - 16px);
        margin: 8px auto;
    }

    .lt-dialog-header {
        padding: 14px 16px;
    }

    .lt-dialog-body {
        padding: 16px;
    }

    .modal-footer,
    .lt-dialog-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
        padding: 12px 16px;
    }

    .modal-footer .btn,
    .lt-dialog-footer .btn {
        width: 100%;
        margin: 0;
    }
}

/* 8. Media Grid Responsiveness */
.lt-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

@media (max-width: 480px) {
    .lt-media-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
}

/* 9. Inbox Mobile Fixes at 320px */
@media (max-width: 360px) {
    .lt-chat-composer-wrap {
        padding: 10px 8px;
    }

    .lt-bubble {
        max-width: 90%;
        padding: 8px 10px;
    }
}