/* Sterina Warehouse AI visual layer. Backend and existing Bootstrap markup remain unchanged. */
:root {
  --sterina-ink: #132238;
  --sterina-muted: #718096;
  --sterina-bg: #f4f7fb;
  --sterina-card: #ffffff;
  --sterina-line: #e7edf5;
  --sterina-navy: #0a1629;
  --sterina-navy-2: #122640;
  --sterina-cyan: #20d3c2;
  --sterina-blue: #3b82f6;
  --sterina-purple: #7c5cff;
  --sterina-shadow: 0 16px 40px rgba(20, 42, 75, .08);
  --sterina-radius: 18px;
}

html,
body {
  min-height: 100%;
}

body,
body[style] {
  background: var(--sterina-bg) !important;
  color: var(--sterina-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px;
  cursor: auto !important;
  user-select: auto !important;
}

#container {
  background: var(--sterina-bg) !important;
}

.header {
  min-height: 72px !important;
  padding: 0 24px !important;
  background: linear-gradient(110deg, var(--sterina-navy), #102c4d 58%, #163b5b) !important;
  border: 0 !important;
  box-shadow: 0 8px 28px rgba(9, 24, 45, .18);
}

.sidebar-toggle-box {
  margin: 14px 16px 0 0 !important;
}

.sidebar-toggle-box .logo {
  display: grid !important;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  background: rgba(255, 255, 255, .09);
  color: #dffdfa;
  font-size: 18px;
}

a.logo,
a.logo:hover,
a.logo:focus {
  display: flex !important;
  align-items: center;
  gap: 12px;
  height: 72px;
  margin: 0 !important;
  color: #fff !important;
  font-size: 18px;
  letter-spacing: -.02em;
  text-transform: none;
}

a.logo span {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 750;
}

a.logo::after {
  content: "WAREHOUSE AI CONTROL";
  align-self: center;
  padding: 5px 9px;
  border: 1px solid rgba(110, 231, 220, .35);
  border-radius: 999px;
  background: rgba(32, 211, 194, .12);
  color: #8ff6eb;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.top-menu .logout,
ul.top-menu > li > .logout {
  margin: 18px 0 0 12px !important;
  padding: 9px 15px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
}

.top-menu .logout:hover {
  background: rgba(32, 211, 194, .22) !important;
  border-color: rgba(143, 246, 235, .5) !important;
}

#sidebar {
  top: 72px;
  bottom: 0;
  width: 250px !important;
  height: calc(100vh - 72px) !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: linear-gradient(180deg, var(--sterina-navy), #0d1f35 72%, #102947) !important;
  box-shadow: 10px 0 28px rgba(11, 30, 54, .12);
}

ul.sidebar-menu {
  margin-top: 22px !important;
  padding: 0 13px !important;
  padding-bottom: 28px !important;
}

#sidebar .centered {
  color: #fff !important;
}

#sidebar h5 {
  margin: 12px 0 4px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 750;
}

#sidebar ul > div[align="center"] {
  color: #7ddfd5 !important;
}

ul.sidebar-menu li {
  margin: 4px 0 !important;
}

ul.sidebar-menu li a,
ul.sidebar-menu li ul.sub li a {
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px 14px !important;
  border-radius: 12px;
  color: #a9b9cc !important;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}

ul.sidebar-menu li a i {
  width: 22px;
  color: #6e8ca8;
  font-size: 15px;
}

ul.sidebar-menu li a:hover,
ul.sidebar-menu li a:focus,
ul.sidebar-menu li a.active {
  background: linear-gradient(100deg, rgba(32, 211, 194, .2), rgba(59, 130, 246, .2)) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--sterina-cyan);
}

ul.sidebar-menu li a:hover i,
ul.sidebar-menu li a:focus i,
ul.sidebar-menu li a.active i {
  color: var(--sterina-cyan) !important;
}

ul.sidebar-menu li ul.sub li {
  background: transparent !important;
}

#main-content {
  margin-left: 250px !important;
}

.wrapper {
  box-sizing: border-box;
  margin-top: 72px !important;
  padding: 28px 30px 36px !important;
}

.page-header {
  margin: 0 0 24px !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  color: var(--sterina-ink) !important;
  font-size: 24px !important;
  font-weight: 800;
  letter-spacing: -.03em;
}

