/* =========================================================
   SAFAZONE Admin — Components
   ========================================================= */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 13.5px;
  padding: 11px 18px;
  transition: transform .1s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary-red);
  color: var(--white);
  box-shadow: var(--shadow-red);
}
.btn-primary:hover { background: var(--dark-red); }

.btn-secondary {
  background: var(--primary-purple);
  color: var(--white);
  box-shadow: var(--shadow-purple);
}
.btn-secondary:hover { background: var(--dark-purple); }

.btn-gradient {
  background: var(--brand-gradient);
  color: var(--white);
}
.btn-gradient:hover { background: var(--brand-gradient-hover); }

.btn-outline {
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--primary-purple); color: var(--primary-purple); background: var(--light-purple-bg); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: #F2F2F4; color: var(--text-primary); }

.btn-danger-ghost { background: var(--light-red-bg); color: var(--primary-red); }
.btn-danger-ghost:hover { background: #FFE1E1; }

.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 7px; }
.btn-icon { padding: 9px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-flush { padding: 0; overflow: hidden; }

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--white);
  background: var(--brand-gradient);
}
.stat-card .stat-icon svg { width: 22px; height: 22px; }
.stat-card .stat-icon.purple { background: linear-gradient(135deg,#A85CD8,#70299D); }
.stat-card .stat-icon.red { background: linear-gradient(135deg,#E23B3B,#990000); }
.stat-card .stat-icon.success { background: linear-gradient(135deg,#3FAE68,#16803A); }
.stat-card .stat-icon.warning { background: linear-gradient(135deg,#F0A945,#D97706); }
.stat-card .stat-body { min-width: 0; }
.stat-card .stat-value { font-family: var(--font-display); font-size: 23px; font-weight: 800; line-height: 1.1; }
.stat-card .stat-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.stat-card .stat-trend { font-size: 11.5px; font-weight: 700; margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; }
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--primary-red); }

/* ---------- Badges / Chips / Status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-error { background: var(--error-bg); color: var(--primary-red); }
.badge-purple { background: var(--light-purple-bg); color: var(--primary-purple); }
.badge-neutral { background: #F1F1F3; color: var(--text-secondary); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--light-purple-bg); color: var(--dark-purple);
  padding: 5px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
}
.chip .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 16px; min-width: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.form-label .req { color: var(--primary-red); }
.form-hint { font-size: 11.5px; color: #8A8A8A; margin-top: 5px; }

.input, .select, .textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: 13.5px;
  color: var(--text-primary);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px var(--light-purple-bg);
}
.input::placeholder, .textarea::placeholder { color: #A6A6A6; }
.textarea { resize: vertical; min-height: 90px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23444' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }

.input-with-icon { position: relative; }
.input-with-icon svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #A6A6A6; }
.input-with-icon .input { padding-left: 38px; }

.field-error { border-color: var(--primary-red) !important; }
.error-text { color: var(--primary-red); font-size: 11.5px; margin-top: 5px; display: none; font-weight: 600; }
.field-error ~ .error-text, .form-group.has-error .error-text { display: block; }

.color-swatch-input { display: flex; align-items: center; gap: 10px; }
.color-swatch-input input[type=color] {
  width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border);
  padding: 3px; background: var(--white); cursor: pointer;
}

.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: #DADADA; border-radius: var(--r-pill);
  transition: .2s; cursor: pointer;
}
.switch .slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: var(--white); border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.switch input:checked + .slider { background: var(--success); }
.switch input:checked + .slider::before { transform: translateX(18px); }

.upload-drop {
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  padding: 22px;
  text-align: center;
  background: #FBFAFC;
  transition: all .15s ease;
  cursor: pointer;
}
.upload-drop:hover { border-color: var(--primary-purple); background: var(--light-purple-bg); }
.upload-drop svg { width: 26px; height: 26px; color: var(--primary-purple); margin: 0 auto 8px; }
.upload-drop .u-title { font-weight: 700; font-size: 13px; color: var(--text-primary); }
.upload-drop .u-hint { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }

/* ---------- Table ---------- */
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.table-toolbar .tt-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.table-search {
  display: flex; align-items: center; gap: 8px;
  background: #F6F6F8; border-radius: var(--r-sm); padding: 9px 13px; min-width: 220px;
}
.table-search svg { width: 16px; height: 16px; color: #9A9A9A; }
.table-search input { border: none; background: transparent; outline: none; font-size: 13px; width: 100%; }

.table-scroll { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.data-table thead th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-secondary); font-weight: 700; padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: #FCFBFD; white-space: nowrap;
}
.data-table tbody td {
  padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-primary); vertical-align: middle;
}
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--light-purple-bg); }
.data-table tbody tr:last-child td { border-bottom: none; }

.cell-main { display: flex; align-items: center; gap: 10px; }
.cell-thumb { width: 38px; height: 38px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; background: #F5F5F5; }
.cell-title { font-weight: 700; color: var(--text-primary); }
.cell-sub { font-size: 11.5px; color: var(--text-secondary); }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

/* A Delete action is usually a <form> (for CSRF + method spoofing)
   wrapping a single button, rather than a plain link like its Edit/Print
   siblings. Without this, the <form> is itself an unstyled block-level
   flex item — under the container's default align-items:stretch it
   stretches to the row's full height while its button child doesn't
   fill that height, so the Delete button ends up sitting slightly out
   of line with its sibling buttons. display:contents removes the form's
   own box from layout entirely and promotes the button inside it to be
   a direct flex item of .row-actions, so it lines up exactly like every
   other button — same fix applied to every page using this pattern, not
   just Services, since it's the same underlying markup pattern
   everywhere a row has a Delete action next to Edit/Print/etc. */
.row-actions form { display: contents; }

.table-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; flex-wrap: wrap;
}
.pagination { display: flex; align-items: center; gap: 6px; }
.page-btn {
  min-width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--white); color: var(--text-secondary); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 8px;
}
.page-btn.active { background: var(--brand-gradient); color: var(--white); border-color: transparent; }
.page-btn:hover:not(.active) { border-color: var(--primary-purple); color: var(--primary-purple); }
.page-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- Mobile card-list (table replacement) ---------- */
.card-list { display: none; flex-direction: column; gap: 12px; padding: 16px; }
.record-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px;
}
.record-card .rc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.record-card .rc-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-top: 1px dashed var(--border); }
.record-card .rc-row:first-of-type { border-top: none; }
.record-card .rc-row .k { color: var(--text-secondary); font-weight: 600; }
.record-card .rc-row .v { color: var(--text-primary); font-weight: 600; text-align: right; }
.record-card .rc-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.record-card .rc-actions .btn { flex: 1; }
/* Same reasoning as .row-actions form above — a Delete <form> shouldn't
   sit out of line with its sibling buttons on the mobile card layout
   either. */
