/* ============================================================
   LIGHT, CLEAN, TAILWIND-LIKE BASE STYLES (VANILLA CSS)
   ============================================================ */

/* ---- Root Colors ---- */
:root {
    --bg-body: #f9fafb;
    --bg-card: #ffffff;
    --bg-muted: #f3f4f6;

    --border-light: #e5e7eb;

    --text-main: #1f2937;
    --text-muted: #6b7280;

    --brand: #3b82f6;
    --brand-hover: #2563eb;

    --danger: #dc2626;
    --success: #16a34a;
}

/* ---- Layout ---- */
body {
    background-color: var(--bg-body);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-main);
    padding: 0;
    margin: 0;
}

/* ---- Nav / Header ---- */
.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border-light);
}

.navbar-brand,
.navbar-nav > li > a {
    color: var(--text-main) !important;
    font-weight: 600;
}

.navbar-nav > li > a:hover {
    color: var(--brand-hover) !important;
}

/* ---- Cards ---- */
.card, .panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 6%);
}

/* Headings inside cards */
.card h1, .card h2, .card h3,
.panel h1, .panel h2, .panel h3 {
    color: var(--text-main);
    margin-bottom: 12px;
}

/* ---- Tables ---- */
table.dataTable {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

table.dataTable thead th {
    background: var(--bg-muted);
    color: var(--text-muted);
    font-weight: 600;
}

table.dataTable tbody tr:hover {
    background: #f1f5f9;
}

table.dataTable td {
    color: var(--text-main);
}

/* ---- Buttons ---- */
.btn {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    transition: background-color .15s, box-shadow .15s;
}

.btn-primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

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

.btn-danger {
    background: var(--danger) !important;
}

.btn-success {
    background: var(--success) !important;
}

.btn-outline-soft {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-main);
}
/* Hits chart date range buttons */
.hits-range {
  display: flex;
  gap: 0.5rem; /* matches Delete / Save spacing */
}

.hits-range .btn {
  border-radius: 0.5rem; /* optional: soften corners */
}


.btn-outline-soft:hover {
    background: var(--bg-muted);
}

/* ---- Forms ---- */
input.form-control,
select.form-control,
textarea.form-control {
    border-radius: 8px;
    border: 1px solid var(--border-light);
    padding: 10px 12px;
    background-color: #fff;
}

input.form-control:focus,
select.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 20%);
}

/* ---- QR Preview Box ---- */
.qr-preview {
    background: white;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 6px rgb(0 0 0 / 6%);
    text-align: center;
}

/* ---- Utility Spacing (Tailwind-like) ---- */
.mt-1 { margin-top: 4px;  }
.mt-2 { margin-top: 8px;  }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 24px; }

.mb-1 { margin-bottom: 4px;  }
.mb-2 { margin-bottom: 8px;  }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 24px; }

.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 24px; }

.rounded-lg { border-radius: 12px; }
.text-muted { color: var(--text-muted) !important; }
.text-xs { font-size: 0.75rem; }

/* ---- Alerts ---- */
.alert {
    border-radius: 8px;
    padding: 12px 16px;
}

.alert-danger { background: #fee2e2; color: #b91c1c; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-warning { background: #fef3c7; color: #92400e; }

/* ---- Login Card ---- */
.login-card {
    max-width: 420px;
    margin: 80px auto;
    padding: 32px;
    border-radius: 16px;
    background: white;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
}

/* ===================================================================
   LIGHT INPUT FIXES — Overrides Bootstrap 3 dark-ish input styling
   =================================================================== */

input.form-control,
select.form-control,
textarea.form-control {
    background-color: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--text-muted);
}

/* Focus styles */
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
}

.form-group label {
    color: var(--text-main);
    font-weight: 500;
}