/* Unified CRUD UI — matches Student / Staff list & form pages */

.stexo-crud-page,
.stexo-crud-form-page,
.stexo-students-page,
.stexo-staff-page,
.stexo-staff-form-page,
.stexo-students-form-page {
    --crud-primary: #2563eb;
    --crud-border: #eef2f7;
    --crud-muted: #64748b;
}

/* Some screens render only the form head without a page wrapper */
.stexo-crud-form-page__head {
    --crud-primary: #2563eb;
    --crud-border: #eef2f7;
    --crud-muted: #64748b;
}

/* ---- Page head ---- */
.stexo-crud-page__head,
.stexo-students-page__head,
.stexo-staff-page__head,
.stexo-staff-form-page__head,
.stexo-students-form-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.stexo-crud-page__title-wrap,
.stexo-students-page__title-wrap,
.stexo-staff-page__title-wrap,
.stexo-staff-form-page__title-wrap,
.stexo-students-form-page__title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.stexo-crud-page__back,
.stexo-students-form-page__back,
.stexo-staff-form-page__back,
.stexo-staff-profile__back {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    text-decoration: none;
    flex-shrink: 0;
    margin-top: 4px;
}

.stexo-crud-page__back:hover,
.stexo-students-form-page__back:hover,
.stexo-staff-form-page__back:hover {
    background: #f8fafc;
    color: var(--crud-primary);
    border-color: #93c5fd;
}

.stexo-crud-page__title,
.stexo-students-page__title,
.stexo-staff-page__title,
.stexo-staff-form-page__title,
.stexo-students-form-page__title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.stexo-crud-page__breadcrumb,
.stexo-students-page__breadcrumb,
.stexo-staff-page__breadcrumb,
.stexo-staff-form-page__breadcrumb,
.stexo-students-form-page__breadcrumb {
    font-size: 0.88rem;
    color: var(--crud-muted);
}

.stexo-crud-page__breadcrumb a,
.stexo-students-page__breadcrumb a,
.stexo-staff-page__breadcrumb a {
    color: var(--crud-primary);
    text-decoration: none;
}

.stexo-crud-page__breadcrumb a:hover {
    text-decoration: underline;
}

.stexo-crud-page__breadcrumb-current,
.stexo-students-page__breadcrumb-current,
.stexo-staff-page__breadcrumb-current {
    color: #334155;
    font-weight: 500;
}

.stexo-crud-page__actions,
.stexo-students-page__actions,
.stexo-staff-page__actions,
.stexo-crud-form-page__head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    margin-left: auto;
    max-width: 100%;
}

.stexo-crud-page__head .stexo-crud-page__title-wrap,
.stexo-crud-page__head > .stexo-crud-page__title-block {
    flex: 1 1 auto;
    min-width: 0;
}

.stexo-crud-page__head > .stexo-crud-page__title-block:not(.stexo-crud-page__title-wrap) {
    min-width: min(100%, 240px);
}

.stexo-crud-page__actions form,
.stexo-students-page__actions form,
.stexo-crud-toolbar form {
    display: inline-flex;
    margin: 0;
    align-items: center;
}

.stexo-crud-page__head--stacked {
    flex-direction: column;
    align-items: stretch;
}

.stexo-crud-page__head--stacked .stexo-crud-page__title-wrap {
    width: 100%;
}

.stexo-crud-page__head--stacked .stexo-crud-page__actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
}

/* Secondary action row — use when page head has many buttons */
.stexo-crud-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    justify-content: flex-start;
}

.stexo-crud-toolbar .stexo-crud-btn,
.stexo-crud-toolbar .btn.stexo-crud-btn {
    margin: 0;
}

/* Card header with title + button(s) */
.stexo-card-header-row,
.stexo-card .card-header.stexo-card-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.stexo-card-header-row form {
    display: inline-flex;
    margin: 0;
    align-items: center;
}

.stexo-card-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0.875rem 1.25rem;
    background: #fff;
    border-top: 1px solid #eef2f7;
}

