/* ============================================================
   ELIM LAB — Terminal Theme
   components.css: All component classes
   ============================================================ */

/* ============================================================
   NAVIGATION — fixed top bar
   ============================================================ */
.nav {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    background:       rgba(10, 10, 10, 0.96);
    border-bottom:    1px solid var(--green-border);
    z-index:          var(--z-navigation);
    padding:          0 1.5rem;
    height:           var(--nav-height);
    display:          flex;
    align-items:      center;
    backdrop-filter:  blur(4px);
    transition:       border-color var(--transition-base);
}

.nav__container {
    max-width:       var(--container-wide-max-width);
    margin:          0 auto;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    width:           100%;
}

/* Logo */
.nav__logo {
    font-weight:     var(--font-weight-extrabold);
    font-size:       var(--font-size-lg);
    letter-spacing:  0;
    text-decoration: none;
    color:           var(--text-primary);
    z-index:         var(--z-nav-toggle);
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    transition:      color var(--transition-base);
}
.nav__logo:hover {
    color: var(--green);
}
/* Terminal '> ' prefix for logo */
.nav__logo::before {
    content:     '> ';
    color:       var(--text-dim);
    font-weight: var(--font-weight-normal);
}

/* Blinking status dot */
.nav__logo-dot {
    width:         7px;
    height:        7px;
    background:    var(--green);
    border-radius: 50%;
    animation:     pulse-dot 2s infinite;
    flex-shrink:   0;
}

/* Mobile nav panel — slides in from right */
.nav__links {
    position:        fixed;
    top:             0;
    right:           0;
    bottom:          0;
    width:           80%;
    max-width:       var(--mobile-menu-max-width);
    background:      var(--bg-1);
    border-left:     1px solid var(--green-border);
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             2.5rem;
    list-style:      none;
    transform:       translateX(100%);
    transition:      transform 0.25s ease-in-out, background var(--transition-base);
    z-index:         var(--z-nav-menu);
    display:         flex;
    will-change:     transform;
    backface-visibility: hidden;
}
body.menu-open .nav__links {
    transform: translateX(0);
}

.nav__links a {
    color:           var(--text-dim);
    text-decoration: none;
    font-size:       var(--font-size-xl);
    transition:      color var(--transition-base);
    letter-spacing:  var(--letter-spacing-wide);
}
.nav__links a:hover {
    color: var(--green);
}

/* Contact button in nav */
.nav__contact {
    display:        inline-block;
    font-weight:    var(--font-weight-semibold);
    font-size:      var(--font-size-sm);
    font-family:    var(--font-family-base);
    color:          var(--green);
    text-decoration: none;
    padding:        0.5rem 1.25rem;
    border:         1px solid var(--green-border);
    transition:     all var(--transition-base);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin-top:     1rem;
}
.nav__contact:hover {
    background:   var(--green-glow);
    border-color: var(--green);
    color:        var(--green);
}

/* Language switcher */
.nav__lang-switcher a {
    text-decoration: none;
    color:           var(--text-dim);
    padding:         0.2rem 0.25rem;
    cursor:          pointer;
    font-size:       var(--font-size-xs);
    letter-spacing:  var(--letter-spacing-wide);
    transition:      color var(--transition-base);
}
.nav__lang-switcher a.active {
    font-weight: var(--font-weight-bold);
    color:       var(--green);
}
.nav__lang-switcher a:hover {
    color: var(--green);
}

/* Theme switcher */
.nav__theme-switcher {
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     0.4rem;
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       var(--text-dim);
    transition:  color var(--transition-base);
}
.nav__theme-switcher:hover {
    color: var(--green);
}
.nav__theme-switcher svg {
    stroke-width: 1.5;
}
.nav__theme-icon--sun  { display: none; }
.nav__theme-icon--moon { display: block; }
html.dark-mode .nav__theme-icon--sun  { display: block; }
html.dark-mode .nav__theme-icon--moon { display: none; }

/* ============================================================
   DROPDOWN MENU
   ============================================================ */
.nav__dropdown {
    position: relative;
}

.nav__dropdown-toggle {
    background:  none;
    border:      none;
    color:       var(--text-dim);
    font-size:   var(--font-size-xl);
    cursor:      pointer;
    padding:     0;
    font-family: var(--font-family-base);
    transition:  color var(--transition-base);
    letter-spacing: var(--letter-spacing-wide);
}
.nav__dropdown-toggle:hover {
    color: var(--green);
}

.nav__dropdown-arrow {
    display:     inline-block;
    margin-left: 0.2rem;
    transition:  transform 0.2s;
    font-size:   0.7em;
    color:       var(--text-dim);
}
.nav__dropdown-toggle[aria-expanded="true"] .nav__dropdown-arrow {
    transform: rotate(180deg);
}

