/* sidebar.css — global left-hand navigation drawer (all pages except /login).
   Injected by sidebar.js. All classes are prefixed `lomi-` to avoid clashing
   with dashboard.css (which has its own right-side job drawer + modals). */

:root { --lomi-brand: rgb(38, 76, 200); }

/* Hamburger button — fixed top-left corner. */
/* Flat, to match the dashboard's other buttons (white bg, 1px #bbb border,
   3px radius, no shadow). */
.lomi-menu-btn {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #333;
  border: 1px solid #bbb; border-radius: 3px;
  cursor: pointer;
}
.lomi-menu-btn:hover { background: #f2f4fb; }

/* Make room for the button so it never covers page content.
   - pages WITH a header (index): push the header content right.
   - pages WITHOUT a header (sub-pages): push the container content down. */
body.lomi-nav.lomi-has-header header { padding-left: 64px; }
body.lomi-nav:not(.lomi-has-header) .container { padding-top: 64px; }

/* Dim overlay behind the open drawer. */
.lomi-sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s; z-index: 450;
}
.lomi-sidebar-overlay.open { opacity: 1; visibility: visible; }

/* The drawer itself. */
.lomi-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 270px;
  background: #fff; box-shadow: 2px 0 12px rgba(0,0,0,.15);
  transform: translateX(-100%); transition: transform .22s ease;
  z-index: 451; display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.lomi-sidebar.open { transform: translateX(0); }

.lomi-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid #eee;
}
.lomi-sidebar-logo { height: 28px; width: auto; display: block; }
.lomi-sidebar-close {
  background: none; border: none; font-size: 24px; line-height: 1;
  color: #888; cursor: pointer; padding: 0 4px;
}
.lomi-sidebar-close:hover { color: #333; }

/* Navigation links (top section). */
.lomi-links { padding: 10px 0; flex: 1; overflow-y: auto; }
.lomi-link {
  display: block; width: 100%; box-sizing: border-box;
  padding: 11px 20px; color: #333; text-decoration: none;
  font-size: 15px; font-family: inherit; text-align: left;
  background: none; border: none; cursor: pointer;
}
.lomi-link:hover { background: #f2f4fb; }
.lomi-link.active {
  color: var(--lomi-brand); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--lomi-brand);
}

/* Footer — signed-in user + expandable menu (settings / help / logout). */
.lomi-foot { border-top: 1px solid #eee; }
.lomi-user {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.lomi-user:hover { background: #f2f4fb; }
.lomi-avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #e6e9f5; color: var(--lomi-brand);
}
.lomi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lomi-user-email {
  flex: 1; font-size: 13px; color: #333;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lomi-chev { color: #999; font-size: 12px; transition: transform .15s; }
.lomi-user.expanded .lomi-chev { transform: rotate(180deg); }

.lomi-user-menu { border-top: 1px solid #f0f0f0; padding: 6px 0; }
.lomi-user-menu .lomi-link { padding: 10px 20px; font-size: 14px; }
.lomi-logout { color: #c0392b; }
.lomi-logout:hover { background: #fdecea; }