/* ===== Layout ===== */
body {
  background-color: #f3f5f8;
}

/* Bolder field labels site-wide for easier reading. */
.form-label {
  font-weight: 600;
  color: #1f2937;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.logo-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 4px;
}
.logo-box .logo-img {
  height: 56px;
  width: auto;
  display: block;
  /* Sharper rendering of the bitmap logo at this size. */
  image-rendering: -webkit-optimize-contrast;
}
.logo-box .logo-wordmark {
  font-size: 26px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: 0.2px;
  line-height: 1;
}

.help-icon-link {
  color: #6366f1;
  transition: color .15s ease;
}
.help-icon-link:hover {
  color: #4338ca;
}

.small-muted {
  color: #6b7280;
  font-size: 13px;
}

/* ===== Section panels (color coded so each section is easy to spot) ===== */
.section-panel {
  border: 1px solid #e5e7eb;
  border-left: 5px solid #6366f1;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.section-panel.section-general  { border-left-color: #0ea5e9; }
.section-panel.section-employee { border-left-color: #10b981; }
.section-panel.section-hardware { border-left-color: #f59e0b; }
.section-panel.section-software { border-left-color: #8b5cf6; }
.section-panel.section-notes    { border-left-color: #6b7280; }

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f8fafc;
}
.section-header .section-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.section-header h5 {
  margin: 0;
  font-weight: 600;
  color: #1f2937;
}

/* color of the section number badge follows the section accent */
.section-general  .section-num { background:#e0f2fe; color:#0369a1; }
.section-employee .section-num { background:#d1fae5; color:#047857; }
.section-hardware .section-num { background:#fef3c7; color:#b45309; }
.section-software .section-num { background:#ede9fe; color:#6d28d9; }
.section-notes    .section-num { background:#e5e7eb; color:#374151; }

/* faded full-bar background to match the section badge color */
.section-general  .section-header { background:#f0f9ff; }
.section-employee .section-header { background:#ecfdf5; }
.section-hardware .section-header { background:#fffbeb; }
.section-software .section-header { background:#f5f3ff; }
.section-notes    .section-header { background:#f3f4f6; }

/* ===== Selectable tiles for hardware and software ===== */
.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

/* Software grid: tighter columns so all 7 tiles fit on one row at typical desktop widths. */
.option-grid-software {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.option-tile {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 12px 12px 12px;
  background: #fff;
  cursor: pointer;
  transition: all .12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  user-select: none;
  min-height: 110px;
}
.option-tile:hover {
  border-color: #c7d2fe;
  box-shadow: 0 2px 6px rgba(99,102,241,0.10);
}

/* Font Awesome icon (used by hardware tiles). */
.option-tile .option-icon {
  font-size: 28px;
  color: #4b5563;
  margin-bottom: 6px;
}

/* Image icon (used by software tiles). 60x60 source, displayed at 48x48 to keep tiles compact. */
.option-tile .option-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 6px;
  pointer-events: none;
}

.option-tile .option-label {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}
.option-tile .option-check {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 16px;
  color: #cbd5e1;
}

/* checked state */
.option-tile.is-checked {
  border-color: #6366f1;
  background: #eef2ff;
}
.option-tile.is-checked .option-icon { color: #4f46e5; }
.option-tile.is-checked .option-check { color: #4f46e5; }

/* always-on (locked) state for Office 365 */
.option-tile.is-locked {
  border-color: #94a3b8;
  background: #f1f5f9;
  cursor: not-allowed;
}
.option-tile.is-locked .option-icon { color: #475569; }
.option-tile.is-locked .option-check { color: #64748b; }
.option-tile.is-locked .option-locked-note {
  position: absolute;
  bottom: 6px;
  font-size: 11px;
  color: #64748b;
}

/* hide the actual checkbox; we use the tile as the click target */
.option-grid input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ===== Conditional laptop accessories sub-block ===== */
.laptop-accessories {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}
.laptop-accessories .accessories-label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.other-text-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #e5e7eb;
}

/* ===== Landing page (Default.aspx) ===== */
.landing-card {
  max-width: 920px;
  margin: 0 auto;
}
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.landing-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  text-decoration: none;
  color: #1f2937;
  transition: all .12s ease;
  min-height: 200px;
  justify-content: center;
}
.landing-tile:hover {
  border-color: #6366f1;
  background: #eef2ff;
  box-shadow: 0 2px 10px rgba(99,102,241,0.12);
  color: #1f2937;
}
.landing-tile .landing-icon {
  font-size: 44px;
  color: #4f46e5;
  margin-bottom: 14px;
}
.landing-tile .landing-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}
.landing-tile .landing-sub {
  font-size: 13px;
  color: #6b7280;
}

/* ===== Icon radio (Office Container vs Building) ===== */
.icon-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  max-width: 520px;
}

/* ===== Monitors Qty conditional row ===== */
.monitors-qty-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}

/* =========================================================================
   Signature pad (Sign.aspx)
   ========================================================================= */
.signature-pad-wrap {
  border: 1px solid #ced4da;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  max-width: 620px;
}
.sig-canvas {
  display: block;
  width: 100%;
  height: 200px;
  background: #fff;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}
.sig-toolbar {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.aup-paragraph {
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 10px;
  text-align: justify;
}

/* =========================================================================
   Admin selection list (admin detail pages)
   ========================================================================= */
.selection-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.selection-list li {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background: #f9fafb;
  border: 1px solid #eef0f3;
  border-radius: 6px;
}
.selection-icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
  margin-right: 10px;
  color: #4f46e5;
}
.selection-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 10px;
}
.selection-label {
  font-weight: 500;
}
.selection-suffix {
  margin-left: 6px;
  color: #6b7280;
  font-size: 13px;
}

/* =========================================================================
   General Equipment qty tiles
   ========================================================================= */
.option-grid-qty .option-tile {
  position: relative;
}
.option-qty {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.qty-label {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}
.qty-input {
  width: 70px;
  text-align: center;
}

.option-notes {
  margin-top: 6px;
  width: 100%;
}
.option-notes-input {
  width: 100%;
  font-size: 13px;
}

/* =========================================================================
   Status overview tabs
   ========================================================================= */
.status-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-tabs .badge {
  font-size: 11px;
}

/* =========================================================================
   Admin navigation bar
   ========================================================================= */
.admin-nav .btn {
  font-size: 12px;
  padding: 3px 8px;
}
.admin-nav .text-muted {
  font-size: 11px;
}