/* =========================================================
   FitmentOS - Tenant Admin UI (Overview + Settings)
   Safe scoped CSS (NO ops shell / NO enterprise console)
   ========================================================= */

/* ---------------------------------------------------------
   Unfold OKLCH tokens bridge
   (Tenant Ops should follow Unfold theme variables)
   --------------------------------------------------------- */
:root{
  --u-fg:        var(--color-font-important-light);
  --u-muted:     var(--color-font-default-light);
  --u-muted-2:   var(--color-font-subtle-light);

  --u-border:        var(--color-base-200);
  --u-border-strong: var(--color-base-300);

  --u-surface:   var(--color-white);
  --u-surface-2: var(--color-base-50);

  --u-primary-600:   var(--color-primary-600);
  --u-primary-700:   var(--color-primary-700);
  --u-primary-100:   var(--color-primary-100);
  --u-primary-border: color-mix(in oklch, var(--color-primary-600) 25%, var(--u-border));

  --u-success-700:   var(--color-green-700);
  --u-success-100:   var(--color-green-100);

  --u-warning-700:   var(--color-amber-600);
  --u-warning-100:   var(--color-amber-100);
  --u-warning-border: color-mix(in oklch, var(--color-amber-600) 25%, var(--u-border));

  --u-danger-700:    var(--color-red-700);
  --u-danger-600:    var(--color-red-600);
  --u-danger-100:    var(--color-red-100);
  --u-danger-border: color-mix(in oklch, var(--color-red-600) 25%, var(--u-border));

  --u-radius: var(--radius-md);
  --ts-radius: var(--radius-md); /* = 0.375rem, đúng Unfold */
}

html.dark{
  --u-fg:        var(--color-font-important-dark);
  --u-muted:     var(--color-font-default-dark);
  --u-muted-2:   var(--color-font-subtle-dark);

  --u-border:        color-mix(in oklch, var(--color-base-700) 32%, transparent);
  --u-border-strong: color-mix(in oklch, var(--color-base-700) 48%, transparent);

  --u-surface:   color-mix(in oklch, var(--color-base-950) 58%, transparent);
  --u-surface-2: color-mix(in oklch, var(--color-base-950) 40%, transparent);

  --u-primary-100:   color-mix(in oklch, var(--color-primary-600) 18%, transparent);
  --u-primary-border: color-mix(in oklch, var(--color-primary-600) 28%, transparent);

  --u-warning-100:   color-mix(in oklch, var(--color-amber-600) 14%, transparent);
  --u-warning-border: color-mix(in oklch, var(--color-amber-600) 22%, transparent);

  --u-danger-100:    color-mix(in oklch, var(--color-red-600) 14%, transparent);
  --u-danger-border: color-mix(in oklch, var(--color-red-600) 22%, transparent);
}

/* ---------------------------------------------------------
   Responsive grids (Tailwind-free helpers)
   --------------------------------------------------------- */
.tenant-grid-3{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px){
  .tenant-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .tenant-grid-3{ grid-template-columns: 1fr; }
}

.tenant-grid-2{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px){
  .tenant-grid-2{ grid-template-columns: 1fr; }
}

.tenant-grid-1{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* ---------------------------------------------------------
   Tenant cards
   --------------------------------------------------------- */
.tenant-card {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px color-mix(in oklch, var(--color-base-950) 6%, transparent);
  line-height: 1.45;
}

html.dark .tenant-card{
  background: var(--u-surface);
  border-color: var(--u-border);
}

.tenant-card h3 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--u-fg);
}
html.dark .tenant-card h3 { color: var(--u-fg); }

.tenant-card h2{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--u-fg);
}

.tenant-card p{
  margin: 0;
  font-size: 13px;
  line-height: 1.4;  /* ✅ bớt rộng */
  color: var(--u-muted);
}

