/*
====================================
DIGIKARTX - WORLD-CLASS UI THEME
====================================
*/

/* --- 1. CSS Variables (Color Palette) & Global Styles --- */
:root {
    --bg-dark-navy: #0d1117;       /* Primary Background */
    --bg-light-navy: #161b22;      /* Content Box Background */
    --border-color: #30363d;      /* Borders */
    --text-primary: #c9d1d9;      /* Main Text */
    --text-secondary: #8b949e;    /* Subtitles, meta text */
    --accent-cyan: #22a0f1;        /* Primary Accent */
    --accent-green: #2ea043;       /* Success */
    --accent-red: #f85149;         /* Danger */
    --font-main: 'Poppins', sans-serif;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark-navy);
    color: var(--text-primary);
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    font-weight: 600;
}

a {
    color: var(--accent-cyan);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover { color: #58a6ff; }

hr { border: none; border-top: 1px solid var(--border-color); }

/* --- 2. Layout & Containers --- */
.container, .wrapper {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px; /* Padding on sides for smaller screens */
}
.wrapper {
    max-width: 450px;
    background-color: var(--bg-light-navy);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
}
.wrapper h2 { font-size: 2rem; text-align: center; margin-bottom: 25px;}

/* --- 3. Buttons with Icons --- */
.btn {
    text-decoration: none;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500; /* Medium weight for Poppins */
    display: inline-flex; /* To align icon and text */
    align-items: center !important;
    text-align: center !important;
    gap: 10px; /* Space between icon and text */
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn i { font-size: 1.1rem; }

.btn-primary { background: var(--accent-cyan); }
.btn-success { background: var(--accent-green); }
.btn-danger { background: var(--accent-red); }
.btn-secondary { background: #30363d; }

/* --- 4. Forms --- */
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-secondary); }
input, select, textarea {
    font-family: var(--font-main);
    width: 100%;
    padding: 12px;
    background-color: var(--bg-dark-navy);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(34, 160, 241, 0.2);
}
.help-block { color: var(--accent-red); font-size: 14px; padding-top: 5px; }

/* --- 5. Navigation Bar --- */
.navbar {
    background-color: var(--bg-light-navy);
    padding: 15px 40px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar .logo { font-size: 1.8rem; font-weight: 700; color: #fff; }
.navbar .logo i { color: var(--accent-cyan); margin-right: 10px; }

/* --- 6. Content Boxes & Cards --- */
.content-box, .project-card {
    background-color: var(--bg-light-navy);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    margin-top: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.project-card h3 { margin-top: 0; }
.project-card .budget { font-size: 1.2rem; font-weight: bold; color: var(--accent-green); margin: 10px 0; }
.project-card .meta { font-size: 0.9rem; color: var(--text-secondary); }

/* --- 7. Table Styling --- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
th { font-weight: 600; color: var(--text-secondary); }
tbody tr { transition: background-color 0.2s ease; }
tbody tr:hover { background-color: #22272e; } /* Slightly lighter on hover */
.status { padding: 5px 12px; border-radius: 15px; font-size: 12px; text-transform: capitalize; font-weight: 600; }
.status-open { background-color: rgba(34, 160, 241, 0.2); color: var(--accent-cyan); }
.status-in_progress { background-color: rgba(88, 166, 255, 0.2); color: #58a6ff; }
.status-completed { background-color: rgba(46, 160, 67, 0.2); color: var(--accent-green); }
.status-submitted { background-color: rgba(212, 164, 43, 0.2); color: #d4a42b;}

/* --- 8. Workspace & Chat --- */
.workspace-header, .message-form {
    background-color: var(--bg-light-navy);
    padding: 20px 30px;
    border: 1px solid var(--border-color);
}
.workspace-header { border-radius: 8px 8px 0 0; border-bottom: none; display: flex; justify-content: space-between; align-items: center; }
.message-form { border-radius: 0 0 8px 8px; }
.chat-box { background: var(--bg-dark-navy); border: 1px solid var(--border-color); padding: 20px; height: 500px; overflow-y: auto; }
.message { display: flex; flex-direction: column; margin-bottom: 20px; }
.message .author { font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); }
.message .text { padding: 12px 18px; border-radius: 18px; display: inline-block; max-width: 80%; line-height: 1.5; }
.message.mine { align-items: flex-end; }
.message.mine .author { text-align: right; }
.message .text { background-color: #21262d; }
.message.mine .text { background-color: var(--accent-cyan); color: white; }
.message .timestamp { font-size: 12px; color: #5a5a7e; margin-top: 5px; }
/* --- 9. Featured Provider Highlight --- */
.featured-provider {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 25px rgba(34, 160, 241, 0.2);
}
.footer{
    text-align:center;