/* =============================================================
   Visentra Theme — Edit colors here to update the entire app
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary:       #0f3460;   /* Header, sidebar, nav background  */
    --primary-hover: #1a4a8a;   /* Hover state for primary elements  */
    --accent:        #e94560;   /* Buttons, highlights, badges        */
    --accent-hover:  #c73652;   /* Hover state for accent elements    */
    --header-bg:     #0f3460;   /* Top header bar background          */
    --header-text:   #ffffff;   /* Top header bar text color          */
    --sidebar-bg:    #0f3460;   /* Admin sidebar background           */
    --sidebar-text:  #ffffff;   /* Admin sidebar text                 */
    --sidebar-active:#e8eef8;   /* Active sidebar item background     */
    --card-shadow:   rgba(15, 52, 96, 0.15);
    --light-bg:      #e8eef8;   /* Light tinted background            */
    --body-bg:       #f0f4f8;
    --text-main:     #1e293b;
    --text-muted:    #64748b;
    --border-color:  #e2e8f0;
}

/* ── Typography ──────────────────────────────────────────── */
body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;   /* 16px — Bootstrap standard */
    color: var(--text-main);
    background-color: var(--body-bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}
/* Let Bootstrap handle h1–h6 sizes; only override card-header colours */
.card-header h3,
.card-header h4,
.card-header h5 {
    color: #fff;  /* white inside colored card headers */
}
.welcome-banner h2,
.welcome-banner h3,
.welcome-banner p,
.welcome-banner span,
.qr-success-header h3,
.qr-success-header p,
.site-header .brand-name,
.site-header .brand-tagline {
    color: #ffffff !important;
}
.form-label {
    font-size: 1rem;    /* Bootstrap standard */
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 4px;
}
.form-control,
.form-select {
    font-size: 1rem;    /* Bootstrap standard */
    color: var(--text-main);
    border-color: var(--border-color);
    border-radius: 8px;
}
.form-control-lg {
    font-size: 1.125rem !important;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
}
small, .small {
    font-size: 0.875em;  /* Bootstrap standard — relative to parent */
    color: var(--text-muted);
}
.text-muted {
    color: var(--text-muted) !important;
}
p {
    color: var(--text-main);
    line-height: 1.6;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--primary) !important;
    border-color:     var(--primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color:     var(--primary-hover) !important;
}
.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}
/* Accent button for secondary/highlight actions */
.btn-accent {
    background-color: var(--accent) !important;
    border-color:     var(--accent) !important;
    color: #fff !important;
}
.btn-accent:hover {
    background-color: var(--accent-hover) !important;
    border-color:     var(--accent-hover) !important;
}

/* ── Navbar / Header ─────────────────────────────────────── */
.navbar,
.site-header,
.admin-header {
    background-color: var(--header-bg) !important;
    color: var(--header-text) !important;
}
.navbar a,
.site-header a {
    color: var(--header-text) !important;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar,
.admin-sidebar,
#sidebar {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}
.sidebar a,
.admin-sidebar a {
    color: var(--sidebar-text) !important;
}
.sidebar .active,
.admin-sidebar .active,
.sidebar-item.active {
    background-color: var(--sidebar-active) !important;
    color: var(--primary) !important;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    box-shadow: 0 4px 24px var(--card-shadow);
}
.card-header.bg-primary {
    background-color: var(--primary) !important;
}

/* ── Text colors ─────────────────────────────────────────── */
.text-primary {
    color: var(--primary) !important;
}
.text-accent {
    color: var(--accent) !important;
}

/* ── Form focus ──────────────────────────────────────────── */
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(15, 52, 96, 0.20);
}

/* ── Links ───────────────────────────────────────────────── */
a {
    color: var(--primary);
}
a:hover {
    color: var(--primary-hover);
}

/* ── Page layout — space content below sticky header ──────── */
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > .container,
body > div.container {
    flex: 1;
    padding-top: 24px;
    padding-bottom: 40px;
}

/* ── Footer — always at bottom ───────────────────────────── */
.footer {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 0.78rem;
    padding: 12px 24px;
    text-align: center;
    width: 100%;
}

/* ── Visitor form responsive layout ─────────────────────── */
.cardbottoms {
    margin-top: 0 !important;
    border-radius: 12px !important;
}

/* On mobile: stack columns, add vertical gap */
@media (max-width: 991.98px) {
    body > .container,
    body > div.container {
        padding-top: 16px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .card-body.p-4 {
        padding: 1.25rem !important;
    }
    .btn-lg {
        padding: 0.6rem 1rem !important;
    }
}

@media (max-width: 575.98px) {
    body > .container,
    body > div.container {
        padding-top: 12px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .row.g-4 {
        --bs-gutter-y: 1rem;
    }
    .card-header.p-3 h3 {
        font-size: 1.25rem;
    }
}

/* ── Badges / Pills ──────────────────────────────────────── */
.badge.bg-primary {
    background-color: var(--primary) !important;
}
.badge.bg-accent {
    background-color: var(--accent) !important;
}

/* ── Table header ────────────────────────────────────────── */
thead.table-primary th,
.table-primary {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* ── Heading colors in admin ─────────────────────────────── */
h4, h5 {
    color: var(--primary);
}
/* Stats numbers on dashboard */
.display-6, .display-5, .display-4 {
    color: var(--primary) !important;
}

/* =============================================================
   RESPONSIVE — Global fixes
   ============================================================= */

/* Prevent horizontal overflow everywhere */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; }
img, video, canvas { max-width: 100%; }

/* Tables: scroll horizontally on small screens */
.table-responsive-auto table,
table { max-width: 100%; }
.main-content .table,
.container table {
    min-width: 0;
}
/* Wrap all tables in scroll container */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Admin layout ────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Full-width main content on mobile — sidebar collapses to 0 */
    .main-content {
        margin-left: 0 !important;
        margin-top: 64px !important;
        padding: 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .side-nav {
        width: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    .side-nav.open {
        width: 220px !important;
        padding-top: 1rem !important;
        z-index: 2000;
    }
    /* Prevent stats cards from overflowing */
    .row { margin-left: -8px; margin-right: -8px; }
    .col-md-3, .col-6 { padding-left: 8px; padding-right: 8px; }
    /* Header full width */
    .header-bar { width: 100% !important; }
    /* Footer full width */
    .footer { width: 100% !important; position: relative !important; }
    /* Container caps */
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
    /* Chart height reduced */
    .chart-container { height: 200px !important; }
    /* Cards */
    .card { margin-bottom: 12px; }
    /* Display number text smaller */
    .display-6 { font-size: 1.5rem !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .main-content {
        margin-left: 60px !important;
        padding: 16px !important;
    }
    .chart-container { height: 240px !important; }
}

/* ── Visitor form responsive ─────────────────────────────── */
@media (max-width: 991.98px) {
    /* Stack camera below form on tablet/mobile */
    .col-12.col-lg-7,
    .col-12.col-lg-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Camera container height */
    .camera-container { min-height: 260px !important; }
    #video { max-height: 260px !important; }
}

/* ── Admin tables ────────────────────────────────────────── */
.main-content .table-responsive,
.main-content .dataTable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
}

/* ── Login page ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .login-card { margin: 0 8px; }
    .login-card-body { padding: 20px 16px 24px; }
    .login-card-header { padding: 20px 16px 18px; }
}

/* ── Visitor register/QR page ────────────────────────────── */
@media (max-width: 575.98px) {
    .qr-success-header { padding: 18px 16px; }
    .col-12.col-lg-5.col-md-7 { padding: 0 8px; }
}