/* ============================================================
   batOS Modal — Shared Styles
   Verbindlicher Standard fuer alle Modals im Projekt.
   Siehe docs/DesignGuide.md fuer die vollstaendige Spezifikation.
   ============================================================ */

/* TomSelect-Dropdowns muessen ueber Bootstrap-Modals liegen.
   Bootstrap: Modal z-index 1055, Backdrop 1050. Wir rendern das Dropdown mit
   dropdownParent:'body' (siehe entity-inline-edit.js), damit es nicht vom
   overflow:hidden des Modal-Containers geclippt wird. Damit es sichtbar bleibt,
   muss der z-index ueber dem Modal liegen. */
body > .ts-dropdown,
.ts-dropdown {
    z-index: 1080 !important;
}

/* ── Bootstrap-Variablen auf Modal-Root ────────────────────── */
.bat-modal {
    --bs-modal-border-radius: 0;
    --bs-modal-inner-border-radius: 0;
    --bs-modal-border-width: 1px;
    --bs-modal-border-color: rgba(0, 0, 0, 0.08);
}

/* ── Design Tokens ─────────────────────────────────────────── */
.bat-modal .modal-content {
    --bat-text-primary: #2d2d2d;
    --bat-text-secondary: #6b7280;
    --bat-text-muted: #9ca3af;
    --bat-border: #e5e7eb;
    --bat-bg-surface: #ffffff;
    --bat-bg-subtle: #f9fafb;
    --bat-brand: #2d2d2d;
    --bat-brand-hover: #1a1a1a;
    --bat-danger: #dc2626;
    --bat-success: #16a34a;

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    background: #ffffff;
}

/* ── Backdrop ──────────────────────────────────────────────── */
.bat-modal.modal.show {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Animation ─────────────────────────────────────────────── */
.bat-modal .modal-dialog {
    transition: transform 150ms ease-out, opacity 150ms ease-out;
}

.bat-modal.fade .modal-dialog {
    transform: translateY(8px);
    opacity: 0;
}

.bat-modal.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

/* ── Header ────────────────────────────────────────────────── */
.bat-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--bat-border);
    background: var(--bat-bg-surface);
}

.bat-modal .modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bat-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bat-modal .modal-title .bat-modal-subtitle {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--bat-text-muted);
}

/* ── Close-Button ──────────────────────────────────────────── */
.bat-modal .btn-close {
    opacity: 0.4;
    transition: opacity 150ms ease;
}

.bat-modal .btn-close:hover {
    opacity: 0.8;
}

/* ── Body ──────────────────────────────────────────────────── */
.bat-modal .modal-body {
    padding: 0;
}

/* ── Tabs ──────────────────────────────────────────────────── */
.bat-modal-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--bat-border);
}

.bat-modal-tabs li {
    margin: 0;
}

.bat-modal-tab {
    display: inline-block;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bat-text-muted);
    text-decoration: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
}

.bat-modal-tab:hover {
    color: var(--bat-text-primary);
}

.bat-modal-tab.active {
    color: var(--bat-text-primary);
    border-bottom-color: var(--bat-brand);
}

/* Tab-Panes */
.bat-modal-tab-pane {
    display: none;
    padding-top: 16px;
}

.bat-modal-tab-pane.active {
    display: block;
}

/* ── Footer ────────────────────────────────────────────────── */
.bat-modal .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--bat-border);
    background: var(--bat-bg-surface);
}

/* ── Footer: 3-Gruppen-Layout ──────────────────────────────── */
.bat-modal-footer-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Grid: Main + Sidebar ──────────────────────────────────── */
.bat-modal-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
}

.bat-modal-main {
    padding: 24px;
    border-right: 1px solid var(--bat-border);
    min-width: 0;
}

.bat-modal-sidebar {
    padding: 20px;
    background: var(--bat-bg-subtle);
}

.bat-modal-sidebar-item {
    margin-bottom: 12px;
}

.bat-modal-sidebar-item:last-child {
    margin-bottom: 0;
}

/* ── Typografie ─────────────────────────────────────────────── */

/* Section-Labels (Uppercase, klein) */
.bat-modal-section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bat-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
}

/* Sidebar-Labels */
.bat-modal-sidebar-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

/* Sidebar-Values (direkt unter Label) */
.bat-modal-sidebar-value {
    font-size: 0.85rem;
    color: var(--bat-text-primary);
}

/* Form-Labels (ueber dem Input) */
.bat-modal-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bat-text-secondary);
    margin-bottom: 4px;
}

