/**
 * ==========================================================
 * SaatPro Workspace
 * Project : Project Management Toolkit
 * Module  : RAID Log Generator
 * File    : raid-log-generator.css
 *
 * Purpose :
 * Professional responsive styling for the RAID Log
 * Generator including dashboard, editable table,
 * badges, filters, export and print.
 *
 * Author  : SaatPro
 * Version : 1.0.0
 * Date    : 20 August 2026
 * ==========================================================
 */

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

.raid-container{
    max-width:1400px;
}

/* ==========================================================
   SECTION HEADINGS
========================================================== */

.raid-container h2{
    color:#0056d2;
    margin-top:35px;
    margin-bottom:15px;
}

.raid-container h3{
    color:#333;
    margin-top:25px;
}

/* ==========================================================
   DASHBOARD
========================================================== */

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

.raid-card{
    background:#fff;
    border:1px solid #e6ecf3;
    border-radius:10px;
    padding:22px;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
    text-align:center;
}

.raid-card h3{
    margin:0;
    font-size:15px;
    color:#666;
    font-weight:600;
}

.raid-card .count{
    font-size:36px;
    font-weight:bold;
    margin-top:10px;
    color:#0056d2;
}

.raid-risk .count{color:#dc2626;}
.raid-assumption .count{color:#d97706;}
.raid-issue .count{color:#7c3aed;}
.raid-dependency .count{color:#047857;}

/* ==========================================================
   FILTER BAR
========================================================== */

.raid-filter-bar{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:15px;
    margin-bottom:25px;
}

.raid-filter-bar input,
.raid-filter-bar select{
    width:100%;
    padding:12px;
    border:1px solid #d8dee8;
    border-radius:6px;
    box-sizing:border-box;
    font-size:15px;
}

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

.raid-table-wrapper{
    overflow-x:auto;
    margin-top:15px;
}

.raid-table{
    width:100%;
    border-collapse:collapse;
    min-width:1200px;
    background:#fff;
}

.raid-table th{
    background:#0056d2;
    color:#fff;
    padding:12px;
    text-align:left;
    font-size:14px;
    border:1px solid #0047b0;
}

.raid-table td{
    padding:12px;
    border:1px solid #e5e7eb;
    vertical-align:top;
    font-size:14px;
}

.raid-table tr:nth-child(even){
    background:#fafbfd;
}

.raid-table tr:hover{
    background:#f3f8ff;
}

/* ==========================================================
   TYPE BADGES
========================================================== */

.raid-type{
    display:inline-block;
    padding:5px 10px;
    border-radius:20px;
    color:#fff;
    font-size:12px;
    font-weight:bold;
    text-align:center;
}

.raid-type.risk{
    background:#dc2626;
}

.raid-type.assumption{
    background:#d97706;
}

.raid-type.issue{
    background:#7c3aed;
}

.raid-type.dependency{
    background:#047857;
}

/* ==========================================================
   PRIORITY BADGES
========================================================== */

.raid-priority{
    display:inline-block;
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
    color:#fff;
}

.raid-priority.low{
    background:#16a34a;
}

.raid-priority.medium{
    background:#2563eb;
}

.raid-priority.high{
    background:#ea580c;
}

.raid-priority.critical{
    background:#b91c1c;
}

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

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

.status-open{
    background:#fee2e2;
    color:#991b1b;
}

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

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

.status-closed{
    background:#dcfce7;
    color:#166534;
}

/* ==========================================================
   ENTRY FORM
========================================================== */

.raid-entry-form{
    margin-top:35px;
    padding:25px;
    background:#fafcff;
    border:1px solid #dfe8f3;
    border-radius:10px;
}

.raid-entry-form .spw-field{
    margin-bottom:18px;
}

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

.raid-table button{
    border:none;
    cursor:pointer;
    padding:6px 10px;
    border-radius:5px;
    font-size:12px;
    font-weight:600;
}

.raid-edit{
    background:#2563eb;
    color:#fff;
    margin-right:6px;
}

.raid-edit:hover{
    background:#1d4ed8;
}

.raid-delete{
    background:#dc2626;
    color:#fff;
}

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

/* ==========================================================
   EXPORT
========================================================== */

.raid-export{
    margin-top:30px;
    text-align:center;
}

.raid-export .spw-button-group{
    justify-content:center;
}

/* ==========================================================
   OUTPUT DOCUMENT
========================================================== */

#raidOutput .spw-document{
    background:#fff;
}

#raidOutput .spw-doc-header h2{
    letter-spacing:1px;
}

#raidExportTable td{
    font-size:13px;
}

/* ==========================================================
   AI STATUS
========================================================== */

#spw_ai_raid_status{
    margin-top:12px;
    font-weight:600;
    color:#0056d2;
}

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

.raid-empty{
    text-align:center;
    padding:40px;
    color:#777;
    font-style:italic;
}

/* ==========================================================
   MOBILE
========================================================== */

@media screen and (max-width:768px){

    .raid-filter-bar{
        grid-template-columns:1fr;
    }

    .raid-dashboard{
        grid-template-columns:1fr 1fr;
    }

    .raid-card{
        padding:18px;
    }

    .raid-card .count{
        font-size:28px;
    }

    .raid-entry-form{
        padding:18px;
    }

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

    .raid-table button{
        display:block;
        width:100%;
        margin-bottom:6px;
    }

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

    .spw-container > *{
    display:none !important;
    }
    
    #raidOutput,
    #raidOutput *{
        display:block !important;
    }
    
    #raidOutput{
        position:relative;
        width:100%;
    }
    
    .spw-export-section{
        display:none !important;
    }
    
    #raidOutput,
    #raidOutput *{
        visibility:visible;
    }

    #raidOutput{
        position:absolute;
        left:0;
        top:0;
        width:100%;
    }

    .spw-export-section{
        display:none !important;
    }

    .raid-table{
        min-width:100%;
    }

    .raid-table th{
        background:#e5e7eb !important;
        color:#000 !important;
    }

}
    .raid-date-row{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px;
    }
    
    .raid-register-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin:20px 0;
    }
    
    @media(max-width:768px){
    
        .raid-date-row{
            grid-template-columns:1fr;
        }
    
        .raid-register-header{
            flex-direction:column;
            align-items:flex-start;
            gap:12px;
        }
    
    }
    .raid-filter-bar select{
    color:#333 !important;
    font-size:15px !important;
    background:#fff !important;
    height:46px;
}

.raid-filter-bar option{
    color:#333;
    font-size:15px;
}