/* =====================================================
 * EduFinance — أنماط مخصصة
 * يعمل مع Tailwind CDN
 * ===================================================== */

/* Material Symbols — ضبط الحجم والمحاذاة */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

/* ─── Scrollbar مخصص ─── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f4f6;
}
::-webkit-scrollbar-thumb {
    background: #c4c6cd;
}
::-webkit-scrollbar-thumb:hover {
    background: #74777d;
}

/* ─── Notifications ─── */
#notification-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.notification {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid;
    pointer-events: auto;
    animation: slideDown 0.3s ease-out;
    max-width: 500px;
}

.notification-success {
    background: #E6F4EA;
    color: #137333;
    border-color: #CEEAD6;
}

.notification-error {
    background: #ffdad6;
    color: #93000a;
    border-color: #ba1a1a;
}

.notification-warning {
    background: #FEF7E0;
    color: #B06000;
    border-color: #FEEFC3;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-1rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Modal Overlay ─── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 22, 39, 0.4);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content {
    background: #ffffff;
    border: 1px solid #c4c6cd;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

.modal-wide {
    max-width: 640px;
}

/* ─── Upload Drop Zone ─── */
.drop-zone {
    border: 2px dashed #74777d;
    transition: all 0.2s;
}
.drop-zone.drag-over {
    border-color: #3b6090;
    background: #f1f4f6;
}

/* ─── Progress Bar ─── */
.progress-bar {
    height: 4px;
    background: #e0e0e0;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: #3b6090;
    transition: width 0.15s ease;
}

/* ─── Table Styles ─── */
.data-table {
    width: 100%;
    text-align: right;
    border-collapse: collapse;
}
.data-table thead {
    background: #ebeef0;
    border-bottom: 1px solid #c4c6cd;
}
.data-table th {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #44474c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.data-table td {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid #c4c6cd;
}
.data-table tbody tr:hover {
    background: #f1f4f6;
}

/* ─── Status Badges ─── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
}
.badge-success {
    background: #E6F4EA; color: #137333; border-color: #CEEAD6;
}
.badge-warning {
    background: #FEF7E0; color: #B06000; border-color: #FEEFC3;
}
.badge-error {
    background: #ffdad6; color: #93000a; border-color: #ba1a1a;
}
.badge-info {
    background: #a5c8ff; color: #041627; border-color: #3b6090;
}

/* ─── Form Inputs ─── */
.form-input {
    border: 1px solid #c4c6cd;
    padding: 0.5rem 1rem;
    background: #f7fafc;
    outline: none;
    font-size: 0.875rem;
    width: 100%;
    transition: border-color 0.2s;
}
.form-input:focus {
    border-color: #3b6090;
}

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #44474c;
    margin-bottom: 0.25rem;
}

/* ─── Buttons ─── */
.btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: opacity 0.2s;
    cursor: pointer;
    border: none;
}
.btn:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: #041627; color: #ffffff;
}
.btn-secondary {
    background: #3b6090; color: #ffffff;
}
.btn-outline {
    background: transparent;
    border: 1px solid #c4c6cd;
    color: #181c1e;
}
.btn-outline:hover { background: #ebeef0; }
.btn-danger {
    background: #ba1a1a; color: #ffffff;
}

/* ─── Card ─── */
.card {
    background: #ffffff;
    border: 1px solid #c4c6cd;
    padding: 1rem;
}
.card:hover {
    border-color: #3b6090;
}

/* ─── Skeleton Loading ─── */
.skeleton {
    background: linear-gradient(90deg, #ebeef0 25%, #f1f4f6 50%, #ebeef0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}