/* ModernHost brand — Apple-ratio layout with ModernHost colors */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── CSS variables ───────────────────────────── */
:root,
[data-bs-theme=light] {
  --bs-primary:            #4BAEF5;
  --bs-primary-rgb:        75, 174, 245;
  --bs-link-color:         #4BAEF5;
  --bs-link-color-rgb:     75, 174, 245;
  --bs-link-hover-color:   #2e9ee8;
  --bs-body-bg:            #F5F7FA;
  --bs-body-bg-rgb:        245, 247, 250;
  --bs-body-color:         #334155;
  --bs-body-color-rgb:     51, 65, 85;
  --bs-border-color:       #dde3ed;
  --bs-secondary-color:    #64748b;
  --bs-heading-color:      #1C2B4A;
  --bs-card-bg:            #ffffff;
  --bs-card-border-color:  #dde3ed;
  --bs-table-bg:           transparent;
  --bs-table-color:        #334155;
  --bs-table-striped-bg:   rgba(75, 174, 245, 0.03);
  --bs-input-bg:           #ffffff;
  --bs-input-color:        #1C2B4A;
  --bs-input-border-color: #dde3ed;
}

/* ── Layout spacing ──────────────────────────── */
#wrapper { padding-top: 2rem; }

/* ── Typography ──────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: #F5F7FA !important;
  color: #334155 !important;
}

h1, h2, h3, h4, h5, h6 { color: #1C2B4A; }
.text-muted, .text-secondary { color: #64748b !important; }

/* ── Navbar ──────────────────────────────────── */
nav.navbar {
  /* backdrop-filter creates a stacking context; without a z-index the navbar
     (and every dropdown inside it) paints under the page content below */
  position: relative;
  z-index: 1030;
  background-color: rgba(245, 247, 250, 0.88) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid #dde3ed !important;
}

nav.navbar .navbar-brand,
nav.navbar .nav-link,
nav.navbar .navbar-text {
  color: #1C2B4A !important;
}

nav.navbar .nav-link:hover { color: #4BAEF5 !important; }
nav.navbar .dropdown-toggle::after { border-top-color: #1C2B4A; }

/* ── Cards ───────────────────────────────────── */
.card {
  background-color: #ffffff;
  border-color: #dde3ed;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(28, 43, 74, 0.07);
}

.card-header {
  background-color: #F5F7FA;
  border-bottom-color: #dde3ed;
  font-weight: 600;
  color: #1C2B4A;
}

.card-footer {
  background-color: #F5F7FA;
  border-top-color: #dde3ed;
}

/* ── Buttons ─────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:                 #4BAEF5;
  --bs-btn-border-color:       #4BAEF5;
  --bs-btn-hover-bg:           #2e9ee8;
  --bs-btn-hover-border-color: #2e9ee8;
  --bs-btn-active-bg:          #1a90dc;
  --bs-btn-color:              #fff;
  border-radius: 980px;
  font-weight: 500;
}

.btn-secondary {
  --bs-btn-bg:                 #e8edf4;
  --bs-btn-border-color:       #e8edf4;
  --bs-btn-hover-bg:           #d8dfec;
  --bs-btn-color:              #1C2B4A;
  border-radius: 980px;
}

.btn-outline-primary {
  --bs-btn-color:              #4BAEF5;
  --bs-btn-border-color:       #4BAEF5;
  --bs-btn-hover-bg:           #4BAEF5;
  --bs-btn-hover-color:        #fff;
  border-radius: 980px;
}

/* ── Forms ───────────────────────────────────── */
input, select, textarea, .form-control, .form-select {
  background-color: #ffffff;
  border-color: #dde3ed;
  color: #1C2B4A;
}

input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  background-color: #ffffff;
  border-color: #4BAEF5;
  color: #1C2B4A;
  box-shadow: 0 0 0 3px rgba(75, 174, 245, 0.18);
}

/* ── Tables ──────────────────────────────────── */
.table thead th { color: #64748b; border-bottom-color: #dde3ed; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; }
.table td, .table th { border-color: #dde3ed; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(75,174,245,0.03); }

/* ── Alerts ──────────────────────────────────── */
.alert-info    { background-color: #eaf4fd; border-color: #b3d9f7; color: #1C2B4A; }
.alert-success { background-color: #eaf7f0; border-color: #a8dfc0; color: #1a5c38; }
.alert-warning { background-color: #fef8e7; border-color: #fad87a; color: #7d5800; }
.alert-danger  { background-color: #fdecea; border-color: #f5b7b1; color: #8b1a10; }

/* ── Badges ──────────────────────────────────── */
.badge.bg-secondary { background-color: #e8edf4 !important; color: #64748b !important; }

/* ── Dropdowns ───────────────────────────────── */
.dropdown-menu {
  background-color: #ffffff;
  border-color: #dde3ed;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(28, 43, 74, 0.12);
}

.dropdown-item { color: #1C2B4A; }
.dropdown-item:hover { background-color: #F5F7FA; color: #4BAEF5; }
.dropdown-divider { border-color: #dde3ed; }

/* ── Pagination ──────────────────────────────── */
.page-link {
  background-color: #ffffff;
  border-color: #dde3ed;
  color: #4BAEF5;
}

.page-item.active .page-link { background-color: #4BAEF5; border-color: #4BAEF5; color: #fff; }
.page-item.disabled .page-link { background-color: #F5F7FA; color: #64748b; }

/* ── Login / Signup cards ────────────────────── */
.page-login .card,
.page-signup .card,
.page-password-reset .card {
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(28, 43, 74, 0.10);
}

/* ── Mobile logo size ────────────────────────── */
@media (max-width: 575px) {
  .navbar-brand img {
    height: 20px !important;
  }
}