/* =========================================================
   ORINS VIBES — Design Tokens
   ========================================================= */
:root{
  --navy-950: #0a1e38;
  --navy-900: #0f2a4a;
  --blue-800: #163f6e;
  --blue-700: #1b4f8c;
  --blue-600: #2765ab;
  --blue-500: #3d84c9;
  --blue-300: #8bb8e3;
  --orange-500: #f0592b;
  --gold-500: #ffc72c;
  --gray-50: #f6f8fb;
  --gray-100: #eef1f6;
  --gray-200: #e2e7ee;
  --gray-400: #a7b2c2;
  --gray-600: #5c6b80;
  --white: #ffffff;

  --font-display: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(15,42,74,.06), 0 8px 24px -12px rgba(15,42,74,.18);
  --shadow-card-hover: 0 4px 10px rgba(15,42,74,.08), 0 20px 40px -16px rgba(27,79,140,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-padding-top: env(safe-area-inset-top,0px); -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--navy-900);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* =========================================================
   Ambient background orbit field
   ========================================================= */
.orbit-field{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orbit{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(61,132,201,.16), transparent 70%);
  filter: blur(2px);
}
.orbit--1{ width:52vmax; height:52vmax; top:-22vmax; right:-18vmax; background: radial-gradient(circle at 35% 35%, rgba(240,89,43,.10), transparent 65%); }
.orbit--2{ width:60vmax; height:60vmax; bottom:-28vmax; left:-24vmax; background: radial-gradient(circle at 40% 40%, rgba(27,79,140,.14), transparent 65%); }
.orbit--3{ width:34vmax; height:34vmax; top:38%; left:60%; background: radial-gradient(circle, rgba(255,199,44,.10), transparent 70%); }

/* =========================================================
   Splash Screen
   ========================================================= */
.splash{
  position: fixed; inset:0; z-index: 100;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, #ffffff 0%, #f3f7fc 55%, #eaf1fa 100%);
}
.splash__glow{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 38%, rgba(61,132,201,.14), transparent 60%);
}
.splash__content{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding: 0 24px; }
.splash__logo-wrap{ position:relative; width:112px; height:112px; display:flex; align-items:center; justify-content:center; margin-bottom:28px; }
.splash__logo{
  width:74px; height:74px; object-fit:contain; position:relative; z-index:2;
  animation: splashLogoIn 1s var(--ease) both;
}
.splash__ring{
  position:absolute; border-radius:50%; border:1.5px solid rgba(27,79,140,.28);
  animation: splashRing 2.2s var(--ease) infinite;
}
.splash__ring--a{ width:100%; height:100%; }
.splash__ring--b{ width:100%; height:100%; animation-delay:.5s; border-color: rgba(240,89,43,.22); }
@keyframes splashRing{
  0%{ transform:scale(.55); opacity:0; }
  35%{ opacity:.9; }
  100%{ transform:scale(1.35); opacity:0; }
}
@keyframes splashLogoIn{
  0%{ opacity:0; transform: scale(.6) translateY(8px); }
  60%{ opacity:1; }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}
.splash__brand{
  font-family: var(--font-display); font-weight:600; font-size: clamp(16px,4vw,20px);
  letter-spacing:.02em; color: var(--navy-900); margin:0 0 22px;
  animation: fadeUp .7s var(--ease) .25s both;
}
.splash__dash{ color: var(--blue-500); font-weight:400; margin:0 2px; }
.splash__loader{ display:flex; gap:6px; align-items:flex-end; height:18px; margin-bottom:14px; }
.splash__loader span{
  width:5px; border-radius:3px;
  background: linear-gradient(180deg, var(--blue-600), var(--blue-800));
  animation: loaderBar 1.1s ease-in-out infinite;
}
.splash__loader span:nth-child(1){ height:7px;  animation-delay:0s; }
.splash__loader span:nth-child(2){ height:16px; animation-delay:.12s; }
.splash__loader span:nth-child(3){ height:11px; animation-delay:.24s; }
.splash__loader span:nth-child(4){ height:14px; animation-delay:.36s; }
@keyframes loaderBar{
  0%,100%{ transform: scaleY(.45); opacity:.55; }
  50%{ transform: scaleY(1); opacity:1; }
}
.splash__status{
  font-size:13px; color: var(--gray-600); margin:0; letter-spacing:.01em;
  animation: fadeUp .7s var(--ease) .4s both;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.splash.is-leaving{ animation: splashOut .6s var(--ease) forwards; }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; transform: scale(1.02); } }

/* =========================================================
   App shell
   ========================================================= */
