/* backend>static>studio>css/billing.css */

*, *::before, *::after{ box-sizing: border-box; }

html{ scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable){
  html{ overflow-y: scroll; }
}

html, body{ height: 100%; }
html, body, body.billing{ overflow-x: hidden; }

img, svg, video, canvas{
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   THEME TOKENS
   - DARK default
   - LIGHT override quando html.light
   ========================================================= */
body.billing{
  /* layout */
  --shell-max: 1200px;
  --left-w: 260px;

  /* radii + shadow */
  --r: 16px;
  --r-sm: 12px;

  /* dark default */
  --bg: #0b0b0c;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --panel: #0f0f10;
  --card: #101012;

  --border: #1b1b1c;
  --border-2: #2b2b2c;

  --hover: rgba(255,255,255,.06);

  --primary: #4f46e5;
  --primary-2: #312e81;
  --danger: #fb7185;

  --shadow-inset: 0 1px 0 rgba(255,255,255,.03) inset;

  background: var(--bg);
  color: var(--text);
}

/* LIGHT override */
html.light body.billing{
  --bg: #f6f7f9;
  --text: #111827;
  --muted: #6b7280;

  --panel: #ffffff;
  --card: #ffffff;

  --border: #e5e7eb;
  --border-2: rgba(17,24,39,.12);

  --hover: rgba(17,24,39,.04);

  --primary: #2563eb;
  --primary-2: #1d4ed8;

  --shadow-inset: 0 1px 0 rgba(0,0,0,.02) inset;
}

/* =========================================================
   SHELL / LAYOUT
   ========================================================= */
.studio-shell{
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 16px;
  width: 100%;

  display: grid;
  grid-template-columns: minmax(0, var(--left-w)) minmax(0, 1fr);
  gap: 20px;
}

/* importantissimo in grid: evita overflow orizzontale quando ci sono tabelle */
.pane-left, .pane-right, .pane, .card{ min-width: 0; }

/* =========================================================
   PANELS
   ========================================================= */
.pane{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: inherit;
  box-shadow: var(--shadow-inset);
}

.pane-left{ padding: 16px; }

.pane-right{
  display:flex;
  flex-direction: column;
}

/* header destro */
.pane-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.pane-top h1{
  margin: 0;
  color: inherit;
  font-size: 1.4rem;
  font-weight: 800;
  flex: 1 1 auto;
  min-width: 180px;
}

.pane-body{ padding: 16px 20px; }

/* =========================================================
   TOP LINKS (header right)
   HTML uses: .top-links + a.link
   ========================================================= */
.top-links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

a.link{
  color: inherit;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 10px;
  background: transparent;
  white-space: nowrap;
  border: 1px solid transparent;
}

a.link:hover{
  background: var(--hover);
  border-color: var(--border-2);
}

/* =========================================================
   LEFT HEADER / SIDEBAR
   ========================================================= */
.pane-head h2{
  margin: 0 0 10px;
  color: inherit;
  font-weight: 800;
}

/* mobile-toplinks in left pane: default hidden */
.pane-head .mobile-toplinks{ display: none; }

.side .nav-item{
  display:block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: inherit;
  text-decoration: none;
  margin-bottom: 6px;
  border: 1px solid transparent;
}

.side .nav-item:hover{
  background: var(--hover);
  border-color: var(--border-2);
}

.side .nav-item.active{
  background: var(--hover);
  border-color: var(--border);
  font-weight: 800;
}

/* Support link */
.side .support-link{
  display:block;
  padding: 10px 12px;
  margin-top: 20px;
  border-radius: var(--r-sm);
  text-decoration:none;

  background: var(--primary-2);
  border: 1px solid var(--primary);
  color: #fff;
  font-weight: 800;
}

.side .support-link:hover{ filter: brightness(1.04); }

.side .grow{ flex: 1 1 auto; }

/* =========================================================
   VIEWS
   ========================================================= */
.view{ display:none; }
.view.active{ display:block; }

/* =========================================================
   CARDS / TABLES
   ========================================================= */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 16px;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-inset);
}

.title-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.title-row h3{
  margin: 0;
  font-weight: 800;
}

/* tables */
.pay-table,
.price-table{
  width: 100%;
  border-collapse: collapse;
}

.pay-table{ min-width: 560px; }
.price-table{ min-width: 720px; }

