/* public/CSS/login.css */
:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: rgba(17,24,39,.55);
  --green: #16a34a;
  --green-dark: #15803d;
  --field: #f3f4f6;
  --shadow: rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.login-wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 24px 16px;
  text-align:center;
}

.login-title{
  font-size: 44px;
  margin: 0 0 18px;
  font-weight: 800;
}
.logo-circle{
  margin-bottom: 24px;
}
.logo-img{
  width: 200px;        /* 🔼 increase logo size */
  height: auto;
  max-width: 70vw;
  object-fit: contain;
}

.login-form{
  width: min(420px, 92vw);
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.login-form input{
  height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(17,24,39,.18);
  background: #fff;
  outline: none;
  font-size: 15px;
}

.login-form input:focus{
  border-color: rgba(42,166,223,.6);
  box-shadow: 0 0 0 3px rgba(42,166,223,.18);
}

.login-btn{
  height: 44px;
  border: none;
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 10px 26px var(--shadow);
}

.login-btn:hover{
  background: var(--green-dark);
}

.login-msg{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  min-height: 16px;
}

/* accessibility helper */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  border:0;
}
/*end of login page css*/

/* =========================
   DASHBOARD (DARK THEME)
   ========================= */


:root{
  --bg: #0f141b;
  --panel: #171c24;
  --panel-2: #1e2530;
  --border: rgba(255,255,255,.10);
  --text: #e8edf5;
  --muted: rgba(232,237,245,.65);
  --accent: #18b36a;
  --accent-2: #129659;
  --danger: #ef4444;
}

/* Base wrapper */
.app-body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.app-shell{
  display:flex;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  width:260px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding: 16px 14px;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 10px 14px;
}

.sidebar-logo{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  padding:6px;
}

.sidebar-title{
  font-weight:900;
  font-size:18px;
  line-height:1.1;
}

.sidebar-subtitle{
  font-size:12px;
  opacity:.7;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding: 10px;
}

.nav-link{
  appearance:none;
  border:none;
  text-align:left;
  cursor:pointer;
  padding: 11px 12px;
  border-radius:12px;
  background: transparent;
  color: var(--text);
  font-weight:700;
  font-size:14px;
  opacity:.92;
}

.nav-link:hover{
  background: rgba(255,255,255,.06);
}

.nav-link.active{
  background: rgba(24,179,106,.18);
  outline: 1px solid rgba(24,179,106,.30);
}

/* Main */
.main-shell{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* Topbar */
.topbar{
  height:64px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 16px;
  gap: 12px;           /* ✅ prevents crowding */
  flex-wrap: nowrap;   /* ✅ prevents right buttons from dropping */
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 1 auto;      /* ✅ can shrink if needed */
  min-width: 0;        /* ✅ allows selects to ellipsis instead of pushing right side */
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left: auto;   /* ✅ hard-pins refresh/user/logout to the right */
  flex: 0 0 auto;
}

.top-select{
  height:38px;
  border-radius:12px;
  border: 1px solid var(--border);
  padding: 0 12px;
  background: var(--panel-2);
  color: var(--text);
  font-weight:700;
  outline:none;

  max-width: 220px;        /* ✅ stops long location names from shoving buttons */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-select:focus{
  outline: 2px solid rgba(24,179,106,.35);
}


.icon-btn{
  height:38px;
  width:38px;
  border-radius:12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor:pointer;
  font-weight:900;
}

.icon-btn:hover{
  background: rgba(255,255,255,.08);
}

.btn{
  height:38px;
  padding: 0 12px;
  border-radius:12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor:pointer;
  font-weight:800;
}

.btn-danger{
  border-color: rgba(239,68,68,.35);
}

.btn-danger:hover{
  background: rgba(239,68,68,.14);
}

/* Content (widgets) */
.content{
  padding: 24px;
}

.page-head{
  margin-bottom: 14px;
}

.page-title{
  margin:0;
  font-size:22px;
  font-weight:900;
}

/* Cards */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;                
  margin-bottom: 20px;
}

.grid-3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;               
  margin-bottom: 20px; 
}

.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.card-header{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.card-title{
  font-weight:900;
}

.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0; /* ✅ critical for scroll containment */
}


.link-btn{
  appearance:none;
  border:none;
  background: transparent;
  color: rgba(24,179,106,.95);
  font-weight:900;
  cursor:pointer;
}

.link-btn:hover{
  text-decoration: underline;
}

.empty-state{
  color: var(--muted);
  font-weight:700;
}
.widget-scroll{
  max-height: 180px;          /* ✅ this is what forces scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;         /* keeps scrollbar off text */
  -webkit-overflow-scrolling: touch;
}



/* Responsive */
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; }
  .sidebar-nav{
    flex-direction:row;
    overflow:auto;
    white-space:nowrap;
  }
  .nav-link{ text-align:center; }
}
/*end of dashboard*/
/* =========================
   PROPERTIES PAGE — FINAL
   Scope: #propertiesView only
   ========================= */

#propertiesView{
  width: 100%;
}

/* Header bar: match Inventory/Eq, but stack so search is below buttons */
#propertiesView .inventory-topbar{
  background: #0f172a;
  border-radius: 16px;
  margin-bottom: 14px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;

  justify-content: space-between;

  /* ✅ prevent rounded container from clipping scroll children */
  overflow: visible;
}

/* Title stays left */
#propertiesView .inventory-title{
  display:flex;
  align-items:center;
  gap:10px;

  flex: 1 1 auto;
  min-width: 240px;
}

#propertiesView .inventory-title h2{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* Actions stay on the first row (right side) */
#propertiesView .inventory-actions{
  display:flex;
  align-items:center;
  gap: 10px;

  flex: 0 0 auto;
  justify-content:flex-end;
  flex-wrap: wrap;

  order: 2;

  /* ✅ prevent scroll-row clipping */
  min-width: 0;
}

/* Search row goes BELOW, aligned RIGHT under the buttons */
#propertiesView .inv-searches{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;

  width: 100%;
  flex: 0 0 100%;
  order: 3;

  justify-content: flex-end;

  min-width: 0;
}

/* Search pill */
#propertiesView .inv-search{
  width: 320px;
  max-width: 100%;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  outline: none;
}

#propertiesView .inv-search::placeholder{
  color: rgba(255,255,255,0.55);
}

#propertiesView .inv-search:focus{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.16);
}

/* Buttons: match other pages */
#propertiesView .btn-primary{
  background: #3b82f6;
  color: #fff;
}
#propertiesView .btn-primary:hover{ opacity: 0.92; }

#propertiesView .btn-dark{
  background: rgba(255,255,255,0.12);
  color: #fff;
}
#propertiesView .btn-dark:hover{ opacity: 0.92; }

/* ✅ Pagination: centered + FORCE buttons visible */
#propertiesView .pagination-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: 14px 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

#propertiesView .pagination-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Fix “pagination buttons missing” even if another CSS block hid them */
#propertiesView .pagination-controls .page-btn{
  display: inline-flex !important;
}

#propertiesView .page-meta,
#propertiesView .page-size{
  text-align:center;
}

/* Row click cue */
#propertiesView #propertiesTable tbody tr{
  cursor: pointer;
}
#propertiesView #propertiesTable tbody tr:hover{
  background: rgba(255,255,255,0.07);
}

/* =========================
   MOBILE: match Inventory behavior
   + fix button clipping
   ========================= */
@media (max-width: 640px){

  /* header stacks clean */
  #propertiesView .inventory-topbar{
    flex-direction: column;
    align-items: stretch;
    padding: 14px 12px;
    gap: 12px;

    overflow: visible !important;
    box-sizing: border-box;
  }

  /* ✅ force Inventory-style stacking */
  #propertiesView .inventory-actions{
    width: 100%;
    flex: 1 1 100%;
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-width: 0;
  }

  /* ✅ horizontal scroll row like Inventory, but with safe padding */
  #propertiesView .inv-actions-scroll{
    width: 100%;
    display:flex;
    flex-direction: row;
    gap:10px;

    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;

    flex-wrap: nowrap;
    scrollbar-width: none;
    touch-action: pan-x;

    /* ✅ padding prevents last pill clipping */
    padding: 2px 12px 8px 12px;
    box-sizing: border-box;

    /* ✅ NO negative margins */
    margin: 0;

    /* ✅ critical so it can shrink inside flex parents */
    min-width: 0;
  }

  #propertiesView .inv-actions-scroll::-webkit-scrollbar{ display:none; }

  #propertiesView .inv-actions-scroll .btn{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ✅ tail spacer so last pill can fully scroll into view */
  #propertiesView .inv-actions-scroll::after{
    content: "";
    flex: 0 0 18px;
  }

  /* Search goes full-width on mobile */
  #propertiesView .inv-searches{
    justify-content: stretch;
    width: 100%;
  }
  #propertiesView .inv-search{
    width: 100%;
  }

  /* show only Property Name column (optional) */
  #propertiesTable thead th:not(:first-child),
  #propertiesTable tbody td:not(:first-child){
    display: none !important;
  }
  #propertiesTable thead th:first-child,
  #propertiesTable tbody td:first-child{
    width: 100% !important;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
  }
}

/* =========================
   Parts Inventory (Design)
   ========================= */

.inventory-page {
  width: 100%;
}

.inventory-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #0f172a;
  color: #fff;
  margin-bottom: 14px;
}

.inventory-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inventory-title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.inv-icon {
  font-size: 18px;
  opacity: 0.95;
}

.inventory-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;              /* ✅ restore natural wrapping */
  justify-content: flex-end;
}

/* =========================
   Buttons
   ========================= */

.btn {
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-dark {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.btn-dark:hover {
  opacity: 0.92;
}

.btn-primary {
  background: #3b82f6;
  color: #fff;
}

.btn-primary:hover {
  opacity: 0.92;
}

#btnAddPart {
  white-space: nowrap;          /* ✅ keep label intact */
}

/* =========================
   Search Inputs
   ========================= */

.inv-searches {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;              /* ✅ allow search to drop nicely */
}

.inv-search {
  width: 240px;                 /* ✅ restore the clean fixed pills */
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  outline: none;
}

.inv-search::placeholder {
  color: rgba(255,255,255,0.55);
}

.inv-search:focus {
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.16);
}

/* =========================
   Inventory Table (Dark, Banded)
   ========================= */

.inventory-table-wrap {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.inventory-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  background: transparent;
}