/* ── Form Controls ─────────────────────────────────────────── */
.bat-modal .form-control,
.bat-modal .form-select {
    font-size: 0.85rem;
    border: 1px solid var(--bat-border);
    border-radius: 8px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.bat-modal .form-control:focus,
.bat-modal .form-select:focus {
    border-color: var(--bat-brand);
    box-shadow: 0 0 0 3px rgba(45, 45, 45, 0.1);
}

/* ── Sections / Divider ────────────────────────────────────── */
.bat-modal-divider {
    border: 0;
    border-top: 1px solid var(--bat-border);
    margin: 16px 0;
}

/* ── Inline-Karten (z.B. Hinweise) ─────────────────────────── */
.bat-modal-inline-card {
    background: var(--bat-bg-subtle);
    border: 1px solid var(--bat-border);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.bat-modal .bat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    line-height: 1.5;
}

.bat-modal .bat-btn-primary {
    background: var(--bat-primary, #0066cc);
    color: #fff;
    border-color: var(--bat-primary, #0066cc);
}
.bat-modal .bat-btn-primary:hover {
    background: var(--bat-primary-hover, #0052a3);
    border-color: var(--bat-primary-hover, #0052a3);
    color: #fff;
}
.bat-modal .bat-btn-primary:disabled,
.bat-modal .bat-btn-primary[disabled] {
    background: var(--bat-text-muted, #9ca3af);
    border-color: var(--bat-text-muted, #9ca3af);
    cursor: not-allowed;
    opacity: 0.7;
}

.bat-modal .bat-btn-success {
    background: var(--bat-success);
    color: #fff;
    border-color: var(--bat-success);
}
.bat-modal .bat-btn-success:hover {
    opacity: 0.9;
    color: #fff;
}

.bat-modal .bat-btn-ghost {
    background: transparent;
    color: var(--bat-text-secondary);
    border-color: var(--bat-border);
}
.bat-modal .bat-btn-ghost:hover {
    background: var(--bat-bg-subtle);
    color: var(--bat-text-primary);
}

.bat-modal .bat-btn-outline-success {
    background: transparent;
    color: var(--bat-success);
    border-color: var(--bat-success);
}
.bat-modal .bat-btn-outline-success:hover {
    background: var(--bat-success);
    color: #fff;
}

.bat-modal .bat-btn-danger {
    background: transparent;
    color: var(--bat-danger);
    border-color: var(--bat-danger);
}
.bat-modal .bat-btn-danger:hover {
    background: var(--bat-danger);
    color: #fff;
}

/* ── Validierung ───────────────────────────────────────────── */
.bat-modal .bat-field-error {
    font-size: 0.75rem;
    color: var(--bat-danger);
    margin-top: 2px;
    display: none;
}

.bat-modal .bat-field-error.visible {
    display: block;
}

.bat-modal .form-control.is-invalid,
.bat-modal .form-select.is-invalid {
    border-color: var(--bat-danger);
}

/* ── Loading ───────────────────────────────────────────────── */
.bat-modal .bat-btn .spinner-border {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* ── Detail-Sektionen ──────────────────────────────────────── */
.bat-modal-section {
    padding: 16px 24px;
}

.bat-modal-section + .bat-modal-section {
    border-top: 1px solid var(--bat-border);
}

/* ── Section-Label Feintuning ──────────────────────────────── */
.bat-modal-section > .bat-modal-section-label {
    margin-bottom: 8px;
}

/* ── Info-Rows (Label + Wert, nebeneinander) ───────────────── */
.bat-modal-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
}

.bat-modal-info-label {
    font-size: 0.8rem;
    color: var(--bat-text-secondary);
    flex-shrink: 0;
}

.bat-modal-info-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bat-text-primary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bat-modal-info-value.bold {
    font-weight: 700;
}

/* ── Freitext (Notiz, Beschreibungen) ──────────────────────── */
.bat-modal-text {
    font-size: 0.85rem;
    color: var(--bat-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Badges ────────────────────────────────────────────────── */
.bat-modal-badge {
    display: inline-block;
    padding: 0.2em 0.5em;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

.bat-modal-badge-neutral  { background: #e9ecef; color: #495057; }
.bat-modal-badge-success  { background: #d1e7dd; color: #0f5132; }
.bat-modal-badge-info     { background: #cfe2ff; color: #084298; }
.bat-modal-badge-purple   { background: #e8d5f5; color: #6f42c1; }
.bat-modal-badge-cyan     { background: #cff4fc; color: #055160; }
.bat-modal-badge-muted    { background: #d3d3d4; color: #41464b; }

/* ── Tabellen innerhalb Modals ─────────────────────────────── */
.bat-modal-table {
    width: 100%;
    table-layout: fixed;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.bat-modal-table th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bat-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 6px 8px;
    border-bottom: 1px solid var(--bat-border);
}

.bat-modal-table td {
    padding: 5px 8px;
    color: var(--bat-text-primary);
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: break-word;
}

.bat-modal-table tr + tr td {
    border-top: 1px solid #f3f4f6;
}

.bat-modal-table .text-end {
    text-align: right;
}

.bat-modal-table .muted {
    color: var(--bat-text-muted);
}

/* ── Collapse-Gruppe (einheitliche aufklappbare Sektionen) ─── */
.bat-modal-collapse-group {
    margin-top: 16px;
    border-top: 1px solid var(--bat-border);
}

.bat-modal-collapse-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--bat-border);
}

.bat-modal-collapse-item:last-child {
    border-bottom: none;
}

.bat-modal-collapse-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bat-text-muted);
    margin-left: 4px;
}

/* ── Collapsible Sections ──────────────────────────────────── */
.bat-modal-collapse-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bat-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
}

.bat-modal-collapse-trigger:hover {
    color: var(--bat-text-primary);
}

.bat-modal-collapse-chevron {
    font-size: 0.875rem;
    transition: transform 200ms ease;
}

[aria-expanded="true"] .bat-modal-collapse-chevron {
    transform: rotate(90deg);
}

/* ── Main: Klickbare Detail-Links (z.B. Positionen) ────────── */
.bat-modal-detail-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    padding: 8px 12px;
    margin: 0 -12px;
    border-radius: 8px;
    transition: background 150ms ease;
}

.bat-modal-detail-link:hover {
    background: var(--bat-bg-subtle);
    color: inherit;
}

.bat-modal-detail-link i {
    color: var(--bat-text-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ── Sidebar: Klickbare Links ──────────────────────────────── */
.bat-modal-sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 4px 0;
    border-radius: 6px;
    transition: background 150ms ease;
    white-space: nowrap;
}

.bat-modal-sidebar-link .bat-modal-sidebar-label {
    flex-shrink: 0;
}

.bat-modal-sidebar-link .bat-modal-text {
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bat-modal-sidebar-link:hover {
    color: var(--bat-text-primary);
}

/* ── Sidebar-Bloecke (dynamisch gefuellte Aktionen/Erstellen) ─
   Apple-Pattern: Text-Links in System-Blau als einzige Affordance,
   Icon links als Orientierungshilfe. Konsistent zu /Jobs/Details. */
.bat-modal-sidebar-block {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--bat-border, #e5e7eb);
}

.bat-modal-sidebar-block-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bat-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.bat-modal-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bat-modal-sidebar-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 0 -8px;
    width: calc(100% + 16px);
    font-size: 0.825rem;
    font-weight: 500;
    /* System-Blau wie in Jobs/Details (--ed-link) und Billing/CreateV2 (.billing-text-link).
       Hard-codiert, weil --bat-info global auf Cyan (#0891b2) gemapped ist. */
    color: #0066cc;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.bat-modal-sidebar-action:hover {
    background: var(--bat-bg-subtle, #f9fafb);
    color: #004e9e;
}

.bat-modal-sidebar-action i {
    font-size: 15px;
    opacity: 1;
    color: inherit;
    flex-shrink: 0;
}

.bat-modal-sidebar-action.disabled {
    color: var(--bat-text-muted, #9ca3af);
    cursor: not-allowed;
    pointer-events: auto; /* fuer den title-Tooltip */
}

.bat-modal-sidebar-action.disabled:hover {
    background: transparent;
    color: var(--bat-text-muted, #9ca3af);
}

/* Inline-Link innerhalb von Labeltexten (Uebersicht: Kunde/Job als klickbar).
   Gleiche Blau-Konvention wie Sidebar-Actions und Billing/CreateV2. */
.bat-modal-inline-link {
    color: #0066cc;
    text-decoration: none;
    transition: color 120ms ease;
}

.bat-modal-inline-link:hover {
    color: #004e9e;
}

/* ── Sub-Panel (schwebendes Panel ueber der Sidebar) ───────── */
.bat-modal-subpanel {
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    max-height: 100%;
    background: var(--bat-bg-surface, #fff);
    border-left: 1px solid var(--bat-border);
    border-radius: 0 0 12px 0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Sub-Panel positioniert sich relativ zum Body, nicht zum Content */
.bat-modal .modal-body {
    position: relative;
}

.bat-modal-subpanel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bat-border);
}

.bat-modal-subpanel-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bat-modal-grid {
        grid-template-columns: 1fr;
    }

    .bat-modal-main {
        border-right: none;
        border-bottom: 1px solid var(--bat-border);
    }

    .bat-modal-sidebar {
        padding: 16px;
    }
}