/* Neon Full CSS Design Data Source Manager SPO - Frontend (Neon Full) – Harmonized */

/* Variables and base colors */
:root {
  --bg-midnavy: #0f1330;
  --accent-orange: #f18500;
  --footer-orange: #f08a00;
  --card-warm: #fcfcfc;
  --neon-magenta: #ff3fb8;
  --neon-cyan: #1fd6ff;
  --neon-glow: 0 8px 40px rgba(139, 66, 255, 0.12);
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --table-min-width: 900px;
  --container-max-width: 1200px;
}

/* Base layout and container styles */
.dsms-fullwidth-wrapper {
  background: linear-gradient(180deg, var(--bg-midnavy), rgba(15, 19, 48, 0.95));
  color: #e6eefb;
  padding: 28px 0;
}

.dsms-container {
  max-width: var(--container-max-width);
  margin: 0 auto 24px;
  font-family: var(--font-family);
  color: #0a0f18;
  background: var(--card-warm);
  padding: 18px;
  border-radius: 12px;
  box-shadow: var(--neon-glow);
}

.dsms-container h2 {
  margin-bottom: 12px;
}

.dsms-fullwidth-inner {
  max-width: var(--container-max-width);
  margin: auto;
  box-sizing: border-box;
}

/* Buttons styles */
.dsms-button {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  font-weight: bold;
  font-size: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.dsms-btn-orange {
  background-image: linear-gradient(180deg, var(--accent-orange), var(--footer-orange));
  color: #000 !important;
}

.dsms-btn-ghost {
  background-color: rgba(0, 0, 0, 0.04);
  color: #0a0f18;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.dsms-btn-neonline {
  background-image: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
  color: #000 !important;
  box-shadow:
    0 8px 30px rgba(255, 63, 184, 0.12),
    0 8px 30px rgba(31, 214, 255, 0.06);
}

/* Tables text size adjustments */
.dsms-table-smalltext,
.dsms-table-smalltext table,
.dsms-table-smalltext th,
.dsms-table-smalltext td {
  font-size: 13px;
}

/* Widefat table styling */
table.widefat {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  background-color: var(--card-warm);
  border-radius: 8px;
  overflow: hidden;
}

table.widefat th,
table.widefat td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: #0a0f18;
  vertical-align: middle;
}

