/* Beach Metro ad booker — styling tuned to resemble the existing app:
   left logo + welcome panel + bordered nav list, plain readable tables. */

:root {
  --bm-blue: #3b78c3;
  --bm-blue-dark: #2f66a8;
  --bm-link: #337ab7;
  --bm-border: #d4d4d4;
  --bm-panel-bg: #f7f7f7;
  --bm-text: #333;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--bm-text);
  background: #fff;
  margin: 0;
}

.layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px;
}

.sidebar { width: 200px; flex: 0 0 200px; }
.content { flex: 1 1 auto; min-width: 0; padding-top: 8px; }

/* Logo */
.logo { margin-bottom: 14px; }
.logo img { max-width: 100%; height: auto; display: block; }

/* Welcome panel */
.welcome-panel {
  background: linear-gradient(#ffffff, #ececec);
  border: 1px solid var(--bm-border);
  border-radius: 4px;
  padding: 14px 12px;
  margin-bottom: 18px;
  min-height: 70px;
  font-size: 15px;
}

/* Sidebar nav list */
.nav-menu { display: flex; flex-direction: column; }
.nav-link-item {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--bm-border);
  border-bottom: none;
  background: #fdfdfd;
  color: var(--bm-link);
  text-decoration: none;
  font-size: 15px;
}
.nav-menu .nav-link-item:last-child { border-bottom: 1px solid var(--bm-border); }
.nav-link-item:hover { background: #f0f0f0; text-decoration: underline; }
.nav-link-item.disabled-link { color: #9aa3ab; cursor: default; }
.nav-link-item.disabled-link:hover { background: #fdfdfd; text-decoration: none; }

/* Page heading */
.page-title {
  font-weight: 400;
  font-size: 30px;
  color: var(--bm-text);
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 18px;
}

/* Generic content panel */
.panel {
  background: var(--bm-panel-bg);
  border: 1px solid var(--bm-border);
  border-radius: 4px;
  padding: 16px;
}

/* Buttons — flat blue like the old app */
.btn-primary { background-color: var(--bm-blue); border-color: var(--bm-blue-dark); }
.btn-primary:hover,
.btn-primary:focus { background-color: #336bb0; border-color: #2a5c97; }

/* Tables */
table.data-table { width: 100%; border-collapse: collapse; background: #fff; }
table.data-table th,
table.data-table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; }
table.data-table thead th { border-bottom: 2px solid #ddd; font-weight: 600; }
table.data-table tbody tr:hover { background: #f7f7f7; }

/* Sidebar admin sub-section */
.nav-section {
  margin-top: 4px;
  padding: 8px 12px 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #888;
  background: #f0f0f0;
  border: 1px solid var(--bm-border);
  border-bottom: none;
}
.nav-link-item.nav-sub { padding-left: 24px; }
.nav-link-item.active { background: #eaf2fb; font-weight: 600; }

/* Login screen */
.login-body { background: #eef1f4; }
.login-card {
  max-width: 360px;
  margin: 8vh auto;
  background: #fff;
  border: 1px solid var(--bm-border);
  border-radius: 6px;
  padding: 28px 26px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.login-logo { display: block; max-width: 180px; height: auto; margin: 0 auto 18px; }
.login-title { font-weight: 400; font-size: 22px; text-align: center; margin-bottom: 18px; }

/* Spacing for inline action buttons in tables */
table.data-table td .btn { margin-right: 4px; }

/* Small screens: stack the sidebar on top */
@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; flex-basis: auto; }
}