/* ---------------------------------------------------------
   Status badges (if used)
   --------------------------------------------------------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(148,163,184,.10);
}

.status-active {
  background: var(--color-green-100);
  border-color: color-mix(in oklch, var(--color-green-600) 25%, transparent);
  color: var(--color-green-700);
}

.status-suspended {
  background: var(--color-red-100);
  border-color: color-mix(in oklch, var(--color-red-600) 25%, transparent);
  color: var(--color-red-700);
}

/* ---------------------------------------------------------
   Counts grid
   --------------------------------------------------------- */
.tenant-counts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* Make Counts card span 2 columns in a 3-col grid */
.tenant-card--wide { grid-column: span 2; }

/* Force counts in one row */
.tenant-counts--row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .tenant-card--wide { grid-column: span 3; }
  .tenant-counts--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .tenant-counts--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.count-box {
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 0;
  text-align: center;
  background: rgba(255,255,255,.7);
}
html.dark .count-box{
  background: rgba(2,6,23,.15);
  border-color: rgba(148,163,184,.18);
}

.count-box .label {
  font-size: 12px;
  color: rgba(100,116,139,.95);
  font-weight: 600;
  line-height: 1.15;
  opacity: .85;
}

.count-box .value{
  font-variant-numeric: tabular-nums;
  font-weight: 800; /* số vẫn đậm, nhưng không gắt */
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--u-fg);
  margin-top: 4px;
}

html.dark .count-box .value{ color: rgba(226,232,240,.92); }

/* Clickable counts */
.count-box.is-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.count-box.is-link:hover {
  border-color: color-mix(in oklch, var(--color-primary-600) 45%, var(--u-border));
  box-shadow: 0 1px 0 color-mix(in oklch, var(--color-primary-600) 12%, transparent);
}
.count-box.is-link:active { transform: translateY(1px); }

/* ---------------------------------------------------------
   Ops chips (quick actions / filters)
   --------------------------------------------------------- */
.ops-quick { margin-top: 14px; }
.ops-quick__label {
  font-size: 12px;
  font-weight: 700;
  opacity: .7;
  margin-bottom: 8px;
}
.ops-quick__chips { display: flex; gap: 8px; flex-wrap: wrap; }

.ops-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  background: rgba(248,250,252,.7);
}
html.dark .ops-chip{
  background: rgba(31,41,55,.55);
  border-color: rgba(148,163,184,.20);
}

.ops-chip:hover {
  border-color: color-mix(in oklch, var(--color-primary-600) 45%, var(--u-border));
  box-shadow: 0 1px 0 color-mix(in oklch, var(--color-primary-600) 12%, transparent);
}

.ops-chip--red   { border-color: color-mix(in oklch, var(--color-red-600) 25%, transparent);  background: var(--color-red-100); }
.ops-chip--blue  { border-color: color-mix(in oklch, var(--color-blue-600) 25%, transparent); background: var(--color-blue-100); }
.ops-chip--green { border-color: color-mix(in oklch, var(--color-green-600) 25%, transparent);  background: var(--color-green-100); }
.ops-chip--amber { border-color: color-mix(in oklch, var(--color-amber-600) 25%, transparent); background: var(--color-amber-100); }

/* ---------------------------------------------------------
   Pills / chips vẫn tròn hơn (không dùng cho buttons)
   --------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(148,163,184,.10);
}
.pill--red {
  border-color: color-mix(in oklch, var(--color-red-600) 25%, transparent);
  background: var(--color-red-100);
  color: var(--color-red-700);
}
.pill--gray {
  border-color: rgba(148,163,184,.45);
  background: rgba(148,163,184,.15);
  color: #4b5563;
}
.pill--green {
  border-color: color-mix(in oklch, var(--color-green-600) 25%, transparent);
  background: var(--color-green-100);
  color: var(--color-green-700);
}
.pill--blue {
  border-color: color-mix(in oklch, var(--color-blue-600) 25%, transparent);
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

/* ---------------------------------------------------------
   Quota banner (v2)
   --------------------------------------------------------- */
