/* ==========================================================================
   innometics-ci-bootstrap4.css
   Bootstrap 4 Overrides + Zusatzklassen (Innometics CI)
   Ziel: Bootstrap-Komponenten automatisch im Innometics-Look rendern
   ========================================================================== */

/* -----------------------------
   0) Tokens
------------------------------ */
:root {
    --im-font: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --im-brown: #d6d2c8;
    /* Logo Braun */
    --im-brown-dark: #806358;
    /* Headings (alt) */
    --im-text: #4D4D4D;
    /* Schrift Shop */
    --im-bg: #F8F8F8;
    /* Beige Hintergrund */

    --im-border: rgba(77, 77, 77, .20);
    --im-focus: 0 0 0 .2rem rgba(167, 138, 128, .25);

    --im-primary: var(--im-brown-dark);
    --im-primary-hover: #94776D;

    --im-success: #198754;
    --im-warning: #FFC107;
    --im-danger: #a84f58;
    --im-danger-bg: rgb(117, 27, 38);

    --im-radius: 6px;
    --im-radius-lg: 10px;
}

/* -----------------------------
   1) Global: Font + Base
------------------------------ */
html,
body {
    font-family: var(--im-font) !important;
    color: var(--im-text);
    background: var(--im-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--im-brown-dark);
    font-weight: 500;
}

/* Links wie im Portal (klassisch blau) */
a {
    color: #0B5ED7;
}

a:hover {
    color: #094DB3;
}

/* -----------------------------
   2) Bootstrap Buttons
   Agent-Hinweis:
   - Nutze normale Bootstrap Klassen: btn btn-primary/secondary/...
   - Für Logout: btn-outline-danger
------------------------------ */
.btn {
    font-family: var(--im-font);
    font-weight: 500;
    border-radius: var(--im-radius);
    padding: .42rem .85rem;
    line-height: 1.2;
}

.btn:focus,
.btn.focus {
    box-shadow: var(--im-focus);
}

.btn-primary {
    background-color: var(--im-primary);
    border-color: rgba(0, 0, 0, .08);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--im-primary-hover);
    border-color: rgba(0, 0, 0, .10);
    color: #fff;
}

.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
    background-color: #8E7066;
    border-color: rgba(0, 0, 0, .12);
}

.btn-secondary {
    background-color: #6C757D;
    /* “Passwort ändern”-Grau */
    border-color: #6C757D;
}

.btn-secondary:hover {
    background-color: #5C636A;
    border-color: #5C636A;
}

.btn-success {
    background-color: var(--im-success);
    border-color: var(--im-success);
}

.btn-warning {
    background-color: var(--im-warning);
    border-color: var(--im-warning);
    color: #111;
}

.btn-danger {
    background-color: var(--im-danger);
    border-color: var(--im-danger);
}

/* Logout im Header: rot umrandet */
.btn-outline-danger {
    background-color: var(--im-danger-bg);
    color: var(--im-danger);
    border-color: rgba(220, 53, 69, .60);
}

.btn-outline-danger:hover {
    background-color: rgba(220, 53, 69, .08);
    color: var(--im-danger);
}

/* Optional: Buttons im Header etwas kompakter */
.im-headerbar .btn {
    padding: .35rem .75rem;
    border-radius: 6px;
}

/* Admin: Mail-Aktion Split-Button */
.btn-custom-activation {
    --bs-btn-color: #212529;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #dee2e6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0a58ca;
    min-width: 120px;
}

.btn-split-narrow.dropdown-toggle-split {
    --bs-btn-color: #212529;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #dee2e6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0a58ca;
    min-width: 0;
    width: 1.8rem;
    padding-left: 0;
    padding-right: 0;
}

/* -----------------------------
   3) Bootstrap Forms (Inputs/Selects/Checkbox)
   Agent-Hinweis:
   - Nutze form-control, custom-select, form-check-input
------------------------------ */
.form-control,
.custom-select {
    border-radius: var(--im-radius);
    border-color: rgba(77, 77, 77, .25);
    color: var(--im-text);
    background-color: #fff;
}

.form-control:focus,
.custom-select:focus {
    border-color: rgba(167, 138, 128, .55);
    box-shadow: var(--im-focus);
}

label,
.col-form-label {
    font-weight: 500;
    color: var(--im-brown-dark);
}

/* Bootstrap4 Checkbox/Radio */
.form-check-input {
    cursor: pointer;
}

.form-check-input:focus {
    box-shadow: var(--im-focus);
}

