/* ============================================================
   QAF – Component Styles
   Luxury Editorial Theme — Synced with Landing Page
   ============================================================ */

/* ── Buttons (editorial style) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:13px 32px;font-family:'Tenor Sans',sans-serif;font-size:0.65rem;font-weight:400;letter-spacing:0.35em;text-transform:uppercase;border:1px solid transparent;transition:all 0.4s ease;position:relative;cursor:pointer}

.btn-primary{background:var(--clr-ink);color:var(--clr-cream);border-color:var(--clr-ink)}
.btn-primary:hover{background:var(--clr-gold);border-color:var(--clr-gold);color:var(--clr-cream)}

.btn-gold{background:var(--clr-gold);color:var(--clr-cream);border-color:var(--clr-gold)}
.btn-gold:hover{background:var(--clr-gold-dark);border-color:var(--clr-gold-dark)}

.btn-outline{background:transparent;color:var(--clr-gold);border-color:rgba(184,150,62,0.4)}
.btn-outline:hover{background:rgba(184,150,62,0.08);border-color:var(--clr-gold)}

.btn-ghost{background:transparent;color:var(--clr-ink-muted);border-color:transparent;letter-spacing:0.2em}
.btn-ghost:hover{color:var(--clr-gold);background:rgba(184,150,62,0.05)}

.btn-danger{background:var(--clr-error);color:#fff;border-color:var(--clr-error)}
.btn-danger:hover{opacity:0.85}

.btn-sm{padding:8px 20px;font-size:0.58rem;letter-spacing:0.3em}
.btn-lg{padding:16px 40px;font-size:0.7rem}
.btn-block{width:100%}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none!important}
.btn-icon{width:36px;height:36px;padding:0;border:1px solid rgba(184,150,62,0.3);display:flex;align-items:center;justify-content:center}
.btn-icon.btn-sm{width:30px;height:30px}
.btn-icon:hover{border-color:var(--clr-gold);color:var(--clr-gold)}

/* ── Cards (editorial) ── */
.card{background:rgba(247,243,238,0.8);border:1px solid rgba(184,150,62,0.15);padding:var(--sp-6);transition:all 0.4s ease;position:relative}
.card:hover{border-color:rgba(184,150,62,0.3);box-shadow:0 8px 32px rgba(184,150,62,0.06)}
.card-header{padding-bottom:var(--sp-4);border-bottom:1px solid rgba(184,150,62,0.15);margin-bottom:var(--sp-4)}
.card-title{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);color:var(--clr-ink);font-weight:400;margin-bottom:var(--sp-2)}
.card-body{flex:1}
.card-footer{padding-top:var(--sp-4);border-top:1px solid rgba(184,150,62,0.15);margin-top:var(--sp-4)}

/* ── Form Elements (editorial) ── */
.form-group{margin-bottom:var(--sp-5)}
.form-label{display:block;font-family:'Tenor Sans',sans-serif;font-size:0.65rem;font-weight:400;letter-spacing:0.25em;text-transform:uppercase;color:var(--clr-ink-muted);margin-bottom:var(--sp-2)}
.form-label .required{color:var(--clr-gold);margin-left:2px}
.form-input,.form-select,.form-textarea{width:100%;padding:12px 0;background:transparent;border:none;border-bottom:1px solid rgba(184,150,62,0.3);font-family:'Tenor Sans',sans-serif;font-size:0.85rem;color:var(--clr-ink);transition:border-color 0.3s ease;letter-spacing:0.05em;outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--clr-gold)}
.form-input::placeholder{color:var(--clr-ink-muted);font-size:0.78rem;letter-spacing:0.08em}
.form-textarea{resize:vertical;min-height:100px;border:1px solid rgba(184,150,62,0.3);padding:12px 16px;margin-top:4px}
.form-textarea:focus{border-color:var(--clr-gold)}
.form-select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8963E' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.form-hint{font-size:0.6rem;color:var(--clr-ink-muted);margin-top:var(--sp-1);letter-spacing:0.1em}
.form-error{font-size:0.6rem;color:var(--clr-error);margin-top:var(--sp-1);display:none;letter-spacing:0.05em}
.form-group.error .form-input{border-color:var(--clr-error)}
.form-group.error .form-error{display:block}

