/* GoalMetrics AI Merged CSS Styles */

/* Global Font (Cairo, specified here for general text, but Inter/Poppins are also used via Tailwind config for headings) */
* {
    font-family: 'Cairo', sans-serif;
}

/* Body Base Styles - Deep Tech Theme */
body {
    background: linear-gradient(135deg, #0A0A0A 0%, #121212 100%); /* Deep dark background */
    color: #F0F0F0; /* Light text for general content */
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
    min-height: 100vh; /* Ensure full viewport height */
    display: flex;
    flex-direction: column;
}

/* Headings will use Poppins from Tailwind config */
h1, h2, h3, h4, h5, h6 {
    /* Font-family and color for headings are primarily controlled by Tailwind classes in HTML (e.g., text-white, font-poppins) */
}

/* Gradient Text Effect for Headlines */
.gradient-text {
    background: linear-gradient(90deg, #3A86FF, #5BC0BE, #FF006E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card Background Gradient & Hover Effects */
.card-gradient {
    background: linear-gradient(145deg, rgba(26, 32, 44, 0.8), rgba(15, 23, 42, 0.8)); /* secondary to primary with opacity */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.2); /* accent with opacity */
    transition: all 0.3s ease;
}

.card-gradient:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Hero Section Specific Overlay */
.hero-overlay {
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.6) 60%, rgba(10, 10, 10, 0.2) 100%);
}

/* Section Title Underline Effect */
.section-title {
    position: relative;
    display: inline-block;
    margin-bottom: 3rem; /* Original value from new design */
    text-align: center; /* From old design, but better controlled via Tailwind text-center */
}

.section-title:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #3A86FF, #5BC0BE);
    border-radius: 2px;
}

/* Feature Icon Wrapper Style */
.feature-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1C2541, #0A1128);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Pricing Card Hover Animation */
.pricing-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pricing-card:hover {
    transform: scale(1.05);
}

/* Primary Button Styling - CORRECTED */
.btn-primary {
    background: linear-gradient(90deg, #3A86FF, #5BC0BE);
    color: white;
    font-weight: 800; /* Extra bold */
    padding: 1rem 2.5rem; /* Larger padding */
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(58, 134, 255, 0.4);
    border: none;
    display: inline-block;
    text-align: center;
    font-size: 1.125rem; /* text-lg */
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(58, 134, 255, 0.6);
    background: linear-gradient(90deg, #5BC0BE, #3A86FF); /* Reversed gradient on hover */
}

/* Secondary Button Styling - CORRECTED */
.btn-secondary {
    background: transparent;
    color: var(--colors-accent);
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 2px solid var(--colors-accent);
    display: inline-block;
    text-align: center;
    font-size: 1rem;
}

.btn-secondary:hover {
    background: rgba(58, 134, 255, 0.1);
    transform: translateY(-2px);
    color: white;
    border-color: white;
}

/* Navigation Link Styling (for active state) */
.nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #5BC0BE;
    transition: width 0.3s ease;
}

.nav-link:hover:after {
    width: 100%;
}

.nav-link.active {
    color: white;
    font-weight: 700;
}

.nav-link.active:after {
    width: 100%;
    background: #3A86FF; /* Different color for active underline */
}

/* Slow Pulse Animation for Background Elements */
.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Hero Grid Pattern */
.hero-grid {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(91, 192, 190, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255, 0, 110, 0.1) 0%, transparent 20%);
}

/* Testimonial Card Quote Icon */
.testimonial-card {
    position: relative;
    overflow: hidden;
}

.testimonial-card:before {
    content: "“";
    position: absolute;
    top: -30px;
    left: 20px;
    font-size: 120px;
    color: rgba(91, 192, 190, 0.2);
    font-family: Georgia, serif;
    line-height: 1;
}

/* Floating Animation */
.floating {
    animation: floating 8s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Scroll Down Indicator Animation */
.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-20px) translateX(-50%); }
    60% { transform: translateY(-10px) translateX(-50%); }
}


/* Input Text Color Override - IMPORTANT! This overrides Tailwind's default text color for inputs. */
input, textarea {
    color: black !important;
}

/* Custom Styles for Messages (MSGS) */
.MSGS {
    margin-top: 3rem;
    font-size: 1.5rem;
}

/* Custom Logo Image Styling */
img.logo {
    border-radius: 1.5rem;
    width: 2.5rem;
}