.record-card .rc-actions form { display: contents; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(17,17,17,0.5);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--white); border-radius: var(--r-lg); width: 100%; max-width: 560px;
  max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  animation: modalIn .18s ease;
}
.modal.modal-lg { max-width: 760px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 17px; margin: 0; }
.modal-head p { margin: 2px 0 0; font-size: 12.5px; }
.modal-close {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: #F2F2F4;
  display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0;
}
.modal-close:hover { background: var(--light-red-bg); color: var(--primary-red); }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab-btn {
  padding: 12px 18px; font-size: 13.5px; font-weight: 700; color: var(--text-secondary);
  background: none; border: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab-btn.active { color: var(--primary-purple); border-color: var(--primary-purple); }
.tab-btn:hover:not(.active) { color: var(--text-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Steps (KYC wizard) ---------- */
.steps { display: flex; align-items: center; margin-bottom: 22px; }
.step { display: flex; align-items: center; gap: 8px; flex: 1; }
.step .step-circle {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800;
  color: var(--text-secondary); background: var(--white); flex-shrink: 0;
}
.step .step-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.step .step-line { flex: 1; height: 2px; background: var(--border); margin: 0 6px; }
.step.done .step-circle { background: var(--success); border-color: var(--success); color: var(--white); }
.step.active .step-circle { background: var(--primary-purple); border-color: var(--primary-purple); color: var(--white); }
.step.active .step-label, .step.done .step-label { color: var(--text-primary); }

/* ---------- Toast ---------- */
.toast-stack { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--success);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 13px 16px; min-width: 260px;
  display: flex; align-items: flex-start; gap: 10px; animation: toastIn .2s ease;
}
.toast svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 1px; }
.toast.warn { border-left-color: var(--warning); } .toast.warn svg { color: var(--warning); }
.toast.err { border-left-color: var(--primary-red); } .toast.err svg { color: var(--primary-red); }
.toast .t-title { font-weight: 700; font-size: 13px; }
.toast .t-msg { font-size: 12px; color: var(--text-secondary); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px);} to {opacity:1; transform: translateX(0);} }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 50px 20px; }
.empty-state .es-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--light-purple-bg); color: var(--primary-purple);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.empty-state .es-icon svg { width: 28px; height: 28px; }
.empty-state h4 { font-size: 15px; margin-bottom: 4px; }
.empty-state p { font-size: 13px; max-width: 320px; margin: 0 auto 16px; }

