/* Import Google Font: Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* 1. ROOT VARIABLES & THEME */
:root {
    --color-red: #e50914;
    --color-dark: #141414;
    --color-panel: #222222;
    --color-surface: #333333;
    --color-border: #444444;
    --color-text: #ffffff;
    --color-text-muted: #a0a0a0;
    --body-font: 'Poppins', sans-serif;
}

body {
    background-color: var(--color-dark);
    color: var(--color-text);
    font-family: var(--body-font);
}

/* 2. BOOTSTRAP OVERRIDES & GLOBAL STYLES */
.btn-primary { background-color: var(--color-red); border-color: var(--color-red); }
.btn-primary:hover, .btn-primary:focus { background-color: #f60a16; border-color: #f60a16; box-shadow: 0 0 0 0.25rem rgba(229, 9, 20, 0.5); }
.card { background-color: var(--color-panel); border: 1px solid var(--color-border); }
.table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, 0.05); --bs-table-hover-bg: rgba(255, 255, 255, 0.075); --bs-table-border-color: var(--color-border); color: var(--color-text); }
.form-control, .form-select { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.form-control:focus, .form-select:focus { background-color: var(--color-surface); border-color: var(--color-red); color: var(--color-text); box-shadow: 0 0 0 0.25rem rgba(229, 9, 20, 0.5); }
.modal-content { background-color: var(--color-panel); }
.nav-tabs .nav-link { color: var(--color-text-muted); }
.nav-tabs .nav-link.active { color: var(--color-red); border-color: var(--color-border) var(--color-border) var(--color-panel); background-color: var(--color-panel); }

/* 3. LAYOUT & NAVBAR */
.navbar-brand span { color: var(--color-red); font-weight: 700; }
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link.active { color: var(--color-red); }
.content-main { min-height: calc(100vh - 74px); }

/* 4. ORDER CREATION PAGE */
.order-page-container { display: flex; flex-wrap: wrap; gap: 1rem; }
.product-card { background: var(--color-panel); border: 1px solid transparent; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.2s ease; overflow: hidden; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); border-color: var(--color-red); }
.product-card img { width: 100%; height: 110px; object-fit: cover; }
.product-card .title { font-weight: 500; padding: 10px 5px 0; font-size: 0.9rem; }
.product-card .price { color: var(--color-text-muted); padding-bottom: 10px; }

/* 5. RESPONSIVE DESIGN & STACKING TABLES */
@media (max-width: 767.98px) {
    .table-responsive-stack thead {
        display: none; /* Hide desktop headers on mobile */
    }
    .table-responsive-stack tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        padding: 0.5rem;
    }
    .table-responsive-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 0.75rem;
        border-bottom: 1px solid var(--color-border);
    }
    .table-responsive-stack td:last-child {
        border-bottom: none;
    }
    .table-responsive-stack td::before {
        content: attr(data-label); /* Use data-label for the row's header */
        font-weight: 600;
        text-align: left;
        padding-right: 1rem;
        color: var(--color-text-muted);
    }
}

.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 74px); /* Full height minus navbar */
}

/* This sets a max-width for the login form card */
.login-card {
    max-width: 450px;
    width: 100%;
}

/* Style for the new logo in the navbar */
.navbar-brand-logo {
    height: 30px; /* Adjust size as needed */
    width: auto;
    margin-right: 10px;
    filter: invert(1) brightness(2); /* Makes the black logo white */
}
.navbar-nav .nav-item {
    margin-right: 1rem; /* Adjust this value for more or less space */
}