/* Shared SME169 components. Page-specific layout remains in page stylesheets. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 11px;
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid rgba(8, 116, 95, .2); outline-offset: 2px; }
.btn:disabled,.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { color: var(--color-white); background: var(--color-primary); box-shadow: 0 8px 20px rgba(8, 116, 95, .2); }
.btn-primary:hover { color: var(--color-white); background: var(--color-primary-dark); }
.btn-secondary,.btn-outline { color: var(--color-text-brand); border-color: var(--color-border); background: var(--color-surface); box-shadow: none; }
.btn-secondary:hover,.btn-outline:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-soft); }
.btn-light { color: var(--color-text-brand); border-color: var(--color-border); background: var(--color-surface); box-shadow: none; }
.btn-light:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-soft); }
.btn-dark { color: var(--color-white); background: var(--color-text-brand); }
.btn-dark:hover { color: var(--color-white); background: #0d2b3d; }
.btn-danger { color: var(--color-white); background: var(--color-danger); }
.btn-danger:hover { color: var(--color-white); background: #8f1c13; }
.btn-small { min-height: 38px; padding: 0 15px; font-size: var(--font-size-sm); }

.alert {
    margin: 0 0 var(--space-5);
    padding: 15px 18px;
    border: 1px solid transparent;
    border-radius: 13px;
}
.alert strong { display: block; margin-bottom: 3px; }
.alert p { margin: 0; }
.alert ul { margin: 7px 0 0; padding-left: 22px; }
.alert[hidden] { display: none; }
.alert-success { color: var(--color-success); border-color: #b9ddd4; background: var(--color-success-soft); }
.alert-info { color: #285b51; border-color: #cce6df; background: var(--color-primary-soft); }
.alert-warning { color: #725020; border-color: #f0d6ad; background: var(--color-warning-soft); }
.alert-error,.alert-danger { color: #8e2018; border-color: #f1c5bf; background: var(--color-danger-soft); }

.notice,.warning {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    padding: 18px 22px;
    border: 1px solid #cfe5de;
    border-radius: var(--radius-lg);
    background: var(--color-success-soft);
}
.notice strong,.warning strong { flex: none; }
.notice span { color: var(--color-text-muted); }
.warning { display: block; border-color: #f2c7a9; background: var(--color-warning-soft); }
.warning p { margin: 5px 0 0; }

.status-pill,.soft-pill,.tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: var(--radius-pill);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.25;
}
.status-pill { padding: 6px 11px; }
.soft-pill,.tag { padding: 5px 10px; color: var(--color-primary); background: var(--color-primary-soft); }
.soft-pill-muted { color: var(--color-text-muted); background: var(--color-surface-muted); }
.status-success { color: var(--color-success); background: var(--color-success-soft); }
.status-info { color: var(--color-info); background: var(--color-info-soft); }
.status-warning,.status-pending { color: var(--color-pending); background: var(--color-pending-soft); }
.status-danger,.status-rejected { color: var(--color-danger); background: var(--color-danger-soft); }
.status-draft,.status-team_draft,.status-invited,.status-waiting_member_acceptance {
    color: var(--color-pending);
    background: var(--color-pending-soft);
}
.status-pending_review,.status-pending_teacher_approval,.status-teacher_review,.status-revision_required,.status-testing {
    color: #8c4d15;
    background: #fff0e2;
}
.status-approved,.status-approved_for_details,.status-accepted,.status-active,.status-completed,.status-published {
    color: var(--color-success);
    background: var(--color-success-soft);
}
.status-rejected,.status-declined,.status-cancelled,.status-inactive,.status-unpublished {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}
.status-prototype { color: var(--color-info); background: var(--color-info-soft); }

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 18px 0;
}
.pagination a,.pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    color: var(--color-text-brand);
    background: var(--color-surface);
    text-decoration: none;
}
.pagination a:hover,.pagination button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination [aria-current="page"],.pagination .active { color: var(--color-white); border-color: var(--color-primary); background: var(--color-primary); }

.confirm-dialog {
    width: min(92vw, 470px);
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl);
    color: var(--color-text);
    background: transparent;
    box-shadow: var(--shadow-lg);
}
.confirm-dialog::backdrop { background: rgba(4, 20, 30, .66); backdrop-filter: blur(3px); }
.confirm-dialog-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}
.confirm-dialog-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--color-danger);
    background: var(--color-danger-soft);
    font-size: 1.45rem;
    font-weight: 900;
}
.confirm-dialog-copy h2 { margin: 2px 0 var(--space-2); color: var(--color-text-brand); font-size: 1.2rem; }
.confirm-dialog-copy p { margin: 0; color: var(--color-text-muted); line-height: 1.65; }
.confirm-dialog-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }
.confirm-dialog-actions .btn { min-width: 110px; }

@media (max-width: 560px) {
    .notice,.warning { gap: var(--space-3); padding: var(--space-4); }
    .confirm-dialog-card { grid-template-columns: 44px 1fr; padding: var(--space-5); }
    .confirm-dialog-icon { width: 44px; height: 44px; }
    .confirm-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
}