/* HOOMAN KARAMI — PANEL THEME V2
   Visual override only. No application logic. */

:root {
  --panel-red: #b72b36;
  --panel-red-soft: rgba(183,43,54,.34);
  --panel-red-glow: rgba(183,43,54,.15);
  --panel-surface: rgba(24,27,32,.94);
  --panel-border: rgba(183,43,54,.48);
}

/* Page */
body {
  background:
    radial-gradient(circle at 50% -10%, rgba(183,43,54,.055), transparent 34%),
    #0b0e11;
}

.app.wide {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding-bottom: 48px;
}

/* Header / logo */
.hero {
  text-align: center;
  padding-top: 28px;
  margin-bottom: 24px;
}

.hero .logo,
.logo {
  display: block;
  margin: 0 auto 20px;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 6px rgba(220,45,55,.42))
    drop-shadow(0 0 18px rgba(183,43,54,.20));
}

.hero h1 {
  text-align: center;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 10px 0 8px;
}

.topbar {
  margin-bottom: 14px;
}

/* Main cards / actions */
.card,
.panel,
.row {
  border: 1px solid var(--panel-border);
  background:
    linear-gradient(180deg, rgba(29,31,37,.97), rgba(20,22,27,.97));
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    0 0 18px var(--panel-red-glow);
}

.card {
  padding: 22px;
}

.row {
  min-height: 58px;
  padding: 15px 20px;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

/* Menu/action rows */
.stack > .row {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  font-weight: 700;
  line-height: 1.65;
}

.stack > .row:hover {
  transform: translateY(-2px);
  border-color: rgba(221,55,65,.72);
  background:
    linear-gradient(180deg, rgba(34,34,40,.99), rgba(23,23,29,.99));
  box-shadow:
    0 12px 30px rgba(0,0,0,.25),
    0 0 22px rgba(183,43,54,.20);
}

/* Dashboard metric cards */
.grid2,
.grid3 {
  gap: 16px;
}

.grid2 > .card,
.grid3 > .card {
  text-align: center;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid2 > .card strong,
.grid3 > .card strong,
.card .kpi {
  font-size: 1.55rem;
  font-weight: 800;
}

/* Buttons */
.btn,
button,
input[type="button"],
input[type="submit"] {
  border-radius: 14px;
  font-weight: 750;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
}

.btn.primary,
.primary {
  border: 1px solid rgba(207,48,59,.66);
  box-shadow: 0 0 16px rgba(183,43,54,.15);
}

/* Inputs */
input,
select,
textarea {
  border-radius: 14px !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(211,54,64,.72) !important;
  box-shadow: 0 0 0 3px rgba(183,43,54,.10);
}

/* Tables */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th {
  font-weight: 800;
  text-align: center;
}

td {
  vertical-align: middle;
}

th,
td {
  padding: 14px 12px;
}

tbody tr {
  transition: background .15s ease;
}

tbody tr:hover {
  background: rgba(183,43,54,.045);
}

/* General typography */
h1,
h2,
h3 {
  font-weight: 800;
}

.muted {
  line-height: 1.8;
}

/* Preserve alert semantics */
.danger {
  box-shadow: none;
}

/* Responsive */
@media (max-width: 760px) {
  .app.wide {
    width: min(100% - 20px, 1180px);
  }

  .grid2,
  .grid3 {
    grid-template-columns: 1fr !important;
  }

  .hero {
    padding-top: 18px;
  }

  .card {
    padding: 18px;
  }

  .row {
    min-height: 56px;
    padding: 14px 16px;
  }

  th,
  td {
    padding: 11px 8px;
  }
}

/* PANEL V2 — FINAL MENU ALIGNMENT */
#root .row {
  position: relative;
}

#root .row:not(.grid2):not(.grid3) {
  text-align: center !important;
}

#root .stack .row,
#root .panel .row,
#root a.row,
#root button.row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-weight: 750 !important;
  font-size: 1rem;
  border-color: rgba(183,43,54,.38);
  box-shadow:
    0 7px 20px rgba(0,0,0,.18),
    0 0 12px rgba(183,43,54,.08);
}

