/* ==========================================
   Daily Report Generator
   Version 0.1
========================================== */
 
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",sans-serif;
}
 
body{
    background:#f3f2f1;
    color:#323130;
    padding:40px;
}
 
.container{
    max-width:1200px;
    margin:auto;
}
 
/* ==========================================
   Header
========================================== */
 
header{
    margin-bottom:35px;
}
 
.title-section h1{
    font-size:36px;
    font-weight:700;
    color:#201f1e;
}
 
.title-section p{
    margin-top:8px;
    color:#605e5c;
    font-size:15px;
}
 
/* ==========================================
   Progress
========================================== */
 
.progress-section{
    display:flex;
    gap:25px;
    margin-top:25px;
    flex-wrap:wrap;
}
 
.progress-item{
    display:flex;
    align-items:center;
    gap:10px;
    color:#605e5c;
    font-weight:600;
}
 
.dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#c8c6c4;
}
 
.progress-item.active .dot{
    background:#107c10;
}
 
.progress-item.active{
    color:#107c10;
}
 
/* ==========================================
   Card
========================================== */
 
.card{
    background:white;
    border-radius:14px;
    padding:28px;
    margin-bottom:30px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}
 
.card h2{
    margin-bottom:22px;
    font-size:24px;
}
 
/* ==========================================
   Upload Grid
========================================== */
 
.upload-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:22px;
    margin-bottom:30px;
}
 
.upload-card h3{
    margin-bottom:12px;
    font-size:17px;
}
 
.required{
    color:#d13438;
}
 
/* ==========================================
   Upload Box
========================================== */
 
.upload-box{
 
    display:flex;
 
    flex-direction:column;
 
    justify-content:center;
 
    align-items:center;
 
    min-height:200px;
 
    border:2px dashed #0f6cbd;
 
    border-radius:14px;
 
    background:#fbfbfb;
 
    transition:.25s;
 
    cursor:pointer;
 
    padding:20px;
 
    text-align:center;
}
 
.upload-box:hover{
 
    background:#eef6ff;
 
    border-color:#115ea3;
}
 
.upload-box input{
 
    display:none;
}
 
.upload-icon{
 
    font-size:46px;
 
    margin-bottom:18px;
}
 
.upload-box span{
 
    font-size:18px;
 
    font-weight:600;
}
 
.upload-box small{
 
    margin-top:12px;
 
    font-size:14px;
 
    color:#605e5c;
 
    word-break:break-word;
}
 
/* ==========================================
   Input
========================================== */
 
.input-group{
 
    margin-top:20px;
 
    margin-bottom:30px;
}
 
.input-group label{
 
    display:block;
 
    margin-bottom:10px;
 
    font-weight:600;
}
 
.input-group input{
 
    width:100%;
 
    padding:13px;
 
    border:1px solid #c8c6c4;
 
    border-radius:8px;
 
    font-size:15px;
}
 
.input-group input:focus{
 
    outline:none;
 
    border-color:#0f6cbd;
 
    box-shadow:0 0 0 3px rgba(15,108,189,.15);
}
 
/* ==========================================
   Buttons
========================================== */
 
button{
 
    border:none;
 
    border-radius:8px;
 
    cursor:pointer;
 
    transition:.2s;
}
 
#generateBtn{
 
    width:100%;
 
    padding:15px;
 
    background:#0f6cbd;
 
    color:white;
 
    font-size:16px;
 
    font-weight:600;
}
 
#generateBtn:hover:not(:disabled){
 
    background:#115ea3;
}
 
#generateBtn:disabled{
 
    background:#c8c6c4;
 
    cursor:not-allowed;
}
 
.secondary-btn{
 
    margin-top:14px;
 
    width:100%;
 
    padding:10px;
 
    background:#d13438;
 
    color:white;
 
    font-weight:600;
}
 
.secondary-btn:hover{
 
    background:#a4262c;
}
 
#copyBtn{
 
    padding:11px 22px;
 
    background:#107c10;
 
    color:white;
 
    font-weight:600;
}
 
#copyBtn:hover:not(:disabled){
 
    background:#0b6a0b;
}
 
#copyBtn:disabled{
 
    background:#c8c6c4;
 
    cursor:not-allowed;
}
 
/* ==========================================
   Preview
========================================== */
 
.preview-header{
 
    display:flex;
 
    justify-content:space-between;
 
    align-items:center;
 
    margin-bottom:20px;
 
    flex-wrap:wrap;
 
    gap:10px;
}
 
