/* admin-common.css
   Gemeinsame Styles: Tabellen-Scroll, Buttons, Previews, neon card styles.
   Wird von SPO- und ODS-Admin & Frontend verwendet, um Look&Feel zu vereinheitlichen.
*/
:root{
  --bg-card: #fbfeff;
  --text: #0a0f18;
  --muted: #666;
  --accent-neon1: #ff3fb8;
  --accent-neon2: #1fd6ff;
  --accent-orange: #ff7b2d;
  --card-shadow: 0 8px 30px rgba(45,162,204,0.04);
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* { box-sizing: border-box; }

.bdsg-wrap, .dsms-container {
  font-family: var(--font-family);
  color: var(--text);
}

/* Table container ensures horizontal scrollbar for wide tables */
.bdsg-table-scroll,
.bdsg-table-wrapper,
.neon-scroll-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  background: transparent;
}

/* Base table style used throughout */
.bdsg-table, .widefat, table.widefat {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 1200px; /* default; override per view if required */
  background: var(--bg-card);
  border-radius: 8px;
}

/* Table cells */
.bdsg-table th, .bdsg-table td, .widefat th, .widefat td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(10,15,24,0.06);
  color: var(--text);
  white-space: nowrap;
  font-size: 13px;
}

/* Responsive adjustments: reduce min-width on smaller screens */
@media (max-width:1400px) {
  .bdsg-table { min-width: 1000px; }
}
@media (max-width:1000px) {
  .bdsg-table { min-width: 900px; }
}