#root .stack .row > *,
#root .panel .row > *,
#root a.row > *,
#root button.row > * {
  margin-inline: auto !important;
  text-align: center !important;
}

#root .stack .row:hover,
#root a.row:hover,
#root button.row:hover {
  border-color: rgba(207,48,59,.62);
  box-shadow:
    0 10px 25px rgba(0,0,0,.22),
    0 0 18px rgba(183,43,54,.15);
}


/* PANEL V2 — EXACT STACK BUTTON FIX */
#root .stack > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  min-height: 58px;
  padding: 14px 22px;

  font-size: 16px;
  font-weight: 750;

  border: 1px solid rgba(183,43,54,.40);
  border-radius: 16px;

  background:
    linear-gradient(180deg, rgba(29,31,37,.97), rgba(20,22,27,.97));

  box-shadow:
    0 7px 20px rgba(0,0,0,.18),
    0 0 13px rgba(183,43,54,.09);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

#root .stack > button:hover {
  transform: translateY(-2px);
  border-color: rgba(207,48,59,.68);

  box-shadow:
    0 10px 26px rgba(0,0,0,.24),
    0 0 19px rgba(183,43,54,.16);
}

/* PANEL V2 — DESKTOP SCALE FINAL */
@media (min-width: 1100px) {
  #root.app.wide {
    width: min(1420px, calc(100% - 80px)) !important;
  }

  #root .hero {
    padding-top: 34px;
    margin-bottom: 28px;
  }

  #root .hero .logo,
  #root .logo {
    width: 96px;
    height: 96px;
    margin-bottom: 22px;
  }

  #root .hero h1 {
    font-size: 2rem;
    margin-bottom: 14px;
  }

  #root .grid2 {
    gap: 20px;
  }

  #root .grid2 > .card {
    min-height: 138px;
    padding: 26px;
  }

  #root .grid2 > .card strong,
  #root .card .kpi {
    font-size: 1.9rem;
  }

  #root .stack {
    gap: 12px;
  }

  #root .stack > button {
    min-height: 68px;
    padding: 18px 28px;
    font-size: 17px;
    border-radius: 18px;
  }

  #root .topbar {
    margin-bottom: 18px;
  }
}


