/* ═══════════════════════════════════════════════════════════════════
   OBSIDIA × H&I BALAM — osTicket Full Rebrand
   Detection & Response Fabric
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --obs-navy:    #0a1628;
  --obs-navy2:   #0d2044;
  --obs-navy3:   #112255;
  --obs-cyan:    #00d4e0;
  --obs-cyan2:   #17e8e8;
  --obs-cyan3:   #4af0f0;
  --obs-white:   #ffffff;
  --obs-light:   #c8dde8;
  --obs-muted:   #7a9bb5;
  --obs-surface: #f0f7fa;
  --obs-border:  #dce8f0;
  --obs-crit:    #e53935;
  --obs-high:    #f57c00;
  --obs-med:     #f9a825;
  --obs-low:     #2e7d32;
}

/* ── Base ────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  background: #eef4f8 !important;
  color: #1a2a3a !important;
}

/* ── Header / Logo bar ───────────────────────────────────────────── */
#header {
  background: linear-gradient(135deg, var(--obs-navy) 0%, var(--obs-navy2) 100%) !important;
  border-bottom: 2px solid var(--obs-cyan) !important;
  padding: 0 24px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
}

#header::after {
  content: 'H&I BALAM · Security Operations';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--obs-muted);
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 500;
}

#logo {
  display: flex !important;
  align-items: center !important;
}

#logo img {
  display: none !important; /* replaced by CSS logo below */
}

#logo::before {
  content: none !important;
  display: none !important;
}

#logo::after {
  content: none !important;
  display: none !important;
}

#header .pull-right p {
  color: var(--obs-light) !important;
}

#header .pull-right a {
  color: var(--obs-cyan) !important;
  text-decoration: none;
}

#header .pull-right a:hover {
  color: var(--obs-cyan2) !important;
  text-decoration: underline;
}

/* ── Nav bar ─────────────────────────────────────────────────────── */
#nav {
  background: var(--obs-navy3) !important;
  border-bottom: 1px solid rgba(0,212,224,0.2) !important;
  padding: 0 16px !important;
  margin: 0 !important;
}

#nav li {
  display: inline-block !important;
  list-style: none !important;
}

#nav li a {
  display: inline-block !important;
  padding: 10px 18px !important;
  color: var(--obs-light) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s;
}

#nav li a:hover,
#nav li a.active {
  color: var(--obs-cyan) !important;
  border-bottom-color: var(--obs-cyan) !important;
  background: rgba(0,212,224,0.06) !important;
}

/* ── Content area ────────────────────────────────────────────────── */
#content {
  background: #ffffff !important;
  border: 1px solid var(--obs-border) !important;
  border-radius: 8px !important;
  margin: 20px auto !important;
  padding: 28px 32px !important;
  max-width: 1100px !important;
  box-shadow: 0 2px 12px rgba(10,22,40,0.08) !important;
}

h1, h2, h3 {
  color: var(--obs-navy) !important;
  font-family: 'Inter', sans-serif !important;
}

h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--obs-cyan) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn,
input[type=submit],
input[type=button],
a.btn {
  background: linear-gradient(135deg, var(--obs-navy2) 0%, var(--obs-navy3) 100%) !important;
  color: var(--obs-cyan) !important;
  border: 1px solid var(--obs-cyan) !important;
  border-radius: 5px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-transform: uppercase !important;
}

.btn:hover,
input[type=submit]:hover,
a.btn:hover {
  background: var(--obs-cyan) !important;
  color: var(--obs-navy) !important;
  box-shadow: 0 0 12px rgba(0,212,224,0.4) !important;
}

/* ── Inputs ──────────────────────────────────────────────────────── */
input[type=text],
input[type=email],
input[type=password],
input[type=search],
textarea,
select {
  border: 1px solid var(--obs-border) !important;
  border-radius: 5px !important;
  font-family: 'Inter', sans-serif !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  background: #fafdff !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--obs-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,212,224,0.15) !important;
  outline: none !important;
}

/* ── Tables ──────────────────────────────────────────────────────── */
table.list {
  border-collapse: collapse !important;
  width: 100% !important;
}

table.list thead th {
  background: var(--obs-navy) !important;
  color: var(--obs-cyan) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 10px 14px !important;
  text-transform: uppercase !important;
  border: none !important;
}

table.list tbody tr:nth-child(even) {
  background: #f4fafd !important;
}

table.list tbody tr:hover {
  background: #e8f4f8 !important;
}

