/* Practice Management — EMBEDDED build.
   Derived from practice/practice.css but every component selector is scoped
   under `.pm` so it can never restyle the compliance UI that shares class
   names (.card, .pill, .btn-primary, .btn-secondary, .empty …).
   The `.hidden` helper is intentionally omitted — styles.css already ships a
   global `.hidden { display:none !important }` that the practice markup uses. */

:root {
  --brand-violet:       #7c3aed;
  --brand-violet-hover: #6d28d9;
  --brand-lemon:        #fde047;
  --status-green:       #16a34a;
  --status-amber:       #f59e0b;
  --status-red:         #dc2626;
  --status-blue:        #3b82f6;
  --status-slate:       #64748b;
}

.pm { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; }

/* Card */
.pm .card        { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.875rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; }
.pm .card-head   { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; }
.pm .card-head h2, .pm .card-head h3 { font-size: 1rem; font-weight: 600; margin: 0; }

/* Clickable cards */
.pm .card-link {
  display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.875rem;
  padding: 1.25rem; transition: border-color .12s, box-shadow .12s, transform .12s;
  text-decoration: none; color: inherit; cursor: pointer;
}
.pm .card-link:hover { border-color: #c4b5fd; box-shadow: 0 4px 12px rgba(124,58,237,.08); }

/* Buttons */
.pm .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-violet); color: #fff;
  padding: .55rem 1rem; border-radius: .55rem; font-weight: 500; font-size: .9rem;
  transition: background-color .12s; cursor: pointer; border: 0;
}
.pm .btn-primary:hover { background: var(--brand-violet-hover); }
.pm .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #0f172a;
  padding: .5rem .9rem; border: 1px solid #e2e8f0; border-radius: .55rem;
  font-weight: 500; font-size: .85rem; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.pm .btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

/* Form primitives */
.pm .lbl {
  display: block; font-size: .72rem; font-weight: 500;
  color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem;
}
.pm .inp {
  width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: .5rem;
  padding: .55rem .75rem; font-size: .9rem; color: #0f172a;
}
.pm .inp:focus { outline: 2px solid var(--brand-violet); outline-offset: 0; border-color: var(--brand-violet); }

/* Tables */
.pm .tbl { width: 100%; font-size: .9rem; border-collapse: collapse; }
.pm .tbl thead th {
  font-size: .7rem; font-weight: 600; color: #64748b;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .65rem 1rem; text-align: left; background: #fafbfc; border-bottom: 1px solid #e2e8f0;
}
.pm .tbl tbody td { padding: .75rem 1rem; border-bottom: 1px solid #f1f5f9; }
.pm .tbl tbody tr:hover { background: #f8fafc; }
.pm .tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Pills */
.pm .pill {
  display: inline-flex; align-items: center; padding: .15rem .55rem;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px;
}
.pm .pill-green  { background: #dcfce7; color: #166534; }
.pm .pill-amber  { background: #fef3c7; color: #92400e; }
.pm .pill-red    { background: #fee2e2; color: #991b1b; }
.pm .pill-blue   { background: #dbeafe; color: #1e40af; }
.pm .pill-sky    { background: #e0f2fe; color: #075985; }
.pm .pill-slate  { background: #f1f5f9; color: #334155; }
.pm .pill-violet { background: #ede9fe; color: #6d28d9; }

/* Empty state */
.pm .empty { padding: 3rem 1.5rem; text-align: center; color: #64748b; }
.pm .empty .h { font-weight: 500; color: #0f172a; margin-bottom: .35rem; }

/* Skeleton */
.pm .skel { background: #f1f5f9; border-radius: .35rem; animation: pm-pulse 1.4s ease-in-out infinite; }
@keyframes pm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Report download tile */
.pm .report-card {
  display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
  padding: 1rem 1.25rem; transition: border-color .12s, background-color .12s; text-decoration: none; color: inherit;
}
.pm .report-card:hover { border-color: #c4b5fd; background: #faf5ff; }

/* Activity feed item */
.pm .activity-row { display: flex; gap: 1rem; padding: .75rem 1.25rem; }
.pm .activity-dot { width: .5rem; height: .5rem; border-radius: 999px; margin-top: .6rem; background: #cbd5e1; flex: 0 0 auto; }
.pm .activity-dot.status-change { background: #f59e0b; }
.pm .activity-dot.timesheet     { background: var(--brand-violet); }
.pm .activity-dot.invoice       { background: #16a34a; }

/* ---- Embedded-only chrome ---------------------------------------------- */

/* Sub-tab strip shown at the top of the Practice view (mirrors the old
   top-nav so power users keep a horizontal switcher inside the section). */
.pm .pm-subnav {
  display: flex; flex-wrap: wrap; gap: .25rem; align-items: center;
  border-bottom: 1px solid #e2e8f0; margin-bottom: 1.25rem;
}
.pm .pm-subnav a {
  padding: .6rem .85rem; font-size: .88rem; color: #64748b; cursor: pointer;
  border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap;
}
.pm .pm-subnav a:hover { color: #0f172a; }
.pm .pm-subnav a.active { color: var(--brand-violet); border-bottom-color: var(--brand-violet); font-weight: 600; }

.pm .pm-section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 1rem; }
.pm .pm-section-head h2 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.pm .pm-section-head p  { color:#64748b; font-size:.85rem; margin:.2rem 0 0; }

/* Sidebar sub-links (in the compliance left rail) — mirror a.tab look,
   but NOT class `tab` so the compliance router doesn't treat them as views. */
a.pm-sub-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 30px; border-radius: 6px;
  color: #475569; font-size: 13px; font-weight: 500; text-decoration: none;
  transition: background .12s, color .12s; cursor: pointer; position: relative;
}
a.pm-sub-link:hover { background: #f1f5f9; color: #0f172a; }
a.pm-sub-link.active { background: #f5f3ff; color: #6d28d9; font-weight: 600; }
a.pm-sub-link::before {
  content: ""; position: absolute; left: 17px; width: 4px; height: 4px;
  border-radius: 999px; background: #cbd5e1;
}
a.pm-sub-link.active::before { background: #7c3aed; }
.nav-practice-head { display:flex; align-items:center; gap:10px; padding:7px 10px; color:#475569; font-size:13px; font-weight:600; cursor:pointer; user-select:none; border-radius:6px; }
.nav-practice-head:hover { background:#f1f5f9; }
.nav-practice-head .nav-icon { width:16px; height:16px; color:#7c3aed; }
.nav-practice-head .nav-label { flex:1; }

/* Fold chevrons (Practice group + Categories section) */
.nav-fold-chev { width:14px; height:14px; color:#94a3b8; flex:none; transition:transform .15s ease; }
.nav-practice-head.collapsed .nav-fold-chev,
.nav-section-label.collapsed .nav-fold-chev { transform:rotate(-90deg); }
.nav-section-label.foldable { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
.nav-section-label.foldable:hover { color:#475569; }

/* Locked feature row inside Settings → Plan & features */
.pm .feat-row { display:flex; align-items:center; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid #f1f5f9; }
.pm .feat-row:last-child { border-bottom:0; }