/* TPDMS Enterprise Reference UI v4
   Presentation layer only. Existing routes, RBAC, SQL and workflows remain authoritative. */
:root{
  --tpdms-navy:#071a2b;
  --tpdms-navy-2:#0b263d;
  --tpdms-blue:#0a6ed1;
  --tpdms-blue-2:#0870d8;
  --tpdms-blue-soft:#eaf4ff;
  --tpdms-bg:#f4f7fa;
  --tpdms-surface:#ffffff;
  --tpdms-border:#dfe5ec;
  --tpdms-text:#17212b;
  --tpdms-muted:#667085;
  --tpdms-success:#0f8a5f;
  --tpdms-warning:#d97706;
  --tpdms-danger:#c62828;
  --tpdms-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.035);
  --tpdms-radius:8px;
}

/* ===== Main ERP shell ===== */
.app .sidebar,
.erp-legacy-sidebar{
  background:linear-gradient(180deg,var(--tpdms-navy) 0%,#081f34 100%) !important;
  border-right:1px solid #163750 !important;
  color:#dbe8f3 !important;
  box-shadow:2px 0 10px rgba(0,0,0,.08) !important;
}
.app .sidebar::before{background:var(--tpdms-blue-2)!important;height:3px!important}
.sidebar-brand,
.erp-legacy-brand{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.08)!important;color:#fff!important}
.sidebar-brand-mark,
.erp-legacy-brand-mark{background:var(--tpdms-blue)!important;color:#fff!important}
.sidebar-brand-name{color:#fff!important;font-size:15px!important}
.sidebar-brand-subtitle{color:#91a8ba!important}
.menu-root{scrollbar-color:#35536b transparent!important}
.menu-group{color:#7893a8!important}
.menu-link{color:#d3e0eb!important}
.menu-link:hover{background:rgba(255,255,255,.065)!important;color:#fff!important}
.menu-link.active{background:rgba(10,110,209,.22)!important;color:#fff!important;box-shadow:inset 3px 0 var(--tpdms-blue-2)!important}
.menu-link.active .menu-icon i{color:#6db7ff!important}
.menu-icon{color:#9db3c3!important}
.menu-link.parent .menu-arrow{color:#7893a8!important}
.submenu{border-left-color:#24445d!important}
.menu-sublink{color:#b7c8d6!important}
.menu-sublink:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
.menu-sublink.active{background:rgba(10,110,209,.18)!important;color:#fff!important}
.menu-sublink .menu-icon i{color:#7893a8!important}
.menu-sublink.active .menu-icon i{color:#6db7ff!important}
.menu-badge{background:#173650!important;border-color:#2a4b63!important;color:#d8e6f0!important}
.menu-sublink.active .menu-badge{background:#155b91!important;border-color:#2674ad!important;color:#fff!important}
.logout{border-top-color:rgba(255,255,255,.09)!important}

.topbar,
.erp-legacy-header{
  background:#fff!important;
  border-bottom:1px solid var(--tpdms-border)!important;
  box-shadow:0 1px 3px rgba(16,24,40,.045)!important;
}
.shell-button,.erp-legacy-toggle{color:#526173!important}
.shell-button:hover,.erp-legacy-toggle:hover{background:#f1f5f9!important;color:var(--tpdms-blue)!important}
.topbar-search{background:#f7f9fb!important;border:1px solid #d9e1e8!important;border-radius:7px!important}
.topbar-search input{color:#1f2937!important}
.topbar-search:focus-within{background:#fff!important;border-color:#8ebce3!important;box-shadow:0 0 0 3px rgba(10,110,209,.09)!important}
.breadcrumb .current{font-weight:650!important;color:#344054!important}
.user-trigger{border:1px solid transparent!important}
.user-trigger:hover{background:#f5f8fb!important}
.user-avatar,.erp-legacy-avatar{background:var(--tpdms-blue)!important;color:#fff!important}
.user-name{color:#1d2939!important}.user-role{color:#667085!important}
.user-menu{border:1px solid var(--tpdms-border)!important;box-shadow:0 16px 40px rgba(16,24,40,.14)!important;border-radius:9px!important}

.content,.erp-legacy-main{background:var(--tpdms-bg)!important}
.content{padding:22px 24px 32px!important}

/* ===== Page typography / surfaces ===== */
h1,h2,h3,h4,h5{color:var(--tpdms-text)}
h1{font-size:24px!important;font-weight:700!important;letter-spacing:-.3px}
h2{font-size:20px!important;font-weight:700!important}
h3{font-size:16px!important;font-weight:650!important}
.card,.card-wrap,.panel,.erp-card,.table-card,.kpi,.stat-card,.summary-card,.box,.section-card{
  background:var(--tpdms-surface)!important;
  border:1px solid var(--tpdms-border)!important;
  border-radius:var(--tpdms-radius)!important;
  box-shadow:var(--tpdms-shadow)!important;
}
.card-header,.panel-header,.section-header{background:#fff!important;border-bottom:1px solid var(--tpdms-border)!important}

/* ===== Forms / buttons ===== */
.btn{border-radius:7px!important;font-weight:650!important;min-height:36px}
.btn-primary,.button-primary,.primary-btn{background:var(--tpdms-blue)!important;border-color:var(--tpdms-blue)!important;color:#fff!important}
.btn-primary:hover,.button-primary:hover,.primary-btn:hover{background:#085cae!important;border-color:#085cae!important}
.btn-outline-primary{color:var(--tpdms-blue)!important;border-color:#a9cbe9!important;background:#fff!important}
.btn-outline-primary:hover{background:var(--tpdms-blue-soft)!important}
.form-control,.form-select,.form-input,.form-control-sm,select,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],textarea{
  border:1px solid #cfd8e3!important;border-radius:7px!important;background:#fff!important;color:#1f2937!important;
}
.form-control:focus,.form-select:focus,.form-input:focus,select:focus,input:focus,textarea:focus{
  border-color:#7db3df!important;box-shadow:0 0 0 3px rgba(10,110,209,.10)!important;outline:none!important;
}

/* ===== Tables ===== */
table{border-collapse:separate!important;border-spacing:0!important;background:#fff!important;border:1px solid var(--tpdms-border)!important;border-radius:8px!important;overflow:hidden!important}
thead th{background:#f7f9fb!important;color:#475467!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.045em!important;font-weight:750!important;border-bottom:1px solid var(--tpdms-border)!important}
tbody td{border-bottom:1px solid #edf1f5!important;color:#344054!important}
tbody tr:hover{background:#f8fbff!important}
tbody tr:last-child td{border-bottom:0!important}
.badge,.status-badge,.status{border-radius:999px!important;font-weight:700!important}

/* ===== KPI / status semantics ===== */
.kpi-value,.stat-value{font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.status-loaded,.status-success,.badge-success{background:#e8f7f0!important;color:#087443!important}
.status-pending,.badge-warning{background:#fff4df!important;color:#9a5b00!important}
.status-danger,.status-cancelled,.badge-danger{background:#fdecec!important;color:#a61b1b!important}
.status-info,.badge-info{background:#eaf4ff!important;color:#075ea8!important}

/* ===== Legacy pages that use topbar.php ===== */
.erp-legacy-header{height:62px!important}
.erp-legacy-sidebar{top:62px!important;width:264px!important}
.erp-legacy-main{margin-left:264px!important;padding-top:62px!important;min-height:100vh!important}
.erp-legacy-brand{min-width:270px!important}
.erp-legacy-brand-mark{width:32px!important;height:32px!important;border-radius:7px!important}
.erp-legacy-brand small{color:#7c8a98!important}
body.erp-legacy-collapsed .erp-legacy-main{margin-left:0!important}
body.erp-legacy-collapsed .erp-legacy-sidebar{transform:translateX(-100%)!important}

/* ===== Login: match reference illustration ===== */
body.erp-login{
  min-height:100vh!important;padding:0!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;
  background:#071a2b!important;overflow:auto!important;
}
.erp-login::before{display:none!important}
.erp-login .login-wrapper{
  width:100%!important;min-height:100vh!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)!important;overflow:hidden!important;background:#fff!important;
}
.erp-login .hero-side{
  min-height:100vh!important;padding:56px 64px!important;position:relative!important;overflow:hidden!important;
  background:linear-gradient(90deg,rgba(4,24,39,.80),rgba(4,24,39,.42)),url('../tanker.jpg') center/cover no-repeat!important;
  color:#fff!important;
}
.erp-login .hero-side::after{display:none!important}
.erp-login .hero-side::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;right:auto!important;bottom:auto!important;border-radius:0!important;background:linear-gradient(180deg,rgba(3,19,31,.10),rgba(3,19,31,.55))!important;z-index:-1!important}
.erp-login .hero-side .brand .logo{background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.30)!important}
.erp-login .hero-side .brand .name{font-size:20px!important;font-weight:700!important}
.erp-login .hero-side .hero-content{max-width:500px!important;margin-top:auto!important;margin-bottom:auto!important}
.erp-login .hero-side .hero-content h1{font-size:clamp(38px,4.2vw,64px)!important;line-height:1.04!important;letter-spacing:-1.8px!important}
.erp-login .hero-side .hero-content p{max-width:470px!important;font-size:15px!important;color:rgba(255,255,255,.86)!important}
.erp-login .hero-side .feature-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important;margin-top:32px!important}
.erp-login .hero-side .feature-grid .feature{padding:13px!important;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.07)!important;border-radius:8px!important}
.erp-login .hero-side .feature-grid .feature i{color:#8dccff!important}
.erp-login .form-side{padding:64px min(7vw,88px)!important;justify-content:center!important}
.erp-login .form-side .form-header h2{font-size:30px!important}
.erp-login .submit-btn{background:var(--tpdms-blue)!important;border-radius:7px!important;min-height:46px!important}
.erp-login .form-input{min-height:46px!important}
@media(max-width:900px){
  .erp-login .login-wrapper{grid-template-columns:1fr!important}
  .erp-login .hero-side{display:none!important}
  .erp-login .form-side{min-height:100vh!important;padding:36px 26px!important}
}

/* ===== Responsive ===== */
@media(max-width:991px){
  .content{padding:16px!important}
  .erp-legacy-sidebar{transform:translateX(-100%);transition:transform .18s ease}
  .erp-legacy-sidebar.open{transform:translateX(0)!important}
  .erp-legacy-main{margin-left:0!important}
}
@media(max-width:640px){
  .content{padding:12px!important}
  h1{font-size:20px!important}
  .hide-small{display:none!important}
  .erp-legacy-brand{min-width:0!important}
  .erp-legacy-brand span:not(.erp-legacy-brand-mark){display:none}
  .erp-legacy-user .erp-user-copy{display:none}
}