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

:root{
  --primary:#2b7bff;
  --brand-red:#e31d23;
  --bg:#f4f7fb;
  --muted:#98a3ad;
  --sidebar-bg:#0f1724;
  --sidebar-sep:#12263b;
}

html,body{
  height:100%;
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:#172033;
}

/* Shared app shell */
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:240px; background:var(--sidebar-bg); color:#fff; padding:18px 12px; display:flex; flex-direction:column; overflow:auto; }
.sidebar .brand { font-weight:700; font-size:20px; padding:6px 12px; display:flex; align-items:center; gap:10px }
.sidebar .brand img { height:42px; width:42px; object-fit:contain; border-radius:6px; }

/* separator between logo and menu */
.sidebar .brand-sep { margin-top:12px; margin-bottom:14px; height:1px; background:var(--sidebar-sep); border-radius:2px }

/* Menu as button look */
.nav-item-custom { display:block; width:100%; padding:10px 16px; color:#c9d8ea; border-radius:8px; margin-bottom:8px; text-decoration:none; font-weight:500 }
.nav-item-custom .icon { margin-right:10px }
.nav-item-custom:hover { background:#12263b; color:#fff }

/* highlight active menu */
.nav-item-custom.active { background:#0b2540; color:#fff; box-shadow: inset 4px 0 0 var(--primary); }

/* separator above logout */
.sidebar-footer { margin-top:auto; padding:12px 12px; border-top:1px solid rgba(255,255,255,0.03); }

.content-area { flex:1; padding:24px; background:transparent; padding-bottom:90px; }

/* page header on right side */
.page-header { padding:8px 0 18px 0; border-bottom:1px solid #e9eef3; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between }
.page-header .title { font-size:28px; font-weight:600 }
.page-header .subtitle { color:var(--muted); }

/* footer at bottom same as login simple note */
.site-footer { text-align:center; color:var(--muted); padding:18px 0; font-size:13px; background:transparent }

/* Fix footer to bottom of viewport and align with content area (to the right of sidebar) */
.site-footer.fixed-bottom {
  position:fixed;
  bottom:0;
  left:240px; /* match sidebar width */
  right:0;
  background:transparent;
  padding:14px 24px;
  z-index:50;
}

/* Login page styles */
.login-page { display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.login-card { width:100%; max-width:1100px; background:white; box-shadow: 0 2px 6px rgba(0,0,0,0.06); border-radius:6px; overflow:hidden; display:flex; }
.login-left { flex:1.35; padding:40px; background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%); display:flex; align-items:center; justify-content:center; }
.login-right { width:380px; padding:48px 40px; border-left:1px solid #eef0f3; }
.logo-text { font-weight:700; font-size:22px; }
.logo-text .bit{ color:#000 }
.logo-text .raser{ color:var(--brand-red) }
.hero-illustration { max-width:100%; height:auto; opacity:0.95 }
.form-title { font-size:20px; font-weight:600; margin-bottom:18px }
.form-label { font-size:13px; color:#555; margin-bottom:6px }
.form-control-custom { width:100%; padding:12px 16px; border-radius:24px; border:1px solid #dfe7f0; background:#f3f7fb; outline:none; box-sizing:border-box }
.form-control-custom:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(43,123,255,0.08); background:#fff }
.submit-btn { background: linear-gradient(90deg,var(--primary),#2a59ff); color:white; padding:12px 18px; border-radius:28px; border:none; width:100%; font-weight:600; margin-top:12px }
.controls-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px }
.remember { display:flex; align-items:center; gap:8px; color:var(--primary); font-weight:600 }
.forgot-link { color:var(--primary); text-decoration:none }
.footer-note { text-align:center; color:var(--muted); padding:18px 0; font-size:13px }

/* Tenant list styles */
.table-modern { background:white; border-radius:6px; overflow:hidden; box-shadow: 0 2px 6px rgba(3,20,40,0.06); }
.table-modern table { margin-bottom:0 }
.table-modern thead th { background:#f6f9fc; border-bottom:0; font-weight:600 }
.table-modern tbody tr:hover { background:#fbfcff }
.pagination-custom { margin-top:16px; display:flex; justify-content:flex-end; }

/* cell truncation to avoid layout break on long values */
.cell-truncate{
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

.cell-wrap{
  max-width:320px;
  word-break:break-word;
  white-space:normal;
}

.table-modern td.actions {
  width:220px;
  white-space:nowrap;
}

/* make table responsive and constrain height with inner scroll */
.table-responsive-modern{
  overflow:auto;
  max-height:56vh;
}

@media (max-width: 920px) {
  .login-card { flex-direction:column }
  .login-right { width:100%; border-left:none; border-top:1px solid #eef0f3 }
  .login-left { padding:30px }
  .sidebar { width:72px }
  .nav-item-custom { padding:10px; justify-content:center }
  .brand .text { display:none }
  .site-footer.fixed-bottom { left:72px; }
}