/* Mobile dropdown (max-height animation) */
.nav__dropdown-menu {
    list-style:  none;
    padding:     0;
    margin:      0.75rem 0 0;
    max-height:  0;
    overflow:    hidden;
    transition:  max-height 0.25s ease;
}
.nav__dropdown-menu.show {
    max-height: 500px;
}
.nav__dropdown-menu li {
    margin: 0;
}
.nav__dropdown-menu a {
    display:    block;
    padding:    0.6rem 0 0.6rem 1.25rem;
    font-size:  var(--font-size-base);
    color:      var(--text-dim);
    text-decoration: none;
    transition: color var(--transition-base);
    border-left: 2px solid transparent;
}
.nav__dropdown-menu a:hover {
    color:        var(--green);
    border-color: var(--green);
}

/* ============================================================
   HAMBURGER TOGGLE
   ============================================================ */
.nav__mobile-toggle {
    display:    block;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    0;
    z-index:    var(--z-nav-toggle);
}
.nav__mobile-toggle span {
    display:     block;
    width:       22px;
    height:      1px;
    background:  var(--text-dim);
    margin:      5px 0;
    transition:  all 0.25s;
}
.nav__mobile-toggle:hover span {
    background: var(--green);
}
body.menu-open .nav__mobile-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    background: var(--green);
}
body.menu-open .nav__mobile-toggle span:nth-child(2) {
    opacity: 0;
}
body.menu-open .nav__mobile-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    background: var(--green);
}

/* Nav overlay (darkens background when mobile menu open) */
.nav__overlay {
    position:    fixed;
    inset:       0;
    background:  rgba(0, 0, 0, 0.75);
    z-index:     var(--z-nav-overlay);
    opacity:     0;
    visibility:  hidden;
    transition:  opacity var(--transition-slow), visibility var(--transition-slow);
    will-change: opacity;
    pointer-events: none;
}
body.menu-open .nav__overlay {
    opacity:       1;
    visibility:    visible;
    pointer-events: auto;
}

/* ============================================================
   SIDEBAR (shown on very wide screens)
   ============================================================ */
.sidebar {
    display: none;
}

/* ============================================================
   TERMINAL WINDOW CHROME
   Used by any .term-window container
   ============================================================ */
.term-window {
    border:         1px solid var(--green-border);
    background:     var(--bg-1);
    overflow:       hidden;
}

.term-window__bar {
    background:      var(--bg-3);
    border-bottom:   1px solid var(--green-border);
    padding:         0.5rem 0.875rem;
    display:         flex;
    align-items:     center;
    gap:             0.4rem;
    user-select:     none;
}

