/* ============================================================
   OEM Support Solutions - Enterprise Portal CSS v2.0
   ============================================================ */

/* ---------- VARIABLES ---------- */
:root {
  --oem-navy: #0d2240;
  --oem-blue: #1a73e8;
  --oem-blue-hover: #1557b0;
  --oem-blue-light: #e8f0fe;
  --oem-gray-50: #f8f9fa;
  --oem-gray-100: #f1f3f4;
  --oem-gray-200: #e8eaed;
  --oem-gray-400: #9aa0a6;
  --oem-gray-600: #5f6368;
  --oem-gray-800: #3c4043;
  --oem-gray-900: #202124;
  --oem-white: #ffffff;
  --oem-red: #d93025;
  --oem-green: #1e8e3e;
  --oem-radius: 8px;
  --oem-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --oem-shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --oem-shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
  --oem-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- GLOBAL RESETS FOR CLIENT PORTAL ---------- */
body {
  font-family: var(--oem-font) !important;
  background: var(--oem-gray-50) !important;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---------- HEADER / TOPBAR ---------- */
#header {
  background: var(--oem-navy) !important;
  padding: 0 24px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#header a#logo {
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
  padding: 0 !important;
}

#header a#logo img {
  max-height: 36px !important;
  width: auto !important;
}

#header .pull-right,
#header .pull-right.flush-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  float: none !important;
}

#header .pull-right p {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#header .pull-right a {
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: color 0.2s;
}

#header .pull-right a:hover {
  color: var(--oem-white) !important;
}

#header .oem-user-name {
  color: var(--oem-white) !important;
  font-weight: 500;
}

/* Flag icons in header */
#header a.flag {
  display: inline-block !important;
  opacity: 0.75;
  transition: opacity 0.2s;
}

#header a.flag:hover {
  opacity: 1;
}

/* ---------- NAVIGATION BAR ---------- */
#nav {
  background: var(--oem-white) !important;
  border-bottom: 1px solid var(--oem-gray-200) !important;
  margin: 0 !important;
  padding: 0 24px !important;
  list-style: none !important;
  display: flex !important;
  gap: 0 !important;
  box-shadow: var(--oem-shadow-sm);
}

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

#nav li a {
  display: block !important;
  padding: 12px 20px !important;
  color: var(--oem-gray-600) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

#nav li a:hover,
#nav li a.active,
#nav li.active a {
  color: var(--oem-blue) !important;
  border-bottom-color: var(--oem-blue) !important;
  background: var(--oem-blue-light) !important;
}

/* "Open a New Ticket" highlight */
#nav li a[href*="open.php"] {
  background: var(--oem-blue) !important;
  color: var(--oem-white) !important;
  border-radius: var(--oem-radius) !important;
  margin: 6px 4px !important;
  padding: 8px 20px !important;
  border-bottom: none !important;
  font-weight: 600 !important;
}

#nav li a[href*="open.php"]:hover {
  background: var(--oem-blue-hover) !important;
  color: var(--oem-white) !important;
}

/* ---------- CONTENT AREA ---------- */
#content {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
}

/* ---------- CONTAINER ---------- */
#container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- FOOTER ---------- */
#footer {
  background: var(--oem-white) !important;
  border-top: 1px solid var(--oem-gray-200) !important;
  padding: 16px 24px !important;
  text-align: center !important;
  color: var(--oem-gray-400) !important;
  font-size: 12px !important;
}

/* ==========================================================
   LANDING PAGE - SPLIT LAYOUT (login.inc.php)
   ========================================================== */

/* Hide the default osTicket landing content on login page */
body.login-page #landing_page,
body.login-page #content > h1,
body.login-page #content > h2,
body.login-page #content > h3,
body.login-page #content > p:not(.oem-brand-desc) {
  display: none !important;
}

/* Landing wrap - full width split */
.oem-landing-wrap {
  display: flex !important;
  min-height: calc(100vh - 140px);
  background: var(--oem-white);
  border-radius: var(--oem-radius);
  overflow: hidden;
  box-shadow: var(--oem-shadow-lg);
  max-width: 1100px;
  margin: 0 auto;
}

