/* FILE: css/pro-ui.css — v19 inner-page polish (loaded last) */
:root { --pu-line:#e6ecec; --pu-ink:#0b1b3a; --pu-soft:#f4f8f7; }
html.dark { --pu-line:#232d42; --pu-ink:#eef2f7; --pu-soft:#0f1729; }

/* Type rhythm */
#page-root h1 { font-family: Fraunces, serif; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
#page-root h2 { letter-spacing: -.01em; }
#page-root .tabular, #page-root td.text-right, #page-root th.text-right { font-variant-numeric: tabular-nums; }

/* Touch targets: every icon button gets a 40px hit area, visible focus */
#page-root button[data-view], #page-root button[data-edit], #page-root button[data-delete],
#page-root td button.p-1\.5 { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; transition: background-color .15s, color .15s, transform .12s; }
#page-root td button.p-1\.5:active { transform: scale(.92); }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; border-radius: 10px; }

/* Tables: sticky header, quieter chrome, softer status pills */
#page-root .overflow-x-auto { scrollbar-width: thin; }
#page-root table thead th { position: sticky; top: 0; z-index: 2; background: var(--pu-soft); color: #64748b; text-transform: none; font-size: 12px !important; letter-spacing: .01em; }
#page-root table tbody tr { border-color: var(--pu-line); }
#page-root table tbody td .rounded-full { padding: 3px 10px; font-weight: 600; }
#page-root table tbody tr:focus-within { background: rgba(20,184,166,.06); }

/* Filter / search rows: one calm surface, comfortable height */
#page-root input[type=search], #page-root input[type=text], #page-root input[type=number], #page-root input[type=date], #page-root select { min-height: 44px; font-size: 15px; }
#page-root textarea { font-size: 15px; }

/* Primary buttons feel pressable */
#page-root button.bg-brand-600, #page-root a.bg-brand-600 { min-height: 44px; font-weight: 600; box-shadow: 0 8px 18px -10px rgba(13,148,136,.7); transition: transform .12s, box-shadow .2s; }
#page-root button.bg-brand-600:active { transform: scale(.97); box-shadow: 0 3px 8px -6px rgba(13,148,136,.7); }

/* Empty + loading */
.pu-skel { position: relative; overflow: hidden; background: var(--pu-soft); border-radius: 12px; }
.pu-skel::after { content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: pu-shimmer 1.3s infinite; }
html.dark .pu-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes pu-shimmer { to { transform: translateX(100%); } }

/* ---------- Mobile: table rows become cards ---------- */
@media (max-width: 639px) {
  #page-root .overflow-x-auto { overflow: visible; }
  #page-root table.pu-cards, #page-root table.pu-cards tbody { display: block; width: 100%; }
  #page-root table.pu-cards thead { display: none; }
  #page-root table.pu-cards tbody { display: grid; gap: .7rem; padding: .75rem; background: transparent; }
  #page-root table.pu-cards tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .9rem; padding: .9rem 1rem .6rem;
    background: #fff; border: 1px solid var(--pu-line); border-radius: 18px; box-shadow: 0 1px 2px rgba(11,27,58,.05);
  }
  html.dark #page-root table.pu-cards tbody tr { background: #131b2c; }
  #page-root table.pu-cards td { display: block; padding: .3rem 0 !important; text-align: left !important; border: 0; min-width: 0; }
  #page-root table.pu-cards td.hidden, #page-root table.pu-cards td[class*="hidden"] { display: block !important; }
  #page-root table.pu-cards td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; font-size: 11.5px; font-weight: 500; color: #94a3b8; margin-bottom: 1px;
  }
  /* first data cell (name) = card title, full width; checkbox pinned top-right */
  #page-root table.pu-cards td:first-child:has(input[type=checkbox]) { position: absolute; right: .6rem; top: .5rem; padding: 0 !important; }
  #page-root table.pu-cards tr { position: relative; }
  #page-root table.pu-cards td.pu-title { grid-column: 1 / -1; font-size: 15.5px; font-weight: 600; padding-right: 2rem !important; }
  #page-root table.pu-cards td.pu-title::before { display: none; }
  #page-root table.pu-cards td.pu-actions { grid-column: 1 / -1; border-top: 1px solid var(--pu-line); margin-top: .35rem; padding-top: .3rem !important; }
  #page-root table.pu-cards td:empty, #page-root table.pu-cards td.pu-skip { display: none !important; }
  #page-root table.pu-cards td[colspan] { grid-column: 1 / -1; text-align: center !important; }
  #page-root table.pu-cards td[colspan]::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pu-skel::after { animation: none; } * { scroll-behavior: auto !important; } }

/* =====================================================================
   v20 — app-wide shell, forms, feedback, reports, settings
   ===================================================================== */

/* iOS zooms into inputs under 16px: stop it */
@media (max-width: 639px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
}
input[type=checkbox], input[type=radio] { accent-color: #0d9488; width: 18px; height: 18px; cursor: pointer; }
input::placeholder, textarea::placeholder { color: #a3b0c2; }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
html.dark * { scrollbar-color: #334155 transparent; }

/* Content never hides behind the bottom nav */
@media (max-width: 1023px) { #page-content, #page-root { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Top bar: shadow appears once you scroll ---------- */
#topbar-root header { transition: box-shadow .2s ease, background-color .2s ease; }
body.pu-scrolled #topbar-root header { box-shadow: 0 6px 20px -12px rgba(11, 27, 58, .35); }
#topbar-root header button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Bottom nav: frosted bar, pill behind the active icon ---------- */
#bottom-nav-root nav {
  background: rgba(255, 255, 255, .88) !important; backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top-color: rgba(226, 232, 240, .8) !important;
}
html.dark #bottom-nav-root nav { background: rgba(15, 23, 41, .88) !important; border-top-color: #1c2536 !important; }
#bottom-nav-root nav a { min-height: 58px; -webkit-tap-highlight-color: transparent; }
#bottom-nav-root nav a > span:nth-of-type(2) { padding: 3px 14px; border-radius: 99px; transition: background-color .2s ease; }
#bottom-nav-root nav a.text-brand-600 > span:nth-of-type(2) { background: rgba(20, 184, 166, .14); }
#bottom-nav-root nav a:active { opacity: .7; }
.nav-dot { display: none; }

/* ---------- Side drawer / sidebar links ---------- */
#sidebar-root a, #menu-drawer a { min-height: 44px; border-radius: 12px; transition: background-color .15s ease, transform .12s ease; }
#menu-drawer a:active, #sidebar-root a:active { transform: scale(.98); }

/* ---------- Toasts: frosted, above the nav, thumb-reachable ---------- */
#toast-root { left: 0; right: 0; bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); padding: 0 1rem; }
@media (min-width: 1024px) { #toast-root { bottom: 1.5rem; } }
#toast-root > div { border-radius: 16px; padding: .8rem 1.1rem; max-width: min(92vw, 420px); box-shadow: 0 18px 40px -16px rgba(11, 27, 58, .55); pointer-events: auto; }

/* ---------- Modals ---------- */
.app-modal .modal-panel { max-height: 92vh; }
.app-modal .modal-panel button[aria-label*="lose"], .app-modal [data-close-modal] { min-width: 44px; min-height: 44px; border-radius: 14px; }
.form-actions { padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)) !important; }
.form-actions button { min-height: 46px; font-weight: 600; border-radius: 14px; }
label.block, .app-modal label { font-weight: 600; color: #334155; }
html.dark label.block, html.dark .app-modal label { color: #cbd5e1; }

/* ---------- Pagination + secondary buttons ---------- */
#page-root [id$="pagination"] button { min-width: 40px; min-height: 40px; border-radius: 12px; font-weight: 600; transition: background-color .15s, transform .12s; }
#page-root [id$="pagination"] button:active { transform: scale(.94); }
#page-root button.border:not(.bg-brand-600):not([class*="bg-rose"]), #page-root a.border:not(.bg-brand-600) { min-height: 42px; border-radius: 12px; font-weight: 600; transition: background-color .15s, border-color .15s, transform .12s; }
#page-root button.border:active { transform: scale(.97); }

/* ---------- Empty states ---------- */
.empty-ic { width: 60px; height: 60px; margin: 0 auto .9rem; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(20,184,166,.14), rgba(245,166,35,.12)); color: #0f766e; }
.empty-ic svg { width: 28px; height: 28px; }
html.dark .empty-ic { color: #5eead4; }
#page-root td[colspan] .text-slate-400, #page-root td[colspan] > div:not(.empty-ic):not(.mt-3) { color: #64748b; font-size: 14px; }

/* ---------- Cards: consistent section rhythm (Reports, Settings, Khata…) ---------- */
#page-root section.bg-white, #page-root section.card-hover { padding: 1.15rem 1.25rem; border-color: var(--pu-line); }
#page-root section > h2.text-sm { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin-bottom: .85rem; color: var(--pu-ink); }
html.dark #page-root section > h2.text-sm { color: #eef2f7; }
#reports-content { gap: 1rem; }
#reports-content .grid > div { border-radius: 16px; }
#reports-content table td, #reports-content table th { font-variant-numeric: tabular-nums; }

/* ---------- Sticky page actions: floating add button on mobile ---------- */
#pu-top { position: fixed; right: 1rem; bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); z-index: 35; width: 44px; height: 44px; border-radius: 16px; border: 1px solid var(--pu-line); background: rgba(255,255,255,.92); color: #0f766e; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -12px rgba(11,27,58,.45); opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none; transition: opacity .2s, transform .2s; }
#pu-top.on { opacity: 1; transform: none; pointer-events: auto; }
html.dark #pu-top { background: rgba(19,27,44,.92); border-color: #232d42; color: #5eead4; }
@media (min-width: 1024px) { #pu-top { bottom: 1.5rem; right: 1.5rem; } }


/* Page switches: gentle cross-fade, one subtle move */
#page-root > * { animation: pu-in .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes pu-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #page-root > * { animation: none; } #pu-top { transition: none; } }
@media print { #pu-top, #bottom-nav-root { display: none !important; } }

/* ---------- v21 Settings widgets ---------- */
.pu-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 14px; background: var(--pu-soft); border: 1px solid var(--pu-line); max-width: 100%; }
.pu-seg button { min-height: 38px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #64748b; transition: background-color .15s, color .15s, box-shadow .15s; }
.pu-seg button[aria-checked=true] { background: #fff; color: #0f766e; box-shadow: 0 1px 3px rgba(11,27,58,.14); }
html.dark .pu-seg button[aria-checked=true] { background: #1c2536; color: #5eead4; }
.pu-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem 0; cursor: pointer; }
.pu-row span { display: flex; flex-direction: column; gap: 1px; } .pu-row b { font-size: 14px; font-weight: 600; color: var(--pu-ink); } .pu-row small { font-size: 12px; color: #94a3b8; }
html.dark .pu-row b { color: #eef2f7; }
input.pu-switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px !important; height: 28px !important; border-radius: 99px !important; background: #cbd5e1; position: relative; transition: background-color .2s; border: 0 !important; }
input.pu-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s cubic-bezier(.16,1,.3,1); }
input.pu-switch:checked { background: #0d9488; } input.pu-switch:checked::after { transform: translateX(18px); }
.pu-logo { width: 64px; height: 64px; flex: none; border-radius: 18px; border: 1.5px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #94a3b8; overflow: hidden; background: var(--pu-soft); }
.pu-logo img { width: 100%; height: 100%; object-fit: contain; }
.pu-meter { display: grid; gap: .5rem; } .pu-meter div { display: flex; align-items: baseline; gap: .4rem; } .pu-meter b { font-size: 22px; color: var(--pu-ink); font-variant-numeric: tabular-nums; } .pu-meter span { font-size: 12.5px; color: #94a3b8; }
html.dark .pu-meter b { color: #eef2f7; }
.pu-meter i { display: block; height: 6px; border-radius: 99px; background: var(--pu-soft); overflow: hidden; } .pu-meter u { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #14b8a6, #f5a623); transition: width .5s cubic-bezier(.16,1,.3,1); }
.pu-stat { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--pu-line); font-size: 14px; color: #64748b; } .pu-stat b { color: var(--pu-ink); font-weight: 600; }
html.dark .pu-stat b { color: #eef2f7; }

/* density + calm mode (Settings › Appearance) */
html.pu-compact #page-root table td, html.pu-compact #page-root table th { padding-top: .45rem !important; padding-bottom: .45rem !important; }
html.pu-compact #page-root section.bg-white { padding: .85rem 1rem; }
html.pu-calm *, html.pu-calm *::before, html.pu-calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }