/* ============================================================
   Hover World Productions — Admin Dashboard Styles
   Brand: Dark theme, Poppins/Roboto, Yellow (#FFD600) accent,
          Sky Blue (#00A1F1) highlights
   ============================================================ */

/* ---------- Import Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --bg-primary:    #111114;
  --bg-secondary:  #1B1B1F;
  --bg-card:       #222228;
  --bg-card-hover: #2A2A32;
  --bg-input:      #2B2B33;
  --bg-sidebar:    #151518;
  --border:        #333340;
  --border-light:  #444455;

  --text-primary:   #F5F5F5;
  --text-secondary: #9B9BA8;
  --text-muted:     #6B6B78;

  --accent:        #FFD600;
  --accent-hover:  #FFC400;
  --accent-dim:    rgba(255, 214, 0, 0.12);

  --blue:          #00A1F1;
  --blue-dim:      rgba(0, 161, 241, 0.12);
  --green:         #34C759;
  --green-dim:     rgba(52, 199, 89, 0.12);
  --red:           #F65B47;
  --red-dim:       rgba(246, 91, 71, 0.12);
  --orange:        #FF9500;
  --orange-dim:    rgba(255, 149, 0, 0.12);

  --font-heading:  'Poppins', sans-serif;
  --font-body:     'Roboto', sans-serif;

  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;
  --radius-xl:     20px;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:     0 8px 30px rgba(0,0,0,0.6);

  --sidebar-width: 260px;
  --topbar-height: 64px;
  --transition:    all 0.2s ease;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 15px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ========================================================== LOGIN PAGE ========================================================== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0a0a0c 0%, #1B1B1F 50%, #111114 100%);
  position: relative;
  overflow: hidden;
}

.login-page::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,214,0,0.06) 0%, transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
}

.login-page::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,161,241,0.04) 0%, transparent 70%);
  bottom: -100px; left: -100px;
  pointer-events: none;
}

.login-card {
  width: 100%; max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}

.login-logo {
  text-align: center;
  margin-bottom: 12px;
}

.login-logo img {
  height: 56px;
  filter: brightness(1.1);
}

.login-logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: 4px;
}

.login-logo-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 36px;
}

.login-card h2 {
  font-size: 1.3rem;
  margin-bottom: 28px;
  text-align: center;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ========================================================== FORMS ========================================================== */
.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition);
  outline: none;
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-input::placeholder { color: var(--text-muted); }

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239B9BA8'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

textarea.form-input { resize: vertical; min-height: 100px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ========================================================== BUTTONS ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #111;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,214,0,0.3);
}

.btn-secondary {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
}

.btn-blue {
  background: var(--blue);
  color: #fff;
}
.btn-blue:hover {
  background: #0091d6;
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--red);
  color: #fff;
}

.btn-sm { padding: 7px 14px; font-size: 0.78rem; }
.btn-lg { padding: 14px 32px; font-size: 0.95rem; }
.btn-full { width: 100%; }

.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ========================================================== LAYOUT — SIDEBAR + TOPBAR + MAIN ========================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

.sidebar-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-logo {
  width: 38px; height: 38px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  color: #111;
  font-size: 1rem;
}

.sidebar-brand {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.sidebar-brand small {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.sidebar-section-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 16px 12px 8px;
  font-weight: 600;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 400;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.sidebar-link:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.sidebar-link.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 500;
}
.sidebar-link .icon {
  width: 20px;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.sidebar-link .badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-avatar {
  width: 34px; height: 34px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}
.sidebar-user-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: 0.68rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Main content area */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
}

/* Topbar */
.topbar {
  height: var(--topbar-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
}

.topbar-breadcrumb {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.topbar-breadcrumb span { color: var(--text-secondary); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-search {
  position: relative;
}
.topbar-search input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 14px 8px 36px;
  color: var(--text-primary);
  font-size: 0.85rem;
  width: 240px;
  outline: none;
  transition: var(--transition);
}
.topbar-search input:focus {
  border-color: var(--accent);
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 0.9rem;
}

/* Page content */
.page-content {
  padding: 32px;
}

/* Cards & Containers */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  transition: var(--transition);
}

.card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.card-body {
  padding: 24px;
}

.card-body.no-pad {
  padding: 0;
}

/* Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: var(--transition);
}

.stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stat-card-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
}

.stat-card-icon.yellow { background: rgba(255, 214, 0, 0.2); color: var(--accent); }
.stat-card-icon.blue { background: rgba(0, 161, 241, 0.2); color: var(--blue); }
.stat-card-icon.green { background: rgba(52, 199, 89, 0.2); color: var(--green); }
.stat-card-icon.orange { background: rgba(255, 149, 0, 0.2); color: var(--orange); }
.stat-card-icon.red { background: rgba(246, 91, 71, 0.2); color: var(--red); }

.stat-card-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.stat-card-change {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Grid layouts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table thead {
  background: var(--bg-input);
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.data-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Status badges */
.status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-active { background: var(--green-dim); color: var(--green); }
.status-pending { background: var(--orange-dim); color: var(--orange); }
.status-completed { background: var(--green-dim); color: var(--green); }
.status-cancelled { background: var(--red-dim); color: var(--red); }
.status-draft { background: var(--blue-dim); color: var(--blue); }
.status-approved { background: var(--green-dim); color: var(--green); }
.status-rejected { background: var(--red-dim); color: var(--red); }
.status-in_progress { background: var(--blue-dim); color: var(--blue); }

/* Role badges */
.role-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.role-admin { background: var(--red-dim); color: var(--red); }
.role-staff { background: var(--orange-dim); color: var(--orange); }
.role-pilot { background: var(--blue-dim); color: var(--blue); }
.role-client { background: var(--green-dim); color: var(--green); }
.role-public { background: var(--accent-dim); color: var(--accent); }
.role-private { background: var(--text-muted); color: var(--bg-primary); }

/* Detail grid */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.detail-value {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.6;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.empty-state .icon {
  font-size: 3rem;
  margin-bottom: 16px;
  color: var(--text-muted);
}

.empty-state p {
  margin: 0;
  font-size: 1rem;
}

/* Activity list */
.activity-list {
  list-style: none;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.activity-dot.green { background: var(--green); }
.activity-dot.blue { background: var(--blue); }
.activity-dot.red { background: var(--red); }
.activity-dot.yellow { background: var(--accent); }

.activity-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.activity-text strong {
  color: var(--text-primary);
}

.activity-time {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Modals */
.modal-overlay {
  z-index: 99999 !important;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transition);
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}

/* Toast notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  animation: slideIn 0.3s ease;
}

.toast.hide {
  animation: slideOut 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateX(400px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(400px); opacity: 0; }
}

.toast-success { border-left: 4px solid var(--green); }
.toast-error { border-left: 4px solid var(--red); }
.toast-info { border-left: 4px solid var(--blue); }

.toast i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.toast-success i { color: var(--green); }
.toast-error i { color: var(--red); }
.toast-info i { color: var(--blue); }

.toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

/* Hamburger */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
}

/* Utility classes */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-blue { color: var(--blue); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-orange { color: var(--orange); }

.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }

.flex { display: flex; }
.items-center { align-items: center; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }

/* ========================================================== NEW FEATURE STYLES ========================================================== */

/* Role Switcher */
.role-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.role-switcher-label {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 8px;
}
.role-pill {
  padding: 5px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: var(--transition);
}
.role-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.role-pill.active { background: var(--accent); color: #111; border-color: var(--accent); }

/* Map Container */
.project-map {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 16px;
  margin-bottom: 24px;
}
.mini-map {
  width: 100%;
  height: 250px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.recommend-map {
  width: 100%;
  height: 350px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 12px;
}

/* Drop Zone */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: var(--bg-input);
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.drop-zone .icon { font-size: 2rem; color: var(--text-muted); margin-bottom: 8px; }
.drop-zone p { color: var(--text-secondary); font-size: 0.88rem; }
.drop-zone small { color: var(--text-muted); font-size: 0.75rem; }

/* Upload Progress */
.upload-progress {
  margin-top: 12px;
}
.upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.upload-item .filename { flex: 1; font-size: 0.85rem; }
.upload-item .progress-bar {
  width: 120px;
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}
.upload-item .progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}

/* Pilot Cards */
.pilots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.pilot-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  cursor: pointer;
  transition: var(--transition);
}
.pilot-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pilot-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.pilot-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}
.pilot-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
}
.pilot-region {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.pilot-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.cap-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cap-badge.rtk { background: var(--blue-dim); color: var(--blue); }
.cap-badge.ppk { background: var(--green-dim); color: var(--green); }
.cap-badge.lidar { background: var(--accent-dim); color: var(--accent); }
.cap-badge.thermal { background: var(--red-dim); color: var(--red); }
.cap-badge.gnss { background: var(--orange-dim); color: var(--orange); }
.cap-badge.osha { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.cap-badge.faa { background: var(--green-dim); color: var(--green); }
.cap-badge.multispectral { background: rgba(236,72,153,0.12); color: #ec4899; }

/* Pilot Recommend Cards */
.recommend-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  transition: var(--transition);
}
.recommend-card:hover { border-color: var(--accent); }
.recommend-distance {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 70px;
  text-align: center;
}
.recommend-distance small {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 400;
}
.recommend-info { flex: 1; }
.recommend-info .name { font-weight: 600; margin-bottom: 4px; }

/* Mission Briefing (Pilot View) */
.mission-briefing {
  background: linear-gradient(135deg, var(--bg-card) 0%, #1e1e2a 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
}
.mission-briefing h2 {
  color: var(--accent);
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.mission-briefing .mission-code {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 20px;
}
.mission-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.btn-accept {
  background: var(--green);
  color: #fff;
  padding: 12px 32px;
  font-size: 0.9rem;
}
.btn-accept:hover { background: #2eb34c; transform: translateY(-1px); }
.btn-decline {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  padding: 12px 32px;
  font-size: 0.9rem;
}
.btn-decline:hover { background: var(--red-dim); }

/* Checkbox/Toggle styled */
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.toggle-item .check {
  color: var(--green);
  font-size: 0.9rem;
}
.toggle-item .nocheck {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Profile sections */
.profile-section {
  margin-bottom: 24px;
}
.profile-section-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
  .hamburger {
    display: block;
  }
  .topbar {
    padding: 0 16px;
  }
  .topbar-search input {
    width: 120px;
  }
  .page-content {
    padding: 16px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .pilots-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* ══════ V2 Styles: Pipeline, Pricing, Modals ══════ */

/* Mission Status Pipeline */
.status-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  padding: 16px 0;
  overflow-x: auto;
}
.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  flex-shrink: 0;
}
.pipeline-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.3s;
}
.pipeline-step.active .pipeline-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,102,0,0.4);
}
.pipeline-step.done .pipeline-dot {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.pipeline-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 80px;
  line-height: 1.2;
}
.pipeline-step.active .pipeline-label { color: var(--accent); font-weight: 600; }
.pipeline-step.done .pipeline-label { color: var(--green); }
.pipeline-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 16px;
  margin: 0 -4px;
  margin-bottom: 20px;
}

/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.pricing-item {
  background: var(--bg-input);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.pricing-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pricing-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}
.pricing-value.text-green { color: var(--green); }
.pricing-value.text-red { color: var(--red); }

/* Modal Overlay */
/* V2 modal-overlay removed - conflicts with base display:none */
.modal-content {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 28px;
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border: 1px solid var(--border);
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
}
.form-group textarea {
  resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,102,0,0.15);
}

/* Helper */
.mt-md { margin-top: 16px; }

/* New status colors */
.status-sourcing_pilot { background: rgba(156,39,176,0.15); color: #ce93d8; }
.status-pilot_assigned { background: rgba(0,161,241,0.15); color: var(--blue); }
.status-pilot_accepted { background: rgba(0,200,150,0.15); color: #69f0ae; }
.status-pilot_scheduled { background: rgba(255,193,7,0.15); color: #ffd54f; }
.status-data_uploaded { background: rgba(0,161,241,0.15); color: var(--blue); }

/* NDAA badge */
.cap-badge.ndaa {
  background: rgba(39,174,96,0.15);
  color: #27ae60;
}

/* Orange dim background for alerts */
:root { --orange-dim: rgba(255,102,0,0.08); }

/* Responsive pipeline */
@media (max-width: 768px) {
  .status-pipeline { justify-content: flex-start; }
  .pipeline-step { min-width: 60px; }
  .pipeline-label { font-size: 0.6rem; max-width: 60px; }
  .form-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}


/* === V2 Styles === */
.mission-status-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow-x: auto;
  padding: 8px 0;
  gap: 4px;
}
.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  flex-shrink: 0;
}
.pipeline-step .step-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-light);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  color: var(--text-muted);
  transition: all 0.3s;
}
.pipeline-step.active .step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  box-shadow: 0 0 12px rgba(255,193,7,0.4);
}
.pipeline-step.completed .step-dot {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.pipeline-step .step-label {
  font-size: 0.65rem;
  margin-top: 6px;
  text-align: center;
  color: var(--text-muted);
  text-transform: capitalize;
  max-width: 80px;
}
.pipeline-step.active .step-label { color: var(--accent); font-weight: 600; }
.pipeline-step.completed .step-label { color: var(--green); }
.pipeline-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 12px;
  margin-top: -18px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.pricing-item { text-align: center; }
.pricing-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pricing-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}