/* Left panel - brand */
.oem-brand-panel {
  flex: 1.2;
  background: linear-gradient(160deg, var(--oem-navy) 0%, #15345e 60%, #1a4175 100%);
  color: var(--oem-white);
  padding: 48px 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Subtle pattern overlay */
.oem-brand-panel::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(26,115,232,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.oem-brand-inner {
  position: relative;
  z-index: 1;
}

.oem-brand-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}

.oem-brand-headline {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 20px;
}

.oem-brand-headline em {
  font-style: normal;
  color: #64b5f6;
}

.oem-brand-desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
  margin-bottom: 28px;
  max-width: 420px;
}

.oem-feature-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.oem-feature-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}

.oem-feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(26,115,232,0.3);
  border: 2px solid #64b5f6;
}

.oem-feature-list li::after {
  content: '\2713';
  position: absolute;
  left: 3px;
  top: 3px;
  font-size: 11px;
  color: #64b5f6;
  font-weight: 700;
}

/* Vendor footer */
.oem-brand-footer {
  position: relative;
  z-index: 1;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  text-align: center;
}

/* Right panel - login */
.oem-login-panel {
  flex: 0.8;
  background: var(--oem-white);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 360px;
}

.oem-login-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--oem-gray-900);
  margin-bottom: 6px;
}

.oem-login-sub {
  font-size: 14px;
  color: var(--oem-gray-600);
  margin-bottom: 32px;
}

/* Form elements */
.oem-form-group {
  margin-bottom: 20px;
}

.oem-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--oem-gray-800);
  margin-bottom: 6px;
}

.oem-form-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--oem-font);
  border: 1.5px solid var(--oem-gray-200);
  border-radius: 6px;
  background: var(--oem-gray-50);
  color: var(--oem-gray-900);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.oem-form-input:focus {
  border-color: var(--oem-blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
  background: var(--oem-white);
}

.oem-form-input::placeholder {
  color: var(--oem-gray-400);
}

/* Login button */
.oem-login-btn {
  width: 100%;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--oem-font);
  color: var(--oem-white);
  background: var(--oem-blue);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  margin-top: 8px;
}

.oem-login-btn:hover {
  background: var(--oem-blue-hover);
  box-shadow: var(--oem-shadow-md);
}

.oem-login-btn:active {
  transform: translateY(1px);
}

/* Login footer links */
.oem-login-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--oem-gray-200);
}

.oem-login-footer a {
  font-size: 13px;
  color: var(--oem-blue);
  text-decoration: none;
  transition: color 0.2s;
}

.oem-login-footer a:hover {
  color: var(--oem-blue-hover);
  text-decoration: underline;
}

/* ---------- ERROR MESSAGES ON LOGIN ---------- */
#msg_error {
  background: #fce8e6 !important;
  color: var(--oem-red) !important;
  border: 1px solid #f5c6cb !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  font-size: 14px !important;
}

#msg_notice {
  background: var(--oem-blue-light) !important;
  color: var(--oem-blue) !important;
  border: 1px solid #b8d4f0 !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  font-size: 14px !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .oem-landing-wrap {
    flex-direction: column;
    min-height: auto;
    max-width: 480px;
    margin: 20px auto;
  }

  .oem-brand-panel {
    padding: 32px 28px 24px;
  }

  .oem-brand-headline {
    font-size: 24px;
  }

  .oem-login-panel {
    min-width: auto;
    padding: 32px 28px;
  }
}

/* ---------- TICKET LIST / TABLE OVERRIDES ---------- */
table.list {
  border-collapse: collapse !important;
  width: 100% !important;
}

table.list thead th {
  background: var(--oem-gray-100) !important;
  color: var(--oem-gray-800) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid var(--oem-gray-200) !important;
}

table.list tbody tr {
  border-bottom: 1px solid var(--oem-gray-200) !important;
  transition: background 0.15s;
}

table.list tbody tr:hover {
  background: var(--oem-blue-light) !important;
}

table.list tbody td {
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--oem-gray-800) !important;
}

table.list tbody td a {
  color: var(--oem-blue) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

table.list tbody td a:hover {
  text-decoration: underline !important;
}

/* ---------- BUTTONS GLOBAL ---------- */
input[type="submit"],
input[type="button"],
button.green,
.button {
  background: var(--oem-blue) !important;
  color: var(--oem-white) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button.green:hover,
.button:hover {
  background: var(--oem-blue-hover) !important;
}

/* ---------- FORMS GLOBAL ---------- */
#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content textarea,
#content select {
  font-family: var(--oem-font) !important;
  border: 1.5px solid var(--oem-gray-200) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: border-color 0.2s !important;
}

#content input[type="text"]:focus,
#content input[type="email"]:focus,
#content input[type="password"]:focus,
#content textarea:focus,
#content select:focus {
  border-color: var(--oem-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.1) !important;
}

/* ---------- HIDE DEFAULT OSTICKET BRANDING ---------- */
.poweredBy,
#poweredBy {
  display: none !important;
}

/* ---------- COPYRIGHT FOOTER ---------- */
#footer p {
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--oem-gray-400) !important;
}



/* ===== REMOVE UK FLAG ===== */



/* Login fullpage centering fix */
.oem-fullpage { min-height: 100vh !important; }
.oem-left { flex: 1 !important; }
.oem-right {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
}
.oem-right-inner {
  width: 100% !important;
  max-width: 420px !important;
}

/* ===== AUTHENTICATED PAGES LAYOUT FIX ===== */

#content {
  display: block !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 20px 24px 28px !important;
}

#content > * {
  max-width: 100% !important;
}

.oem-landing-wrap,
.oem-fullpage {
  margin: 24px auto !important;
}

/* keep homepage/login compact while normal pages use full width */
.oem-landing-wrap {
  max-width: 760px !important;
}

.oem-fullpage {
  max-width: 100% !important;
}

/* remove UK flag from top bar */


/* ===== FULL WIDTH FIX FOR AUTHENTICATED OSTICKET PAGES ===== */

html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#header,
#nav,
#footer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#content {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 20px 24px 28px !important;
  box-sizing: border-box !important;
  display: block !important;
}

#content > div,
#content > form,
#content > table,
#content .sticky.bar,
#content .thread-body,
#content .ticket-view,
#content .tickets-list {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* keep homepage compact */
.oem-landing-wrap {
  max-width: 760px !important;
  margin: 24px auto !important;
}

/* keep login screen full width */
.oem-fullpage {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}



/* =========================================================
   OEM CLIENT PORTAL - PROFESSIONAL AUTHENTICATED EXPERIENCE
   ========================================================= */

/* ---------- GLOBAL WIDTH ---------- */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#header,
#nav,
#footer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ---------- HEADER ---------- */
#header {
  min-height: 66px !important;
  padding: 0 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

#header .pull-right,
#header .pull-right.flush-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#header .pull-right p {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
}

#header a#logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 66px !important;
}

#header a#logo img {
  max-height: 30px !important;
  width: auto !important;
  opacity: 0.95 !important;
}

/* ---------- NAV ---------- */
#nav {
  min-height: 54px !important;
  align-items: center !important;
  padding: 0 22px !important;
  gap: 6px !important;
  border-bottom: 1px solid #e6e9ef !important;
}

#nav li a {
  border-radius: 10px !important;
  padding: 12px 16px !important;
  border-bottom: none !important;
  font-weight: 600 !important;
}

#nav li a:hover,
#nav li a.active,
#nav li.active a {
  background: #eef4ff !important;
  color: #1a73e8 !important;
}

#nav li a[href*="open.php"] {
  background: #1a73e8 !important;
  color: #fff !important;
  border-radius: 10px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  box-shadow: 0 4px 10px rgba(26,115,232,0.18) !important;
}

#nav li a[href*="open.php"]:hover {
  background: #1557b0 !important;
  color: #fff !important;
}

/* ---------- MAIN CONTENT ---------- */
#content {
  width: 100% !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding: 28px 28px 36px !important;
  box-sizing: border-box !important;
  display: block !important;
}

#content > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* keep landing compact */
.oem-landing-wrap {
  max-width: 760px !important;
  margin: 24px auto !important;
}

/* keep login screen premium full width */
.oem-fullpage {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ---------- TYPOGRAPHY ---------- */
#content h1,
#content h2,
#content h3 {
  color: #183153 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

#content h1,
#content h2 {
  margin-bottom: 18px !important;
}

/* ---------- FORMS / OPEN TICKET ---------- */
#content form {
  background: #ffffff !important;
  border: 1px solid #e6e9ef !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(15,23,42,0.05) !important;
  padding: 24px 26px !important;
}

#content form hr {
  border: 0 !important;
  border-top: 1px solid #edf1f6 !important;
  margin: 18px 0 !important;
}