/* Remove all default table backgrounds */
.inventory-table thead,
.inventory-table tbody,
.inventory-table tr,
.inventory-table th,
.inventory-table td {
  background: transparent;
}

/* Header */
.inventory-table thead th {
  color: rgba(255,255,255,0.88);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

/* Row bands */
.inventory-table tbody tr {
  background: rgba(255,255,255,0.04);
}

.inventory-table tbody td {
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 16px;
  border: none;
}

/* Rounded row edges */
.inventory-table tbody tr td:first-child {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.inventory-table tbody tr td:last-child {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Hover */
.inventory-table tbody tr:hover {
  background: rgba(255,255,255,0.07);
}

/* Empty state */
.inventory-table tbody td[colspan] {
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  text-align: center;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  padding: 22px 16px;
}

/* =========================
   Inline Inputs
   ========================= */

.inventory-table .cell-input {
  width: 86px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 8px 10px;
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  outline: none;
}

.inventory-table .cell-input:focus {
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.16);
}

/* =========================
   Status Pills
   ========================= */

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
}

.status-pill.in {
  background: rgba(34,197,94,0.16);
  color: rgba(187,247,208,0.95);
  border-color: rgba(34,197,94,0.28);
}

/* =========================
   Pagination
   ========================= */

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.page-meta,
.page-size {
  font-size: 12px;
  opacity: 0.75;
  color: rgba(255,255,255,0.75);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-btn {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

.page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.page-btn.active {
  background: rgba(59,130,246,0.95);
  color: #fff;
  border-color: rgba(59,130,246,0.25);
}

/* =========================
   MOBILE: Inventory layout
   (buttons scroll, searches fixed, table simplified)
   ========================= */
@media (max-width: 640px) {

  /* Topbar stacks nicely */
  .inventory-topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .inventory-actions{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* ✅ Buttons become a horizontal scroll row */
  .inv-actions-scroll{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 6px;
    flex-wrap: nowrap;
    scrollbar-width: none; /* Firefox */
    touch-action: pan-x;   /* ✅ iPhone swipe */
  }
  .inv-actions-scroll::-webkit-scrollbar{
    display: none; /* Chrome/Safari */
  }
  .inv-actions-scroll .btn{
    flex: 0 0 auto;
    white-space: nowrap;
  }


  /* ✅ Table: show ONLY Product Name */
  #partsInventoryTable thead th:not(:first-child),
  #partsInventoryTable tbody td:not(:first-child){
    display: none !important;
  }

#partsInventoryTable thead th:first-child,
#partsInventoryTable tbody td:first-child{
  width: 100% !important;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

}
  /* Make product name feel clickable */
.inventory-table .part-name {
  cursor: pointer;          /* fixes I-beam cursor */
}

.inventory-table .part-name:hover {
  text-decoration: underline;
}
/* end of parts inventory css */

/* =========================
   MODALS (Universal - Dark)
   (safe: only targets .modal* classes)
   ✅ FIX: single source of truth for visibility
   ========================= */

.modal {
  position: fixed;
  inset: 0;

  /* default: closed */
  display: none;
  pointer-events: none;

  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

/* open */
.modal.is-open,
.modal[aria-hidden="false"] {
  display: flex !important;
  pointer-events: auto !important;
}

/* closed hard lock */
.modal[aria-hidden="true"],
.modal[hidden] {
  display: none !important;
  pointer-events: none !important;
}



.modal__panel {
  position: relative;
  width: min(980px, 96vw);
  max-height: min(84vh, 820px);
  overflow: hidden;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 22px 70px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
}

.modal__header {
  padding: 14px 16px;
  background: #0f172a;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal__title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}

.modal__sub {
  margin-top: 2px;
  font-size: 13px;
  color: rgba(232,237,245,0.72);
  font-weight: 700;
}

.modal__x {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal__x:hover {
  background: rgba(255,255,255,0.10);
}

.modal__body {
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
}

.modal__footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(23,28,36,0.96);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Footer split: left tools + right actions */
.modal__footer--split{
  justify-content: space-between; /* overrides default flex-end */
  align-items: center;
}

.modal__footer-left,
.modal__footer-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.modal__footer-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex:1;
}
.modal__icon-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255,255,255,.6);
}

.modal__icon-btn:hover {
  background: rgba(255,255,255,.08);
}

.modal__icon-btn--danger {
  color: #ef4444;
}

.modal__icon-btn--danger:hover {
  background: rgba(239,68,68,.15);
}

/* =========================
   Form layout inside modals
   ========================= */

.form-row {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.form-row.full { grid-template-columns: 1fr; }
.form-row.two  { grid-template-columns: 1fr 1fr; }

.field .label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(232,237,245,0.88);
  margin-bottom: 6px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(232,237,245,0.92);
  padding: 12px 12px;
  outline: none;
  font-weight: 800;
  font-size: 14px;
}


.field textarea {
  resize: vertical;
  min-height: 96px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(232,237,245,0.45);
  font-weight: 700;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.16);
}


/* "Textable dropdown" combo */
.combo {
  position: relative;
}

.combo input,
.combo select {
  padding-right: 34px;
}


.combo__chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.65;
  font-weight: 900;
  pointer-events: none;
}
.combo select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.06);
  color: rgba(232,237,245,0.92);
}
/* ✅ Hide native datalist dropdown arrow (Chrome/Edge) so only .combo__chev shows */
.combo input[list]::-webkit-calendar-picker-indicator{
  opacity: 0;
  display: none;
}

/* Optional: prevents some browsers from adding extra native UI */
.combo input[list]{
  -webkit-appearance: none;
  appearance: none;
}

/* Checkbox row */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: rgba(232,237,245,0.88);
  padding: 4px 0;
}

.check input {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
}

/* Sections (Locations & Stock / Transfer Stock) */
.section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section__title {
  font-weight: 900;
  color: rgba(232,237,245,0.92);
}

.section__hint {
  color: rgba(232,237,245,0.60);
  font-weight: 700;
  font-size: 12px;
  margin-left: auto;
}

.stock-rows {
  display: grid;
  gap: 10px;
}

.stock-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.stock-row .sr-qty,
.stock-row .sr-rp {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(232,237,245,0.92);
  padding: 12px 12px;
  font-weight: 900;
  outline: none;
}

.stock-row .sr-qty:focus,
.stock-row .sr-rp:focus {
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.16);
}

.icon-mini {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(232,237,245,0.9);
  cursor: pointer;
  font-weight: 900;
}

.icon-mini:hover {
  background: rgba(255,255,255,0.10);
}

.transfer-bar {
  display: flex;
  justify-content: flex-start;
}

/* Mini modal sizing */
.modal--mini .modal__panel {
  width: min(560px, 96vw);
  max-height: min(60vh, 520px);
}

/* Mobile stacking inside modal */ 
@media (max-width: 640px) {

  .form-row.two { 
    grid-template-columns: 1fr; 
  }

  .stock-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }

  .stock-row .combo { 
    grid-column: 1 / -1; 
  }

  .stock-row .icon-mini { 
    justify-self: end; 
  }
@media (max-width: 640px){

  /* keep one row */
  .pagination-bar { flex-wrap: nowrap; }
  .pagination-controls { flex-wrap: nowrap; }

  /* ✅ show only: Prev + first 3 page buttons + Next */
  .pagination-controls .page-btn{
    display: none;
  }

  /* Prev */
  .pagination-controls .page-btn:first-child{
    display: inline-flex;
  }

  /* 1,2,3 (the next three buttons after Prev in your current render) */
  .pagination-controls .page-btn:nth-child(2),
  .pagination-controls .page-btn:nth-child(3),
  .pagination-controls .page-btn:nth-child(4){
    display: inline-flex;
  }

  /* Next */
  .pagination-controls .page-btn:last-child{
    display: inline-flex;
  }

  /* optional: if you have a "..." element, hide it on mobile */
  .pagination-controls .ellipsis,
  .pagination-controls .dots{
    display: none !important;
  }
}

  /* ✅ MODAL FOOTER STACKING (mobile only) */
  .modal__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .modal__footer-left,
  .modal__footer-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .modal__footer-left .btn,
  .modal__footer-right .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* File upload button inside Import modal */
.file-upload__btn {
  cursor: pointer;
}
.file-name{
  margin-left: 10px;
  font-weight: 800;
  opacity: 0.85;
  display: inline-block;
}
#importModal #importFileName{
  display: block;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
  font-weight: 700;
}

/* ===== Media section in Part modal (compact but readable) ===== */
.media-mini-row{
  display:flex;
  gap: 20px;
  align-items:flex-start;
  flex-wrap: wrap;
}

.media-mini{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.media-mini__label{
  font-weight: 900;
  color: rgba(232,237,245,0.92);
}

/* 🔼 slightly bigger preview squares (matches old modal scale) */
.media-mini__box{
  width: 160px;
  height: 130px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.media-mini__empty{
  color: rgba(232,237,245,0.55);
  font-weight: 800;
  font-size: 13px;
  text-align:center;
  padding: 10px;
}

/* thumbnails when photos exist */
.media-thumb{
  width: 100%;
  height: 100%;
}

.media-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Mobile */
@media (max-width: 640px){
  .media-mini-row{
    gap: 14px;
  }

  .media-mini__box{
    width: 140px;
    height: 115px;
  }
}

/* =========================
   Supplies Request modal (dark)
   ========================= */
#suppliesRequestModal .section { margin-top: 14px; }

.sr-items{
  display: grid;
  gap: 10px;
}

.sr-items__head{
  display: grid;
  grid-template-columns: 2fr 0.7fr 2fr 44px;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(232,237,245,0.75);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.sr-item-row{
  display: grid;
  grid-template-columns: 2fr 0.7fr 2fr 44px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.sr-tip{
  color: rgba(232,237,245,0.62);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 2px 0;
}

@media (max-width: 640px){
  .sr-items__head{ display:none; }
  .sr-item-row{
    grid-template-columns: 1fr;
  }
  .sr-item-row .icon-mini{
    justify-self: end;
  }
}
/* end of request modal css */

/* ========================= 
   Parts Requests — FINAL (single block)
   Scope: #partsRequestsView only
   ========================= */

#partsRequestsView{
  color-scheme: dark;
}

/* prevent dropdown menus being clipped by rounded containers */
#partsRequestsView .card-body,
#partsRequestsView .table-wrap{
  overflow: visible;
}

/* ---- table = inventory-style row cards ---- */
#partsRequestsView table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;     /* row gap like Inventory */
  table-layout: fixed;        /* respects <colgroup> */
}

#partsRequestsView thead th{
  text-align: left;
  padding: 10px 14px;
  font-weight: 700;
  opacity: .85;
  white-space: nowrap;
}