/* Specific Dashboard Grid Styles */
.dashboard-grid {
    display: grid;
    gap: 1.5rem; /* Equivalent to Tailwind gap-6 */
}
@media (min-width: 768px) { /* md breakpoint */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stats-grid {
    display: grid;
    gap: 1.5rem; /* Equivalent to Tailwind gap-6 */
}
@media (min-width: 768px) { /* md breakpoint */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Dashboard Section Padding, Responsive */
section {
    padding-top: 3rem; /* pt-12 */
    padding-bottom: 3rem; /* pb-12 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}
@media (min-width: 768px) {
    section {
        padding-left: 2rem; /* md:px-8 */
        padding-right: 2rem; /* md:px-8 */
    }
}
@media (min-width: 1024px) {
    section {
        padding-left: 4rem; /* lg:px-16 */
        padding-right: 4rem; /* lg:px-16 */
    }
}

/* =========================================================================== */
/* Specific Styles from uploaded style.css - Merged and/or Clarified       */
/* =========================================================================== */

/* Removed .header-section, .header-section h1, .header-section p as they are for a previous fixed header design */
/* Removed .card:hover as it's already handled by .card-gradient:hover */
/* Removed .section-title specific font-weight, margin-top, text-align as it's defined in the new section-title block */
/* Removed .feature-card img as it's too generic and not used in the new design */
/* Removed .space as it's a minor spacing and better handled by Tailwind utilities */


/* Main Fader / Loader overlay - Kept as is, specific for loading states */
.main-fader {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.616);
    z-index: 99;
}
.main-fader .loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.main-fader .loader svg {
    height: 17rem;
    display: block;
    margin: 0 auto;
}
.main-fader .loader svg path {
    animation-duration: 1s;
    animation-name: pulse;
    animation-iteration-count: infinite;
    color: #26a380; /* Specific loader color */
}
/* Loader animation delays - kept as is */
.main-fader .loader svg path.path-7 { animation-delay: -1s; }
.main-fader .loader svg path.path-6 { animation-delay: -0.875s; }
.main-fader .loader svg path.path-5 { animation-delay: -0.75s; }
.main-fader .loader svg path.path-4 { animation-delay: -0.625s; }
.main-fader .loader svg path.path-3 { animation-delay: -0.5s; }
.main-fader .loader svg path.path-2 { animation-delay: -0.375s; }
.main-fader .loader svg path.path-1 { animation-delay: -0.25s; }
.main-fader .loader svg path.path-0 { animation-delay: -0.125s; }

/* Pulse animation for loader - adjusted for clarity */
@keyframes pulse {
    0% { opacity: 0.1; }
    30% { opacity: 0.8; }
    100% { opacity: 0.1; }
}

/* Zoomable image / Fullscreen viewer */
.zoomable {
    cursor: pointer;
    transition: transform 0.3s ease;
}
.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    object-fit: contain; /* Keep aspect ratio while fitting */
    background-color: rgba(0, 0, 0, 0.9); /* Dark overlay */
}

input[type="file"] {
    width: 75%; /* Specific width for file input */
}


img#welcomeimg {
    max-height: 300px;
}

/* Coming Soon Section Styles */
.coming-soon-cont {
    background-color: #121212;
    color: #fff;
    font-family: Arial, sans-serif; /* Keep Arial if specified for this section */
    text-align: center;
    padding-bottom: 9rem;
    padding-top: 5rem;
}
.coming-soon {
    font-size: 9em;
    margin-bottom: 20px;
}
.description {
    font-size: 16px;
    line-height: 1.6;
    padding-bottom: 1rem !important;
    margin-bottom: 4rem;
}
.countdown-container {
    display: inline-block;
    background-color: #1e1f22;
    padding: 20px;
    border-radius: 10px;
    border: .1rem solid #fff;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    min-width: 35rem;
}
.countdown-header {
    background-color: #ba5138;
    color: #fff;
    padding: 10px;
    font-size: 1em;
    border-radius: .5rem;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
}
.countdown {
    display: flex;
    justify-content: space-between;
    font-size: 2em;
    margin-top: 20px;
}
.countdown div {
    margin: 0 10px;
}
.countdown span {
    display: block;
    font-size: 1.5em;
    color: #fff;
    margin-top: 5px;
    padding: 1rem;
}

/* Homepage Specific Styles (general overrides or specific elements) */
/* Many rules here are likely overridden by Tailwind classes or more specific rules above.
   Only keeping what seems unique and relevant for specific elements not covered by the new theme.
   Generic rules like body, header, nav-links etc. are already defined at the top. */

