:root{
  --erp-primary:#0d6e6e; --erp-dark:#0a4d4d; --erp-accent:#f5a623;
  --erp-sidebar:#0f2a2a; --erp-sidebar-hover:#163d3d; --erp-bg:#f4f6f8;
}
*{font-family:'Sarabun',sans-serif}
body{background:var(--erp-bg);color:#222}

.erp-topbar{background:linear-gradient(90deg,var(--erp-dark),var(--erp-primary));box-shadow:0 2px 10px rgba(10,77,77,.25);z-index:1030}
.erp-topbar .navbar-brand{font-size:1.3rem;letter-spacing:-.3px}
.erp-topbar .dropdown-toggle{font-size:.95rem}

.erp-layout{display:flex;min-height:calc(100vh - 56px)}
.erp-sidebar{width:240px;background:var(--erp-sidebar);flex-shrink:0}
.erp-main{flex:1;min-width:0;padding:1.35rem 1.6rem;max-width:100%;overflow-x:hidden;animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* desktop: force the offcanvas sidebar to behave as a normal sticky column
   (override Bootstrap .offcanvas-lg's fixed/hidden/transform that can leak in) */
@media(min-width:992px){
  .erp-sidebar.offcanvas-lg{
    position:sticky!important;top:56px;height:calc(100vh - 56px);
    width:240px!important;overflow-y:auto;
    visibility:visible!important;transform:none!important;
    border:0;background:var(--erp-sidebar)}
}

.erp-nav{padding:.5rem 0}
.erp-group{color:#5fa8a8;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:.85rem 1.25rem .35rem}
.erp-link{display:flex;align-items:center;gap:.7rem;color:#cfe3e3;text-decoration:none;padding:.55rem 1.25rem;font-size:.92rem;border-left:3px solid transparent;transition:.15s}
.erp-link:hover{background:var(--erp-sidebar-hover);color:#fff}
.erp-link.active{background:var(--erp-sidebar-hover);color:#fff;border-left-color:var(--erp-accent);font-weight:600}
.erp-link i{width:18px;text-align:center}

.card{border:1px solid #eaf0f0;border-radius:14px;box-shadow:0 1px 3px rgba(16,40,40,.04),0 6px 20px rgba(16,40,40,.05)}
.card-header{background:#fff;border-bottom:1px solid #eef3f3;font-weight:600;color:var(--erp-dark);border-radius:14px 14px 0 0!important;padding:.85rem 1.1rem}
.stat-card{border-radius:14px;padding:1.15rem 1.3rem;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 6px 18px rgba(16,40,40,.12);transition:transform .18s,box-shadow .18s}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,40,40,.18)}
.stat-card::before{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.stat-card .stat-icon{position:absolute;right:1rem;top:1rem;font-size:2.2rem;opacity:.3}
.stat-card .stat-val{font-size:1.75rem;font-weight:800;line-height:1.1;letter-spacing:-.5px}
.stat-card .stat-label{font-size:.82rem;opacity:.93}
.bg-g-teal{background:linear-gradient(135deg,#0d6e6e,#16b5b5)}
.bg-g-blue{background:linear-gradient(135deg,#1457b0,#42a5f5)}
.bg-g-green{background:linear-gradient(135deg,#2e7d32,#5cc164)}
.bg-g-orange{background:linear-gradient(135deg,#e0700a,#f5a623)}
.bg-g-red{background:linear-gradient(135deg,#c62828,#f0584f)}
.bg-g-purple{background:linear-gradient(135deg,#6a1b9a,#b052c8)}

.page-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;margin-bottom:1.15rem;
  padding-bottom:.85rem;border-bottom:1px solid #e7eded}
.page-head h4{margin:0;font-weight:800;color:var(--erp-dark);letter-spacing:-.3px}

.btn{border-radius:9px;font-weight:500;transition:.15s}
.btn-primary{background:var(--erp-primary);border-color:var(--erp-primary);box-shadow:0 2px 6px rgba(13,110,110,.25)}
.btn-primary:hover{background:var(--erp-dark);border-color:var(--erp-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,110,110,.35)}
.btn-outline-primary{color:var(--erp-primary);border-color:var(--erp-primary)}
.btn-outline-primary:hover{background:var(--erp-primary);border-color:var(--erp-primary)}
.btn-sm{border-radius:7px}
a{color:var(--erp-primary);text-decoration-color:rgba(13,110,110,.3)}

.table{font-size:.9rem;margin-bottom:0}
.table>thead th{background:#f1f6f6;color:var(--erp-dark);font-weight:600;border-bottom:2px solid #e0eaea;
  text-transform:none;font-size:.82rem;letter-spacing:.2px;padding:.7rem .9rem;white-space:nowrap}
.table>tbody td{padding:.7rem .9rem;vertical-align:middle;border-color:#f0f4f4}
.table-hover tbody tr{transition:background .12s}
.table-hover tbody tr:hover{background:#f3faf9}
/* card-wrapped table: เอามุมโค้งให้แถวแรก/ท้าย */
.card>.table-responsive{border-radius:0 0 14px 14px;overflow:hidden}
.card>.table-responsive>.table{border-collapse:separate}

.badge{font-weight:600;letter-spacing:.2px;padding:.4em .65em}
.badge.b-new{background:#90a4ae}.badge.b-contacted{background:#42a5f5}
.badge.b-survey{background:#7e57c2}.badge.b-quoted{background:#f5a623}
.badge.b-won{background:#2e7d32}.badge.b-lost{background:#c62828}

/* form controls */
.form-control,.form-select{border-radius:9px;border-color:#dde6e6;font-size:.92rem}
.form-control:focus,.form-select:focus{border-color:var(--erp-primary);box-shadow:0 0 0 .2rem rgba(13,110,110,.12)}
.form-label{font-weight:500;color:#3a5252;margin-bottom:.3rem}
.modal-content{border:0;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-header{border-bottom:1px solid #eef3f3}.modal-header .modal-title{font-weight:700;color:var(--erp-dark)}

/* empty state */
.empty-state{text-align:center;padding:3rem 1rem;color:#90a8a8}
.empty-state i{font-size:2.8rem;opacity:.4;display:block;margin-bottom:.6rem}

.kanban{display:flex;gap:.85rem;overflow-x:auto;padding-bottom:.6rem}
.kanban-col{min-width:255px;flex:1;background:#eef3f3;border-radius:12px;padding:.7rem}
.kanban-col>h6{font-size:.85rem;color:var(--erp-dark);display:flex;justify-content:space-between;align-items:center;
  font-weight:700;padding:.2rem .3rem .55rem}
.lead-card{background:#fff;border-radius:10px;padding:.7rem .8rem;margin-bottom:.55rem;
  box-shadow:0 1px 3px rgba(16,40,40,.08);border-left:3px solid var(--erp-primary);cursor:pointer;font-size:.85rem;
  transition:transform .14s,box-shadow .14s}
.lead-card:hover{box-shadow:0 5px 16px rgba(16,40,40,.16);transform:translateY(-2px)}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a4d4d,#13a3a3)}
.login-box{background:#fff;border-radius:16px;padding:2.5rem;width:100%;max-width:400px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.login-box .logo{text-align:center;font-size:2.5rem;color:var(--erp-primary)}

.progress{height:18px;border-radius:9px;font-size:.7rem}
.progress-bar{background:var(--erp-primary)}

.text-teal{color:var(--erp-primary)!important}
.fs-7{font-size:.85rem}
.print-only{display:none}
@media print{
  .erp-sidebar,.erp-topbar,.no-print{display:none!important}
  .erp-main{padding:0}.print-only{display:block}
  body{background:#fff}
}