:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --muted:#666;
  --shadow: 0 8px 26px rgba(27,31,35,0.08);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --proj-row-height:48px;
  --leave-row-height:48px;
}

html,body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  height:100%;margin:0;background:var(--bg);color:#111;
}

/* ---------- HEADER ---------- */
.site-header{
  width:100%;
  background:white;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
  position:relative;
  padding:12px 20px;
  height:78px;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:5;
}
.site-header .title{font-size:20px;font-weight:700;text-align:center;}
.site-header .header-right{position:absolute;right:20px;top:50%;transform:translateY(-50%);text-align:right;}
.site-header .header-right img{height:50px;max-width:180px;object-fit:contain;display:block;}
.site-header .header-links{margin-top:6px;font-size:13px;color:var(--muted)}
.site-header .header-links a{color:#0b74ff;text-decoration:none;margin-left:8px}
.site-header .header-links a:hover{text-decoration:underline;}

/* ---------------- MAIN LAYOUT ---------------- */
.page{
  width: 100%;
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 20px 40px;
  min-height: calc(100vh - 120px);
  display:flex;
  gap:20px;
  box-sizing:border-box;
  align-items:flex-start;
  overflow:auto;
}
.left{
  width: 360px;
  min-width: 280px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.right{
  flex:1;
  min-width: 320px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card{background:var(--card);padding:14px;border-radius:12px;box-shadow:var(--shadow);box-sizing:border-box}
h1{margin:0 0 4px 0;font-size:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.logo-wrap{display:flex;align-items:center;gap:10px}
.logo-preview{height:44px; max-width:220px; object-fit:contain; border-radius:6px}

.controls{display:flex;flex-direction:column;gap:8px}
label{font-size:13px;color:var(--muted)}
input[type=file]{font-size:13px}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;border:none;background:#0b74ff;color:#fff;cursor:pointer}
.btn.ghost{background:transparent;color:#0b74ff;border:1px solid rgba(11,116,255,0.12)}
.muted{color:var(--muted);font-size:13px}

.zones{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.zone{padding:12px;border-radius:10px;min-height:90px}
.zone-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.zone-title{font-weight:700}
.list{display:flex;flex-direction:column;gap:8px;}
.person{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,0.02)}
.arrow{cursor:pointer;border:none;background:transparent;font-size:14px;padding:4px 6px}

.green{background:linear-gradient(90deg,#e7f9ed,#f1fff6)}
.yellow{background:linear-gradient(90deg,#fff9e6,#fffbf0)}
.red{background:linear-gradient(90deg,#fff1f1,#fff6f6)}

/* popup */
.popup{position:fixed;z-index:60;background:#fff;padding:12px;border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,0.12);min-width:260px;max-width:520px;max-height:70vh;overflow:auto}
.popup .close{float:right;border:none;background:transparent;font-size:14px;cursor:pointer}
.popup .section-title{font-weight:700;margin-top:8px;font-size:13px;color:#333}
.popup ul{margin:8px 0 0 18px;padding:0;color:#222}
.popup li{margin-bottom:6px;font-size:14px}

.role-switch{display:flex;gap:8px;align-items:center}
.admin-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

@media (max-width:1100px){
  .page{flex-direction:column;height:auto;padding-bottom:40px;max-width:100%}
  .left{width:100%} .right{width:100%}
  .logo-preview{height:36px}
}

@media print{
  @page { size: landscape; }
  .site-header{display:none}
}

/* Tables */
.schedule-table{width:100%;border-collapse:collapse;margin-top:8px; table-layout: fixed; word-break: break-word;}
.schedule-table th,.schedule-table td{padding:8px;border-bottom:1px solid #eee;text-align:left;font-size:13px; white-space:normal; vertical-align:top;}
.schedule-table th{font-weight:700;background:transparent}
.no-schedule{color:var(--muted);font-size:13px}
#scheduleContent{
  max-height: calc( (var(--proj-row-height) * 5) + 56px );
  min-height: calc( (var(--proj-row-height) * 1) + 56px );
  overflow-y: auto; overflow-x: hidden; padding-right: 6px; box-sizing: border-box;
}
.schedule-table thead th{ position: sticky; top: 0; background: #fff; z-index: 2; }

/* Projects table */
.projects-card{ display:flex; flex-direction:column; gap:10px; }
.projects-controls{ display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.projects-filter{ display:flex; gap:8px; align-items:center; }
.projects-table-container{
  border-radius:8px; overflow:hidden; border:1px solid #eee; background:#fff;
  max-height: calc( (var(--proj-row-height) * 5) + 56px );
  min-height: calc( (var(--proj-row-height) * 2) + 56px );
  overflow-y:auto;
}
.projects-table{ width:100%; border-collapse:collapse; table-layout: fixed; }
.projects-table th, .projects-table td{ padding:10px 12px; border-bottom:1px solid #f0f0f0; font-size:14px; white-space:normal; vertical-align:middle; word-break:break-word; }
.projects-table thead th{ position:sticky; top:0; background:#fff; z-index:2; font-weight:700; border-bottom:1px solid #e6e6e6; }
.projects-table tbody tr{ height: var(--proj-row-height); }
.projects-empty{ padding:16px; color:var(--muted) }

.status-pill{ display:inline-block; padding:6px 8px; border-radius:999px; font-size:13px; font-weight:600; }
.status-wip{ background:#fff6e6; color:#a36b00; border:1px solid rgba(163,107,0,0.08) }
.status-completed{ background:#ecfdf5; color:#0f7a3b; border:1px solid rgba(15,122,59,0.08) }

/* Achievements */
.ach-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:8px 6px; border-bottom:1px solid #f5f5f5; }
.ach-left{ flex:1; }
.ach-title{ font-weight:700; display:block; margin-bottom:4px; }
.ach-personnel{ font-size:13px; color:var(--muted); display:block; margin-bottom:6px;}
.ach-detail{ font-style:italic; color:#222; margin-top:6px; display:none; }
.ach-toggle{ cursor:pointer; background:transparent; border:none; font-size:16px; padding:6px; }

/* Leave */
.leave-card{ display:flex; flex-direction:column; gap:10px; }
.leave-controls{ display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.leave-filter{ display:flex; gap:8px; align-items:center; }
.leave-table-container{
  border-radius:8px; overflow:hidden; border:1px solid #eee; background:#fff;
  max-height: calc( (var(--leave-row-height) * 5) + 56px );
  min-height: calc( (var(--leave-row-height) * 2) + 56px );
  overflow-y:auto;
}
.leave-table{ width:100%; border-collapse:collapse; table-layout: fixed; }
.leave-table th, .leave-table td{ padding:10px 12px; border-bottom:1px solid #f0f0f0; font-size:14px; white-space:normal; vertical-align:middle; word-break:break-word;}
.leave-table thead th{ position:sticky; top:0; background:#fff; z-index:2; font-weight:700; border-bottom:1px solid #e6e6e6; }
.leave-table tbody tr{ height: var(--leave-row-height); }
.leave-empty{ padding:16px; color:var(--muted) }

/* Traffic Light Navigation - UPDATED */
.traffic-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.nav-label {
  font-weight: 700;
  font-size: 15px;
  color: #333;
  text-align: center;
  min-width: 150px;
}
.nav-btn {
  background: var(--bg);
  border: 1px solid #ddd;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.2s;
}
.nav-btn:hover:not(:disabled) {
  background: #e6e9ef;
  color: #111;
}
.nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* NEW: Date Picker Dropdown */
.nav-select {
  font-weight: 700;
  font-size: 14px;
  color: #333;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  max-width: 220px;
  outline: none;
}
.nav-select:hover {
  border-color: #aaa;
}


.info-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #999;
  background: #fff;
  color: #555;
  font-size: 12px;
  font-weight: bold;
  font-family: serif; 
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  transition: all 0.2s ease;
}
.info-icon-btn:hover {
  background: #eee;
  border-color: #666;
  color: #000;
}

.list{display:flex;flex-direction:column;gap:8px;}
.person{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,0.02)}
.arrow{cursor:pointer;border:none;background:transparent;font-size:14px;padding:4px 6px}

.green{background:linear-gradient(90deg,#e7f9ed,#f1fff6)}
.yellow{background:linear-gradient(90deg,#fff9e6,#fffbf0)}
.red{background:linear-gradient(90deg,#fff1f1,#fff6f6)}

/* popup */
.popup{position:fixed;z-index:60;background:#fff;padding:12px;border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,0.12);min-width:260px;max-width:520px;max-height:70vh;overflow:auto}
.popup .close{float:right;border:none;background:transparent;font-size:14px;cursor:pointer}
.popup .section-title{font-weight:700;margin-top:8px;font-size:13px;color:#333}
.popup ul{margin:8px 0 0 18px;padding:0;color:#222}
.popup li{margin-bottom:6px;font-size:14px}

/* Criteria Popup Styling */
.criteria-content h3 { margin: 0 0 8px 0; font-size: 16px; font-weight: 700; color: #111; padding-right: 20px; }
.criteria-content ol { padding-left: 20px; margin: 5px 0; color: #333; }
.criteria-content li { margin-bottom: 6px; font-size: 14px; line-height: 1.4; }
.criteria-sublist { list-style-type: lower-alpha; margin-top: 4px !important; margin-bottom: 4px !important; }

/* Popup Colors matching Zones */
.popup.criteria-green {
  background: linear-gradient(90deg, #e7f9ed, #f1fff6);
  border: 1px solid #c3e6cb;
}
.popup.criteria-yellow {
  background: linear-gradient(90deg, #fff9e6, #fffbf0);
  border: 1px solid #ffeeba;
}
.popup.criteria-red {
  background: linear-gradient(90deg, #fff1f1, #fff6f6);
  border: 1px solid #f5c6cb;
}

.role-switch{display:flex;gap:8px;align-items:center}
.admin-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}



/* ---------- STRONG OVERRIDE: mobile horizontal scroll for lateness chart ---------- */
@media (max-width: 768px) {

  /* Ensure parent containers don't force an odd width */
  .lateness-chart-container,
  .lateness-chart-container * {
    box-sizing: border-box !important;
  }

  /* Reset any bad width previously applied (e.g. width:150%) */
  .lateness-chart-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;           /* allow horizontal scroll */
    overflow-y: hidden !important;         /* no vertical scroll */
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    padding-bottom: 12px !important;
    margin: 8px 0 !important;
    background: transparent !important;
  }

  /* Optional inner wrapper to control scroll area and avoid flex shrink issues */
  .lateness-chart-container .chart-inner-wrapper {
    display: inline-block;                 /* make it horizontally scrollable */
    white-space: nowrap;                   /* prevent wrapping */
    min-width: 760px;                      /* minimum scrollable width; adjust as needed */
    max-width: none !important;
    padding: 0 !important;
  }

  /* Canvas sizing — make canvas wide enough for scrolling but not clipped */
  .lateness-chart-container canvas,
  .lateness-chart-container canvas#latenessChart {
    width: auto !important;                /* let canvas internal width stay as drawn */
    min-width: 760px !important;           /* same as wrapper; increase if your chart is wider */
    max-width: none !important;
    height: 380px !important;              /* keep intended height */
    display: inline-block !important;
  }

  /* Prevent ancestor flex rules from shrinking the chart area */
  .page .right,
  .page .right .card,
  .page .right .card * {
    min-width: 0 !important;
  }

  /* Clean mobile scrollbar styling (optional) */
  .lateness-chart-container::-webkit-scrollbar { height: 6px; }
  .lateness-chart-container::-webkit-scrollbar-track { background: transparent; }
  .lateness-chart-container::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 6px; }

  /* If some ancestor has overflow:hidden, try to relax it (use carefully) */
  .page,
  .page > .right,
  .page > .left {
    overflow-x: visible !important;
  }
}

/* ---------- Desktop: ensure chart remains responsive and not forced to huge widths ---------- */
@media (min-width: 769px) {
  .lateness-chart-container {
    overflow: hidden;
    width: 100%;
  }
  .lateness-chart-container canvas { width: 100% !important; height: 380px !important; max-width: 100% !important; }
}




@media (max-width:1100px){
  .page{flex-direction:column;height:auto;padding-bottom:40px;max-width:100%}
  .left{width:100%} .right{width:100%}
  .logo-preview{height:36px}
}

/* Enhanced Mobile Styles */
@media (max-width:768px){
  :root{
    --proj-row-height:auto;
    --leave-row-height:auto;
  }
  
  body{font-size:15px;}
  
  /* Header adjustments */
  .site-header{
    height:auto;
    min-height:70px;
    padding:12px 16px;
    flex-direction:column;
    gap:10px;
  }
  .site-header .title{font-size:18px;margin-bottom:8px;}
  .site-header .header-right{
    position:static;
    transform:none;
    width:100%;
    text-align:center;
  }
  .site-header .header-right img{height:40px;margin:0 auto;}
  .site-header .header-links{font-size:12px;margin-top:4px;}
  
  /* Page layout */
  .page{
    padding:12px 12px 30px;
    margin:12px 0;
    gap:16px;
  }
  
  /* Cards */
  .card{
    padding:12px;
    border-radius:10px;
  }
  
  h1{font-size:17px;margin-bottom:8px;}
  
  /* Typography improvements */
  .muted, label{font-size:14px;line-height:1.4;}
  
  /* Controls and buttons */
  .controls{gap:10px;}
  .btn{
    padding:10px 14px;
    font-size:15px;
    min-height:44px;
    border-radius:10px;
  }
  .btn.ghost{padding:9px 13px;}
  
  /* Traffic Light Navigation */
  .traffic-nav{
    flex-direction:column;
    gap:12px;
    padding:12px;
  }
  .nav-label{
    font-size:16px;
    min-width:auto;
    width:100%;
  }
  .nav-btn{
    padding:8px 16px;
    font-size:14px;
    min-width:80px;
  }
  .nav-select{
    font-size:15px;
    padding:8px 10px;
    max-width:100%;
    width:100%;
  }
  
  /* Zones */
  .zones{gap:10px;margin-top:8px;}
  .zone{
    padding:12px;
    min-height:auto;
  }
  .zone-header{margin-bottom:10px;}
  .zone-title{font-size:15px;}
  .person{
    padding:10px;
    font-size:15px;
    line-height:1.4;
  }
  .arrow{font-size:16px;padding:6px 8px;}
  
  /* Tables - Projects */
  .projects-controls, .leave-controls{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .projects-filter, .leave-filter{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  .projects-filter select, .leave-filter select{
    width:100%;
    font-size:15px;
    padding:10px;
  }
  
  .projects-table-container, .leave-table-container{
    max-height:400px;
    border-radius:10px;
  }
  
  .projects-table th, .projects-table td,
  .leave-table th, .leave-table td{
    padding:12px 10px;
    font-size:10px; 
    line-height:1.4;
  }
  
  .projects-table tbody tr,
  .leave-table tbody tr{
    height:auto;
    min-height:54px;
  }

  /* Enable FULL horizontal scroll in Projects Table on mobile */
@media (max-width:768px){

  .projects-table-container {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    display: block;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }

  .projects-table {
    width: max-content !important;
    min-width: 900px !important; /* Adjust based on your columns */
    border-collapse: collapse;
  }

  .projects-table th,
  .projects-table td {
    white-space: nowrap !important;
    padding: 12px 10px;
    font-size: 14px;
  }

}

  
  .status-pill{
    font-size:12px;
    padding:5px 10px;
    display:inline-block;
    white-space:nowrap;
  }
  
  .schedule-wrapper,
  #scheduleContent {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: block;
  }

  /* Table becomes wider than container */
  .schedule-table {
    min-width: 950px !important; /* Increase width so scrolling activates */
    width: max-content;
  }

  .schedule-table th,
  .schedule-table td {
    white-space: nowrap !important;
  }
  
  /* Achievements */
  .ach-item{
    padding:10px 8px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .ach-title{font-size:15px;}
  .ach-personnel{font-size:14px;}
  .ach-toggle{
    align-self:flex-end;
    margin-top:-30px;
  }
  
  /* Popup */
  .popup{
    max-width:calc(100vw - 32px);
    max-height:calc(100vh - 40px);
    font-size:15px;
    padding:16px;
  }
  .popup li{font-size:15px;line-height:1.5;}
  
  /* Form elements */
  input[type=file]{
    font-size:14px;
    padding:8px 0;
  }
  
  /* Role and admin controls */
  .role-switch, .admin-row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .role-switch button, .admin-row button{
    width:100%;
  }
  
  /* Logo and top bar */
  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
  }
  .logo-wrap{
    width:100%;
    justify-content:center;
  }
  .logo-preview{
    height:40px;
    max-width:100%;
  }
}




/* Extra small devices */
@media (max-width:480px){
  .site-header .title{font-size:16px;}
  h1{font-size:16px;}
  
  .projects-table th, .projects-table td,
  .leave-table th, .leave-table td,
  .schedule-table th, .schedule-table td{
    padding:10px 6px;
    font-size:13px;
  }
  
  .btn{font-size:14px;padding:9px 12px;}
  .zone-title{font-size:14px;}
  .person{font-size:14px;}
  
  .nav-btn{
    font-size:13px;
    padding:8px 12px;
  }
}