/* TERMINAL 
 * @import "terminal.css"*/
 :root {
   --term-glow: hsl(120,100%,50%);
   --term-dim: hsl(120,70%,85%);
   --term-bg: #030a02;
   --pico-background-color: var(--term-bg);
   --pico-color: var(--term-glow) !important; 
   --pico-primary: var(--term-glow);
   --pico-primary-background: var(--term-dim);
   --pico-primary-hover: var(--term-glow);
   --pico-card-background-color: #061205;
   --pico-border-color: var(--term-dim);
   --pico-text-selection-color: var(--term-dim);
  
 }

 tr, td, table, th {
   --pico-background-color: var(--term-bg);
 }
 h1,h2,h3,h4,h5,h6 {
   color: var(--term-glow)
 }

 .log-row, .log-output-content {
   /* white-space: pre-wrap;  */     /* Preserves formatting/newlines but wraps lines */
   word-break: break-all;       /* Forces wrapping at any character boundary */
   overflow-wrap: break-word;
 }

 body {
   font-family: 'Courier New', Courier, monospace;
   background-color: var(--term-bg);
   color: var(--term-glow);
   text-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
   margin: 0;
   padding: 0;
   min-height: 100vh;
   min-height: 100dvh; 
 }

 /* Ambient CRT Flicker and Scanline overlays */
 /* .crt-monitor { */
 /*   position: relative; */
 /*   min-height: 100vh; */
 /*   padding: 1.5rem; */
 /*   box-sizing: border-box; */
 /* } */
.crt-monitor {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

 .crt-monitor::before {
   content: " ";
   display: block;
   position: fixed;
   top: 0; left: 0; bottom: 0; right: 0;
   background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
   background-size: 100% 3px, 3px 100%;
   z-index: 9999;
   pointer-events: none;
 }

 .crt-monitor::after {
   content: " ";
   display: block;
   position: fixed;
   top: 0; left: 0; bottom: 0; right: 0;
   background: rgba(18, 16, 16, 0.08);
   opacity: 0;
   z-index: 10000;
   pointer-events: none;
   animation: monitor-flicker 0.15s infinite;
 }

 @keyframes monitor-flicker {
   0% { opacity: 0.12; }
   50% { opacity: 0.15; }
   100% { opacity: 0.13; }
 }

 /* Main Container Framework */
 .terminal-box {
   border: 2px solid var(--term-dim);
   background: #020702;
   border-radius: 8px;
   box-shadow: inset 0 0 40px rgba(57, 255, 20, 0.15), 0 0 20px rgba(22, 95, 8, 0.3);
   /* min-height: 85vh; */
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }

 /* Top Header Board */
 .term-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 2px solid var(--term-dim);
   padding: 0.75rem 1.25rem;
   background: #041003;
   font-size: 0.85rem;
   letter-spacing: 1px;
 }

 .sys-status {
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }

 .status-dot {
   width: 8px;
   height: 8px;
   background-color: var(--term-glow);
   border-radius: 50%;
   display: inline-block;
   box-shadow: 0 0 8px var(--term-glow);
   animation: pulse 1.5s infinite;
 }

 @keyframes pulse {
   0% { opacity: 0.4; }
   50% { opacity: 1; }
   100% { opacity: 0.4; }
 }

 /* Layout panels */
 .term-body {
   display: flex;
   flex-direction: row;
   flex: 1;
   min-height: 0; /* Important for inner scrolls */
 }

 /* Sidebar for continuous server monitoring */
 .term-sidebar {
   width: 260px;
   border-right: 1px solid var(--term-dim);
   padding: 1rem;
   font-size: 0.8rem;
   background-color: rgba(4, 16, 3, 0.4);
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }

 .sidebar-section {
   border: 1px solid var(--term-dim);
   border-radius: 4px;
   padding: 0.5rem;
   background: rgba(0,0,0,0.4);
 }

 .sidebar-title {
   text-transform: uppercase;
   font-weight: bold;
   border-bottom: 1px solid var(--term-dim);
   padding-bottom: 0.25rem;
   margin-bottom: 0.5rem;
   color: #ffffff;
 }

 /* Main output panel */
 .term-main {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   padding: 1rem 1.25rem;
   min-height: 0;
 }

 .term-logs {
   flex-grow: 1;
   overflow-y: auto;
   margin-bottom: 1rem;
   font-size: 0.95rem;
   line-height: 1.4;
   max-height: 85vh;
   overflow-wrap: break-word;
 }

 .term-logs::-webkit-scrollbar {
   width: 8px;
 }
 .term-logs::-webkit-scrollbar-track {
   background: rgba(0,0,0,0.5);
 }
 .term-logs::-webkit-scrollbar-thumb {
   background: var(--term-dim);
   border: 1px solid var(--term-glow);
   border-radius: 4px;
 }

 /* Input command row */
 .term-input-wrapper {
   border-top: 1px solid var(--term-dim);
   padding-top: 1rem;
   display: flex;
   align-items: center;
 }

 .term-prompt {
   font-weight: bold;
   margin-right: 0.75rem;
   white-space: nowrap;
 }


 .term-input-field {
   background: transparent !important;
   border: 3px solid var(--term-dim) !important;
   color: var(--term-glow) !important;
   box-shadow: none !important;
   font-family: inherit !important;
   font-size: 1.05rem !important;
   outline: none !important;
   padding: 0 0.5em !important;
   margin: 0 !important;
   flex-grow: 1;
   caret-color: var(--term-glow);
 }

 /* Gate Login Card (Replaces Terminal until Auth passes) */
 .gate-login {
   max-width: 500px;
   margin: 10vh auto;
   border: 2px solid var(--term-glow);
   background: #040e03;
   box-shadow: 0 0 25px rgba(57, 255, 20, 0.2);
   border-radius: 8px;
   padding: 2rem;
 }

 .gate-title {
   text-align: center;
   border-bottom: 2px dashed var(--term-glow);
   padding-bottom: 1rem;
   margin-bottom: 2rem;
 }

 /* Clickable helper spans */
 .cmd-trigger {
   text-decoration: underline;
   cursor: pointer;
   transition: color 0.2s;
 }
 .cmd-trigger:hover {
   color: #ffffff;
   text-shadow: 0 0 8px #ffffff;
 }

 /* Hide logic */
 .hidden {
   display: none !important;
 }

 /* FIx markdown renderer */
 .md-render p, 
 .md-render ul, 
 .md-render ol, 
 .md-render li, 
 .md-render blockquote {
   margin-top: 0.15rem !important;
   margin-bottom: 0.5rem !important;
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   line-height: 1.45 !important;
 }
 .md-render h1, 
 .md-render h2, 
 .md-render h3, 
 .md-render h4 {
   margin-top: 0.6rem !important;
   margin-bottom: 0.3rem !important;
   padding: 0 !important;
 }
 .md-render ul, 
 .md-render ol {
   padding-left: 1.15rem !important;
 }
 .md-render li {
   margin-bottom: 0.1rem !important;
 }
 .md-render blockquote {
   margin: 0.4rem 0 !important;
   padding: 0.15rem 0.6rem !important;
 }

