/* =====================================================
   DASHBOARD (clientareahome) - matches React DashboardView
===================================================== */

.app-dash {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---------- اطلاعیه‌های بنری (از ماژول مدیریت می‌شن) ---------- */
.ob-announce-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .9rem 1.25rem;
    border-radius: var(--app-radius-md);
    border: 1px solid;
    font-size: .82rem;
}
.ob-announce-text strong {
    margin-left: .5rem;
    font-weight: 800;
}
.ob-announce-text img {
    max-width: 100%;
    height: auto;
    max-height: 60px;
    vertical-align: middle;
    border-radius: .4rem;
}
.ob-announce-btn {
    padding: .45rem 1rem;
    border-radius: .6rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    color: #fff !important;
}
.ob-announce-info { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.3); color: #93c5fd; }
.ob-announce-info .ob-announce-btn { background: var(--app-accent); }
.ob-announce-success { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); color: #6ee7b7; }
.ob-announce-success .ob-announce-btn { background: #059669; }
.ob-announce-warning { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); color: #fcd34d; }
.ob-announce-warning .ob-announce-btn { background: #d97706; }
.ob-announce-danger { background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.3); color: #fca5b1; }
.ob-announce-danger .ob-announce-btn { background: #e11d48; }

/* ---------- Metric cards ---------- */
.app-dash-metrics {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .app-dash-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .app-dash-metrics { grid-template-columns: repeat(4, 1fr); }
}

.app-dash-card {
    display: block;
    background-color: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(8px);
    padding: 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--app-border-lifted);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.app-dash-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    text-decoration: none;
    transform: translateY(-1px);
}

.app-dash-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.app-dash-card-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--app-text-muted);
}