/* each row looks like a card */
#partsRequestsView tbody td{
  padding: 14px 14px;
  vertical-align: middle;
  background: rgba(255,255,255,0.04);
}

#partsRequestsView tbody td:first-child{
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

#partsRequestsView tbody td:last-child{
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* ---- header controls (search + top status filter) ---- */
#partsRequestsView #partsReqSearch.inv-search{
  height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  outline: none;
}

#partsRequestsView #partsReqStatus.parts-req-filter-select{
  height: 38px;
  border-radius: 999px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  outline: none;
  font-weight: 700;
  cursor: pointer;
}

#partsRequestsView #partsReqSearch.inv-search:hover,
#partsRequestsView #partsReqStatus.parts-req-filter-select:hover{
  background: rgba(255,255,255,0.09);
}

#partsRequestsView #partsReqSearch.inv-search:focus,
#partsRequestsView #partsReqStatus.parts-req-filter-select:focus{
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}

/* ---- row status dropdown (fits your 110px Status col) ---- */
#partsRequestsView tbody td:nth-child(6){
  /* DO NOT use flex here; it can fight table layout in some browsers */
  text-align: left;
  padding-left: 10px;     /* gives it a little “left pull” */
  padding-right: 10px;
}

#partsRequestsView .sr-status-select{
  width: 100%;            /* fill the 110px col nicely */
  height: 36px;
  border-radius: 999px;
  box-sizing: border-box;

  padding: 0 34px 0 14px; /* room for arrow */
  font-size: 14px;
  font-weight: 600;

  /* solid pill (not see-through) */
  background: #2a303a;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;

  cursor: pointer;
  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* custom arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, #bfc5d0 50%),
    linear-gradient(135deg, #bfc5d0 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

#partsRequestsView .sr-status-select:hover{ background:#323a46; }
#partsRequestsView .sr-status-select:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59,130,246,0.25);
}

/* option readability (works where supported) */
#partsRequestsView select option,
#partsRequestsView select optgroup{
  background: #0b1220;
  color: #fff;
}

/* =========================
   ✅ DELETE BUTTON (desktop + mobile)
   ========================= */

#partsRequestsView tbody td:nth-child(7){
  text-align: right;
  padding-left: 10px;
  padding-right: 12px;
}

#partsRequestsView .sr-del-btn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

#partsRequestsView .sr-del-btn:hover{
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.35);
}

#partsRequestsView .sr-del-btn:active{
  transform: translateY(1px);
}

/* keeps icon centered consistently */
#partsRequestsView .sr-del-btn svg,
#partsRequestsView .sr-del-btn span{
  display: block;
  line-height: 1;
}
/* Parts Requests: show hand cursor on clickable rows */
#partsRequestsView tbody tr[data-sr-id] {
  cursor: pointer;
}

/* Optional: nicer hover so it feels clickable */
#partsRequestsView tbody tr[data-sr-id]:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* =========================
   MOBILE: keep styling same, but show delete too
   ========================= */

@media (max-width: 768px){

  /* Header controls stay clean */
  #partsRequestsView .card-header{
    flex-wrap: wrap;
    row-gap: 10px;
    overflow: visible !important;
  }

  #partsRequestsView .card-header > div{
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }

  /* Hide table header */
  #partsRequestsView thead{
    display: none;
  }

  #partsRequestsView table,
  #partsRequestsView tbody{
    display: block;
  }

  /* Each request = its own card */
  #partsRequestsView tbody tr{
    display: block;
    margin-bottom: 14px; /* 👈 space between cards */
  }

  /* Hide all cells by default */
  #partsRequestsView tbody td{
    display: none;
  }

  /* Show Date + Part */
  #partsRequestsView tbody td:nth-child(1),
  #partsRequestsView tbody td:nth-child(2){
    display: block;
    width: 100%;
  }

  /* ✅ ALSO show Delete (keeps same button styling) */
  #partsRequestsView tbody td:nth-child(7){
    display: block;
    width: 100%;
    background: transparent;     /* don't change look of main card */
    padding: 10px 16px 0 16px;   /* sits under the card */
    text-align: right;
  }

  /* Card container (Part cell becomes the card) */
  #partsRequestsView tbody td:nth-child(2){
    background: rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 14px 16px;
  }

  /* Date sits INSIDE card, above part */
  #partsRequestsView tbody td:nth-child(1){
    padding: 0 0 6px 0;
    margin-bottom: -6px; /* gentle tuck, not overlap */
    font-size: 12px;
    opacity: 0.7;
    font-weight: 600;
  }

  /* Part name */
  #partsRequestsView tbody td:nth-child(2){
    padding-top: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Remove table spacing quirks */
  #partsRequestsView table{
    border-spacing: 0;
  }
}

@media (max-width: 768px){

  /* Date should be plain text, not a pill */
  #partsRequestsView tbody td:nth-child(1){
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

}
/* =========================
   LOW STOCK PAGE — final
   Scope: #lowStockView only
   ========================= */

#lowStockView table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
  table-layout: fixed;
}

#lowStockView thead th{
  text-align: left;
  padding: 10px 14px;
  font-weight: 700;
  opacity: .85;
  white-space: nowrap;
}

#lowStockView tbody td{
  padding: 14px 14px;
  vertical-align: middle;
  background: rgba(255,255,255,0.04);
}

/* rounded “request-style” rows */
#lowStockView tbody td:first-child{
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
#lowStockView tbody td:last-child{
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

#lowStockView tbody tr:hover td{
  background: rgba(255,255,255,0.07);
}

/* =========================
   EQUIPMENT PAGE — match Inventory styling
   Scope: #equipmentView only
   ========================= */

#equipmentView{
  width: 100%;
}

/* Ensure the topbar matches your inventory header “pill” */
#equipmentView .inventory-topbar{
  background: #0f172a;              /* same as inventory-topbar */
  border-radius: 16px;
  margin-bottom: 14px;
}

/* Keep searches aligned/identical */
#equipmentView .inv-searches{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

#equipmentView .inv-search{
  width: 240px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  outline: none;
}

#equipmentView .inv-search::placeholder{
  color: rgba(255,255,255,0.55);
}

#equipmentView .inv-search:focus{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.16);
}

/* Make action buttons behave like Inventory on mobile */
#equipmentView .inventory-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* The horizontal scroll row you used in Inventory */
#equipmentView .inv-actions-scroll{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: nowrap;
}

/* Table wrapper: same “floating rows” look */
#equipmentView .inventory-table-wrap{
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* If your equipment table uses inventory-table class */
#equipmentView .inventory-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  background: transparent;
}

/* Remove default table backgrounds */
#equipmentView .inventory-table thead,
#equipmentView .inventory-table tbody,
#equipmentView .inventory-table tr,
#equipmentView .inventory-table th,
#equipmentView .inventory-table td{
  background: transparent;
}

/* Header */
#equipmentView .inventory-table thead th{
  color: rgba(255,255,255,0.88);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

/* Row bands */
#equipmentView .inventory-table tbody tr{
  background: rgba(255,255,255,0.04);
}

#equipmentView .inventory-table tbody td{
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 16px;
  border: none;
}

/* Rounded row edges */
#equipmentView .inventory-table tbody tr td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
#equipmentView .inventory-table tbody tr td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Hover */
#equipmentView .inventory-table tbody tr:hover{
  background: rgba(255,255,255,0.07);
}

/* Empty state row */
#equipmentView .inventory-table tbody td[colspan]{
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  text-align: center;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  padding: 22px 16px;
}

/* Pagination: identical spacing */
#equipmentView .pagination-bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  padding: 14px 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* =========================
   MOBILE: match Inventory behavior
   ========================= */
@media (max-width: 640px){

  #equipmentView .inventory-topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #equipmentView .inventory-actions{
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Actions become scroll row */
  #equipmentView .inv-actions-scroll{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 6px;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  #equipmentView .inv-actions-scroll::-webkit-scrollbar{ display:none; }

  #equipmentView .inv-actions-scroll .btn{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
/* ========================= 
   MOBILE: Equipment list (like Inventory mobile)
   Show Asset ID + Location as a full-width card
   ========================= */
@media (max-width: 640px){

  /* Kill the table layout / column widths */
  #equipmentView #equipmentTable{
    display: block;
    width: 100%;
  }
  #equipmentView #equipmentTable colgroup,
  #equipmentView #equipmentTable col{
    display: none !important;
  }

  /* Hide desktop header row */
  #equipmentView #equipmentTable thead{
    display: none;
  }

  /* Make body a vertical list */
  #equipmentView #equipmentTable tbody{
    display: block;
    width: 100%;
  }

  /* Full-width “card” row */
  #equipmentView #equipmentTable tbody tr{
    display: block;
    width: 100%;
    background: rgba(255,255,255,0.04);
    border-radius: 16px;
    padding: 14px;
    margin: 10px 0;
  }

  /* Full-width cells stacked */
  #equipmentView #equipmentTable tbody td{
    display: block;
    width: 100%;
    padding: 0;
    border: none;
  }

  /* Hide non-mobile fields (just in case) */
  #equipmentView #equipmentTable tbody td:nth-child(2),
  #equipmentView #equipmentTable tbody td:nth-child(4),
  #equipmentView #equipmentTable tbody td:nth-child(5){
    display: none !important;
  }

  /* Asset ID */
  #equipmentView #equipmentTable tbody td:nth-child(1){
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
  }

  /* Location */
  #equipmentView #equipmentTable tbody td:nth-child(3){
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.8;
  }
}
/* =========================
   Equipment row hover cue
   ========================= */
#equipmentView #equipmentTable tbody tr {
  cursor: pointer;
}

#equipmentView #equipmentTable tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}
/* ✅ Clean QR fit inside the mini box */
#equipQrBox{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;            /* clips corners */
  border-radius:16px;         /* match your UI */
  background: rgba(255,255,255,0.03);
}

/* QRCode.js usually inserts img or canvas */
#equipQrBox img,
#equipQrBox canvas{
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;        /* for img */
  border-radius: 12px;        /* softer inner rounding */
}

/* Optional: give the QR a little breathing room */
#equipQrBox{
  padding: 6px;
}
#equipQrBox img,
#equipQrBox canvas{
  width: calc(100% - 20px) !important;
  height: calc(100% - 20px) !important;
}
/* end of equipment view css */


