/* Nobinar Greenlight shell theme — not applied inside HTML5 meeting client */
/* Font is also linked from layout (same as landing); keep @import as fallback. */
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap");

:root {
  --nb-ink: #0b1f2a;
  --nb-ink-soft: #1a3a4a;
  --nb-teal: #0d9488;
  --nb-teal-deep: #0f766e;
  --nb-teal-soft: #14b8a6;
  --nb-mint: #5eead4;
  --nb-paper: #f4faf9;
  --nb-paper-2: #e8f5f3;
  --nb-line: rgba(11, 31, 42, 0.1);
  --nb-shadow: 0 18px 50px rgba(11, 31, 42, 0.1);
  --nb-radius: 16px;
  /* Match landing.html exactly */
  --nb-font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

  /* Greenlight / Bootstrap brand hooks */
  --brand-color: #0d9488;
  --brand-color-lighten: #14b8a6;
  --bs-primary: #0d9488;
  --bs-primary-rgb: 13, 148, 136;
  --bs-link-color: #0f766e;
  --bs-body-font-family: var(--nb-font);
  --bs-body-color: #0b1f2a;
  --bs-body-bg: #f4faf9;
}

html, body,
#root,
#root * {
  font-family: var(--nb-font) !important;
}

html, body {
  background: var(--nb-paper) !important;
  color: var(--nb-ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Auth / signup / signin cards (Bootstrap form controls often keep system fonts) */
.card,
.card-title,
.card-body,
.form-label,
.form-control,
.form-select,
.form-check-label,
.btn,
.btn-primary,
.input-group,
.input-group-text,
.nav-link,
.dropdown-item,
.modal,
.modal-title,
.modal-body,
.toast,
.Toastify__toast,
h1, h2, h3, h4, h5, h6,
p, span, label, a, button, input, textarea, select, option {
  font-family: var(--nb-font) !important;
}

input,
textarea,
select,
button,
.form-control,
.btn {
  font-feature-settings: "ss01" 0;
  letter-spacing: 0 !important;
}

.card-title {
  font-weight: 700 !important;
}

.btn,
.btn-primary {
  font-weight: 600 !important;
}

.form-label {
  font-weight: 500 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 8% -8%, rgba(20, 184, 166, 0.18), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(13, 148, 136, 0.12), transparent 50%),
    linear-gradient(180deg, #f7fcfb 0%, var(--nb-paper) 40%, #eef7f5 100%);
}

a { color: var(--nb-teal-deep); }
a:hover { color: var(--nb-teal); }

/* ── Header ── */
#navbar {
  position: relative !important;
  z-index: 1040 !important;
  height: auto !important;
  min-height: 60px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nb-line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(11, 31, 42, 0.04) !important;
}

#navbar .container,
#navbar .container-fluid,
#navbar .navbar-collapse,
#navbar .navbar-nav,
#navbar .nav-item,
#navbar .dropdown {
  overflow: visible !important;
}

#navbar .container,
#navbar .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#navbar .navbar-brand {
  margin: 0 !important;
  padding: 0 0.5rem !important;
}

#navbar .small-logo {
  max-height: 38px !important;
  max-width: 148px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

#navbar .nav-link,
#navbar .dropdown-toggle,
#navbar .btn-link {
  color: var(--nb-ink-soft) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
}

#navbar .nav-link:hover,
#navbar .dropdown-toggle:hover {
  color: var(--nb-teal) !important;
}

#navbar .dropdown-menu {
  z-index: 1050 !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--nb-shadow) !important;
  padding: 0.4rem !important;
  font-family: var(--nb-font) !important;
}

#navbar .dropdown-item {
  border-radius: 10px !important;
  font-weight: 500 !important;
  color: var(--nb-ink) !important;
}

#navbar .dropdown-item:hover,
#navbar .dropdown-item:focus {
  background: var(--nb-paper-2) !important;
  color: var(--nb-teal-deep) !important;
}

/* ── Buttons ── */
.btn {
  font-family: var(--nb-font) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  letter-spacing: 0 !important;
}

.btn-primary,
.btn-success,
a.btn-primary {
  background: linear-gradient(135deg, var(--nb-teal) 0%, var(--nb-teal-deep) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.28) !important;
}