.app-dash-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.icon-blue { background-color: rgba(37, 99, 235, 0.15); color: #60a5fa; }
.icon-emerald { background-color: rgba(16, 185, 129, 0.15); color: #34d399; }
.icon-cyan { background-color: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.icon-purple { background-color: rgba(168, 85, 247, 0.15); color: #c084fc; }
.icon-amber { color: #fbbf24; }

.app-dash-card-value {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.app-dash-card-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}

.app-dash-card-sub {
    font-size: 0.75rem;
    color: var(--app-text-muted);
}

.app-dash-progress {
    margin-top: 0.75rem;
    height: 0.375rem;
    width: 100%;
    background-color: #0f172a;
    border-radius: 999px;
    overflow: hidden;
}

.app-dash-progress-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}

.bar-blue { background-color: #3b82f6; }
.bar-emerald { background-color: #10b981; }
.bar-cyan { background-color: #06b6d4; }
.bar-purple { background-color: #a855f7; }

/* ---------- Panels (table + shortcuts + datacenters) ---------- */
.app-dash-panel {
    background-color: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    border: 1px solid var(--app-border-lifted);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    overflow: hidden;
}

.app-dash-panel-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--app-border-lifted);
    background-color: #0f172a;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-dash-panel-header h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.app-dash-panel-header h3 i { color: #60a5fa; font-size: 0.8rem; }

.app-dash-panel-header p {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    margin: 0.15rem 0 0;
}

.app-dash-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-app-ghost {
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
    background-color: #1e293b;
    padding: 0.5rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid var(--app-border-lifted);
    text-decoration: none;
}

.btn-app-ghost:hover { color: #fff; text-decoration: none; }

.btn-app-primary-sm {
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    background-color: var(--app-accent);
    padding: 0.5rem 0.9rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
}

.btn-app-primary-sm:hover { background-color: var(--app-accent-hover); color: #fff; text-decoration: none; }

/* ---------- Table ---------- */
.app-dash-table-wrap { overflow-x: auto; }

.app-dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    text-align: right;
}

.app-dash-table thead {
    background-color: #0f172a;
    color: var(--app-text-muted);
    text-transform: uppercase;
    font-weight: 800;
    border-bottom: 1px solid var(--app-border-lifted);
}

.app-dash-table th,
.app-dash-table td {
    padding: 1rem;
}

.app-dash-table td.text-start,
.app-dash-table th.text-start { text-align: left; }

.app-dash-table tbody tr {
    border-bottom: 1px solid var(--app-border-lifted);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.app-dash-table tbody tr:hover { background-color: rgba(59, 130, 246, 0.1); }

.app-dash-table tbody tr.app-dash-empty-row { cursor: default; }
.app-dash-table tbody tr.app-dash-empty-row:hover { background-color: transparent; }
.app-dash-empty-row td { text-align: center; color: var(--app-text-muted); padding: 2rem 1rem; }

.app-dash-server-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    color: #fff;
}

.app-dash-server-name i { color: #60a5fa; font-size: 0.8rem; }

.app-dash-server-os {
    font-size: 0.65rem;
    color: var(--app-text-muted);
    font-family: 'JetBrains Mono', monospace;
    display: block;
    margin-top: 0.2rem;
}

.mono { font-family: 'JetBrains Mono', monospace; }

.app-dash-table td.mono { color: #e2e8f0; font-weight: 700; }

.app-dash-dc { display: flex; align-items: center; gap: 0.4rem; }
.app-dash-dc-name { color: #e2e8f0; font-weight: 700; }
.app-dash-dc-code {
    font-size: 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--app-text-muted);
    background-color: #0f172a;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid var(--app-border-lifted);
}

.app-dash-specs { display: flex; gap: 0.4rem; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; }
.app-dash-specs span {
    background-color: #0f172a;
    padding: 0.1rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--app-border-lifted);
    color: #cbd5e1;
}

.app-dash-status {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    padding: 0.4rem 0.9rem !important;
    border-radius: 999px !important;
    text-transform: none !important;
    font-size: 0.75rem !important;
}

.app-dash-status .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

.app-status-active { color: #34d399 !important; background: rgba(52, 211, 153, 0.12) !important; border: 1px solid rgba(52, 211, 153, 0.35) !important; }
.app-status-active .dot { background-color: #34d399; }

.app-status-pending { color: #fbbf24 !important; background: rgba(251, 191, 36, 0.12) !important; border: 1px solid rgba(251, 191, 36, 0.35) !important; }
.app-status-pending .dot { background-color: #fbbf24; }

.app-status-suspended { color: #fb7185 !important; background: rgba(251, 113, 133, 0.12) !important; border: 1px solid rgba(251, 113, 133, 0.35) !important; }
.app-status-suspended .dot { background-color: #fb7185; }

.app-status-terminated { color: #94a3b8 !important; background: rgba(148, 163, 184, 0.12) !important; border: 1px solid rgba(148, 163, 184, 0.35) !important; }
.app-status-terminated .dot { background-color: #94a3b8; }

.btn-app-manage {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background-color: var(--app-accent);
    color: #fff;
    border-radius: 0.75rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}

.btn-app-manage:hover { background-color: var(--app-accent-hover); color: #fff; text-decoration: none; }

/* ---------- Pagination ---------- */
.app-dash-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background-color: #0f172a;
    border-top: 1px solid var(--app-border-lifted);
    font-size: 0.75rem;
    font-weight: 700;
    color: #cbd5e1;
}

.app-dash-pagination-info .mono { color: #fff; }
.app-dash-pagination-info .text-blue { color: #60a5fa; }

.app-dash-pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 0.75rem;
    background-color: #1e293b;
    border: 1px solid var(--app-border-lifted);
    color: #cbd5e1;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.75rem;
}

.page-btn:hover { color: #fff; background-color: rgba(37, 99, 235, 0.2); text-decoration: none; }
.page-btn.active { background-color: var(--app-accent); color: #fff; border-color: transparent; }
.page-btn.disabled { opacity: 0.4; pointer-events: none; }

.page-btn-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    color: var(--app-text-muted);
    font-size: 0.8rem;
}

/* ---------- Bottom grid: datacenters + shortcuts ---------- */
.app-dash-bottom-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .app-dash-bottom-grid { grid-template-columns: 2fr 1fr; }
}

.app-dash-dc-panel {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-dash-dc-panel h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.app-dash-dc-panel h3 i { color: #60a5fa; }

.app-dash-dc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .app-dash-dc-grid { grid-template-columns: repeat(3, 1fr); }
}

.app-dash-dc-card {
    background-color: #0f172a;
    padding: 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid var(--app-border-lifted);
}

.app-dash-dc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.app-dash-dc-card-top .flag { font-size: 1.1rem; }

.status-pill {
    font-size: 0.6rem;
    font-weight: 700;
    color: #34d399;
    background-color: rgba(16, 185, 129, 0.1);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.app-dash-dc-card .city {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0.25rem 0 0;
}

.app-dash-dc-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6rem;
    color: var(--app-text-muted);
    margin-top: 0.5rem;
}

.app-dash-dc-card-bottom .ping { color: #cbd5e1; font-weight: 700; }

.app-dash-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--app-text-muted);
    padding: 1.5rem;
    font-size: 0.8rem;
}

/* ---------- Shortcuts ---------- */
.app-dash-shortcuts {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.app-dash-shortcuts h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.2rem;
}

.app-dash-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background-color: #0f172a;
    border: 1px solid var(--app-border-lifted);
    border-radius: 0.75rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.app-dash-shortcut:hover { background-color: #1e293b; text-decoration: none; }

.app-dash-shortcut-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
}

.app-dash-shortcut:hover .app-dash-shortcut-label { color: #fff; }
.app-dash-shortcut > i { color: #64748b; font-size: 0.75rem; }
.app-dash-shortcut:hover > i { color: var(--app-accent-hover); }

/* Inline SVG icon sizing within dashboard (!important needed to beat base .app-icon !important rule) */
.app-dash-card-icon .app-icon { width: 1rem !important; height: 1rem !important; }
.app-dash-panel-header h3 .app-icon { width: 0.85rem !important; height: 0.85rem !important; }
.app-dash-server-name .app-icon { width: 0.85rem !important; height: 0.85rem !important; }
.app-dash-dc-panel h3 .app-icon { width: 0.9rem !important; height: 0.9rem !important; }
.app-dash-shortcut-label .app-icon { width: 1rem !important; height: 1rem !important; }
.app-dash-shortcut > .app-icon { width: 0.85rem !important; height: 0.85rem !important; color: #64748b; }
.app-dash-shortcut:hover > .app-icon { color: var(--app-accent-hover); }
.btn-app-manage .app-icon, .btn-app-primary-sm .app-icon { width: 0.8rem !important; height: 0.8rem !important; }
.page-btn .app-icon { width: 0.8rem !important; height: 0.8rem !important; }

/* ---------- Services list page (VPS view) ---------- */
.app-services-header {
    align-items: flex-start;
}

.app-services-header-title {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.app-services-header-title .app-dash-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-services-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--app-border-lifted);
    background-color: var(--app-panel-bg-alt);
}

.app-services-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.app-tab {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0.45rem 0.85rem !important;
    border-radius: 0.65rem !important;
    background-color: transparent !important;
    border: 1px solid var(--app-border-lifted) !important;
    color: var(--app-text-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    font-family: 'Vazirmatn', sans-serif !important;
    cursor: pointer;
    box-shadow: none !important;
    line-height: 1.4 !important;
}

.app-tab:hover {
    color: #fff !important;
    background-color: rgba(255,255,255,0.05) !important;
}

.app-tab.active {
    background-color: var(--app-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25) !important;
}

.app-services-search {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--app-panel-bg) !important;
    border: 1px solid var(--app-border-lifted) !important;
    border-radius: 0.65rem !important;
    padding: 0.5rem 0.8rem !important;
    min-width: 260px;
    color: var(--app-text-muted);
}

.app-services-search input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--app-text) !important;
    font-size: 0.75rem !important;
    font-family: 'Vazirmatn', sans-serif !important;
}

.app-services-search input::placeholder {
    color: var(--app-text-muted);
}

.app-services-cycle {
    color: var(--app-text-muted);
    font-size: 0.65rem;
}

.text-muted { color: var(--app-text-muted); }

/* ---------- IP click-to-copy button ---------- */
.app-ip-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent !important;
    border: 1px dashed var(--app-border-lifted) !important;
    color: #e2e8f0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.55rem !important;
    border-radius: 0.5rem !important;
    cursor: pointer;
}

.app-ip-copy:hover {
    border-color: var(--app-accent) !important;
    color: #fff !important;
    background-color: rgba(37, 99, 235, 0.08) !important;
}

.app-ip-copy .app-ip-copy-icon {
    color: var(--app-text-muted);
    width: 0.75rem !important;
    height: 0.75rem !important;
}

.app-ip-copy:hover .app-ip-copy-icon {
    color: var(--app-accent-hover);
}

.app-ip-copy.copied {
    border-color: #34d399 !important;
    color: #34d399 !important;
}

.app-ip-copy.copied .app-ip-copy-icon {
    color: #34d399;
}

/* ---------- Profile / Account Details page ---------- */
.app-profile-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.app-profile-avatar {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.app-profile-summary-info h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.3rem;
}

.app-profile-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.75rem;
    color: var(--app-text-muted);
}

.app-profile-panel {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.app-profile-panel .app-dash-panel-header {
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--app-border-lifted);
    margin-bottom: 1rem;
    background: transparent;
}

.app-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .app-profile-grid { grid-template-columns: 1fr; }
}

.app-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.app-field label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--app-text-muted);
}

.app-input,
.app-select-wrap select {
    background-color: var(--app-bg) !important;
    border: 1px solid var(--app-border-lifted) !important;
    border-radius: 0.65rem !important;
    color: var(--app-text) !important;
    font-size: 0.8rem !important;
    padding: 0.55rem 0.8rem !important;
    font-family: 'Vazirmatn', sans-serif !important;
    width: 100%;
}

.app-input:focus,
.app-select-wrap select:focus {
    outline: none;
    border-color: var(--app-accent) !important;
}

.app-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.app-select-wrap select { width: 100%; }

.app-profile-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.app-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #e2e8f0;
    cursor: pointer;
}

.app-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--app-accent);
}

.app-profile-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 0 1.5rem;
}

.app-profile-alert {
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.app-profile-alert-success {
    background-color: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.app-profile-alert-error {
    background-color: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: #fb7185;
}

/* ---------- Security & Password pages ---------- */
.app-profile-grid-1col {
    grid-template-columns: 1fr;
    max-width: 420px;
}

.app-2fa-panel .app-dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-2fa-status {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background-color: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.app-2fa-status-off {
    background-color: rgba(148, 163, 184, 0.12);
    color: var(--app-text-muted);
    border-color: var(--app-border-lifted);
}

.app-profile-alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    margin-bottom: 1rem;
}

.app-profile-actions-start {
    justify-content: flex-start;
    padding-top: 0;
}

.btn-app-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.35);
    color: #fb7185;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 0.9rem;
    border-radius: 0.65rem;
    text-decoration: none;
}

.btn-app-danger:hover {
    background-color: rgba(244, 63, 94, 0.2);
    color: #fecdd3;
    text-decoration: none;
}

.app-generate-pw {
    align-self: flex-start;
    margin-top: 0.3rem;
}

.app-profile-linked-accounts {
    color: var(--app-text);
    font-size: 0.8rem;
}

.app-profile-linked-accounts .list-group-item {
    background-color: var(--app-bg) !important;
    border-color: var(--app-border-lifted) !important;
    color: var(--app-text) !important;
}

/* ---------- Tickets: list, thread, submit ---------- */
.app-ticket-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
}

.app-ticket-banner-title {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.app-ticket-banner-title h2 {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.2rem;
}

.app-ticket-banner-title p {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    margin: 0;
}

.app-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* کارت تیکت: ریل رنگی وضعیت در لبه شروع (سمت راست در RTL) + بدنه + فلش */
.app-ticket-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background-color: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    padding: 0.85rem 1.1rem;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.app-ticket-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background-color: var(--app-border-lifted);
    transition: background-color 0.15s ease;
}

.app-ticket-card.is-answered::before { background-color: #34d399; }
.app-ticket-card.is-pending::before  { background-color: #60a5fa; }
.app-ticket-card.is-closed::before   { background-color: #475569; }

.app-ticket-card:hover,
.app-ticket-card:focus-visible {
    border-color: var(--app-accent);
    background-color: rgba(30, 41, 59, 0.85);
    text-decoration: none;
    transform: translateY(-1px);
}

.app-ticket-card:focus-visible {
    outline: 2px solid var(--app-accent-hover);
    outline-offset: 2px;
}

.app-ticket-card.is-closed { opacity: 0.78; }
.app-ticket-card.is-closed:hover { opacity: 1; }

.app-ticket-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.app-ticket-card-go {
    flex-shrink: 0;
    color: #475569;
    transition: color 0.15s ease, transform 0.15s ease;
}

.app-ticket-card:hover .app-ticket-card-go {
    color: var(--app-accent-hover);
}

.app-ticket-card.unread .app-ticket-card-subject {
    color: #fff;
    font-weight: 800;
}

.app-ticket-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.7rem;
}

.app-ticket-card-idline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.app-ticket-card-top .mono {
    color: var(--app-text-muted);
    font-family: 'JetBrains Mono', monospace;
}

/* نشان «پاسخ جدید» - همون $ticket.unread خود WHMCS */
.app-ticket-new {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    color: #fbbf24;
    background-color: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.35);
    white-space: nowrap;
}

.app-ticket-new .dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background-color: #fbbf24;
    box-shadow: 0 0 6px currentColor;
    animation: appTicketPulse 1.8s ease-in-out infinite;
}

@keyframes appTicketPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* چیپ وضعیت. وضعیت‌های استاندارد از کلاس رنگ می‌گیرن و وضعیت‌های
   سفارشی ادمین از متغیر --tsc که تمپلیت با $ticket.statusColor پر می‌کنه */
.app-ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    background-color: var(--app-panel-bg-alt);
    color: var(--app-text-muted);
    border: 1px solid var(--app-border-lifted);
    white-space: nowrap;
    flex-shrink: 0;
}

.app-ticket-status .dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

.app-ticket-status.is-open,
.app-ticket-status.is-customer-reply,
.app-ticket-status.is-customerreply {
    color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.35);
}

.app-ticket-status.is-answered {
    color: #34d399;
    background-color: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}

.app-ticket-status.is-in-progress,
.app-ticket-status.is-inprogress {
    color: #c084fc;
    background-color: rgba(192, 132, 252, 0.12);
    border-color: rgba(192, 132, 252, 0.35);
}

.app-ticket-status.is-on-hold,
.app-ticket-status.is-onhold {
    color: #fbbf24;
    background-color: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
}

.app-ticket-status.is-closed {
    color: #94a3b8;
    background-color: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.3);
}

/* وضعیت سفارشی: رنگ از WHMCS. color-mix پشتیبانی نشد، پس‌زمینه شفاف
   می‌مونه و متن/حاشیه همچنان رنگ درست رو دارن */
.app-ticket-status[style*="--tsc"] {
    color: var(--tsc);
    border-color: var(--tsc);
    background-color: transparent;
    background-color: color-mix(in srgb, var(--tsc) 15%, transparent);
}

.app-ticket-card-subject {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-ticket-card-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.9rem;
    font-size: 0.65rem;
    color: var(--app-text-muted);
}

.app-ticket-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.app-ticket-meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-ticket-meta .app-icon {
    flex-shrink: 0;
    color: #64748b;
}

.app-ticket-card-bottom .mono { font-family: 'JetBrains Mono', monospace; }

@media (prefers-reduced-motion: reduce) {
    .app-ticket-card,
    .app-ticket-card-go { transition: none; }
    .app-ticket-card:hover { transform: none; }
    .app-ticket-new .dot { animation: none; }
}

/* Thread view */
.app-ticket-thread {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-ticket-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--app-panel-bg);
    border-bottom: 1px solid var(--app-border-lifted);
}

.app-ticket-thread-header h3 {
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.2rem;
}

.app-ticket-thread-header span {
    font-size: 0.75rem;
    color: var(--app-text-muted);
}

.app-ticket-thread-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.app-ticket-id-badge {
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    color: #cbd5e1;
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
}

.app-ticket-thread-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 560px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-lifted) transparent;
}

.app-ticket-thread-body::-webkit-scrollbar {
    width: 8px;
}

.app-ticket-thread-body::-webkit-scrollbar-track {
    background: transparent;
}

.app-ticket-thread-body::-webkit-scrollbar-thumb {
    background-color: var(--app-border-lifted);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.app-ticket-thread-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-accent);
    background-clip: padding-box;
}

.app-ticket-msg-row {
    display: flex;
}

.app-ticket-msg-row.from-user { justify-content: flex-start; }
.app-ticket-msg-row.from-staff { justify-content: flex-end; }

.app-ticket-msg-bubble {
    max-width: 34rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--app-radius-md);
    font-size: 0.8rem;
}

.from-user .app-ticket-msg-bubble {
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    color: #e2e8f0;
    border-top-right-radius: 0;
}

.from-staff .app-ticket-msg-bubble {
    background-color: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.35);
    color: #e2e8f0;
    border-top-left-radius: 0;
}

.app-ticket-msg-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.65rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    color: var(--app-text-muted);
}

.app-ticket-msg-name { font-weight: 800; color: #e2e8f0; }

.app-ticket-msg-text {
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.app-ticket-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.app-ticket-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    color: var(--app-text-muted);
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    text-decoration: none;
}

.app-ticket-attachment:hover { color: #fff; text-decoration: none; }

.app-ticket-reply-form {
    padding: 0.9rem 1.25rem;
    background-color: var(--app-panel-bg);
    border-top: 1px solid var(--app-border-lifted);
}

.app-ticket-reply-input {
    width: 100%;
    resize: vertical;
    min-height: 4rem;
}

.app-ticket-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.app-ticket-attach-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-ticket-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
}

/* Department selection */
.app-dept-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.app-dept-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.app-dept-card:hover {
    border-color: var(--app-accent);
    text-decoration: none;
}

.app-dept-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background-color: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-dept-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.app-dept-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
}

.app-dept-desc {
    font-size: 0.7rem;
    color: var(--app-text-muted);
}