/* =========================
   CALENDAR PAGE
========================= */
.cal-wrap { padding: 18px; }

.cal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
}

.cal-title{ display:flex; align-items:center; gap:12px; }
.cal-icon{ font-size:22px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; background: rgba(255,255,255,.10); }
.cal-h1{ font-size: 26px; font-weight: 800; line-height: 1.1; }
.cal-sub{ opacity:.75; font-size: 13px; margin-top:2px; }

.cal-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

.cal-nav{ display:flex; align-items:center; gap:10px; padding-left:4px; }
.cal-month{ min-width: 140px; text-align:center; font-weight: 700; }

/* Dropdown */
.cal-view{ position:relative; }
.cal-caret{ opacity:.8; margin-left:8px; }

.cal-chip.is-closed{
  text-decoration: line-through;
  opacity: .55;
  filter: grayscale(0.25);
}
/* ✅ Calendar: closed occurrence styling (chips + popover list) */
.cal-chip.is-closed,
.cal-popover-item.is-closed,
.cal-popover-item .is-closed{
  text-decoration: line-through;
  opacity: .55;
  filter: grayscale(.25);
}

/* (Optional) keep hover from “undoing” the closed look */
.cal-chip.is-closed:hover,
.cal-popover-item.is-closed:hover{
  background: rgba(255,255,255,.08);
}

/* ✅ View button match (light gray, readable) */
#pageCalendar #calViewBtn{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
#pageCalendar #calViewBtn:hover{
  background: rgba(255,255,255,.18);
}
#pageCalendar #calViewBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.22);
}

/* ✅ Admin select match (light gray, readable) */
#pageCalendar #calUserSelect{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
#pageCalendar #calUserSelect:hover{
  background: rgba(255,255,255,.18);
}
#pageCalendar #calUserSelect:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.22);
}

/* ✅ Dropdown menu: FLOATING (never clipped) */
.cal-menu{
  position: fixed;            /* ✅ key */
  top: 0;                     /* JS will set */
  right: 0;                   /* JS will set */
  min-width: 200px;
  border-radius: 14px;

  background: rgb(30, 33, 38);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 50px rgba(0,0,0,.55);

  padding: 8px;
  z-index: 9999;              /* stay above header */
}

.cal-menu[aria-hidden="true"]{ display:none; }
/* =========================
   Calendar view dropdown polish
========================= */

/* subtle entrance */
.cal-menu{
  animation: calMenuIn .12s ease-out;
}

/* clean list spacing */
.cal-menu-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;

  background: transparent;
  border: 0;
  cursor: pointer;

  transition:
    background .12s ease,
    transform .08s ease;
}

/* hover */
.cal-menu-item:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

/* active (current view) */
.cal-menu-item.is-active{
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* keyboard focus */
.cal-menu-item:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

/* divider option (optional if you add <hr>) */
.cal-menu hr{
  border: 0;
  height: 1px;
  margin: 6px 0;
  background: rgba(255,255,255,.10);
}

/* tiny arrow notch (purely visual) */
.cal-menu::before{
  content:"";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: rgb(30, 33, 38);
  border-left: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  transform: rotate(45deg);
}

/* entrance animation */
@keyframes calMenuIn{
  from{
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
  to{
    opacity: 1;
    transform: none;
  }
}


/* Filter strip */
.cal-filters{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cal-filter-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}
.cal-filter-pill .muted{ opacity:.7; }

/* Weekday row */
.cal-weekdays{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  font-weight: 700;
  opacity: .85;
  padding: 0 2px;
}
.cal-weekdays > div{
  text-align:center;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}

/* Grid */
.cal-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.cal-day{
  position:relative;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px;
  height: 130px;           /* ✅ fixed height so calendar never grows */
  overflow:hidden;         /* ✅ prevent growth */
}
.cal-day.is-outside{ opacity:.45; }
.cal-day.is-today{ outline: 2px solid rgba(80,140,255,.75); }
.cal-day.is-selected{ outline: 2px solid rgba(80,140,255,1); }

.cal-day-num{
  position:absolute;
  top: 8px;
  right: 10px;
  font-weight: 800;
  opacity: .9;
}

.cal-items{
  margin-top: 22px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

/* assignment chips */
.cal-chip{
  display:flex;
  align-items:center;
  gap:6px;
  max-width: 100%;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cal-chip:hover{ background: rgba(255,255,255,.12); }

.cal-more{
  margin-top: 2px;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  opacity:.85;
  background: rgba(80,140,255,.20);
  border: 1px solid rgba(80,140,255,.35);
}

/* Popover (hover day expands list without resizing grid) */
.cal-popover{
  position: fixed;
  width: 280px;
  max-height: 320px;
  overflow:auto;
  border-radius: 16px;
  background: rgba(20,20,24,.98);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.50);
  padding: 10px;
  z-index: 80;
}
.cal-popover[aria-hidden="true"]{ display:none; }
.cal-popover-title{ font-weight: 800; padding: 6px 6px 10px; opacity:.9; }
.cal-popover-list{ display:flex; flex-direction:column; gap:8px; padding: 0 6px 6px; }
.cal-popover-item{
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  cursor:pointer;
  font-size: 13px;
}
.cal-popover-item:hover{ background: rgba(255,255,255,.12); }
/* Calendar month nav buttons: dark green like sidebar */
#pageCalendar .cal-nav .icon-btn{
  background: rgba(30, 80, 55, .65);
  border: 1px solid rgba(30, 80, 55, .95);
  color: #fff;
}
#pageCalendar .cal-nav .icon-btn:hover{
  background: rgba(30, 80, 55, .85);
}
/* ✅ Fix native <select> dropdown list colors (Windows/Chrome) */
#pageCalendar #calUserSelect option{
  background: rgb(30, 33, 38);
  color: #fff;
}


@media (max-width: 900px){

  /* tighten page padding */
  .cal-wrap{ padding: 12px; }

  /* header becomes a clean 2-row layout */
  .cal-header{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .cal-title{ gap: 10px; }
  .cal-h1{ font-size: 22px; }
  .cal-sub{ font-size: 12px; }

  /* actions wrap tighter and fill width */
  .cal-actions{
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  /* keep dropdowns/buttons from being huge */
  #pageCalendar #calViewBtn,
  #pageCalendar #calUserSelect,
  #pageCalendar #btnCalAdd{
    height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 14px;
  }

  /* month nav takes full row and centers */
  .cal-nav{
    width: 100%;
    justify-content: space-between;
    padding-left: 0;
    gap: 8px;
  }

  .cal-month{
    min-width: 0;
    flex: 1;
    text-align: center;
    font-size: 14px;
  }

  /* weekday pills smaller + less gap */
  .cal-weekdays{
    gap: 6px;
    margin-top: 10px;
  }

  .cal-weekdays > div{
    padding: 8px 4px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* calendar grid tighter */
  .cal-grid{
    gap: 6px;
    margin-top: 8px;
  }

  /* day cells: shorter + less padding */
  .cal-day{
    height: 86px;
    padding: 8px;
    border-radius: 14px;
  }

  .cal-day-num{
    top: 6px;
    right: 8px;
    font-size: 13px;
  }

  /* chips smaller so they don’t crowd */
  .cal-items{
    margin-top: 18px;
    gap: 5px;
  }

  .cal-chip{
    padding: 5px 7px;
    font-size: 11px;
    border-radius: 10px;
  }

  .cal-more{
    padding: 3px 7px;
    font-size: 11px;
  }
}
/* ✅ Popover scroll should work on desktop + mobile */
#calPopover{
  pointer-events: auto;
}

#calPopoverList{
  max-height: 55vh;          /* or whatever feels right */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

/* =========================
   CONTACTS: Mobile = match Equipment card style
   (Name + Phone, rounded pill rows)
   ========================= */
@media (max-width: 700px) {

  /* Hide Company / Email / Actions columns */
  #contactsTable th:nth-child(2),
  #contactsTable td:nth-child(2),
  #contactsTable th:nth-child(4),
  #contactsTable td:nth-child(4),
  #contactsTable th:nth-child(5),
  #contactsTable td:nth-child(5) {
    display: none !important;
  }

  /* Hide the header row (matches Equipment list style) */
  #contactsTable thead {
    display: none !important;
  }

  /* Kill table chrome on mobile */
  #contactsTable {
    border-collapse: separate !important;
    border-spacing: 0 12px !important; /* gap between pills */
  }
  #contactsTable tbody tr {
    background: rgba(255,255,255,0.04) !important;
    border-radius: 18px !important;
    overflow: hidden;
  }

  /* Turn each row into a pill layout: name left, phone right */
  #contactsTable tbody tr {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 14px;
  }

  /* Reset TD styles so they don’t look like table cells */
  #contactsTable tbody td {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Name cell */
  #contactsTable tbody td:nth-child(1) {
    font-weight: 700;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0; /* allows wrapping nicely */
    white-space: normal;
  }

  /* Phone cell */
  #contactsTable tbody td:nth-child(3) {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
}
@media (max-width: 700px) {
  #contactsTable tbody tr {
    margin-bottom: 14px;
    border-radius: 18px;
  }
}
/* ✅ CONTACTS: show hand cursor on clickable rows */
#contactsTable tbody tr{
  cursor: pointer;
}

#contactsTable tbody tr:hover{
  background: rgba(255, 255, 255, 0.07);
}


/* ===== Create Assignment modal helpers (CORRECTED) ===== */
.modal-lg { max-width: 980px; width: min(980px, 96vw); }

.equip-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.equip-row input{ flex:1; }

