/* Kokoodi Payment Slip Generator */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f0f2f5;
  min-height: 100vh;
  color: #1a1a2e;
}

/* Login Overlay */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: auto;
}

.login-split {
  display: flex;
  width: 100%;
  max-width: 1400px;
  min-height: 600px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 20px;
}

/* Left Side - Brand */
.login-brand-side {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-brand-side::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.login-brand-side::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.login-brand-content {
  position: relative;
  z-index: 1;
  max-width: 500px;
}

.login-brand-logo {
  height: 56px;
  margin-bottom: 32px;
  filter: brightness(0) invert(1);
}

.login-brand-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

.login-brand-description {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.95;
  margin-bottom: 48px;
}

.login-features {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.login-feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

.feature-text h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.feature-text p {
  font-size: 15px;
  opacity: 0.9;
  line-height: 1.5;
}

/* Right Side - Login Form */
.login-form-side {
  flex: 1;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.login-form-content {
  width: 100%;
  max-width: 400px;
}

.login-form-header {
  margin-bottom: 40px;
}

.login-form-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
}

.login-form-header p {
  font-size: 16px;
  color: #666;
}

.btn-microsoft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: white;
  color: #5e5e5e;
  border: 2px solid #e0e0e0;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s;
  width: 100%;
}

.btn-microsoft:hover {
  background: #f8f9fa;
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
}

.btn-large {
  padding: 18px 32px;
  font-size: 17px;
}

.login-divider {
  margin: 40px 0;
  text-align: center;
  position: relative;
}

.login-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e0e0e0;
}

.login-divider span {
  position: relative;
  background: white;
  padding: 0 16px;
  font-size: 13px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #666;
}

.info-item svg {
  width: 18px;
  height: 18px;
  color: #667eea;
  flex-shrink: 0;
}

.login-footer {
  margin-top: 40px;
  text-align: center;
  font-size: 13px;
  color: #999;
}

/* Responsive Design */
@media (max-width: 968px) {
  .login-split {
    flex-direction: column;
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
  }
  
  .login-brand-side {
    padding: 40px 24px;
    min-height: 400px;
  }
  
  .login-brand-title {
    font-size: 32px;
  }
  
  .login-features {
    display: none;
  }
  
  .login-form-side {
    padding: 40px 24px;
  }
  
  .login-form-header h2 {
    font-size: 28px;
  }
}

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

.unauthorized-message h2 {
  color: #dc2626;
  margin-bottom: 16px;
}

.unauthorized-message p {
  margin-bottom: 12px;
}

/* User Info Bar
 *
 * Lives inside the header rather than floating over it. It used to be fixed to
 * the top right at z-index 1000, which put it permanently on top of whatever
 * the page's own header buttons were, and the wider the signed-in name the more
 * of them it covered. In the header it is just another flex item, so the
 * buttons move out of its way at any name length. */
.user-info-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

