/**
 * Shadow ToDo - Approval Workflow Styles
 * Dark theme matching the existing Shadow ToDo design system
 */

/* ===== ADMIN SETTINGS PANEL ===== */
.approval-settings-panel {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 20px;
    margin: 16px 0;
}
.approval-settings-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--text-primary, #e0e0e0);
}
.approval-settings-header i { color: #58a6ff; font-size: 20px; }
.approval-settings-header h3 { margin: 0; font-size: 16px; }
.approval-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color, #2a2a3a);
}
.approval-setting-row:last-child { border-bottom: none; }
.setting-info label { display: block; font-weight: 500; color: var(--text-primary, #e0e0e0); }
.setting-desc { font-size: 12px; color: var(--text-secondary, #888); margin-top: 2px; display: block; }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: #444; border-radius: 24px; transition: 0.3s;
}
.toggle-slider:before {
    content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: white; border-radius: 50%; transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider { background: #58a6ff; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

.approval-select {
    background: var(--bg-primary, #161622);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px; padding: 8px 12px; min-width: 200px;
}

/* ===== APPROVAL STATUS BANNERS ===== */
.approval-status-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 8px; margin: 12px 0;
}
.approval-status-banner.pending {
    background: rgba(255, 171, 0, 0.1); border-left: 4px solid #ffab00;
}
.approval-status-banner.pending i { color: #ffab00; font-size: 20px; }
.approval-status-banner.approved {
    background: rgba(52, 168, 83, 0.1); border-left: 4px solid #34a853;
}
.approval-status-banner.approved i { color: #34a853; font-size: 20px; }
.approval-status-banner.changes-requested {
    background: rgba(234, 67, 53, 0.1); border-left: 4px solid #ea4335;
}
.approval-status-banner.changes-requested i { color: #ea4335; font-size: 20px; }
.approval-status-info strong { display: block; color: var(--text-primary, #e0e0e0); }
.approval-status-info span { font-size: 12px; color: var(--text-secondary, #888); }

/* ===== APPROVAL BUTTONS ===== */
.approval-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: none; border-radius: 6px;
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
    margin: 8px 4px 8px 0;
}
.approval-btn.request {
    background: #58a6ff; color: #fff;
}
.approval-btn.request:hover { background: #4090e0; }
.approval-btn.resubmit {
    background: #ffab00; color: #1a1a2e;
}
.approval-btn.resubmit:hover { background: #e09700; }

/* ===== DECISION PANEL ===== */
.approval-decision-panel {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px; padding: 16px; margin: 12px 0;
}
.approval-decision-panel h4 {
    margin: 0 0 12px 0; color: var(--text-primary, #e0e0e0);
    display: flex; align-items: center; gap: 8px;
}
.approval-decision-panel h4 i { color: #58a6ff; }
.decision-note {
    background: var(--bg-primary, #161622); padding: 10px; border-radius: 6px;
    margin-bottom: 14px; font-size: 13px; color: var(--text-secondary, #aaa);
}
.decision-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.decision-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: none; border-radius: 6px;
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.decision-btn.approve { background: #34a853; color: white; }
.decision-btn.approve:hover { background: #2d9249; }
.decision-btn.reject { background: #ea4335; color: white; }
.decision-btn.reject:hover { background: #d33426; }
.decision-btn.changes { background: #ffab00; color: #1a1a2e; }
.decision-btn.changes:hover { background: #e09700; }

/* ===== TASK LOCK INDICATORS ===== */
.task-lock-banner {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 171, 0, 0.1); border: 1px solid rgba(255, 171, 0, 0.3);
    padding: 10px 14px; border-radius: 6px; margin-bottom: 12px;
    font-size: 13px; color: #ffab00;
}
.task-lock-banner i { font-size: 16px; }
.approver-badge {
    background: #58a6ff; color: white; padding: 2px 8px;
    border-radius: 10px; font-size: 11px; margin-left: auto;
}
.field-locked {
    position: relative; opacity: 0.6; pointer-events: none;
}
.field-lock-indicator {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    color: #ffab00; font-size: 12px;
}

/* ===== AUDIT TRAIL ===== */
.approval-audit-trail { margin: 16px 0; }
.audit-trail-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px; color: var(--text-primary, #e0e0e0);
}
.audit-trail-header i { color: #58a6ff; }
.audit-trail-header h4 { margin: 0; font-size: 14px; }
.audit-timeline { position: relative; padding-left: 28px; }
.audit-timeline::before {
    content: ''; position: absolute; left: 12px; top: 0; bottom: 0;
    width: 2px; background: var(--border-color, #333);
}
.audit-timeline-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0; position: relative;
}
.audit-icon {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; position: absolute; left: -28px;
    background: var(--bg-secondary, #1e1e2e); border: 2px solid var(--border-color, #333);
}
.audit-timeline-item.approval_requested .audit-icon { color: #58a6ff; border-color: #58a6ff; }
.audit-timeline-item.approved .audit-icon { color: #34a853; border-color: #34a853; }
.audit-timeline-item.rejected .audit-icon { color: #ea4335; border-color: #ea4335; }
.audit-timeline-item.changes_requested .audit-icon { color: #ffab00; border-color: #ffab00; }
.audit-timeline-item.resubmitted .audit-icon { color: #9c27b0; border-color: #9c27b0; }
.audit-content { flex: 1; }
.audit-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.audit-header strong { color: var(--text-primary, #e0e0e0); font-size: 13px; }
.audit-action { color: var(--text-secondary, #888); font-size: 12px; }
.audit-notes {
    color: var(--text-secondary, #aaa); font-size: 12px;
    margin-top: 4px; padding: 6px 10px; background: var(--bg-primary, #161622);
    border-radius: 4px; border-left: 3px solid var(--border-color, #444);
}
.audit-timestamp { color: var(--text-secondary, #666); font-size: 11px; margin-top: 4px; }
.audit-empty { color: var(--text-secondary, #666); font-size: 13px; padding: 12px 0; }

/* ===== MODAL STYLES ===== */
.approval-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6); display: flex;
    align-items: center; justify-content: center; z-index: 9999;
    animation: fadeIn 0.2s ease;
}
.approval-modal-overlay.closing { animation: fadeOut 0.2s ease; }
.approval-modal-overlay .modal-content {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px; width: 480px; max-width: 90vw;
    max-height: 80vh; overflow-y: auto;
    animation: slideUp 0.2s ease;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border-color, #333);
}
.modal-header h3 {
    margin: 0; font-size: 16px; color: var(--text-primary, #e0e0e0);
    display: flex; align-items: center; gap: 8px;
}
.modal-header h3 i { color: #58a6ff; }
.modal-header.reject h3 i { color: #ea4335; }
.modal-header.changes h3 i { color: #ffab00; }
.modal-close {
    background: none; border: none; color: var(--text-secondary, #888);
    cursor: pointer; font-size: 16px; padding: 4px;
}
.modal-close:hover { color: var(--text-primary, #e0e0e0); }
.modal-body { padding: 20px; }
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; margin-bottom: 6px;
    color: var(--text-primary, #e0e0e0); font-size: 13px; font-weight: 500;
}
.required { color: #ea4335; }
.char-count { color: var(--text-secondary, #666); font-weight: normal; }
.form-static {
    padding: 8px 12px; background: var(--bg-primary, #161622);
    border-radius: 6px; color: var(--text-primary, #e0e0e0); font-size: 14px;
}
.form-select, .form-textarea {
    width: 100%; padding: 10px 12px; border-radius: 6px;
    background: var(--bg-primary, #161622);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #333);
    font-size: 13px; font-family: inherit;
    box-sizing: border-box;
}
.form-textarea { resize: vertical; }
.form-select:focus, .form-textarea:focus {
    outline: none; border-color: #58a6ff;
}
.modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 20px; border-top: 1px solid var(--border-color, #333);
}
.btn-cancel {
    padding: 8px 20px; border: 1px solid var(--border-color, #444);
    background: transparent; color: var(--text-primary, #e0e0e0);
    border-radius: 6px; cursor: pointer; font-size: 13px;
}
.btn-cancel:hover { background: var(--bg-primary, #161622); }
.btn-submit {
    padding: 8px 20px; background: #58a6ff; color: white;
    border: none; border-radius: 6px; cursor: pointer; font-size: 13px;
    display: flex; align-items: center; gap: 6px;
}
.btn-submit:hover { background: #4090e0; }
.btn-reject {
    padding: 8px 20px; background: #ea4335; color: white;
    border: none; border-radius: 6px; cursor: pointer; font-size: 13px;
    display: flex; align-items: center; gap: 6px;
}
.btn-reject:hover { background: #d33426; }
.btn-changes {
    padding: 8px 20px; background: #ffab00; color: #1a1a2e;
    border: none; border-radius: 6px; cursor: pointer; font-size: 13px;
    display: flex; align-items: center; gap: 6px;
}
.btn-changes:hover { background: #e09700; }

/* ===== NOTIFICATION BELL ===== */
.approval-notifications { position: relative; display: inline-block; }
.notif-bell {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary, #888); font-size: 18px;
    padding: 6px; position: relative;
}
.notif-bell:hover { color: #58a6ff; }
.notif-badge {
    position: absolute; top: 0; right: 0;
    background: #ea4335; color: white; font-size: 10px;
    min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
}
.notif-dropdown {
    position: absolute; top: 100%; right: 0;
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px; width: 320px; max-height: 400px;
    overflow-y: auto; z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.notif-header {
    padding: 12px 16px; border-bottom: 1px solid var(--border-color, #333);
    font-weight: 600; color: var(--text-primary, #e0e0e0);
}
.notif-item {
    display: flex; gap: 10px; padding: 10px 16px;
    border-bottom: 1px solid var(--border-color, #2a2a3a);
    cursor: pointer;
}
.notif-item:hover { background: var(--bg-primary, #161622); }
.notif-item.unread { background: rgba(88, 166, 255, 0.05); }
.notif-icon { color: #58a6ff; font-size: 16px; margin-top: 2px; }
.notif-message { color: var(--text-primary, #e0e0e0); font-size: 13px; }
.notif-time { color: var(--text-secondary, #666); font-size: 11px; margin-top: 2px; }
.notif-empty { padding: 20px; text-align: center; color: var(--text-secondary, #666); }

/* ===== CARD APPROVAL BADGES ===== */
.card-approval-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; padding: 3px 8px; border-radius: 10px;
    margin-top: 8px;
}
.card-approval-badge.pending { background: rgba(255, 171, 0, 0.15); color: #ffab00; }
.card-approval-badge.approved { background: rgba(52, 168, 83, 0.15); color: #34a853; }

/* ===== TOAST NOTIFICATIONS ===== */
.approval-toast {
    position: fixed; bottom: -60px; right: 20px;
    padding: 12px 20px; border-radius: 8px;
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: white; z-index: 10000;
    transition: bottom 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.approval-toast.show { bottom: 20px; }
.approval-toast.success { background: #34a853; }
.approval-toast.error { background: #ea4335; }
.approval-toast.warning { background: #ff9800; }
.approval-toast.info { background: #58a6ff; }

/* ===== ANIMATIONS ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== LIGHT THEME OVERRIDES ===== */
.light-theme .approval-settings-panel { background: #f8f9fa; border-color: #e0e0e0; }
.light-theme .approval-settings-header { color: #333; }
.light-theme .setting-info label { color: #333; }
.light-theme .setting-desc { color: #666; }
.light-theme .approval-select { background: #fff; color: #333; border-color: #ddd; }
.light-theme .approval-decision-panel { background: #f8f9fa; border-color: #e0e0e0; }
.light-theme .decision-note { background: #fff; color: #555; }
.light-theme .approval-modal-overlay .modal-content { background: #fff; border-color: #e0e0e0; }
.light-theme .modal-header { border-color: #e0e0e0; }
.light-theme .modal-header h3 { color: #333; }
.light-theme .modal-footer { border-color: #e0e0e0; }
.light-theme .form-group label { color: #333; }
.light-theme .form-static { background: #f0f0f0; color: #333; }
.light-theme .form-select, .light-theme .form-textarea {
    background: #fff; color: #333; border-color: #ddd;
}
.light-theme .notif-dropdown { background: #fff; border-color: #e0e0e0; }
.light-theme .notif-header { color: #333; border-color: #e0e0e0; }
.light-theme .notif-item:hover { background: #f0f0f0; }
.light-theme .notif-message { color: #333; }
.light-theme .audit-content strong { color: #333; }
.light-theme .audit-notes { background: #f0f0f0; }
.light-theme .task-lock-banner { background: rgba(255, 171, 0, 0.08); }


/* ═══════════════════════════════════════════
   PRD-COMPLIANT ADDITIONS
   ═══════════════════════════════════════════ */

/* ── Request Approval Header Button ── */
.request-approval-header-btn {
  background: none;
  border: 1px solid var(--border-color, #444);
  color: var(--text-primary, #e0e0e0);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}
.request-approval-header-btn:hover {
  border-color: #58a6ff;
  color: #58a6ff;
}
.light-theme .request-approval-header-btn {
  border-color: #d0d0d0;
  color: #333;
}
.light-theme .request-approval-header-btn:hover {
  border-color: #4285f4;
  color: #4285f4;
}

/* ── Approval Header Badge ── */
.approval-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.approval-header-badge.pending {
  background: rgba(255, 171, 0, 0.12);
  color: #ffab00;
  border: 1px solid rgba(255, 171, 0, 0.3);
}
.approval-header-badge.approved {
  background: rgba(52, 168, 83, 0.12);
  color: #34a853;
  border: 1px solid rgba(52, 168, 83, 0.3);
}
.approval-header-badge.changes {
  background: rgba(234, 67, 53, 0.12);
  color: #ea4335;
  border: 1px solid rgba(234, 67, 53, 0.3);
}

/* ── Settings Card (Group Settings §1) ── */
.approval-settings-card {
  background: var(--bg-secondary, #1e1e2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 10px;
  padding: 24px;
  margin: 20px 0;
}
.approval-settings-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.approval-settings-header-row h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}
.approval-settings-icon {
  color: var(--text-secondary, #888);
  font-size: 18px;
}
.approval-settings-divider {
  height: 1px;
  background: var(--border-color, #333);
  margin: 18px 0;
}
.approval-setting-block {
  padding: 4px 0;
}
.approval-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.setting-info label {
  display: block;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 4px;
  font-size: 14px;
}
.setting-desc {
  font-size: 13px;
  color: var(--text-secondary, #888);
  line-height: 1.5;
  max-width: 600px;
}
.approver-select {
  width: 100%;
  max-width: 380px;
  padding: 10px 14px;
  background: var(--bg-primary, #161622);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.approver-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 171, 0, 0.1);
  border: 1px solid rgba(255, 171, 0, 0.3);
  border-radius: 6px;
  margin-top: 12px;
  color: #ffab00;
  font-size: 13px;
}
.approver-warning i {
  font-size: 16px;
  flex-shrink: 0;
}
.light-theme .approval-settings-card {
  background: #fff;
  border-color: #e0e0e0;
}
.light-theme .approver-select {
  background: #f8f9fa;
  color: #333;
  border-color: #d0d0d0;
}

/* ── Lock Info Banner in Request Modal ── */
.lock-info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(88, 166, 255, 0.08);
  border-radius: 8px;
  color: var(--text-secondary, #888);
  font-size: 13px;
  margin-top: 8px;
}
.lock-info-banner i {
  color: #58a6ff;
  font-size: 16px;
}
.light-theme .lock-info-banner {
  background: #f0f5ff;
  color: #555;
}

/* ── Character Counter ── */
.char-counter {
  text-align: right;
  font-size: 12px;
  color: var(--text-secondary, #666);
  margin-top: 4px;
}
.char-count-inline {
  font-weight: normal;
  color: var(--text-secondary, #666);
}

/* ── Form Labels ── */
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}
.light-theme .form-label { color: #333; }

/* ── Modal Header Variants ── */
.modal-header.approve-header h3 i { color: #34a853; }
.modal-header.reject-header h3 i { color: #ea4335; }
.modal-header.changes-header h3 i { color: #ffab00; }
.modal-header.abort-header h3 i { color: #ea4335; }

/* ── Approve Submit Button ── */
.btn-approve-submit {
  padding: 8px 20px;
  background: #34a853;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-approve-submit:hover { background: #2d9249; }

/* ── Abort Button ── */
.abort-btn {
  background: transparent;
  color: #ea4335;
  border: 1px solid rgba(234, 67, 53, 0.4);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.abort-btn:hover {
  background: rgba(234, 67, 53, 0.1);
}

.btn-abort {
  padding: 8px 20px;
  background: #ea4335;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-abort:hover { background: #d33426; }

.abort-warning-text {
  color: var(--text-secondary, #888);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ── Approver Field Styling ── */
.approver-field {
  font-size: 14px !important;
  padding: 10px 14px !important;
}


/* ═══════════════════════════════════════════
   STATUS STRIP BANNERS (View Task Popup)
   ═══════════════════════════════════════════ */
.approval-status-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 16px;
  margin: 0 -16px 16px -16px;
  font-size: 14px;
  font-weight: 600;
}
.approval-status-strip.approved {
  background: linear-gradient(135deg, rgba(52, 168, 83, 0.12), rgba(52, 168, 83, 0.06));
  border-bottom: 1px solid rgba(52, 168, 83, 0.2);
}
.approval-status-strip.approved .approval-status-strip-text {
  color: #34a853;
  display: flex;
  align-items: center;
  gap: 6px;
}
.approval-status-strip.pending {
  background: linear-gradient(135deg, rgba(234, 67, 53, 0.08), rgba(234, 67, 53, 0.03));
  border-bottom: 1px solid rgba(234, 67, 53, 0.15);
}
.approval-status-strip.pending .approval-status-strip-text {
  color: #ea4335;
  display: flex;
  align-items: center;
  gap: 6px;
}
.approval-status-strip.changes-requested {
  background: linear-gradient(135deg, rgba(255, 171, 0, 0.1), rgba(255, 171, 0, 0.04));
  border-bottom: 1px solid rgba(255, 171, 0, 0.2);
}
.approval-status-strip.changes-requested .approval-status-strip-text {
  color: #ffab00;
  display: flex;
  align-items: center;
  gap: 6px;
}
.approval-status-strip-text i {
  font-size: 14px;
}

/* Override header badge to neutral bordered look matching reference images */
.approval-header-badge.pending,
.approval-header-badge.approved,
.approval-header-badge.changes {
  background: transparent !important;
  color: var(--text-primary, #e0e0e0) !important;
  border: 1px solid var(--border-color, #444) !important;
}
.light-theme .approval-header-badge.pending,
.light-theme .approval-header-badge.approved,
.light-theme .approval-header-badge.changes {
  color: #333 !important;
  border-color: #d0d0d0 !important;
}

/* Light theme strip overrides */
.light-theme .approval-status-strip.approved {
  background: linear-gradient(135deg, rgba(52, 168, 83, 0.15), rgba(52, 168, 83, 0.05));
}
.light-theme .approval-status-strip.pending {
  background: linear-gradient(135deg, rgba(234, 67, 53, 0.08), rgba(234, 67, 53, 0.02));
}

/* ═══════════════════════════════════════════
   RESPONSIVE DESIGN - Approval UI Elements
   ═══════════════════════════════════════════ */
@media (max-width: 1200px) {
  .approval-modal-overlay .modal-content { width: 420px; max-width: 92vw; }
  .decision-actions { flex-direction: column; gap: 6px; }
  .decision-btn { width: 100%; justify-content: center; }
}
@media (max-width: 768px) {
  .approval-modal-overlay .modal-content { width: 95vw; max-height: 90vh; border-radius: 8px; }
  .modal-footer { flex-direction: column; }
  .modal-footer .btn-cancel,
  .modal-footer .btn-submit,
  .modal-footer .btn-reject,
  .modal-footer .btn-changes,
  .modal-footer .btn-abort,
  .modal-footer .btn-approve-submit { width: 100%; justify-content: center; }
  .approval-status-strip { padding: 6px 12px; margin: 0 -12px 12px -12px; font-size: 13px; }
  .request-approval-header-btn { padding: 4px 10px; font-size: 12px; }
  .approval-header-badge { padding: 3px 8px; font-size: 11px; }
  .notif-dropdown { width: 280px; right: -20px; }
}
@media (max-width: 480px) {
  .approval-modal-overlay .modal-content { width: 100vw; max-height: 100vh; border-radius: 0; margin: 0; }
  .approval-status-strip { padding: 6px 10px; font-size: 12px; }
  .form-select, .form-textarea { font-size: 16px; }
  .decision-btn { width: 100%; justify-content: center; padding: 10px; }
}