/* Removed global * margin/padding/box-sizing as it's standard. */
/* Removed body font-family Raleway as Cairo is primary. */
/* Removed header specific styling (background, border-radius, margin, position, backdrop-filter, before pseudo-element)
   as the header is now dynamic and styled with Tailwind directly in shared_header.html. */
/* Removed header .logo h1/p as logo styling is already handled. */
/* Removed .nav-links as it's replaced by Tailwind nav in shared_header.html */
/* Removed main padding-top/bottom as sections handle padding. */
/* Removed navbar-nav, div#navbarNavAltMarkup, #login, navbar-light .navbar-brand, a.nav-link (specific to old Bootstrap/non-Tailwind nav) */
/* Removed button#login font-size. */
/* Removed generic section margin/min-height. */
/* Removed .cta. */
/* Removed section.hero and its child styles as the Hero section is now custom Tailwind. */
/* Removed features h2 and features img as they are now Tailwind/new CSS controlled. */
/* Removed .features-container, .feature-box, .feature-box::after, .feature-title, .feature-description as these are replaced by the new feature section cards. */
/* Removed .main-container, .image-container, .text-container, .title, .subtitle, .features-list as these are general layout sections replaced by current structure. */
/* Removed section.insights and .horizontal-line - specific to old layout. */

/* Message Box (likely for general alerts, not `status-message` in form) */
.message-box {
    background-color: #0f0f1a;
    color: #ffffff;
    border-radius: 13px;
    padding: 30px;
    text-align: center;
    position: relative;
    max-width: 80%;
    margin: 50px auto;
}
.message-box::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #0f0f1a;
}
/* .button - generic button, now replaced by btn-primary/btn-secondary */

.partnerscontainer {
    text-align: center;
    background-color: #252431;
    color: #fff;
    padding: 1rem 0;
}
.logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logos img {
    width: 20%;
    height: 20%;
    margin: 0 10px;
}
.partners h5 {
    text-align: center;
}
.partners p {
    margin: 1rem auto;
    text-align: center;
}
section.partners {
    margin-bottom: 7rem;
}

/* Footer specific styles - largely superseded by shared_footer.html's Tailwind classes */
/* Removed .footer, .footer-container, .footer-column, .footer-column h3/ul/li/a, .footer-social-icons/a, .footer-logo/h2/p, .footer-legal */


/* About Page Specific Styles - Kept where they define unique section styles */
.about-us {
    padding: 100px 0;
}
.aboutus {
    padding: 9rem;
    text-align: center;
    font-size: 2rem;
    background-image: url("../images/about1.png"); /* This image path needs to be valid */
    background-size: cover;
    background-position: bottom;
}
/* .about-us h1 - handled by new design */
.about-us h2 {
    margin-left: 5rem;
    text-decoration: underline;
    text-underline-offset: .7rem;
}
.about-us p {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 80%;
    margin: 0 auto 20px;
}

/* Contact Us Section - Keeping relevant structural/color rules */
.contact-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    background: #0b0c0f; /* Dark background */
    margin-bottom: 10rem;
}
.contact-us .container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 80% !important;
    background-color: #141519; /* Darker background for container */
    border-radius: 1rem;
}
.contact-form {
    flex: 1;
    min-width: 35%;
    max-width: 35%;
    margin-bottom: 20px;
    padding: 0 0 0 2.5rem;
}
.contact-form h2 {
    margin-bottom: 10px;
    color: #fff;
}
.contact-form p {
    font-size: 14px;
    color: #d0d0d1;
    margin-bottom: 20px;
}
.contact-form .form-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* Input/Textarea styling for contact form - overriding Tailwind input-field but keeping black text */
input:not(.custominput):not([type="color"]):not([type="range"]), textarea {
    /* width: 94%; */ /* This width is handled by Tailwind's w-full, remove if conflict */
    padding: 10px;
    /* margin-bottom: 10px; */
    border: none; /* Border is handled by input-field class */
    border-radius: 5px;
    outline: none;
    font-size: 1rem;
    background-color: #1f2023 !important; /* Darker background */
    color: black !important; /* Forces black text color */
}
.custom-file-label::after {
    background-color: #1f2023;
}
label.custom-file-label {
    background-color: #1f2023;
}
.contact-form textarea {
    height: 100px;
}
/* .contact-form button - now handled by btn-primary/btn-secondary */
.contact-form button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #7b00ff; /* Specific button color for contact form */
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.contact-form button:hover {
    background-color: #5800b3;
}

.contact-image {
    flex: 1;
    min-width: 300px;
    text-align: right;
}
.contact-image img {
    width: 100%;
    max-width: 80%;
    object-fit: contain;
}

