/* Unified LRC system styling layer */
:root {
  --lrc-navy: #0b1f3a;
  --lrc-navy-2: #122a4d;
  --lrc-gold: #d6a21e;
  --lrc-gold-soft: #fff7e3;
  --lrc-bg: #f6f8fc;
  --lrc-surface: #ffffff;
  --lrc-text: #172033;
  --lrc-muted: #65728a;
  --lrc-line: #d8e0ec;
  --lrc-success: #027a48;
  --lrc-danger: #b42318;
  --lrc-shadow: 0 16px 40px rgba(11, 31, 58, 0.10);
  --lrc-radius: 8px;
  --navy: var(--lrc-navy);
  --navy-2: var(--lrc-navy-2);
  --gold: var(--lrc-gold);
  --gold-2: #b88913;
  --bg: var(--lrc-bg);
  --surface: var(--lrc-surface);
  --text: var(--lrc-text);
  --muted: var(--lrc-muted);
  --line: var(--lrc-line);
  --border: var(--lrc-line);
  --primary: var(--lrc-navy);
  --primary-2: var(--lrc-navy-2);
  --accent: var(--lrc-gold);
  --success: var(--lrc-success);
  --danger: var(--lrc-danger);
  --shadow: var(--lrc-shadow);
  --radius: var(--lrc-radius);
}

html,
body {
  background: radial-gradient(circle at top left, #eaf2ff, transparent 34rem), var(--lrc-bg) !important;
  color: var(--lrc-text);
  font-family: "IBM Plex Sans Thai", "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
  letter-spacing: 0;
}

.topbar,
.portal-topbar,
.app-topbar {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--lrc-text) !important;
  border-bottom: 1px solid var(--lrc-line) !important;
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.08) !important;
  backdrop-filter: blur(16px);
}

.portal-topbar .brand-text strong,
.portal-topbar .brand-subtitle,
.app-topbar a {
  color: var(--lrc-text) !important;
}

.brand-logo,
.brand img,
.logo,
.brand-badge {
  border-radius: var(--lrc-radius) !important;
}

h1,
h2,
h3,
.brand strong,
.brand-text strong,
.section-head h2,
.section-head h3 {
  color: var(--lrc-navy) !important;
}

.card,
.table-card,
.panel,
.hero,
.account-panel,
.system-row,
.system-card,
.stat,
.stat-card,
.service-card,
.welcome-card,
.feature-card,
.step-card,
.auth-card,
.modal-card,
.dialog-card,
.log-form,
.calendar-card {
  border: 1px solid var(--lrc-line) !important;
  border-radius: var(--lrc-radius) !important;
  background: var(--lrc-surface) !important;
  box-shadow: var(--lrc-shadow) !important;
}

.hero,
.landing-hero,
.account-panel {
  border-left: 4px solid var(--lrc-gold) !important;
}

.landing-hero {
  background:
    linear-gradient(135deg, rgba(11, 31, 58, 0.96), rgba(18, 42, 77, 0.90)),
    var(--lrc-navy) !important;
}

.landing-hero h2,
.landing-hero .muted,
.landing-hero .eyebrow {
  color: #ffffff !important;
}

.eyebrow,
.section-mini-title {
  color: var(--lrc-gold) !important;
  letter-spacing: 0.04em;
}

.btn,
button.btn,
.tab,
.system-open,
.btn-logout,
.btn-home {
  border-radius: var(--lrc-radius) !important;
  min-height: 44px;
  font-weight: 800;
}

.btn.primary,
.btn.navy,
.btn-secondary,
.btn-primary,
.tab.active,
.btn-logout,
.system-open {
  background: var(--lrc-navy) !important;
  border-color: var(--lrc-navy) !important;
  color: #ffffff !important;
}

.btn.gold,
.btn.primary.btn-gold,
.portal-topbar .btn-secondary {
  background: var(--lrc-gold) !important;
  border-color: var(--lrc-gold) !important;
  color: var(--lrc-navy) !important;
}

.btn.ghost,
.btn-ghost,
.btn-home,
.btn-soft,
.btn-outline {
  background: #ffffff !important;
  border: 1px solid var(--lrc-line) !important;
  color: var(--lrc-navy) !important;
}

input,
select,
textarea,
.input,
.select {
  border-radius: var(--lrc-radius) !important;
  border-color: var(--lrc-line) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus {
  border-color: var(--lrc-gold) !important;
  box-shadow: 0 0 0 4px rgba(214, 162, 30, 0.18) !important;
}

th {
  background: #edf3f9 !important;
  color: var(--lrc-navy) !important;
}

.badge.ok,
.badge.APPROVED,
.badge.BOOKED,
.pill.success {
  background: #ecfdf3 !important;
  color: var(--lrc-success) !important;
}

.badge.warn,
.badge.PENDING_APPROVAL,
.pill.warning {
  background: var(--lrc-gold-soft) !important;
  color: #8a6300 !important;
}

.badge.off,
.badge.REJECTED,
.badge.CANCELLED,
.pill.danger {
  background: #fff1f0 !important;
  color: var(--lrc-danger) !important;
}

.system-icon,
.service-icon,
.feature-icon,
.step-no {
  border-radius: var(--lrc-radius) !important;
  background: var(--lrc-navy) !important;
  color: #ffffff !important;
}

.system-icon.accent {
  background: var(--lrc-gold) !important;
  color: var(--lrc-navy) !important;
}

.toast {
  border-radius: var(--lrc-radius) !important;
  background: var(--lrc-navy) !important;
  color: #ffffff !important;
  box-shadow: var(--lrc-shadow) !important;
}

.toast.error {
  background: var(--lrc-danger) !important;
}

.toast.success {
  background: var(--lrc-success) !important;
}

@media (max-width: 700px) {
  .topbar,
  .portal-topbar,
  .app-topbar {
    padding: 12px 14px !important;
  }

  .portal-main,
  .page,
  .layout,
  .container {
    width: min(100% - 1rem, 1200px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .system-row,
  .account-panel {
    grid-template-columns: 1fr !important;
  }
}