.btn.icon{
  width:52px;
  height:44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* (Optional) keep your segmented style if you still use it elsewhere */
.segmented{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.seg-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  cursor:pointer;
  user-select:none;
}
.seg-item input{ accent-color: #3b82f6; }

.section-head{
  margin: 14px 0 10px;
  font-weight: 800;
  opacity: .95;
}

.collapse[aria-hidden="true"]{ display:none; }
.collapse[aria-hidden="false"]{ display:block; }

/* === Assignment options: single row, two pills === */
.option-pills{
  display:flex;
  gap:12px;
  margin-top:12px;
}

.opt-pill{
  flex:1;
  border-radius:16px;
  padding:12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.opt-pill__label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  opacity:.8;
  margin-bottom:6px;
}

.opt-pill__row{
  display:flex;
  align-items:center;
  gap:18px;
}

.opt-pill__row--tight{
  gap:14px;
  flex-wrap:wrap;
}

.opt-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  white-space:nowrap;
}

.opt-inline input{
  width:16px;
  height:16px;
  accent-color:#3b82f6;
}

/* === Time Tracking: Date + Hrs + Min + Add on ONE ROW === */
.ca-time-grid{
  display:grid;
  grid-template-columns: 1fr 90px 90px auto;
  gap: 12px;
  align-items: end;
  margin-top: 8px;
}

.ca-time-grid .field{ margin-bottom:0; }
.ca-time-grid .field.small{ width:auto; }

.ca-time-add{
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  width: auto;
  min-width: 86px;
  justify-self: end;
}

/* Totals block */
.time-total{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.muted{ opacity:.75; padding: 8px 4px; }

/* Contributors chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.25);
  font-weight:700;
}
.chip button{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.9);
  cursor:pointer;
  font-weight:900;
}

/* Mobile */
@media (max-width: 720px){
  .option-pills{
    flex-direction:column;
  }

  /* keep time tracking on one row (tighter) */
  .ca-time-grid{
    grid-template-columns: 1fr 72px 72px auto;
    gap: 10px;
  }
  .ca-time-add{
    min-width: 78px;
  }
}

/* Contributors: compact single row */
.ca-contrib-row{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:8px;
}

.ca-contrib-row .field input{
  width:100%;
  height:44px;
}

.ca-contrib-add{
  height:44px;
  padding:0 16px;
  border-radius:14px;
  min-width:86px;
  width:auto;
}

/* Mobile: stack nicely */
@media (max-width: 720px){
  .ca-contrib-row{ flex-direction:column; align-items:stretch; }
  .ca-contrib-add{ width:100%; }
}

/* ===== Interactive cursor fixes ===== */

/* Native dropdowns */
select {
  cursor: pointer;
}

/* Date inputs */
input[type="date"] {
  cursor: pointer;
}

/* Calendar icon inside date input (Chrome / Edge / Safari) */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Optional: searchable datalist inputs */
input[list] {
  cursor: text; /* stays text when typing */
}

/* Optional: make the dropdown indicator area feel clickable */
input[list]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Mobile layout tightening */
@media (max-width: 720px){
  .equip-row{ flex-direction: column; align-items:stretch; }
  .btn.icon{ width:100%; }
  .time-row{ flex-wrap:wrap; }
  .time-row .field.small{ width: calc(50% - 18px); }
  .time-row .colon{ display:none; }
  .time-row .field.grow{ width:100%; }
  .time-total{ gap:10px; }
}

/* ===== Equipment Picker Overlay (FINAL) =====
   - Works on iPhone + iPad (portrait + landscape)
   - Scrolls correctly (iOS flex scroll fix)
   - Only disables on true desktop (mouse/trackpad), NOT tablets
============================================= */

#caEquipPicker[aria-hidden="true"]{
  display:none !important;
}

#caEquipPicker[aria-hidden="false"]{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  /* stop background “scroll chaining” */
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
}

/* Card */
#caEquipPicker .picker-card{
  width: min(720px, 100%);
  background: rgba(18,22,28,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 50px rgba(0,0,0,.45);
  padding: 12px;

  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

/* Header */
#caEquipPicker .picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 4px 10px;
}

#caEquipPicker .picker-title{
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
}

#caEquipPicker .picker-search input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  outline: none;
}

/* ✅ The actual scroll container (iOS fix) */
#caEquipPicker .picker-list{
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);

  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Items */
#caEquipPicker .picker-item{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
#caEquipPicker .picker-item:last-child{ border-bottom:none; }
#caEquipPicker .picker-item:hover{ background: rgba(255,255,255,.06); }
#caEquipPicker .picker-item small{ opacity:.65; }

/* Tablet landscape: a bit shorter */
@media (orientation: landscape) and (max-height: 820px){
  #caEquipPicker .picker-card{ max-height: 70vh; }
}

/* ✅ Only hide on real desktop (mouse/trackpad), NOT iPad */
@media (hover: hover) and (pointer: fine){
  #caEquipPicker{ display:none !important; }
}
/* =========================================================
   ✅ HARD FIX: Safari stops reading your CSS after a broken @media
   This “repair” block resets the mobile modal rules safely
   and ensures later rules (tablet + picker overlay) apply.
   ========================================================= */

/* --- Modal mobile tweaks (safe, not nested) --- */
@media (max-width: 640px){

  .form-row.two { 
    grid-template-columns: 1fr; 
  }

  .stock-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }

  .stock-row .combo { 
    grid-column: 1 / -1; 
  }

  .stock-row .icon-mini { 
    justify-self: end; 
  }

  /* ✅ MODAL FOOTER STACKING (mobile only) */
  .modal__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .modal__footer-left,
  .modal__footer-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .modal__footer-left .btn,
  .modal__footer-right .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* --- Mobile pagination compression (separate, NOT nested) --- */
@media (max-width: 640px){

  .pagination-bar { flex-wrap: nowrap; }
  .pagination-controls { flex-wrap: nowrap; }

  .pagination-controls .page-btn{ display:none; }

  /* Prev */
  .pagination-controls .page-btn:first-child{ display:inline-flex; }

  /* 1,2,3 */
  .pagination-controls .page-btn:nth-child(2),
  .pagination-controls .page-btn:nth-child(3),
  .pagination-controls .page-btn:nth-child(4){
    display:inline-flex;
  }

  /* Next */
  .pagination-controls .page-btn:last-child{ display:inline-flex; }

  .pagination-controls .ellipsis,
  .pagination-controls .dots{
    display:none !important;
  }
}

/* =========================================================
   ✅ TABLET = LARGE MOBILE
   iPad portrait + smaller tablets should behave like mobile.
   (This is the piece you actually want.)
   ========================================================= */
@media (max-width: 980px){

  /* Make the whole app behave like your mobile layout */
  .app-shell{ flex-direction: column; }
  .sidebar{
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-nav{
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
  }
  .nav-link{ text-align: center; }

  /* Tighter content padding like phone */
  .content{ padding: 12px; }

  /* Make grids 1-column (you already do this at 980, keeping it explicit) */
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }

  /* Topbar: allow wrapping like mobile */
  .topbar{
    flex-wrap: wrap;
    height: auto;
    padding: 10px 12px;
    gap: 10px;
  }
  .topbar-left,
  .topbar-right{
    width: 100%;
    justify-content: space-between;
  }
  .top-select{
    max-width: 100%;
    width: 100%;
  }

  /* Inventory-style headers stack like mobile on tablet too */
  .inventory-topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .inventory-actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* keep the scroll row behavior */
  .inv-actions-scroll{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    touch-action: pan-x;
    padding: 2px 0 6px;
  }
  .inv-actions-scroll::-webkit-scrollbar{ display:none; }
  .inv-actions-scroll .btn{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
/* =========================================
   Assignments — Status dropdown (row-status)
   Scope: assignments table only
   ========================================= */

/* Target the status <select> in the table */
#assignmentsView select.row-status,
#assignmentsPage select.row-status,
.assignments-page select.row-status{
  width: 100%;
  min-width: 140px;
  height: 36px;

  background: rgba(255, 255, 255, 0.06);
  color: rgba(255,255,255,.92);

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;

  padding: 6px 34px 6px 10px; /* room for arrow */
  font-weight: 700;
  font-size: 14px;
  line-height: 1;

  outline: none;

  /* remove default look */
  -webkit-appearance: none;
  appearance: none;

  /* custom arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.65) 50%),
    linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Hover/focus states */
#assignmentsView select.row-status:hover,
#assignmentsPage select.row-status:hover,
.assignments-page select.row-status:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(241, 234, 234, 0.08);
}

#assignmentsView select.row-status:focus,
#assignmentsPage select.row-status:focus,
.assignments-page select.row-status:focus{
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* Make the dropdown options readable (browser-controlled, but helps) */
#assignmentsView select.row-status option,
#assignmentsPage select.row-status option,
.assignments-page select.row-status option{
  background: #ffffff !important;
  color: #000000 !important;
}

/* =========================================================
   Assignment Modals — Make <select> dropdown readable (dark)
   Applies to Create + Edit Assignment modals
========================================================= */

/* Target both modals (add/remove selectors as needed) */
#createAssignmentModal select,
#editAssignmentModal select,
.create-assignment-modal select,
.edit-assignment-modal select,
.modal .assignment-modal select,
.modal select.assignment-select {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}

/* Focus ring */
#createAssignmentModal select:focus,
#editAssignmentModal select:focus,
.create-assignment-modal select:focus,
.edit-assignment-modal select:focus,
.modal .assignment-modal select:focus,
.modal select.assignment-select:focus {
  border-color: rgba(59,130,246,.65);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

/* The dropdown list options (works in Chromium/Firefox; iOS Safari is limited) */
#createAssignmentModal select option,
#editAssignmentModal select option,
.create-assignment-modal select option,
.edit-assignment-modal select option,
.modal .assignment-modal select option,
.modal select.assignment-select option {
  background: #0b1220;      /* dark menu */
  color: #ffffff;           /* readable text */
}

/* Disabled options should still be readable (but muted) */
#createAssignmentModal select option:disabled,
#editAssignmentModal select option:disabled,
.create-assignment-modal select option:disabled,
.edit-assignment-modal select option:disabled,
.modal .assignment-modal select option:disabled,
.modal select.assignment-select option:disabled {
  color: rgba(255,255,255,.45);
}

/* Selected/checked option styling (Firefox honors :checked well) */
#createAssignmentModal select option:checked,
#editAssignmentModal select option:checked,
.create-assignment-modal select option:checked,
.edit-assignment-modal select option:checked,
.modal .assignment-modal select option:checked,
.modal select.assignment-select option:checked {
  background: #1d4ed8;
  color: #ffffff;
}

/* Hover state (not all browsers honor this for native options, but harmless) */
#createAssignmentModal select option:hover,
#editAssignmentModal select option:hover,
.create-assignment-modal select option:hover,
.edit-assignment-modal select option:hover,
.modal .assignment-modal select option:hover,
.modal select.assignment-select option:hover {
  background: rgba(59,130,246,.35);
}
/* Assignments header selects (matches your dark topbar controls) */
.assignments-topbar .am-select,
.inventory-topbar .am-select,
.topbar .am-select,
#assignUserFilter{
  appearance: none;
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 10px 38px 10px 14px;
  font-weight: 600;
  line-height: 1;
  min-width: 170px;
}

/* simple chevron */
.assignments-topbar .am-field,
#assignUserWrap{
  position: relative;
}
.assignments-topbar .am-field::after,
#assignUserWrap::after{
  content:"";
  position:absolute;
  right: 14px;
  top: 50%;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(255,255,255,.70);
  transform: translateY(-35%);
  pointer-events:none;
}

/* dropdown list readability (Chromium/Firefox) */
#assignUserFilter option{
  background: #0b1220;
  color: #fff;
}
/* =========================
   PROFILE PAGE — SINGLE SOURCE (REPLACE ALL PROFILE CSS WITH THIS)
   Scope: #profilePage / .profile-page only
   - 2-column layout on desktop + tablets
   - collapses to 1 column only on small mobile
   ========================= */

#profilePage.profile-page{
  width: 100%;
}

/* Header */
#profilePage.profile-page .page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

#profilePage.profile-page .page-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

#profilePage.profile-page .page-title{
  margin:0;
  font-size:22px;
  font-weight:800;
  letter-spacing:.2px;
}

#profilePage.profile-page .page-pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  font-weight:800;
}

#profilePage.profile-page .page-subtitle{
  margin-top:6px;
  color: rgba(255,255,255,.65);
  font-size:13px;
  font-weight:650;
}

#profilePage.profile-page .page-header-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

/* Main 2-column grid (default) */
#profilePage.profile-page .page-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 14px;
  align-items:start;
}

#profilePage.profile-page .col{
  min-width: 0;
}

/* Cards */
#profilePage.profile-page .card{
  border-radius:16px;
  background: rgba(15,23,42,.75);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  width:100%;
}

#profilePage.profile-page .card-head{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

#profilePage.profile-page .card-title{
  font-weight:900;
  font-size:15px;
  color: rgba(255,255,255,.92);
}

#profilePage.profile-page .card-subtitle{
  margin-top:4px;
  font-size:12.5px;
  color: rgba(255,255,255,.62);
  font-weight:650;
}

#profilePage.profile-page .card-body{
  padding:16px;
}

#profilePage.profile-page .divider{
  height:1px;
  background: rgba(255,255,255,.08);
  margin:14px 0;
}

#profilePage.profile-page .section-title{
  font-weight:900;
  font-size:13px;
  margin: 2px 0 10px;
  color: rgba(255,255,255,.82);
}

/* Form grid */
#profilePage.profile-page .form-row{
  display:grid;
  gap:12px;
  margin-bottom:12px;
}

#profilePage.profile-page .form-row.two{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#profilePage.profile-page .form-row.three{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

#profilePage.profile-page .field{
  min-width:0;
}

#profilePage.profile-page .field .label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(255,255,255,.70);
  margin-bottom:6px;
}

/* Inputs */
#profilePage.profile-page input,
#profilePage.profile-page select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.55);
  color: rgba(255,255,255,.92);
  outline:none;
  font-weight:800;
  font-size:14px;
}

#profilePage.profile-page input::placeholder{
  color: rgba(255,255,255,.42);
  font-weight:700;
}

#profilePage.profile-page input:focus,
#profilePage.profile-page select:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.16);
}

#profilePage.profile-page input:disabled,
#profilePage.profile-page select:disabled{
  opacity:.75;
  cursor:not-allowed;
}

/* Right-align helper */
#profilePage.profile-page .align-end{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

/* Actions */
#profilePage.profile-page .form-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:8px;
  flex-wrap:wrap;
}

/* Buttons (profile-scoped) */
#profilePage.profile-page .btn{
  height: 44px;
  border-radius:12px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

#profilePage.profile-page .btn.primary{
  background: #335dff;
  border-color: rgba(51,93,255,.35);
}

#profilePage.profile-page .btn.primary:hover{ opacity:.92; }

#profilePage.profile-page .btn.ghost{
  background: rgba(255,255,255,.04);
}

#profilePage.profile-page .btn.ghost:hover{ background: rgba(255,255,255,.06); }

#profilePage.profile-page .btn.danger{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.35);
  color: #fecaca;
}

#profilePage.profile-page .btn.danger:hover{ background: rgba(239,68,68,.24); }

/* Check list */
#profilePage.profile-page .checks{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 6px 2px 2px;
}

#profilePage.profile-page .check{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.92);
  font-weight:800;
  user-select:none;
}

#profilePage.profile-page .check input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:#3b82f6;
}

/* Admin tools row */
#profilePage.profile-page .admin-tools{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Status line */
#profilePage.profile-page .status-line{
  margin-top:10px;
  font-size:12.5px;
  color: rgba(255,255,255,.65);
  min-height: 18px;
}

/* =========================
   MOBILE ONLY (true phones)
   ========================= */
@media (max-width: 720px){

  #profilePage.profile-page .page-header{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #profilePage.profile-page .page-header-right{
    justify-content:flex-start;
  }

  #profilePage.profile-page .page-grid{
    grid-template-columns: 1fr;
  }

  #profilePage.profile-page .form-row.two,
  #profilePage.profile-page .form-row.three{
    grid-template-columns: 1fr;
  }

  #profilePage.profile-page .form-actions{
    flex-direction: column;
    align-items: stretch;
  }

  #profilePage.profile-page .form-actions .btn{
    width: 100%;
  }

  #profilePage.profile-page .admin-tools{
    flex-direction: column;
  }

  #profilePage.profile-page .admin-tools .btn{
    width: 100%;
  }
}
/* =========================================
   Import Assignments Modal — FIX TRANSPARENCY
   Scope: #importAssignmentsModal only
========================================= */

/* Backdrop (the full-screen overlay) */
#importAssignmentsModal{
  background: rgba(0,0,0,.72) !important;   /* ✅ darker overlay */
  backdrop-filter: blur(2px);              /* optional, subtle */
  -webkit-backdrop-filter: blur(2px);
}

/* Panel (the actual modal box) */
#importAssignmentsModal .modal-content,
#importAssignmentsModal .modal-card,
#importAssignmentsModal .panel{
  background: #0b1220 !important;          /* ✅ opaque */
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 70px rgba(0,0,0,.65);
}

/* If your modal uses a generic inner wrapper */
#importAssignmentsModal .modal-body,
#importAssignmentsModal .modal-inner{
  background: transparent !important;      /* keep only the panel opaque */
}

/* Keep form controls readable on dark */
#importAssignmentsModal input,
#importAssignmentsModal select,
#importAssignmentsModal textarea{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

#importAssignmentsModal label,
#importAssignmentsModal .label,
#importAssignmentsModal .help,
#importAssignmentsModal .muted{
  color: rgba(255,255,255,.82);
}

/* =========================================
   ✅ Assignment Timer Dock (global, compact, draggable)
   Matches HTML: .timer-dock__inner / __left / __meta / __actions
========================================= */

/* show/hide */
#asTimerDock[aria-hidden="true"]{
  display: none !important;
  pointer-events: none !important;
}
#asTimerDock[aria-hidden="false"]{
  display: block !important;
  pointer-events: auto !important;
}

/* dock container (draggable) */
#asTimerDock.timer-dock{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 340px;                         /* compact */
  max-width: calc(100vw - 24px);
  z-index: 99999;

  border-radius: 16px;
  background: rgba(15, 23, 42, .96);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* ✅ for dragging */
  touch-action: none;
  user-select: none;
}

/* inner layout */
#asTimerDock .timer-dock__inner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;                   /* tighter */
}

/* left */
#asTimerDock .timer-dock__left{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#asTimerDock .timer-dock__title{
  font-size: 13px;
  font-weight: 700;
  opacity: .95;
  line-height: 1.1;
}

/* meta row */
#asTimerDock .timer-dock__meta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: .88;
}

#asTimerDock .timer-dock__meta span{
  white-space: nowrap;
}

#asTimerDock .dot{ opacity: .6; }

/* actions */
#asTimerDock .timer-dock__actions{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

#asTimerDock .timer-dock__actions .btn{
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1;
}

#asTimerDock .timer-dock__actions .btn.danger{
  border: 1px solid rgba(255,80,80,.45);
}

/* ✅ Drag handle (use your existing JS: it looks for .dock-handle) */
#asTimerDock .dock-handle{
  cursor: grab;
}
#asTimerDock.dragging .dock-handle{ cursor: grabbing; }
#asTimerDock.dragging{ opacity: .98; }

/* Mobile: full width bottom bar */
@media (max-width: 540px){
  #asTimerDock.timer-dock{
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}
/* ✅ Timer Dock readability patch (paste AFTER your dock CSS) */

/* Make the dock itself a bit darker + higher contrast */
#asTimerDock.timer-dock{
  background: rgba(7, 10, 18, .94) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,.70) !important;
}

/* Give the inner more breathing room */
#asTimerDock .timer-dock__inner{
  padding: 12px 14px !important;
  gap: 14px !important;
}

/* Left side: ensure it can shrink and ellipsis instead of becoming unreadable */
#asTimerDock .timer-dock__left{
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Title: brighter + slightly larger */
#asTimerDock .timer-dock__title{
  font-size: 14px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  color: rgba(255,255,255,.96) !important;
  letter-spacing: .2px;
}

/* Meta: brighter + larger, and prevent overlap */
#asTimerDock .timer-dock__meta{
  font-size: 13px !important;
  opacity: 1 !important;
  color: rgba(255,255,255,.86) !important;
  gap: 10px !important;
}

/* Make the assignment label truncate cleanly if space is tight */
#asTimerDock #asTimerAssignment{
  max-width: 190px;                 /* adjust if you want more/less */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Make elapsed time stand out */
#asTimerDock #asTimerElapsed{
  font-weight: 800;
  color: rgba(255,255,255,.95);
}

/* Dot less prominent */
#asTimerDock .dot{ opacity: .5 !important; }

/* Buttons: slightly smaller, clearer borders, and don’t steal attention */
#asTimerDock .timer-dock__actions{
  flex: 0 0 auto !important;
  gap: 8px !important;
}

#asTimerDock .timer-dock__actions .btn{
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}

#asTimerDock .timer-dock__actions .btn.danger{
  background: rgba(255,80,80,.10) !important;
  border: 1px solid rgba(255,80,80,.45) !important;
}

/* On small widths, stack meta under title and keep buttons readable */
@media (max-width: 420px){
  #asTimerDock .timer-dock__inner{
    align-items: flex-start !important;
  }
  #asTimerDock .timer-dock__meta{
    flex-wrap: wrap;
    row-gap: 6px;
  }
  #asTimerDock #asTimerAssignment{ max-width: 100%; }
}
/* =========================================
   ✅ Completed Assignments (dark theme)
========================================= */