/* Mobile Sidebar Close Button (Hidden on Desktop) */
.sidebar-close-btn {
  display: none;
}

/* Desktop Hide Sibling Hack Trigger Button */
.term-toggle-btn {
  display: none;
}

/* ==========================================
 * RESPONSIVE MOBILE OVERRIDES
 * ========================================== */
@media (max-width: 768px) {
  .crt-monitor {
    padding: 0.5rem; /* Maximize usable space */
  }

  .terminal-box {
    border-width: 1px;
  }

  /* Hide the busy metrics sidebar on portrait phone views */
  /* .term-sidebar { */
  /*   display: none; */
  /* } */
.term-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 270px;
    z-index: 100;
    border-right: 2px solid var(--term-glow);
    background-color: #020702;
    transform: translateX(-105%); /* Positioned off-screen */
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.95);
  }

  /* Slide in sidebar when checkbox is checked */
  .term-toggle-cb:checked ~ .terminal-box .term-sidebar {
    transform: translateX(0);
  }

  /* Mobile Close Button Container */
  .sidebar-close-btn {
    display: block;
    text-align: right;
    margin-bottom: 0.5rem;
  }

  .sidebar-close-trigger {
    border: 1px solid var(--term-glow);
    padding: 2px 8px;
    font-size: 0.7rem;
    color: #ffffff;
    cursor: pointer;
    text-transform: uppercase;
  }

  /* Display [SYSTEM STATUS] toggle button inside mobile header */
  .term-toggle-btn {
    display: inline-block;
    border: 1px solid var(--term-dim-border);
    padding: 3px 10px;
    font-size: 0.9rem;
    color: var(--term-glow);
    background-color: #041003;
    cursor: pointer;
    text-shadow: none;
    border-radius: 4px;
    transition: all 0.2s;
    text-decoration: underline;
  }

  .term-toggle-btn:hover {
    border-color: var(--term-glow);
    color: #ffffff;
    box-shadow: 0 0 8px var(--term-glow);
  }
 .sys-status {
    flex-grow: 1;
  }

  /* Stack header elements cleanly */
  /* .term-header { */
  /*   flex-direction: column; */
  /*   padding: 0.5rem; */
  /*   font-size: 0.75rem; */
  /*   gap: 4px; */
  /*   text-align: center; */
  /* } */
  /* Stack header elements cleanly */
  .term-header {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    gap: 8px;
  }

  .term-header div {
    width: 100%;
  }

  /* Optimize main container output padding */
  .term-main {
    padding: 0.75rem;
  }

  .term-logs {
    font-size: 0.85rem; /* Keep text readable without horizontal scrolling */
  }


  /* Stack terminal prompt and input box cleanly so text does not squish */
  .term-input-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .term-prompt {
    font-size: 0.85rem;
    margin-right: 0.4rem;
  }
  /* Gracefully hide overflow for long line dividers on mobile viewports */
  .log-row {
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
  }

  /* Preserve wrapping specifically for actual text logs, letting only pure dividers clip */
  .log-row:not(:contains("====")):not(:contains("----")):not(:contains("====")) {
    white-space: normal !important;
    word-break: break-all !important;
  }

  .term-input-field {
    font-size: 0.9rem !important;
    padding: 4px 6px !important;
    width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .term-input-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .term-input-field {
    font-size: 0.9rem !important;
    padding: 4px 6px !important;
    width: 100% !important;
  }
}