.pay-table th, .pay-table td,
.price-table th, .price-table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: inherit;
  vertical-align: top;
}

.pay-table th,
.price-table th{
  font-weight: 800;
}

/* piccoli dettagli */
.hint{
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0 0;
}

/* =========================================================
   KPI
   ========================================================= */
.kpi .kpi-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.kpi .label{ color: var(--muted); font-weight: 700; }

.kpi .value{
  font-size: 36px;
  font-weight: 900;
}

.actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.quick{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* =========================================================
   Pills / Chips / Buttons
   ========================================================= */
.pill{
  padding: 8px 12px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.pill:hover{ background: var(--hover); }

.chip{
  padding: 8px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.chip:hover{ background: var(--hover); }

.chip-primary{
  border-color: var(--primary);
  background: var(--primary-2);
  color: #fff;
  font-weight: 800;
}

.btn-primary{
  border: 1px solid var(--primary);
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color: #fff;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 800;
}
.btn-primary:hover{ filter: brightness(1.04); }

.btn-ghost{
  background: transparent;
  border: 1px solid var(--border-2);
  color: inherit;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 800;
}
.btn-ghost:hover{ background: var(--hover); }

/* =========================================================
   MODAL Add credits
   ========================================================= */
.modal[hidden]{ display:none; }
.modal .backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
}

.modal .modal-card{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(520px, 96vw);

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-body{ padding: 16px; }

.modal-actions{
  padding: 14px 16px;
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
}

.modal .row{
  display:grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.modal .row.totals{ grid-template-columns: 1fr 1fr; }

.modal .lab{ color: var(--muted); font-weight: 800; }

.spin{
  display:flex;
  align-items:center;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 4px;
  background: transparent;
}

.spin input{
  flex: 1;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 6px 8px;
  min-width: 0;
  outline: none;
}

.spin-btns{ display:flex; flex-direction: column; }

.spin-btns button{
  background: var(--hover);
  border: 1px solid transparent;
  color: inherit;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 8px;
}
.spin-btns button:hover{
  border-color: var(--border-2);
}

/* =========================================================
   TOOLTIP (solo Billing page)
   ========================================================= */
body.billing [data-tooltip]{ position: relative; }

body.billing [data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);

  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;

  background: rgba(17,17,17,.95);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  z-index: 9999;
}

body.billing [data-tooltip]::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(17,17,17,.95);

  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 10000;
}

body.billing [data-tooltip]:hover::after,
body.billing [data-tooltip]:hover::before,
body.billing [data-tooltip]:focus-visible::after,
body.billing [data-tooltip]:focus-visible::before{
  opacity: 1;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px){
  .studio-shell{ padding: 12px; gap: 16px; }
  .pane-top h1{ font-size: 1.25rem; }
  .kpi .value{ font-size: 32px; }
}

@media (max-width: 960px){
  .studio-shell{
    grid-template-columns: 1fr;
    max-width: 820px;
  }
  .pane-top{ padding: 14px 16px; }
  .pane-body{ padding: 14px 16px; }

  .kpi .kpi-row{ flex-direction: column; align-items: stretch; }
  .actions{ margin-left: 0; justify-content: flex-start; }

  .pay-table{ min-width: 520px; }
  .price-table{ min-width: 640px; }
}

@media (max-width: 768px){
  /* mobile: icone in left pane, nascondi quelle in header */
  .top-links{ display: none; }

  .pane-head{
    display:flex;
    align-items:center;
    gap: 10px;
  }
  .pane-head h2{
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .pane-head .mobile-toplinks{
    display:flex;
    gap: 10px;
    margin-left: auto;
  }
  .pane-head .mobile-toplinks .link{
    padding: 1px 3px;
    border-radius: 10px;
  }
}

@media (max-width: 600px){
  .pane-top{ padding: 12px 14px; }
  .pane-body{ padding: 12px 14px; }

  .kpi .value{ font-size: 26px; }
  .pill, .chip{ padding: 7px 10px; }

  .title-row{ flex-direction: column; align-items:flex-start; gap: 6px; }

  .modal .row{ grid-template-columns: 1fr; gap: 8px; }
  .modal .row.totals{ grid-template-columns: 1fr; }

  .pay-table{ min-width: 460px; }
  .price-table{ min-width: 560px; }
}