.completed-page{
  width:100%;
}

.completed-page .inventory-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  background:#0f172a;
  color:#fff;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.08);
}

.completed-page .inventory-title{
  font-weight:900;
  font-size:18px;
  letter-spacing:.2px;
}

.completed-page .inventory-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.completed-page .select-pill{
  background: rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
  font-size:13px;
  outline:none;
}

.completed-page .select-pill:focus{
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

.completed-page .table-wrap{
  background:#0b1220;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
}

.completed-page .data-table{
  width:100%;
  border-collapse:collapse;
}

.completed-page thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:.25px;
  text-transform:none;
  padding:12px 12px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.completed-page tbody td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  vertical-align:middle;
  font-size:13px;
}

.completed-page tbody tr:hover td{
  background: rgba(255,255,255,.03);
}

.completed-page .btn-danger{
  background: rgba(239,68,68,.12);
  color:#fecaca;
  border:1px solid rgba(239,68,68,.35);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
}

.completed-page .btn-danger:hover{
  background: rgba(239,68,68,.18);
}

.completed-page .status-select{
  width: 160px;
  background: rgba(255, 253, 253, 0.059);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  font-size:13px;
}

/* Pagination bar matches your universal paginator structure */
.completed-page .pagination-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background:#0f172a;
  border:1px solid rgba(255,255,255,.08);
}

.completed-page .pagination-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.completed-page .page-btn{
  background: rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
}

.completed-page .page-btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}

.completed-page .page-btn.active{
  background: rgba(99,102,241,.22);
  border-color: rgba(99,102,241,.55);
}
/* Make native selects readable in dark UI */
select,
.select-pill {
  background-color: #0f172a;   /* dark background */
  color: #ffffff;              /* white text */
  border: 1px solid rgba(255,255,255,0.25);
}

/* Improve dropdown list readability (browser dependent but helps) */
select option {
  background-color: #17151b;   /* native dropdown background */
  color: #ffffff;              /* dark text so you can READ it */
}

/* Hover / selected option */
select option:checked,
select option:hover {

  background-color: #222325;
  color: #ffffff;
}
/* ✅ Status dropdown — force readable option list */
.status-select{
  background:#0f172a;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
}

/* The dropdown list items (most important part) */
.status-select option{
  background:#2d2d2f !important;  /* readable list background */
  color:#ffffff !important;       /* readable list text */
}

/* ===============================
   Close Occurrence Modal — RECTANGULAR + SCROLLABLE (single block)
   Paste at VERY BOTTOM of your CSS file
================================ */

/* Center overlay when open */
#closeOccModal[aria-hidden="false"],
#closeOccModal.modal[aria-hidden="false"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Subtitle */
#closeOccModal .muted{
  color:#9ca3af !important;
  font-size: 13px !important;
}

/* Scrollable occurrence list */
#closeOccModal .list{
  display:flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 14px !important;

  flex: 1 1 auto !important;     /* ✅ list grows */
  min-height: 0 !important;      /* ✅ required for scrolling */
  overflow-y: auto !important;

  padding-right: 8px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Rectangular options (covers button OR div/a with .btn/.occ-btn) */
#closeOccModal .list button,
#closeOccModal .list .btn,
#closeOccModal .list .occ-btn{
  width: 100% !important;
  text-align: left !important;

  padding: 12px 12px !important;
  border-radius: 8px !important; /* ✅ rectangular */

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #f9fafb !important;
  font-weight: 600 !important;

  cursor: pointer !important;
}

/* Hover/focus */
#closeOccModal .list button:hover,
#closeOccModal .list .btn:hover,
#closeOccModal .list .occ-btn:hover,
#closeOccModal .list button:focus-visible,
#closeOccModal .list .btn:focus-visible,
#closeOccModal .list .occ-btn:focus-visible{
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* Closed item styling */
#closeOccModal .list button.is-closed,
#closeOccModal .list .btn.is-closed,
#closeOccModal .list .occ-btn.is-closed{
  opacity: 0.55 !important;
  text-decoration: line-through !important;
  cursor: default !important;
}

/* Scrollbar polish (WebKit/iOS) */
#closeOccModal .list::-webkit-scrollbar{ width: 8px; }
#closeOccModal .list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
}
/* ===============================
   Close Occurrence Modal — clean, scoped styles
   Inherits global modal shell
================================ */

/* Subtitle text */
#closeOccModal .muted{
  opacity: 0.75;
  font-size: 13px;
  margin-bottom: 10px;
}

/* Scrollable occurrence list */
#closeOccModal .list{
  display: flex;
  flex-direction: column;
  gap: 10px;

  max-height: 46vh;
  overflow-y: auto;
  padding-right: 6px;
}

/* Occurrence option buttons */
#closeOccModal .list button,
#closeOccModal .list .btn,
#closeOccModal .list .occ-btn{
  width: 100%;
  text-align: left;

  padding: 12px 14px;
  border-radius: 12px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: inherit;
  font-weight: 600;
}

/* Hover & focus states */
#closeOccModal .list button:hover,
#closeOccModal .list .btn:hover,
#closeOccModal .list .occ-btn:hover,
#closeOccModal .list button:focus-visible,
#closeOccModal .list .btn:focus-visible,
#closeOccModal .list .occ-btn:focus-visible{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

/* Closed occurrence */
#closeOccModal .list button.is-closed,
#closeOccModal .list .btn.is-closed,
#closeOccModal .list .occ-btn.is-closed{
  opacity: 0.55;
  text-decoration: line-through;
  cursor: default;
}

/* Optional scrollbar polish */
#closeOccModal .list::-webkit-scrollbar{
  width: 8px;
}
#closeOccModal .list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 8px;
}
/* =========================
   ONE-TIME PROJECTS — FORCE MATCH ASSIGNMENTS
   Paste at VERY BOTTOM
========================= */

#oneTimeProjectsView{
  width: 100%;
}

/* 1) Fix the “stacking” on desktop: force a single-row actions strip */
#oneTimeProjectsView .inventory-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 0;
}

#oneTimeProjectsView .inv-actions-scroll.otp-actions-row{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  /* critical: do NOT wrap on desktop */
  flex-wrap: nowrap !important;

  /* allows it to shrink without forcing a new line */
  min-width: 0;
}

/* 2) Add dropdown chevron to the Users pill (same feel as Assignments) */
#oneTimeProjectsView .otp-user-wrap{
  position: relative;
  flex: 0 0 auto;
}

#oneTimeProjectsView #otpUserFilter.am-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 38px; /* room for chevron */
  min-width: 170px;    /* like assignments */
}

#oneTimeProjectsView .otp-user-wrap::after{
  content:"";
  position:absolute;
  right: 14px;
  top: 50%;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(255,255,255,.70);
  transform: translateY(-35%);
  pointer-events:none;
}

/* 3) Status dropdown inside table: match Assignments “row-status” look */
#oneTimeProjectsView table tbody select,
#oneTimeProjectsView select.row-status,
#oneTimeProjectsView select.table-select{
  width: 100%;
  min-width: 140px;
  height: 36px;

  background: rgba(255, 255, 255, 0.06);
  color: rgba(255,255,255,.92);

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;

  padding: 6px 34px 6px 10px; /* room for arrow */
  font-weight: 700;
  font-size: 14px;
  line-height: 1;

  outline: none;

  -webkit-appearance: none;
  appearance: none;

  /* chevron */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.65) 50%),
    linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#oneTimeProjectsView table tbody select:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,0.08);
}

#oneTimeProjectsView table tbody select:focus{
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* Options readable (chromium/firefox) */
#oneTimeProjectsView table tbody select option{
  background: #0b1220;
  color: #ffffff;
}

/* Mobile behavior stays consistent with your existing pattern */
@media (max-width: 640px){
  #oneTimeProjectsView .inv-actions-scroll.otp-actions-row{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    padding: 2px 0 6px;
  }
  #oneTimeProjectsView .inv-actions-scroll.otp-actions-row::-webkit-scrollbar{
    display:none;
  }
}
/* =========================
   Select padding fix (no custom chevron)
========================= */

.select-wrap{
  position: relative;
  width: 100%;
  min-width: 0;
}

/* Remove the custom arrow completely */
.select-wrap::after{
  content: none !important;
}

/* Improve spacing + prevent clipping */
.select-wrap .top-select{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  text-align: left;
  line-height: 1.25;

  /* 🔧 Padding tweak (this is the sweet spot) */
  padding: 9px 18px;          /* more breathing room */
  padding-right: 42px;         /* room for native arrow */

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  appearance: auto;            /* restore native arrow */
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/* Keep option text readable */
.select-wrap .top-select option{
  white-space: normal;
}
#caTbody tr { cursor: pointer; }
#caTbody td { user-select: none; }
#caTbody button, #caTbody select { cursor: pointer; user-select: auto; }

/* =========================
   Completed Detail Modal — match site modal style
   Paste at VERY BOTTOM
========================= */

/* Backdrop matches your normal modals */
#completedDetailModal{
  background: rgba(0,0,0,.45) !important;
}

/* Modal card */
#completedDetailModal .modal-content{
  width: min(1100px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden !important;        /* ✅ scroll lives in body */
  border-radius: 18px !important;

  /* panel look like your other modals */
  background: linear-gradient(180deg, #0f1624 0%, #0c111b 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.62) !important;
}

/* Header bar like Edit Assignment */
#completedDetailModal .modal-header{
  padding: 18px 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.02);
}

#completedDetailModal .modal-title{
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}

/* Close button style */
#completedDetailModal .icon-btn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
#completedDetailModal .icon-btn:hover{
  background: rgba(255,255,255,.10);
}

/* Body: padded + scroll */
#completedDetailModal .modal-body{
  padding: 18px !important;
  overflow: auto !important;
  max-height: calc(100vh - 28px - 72px - 72px) !important; /* header+footer */
}

/* Footer like your modals */
#completedDetailModal .modal-footer{
  padding: 16px 18px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.02);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Make the grid behave like your form layout */
#completedDetailModal .grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px !important;
}
@media (max-width: 820px){
  #completedDetailModal .grid-2{
    grid-template-columns: 1fr;
  }
}

/* Field spacing like your forms */
#completedDetailModal .field label,
#completedDetailModal .modal-body > div > label{
  display: block;
  font-size: 12px;
  opacity: .75;
  margin: 0 0 6px 2px;
}

