/* ==========================================
   ARQUIVO: css/style.css
   ========================================== */
:root {
    --bg-dark: #121212;
    --bg-card: #1e1e1e;
    --primary: #bb86fc;
    --success: #03dac6;
    --danger: #cf6679;
    --text: #ffffff;
    --border: #333;
}

body { margin: 0; font-family: 'Segoe UI', sans-serif; background: var(--bg-dark); color: var(--text); overflow: hidden; }

/* UTILS */
.active-screen { display: flex !important; }
.view-section { display: none; height: 100%; }
.view-section.active { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* LOGIN */
#login-screen { height: 100vh; justify-content: center; align-items: center; background: #000; flex-direction: column; }
.login-box { text-align: center; padding: 40px; background: var(--bg-card); border-radius: 10px; border: 1px solid var(--border); width: 350px; }
.login-box input { width: 100%; padding: 15px; background: #333; border: 1px solid #555; color: white; margin-bottom: 15px; text-align: center; font-size: 18px; letter-spacing: 2px; }
.login-box button { width: 100%; padding: 15px; background: var(--primary); border: none; font-weight: bold; cursor: pointer; color: black; }

/* LAYOUT */
#main-layout { display: flex; height: 100vh; }
.sidebar { width: 260px; background: #181818; padding: 20px; display: flex; flex-direction: column; border-right: 1px solid var(--border); justify-content: space-between; }
.brand { font-size: 24px; font-weight: bold; color: var(--primary); margin-bottom: 20px; text-align: center; }
.sidebar button { background: transparent; color: #aaa; text-align: left; padding: 12px; border: none; width: 100%; cursor: pointer; margin-bottom: 5px; font-size: 16px; border-radius: 5px; }
.sidebar button:hover { background: #333; color: white; }
.kiosk-btn { color: var(--danger) !important; font-size: 12px !important; }

.content { flex: 1; padding: 20px; overflow-y: auto; background: var(--bg-dark); }

/* POS (PDV) */
.pos-container { display: flex; gap: 20px; height: calc(100vh - 100px); }
.products-grid { flex: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; overflow-y: auto; align-content: start; }
.product-card { background: var(--bg-card); padding: 15px; border-radius: 8px; cursor: pointer; text-align: center; border: 1px solid var(--border); transition: 0.2s; }
.product-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.product-card h4 { margin: 10px 0; font-size: 14px; }

.cart-panel { flex: 1; background: var(--bg-card); padding: 20px; border-radius: 8px; display: flex; flex-direction: column; border: 1px solid var(--border); }
.cart-item { display: flex; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 5px; font-size: 14px; }
.total-row { font-size: 24px; font-weight: bold; margin: 20px 0; text-align: right; color: var(--success); }
.checkout-form label { display: block; margin-top: 10px; font-size: 12px; color: #aaa; }
.checkout-form input, .checkout-form select { width: 100%; padding: 10px; background: #333; border: 1px solid #555; color: white; margin-bottom: 5px; }
.btn-success { background: var(--success); color: black; padding: 15px; border: none; font-weight: bold; margin-top: auto; cursor: pointer; width: 100%; }

/* KDS */
.kds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.order-ticket { background: var(--bg-card); padding: 15px; border-radius: 8px; border-left: 5px solid var(--primary); }
.order-ticket.kitchen { border-color: orange; }
.order-ticket.ready { border-color: var(--success); }
.ticket-items { margin: 15px 0; line-height: 1.5; font-size: 14px; }
.kds-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

/* ADMIN */
.dashboard-cards { display: flex; gap: 20px; margin-bottom: 30px; }
.card { background: var(--bg-card); padding: 20px; border-radius: 8px; flex: 1; border: 1px solid var(--border); }
.form-inline { display: flex; gap: 10px; margin-top: 10px; }
.form-inline input, .form-inline select { padding: 10px; background: #333; border: 1px solid #555; color: white; flex: 1; }
.form-inline button { padding: 10px 20px; background: var(--primary); border: none; cursor: pointer; color: black; font-weight: bold; }