/* ===== BASE ===== */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: background 0.3s, color 0.3s;
}

/* ===== LIGHT MODE (default) ===== */
:root {
    --bg-page: #f5f7fa;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-light: #f8f9fa;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-color: #dddddd;
    --accent: #667eea;
    --accent-hover: #764ba2;
    --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.2);
}

/* ===== DARK MODE ===== */
body.dark-mode {
    --bg-page: #1a1a2e;
    --bg-card: #16213e;
    --bg-input: #1a1a2e;
    --bg-light: #1a1a2e;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --border-color: #2a2a4a;
    --accent: #7c8cf5;
    --accent-hover: #9b6dd7;
    --gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --shadow: 0 2px 10px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
}

/* ===== PAGE LAYOUTS ===== */
.page-centered {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
body.dark-mode .page-centered {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
}

.page-dashboard {
    background: var(--bg-page);
    min-height: 100vh;
    color: var(--text-primary);
}

/* ===== NAVBAR ===== */
.navbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 10px 20px;
}
body.dark-mode .navbar {
    background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%);
}
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.navbar-brand { color: white !important; font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.navbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ===== LANGUAGE / DARK MODE CONTROLS ===== */

/* Controls bar — sits at top of form/hero */
.controls-floating {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
}
.controls-floating .btn-dark-toggle {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.controls-floating .btn-dark-toggle:hover { background: var(--border-color); }

/* On hero page, override to white style */
.hero-container .controls-floating .btn-dark-toggle {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
}
.hero-container .controls-floating .btn-dark-toggle:hover { background: rgba(255,255,255,0.35); }

/* Dark mode toggle button */
.btn-dark-toggle {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
    line-height: 1.5;
}
.btn-dark-toggle:hover { background: rgba(255,255,255,0.35); }

/* On dashboard pages — inside navbar, no special styling needed */
.page-dashboard .btn-dark-toggle {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
}
.page-dashboard .btn-dark-toggle:hover { background: rgba(255,255,255,0.3); }

/* ===== CARDS ===== */
.card {
    border-radius: 10px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    border: none;
    background: var(--bg-card);
    color: var(--text-primary);
}
.card-header.bg-primary {
    background: var(--accent) !important;
    border-radius: 10px 10px 0 0 !important;
}
.card-body { background: var(--bg-card); border-radius: 0 0 10px 10px; }

/* ===== STAT CARDS ===== */
.stat-card { text-align: center; padding: 20px; }
.stat-number { font-size: 32px; font-weight: bold; color: var(--accent); }
.stat-label { color: var(--text-secondary); margin-top: 10px; }

/* ===== BUTTONS ===== */
.btn-primary { background: var(--accent); border: none; color: white; }
.btn-primary:hover { background: var(--accent-hover); color: white; }
.btn-role { background: var(--accent); border: none; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; }
.btn-role:hover { background: var(--accent-hover); color: white; text-decoration: none; }
.btn-login, .btn-register { background: var(--accent); border: none; color: white; padding: 10px; border-radius: 5px; font-weight: bold; width: 100%; cursor: pointer; }
.btn-login:hover, .btn-register:hover { background: var(--accent-hover); color: white; }
.btn-accept { background: #28a745; border: none; color: white; }
.btn-accept:hover { background: #218838; color: white; }
.btn-pay { background: #ffc107; border: none; color: black; }
.btn-pay:hover { background: #e0a800; }

/* ===== FORM CONTAINERS ===== */
.form-container {
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 40px;
    width: 100%;
    color: var(--text-primary);
}
.form-container h2 { color: var(--text-primary); margin-bottom: 30px; text-align: center; }
.form-container.login { max-width: 400px; }
.form-container.register { max-width: 500px; }

.form-control {
    border-radius: 5px;
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    background: var(--bg-input);
    color: var(--text-primary);
}
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    background: var(--bg-input);
    color: var(--text-primary);
}
.form-label { color: var(--text-primary); }
.text-muted { color: var(--text-muted) !important; }

/* ===== ROLE TABS ===== */
.role-tabs { display: flex; gap: 10px; margin-bottom: 30px; }
.role-btn {
    flex: 1; padding: 10px;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer; border-radius: 5px;
    transition: all 0.3s; text-align: center;
}
.role-btn.active { border-color: var(--accent); background: var(--accent); color: white; }

/* ===== HERO (index page) ===== */
.hero-container { text-align: center; color: white; width: 100%; padding: 20px; }
.hero-title { font-size: 48px; font-weight: bold; margin-bottom: 20px; }
.hero-subtitle { font-size: 20px; margin-bottom: 40px; opacity: 0.9; }
.roles-container { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.role-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 30px;
    margin: 15px;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s;
    text-align: center;
    width: 220px;
}
.role-card:hover { transform: translateY(-5px); }
.role-icon { font-size: 48px; margin-bottom: 15px; }
.role-name { font-size: 20px; font-weight: bold; color: var(--text-primary); margin-bottom: 10px; }
.role-desc { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; }

/* ===== ALERTS ===== */
.error { color: #dc3545; margin-bottom: 15px; padding: 10px; background: #f8d7da; border-radius: 5px; }
.success { color: #155724; margin-bottom: 15px; padding: 10px; background: #d4edda; border-radius: 5px; }
body.dark-mode .error { background: #3d1c1c; color: #f5a5a5; }
body.dark-mode .success { background: #1c3d1c; color: #a5f5a5; }
body.dark-mode .alert-success { background: #1c3d1c; color: #a5f5a5; border-color: #2a5a2a; }
body.dark-mode .alert-danger { background: #3d1c1c; color: #f5a5a5; border-color: #5a2a2a; }
body.dark-mode .alert-info { background: #1c2a3d; color: #a5c5f5; border-color: #2a3a5a; }

/* ===== OFFER CARDS ===== */
.offer-card {
    border-radius: 10px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    border: 2px solid var(--border-color);
    transition: all 0.3s;
    background: var(--bg-card);
    color: var(--text-primary);
}
.offer-card:hover { border-color: var(--accent); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3); }
.offer-card.accepted { border-color: #28a745; }
body.dark-mode .offer-card.accepted { background: #1a2e1a; }
.price-tag { font-size: 32px; font-weight: bold; color: var(--accent); }

/* ===== REQUEST ITEMS ===== */
.request-item {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text-primary);
}
.request-item:hover { background: var(--bg-light); }
.request-item.active { background: rgba(102, 126, 234, 0.1); border-color: var(--accent); }

/* ===== REQUEST SUMMARY ===== */
.request-summary {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    color: var(--text-primary);
}

/* ===== TABLES ===== */
.table { color: var(--text-primary); }
body.dark-mode .table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); }
body.dark-mode .table th { color: var(--text-secondary); border-color: var(--border-color); }
body.dark-mode .table td { border-color: var(--border-color); }

/* ===== BORDERS ===== */
body.dark-mode .border { border-color: var(--border-color) !important; }
body.dark-mode .rounded { border-color: var(--border-color); }
.p-3.border.rounded { background: var(--bg-card); }

/* ===== MISC ===== */
.form-footer { text-align: center; margin-top: 20px; }
.form-footer a { color: var(--accent); }
body.dark-mode .bg-light { background: var(--bg-light) !important; }
body.dark-mode code { color: #e0a5f5; }

/* ===== MAINTENANCE ===== */
.maintenance-container {
    text-align: center;
    background: var(--bg-card);
    padding: 60px 40px;
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    color: var(--text-primary);
}
.maintenance-container .logo { font-size: 48px; margin-bottom: 20px; }
.maintenance-container h1 { color: var(--text-primary); margin-bottom: 20px; }
.maintenance-container p { color: var(--text-secondary); font-size: 16px; }

/* ===== BADGE OVERRIDES ===== */
body.dark-mode .badge.bg-info { background: #2a5a8a !important; }
body.dark-mode .badge.bg-warning { background: #8a7a2a !important; }

/* ===== BOOTSTRAP OVERRIDES FOR DARK ===== */
body.dark-mode .btn-outline-primary { color: var(--accent); border-color: var(--accent); }
body.dark-mode .btn-outline-primary:hover { background: var(--accent); color: white; }
body.dark-mode .btn-light { background: #e0e0e0; color: #1a1a2e; }
body.dark-mode .btn-warning { background: #e0a800; color: #1a1a2e; }
body.dark-mode .list-group-item { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
body.dark-mode select.form-control { background: var(--bg-input); color: var(--text-primary); }
body.dark-mode select.form-control option { background: var(--bg-card); color: var(--text-primary); }