/* ==============================
   Intranet Base Layout
   ============================== */

.inv-page{
  max-width:1200px;
  margin:0 auto;
  padding:1.5rem;
}

.inv-inner{
  max-width:1200px;
  margin:0 auto;
}

.inv-card{
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  padding:1.25rem;
  margin-bottom:1.5rem;
}

.inv-card-title{
  margin:0 0 20px 0;
}

/* ==============================
   Grid Layout
   ============================== */

.inv-grid{
  display:grid;
  gap:16px;
}

.inv-grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.inv-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (max-width:1024px){
  .inv-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .inv-grid-4,
  .inv-grid-2{
    grid-template-columns:1fr;
  }
}

.inv-field{
  min-width:0;
}

.inv-span-4{
  grid-column:1 / -1;
}

.inv-block{
  margin:0 0 1rem 0;
}

.inv-text-right{
  text-align:right;
}

.inv-mt-2{
  margin-top:12px;
}

/* ==============================
   Form Controls (modern)
   ============================== */

.inv-label{
  display:block;
  font-weight:600;
  font-size:13px;
  margin-bottom:6px;
  color:#1f2937;
}

.inv-control{
  width:100%;
  padding:0.5rem 0.65rem;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.18);
  background:#dbeafe;            /* light blue */
  color:#111827;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.10);
  font-size:0.95rem;
  line-height:1.2;
  box-sizing:border-box;
}

.inv-control:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,0.18), inset 0 1px 2px rgba(0,0,0,0.10);
}

select.inv-control{
  appearance:auto;
  box-sizing:border-box;
}

/* ==============================
   Global Control Defaults (ensure light-blue + readable text everywhere)
   Applies to include-file markup as well
   ============================== */

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea{
  background-color:#dbeafe !important; /* light blue */
  color:#111827 !important;            /* dark text */
  border:1px solid rgba(0,0,0,0.18);
  border-radius:8px;
}

/* Ensure selected value in collapsed <select> is visible */
select{
  color:#111827 !important;
}

/* Ensure option list remains readable */
select option{
  color:#111827 !important;
  background:#ffffff;
}

/* Readonly/disabled should still be readable */
input[readonly],
textarea[readonly],
input[disabled],
select[disabled],
textarea[disabled]{
  opacity:0.90;
}

/* Placeholders */
input::placeholder,
textarea::placeholder{
  color:#4b5563;
}

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

.inv-card button,
.inv-card input[type="button"],
.inv-card input[type="submit"]{
  border-radius:6px;
  border:none;
  padding:0.45rem 0.9rem;
  font-size:0.9rem;
  background:#2563eb;
  color:#fff;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
}

.inv-card button:hover,
.inv-card input[type="button"]:hover,
.inv-card input[type="submit"]:hover{
  background:#1e40af;
}

/* Photo upload button (Replace/Add Photo) */
.file-btn,
label.file-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.45rem 0.75rem;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.18);
  background:#2563eb !important;   /* match primary buttons */
  color:#ffffff !important;
  text-shadow:none !important;
  cursor:pointer;
  font-size:0.9rem;
  line-height:1.1;
  text-decoration:none;
  user-select:none;
}

.file-btn:hover{
  background:#2563eb !important;
}

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

/* Hide native file input but keep it accessible */
.file-input-hidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* ==============================
   Photo / Rotate UI
   ============================== */

/* Photos grid: cap at 3 columns even on wide screens */

/* Photos grid: cap at 3 columns on wide screens, still responsive */
.inv-grid-photos{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

@media (max-width:1024px){
  .inv-grid-photos{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px){
  .inv-grid-photos{
    grid-template-columns:1fr;
  }
}

.photo-slot{
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  padding:12px;
}

.photo-title{
  font-weight:700;
  margin:0 0 8px 0;
  color:#111827;
}

.photo-preview{
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(0,0,0,0.25);
  border-radius:10px;
  margin-bottom:10px;
  background:#f8fafc;
}

.thumb-preview-img{
  max-width:150px;
  max-height:110px;
  display:block;
}

.file-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.file-meta{
  font-size:12px;
}

.muted{
  color:#6b7280;
}

.is-hidden{
  display:none !important;
}

.inv-rotate-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:8px;
  flex-wrap:wrap;
}

.inv-rotate-label{
  font-weight:600;
  color:#374151;
}

.inv-rotate-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.18);
  background:#ffffff;
}

