/* =============================================================================
   polish.css — Premium visual layer (Mobbin-grade density, calm gold palette)
   Loaded after layout.css on all app pages.
   ========================================================================== */

/* Page reveal after boot */
html:not(.booting) .content__inner {
  animation: page-in var(--dur-4) var(--ease-out) both;
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Calmer surfaces — less visual noise */
body::before { opacity: calc(var(--bg-grain) * 0.6); }
.card {
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
}
.card--hover:hover {
  transform: translateY(-1px);
}

/* Stats — compact, icon always visible */
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat__label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--text-2); font-weight: var(--weight-medium);
}
.stat__icon {
  inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex: none;
}
.stat__icon .icon { color: inherit; opacity: 1; }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
html[lang="ar"] .stat__value { font-family: var(--font-arabic); }
.stat__delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  padding: 0.15em 0.45em; border-radius: var(--radius-pill);
}
.stat__delta--up { color: var(--ok); background: var(--ok-soft); }
.stat__delta--down { color: var(--danger); background: var(--danger-soft); }

/* Tables — tighter, clearer hierarchy */
.table tbody tr { transition: background var(--dur-1) var(--ease-standard); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody td {
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--divider);
  vertical-align: middle;
}
.table thead th { padding: var(--space-2) var(--space-3); }

/* Identity cells */
.idcell { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.idcell__meta { display: flex; flex-direction: column; min-inline-size: 0; }
.idcell__name { font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idcell__sub { font-size: var(--text-2xs); color: var(--text-muted); }
.avatar {
  display: grid; place-items: center;
  inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color: var(--accent); font-weight: var(--weight-bold); font-size: var(--text-xs);
  flex: none;
}

/* Tabs — pill style */
.tabs {
  display: flex; gap: var(--space-1); flex-wrap: wrap;
  padding: var(--space-1);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  inline-size: fit-content;
  max-inline-size: 100%;
}
.tab {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-2);
  transition: all var(--dur-2) var(--ease-standard);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-1);
}

/* Modals / drawers */
.modal, .drawer {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.drawer { inline-size: min(28rem, 100vw); max-block-size: 100dvh; overflow: auto; }
.drawer__head, .drawer__foot {
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-width) solid var(--divider);
}
.drawer__foot { border-block-end: none; border-block-start: var(--border-width) solid var(--divider); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.drawer__body { padding: var(--space-4); }

/* Premium inputs everywhere */
.input, .select, .textarea {
  background: var(--surface-inset, var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent);
}
.input-group > span:first-child .icon,
.input-group > span:first-child svg { color: var(--text-muted); opacity: 1; }

/* Buttons with icons */
.btn .icon, .btn svg.icon { opacity: 1; color: inherit; flex-shrink: 0; }
.nav-item .icon { opacity: 1; }

/* Page head compact */
.page-head { margin-block-end: var(--space-1); }
.page-head p { font-size: var(--text-sm); }

/* KPI grid responsive */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .page-head__actions { inline-size: 100%; }
  .page-head__actions .btn { flex: 1; }
  .tabs { inline-size: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* Empty / loading */
.empty-state {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Auth feature icons */
.auth-feature__icon .icon,
.auth-feature__icon svg { color: var(--gold-300); opacity: 1; }

/* Segmented control compact */
.segmented button { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }

/* Toast visibility */
.toast .icon { opacity: 1; }

/* ---- Subscriber command center ---- */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
}
.row-actions--danger:hover { color: var(--danger); }
.kpi-card {
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1);
  border: var(--border-width) solid var(--border);
}
.kpi-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.kpi-card--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.kpi-grid--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
@media (max-width: 1024px) { .kpi-grid--compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .kpi-grid--compact { grid-template-columns: repeat(2, 1fr); } }
.subscribers-search { min-inline-size: min(20rem, 100%); flex: 1; max-inline-size: 24rem; }
.table-card { overflow: hidden; }
.table-card .table-wrap { border-radius: 0; }

/* ---- Live session traffic ---- */
.traffic-cell { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); line-height: 1.3; }
.traffic-cell__down { color: var(--c-3); }
.traffic-cell__up { color: var(--c-1); }