/* ---------- Avatar upload / camera ---------- */
.avatar-upload { display: flex; align-items: center; gap: 16px; }
.avatar-upload .au-preview {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--light-purple-bg);
  display: flex; align-items: center; justify-content: center; color: var(--primary-purple); flex-shrink: 0; border: 2px solid var(--border);
}
.avatar-upload .au-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload .au-preview svg { width: 30px; height: 30px; }

.camera-frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden; background: #111;
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border);
}
.camera-frame video, .camera-frame img.captured { width: 100%; height: 100%; object-fit: cover; }
.camera-frame .cam-placeholder { color: #9A9A9A; text-align: center; font-size: 13px; }
.camera-frame .cam-placeholder svg { width: 34px; height: 34px; margin: 0 auto 8px; }
.camera-frame .cam-badge {
  position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 6px;
}
.camera-frame .cam-badge .rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-red); animation: pulseDot 1.2s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.camera-controls { display: flex; gap: 10px; margin-top: 14px; justify-content: center; }

/* ---------- Icon-in-field / input-with-button ----------
   Used across several Add/Edit forms (Service, Sale, AMC, Expense,
   Petty Cash) to place a leading icon inside an input/select, or a
   square action button beside one. Centralized here so every page using
   this pattern renders with correctly aligned icons — some pages were
   previously relying on this being defined locally and had none,
   causing the icon to overlap the field text at 100% desktop zoom. */
.field-icon { position: relative; display: flex; align-items: center; width: 100%; }
.field-icon .fi-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; flex-shrink: 0; color: var(--text-secondary, #7B7688); pointer-events: none; z-index: 1; }
.field-icon .input, .field-icon .select, .field-icon .textarea { width: 100%; padding-left: 40px !important; }

.input-with-btn { display: flex; align-items: stretch; gap: 8px; }
.input-with-btn .input, .input-with-btn > .input { flex: 1; min-width: 0; }
.sq-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; border-radius: var(--r-sm, 10px); border: 1px solid var(--border, #ECE9F1); background: #fff; color: var(--text-secondary, #7B7688); flex-shrink: 0; cursor: pointer; text-decoration: none; }
.sq-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.sq-btn.solid { background: var(--primary-purple, #6D28D9); border-color: var(--primary-purple, #6D28D9); color: #fff; }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--border); border: none; margin: 20px 0; }
.section-title { font-size: 14.5px; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; display: none;}
.section-title svg { width: 18px; height: 18px; color: var(--primary-purple); }
.info-note {
  display: flex; gap: 10px; background: var(--light-purple-bg); border: 1px solid #E9D9F5;
  color: var(--dark-purple); padding: 12px 14px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
}
.info-note svg { width: 18px; height: 18px; flex-shrink: 0; }