/* ================================================================
   VERTEX KONSOL — CERTIFICATES
   Anchored popover + confirmation + joining-date dialog + history drawer.
   Dev ekran `dialog` tabanlı eski sistem kaldırıldı.
   ================================================================ */

/* Tetikleyici: satır içi sertifika ikon butonu */
.cert-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.cert-trigger:hover { background: var(--bg-hover); color: var(--text-primary); }
.cert-trigger.is-open { background: var(--bg-elevated); color: var(--text-primary); }
.cert-trigger.has-history { color: var(--status-warning); }

/* ---------- Popover ---------- */
.cert-popover { width: 380px; max-width: calc(100vw - 24px); }

.cert-recipient {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}
.cert-recipient .cert-recipient-name {
    font-size: var(--fs-component-title);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cert-recipient .cert-recipient-mail {
    font-size: var(--fs-metadata);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sertifika seçim satırları */
.cert-options { display: flex; flex-direction: column; gap: var(--space-2); }

.cert-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.cert-option:hover { background: var(--bg-hover); }
.cert-option .icon { color: var(--text-secondary); flex-shrink: 0; }
.cert-option .cert-option-main { flex: 1; min-width: 0; }
.cert-option .cert-option-name {
    font-size: var(--fs-component-title);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cert-option .cert-option-sub { font-size: var(--fs-metadata); color: var(--text-muted); }
.cert-option .cert-option-tenure {
    font-size: var(--fs-metadata);
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cert-option .cert-option-check { color: var(--text-primary); opacity:0;transform:scale(.9); flex-shrink: 0; }
.cert-option.is-selected { background: var(--bg-elevated); border-color: var(--border-strong); }
.cert-option.is-issued .cert-option-check { opacity:1;transform:scale(1); }
.cert-option.is-selected .icon { color: var(--text-primary); }

/* Popover bilgi blokları */
.cert-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0;
}
.cert-facts .cert-fact { min-width: 0; }
.cert-facts dt {
    font-size: var(--fs-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.cert-facts dd { font-size: var(--fs-metadata); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }

.cert-notice {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--status-info-soft);
    color: var(--text-secondary);
    font-size: var(--fs-metadata);
    line-height: var(--lh-normal);
}
.cert-notice .icon { flex-shrink: 0; color: var(--status-info); margin-top: 1px; }
.cert-notice.warn { background: var(--status-warning-soft); }
.cert-notice.warn .icon { color: var(--status-warning); }

.cert-actions-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-3);
}
.cert-actions-row .chrome-btn-outline, .cert-actions-row .chrome-btn-primary, .cert-actions-row .chrome-btn-accent { width: 100%; }
.cert-actions-row .chrome-btn-primary:disabled, .cert-actions-row .chrome-btn-accent:disabled { opacity: 0.4; }

/* Mobil: aynı içerik bottom sheet olarak */
@media (max-width: 720px) {
    .vx-popover.cert-popover {
        left: 8px !important;

        right: 8px;
        bottom: 8px;
        top: auto !important;
        width: auto;
        max-width: none;
        border-radius: var(--radius-xl);
        transform: translateY(12px) scale(1);
        transform-origin: bottom center;
    }
    .vx-popover.cert-popover.is-open { transform: translateY(0) scale(1); }
    .cert-popover .vx-popover-body { max-height: 58vh; overflow-y: auto; padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
}

/* ---------- Confirmation dialog ---------- */
.confirm-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}
.confirm-list .confirm-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px dashed var(--border-subtle);
}
.confirm-list .confirm-row:last-child { border-bottom: none; }
.confirm-list dt { font-size: var(--fs-metadata); color: var(--text-muted); flex-shrink: 0; }
.confirm-list dd {
    font-size: var(--fs-secondary);
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.confirm-warn {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--status-warning-soft);
    color: var(--text-secondary);
    font-size: var(--fs-metadata);
    line-height: var(--lh-normal);
}
.confirm-warn .icon { color: var(--status-warning); flex-shrink: 0; margin-top: 1px; }

/* ---------- Geçmiş drawer ---------- */
.cert-history-list { display: flex; flex-direction: column; gap: var(--space-3); }

.cert-history-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.cert-history-item .cert-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.cert-history-item .cert-history-type { font-size: var(--fs-component-title); font-weight: 600; }
.cert-history-item .cert-history-meta { font-size: var(--fs-metadata); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cert-history-item .cert-history-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-metadata);
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    width: fit-content;
}
.cert-history-item .cert-history-link:hover { color: var(--text-primary); }
.cert-history-item .cert-history-note {
    display: flex;
    gap: var(--space-2);
    font-size: var(--fs-metadata);
    line-height: var(--lh-normal);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
}
.cert-history-item .cert-history-note.uncertain { background: var(--status-warning-soft); color: var(--text-secondary); }
.cert-history-item .cert-history-note.failed { background: var(--status-error-soft); color: var(--text-secondary); }
.cert-history-item .cert-history-note .icon { flex-shrink: 0; margin-top: 1px; }

