/* ---------------------------------------------------------
   base.css — Reset, Variablen, Grundlayout
   Farben EXAKT nach Nayax-Screenshots
--------------------------------------------------------- */
:root {
    /* Brand */
    --brand:          #e49e00;   /* Cockpit-Orange */
    --brand-deep:     #c98a00;
    --brand-soft:     #fff4e0;
    --brand-ink:      #111111;

    /* Surfaces */
    --bg:             #F4F5F7;   /* App-Hintergrund */
    --bg-soft:        #F8F9FB;
    --surface:        #FFFFFF;
    --surface-alt:    #FAFAFB;

    /* Sidebar */
    --sidebar-bg:     #434343;
    --sidebar-ink:    #FFFFFF;
    --sidebar-mute:   #B5B5B5;

    /* Borders */
    --border:         #E6E8EC;
    --border-soft:    #EEF0F3;
    --border-strong:  #D4D7DD;

    /* Text */
    --text:           #1A1D23;
    --text-soft:      #b1b1b1;
    --text-mute:      #9CA3AF;

    /* Status */
    --ok:             #22C55E;
    --ok-deep:        #16A34A;
    --danger:         #EF4444;
    --danger-deep:    #DC2626;
    --warn:           #F59E0B;
    --info:           #3B82F6;

    /* Charts */
    --chart-blue:     #1E73E8;
    --chart-teal:     #22B8CF;
    --chart-cyan:     #4DD0E1;
    --chart-purple:   #7C3AED;
    --chart-violet:   #A78BFA;
    --chart-mint:     #2ED3B7;

    /* Radii / Shadow */
    --radius:         10px;
    --radius-lg:      14px;
    --radius-pill:    999px;
    --shadow-xs:      0 1px 2px rgba(17,17,17,.04);
    --shadow-sm:      0 2px 6px rgba(17,17,17,.06);
    --shadow-md:      0 6px 18px rgba(17,17,17,.08);

    --topbar-h:       60px;
    --sidebar-w:      52px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, button, input, select, textarea {
    font-family: 'Outfit', sans-serif;
}
html, body {
    font-size: 13.5px;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}
svg.hgi { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 26px;
    margin: 0 -26px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 11.5px;
    color: var(--text-mute);
    overflow: hidden;
}
.breadcrumb__home {
    display: block;
    opacity: .55;
    transition: opacity .15s;
}
.breadcrumb__home:hover { opacity: 1; }
.breadcrumb__sep {
    color: var(--border-strong);
    font-size: 13px;
    line-height: 1;
    user-select: none;
}
.breadcrumb__item {
    color: var(--text-soft);
    transition: color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
a.breadcrumb__item:hover  { color: var(--text); }
.breadcrumb__item--current {
    color: var(--text);
    font-weight: 500;
}

/* ── Section sub-navigation — lives inside .main, bleeds to full-width ─── */
.subnav {
    padding: 0 26px;
    overflow-x: auto;
    scrollbar-width: none;
    position: static;
    top: var(--topbar-h);
    bottom: 10px;
    z-index: 20;
    /* bleed to edges of .main (compensate side padding) */
    margin: 0 -26px 20px;
}
/* When subnav is present, remove .main top-padding so bar sits flush at top */
.main--has-subnav {
    padding-top: 0;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav__inner {
    display: flex;
    height: 44px;
    align-items: stretch;
    white-space: nowrap;
    gap: 0;
}
.subnav__link {
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-soft);
    border-bottom: 3px solid transparent;
    transition: color .15s;
    white-space: nowrap;
}
.subnav__link:hover { color: var(--text); background: var(--bg-soft); }
.subnav__link.active {
    color: var(--text);
    border-bottom-color: var(--brand);
    font-weight: 600;
}

/* Layout-Grundgerüst */
.layout {
    display: flex;
    min-height: calc(100vh - var(--topbar-h));
}
/* Sidebar bleibt als dunkler Streifen, ohne Icons */
.sidebar { pointer-events: none; }
.main {
    flex: 1;
    padding: 18px 26px 60px;
    min-width: 0;
}
#appContent {
    transition: opacity .22s ease;
}
#appContent.swap-out { opacity: 0; }

.row-link { cursor: pointer; transition: background .15s; }
.row-link:hover { background: var(--bg-soft); }

/* Legacy breadcrumb sub-classes (issue-details, issue-edit) */
.breadcrumb .crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bc-back {
    color: var(--text-mute);
    padding: 4px;
    border-radius: 4px;
}
.bc-back:hover { color: var(--text); background: var(--surface-alt); }
.breadcrumb .crumb { color: var(--text-soft); }
.breadcrumb .crumb.current { color: var(--text); font-weight: 500; }
.breadcrumb .sep { color: var(--text-mute); display: inline-flex; align-items: center; }
.breadcrumb .star { color: var(--brand); margin-left: 2px; display: inline-flex; }
.breadcrumb .right { display: flex; gap: 18px; }
.breadcrumb .right a {
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.breadcrumb .right a:hover { color: var(--text); }

/* Floating Helfer */
.assistance {
    position: fixed;
    right: 0;
    top: 220px;
    background: var(--brand);
    color: var(--brand-ink);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 14px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.fab {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 20;
}