/* =========================================================
   Admin UI (V2) — layered on top of your legacy CSS
   We import your original file FIRST so nothing breaks,
   then apply new look/feel overrides below.
   ========================================================= */

@import url("/attorney/css/attorney_admin_panel.css");

/* ---------- Vars from shared UI ---------- */
:root {
  --sw-brand-ink: #002f6c;
  --sw-brand-ink-2: #004080;
  --sw-accent: #4caf50;
  --sw-accent-2: #008CBA;
  --sw-ink: #1d2433;
  --sw-bg: #f5f7fb;
  --sw-card: #ffffff;
  --sw-sub: #6b778c;
  --sw-soft: #e6ecf5;
}

/* ---------- Gentle normalizations (non-destructive) ---------- */
body {
  background: var(--sw-bg);
  color: var(--sw-ink);
}

/* Keep cards and panels clean even if legacy sets borders/shadows differently */
.sw-card,
.section .placard,
.modern-placard-section .placard,
.placard-container .placard {
  background: var(--sw-card);
  border: 1px solid var(--sw-soft);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

/* Limit super aggressive legacy margins if any */
.section { margin-top: 18px; }

/* ---------- Top KPI row ---------- */
.kpi-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}

.kpi-card {
  padding: 16px;
  display: grid;
  gap: 6px;
  background: var(--sw-card);
  border: 1px solid var(--sw-soft);
  border-radius: 12px;
}
.kpi-title {
  font-size: .9rem;
  color: var(--sw-sub);
}
.kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0a2540;
}
.kpi-small {
  font-size: 1rem;
  font-weight: 600;
  color: #0a2540;
}

/* ---------- Placard headers / toggles ---------- */
.modern-placard-section .placard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.h4-button,
.button-modern {
  background: linear-gradient(90deg, var(--sw-accent), #3ea74b);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.h4-button:hover,
.button-modern:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Keep legacy toggle visuals, just make them crisp */
.toggle-icon { font-size: 1.1rem; color: #243046; }

/* ---------- Scroll containers ---------- */
.modern-placard-container,
.placard-container-modern,
.placard-container {
  max-height: 600px;     /* your original target */
  overflow-y: auto;      /* keep scrolling behavior */
  scrollbar-gutter: stable both-edges; /* avoids layout shift on show/hide */
}

/* ---------- Profile iframe panel ---------- */
.placard-container iframe,
#profile-placard iframe {
  width: 100%;
  height: 540px;
  border: 1px solid var(--sw-soft);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
}

/* ---------- Clients list cards ---------- */
.placard-container-modern { display: grid; gap: 12px; }
.placard { padding: 12px 14px; }

/* ---------- Header right side / menu ---------- */
.appbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.user-chip {
  background: #ffffff1a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .9rem;
}

.menu-icon { cursor: pointer; }

/* Preserve your dropdown behavior, just refine visuals */
.dropdown-content {
  /* legacy likely sets display on JS toggle; keep that */
  position: absolute;
  right: 0;
  top: 44px;
  background: #fff;
  min-width: 180px;
  border: 1px solid var(--sw-soft);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 5;
}
.dropdown-content a {
  color: #36454F;
  padding: 12px 14px;
  display: block;
  text-decoration: none;
}
.dropdown-content a:hover { background: #f7faff; }

/* ---------- Pagination button rows ---------- */
#button-container-myincident,
#currentClientsSection .button-container {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.hidden-buttons { display: none !important; }

/* ---------- Search box (shown/hidden by your JS) ---------- */
#searchClientName {
  width: 100%;
  margin: 8px 0 6px 0;
  padding: 10px 12px;
  border: 1px solid var(--sw-soft);
  border-radius: 10px;
  outline: none;
}
#searchClientName:focus {
  border-color: #a7c9ff;
  box-shadow: 0 0 0 3px rgba(63,131,248,.125);
}

/* ---------- Toggle header for Current Clients ---------- */
.toggle-header-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  background: #b5d9e6;
  padding: 10px 12px;
  border: 1px solid var(--sw-soft);
  border-radius: 10px;
}

/* ---------- Buttons inside legacy areas ---------- */
.button-modern[disabled],
.contact-client-btn[disabled] {
  opacity: .85;
  cursor: not-allowed;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: 1fr; }
}