:root{
    --primary:#2DBE60;
    --secondary:#1B4F9C;
    --dark:#0f172a;
    --text-light:#ffffff;
    --glass-bg:rgba(255,255,255,0.08);
    --glass-border:rgba(255,255,255,0.15);
}
*{
    box-sizing:border-box;
}

body{

    font-family:'Inter','Segoe UI',sans-serif;
    background:#0f172a;
    background: radial-gradient(circle at top,#1e293b,#0f172a);
    color:#e5e7eb;
}

a{
    text-decoration:none;
}
.menu-btn{
    font-size:22px;
    background:none;
    border:none;
    color:#fff;
}

.container-fluid{
    padding-left:20px;
    padding-right:20px;
}
/* LAYOUT */

.sidebar{
    width:240px;
    background:#020617;
    border-right:1px solid rgba(255,255,255,0.05);
    min-height:100vh;
    transition:all .3s ease;
}
/* Collapsed sidebar */
.sidebar.collapsed{
width:70px;
}
/* Hide text when collapsed */
.sidebar.collapsed span{
display:none;
}

/* Center icons */
.sidebar.collapsed a{
justify-content:center;
}
.sidebar.collapsed i{
margin-right:0;
font-size:18px;
}

.sidebar-logo{
    font-size:20px;
    font-weight:200;
    padding:18px 22px;
  /*  border-bottom:1px solid rgba(255,255,255,0.06);*/
    /*color: #cbd5e1;*/
}

.sidebar a{
   display:flex;
    align-items:center;
    gap:12px;
    padding:12px 20px;
    color:#cbd5e1;
    text-decoration:none;
    /*transition:all .2s;*/
}

.sidebar a:hover{
    background:rgba(255,255,255,0.05);
    color:#fff;
    border-left:3px solid #3b82f6;
}
.sidebar i{
    margin-right:10px;
    font-size:16px;
}

.sidebar a.active{
    background:rgba(255,255,255,0.08);
    border-left:3px solid #3b82f6;
    color:#fff;
}


.app-header{
    height:64px;
    background:#0f172a;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.header-right span{
    font-size:14px;
    color:#cbd5f5;
}
/*.header-right{
    display:flex;
    align-items:center;
    gap:12px;
}*/

.app-footer{
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    border-top:1px solid rgba(255,255,255,0.1);
    padding:12px;
    text-align:center;
    color:#cbd5e1;
}
/* CARDS */

.glass-card{
    background:#111827;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:0 6px 20px rgba(0,0,0,0.35);
    transition:all .25s ease;
}

.glass-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,0,0,0.45);
}



/* BUTTON */

.btn-theme{
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    border:none;
    color:#fff;
    padding:10px 18px;
    border-radius:30px;
}
/* FORMS */

.form-control{
    background: rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.25);
    color:#fff;
}

.form-control:focus{
    border:1px solid var(--primary);
    box-shadow:0 0 10px rgba(45,190,96,0.5);
}
/* TABLE */

.table{
    color:#cbd5e1;
}

.table thead{
    background:#111827;
}

.table tbody tr:hover{
    background:#1e293b;
}

.table-responsive{
    overflow-x:auto;
}

/* PAGE HEADER */

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

.page-title{
font-weight:600;
margin:0;
color:#fff;
}

.page-subtitle{
font-size:13px;
color:#94a3b8;
margin:0;
}

/* TABLE TOOLBAR */

.table-toolbar{
padding:16px;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.search-input{
max-width:260px;
}

/* EMPLOYEE INFO */

.employee-info{
display:flex;
align-items:center;
gap:10px;
}

.employee-avatar{
width:34px;
height:34px;
border-radius:50%;
background:linear-gradient(90deg,#3b82f6,#06b6d4);
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:600;
color:white;
}

/* COMPANY BADGE */

.badge-company{
background:rgba(59,130,246,0.2);
color:#60a5fa;
padding:4px 10px;
border-radius:20px;
font-size:12px;
}

/* TABLE */

/*.theme-table{
color:#cbd5e1;
}

.theme-table thead{
background:#111827;
}

.theme-table th{
padding:14px;
border-bottom:1px solid rgba(255,255,255,0.1);
}

.theme-table td{
padding:14px;
border-bottom:1px solid rgba(255,255,255,0.05);
}

.theme-table tbody tr:hover{
background:#1e293b;
}*/

/* DASHBOARD */

/*.stat-card{
    padding:22px;
    border-radius:12px;
    transition:all .25s ease;
    position:relative;
}

.stat-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,0.4);
}
.stat-card::before{
content:"";
position:absolute;
top:0;
left:0;
height:4px;
width:100%;
background:linear-gradient(90deg,#3b82f6,#06b6d4);
border-radius:12px 12px 0 0;
}*/
.stat-card{
padding:22px;
border-radius:14px;
position:relative;
background:rgba(17,24,39,0.9);
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 8px 25px rgba(0,0,0,0.35);
color:#e2e8f0;   /* important */
}

/* Title */
.stat-card h6{
font-size:14px;
color:#94a3b8;
margin-bottom:6px;
}

/* Numbers */
.stat-card h3{
font-size:32px;
font-weight:700;
color:#38bdf8;
margin:0;
}
.stat-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#3b82f6,#06b6d4);
border-radius:14px 14px 0 0;
}
.chart-card{
    padding:24px;
}

.badge-theme{
    background:linear-gradient(90deg,var(--primary),var(--secondary));
}

.attendance-card{
 background: rgba(30, 41, 59, 0.85); /* dark but opaque */
backdrop-filter: blur(12px);
border-radius:16px;
padding:0;
max-width:720px;
margin:auto;
box-shadow:0 10px 35px rgba(0,0,0,0.35);
border:1px solid rgba(255,255,255,0.08);
}

/* Header */

.attendance-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 22px;
border-bottom:1px solid rgba(255,255,255,0.08);
background:linear-gradient(90deg,#2563eb,#1e3a8a);
color:#fff;
border-radius:16px 16px 0 0;
}

.date-badge{
background:#fff;
color:#111;
font-size:13px;
padding:4px 10px;
border-radius:20px;
}

/* Body */

.attendance-body{
padding:30px;
}


/* Clock */

.clock-box{
text-align:center;
margin-bottom:20px;
}

.clock-box h2{
font-size:38px;
color:#3b82f6;
font-weight:700;
}

.clock-box small{
color:#94a3b8;
}

/* Divider */

.divider{
height:1px;
background:rgba(255,255,255,0.08);
margin:20px 0;
}

/* Status Cards */

.status-card{
padding:16px;
border-radius:10px;
font-size:15px;
color:#fff;   /* ADD THIS */
}
.status-card label{
    color:#94a3b8;
    font-size:13px;
}

.status-card p{
    color:#ffffff;
    font-size:15px;
    font-weight:600;
    margin-bottom:0;
}

.status-card.success{
background:rgba(34,197,94,0.15);
border:1px solid rgba(34,197,94,0.3);
}

.status-card.warning{
background:rgba(251,191,36,0.15);
border:1px solid rgba(251,191,36,0.3);
}

/* Inputs */

.attendance-input{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
color:#fff;
}

/* Attendance Buttons */
.attendance-buttons {
    display:flex;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
    margin-top:25px;
    position: relative;
    z-index: 2; /* above card background */
}

.attendance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 130px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* stronger shadow */
}

.select2-container--default .select2-selection--multiple{
background:#111827;
border:1px solid rgba(255,255,255,0.1);
color:#fff;
min-height:40px;
}

.select2-selection__choice{
background:#3b82f6 !important;
border:none !important;
color:#fff !important;
}

/* Make all inputs same height */
#taskTable select,
#taskTable input[type="text"],
#taskTable input[type="number"],
#taskTable input[type="time"],
#taskTable input[type="file"],
#taskTable textarea {
    height: 38px;
    font-size: 13px;
}

/* Fix textarea height */
#taskTable textarea {
    height: 38px;
    /*resize: none;*/
}

/* Align table content vertically */
#taskTable td {
    vertical-align: middle;
}

/* Notes + mic layout */
.notes-wrapper {
    display: flex;
    gap: 6px;
    min-width: 200px;   /* important */
}

.notes-wrapper textarea {
    min-width: 150px;
}
#taskTable td:last-child {
    min-width: 120px;
}