.app-dept-card > .app-icon:last-child {
    color: var(--app-text-muted);
    flex-shrink: 0;
}

.app-dash-panel-header-sub {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    margin: 0.2rem 0 0;
}

/* ---------- Multi-file attachment blocks (real WHMCS markup, restyled) ---------- */
.app-ticket-attachments-block {
    margin-top: 0.75rem;
}

.app-attach-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--app-text-muted);
    margin-bottom: 0.4rem;
}

.app-ticket-attachments-block .attachment-group,
.app-field .attachment-group {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.app-ticket-attachments-block .custom-file,
.app-field .custom-file {
    flex: 1;
    position: relative !important;
    overflow: hidden;
    height: calc(1.5em + .75rem + 2px);
}

.app-ticket-attachments-block .custom-file-input,
.app-field .custom-file-input,
#fileUploadsContainer .custom-file-input {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 2 !important;
    margin: 0 !important;
    cursor: pointer;
}

.app-ticket-attachments-block .custom-file-label,
.app-field .custom-file-label,
#fileUploadsContainer .custom-file-label {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    pointer-events: none;
    display: flex;
    align-items: center;
    margin: 0 !important;
    height: 100% !important;
}

.app-ticket-attachments-block .input-group-append button,
.app-field .input-group-append button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

#fileUploadsContainer .attachment-group {
    margin-top: 0.4rem;
}

/* ---------- Ticket list panel wrapper (search + pagination) ---------- */
.app-ticket-list-panel {
    padding: 0;
}

.app-ticket-search-toolbar {
    padding: 1rem 1.25rem;
}

.app-ticket-list-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--app-text-muted);
}

.app-ticket-list-panel .app-ticket-list {
    padding: 1rem 1.25rem;
}

.app-ticket-list-panel .app-dash-pagination {
    border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);
}

/* ---------- Billing / Invoices page ---------- */
.app-billing-stats {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .app-billing-stats { grid-template-columns: repeat(3, 1fr); }
}

.app-billing-wallet-card,
.app-billing-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-billing-wallet-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #34d399;
    margin-top: 0.25rem;
}

.app-billing-stat-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin-top: 0.25rem;
}

.app-billing-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-billing-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-billing-header-title .app-icon { color: var(--app-accent-hover); }

.app-billing-header-title h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.app-invoice-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.app-invoice-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
}

.app-invoice-view-btn .app-icon { color: var(--app-accent-hover); }

.app-invoice-pay-btn {
    font-size: 0.7rem;
}

/* ---------- Domain management page ---------- */
.app-domain-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-domain-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-lg);
    padding: 1rem 1.25rem;
    text-decoration: none;
    flex-wrap: wrap;
}

.app-domain-card:hover {
    border-color: var(--app-accent);
    text-decoration: none;
}

.app-domain-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    flex-shrink: 0;
}

.app-domain-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 10rem;
}

.app-domain-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}

.app-domain-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--app-text-muted);
}

.app-domain-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.app-domain-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid;
}

.app-domain-badge-on {
    background-color: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.app-domain-badge-off {
    background-color: rgba(148, 163, 184, 0.1);
    color: var(--app-text-muted);
    border-color: var(--app-border-lifted);
}

.app-domain-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

/* ---------- Auth pages (login / register) ---------- */
.app-auth-wrap {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.app-auth-card {
    width: 100%;
    max-width: 26rem;
    background-color: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-lg);
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--app-border-lifted);
}

.app-auth-brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--app-radius-md);
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.app-auth-brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.app-auth-brand h1 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.app-auth-brand-sub {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--app-accent-hover);
    letter-spacing: 0.05em;
}

.app-auth-heading h2 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.25rem;
}

.app-auth-heading p {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    margin: 0;
}

.app-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-auth-link-sm {
    font-size: 0.7rem;
    color: var(--app-accent-hover);
    text-decoration: none;
}

.app-auth-link-sm:hover { color: #93c5fd; text-decoration: none; }

.app-input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
}

.app-input-icon-group > .app-icon:first-child {
    position: absolute;
    right: 0.8rem;
    color: var(--app-text-muted);
    pointer-events: none;
    z-index: 2;
}

.app-input-icon-group .app-input {
    padding-right: 2.4rem !important;
    width: 100%;
}

.app-input-reveal {
    position: absolute;
    left: 0.6rem;
    background: transparent;
    border: none;
    color: var(--app-text-muted);
    padding: 0.25rem;
    cursor: pointer;
    z-index: 2;
}

.app-input-reveal:hover { color: #fff; }

.app-auth-remember {
    font-size: 0.75rem;
}

.app-auth-submit {
    width: 100%;
    justify-content: center;
    padding: 0.65rem !important;
    font-size: 0.85rem !important;
}

.app-auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.1rem 0;
    color: var(--app-text-muted);
    font-size: .72rem;
}
.app-auth-divider::before,
.app-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--app-border-lifted);
}

.app-auth-mobile-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-flash-message {
    padding: .75rem 1rem;
    border-radius: .8rem;
    font-size: .78rem;
    line-height: 1.7;
    margin-bottom: 1.1rem;
}
.app-flash-error {
    background: rgba(244, 63, 94, .1);
    border: 1px solid rgba(244, 63, 94, .3);
    color: #fb7185;
}
.app-flash-warning {
    background: rgba(245, 158, 11, .1);
    border: 1px solid rgba(245, 158, 11, .3);
    color: #fbbf24;
}

.app-auth-captcha {
    display: flex;
    justify-content: center;
}

.app-auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border-lifted);
    font-size: 0.75rem;
    color: var(--app-text-muted);
}

.app-auth-footer a {
    color: var(--app-accent-hover);
    font-weight: 700;
    text-decoration: none;
}

.app-auth-footer a:hover { color: #93c5fd; text-decoration: none; }

/* ---------- Add funds page ---------- */
.app-addfunds-stats { margin-bottom: 1.25rem; }

.app-addfunds-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    background-color: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: var(--app-radius-md);
    font-size: 0.72rem;
    color: #cbd5e1;
}

.app-addfunds-note .app-icon { color: var(--app-accent-hover); flex-shrink: 0; }

/* ---------- Auth card v2: centered brand + login/register tabs ---------- */
.app-auth-wrap-wide { padding-top: 3rem; }

.app-auth-card-wide {
    max-width: 42rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.app-auth-brand-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
}

.app-auth-brand-centered .app-auth-brand-mark {
    width: 3rem;
    height: 3rem;
    font-size: 1.2rem;
}

.app-auth-brand-centered h1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin: 0.5rem 0 0;
}

.app-auth-brand-centered h1 .app-icon { color: var(--app-accent-hover); }

.app-auth-brand-centered p {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    margin: 0;
}

.app-auth-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
}

.app-auth-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem;
    border-radius: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--app-text-muted);
    text-decoration: none;
    background: transparent;
}

.app-auth-tab:hover {
    color: #fff;
    text-decoration: none;
}

.app-auth-tab.active {
    background-color: var(--app-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

/* Icon-on-left variant (matches reference exactly, for RTL fields where icon sits at input's left edge) */
.app-input-icon-left {
    position: relative;
}

.app-input-icon-left .app-input {
    padding-left: 2.4rem !important;
    padding-right: 0.8rem !important;
    width: 100%;
}

.app-input-icon-left > svg.app-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-text-muted);
    pointer-events: none;
}

.app-input-reveal-left {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--app-text-muted);
    padding: 0.2rem;
    cursor: pointer;
    z-index: 2;
}

.app-input-reveal-left:hover { color: #fff; }

/* When a field has both a reveal button AND a static icon (password fields),
   push the static icon further in and widen the input's left padding */
.app-input-icon-left:has(.app-input-reveal-left) > svg.app-icon:last-child {
    left: 2.2rem;
}

.app-input-icon-left:has(.app-input-reveal-left) .app-input {
    padding-left: 3.8rem !important;
}

/* ---------- Product details page ---------- */
.app-pd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.app-pd-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-pd-unpaid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-pd-status-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
}

.app-pd-status-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app-pd-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.app-pd-title-row .app-icon { color: #60a5fa; }

.app-pd-title-row h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.app-pd-subtitle {
    font-size: 0.75rem;
    color: var(--app-text-muted);
}

.app-pd-status-right {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.app-pd-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
}

.app-pd-meta-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--app-text-muted);
}

.app-pd-module-panel { padding: 0; }

.app-pd-module-output {
    padding: 1.25rem;
    color: var(--app-text);
    font-size: 0.85rem;
}

/* Reskin whatever buttons/forms the provisioning module renders inside,
   so power/reboot/console buttons visually match our theme automatically */
.app-pd-module-output .btn,
.app-pd-module-output button,
.app-pd-module-native .btn,
.app-pd-module-native button {
    background-color: var(--app-panel-bg-alt) !important;
    border: 1px solid var(--app-border-lifted) !important;
    color: #e2e8f0 !important;
    border-radius: var(--app-radius-md) !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.75rem !important;
    margin: 0.2rem !important;
}

.app-pd-module-output .btn:hover,
.app-pd-module-output button:hover,
.app-pd-module-native .btn:hover,
.app-pd-module-native button:hover {
    background-color: var(--app-border-lifted) !important;
    color: #fff !important;
}

.app-pd-module-output .btn-primary,
.app-pd-module-output .btn-success,
.app-pd-module-native .btn-primary,
.app-pd-module-native .btn-success {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: #fff !important;
}

.app-pd-module-output table,
.app-pd-module-native table {
    width: 100%;
    color: var(--app-text);
}

.app-pd-module-native {
    margin-top: 0.75rem;
}

.app-pd-suspend-reason {
    font-size: 0.7rem;
    color: #fb7185;
}

.app-pd-tabs {
    margin-bottom: -0.5rem;
}

.app-pd-ns-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-top: 1px solid var(--app-border-lifted);
    font-size: 0.8rem;
}

.app-pd-usage-stats {
    grid-template-columns: repeat(2, 1fr);
}

