/* ============================================================
   diewarenwirtschaft — Theme Layer
   Überschreibt Bootstrap-Defaults mit Claude-Style.
   Erwartet, dass tokens.css davor geladen wurde.
   ============================================================ */

/* --------------------------------------------------------
   Globale Basis
   -------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-primary);
    background-color: var(--color-bg-tertiary);
}

/* Überschriften für Seitenheader in Übersichten */
.page-heading-serif {
    font-family: var(--font-serif);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xl);
    color: var(--color-text-primary);
    letter-spacing: -0.3px;
}

.page-heading-accent {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xl);
    color: var(--color-text-primary);
    border-left: 3px solid #f97316;
    padding-left: var(--space-3);
}

/* Serif-Überschriften für Seitentitel */
h1, .h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

h2, .h2 {
    font-family: var(--font-sans);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

h3, .h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

h4, .h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

h5, .h5 {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

h6, .h6 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

/* Page-header h3 inside d-flex has mb-0 — flex gap handles spacing */
.d-flex h3.mb-0,
.d-flex h4.mb-0,
.d-flex h5.mb-0,
.d-flex h6.mb-0 {
    margin-bottom: 0 !important;
}

/* --------------------------------------------------------
   Buttons — flach, zurückhaltend
   -------------------------------------------------------- */

.btn {
    --bs-btn-border-radius:    var(--radius-md);
    --bs-btn-font-size:        var(--fs-base);
    --bs-btn-box-shadow:       none;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-border-width:     var(--border-width);
    --bs-btn-padding-x:        14px;
    --bs-btn-padding-y:        6px;
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--color-border-secondary);
    background: transparent;
    color: var(--color-text-primary);
    transition: background var(--transition-fast),
                border-color var(--transition-fast);
    box-shadow: none !important;
}

/* Alle Varianten neutral — keine Bootstrap-Farben */
[class*="btn-"] {
    background: transparent !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

[class*="btn-"]:hover {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

[class*="btn-"]:active,
[class*="btn-"].active {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
    transform: scale(0.98);
    box-shadow: none !important;
}

/* Semantische Buttons — nur im Permission-Kontext farbig */
.permission-btn-group .btn-success {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}
.permission-btn-group .btn-success:hover {
    background: #157347 !important;
    border-color: #146c43 !important;
    color: #fff !important;
}
.permission-btn-group .btn-danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}
.permission-btn-group .btn-danger:hover {
    background: #bb2d3b !important;
    border-color: #b02a37 !important;
    color: #fff !important;
}
/* Spezifisch für E-Mail-gesendet-Zustand im Belegebereich */
.btn-emailed {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}
.btn-emailed:hover {
    background: #157347 !important;
    border-color: #146c43 !important;
    color: #fff !important;
}

[class*="btn-"]:focus-visible {
    box-shadow: 0 0 0 3px var(--color-accent-50) !important;
    outline: none;
}

.btn-sm {
    font-size: var(--fs-sm);
    padding: 4px 10px;
}

/* --------------------------------------------------------
   Cards — flach statt geschattet
   -------------------------------------------------------- */
.card {
    background: var(--color-bg-primary);
    border: var(--border-width) solid var(--color-border-tertiary);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.card-header {
    background: transparent;
    border-bottom: var(--border-width) solid var(--color-border-tertiary);
    padding: var(--space-3) var(--space-5);
    font-weight: var(--fw-medium);
}

.card-body {
    padding: var(--space-4) var(--space-5);
}

/* --------------------------------------------------------
   Tables
   -------------------------------------------------------- */
.table {
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    margin-bottom: 0;
}

.table thead th {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-weight: var(--fw-regular);
    border-bottom: var(--border-width) solid var(--color-border-tertiary);
    padding: 10px 12px;
}

.table tbody td {
    border-top: var(--border-width) solid var(--color-border-tertiary);
    padding: 5px 2px 5px 2px; #10px 12px;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: var(--color-bg-secondary);
}

/* --------------------------------------------------------
   Forms
   -------------------------------------------------------- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea,
.form-control,
.form-select,
.input-group-text {
    font-size: var(--fs-base);
    padding: 7px 12px;
    height: 28px;
    line-height: 1.4;
    border: var(--border-width) solid var(--color-border-secondary);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: none !important;
    transition: border-color var(--transition-fast);
}

.form-select {
    padding: 0px 10px!important;
}

input[type="file"],
input[type="date"]{
    padding: 4px 10px!important;
}

input[type="date"]{
    width: 120px!important;
}


textarea.form-control {
    height: auto;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent-400);
    box-shadow: none !important;
    outline: none;
    background-color: var(--color-bg-primary);
}

input:disabled,
select:disabled,
input[readonly],
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--color-bg-secondary, #f8f7f4);
    opacity: 0.7;
    box-shadow: none !important;
}

.form-label {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    font-weight: var(--fw-regular);
    margin-bottom: var(--space-1);
}

/* --------------------------------------------------------
   Badges — Status-Pills mit passenden Farbfamilien
   -------------------------------------------------------- */
.badge {
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    letter-spacing: 0;
}

.badge.bg-success {
    background: var(--color-bg-success) !important;
    color: var(--color-text-success) !important;
}

.badge.bg-warning {
    background: var(--color-bg-warning) !important;
    color: var(--color-text-warning) !important;
}

.badge.bg-danger {
    background: var(--color-bg-danger) !important;
    color: var(--color-text-danger) !important;
}

.badge.bg-info {
    background: var(--color-bg-info) !important;
    color: var(--color-text-info) !important;
}

.badge.bg-secondary {
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-secondary) !important;
}

/* --------------------------------------------------------
   Navbar — zurückhaltend, Claude-Style
   -------------------------------------------------------- */
.navbar {
    background: var(--color-bg-primary) !important;
    border-bottom: var(--border-width) solid var(--color-border-tertiary);
    padding: 0 var(--space-5);
    min-height: 52px;
}

.navbar-brand {
    font-family: var(--font-serif);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xl);
    color: var(--color-text-primary) !important;
    padding: var(--space-3) 0;
    letter-spacing: -0.3px;
    text-decoration: none !important;
}

.login-split-panel .login-panel-brand,
.login-split-panel .login-panel-brand:hover,
.login-split-panel .login-panel-brand:focus {
    color: var(--color-text-inverse) !important;
}

.navbar-brand-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d85a30 !important;
    margin-left: 2px;
    vertical-align: super;
    font-size: 0;
}

