/* DoorBell — landlord-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:        #0f766e;
      --primary-dark:   #0d6360;
      --primary-light:  #f0fdfa;
      --primary-mid:    #ccfbf1;
      --accent:         #14b8a6;
      --ink:            #0f172a;
      --ink-secondary:  #475569;
      --ink-muted:      #94a3b8;
      --surface:        #ffffff;
      --page-bg:        #f8fafc;
      --border:         #e2e8f0;
      --border-strong:  #cbd5e1;
      --sidebar-bg:     #0f172a;
      --sidebar-width:  240px;
      --radius-sm:      6px;
      --radius-md:      8px;
      --radius-lg:      10px;
      --radius-xl:      14px;
      --bs-primary:     #0f766e;
    }

.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-section-label {
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(148,163,184,.5);
      padding: 14px 16px 5px;
    }

.sidebar .nav-link.active i { color: var(--accent); }

.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: 160px; }

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

.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;
    }

.badge-status-pending   { background:#fef9c3; color:#854d0e; }

.badge-status-confirmed { background:#dcfce7; color:#166534; }

.badge-status-cancelled { background:#fee2e2; color:#991b1b; }

.badge-status-completed { background:#f0fdf4; color:#15803d; }

.badge-status-rejected  { background:#fee2e2; color:#991b1b; }

.badge-status-active    { background:#dbeafe; color:#1e40af; }

.badge-status-draft     { background:#f1f5f9; color:#475569; }

.badge-status-published { background:#dcfce7; color:#166534; }

.badge-status-suspended { background:#fee2e2; color:#991b1b; }

.stat-card { border: 1px solid var(--border); border-radius: var(--radius-lg); }

.stat-card .stat-icon {
      width: 44px; height: 44px; border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    }

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

.btn-sm { height: 32px; padding: 4px 12px; font-size: 0.8125rem; }

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

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

.btn-primary:focus-visible { outline: 3px solid rgba(20,184,166,.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); color: var(--ink); }

.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);
      background: var(--surface);
      transition: border-color 150ms, box-shadow 150ms;
    }

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

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

.table { font-size: 0.875rem; }

.table th {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-secondary);
      border-bottom: 1px solid var(--border);
      padding: 10px 12px;
      background: #f8fafc;
    }

.table td { padding: 11px 12px; vertical-align: middle; border-color: var(--border); }

.table-hover tbody tr:hover td { background: #f8fafc; }

.alert { border-radius: var(--radius-lg); border: none; font-size: 0.875rem; }

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

.page-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.page-subtitle { font-size: 0.8125rem; color: var(--ink-muted); margin: 2px 0 0; }

.offcanvas-sidebar .offcanvas-body { padding: 0 8px; display: flex; flex-direction: column; flex: 1; overflow-y: auto; }