.action-buttons,
#taskTable td button {
    white-space: nowrap;
}


/* Mic button size */
.mic-btn {
    height: 38px;
    width: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* In Button */
.btn-in {
    background: #22c55e !important;
    color: #fff !important;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
}

.btn-in:hover {
    background: #16a34a;
    transform: translateY(-2px);
}

/* Out Button */
.btn-out {
    background: #f87171 !important;
    color: #fff !important;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
}

.btn-out:hover {
    background: #ef4444;
    transform: translateY(-2px);
}

/* Disabled state */
.attendance-btn:disabled {
    opacity: 0.7;
    filter: grayscale(30%);
}

/* Calendar Card */

.calendar-card{
background: rgba(255,255,255,0.05);
border-radius:16px;
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 12px 35px rgba(0,0,0,0.35);
overflow:hidden;
}

/* Header */

.calendar-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 24px;
background:linear-gradient(90deg,#2563eb,#1e3a8a);
color:white;
}

.calendar-month{
background:white;
color:black;
padding:5px 14px;
border-radius:20px;
font-size:13px;
}

/* Body */

.calendar-body{
padding:20px;
}

/* Grid */

.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:10px;
}

/* Day Names */

.calendar-day-name{
text-align:center;
font-weight:600;
color:#94a3b8;
padding-bottom:6px;
}

/* Calendar Cell */

.calendar-day{
background:rgba(255,255,255,0.04);
border-radius:10px;
min-height:90px;
padding:10px;
position:relative;
border:1px solid rgba(255,255,255,0.05);
transition:0.2s;
}

.calendar-day:hover{
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,0.3);
}

/* Empty cells */

.calendar-day.empty{
background:transparent;
border:none;
}

/* Day Number */

.day-number{
font-weight:600;
font-size:15px;
color:#e2e8f0;
}

/* Status Text */

.day-status{
font-size:12px;
margin-top:6px;
}

/* Status Colors */

.calendar-day.present{
background:rgba(34,197,94,0.15);
border:1px solid rgba(34,197,94,0.4);
}

.calendar-day.late{
background:rgba(251,191,36,0.15);
border:1px solid rgba(251,191,36,0.4);
}

.calendar-day.half{
background:rgba(239,68,68,0.15);
border:1px solid rgba(239,68,68,0.4);
}
.calendar-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 20px;
background:linear-gradient(90deg,#2563eb,#1e3a8a);
color:white;
border-radius:14px 14px 0 0;
}

.calendar-title{
font-weight:600;
margin:0;
}

.calendar-nav{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.15);
border-radius:8px;
color:white;
text-decoration:none;
transition:0.2s;
}

.calendar-nav:hover{
background:white;
color:#2563eb;
transform:scale(1.1);
}

.task-row{
background:#f8fafc;
border:1px solid #e6e9ef;
border-radius:8px;
transition:0.2s;
}

.task-row:hover{
background:#f1f6ff;
}

#addTask{
border-radius:8px;
}

.card{
border-radius:10px;
}

.table thead{
background:#f1f5fb;
}

.table td, .table th{
vertical-align:middle;
}
.task-card{
background:#fff;
border-radius:10px;
padding:15px;
border:1px solid #e5e7eb;
transition:0.2s;
}

.task-card:hover{
box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.progress{
height:10px;
border-radius:20px;
}

.card{
border-radius:12px;
}
/* Calendar container */

#calendarGrid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:14px;
padding:10px;
}

/* Day card */

.calendar-day{
background:#1e2b45;
border-radius:12px;
padding:16px;
min-height:90px;
cursor:pointer;
transition:all .2s ease;
position:relative;
color:#d8e1ff;
border:1px solid rgba(255,255,255,0.05);
}

/* Hover effect */

.calendar-day:hover{
transform:translateY(-3px);
box-shadow:0 6px 18px rgba(0,0,0,.35);
background:#24365c;
}

/* Day number */

.calendar-day .day-number{
font-size:18px;
font-weight:600;
color:#fff;
}

/* Status text */

.calendar-day .status{
font-size:12px;
opacity:.7;
margin-top:5px;
}

/* Submitted */

.calendar-day.submitted{
background:#1f8a5b;
color:white;
}