.inv-rotate-btn:hover{
  background:#f3f4f6;
}

/* ==============================
   Helpers / Banners
   ============================== */

.inv-help{
  font-size:0.8rem;
  color:#6b7280;
  white-space:normal;
}

.inv-inline{
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
}

.inv-actions{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1rem;
}

.inv-banner{
  display:none;
  margin:0 0 1rem 0;
  padding:0.75rem 1rem;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  font-weight:600;
}

.inv-banner--ok{
  background:#ecfdf5;
  border:1px solid #34d399;
  color:#065f46;
}

.inv-banner--err{
  background:#fef2f2;
  border:1px solid #f87171;
  color:#7f1d1d;
}

.inv-banner--show{
  display:block;
}

/* ==============================
   Page base
   ============================== */

html, body{
  height:100%;
}

body{
  margin:0;
  background:#f3f4f6;
  color:#111827;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Checkboxes: keep compact and readable */
input[type="checkbox"]{
  width:auto;
  height:auto;
  background:transparent !important;
  box-shadow:none !important;
}

/* ==============================
   Inventory_Maint page-specific (moved from inline <style>)
   ============================== */

.ui-datepicker{
  font-size:64%;
}

#thumb_img{
  text-align:center;
  vertical-align:middle;
  height:110px;
  margin:0;
  padding:0;
}

#thumb_p{
  text-align:center;
  width:100%;
  height:100px;
  margin:0;
  padding:0;
  vertical-align:middle;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* Ensure thumbnail preview remains centered */
.thumb-preview-img{
  margin:0 auto;
}

/* Legacy rotate wrapper (kept for existing markup) */
.rotate-ui{
  margin-top:6px;
}

.rotate-ui table{
  margin:0 auto;
}

/* Date inputs (jQuery UI datepicker trigger) */
.datepicker{
  width:110px;
}

/* Keywords + Comments textareas: always take the full available width */
#keywords,
#text_desc{
  width:100%;
  box-sizing:border-box;
}
/* Intranet header */
.intranet-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px 0;
}

.intranet-banner {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}
/* ==============================
   Intranet Nav (Swimbi overrides)
   Full-width bar + centered contents
   ============================== */

/* Full-width bar */
#swimbi{
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: #ffffff;
}

/* Center the top-level UL within the full-width bar */
#swimbi > ul{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
}

/* Top-level items */
#swimbi > ul > li{
  margin: 0;
  padding: 0;
}

/* Top-level links: modern “pill” buttons */
#swimbi > ul > li > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Hover / focus “glow” (replaces the old image-swap glow) */
#swimbi > ul > li > a:hover,
#swimbi > ul > li > a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}

/* Optional: subtle “press” feel */
#swimbi > ul > li > a:active{
  transform: translateY(1px);
}

/* Dropdown containers */
#swimbi ul ul{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Dropdown links */
#swimbi ul ul a{
  padding: 10px 12px;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
}

/* Make dropdown items feel clickable */
#swimbi ul ul a:hover,
#swimbi ul ul a:focus-visible{
  outline: none;
  box-shadow: none;
}

/* Mobile: keep it usable without forcing tiny buttons */
@media (max-width: 700px){
  #swimbi > ul{
    gap: 6px;
    padding: 8px 10px;
  }
  #swimbi > ul > li > a{
    padding: 10px 12px;
  }
}
/* Ensure readonly/disabled fields are visibly gray (authoritative) */
.inv-page .inv-card input[readonly],
.inv-page .inv-card textarea[readonly],
.inv-page .inv-card select[disabled],
.inv-page .inv-card input[disabled],
.inv-page .inv-card textarea[disabled]{
  background-color: #e5e7eb !important;
  color: #374151 !important;
  border-color: rgba(0,0,0,0.18) !important;
  cursor: not-allowed;
  opacity: 1 !important; /* prevents “washed out” look */
}
.inv-clock-card {
  text-align: center;
}

.inv-clock {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.inv-clock-wrap {
  margin: 0.5rem 0 0.75rem;
  padding: 0;
  text-align: center;
}

.inv-access-note {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #7c2d12; /* muted amber/brown */
}

/* ==============================
   Buttons: ensure .inv-btn works for <a> and <button>
   ============================== */

.inv-btn,
a.inv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.45rem .75rem;
  border-radius:.6rem;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}

