/* =============================================
   123GER Scenario Library — Frontend Styles
   AntaForce palette + Montserrat font
   ============================================= */

:root {
    --ger-navy:      #1A3A6B;
    --ger-blue:      #2B5BA8;
    --ger-blue-mid:  #4A7FC1;
    --ger-blue-lite: #8EB4D8;
    --ger-bg:        #EFF4FA;
    --ger-card-bg:   #ffffff;
    --ger-border:    #C8DCF0;
    --ger-text:      #1A2A3A;
    --ger-muted:     #5A7A9A;
    --ger-radius:    10px;
    --ger-shadow:    0 2px 12px rgba(43,91,168,.10);
    --ger-font:      'Montserrat', sans-serif;
}

/* ── Grid / Cards ── */
.ger123-grid { display:grid; gap:24px; padding:24px 0; }
.ger123-cols-2 { grid-template-columns:repeat(2,1fr); }
.ger123-cols-3 { grid-template-columns:repeat(3,1fr); }
.ger123-cols-4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .ger123-cols-3,.ger123-cols-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .ger123-grid{grid-template-columns:1fr;} }

.ger123-card {
    background:var(--ger-card-bg);
    border:1px solid var(--ger-border);
    border-radius:var(--ger-radius);
    box-shadow:var(--ger-shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .18s, box-shadow .18s;
    font-family:var(--ger-font);
}
.ger123-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(43,91,168,.15); }

.ger123-card__thumb img { width:100%; height:180px; object-fit:cover; display:block; }

.ger123-card__body { padding:20px; display:flex; flex-direction:column; flex:1; }

.ger123-card__top { display:flex; align-items:center; gap:8px; margin-bottom:10px; }

.ger123-card__title {
    font-size:1rem; font-weight:700; color:var(--ger-text);
    margin:0 0 8px; line-height:1.3; font-family:var(--ger-font);
}

.ger123-card__excerpt { color:var(--ger-muted); font-size:.88rem; line-height:1.55; margin:0 0 14px; flex:1; }

.ger123-card__meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }

/* ── Badges ── */
.ger123-badge {
    display:inline-block; font-size:.68rem; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase;
    padding:2px 9px; border-radius:20px; font-family:var(--ger-font);
}
.ger123-badge--new        { background:#DDEAF8; color:#2B5BA8; }
.ger123-badge--active     { background:#D4ECDA; color:#1A6B3A; }
.ger123-badge--deprecated { background:#FEF3C7; color:#92620A; }

.ger123-cat { font-size:.75rem; color:var(--ger-muted); font-weight:500; font-family:var(--ger-font); }

.ger123-meta-pill {
    background:var(--ger-bg); border:1px solid var(--ger-border);
    border-radius:6px; font-size:.75rem; padding:2px 8px;
    color:var(--ger-text); font-family:var(--ger-font); font-weight:500;
}

.ger123-tag {
    display:inline-block; background:var(--ger-bg);
    border:1px solid var(--ger-border); border-radius:4px;
    font-size:.73rem; padding:2px 7px; color:var(--ger-muted);
    margin:2px 2px 0 0; font-family:var(--ger-font);
}

/* ── Buttons ── */
.ger123-btn {
    display:inline-flex; align-items:center; background:var(--ger-blue);
    color:#fff !important; text-decoration:none !important;
    padding:9px 18px; border-radius:7px; font-size:.85rem;
    font-weight:600; font-family:var(--ger-font);
    transition:background .15s; text-align:center;
    border:none; cursor:pointer; letter-spacing:.01em;
}
.ger123-btn:hover { background:var(--ger-blue-mid); color:#fff !important; }
.ger123-btn--full { width:100%; box-sizing:border-box; }
.ger123-btn--download { background:var(--ger-navy); margin-top:16px; }
.ger123-btn--download:hover { background:var(--ger-blue); }
.ger123-btn--copy-json { background:var(--ger-blue-mid); margin-top:10px; font-size:.85rem; font-weight:600; }
.ger123-btn--copy-json:hover { background:var(--ger-blue); }

/* ── Filter Bar ── */
.ger123-filterbar {
    background:var(--ger-card-bg); border:1px solid var(--ger-border);
    border-radius:var(--ger-radius); padding:16px 20px;
    margin-bottom:24px; box-shadow:var(--ger-shadow); font-family:var(--ger-font);
}
.ger123-filterbar__form { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ger123-filterbar__search { flex:1 1 200px; }
.ger123-filterbar__search input[type="search"] {
    width:100%; padding:8px 12px; border:1px solid var(--ger-border);
    border-radius:7px; font-size:.88rem; font-family:var(--ger-font);
    color:var(--ger-text); background:var(--ger-bg);
    box-sizing:border-box; outline:none; transition:border-color .15s;
}
.ger123-filterbar__search input[type="search"]:focus {
    border-color:var(--ger-blue-mid); background:#fff;
    box-shadow:0 0 0 3px rgba(74,127,193,.15);
}
.ger123-filterbar__selects { display:flex; flex-wrap:wrap; gap:8px; }
.ger123-filterbar__selects select {
    padding:8px 10px; border:1px solid var(--ger-border); border-radius:7px;
    font-size:.85rem; font-family:var(--ger-font); color:var(--ger-text);
    background:var(--ger-bg); cursor:pointer; outline:none; transition:border-color .15s;
}
.ger123-filterbar__selects select:focus { border-color:var(--ger-blue-mid); box-shadow:0 0 0 3px rgba(74,127,193,.15); }
.ger123-btn--filter { padding:8px 20px; align-self:stretch; }
.ger123-filter-clear {
    font-size:.83rem; color:var(--ger-muted); text-decoration:none;
    padding:4px 0; white-space:nowrap; transition:color .15s; font-family:var(--ger-font);
}
.ger123-filter-clear:hover { color:var(--ger-blue); }
.ger123-result-count { margin:10px 0 0; font-size:.8rem; color:var(--ger-muted); font-family:var(--ger-font); }
@media(max-width:640px){
    .ger123-filterbar__form{flex-direction:column;align-items:stretch;}
    .ger123-filterbar__selects{flex-direction:column;}
    .ger123-filterbar__selects select{width:100%;}
}

/* ── Single Scenario Page ── */
.ger123-single-wrap { max-width:1100px; margin:0 auto; padding:40px 24px 60px; font-family:var(--ger-font); }
.ger123-single-header { margin-bottom:36px; }
.ger123-single-header__meta { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ger123-single-title { font-size:2rem; font-weight:800; color:var(--ger-text); margin:0 0 20px; line-height:1.15; font-family:var(--ger-font); }
.ger123-single-thumb img { width:100%; max-height:340px; object-fit:cover; border-radius:var(--ger-radius); }
.ger123-single-layout { display:grid; grid-template-columns:1fr 300px; gap:36px; align-items:start; }
@media(max-width:780px){ .ger123-single-layout{grid-template-columns:1fr;} .ger123-single-sidebar{order:-1;} }
.ger123-single-description { font-size:.97rem; line-height:1.75; color:var(--ger-text); }
.ger123-single-main { min-width:0; }

/* ── JSON Block ── */
.ger123-json-block {
    margin-top:36px; border:1px solid var(--ger-border);
    border-radius:var(--ger-radius); overflow:hidden; min-width:0; max-width:100%;
}
.ger123-json-block__header {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 16px; background:var(--ger-navy); color:var(--ger-blue-lite);
    font-size:.75rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; font-family:var(--ger-font);
}
.ger123-copy-btn {
    background:var(--ger-blue); color:#fff; border:none;
    padding:4px 12px; border-radius:5px; font-size:.75rem;
    font-weight:600; cursor:pointer; font-family:var(--ger-font); transition:background .15s;
}
.ger123-copy-btn:hover { background:var(--ger-blue-mid); }
.ger123-json-pre {
    margin:0; padding:20px; background:#0D1F3C; color:var(--ger-blue-lite);
    font-size:.82rem; line-height:1.6; overflow-x:auto; overflow-y:auto;
    max-height:420px; white-space:pre-wrap; word-break:break-all;
    min-width:0; max-width:100%; box-sizing:border-box;
}

/* ── Sidebar Info Card ── */
.ger123-info-card {
    background:var(--ger-card-bg); border:1px solid var(--ger-border);
    border-radius:var(--ger-radius); padding:24px; box-shadow:var(--ger-shadow);
}
.ger123-info-card h3 {
    margin:0 0 18px; font-size:.75rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--ger-blue-mid); font-family:var(--ger-font);
}
.ger123-info-list { margin:0; padding:0; }
.ger123-info-list dt {
    font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ger-muted); font-weight:600; margin:14px 0 2px; font-family:var(--ger-font);
}
.ger123-info-list dt:first-child { margin-top:0; }
.ger123-info-list dd { font-size:.9rem; color:var(--ger-text); font-weight:600; margin:0; padding:0; font-family:var(--ger-font); }
.ger123-tag-list { display:flex; flex-wrap:wrap; gap:4px; }

/* ── Empty state ── */
.ger123-empty { text-align:center; color:var(--ger-muted); padding:48px 0; font-family:var(--ger-font); }

/* ── Deploy button (sidebar) ── */
.ger123-btn--deploy { background:var(--ger-blue-mid); margin-top:10px; }
.ger123-btn--deploy:hover { background:var(--ger-blue); }

/* ── Secondary / ghost button ── */
.ger123-btn--secondary {
    background:var(--ger-bg); color:var(--ger-text) !important;
    border:1px solid var(--ger-border);
}
.ger123-btn--secondary:hover { background:var(--ger-border); }

/* ── SAP version pills ── */
.ger123-version-list { display:flex; flex-wrap:wrap; gap:4px; margin:5px 0 0; }
.ger123-version-pill {
    display:inline-block;
    background:var(--ger-bg); color:var(--ger-navy);
    border:1px solid var(--ger-border); border-radius:20px;
    font-size:.68rem; font-weight:600; padding:2px 9px;
    font-family:var(--ger-font); white-space:nowrap; letter-spacing:.01em;
}

/* ── SAP version warning ── */
.ger123-version-warning {
    margin:8px 0 0; padding:6px 10px;
    background:#FFFBEB; color:#92620A;
    border:1px solid #FDE68A; border-radius:5px;
    font-size:.77rem; font-family:var(--ger-font); font-weight:600; line-height:1.4;
}

/* ── Deploy page ── */
.ger123-deploy-wrap { max-width:600px; margin:0 auto; padding:40px 24px 60px; font-family:var(--ger-font); }
.ger123-deploy-inner { display:flex; flex-direction:column; gap:0; }
.ger123-deploy-block {
    background:var(--ger-card-bg); border:1px solid var(--ger-border);
    border-radius:var(--ger-radius); padding:28px; box-shadow:var(--ger-shadow);
}

/* Status row */
.ger123-deploy-status { display:flex; align-items:center; gap:14px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--ger-border); }
.ger123-deploy-status__icon {
    width:38px; height:38px; flex-shrink:0; border-radius:50%;
    background:#D4ECDA; color:#1A6B3A;
    display:flex !important; align-items:center; justify-content:center;
    line-height:1;
}
.ger123-deploy-status__text { font-size:.85rem; color:var(--ger-muted); line-height:1.45; }
.ger123-deploy-status__text strong { display:block; color:var(--ger-text); font-size:.95rem; margin-bottom:2px; }

/* Proceed button */
.ger123-btn--proceed { background:var(--ger-navy); width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
.ger123-btn--proceed:hover { background:var(--ger-blue); }
.ger123-deploy-note { color:var(--ger-muted); font-size:.82rem; line-height:1.6; margin:10px 0 0; }

/* Adjust section */
.ger123-deploy-adjust { margin-top:24px; padding-top:20px; border-top:1px solid var(--ger-border); }
.ger123-deploy-adjust__heading {
    font-size:.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; color:var(--ger-muted); margin:0 0 4px;
    display:block;
}

/* Option rows */
.ger123-deploy-opt {
    display:flex; align-items:center; gap:14px;
    padding:14px 0; border-top:1px solid var(--ger-border);
}
.ger123-deploy-opt__icon {
    width:36px; height:36px; flex-shrink:0; border-radius:8px;
    background:var(--ger-bg); color:var(--ger-blue-mid);
    display:flex !important; align-items:center; justify-content:center;
    line-height:1;
}
.ger123-deploy-opt__text { flex:1; min-width:0; }
.ger123-deploy-opt__text strong { display:block; font-size:.88rem; color:var(--ger-text); margin-bottom:2px; }
.ger123-deploy-opt__text span { font-size:.8rem; color:var(--ger-muted); line-height:1.4; display:block; }
.ger123-deploy-opt__btn { white-space:nowrap; flex-shrink:0; font-size:.8rem; padding:7px 14px; }

.ger123-deploy-back { margin-top:20px; }
@media(max-width:540px) {
    .ger123-deploy-opt { flex-wrap:wrap; }
    .ger123-deploy-opt__btn { width:100%; box-sizing:border-box; text-align:center; }
}

/* ── Multi-select filter dropdowns ── */
.ger123-ms { position:relative; display:inline-block; font-family:var(--ger-font); }

.ger123-ms__trigger {
    display:flex; align-items:center; gap:6px;
    padding:8px 12px; background:var(--ger-bg);
    border:1px solid var(--ger-border); border-radius:7px;
    font-size:.85rem; font-family:var(--ger-font);
    color:var(--ger-text); cursor:pointer; white-space:nowrap;
    transition:border-color .15s, box-shadow .15s;
}
.ger123-ms__trigger:hover { border-color:var(--ger-blue-mid); }
.ger123-ms__trigger[aria-expanded="true"] {
    border-color:var(--ger-blue-mid);
    box-shadow:0 0 0 3px rgba(74,127,193,.15);
}

.ger123-ms__label { flex:1; overflow:hidden; text-overflow:ellipsis; max-width:180px; }

.ger123-ms__dropdown {
    position:absolute; top:calc(100% + 4px); left:0; z-index:200;
    min-width:180px; max-height:260px; overflow-y:auto;
    background:var(--ger-card-bg); border:1px solid var(--ger-border);
    border-radius:8px; box-shadow:0 6px 20px rgba(43,91,168,.12);
    padding:6px 0;
}

.ger123-ms__opt {
    display:flex; align-items:center; gap:8px;
    padding:7px 14px; font-size:.84rem; color:var(--ger-text);
    cursor:pointer; transition:background .12s; line-height:1.3;
}
.ger123-ms__opt:hover { background:var(--ger-bg); }
.ger123-ms__opt--all {
    font-weight:600; color:var(--ger-blue);
    border-bottom:1px solid var(--ger-border); margin-bottom:4px;
}
.ger123-ms__opt input[type="checkbox"] {
    width:14px; height:14px; flex-shrink:0; cursor:pointer;
    accent-color:var(--ger-blue); margin:0;
}

.ger123-ms__inputs { display:none; }

/* Card version pills spacing */
.ger123-card__versions { margin-top:10px; margin-bottom:16px; }

@media(max-width:640px) {
    .ger123-ms { width:100%; }
    .ger123-ms__trigger { width:100%; box-sizing:border-box; }
    .ger123-ms__dropdown { width:100%; }
}

/* ── Deploy notices ── */
.ger123-deploy-notice {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px 16px;
    border-radius:8px;
    font-size:.9rem;
    line-height:1.5;
    margin-bottom:14px;
}
.ger123-deploy-notice--warn {
    background:#FFF8E6;
    border:1px solid #F5C842;
    color:#7A5C00;
}
.ger123-deploy-notice--warn svg { color:#D4A000; margin-top:1px; }

/* ── Admin bar (show all toggle) ── */
.ger123-deploy-admin-bar {
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 10px;
    background:#f0f4ff;
    border:1px solid #c8d8f0;
    border-radius:6px;
    margin-bottom:12px;
    font-size:.8rem;
}
.ger123-deploy-admin-badge {
    background:#2B5BA8;
    color:#fff;
    border-radius:4px;
    padding:2px 8px;
    font-size:.75rem;
    font-weight:600;
}
.ger123-deploy-admin-toggle {
    color:#2B5BA8;
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
    margin-left:auto;
}

/* ── System picker ── */
.ger123-system-picker { margin-bottom:4px; }
.ger123-system-picker__header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}
.ger123-system-picker__label {
    font-size:.82rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--ger-muted,#6B7F99);
    margin:0 0 8px;
}
.ger123-system-picker__toggles { display:flex; align-items:center; gap:6px; }
.ger123-picker-link {
    background:none;
    border:none;
    color:#2B5BA8;
    font-size:.78rem;
    cursor:pointer;
    padding:0;
    text-decoration:underline;
}
.ger123-system-picker__list {
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:12px;
    border:1px solid #D8E4F0;
    border-radius:8px;
    overflow:hidden;
    max-height:240px;
    overflow-y:auto;
}
.ger123-system-picker__row {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    cursor:pointer;
    border-bottom:1px solid #eef3f9;
    transition:background .12s;
}
.ger123-system-picker__row:last-child { border-bottom:none; }
.ger123-system-picker__row:hover { background:#F5F9FF; }
.ger123-system-picker__row:has(input:checked) { background:#EDF3FC; }
.ger123-system-picker__row input[type="checkbox"] { accent-color:#2B5BA8; width:15px; height:15px; flex-shrink:0; margin:0; }
.ger123-system-picker__row-label { font-weight:600; font-size:.88rem; color:#1A3A6B; white-space:nowrap; }
.ger123-system-picker__row-url   { font-size:.75rem; color:#6B7F99; margin-left:auto; word-break:break-all; text-align:right; }