.btn-primary:hover,
.btn-success:hover,
a.btn-primary:hover {
  background: linear-gradient(135deg, var(--nb-teal-soft) 0%, var(--nb-teal) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  filter: brightness(1.03);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-neutral {
  border: 1.5px solid rgba(13, 148, 136, 0.35) !important;
  color: var(--nb-teal-deep) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: var(--nb-paper-2) !important;
  border-color: var(--nb-teal) !important;
  color: var(--nb-ink) !important;
}

.btn-danger,
.btn-outline-danger {
  border-radius: 12px !important;
}

/* ── Forms ── */
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control {
  border-radius: 12px !important;
  border: 1.5px solid rgba(11, 31, 42, 0.12) !important;
  background: #fff !important;
  color: var(--nb-ink) !important;
  font-family: var(--nb-font) !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(13, 148, 136, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.12) !important;
}

.form-label,
label {
  font-weight: 600 !important;
  color: var(--nb-ink-soft) !important;
}

/* ── Cards / panels ── */
.card,
.room-card-wrapper,
.bg-white.rounded,
.shadow-sm,
div[class*="card"] {
  border-radius: var(--nb-radius) !important;
}

.card {
  border: 1px solid var(--nb-line) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 30px rgba(11, 31, 42, 0.06) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--nb-line) !important;
  font-weight: 700 !important;
}

/* Room cards */
.room-card,
.room-card-item,
[class*="RoomCard"],
.card.room-card {
  border: 1px solid var(--nb-line) !important;
  border-radius: var(--nb-radius) !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(11, 31, 42, 0.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.room-card:hover,
.card.room-card:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 148, 136, 0.35) !important;
  box-shadow: 0 18px 40px rgba(13, 148, 136, 0.12) !important;
}

/* ── Tabs ── */
.nav-tabs {
  border-bottom: 1px solid var(--nb-line) !important;
  gap: 0.25rem;
}

.nav-tabs.pt-5,
.nav.nav-tabs.pt-5 {
  padding-top: 0.75rem !important;
}

.nav-tabs .nav-link {
  border: none !important;
  border-radius: 999px !important;
  color: var(--nb-ink-soft) !important;
  font-weight: 600 !important;
  padding: 0.45rem 1rem !important;
  margin-bottom: 0.35rem !important;
}

.nav-tabs .nav-link:hover {
  background: var(--nb-paper-2) !important;
  color: var(--nb-teal-deep) !important;
}

.nav-tabs .nav-link.active {
  background: rgba(13, 148, 136, 0.12) !important;
  color: var(--nb-teal-deep) !important;
  border: none !important;
}

.tab-content .pt-5 {
  padding-top: 1.25rem !important;
}

/* ── Homepage ── */
.homepage,
[class*="Homepage"],
.home-page {
  font-family: var(--nb-font) !important;
}

.logo-wrapper {
  width: 200px !important;
  height: 80px !important;
  margin-top: 1rem !important;
  margin-bottom: 0.75rem !important;
}

.logo {
  max-width: 200px !important;
  max-height: 80px !important;
  object-fit: contain !important;
}

h1, h2, h3, h4, h5,
.display-4, .display-5, .display-6 {
  font-family: var(--nb-font) !important;
  color: var(--nb-ink) !important;
  letter-spacing: -0.02em;
  font-weight: 800 !important;
}

.lead, .text-muted, p.text-muted {
  color: rgba(11, 31, 42, 0.62) !important;
}

/* Feature / info blocks on landing */
.bg-white,
.rounded-3,
.shadow {
  border-radius: var(--nb-radius) !important;
}

.shadow {
  box-shadow: var(--nb-shadow) !important;
}

/* Soften default purple/blue BBB accents */
.text-primary,
.link-primary {
  color: var(--nb-teal-deep) !important;
}

.bg-primary {
  background: linear-gradient(135deg, var(--nb-teal) 0%, var(--nb-teal-deep) 100%) !important;
}

.border-primary {
  border-color: rgba(13, 148, 136, 0.4) !important;
}

.badge.bg-primary,
.badge-primary {
  background: rgba(13, 148, 136, 0.15) !important;
  color: var(--nb-teal-deep) !important;
}

/* ── Auth pages ── */
.authentication,
[class*="SignIn"],
[class*="Signup"],
.auth-form {
  font-family: var(--nb-font) !important;
}

/* ── Tables ── */
.table {
  font-family: var(--nb-font) !important;
  color: var(--nb-ink) !important;
}

.table thead th {
  font-weight: 700 !important;
  color: var(--nb-ink-soft) !important;
  border-bottom-color: var(--nb-line) !important;
  background: rgba(232, 245, 243, 0.55) !important;
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--nb-line) !important;
}

