/* ========================================================================
   BACKEND EASY UI — ใช้งานง่าย อ่านชัด ไม่กระทบหน้าบ้าน/Login
   ======================================================================== */

body.tw-app.with-sidebar,
body.with-sidebar{
  --easy-bg:#f6f3fb;
  --easy-surface:#ffffff;
  --easy-border:#ded4ee;
  --easy-text:#1f1630;
  --easy-muted:#6a6078;
  --easy-purple:#4c1d95;
  --easy-purple-dark:#3b0764;
  --easy-purple-soft:#f3ecff;
  --easy-purple-soft-2:#fbf8ff;
  background:linear-gradient(180deg,#fbf8ff 0%,#f4effb 100%)!important;
  color:var(--easy-text)!important;
}

/* Main width + spacing */
body.with-sidebar .main-inner{max-width:1480px!important;margin:0 auto!important;padding:18px 22px 26px!important;}
body.with-sidebar .main{background:transparent!important;}

/* Sidebar: clear solid purple */
body .sidebar.easy-sidebar,
body .sidebar#appSidebar{
  width:292px!important;
  background:#3b0764!important;
  color:#fff!important;
  border-right:0!important;
  box-shadow:12px 0 30px rgba(59,7,100,.22)!important;
}
body .sidebar#appSidebar::before{display:none!important;}
body .sidebar .sidebar-inner{padding:16px!important;gap:12px!important;}

body .sidebar .brand,
body .sidebar .user-panel,
body .sidebar .nav-group{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}

