/* BioFlow PLM custom styles (Tailwind handles most layout) */
:root { --g1:#0d9488; --g2:#2563eb; --g3:#7c3aed; }
html { -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; }
::selection { background:#99f6e4; }

/* ---------- Loader ---------- */
.loader-ring { width:46px; height:46px; border-radius:50%; border:4px solid #ccfbf1; border-top-color:#0d9488; animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Top bar animation ---------- */
.topbar {
  background: linear-gradient(110deg, #0f766e, #0d9488, #2563eb, #7c3aed, #0f766e);
  background-size: 300% 100%;
  animation: gradShift 14s ease infinite, slideDown .6s cubic-bezier(.2,.8,.2,1) both;
  position: relative; overflow: hidden;
}
.topbar::after {
  content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: shimmer 6s ease-in-out infinite;
  pointer-events:none;
}
.topbar .tb-item { animation: fadeUp .6s ease both; }
.topbar .tb-item:nth-child(2) { animation-delay:.1s } .topbar .tb-item:nth-child(3) { animation-delay:.2s }
.topbar .tb-item:nth-child(4) { animation-delay:.3s } .topbar .tb-item:nth-child(5) { animation-delay:.4s }
@keyframes gradShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes shimmer { 0%{left:-40%} 60%,100%{left:120%} }
@keyframes slideDown { from{transform:translateY(-100%);opacity:0} to{transform:none;opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.live-dot { width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)} 70%{box-shadow:0 0 0 8px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} }
.logo-spin { animation: logoBob 4s ease-in-out infinite; }
@keyframes logoBob { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-2px) rotate(-6deg)} }

/* ---------- Menu bar ---------- */
.menubar { box-shadow: 0 1px 0 #e2e8f0, 0 4px 14px -8px rgba(15,23,42,.15); }
.menu-link { position:relative; display:flex; align-items:center; gap:.45rem; padding:.85rem .9rem; font-size:.875rem; font-weight:500; color:#334155; white-space:nowrap; transition:color .2s; }
.menu-link:hover { color:#0d9488; }
.menu-link::after { content:""; position:absolute; left:.9rem; right:.9rem; bottom:0; height:3px; border-radius:3px 3px 0 0; background:linear-gradient(90deg,var(--g1),var(--g3)); transform:scaleX(0); transition:transform .25s; }
.menu-link:hover::after, .menu-link.active::after { transform:scaleX(1); }
.menu-link.active { color:#0f766e; font-weight:600; }
.dropdown { position:absolute; top:100%; left:0; min-width:220px; background:#fff; border-radius:12px; box-shadow:0 12px 40px -8px rgba(15,23,42,.25); border:1px solid #e2e8f0; padding:6px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s; z-index:40; }
.has-dd:hover .dropdown, .has-dd.open .dropdown { opacity:1; visibility:visible; transform:none; }
.dd-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-radius:8px; font-size:.86rem; color:#334155; }
.dd-item:hover { background:#f0fdfa; color:#0f766e; }
.dd-item.active { background:#ccfbf1; color:#115e59; font-weight:600; }
@media (max-width: 1023px) {
  .mobile-menu { max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .mobile-menu.show { max-height:85vh; overflow:auto; }
}

/* ---------- Cards / inputs ---------- */
.card { background:#fff; border-radius:16px; border:1px solid #e2e8f0; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.inp { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:.6rem .8rem; font-size:.9rem; background:#fff; outline:none; transition:border .15s, box-shadow .15s; }
.inp:focus { border-color:#14b8a6; box-shadow:0 0 0 3px rgba(20,184,166,.18); }
.inp:disabled { background:#f1f5f9; }
.lbl { display:block; font-size:.78rem; font-weight:600; color:#475569; margin-bottom:.3rem; }
.lbl .req { color:#e11d48; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.58rem 1rem; border-radius:10px; font-size:.875rem; font-weight:600; transition:all .15s; cursor:pointer; white-space:nowrap; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary { color:#fff; background:linear-gradient(90deg,#0d9488,#0f766e); box-shadow:0 4px 14px -4px rgba(13,148,136,.6); }
.btn-primary:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
.btn-light { background:#fff; border:1px solid #cbd5e1; color:#334155; }
.btn-light:hover { background:#f8fafc; border-color:#94a3b8; }
.btn-danger { background:#fff1f2; color:#be123c; border:1px solid #fecdd3; }
.btn-danger:hover { background:#ffe4e6; }
.btn-sm { padding:.35rem .6rem; font-size:.78rem; border-radius:8px; }
.icon-btn { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:#475569; transition:all .15s; }
.icon-btn:hover { background:#f1f5f9; color:#0f766e; }
.icon-btn.del:hover { background:#fff1f2; color:#be123c; }
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; white-space:nowrap; }

/* ---------- Tables ---------- */
.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:.85rem; }
.tbl th { text-align:left; font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:#64748b; background:#f8fafc; padding:.7rem .8rem; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
.tbl td { padding:.7rem .8rem; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.tbl tbody tr { transition:background .15s; }
.tbl tbody tr:hover { background:#f8fafc; }
@media (max-width: 767px) {
  .tbl-resp thead { display:none; }
  .tbl-resp, .tbl-resp tbody, .tbl-resp tr, .tbl-resp td { display:block; width:100%; }
  .tbl-resp tr { border:1px solid #e2e8f0; border-radius:12px; margin-bottom:10px; padding:6px 4px; background:#fff; }
  .tbl-resp td { border:none; padding:.35rem .7rem; display:flex; gap:.6rem; }
  .tbl-resp td::before { content:attr(data-l); flex:0 0 38%; font-size:.72rem; font-weight:600; color:#64748b; text-transform:uppercase; }
  .tbl-resp td.td-actions::before { content:""; flex:0 0 0; }
}

/* ---------- Rich text editor ---------- */
.rte { border:1px solid #cbd5e1; border-radius:12px; background:#fff; overflow:hidden; }
.rte:focus-within { border-color:#14b8a6; box-shadow:0 0 0 3px rgba(20,184,166,.18); }
.rte-bar { display:flex; flex-wrap:wrap; gap:2px; padding:6px; background:#f8fafc; border-bottom:1px solid #e2e8f0; position:sticky; top:0; }
.rte-bar button, .rte-bar label { min-width:32px; height:32px; padding:0 6px; border-radius:7px; color:#334155; display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; cursor:pointer; }
.rte-bar button:hover, .rte-bar label:hover { background:#e2e8f0; }
.rte-bar .sep { width:1px; background:#e2e8f0; margin:4px 3px; }
.rte-area { min-height:260px; max-height:60vh; overflow:auto; padding:14px 16px; outline:none; font-size:.92rem; line-height:1.65; }
.rte-area:empty::before { content:attr(data-ph); color:#94a3b8; }
.rte.big .rte-area { min-height:360px; }
.prose-x h1 { font-size:1.4rem; font-weight:700; margin:.6em 0 .3em; } .prose-x h2 { font-size:1.2rem; font-weight:700; margin:.6em 0 .3em; }
.prose-x h3 { font-size:1.05rem; font-weight:700; margin:.5em 0 .3em; } .prose-x p { margin:.35em 0; }
.prose-x ul { list-style:disc; padding-left:1.4em; margin:.4em 0; } .prose-x ol { list-style:decimal; padding-left:1.4em; margin:.4em 0; }
.prose-x blockquote { border-left:4px solid #99f6e4; background:#f0fdfa; padding:.5em .9em; margin:.5em 0; border-radius:0 8px 8px 0; color:#334155; }
.prose-x pre { background:#0f172a; color:#e2e8f0; padding:.8em 1em; border-radius:8px; overflow:auto; font-size:.82rem; }
.prose-x a { color:#0d9488; text-decoration:underline; } .prose-x hr { margin:.8em 0; border-color:#e2e8f0; }
.prose-x table { border-collapse:collapse; margin:.5em 0; } .prose-x td, .prose-x th { border:1px solid #cbd5e1; padding:4px 8px; }

/* ---------- Timeline ---------- */
.tl { position:relative; padding-left:28px; }
.tl::before { content:""; position:absolute; left:10px; top:6px; bottom:6px; width:2px; background:linear-gradient(#99f6e4,#c4b5fd); border-radius:2px; }
.tl-item { position:relative; margin-bottom:16px; animation: fadeUp .4s ease both; }
.tl-dot { position:absolute; left:-24px; top:16px; width:14px; height:14px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px currentColor; background:currentColor; }

/* ---------- Modal / toast ---------- */
.modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); z-index:80; display:flex; align-items:flex-start; justify-content:center; padding:4vh 12px; overflow:auto; animation:fade .2s; }
.modal-box { background:#fff; border-radius:18px; width:100%; box-shadow:0 30px 80px -20px rgba(0,0,0,.45); animation:pop .25s cubic-bezier(.2,.9,.3,1.2); }
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes pop { from{opacity:0;transform:translateY(14px) scale(.98)} to{opacity:1;transform:none} }
.toast { pointer-events:auto; min-width:260px; max-width:420px; padding:.75rem 1rem; border-radius:12px; color:#fff; font-size:.88rem; box-shadow:0 10px 30px -10px rgba(0,0,0,.4); animation:toastIn .3s ease; display:flex; gap:.6rem; align-items:flex-start; }
@keyframes toastIn { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none} }

/* ---------- Page transitions ---------- */
.view-enter { animation: fadeUp .35s ease both; }
.stat-card { position:relative; overflow:hidden; }
.stat-card .stat-ic { position:absolute; right:-10px; bottom:-14px; opacity:.12; transform:rotate(-12deg); }
.bar-anim { transform-origin:left; animation: growX .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes growX { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.col-anim { transform-origin:bottom; animation: growY .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes growY { from{transform:scaleY(0)} to{transform:scaleY(1)} }

/* ---------- Login page animation (project management theme) ---------- */
.login-bg { background: radial-gradient(1200px 600px at 10% 10%, #134e4a 0%, transparent 60%), radial-gradient(900px 500px at 90% 90%, #4c1d95 0%, transparent 60%), #0b1220; }
.login-grid { background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 38px 38px; animation: gridMove 30s linear infinite; }
@keyframes gridMove { to { background-position: 38px 38px, 38px 38px; } }
.kb-col { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px; backdrop-filter: blur(6px); }
.kb-card { background: rgba(255,255,255,.92); border-radius:10px; padding:8px 10px; margin-top:8px; box-shadow:0 6px 18px -8px rgba(0,0,0,.5); font-size:11px; color:#0f172a; }
.kb-move { animation: kbMove 9s ease-in-out infinite; }
@keyframes kbMove {
  0%,15% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(0,-8px) rotate(-3deg); box-shadow:0 18px 30px -10px rgba(0,0,0,.6); }
  40%,55% { transform: translate(calc(100% + 34px), 0) rotate(0); }
  65% { transform: translate(calc(100% + 34px), -8px) rotate(3deg); }
  80%,100% { transform: translate(calc(200% + 68px), 0) rotate(0); }
}
.gantt-bar { height:10px; border-radius:6px; transform-origin:left; animation: gantt 6s ease-in-out infinite; }
@keyframes gantt { 0%{transform:scaleX(.05)} 45%,80%{transform:scaleX(1)} 100%{transform:scaleX(.05)} }
.flow-line { stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.flow-node { animation: nodeGlow 3s ease-in-out infinite; }
@keyframes nodeGlow { 0%,100%{filter:drop-shadow(0 0 0 rgba(45,212,191,0))} 50%{filter:drop-shadow(0 0 8px rgba(45,212,191,.9))} }
.gear { animation: spin 10s linear infinite; transform-origin: center; transform-box: fill-box; }
.gear.rev { animation-direction: reverse; animation-duration: 7s; }
.float-y { animation: floatY 5s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.login-card { animation: pop .6s cubic-bezier(.2,.9,.3,1.1) both; }
.typing::after { content:"|"; animation: blink 1s step-end infinite; margin-left:2px; }
@keyframes blink { 50% { opacity:0; } }
.tick-draw { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 3s ease-in-out infinite; }
@keyframes draw { 0%,20%{stroke-dashoffset:30} 50%,100%{stroke-dashoffset:0} }

/* ---------- Print ---------- */
@media print {
  .no-print, .topbar, .menubar, footer, #toasts { display:none !important; }
  body { background:#fff; }
  .card { border:none; box-shadow:none; }
  .print-only { display:block !important; }
  main { padding:0 !important; max-width:none !important; }
  .tl-item { break-inside: avoid; }
}
.print-only { display:none; }

/* keep Tailwind padding helpers working on .inp (icon inside input) */
.inp.pl-9 { padding-left: 2.25rem; }
.inp.pr-10 { padding-right: 2.5rem; }
.inp.p-2 { padding: .5rem; }