/* DoorBell — student-portal styles.
 * Loaded after assets/css/base.css. Contains :root tokens, portal-specific
 * primary/accent colors, and rules that intentionally differ from the other
 * two portals (see DESIGN.md for the three-portal-identity rationale).
 */

:root {
      --primary:        #2563eb;
      --primary-dark:   #1d4ed8;
      --primary-light:  #eff6ff;
      --primary-mid:    #dbeafe;
      --ink:            #0f172a;
      --ink-secondary:  #475569;
      --ink-muted:      #94a3b8;
      --surface:        #ffffff;
      --page-bg:        #f8fafc;
      --border:         #e2e8f0;
      --border-strong:  #cbd5e1;
      --footer-bg:      #0f172a;
      --sidebar-bg:     #0f172a;
      --sidebar-width:  230px;
      --radius-sm:      6px;
      --radius-md:      8px;
      --radius-lg:      10px;
      --radius-xl:      14px;
      --bs-primary:     #2563eb;
      --bs-primary-rgb: 37,99,235;
    }

.site-nav {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 1020;
    }

.site-nav .navbar-brand {
      font-weight: 800;
      font-size: 1.1rem;
      letter-spacing: -0.02em;
      color: var(--ink);
      display: flex; align-items: center; gap: 8px;
    }

.site-nav .brand-icon {
      width: 28px; height: 28px;
      background: var(--primary);
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem; color: #fff;
    }

.site-nav .nav-link {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--ink-secondary);
      padding: 8px 12px;
      border-radius: var(--radius-md);
      transition: background 150ms, color 150ms;
    }

.site-nav .nav-link:hover { background: var(--primary-light); color: var(--primary); }

.site-nav .nav-link.active { color: var(--primary); background: var(--primary-light); }

.nav-avatar {
      width: 32px; height: 32px;
      background: var(--primary);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.8rem; color: #fff;
    }

.sidebar-brand .brand-icon {
      width: 28px; height: 28px;
      background: var(--primary);
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem; color: #fff; flex-shrink: 0;
    }

.sidebar .nav-link.active i { color: #60a5fa; }

.sidebar-user {
      padding: 14px 16px;
      border-top: 1px solid rgba(255,255,255,.07);
    }

.user-avatar {
      width: 32px; height: 32px;
      background: var(--primary);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.75rem; color: #fff;
      flex-shrink: 0;
    }

.user-name  { font-size: 0.8125rem; font-weight: 600; color: #e2e8f0; }

.user-email { font-size: 0.6875rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

.mobile-topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky; top: 0; z-index: 1020;
    }

.mobile-brand .brand-icon {
      width: 26px; height: 26px;
      background: var(--primary);
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem; color: #fff;
    }

.offcanvas-sidebar .offcanvas-body { padding: 0 8px; overflow-y: auto; }

.listing-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      overflow: hidden;
      background: var(--surface);
      transition: box-shadow 200ms, transform 200ms;
    }

.listing-card:hover {
      box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
      transform: translateY(-3px);
    }

.listing-card .card-img-top { height: 200px; object-fit: cover; }

.price-tag { font-size: 1.25rem; font-weight: 700; color: var(--primary); }

.badge-amenity {
      background: var(--primary-light);
      color: var(--primary-dark);
      border-radius: var(--radius-sm);
      padding: 3px 10px;
      font-size: 0.75rem;
      font-weight: 500;
    }

.status-pending   { background:#fef9c3; color:#854d0e; border-radius:9999px; padding:3px 10px; font-size:.6875rem; font-weight:500; }

.status-confirmed { background:#dcfce7; color:#166534; border-radius:9999px; padding:3px 10px; font-size:.6875rem; font-weight:500; }

.status-cancelled { background:#fee2e2; color:#991b1b; border-radius:9999px; padding:3px 10px; font-size:.6875rem; font-weight:500; }

.status-completed { background:#f0fdf4; color:#15803d; border-radius:9999px; padding:3px 10px; font-size:.6875rem; font-weight:500; }

.status-active    { background:#dbeafe; color:#1e40af; border-radius:9999px; padding:3px 10px; font-size:.6875rem; font-weight:500; }

.pay-pill-unpaid  { background:#fef9c3; color:#854d0e; border-radius:9999px; padding:3px 10px; font-size:.6875rem; font-weight:500; }

.pay-pill-paid    { background:#dcfce7; color:#166534; border-radius:9999px; padding:3px 10px; font-size:.6875rem; font-weight:500; }

.btn {
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 500;
      font-size: 0.875rem;
      border-radius: var(--radius-md);
      padding: 9px 18px;
      height: 40px;
      display: inline-flex; align-items: center; gap: 6px;
      transition: background 150ms, border-color 150ms;
    }

.btn-sm { height: 34px; padding: 5px 14px; font-size: 0.8125rem; }

.btn-lg { height: 48px; padding: 12px 24px; font-size: 1rem; font-weight: 600; }

.btn-primary { background: var(--primary); border-color: var(--primary); }

.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.btn-primary:focus-visible { outline: 3px solid rgba(37,99,235,.3); outline-offset: 3px; }

.btn-outline-primary { color: var(--primary); border-color: var(--primary); }

.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.btn-outline-secondary:hover { background: var(--page-bg); }

.form-control, .form-select {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.9375rem;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      height: 40px;
      padding: 9px 14px;
      color: var(--ink);
      transition: border-color 150ms, box-shadow 150ms;
    }

.form-control:focus, .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(37,99,235,.12);
      outline: none;
    }

.form-label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-secondary); margin-bottom: 5px; }

.alert { border-radius: var(--radius-lg); border: none; }

.alert-info    { background: var(--primary-light); color: #1d4ed8; }

footer { background: var(--footer-bg); color: var(--ink-muted); }