/* =====================================================
   e-Pouroshava — Admin shell addendum
   admin.css is byte-for-byte the legacy file the municipality
   staff knows. The only pages the Laravel port adds on top of it
   (Quick Settings, the notifications composer, page toolbars)
   get their styles here, using the legacy design tokens so the
   pages still look native to the old design system.
   Loaded AFTER admin.css on every admin page.
   ===================================================== */

/* ── Missing legacy token ─────────────────────────────────────────────────
   --primary-faint was referenced by the Laravel-only screens (the Quick
   Settings counter, the branch badges, the visitor banner) but never defined
   in the legacy sheet, so those backgrounds silently dropped out. Mapped to
   the legacy primary-50 here rather than touching admin.css. */
:root {
  --primary-faint: var(--primary-50);
}

/* ── Page toolbar (action row above the page content) ───────────────────── */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.page-subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* ── Missing legacy disabled state ────────────────────────────────────────
   admin.css styles no :disabled at all, so the outlawed buttons (the first
   branch's ↑ and the last branch's ↓) looked every bit as clickable as the
   live ones and simply did nothing when pressed. */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:hover { background: transparent; border-color: var(--border); }
.btn-primary:disabled:hover { background: var(--primary); border-color: var(--primary); }

/* ── "পঠিত" badge (notifications history) ───────────────────────────────── */
.badge-completed { background: #d1fae5; color: #065f46; }
.badge-completed .badge-dot { background: #059669; }

/* ── Quick Settings (অ্যাপ Quick Settings) ──────────────────────────────── */

.qs-head { margin-bottom: 14px; }
.qs-head .page-subtitle { margin: 0; max-width: 80ch; }

/* One-line guidance strip. Replaces the old gradient banner, which was
   built from six inline styles and out-shouted the form it described. */
.qs-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: var(--primary-50);
  border: 1px solid rgba(26, 86, 219, 0.14);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.qs-hint svg { flex-shrink: 0; margin-top: 3px; color: var(--primary); }

/* Master–detail: the picker card rides along the (potentially long) list of
   available services, so the selection, the preview and the save button never
   scroll out of reach. */
.qs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.qs-picked {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
}

.qs-section { margin-top: 24px; }

.qs-head-right { display: flex; align-items: center; gap: 8px; }

.qs-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--gray-100);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.qs-count.is-full { background: var(--primary-light); color: var(--primary); }

.qs-list-body { padding: 14px; }
.qs-list-body > * + * { margin-top: 12px; }

/* Both pickers are <ul>s. admin.css declares no list reset, so Bootstrap's
   32px padding-left and disc markers were shoving the tiles out of line with
   the search field above them and leaking a stray bullet into the
   loading / empty rows. */
.qs-service-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qs-selected-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qs-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.qs-empty {
  grid-column: 1 / -1;
  padding: 26px 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-muted);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
}

.qs-empty strong {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
}

.qs-service-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}

.qs-service-item:hover { background: var(--gray-50); border-color: var(--gray-300); }
.qs-service-item.selected { border-color: var(--primary); background: var(--primary-50); }

.qs-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--info-light);
  color: var(--info);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.qs-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
}

.qs-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
}

.qs-service-item.selected .qs-check { display: flex; }

.qs-selected-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: grab;
}

.qs-selected-item.drag-over { border-color: var(--primary); border-style: dashed; }
.qs-selected-item:active { cursor: grabbing; }

.qs-order-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.qs-drag-handle { color: var(--text-muted); cursor: grab; flex-shrink: 0; display: flex; }

.qs-remove-btn {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 4px;
  display: flex;
  border-radius: var(--radius-sm);
}

.qs-remove-btn:hover { background: var(--danger-light); }

/* ── App preview (inside the picker card) ───────────────────────────────── */
.qs-pv-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.qs-pv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Each tile carries its palette in three custom properties so the colours
   live in JS and the layout lives here. */
.qs-pv-tile {
  padding: 10px 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--pv-soft, var(--border));
  background: var(--pv-bg, var(--gray-100));
  text-align: center;
}

.qs-pv-tile.is-all {
  --pv: #2563eb;
  --pv-bg: var(--primary-50);
  --pv-soft: var(--primary-light);
}

.qs-pv-icon {
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--pv, var(--text-secondary));
  background: var(--pv-soft, var(--gray-200));
}

.qs-pv-name {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.25;
  color: var(--text-primary);
}

.qs-save { width: 100%; }

/* ── Branch table + service → branch assignment ─────────────────────────── */
.qs-note {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.qs-cell-input { font-size: 13px; padding: 6px 10px; }

.qs-ord { font-size: 13px; font-weight: 700; color: var(--text-muted); }

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

.qs-ord-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
}

.qs-danger { color: var(--danger); border-color: var(--danger); }
.qs-danger:hover { background: var(--danger-light); border-color: var(--danger); }

