/* ═══════════════════════════════════════════════
   SurgeCraft Staff Activity Logger
   Theme: Matches Staff Documentation (Starlight dark)
   ═══════════════════════════════════════════════ */

:root {
  --sl-color-bg:           #18181b;
  --sl-color-bg-nav:       #1c1c21;
  --sl-color-bg-inline-code:#27272a;
  --sl-color-hairline:     #2e2e33;
  --sl-color-hairline-light:#3f3f46;
  --sl-color-gray-2:       #e4e4e7;
  --sl-color-gray-3:       #a1a1aa;
  --sl-color-gray-4:       #71717a;
  --sl-color-gray-5:       #3f3f46;
  --sl-color-accent:       #60a5fa;
  --sl-color-accent-high:  #93c5fd;
  --sl-color-accent-low:   #1e3a5f;
  --sl-color-text:         #e4e4e7;
  --sl-color-white:        #ffffff;
  --sl-color-green:        #4ade80;
  --sl-color-red:          #f87171;
  --sl-font-system:        system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --sl-font-mono:          ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --sl-nav-height:         56px;
  --sl-transition:         .2s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sl-font-system);
  font-size: 16px; line-height: 1.6;
  color: var(--sl-color-text);
  background: var(--sl-color-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ═══ LOGIN ═══ */
.login-overlay { position:fixed; inset:0; z-index:9999; background:#0a0e17; display:flex; align-items:center; justify-content:center; padding:1.5rem; overflow:hidden; }
.login-bg-glow { position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(96,165,250,.08) 0%,transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.login-container { width:100%; max-width:400px; text-align:center; animation:loginFadeIn .6s cubic-bezier(.16,1,.3,1); transition:all .4s ease; position:relative; z-index:1; }
.login-container.login-success { opacity:0; transform:scale(1.02); }
@keyframes loginFadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.login-card { background:linear-gradient(145deg,rgba(22,28,45,.95),rgba(15,19,32,.98)); border:1px solid rgba(96,165,250,.1); border-radius:20px; padding:2.5rem 2rem 2rem; backdrop-filter:blur(20px); box-shadow:0 0 0 1px rgba(255,255,255,.03),0 8px 40px rgba(0,0,0,.4),0 0 80px rgba(96,165,250,.04); }
.login-logo { margin-bottom:1.75rem; display:flex; justify-content:center; }
.login-logo-ring { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
.login-logo-ring img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 0 24px rgba(96,165,250,.35)); }
.login-title { font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:.5rem; letter-spacing:-.03em; }
.login-subtitle { font-size:.9rem; color:rgba(255,255,255,.45); margin-bottom:2rem; }
.pin-input-group { display:flex; gap:.5rem; justify-content:center; margin-bottom:1rem; }
.pin-digit { width:46px; height:54px; border:1.5px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); color:#fff; font-size:1.3rem; font-weight:600; text-align:center; font-family:var(--sl-font-mono); transition:all .2s ease; outline:none; -webkit-appearance:none; }
.pin-digit::placeholder { color:rgba(255,255,255,.15); font-size:1.5rem; }
.pin-digit:focus { border-color:rgba(96,165,250,.5); background:rgba(96,165,250,.05); box-shadow:0 0 0 3px rgba(96,165,250,.1),0 0 20px rgba(96,165,250,.05); }
.pin-digit:not(:placeholder-shown) { border-color:rgba(96,165,250,.3); background:rgba(96,165,250,.04); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.pin-input-group.shake { animation:shake .4s ease; }
.pin-input-group.shake .pin-digit { border-color:rgba(248,113,113,.6); background:rgba(248,113,113,.05); }
.login-error { font-size:.8rem; color:var(--sl-color-red); min-height:1.2rem; margin-bottom:.5rem; opacity:0; transition:opacity .2s ease; }
.login-error.visible { opacity:1; }
.login-btn { width:100%; padding:.8rem 1.5rem; background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; border:none; border-radius:12px; font-size:.9rem; font-weight:600; font-family:var(--sl-font-system); cursor:pointer; transition:all .25s ease; display:flex; align-items:center; justify-content:center; gap:.5rem; position:relative; overflow:hidden; }
.login-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%); transform:translateX(-100%); transition:transform .5s ease; }
.login-btn:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(59,130,246,.35),0 0 0 1px rgba(59,130,246,.2); }
.login-btn:hover::before { transform:translateX(100%); }
.login-btn:active { transform:translateY(0); }
.login-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ═══ TOP NAV ═══ */
.top-nav { position:sticky; top:0; z-index:100; height:var(--sl-nav-height); background:var(--sl-color-bg-nav); border-bottom:1px solid var(--sl-color-hairline); display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; }
.nav-brand { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1rem; color:var(--sl-color-white); letter-spacing:-.02em; }
.nav-brand img { width:28px; height:28px; object-fit:contain; }
.nav-user { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--sl-color-gray-3); }
.nav-user-avatar { width:30px; height:30px; border-radius:50%; background:var(--sl-color-accent-low); border:1.5px solid rgba(96,165,250,.3); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.75rem; color:var(--sl-color-accent); }

