@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }.crm-page @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }.crm-page *, .crm-page *::before, .crm-page *::after { box-sizing: border-box; font-weight: 400 !important; }.crm-page, .crm-page { height: 100%; margin: 0; padding: 0; }.crm-page { font-family: 'Century Gothic', CenturyGothic, AppleGothic, Tahoma, 'Leelawadee UI', sans-serif; -webkit-font-smoothing: antialiased; background: #F5F2EE; }.crm-page input, .crm-page select, .crm-page textarea, .crm-page button { font-family: 'Century Gothic', CenturyGothic, AppleGothic, Tahoma, 'Leelawadee UI', sans-serif; }.crm-page ::-webkit-scrollbar { width: 5px; height: 5px; }.crm-page ::-webkit-scrollbar-track { background: transparent; }.crm-page ::-webkit-scrollbar-thumb { background: #D4CEC9; border-radius: 99px; }.crm-page input:focus, .crm-page select:focus, .crm-page textarea:focus { border-color: #1C1917 !important; outline: none; }.crm-page button { cursor: pointer; }.crm-page #app { display: flex; height: 100vh; overflow: hidden; position: relative; }.crm-page #sidebar { display: flex; flex-direction: column; width: 240px; background: #1C1917; flex-shrink: 0; }.crm-page .sb-logo { padding: 28px 22px 16px; flex-shrink: 0; }.crm-page .sb-logo-text { font-family: 'Century Gothic', CenturyGothic, sans-serif; font-size: 21px; color: #F5F2EE; letter-spacing: 0.18em; font-weight: 500; line-height: 1; }.crm-page .sb-logo-sub { font-size: 9px; color: #57534E; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 5px; }.crm-page .sb-div { height: 1px; background: #2D2927; margin: 0 16px; flex-shrink: 0; }.crm-page .sb-nav { padding: 10px; flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }.crm-page .nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; border: none; text-align: left; font-size: 13px; background: transparent; color: #78716C; font-weight: 400; transition: background .1s, color .1s; }.crm-page .nav-btn.active { background: #292522; color: #F5F2EE; font-weight: 500; }.crm-page .nav-btn:hover:not(.active) { background: #242120; color: #A8A29E; }.crm-page .sb-spacer { flex: 1; }.crm-page .sb-action { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid #2D2927; background: transparent; color: #78716C; font-size: 12px; transition: background .1s, color .1s; margin-top: 4px; }.crm-page .sb-action:hover { background: #2D2927; color: #E7E3DE; }.crm-page .sb-footer { padding: 14px 22px; border-top: 1px solid #2D2927; flex-shrink: 0; font-size: 10px; color: #3D3935; letter-spacing: 0.04em; }.crm-page #mob-header { display: none; background: #1C1917; padding: 14px 20px; align-items: center; justify-content: space-between; flex-shrink: 0; }.crm-page #mob-title { font-family: 'Century Gothic', CenturyGothic, sans-serif; font-size: 18px; color: #F5F2EE; letter-spacing: 0.16em; }.crm-page .mob-menu-btn { background: none; border: none; color: #A8A29E; padding: 4px; display: flex; align-items: center; }.crm-page #main-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }.crm-page #content { flex: 1; overflow: auto; }.crm-page .screen { padding: 32px; animation: fadeInUp .3s ease; }.crm-page .screen-title { font-family: 'Century Gothic', CenturyGothic, sans-serif; font-size: 32px; color: #1C1917; font-weight: 500; margin: 0; line-height: 1.1; }.crm-page .screen-sub { color: #78716C; font-size: 13px; margin: 6px 0 0; }.crm-page .screen-hrow { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }.crm-page .card { background: #FFF; border-radius: 12px; border: 1px solid #EDE9E4; }.crm-page .card-p { padding: 22px; }.crm-page .btn-primary { display: flex; align-items: center; gap: 8px; background: #1C1917; color: #F5F2EE; border: none; border-radius: 9px; padding: 10px 18px; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .1s; }.crm-page .btn-primary:hover { background: #292522; }.crm-page .btn-secondary { padding: 8px 14px; border: 1px solid #E7E3DE; border-radius: 8px; background: #FFF; color: #57534E; font-size: 12px; display: flex; align-items: center; gap: 6px; transition: background .1s; }.crm-page .btn-secondary:hover { background: #F5F2EE; }.crm-page .badge { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 99px; white-space: nowrap; font-weight: 500; }.crm-page .tbl-wrap { background: #FFF; border-radius: 12px; border: 1px solid #EDE9E4; overflow: hidden; }.crm-page .tbl-scroll { overflow-x: auto; }.crm-page .tbl-head { display: grid; gap: 16px; padding: 11px 22px; background: #F9F7F5; border-bottom: 1px solid #EDE9E4; }.crm-page .tbl-col { font-size: 10px; color: #A8A29E; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }.crm-page .tbl-row { display: grid; gap: 16px; padding: 13px 22px; border-bottom: 1px solid #F5F2EE; cursor: pointer; transition: background .1s; }.crm-page .tbl-row:hover { background: #FAFAF9; }.crm-page .tbl-empty { padding: 40px; text-align: center; font-size: 13px; color: #A8A29E; }.crm-page .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; margin-bottom: 24px; }.crm-page .stat-card { background: #FFF; border-radius: 12px; padding: 22px; border: 1px solid #EDE9E4; }.crm-page .stat-card.dark { background: #DCD8D2; border: none; overflow: hidden; }.crm-page .stat-label { font-size: 10px; color: #A8A29E; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }.crm-page .stat-card.dark .stat-label { color: #78716C; }.crm-page .stat-val { font-family: 'Century Gothic', CenturyGothic, sans-serif; font-size: 42px; color: #1C1917; font-weight: 500; line-height: 1; }.crm-page .stat-card.dark .stat-val { color: #1C1917; font-size: 22px; white-space: normal; overflow-wrap: break-word; word-break: break-word; }.crm-page .stat-sub { font-size: 11px; color: #A8A29E; margin-top: 4px; }.crm-page .stat-card.dark .stat-sub { color: #78716C; }.crm-page .filter-row { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }.crm-page .search-wrap { position: relative; flex: 1; min-width: 160px; max-width: 280px; }.crm-page .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }.crm-page .search-input { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid #E7E3DE; border-radius: 8px; font-size: 13px; background: #FFF; color: #1C1917; }.crm-page .filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }.crm-page .fbtn { padding: 8px 14px; border-radius: 8px; font-size: 12px; border: 1px solid #E7E3DE; background: #FFF; color: #78716C; white-space: nowrap; transition: all .1s; }.crm-page .fbtn.active { background: #1C1917; color: #F5F2EE; border-color: #1C1917; font-weight: 500; }.crm-page .avatar { border-radius: 50%; background: #F0EFED; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Century Gothic', CenturyGothic, sans-serif; color: #57534E; font-weight: 500; }.crm-page .bc { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }.crm-page .bc-back { display: flex; align-items: center; gap: 5px; background: none; border: none; color: #78716C; font-size: 13px; padding: 0; transition: color .1s; }.crm-page .bc-back:hover { color: #1C1917; }.crm-page .tab-bar { display: flex; border-bottom: 1px solid #E7E3DE; margin-bottom: 18px; overflow-x: auto; }.crm-page .tab-btn { padding: 10px 20px; border: none; background: none; font-size: 13px; white-space: nowrap; color: #78716C; border-bottom: 2px solid transparent; font-weight: 400; margin-bottom: -1px; transition: color .1s; }.crm-page .tab-btn.active { color: #1C1917; border-bottom-color: #1C1917; font-weight: 500; }.crm-page .pipe-bg { height: 6px; background: #F5F2EE; border-radius: 99px; overflow: hidden; }.crm-page .pipe-fill { height: 100%; border-radius: 99px; }.crm-page .items-tbl { border: 1px solid #EDE9E4; border-radius: 9px; overflow: hidden; }.crm-page .items-scroll { overflow-x: auto; }.crm-page .items-head, .crm-page .items-row { display: grid; grid-template-columns: .9fr 1fr 1.1fr .9fr .5fr 1fr 1fr; gap: 12px; min-width: 820px; }.crm-page .items-head { padding: 10px 16px; background: #F9F7F5; border-bottom: 1px solid #EDE9E4; }.crm-page .items-row { padding: 11px 16px; border-bottom: 1px solid #F5F2EE; }.crm-page .items-tot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 11px 16px; background: #F9F7F5; }.crm-page #sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 49; }.crm-page #panel-bd { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }.crm-page .slide-panel { display: none; position: fixed; right: 0; top: 0; height: 100%; background: #FFF; z-index: 50; box-shadow: -4px 0 24px rgba(0,0,0,.1); flex-direction: column; animation: slideInRight .25s ease; }.crm-page .slide-panel.open { display: flex; }.crm-page .panel-hdr { padding: 20px 26px; border-bottom: 1px solid #EDE9E4; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }.crm-page .panel-title { font-family: 'Century Gothic', CenturyGothic, sans-serif; font-size: 20px; color: #1C1917; font-weight: 500; margin: 0; }.crm-page .panel-close { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #E7E3DE; background: #FFF; display: flex; align-items: center; justify-content: center; color: #78716C; transition: background .1s; }.crm-page .panel-close:hover { background: #F5F2EE; }.crm-page .panel-body { flex: 1; overflow: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; }.crm-page .panel-foot { padding: 16px 26px; border-top: 1px solid #EDE9E4; display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }.crm-page .flabel { display: block; font-size: 10px; color: #78716C; margin-bottom: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }.crm-page .finput { width: 100%; padding: 9px 12px; border: 1px solid #E7E3DE; border-radius: 8px; font-size: 13px; color: #1C1917; background: #FAFAF9; }.crm-page .fgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.crm-page .finput-sm { padding: 7px 9px; border: 1px solid #E7E3DE; border-radius: 7px; font-size: 12px; color: #1C1917; background: #FAFAF9; }.crm-page .rm-btn { width: 22px; height: 22px; border-radius: 5px; border: 1px solid #E7E3DE; background: #FFF; display: flex; align-items: center; justify-content: center; color: #A8A29E; padding: 0; flex-shrink: 0; transition: background .1s; }.crm-page .rm-btn:hover { background: #F5F2EE; }.crm-page #loading { display: none; position: fixed; inset: 0; background: rgba(245,242,238,.85); z-index: 999; align-items: center; justify-content: center; }.crm-page #loading.show { display: flex; }.crm-page #loading-wrap {
  overflow: hidden; max-width: 0;
  animation: ld-reveal 4.6s cubic-bezier(0.4,0,0.2,1) infinite;
}.crm-page #loading-text {
  display: block;
  font-family: 'Century Gothic', CenturyGothic, sans-serif; font-size: 18px; letter-spacing: .1em;
  color: transparent; white-space: nowrap;
  background: linear-gradient(90deg, #1C1917 0%, #26B99A 45%, #1C1917 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: ld-shimmer 4.6s linear infinite;
}.crm-page @keyframes ld-reveal {
  0%,4%   { max-width:0;     opacity:1; }
  38%,72% { max-width:220px; opacity:1; }
  87%     { max-width:220px; opacity:0; }
  94%,100%{ max-width:0;     opacity:0; }
}.crm-page @keyframes ld-shimmer { 0%{background-position:200% 0} 100%{background-position:-100% 0} }.crm-page #refresh-bar { position: fixed; top: 0; left: 0; width: 0; height: 2px; background: #26B99A; z-index: 9999; transition: width .4s ease, opacity .3s; opacity: 0; }.crm-page #refresh-bar.run { opacity: 1; animation: rbar 1.4s ease infinite; }.crm-page @keyframes rbar { 0%{width:0%} 60%{width:80%} 100%{width:95%} }.crm-page .note-item { background: #FFF; border-radius: 12px; padding: 16px 20px; border: 1px solid #EDE9E4; display: flex; gap: 12px; }.crm-page .note-dot { width: 7px; height: 7px; border-radius: 50%; background: #26B99A; flex-shrink: 0; margin-top: 6px; }.crm-page @media (max-width: 767px) {
  #sidebar { position: fixed; left: -240px; top: 0; height: 100vh; z-index: 50; transition: left .25s ease; }
  #sidebar.open { left: 0; }
  #mob-header { display: flex; }
  .screen { padding: 20px; }
}.crm-page #login-overlay { position:fixed;inset:0;background:#F5F2EE;z-index:9999;display:flex;align-items:center;justify-content:center; }.crm-page .login-card { background:#FFF;border:1px solid #EDE9E4;border-radius:16px;padding:44px 40px;width:360px;max-width:calc(100vw - 32px); }.crm-page .login-logo { font-family:'Century Gothic',CenturyGothic,sans-serif;font-size:28px;color:#1C1917;letter-spacing:.22em;margin-bottom:6px; }.crm-page .login-sub { font-size:11px;color:#A8A29E;letter-spacing:.18em;text-transform:uppercase;margin-bottom:36px; }.crm-page .login-err { font-size:12px;color:#dc2626;margin-top:10px;min-height:18px; }.crm-page @keyframes lg-shake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-8px)} 30%{transform:translateX(7px)} 45%{transform:translateX(-6px)} 60%{transform:translateX(5px)} 75%{transform:translateX(-3px)} 90%{transform:translateX(2px)} }.crm-page .lg-shake { animation:lg-shake .45s ease; }.crm-page .lg-input-err { border-color:#E57373!important; background:#FFF5F5!important; }.crm-page #login-overlay .btn-primary:active { transform:translateY(3px); box-shadow:0 1px 4px rgba(28,25,23,.15)!important; }.crm-page .sb-user { padding:14px 16px;border-top:1px solid #2D2927;margin-top:auto; }.crm-page .sb-username { font-size:12px;color:#D4CEC9;margin-bottom:2px; }.crm-page .sb-role { display:inline-block;font-size:9px;padding:2px 7px;border-radius:99px;letter-spacing:.1em;text-transform:uppercase; }.crm-page .sb-role.admin { background:#26B99A22;color:#26B99A; }.crm-page .sb-role.user { background:#57534E44;color:#A8A29E; }.crm-page .sb-logout { margin-top:10px;width:100%;background:none;border:1px solid #3D3633;border-radius:8px;color:#A8A29E;font-size:11px;padding:7px;text-align:center;cursor:pointer; }.crm-page .sb-logout:hover { border-color:#78716C;color:#D4CEC9; }.crm-page .co-drop { border: 2px dashed #D4CEC9; border-radius: 10px; padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; color: #78716C; font-size: 13px; }.crm-page .co-drop:hover { border-color: #26B99A; background: #FDFBF8; }.crm-page .co-section-title { font-size: 10px; color: #A8A29E; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; margin: 6px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #EDE9E4; }.crm-page .co-field { margin-bottom: 10px; }.crm-page .co-val { font-size: 13px; color: #1C1917; padding: 7px 10px; background: #F9F7F5; border: 1px solid #EDE9E4; border-radius: 7px; width: 100%; }.crm-page .sn-badge { font-family: monospace; font-size: 11px; color: #26B99A; background: #26B99A1F; padding: 2px 7px; border-radius: 5px; display: inline-block; }.crm-page .sn-badge.none { color: #D4CEC9; background: none; border: 1px dashed #E7E3DE; }.crm-page .mp-year-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }.crm-page .mp-year-lead { display: flex; align-items: baseline; gap: 10px; min-width: 0; }.crm-page .mp-year-num { font-size: 16px; font-weight: 600; color: #1C1917; flex-shrink: 0; }.crm-page .mp-year-count { font-size: 11px; color: #78716C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.crm-page .mp-year-stats { display: flex; gap: 16px; flex-shrink: 0; }.crm-page .mp-stat { font-size: 12px; color: #78716C; text-align: right; white-space: nowrap; }.crm-page .mp-stat-main { font-size: 13px; color: #1C1917; font-weight: 500; }.crm-page .mp-stat-lbl { display: inline-block; min-width: 30px; color: #A8A29E; margin-right: 4px; }.crm-page @media (max-width: 767px) {
  .mp-year-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .mp-year-stats { justify-content: space-between; gap: 8px; }
}.crm-page .mp-detail-scroll { overflow-x: auto; }.crm-page .mp-detail-row { grid-template-columns: 1fr 1.3fr 80px 90px 100px; min-width: 560px; }.crm-page .item-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; cursor: zoom-in; flex-shrink: 0; background: #EDE9E4; border: 1px solid #EDE9E4; }.crm-page .item-thumb-lg { width: 128px; height: 128px; border-radius: 10px; object-fit: cover; cursor: zoom-in; border: 1px solid #EDE9E4; background: #EDE9E4; flex-shrink: 0; }.crm-page .lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 17, 14, .94); z-index: 9999; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }.crm-page .lightbox-overlay img { max-width: 90vw; max-height: 90vh; touch-action: none; cursor: grab; user-select: none; -webkit-user-drag: none; }.crm-page .lightbox-close { position: absolute; top: 14px; right: 18px; background: rgba(255,255,255,.08); border: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 12px 8px; border-radius: 8px; }.crm-page .lightbox-close:hover { background: rgba(255,255,255,.16); }.crm-page .item-upload-btn { display: flex; align-items: center; justify-content: center; border: 1px dashed #C8B8A8 !important; background: #FAF7F3 !important; color: #A8A29E; font-size: 17px; font-weight: 300; cursor: pointer; }.crm-page .item-upload-btn:hover { background: #F0EAE2 !important; color: #78716C; }

/* Lightbox overlay is intentionally appended to document.body (common.js
   lbEnsureDom), not inside .crm-page, so it isn't clipped by the page
   container's own overflow/stacking context. Every other rule in this file
   is scoped under .crm-page to avoid colliding with MongApp's own CSS, but
   scoping these too meant they silently never applied at all -- image
   still opened (raw <img>, no styling needed to just render) and
   closeLightbox() still worked, but with no dark backdrop, no fixed
   centering, and an invisible/unpositioned close button, it looked and
   behaved like a broken full-page dump instead of a lightbox. Left
   deliberately unscoped -- kept id/class names specific enough
   (lightbox-overlay/lightbox-close, not something generic like .overlay)
   that they won't collide with anything in MongApp's own stylesheet. */
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 17, 14, .94); z-index: 9999; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.lightbox-overlay img { max-width: 90vw; max-height: 90vh; touch-action: none; cursor: grab; user-select: none; -webkit-user-drag: none; }
.lightbox-close { position: absolute; top: 14px; right: 18px; background: rgba(255,255,255,.08); border: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 12px 8px; border-radius: 8px; }
.lightbox-close:hover { background: rgba(255,255,255,.16); }