a.inv-btn:link,
a.inv-btn:visited{
  color:inherit;
}

a.inv-btn:focus-visible{
  outline:2px solid rgba(59,130,246,.55);
  outline-offset:2px;
}

/* ==============================
   2-Week Calendar (Vacation) — Weekdays-only (Mon–Fri)
   - Used by /php/Vacation_Cal_AJAX.php (card grid)
   ============================== */

.cal2wk{
  margin:0.75rem 0 1rem;
}

.cal2wk__scroller{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(0,0,0,.12);
  border-radius:0.75rem;
  background:#fff;
}

/* 5 columns (Mon–Fri). Reduce min-width to shrink cards. */
.cal2wk__grid--wrap{
  display:grid;
  grid-template-columns:repeat(5, minmax(110px, 1fr));
  gap:10px;
  padding:10px;
}

/* Each day is a “card-like” cell */
.cal2wk__day{
  border:1px solid rgba(0,0,0,.10);
  border-radius:0.75rem;
  background:#fff;
  padding:0.5rem 0.6rem;
  min-height:120px;
}

/* Day header */
.cal2wk__dayhead{
  display:flex;
  justify-content:space-between;
  gap:0.5rem;
  font-size:0.85rem;
  font-weight:500;
  line-height:1.1;
}

.cal2wk__dayhead span:last-child{
  font-size:0.8em;
  opacity:0.85;
}

.cal2wk__events > div{
  margin:0.2rem 0;
}

/* Event “badges” */
.cal2wk__event{
  display:inline-block;
  padding:0.2rem 0.4rem;
  border-radius:0.5rem;
  font-size:0.8rem;
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
}

.cal2wk__event--vac{  background:rgba(59,130,246,.15); }
.cal2wk__event--sick{ background:rgba(220,38,38,.12); }
.cal2wk__event--other{background:rgba(16,185,129,.14); }

/* Mobile: slightly tighter cards */
@media (max-width:640px){
  .cal2wk__grid--wrap{
    grid-template-columns:repeat(5, minmax(100px, 1fr));
    gap:8px;
    padding:8px;
  }
  .cal2wk__day{
    padding:0.45rem 0.5rem;
    min-height:110px;
  }
}

/* ==============================
   Authorized Page Components
   ============================== */

.inv-loginline{
  margin: .5rem 0 1rem 0;
  font-size: .95rem;
  opacity: .9;
  justify-content: center;  /* center text within full width */
}

.reminder-card{
  border-radius: 14px;
  padding: .85rem 1rem;
  border: 1px solid rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .10);
}

.reminder-card__title{
  font-weight: 700;
  margin-bottom: .5rem;
}

.reminder-card__body{
  font-size: .95rem;
  line-height: 1.35;
}

/* Employee status — uniform 8-across grid with tight spacing */
.emp-status{
  display: grid !important;
  grid-template-columns: repeat(8, minmax(90px, 0.9fr)); /* uniform cards */
  gap: 2px !important;                                 /* minimal spacing */
  justify-content: start !important;                    /* no space-around/space-between */
  justify-items: stretch !important;
  align-content: start !important;

  margin: 0px 0 0px;
  padding: 1.0rem;
}

/* Force content to actually use the grid cell width */
.emp-status__item{
  width: 100%;
  box-sizing: border-box;
}

/* Make name + badge take the full available width */
.emp-status__name,
.emp-status__badge{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;  /* center text within full width */
}

/* Keep names on one line but let them use the full width */
/*.emp-status__name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* only triggers if truly too long */


/* Rounded name label */
.emp-status__name{
  border-radius: 999px;          /* pill shape */
  padding: 2px 4px;
  background: rgba(255,255,255,.08);
  width:100% !important;
  min-wdith:0 !important;
}

/* Badge: full-width pill */
.emp-status__badge{
  padding: 2px 0;
  border-radius: 999px;
}
.emp-status__badge.clocked_in,
.emp-status__badge.clocked_out{
  width: 100% !important;
  min-width: 0 !important;
}

/* Responsive */
@media (max-width: 800px){
  .emp-status{ grid-template-columns: repeat(4, minmax(110px, 1fr)); }
}

@media (max-width: 480px){
  .emp-status{ grid-template-columns: repeat(2, minmax(110px, 1fr)); }
}