.quota-banner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--u-border);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 10px 0 16px;
  background: var(--u-warning-100);
}

.quota-banner.is-near {
  border-color: var(--u-warning-border);
  background: var(--u-warning-100);
}

.quota-banner.is-over,
.quota-banner--danger {
  border-color: var(--u-danger-border);
  background: var(--u-danger-100);
}

.quota-banner__body {
  flex: 1;
  min-width: 0;
}

.quota-banner__text {
  color: var(--u-muted);
  font-size: 13px;
  margin-top: 4px;
}

.quota-banner__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.quota-banner__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--u-warning-700);
}

.quota-banner.is-over .quota-banner__title,
.quota-banner--danger .quota-banner__title {
  color: var(--u-danger-700);
}

.quota-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================
   Unfold-aligned buttons (single source of truth)
   ========================================================= */

/* Buttons – match Unfold radius */
.ts-btn-primary,
.ts-btn-ghost,
.ts-btn-danger,
.u-btn{
  border-radius: var(--ts-radius);
}

.u-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:36px;
  padding:0 14px;
  border-radius: var(--ts-radius);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid var(--u-border);
  background: var(--u-surface);
  color: var(--u-fg);
  cursor:pointer;
}

.u-btn:hover{
  background: color-mix(in oklch, var(--color-base-950) 3%, transparent);
}

html.dark .u-btn:hover{
  background: color-mix(in oklch, var(--color-base-50) 7%, transparent);
}

.u-btn--primary{
  background: var(--u-primary-600);
  border-color: var(--u-primary-600);
  color:#fff;
}
.u-btn--primary:hover{
  background: var(--u-primary-700);
  border-color: var(--u-primary-700);
}

.u-btn--soft{
  background: color-mix(in oklch, var(--color-primary-600) 12%, transparent);
  border-color: color-mix(in oklch, var(--color-primary-600) 26%, transparent);
  color: var(--color-primary-800);
}
html.dark .u-btn--soft{
  background: color-mix(in oklch, var(--color-primary-600) 18%, transparent);
  border-color: color-mix(in oklch, var(--color-primary-600) 35%, transparent);
  color: rgba(199,210,254,1);
}
.u-btn--soft:hover{
  background: color-mix(in oklch, var(--color-primary-600) 16%, transparent);
  border-color: color-mix(in oklch, var(--color-primary-600) 34%, transparent);
}

.u-btn--danger{
  background: var(--color-red-600);
  border-color:var(--color-red-600);
  color:#fff;
}
.u-btn--danger:hover{
  background:var(--color-red-700);
  border-color:var(--color-red-700);
}

.u-btn--pill{ border-radius:999px; height:34px; }
.u-btn--sm{ height:32px; padding:0 12px; font-size:12px; border-radius:999px; }

/* Backward-compatible mapping */
.ts-btn-primary{ /* primary */
  background: var(--u-primary-600);
  border: 1px solid var(--u-primary-600);
  color:#fff;
  height:36px; padding:0 14px; border-radius: var(--ts-radius);
  font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  white-space:nowrap;
}
.ts-btn-primary:hover{
  background: var(--u-primary-700);
  border-color: var(--u-primary-700);
}

.ts-btn-ghost{ /* secondary */
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  color: var(--u-fg);
  height:36px; padding:0 14px; border-radius: var(--ts-radius);
  font-size:13px; font-weight:600; text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  cursor:pointer;
}
.ts-btn-ghost:hover{ background: color-mix(in oklch, var(--color-base-950) 3%, transparent); }

/* Danger buttons – Unfold original style */
.ts-btn-danger{
  background: transparent;
  border: 1px solid var(--u-danger-border);
  color: var(--u-danger-700);
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}

.ts-btn-danger:hover{
  background: transparent;
  border-color: var(--u-danger-600);
  color: var(--u-danger-600);
}