/* V3 Stage 05 — Operational Admin Dashboard */
.dashboard-health{margin-top:18px}
.dashboard-health h2,.dashboard-priorities h2{text-align:center}
.dashboard-priorities{margin:22px 0}
.priority-card{display:flex!important;align-items:center!important;justify-content:space-between!important;text-align:right!important;gap:18px;min-height:58px}
.priority-card b{font-size:1.15rem}
.priority-card.severity-critical{border-color:rgba(255,65,72,.78)!important;box-shadow:0 0 18px rgba(255,48,56,.16)!important}
.priority-card.severity-high{border-color:rgba(217,72,78,.58)!important}
.priority-card.severity-medium{border-color:rgba(193,82,87,.42)!important}
.status-ok{color:#dfe8df}.status-warn{color:#ffd3d5}
.dashboard-ok{text-align:center}
.dashboard-ok p{margin-bottom:0}


/* V3 Stage 06 — CRM */
.crm-filters{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.crm-filters label{font-weight:700}
.crm-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.crm-tags .pill{display:inline-flex;align-items:center;gap:6px}
.tag-remove{width:24px!important;min-height:24px!important;height:24px;padding:0!important;border-radius:50%;font-size:16px}
@media(max-width:760px){.crm-filters{grid-template-columns:1fr}.crm-filters label{margin-top:4px}}


/* V3 Stage 07 — Payments */
.payment-review-card{position:relative}
.payment-txid{max-width:62%;word-break:break-all;direction:ltr;text-align:left}
.payment-review-form{margin-top:16px;padding-top:14px;border-top:1px solid rgba(183,43,54,.26)}
.payment-review-form label{display:block;font-weight:750;margin-top:8px}
.payment-review-form textarea{resize:vertical}
.payment-review-form .muted{display:block;min-height:20px;margin-top:8px;text-align:center}

/* V3 Stage 09 — Courses */
.course-form label{display:block;font-weight:750;margin-top:9px}.course-form textarea{resize:vertical}.danger-zone{border-color:rgba(255,65,72,.62)!important;margin-top:18px}.danger-zone label{display:flex;align-items:center;gap:8px;margin:12px 0}

/* V3 Stage 10 — Dynamic Menus */
.menu-form label{display:block;font-weight:750;margin-top:9px}.menu-form textarea{resize:vertical}.check-label{display:flex!important;gap:8px;align-items:center}.menu-preview-card,.menu-preview-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(183,43,54,.36);border-radius:14px;padding:14px;margin:14px 0;background:rgba(20,20,24,.78)}.menu-preview-card .menu-label,.menu-preview-item .menu-label{font-weight:800}.menu-preview-card .menu-sub,.menu-preview-item .menu-sub{opacity:.72;margin-top:5px}.menu-preview-item .stack{width:100%;margin-top:10px;padding-right:12px}

/* V3 Stage 11 — Results */
.result-form label{display:block;font-weight:750;margin-top:9px}.result-form input[type=checkbox]{width:auto}.result-form .muted{min-height:20px}

/* V3 Stage 12 — Social Networks */
.social-form label{display:block;font-weight:750;margin-top:9px}.social-form textarea{resize:vertical}.social-form input[dir=ltr]{text-align:left}

/* V3 Stage 13 — Advertising */
.ad-slot-form label,.ad-review-form label{display:block;font-weight:750;margin-top:9px}.ad-review-form{margin-top:14px;padding-top:12px;border-top:1px solid rgba(183,43,54,.26)}.ad-review-form textarea,.ad-slot-form textarea{resize:vertical}.ad-request-card [dir=ltr]{word-break:break-all;text-align:left}

/* V3 Stage 14 — Discounts */
.discount-form label{display:block;font-weight:750;margin-top:9px}.discount-form input[dir=ltr]{text-align:left}

/* V3 Stage 15 — Campaigns & Automation */
.automation-form label,.campaign-form label{display:block;font-weight:750;margin-top:9px}.automation-form textarea,.campaign-form textarea{resize:vertical}.campaign-preview{margin-top:14px}.campaign-preview h3{margin-top:0}

/* V3 Stage 16 — Support & FAQ */
.support-reply label,.faq-form label{display:block;font-weight:750;margin-top:9px}.faq-form textarea,.support-reply textarea{resize:vertical}

/* V3 Stage 18 — Owner Investment */
.owner-review-form label{display:block;font-weight:750;margin-top:9px}.owner-review-form textarea{resize:vertical}

/* V3 Stage 19 — Owner Management */
.owner-admin-form label,.owner-brand-form label{display:block;font-weight:750;margin-top:9px}

/* V3 Stage 20 — System Health & Recovery */
.danger-zone label{display:flex;gap:8px;align-items:center;margin:10px 0}

/* V3 Stage 21 — Reconciliation */
.vip-form label,.finance-reconcile label{display:block;font-weight:750;margin-top:9px}.vip-form textarea,.finance-reconcile textarea{resize:vertical}

/* RC2 Master Acceptance UI safety */
.topbar{display:flex;align-items:center;gap:10px}.topbar .topbar-action{margin-inline-start:auto;width:auto;min-width:88px}
.cancel-action{display:block;margin:22px auto 0;max-width:360px}
.card button,.panel button,.grid2 button,.stack button{justify-content:center;text-align:center}
#adminToast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:9999;padding:11px 18px;border-radius:14px;background:#171717;border:1px solid rgba(255,255,255,.18);pointer-events:none;transition:.2s ease}
#adminToast.show{opacity:1;transform:translate(-50%,0)}#adminToast.error{border-color:rgba(220,40,55,.65)}
body.admin-busy::before{content:"";position:fixed;z-index:10000;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,transparent,#d71920,transparent);animation:adminBusy 1.1s linear infinite;background-size:200% 100%}
@keyframes adminBusy{from{background-position:200% 0}to{background-position:-200% 0}}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media(max-width:1024px){.grid2{grid-template-columns:1fr 1fr}}@media(max-width:700px){.grid2{grid-template-columns:1fr}.topbar{flex-wrap:wrap}}