#preview{
 
    min-height:550px;
 
    border:1px solid #d2d0ce;
 
    border-radius:12px;
 
    padding:25px;
 
    overflow:auto;
}
 
.placeholder{
 
    display:flex;
 
    flex-direction:column;
 
    justify-content:center;
 
    align-items:center;
 
    height:450px;
 
    color:#605e5c;
 
    text-align:center;
}
 
.placeholder-icon{
 
    font-size:70px;
 
    margin-bottom:20px;
}
 
.placeholder h3{
 
    margin-bottom:10px;
}
 
/* ==========================================
   Status
========================================== */
 
.success{
 
    color:#107c10 !important;
 
    font-weight:600;
}
 
.error{
 
    color:#d13438 !important;
 
    font-weight:600;
}
 
.warning{
 
    color:#ff8c00 !important;
 
    font-weight:600;
}
 
/* ==========================================
   Tables (For Pivot Preview)
========================================== */
 
table{
 
    width:100%;
 
    border-collapse:collapse;
 
    margin-top:18px;
 
    margin-bottom:18px;
}
 
table th{
 
    background:#f3f2f1;
 
    padding:10px;
 
    border:1px solid #d2d0ce;
 
    text-align:center;
}
 
table td{
 
    padding:10px;
 
    border:1px solid #d2d0ce;
 
    text-align:center;
}
 
/* ==========================================
   Scrollbar
========================================== */
 
::-webkit-scrollbar{
 
    width:10px;
}
 
::-webkit-scrollbar-thumb{
 
    background:#b3b0ad;
 
    border-radius:20px;
}
 
::-webkit-scrollbar-thumb:hover{
 
    background:#8a8886;
}
 
/* ==========================================
   Mobile
========================================== */
 
@media(max-width:768px){
 
    body{
 
        padding:18px;
    }
 
    .title-section h1{
 
        font-size:28px;
    }
 
    .upload-grid{
 
        grid-template-columns:1fr;
    }
 
    .preview-header{
 
        flex-direction:column;
        align-items:flex-start;
    }
 
    #copyBtn{
 
        width:100%;
    }
 
    .progress-section{
 
        flex-direction:column;
        gap:12px;
    }
}
/* ==========================================
   Excel Pivot Style
========================================== */
.pivot-table {
 
    display: inline-table;
    width: auto;
    border-collapse: collapse;
    table-layout: auto;
 
    font-family: Calibri, Arial, sans-serif;
    font-size: 11pt;
 
    margin: 10px 0;
 
    border: 1px solid #7F7F7F;
 
}
 
.pivot-table thead th {
 
    background: #C0E6F5 !important;
    border: 1px solid #7F7F7F;
    font-weight: bold;
    text-align: center;
    padding: 4px 8px;
 
}
 
.pivot-table tbody td {
 
    background: #FFFFFF;
    border: 1px solid #B7B7B7;
    padding: 4px 8px;
 
}
 
.pivot-table tbody th {
 
    background: #FFFFFF;
    border: 1px solid #B7B7B7;
    padding: 4px 8px;
 
}
 
.pivot-row-label {
 
    text-align: left !important;
    white-space: nowrap;
 
}
 
.pivot-header {
 
    text-align: center;
 
}
 
.pivot-number {
 
    text-align: center;
    min-width: 55px;
 
}
 
.grand-total-cell {
 
    text-align: center;
    font-weight: bold;
 
}
 
/* Grand Total Row */
 
.grand-total-row th,
.grand-total-row td {
 
    background: #C0E6F5 !important;
    font-weight: bold;
    border-top: 2px solid #7F7F7F;
    border-bottom: 2px solid #7F7F7F;
 
}
 
.pivot-total {
 
    background: #C0E6F5 !important;
    text-align: center;
    font-weight: bold;
 
}
/* Left Align */
 
.pivot-row-label{
 
    text-align:left;
    width:340px;
 
}
 
/* Center Numbers */
 
.pivot-number{
 
    text-align:center;
    vertical-align:middle;
    width:90px;
 
}
 
/* Header */
 
.pivot-header{
 
    text-align:center;
 
}
 
/* Totals */
 
.pivot-total{
 
    background:#C0E6F5;
    font-weight:bold;
    text-align:center;
 
}
 
.grand-total-row th{
 
    background:#C0E6F5;
 
}
 
.grand-total-cell{
 
    text-align:center;
    font-weight:bold;
 
}
 
.unassigned{
 
    color:#666;
    font-style:italic;
 
}