/* ==========================================================
   MY Bharat Operator Portal
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:linear-gradient(135deg, #eef2f3 0%, #dbe2ef 100%);
    min-height:100vh;
    font-family:"Inter", "Segoe UI", Arial, sans-serif;
    color:#111827;
}

/* ==========================================================
   Wrapper
========================================================== */

.operator-wrapper{
    max-width:1300px;
    margin:40px auto;
    padding:0 20px;
}

/* ==========================================================
   Header
========================================================== */

.operator-header{
    background:linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
    color:#111827;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 30px;
    border-radius:12px;
    margin-bottom:24px;
    border:1px solid #E5E7EB;
    box-shadow:0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
}

.operator-header h1{
    font-size:24px;
    font-weight:600;
    margin:0;
}

.header-subtitle{
    font-size:13px;
    color:#6B7280;
    margin-top:4px;
    font-weight:400;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:16px;
}

.logout-btn{
    background:#F3F4F6;
    color:#111827;
    border:1px solid #D1D5DB;
    border-radius:8px;
    padding:10px 16px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
}

.logout-btn:hover{
    background:#E5E7EB;
}

/* ==========================================================
   Navigation Tabs
========================================================== */

.nav-tabs{
    display:flex;
    gap:0;
    margin-bottom:24px;
    border-radius:10px;
    overflow:hidden;
    border:2px solid #003366;
}

.nav-tab{
    flex:1;
    padding:14px 24px;
    border:none;
    background:#ffffff;
    font-size:15px;
    font-weight:600;
    color:#003366;
    cursor:pointer;
    position:relative;
    font-family:inherit;
}

.nav-tab + .nav-tab{
    border-left:2px solid #003366;
}

.nav-tab:hover{
    background:#EEF4FF;
    color:#003366;
}

.nav-tab.active{
    color:#ffffff;
    background:#003366;
}

/* ==========================================================
   Download Template Button
========================================================== */

.download-template-btn{
    background:#F3F4F6;
    color:#003366;
    border:1px solid #003366;
    border-radius:8px;
    padding:10px 16px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    display:inline-block;
    text-decoration:none;
}

.download-template-btn:hover{
    background:#E5E7EB;
}

/* ==========================================================
   Upload Card
========================================================== */

.upload-card{
    background:#ffffff;
    border-radius:12px;
    padding:40px;
    border:1px solid #E5E7EB;
    box-shadow:0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025);
}

/* ==========================================================
   Section Title
========================================================== */

.section-title{
    font-size:18px;
    font-weight:600;
    color:#111827;
    margin:30px 0 20px;
    padding-bottom:12px;
    border-bottom:1px solid #E5E7EB;
}

.section-title:first-child{
    margin-top:0;
}

/* ==========================================================
   Grid
========================================================== */

.mybharat-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

/* ==========================================================
   Fields
========================================================== */

.field{
    display:flex;
    flex-direction:column;
}

.field.full{
    margin-top:20px;
}

.field label{
    font-weight:600;
    margin-bottom:8px;
    color:#374151;
    font-size:14px;
}

.required{
    color:#DC2626;
}

/* ==========================================================
   Inputs
========================================================== */

input[type=text],
textarea{
    width:100%;
    border:1px solid #D1D5DB;
    border-radius:8px;
    padding:12px 14px;
    font-size:14px;
    background:#ffffff;
    font-family:inherit;
    line-height:1.5;
}

select {
    width:100%;
    border:1px solid #D1D5DB;
    border-radius:8px;
    padding:10px 14px;
    height:46px;
    font-size:14px;
    background:#ffffff;
    font-family:inherit;
    line-height:normal;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234B5563%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 14px top 50%;
    background-size: 10px auto;
}

textarea{
    resize:vertical;
    min-height:140px;
    vertical-align:top;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:#2563EB;
    box-shadow:0 0 0 2px rgba(37,99,235,0.1);
}

/* ==========================================================
   File Upload
========================================================== */

input[type=file]{
    background:#F9FAFB;
    border:1px dashed #D1D5DB;
    border-radius:8px;
    padding:12px;
    cursor:pointer;
    font-size:14px;
    color:#4B5563;
}

input[type=file]:hover{
    border-color:#9CA3AF;
    background:#F3F4F6;
}

small{
    margin-top:8px;
    color:#6B7280;
    font-size:12px;
}

/* ==========================================================
   Preview
========================================================== */

.preview-field{
    display:flex;
    justify-content:center;
    align-items:center;
}

.image-preview{
    width:80px !important;
    max-width:80px !important;
    height:80px !important;
    max-height:80px !important;
    object-fit:contain !important;
    border-radius:8px;
    background:#F9FAFB;
    border:1px solid #E5E7EB;
    display:block;
}

img.image-preview:not([src]),
img.image-preview[src=""]{
    display:none !important;
}

/* ==========================================================
   Upload Button
========================================================== */

.upload-btn{
    width:100%;
    margin-top:30px;
    background:#2563EB;
    color:#ffffff;
    border:none;
    border-radius:8px;
    padding:14px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}

