/* =========================================================
   KFU OPERATIONS CALENDAR
   Main Stylesheet
========================================================= */


/* =========================================================
   1. ROOT VARIABLES
========================================================= */

:root {

    /* Brand */
    --kfu-green: #087f5b;
    --kfu-green-dark: #056044;
    --kfu-green-light: #e9f6f1;

    /* Gold */
    --kfu-gold: #c69a47;
    --kfu-gold-light: #f8f1e4;

    /* Background */
    --bg-main: #f5f7f8;
    --bg-white: #ffffff;

    /* Text */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;

    /* Status */
    --success: #16845b;
    --success-bg: #eaf7f1;

    --warning: #d99418;
    --warning-bg: #fff7e6;

    --danger: #d64545;
    --danger-bg: #fdf0f0;

    --info: #2878b5;
    --info-bg: #edf6fc;

    /* Borders */
    --border: #e5e7eb;

    /* Shadows */
    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.05);

    --shadow-md:
        0 8px 24px rgba(0, 0, 0, 0.07);

    --shadow-lg:
        0 15px 40px rgba(0, 0, 0, 0.09);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    /* Transition */
    --transition: 0.25s ease;

}


/* =========================================================
   2. GLOBAL
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family: "Tajawal", Arial, sans-serif;

    background: var(--bg-main);

    color: var(--text-primary);

    direction: rtl;

    min-height: 100vh;

    line-height: 1.7;

}

button,
input,
select {
    font-family: inherit;
}

button {
    border: none;
}

a {
    text-decoration: none;
}


/* =========================================================
   3. HEADER
========================================================= */

.header {

    background:
        linear-gradient(
            135deg,
            var(--kfu-green-dark),
            var(--kfu-green)
        );

    color: #fff;

    padding: 28px 35px;

    box-shadow: var(--shadow-md);

    position: relative;

    overflow: hidden;

}


/* Decorative background */

.header::before {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background: rgba(255,255,255,0.04);

    top: -180px;
    left: -80px;

}

.header::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(198,154,71,0.12);

    bottom: -140px;
    right: -60px;

}


.header-content {

    max-width: 1350px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 20px;

    position: relative;

    z-index: 2;

}


.logo {

    width: 200px;

    height: 100px;

    object-fit: contain;

    background: rgba(255,255,255,0.95);

    border-radius: 14px;

    padding: 7px;

}


.header h1 {

    font-size: 28px;

    font-weight: 800;

    line-height: 1.3;

    margin: 0;

}


.header p {

    margin-top: 3px;

    font-size: 15px;

    opacity: 0.85;

}


/* =========================================================
   4. ALERT BAR
========================================================= */

.alert-bar {

    max-width: 1350px;

    margin: 22px auto 0;

    padding: 14px 20px;

    background: var(--kfu-gold-light);

    border: 1px solid rgba(198,154,71,0.35);

    border-right: 5px solid var(--kfu-gold);

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    gap: 12px;

    color: #765719;

    font-size: 15px;

    font-weight: 600;

}


.alert-bar i {

    font-size: 18px;

    color: var(--kfu-gold);

}


/* =========================================================
   5. DASHBOARD
========================================================= */

.dashboard {

    max-width: 1350px;

    margin: 22px auto;

    padding: 0 15px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

}


/* Statistic Card */

.card {

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    padding: 20px;

    min-height: 135px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}


.card:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-md);

}


/* Decorative side */

.card::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 4px;

    height: 100%;

    background: var(--info);

}


.card:nth-child(2)::before {
    background: var(--kfu-green);
}

.card:nth-child(3)::before {
    background: var(--warning);
}

.card:nth-child(4)::before {
    background: #d64545;
}


.card i {

    width: 42px;

    height: 42px;

    border-radius: 11px;

    background: var(--info-bg);

    color: var(--info);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    margin-bottom: 8px;

}


.card:nth-child(2) i {

    background: var(--kfu-green-light);

    color: var(--kfu-green);

}


.card:nth-child(3) i {

    background: var(--warning-bg);

    color: var(--warning);

}


.card:nth-child(4) i {

    background: #fdf0f0;

    color: #d64545;

}


.card h2 {

    font-size: 27px;

    font-weight: 800;

    line-height: 1.2;

    margin: 0;

}


.card span {

    color: var(--text-secondary);

    font-size: 14px;

    margin-top: 2px;

}


/* =========================================================
   6. TOOLBAR
========================================================= */

.toolbar {

    max-width: 1350px;

    margin: 28px auto;

    padding: 0 15px;

    display: flex;

    gap: 12px;

}


#search,
#category {

    height: 48px;

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    outline: none;

    color: var(--text-primary);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}


#search {

    flex: 1;

    padding: 0 18px;

}


#category {

    min-width: 210px;

    padding: 0 14px;

    cursor: pointer;

}