#content label,
#content .label {
  font-weight: 600 !important;
  color: #2d3b50 !important;
}

#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="number"],
#content input[type="search"],
#content textarea,
#content select {
  border: 1px solid #d8e0ea !important;
  border-radius: 10px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#content textarea {
  min-height: 110px !important;
}

#content input:focus,
#content textarea:focus,
#content select:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12) !important;
  outline: none !important;
}

#content input[type="submit"],
#content input[type="button"],
#content button,
#content .button,
#content .btn {
  border-radius: 10px !important;
  min-height: 42px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* primary */
#content input[type="submit"],
#content button[type="submit"],
#content .button.action-button {
  background: #1a73e8 !important;
  color: #fff !important;
  border: 1px solid #1a73e8 !important;
}

#content input[type="submit"]:hover,
#content button[type="submit"]:hover,
#content .button.action-button:hover {
  background: #1557b0 !important;
  border-color: #1557b0 !important;
}

/* ---------- TABLES / TICKETS ---------- */
#content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff !important;
  border: 1px solid #e6e9ef !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 22px rgba(15,23,42,0.05) !important;
}

#content table thead th {
  background: #f7f9fc !important;
  color: #2d3b50 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-bottom: 1px solid #e6e9ef !important;
  padding: 14px 14px !important;
}

#content table tbody td {
  padding: 14px 14px !important;
  border-bottom: 1px solid #eef2f7 !important;
  vertical-align: middle !important;
}

#content table tbody tr:hover {
  background: #fafcff !important;
}

/* ---------- STICKY FILTER BAR / SEARCH AREA ---------- */
.sticky.bar,
#basic_search,
#content .searchbar,
#content .filters {
  background: #ffffff !important;
  border: 1px solid #e6e9ef !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04) !important;
  margin-bottom: 16px !important;
}

/* ---------- FOOTER ---------- */
#footer {
  padding: 18px 20px !important;
  font-size: 12px !important;
  color: #95a0ae !important;
  border-top: 1px solid #e6e9ef !important;
  background: #fff !important;
}

/* ---------- MOBILE SAFETY ---------- */
@media (max-width: 1100px) {
  #content {
    padding: 18px 16px 28px !important;
  }

  #nav {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }

  #content form {
    padding: 18px !important;
  }
}


/* ==========================================
   HOMEPAGE STRUCTURAL FIX
   ========================================== */

/* remove layout antigo baseado em table */
#content table.centered {
  width: 100% !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  table-layout: fixed !important;
}

/* garantir colunas corretas */
#content table.centered td {
  vertical-align: top !important;
}

/* coluna esquerda */
#content table.centered td:first-child {
  width: 50% !important;
  padding-right: 18px !important;
}

/* coluna direita */
#content table.centered td:last-child {
  width: 50% !important;
  padding-left: 18px !important;
}

/* garantir cartões completos */
.oem-landing-wrap {
  width: 100% !important;
  max-width: 1380px !important;
}

/* impedir colapso lateral */
#content table.centered tr {
  width: 100% !important;
}

/* melhorar responsividade */
@media (max-width: 1100px) {

  #content table.centered,
  #content table.centered tr,
  #content table.centered td {
    display: block !important;
    width: 100% !important;
  }

  #content table.centered td {
    padding: 0 !important;
    margin-bottom: 18px !important;
  }

}


/* ==========================================
   FINAL RED ISSUES FIX
   ========================================== */

/* 1) Top-right OEM logo in white */
#header a#logo img,
#header img[src*="logo.php"],
#header img[src*="logo"],
#header img[alt*="OEM"] {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
  max-height: 28px !important;
  width: auto !important;
}

/* 2) Remove stray icon/background from Check Ticket Status in top nav */
#nav li a[href*="tickets.php"]::before,
#nav li a[href*="tickets.php"]::after,
#nav li a[href*="view.php"]::before,
#nav li a[href*="view.php"]::after,
#nav li a[href*="tickets.php"] i,
#nav li a[href*="view.php"] i,
#nav li a img {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* 3) Make all top nav buttons homogeneous */
#nav li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  background: transparent !important;
  color: #2d3b50 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* active / selected nav */
#nav li a.active,
#nav li.active a {
  background: #eef4ff !important;
  color: #1a73e8 !important;
  border-color: #d9e7ff !important;
}

