/* ============================================================
   user_panel.css — User Panel layouts
   Loaded AFTER cra_shared.css. Uses the same design tokens.
   ============================================================ */

/* ── AUTH PAGE (signup / login) ── */
.authShell {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--navy), #0d2460);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.authCard {
  background: #fff;
  border-radius: 22px;
  padding: 36px 36px 28px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 40px 100px rgba(0,0,0,.35);
}
.authBrand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.authBrand img { width: 42px; height: 42px; border-radius: 10px; }
.authBrand .brandName { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--navy); }
.authBrand .brandSub  { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.authTitle { font-family: var(--font-head); font-size: 24px; color: var(--navy); margin-bottom: 4px; }
.authSub   { font-size: 13px; color: var(--muted); margin-bottom: 22px; }

.planBox {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 2px solid #93c5fd;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.planBox .pbLabel { font-family: var(--font-head); font-size: 10px; font-weight: 900; color: var(--blue2); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.planBox .pbName  { font-family: var(--font-head); font-size: 17px; font-weight: 900; color: var(--navy); }
.planBox .pbDesc  { font-size: 12px; color: var(--muted); margin-top: 4px; }

.fld { margin-bottom: 14px; }
.fld label {
  display: block;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.fld input, .fld select, .fld textarea {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  outline: none;
  font-family: var(--font-body);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.fld .hint { font-size: 11px; color: var(--muted); margin-top: 4px; }

.btnFull { width: 100%; justify-content: center; }

.authFoot { text-align: center; font-size: 12px; color: var(--muted); margin-top: 18px; }
.authFoot a { color: var(--blue2); font-weight: 700; }

.alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.alertErr { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.alertOk  { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.alertWarn{ background: #fef9c3; color: #78350f; border: 1px solid #fde68a; }
.alertInfo{ background: #dbeafe; color: #1e3a8a; border: 1px solid #93c5fd; }

/* ── PANEL SHELL (logged-in pages) ── */
.panelShell {
  min-height: 100vh;
  background: var(--off);
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 62px 1fr;
  grid-template-areas: "topbar topbar" "sidebar main";
}
.pTop {
  grid-area: topbar;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  position: sticky;
  top: 0;
  z-index: 100;
}
.pTop .brand { color: #fff; }
.pTop .brand .brandName { color: #fff; }
.pTop .brand .brandSub  { color: rgba(255,255,255,.5); }
.pTop .pUser {
  display: flex; align-items: center; gap: 12px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
}
.pTop .pUser .pAvatar {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 900; font-size: 12px;
}

.pSide {
  grid-area: sidebar;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  position: sticky; top: 62px; height: calc(100vh - 62px);
  overflow-y: auto;
}
.pSide .pLbl {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 12px 6px;
}
.pSide a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border-radius: 10px;
  margin-bottom: 2px;
  transition: background .15s;
}
.pSide a:hover { background: var(--off); }
.pSide a.active {
  background: linear-gradient(135deg, rgba(220,38,38,.1), rgba(220,38,38,.05));
  color: var(--red2);
}
.pSide a.danger { color: var(--muted); }
.pSide a.danger:hover { color: var(--red2); }

.pMain { grid-area: main; padding: 28px 32px; }
.pHead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.pHead h1 { font-family: var(--font-head); font-size: 24px; color: var(--navy); margin-bottom: 4px; }
.pHead .pSub { font-size: 13px; color: var(--muted); }

/* ── CARDS ── */
.pCard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadowSm);
}
.pCard h3 { font-family: var(--font-head); font-size: 15px; color: var(--navy); margin-bottom: 4px; }
.pCard .pCardSub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }

/* ── SUBSCRIPTION TILES ── */
.subGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 900px) { .subGrid { grid-template-columns: 1fr; } }

.subTile {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  transition: all .2s;
}
.subTile.active { border-color: #86efac; }
.subTile.invoiced { border-color: #fde68a; }
.subTile.requested { border-color: #93c5fd; }
.subTile.expired, .subTile.cancelled { opacity: .65; }

.subTile .stHead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.subTile .stEngine { font-family: var(--font-head); font-size: 16px; font-weight: 900; color: var(--navy); }
.subTile .stPlan { font-size: 12px; color: var(--muted); margin-top: 2px; }
.subTile .stMeta { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); margin: 14px 0 8px; flex-wrap: wrap; }
.subTile .stMeta strong { color: var(--ink); font-weight: 700; }
.subTile .stActions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

.btnSm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--font-head); font-size: 11.5px; font-weight: 800;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: all .15s;
}
.btnSmNavy { background: var(--navy); color: #fff; }
.btnSmNavy:hover { background: var(--navy2); }
.btnSmRed { background: var(--red); color: #fff; }
.btnSmRed:hover { background: var(--red2); }
.btnSmOutline { background: #fff; color: var(--navy); border: 1.5px solid var(--border); }
.btnSmOutline:hover { border-color: var(--navy); }
.btnSmMute { background: var(--off); color: var(--muted); border: 1.5px solid var(--border); }

/* ── TABLE ── */
.pTbl { width: 100%; border-collapse: collapse; }
.pTbl th { background: var(--off); color: var(--navy); padding: 12px 14px; font-family: var(--font-head); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--border); }
.pTbl td { padding: 14px; font-size: 13px; border-bottom: 1px solid var(--border); color: var(--ink); }
.pTbl tr:last-child td { border-bottom: none; }
.pTbl tr:hover td { background: var(--off); }

.badgeMute { background: #e5e7eb; color: #4b5563; border: 1px solid #d1d5db; }

/* ── DANGER ZONE ── */
.dangerBox {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 14px;
  padding: 18px 22px;
}
.dangerBox h3 { color: var(--red2); }

/* ── MOBILE ── */
@media (max-width: 760px) {
  .panelShell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .pSide { display: none; }
  .pMain { padding: 18px; }
}