/*
 * layout.css — Container, fixed sidebar navigation, content area, footnote,
 *              dialogs, notifications, rocket, debugger banner.
 *
 * Accounting's signature fixed left sidebar is 150px wide. div.navigation is
 * positioned fixed; div.content has a matching 150px left margin. The
 * sidebar background uses var(--color-nav-bg) so company.css.php can clean
 * replace it via the cascade (it loads after this file).
 */

/* ─── Page Container ─────────────────────────────────────────────────────── */

div.container {
  width: 100%;
  min-height: 100%;
  position: relative;
}

/* ─── Navigation (Fixed Left Sidebar) ────────────────────────────────────── */

div.container div.navigation {
  position: fixed;
  width: var(--sidebar-width);
  min-height: 100%;
  overflow: hidden;
  background: var(--color-nav-bg);
  border-right: 2px solid var(--color-border);
  z-index: 5000;
  -webkit-box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.5);
  box-shadow:         2px 0 10px 0 rgba(0, 0, 0, 0.5);
}
div.navigation div.navigationButton {
  display: none;
}
div.navigation div#pageNav {
  display: block;
}
div.navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 2px 0 0 0;
  color: var(--color-nav-text);
}
div.navigation div.logo {
  width: 140px;
  margin-left: 4px;
  height: 80px;
  background: url(../images/logo.png) center center no-repeat;
  background-size: contain;
}

/* ─── Rocket Easter Egg ──────────────────────────────────────────────────── */
/* When the easter egg fires, header.php adds <div class="rocketmove"> for the
   flying rocket and swaps the launchpad image to .smoke. The animation below
   gives the rocket a brief engine-wobble, ignites, and sends it off-screen. */

div.rocketmove {
  position: absolute;
  bottom: 90px;
  left: 60px;
  height: 50px;
  width: 22px;
  z-index: 5001;
  background: url(../images/onlyrocket.png) bottom center no-repeat;
  pointer-events: none;
  transform-origin: 50% 90%;
  animation: rocket-launch 3.2s cubic-bezier(0.45, 0, 0.65, 0.1) 0.6s forwards;
  will-change: transform, opacity, filter;
}

/* Flame plume — two layered gradients: hot blue/white core + orange outer envelope.
   Mach-diamond bands via repeating-linear-gradient overlay. */
div.rocketmove::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 18px;
  height: 32px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: 50% 0%;
  background:
    /* Mach diamond bands (subtle bright/dark stripes through plume) */
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.0)  0px,
      rgba(255, 255, 255, 0.25) 2px,
      rgba(255, 255, 255, 0.0)  6px,
      rgba(255, 255, 255, 0.0)  10px
    ),
    /* Hot blue/white inner core */
    radial-gradient(ellipse 35% 60% at 50% 5%,
      rgba(220, 240, 255, 1)    0%,
      rgba(150, 200, 255, 0.95) 35%,
      rgba(80, 130, 255, 0.4)   70%,
      rgba(60, 100, 255, 0)     100%),
    /* Orange/yellow outer envelope */
    radial-gradient(ellipse at 50% 0%,
      rgba(255, 250, 210, 1)    0%,
      rgba(255, 200, 90, 0.95)  20%,
      rgba(255, 110, 30, 0.8)   50%,
      rgba(220, 30, 10, 0.4)    80%,
      rgba(180, 0, 0, 0)        100%);
  filter: blur(2px);
  border-radius: 50% 50% 40% 40% / 30% 30% 70% 70%;
  animation: rocket-flame 3.2s ease-in 0.6s forwards;
  pointer-events: none;
}

/* Smoke puff — bursts at ignition, expands and drifts downward + outward. */
div.rocketmove::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 70px;
  height: 28px;
  transform: translate(-50%, 0) scale(0);
  transform-origin: 50% 0%;
  background: radial-gradient(ellipse at center,
              rgba(230, 230, 230, 0.9)  0%,
              rgba(190, 190, 190, 0.6)  35%,
              rgba(160, 160, 160, 0.25) 65%,
              rgba(150, 150, 150, 0)    85%);
  filter: blur(4px);
  border-radius: 50%;
  animation: rocket-smoke 3.2s ease-out 0.6s forwards;
  pointer-events: none;
}

