/* ===== Codeiks Operational Report – New UI (cx-*) ===== */
:root {
    --cx-navy-900: #0B2C4D;
    --cx-navy-700: #10365E;
    --cx-navy-600: #13436F;
    --cx-teal-400: #45D0B9;
    --cx-bg: #F6F8FB;
    --cx-card: #FFFFFF;
    --cx-text: #1B1F24;
    --cx-muted: #6B7280;
    --cx-border: #E5E7EB;
    --cx-focus: #2563EB;
    --cx-shadow: 0 8px 24px rgba(16, 54, 94, .08);
}

@media (prefers-color-scheme: dark) {
    :root {
        --cx-bg: #0B1220;
        --cx-card: #0F172A;
        --cx-text: #E5E7EB;
        --cx-muted: #A3A9B6;
        --cx-border: #1E293B;
        --cx-shadow: 0 10px 24px rgba(0,0,0,.3);
    }
}

.cx-page {
    padding: 18px;
    background: var(--cx-bg);
}

/* Hero */
.cx-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, var(--cx-navy-900) 0%, var(--cx-navy-700) 60%);
    color: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--cx-shadow);
}

.cx-hero__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cx-logo {
    height: 34px;
    width: auto;
    object-fit: contain;
}

.cx-hero__title {
    margin: 0;
    font-weight: 800;
    letter-spacing: .2px;
}

.cx-hero__subtitle {
    margin: 0;
    opacity: .9;
    font-size: .95rem;
}

.cx-hero__icon {
    filter: saturate(0) brightness(1.3);
    opacity: .9
}

.cx-hero__right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

/* Buttons */
.cx-btn {
    --_bg: transparent;
    --_txt: var(--cx-text);
    --_bd: var(--cx-border);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_txt);
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.cx-btn__icon {
    font-size: 1.05em;
}

.cx-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

.cx-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cx-focus) 35%, transparent);
}

.cx-btn--primary {
    --_bg: var(--cx-teal-400);
    --_txt: #062a22;
    --_bd: transparent;
}

    .cx-btn--primary:hover {
        box-shadow: 0 8px 18px rgba(69,208,185,.35);
    }

.cx-btn--ghost {
    --_bg: rgba(255, 0, 0, 0.1); /* خلفية شفافة بدرجة الأحمر */
    --_txt: #ff0000; /* نص أحمر */
    --_bd: rgba(255, 0, 0, 0.2); /* بوردر أحمر شفاف */
}


/* Card */
.cx-card {
    background: var(--cx-card);
    border: 1px solid var(--cx-border);
    border-radius: 14px;
    box-shadow: var(--cx-shadow);
    margin-top: 18px;
}

.cx-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cx-border);
}

.cx-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cx-navy-900);
}

.cx-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cx-card__body {
    padding: 14px 16px;
}

/* Filters grid */
.cx-card--filters {
    overflow: hidden;
}

.cx-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(12, 1fr);
}

.cx-field {
    grid-column: span 6;
}

@media (min-width: 992px) {
    .cx-field {
        grid-column: span 3;
    }
}

.cx-label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--cx-navy-700);
}

.cx-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--cx-border);
    background: #fff;
    color: var(--cx-text);
    transition: border .15s ease, box-shadow .15s ease;
}

    .cx-input:focus {
        border-color: var(--cx-navy-700);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-navy-700) 18%, transparent);
    }

.cx-actions-row {
    grid-column: 1/-1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px
}

/* Collapsible (mobile) */
[data-collapsible="true"] .cx-card__body {
    max-height: 1200px;
    transition: max-height .25s ease;
}

[data-collapsible="true"][data-collapsed="true"] .cx-card__body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

@media (max-width: 991px) {
    #cx-filters {
        border-radius: 16px;
    }
}

/* Table */
.cx-table-wrap {
    overflow: auto;
}

.cx-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--cx-border);
    border-radius: 12px;
    background: #fff;
}

    .cx-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--cx-navy-900);
        color: #fff;
        text-align: start;
        padding: 12px 14px;
        font-weight: 800;
        letter-spacing: .2px;
        white-space: nowrap;
    }

    .cx-table tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--cx-border);
        vertical-align: middle;
    }

    .cx-table tbody tr:nth-child(odd) {
        background: #F8FAFC;
    }

    .cx-table tbody tr:hover {
        background: #EEF2FF;
    }

    .cx-table td[data-label*="Total"], .cx-table td[data-label*="RemainingDays"] {
        text-align: end;
    }

.cx-card--table[data-loading="true"] {
    opacity: .7;
    filter: saturate(.9);
}

/* Mobile: stack rows as cards */
@media (max-width: 991px) {
    .cx-table {
        min-width: 0;
        border: 0;
    }

        .cx-table thead {
            display: none;
        }

        .cx-table tbody tr {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            padding: 10px;
            border: 1px solid var(--cx-border);
            border-radius: 12px;
            margin-block: 10px;
            background: #fff;
        }

        .cx-table tbody td {
            display: grid;
            grid-template-columns: 160px 1fr;
            gap: 10px;
            border: 0;
            padding: 6px 4px;
        }

            .cx-table tbody td::before {
                content: attr(data-label);
                font-weight: 800;
                color: var(--cx-muted);
            }
}

