/* JTProd chrome — matches Joytech (JTBI) design language.
   Values mirrored from JTBI app/static/css/main.css for visual consistency.
   Inline styles preferred for page components per project rails; the shared
   header/nav + login chrome live here as classes, same as JTBI. */

/* -- RESET & BASE ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: clamp(13px, 1.4vw, 15px); }
body { font-family: Arial, Helvetica, sans-serif; background: #f0f4f8;
       color: #1e293b; line-height: 1.5; }
a { color: #00AEEF; text-decoration: none; }
a:hover { text-decoration: underline; }

/* -- NAVBAR ------------------------------------------------------ */
.navbar { background: #00a8e2; display: flex; align-items: center;
          padding: 0 16px; height: 50px; position: sticky; top: 0; z-index: 100;
          width: 100%; }
.nav-left { display: flex; align-items: center; flex: 1; gap: 0; }
.nav-logo { display: flex; align-items: center; margin-right: 20px;
            background-color: #00A8E2; padding: 0 12px; height: 50px; }
.nav-logo img { display: block; }
.nav-links { display: flex; gap: 2px; }
.nav-link { color: rgba(255,255,255,.72); font-size: 13px; padding: 0 14px;
            height: 50px; display: flex; align-items: center;
            border-bottom: 3px solid transparent; text-decoration: none;
            transition: color .15s; }
.nav-link:hover { color: #fff; text-decoration: none; }
.nav-link.active { color: #fff; border-bottom-color: #fff; font-weight: 700; }

.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-username { color: #fff; font-size: 13px; }
.nav-badge { background: rgba(255,255,255,.28); color: #fff; font-size: 11px;
             padding: 2px 9px; border-radius: 4px; }
.nav-logout { color: #fff; font-size: 12px; padding: 4px 12px;
              border: 1.5px solid rgba(255,255,255,.6); border-radius: 4px;
              text-decoration: none; }
.nav-logout:hover { background: rgba(255,255,255,.15); text-decoration: none; }

.version-badge { font-size:10px; color:rgba(255,255,255,.6); text-decoration:none;
                 padding:2px 7px; border:1px solid rgba(255,255,255,.25);
                 border-radius:10px; margin-left:2px; position:relative;
                 white-space:nowrap; }
.version-badge:hover { color:#fff; border-color:rgba(255,255,255,.6); text-decoration:none; }
.version-dot { position:absolute; top:-3px; right:-3px; width:7px; height:7px;
               background:#10b981; border-radius:50%; border:1px solid #008bbf; }

/* -- FLASH MESSAGES ---------------------------------------------- */
.flash-container { padding: 0 16px; margin-top: 8px; }
.flash { padding: 10px 14px; border-radius: 8px; font-size: 13px;
         display: flex; justify-content: space-between; align-items: center;
         margin-bottom: 8px; }
.flash-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-info    { background: #e8f6fd; color: #0076a8; border: 1px solid #7dd3fc; }
.flash-close   { background: none; border: none; cursor: pointer; font-size: 16px;
                 color: inherit; opacity: .6; }
/* success messages fade out after 10s (see flashMsg); warnings and errors stay
   until the user closes them */
.flash { transition: opacity .3s ease, transform .3s ease; }
.flash-fade { opacity: 0; transform: translateY(-4px); }

/* -- NAV DROPDOWN ------------------------------------------------ */
.nav-menu { position: relative; display: inline-flex; }
/* The trigger IS a .nav-link and must look like one. Do NOT reintroduce a
   `font:` shorthand here: it resets size and line-height to the body's and the
   three nav items stop sharing a baseline. Only the family needs inheriting -
   the browser's own button style supplies one, and nothing else here does. */
.nav-menu-btn { background: none; cursor: pointer;
                font-family: inherit; line-height: inherit;
                /* the transparent bottom border is what .nav-link centres its
                   text against, and it is where the active underline appears -
                   a blanket `border: none` drops the text 1.5px below the
                   other items and leaves the trigger with nowhere to show it */
                border: none; border-bottom: 3px solid transparent;
                display: inline-flex; align-items: center; gap: 5px; }
/* proportional to the label, and with line-height 1 so it can never make the
   trigger taller than a plain link */
.nav-menu-btn .caret { font-size: .78em; line-height: 1; opacity: .85; }
.nav-menu-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
                  min-width: 208px; background: #fff; border: 1px solid #e2e8f0;
                  border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.16);
                  padding: 6px; }
.nav-menu-panel[hidden] { display: none; }
.nav-menu-group { font-size: 10px; font-weight: 800; text-transform: uppercase;
                  letter-spacing: .06em; color: #94a3b8; padding: 7px 10px 3px; }
.nav-menu-item { display: block; padding: 8px 10px; border-radius: 7px;
                 font-size: 13px; color: #334155; text-decoration: none; }
.nav-menu-item:hover, .nav-menu-item:focus { background: #eef6fb; color: #0076a8;
                 text-decoration: none; outline: none; }
.nav-menu-sep { height: 1px; background: #e2e8f0; margin: 6px 4px; }

/* -- BUTTONS ----------------------------------------------------- */
.btn { font-size: 12px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
       border: 1px solid #cbd5e1; color: #475569; background: #fff;
       font-family: inherit; display: inline-block; text-align: center; }
.btn:hover { background: #f8fafc; text-decoration: none; color: #475569; }
.btn-primary { background: #00AEEF; border-color: #00AEEF; color: #fff; }
.btn-primary:hover { background: #0099d4; color: #fff; }
.btn-full { width: 100%; }

/* -- FORMS ------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12.5px; font-weight: 600; color: #334155; }
.form-group input, .form-group select, .form-group textarea {
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 8px 12px;
  font-size: 13px; font-family: inherit; color: #1e293b;
  transition: border-color .15s; width: 100%; }
.form-group input:focus, .form-group select:focus {
  outline: none; border-color: #00AEEF;
  box-shadow: 0 0 0 3px rgba(0,174,239,.15); }

/* -- LOGIN PAGE -------------------------------------------------- */
.login-page { background: #00AEEF; min-height: 100vh; display: flex;
              align-items: center; justify-content: center; }
.login-wrap { width: 100%; max-width: 420px; padding: 24px; }
.login-card { background: #fff; border-radius: 16px; padding: 36px 32px; }
.login-logo { display: flex; justify-content: center; margin-bottom: 4px; }
.login-subtitle { text-align: center; font-size: 13px; color: #64748b; margin-bottom: 28px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-note { text-align: center; font-size: 11px; color: #94a3b8; margin-top: 20px; }

/* -- PAGE LAYOUT ------------------------------------------------- */
.page-wrap { padding: 20px 16px; max-width: 1100px; }
.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: 20px; font-weight: 700; color: #1e293b; }
.page-sub { font-size: 13px; color: #64748b; margin-top: 4px; }