/* ---- Dual-WAN toggle ---- */
.wan-dual__track {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  padding: var(--space-1); background: var(--surface-2); border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border);
}
.wan-dual__opt {
  padding: var(--space-3) var(--space-4); border: none; border-radius: var(--radius-md);
  background: transparent; font-weight: var(--weight-semibold); font-size: var(--text-sm);
  cursor: pointer; transition: background var(--dur-2), box-shadow var(--dur-2), color var(--dur-2);
  color: var(--text-2);
}
.wan-dual__opt:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.wan-dual__opt.is-selected {
  background: var(--surface); color: var(--accent);
  box-shadow: var(--shadow-2); border: var(--border-width) solid var(--accent);
}
.wan-dual__opt.is-live.is-selected { box-shadow: 0 0 0 1px var(--ok), var(--shadow-2); }
.wan-dual__opt:disabled { opacity: 0.55; cursor: not-allowed; }
.wan-card--active { border-color: var(--ok); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); }
.switch--lg .switch__track { inline-size: 2.75rem; block-size: 1.5rem; }

/* ---- Subscriber CRM detail ---- */
.subscriber-hero {
  display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; align-items: flex-start;
}
.subscriber-hero__main { display: flex; gap: var(--space-4); align-items: flex-start; flex: 1; min-inline-size: min(100%, 20rem); }
.subscriber-hero__avatar { inline-size: 4rem; block-size: 4rem; font-size: var(--text-lg); }
.subscriber-hero__name { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-extrabold); }
.subscriber-hero__phone { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.subscriber-hero__aside {
  display: grid; grid-template-columns: repeat(2, minmax(8rem, 1fr)); gap: var(--space-3);
  min-inline-size: min(100%, 18rem);
}
.kpi-grid--detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .kpi-grid--detail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kpi-grid--detail, .subscriber-hero__aside { grid-template-columns: 1fr; } }
.detail-fact { display: flex; flex-direction: column; gap: 2px; }
.detail-fact__label { font-size: var(--text-2xs); color: var(--text-muted); }
.detail-fact__value { font-size: var(--text-sm); font-weight: var(--weight-semibold); word-break: break-word; }
.detail-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3);
}
.detail-grid--1 { grid-template-columns: 1fr; }
@media (max-width: 640px) { .detail-grid { grid-template-columns: 1fr; } }
.live-session--on { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.traffic-meter__row { display: flex; align-items: center; gap: var(--space-2); }
.traffic-meter__track {
  flex: 1; block-size: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden;
}
.traffic-meter__fill { block-size: 100%; border-radius: var(--radius-pill); transition: width var(--dur-3); }
.traffic-meter__fill--down { background: var(--c-3); }
.traffic-meter__fill--up { background: var(--c-1); }
.service-card { border-inline-start: 3px solid var(--accent); }
.timeline__item {
  display: flex; gap: var(--space-3); padding: var(--space-3) 0;
  border-block-end: 1px solid var(--divider);
}
.timeline__item:last-child { border-block-end: none; }
.timeline__dot {
  inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--accent);
  margin-block-start: .35rem; flex: none;
}
.timeline__body { flex: 1; min-inline-size: 0; }
.subscriber-detail__tab-body { min-block-size: 12rem; }

/* ---- Finance accounting ---- */
.kpi-grid--finance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .kpi-grid--finance { grid-template-columns: repeat(2, 1fr); } }
.finance-kpi { border-block-start: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.finance-cycle .field .label { font-size: var(--text-2xs); }
.finance-filter { background: var(--surface-2); }
.finance-table { border-radius: var(--radius-md); overflow: hidden; }
.finance-tab-body { min-block-size: 14rem; }
.finance-job { border-inline-start: 3px solid var(--accent); }
.segmented--sm .segmented button, .segmented--sm button { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }

/* ---- Premium sidebar ---- */
.sidebar__brand--premium { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); }
.sidebar__logo-wrap {
  display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--gold-500) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-500) 25%, transparent);
}
.nav-item--premium { border: 1px solid transparent; }
.nav-item--premium:hover { border-color: var(--border); }
.nav-item--active, .nav-item[aria-current="page"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
.app[data-collapsed="true"] .nav-item--premium { position: relative; }
.app[data-collapsed="true"] .nav-item--premium:hover::after {
  content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 8px); inset-block-start: 50%;
  transform: translateY(-50%); padding: var(--space-1) var(--space-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-2xs); white-space: nowrap; z-index: 10;
}

/* ---- Subscriber list live cells ---- */
.speed-cell__down { color: var(--c-3); }
.speed-cell__up { color: var(--c-1); }
.live-pulse { border-inline-start: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }

/* ---- Subscriber detail layout ---- */
.subscriber-detail-layout__side { position: sticky; inset-block-start: calc(var(--topbar-h) + var(--space-3)); align-self: start; }
.subscriber-side__profile { text-align: center; }
.subscriber-side__avatar { margin-inline: auto; margin-block-end: var(--space-3); }
.subscriber-side__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; }
.subscriber-side__phone { font-size: var(--text-sm); color: var(--text-muted); }
.mikrotik-tag { border-inline-start: 3px solid var(--accent); background: var(--accent-soft); }

/* ---- Expenses professional ---- */
.kpi-grid--expenses { grid-template-columns: 1fr 1fr 2fr; }
@media (max-width: 1024px) { .kpi-grid--expenses { grid-template-columns: 1fr; } }
.expense-kpi { border-block-start: 3px solid var(--danger); }
.expense-kpi--total { border-block-start-color: var(--accent); }
.expenses-table .table--premium tbody tr:hover { background: var(--surface-2); }
.expenses-toolbar { background: var(--surface-2); }

/* ---- Plans bandwidth mode ---- */
.bandwidth-mode__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 768px) { .bandwidth-mode__grid { grid-template-columns: 1fr; } }
.bandwidth-mode__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg); border: 2px solid var(--border);
  background: var(--surface); cursor: pointer; text-align: start; transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.bandwidth-mode__card:hover { border-color: var(--border-strong); }
.bandwidth-mode__card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.bandwidth-mode__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); }
.bandwidth-mode__title { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.bandwidth-mode__desc { font-size: var(--text-2xs); line-height: 1.4; }
.modal--wide { inline-size: min(42rem, calc(100vw - 2rem)); }
.modal--premium { border-radius: var(--radius-xl); }
.table--premium thead th { font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
html[lang="ar"] .table--premium thead th { text-transform: none; }

/* ---- Premium page chrome ---- */
.card--premium {
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 35%, var(--surface)) 100%);
  box-shadow: var(--shadow-1);
}
.content__inner--premium .card { border-radius: var(--radius-lg); }
.page-head h2 { font-family: var(--font-display); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); }
html[lang="ar"] .page-head h2 { font-family: var(--font-arabic); }
.combobox--picker .combobox__list--picker { max-block-size: 16rem; overflow-y: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-3); }
.combobox__item--rich.is-active { background: var(--accent-soft); }

.detail-kpi { border-inline-start: 3px solid var(--accent); }
.speed-cell__sep { opacity: .45; margin-inline: .15em; }
.speed-cell__down { color: var(--c-3); }
.speed-cell__up { color: var(--c-1); }

/* ---- Dashboard layout ---- */
.dashboard-page { inline-size: 100%; }
.dashboard-page .grid-12 { margin-block-end: 0; }
.dashboard-page .card { inline-size: 100%; }
.dashboard-feed__list {
  list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.dashboard-feed__item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  transition: background var(--dur-2);
}
.dashboard-feed__item:hover { background: var(--surface-2); }
.dashboard-feed__icon { flex: none; inline-size: 2.25rem; block-size: 2.25rem; }
.dashboard-feed__body { flex: 1; min-inline-size: 0; }
.dashboard-feed__text { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.dashboard-feed__name { margin-inline-end: .35em; }
.dashboard-feed__time { font-size: var(--text-2xs); margin-block-start: var(--space-1); }
.dashboard-donut { block-size: 200px; min-inline-size: 0; }
.dashboard-donut__layout {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr;
  align-items: center; gap: var(--space-5);
}
@media (max-width: 640px) {
  .dashboard-donut__layout { grid-template-columns: 1fr; justify-items: center; }
}

.subscriber-detail-layout { align-items: start; }
@media (max-width: 1024px) {
  .subscriber-detail-layout__side { order: -1; }
  .subscriber-detail-layout__side .subscriber-side__profile { position: static; }
}
@media (min-width: 1025px) {
  .subscriber-detail-layout__side .subscriber-side { position: sticky; top: calc(var(--topbar-h) + var(--space-3)); }
}