/* ===============================
   MAQNA TREATS BRAND THEME
=============================== */

:root {
--brand-yellow: #FFD200;
--brand-red: #E10600;
--brand-orange: #FF7A00;
--brand-dark: #1A1A1A;
--soft-yellow: #FFF3B0;
}

/* ===============================
   GLOBAL
=============================== */

body {
font-family: 'Segoe UI', sans-serif;
transition: background 0.3s ease, color 0.3s ease;
}

.app-bg {
background: linear-gradient(135deg, #FFF8D6, #FFE680);
min-height: 100vh;
}

/* ===============================
   NAVBAR
=============================== */

.navbar {
background: var(--brand-red) !important;
}

.navbar-brand {
color: white !important;
font-weight: bold;
}

.nav-link {
color: white !important;
font-weight: 500;
}

.nav-link.active {
background: var(--brand-yellow);
color: var(--brand-dark) !important;
border-radius: 20px;
padding: 6px 14px;
}

/* ===============================
   CARDS
=============================== */

.card-app {
border-radius: 18px;
border: none;
background: linear-gradient(145deg, #ffffff, var(--soft-yellow));
box-shadow: 0 8px 22px rgba(0,0,0,0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-app:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* ===============================
   BUTTONS
=============================== */

.btn-primary {
background: var(--brand-red);
border: none;
border-radius: 12px;
padding: 12px;
font-weight: 600;
}

.btn-primary:hover {
background: var(--brand-orange);
}

.btn-success {
background: var(--brand-yellow);
color: var(--brand-dark);
border: none;
border-radius: 12px;
font-weight: 600;
}

.btn-success:hover {
background: #ffcc00;
}

/* ===============================
   INPUT FIELDS
=============================== */

.form-control,
.form-select {
border-radius: 12px;
padding: 12px 12px 12px 45px;
border: 1px solid #ddd;
}

.form-control:focus {
border-color: var(--brand-red);
box-shadow: 0 0 0 0.2rem rgba(225,6,0,0.15);
}

/* ===============================
   INPUT ICON STYLE
=============================== */

.input-icon {
position: relative;
}

.icon-circle {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
background: var(--brand-red);
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

/* ===============================
   TABLES
=============================== */

.table {
border-radius: 12px;
overflow: hidden;
}

.table thead {
background: var(--brand-yellow);
color: var(--brand-dark);
}

/* ===============================
   DARK MODE (BRAND ALIGNED)
=============================== */

body.dark-mode {
background-color: #121212 !important;
color: #e4e4e4;
}

body.dark-mode .navbar {
background-color: #8B0000 !important;
}

body.dark-mode .card-app {
background: #1e1e1e;
box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

body.dark-mode .form-control,
body.dark-mode .form-select {
background-color: #2a2a2a;
color: #fff;
border-color: #444;
}

body.dark-mode .form-control:focus {
border-color: var(--brand-yellow);
box-shadow: 0 0 0 0.2rem rgba(255,210,0,0.15);
}

body.dark-mode .table {
color: #ddd;
}

body.dark-mode .table thead {
background-color: #2a2a2a;
color: var(--brand-yellow);
}

body.dark-mode .btn-light {
background-color: #333;
color: #fff;
}

/* FIX: Override gradient in dark mode */
body.dark-mode.app-bg {
    background: #121212 !important;
}

/* ===============================
   DARK MODE LABEL FIX
=============================== */

body.dark-mode label,
body.dark-mode .form-label {
    color: #f1f1f1 !important;
}

body.dark-mode .form-text {
    color: #bbbbbb !important;
}

body.dark-mode .nav-link {
    color: #f1f1f1 !important;
}

body.dark-mode small {
    color: #cccccc !important;
}

/* Fix bold text inside dark mode */
body.dark-mode .fw-bold {
    color: #ffffff !important;
}