/*
  Copyright (c) 2025 Jackson Austin / MillyTech Solutions LLC

  This stylesheet is part of the Inventory Manager project.
  Unauthorized copying, distribution, or modification is prohibited
  without express written permission from the owner.
*/

/* ========================================================
   WW Inventory Manager – WhiteWater Express Theme
   Centralized styles for layout, typography, navigation, tables,
   forms, and utility components across all views.
   ======================================================== */

/* =======================
   Global
   ======================= */
body {
    background: #0f131a;
    color: #ffffff;
    font-family: "Segoe UI", Arial, sans-serif;
}

/* Improve contrast of muted text on dark background */
.text-muted {
    color: #a8b2c2 !important;  /* lighter gray-blue, much more readable */
}

/* =======================
   Navbar
   ======================= */
.navbar {
    background: linear-gradient(90deg, #007bff, #00aaff);
    border-bottom: 3px solid #0066cc;
}

.navbar-brand img {
    height: 48px;
    border-radius: 8px;
    margin-right: 10px;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 1.3rem;
    color: #fff !important;
}

/* =======================
   Navbar UX improvements
   ======================= */

/* Make nav links a bit larger and spaced out */
.navbar-nav .nav-link {
    font-size: 0.95rem;
    padding: 0.45rem 1rem;
    opacity: 0.85;
}

/* Strong highlight for the current page */
.navbar-nav .nav-link.active {
    font-weight: 600;
    opacity: 1;
    border-bottom: 2px solid #ffffff;
}

/* Hover state so links feel clickable */
.navbar-nav .nav-link:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
}

/* Add a bit of horizontal breathing room between items */
.navbar-nav {
    gap: 0.35rem;
}

/* Keep right-side items aligned nicely (search, buttons, etc.) */
@media (min-width: 992px) {
    .navbar-nav.ms-auto {
        align-items: center;
        gap: 0.5rem;
    }
}

/* ============================
   Navbar right-side accents
   ============================ */

/* User dropdown pill */
.main-navbar .nav-item.dropdown .nav-link.dropdown-toggle {
    background: rgba(0, 0, 0, 0.20);       /* darker than the bar */
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    font-weight: 500;
}

.main-navbar .nav-item.dropdown .nav-link.dropdown-toggle:hover,
.main-navbar .nav-item.dropdown .nav-link.dropdown-toggle:focus {
    background: rgba(0, 0, 0, 0.35);
    border-color: #ffffff;
    text-decoration: none;
}

/* Help & About button – strong outline + hover fill */
.main-navbar .btn.btn-sm.btn-outline-info {
    border-color: #ffffff;
    color: #ffffff;
    font-weight: 500;
    border-radius: 999px;
    padding-inline: 0.9rem;
}

.main-navbar .btn.btn-sm.btn-outline-info:hover,
.main-navbar .btn.btn-sm.btn-outline-info:focus {
    background-color: #ffffff;
    color: #007bff;
}

/* =======================
   Buttons
   ======================= */
