/*
 * Styles for reusable fragments and modals.
 * These templates are injected into already-rendered pages (modal.html.twig has no
 * <head>), so their CSS must be globally available rather than page-scoped.
 * Moved out of inline <style> blocks; loaded from base.html.twig / base-admin.html.twig.
 */

/* ── app/element/filter_search.html.twig ───────────────────────────────── */

/* Wrapper: übernimmt Breite des Controls */
.gh-dropdown{
    position: relative;
    display: inline-block;
    width: 45vw;
}

/* Sichtbare Suchleiste (ersetzt Button) */
.gh-searchbar{
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .6rem .6rem;
    box-shadow: none;
}
.gh-searchbar .input-group{
    align-items: stretch;
}
.gh-searchbar .form-control{
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .95rem;
}
.gh-searchbar .form-control::placeholder{ color: var(--muted); }
.gh-searchbar .form-control:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-25);
}
.gh-searchbar .input-group-text{
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-left: 0;
    color: var(--muted);
}

/* Dropdown-Panel (zeigt sich unter der Suchleiste) */
.gh-dropdown .dropdown-menu{
    width: 100%; /* an Wrapperbreite koppeln */
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg,#0e141c,#0c1016 35%,#0b0f14 100%);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    display: none; /* eigene Show/Hide-Logik */
}
.gh-dropdown .dropdown-menu.show{ display:block; }
.gh-dropdown .dropdown-menu-dark{
    --bs-dropdown-bg:transparent;--bs-dropdown-link-color:var(--text);
    --bs-dropdown-link-hover-bg:rgba(255,255,255,.06);
    --bs-dropdown-link-active-bg:var(--accent-25);
}

.gh-menu-scroll{max-height:70vh;overflow:auto;padding:.75rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.gh-menu-scroll::-webkit-scrollbar{width:10px}
.gh-menu-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}

/* User-Management modal: keep the user checkbox list in its own scroll area. */
.user-management-list{max-height:50vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.user-management-list::-webkit-scrollbar{width:10px}
.user-management-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}

