* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background: #f4f6f9;
}

/* =========================
LAYOUT
========================= */
.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: #1e293b;
    padding: 20px 0;
    overflow-y: auto;
}

.sidebar h2 {
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

.sidebar ul {
    list-style: none;
}

.sidebar ul li {
    padding: 12px 20px;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
    display: block;
}

.sidebar ul li:hover {
    background: #334155;
}

/* =========================
MAIN
========================= */
.main {
    margin-left: 250px;
    padding: 20px;
}

/* =========================
TOP BAR
========================= */
.top-bar {
    background: white;
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    position: relative;
}

.top-left small {
    color: #64748b;
}

/* =========================
RIGHT SIDE
========================= */
.top-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* =========================
NOTIFICATION
========================= */
.notification-menu {
    position: relative;
}

.notification-btn {
    background: #f1f5f9;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 50%;
}

/* =========================
DROPDOWNS (IMPORTANT FIX)
========================= */
.notification-dropdown,
.profile-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 55px;
    width: 260px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 9999;
}

/* notification items */
.notification-dropdown h4 {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.notification-item {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}

.notification-dropdown a {
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #2563eb;
}

/* =========================
PROFILE
========================= */
.profile-menu {
    position: relative;
}

.profile-btn {
    background: #f1f5f9;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #1e293b;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
}

/* =========================
CONTENT
========================= */
.content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* =========================
STATS
========================= */
.stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.stats .card {
    flex: 1;
    min-width: 180px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    text-align: center;
}

/* =========================
TABLE
========================= */
.table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

.table th {
    background: #1e293b;
    color: white;
    padding: 10px;
}

.table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

/* =========================
ALERTS
========================= */
.alert-card {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.alert-danger { background: #fee2e2; border-left: 5px solid #dc2626; }
.alert-warning { background: #fef3c7; border-left: 5px solid #f59e0b; }
.alert-info { background: #dbeafe; border-left: 5px solid #2563eb; }



.logo-area {
    text-align: center;
    padding: 15px;
    margin-bottom: 10px;
}

.logo-area img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 5px;
}

.logo-area h2 {
    color: white;
    font-size: 18px;
    margin: 0;
}

/* =========================
TASKS PAGE HEADER
========================= */
.page-title {
    margin-bottom: 15px;
}

.page-title h1 {
    font-size: 22px;
    color: #1e293b;
}

.page-title p {
    color: #64748b;
    font-size: 14px;
    margin-top: 4px;
}

/* =========================
TABLE WRAPPER (CARD STYLE)
========================= */
.table-container {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    overflow-x: auto;
}

/* =========================
TABLE IMPROVEMENTS
========================= */
.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.table th {
    background: #1e293b;
    color: white;
    padding: 12px;
    text-align: left;
    font-size: 14px;
}

.table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.table tr:hover {
    background: #f8fafc;
}

/* =========================
STATUS BADGES
========================= */
.status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
}

.status.Assigned { background: #e0f2fe; color: #0369a1; }
.status.In\ Progress { background: #fef9c3; color: #a16207; }
.status.Revision { background: #fee2e2; color: #b91c1c; }
.status.Completed { background: #dcfce7; color: #166534; }
.status.Approved { background: #dbeafe; color: #1d4ed8; } 

/* =========================
ACTION LINK BUTTON
========================= */
.table a {
    display: inline-block;
    padding: 6px 10px;
    background: #2563eb;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    transition: 0.3s;
}

.table a:hover {
    background: #1d4ed8;
}
.editor-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:12px;
    background:#f8fafc;
    border:1px solid #dbe3ec;
    border-radius:10px 10px 0 0;
}

.editor-toolbar button{
    background:white;
    color:#1e293b;
    border:1px solid #dbe3ec;
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
}

.editor-toolbar button:hover{
    background:#2563eb;
    color:white;
}

.editor-area{
    min-height:500px;
    background:white;
    border:1px solid #dbe3ec;
    border-top:none;
    padding:20px;
    outline:none;
    line-height:1.8;
    font-size:15px;
    border-radius:0 0 10px 10px;
}
.ck-editor__editable {
    min-height: 500px !important;
    font-size: 15px;
    line-height: 1.8;
}

.ck.ck-editor {
    margin-top: 15px;
}

#saveStatus{
    margin-top:15px;
    font-size:14px;
    color:#666;
}
.ck-editor__editable {
    min-height: 500px !important;
    font-size: 15px;
    line-height: 1.8;
}

.ck.ck-editor {
    margin-top: 15px;
}

#saveStatus{
    margin-top:15px;
    color:#666;
    font-size:14px;
}
.ck-editor__editable {
    min-height: 500px !important;
    font-size: 15px;
    line-height: 1.8;
}

.ck.ck-editor {
    margin-top: 15px;
}

#saveStatus{
    margin-top:15px;
    color:#666;
    font-size:14px;
}
/* ==================================
TASK DETAILS PAGE
================================== */

.task-header-card{
    background:#fff;
    padding:25px;
    border-radius:15px;
    margin-bottom:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.task-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.task-title-row h1{
    font-size:28px;
    color:#0f172a;
    margin:0;
}

.task-id{
    color:#64748b;
    font-size:14px;
}

/* ==================================
TASK INFO BOXES
================================== */

.task-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:15px;
    margin-bottom:25px;
}

.task-box{
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.task-box .label{
    display:block;
    color:#64748b;
    font-size:13px;
    margin-bottom:8px;
}

.task-box h3{
    color:#0f172a;
    font-size:22px;
}

/* ==================================
STATUS BADGES
================================== */

.status{
    padding:8px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    display:inline-block;
}

.status.assigned{
    background:#fef3c7;
    color:#92400e;
}

.status.progress{
    background:#dbeafe;
    color:#1d4ed8;
}

.status.revision{
    background:#fee2e2;
    color:#b91c1c;
}

.status.completed{
    background:#dcfce7;
    color:#166534;
}

.status.approved{
    background:#dcfce7;
    color:#166534;
}

/* ==================================
PROGRESS BAR
================================== */

.progress-wrapper{
    margin-bottom:25px;
}

.progress-bar{
    height:12px;
    background:#e5e7eb;
    border-radius:50px;
    overflow:hidden;
}

.progress-fill{
    height:100%;
    background:#2563eb;
    border-radius:50px;
    transition:.4s;
}

.progress-labels{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
}

.progress-labels span{
    font-size:13px;
    color:#94a3b8;
    font-weight:600;
}

.progress-labels span.done{
    color:#16a34a;
}

/* ==================================
WORKSPACE
================================== */

.workspace-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    align-items:start;
    margin-top:20px;
}

.workspace-main{
    width:100%;
}

.workspace-side{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.card{
    background:#fff;
    padding:20px;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.workspace-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.workspace-header h3{
    margin:0;
}

.draft-badge{
    background:#dcfce7;
    color:#166534;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
}

/* ==================================
CKEDITOR
================================== */

.ck.ck-editor{
    margin-top:15px;
}

.ck-editor__editable{
    min-height:500px !important;
    font-size:15px;
    line-height:1.8;
}

#saveStatus{
    margin-top:15px;
    font-size:14px;
    color:#64748b;
}

/* ==================================
SUMMARY CARD
================================== */

.summary-card{
    background:#fff;
    padding:20px;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    position:sticky;
    top:20px;
}

.summary-card h3{
    margin-bottom:20px;
    color:#0f172a;
}

.summary-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #e5e7eb;
}

.summary-item:last-child{
    border-bottom:none;
}

.summary-label{
    color:#64748b;
}

.summary-value{
    color:#0f172a;
    font-weight:700;
}

/* ==================================
DEADLINE ALERT
================================== */

.deadline-alert{
    margin-top:15px;
    background:#fef3c7;
    color:#92400e;
    padding:12px;
    border-radius:10px;
    text-align:center;
    font-weight:600;
}

/* ==================================
EDITOR STATS
================================== */

.editor-stats{
    margin-top:15px;
    padding:15px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
}

.stat-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #e5e7eb;
}

.stat-row:last-child{
    border-bottom:none;
}

.stat-row span{
    color:#64748b;
}

.stat-row strong{
    color:#0f172a;
}

/* ==================================
SUBMISSION CARD
================================== */

.submission-card,
.activity-card{
    background:#fff;
    padding:20px;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.submission-card h3,
.activity-card h3{
    margin-bottom:15px;
}

.submission-info{
    background:#f8fafc;
    padding:12px;
    border-radius:10px;
    margin-bottom:15px;
    color:#475569;
}

.upload-field{
    width:100%;
    padding:12px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    margin-bottom:15px;
}

/* ==================================
BUTTONS
================================== */

.action-btn{
    width:100%;
    display:block;
    text-align:center;
    text-decoration:none;
    border:none;
    padding:12px;
    border-radius:10px;
    cursor:pointer;
    font-weight:700;
}

.start-btn{
    background:#2563eb;
    color:#fff;
}

.start-btn:hover{
    background:#1d4ed8;
}

.submit-btn{
    background:#16a34a;
    color:#fff;
}

.submit-btn:hover{
    background:#15803d;
}

/* ==================================
SUCCESS BOX
================================== */

.success-box{
    background:#dcfce7;
    color:#166534;
    padding:15px;
    border-radius:10px;
    font-weight:700;
}

/* ==================================
ACTIVITY
================================== */

.activity-item{
    padding:12px;
    margin-bottom:10px;
    border-radius:10px;
    background:#f8fafc;
}

.activity-item.done{
    background:#dcfce7;
    color:#166534;
}

.activity-item.pending{
    background:#fef3c7;
    color:#92400e;
}

/* ==================================
RESPONSIVE
================================== */

@media(max-width:1000px){

    .workspace-layout{
        grid-template-columns:1fr;
    }

    .summary-card{
        position:relative;
        top:0;
    }

}

@media(max-width:768px){

    .main{
        margin-left:0;
        padding:15px;
    }

    .task-title-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .progress-labels{
        font-size:11px;
    }

}
/* =========================
HERO DASHBOARD
========================= */

.hero-card{
    background: linear-gradient(
        135deg,
        #2563eb,
        #1e40af
    );

    color:white;

    padding:30px;

    border-radius:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    box-shadow:0 10px 30px rgba(37,99,235,.25);

    flex-wrap:wrap;
}

.hero-left h1{
    font-size:32px;
    margin-bottom:10px;
}

.hero-left p{
    font-size:15px;
    line-height:1.8;
    opacity:.95;
}

.hero-right{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.hero-stat{
    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    padding:18px;

    min-width:130px;

    text-align:center;

    border-radius:15px;
}

.hero-stat span{
    font-size:13px;
    opacity:.8;
}

.hero-stat h2{
    margin-top:8px;
    font-size:28px;
}
/* =========================
MODERN STATS CARDS
========================= */

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin:25px 0;
}

.stat-card{
    padding:25px;
    border-radius:18px;
    color:white;
    position:relative;
    overflow:hidden;
    transition:.3s;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.stat-card:hover{
    transform:translateY(-5px);
}

.stat-icon{
    font-size:32px;
    margin-bottom:10px;
}

.stat-card h2{
    font-size:30px;
    margin-bottom:5px;
}

.stat-card p{
    opacity:.9;
    font-size:14px;
}

.blue{
    background:linear-gradient(135deg,#3b82f6,#1d4ed8);
}

.orange{
    background:linear-gradient(135deg,#f59e0b,#d97706);
}

.yellow{
    background:linear-gradient(135deg,#eab308,#ca8a04);
}

.green{
    background:linear-gradient(135deg,#22c55e,#15803d);
}

.purple{
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
}

.dark{
    background:linear-gradient(135deg,#334155,#0f172a);
}

/* =========================
PERFORMANCE SECTION
========================= */

.performance-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
    margin-bottom:25px;
}

.performance-card,
.rank-card{
    background:white;
    padding:25px;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.performance-card h3,
.rank-card h3{
    margin-bottom:20px;
    color:#0f172a;
}

.performance-item{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #e5e7eb;
}

.performance-item:last-child{
    border-bottom:none;
}

.rank-value{
    font-size:28px;
    font-weight:700;
    color:#2563eb;
    margin:20px 0;
}

.rank-card p{
    color:#64748b;
    line-height:1.6;
}

@media(max-width:900px){

    .performance-grid{
        grid-template-columns:1fr;
    }

}
.status{
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    display:inline-block;
}

.status.approved{
    background:#e6f9ec;
    color:#1e7e34;
}

.status.completed{
    background:#e7f0ff;
    color:#0d6efd;
}

.status.progress{
    background:#fff4e5;
    color:#ff9800;
}

.status.revision{
    background:#ffe6e6;
    color:#dc3545;
}

.status.assigned{
    background:#f1f1f1;
    color:#555;
}

.btn-small{
    padding:5px 10px;
    background:#2c3e50;
    color:white;
    border-radius:5px;
    text-decoration:none;
    font-size:12px;
}

/* =========================
ASSIGNED TASKS PAGE
========================= */

.table-container{
    background:white;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.06);
    overflow-x:auto;
}

/* Page header */
.top-bar h2{
    margin:0;
    font-size:22px;
    color:#0f172a;
}

.top-bar small{
    color:#64748b;
}

/* =========================
TABLE FIXES
========================= */

.table{
    width:100%;
    border-collapse:collapse;
    min-width:700px;
}

.table th{
    background:#1e293b;
    color:white;
    padding:12px;
    text-align:left;
    font-size:14px;
}

.table td{
    padding:12px;
    border-bottom:1px solid #eee;
    font-size:14px;
    color:#1f2937;
}

.table tr:hover{
    background:#f8fafc;
}

/* =========================
STATUS BADGE
========================= */

.status{
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    display:inline-block;
}

.status.assigned{
    background:#fef3c7;
    color:#92400e;
}

/* =========================
ACTION BUTTON (LINK)
========================= */

.table a{
    display:inline-block;
    padding:6px 12px;
    background:#2563eb;
    color:white;
    text-decoration:none;
    border-radius:6px;
    font-size:12px;
    transition:0.3s;
}

.table a:hover{
    background:#1d4ed8;
}

/* =========================
EMPTY STATE ROW
========================= */

.table td[colspan]{
    text-align:center;
    padding:25px;
    color:#64748b;
    font-style:italic;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

    .table{
        min-width:100%;
    }

    .table th,
    .table td{
        font-size:13px;
        padding:10px;
    }

}

/* =========================
COMPLETED TASKS PAGE
========================= */

.table-container{
    background:#fff;
    padding:20px;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    overflow-x:auto;
    margin-top:20px;
}

.table{
    width:100%;
    border-collapse:collapse;
}

.table th{
    background:#1e293b;
    color:#fff;
    padding:12px;
    text-align:left;
}

.table td{
    padding:12px;
    border-bottom:1px solid #e5e7eb;
}

.table tr:hover{
    background:#f8fafc;
}

/* =========================
REVISION TASKS PAGE
========================= */

.red{
    background:linear-gradient(
        135deg,
        #ef4444,
        #b91c1c
    );
}

.revision-banner{
    background:#fee2e2;
    color:#991b1b;
    padding:15px;
    border-left:5px solid #dc2626;
    border-radius:10px;
    margin:20px 0;
    font-weight:600;
}

.revision-feedback{
    max-width:300px;
    white-space:normal;
    line-height:1.5;
}

/* =========================
IN PROGRESS PAGE
========================= */

.urgent-banner{
    background:#fff7ed;
    border-left:5px solid #f97316;
    color:#9a3412;
    padding:18px 20px;
    border-radius:12px;
    margin:20px 0;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.urgent-banner h3{
    margin-bottom:10px;
}

.urgent-banner p{
    margin:8px 0;
    font-size:14px;
}

/* =========================
EMPTY STATE
========================= */

.empty-state{
    text-align:center;
    padding:40px !important;
    color:#64748b;
    font-size:15px;
}

/* =========================
TABLE CONTAINER
========================= */

.table-container{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.table{
    width:100%;
    border-collapse:collapse;
}

.table th{
    background:#1e293b;
    color:#fff;
    padding:14px;
    text-align:left;
}

.table td{
    padding:14px;
    border-bottom:1px solid #e5e7eb;
}

.table tr:hover{
    background:#f8fafc;
}

/* =========================
STATUS BADGES
========================= */

.status{
    display:inline-block;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.status.progress{
    background:#fff4e5;
    color:#ff9800;
}

/* =========================
BUTTON
========================= */

.btn-small{
    display:inline-block;
    padding:8px 14px;
    background:#2563eb;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    font-size:13px;
    transition:.3s;
}

.btn-small:hover{
    background:#1d4ed8;
}

/* =========================
SUBMISSIONS PAGE
========================= */

.empty-state{
    text-align:center;
    padding:40px !important;
    color:#64748b;
    font-size:15px;
}

.table-container{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.table{
    width:100%;
    border-collapse:collapse;
}

.table th{
    background:#1e293b;
    color:#fff;
    padding:14px;
    text-align:left;
}

.table td{
    padding:14px;
    border-bottom:1px solid #e5e7eb;
}

.table tr:hover{
    background:#f8fafc;
}

/* =========================
WRITERS PAGE
========================= */

.page-header{
    margin-bottom:25px;
}

.page-header h1{
    font-size:28px;
    color:#0f172a;
    margin-bottom:5px;
}

.page-header p{
    color:#64748b;
}

/* =========================
SUCCESS / ERROR MESSAGE
========================= */

.message{
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
    font-weight:600;
}

.message.success{
    background:#dcfce7;
    color:#166534;
    border-left:5px solid #16a34a;
}

.message.error{
    background:#fee2e2;
    color:#991b1b;
    border-left:5px solid #dc2626;
}

/* =========================
ADD WRITER FORM
========================= */

.writer-form-card{
    background:#fff;
    padding:25px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    margin-bottom:25px;
}

.writer-form-card h3{
    margin-bottom:20px;
    color:#0f172a;
}

.writer-form{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    margin-bottom:8px;
    font-weight:600;
    color:#334155;
}

.form-group input{
    padding:12px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    font-size:14px;
    transition:.3s;
}

.form-group input:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.add-writer-btn{
    background:#2563eb;
    color:white;
    border:none;
    padding:12px 25px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    margin-top:10px;
}

.add-writer-btn:hover{
    background:#1d4ed8;
}

/* =========================
WRITERS TABLE CARD
========================= */

.writers-card{
    background:#fff;
    padding:25px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.writers-card h3{
    margin-bottom:20px;
    color:#0f172a;
}

/* =========================
WRITER AVATAR
========================= */

.writer-info{
    display:flex;
    align-items:center;
    gap:12px;
}

.writer-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#2563eb;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

/* =========================
ROLE BADGE
========================= */

.role-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:20px;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:12px;
    font-weight:600;
}

/* =========================
ACTION BUTTONS
========================= */

.action-buttons{
    display:flex;
    gap:8px;
}

.btn-edit{
    background:#f59e0b;
    color:white;
    text-decoration:none;
    padding:7px 12px;
    border-radius:6px;
    font-size:12px;
}

.btn-edit:hover{
    background:#d97706;
}

.btn-delete{
    background:#dc2626;
    color:white;
    text-decoration:none;
    padding:7px 12px;
    border-radius:6px;
    font-size:12px;
}

.btn-delete:hover{
    background:#b91c1c;
}

/* =========================
WRITER STATS
========================= */

.writer-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:25px;
}

.writer-stat-card{
    background:white;
    padding:25px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.writer-stat-card h2{
    font-size:32px;
    color:#2563eb;
    margin-bottom:8px;
}

.writer-stat-card p{
    color:#64748b;
}
/* Add Tasks */

/* =========================
ADD TASK PAGE
========================= */

.task-form-card{
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    max-width:900px;
    margin:auto;
}

.task-form-card h1{
    color:#0f172a;
    margin-bottom:25px;
    font-size:28px;
}

.task-form{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group.full-width{
    grid-column:1/-1;
}

.form-group label{
    font-weight:600;
    color:#334155;
    margin-bottom:8px;
}

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    padding:12px 15px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    font-size:14px;
    transition:.3s;
    background:#fff;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.form-group textarea{
    min-height:180px;
    resize:vertical;
}

.task-submit-btn{
    background:#2563eb;
    color:white;
    border:none;
    padding:14px 25px;
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.task-submit-btn:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}

/* =========================
SUCCESS / ERROR MESSAGE
========================= */

.alert-success{
    background:#dcfce7;
    color:#166534;
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
    border-left:5px solid #16a34a;
    font-weight:600;
}

.alert-error{
    background:#fee2e2;
    color:#991b1b;
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
    border-left:5px solid #dc2626;
    font-weight:600;
}

/* =========================
PAGE HEADER
========================= */

.page-header{
    margin-bottom:25px;
}

.page-header h1{
    font-size:30px;
    color:#0f172a;
    margin-bottom:5px;
}

.page-header p{
    color:#64748b;
}

/* =========================
TASK ICON HEADER
========================= */

.form-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:25px;
}

.form-title .icon{
    width:50px;
    height:50px;
    border-radius:12px;
    background:#2563eb;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

    .task-form{
        grid-template-columns:1fr;
    }

    .task-form-card{
        padding:20px;
    }

}

/* =========================
MANAGE WRITERS PAGE
========================= */

.content h1{
    color:#0f172a;
    margin-bottom:20px;
    font-size:28px;
}

.content h3{
    color:#334155;
    margin-bottom:15px;
}

/* Success / Error Message */
.message-success{
    background:#dcfce7;
    color:#166534;
    padding:12px 15px;
    border-radius:10px;
    margin-bottom:20px;
    font-weight:600;
}

.message-error{
    background:#fee2e2;
    color:#b91c1c;
    padding:12px 15px;
    border-radius:10px;
    margin-bottom:20px;
    font-weight:600;
}

/* Writer Form Card */
.writer-form{
    background:#ffffff;
    padding:25px;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    margin-bottom:25px;
    display: flex;
}

.writer-form label{
    margin-bottom:8px;
    color:#334155;
    font-weight:600;
}

.writer-form input{
    width:100%;
    padding:12px 15px;
    border:1px solid #dbe3ec;
    border-radius:10px;
    font-size:14px;
    transition:.3s;
}

.writer-form input:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.writer-form button{
    background:#2563eb;
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.writer-form button:hover{
    background:#1d4ed8;
}

/* Writers Table Card */
.writers-table-card{
    background:#ffffff;
    padding:20px;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* Table Styling */
.table{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
}

.table th{
    background:#1e293b;
    color:white;
    padding:14px;
    text-align:left;
}

.table td{
    padding:14px;
    border-bottom:1px solid #e5e7eb;
}

.table tr:hover{
    background:#f8fafc;
}

/* Role Badge */
.role-badge{
    background:#dbeafe;
    color:#1d4ed8;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

/* ID Badge */
.id-badge{
    background:#f1f5f9;
    padding:5px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    color:#475569;
}

/* Responsive */
@media(max-width:768px){

    .table{
        display:block;
        overflow-x:auto;
    }

    .writer-form{
        padding:20px;
    }

}


/* =========================
ADMIN REVIEW TASKS
========================= */

.review-card{
    background:#fff;
    padding:25px;
    border-radius:15px;
    margin-bottom:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.review-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.review-header h3{
    color:#0f172a;
    margin-bottom:5px;
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px;
    margin-bottom:20px;
}

.submission-box{
    margin-bottom:20px;
}

.btn-download{
    display:inline-block;
    padding:10px 18px;
    background:#2563eb;
    color:white;
    border-radius:8px;
    text-decoration:none;
}

.btn-download:hover{
    background:#1d4ed8;
}

.draft-preview{
    background:#f8fafc;
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
}

.draft-preview h4{
    margin-bottom:10px;
}

.draft-body{
    max-height:250px;
    overflow:auto;
    line-height:1.8;
    color:#334155;
}

.action-area{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.btn-approve{
    display:inline-block;
    text-align:center;
    padding:12px;
    background:#16a34a;
    color:white;
    text-decoration:none;
    border-radius:10px;
    font-weight:600;
}

.btn-approve:hover{
    background:#15803d;
}

.action-area textarea{
    width:100%;
    min-height:120px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:12px;
    resize:vertical;
}

.btn-revision{
    width:100%;
    border:none;
    padding:12px;
    border-radius:10px;
    background:#dc2626;
    color:white;
    cursor:pointer;
    font-weight:600;
}

.btn-revision:hover{
    background:#b91c1c;
}

.empty-state{
    background:#fff;
    padding:40px;
    text-align:center;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}
/* =========================
ADMIN REVIEW TASKS
========================= */

.review-card{
    background:#fff;
    padding:25px;
    border-radius:15px;
    margin-bottom:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.review-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.review-header h3{
    color:#0f172a;
    margin-bottom:5px;
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px;
    margin-bottom:20px;
}

.submission-box{
    margin-bottom:20px;
}

.btn-download{
    display:inline-block;
    padding:10px 18px;
    background:#2563eb;
    color:white;
    border-radius:8px;
    text-decoration:none;
}

.btn-download:hover{
    background:#1d4ed8;
}

.draft-preview{
    background:#f8fafc;
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
}

.draft-preview h4{
    margin-bottom:10px;
}

.draft-body{
    max-height:250px;
    overflow:auto;
    line-height:1.8;
    color:#334155;
}

.action-area{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.btn-approve{
    display:inline-block;
    text-align:center;
    padding:12px;
    background:#16a34a;
    color:white;
    text-decoration:none;
    border-radius:10px;
    font-weight:600;
}

.btn-approve:hover{
    background:#15803d;
}

.action-area textarea{
    width:100%;
    min-height:120px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:12px;
    resize:vertical;
}

.btn-revision{
    width:100%;
    border:none;
    padding:12px;
    border-radius:10px;
    background:#dc2626;
    color:white;
    cursor:pointer;
    font-weight:600;
}

.btn-revision:hover{
    background:#b91c1c;
}

.empty-state{
    background:#fff;
    padding:40px;
    text-align:center;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}