.upload-btn:hover{
    background:#1D4ED8;
}

.upload-btn:disabled{
    opacity:0.5;
    cursor:not-allowed;
    background:#9CA3AF;
}

/* ==========================================================
   Messages
========================================================== */

.upload-message{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    margin-bottom:25px;
    border-radius:8px;
    font-weight:500;
    font-size:14px;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
}

.upload-message.success{
    background:#ECFDF5;
    color:#065F46;
    border:1px solid #A7F3D0;
}

.upload-message.error{
    background:#FEF2F2;
    color:#991B1B;
    border:1px solid #FECACA;
}

/* ==========================================================
   Bulk Upload — Requirements Card
========================================================== */

.bulk-requirements-card{
    margin-bottom:20px;
    padding:28px 32px;
    background:#FAFBFF;
    border:1px solid #C7D2FE;
}

.bulk-requirements-title{
    font-size:16px;
    font-weight:600;
    color:#003366;
    margin-bottom:16px;
}

.bulk-requirements-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}

.bulk-req-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:#374151;
}

.bulk-req-icon{
    font-size:18px;
    flex-shrink:0;
}

/* ==========================================================
   Bulk Upload — Upload Cards
========================================================== */

.bulk-upload-card{
    margin-bottom:16px;
    padding:28px 32px;
}

.bulk-card-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.bulk-step-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#003366;
    color:#ffffff;
    font-size:12px;
    font-weight:700;
    padding:4px 10px;
    border-radius:20px;
    white-space:nowrap;
}

.bulk-card-title{
    font-size:16px;
    font-weight:600;
    color:#111827;
    margin:0;
}

.bulk-upload-zone{
    border:2px dashed #CBD5E1;
    border-radius:10px;
    padding:30px;
    text-align:center;
    background:#F8FAFC;
}

.bulk-upload-zone:hover{
    border-color:#003366;
    background:#EEF4FF;
}

.bulk-upload-icon{
    margin-bottom:12px;
}

.bulk-upload-label{
    font-weight:600;
    font-size:15px;
    color:#003366;
    margin-bottom:12px;
}

.bulk-file-input{
    display:block;
    margin:0 auto 8px;
}

/* ==========================================================
   Bulk Upload — File Status
========================================================== */

.bulk-file-status{
    margin-top:14px;
}

.bulk-file-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}

.bulk-file-name{
    font-size:14px;
    font-weight:600;
    color:#111827;
}

.bulk-file-size{
    font-size:12px;
    color:#6B7280;
}

/* ==========================================================
   Bulk Upload — Preview Area
========================================================== */

.bulk-preview-area{
    margin-top:24px;
    background:#ffffff;
    border-radius:12px;
    border:1px solid #E5E7EB;
    padding:40px;
    min-height:200px;
}

.bulk-preview-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    color:#9CA3AF;
    text-align:center;
    min-height:120px;
}

.bulk-preview-empty p{
    font-size:14px;
    max-width:360px;
    line-height:1.6;
}

/* ==========================================================
   Bulk Upload — Preview Table
========================================================== */

.bulk-preview-summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid #E5E7EB;
}

.bulk-preview-info-group{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.bulk-preview-title{
    font-size:16px;
    font-weight:600;
    color:#111827;
    margin:0;
}

.bulk-preview-count{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#4B5563;
    background:#F3F4F6;
    padding:6px 12px;
    border-radius:20px;
}

.bulk-preview-count strong{
    color:#003366;
    font-size:15px;
}

.bulk-table-responsive{
    overflow-x:auto;
    overflow-y:auto;
    max-height:550px;
    border:1px solid #E5E7EB;
    border-radius:8px;
}

.bulk-preview-table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:13px;
}

.bulk-preview-table th{
    background:#F9FAFB;
    color:#374151;
    font-weight:600;
    padding:12px 16px;
    border-bottom:1px solid #E5E7EB;
    white-space:nowrap;
    position:sticky;
    top:0;
    z-index:10;
}

.bulk-preview-table td{
    padding:12px 16px;
    border-bottom:1px solid #E5E7EB;
    color:#111827;
    vertical-align:middle;
}

.bulk-preview-table tbody tr:last-child td{
    border-bottom:none;
}

.bulk-preview-table tbody tr:hover{
    background:#F8FAFC;
}

.bulk-preview-table span[title]{
    cursor:help;
    color:#2563EB;
    font-weight:700;
}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:900px){
    .mybharat-grid{
        grid-template-columns:1fr;
    }
    .operator-header{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }
    .header-actions{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }
    .nav-tabs{
        flex-direction:column;
        border-radius:8px;
    }
    .nav-tab + .nav-tab{
        border-left:none;
        border-top:2px solid #003366;
    }
    .logout-btn{
        width:100%;
    }
    .image-preview{
        width:100%;
        height:150px;
    }
    .bulk-upload-zone{
        padding:20px;
    }
    .bulk-requirements-grid{
        grid-template-columns:1fr;
    }
    .bulk-upload-card{
        padding:20px;
    }
}