/* Matcha theme: foundations */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
  --matcha-900:#2F4A2B; --matcha-700:#4F7942; --matcha-500:#7BA05B;
  --matcha-300:#B7CF9B; --matcha-100:#E8F0DC; --cream:#F7F5EC;
  --bamboo:#C8B88A; --charcoal:#2B2E2A; --danger:#B5483A;
  --warning:#D9A441; --info:#5B8E8A;
  --shadow:0 4px 16px rgba(47,74,43,.08);
  --radius:16px;
}

/* Matcha theme: typography and page shell */
html { font-size:15px; }
body { background:var(--cream)!important; color:var(--charcoal)!important; font-family:Inter,system-ui,sans-serif; line-height:1.6; }
h1,h2,h3,h4,h5,h6,.navbar-brand,.card-header { font-family:Poppins,Inter,sans-serif; color:var(--matcha-900); }
h1 { font-size:28px; } h2 { font-size:22px; } h3 { font-size:18px; }
a { color:var(--matcha-700); } a:hover { color:var(--matcha-900); }
.app-main { background:var(--cream)!important; }
.app-main > main { animation:page-in .3s ease-out both; }
.text-muted { color:#5f685d!important; }

/* Matcha theme: sidebar and top bar */
.app-sidebar { background:var(--matcha-900)!important; color:#fff; }
.app-sidebar .navbar-brand,.app-sidebar .offcanvas-title { color:#fff!important; }
.app-sidebar .nav-link { color:#eef5e9!important; border-radius:12px; min-height:44px; position:relative; transition:background .2s ease,transform .2s ease; }
.app-sidebar .nav-link:hover { background:rgba(123,160,91,.3)!important; transform:translateX(2px); }
.app-sidebar .nav-link.active { background:var(--matcha-500)!important; color:#fff!important; }
.app-sidebar .nav-link.active:before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px; background:var(--matcha-300); border-radius:0 4px 4px 0; }
.sidebar-logo { display:block!important; width:40px!important; height:40px!important; max-width:40px!important; max-height:40px!important; flex:0 0 40px; border-radius:50%; background:#fff; object-fit:cover; object-position:center; padding:2px; border:2px solid var(--matcha-300); }
.app-sidebar { overflow:hidden; }
.app-sidebar .sidebar-label { white-space:nowrap; opacity:1; transition:opacity .15s ease; }
.app-sidebar .sidebar-icon { display:inline-flex!important; align-items:center; justify-content:center; flex:0 0 24px; width:24px; min-width:24px; height:24px; position:relative; z-index:2; text-align:center; visibility:visible!important; opacity:1!important; font-size:1.15rem; line-height:1; }
.app-sidebar .sidebar-icon::before { display:inline-block!important; visibility:visible!important; opacity:1!important; }
.app-main header { background:rgba(255,255,255,.9)!important; border-color:var(--matcha-100)!important; min-height:64px; }
.topbar-title { color:var(--matcha-900); font-family:Poppins,Inter,sans-serif; font-weight:600; }
.topbar-user { min-height:44px; }
.avatar { width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--matcha-700),var(--matcha-500)); }
.user-meta { line-height:1.15;text-align:left; }
.user-meta small { color:#5f685d; }

/* Matcha theme: cards, tables, forms */
.card { border:1px solid rgba(47,74,43,.12)!important; border-radius:var(--radius)!important; box-shadow:var(--shadow)!important; }
.card-header { background:var(--matcha-100)!important; border-bottom:1px solid var(--matcha-300)!important; }
.stat { border-left:4px solid var(--matcha-700)!important; }
.stat .bi { color:var(--matcha-700); }
.table-responsive { border-radius:12px; }
.table { --bs-table-color:var(--charcoal); --bs-table-hover-bg:#f0f5e9; }
.table > :not(caption) > * > * { padding:.75rem .8rem; }
.table thead th { background:var(--matcha-100); color:var(--matcha-900); position:sticky; top:0; z-index:1; }
.badge.bg-primary,.badge.bg-success { background:var(--matcha-700)!important; }
.badge.bg-warning { background:var(--warning)!important; color:#2b2e2a!important; }
.badge.bg-danger { background:var(--danger)!important; }
.form-control,.form-select { border:1px solid #b9c5b2; border-radius:10px; min-height:44px; color:var(--charcoal); }
.form-control:focus,.form-select:focus { border-color:var(--matcha-500); box-shadow:0 0 0 3px rgba(183,207,155,.55); }
.form-label { color:var(--matcha-900); font-weight:600; }
.btn { border-radius:10px; min-height:44px; padding:.55rem 1rem; font-weight:600; transition:transform .15s ease,background .15s ease,box-shadow .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible { outline:3px solid var(--matcha-300); outline-offset:2px; }
.btn-primary { background:var(--matcha-700)!important; border-color:var(--matcha-700)!important; color:#fff!important; }
.btn-primary:hover { background:var(--matcha-500)!important; border-color:var(--matcha-500)!important; }
.btn-outline-primary { color:var(--matcha-700)!important; border-color:var(--matcha-700)!important; }
.btn-outline-primary:hover { background:var(--matcha-700)!important; color:#fff!important; }
.btn-danger,.btn-outline-danger { color:var(--danger)!important; border-color:var(--danger)!important; }
.btn-danger:hover,.btn-outline-danger:hover { background:var(--danger)!important; color:#fff!important; }
.btn-secondary { background:#66705f!important; border-color:#66705f!important; color:#fff!important; }
.dropdown-menu { border:1px solid var(--matcha-300); border-radius:12px; box-shadow:var(--shadow); animation:drop-in .15s ease-out both; }
.dropdown-item { min-height:44px; display:flex; align-items:center; gap:.5rem; }
.dropdown-item:hover { background:var(--matcha-100); }
.alert { border-radius:12px; }

/* Matcha theme: empty states, loading, and actions */
.empty-state { padding:2.5rem 1rem; text-align:center; color:#5f685d; }
.empty-state .bi { color:var(--matcha-500); font-size:2rem; }
.sticky-actions { position:sticky; bottom:0; z-index:10; background:rgba(247,245,236,.95); border-top:1px solid var(--matcha-300); padding:12px 0; }
.skeleton { background:linear-gradient(90deg,#e8f0dc 25%,#f7f5ec 37%,#e8f0dc 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
.toast-container { z-index:1090; }

/* Matcha theme: login */
.login-page { min-height:100vh; display:flex; align-items:flex-start; overflow-x:hidden; overflow-y:auto; background:var(--cream); position:relative; padding:24px 0; }
.login-page:before { content:""; position:absolute; width:420px;height:420px; border-radius:50%; background:radial-gradient(circle,var(--matcha-300),transparent 68%); top:-150px;right:-100px;opacity:.65; }
.login-card { position:relative; width:100%; max-width:430px; margin:auto; }
.login-logo { display:block!important; width:110px!important; height:110px!important; max-width:110px!important; max-height:110px!important; margin:0 auto 1rem; border-radius:50%; background:#fff; object-fit:cover; object-position:center; padding:2px; border:3px solid var(--matcha-300); }
.input-icon { position:relative; }
.input-icon > .bi { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--matcha-700); z-index:2; pointer-events:none; }
.input-icon .form-control { padding-left:42px; }
.input-icon .form-control[data-password-toggle] { padding-right:48px; }
.password-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--matcha-700); min-width:40px; min-height:40px; padding:.4rem; }
.password-toggle:hover { color:var(--matcha-900); }

/* Matcha theme: motion and responsive behavior */
@keyframes page-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes drop-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
@keyframes shimmer { to{background-position:-200% 0} }
@media (min-width:768px) {
  .app-sidebar { flex:0 0 76px; width:76px; min-height:100vh; transition:width .28s ease,flex-basis .28s ease; }
  .app-sidebar > .p-3 { width:280px; }
  .app-sidebar .sidebar-brand { justify-content:flex-start; gap:0!important; }
  .app-sidebar .sidebar-brand .sidebar-label { opacity:0; visibility:hidden; width:0; overflow:hidden; transition:opacity .18s ease,width .28s ease,visibility 0s linear .28s; }
  .app-sidebar .nav { width:248px; }
  .app-sidebar .nav-link { display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding-left:.75rem; padding-right:.75rem; }
  .app-sidebar .nav-link .sidebar-label { opacity:0; visibility:hidden; width:0; overflow:hidden; transition:opacity .18s ease,width .28s ease,visibility 0s linear .28s; }
  .app-sidebar .nav-link .sidebar-icon { position:absolute; left:26px; top:50%; margin:0; transform:translate(-50%,-50%); color:#eef5e9!important; }
  .app-sidebar:hover { flex-basis:280px; width:280px; }
  .app-sidebar:hover .sidebar-brand { gap:.35rem!important; }
  .app-sidebar:hover .sidebar-brand .sidebar-label,
  .app-sidebar:hover .nav-link .sidebar-label { opacity:1; visibility:visible; width:auto; transition-delay:0s; }
  .app-sidebar:hover .nav-link { justify-content:flex-start; gap:.35rem; padding-left:.75rem; padding-right:.75rem; }
  .app-sidebar:hover .nav-link .sidebar-icon { position:relative; left:auto; top:auto; transform:none; }
}
@media (max-width:767.98px) { .user-meta { display:none; } .app-main > main { padding:1rem!important; } .table { min-width:720px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
/* ===== Help pages (PRD / TRD) ===== */
.help-doc{--h-card:#fff;--h-ink:#1f2a1f;--h-muted:#5b6b5b;--h-accent:#5f7f4a;--h-line:#dbe3d3;max-width:820px;margin:0 auto;padding:8px 4px 48px;color:var(--h-ink);font:16px/1.65 Georgia,"Times New Roman",serif}
.help-doc h1{font:700 2rem/1.2 system-ui,sans-serif;margin:0 0 4px}
.help-doc h2{font:600 1.3rem/1.3 system-ui,sans-serif;margin:36px 0 10px;color:var(--h-accent);border-bottom:1px solid var(--h-line);padding-bottom:6px}
.help-doc .meta{color:var(--h-muted);font-family:system-ui,sans-serif;font-size:.9rem;margin-bottom:20px}
.help-doc table{width:100%;border-collapse:collapse;font:.92rem/1.5 system-ui,sans-serif;background:var(--h-card)}
.help-doc th,.help-doc td{border:1px solid var(--h-line);padding:8px 10px;text-align:left;vertical-align:top}
.help-doc th{background:var(--h-line)}
.help-doc .wrap{overflow-x:auto}
.help-doc pre{background:var(--h-card);border:1px solid var(--h-line);padding:12px;overflow-x:auto;font-size:.85rem;line-height:1.5}
.help-doc code{font-family:Consolas,monospace}