/* ═══════════════════════════════════════════════════════════════
   Profile Page — v2 (Theme-aware · Class-based · Radius-respecting)
   Path: /opt/public_html/admin/assets/css/profile.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Override parent .page padding (edge-to-edge) ═══ */
.page[data-page="profile"] {
  padding-inline: 0 !important;
  max-inline-size: 100%;
}

/* Header يفضل بـ padding داخلى */
.page[data-page="profile"] > .page-head {
  padding-inline: 12px;
}

@media (min-width: 600px) {
  .page[data-page="profile"] > .page-head {
    padding-inline: 16px;
  }
}

/* ─── Loading ─── */
.pf-loading { padding: 8px 0; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 600px) { .pf-loading { padding: 12px 0; gap: 12px; } }
.pf-skel {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: pfShimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-lg, 14px);
}
.pf-skel-hero  { block-size: 76px; }
.pf-skel-strip { block-size: 88px; }
.pf-skel-bill  { block-size: 160px; }
@keyframes pfShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Error ─── */
.pf-error .empty { padding: 32px 20px; text-align: center; color: var(--txt-2); }

/* ─── Content ─── */
.pf-content {
  padding-block: 8px 80px;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 600px) {
  .pf-content {
    padding-inline: 0;
    padding-block: 12px 80px;
    gap: 12px;
  }
}

@media (min-width: 900px) {
  .pf-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "hero  hero"
      "stats stats"
      "bill  quick"
      "info  actions";
    gap: 12px;
    padding-inline: 0;
  }
  .pf-hero    { grid-area: hero; }
  .pf-stats   { grid-area: stats; }
  .pf-bill    { grid-area: bill; }
  .pf-quick   { grid-area: quick; align-content: start; }
  .pf-card    { grid-area: info; }
  .pf-actions { grid-area: actions; }
}

/* ═══ Hero ═══ */
.pf-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
}

.pf-avatar {
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--r-md, 14px);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  flex-shrink: 0;
}

.pf-hero-body { flex: 1; min-inline-size: 0; }

.pf-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--txt);
  margin-block-end: 4px;
}

.pf-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--txt-2);
  flex-wrap: wrap;
}

.pf-dot { opacity: 0.5; }

/* ═══ Stat Strip ═══ */
.pf-stats { border-radius: var(--r-lg, 16px); overflow: hidden; }

/* ═══ Bill Card ═══ */
.pf-bill {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 18px);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.pf-bill::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ok));
}

.pf-bill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 14px;
}

.pf-bill-head-l {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--txt);
}

.pf-bill-head-l .ic {
  inline-size: 18px;
  block-size: 18px;
  color: var(--accent);
}

.pf-bill-badge {
  padding: 4px 10px;
  border-radius: var(--r-pill, 20px);
  font-size: 11.5px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
}

.pf-bill-badge[data-kind="ok"]      { background: var(--ok-soft);   color: var(--ok); }
.pf-bill-badge[data-kind="warn"]    { background: var(--warn-soft); color: var(--warn); }
.pf-bill-badge[data-kind="bad"]     { background: var(--bad-soft);  color: var(--bad); }
.pf-bill-badge[data-kind="neutral"] { background: var(--surface-3); color: var(--txt-2); }

.pf-bill-body { margin-block-end: 16px; }

.pf-bill-plan {
  font-size: 18px;
  font-weight: 700;
  color: var(--txt);
  margin-block-end: 8px;
  line-height: 1.4;
}

.pf-bill-expire {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--txt-2);
}

.pf-bill-expire .ic { inline-size: 14px; block-size: 14px; }

.pf-bill-cta {
  inline-size: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-md, 12px);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.pf-bill-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow);
}

.pf-bill-cta:active { transform: translateY(0); }

.pf-bill-cta .ic { inline-size: 16px; block-size: 16px; }

.pf-bill-empty {
  text-align: center;
  padding: 20px;
  color: var(--txt-2);
}

.pf-bill-empty .ic {
  inline-size: 32px;
  block-size: 32px;
  color: var(--accent);
  margin-block-end: 10px;
}

.pf-bill-empty b { display: block; color: var(--txt); margin-block-end: 4px; }
.pf-bill-empty span { font-size: 13px; }

/* ═══ Quick Strip ═══ */
.pf-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  padding: 12px;
}

.qs-item {
  background: transparent;
  border: none;
  padding: 10px 6px;
  border-radius: var(--r-md, 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
  font: inherit;
  color: inherit;
}

.qs-item:hover { background: var(--surface-2); }

.qs-ic {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--r-md, 10px);
  display: grid;
  place-items: center;
}

.qs-ic[data-kind="primary"] { background: var(--accent-soft); color: var(--accent); }
.qs-ic[data-kind="warn"]    { background: var(--warn-soft);   color: var(--warn); }
.qs-ic[data-kind="info"]    { background: var(--info-soft);   color: var(--info); }
.qs-ic[data-kind="ok"]      { background: var(--ok-soft);     color: var(--ok); }

.qs-ic .ic { inline-size: 18px; block-size: 18px; }

.qs-item b { font-size: 15px; color: var(--txt); }
.qs-item span { font-size: 11px; color: var(--txt-2); }

/* ═══ Card (Info) ═══ */
.pf-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
}

.pf-card-head {
  padding: 14px 16px;
  border-block-end: 1px solid var(--line);
  color: var(--txt);
}

.pf-rows { display: flex; flex-direction: column; }

.pf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-block-end: 1px solid var(--line);
  gap: 12px;
}

.pf-row:last-child { border-block-end: none; }

.pf-row-lbl { font-size: 13px; color: var(--txt-2); }

.pf-row-val {
  font-size: 13.5px;
  color: var(--txt);
  font-weight: 500;
  text-align: end;
  word-break: break-word;
}

/* ═══ Actions ═══ */
.pf-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  padding: 8px;
}

.pf-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: none;
  background: transparent;
  border-radius: var(--r-md, 12px);
  cursor: pointer;
  transition: background 0.15s;
  font: inherit;
  color: inherit;
  text-align: start;
  inline-size: 100%;
}

.pf-action:hover  { background: var(--surface-2); }
.pf-action:active { transform: scale(0.99); }

.pf-action-ic {
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-md, 12px);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.pf-action-ic .ic { inline-size: 18px; block-size: 18px; }

.pf-action-body { flex: 1; min-inline-size: 0; }

.pf-action-body b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  margin-block-end: 2px;
}

.pf-action-body span {
  display: block;
  font-size: 12px;
  color: var(--txt-2);
}

.pf-action-chev {
  inline-size: 16px;
  block-size: 16px;
  color: var(--txt-3);
  flex-shrink: 0;
}

.pf-action-danger .pf-action-ic { background: var(--bad-soft); color: var(--bad); }
.pf-action-danger .pf-action-body b { color: var(--bad); }

/* ═══ Toggle ═══ */
.pf-toggle {
  inline-size: 40px;
  block-size: 22px;
  border-radius: var(--r-pill, 12px);
  background: var(--surface-3);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.pf-toggle[data-on="1"] { background: var(--accent); }

.pf-toggle-dot {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 18px;
  block-size: 18px;
  background: var(--on-accent, #fff);
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[dir="rtl"] .pf-toggle[data-on="1"] .pf-toggle-dot { transform: translateX(-18px); }
[dir="ltr"] .pf-toggle[data-on="1"] .pf-toggle-dot { transform: translateX(18px); }

/* End of profile.css */