/* =====================================================================
   Persis Payam panel theme
   One design system for every panel page: light content area, deep navy
   sidebar, brand blue for actions and orange for money.
   All colors come from the tokens below; change them here only.
   ===================================================================== */

/* Yekan Bakh v2 (Fontiran, commercial license). The family has no 500 weight, so 500 uses
   SemiBold to keep labels a step above body text. */
@font-face { font-family: "yekanbakh"; font-style: normal; font-weight: 100; font-display: swap; src: url("../../fonts/gt-theme/yekan-bakh/YekanBakh-Thin.woff2") format("woff2"); }
@font-face { font-family: "yekanbakh"; font-style: normal; font-weight: 300; font-display: swap; src: url("../../fonts/gt-theme/yekan-bakh/YekanBakh-Light.woff2") format("woff2"); }
@font-face { font-family: "yekanbakh"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/gt-theme/yekan-bakh/YekanBakh-Regular.woff2") format("woff2"); }
@font-face { font-family: "yekanbakh"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../../fonts/gt-theme/yekan-bakh/YekanBakh-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "yekanbakh"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/gt-theme/yekan-bakh/YekanBakh-Bold.woff2") format("woff2"); }
@font-face { font-family: "yekanbakh"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../fonts/gt-theme/yekan-bakh/YekanBakh-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "yekanbakh"; font-style: normal; font-weight: 900; font-display: swap; src: url("../../fonts/gt-theme/yekan-bakh/YekanBakh-Black.woff2") format("woff2"); }
@font-face { font-family: "yekanbakh"; font-style: normal; font-weight: 950; font-display: swap; src: url("../../fonts/gt-theme/yekan-bakh/YekanBakh-ExtraBlack.woff2") format("woff2"); }

/* ===================== Design tokens ===================== */

:root {
    /* Brand */
    --pp-primary: #2F6FED;
    --pp-primary-hover: #1F5BD6;
    --pp-primary-soft: #EAF2FF;
    --pp-primary-softer: #F4F8FF;
    --pp-brand: #4E9DFF;
    --pp-accent: #FF9606;
    --pp-accent-hover: #E08500;
    --pp-accent-soft: #FFF4E5;

    /* Navy (sidebar, headings) */
    --pp-navy-900: #0B1428;
    --pp-navy-800: #0F1B33;
    --pp-navy-700: #18284A;
    --pp-navy-600: #233661;
    --pp-navy-text: #C3CFE6;
    --pp-navy-muted: #7586A8;

    /* Neutrals */
    --pp-bg: #F4F7FC;
    --pp-surface: #FFFFFF;
    --pp-surface-2: #F8FAFD;
    --pp-border: #E3EAF4;
    --pp-border-strong: #CFDAEA;
    --pp-text: #14213D;
    --pp-text-2: #4A5A78;
    --pp-text-muted: #8292AE;

    /* Status */
    --pp-success: #12A150;
    --pp-success-soft: #E7F7EE;
    --pp-danger: #E5484D;
    --pp-danger-soft: #FDECEC;
    --pp-warning: #D97706;
    --pp-warning-soft: #FFF5E1;

    /* Shape and depth */
    --pp-radius-sm: 10px;
    --pp-radius: 14px;
    --pp-radius-lg: 18px;
    --pp-shadow-xs: 0 1px 2px rgba(20, 33, 61, 0.05);
    --pp-shadow-sm: 0 1px 3px rgba(20, 33, 61, 0.06), 0 1px 2px rgba(20, 33, 61, 0.04);
    --pp-shadow: 0 4px 16px -4px rgba(20, 33, 61, 0.08), 0 2px 4px rgba(20, 33, 61, 0.04);
    --pp-shadow-lg: 0 18px 40px -12px rgba(20, 33, 61, 0.18), 0 4px 10px rgba(20, 33, 61, 0.05);
    --pp-shadow-primary: 0 6px 16px -4px rgba(47, 111, 237, 0.45);
    --pp-ring: 0 0 0 4px rgba(47, 111, 237, 0.14);
    --pp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Typography */
    --pp-font: "yekanbakh", Tahoma, sans-serif;
    /* Filament reads its font from this variable */
    --font-family: var(--pp-font);
}

/* ===================== Base ===================== */

body,
button,
input,
select,
textarea {
    font-family: var(--pp-font) !important;
}

/* Compact scale: Filament sizes everything in rem, so a 14px root makes the whole
   panel (text, spacing, sidebar) about 12% smaller, close to the reference panels */
html.fi {
    font-size: 14px;
}

/* Every element and popup (tooltips, selects, date pickers) uses the panel font;
   code-like elements keep a monospace font */
.fi-body :where(*:not(code, pre, kbd, samp, .font-mono)) {
    font-family: var(--pp-font);
}

body {
    font-size: 13px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

/* Big numbers: heaviest cut reads best on stat cards and the wallet */
.fi-wi-stats-overview-stat-value,
.fi-topbar-wallet-amount {
    font-weight: 900 !important;
}

body.fi-body {
    background-color: var(--pp-bg);
    color: var(--pp-text);
}

::selection {
    background: rgba(47, 111, 237, 0.18);
}

/* Thin, quiet scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: #C9D5E8 transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #C9D5E8; border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

#fi-main-content {
    margin: 0 auto;
}

/* Keyboard focus is always visible */
:focus-visible {
    outline: 2px solid var(--pp-primary);
    outline-offset: 2px;
}

/* ===================== Topbar ===================== */

.fi-topbar {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--pp-border) !important;
    box-shadow: 0 1px 0 rgba(20, 33, 61, 0.02), 0 6px 20px -14px rgba(20, 33, 61, 0.25) !important;
}

.fi-topbar .fi-logo {
    height: 3rem !important;
}

.fi-topbar .fi-icon-btn {
    border-radius: 12px;
    color: var(--pp-text-2);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-topbar .fi-icon-btn:hover {
    background-color: var(--pp-primary-soft);
    color: var(--pp-primary);
}

/* Live date and time in the middle of the topbar */
.pp-topbar-clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid var(--pp-border);
    background: var(--pp-surface-2);
    color: var(--pp-text-2);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pp-topbar-clock svg {
    width: 16px;
    height: 16px;
    color: var(--pp-primary);
}

@media (max-width: 1023px) {
    .pp-topbar-clock-wrap { display: none !important; }
}

/* User menu trigger: an "account" pill button instead of a bare avatar.
   The label is CSS content because the trigger markup belongs to Filament. */
.fi-topbar .fi-user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding-inline: 5px 30px;
    border-radius: 9999px;
    border: 1px solid var(--pp-border);
    background-color: var(--pp-surface);
    /* chevron at the end of the pill */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238292AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: left 11px center;
    box-shadow: var(--pp-shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.fi-topbar .fi-user-menu-trigger::after {
    content: "حساب کاربری";
    color: var(--pp-text);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.fi-topbar .fi-user-menu-trigger:hover,
.fi-topbar .fi-user-menu-trigger[aria-expanded="true"] {
    border-color: rgba(47, 111, 237, 0.35);
    background-color: var(--pp-primary-softer);
    box-shadow: 0 6px 14px -8px rgba(47, 111, 237, 0.45);
}

.fi-topbar .fi-user-menu-trigger .fi-avatar {
    width: 32px !important;
    height: 32px !important;
    padding: 5px;
    border-radius: 9999px;
    background: var(--pp-primary-soft);
    object-fit: contain;
}

@media (max-width: 640px) {
    .fi-topbar .fi-user-menu-trigger { padding-inline: 5px 26px; }
    .fi-topbar .fi-user-menu-trigger::after { content: none; }
}

/* User menu dropdown header shows the account name */
.fi-user-menu .fi-dropdown-header {
    font-weight: 700;
}

/* ===================== Sidebar ===================== */

.fi-sidebar {
    background: linear-gradient(180deg, var(--pp-navy-800) 0%, var(--pp-navy-900) 100%) !important;
    border-inline-start: 0 !important;
    box-shadow: -8px 0 30px -18px rgba(11, 20, 40, 0.6);
}

.fi-sidebar-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fi-sidebar-nav {
    padding-inline: 14px !important;
    row-gap: 1.25rem !important;
}

/* Group titles */
.fi-sidebar-group-label {
    color: var(--pp-navy-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn,
.fi-sidebar-group-collapse-btn .fi-icon {
    color: var(--pp-navy-muted) !important;
}

.fi-sidebar-group-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Items */
.fi-sidebar-item-btn {
    background-color: transparent !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s var(--pp-ease);
}

.fi-sidebar-item-label {
    color: var(--pp-navy-text) !important;
    font-size: 13px;
    font-weight: 500 !important;
}

.fi-sidebar-item-icon {
    color: #8FA3C8 !important;
}

.fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #FFFFFF !important;
}

/* Active item: brand gradient pill */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(135deg, #3B7BFF 0%, var(--pp-primary) 100%) !important;
    box-shadow: var(--pp-shadow-primary);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Grouped items without icons draw a thin guide line */
.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.fi-sidebar-item-grouped-border-part {
    background-color: var(--pp-navy-muted) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
    background-color: #FFFFFF !important;
}

/* Count badges in the sidebar */
.fi-sidebar-item-badge-ctn .fi-badge {
    background: rgba(255, 150, 6, 0.16) !important;
    color: #FFB547 !important;
    box-shadow: none !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
}

/* Collapse / close buttons sitting on the dark sidebar */
.fi-sidebar .fi-icon-btn {
    color: var(--pp-navy-text) !important;
}

.fi-sidebar .fi-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.fi-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===================== Sidebar support card ===================== */

.fi-sidebar-helper-box-card {
    position: relative;
    overflow: hidden;
    margin: 14px;
    margin-top: auto;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(78, 157, 255, 0.18) 0%, rgba(255, 255, 255, 0.03) 70%);
    flex-shrink: 0;
}

.fi-sidebar-helper-box-card::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    border-radius: 9999px;
    background: rgba(78, 157, 255, 0.35);
    filter: blur(30px);
    pointer-events: none;
}

.fi-sidebar-helper-box-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pp-brand), var(--pp-primary));
    box-shadow: var(--pp-shadow-primary);
    color: #fff;
}

.fi-sidebar-helper-box-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

.fi-sidebar-store-register-card-title {
    position: relative;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

.fi-sidebar-helper-box-desc {
    position: relative;
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--pp-navy-text);
}

.fi-sidebar-store-register-card-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--pp-navy-800) !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s var(--pp-ease), box-shadow 0.15s ease;
}

.fi-sidebar-store-register-card-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
}

.fi-sidebar-store-register-card-btn:active {
    transform: scale(0.98);
}

.fi-sidebar-store-register-card-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--pp-primary-soft);
    color: var(--pp-primary);
}

.fi-sidebar-store-register-card-btn-arrow svg {
    width: 12px;
    height: 12px;
    transform: scaleX(-1);
}

/* ===================== Topbar wallet card ===================== */

.fi-topbar-wallet-card {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 4px 0 14px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 150, 6, 0.22);
    background: linear-gradient(135deg, var(--pp-accent-soft) 0%, #FFFFFF 70%);
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.15s var(--pp-ease);
}

a.fi-topbar-wallet-card:hover {
    box-shadow: 0 8px 18px -8px rgba(255, 150, 6, 0.45);
    transform: translateY(-1px);
}

.fi-topbar-wallet-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, #FFA928, var(--pp-accent-hover));
    box-shadow: 0 4px 10px -2px rgba(255, 150, 6, 0.5);
    color: #fff;
}

.fi-topbar-wallet-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

.fi-topbar-wallet-texts {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.fi-topbar-wallet-label {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--pp-text-muted);
}

.fi-topbar-wallet-amount {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #A35F00;
}

.fi-topbar-wallet-currency {
    font-size: 10px;
    font-weight: 600;
    color: var(--pp-accent);
}

/* Charge button shown next to the wallet for customers */
.fi-topbar-wallet-charge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 4px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: var(--pp-accent);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 4px 10px -3px rgba(255, 150, 6, 0.6);
}

.fi-topbar-wallet-charge svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 640px) {
    .fi-topbar-wallet-label,
    .fi-topbar-wallet-charge span { display: none; }
}

/* ===================== Page header ===================== */

