/* --- THEME VARIABES --- */
:root {
    --bg-dark: #121212;
    --bg-card: #1e1e1e;
    --bg-input: #2c2c2c;
    --primary: #FFD700;
    /* Gold/Yellow */
    --primary-hover: #ffcc00;
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --danger: #ff4d4d;
    --success: #00fa9a;
    --border: #333333;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    --blur: blur(10px);
}

/* --- RESET & BASE --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    /* Changed for mobile handling below */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out forwards;
}

/* --- UI COMPONENTS --- */
.btn {
    background-color: var(--primary);
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, background-color 0.2s;
}

.btn:hover {
    background-color: var(--primary-hover);
    transform: scale(1.02);
}

.btn:active {
    transform: scale(0.98);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: #000;
}

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

.btn-danger:hover {
    background-color: #ff3333;
}

input,
select {
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 10px;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 15px;
}

input:focus {
    outline: 2px solid var(--primary);
    border-color: transparent;
}

/* --- LAYOUTS --- */
#app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- AUTH SCREEN --- */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* Premium Dark Background */
    background-color: #000000;
    background-image:
        radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
    background-size: cover;
}

.auth-card {
    background: rgba(20, 20, 20, 0.85);
    /* Slightly darker */
    backdrop-filter: var(--blur);
    padding: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    /* Deep shadow */
    text-align: center;
}

.auth-card h1 {
    margin-bottom: 10px;
    color: var(--primary);
}

.auth-card p {
    margin-bottom: 20px;
    color: var(--text-muted);
}

.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    background: #333;
    color: #ccc;
    margin-right: 5px;
}

/* --- DASHBOARD --- */
.dashboard-container {
    display: flex;
    height: 100%;
    display: none;
    /* Hidden by default */
}

.sidebar {
    width: 250px;
    background-color: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px;
    transition: transform 0.3s ease;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.nav-item {
    padding: 12px 15px;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text-muted);
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-item:hover,
.nav-item.active {
    background-color: rgba(255, 215, 0, 0.1);
    color: var(--primary);
}

.main-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    background-color: var(--bg-dark);
    display: flex;
    flex-direction: column;
}

.user-profile {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-info div {
    font-size: 0.9em;
    font-weight: bold;
}

.user-info span {
    font-size: 0.8em;
    color: var(--text-muted);
}

/* --- WIDGETS --- */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
}

.stat-card h3 {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-card p {
    font-size: 2em;
    font-weight: bold;
}

.section-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.content-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.content-card h3 {
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: var(--primary);
}

.simple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.simple-table th {
    text-align: left;
    padding: 8px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.simple-table td {
    padding: 8px;
    border-bottom: 1px solid #333;
}

/* --- POS Grid Override --- */
/* The logic is handled inline in JS via style attributes, but we can enforce grid via CSS if needed 
   For now, the inline flex/grid works, but let's make it responsive */

/* --- FOOTER --- */
.dev-footer {
    margin-top: auto;
    padding-top: 30px;
    text-align: center;
    font-size: 0.8em;
    color: var(--text-muted);
    opacity: 0.6;
}

.dev-footer span {
    color: var(--primary);
}

/* --- NOTIFICATIONS --- */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-card);
    border-left: 4px solid var(--primary);
    padding: 15px 25px;
    border-radius: 4px;
    box-shadow: var(--shadow);
    transform: translateX(200%);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 1000;
}

.toast.show {
    transform: translateX(0);
}


/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 768px) {

    /* Dashbaord Layout */
    .dashboard-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 10px 20px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .logo {
        margin-bottom: 0;
        font-size: 1.2rem;
    }

    #nav-menu {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        width: 100%;
        margin-top: 10px;
        padding-bottom: 5px;
    }

    .nav-item {
        white-space: nowrap;
        margin-bottom: 0;
        padding: 8px 12px;
        font-size: 0.9em;
    }

    .user-profile {
        display: none;
        /* Hide profile in mobile header to save space, or move it */
    }

    /* Main Content */
    .main-content {
        padding: 15px;
    }

    .section-grid {
        grid-template-columns: 1fr;
        /* Stack columns on mobile */
    }

    /* POS Layout */
    /* We need to target the inline styles injected by JS or override them. 
       Since JS uses style="flex: 2", let's use !important to override for mobile if possible, 
       or better, we update the JS to use classes. 
       
       However, since we can't easily refactor all JS inline styles right now without risk, 
       we will rely on the fact that flex-direction: column on the container will stack them.
    */

    /* We'll add this class to the POS container dynamically or target it if it had an ID.
       The POS container in JS is: <div class="fade-in" style="height: 100%; display: flex; gap: 20px;">
       We can't easily target style attributes. 
       Wait, the POS view is rendered inside #main-content. 
       Let's target the immediate child div of .fade-in if strictly needed, 
       but actually, the easiest fix is to make the flex container wrap.
    */
}