/* Traffic light dots */
.term-window__dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}
.term-window__dot--close  { background: #EF4444; }
.term-window__dot--min    { background: #F59E0B; }
.term-window__dot--max    { background: #22C55E; }

.term-window__title {
    margin-left:  auto;
    margin-right: auto;
    font-size:    var(--font-size-xs);
    color:        var(--text-dim);
    letter-spacing: var(--letter-spacing-wide);
}

.term-window__body {
    padding: 1.25rem;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.badge {
    display:        inline-block;
    padding:        0.15rem 0.6rem;
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-semibold);
    font-family:    var(--font-family-base);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    border:         1px solid;
}

.badge--active,
.badge--ok {
    background:   rgba(34, 197, 94, 0.1);
    color:        var(--green);
    border-color: var(--green-border);
}

.badge--beta,
.badge--warn {
    background:   rgba(245, 158, 11, 0.1);
    color:        var(--amber);
    border-color: rgba(245, 158, 11, 0.3);
}

.badge--err,
.badge--error {
    background:   rgba(239, 68, 68, 0.1);
    color:        var(--red-terminal);
    border-color: rgba(239, 68, 68, 0.3);
}

.badge--info {
    background:   rgba(6, 182, 212, 0.1);
    color:        var(--cyan);
    border-color: rgba(6, 182, 212, 0.3);
}

/* ============================================================
   PROGRESS BARS — Unicode block style
   ============================================================ */
.prog-bar {
    display:    flex;
    align-items: center;
    gap:         0.75rem;
    font-size:   var(--font-size-sm);
}

.prog-bar__label {
    color:     var(--text-dim);
    min-width: 8ch;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.prog-bar__track {
    flex:        1;
    height:      6px;
    background:  var(--bg-3);
    border:      1px solid var(--green-border);
    position:    relative;
    overflow:    hidden;
}

.prog-bar__fill {
    position:   absolute;
    left:       0;
    top:        0;
    height:     100%;
    background: var(--green);
    transition: width 0.6s ease;
}

.prog-bar__value {
    color:     var(--green);
    font-size: var(--font-size-xs);
    min-width: 4ch;
    text-align: right;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
/* styles live in main.css — .hero, .hero__title, etc. */

/* Blinking cursor on hero title */
.hero__cursor {
    display:    inline-block;
    width:      0.55em;
    height:     1em;
    background: var(--green);
    margin-left: 2px;
    animation:  blink-cursor 1s step-end infinite;
    vertical-align: text-bottom;
}

/* ============================================================
   GRID SYSTEM
   ============================================================ */
/* base .grid lives in main.css */
/* Multi-column variants */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   TABLE STYLING
   ============================================================ */
/* base .table lives in main.css */

table.table {
    display:         table;
    white-space:     normal;
    width:           100%;
    border-collapse: collapse;
}

/* ============================================================
   TERMINAL PROMPT UTILITIES
   ============================================================ */
/* Add '$ ' before any element with this class */
.term-prompt::before {
    content:      '$ ';
    color:        var(--text-dim);
    user-select:  none;
    font-weight:  var(--font-weight-normal);
}

/* Add '// ' before section labels */
.term-comment::before {
    content:     '// ';
    color:       var(--text-dim);
    user-select: none;
}

/* Blinking text cursor */
.term-cursor::after {
    content:     '_';
    color:       var(--green);
    animation:   blink-cursor 1s step-end infinite;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
/* base .form, .form__* styles live in main.css */

/* Inline success state */
.form__success-msg {
    display:    none;
    padding:    1rem;
    border:     1px solid var(--green-border);
    background: var(--status-success-bg);
    color:      var(--green);
    font-size:  var(--font-size-sm);
    margin-top: 1.5rem;
}
.form__success-msg.visible {
    display: block;
}
.form__success-msg::before {
    content:      '[OK] ';
    font-weight:  var(--font-weight-bold);
}

/* ============================================================
   FOOTER
   ============================================================ */
/* base .footer styles live in main.css */

/* Single-line minimal variant */
.footer--minimal {
    padding:    1rem 0;
    border-top: 1px solid var(--green-border);
}
.footer--minimal .footer__bottom {
    padding-top: 0;
    border-top:  none;
}

/* ============================================================
   CARD — generic terminal card
   ============================================================ */
.card {
    background:  var(--bg-1);
    border:      1px solid var(--green-border);
    padding:     1.5rem;
    transition:  border-color var(--transition-base), background var(--transition-base);
}
.card:hover {
    border-color: var(--green-dim);
    background:   var(--bg-2);
}

.card__label {
    font-size:      var(--font-size-xs);
    color:          var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom:  0.5rem;
}
.card__label::before {
    content: '// ';
    color:   var(--text-dim);
}

.card__title {
    font-size:     var(--font-size-lg);
    font-weight:   var(--font-weight-bold);
    color:         var(--text-primary);
    margin-bottom: 0.75rem;
}

.card__body {
    color:       var(--text-dim);
    font-size:   var(--font-size-sm);
    line-height: 1.7;
}

/* ============================================================
   TAGS
   ============================================================ */
.tag {
    display:        inline-block;
    padding:        0.2rem 0.6rem;
    background:     var(--bg-3);
    border:         1px solid var(--green-border);
    font-size:      var(--font-size-xs);
    color:          var(--text-dim);
    letter-spacing: var(--letter-spacing-wide);
    transition:     border-color var(--transition-base), color var(--transition-base);
}
.tag:hover {
    border-color: var(--green);
    color:        var(--green);
}

/* ============================================================
   BUTTON VARIANTS
   ============================================================ */
.btn {
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
    padding:        0.75rem 1.5rem;
    font-family:    var(--font-family-base);
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    text-decoration: none;
    cursor:         pointer;
    transition:     all var(--transition-base);
    border:         1px solid var(--green-border);
}
.btn::before {
    content: '$ ';
    color:   var(--text-dim);
    font-weight: var(--font-weight-normal);
}

/* Ghost (default) */
.btn--ghost {
    background: transparent;
    color:      var(--green);
}
.btn--ghost:hover {
    background: var(--green-glow);
    border-color: var(--green);
}

/* Primary (filled) */
.btn--primary {
    background:   var(--green);
    color:        #0A0A0A;
    border-color: var(--green);
}
.btn--primary::before {
    color: rgba(0,0,0,0.5);
}
.btn--primary:hover {
    background: transparent;
    color:      var(--green);
}

/* Danger */
.btn--danger {
    background:   transparent;
    color:        var(--red-terminal);
    border-color: rgba(239, 68, 68, 0.3);
}
.btn--danger:hover {
    background:   rgba(239, 68, 68, 0.1);
    border-color: var(--red-terminal);
}

/* Disabled state */
.btn:disabled,
.btn--disabled {
    opacity: 0.4;
    cursor:  not-allowed;
    pointer-events: none;
}

/* ============================================================
   SECTION DIVIDERS
   ============================================================ */
.divider {
    border:     none;
    border-top: 1px solid var(--green-border);
    margin:     3rem 0;
}

/* ============================================================
   CODE BLOCKS
   ============================================================ */
pre,
code {
    font-family: var(--font-family-base);
    font-size:   var(--font-size-sm);
}

pre {
    background:   var(--bg-2);
    border:       1px solid var(--green-border);
    border-left:  2px solid var(--green);
    padding:      1rem 1.25rem;
    overflow-x:   auto;
    color:        var(--text-primary);
    line-height:  1.6;
}

code {
    background: var(--bg-2);
    border:     1px solid var(--green-border);
    padding:    0.1em 0.35em;
    color:      var(--green-dim);
}

pre code {
    background: none;
    border:     none;
    padding:    0;
    color:      inherit;
}