.form-file{position:relative;border:1px solid rgba(184,150,62,0.25);padding:var(--sp-6) var(--sp-4);text-align:center;cursor:pointer;transition:all 0.3s ease}
.form-file:hover{border-color:var(--clr-gold);background:rgba(184,150,62,0.03)}
.form-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.form-file-icon{font-size:var(--fs-xl);color:var(--clr-gold);margin-bottom:var(--sp-2);opacity:0.6}
.form-file-text{font-size:0.7rem;color:var(--clr-ink-muted);letter-spacing:0.1em}

.form-check{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;font-size:0.8rem}
.form-check input{width:16px;height:16px;accent-color:var(--clr-gold)}

/* ── Badges (editorial) ── */
.badge{display:inline-flex;align-items:center;padding:3px 12px;font-family:'Tenor Sans',sans-serif;font-size:0.55rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase}
.badge-success{background:rgba(91,140,90,0.08);color:var(--clr-success);border:1px solid rgba(91,140,90,0.15)}
.badge-warning{background:rgba(184,150,62,0.08);color:var(--clr-gold);border:1px solid rgba(184,150,62,0.15)}
.badge-error{background:rgba(196,84,84,0.08);color:var(--clr-error);border:1px solid rgba(196,84,84,0.15)}
.badge-info{background:rgba(90,127,160,0.08);color:var(--clr-info);border:1px solid rgba(90,127,160,0.15)}
.badge-gold{background:rgba(184,150,62,0.1);color:var(--clr-gold);border:1px solid rgba(184,150,62,0.2)}

/* ── Modal (editorial) ── */
.modal-overlay{position:fixed;inset:0;background:rgba(26,24,20,0.6);backdrop-filter:blur(8px);z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity 0.35s ease}
.modal-overlay.active{display:flex;opacity:1}
.modal{background:var(--clr-cream);border:1px solid rgba(184,150,62,0.25);max-width:560px;width:100%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 24px 64px rgba(26,24,20,0.2);transform:translateY(30px) scale(0.97);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);padding:40px}
.modal-overlay.active .modal{transform:translateY(0) scale(1)}
.modal-close{position:absolute;top:20px;right:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(184,150,62,0.3);background:transparent;color:var(--clr-ink-muted);transition:all 0.3s;cursor:pointer}
.modal-close:hover{border-color:var(--clr-gold);color:var(--clr-gold)}
.modal-title{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3vw,32px);font-weight:400;color:var(--clr-ink);margin-bottom:var(--sp-4)}
.modal-body{margin-bottom:var(--sp-6)}
.modal-footer{display:flex;gap:var(--sp-3);justify-content:flex-end;padding-top:var(--sp-4);border-top:1px solid rgba(184,150,62,0.15)}

/* ── Toast (editorial) ── */
.toast-container{position:fixed;top:var(--sp-6);right:var(--sp-6);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-3);pointer-events:none}
.toast{pointer-events:all;display:flex;align-items:center;gap:var(--sp-3);padding:16px 20px;background:var(--clr-cream);border:1px solid rgba(184,150,62,0.2);box-shadow:0 12px 40px rgba(26,24,20,0.12);min-width:300px;max-width:420px;transform:translateX(120%);transition:transform var(--duration-base) var(--ease-spring);border-left:2px solid var(--clr-gold)}
.toast.show{transform:translateX(0)}
.toast-success{border-left-color:var(--clr-success)}
.toast-error{border-left-color:var(--clr-error)}
.toast-warning{border-left-color:var(--clr-gold)}
.toast-icon{font-size:var(--fs-lg);flex-shrink:0}
.toast-content{flex:1}
.toast-title{font-family:'Tenor Sans',sans-serif;font-size:0.7rem;font-weight:400;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:2px;color:var(--clr-ink)}
.toast-message{font-size:0.72rem;color:var(--clr-ink-muted)}
.toast-close{flex-shrink:0;padding:var(--sp-1);color:var(--clr-ink-muted)}
.toast-close:hover{color:var(--clr-gold)}

