/* =======================================================
   1. GRUNDLAYOUT & TYPOGRAFIE (GLOBAL)
   ======================================================= */
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f7f6; }
h1 { color: #333; }

/* =======================================================
   2. GLOBALE FORMULAR-ELEMENTE (Ermöglicht einheitlichen Look)
   ======================================================= */
input[type="text"], input[type="number"], input[type="url"], input[type="month"], select, textarea { 
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; font-family: inherit;
}
textarea { resize: vertical; min-height: 80px; }
label { display: block; font-weight: bold; margin-bottom: 5px; color: #555; font-size: 14px; }
.form-group { margin-bottom: 15px; }

/* Globale Erfolgsmeldung */
.success-msg { display: none; background: #d4edda; color: #155724; padding: 15px; border-radius: 4px; margin-bottom: 15px; font-weight: bold; text-align: center; }

/* =======================================================
   3. GLOBALE BUTTONS
   ======================================================= */
.btn { padding: 6px 10px; text-decoration: none; border-radius: 4px; color: white; font-size: 13px; display: inline-block; border: none; cursor: pointer; font-weight: bold; }
.btn-order { background-color: #28a745; }
.btn-order.disabled { background-color: #ccc; pointer-events: none; }
.btn-details { background-color: #17a2b8; font-size: 11px; padding: 4px 6px; margin-top: 4px; width: 100%; box-sizing: border-box; }
.btn-transfer { background-color: #ffc107; color: #000; width: 100%; padding: 10px; }
.btn-back { background-color: #6c757d; margin-top: 15px; width: 100%; text-align: center; box-sizing: border-box; padding: 12px; font-size: 16px; }

/* Farb-Utility Buttons */
.btn-blue { background-color: #007BFF; padding: 10px 15px; }
.btn-green { background-color: #28a745; padding: 10px 15px; }
.btn-red { background-color: #dc3545; padding: 5px 10px; font-size: 12px; }
.btn-gray { background-color: #6c757d; padding: 10px 15px; }
.btn-gold { background-color: #ffc107; color: #000; width: 100%; padding: 10px 15px; border: 1px solid #d39e00; }

/* =======================================================
   4. INVENTAR-TABELLE (inventory-index.html)
   ======================================================= */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 20px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 8px; }
table#inventoryTable { margin-top: 0; width: 100% !important; min-width: 900px; border-collapse: collapse; table-layout: fixed; }
th { background-color: #007BFF; color: white; font-size: 14px; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 2px rgba(0,0,0,0.1); padding: 8px; text-align: left; }
td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; vertical-align: middle; word-wrap: break-word; overflow: hidden; }

.row-main-cat { background-color: #e2e8f0; cursor: pointer; transition: background 0.2s; }
.row-main-cat:hover { background-color: #cbd5e1; }
.row-sub-cat { background-color: #f1f5f9; cursor: pointer; transition: background 0.2s; }
.row-sub-cat:hover { background-color: #e2e8f0; }
.toggle-icon { display: inline-block; width: 20px; transition: transform 0.2s; }
.is-open .toggle-icon { transform: rotate(90deg); }

.center { text-align: center; }
.item-img { max-width: 50px; max-height: 50px; border-radius: 4px; object-fit: cover; cursor: zoom-in; }
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; border: 1px solid #ccc; }
.warning-icon { margin-left: 5px; font-size: 14px; cursor: help; }
.split-cell { display: flex; justify-content: space-around; width: 100%; font-weight: bold; }
.split-cell .use-val { color: #888; font-weight: normal; }
#inventoryTable td:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.col-dist { display: none; }
table.show-dist .col-dist { display: table-cell; }

/* Modals */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center; }
.modal-content { background: #fff; padding: 20px; border-radius: 8px; max-width: 500px; width: 90%; box-shadow: 0 4px 15px rgba(0,0,0,0.5); position: relative; }
.modal-content.img-modal { background: transparent; box-shadow: none; max-width: 90%; max-height: 90%; text-align: center; }
.modal-content.img-modal img { max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.8); }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #333; }
.close-btn-img { color: #fff; right: 35px; top: 20px; position: absolute; font-size: 40px; font-weight: bold; }
.transfer-box { background: #f8f9fa; border: 1px solid #ddd; padding: 15px; border-radius: 6px; margin-top: 15px; }
.transfer-box select, .transfer-box input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.transfer-row { display: flex; gap: 10px; }
.transfer-row > div { flex: 1; }
.loc-list { list-style: none; padding: 0; margin: 0 0 15px 0; }
.loc-list li { background: #e9ecef; margin-bottom: 5px; padding: 8px; border-radius: 4px; font-size: 13px; display: flex; justify-content: space-between; }

/* Split-Screen Logik (1/3 vs 2/3) */
.app-container { display: flex; flex-direction: column; gap: 20px; height: calc(100vh - 120px); }
.left-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; transition: all 0.4s ease; }
.right-pane { display: none; transition: all 0.4s ease; }
/* Schrankmanager auf ALLEN Bildschirmen ausblenden, wenn Verteilung offen ist */
body.dist-open .right-pane { display: none !important; } 
body.dist-open #btnLocationsMobile { display: inline-block !important; }

/* =======================================================
   RESPONSIVE TABELLE (Verteilungs-Modus)
   ======================================================= */
@media (min-width: 1400px) {
    .app-container { flex-direction: row; }
    .left-pane { flex: 2; }
    .right-pane { display: block; flex: 1; background: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); overflow: hidden; position: relative; }
    .app-container.editor-active .left-pane { flex: 1; }
    .app-container.editor-active .right-pane { flex: 2; }
    #btnLocationsMobile { display: none !important; }
}

/* 1. Stufe: Normale Info-Spalte ausblenden */
@media (max-width: 1399px) { 
    table.show-dist .col-info { display: none; } 
}

/* 2. Stufe: Aktion & Gruppe ausblenden, um Platz für die Zimmer zu machen */
@media (max-width: 1200px) {
    table.show-dist .col-action { display: none; }
    table.show-dist .col-group { display: none; }
}

@media (max-width: 1650px) { 
    body.dist-open .right-pane { display: none !important; } 
    body.dist-open #btnLocationsMobile { display: inline-block !important; } 
}

/* =======================================================
   5. SCHRANKMANAGER (locations.html)
   ======================================================= */
body.locations-page { height: 95vh; display: flex; flex-direction: column; }
body.locations-page .header { margin-bottom: 20px; }
body.locations-page .header-buttons { display: flex; gap: 10px; }
body.locations-page .main-grid { display: flex; gap: 20px; flex: 1; min-height: 0; align-items: flex-start; }
body.locations-page .left-panel { flex: 1; background: white; padding: 20px; border-radius: 8px; overflow-y: auto; }
body.locations-page .right-panel { flex: 1; background: white; padding: 20px; border-radius: 8px; overflow-y: auto; display: none; border-left: 2px solid #eee; }
body.locations-page .controls { display: flex; gap: 15px; margin-bottom: 20px; }
body.locations-page #svgContainer { border: 1px solid #ddd; background: #fafafa; border-radius: 4px; padding: 10px; text-align: center; margin-bottom: 20px; }
body.locations-page #svgContainer svg { max-width: 100%; height: auto; }
body.locations-page #svgContainer svg [id] { cursor: pointer; transition: all 0.2s; }
body.locations-page #svgContainer svg [id]:hover { opacity: 0.7; outline: 3px solid #007BFF; }
body.locations-page .active-drawer rect, path, polygon {fill: rgba(40, 167, 69, 0.4) !important;}
body.locations-page .cabinet-photo { max-width: 100%; border-radius: 4px; display: none; }
body.locations-page .editor-section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
body.locations-page .image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
body.locations-page .img-slot { border: 1px dashed #ccc; padding: 5px; text-align: center; border-radius: 4px; position: relative; }
body.locations-page .img-slot img { max-width: 100%; max-height: 100px; object-fit: contain; }
body.locations-page .contains-list { list-style: none; padding: 0; }
body.locations-page .contains-list li { background: #e9ecef; padding: 8px; margin-bottom: 5px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
body.locations-page .uniform-warning { background: #fff3cd; color: #856404; padding: 15px; border-radius: 4px; margin-bottom: 15px; font-size: 13px; font-weight: bold; display: none; border: 1px solid #ffeeba; }

@media (max-width: 1000px) {
    body.locations-page .main-grid { flex-direction: column; }
    body.locations-page .left-panel, body.locations-page .right-panel { width: 100%; box-sizing: border-box; border-left: none; }
}

/* =======================================================
   6. ZUORDNUNG & GRUPPEN (zuordnung.html)
   ======================================================= */
body.zuordnung-page .container { background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 800px; margin: 40px auto; }
body.zuordnung-page .loc-row { display: flex; gap: 15px; margin-bottom: 15px; align-items: flex-end; flex-wrap: wrap;}
body.zuordnung-page .loc-row > div { flex: 1; min-width: 150px; }
body.zuordnung-page .loc-item { background: #e2e8f0; padding: 10px 15px; margin-bottom: 8px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid #007BFF; }
body.zuordnung-page .loc-item.tag { border-left-color: #e83e8c; background: #fdf2f8;}
body.zuordnung-page .multi-mode-banner { background: #fff3cd; color: #856404; padding: 15px; border-radius: 4px; font-weight: bold; margin-bottom: 20px; text-align: center; border: 1px solid #ffeeba;}
body.zuordnung-page .section-box { border: 1px solid #eee; padding: 20px; border-radius: 6px; margin-bottom: 25px; background: #fafafa;}
body.zuordnung-page .dynamic-field { display: none; }

/* =======================================================
   7. WARENEINGANG (wareneingang.html)
   ======================================================= */
body.wareneingang-page .subtitle { color: #666; margin-top: 0; margin-bottom: 20px; }
body.wareneingang-page .container { background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 1000px; margin: 0 auto; }
body.wareneingang-page table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
body.wareneingang-page th { background-color: #e2e8f0; color: #333; font-size: 14px; text-align: left; padding: 10px; border-bottom: 2px solid #cbd5e1; }
body.wareneingang-page td { padding: 10px; border-bottom: 1px solid #ddd; vertical-align: top; }
body.wareneingang-page .btn-add { background-color: #007BFF; margin-bottom: 15px; }
body.wareneingang-page .btn-save { background-color: #28a745; width: 100%; font-size: 16px; padding: 12px; font-weight: bold; }
body.wareneingang-page .btn-remove { background-color: #dc3545; padding: 8px 12px; font-weight: bold; }
body.wareneingang-page .btn-wizard { background-color: #ffc107; color: #000; font-weight: bold; width: 100%; margin-top: 5px; font-size: 12px; padding: 6px; }
body.wareneingang-page .item-status { font-size: 12px; margin-top: 5px; font-weight: bold; }
body.wareneingang-page .status-ok { color: #28a745; }
body.wareneingang-page .status-warn { color: #dc3545; }
body.wareneingang-page .wizard-step { display: none; }
body.wareneingang-page .wizard-step.active { display: block; }
body.wareneingang-page .wizard-btn-col { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }

/* =======================================================
   8. TRAYMANAGER (traymanager.html)
   ======================================================= */
body.traymanager-page .container { max-width: 1000px; margin: 20px auto; background: transparent; box-shadow: none; padding: 0; }
body.traymanager-page .grid-layout { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
body.traymanager-page .list-panel { flex: 1; min-width: 300px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); height: calc(100vh - 120px); overflow-y: auto; }
body.traymanager-page .editor-panel { flex: 1.5; min-width: 350px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: sticky; top: 20px;}
body.traymanager-page .cat-title { margin-top: 20px; margin-bottom: 10px; color: #333; border-bottom: 2px solid #eee; padding-bottom: 5px; }
body.traymanager-page .container-item { background: #f8f9fa; border: 1px solid #ddd; padding: 10px; margin-bottom: 8px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
body.traymanager-page .container-item:hover { background: #e2e8f0; }
body.traymanager-page .container-item.active { border-left: 4px solid #007BFF; background: #e6f2ff; }
body.traymanager-page .image-preview { width: 100%; height: 200px; background: #eee; border-radius: 6px; display: flex; justify-content: center; align-items: center; overflow: hidden; margin-bottom: 10px; border: 2px dashed #ccc; position: relative;}
body.traymanager-page .image-preview img { width: 100%; height: 100%; object-fit: cover; }
body.traymanager-page .image-preview span { color: #888; font-style: italic; }
body.traymanager-page .file-upload-wrapper { position: relative; overflow: hidden; display: inline-block; width: 100%; }
body.traymanager-page .file-upload-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; height: 100%; }
body.traymanager-page .btn-camera { background-color: #6f42c1; color: white; padding: 12px; width: 100%; text-align: center; border-radius: 4px; font-weight: bold; display: block; cursor: pointer; }

/* =======================================================
   9. ERFASSEN & BEARBEITEN (erfassen.html)
   ======================================================= */
body.erfassen-page .form-container { background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 750px; }
body.erfassen-page .tab-container { display: flex; margin-bottom: 20px; border-bottom: 2px solid #ddd; }
body.erfassen-page .tab { padding: 10px 20px; cursor: pointer; font-weight: bold; color: #666; border-bottom: 3px solid transparent; margin-bottom: -2px; }
body.erfassen-page .tab.active { color: #007BFF; border-bottom: 3px solid #007BFF; }
body.erfassen-page .mode-section { display: none; }
body.erfassen-page .mode-section.active { display: block; }
body.erfassen-page .row { display: flex; gap: 15px; }
body.erfassen-page .row .form-group { flex: 1; }
body.erfassen-page .btn-submit { background-color: #28a745; width: 100%; margin-top: 10px; font-size: 16px; font-weight: bold; }
body.erfassen-page .btn-small { padding: 6px 10px; background: #17a2b8; font-size: 12px; margin-top: 5px; font-weight: bold;}
body.erfassen-page .tag-badge { background-color: #fdf2f8; color: #e83e8c; border: 1px solid #fbcfe8; padding: 6px 10px; font-size: 13px; margin: 2px; border-radius: 12px; display: inline-flex; align-items: center; gap: 5px; font-weight: bold;}
body.erfassen-page .tag-badge button { background: none; border: none; color: #dc3545; cursor: pointer; font-weight: bold; font-size: 14px; padding: 0;}
body.erfassen-page .location-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; background: #f8f9fa; padding: 10px; border-radius: 4px; border: 1px solid #e2e8f0; }
body.erfassen-page .location-row select, body.erfassen-page .location-row input { padding: 6px; font-size: 13px; }