.ts-btn-danger:active{
  background: var(--u-danger-600);
  border-color: var(--u-danger-600);
  color: #fff;
}

.quota-bars { display: flex; flex-direction: column; gap: 10px; }

.quota-row {
  display: grid;
  grid-template-columns: 160px 1fr 56px;
  align-items: center;
  gap: 10px;
}

@media (max-width: 720px) {
  .quota-row { grid-template-columns: 1fr; }
  .quota-row__pct { justify-self: start; text-align: left; }
}

.quota-row__meta { display: flex; flex-direction: column; line-height: 1.15; }
.quota-row__label { font-size: 12px; font-weight: 700; line-height: 1.25; opacity: .9; }
.quota-row__val { font-size: 12px; opacity: .75; }

/* ===== Plan usage progress ===== */
.quota-track {
  background: var(--u-surface-2);
  border: 1px solid var(--u-border);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
html.dark .quota-track{ 
  background: var(--u-surface-2); 
  border-color: var(--u-border); 
}

/* Bonus: Reduce opacity for unlimited tracks */
.quota-track--unlimited {
  opacity: .6;
}

.quota-fill {
  height: 100%;
  background: var(--u-primary-600);
  border-radius: 999px;
  transition: width .3s ease;
}

.quota-fill--warning {
  background: var(--color-amber-600); /* Unfold amber tone */
  opacity: .85;
}

.quota-fill--danger {
  background: var(--u-danger-600);
  opacity: .85;
}

.quota-row__pct {
  font-size: 12px;
  font-weight: 700;
  opacity: .85;
  text-align: right;
}

.quota-row--link {
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  padding: 8px 10px;
  margin: -8px -10px;
}
.quota-row--link:hover { background: color-mix(in oklch, var(--color-primary-600) 10%, transparent); }
.quota-row--link:active { transform: translateY(1px); }

/* =========================================================
   Unfold-aligned form controls (tenant settings)
   ========================================================= */

.tenant-settings input[type="number"],
.tenant-settings input[type="text"],
.tenant-settings select,
.tenant-settings textarea{
  width:100%;
  border:1px solid var(--u-border);
  border-radius:8px;
  padding:6px 10px;
  font-size:13px;
  background: var(--u-surface);
  color: var(--u-fg);
}

.tenant-settings input[type="number"],
.tenant-settings input[type="text"],
.tenant-settings select{
  height:36px;
}

.tenant-settings textarea{
  min-height:96px;
  padding:10px 10px;
}

.tenant-settings input:focus,
.tenant-settings select:focus,
.tenant-settings textarea:focus{
  outline:none;
  border-color: var(--u-primary-600);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary-600) 18%, transparent);
}

.tenant-settings .ts-actions { display: flex; gap: 10px; margin-top: 6px; }