.cert-history-attempts { font-size: var(--fs-metadata); color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.cert-history-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }

/* ---------- Katılım tarihi dialog ---------- */
.join-date-form { display: flex; flex-direction: column; gap: var(--space-4); }
.join-date-form .form-hint { margin-top: var(--space-1); }

/* Durum rozetleri (processing / failed / uncertain / revoked / delivered) */
.status-badge.is-processing { color: var(--text-muted); background: var(--bg-hover); border-color: transparent; }
.status-badge.is-delivered, .status-badge.is-success { color: var(--status-success); background: var(--status-success-soft); border-color: transparent; }
.status-badge.is-failed { color: var(--status-error); background: var(--status-error-soft); border-color: transparent; }
.status-badge.is-uncertain { color: var(--status-warning); background: var(--status-warning-soft); border-color: transparent; }
.status-badge.is-revoked { color: var(--text-muted); background: var(--bg-hover); border-color: transparent; }


.status-badge.is-succeeded{color:var(--status-success);background:var(--status-success-soft);}
.certificate-drawer{width:460px;max-width:100vw}.certificate-drawer .vx-drawer-body{display:flex;flex-direction:column;gap:20px}.certificate-drawer .cert-recipient{padding:0 0 16px;gap:4px}.cert-recipient small{color:var(--text-secondary);overflow-wrap:anywhere}.certificate-drawer .cert-facts{margin:0;padding:0;gap:20px}.certificate-drawer .cert-facts dd{margin:0}.certificate-drawer .cert-notice{margin:0;background:var(--bg-elevated);padding:12px}.certificate-drawer .cert-options{gap:10px}.certificate-drawer .cert-option{min-height:64px;border-radius:11px}.cert-option-check{opacity:0;transform:scale(.9);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out);width:20px}
.certificate-drawer .vx-drawer-footer{display:flex;flex-direction:column;gap:10px}.certificate-drawer .vx-drawer-footer>button{width:100%}.cert-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cert-secondary-actions button{min-width:0}.certificate-person-search{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.certificate-person-search .search-field{position:relative}.certificate-person-search .search-field>.icon{position:absolute;top:50%;left:12px;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.certificate-person-search input{width:100%;padding-left:40px;min-height:44px}.certificate-person-list{display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0}.certificate-person-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;min-height:64px;border:1px solid var(--border-subtle);border-radius:11px;background:var(--bg-surface);color:var(--text-primary);text-align:left;transition:background-color 130ms var(--ease-out)}.certificate-person-row:hover{background:var(--bg-hover)}.certificate-person-row>span{min-width:0;display:flex;flex-direction:column;gap:4px}.certificate-person-row small{color:var(--text-secondary);overflow-wrap:anywhere}.certificate-person-row>.icon{flex-shrink:0}.certificate-selector-body{display:flex;flex-direction:column}.certificate-selector-body>.certificate-person-list{flex:1}
@media(max-width:720px){.certificate-drawer{width:100vw}.certificate-drawer .vx-drawer-body{padding:20px}.cert-secondary-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cert-option-check{transition:none}}

/* Email templates use the Console's shared surfaces, controls, and theme tokens. */
.email-template-drawer{width:760px;max-width:100vw}.email-template-drawer .vx-drawer-body{display:flex;flex-direction:column;gap:12px}.email-template-drawer label{font-weight:500;color:var(--text-primary)}.template-selection{display:grid;grid-template-columns:1fr 1fr;gap:16px}.template-selection label{display:flex;flex-direction:column;gap:8px}.email-template-drawer select,.email-template-drawer textarea{width:100%;min-height:44px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-primary);padding:12px;font:inherit}.email-template-drawer textarea{resize:vertical;line-height:1.6}.email-template-drawer #template-body{min-height:240px;font-family:ui-monospace,monospace;font-size:13px;tab-size:2}.email-template-drawer textarea:focus,.email-template-drawer select:focus{outline:2px solid var(--border-strong);outline-offset:2px}.template-label,.template-preview-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.template-label span,.template-preview-heading small{font-size:var(--fs-metadata);color:var(--text-muted)}.template-toolbar,.template-placeholders{display:flex;flex-wrap:wrap;gap:8px}.template-toolbar button,.template-placeholders button{min-height:36px;font-size:var(--fs-metadata);padding:6px 10px}.template-preview{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden}.template-preview-heading{padding:14px;background:var(--bg-elevated)}.template-preview>[data-preview-subject]{padding:0 16px;overflow-wrap:anywhere;font-weight:500}.template-preview iframe{display:block;width:100%;height:310px;border:0;background:#fff}.template-preview[aria-busy=true]{opacity:.65}.template-error{color:var(--status-error);background:var(--status-error-soft);padding:12px;border-radius:var(--radius-sm);overflow-wrap:anywhere}.email-template-drawer .vx-drawer-footer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.template-save-state{margin-right:auto;font-size:var(--fs-metadata);color:var(--text-secondary)}.template-manage-entry{width:100%;margin-bottom:16px}.email-template-drawer [hidden]{display:none!important}@media(max-width:720px){.template-selection{grid-template-columns:1fr}.email-template-drawer{width:100vw}.template-preview-heading{align-items:flex-start;flex-direction:column}.email-template-drawer .vx-drawer-footer>button{flex:1}.template-save-state{width:100%}}