/* Draft */

.calendar-day.draft{
background:#3b82f6;
color:white;
}

/* Halfday */

.calendar-day.halfday{
background:#d9534f;
color:white;
}

/* Empty */

.calendar-day.empty{
background:#24365c;
}

/* Weekend */

.calendar-day.weekend{
background:#19253b;
opacity:.9;
}

/* Month header */

.card-header{
background:linear-gradient(90deg,#2c6ef2,#1e4ecb);
color:white;
font-weight:600;
}

/* Navigation buttons */

#prevMonth,
#nextMonth{
border:none;
background:rgba(255,255,255,.2);
color:white;
padding:6px 10px;
border-radius:6px;
}

.ts-calendar{

background:#1e2a42;
border-radius:14px;
padding:20px;
box-shadow:0 10px 25px rgba(0,0,0,.4);

}

/* Header */

.ts-header{

display:flex;
align-items:center;
justify-content:space-between;

background:linear-gradient(90deg,#2f6fed,#2954c8);
padding:18px;

border-radius:12px;
margin-bottom:20px;

color:white;

}

.ts-header h4{
margin:0;
font-weight:600;
}

/* Navigation */

.nav-btn{

background:rgba(255,255,255,.15);
border:none;

width:40px;
height:40px;

border-radius:10px;

color:white;
font-size:20px;

cursor:pointer;

}

/* Week labels */

.ts-days{

display:grid;
grid-template-columns:repeat(7,1fr);
text-align:center;

color:#9fb3d1;

margin-bottom:10px;

font-weight:500;

}

/* Grid */

.ts-grid{

display:grid;
grid-template-columns:repeat(7,1fr);

gap:16px;

}

/* Day card */

.ts-day{

background:#24365a;

border-radius:14px;

min-height:95px;

padding:14px;

position:relative;

border:1px solid rgba(255,255,255,.05);

transition:.2s;

cursor:pointer;

}

.ts-day:hover{

transform:translateY(-3px);
background:#2c3f69;

}

/* Date */

.day-number{

font-size:18px;
font-weight:600;
color:white;

}

/* Status text */

.day-status{

font-size:13px;
margin-top:6px;
opacity:.85;

}

/* Status colors */

.halfday{

background:rgba(200,70,70,.25);
border:1px solid #b94c4c;

}

.late{

background:rgba(220,180,70,.25);
border:1px solid #d6b03c;

}

.submitted{

background:rgba(60,180,120,.25);
border:1px solid #2fa36b;

}
/* Calendar card */

.card{
background:#1e2a42;
border-radius:16px;
}

/* Header */

.card-header{
background:linear-gradient(90deg,#2f6fed,#2954c8)!important;
border:none;
}

/* Week labels */

.card-body .row.text-center{
color:#9fb3d1!important;
font-size:14px;
}

/* Day Card */

.ts-day{

background:#24365a;

border-radius:14px;

padding:16px;

min-height:95px;

border:1px solid rgba(255,255,255,0.05);

cursor:pointer;

transition:.25s;

color:white;

display:flex;
flex-direction:column;
justify-content:space-between;

}

/* Hover effect */

.ts-day:hover{

transform:translateY(-4px);

background:#2c3f69;

box-shadow:0 8px 18px rgba(0,0,0,.35);

}

/* Empty cells */

.ts-empty{
height:95px;
}

/* Date number */

.day-number{

font-size:18px;

font-weight:600;

}

/* Status */

.day-status{

font-size:12px;

opacity:.9;

}

/* Submitted */

.ts-submitted{

background:rgba(60,180,120,.25);

border:1px solid #2fa36b;

}

/* Draft */

.ts-draft{

background:rgba(230,180,60,.25);

border:1px solid #d6b03c;

}

/* Not submitted */

.ts-empty-status{

background:#24365a;

border:1px solid rgba(255,255,255,0.05);

}

/* Navigation buttons */

#prevMonth,#nextMonth{

width:40px;

height:34px;

border-radius:8px;

font-size:18px;

}

.task-badge{

position:absolute;

top:10px;
right:10px;

background:#3b6edc;

color:white;

font-size:11px;

padding:2px 7px;

border-radius:20px;

}
.day-hours{

font-size:13px;

margin-top:6px;

font-weight:600;

color:#4fd1c5;

}
.low-hours{

border:1px solid #ff6b6b;

box-shadow:0 0 0 1px rgba(255,107,107,0.2);

}

.disabled-day{

opacity:0.45;

pointer-events:none;

cursor:not-allowed;

}
.approved{

border:1px solid #22c55e;

background:rgba(34,197,94,0.15);

}

/* DARK MODAL */
#timesheetModal .modal-content{
    background:#1e1e2f;
    color:#e4e6eb;
    border-radius:12px;
     height: 90vh;              /* take most of screen */
    display: flex;
    flex-direction: column;
}

