/* ============================================================
   MASDORA PREMIUM UI
   Theme A: charcoal / warm white / MASDORA orange
   UI-only layer: no PHP, query, permission or form behavior changes.
   ============================================================ */
:root{
  --masdora-orange:#f97316;
  --masdora-orange-2:#fb923c;
  --masdora-orange-soft:#fff7ed;
  --masdora-orange-line:#fed7aa;
  --masdora-charcoal:#111315;
  --masdora-charcoal-2:#191c20;
  --masdora-charcoal-3:#24282e;
  --masdora-ink:#17191d;
  --masdora-muted:#747b86;
  --masdora-bg:#f6f5f2;
  --masdora-surface:#ffffff;
  --masdora-line:#e8e5df;
  --masdora-success:#059669;
  --masdora-danger:#dc2626;
  --masdora-warning:#d97706;
  --masdora-shadow:0 12px 32px rgba(17,19,21,.07);
  --masdora-shadow-lg:0 22px 55px rgba(17,19,21,.11);
  --masdora-radius:18px;
  --m-bg:var(--masdora-bg);--m-surface:#fff;--m-text:var(--masdora-ink);--m-muted:var(--masdora-muted);
  --m-line:var(--masdora-line);--m-primary:var(--masdora-orange);--m-primary2:var(--masdora-orange-2);
  --m-success:var(--masdora-success);--m-danger:var(--masdora-danger);--m-shadow:var(--masdora-shadow);--m-radius:var(--masdora-radius)
}

