/* public/css/style.css */

:root {
    --primary-color: #2563eb; /* blue-600 */
    --primary-color-dark: #1d4ed8; /* blue-700 */
    --primary-color-light: #60a5fa; /* blue-400 */ /* New light blue for categories widget */
    --secondary-color: #f97316; /* orange-500 */
    --background-color: #f1f5f9; /* slate-100 */
    --surface-color: #ffffff; /* white */
    --text-color: #1e293b; /* slate-800 */
    --text-color-light: #64748b; /* slate-500 */
    --border-color: #e2e8f0; /* slate-200 */
    --danger-color: #dc2626; /* red-600 */
    --success-color: #16a34a; /* green-600 */

    --header-height: 60px;
    --border-radius: 8px;
    --box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.5;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem; /* Slightly less horizontal padding */
    height: var(--header-height);
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    z-index: 10;
}

.app-header h1 {
    margin: 0;
    font-size: 1.3rem; /* Slightly smaller font size */
}

.app-header h1 a {
    color: var(--primary-color);
    text-decoration: none;
}

.app-nav a {
    color: var(--text-color-light);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: background-color 0.2s, color 0.2s;
}

.app-nav a:hover {
    color: var(--text-color);
    background-color: var(--background-color);
}

.app-nav a.active {
    color: var(--primary-color);
    font-weight: 600;
}

.app-main {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
    padding-bottom: calc(4rem + 70px); /* Increased globally to provide more space for FAB and context menu */
    transition: padding-top 0.3s ease, padding-bottom 0.3s ease; /* Smooth transition when offline indicator appears */
}

/* Add padding when offline to make room for the indicator */
body.app-offline .app-main {
    padding-top: calc(2rem + 40px); /* 2rem original padding + 40px for offline indicator */
    padding-bottom: calc(2rem + 80px); /* Bottom nav padding angepasst an neue Höhe */
}

#app {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- UI Components --- */

/* --- Bottom Navigation --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; /* Höhe der Navigationsleiste erhöht */
    background-color: var(--surface-color);
    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100; /* Über anderen Inhalten */
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* Erhöhter Abstand für iPhone X / Notch-Geräte im PWA Modus */
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    text-decoration: none;
    color: var(--text-color-light);
    font-size: 0.75rem;
    font-weight: 500;
    height: 100%;
    padding-top: 5px; /* Zusätzlicher Abstand nach oben für mehr Platz unten */
    transition: color 0.2s;
}

.bottom-nav .nav-item:hover {
    color: var(--text-color);
}

.bottom-nav .nav-item.active {
    color: var(--primary-color);
    font-weight: 600;
}

.bottom-nav .nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    fill: currentColor; /* Verwendet die Farbe des Elternelements */
    transition: fill 0.2s;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header h2 {
    margin: 0;
    font-size: 2rem;
    flex-shrink: 0; /* Verhindert, dass der Titel schrumpft */
}

.page-header .header-icons {
    margin-left: auto; /* Schiebt die Icons ganz nach rechts */
    flex-shrink: 0; /* Verhindert, dass die Icons schrumpfen */
    /* Zusätzliche Styling-Anpassungen, falls nötig */
}

.header-icons {
    display: flex;
    gap: 0.5rem;
}

.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
}

.icon-button:hover {
    background-color: var(--background-color);
}

.icon-button svg {
    width: 24px;
    height: 24px;
    fill: var(--text-color-light);
}

.category-menu-button svg {
    fill: var(--text-color-light); /* Explizit den grauen Farbton setzen */
}

/* --- Category List Cards --- */
.category-list {
    display: grid;
    gap: 1rem;
}

.category-list-container {
    margin-top: 1rem; /* Add spacing between search/filter and category list */
}

.category-card {
    position: relative; /* Make category-card a positioning context for context-menu */
    display: flex;
    flex-direction: row; /* Explizit auf Zeile setzen, um .list-item-card zu überschreiben */
    align-items: center; /* Vertikal zentrieren */
    justify-content: space-between; /* Elemente verteilen */
    gap: 1rem; /* Abstand zwischen den Elementen */
    padding: 1rem;
    border-left: 4px solid var(--primary-color); /* Matches the mockup */
    background-color: var(--surface-color); /* Hintergrundfarbe hinzufügen */
    border-radius: var(--border-radius); /* Abgerundete Ecken hinzufügen */
    box-shadow: var(--box-shadow); /* Schatten hinzufügen */
    margin-bottom: 1rem; /* Abstand nach unten hinzufügen */
}