#search::placeholder {

    color: var(--text-muted);

}


#search:focus,
#category:focus {

    border-color: var(--kfu-green);

    box-shadow:
        0 0 0 3px rgba(8,127,91,0.10);

}


/* =========================================================
   7. TIMELINE
========================================================= */

#timeline {

    max-width: 1100px;

    margin: 35px auto 60px;

    padding: 0 20px;

    position: relative;

}


/* Main timeline line */

#timeline::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    right: 24px;

    width: 2px;

    background: #dfe7e4;

}


/* =========================================================
   8. MONTH TITLE
========================================================= */

.timeline-month {

    position: relative;

    margin: 35px 0 20px;

    padding-right: 55px;

}


.timeline-month h2 {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: var(--kfu-green);

    color: #fff;

    padding: 7px 18px;

    border-radius: 30px;

    font-size: 17px;

    font-weight: 700;

    box-shadow: var(--shadow-sm);

}


.timeline-month h2::before {

    content: "";

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: var(--kfu-gold);

}


/* =========================================================
   9. TASK ITEM
========================================================= */

.timeline-item {

    position: relative;

    padding-right: 55px;

    margin-bottom: 18px;

}


/* Timeline dot */

.timeline-item::before {

    content: "";

    position: absolute;

    right: 17px;

    top: 25px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--kfu-green);

    border: 4px solid var(--bg-main);

    box-shadow:
        0 0 0 2px var(--kfu-green);

    z-index: 2;

}


/* =========================================================
   10. TASK CARD
========================================================= */

.task-card {

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    padding: 20px 22px;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}


.task-card:hover {

    transform: translateX(-3px);

    border-color: rgba(8,127,91,0.25);

    box-shadow: var(--shadow-md);

}


.task-title {

    font-size: 17px;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 9px;

}


.task-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.task-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.task-meta i {

    color: var(--kfu-green);

}


/* =========================================================
   11. STATUS BADGES
========================================================= */

.status {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

}


.status-running {

    background: var(--success-bg);

    color: var(--success);

}


.status-coming {

    background: var(--warning-bg);

    color: var(--warning);

}


.status-finished {

    background: #f1f3f5;

    color: #6b7280;

}


.status-today {

    background: var(--info-bg);

    color: var(--info);

}


/* =========================================================
   12. TASK FOOTER
========================================================= */

.task-footer {

    margin-top: 15px;

    padding-top: 12px;

    border-top: 1px solid #f0f1f2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

}


.remaining {

    font-size: 13px;

    font-weight: 700;

    color: var(--kfu-green);

}


.category-badge {

    padding: 4px 10px;

    border-radius: 20px;

    background: var(--kfu-green-light);

    color: var(--kfu-green);

    font-size: 12px;

    font-weight: 600;

}


/* =========================================================
   13. TODAY TASK
========================================================= */

.timeline-item.today .task-card {

    border-color: var(--kfu-green);

    box-shadow:
        0 8px 25px rgba(8,127,91,0.12);

}


.timeline-item.today::before {

    background: var(--kfu-gold);

    box-shadow:
        0 0 0 2px var(--kfu-gold);

}


.today-label {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    background: var(--kfu-green);

    color: #fff;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 700;

    margin-right: 7px;

}


/* =========================================================
   14. EMPTY STATE
========================================================= */

.empty-state {

    text-align: center;

    padding: 60px 20px;

    background: var(--bg-white);

    border: 1px dashed #d6dcda;

    border-radius: var(--radius-md);

    color: var(--text-secondary);

}


.empty-state i {

    font-size: 40px;

    color: #cbd5d1;

    margin-bottom: 12px;

}


.empty-state h3 {

    margin-bottom: 5px;

    font-size: 18px;

    color: var(--text-primary);

}


/* =========================================================
   15. FOOTER
========================================================= */

footer {

    background: #ffffff;

    border-top: 1px solid var(--border);

    color: var(--text-secondary);

    text-align: center;

    padding: 22px;

    font-size: 13px;

}


/* =========================================================
   16. SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 8px;

}


::-webkit-scrollbar-track {

    background: #eef1f0;

}


::-webkit-scrollbar-thumb {

    background: #b8c8c2;

    border-radius: 10px;

}


::-webkit-scrollbar-thumb:hover {

    background: var(--kfu-green);

}


/* =========================================================
   17. SELECTION
========================================================= */

::selection {

    background: var(--kfu-green);

    color: #fff;

}


