/* Shared styles for the Sales (Vertrieb) module - Dashboard, Pipeline, Provisionen, Admin/Sales.
   Namespaced with a "sales-" prefix to avoid clashing with the rest of the app. */

.sales-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary, #004B5C);
    margin-bottom: 4px;
}

.sales-page-subtitle {
    color: #6b7a80;
    margin-bottom: 20px;
}

/* Every Sales/Admin-Sales page shares the app's existing Schooling-page wrapper convention
   (containerSettings + enquiry-section + admin-contractor-div + border-SettingBase/Blue) for the
   30px sidebar gap and page chrome. .sales-box-body is the one Sales-specific addition: it keeps
   the page's own content area from ever causing a page-level horizontal scrollbar - anything that
   overflows (a wide table, a nested Bootstrap .row's negative gutter margins) is clipped here
   instead of widening the page. Wide tables opt back into horizontal scrolling locally via
   .sales-table-scroll below, so no actual content becomes inaccessible. */
.sales-box-body {
    overflow-x: hidden;
}

/* KPI cards */
.sales-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.sales-kpi-card {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e5e9ec;
    border-radius: 14px;
    padding: 18px 20px;
}

.sales-kpi-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.sales-kpi-icon.blue { background: #E3EEF1; color: var(--color-primary, #004B5C); }
.sales-kpi-icon.green { background: #E5F5E7; color: var(--color-green, #4CAF50); }
.sales-kpi-icon.turquoise { background: #E4F4F4; color: var(--color-secondary, #3CA6A6); }

.sales-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary, #004B5C);
    line-height: 1.1;
}

.sales-kpi-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-primary, #004B5C);
}

.sales-kpi-sublabel {
    font-size: 0.78rem;
    color: #8a9498;
}

/* Task status strip */
.sales-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    background: #ffffff;
    border: 1px solid #e5e9ec;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 20px;
}

.sales-stat-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-weight: 600;
    color: var(--color-primary, #004B5C);
    cursor: pointer;
}

.sales-stat-chip .fa-circle-exclamation { color: var(--color-red, #F44336); }
.sales-stat-chip .fa-clock { color: #E08A00; }
.sales-stat-chip .fa-user-check { color: var(--color-secondary, #3CA6A6); }

/* Generic card */
.sales-card {
    background: #ffffff;
    border: 1px solid #e5e9ec;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

.sales-card-title {
    font-weight: 700;
    color: var(--color-primary, #004B5C);
    margin-bottom: 2px;
}

.sales-card-subtitle {
    font-size: 0.82rem;
    color: #8a9498;
    margin-bottom: 14px;
}

/* Tables */
.sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.sales-table th {
    text-align: left;
    color: #8a9498;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 8px 10px;
    border-bottom: 1px solid #e5e9ec;
}

.sales-table td {
    padding: 10px;
    border-bottom: 1px solid #f0f2f3;
    vertical-align: middle;
}

.sales-table tr.clickable-row {
    cursor: pointer;
}

.sales-table tr.clickable-row:hover {
    background: #f7fafb;
}

.sales-table tr.selected-row {
    background: #EAF3F5;
}

/* Status badges */
.sales-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.sales-badge.gray { background: #EEF1F2; color: #5b6a70; }
.sales-badge.blue { background: #DEEAF0; color: var(--color-primary, #004B5C); }
.sales-badge.green { background: #E1F3E3; color: #2e7d32; }
.sales-badge.orange { background: #FDEBD3; color: #B15C00; }
.sales-badge.red { background: #FBE1DF; color: #B32B21; }
.sales-badge.turquoise { background: #DDF1F1; color: #237373; }

/* Buttons */
.sales-btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 16px;
    border: 1px solid transparent;
    cursor: pointer;
}

.sales-btn-primary {
    background: var(--color-primary, #004B5C);
    color: #fff;
}

.sales-btn-primary:hover { opacity: 0.92; color: #fff; }
.sales-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.sales-btn-outline {
    background: #fff;
    color: var(--color-primary, #004B5C);
    border-color: #cfd8db;
}

.sales-btn-outline:hover { background: #f5f7f8; color: var(--color-primary, #004B5C); }

.sales-btn-sm { padding: 4px 10px; font-size: 0.8rem; }

/* Timeline (Verlauf / Prozess) */
.sales-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sales-timeline-item {
    position: relative;
    padding: 0 0 22px 26px;
    border-left: 2px solid #e5e9ec;
    margin-left: 8px;
}

.sales-timeline-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.sales-timeline-dot {
    position: absolute;
    left: -9px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #c7cfd2;
}

.sales-timeline-item.done .sales-timeline-dot {
    background: var(--color-green, #4CAF50);
    border-color: var(--color-green, #4CAF50);
}

.sales-timeline-item.current .sales-timeline-dot {
    background: var(--color-primary, #004B5C);
    border-color: var(--color-primary, #004B5C);
    box-shadow: 0 0 0 3px #DEEAF0;
}

.sales-timeline-title {
    font-weight: 700;
    color: var(--color-primary, #004B5C);
}

.sales-timeline-item.open .sales-timeline-title {
    color: #9aa4a8;
    font-weight: 600;
}

.sales-timeline-date {
    font-size: 0.78rem;
    color: #8a9498;
}

.sales-timeline-comment {
    font-size: 0.85rem;
    color: #4a5559;
    margin-top: 2px;
}

/* Delta indicators */
.sales-delta-up { color: var(--color-green, #4CAF50); font-weight: 700; margin-left: 4px; }
.sales-delta-down { color: var(--color-red, #F44336); font-weight: 700; margin-left: 4px; }
.sales-amount-small { font-size: 0.82rem; color: #4a5559; }
.sales-link-amount { color: var(--color-primary, #004B5C); font-weight: 600; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }
.sales-amount-total { font-weight: 700; color: var(--color-primary, #004B5C); }

/* Simple modal */
.sales-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 30, 40, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    z-index: 1050;
    overflow-y: auto;
}

.sales-modal {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 560px;
}

.sales-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sales-modal-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-primary, #004B5C);
}

.sales-modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #8a9498;
    cursor: pointer;
}

/* Empty states */
.sales-empty-state {
    text-align: center;
    color: #8a9498;
    padding: 32px 12px;
}

/* Responsive */
.sales-table-scroll {
    overflow-x: auto;
}

@media (max-width: 992px) {
    .sales-kpi-card { flex: 1 1 100%; }
}