/* ── Site Header ─────────────────────────────────── */
.site-header {position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 52px; background-color: #fff; border-bottom: 1px solid #e0e0e0; font-family: 'Open Sans', sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,0.06);}
.site-header-brand {color: #1a6fbf; font-size: 16px; font-weight: 700; text-decoration: none; letter-spacing: 0.5px;}
.site-header-login {display: inline-block; padding: 7px 18px; font-size: 13px; font-weight: 700; color: #fff; background-color: #1a6fbf; border: 1px solid #1a6fbf; border-radius: 4px; text-decoration: none; transition: background-color 0.2s;}
.site-header-login:hover {background-color: #155fa3;}

/* ── Portal Page Base ───────────────────────────── */
.portal-body {margin: 0; padding: 0; min-height: 100vh; background-color: #f4f5f7; font-family: 'Open Sans', sans-serif; color: #333;}
.portal-body .site-header {position: relative;}

/* ── Login Page ─────────────────────────────────── */
.login-container {display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 52px); padding: 24px;}
.login-card {width: 100%; max-width: 380px; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 36px 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);}
.login-card h1 {margin: 0 0 24px 0; font-size: 22px; font-weight: 700; color: #1a6fbf; text-align: center;}

/* ── Forms ──────────────────────────────────────── */
.form-group {margin-bottom: 18px;}
.form-group label {display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #555;}
.form-group input {width: 100%; padding: 10px 12px; font-size: 14px; font-family: 'Open Sans', sans-serif; color: #333; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; outline: none; transition: border-color 0.2s;}
.form-group input:focus {border-color: #1a6fbf; box-shadow: 0 0 0 2px rgba(26,111,191,0.12);}
.password-wrapper {position: relative;}
.password-wrapper input {padding-right: 42px;}
.password-toggle {position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #888; padding: 4px; display: flex; align-items: center;}
.password-toggle:hover {color: #555;}
.form-error {display: none; margin-bottom: 16px; padding: 10px 12px; font-size: 13px; color: #c0392b; background-color: #fdf0ef; border: 1px solid #f5c6cb; border-radius: 4px;}
.form-success {display: none; margin-bottom: 16px; padding: 10px 12px; font-size: 13px; color: #27ae60; background-color: #eafaf1; border: 1px solid #a3d9b1; border-radius: 4px;}

/* ── Buttons ────────────────────────────────────── */
.btn-primary {display: block; width: 100%; padding: 11px; font-size: 14px; font-weight: 700; font-family: 'Open Sans', sans-serif; color: #fff; background-color: #1a6fbf; border: 1px solid #1a6fbf; border-radius: 4px; cursor: pointer; transition: background-color 0.2s;}
.btn-primary:hover {background-color: #155fa3;}

/* ── Login Footer ───────────────────────────────── */
.login-footer {margin-top: 20px; text-align: center; font-size: 13px;}
.login-footer a {color: #1a6fbf; text-decoration: none;}
.login-footer a:hover {text-decoration: underline;}

/* ── Admin Nav ──────────────────────────────────── */
.admin-nav {display: flex; gap: 4px; padding: 0 24px; background-color: #fff; border-bottom: 1px solid #e0e0e0;}
.admin-nav-item {padding: 12px 16px; font-size: 13px; font-weight: 700; color: #777; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;}
.admin-nav-item:hover {color: #333;}
.admin-nav-item.active {color: #1a6fbf; border-bottom-color: #1a6fbf;}

/* ── Admin Layout ───────────────────────────────── */
.admin-content {max-width: 960px; margin: 0 auto; padding: 24px;}
.admin-content h1 {color: #333; font-size: 22px; margin: 0 0 20px 0;}
.admin-toolbar {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px;}
.btn-sm {display: inline-block; padding: 8px 16px; font-size: 13px; font-weight: 700; font-family: 'Open Sans', sans-serif; color: #fff; background-color: #1a6fbf; border: 1px solid #1a6fbf; border-radius: 4px; cursor: pointer; text-decoration: none; transition: background-color 0.2s;}
.btn-sm:hover {background-color: #155fa3;}
.btn-danger {background-color: #c0392b; border-color: #c0392b;}
.btn-danger:hover {background-color: #a93226;}
.btn-secondary {background-color: #6c757d; border-color: #6c757d;}
.btn-secondary:hover {background-color: #5a6268;}

/* ── Tables ─────────────────────────────────────── */
.data-table {width: 100%; border-collapse: collapse; font-size: 13px;}
.data-table th {text-align: left; padding: 10px 12px; color: #555; font-weight: 700; border-bottom: 2px solid #dee2e6; white-space: nowrap;}
.data-table td {padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: top; color: #333;}
.data-table tr:hover td {background-color: #f8f9fa;}
.data-table .actions {white-space: nowrap;}
.data-table .actions a, .data-table .actions button:not(.btn-sm) {margin-right: 8px; color: #1a6fbf; background: none; border: none; cursor: pointer; font-size: 13px; font-family: 'Open Sans', sans-serif; text-decoration: none;}
.data-table .actions a:hover, .data-table .actions button:not(.btn-sm):hover {text-decoration: underline;}
.status-badge {display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase;}
.status-new {color: #c0392b; background-color: #fdf0ef;}
.status-invited {color: #d68910; background-color: #fef9e7;}
.status-active {color: #27ae60; background-color: #eafaf1;}
.status-disabled {color: #888; background-color: #f2f2f2;}
.status-draft {color: #d68910; background-color: #fef9e7;}
.status-sent {color: #2e86c1; background-color: #ebf5fb;}
.status-paid {color: #27ae60; background-color: #eafaf1;}
.status-void {color: #888; background-color: #f2f2f2;}
.status-unpaid {color: #c0392b; background-color: #fdf0ef;}
.btn-orange {background-color: #e67e22; border-color: #e67e22;}
.btn-orange:hover {background-color: #d35400;}
.action-pay {display: inline-block; padding: 5px 14px; font-size: 12px; font-weight: 700; color: #fff; background-color: #27ae60; border-radius: 3px; text-decoration: none; transition: background-color 0.2s;}
.action-pay:hover {background-color: #219a52; text-decoration: none;}

/* ── Modal ──────────────────────────────────────── */
.modal-overlay {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 2000; justify-content: center; align-items: center; padding: 24px;}
.modal-overlay.open {display: flex;}
.modal {width: 100%; max-width: 480px; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 28px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);}
.modal h2 {color: #333; font-size: 18px; margin: 0 0 20px 0;}
.modal-actions {display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px;}

/* ── Detail Card ────────────────────────────────── */
.detail-card {background-color: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);}
.detail-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;}
.detail-label {display: block; font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; margin-bottom: 2px;}
.detail-value {display: block; font-size: 14px; color: #333;}
#checkoutContainer {min-height: 300px; border-radius: 6px; overflow: hidden;}