/* Pad rumble — shake the launchpad sprite while the rocket fires.
   .smoke class is added by header.php only when $_rocket fires. */
div.navigation div.rocket.smoke {
  animation: pad-rumble 0.9s ease-out 0.6s forwards;
  transform-origin: 50% 100%;
}

@keyframes rocket-launch {
  /* idle on the pad */
  0%   { transform: translate(0, 0) rotate(0deg) scale(1);
         filter: drop-shadow(0 0 0 transparent); }

  /* engines spool — light shudder + tilt */
  6%   { transform: translate(-1px, 0) rotate(-0.4deg) scale(1); }
  12%  { transform: translate(1px, 0) rotate( 0.4deg) scale(1); }
  18%  { transform: translate(0, 0) rotate(-0.2deg) scale(1); }

  /* IGNITION — full-throttle flash, big golden glow */
  20%  { transform: translate(0, 0) rotate(0deg) scale(1.06);
         filter: drop-shadow(0 8px 18px rgba(255, 210, 100, 1)) brightness(1.7); }

  /* slow lift — glow building, slight S-curve drift starts */
  28%  { transform: translate(-2px, -16px) rotate(-0.4deg) scale(1.06);
         filter: drop-shadow(0 12px 22px rgba(255, 170, 55, 0.9)); }

  /* hard burn — S-curve continues, motion blur creeping in, scale grows */
  40%  { transform: translate(3px, -90px) rotate(0.6deg) scale(1.10);
         filter: drop-shadow(0 16px 28px rgba(255, 140, 40, 0.8)) blur(0.3px); }
  55%  { transform: translate(-3px, -240px) rotate(-0.6deg) scale(1.16);
         filter: drop-shadow(0 20px 34px rgba(255, 115, 30, 0.7)) blur(0.6px);
         opacity: 1; }
  70%  { transform: translate(2px, -480px) rotate(0.5deg) scale(1.22);
         filter: drop-shadow(0 24px 42px rgba(255, 95, 25, 0.55)) blur(1px);
         opacity: 1; }
  85%  { transform: translate(-1px, -800px) rotate(-0.3deg) scale(1.28);
         filter: drop-shadow(0 28px 50px rgba(255, 80, 20, 0.4)) blur(1.4px);
         opacity: 0.95; }

  /* exit — leaves screen */
  100% { transform: translate(0, -140vh) rotate(0deg) scale(1.35);
         filter: drop-shadow(0 0 0 transparent) blur(2px); opacity: 0; }
}

@keyframes rocket-flame {
  0%, 17%   { transform: translateX(-50%) scaleY(0)   scaleX(1);    opacity: 0; }
  /* ignition kick — flame snaps out */
  20%       { transform: translateX(-50%) scaleY(2.2) scaleX(1.5);  opacity: 1; }
  /* flicker — alternating squish/stretch as throttle ramps */
  26%       { transform: translateX(-50%) scaleY(2.8) scaleX(1.1);  opacity: 0.95; }
  33%       { transform: translateX(-50%) scaleY(3.4) scaleX(1.4);  opacity: 1; }
  42%       { transform: translateX(-50%) scaleY(3.9) scaleX(1.05); opacity: 0.9; }
  55%       { transform: translateX(-50%) scaleY(4.5) scaleX(1.3);  opacity: 0.9; }
  70%       { transform: translateX(-50%) scaleY(5)   scaleX(1.1);  opacity: 0.8; }
  85%       { transform: translateX(-50%) scaleY(5.4) scaleX(0.95); opacity: 0.55; }
  100%      { transform: translateX(-50%) scaleY(0)   scaleX(1);    opacity: 0; }
}

@keyframes rocket-smoke {
  0%, 18%   { transform: translate(-50%, 0)    scale(0);   opacity: 0; }
  22%       { transform: translate(-50%, 2px)  scale(1.2); opacity: 0.95; }
  35%       { transform: translate(-50%, 6px)  scale(2.2); opacity: 0.75; }
  55%       { transform: translate(-50%, 14px) scale(3.4); opacity: 0.55; }
  75%       { transform: translate(-50%, 22px) scale(4.4); opacity: 0.3; }
  100%      { transform: translate(-50%, 32px) scale(5.4); opacity: 0; }
}