.ts-btn-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary-600);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.ts-btn-link:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.ts-actions-row{
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tenant-settings .ts-flag{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 12px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:14px;
  background: rgba(148,163,184,.06);
}
.tenant-settings .ts-flag:hover{ background: rgba(148,163,184,.10); }
.tenant-settings .ts-flag input{ margin-top: 3px; transform: scale(1.05); }
.tenant-settings .ts-flag__title{ display:block; font-weight: 700; }
.tenant-settings .ts-flag__desc{ display:block; font-size: 12px; color: var(--u-muted); margin-top: 2px; }
.tenant-settings .ts-field__label{ font-weight: 700; margin-bottom: 6px; }
.tenant-settings .ts-field__hint{ font-size: 12px; color: var(--u-muted); margin-top: 6px; }

/* ---------------------------------------------------------
   Feature Gate: hide sidebar items by feature flags (kept)
   --------------------------------------------------------- */
body.feat-catalog-off a[href*="/admin/catalog/"],
body.feat-catalog-off nav a[href*="/admin/catalog/"] { display: none !important; }

body.feat-import-off a[href*="/admin/imports/"],
body.feat-import-off a[href*="/admin/import/"],
body.feat-import-off a[href*="/admin/import_center/"] { display: none !important; }

body.feat-images-off a[href*="/admin/catalog/partimage/"],
body.feat-images-off a[href*="/admin/images/"],
body.feat-images-off a[href*="/admin/media/"] { display: none !important; }

body.feat-orders-off a[href*="/admin/orders/"] { display: none !important; }

body.feat-listings-off a[href*="/admin/channels/"],
body.feat-listings-off a[href*="/admin/listings/"] { display: none !important; }

body.feat-api-off a[href*="/admin/tenancy/tenantapikey/"],
body.feat-api-off a[href*="/admin/api/"] { display: none !important; }

/* ===== Tenant Settings layout (Unfold-safe, no Tailwind) ===== */

.tenant-page{
  max-width: 96rem;     /* rộng hơn */
  width: 100%;
  margin: 0 auto;       /* canh giữa trong content area */
  display: grid;
  gap: 24px;
  line-height: 1.45;
}

/* base hook only – do NOT layout */
.tenant-header {}

.tenant-grid{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.tenant-grid--2{
  grid-template-columns: 1fr;
}

@media (min-width: 768px){
  .tenant-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tenant-form{
  display: grid;
  gap: 16px;   /* khoảng cách giữa các card */
}

.tenant-settings{
  line-height: 1.45;
}


/* Status chips (Tenant Overview) */
.tenant-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
/* Pills / chips vẫn tròn hơn */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--u-border);
  background: var(--u-surface-2);
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  line-height: 1.2;
  max-width: 100%;
}
.chip--green{
  background: var(--color-green-100);
  border-color: color-mix(in oklch, var(--color-green-600) 25%, transparent);
  color: var(--color-green-700);
}
.chip--amber{
  background: var(--u-warning-100);
  border-color: var(--u-warning-border);
  color: var(--u-warning-700);
}
.chip--red{
  background: var(--color-red-100);
  border-color: color-mix(in oklch, var(--color-red-600) 25%, transparent);
  color: var(--color-red-700);
}

/* --- Confirm action form (tenant ops) --- */
.ts-confirm-form { margin-top: 2px; }

.ts-field { display: grid; gap: 10px; }
.ts-field__label { font-weight: 700; color: var(--u-fg); }
.ts-required { color: #ef4444; font-weight: 800; margin-left: 4px; }

.ts-field__control { max-width: 760px; }
.ts-field__control textarea{
  width: 100%;
  min-height: 110px;
  padding: 12px 12px;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 12px;
  background: #fff;
  resize: vertical;
}
.ts-field__control textarea:focus{
  outline: none;
  border-color: color-mix(in oklch, var(--color-primary-600) 55%, var(--u-border));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary-600) 20%, transparent);
}

.ts-field__hint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--u-muted);
}

.ts-confirm-footer{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.22);
  display:flex;
  justify-content: flex-end;
  padding-left: 0;
}