/* ── Modals ── */
.modal-content {
  border: 1px solid var(--nb-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--nb-shadow) !important;
  font-family: var(--nb-font) !important;
}

.modal-header {
  border-bottom: 1px solid var(--nb-line) !important;
}

.modal-footer {
  border-top: 1px solid var(--nb-line) !important;
}

.modal-title {
  font-weight: 800 !important;
  color: var(--nb-ink) !important;
}

/* ── Alerts ── */
.alert {
  border-radius: 14px !important;
  border: 1px solid var(--nb-line) !important;
  font-family: var(--nb-font) !important;
}

.alert-success {
  background: rgba(13, 148, 136, 0.1) !important;
  color: var(--nb-teal-deep) !important;
  border-color: rgba(13, 148, 136, 0.25) !important;
}

/* ── Footer / misc ── */
footer,
.footer {
  font-family: var(--nb-font) !important;
  color: rgba(11, 31, 42, 0.55) !important;
  border-top: 1px solid var(--nb-line) !important;
  background: transparent !important;
}

/* Pagination */
.page-link {
  color: var(--nb-teal-deep) !important;
  border-radius: 10px !important;
  border-color: var(--nb-line) !important;
  font-family: var(--nb-font) !important;
}

.page-item.active .page-link {
  background: var(--nb-teal) !important;
  border-color: var(--nb-teal) !important;
  color: #fff !important;
}

/* Spinner / loading */
.spinner-border {
  color: var(--nb-teal) !important;
}

/* Hide remaining BBB outbound links */
a[href*="bigbluebutton.org"],
a[href*="docs.bigbluebutton"] {
  display: none !important;
}

/* Toast / toasts */
.Toastify__toast,
.toast {
  font-family: var(--nb-font) !important;
  border-radius: 12px !important;
}

/* Search inputs in rooms */
input[type="search"],
.search-input {
  border-radius: 999px !important;
}

/* Empty states */
.empty-room-list,
[class*="Empty"] {
  color: rgba(11, 31, 42, 0.55) !important;
}

/* Persian / RTL shell */
html[dir="rtl"] body,
html[lang="fa"] body {
  text-align: right;
}

/* Force plan strip to the visual right even if a parent resets direction */
#nobinar-plan-strip,
html[dir="ltr"] #nobinar-plan-strip,
html:not([dir]) #nobinar-plan-strip {
  direction: rtl !important;
  justify-content: flex-start !important;
  text-align: right !important;
}

html[dir="rtl"] .text-start {
  text-align: right !important;
}

html[dir="rtl"] .text-end {
  text-align: left !important;
}

html[dir="rtl"] #homepage-hero h1,
html[dir="rtl"] #homepage-hero p {
  text-align: right;
}

/* Rooms toolbar: in RTL, Bootstrap ms-auto puts "+ New Room" on the left — flip it */
html[dir="rtl"] .tab-content .hstack,
html[lang="fa"] .tab-content .hstack {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
}

html[dir="rtl"] .tab-content .hstack .ms-auto,
html[lang="fa"] .tab-content .hstack .ms-auto {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
}

html[dir="rtl"] .tab-content .hstack input,
html[dir="rtl"] .tab-content .hstack .form-control,
html[lang="fa"] .tab-content .hstack input,
html[lang="fa"] .tab-content .hstack .form-control {
  text-align: right !important;
  direction: rtl !important;
}

/* Room cards / titles */
html[dir="rtl"] .card-text,
html[dir="rtl"] .room-card-text,
html[lang="fa"] .card .card-body {
  text-align: center;
}

/* Navbar / dropdowns */
html[dir="rtl"] #navbar .navbar-nav,
html[lang="fa"] #navbar .navbar-nav {
  flex-direction: row-reverse;
}

html[dir="rtl"] .dropdown-menu,
html[lang="fa"] .dropdown-menu {
  text-align: right !important;
}

html[dir="rtl"] .form-label,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[lang="fa"] .form-label,
html[lang="fa"] .form-control,
html[lang="fa"] .form-select {
  text-align: right !important;
}

html[dir="rtl"] .form-control::placeholder,
html[lang="fa"] .form-control::placeholder {
  text-align: right;
  direction: rtl;
}

/* Tables */
html[dir="rtl"] table,
html[lang="fa"] table {
  text-align: right !important;
}

/* Stack / utility spacing mirrors */
html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; }

html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }