/* ==========================================================================
   pages.css — Account Settings, Help & Support, Empty States, Skeletons
   ========================================================================== */

/* ========== ACCOUNT SETTINGS ========== */

.acct-settings-view {
    animation: pageReveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pageReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.acct-page-title {
    font-size: 22px; font-weight: 800; color: var(--gray-900);
    letter-spacing: -0.3px; margin-bottom: var(--s-6);
    position: relative; padding-left: var(--s-4);
}

.acct-page-title::after {
    content: ''; position: absolute; left: 0; top: 2px;
    width: 4px; height: calc(100% - 4px); border-radius: var(--r-full);
    background: linear-gradient(180deg, var(--brand), var(--brand-light));
}

.acct-page {
    max-width: 680px; margin: 0 auto;
}

.acct-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--r-lg); padding: var(--s-8);
}

/* Sections */
.acct-section { margin-bottom: var(--s-8); }
.acct-section:last-child { margin-bottom: 0; }

.acct-section-title {
    font-size: 15px; font-weight: 700; color: var(--gray-900);
    padding-bottom: var(--s-3); border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-2);
}

.acct-section-title i { width: 18px; height: 18px; color: var(--gray-400); }

.acct-section-title.danger-title {
    color: var(--error); border-bottom-color: #FECACA;
}

.acct-section-title.danger-title i { color: var(--error); }

/* Avatar row */
.acct-avatar-row {
    display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-6);
}

.acct-avatar-lg {
    width: 72px; height: 72px; border-radius: var(--r-full);
    background: var(--brand); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; position: relative; flex-shrink: 0;
}

.acct-avatar-edit {
    position: absolute; bottom: 0; right: 0;
    width: 26px; height: 26px; border-radius: var(--r-full);
    background: var(--white); border: 1.5px solid var(--gray-200);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow-xs); transition: all var(--t-fast);
}

.acct-avatar-edit:hover { border-color: var(--brand); }
.acct-avatar-edit i { width: 12px; height: 12px; color: var(--gray-500); }

.acct-avatar-info .sa-name { font-size: 16px; font-weight: 700; color: var(--gray-900); }
.acct-avatar-info .sa-email { font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.acct-avatar-info .sa-role { margin-top: var(--s-1-5); }

/* Role badges (reuse from profile menu) */
.acct-role-badge {
    display: inline-flex; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: var(--r-full);
}

.acct-role-badge.acq-lead { background: rgba(72,122,123,0.1); color: var(--brand); }
.acct-role-badge.assignee { background: #EEF2FF; color: #6366F1; }
.acct-role-badge.submitter { background: #F0FDF4; color: #16A34A; }

/* Field rows */
.acct-field-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4);
}

.acct-field label {
    display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: var(--s-1-5);
}

.acct-field input, .acct-field select {
    width: 100%; padding: 10px 14px; border: 1px solid var(--gray-200);
    border-radius: var(--r-md); font: 400 14px/1.4 var(--font-sans);
    color: var(--gray-900); background: var(--white); transition: border-color var(--t-fast);
}

.acct-field input:focus, .acct-field select:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow);
}

.acct-field input[readonly] {
    background: var(--gray-50); color: var(--gray-500); cursor: not-allowed;
}

/* Buttons */
.acct-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border-radius: var(--r-md);
    font: 600 13px/1 var(--font-sans); cursor: pointer; transition: all var(--t-fast);
}

.acct-btn i { width: 14px; height: 14px; }
.acct-btn-primary { background: var(--brand); color: var(--white); border: none; }
.acct-btn-primary:hover { background: var(--brand-dark); }
.acct-btn-outline { background: var(--white); color: var(--gray-700); border: 1px solid var(--gray-200); }
.acct-btn-outline:hover { border-color: var(--gray-300); box-shadow: var(--shadow-xs); }
.acct-btn-danger { background: var(--white); color: var(--error); border: 1px solid #FECACA; }
.acct-btn-danger:hover { background: #FEF2F2; border-color: var(--error); }

/* Session info */
.acct-session-info {
    display: flex; align-items: center; gap: var(--s-2);
    font-size: 12px; color: var(--gray-400); margin-top: var(--s-4);
}

.acct-session-info i { width: 14px; height: 14px; }

/* Notification preferences table */
.acct-notif-table { width: 100%; border-collapse: collapse; }

.acct-notif-table thead th {
    padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 600;
    color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gray-200);
}

.acct-notif-table thead th:not(:first-child) { text-align: center; width: 80px; }

.acct-notif-table tbody td {
    padding: 12px 16px; border-bottom: 1px solid var(--gray-100);
    font-size: 13px; color: var(--gray-700);
}

.acct-notif-table tbody td:not(:first-child) { text-align: center; }

/* Toggle switch (notification prefs) */
.acct-toggle {
    width: 36px; height: 20px; border-radius: var(--r-full);
    background: var(--gray-200); position: relative;
    display: inline-block; cursor: pointer; transition: background 0.2s ease;
}

.acct-toggle.on { background: var(--brand); }

.acct-toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: var(--r-full);
    background: var(--white); box-shadow: var(--shadow-xs);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.acct-toggle.on::after { transform: translateX(16px); }

/* Danger zone */
.acct-danger-zone {
    border: 1px solid #FECACA; border-radius: var(--r-md);
    padding: var(--s-5); background: rgba(254,242,242,0.5);
}

.acct-danger-zone h4 { font-size: 14px; font-weight: 600; color: #991B1B; margin-bottom: 4px; }
.acct-danger-zone p { font-size: 13px; color: #DC2626; line-height: 1.5; margin-bottom: var(--s-4); }

/* Deactivate confirmation modal */
.acct-confirm-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    animation: acctFadeIn 0.2s ease;
}

@keyframes acctFadeIn { from { opacity: 0; } to { opacity: 1; } }

.acct-confirm-modal {
    background: var(--white); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); width: 420px; max-width: 90vw;
    overflow: hidden; animation: acctModalEntry 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes acctModalEntry {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.acct-confirm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; border-bottom: 1px solid var(--gray-100);
}

.acct-confirm-head h3 { font-size: 16px; font-weight: 700; color: #991B1B; }

.acct-confirm-close {
    background: none; border: none; cursor: pointer; color: var(--gray-400);
    display: flex; align-items: center; padding: 4px;
    border-radius: var(--r-sm); transition: background var(--t-fast);
}

.acct-confirm-close:hover { background: var(--gray-100); }
.acct-confirm-close i { width: 16px; height: 16px; }

.acct-confirm-body { padding: 20px 24px; }
.acct-confirm-body p { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin-bottom: var(--s-4); }

.acct-confirm-input {
    width: 100%; padding: 10px 14px; border: 1px solid var(--gray-200);
    border-radius: var(--r-md); font: 400 14px/1.4 var(--font-sans);
    color: var(--gray-900); transition: border-color var(--t-fast);
}

.acct-confirm-input:focus {
    outline: none; border-color: var(--error); box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}

.acct-confirm-foot {
    display: flex; gap: var(--s-3); justify-content: flex-end;
    padding: 16px 24px; border-top: 1px solid var(--gray-100);
}

/* ========== HELP & SUPPORT ========== */

.help-view {
    animation: pageReveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.help-page-title {
    font-size: 22px; font-weight: 800; color: var(--gray-900);
    letter-spacing: -0.3px; margin-bottom: var(--s-6);
    position: relative; padding-left: var(--s-4);
}

.help-page-title::after {
    content: ''; position: absolute; left: 0; top: 2px;
    width: 4px; height: calc(100% - 4px); border-radius: var(--r-full);
    background: linear-gradient(180deg, var(--brand), var(--brand-light));
}

.help-page { max-width: 680px; margin: 0 auto; }

.help-tabs {
    display: flex; gap: var(--s-1); background: var(--gray-100); padding: 3px;
    border-radius: var(--r-md); width: fit-content; margin-bottom: var(--s-6);
}

.help-tab {
    padding: 8px 16px; border-radius: var(--r-sm); border: none;
    background: transparent; font: 500 13px/1 var(--font-sans);
    color: var(--gray-500); cursor: pointer; transition: all var(--t-fast);
}

.help-tab:hover { color: var(--gray-700); }

.help-tab.active {
    background: var(--white); color: var(--brand); box-shadow: var(--shadow-xs); font-weight: 600;
}

.help-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--r-lg); padding: var(--s-8);
}

/* Contact card */
.help-contact-card {
    display: flex; gap: var(--s-4); padding: var(--s-5);
    background: var(--brand-wash); border: 1px solid rgba(72,122,123,0.12);
    border-radius: var(--r-md); margin-bottom: var(--s-6);
}

.help-contact-icon {
    width: 44px; height: 44px; border-radius: var(--r-md);
    background: var(--brand); color: var(--white);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.help-contact-icon i { width: 20px; height: 20px; }

.help-contact-text h4 { font-size: 14px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
.help-contact-text p { font-size: 13px; color: var(--gray-600); line-height: 1.5; }
.help-contact-text a { color: var(--brand); font-weight: 500; text-decoration: none; }
.help-contact-text a:hover { text-decoration: underline; }

/* FAQ */
.help-faq-heading {
    font-size: 15px; font-weight: 700; color: var(--gray-900);
    margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-2);
}

.help-faq-heading i { width: 18px; height: 18px; color: var(--gray-400); }

.help-faq-list { margin-bottom: var(--s-8); }

.help-faq-item {
    border: 1px solid var(--gray-200); border-radius: var(--r-md);
    margin-bottom: var(--s-2); overflow: hidden; background: var(--white);
}

.help-faq-question {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; cursor: pointer; font: 500 14px/1.4 var(--font-sans);
    color: var(--gray-900); background: none; border: none; width: 100%;
    text-align: left; transition: background var(--t-fast);
}

.help-faq-question:hover { background: var(--gray-50); }

.help-faq-question i {
    width: 16px; height: 16px; color: var(--gray-400); flex-shrink: 0;
    transition: transform 0.2s ease;
}

.help-faq-item.open .help-faq-question i { transform: rotate(180deg); }

.help-faq-answer {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease;
    font-size: 13px; color: var(--gray-600); line-height: 1.6; padding: 0 20px;
}

.help-faq-item.open .help-faq-answer { max-height: 200px; padding: 0 20px 16px; }

/* Quick links */
.help-links-heading {
    font-size: 15px; font-weight: 700; color: var(--gray-900);
    margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-2);
}

.help-links-heading i { width: 18px; height: 18px; color: var(--gray-400); }

.help-quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.help-quick-link {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    border: 1px solid var(--gray-200); border-radius: var(--r-md);
    background: var(--white); cursor: pointer; transition: all var(--t-fast);
    text-decoration: none; color: var(--gray-700); font: 500 13px/1 var(--font-sans);
}

.help-quick-link:hover { border-color: var(--brand); box-shadow: var(--shadow-xs); color: var(--brand); }
.help-quick-link i { width: 16px; height: 16px; color: var(--gray-400); }
.help-quick-link:hover i { color: var(--brand); }

/* Report issue */
.help-report-header {
    display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6);
}

.help-report-icon {
    width: 44px; height: 44px; border-radius: var(--r-md);
    background: #EEF2FF; color: #6366F1;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.help-report-icon i { width: 20px; height: 20px; }
.help-report-header h2 { font-size: 18px; font-weight: 700; color: var(--gray-900); }
.help-report-header p { font-size: 13px; color: var(--gray-500); margin-top: 2px; }

.help-report-label {
    font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 10px;
}

.help-report-label .required { color: var(--error); }

.help-report-categories { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }

.help-report-category {
    display: flex; align-items: center; gap: var(--s-3); padding: 14px 16px;
    border: 1px solid var(--gray-200); border-radius: var(--r-md);
    cursor: pointer; transition: all var(--t-fast); background: var(--white);
}

.help-report-category:hover { border-color: var(--brand); background: var(--brand-wash); }
.help-report-category.selected { border-color: var(--brand); background: var(--brand-wash); }

.help-report-radio {
    width: 18px; height: 18px; border-radius: var(--r-full);
    border: 2px solid var(--gray-300); flex-shrink: 0; position: relative;
    transition: border-color var(--t-fast);
}

.help-report-category.selected .help-report-radio { border-color: var(--brand); }

.help-report-category.selected .help-report-radio::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 8px; height: 8px; border-radius: var(--r-full); background: var(--brand);
}

.help-report-category-label { font-size: 13px; color: var(--gray-700); font-weight: 500; }
.help-report-category.selected .help-report-category-label { color: var(--brand); font-weight: 600; }

.help-report-textarea {
    width: 100%; min-height: 120px; padding: 12px 14px;
    border: 1px solid var(--gray-200); border-radius: var(--r-md);
    font: 400 14px/1.5 var(--font-sans); color: var(--gray-900);
    resize: vertical; transition: border-color var(--t-fast);
}

.help-report-textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow);
}

