/*
  UA Theme Studio
  Static Theme Studio layout and preview styles extracted from template_page.php.
*/

body.ua-p-template-page .ua-theme-studio{direction:rtl;text-align:right}
.ua-studio-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;padding:16px;border:1px solid rgba(153,246,228,.16);border-radius:14px;background:linear-gradient(180deg,rgba(7,25,38,.82),rgba(5,15,26,.74));box-shadow:0 18px 40px rgba(0,0,0,.18)}
.ua-studio-kicker{color:var(--ua-sem-icon);font-size:var(--ua-fs-sm,12px);font-weight:900;text-transform:uppercase;letter-spacing:0}
.ua-studio-head h1{margin:3px 0 4px;color:var(--ua-ds-title);font-size:var(--ua-fs-page-title,22px);font-weight:950}
.ua-studio-head p{margin:0;color:var(--ua-sem-muted);font-size:var(--ua-fs-md,13px);font-weight:700;max-width:720px}
.ua-studio-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ua-studio-actions .btn{min-height:38px;border-radius:10px;font-weight:900;gap:7px}
.ua-studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:14px;align-items:start}
.ua-studio-main,.ua-studio-controls{display:grid;gap:14px}
.ua-studio-controls{position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto;padding-inline-start:2px}
.ua-studio-panel{border:1px solid var(--ua-ds-line);border-radius:14px;background:linear-gradient(180deg,rgba(7,25,38,.82),rgba(5,15,26,.72));box-shadow:0 16px 34px rgba(0,0,0,.16);padding:14px;color:var(--ua-ds-text)}
.ua-studio-panel h2{font-size:var(--ua-fs-card-title,16px);color:var(--ua-ds-title);font-weight:950;margin:0 0 10px}
.ua-panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.ua-panel-title h2{margin:0 0 3px}.ua-panel-title p{margin:0;color:var(--ua-sem-muted);font-size:var(--ua-fs-sm,12px);font-weight:750}
.ua-mode-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1px solid color-mix(in srgb,var(--ua-sem-icon) 30%,var(--ua-ds-line));border-radius:999px;background:var(--ua-sem-icon-bg);color:var(--ua-sem-icon);font-size:var(--ua-fs-sm,12px);font-weight:900;white-space:nowrap}
.ua-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ua-theme-option{position:relative;display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:center;min-height:96px;padding:10px;border:1px solid var(--ua-ds-line);border-radius:12px;background:color-mix(in srgb,var(--ua-theme-input) 54%,transparent);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.ua-theme-option:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--ua-accent) 34%,var(--ua-ds-line));background:color-mix(in srgb,var(--ua-accent) 8%,var(--ua-theme-input))}
.ua-theme-option input{position:absolute;inset-inline-start:10px;top:10px}
.ua-theme-option input:checked ~ .ua-theme-copy strong{color:var(--ua-ds-title)}
.ua-theme-option:has(input:checked){border-color:color-mix(in srgb,var(--preview-accent) 70%,white 8%);box-shadow:0 0 0 2px color-mix(in srgb,var(--preview-accent) 22%,transparent)}
.ua-theme-preview{height:74px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--preview-accent) 28%,transparent),transparent 54%),#07111f;display:grid;grid-template-columns:22px 1fr;grid-template-rows:18px 1fr;overflow:hidden}
.ua-theme-preview i{grid-column:1/-1;background:rgba(255,255,255,.08)}.ua-theme-preview b{background:rgba(255,255,255,.06)}.ua-theme-preview em{margin:9px;border-radius:7px;background:color-mix(in srgb,var(--preview-accent) 24%,rgba(255,255,255,.08))}
.ua-theme-copy strong{display:block;color:var(--ua-ds-title);font-size:var(--ua-fs-md,14px);font-weight:950;margin-bottom:3px}.ua-theme-copy small{display:block;color:var(--ua-sem-muted);font-size:var(--ua-fs-sm,12px);font-weight:700;line-height:1.4}
.ua-field{display:grid;gap:7px;margin-bottom:12px}.ua-field:last-child{margin-bottom:0}.ua-field label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;color:var(--ua-ds-title);font-size:var(--ua-fs-sm,12px);font-weight:900}.ua-field small{color:var(--ua-sem-muted);font-size:var(--ua-fs-xs,11.5px);font-weight:700;line-height:1.45}
.ua-two-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ua-color-row{display:grid;grid-template-columns:48px 1fr;gap:8px;align-items:center}.ua-color-row input[type=color]{width:48px;height:38px;padding:3px;border:1px solid rgba(153,246,228,.20);border-radius:10px;background:rgba(255,255,255,.06)}
.ua-studio-controls :is(.form-control,.form-select){min-height:38px;border-radius:10px;background:var(--ua-theme-input)!important;border-color:var(--ua-ds-line)!important;color:var(--ua-theme-input-text)!important;font-weight:800}
.ua-studio-controls .form-range{accent-color:var(--ua-accent)}
.ua-preview-shell{--p-radius:var(--ua-radius);--p-control:var(--ua-ds-control-h,40px);--p-row:var(--ua-ds-table-row-h,46px);display:grid;grid-template-columns:78px minmax(0,1fr);min-height:440px;border:1px solid rgba(153,246,228,.16);border-radius:14px;overflow:hidden;background:linear-gradient(135deg,rgba(8,37,48,.92),rgba(3,12,22,.95))}
.ua-preview-shell aside{padding:12px 10px;background:rgba(2,10,18,.42);border-inline-start:1px solid rgba(255,255,255,.06);display:grid;align-content:start;gap:9px}
.ua-preview-shell aside span{height:34px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.ua-preview-work{position:relative;padding:14px;display:grid;gap:12px;align-content:start}
.ua-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid rgba(153,246,228,.16);border-radius:12px;background:rgba(255,255,255,.045)}
.ua-preview-toolbar>div:first-child{display:flex;gap:8px}.ua-preview-toolbar button,.ua-preview-card-head button{height:var(--p-control);border:1px solid rgba(153,246,228,.20);border-radius:calc(var(--p-radius) * .65);background:linear-gradient(180deg,var(--ua-accent-2),var(--ua-accent));color:#06111d;font-weight:900;padding:0 12px;display:inline-flex;align-items:center;gap:7px}
.ua-preview-search{height:var(--p-control);min-width:220px;border:1px solid var(--ua-ds-line);border-radius:calc(var(--p-radius) * .65);background:rgba(4,24,34,.72);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--ua-theme-input-text);font-weight:800}
.ua-preview-card{border:1px solid rgba(153,246,228,.18);border-radius:var(--p-radius);background:linear-gradient(180deg,var(--ua-ds-surface),var(--ua-ds-surface-2));box-shadow:var(--ua-card-shadow);overflow:hidden}
.ua-preview-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--ua-ds-line)}.ua-preview-card-head strong{color:var(--ua-ds-title);font-size:var(--ua-fs-lg,15px)}
.ua-preview-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}.ua-preview-fields label{display:grid;gap:7px;color:var(--ua-ds-title);font-size:var(--ua-fs-sm,12px);font-weight:900}.ua-preview-fields span{height:var(--p-control);border:1px solid var(--ua-ds-line);border-radius:calc(var(--p-radius) * .65);background:rgba(4,24,34,.72);display:flex;align-items:center;padding:0 10px;color:var(--ua-theme-input-text)}
.ua-preview-card table{width:100%;border-collapse:collapse;color:var(--ua-ds-text)}.ua-preview-card th,.ua-preview-card td{height:var(--p-row);padding:8px 10px;border-top:1px solid var(--ua-ds-line);text-align:center}.ua-preview-card th{background:rgba(8,55,62,.86);font-weight:950}.ua-preview-card tr:nth-child(even) td{background:rgba(255,255,255,.035)}
.ua-preview-menu{position:absolute;left:22px;bottom:22px;width:210px;padding:8px;border:1px solid rgba(153,246,228,.18);border-radius:12px;background:linear-gradient(180deg,var(--ua-ds-menu),rgba(3,16,25,.68));box-shadow:0 22px 56px rgba(0,0,0,.34);backdrop-filter:blur(16px)}
.ua-preview-menu a{height:34px;border-radius:9px;display:flex;align-items:center;gap:9px;padding:0 9px;color:var(--ua-ds-title);font-weight:900;text-decoration:none}.ua-preview-menu a:hover{background:color-mix(in srgb,var(--ua-accent) 12%,transparent)}.ua-preview-menu i{color:var(--ua-sem-icon);width:16px;text-align:center}
@media(max-width:1180px){.ua-studio-grid{grid-template-columns:1fr}.ua-studio-controls{position:static;max-height:none}.ua-theme-grid{grid-template-columns:1fr}}
@media(max-width:720px){.ua-studio-head{display:grid}.ua-studio-actions{justify-content:stretch}.ua-studio-actions .btn{flex:1}.ua-preview-shell{grid-template-columns:1fr}.ua-preview-shell aside{display:none}.ua-preview-toolbar,.ua-preview-fields{grid-template-columns:1fr;display:grid}.ua-preview-toolbar>div:first-child{flex-wrap:wrap}.ua-preview-search{min-width:0}.ua-two-cols,.ua-theme-option{grid-template-columns:1fr}.ua-preview-menu{position:static;width:auto;margin:0 12px 12px}}

