/* DentalOS — Nu-Finance Adaptive design system extensions */
:root {
  --primary: #3d6a00;
  --primary-c: #a2e05e;
  --tertiary: #2b53d0;
  --secondary: #885200;
  --danger: #ba1a1a;
  --ink: #1a1c1c;
  --ink-soft: #424939;
  --outline-v: #c2c9b4;
}
* { -webkit-tap-highlight-color: transparent; }
body { letter-spacing: -0.005em; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d5d9cd; border-radius: 999px; border: 2px solid #f9f9f9; }
::-webkit-scrollbar-thumb:hover { background: #c2c9b4; }

.label-caps { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.display-lg { font-size: 32px; font-weight: 800; line-height: 40px; letter-spacing: -0.02em; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:14px; border-radius:.75rem; padding:.625rem 1rem; transition:all .15s ease; cursor:pointer; border:1px solid transparent; }
.btn-primary { background: var(--ink); color:#fff; }
.btn-primary:hover { background:#000; }
.btn-accent { background: var(--primary); color:#fff; }
.btn-accent:hover { background:#325800; }
.btn-secondary { background:#fff; color:var(--ink); border-color:#e2e2e2; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.btn-secondary:hover { border-color: var(--outline-v); background:#fcfcfc; }
.btn-ghost { background:transparent; color:var(--primary); padding:.4rem .6rem; }
.btn-ghost:hover { background:#eef3e6; }
.btn-danger { background: var(--danger); color:#fff; }
.btn-sm { padding:.4rem .7rem; font-size:13px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Card */
.card { background:#fff; border-radius:1.5rem; padding:24px; box-shadow:0px 4px 20px rgba(0,0,0,.04); }
.card-tight { background:#fff; border-radius:1rem; box-shadow:0px 4px 20px rgba(0,0,0,.04); }

/* Inputs */
.inp { width:100%; background:#f9f9f9; border:1px solid #e2e2e2; border-radius:.75rem; padding:.6rem .8rem; font-size:14px; color:var(--ink); transition:.15s; }
.inp:focus { outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(61,106,0,.12); }
label.fld { display:block; }
label.fld > span { display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:4px; }

/* Chips / badges */
.chip { display:inline-flex; align-items:center; gap:.35rem; font-size:11px; font-weight:600; padding:.2rem .55rem; border-radius:999px; letter-spacing:.02em; }

/* Nav */
.nav-item { display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius:.75rem; color:var(--ink-soft); font-weight:600; font-size:14px; cursor:pointer; transition:.12s; }
.nav-item:hover { background:#eef1ea; color:var(--ink); }
.nav-item.active { background:var(--primary-c); color:#1c3300; }
.nav-item i { width:20px; text-align:center; font-size:15px; }

/* Progress */
.track { height:8px; background:#eeeeee; border-radius:999px; overflow:hidden; }
.track > div { height:100%; border-radius:999px; background:var(--primary); }

/* Table */
table.dt { width:100%; border-collapse:collapse; }
table.dt th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--outline); padding:.6rem .75rem; border-bottom:1px solid #ececec; }
table.dt td { padding:.7rem .75rem; font-size:14px; border-bottom:1px solid #f2f2f2; }
table.dt tr:hover td { background:#fafbf8; }

/* Odontogram */
.tooth { cursor:pointer; transition:.1s; }
.tooth:hover { transform: translateY(-2px); }

/* modal */
.modal-back { position:fixed; inset:0; background:rgba(20,22,20,.35); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem; }
.modal { background:#fff; border-radius:1.5rem; box-shadow:0px 10px 30px rgba(0,0,0,.15); width:100%; max-height:92vh; overflow:auto; }

/* toast */
#toast-root { position:fixed; top:1rem; right:1rem; z-index:100; display:flex; flex-direction:column; gap:.5rem; }
.toast { background:var(--ink); color:#fff; padding:.75rem 1rem; border-radius:.75rem; font-size:14px; font-weight:600; box-shadow:0px 10px 30px rgba(0,0,0,.2); animation:slidein .2s ease; }
.toast.ok { background:var(--primary); }
.toast.err { background:var(--danger); }
@keyframes slidein { from { transform:translateX(20px); opacity:0; } to { transform:none; opacity:1; } }

.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* timeline */
.tl-line { position:absolute; left:15px; top:0; bottom:0; width:2px; background:#e6e9e0; }
.tl-dot { width:32px; height:32px; border-radius:.75rem; display:flex; align-items:center; justify-content:center; flex:none; z-index:1; }

/* Expand/close (fullscreen) stage for drawing & prescription writing surfaces */
.stage-fs {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: auto !important;
  padding: 16px 20px 24px !important;
  box-shadow: none !important;
  background: #fff !important;
}
.stage-fs .stage-body { max-width: 1100px; margin: 0 auto; width: 100%; }
.stage-fs .stage-canvas-frame { width: 100%; }
.stage-fs .stage-canvas-frame canvas { width: 100% !important; height: auto !important; }