/* Form Container & Row (if specific form layout is needed beyond Tailwind) */
.form-container {
    width: 100%;
    margin: 0 auto;
}
.form-row {
    display: flex;
    gap: .5rem; /* Spacing between fields */
    margin-right: 0;
    margin-left: 0;
}
.half-width {
    flex: 1;
}
/* .form-input - now handled by input-field */
/* .form-button - now handled by btn-primary/btn-secondary */


/* Data Manager Section */
.datamanager {
    background-color: #121212;
    color: #fff;
    font-family: 'Raleway', sans-serif !important;
    padding-bottom: 9rem;
    padding-top: 2rem;
    max-width: 97%;
    margin: 0 auto;
    padding: .3rem;
}


/* =========================================================================== */
/* Media Queries - Consolidated and kept relevant responsive rules          */
/* =========================================================================== */

@media (max-width: 768px) {
    /* Removed .herofirstdiv text-align, font-size as they are handled by Tailwind classes for hero section */
    /* Removed features-container, feature-box as they are part of old feature section layout */

    .image-container, .text-container {
        padding: 0 !important;
        text-align: center;
    }
    .text-container {
        padding-top: 2rem;
    }
    .horizontal-line {
        width: 90%;
    }
    .partnerscontainer .logos {
        flex-wrap: wrap;
    }
    .logos img {
        width: 40%;
        height: auto;
        margin-bottom: 10px;
    }
    .message-box {
        max-width: 95%;
    }
    /* Removed footer-container, footer-column for mobile as general body flex column handles it */

    /* Contact form specific mobile adjustments */
    .contact-us .container {
        flex-direction: column;
    }
    .contact-image {
        margin-top: 20px;
    }
    /* Adjusted contact-form flex/width */
    .contact-form {
        min-width: 90%; /* Adjust to be more responsive */
        max-width: 90%; /* Adjust to be more responsive */
        padding: 0 1rem; /* Add some padding */
    }
    /* Adjusted input/textarea width, assuming they need to be full width */
    input:not([type="color"]):not([type="range"]), textarea {
        width: 100%;
    }
}

@media (min-width: 992px) {
    /* Removed .herofirstdiv padding as hero section is new Tailwind */
}





#status {
    /* @apply mt-6 p-4 bg-blue-50 text-blue-800 rounded-lg border border-blue-200; */
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #eff6ff;
    /* blue-50 */
    color: #1e40af;
    /* blue-800 */
    border-radius: 0.5rem;
    /* rounded-lg */
    border: 1px solid #bfdbfe;
    /* blue-200 */
}

.btn-border-left {
    border-left: 1px solid #000000;
}


/* Container for the entire status section */
.status-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Individual status item row */
.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

/* Ensures the text label doesn't wrap to the next line */
.status-label {
    white-space: nowrap;
}

/* Allows the value to grow and align to the right */
.status-value {
    text-align: right;
    flex-grow: 1;
}

/* Styles for the error message, ensuring it's centered */
.status-error-message {
    margin-top: 1rem;
    text-align: center;
}


/* تنسيق حاوية التأكيد */
.confirm-container {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ffc107; /* لون أصفر للتنبيه */
    border-radius: 5px;
    background-color: #fff9e6; /* خلفية خفيفة */
    text-align: center;
}

/* تنسيق رسالة التأكيد */
.confirm-message {
    margin: 0 0 10px 0;
    font-weight: bold;
    color: #333;
}

/* تنسيق حاوية الأزرار داخل التأكيد */
.confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* مسافة بين زر Yes وزر No */
}

/* تنسيق عام لأزرار التأكيد */
.confirm-btn {
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 80px; /* حجم ثابت للأزرار */
}

/* تنسيق زر 'Yes' (الإيقاف) */
.yes-btn {
    color: white;
    background-color: #dc3545; /* أحمر لعملية الإيقاف الفعلية */
}
.yes-btn:hover {
    background-color: #c82333;
}

/* تنسيق زر 'No' (الإلغاء) */
.no-btn {
    color: #333;
    background-color: #f8f9fa; /* لون فاتح للإلغاء */
    border: 1px solid #ccc;
}
.no-btn:hover {
    background-color: #e2e6ea;
}