/* Unified token editor controls */
.ua-color-matrix,
.ua-token-font-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:10px 0 12px;
}
.ua-color-matrix .ua-field{
  margin:0;
  padding:8px;
  border:1px solid color-mix(in srgb,var(--ua-border) 72%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--ua-theme-surface-2,#0a2431) 44%,transparent);
}
body.ua-p-template-page .ua-studio-head,
body.ua-p-template-page .ua-studio-panel{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ua-theme-surface) 82%,transparent),color-mix(in srgb,var(--ua-theme-surface-2) 74%,transparent));
  border-color:var(--ua-ds-line);
  color:var(--ua-ds-text);
}
body.ua-p-template-page .ua-studio-controls :is(.form-control,.form-select){
  background:color-mix(in srgb,var(--ua-theme-input) 78%,transparent)!important;
  color:var(--ua-theme-input-text)!important;
  font-size:var(--ua-input-font-size)!important;
}
body.ua-p-template-page .ua-preview-shell{
  background:linear-gradient(135deg,color-mix(in srgb,var(--ua-theme-surface) 86%,transparent),color-mix(in srgb,var(--ua-theme-page-bg) 94%,black 6%));
}
body.ua-p-template-page .ua-preview-shell aside{background:color-mix(in srgb,var(--ua-theme-sidebar) 74%,transparent);}
body.ua-p-template-page .ua-preview-toolbar{background:color-mix(in srgb,var(--ua-theme-topbar) 72%,transparent);}
body.ua-p-template-page .ua-preview-search,
body.ua-p-template-page .ua-preview-fields span{background:color-mix(in srgb,var(--ua-theme-input) 78%,transparent); color:var(--ua-theme-input-text);}
body.ua-p-template-page .ua-preview-card{background:linear-gradient(180deg,color-mix(in srgb,var(--ua-theme-surface) 82%,transparent),color-mix(in srgb,var(--ua-theme-surface-2) 74%,transparent));}
body.ua-p-template-page .ua-preview-card th{background:color-mix(in srgb,var(--ua-theme-table-head) 86%,transparent);}
body.ua-p-template-page .ua-preview-card tr:nth-child(odd) td{background:color-mix(in srgb,var(--ua-theme-table-row) 68%,transparent);}
body.ua-p-template-page .ua-preview-card tr:nth-child(even) td{background:color-mix(in srgb,var(--ua-theme-table-row-alt) 72%,transparent);}
body.ua-p-template-page .ua-preview-menu{background:linear-gradient(180deg,color-mix(in srgb,var(--ua-theme-menu) 82%,transparent),color-mix(in srgb,var(--ua-theme-menu) 66%,black 12%));}
@media(max-width:720px){.ua-color-matrix,.ua-token-font-grid{grid-template-columns:1fr}}

/* UA phase 5: theme preview accents are now central CSS classes, not inline style. */
.ua-theme-preview-armoury_dark{--preview-accent:#f5b000}
.ua-theme-preview-dark_blue{--preview-accent:#3b82f6}
.ua-theme-preview-whmcs_blue{--preview-accent:#1a66ff}
.ua-theme-preview-light_clean{--preview-accent:#2563eb}
.ua-theme-preview-neon_net{--preview-accent:#22d3ee}
.ua-theme-preview-green_isp{--preview-accent:#16a34a}
