/* =====================================================
   STARLINK VMS — App Shell Layout (Sidebar + App Bar)
   ===================================================== */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg);
  overflow-x: hidden;
  max-width: 100vw;
}

/* =====================================================
   Sidebar
   ===================================================== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--color-navy);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 200;
  transition: width var(--transition-base), transform var(--transition-base);
  overflow: hidden;
}

.sidebar--collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  height: 64px;
  flex-shrink: 0;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
}

.sidebar__brand {
  font-size: var(--font-size-base);
  font-weight: 800;
  color: white;
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--transition-base);
}

.sidebar--collapsed .sidebar__brand { opacity: 0; width: 0; }

.sidebar__collapse {
  color: rgba(255,255,255,0.4);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-base);
}
.sidebar__collapse:hover { color: white; background: rgba(255,255,255,0.08); }
.sidebar--collapsed .sidebar__collapse { transform: rotate(180deg); }

/* ── Mobile-only logo banner (hidden on desktop) ── */
.sidebar__mobile-logo {
  display: none; /* hidden by default on desktop */
}

.sidebar__nav {
  flex: 1;
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.6);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast), border var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
}

.nav-item.active {
  background: var(--color-navy-mid);
  color: white;
  border-left-color: var(--color-primary);
}

.nav-item__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-item__avatar {
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.nav-item__label {
  transition: opacity var(--transition-base);
  white-space: nowrap;
}

.sidebar--collapsed .nav-item__label { opacity: 0; width: 0; overflow: hidden; }
.sidebar--collapsed .nav-item { justify-content: center; padding: var(--space-3); }

.sidebar__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: var(--space-2);
}

/* ── Sidebar bottom footer ── */
.sidebar__footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar__user-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  width: 100%;
}

.sidebar__profile-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: white;
  min-width: 0;
  flex: 1;
}

.sidebar__avatar-wrap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sidebar__signout-icon-btn {
  background: none;
  border: none;
  padding: var(--space-2);
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__signout-icon-btn:hover {
  color: #E74C3C; /* Logout red */
  background: rgba(231,76,60,0.1);
}

.sidebar--collapsed .sidebar__user-profile {
  flex-direction: column;
  padding: var(--space-3) var(--space-2);
  gap: var(--space-4);
}

.sidebar--collapsed .sidebar__signout-icon-btn {
  margin-top: var(--space-2);
}




/* Profile photo in App Bar (top right) */
.user-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}


/* =====================================================
   Main Area
   ===================================================== */
.main-area {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition-base);
  overflow-x: hidden;
  max-width: 100%;
  padding-top: var(--app-bar-height); /* Make room for fixed app bar */
}

.main-area--collapsed { margin-left: var(--sidebar-collapsed); }

/* =====================================================
   App Bar
   ===================================================== */
.app-bar {
  height: var(--app-bar-height);
  background: white;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  position: fixed; /* strictly fixed at the top */
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: left var(--transition-base); /* match sidebar motion */
}

/* adjust for collapsed sidebar */
.main-area--collapsed .app-bar {
  left: var(--sidebar-collapsed);
}

.app-bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.app-bar__menu-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast);
}

.app-bar__menu-btn:hover { background: var(--color-bg-alt); }

.app-bar__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-navy);
}

.app-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-bar__btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.app-bar__btn:hover { background: var(--color-bg-alt); color: var(--color-text); }

.notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  background: var(--color-orange);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.app-bar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: transparent;
  border: none;
  transition: background var(--transition-fast);
}
.app-bar__user:hover { background: var(--color-bg-alt); }

.user-avatar {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
}

.user-role {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* =====================================================
   Page Content Area
   ===================================================== */
.page-content {
  flex: 1;
  padding: var(--space-8);
  padding-bottom: 60px; /* Space for the fixed design footer */
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.page-header__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-navy);
}

.page-header__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* =====================================================
   Mobile + Responsive
   ===================================================== */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 150;
}
.sidebar-backdrop--show { display: block; }

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
  }
  .sidebar--mobile-open {
    transform: translateX(0);
  }
  .main-area {
    margin-left: 0 !important;
  }
  .app-bar {
    padding: 0 var(--space-4);
  }
  .app-bar__menu-btn {
    display: flex;
  }
  
  /* Fix design footer on mobile/tablet */
  .design-footer {
    left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .page-content {
    padding: var(--space-4);
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .page-header__actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .user-info { display: none; }
  
  /* Make all tables scrollable */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: var(--space-4);
  }
}

/* =====================================================
   Notification Panel
   ===================================================== */
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  border: 1px solid var(--color-border-light);
  z-index: 300;
  animation: slideDown 150ms ease;
  overflow: hidden;
}
.notif-panel__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-panel__title { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-navy); }
.notif-panel__mark-all {
  font-size: var(--font-size-xs); color: var(--color-primary); font-weight: 500;
  cursor: pointer; background: none; border: none; padding: 0;
}
.notif-panel__mark-all:hover { text-decoration: underline; }
.notif-panel__list { max-height: 380px; overflow-y: auto; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg-alt); }
.notif-item--unread { background: #EAF4FB; }
.notif-item--unread:hover { background: #D6EAF8; }

.notif-item__dot {
  position: absolute; top: 18px; right: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary);
}
.notif-item__icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notif-item__icon--blue   { background: var(--color-primary-light); color: var(--color-primary); }
.notif-item__icon--orange { background: #FEF5E7; color: var(--color-orange); }
.notif-item__icon--red    { background: #FDEDEC; color: var(--color-error); }
.notif-item__icon--green  { background: #EAFAF1; color: var(--color-success); }

.notif-item__title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-navy); margin-bottom: 2px; }
.notif-item__desc  { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.4; }
.notif-item__time  { font-size: 10px; color: var(--color-text-muted); margin-top: 4px; }

.notif-panel__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border-light);
  text-align: center;
}
.notif-panel__footer a { font-size: var(--font-size-xs); color: var(--color-primary); font-weight: 500; }

/* =====================================================
   User Dropdown Menu
   ===================================================== */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  border: 1px solid var(--color-border-light);
  z-index: 300;
  animation: slideDown 150ms ease;
  overflow: hidden;
}
.user-dropdown__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.user-dropdown__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm); font-weight: 700; flex-shrink: 0;
}
.user-dropdown__name  { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-navy); }
.user-dropdown__role  { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.user-dropdown__email { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }
.user-dropdown__body  { padding: var(--space-2) 0; }
.user-dropdown__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-5); font-size: var(--font-size-sm);
  color: var(--color-text); cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none; width: 100%; border: none; background: none; text-align: left;
}
.user-dropdown__item:hover { background: var(--color-bg-alt); color: var(--color-text); text-decoration: none; }
.user-dropdown__item--danger { color: var(--color-error); }
.user-dropdown__item--danger:hover { background: #FDEDEC; }
.user-dropdown__divider { height: 1px; background: var(--color-border-light); margin: var(--space-2) 0; }

/* Position wrappers for dropdown anchoring */
.app-bar__btn-wrap,
.app-bar__user-wrap { position: relative; }

/* =====================================================
   Design Credit Strip
   ===================================================== */
.design-footer {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  padding: 8px 0;
  background: var(--color-navy); /* Starlink Navy */
  color: white;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  z-index: 90; /* Below app bar (100) and sidebar (200) */
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: auto; /* Allow middle text selection if needed, but it doesn't block most things */
  transition: left var(--transition-base), width var(--transition-base);
}

.sidebar--collapsed ~ .main-area .design-footer {
  left: var(--sidebar-collapsed);
  width: calc(100% - var(--sidebar-collapsed));
}