/* app.css — Server-rendered overrides for Milo theme */

/* Remove SPA constraints — pages are real server pages now */
html, body { height: 100%; overflow: hidden; margin: 0; }
body { overflow: hidden; }
.app { display: flex; height: 100vh; overflow: hidden; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.content { flex: 1; overflow-y: auto; padding: 20px; }

/* Alert banners */
.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 14px;
  border: 1px solid;
}
.alert-success { background: #22c55e12; color: var(--green); border-color: #22c55e30; }
.alert-danger  { background: #ef444412; color: var(--red); border-color: #ef444430; }
.alert-info    { background: #60a5fa12; color: var(--blue); border-color: #60a5fa30; }

.alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Tenant switcher in topbar */
.tenant-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  transition: all .15s;
}
.tenant-switcher:hover { border-color: var(--pink); color: var(--pink); }
.tenant-switcher .tenant-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pink);
}

/* Master badge — always blue, independent of tenant brand */
.master-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #2563eb18;
  color: #2563eb;
  border: 1px solid #2563eb30;
}

/* Company card grid */
.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}
.company-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  transition: border-color .15s;
}
.company-card:hover { border-color: var(--pink-border); }
.company-card.active-company { border-color: var(--pink); background: var(--pink-dim); }

/* Stat row */
.stat-row {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}
.stat-item {
  text-align: center;
}
.stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 600;
}

/* Flex helpers */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-12 { margin-top: 12px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.ml-auto { margin-left: auto; }

/* Form inline for action buttons */
.inline-form { display: inline; margin: 0; }

/* Company logo in sidebar */
.sidebar-tenant-logo {
  height: 24px;
  max-width: 100px;
  object-fit: contain;
}

/* Collapsed sidebar override for PHP pages */
.sidebar.collapsed + .main .sidebar-toggle { left: 14px; }

/* Filter toggle buttons */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface);
  cursor: pointer;
  transition: all .15s;
}
.filter-toggle:hover { border-color: var(--pink-border); background: var(--pink-dim); }
.filter-toggle.active { border-color: var(--pink); background: var(--pink-dim); color: var(--pink); font-weight: 600; }
.ft-count { font-size: 10px; color: var(--text-muted); }
.filter-toggle.active .ft-count { color: var(--pink); }

/* Inbox unread badge */
.inbox-unread-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--pink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}