/*#######################################################################
# ADMIN-CHILD.CSS - Zentrale Admin-Styles
# ----------------------------------------------------------------------
# WEBASMEDIA | Andreas Schoene
# 
# KONFIGURATION
# --------------------------------------
# * CSP Refresh Endpoint (functions.php)
# * Backend Dashboard (backend_dashboard_wam.php)
# * Cleanup (cleanup.php)
# * Fontawesome (fontawesome.php)
#
# AENDERUNGEN
# --------------------------------------
# * 02.12.2025 - letzte Optimierung
#
#######################################################################*/

/***********************************************************************
 *** CSP Refresh Endpoint (functions.php)                            ***
 ***********************************************************************/

body.wam-csp-refresh {
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 14px;
  color: #222222;
  padding: 20px;
}

/***********************************************************************
 *** Admin Body Modus-Scopes (global) – functions.php                ***
 ***********************************************************************/

/** Kopf der Postboxen (zentral) */
.wam-mode-wam :is(#wam_support_widget, #wam_cleanup_widget, #wam_fontawesome_widget, #wam_fonts_widget, #wam_gsc_widget) .postbox-header,
.wam-mode-gmwam :is(#wam_support_widget, #wam_cleanup_widget, #wam_fontawesome_widget, #wam_fonts_widget, #wam_gsc_widget) .postbox-header {
  background-color: #265366 !important;
  color: #ffffff !important;
  padding: 2px;
  border-radius: 5px 5px 0 0;
  border: none !important;
}

/** Kopf der Postboxen (zentral) */
.wam-mode-wam :is(#wam_support_widget, #wam_cleanup_widget, #wam_fontawesome_widget, #wam_fonts_widget, #wam_gsc_widget) .postbox-header h2,
.wam-mode-gmwam :is(#wam_support_widget, #wam_cleanup_widget, #wam_fontawesome_widget, #wam_fonts_widget, #wam_gsc_widget) .postbox-header h2{
  color: #ffffff !important;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}

/***********************************************************************
 *** Buttons WAM-Child Dashboard (global)                            ***
 ***********************************************************************/

/* Basis-Button */
.wam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

.wam-btn:hover { background:#214959; }
.wam-btn:focus-visible { outline: 2px solid #265366; outline-offset: 2px; }
.wam-btn:active { transform: translateY(1px); }
.wam-btn[disabled], .wam-btn.disabled { opacity: .6; cursor: not-allowed; }

/* Button-WAM */
.wam-btn-wam { background:#265366; }
.wam-btn-wam:hover { background:#214959; }

/* Button-Grün */
.wam-btn-green { background:#628E3D; }
.wam-btn-green:hover { background:#537a34; }

/* Button-Rot */
.wam-btn-red { background:#7D1414; }
.wam-btn-red:hover { background:#681010;}

/* Toggle: Grün / Rot / Orange */
.wam-btn-toggle.is-active   { background: #628E3D; }  /* aktiv = grün */
.wam-btn-toggle.is-inactive { background: #7D1414; }  /* inaktiv = rot */
.wam-btn-toggle.is-active:hover   { background: #537a34; }
.wam-btn-toggle.is-inactive:hover { background: #681010; }
.wam-btn-toggle.is-pending        { background: #FFA500; } /* Zwischenstatus */

/* Statusfarben */
.wam-btn-status.is-active   { color: #628E3D; }
.wam-btn-status.is-inactive { color: #7D1414; }
.wam-btn-status.is-pending  { color: #FFA500; }

/* Ghost (neutral) */
.wam-btn-ghost { background: transparent; color: #265366; }
.wam-btn-ghost:hover { background: rgba(38,83,102,.08); }

.wam-btn.loading,
.wam-btn.loading:hover,
.wam-btn.loading:active,
.wam-btn.button-disabled,
.wam-btn.button-disabled:hover,
.wam-btn.button-disabled:active {
  background: #d3d3d3 !important;
  color: #666 !important;
  cursor: not-allowed;
  opacity: 0.75;
  transform: none;
}

/***********************************************************************
 ***  Statusfarben & Meldungen WAM-Child Dashboard (global)          ***
 ***********************************************************************/

/* Basis-Style für alle Status-Texte */
.wam-status { font-size: 14px; font-weight: bold !important; }

/* Grün – OK / Erfolg */
.wam-status--ok,
.wam-status-ok,
p.ok,
#status-update p.ok,
#status-download p.ok,
#status-delete p.ok,
#status-upload p.ok,
#status-alias p.ok,
#wam-debug-status.ok,
#wam-cleanup-status.ok {
  color: #628E3D !important;
  font-weight: bold !important;
}

/* Rot – Fehler / Inaktiv */
.wam-status--err,
.wam-status-err,
.wam-status--invalid,
.wam-status-invalid,
p.err,
#status-update p.err,
#status-download p.err,
#status-delete p.err,
#status-upload p.err,
#status-alias p.err,
#wam-debug-status.err,
#wam-cleanup-status.err {
  color: #7D1414 !important;
  font-weight: bold !important;
}

/* Blau – Info / Neutral */
.wam-status--info,
.wam-status-info,
p.info,
#status-update p.info,
#status-download p.info,
#status-delete p.info,
#status-upload p.info,
#status-alias p.info {
  color: #265366 !important;
  font-weight: bold !important;
}

/* Orange – Warnung / Zwischenzustand */
.wam-status--warn,
.wam-status-warn,
p.warn,
#status-update p.warn,
#status-download p.warn,
#status-delete p.warn,
#status-upload p.warn,
#status-alias p.warn {
  color: #FFA500 !important;
  font-weight: bold !important;
}

/* Button-Status (Toggles, Statusanzeigen) */
.wam-btn-status.is-active   { color: #628E3D !important; font-weight: bold; }
.wam-btn-status.is-inactive { color: #7D1414 !important; font-weight: bold; }
.wam-btn-status.is-pending  { color: #FFA500 !important; font-weight: bold; }

/***********************************************************************
 *** Backend Dashboard (backend_dashboard_wam.php)                   ***
 ***********************************************************************/

/** Dashboard Support: Widget-Container */
#wam_support_widget {
  border: none !important;
  box-shadow: none !important;
}

/** Dashboard Support: Tabellen-Layout */
.wam-support-table {
  width: 100%;
  border-collapse: collapse;
}

.wam-support-td-left {
  font-size: 13px;
  border-right: 1px solid #cccccc;
  padding-right: 15px;
  vertical-align: top;
}

.wam-support-td-right {
  text-align: center;
  vertical-align: middle;
  padding-left: 15px;
}

/** Dashboard Support: Logo */
.wam-support-logo {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 63px;
}

/** Links */
.wam-link { text-decoration: none; }
.wam-link-blue { color: #265366; }
.wam-link-pink { color: #b93563; }

.wam-footer-link { text-decoration: none; font-weight: bold; }
.wam-footer-link--white { color: #ffffff; }
.wam-footer-link--blue  { color: #265366; }
.wam-footer-link--pink  { color: #b93563; }

/** Version - Footer */
.comment-author .avatar { display: none; }
#footer-upgrade { display: none; }
div[class*="notice"] { }

/** Admin-Bar */
#wpadminbar .quicklinks a,
#wpadminbar .quicklinks .ab-empty-item,
#wpadminbar .shortlink-input {
  padding: 0 8px !important;
}
#wp-admin-bar-wp-logo { display: none !important; }

/** Backend Navigation & Optionen */
#contextual-help-link-wrap { display: none !important; }
.update-nag,
div.error.notice.is-dismissible { display: none !important; }

/** Dashboard-Widgets */
#dashboard_primary,
#dashboard_quick_press,
#dashboard_activity,
#dashboard_right_now {
  display: none !important;
}

/***********************************************************************
 *** Cleanup (cleanup.php)                                           ***
 ***********************************************************************/

/** Widget: Container */
#wam_cleanup_widget {
  border: none !important;
  box-shadow: none !important;
}

/** Panel & Reihen */
.wam-cleanup-panel {
  width: 100% !important;
  background: #ffffff;
  border-radius: 5px;
}
.wam-cleanup-row {
  margin-bottom: 10px;
}

/** Texte & Listen */
.wam-cleanup-info {
  font-size: 12px;
  color: #666;
  text-align: left;
}
.wam-cleanup-files {
  font-size: 11px;
  color: #888;
  margin-top: 5px;
  margin-bottom: 20px;
}

/** Layout-Helfer */
.wam-flex-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.wam-select-half {
  font-size: 14px;
  width: 50%;
}

/** Debug-Bereich */
.wam-debug-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between; /* verteilt Button links, Status rechts */
  margin-bottom: 15px;
  flex-wrap: wrap;
}

/***********************************************************************
 *** FontAwesome (fontawesome.php)                                   ***
 ***********************************************************************/

/** Widget-Container */
#wam_fontawesome_widget {
  border: none !important;
  box-shadow: none !important;
}

/** Steuer-Icons (Collapse / Handle) */
#wam_fontawesome_widget .handlediv,
#wam_fontawesome_widget .hndle,
#wam_fontawesome_widget .handlediv::before {
  color: #ffffff !important;
}

/***********************************************************************
 *** Google Site Verification (google_site_verification.php)         ***
 ***********************************************************************/

#wam_gsc_widget {
	border: none !important;
	box-shadow: none !important;
}

/** Widget-Container & Layout */
.wam-widget-container { 
	padding: 0 10px 10px 0; 
}

.wam-widget-container .input-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wam-button-container {
  display: flex;
  gap: 3px;
  margin-top: 10px;
}

/** Inputs */
.wam-widget-container input[type="text"] {
  width: 86.5%;
  padding: 2px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  height: 26px;
}

#wam_gsc_widget .handlediv,
#wam_gsc_widget .hndle { color: #ffffff !important; }

/***********************************************************************
 *** Google Fonts (fonts.php)                                        ***
 ***********************************************************************/

/** Widget-Container */
#wam_fonts_widget {
  border: none !important;
  box-shadow: none !important;
}

/** Dropdown + Listen */
#installed-fonts-list {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}
#google-fonts-dropdown {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.wam-dropdown {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/** Alias-UI */
.wam-alias-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
}
.wam-alias-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 12px;
  max-width: 520px;
}
.wam-alias-grid label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.wam-alias-grid input[type="checkbox"]{
  transform: scale(1.05);
}
.wam-alias-buttons {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Abstand für die Alias-Überschrift */
.wam-alias-subtitle {
  margin: 15px 0 10px !important;
  font-weight: 400;
}

/* Abstand für Label-Block (Font-Familie) */
.wam-alias-label {
  display: block;
  margin-bottom: 10px;
}

/** Layout-Helfer */
.wam-hr { margin: 15px 0; }
.wam-hr--thin { width:100%; margin:8px 0; border:0; border-top:1px solid #ddd; }
.wam-mt-8 { margin-top: 8px; }

/***********************************************************************
 *** Shortcodes-Liste (shortcodes.php)                               ***
 ***********************************************************************/

.wam-shortcode-container { 
  margin-top: 10px; 
}

.wam-shortcode-item { 
  margin: 6px 0; 
}

.wam-shortcode-title {
  width: 100%;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 0;
  border: 0px solid #e2e2e2;
}

.wam-shortcode-title:focus { 
  outline: 0px solid #265366; 
  outline-offset: 1px; 
  background: var(--wam-gray-200);
}

.wam-shortcode-content {
  padding: 8px;
  border: 0px solid #e2e2e2;
  border-top: 0;
  border-radius: 0 0 2px 2px;
  background: #fff;
}

.wam-shortcode-example { margin: 0; }
.wam-shortcode-example code { word-break: break-all; }

/***********************************************************************
 *** Rechtes Sticky-Menü (Fly-out)                                   ***
 ***********************************************************************/

.wam-sticky {
  position: fixed;
  top: 38vh;
  right: 0px;              /* 5px Abstand zum Rand */
  inset-inline-end: 0px;   /* RTL-sicher ebenfalls 5px */
  z-index: 999999;         /* über Scrollbar */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* eigener Stacking-Context je Item (robuste z-index-Steuerung) */
.wam-sticky__viewport {
  position: relative;
  width: 56px;
  height: 56px;
  pointer-events: auto;
  overflow: visible;
  isolation: isolate;
}

/* Box (bleibt stehen, liegt über dem Slider) */
.wam-sticky__square {
  position: absolute;
  right: 0;
  top: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #265366; /* Fallback */
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border-radius: 0;
  z-index: 30;
}

.wam-sticky__icon {
  width: 30px;
  height: 30px;
  color: #fff;
  transition: filter .2s ease;
}
.wam-sticky__viewport:hover .wam-sticky__icon {
  filter: drop-shadow(0 0 6px rgba(255,255,255,1));
}

/* Slider: bündig an linker Boxkante, fährt nach links raus, unter der Box */
.wam-sticky__labelbox {
  position: absolute;
  top: 0;
  right: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  background: #265366; /* Fallback */
  color: #fff;
  font: 700 15px/1 Quicksand,system-ui,Arial,sans-serif;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border-radius: 0;
  transform: translateX(100%);      /* Start direkt hinter der Box */
  transition: transform .25s ease-out;
  z-index: 10;
  pointer-events: none;             /* Klick bleibt auf der Box */
}

/* Trennlinie deaktivieren (der kleine Balken rechts ist weg) */
.wam-sticky__labelbox::after {
  display: none !important;
}

/* ausklappen */
.wam-sticky__viewport:hover .wam-sticky__labelbox {
  transform: translateX(0);
}

/* Farben pro Item */
.wam-sticky__viewport.wam-bg-call .wam-sticky__square,
.wam-sticky__viewport.wam-bg-call .wam-sticky__labelbox { background:#7BB236; }

.wam-sticky__viewport.wam-bg-wa   .wam-sticky__square,
.wam-sticky__viewport.wam-bg-wa   .wam-sticky__labelbox { background:#25D366; }


/* --------------------------------- Responsive: 800px --------------------------------- */
@media (max-width: 800px) {
  .wam-sticky { top: 40vh; }
  .wam-sticky__labelbox { display: none; } /* mobil nur Kachel */
  
  /* Einheitliche Skalierung für alle relevanten Checkboxen */
  .wam-alias-grid input[type="checkbox"],
  .wam-alias,
  .font-checkbox {
    transform: scale(0.75);
    transform-origin: center;
  }
}