/* ============================================================
   Eforma Visio — modern skin (loaded after application.css)
   Served from /var/www/bigbluebutton-default/assets/
   Brand: orange #E38223 / dark #32373C
   ============================================================ */

@font-face {
  font-family: "Manrope";
  src: url("/eforma-font.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --ef-orange: #E38223;
  --ef-orange-dark: #c96f15;
  --ef-orange-soft: #fae9d8;
  --ef-ink: #26292e;
  --ef-ink-soft: #5b6168;
  --ef-radius: 16px;
  --ef-shadow-sm: 0 1px 2px rgba(38, 41, 46, .05), 0 2px 8px rgba(38, 41, 46, .05);
  --ef-shadow-md: 0 2px 4px rgba(38, 41, 46, .05), 0 12px 32px rgba(38, 41, 46, .10);
  --ef-shadow-orange: 0 6px 20px rgba(227, 130, 35, .35);
}

/* ---------- base ---------- */
html { background: #f9f8f6; }

body {
  font-family: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  background:
    radial-gradient(1100px 420px at 50% -180px, rgba(227, 130, 35, .05), transparent 70%),
    linear-gradient(180deg, #fbfaf8 0%, #f9f8f6 100%) !important;
  color: var(--ef-ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .card-title {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--ef-ink);
}

a { transition: color .15s ease; }

/* ---------- navbar: frosted glass ---------- */
.navbar {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(38, 41, 46, .07);
  box-shadow: 0 1px 12px rgba(38, 41, 46, .04);
  /* backdrop-filter creates a stacking context: without an explicit
     z-index the profile dropdown paints UNDER the content below */
  position: relative;
  z-index: 1030 !important;
}

.navbar .dropdown-toggle { font-weight: 600; }

/* ---------- cards ---------- */
.card, .card-shadow {
  border-radius: var(--ef-radius) !important;
  border: 1px solid rgba(38, 41, 46, .06) !important;
  box-shadow: var(--ef-shadow-sm) !important;
  transition: box-shadow .25s ease, transform .25s ease;
}

.card-shadow:hover {
  box-shadow: var(--ef-shadow-md) !important;
}

/* room cards (clickable) get a lift */
.cursor-pointer.card:hover {
  transform: translateY(-3px);
}

.card-text { color: var(--ef-ink-soft); }

/* ---------- buttons ---------- */
.btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-brand, .btn-primary {
  background: linear-gradient(135deg, #EE9A3E 0%, var(--ef-orange) 55%, var(--ef-orange-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(227, 130, 35, .28);
}

.btn-brand:hover, .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--ef-shadow-orange);
  filter: brightness(1.04);
}

.btn-brand:active, .btn-primary:active { transform: translateY(0); }

.btn:focus-visible {
  outline: 3px solid rgba(227, 130, 35, .35) !important;
  outline-offset: 2px;
}

/* outline / secondary buttons */
.btn-outline-primary, .btn-outline-secondary {
  border: 1.5px solid rgba(38, 41, 46, .18) !important;
  color: var(--ef-ink) !important;
  background: #fff !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover {
  border-color: var(--ef-orange) !important;
  color: var(--ef-orange-dark) !important;
  background: #fff8f1 !important;
}

/* ---------- tabs: modern pills ---------- */
.nav-tabs {
  border-bottom: none !important;
  gap: 6px;
}

.nav-tabs .nav-link {
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700;
  color: var(--ef-ink-soft) !important;
  padding: .55rem 1.1rem;
  transition: background .2s ease, color .2s ease;
}

.nav-tabs .nav-link:hover {
  background: rgba(227, 130, 35, .08);
  color: var(--ef-orange-dark) !important;
}

.nav-tabs .nav-link.active {
  background: var(--ef-orange-soft) !important;
  color: var(--ef-orange-dark) !important;
}

/* ---------- forms ---------- */
.form-control, .form-select {
  border-radius: 12px !important;
  border: 1.5px solid rgba(38, 41, 46, .12) !important;
  padding: .65rem .9rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--ef-orange) !important;
  box-shadow: 0 0 0 4px rgba(227, 130, 35, .15) !important;
}

/* ---------- dropdowns & modals ---------- */
.dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid rgba(38, 41, 46, .08) !important;
  box-shadow: var(--ef-shadow-md) !important;
  padding: .45rem !important;
}

.dropdown-item { border-radius: 9px; font-weight: 600; padding: .5rem .75rem; }
.dropdown-item:hover { background: rgba(227, 130, 35, .09); color: var(--ef-orange-dark); }

.modal-content {
  border-radius: 18px !important;
  border: none !important;
  box-shadow: 0 24px 64px rgba(38, 41, 46, .22) !important;
}

/* ---------- icon circles / empty states ---------- */
.icon-circle {
  background: linear-gradient(135deg, #fdf1e3, var(--ef-orange-soft)) !important;
  box-shadow: inset 0 0 0 1px rgba(227, 130, 35, .14);
}

/* ---------- footer: anchored white bar, single separator ---------- */
.footer, .footer.background-whitesmoke {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(38, 41, 46, .07) !important;
  box-shadow: 0 -1px 10px rgba(38, 41, 46, .03);
  padding: 0 !important;
  margin-top: 0 !important;
}

.footer .container { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.footer hr { display: none !important; }

.footer a {
  font-weight: 600;
  color: var(--ef-ink-soft) !important;
  margin: 0 .65rem;
  text-decoration: none;
}

.footer a:hover { color: var(--ef-orange-dark) !important; }

/* ---------- toasts ---------- */
.Toastify__toast { border-radius: 14px !important; box-shadow: var(--ef-shadow-md) !important; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}