/* ═══ Scheduling Calendar ═══ */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.calendar-nav button {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
.calendar-nav button:hover { background: rgba(255,255,255,0.12); }
.calendar-month-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  min-width: 220px;
  text-align: center;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
}
.calendar-day-header {
  background: rgba(255,255,255,0.08);
  padding: 0.6rem 0.4rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.calendar-day {
  background: rgba(255,255,255,0.02);
  min-height: 110px;
  padding: 0.4rem;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.calendar-day:hover { background: rgba(255,255,255,0.06); }
.calendar-day.other-month { opacity: 0.3; }
.calendar-day.today {
  background: rgba(255,184,0,0.08);
  border: 1px solid rgba(255,184,0,0.3);
}
.calendar-day-number {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.3rem;
}
.calendar-day.today .calendar-day-number { color: #FFB800; }
.calendar-event {
  font-size: 0.65rem;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.4;
}
.calendar-event:hover { filter: brightness(1.2); }
.calendar-event.flight { background: rgba(255,184,0,0.8); }
.calendar-event.mission-start { background: rgba(76,175,80,0.8); }
.calendar-event.mission-end { background: rgba(244,67,54,0.8); }
.calendar-event.delivery { background: rgba(33,150,243,0.8); }
.calendar-event.requested-capture { background: rgba(255,107,53,0.85); }

/* Weather overlay */
.weather-badge {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.weather-icon { font-size: 1rem; }
.weather-temp { font-size: 0.6rem; }
.weather-wind { font-size: 0.6rem; }
.weather-wind.high-wind { color: #F44336; font-weight: 600; }
.weather-wind.moderate-wind { color: #FFB800; }

/* Event filter pills */
.calendar-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filter-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  transition: all 0.2s;
}
.filter-pill.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.filter-pill .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

/* Calendar sidebar / event detail */
.calendar-sidebar {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 1.25rem;
}
.calendar-sidebar h3 {
  font-size: 1rem;
  color: #FFB800;
  margin-bottom: 1rem;
}
.upcoming-event {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items: flex-start;
}
.upcoming-event:last-child { border-bottom: none; }
.upcoming-date-badge {
  min-width: 48px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 0.4rem;
}
.upcoming-date-badge .day { font-size: 1.2rem; font-weight: 700; color: #fff; }
.upcoming-date-badge .month { font-size: 0.6rem; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.upcoming-event-info { flex: 1; }
.upcoming-event-info .event-title { font-size: 0.85rem; font-weight: 600; color: #fff; }
.upcoming-event-info .event-detail { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
.upcoming-event-info .event-pilot { font-size: 0.7rem; color: rgba(255,255,255,0.4); }
.upcoming-weather {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  min-width: 50px;
}

/* ══════════════════════════════════════════════════════════════
   Assets Management
   ══════════════════════════════════════════════════════════════ */

.assets-page { display: flex; flex-direction: column; gap: 16px; }

/* Upload Zone */
.upload-zone {
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  transition: all 0.3s;
  background: rgba(255,255,255,0.02);
}
.upload-zone.drag-over {
  border-color: var(--accent);
  background: rgba(218,165,32,0.08);
  transform: scale(1.01);
}
.upload-zone-icon { font-size: 48px; color: var(--accent); margin-bottom: 12px; }
.upload-zone h3 { margin: 0 0 6px; font-size: 18px; color: var(--text-primary); }
.upload-zone p { margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; }
.upload-browse-btn {
  color: var(--accent); cursor: pointer; text-decoration: underline;
  font-weight: 600;
}
.upload-project-select {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; font-size: 13px;
}
.upload-project-select select {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); padding: 6px 10px; font-size: 13px;
}
.upload-project-select label { color: var(--text-secondary); }

/* Upload Progress */
.upload-progress-list { margin-top: 16px; }
.upload-progress-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: rgba(255,255,255,0.03);
  border-radius: 8px; margin-bottom: 6px;
}
.upload-file-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.upload-filename { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.upload-size { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.upload-bar-wrap {
  width: 120px; height: 6px; background: rgba(255,255,255,0.1);
  border-radius: 3px; overflow: hidden;
}
.upload-bar {
  height: 100%; background: var(--accent); border-radius: 3px;
  transition: width 0.2s;
}
.upload-percent { font-size: 12px; color: var(--text-secondary); width: 36px; text-align: right; }
.upload-progress-item.upload-done .upload-bar { background: var(--success); }
.upload-progress-item.upload-done .upload-percent { color: var(--success); }
.upload-progress-item.upload-error .upload-bar { background: var(--danger); }
.upload-progress-item.upload-error .upload-percent { color: var(--danger); }

/* Toolbar */
.assets-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--bg-card); border-radius: 10px;
  border: 1px solid var(--border);
}
.assets-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border-radius: 6px;
  padding: 6px 12px; flex: 1; min-width: 200px;
}
.assets-search i { color: var(--text-secondary); font-size: 13px; }
.assets-search input {
  background: none; border: none; outline: none; color: var(--text-primary);
  font-size: 13px; width: 100%;
}
.assets-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.assets-filters select {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); padding: 6px 10px; font-size: 12px;
}
.assets-actions { display: flex; gap: 8px; margin-left: auto; }
.btn-sm {
  padding: 6px 14px; font-size: 12px; border-radius: 6px;
  background: var(--accent); color: #000; border: none; cursor: pointer;
  font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.btn-sm:hover { filter: brightness(1.1); }
.btn-sm.btn-outline {
  background: transparent; border: 1px solid var(--border); color: var(--text-primary);
}

/* Stats Bar */
.assets-stats {
  display: flex; gap: 16px; flex-wrap: wrap; padding: 0;
}
.stat-pill {
  font-size: 13px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}
.stat-pill strong { color: var(--text-primary); }

/* Asset Table */
.asset-row:hover { background: rgba(255,255,255,0.03); }
.asset-file-info { display: flex; align-items: center; gap: 10px; }
.file-type-icon { font-size: 18px; color: var(--accent); opacity: 0.7; }
.asset-filename { font-weight: 500; font-size: 13px; }
.asset-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.project-badge {
  background: rgba(218,165,32,0.12); color: var(--accent);
  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.category-tag {
  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.06); color: var(--text-secondary);
}
.cat-raw_imagery { background: rgba(59,130,246,0.12); color: #60a5fa; }
.cat-raw_lidar { background: rgba(168,85,247,0.12); color: #c084fc; }
.cat-processed { background: rgba(34,197,94,0.12); color: #4ade80; }
.cat-client_approved { background: rgba(218,165,32,0.15); color: var(--accent); }
.cat-boundary { background: rgba(244,63,94,0.12); color: #fb7185; }
.cat-internal { background: rgba(255,255,255,0.08); color: var(--text-secondary); }
.cat-report { background: rgba(14,165,233,0.12); color: #38bdf8; }
.cat-gnss_logs { background: rgba(234,179,8,0.12); color: #facc15; }
.cat-flight_log { background: rgba(249,115,22,0.12); color: #fb923c; }

.vis-badge {
  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500;
}
.vis-internal { background: rgba(255,255,255,0.08); color: var(--text-secondary); }
.vis-pilot { background: rgba(59,130,246,0.12); color: #60a5fa; }
.vis-client { background: rgba(34,197,94,0.12); color: #4ade80; }
.vis-public { background: rgba(218,165,32,0.15); color: var(--accent); }

.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px;
}
.status-uploaded { background: var(--warning); }
.status-approved { background: var(--success); }
.status-rejected { background: var(--danger); }
.status-archived { background: var(--text-secondary); }
.status-uploading { background: var(--info); }
.status-processing { background: #c084fc; }

.asset-actions { white-space: nowrap; }
.btn-icon {
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  color: var(--text-secondary); font-size: 14px; border-radius: 4px;
}
.btn-icon:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.btn-icon.text-success { color: var(--success); }
.btn-icon.text-success:hover { background: rgba(34,197,94,0.15); }

.text-center { text-align: center; }

/* ══════════════════════════════════════════════════════════════
   Notification Bell
   ══════════════════════════════════════════════════════════════ */

.notif-wrapper { position: relative; margin-right: 12px; }
.notif-bell {
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 18px; padding: 8px;
  border-radius: 8px; position: relative;
  transition: all 0.2s;
}
.notif-bell:hover { color: var(--accent); background: rgba(255,255,255,0.05); }
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--danger); color: #fff; font-size: 10px;
  font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; padding: 0 4px;
  line-height: 1;
}

.notif-panel {
  position: absolute; top: 100%; right: 0; margin-top: 8px;
  width: 380px; max-height: 480px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; z-index: 1000;
  overflow: hidden;
}
.notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.notif-header h4 { margin: 0; font-size: 15px; color: var(--text-primary); }
.notif-mark-all {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.notif-mark-all:hover { text-decoration: underline; }

.notif-list {
  overflow-y: auto; flex: 1; max-height: 420px;
}
.notif-empty {
  text-align: center; padding: 40px 20px; color: var(--text-secondary);
}
.notif-empty i { font-size: 32px; margin-bottom: 8px; display: block; opacity: 0.4; }

.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; cursor: pointer; transition: background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.unread { background: rgba(218,165,32,0.04); }

.notif-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.notif-assign { background: rgba(59,130,246,0.15); color: #60a5fa; }
.notif-upload { background: rgba(168,85,247,0.15); color: #c084fc; }
.notif-approve { background: rgba(34,197,94,0.15); color: #4ade80; }
.notif-status { background: rgba(249,115,22,0.15); color: #fb923c; }
.notif-delivery { background: rgba(218,165,32,0.15); color: var(--accent); }
.notif-comment { background: rgba(14,165,233,0.15); color: #38bdf8; }
.notif-system { background: rgba(255,255,255,0.08); color: var(--text-secondary); }

.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.notif-msg {
  font-size: 12px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-time { font-size: 11px; color: var(--text-secondary); opacity: 0.7; margin-top: 3px; }

.notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 6px;
}

/* ══════════════════════════════════════════════════════════════
   Project Templates
   ══════════════════════════════════════════════════════════════ */

.template-gallery { max-width: 1100px; }
.template-intro { margin-bottom: 24px; }
.template-intro h2 { font-size: 22px; margin: 0 0 6px; }
.template-intro p { color: var(--text-secondary); margin: 0; font-size: 14px; }

.template-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.template-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; cursor: pointer;
  transition: all 0.2s; display: flex; gap: 16px; align-items: flex-start;
}
.template-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.template-card.template-blank { border-style: dashed; opacity: 0.7; }
.template-card.template-blank:hover { opacity: 1; }

.template-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.template-info { flex: 1; min-width: 0; }
.template-info h3 { font-size: 15px; margin: 0 0 4px; color: var(--text-primary); }
.template-info p { font-size: 13px; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.4; }
.template-meta {
  display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-secondary);
}
.template-meta span { display: flex; align-items: center; gap: 4px; }
.template-meta i { font-size: 10px; opacity: 0.7; }
.template-loading { text-align: center; padding: 60px; color: var(--text-secondary); font-size: 16px; }

/* Project Creation Form */
.project-form-container { max-width: 900px; }
.template-banner {
  background: rgba(218,165,32,0.1); border: 1px solid rgba(218,165,32,0.25);
  border-radius: 8px; padding: 10px 16px; margin-bottom: 20px;
  font-size: 13px; color: var(--accent);
}
.template-banner i { margin-right: 6px; }

.form-grid { display: flex; flex-direction: column; gap: 24px; }
.form-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
}
.form-section h3 {
  font-size: 15px; margin: 0 0 16px; color: var(--text-primary);
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.form-section h3 i { margin-right: 8px; color: var(--accent); }

.form-row { display: flex; gap: 16px; margin-bottom: 12px; }
.form-group { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.form-group label {
  font-size: 12px; color: var(--text-secondary); font-weight: 500;
}
.form-group input, .form-group select, .form-group textarea {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 12px; color: var(--text-primary);
  font-size: 13px; font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--accent);
}
.form-group textarea { resize: vertical; }

.form-actions {
  display: flex; gap: 12px; justify-content: flex-end;
  padding: 20px 0; margin-top: 8px;
}
.btn-outline {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-primary); padding: 10px 24px; border-radius: 8px;
  cursor: pointer; font-size: 14px;
}
.btn-outline:hover { border-color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════════
   Client Portal
   ══════════════════════════════════════════════════════════════ */

.client-portal { max-width: 1100px; }
.client-welcome {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; gap: 24px; flex-wrap: wrap;
}
.welcome-text h2 { font-size: 24px; margin: 0 0 4px; }
.welcome-text p { color: var(--text-secondary); margin: 0; font-size: 14px; }

.welcome-stats { display: flex; gap: 24px; }
.client-stat { text-align: center; }
.client-stat-num { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.client-stat-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

.client-projects {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.client-project-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; cursor: pointer;
  transition: all 0.2s;
}
.client-project-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.cpc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cpc-code { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 0.5px; }
.cpc-status {
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px;
}
.cpc-name { font-size: 17px; margin: 0 0 10px; color: var(--text-primary); }
.cpc-meta {
  display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary);
  margin-bottom: 10px;
}
.cpc-meta i { margin-right: 4px; opacity: 0.6; }
.cpc-notes {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  margin-bottom: 12px; padding: 8px 12px;
  background: rgba(255,255,255,0.03); border-radius: 6px;
  border-left: 3px solid var(--accent);
}
.cpc-footer { display: flex; gap: 8px; flex-wrap: wrap; }
.cpc-badge {
  font-size: 11px; padding: 4px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.06); color: var(--text-secondary);
}
.cpc-badge i { margin-right: 4px; }


/* ══════════════════════════════════════════════════════════════════════════
   Activity Feed Widget
   ══════════════════════════════════════════════════════════════════════════ */

.activity-feed { }

.activity-feed__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.activity-feed__header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
  margin: 0;
}

.activity-feed__header h3 i {
  color: #f0b429;
  margin-right: 6px;
}

.activity-feed__controls .btn-icon {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.activity-feed__controls .btn-icon:hover {
  color: #f0b429;
  background: rgba(255,255,255,0.05);
}

.activity-feed__list {
  max-height: 400px;
  overflow-y: auto;
}

.activity-feed--compact .activity-feed__list {
  max-height: 320px;
}

.activity-feed__loading,
.activity-feed__empty {
  text-align: center;
  color: #888;
  padding: 24px;
  font-size: 13px;
}

.activity-feed__loading i,
.activity-feed__empty i {
  margin-right: 6px;
}

.activity-feed__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s;
}

.activity-feed__item:hover {
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}

.activity-feed__item:last-child {
  border-bottom: none;
}

.activity-feed__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.activity-feed__content {
  flex: 1;
  min-width: 0;
}

.activity-feed__summary {
  font-size: 13px;
  color: #ccc;
  line-height: 1.4;
}

.activity-feed__actor {
  font-weight: 600;
  color: #e0e0e0;
}

.activity-feed__action {
  color: #999;
  margin-left: 4px;
}

.activity-feed__object {
  font-size: 12px;
  color: #f0b429;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-feed__detail {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
  font-family: 'SF Mono', monospace;
}

.activity-feed__time {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Scrollbar for activity feed */
.activity-feed__list::-webkit-scrollbar {
  width: 4px;
}

.activity-feed__list::-webkit-scrollbar-track {
  background: transparent;
}

.activity-feed__list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}


/* ══════ Project Notes System ══════ */
.notes-list { display:flex; flex-direction:column; gap:8px; }
.note-item { border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--card-bg); }
.note-item.note-internal { border-left:3px solid var(--orange); }
.note-item.note-client { border-left:3px solid var(--blue,#3b82f6); }
.note-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.note-meta { display:flex; align-items:center; gap:8px; }
.note-author { font-size:0.82rem; font-weight:600; color:var(--text-primary); }
.note-author i { margin-right:4px; color:var(--text-muted); }
.note-vis-badge { font-size:0.7rem; padding:2px 8px; border-radius:99px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.note-vis-client { background:rgba(59,130,246,0.12); color:#3b82f6; }
.note-vis-internal { background:rgba(249,115,22,0.12); color:var(--orange); }
.note-actions { display:flex; align-items:center; gap:4px; }
.note-time { font-size:0.75rem; color:var(--text-muted); margin-right:4px; }
.note-content { font-size:0.9rem; color:var(--text-secondary); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.btn-icon { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px 6px; border-radius:6px; font-size:0.82rem; transition:all 0.15s; }
.btn-icon:hover { background:var(--hover-bg,rgba(255,255,255,0.08)); color:var(--text-primary); }
.btn-icon-danger:hover { color:#ef4444; background:rgba(239,68,68,0.1); }
.note-compose { border-top:1px solid var(--border); padding-top:12px; }
.note-compose textarea { background:var(--input-bg,var(--card-bg)); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--text-primary); font-size:0.9rem; font-family:inherit; }
.note-compose textarea:focus { outline:none; border-color:var(--orange); }
.btn-accent { background:var(--orange); color:#fff; border:none; }
.btn-accent:hover { filter:brightness(1.1); }


/* ══════ Map Enhancements ══════ */
.leaflet-kml-download a:hover { background:#f0f0f0 !important; color:var(--orange) !important; }
.leaflet-control-layers-base label, .leaflet-control-layers-overlays label { cursor:pointer; }


/* ══════ Audit Log Styles ══════ */
.audit-action-badge { font-size:0.78rem; padding:2px 8px; border-radius:6px; background:var(--hover-bg,rgba(255,255,255,0.06)); color:var(--text-primary); font-weight:500; white-space:nowrap; }
.audit-row:hover { background:var(--hover-bg,rgba(255,255,255,0.03)); }

/* ══════ Asset Groups ══════ */
.asset-group .card-header:hover { background:var(--hover-bg,rgba(255,255,255,0.03)); }


/* ══════ Flight Schedule Weather Cards ══════ */
.weather-day-card { border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; transition:all 0.15s; }
.weather-day-card:hover { border-color:var(--orange); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.2); }
.weather-day-card.weather-bad { border-color:rgba(239,68,68,0.3); background:rgba(239,68,68,0.04); }
.weather-day-card.weather-good { border-color:rgba(34,197,94,0.2); }


/* ====== Multi-Type Select Chips ====== */
.multi-type-grid { display:flex; flex-wrap:wrap; gap:6px; }
.type-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border:1px solid var(--border); border-radius:20px; cursor:pointer; font-size:0.82rem; transition:all 0.15s; user-select:none; }
.type-chip input[type="checkbox"] { display:none; }
.type-chip:has(input:checked) { border-color:var(--orange); background:rgba(249,115,22,0.12); color:var(--orange); font-weight:600; }
.type-chip:hover { border-color:var(--orange); }
.type-chip-proc { border-style:dashed; }
.type-chip-proc:has(input:checked) { border-color:#8b5cf6; background:rgba(139,92,246,0.12); color:#8b5cf6; border-style:solid; }


/* ====== AI Mission Paste ====== */
.template-ai .template-icon { animation: ai-pulse 2s ease-in-out infinite; }
@keyframes ai-pulse { 0%,100% { opacity:1; } 50% { opacity:0.7; } }


/* Client action button fixes */
.client-action-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.client-action-btns .btn {
  font-size: 0.82rem !important;
  padding: 6px 14px !important;
  white-space: nowrap;
}


/* Reschedule Calendar */
.reschedule-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.reschedule-header {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px;
}
.reschedule-day {
  text-align: center;
  padding: 8px 4px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: default;
}
.reschedule-day.empty { visibility: hidden; }
.reschedule-day.past { color: var(--text-muted); opacity: 0.4; }
.reschedule-day.selectable {
  cursor: pointer;
  transition: background 0.15s;
}
.reschedule-day.selectable:hover {
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
}

/* Responsive schedule calendar fix */
@media (max-width: 900px) {
  .calendar-wrapper { overflow-x: auto; }
  .calendar-grid { min-width: 300px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .card-header { flex-direction: column; gap: 8px; }
  .detail-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .sidebar { width: 200px !important; }
  .main-content { margin-left: 200px !important; }
  .data-table { font-size: 0.78rem; }
  .data-table th, .data-table td { padding: 8px 6px; }
}


/* Deliverables Checklist */
.deliverable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}
.deliverable-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.15s;
  background: var(--bg-card);
}
.deliverable-chip:hover {
  border-color: var(--accent);
}
.deliverable-chip input[type="checkbox"] {
  accent-color: var(--accent);
}
.deliverable-chip input[type="checkbox"]:checked + i {
  color: var(--accent);
}

/* KML Drop Zone */
.kml-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.kml-drop-zone:hover, .kml-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(255, 152, 0, 0.05);
}

/* Address autocomplete dropdown */
.address-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.address-autocomplete div:last-child {
  border-bottom: none !important;
}


/* Reschedule calendar day styles */
.reschedule-day-name { font-size:0.75rem; font-weight:600; color:var(--text-muted); padding:4px 0; }
.reschedule-day { padding:8px 4px; border-radius:8px; font-size:0.85rem; cursor:pointer; color:var(--text); transition:all 0.15s; }
.reschedule-day:hover:not(.past):not(.empty) { background:rgba(234,179,8,0.15); }
.reschedule-day.past { color:var(--text-muted); opacity:0.4; cursor:default; }
.reschedule-day.empty { cursor:default; }
.reschedule-day.selected { background:var(--accent); color:#1a1a2e; font-weight:700; }

/* Force Leaflet maps below modals */
.leaflet-container { z-index: 1 !important; }
.project-map { z-index: 1 !important; position: relative; }
#rescheduleModalWrapper, #kmlUploadOverlay { z-index: 100000 !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
#rescheduleModalWrapper > div, #kmlUploadOverlay > div { position: relative; z-index: 100001; }

/* Override Leaflet tile pane z-index to prevent bleed-through on modals */
.leaflet-tile-pane { z-index: 1 !important; }
.leaflet-overlay-pane { z-index: 2 !important; }
.leaflet-shadow-pane { z-index: 3 !important; }
.leaflet-marker-pane { z-index: 4 !important; }
.leaflet-tooltip-pane { z-index: 5 !important; }
.leaflet-popup-pane { z-index: 6 !important; }
.leaflet-map-pane { z-index: 1 !important; }
.leaflet-control { z-index: 10 !important; }

/* Force map to create contained stacking context */
.project-map { isolation: isolate; position: relative; z-index: 0 !important; }
#dashMap { isolation: isolate; position: relative; z-index: 0 !important; }

/* Stat card hover/active states */
.stat-card { transition: transform 0.15s, box-shadow 0.15s, outline-color 0.15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.stat-card[style*="outline"] { transform: translateY(-2px); }

/* Airspace toggle button */
#airspaceToggleBtn.active { background: var(--accent); color: #1a1a2e; border-color: var(--accent); }

/* Collapsible sidebar */
.sidebar { transition: width 0.25s ease; overflow: hidden; }
.sidebar.collapsed .sidebar-nav { padding: 8px 4px; }
.sidebar.collapsed .sidebar-link { gap: 0; }
.sidebar.collapsed .sidebar-footer { padding: 12px 8px; }
.sidebar.collapsed .sidebar-user { justify-content: center; }
.main-content { transition: margin-left 0.25s ease; }

/* Client progress tracker */
.client-progress { animation: fadeIn 0.5s ease; }

/* ── Sidebar collapse styles ── */
.sidebar {
  transition: width 0.25s ease;
}
.sidebar.collapsed {
  width: 64px !important;
  overflow: visible;
}
.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 12px 8px;
  cursor: pointer;
}
.sidebar.collapsed .sidebar-header img {
  width: 32px !important;
  height: 32px !important;
}
.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed #sidebarToggle {
  display: none !important;
}
.sidebar.collapsed .sidebar-nav {
  padding: 0 4px;
}
.sidebar.collapsed .sidebar-link {
  justify-content: center;
  padding: 14px 0;
  font-size: 0;
  border-radius: 8px;
  margin: 2px 0;
}
.sidebar.collapsed .sidebar-link .icon {
  font-size: 18px;
  margin: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.sidebar.collapsed .sidebar-link:hover {
  background: rgba(255,255,255,0.08);
}
.sidebar.collapsed .sidebar-link.active {
  background: transparent;
  position: relative;
}
.sidebar.collapsed .sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.15);
  border: 2px solid var(--accent, #f59e0b);
  z-index: -1;
}
.sidebar.collapsed .sidebar-link.active .icon {
  color: var(--accent, #f59e0b) !important;
}
.sidebar.collapsed + .main-content,
.sidebar.collapsed ~ .main-content {
  margin-left: 64px !important;
}
/* tooltip on hover in collapsed mode */
.sidebar.collapsed .sidebar-link {
  position: relative;
}
.sidebar.collapsed .sidebar-link::after {
  content: attr(data-page);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: #1e1e2e;
  color: #e5e7eb;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  margin-left: 8px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.sidebar.collapsed .sidebar-link:hover::after {
  opacity: 1;
}
/* User profile in collapsed mode */
.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 12px 0;
}
.sidebar.collapsed .sidebar-user .avatar {
  margin: 0;
}

.main-content {
  transition: margin-left 0.25s ease;
}
.sidebar.collapsed #sidebarCommandCenter {
  display: none !important;
}
/* ── End sidebar collapse ──*/


/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 26px;
  transition: 0.3s;
}
.toggle-slider:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(22px);
}


/* ── Upload Modal & Batch Cards ── */
.bucket-opt:hover { border-color: var(--accent) !important; }
.batch-card:hover { border-color: var(--accent) !important; background: rgba(255,193,7,0.03) !important; }
#dropZone:hover { border-color: var(--accent); background: rgba(255,193,7,0.03); }
#uploadProgressBar { transition: width 0.4s ease; }


/* ─── Batch Detail Panel ─── */
.batch-card:hover {
  border-color: var(--accent) !important;
}
.batch-detail-panel {
  animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 500px; }
}


/* Batch 8: Map + Files side-by-side responsive */
@media (max-width: 1100px) {
  #mapAndFilesRow {
    grid-template-columns: 1fr !important;
  }
}

/* Batch 8: File card hover in batch detail */
.batch-file-card:hover {
  border-color: var(--accent) !important;
}



/* ═══════ Blueprint Processing Theme ═══════ */
@keyframes bpScan {
  0%, 100% { width: 20%; left: 0; }
  50% { width: 40%; left: 60%; }
}
@keyframes bpBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes bpShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.blueprint-processing-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #4338ca;
  box-shadow: 0 0 20px rgba(67, 56, 202, 0.1);
}

/* Processing stage editor grid */
.proc-stage-btn:hover {
  border-color: #818cf8 !important;
  background: rgba(99,102,241,0.1) !important;
  transform: translateY(-1px);
}

/* Email template cards */
.et-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERHAUL — 2026-03-28
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
  .role-switcher {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .role-switcher select {
    min-width: 140px !important;
  }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  /* Sidebar: off-screen by default, slides in on .open */
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
    z-index: 1000;
  }
  .sidebar.collapsed {
    width: var(--sidebar-width) !important;
    transform: translateX(-100%);
  }
  .sidebar.open,
  .sidebar.collapsed.open {
    transform: translateX(0) !important;
    width: var(--sidebar-width) !important;
  }
  /* Un-collapse labels when sidebar is open on mobile */
  .sidebar.collapsed.open .sidebar-brand,
  .sidebar.collapsed.open .sidebar-section-label,
  .sidebar.collapsed.open .sidebar-user-info,
  .sidebar.collapsed.open #sidebarToggle {
    display: block !important;
  }
  .sidebar.collapsed.open .sidebar-link {
    justify-content: flex-start;
    font-size: inherit;
    padding: 10px 20px;
  }
  .sidebar.collapsed.open .sidebar-link .link-text {
    display: inline !important;
  }

  /* Overlay behind sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  .sidebar-overlay.active {
    display: block;
  }

  /* Main content: full width */
  .main-content {
    margin-left: 0 !important;
  }

  /* Hamburger visible */
  .hamburger {
    display: block !important;
  }
  /* Hide desktop sidebar collapse toggle on mobile */
  #sidebarToggle {
    display: none !important;
  }

  /* Topbar: compact */
  .topbar {
    padding: 0 12px !important;
    gap: 8px;
  }
  .topbar-left {
    gap: 8px !important;
    min-width: 0;
  }
  .topbar-title {
    font-size: 0.95rem !important;
  }
  .topbar-right {
    gap: 6px !important;
    flex-shrink: 0;
  }
  /* Hide search bar on very small screens (show on focus/tap) */
  .topbar-search {
    display: none !important;
  }
  /* Compact New Project button */
  .topbar-right .btn-primary {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
    white-space: nowrap;
  }

  /* Page content */
  .page-content {
    padding: 12px !important;
  }

  /* Stat cards: stack */
  .stats-grid,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Role switcher: stack on mobile */
  .role-switcher {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 8px !important;
    font-size: 0.78rem !important;
  }
  .role-switcher .role-pill {
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
  }
  .role-switcher select {
    min-width: 100% !important;
    width: 100% !important;
    font-size: 0.75rem !important;
  }
  .role-switcher > div {
    width: 100%;
    margin-left: 0 !important;
  }

  /* Detail grid: stack */
  .detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* Project cards */
  .project-card {
    padding: 12px !important;
  }

  /* Data tables: horizontal scroll */
  .data-table-wrapper,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 600px;
  }

  /* Pipeline steps: smaller on mobile */
  .status-pipeline,
  .mission-status-pipeline {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .pipeline-step {
    min-width: 55px !important;
  }
  .pipeline-label,
  .pipeline-step .step-label {
    font-size: 0.55rem !important;
    max-width: 55px !important;
  }

  /* Pricing grid */
  .pricing-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Modals: full-width on mobile */
  .modal-content {
    width: 95% !important;
    max-width: none !important;
    padding: 16px !important;
    max-height: 90vh !important;
  }

  /* Form grids: single column */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Card layouts */
  .card,
  .stat-card {
    padding: 14px !important;
  }
  .stat-card-value {
    font-size: 1.6rem !important;
  }

  /* Pilots grid */
  .pilots-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mission actions: wrap */
  .mission-actions,
  .project-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .mission-actions .btn,
  .project-actions .btn {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* Header buttons row: wrap */
  .page-header-actions,
  [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* Calendar: compact */
  .mini-calendar td,
  .mini-calendar th {
    padding: 4px !important;
    font-size: 0.7rem !important;
  }

  /* Sidebar footer user info */
  .sidebar-footer {
    padding: 12px 16px !important;
  }

  /* Notification panel */
  .notif-panel {
    right: -40px !important;
    width: calc(100vw - 20px) !important;
    max-width: 350px !important;
  }

  /* AI Chat panel */
  #aiChatPanel {
    width: 100% !important;
    right: 0 !important;
    max-width: 100% !important;
  }

  /* Assets grid */
  .assets-grid {
    grid-template-columns: 1fr !important;
  }

  /* Payouts summary cards */
  .payout-summary,
  .payout-stats {
    grid-template-columns: 1fr !important;
  }

  /* Schedule page */
  .schedule-grid {
    grid-template-columns: 1fr !important;
  }

  /* Map container */
  .map-container,
  #projectMap,
  #adminMap {
    height: 250px !important;
    min-height: 200px !important;
  }

  /* Buttons that say "BACK TO PROJECTS" etc */
  .btn-back,
  [onclick*="showProjects"],
  [onclick*="BACK"] {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
  }

  /* Delete project button */
  [onclick*="deleteProject"] {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }
}

/* ── Small phone (≤480px) ── */
@media (max-width: 480px) {
  .topbar {
    padding: 0 8px !important;
  }
  .topbar-title {
    font-size: 0.85rem !important;
  }
  .topbar-breadcrumb {
    font-size: 0.65rem !important;
  }
  .topbar-right .btn-primary span,
  .topbar-right .btn-primary {
    font-size: 0.68rem !important;
    padding: 5px 8px !important;
  }
  /* Only show + icon, hide text */
  .topbar-right .btn-primary {
    overflow: hidden;
    max-width: 40px;
  }
  .page-content {
    padding: 8px !important;
  }
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
  .stat-card-value {
    font-size: 1.4rem !important;
  }
  .pipeline-step {
    min-width: 45px !important;
  }
  .pipeline-label,
  .pipeline-step .step-label {
    font-size: 0.5rem !important;
    max-width: 45px !important;
  }
  .pipeline-dot,
  .pipeline-step .step-dot {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.65rem !important;
  }
  .role-switcher {
    display: none !important;
  }
  /* Mission Status header buttons */
  [style*="Mission Status"] .btn-sm,
  h3 + .btn-sm {
    font-size: 0.65rem !important;
    padding: 3px 6px !important;
  }
}

/* ── Force inline grids to stack on mobile ── */
@media (max-width: 768px) {
  /* Target any div with inline grid that has 2-column fixed layout */
  .page-content [style*="grid-template-columns:1fr 1fr"],
  .page-content [style*="grid-template-columns: 1fr 1fr"],
  .page-content [style*="grid-template-columns:1fr 280px"],
  .page-content [style*="grid-template-columns: 1fr 280px"] {
    grid-template-columns: 1fr !important;
  }
  /* Ensure auto-fill grids use smaller minimums */
  .page-content [style*="grid-template-columns:repeat(auto-fill"],
  .page-content [style*="grid-template-columns: repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }
  /* Bucket selectors: 2 cols instead of 3 */
  .page-content [style*="grid-template-columns:repeat(3,1fr)"],
  .page-content [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Calendar grid should stay 7 columns */
  .page-content [style*="grid-template-columns:repeat(7,1fr)"],
  .page-content [style*="grid-template-columns: repeat(7, 1fr)"] {
    grid-template-columns: repeat(7, 1fr) !important;
  }
  /* Inline flex wrapping for action button rows */
  .page-content [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 480px) {
  .page-content [style*="grid-template-columns:repeat(3,1fr)"],
  .page-content [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Mobile card overflow fix ── */
@media (max-width: 768px) {
  .card,
  .stat-card,
  [style*="border-radius"][style*="background"] {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .card-header {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .card-title {
    font-size: 0.95rem !important;
    word-break: break-word;
  }
  .card-body {
    padding: 12px 14px !important;
  }
  /* Prevent any overflow from page-content children */
  .page-content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .page-content > div {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* Fix the 2-column layout cards to stack */
  .page-content > div > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Health check grid items */
  #healthChecksGrid > div {
    min-width: 0 !important;
  }
  /* Topbar-right: ensure it doesn't overflow */
  .topbar-right {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }
}

/* ── iPhone / Mobile topbar fix ── */
@media (max-width: 768px) {
  /* Hide "New Project" text on mobile, show only + icon */
  .topbar-right .btn-primary .btn-label {
    display: none !important;
  }
  .topbar-right .btn-primary {
    padding: 8px 10px !important;
    min-width: 36px !important;
    max-width: none !important;
    overflow: visible !important;
    font-size: 0.85rem !important;
  }
  /* Topbar flex: prevent crushing */
  .topbar {
    min-height: var(--topbar-height);
    height: auto !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  .topbar-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .topbar-left > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .topbar-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topbar-breadcrumb {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topbar-right {
    flex-shrink: 0 !important;
    gap: 8px !important;
  }
  /* Ensure bell icon doesn't get crushed */
  .notif-wrapper {
    flex-shrink: 0 !important;
  }
  .notif-bell {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
}

/* Capture window day highlighting on calendar */
.calendar-day.capture-highlight {
  background: rgba(255, 107, 53, 0.08) !important;
  border: 2px solid rgba(255, 107, 53, 0.35) !important;
  border-radius: 6px;
}
.calendar-day.capture-highlight.today {
  border-color: rgba(255, 107, 53, 0.6) !important;
}

/* Status badge colors */
.status-declined { background: rgba(244, 67, 54, 0.15); color: #F44336; }
.status-on-hold { background: rgba(255, 87, 34, 0.15); color: #FF5722; }

/* Schedule page responsive layout fix */
@media (max-width: 1200px) {
  .calendar-day { min-height: 85px; }
}

/* Fix calendar column overflow in schedule grid layout */
.calendar-grid-wrapper { min-width: 0; overflow: hidden; }

/* Calendar sidebar stacked below calendar */
.calendar-sidebar { max-height: 300px; overflow-y: auto; }

/* Fix calendar and page content overflow */
#pageContent { max-width: 100%; overflow: hidden; box-sizing: border-box; }
.main-content { overflow: hidden; }


/* ============================================================
   UI Polish - Comprehensive Iteration (2026-03-29)
   ============================================================ */

/* --- Table row hover effects --- */
.data-table tbody tr,
table tbody tr {
  transition: background 0.15s ease, transform 0.1s ease;
}
.data-table tbody tr:hover,
table tbody tr:hover {
  background: var(--bg-card-hover) !important;
}

/* --- Card hover lift --- */
.card[onclick], .card[style*="cursor:pointer"],
.mission-card, .asset-project-row,
.stat-card, .health-item,
.quote-row[onclick] {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card[onclick]:hover, .card[style*="cursor:pointer"]:hover,
.mission-card:hover, .quote-row[onclick]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  border-color: var(--border-light);
}
.stat-card:hover, .health-item:hover {
  border-color: var(--border-light);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* --- Smooth page content transitions --- */
.main-content > div {
  animation: fadeInContent 0.25s ease;
}
@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Better empty value display --- */
.empty-val {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.88em;
}

/* --- Status badge consistent colors --- */
.status-badge-pilot-assigned,
.badge-pilot-assigned {
  background: rgba(255,149,0,0.15) !important;
  color: #FF9500 !important;
  border: 1px solid rgba(255,149,0,0.3);
}
.status-badge-sourcing-pilot,
.badge-sourcing-pilot {
  background: rgba(255,214,0,0.15) !important;
  color: #FFD600 !important;
  border: 1px solid rgba(255,214,0,0.3);
}
.status-badge-completed,
.badge-completed {
  background: rgba(52,199,89,0.15) !important;
  color: #34C759 !important;
  border: 1px solid rgba(52,199,89,0.3);
}
.status-badge-processing,
.badge-processing {
  background: rgba(175,82,222,0.15) !important;
  color: #AF52DE !important;
  border: 1px solid rgba(175,82,222,0.3);
}
.status-badge-pilot-accepted,
.badge-pilot-accepted {
  background: rgba(0,161,241,0.15) !important;
  color: #00A1F1 !important;
  border: 1px solid rgba(0,161,241,0.3);
}
.status-badge-in-progress,
.badge-in-progress {
  background: rgba(0,161,241,0.15) !important;
  color: #00A1F1 !important;
  border: 1px solid rgba(0,161,241,0.3);
}
.status-badge-draft,
.badge-draft {
  background: rgba(155,155,168,0.15) !important;
  color: #9B9BA8 !important;
  border: 1px solid rgba(155,155,168,0.3);
}

/* --- Audit log action badges --- */
.audit-action-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.audit-action-login { background: rgba(0,161,241,0.15); color: #60a5fa; }
.audit-action-create { background: rgba(52,199,89,0.15); color: #34C759; }
.audit-action-update { background: rgba(255,149,0,0.15); color: #FF9500; }
.audit-action-delete { background: rgba(246,91,71,0.15); color: #F65B47; }
.audit-action-upload { background: rgba(175,82,222,0.15); color: #AF52DE; }
.audit-action-download { background: rgba(0,199,190,0.15); color: #00C7BE; }
.audit-action-status { background: rgba(255,214,0,0.15); color: #FFD600; }
.audit-action-default { background: rgba(155,155,168,0.12); color: #9B9BA8; }

/* --- Improved notification badge pulse --- */
.notif-badge {
  animation: notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* --- Better select/dropdown styling --- */
select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239B9BA8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
select:hover { border-color: var(--accent); }
select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-dim); }

/* --- Floating action button polish --- */
.fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}

/* --- Project detail section cards --- */
.detail-section {
  transition: border-color 0.2s ease;
}
.detail-section:hover {
  border-color: var(--border-light);
}

/* --- Pilot recommendation cards --- */
.pilot-rec-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pilot-rec-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(255,214,0,0.1);
}

/* --- Processing progress bar improvement --- */
.progress-bar-fill {
  transition: width 0.6s ease;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  border-radius: 4px;
}

/* --- Better search input focus --- */
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
  outline: none;
}

/* --- Tooltip for action buttons --- */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 0.72rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
[data-tooltip]:hover::after {
  opacity: 1;
}

/* --- Calendar day hover --- */
.cal-day:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
}

/* --- Email template card polish --- */
.email-tpl-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.email-tpl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* --- Skeleton loading animation --- */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* --- Uppercase status aliases (match both case conventions) --- */
.status-PILOT_ASSIGNED { background: rgba(0,161,241,0.15); color: var(--blue); }
.status-SOURCING_PILOT { background: rgba(156,39,176,0.15); color: #ce93d8; }
.status-PILOT_ACCEPTED { background: rgba(0,200,150,0.15); color: #69f0ae; }
.status-PILOT_SCHEDULED { background: rgba(255,193,7,0.15); color: #ffd54f; }
.status-PILOT_DECLINED { background: rgba(246,91,71,0.15); color: var(--red); }
.status-IN_PROGRESS { background: rgba(0,161,241,0.15); color: var(--blue); }
.status-COMPLETED, .status-DELIVERED { background: var(--green-dim); color: var(--green); }
.status-PROCESSING { background: rgba(139,92,246,0.15); color: #a78bfa; }
.status-ON_HOLD { background: rgba(255,149,0,0.15); color: var(--orange); }
.status-CANCELLED { background: var(--red-dim); color: var(--red); }
.status-DRAFT { background: rgba(155,155,168,0.12); color: #9B9BA8; }
.status-DATA_UPLOADED { background: rgba(0,161,241,0.15); color: var(--blue); }
.status-GROUP { background: rgba(52,199,89,0.15); color: var(--green); }
.status-New { background: rgba(0,161,241,0.15); color: var(--blue); }
.status-Contacted { background: rgba(255,149,0,0.15); color: var(--orange); }
.status-Converted { background: var(--green-dim); color: var(--green); }
.status-Spam { background: var(--red-dim); color: var(--red); }
/* Kanban Board */
.kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 16px 0;
  min-height: 500px;
  align-items: flex-start;
}

.kanban-column {
  min-width: 260px;
  max-width: 300px;
  flex: 1;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
}

.kanban-column-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

.kanban-column-header .count-badge {
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}

.kanban-column-body {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kanban-card {
  background: var(--bg-input, #1a1d24);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  user-select: none;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.12);
}

.kanban-card:active {
  cursor: grabbing;
  transform: scale(0.98);
}

.kanban-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.kanban-column.drag-over {
  border-color: var(--accent);
  background: rgba(255,214,0,0.03);
  box-shadow: 0 0 0 2px rgba(255,214,0,0.15);
}

.kanban-card-code {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.kanban-card-name {
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.kanban-card-meta .pilot-tag {
  color: var(--green, #22c55e);
  font-weight: 500;
}

.kanban-card-meta .location-tag {
  color: var(--text-muted);
}

/* View Toggle Bar */
.view-toggle-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-input, #1a1d24);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--border);
}

.view-toggle-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-toggle-btn.active {
  background: var(--accent);
  color: #000;
}

.view-toggle-btn:hover:not(.active) {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 420px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: toastSlideIn 0.3s ease;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
}

.toast-success { background: rgba(34,197,94,0.92); }
.toast-error { background: rgba(239,68,68,0.92); }
.toast-warning { background: rgba(245,158,11,0.92); color: #000; }
.toast-info { background: rgba(59,130,246,0.92); }

.toast-exit {
  animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* Notification Dropdown */
.notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 9999;
  overflow: hidden;
  animation: fadeSlideDown 0.2s ease;
}

.notif-dropdown-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.notif-dropdown-body {
  max-height: 380px;
  overflow-y: auto;
}

.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  gap: 10px;
}

.notif-item:hover {
  background: rgba(255,255,255,0.04);
}

.notif-item.unread {
  border-left: 3px solid var(--accent);
  background: rgba(255,214,0,0.03);
}

.notif-item .notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.notif-item .notif-content {
  flex: 1;
  min-width: 0;
}

.notif-item .notif-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item .notif-message {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item .notif-time {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 4px;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-input, #1a1d24) 25%, rgba(255,255,255,0.06) 50%, var(--bg-input, #1a1d24) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 6px;
}

.skeleton-line {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.long { width: 100%; }

.skeleton-card {
  height: 80px;
  margin-bottom: 10px;
  border-radius: 10px;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Activity Feed */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 0.82rem;
  transition: background 0.15s;
}

.activity-item:hover {
  background: rgba(255,255,255,0.02);
}

.activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.activity-text {
  flex: 1;
  color: var(--text);
  line-height: 1.4;
}

.activity-text .actor {
  font-weight: 600;
  color: var(--accent);
}

.activity-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Notification badge */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg-card);
}