/* Takvin TPM v5.3.1 unified design system */
:root {
  --tpm-navy:#123b4d; --tpm-blue:#4f829f; --tpm-blue-soft:#eaf5f9;
  --tpm-green:#2d9f3c; --tpm-green-dark:#1f7e2c; --tpm-gold:#c98c16;
  --tpm-ink:#18394a; --tpm-muted:#667f8d; --tpm-line:#d9e7ed;
  --tpm-bg:#f4f8fa; --tpm-surface:#ffffff; --tpm-danger:#b33a3a;
  --tpm-radius:18px; --tpm-shadow:0 12px 32px rgba(18,59,77,.09);
}
html{direction:rtl;scroll-behavior:smooth} body{background:linear-gradient(145deg,#f9fcfd 0%,#f1f8fa 48%,#edf6f8 100%)!important;color:var(--tpm-ink)!important;min-height:100vh}
body,button,input,select,textarea{font-family:inherit} *{box-sizing:border-box}
main,.page,.content,.app-content,[role="main"]{max-width:1480px;margin-inline:auto}
.card,.panel,.box,.widget,.section,.content-card,[class*="card"]{border-color:var(--tpm-line)!important;border-radius:var(--tpm-radius)!important;box-shadow:0 8px 24px rgba(18,59,77,.055);background:rgba(255,255,255,.96)}
button,.btn,[role="button"],a.button{min-height:42px;border-radius:13px!important;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
button:hover,.btn:hover,[role="button"]:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(18,59,77,.13)}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(79,130,159,.25)!important;outline-offset:2px}
.btn-primary,.primary,button[type="submit"],[data-primary="true"]{background:linear-gradient(135deg,var(--tpm-green),var(--tpm-green-dark))!important;color:#fff!important;border-color:transparent!important}
input,select,textarea{border:1px solid var(--tpm-line)!important;border-radius:12px!important;background:#fff!important;min-height:44px;padding-inline:12px;color:var(--tpm-ink)}
table{border-collapse:separate!important;border-spacing:0;width:100%;overflow:hidden;border:1px solid var(--tpm-line);border-radius:14px;background:#fff} th{background:var(--tpm-blue-soft);color:var(--tpm-navy);font-weight:800} th,td{padding:12px 14px;border-bottom:1px solid #e8f0f3;text-align:right}
.tpm-release-badge{position:fixed;left:16px;bottom:14px;z-index:8000;padding:6px 10px;border-radius:999px;background:rgba(18,59,77,.9);color:#fff;font-size:11px;box-shadow:var(--tpm-shadow)}
.tpm-back-button{display:inline-flex;align-items:center;gap:8px;border:1px solid #bcd3dd!important;background:#fff!important;color:var(--tpm-navy)!important;padding:8px 14px!important;margin:8px;z-index:1000}
.tpm-back-button svg{width:18px;height:18px}
.tpm-role-link{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-width:120px;padding:10px 16px!important;border:1px solid #a9c8d5!important;background:linear-gradient(180deg,#fff,#f4fafc)!important;color:var(--tpm-navy)!important;box-shadow:0 5px 14px rgba(18,59,77,.08);cursor:pointer;position:relative}
.tpm-role-link:hover{border-color:var(--tpm-blue)!important;background:var(--tpm-blue-soft)!important}
.tpm-guide{margin:22px 0;padding:22px;border:1px solid var(--tpm-line);border-radius:22px;background:linear-gradient(145deg,#fff 0%,#f3fbfd 100%);box-shadow:var(--tpm-shadow)}
.tpm-guide__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.tpm-guide__title{margin:0;color:var(--tpm-navy);font-size:1.2rem}.tpm-guide__role{padding:6px 10px;border-radius:999px;background:#fff4dc;color:#80580a;font-weight:800;font-size:.85rem}
.tpm-guide__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;list-style:none;padding:0;margin:0;counter-reset:tpmstep}.tpm-guide__steps li{counter-increment:tpmstep;position:relative;padding:16px 48px 16px 14px;border:1px solid #d6e8ee;border-radius:15px;background:#fff;min-height:92px}.tpm-guide__steps li::before{content:counter(tpmstep);position:absolute;right:13px;top:14px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--tpm-blue);color:#fff;font-weight:900}.tpm-guide__steps strong{display:block;color:var(--tpm-navy);margin-bottom:5px}.tpm-guide__steps span{color:var(--tpm-muted);font-size:.88rem;line-height:1.75}
.tpm-guide__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.tpm-guide__actions button{background:#fff!important;color:var(--tpm-navy)!important;border:1px solid #b9d3de!important}
.tpm-assistant-path{display:flex;align-items:center;gap:8px;overflow:auto;padding:12px 2px}.tpm-assistant-path__step{min-width:150px;padding:10px 13px;border-radius:13px;border:1px solid var(--tpm-line);background:#fff;color:var(--tpm-muted)}.tpm-assistant-path__step.is-active{background:var(--tpm-blue-soft);border-color:var(--tpm-blue);color:var(--tpm-navy);font-weight:800}
.tpm-quicknav-toggle{position:fixed;right:18px;bottom:18px;z-index:8500;border:0!important;background:linear-gradient(135deg,var(--tpm-navy),var(--tpm-blue))!important;color:#fff!important;padding:11px 16px!important;box-shadow:var(--tpm-shadow)}
.tpm-quicknav{position:fixed;inset:0 0 0 auto;width:min(420px,92vw);z-index:9000;background:#f7fbfc;border-left:1px solid var(--tpm-line);box-shadow:-20px 0 55px rgba(18,59,77,.17);padding:22px;overflow:auto;transform:translateX(105%);transition:transform .22s ease}.tpm-quicknav.is-open{transform:translateX(0)}.tpm-quicknav__head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#f7fbfc;padding-bottom:12px;z-index:2}.tpm-quicknav h2{margin:0;color:var(--tpm-navy)}.tpm-quicknav__group{margin:16px 0}.tpm-quicknav__group h3{font-size:.95rem;color:var(--tpm-blue);margin:0 0 8px}.tpm-quicknav__items{display:grid;gap:8px}.tpm-quicknav__items button{width:100%;text-align:right;background:#fff!important;color:var(--tpm-navy)!important;border:1px solid var(--tpm-line)!important;padding:10px 12px!important}
.tpm-management-shell{padding:20px;border:1px solid var(--tpm-line);border-radius:20px;background:#fff;box-shadow:var(--tpm-shadow);margin-top:16px}.tpm-management-shell__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--tpm-line);padding-bottom:15px}.tpm-management-shell h2{margin:0;color:var(--tpm-navy)}.tpm-empty{padding:45px 18px;text-align:center;color:var(--tpm-muted);border:1px dashed #bed5df;border-radius:16px;margin-top:16px;background:#f9fcfd}
.tpm-login-options{display:grid;gap:9px;margin:12px 0;text-align:right}.tpm-login-options label{display:flex;align-items:center;gap:8px;color:var(--tpm-ink);font-size:.92rem}.tpm-login-options input{min-height:auto;width:18px;height:18px}.tpm-login-note{font-size:.78rem;color:var(--tpm-muted);line-height:1.65}
.tpm-toast{position:fixed;left:20px;top:20px;z-index:10000;max-width:420px;padding:13px 16px;border-radius:14px;background:var(--tpm-navy);color:#fff;box-shadow:var(--tpm-shadow);animation:tpmIn .2s ease}.tpm-toast.is-error{background:var(--tpm-danger)}@keyframes tpmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.tpm-form-field{display:grid;gap:6px;margin:10px 0}.tpm-form-field label{font-weight:800;color:var(--tpm-navy)}.tpm-required::after{content:" *";color:var(--tpm-danger)}
.tpm-governance{display:grid;gap:16px}.tpm-governance__row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;align-items:end;padding:13px;border:1px solid var(--tpm-line);border-radius:14px;background:#fbfdfe}
@media(max-width:760px){.tpm-governance__row{grid-template-columns:1fr}.tpm-guide{padding:16px}.tpm-guide__steps{grid-template-columns:1fr}.tpm-release-badge{display:none}.tpm-quicknav-toggle{right:10px;bottom:10px}.tpm-back-button{margin:4px}.tpm-role-link{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* v5.3.1 navigation and visual guidance */
#appBackButton {
  display: none !important;
  /* hidden in v5.3.1; browser history navigation is used instead */
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 40px;
  padding: .45rem .85rem;
  border: 1px solid rgba(79,130,159,.28);
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  color: #123b4d;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#appBackButton:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(79,130,159,.5);
  box-shadow: 0 8px 20px rgba(18,59,77,.1);
}
#appBackButton:disabled { opacity: .45; cursor: default; }

.role-path-button.tpm-role-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  min-height: 46px;
  padding: .65rem .95rem;
  border: 1px solid rgba(79,130,159,.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,250,252,.98));
  color: #123b4d;
  font-weight: 750;
  box-shadow: 0 6px 18px rgba(18,59,77,.06);
  cursor: pointer;
}
.role-path-button.tpm-role-link:hover {
  border-color: rgba(45,159,60,.48);
  box-shadow: 0 10px 24px rgba(18,59,77,.10);
}
.tpm-role-link__arrow { color: #2d9f3c; font-size: 1.12rem; }

.tpm-visual-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}
.tpm-visual-guide__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 58px;
  padding: .7rem;
  border: 1px solid rgba(79,130,159,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.tpm-visual-guide__step:not(:last-child)::after {
  content: '←';
  position: absolute;
  left: -.52rem;
  top: 50%;
  transform: translateY(-50%);
  color: #4f829f;
  font-weight: 900;
  z-index: 2;
}
.tpm-visual-guide__number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(45,159,60,.12);
  color: #2d9f3c;
  font-weight: 900;
}
.tpm-visual-guide__label { color: #123b4d; font-size: .88rem; line-height: 1.6; }

.team-manager-row,
.warehouse-manager-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr);
  gap: .75rem;
  align-items: end;
  padding: .85rem;
  margin-top: .65rem;
  border: 1px solid rgba(79,130,159,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.8);
}

@media (max-width: 900px) {
  .tpm-visual-guide { grid-template-columns: 1fr 1fr; }
  .tpm-visual-guide__step::after { display: none; }
  .team-manager-row, .warehouse-manager-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tpm-visual-guide { grid-template-columns: 1fr; }
}