.app-pd-usage-sub {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.65rem;
    color: var(--app-text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.btn-app-danger.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ======================================================================
 * سربرگ داشبورد، نوار رسیدگی، خروجی ماژول‌ها و پنل‌های خانه WHMCS
 * ====================================================================== */

.app-dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.app-dash-greet h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .3rem;
    line-height: 1.7;
}

.app-dash-greet p {
    font-size: .78rem;
    color: var(--app-text-muted);
    margin: 0;
    line-height: 1.8;
}

.app-dash-attention {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.app-dash-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-radius: .7rem;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, border-color .15s ease;
}

.app-dash-chip:hover { transform: translateY(-1px); text-decoration: none; }
.app-dash-chip strong { font-weight: 800; }
.app-dash-chip .app-icon { flex-shrink: 0; }

.app-dash-chip-warn {
    background-color: rgba(245, 158, 11, .1);
    border-color: rgba(245, 158, 11, .32);
    color: #fbbf24;
}
.app-dash-chip-warn:hover { color: #fcd34d; border-color: rgba(245, 158, 11, .55); }

.app-dash-chip-info {
    background-color: rgba(37, 99, 235, .1);
    border-color: rgba(59, 130, 246, .32);
    color: #60a5fa;
}
.app-dash-chip-info:hover { color: #93c5fd; border-color: rgba(59, 130, 246, .55); }

.app-dash-note {
    padding: .8rem 1rem;
    border-radius: .7rem;
    font-size: .78rem;
    line-height: 1.9;
    margin-bottom: 1.1rem;
}

.app-dash-note-error {
    background-color: rgba(244, 63, 94, .1);
    border: 1px solid rgba(244, 63, 94, .3);
    color: #fb7185;
}

.app-dash-muted { color: #64748b; }

/* خروجی ماژول‌های افزودنی و پنل‌های خانه */
.app-dash-addons { margin-top: 1.25rem; }
.app-dash-addon + .app-dash-addon { margin-top: 1.25rem; }

.app-dash-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

@media (min-width: 992px) {
    .app-dash-panels { grid-template-columns: 1fr 1fr; }
}

/* پنل‌ها با مارکاپ بوت‌استرپ خود WHMCS میان؛ ظاهر تیره‌شون از
   native-theme.css می‌آد، اینجا فقط فاصله‌ها یکدست می‌شه */
.app-dash-panels .card { margin-bottom: 0; height: 100%; }

@media (prefers-reduced-motion: reduce) {
    .app-dash-chip { transition: none; }
    .app-dash-chip:hover { transform: none; }
}

/* ======================================================================
 * صفحه لیست سرویس‌ها - افزوده‌ها
 * ====================================================================== */

/* ---------- ستون سررسید ---------- */

.app-service-due {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .5rem;
    border-radius: .45rem;
    font-size: .72rem;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.app-service-due .app-icon { flex-shrink: 0; }

.app-service-due.is-soon {
    background-color: rgba(245, 158, 11, .12);
    color: #fbbf24;
}

.app-service-due.is-overdue {
    background-color: rgba(244, 63, 94, .12);
    color: #fb7185;
}

/* ---------- ردیف‌های قابل فوکوس ---------- */

.app-service-row { cursor: pointer; }

.app-service-row:focus-visible {
    outline: 2px solid var(--app-accent-hover);
    outline-offset: -2px;
}

/* ---------- حالت «چیزی پیدا نشد» ---------- */

.app-services-empty td {
    padding: 2.5rem 1rem !important;
    text-align: center;
    color: #64748b;
}

.app-services-empty td .app-icon {
    display: block;
    margin: 0 auto .6rem;
    opacity: .45;
}

.app-services-empty td span { font-size: .8rem; }

/* ---------- دکمه پاک کردن جست‌وجو ---------- */

.app-services-search { position: relative; }

.app-services-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(148, 163, 184, .16);
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease, color .15s ease;
}

.app-services-search-clear:hover {
    background-color: rgba(148, 163, 184, .3);
    color: #fff;
}

.app-services-search-clear[hidden] { display: none; }

/* ---------- سربرگ چسبان جدول ---------- */

.app-dash-table-wrap { position: relative; }

.app-dash-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--app-panel-bg-alt);
}

@media (prefers-reduced-motion: reduce) {
    .app-services-search-clear { transition: none; }
}

/* ======================================================================
 * جست‌وجو: اصلاح ظاهر + واکنش‌گرایی
 * ====================================================================== */

/*
 * ریست appearance روی خود input لازم بود و نبود. بدون این، سافاری و
 * مرورگرهای iOS ظاهر بومی فیلد (جعبه سفید با گوشه گرد و سایه داخلی)
 * رو نگه می‌داشتن و فیلد داخل ظرف تیره ما کاملاً بی‌استایل دیده می‌شد.
 * .app-tab این ریست رو داشت، input نداشت.
 */
.app-services-search input {
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
    min-width: 0;
    padding: 0 !important;
    height: 1.4rem;
    line-height: 1.4rem !important;
}

.app-services-search {
    position: relative;
    min-height: 2.3rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.app-services-search:focus-within {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

.app-services-search > .app-icon {
    flex-shrink: 0;
    color: #64748b;
    transition: color .15s ease;
}

.app-services-search:focus-within > .app-icon { color: var(--app-accent-hover); }

/* ======================================================================
 * واکنش‌گرایی: جدول‌ها روی موبایل کارت می‌شن
 * ======================================================================
 * جدول لیست سرویس‌ها ۷ ستونه‌ست؛ روی صفحه گوشی یا افقی اسکرول می‌شد یا
 * ستون‌ها له می‌شدن. زیر ۸۶۰ پیکسل هر ردیف به یه کارت با جفت‌های
 * «برچسب / مقدار» تبدیل می‌شه. برچسب‌ها از data-label سلول‌ها میان که
 * توی تمپلیت ست شدن - بدون جاوااسکریپت.
 * ====================================================================== */

@media (max-width: 860px) {
    .app-dash-table thead { display: none; }

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

    .app-dash-table tbody tr {
        border: 1px solid var(--app-border-lifted);
        border-radius: var(--app-radius-md);
        background-color: var(--app-panel-bg-alt);
        margin: .75rem;
        padding: .35rem .25rem;
        width: auto;
    }

    .app-dash-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .55rem .85rem !important;
        text-align: right !important;
        border: none;
    }

    .app-dash-table td + td {
        border-top: 1px dashed rgba(51, 65, 85, .55);
    }

    /* برچسب ستون، سمت راست سلول */
    .app-dash-table td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: .68rem;
        font-weight: 700;
        color: #64748b;
    }

    /* سلول نام سرور برچسب لازم نداره - خودش تیتر کارته */
    .app-dash-table td:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: .2rem;
        padding-bottom: .7rem !important;
    }
    .app-dash-table td:first-child::before { display: none; }

    /* ستون مدیریت تمام‌عرض */
    .app-dash-table td.text-start {
        justify-content: stretch;
    }
    .app-dash-table td.text-start .btn-app-manage {
        width: 100%;
        justify-content: center;
    }

    .app-services-empty td,
    .app-dash-empty-row td {
        justify-content: center;
    }
    .app-services-empty td::before,
    .app-dash-empty-row td::before { display: none; }

    /* سربرگ چسبان توی حالت کارتی معنی نداره */
    .app-dash-table thead th { position: static; }
}

/* ---------- نوار ابزار روی صفحه کوچک ---------- */

@media (max-width: 860px) {
    .app-services-toolbar {
        padding: .8rem .9rem;
        gap: .6rem;
    }

    /* تب‌ها به‌جای شکستن به چند خط، افقی اسکرول می‌شن */
    .app-services-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        padding-bottom: .25rem;
        scrollbar-width: none;
    }
    .app-services-tabs::-webkit-scrollbar { display: none; }
    .app-tab { white-space: nowrap; flex-shrink: 0; }

    .app-services-search {
        width: 100%;
        min-width: 0;
    }

    .app-services-header {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
    }
    .app-services-header .btn-app-primary-sm { justify-content: center; }
}

/* ---------- کارت‌های داشبورد ---------- */

@media (min-width: 560px) {
    .app-dash-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .app-dash-metrics { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
    .app-dash-attention { width: 100%; }
    .app-dash-attention .app-dash-chip { flex: 1; justify-content: center; }
    .app-dash-panel-header { flex-direction: column; align-items: stretch; gap: .8rem; }
    .app-dash-panel-actions { display: flex; gap: .5rem; }
    .app-dash-panel-actions > * { flex: 1; justify-content: center; }
    .app-dash-pagination { flex-direction: column; gap: .7rem; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    .app-services-search,
    .app-services-search > .app-icon { transition: none; }
}

/* ======================================================================
 * صفحه جزئیات سرویس - انسجام و واکنش‌گرایی
 * ====================================================================== */

/* کارت وضعیت: ستون راست به گرید تبدیل می‌شه تا اقلام متا روی هر عرضی
   مرتب بچینن، نه اینکه با flex-wrap نامنظم بشکنن */
.app-pd-status-right {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.1rem 1.75rem;
    align-items: start;
    flex: 1;
    min-width: 0;
}

.app-pd-status-left { min-width: 0; }

.app-pd-meta-item { min-width: 0; }

.app-pd-meta-item > .mono,
.app-pd-meta-item > .app-ip-copy {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ردیف‌های اطلاعات سرور: روی صفحه باریک برچسب و مقدار روی هم */
.app-pd-ns-row {
    gap: 1rem;
    flex-wrap: wrap;
}

.app-pd-ns-row .mono {
    text-align: left;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* آمار مصرف دیسک/پهنای باند.
   این قانون برای کارت‌های مصرف صفحه جزئیات سرویس نوشته شده بود ولی
   سلکتورش .app-billing-stats بود - یعنی روی کارت‌های آماری صفحه
   فاکتورها و شارژ کیف پول هم می‌نشست و چون بعد از قانون ۷۶۸ پیکسلی
   میاد، اون سه‌ستونه رو همه‌جا به دوستونه تبدیل می‌کرد. */
@media (min-width: 640px) {
    .app-pd-usage-stats { grid-template-columns: repeat(2, 1fr); }
}

.app-pd-usage-sub {
    display: block;
    margin-top: .5rem;
    font-size: .68rem;
    color: var(--app-text-muted);
}

/* خروجی بومی ماژول تحویل سرویس - نباید از قاب بزنه بیرون */
.app-pd-module-native {
    overflow-x: auto;
    max-width: 100%;
}

.app-pd-module-native table { width: 100%; }

/* ---------- موبایل ---------- */

@media (max-width: 767px) {
    .app-pd-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .app-pd-topbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    .app-pd-topbar-actions > * { justify-content: center; }

    .app-pd-topbar > .btn-app-ghost { justify-content: center; }

    .app-pd-status-card {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
        padding: 1.1rem;
    }

    .app-pd-status-right {
        grid-template-columns: 1fr 1fr;
        gap: .9rem;
        padding-top: 1rem;
        border-top: 1px solid var(--app-border-lifted);
    }

    .app-pd-title-row h2 { font-size: 1rem; }

    .app-pd-ns-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }

    .app-pd-ns-row .mono { text-align: right; }

    .app-pd-unpaid {
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
    }
    .app-pd-unpaid .btn-app-manage { justify-content: center; }
}

@media (max-width: 400px) {
    .app-pd-topbar-actions { grid-template-columns: 1fr; }
    .app-pd-status-right { grid-template-columns: 1fr; }
}

/* ======================================================================
 * سرویس‌های جانبی (Addons)
 * ====================================================================== */

.app-addons-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--app-border);
}

.app-addons-head-text h3 {
    font-size: .88rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .25rem;
}

.app-addons-head-text p {
    font-size: .72rem;
    color: var(--app-text-muted);
    margin: 0;
    line-height: 1.8;
}

.app-addon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
}

@media (min-width: 640px)  { .app-addon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .app-addon-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- کارت افزودنی ---------- */

.app-addon-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.1rem;
    border-radius: var(--app-radius-lg);
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    position: relative;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}

.app-addon-card:hover { border-color: rgba(59, 130, 246, .4); }

