html, body {
font-family: 'font_IRANYekan', 'font_Shabnam', 'font_samim', 'font_Vazir', Tahoma, sans-serif !important;
}
.valex-shell.page {
display: block;
min-height: 100vh;
}
.valex-shell .app-header,
.valex-shell .app-sidebar,
.valex-shell .main-content,
.valex-shell .footer {
font-family: 'font_IRANYekan', 'font_Shabnam', 'font_samim', 'font_Vazir', Tahoma, sans-serif;
}
.valex-header-title {
color: var(--default-text-color);
font-size: .875rem;
font-weight: 600;
}
.valex-brand-chip {
align-items: center;
gap: .55rem;
color: var(--default-text-color);
font-weight: 700;
text-decoration: none;
}
.valex-logo {
align-items: center;
display: flex;
gap: .65rem;
justify-content: center;
text-decoration: none;
}
.valex-logo-mark {
align-items: center;
background: var(--primary-color);
border-radius: .6rem;
box-shadow: 0 5px 12px rgba(var(--primary-rgb), .25);
color: #fff;
display: inline-flex;
font-size: 1.25rem;
height: 2.25rem;
justify-content: center;
width: 2.25rem;
}
.valex-logo-text {
color: var(--default-text-color);
font-size: 1.2rem;
font-weight: 800;
}
.valex-content {
min-height: calc(100vh - 10rem);
}
.valex-shell .side-menu__item.active {
color: var(--primary-color) !important;
}
.valex-shell .side-menu__item.active .side-menu__icon {
color: var(--primary-color) !important;
}
.valex-empty-state {
align-items: center;
color: var(--text-muted);
display: flex;
flex-direction: column;
gap: .75rem;
justify-content: center;
min-height: 14rem;
padding: 2rem;
text-align: center;
}
.valex-empty-state i {
color: rgba(var(--primary-rgb), .45);
font-size: 3rem;
}
.valex-empty-state p {
margin: 0;
}
.valex-quick-actions {
display: grid;
gap: .35rem;
}
.valex-quick-actions > a {
align-items: center;
border-radius: .5rem;
color: var(--default-text-color);
display: grid;
gap: .75rem;
grid-template-columns: auto 1fr auto;
padding: .75rem;
text-decoration: none;
transition: background-color .2s ease, transform .2s ease;
}
.valex-quick-actions > a:hover {
background: rgba(var(--primary-rgb), .07);
transform: translateX(-3px);
}
.valex-quick-actions b,
.valex-quick-actions small {
display: block;
}
.valex-quick-actions small {
color: var(--text-muted);
margin-top: .15rem;
}
.valex-shell .mahfel-prejoin {
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .65rem;
box-shadow: var(--default-box-shadow);
color: var(--default-text-color);
margin: 1.5rem auto;
padding: 1.5rem;
}
.valex-shell .mahfel-prejoin input,
.valex-shell .mahfel-prejoin select,
.valex-shell .mahfel-prejoin textarea,
.valex-shell .ft-archive-input,
.valex-shell .ais-card input,
.valex-shell .ais-card select {
background-color: var(--form-control-bg);
border: 1px solid var(--input-border);
border-radius: .35rem;
color: var(--default-text-color);
min-height: 2.35rem;
padding: .45rem .75rem;
}
.valex-shell .ais-card,
.valex-shell .ft-archive-card {
background: var(--custom-white);
border: 1px solid var(--default-border);
box-shadow: var(--default-box-shadow);
color: var(--default-text-color);
}
.valex-shell .ft-archive-page {
background: transparent;
min-height: auto;
padding: 1.5rem 0 3rem;
}
.valex-shell .ft-archive {
color: var(--default-text-color);
max-width: none;
}
.valex-shell .ft-archive-count,
.valex-shell .ft-archive-empty,
.valex-shell .ft-archive-meta {
color: var(--text-muted);
}
.valex-shell .ft-archive-card {
border-radius: .65rem;
margin-bottom: 1rem;
}
.valex-shell .ft-archive-search {
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .65rem;
margin-bottom: 1rem;
padding: 1rem;
}
.valex-shell .mahfel-btn {
align-items: center;
background: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: .35rem;
color: #fff;
display: inline-flex;
gap: .35rem;
justify-content: center;
padding: .45rem .85rem;
}
.valex-shell .mahfel-btn:hover {
background: rgb(var(--primary-rgb));
color: #fff;
filter: brightness(.94);
}
.valex-shell .mahfel-btn-secondary {
background: var(--light);
border-color: var(--default-border);
color: var(--default-text-color);
}
.valex-shell .mahfel-btn-secondary:hover {
background: rgba(var(--primary-rgb), .08);
color: var(--primary-color);
}
.valex-shell .mahfel-btn.ais-del {
background: rgb(var(--danger-rgb));
border-color: rgb(var(--danger-rgb));
}
.valex-shell .table {
color: var(--default-text-color);
}
.valex-shell .table-dark {
--bs-table-bg: var(--custom-white);
--bs-table-striped-bg: rgba(var(--primary-rgb), .035);
--bs-table-striped-color: var(--default-text-color);
--bs-table-color: var(--default-text-color);
--bs-table-border-color: var(--default-border);
}
.valex-shell h1,
.valex-shell h2,
.valex-shell h3,
.valex-shell h4,
.valex-shell h5,
.valex-shell h6 {
color: var(--default-text-color);
}
.valex-shell .page-header-breadcrumb {
margin-block-start: 0;
padding-block-start: 1.5rem;
}
.valex-shell .page-header-breadcrumb .breadcrumb {
direction: rtl;
}
.valex-shell .page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
color: var(--text-muted);
content: ">";
float: right;
padding-left: .5rem;
}
.valex-shell .card-body > .ft-archive-page {
min-height: auto;
padding: 0;
}
.valex-shell .ft-archive,
.valex-shell .ft-archive-room,
.valex-shell .ft-decl-topic,
.valex-shell .ft-decl-decision,
.valex-shell .ft-decl-task,
.valex-shell .ft-ws-task,
.valex-shell .ft-ws-topic,
.valex-shell .ft-ws-file {
color: var(--default-text-color);
}
.valex-shell .ft-archive-search {
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .65rem;
margin-bottom: 1rem;
padding: 1rem;
}
.valex-shell .ft-archive-input {
background-color: var(--form-control-bg);
border: 1px solid var(--input-border);
border-radius: .35rem;
color: var(--default-text-color);
min-height: 2.35rem;
padding: .45rem .75rem;
}
.valex-shell .ft-archive-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .12);
}
.valex-shell .ft-archive-count,
.valex-shell .ft-archive-empty,
.valex-shell .ft-archive-meta,
.valex-shell .ft-archive-more,
.valex-shell .ft-archive-sp,
.valex-shell .ft-ws-summary,
.valex-shell .ft-ws-sub,
.valex-shell .ft-ws-task-meta,
.valex-shell .ft-decl-sectitle {
color: var(--text-muted);
}
.valex-shell .ft-archive-card {
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .65rem;
box-shadow: var(--default-box-shadow);
color: var(--default-text-color);
margin-bottom: 1rem;
overflow: hidden;
}
.valex-shell .ft-badge {
background: var(--light);
border: 1px solid var(--default-border);
color: var(--text-muted);
}
.valex-shell .ft-badge.ok {
background: rgba(var(--success-rgb), .12);
border-color: rgba(var(--success-rgb), .22);
color: #15803d;
}
.valex-shell .ft-badge.warn {
background: rgba(var(--warning-rgb), .14);
border-color: rgba(var(--warning-rgb), .28);
color: #9a6200;
}
.valex-shell .bg-warning-transparent {
color: #9a6200 !important;
}
.valex-shell .bg-success-transparent {
color: #15803d !important;
}
.valex-shell .ft-decl-stats b {
color: #9a6200;
}
.valex-shell .ft-briefing-who {
border-color: rgba(var(--warning-rgb), .4);
color: #9a6200;
}
.valex-shell .ft-briefing-when {
border-color: var(--default-border);
color: var(--text-muted);
}
.valex-shell .ft-archive-match {
border-bottom: 1px dashed var(--default-border);
}
.valex-shell .ft-archive-tx mark {
background: rgba(var(--warning-rgb), .18);
color: #9a6200;
}
.valex-shell .ft-ws-body,
.valex-shell .ft-archive-matches {
border-top: 1px solid var(--default-border);
}
.valex-shell .ft-ws-decision,
.valex-shell .ft-decl-decision {
background: rgba(var(--primary-rgb), .07);
border-right-color: var(--primary-color);
}
.valex-shell .ft-ws-file:hover {
background: rgba(var(--primary-rgb), .07);
color: var(--primary-color);
}
.valex-shell .ft-decl-task {
background: rgba(var(--primary-rgb), .035);
border: 1px solid var(--default-border);
}
.valex-shell .ft-decl-task input[type="checkbox"],
.valex-shell .ft-ws-task input[type="checkbox"] {
accent-color: var(--primary-color);
}
/* ---------- لیست ثبتنامیها ---------- */
.reg-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
margin-bottom: 1rem;
}
.reg-search {
position: relative;
flex: 1 1 240px;
min-width: 200px;
}
.reg-search > i {
color: var(--text-muted);
font-size: 1.05rem;
inset-inline-start: .7rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.reg-search > input {
padding-inline-start: 2.2rem;
padding-inline-end: 2rem;
}
.reg-clear {
background: transparent;
border: 0;
color: var(--text-muted);
inset-inline-end: .55rem;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.reg-clear:hover {
color: rgb(var(--danger-rgb));
}
.reg-room {
flex: 0 1 190px;
min-width: 150px;
}
.reg-sel {
flex: 0 0 auto;
min-width: 8.5rem;
width: auto;
}
.reg-pagesize {
min-width: 6.5rem;
}
.reg-chips {
display: inline-flex;
gap: .4rem;
}
.reg-chip {
align-items: center;
background: var(--light);
border: 1px solid var(--default-border);
border-radius: 999px;
color: var(--text-muted);
display: inline-flex;
font-size: .78rem;
gap: .35rem;
padding: .3rem .8rem;
transition: all .15s ease;
}
.reg-chip:hover {
border-color: rgba(var(--primary-rgb), .45);
color: var(--primary-color);
}
.reg-chip.sel {
background: rgba(var(--primary-rgb), .1);
border-color: rgba(var(--primary-rgb), .5);
color: var(--primary-color);
font-weight: 600;
}
.reg-dot {
background: #22c55e;
border-radius: 50%;
display: inline-block;
height: .5rem;
width: .5rem;
animation: reg-pulse 1.6s ease-in-out infinite;
}
@keyframes reg-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
50% { box-shadow: 0 0 0 .35rem rgba(34, 197, 94, 0); }
}
.reg-table tbody tr {
cursor: pointer;
}
.reg-wrap.busy {
opacity: .55;
transition: opacity .15s ease;
}
.reg-person {
align-items: center;
display: flex;
gap: .65rem;
}
.reg-person-tx {
display: flex;
flex-direction: column;
min-width: 0;
}
.reg-person-tx b {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 16rem;
}
.reg-person-tx small {
color: var(--text-muted);
font-size: .72rem;
}
.reg-avatar {
align-items: center;
border-radius: 50%;
color: #fff;
display: inline-flex;
flex-shrink: 0;
font-size: .9rem;
font-weight: 700;
height: 2.3rem;
justify-content: center;
width: 2.3rem;
}
.reg-avatar.lg {
font-size: 1.35rem;
height: 3.2rem;
width: 3.2rem;
}
.reg-avatar.av-0 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.reg-avatar.av-1 { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.reg-avatar.av-2 { background: linear-gradient(135deg, #10b981, #34d399); }
.reg-avatar.av-3 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.reg-avatar.av-4 { background: linear-gradient(135deg, #ef4444, #f87171); }
.reg-avatar.av-5 { background: linear-gradient(135deg, #ec4899, #f472b6); }
.reg-avatar.av-6 { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.reg-avatar.av-7 { background: linear-gradient(135deg, #8b5cf6, #c084fc); }
.reg-live {
align-items: center;
display: inline-flex;
gap: .4rem;
}
.reg-eng {
align-items: center;
color: var(--text-muted);
display: inline-flex;
font-size: .8rem;
gap: .25rem;
margin-inline-end: .7rem;
}
.reg-footer {
align-items: center;
border-top: 1px solid var(--default-border);
display: flex;
flex-wrap: wrap;
gap: .75rem;
justify-content: space-between;
padding-top: .9rem;
margin-top: .5rem;
}
.reg-pager .page-link {
border-color: var(--default-border);
color: var(--default-text-color);
background: var(--custom-white);
}
.reg-pager .page-item.active .page-link {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.reg-pager .page-item.disabled .page-link {
background: var(--light);
color: var(--text-muted);
}
.reg-skeleton {
display: flex;
flex-direction: column;
gap: .55rem;
padding: .4rem 0;
}
.reg-skel-row {
align-items: center;
display: flex;
gap: .8rem;
}
.reg-skel-row i,
.reg-skel-row b {
animation: reg-shimmer 1.4s ease-in-out infinite;
background: linear-gradient(90deg, rgba(var(--primary-rgb), .07) 25%, rgba(var(--primary-rgb), .16) 50%, rgba(var(--primary-rgb), .07) 75%);
background-size: 200% 100%;
border-radius: .4rem;
display: inline-block;
height: .9rem;
}
.reg-skel-row i {
border-radius: 50%;
height: 2.3rem;
width: 2.3rem;
}
@keyframes reg-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* مودال جزئیات — روی تم روشن valex */
.valex-shell .mahfel-modal-content.reg-detail {
background: var(--custom-white);
border-color: var(--default-border);
color: var(--default-text-color);
max-width: 46rem;
width: 94%;
}
.reg-detail-head {
align-items: center;
display: flex;
gap: .9rem;
margin-bottom: 1rem;
}
.reg-detail-title {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.reg-account {
align-items: center;
background: rgba(var(--primary-rgb), .05);
border: 1px solid rgba(var(--primary-rgb), .18);
border-radius: .55rem;
display: flex;
flex-wrap: wrap;
gap: .5rem 1.2rem;
margin-bottom: 1rem;
padding: .7rem .9rem;
}
.reg-account > span {
align-items: center;
display: inline-flex;
gap: .35rem;
}
.reg-detail-sessions {
border: 1px solid var(--default-border);
border-radius: .55rem;
max-height: 22rem;
overflow-y: auto;
}
.reg-tabs {
display: flex;
gap: .5rem;
}
.reg-chip.lg {
font-size: .85rem;
padding: .45rem 1.1rem;
}
.reg-chip.lg i {
font-size: 1rem;
}
.reg-off td {
opacity: .55;
}
.reg-detail-sub {
color: var(--text-muted);
font-size: .8rem;
font-weight: 600;
margin: .9rem 0 .4rem;
}
@media (max-width: 991.98px) {
.valex-header-title {
display: none;
}
.valex-shell .ft-archive-head,
.valex-shell .ft-archive-search {
align-items: stretch;
flex-direction: column;
}
.reg-toolbar {
align-items: stretch;
flex-direction: column;
}
.reg-search,
.reg-room,
.reg-sel {
flex: 1 1 auto;
min-width: 0;
width: 100%;
}
.reg-chips {
flex-wrap: wrap;
}
}
.ft-menu-live-dot {
animation: ft-live-pulse 1.8s ease-out infinite;
background: #12c27e;
border-radius: 50%;
height: 7px;
width: 7px;
}
.ft-status-autorefresh {
align-items: center;
color: var(--text-muted);
display: inline-flex;
font-size: .75rem;
gap: .35rem;
margin-inline-start: .8rem;
}
.ft-status-spin {
animation: ft-status-spin .8s linear infinite;
display: inline-block;
}
@keyframes ft-status-spin {
to { transform: rotate(360deg); }
}
.ft-status-loading {
align-items: center;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: 1rem;
display: flex;
flex-direction: column;
gap: .75rem;
justify-content: center;
min-height: 360px;
}
.ft-status-loading small {
color: var(--text-muted);
}
.ft-status-hero {
align-items: center;
background: linear-gradient(120deg, rgba(18, 194, 126, .13), rgba(18, 194, 126, .035));
border: 1px solid rgba(18, 194, 126, .24);
border-radius: 1.15rem;
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
overflow: hidden;
padding: 1.35rem 1.5rem;
position: relative;
}
.ft-status-hero::after {
background: radial-gradient(circle, rgba(18, 194, 126, .11), transparent 66%);
content: "";
height: 220px;
left: -40px;
position: absolute;
top: -100px;
width: 220px;
}
.ft-status-hero.has-warning {
background: linear-gradient(120deg, rgba(245, 166, 35, .13), rgba(245, 166, 35, .035));
border-color: rgba(245, 166, 35, .28);
}
.ft-status-hero-icon {
align-items: center;
background: #12c27e;
border-radius: 1rem;
box-shadow: 0 9px 25px rgba(18, 194, 126, .2);
color: #fff;
display: flex;
flex: 0 0 54px;
font-size: 1.7rem;
height: 54px;
justify-content: center;
}
.ft-status-hero.has-warning .ft-status-hero-icon {
background: #f5a623;
box-shadow: 0 9px 25px rgba(245, 166, 35, .2);
}
.ft-status-hero-copy {
min-width: 0;
}
.ft-status-eyebrow {
color: #0e9864;
display: block;
font-size: .7rem;
font-weight: 700;
margin-bottom: .2rem;
}
.ft-status-hero.has-warning .ft-status-eyebrow {
color: #c67c08;
}
.ft-status-hero h2 {
font-size: 1.15rem;
margin: 0 0 .3rem;
}
.ft-status-hero p {
color: var(--text-muted);
font-size: .78rem;
margin: 0;
}
.ft-status-live-pill {
align-items: center;
background: rgba(18, 194, 126, .11);
border-radius: 2rem;
color: #0e9864;
display: flex;
font-size: .72rem;
font-weight: 700;
gap: .4rem;
margin-inline-start: auto;
padding: .42rem .7rem;
white-space: nowrap;
}
.ft-status-live-pill span,
.ft-live-dot {
animation: ft-live-pulse 1.8s ease-out infinite;
background: #12c27e;
border-radius: 50%;
display: inline-block;
height: 7px;
width: 7px;
}
@keyframes ft-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(18, 194, 126, .5); }
70% { box-shadow: 0 0 0 6px rgba(18, 194, 126, 0); }
100% { box-shadow: 0 0 0 0 rgba(18, 194, 126, 0); }
}
.ft-status-kpis {
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 1.5rem;
}
.ft-status-kpi {
align-items: center;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: 1rem;
display: grid;
gap: .7rem;
grid-template-columns: auto 1fr;
padding: 1rem;
transition: transform .2s ease, box-shadow .2s ease;
}
.ft-status-kpi:hover {
box-shadow: 0 9px 28px rgba(20, 32, 70, .07);
transform: translateY(-2px);
}
.ft-status-kpi-icon {
align-items: center;
border-radius: .8rem;
display: flex;
font-size: 1.25rem;
height: 42px;
justify-content: center;
width: 42px;
}
.ft-status-kpi-icon.purple { background: rgba(132, 90, 223, .12); color: #845adf; }
.ft-status-kpi-icon.blue { background: rgba(73, 182, 245, .13); color: #269bdc; }
.ft-status-kpi-icon.green { background: rgba(18, 194, 126, .12); color: #0eaa6d; }
.ft-status-kpi-icon.orange { background: rgba(245, 166, 35, .13); color: #d98a0c; }
.ft-status-kpi div {
display: flex;
flex-direction: column;
}
.ft-status-kpi b {
font-size: 1.3rem;
line-height: 1.15;
}
.ft-status-kpi div span,
.ft-status-kpi > small {
color: var(--text-muted);
font-size: .68rem;
}
.ft-status-kpi > small {
grid-column: 1 / -1;
}
.ft-status-card {
border-radius: 1rem;
overflow: hidden;
}
.ft-status-card .card-header {
min-height: 68px;
}
.ft-status-card .card-header small {
display: block;
font-size: .67rem;
margin-top: .2rem;
}
.ft-status-summary {
border-radius: 2rem;
font-size: .67rem;
font-weight: 700;
padding: .38rem .65rem;
}
.ft-status-summary.ok { background: rgba(18, 194, 126, .11); color: #0e9864; }
.ft-status-summary.warn { background: rgba(245, 166, 35, .13); color: #c67c08; }
.ft-service-row {
align-items: center;
border-bottom: 1px solid var(--default-border);
display: flex;
gap: .85rem;
min-height: 76px;
padding: .85rem 1.25rem;
}
.ft-service-row:last-child {
border-bottom: 0;
}
.ft-service-state {
align-items: center;
border-radius: 50%;
display: flex;
flex: 0 0 32px;
font-size: 1rem;
height: 32px;
justify-content: center;
}
.ft-service-state.ok { background: rgba(18, 194, 126, .12); color: #0eaa6d; }
.ft-service-state.down { background: rgba(239, 71, 111, .11); color: #ef476f; }
.ft-service-main {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.ft-service-main b {
font-size: .79rem;
}
.ft-service-main span,
.ft-service-main small,
.ft-service-meta small {
color: var(--text-muted);
font-size: .65rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ft-service-main small {
color: #d86b22;
}
.ft-service-meta {
align-items: flex-end;
display: flex;
flex: 0 0 92px;
flex-direction: column;
}
.ft-service-meta > span {
font-size: .67rem;
font-weight: 700;
}
.ft-service-meta > span.ok { color: #0eaa6d; }
.ft-service-meta > span.down { color: #ef476f; }
.ft-storage-overview {
align-items: center;
display: flex;
gap: 1.25rem;
justify-content: center;
margin-bottom: 1.4rem;
}
.ft-storage-ring {
align-items: center;
background: conic-gradient(var(--primary-color) var(--usage), rgba(var(--primary-rgb), .1) 0);
border-radius: 50%;
display: flex;
flex: 0 0 124px;
height: 124px;
justify-content: center;
position: relative;
}
.ft-storage-ring::before {
background: var(--custom-white);
border-radius: 50%;
content: "";
inset: 10px;
position: absolute;
}
.ft-storage-ring div {
align-items: center;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.ft-storage-ring b {
font-size: 1.3rem;
}
.ft-storage-ring span,
.ft-storage-numbers small,
.ft-storage-item small {
color: var(--text-muted);
font-size: .63rem;
}
.ft-storage-numbers {
display: flex;
flex-direction: column;
gap: .55rem;
}
.ft-storage-numbers span {
display: flex;
flex-direction: column;
}
.ft-storage-numbers b {
font-size: .78rem;
}
.ft-storage-list {
border-top: 1px solid var(--default-border);
padding-top: .5rem;
}
.ft-storage-item {
align-items: center;
display: flex;
gap: .65rem;
padding: .55rem 0;
}
.ft-storage-dot {
background: rgba(var(--primary-rgb), .7);
border-radius: 3px;
height: 9px;
width: 9px;
}
.ft-storage-item:nth-child(2) .ft-storage-dot { background: #12c27e; }
.ft-storage-item:nth-child(3) .ft-storage-dot { background: #f5a623; }
.ft-storage-item:nth-child(4) .ft-storage-dot { background: #49b6f5; }
.ft-storage-item div {
display: flex;
flex: 1;
flex-direction: column;
}
.ft-storage-item b,
.ft-storage-item strong {
font-size: .7rem;
}
.ft-status-empty {
align-items: center;
display: flex;
flex-direction: column;
gap: .45rem;
justify-content: center;
min-height: 230px;
padding: 1.5rem;
text-align: center;
}
.ft-status-empty > span {
align-items: center;
background: rgba(var(--primary-rgb), .08);
border-radius: 50%;
color: var(--primary-color);
display: flex;
font-size: 1.6rem;
height: 54px;
justify-content: center;
margin-bottom: .35rem;
width: 54px;
}
.ft-status-empty small {
color: var(--text-muted);
margin-bottom: .45rem;
}
.ft-live-table td,
.ft-live-table th {
font-size: .72rem;
padding: .85rem 1rem;
}
.ft-live-table .ft-live-dot {
margin-inline-end: .55rem;
}
.ft-runtime-card .card-body {
padding: .5rem 1.25rem;
}
.ft-runtime-row {
align-items: center;
border-bottom: 1px solid var(--default-border);
display: flex;
justify-content: space-between;
padding: .9rem 0;
}
.ft-runtime-row:last-child {
border: 0;
}
.ft-runtime-row span {
color: var(--text-muted);
font-size: .72rem;
}
.ft-runtime-row span i {
color: var(--primary-color);
margin-inline-end: .35rem;
}
.ft-runtime-row b {
font-size: .72rem;
}
@media (max-width: 1199.98px) {
.ft-status-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
.ft-status-autorefresh { display: none; }
.ft-status-hero { align-items: flex-start; padding: 1rem; }
.ft-status-hero-icon { flex-basis: 44px; height: 44px; }
.ft-status-hero h2 { font-size: .95rem; }
.ft-status-live-pill { display: none; }
.ft-status-kpis { grid-template-columns: 1fr; }
.ft-service-row { padding: .8rem; }
.ft-service-meta { flex-basis: 76px; }
.ft-storage-overview { align-items: center; flex-direction: column; }
}
.ops-loading { align-items:center; display:flex; flex-direction:column; gap:.8rem; justify-content:center; min-height:360px; }
.ops-loading p { color:var(--text-muted); }
.ops-hero { align-items:center; background:linear-gradient(120deg,rgba(18,194,126,.13),rgba(18,194,126,.035)); border:1px solid rgba(18,194,126,.24); border-radius:1.15rem; display:flex; gap:1rem; margin-bottom:1.25rem; padding:1.25rem 1.5rem; }
.ops-hero.attention { background:linear-gradient(120deg,rgba(245,166,35,.13),rgba(245,166,35,.035)); border-color:rgba(245,166,35,.28); }
.ops-hero-icon { align-items:center; background:#12c27e; border-radius:1rem; color:#fff; display:flex; flex:0 0 52px; font-size:1.6rem; height:52px; justify-content:center; }
.ops-hero.attention .ops-hero-icon { background:#f5a623; }
.ops-hero h4 { font-size:1.05rem; margin:0 0 .3rem; }
.ops-hero p { color:var(--text-muted); font-size:.75rem; margin:0; }
.ops-score { align-items:flex-end; display:flex; flex-direction:column; margin-inline-start:auto; }
.ops-score strong { color:#12a971; font-size:1.5rem; }
.ops-score span { color:var(--text-muted); font-size:.68rem; }
.ops-stat { align-items:center; background:var(--custom-white); border:1px solid var(--default-border); border-radius:1rem; display:flex; gap:.8rem; min-height:86px; padding:1rem; transition:.2s ease; }
.ops-stat:hover { box-shadow:0 9px 28px rgba(20,32,70,.07); transform:translateY(-2px); }
.ops-stat > span { align-items:center; border-radius:.8rem; display:flex; flex:0 0 42px; font-size:1.25rem; height:42px; justify-content:center; }
.ops-stat div { display:flex; flex-direction:column; min-width:0; }
.ops-stat strong { font-size:1.2rem; }
.ops-stat small { color:var(--text-muted); font-size:.68rem; }
.ops-services { display:flex; flex-direction:column; }
.ops-service { align-items:center; border-bottom:1px solid var(--default-border); display:flex; gap:.8rem; min-height:76px; padding:.8rem 1.25rem; }
.ops-service:last-child { border:0; }
.ops-dot { border-radius:50%; flex:0 0 9px; height:9px; }
.ops-dot.ok { background:#12c27e; box-shadow:0 0 0 5px rgba(18,194,126,.1); }
.ops-dot.bad { background:#e6533c; box-shadow:0 0 0 5px rgba(230,83,60,.1); }
.ops-service-main { display:flex; flex:1; flex-direction:column; min-width:0; }
.ops-service-main b { font-size:.78rem; }
.ops-service-main small,.ops-service-main em { color:var(--text-muted); font-size:.65rem; font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-service-main em { color:#d98a0c; }
.ops-latency { color:var(--text-muted); font-size:.7rem; min-width:58px; text-align:left; }
.ops-storage { align-items:center; border-bottom:1px solid var(--default-border); display:flex; justify-content:space-between; padding:.75rem 0; }
.ops-storage div { display:flex; flex-direction:column; }
.ops-storage b,.ops-storage strong { font-size:.75rem; }
.ops-storage small,.ops-disk small { color:var(--text-muted); font-size:.65rem; }
.ops-disk { background:rgba(var(--primary-rgb),.035); border-radius:.8rem; font-size:.7rem; margin-top:1rem; padding:1rem; }
.ops-disk .progress { height:7px; margin:.7rem 0; }
.spin { animation:ft-status-spin .8s linear infinite; display:inline-block; }
.library-toolbar { align-items:center; display:flex; gap:1rem; justify-content:space-between; }
.library-tabs { display:flex; gap:.25rem; }
.library-tabs button { background:transparent; border:0; border-radius:.55rem; color:var(--text-muted); font-size:.72rem; padding:.5rem .8rem; }
.library-tabs button.active { background:rgba(var(--primary-rgb),.1); color:var(--primary-color); font-weight:700; }
.library-search { align-items:center; background:var(--form-control-bg); border:1px solid var(--input-border); border-radius:.65rem; display:flex; gap:.45rem; min-width:260px; padding:0 .7rem; }
.library-search i { color:var(--text-muted); }
.library-search .k-input { background:transparent; border:0; box-shadow:none; flex:1; height:auto; min-width:0; padding:0; }
.library-search .k-input:focus-within,.library-search .k-input.k-focus { box-shadow:none; }
.library-search input { background:transparent; border:0; color:var(--default-text-color); font-size:.72rem; height:36px; outline:0; width:100%; }
.library-search input.k-input-inner { direction:rtl; text-align:right; }
.library-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.library-item { background:var(--custom-white); border:1px solid var(--default-border); border-radius:1rem; overflow:hidden; transition:.2s ease; }
.library-item:hover { box-shadow:0 10px 30px rgba(20,32,70,.08); transform:translateY(-2px); }
.library-preview { align-items:center; background:linear-gradient(135deg,rgba(132,90,223,.11),rgba(73,182,245,.09)); color:#845adf; display:flex; font-size:2rem; height:105px; justify-content:center; position:relative; }
.library-preview.video { background:linear-gradient(135deg,rgba(230,83,60,.11),rgba(245,166,35,.1)); color:#e6533c; }
.library-preview.audio { background:linear-gradient(135deg,rgba(18,194,126,.12),rgba(73,182,245,.09)); color:#12a971; }
.library-preview.image { color:#269bdc; }
.library-rec { align-items:center; background:rgba(230,83,60,.92); border-radius:2rem; color:#fff; display:flex; font-size:.6rem; gap:.25rem; padding:.25rem .5rem; position:absolute; right:.7rem; top:.7rem; }
.library-body { display:flex; flex-direction:column; padding:.8rem .9rem .5rem; }
.library-body b { font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-body span,.library-body small { color:var(--text-muted); font-size:.64rem; margin-top:.25rem; }
.library-actions { display:flex; gap:.35rem; padding:.5rem .9rem .9rem; }
.room-grid { display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.room-card { border:1px solid var(--default-border); border-radius:1rem; padding:1rem; transition:.2s ease; }
.room-card:hover { box-shadow:0 10px 30px rgba(20,32,70,.07); transform:translateY(-2px); }
.room-card.disabled { opacity:.65; }
.room-card-head { align-items:center; display:flex; gap:.7rem; }
.room-avatar { align-items:center; background:rgba(var(--primary-rgb),.1); border-radius:.75rem; color:var(--primary-color); display:flex; flex:0 0 42px; font-size:1.2rem; height:42px; justify-content:center; }
.room-card-head div { flex:1; min-width:0; }
.room-card-head h5 { font-size:.82rem; margin:0 0 .15rem; }
.room-card-head code { color:var(--text-muted); font-size:.65rem; }
.room-metrics { background:rgba(var(--primary-rgb),.025); border-radius:.75rem; display:grid; grid-template-columns:repeat(3,1fr); margin:.9rem 0; padding:.7rem; }
.room-metrics span { align-items:center; border-inline-end:1px solid var(--default-border); display:flex; flex-direction:column; gap:.1rem; }
.room-metrics span:last-child { border:0; }
.room-metrics i { color:var(--primary-color); }
.room-metrics b { font-size:.72rem; }
.room-metrics small { color:var(--text-muted); font-size:.6rem; }
.room-flags { display:flex; flex-wrap:wrap; gap:.4rem; min-height:24px; }
.room-flags span { background:var(--light); border-radius:2rem; color:var(--text-muted); font-size:.6rem; padding:.3rem .5rem; }
.room-actions { display:flex; gap:.4rem; margin-top:.9rem; }
.room-editor { max-width:720px; width:calc(100% - 2rem); }
.room-editor-scroll { max-height:70vh; overflow:auto; padding-top:1rem; }
.room-switches { border-top:1px solid var(--default-border); display:flex; flex-direction:column; margin-top:1rem; }
.room-switches label { align-items:center; border-bottom:1px solid var(--default-border); display:flex; justify-content:space-between; padding:.8rem 0; }
.room-switches label span { display:flex; flex-direction:column; }
.room-switches b { font-size:.75rem; }
.room-switches small { color:var(--text-muted); font-size:.65rem; }
.room-upload { align-items:center; background:rgba(var(--primary-rgb),.035); border:1px dashed rgba(var(--primary-rgb),.35); border-radius:.7rem; color:var(--primary-color); cursor:pointer; display:flex; gap:.5rem; justify-content:center; min-height:54px; }
.room-upload input { display:none; }
/* ── اتاقها: هیرو و پیوستن سریع ── */
.rooms-hero { align-items:center; background:linear-gradient(135deg, rgba(var(--primary-rgb),.09), rgba(var(--primary-rgb),.02) 55%, rgba(139,92,246,.08)); border:1px solid rgba(var(--primary-rgb),.18); border-radius:1rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; margin-bottom:1rem; padding:1rem 1.25rem; }
.rooms-hero-info h3 { font-size:.95rem; font-weight:700; margin:0 0 .2rem; }
.rooms-hero-info p { color:var(--text-muted); font-size:.72rem; margin:0; }
.rooms-join { align-items:center; background:var(--custom-white,#fff); border:1px solid var(--default-border); border-radius:.8rem; box-shadow:0 6px 18px rgba(20,32,70,.06); display:flex; flex:1 1 320px; gap:.5rem; max-width:520px; padding:.35rem .35rem .35rem .9rem; }
.rooms-join>i { color:var(--primary-color); font-size:1.1rem; }
.rooms-join input { background:transparent; border:0; flex:1; font-size:.8rem; min-width:0; outline:none; }
.rooms-join .btn { border-radius:.6rem; font-size:.75rem; padding:.4rem 1rem; }
/* ── نوار فیلتر چیپی ── */
.rooms-filterbar { border-bottom:1px solid var(--default-border); display:flex; flex-wrap:wrap; gap:.45rem; overflow-x:auto; padding:.6rem 1.25rem; }
.room-chip { align-items:center; background:var(--light); border:1px solid transparent; border-radius:2rem; color:var(--text-muted); cursor:pointer; display:inline-flex; font-size:.68rem; gap:.35rem; padding:.32rem .7rem; transition:.15s ease; white-space:nowrap; }
.room-chip:hover { border-color:rgba(var(--primary-rgb),.35); color:var(--primary-color); }
.room-chip.active { background:rgba(var(--primary-rgb),.1); border-color:rgba(var(--primary-rgb),.45); color:var(--primary-color); font-weight:600; }
.room-chip span { background:rgba(0,0,0,.06); border-radius:1rem; font-size:.6rem; min-width:1.15rem; padding:.05rem .3rem; text-align:center; }
.room-chip.active span { background:rgba(var(--primary-rgb),.15); }
.room-chip-clear { background:transparent; border-style:dashed; border-color:var(--default-border); }
.rooms-cap-input { width:130px; }
.rooms-sort { width:140px; }
/* ── کارت اتاق: نسخهٔ مدرن ── */
.room-avatar { color:#fff !important; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.room-card.is-live { border-color:rgba(var(--danger-rgb,238,51,94),.4); box-shadow:0 0 0 3px rgba(var(--danger-rgb,238,51,94),.07); }
.room-card-title { min-width:0; }
.room-card-title h5 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-live-badge { align-items:center; display:inline-flex; gap:.35rem; }
.room-pulse { animation:roomPulse 1.6s ease-in-out infinite; background:rgb(var(--danger-rgb,238,51,94)); border-radius:50%; display:inline-block; height:7px; width:7px; }
@keyframes roomPulse { 0%,100% { box-shadow:0 0 0 0 rgba(var(--danger-rgb,238,51,94),.45); } 50% { box-shadow:0 0 0 5px rgba(var(--danger-rgb,238,51,94),0); } }
.room-note { align-items:flex-start; background:rgba(var(--warning-rgb,251,188,11),.08); border-radius:.5rem; color:var(--text-muted); display:flex; font-size:.68rem; gap:.4rem; margin:.7rem 0 0; padding:.45rem .6rem; }
.room-note i { color:rgb(var(--warning-rgb,251,188,11)); margin-top:.1rem; }
.room-flag-muted { background:transparent !important; }
.room-menu-wrap { margin-inline-start:auto; position:relative; }
.room-menu-overlay { inset:0; position:fixed; z-index:30; }
.room-menu { background:var(--custom-white,#fff); border:1px solid var(--default-border); border-radius:.8rem; box-shadow:0 14px 40px rgba(20,32,70,.16); display:flex; flex-direction:column; min-width:190px; padding:.35rem; position:absolute; inset-inline-end:0; top:calc(100% + .35rem); z-index:31; }
.room-menu a,.room-menu button { align-items:center; background:transparent; border:0; border-radius:.55rem; color:var(--default-text-color); display:flex; font-size:.72rem; gap:.55rem; padding:.5rem .65rem; text-align:start; text-decoration:none; transition:.12s ease; }
.room-menu a:hover,.room-menu button:hover { background:var(--light); color:var(--primary-color); }
.room-menu i { font-size:.95rem; }
.room-menu .danger { color:rgb(var(--danger-rgb,238,51,94)); }
.room-menu .danger:hover { background:rgba(var(--danger-rgb,238,51,94),.08); color:rgb(var(--danger-rgb,238,51,94)); }
/* ── مودال ویرایش: تبها و بلوک دسترسی ── */
.room-tabs { border-bottom:1px solid var(--default-border); margin-top:.5rem; }
.room-tabs .nav-link { font-size:.75rem; padding:.5rem .9rem; }
.room-access-block { border:1px solid var(--default-border); border-radius:.8rem; margin-top:.9rem; padding:.9rem; }
.room-access-head { align-items:center; display:flex; gap:.6rem; margin-bottom:.7rem; }
.room-access-head>span { align-items:center; background:rgba(var(--primary-rgb),.08); border-radius:.55rem; color:var(--primary-color); display:flex; font-size:1rem; height:34px; justify-content:center; width:34px; }
.room-access-head b { display:block; font-size:.75rem; }
.room-access-head small { color:var(--text-muted); font-size:.62rem; }
.room-days { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.room-day { align-items:center; background:var(--light); border:1px solid transparent; border-radius:.6rem; color:var(--text-muted); cursor:pointer; display:flex; font-size:.72rem; height:34px; justify-content:center; transition:.15s ease; width:34px; }
.room-day:hover { border-color:rgba(var(--primary-rgb),.4); }
.room-day.on { background:rgba(var(--primary-rgb),.12); border-color:rgba(var(--primary-rgb),.5); color:var(--primary-color); font-weight:700; }
.room-pw-eye { background:transparent; border:0; color:var(--text-muted); font-size:1rem; position:absolute; inset-inline-end:.6rem; top:50%; transform:translateY(-50%); }
.room-guest-list { display:flex; flex-direction:column; gap:.5rem; }
.room-guest-row { display:grid; grid-template-columns:1fr 1fr 120px auto; gap:.5rem; align-items:center; }
input[type="time"].form-control { direction:ltr; }
@media(max-width:991.98px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.room-grid{grid-template-columns:1fr}}
@media(max-width:575.98px){.ops-hero{align-items:flex-start;padding:1rem}.ops-score{display:none}.library-toolbar{align-items:stretch;flex-direction:column}.library-tabs{overflow:auto}.library-search{min-width:0;width:100%}.library-grid{grid-template-columns:1fr}.room-actions{flex-wrap:wrap}.ops-service{padding:.7rem}.ops-latency{display:none}}
.ops-loading {
align-items: center;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: 1rem;
display: flex;
flex-direction: column;
gap: .75rem;
justify-content: center;
min-height: 340px;
}
.ops-loading p {
color: var(--text-muted);
font-size: .8rem;
margin: 0;
}
.ops-hero {
align-items: center;
background: linear-gradient(120deg, rgba(18, 194, 126, .14), rgba(18, 194, 126, .035));
border: 1px solid rgba(18, 194, 126, .25);
border-radius: 1rem;
display: flex;
gap: 1rem;
margin-bottom: 1rem;
overflow: hidden;
padding: 1.25rem 1.4rem;
position: relative;
}
.ops-hero.attention {
background: linear-gradient(120deg, rgba(245, 166, 35, .14), rgba(245, 166, 35, .035));
border-color: rgba(245, 166, 35, .28);
}
.ops-hero-icon {
align-items: center;
background: #12c27e;
border-radius: .9rem;
box-shadow: 0 8px 22px rgba(18, 194, 126, .2);
color: #fff;
display: flex;
flex: 0 0 50px;
font-size: 1.55rem;
height: 50px;
justify-content: center;
}
.ops-hero.attention .ops-hero-icon {
background: #f5a623;
box-shadow: 0 8px 22px rgba(245, 166, 35, .2);
}
.ops-hero h4 {
font-size: 1.05rem;
margin: 0 0 .3rem;
}
.ops-hero p {
color: var(--text-muted);
font-size: .7rem;
margin: 0;
}
.ops-score {
align-items: center;
background: rgba(255, 255, 255, .55);
border: 1px solid rgba(255, 255, 255, .8);
border-radius: .8rem;
display: flex;
flex-direction: column;
margin-inline-start: auto;
min-width: 105px;
padding: .55rem .8rem;
}
[data-theme-mode="dark"] .ops-score {
background: rgba(0, 0, 0, .12);
border-color: rgba(255, 255, 255, .08);
}
.ops-score strong {
font-size: 1.25rem;
}
.ops-score span {
color: var(--text-muted);
font-size: .6rem;
}
.ops-stat {
align-items: center;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .9rem;
display: flex;
gap: .8rem;
min-height: 82px;
padding: .9rem;
transition: box-shadow .2s ease, transform .2s ease;
}
.ops-stat:hover {
box-shadow: 0 9px 25px rgba(20, 32, 70, .07);
transform: translateY(-2px);
}
.ops-stat > span {
align-items: center;
border-radius: .75rem;
display: flex;
font-size: 1.25rem;
height: 42px;
justify-content: center;
width: 42px;
}
.ops-stat div {
display: flex;
flex-direction: column;
}
.ops-stat strong {
font-size: 1.05rem;
}
.ops-stat small {
color: var(--text-muted);
font-size: .65rem;
}
.ops-service {
align-items: center;
border-bottom: 1px solid var(--default-border);
display: flex;
gap: .75rem;
min-height: 72px;
padding: .8rem 1.1rem;
}
.ops-service:last-child {
border-bottom: 0;
}
.ops-dot {
border-radius: 50%;
flex: 0 0 9px;
height: 9px;
width: 9px;
}
.ops-dot.ok {
animation: ft-live-pulse 1.8s ease-out infinite;
background: #12c27e;
}
.ops-dot.bad {
background: #ef476f;
box-shadow: 0 0 0 4px rgba(239, 71, 111, .1);
}
.ops-service-main {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.ops-service-main b {
font-size: .76rem;
}
.ops-service-main small,
.ops-service-main em {
color: var(--text-muted);
font-size: .62rem;
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ops-service-main em {
color: #d66d27;
}
.ops-latency {
color: var(--text-muted);
direction: ltr;
font-size: .65rem;
min-width: 52px;
}
.ops-storage {
align-items: center;
border-bottom: 1px solid var(--default-border);
display: flex;
justify-content: space-between;
padding: .7rem 0;
}
.ops-storage div {
display: flex;
flex-direction: column;
}
.ops-storage b,
.ops-storage strong {
font-size: .7rem;
}
.ops-storage small,
.ops-disk small {
color: var(--text-muted);
font-size: .62rem;
}
.ops-disk {
background: rgba(var(--primary-rgb), .045);
border-radius: .75rem;
margin-top: 1rem;
padding: .8rem;
}
.ops-disk > div:first-child {
font-size: .67rem;
margin-bottom: .55rem;
}
.ops-disk .progress {
height: 6px;
margin-bottom: .45rem;
}
@media (max-width: 575.98px) {
.ops-hero { align-items: flex-start; padding: 1rem; }
.ops-score { display: none; }
.ops-hero-icon { flex-basis: 42px; height: 42px; }
.ops-service { padding: .75rem; }
.ops-latency { display: none; }
}
/* ==================== مالی و صورتحساب (billing) ==================== */
.valex-shell .bill-tabs {
display: flex;
gap: .4rem;
margin-bottom: 1.1rem;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .65rem;
padding: .35rem;
width: fit-content;
max-width: 100%;
flex-wrap: wrap;
}
.valex-shell .bill-tab {
display: inline-flex;
align-items: center;
gap: .45rem;
border: none;
background: transparent;
color: var(--text-muted);
border-radius: .5rem;
padding: .5rem 1rem;
font-family: inherit;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: background-color .15s, color .15s;
}
.valex-shell .bill-tab:hover { color: var(--primary-color); }
.valex-shell .bill-tab.on {
background: var(--primary-color);
color: #fff;
}
.valex-shell .bill-tab-n {
background: rgba(255, 255, 255, .22);
border-radius: 1rem;
padding: 0 .5rem;
font-size: .72rem;
}
.valex-shell .bill-tab:not(.on) .bill-tab-n { background: var(--light); color: var(--text-muted); }
.valex-shell .bill-tab-dot {
width: .45rem;
height: .45rem;
border-radius: 50%;
background: rgb(var(--warning-rgb));
}
.valex-shell .bill-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.valex-shell .bill-chip {
border: 1px solid var(--default-border);
background: var(--custom-white);
color: var(--text-muted);
border-radius: 1rem;
padding: .28rem .8rem;
font-family: inherit;
font-size: .75rem;
cursor: pointer;
transition: all .15s;
}
.valex-shell .bill-chip.on {
background: rgba(var(--primary-rgb), .1);
border-color: rgba(var(--primary-rgb), .4);
color: var(--primary-color);
font-weight: 600;
}
.valex-shell .bill-search {
background-color: var(--form-control-bg);
border: 1px solid var(--input-border);
border-radius: .5rem;
color: var(--default-text-color);
min-height: 2.2rem;
padding: .3rem .8rem;
font-family: inherit;
font-size: .8rem;
min-width: 210px;
}
.valex-shell .bill-search:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .12);
outline: none;
}
.valex-shell .bill-count {
color: #9a6200;
display: inline-flex;
align-items: center;
gap: .25rem;
font-variant-numeric: tabular-nums;
}
.valex-shell .bill-count.center { justify-content: center; display: flex; margin-top: .5rem; }
/* ---------- کارتهای پلن ---------- */
.valex-shell .bill-plans {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
gap: 1rem;
}
.valex-shell .bill-plan {
position: relative;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .8rem;
box-shadow: var(--default-box-shadow);
padding: 1.35rem;
display: flex;
flex-direction: column;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.valex-shell .bill-plan:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(var(--primary-rgb), .14);
border-color: rgba(var(--primary-rgb), .35);
}
.valex-shell .bill-plan.featured { border-color: rgba(var(--success-rgb), .5); }
.valex-shell .bill-plan-flag {
position: absolute;
top: -.7rem;
inset-inline-start: 1.1rem;
background: rgb(var(--success-rgb));
color: #fff;
border-radius: 1rem;
font-size: .68rem;
font-weight: 700;
padding: .18rem .7rem;
}
.valex-shell .bill-plan-icon {
width: 3rem;
height: 3rem;
border-radius: .8rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: .9rem;
}
.valex-shell .bill-accent-primary .bill-plan-icon, .valex-shell .bill-order-icon.bill-accent-primary { background: rgba(var(--primary-rgb), .12); color: var(--primary-color); }
.valex-shell .bill-accent-success .bill-plan-icon, .valex-shell .bill-order-icon.bill-accent-success { background: rgba(var(--success-rgb), .12); color: #15803d; }
.valex-shell .bill-accent-warning .bill-plan-icon, .valex-shell .bill-order-icon.bill-accent-warning { background: rgba(var(--warning-rgb), .14); color: #9a6200; }
.valex-shell .bill-accent-danger .bill-plan-icon, .valex-shell .bill-order-icon.bill-accent-danger { background: rgba(var(--danger-rgb), .1); color: rgb(var(--danger-rgb)); }
.valex-shell .bill-accent-info .bill-plan-icon, .valex-shell .bill-order-icon.bill-accent-info { background: rgba(var(--info-rgb), .12); color: rgb(var(--info-rgb)); }
.valex-shell .bill-plan-title { font-size: 1rem; font-weight: 700; margin-bottom: .15rem; }
.valex-shell .bill-plan-sub { font-size: .76rem; color: var(--text-muted); margin-bottom: .8rem; }
.valex-shell .bill-plan-price {
font-size: 1.45rem;
font-weight: 800;
color: var(--default-text-color);
}
.valex-shell .bill-plan-price small { font-size: .72rem; color: var(--text-muted); font-weight: 400; }
.valex-shell .bill-plan-meta {
display: flex;
gap: 1rem;
font-size: .74rem;
color: var(--text-muted);
margin: .5rem 0 .8rem;
}
.valex-shell .bill-plan-meta i { margin-inline-end: .2rem; }
.valex-shell .bill-plan-feats {
list-style: none;
padding: 0;
margin: 0 0 1rem;
font-size: .76rem;
color: var(--text-muted);
flex: 1;
}
.valex-shell .bill-plan-feats li { padding: .18rem 0; display: flex; gap: .4rem; align-items: center; }
.valex-shell .bill-plan-feats i { color: #15803d; }
/* ---------- سرویس سفارشی (سازندهٔ پلن دلخواه) ---------- */
.valex-shell .bill-custom {
display: grid;
grid-template-columns: minmax(0, 1fr) 15rem;
gap: 1.25rem;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .8rem;
box-shadow: var(--default-box-shadow);
padding: 1.35rem;
transition: border-color .18s;
}
.valex-shell .bill-custom:hover { border-color: rgba(var(--primary-rgb), .35); }
.valex-shell .bill-custom-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem 1.4rem;
align-content: start;
}
.valex-shell .bill-custom-label {
display: block;
font-size: .78rem;
color: var(--text-muted);
margin-bottom: .45rem;
}
.valex-shell .bill-custom-label b { color: var(--default-text-color); }
.valex-shell .bill-custom input[type=range] {
accent-color: var(--primary-color);
height: 1.4rem;
cursor: pointer;
}
.valex-shell .bill-custom-num {
width: 5.2rem;
flex-shrink: 0;
background-color: var(--form-control-bg);
border: 1px solid var(--input-border);
border-radius: .45rem;
color: var(--default-text-color);
min-height: 2.1rem;
padding: .3rem .55rem;
font-family: inherit;
font-size: .82rem;
text-align: center;
}
.valex-shell .bill-custom-num:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .12);
outline: none;
}
.valex-shell .bill-custom-quote {
border-inline-start: 1px dashed var(--default-border);
padding-inline-start: 1.25rem;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 767.98px) {
.valex-shell .bill-custom { grid-template-columns: 1fr; }
.valex-shell .bill-custom-quote {
border-inline-start: none;
padding-inline-start: 0;
border-top: 1px dashed var(--default-border);
padding-top: 1rem;
}
}
/* ---------- فرم اطلاعات فاکتور ---------- */
.valex-shell .bill-progress {
height: .45rem;
border-radius: 1rem;
background: var(--light);
overflow: hidden;
margin: .6rem 0 1.1rem;
}
.valex-shell .bill-progress-bar {
height: 100%;
border-radius: 1rem;
background: linear-gradient(90deg, rgb(var(--warning-rgb)), rgb(var(--primary-rgb)));
transition: width .35s ease;
}
.valex-shell .bill-progress-bar.done { background: rgb(var(--success-rgb)); }
.valex-shell .bill-kind {
display: inline-flex;
gap: .35rem;
background: var(--light);
border-radius: .6rem;
padding: .3rem;
margin-bottom: 1.1rem;
}
.valex-shell .bill-kind-btn {
border: none;
background: transparent;
color: var(--text-muted);
border-radius: .45rem;
padding: .45rem 1rem;
font-family: inherit;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.valex-shell .bill-kind-btn.on {
background: var(--custom-white);
color: var(--primary-color);
box-shadow: var(--default-box-shadow);
}
.valex-shell .bill-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .9rem 1.1rem;
}
.valex-shell .bill-field span {
display: block;
font-size: .78rem;
color: var(--text-muted);
margin-bottom: .35rem;
}
.valex-shell .bill-field span b { color: rgb(var(--danger-rgb)); }
.valex-shell .bill-field input,
.valex-shell .bill-field select,
.valex-shell .bill-field textarea {
width: 100%;
background-color: var(--form-control-bg);
border: 1px solid var(--input-border);
border-radius: .45rem;
color: var(--default-text-color);
min-height: 2.4rem;
padding: .45rem .75rem;
font-family: inherit;
font-size: .85rem;
}
.valex-shell .bill-field input:focus,
.valex-shell .bill-field select:focus,
.valex-shell .bill-field textarea:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .12);
outline: none;
}
.valex-shell .bill-field-wide { grid-column: 1 / -1; }
/* ---------- تبهای «مشخصات مالی» (حقیقی / حقوقی) ---------- */
.valex-shell .bill-tabs {
display: flex;
gap: 1.4rem;
border-bottom: 1px solid var(--default-border);
margin-bottom: 1.1rem;
}
.valex-shell .bill-tab {
border: none;
background: transparent;
padding: 0 .2rem .55rem;
font-family: inherit;
font-size: .85rem;
font-weight: 700;
color: var(--text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.valex-shell .bill-tab.on {
color: rgb(var(--success-rgb));
border-bottom-color: rgb(var(--success-rgb));
}
/* ---------- تاریخ تولد شمسی (روز/ماه/سال) ---------- */
.valex-shell .bill-bdate { display: flex; gap: .5rem; }
.valex-shell .bill-bdate select { flex: 1; min-width: 0; padding-inline: .4rem; }
/* ---------- مودالهای روشن billing ---------- */
.valex-shell .bill-modal { z-index: 1060; }
.valex-shell .bill-modal .mahfel-modal-content {
background: var(--custom-white);
border-color: var(--default-border);
color: var(--default-text-color);
box-shadow: 0 24px 60px rgba(30, 40, 80, .22);
border-radius: .9rem;
}
.valex-shell .bill-modal .mahfel-field > label { color: var(--text-muted); }
.valex-shell .bill-modal .mahfel-input-wrap input,
.valex-shell .bill-modal .mahfel-input-wrap select {
background-color: var(--form-control-bg);
border: 1px solid var(--input-border);
color: var(--default-text-color);
border-radius: .5rem;
}
.valex-shell .bill-modal .mahfel-input-wrap input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .12);
}
.valex-shell .bill-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.valex-shell .bill-modal-title {
display: flex;
align-items: center;
gap: .5rem;
font-weight: 700;
font-size: .98rem;
}
.valex-shell .bill-modal-x {
border: none;
background: var(--light);
color: var(--text-muted);
border-radius: .45rem;
width: 1.9rem;
height: 1.9rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.valex-shell .bill-modal-x:hover { color: rgb(var(--danger-rgb)); }
/* مودالهای تیرهٔ محفل (غیرروشنشده) داخل پوستهٔ روشن valex:
پوستهٔ valex به h1..h6 و .form-label و .text-muted رنگ تیره میدهد؛
روی پسزمینهٔ تیرهٔ مودال محفل خوانده نمیشوند. این رول رنگ روشن تنظیم میکند
بدون اینکه مودالهای روشنشده (reg-detail، bill-modal، ticket-create-modal) را دستکاری کند. */
.valex-shell .mahfel-modal-content:not(.reg-detail):not(.bill-modal .mahfel-modal-content):not(.ticket-create-modal .mahfel-modal-content) :is(h1, h2, h3, h4, h5, h6) {
color: var(--ft-text);
}
.valex-shell .mahfel-modal-content:not(.reg-detail):not(.bill-modal .mahfel-modal-content):not(.ticket-create-modal .mahfel-modal-content) :is(.form-label, .text-muted) {
color: var(--ft-text-2);
}
.valex-shell .bill-order {
display: flex;
align-items: center;
gap: .8rem;
border: 1px solid var(--default-border);
border-radius: .65rem;
padding: .8rem;
margin-bottom: 1rem;
}
.valex-shell .bill-order-icon {
width: 2.6rem;
height: 2.6rem;
border-radius: .65rem;
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.valex-shell .bill-order > div:nth-child(2) { flex: 1; min-width: 0; }
.valex-shell .bill-order-price { font-weight: 800; white-space: nowrap; }
.valex-shell .bill-order-price small { font-weight: 400; color: var(--text-muted); font-size: .7rem; }
.valex-shell .bill-totals {
border-top: 1px dashed var(--default-border);
margin-top: .8rem;
padding-top: .7rem;
font-size: .8rem;
}
.valex-shell .bill-totals > div {
display: flex;
justify-content: space-between;
padding: .22rem 0;
color: var(--text-muted);
}
.valex-shell .bill-totals > div b { color: var(--default-text-color); font-weight: 600; }
.valex-shell .bill-totals .bill-grand {
border-top: 1px solid var(--default-border);
margin-top: .35rem;
padding-top: .55rem;
font-size: .95rem;
}
.valex-shell .bill-totals .bill-grand b { color: var(--primary-color); font-weight: 800; }
.valex-shell .bill-totals .bill-ok span, .valex-shell .bill-totals .bill-ok b { color: #15803d; }
.valex-shell .bill-ok { color: #15803d; display: inline-flex; align-items: center; gap: .2rem; }
.valex-shell .bill-err { color: rgb(var(--danger-rgb)); display: inline-flex; align-items: center; gap: .2rem; }
/* ---------- درگاه پرداخت ---------- */
.valex-shell .bill-gw-head {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--default-border);
padding-bottom: .8rem;
margin-bottom: 1rem;
}
.valex-shell .bill-gw-brand {
display: flex;
align-items: center;
gap: .5rem;
font-weight: 700;
font-size: .9rem;
}
.valex-shell .bill-gw-logo {
background: linear-gradient(135deg, #2563eb, #0ea5e9);
color: #fff;
border-radius: .5rem;
padding: .15rem .6rem;
font-size: .8rem;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: .35rem;
}
.valex-shell .bill-gw-sim {
background: rgba(var(--warning-rgb), .15);
color: #9a6200;
border-radius: 1rem;
font-size: .68rem;
font-weight: 700;
padding: .18rem .65rem;
}
.valex-shell .bill-gw-body {
border: 1px dashed var(--default-border);
border-radius: .65rem;
padding: .9rem;
}
.valex-shell .bill-gw-row {
display: flex;
justify-content: space-between;
font-size: .8rem;
padding: .2rem 0;
}
.valex-shell .bill-gw-row span { color: var(--text-muted); }
.valex-shell .bill-gw-amount {
text-align: center;
font-size: 1.7rem;
font-weight: 800;
color: var(--primary-color);
margin-top: .7rem;
}
.valex-shell .bill-gw-amount small { font-size: .75rem; color: var(--text-muted); font-weight: 400; }
.valex-shell .bill-gw-note {
font-size: .7rem;
color: var(--text-muted);
text-align: center;
margin: .7rem 0 0;
}
.valex-shell .bill-gw-result { text-align: center; padding: 1.2rem 0 .6rem; }
.valex-shell .bill-gw-result i { font-size: 3.2rem; color: #15803d; }
.valex-shell .bill-gw-result h5 { margin: .5rem 0 .2rem; }
.valex-shell .bill-gw-ref { font-size: .8rem; color: var(--text-muted); }
/* ---------- جزئیات صورتحساب ---------- */
.valex-shell .bill-kv {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .55rem 1.2rem;
font-size: .8rem;
margin-bottom: 1rem;
}
.valex-shell .bill-kv > div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.valex-shell .bill-kv > div > span:first-child { color: var(--text-muted); }
.valex-shell .bill-timeline {
display: flex;
gap: .4rem;
margin-top: 1.1rem;
border-top: 1px dashed var(--default-border);
padding-top: .9rem;
}
.valex-shell .bill-tl {
flex: 1;
display: flex;
gap: .5rem;
align-items: flex-start;
color: var(--text-muted);
opacity: .55;
}
.valex-shell .bill-tl.done { opacity: 1; }
.valex-shell .bill-tl.done i { color: #15803d; }
.valex-shell .bill-tl i { font-size: 1.05rem; margin-top: .1rem; }
.valex-shell .bill-tl b { display: block; font-size: .76rem; color: var(--default-text-color); }
.valex-shell .bill-tl span { font-size: .68rem; }
@media (max-width: 767.98px) {
.valex-shell .bill-form { grid-template-columns: 1fr; }
.valex-shell .bill-kv { grid-template-columns: 1fr; }
.valex-shell .bill-tabs { width: 100%; }
.valex-shell .bill-tab { flex: 1; justify-content: center; }
}
/* ---------- billing: service cards ---------- */
.valex-shell .bill-svc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.valex-shell .bill-svc {
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .8rem;
box-shadow: var(--default-box-shadow);
padding: 1.1rem 1.2rem;
display: flex;
flex-direction: column;
gap: .65rem;
transition: box-shadow .18s ease, border-color .18s;
}
.valex-shell .bill-svc:hover { box-shadow: 0 8px 24px rgba(30, 40, 80, .1); }
.valex-shell .bill-svc-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: .5rem;
}
.valex-shell .bill-svc-meta {
display: flex;
flex-wrap: wrap;
gap: .35rem .9rem;
font-size: .76rem;
color: var(--text-muted);
}
.valex-shell .bill-svc-meta i { margin-inline-end: .2rem; }
.valex-shell .bill-svc-addons { display: flex; flex-wrap: wrap; gap: .35rem; }
.valex-shell .bill-svc-actions {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: auto;
padding-top: .6rem;
border-top: 1px dashed var(--default-border);
}
/* ---------- billing: addon picker ---------- */
.valex-shell .bill-addons { display: flex; flex-direction: column; gap: .45rem; }
.valex-shell .bill-addon {
display: flex;
align-items: center;
gap: .6rem;
border: 1px solid var(--default-border);
border-radius: .6rem;
padding: .55rem .75rem;
cursor: pointer;
font-size: .8rem;
transition: border-color .15s, background .15s;
}
.valex-shell .bill-addon:hover { border-color: rgba(var(--primary-rgb), .45); }
.valex-shell .bill-addon input { accent-color: var(--primary-color); }
.valex-shell .bill-addon > i { font-size: 1.1rem; color: var(--primary-color); }
.valex-shell .bill-addon span { flex: 1; display: flex; flex-direction: column; }
.valex-shell .bill-addon span small { color: var(--text-muted); font-size: .7rem; }
.valex-shell .bill-addon-price { white-space: nowrap; font-size: .76rem; }
.valex-shell .bill-addon.owned { opacity: .6; background: var(--default-background); cursor: default; }
.valex-shell .bill-addon.owned > i { color: #15803d; }
/* ---------- billing: invoice toolbar & filters ---------- */
.valex-shell .inv-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
padding: .8rem 1.25rem;
border-bottom: 1px solid var(--default-border);
}
.valex-shell .inv-search {
display: flex;
align-items: center;
gap: .4rem;
flex: 1 1 200px;
min-width: 170px;
max-width: 320px;
background: var(--form-control-bg);
border: 1px solid var(--input-border);
border-radius: .5rem;
padding: 0 .65rem;
color: var(--text-muted);
}
.valex-shell .inv-search:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .12);
}
.valex-shell .inv-search input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
color: var(--default-text-color);
min-height: 2.3rem;
font-family: inherit;
font-size: .82rem;
outline: none;
}
.valex-shell .inv-search input::placeholder { color: var(--text-muted); }
.valex-shell .inv-search-x {
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: flex;
padding: 0;
}
.valex-shell .inv-search-x:hover { color: rgb(var(--danger-rgb)); }
.valex-shell .inv-status { display: flex; flex-wrap: wrap; gap: .4rem; }
.valex-shell .inv-chip {
border: 1px solid var(--default-border);
border-radius: 50rem;
background: transparent;
color: var(--default-text-color);
font-family: inherit;
font-size: .76rem;
cursor: pointer;
padding: .3rem .8rem;
display: inline-flex;
align-items: center;
gap: .35rem;
transition: all .15s;
}
.valex-shell .inv-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.valex-shell .inv-chip.on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.valex-shell .inv-chip b { font-weight: 700; font-size: .72rem; opacity: .85; }
.valex-shell .inv-dot-s { width: .45rem; height: .45rem; border-radius: 50%; flex: none; }
.valex-shell .inv-dot-s.warn { background: rgb(var(--warning-rgb)); }
.valex-shell .inv-dot-s.ok { background: rgb(var(--success-rgb)); }
.valex-shell .inv-dot-s.mut { background: var(--text-muted); }
.valex-shell .inv-chip.on .inv-dot-s { background: #fff; }
.valex-shell .inv-filter-toggle {
margin-inline-start: auto;
border: 1px solid var(--default-border);
border-radius: .5rem;
background: transparent;
color: var(--default-text-color);
font-family: inherit;
font-size: .78rem;
cursor: pointer;
padding: .42rem .85rem;
display: inline-flex;
align-items: center;
gap: .4rem;
position: relative;
}
.valex-shell .inv-filter-toggle:hover { border-color: var(--primary-color); color: var(--primary-color); }
.valex-shell .inv-filter-toggle.on {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(var(--primary-rgb), .08);
}
.valex-shell .inv-dot {
width: .45rem;
height: .45rem;
border-radius: 50%;
background: var(--primary-color);
position: absolute;
top: -2px;
inset-inline-end: -2px;
}
.valex-shell .inv-adv {
padding: .85rem 1.25rem 1rem;
border-bottom: 1px solid var(--default-border);
background: var(--default-background);
}
.valex-shell .inv-adv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: .8rem 1rem;
align-items: end;
}
.valex-shell .inv-adv-field > span {
display: block;
font-size: .72rem;
color: var(--text-muted);
margin-bottom: .3rem;
}
.valex-shell .inv-adv-field input,
.valex-shell .inv-adv-field select {
width: 100%;
background: var(--form-control-bg);
border: 1px solid var(--input-border);
border-radius: .45rem;
color: var(--default-text-color);
min-height: 2.3rem;
padding: .35rem .65rem;
font-family: inherit;
font-size: .82rem;
}
.valex-shell .inv-adv-field input:focus,
.valex-shell .inv-adv-field select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .12);
outline: none;
}
.valex-shell .inv-ranges { display: flex; flex-wrap: wrap; gap: .35rem; }
.valex-shell .inv-clear {
margin-top: .7rem;
border: none;
background: transparent;
color: rgb(var(--danger-rgb));
font-family: inherit;
font-size: .76rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .3rem;
padding: 0;
}
.valex-shell .inv-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem;
padding: .7rem 1.25rem;
border-top: 1px solid var(--default-border);
}
.valex-shell .inv-icon-btn { padding-inline: .6rem; }
.valex-shell .inv-spin { display: inline-block; animation: inv-spin .7s linear infinite; }
@keyframes inv-spin { to { transform: rotate(360deg); } }
.valex-shell .bill-tl.fail i,
.valex-shell .bill-tl.fail b { color: rgb(var(--danger-rgb)); }
/* ---------- billing: fanotech-style order ---------- */
.valex-shell .ord-types {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1.4rem;
}
.valex-shell .ord-type {
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .9rem;
padding: 1.2rem .9rem;
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
font-family: inherit;
color: var(--default-text-color);
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s, background .18s;
}
.valex-shell .ord-type:hover {
transform: translateY(-2px);
border-color: rgba(var(--success-rgb), .5);
box-shadow: 0 8px 22px rgba(var(--success-rgb), .12);
}
.valex-shell .ord-type-ic {
width: 2.6rem;
height: 2.6rem;
border-radius: .7rem;
background: var(--light);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
margin-bottom: .25rem;
}
.valex-shell .ord-type b { font-size: .88rem; font-weight: 700; }
.valex-shell .ord-type small { color: var(--text-muted); font-size: .72rem; }
.valex-shell .ord-type.on {
background: rgb(var(--success-rgb));
border-color: rgb(var(--success-rgb));
color: #fff;
box-shadow: 0 10px 24px rgba(var(--success-rgb), .3);
}
.valex-shell .ord-type.on .ord-type-ic { background: rgba(255, 255, 255, .18); color: #fff; }
.valex-shell .ord-type.on small { color: rgba(255, 255, 255, .82); }
.valex-shell .ord-periods { display: flex; width: 100%; margin-bottom: 1.3rem; }
.valex-shell .ord-periods .bill-kind-btn { flex: 1; justify-content: center; padding: .7rem 1rem; }
.valex-shell .ord-periods .bill-kind-btn.on { background: rgb(var(--success-rgb)); color: #fff; box-shadow: none; }
/* کارت پلن — سبک فنوتک: عنوان با خط تاکید، باکس مشخصات، قیمت بزرگ، دکمه سبز */
.valex-shell .ord-plans {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 1.1rem;
}
.valex-shell .ord-plan {
position: relative;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .9rem;
box-shadow: var(--default-box-shadow);
padding: 1.3rem;
display: flex;
flex-direction: column;
gap: .9rem;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.valex-shell .ord-plan:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(var(--success-rgb), .14);
border-color: rgba(var(--success-rgb), .4);
}
.valex-shell .ord-plan-title {
font-size: .95rem;
font-weight: 700;
text-align: center;
margin: 0;
padding-bottom: .7rem;
position: relative;
}
.valex-shell .ord-plan-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 3.2rem;
height: .2rem;
border-radius: 1rem;
background: rgb(var(--success-rgb));
}
.valex-shell .ord-plan-box {
border: 1px solid var(--default-border);
border-radius: .65rem;
padding: .5rem .85rem;
}
.valex-shell .ord-plan-box > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: .32rem 0;
font-size: .76rem;
}
.valex-shell .ord-plan-box > div + div { border-top: 1px dashed var(--default-border); }
.valex-shell .ord-plan-box span { color: var(--text-muted); }
.valex-shell .ord-plan-box b { font-weight: 700; font-size: .9rem; }
.valex-shell .ord-plan-price {
text-align: center;
font-size: 1.5rem;
font-weight: 800;
color: var(--default-text-color);
}
.valex-shell .ord-plan-price small { font-size: .75rem; color: var(--text-muted); font-weight: 400; }
.valex-shell .ord-buy {
margin-top: auto;
background: rgb(var(--success-rgb));
color: #fff;
border: none;
border-radius: .6rem;
padding: .65rem 1rem;
font-family: inherit;
font-size: .85rem;
font-weight: 700;
cursor: pointer;
transition: filter .15s;
}
.valex-shell .ord-buy:hover:not(:disabled) { filter: brightness(.93); }
.valex-shell .ord-buy:disabled { opacity: .55; cursor: default; }
.valex-shell .ord-buy.sm { padding: .5rem 1.5rem; font-size: .8rem; margin-top: 0; }
/* کارت ظرفیتی — سبک صفحهٔ سفارش اسکایروم: هدر رنگی + رادیویی گزینههای مدت */
.valex-shell .ord-tiers {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
gap: 1.1rem;
}
.valex-shell .ord-tier {
position: relative;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .9rem;
box-shadow: var(--default-box-shadow);
padding: 0 1.1rem 1.1rem;
display: flex;
flex-direction: column;
gap: .6rem;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.valex-shell .ord-tier:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(var(--success-rgb), .14);
border-color: rgba(var(--success-rgb), .4);
}
.valex-shell .ord-tier.best {
border-color: rgba(var(--success-rgb), .6);
box-shadow: 0 10px 30px rgba(var(--success-rgb), .18);
}
.valex-shell .ord-tier-best {
position: absolute;
top: -.75rem;
inset-inline-start: 1rem;
z-index: 2;
padding: .18rem .85rem;
border-radius: 999px;
background: rgb(var(--warning-rgb));
color: #fff;
font-size: .68rem;
font-weight: 700;
}
.valex-shell .ord-tier-title {
margin: 0 -1.1rem;
padding: .75rem 1rem;
border-radius: .9rem .9rem 0 0;
background: rgb(var(--success-rgb));
color: #fff;
font-size: .88rem;
font-weight: 700;
text-align: center;
}
.valex-shell .ord-tier.best .ord-tier-title {
background: linear-gradient(90deg, rgb(var(--success-rgb)), rgb(var(--primary-rgb)));
}
.valex-shell .ord-tier.trial .ord-tier-title { background: rgb(var(--info-rgb)); }
.valex-shell .ord-tier-feats {
list-style: none;
margin: 0;
padding: .3rem 0 .1rem;
}
.valex-shell .ord-tier-feats li {
display: flex;
align-items: center;
justify-content: center;
gap: .45rem;
padding: .26rem 0;
font-size: .78rem;
color: var(--default-text-color);
}
.valex-shell .ord-tier-feats li i { color: rgb(var(--success-rgb)); font-weight: 700; }
.valex-shell .ord-tier-durs { display: flex; flex-direction: column; }
.valex-shell .ord-tier-dur {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
padding: .5rem .65rem;
border: 1px solid var(--default-border);
background: var(--custom-white);
font-family: inherit;
font-size: .74rem;
color: var(--default-text-color);
cursor: pointer;
transition: background .15s, border-color .15s;
text-align: start;
}
.valex-shell .ord-tier-dur + .ord-tier-dur { border-top: 0; }
.valex-shell .ord-tier-dur:first-child { border-radius: .55rem .55rem 0 0; }
.valex-shell .ord-tier-dur:last-child { border-radius: 0 0 .55rem .55rem; }
.valex-shell .ord-tier-dot {
width: .8rem;
height: .8rem;
flex: none;
border-radius: 50%;
border: 2px solid var(--default-border);
transition: border-color .15s, box-shadow .15s;
}
.valex-shell .ord-tier-dur.on {
position: relative;
z-index: 1;
background: rgba(var(--success-rgb), .07);
border-color: rgba(var(--success-rgb), .45);
}
.valex-shell .ord-tier-dur.on .ord-tier-dot {
border-color: rgb(var(--success-rgb));
background: rgb(var(--success-rgb));
box-shadow: inset 0 0 0 2.5px var(--custom-white);
}
.valex-shell .ord-tier-dur em {
font-style: normal;
font-size: .64rem;
font-weight: 700;
color: #15803d;
background: rgba(var(--success-rgb), .15);
padding: .08rem .45rem;
border-radius: 999px;
white-space: nowrap;
}
.valex-shell .ord-tier-dur b { margin-inline-start: auto; font-size: .8rem; white-space: nowrap; }
.valex-shell .ord-tier-dur b small { font-size: .66rem; font-weight: 400; color: var(--text-muted); }
.valex-shell .ord-tier-meta {
display: flex;
justify-content: space-between;
gap: .5rem;
font-size: .68rem;
color: var(--text-muted);
}
.valex-shell .ord-tier-meta i { color: rgb(var(--success-rgb)); }
/* نوار ضمانت بازگشت وجه */
.valex-shell .ord-guarantee {
display: flex;
align-items: center;
gap: .7rem;
margin-bottom: 1.1rem;
padding: .7rem 1rem;
border-radius: .7rem;
background: rgba(var(--success-rgb), .08);
border: 1px solid rgba(var(--success-rgb), .3);
font-size: .8rem;
}
.valex-shell .ord-guarantee > i { font-size: 1.5rem; color: rgb(var(--success-rgb)); flex: none; }
.valex-shell .ord-guarantee div { display: flex; flex-direction: column; gap: .1rem; }
.valex-shell .ord-guarantee div span { color: var(--text-muted); font-size: .74rem; }
.valex-shell .ord-guarantee.sm {
padding: .5rem .8rem;
margin: .8rem 0 0;
font-size: .76rem;
align-items: flex-start;
}
.valex-shell .ord-guarantee.sm > i { font-size: 1.1rem; margin-top: .1rem; }
/* پنل بستهها (ضبط ابری / دامنه / آیفریم / لوگو) */
.valex-shell .ord-panel-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.1rem;
}
.valex-shell .ord-panel-title { font-weight: 700; font-size: .95rem; margin-bottom: .25rem; }
.valex-shell .ord-panel-sub { color: var(--text-muted); font-size: .78rem; margin: 0; max-width: 34rem; }
.valex-shell .ord-panel-ic {
width: 2.6rem;
height: 2.6rem;
flex: none;
border-radius: .7rem;
background: var(--light);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.valex-shell .ord-hint {
display: flex;
align-items: center;
gap: .45rem;
font-size: .78rem;
color: #9a6200;
background: rgba(var(--warning-rgb), .12);
border: 1px solid rgba(var(--warning-rgb), .3);
border-radius: .55rem;
padding: .55rem .85rem;
margin-bottom: 1rem;
}
.valex-shell .ord-pkgs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.1rem;
}
.valex-shell .ord-pkg {
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .9rem;
box-shadow: var(--default-box-shadow);
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: .9rem;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.valex-shell .ord-pkg:hover {
transform: translateY(-2px);
border-color: rgba(var(--success-rgb), .4);
box-shadow: 0 8px 22px rgba(var(--success-rgb), .12);
}
.valex-shell .ord-pkg-head { display: flex; justify-content: space-between; gap: .8rem; }
.valex-shell .ord-pkg-head h6 { font-size: .9rem; font-weight: 700; margin-bottom: .25rem; }
.valex-shell .ord-pkg-head p { font-size: .74rem; color: var(--text-muted); margin: 0; }
.valex-shell .ord-pkg-box {
border: 1px solid var(--default-border);
border-radius: .6rem;
padding: .7rem .9rem;
text-align: center;
}
.valex-shell .ord-pkg-box span { display: block; font-size: .72rem; color: var(--text-muted); margin-bottom: .2rem; }
.valex-shell .ord-pkg-box b { font-size: 1.05rem; font-weight: 800; }
.valex-shell .ord-pkg-box b small { font-size: .7rem; font-weight: 400; color: var(--text-muted); }
.valex-shell .ord-pkg-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
margin-top: auto;
}
/* حالت خالی به سبک فنوتک */
.valex-shell .ord-empty { text-align: center; padding: 2.2rem 1rem 2.6rem; }
.valex-shell .ord-empty > i { font-size: 3.4rem; color: rgba(var(--primary-rgb), .45); display: block; margin-bottom: .8rem; }
.valex-shell .ord-empty h6 { margin-bottom: .35rem; }
.valex-shell .ord-empty p { margin: 0 auto 1.1rem; max-width: 30rem; }
@media (max-width: 991.98px) {
.valex-shell .ord-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
.valex-shell .ord-types { grid-template-columns: 1fr; }
.valex-shell .ord-periods { flex-wrap: wrap; }
.valex-shell .ord-periods .bill-kind-btn { flex: 1 1 45%; }
}
/* ---------- مانیتور زنده ---------- */
.mon-hero {
align-items: center;
background: linear-gradient(120deg, rgba(var(--danger-rgb), .08), rgba(var(--primary-rgb), .05));
border: 1px solid var(--default-border);
border-radius: 1.15rem;
display: flex;
gap: 1.5rem;
justify-content: space-between;
margin-bottom: 1.25rem;
padding: 1.1rem 1.5rem;
}
.mon-hero-live { align-items: center; display: flex; gap: .9rem; }
.mon-hero-live b { display: block; font-size: 1rem; }
.mon-hero-live small { color: var(--text-muted); font-size: .7rem; }
.mon-pulse-dot {
background: #ee335e;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(238, 51, 94, .5);
flex: 0 0 14px;
height: 14px;
position: relative;
width: 14px;
animation: mon-pulse 1.6s ease-out infinite;
}
@keyframes mon-pulse {
0% { box-shadow: 0 0 0 0 rgba(238, 51, 94, .5); }
70% { box-shadow: 0 0 0 12px rgba(238, 51, 94, 0); }
100% { box-shadow: 0 0 0 0 rgba(238, 51, 94, 0); }
}
.mon-hero-trend { align-items: center; display: flex; gap: .8rem; min-width: 0; }
.mon-hero-trend-label { display: flex; flex-direction: column; text-align: end; }
.mon-hero-trend-label span { color: var(--text-muted); font-size: .68rem; }
.mon-hero-trend-label b { font-size: 1.05rem; }
.mon-spark { height: 36px; width: 120px; }
.mon-spark polyline {
fill: none;
stroke: rgb(var(--primary-rgb));
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.mon-spark-empty { color: var(--text-muted); font-size: .68rem; }
.mon-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.mon-card {
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: 1rem;
display: flex;
flex-direction: column;
gap: .75rem;
padding: 1.1rem;
transition: box-shadow .2s ease, transform .2s ease;
}
.mon-card:hover { box-shadow: 0 10px 30px rgba(20, 32, 70, .08); transform: translateY(-2px); }
.mon-card.recording { border-color: rgba(238, 51, 94, .35); }
.mon-card-head { align-items: center; display: flex; gap: .7rem; }
.mon-avatar {
align-items: center;
background: rgba(var(--primary-rgb), .12);
border-radius: .9rem;
color: var(--primary-color);
display: flex;
flex: 0 0 44px;
font-size: 1.3rem;
height: 44px;
justify-content: center;
}
.mon-card-title { flex: 1; min-width: 0; }
.mon-card-title h5 { font-size: .85rem; margin: 0 0 .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-card-title code { color: var(--text-muted); font-size: .65rem; }
.mon-badges { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }
.mon-badge-live {
align-items: center;
background: rgba(238, 51, 94, .1);
border-radius: 2rem;
color: #ee335e;
display: inline-flex;
font-size: .62rem;
font-weight: 600;
gap: .35rem;
padding: .18rem .55rem;
}
.mon-badge-live i {
animation: mon-pulse 1.6s ease-out infinite;
background: #ee335e;
border-radius: 50%;
height: 6px;
width: 6px;
}
.mon-badge-rec {
align-items: center;
background: #ee335e;
border-radius: 2rem;
color: #fff;
display: inline-flex;
font-size: .6rem;
font-weight: 700;
gap: .25rem;
letter-spacing: .5px;
padding: .18rem .55rem;
}
.mon-badge-rec i { animation: mon-rec-blink 1.2s ease-in-out infinite; font-size: .7rem; }
@keyframes mon-rec-blink { 50% { opacity: .25; } }
.mon-meta { color: var(--text-muted); display: flex; flex-wrap: wrap; font-size: .72rem; gap: .4rem 1rem; }
.mon-meta i { margin-inline-end: .2rem; }
.mon-meta b { color: var(--default-text-color); }
.mon-people { display: flex; flex-wrap: wrap; gap: .4rem; }
.mon-chip {
align-items: center;
background: var(--default-background);
border: 1px solid var(--default-border);
border-radius: 2rem;
display: inline-flex;
font-size: .68rem;
gap: .3rem;
padding: .15rem .55rem .15rem .35rem;
}
.mon-chip-av {
align-items: center;
background: rgba(var(--primary-rgb), .15);
border-radius: 50%;
color: var(--primary-color);
display: inline-flex;
font-size: .62rem;
font-style: normal;
font-weight: 700;
height: 20px;
justify-content: center;
width: 20px;
}
.mon-chip em.on { color: #22c03c; font-size: .72rem; font-style: normal; }
.mon-chip.more { color: var(--text-muted); }
.mon-parts { border-top: 1px dashed var(--default-border); display: flex; flex-direction: column; gap: .4rem; padding-top: .65rem; }
.mon-part { align-items: center; display: flex; font-size: .74rem; gap: .5rem; }
.mon-part.service { opacity: .55; }
.mon-part .pav {
align-items: center;
background: rgba(var(--primary-rgb), .15);
border-radius: 50%;
color: var(--primary-color);
display: inline-flex;
flex: 0 0 26px;
font-size: .68rem;
font-style: normal;
font-weight: 700;
height: 26px;
justify-content: center;
}
.mon-part .pname { font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-part .pdev { display: inline-flex; gap: .3rem; margin-inline-start: auto; }
.mon-part .pdev i { color: var(--gray-5); font-size: .9rem; }
.mon-part .pdev i.on { color: #22c03c; }
.mon-part .pdev i.dim { opacity: .4; }
.mon-confirm {
align-items: center;
background: rgba(238, 51, 94, .06);
border: 1px solid rgba(238, 51, 94, .25);
border-radius: .7rem;
display: flex;
flex-wrap: wrap;
font-size: .74rem;
gap: .6rem;
justify-content: space-between;
padding: .6rem .8rem;
}
.mon-confirm i { color: #ee335e; margin-inline-end: .25rem; }
.mon-actions { border-top: 1px solid var(--default-border); display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .7rem; }
.mon-empty { align-items: center; display: flex; flex-direction: column; gap: .6rem; padding: 3.5rem 1rem; text-align: center; }
.mon-empty h5 { font-size: .95rem; margin: .4rem 0 0; }
.mon-empty p { color: var(--text-muted); font-size: .76rem; margin: 0 0 .6rem; }
.mon-radar {
align-items: center;
background: rgba(var(--primary-rgb), .08);
border-radius: 50%;
color: var(--primary-color);
display: flex;
font-size: 1.8rem;
height: 84px;
justify-content: center;
position: relative;
width: 84px;
}
.mon-radar span {
animation: mon-radar 2.4s ease-out infinite;
border: 1px solid rgba(var(--primary-rgb), .5);
border-radius: 50%;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.mon-radar span:nth-child(3) { animation-delay: .8s; }
.mon-radar span:nth-child(4) { animation-delay: 1.6s; }
@keyframes mon-radar {
0% { opacity: .8; transform: scale(.6); }
100% { opacity: 0; transform: scale(1.6); }
}
@media (max-width: 575.98px) {
.mon-hero { align-items: flex-start; flex-direction: column; gap: .8rem; padding: 1rem; }
.mon-grid { grid-template-columns: 1fr; }
.mon-part .pname { max-width: 90px; }
}
/* ---------- users page ---------- */
.users-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 3.5rem 1.5rem;
}
.users-hero-art {
position: relative;
width: 180px;
height: 140px;
margin-bottom: 1.25rem;
}
.users-hero-art .uha-blob {
position: absolute;
inset: 8px 18px;
border-radius: 46% 54% 52% 48% / 55% 48% 52% 45%;
background: linear-gradient(135deg, rgba(var(--primary-rgb), .16), rgba(var(--success-rgb,34,192,60), .18));
}
.uha-circle {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(var(--primary-rgb), .08);
border: 1px dashed rgba(var(--primary-rgb), .45);
color: var(--primary-color);
}
.uha-circle.uha-main {
width: 72px;
height: 72px;
top: 34px;
right: 54px;
font-size: 2rem;
border-style: solid;
background: rgba(var(--primary-rgb), .12);
}
.uha-circle.uha-mini { width: 38px; height: 38px; font-size: 1rem; }
.uha-mini.uha-1 { top: 6px; right: 14px; animation: uhaFloat 3.2s ease-in-out infinite; }
.uha-mini.uha-2 { bottom: 4px; right: 8px; animation: uhaFloat 3.6s ease-in-out .4s infinite; }
.uha-mini.uha-3 { top: 20px; left: 6px; animation: uhaFloat 4s ease-in-out .8s infinite; }
@keyframes uhaFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
.sort-th {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.sort-th:hover {
color: var(--primary-color);
}
.users-dropzone {
border: 2px dashed var(--default-border);
border-radius: .9rem;
background: var(--default-background);
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
margin-bottom: 1rem;
text-align: center;
}
.users-dropzone > i {
font-size: 2.4rem;
color: rgb(var(--success-rgb,34,192,60));
}
.users-dropzone:hover {
border-color: rgba(var(--primary-rgb), .5);
}
.users-import-preview {
max-height: 320px;
overflow-y: auto;
border: 1px solid var(--default-border);
border-radius: .5rem;
}
.table-danger-transparent > td {
background: rgba(var(--danger-rgb,238,51,94), .07);
}
.cred-box {
border: 1px solid var(--default-border);
border-radius: .7rem;
background: var(--default-background);
margin-bottom: .5rem;
overflow: hidden;
}
.cred-row {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .8rem;
border-bottom: 1px solid var(--default-border);
text-align: right;
}
.cred-row:last-child { border-bottom: 0; }
.cred-row > span {
width: 78px;
flex-shrink: 0;
font-size: .75rem;
color: var(--text-muted);
}
.cred-row > code {
flex: 1;
text-align: left;
color: var(--default-text-color);
font-size: .8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guide-steps {
display: flex;
flex-direction: column;
gap: .9rem;
}
.guide-step {
display: flex;
gap: .8rem;
align-items: flex-start;
}
.guide-num {
width: 30px;
height: 30px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(var(--primary-rgb), .12);
color: var(--primary-color);
font-weight: 700;
}
/* ── مرکز گزارش (Reports hub) ── */
.valex-shell .rep-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
border: 1px solid rgba(var(--primary-rgb), .22);
border-radius: .8rem;
padding: 1.35rem 1.5rem;
margin-bottom: 1.25rem;
background:
radial-gradient(560px 150px at 90% 0%, rgba(var(--primary-rgb), .13), transparent 65%),
var(--custom-white);
box-shadow: var(--default-box-shadow);
}
.valex-shell .rep-hero h2 {
font-size: 1.25rem;
font-weight: 800;
margin: .4rem 0 .3rem;
}
.valex-shell .rep-hero p {
margin: 0;
color: var(--text-muted);
font-size: .8rem;
}
.valex-shell .rep-eyebrow {
display: inline-flex;
align-items: center;
gap: .35rem;
color: rgb(var(--primary-rgb));
font-size: .72rem;
font-weight: 700;
}
.valex-shell .rep-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .9rem;
margin-bottom: 1.25rem;
}
.valex-shell .rep-metrics article {
display: flex;
align-items: center;
gap: .8rem;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .65rem;
padding: 1rem;
box-shadow: var(--default-box-shadow);
}
.valex-shell .rep-metrics article > i {
width: 44px;
height: 44px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: .7rem;
font-size: 1.25rem;
font-style: normal;
}
.valex-shell .rep-a-primary { background: rgba(var(--primary-rgb), .1); color: rgb(var(--primary-rgb)); }
.valex-shell .rep-a-success { background: rgba(var(--success-rgb), .12); color: rgb(var(--success-rgb)); }
.valex-shell .rep-a-warning { background: rgba(var(--warning-rgb), .12); color: rgb(var(--warning-rgb)); }
.valex-shell .rep-a-info { background: rgba(var(--info-rgb), .12); color: rgb(var(--info-rgb)); }
.valex-shell .rep-a-danger { background: rgba(var(--danger-rgb), .1); color: rgb(var(--danger-rgb)); }
.valex-shell .rep-a-secondary { background: rgba(var(--primary-rgb), .07); color: var(--text-muted); }
.valex-shell .rep-metrics article span,
.valex-shell .rep-metrics article small {
display: block;
color: var(--text-muted);
font-size: .7rem;
}
.valex-shell .rep-metrics article b {
display: block;
margin: .12rem 0;
font-size: 1.1rem;
font-weight: 800;
}
.valex-shell .rep-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .9rem;
margin-bottom: 1.25rem;
}
.valex-shell .rep-card {
position: relative;
display: flex;
gap: .85rem;
padding: 1.1rem 1.15rem;
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .75rem;
text-decoration: none;
color: var(--default-text-color);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.valex-shell .rep-card:hover {
transform: translateY(-2px);
border-color: rgba(var(--primary-rgb), .45);
box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
color: var(--default-text-color);
}
.valex-shell .rep-card > i:first-child {
width: 42px;
height: 42px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: .7rem;
font-size: 1.2rem;
font-style: normal;
}
.valex-shell .rep-card b { display: block; font-size: .9rem; margin-bottom: .25rem; }
.valex-shell .rep-card p {
margin: 0;
color: var(--text-muted);
font-size: .72rem;
line-height: 1.8;
}
.valex-shell .rep-card .rep-card-foot {
display: inline-flex;
align-items: center;
margin-top: .55rem;
font-size: .68rem;
font-weight: 600;
color: rgb(var(--primary-rgb));
}
.valex-shell .rep-card .rep-go {
position: absolute;
inset-inline-end: .9rem;
top: 1rem;
color: var(--text-muted);
font-size: .95rem;
transition: transform .18s ease, color .18s ease;
}
.valex-shell .rep-card:hover .rep-go {
color: rgb(var(--primary-rgb));
transform: translateX(-3px);
}
.valex-shell .rep-tabs-bar {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.valex-shell .rep-back {
display: inline-flex;
align-items: center;
gap: .4rem;
color: var(--text-muted);
font-size: .8rem;
font-weight: 600;
text-decoration: none;
}
.valex-shell .rep-back:hover { color: rgb(var(--primary-rgb)); }
.valex-shell .rep-tabs {
display: flex;
gap: .4rem;
flex-wrap: wrap;
}
.valex-shell .rep-tabs a {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .55rem 1rem;
border-radius: .55rem;
border: 1px solid var(--default-border);
background: var(--custom-white);
color: var(--default-text-color);
font-size: .8rem;
font-weight: 600;
text-decoration: none;
}
.valex-shell .rep-tabs a:hover {
border-color: rgba(var(--primary-rgb), .4);
color: rgb(var(--primary-rgb));
}
.valex-shell .rep-tabs a.active {
background: rgba(var(--primary-rgb), .12);
border-color: rgba(var(--primary-rgb), .5);
color: rgb(var(--primary-rgb));
}
.valex-shell .rep-chart {
display: flex;
align-items: flex-end;
gap: 6px;
height: 150px;
direction: ltr;
}
.valex-shell .rep-chart .rep-bar {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
.valex-shell .rep-chart .rep-bar i {
display: block;
border-radius: 5px 5px 0 0;
background: linear-gradient(180deg, rgba(var(--primary-rgb), .85), rgba(var(--primary-rgb), .3));
min-height: 3px;
transition: filter .15s ease;
}
.valex-shell .rep-chart .rep-bar:hover i { filter: brightness(1.12); }
.valex-shell .rep-chart .rep-bar.zero i { background: rgba(var(--primary-rgb), .12); }
.valex-shell .rep-chart-labels {
display: flex;
gap: 6px;
direction: ltr;
margin-top: .55rem;
}
.valex-shell .rep-chart-labels span {
flex: 1;
text-align: center;
font-size: .58rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
}
.valex-shell .rep-mini { display: flex; flex-direction: column; }
.valex-shell .rep-mini a {
display: flex;
align-items: center;
gap: .7rem;
padding: .6rem .25rem;
border-bottom: 1px dashed var(--default-border);
color: var(--default-text-color);
text-decoration: none;
font-size: .8rem;
}
.valex-shell .rep-mini a:last-child { border-bottom: 0; }
.valex-shell .rep-mini a:hover { color: rgb(var(--primary-rgb)); }
.valex-shell .rep-mini-main { flex: 1; min-width: 0; }
.valex-shell .rep-mini-main b {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.valex-shell .rep-mini-main span {
color: var(--text-muted);
font-size: .68rem;
}
.valex-shell .rep-live {
color: rgb(var(--success-rgb));
display: inline-flex;
gap: .35rem;
align-items: center;
font-size: .66rem;
font-weight: 700;
}
.valex-shell .rep-live::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: rgb(var(--success-rgb));
box-shadow: 0 0 0 4px rgba(var(--success-rgb), .15);
}
.valex-shell .rep-recs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .6rem .9rem;
}
.valex-shell .rep-recs a {
display: flex;
align-items: center;
gap: .7rem;
padding: .65rem .8rem;
border: 1px solid var(--default-border);
border-radius: .6rem;
color: var(--default-text-color);
text-decoration: none;
font-size: .8rem;
transition: border-color .18s ease, transform .18s ease;
}
.valex-shell .rep-recs a:hover {
border-color: rgba(var(--primary-rgb), .4);
transform: translateY(-1px);
color: var(--default-text-color);
}
.valex-shell .rep-recs a > i {
width: 34px;
height: 34px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: .55rem;
background: rgba(var(--info-rgb), .12);
color: rgb(var(--info-rgb));
font-size: 1rem;
}
.valex-shell .rep-quota { margin-bottom: 1rem; }
.valex-shell .rep-actions { display: flex; gap: .35rem; }
.rep-modal-bg {
position: fixed;
inset: 0;
z-index: 1060;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(6px);
display: grid;
place-items: center;
padding: 1rem;
}
.rep-modal {
width: min(720px, 94vw);
background: var(--custom-white);
border: 1px solid var(--default-border);
border-radius: .8rem;
overflow: hidden;
box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
color: var(--default-text-color);
}
.rep-modal > header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .9rem 1.1rem;
border-bottom: 1px solid var(--default-border);
}
.rep-modal > header span {
display: block;
color: var(--text-muted);
font-size: .68rem;
margin-top: 3px;
}
.rep-modal > header button {
background: none;
border: 0;
color: var(--text-muted);
font-size: 1.2rem;
cursor: pointer;
}
.rep-modal video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.rep-modal > footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: .8rem 1.1rem;
color: var(--text-muted);
font-size: .74rem;
}
@media (max-width: 1200px) {
.valex-shell .rep-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.valex-shell .rep-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.valex-shell .rep-cards { grid-template-columns: 1fr; }
.valex-shell .rep-metrics { grid-template-columns: 1fr; }
.valex-shell .rep-recs { grid-template-columns: 1fr; }
.valex-shell .rep-hero { padding: 1rem 1.1rem; }
}
/* ── موبایل: نوارهای چیپ/فیلتر بهجای چندخط، اسکرول افقی شوند ── */
@media (max-width: 575.98px) {
.rooms-filterbar,
.ft-ev-filters {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.rooms-filterbar::-webkit-scrollbar,
.ft-ev-filters::-webkit-scrollbar { display: none; }
.ft-ev-filters .ft-ev-chip { flex-shrink: 0; }
/* فشردهتر شدن کارتهای آماری روی موبایل */
.valex-shell .ops-stat { min-height: 72px; padding: .7rem .8rem; gap: .6rem; }
.valex-shell .ops-stat > span { flex-basis: 36px; height: 36px; font-size: 1.05rem; }
/* فوتر پنل در موبایل کوتاهتر */
.valex-shell .footer .container span { font-size: .72rem; }
}
/* ── دستههای منوی کناری جمعشونده (کلیک روی عنوان دسته) ── */
.valex-shell .main-menu > .slide__category {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
outline: none;
}
.valex-shell .main-menu > .slide__category:focus-visible .category-name {
text-decoration: underline;
}
.valex-shell .slide-cat-angle {
font-size: .75rem;
opacity: .5;
transition: transform .18s ease;
}
.valex-shell .slide__category.cat-closed .slide-cat-angle {
transform: rotate(90deg);
}
/* فقط در حالت عمودی پنهان شود؛ در منوی افقی عنوان دستهها اصلاً دیده نمیشود */
html:not([data-nav-layout="horizontal"]) .valex-shell .main-menu > li.cat-hidden {
display: none !important;
}
/* ══ پوستهٔ شب با گرادیانت آبی-فیروزهای برای سایدبار پنل مدیریت ══ */
html[data-theme-mode="dark"] .valex-shell .app-sidebar {
background: linear-gradient(180deg, #0a2463 0%, #1d4ed8 45%, #0ea5e9 100%);
border-inline-end-color: rgba(255, 255, 255, 0.08);
}
html[data-theme-mode="dark"] .valex-shell .app-sidebar .main-sidebar,
html[data-theme-mode="dark"] .valex-shell .app-sidebar .main-sidebar-header {
background: transparent;
}
html[data-theme-mode="dark"] .valex-shell .app-sidebar .main-sidebar-header {
border-block-end-color: rgba(255, 255, 255, 0.08);
}