table.widefat thead {
  background-image: linear-gradient(180deg,#fbfdff,#f1f7ff);
}

/* Inputs styling */
.dsms-input-manage,
.dsms-input-manage:focus,
.dsms-input-summary,
.dsms-input-summary:focus {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 6px 8px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

/* Consolidate input styles */
.dsms-consolidate-input {
  width:75%;
  max-width:100%;
  min-width:220px;
  background-color:#fff;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
}

/* Scan template wider input */
.dsms-scan-template-wide {
  width:100%;
  max-width:640px;
}

/* Filled highlight background */
.dsms-filled {
    background-image: linear-gradient(180deg,#fffefb,#ffffff);
}

/* Summary table wrapper adjustments */
.dsms-summary-table-centered {
    width:100%;
    display:block;
    box-sizing:border-box;
    padding:12px  0;
}

.dsms-summary-table-centered .dsms-summary-full {
    max-width:1400px;
    width:100%;
}

/* Vertical top alignments */
.dsms-vertical-top th,
.dsms-vertical-top td,
.dsms-export-table td,
.dsms-summary-full td {
    vertical-align: top !important;
}

/* Neon separator styling */
.dsms-sep-neon {
    height:6px;
    border:none;
    border-radius:6px;
    background-image:
        linear-gradient(90deg,var(--neon-magenta),var(--neon-cyan));
    box-shadow:
        0 6px 30px rgba(31,214,255,0.06),
         0 6px 30px rgba(255,63,184,0.06);
}

/* Export table styles */
.dsms-export-table {
    width:100%;
    table-layout:auto;
}

/* Scroll wrapper with neon scrollbar */
.dsms-table-scrollwrap {
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom:12px;
    border-radius:8px;
    margin-bottom:8px;
}

/* Ensure inner content can be wider than container for horizontal scroll */
.dsms-table-scrollwrap table {
    min-width: var(--table-min-width);
}

/* Webkit scrollbar styling */
.dsms-table-scrollwrap::-webkit-scrollbar {
    height:12px;
}
.dsms-table-scrollwrap::-webkit-scrollbar-track {
    background-image:
        linear-gradient(90deg,rgba(139,66,255,0.06),rgba(31,214,255,0.03));
    border-radius:8px;
}
.dsms-table-scrollwrap::-webkit-scrollbar-thumb {
    background-image:
        linear-gradient(90deg,var(--neon-magenta),var(--neon-cyan));
    border-radius:8px;
    box-shadow:
         0 4 px 10 px rgba(0 ,0 ,0 ,0.12);
}
.dsms-table-scrollwrap::-webkit-scrollbar-thumb:hover {
    opacity:.95;
}

/* Firefox scrollbar support */
@supports(scrollbar-color:red blue) {
    .dsms-table-scrollwrap {
        scrollbar-width :thin ;
        scrollbar-color:
            rgba(255 ,63 ,184 ,.9) linear-gradient(90deg,rgba(139 ,66 ,255 ,.06),rgba(31 ,214 ,255 ,.03));
    }
}

/* Small helpers */
.dsms-row-actions .dsms-button {
    padding :6px8px ;
    font-size :12px ;
    border-radius :8px ;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline :3px solid rgba(45 ,123 ,255 ,.14);
    outline-offset :2px ;
}

/* Responsive adjustments */
@media(max-width :1400px) {
    .dsms-fullwidth-inner table.widefat th:nth-child(3),
    .dsms-fullwidth-inner table.widefat td:nth-child(3) {
        width :9cm !important ;
        min-width :180px !important ;
    }
    .dsms-fullwidth-inner table.widefat th:nth-child(4),
    .dsms-fullwidth-inner table.widefat td:nth-child(4) {
        width :15cm !important ;
        min-width :360px !important ;
    }
}

@media(max-width :900px) {
    .dsms-container {
        padding :14px ;
        margin :12px auto ;
    }
    .dsms-table-smalltext,
    .dsms-table-smalltext table,
    .dsms-table-smalltext th,
    .dsms-table-smalltext td {
        font-size :12px !important ;
    }
    .dsms-consolidate-input {
        width :100% !important ;
    }
}

/* Import block styling */
#dsms-import-existing-block-frontend {
    border :1px dashed rgba(0 ,0 ,0 ,.06);
    padding :10px ;
    border-radius :8px ;
    background :#fff ;
    margin-top :8px ;
}
#dsms-import-existing-block-frontend select{
    max-width :520px ;
    padding :8px ;
    border-radius :6px ;
    border :1px solid rgba(0 ,0 ,0 ,.06);
}

/* Preview area margin */
#dsms-preview-area {
    margin-top :12px ;
}

/* Message Boxes */
.dsms-msg-ok {
    background :#ecfdf5 ;
    border-left :4px solid #10b981 ;
    padding :8px10px ;
    border-radius :6px ;
    color :#065f46 ;
}
.dsms-msg-err {
    background :#fff1f2 ;
    border-left :4px solid #ef4444 ;
    padding :8px10px ;
    border-radius :6px ;
    color :#7f1d1d ;
}

/* Autocomplete list styling */
.dsms-ac-list {
    box-shadow :0 6 px 20 px rgba(0 ,0 ,0 ,.08) ;
    list-style :none ;
    margin :4px  0 ;
    padding :6 px  0 ;
    border-radius :6 px ;
}
.dsms-ac-list li {
    padding :8 px10 px ;
    cursor :pointer ;
    background :transparent ;
    color :#fff ;
}
.dsms-ac-list li:hover {
    background-image:
        linear-gradient(
              90deg,
              rgba(255 ,63 ,184 ,.06),
              rgba(31 ,214 ,255 ,.04)
        );
}

/* Konsolidated preview text styling */
.dsms-kons-preview {
   display:inline-block ;
   max-width :100% ;
   word-break :break-word ; 
}

/* Accessibility tweaks */
.dsms-grid-dark { 
   color:#0a0f18 !important ; 
}

.dsms-url-cleaning-panel {
    max-width: var(--container-max-width); /* Gleiche Maximalbreite wie .dsms-container */
    margin: 0 auto 24px;                   /* Zentriert und mit Abstand unten wie .dsms-container */
    padding: 18px;                        /* Gleiches Innenabstand */
    background: var(--card-warm);         /* Gleicher Hintergrund */
    border-radius: 12px;                  /* Gleiche Eckenrundung */
    box-shadow: var(--neon-glow);         /* Gleicher Schatten */
    font-family: var(--font-family);      /* Gleiche Schriftfamilie */
    color: #0a0f18;                      /* Gleiche Textfarbe */
}