.panel,
.panel-default,
.panel-primary,
.panel-info,
.panel-success,
.panel-danger,
.panel-warning {
  border: 1px solid var(--sterina-line) !important;
  border-radius: var(--sterina-radius) !important;
  background: var(--sterina-card) !important;
  box-shadow: var(--sterina-shadow) !important;
  overflow: hidden;
}

.panel-heading,
.panel-default > .panel-heading {
  min-height: 54px;
  padding: 18px 22px !important;
  border: 0 !important;
  background: #fff !important;
  color: var(--sterina-ink) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
}

.panel-heading[style*="background-color"] {
  background: linear-gradient(110deg, #122b49, #176b78) !important;
  color: #fff !important;
}

.panel-body {
  padding: 22px !important;
  background: #fff !important;
}

.panel-footer {
  border-top: 1px solid var(--sterina-line) !important;
  background: #fbfcfe !important;
  color: var(--sterina-muted) !important;
}

.form-control,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"] {
  min-height: 42px;
  border: 1px solid #dbe4ef !important;
  border-radius: 11px !important;
  background: #fbfdff !important;
  box-shadow: none !important;
  color: var(--sterina-ink) !important;
}

.form-control:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: var(--sterina-cyan) !important;
  box-shadow: 0 0 0 4px rgba(32, 211, 194, .12) !important;
  outline: 0 !important;
}

.btn {
  border: 0 !important;
  border-radius: 11px !important;
  font-weight: 750;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(25, 50, 85, .14);
}