@media (max-width: 767.98px) {
    .stexo-crud-page__actions,
    .stexo-students-page__actions,
    .stexo-staff-page__actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Normalize Bootstrap .btn when combined with ERP button classes */
.stexo-crud-btn.btn,
.stexo-students-btn.btn,
.stexo-staff-btn.btn {
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: none;
}

button.stexo-crud-btn,
button.stexo-students-btn,
button.stexo-staff-btn {
    cursor: pointer;
}

.stexo-crud-btn--success,
.stexo-crud-btn.btn-success {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.stexo-crud-btn--success:hover,
.stexo-crud-btn.btn-success:hover {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}

.stexo-crud-btn--outline,
.stexo-crud-btn.btn-outline-primary {
    background: #fff;
    border-color: #93c5fd;
    color: var(--crud-primary);
}

.stexo-crud-btn--outline:hover,
.stexo-crud-btn.btn-outline-primary:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.stexo-crud-btn--danger-outline,
.stexo-crud-btn.btn-outline-danger {
    background: #fff;
    border-color: #fca5a5;
    color: #dc2626;
}

.stexo-crud-btn--danger-outline:hover,
.stexo-crud-btn.btn-outline-danger:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.stexo-crud-btn--sm,
.stexo-crud-btn.btn-sm {
    padding: 6px 12px;
    font-size: 0.8125rem;
}

/* Buttons */
.stexo-crud-btn,
.stexo-students-btn,
.stexo-staff-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    background: #fff;
    color: #475569;
}

.stexo-crud-btn--add,
.stexo-students-btn--add,
.stexo-staff-btn--add,
.stexo-crud-btn-save,
.stexo-students-btn-save,
.stexo-staff-btn-save {
    background: var(--crud-primary);
    color: #fff;
    border-color: var(--crud-primary);
}

.stexo-crud-btn--add:hover,
.stexo-students-btn--add:hover,
.stexo-staff-btn--add:hover,
.stexo-crud-btn-save:hover,
.stexo-students-btn-save:hover,
.stexo-staff-btn-save:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.stexo-crud-btn--export,
.stexo-students-btn--export {
    background: #fff;
    border-color: #22c55e;
    color: #16a34a;
}

.stexo-crud-btn--export:hover {
    background: #f0fdf4;
    color: #15803d;
}

.stexo-crud-btn-cancel,
.stexo-students-btn-cancel,
.stexo-staff-btn-cancel,
.stexo-crud-btn-clear {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.stexo-crud-btn-cancel:hover,
.stexo-crud-btn-clear:hover {
    background: #f8fafc;
    color: #0f172a;
}

/* KPI row */
.stexo-crud-kpi,
.stexo-students-kpi,
.stexo-staff-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--crud-border);
    border-radius: 14px;
    padding: 16px 18px;
    height: 100%;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.stexo-crud-kpi__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stexo-crud-kpi--blue .stexo-crud-kpi__icon { background: #dbeafe; color: #2563eb; }
.stexo-crud-kpi--green .stexo-crud-kpi__icon { background: #d1fae5; color: #059669; }
.stexo-crud-kpi--purple .stexo-crud-kpi__icon { background: #ede9fe; color: #7c3aed; }
.stexo-crud-kpi--amber .stexo-crud-kpi__icon { background: #fef3c7; color: #d97706; }
.stexo-crud-kpi--pink .stexo-crud-kpi__icon { background: #fce7f3; color: #db2777; }

.stexo-crud-kpi__label { font-size: 0.8rem; color: var(--crud-muted); font-weight: 500; }
.stexo-crud-kpi__value { font-size: 1.5rem; font-weight: 700; color: #0f172a; line-height: 1.2; margin: 2px 0; }
.stexo-crud-kpi__link { font-size: 0.78rem; color: var(--crud-primary); text-decoration: none; font-weight: 500; }
.stexo-crud-kpi__sub { font-size: 0.78rem; color: #94a3b8; }

/* Filters card */
.stexo-crud-filters .card-body,
.stexo-students-filters .card-body,
.stexo-staff-filters .card-body {
    padding: 20px 22px;
}

.stexo-crud-search-wrap,
.stexo-students-search-wrap,
.stexo-staff-search-wrap {
    position: relative;
}

.stexo-crud-search-wrap .bi-search,
.stexo-students-search-wrap .bi-search,
.stexo-staff-search-wrap .bi-search {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.stexo-crud-search-wrap .form-control,
.stexo-students-search-wrap .form-control,
.stexo-staff-search-wrap .form-control {
    padding-left: 40px;
    height: 42px;
    border-radius: 10px;
    border-color: #e2e8f0;
}

.stexo-crud-filters .form-select,
.stexo-crud-filters .form-control,
.stexo-students-filters .form-select,
.stexo-staff-filters .form-select {
    height: 42px;
    border-radius: 10px;
    border-color: #e2e8f0;
    font-size: 0.88rem;
}

/* Legacy filter bar inside upgraded cards */
.stexo-erp-admin .stexo-crud-filters .stexo-filter-bar,
.stexo-erp-admin .stexo-card .stexo-filter-bar {
    gap: 12px;
}

.stexo-erp-admin .stexo-crud-filters .stexo-filter-bar .form-control,
.stexo-erp-admin .stexo-crud-filters .stexo-filter-bar .form-select,
.stexo-erp-admin .stexo-card .stexo-filter-bar .form-control,
.stexo-erp-admin .stexo-card .stexo-filter-bar .form-select {
    height: 42px;
    border-radius: 10px;
    border-color: #e2e8f0;
    font-size: 0.88rem;
}

/* Table card */
.stexo-crud-table-card,
.stexo-students-table-card,
.stexo-staff-table-card,
.stexo-erp-admin .stexo-content > .stexo-card.card:has(.stexo-table),
.stexo-erp-admin .stexo-content > .stexo-card.card:has(table) {
    border-radius: 14px;
    border: 1px solid var(--crud-border);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.stexo-crud-table,
.stexo-students-table,
.stexo-staff-table,
.stexo-erp-admin .stexo-content .stexo-table {
    margin: 0;
    font-size: 0.88rem;
}

.stexo-crud-table thead th,
.stexo-students-table thead th,
.stexo-staff-table thead th,
.stexo-erp-admin .stexo-content .stexo-table thead th {
    background: #f8fafc !important;
    color: var(--crud-muted) !important;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    text-transform: none;
}

.stexo-crud-table tbody td,
.stexo-students-table tbody td,
.stexo-staff-table tbody td,
.stexo-erp-admin .stexo-content .stexo-table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.stexo-crud-table tbody tr:hover,
.stexo-students-table tbody tr:hover,
.stexo-staff-table tbody tr:hover,
.stexo-erp-admin .stexo-content .stexo-table tbody tr:hover {
    background: #f8fafc;
}

/* Status pills */
.stexo-crud-pill,
.stexo-students-pill,
.stexo-staff-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.stexo-crud-pill--active,
.stexo-students-pill--active,
.stexo-staff-pill--active {
    background: #d1fae5;
    color: #047857;
}

.stexo-crud-pill--inactive,
.stexo-students-pill--inactive,
.stexo-staff-pill--inactive {
    background: #fee2e2;
    color: #b91c1c;
}

.stexo-crud-pill--yes,
.stexo-crud-pill--neutral {
    background: #f1f5f9;
    color: #475569;
}

/* Row actions */
.stexo-crud-row-actions,
.stexo-students-row-actions,
.stexo-staff-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.stexo-crud-action,
.stexo-students-action,
.stexo-staff-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #64748b;
    text-decoration: none;
    padding: 0;
    cursor: pointer;
}

.stexo-crud-action--view,
.stexo-students-action--view,
.stexo-staff-action--view {
    color: var(--crud-primary);
}

.stexo-crud-action--view:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.stexo-crud-action--edit:hover,
.stexo-crud-action--more:hover,
.stexo-students-action--edit:hover,
.stexo-students-action--more:hover,
.stexo-students-action--photo:hover,
.stexo-staff-action--edit:hover {
    background: #f1f5f9;
    color: #334155;
}

.stexo-crud-action--delete,
.stexo-students-action--delete,
.stexo-staff-action--delete {
    color: #dc3545;
}

.stexo-crud-action--delete:hover,
.stexo-students-action--delete:hover,
.stexo-staff-action--delete:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.stexo-students-action--photo {
    color: #64748b;
}

.stexo-students-action--photo:hover {
    background: #f0f9ff;
    color: #0369a1;
}

/* Actions column: avoid clipping focus rings / tooltips */
.stexo-table-actions-cell {
    position: relative;
    white-space: nowrap;
}

.stexo-students-table-card .table-responsive,
.stexo-staff-table-card .table-responsive,
.stexo-crud-table-card .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

.stexo-actions-dropdown__menu {
    min-width: 11rem;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    z-index: 1060;
}

.stexo-actions-dropdown__menu .dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.875rem;
}

.stexo-actions-dropdown__menu .dropdown-item.text-danger:hover {
    background: #fef2f2;
    color: #b91c1c;
}

/* Table footer */
.stexo-crud-table-footer,
.stexo-students-table-footer,
.stexo-staff-table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.stexo-crud-table-footer__info,
.stexo-students-table-footer__info {
    font-size: 0.85rem;
    color: var(--crud-muted);
}

.stexo-crud-table-footer__controls,
.stexo-students-table-footer__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.stexo-crud-pagination .pagination,
.stexo-students-pagination .pagination,
.stexo-staff-pagination .pagination {
    margin: 0;
    gap: 4px;
}

.stexo-crud-pagination .page-link,
.stexo-students-pagination .page-link,
.stexo-staff-pagination .page-link {
    border-radius: 8px;
    border-color: #e2e8f0;
    color: #475569;
    font-size: 0.85rem;
    padding: 6px 12px;
}

.stexo-crud-pagination .page-item.active .page-link,
.stexo-students-pagination .page-item.active .page-link {
    background: var(--crud-primary);
    border-color: var(--crud-primary);
}

/* Legacy card footer pagination */
.stexo-erp-admin .stexo-card .card-footer .pagination {
    margin: 0;
    gap: 4px;
}

.stexo-erp-admin .stexo-card .card-footer .page-link {
    border-radius: 8px;
}

.stexo-erp-admin .stexo-card .card-footer .page-item.active .page-link {
    background: var(--crud-primary);
    border-color: var(--crud-primary);
}

/* Hide old page header when using crud page */
.stexo-crud-page ~ .stexo-page-header,
.stexo-crud-page .stexo-page-header {
    display: none !important;
}

.stexo-erp-admin .stexo-content:has(.stexo-crud-page) .stexo-page-header {
    display: none !important;
}

/* Form cards (shared with students-form.css) */
.stexo-erp-admin .stexo-form-card,
.stexo-crud-form-page .stexo-form-card {
    border: 1px solid var(--crud-border);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.stexo-erp-admin .stexo-form-card__header,
.stexo-crud-form-page .stexo-form-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.stexo-erp-admin .stexo-form-card__header i {
    color: var(--crud-primary);
}

.stexo-erp-admin .stexo-form-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

/* Upgrade plain form cards in content */
.stexo-erp-admin .stexo-crud-form-page > .stexo-card.card,
.stexo-erp-admin .stexo-content > .stexo-card.card:has(form) {
    border-radius: 14px;
    border: 1px solid var(--crud-border);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.stexo-erp-admin .stexo-content > .stexo-card.card .card-body {
    padding: 22px 26px;
}

/* Per-page toolbar in legacy tables */
.stexo-erp-admin .stexo-card .card-body.border-bottom {
    border-bottom-color: #e2e8f0 !important;
    padding: 20px 22px !important;
}

.stexo-erp-admin .stexo-card .card-body.p-0 > .border-bottom.bg-light {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
    padding: 10px 16px !important;
}

@media (max-width: 991.98px) {
    .stexo-crud-page__title,
    .stexo-students-page__title,
    .stexo-staff-page__title {
        font-size: 1.35rem;
    }
}

/* Centered confirm modal (replaces window.confirm) */
.stexo-confirm-modal .modal-dialog {
    max-width: 420px;
}
.stexo-confirm-modal .modal-content {
    border-radius: 14px;
}
.stexo-confirm-modal .modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}
.stexo-confirm-modal .modal-body p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #475569;
}
.stexo-confirm-modal__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.stexo-confirm-modal__icon--danger {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}
.stexo-confirm-modal__icon--primary {
    background: rgba(26, 115, 232, 0.12);
    color: #1a73e8;
}
.stexo-confirm-modal__confirm {
    min-width: 100px;
    font-weight: 600;
    border-radius: 10px;
}
.stexo-confirm-modal .modal-footer .stexo-crud-btn-cancel {
    min-width: 88px;
}

/* Flash result modal (save / update / delete feedback) */
.stexo-flash-modal .modal-dialog {
    max-width: 420px;
}
.stexo-flash-modal .modal-content {
    border-radius: 14px;
}
.stexo-flash-modal .modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}
.stexo-flash-modal .modal-body p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #475569;
}
.stexo-flash-modal__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.stexo-flash-modal__icon--success {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}
.stexo-flash-modal__icon--error {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}
.stexo-flash-modal__icon--warning {
    background: rgba(255, 193, 7, 0.18);
    color: #b8860b;
}
.stexo-flash-modal__icon--info {
    background: rgba(26, 115, 232, 0.12);
    color: #1a73e8;
}
.stexo-flash-modal__ok {
    min-width: 100px;
    font-weight: 600;
    border-radius: 10px;
    color: #fff;
    border: none;
}
.stexo-flash-modal__ok--success {
    background: #198754;
}
.stexo-flash-modal__ok--error {
    background: #dc3545;
}
.stexo-flash-modal__ok--warning {
    background: #d39e00;
}
.stexo-flash-modal__ok--info {
    background: #1a73e8;
}