.gh-group{border-radius:12px;border:1px solid var(--border-subtle);background:rgba(255,255,255,0.02);margin-bottom:.6rem;overflow:clip}
.gh-group-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .75rem;background:#141b26;border-bottom:1px dashed var(--border);user-select:none}
.gh-group-header:hover{background:#162031}
.gh-group-header .gh-title{font-weight:650;letter-spacing:.2px;color:var(--text)}
.gh-count-pill{display:inline-block;min-width:2ch;padding:.15rem .55rem;font-size:.75rem;border-radius:999px;background:var(--accent-16);border:1px solid rgba(139,92,246,.35);color:#dcd3ff}

.gh-items{margin:0;padding:.25rem}
.gh-item{padding:.5rem .55rem;display:flex;align-items:center;gap:.5rem;border-radius:10px;font-size:.96rem;line-height:1.25}
.gh-item:hover{background:rgba(255,255,255,.06)}
.gh-item:has(.form-check-input:checked){background:rgba(255,255,255,.05)}
.gh-label-wrap{display:flex;align-items:center;gap:.5rem;flex:1 1 auto}

.form-check-input{width:1.05rem;height:1.05rem;margin-top:0;cursor:pointer;border-color:rgba(255,255,255,.35);background-color:#0f141b}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-check-input:focus{box-shadow:0 0 0 .2rem var(--accent-25);border-color:var(--accent)}
.gh-group-checkbox{
    transform:translateY(0);
    margin-top: 7px;
}

.gh-actions{display:flex;gap:.25rem;margin-left:auto}
.gh-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);background:transparent;border-radius:8px;color:var(--muted);cursor:pointer}
.gh-icon-btn:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.gh-icon-btn:focus-visible{outline:none;box-shadow:0 0 0 .2rem var(--accent-25);border-color:var(--accent)}

mark{background:var(--accent-16);color:inherit;padding:0 .08em;border-radius:3px}
.gh-no-results{display:none;padding:1rem;text-align:center;color:var(--muted)}

/* ── app/element/project_dropdown.html.twig ────────────────────────────── */

.project-dropdown .dropdown-menu {
    min-width: 100%;
    z-index: 1000000;
}
.project-dropdown .dropdown-item {
    white-space: normal;
    word-wrap: break-word;
    padding: 0.4rem 1rem;
}
.project-dropdown .dropdown-item:hover,
.project-dropdown .dropdown-item.active {
    background-color: var(--cui-primary);
    color: #fff;
}
.project-dropdown .dropdown-header {
    padding: 0.5rem 1rem;
    font-weight: bold;
    background-color: var(--cui-dark);
}
.project-dropdown .dropdown-toggle {
    min-height: 38px;
}
.project-dropdown .project-selected-text {
    max-width: calc(100% - 20px);
    white-space: nowrap;
}
.project-dropdown .project-nav-btn {
    padding: 0.375rem 0.5rem;
    flex-shrink: 0;
}
.project-dropdown .project-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.project-dropdown .dropdown-menu {
    transform: translate3d(-45px, 40px, 0px) !important;
    width: 254px !important;
}

/* ── app/demand/modal/demand-source.html.twig ──────────────────────────── */

.demand-source-dropdown .dropdown-menu {
    min-width: 100%;
}
.demand-source-dropdown .dropdown-item {
    white-space: normal;
    word-wrap: break-word;
    padding: 0.5rem 1rem;
}
.demand-source-dropdown .dropdown-item:hover,
.demand-source-dropdown .dropdown-item.active {
    background-color: var(--cui-primary);
    color: #fff;
}
.demand-source-dropdown .demand-source-selected-text {
    max-width: calc(100% - 20px);
    overflow: hidden;
}

/* ── app/demand/modal/real-time-source.html.twig ───────────────────────── */

.realtime-source-dropdown .dropdown-menu {
    min-width: 100%;
}
.realtime-source-dropdown .dropdown-item {
    white-space: normal;
    word-wrap: break-word;
    padding: 0.5rem 1rem;
}
.realtime-source-dropdown .dropdown-item:hover,
.realtime-source-dropdown .dropdown-item.active {
    background-color: var(--cui-primary);
    color: #fff;
}
.realtime-source-dropdown .realtime-source-selected-text {
    max-width: calc(100% - 20px);
    overflow: hidden;
}

/* ── app/demand/modal/user-module-source.html.twig ─────────────────────── */

.user-module-dropdown .dropdown-menu {
    min-width: 100%;
}
.user-module-dropdown .dropdown-item {
    white-space: normal;
    word-wrap: break-word;
    padding: 0.5rem 1rem;
}
.user-module-dropdown .dropdown-item:hover,
.user-module-dropdown .dropdown-item.active {
    background-color: var(--cui-primary);
    color: #fff;
}
.user-module-dropdown .user-module-selected-text {
    max-width: calc(100% - 20px);
    overflow: hidden;
}

/* ── app/demand/modal/demand-config.html.twig ──────────────────────────── */

.vendor-dropdown .dropdown-menu {
    min-width: 100%;
    z-index: 1000000;
}
.vendor-dropdown .dropdown-item {
    white-space: normal;
    word-wrap: break-word;
    padding: 0.5rem 1rem;
}
.vendor-dropdown .dropdown-item:hover,
.vendor-dropdown .dropdown-item.active {
    background-color: var(--cui-primary);
    color: #fff;
}
.vendor-dropdown .vendor-selected-text {
    max-width: calc(100% - 20px);
    overflow: hidden;
}

/* Inaktive Farbe (Checkbox nicht gecheckt) */
/*.form-check-input {*/
/*    background-color: #cccccc; !* z.B. ein helles Grau *!*/
/*    border-color: #cccccc;*/
/*}*/

/* Aktive Farbe (Checkbox gecheckt) */
.form-check-input:checked {
    background-color: #28a745; /* z.B. ein grüner Farbton */
    border-color: #28a745;
}

.sticky-col {
    position: sticky;
    left: 0;
    background: black !important;
    z-index: 100000;
}

tr[data-adunit-path] {
    min-width: 100px;
}

tr.skin td {
    background-color: #000 !important;
    padding-top: 20px;
}

/* ── app/inventory/modal/editAdUnit.html.twig ──────────────────────────── */

.breakpoint-row input.breakpoint-input { max-width: 140px; }

/* ── app/inventory/modal/importAdUnits.html.twig ───────────────────────── */

.form-floating > .form-control:focus ~ [for="ad_unit_import_startPoints"], .form-floating > .form-control:not(:placeholder-shown) ~ [for="ad_unit_import_startPoints"], .form-floating > .form-control-plaintext ~ [for="ad_unit_import_startPoints"], .form-floating > .form-select ~ [for="ad_unit_import_startPoints"]{
    opacity: 0;
}

[for="ad_unit_import_startPoints"] {
    width: 100%;
    text-align: center !important;
}

/* ── app/inventory/modal/matrix.html.twig ──────────────────────────────── */

.modal-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: transparent;
    z-index: 1060;
}
.modal-resize-handle:hover,
.modal-resize-handle.resizing {
    background: rgba(var(--cui-primary-rgb), 0.3);
}
#modalSelectSsp .modal-dialog {
    transition: none;
}
#modalSelectSsp .modal-content {
    position: relative;
}

/* ── app/inventory/modal/previewDemandAnalyse.html.twig ────────────────── */

/* Custom styles for SSP list */
.list-group-item-action:hover {
    background-color: rgba(var(--cui-primary-rgb), 0.05);
}

.list-group-item-action.active {
    background-color: var(--cui-primary);
    border-color: var(--cui-primary);
}

.list-group-item-action.active .text-danger,
.list-group-item-action.active .text-success {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Section headers */
.list-group-item:not(.list-group-item-action) {
    cursor: default;
    pointer-events: none;
}

/* Scrollbar styling */
#ssp-details-content::-webkit-scrollbar {
    width: 8px;
}

#ssp-details-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#ssp-details-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#ssp-details-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}