/* Nav-Links (overrides navbar-dark) */
.navbar-dark .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link {
    color: var(--color-text-primary) !important;
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:focus {
    color: var(--color-text-primary) !important;
    background: var(--color-bg-secondary);
    text-decoration: none;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.active {
    color: var(--color-text-primary) !important;
    font-weight: var(--fw-medium);
}

/* Scroll-chevron buttons, navbar instance: the base .tab-scroll-btn styling
   (theme_scroll bar above) was designed for a bordered tab strip - here they sit
   directly in the navbar row, so align to the row's center like the nav-links
   next to them instead of the tab bar's baseline, and match the nav-link's
   rounded hover treatment instead of a plain flat icon. */
.navbar .tab-scroll-container {
    align-items: center;
}

.navbar .tab-scroll-btn {
    width: 22px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: rgba(28, 27, 25, 0.04);
    font-size: 0.8rem;
    border: 1px solid var(--color-bg-secondary);
    color: var(--color-bg-secondary);
}

[data-theme="dark"] .navbar .tab-scroll-btn {
    background: rgba(250, 249, 245, 0.04);
}

.navbar .tab-scroll-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* Toggler (Mobile) */
.nav-toggler-custom {
    border: none;
    background: transparent;
    padding: var(--space-2);
    color: var(--color-text-primary);
    font-size: 1.5rem;
    line-height: 1;
    align-self: flex-start;
    margin-top: var(--space-2);
}

.nav-toggler-custom:focus {
    box-shadow: none;
    outline: none;
}

.nav-toggler-custom .nav-toggler-close { display: none; }
.nav-toggler-custom .nav-toggler-open  { display: inline; }

.nav-toggler-custom[aria-expanded="true"] .nav-toggler-open  { display: none; }
.nav-toggler-custom[aria-expanded="true"] .nav-toggler-close { display: inline; }

/* Mobile Menü — aufgeräumt */
@media (max-width: 991px) {
    .navbar .container-fluid {
        align-items: flex-start;
    }

    .navbar-brand {
        order: 1;
        flex-shrink: 0;
    }

    .nav-toggler-custom {
        order: 2;
        margin-left: auto;
    }

    .navbar-collapse {
        order: 3;
        width: 100%;
        background: var(--theme-navbar-bg, var(--color-bg-primary));
        border-top: var(--border-width) solid var(--color-border-tertiary);
        padding: var(--space-3) 0 var(--space-4);
        margin-top: var(--space-2);
    }

    .navbar .navbar-nav .nav-link {
        padding: var(--space-2) var(--space-4) !important;
        border-radius: 0;
    }

    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link:focus {
        background: rgba(127, 127, 127, 0.15) !important;
        color: var(--theme-navbar-text, var(--color-text-primary)) !important;
    }

    .navbar .dropdown-menu {
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--color-border-tertiary);
        border-radius: 0;
        margin-left: var(--space-4);
        padding-left: var(--space-2);
    }

    .navbar .navbar-nav.ms-auto .nav-item:first-child {
        padding-left: var(--space-4);
    }
}

/* Dropdown-Menus */
.navbar .dropdown-menu {
    background: var(--color-bg-primary);
    border: var(--border-width) solid var(--color-border-tertiary);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(28,27,25,0.08);
    padding: var(--space-2) 0;
    margin-top: var(--space-1);
}

.navbar .dropdown-item {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    padding: 7px var(--space-4);
    border-radius: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.navbar .dropdown-divider {
    border-color: var(--color-border-tertiary);
    margin: var(--space-1) 0;
}

/* Search in Navbar */
.navbar .global-search-field {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-tertiary);
    color: var(--color-text-primary);
    font-size: var(--fs-sm);
}

.navbar .global-search-field:focus {
    background: var(--color-bg-primary);
    border-color: var(--color-accent-400);
    box-shadow: 0 0 0 3px var(--color-accent-50);
}

.navbar .global-search-field::placeholder {
    color: var(--color-text-tertiary);
}

.navbar .global-search-addon {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-tertiary);
    color: var(--color-text-tertiary);
}