html{scroll-behavior:smooth;background:var(--masdora-bg)}
body{
  background:var(--masdora-bg)!important;color:var(--masdora-ink)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 94% 5%,rgba(249,115,22,.075),transparent 26%),radial-gradient(circle at 4% 92%,rgba(17,19,21,.035),transparent 30%);
}
::selection{background:rgba(249,115,22,.2);color:#111315}

/* ===== Shell / sidebar ===== */
.sidebar,.side-menu,.left-sidebar{
  background:linear-gradient(180deg,#101214 0%,#171a1e 58%,#0d0f11 100%)!important;
  border-right:1px solid rgba(255,255,255,.04)!important;box-shadow:16px 0 42px rgba(17,19,21,.13)!important;
}
.sidebar-header{padding:18px 16px!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
.logo-icon{background:linear-gradient(145deg,var(--masdora-orange),#ea580c)!important;color:#fff!important;border-radius:13px!important;box-shadow:0 8px 22px rgba(249,115,22,.28)!important}
.logo-text h2{font-size:17px!important;letter-spacing:.08em!important;font-weight:900!important;color:#fff!important}
.logo-text p{color:#f8b98d!important;opacity:1!important;font-size:10px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase}
.sidebar-toggle{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:10px!important}
.sidebar-toggle:hover{background:rgba(249,115,22,.16)!important;border-color:rgba(249,115,22,.25)!important}
.sidebar-user{margin:12px 10px 6px!important;padding:12px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:15px!important;background:rgba(255,255,255,.035)!important}
.sidebar-user:hover,.sidebar-user.active{background:rgba(249,115,22,.11)!important;border-color:rgba(249,115,22,.22)!important}
.user-avatar{background:linear-gradient(145deg,#fff7ed,#fed7aa)!important;color:#c2410c!important;border:1px solid rgba(249,115,22,.2)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.user-name{font-weight:800!important}.user-role{color:#b8bdc6!important;opacity:1!important}
.sidebar-nav{padding:8px 10px 14px!important}
.nav-item,.sidebar a.nav-item{border-radius:12px!important;margin:3px 0!important;padding:11px 13px!important;color:#c9cdd3!important;border:1px solid transparent!important;position:relative}
.nav-item:hover,.sidebar a.nav-item:hover{background:rgba(255,255,255,.055)!important;color:#fff!important;transform:translateX(2px)}
.nav-item.active,.sidebar a.nav-item.active{background:linear-gradient(90deg,rgba(249,115,22,.22),rgba(249,115,22,.08))!important;color:#fff!important;border-color:rgba(249,115,22,.17)!important;box-shadow:inset 3px 0 0 var(--masdora-orange)!important}
.nav-item.active .nav-icon{color:#fb923c!important}.nav-icon{color:#9ea4ad!important}.nav-item:hover .nav-icon{color:#fb923c!important}
.nav-section-title{color:#737a84!important;opacity:1!important;font-weight:800!important;letter-spacing:.11em!important}
.nav-divider{background:rgba(255,255,255,.065)!important}.admin-pill{background:#ffedd5!important;color:#c2410c!important}
.sidebar-footer{border-top-color:rgba(255,255,255,.07)!important}.logout-btn:hover{background:rgba(220,38,38,.14)!important;color:#fecaca!important}
.sidebar-copyright{color:#7f8792!important;opacity:1!important;border-top-color:rgba(255,255,255,.06)!important}

.main-content{padding:26px 28px!important;max-width:none!important;background:transparent!important}
.main-content>*{max-width:1480px;margin-left:auto;margin-right:auto}

/* ===== Mobile top bar ===== */
.mobile-header{
  background:linear-gradient(135deg,var(--masdora-orange),#ea580c)!important;color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 10px 26px rgba(194,65,12,.24)!important;backdrop-filter:blur(18px)!important;
}
.navbar,.topbar,.header{
  background:rgba(17,19,21,.96)!important;color:#fff!important;border-bottom:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 10px 26px rgba(17,19,21,.18)!important;backdrop-filter:blur(18px)!important;
}
.mobile-header .logo-icon{background:rgba(255,255,255,.20)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:none!important}
.mobile-header .user-avatar{background:rgba(255,255,255,.20)!important;color:#fff!important}
.mobile-header-logo h2{font-weight:900!important;letter-spacing:.05em!important}.mobile-logout{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.16)!important}

/* ===== Universal surfaces ===== */
.card,.stat-card,.panel,.box,.table-container,.form-card,.dashboard-card,.content-card,.section-card,
.km-toolbar,.km-card,.km-table-card,.lp-filter-box,.lp-table-container,.lp-summary-card,.lp-card,
.pf-card,.bd-card,.rc-card,.rep-card,.act-card,.cp-card,.cd-card,.v-card,.s-card,.t-card{
  background:var(--masdora-surface)!important;border:1px solid var(--masdora-line)!important;border-radius:var(--masdora-radius)!important;
  box-shadow:var(--masdora-shadow)!important;
}
.card:hover,.stat-card:hover,.dashboard-card:hover,.km-card:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(17,19,21,.09)!important;transition:.2s ease}

h1,h2,h3,h4{color:var(--masdora-ink);letter-spacing:-.025em}h1{font-weight:900}h2,h3{font-weight:850}
p,.muted,.subtitle,.help-text,.small-text{color:var(--masdora-muted)}

/* ===== Buttons / controls ===== */
button,.btn,.button,input[type=submit],a.btn{border-radius:12px!important;transition:transform .16s ease,box-shadow .16s ease,background .16s ease!important}
.btn-primary,button.primary,.primary,.lp-btn-filter,.btn-login{
  background:linear-gradient(135deg,var(--masdora-orange),#ea580c)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 9px 22px rgba(249,115,22,.22)!important;font-weight:800!important;
}
.btn-primary:hover,button.primary:hover,.primary:hover,.lp-btn-filter:hover,.btn-login:hover{transform:translateY(-1px)!important;box-shadow:0 13px 28px rgba(249,115,22,.28)!important}
.btn-secondary,.secondary{background:#f4f2ee!important;color:#33383f!important;border:1px solid #e4e0d8!important}
.btn-danger,.danger{background:#fff1f2!important;color:#be123c!important;border:1px solid #fecdd3!important}

input,select,textarea,.form-control,.km-minput{
  border:1px solid #dedbd4!important;border-radius:12px!important;background:#fff!important;color:var(--masdora-ink)!important;
  box-shadow:0 1px 0 rgba(17,19,21,.02)!important;
}
input:focus,select:focus,textarea:focus,.form-control:focus,.km-minput:focus{
  border-color:var(--masdora-orange)!important;box-shadow:0 0 0 4px rgba(249,115,22,.11)!important;outline:none!important;
}
label,.form-label{font-weight:750!important;color:#444a52!important}

/* ===== Tables ===== */
table{border-collapse:separate!important;border-spacing:0!important;background:#fff!important;border-color:var(--masdora-line)!important}
th{background:#f8f7f4!important;color:#777f89!important;font-size:10.5px!important;text-transform:uppercase!important;letter-spacing:.075em!important;font-weight:850!important}
th,td{border-color:#efede8!important}tbody tr:hover td{background:#fffaf5!important}
.lp-table-container,.km-table-card{overflow:hidden!important}.lp-table-container table,.km-table-card table{border:0!important;border-radius:0!important}

/* ===== Dashboard / commission surface ===== */
.km-banner{
  background:linear-gradient(135deg,#111315 0%,#22262c 70%,#2e3136 100%)!important;border:1px solid #262a30!important;
  box-shadow:var(--masdora-shadow-lg)!important;border-radius:22px!important;position:relative;overflow:hidden;
}
.km-banner:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-80px;top:-115px;background:radial-gradient(circle,rgba(249,115,22,.35),rgba(249,115,22,0) 68%);pointer-events:none}
.km-banner-icon{background:linear-gradient(145deg,var(--masdora-orange),#ea580c)!important;box-shadow:0 10px 26px rgba(249,115,22,.24)!important}.km-banner h1{color:#fff!important}.km-banner p{color:#d2d5da!important;opacity:1!important}
.km-seg{background:#f1efeb!important;border:1px solid #e8e4dd!important}.km-seg a{color:#737982!important}.km-seg a.on{background:#fff!important;color:#c2410c!important;box-shadow:0 4px 14px rgba(17,19,21,.06)!important}
.km-badge{background:#fff7ed!important;color:#c2410c!important;border:1px solid #fed7aa!important}
.km-nav a{border-color:#e4e0d8!important;color:#444a52!important}.km-nav a:hover{background:var(--masdora-orange)!important;border-color:var(--masdora-orange)!important;color:#fff!important}
.km-note{background:#fff7ed!important;border-color:#fdba74!important;color:#9a3412!important}
.km-card{border-left:1px solid var(--masdora-line)!important;position:relative;overflow:hidden}
.km-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#d6d3d1}.km-card.c999:before{background:#ef4444}.km-card.c916:before{background:var(--masdora-orange)}.km-card.csil:before{background:#78716c}.km-card.crepeat:before{background:#7c3aed}.km-card.cnew:before{background:#0284c7}.km-card.crate:before{background:#d97706}
.km-card.crepeat,.km-card.cnew,.km-card.crate{background:#fff!important}.km-card .t{color:#777f89!important}.km-card .v{color:#17191d!important;font-size:26px!important}.km-card .s{color:#949aa3!important}
.km-total{background:linear-gradient(135deg,#111315,#25292f)!important;border:1px solid #2b3036!important;box-shadow:var(--masdora-shadow-lg)!important;border-radius:20px!important}.km-total .v{color:#fb923c!important}.km-total .formula{background:rgba(249,115,22,.12)!important;border-color:rgba(251,146,60,.35)!important;color:#fed7aa!important}
.km-table-card .head{color:#22262b!important;background:linear-gradient(180deg,#fff,#fbfaf8)!important}
.km-money{color:#c2410c!important}

/* ===== Leaderboard: premium dark/orange, less carnival ===== */
.lb-wrap{background:linear-gradient(160deg,#fff 0%,#fbfaf7 65%,#fff7ed 100%)!important;border:1px solid #e7dfd4!important;box-shadow:var(--masdora-shadow-lg)!important;border-radius:24px!important}
.lb-logo{color:#c2410c!important;font-family:Inter,system-ui,sans-serif!important;letter-spacing:.14em!important}.lb-tagline{color:#8a8178!important}.lb-title{color:#15181c!important;text-shadow:none!important;letter-spacing:.11em!important}.lb-pill{background:linear-gradient(135deg,#111315,#292d33)!important;box-shadow:none!important}
.lb-period-box{background:#17191d!important;border:1px solid #292d33!important}.lb-period-box .k{color:#fb923c!important}
.lb-ava{border-color:#fb923c!important;color:#c2410c!important;box-shadow:0 5px 16px rgba(17,19,21,.11)!important}.lb-pname{background:#17191d!important;color:#fff!important}.lb-pblock.b1{background:linear-gradient(135deg,#f97316,#ea580c)!important}.lb-pblock.b2{background:linear-gradient(135deg,#444a52,#262a30)!important}.lb-pblock.b3{background:linear-gradient(135deg,#9a3412,#7c2d12)!important}.lb-medal.m1{background:linear-gradient(135deg,#fb923c,#ea580c)!important}

/* ===== Lead list ===== */
.lp-page-header,.page-header,.dashboard-header{margin-bottom:20px!important}.lp-page-header h1{font-size:clamp(23px,3vw,34px)!important;font-weight:900!important;color:#17191d!important}
.lp-filter-box{padding:16px!important;background:linear-gradient(180deg,#fff,#fcfbf8)!important}.lp-filter-chip{background:#fff7ed!important;color:#9a3412!important;border:1px solid #fed7aa!important}.lp-active-filter{background:#fffaf5!important;border-color:#fed7aa!important}.lp-btn-filter{border:0!important}
.lp-table-container{box-shadow:var(--masdora-shadow)!important}.lp-table-container thead th{position:sticky;top:0;z-index:2}.lp-table-container tbody tr{transition:background .15s ease}

/* ===== Pills / badges / statuses ===== */
.badge,.status,.tag,[class*="-badge"],[class*="-pill"]{border-radius:999px!important;font-weight:800!important}
.progress,[class*="progress"]{border-radius:999px!important;overflow:hidden}.progress-bar{background:linear-gradient(90deg,var(--masdora-orange),var(--masdora-orange-2))!important}
.alert,.notice{border-radius:14px!important;box-shadow:0 8px 24px rgba(17,19,21,.05)!important}

/* ===== Modal ===== */
.modal-content,.modal-card,[class*="modal-card"],[class*="modal-content"]{border-radius:22px!important;border:1px solid var(--masdora-line)!important;box-shadow:0 28px 80px rgba(17,19,21,.22)!important}
.modal,.modal-overlay,[class*="overlay"]{backdrop-filter:blur(5px)}

/* ===== Login page ===== */
body:has(.login-wrapper){background:#0f1113!important}
body:has(.login-wrapper):before{display:none!important}
body:has(.login-wrapper) .bg-gradient{background:radial-gradient(circle at 18% 20%,rgba(249,115,22,.26),transparent 35%),radial-gradient(circle at 88% 76%,rgba(251,146,60,.13),transparent 36%),linear-gradient(145deg,#0d0f11 0%,#171a1e 55%,#111315 100%)!important}
body:has(.login-wrapper) .orb-1{background:linear-gradient(135deg,#f97316,#ea580c)!important;opacity:.35!important}body:has(.login-wrapper) .orb-2{background:linear-gradient(135deg,#fb923c,#7c2d12)!important;opacity:.22!important}body:has(.login-wrapper) .orb-3{background:linear-gradient(135deg,#ffffff,#f97316)!important;opacity:.10!important}
.login-card{background:rgba(19,21,24,.82)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 30px 90px rgba(0,0,0,.48)!important;border-radius:28px!important}
.login-card .logo-icon-bg{background:linear-gradient(145deg,var(--masdora-orange),#ea580c)!important;animation:none!important;box-shadow:0 14px 34px rgba(249,115,22,.28)!important}.login-card .brand-name{background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important;letter-spacing:.07em!important}.login-card .brand-tagline{color:#fb923c!important;font-weight:750!important;letter-spacing:.18em!important}
.login-card .form-label{color:#c5c9cf!important}.login-card .form-control{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.09)!important;color:#fff!important}.login-card .form-control:focus{border-color:#fb923c!important;box-shadow:0 0 0 4px rgba(249,115,22,.16)!important}.login-card .form-control::placeholder{color:#737982!important}.login-card .divider:before,.login-card .divider:after{background:rgba(255,255,255,.08)!important}.login-card .divider span,.login-card .footer-text{color:#747b86!important}.login-card .version-badge{background:rgba(249,115,22,.11)!important;color:#fdba74!important;border-color:rgba(249,115,22,.18)!important}.login-card .spinner{border-color:rgba(249,115,22,.18)!important;border-top-color:#f97316!important}

/* ===== Mobile navigation premium ===== */
@media(max-width:768px){
  body{background:#f7f6f3!important}.main-content{padding:72px 12px 104px!important}
  .bottom-nav{background:rgba(17,19,21,.97)!important;border-top:1px solid rgba(255,255,255,.07)!important;box-shadow:0 -12px 30px rgba(17,19,21,.18)!important;backdrop-filter:blur(18px)!important}
  .bottom-nav-item{color:#8f969f!important}.bottom-nav-item.active{color:#fb923c!important}.bottom-nav-item.active::before{background:#f97316!important}
  .bottom-nav-item.add-btn,.bottom-nav-item.komisen-fab{background:linear-gradient(145deg,#f97316,#ea580c)!important;border-color:#f7f6f3!important;box-shadow:0 9px 24px rgba(249,115,22,.32)!important}
  .bottom-nav-item.add-btn .bottom-nav-label,.bottom-nav-item.komisen-fab .bottom-nav-label{color:#fff!important}
  .km-banner{padding:20px 18px!important;border-radius:18px!important}.km-banner-icon{width:48px!important;height:48px!important;border-radius:14px!important}.km-cards{gap:10px!important}.km-card{padding:15px!important;border-radius:15px!important}.km-card .v{font-size:21px!important}.km-total{padding:18px!important}.km-total .v{font-size:28px!important}
  .lp-filter-box{padding:12px!important}.lp-table-container{border-radius:15px!important}
}

@media(max-width:430px){
  .main-content{padding-left:10px!important;padding-right:10px!important}.km-cards{grid-template-columns:1fr 1fr!important}.km-card .t{font-size:9.5px!important}.km-card .s{font-size:9.5px!important}.lb-title{font-size:25px!important;letter-spacing:.08em!important}.lb-grid{padding:8px 10px 14px!important}
}