/* --- Context Menu (for three dots button) --- */
.context-menu {
    position: absolute;
    right: 0;
    bottom: 100%; /* Position above the three-dots button */
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    z-index: 10;
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Adjust for upward animation */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.context-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.context-menu li a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s;
    white-space: nowrap; /* Prevent text wrapping */
}

.context-menu li a:hover {
    background-color: var(--background-color);
}

.category-icon-wrapper {
    width: 48px;
    height: 48px;
    min-width: 48px; /* Ensure it doesn't shrink */
    min-height: 48px; /* Ensure it doesn't shrink */
    background-color: var(--primary-color); /* Blue background for the icon */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow);
}

.category-icon {
    width: 24px;
    height: 24px;
    fill: var(--surface-color); /* White icon */
}

.category-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert den Inhalt vertikal */
}

.category-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color); /* Darker text for name */
    text-decoration: none;
}

.category-name:hover {
    text-decoration: underline;
}

.category-product-count {
    font-size: 0.9rem;
    color: var(--text-color-light);
    margin: 0;
}

/* ... */

.category-menu-button {
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
    margin-left: auto; /* Schiebt den Button ganz nach rechts */
}

/* --- Floating Action Button (FAB) --- */
.fab {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.5rem + 70px); /* Adjust for taller bottom navigation bar */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--surface-color);
    border: none;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    z-index: 90; /* Below bottom nav, above content */
}

.fab:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-2px);
}

.fab svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Mobile adjustments for FAB */
@media (max-width: 480px) {
    .fab {
        right: 1rem;
        bottom: calc(1rem + 70px); /* Adjust for smaller padding and taller bottom nav */
    }
}


.card {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 2rem;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--border-radius);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
}

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

.btn-success {
    color: #fff;
    background-color: var(--success-color);
    border-color: var(--success-color);
}

/* --- Tables --- */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--surface-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    overflow: hidden;
}

table th, table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

table th {
    background-color: #f8fafc; /* slate-50 */
    font-weight: 600;
}

table tr:last-child td {
    border-bottom: none;
}

table tr:hover {
    background-color: var(--background-color);
}

/* --- Forms --- */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    outline: 0;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.btn-secondary {
    color: var(--text-color);
    background-color: var(--background-color);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background-color: #e2e8f0; /* slate-200 */
    border-color: #cbd5e1; /* slate-300 */
}

/* --- Utility --- */
.text-right {
    text-align: right;
}

.mt-2 { margin-top: 0.5rem; }
.mb-4 { margin-bottom: 2rem; }

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%; /* Ensure it doesn't exceed parent's width */
    margin: 0 auto; /* Center the wrapper */
}

.search-input-wrapper .form-control {
    flex-grow: 1;
    padding-right: 2.5rem; /* Make space for the absolute button */
    min-width: 0; /* Allow flex item to shrink below content size */
}

.search-input-wrapper .btn {
    position: absolute; /* Revert to absolute positioning */
    right: 0.5rem; /* Position inside the input, adjusting for its padding */
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 4px); /* Höhe anpassen, um im Input-Feld zu passen */
    width: 2rem; /* Feste Breite für den Button */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--text-color-light);
    border: none;
    cursor: pointer;
    z-index: 2;
    /* Removed flex-shrink: 0; and margin-left as it's absolute now */
}

.search-input-wrapper .btn:hover {
    color: var(--text-color);
    background-color: var(--background-color);
}

/* Anpassungen für mobile Ansicht */
@media (max-width: 480px) {
    .search-input-wrapper .form-control {
        padding-right: 2.2rem; /* Etwas weniger Platz in mobiler Ansicht */
    }

    .search-input-wrapper .btn {
        right: 0.25rem; /* Adjust for mobile padding */
        width: 2rem;
    }
}



/* Styling for ReorderListView filters and sort */
.filters-sort-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    align-items: flex-end; /* Align items at the bottom */
}