.fi-header {
    gap: 0.75rem;
}

.fi-header-heading {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: var(--pp-text) !important;
}

.fi-header-subheading {
    color: var(--pp-text-2) !important;
    font-size: 12.5px !important;
}

.fi-breadcrumbs .fi-icon.fi-ltr {
    display: none !important;
}

.fi-breadcrumbs a,
.fi-breadcrumbs span {
    font-size: 12.5px;
    color: var(--pp-text-muted);
}

.fi-breadcrumbs a:hover {
    color: var(--pp-primary);
}

/* ===================== Surfaces: sections, widgets, cards ===================== */

.fi-section:not(.fi-section-not-contained),
.fi-card,
.fi-wi-chart .fi-section {
    background-color: var(--pp-surface) !important;
    border: 1px solid var(--pp-border) !important;
    border-radius: var(--pp-radius-lg) !important;
    box-shadow: var(--pp-shadow-sm) !important;
}

.fi-section-header {
    padding-block: 0.9rem !important;
}

.fi-section:not(.fi-section-not-contained) > .fi-section-header {
    border-bottom: 1px solid var(--pp-border);
}

.fi-section-header-heading {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--pp-text) !important;
}

.fi-section-header-description {
    color: var(--pp-text-2) !important;
    font-size: 12px !important;
    line-height: 1.9;
}

.fi-section-footer {
    background: var(--pp-surface-2);
    border-top: 1px solid var(--pp-border);
}

/* ===================== Stats overview cards ===================== */

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius-lg) !important;
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-sm) !important;
    padding: 1rem 1.2rem !important;
    transition: transform 0.2s var(--pp-ease), box-shadow 0.2s ease, border-color 0.2s ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--pp-shadow) !important;
    border-color: var(--pp-border-strong);
}

/* Colored accent on the start edge of every stat card */
.fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    inset-block: 18px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--pp-primary);
    opacity: 0.85;
}

.fi-wi-stats-overview-stat:nth-child(2)::before { background: var(--pp-success); }
.fi-wi-stats-overview-stat:nth-child(3)::before { background: var(--pp-danger); }
.fi-wi-stats-overview-stat:nth-child(4)::before { background: var(--pp-accent); }

.fi-wi-stats-overview-stat-label {
    color: var(--pp-text-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.fi-wi-stats-overview-stat-value {
    color: var(--pp-text) !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-description {
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

/* ===================== Buttons ===================== */

.fi-btn {
    border-radius: var(--pp-radius-sm) !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease !important;
}

.fi-btn:active {
    transform: scale(0.98);
}

.fi-btn.fi-color-primary:not(.fi-outlined),
.fi-btn-primary,
.filamentFormButton {
    background: linear-gradient(135deg, #3B7BFF 0%, var(--pp-primary) 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: var(--pp-shadow-primary) !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn-primary:hover,
.filamentFormButton:hover {
    background: var(--pp-primary-hover) !important;
}

.fi-btn.fi-color-secondary:not(.fi-outlined),
.fi-btn-secondary {
    background: var(--pp-accent) !important;
    border-color: var(--pp-accent) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px -6px rgba(255, 150, 6, 0.55) !important;
}

.fi-btn.fi-color-secondary:not(.fi-outlined):hover,
.fi-btn-secondary:hover {
    background: var(--pp-accent-hover) !important;
}

/* Neutral buttons (cancel, filters, ...) */
.fi-btn.fi-color-gray:not(.fi-outlined) {
    background: var(--pp-surface) !important;
    color: var(--pp-text) !important;
    box-shadow: inset 0 0 0 1px var(--pp-border-strong), var(--pp-shadow-xs) !important;
}

.fi-btn.fi-color-gray:not(.fi-outlined):hover {
    background: var(--pp-surface-2) !important;
}

.fi-btn.fi-outlined,
.fi-btn-outline {
    color: var(--pp-primary) !important;
    box-shadow: inset 0 0 0 1.5px var(--pp-primary) !important;
    background: transparent !important;
}

.fi-btn.fi-outlined:hover,
.fi-btn-outline:hover {
    background: var(--pp-primary-soft) !important;
}

.fi-link {
    color: var(--pp-primary) !important;
    font-weight: 600;
}

.fi-link:hover {
    color: var(--pp-primary-hover) !important;
}

.fi-icon-btn {
    border-radius: 10px;
}

/* ===================== Badges ===================== */

.fi-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    padding-inline: 10px !important;
}

.fi-badge-primary,
.fi-badge.fi-color-primary {
    background-color: var(--pp-primary-soft) !important;
    color: var(--pp-primary) !important;
}

.fi-badge-secondary,
.fi-badge.fi-color-secondary {
    background-color: var(--pp-accent-soft) !important;
    color: #B26200 !important;
}

/* ===================== Form fields ===================== */

.fi-fo-field-label-content {
    color: var(--pp-text) !important;
    font-weight: 600 !important;
    font-size: 12.5px;
}

/* Filament wrappers draw the field box; the inner input stays borderless */
.fi-input-wrp {
    border-radius: 12px !important;
    background-color: var(--pp-surface) !important;
    box-shadow: inset 0 0 0 1.5px var(--pp-border) !important;
    transition: box-shadow 0.15s ease;
}

.fi-input-wrp:hover {
    box-shadow: inset 0 0 0 1.5px var(--pp-border-strong) !important;
}

.fi-input-wrp:focus-within {
    box-shadow: inset 0 0 0 1.5px var(--pp-primary), var(--pp-ring) !important;
}

.fi-input-wrp.fi-invalid,
.fi-input-wrp:has([aria-invalid="true"]) {
    box-shadow: inset 0 0 0 1.5px var(--pp-danger) !important;
}

.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    color: var(--pp-text-muted);
}

.fi-input-wrp .fi-input,
.fi-input-wrp input:not([type="checkbox"]):not([type="radio"]),
.fi-input-wrp select,
.fi-input-wrp textarea {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

/* Plain inputs outside a Filament wrapper (custom pages) */
input.fi-input:not(.fi-input-wrp *),
textarea:not(.fi-input-wrp *),
select:not(.fi-input-wrp *),
input[type="text"]:not(.fi-input-wrp *):not(.fi-one-time-code-input-digit),
input[type="email"]:not(.fi-input-wrp *),
input[type="number"]:not(.fi-input-wrp *),
input[type="search"]:not(.fi-input-wrp *),
input[type="tel"]:not(.fi-input-wrp *),
input[type="password"]:not(.fi-input-wrp *) {
    border: 1.5px solid var(--pp-border);
    border-radius: 12px;
    padding: 10px 12px;
    background-color: var(--pp-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:not(.fi-input-wrp *):focus,
textarea:not(.fi-input-wrp *):focus,
select:not(.fi-input-wrp *):focus {
    border-color: var(--pp-primary);
    box-shadow: var(--pp-ring);
    outline: none;
}

select {
    padding-inline-start: 10px;
    padding-inline-end: 2.5rem;
}

.fi-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: #A3B0C6;
}

.fi-fo-field-wrp-error-message {
    font-size: 12.5px;
    font-weight: 500;
}

/* Toggles: knob exactly centered in the track */
.fi-toggle {
    padding: 0;
    box-sizing: border-box;
    align-items: center;
}

.fi-toggle > :first-child {
    margin: 0;
    flex-shrink: 0;
}

/* ===================== Checkboxes & radios ===================== */

.fi-checkbox-input,
.fi-radio-input,
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    flex-shrink: 0;
    width: 1.2rem !important;
    height: 1.2rem !important;
    padding: 0 !important;
    background-color: #FFFFFF;
    border: 2px solid #B4C6E4 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.fi-checkbox-input,
input[type="checkbox"] {
    border-radius: 6px !important;
}

.fi-radio-input,
input[type="radio"] {
    border-radius: 9999px !important;
}

.fi-checkbox-input:hover,
.fi-radio-input:hover,
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--pp-primary) !important;
}

.fi-checkbox-input:focus-visible,
.fi-radio-input:focus-visible {
    border-color: var(--pp-primary) !important;
    box-shadow: var(--pp-ring) !important;
}

.fi-checkbox-input:checked,
.fi-checkbox-input:indeterminate,
.fi-radio-input:checked,
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate,
input[type="radio"]:checked {
    background-color: var(--pp-primary) !important;
    border-color: var(--pp-primary) !important;
}

.fi-checkbox-input:disabled,
.fi-radio-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fi-fo-checkbox-list-actions .fi-link,
.fi-fo-checkbox-list-actions button {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    outline: none !important;
}

/* ===================== Tabs ===================== */

/* Segmented control look, like the reference panels */
.fi-tabs:not(.fi-sc-tabs .fi-tabs) {
    padding: 5px;
    border-radius: 14px;
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-xs);
    gap: 4px;
}

.fi-tabs-item {
    border-radius: 10px !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-tabs-item .fi-tabs-item-label {
    color: var(--pp-text-2);
    font-weight: 600;
}

.fi-tabs-item:hover:not(.fi-active) {
    background: var(--pp-surface-2) !important;
}

.fi-tabs-item.fi-active {
    background: var(--pp-primary-soft) !important;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: var(--pp-primary) !important;
}

/* ===================== Tables ===================== */

.fi-ta-ctn {
    border: 1px solid var(--pp-border) !important;
    border-radius: var(--pp-radius-lg) !important;
    box-shadow: var(--pp-shadow-sm) !important;
    overflow: hidden;
    background: var(--pp-surface) !important;
}

.fi-ta-header-ctn,
.fi-ta-header-toolbar {
    background-color: var(--pp-surface);
}

.fi-ta-header-toolbar {
    border-bottom: 1px solid var(--pp-border) !important;
    /* Room for the filter count badge above the filter button */
    padding-block: 18px 14px !important;
    align-items: center !important;
}

.fi-ta-header-heading {
    font-weight: 700 !important;
    color: var(--pp-text) !important;
}

/* Search field in the table toolbar */
.fi-ta-search-field .fi-input-wrp {
    min-width: 240px;
    /* Same height as the filter button next to it */
    min-height: 38px;
    border-radius: 12px !important;
    background: var(--pp-surface-2) !important;
}

.fi-ta-search-field .fi-input-wrp .fi-input {
    padding-block: 8px !important;
}

/* Header row: soft navy tint like the reference panel */
.fi-ta-ctn table thead tr {
    background-color: #F1F5FB !important;
    border-bottom: 1px solid var(--pp-border) !important;
}

.fi-ta-ctn table thead th,
.fi-ta-ctn table thead .fi-ta-header-cell,
.fi-ta-ctn table thead .fi-ta-header-cell-sort-btn span {
    color: var(--pp-text-2) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

.fi-ta-ctn table tbody tr.fi-ta-row:not(.fi-ta-group-header-row) {
    background-color: var(--pp-surface) !important;
    border-bottom: 1px solid #EEF2F8 !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.fi-ta-ctn table tbody tr.fi-ta-row:not(.fi-ta-group-header-row):hover {
    background-color: var(--pp-primary-softer) !important;
    box-shadow: inset -3px 0 0 var(--pp-primary);
}

.fi-ta-ctn table tbody tr.fi-ta-row.fi-selected {
    background-color: var(--pp-primary-soft) !important;
}

.fi-ta-ctn table tbody .fi-ta-cell {
    color: var(--pp-text);
}

.fi-ta-text-item-label,
.fi-ta-text {
    font-variant-numeric: tabular-nums;
}

/* Empty state: icon in a soft circle and calm copy */
.fi-ta-empty-state,
.fi-empty-state {
    padding-block: 3.5rem !important;
}

.fi-ta-empty-state-icon-bg,
.fi-empty-state-icon-bg {
    /* Fixed circle: the icon must sit exactly in the middle (Filament's own padding pushed it to a corner) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    padding: 0 !important;
    box-sizing: border-box;
    width: 72px !important;
    height: 72px !important;
    background: var(--pp-primary-soft) !important;
    box-shadow: 0 0 0 10px var(--pp-primary-softer);
}

.fi-ta-empty-state-icon-bg .fi-icon,
.fi-empty-state-icon-bg .fi-icon {
    color: var(--pp-primary) !important;
}

.fi-ta-empty-state-heading,
.fi-empty-state-heading {
    font-weight: 700 !important;
    color: var(--pp-text) !important;
}

.fi-ta-empty-state-description,
.fi-empty-state-description {
    color: var(--pp-text-muted) !important;
}

/* ===================== Pagination ===================== */

.fi-pagination {
    padding-block: 12px;
}

.fi-pagination-items {
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px var(--pp-border) !important;
    overflow: hidden;
}

.fi-pagination-item-btn {
    font-weight: 600;
}

.fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--pp-primary) !important;
}

.fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #FFFFFF !important;
}

.fi-pagination-overview {
    color: var(--pp-text-muted);
    font-size: 12.5px;
}

/* ===================== Dropdowns ===================== */

.fi-dropdown-panel {
    border-radius: 14px !important;
    border: 1px solid var(--pp-border) !important;
    box-shadow: var(--pp-shadow-lg) !important;
    overflow: hidden;
}

.fi-dropdown-header {
    background: var(--pp-surface-2);
}

.fi-dropdown-list-item {
    border-radius: 9px !important;
    transition: background-color 0.12s ease;
}

.fi-dropdown-list-item:hover {
    background-color: var(--pp-primary-soft) !important;
}

.fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
.fi-dropdown-list-item:hover .fi-icon {
    color: var(--pp-primary) !important;
}

/* ===================== Modals ===================== */

.fi-modal-close-overlay {
    background-color: rgba(11, 20, 40, 0.55) !important;
    backdrop-filter: blur(3px);
}

.fi-modal-window {
    border-radius: 20px !important;
    overflow: hidden;
    border: 1px solid var(--pp-border);
    box-shadow: 0 30px 70px -20px rgba(11, 20, 40, 0.35) !important;
}

.fi-modal-header {
    padding: 1.5rem 1.75rem 1.1rem !important;
    padding-inline-start: 1.75rem !important;
    padding-inline-end: 3.5rem !important;
    row-gap: 0.25rem;
    border-bottom: 1px solid var(--pp-border) !important;
}

.fi-modal-heading {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--pp-text);
}

.fi-modal-description {
    margin-top: 0.5rem !important;
    font-size: 12.5px !important;
    line-height: 1.9 !important;
    color: var(--pp-text-2) !important;
}

.fi-modal-icon-bg {
    background: var(--pp-primary-soft) !important;
}

.fi-modal-close-btn {
    top: 1.15rem !important;
    inset-inline-end: 1.1rem !important;
}

.fi-modal-content {
    padding: 1.5rem 1.75rem !important;
    row-gap: 1.1rem !important;
}

.fi-modal-footer {
    padding: 1rem 1.75rem 1.25rem !important;
    background-color: var(--pp-surface-2);
    border-top: 1px solid var(--pp-border) !important;
}

.fi-modal-footer .fi-modal-footer-actions {
    gap: 0.75rem !important;
}

.fi-modal-footer .fi-btn {
    min-width: 6.5rem;
    justify-content: center;
}

/* ===================== Notifications (toasts) ===================== */

/* Toasts start under the sticky topbar (about 64px tall) instead of covering it */
.fi-no {
    top: 76px !important;
}

.fi-no-notification {
    border-radius: 16px !important;
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-lg) !important;
}

.fi-no-notification-title {
    font-weight: 700 !important;
}

/* ===================== Dividers ===================== */

.fi-divider {
    border-color: var(--pp-border) !important;
}

/* ===================== Footer ===================== */

.pp-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--pp-border);
    background: var(--pp-surface);
    color: var(--pp-text-muted);
    font-size: 12px;
}