.btn-theme,
.btn-primary {
  background: linear-gradient(110deg, #12b8ad, #287cf0) !important;
  color: #fff !important;
}

table {
  border-color: var(--sterina-line) !important;
}

table thead th {
  background: #f7fafd !important;
  color: #64748b !important;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

table tbody tr:hover {
  background: #f4fbfb !important;
}

.site-footer.bawahnya {
  position: static !important;
  width: auto !important;
  margin: 10px 0 0 250px !important;
  padding: 12px 24px !important;
  background: transparent !important;
  color: #8b9bb0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

@media (max-width: 768px) {
  .header {
    min-height: 62px !important;
    padding: 0 14px !important;
  }

  a.logo,
  a.logo:hover,
  a.logo:focus {
    height: 62px;
  }

  a.logo::after {
    display: none;
  }

  #sidebar {
    top: 62px;
    width: 100% !important;
    height: calc(100vh - 62px) !important;
    max-height: none !important;
  }

  #main-content {
    margin-left: 0 !important;
  }

  .wrapper {
    margin-top: 62px !important;
    padding: 20px 14px 28px !important;
  }

  .site-footer.bawahnya {
    margin-left: 0 !important;
  }
}

/* Modern login shell, reusing the existing form and authentication flow. */
body:has(#login-page) {
  min-height: 100vh;
  background: radial-gradient(circle at 15% 15%, #1c4a66 0, transparent 38%), linear-gradient(135deg, #071525, #113653) !important;
}

body:has(#login-page) .lg_kanan_logo {
  position: absolute !important;
  top: 34px !important;
  left: 42px !important;
  bottom: auto !important;
  width: 170px !important;
  opacity: .96;
}

body:has(#login-page) table.lg_kanan {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: min(430px, calc(100vw - 32px)) !important;
  margin: 12vh auto 0 !important;
}

body:has(#login-page) #login-page {
  padding: 34px !important;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
}

body:has(#login-page) .form-login-heading {
  margin: 0 0 20px !important;
  color: var(--sterina-ink) !important;
  font-size: 22px !important;
  letter-spacing: -.03em;
}

body:has(#login-page) .bawahnya {
  position: static !important;
  margin-top: 18px;
  padding: 12px;
  background: transparent !important;
  color: rgba(255, 255, 255, .7) !important;
  font-size: 12px;
}

@media (max-width: 600px) {
  body:has(#login-page) .lg_kanan_logo {
    top: 18px !important;
    left: 50% !important;
    width: 130px !important;
    transform: translateX(-50%);
  }

  body:has(#login-page) table.lg_kanan {
    margin-top: 18vh !important;
  }
}

/* Warehouse process map */
.sterina-flow-row { margin-bottom: 24px; }
.sterina-flow-card {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(110, 143, 177, .18);
  border-radius: 22px;
  background: radial-gradient(circle at 92% 0%, rgba(32, 211, 194, .16), transparent 30%), linear-gradient(135deg, #0b1b31, #102d4c 68%, #124c5a);
  box-shadow: 0 20px 46px rgba(11, 35, 61, .18);
  color: #fff;
}
.sterina-flow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; margin-bottom: 28px; }
.sterina-flow-eyebrow { color: #8ff6eb; font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.sterina-flow-head h2 { margin: 9px 0 7px; color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.sterina-flow-head p { max-width: 620px; margin: 0; color: #aac0d4; font-size: 13px; }
.sterina-flow-next { min-width: 250px; max-width: 320px; padding: 15px 17px; border: 1px solid rgba(143, 246, 235, .25); border-radius: 15px; background: rgba(3, 16, 31, .28); }
.sterina-flow-next span, .sterina-flow-next strong, .sterina-flow-next small { display: block; }
.sterina-flow-next span { color: #80eade; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.sterina-flow-next strong { margin: 5px 0; color: #fff; font-size: 16px; }
.sterina-flow-next small { color: #b7cadb; font-size: 11px; line-height: 1.45; }
.sterina-flow-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sterina-flow-step { position: relative; display: flex; gap: 12px; min-height: 134px; padding: 17px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .055); }
.sterina-flow-step:not(:last-child)::after { position: absolute; top: 34px; right: -18px; z-index: 2; color: #79cfc9; content: "›"; font-size: 28px; font-weight: 300; }
.sterina-step-icon { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #9ab4c9; }
.sterina-step-copy { min-width: 0; }
.sterina-step-copy span, .sterina-step-copy strong, .sterina-step-copy small, .sterina-step-copy b { display: block; }
.sterina-step-copy span { color: #8ea6bc; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.sterina-step-copy strong { margin: 7px 0 6px; color: #fff; font-size: 13px; line-height: 1.25; }
.sterina-step-copy small { min-height: 30px; color: #adc0d0; font-size: 11px; line-height: 1.45; }
.sterina-step-copy b { margin-top: 8px; color: #aebfd0; font-size: 9px; letter-spacing: .08em; }
.sterina-flow-step.is-complete { border-color: rgba(32, 211, 194, .4); background: linear-gradient(145deg, rgba(32, 211, 194, .15), rgba(255, 255, 255, .05)); }
.sterina-flow-step.is-complete .sterina-step-icon { background: #20b9ab; color: #052c32; }
.sterina-flow-step.is-complete .sterina-step-copy b { color: #7df1e5; }
.sterina-flow-step.is-active { border-color: rgba(116, 154, 255, .55); background: linear-gradient(145deg, rgba(74, 125, 255, .2), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px rgba(126, 160, 255, .08); }
.sterina-flow-step.is-active .sterina-step-icon { background: #527ff1; color: #fff; }
.sterina-flow-step.is-active .sterina-step-copy b { color: #a9c0ff; }
.sterina-flow-step.is-next { border-color: rgba(255, 205, 91, .3); }
.sterina-flow-step.is-next .sterina-step-icon { background: rgba(255, 204, 91, .16); color: #ffd56a; }
.sterina-flow-step.is-next .sterina-step-copy b { color: #ffd56a; }
.sterina-flow-step.is-muted { opacity: .72; }
.sterina-flow-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .1); color: #96afc4; font-size: 11px; }
.sterina-flow-foot i { color: #7ee8de; }
@media (max-width: 1000px) {
  .sterina-flow-head { display: block; }
  .sterina-flow-next { max-width: none; margin-top: 18px; }
  .sterina-flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sterina-flow-step:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
  .sterina-flow-card { padding: 18px; border-radius: 18px; }
  .sterina-flow-head h2 { font-size: 21px; }
  .sterina-flow-track { grid-template-columns: 1fr; }
  .sterina-flow-step:not(:last-child)::after { top: auto; right: 50%; bottom: -20px; transform: rotate(90deg); }
  .sterina-flow-foot { display: block; }
  .sterina-flow-foot span { display: block; margin-top: 6px; }
}