/* Read-only blocks should look like your inputs */
#completedDetailModal .ro{
  width: 100%;
  padding: 12px 14px !important;
  border-radius: 14px !important;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  color: rgba(255,255,255,.92);
  font-weight: 600;
  line-height: 1.25;
}

/* Textareas / big blocks */
#completedDetailModal .ro.ro-block{
  min-height: 52px;
  white-space: pre-wrap;
  font-weight: 500;
  color: rgba(255,255,255,.88);
}

/* Section spacing (Notes/Equipment/Parts...) */
#completedDetailModal .modal-body > div[style*="margin-top"]{
  margin-top: 16px !important;
}

/* Button match (Close) */
#completedDetailModal .btn{
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}
#completedDetailModal .btn:hover{
  background: rgba(255,255,255,.11);
}
/* =========================
   ✅ Part photo preview: fit inside the modal box
========================= */
#partPhotoThumbs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#partPhotoThumbs .media-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;      /* square box */
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

#partPhotoThumbs .media-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;      /* ✅ show whole photo */
  object-position: center;
  background: rgba(0,0,0,.35); /* optional: nicer letterbox */
}
/* Photo preview container */
.part-photo-box,
.part-photo-preview,
.photo-preview {
  width: 160px;          /* match QR size */
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  background: #1b1f26;   /* subtle dark background */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The image itself */
.part-photo-box img,
.part-photo-preview img,
.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 🔥 this is the key */
  border-radius: 14px;
}
/* ======================================================
   ASSIGNMENTS — SINGLE SOURCE OF TRUTH (HEADER ALIGN FIX)
   Paste at VERY BOTTOM. Remove/disable older assignments
   table “tablet fix” + duplicate assignments table blocks.
====================================================== */

#assignmentsView .inventory-table,
#assignmentsPage .inventory-table,
.assignments-page .inventory-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;     /* your row “bands” gap */
  table-layout: fixed;        /* KEY: headers + cells share the same widths */
}

/* Hard reset: prevent any “mobile table” flex/grid rules from breaking alignment */
#assignmentsView .inventory-table thead,
#assignmentsView .inventory-table tbody,
#assignmentsView .inventory-table tr,
#assignmentsView .inventory-table th,
#assignmentsView .inventory-table td,
#assignmentsPage .inventory-table thead,
#assignmentsPage .inventory-table tbody,
#assignmentsPage .inventory-table tr,
#assignmentsPage .inventory-table th,
#assignmentsPage .inventory-table td,
.assignments-page .inventory-table thead,
.assignments-page .inventory-table tbody,
.assignments-page .inventory-table tr,
.assignments-page .inventory-table th,
.assignments-page .inventory-table td{
  display: table-row-group;
}

#assignmentsView .inventory-table thead{ display: table-header-group; }
#assignmentsView .inventory-table tbody{ display: table-row-group; }
#assignmentsView .inventory-table tr{ display: table-row !important; }
#assignmentsView .inventory-table th,
#assignmentsView .inventory-table td{ display: table-cell !important; }

#assignmentsPage .inventory-table thead{ display: table-header-group; }
#assignmentsPage .inventory-table tbody{ display: table-row-group; }
#assignmentsPage .inventory-table tr{ display: table-row !important; }
#assignmentsPage .inventory-table th,
#assignmentsPage .inventory-table td{ display: table-cell !important; }

.assignments-page .inventory-table thead{ display: table-header-group; }
.assignments-page .inventory-table tbody{ display: table-row-group; }
.assignments-page .inventory-table tr{ display: table-row !important; }
.assignments-page .inventory-table th,
.assignments-page .inventory-table td{ display: table-cell !important; }

/* Consistent box sizing + truncation so nothing shifts columns */
#assignmentsView .inventory-table th,
#assignmentsView .inventory-table td,
#assignmentsPage .inventory-table th,
#assignmentsPage .inventory-table td,
.assignments-page .inventory-table th,
.assignments-page .inventory-table td{
  box-sizing: border-box;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header (keep your style) */
#assignmentsView .inventory-table thead th,
#assignmentsPage .inventory-table thead th,
.assignments-page .inventory-table thead th{
  color: rgba(255,255,255,0.88);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

/* Row bands */
#assignmentsView .inventory-table tbody tr,
#assignmentsPage .inventory-table tbody tr,
.assignments-page .inventory-table tbody tr{
  background: rgba(255,255,255,0.04);
}

#assignmentsView .inventory-table tbody td,
#assignmentsPage .inventory-table tbody td,
.assignments-page .inventory-table tbody td{
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 16px;
  border: none;
}

/* Rounded row edges */
#assignmentsView .inventory-table tbody tr td:first-child,
#assignmentsPage .inventory-table tbody tr td:first-child,
.assignments-page .inventory-table tbody tr td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
#assignmentsView .inventory-table tbody tr td:last-child,
#assignmentsPage .inventory-table tbody tr td:last-child,
.assignments-page .inventory-table tbody tr td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Hover */
#assignmentsView .inventory-table tbody tr:hover,
#assignmentsPage .inventory-table tbody tr:hover,
.assignments-page .inventory-table tbody tr:hover{
  background: rgba(255,255,255,0.07);
  cursor: pointer;
}

/* ✅ Column widths — MUST match header + body */
#assignmentsView .inventory-table th:nth-child(1),
#assignmentsView .inventory-table td:nth-child(1),
#assignmentsPage .inventory-table th:nth-child(1),
#assignmentsPage .inventory-table td:nth-child(1),
.assignments-page .inventory-table th:nth-child(1),
.assignments-page .inventory-table td:nth-child(1){ width: 24%; }  /* Title */

#assignmentsView .inventory-table th:nth-child(2),
#assignmentsView .inventory-table td:nth-child(2),
#assignmentsPage .inventory-table th:nth-child(2),
#assignmentsPage .inventory-table td:nth-child(2),
.assignments-page .inventory-table th:nth-child(2),
.assignments-page .inventory-table td:nth-child(2){ width: 12%; }  /* Type */

#assignmentsView .inventory-table th:nth-child(3),
#assignmentsView .inventory-table td:nth-child(3),
#assignmentsPage .inventory-table th:nth-child(3),
#assignmentsPage .inventory-table td:nth-child(3),
.assignments-page .inventory-table th:nth-child(3),
.assignments-page .inventory-table td:nth-child(3){ width: 16%; }  /* Assigned To */

#assignmentsView .inventory-table th:nth-child(4),
#assignmentsView .inventory-table td:nth-child(4),
#assignmentsPage .inventory-table th:nth-child(4),
#assignmentsPage .inventory-table td:nth-child(4),
.assignments-page .inventory-table th:nth-child(4),
.assignments-page .inventory-table td:nth-child(4){ width: 18%; }  /* Location */

#assignmentsView .inventory-table th:nth-child(5),
#assignmentsView .inventory-table td:nth-child(5),
#assignmentsPage .inventory-table th:nth-child(5),
#assignmentsPage .inventory-table td:nth-child(5),
.assignments-page .inventory-table th:nth-child(5),
.assignments-page .inventory-table td:nth-child(5){ width: 16%; }  /* Status */

#assignmentsView .inventory-table th:nth-child(6),
#assignmentsView .inventory-table td:nth-child(6),
#assignmentsPage .inventory-table th:nth-child(6),
#assignmentsPage .inventory-table td:nth-child(6),
.assignments-page .inventory-table th:nth-child(6),
.assignments-page .inventory-table td:nth-child(6){ width: 120px; } /* Due */


/* ============================
   Status dropdown inside table
============================ */
#assignmentsView select.row-status,
#assignmentsPage select.row-status,
.assignments-page select.row-status{
  width: 100%;
  min-width: 140px;
  height: 36px;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.06);
  color: rgba(255,255,255,.92);

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;

  padding: 6px 34px 6px 10px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;

  outline: none;
  -webkit-appearance: none;
  appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.65) 50%),
    linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#assignmentsView select.row-status:hover,
#assignmentsPage select.row-status:hover,
.assignments-page select.row-status:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,0.08);
}

#assignmentsView select.row-status:focus,
#assignmentsPage select.row-status:focus,
.assignments-page select.row-status:focus{
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

#assignmentsView select.row-status option,
#assignmentsPage select.row-status option,
.assignments-page select.row-status option{
  background: #ffffff !important;
  color: #000000 !important;
}

/* Safety: wrapper scroll if needed */
#assignmentsView .table-wrap,
#assignmentsPage .table-wrap,
.assignments-page .table-wrap{
  overflow-x: auto;
}
/* ==============================
   ASSIGNMENTS TOPBAR — CLEAN WRAP
   (single source of truth)
============================== */
#assignmentsView .inventory-topbar.assignments-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Right side wrapper */
#assignmentsView .inventory-actions{
  display:flex;
  justify-content:flex-end;
  min-width:0;
}

/* The actual control row */
#assignmentsView .inv-actions-scroll.assignments-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;         /* ✅ allow wrap */
  min-width:0;
  width: min(720px, 100%);
  justify-content:flex-end;
}

/* Make search behave like a “stretch” control */
#assignmentsView #assignmentsSearch{
  flex: 1 1 260px;
  min-width: 220px;
}

/* Keep buttons from shrinking weirdly */
#assignmentsView #btnImportAssignments,
#assignmentsView #btnCreateAssignment{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Selects should have a sane width but can wrap */
#assignmentsView .select-wrap,
#assignmentsView #assignUserWrap{
  flex: 0 1 180px;
  min-width: 160px;
}

/* Tablet: make Create float to the end */
@media (max-width: 980px){
  #assignmentsView #btnCreateAssignment{
    margin-left:auto;
  }
}

/* Mobile: stack neatly */
@media (max-width: 640px){
  #assignmentsView .inventory-topbar.assignments-topbar{
    flex-direction:column;
    align-items:stretch;
  }
  #assignmentsView .inventory-actions{
    width:100%;
  }
  #assignmentsView .inv-actions-scroll.assignments-actions{
    width:100%;
    justify-content:flex-start;
  }
  #assignmentsView #assignmentsSearch{
    flex: 1 1 100%;
    width:100%;
    min-width:0;
  }
}
/* =========================================
   FIX: Assignments table column alignment
   (Location column was being hidden)
========================================= */
#assignmentsView .inventory-table th:nth-child(4),
#assignmentsView .inventory-table td:nth-child(4){
  display: table-cell !important;
  visibility: visible !important;
}

#assignmentsView .inventory-table th:nth-child(5),
#assignmentsView .inventory-table td:nth-child(5){
  display: table-cell !important;
  visibility: visible !important;
}