.pp-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-text-2);
    text-decoration: none;
}

.pp-footer a:hover {
    color: var(--pp-primary);
}

.pp-footer img {
    height: 20px;
    width: auto;
}

/* ===================== Login (simple layout) ===================== */

.fi-simple-layout {
    background:
            radial-gradient(1200px 600px at 100% 0%, rgba(78, 157, 255, 0.16), transparent 60%),
            radial-gradient(900px 500px at 0% 100%, rgba(255, 150, 6, 0.10), transparent 60%),
            var(--pp-bg);
}

.fi-simple-main {
    border-radius: 24px !important;
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-lg) !important;
}

.fi-simple-layout .fi-logo {
    height: 5rem !important;
}

.fi-simple-header-heading {
    font-weight: 800 !important;
    color: var(--pp-text) !important;
}

/* Mobile number: centered with wide letter spacing */
.login-mobile-input {
    text-align: center !important;
    letter-spacing: 0.35em;
    font-size: 1.15rem;
    font-weight: 600;
}

.fi-simple-layout .fi-ac:has(.login-edit-mobile-btn) {
    grid-template-columns: 3fr 2fr !important;
    gap: 0.75rem;
}

.fi-simple-layout .login-submit-btn,
.fi-simple-layout .login-edit-mobile-btn {
    width: 100%;
    justify-content: center;
    min-height: 46px;
}

.fi-simple-layout .login-edit-mobile-btn {
    border: 1.5px solid var(--pp-primary) !important;
    background-color: #FFFFFF !important;
    color: var(--pp-primary) !important;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: none !important;
}

.fi-simple-layout .login-edit-mobile-btn:hover {
    background-color: var(--pp-primary-soft) !important;
}

.fi-simple-layout .login-edit-mobile-btn .fi-icon {
    color: var(--pp-primary) !important;
}

/* One-time code boxes: digits stay in typing order although the page is RTL */
.fi-one-time-code-input-ctn {
    direction: ltr;
    width: 100% !important;
    gap: 0.5rem;
}

.fi-one-time-code-input-ctn > .fi-one-time-code-input-digit {
    padding: 0 !important;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    height: 3.4rem;
    border: 1.5px solid var(--pp-border-strong) !important;
    border-radius: 12px;
    background-color: #FFFFFF;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
}

.fi-one-time-code-input-ctn > .fi-one-time-code-input-digit:focus {
    border-color: var(--pp-primary) !important;
    box-shadow: var(--pp-ring);
    outline: none;
}

/* ===================== Utility classes used by custom views ===================== */

.bg-primary { background-color: var(--pp-primary); }
.bg-primary-light { background-color: var(--pp-primary-soft); }
.bg-primary-hover { background-color: var(--pp-primary-hover); }
.bg-warning { background-color: var(--pp-accent); }
.bg-warning-light { background-color: var(--pp-accent-soft); }
.text-primary { color: var(--pp-primary); }
.text-warning { color: var(--pp-accent); }
.border-primary { border-color: var(--pp-primary); }
.border-warning { border-color: var(--pp-accent); }
.ring-primary { --tw-ring-color: var(--pp-primary); }
.hover\:bg-primary-hover:hover { background-color: var(--pp-primary-hover); }
.hover\:bg-warning-hover:hover { background-color: var(--pp-accent-hover); }
.hover\:border-primary:hover { border-color: var(--pp-primary); }
.hover\:border-warning:hover { border-color: var(--pp-accent); }

/* ===================== Identity verification gate ===================== */

html.pp-gate-open,
html.pp-gate-open body {
    overflow: hidden !important;
}

.pp-gate {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    background: rgba(11, 20, 40, 0.62);
    backdrop-filter: blur(6px);
    animation: pp-fade-in 0.25s ease both;
}

.pp-gate-card {
    width: 100%;
    max-width: 460px;
    margin: auto;
    padding: 28px 28px 18px;
    border-radius: 24px;
    background: var(--pp-surface);
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.5);
    animation: pp-pop-in 0.35s var(--pp-ease) both;
}

.pp-gate-head {
    text-align: center;
}

.pp-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3B7BFF, var(--pp-primary));
    box-shadow: var(--pp-shadow-primary), 0 0 0 8px var(--pp-primary-soft);
    color: #FFFFFF;
}

.pp-gate-icon svg {
    width: 32px;
    height: 32px;
}

.pp-gate-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: var(--pp-text);
}

.pp-gate-desc {
    margin: 0;
    font-size: 13px;
    line-height: 2;
    color: var(--pp-text-2);
}

.pp-gate-steps {
    display: flex;
    gap: 6px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.pp-gate-step {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 12px;
    background: var(--pp-surface-2);
    border: 1px solid var(--pp-border);
    color: var(--pp-text-muted);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pp-gate-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: var(--pp-border);
    color: var(--pp-text-2);
    font-size: 11px;
}

.pp-gate-step-done {
    color: var(--pp-success);
    background: var(--pp-success-soft);
    border-color: transparent;
}

.pp-gate-step-done span {
    background: var(--pp-success);
    color: #FFFFFF;
}

.pp-gate-step-current {
    color: var(--pp-primary);
    background: var(--pp-primary-soft);
    border-color: rgba(47, 111, 237, 0.25);
}

.pp-gate-step-current span {
    background: var(--pp-primary);
    color: #FFFFFF;
}

.pp-gate-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pp-gate-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-gate-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pp-text);
}

.pp-gate .pp-gate-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--pp-border-strong);
    border-radius: 12px;
    background: var(--pp-surface);
    color: var(--pp-text);
    font-family: inherit;
    font-size: 14px;
}

.pp-gate select.pp-gate-input {
    padding-inline-end: 2rem;
}

.pp-gate .pp-gate-input:focus {
    border-color: var(--pp-primary);
    box-shadow: var(--pp-ring);
    outline: none;
}

.pp-gate .pp-gate-input-code {
    text-align: center;
    letter-spacing: 0.3em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pp-gate .pp-gate-input-invalid {
    border-color: var(--pp-danger);
}

.pp-gate-date {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.1fr;
    gap: 8px;
}

.pp-gate-error {
    font-size: 12px;
    font-weight: 500;
    color: var(--pp-danger);
}

.pp-gate-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--pp-danger-soft);
    color: #B42318;
    font-size: 12.5px;
    line-height: 1.9;
}

.pp-gate-alert svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
}

.pp-gate-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin-top: 4px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #3B7BFF, var(--pp-primary));
    box-shadow: var(--pp-shadow-primary);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.15s ease;
}

.pp-gate-submit:hover {
    filter: brightness(1.06);
}

.pp-gate-submit:active {
    transform: scale(0.99);
}

.pp-gate-submit:disabled {
    cursor: progress;
    filter: saturate(0.8);
}

.pp-gate-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-gate-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 9999px;
    animation: pp-spin 0.7s linear infinite;
}

.pp-gate-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.9;
    text-align: center;
    color: var(--pp-text-muted);
}

.pp-gate-logout {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pp-border);
    text-align: center;
}

.pp-gate-logout button {
    border: 0;
    background: none;
    color: var(--pp-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pp-gate-logout button:hover {
    color: var(--pp-danger);
}

@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-pop-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 480px) {
    .pp-gate-card { padding: 22px 18px 14px; border-radius: 20px; }
    .pp-gate-step { font-size: 10.5px; }
}

/* ===================== Customer layout: one centered container =====================
   Customers see one 1600px container. The topbar items and the footer are
   aligned to the same edges, so the three parts read as one column. */

body:has(.pp-customer-layout) {
    --pp-container: 1600px;
    --pp-gutter: 1rem;
}

@media (min-width: 40rem) {
    body:has(.pp-customer-layout) { --pp-gutter: 1.5rem; }
}

@media (min-width: 64rem) {
    body:has(.pp-customer-layout) { --pp-gutter: 2rem; }

    /* Logo area matches the sidebar; the rest of the topbar follows the content column.
       --pp-col-start / --pp-col-end are measured by filament/layout/customer-align.blade.php */
    body:has(.pp-customer-layout) .fi-topbar {
        padding-inline-start: 0 !important;
        padding-inline-end: var(--pp-col-end, var(--pp-gutter)) !important;
    }

    body:has(.pp-customer-layout) .fi-topbar-start {
        width: var(--sidebar-width);
        flex-shrink: 0;
        margin-inline-end: 0 !important;
        padding-inline-start: 1.25rem;
    }

    body:has(.pp-customer-layout) .pp-balance-chip {
        margin-inline-start: max(0px, calc(var(--pp-col-start, var(--sidebar-width)) - var(--sidebar-width)));
    }
}

@media (max-width: 63.99rem) {
    /* No sidebar column on small screens: the whole topbar follows the content edges */
    body:has(.pp-customer-layout) .fi-topbar {
        padding-inline: var(--pp-col-start, var(--pp-gutter)) var(--pp-col-end, var(--pp-gutter)) !important;
    }

    body:has(.pp-customer-layout) .pp-balance-chip {
        margin-inline-start: 8px;
    }}

body:has(.pp-customer-layout) .fi-main.fi-width-7xl,
body:has(.pp-customer-layout) .fi-main {
    max-width: var(--pp-container);
    padding-inline: var(--pp-gutter) !important;
}

/* Footer: a card exactly as wide as the content */
body:has(.pp-customer-layout) .pp-footer {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pp-gutter));
    max-width: calc(var(--pp-container) - 2 * var(--pp-gutter));
    margin: 1.5rem auto 1rem;
    padding: 14px 20px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow-xs);
}