.help-report-checkbox {
    display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-6);
    font-size: 13px; color: var(--gray-600); cursor: pointer;
}

.help-report-checkbox input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

.help-report-actions { display: flex; gap: var(--s-3); }

/* ========== EMPTY STATES (reusable) ========== */

.pages-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 24px; text-align: center;
}

.pages-empty-icon {
    width: 64px; height: 64px; border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}

.pages-empty-icon i { width: 28px; height: 28px; }
.pages-empty-icon.gray { background: var(--gray-100); color: var(--gray-400); }
.pages-empty-icon.green { background: #F0FDF4; color: #22C55E; }
.pages-empty-icon.brand { background: rgba(72,122,123,0.08); color: var(--brand); }

.pages-empty-state h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.pages-empty-state p { font-size: 14px; color: var(--gray-500); max-width: 360px; line-height: 1.6; margin-bottom: 24px; }

.pages-empty-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border-radius: var(--r-md);
    background: var(--brand); color: var(--white); border: none;
    font: 600 13px/1 var(--font-sans); cursor: pointer; transition: background var(--t-fast);
}

.pages-empty-cta:hover { background: var(--brand-dark); }
.pages-empty-cta i { width: 16px; height: 16px; }

/* ========== LOADING SKELETONS ========== */

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skel {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 37%, var(--gray-100) 63%);
    background-size: 800px 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--r-sm);
}