.ts-actions-row{
  display:flex;
  gap:10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

/* compact footer when no reason */
.ts-confirm-footer--compact{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ts-confirm-head p{ margin: 6px 0 0; }

/* --- Tenancy impersonation banner --- */
.imp-banner{
  background:var(--color-red-700);
  color:white;
  padding:12px 16px;
  margin: 12px 0 16px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.imp-banner__text{ font-weight:700; }
.imp-banner__sub{
  opacity:.9;
  font-weight:500;
  margin-left:8px;
  font-size:12px;
}
.imp-banner__btn{
  background:white;
  color:var(--color-red-700);
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
}

/* ---------------------------------------------------------
   Ops actions grouping (Safe / Danger zone)
   --------------------------------------------------------- */
.ops-actions { display: grid; gap: 14px; line-height: 1.45; }

.ops-actions .ts-btn-danger{
  margin-right: 8px;
}
.ops-actions .ts-btn-primary,
.ops-actions .ts-btn-ghost{
  margin-right: 6px;
}

.ops-actions__group { display: grid; gap: 10px; }

.ops-actions__title{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(100,116,139,.95);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* =========================================
   Danger Zone — EXACT Unfold original style
   ========================================= */

.danger-zone {
  background: var(--u-surface);              /* trắng như card */
  border: 1px solid var(--u-border);         /* viền xám */
  border-radius: 12px;                       /* đúng Unfold */
  padding: 16px;
}

.ops-actions__group--danger{
  /* match Unfold "danger" tone: subtle red tint, not scary solid red */
  background: color-mix(in oklch, var(--u-danger-100) 55%, var(--u-surface));
  border: 1px solid var(--u-danger-border);
  border-radius: var(--radius-md);
  padding: 14px;
}

/* Title */
.danger-zone__title,
.ops-actions__title--danger {
  color: var(--color-red-700);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Hint text */
.danger-zone .tip,
.ops-actions__hint {
  font-size: 12px;
  color: var(--u-muted);
}

/* ===== Danger buttons: outline only ===== */
.ops-actions__group--danger .ts-btn-danger {
  background: transparent;
  border: 1px solid color-mix(
    in oklch,
    var(--color-red-600) 35%,
    var(--u-border)
  );
  color: var(--color-red-700);
}

/* Hover */
.ops-actions__group--danger .ts-btn-danger:hover {
  border-color: var(--color-red-600);
  color: var(--color-red-600);
  background: transparent;
}

/* Active (pressed) */
.ops-actions__group--danger .ts-btn-danger:active {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
  color: #fff;
}

/* ---------------------------------------------------------
   API keys list (Scope / Last used / Revoke)
   --------------------------------------------------------- */
.api-keys{
  margin-top: 10px;
  display: grid;
  gap: 10px;
  line-height: 1.45;
}

.api-key-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.api-key-row:hover {
  background: rgba(15,23,42,.02);
  border-radius: 12px;
}
html.dark .api-key-row:hover{
  background: rgba(226,232,240,.05);
}
.api-key-main {
  flex: 1;
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
}
.api-key-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px;
}


.api-key-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.api-key-name{
  font-weight: 800;
  font-size: 13px;
  color: var(--u-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-key-meta{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(100,116,139,.95);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.api-key-prefix{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.api-key-dot{ opacity: .6; }

.api-scopes{
  margin-top: 8px;
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
}


/* Tenant users mini list */
.tenant-users-list{ display:grid; gap:10px; }
.tenant-user-row{
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  padding:10px 12px;
  background: rgba(255,255,255,.55);
}
html.dark .tenant-user-row{
  background: rgba(2,6,23,.18);
  border-color: rgba(148,163,184,.18);
}
.tenant-user-email{ font-weight:800; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenant-user-meta{
  margin-top:4px;
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  font-size:12px; color:#64748b;
}
.tenant-user-dot{ opacity:.6; }

/* API list polish */
.api-key-row.is-revoked { opacity: .6; }
.api-key-row.is-revoked .pill { opacity: .9; } /* giữ pill rõ */

/* Divider */
.ts-divider{
  border: none;
  border-top: 1px solid rgba(148,163,184,.22);
  margin: 14px 0;
}

/* Domain rows (Status card) */
.domain-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  background: var(--u-surface);
}
html.dark .domain-row{
  background: var(--body-bg, rgba(2,6,23,.18));
  border-color: rgba(148,163,184,.18);
}
.domain-main{ flex:1; min-width:0; }
.domain-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; }
.domain-dns{
  margin-top:8px;
  padding:10px 12px;
  background: var(--u-surface-2);
  border-radius:12px;
  font-size:12px;
}
html.dark .domain-dns{ background: color-mix(in oklch, var(--color-base-400) 12%, transparent); }
.domain-dns-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  color: var(--u-fg);
}

/* DNS collapse */
.dns-details { margin-top: 8px; }
.dns-summary{
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.25;
  font-size: 12px;
  color: rgba(100,116,139,.95);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dns-summary::-webkit-details-marker{ display:none; }
.dns-summary:before{
  content: "▸";
  opacity: .7;
  transform: translateY(-1px);
}
.dns-details[open] .dns-summary:before{ content: "▾"; }

/* DNS details should take full width */
.dns-details{
  display: block;
  width: 100%;
}

.dns-summary{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

/* The DNS container must stretch */
.domain-dns{
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Prevent long strings from overflowing */
.domain-dns-mono{
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: normal;             /* allow wrap */
  overflow-wrap: anywhere;         /* wrap long tokens */
  word-break: break-word;          /* fallback */
}

/* Last activity polish (make labels bold, improve spacing) */
.activity-block { margin-top: 6px; display: grid; gap: 10px; }

/* Nếu activity_html đang dùng text-gray-500 cho label (giống phần last-failed của anh) */
.activity-block .text-gray-500{
  font-weight: 700;
  line-height: 1.25;
  font-size: 12px;
  opacity: .85;
}

/* Dòng value ngay sau label (nếu html là label rồi đến value) */
.activity-block .text-gray-500 + div{
  margin-top: 3px;
  font-size: 13px;
  color: var(--u-fg);
}
html.dark .activity-block .text-gray-500 + div{ color: rgba(226,232,240,.92); }

/* ---------- Tenant ops: utilities (replace inline / tailwind-like) ---------- */

.ts-notice{
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid transparent;
}

.ts-notice--amber{
  background: var(--color-amber-100);
  border-color: color-mix(in oklch, var(--color-amber-600) 25%, transparent);
}

.ts-notice__title{
  font-weight:800;
  font-size:13px;
  color: var(--color-amber-700);
}

.ts-notice__desc{
  margin-top:4px;
  font-size:12px;
  color:var(--color-amber-800);
}

.ts-muted-code{
  color: var(--u-muted-2);
}

.ts-plan-form{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.ts-plan-select{
  min-width:220px;
}

.ts-help{
  margin-top:8px;
  font-size:12px;
  color: var(--u-muted);
}

/* ===== Layout helpers (replace tailwind) ===== */
.ts-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.ts-page-head__title{
  font-size:22px;
  font-weight:800;
  line-height:1.2;
}
.ts-muted-code{
  color: var(--u-muted-2);
  font-weight:700;
}

.ts-row{ display:flex; gap:10px; }
.ts-row--between{ justify-content:space-between; }
.ts-row--center{ align-items:center; }
.ts-stack{ display:flex; flex-direction:column; gap:10px; }

.ts-link{
  font-size:13px;
  font-weight:700;
  color: #2563eb;
  text-decoration:none;
}
.ts-link:hover{ text-decoration:underline; }

/* ===== spacing tokens (optional minimal) ===== */
.ts-mt-10{ margin-top:10px; }
.ts-mt-14{ margin-top:14px; }
.ts-mb-14{ margin-bottom:14px; }

/* ===== API key list ===== */
.api-keys{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.api-key-actions{ display:flex; gap:10px; align-items:center; }
.api-key-actions form{ margin:0; }

/* make sure buttons stay clickable */
.api-key-row a, .api-key-row button, .api-key-row form{ cursor:default; }

/* ===== spacing helpers ===== */
.ts-mt-6 { margin-top: 6px; }
.ts-mt-14 { margin-top: 14px; }

/* ===== muted text ===== */
.ts-muted-13 { font-size: 13px; color: #64748b; }
.ts-muted-12 { font-size: 12px; color: #64748b; }

/* ===== row wrap ===== */
.ts-row-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ===== link style ===== */
.ts-link-strong {
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.ts-link-strong:hover { text-decoration: underline; }

/* =========================================================
   Header + Tabs — shared style (Overview + Settings)
   ========================================================= */

.tenant-header{
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
}

/* Overview header: keep same container, just add spacing */
.tenant-header--overview{
  padding: 20px 24px;
  border-bottom: 0; /* ✅ remove */
}

/* Compact header (Settings): same look, no extra rules needed */
.tenant-header--compact{}

/* Left block text */
.tenant-header__left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tenant-title{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--u-fg);
  margin: 0;
}

.tenant-subtitle{
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--u-muted);
}

/* Right meta */
.tenant-header__right {
  text-align: right;
  min-width: 220px;
}

.tenant-meta-label {
  font-size: 12px;
  color: var(--u-muted);
}

.tenant-meta-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--u-fg);
}

/* Tabs container */
.tenant-tabs{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Tabs on right (Settings) */
.tenant-tabs--right{
  margin-top: 0;
  justify-content:flex-end;
}

/* Each tab */
.tenant-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration:none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--u-muted);
  background: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.tenant-tab:hover{
  background: color-mix(in oklch, var(--color-base-950) 3%, transparent);
}

html.dark .tenant-tab:hover{
  background: color-mix(in oklch, var(--color-base-50) 7%, transparent);
}

.tenant-tab.is-active{
  background: color-mix(in oklch, var(--color-primary-600) 12%, transparent);
  color: var(--color-primary-700);
  border-color: color-mix(in oklch, var(--color-primary-600) 26%, transparent);
}

/* Tab icons */
.tab-ico{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: currentColor;
}
.tab-ico path{
  fill: currentColor;
}
.tab-ico--outline path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Tables (Unfold-ish) ===== */
.ts-table-wrap{
  border: 1px solid var(--u-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--u-surface);
}

.ts-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ts-table thead{
  background: var(--u-surface-2);
}

.ts-table th, .ts-table td{
  padding: 10px 12px;
  border-top: 1px solid var(--u-border);
  text-align: left;
  vertical-align: top;
}

.ts-table thead th{
  border-top: 0;
  font-weight: 800;
  color: var(--u-fg);
  font-size: 12px;
}

.ts-col-check{ width: 38px; }
.ts-col-num{ width: 120px; text-align: right; }
.ts-col-date{ width: 220px; }

.ts-empty{
  padding: 14px 12px;
  color: var(--u-muted);
}

/* =========================================================
   PERFECT MATCH Unfold – hardcoded colors purge
   (place at end of tenant_ops.css)
   ========================================================= */

/* Cards + shadows */
.tenant-card{
  box-shadow: 0 1px 2px color-mix(in oklch, var(--color-base-950) 6%, transparent);
}

/* Count boxes */
.count-box{
  border: 1px solid color-mix(in oklch, var(--color-base-400) 22%, transparent);
  background: color-mix(in oklch, var(--color-white) 70%, transparent);
}
html.dark .count-box{
  background: color-mix(in oklch, var(--color-base-950) 18%, transparent);
  border-color: color-mix(in oklch, var(--color-base-400) 14%, transparent);
}
.count-box.is-link:hover{
  border-color: color-mix(in oklch, var(--color-primary-600) 26%, var(--u-border));
  box-shadow: 0 1px 0 color-mix(in oklch, var(--color-primary-600) 10%, transparent);
}


/* Warning progress (quota) */
.quota-fill--warning{
  background: var(--color-amber-600);
  opacity: .9;
}

/* Focus ring – match Unfold */
.tenant-settings input:focus,
.tenant-settings select:focus,
.tenant-settings textarea:focus{
  border-color: color-mix(in oklch, var(--color-primary-600) 55%, var(--u-border));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary-600) 18%, transparent);
}

/* Links */
.ts-btn-link,
.ts-link{
  color: var(--color-primary-600);
}
.ts-btn-link:hover,
.ts-link:hover{
  color: var(--color-primary-700);
}