html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15px; } }

:root {
    --brand: #128C7E;        /* WhatsApp teal */
    --brand-dark: #075E54;
    --brand-accent: #25D366;
    --sidebar-bg: #0f2e2a;
    --sidebar-fg: #d7e7e3;
    --content-bg: #f4f6f8;
}

body.app-body {
    background: var(--content-bg);
    margin: 0;
    /* Arabic-first font stack.
       Bootstrap's default stack starts with -apple-system/"Segoe UI" and has no Arabic
       face in it at all, so Arabic text fell through to whatever the browser picked —
       usually a cramped default with mismatched metrics next to the Latin text beside it.
       Named Arabic faces come first, then the platform UI fonts, then Tahoma, which is
       the one Arabic-capable face present on essentially every Windows install.
       A self-hosted webfont (IBM Plex Sans Arabic / Cairo) is the next step; it needs a
       licensed file committed to wwwroot, which is a deliberate decision, not a default. */
    font-family: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", "Dubai",
                 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto,
                 Tahoma, Arial, sans-serif;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(37, 211, 102, 0.25);
}

.btn-primary { background-color: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); }

/* ---- App shell (sidebar + main) ---- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: 250px;
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    flex-shrink: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Pin to the viewport: the nav scrolls on its own, the user/footer block never moves. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.app-sidebar .nav {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    /* Bootstrap's .nav defaults to flex-wrap:wrap which, in a column, wraps the
       links into a SECOND column on top of the first when the height runs out.
       Force a single column that scrolls instead. */
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}
/* Keep each link at its natural height so the nav scrolls instead of squishing
   the links into each other when the viewport is short. */
.app-sidebar .nav-link,
.app-sidebar .brand,
.app-sidebar .nav hr { flex-shrink: 0; }
.app-sidebar .nav::-webkit-scrollbar { width: 6px; }
.app-sidebar .nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }

/* user section pinned to the bottom of the sidebar */
.sidebar-user {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 12px;
    flex-shrink: 0;
}
.sidebar-user-link {
    display: flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none; padding: 8px 6px; border-radius: 8px;
}
.sidebar-user-link:hover { background: rgba(255,255,255,.08); color:#fff; }
.sidebar-user-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout {
    width: 100%; margin-top: 8px; border: 1px solid rgba(255,255,255,.25);
    background: transparent; color: #ffd5d5; padding: 8px; border-radius: 8px;
    display: flex; align-items: center; gap: 8px; justify-content: center;
}
.sidebar-logout:hover { background: rgba(255,0,0,.15); color:#fff; }

/* legal links under the user block */
.sidebar-legal {
    margin-top: 10px; text-align: center; font-size: .72rem;
    display: flex; gap: 6px; justify-content: center; align-items: center;
}
.sidebar-legal a { color: rgba(215,231,227,.65); text-decoration: none; }
.sidebar-legal a:hover { color: #fff; }
.sidebar-legal span { color: rgba(215,231,227,.4); }

/* segmented language switcher inside the sidebar */
.sidebar-lang {
    display: flex; gap: 4px; margin: 0 12px 4px;
    background: rgba(255,255,255,.06); border-radius: 10px; padding: 4px;
    flex-shrink: 0;
}
.sidebar-lang-opt {
    flex: 1; text-align: center; padding: 7px 4px; border-radius: 7px;
    color: var(--sidebar-fg); text-decoration: none; font-size: .85rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .15s, color .15s;
}
.sidebar-lang-opt i { font-size: .9rem; opacity: .8; }
.sidebar-lang-opt:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-lang-opt.active {
    background: var(--brand-accent); color: #053b30; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sidebar-lang-opt.active i { opacity: 1; }

.impersonation-badge {
    background: #fff3cd; color: #664d03; border: 1px solid #ffe69c;
    padding: 4px 12px; border-radius: 20px; font-size: .85rem;
}
.impersonation-badge a { color: #664d03; font-weight: 700; }
.app-sidebar .brand {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 10px;
}
.app-sidebar .brand-logo { max-height: 38px; max-width: 38px; border-radius: 6px; background:#fff; padding:2px; }
.app-sidebar .brand-name { font-weight: 700; font-size: 1.05rem; color:#fff; }
.app-sidebar .nav-link {
    color: var(--sidebar-fg); padding: 11px 18px; display:flex; align-items:center; gap:10px;
    border-inline-start: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color:#fff; }
.app-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(37,211,102,.18), transparent);
    color: #fff;
    border-inline-start-color: var(--brand-accent);
    font-weight: 600;
}
.app-sidebar .nav-link.active i { color: var(--brand-accent); }
.app-sidebar .nav-link i { width: 18px; text-align:center; }

/* ---- Collapsible nav groups ---- */
.app-sidebar .nav-group-toggle { cursor: pointer; }
.app-sidebar .nav-caret { width: auto; margin-inline-start: auto; font-size: .8rem; opacity: .7; transition: transform .2s; }
.app-sidebar .nav-group-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.app-sidebar .nav-group-toggle[aria-expanded="true"] { color:#fff; background: rgba(255,255,255,.04); }
.app-sidebar .nav-submenu .nav-link.nav-sub {
    padding-block: 8px; padding-inline-start: 46px; font-size: .88rem; opacity: .92;
}
.app-sidebar .nav-submenu .nav-link.nav-sub:hover { opacity: 1; }
.app-sidebar .nav-subhead {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .6px;
    color: rgba(215,231,227,.45); padding: 10px 18px 4px 30px; font-weight: 700;
}

.app-main { flex: 1; display:flex; flex-direction:column; min-width:0; }
.app-topbar {
    height: 58px; background:#fff; border-bottom:1px solid #e3e8ec;
    display:flex; align-items:center; padding: 0 20px; gap: 12px;
}
.topbar-title { font-weight: 700; color: var(--brand-dark); font-size: 1.05rem; }
.topbar-link { text-decoration:none; color: var(--brand-dark); font-weight:600; }
.app-content { padding: 24px; flex:1; }

.card {
    border: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 12px;
    transition: box-shadow .15s;
}
.card-header { background:#fff; border-bottom:1px solid #eef1f3; font-weight:600; border-radius: 12px 12px 0 0 !important; }

/* ---- General polish ---- */
.btn { border-radius: 8px; }
.form-control, .form-select { border-radius: 8px; }
.table thead th {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
    color: #8a949b; border-bottom-width: 1px; font-weight: 700;
}
.table tbody tr { transition: background .1s; }
.badge { font-weight: 600; }
.nav-tabs .nav-link { color: #5a6670; font-weight: 600; border-radius: 10px 10px 0 0; }
.nav-tabs .nav-link.active { color: var(--brand-dark); border-bottom-color: #fff; }
.alert { border: none; border-radius: 10px; }
.modal-content { border: none; border-radius: 14px; }
.modal-header { border-radius: 14px 14px 0 0; }
::selection { background: rgba(37,211,102,.3); }

/* ---- Password eye toggle (auto-attached by site.js) ---- */
.pwd-eye-wrap, .pwd-eye-host { position: relative; }
.pwd-eye-input { padding-inline-end: 2.6rem !important; }
.pwd-eye-btn {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none; background: transparent;
    color: #8a958f; padding: 4px 6px; line-height: 1;
    z-index: 5;
}
.pwd-eye-btn:hover { color: var(--brand-dark); }
.pwd-eye-host .pwd-eye-btn { top: 50%; }

/* ---- Topbar bell ---- */
.topbar-bell { border: none; background: transparent; color: var(--brand-dark); }
.topbar-bell:hover { background: #eef3f1; border-radius: 8px; }

/* ---- Mobile (off-canvas sidebar) ---- */
.sidebar-backdrop {
    display: none; position: fixed; inset: 0; z-index: 1040;
    background: rgba(0,0,0,.45);
}
.sidebar-backdrop.show { display: block; }
.sidebar-toggle { border: none; background: transparent; color: var(--brand-dark); margin-inline-end: 8px; }

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 0; bottom: 0;
        inset-inline-start: 0;
        z-index: 1045;
        transform: translateX(-110%);
        transition: transform .25s ease;
        box-shadow: 0 0 30px rgba(0,0,0,.35);
    }
    body.rtl .app-sidebar { transform: translateX(110%); }
    .app-sidebar.open { transform: translateX(0) !important; }

    .app-content { padding: 14px; }
    .app-topbar { padding: 0 12px; }

    /* Tables scroll instead of breaking the layout. */
    .card .table { font-size: .85rem; }
    .chat-wrap { flex-direction: column; height: auto; }
    .chat-list { width: 100%; max-height: 280px; border-inline-end: none; border-bottom: 1px solid #e5e7eb; }
    .chat-thread { min-height: 420px; }
}

/* ---- RTL tweaks ---- */
body.rtl { direction: rtl; text-align: right; }

/* Modal close button: use logical margins so it always sits in the far corner,
   in both LTR and RTL (Bootstrap's default `margin-left:auto` breaks in RTL). */
.modal-header .btn-close {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
    margin-inline-start: auto;
    margin-inline-end: -0.5rem;
}

/* "Meta setup guide" trigger pill next to the Settings title. */
.guide-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--brand); color: var(--brand);
    background: #eafaf4; border-radius: 2rem; padding: .3rem .9rem;
    font-size: .82rem; font-weight: 700; cursor: pointer; transition: .15s;
}
.guide-btn:hover { background: var(--brand); color: #fff; }
.guide-btn i { font-size: 1rem; }

/* =====================================================================
   PingTact UI layer — shared components for the data screens.
   Prefixed .pt- so nothing here collides with Bootstrap or the shell.
   ===================================================================== */

:root {
    --pt-ink: #16241f;
    --pt-ink-2: #5a6b64;
    --pt-ink-3: #8a9992;
    --pt-line: #e4eae7;
    --pt-line-2: #cfd9d4;
    --pt-surface: #fff;
    --pt-surface-2: #f7faf9;
    --pt-ok: #12805c;
    --pt-warn: #a06a05;
    --pt-err: #b3392c;
    --pt-radius: 12px;
    --pt-shadow: 0 1px 2px rgba(16,36,31,.05), 0 8px 20px -14px rgba(16,36,31,.22);
}

/* ---- page header ---- */
.pt-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
           flex-wrap:wrap; padding-bottom:.85rem; margin-bottom:1.1rem;
           border-bottom:1px solid var(--pt-line); }
.pt-head h1, .pt-head h2 { margin:0; font-size:1.35rem; font-weight:650; letter-spacing:-.01em; color:var(--pt-ink); }
.pt-head .pt-sub { margin:.25rem 0 0; font-size:.83rem; color:var(--pt-ink-2); max-width:70ch; line-height:1.55; }
.pt-head-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* ---- stat tiles ---- */
.pt-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-bottom:1.1rem; }
.pt-stat { background:var(--pt-surface); border:1px solid var(--pt-line); border-radius:var(--pt-radius);
           padding:.85rem 1rem; box-shadow:var(--pt-shadow); position:relative; overflow:hidden; }
.pt-stat::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--pt-line-2); }
.pt-stat.is-ok::before   { background:var(--pt-ok); }
.pt-stat.is-warn::before { background:var(--pt-warn); }
.pt-stat.is-err::before  { background:var(--pt-err); }
.pt-stat.is-brand::before{ background:var(--brand); }
.pt-stat-label { font-size:.68rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--pt-ink-3); }
.pt-stat-value { font-size:1.6rem; font-weight:650; line-height:1.2; color:var(--pt-ink);
                 font-variant-numeric:tabular-nums; margin-top:.15rem; }
.pt-stat-sub { font-size:.75rem; color:var(--pt-ink-2); margin-top:.1rem; }

/* ---- section card ---- */
.pt-card { background:var(--pt-surface); border:1px solid var(--pt-line); border-radius:var(--pt-radius);
           box-shadow:var(--pt-shadow); margin-bottom:1.1rem; overflow:hidden; }
.pt-card > header { display:flex; align-items:center; justify-content:space-between; gap:.75rem;
                    padding:.7rem 1rem; border-bottom:1px solid var(--pt-line); background:var(--pt-surface-2); }
.pt-card > header h3 { margin:0; font-size:.9rem; font-weight:650; color:var(--pt-ink); }
.pt-card > .pt-body { padding:1rem; }

/* ---- tables ---- */
.pt-table { width:100%; margin:0; border-collapse:collapse; font-size:.87rem; }
.pt-table thead th { background:var(--pt-surface-2); border-bottom:1px solid var(--pt-line);
                     padding:.6rem .85rem; text-align:start; white-space:nowrap;
                     font-size:.68rem; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--pt-ink-3); }
.pt-table tbody td { padding:.7rem .85rem; border-bottom:1px solid var(--pt-line); vertical-align:middle; color:var(--pt-ink); }
.pt-table tbody tr:last-child td { border-bottom:0; }
.pt-table tbody tr:hover { background:var(--pt-surface-2); }
.pt-table .pt-num { text-align:center; font-variant-numeric:tabular-nums; }
.pt-table .pt-muted { color:var(--pt-ink-3); font-size:.78rem; }

/* ---- filter bar ---- */
.pt-filters { background:var(--pt-surface); border:1px solid var(--pt-line); border-radius:var(--pt-radius);
              padding:.75rem .9rem; margin-bottom:1.1rem; box-shadow:var(--pt-shadow); }
.pt-filters .form-label { font-size:.7rem; font-weight:650; letter-spacing:.05em;
                          text-transform:uppercase; color:var(--pt-ink-3); margin-bottom:.25rem; }

/* ---- funnel ---- */
.pt-funnel { display:flex; flex-direction:column; gap:.55rem; }
.pt-funnel-row { display:grid; grid-template-columns:9rem 1fr 5.5rem; align-items:center; gap:.75rem; }
.pt-funnel-name { font-size:.82rem; font-weight:600; color:var(--pt-ink-2); }
.pt-funnel-track { background:var(--pt-surface-2); border:1px solid var(--pt-line);
                   border-radius:6px; height:1.6rem; overflow:hidden; }
.pt-funnel-fill { height:100%; background:var(--brand); display:flex; align-items:center;
                  padding-inline-start:.5rem; color:#fff; font-size:.75rem; font-weight:600;
                  font-variant-numeric:tabular-nums; min-width:2px; transition:width .4s ease; }
.pt-funnel-fill.is-read  { background:#1c9c78; }
.pt-funnel-fill.is-reply { background:var(--brand-accent); color:#053b30; }
.pt-funnel-fill.is-fail  { background:var(--pt-err); }
.pt-funnel-val { text-align:end; font-size:.82rem; font-variant-numeric:tabular-nums; color:var(--pt-ink-2); }
.pt-funnel-val b { color:var(--pt-ink); }

/* ---- inline metric bar (inside table cells) ---- */
.pt-bar { height:4px; border-radius:2px; background:var(--pt-line); margin-top:.25rem; overflow:hidden; }
.pt-bar > span { display:block; height:100%; background:var(--brand); }

/* ---- empty state ---- */
.pt-empty { text-align:center; padding:3rem 1rem; color:var(--pt-ink-2); }
.pt-empty i { font-size:2rem; color:var(--pt-line-2); display:block; margin-bottom:.6rem; }
.pt-empty h4 { font-size:1rem; font-weight:650; color:var(--pt-ink); margin:0 0 .3rem; }
.pt-empty p { font-size:.85rem; margin:0 auto 1rem; max-width:44ch; }

/* ---- pills ---- */
.pt-pill { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600;
           padding:.15rem .55rem; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
.pt-pill-ok    { background:#e6f5ef; color:var(--pt-ok);   border-color:#bfe4d5; }
.pt-pill-warn  { background:#fdf3e0; color:var(--pt-warn); border-color:#f2ddb4; }
.pt-pill-err   { background:#fbeae8; color:var(--pt-err);  border-color:#f2c9c3; }
.pt-pill-info  { background:#e8f1fa; color:#1e5f96;        border-color:#c5dbf0; }
.pt-pill-mute  { background:var(--pt-surface-2); color:var(--pt-ink-2); border-color:var(--pt-line-2); }

/* ---- form sections ---- */
.pt-fieldset { border:1px solid var(--pt-line); border-radius:var(--pt-radius); padding:1rem; margin-bottom:1rem; background:var(--pt-surface); }
.pt-fieldset > legend { float:none; width:auto; padding:0 .4rem; margin:0 0 .6rem;
                        font-size:.72rem; font-weight:650; letter-spacing:.08em;
                        text-transform:uppercase; color:var(--pt-ink-3); }

/* ---- step chips (wizard-ish flows) ---- */
.pt-steps { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.pt-step { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600;
           padding:.3rem .7rem; border-radius:999px; background:var(--pt-surface-2);
           border:1px solid var(--pt-line); color:var(--pt-ink-2); }
.pt-step.is-active { background:var(--brand); border-color:var(--brand); color:#fff; }
.pt-step.is-done   { background:#e6f5ef; border-color:#bfe4d5; color:var(--pt-ok); }

/* ---- automation bar (shared by Flows, Chat Flow and Auto reply) ----
   Three engines compete for the same inbound message, so each screen shows all three
   rather than only its own switch. */
.auto-bar {
    border: 1px solid var(--pt-line-2); border-radius: 10px;
    background: var(--pt-surface); padding: .6rem .7rem; margin-bottom: 1rem;
}
.auto-bar-head {
    display: flex; align-items: center; gap: .4rem;
    font-size: .74rem; color: var(--pt-ink-3); margin-bottom: .5rem;
}
.auto-bar-head i { color: var(--brand); }
.auto-bar-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.auto-chip {
    display: flex; align-items: center; gap: .45rem; min-width: 0;
    padding: .45rem .6rem; border-radius: 8px;
    border: 1px solid var(--pt-line-2); background: var(--pt-surface-2);
}
.auto-chip.is-current { border-color: var(--brand); background: #e9f5f2; }
.auto-chip > i { color: var(--pt-ink-3); flex: none; }
.auto-chip.is-live > i { color: var(--brand); }
.auto-step {
    flex: none; width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; font-size: .64rem; font-weight: 700;
    background: var(--pt-line-2); color: var(--pt-ink-2);
}
.auto-chip.is-live .auto-step { background: var(--brand); color: #fff; }
.auto-name { font-size: .8rem; font-weight: 600; min-width: 0; }
.auto-name a { color: inherit; text-decoration: none; }
.auto-name a:hover { text-decoration: underline; }
.auto-state {
    margin-inline-start: auto; display: flex; align-items: center; gap: .25rem;
    font-size: .7rem; color: var(--pt-ink-3); white-space: nowrap;
}
.auto-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.auto-dot.on { background: var(--pt-ok); }
.auto-dot.off { background: var(--pt-ink-3); }
.auto-dot.warn { background: var(--pt-warn); }
.auto-count {
    background: var(--pt-line-2); border-radius: 20px;
    padding: 0 .3rem; font-weight: 600; color: var(--pt-ink-2);
}
@media (max-width: 780px) { .auto-bar-list { grid-template-columns: 1fr; } }

/* Master switch shared by the three automation screens. */
.auto-master {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .7rem .8rem; border-radius: 10px; margin-bottom: 1rem;
    border: 1px solid var(--pt-line-2); background: var(--pt-surface);
}
.auto-master.is-on { border-color: #bfe4d5; background: #f0f9f5; }
.auto-master-text { min-width: 0; }
.auto-master-text b { display: block; font-size: .88rem; }
.auto-master-text span { font-size: .74rem; color: var(--pt-ink-3); line-height: 1.5; }
.auto-master form { margin: 0; margin-inline-start: auto; }

/* ---- emoji picker (shared: flow builder, canned replies, chat composer) ----
   The wrapper is injected around the field at runtime, so it stands between the
   field and whatever laid it out. It has to stay transparent to that layout:
   `flex: 1` so it fills a flex row the way the bare field would have, `min-width: 0`
   so a long line can't push it wider than its column, and the field itself at 100%
   so it fills the wrapper. Flex properties are simply ignored in a block context,
   which is why one rule serves the flow builder and the chat composer alike. */
.emo-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.emo-wrap > input, .emo-wrap > textarea { width: 100%; box-sizing: border-box; }
.emo-wrap.one input { padding-inline-end: 30px; }
.emo-wrap textarea { padding-bottom: 26px; }
.emo-btn {
    position: absolute; inset-inline-end: 5px; bottom: 5px;
    width: 21px; height: 21px; padding: 0; line-height: 1; font-size: 12px;
    display: grid; place-items: center; cursor: pointer;
    background: #fff; border: 1px solid var(--pt-line-2); border-radius: 5px;
    color: var(--pt-ink-2);
}
.emo-wrap.one .emo-btn { bottom: 50%; transform: translateY(50%); }
.emo-btn:hover { border-color: var(--brand); color: var(--brand); }
.emo-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---- variable picker (sits beside the emoji button on the same field) ---- */
.emo-wrap.has-vars > textarea { padding-bottom: 26px; }
.emo-wrap.has-vars.one input { padding-inline-end: 56px; }
.emo-wrap.has-vars .emo-btn { inset-inline-end: 31px; }
.var-btn {
    position: absolute; inset-inline-end: 5px; bottom: 5px;
    height: 21px; padding: 0 5px; line-height: 1; font-size: 11px; font-weight: 700;
    display: grid; place-items: center; cursor: pointer;
    background: #fff; border: 1px solid var(--pt-line-2); border-radius: 5px;
    color: var(--brand); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.emo-wrap.one .var-btn { bottom: 50%; transform: translateY(50%); }
.var-btn:hover { border-color: var(--brand); background: #e9f5f2; }
.var-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.var-pop {
    position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 1200;
    width: 268px; background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px;
    box-shadow: 0 8px 28px -10px rgba(16,36,31,.45); padding: 6px;
}
.var-pop.above { top: auto; bottom: calc(100% + 4px); }
.var-search {
    width: 100%; box-sizing: border-box; margin-bottom: 6px;
    border: 1px solid var(--pt-line-2); border-radius: 6px;
    padding: .3rem .45rem; font-size: .76rem;
}
.var-list { max-height: 230px; overflow-y: auto; }
.var-group + .var-group { margin-top: 6px; }
.var-group > span {
    display: block; font-size: .62rem; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--pt-ink-3); margin: 0 0 3px 2px;
}
.var-item {
    display: flex; align-items: center; gap: .4rem; width: 100%;
    border: 0; background: none; cursor: pointer; text-align: start;
    padding: .28rem .35rem; border-radius: 5px;
}
.var-item:hover { background: var(--pt-surface-2); }
.var-item b { font-size: .74rem; font-weight: 600; color: var(--pt-ink); }
.var-item code {
    margin-inline-start: auto; font-size: .66rem; color: var(--brand);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%;
}
.var-empty { font-size: .7rem; color: var(--pt-ink-3); line-height: 1.6; margin: .3rem .2rem 0; }

.emo-pop {
    position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 1200;
    width: 236px; max-height: 210px; overflow-y: auto;
    background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px;
    box-shadow: 0 8px 28px -10px rgba(16,36,31,.45); padding: 6px;
}
.emo-pop.above { top: auto; bottom: calc(100% + 4px); }
.emo-group + .emo-group { margin-top: 6px; }
.emo-group > span {
    display: block; font-size: .62rem; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--pt-ink-3); margin-bottom: 2px;
}
.emo-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
.emo-ch {
    border: 0; background: none; font-size: 15px; line-height: 1.4;
    padding: 2px 0; border-radius: 4px; cursor: pointer;
}
.emo-ch:hover { background: var(--accent-soft, #eafaf4); }

/* ---- working-hours editor (teams) ---- */
.wh { display: grid; gap: .35rem; }
.wh-day {
    display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: start; gap: .5rem;
    padding: .35rem .45rem; border: 1px solid var(--pt-line);
    border-radius: 8px; background: #fff;
}
.wh-day.is-off { background: var(--pt-surface-2); }
.wh-day.is-off .wh-shifts, .wh-day.is-off .wh-add { display: none; }
.wh-toggle { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; cursor: pointer; margin: 0; }
.wh-day.is-off .wh-toggle span { color: var(--pt-ink-3); font-weight: 500; }
.wh-shifts { display: grid; gap: .25rem; }
.wh-shift { display: flex; align-items: center; gap: .3rem; }
.wh-shift input { width: 7.2rem; }
.wh-shift span { color: var(--pt-ink-3); }
.wh-del {
    border: 0; background: none; color: var(--pt-ink-3);
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; border-radius: 4px;
}
.wh-del:hover { color: var(--pt-err); background: #fbeae8; }
.wh-add {
    border: 1px dashed var(--pt-line-2); background: none; color: var(--brand);
    font-size: .7rem; font-weight: 600; border-radius: 6px; padding: .15rem .5rem;
    cursor: pointer; white-space: nowrap;
}
.wh-add:hover { background: var(--accent-soft); }
.wh-day.is-off .wh-add { display: none; }
@media (max-width: 620px) {
    .wh-day { grid-template-columns: 1fr; }
}

/* ---- inline notes in the flow property panel ---- */
.fp-note {
    background: var(--accent-soft); border: 1px solid rgba(18,140,126,.25);
    border-radius: 6px; padding: .4rem .5rem; font-size: .7rem;
    color: var(--pt-ink-2); line-height: 1.55; margin-bottom: .7rem;
}
.fp-note code {
    display: block; margin: .3rem 0; font-size: .72rem; color: var(--brand);
    background: #fff; border: 1px solid var(--pt-line); border-radius: 4px; padding: .2rem .35rem;
}
.fp-note span { display: block; color: var(--pt-ink-3); }
.fp-warn {
    background: #fdf3e0; border: 1px solid #f2ddb4; color: var(--pt-warn);
    border-radius: 6px; padding: .5rem .6rem; font-size: .74rem; line-height: 1.6;
}
.fp-warn a { color: var(--pt-warn); font-weight: 600; }

/* ---------- inline POST actions ----------
   Context switchers (language, tenant, sending number) are POST + antiforgery, not GET
   links, so a third-party page cannot trigger them. These rules let the submit button
   inside such a form keep the exact look of the anchor it replaced. */
form.inline-action { display: inline; margin: 0; padding: 0; }
form.inline-action > button {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; text-align: inherit; cursor: pointer;
}
form.inline-action.d-block { display: block; }
form.inline-action.d-block > button { width: 100%; }

/* ---------- status pages (404, error, subscription expired, signed out) ----------
   One shape for every "the app is telling you something and there is nothing on the
   screen but that message". These used to be Microsoft's untouched scaffolding: English
   only, no branding, and in Error.cshtml's case a paragraph explaining ASPNETCORE_
   ENVIRONMENT to the customer. */
.status-page {
    max-width: 560px;
    margin: 6vh auto;
    padding: 40px 32px;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 28px rgba(0,0,0,.08);
}
.status-page .status-icon {
    width: 84px; height: 84px; margin: 0 auto 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.status-page.is-warning .status-icon { background: linear-gradient(135deg, #f59e0b, #b45309); }
.status-page.is-danger  .status-icon { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.status-page h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; color: #1d2b28; }
.status-page p { color: #6c757d; margin: 0 0 8px; line-height: 1.8; }
.status-page .status-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px;
}
.status-page .status-ref {
    margin-top: 22px; padding-top: 16px; border-top: 1px solid #eef1f3;
    font-size: .8rem; color: #9aa4ab;
}
.status-page .status-ref code { color: #6c757d; }

/* ---------- confirm dialog + toasts ----------
   Replaces the browser's native confirm(), which cannot be translated, ignores the page
   direction, and looks like a phishing prompt on top of a branded app. */
.pt-confirm .modal-header { border-bottom: 0; padding-bottom: 0; }
.pt-confirm .modal-body { padding-top: 12px; font-size: .98rem; color: #40484f; line-height: 1.8; }
.pt-confirm .modal-footer { border-top: 0; padding-top: 0; }
.pt-confirm-icon {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #b45309; background: #fef3c7;
}
.pt-confirm.is-danger .pt-confirm-icon { color: #b91c1c; background: #fee2e2; }

/* Toast host: fixed to the corner that follows the page direction, so it never covers
   the sidebar in RTL nor the content in LTR. */
.pt-toasts {
    position: fixed; bottom: 20px; inset-inline-end: 20px;
    z-index: 1090; display: flex; flex-direction: column; gap: 10px;
    max-width: min(380px, calc(100vw - 40px)); pointer-events: none;
}
.pt-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff; border-radius: 12px; padding: 12px 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
    border-inline-start: 4px solid var(--brand);
    font-size: .92rem; color: #1d2b28; line-height: 1.6;
    animation: pt-toast-in .18s ease-out;
}
.pt-toast.is-error   { border-inline-start-color: #dc3545; }
.pt-toast.is-warning { border-inline-start-color: #f59e0b; }
.pt-toast i { font-size: 1.05rem; line-height: 1.5; }
.pt-toast.is-success i { color: var(--brand); }
.pt-toast.is-error i   { color: #dc3545; }
.pt-toast.is-warning i { color: #b45309; }
.pt-toast .pt-toast-close {
    margin-inline-start: auto; background: none; border: 0; color: #9aa4ab;
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
@keyframes pt-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pt-toast { animation: none; } }

/* ---------- one title per screen ----------
   The topbar prints ViewData["Title"] and most screens then repeat it in their own
   heading, so every page opened with its name written twice, two centimetres apart.

   Rather than editing thirty views (and risking the action buttons that live inside those
   heading rows), the duplicate is resolved where both halves are visible: a screen that
   brings its own .pt-head owns the title, and the topbar steps back to breadcrumb duty.
   Screens with no heading of their own keep the topbar title, which is the whole point of
   having it. Browsers without :has() simply keep today's behaviour. */
.app-main:has(.pt-head) .topbar-title { display: none; }

/* With the title gone the bar would collapse onto the right-hand controls; keep the
   sidebar toggle and the controls at opposite ends as before. */
.app-main:has(.pt-head) .app-topbar > .ms-auto { margin-inline-start: auto; }

/* ---------- configuration alarm ----------
   Shown to the platform owner while a security-critical setting is missing. Deliberately
   loud and not dismissible: the previous design for this problem was to refuse to boot,
   which took the whole product down. This is the honest middle — impossible to miss,
   costs nobody their workspace. */
.cfg-alarm {
    background: #7f1d1d; color: #fff; padding: 10px 20px;
    display: flex; align-items: flex-start; gap: 10px; font-size: .87rem; line-height: 1.7;
}
.cfg-alarm i { font-size: 1.1rem; flex: 0 0 auto; margin-top: 2px; }
.cfg-alarm strong { display: block; }
.cfg-alarm ul { margin: 4px 0 0; padding-inline-start: 18px; }