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

body {
    background-color: #f8f9fa;
    color: #333;
}

/* Navbar */
.navbar {
    background-color: #1a1a29;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.navbar .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #4CAF50;
}

.navbar a {
    color: white;
    text-decoration: none;
    background: #ff4757;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: 0.3s;
}

.navbar a:hover {
    background: #e04050;
}

/* Login Page */
.login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1a1a29 0%, #2d2d44 100%);
}

.login-box {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 350px;
    animation: slideDown 0.8s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.login-box h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #1a1a29;
}

.login-box input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

.login-box button {
    width: 100%;
    padding: 12px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.login-box button:hover {
    background: #45a049;
}

/* Dashboard */
.dashboard-container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-main {
    background: #4CAF50;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    transition: 0.3s;
}

.btn-main:hover { background: #45a049; }

/* Tables & Cards */
.card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th { background-color: #f4f4f4; }

.action-btn {
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    color: white;
}

.btn-view { background: #2196F3; }
.btn-delete { background: #ff4757; }

/* Mobile-First Compact Footer (Shared across all pages) */
.footer {
    background: #1a1a29;
    color: #fff;
    padding: 20px;
    margin-top: 30px;
    text-align: center;
}
.footer-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}
.footer-col h3 {
    color: #4CAF50;
    margin-bottom: 5px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.footer-col p, .footer-col a {
    color: #ccc;
    text-decoration: none;
    margin-bottom: 5px;
    display: block;
    font-size: 0.85rem;
    line-height: 1.5;
}
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 10px;
    font-size: 0.75rem;
    color: #888;
}

/* PC View Adjustments */
@media (min-width: 768px) {
    .navbar { padding: 10px 15px; }
    .navbar .logo { font-size: 1.2rem; }
    .login-box { width: 90%; padding: 25px; }

    /* Make Footer Side-by-Side on PC only */
    .footer { text-align: left; }
    .footer-content { flex-direction: row; justify-content: space-between; max-width: 1000px; margin: 0 auto 15px auto; }
}

/* ===== SMART THEME: Tiny Footer Moon/Star Toggle ===== */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* ===== FLOATING HOME BUTTON (replaces the old floating dark-mode toggle on inner pages) ===== */
.float-home-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #1a1a29;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1500;
    transition: background 0.3s, transform 0.3s;
}

.float-home-btn:hover {
    background: #4CAF50;
    transform: scale(1.1);
}

/* ============================================================
   NEW IN v2: SMART AUTO DARK MODE — ALL PAGES, ZERO PAGE EDITS
   ------------------------------------------------------------
   Every public page (privacy, terms, category, vendor stores...)
   is built with the site's standard color variables. This block
   makes the STYLESHEET itself listen to the device's dark mode
   setting, so those pages follow it automatically — without
   touching a single page file.
   - Only activates when the device is in dark mode AND the
     visitor hasn't manually chosen a theme (theme.js adds
     .dark-mode or .light-mode to <body> when they do).
   - Pages that don't use these variables (admin dashboard,
     login) keep their own fixed professional look.
   - Dark colors below are copied exactly from the site's own
     dark mode, so everything matches perfectly.
   ============================================================ */
@media (prefers-color-scheme: dark) {
    body:not(.dark-mode):not(.light-mode) {
        --bg-color: #121212;
        --card-bg: #1e1e1e;
        --text-color: #e0e0e0;
        --text-muted: #aaa;
        --border-color: #333;
        --header-color: #000000;
        --secondary-bg: #2a2a2a;
        --input-border: #444;
        --toggle-bg: #333;
        --toggle-text: #ccc;
    }
}