/* ===================== Row "send report" button =====================
   Soft tinted pill so it is visible on every row without shouting; fills on hover. */

.fi-ta-ctn .fi-btn.pp-report-btn {
    gap: 6px;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    background: var(--pp-primary-soft) !important;
    color: var(--pp-primary) !important;
    box-shadow: inset 0 0 0 1px rgba(47, 111, 237, 0.18) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.fi-ta-ctn .fi-btn.pp-report-btn .fi-icon {
    color: currentColor !important;
    width: 16px;
    height: 16px;
}

.fi-ta-ctn .fi-btn.pp-report-btn:hover {
    background: linear-gradient(135deg, #3B7BFF 0%, var(--pp-primary) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: var(--pp-shadow-primary) !important;
    transform: translateY(-1px);
}

.fi-ta-ctn .fi-btn.pp-report-btn:active {
    transform: scale(0.98);
}

/* Fields inside a Filament wrapper: the wrapper draws the focus ring, so the inner
   input must not add its own outline (it showed as a second box in the table search) */
.fi-input-wrp input:focus,
.fi-input-wrp input:focus-visible,
.fi-input-wrp textarea:focus,
.fi-input-wrp textarea:focus-visible,
.fi-input-wrp select:focus,
.fi-input-wrp select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ===================== Topbar balance chip and charge button (customers) ===================== */

/* Keep the sidebar toggles and the logo first; the balance chip follows them */
.fi-topbar .fi-topbar-open-sidebar-btn,
.fi-topbar .fi-topbar-close-sidebar-btn { order: -3; }
.fi-topbar .fi-topbar-start { order: -2; }

.pp-balance-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding-inline: 6px 14px;
    border-radius: 9999px;
    border: 1px solid var(--pp-border);
    background: var(--pp-surface-2);
    color: var(--pp-text-2);
    font-size: 12.5px;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pp-balance-chip:hover {
    border-color: rgba(47, 111, 237, 0.3);
    background: var(--pp-primary-softer);
}

.pp-balance-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--pp-primary-soft);
    color: var(--pp-primary);
}

.pp-balance-chip-svg {
    width: 17px;
    height: 17px;
}

.pp-balance-chip-amount {
    color: var(--pp-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pp-balance-chip-unit {
    font-size: 11px;
    color: var(--pp-text-muted);
}

.pp-balance-chip-sms {
    font-size: 11.5px;
    color: var(--pp-primary);
    font-weight: 600;
}

.pp-charge-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding-inline: 14px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #FFA928 0%, var(--pp-accent) 100%);
    box-shadow: 0 6px 14px -6px rgba(255, 150, 6, 0.65);
    color: #FFFFFF !important;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.15s var(--pp-ease), filter 0.15s ease;
}

.pp-charge-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.pp-charge-btn-svg {
    width: 17px;
    height: 17px;
}

@media (max-width: 767px) {
    .pp-balance-chip-label,
    .pp-balance-chip-unit,
    .pp-balance-chip-sms { display: none; }
    .pp-charge-btn span { display: none; }
    .pp-charge-btn { padding-inline: 10px; }
}

/* ===================== Customer dashboard (CustomerDashboard widget) ===================== */

.pp-db {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tones shared by action tiles and row icons */
.pp-tone-blue   { --tone: #2F6FED; --tone-soft: #EAF2FF; }
.pp-tone-violet { --tone: #7C5CFA; --tone-soft: #F1EDFF; }
.pp-tone-orange { --tone: #F08A00; --tone-soft: #FFF3E2; }
.pp-tone-green  { --tone: #12A150; --tone-soft: #E7F7EE; }
.pp-tone-slate  { --tone: #4A5A78; --tone-soft: #EEF2F8; }
.pp-tone-teal   { --tone: #0E9F9A; --tone-soft: #E3F7F6; }
.pp-tone-pink   { --tone: #E5484D; --tone-soft: #FDECEC; }

/* Hero */
.pp-db-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-radius: var(--pp-radius-lg);
    background:
            radial-gradient(600px 220px at 0% 0%, rgba(78, 157, 255, 0.35), transparent 70%),
            linear-gradient(135deg, var(--pp-navy-700) 0%, var(--pp-navy-800) 100%);
    color: #FFFFFF;
    box-shadow: var(--pp-shadow);
}

.pp-db-hero-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 220px;
}

.pp-db-hero-date {
    font-size: 12px;
    color: var(--pp-navy-text);
}

.pp-db-hero-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
}

.pp-db-hero-desc {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: var(--pp-navy-text);
}

.pp-db-hero-side {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pp-db-mini {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 190px;
    padding: 12px 16px;
    border-radius: var(--pp-radius);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pp-db-mini-label,
.pp-db-mini-meta,
.pp-db-muted {
    font-size: 11.5px;
    color: var(--pp-navy-text);
}

.pp-db-mini-value {
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pp-db-mini-value small {
    font-size: 11px;
    font-weight: 500;
    color: var(--pp-navy-text);
}

.pp-db-mini-value.pp-db-muted {
    font-size: 17px;
}

.pp-db-mini-warn {
    font-size: 11.5px;
    font-weight: 700;
    color: #FFB547;
}

.pp-db-mini-link {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--pp-accent);
    color: #FFFFFF !important;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}

/* Badges */
.pp-db-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.pp-db-badge-svg {
    width: 14px;
    height: 14px;
}

.pp-db-badge-success { background: var(--pp-success-soft); color: #0B7A3B; }
.pp-db-badge-danger  { background: var(--pp-danger-soft); color: #B42318; }
.pp-db-badge-warning { background: var(--pp-warning-soft); color: #9A5400; }
.pp-db-badge-gray    { background: #EEF2F8; color: var(--pp-text-2); }

/* Quick actions */
.pp-db-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.pp-db-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--pp-radius);
    border: 1px solid var(--pp-border);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-xs);
    color: var(--pp-text);
    text-decoration: none;
    transition: transform 0.18s var(--pp-ease), box-shadow 0.18s ease, border-color 0.18s ease;
}

.pp-db-action:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tone) 35%, transparent);
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--tone) 60%, transparent);
}

.pp-db-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--tone-soft);
    color: var(--tone);
}

.pp-db-action-svg {
    width: 22px;
    height: 22px;
}

.pp-db-action-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pp-db-action-label {
    font-size: 13px;
    font-weight: 700;
}

.pp-db-action-hint {
    font-size: 11.5px;
    color: var(--pp-text-muted);
}

/* Month stats */
.pp-db-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.pp-db-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: var(--pp-radius);
    border: 1px solid var(--pp-border);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-xs);
}

.pp-db-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-text-2);
}

.pp-db-stat-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--pp-text);
    font-variant-numeric: tabular-nums;
}

.pp-db-stat-value small {
    font-size: 11px;
    font-weight: 500;
    color: var(--pp-text-muted);
}

.pp-db-stat-meta {
    font-size: 11.5px;
    color: var(--pp-text-muted);
}

.pp-db-text-success { color: var(--pp-success); }
.pp-db-text-danger  { color: var(--pp-danger); }

.pp-db-progress {
    display: block;
    height: 6px;
    border-radius: 9999px;
    background: #EEF2F8;
    overflow: hidden;
}

.pp-db-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34C77B, var(--pp-success));
}

/* Latest sends */
.pp-db-card {
    border-radius: var(--pp-radius-lg);
    border: 1px solid var(--pp-border);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-xs);
    overflow: hidden;
}

.pp-db-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--pp-border);
}

.pp-db-card-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pp-text);
}

.pp-db-card-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--pp-primary) !important;
    text-decoration: none;
}

.pp-db-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #EEF2F8;
    color: var(--pp-text);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.pp-db-row:last-child {
    border-bottom: 0;
}

a.pp-db-row[href]:hover {
    background: var(--pp-primary-softer);
}

.pp-db-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--tone-soft);
    color: var(--tone);
}

.pp-db-row-svg {
    width: 18px;
    height: 18px;
}

.pp-db-row-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pp-db-row-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
}

.pp-db-row-meta {
    font-size: 11.5px;
    color: var(--pp-text-muted);
}

.pp-db-empty {
    padding: 32px 18px;
    text-align: center;
}

.pp-db-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 9999px;
    background: var(--pp-primary-soft);
    color: var(--pp-primary);
}

.pp-db-empty-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.pp-db-empty-desc {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--pp-text-muted);
}

@media (max-width: 640px) {
    .pp-db-hero { padding: 18px; }
    .pp-db-mini { min-width: 0; flex: 1; }
    .pp-db-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================== Dashboard: compact trend + latest sends ===================== */

.pp-db-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 64rem) {
    .pp-db-split {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        /* Both cards share the row height; the trend bars grow to fill it */
        align-items: stretch;
    }
}

.pp-db-trend-total {
    font-size: 12px;
    font-weight: 700;
    color: var(--pp-primary);
}

.pp-db-trend {
    display: flex;
    flex-direction: column;
}

.pp-db-trend-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px 18px 12px;
}

.pp-db-bars {
    display: flex;
    align-items: stretch;
    flex: 1;
    gap: 6px;
    min-height: 120px;
}

.pp-db-bar-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pp-db-bar-track {
    display: flex;
    flex: 1;
    align-items: flex-end;
    width: 100%;
    max-width: 18px;
    border-radius: 6px;
    background: var(--pp-surface-2);
}

.pp-db-bar {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(180deg, #5B8DFF 0%, var(--pp-primary) 100%);
    transition: filter 0.15s ease;
}

.pp-db-bar-failed {
    display: block;
    width: 100%;
    background: var(--pp-danger);
}

.pp-db-bar-empty {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: var(--pp-border);
}

.pp-db-bar-col:hover .pp-db-bar {
    filter: brightness(1.12);
}

.pp-db-bar-label {
    font-size: 10.5px;
    color: var(--pp-text-muted);
    font-variant-numeric: tabular-nums;
}

.pp-db-legend {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--pp-text-2);
}

.pp-db-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pp-db-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
}

.pp-db-dot-success { background: var(--pp-primary); }
.pp-db-dot-danger  { background: var(--pp-danger); }

/* ===================== Login page polish ===================== */

.fi-simple-main {
    max-width: 440px !important;
    padding: 2.25rem 2rem 2rem !important;
}

.fi-simple-header-heading {
    font-size: 18px !important;
}

/* Disabled mobile number in step 2 reads as a confirmed value, not a broken field */
.fi-simple-layout .fi-input-wrp:has(.login-mobile-input:disabled) {
    background: var(--pp-surface-2) !important;
    box-shadow: inset 0 0 0 1.5px var(--pp-border) !important;
}

.fi-simple-layout .login-mobile-input:disabled {
    color: var(--pp-text-2) !important;
    -webkit-text-fill-color: var(--pp-text-2);
    opacity: 1;
}