.filter-group {
    flex: 1; /* Allow each filter group to grow */
    min-width: 150px; /* Minimum width for filter group before wrapping */
}

.filter-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color-light);
}

.filters-sort-container select,
.filters-sort-container input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-appearance: none; /* Remove default select styling for better consistency */
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.filters-sort-container select:focus,
.filters-sort-container input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

.btn-icon-toggle {
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem; /* Gleiches Padding wie andere Filter-Elemente */
    cursor: pointer;
    line-height: 0; /* Verhindert zusätzlichen Leerraum durch die Zeilenhöhe */
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-icon-toggle svg {
    width: 20px;
    height: 20px;
    fill: var(--text-color-light);
    transition: fill 0.2s;
}

.btn-icon-toggle:hover {
    background-color: #e2e8f0; /* slate-200 */
    border-color: #cbd5e1; /* slate-300 */
}

.btn-icon-toggle.active {
    background-color: #fff7ed; /* orange-50 */
    border-color: var(--secondary-color);
}

.btn-icon-toggle.active svg {
    fill: var(--secondary-color);
}

.list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- List Item Cards (for Categories and Products) --- */
.list-item-card-container ul,
.list-item-card-container ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    padding: 1rem;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Spacing between elements inside the card */
}

.list-item-card a {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.list-item-card a:hover {
    text-decoration: underline;
}

.list-item-card p {
    margin: 0;
    color: var(--text-color-light);
    font-size: 0.9rem;
    line-height: 1.4;
}

    .list-actions {
        display: flex; /* Default to horizontal for larger screens */
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .list-actions .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    /* Mobile-specific adjustments for list actions */
    @media (max-width: 480px) {
        .list-actions {
            flex-direction: column; /* Stack buttons vertically */
            gap: 0.8rem; /* Increased gap for better touch interaction */
        }

        .list-actions .btn {
            width: 100%; /* Make buttons full width */
            padding: 0.6rem 1rem;
            font-size: 0.95rem;
        }
    }
/* Specific styling for the product list in reorder view */
.reorder-list-content h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color-dark);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.reorder-list-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reorder-list-content li {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    padding: 1rem;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
}

.reorder-list-content li a {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.reorder-list-content li a:hover {
    text-decoration: underline;
}

.product-info-grid {
    display: grid;
    grid-template-columns: auto 1fr; /* Erste Spalte passt sich dem Inhalt an, zweite nimmt den Rest */
    gap: 0.25rem 0.75rem; /* Vertikaler und horizontaler Abstand zwischen den Zeilen/Spalten */
    font-size: 0.9rem; /* Etwas kleinere Schriftgröße für Details */
    color: var(--text-color-light); /* Hellerer Text für weniger prominente Informationen */
    margin-top: 0.5rem; /* Abstand vom Produktnamen */
    padding-left: 0.5rem; /* Leichte Einrückung zur besseren Abgrenzung */
}

.product-info-grid .label {
    font-weight: 500; /* Leichter fetter für Beschriftungen */
    text-align: right; /* Rechtsbündige Ausrichtung der Labels */
    padding-right: 0.5rem; /* Abstand zwischen Label und Wert */
}

.product-info-grid .value {
    font-weight: 400; /* Normaler Text für die Werte */
    text-align: left;
    word-break: break-word; /* Lange Texte können umbrechen */
}

/* Spezielle Hervorhebung für dringliche Informationen */
.product-info-grid .urgent-label,
.product-info-grid .urgent-value {
    color: var(--secondary-color); /* Akzentfarbe für Dringlichkeit (Orange) */
    font-weight: 600; /* Fetter für Dringlichkeit */
}


.reorder-list-content li.out-of-stock {
    border-left: 4px solid var(--danger-color) !important;
    background-color: #fef2f2; /* red-50 */
}

.reorder-list-content li.out-of-stock a {
    color: var(--danger-color);
}

.reorder-list-content li.out-of-stock p {
    color: var(--danger-color);
    font-weight: 500;
}

.reorder-list-content li.urgent-reorder {
    border-left: 4px solid var(--secondary-color) !important;
    background-color: #fff7ed; /* orange-50 */
}

.reorder-list-content li.urgent-reorder a {
    color: #c2410c; /* orange-700 */
}

.reorder-list-content li.urgent-reorder p {
    color: #ea580c; /* orange-600 */
    font-weight: 500;
}

/* Responsive adjustments for filters */
@media (max-width: 768px) {
    .filters-sort-container {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        min-width: 100%; /* Full width on small screens */
    }
}

/* --- Mobile-specific adjustments (e.g., iPhones) --- */
@media (max-width: 480px) {
    .app-header {
        padding: 0 1rem; /* Reduce horizontal padding */
    }

    .app-header h1 {
        font-size: 1.2rem; /* Smaller font size for header title */
    }

    .app-nav a {
        padding: 0.3rem 0.5rem; /* Smaller padding for nav links */
        font-size: 0.9rem;
    }

    .app-main {
        padding: 1rem; /* Reduce overall padding */
        padding-bottom: calc(4rem + 60px); /* Further increased for FAB clearance and context menu visibility */
    }

    body.app-offline .app-main {
        padding-top: calc(1rem + 40px); /* Adjust for offline indicator */
        padding-bottom: calc(1rem + 60px); /* Bottom nav padding bleibt */
    }

    #app {
        max-width: 100%; /* Allow app to take full width */
    }

    .page-header {
        flex-direction: column; /* Stack title and button */
        align-items: flex-start;
        margin-bottom: 1.5rem;
    }

    .page-header h2 {
        font-size: 1.5rem; /* Smaller font size for page title */
        margin-bottom: 1rem; /* Space between title and button */
    }

    .card, .list-item-card {
        padding: 1rem; /* Reduce card padding */
    }

    /* Make tables horizontally scrollable */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    table {
        min-width: 600px; /* Ensure table content is readable */
    }

    table th, table td {
        padding: 0.75rem; /* Smaller padding in table cells */
        font-size: 0.9rem;
    }

    .form-control {
        padding: 0.6rem 0.8rem; /* Smaller padding for form controls */
        font-size: 0.9rem;
    }

    .form-actions {
        flex-direction: column; /* Stack form action buttons */
        gap: 0.8rem;
    }

    .btn {
        width: 100%; /* Full width buttons */
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
    }

    .dashboard-widgets {
        grid-template-columns: 1fr; /* Single column for dashboard widgets */
        gap: 1rem;
    }

    .widget-value {
        font-size: 2rem; /* Smaller font size for widget values */
    }

    .widget-label {
        font-size: 0.85rem; /* Smaller font size for widget labels */
    }

    .error-notification, .success-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: calc(100% - 20px); /* Adjust max-width for small screens */
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }

    .error-notification p, .success-notification p {
        margin-right: 0.5rem;
    }

    .error-notification button {
        font-size: 1.2rem;
    }

    .stock-control {
        /* flex-direction: column; Stack stock control elements */
        /* align-items: flex-start; */
        gap: 0.5rem;
    }

    .stock-control p {
        flex-grow: 1; /* Allow text to take available space */
        text-align: center; /* Center the text */
    }

    .stock-change-button {
        width: auto; /* Reset width for stock change buttons */
    }
}