/* Motions */
@media (prefers-reduced-motion: no-preference) {
    .cx-hero, .cx-card {
        animation: cx-fade-in .35s ease;
    }

    @keyframes cx-fade-in {
        from {
            transform: translateY(4px);
            opacity: 0;
        }

        to {
            transform: none;
            opacity: 1;
        }
    }
}

/* ===== RemainingDays Pills ===== */
.cx-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
    border: 1px solid transparent;
}

.cx-pill--ok {
    background: #E8F8F1;
    color: #0B6B53;
    border-color: #BCEBDD; /* أخضر */
}

.cx-pill--warn {
    background: #FFF7E6;
    color: #8A5A00;
    border-color: #FFE0A6; /* كهرماني */
}

.cx-pill--danger {
    background: #FDECEC;
    color: #8A0E0E;
    border-color: #F6B6B6; /* أحمر */
}

/* Actions column */
.cx-th-actions {
    white-space: nowrap;
}

.cx-actions-cell {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Small buttons */
.cx-btn--sm {
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .85rem;
}

.cx-btn--info {
    --_bg: #e9f2ff;
    --_txt: #113e7a;
    --_bd: #cfe2ff;
    background: var(--_bg);
    color: var(--_txt);
    border: 1px solid var(--_bd);
}

.cx-btn--warn {
    --_bg: #fff4db;
    --_txt: #7a4b00;
    --_bd: #ffe2a8;
    background: var(--_bg);
    color: var(--_txt);
    border: 1px solid var(--_bd);
}

/* Ghost أحمر بناءً على طلبك السابق */
.cx-btn--ghost {
    --_bg: rgba(255,0,0,.10);
    --_txt: #ff0000;
    --_bd: rgba(255,0,0,.20);
    background: var(--_bg);
    color: var(--_txt);
    border-color: var(--_bd);
}

    .cx-btn--ghost:hover {
        box-shadow: 0 6px 14px rgba(255,0,0,.12);
    }

/* صف ملوّن على الحافة حسب الحالة (اختياري) */
.cx-row--ok {
    box-shadow: inset 4px 0 0 0 #1dbf8a1a;
}

.cx-row--warn {
    box-shadow: inset 4px 0 0 0 #ffb0202b;
}

.cx-row--danger {
    box-shadow: inset 4px 0 0 0 #ff45452e;
}
/* ===== Modal ===== */
.cx-modal {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.cx-modal__card {
    width: min(780px, 92vw);
    background: var(--cx-card);
    border: 1px solid var(--cx-border);
    border-radius: 16px;
    box-shadow: var(--cx-shadow);
    overflow: hidden;
    animation: cx-modal-in .22s ease;
}

.cx-modal__header, .cx-modal__footer {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cx-border);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.cx-modal__footer {
    border-bottom: 0;
    border-top: 1px solid var(--cx-border);
    justify-content: flex-end;
}

.cx-modal__title {
    margin: 0;
    font-weight: 800;
    color: var(--cx-navy-900);
}

.cx-modal__body {
    padding: 14px 16px;
    max-height: 62vh;
    overflow: auto;
}

.cx-modal__close {
    background: transparent;
    border: 0;
    font-size: 18px;
    cursor: pointer;
    color: var(--cx-muted);
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes cx-modal-in {
        from {
            transform: translateY(6px);
            opacity: 0;
        }

        to {
            transform: none;
            opacity: 1;
        }
    }
}
/* ===== Auto Width Table (Desktop) ===== */
@media (min-width: 992px) {
    .cx-table {
        table-layout: auto; /* السماح للأعمدة تتمدد حسب المحتوى */
        width: 100%;
    }

        .cx-table thead th,
        .cx-table tbody td {
            height: auto; /* الارتفاع حسب المحتوى */
            padding: 10px 12px;
            line-height: 1.4;
            white-space: nowrap; /* يمنع تكسير النصوص الطويلة */
            vertical-align: middle;
        }

    /* الأكشن تظل في سطر واحد */
    .cx-actions-cell {
        white-space: nowrap;
    }
}
/* إبقاء أزرار الأكشن على نفس السطر في كل المقاسات */
.cx-actions-cell {
    display: flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto; /* لو زادت الأزرار يعمل سكرول أفقي بدل اللفّ */
}

/* منع قواعد الموبايل من تحويل الـ td إلى grid وبالتالي كسر الأزرار */
@media (max-width: 991px) {
    .cx-actions-cell {
        grid-template-columns: none !important; /* يلغي تقسيمة grid للموبايل */
        padding: 6px 4px;
    }

        .cx-actions-cell::before {
            content: attr(data-label) ":\00A0";
            font-weight: 800;
            color: var(--cx-muted);
            flex: 0 0 auto;
            margin-inline-end: 8px;
            white-space: nowrap;
        }

        .cx-actions-cell .cx-btn {
            flex: 0 0 auto; /* يمنع تصغير الزر ويخليه عنصر ثابت العرض */
        }
}

/* أزرار أصغر شوية وتمنع تكسير النص داخل الزر */
.cx-actions-cell .cx-btn {
    display: inline-flex;
    align-items: center;
    min-width: max-content; /* يمنع نزول محتوى الزر لسطرين */
}

    .cx-actions-cell .cx-btn.cx-btn--sm {
        padding: 4px 8px;
        font-size: .82rem;
    }