/* ═══════════════════════════════════════════════════════════
   components.css — Reusable UI components
   (buttons, forms, modals, badges, toasts, searchable selects)
   ═══════════════════════════════════════════════════════════ */

/* ── CARDS ───────────────────────────────────────────────── */
.dash-card,
.booking-history-card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}

.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 18px;
  border-bottom:   1px solid var(--border);
  gap:             12px;
}
.card-header h3 {
  font-family: 'Times New Roman', sans-serif;
  font-size:   14px;
  font-weight: 700;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       9px 18px;
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  font-family:   'DM Sans', sans-serif;
  transition:    all var(--transition);
  white-space:   nowrap;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           6px;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover  { background: #2563eb; box-shadow: 0 0 16px rgba(59,130,246,0.35); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background:    var(--bg3);
  color:         var(--text);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       9px 18px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  font-family:   'DM Sans', sans-serif;
  transition:    all var(--transition);
  white-space:   nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-secondary:hover { border-color: var(--border2); background: var(--bg4); }

.btn-ghost {
  background:    rgb(0, 98, 255);
  border:        1px solid rgba(59,130,246,0.25);
  color:         rgb(255, 255, 255);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  padding:       9px 18px;
  border-radius: var(--radius-sm);
  transition:    all var(--transition);
  font-family:   'DM Sans', sans-serif;
  white-space:   nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-ghost:hover { background: rgba(59,130,246,0.22); border-color: var(--accent); color: #fff; }

.btn-icon {
  background:    var(--bg3);
  border:        1px solid var(--border);
  color:         var(--text2);
  border-radius: 5px;
  padding:       4px 10px;
  font-size:     11px;
  cursor:        pointer;
  font-family:   'DM Sans', sans-serif;
  transition:    all var(--transition);
  font-weight:   600;
  white-space:   nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:hover        { border-color: var(--accent); color: var(--text); }
.btn-icon.danger:hover { border-color: var(--red); color: var(--red); }

.btn-full { width: 100%; margin-top: 8px; padding: 12px; font-size: 14px; }

.btn-remove {
  background: none;
  border:     none;
  color:      var(--text3);
  cursor:     pointer;
  font-size:  14px;
  padding:    4px 6px;
  border-radius: 4px;
  transition: all var(--transition);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.btn-remove:hover { color: var(--red); background: rgba(239,68,68,0.1); }

/* ── STATUS BADGES ───────────────────────────────────────── */
.status-badge {
  display:        inline-flex;
  align-items:    center;
  font-size:      11px;
  font-weight:    700;
  padding:        3px 9px;
  border-radius:  20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space:    nowrap;
}
.status-available { background: rgba(16,185,129,0.1);  color: var(--green); border: 1px solid rgba(16,185,129,0.25); }
.status-checkout  { background: rgba(245,158,11,0.1);  color: var(--amber); border: 1px solid rgba(245,158,11,0.25); }
.status-repair    { background: rgba(239,68,68,0.1);   color: var(--red);   border: 1px solid rgba(239,68,68,0.25); }
.status-fixed {
  background: rgba(59, 130, 246, 0.1);  /* soft blue */
  color: var(--blue);                    /* text in blue */
  border: 1px solid rgba(59, 130, 246, 0.25); /* subtle border */
}

/* ── FORM ELEMENTS ───────────────────────────────────────── */
.form-tabs {
  display:       flex;
  border-bottom: 1px solid var(--border);
}

.form-tab {
  flex:           1;
  padding:        12px;
  background:     none;
  border:         none;
  color:          var(--text2);
  font-size:      13px;
  font-weight:    600;
  cursor:         pointer;
  font-family:    'DM Sans', sans-serif;
  transition:     all var(--transition);
  border-bottom:  2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.form-tab.active          { color: var(--accent); border-bottom-color: var(--accent); }
.form-tab:hover:not(.active) { color: var(--text); }

.tab-content        { display: none; padding: 20px; }
.tab-content.active { display: block; }

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  margin-bottom:  14px;
}
.form-group label {
  font-size:      11px;
  font-weight:    700;
  color:          var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-input {
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       9px 12px;
  color:         var(--text);
  font-size:     13px;
  font-family:   'DM Sans', sans-serif;
  transition:    border var(--transition), box-shadow var(--transition);
  width:         100%;
}
.form-input:focus {
  outline:      none;
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-glow);
}
.form-input::placeholder { color: var(--text3); }

.form-textarea { resize: vertical; min-height: 60px; }

.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.form-actions {
  display:         flex;
  gap:             10px;
  justify-content: flex-end;
  margin-top:      18px;
  flex-wrap:       wrap;
}

.req { color: var(--red); margin-left: 2px; }

.section-label {
  font-size:      11px;
  font-weight:    700;
  color:          var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom:  12px;
  padding-bottom: 8px;
  border-bottom:  1px solid var(--border);
}

.project-form-section { margin-bottom: 20px; }

/* ── SEARCHABLE SELECT ───────────────────────────────────── */
.searchable-select-wrap { position: relative; }

.searchable-dropdown {
  display:       none;
  position:      absolute;
  top:           calc(100% + 4px);
  left: 0; right: 0;
  background:    var(--bg3);
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  z-index:       500;
  max-height:    200px;
  overflow-y:    auto;
  box-shadow:    0 8px 24px rgba(0,0,0,0.4);
}
.searchable-dropdown.open { display: block; }

.sd-item {
  padding:         9px 12px;
  font-size:       13px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  transition:      background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.sd-item:hover  { background: var(--bg4); }
.sd-selected    { color: var(--accent2); }
.sd-check       { color: var(--accent); font-size: 11px; }
.sd-clear       { color: var(--text3); font-style: italic; font-size: 12px; }
.sd-empty       { padding: 10px 12px; font-size: 12px; color: var(--text3); text-align: center; }

/* ── MODALS ──────────────────────────────────────────────── */
.modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index:         1000;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
.modal-overlay.open { display: flex; }

.modal {
  background:    var(--bg2);
  border:        1px solid var(--border2);
  border-radius: var(--radius);
  width:         100%;
  max-width:     500px;
  max-height:    90vh;
  overflow-y:    auto;
  box-shadow:    0 32px 80px rgba(0,0,0,0.6);
  animation:     modalIn 0.2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--border);
  position:        sticky;
  top:             0;
  background:      var(--bg2);
  z-index:         1;
  gap:             12px;
}
.modal-header h3 {
  font-family:   'Times New Roman', sans-serif;
  font-size:     16px;
  font-weight:   700;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.modal-close {
  background:    none;
  border:        none;
  color:         var(--text3);
  font-size:     16px;
  cursor:        pointer;
  padding:       4px 8px;
  border-radius: var(--radius-sm);
  transition:    all var(--transition);
  flex-shrink:   0;
  -webkit-tap-highlight-color: transparent;
}
.modal-close:hover { background: var(--bg3); color: var(--text); }
.modal-body { padding: 20px; }

/* Manage Assets Modal */
.manage-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         300;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.18s;
}
.manage-modal-overlay.open { opacity: 1; pointer-events: all; }

.manage-modal {
  background:    var(--bg2);
  border:        1px solid var(--border2);
  border-radius: var(--radius);
  width:         680px;
  max-width:     95vw;
  max-height:    90vh;
  overflow-y:    auto;
  transform:     translateY(10px);
  transition:    transform 0.18s;
  box-shadow:    0 32px 80px rgba(0,0,0,0.6);
}
.manage-modal-overlay.open .manage-modal { transform: translateY(0); }

.manage-modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 22px;
  border-bottom:   1px solid var(--border);
  position:        sticky;
  top:             0;
  background:      var(--bg2);
  z-index:         1;
}
.manage-modal-header h3  { font-size: 16px; font-weight: 700; font-family: 'DM Sans', sans-serif; }
.manage-modal-close {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--text3); padding: 2px 6px; border-radius: 4px;
}
.manage-modal-close:hover { color: var(--text); background: var(--bg3); }
.manage-modal-body   { padding: 22px; }
.manage-modal-footer {
  padding:    14px 22px;
  border-top: 1px solid var(--border);
  display:    flex;
  gap:        10px;
  justify-content: flex-end;
  position:   sticky;
  bottom:     0;
  background: var(--bg2);
}

/* Modal inline dropdowns */
.modal-dd-wrap { position: relative; width: 100%; }
.modal-dd-wrap .form-input { width: 100%; }
.modal-dropdown {
  background:    var(--bg3);
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  box-shadow:    0 8px 24px rgba(0,0,0,0.4);
  z-index:       600;
  position:      absolute;
  top:           calc(100% + 3px);
  left:          0;
  width:         100%;
  max-height:    200px;
  overflow-y:    auto;
  display:       none;
}
.modal-dropdown.open { display: block; }

/* ── EMPTY / LOADING ─────────────────────────────────────── */
.empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        40px 20px;
  color:          var(--text3);
  font-size:      13px;
  text-align:     center;
  gap:            8px;
}
.empty-state-icon { font-size: 28px; opacity: 0.4; }
.loading-row      { padding: 20px; text-align: center; font-size: 13px; color: var(--text3); }

/* ── TOASTS ──────────────────────────────────────────────── */
.toast-container {
  position:       fixed;
  bottom:         24px;
  right:          24px;
  z-index:        2000;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  max-width:      calc(100vw - 48px);
}
.toast {
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    var(--bg3);
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding:       12px 16px;
  font-size:     13px;
  box-shadow:    0 8px 24px rgba(0,0,0,0.4);
  animation:     toastIn 0.25s ease;
  max-width:     360px;
  word-break:    break-word;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-icon            { font-size: 14px; flex-shrink: 0; }
.toast-success         { border-left: 3px solid var(--green); }
.toast-error           { border-left: 3px solid var(--red); }
.toast-info            { border-left: 3px solid var(--accent); }
.toast-success .toast-icon { color: var(--green); }
.toast-error   .toast-icon { color: var(--red); }
.toast-info    .toast-icon { color: var(--accent2); }

/* ── PROJECT STATUS PILLS ────────────────────────────────── */
.project-status-pill {
  display:     inline-flex;
  align-items: center;
  font-size:   12px;
  font-weight: 700;
  padding:     3px 10px;
  border-radius: 20px;
}
.pill-done   { background: rgba(16,185,129,0.1);  color: var(--green); border: 1px solid rgba(16,185,129,0.25); }
.pill-active { background: rgba(245,158,11,0.1);  color: var(--amber); border: 1px solid rgba(245,158,11,0.25); }

/* Audit user pill */
.audit-user {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   12px;
  padding:     2px 10px;
  border-radius: 20px;
}
.au-icon { font-size: 10px; }
.checkout-user { color: var(--accent2); background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); }

/* Project ended note */
.project-ended-note {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   12px;
  color:       var(--green);
  background:  rgba(16,185,129,0.08);
  border:      1px solid rgba(16,185,129,0.2);
  border-radius: var(--radius-sm);
  padding:     8px 12px;
  flex:        1;
}

/* ── CI DOT (pulse indicator) ────────────────────────────── */
.ci-dot {
  width:         7px;
  height:        7px;
  background:    currentColor;
  border-radius: 50%;
  display:       inline-block;
  animation:     pulse 1.5s infinite;
}