/* One full-width primary action */
.fi-simple-layout .login-submit-btn {
    min-height: 48px;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.fi-simple-layout .login-submit-btn .fi-icon {
    width: 20px;
    height: 20px;
}

/* Under the code boxes: where the code went + edit number + resend */
.pp-otp-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.pp-otp-sent {
    margin: 0;
    font-size: 12px;
    color: var(--pp-text-muted);
}

.pp-otp-sent span {
    color: var(--pp-text-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pp-otp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
}

.pp-otp-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--pp-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pp-otp-link:hover {
    background: var(--pp-surface-2);
    color: var(--pp-text);
}

.pp-otp-resend {
    background: var(--pp-primary-soft);
    color: var(--pp-primary);
}

.pp-otp-resend:hover {
    background: var(--pp-primary);
    color: #FFFFFF;
}

.pp-otp-resend > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pp-otp-link:disabled {
    opacity: 0.6;
    cursor: progress;
}

.pp-otp-svg {
    width: 16px;
    height: 16px;
}

.pp-otp-wait {
    font-size: 12px;
    color: var(--pp-text-muted);
}

.pp-otp-clock {
    display: inline-block;
    min-width: 42px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--pp-surface-2);
    color: var(--pp-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    direction: ltr;
}

/* Login method switch: "یا" divider + secondary outlined button under the form */
.fi-simple-layout .pp-login-switch {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fi-simple-layout .pp-login-switch::before {
    content: "یا";
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-text-muted);
    background:
            linear-gradient(var(--pp-border), var(--pp-border)) right center / calc(50% - 18px) 1px no-repeat,
            linear-gradient(var(--pp-border), var(--pp-border)) left center / calc(50% - 18px) 1px no-repeat;
}

.fi-simple-layout .login-switch-btn {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    background-color: var(--pp-surface) !important;
    color: var(--pp-text-2) !important;
    box-shadow: inset 0 0 0 1.5px var(--pp-border) !important;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fi-simple-layout .login-switch-btn:hover {
    background-color: var(--pp-primary-soft) !important;
    color: var(--pp-primary) !important;
    box-shadow: inset 0 0 0 1.5px var(--pp-primary) !important;
}

.fi-simple-layout .login-switch-btn .fi-icon {
    width: 18px;
    height: 18px;
    color: currentColor !important;
}

@media (max-width: 480px) {
    .fi-simple-main { padding: 1.75rem 1.25rem 1.5rem !important; }
}

/* ===================== SMS send pages (quick send + file send) =====================
   Prefix pp-sx-. Two columns: work area on the right, a sticky "ticket" on the left
   with preview, line, schedule and the estimate. Operator colors: pp-op-*.     */

.pp-sx {
    --pp-op-hamrah_avval: #14A9C9;
    --pp-op-irancell: #F2B200;
    --pp-op-rightel: #8B45E0;
    --pp-op-unknown: #9AA8BF;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--pp-text);
}

.pp-sx-ltr { direction: ltr; unicode-bidi: isolate; font-feature-settings: "tnum"; }
.pp-sx-muted { color: var(--pp-text-muted); font-size: 12px; }
.pp-sx-svg { width: 20px; height: 20px; }
.pp-sx [x-cloak] { display: none !important; }

/* Operator swatches */
.pp-op-hamrah_avval { --op: var(--pp-op-hamrah_avval); }
.pp-op-irancell { --op: var(--pp-op-irancell); }
.pp-op-rightel { --op: var(--pp-op-rightel); }
.pp-op-unknown { --op: var(--pp-op-unknown); }

/* ---------- Progress rail ---------- */
.pp-sx-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-sx-rail li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-xs);
    transition: border-color .25s var(--pp-ease), background-color .25s var(--pp-ease);
}

.pp-sx-rail li::after {
    content: "";
    position: absolute;
    inset-inline: 16px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--pp-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--pp-ease);
}

.pp-sx-rail li.is-done { border-color: #CFE0FF; background: linear-gradient(180deg, #FFFFFF 0%, var(--pp-primary-softer) 100%); }
.pp-sx-rail li.is-done::after { transform: scaleX(1); }

.pp-sx-rail-dot {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--pp-surface-2);
    border: 1px solid var(--pp-border);
    color: var(--pp-text-muted);
    font-weight: 800;
    font-size: 14px;
    transition: all .25s var(--pp-ease);
}

.pp-sx-rail-dot svg { position: absolute; width: 18px; height: 18px; opacity: 0; transform: scale(.4); transition: all .25s var(--pp-ease); }
.pp-sx-rail li.is-done .pp-sx-rail-dot { background: var(--pp-primary); border-color: var(--pp-primary); color: #FFF; box-shadow: var(--pp-shadow-primary); }
.pp-sx-rail li.is-done .pp-sx-rail-dot > span { opacity: 0; }
.pp-sx-rail li.is-done .pp-sx-rail-dot svg { opacity: 1; transform: scale(1); }

.pp-sx-rail-text { display: flex; flex-direction: column; min-width: 0; }
.pp-sx-rail-text b { font-size: 13.5px; font-weight: 700; }
.pp-sx-rail-text small { font-size: 11.5px; color: var(--pp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Layout ---------- */
.pp-sx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.pp-sx-main, .pp-sx-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pp-sx-side { position: sticky; top: 84px; }

/* ---------- Cards ---------- */
.pp-sx-card {
    border-radius: var(--pp-radius-lg);
    border: 1px solid var(--pp-border);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-xs);
    padding: 18px 20px;
}

.pp-sx-card.is-compact { padding: 16px; }
.pp-sx-card.is-attention { border-color: #FFD59A; box-shadow: 0 0 0 4px rgba(255, 150, 6, .08); }

.pp-sx-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pp-sx-card-heading { flex: 1; min-width: 0; }
.pp-sx-card-heading h3 { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pp-sx-card-heading p { margin: 3px 0 0; font-size: 12.5px; color: var(--pp-text-2); line-height: 1.8; }

.pp-sx-card-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--pp-primary-soft);
    color: var(--pp-primary);
}

.pp-sx-card-icon.is-accent { background: var(--pp-accent-soft); color: var(--pp-accent); }

.pp-sx-side-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--pp-text); }

.pp-sx-quota {
    flex: none;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--pp-surface-2);
    border: 1px solid var(--pp-border);
    font-size: 12px;
    color: var(--pp-text-muted);
    direction: ltr;
}

.pp-sx-quota b { color: var(--pp-text); font-weight: 800; }
.pp-sx-quota.is-full { background: var(--pp-warning-soft); border-color: #F7D9A3; color: var(--pp-warning); }

.pp-sx-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pp-surface-2);
    border: 1px solid var(--pp-border);
    color: var(--pp-text-2);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.pp-sx-tag.is-accent { background: var(--pp-accent-soft); border-color: #FFE0B3; color: #B86A00; }

.pp-sx-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--pp-primary);
    cursor: pointer;
}

.pp-sx-link:hover { text-decoration: underline; }
.pp-sx-link.is-danger { color: var(--pp-danger); }

/* ---------- Recipient chips ---------- */
.pp-sx-chipbox {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    min-height: 116px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px;
    border-radius: var(--pp-radius);
    border: 1.5px dashed var(--pp-border-strong);
    background:
            radial-gradient(circle at 1px 1px, rgba(47, 111, 237, .07) 1px, transparent 0) 0 0 / 14px 14px,
            var(--pp-surface-2);
    cursor: text;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.pp-sx-chipbox.is-focus { border-style: solid; border-color: var(--pp-primary); box-shadow: var(--pp-ring); background-color: #FFF; }

.pp-sx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 6px 0 10px;
    border-radius: 9px;
    background: #FFF;
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-xs);
    font-size: 12.5px;
    font-weight: 600;
    animation: pp-sx-pop .22s var(--pp-ease);
}

.pp-sx-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--op, var(--pp-op-unknown)); }
.pp-sx-chip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 6px; background: transparent; color: var(--pp-text-muted); cursor: pointer; }
.pp-sx-chip button:hover { background: var(--pp-danger-soft); color: var(--pp-danger); }
.pp-sx-chip button svg { width: 14px; height: 14px; }
.pp-sx-chip.is-bad { background: var(--pp-danger-soft); border-color: #F8C9CB; color: var(--pp-danger); text-decoration: line-through; text-decoration-color: rgba(229, 72, 77, .45); }
.pp-sx-chip.is-bad i { background: var(--pp-danger); }

.pp-sx-chip-input {
    flex: 1 0 140px;
    height: 30px;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 4px !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pp-text);
    text-align: left;
}

@keyframes pp-sx-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

.pp-sx-hintbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 12px; color: var(--pp-text-muted); }
.pp-sx-hint kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--pp-border-strong); border-bottom-width: 2px; background: #FFF; font-family: inherit; font-size: 11px; color: var(--pp-text-2); }
.pp-sx-hint-actions { display: flex; gap: 14px; margin-inline-start: auto; }
.pp-sx-flash { padding: 2px 10px; border-radius: 999px; background: var(--pp-primary-soft); color: var(--pp-primary); font-weight: 700; }

/* Operator split bar */
.pp-sx-ops { margin-top: 16px; padding-top: 14px; border-top: 1px solid #EEF2F8; }
.pp-sx-ops-bar { display: flex; gap: 3px; height: 10px; border-radius: 99px; overflow: hidden; background: var(--pp-surface-2); }
.pp-sx-ops-bar span { background: var(--op); border-radius: 99px; transition: width .4s var(--pp-ease); }
.pp-sx-ops-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--pp-text-2); }
.pp-sx-ops-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pp-sx-ops-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--op); }
.pp-sx-ops-legend b { color: var(--pp-text); font-weight: 800; }

.pp-sx-empty { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border-radius: var(--pp-radius); background: var(--pp-primary-softer); font-size: 12.5px; color: var(--pp-text-2); }
.pp-sx-empty p { margin: 0; }
.pp-sx-empty-art { display: flex; gap: 4px; flex: none; }
.pp-sx-empty-art span { width: 28px; height: 12px; border-radius: 5px; background: var(--op); opacity: .8; }
.pp-sx-empty-art span:nth-child(1) { --op: var(--pp-op-hamrah_avval); }
.pp-sx-empty-art span:nth-child(2) { --op: var(--pp-op-irancell); width: 20px; }
.pp-sx-empty-art span:nth-child(3) { --op: var(--pp-op-rightel); width: 14px; }

/* ---------- Message editor ---------- */
.pp-sx-editor { border-radius: var(--pp-radius); border: 1px solid var(--pp-border-strong); background: #FFF; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.pp-sx-editor:focus-within { border-color: var(--pp-primary); box-shadow: var(--pp-ring); }

.pp-sx-textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 14px 16px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    resize: vertical;
    background: transparent !important;
    font: inherit;
    font-size: 14px;
    line-height: 2;
    color: var(--pp-text);
}

.pp-sx-editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-top: 1px solid #EEF2F8; background: var(--pp-surface-2); }

.pp-sx-ring { position: relative; flex: none; width: 36px; height: 36px; }
.pp-sx-ring svg { width: 36px; height: 36px; transform: rotate(-90deg); }
.pp-sx-ring circle { fill: none; stroke-width: 3.2; }
.pp-sx-ring-track { stroke: var(--pp-border); }
.pp-sx-ring-fill { stroke: var(--pp-primary); stroke-linecap: round; stroke-dasharray: 97.4; transition: stroke-dashoffset .25s var(--pp-ease); }
.pp-sx-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--pp-primary); }

.pp-sx-meter { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--pp-text-2); }
.pp-sx-meter b { color: var(--pp-text); font-weight: 800; }
.pp-sx-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--pp-border-strong); }

.pp-sx-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--pp-text-2); cursor: pointer; user-select: none; }
.pp-sx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pp-sx-switch-ui { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--pp-border-strong); transition: background-color .2s ease; }
.pp-sx-switch-ui::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #FFF; box-shadow: var(--pp-shadow-xs); transition: transform .2s var(--pp-ease); }
.pp-sx-switch input:checked + .pp-sx-switch-ui { background: var(--pp-primary); }
.pp-sx-switch input:checked + .pp-sx-switch-ui::after { transform: translateX(-14px); }

/* ---------- Lock-screen preview ---------- */
.pp-sx-preview {
    position: relative;
    overflow: hidden;
    padding: 20px 16px 18px;
    border-radius: var(--pp-radius-lg);
    background:
            radial-gradient(260px 160px at 85% 0%, rgba(78, 157, 255, .55), transparent 70%),
            radial-gradient(220px 160px at 0% 100%, rgba(255, 150, 6, .28), transparent 70%),
            linear-gradient(160deg, var(--pp-navy-700), var(--pp-navy-900));
    box-shadow: var(--pp-shadow);
    color: #FFF;
}