/* نوار رنگی لبه بالا بر اساس وضعیت */
.app-addon-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background-color: var(--app-border-lifted);
}
.app-addon-card.is-active::before    { background: linear-gradient(90deg, #34d399, #10b981); }
.app-addon-card.is-pending::before   { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.app-addon-card.is-suspended::before { background: linear-gradient(90deg, #fb7185, #f43f5e); }

.app-addon-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.app-addon-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: rgba(37, 99, 235, .15);
    border: 1px solid rgba(59, 130, 246, .28);
    color: #60a5fa;
}

.app-addon-name {
    font-size: .85rem;
    font-weight: 800;
    color: #fff;
    margin: .15rem 0 0;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.app-addon-price {
    font-size: .8rem;
    font-weight: 800;
    color: #34d399;
}

.app-addon-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
    margin-top: .2rem;
    padding-top: .65rem;
    border-top: 1px dashed rgba(51, 65, 85, .6);
}

.app-addon-meta > div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.app-addon-meta-label {
    font-size: .64rem;
    font-weight: 700;
    color: #64748b;
}

.app-addon-meta .mono { font-size: .72rem; color: #cbd5e1; }

/* دکمه پرداخت فاکتور افزودنی معلق */
.app-addon-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: .35rem;
    padding: .6rem .8rem;
    border-radius: .65rem;
    background-color: rgba(245, 158, 11, .14);
    border: 1px solid rgba(245, 158, 11, .35);
    color: #fbbf24;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.app-addon-pay:hover {
    background-color: rgba(245, 158, 11, .22);
    color: #fcd34d;
    text-decoration: none;
}

.app-addon-actions { margin-top: .35rem; }

/* ---------- کارت «افزودن» ---------- */

.app-addon-add {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .4rem;
    cursor: pointer;
    background-color: transparent;
    border: 1px dashed var(--app-border-lifted);
    font-family: inherit;
    color: var(--app-text-muted);
    min-height: 9rem;
}

.app-addon-add:hover {
    border-color: var(--app-accent);
    background-color: rgba(37, 99, 235, .06);
    color: var(--app-text);
}

.app-addon-add::before { display: none; }

.app-addon-add-plus {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(37, 99, 235, .14);
    color: #60a5fa;
    margin-bottom: .2rem;
}

.app-addon-add strong { font-size: .8rem; color: #e2e8f0; font-weight: 800; }
.app-addon-add span { font-size: .68rem; line-height: 1.8; }

/* ---------- حالت خالی ---------- */

.app-addon-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .45rem;
    padding: 2.5rem 1.25rem;
    border-radius: var(--app-radius-lg);
    border: 1px dashed var(--app-border-lifted);
    color: #64748b;
}

.app-addon-empty > .app-icon { opacity: .45; margin-bottom: .3rem; }
.app-addon-empty strong { font-size: .85rem; color: #e2e8f0; }
.app-addon-empty > span { font-size: .74rem; line-height: 1.9; max-width: 28rem; }
.app-addon-empty .btn-app-primary-sm { margin-top: .75rem; }

@media (prefers-reduced-motion: reduce) {
    .app-addon-card,
    .app-addon-pay { transition: none; }
}

/* ======================================================================
 * صفحه فاکتورها - افزوده‌ها
 * ====================================================================== */

.app-billing-stat-sub {
    display: block;
    margin-top: .3rem;
    font-size: .66rem;
    color: var(--app-text-muted);
}

.app-billing-stat-sub .is-overdue { color: #fb7185; font-weight: 700; }

.app-billing-stat-amount.is-due { color: #fbbf24; }

.app-billing-stat-card.is-due { border-color: rgba(245, 158, 11, .35); }

.app-billing-payall {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- مهلت پرداخت ---------- */

.app-invoice-due {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .45rem;
    border-radius: .45rem;
    font-size: .72rem;
    white-space: nowrap;
}

.app-invoice-due.is-overdue {
    background-color: rgba(244, 63, 94, .12);
    color: #fb7185;
}

.app-invoice-due .app-icon { flex-shrink: 0; }

/* ---------- شماره و مبلغ ---------- */

.app-invoice-num { font-weight: 800; color: #fff; }
.app-invoice-total { color: #34d399; font-weight: 800; }

/*
 * وضعیت از $invoice.statusClass خود WHMCS میاد، پس همه حالت‌ها پوشش
 * داده می‌شن نه فقط سه تای قبلی. هر کلاسی که تعریف نشده باشه به رنگ
 * خنثای پایه برمی‌گرده.
 */
.app-invoice-status {
    background-color: rgba(148, 163, 184, .14);
    color: #cbd5e1;
}

.app-invoice-status.is-paid {
    background-color: rgba(16, 185, 129, .14);
    color: #34d399;
}
.app-invoice-status.is-paid .dot { background-color: #34d399; }

.app-invoice-status.is-unpaid,
.app-invoice-status.is-payment-pending {
    background-color: rgba(245, 158, 11, .14);
    color: #fbbf24;
}
.app-invoice-status.is-unpaid .dot,
.app-invoice-status.is-payment-pending .dot { background-color: #fbbf24; }

.app-invoice-status.is-overdue,
.app-invoice-status.is-collections {
    background-color: rgba(244, 63, 94, .14);
    color: #fb7185;
}
.app-invoice-status.is-overdue .dot,
.app-invoice-status.is-collections .dot { background-color: #fb7185; }

.app-invoice-status.is-cancelled,
.app-invoice-status.is-refunded,
.app-invoice-status.is-draft {
    background-color: rgba(100, 116, 139, .16);
    color: #94a3b8;
}
.app-invoice-status.is-cancelled .dot,
.app-invoice-status.is-refunded .dot,
.app-invoice-status.is-draft .dot { background-color: #94a3b8; }

/* ردیف سررسیدگذشته: نوار قرمز روی لبه شروع */
.app-invoice-row { cursor: pointer; position: relative; }

.app-invoice-row.is-overdue td:first-child {
    box-shadow: inset 3px 0 0 0 #f43f5e;
}

.app-invoice-row:focus-visible {
    outline: 2px solid var(--app-accent-hover);
    outline-offset: -2px;
}

.app-invoice-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    justify-content: flex-start;
}

/* ---------- موبایل ---------- */

@media (max-width: 860px) {
    .app-billing-header {
        flex-direction: column;
        align-items: stretch;
        gap: .8rem;
    }

    /* نوار قرمز روی کارت موبایل باید لبه بالا باشه نه کنار سلول */
    .app-invoice-row.is-overdue td:first-child { box-shadow: none; }
    .app-dash-table tbody tr.app-invoice-row.is-overdue {
        border-color: rgba(244, 63, 94, .45);
    }

    .app-invoice-actions { width: 100%; }
    .app-invoice-actions > * { flex: 1; justify-content: center; }
}

@media (max-width: 767px) {
    .app-billing-wallet-card,
    .app-billing-stat-card {
        flex-wrap: wrap;
        gap: .75rem;
    }
    .app-billing-payall { width: 100%; justify-content: center; }
}

/* ======================================================================
 * بخش تیکت‌ها - آمار، نخ گفتگو، فرم ارسال و نظرسنجی
 * ====================================================================== */

/* ---------- کارت‌های آمار بالای لیست ---------- */
.app-ticket-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .app-ticket-stats { grid-template-columns: repeat(3, 1fr); }
}

.app-ticket-stat-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.app-ticket-stat-card.is-alert {
    border-color: rgba(251, 191, 36, 0.4);
}

.app-ticket-stat-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-top: 0.35rem;
    font-family: 'JetBrains Mono', monospace;
}

.app-ticket-stat-number.is-alert { color: #fbbf24; }

.app-ticket-stat-sub {
    display: block;
    font-size: 0.68rem;
    color: var(--app-text-muted);
    margin-top: 0.25rem;
}

.icon-amber-bg { background-color: rgba(251, 191, 36, 0.15); color: #fbbf24; }

/* ---------- حالت خالی لیست ---------- */
.app-ticket-blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--app-text-muted);
}

.app-ticket-blank .app-icon {
    opacity: 0.45;
    margin-bottom: 0.3rem;
}

.app-ticket-blank strong {
    font-size: 0.85rem;
    font-weight: 800;
    color: #e2e8f0;
}

.app-ticket-blank span { font-size: 0.72rem; }
.app-ticket-blank .btn-app-primary-sm { margin-top: 0.7rem; }

/* ---------- نوار بالای صفحه تیکت ---------- */
.app-ticket-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-ticket-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--app-text-muted);
    text-decoration: none;
    padding: 0.4rem 0.7rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.app-ticket-back:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--app-border-lifted);
    text-decoration: none;
}

.app-ticket-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- سربرگ نخ گفتگو ---------- */
.app-ticket-thread-header {
    flex-wrap: wrap;
}

.app-ticket-thread-headline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.app-ticket-thread-headline h3 {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------- نوار اطلاعات تیکت ---------- */
.app-ticket-meta-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.9rem 1.5rem;
    padding: 0.9rem 1.25rem;
    background-color: var(--app-panel-bg-alt);
    border-bottom: 1px solid var(--app-border-lifted);
}

.app-ticket-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.app-ticket-meta-key {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
}

.app-ticket-meta-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: #e2e8f0;
    overflow-wrap: anywhere;
}

.app-ticket-meta-val.mono { font-family: 'JetBrains Mono', monospace; }

.app-ticket-urgency {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 0.68rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--app-border-lifted);
    color: var(--app-text-muted);
}

.app-ticket-urgency.is-high { color: #fb7185; background-color: rgba(251, 113, 133, 0.12); border-color: rgba(251, 113, 133, 0.35); }
.app-ticket-urgency.is-medium { color: #fbbf24; background-color: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); }
.app-ticket-urgency.is-low { color: #34d399; background-color: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); }

/* ---------- حباب‌های گفتگو ---------- */
.app-ticket-msg-row {
    align-items: flex-start;
    gap: 0.6rem;
}

/* در RTL از row-reverse استفاده نمی‌کنیم چون محور اصلی رو برعکس می‌کنه و
   justify-content موجود رو خراب می‌کنه؛ فقط جای آواتار رو با order عوض
   می‌کنیم تا آواتار کارشناس بیرونی‌ترین عنصر سمت چپ باشه */
.from-staff .app-ticket-avatar { order: 2; }

.app-ticket-avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border-lifted);
    background-color: var(--app-panel-bg-alt);
    color: var(--app-text-muted);
}

.from-staff .app-ticket-avatar {
    background-color: rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.4);
    color: #60a5fa;
}

.app-ticket-msg-role {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    margin-inline-start: 0.35rem;
    border-radius: 999px;
    color: #60a5fa;
    background-color: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.35);
    vertical-align: middle;
}

.app-ticket-msg-text a { color: #60a5fa; }
.app-ticket-msg-text img { max-width: 100%; height: auto; }
.app-ticket-msg-text pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: 0.5rem;
    padding: 0.6rem;
    font-size: 0.72rem;
}

/* ---------- فرم پاسخ ---------- */
.app-ticket-reopen-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: #fbbf24;
    background-color: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 0.6rem;
    padding: 0.5rem 0.7rem;
    margin: 0 0 0.75rem;
}

.app-ticket-guest-grid { margin-bottom: 0.75rem; }

.app-ticket-reply-form .app-attach-label { margin-bottom: 0.4rem; }

.app-ticket-attach-toggle {
    margin-top: 0.7rem;
    border: 1px dashed var(--app-border-lifted);
    border-radius: 0.65rem;
    padding: 0.5rem 0.75rem;
}

.app-ticket-attach-toggle > summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--app-text-muted);
}

.app-ticket-attach-toggle > summary::-webkit-details-marker { display: none; }
.app-ticket-attach-toggle > summary:hover { color: #fff; }
.app-ticket-attach-toggle[open] > summary { color: #fff; margin-bottom: 0.5rem; }

.app-ticket-attach-hint {
    font-size: 0.65rem;
    color: var(--app-text-muted);
    margin-top: 0.4rem;
}

.app-ticket-reply-actions { justify-content: flex-end; }

/* ---------- مراحل ارسال تیکت ---------- */
.app-ticket-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
}

.app-ticket-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}

.app-ticket-step-num {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    border: 1px solid var(--app-border-lifted);
    background-color: var(--app-bg);
    color: #64748b;
}

.app-ticket-steps li.is-current { color: #fff; }
.app-ticket-steps li.is-current .app-ticket-step-num {
    background-color: var(--app-accent);
    border-color: transparent;
    color: #fff;
}

.app-ticket-steps li.is-done { color: #34d399; }
.app-ticket-steps li.is-done .app-ticket-step-num {
    background-color: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34d399;
}

/* ---------- فرم ارسال تیکت ---------- */
.app-field-wide { grid-column: 1 / -1; }

.app-ticket-message-field,
.app-ticket-attach-field-wrap { margin-top: 1rem; }

.app-ticket-message-field textarea {
    resize: vertical;
    min-height: 8rem;
}

.app-ticket-field-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.65rem;
    color: var(--app-text-muted);
    margin: 0.1rem 0 0;
}

.app-ticket-field-hint .app-icon { flex-shrink: 0; margin-top: 0.15rem; }

.app-ticket-form-alert { margin-bottom: 1rem; }

.app-ticket-customfields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* ورودی‌های فیلدهای اختصاصی خروجی خود WHMCS ان و کلاس ما رو ندارن */
.app-ticket-customfields input[type="text"],
.app-ticket-customfields input[type="email"],
.app-ticket-customfields input[type="number"],
.app-ticket-customfields input[type="date"],
.app-ticket-customfields select,
.app-ticket-customfields textarea {
    background-color: var(--app-bg) !important;
    border: 1px solid var(--app-border-lifted) !important;
    border-radius: 0.65rem !important;
    color: var(--app-text) !important;
    font-family: 'Vazirmatn', sans-serif !important;
    font-size: 0.78rem !important;
    padding: 0.5rem 0.75rem !important;
    width: 100%;
    box-shadow: none !important;
}

.app-ticket-customfields input[type="checkbox"] { accent-color: var(--app-accent); }

.app-ticket-captcha {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}

#autoAnswerSuggestions:not(.w-hidden) {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    font-size: 0.78rem;
}

#autoAnswerSuggestions a { color: #60a5fa; }

.app-dept-go { color: var(--app-text-muted); flex-shrink: 0; }
.app-dept-card:hover .app-dept-go { color: var(--app-accent-hover); }

/* ---------- تأیید ثبت / پایان ---------- */
.app-ticket-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 2rem 1rem;
}

.app-ticket-done-mark {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.4);
    color: #34d399;
    margin-bottom: 0.4rem;
}