body .sidebar .brand{padding:12px!important;}
body .sidebar .brand-title{font-size:15px!important;line-height:1.35!important;color:#fff!important;-webkit-text-fill-color:#fff!important;}
body .sidebar .brand-sub{font-size:12px!important;color:#e9d5ff!important;-webkit-text-fill-color:#e9d5ff!important;}
body .sidebar .brand-mark,
body .sidebar .user-avatar,
body .sidebar .nav-icon,
body .sidebar .nav-group-icon{
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
}

body .sidebar .user-panel{padding:12px!important;align-items:center!important;}
body .sidebar .user-name{color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:14px!important;font-weight:850!important;}
body .sidebar .user-role,
body .sidebar .user-scope{color:#e9d5ff!important;-webkit-text-fill-color:#e9d5ff!important;font-size:12px!important;}

.backend-nav-search{position:relative;margin:2px 0 4px;}
.backend-nav-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6d28d9;font-weight:900;z-index:2;}
.backend-nav-search input{
  width:100%;height:40px;border-radius:14px!important;border:1px solid rgba(255,255,255,.22)!important;
  background:#fff!important;color:#2e1065!important;padding:0 12px 0 34px!important;font-weight:750!important;
  outline:0!important;box-shadow:0 6px 18px rgba(0,0,0,.10)!important;
}
.backend-nav-search input::placeholder{color:#7c6b91!important;}

body .sidebar .nav{gap:8px!important;}
body .sidebar .nav-section-title{color:#e9d5ff!important;-webkit-text-fill-color:#e9d5ff!important;font-size:12px!important;margin:6px 4px!important;font-weight:900!important;}
body .sidebar .nav-group{padding:8px!important;}
body .sidebar .nav-group-title{
  min-height:42px!important;padding:8px!important;border-radius:14px!important;cursor:pointer!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
  display:flex!important;align-items:center!important;gap:10px!important;font-weight:900!important;
}
body .sidebar .nav-group-label{font-size:13px!important;line-height:1.25!important;color:#fff!important;-webkit-text-fill-color:#fff!important;}
body .sidebar .nav-group-caret{margin-left:auto!important;color:#e9d5ff!important;-webkit-text-fill-color:#e9d5ff!important;transition:transform .18s ease!important;}
body .sidebar .nav-group.is-collapsed .nav-submenu{display:none!important;}
body .sidebar .nav-group.is-collapsed .nav-group-caret{transform:rotate(-90deg)!important;}

body .sidebar .nav a,
body .sidebar .nav-link{
  min-height:38px!important;padding:8px 10px!important;border-radius:13px!important;font-size:13px!important;font-weight:800!important;
  color:#f8f2ff!important;-webkit-text-fill-color:#f8f2ff!important;background:transparent!important;border:1px solid transparent!important;
}
body .sidebar .nav a:hover,
body .sidebar .nav-link:hover{background:rgba(255,255,255,.16)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;}
body .sidebar .nav a.active,
body .sidebar .nav-link.active{
  background:#fff!important;color:#3b0764!important;-webkit-text-fill-color:#3b0764!important;border-color:#fff!important;
  box-shadow:0 10px 18px rgba(0,0,0,.16), inset 4px 0 0 #f59e0b!important;
}
body .sidebar .nav a.active *,body .sidebar .nav-link.active *{color:#3b0764!important;-webkit-text-fill-color:#3b0764!important;}

/* topbar: compact sticky */
body.with-sidebar .app-topbar{
  position:sticky!important;top:10px!important;z-index:20!important;border-radius:20px!important;padding:12px 14px!important;
  background:rgba(255,255,255,.92)!important;backdrop-filter:blur(12px)!important;border:1px solid var(--easy-border)!important;
  box-shadow:0 10px 26px rgba(59,7,100,.08)!important;
}
body.with-sidebar .topbar-title{font-size:16px!important;color:var(--easy-text)!important;}
body.with-sidebar .topbar-kicker{color:var(--easy-purple)!important;font-size:11px!important;font-weight:900!important;}
body.with-sidebar .topbar-chip{background:var(--easy-purple-soft)!important;color:#4c1d95!important;border:1px solid #ded4ee!important;}
body.with-sidebar .theme-toggle{background:#fff!important;color:#4c1d95!important;border:1px solid #ded4ee!important;}

/* command bar */
.backend-command-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0 16px;}
.command-card{display:flex;flex-direction:column;gap:3px;text-decoration:none!important;background:#fff!important;border:1px solid var(--easy-border)!important;border-radius:18px!important;padding:12px 14px!important;box-shadow:0 8px 20px rgba(59,7,100,.055)!important;transition:transform .16s ease,box-shadow .16s ease!important;}
.command-card:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(59,7,100,.10)!important;}
.command-card span{font-size:12px!important;color:var(--easy-muted)!important;font-weight:750!important;}
.command-card strong{font-size:15px!important;color:var(--easy-purple)!important;font-weight:900!important;}

/* content surfaces */
body.with-sidebar .page-head,body.with-sidebar .page-head-unified,body.with-sidebar .card,body.with-sidebar .unified-card,body.with-sidebar .list-card,body.with-sidebar .report-dashboard-card,body.with-sidebar .progress-filter-card{
  background:#fff!important;border:1px solid var(--easy-border)!important;border-radius:22px!important;box-shadow:0 8px 22px rgba(59,7,100,.055)!important;color:var(--easy-text)!important;
}
body.with-sidebar .page-head,body.with-sidebar .page-head-unified{padding:18px 20px!important;}
body.with-sidebar h1{font-size:26px!important;color:var(--easy-text)!important;}
body.with-sidebar h2{font-size:19px!important;color:var(--easy-text)!important;}
body.with-sidebar p,body.with-sidebar .muted,body.with-sidebar small{color:var(--easy-muted)!important;}
body.with-sidebar .page-kicker,body.with-sidebar .section-chip{color:var(--easy-purple)!important;font-weight:900!important;}

/* forms: compact */
body.with-sidebar label{font-size:13px!important;color:#39264f!important;font-weight:850!important;margin-bottom:5px!important;}
body.with-sidebar input,body.with-sidebar select,body.with-sidebar textarea{min-height:40px!important;border-radius:13px!important;border:1px solid #cfc2e7!important;color:#1f1630!important;background:#fff!important;}
body.with-sidebar textarea{min-height:86px!important;}
body.with-sidebar .btn{min-height:38px!important;border-radius:13px!important;font-weight:850!important;padding:8px 12px!important;}
body.with-sidebar .btn-primary,body.with-sidebar button[type="submit"]{background:#5b21b6!important;border-color:#5b21b6!important;color:#fff!important;}
body.with-sidebar .btn-outline{background:#fff!important;border-color:#cfc2e7!important;color:#4c1d95!important;}

/* tables */
body.with-sidebar .table-wrap,body.with-sidebar .report-dashboard-wrap{border:1px solid var(--easy-border)!important;border-radius:18px!important;overflow:auto!important;background:#fff!important;}
body.with-sidebar th{background:#f3ecff!important;color:#2e1065!important;font-weight:900!important;white-space:nowrap!important;}
body.with-sidebar td{color:#30243f!important;}
body.with-sidebar .table td,body.with-sidebar .table th{padding:9px 10px!important;font-size:13px!important;}
.ds-scroll-hint{background:#fbf8ff!important;color:#6a6078!important;border:1px dashed #cfc2e7!important;}

/* mobile */
@media(max-width:1100px){.backend-command-bar{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){
  body.with-sidebar .main-inner{padding:12px!important;}
  .backend-command-bar{display:flex;overflow-x:auto;padding-bottom:4px;gap:8px;margin:10px -2px 14px;}
  .command-card{min-width:142px!important;padding:10px 12px!important;}
  body.with-sidebar .app-topbar{top:6px!important;border-radius:18px!important;}
  body.with-sidebar .topbar-brand-mini{display:none!important;}
  body.with-sidebar .app-topbar-right{gap:6px!important;}
  body.with-sidebar .theme-toggle-text{display:none!important;}
  body .sidebar#appSidebar{width:min(90vw,310px)!important;}
  body.with-sidebar h1{font-size:22px!important;}
  body.with-sidebar .page-head,body.with-sidebar .page-head-unified{padding:15px!important;border-radius:18px!important;}
}