.pp-sx-preview-clock { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.pp-sx-preview-clock b { font-size: 34px; font-weight: 300; letter-spacing: 1px; line-height: 1.2; }
.pp-sx-preview-clock small { font-size: 11px; color: var(--pp-navy-text); }

.pp-sx-notif { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); }
.pp-sx-notif-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.pp-sx-notif-head small { margin-inline-start: auto; color: var(--pp-navy-text); font-size: 11px; }
.pp-sx-notif-app { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--pp-brand); }
.pp-sx-notif-app .pp-sx-svg { width: 13px; height: 13px; }
.pp-sx-notif-body { margin: 0; max-height: 168px; overflow: auto; font-size: 13px; line-height: 1.9; white-space: pre-line; word-break: break-word; }
.pp-sx-notif-body.is-placeholder { color: var(--pp-navy-text); font-style: italic; }

/* ---------- Line picker ---------- */
.pp-sx-lines { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }

.pp-sx-line {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1.5px solid var(--pp-border);
    background: #FFF;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.pp-sx-line:hover { border-color: var(--pp-border-strong); }
.pp-sx-line input { position: absolute; opacity: 0; pointer-events: none; }
.pp-sx-line.is-active { border-color: var(--pp-primary); background: var(--pp-primary-softer); box-shadow: var(--pp-ring); }
.pp-sx-line-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pp-border-strong); transition: all .2s ease; }
.pp-sx-line.is-active .pp-sx-line-radio { border: 5px solid var(--pp-primary); }
.pp-sx-line-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pp-sx-line-text b { font-size: 13.5px; font-weight: 800; text-align: right; }
.pp-sx-line-text small { font-size: 11.5px; color: var(--pp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Schedule form: keep the Filament field compact inside the card */
.pp-sx-schedule .fi-sc { gap: 12px !important; }
.pp-sx-schedule .fi-fo-toggle-buttons, .pp-sx-schedule .fi-btn-group { width: 100%; }
.pp-sx-schedule .fi-btn-group > * { flex: 1; }

/* ---------- Ticket (estimate + send) ---------- */
.pp-sx-ticket {
    position: relative;
    padding: 16px 16px 18px;
    border-radius: var(--pp-radius-lg);
    background: #FFF;
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-sm);
}

.pp-sx-receipt { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-bottom: 14px; border-bottom: 1.5px dashed var(--pp-border-strong); }
.pp-sx-receipt > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.pp-sx-receipt dt { color: var(--pp-text-2); }
.pp-sx-receipt dd { margin: 0; font-weight: 800; color: var(--pp-text); }
.pp-sx-receipt > div.is-sub { padding-inline-start: 10px; font-size: 11.5px; }
.pp-sx-receipt > div.is-sub dt { color: var(--pp-text-muted); }
.pp-sx-receipt > div.is-sub dd { font-weight: 600; color: var(--pp-text-2); }

.pp-sx-total { position: relative; display: flex; align-items: baseline; justify-content: space-between; padding-top: 14px; }
.pp-sx-total span { font-size: 12.5px; color: var(--pp-text-2); font-weight: 600; }
.pp-sx-total b { font-size: 22px; font-weight: 900; color: var(--pp-accent); }
.pp-sx-total small { font-size: 12px; font-weight: 600; color: var(--pp-text-muted); }

/* Punched ticket edges on the dashed line */
.pp-sx-total::before, .pp-sx-total::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pp-bg);
    box-shadow: inset 0 0 0 1px var(--pp-border);
}

.pp-sx-total::before { right: -26px; }
.pp-sx-total::after { left: -26px; }

.pp-sx-note { margin: 6px 0 14px; font-size: 11px; color: var(--pp-text-muted); line-height: 1.8; }

.pp-sx-send {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pp-brand) 0%, var(--pp-primary) 55%, var(--pp-primary-hover) 100%);
    color: #FFF;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    box-shadow: var(--pp-shadow-primary);
    cursor: pointer;
    transition: transform .15s var(--pp-ease), box-shadow .15s ease, opacity .15s ease;
}

.pp-sx-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(47, 111, 237, .55); }
.pp-sx-send:hover:not(:disabled) .pp-sx-send-icon { transform: scaleX(-1) translateX(4px) rotate(12deg); }
.pp-sx-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pp-sx-send-icon { width: 18px; height: 18px; transform: scaleX(-1); transition: transform .25s var(--pp-ease); }

.pp-sx-test {
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    border: 1px dashed var(--pp-border-strong);
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pp-text-2);
    cursor: pointer;
}