.qs-addbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.qs-addbar .form-control { width: auto; }
.qs-addbar .is-name { flex: 1 1 240px; max-width: 320px; }
.qs-addbar .is-icon { flex: 0 1 200px; max-width: 240px; }

/* A 100%-wide two-column table left a dead half-row between the service name
   and its <select>, so the assignments are a responsive grid of rows instead. */
.qs-assign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 10px;
}

.qs-assign-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 8px 7px 14px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.qs-assign-row:hover { border-color: var(--gray-300); }

.qs-assign-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qs-assign-row select {
  flex: 0 0 44%;
  min-width: 0;
  font-size: 13px;
  padding: 6px 30px 6px 10px;
}

@media (max-width: 1150px) {
  .qs-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 980px) {
  .qs-grid { grid-template-columns: minmax(0, 1fr); }
  .qs-picked { position: static; top: auto; }
}

@media (max-width: 768px) {
  .qs-assign-grid { grid-template-columns: minmax(0, 1fr); }
  .qs-assign-row select { flex: 0 0 50%; }
}

/* ── Portal indigo accents (brand unity; admin.css/admin.js untouched) ──
   The legacy panel stays structurally identical — only the brand hue
   follows the citizen portal. Removing this block restores the blue look. */
:root {
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-light: #EEF2FF;
  --primary-50: #F5F6FF;
  --bg-sidebar-active: rgba(79, 70, 229, .18);
}
.sidebar-nav .nav-item.active { color: #A5B4FC; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.btn-submit { background: linear-gradient(135deg, #4F46E5, #4338CA); }
.btn-submit:hover { box-shadow: 0 4px 12px rgba(79, 70, 229, .35); }

/* Sidebar readability: brighter menu text on the dark rail. */
.sidebar-nav .nav-item { color: #dbe2ea; }
.sidebar-nav .nav-item:hover { color: #ffffff; }
.sidebar-nav .nav-item svg { opacity: .85; }
.sidebar-section { color: #9fb0c3; }

/* Brand scrollbar: thin indigo thumb on a light track (page + sidebar +
   tables + modals). Firefox uses scrollbar-width/color; WebKit uses the
   pseudo elements below. Touch browsers keep their overlay bars. */
html { scrollbar-width: thin; scrollbar-color: #4F46E5 #E8EBF0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #E8EBF0; border-radius: 8px; }
::-webkit-scrollbar-thumb { background: #4F46E5; border-radius: 8px; border: 2px solid #E8EBF0; }
::-webkit-scrollbar-thumb:hover { background: #4338CA; }
.admin-sidebar::-webkit-scrollbar { width: 8px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: #6366F1; border: none; }
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: #818CF8; }
.admin-sidebar { scrollbar-width: thin; scrollbar-color: #6366F1 transparent; }
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar { height: 8px; width: 8px; }

/* ── Admin create/edit modal (admins.php) ───────────────────────────────
   Rounded card, gradient header, grouped tick pickers. Lives here (not in
   admin.css) because the legacy sheet is byte-exact and read-only. */
.am-modal { border-radius: 16px; overflow: hidden; }
#adminModal .modal-dialog.am-narrow { max-width: 560px; }
.am-modal .modal-body { padding: 16px; }
.am-modal-head {
  background: linear-gradient(135deg, #4F46E5, #6366F1);
  border-bottom: none;
  padding: 12px 16px;
}
.am-modal-head .modal-title { color: #fff; font-size: 16px; }
.am-modal-foot { border-top: 1px solid var(--border-light); padding: 10px 16px; gap: 8px; }
.am-btn-save {
  background: linear-gradient(135deg, #4F46E5, #4338CA);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 8px 26px;
  border-radius: 8px;
}
.am-btn-save:hover, .am-btn-save:focus { color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, .35); }
.am-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#adminModal .form-control { padding: 7px 10px; font-size: 13.5px; }
.am-tick-card {
  background: #F5F6FF;
  border: 1px solid #E4E6F5;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
}
.am-tick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.am-tick-head h6 { margin: 0; font-weight: 700; font-size: 13px; color: #312E81; }
.am-count {
  font-size: 12px;
  font-weight: 600;
  color: #4F46E5;
  background: #EEF2FF;
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}
.am-tick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 168px; overflow-y: auto; }
.am-tick {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 400;
  background: #fff;
  border: 1px solid #E4E6F5;
  border-radius: 8px;
  padding: 5px 8px;
  margin: 0;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.am-tick:hover { border-color: #4F46E5; background: #F2F3FD; }
.am-tick input[type="checkbox"] { width: 16px; height: 16px; accent-color: #4F46E5; flex-shrink: 0; cursor: pointer; }
.am-tick span { font-size: 13px; }
@media (max-width: 576px) {
  #adminModal .modal-dialog.am-narrow { max-width: 100%; }
  .am-field-grid, .am-tick-grid { grid-template-columns: 1fr; }
  .am-tick-grid { max-height: 140px; }
  .am-modal .modal-body { padding: 12px; }
}