/* ============================================================
   OfferCalc – Custom Stylesheet
   ============================================================ */

/* ---- Navbar ------------------------------------------------- */
.oc-navbar {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.oc-navbar .navbar-brand,
.oc-navbar .nav-link {
    color: rgba(255,255,255,.9) !important;
    white-space: nowrap;        /* T8: kein Icon/Text-Umbruch */
}
.oc-navbar .nav-link {
    border-radius: 4px;
    margin: 0 1px;              /* T7: kleiner Gap verhindert Verschmelzen */
}
.oc-navbar .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.12);
}
.oc-navbar .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.18);
}

/* ---- Login -------------------------------------------------- */
.oc-login-bg    { background: #f0f4ff; }
.oc-login-card  { border-radius: 12px; }
.oc-brand-icon  { font-size: 3rem; color: #1a237e; }

/* ---- Filter Bar --------------------------------------------- */
.oc-filter-bar  { background: #f8f9fa; border: 1px solid #dee2e6; }

/* ---- Tables ------------------------------------------------- */
.oc-table th    { background: #f8f9fa; font-size: .85rem; font-weight: 600; }

/* ---- Position List ------------------------------------------ */
#positionList   { max-height: calc(100vh - 280px); overflow-y: auto; }
.oc-pos-item    {
    padding: 10px 14px;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background .12s;
}
.oc-pos-item:hover  { background: #f0f4ff; }
.oc-pos-item.active { background: #e8eeff; border-left: 3px solid #1a237e; }
.oc-pos-name    { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* ---- Cost Tabs ---------------------------------------------- */
.oc-cost-tabs   { border-bottom: 1px solid #dee2e6; flex-wrap: nowrap; overflow-x: auto; }
.oc-cost-tabs .nav-link {
    font-size: .82rem;
    padding: 6px 10px;
    color: #495057;
    white-space: nowrap;
}
.oc-cost-tabs .nav-link.active {
    color: #1a237e;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
}

/* ---- Section Headers ---------------------------------------- */
.oc-section-header { border-bottom: 1px dashed #dee2e6; padding-bottom: 4px; }
.oc-item-row       { background: #fafbff; }
.oc-rate-badge     { background: #e8eeff; color: #1a237e; font-size: .78rem; white-space: nowrap; }

/* ---- Position Summary --------------------------------------- */
.oc-pos-summary {
    background: #f8f9fa;
    border-top: 2px solid #dee2e6;
    font-size: .85rem;
}

/* ---- Global Summary ----------------------------------------- */
.oc-total-summary { border-top: 3px solid #1a237e; }
.oc-total-summary .card-body { background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%); }

/* ---- Admin-Navigation (K4 Fix) ------------------------------ */
.oc-admin-nav {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 12px 16px 10px;
}

.oc-admin-nav-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    margin-bottom: 8px;
}

.oc-admin-nav-pills {
    gap: 4px;
    flex-wrap: wrap;
}

.oc-admin-nav-pills .nav-link {
    font-size: .84rem;
    padding: 5px 12px;
    border-radius: 20px;
    color: #495057;
    background: #fff;
    border: 1px solid #dee2e6;
    transition: background .13s, color .13s, border-color .13s;
    line-height: 1.4;
}

.oc-admin-nav-pills .nav-link:hover {
    background: #e8eeff;
    border-color: #c7d3f5;
    color: #1a237e;
}

.oc-admin-nav-pills .nav-link.active {
    background: #1a237e;
    border-color: #1a237e;
    color: #fff;
    font-weight: 600;
}

/* ---- Status-Buttons (Kalkulationseditor) -------------------- */
.oc-status-btn {
    border-radius: 6px;
    font-size: .82rem;
    padding: 5px 12px;
    font-weight: 500;
    transition: opacity .12s;
}
.oc-status-btn:disabled {
    opacity: 1;
    cursor: default;
    pointer-events: none;
}
/* Aktiver Status: Draft (grau) */
.oc-status-btn--draft {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}
/* Aktiver Status: In Prüfung (gelb) */
.oc-status-btn--review {
    background: #ffc107;
    border-color: #ffc107;
    color: #000;
}
/* Aktiver Status: Fertig (grün) */
.oc-status-btn--final {
    background: #198754;
    border-color: #198754;
    color: #fff;
}

/* ---- Inaktive Tabellenzeilen grau (T9) ---------------------- */
.table tr.text-muted td,
.table tr.text-muted th {
    color: #adb5bd !important;
}

/* ---- Footer ------------------------------------------------- */
.oc-footer {
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    font-size: .78rem;
}

/* ---- Utilities ---------------------------------------------- */
.btn-xs {
    padding: 2px 7px;
    font-size: .75rem;
    border-radius: 3px;
}

/* ---- Action-Buttons (Kalkulationsliste) --------------------- */
.oc-action-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.oc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .13s, color .13s, border-color .13s, box-shadow .13s;
    padding: 0;
}

.oc-action-btn:hover {
    background: #f0f4ff;
    border-color: #adb5bd;
    color: #1a237e;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Bearbeiten – leicht blauer Akzent */
.oc-action-btn.oc-action-edit {
    border-color: #c7d3f5;
    color: #1a237e;
    background: #f0f4ff;
}
.oc-action-btn.oc-action-edit:hover {
    background: #dce6ff;
    border-color: #1a237e;
}

/* Löschen – roter Akzent nur beim Hover */
.oc-action-btn.oc-action-delete:hover {
    background: #fff0f0;
    border-color: #f5c2c7;
    color: #dc3545;
}

/* ---- Detail Wrapper (K1 + K2 Fix) --------------------------- */
/* Gemeinsamer Container für Detail-Card und Placeholder.
   Beide Kinder nehmen denselben Platz ein – kein Layout-Sprung. */
.oc-detail-wrapper {
    position: relative;
    min-height: 520px;
    display: flex;
    flex-direction: column;
}

/* Detail-Card: Flexbox-Spalte, wächst in den verfügbaren Platz */
.oc-detail-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* card-body der Detail-Card: Flexbox, damit Tab-Content scrollen kann */
.oc-detail-card .card-body {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Tab-Content: füllt verfügbaren Platz, scrollt intern */
#tabContent {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    /* Kein festes max-height mehr – scrollt innerhalb der Card */
}

/* Placeholder-Card: mindestens genauso hoch wie Detail-Wrapper */
.oc-placeholder-card {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Calc Name Input ---------------------------------------- */
#calcName.form-control {
    font-size: 1.1rem;
    font-weight: 600;
}
#calcName.form-control:focus { border-color: #1a237e; box-shadow: 0 0 0 3px rgba(26,35,126,.1); }

/* ---- Print Adjustments -------------------------------------- */
@media print {
    .oc-navbar, .oc-footer, .btn, .alert { display: none !important; }
    .card { border: 1px solid #ccc !important; box-shadow: none !important; }
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 575px) {
    #positionList   { max-height: 250px; }
    #tabContent     { max-height: 350px; }
}