.pp-sx-test:hover:not(:disabled) { border-color: var(--pp-primary); color: var(--pp-primary); background: var(--pp-primary-softer); }
.pp-sx-test:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- File send ---------- */
.pp-sx-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.pp-sx-format { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--pp-radius); background: #FFF; border: 1px solid var(--pp-border); box-shadow: var(--pp-shadow-xs); }
.pp-sx-format-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-sx-format-body b { font-size: 13px; font-weight: 800; }
.pp-sx-format-body code { align-self: flex-start; max-width: 100%; padding: 2px 8px; border-radius: 6px; background: var(--pp-surface-2); border: 1px solid var(--pp-border); font-size: 11.5px; color: var(--pp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sx-format-body code em { font-style: normal; color: var(--pp-primary); padding: 0 4px; }
.pp-sx-format-body small { font-size: 11px; color: var(--pp-text-muted); }

.pp-sx-format-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 52px;
    border-radius: 8px 14px 8px 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
    color: #FFF;
    background: var(--pp-text-muted);
    box-shadow: inset 0 -14px 0 rgba(0, 0, 0, .08);
}

.pp-sx-format-badge.is-txt { background: linear-gradient(160deg, #6B7C99, #4A5A78); }
.pp-sx-format-badge.is-csv { background: linear-gradient(160deg, #3D8BFF, var(--pp-primary)); }
.pp-sx-format-badge.is-xlsx { background: linear-gradient(160deg, #22B66B, #128A4F); }

.pp-sx-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 46px 24px;
    border-radius: var(--pp-radius-lg);
    border: 2px dashed var(--pp-border-strong);
    background:
            radial-gradient(420px 180px at 50% 0%, rgba(47, 111, 237, .08), transparent 70%),
            #FFF;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, transform .2s var(--pp-ease);
}

.pp-sx-drop:hover, .pp-sx-drop.is-over { border-color: var(--pp-primary); background-color: var(--pp-primary-softer); }
.pp-sx-drop.is-over { transform: scale(1.01); }
.pp-sx-drop-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pp-sx-drop-title { font-size: 16px; font-weight: 800; }
.pp-sx-drop-desc { font-size: 12.5px; color: var(--pp-text-muted); }
.pp-sx-drop-busy { font-size: 12.5px; font-weight: 700; color: var(--pp-primary); }

.pp-sx-drop-art { position: relative; width: 84px; height: 76px; margin-bottom: 6px; }
.pp-sx-drop-art span { position: absolute; display: grid; place-items: center; width: 56px; height: 66px; border-radius: 10px 18px 10px 10px; }
.pp-sx-drop-art .is-back { right: 4px; top: 6px; background: var(--pp-accent-soft); border: 1px solid #FFE0B3; transform: rotate(10deg); }
.pp-sx-drop-art .is-front { left: 4px; top: 0; background: linear-gradient(160deg, var(--pp-brand), var(--pp-primary)); color: #FFF; box-shadow: var(--pp-shadow-primary); transform: rotate(-6deg); transition: transform .3s var(--pp-ease); }
.pp-sx-drop:hover .pp-sx-drop-art .is-front { transform: rotate(0) translateY(-4px); }
.pp-sx-drop-art .pp-sx-svg { width: 26px; height: 26px; }

.pp-sx-drop-progress { width: min(280px, 80%); height: 6px; margin-top: 6px; border-radius: 99px; background: var(--pp-border); overflow: hidden; }
.pp-sx-drop-progress span { display: block; height: 100%; background: var(--pp-primary); transition: width .2s ease; }

.pp-sx-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pp-sx-file-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pp-sx-file-text b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sx-file-text small { font-size: 12px; color: var(--pp-text-muted); }

.pp-sx-btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--pp-border); border-radius: 10px; background: #FFF; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--pp-text-2); cursor: pointer; }
.pp-sx-btn-ghost svg { width: 16px; height: 16px; }
.pp-sx-btn-ghost:hover { border-color: var(--pp-primary); color: var(--pp-primary); }
.pp-sx-btn-ghost.is-danger:hover { border-color: var(--pp-danger); color: var(--pp-danger); }

.pp-sx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; transition: opacity .2s ease; }
.pp-sx-stats.is-loading { opacity: .5; }
.pp-sx-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--pp-radius); background: var(--pp-surface-2); border: 1px solid var(--pp-border); }
.pp-sx-stat small { font-size: 11.5px; color: var(--pp-text-muted); font-weight: 600; }
.pp-sx-stat b { font-size: 22px; font-weight: 900; line-height: 1.4; }
.pp-sx-stat span { font-size: 11px; color: var(--pp-text-muted); }
.pp-sx-stat.is-primary { background: var(--pp-primary-soft); border-color: #CFE0FF; }
.pp-sx-stat.is-primary b { color: var(--pp-primary); }
.pp-sx-stat.is-danger b { color: var(--pp-danger); }
.pp-sx-stat.is-warning b { color: var(--pp-warning); }

.pp-sx-threads { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pp-sx-threads li { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EEF2F8; }
.pp-sx-threads li:last-child { border-bottom: 0; }
.pp-sx-thread-who { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.pp-sx-thread-who i { grid-row: span 2; width: 8px; height: 30px; border-radius: 4px; background: var(--op); }
.pp-sx-thread-who b { font-size: 13px; font-weight: 800; text-align: right; }
.pp-sx-thread-who small { font-size: 11px; color: var(--pp-text-muted); }

.pp-sx-bubble { margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--pp-primary-softer); border: 1px solid #DCE8FF; font-size: 12.5px; line-height: 1.9; white-space: pre-line; word-break: break-word; }

.pp-sx-issues { padding: 0; overflow: hidden; }
.pp-sx-issues summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--pp-danger); list-style: none; }
.pp-sx-issues summary::-webkit-details-marker { display: none; }
.pp-sx-issues summary svg { width: 18px; height: 18px; }
.pp-sx-issues summary small { margin-inline-start: auto; font-size: 12px; font-weight: 700; color: var(--pp-primary); }
.pp-sx-issues[open] summary small { visibility: hidden; }
.pp-sx-issues ul { margin: 0; padding: 0 18px 12px; list-style: none; max-height: 280px; overflow-y: auto; }
.pp-sx-issues li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #F3E3E4; font-size: 12.5px; }
.pp-sx-issues li > span:last-child { color: var(--pp-text-muted); margin-inline-start: auto; }
.pp-sx-issues .pp-sx-muted { padding: 0 18px 14px; margin: 0; }

.pp-sx-alert { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--pp-radius); background: var(--pp-danger-soft); border: 1px solid #F8C9CB; color: var(--pp-danger); font-size: 13px; font-weight: 700; }
.pp-sx-alert svg { width: 18px; height: 18px; flex: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .pp-sx-grid { grid-template-columns: minmax(0, 1fr) 320px; }
    .pp-sx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .pp-sx-grid { grid-template-columns: minmax(0, 1fr); }
    .pp-sx-side { position: static; }
    .pp-sx-formats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .pp-sx-rail { grid-template-columns: minmax(0, 1fr); }
    .pp-sx-card { padding: 16px; }
    .pp-sx-threads li { grid-template-columns: minmax(0, 1fr); }
}

/* ===================== Direct to Bale page (pp-bl-*) =====================
   Reuses the pp-sx-* composer; adds Bale-green accents and a chat preview. */

.pp-bl { --pp-bale: #00A884; --pp-bale-dark: #00806A; --pp-bale-soft: #E6F7F2; }
.pp-op-bale { --op: var(--pp-bale, #00A884); }
.pp-sx-card-icon.is-bale { background: var(--pp-bale-soft); color: var(--pp-bale); }

.pp-bl-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: 16px 20px;
    border-radius: var(--pp-radius-lg);
    background:
            radial-gradient(320px 140px at 100% 0%, rgba(0, 168, 132, .18), transparent 70%),
            linear-gradient(135deg, #FFFFFF, var(--pp-bale-soft));
    border: 1px solid #CDEDE3;
}

.pp-bl-hero-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--pp-bale); color: #FFF; box-shadow: 0 8px 18px -8px rgba(0, 168, 132, .7); }
.pp-bl-hero-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.pp-bl-hero-text b { font-size: 14.5px; font-weight: 800; }
.pp-bl-hero-text small { font-size: 12.5px; color: var(--pp-text-2); line-height: 1.8; }
.pp-bl-hero-facts { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pp-bl-hero-facts li { display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 8px 12px; border-radius: 12px; background: #FFF; border: 1px solid #CDEDE3; }
.pp-bl-hero-facts b { font-size: 17px; font-weight: 900; color: var(--pp-bale-dark); direction: ltr; }
.pp-bl-hero-facts small { font-size: 11px; color: var(--pp-text-muted); }

.pp-bl-meter { flex: 0 0 160px; height: 6px; border-radius: 99px; background: var(--pp-border); overflow: hidden; }
.pp-bl-meter span { display: block; height: 100%; background: var(--pp-bale); border-radius: 99px; transition: width .2s ease; }
.pp-bl-meter span.is-over { background: var(--pp-danger); }

/* Chat preview */
.pp-bl-chat { overflow: hidden; border-radius: var(--pp-radius-lg); border: 1px solid var(--pp-border); box-shadow: var(--pp-shadow-sm); background: #FFF; }
.pp-bl-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--pp-bale); color: #FFF; }
.pp-bl-chat-head b { display: block; font-size: 13.5px; font-weight: 800; }
.pp-bl-chat-head small { font-size: 11px; opacity: .85; }
.pp-bl-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .22); font-weight: 900; }
.pp-bl-chat-body {
    min-height: 170px;
    padding: 16px 14px;
    background:
            radial-gradient(circle at 10px 10px, rgba(0, 168, 132, .08) 2px, transparent 0) 0 0 / 22px 22px,
            #F1F6F4;
}

.pp-bl-bubble { max-width: 92%; padding: 10px 12px 6px; border-radius: 14px 14px 4px 14px; background: #FFF; box-shadow: 0 1px 2px rgba(20, 33, 61, .08); }
.pp-bl-bubble p { margin: 0; max-height: 220px; overflow: auto; font-size: 13px; line-height: 1.9; white-space: pre-line; word-break: break-word; }
.pp-bl-bubble small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--pp-text-muted); text-align: left; }
.pp-bl-bubble.is-placeholder p { color: var(--pp-text-muted); font-style: italic; }

.pp-bl-total { color: var(--pp-bale) !important; }
.pp-bl-send { background: linear-gradient(135deg, #1FC79F 0%, var(--pp-bale) 55%, var(--pp-bale-dark) 100%); box-shadow: 0 6px 16px -4px rgba(0, 168, 132, .5); }
.pp-bl-send:hover:not(:disabled) { box-shadow: 0 10px 22px -6px rgba(0, 168, 132, .6); }

/* ===================== Table filters: trigger button + dropdown =====================
   Own look instead of Filament's grey funnel: soft blue chip, orange count badge,
   and a dropdown with a tinted header. */

.fi-ta-filters-trigger-action-ctn .fi-icon-btn,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: var(--pp-primary-soft) !important;
    border: 1px solid #CFE0FF !important;
    color: var(--pp-primary) !important;
    box-shadow: none !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s var(--pp-ease);
}

.fi-ta-filters-trigger-action-ctn .fi-icon-btn:hover,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn:hover,
.fi-ta-filters-dropdown > .fi-dropdown-trigger[aria-expanded="true"] .fi-icon-btn {
    background: var(--pp-primary) !important;
    border-color: var(--pp-primary) !important;
    color: #FFFFFF !important;
    box-shadow: var(--pp-shadow-primary) !important;
}

.fi-ta-filters-trigger-action-ctn .fi-icon-btn .fi-icon,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn .fi-icon {
    width: 20px !important;
    height: 20px !important;
    color: currentColor !important;
}

/* Active filter count */
.fi-ta-filters-trigger-action-ctn .fi-icon-btn-badge-ctn,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn-badge-ctn {
    top: -7px !important;
    inset-inline-start: -7px !important;
    inset-inline-end: auto !important;
    transform: none !important;
}

.fi-ta-filters-trigger-action-ctn .fi-icon-btn-badge-ctn .fi-badge,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn-badge-ctn .fi-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px !important;
    line-height: 18px !important;
    border-radius: 99px !important;
    background: var(--pp-accent) !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 2px var(--pp-surface) !important;
}

/* Dropdown panel */
.fi-ta-filters-dropdown .fi-dropdown-panel {
    overflow: hidden;
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1px solid var(--pp-border) !important;
    box-shadow: var(--pp-shadow-lg) !important;
}

.fi-ta-filters-dropdown .fi-ta-filters {
    padding: 0 !important;
    gap: 0 !important;
}

.fi-ta-filters-dropdown .fi-ta-filters-header {
    padding: 14px 16px !important;
    background: linear-gradient(180deg, var(--pp-primary-softer), #FFFFFF);
    border-bottom: 1px solid var(--pp-border);
}

.fi-ta-filters-dropdown .fi-ta-filters-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--pp-text) !important;
}

.fi-ta-filters-dropdown .fi-ta-filters-heading::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--pp-primary);
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .15);
}

.fi-ta-filters-dropdown .fi-ta-filters > :not(.fi-ta-filters-header):not(.fi-ta-filters-actions-ctn) {
    padding: 14px 16px 4px !important;
}

.fi-ta-filters-dropdown .fi-ta-filters-actions-ctn {
    padding: 12px 16px 16px !important;
    border-top: 1px dashed var(--pp-border-strong);
}

.fi-ta-filters-dropdown .fi-ta-filters-actions-ctn .fi-btn {
    width: 100%;
    justify-content: center;
}

/* ===================== New campaign modal (pp-cm-*) =====================
   Gradient header, roomy body and a live preview card beside the form. */

.pp-cm-modal {
    overflow: hidden;
    border-radius: 22px !important;
    box-shadow: 0 30px 80px -20px rgba(11, 20, 40, .45) !important;
}

.pp-cm-modal .fi-modal-header {
    position: relative;
    padding: 22px 26px 20px !important;
    background:
            radial-gradient(420px 160px at 0% 0%, rgba(78, 157, 255, .45), transparent 70%),
            radial-gradient(300px 140px at 100% 100%, rgba(255, 150, 6, .22), transparent 70%),
            linear-gradient(135deg, var(--pp-navy-700), var(--pp-navy-800)) !important;
    border-bottom: 0 !important;
}

.pp-cm-modal .fi-modal-heading { color: #FFFFFF !important; font-size: 18px !important; font-weight: 800 !important; }
.pp-cm-modal .fi-modal-description { color: var(--pp-navy-text) !important; font-size: 12.5px !important; line-height: 1.9 !important; }
.pp-cm-modal .fi-modal-icon-bg { background: rgba(255, 255, 255, .14) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pp-cm-modal .fi-modal-icon-bg .fi-icon { color: #FFFFFF !important; }
.pp-cm-modal .fi-modal-close-btn { color: rgba(255, 255, 255, .8) !important; }
.pp-cm-modal .fi-modal-close-btn:hover { color: #FFFFFF !important; background: rgba(255, 255, 255, .12) !important; }

.pp-cm-modal .fi-modal-content { padding: 22px 26px !important; background: var(--pp-surface-2) !important; }

.pp-cm-modal .fi-modal-footer {
    padding: 14px 26px 18px !important;
    background: #FFFFFF !important;
    border-top: 1px solid var(--pp-border) !important;
}

.pp-cm-modal .fi-modal-footer .fi-btn.fi-color-primary {
    min-height: 44px;
    padding-inline: 22px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--pp-brand) 0%, var(--pp-primary) 60%, var(--pp-primary-hover) 100%) !important;
    box-shadow: var(--pp-shadow-primary) !important;
}

/* ---------- Preview card ---------- */
.pp-cm-preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }

.pp-cm-phone { overflow: hidden; border-radius: 18px; border: 1px solid var(--pp-border); background: #FFFFFF; box-shadow: var(--pp-shadow-sm); }
.pp-cm-phone-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid #EEF2F8; font-size: 12.5px; }
.pp-cm-phone-head b { font-weight: 800; }
.pp-cm-phone-head small { margin-inline-start: auto; color: var(--pp-text-muted); font-size: 11px; }
.pp-cm-phone-dot { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(160deg, var(--pp-brand), var(--pp-primary)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); }
.pp-cm-phone-body {
    min-height: 150px;
    max-height: 260px;
    overflow: auto;
    padding: 14px;
    background: radial-gradient(circle at 1px 1px, rgba(47, 111, 237, .08) 1px, transparent 0) 0 0 / 14px 14px, var(--pp-primary-softer);
}

.pp-cm-bubble { margin: 0; max-width: 92%; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: #FFFFFF; border: 1px solid #DCE8FF; font-size: 13px; line-height: 1.95; white-space: pre-line; word-break: break-word; }
.pp-cm-bubble.is-empty { color: var(--pp-text-muted); font-style: italic; }

.pp-cm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.pp-cm-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--pp-border); }
.pp-cm-stats dt { font-size: 11.5px; font-weight: 600; color: var(--pp-text-muted); }
.pp-cm-stats dd { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.4; color: var(--pp-text); }
.pp-cm-stats dd span { font-size: 12px; font-weight: 600; color: var(--pp-text-muted); }
.pp-cm-stats small { font-size: 11px; color: var(--pp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-cm-stats > div.is-primary { background: var(--pp-primary-soft); border-color: #CFE0FF; }
.pp-cm-stats > div.is-primary dd { color: var(--pp-primary); }

.pp-cm-cost { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--pp-accent-soft); border: 1px dashed #FFCE8A; }
.pp-cm-cost span { font-size: 12.5px; font-weight: 700; color: #B86A00; }
.pp-cm-cost b { font-size: 18px; font-weight: 900; color: var(--pp-accent); }
.pp-cm-cost small { font-size: 11.5px; font-weight: 600; color: #B86A00; }

.pp-cm-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pp-cm-steps li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pp-text-2); }
.pp-cm-steps i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; background: #FFFFFF; border: 1px solid var(--pp-border); font-style: normal; font-size: 11px; font-weight: 800; color: var(--pp-text-muted); }
.pp-cm-steps li.is-done i { background: var(--pp-primary); border-color: var(--pp-primary); color: #FFFFFF; }
.pp-cm-note { margin: 0; font-size: 11px; line-height: 1.9; color: var(--pp-text-muted); }

@media (max-width: 1023px) {
    .pp-cm-preview { position: static; }
}

/* ===================== Customer tickets (creators-ticketing override, pp-tk-*) ===================== */

.pp-tk-icon { flex: none; }

/* Tabs: icon and label side by side with a real gap (RTL safe) */
.pp-tk-tab {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-inline-end: 22px;
}

.pp-tk-tab .pp-tk-icon { width: 20px; height: 20px; }

/* Empty state "new ticket" button */
.pp-tk-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 28px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--pp-brand) 0%, var(--pp-primary) 60%, var(--pp-primary-hover) 100%) !important;
    box-shadow: var(--pp-shadow-primary) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    transition: transform .15s var(--pp-ease), box-shadow .15s ease !important;
}

.pp-tk-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(47, 111, 237, .55) !important; }

.pp-tk-cta .pp-tk-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .2);
    box-sizing: content-box;
}

/* Selects: arrow on the left in RTL, text keeps clear of it */
.pp-tk-select {
    padding-inline-start: 12px !important;
    padding-inline-end: 40px !important;
    border-radius: 12px !important;
    min-height: 44px;
    background-image: none !important;
}

[dir="rtl"] .pp-tk-select { padding-right: 12px !important; padding-left: 40px !important; }

.pp-tk-select-arrow { color: var(--pp-text-muted) !important; }
.pp-tk-select-arrow .pp-tk-icon { width: 18px !important; height: 18px !important; }

/* Wallet line under the send estimate (customers) */
.pp-sx-wallet { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 10px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--pp-success-soft); font-size: 12.5px; }
.pp-sx-wallet span { color: var(--pp-text-2); }
.pp-sx-wallet b { font-weight: 800; color: var(--pp-success); }
.pp-sx-wallet small { flex-basis: 100%; font-size: 11.5px; font-weight: 700; color: var(--pp-danger); }
.pp-sx-wallet.is-short { background: var(--pp-danger-soft); }
.pp-sx-wallet.is-short b { color: var(--pp-danger); }
.pp-sx-ticket .pp-sx-send { margin-top: 14px; }
.pp-sx-ticket .pp-sx-wallet { margin-bottom: 0; }