/* ═══ MAIN ═══ */
.main-content { padding:2rem 1.5rem 4rem; }
.container { max-width:720px; margin:0 auto; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.75rem; gap:1rem; }
.page-header h1 { font-size:1.65rem; font-weight:700; color:var(--sl-color-white); letter-spacing:-.03em; margin-bottom:.25rem; }
.header-desc { font-size:.9rem; color:var(--sl-color-gray-3); }
.date-display { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--sl-color-gray-4); padding:.4rem .75rem; background:var(--sl-color-bg-nav); border:1px solid var(--sl-color-hairline); border-radius:8px; white-space:nowrap; flex-shrink:0; }
.date-display svg { color:var(--sl-color-gray-4); flex-shrink:0; }

/* ═══ FORM CARD ═══ */
.form-card { background:var(--sl-color-bg-nav); border:1px solid var(--sl-color-hairline); border-radius:14px; overflow:hidden; }
.form-section { padding:1.5rem 1.75rem; }
.form-divider { height:1px; background:var(--sl-color-hairline); }
.section-header { display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem; }
.section-header svg { color:var(--sl-color-accent); flex-shrink:0; }
.section-header h2 { font-size:1rem; font-weight:600; color:var(--sl-color-white); letter-spacing:-.01em; }

/* ═══ FORM ELEMENTS ═══ */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group label { display:block; font-size:.8rem; font-weight:500; color:var(--sl-color-gray-3); margin-bottom:.4rem; }
.required { color:var(--sl-color-red); }
.optional { color:var(--sl-color-gray-4); font-weight:400; }

.form-group input[type="text"],
.form-group textarea {
  width:100%; padding:.6rem .85rem;
  background:var(--sl-color-bg); border:1.5px solid var(--sl-color-hairline); border-radius:10px;
  color:var(--sl-color-white); font-size:.875rem; font-family:var(--sl-font-system);
  outline:none; transition:all .2s ease; -webkit-appearance:none;
}
.form-group textarea { resize:vertical; min-height:80px; line-height:1.5; }
.form-group input[type="text"]:focus,
.form-group textarea:focus { border-color:rgba(96,165,250,.4); box-shadow:0 0 0 3px rgba(96,165,250,.08); }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--sl-color-gray-5); }

/* ═══ CUSTOM SELECT ═══ */
.custom-select { position:relative; }
.custom-select-trigger {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .85rem;
  background:var(--sl-color-bg); border:1.5px solid var(--sl-color-hairline); border-radius:10px;
  cursor:pointer; transition:all .2s ease; user-select:none;
}
.custom-select-trigger:hover { border-color:var(--sl-color-hairline-light); }
.custom-select.open .custom-select-trigger {
  border-color:rgba(96,165,250,.4);
  box-shadow:0 0 0 3px rgba(96,165,250,.08);
  border-radius:10px 10px 0 0;
}
.select-placeholder { font-size:.875rem; color:var(--sl-color-gray-5); transition:color .2s; }
.select-placeholder.has-value { color:var(--sl-color-white); }
.select-chevron { color:var(--sl-color-gray-4); transition:transform .2s ease; flex-shrink:0; }
.custom-select.open .select-chevron { transform:rotate(180deg); }

