/* gx_menu_variants.css (PRO editor-ready)
   - Unified partner hover/active/focus via --gx-partner tokens
   - Adds table style hooks via data attributes
   - Adds admin template manager styling helpers
*/

:root{
  --gx-partner: var(--gx-c2);
  --gx-partner-rgb: 110,167,255;

  --gx-hover-bg: rgba(var(--gx-partner-rgb), .14);
  --gx-hover-brd: rgba(var(--gx-partner-rgb), .35);
  --gx-active-bg: rgba(var(--gx-partner-rgb), .22);
  --gx-focus: rgba(var(--gx-partner-rgb), .45);

  --gx-font-base: 16px;
  --gx-lineheight: 1.5;
  --gx-letterspacing: 0em;

  --gx-page-max: 1360px;
  --gx-radius: 12px;
  --gx-border-w: 1px;
  --gx-space-scale: 1;

  --gx-nav1-icon: 20px;
  --gx-nav1-h: 44px;
}

/* ===== Unified hover/focus ===== */
a:hover,
button:hover,
.gx-btn:hover,
.pill:hover,
.tag:hover,
table tr:hover{
  background: var(--gx-hover-bg);
  border-color: var(--gx-hover-brd);
}
a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--gx-focus);
  outline-offset: 2px;
}

/* ===== Active state (L1 + L2) ===== */
.gx-menu a.active,
.gx-menu a[aria-current="page"],
#gx-subrail-box a.active,
#gx-subrail-box a[aria-current="page"]{
  background: var(--gx-active-bg) !important;
  border-color: var(--gx-hover-brd) !important;
  box-shadow: 0 0 0 3px rgba(var(--gx-partner-rgb), .14), var(--shadow2) !important;
}

/* Icon halo */
.gx-menu a:hover span:first-child,
.gx-menu a.active span:first-child,
#gx-subrail-box a:hover span:first-child,
#gx-subrail-box a.active span:first-child{
  border-color: rgba(var(--gx-partner-rgb), .45) !important;
  box-shadow: 0 0 0 4px rgba(var(--gx-partner-rgb), .14) !important;
  background: rgba(var(--gx-partner-rgb), .10) !important;
}

/* Logout hover */
#gx-logout:hover{
  background: var(--gx-hover-bg);
  border-color: var(--gx-hover-brd);
  color: var(--gx-partner);
}

/* ===== Table hooks (MVP) ===== */
html[data-tableStriped="subtle"] table tbody tr:nth-child(odd){
  background: rgba(0,0,0,0.02);
}
html[data-tableStriped="strong"] table tbody tr:nth-child(odd){
  background: rgba(0,0,0,0.05);
}
html[data-tableStriped="off"] table tbody tr:nth-child(odd){
  background: transparent;
}
html[data-tableBorders="none"] table, 
html[data-tableBorders="none"] th, 
html[data-tableBorders="none"] td{
  border-color: transparent !important;
}
html[data-tableBorders="grid"] th, 
html[data-tableBorders="grid"] td{
  border-color: rgba(0,0,0,0.16) !important;
}

/* Sticky header helper */
html.gx-table-sticky thead th{
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
}

/* ===== Admin template manager helpers ===== */
.tpl-grid{ display:grid; grid-template-columns: 320px 1fr; gap:14px; align-items:start; }
.tpl-list{ border:1px solid rgba(0,0,0,.10); border-radius: 12px; overflow:hidden; background:#fff; }
.tpl-list .row{ display:flex; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid rgba(0,0,0,.06); }
.tpl-list .row:last-child{ border-bottom:0; }
.tpl-list .row:hover{ background: var(--gx-hover-bg); }
.tpl-list .row.active{ background: var(--gx-active-bg); }
.tpl-list .title{ font-weight:600; }
.tpl-list .meta{ font-size:12px; opacity:.75; }
.tpl-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.tpl-actions .btn{ padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,.10); background:#fff; cursor:pointer; }
.tpl-actions .btn:hover{ background: var(--gx-hover-bg); border-color: var(--gx-hover-brd); }
.tpl-actions .btn.primary{ background: var(--gx-partner); color:#fff; border-color: transparent; }
.tpl-actions .btn.primary:hover{ filter: brightness(0.96); }
.tpl-editor-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.tpl-editor-grid .full{ grid-column: 1 / -1; }
.tpl-json{ width:100%; min-height:180px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; }


/* =========================================================
   PRO SURFACES HELPERS (MVP)
   These classes let you apply mapped surface styles without rewriting components.
   Attach classes in markup (or via JS) where appropriate.
========================================================= */

.gx-surface-card,
.gx-card{
  background: var(--gx-surface-card-bg, var(--gx-bg1, #fff));
  -webkit-backdrop-filter: blur(var(--gx-surface-card-blur, 0px));
  backdrop-filter: blur(var(--gx-surface-card-blur, 0px));
}

.gx-surface-modal,
.gx-modal{
  background: var(--gx-surface-modal-bg, rgba(255,255,255,0.62));
  -webkit-backdrop-filter: blur(var(--gx-surface-modal-blur, 14px));
  backdrop-filter: blur(var(--gx-surface-modal-blur, 14px));
}

.gx-surface-table,
table.gx-table{
  background: var(--gx-surface-table-bg, transparent);
  -webkit-backdrop-filter: blur(var(--gx-surface-table-blur, 0px));
  backdrop-filter: blur(var(--gx-surface-table-blur, 0px));
}

/* Table stripe / border hooks via datasets (set in applyTemplate) */
:root[data-tableStriped="subtle"] table tr:nth-child(even){
  background: rgba(0,0,0,0.02);
}
:root[data-tableStriped="strong"] table tr:nth-child(even){
  background: rgba(0,0,0,0.05);
}
:root[data-tableBorders="none"] table td,
:root[data-tableBorders="none"] table th{
  border-color: transparent !important;
}
:root[data-tableBorders="grid"] table td,
:root[data-tableBorders="grid"] table th{
  border-color: rgba(0,0,0,0.18) !important;
}