.app-ticket-done strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}

.app-ticket-done-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 800;
    color: #60a5fa;
    text-decoration: none;
    padding: 0.2rem 0.7rem;
    border-radius: 0.5rem;
    background-color: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.35);
}

.app-ticket-done-id:hover { color: #fff; text-decoration: none; }

.app-ticket-done p {
    font-size: 0.78rem;
    color: var(--app-text-muted);
    margin: 0.3rem 0 0;
    max-width: 34rem;
}

.app-ticket-done-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* ---------- نظرسنجی کیفیت پشتیبانی ---------- */
.app-feedback-summary {
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    margin-bottom: 1rem;
}

.app-feedback-review-link { margin-bottom: 1.25rem; }

.app-feedback-block {
    padding: 1rem 1.1rem;
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    background-color: var(--app-panel-bg-alt);
    margin-bottom: 1rem;
}

.app-feedback-question {
    font-size: 0.8rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 0.8rem;
}

.app-rate-scale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.app-rate-edge {
    font-size: 0.65rem;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.app-rate-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
}

.app-rate-option {
    margin: 0;
    cursor: pointer;
}

.app-rate-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.app-rate-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    border: 1px solid var(--app-border-lifted);
    background-color: var(--app-bg);
    color: var(--app-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.app-rate-option:hover span { color: #fff; border-color: var(--app-accent); }

.app-rate-option input:checked + span {
    background-color: var(--app-accent);
    border-color: transparent;
    color: #fff;
}

.app-rate-option input:focus-visible + span {
    outline: 2px solid var(--app-accent-hover);
    outline-offset: 2px;
}

.app-feedback-comment { margin-top: 0.9rem; }
.app-feedback-comment textarea { resize: vertical; }

/* ---------- واکنش‌گرایی بخش تیکت ---------- */
@media (max-width: 767px) {
    .app-ticket-banner { padding: 1rem; }
    .app-ticket-banner .btn-app-primary-sm { width: 100%; justify-content: center; }

    .app-ticket-list-panel .app-ticket-list { padding: 0.9rem; }
    .app-ticket-card { padding: 0.8rem 0.9rem; gap: 0.5rem; }
    .app-ticket-card-go { display: none; }
    .app-ticket-card-subject { white-space: normal; overflow: visible; }
    .app-ticket-card-bottom { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

    .app-ticket-topbar { flex-direction: column; align-items: stretch; }
    .app-ticket-topbar-actions > * { width: 100%; justify-content: center; }

    .app-ticket-thread-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.9rem 1rem; }
    .app-ticket-meta-strip { padding: 0.9rem 1rem; gap: 0.75rem 1rem; }
    .app-ticket-thread-body { padding: 1rem 0.9rem; max-height: none; }
    .app-ticket-msg-bubble { max-width: 100%; }
    .app-ticket-avatar { width: 1.7rem; height: 1.7rem; }
    .app-ticket-reply-form { padding: 0.9rem 1rem; }
    .app-ticket-reply-actions > .btn-app-primary-sm { width: 100%; justify-content: center; }

    .app-ticket-steps { gap: 0.4rem 0.7rem; padding: 0.7rem; }
    .app-ticket-steps li { font-size: 0.66rem; }

    .app-ticket-stat-number { font-size: 1.35rem; }

    .app-rate-scale { flex-direction: column; align-items: stretch; }
    .app-rate-options { justify-content: space-between; }
    .app-rate-edge { text-align: center; }

    /* فقط فرم‌های بخش تیکت - تا چیدمان بقیه صفحات دست‌نخورده بمونه */
    .app-profile-panel .app-ticket-steps ~ .app-profile-actions,
    .app-feedback-comment ~ .app-profile-actions { flex-direction: column; }
    .app-profile-panel .app-ticket-steps ~ .app-profile-actions > *,
    .app-feedback-comment ~ .app-profile-actions > * { width: 100%; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .app-ticket-back,
    .app-rate-option span { transition: none; }
}

/* ======================================================================
 * بخش دامنه‌ها - لیست، جزئیات، DNS، فوروارد، نیم‌سرور و مدیریت گروهی
 * ====================================================================== */

.app-profile-alert-info {
    background-color: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.32);
    color: #93c5fd;
}

/* ---------- نوار عملیات گروهی ---------- */
.app-domain-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background-color: var(--app-panel-bg-alt);
    border-bottom: 1px solid var(--app-border-lifted);
}

.app-domain-selectall {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--app-text-muted);
    cursor: pointer;
}

.app-domain-selectall input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--app-accent);
    cursor: pointer;
}

.app-domain-selected-count {
    font-size: 0.68rem;
    font-weight: 700;
    color: #60a5fa;
    background-color: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.app-domain-selected-count[hidden] { display: none; }

.app-domain-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.app-domain-bulk-actions .btn-app-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
}

/* ---------- کارت دامنه ---------- */
.app-ticket-list-panel .app-domain-list { padding: 1rem 1.25rem; }

.app-domain-card {
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.app-domain-card:hover {
    background-color: rgba(30, 41, 59, 0.85);
    transform: translateY(-1px);
}

.app-domain-card:focus-visible {
    outline: 2px solid var(--app-accent-hover);
    outline-offset: 2px;
}

.app-domain-card.is-expiring { border-color: rgba(251, 191, 36, 0.4); }

.app-domain-check {
    display: flex;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.app-domain-check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--app-accent);
    cursor: pointer;
}

.app-domain-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-domain-icon-wrap img { display: block; }

.app-domain-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.app-domain-name {
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-domain-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    border-radius: 0.4rem;
    color: #64748b;
    border: 1px solid transparent;
    text-decoration: none;
}