/* User-Dropdown Avatar-Link */
.navbar .nav-link.dropdown-toggle {
    gap: var(--space-2);
}

/* Help-Button im Navbar */
.navbar .btn-outline-light {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: transparent;
}

.navbar .btn-outline-light:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

/* --------------------------------------------------------
   Dashboard Widgets — einheitliche Header
   -------------------------------------------------------- */
.widget-header {
    background: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
    border-bottom: var(--border-width) solid var(--color-border-tertiary) !important;
}

.widget-header h6 {
    color: var(--color-text-primary) !important;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
}

.widget-header .btn-close {
    filter: none;
}

/* --------------------------------------------------------
   Links
   -------------------------------------------------------- */
a {
    color: var(--color-text-info);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-400);
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------
   Monospace-Cells für IDs (Artikelnr., Auftragsnr.)
   -------------------------------------------------------- */
.cell-id {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--color-text-info);
}

/* --------------------------------------------------------
   Scrollbars — dezent
   -------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-tertiary);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-secondary);
}

/* --------------------------------------------------------
   List-group active state — accent instead of Bootstrap blue
   -------------------------------------------------------- */
.list-group-item.active,
a.list-group-item.active,
button.list-group-item.active {
    background-color: #d85a30 !important;
    border-color: #d85a30 !important;
    color: #fff !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--color-bg-tertiary, #f5f4f2) !important;
    color: var(--color-text-primary, #1c1b19) !important;
}

/* Nav tabs active state */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #d85a30 !important;
    border-bottom-color: #d85a30 !important;
    border-color: var(--color-border-secondary, #d3d2ce) var(--color-border-secondary, #d3d2ce) #fff;
}

.nav-tabs .nav-link:hover {
    color: #d85a30 !important;
}

.btn-nav-help {
    border: 1px solid currentColor !important;
    color: inherit !important;
    opacity: 0.8;
}

.btn-nav-help:hover {
    opacity: 1;
    background-color: rgba(255,255,255,0.15) !important;
}

/* --------------------------------------------------------
   Scrollable tab bar
   -------------------------------------------------------- */
.tab-scroll-container {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--color-border-secondary, #d3d2ce);
    margin-bottom: 0;
    /* Only relevant when this container is itself a flex item (e.g. inside the navbar
       row) that needs to shrink below its content's natural width - harmless no-op
       everywhere else, since non-flex-item block boxes ignore min-width:auto anyway. */
    min-width: 0;
}

.tab-scroll-inner {
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-scroll-inner::-webkit-scrollbar {
    display: none;
}

.tab-scroll-inner .nav-tabs {
    flex-wrap: nowrap;
    border-bottom: none;
    white-space: nowrap;
}

.tab-scroll-inner .navbar-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.tab-scroll-btn {
    flex-shrink: 0;
    display: none !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 38px;
    background: var(--color-bg-primary, #fff);
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-secondary, #6b6a68);
    transition: color 0.15s;
}

.tab-scroll-btn:hover {
    color: var(--color-accent-400, #d85a30);
}

.tab-scroll-btn.visible {
    display: flex !important;
}