table.list td {
  border-bottom: 1px solid var(--obs-border) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
#footer,
.footer {
  background: var(--obs-navy) !important;
  color: var(--obs-muted) !important;
  text-align: center !important;
  padding: 16px !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  border-top: 1px solid rgba(0,212,224,0.2) !important;
  margin-top: 40px !important;
}

#footer a,
.footer a {
  color: var(--obs-cyan) !important;
  text-decoration: none !important;
}

/* ── "Powered by osTicket" → reemplazar con OBSIDIA ─────────────── */
img[src*="poweredby"] {
  display: none !important;
}

#footer::before {
  content: '⬡  OBSIDIA · Detection & Response Fabric  ·  H&I BALAM Security Operations  ⬡';
  display: block;
  color: var(--obs-cyan);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

/* ── Error/Notice bars ───────────────────────────────────────────── */
.error_bar {
  background: #fdecea !important;
  border-left: 4px solid var(--obs-crit) !important;
  color: #c62828 !important;
  padding: 10px 16px !important;
  border-radius: 4px !important;
  margin-bottom: 16px !important;
}

.notice_bar,
.warning_bar {
  background: #fff8e1 !important;
  border-left: 4px solid var(--obs-med) !important;
  color: #f57f17 !important;
  padding: 10px 16px !important;
  border-radius: 4px !important;
  margin-bottom: 16px !important;
}

/* ── Open ticket form ────────────────────────────────────────────── */
#open-form fieldset legend {
  color: var(--obs-navy) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--obs-cyan) !important;
  padding-bottom: 4px !important;
}

/* ── Login box ───────────────────────────────────────────────────── */
.login-box {
  background: #f8fcff !important;
  border: 1px solid var(--obs-border) !important;
  border-top: 3px solid var(--obs-cyan) !important;
  border-radius: 8px !important;
  padding: 24px !important;
}

/* ── Page background body ────────────────────────────────────────── */
#container {
  min-height: 100vh;
  background: linear-gradient(180deg, #eef4f8 0%, #e4eef5 100%);
}

/* ── Fix header layout: push user info to right, logo to left ────── */
#header {
  justify-content: flex-start !important;
}

#header .pull-right,
#header p.pull-right {
  position: absolute !important;
  right: 180px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  color: var(--obs-muted) !important;
  margin: 0 !important;
}

#header .pull-right a,
#header p.pull-right a {
  color: var(--obs-cyan) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

#header a#logo {
  margin-left: 24px !important;
  text-decoration: none !important;
}

/* ── Client portal nav: hide old icons, clean button style ────────── */
#nav li a img,
#nav li a .icon {
  display: none !important;
}

#nav {
  padding: 0 !important;
  margin: 0 !important;
}

#nav li {
  margin: 0 !important;
}

#nav li a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 12px 22px !important;
  color: rgba(255,255,255,0.65) !important;
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

#nav li.active a,
#nav li a:hover,
#nav li a.active {
  color: #00d4e0 !important;
  border-bottom-color: #00d4e0 !important;
  background: rgba(0,212,224,0.07) !important;
}

/* ── Remove old tab pill/selected style ─────────────────────────── */
#nav li a.selected,
#nav li.selected a {
  background: rgba(0,212,224,0.1) !important;
  color: #00d4e0 !important;
  border-bottom: 2px solid #00d4e0 !important;
  border-radius: 0 !important;
}

/* ── Client portal nav: make ALL tabs clearly visible ─────────────── */
#nav,
ul#nav {
  overflow: visible !important;
}

#nav li,
#nav li a,
ul#nav li,
ul#nav li a {
  height: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* Inactive tabs: bright enough to read */
#nav li a,
ul#nav li a {
  color: rgba(180, 220, 230, 0.9) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 11px 20px !important;
  display: inline-block !important;
  letter-spacing: 0.3px !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s !important;
}

/* Active tab: full cyan */
#nav li.active a,
#nav li a.active,
#nav li a.selected,
#nav li.selected a {
  color: #00d4e0 !important;
  border-bottom: 2px solid #00d4e0 !important;
  font-weight: 600 !important;
}

/* Hover */
#nav li a:hover {
  color: #00d4e0 !important;
  border-bottom-color: rgba(0,212,224,0.5) !important;
  background: rgba(0,212,224,0.05) !important;
}

/* Kill old active tab white background on <li> */
#nav li.active,
#nav li.selected,
#nav li:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}