.app-domain-visit:hover {
    color: #fff;
    border-color: var(--app-border-lifted);
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.app-domain-meta {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.app-domain-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.app-domain-meta-item .app-icon { flex-shrink: 0; color: #64748b; }
.app-domain-meta-item .mono { font-family: 'JetBrains Mono', monospace; color: #cbd5e1; }
.app-domain-meta-item.is-expiring { color: #fbbf24; }
.app-domain-meta-item.is-expiring .app-icon,
.app-domain-meta-item.is-expiring .mono { color: #fbbf24; }

.app-domain-badge-warn {
    background-color: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
}

/* وضعیت دامنه - کلیدها از $domain.statusClass خود WHMCS میان */
.app-domain-status {
    color: #94a3b8;
    background-color: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.3);
}
.app-domain-status .dot { background-color: currentColor; }

.app-domain-status.is-active {
    color: #34d399;
    background-color: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}
.app-domain-status.is-pending,
.app-domain-status.is-pending-transfer,
.app-domain-status.is-pending-registration {
    color: #fbbf24;
    background-color: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
}
.app-domain-status.is-expired,
.app-domain-status.is-cancelled,
.app-domain-status.is-fraud {
    color: #fb7185;
    background-color: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.35);
}

/* ---------- کارت هویت دامنه (صفحه جزئیات) ---------- */
.app-domain-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
}

.app-domain-hero-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.app-domain-hero-text { min-width: 0; }

.app-domain-hero-text h2 {
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    overflow-wrap: anywhere;
}

.app-domain-hero-visit {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: #60a5fa;
    text-decoration: none;
}

.app-domain-hero-visit:hover { color: #fff; text-decoration: none; }

.app-domain-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-domain-invoice-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* ---------- نوار تب صفحه جزئیات ---------- */
.app-domain-tabbar {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.app-domain-tabbar::-webkit-scrollbar { display: none; }
.app-domain-tabbar .app-tab { white-space: nowrap; flex-shrink: 0; }

.app-domain-pane { display: none; }
.app-domain-pane.is-active { display: block; }
.app-domain-pane .app-profile-panel { margin-bottom: 0; }

/* ---------- نمای کلی ---------- */
.app-domain-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem 1.5rem;
    padding: 1rem 1.1rem;
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
}

.app-domain-ssl {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
}

.app-domain-ssl.ssl-inactive { opacity: 0.75; }

.app-domain-ssl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-domain-ssl-head img { display: block; flex-shrink: 0; }

.app-domain-ssl-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #e2e8f0;
}

.app-domain-ssl-label {
    font-size: 0.7rem;
    color: var(--app-text-muted);
}

.app-domain-ssl-facts {
    margin-top: 0.9rem;
    background: transparent;
    border: 0;
    padding: 0;
}

/* ---------- میان‌برهای خدمات دامنه ---------- */
.app-domain-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.6rem;
    margin-top: 1rem;
}

.app-domain-quicklink {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    color: #cbd5e1;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.app-domain-quicklink:hover {
    border-color: var(--app-accent);
    background-color: rgba(37, 99, 235, 0.08);
    color: #fff;
    text-decoration: none;
}

.app-domain-quicklink .app-icon { flex-shrink: 0; color: #60a5fa; }

.app-domain-module,
.app-domain-hook {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    font-size: 0.8rem;
    overflow-x: auto;
}

.app-domain-explain {
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--app-text-muted);
    margin: 0 0 1rem;
}

/* ---------- ردیف کلید روشن/خاموش ---------- */
.app-domain-toggle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
}

.app-domain-toggle-state { margin-top: 0.45rem; }
.app-domain-toggle-row form { margin: 0; }

/* ---------- انتخاب رادیویی ---------- */
.app-domain-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.app-domain-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 0.9rem;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--app-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.app-domain-choice:hover { color: #fff; border-color: #475569; }

.app-domain-choice input {
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--app-accent);
    cursor: pointer;
    margin: 0;
}

/* حالت انتخاب‌شده: کلاس is-selected رو هم سرور می‌ذاره و هم
   app-shell.js با هر تغییر همگام می‌کنه؛ :has() برای مرورگرهایی که
   دارنش بدون جاوااسکریپت هم کار می‌کنه */
.app-domain-choice.is-selected,
.app-domain-choice:has(input:checked) {
    border-color: var(--app-accent);
    background-color: rgba(37, 99, 235, 0.1);
    color: #fff;
}

.app-domain-ns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* ---------- افزونه‌های دامنه ---------- */
.app-domain-addons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-domain-addon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
}

.app-domain-addon.is-on { border-color: rgba(52, 211, 153, 0.35); }

.app-domain-addon-text {
    flex: 1;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.app-domain-addon-text strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
}

.app-domain-addon-text span {
    font-size: 0.72rem;
    color: var(--app-text-muted);
    line-height: 1.7;
}

.app-domain-addon-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.app-addon-mark {
    background-color: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.4);
    color: #60a5fa;
}

.app-addon-mark-warn {
    background-color: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

.app-addon-mark-danger {
    background-color: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.35);
    color: #fb7185;
}

/* ---------- جدول رکوردهای DNS ---------- */
.app-dns-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.app-dns-head,
.app-dns-row {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(7rem, 0.9fr) minmax(10rem, 2fr) minmax(5rem, 0.6fr);
    gap: 0.5rem;
    align-items: center;
}

.app-dns-head {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    padding: 0 0.2rem;
}

.app-dns-row.is-new {
    padding-top: 0.75rem;
    border-top: 1px dashed var(--app-border-lifted);
}

.app-dns-cell {
    display: block;
    margin: 0;
    min-width: 0;
}

.app-dns-cell .app-input { width: 100%; }

.app-dns-na {
    display: block;
    font-size: 0.7rem;
    color: #64748b;
    padding: 0.5rem 0.2rem;
}

/* ---------- فورواردینگ ایمیل ---------- */
.app-fwd-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.app-fwd-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: center;
}

.app-fwd-row.is-new {
    padding-top: 0.75rem;
    border-top: 1px dashed var(--app-border-lifted);
}

.app-fwd-cell {
    display: block;
    margin: 0;
    min-width: 0;
}

/* نام دامنه و ایمیل چپ‌به‌راست خونده می‌شن، پس خود جفتِ فیلد+پسوند هم
   باید LTR بچینه؛ وگرنه «@example.com» توی صفحه RTL برعکس («example.com@»)
   دیده می‌شه و ترتیب فیلد و پسوند هم جا‌به‌جا می‌شه */
.app-fwd-control {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.app-fwd-control .app-input {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.app-fwd-control:has(.app-fwd-suffix) .app-input {
    border-radius: 0.65rem 0 0 0.65rem !important;
}

.app-fwd-suffix {
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    font-size: 0.72rem;
    color: var(--app-text-muted);
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-left: 0;
    border-radius: 0 0.65rem 0.65rem 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.app-fwd-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

/* ---------- ورودی نیم‌سرور با پسوند دامنه ---------- */
/* همون دلیل بالا: dir="ltr" روی ظرف، پس ورودی سمت چپ و پسوند دامنه
   سمت راستشه و «ns1.example.com» درست خونده می‌شه */
.app-ns-input {
    display: flex;
    align-items: stretch;
}

.app-ns-input .app-input {
    flex: 1;
    min-width: 0;
    border-radius: 0.65rem 0 0 0.65rem !important;
}

.app-ns-suffix {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    font-size: 0.72rem;
    color: var(--app-text-muted);
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-left: 0;
    border-radius: 0 0.65rem 0.65rem 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- کد EPP ---------- */
.app-epp-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 1.1rem;
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
}

.app-epp-code {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.8rem !important;
}

.app-epp-code.is-copied {
    border-color: #34d399 !important;
    color: #34d399 !important;
}

/* ---------- تب‌های بومی بوت‌استرپ در تم تیره ----------
   کلاس responsive-tabs-sm عمداً از مارک‌آپ برداشته شده: اون زیر
   یه media query پس‌زمینه سفید و حاشیه #ddd با !important می‌ذاره و
   تب‌ها رو روی موبایل به یه ستون روشن تبدیل می‌کنه. هیچ اسکریپتی
   بهش وابسته نیست، فقط CSS بود. */
body.app-shell-body .app-native-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 1px solid var(--app-border-lifted);
    padding: 0 0 0.6rem;
    margin: 0 0 1rem;
    list-style: none;
}

body.app-shell-body .app-native-tabs .nav-item { margin: 0; }

body.app-shell-body .app-native-tabs .nav-link {
    display: block;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--app-border-lifted);
    border-radius: 0.65rem;
    background-color: transparent;
    color: var(--app-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}

body.app-shell-body .app-native-tabs .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

body.app-shell-body .app-native-tabs .nav-link.active {
    background-color: var(--app-accent);
    border-color: transparent;
    color: #fff;
}

.app-whois-tabcontent { padding: 0; }
.app-whois-choice { margin-bottom: 0.9rem; }
.app-whois-pick { margin-bottom: 1.1rem; max-width: 26rem; }
.app-whois-grid { margin-bottom: 0.5rem; }

/* ---------- مدیریت گروهی ---------- */
.app-bulk-domains {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    margin-bottom: 1rem;
}

.app-bulk-domain {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: 999px;
    font-size: 0.7rem;
    color: #cbd5e1;
    font-family: 'JetBrains Mono', monospace;
}

.app-bulk-domain .app-icon { color: #64748b; flex-shrink: 0; }

.app-bulk-errors {
    margin: 0.4rem 0 0;
    padding-inline-start: 1.1rem;
    font-weight: 400;
}

/* ---------- واکنش‌گرایی بخش دامنه ---------- */
@media (max-width: 900px) {
    .app-dns-head { display: none; }

    .app-dns-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.85rem;
        background-color: var(--app-panel-bg-alt);
        border: 1px solid var(--app-border-lifted);
        border-radius: var(--app-radius-md);
    }

    .app-dns-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 0.3rem;
    }

    .app-fwd-row { grid-template-columns: 1fr; }
    .app-fwd-arrow { transform: rotate(-90deg); }

    .app-fwd-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 0.3rem;
    }
}

@media (max-width: 767px) {
    .app-domain-bulkbar { padding: 0.8rem 0.9rem; }
    .app-domain-bulk-actions { width: 100%; }
    .app-domain-bulk-actions .btn-app-ghost { flex: 1 1 8rem; justify-content: center; }

    .app-ticket-list-panel .app-domain-list { padding: 0.9rem; }
    .app-domain-card { padding: 0.9rem; gap: 0.6rem; }
    .app-domain-info { flex: 1 1 100%; min-width: 0; }
    .app-domain-badges { width: 100%; }
    .app-domain-manage-btn { width: 100%; justify-content: center; }

    .app-domain-hero { padding: 1rem; }
    .app-domain-hero-text h2 { font-size: 1rem; }
    .app-domain-hero-badges { width: 100%; }

    .app-domain-facts { padding: 0.9rem; gap: 0.85rem 1rem; }
    .app-domain-toggle-row { flex-direction: column; align-items: stretch; }
    .app-domain-toggle-row form { width: 100%; }
    .app-domain-toggle-row form > button { width: 100%; }

    .app-domain-choice { flex: 1 1 100%; justify-content: center; }
    .app-domain-addon-actions { width: 100%; }
    .app-domain-addon-actions > * { flex: 1; justify-content: center; text-align: center; }

    .app-domain-invoice-alert { flex-direction: column; align-items: stretch; }
    .app-domain-invoice-alert .btn-app-manage { justify-content: center; }

    .app-epp-code { max-width: 100%; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    .app-domain-card,
    .app-domain-quicklink,
    .app-domain-choice { transition: none; }
    .app-domain-card:hover { transform: none; }
}

/* ======================================================================
 * فاصله‌گذاری داخل تب‌های صفحه جزئیات سرویس
 * ======================================================================
 * .app-pd-tabpanel هیچ استایلی نداشت، پس فقط پنل‌هایی که کلاس
 * .app-profile-panel داشتن (و margin-bottom خودشون رو می‌آوردن) فاصله
 * می‌گرفتن. بقیه - قاب خروجی ماژول، کارت‌های مصرف، «انتخاب‌های قابل
 * پیکربندی» - می‌چسبیدن به باکس بالایی. فاصله حالا از خود ظرف میاد و
 * برای همه یکسانه.
 */
/* :not(.w-hidden) لازمه: تب‌های بسته با کلاس .w-hidden مخفی می‌شن که
   display:none با همین وزن سلکتوره، و چون dashboard.css بعد از
   theme.min.css لود می‌شه یه display:flex خالی برنده می‌شد و هر چهار
   تب با هم باز می‌موندن */
.app-pd-tabpanel:not(.w-hidden) {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.app-pd-tabpanel > .app-profile-panel { margin-bottom: 0; }
.app-pd-tabpanel > p { margin: 0; }

/* ======================================================================
 * بخش حساب کاربری - مخاطبین، کاربران، دسترسی‌ها، روش پرداخت، ایمیل‌ها
 * ====================================================================== */

/* ---------- انتخابگر مخاطب ---------- */
.app-contact-picker { padding: 1rem 1.25rem; }

.app-contact-picker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
}

.app-contact-picker-row .app-field {
    flex: 1;
    min-width: 14rem;
}

/* ---------- select هایی که خروجی خام WHMCS ان ---------- */
.app-native-select select {
    width: 100%;
    background-color: var(--app-bg) !important;
    border: 1px solid var(--app-border-lifted) !important;
    border-radius: 0.65rem !important;
    color: var(--app-text) !important;
    font-family: 'Vazirmatn', sans-serif !important;
    font-size: 0.8rem !important;
    padding: 0.55rem 0.75rem !important;
    box-shadow: none !important;
}

/* ---------- ردیف کاربر / مخاطب / روش پرداخت ---------- */
.app-user-list,
.app-paymethod-list,
.app-account-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.app-user-row,
.app-paymethod-row,
.app-account-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
}