.custom-select-options {
  position:absolute; top:100%; left:0; right:0;
  background:var(--sl-color-bg); border:1.5px solid rgba(96,165,250,.3);
  border-top:none; border-radius:0 0 10px 10px;
  max-height:0; overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease;
  opacity:0; z-index:50;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.custom-select.open .custom-select-options {
  max-height:320px; opacity:1; overflow-y:auto;
}

.select-option {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .85rem;
  font-size:.85rem; color:var(--sl-color-gray-2);
  cursor:pointer; transition:all .12s ease;
}
.select-option:hover {
  background:rgba(96,165,250,.08); color:var(--sl-color-white);
}
.select-option.selected {
  background:rgba(96,165,250,.12); color:var(--sl-color-accent-high);
}

.rank-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.activity-icon { font-size:.95rem; flex-shrink:0; line-height:1; }

/* Scrollbar for dropdown */
.custom-select-options::-webkit-scrollbar { width:5px; }
.custom-select-options::-webkit-scrollbar-track { background:transparent; }
.custom-select-options::-webkit-scrollbar-thumb { background:var(--sl-color-hairline-light); border-radius:3px; }

/* ═══ QUANTITY CONTROL ═══ */
.quantity-control {
  display:flex; align-items:center;
  background:var(--sl-color-bg); border:1.5px solid var(--sl-color-hairline); border-radius:10px;
  overflow:hidden; height:40px;
}
.quantity-control .counter-btn {
  width:40px; height:100%;
  border:none; border-radius:0;
  background:transparent; color:var(--sl-color-gray-3);
  font-size:1.1rem; font-weight:500; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease; line-height:1;
}
.quantity-control .counter-btn:hover { background:var(--sl-color-hairline); color:var(--sl-color-white); }
.quantity-control .counter-btn:active { transform:scale(.92); }
.quantity-control .counter-btn.minus { border-right:1px solid var(--sl-color-hairline); }
.quantity-control .counter-btn.plus { border-left:1px solid var(--sl-color-hairline); }
.quantity-control input {
  flex:1; height:100%; text-align:center; border:none; background:transparent;
  color:var(--sl-color-white); font-size:.9rem; font-weight:600;
  font-family:var(--sl-font-mono); outline:none;
  -moz-appearance:textfield;
}
.quantity-control input::-webkit-outer-spin-button,
.quantity-control input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ═══ FILE UPLOAD ═══ */
.upload-area { border:2px dashed var(--sl-color-hairline-light); border-radius:12px; transition:all .2s ease; cursor:pointer; position:relative; overflow:hidden; }
.upload-area:hover, .upload-area.dragover { border-color:var(--sl-color-accent); background:rgba(96,165,250,.03); }
.upload-placeholder { padding:2rem; text-align:center; }
.upload-placeholder svg { color:var(--sl-color-gray-4); margin-bottom:.5rem; }
.upload-placeholder p { font-size:.875rem; color:var(--sl-color-gray-3); margin-bottom:.2rem; }
.upload-placeholder span { font-size:.75rem; color:var(--sl-color-gray-4); }
.upload-preview { padding:1rem; display:flex; align-items:center; gap:1rem; }
.upload-preview img { width:80px; height:80px; object-fit:cover; border-radius:8px; border:1px solid var(--sl-color-hairline); }
.file-info { display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; }
.file-info svg { color:var(--sl-color-accent); flex-shrink:0; }
.file-info #file-name { font-size:.85rem; color:var(--sl-color-gray-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-info #file-size { font-size:.75rem; color:var(--sl-color-gray-4); flex-shrink:0; }
.remove-file { width:32px; height:32px; border:1px solid var(--sl-color-hairline); border-radius:8px; background:transparent; color:var(--sl-color-gray-3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s ease; flex-shrink:0; }
.remove-file:hover { background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.3); color:var(--sl-color-red); }

/* ═══ CONTEXT FIELDS ═══ */
.context-fields { margin-top: 1rem; }
.context-field { animation: fieldSlideIn .25s ease; }
@keyframes fieldSlideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* ═══ ACTIONS ═══ */
.form-actions { display:flex; justify-content:flex-end; gap:.75rem; padding:1.25rem 1.75rem; }
.btn-reset { padding:.6rem 1.25rem; background:transparent; border:1px solid var(--sl-color-hairline); border-radius:10px; color:var(--sl-color-gray-3); font-size:.85rem; font-weight:500; font-family:var(--sl-font-system); cursor:pointer; display:flex; align-items:center; gap:.4rem; transition:all .2s ease; }
.btn-reset:hover { border-color:var(--sl-color-hairline-light); color:var(--sl-color-white); background:var(--sl-color-bg-inline-code); }
.btn-submit { padding:.6rem 1.5rem; background:linear-gradient(135deg,#3b82f6,#2563eb); border:none; border-radius:10px; color:#fff; font-size:.85rem; font-weight:600; font-family:var(--sl-font-system); cursor:pointer; display:flex; align-items:center; gap:.4rem; transition:all .25s ease; position:relative; overflow:hidden; }
.btn-submit::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%); transform:translateX(-100%); transition:transform .5s ease; }
.btn-submit:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(59,130,246,.3); }
.btn-submit:hover::before { transform:translateX(100%); }
.btn-submit:active { transform:translateY(0); }
.btn-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ═══ TOAST ═══ */
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(120px); border:1px solid; padding:.75rem 1.25rem; border-radius:12px; font-size:.875rem; font-weight:500; display:flex; align-items:center; gap:.5rem; box-shadow:0 8px 30px rgba(0,0,0,.3); transition:transform .4s cubic-bezier(.16,1,.3,1); z-index:1000; white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); }

/* ═══ ANIMATIONS ═══ */
@keyframes spin { to{transform:rotate(360deg)} }
.spin { animation:spin .8s linear infinite; }

/* ═══ MOBILE ═══ */
@media (max-width: 640px) {
  .main-content { padding:1.25rem 1rem 3rem; }
  .form-section { padding:1.25rem 1.25rem; }
  .form-actions { padding:1rem 1.25rem; }
  .form-row { grid-template-columns:1fr; }
  .page-header { flex-direction:column; }
  .page-header h1 { font-size:1.35rem; }
  .top-nav { padding:0 1rem; }
}
@media (max-width: 480px) {
  .pin-digit { width:40px; height:48px; font-size:1.1rem; border-radius:10px; }
  .pin-input-group { gap:.35rem; }
  .login-title { font-size:1.3rem; }
  .login-card { padding:2rem 1.5rem 1.75rem; border-radius:16px; }
}