.app{ position:relative; z-index:1; opacity:0; min-height:100vh; }
.app.is-visible, .app--visible{ opacity:1; animation: appIn .7s var(--ease) both; }
@keyframes appIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

/* =========================================================
   Dashboard hero
   ========================================================= */
.dashboard{ max-width: 1040px; margin:0 auto; padding: 56px 20px 40px; }
.hero{ text-align:center; margin-bottom:44px; }
.hero__logo{
  width:64px; height:64px; object-fit:contain; margin: 0 auto 18px;
  animation: heroLogoIn .8s var(--ease) .05s both;
}
@keyframes heroLogoIn{ from{opacity:0; transform:translateY(-10px) scale(.85);} to{opacity:1; transform:translateY(0) scale(1);} }
.hero__brand{
  font-family: var(--font-display); font-weight:700; font-size: clamp(24px,5vw,32px);
  color: var(--navy-900); margin:0; letter-spacing:.01em;
}
.hero__sub{
  font-family: var(--font-display); font-weight:800; font-size: clamp(40px,10vw,64px);
  line-height:1; margin: 4px 0 0;
  background: linear-gradient(100deg, var(--blue-700) 10%, var(--blue-500) 45%, var(--orange-500) 78%, var(--gold-500) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__tagline{
  font-size:14px; color: var(--gray-600); margin: 10px 0 0; letter-spacing:.02em;
}

/* =========================================================
   Department cards
   ========================================================= */
.dept-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:16px; margin-bottom:36px;
}
.dept-card{
  position:relative; display:flex; align-items:center; gap:14px;
  background: var(--white); border:1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 20px 18px; overflow:hidden;
  box-shadow: var(--shadow-card);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.dept-card:hover, .dept-card:focus-visible{
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--blue-300);
  outline: none;
}
.dept-card:focus-visible{ outline: 2px solid var(--blue-500); outline-offset:2px; }
.dept-card__accent{
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--blue-600), var(--blue-800));
}
.dept-card[data-dept="purchasing"] .dept-card__accent{ background: linear-gradient(180deg, var(--orange-500), #d94420); }
.dept-card[data-dept="operasional"] .dept-card__accent{ background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); }
.dept-card[data-dept="logistik"] .dept-card__accent{ background: linear-gradient(180deg, var(--orange-500), var(--gold-500)); }
.dept-card[data-dept="marketing"] .dept-card__accent{ background: linear-gradient(180deg, var(--gold-500), var(--orange-500)); }
.dept-card[data-dept="it"] .dept-card__accent{ background: linear-gradient(180deg, var(--navy-900), var(--blue-700)); }
.dept-card[data-dept="ga"] .dept-card__accent{ background: linear-gradient(180deg, var(--gray-600), var(--navy-900)); }

.dept-card__icon{
  flex:none; width:46px; height:46px; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, var(--gray-50), var(--gray-100));
  color: var(--blue-700);
}
.dept-card__icon svg{ width:22px; height:22px; }
.dept-card__body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.dept-card__title{ font-family: var(--font-display); font-weight:600; font-size:15.5px; color: var(--navy-900); }
.dept-card__desc{ font-size:12.5px; color: var(--gray-600); line-height:1.4; }
.dept-card__arrow{ flex:none; color: var(--gray-400); font-size:16px; transition: transform .25s var(--ease), color .25s var(--ease); }
.dept-card:hover .dept-card__arrow{ transform: translateX(3px); color: var(--blue-600); }

/* =========================================================
   Quick links (SOP / Ticketing)
   ========================================================= */