.app-paymethod-row.is-default { border-color: rgba(52, 211, 153, 0.35); }
.app-user-row.is-pending { border-style: dashed; }

.app-account-row {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.app-account-row:hover {
    border-color: var(--app-accent);
    background-color: rgba(37, 99, 235, 0.08);
    text-decoration: none;
}

.app-account-row.disabled { opacity: 0.45; pointer-events: none; }
.app-account-name { font-size: 0.85rem; font-weight: 800; color: #fff; }
.app-account-go { margin-inline-start: auto; color: #64748b; flex-shrink: 0; }

.app-user-avatar,
.app-paymethod-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(37, 99, 235, 0.3);
    color: #60a5fa;
}

.app-user-info,
.app-paymethod-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.app-user-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.app-user-name-row strong {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
}

.app-user-email {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    overflow-wrap: anywhere;
}

.app-user-sub {
    font-size: 0.68rem;
    color: var(--app-text-muted);
}

.app-user-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    flex-shrink: 0;
}

.app-user-actions .btn-app-ghost,
.app-user-actions .btn-app-danger { font-size: 0.7rem; }

.app-user-section {
    font-size: 0.68rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: .05em;
    margin-top: 0.5rem;
}

/* دکمه‌های غیرفعال - کلاس disabled روی <a> خودش کاری نمی‌کنه */
.btn-app-ghost.is-disabled,
.btn-app-danger.is-disabled,
.btn-app-manage.is-disabled,
.btn-app-primary-sm.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ---------- فهرست دسترسی‌ها ---------- */
.app-perm-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.6rem;
    margin-top: 1rem;
}

.app-perm-list.w-hidden { display: none; }

.app-perm-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0.75rem 0.9rem;
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.app-perm-item:hover { border-color: #475569; }
.app-perm-item:has(input:checked) {
    border-color: var(--app-accent);
    background-color: rgba(37, 99, 235, 0.08);
}

.app-perm-item input {
    width: 1rem;
    height: 1rem;
    margin: 0.15rem 0 0;
    flex-shrink: 0;
    accent-color: var(--app-accent);
    cursor: pointer;
}

.app-perm-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.app-perm-text strong {
    font-size: 0.78rem;
    font-weight: 800;
    color: #e2e8f0;
}

.app-perm-text span {
    font-size: 0.68rem;
    color: var(--app-text-muted);
    line-height: 1.7;
}

/* ---------- تاریخچه ایمیل ---------- */
.app-email-card { cursor: pointer; }
.app-email-card::before { background-color: var(--app-border-lifted); }
.app-email-clip { color: #60a5fa; vertical-align: middle; margin-inline-start: 0.3rem; }
.app-email-view { flex-shrink: 0; font-size: 0.7rem; }

/* ---------- کلید SSO ---------- */
.app-sso-toggle { cursor: pointer; }
.app-sso-toggle input { width: 1rem; height: 1rem; accent-color: var(--app-accent); }

/* ---------- واکنش‌گرایی ---------- */
@media (max-width: 767px) {
    .app-contact-picker-row { align-items: stretch; }
    .app-contact-picker-row .app-field { min-width: 0; }
    .app-contact-picker-row .btn-app-ghost { justify-content: center; }

    .app-user-row,
    .app-paymethod-row {
        flex-wrap: wrap;
        padding: 0.9rem;
    }

    /* ردیف انتخاب حساب یه خطیه و نباید بشکنه - فلش تهش می‌افتاد خط بعد */
    .app-account-row { padding: 0.9rem; flex-wrap: nowrap; }
    .app-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .app-user-info,
    .app-paymethod-info { flex: 1 1 calc(100% - 3.1rem); }

    .app-user-actions { width: 100%; }
    .app-user-actions > * { flex: 1; justify-content: center; text-align: center; }

    .app-perm-list { grid-template-columns: 1fr; }
    .app-email-view { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .app-account-row,
    .app-perm-item { transition: none; }
}

/* ======================================================================
 * پرداخت گروهی فاکتورها و لیست پیش‌فاکتورها
 * ====================================================================== */

.app-masspay-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-masspay-invoice {
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    overflow: hidden;
}

.app-masspay-invoice-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0.9rem;
    background-color: var(--app-panel-bg-alt);
    border-bottom: 1px solid var(--app-border-lifted);
    font-size: 0.78rem;
    color: #e2e8f0;
}

.app-masspay-invoice-head .app-icon { color: #60a5fa; flex-shrink: 0; }
.app-masspay-invoice-head .mono { color: #fff; }

.app-masspay-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.78rem;
    color: var(--app-text);
    border-bottom: 1px solid var(--app-border);
}

.app-masspay-item:last-child { border-bottom: 0; }
.app-masspay-item > span:first-child { overflow-wrap: anywhere; }
.app-masspay-item .mono { flex-shrink: 0; color: #cbd5e1; }

.app-masspay-totals {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app-masspay-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--app-text-muted);
}

.app-masspay-total .mono { color: #e2e8f0; font-weight: 700; }
.app-masspay-total.is-credit .mono { color: #34d399; }

.app-masspay-total.is-grand {
    padding-top: 0.6rem;
    border-top: 1px solid var(--app-border-lifted);
    font-weight: 800;
    color: #fff;
}

.app-masspay-total.is-grand .mono { color: #34d399; font-size: 0.95rem; }

.app-masspay-gateway .app-field { max-width: 24rem; }

/* ---------- لیست پیش‌فاکتورها ---------- */
.app-quote-card { cursor: pointer; }
.app-quote-card.is-accepted::before { background-color: #34d399; }
.app-quote-card.is-open::before { background-color: #60a5fa; }
.app-quote-dl { margin: 0; flex-shrink: 0; }
.app-quote-dl .btn-app-ghost { font-size: 0.7rem; }

/* مرحله پیش‌فاکتور - کلیدها از $quote.stageClass خود WHMCS میان */
.app-ticket-status.is-accepted {
    color: #34d399;
    background-color: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}
.app-ticket-status.is-delivered {
    color: #fbbf24;
    background-color: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
}
.app-ticket-status.is-lost,
.app-ticket-status.is-dead {
    color: #fb7185;
    background-color: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.35);
}

@media (max-width: 767px) {
    .app-masspay-item { flex-direction: column; gap: 0.2rem; }
    .app-masspay-gateway .app-field { max-width: none; }
    .app-quote-dl { width: 100%; }
    .app-quote-dl .btn-app-ghost { width: 100%; justify-content: center; }
}

/* ======================================================================
 * یکدست کردن دکمه‌ها
 * ======================================================================
 * <button> فونت صفحه رو ارث نمی‌بره و حاشیه بومی مرورگر رو هم نگه
 * می‌داره. هیچ‌کدوم از کلاس‌های btn-app-* این دو تا رو ست نکرده بودن،
 * برای همین <a class="btn-app-primary-sm"> با وزیرمتن رندر می‌شد ولی
 * <button class="btn-app-primary-sm"> با فونت پیش‌فرض سیستم و یه خط
 * دور خودش - دقیقاً همون چیزی که وصله‌ای توی .app-tab با font-family
 * و !important درست شده بود و جای دیگه نه.
 */
.btn-app-primary,
.btn-app-primary-sm,
.btn-app-ghost,
.btn-app-danger,
.btn-app-manage,
.btn-app-outline {
    font-family: 'Vazirmatn', sans-serif;
    line-height: 1.5;
    cursor: pointer;
}

button.btn-app-primary,
button.btn-app-primary-sm,
button.btn-app-ghost,
button.btn-app-danger,
button.btn-app-manage,
button.btn-app-outline,
input.btn-app-primary-sm,
input.btn-app-ghost {
    -webkit-appearance: none;
    appearance: none;
}

/* این سه تا حاشیه‌ای تعریف نکرده بودن، پس روی <button> حاشیه بومی
   مرورگر می‌موند و کنار نسخه <a> ناهمگون دیده می‌شد */
button.btn-app-primary,
button.btn-app-primary-sm,
button.btn-app-manage {
    border: 0;
}

/* تا آیکن و متن داخل دکمه‌های ghost هم مثل بقیه ردیف بشن */
.btn-app-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ---------- انتخاب درگاه در پرداخت گروهی ---------- */
.app-gateway-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.6rem;
    margin-bottom: 0;
}

.app-gateway-choices .app-domain-choice {
    justify-content: flex-start;
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
}

.app-masspay-pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-radius: var(--app-radius-md);
}

.app-masspay-pay-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    font-weight: 800;
    color: #34d399;
    margin-top: 0.25rem;
}

.app-masspay-pay .btn-app-primary-sm {
    padding: 0.7rem 1.6rem;
    font-size: 0.85rem;
}

@media (max-width: 767px) {
    .app-gateway-choices { grid-template-columns: 1fr; }
    .app-masspay-pay { flex-direction: column; align-items: stretch; }
    .app-masspay-pay .btn-app-primary-sm { justify-content: center; }
}

/* ---------- شارژ کیف پول ---------- */
.app-addfunds-amount { max-width: 22rem; }

/* واحد پول چسبیده به فیلد مبلغ؛ ظرف dir="ltr" ـه چون عدد و واحد
   چپ‌به‌راست خونده می‌شن */
.app-amount-input {
    display: flex;
    align-items: stretch;
}

.app-amount-input .app-input {
    flex: 1;
    min-width: 0;
    border-radius: 0.65rem 0 0 0.65rem !important;
    font-size: 0.95rem !important;
    text-align: left;
}

.app-amount-suffix {
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--app-text-muted);
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    border-left: 0;
    border-radius: 0 0.65rem 0.65rem 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* .app-profile-actions-start پدینگ بالاش صفره، پس بدون این فاصله،
   کادر هشدار می‌چسبید به دکمه‌های پایینش */
.app-addfunds-note { margin-bottom: 1.25rem; }

/* مبلغ به حروف، زیر فیلد مبلغ */
.app-amount-words {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background-color: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #34d399;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.app-amount-words[hidden] { display: none; }

.app-addfunds-gateways { margin-top: 1.25rem; }
.app-addfunds-gateways > label { margin-bottom: 0.15rem; }
.app-addfunds-gateways .app-gateway-choices { margin-bottom: 0; }

@media (max-width: 767px) {
    .app-addfunds-amount { max-width: none; }
}