/* ======================================================
   Modern Soft-Dark / Comfort Theme (Complete stylesheet)
   - Comfortable light-card UI
   - Responsive tables (mobile-friendly)
   - Accessible focus states
   - Used by search.php, student pages, print, etc.
   ====================================================== */

/* Reset & base */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #e5e7eb; /* page background */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1e293b;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Page container */
.container {
  max-width: 1100px;
  margin: 28px auto;
  padding: 28px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid #dbe2eb;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.12),
    inset 0 1px 1px rgba(255,255,255,0.8);
}

/* Header layout */
.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #cbd5e1;
  margin-bottom: 20px;
}

.header-left { display:flex; align-items:center; gap:14px; }
.header-left .logo { max-height: 60px; display:block; }

.title-wrap h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
}
.title-wrap h3 {
  margin: 0;
  font-size: 15px;
  color: #475569;
}

/* Header-right helper (for home button or actions) */
.header-right { display:flex; align-items:center; gap:12px; }

/* Home button */
.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(180deg,#3b82f6,#2563eb);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 16px rgba(37,99,235,0.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  text-decoration: none;
  cursor: pointer;
}
.home-btn svg { color: #e6eef8; opacity: 0.95; }
.home-btn:hover { transform: translateY(-3px); opacity: 0.98; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg,#2563eb,#1d4ed8);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 15px;
  box-shadow: 0 8px 18px rgba(37,99,235,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); opacity: 0.97; }

.btn-secondary {
  background: linear-gradient(180deg,#94a3b8,#64748b);
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(100,116,139,0.08);
}

/* Alerts */
.alert {
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.alert-success {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.alert-error {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

/* Tables (desktop) */
.table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  table-layout: auto; /* default, will be adjusted for mobile */
}

.table thead th {
  background: #f1f5f9;
  color: #1e293b;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid #e6eef9;
  text-align: left;
}

.table th, .table td {
  padding: 12px 14px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  vertical-align: middle;
  word-break: normal;
}

/* Inputs & selects (bright & comfortable) */
input[type="text"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  margin-bottom: 12px;
  font-size: 15px;
  transition: box-shadow .12s ease, border-color .12s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

select option {
  background: #ffffff;
  color: #1e293b;
  padding: 8px;
}

/* Focus states */
input:focus, select:focus, textarea:focus, .home-btn:focus, .btn:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.16);
}

/* Labels */
label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: #1e293b;
  font-size: 14px;
}

/* Utility classes */
.text-center { text-align: center; }
.text-muted { color: #64748b; }
.small { font-size: 13px; }

.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:16px; }
.mt-5 { margin-top:20px; }

/* ---------- Responsive table fixes (keeps all data visible on mobile) ---------- */

/* Allow breaking of long values, help wrapping */
.table,
.table th,
.table td {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Mobile: convert table to two-column grid per row for readability */
@media (max-width: 760px) {

  /* make the table background transparent to show cards */
  .table {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  /* Each row becomes a card with two columns: label (left) and value (right) */
  .table tbody tr, .table tr {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 10px;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(2,6,23,0.04);
  }

  /* Hide the original thead visually (but keep for screen readers) */
  .table thead { display: none; }

  /* Make previous th act like left labels */
  .table th {
    display: block;
    margin: 0;
    padding: 6px 8px;
    background: transparent;
    color: #0f172a;
    font-weight: 700;
  }

  .table td {
    display: block;
    padding: 6px 8px;
    color: #334155;
    border-bottom: none;
  }

  /* If your markup uses <tr><th>Label</th><td>Value</td></tr>, hide the separators */
  .table th, .table td { border-bottom: none; }

  /* For very narrow screens, stack label above value */
  @media (max-width: 420px) {
  .table tr { grid-template-columns: 1fr !important; }
  .table th { margin-bottom: 6px; }
}

/* ---------- Small screens / responsive tweaks ---------- */
@media (max-width: 900px) {
  .container { padding: 20px; margin: 18px; }
  .title-wrap h1 { font-size: 22px; }
  .title-wrap h3 { font-size: 13px; }
  .btn { width: 100%; padding: 12px; border-radius: 12px; }
  .home-btn { width: auto; padding: 10px 16px; font-size: 14px; }
}

/* Mobile header stacking */
@media (max-width: 560px) {
  .header-flex { flex-direction: column; align-items: stretch; gap: 12px; }
  .header-left { gap: 10px; align-items: flex-start; }
  .header-right { display:flex; justify-content: flex-end; }
  .home-btn { width: 100%; justify-content: center; border-radius: 12px; }
}

/* Print tweaks */
@media print {
  body { background: #fff; color: #000; }
  .container { box-shadow: none; border: none; background: #fff; padding: 8px; margin: 0; }
  .home-btn, .btn, .header-right { display: none !important; }
  .table thead { display: table-header-group; } /* repeat on multipage prints */
  .table tr { page-break-inside: avoid; }
}

/* Accessibility: focus-visible */
:focus-visible { outline: 3px solid rgba(59,130,246,0.18); outline-offset: 3px; }

/* Small helpers */
.small-muted { color: #94a3b8; font-size: 13px; }

/* Keep the container scrolling smooth on mobile */
.container { -webkit-overflow-scrolling: touch; }


/* ---------- Fix: ensure table rows/cells always visible ---------- */

/* Ensure table uses normal table rendering on desktop and medium screens */
@media (min-width: 761px) {
  .table {
    display: table !important;
    table-layout: auto !important;
    width: 100% !important;
    background: #ffffff !important;
    box-shadow: 0 6px 18px rgba(2,6,23,0.06) !important;
  }
  .table thead { display: table-header-group !important; }
  .table tbody { display: table-row-group !important; }
  .table tr { display: table-row !important; }
  .table th, .table td {
    display: table-cell !important;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 12px 14px;
    color: #334155 !important;
    vertical-align: middle;
  }
}

/* Force all table cells to be visible (in case some rule set visibility hidden) */
.table th, .table td {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make sure extremely long unbroken strings (IDs) wrap and do not overflow container */
.table td, .table th {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Mobile layout remains the card/grid style, but ensure no rows are hidden */
@media (max-width: 760px) {
  .table { background: transparent; box-shadow: none; }
  .table tr {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    gap: 10px;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(2,6,23,0.04);
  }
  .table thead { display:none !important; }
  .table th, .table td {
    display: block !important;
    padding: 6px 8px !important;
    border-bottom: none !important;
    word-break: break-word !important;
  }

  /* If any specific rows are still hidden due to zero height, force min-height */
  .table tr > * { min-height: 28px; }
}

/* Extra: ensure the container doesn't hide overflowed content on some mobile browsers */
.container { -webkit-overflow-scrolling: touch; overflow: visible !important; }

/* Debug helper (temporary) — uncomment if you need to visually find hidden rows:
.table tr { outline: 1px dashed rgba(59,130,246,0.12); }
*/


/* FIX: Prevent alert box from overlapping last table row on mobile */
@media (max-width: 760px) {
  
  /* Add spacing below the card-style table rows */
  .table {
    margin-bottom: 16px !important;
  }

  /* Ensure each row has enough space and does not collapse */
  .table tr {
    margin-bottom: 12px !important;
  }

  /* Add spacing above alerts */
  .alert {
    margin-top: 16px !important;
    position: relative;
    z-index: 5;
  }

  /* Make sure the table wrapper expands correctly */
  .table tbody {
    display: block !important;
  }

  /* Ensure nothing overlaps */
  .container {
    overflow: visible !important;
  }
}

/* ----------------- Admin page beautify (drop-in) ----------------- */
/* Keeps your HTML/PHP unchanged. Paste at the end of your style.css */

/* Layout helpers */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Page title */
.container h1 {
  margin: 0;
  font-size: 22px;
  color: #0f172a;
  letter-spacing: 0.2px;
}

/* Badge (logged in user) */
.badge {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg,#eff6ff,#e0f2fe);
  color: #1e40af;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(29,78,216,0.06);
  margin-right: 8px;
}

/* Quick action buttons */
.btn.btn-secondary {
  background: linear-gradient(180deg,#64748b,#475569);
  color: #fff !important;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(2,6,23,0.04);
}

/* Section headings */
.container h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #0b1220;
  font-weight: 700;
}

/* Quick Links list */
.container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.container ul li {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  box-shadow: 0 6px 14px rgba(2,6,23,0.03);
}
.container ul li a {
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
}
.container ul li a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Summary cards */
.container .summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.summary .card {
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #e6eef9;
  box-shadow: 0 8px 18px rgba(2,6,23,0.03);
}
.summary .card strong {
  display:block;
  font-size:20px;
  color:#0b1220;
  margin-top:8px;
}

/* Small helper text */
.container p, .container .small-note {
  color: #475569;
  margin: 6px 0 0 0;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .summary { grid-template-columns: 1fr; }
  .flex-between { gap: 10px; align-items: flex-start; }
  .container h1 { font-size: 20px; }
  .badge { font-size: 13px; padding: 7px 10px; }
}

/* Mobile spacing */
@media (max-width: 560px) {
  .container { padding: 16px; margin: 12px; border-radius: 10px; }
  .container ul li { padding: 12px; }
  .btn, .btn.btn-secondary { width: 100%; text-align: center; box-sizing: border-box; }
}

/* Accessibility: focus rings */
a:focus, .btn:focus, .badge:focus {
  outline: 3px solid rgba(59,130,246,0.14);
  outline-offset: 3px;
}

/* Print: hide interactive controls */
@media print {
  .btn, .badge { display:none !important; }
}

/* Mobile – Make login box bigger and full width */
@media (max-width: 600px) {

    body {
        background: #e5e7eb;
        padding: 0;
        margin: 0;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Make login card full width with comfortable padding */
    .login-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 28px 20px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .login-wrapper h1 {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .login-wrapper input {
        font-size: 16px;
        padding: 14px;
    }

    .login-wrapper .btn {
        padding: 14px;
        font-size: 17px;
        width: 100%;
    }
}

/* Modern Quick Link List */
.ql-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.ql-list li {
    margin-bottom: 12px;
}

.ql-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    color: #1e3a8a;
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0,0,0,0.04);
    transition: 0.18s ease;
}

.ql-list a:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

.ql-icon {
    background: #e0e7ff;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 18px;
    min-width: 34px;
    text-align: center;
}

/* Mobile friendly */
@media(max-width: 600px) {
    .ql-list a {
        padding: 14px;
        font-size: 15px;
    }
    .ql-icon {
        font-size: 18px;
    }
}

/* ---------- Desktop polish for Admin Dashboard (paste at end) ---------- */

/* Slightly increase max container width for desktop */
@media (min-width: 1100px) {
  .container {
    max-width: 1200px !important;
    padding: 36px 48px !important;
  }
}

/* Header: bigger title and floating logout */
@media (min-width: 900px) {
  .admin-header {
    align-items: center;
  }

  .admin-header h1 {
    font-size: 36px;
    margin: 0;
    color: #0b1220;
    letter-spacing: -0.3px;
  }

  /* Move user controls to the right and style the logout button */
  .admin-header > div {
    display:flex;
    align-items:center;
    gap:12px;
  }

  .badge {
    background: linear-gradient(180deg,#eef2ff,#e6f0ff);
    color: #0f172a;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.04);
    box-shadow: 0 6px 16px rgba(2,6,23,0.04);
  }

  .btn.btn-secondary {
    background: linear-gradient(180deg,#4b5563,#374151);
    padding: 10px 14px;
    border-radius: 12px;
    color: #fff !important;
    font-weight:700;
    box-shadow: 0 10px 26px rgba(55,65,81,0.08);
  }
}

/* Quick Links: two-column grid with icons and clean spacing */
@media (min-width: 900px) {
  .quick-links .ql-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
  }

  .quick-links .ql-list a {
    padding: 14px 18px;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border-radius: 12px;
    border: 1px solid #eef2f7;
    box-shadow: 0 8px 22px rgba(2,6,23,0.04);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
    color: #0b1220;
  }

  .quick-links .ql-list a .ql-icon {
    background: linear-gradient(180deg,#eef2ff,#e6f0ff);
    color: #0b1220;
    padding: 9px;
    border-radius: 10px;
    min-width: 40px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    margin-right:12px;
  }

  .quick-links .ql-list a:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(2,6,23,0.08);
    background: linear-gradient(180deg,#f8fbff,#f1f7ff);
  }

  /* Make each list item clickable area full width */
  .quick-links .ql-list li { margin: 0; }
  .quick-links .ql-list a { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:700; }

  /* Add subtle separators for readability */
  .card.quick-links h3 { margin-bottom:12px; }
}

/* Summary: horizontal stat cards */
@media (min-width: 900px) {
  .summary-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .summary-box {
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    box-shadow: 0 10px 26px rgba(2,6,23,0.04);
    text-align:center;
  }
  .summary-box p { margin:0; color:#64748b; font-weight:600; }
  .summary-box strong { font-size:24px; color:#0b1220; margin-top:8px; display:block; }
}

/* Card spacing + rounded canvas */
@media (min-width: 900px) {
  .card { border-radius: 14px; padding: 26px; }
  .card + .card { margin-top: 22px; }
}

/* Add more left padding for content area on very large screens */
@media (min-width: 1400px) {
  .container { padding-left: 64px; padding-right: 64px; }
}

/* Improve typography and spacing on desktop */
@media (min-width: 900px) {
  body { font-size: 16px; }
  .container h3 { font-size: 18px; margin-bottom:14px; }
  .container p { font-size: 15px; color:#475569; }
}

/* subtle hover cursor for whole quick-link card */
.quick-links .ql-list a { cursor: pointer; }

/* keep mobile behavior intact; only desktop enhanced */

@media (max-width: 760px) {
    .log-card {
        padding: 14px;
        margin: 10px 0;
        border-radius: 10px;
    }
    .container {
        padding: 14px !important;
        margin: 12px !important;
        width: 100% !important;
    }
}

/* ---------- Final polish fixes (append to end of stylesheet) ---------- */

/* 1) Ensure long strings (IDs) always wrap and don't overflow cards */
.table th, .table td {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

/* 2) Make table card rows slightly taller on mobile for readability */
@media (max-width: 760px) {
  .table tr {
    min-height: 44px !important;   /* gives comfortable tap target */
    padding: 12px !important;
  }

  .table th, .table td {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  /* make alerts appear above table rows (no overlap) */
  .alert {
    position: relative;
    z-index: 30;
    margin-bottom: 18px !important;
  }

  /* ensure the card/container pushes content below alerts */
  .table {
    margin-top: 8px !important;
    margin-bottom: 18px !important;
  }

  /* increase quick-link spacing on small screens */
  .ql-list a {
    padding: 14px !important;
  }
}

/* 3) Improve the "Print" page footer area (remove colored band) */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .container { background: #fff !important; box-shadow: none !important; border: none !important; }
  /* Force white footer area (some browsers print background gray) */
  .print-wrapper, .print-footer { background: #fff !important; color: #000 !important; }
}

/* 4) Increase clickable area for admin quick links on desktop */
@media (min-width: 900px) {
  .quick-links .ql-list a {
    padding: 16px 20px !important;
  }
}

/* 5) Slightly larger font for main dashboard heading on medium screens */
@media (min-width: 900px) and (max-width: 1400px) {
  .container h1 { font-size: 30px; }
}

/* 6) Accessibility: increase tap-targets for buttons on touch devices */
@media (pointer: coarse) {
  .btn, .home-btn, .btn-secondary, .ql-list a {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* 7) Prevent page content being hidden under fixed browser UI on small devices */
@media (max-width: 420px) {
  .container { padding-bottom: 40px !important; }
}

/* 8) Small visual improvement: slightly soften table card shadows for very large screens */
@media (min-width: 1400px) {
  .table { box-shadow: 0 10px 26px rgba(2,6,23,0.05) !important; }
}

/* Debug helper (uncomment during development)
.table tr { outline: 1px dashed rgba(59,130,246,0.12); }
*/

/* --------------------- FIX: Mobile View for Upload Logs --------------------- */

/* Force responsive card-style logs table on mobile */
@media (max-width: 760px) {

    /* Reduce container padding for full-screen look */
    .container {
        padding: 12px !important;
        margin: 8px !important;
        border-radius: 10px !important;
    }

    /* Convert upload logs table to card layout */
    .logs-table tr {
        display: grid !important;
        grid-template-columns: 40% 60% !important;
        background: #fff !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    }

    /* Hide header row */
    .logs-table thead {
        display: none !important;
    }

    .logs-table td {
        display: block !important;
        padding: 6px 4px !important;
        font-size: 15px !important;
        border-bottom: none !important;
        word-break: break-word !important;
    }

    /* Add label before each td for readability */
    .logs-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #0f172a;
        display: block;
        margin-bottom: 4px;
    }
}

/* -------------------- Small final fixes (append to end) -------------------- */

/* 1) Only show label-before for td on card-style mobile logs (prevent duplication on desktop) */
@media (max-width: 760px) {
  /* target only tables that use data-label (your logs table uses logs-table class) */
  .logs-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
    font-size: 13px;
  }

  /* don't show label-before for generic .table unless explicitly needed */
  .table:not(.logs-table) td::before { content: none !important; }
}

/* 2) Make alerts reliably above the table on mobile */
.alert {
  position: relative;
  z-index: 999;
}

/* 3) Extra safe spacing so alert won't overlap last card row on very small screens */
@media (max-width: 420px) {
  .table { margin-bottom: 28px !important; }
  .container { padding-bottom: 48px !important; } /* avoid fixed browser UI overlapping */
}

/* 4) Force white background in print (some browsers add gray margins) */
@media print {
  html, body { background: #fff !important; color:#000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-wrapper, .print-footer, .container { background: #fff !important; box-shadow:none !important; border:none !important; }
}

/* 5) Extra: ensure logs-table header hidden only when intended */
@media (max-width: 760px) {
  .logs-table thead { display: none !important; }
}

/* 6) If some mobile browsers collapse grid rows to 0 height, ensure min-height for card rows */
@media (max-width:760px) {
  .table tr { min-height: 42px !important; }
  .logs-table tr { min-height: 48px !important; }
}

/* 7) Tiny visual polish: slightly soften mobile card shadows for readability */
@media (max-width:760px) {
  .logs-table tr, .table tr { box-shadow: 0 6px 12px rgba(2,6,23,0.04) !important; }
}

/* -------------------- end of small fixes -------------------- */