/* primary style for key actions in nav */
#nav li a[href*="open.php"],
#nav li a[href*="tickets.php"] {
  background: #1a73e8 !important;
  color: #ffffff !important;
  border: 1px solid #1a73e8 !important;
  box-shadow: 0 4px 10px rgba(26,115,232,0.16) !important;
}

/* hover */
#nav li a:hover {
  background: #eef4ff !important;
  color: #1a73e8 !important;
  border-color: #d9e7ff !important;
}

#nav li a[href*="open.php"]:hover,
#nav li a[href*="tickets.php"]:hover {
  background: #1557b0 !important;
  border-color: #1557b0 !important;
  color: #ffffff !important;
}


/* ==========================================
   HEADER FINAL POSITIONING
   ========================================== */

#header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 18px !important;
}

/* logo on the left */
#header a#logo {
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-right: auto !important;
  height: 64px !important;
}

#header a#logo img,
#header img[src*="logo.php"],
#header img[src*="logo"],
#header img[alt*="OEM"] {
  max-height: 34px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.96 !important;
}

/* sign in + flags on the right */
#header .pull-right,
#header .pull-right.flush-right {
  order: 2 !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  float: none !important;
  width: auto !important;
}

/* keep both paragraphs on one line */
#header .pull-right.flush-right p {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* flags close to sign in */
#header a.flag {
  display: inline-block !important;
  margin: 0 !important;
  opacity: 0.95 !important;
  vertical-align: middle !important;
}

/* small spacing between sign in block and flags */
#header .pull-right.flush-right p + p {
  margin-left: 8px !important;
}


/* ==========================================
   FINAL HEADER + BUTTON FINISH
   ========================================== */

/* push sign in + flags fully to the right */
#header .pull-right,
#header .pull-right.flush-right {
  margin-left: auto !important;
  justify-content: flex-end !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
}

/* keep logo safely on the left */
#header a#logo {
  position: relative !important;
  left: 0 !important;
  margin-right: 0 !important;
}

/* rectangular CTA buttons on homepage */
.oem-login-btn,
.oem-login-panel a.oem-login-btn,
.oem-login-panel a[href*="login.php"],
.oem-login-panel a[href*="open.php"] {
  border-radius: 6px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* make secondary CTA also look closed/finished */
.oem-login-panel a[href*="open.php"] {
  border: 1px solid #1a73e8 !important;
  background: #1a73e8 !important;
  color: #ffffff !important;
}

/* subtle consistent hover */
.oem-login-btn:hover,
.oem-login-panel a[href*="open.php"]:hover {
  background: #1557b0 !important;
  border-color: #1557b0 !important;
  color: #ffffff !important;
}

/* tighten the CTA stack */
.oem-login-panel .oem-login-footer {
  margin-top: 28px !important;
}


/* ==========================================
   HEADER RIGHT ALIGN - FINAL
   ========================================== */

#header {
  position: relative !important;
}

/* right block = sign in + flags */
#header .pull-right,
#header .pull-right.flush-right {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

/* keep both paragraphs inline */
#header .pull-right.flush-right p {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* remove extra spacing between sign-in and flags rows */
#header .pull-right.flush-right p + p {
  margin-left: 0 !important;
}

/* flags inline and tight */
#header a.flag {
  display: inline-block !important;
  margin: 0 2px !important;
  vertical-align: middle !important;
  opacity: 0.95 !important;
}

/* keep logo left and out of the way */
#header a#logo {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}


/* ==========================================
   HEADER INLINE FINAL FIX
   ========================================== */

#header {
  position: relative !important;
  min-height: 64px !important;
}

/* keep logo left */
#header a#logo {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 3 !important;
}

/* right-side wrapper */
#header .pull-right,
#header .pull-right.flush-right {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  z-index: 3 !important;
}

/* force paragraphs inline */
#header .pull-right.flush-right p {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* no gap created by second paragraph */
#header .pull-right.flush-right p + p {
  margin-left: 0 !important;
}

/* sign in link */
#header .pull-right.flush-right p:first-child a,
#header .pull-right.flush-right p:first-child {
  font-size: 14px !important;
  color: #ffffff !important;
}

/* flags grouped tightly */
#header .pull-right.flush-right p:last-child {
  gap: 4px !important;
}

#header a.flag {
  display: inline-block !important;
  margin: 0 !important;
  vertical-align: middle !important;
  opacity: 0.95 !important;
}