/* Optional: custom-control (falls du custom-checkbox nutzt) */
.custom-control-input:focus~.custom-control-label::before {
    box-shadow: var(--im-focus);
    border-color: rgba(167, 138, 128, .55);
}

.custom-control-input:checked~.custom-control-label::before {
    background-color: var(--im-brown);
    border-color: var(--im-brown);
}

/* -----------------------------
   4) Bootstrap Tables (Admin "Kunden aktivieren")
   Agent-Hinweis:
   - Nutze table, thead-light, table-striped
------------------------------ */
.table {
    color: var(--im-text);
}

/* Rahmen/Box-Look wie im Screenshot */
.table.im-table-card {
    background: rgba(255, 255, 255, .25);
    border: 1px solid rgba(77, 77, 77, .20);
    border-radius: var(--im-radius-lg);
    overflow: hidden;
}

/* thead */
.table thead th {
    background: rgba(255, 255, 255, .35);
    border-bottom: 1px solid rgba(77, 77, 77, .20);
    font-weight: 600;
}

/* td borders weicher */
.table td,
.table th {
    border-top: 1px solid rgba(77, 77, 77, .12);
}

/* Kundenverwaltung: Kundennummer-Spalte etwas luftiger */
.customers-activation-table th:first-child,
.customers-activation-table td:first-child {
    padding-left: 1.25rem;
}

/* Zebra dezenter */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .04);
}

/* -----------------------------
   5) Badges (Counts 2/8 etc.)
   Agent-Hinweis:
   - Nutze badge badge-pill + badge-success/warning/info
------------------------------ */
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .35em .65em;
}

.badge-success {
    background-color: rgba(25, 135, 84, .18);
    color: #0F3B27;
}

.badge-warning {
    background-color: rgba(255, 193, 7, .35);
    color: #3D2D00;
}

.badge-info {
    background-color: rgba(23, 162, 184, .22);
    color: #004E5F;
}

/* -----------------------------
   6) Alerts (hellblaues Info-Band)
   Agent-Hinweis:
   - Nutze alert alert-info + dismissible
------------------------------ */
.alert {
    border-radius: var(--im-radius);
}

.alert-info {
    background-color: #D9F3FF;
    border-color: rgba(0, 153, 204, .25);
    color: #004E5F;
}

/* Close-Button im Alert etwas “leichter” */
.alert .close {
    opacity: .65;
}

.alert .close:hover {
    opacity: 1;
}

/* -----------------------------
   7) Cards / Panels (Portal-Flächen)
   Agent-Hinweis:
   - Nutze card, card-header, card-body
------------------------------ */
.card {
    border-radius: var(--im-radius-lg);
    border-color: rgba(77, 77, 77, .18);
    background: rgba(255, 255, 255, .35);
}

.card-header {
    background: rgba(255, 255, 255, .30);
    border-bottom: 1px solid rgba(77, 77, 77, .18);
    font-weight: 600;
    color: var(--im-text);
}

.card-title {
    color: var(--im-brown-dark);
    font-weight: 500;
}

/* -----------------------------
   8) Navbar / Headerbar (Service Portal)
   Agent-Hinweis:
   - Setze oben eine .navbar.im-headerbar
   - Brand links, Buttons rechts
------------------------------ */
.navbar.im-headerbar {
    background: var(--im-brown);
    padding: .55rem 1rem;
}

.navbar.im-headerbar .navbar-brand {
    color: #fff;
    font-weight: 500;
    letter-spacing: .25em;
    /* INNOMETICS-Feeling */
    text-transform: uppercase;
}

.navbar.im-headerbar .navbar-text,
.navbar.im-headerbar .nav-link {
    color: rgba(255, 255, 255, .95);
}

/* -----------------------------
   9) Accordion (Aufträge-Liste)
   Agent-Hinweis:
   - Bootstrap4 Collapse:
     .card + .collapse, Header klickbar
   - Gib dem Wrapper: .im-accordion
------------------------------ */
.im-accordion .card {
    margin-bottom: .75rem;
}

.im-accordion .card-header {
    cursor: pointer;
}

.im-accordion .card-header .btn {
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--im-text);
    font-weight: 600;
    text-decoration: none;
}

.im-accordion .card-header .btn:hover {
    text-decoration: none;
    opacity: .9;
}

/* Inhalt (PDF-Linkliste) */
.im-filelist {
    margin: 0;
    padding-left: 1.1rem;
}

.im-filelist li {
    margin: .35rem 0;
}

/* -----------------------------
   10) Utility: Portal Page Layout
------------------------------ */
.im-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 18px;
}

.im-page-title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Optional: “beige” Section hinter Header */
.im-page-bg {
    background: var(--im-bg);
}