/* ── Skeleton Loader ── */
.skeleton{background:linear-gradient(90deg,rgba(184,150,62,0.06) 25%,rgba(184,150,62,0.12) 50%,rgba(184,150,62,0.06) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}
.skeleton-text{height:14px;margin-bottom:var(--sp-2)}
.skeleton-title{height:24px;width:60%;margin-bottom:var(--sp-3)}
.skeleton-avatar{width:48px;height:48px;border-radius:var(--radius-full)}
.skeleton-card{height:200px}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Table (editorial) ── */
.table-wrapper{overflow-x:auto;border:1px solid rgba(184,150,62,0.15)}
.table{width:100%;border-collapse:collapse}
.table th{background:var(--clr-ink);color:var(--clr-cream);padding:12px 16px;text-align:left;font-family:'Tenor Sans',sans-serif;font-size:0.6rem;font-weight:400;letter-spacing:0.3em;text-transform:uppercase;white-space:nowrap}
.table td{padding:12px 16px;border-bottom:1px solid rgba(184,150,62,0.1);font-size:0.8rem;color:var(--clr-ink-soft)}
.table tbody tr:hover{background:rgba(184,150,62,0.04)}
.table tbody tr:last-child td{border-bottom:none}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-6)}
.pagination button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;color:var(--clr-ink-muted);border:1px solid rgba(184,150,62,0.2);background:transparent;transition:all 0.3s}
.pagination button:hover,.pagination button.active{background:var(--clr-ink);color:var(--clr-cream);border-color:var(--clr-ink)}

/* ── Tabs ── */
.tabs{display:flex;border-bottom:1px solid rgba(184,150,62,0.2);gap:var(--sp-1);overflow-x:auto}
.tab-btn{padding:var(--sp-3) var(--sp-5);font-family:'Tenor Sans',sans-serif;font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--clr-ink-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.3s;white-space:nowrap}
.tab-btn:hover{color:var(--clr-gold)}
.tab-btn.active{color:var(--clr-gold);border-bottom-color:var(--clr-gold)}
.tab-content{display:none;padding-top:var(--sp-6)}
.tab-content.active{display:block}

/* ── Empty State ── */
.empty-state{text-align:center;padding:var(--sp-16) var(--sp-6)}
.empty-state-icon{font-size:3rem;color:rgba(184,150,62,0.3);margin-bottom:var(--sp-4)}
.empty-state-title{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,3vw,28px);font-weight:400;color:var(--clr-ink);margin-bottom:var(--sp-2)}
.empty-state-text{color:var(--clr-ink-muted);font-size:0.8rem;max-width:400px;margin:0 auto var(--sp-6)}

/* ── Loading Spinner ── */
.spinner{width:32px;height:32px;border:2px solid rgba(184,150,62,0.2);border-top-color:var(--clr-gold);border-radius:50%;animation:spin 0.8s linear infinite}
.spinner-sm{width:18px;height:18px;border-width:1.5px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{position:fixed;inset:0;background:rgba(247,243,238,0.95);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:var(--z-overlay);gap:var(--sp-4)}
.loading-text{font-family:'Cormorant Garamond',serif;color:var(--clr-ink);font-size:var(--fs-lg);font-weight:300}

/* ── Tooltips ── */
[data-tooltip]{position:relative}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(0.95);background:var(--clr-ink);color:var(--clr-cream);padding:6px 12px;font-family:'Tenor Sans',sans-serif;font-size:0.6rem;letter-spacing:0.1em;white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--duration-fast) var(--ease-out);z-index:var(--z-tooltip)}
[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) scale(1)}

/* ── Progress Bar ── */
.progress{height:2px;background:rgba(184,150,62,0.1);overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--clr-gold),var(--clr-gold-light));transition:width var(--duration-slow) var(--ease-out)}

/* ── Medal Badges ── */
.medal{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);font-size:var(--fs-lg);font-weight:300}
.medal-gold{background:linear-gradient(135deg,#B8963E,#D4AF6A);color:#fff;box-shadow:0 4px 12px rgba(184,150,62,0.3)}
.medal-silver{background:linear-gradient(135deg,#C0C0C0,#909090);color:#fff;box-shadow:0 4px 12px rgba(160,160,160,0.3)}
.medal-bronze{background:linear-gradient(135deg,#CD7F32,#A06030);color:#fff;box-shadow:0 4px 12px rgba(205,127,50,0.3)}