@keyframes pad-rumble {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1px, 0); }
  40%  { transform: translate(1px, 0); }
  60%  { transform: translate(0, 1px); }
  100% { transform: translate(0, 0); }
}

div.navigation div.rocket {
  position: absolute;
  bottom: 0;
  z-index: -1;
  height: 141px;
  width: 148px;
  background: url(../images/rocket.png) center center no-repeat;
}
div.navigation div.rocket.smoke {
  background: url(../images/smoke.png) bottom center no-repeat;
}

/* ─── Notifications ──────────────────────────────────────────────────────── */

div.container > div.notifications {
  margin-left: var(--sidebar-width);
  margin-bottom: 2px;
}
div.container > div.notifications > div.item {
  padding: 5px 10px;
  border-bottom: 2px solid var(--color-border);
  word-break: break-word;
}
div.container > div.notifications > div.item .dismiss {
  float: right;
}
div.container > div.notifications > div.item.item-low {
  background: var(--color-notice-bg);
  border-bottom-color: var(--color-notice-border);
}
div.container > div.notifications > div.item.item-medium {
  background: var(--color-warning-bg);
  border-bottom-color: var(--color-warning-border);
}
div.container > div.notifications > div.item.item-high {
  background: var(--color-error-bg);
  border-bottom-color: var(--color-error-border);
}

/* ─── Content Area ───────────────────────────────────────────────────────── */

div.container > div.content {
  margin-left: var(--sidebar-width);
  padding: 4px 10px 20px 10px;
  min-height: 100%;
}

/* ─── Footnote ───────────────────────────────────────────────────────────── */

div.container > div.footnote {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-muted-lighter);
}

/* ─── Filter Form ────────────────────────────────────────────────────────── */

div.container div.content div.FilterForm {
  margin: -2px -10px 0;
  padding: 0 10px;
  background: var(--color-filter-bg);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

/* Filter Form column chooser (ul.lf inside FilterForm).
   Each <li> = a column; .handle is a jQuery-ui-sortable drag handle showing
   an up/down arrow icon. Without these rules the LIs render as default
   bulleted list and the drag handle is invisible. */
div.container div.content div.FilterForm ul.lf {
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-width: 400px;
}
div.container div.content div.FilterForm ul.lf li {
  clear: left;
  display: block;
  height: 22px;
}
div.container div.content div.FilterForm ul.lf li .handle {
  float: left;
  display: inline-block;
  cursor: pointer;
  background: url(../../../images/updown.png) center center no-repeat;
  width: 22px;
  height: 22px;
  margin-right: 4px;
}

/* ─── Dialogs ────────────────────────────────────────────────────────────── */

div.fixed-dialog {
  position: fixed !important;
  max-height: 100%;
}
div.fixed-dialog div.ui-dialog-content {
  overflow: auto;
}
div.iframe-dialog .ui-dialog-content {
  padding: 0;
}

/* ─── No-script Warning ──────────────────────────────────────────────────── */

div.noscript {
  position: absolute;
  font-weight: bold;
  width: 500px;
  top: 45px;
  left: 50%;
  margin-left: -250px;
  border: 2px solid #f00;
  background: var(--color-bg);
  padding: 20px;
  z-index: 2000;
}

/* ─── Idle Message ───────────────────────────────────────────────────────── */

#IdleMessage {
  display: none;
}

/* ─── Submit / Action Bar ────────────────────────────────────────────────── */

div.submitDiv {
  background: var(--color-bg);
  padding: 10px;
  margin: 0 -10px;
}

/* ─── Body: No Navigation (embedded / popup views) ───────────────────────── */

body.nonav .rocketmove,
body.nonav div.container > div.navigation,
body.nonav:not(.notif) div.container > div.notifications {
  display: none;
}
body.nonav div.container > div.content,
body.nonav div.container > div.notifications {
  margin-left: 0;
}
body.nonav div#DebuggerBanner { padding-left: 0; }
body.nonav #navCollapse        { display: none; }

/* ─── Body: Dialog / iframe ──────────────────────────────────────────────── */

body.dialog div#DebuggerBanner,
body.dialog div.container > div.footnote {
  display: none;
}