/* =====================================================
   MACHINE PRICE CALCULATOR - STYLES
   Version: 1.0.0 - Initial Release
   Last Updated: 2026-01-24
   ===================================================== */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Calibri', 'Arial', sans-serif;
    background: #f5f5f5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header {
    background: white;
    padding: 20px 40px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-info h1 {
    font-size: 1.5rem;
    color: #0078c1;
    font-weight: 300;
    margin-bottom: 3px;
}

.company-info p {
    color: #7F7F7F;
    font-size: 0.85rem;
    font-style: italic;
}

/* Navigation */
.nav {
    display: flex;
    gap: 15px;
}

.nav-link {
    color: #0078c1;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.nav-link:hover {
    background: #e8f4ff;
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 30px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf0 100%);
}

.container {
    max-width: 1800px;
    margin: 0 auto;
}

/* Action Bar */
.action-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.spacer {
    flex: 1;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-primary {
    background: #0078c1;
    color: white;
}

.btn-primary:hover {
    background: #005a9c;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #f0f0f0;
    color: #333;
}

.btn-secondary:hover {
    background: #e0e0e0;
}

.btn-export {
    background: #28a745;
    color: white;
}

.btn-export:hover {
    background: #218838;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Dynamic field groups (Project Information / Additional Details) */
.field-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 20px;
}

.field-group .form-group {
    margin-bottom: 0;
}

.field-group-bottom-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}

/* Cards */
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

.card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2 {
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
}

.card-header h3 {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

.card-actions {
    display: flex;
    gap: 8px;
}

.card-body {
    padding: 20px;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-input,
.form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #0078c1;
}

.form-input[readonly] {
    background: #f8f8f8;
    color: #666;
}

.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: #999;
    font-style: italic;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
    position: absolute;
    z-index: 100;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: calc(100% - 24px);
}

.autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: #e8f4ff;
}

.autocomplete-item strong {
    color: #0078c1;
}

.autocomplete-empty {
    padding: 10px 12px;
    color: #999;
    font-style: italic;
    text-align: center;
}

/* Summary Card */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.summary-row:last-child {
    border-bottom: none;
    padding-top: 15px;
    font-size: 1.1rem;
}

.summary-row span {
    color: #666;
    font-size: 0.9rem;
}

.summary-row strong {
    color: #0078c1;
    font-size: 1rem;
}

/* Calculation Table */
/* Kein overflow-x auf breiten Schirmen: sonst wird der Wrapper zum
   Scroll-Container und der sticky Tabellenkopf klebt an ihm statt am
   Fenster -- also gar nicht. Auf schmalen Schirmen ist waagrechtes
   Scrollen wichtiger als der mitlaufende Kopf. */
.calc-table-wrapper {
    overflow-x: visible;
}

@media (max-width: 1200px) {
    .calc-table-wrapper {
        overflow-x: auto;
    }
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.calc-table thead {
    background: #f8f8f8;
}

/* Der Kopf laeuft beim Scrollen mit, damit man bei Zeile 40 noch weiss,
   in welcher Spalte der Haken sitzt. Der Hintergrund muss auf die Zelle
   (nicht nur auf thead), sonst scheinen die Zeilen durch; die Trennlinie
   als inset-Schatten, weil border-bottom bei border-collapse mit sticky
   verschwindet. */
.calc-table th {
    padding: 12px 10px;
    text-align: left;
    color: #666;
    font-weight: 600;
    font-size: 0.85rem;
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8f8f8;
    box-shadow: inset 0 -2px 0 #ddd;
}

/* Ziehen zum Umsortieren */
.drag-handle {
    cursor: grab;
    background: none;
    border: none;
    color: #bbb;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 6px;
    margin-right: 2px;
}

.drag-handle:hover {
    color: #1565c0;
}

.calc-table tbody tr.dragging {
    opacity: 0.4;
}

.calc-table tbody tr.drop-before td {
    box-shadow: inset 0 3px 0 #1565c0;
}

.calc-table tbody tr.drop-after td {
    box-shadow: inset 0 -3px 0 #1565c0;
}

.calc-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.calc-table tbody tr:hover {
    background: #f9f9f9;
}

.calc-table tbody tr.block-row {
    background: #f0f7ff;
    font-weight: 600;
}

.calc-table tbody tr.block-row:hover {
    background: #e6f2ff;
}

.calc-table tbody tr.assembly-row {
    background: #fff9e6;
}

.calc-table tbody tr.grand-total-row {
    background: #e3f2fd;
    font-weight: 700;
    font-size: 1.05rem;
    border-top: 2px solid #1565c0;
}

.calc-table tbody tr.grand-total-row:hover {
    background: #e3f2fd;
}

.calc-table tbody tr.empty-state {
    background: transparent;
}

.calc-table tbody tr.empty-state:hover {
    background: transparent;
}

/* Table Actions */
.table-action-btn {
    background: none;
    border: none;
    color: #0078c1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.table-action-btn:hover {
    background: #e8f4ff;
}

.table-action-btn.delete {
    color: #dc3545;
}

.table-action-btn.delete:hover {
    background: #ffe6e6;
}

/* Responsive */
@media (max-width: 900px) {
    .field-group-bottom-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .action-bar {
        flex-wrap: wrap;
    }

    .calc-table {
        font-size: 0.8rem;
    }

    .calc-table th,
    .calc-table td {
        padding: 8px 6px;
    }
}

/* Modal (basic structure, will be enhanced) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 8px;
    padding: 30px;
    max-width: 900px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

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

.modal-header h3 {
    font-size: 1.3rem;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.modal-close:hover {
    background: #f0f0f0;
    color: #333;
}

.modal-body {
    margin-bottom: 20px;
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

/* Article Results */
.article-results {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-top: 10px;
}

.article-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.article-item:last-child {
    border-bottom: none;
}

.article-item:hover {
    background: #f8f9fa;
}

.article-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.article-item-header strong {
    color: #0078c1;
    font-size: 0.95rem;
}

.article-price {
    color: #28a745;
    font-weight: 500;
    font-size: 0.9rem;
}

.article-item-desc {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.article-item-category {
    color: #999;
    font-size: 0.8rem;
    font-style: italic;
}

.article-loading,
.article-empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-style: italic;
}

.article-more {
    padding: 10px 15px;
    background: #f8f9fa;
    color: #666;
    font-size: 0.85rem;
    text-align: center;
    border-top: 1px solid #e0e0e0;
}