/* =========================================================
   18. RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    .dashboard {

        grid-template-columns: repeat(2, 1fr);

    }

    .header {

        padding: 24px 20px;

    }

    .alert-bar {

        margin-left: 15px;

        margin-right: 15px;

    }

    .toolbar {

        flex-direction: column;

    }

    #category {

        width: 100%;

    }

}


/* =========================================================
   19. RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 600px) {

    .header {

        padding: 20px 15px;

    }


    .header-content {

        gap: 13px;

    }


    .logo {

        width: 200px;

        height: 100px;

        border-radius: 11px;

    }


    .header h1 {

        font-size: 21px;

    }


    .header p {

        font-size: 13px;

    }


    .alert-bar {

        margin-top: 15px;

        padding: 12px 14px;

        font-size: 13px;

    }


    .dashboard {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

        margin-top: 15px;

    }


    .card {

        min-height: 120px;

        padding: 15px;

    }


    .card h2 {

        font-size: 23px;

    }


    .card span {

        font-size: 12px;

    }


    .toolbar {

        margin-top: 20px;

        margin-bottom: 20px;

    }


    #search,
    #category {

        height: 45px;

    }


    #timeline {

        padding: 0 10px;

        margin-top: 25px;

    }


    #timeline::before {

        right: 14px;

    }


    .timeline-month {

        padding-right: 38px;

    }


    .timeline-item {

        padding-right: 38px;

    }


    .timeline-item::before {

        right: 7px;

        top: 22px;

        width: 14px;

        height: 14px;

    }


    .task-card {

        padding: 16px;

    }


    .task-title {

        font-size: 15px;

        line-height: 1.7;

    }


    .task-meta {

        flex-direction: column;

        align-items: flex-start;

        gap: 4px;

    }


    .task-footer {

        flex-direction: column;

        align-items: flex-start;

    }

}


/* =========================================================
   20. VERY SMALL SCREENS
========================================================= */

@media (max-width: 380px) {

    .dashboard {

        grid-template-columns: 1fr;

    }

    .header h1 {

        font-size: 19px;

    }

}
/* =========================================================
   FINISHED TASK - RED THEME
========================================================= */

/* النقطة في الـ Timeline */
.timeline-item.finished::before {
    background: #d64545;
    box-shadow: 0 0 0 2px #d64545;
}


/* جميع أيقونات معلومات المهمة */
.timeline-item.finished .task-meta i {
    color: #d64545;
}


/* كلمة "منتهية" + أيقونتها */
.timeline-item.finished .status-finished {
    background: #fdf0f0;
    color: #d64545;
}


/* علامة الصح */
.timeline-item.finished .status-finished i {
    color: #d64545;
}


/* "انتهت المهمة" */
.timeline-item.finished .remaining {
    color: #d64545;
}


/* التصنيف مثل "تسجيل" */
.timeline-item.finished .category-badge {
    background: #fdf0f0;
    color: #d64545;
}
/* =========================================================
   ACTIVE - GREEN
========================================================= */

.timeline-item:has(.status-running)::before {
    background: #16845b;
    box-shadow: 0 0 0 2px #16845b;
}

.timeline-item:has(.status-running) .task-meta i {
    color: #16845b;
}

.timeline-item:has(.status-running) .status-running {
    background: #eaf7f1;
    color: #16845b;
}

.timeline-item:has(.status-running) .status-running i {
    color: #16845b;
}

.timeline-item:has(.status-running) .remaining {
    color: #16845b;
}

.timeline-item:has(.status-running) .category-badge {
    background: #eaf7f1;
    color: #16845b;
}


/* =========================================================
   UPCOMING - GOLD
========================================================= */

.timeline-item:has(.status-coming)::before {
    background: #d99418;
    box-shadow: 0 0 0 2px #d99418;
}

.timeline-item:has(.status-coming) .task-meta i {
    color: #d99418;
}

.timeline-item:has(.status-coming) .status-coming {
    background: #fff7e6;
    color: #d99418;
}

.timeline-item:has(.status-coming) .status-coming i {
    color: #d99418;
}

.timeline-item:has(.status-coming) .remaining {
    color: #d99418;
}

.timeline-item:has(.status-coming) .category-badge {
    background: #fff7e6;
    color: #d99418;
}

/* =========================================================
   ADD TO CALENDAR BUTTON
========================================================= */

.calendar-add-btn {
    border: 0;
    background: #f4f7f6;
    color: #25935f;
    padding: 9px 14px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.calendar-add-btn:hover {
    background: #e7f4ee;
    color: #1d7d50;
}

.calendar-add-btn:active {
    transform: scale(0.97);
}

.calendar-add-btn i {
    font-size: 14px;
}

/* =========================================================
   ADD ALL CALENDAR BUTTON
========================================================= */

.calendar-add-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px 18px;

    border: 1px solid var(--kfu-green);
    border-radius: 8px;

    background: var(--kfu-green);
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.calendar-add-all-btn:hover {
    background: #066f50;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(8, 127, 91, 0.18);
}

.calendar-add-all-btn:active {
    transform: translateY(0);
}

.calendar-add-all-btn i {
    font-size: 15px;
}