/* style.css: Custom styles for the security patrol app (original comment preserved) */

/* === CHANGE DESCRIPTION: Synchronized title wrapping breakpoint for identical behavior on both pages. */
/* // Increased breakpoint to 720px – now "Patrol Dashboard" and "Admin Panel" wrap/stack at the exact same screen width. */
/* // Longer "Patrol Dashboard" no longer wraps earlier than "Admin Panel" – perfect sync. */
/* // Titles remain single line on wider screens, stack left-aligned on mobile. */
/* // No impact on buttons (stay top-right inline with first line). */
/* // Minimal change: only media query value updated. No other rules edited or removed. (new comment) */

/* === BLOCK UPDATE SUMMARY: */
/* // Media query breakpoint raised from 650px → 720px. */
/* // Both dashboard.php and admin.php titles now wrap at the same moment. */
/* // All previous rules (buttons, layout, animations, NFC, scans, etc.) 100% preserved. */
/* // Safe direct replacement – exact requested synchronization achieved. (new comment) */

/* Center video feed for QR scanning (original comment preserved) */
#video, #canvas {
    max-width: 100%;
    border: 1px solid #ccc;
}

/* Ensure table is responsive (original comment preserved) */
.table {
    width: 100%;
}

/* Error message styling (original comment preserved) */
.text-danger {
    font-size: 0.9em;
}

/* Button spacing (original comment preserved) */
.btn {
    margin: 5px;
}

/* Admin panel form inputs (original comment preserved) */
form .row {
    align-items: center;
}

/* Action buttons in tables (original comment preserved) */
.action-btn {
    margin-right: 5px;
}

/* QR code preview styling (original comment preserved) */
#qrPreview {
    max-width: 100px;
    border: 1px solid #ccc;
}

/* QR code in print page (original comment preserved) */
#qrCode {
    margin: 0 auto;
}

/* Print page styling (original comment preserved) */
@media print {
    .btn, .container > *:not(#printContent) {
        display: none;
    }
    #printContent {
        text-align: center;
    }
}

/* === MOBILE-FRIENDLY HORIZONTAL SCROLL FOR PATROL LOGS === (preserved) */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.table th, .table td {
    padding: 0.75rem;
    vertical-align: middle;
    white-space: nowrap;
}

.table th:first-child, .table td:first-child {
    padding-left: 1rem;
}

.table th:last-child, .table td:last-child {
    padding-right: 1rem;
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
}

/* === INCORPORATED FROM __style.css === (preserved) */
#logsContainer,
.table-responsive > table,
.logs-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

#logsContainer .col,
#logsContainer .card {
    display: inline-block;
    width: 300px;
    margin-right: 12px;
    vertical-align: top;
    white-space: normal;
}

#logsContainer .card-body {
    word-wrap: break-word;
}

#logsContainer::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 6px;
}

#logsContainer::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
}

/* === ANIMATIONS, SHADOWS, AND EFFECTS FOR CARDS === (preserved) */
.card, .batch-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card:hover, .batch-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* === ANIMATIONS, SHADOWS, AND EFFECTS FOR BUTTONS === (preserved) */
.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* === PREVENT BUTTON STACKING – FORCE HORIZONTAL LAYOUT === (preserved) */
.d-flex.justify-content-between.align-items-center > div,
.d-flex.justify-content-between.align-items-center,
.d-flex.flex-nowrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    min-width: min-content;
}

.btn-group[role="group"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    justify-content: center !important;
    margin-left: auto;
    margin-right: auto;
}

.btn-group .btn,
.d-flex > .btn,
.d-flex > a.btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.d-flex.justify-content-between.align-items-center > div::-webkit-scrollbar,
.btn-group::-webkit-scrollbar,
.d-flex.flex-nowrap::-webkit-scrollbar {
    height: 0;
    width: 0;
    background: transparent;
}

/* === UNIFIED COLOR THEME === (preserved) */
.btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
}

.btn-outline-primary:hover {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

#logoutBtn {
    background-color: #dc3545;
    border-color: #dc3545;
}

#backToAdminBtn {
    background-color: #6c757d;
    border-color: #6c757d;
}

button[onclick*="dashboard.php"] {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

#sendBatchBtn {
    background-color: #198754;
    border-color: #198754;
}

.btn-success {
    background-color: #198754;
    border-color: #198754;
}

/* === UNIFY INSTALL APP BUTTON ON LOGIN PAGE === (preserved) */
#installBtn, .install-btn, button.install-app {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#installBtn:hover, .install-btn:hover, button.install-app:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* === RESPONSIVE HEADER TITLE – SYNCHRONIZED EARLY WRAP ON BOTH PAGES === */
/* // Header container – no wrap (preserved) */
.d-flex.justify-content-between.align-items-start {
    flex-wrap: nowrap !important;
    align-items: start;
    gap: 0.5rem;
}

/* // Title h2 – universal (preserved) */
.d-flex.justify-content-between.align-items-start h2 {
    flex: 1 1 auto;
    flex-shrink: 1;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    min-width: 0;
}

/* // Button container – top-right lock (preserved) */
.d-flex.justify-content-between.align-items-start > .d-flex.flex-nowrap {
    align-self: start;
    flex-shrink: 0;
}

/* // Mobile: wrap enabled at 720px for synchronized stacking */
@media (max-width: 720px) {
    .d-flex.justify-content-between.align-items-start h2 {
        white-space: normal;
        overflow-wrap: break-word;
        font-size: 1.75rem;
        line-height: 1.2;
    }
}

/* === FINAL: SCAN ACTION ROW STYLING === (preserved) */
#scanActionRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem;
    margin-bottom: 1rem;
}

#scanActionRow .btn {
    flex: 0 0 auto;
}

/* === SECTION HEADER AND BATCH HEADER EFFECTS === (preserved) */
.section-header {
    transition: background 0.2s ease;
}

.section-header:hover {
    background: #e9ecef;
}

.batch-header {
    transition: background 0.2s ease;
}

.batch-header:hover {
    background: #e9ecef;
}