#timesheetModal .modal-header{
    background:linear-gradient(45deg,#4e73df,#1cc88a);
    border-bottom:0;
}

#timesheetModal .modal-title{
    font-weight:600;
}
#timesheetModal .modal-body {
    overflow-y: auto;          /* vertical scroll */
}

/* TABLE */
#timesheetModal table{
    background:#2a2a3c;
    border-radius:10px;
    overflow:hidden;
}

#timesheetModal thead{
    background:#34344e;
    color:#fff;
}
#timesheetModal .table-responsive {
    overflow-x: auto;
    white-space: nowrap;   /* prevents column breaking */
}


#timesheetModal tbody tr{
    transition:.2s;
}

#timesheetModal tbody tr:hover{
    background:#3a3a55;
}

/* INPUTS */
#timesheetModal .form-control,
#timesheetModal select{
   /* background:#2a2a3c;*/
    border:1px solid #444;
    color:#2a2a3c;
}

#timesheetModal .form-control:focus{
    /*background:#2a2a3c;*/
    border-color:#4e73df;
    box-shadow:none;
}

/* ADD BUTTON */
#timesheetModal .btn-light{
    background:#34344e;
    color:#fff;
    border:0;
}

#timesheetModal .btn-light:hover{
    background:#4e73df;
}

/* REMOVE BUTTON */
#timesheetModal .btn-danger{
    border-radius:6px;
}
#timesheetModal .modal-dialog {
    max-width: 95vw;   /* almost full screen */
    width: 95%;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.action-buttons .btn {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
}

/* Draft saved state */
.save-draft.btn-success {
    background: #28a745;
    color: #fff;
    border: none;
}

/* Hover effects */
.action-buttons .btn:hover {
    transform: scale(1.05);
    transition: 0.2s;
}

/* TOTAL HOURS BOX */
.total-hours-box{
    background:#2a2a3c;
    padding:10px 18px;
    border-radius:8px;
    font-size:16px;
}

/* FOOTER */
/*.timesheet-footer{
    background:#222235;
    padding:15px;
    border-radius:10px;
}*/
.timesheet-footer{
background:rgba(255,255,255,0.05);
padding:15px;
border-radius:10px;
margin-top:15px;
}

#taskTable input[type=file]{
font-size:12px;
padding:4px;
}
#taskTable{
background:rgba(255,255,255,0.05);
backdrop-filter: blur(8px);
}
/* TIME INPUT TEXT */
#taskTable input[type="time"]{
color:#1a1a1a;
background:rgba(255,255,255,0.75);
}

/* placeholder time */
#taskTable input[type="time"]::-webkit-datetime-edit{
color:#1a1a1a;
}

/* clock icon */
#taskTable input[type="time"]::-webkit-calendar-picker-indicator{
filter: invert(0);
cursor:pointer;
}

.btn-disabled{
background:#6c757d;
border:none;
cursor:not-allowed;
opacity:0.6;
}

/*.timesheet-table{

background:rgba(255,255,255,0.05);
border-radius:10px;
overflow:hidden;

}

.timesheet-table thead{

background:rgba(255,255,255,0.08);
color:#fff;

}

.timesheet-table th{

font-size:13px;
font-weight:600;
padding:12px;

}

.timesheet-table td{

padding:10px;
border-color:rgba(255,255,255,0.05);

}

.timesheet-table tbody tr:hover{

background:rgba(255,255,255,0.06);

}*/

.total-row{

background:rgba(40,167,69,0.15);
font-weight:600;

}