.skel-row {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 16px; border-bottom: 1px solid var(--gray-100);
}

.skel-circle { width: 32px; height: 32px; border-radius: var(--r-full); flex-shrink: 0; }

.skel-line { height: 12px; border-radius: var(--r-sm); }
.skel-line.w-20 { width: 20%; } .skel-line.w-30 { width: 30%; }
.skel-line.w-40 { width: 40%; } .skel-line.w-50 { width: 50%; }
.skel-line.w-60 { width: 60%; } .skel-line.w-80 { width: 80%; }
.skel-line.w-90 { width: 90%; }

.skel-block { border-radius: var(--r-md); }

/* Detail skeleton layout */
.skel-detail-header { display: flex; gap: 16px; margin-bottom: 24px; align-items: center; }

.skel-detail-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;
}

.skel-detail-field .skel-line:first-child { height: 10px; width: 40%; margin-bottom: 8px; }
.skel-detail-field .skel-line:last-child { height: 14px; width: 80%; }

.skel-detail-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skel-detail-card { height: 80px; border-radius: var(--r-md); }

/* ========== ERROR STATES ========== */

/* Network error banner */
.pages-network-banner {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 12px 20px; background: #FEF2F2; border: 1px solid #FECACA;
    border-radius: var(--r-md); margin-bottom: var(--s-4);
}

.pages-network-banner > i { width: 18px; height: 18px; color: var(--error); flex-shrink: 0; }

.pages-network-text { flex: 1; font-size: 13px; color: #991B1B; }
.pages-network-text strong { font-weight: 600; }

.pages-network-btn {
    font: 600 12px/1 var(--font-sans); color: var(--error);
    background: var(--white); border: 1px solid #FECACA;
    padding: 6px 14px; border-radius: var(--r-md); cursor: pointer;
    transition: all var(--t-fast); white-space: nowrap;
}

.pages-network-btn:hover { background: #FEF2F2; border-color: var(--error); }

/* Access denied */
.pages-access-denied {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 24px; text-align: center;
}

.pages-access-code {
    font: 700 56px/1 var(--font-mono); color: var(--gray-200);
    margin-bottom: 16px; letter-spacing: -2px;
}

.pages-access-icon {
    width: 72px; height: 72px; border-radius: var(--r-full);
    background: #FEF2F2; color: var(--error);
    display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}

.pages-access-icon i { width: 32px; height: 32px; }

.pages-access-denied h3 { font-size: 18px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.pages-access-denied p { font-size: 14px; color: var(--gray-500); max-width: 400px; line-height: 1.6; margin-bottom: 24px; }

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .acct-page, .help-page { padding: 0 var(--s-4); }
    .acct-card, .help-card { padding: var(--s-5); }
    .acct-field-row { grid-template-columns: 1fr; }
    .help-quick-links { grid-template-columns: 1fr; }
    .help-tabs { flex-wrap: wrap; }
    .skel-detail-fields { grid-template-columns: 1fr; }
    .skel-detail-cards { grid-template-columns: 1fr; }
}