/* Info icon after the approximate SMS count (tooltip explains the estimate) */
.pp-balance-chip-sms { display: inline-flex; align-items: center; gap: 4px; }
.pp-balance-chip-hint { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--pp-primary); background: var(--pp-primary-soft); cursor: help; transition: background-color .15s ease, color .15s ease; }
.pp-balance-chip-hint:hover, .pp-balance-chip-hint:focus-visible { background: var(--pp-primary); color: #FFFFFF; outline: none; }
.pp-balance-chip-hint-svg { width: 14px; height: 14px; }

/* Dashboard shortcuts: tones for the send / club items, two even rows of five on desktop */
.pp-tone-indigo { --tone: #4F46E5; --tone-soft: #EEF0FF; }
.pp-tone-cyan   { --tone: #0891B2; --tone-soft: #E2F6FB; }
.pp-tone-rose   { --tone: #DB2777; --tone-soft: #FDECF4; }

@media (min-width: 1280px) {
    .pp-db-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Row pill buttons: green / red variants (campaign approve / reject) */
.fi-ta-ctn .fi-btn.pp-report-btn.is-success { background: var(--pp-success-soft) !important; color: var(--pp-success) !important; box-shadow: inset 0 0 0 1px rgba(18, 161, 80, .2) !important; }
.fi-ta-ctn .fi-btn.pp-report-btn.is-success:hover { background: var(--pp-success) !important; color: #FFFFFF !important; box-shadow: 0 6px 16px -4px rgba(18, 161, 80, .45) !important; }
.fi-ta-ctn .fi-btn.pp-report-btn.is-danger { background: var(--pp-danger-soft) !important; color: var(--pp-danger) !important; box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .2) !important; }
.fi-ta-ctn .fi-btn.pp-report-btn.is-danger:hover { background: var(--pp-danger) !important; color: #FFFFFF !important; box-shadow: 0 6px 16px -4px rgba(229, 72, 77, .45) !important; }

/* ===================== Announcements (bell, pinned banner, customer page) ===================== */

/* Tones: set --tone / --tone-soft for every announcement piece */
.pp-ann-tone-info    { --tone: #2F6FED; --tone-soft: #EAF2FF; }
.pp-ann-tone-tariff  { --tone: #F08A00; --tone-soft: #FFF3E2; }
.pp-ann-tone-warning { --tone: #E5484D; --tone-soft: #FDECEC; }
.pp-ann-tone-success { --tone: #12A150; --tone-soft: #E7F7EE; }

/* Topbar bell */
.pp-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-inline-end: 8px;
    border-radius: 9999px;
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    color: var(--pp-text-2) !important;
    transition: transform .15s var(--pp-ease), border-color .15s ease, color .15s ease;
}
.pp-bell-btn:hover { transform: translateY(-1px); border-color: var(--pp-border-strong); color: var(--pp-primary) !important; }
.pp-bell-btn-svg { width: 19px; height: 19px; }
.pp-bell-btn.has-unread { color: var(--pp-accent) !important; border-color: rgba(255, 150, 6, .35); }
.pp-bell-btn.has-unread .pp-bell-btn-svg { animation: pp-bell-ring 2.6s var(--pp-ease) infinite; transform-origin: 50% 8%; }
.pp-bell-badge {
    position: absolute;
    top: -5px;
    inset-inline-start: -5px;
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    border-radius: 9999px;
    background: var(--pp-danger);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--pp-surface);
}
@keyframes pp-bell-ring {
    0%, 70%, 100% { transform: rotate(0); }
    74% { transform: rotate(14deg); }
    80% { transform: rotate(-12deg); }
    86% { transform: rotate(8deg); }
    92% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pp-bell-btn.has-unread .pp-bell-btn-svg { animation: none; }
}

/* Pinned banner above the page content */
.pp-ann-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--pp-radius);
    background: linear-gradient(90deg, var(--tone-soft) 0%, var(--pp-surface) 100%);
    border: 1px solid color-mix(in srgb, var(--tone) 25%, transparent);
    box-shadow: var(--pp-shadow-sm);
}
.pp-ann-banner-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--tone);
    color: #FFFFFF;
}
.pp-ann-banner-icon svg { width: 18px; height: 18px; }
.pp-ann-banner-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.pp-ann-banner-text b { font-size: 13.5px; font-weight: 800; color: var(--pp-text); }
.pp-ann-banner-text span { font-size: 12px; color: var(--pp-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ann-banner-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--tone);
    color: #FFFFFF !important;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.pp-ann-banner-close { flex-shrink: 0; padding: 6px; border-radius: 8px; color: var(--pp-text-muted); }
.pp-ann-banner-close:hover { background: rgba(20, 33, 61, .06); color: var(--pp-text); }
.pp-ann-banner-close svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
    .pp-ann-banner { flex-wrap: wrap; }
    .pp-ann-banner-text span { white-space: normal; }
    .pp-ann-banner-btn { flex: 1; text-align: center; }
}

/* Customer page: list + reading pane */
.pp-ann {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (min-width: 1024px) {
    .pp-ann { grid-template-columns: 360px minmax(0, 1fr); }
    .pp-ann-list { position: sticky; top: 84px; }
}

.pp-ann-list {
    overflow: hidden;
    border-radius: var(--pp-radius-lg);
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-sm);
}
.pp-ann-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pp-border);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--pp-text);
}
.pp-ann-list-head em {
    margin-inline-start: 6px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--pp-accent-soft);
    color: var(--pp-accent-hover);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}
.pp-ann-mark-all { font-size: 12px; font-weight: 700; color: var(--pp-primary); }
.pp-ann-mark-all:hover { text-decoration: underline; }
.pp-ann-list ul { max-height: calc(100vh - 220px); overflow-y: auto; }

.pp-ann-item {
    position: relative;
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    text-align: start;
    border-bottom: 1px solid var(--pp-border);
    transition: background .15s ease;
}
.pp-ann-list li:last-child .pp-ann-item { border-bottom: 0; }
.pp-ann-item:hover { background: var(--pp-surface-2); }
.pp-ann-item.is-active { background: var(--tone-soft); }
.pp-ann-item.is-active::before {
    content: "";
    position: absolute;
    inset-block: 10px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 9999px;
    background: var(--tone);
}
.pp-ann-item-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--tone-soft);
    color: var(--tone);
}
.pp-ann-item.is-active .pp-ann-item-icon { background: var(--tone); color: #FFFFFF; }
.pp-ann-item-icon svg { width: 18px; height: 18px; }
.pp-ann-item-body { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.pp-ann-item-top { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--pp-text-muted); }
.pp-ann-item-top time { margin-inline-start: auto; }
.pp-ann-item-title { font-size: 13px; font-weight: 700; color: var(--pp-text-2); line-height: 1.7; }
.pp-ann-item.is-unread .pp-ann-item-title { font-weight: 800; color: var(--pp-text); }
.pp-ann-item-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 1.8;
    color: var(--pp-text-muted);
}
.pp-ann-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 9999px;
    background: transparent;
}
.pp-ann-item.is-unread .pp-ann-dot { background: var(--pp-accent); box-shadow: 0 0 0 3px rgba(255, 150, 6, .18); }

.pp-ann-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--tone-soft);
    color: var(--tone);
    font-size: 10.5px;
    font-weight: 800;
}
.pp-ann-pin { font-size: 10.5px; font-weight: 700; color: var(--pp-text-2); }

/* Reading pane */
.pp-ann-reader {
    overflow: hidden;
    border-radius: var(--pp-radius-lg);
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow);
    scroll-margin-top: 84px;
}
.pp-ann-hero {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 26px 26px 24px;
    background:
            radial-gradient(520px 200px at 0% 0%, color-mix(in srgb, var(--tone) 45%, transparent), transparent 70%),
            linear-gradient(135deg, var(--pp-navy-700) 0%, var(--pp-navy-800) 100%);
    color: #FFFFFF;
}
.pp-ann-hero-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--tone);
    box-shadow: 0 10px 24px -8px var(--tone);
}
.pp-ann-hero-icon svg { width: 24px; height: 24px; }
.pp-ann-hero-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--pp-navy-text); }
.pp-ann-hero .pp-ann-chip { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.pp-ann-hero h2 { margin: 8px 0 0; font-size: 20px; font-weight: 800; line-height: 1.6; }
.pp-ann-hero p { margin: 6px 0 0; font-size: 13px; line-height: 1.9; color: var(--pp-navy-text); }

.pp-ann-content {
    padding: 24px 26px;
    font-size: 14px;
    line-height: 2.1;
    color: var(--pp-text);
}
.pp-ann-content > * + * { margin-top: 12px; }
.pp-ann-content h2 { font-size: 17px; font-weight: 800; }
.pp-ann-content h3 { font-size: 15px; font-weight: 800; }
.pp-ann-content a { color: var(--pp-primary); text-decoration: underline; }
.pp-ann-content ul { list-style: disc; padding-inline-start: 22px; }
.pp-ann-content ol { list-style: decimal; padding-inline-start: 22px; }
.pp-ann-content blockquote {
    padding: 12px 16px;
    border-inline-start: 3px solid var(--tone);
    border-radius: 10px;
    background: var(--tone-soft);
    color: var(--pp-text-2);
}
.pp-ann-content table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--pp-border); border-radius: 12px; font-size: 13px; }
.pp-ann-content th { background: var(--pp-surface-2); font-weight: 800; }
.pp-ann-content th,
.pp-ann-content td { padding: 9px 12px; border-bottom: 1px solid var(--pp-border); text-align: start; }
.pp-ann-content tr:last-child td { border-bottom: 0; }
.pp-ann-content p:empty { display: none; }

.pp-ann-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 26px;
    border-top: 1px dashed var(--pp-border-strong);
    background: var(--pp-surface-2);
    font-size: 12.5px;
    color: var(--pp-text-2);
}
.pp-ann-foot-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--pp-primary);
    color: #FFFFFF !important;
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--pp-shadow-primary);
}
.pp-ann-foot-btn svg { width: 16px; height: 16px; }

.pp-ann-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 20px;
    border: 1px dashed var(--pp-border-strong);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-surface);
    text-align: center;
    color: var(--pp-text-2);
    font-size: 13px;
}
.pp-ann-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border-radius: 18px;
    background: var(--pp-primary-soft);
    color: var(--pp-primary);
}
.pp-ann-empty-icon svg { width: 26px; height: 26px; }
.pp-ann-empty b { font-size: 15px; color: var(--pp-text); }
.pp-ann-empty p { margin: 0; max-width: 360px; line-height: 1.9; }

@media (max-width: 640px) {
    .pp-ann-hero { padding: 20px 18px; flex-direction: column; gap: 12px; }
    .pp-ann-hero h2 { font-size: 17px; }
    .pp-ann-content { padding: 18px; }
    .pp-ann-foot { padding: 14px 18px; }
    .pp-ann-list ul { max-height: none; }
}

/* ===================== Main action buttons ===================== */
/* Create / send / save buttons (page header, form submit, modal submit): one size, always with an icon */
.fi-header-actions-ctn .fi-btn,
.fi-btn.pp-main-btn,
.fi-modal-footer .fi-btn.fi-color-primary {
    min-height: 2.75rem !important;
    min-width: 9.5rem;
    padding-inline: 1.35rem !important;
    justify-content: center;
    gap: .5rem !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
}

.fi-header-actions-ctn .fi-btn .fi-icon,
.fi-btn.pp-main-btn .fi-icon,
.fi-modal-footer .fi-btn.fi-color-primary .fi-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.fi-header-actions-ctn .fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn.pp-main-btn.fi-color-primary:not(.fi-outlined):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(47, 111, 224, .55) !important;
}

@media (max-width: 640px) {
    .fi-header-actions-ctn .fi-btn,
    .fi-btn.pp-main-btn {
        min-width: 0;
        flex: 1 1 auto;
    }
}