/* app.css — theme, layout, components */
@keyframes magicPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(15,107,63,.5); }
  50%      { box-shadow: 0 0 0 12px rgba(15,107,63,0); }
}
.btn-magic-pulse { animation: magicPulse 1.2s ease-in-out 4; }
@font-face {
  font-family: 'JameelNoori';
  src: url('../assets/fonts/Jameel-Noori-Nastaleeq.ttf') format('truetype');
  font-display: swap;
}
:root {
  --brand: #0f6b3f; --brand-d: #0a4d2d; --gold: #c9972b; --bg: #f3f0e8; --card: #fff; --ink: #1d2a24; --muted: #6b7a72;
  --bs-body-font-family: 'JameelNoori', 'Noto Nastaliq Urdu', 'Segoe UI', Tahoma, sans-serif;
  --bs-body-font-size: 1.08rem; --bs-body-line-height: 1.95; --bs-body-bg: var(--bg); --bs-body-color: var(--ink);
  --bs-success: #0f6b3f; --bs-success-rgb: 15,107,63;
  --bs-primary: #0f6b3f; --bs-primary-rgb: 15,107,63; --bs-link-color: #0f6b3f; --bs-link-hover-color: #0a4d2d;
}
html, body { -webkit-tap-highlight-color: transparent; }
body { font-family: var(--bs-body-font-family); background: var(--bg); padding-bottom: 76px; overflow-x: hidden; }
.btn, .form-control, .form-select, .badge, .nav-link, .modal-title { font-family: inherit; }
.btn { line-height: 1.8; min-height: 44px; border-radius: 12px; padding-top: .2rem; padding-bottom: .2rem; }
.btn-sm { min-height: 36px; border-radius: 10px; }
.btn-success, .btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-success:hover, .btn-primary:hover { background: var(--brand-d); border-color: var(--brand-d); }
.btn-outline-success { color: var(--brand); border-color: var(--brand); }
.btn-outline-success:hover { background: var(--brand); border-color: var(--brand); }
.btn-outline-secondary { color: #2f3f37; border-color: #aab8b0; }
.btn-outline-secondary:hover { background: #e6ece8; color: #1d2a24; border-color: #aab8b0; }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); }
.form-control, .form-select { min-height: 46px; border-radius: 12px; line-height: 1.9; border-color: #cfd8d2; background-color: #fff; }
.form-control[readonly], .form-control:disabled { background-color: #eef1ef; }
textarea.form-control { min-height: 80px; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(15,107,63,.15); }
.form-label { font-weight: bold; color: #2a3b32; }
.text-brand { color: var(--brand); }
.min-w-0 { min-width: 0; }
.code { font-family: 'Segoe UI', Arial, sans-serif; font-size: .85em; letter-spacing: .3px; unicode-bidi: isolate; }
.nav-pills .nav-link { color: var(--ink); border-radius: 20px; white-space: nowrap; padding: .1rem 1rem; }
.nav-pills .nav-link.active { background: var(--brand); }
.tabs-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }

/* layout */
.app-shell { display: flex; min-height: 100vh; }
.main-col { flex: 1; min-width: 0; }
.view-pad { padding: 14px 12px 20px; max-width: 1100px; margin: 0 auto; }
.topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--brand), var(--brand-d)); color: #fff; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.top-title { font-size: 1.25rem; font-weight: bold; }
.btn-top { color: #fff; font-size: 1.3rem; min-width: 44px; padding: 0 8px; border: 0; background: transparent; line-height: 1.6; }
.btn-top:hover, .btn-top:active { color: #fff; background: rgba(255,255,255,.15); }
.app-menu { --bs-offcanvas-width: 290px; background: #fff; }
.menu-brand { align-items: center; gap: 10px; padding: 14px 16px; font-size: 1.3rem; font-weight: bold; color: var(--brand); border-bottom: 1px solid #e5e9e6; }
.menu-brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.menu-list { display: flex; flex-direction: column; padding: 8px; overflow-y: auto; }
.nav-link-app { display: flex; align-items: center; gap: 10px; padding: 4px 14px; color: var(--ink); text-decoration: none; border-radius: 12px; font-size: 1.1rem; min-height: 46px; }
.nav-link-app .ic { width: 28px; text-align: center; font-size: 1.2rem; }
.nav-link-app:hover { background: #eef5f0; }
.nav-link-app.active { background: var(--brand); color: #fff; }
.bottom-nav { position: fixed; bottom: 0; right: 0; left: 0; z-index: 1030; display: flex; background: #fff; border-top: 1px solid #dfe5e1; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px rgba(0,0,0,.08); }
.bn-item { flex: 1; text-align: center; text-decoration: none; color: var(--muted); font-size: .85rem; line-height: 1.4; padding: 6px 0 4px; }
.bn-item span { display: block; font-size: 1.35rem; line-height: 1.3; }
.bn-item.active { color: var(--brand); font-weight: bold; }
.bn-main span { background: var(--gold); color: #fff; width: 46px; height: 46px; border-radius: 50%; margin: -22px auto 0; line-height: 46px; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.toast-container { z-index: 3000; top: 56px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; font-size: 1rem; margin-bottom: 6px; max-width: 94vw; }
#splash { position: fixed; inset: 0; z-index: 5000; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }

/* components */
.card-box { background: var(--card); border-radius: 16px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.item-card { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-right: 4px solid var(--brand); }
.item-card[data-href], .item-card[data-act] { cursor: pointer; }
.item-card:active { background: #f1f7f3; }
.item-card.warn { border-right-color: #e0a100; } .item-card.bad { border-right-color: #c0392b; } .item-card.mute { border-right-color: #aab; opacity: .75; }
.stat-card { background: #fff; border-radius: 16px; padding: 10px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); height: 100%; border-top: 4px solid var(--brand); }
.stat-card.warn { border-top-color: #e0a100; } .stat-card.bad, .stat-card.neg { border-top-color: #c0392b; } .stat-card.gold { border-top-color: var(--gold); } .stat-card.blue { border-top-color: #2a6fb5; }
.stat-v { font-size: 1.45rem; font-weight: bold; line-height: 1.7; color: var(--brand-d); }
.stat-card.bad .stat-v, .stat-card.neg .stat-v { color: #b03020; }
.stat-l { color: var(--muted); font-size: .98rem; line-height: 1.5; }
.quick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; background: #fff; border: 0; border-radius: 16px; padding: 10px 4px; width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.08); color: var(--ink); text-decoration: none; font-size: .98rem; line-height: 1.6; min-height: 88px; }
.quick-btn .qi { font-size: 1.8rem; line-height: 1.3; }
.quick-btn:active { background: #eef5f0; }
.picker-btn { text-align: right; cursor: pointer; background: #fff; }
.srch { display: block; padding: 6px 4px; border-bottom: 1px solid #eee; color: var(--ink); text-decoration: none; }
.modal-content { border-radius: 18px; border: 0; }
.modal-header { border-bottom: 1px solid #e8ece9; }
.modal-header .btn-close { margin: 0 auto 0 0; }
.badge { font-weight: normal; font-size: .85rem; line-height: 1.5; }
.table { --bs-table-bg: transparent; margin: 0; }
.table th { white-space: nowrap; background: #eef3ef; font-size: .95rem; }
.table td { vertical-align: middle; }
.rt-wrap { overflow-x: auto; }
.step-card { border: 1px solid #e0e6e2; border-radius: 14px; padding: 10px; background: #fafcfb; }
.meas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.meas-cell label { font-size: .92rem; color: #2a3b32; margin: 0; line-height: 1.6; }
.meas-cell .form-control { min-height: 40px; padding: 2px 8px; }
.meas-cell .rm { color: #b03020; cursor: pointer; padding: 0 6px; }
.garment-card { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.09); border-right: 5px solid var(--gold); }
.timeline { border-right: 2px solid #d5ddd8; margin-right: 8px; padding-right: 14px; }
.timeline .ev { position: relative; padding-bottom: 8px; }
.timeline .ev::before { content: ''; position: absolute; right: -21px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.pos { color: var(--brand-d); } .neg .stat-v { color: #b03020; }
.status-flow { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 2px; margin-top: 6px; }
.sf { flex: none; font-size: .8rem; padding: 0 8px; border-radius: 12px; background: #e6ece8; color: var(--muted); line-height: 1.8; }
.sf.done { background: #cfe8d8; color: var(--brand-d); } .sf.cur { background: var(--brand); color: #fff; }
.chip { display: inline-block; background: #eef3ef; border-radius: 12px; padding: 0 10px; font-size: .9rem; margin-left: 4px; line-height: 1.8; }
.draggable-row { background: #fff; border: 1px solid #dfe5e1; border-radius: 12px; padding: 6px; margin-bottom: 6px; }
hr.soft { border-color: #dfe5e1; opacity: 1; }
#printArea { display: none; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(15,107,63,.2); }
.form-check-input { width: 1.3em; height: 1.3em; margin-top: .35em; }