/* --- Dashboard Widgets --- */
.dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.widget {
    background-color: var(--surface-color);
    border-left: 4px solid;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.widget:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px -2px rgb(0 0 0 / 0.15);
}

.widget-primary {
    border-left-color: var(--primary-color);
}

.widget-secondary {
    border-left-color: var(--secondary-color);
}

.widget-primary-light {
    border-left-color: var(--primary-color-light);
}

.widget-warning {
    border-left-color: #f59e0b; /* amber-500 */
}

.widget-danger {
    border-left-color: var(--danger-color);
}

.widget-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.widget-label {
    font-size: 0.95rem;
    color: var(--text-color-light);
    font-weight: 500;
    margin-bottom: 1rem;
}

.widget-link {
    font-size: 0.85rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.widget-link:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

/* --- Loading Indicator --- */
.loading-indicator-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    border: 5px solid var(--background-color);
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Error Notification --- */
.error-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--danger-color);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    z-index: 1001;
    max-width: 400px;
}

.error-notification p {
    margin: 0;
    margin-right: 1rem;
}

.error-notification button {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* --- Success Notification --- */
.success-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--success-color);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    z-index: 1001;
    max-width: 400px;
}

.success-notification p {
    margin: 0;
}

.stock-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stock-control p {
    margin: 0 !important; /* Override other paragraph styles */
    font-weight: 500;
}

.stock-change-button {
    padding: 0.25rem 0.6rem !important; /* Override .btn padding */
    font-size: 1rem !important;
    line-height: 1;
}

/* --- Offline Indicator --- */
.offline-indicator {
    display: none !important; /* Hide by default */
    position: fixed;
    top: var(--header-height); /* Direkt unterhalb der Navigationsleiste */
    left: 0;
    width: 100%;
    background-color: #dc2626 !important; /* Rot (danger-color) */
    color: white;
    text-align: center;
    padding: 0.5rem;
    z-index: 999; /* Unter dem Header (z-index: 10), aber über dem Content */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    font-weight: 500;
    height: 40px; /* Feste Höhe für konsistentes Layout */
    line-height: 1.5;
}

body.app-offline .offline-indicator {
    display: block !important; /* Sichtbar wenn offline */
}

/* --- Pill Design for Stock Control --- */
.stock-control.pill-design {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 50px; /* Stark abgerundete Ecken für Pill-Effekt */
    overflow: hidden; /* Wichtig, damit die inneren Elemente nicht über die Rundung ragen */
    background-color: var(--surface-color);
    box-shadow: var(--box-shadow);
    height: 44px; /* Empfohlene Mindesthöhe für Touch-Ziele */
    width: fit-content; /* Passt sich dem Inhalt an */
}

.stock-control.pill-design .stock-change-button {
    background-color: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem; /* Größere Schrift für die Symbole */
    font-weight: 600;
    padding: 0 15px; /* Innenabstand für die Buttons */
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0; /* Verhindert, dass die Buttons schrumpfen */
}

.stock-control.pill-design .stock-change-button:hover:not(:disabled) {
    background-color: var(--background-color);
    color: var(--primary-color-dark);
}

.stock-control.pill-design .stock-change-button:disabled {
    color: var(--text-color-light);
    cursor: not-allowed;
}

.stock-control.pill-design .stock-change-button.btn-success {
    background-color: var(--success-color);
    color: white;
}

.stock-control.pill-design .current-stock-display {
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
    text-align: center;
    padding: 0 10px;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap; /* Verhindert Zeilenumbruch */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

/* Anpassungen für kleinere Bildschirme, falls nötig */
@media (max-width: 480px) {
    .stock-control.pill-design {
        height: 40px; /* Etwas kleiner auf mobilen Geräten */
    }
    .stock-control.pill-design .stock-change-button {
        font-size: 1.3rem;
        padding: 0 12px;
    }
    .stock-control.pill-design .current-stock-display {
        font-size: 1rem;
        padding: 0 8px;
    }
}
/* --- Product List Cards --- */
.product-list {
    display: grid;
    gap: 1rem;
}

.product-list-container {
    margin-top: 1rem; /* Add spacing between search/filter and product list */
}

.product-card {
    position: relative; /* Make product-card a positioning context for context-menu */
    display: flex;
    flex-direction: column; /* Elemente untereinander anordnen */
    padding: 1rem;
    border-left: 4px solid var(--primary-color); /* Matches the mockup */
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 1rem;
}

.product-card .product-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color); /* Wie im Mockup */
    margin: 0 0 0.5rem 0; /* Abstand nach unten */
    text-decoration: none; /* Unterstreichung entfernen */
}

.product-card .product-name:hover {
    text-decoration: none; /* Auch im Hover-Zustand keine Unterstreichung */
}

.product-card .product-menu-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    fill: var(--text-color-light);
}

.product-card .product-stock-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem; /* Abstand zum Produktnamen */
}

    .product-card .stock-label {

    margin: 0;

    color: var(--text-color); /* Dunkler als category-product-count */

    font-size: 0.95rem;

    font-weight: 500;

}



/* --- Header Context Menu --- */

.header-context-menu-container {

    position: relative;

    display: flex;

    align-items: center;

}



/* Reuse existing .context-menu styles, but override the position */

.header-context-menu-container .context-menu {

    bottom: auto; /* Unset the 'bottom' property */

    top: calc(100% + 5px); /* Position it below the icon button */

    right: 0;

}