/* Minimal extra styling (Tailwind via CDN handles most) */
:root {
  --brand: #C1AD9E;
  --bg: #EFEFEF;
}
/* Pages default to white background; sidebar will use --bg */
body { background: #ffffff; }
html, body { overflow-x: hidden; max-width: 100%; }
.bg-side { background-color: var(--bg); }
.border-brand { border-color: var(--brand); }
.text-brand { color: var(--brand); }
.bg-brand { background-color: var(--brand); }
.round-xl { border-radius: 17px; }
.round-2xl { border-radius: 31px; }

/* Reusable UI helpers */
.pill-grey { background: var(--bg); border: 0; border-radius: 9999px; padding: .5rem .75rem; display: inline-flex; align-items: center; }
.btn-pill { background: var(--bg); color: #6b6b6b; border: 0; border-radius: 9999px; padding: .35rem .7rem; min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-pill:hover { background: var(--brand); color: #fff; }
.badge-soft { background: var(--bg); color: #6b6b6b; border-radius: 9999px; padding: .15rem .5rem; display: inline-block; font-size: .8rem; }

.table-soft { border-collapse: separate; border-spacing: 0 8px; width: 100%; }
.table-soft thead th { border: 0; }
.table-soft tbody td { background: var(--bg); border: 0; }
.table-soft tbody tr td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.table-soft tbody tr td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

/* Form fields */
.field-grey { background: var(--bg); border: 0; border-radius: 9999px; padding: .5rem .75rem; }

/* Sidebar nav active indicator */
.side-nav .nav-link { display:block; padding:.5rem .75rem; border-left:3px solid transparent; border-radius:12px; color: inherit; text-decoration:none; }
.side-nav .nav-link:hover { background:#f5f5f5; }
.side-nav .nav-link.active { background:#eae4de; border-left-color: var(--brand); font-weight:600; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .btn-pill { height: 26px; min-width: 26px; padding: .2rem .5rem; font-size: .85rem; }
  .pill-grey { padding: .35rem .6rem; }
  .badge-soft { font-size: .7rem; padding: .1rem .4rem; }
  .table-soft { border-spacing: 0 6px; }
}

/* Sidebar mobile overlay */
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; display: none; }
.sidebar-overlay.show { display: block; }
.sidebar-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 270px; background: var(--bg); box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 12px; display:flex; flex-direction:column; overflow:hidden; transform: translateX(-100%); transition: transform .24s ease; }
.sidebar-overlay.show .sidebar-panel { transform: translateX(0); }
.no-scroll { overflow: hidden; }

.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.sidebar-overlay.show { opacity:1; pointer-events:auto; }
/* Split content: scrollable middle and pinned bottom */
.side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.side-latest { border-top: 1px solid rgba(0,0,0,.06); background: linear-gradient(to top, rgba(0,0,0,0.03), rgba(0,0,0,0)); }
.side-latest .nav-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Sidebar menu: entire menu sticky via header markup; keep link truncation friendly */
.side-latest .nav-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Page fade transitions */
.page-fade { opacity: 0; transition: opacity .18s ease; }
.page-fade.in { opacity: 1; }
.page-fade.out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sidebar-panel { transition: none; }
  .sidebar-overlay { transition: none; }
  .page-fade { transition: none; }
}
.sidebar-close { position: absolute; right: 8px; top: 8px; background: transparent; border: 0; font-size: 22px; line-height: 1; color: #6b6b6b; }

/* Accordion transitions */
.accordion .body { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); transition: max-height .28s ease, opacity .2s ease, transform .2s ease; will-change: max-height, opacity, transform; }
.accordion.open .body { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .accordion .body { transition: none !important; }
}

/* Desktop sidebar collapse */
/* Always allow hiding the desktop aside when collapsed */
body.sidebar-collapsed .desktop-aside { display: none !important; }
@media (min-width: 768px) {
  body.sidebar-collapsed #sbOpenDesktop { display: inline-flex !important; }
  #sbOpenDesktop { display: none; }
  /* Shift content back when collapsed */
  body.sidebar-collapsed #pageRoot { margin-left: 0 !important; }
}