/* GX UI Wiring v7
   Applies GX token vars to common selectors in the portal.
   Keep this file LAST in CSS order.
*/

/* Global typography metrics */
html, body{
  line-height: var(--lh);
  letter-spacing: var(--ls);
}

/* Generic content spacing helpers (optional use by existing CSS via var()) */
:root{
  --gap-1: calc(6px * var(--space));
  --gap-2: calc(10px * var(--space));
  --gap-3: calc(14px * var(--space));
  --gap-4: calc(18px * var(--space));
  --gap-5: calc(24px * var(--space));
}

/* Buttons – borders + radius + padding */
button, .btn, .button, a.btn{
  border-radius: var(--btn-radius) !important;
  border-width: var(--btn-bw) !important;
  padding-inline: var(--btn-pad-x);
  padding-block: var(--btn-pad-y);
}

/* If your CSS uses outline/focus ring, keep it visible */
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

/* Table wrappers – radius + border + optional padding around the whole table */
.table-wrap, .gx-table-wrap, .table-wrapper, .data-table-wrap, .table-container{
  border-radius: var(--table-radius);
  border: var(--table-bw) solid var(--border);
  padding: var(--table-cell-pad) !important;
  background: var(--card-bg);
}

/* Tables themselves */
table, .table, .gx-table, .data-table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

table th, table td,
.table th, .table td,
.gx-table th, .gx-table td,
.data-table th, .data-table td{
  padding: var(--table-cell-pad);
  border-bottom: var(--table-bw) solid color-mix(in srgb, var(--border) 85%, transparent);
  color: var(--text);
}

table thead th,
.table thead th,
.gx-table thead th,
.data-table thead th{
  background: color-mix(in srgb, var(--card-bg) 70%, var(--bg));
  color: var(--text);
}

/* Row hover */
table tbody tr:hover td,
.table tbody tr:hover td,
.gx-table tbody tr:hover td,
.data-table tbody tr:hover td{
  background: color-mix(in srgb, var(--accent) 10%, var(--card-bg));
}

/* Rounded corners for table */
table thead tr:first-child th:first-child{ border-top-left-radius: var(--table-radius); }
table thead tr:first-child th:last-child{ border-top-right-radius: var(--table-radius); }
table tbody tr:last-child td:first-child{ border-bottom-left-radius: var(--table-radius); }
table tbody tr:last-child td:last-child{ border-bottom-right-radius: var(--table-radius); }

/* Modal (GX) – overlay + panel metrics */
#gx-modal, .gx-modal, .modal{
  /* overlay background */
  background: rgba(0,0,0, var(--overlay-a)) !important;
  backdrop-filter: blur(var(--overlay-blur));
}

#gx-modal .panel, #gx-modal .modal-panel, #gx-modal > .box,
.gx-modal .panel, .gx-modal .modal-panel,
.modal .panel, .modal .modal-panel{
  border-radius: var(--modal-radius);
  border: var(--modal-bw) solid var(--border);
  background: var(--card-bg);
  backdrop-filter: blur(var(--modal-blur));
  box-shadow: 0 18px 60px rgba(0,0,0, calc(0.65 * var(--modal-shadow)));
}

/* Optional: text blocks “padding” (safe targets only) */
.card, .panel, .box{
  border-radius: var(--radius);
}


/* Compact tables (modules sometimes force compact paddings) */
.table.compact th, .table.compact td{ padding: var(--table-cell-pad) !important; }


/* Buttons – metrics */
button, .btn, .gx-btn, .button{ border-radius: var(--btn-radius); border-width: var(--btn-bw); padding: var(--btn-pad-y) var(--btn-pad-x); }


/* GX Modal (modules) – prefer variables; if module has hardcoded values, update the module styles to use vars */
#gx-modal-overlay{ background: rgba(10, 14, 22, var(--overlay-a)) !important; backdrop-filter: blur(var(--overlay-blur)) !important; }
#gx-modal{ border-radius: var(--modal-radius) !important; border: var(--modal-bw) solid var(--border) !important; backdrop-filter: blur(var(--modal-blur)) !important; box-shadow: 0 30px 90px rgba(0,0,0, calc(var(--modal-shadow))) !important; background: color-mix(in srgb, var(--card-bg) 88%, transparent) !important; }

/* Light themes: modal panel without glass blur for readability */
html[data-theme="daybreak"] #gx-modal .panel,
html[data-theme="daybreak"] #gx-modal .modal-panel,
html[data-theme="daybreak"] #gx-modal > .box,
html[data-theme="azure-light"] #gx-modal .panel,
html[data-theme="azure-light"] #gx-modal .modal-panel,
html[data-theme="azure-light"] #gx-modal > .box,
html[data-theme="paper-pro"] #gx-modal .panel,
html[data-theme="paper-pro"] #gx-modal .modal-panel,
html[data-theme="paper-pro"] #gx-modal > .box{
  background: #ffffff;
  backdrop-filter: none;
}

/* =========================================================
   Light themes: loader + forms + progress visibility (SAFE v4)
   - fixes dark loader card in light themes
   - fixes dark form controls in light modals
   - improves progress contrast
========================================================= */

/* Loader card (Načítám...) */
html[data-theme="daybreak"] .gx-loader-card,
html[data-theme="azure-light"] .gx-loader-card,
html[data-theme="paper-pro"] .gx-loader-card{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="daybreak"] .gx-loader-text,
html[data-theme="azure-light"] .gx-loader-text,
html[data-theme="paper-pro"] .gx-loader-text{
  color: var(--text) !important;
  opacity: .82;
}

/* Form controls */
html[data-theme="daybreak"] :is(input,select,textarea),
html[data-theme="azure-light"] :is(input,select,textarea),
html[data-theme="paper-pro"] :is(input,select,textarea){
  background: var(--field-bg) !important;
  color: var(--text) !important;
  border: var(--bw) solid var(--field-border, var(--border)) !important;
}
html[data-theme="daybreak"] :is(input,select,textarea)::placeholder,
html[data-theme="azure-light"] :is(input,select,textarea)::placeholder,
html[data-theme="paper-pro"] :is(input,select,textarea)::placeholder{
  color: color-mix(in srgb, var(--muted) 85%, transparent) !important;
}
html[data-theme="daybreak"] :is(input,select,textarea):focus,
html[data-theme="azure-light"] :is(input,select,textarea):focus,
html[data-theme="paper-pro"] :is(input,select,textarea):focus{
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
  outline: none !important;
}

/* Progress (gitrix .progress) */
html[data-theme="daybreak"] .progress,
html[data-theme="azure-light"] .progress,
html[data-theme="paper-pro"] .progress{
  border-color: color-mix(in srgb, var(--border) 130%, transparent) !important;
  background: color-mix(in srgb, var(--bg) 55%, #ffffff) !important;
}
html[data-theme="daybreak"] .progress > div,
html[data-theme="azure-light"] .progress > div,
html[data-theme="paper-pro"] .progress > div{
  background: linear-gradient(90deg, var(--accent2), var(--accent)) !important;
}

/* =========================================================
   Light theme – loader text fix (FINAL)
   "Načítám seznam příležitostí..."
========================================================= */
html[data-theme="daybreak"] .gx-loader-text,
html[data-theme="azure-light"] .gx-loader-text,
html[data-theme="paper-pro"] .gx-loader-text{
  color: #ffffff !important;
  opacity: .95;
}