/* neon / card style */
.bdsg-neon-grid { background: linear-gradient(180deg,#eafffb,#f6fffe); border:1px solid rgba(45,162,204,0.12); padding:12px; border-radius:8px; box-shadow:var(--card-shadow); }

/* small UI tokens */
.bdsg-token-preview { margin-top:8px; color:#444; font-size:13px; background:#f6f6f6; padding:6px; border-radius:4px; word-break:break-all; }

/* pre blocks for JSON preview */
.bdsg-pre { background:#fbfbfb; border:1px solid #ddd; padding:8px; overflow:auto; max-height:380px; border-radius:6px; font-family: monospace; font-size:13px; }

/* log area */
.bdsg-log { margin-top:12px; background:#fffefc; border:1px solid #eee; padding:12px; white-space:pre-wrap; max-height:520px; overflow:auto; }

/* utility */
.hidden { display:none !important; }
.small { font-size:12px; color:var(--muted); }

/* Buttons */
.bdsg-button { background:#0073aa; color:#fff; border:0; padding:7px 12px; border-radius:6px; cursor:pointer; font-weight:700; }
.bdsg-button.secondary { background:#f1f1f1; color:#222; border:1px solid #ddd; }
.bdsg-button.danger { background:#a80000; color:#fff; }

/* ensure token select stretches */
select#bigid-token-select, select#bigid-token-select-ods {
  min-width: 320px;
  max-width: 100%;
}

/* hover states for rows */
.bdsg-table tbody tr:hover { background: rgba(45,123,255,0.03); transform: translateY(-1px); transition: all .12s ease; }

/* focus outlines for accessibility */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(45,123,255,0.12);
  outline-offset: 2px;
}

/* small helper for JSON mask styling */
.bdsg-mask { font-family: monospace; font-size: 13px; background:#fff; padding:6px; border-radius:4px; border:1px solid #eee; word-break:break-all; }

/* -------------------------------------------------------------
   Manage Data Sources: left-align headers and harmonize column widths
   Applies to SPO and ODS frontend manage-forms as requested
   ------------------------------------------------------------- */

/* Make table header labels left-aligned for Manage Data Sources forms (SPO + ODS frontends) */
.bdsg-manage-form-table th,
.bigd-form-table th,
.form-table.bdsg-manage-form-table th,
.form-table.bigd-form-table th,
.wrap .form-table th {
  text-align: left !important;
  vertical-align: top !important;
  padding-left: 12px;
}

/* ---------------------------
   Harmonize Manage Data Sources column widths (SPO + ODS)
   Left column = labels (th) fixed width 220px
   Right column = inputs (td) flexible, inputs constrained for consistent look
   --------------------------- */

/* Target manage form tables used in SPO and ODS frontends */
.bdsg-manage-form-table,
.bigd-form-table,
.form-table.bdsg-manage-form-table,
.form-table.bigd-form-table {
  width: 100%;
  border-collapse: separate;
}

/* Ensure table rows use consistent layout */
.bdsg-manage-form-table tr,
.bigd-form-table tr {
  vertical-align: top;
}

/* Left column (labels) fixed */
.bdsg-manage-form-table th,
.bigd-form-table th,
.form-table.bdsg-manage-form-table th,
.form-table.bigd-form-table th {
  width: 220px; /* Matches SPO admin desired width */
  max-width: 220px;
  text-align: left !important;
  vertical-align: top !important;
  padding: 8px 12px;
  white-space: normal; /* allow wrapping of long label text */
  font-weight: 600;
  color: var(--text);
}

/* Right column (inputs) flexible */
.bdsg-manage-form-table td,
.bigd-form-table td,
.form-table.bdsg-manage-form-table td,
.form-table.bigd-form-table td {
  width: auto;
  padding: 8px 12px;
}

/* Constrain form controls to a consistent max-width (matches SPO frontend feel) */
.bdsg-manage-form-table td .ds-input,
.bigd-form-table td input.regular-text,
.bigd-form-table td .ds-input,
.bdsg-manage-form-table td input.regular-text,
.bdsg-manage-form-table td select,
.bigd-form-table td select,
.bdsg-manage-form-table td textarea,
.bigd-form-table td textarea {
  display: block;
  width: 100%;
  max-width: 720px; /* same max width used in SPO frontend */
  box-sizing: border-box;
  border: 1px solid rgba(10,15,24,0.06);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
}

/* For forms that used inline small numeric inputs, keep compact look */
.bdsg-manage-form-table td input[type="number"],
.bigd-form-table td input[type="number"],
.bdsg-manage-form-table td .small-text,
.bigd-form-table td .small-text {
  width: auto;
  min-width: 80px;
  max-width: 220px;
  padding: 6px 8px;
}

/* For ODS Manage table where we used min-width on table wrapper ensure horizontal scroll but same column width */
.bdsg-table-scroll .bdsg-manage-form-table,
.bdsg-table-scroll .bigd-form-table {
  overflow-x: auto;
}

/* Accessibility: keep focus outlines visible for inputs */
.bdsg-manage-form-table td input:focus,
.bigd-form-table td input:focus,
.bdsg-manage-form-table td select:focus,
.bigd-form-table td select:focus {
  outline: 3px solid rgba(45,123,255,0.12);
  outline-offset: 2px;
}

/* Small fine tuning for label wrapping to ensure consistent vertical spacing */
.bdsg-manage-form-table th label,
.bigd-form-table th label {
  display: block;
  line-height: 1.25;
  margin: 0;
}

/* If any form-table uses .regular-text ensure consistent look */
.form-table input.regular-text,
.form-table select,
.form-table textarea {
  border: 1px solid rgba(10,15,24,0.06);
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  color: var(--text);
}

/* Improve readability of long table cells (wrap instead of ellipsis) for big tables like ODS list */
.bdsg-table td,
.bdsg-table th,
.widefat td,
.widefat th {
  white-space: nowrap;
}

/* If you want to allow wrapping for long content in specific columns, override where needed:
   Example usage in template: <td class="wrap-allow">...</td>
*/
.bdsg-table td.wrap-allow,
.widefat td.wrap-allow {
  white-space: normal;
  word-break: break-word;
}

/* Token table small tweaks */
.bdsg-token-table td button {
  padding: 6px 10px;
  border-radius: 6px;
}

/* Ensure table wrappers show horizontal scroll explicitly (defensive) */
.bdsg-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Final small helper: visibly separate sections in long pages */
.section-sep { margin: 18px 0; border-top: 1px solid rgba(10,15,24,0.04); }

/* End of admin-common.css */