.quick-links{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-bottom:56px; }
.quick-link{
  display:flex; align-items:center; gap:14px;
  background: var(--navy-900); color: var(--white);
  border-radius: var(--radius-md); padding: 16px 18px;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.quick-link:hover, .quick-link:focus-visible{ transform: translateY(-2px); background: var(--blue-800); outline:none; }
.quick-link:focus-visible{ outline: 2px solid var(--gold-500); outline-offset:2px; }
.quick-link__icon{ flex:none; width:38px; height:38px; border-radius:10px; background: rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.quick-link__icon svg{ width:19px; height:19px; }
.quick-link__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.quick-link__title{ font-family: var(--font-display); font-weight:600; font-size:14px; }
.quick-link__desc{ font-size:11.5px; color: rgba(255,255,255,.66); line-height:1.35; }
.quick-link__arrow{ margin-left:auto; flex:none; color: rgba(255,255,255,.5); }

/* =========================================================
   Footer
   ========================================================= */
.footer{ text-align:center; padding: 8px 0 28px; }
.footer p{ font-size:12px; color: var(--gray-400); margin:0; }

/* =========================================================
   Floating helpdesk
   ========================================================= */
.helpdesk{ position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom,0px)); z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.helpdesk__btn{
  position:relative; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background: linear-gradient(145deg, var(--blue-600), var(--navy-900));
  color: var(--white); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px -8px rgba(15,42,74,.45);
  transition: transform .2s var(--ease);
}
.helpdesk__btn:hover{ transform: scale(1.06); }
.helpdesk__btn svg{ width:24px; height:24px; position:relative; z-index:2; }
.helpdesk__breath{
  position:absolute; inset:-6px; border-radius:50%;
  border: 2px solid rgba(27,79,140,.45);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform: scale(.92); opacity:.55; }
  50%{ transform: scale(1.18); opacity:0; }
}
.helpdesk__panel{
  width: 220px; background: var(--white); border-radius: var(--radius-md);
  padding:16px; box-shadow: 0 16px 40px -12px rgba(15,42,74,.35); border:1px solid var(--gray-200);
  display:flex; flex-direction:column; gap:8px;
  opacity:0; transform: translateY(8px) scale(.98); pointer-events:none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.helpdesk.is-open .helpdesk__panel{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.helpdesk__panel-title{ font-family: var(--font-display); font-weight:600; font-size:14px; margin:0; color: var(--navy-900); }
.helpdesk__panel-desc{ font-size:12px; color: var(--gray-600); margin:0 0 4px; line-height:1.4; }
.helpdesk__action{
  display:block; text-align:center; font-size:12.5px; font-weight:600; padding:9px 10px; border-radius:9px;
  background: var(--blue-700); color: var(--white); transition: background .2s var(--ease);
}
.helpdesk__action:hover{ background: var(--blue-800); }
.helpdesk__action--ghost{ background: var(--gray-100); color: var(--navy-900); }
.helpdesk__action--ghost:hover{ background: var(--gray-200); }

/* =========================================================
   SOP page
   ========================================================= */
.topbar{
  position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between;
  max-width:1040px; margin:0 auto; padding: 22px 20px 0;
}
.topbar__brand{ display:flex; align-items:center; gap:9px; font-family: var(--font-display); font-weight:600; font-size:14px; color: var(--navy-900); }
.topbar__brand img{ width:26px; height:26px; object-fit:contain; }
.topbar__brand b{ color: var(--blue-600); }
.topbar__back{ font-size:13px; color: var(--gray-600); transition: color .2s; }
.topbar__back:hover{ color: var(--blue-600); }

.sop{ max-width: 760px; margin:0 auto; padding: 34px 20px 40px; position:relative; z-index:1; }
.sop__intro{ margin-bottom:32px; }
.sop__eyebrow{ font-size:12.5px; color: var(--blue-600); font-weight:600; margin:0 0 6px; }
.sop__title{ font-family: var(--font-display); font-weight:700; font-size: clamp(26px,5vw,34px); margin:0 0 10px; color: var(--navy-900); }
.sop__desc{ font-size:14px; color: var(--gray-600); line-height:1.6; max-width:56ch; margin:0; }

.sop-list{ display:flex; flex-direction:column; gap:10px; }
.sop-dept{ background: var(--white); border:1px solid var(--gray-200); border-radius: var(--radius-md); overflow:hidden; }
.sop-dept__head{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  background:none; border:none; cursor:pointer; padding:16px 18px;
}
.sop-dept__name{ font-family: var(--font-display); font-weight:600; font-size:14.5px; color: var(--navy-900); }
.sop-dept__count{ margin-left:auto; font-size:11.5px; color: var(--gray-400); }
.sop-dept__chevron{ flex:none; color: var(--gray-400); transition: transform .25s var(--ease); }
.sop-dept[data-open="true"] .sop-dept__chevron{ transform: rotate(180deg); color: var(--blue-600); }
.sop-dept__body{
  max-height:0; overflow:hidden; transition: max-height .32s var(--ease);
}
.sop-item{
  display:block; font-size:13.5px; color: var(--gray-600); padding:10px 18px 10px 40px;
  border-top:1px solid var(--gray-100); transition: color .2s, background .2s;
  overflow:hidden;
}
.sop-item:hover{ color: var(--blue-700); background: var(--gray-50); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 760px){
  .quick-links{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .dept-grid{ grid-template-columns: 1fr; }
  .dashboard{ padding: 40px 16px 32px; }
  .helpdesk{ right:14px; }
}