/* تنسيق زر الإيقاف الرئيسي (تأكد من وجوده ليعمل التعديل) */
.stop-btn {
    /* ... (CSS لزر الإيقاف الأساسي كما كان سابقًا) ... */
    padding: 8px 15px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #dc3545;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%; 
    max-width: 200px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.stop-btn:disabled {
    background-color: #6c757d; 
    cursor: not-allowed;
    opacity: 0.6;
}


/* تنسيق الحاوية الرئيسية لحالة النظام */
.system-info-container {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f0f3f6; /* خلفية فاتحة للتمييز */
}

.system-info-container h2 {
    color: #007bff;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 1.2em;
}

/* تنسيق أقسام الموارد الفردية (CPU, RAM, GPU) */
.resource-section {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
}

.resource-section h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    color: #333;
}

/* استخدام Grid لترتيب الملصقات والقيم */
.info-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* عمود للملصق وعمود للقيمة */
    gap: 5px 15px;
}

.info-label {
    font-weight: 600;
    color: #555;
}

.info-value {
    font-weight: 400;
    color: #222;
}

/* تنسيق خاص لل GPU إذا كان متاحًا */
.gpu-available {
    border-left: 5px solid #28a745; /* شريط أخضر */
}


/* ... (أنماط CSS الحالية لـ .system-info-container و .resource-section) ... */

/* نمط جديد لحاوية الرسم البياني */
.chart-wrapper {
    margin-top: 15px; /* مسافة من شبكة البيانات النصية */
    height: 100px; /* تحديد ارتفاع ثابت للرسوم البيانية المصغرة */
}



/* NEW CSS STYLES FOR TASK TRACKER SECTION
*/
.task-tracker-container {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #1a1a2e; /* Dark background */
    border-radius: 12px;
}

.task-column {
    flex: 1;
    min-width: 300px;
    background-color: #0f0f1d; /* Slightly darker column background */
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.task-column-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid;
    text-align: center;
}

.in-progress-title {
    color: #4da6ff; /* Blue for in progress */
    border-bottom-color: #4da6ff;
}

.completed-title {
    color: #4caf50; /* Green for completed */
    border-bottom-color: #4caf50;
}

.task-list {
    min-height: 100px; /* Ensure space even when empty */
}

.task-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.task-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

.progress-bar-container {
    height: 8px;
    background-color: #374151; /* Gray-600 */
}

.progress-bar {
    transition: width 0.5s ease;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.empty-message {
    text-align: center;
    padding: 2rem 0;
    color: #6b7280;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .task-tracker-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .task-column {
        min-width: 100%;
    }
}


.team-card {
    padding: 1rem;
}


/* إضافة تنسيقات CSS لقسم العمال (Workers) */
.worker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.worker-card {
    background-color: #333; /* لون خلفية غامق ليتناسب مع bg-primary */
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    color: #fff; /* نص أبيض */
    transition: transform 0.3s ease;
}

.worker-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.worker-card h3 {
    margin-top: 0;
    color: #4CAF50; /* لون أخضر للحالة */
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.worker-card p {
    margin: 8px 0;
    font-size: 0.95em;
}

.worker-card strong {
    color: #888; /* لون رمادي فاتح للعناوين */
    display: inline-block;
    min-width: 120px;
}

.status-badge {
    font-size: 0.8em;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.status-online {
    background-color: #28a745;
    color: #fff;
}

.status-offline {
    background-color: #dc3545;
    color: #fff;
}


.gpu-unavailable {
    color: #FFC107; /* لون تحذيري */
}
/* نهاية تنسيقات العمال */

/* تنسيقات الأقسام الأخرى لضمان التوافق */
.gradient-text {
    /* يجب أن يتم تعريفها في CSS الخارجي أو يمكنك إضافة تعريف هنا: */
    background: linear-gradient(to right, #007bff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #007bff; /* Fallback color */
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}


.worker-card:hover {
    transform: translateY(-8px); /* تأثير تحريك أكبر عند التمرير */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6); /* ظل أكبر عند التمرير */
}

.worker-card h4 {
    color: #007bff; /* لون أزرق للعناوين الفرعية */
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    font-size: 1.1em;
}


.status-idle {
    background-color: #ffc107; /* أصفر/تحذيري */
    color: #333; /* نص داكن لتحسين التباين */
}

.status-in-progress {
    background-color: #007bff; /* أزرق */
    color: #fff;
}

.status-failed {
    background-color: #dc3545; /* أحمر */
    color: #fff;
}

.gpu-available {
    color: #4CAF50; /* أخضر */
    font-weight: bold;
}

.divider-dashed {
    border-top: 1px dashed #555;
    padding-top: 15px;
    margin-top: 15px;
}
/* قد تحتاج لإضافة المزيد من التنسيقات الموجودة في base.html لضمان التوافق الكامل */