.template-rich-editor{min-height:240px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:16px;background:var(--bg-surface);color:var(--text-primary);font-family:inherit;line-height:1.6;overflow-wrap:anywhere;white-space:normal}.template-rich-editor:focus{outline:2px solid var(--border-strong);outline-offset:2px}.template-rich-editor p,.template-rich-editor div{margin:0 0 12px}.template-rich-editor ul,.template-rich-editor ol{padding-left:24px}.template-rich-editor a{color:var(--text-primary);text-decoration:underline}.template-rich-editor[contenteditable=false]{opacity:.65}.email-template-drawer #template-body.template-rich-editor{font-family:inherit;font-size:var(--fs-body)}

/* Keep long rich-text emails inside a scrollable editing surface. */
.email-template-drawer .vx-drawer-body{min-height:0;overflow-y:auto}
.email-template-drawer #template-body.template-rich-editor{
    box-sizing:border-box;
    display:block;
    flex:0 0 auto;
    width:100%;
    min-width:0;
    height:clamp(220px,40dvh,430px);
    max-height:min(48dvh,480px);
    min-height:min(220px,35dvh);
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    overflow-wrap:anywhere;
    word-break:break-word;
    scrollbar-gutter:stable;
}
.email-template-drawer #template-body.template-rich-editor > *{max-width:100%}


.certificate-template-entry-row{flex-wrap:wrap}.certificate-template-entry-row .title-details{margin-right:auto}