html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============ HBS Theme ============ */
:root {
  --hbs-primary: #1a3c6e;
  --hbs-primary-2: #0d6efd;
  --hbs-accent: #12b3a6;
  --hbs-bg: #f4f6fb;
}

/* ----- Auth / Login ----- */
.auth-body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d1b3e 0%, #1a3c6e 45%, #12b3a6 100%);
  padding: 24px;
}

.auth-wrapper { width: 100%; max-width: 960px; }

.auth-card {
  display: flex;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  min-height: 560px;
}

.auth-brand-panel {
  flex: 1 1 45%;
  background: radial-gradient(circle at top left, #1a3c6e, #0d1b3e 70%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 48px 40px;
}

.auth-brand-inner .auth-logo {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin-bottom: 20px;
}

.auth-brand-inner h1 { font-weight: 800; letter-spacing: 2px; margin: 0; }
.auth-brand-inner .lead { color: #b9c7e6; margin-bottom: 18px; }
.auth-brand-sub { color: #cdd8ef; font-size: .95rem; }

.auth-feature-list { list-style: none; padding: 0; margin-top: 28px; }
.auth-feature-list li { margin-bottom: 14px; color: #e3ebff; font-size: .92rem; }
.auth-feature-list li i { color: #35e0cf; margin-right: 8px; }

.auth-form-panel { flex: 1 1 55%; display: flex; align-items: center; padding: 44px 46px; }
.auth-form-inner { width: 100%; }

.auth-title { font-weight: 700; color: var(--hbs-primary); margin-bottom: 4px; }
.auth-subtitle { color: #6b7a90; margin-bottom: 24px; }

.auth-tabs { display: flex; gap: 8px; margin-bottom: 22px; background: #eef2f9; padding: 5px; border-radius: 12px; }
.auth-tab {
  flex: 1; text-align: center; padding: 9px 12px; border-radius: 9px;
  text-decoration: none; color: #5a6b85; font-weight: 600; font-size: .9rem; transition: all .15s;
}
.auth-tab.active { background: #fff; color: var(--hbs-primary-2); box-shadow: 0 2px 8px rgba(13,110,253,.15); }

.btn-auth { padding: 11px; font-weight: 600; border-radius: 10px; background: var(--hbs-primary-2); border: none; }
.btn-auth:hover { background: #0b5ed7; }
.btn-resend { color: #6b7a90; text-decoration: none; font-size: .88rem; }

.otp-input { letter-spacing: 8px; font-weight: 700; text-align: center; font-size: 1.15rem; }

.auth-validation:empty { display: none; }
.auth-footer-note { margin-top: 22px; color: #8794a8; font-size: .82rem; text-align: center; }
.auth-footer-note i { color: var(--hbs-accent); }

@media (max-width: 767px) {
  .auth-brand-panel { display: none; }
}

/* ----- App shell ----- */
.app-body { background: var(--hbs-bg); min-height: 100vh; margin: 0; }
.app-shell { display: flex; min-height: 100vh; }

/* Sidebar */
.app-sidebar {
  width: 250px; flex-shrink: 0;
  background: linear-gradient(180deg, #0d1b3e 0%, #14264d 100%);
  color: #cdd8ef; display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040;
  transition: transform .25s ease;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px; padding: 20px 22px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-brand .brand-mark {
  width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: #35e0cf;
}
.sidebar-brand .brand-text { font-weight: 800; letter-spacing: 2px; font-size: 1.25rem; color: #fff; }
.sidebar-nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.nav-section { text-transform: uppercase; font-size: .68rem; letter-spacing: 1px; color: #6b7ba3; margin: 16px 12px 6px; }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
  color: #cdd8ef; font-weight: 500; font-size: .92rem; margin-bottom: 3px; transition: all .15s;
}
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--hbs-primary-2); color: #fff; box-shadow: 0 4px 12px rgba(13,110,253,.35); }
.sidebar-nav .nav-link.disabled { opacity: .45; pointer-events: none; }
.sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-badge { display: flex; align-items: center; gap: 8px; color: #7c8bb3; font-size: .78rem; }

/* Main area */
.app-main { flex: 1; margin-left: 250px; display: flex; flex-direction: column; min-height: 100vh; transition: margin .25s ease; }
.app-topbar {
  height: 64px; background: #fff; box-shadow: 0 1px 8px rgba(20,40,80,.06);
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  position: sticky; top: 0; z-index: 1030;
}
.topbar-title { font-weight: 700; color: var(--hbs-primary); font-size: 1.1rem; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn-icon {
  border: none; background: #f1f4fa; color: #43526e; width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; position: relative; cursor: pointer;
}
.btn-icon:hover { background: #e5eaf4; }
.btn-icon .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e35d6a; border: 2px solid #fff; }

.user-chip { display: flex; align-items: center; gap: 10px; background: transparent; border: none; padding: 4px 8px; border-radius: 12px; cursor: pointer; }
.user-chip:hover { background: #f1f4fa; }
.user-chip .avatar {
  width: 38px; height: 38px; border-radius: 10px; background: var(--hbs-primary-2); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
}
.user-meta { flex-direction: column; align-items: flex-start; line-height: 1.1; }
.user-meta .user-name { font-weight: 600; color: #1f2d45; font-size: .88rem; }
.user-meta .user-role { color: #8794a8; font-size: .74rem; }

.app-content { flex: 1; padding: 26px; }
.app-footer { padding: 14px 26px; color: #8794a8; font-size: .82rem; border-top: 1px solid #e9edf5; }

.page-head { margin-bottom: 6px; }
.page-title { font-weight: 700; color: var(--hbs-primary); font-size: 1.55rem; margin-bottom: 2px; }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(13,27,62,.5); z-index: 1035; }

@media (max-width: 991px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-main { margin-left: 0; }
  .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
  .app-shell.sidebar-open .sidebar-backdrop { display: block; }
}

/* Error card */
.error-card { background: #fff; border-radius: 18px; padding: 48px 40px; max-width: 460px; margin: 0 auto; }
.error-icon { font-size: 56px; color: #f0a020; margin-bottom: 12px; }

/* ----- Language switcher (login) ----- */
.auth-lang-switch {
  position: fixed; top: 18px; z-index: 10;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 30px;
  background: rgba(255,255,255,.14); color: #fff; text-decoration: none;
  font-size: .85rem; font-weight: 600; backdrop-filter: blur(4px);
  transition: background .15s;
}
.auth-lang-switch:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ============ RTL support ============ */
[dir="rtl"] .auth-lang-switch { right: auto; left: 18px; }
[dir="ltr"] .auth-lang-switch { left: auto; right: 18px; }

[dir="rtl"] .app-sidebar { left: auto; right: 0; }
[dir="rtl"] .app-main { margin-left: 0; margin-right: 250px; }

[dir="rtl"] .sidebar-nav .nav-link i { width: 20px; }
[dir="rtl"] .auth-feature-list li i { margin-right: 0; margin-left: 8px; }

/* OTP field stays LTR so digits read naturally even in Arabic */
[dir="rtl"] .otp-input { direction: ltr; letter-spacing: 8px; }

@media (max-width: 991px) {
  [dir="rtl"] .app-sidebar { transform: translateX(100%); }
  [dir="rtl"] .app-main { margin-right: 0; }
  [dir="rtl"] .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
}

/* ----- Dashboard ----- */
.dash-header { margin-bottom: 8px; }
.dash-welcome { font-weight: 700; color: var(--hbs-primary); font-size: 1.6rem; margin-bottom: 2px; }

.role-badge { font-size: .8rem; padding: 8px 14px; border-radius: 30px; }
.role-admin { background: #ffe6d9; color: #c1440e; }
.role-user { background: #dcf3ee; color: #0c8577; }

.stat-card {
  background: #fff; border-radius: 14px; padding: 18px; display: flex; gap: 14px; align-items: center;
  box-shadow: 0 4px 16px rgba(20,40,80,.06); height: 100%;
}
.stat-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; }
.stat-primary .stat-icon { background: #0d6efd; }
.stat-success .stat-icon { background: #12b3a6; }
.stat-warning .stat-icon { background: #f0a020; }
.stat-info .stat-icon    { background: #3aa0e6; }
.stat-danger .stat-icon  { background: #e35d6a; }
.stat-title { color: #7c8aa0; font-size: .82rem; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: #1f2d45; }
.stat-trend { font-size: .74rem; color: #12b3a6; }

.panel-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 4px 16px rgba(20,40,80,.06); }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-head h5 { margin: 0; color: var(--hbs-primary); font-weight: 700; font-size: 1.05rem; }

.dash-table thead th { color: #8794a8; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid #eef1f6; }
.dash-table td { border-color: #f2f4f8; }

.status-pill { padding: 4px 12px; border-radius: 20px; font-size: .76rem; font-weight: 600; }
.status-confirmed { background: #dcf3ee; color: #0c8577; }
.status-pending   { background: #fff2d6; color: #b5820b; }
.status-cancelled { background: #fde2e4; color: #c1361f; }

.profile-list { list-style: none; padding: 0; margin: 0; }
.profile-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f2f4f8; }
.profile-list li span { color: #8794a8; font-size: .88rem; }

.footer { color: #9aa6b8; font-size: .85rem; }