/* ============================================================================
 * assets/ribbon2.css
 *
 * Zweck: Core-Layout und Basis-Styling für das WH27 Ribbon2-System.
 *
 * Architektur & Verhalten:
 * - Navigation-Grid: Erzwingt das Access-ähnliche Layout für die primäre 
 * Navigationsgruppe (Schließen/Zurück über zwei Zeilen, Pfeile/Pos/Actions 
 * als kompaktes Grid).
 * - Dropdown-Sicherheit: Nutzt `[data-ported="1"]` in Kombination mit JS, um 
 * geöffnete Menüs aus dem Overflow-Container zu lösen (`position: fixed`).
 * - Scroll-Handling: Definiert das Classic Horizontal-Scrollverhalten (`<<` / `>>`), 
 * falls das Ribbon auf kleinen Desktop-Screens umbricht.
 * ============================================================================ */

.wh-ribbon2{
    background: linear-gradient(var(--wh-r2-bg1, #f3f3f3), var(--wh-r2-bg2, #e6e6e6));
    border-bottom: 1px solid var(--wh-r2-border, var(--wh-border));
    padding: 6px 8px 4px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--wh-r2-text, inherit);
    overflow: visible;

}

/* linksbündig */
.wh-ribbon2-inner{
    max-width: none;
    margin: 0;
    padding-left: 8px;
    padding-right: 8px;
    overflow: visible;
}


/* =========================================================
   Classic: Horizontal-Scroll (<< / >>) wenn Ribbon zu breit ist
   ========================================================= */

.wh-ribbon2-scrollwrap{
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.wh-ribbon2-scroll{
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar ausblenden (optisch), Scroll bleibt per Buttons möglich */
.wh-ribbon2-scroll::-webkit-scrollbar{
    height: 0;
}
.wh-ribbon2-scroll{
    scrollbar-width: none;
}

.wh-ribbon2-scrollbtn{
    width: 28px;
    min-width: 28px;
    border: 1px solid var(--wh-r2-border);
    border-radius: 6px;
    background: var(--wh-r2-btn-bg);
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    padding: 0;
} 

.wh-ribbon2-scrollbtn:hover{
    background: var(--wh-r2-btn-bg-hover);
    border-color: var(--wh-r2-tab-border-hover);
}

.wh-ribbon2-scrollbtn:active{
    background: var(--wh-r2-btn-bg-active);
}

.wh-ribbon2-scrollbtn.is-disabled{
    opacity: .35;
    cursor: default;
}

/* Damit Dropdown-Menüs nicht vom Scroll-Container geclippt werden:
   Menü wird per JS temporär "geportet" (position:fixed). */
.wh-ribbon2-menu[data-ported="1"]{
    position: fixed !important;
}

/* =========================================================
   Tabs
   ========================================================= */

.wh-ribbon2-tabs{
    display: flex;
    gap: 2px;
    padding: 0 0 1px 0;
    align-items: flex-end;
}

.wh-ribbon2-tab{
    display: inline-block;
    padding: 4px 5px;
    border: 1px solid var(--wh-r2-border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: var(--wh-r2-tab-bg);
    text-decoration: none;
    color: inherit;
    font-size: 13px;
}

.wh-ribbon2-tab:hover{
    background: var(--wh-r2-tab-bg-hover);
    border-color: var(--wh-r2-tab-border-hover);
}

.wh-ribbon2-tab.is-active{
    background: var(--wh-panel, #ffffff);
    border-color: var(--wh-r2-border, var(--wh-border));
    font-weight: 600;
}


.wh-ribbon2-tab.is-disabled{
    opacity: .45;
    cursor: not-allowed;
}

/* =========================================================
   Gruppen
   ========================================================= */

.wh-ribbon2-groups{
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.wh-ribbon2-group{
    border-right: 1px solid var(--wh-r2-border-soft);
    padding-right: 1px;
}

.wh-ribbon2-group:last-child{
    border-right: none;
}

.wh-ribbon2-group-body{
    padding: 2px 0 0;
    overflow: visible;
}

.wh-ribbon2-group-title{
    text-align: center;
    font-size: 11px;
    color: var(--wh-r2-group-title);
    margin-top: 4px;
    padding: 2px;
    margin: 0px;
	background-color:  rgba(0,0,0,0.08);

}

/* =========================================================
   Buttons
   ========================================================= */

.wh-ribbon2-buttons{
    display: flex;
    gap: 0px;
    align-items: flex-start;
}
.wh-ribbon2-ico{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wh-ribbon2-txt{
    display: block;
    width: 100%;
    text-align: center;

}

/* Subgroups */
.wh-ribbon2-subgroups{
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.wh-ribbon2-subgroup{
    display: flex;
    align-items: flex-start;
}

.wh-ribbon2-btn{
    min-width: 70px;
    max-width:90px;
    min-height: 70px;
    text-decoration: none;
    color: inherit;
    background: var(--wh-r2-btn-bg);
    border: 0px solid var(--wh-r2-border);
    border-radius: 0px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 2px;
    box-sizing: border-box;
    cursor: pointer;

    font-size: 11px;
    line-height: 1.1;
    font-weight: 400;
}

.wh-ribbon2-btn:hover{
    background: var(--wh-r2-btn-bg-hover);
    border-color: var(--wh-r2-tab-border-hover);
}

.wh-ribbon2-btn:active{
    background: var(--wh-r2-btn-bg-active);
}

/* Disabled: nur Opacity */
.wh-ribbon2-btn.is-disabled{
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon – KEIN Grayscale */
.wh-ribbon2-ico{
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 4px;
}

.wh-ribbon2-label{
    text-align: center;
    white-space: normal;
}

/* =========================================================
   Dropdown-Menü (menu buttons)
   WICHTIG: Wrap muss "position:relative" haben,
            damit das Menü NICHT am falschen Container hängt
   ========================================================= */

.wh-ribbon2-menu-wrap{
    position: relative;      /* <<< Bezugspunkt für absolute Menüposition */
    display: inline-block;   /* <<< Breite = Button-Breite */
}

.wh-ribbon2-menu-btn{
    cursor: pointer;
}

.wh-ribbon2-menu-btn.is-disabled{
    cursor: default;
}

.wh-ribbon2-caret{
    margin-left: 8px;
    font-size: 12px;
    opacity: .7;
}

/* Menu Panel */
.wh-ribbon2-menu{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;                 /* <<< direkt unter dem Button */
    min-width: 260px;

    background: var(--wh-r2-menu-bg);
    border: 1px solid var(--wh-r2-menu-border);
    box-shadow: var(--wh-r2-menu-shadow);
    border-radius: 6px;
    padding: 6px 0;

    z-index: 99999;
    display: none;
}

.wh-ribbon2-menu.is-open{
    display: block;
}

/* JS toggles .is-open on the menu BUTTON wrapper (".wh-ribbon2-btn.is-menu") */
.wh-ribbon2-btn.is-menu{
    position: relative; /* anchor absolute .wh-ribbon2-menu */
}
.wh-ribbon2-btn.is-menu.is-open .wh-ribbon2-menu{
    display: block;
}

/* Menu Items */
.wh-ribbon2-menu-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.25;
}

.wh-ribbon2-menu-item:hover{
    background: var(--wh-r2-menu-hover);
}

.wh-ribbon2-menu-item.is-disabled{
    opacity: .45;
    cursor: default;
}

.wh-ribbon2-menu-ico{
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    opacity: .92;
}


/* =========================================================
   Dropdown-Menü (menu buttons) – passend zum echten DOM
   ========================================================= */

/* Der Wrapper IST bei dir der Button-Kachel-Container */
.wh-ribbon2-btn.is-menu{
    position: relative;   /* Anker für absolute .wh-ribbon2-menu */
    padding: 0;           /* sonst doppelte Innenabstände */
}

/* Innerer <button> soll wie die normale Kachel aussehen */
.wh-ribbon2-btn.is-menu .wh-ribbon2-btn-inner{
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: var(--wh-r2-btn-bg);
    border-radius: 6px;
    color: inherit;
    font: inherit;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 2px;
    box-sizing: border-box;
    cursor: pointer;
}


/* Hover / Active wie normale Buttons */
.wh-ribbon2-btn.is-menu:hover .wh-ribbon2-btn-inner{
    background: var(--wh-r2-btn-bg-hover);
}

.wh-ribbon2-btn.is-menu:active .wh-ribbon2-btn-inner{
    background: var(--wh-r2-btn-bg-active);
}


/* Disabled */
.wh-ribbon2-btn.is-menu.is-disabled .wh-ribbon2-btn-inner{
    cursor: not-allowed;
}

/* Caret sichtbar machen (du renderst ein leeres <span>) */
.wh-ribbon2-btn.is-menu .wh-ribbon2-caret::before{
    content: "▾";
}
.wh-ribbon2-btn.is-menu .wh-ribbon2-caret{
    display: block;
    margin-top: 2px;
    line-height: 1;
    opacity: .7;
font-size: 16px;
  position: absolute;
  top: 0px;
  left: 0px;
}

/* Menu open (falls JS .is-open am Wrapper toggelt) */


/* =========================================================
   Access-like Navigation Group (WICHTIG!)
   ========================================================= */

/* Navigation: Pos über Pfeile, Actions rechts (2-Zeilen Grid) */
.wh-ribbon2-group.wh-ribbon2-navgroup .wh-ribbon2-subgroups{
    display: grid !important;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 2px;
    align-items: start;
}

/* Close + Back über beide Zeilen */
.wh-ribbon2-group.wh-ribbon2-navgroup .wh-ribbon2-subgroup.wh-ribbon2-sub-close{
    grid-column: 1;
    grid-row: 1 / span 2;
}
.wh-ribbon2-group.wh-ribbon2-navgroup .wh-ribbon2-subgroup.wh-ribbon2-sub-back{
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* Pos oben, Pfeile unten */
.wh-ribbon2-group.wh-ribbon2-navgroup .wh-ribbon2-subgroup.wh-ribbon2-sub-pos{
    grid-column: 3;
    grid-row: 1;
}
.wh-ribbon2-group.wh-ribbon2-navgroup .wh-ribbon2-subgroup.wh-ribbon2-sub-arrows{
    grid-column: 3;
    grid-row: 2;
}

/* Actions rechts über beide Zeilen */
.wh-ribbon2-group.wh-ribbon2-navgroup .wh-ribbon2-subgroup.wh-ribbon2-sub-actions{
    grid-column: 4;
    grid-row: 1 / span 2;
}

/* Close/Back volle Höhe */
.wh-ribbon2-group.wh-ribbon2-navgroup .wh-ribbon2-subgroup.wh-ribbon2-sub-close,
.wh-ribbon2-group.wh-ribbon2-navgroup .wh-ribbon2-subgroup.wh-ribbon2-sub-back{
    align-self: stretch;
}



/* Pos: "x von y" */
.wh-ribbon2-btn.wh-ribbon2-poslabel{
    width: auto;
	min-width: 135px;
    min-height: 0;
    height: 26px;
    padding: 2px 8px;
    border-radius: 4px;
    flex-direction: row;
    justify-content: center;
    font-size: 12px;
    line-height: 1.1;
    opacity: .75;
    white-space: nowrap;
}

/* Pfeile */
.wh-ribbon2-btn.wh-ribbon2-navsmall{
    margin-top: 14px;
    min-width: 25px;
    width: 34px;
    min-height: 0;
    height: 25px;
    padding: 0;
    border-radius: 4px;
    flex-direction: row;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

/* Actions: untereinander, kompakt, Icon links + Text rechts */
.wh-ribbon2-group.wh-ribbon2-navgroup .wh-ribbon2-subgroup.wh-ribbon2-sub-actions .wh-ribbon2-buttons{
    display: flex;
    flex-direction: column;
    gap: 1px !important;
    align-items: stretch;
}

.wh-ribbon2-group.wh-ribbon2-navgroup
  .wh-ribbon2-subgroup.wh-ribbon2-sub-actions
  .wh-ribbon2-buttons
  > a.wh-ribbon2-btn,
.wh-ribbon2-group.wh-ribbon2-navgroup
  .wh-ribbon2-subgroup.wh-ribbon2-sub-actions
  .wh-ribbon2-buttons
  > span.wh-ribbon2-btn{
    display: ruby;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;

    padding: 2px 6px !important;
    min-height: 20px !important;

    font-size: 12px !important;
    line-height: 1.0 !important;
    white-space: nowrap;
}

.wh-ribbon2-group.wh-ribbon2-navgroup
  .wh-ribbon2-subgroup.wh-ribbon2-sub-actions
  .wh-ribbon2-buttons
  > a.wh-ribbon2-btn .wh-ribbon2-ico,
.wh-ribbon2-group.wh-ribbon2-navgroup
  .wh-ribbon2-subgroup.wh-ribbon2-sub-actions
  .wh-ribbon2-buttons
  > span.wh-ribbon2-btn .wh-ribbon2-ico{
    width: 14px !important;
    height: 14px !important;
    margin-right: 1px !important;
    margin-left: 0 !important;
    flex: 0 0 auto;
}

/* Sub-Actions: Text rechts vom Icon darf NICHT als Block/100% laufen */
.wh-ribbon2-group.wh-ribbon2-navgroup
  .wh-ribbon2-subgroup.wh-ribbon2-sub-actions
  .wh-ribbon2-buttons
  > a.wh-ribbon2-btn .wh-ribbon2-txt,
.wh-ribbon2-group.wh-ribbon2-navgroup
  .wh-ribbon2-subgroup.wh-ribbon2-sub-actions
  .wh-ribbon2-buttons
  > span.wh-ribbon2-btn .wh-ribbon2-txt{
    display: inline-block !important;
    width: auto !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}





/* =========================================================
   Overflow-Sicherheit (Dropdown darf nicht geclippt werden)
   ========================================================= */

.wh-ribbon2,
.wh-ribbon2-inner,
.wh-ribbon2-group-body{
    overflow: visible !important;
    position: relative;
    z-index: 1000;
}



/* =========================================================
   Classic Ribbon Horizontal-Scroll (<< / >>)
   ========================================================= */

.wh-ribbon2-scroll{
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.wh-ribbon2-scroll-viewport{
    overflow-x: auto;
    overflow-y: visible;
    flex: 1 1 auto;

    /* Scrollbar optional “leiser” */
    scrollbar-width: thin;
}

.wh-ribbon2-scroll-btn{
    flex: 0 0 auto;
    width: 34px;
    min-width: 34px;

    border: 1px solid var(--wh-r2-border);
    background: var(--wh-r2-btn-bg);
    border-radius: 6px;

    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.wh-ribbon2-scroll-btn:disabled{
    opacity: .35;
    cursor: default;
}