/* Timesheet Header */
.timesheet-header{
background: linear-gradient(90deg,#0f1f3d,#2f66d0);
padding:14px 18px;
border-radius:8px 8px 0 0;
font-weight:600;
font-size:16px;
}

/* Total hours badge */
.total-hours-badge{
background:#ffffff20;
border-radius:20px;
padding:4px 12px;
font-size:13px;
}

/* Filter section */
.filter-box{
background:#f8f9fb;
padding:15px;
border-radius:8px;
margin-bottom:15px;
}

/* Date pill */
.date-pill{
background:#e9ecef;
padding:4px 10px;
border-radius:12px;
font-size:12px;
font-weight:600;
}

/* Hours badge */
.hours-badge{
background:#198754;
color:#fff;
padding:4px 10px;
border-radius:6px;
font-size:12px;
font-weight:600;
}

/* Status badge */
.status-submitted{
background:#ffc107;
color:#000;
padding:4px 10px;
border-radius:6px;
font-size:12px;
font-weight:600;
}

/* DataTable improvements */
.dataTables_wrapper .dataTables_filter input{
border-radius:6px;
padding:4px 8px;
border:1px solid #ccc;
}

.dataTables_wrapper .dataTables_length select{
border-radius:6px;
}
/*.timesheet-card{
border-radius:10px;
overflow:hidden;
border:none;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}*/


/* Gradient body */
/*.timesheet-card .card-body{
background: linear-gradient(180deg,#f4f7fb 0%,#eef2f9 100%);
padding:22px;
}
.filter-box{
background:linear-gradient(135deg,#ffffff,#f6f8fc);
border-radius:8px;
padding:18px;
border:1px solid #e6ebf2;
}
#timesheetTable{
background:white;
border-radius:8px;
overflow:hidden;
}

#timesheetTable thead{
background:#f2f5fa;
}*/
.total-row{
background:linear-gradient(90deg,#dfeee7,#cfe3d9);
font-weight:600;
font-size:15px;
}
.content-wrapper{
background:linear-gradient(180deg,#0f1f3d 0%,#1b3b72 8%,#f4f7fb 8%);
}
/* Hours badge */
.badge-hours{
background: linear-gradient(135deg,#1e9e63,#28c76f);
color:#fff;
padding:5px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

/* Draft */
.badge-draft{
background: linear-gradient(135deg,#6c757d,#adb5bd);
color:#fff;
padding:5px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

/* Submitted */
.badge-submitted{
background: linear-gradient(135deg,#ffb703,#ffd166);
color:#000;
padding:5px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

/* Approved */
.badge-approved{
background: linear-gradient(135deg,#198754,#20c997);
color:#fff;
padding:5px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

/* DataTable container */
.dataTables_wrapper{
color:#e8edf7;
}

/* Search box */
.dataTables_filter input{
background:#111827;
border:1px solid #374151;
color:#fff;
border-radius:6px;
padding:6px 10px;
}

/* Length dropdown */
.dataTables_length select{
background:#111827;
color:#fff;
border:1px solid #374151;
border-radius:6px;
}

/* Table header */
.theme-table thead{
background:linear-gradient(90deg,#0f1f3d,#274c9a);
color:#fff;
}

/* Table rows */
.theme-table tbody tr{
background:#111827;
color:#d1d5db;
border-bottom:1px solid #1f2937;
}

/* Hover */
.theme-table tbody tr:hover{
background:#1f2937;
}

/* Pagination */
.dataTables_paginate .paginate_button{
background:#111827 !important;
border:none !important;
color:#fff !important;
}

.dataTables_paginate .paginate_button.current{
background:linear-gradient(90deg,#2563eb,#4f46e5) !important;
color:#fff !important;
border-radius:6px;
}

.badge-company{
background:linear-gradient(135deg,#2563eb,#4f46e5);
padding:4px 10px;
border-radius:20px;
color:#fff;
font-size:12px;
}

.badge-dept{
background:linear-gradient(135deg,#10b981,#34d399);
padding:4px 10px;
border-radius:20px;
color:#fff;
font-size:12px;
}

/* Modal header */
.timesheet-modal-header{
background: linear-gradient(90deg,#1f3c88,#4f8cff);
color:#fff;
padding:14px 18px;
border-bottom:0;
}

.timesheet-modal-header h5{
font-weight:600;
font-size:16px;
}

.timesheet-modal-body{
background: linear-gradient(180deg,#f7f9fc,#eef2f8);
padding:20px;
}



@media(max-width:576px){

.btn{
    width:100%;
}

}
/* TABLE CONTAINER */
#taskTable{
background:rgba(255,255,255,0.08);
backdrop-filter: blur(6px);
border-radius:10px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.1);
 table-layout: auto;   /* allow natural width */
    width: 100%;
    min-width: 1400px;    /* forces horizontal scroll */
}

/* HEADER */
#taskTable thead{
background:rgba(255,255,255,0.15);
color:#fff;
}

#taskTable th{
font-size:13px;
font-weight:600;
padding:12px 10px;
white-space:nowrap;
border-color:rgba(255,255,255,0.1);
 white-space: nowrap;
    vertical-align: middle;
}

/* CELLS */
#taskTable td{
padding:8px;
vertical-align:middle;
border-color:rgba(255,255,255,0.05);
 white-space: nowrap;
    vertical-align: middle;
}

/* INPUTS */
taskTable select,
taskTable input[type="text"],
taskTable input[type="time"],
taskTable input[type="file"]{

width:100%;
min-width:0;
font-size:13px;
color:#1a1a1a;

background:rgba(255,255,255,0.15);
border:1px solid rgba(255,255,255,0.2);


border-radius:6px;
padding:6px 8px;
}

/* INPUT FOCUS */
#taskTable select:focus,
#taskTable input:focus{
outline:none;
border-color:#4e73df;
box-shadow:none;
}

/* HOURS COLUMN */
.duration{
text-align:center;
font-weight:600;
color:#1cc88a;
}

/* REMOVE BUTTON */
.remove{
padding:4px 8px;
border-radius:6px;
}

/* ROW HOVER */
#taskTable tbody tr:hover{
background:rgba(255,255,255,0.06);
}
canvas{
    max-width:100%;
}

/* RESPONSIVE */
/* MOBILE */

@media(max-width:768px){

.sidebar{
position:fixed;
left:-240px;
top:0;
height:100%;
z-index:1000;
}

.sidebar.show{
left:0;
}

.main-content{
flex:1;
}

.content-area{
flex:1;
padding:30px;
width:100%;
}

}
/* Responsive: mobile buttons full width */
@media (max-width: 576px) {
    .attendance-buttons {
        flex-direction: column;
        gap: 12px;
    }
    .attendance-btn {
        width: 100%;
    }
}
/* Attendance Card */


/* ================================
   MAIN APPLICATION LAYOUT
================================ */

.app-wrapper{
    display:flex;
    min-height:100vh;
}



/* MAIN CONTENT AREA */

/* Content shift */
.main-content{
flex:1;
display:flex;
flex-direction:column;
min-width:0;
}
/* Toggle button */
.menu-toggle{
background:none;
border:none;
font-size:22px;
color:white;
cursor:pointer;
}
/* PAGE CONTENT */

.content-area{
   flex:1;
padding:30px;
width:100%;
}


/* HEADER */

.app-header{
    height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
}


/* FOOTER */

.app-footer{
    padding:12px;
}


/* AVATAR */

.avatar{
    width:36px;
    height:36px;
    border-radius:50%;
}

/* ===== ISOLATED TIMESHEET TABLE ===== */
.timesheet-table-clean {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-family: Arial, sans-serif;
}

/* HEADER */
.timesheet-table-clean thead th {
    background: #f4f6f9;
    color: #222;
    font-weight: 600;
    padding: 12px;
    border: 1px solid #dcdcdc;
    text-align: left;
}

/* BODY */
.timesheet-table-clean tbody td {
    padding: 10px;
    border: 1px solid #e0e0e0;
    color: #333;
}

/* ROW HOVER */
.timesheet-table-clean tbody tr:hover {
    background: #f9fafb;
}

/* INPUT FIX */
.timesheet-table-clean input,
.timesheet-table-clean select,
.timesheet-table-clean textarea {
    width: 100%;
    min-width: 100px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}