.user-info .btn-secondary {
  padding: 6px 12px;
  font-size: 13px;
}
/* Layout */
.app-layout { display: flex; min-height: 100vh; }
/* Sidebar */
.sidebar {
  width: 220px;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  color: white;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 100;
}
.sidebar-brand {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-logo { height: 28px; width: auto; }
.sidebar-title { font-size: 13px; font-weight: 600; }
.sidebar-nav { flex: 1; padding: 16px 12px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
  margin-bottom: 4px;
}
.nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.nav-item.active { background: rgba(255,255,255,0.15); color: white; }
.nav-item svg { width: 18px; height: 18px; }
.nav-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 12px 0; }
.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Main Content */
.main-content { flex: 1; margin-left: 220px; min-height: 100vh; display: flex; flex-direction: column; }
.app-header {
  background: white;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Pushes everything after it to the right, so the action buttons and the
 * signed-in user sit together at the end regardless of how many there are.
 * `space-between` cannot do that once the header holds three groups. */
.header-left { display: flex; align-items: center; gap: 16px; margin-right: auto; }
.header-left h1 { font-size: 18px; font-weight: 600; color: #1a1a2e; }
.mobile-menu { display: none; }
.content { padding: 24px; flex: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
/* Cards */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}
.card-header {
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header h2 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header h2 svg { width: 18px; height: 18px; color: #6b7280; }
.card-body { padding: 20px; }
.card-footer {
  padding: 14px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fafbfc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 12px 12px;
}

/* Notification Settings */
.settings-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 24px 0;
}

.notification-settings {
  margin-top: 20px;
}

.notification-header {
  margin-bottom: 20px;
}

.notification-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.notification-header h3 svg {
  width: 18px;
  height: 18px;
  color: #667eea;
}

.notification-header p {
  font-size: 13px;
  color: #6b7280;
}

.notification-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-option {
  cursor: pointer;
  display: block;
}

.notification-option input[type="radio"] {
  display: none;
}

.option-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  transition: all 0.2s;
}

.notification-option:hover .option-content {
  border-color: #667eea;
  background: #f8f9ff;
  transform: translateX(4px);
}

.notification-option input[type="radio"]:checked + .option-content {
  border-color: #667eea;
  background: #f0f4ff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.option-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.notification-option input[type="radio"]:checked + .option-content .option-icon {
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.option-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-text strong {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
}

.option-text span {
  font-size: 13px;
  color: #6b7280;
}

.option-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.option-badge.recommended {
  background: #10b981;
  color: white;
}
/* Forms */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-input, .form-select {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
  width: 100%;
}
.form-input:focus, .form-select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52,152,219,0.15);
}
.settings-row, .form-row { display: flex; gap: 20px; flex-wrap: wrap; }
.settings-row .form-group, .form-row .form-group { flex: 1; min-width: 180px; margin-bottom: 0; }
/* Buttons */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: #3498db; color: white; }
.btn-primary:hover { background: #2980b9; }
.btn-success { background: #27ae60; color: white; }
.btn-success:hover { background: #219a52; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3); }
.btn-success:disabled { background: #95a5a6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost { background: transparent; color: #666; border: 1px solid #e0e0e0; }
.btn-ghost:hover { background: #f8f9fa; border-color: #ccc; }

/* Bulk Actions */
.bulk-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.btn-danger { background: #e74c3c; color: white; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s;
}
.btn-icon:hover { background: #f3f4f6; color: #1a1a2e; }
.btn-icon svg { width: 18px; height: 18px; }
/* Input with button */
.input-with-button {
  display: flex;
  gap: 8px;
  align-items: center;
}
.input-with-button .form-input {
  flex: 1;
}
.input-with-button .btn {
  white-space: nowrap;
}
/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.status-badge.status-draft {
  background: #f3f4f6;
  color: #6b7280;
}
.status-badge.status-generated {
  background: #dbeafe;
  color: #1e40af;
}
.status-badge.status-sent {
  background: #d1fae5;
  color: #065f46;
}
/* Presets */
.presets-container { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-tag {
  background: #f0f7ff;
  color: #2980b9;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.preset-tag .remove {
  cursor: pointer;
  opacity: 0.6;
  font-size: 16px;
  line-height: 1;
  margin-left: 4px;
}
.preset-tag .remove:hover { opacity: 1; }
/* Data Grid */
.data-grid { width: 100%; border-collapse: collapse; }
.data-grid th {
  background: #fafbfc;
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #eee;
}
.data-grid td { padding: 14px 16px; border-bottom: 1px solid #f5f5f5; vertical-align: top; }
.data-grid tbody tr:hover { background: #fafbfc; }
.data-grid .checkbox-cell { width: 50px; text-align: center; vertical-align: middle; }
.data-grid .checkbox-cell input { width: 18px; height: 18px; cursor: pointer; accent-color: #3498db; }
.name-cell { font-weight: 600; color: #1a1a2e; font-size: 14px; }
.role-cell { font-size: 13px; color: #666; margin-top: 2px; }

/* Payslips: rows are tall because payment items stack, so the person's
   details stack in one column too instead of spreading across three. */
.data-grid .checkbox-cell { vertical-align: top; padding-top: 16px; }
.person-cell { min-width: 190px; max-width: 260px; }
.person-name { font-weight: 600; color: #1a1a2e; font-size: 14px; line-height: 1.3; }
.person-role { font-size: 13px; color: #6b7280; margin-top: 2px; line-height: 1.35; }
.person-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.person-tags .type-badge { padding: 2px 8px; font-size: 10px; }
.person-tags .needs-link {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  background: #FED9CC;
  color: #A4262C;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.amount-cell { text-align: right; white-space: nowrap; }
.pay-status { margin-top: 8px; }
.pay-status .status-badge { letter-spacing: 0.2px; }
.data-grid tr.is-sent .person-name,
.data-grid tr.is-sent .total-cell { opacity: 0.75; }
.actions-cell .action-btns { justify-content: flex-end; }
.btn-icon-danger:hover { background: #fef2f2; color: #dc2626; }

/* Pay-run bar: period and date on the left, where the month stands on the right */
.payrun-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 20px;
}
.payrun-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: flex-end;
  /* Two 180px fields and their gap; the note wraps inside this width. */
  flex: 0 1 376px;
}
.payrun-fields .form-group { margin-bottom: 0; width: 180px; }
.payrun-note {
  flex-basis: 100%;
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}
.payrun-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-value { font-size: 20px; font-weight: 700; color: #1a1a2e; }
.stat-value.money { font-family: 'SF Mono', 'Consolas', monospace; color: #27ae60; font-size: 18px; line-height: 1.4; }

.card-header-actions { display: flex; gap: 8px; align-items: center; }

/* Keep the selection summary and bulk actions in reach on a long list */
.card-footer.bulk-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}
.bulk-actions .btn:disabled { opacity: 0.6; cursor: not-allowed; }

.modal-hint { font-size: 13px; color: #6b7280; margin-bottom: 12px; }

/* One-off (this period only) lines, visually distinct from recurring items */
.payment-item.one-off .one-off-desc {
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 10px;
  border: 1px dashed #c4b5fd;
  border-radius: 6px;
  background: #f5f3ff;
  font-size: 13px;
  color: #1a1a2e;
}
.one-off-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6d28d9;
}
.payment-item.one-off input { border-color: #c4b5fd; }

/* Bonus-month prompt above the team table */
.bonus-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #f5f3ff;
  border-bottom: 1px solid #ddd6fe;
  color: #4c1d95;
  font-size: 13px;
  line-height: 1.45;
}
.bonus-banner > svg { width: 20px; height: 20px; flex-shrink: 0; color: #6d28d9; }
.bonus-banner p { flex: 1; margin: 0; }
.bonus-banner .btn { flex-shrink: 0; }

/* Add bonus dialog */
.bonus-list-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin: 4px 0 8px;
}
.bonus-people { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.bonus-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.bonus-person .form-input { width: 160px; text-align: right; font-family: 'SF Mono', 'Consolas', monospace; }
.total-cell {
  font-weight: 700;
  font-family: 'SF Mono', 'Consolas', monospace;
  color: #27ae60;
  font-size: 14px;
  text-align: right;
}
.type-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.type-badge.intern { background: #e8f4fd; color: #2980b9; }
.type-badge.contractor { background: #fef3e2; color: #d68910; }
.type-badge.staff { background: #e8f8f0; color: #27ae60; }
/* Payment Items in Grid */
.payment-items { display: flex; flex-direction: column; gap: 6px; min-width: 280px; }
.payment-item { display: flex; gap: 6px; align-items: center; }
.payment-item select {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  min-width: 150px;
}
.payment-item input {
  width: 110px;
  padding: 7px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
}
.payment-item select:focus, .payment-item input:focus { outline: none; border-color: #3498db; }
.btn-remove-item {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}
.btn-remove-item:hover { color: #e74c3c; background: #fef2f2; }
.btn-remove-item svg { width: 16px; height: 16px; }
.btn-add-item {
  font-size: 12px;
  color: #3498db;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.btn-add-item:hover { text-decoration: underline; }
.btn-add-item svg { width: 14px; height: 14px; }
/* Action Buttons */
.action-btns { display: flex; gap: 4px; justify-content: center; }
.action-btns .btn-icon { width: 30px; height: 30px; }
.action-btns .btn-icon svg { width: 16px; height: 16px; }
.action-btns .btn-icon.print-btn { color: #1a1a2e; }
.action-btns .btn-icon.print-btn:hover { background: #1a1a2e; color: white; }
/* Pin the Actions column to the right edge of the table's scroll area. On
   narrower or scaled laptop screens the payment items push the row wider than
   the card, and the actions would otherwise sit off-screen behind a scrollbar. */
.data-grid th:last-child,
.data-grid td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  box-shadow: -6px 0 8px -6px rgba(0,0,0,0.12);
}
.data-grid td:last-child { background: white; }
.data-grid tbody tr:hover td:last-child { background: #fafbfc; }
.action-btns { flex-wrap: nowrap; }
/* Selection Info */
.selection-info { font-size: 13px; color: #666; display: flex; align-items: center; gap: 16px; }
.grand-total { font-weight: 700; color: #27ae60; font-family: 'SF Mono', 'Consolas', monospace; }
/* Modals */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  overflow-y: auto;
  padding: 20px;
}
.modal-overlay.active { 
  display: flex; 
}
.modal {
  background: white;
  border-radius: 16px;
  width: 480px;
  max-width: 95%;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  margin: auto;
}
.modal-sm { width: 360px; }
.modal-lg { width: 700px; }
.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-header h3 { font-size: 16px; font-weight: 600; }
.modal-body { 
  padding: 24px; 
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #fafbfc;
}
.preview-body { background: #f5f5f5; padding: 24px; flex: 1; overflow: auto; }

/* Confirmation Modal Styles */
.confirm-notification-method {
  background: #f0f7ff;
  border: 1px solid #d0e7ff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}
.notification-method-display {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0066cc;
}
.notification-method-display svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.notification-method-display div {
  flex: 1;
}
.notification-method-display strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.notification-method-display span {
  font-size: 14px;
  font-weight: 600;
}
.confirm-message {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #856404;
}
.confirm-message svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.confirm-message p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.confirm-message.resend-warning {
  background: #fef2f2;
  border-color: #f87171;
  color: #991b1b;
  margin: 0 0 16px;
}

/* Bulk Send Styles */
.bulk-send-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}
.bulk-send-info p {
  margin: 4px 0;
  font-size: 14px;
}
.bulk-preview-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}
.bulk-preview-item {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.bulk-preview-item h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #333;
}
.bulk-preview-item h4 svg {
  width: 18px;
  height: 18px;
}
.preview-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
}
.preview-summary > div {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
}
.preview-summary strong {
  color: #666;
}
/* Toast */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #1a1a2e;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.toast svg { width: 18px; height: 18px; }
.toast.success { background: #27ae60; }
.toast.error { background: #e74c3c; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* Print */
.print-container { display: none; }
@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body * {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  .print-container, .print-container * {
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }
  .print-container {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* Mobile */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.3s; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .mobile-menu { display: flex; }
  .content { padding: 16px; }
  .settings-row { flex-direction: column; }
  .data-grid { font-size: 12px; }
  .payment-items { min-width: 200px; }
  .payment-item select { min-width: 100px; }
  .payment-item input { width: 80px; }
}

/* Bulk Send Confirmation Modal */
.bulk-send-info {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.bulk-send-info p {
  margin: 5px 0;
  font-size: 16px;
}

.bulk-preview-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.bulk-preview-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background: #f9f9f9;
}

.bulk-preview-item h4 {
  margin: 0 0 10px 0;
  color: #667eea;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bulk-preview-item .preview-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  font-size: 14px;
}

.bulk-preview-item .preview-summary div {
  display: flex;
  flex-direction: column;
}

.bulk-preview-item .preview-summary strong {
  color: #666;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.bulk-preview-item .preview-summary span {
  color: #333;
  font-weight: 600;
}

/* Microsoft-style People Picker */
.people-picker {
  position: relative;
  width: 100%;
}

.people-picker-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.people-picker-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: #605E5C;
  pointer-events: none;
  z-index: 1;
}

.people-picker-input {
  padding-left: 38px !important;
  padding-right: 38px !important;
}

.people-picker-spinner {
  position: absolute;
  right: 12px;
  width: 18px;
  height: 18px;
}

.spinner-ring {
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-top-color: #0078D4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.people-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
}

.people-picker-results {
  padding: 4px 0;
}

.people-picker-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.people-picker-result-item:hover {
  background: #F3F2F1;
}

.people-picker-result-item.selected {
  background: #EFF6FC;
}

.people-picker-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.people-picker-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.people-picker-name {
  font-size: 14px;
  font-weight: 600;
  color: #323130;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.people-picker-email {
  font-size: 12px;
  color: #605E5C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.people-picker-job {
  font-size: 11px;
  color: #A19F9D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.people-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #A19F9D;
  gap: 8px;
}

.people-picker-empty svg {
  width: 32px;
  height: 32px;
  color: #D2D0CE;
}

.people-picker-empty span {
  font-size: 13px;
}

/* Linked-to-M365 badge in the modal */
.linked-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #DFF6DD;
  color: #107C10;
  border: 1px solid #C8EAC2;
}

.linked-badge.unlinked {
  background: #FED9CC;
  color: #A4262C;
  border-color: #F5C6BC;
}

/* Grid: warn when an employee has no M365 link */
.name-cell .needs-link {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: #FED9CC;
  color: #A4262C;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* A payment item saved without a name: make it obvious until one is chosen */
.payment-item select.needs-choice { border-color: #f87171; background: #fef2f2; color: #991b1b; }