/* GuessIo Admin: custom CSS that Tailwind utilities don't cover.
   Colors/tokens are defined in js/tailwind-config.js and mirrored here as variables. */
:root {
  --void: #080a0b; --surface: #101415; --panel: #151a1b; --line: #293233;
  --signal: #72f580; --lime: #b7ff4a; --cyan: #5be8ed; --warn: #ffb457; --danger: #ff6d6d; --muted: #83908d;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body { font-family: 'Space Grotesk', system-ui, sans-serif; background: var(--void); -webkit-font-smoothing: antialiased; }
.mono { font-family: 'DM Mono', ui-monospace, monospace; }
input, textarea, select, button { font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; }
::selection { background: rgba(114,245,128,.28); }

.grid-bg { background-image: linear-gradient(rgba(114,245,128,.032) 1px, transparent 1px), linear-gradient(90deg, rgba(114,245,128,.032) 1px, transparent 1px); background-size: 28px 28px; }
.top-grid { background-image: linear-gradient(90deg, transparent 49.8%, rgba(114,245,128,.06) 50%, transparent 50.2%); }
.nav-active { background: linear-gradient(90deg, rgba(114,245,128,.12), rgba(114,245,128,.035)); color: #d8ffda; border-color: rgba(114,245,128,.26); }
.nav-active .nav-glyph { color: var(--signal); }

/* Keyboard focus that stays visible on the dark theme */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }

.view { display: none; }
.view.active { display: block; animation: rise .24s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.pulse { animation: pulse 2.3s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.path { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: line 1.35s cubic-bezier(.16,.7,.2,1) forwards; }
@keyframes line { to { stroke-dashoffset: 0; } }
.bar { transform-origin: bottom; animation: bar .65s cubic-bezier(.2,.8,.2,1) both; display: block; }
@keyframes bar { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
.scan { animation: scan 3.5s linear infinite; }
@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(430px); } }

.drawer { transform: translateX(104%); transition: transform .3s cubic-bezier(.2,.7,.2,1); visibility: hidden; }
.drawer.open { transform: translateX(0); visibility: visible; }
.backdrop { opacity: 0; pointer-events: none; transition: opacity .25s; }
.backdrop.open { opacity: 1; pointer-events: auto; }
.toast { transform: translateY(150%); opacity: 0; transition: .25s; pointer-events: none; }
.toast.show { transform: translateY(0); opacity: 1; }

/* Loading skeleton */
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.02) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.02) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #2b3635 transparent; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #2b3635; }

/* Desktop shell + collapsible nav (from mockup) */
@media (min-width: 1024px) {
  #appShell { display: grid; grid-template-columns: 252px minmax(0, 1fr); transition: grid-template-columns .26s cubic-bezier(.2,.7,.2,1); }
  #appShell.is-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
  #sideNav { transition: padding .26s ease; overflow: hidden; position: sticky; top: 0; height: 100vh; }
  #sideNav.collapsed { padding-left: 10px; padding-right: 10px; }
  #sideNav.collapsed .brand-copy, #sideNav.collapsed .section-label, #sideNav.collapsed .planning-card, #sideNav.collapsed .profile-copy { display: none; }
  #sideNav.collapsed nav button, #sideNav.collapsed nav a { justify-content: center; padding-left: 0; padding-right: 0; font-size: 0; }
  #sideNav.collapsed nav .nav-glyph { font-size: 14px; }
  #sideNav.collapsed nav span:not(.nav-glyph) { display: none; }
  #sideNav.collapsed #nav { margin-top: 24px; }
  #sideNav.collapsed .brand-row { justify-content: center; }
  #sideNav.collapsed .collapse-btn { position: absolute; left: 43px; top: 10px; width: 20px; height: 20px; background: #151a1b; border-color: #293233; font-size: 10px; }
  #sideNav.collapsed .profile-row { margin-top: auto; justify-content: center; padding-left: 0; padding-right: 0; }
}
/* Mobile nav sheet */
#mobileNav { transform: translateX(-104%); transition: transform .28s cubic-bezier(.2,.7,.2,1); visibility: hidden; }
#mobileNav.open { transform: translateX(0); visibility: visible; }

/* Mail preview keeps the emailed look */
.mail-body p { margin: 0 0 12px; }
.mail-body a { color: var(--signal); }

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

/* Confirm dialog: the action button is inert until the required reason is filled in (styled here, not with
   Tailwind classes, so it works without rebuilding css/tailwind.css). */
[data-confirm-modal] #cmOk:disabled { opacity: .4; cursor: not-allowed; }