/* ── Typography ── */
body, p, li, td, input, button, label {
  font-family: Arial, sans-serif;
  color: #1A2E4F;
}

h1, h2, h3, h4, h5 {
  font-family: Arial, sans-serif;
  color: #243A5E;
  font-weight: 700;
}

h6 {
  font-family: Arial, sans-serif;
  color: #5F6F82;
}

/* ── Header ── */
.portal-header {
  background: linear-gradient(135deg, #243A5E 0%, #3C91E6 100%) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Hide the stock photo background image bleeding through */
.portal-header .header-bg {
  opacity: 0.15 !important;
}

/* Portal name text */
.portal-name, .portal-title {
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: #FFFFFF !important;
  letter-spacing: 0.5px;
}

/* ── Navigation tabs ── */
.portal-tabs a {
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 14px;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.portal-tabs a:hover {
  color: #FFFFFF !important;
  opacity: 1;
  border-bottom: 3px solid #3C91E6;
}

.portal-tabs a.selected, 
.portal-tabs a.active {
  color: #FFFFFF !important;
  opacity: 1;
  border-bottom: 3px solid #FFFFFF;
}

/* ── Links ── */
a {
  color: #3C91E6;
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: #2F7ED6;
  text-decoration: underline;
}

/* ── Buttons ── */
.btn-primary, button[type="submit"] {
  background-color: #3C91E6 !important;
  color: #FFFFFF !important;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 24px;
  transition: background-color 0.2s;
}

.btn-primary:hover, button[type="submit"]:hover {
  background-color: #2F7ED6 !important;
}

.btn-secondary {
  background-color: #F3F6FA !important;
  color: #243A5E !important;
  border: 1px solid #E1E6EE !important;
  border-radius: 6px;
  font-weight: 600;
}

.btn-secondary:hover {
  background-color: #E1E6EE !important;
}

/* ── Cards / content panels ── */
.article-card, .ticket-card, .kb-card, .portal-card {
  border: 1px solid #E1E6EE;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(36,58,94,0.07);
  transition: box-shadow 0.2s;
}

.article-card:hover, .kb-card:hover {
  box-shadow: 0 4px 12px rgba(36,58,94,0.13);
}

/* ── Tables ── */
table thead tr {
  background-color: #F3F6FA;
}

table thead th {
  color: #243A5E;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 2px solid #E1E6EE;
}

table tbody tr:nth-child(even) {
  background-color: #FAFBFD;
}

table td {
  border-bottom: 1px solid #E1E6EE;
  color: #1A2E4F;
  font-size: 13px;
}

/* ── Form inputs ── */
input[type="text"], 
input[type="email"], 
input[type="password"],
textarea, select {
  border: 1px solid #E1E6EE;
  border-radius: 6px;
  color: #1A2E4F;
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 9px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, textarea:focus, select:focus {
  border-color: #3C91E6;
  box-shadow: 0 0 0 3px rgba(60,145,230,0.15);
  outline: none;
}

/* ── Status badges ── */
.status-open, .badge-open {
  background-color: #3C91E6;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.status-resolved, .badge-resolved {
  background-color: #2EAF7D;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.status-pending, .badge-pending {
  background-color: #F5A524;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

/* ── Footer ── */
.portal-footer {
  background-color: #F8FAFC;
  border-top: 1px solid #E1E6EE;
  color: #5F6F82;
  font-size: 13px;
  padding: 20px 0;
}

.portal-footer a {
  color: #5F6F82;
}

.portal-footer a:hover {
  color: #3C91E6;
}

/* ── Page background ── */
body, .portal-body {
  background-color: #F8FAFC;
}

.content-area, .main-content {
  background-color: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E1E6EE;
}