.btn-primary { background: #007bff; border-color: #006fe6; }
.btn-primary:hover { background: #0066cc; }

.btn-success { background: #1db954; border-color: #18a347; }
.btn-danger { background: #d93644; border-color: #c42f3b; }

.btn-warning { background: #ffc107; color: #000; border-color: #e0a800; }

/* =======================
   Cards
   ======================= */
.card {
    background: #1c222b;
    border: 1px solid #2e3a4a;
    border-radius: 12px;
    color: #e6eef5;
}

.card-header {
    background: #161b22;
    border-bottom: 1px solid #2e3a4a;
    font-weight: 600;
}

/* =======================
   Tables
   ======================= */
.table-sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.table-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.table {
    background: #1c222b;
    border-radius: 10px;
    overflow: hidden;
}

.table th {
    background: #15202b;
    color: #a7b8c9;
    white-space: nowrap;
    border-bottom: 1px solid #2c3644;
}

.table td {
    vertical-align: middle;
    color: #e6eef5;
    border-color: #2b3441;
    background-color: #1c222b;  /* dark row background so text is readable */
}

.table tbody tr:nth-of-type(odd) td,
.table tbody tr:nth-of-type(even) td {
    background-color: #1c222b;  /* force all rows to same dark color */
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* =======================
   Forms
   ======================= */

/* === High-contrast inputs (better on mobile) === */
.form-control {
    background-color: #020617;      /* almost black */
    color: #ffffff;                 /* pure white text */
    -webkit-text-fill-color: #ffffff; /* iOS Safari text color */
    border: 1px solid #4ea1ff;
    font-size: 1.05rem;             /* slightly larger text */
    font-weight: 500;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); /* gives text a subtle glow */
}

.form-control::placeholder {
    color: #ffffff;                 /* lighter placeholder */
    opacity: 1;
}

.form-control:focus {
    background-color: #000000;      /* full black when focused */
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.15rem rgba(96, 165, 250, 0.6);
}


/* =======================
   Footer
   ======================= */
.footer {
    text-align: center;
    padding: 15px;
    color: #ffffff;
    margin-top: 40px;
}

/* Smooth hover */
.btn, .nav-link, .card, .table {
    transition: all 0.2s ease-in-out;
}

/* Lightbox image – scale up/down to fit screen */
.lightbox-image {
    width: min(90vw, 700px);   /* fills most of the screen, but not insanely huge */
    max-height: 90vh;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 0.5rem;
}

/* ============================================================
   MOBILE TABLE FIXES (scrollable tables)
   ============================================================ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media (max-width: 768px) {
    table.table th,
    table.table td {
        padding: 0.75rem !important;
        font-size: 0.95rem !important;
        white-space: nowrap;
    }

    .qr-thumb { width: 35px !important; height: 35px !important; }
    .img-thumb { width: 35px !important; height: 35px !important; }
}

/* ============================================================
   CARD MODE ( <500px ) WITH BLUE LABELS + CENTERED TEXT
   ============================================================ */
@media (max-width: 500px) {

    /* Hide table headers */
    table.table thead { display: none; }

    /* Card container */
    table.table tbody tr {
        display: block;
        margin-bottom: 18px;
        padding: 18px;
        background: #161b22;
        border-radius: 12px;
        border: 1px solid #2c3644;
        text-align: center;
    }

    /* Data cells become stacked blocks */
    table.table tbody td {
        display: block;
        text-align: center;
        padding: 10px 0 !important;
        border: none !important;
    }

    /* 🔵 BLUE LABELS ABOVE EACH VALUE */
    table.table tbody td::before {
        content: attr(data-label);
        display: block;
        color: #4ea1ff;   /* Ocean Blue label */
        font-weight: 700;
        margin-bottom: 6px;
        font-size: 0.9rem;
        letter-spacing: 0.3px;
    }
}

/* ============================================================
   HIGH-CONTRAST OLED MOBILE MODE ( <768px )
   ============================================================ */
@media (max-width: 768px) {

    body {
        background: #000 !important;
        color: #e6eef5 !important;
    }

    .card,
    .card-dark,
    .table-responsive {
        background: #0d1117 !important;
        border-color: #30363d !important;
    }

    table.table {
        background: #0d1117 !important;
        color: #e6eef5 !important;
    }

    table.table th {
        background: #161b22 !important;
        color: #58a6ff !important;
        border-bottom: 1px solid #30363d !important;
    }

    table.table td {
        background: #0f141a !important;
        color: #e6eef5 !important;
        border-color: #30363d !important;
    }

    .qr-thumb { width: 40px !important; height: 40px !important; }
    .img-thumb { width: 55px !important; height: 55px !important; }

    .btn { white-space: nowrap; }
}

/* ============================================================
   SERIAL SCANNER CENTERING
   ============================================================ */
.serial-scanner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.serial-scanner-box {
    width: 100%;
    max-width: 360px;
    height: 260px;
    margin: 0 auto;
}

/* Slightly smaller box on very small phones */
@media (max-width: 576px) {
    .serial-scanner-box {
        max-width: 320px;
        height: 220px;
    }
}

/* Ensure video fills and is centered in the box */
.serial-scanner-box video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* ============================================================
   Tracking carrier badge
   ============================================================ */
.carrier-badge {
    background: #ffc107;      /* bright yellow, good contrast */
    color: #000;              /* black text for readability */
    font-weight: 600;
    border-radius: 999px;     /* pill shape */
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    vertical-align: middle;
}

/* Slightly bigger on phones so it's readable */
@media (max-width: 768px) {
    .carrier-badge {
        font-size: 0.8rem;
        padding: 0.15rem 0.6rem;
    }
}

/* ============================================================
   MaintainX buttons
   ============================================================ */
.btn-mtx-quick {
    background-color: #7fd3ff;  /* light blue */
    color: #000;
    border-color: #7fd3ff;
    font-weight: 500;
}

.btn-mtx-quick:hover,
.btn-mtx-quick:focus {
    background-color: #5bbff5;
    border-color: #5bbff5;
    color: #000;
}

.btn-mtx-open {
    background-color: #0052cc;  /* dark blue */
    color: #fff;
    border-color: #0052cc;
    font-weight: 500;
}

.btn-mtx-open:hover,
.btn-mtx-open:focus {
    background-color: #003f99;
    border-color: #003f99;
    color: #fff;
}


/* Collapsible form sections */
.form-section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.75rem;
    margin-top: 1.75rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-section-title::after {
    content: '▾';
    font-size: 0.75rem;
    opacity: 0.7;
}

.form-section-title.collapsed::after {
    content: '▸';
}

.form-section-body {
    padding-top: 0.5rem;
}

.form-section-body.collapsed {
    display: none;
}

/* ============================================================
   Maintenance dashboard: keep table column widths stable
   ============================================================ */

.maintenance-table {
    width: 100%;
    table-layout: fixed;          /* <-- key: stops column resizing per page */
}

.maintenance-table th,
.maintenance-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;          /* keep single-line cells so widths stay stable */
}

/* =========================================================
   Maintenance Dashboard (maintenance_dashboard.html)
   ========================================================= */

/* Toolbar */
.mx-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:.75rem;
}
.mx-toolbar .left,
.mx-toolbar .right{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  align-items:flex-end;
}
.mx-toolbar .right{
  margin-left:auto;
  justify-content:flex-end;
}
.mx-mini{
  font-size:.9rem;
  opacity:.9;
}

/* Pager row */
.mx-pager{
  display:flex;
  align-items:flex-end;
  gap:.75rem;
  justify-content:flex-end;
  margin:.25rem 0 .75rem;
}

/* Lock table sizing so it doesn't jump between pages */
.mx-table{
  width:100%;
  table-layout:fixed;
}
.mx-table th,
.mx-table td{
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mx-table td.part-name{
  white-space:normal; /* allow name to wrap */
}

/* Action button sizing */
.mx-actions .btn{
  min-width:74px;
}

/* Low stock row highlight */
.mx-low{
  box-shadow: inset 0 0 0 9999px rgba(220,53,69,.13);
}

/* Mobile cards */
.mx-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.03);
}
.mx-card .rowline{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
  font-size:.95rem;
  opacity:.95;
}
.mx-card .label{
  opacity:.7;
  margin-right:10px;
  flex:0 0 auto;
}
.mx-card .value{
  text-align:right;
  white-space:nowrap;
  flex:1 1 auto;
}

/* QR thumbnail (you already reference this class) */
.qr-thumb{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  cursor:zoom-in;
  display:inline-block;
}

/* Picture thumbnail */
.pic-thumb{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  cursor:zoom-in;
  display:inline-block;
}

/* Lightbox overlay (used for QR + Picture) */
.mx-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:24px;
}
.mx-lightbox.open{
  display:flex;
}
.mx-lightbox img{
  max-width:min(92vw, 900px);
  max-height:88vh;
  width:auto;
  height:auto;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  background:#0d1117;
}