/*
 * EkoLearn Design System
 * Compatibility-first shared components.
 *
 * IMPORTANT:
 * This file does not replace existing StudentHub page styles.
 * Existing selectors remain untouched. New components can adopt these
 * classes progressively without changing existing pages.
 */
:root {
    --sh-text: #1f2937;
    --sh-text-muted: #64748b;
    --sh-border: #e5e7eb;
    --sh-border-soft: rgba(15,23,42,.08);
    --sh-surface: #ffffff;
    --sh-surface-soft: #f8fafc;
    --sh-danger: #dc3545;
    --sh-danger-bg: #f8d7da;
    --sh-success: #198754;
    --sh-success-bg: #d1e7dd;
    --sh-warning: #b45309;
    --sh-warning-bg: #fef3c7;
    --sh-info: #0369a1;
    --sh-info-bg: #e0f2fe;
    --sh-focus: rgba(var(--sh-primary-rgb),.14);
    --sh-control-height: 48px;
    --sh-radius-sm: 8px;
    --sh-radius-md: 12px;
    --sh-radius-lg: 18px;
    --sh-space-1: .25rem;
    --sh-space-2: .5rem;
    --sh-space-3: .75rem;
    --sh-space-4: 1rem;
    --sh-space-5: 1.5rem;
    --sh-space-6: 2rem;
}
/* Shared card foundation for new or migrated components. */
.sh-ui-card {
    background: var(--sh-surface);
    border: 1px solid var(--sh-border-soft);
    border-radius: var(--sh-radius-md);
    box-shadow: var(--sh-shadow-md);
}
.sh-ui-card--padded {
    padding: var(--sh-space-5);
}
/* Shared controls. Existing auth/page-specific controls are intentionally not overridden. */
.sh-ui-label {
    display: inline-block;
    margin-bottom: var(--sh-space-2);
    color: var(--sh-text);
    font-weight: 600;
    line-height: 1.4;
}
.sh-ui-input,
.sh-ui-select,
.sh-ui-textarea {
    width: 100%;
    min-height: var(--sh-control-height);
    padding: .65rem .85rem;
    color: var(--sh-text);
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sh-ui-input:focus,
.sh-ui-select:focus,
.sh-ui-textarea:focus {
    outline: none;
    border-color: var(--sh-primary);
    box-shadow: 0 0 0 .2rem var(--sh-focus);
}
/* Shared button foundation. Variants deliberately use sh-ui-* names to avoid changing existing Bootstrap/Moodle buttons. */
.sh-ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .65rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sh-ui-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}
.sh-ui-btn-primary {
    color: #fff;
    background: var(--sh-primary);
    border-color: var(--sh-primary);
}
.sh-ui-btn-primary:hover {
    color: #fff;
    background: var(--sh-primary-light);
    border-color: var(--sh-primary-light);
    box-shadow: 0 6px 18px rgba(var(--sh-primary-rgb),.18);
}
.sh-ui-btn-secondary {
    color: var(--sh-primary);
    background: #fff;
    border-color: var(--sh-border);
}
.sh-ui-btn-secondary:hover {
    color: var(--sh-primary);
    background: var(--sh-surface-soft);
    border-color: var(--sh-primary);
}
.sh-ui-btn-danger {
    color: #fff;
    background: var(--sh-danger);
    border-color: var(--sh-danger);
}
.sh-ui-btn-success {
    color: #fff;
    background: var(--sh-success);
    border-color: var(--sh-success);
}
/* Standard status badges. */
.sh-ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.sh-ui-badge-success { color: #065f46; background: var(--sh-success-bg); }
.sh-ui-badge-warning { color: #92400e; background: var(--sh-warning-bg); }
.sh-ui-badge-danger { color: #991b1b; background: var(--sh-danger-bg); }
.sh-ui-badge-info { color: #075985; background: var(--sh-info-bg); }
.sh-ui-badge-neutral { color: #475569; background: #f1f5f9; }
/* Standard alerts. */
.sh-ui-alert {
    margin-bottom: var(--sh-space-4);
    padding: .75rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-sm);
    line-height: 1.5;
}
.sh-ui-alert-success { color: #0f5132; background: var(--sh-success-bg); border-color: #badbcc; }
.sh-ui-alert-danger { color: #842029; background: var(--sh-danger-bg); border-color: #f5c2c7; }
.sh-ui-alert-warning { color: #664d03; background: var(--sh-warning-bg); border-color: #ffecb5; }
.sh-ui-alert-info { color: #055160; background: var(--sh-info-bg); border-color: #b6effb; }
/* Standard table container. */
.sh-ui-table-card {
    overflow: hidden;
    background: var(--sh-surface);
    border: 1px solid var(--sh-border-soft);
    border-radius: var(--sh-radius-md);
    box-shadow: var(--sh-shadow-sm);
}
.sh-ui-table-card .table {
    margin-bottom: 0;
}
.sh-ui-table-card .table th {
    color: var(--sh-text);
    font-weight: 600;
    background: var(--sh-surface-soft);
    border-bottom-color: var(--sh-border);
}
.sh-ui-table-card .table td,
.sh-ui-table-card .table th {
    vertical-align: middle;
    padding: .75rem 1rem;
}
.sh-ui-table-card .table tbody tr:hover {
    background: rgba(var(--sh-primary-rgb),.035);
}
/* Search/filter foundation. */
.sh-ui-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-3);
    padding: var(--sh-space-3);
    background: var(--sh-surface);
    border: 1px solid var(--sh-border-soft);
    border-radius: var(--sh-radius-md);
    box-shadow: var(--sh-shadow-sm);
}
.sh-ui-filter > * {
    min-width: 180px;
    flex: 1 1 180px;
}
/* Empty/loading states. */
.sh-ui-empty,
.sh-ui-loading {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--sh-text-muted);
}
.sh-ui-empty-icon,
.sh-ui-loading-icon {
    display: block;
    margin: 0 auto .75rem;
    font-size: 2rem;
    opacity: .55;
}
.sh-ui-empty-title {
    margin: 0 0 .4rem;
    color: var(--sh-text);
    font-size: 1.05rem;
    font-weight: 700;
}
.sh-ui-empty-text {
    max-width: 520px;
    margin: 0 auto 1rem;
    line-height: 1.6;
}
/* Consistent page-section heading. */
.sh-ui-section-title {
    margin: 0 0 var(--sh-space-4);
    color: var(--sh-primary);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}
.sh-ui-section-title + .sh-ui-section-subtitle {
    margin-top: -.75rem;
}
.sh-ui-section-subtitle {
    margin: 0 0 var(--sh-space-5);
    color: var(--sh-text-muted);
    line-height: 1.6;
}
/* Consistent modal shell for StudentHub custom modals. */
.sh-ui-modal {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--sh-surface);
    border-radius: var(--sh-radius-lg);
    box-shadow: 0 24px 70px rgba(0,0,0,.2);
}
.sh-ui-modal-header,
.sh-ui-modal-body,
.sh-ui-modal-footer {
    padding: var(--sh-space-5);
}
.sh-ui-modal-header {
    border-bottom: 1px solid var(--sh-border);
}
.sh-ui-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sh-space-2);
    border-top: 1px solid var(--sh-border);
}
/* Mobile defaults. */
@media (max-width: 768px) {
    .sh-ui-card--padded { padding: 1.25rem; }
    .sh-ui-filter { display: grid; grid-template-columns: 1fr; }
    .sh-ui-filter > * { min-width: 0; }
    .sh-ui-modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); border-radius: 14px; }
    .sh-ui-modal-header,
    .sh-ui-modal-body,
    .sh-ui-modal-footer { padding: 1rem; }
    .sh-ui-modal-footer { flex-direction: column-reverse; }
    .sh-ui-modal-footer .sh-ui-btn { width: 100%; }
}