/* ============================================================
   JADWAL CREW — style.css
   Gantt-style crew timetable for SIMAS platform
   ============================================================ */

/* ---- View Section visibility ---- */
.view-section { display:flex; flex-direction:column; gap:0; }
.view-section.hidden { display:none !important; }

/* ---- View Toggle Group ---- */
.view-toggle-group {
  display:flex; border:1px solid var(--border); border-radius:8px;
  overflow:hidden; background:var(--card);
}
.view-toggle-btn {
  padding:0.35rem 0.875rem; font-size:0.8125rem; font-weight:600;
  cursor:pointer; border:none; background:transparent; color:var(--muted);
  font-family:inherit; transition:all 0.15s; display:flex; align-items:center;
  gap:0.375rem; border-right:1px solid var(--border);
}
.view-toggle-btn:last-child { border-right:none; }
.view-toggle-btn:hover { background:rgba(37,99,235,0.06); color:var(--text); }
.view-toggle-btn.active {
  background:var(--navy); color:#fff;
}

/* ---- Date Navigator ---- */
.date-nav {
  display:flex; align-items:center; gap:0;
  border:1px solid var(--border); border-radius:8px; overflow:hidden;
  background:var(--card);
}
.date-nav-btn {
  padding:0.35rem 0.625rem; border:none; background:transparent;
  color:var(--muted); cursor:pointer; font-size:0.8125rem; transition:all 0.15s;
}
.date-nav-btn:hover { background:rgba(37,99,235,0.06); color:var(--accent); }
.date-nav-label {
  padding:0 0.625rem; font-size:0.8125rem; font-weight:600; color:var(--text);
  border-left:1px solid var(--border); border-right:1px solid var(--border);
  white-space:nowrap;
}

/* ---- KPI Compact Row ---- */
.kpi-compact-row {
  display:flex; align-items:center; gap:0;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:0.625rem 1.25rem; flex-wrap:wrap; gap:0.5rem;
}
.kpi-compact-item { display:flex; align-items:center; gap:10px; padding:0 1rem; }
.kpi-compact-icon {
  width:32px; height:32px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-size:0.8125rem; flex-shrink:0;
}
.kpi-compact-val { font-size:1.125rem; font-weight:800; font-family:'JetBrains Mono',monospace; line-height:1; }
.kpi-compact-lbl { font-size:0.625rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px; }
.kpi-compact-sep { width:1px; height:36px; background:var(--border); flex-shrink:0; }

/* ---- Legend ---- */
.legend-item {
  display:flex; align-items:center; gap:5px; font-size:0.6875rem; color:var(--muted); white-space:nowrap;
}
.legend-dot {
  width:12px; height:12px; border-radius:3px; flex-shrink:0; display:inline-block;
}

/* ============================================================
   GANTT CHART — Daily View
   ============================================================ */

.gantt-wrapper {
  overflow:hidden; display:flex; flex-direction:column;
  flex:1; min-height:0;
}

.gantt-outer {
  display:flex; flex-direction:column;
  overflow:hidden; flex:1;
  position:relative;
}

/* ---- Header Row ---- */
.gantt-header-row {
  display:flex; flex-shrink:0;
  border-bottom:2px solid var(--border);
  background:var(--card);
  position:sticky; top:0; z-index:30;
}
.gantt-name-header {
  width:160px; min-width:160px; flex-shrink:0;
  padding:0.5rem 0.75rem;
  background:var(--navy);
  display:flex; align-items:center;
  border-right:1px solid rgba(255,255,255,0.15);
  position:sticky; left:0; z-index:31;
}
.gantt-name-header-text {
  font-size:0.6875rem; font-weight:700; color:rgba(255,255,255,0.8);
  text-transform:uppercase; letter-spacing:0.06em;
}
.gantt-timeline-header {
  display:flex; flex:1; position:relative;
  background:rgba(27,58,107,0.04);
  overflow:hidden;
}
.gantt-hour-label {
  width:60px; min-width:60px; flex-shrink:0;
  font-size:0.625rem; font-weight:700; color:var(--muted);
  font-family:'JetBrains Mono',monospace;
  padding:0.5rem 0 0.375rem 4px;
  border-right:1px solid var(--border);
  user-select:none;
}
.gantt-hour-label.current { color:var(--red); }

/* ---- Gantt Body (scrollable area) ---- */
.gantt-body {
  flex:1; overflow-y:auto; overflow-x:auto;
  position:relative;
}
.gantt-scroll-inner {
  min-width:calc(160px + 1440px);
  position:relative;
}

/* ---- Group separator ---- */
.gantt-group-header {
  display:flex; align-items:center;
  background:rgba(27,58,107,0.06);
  border-bottom:1px solid var(--border);
  border-top:2px solid var(--border);
  position:sticky; left:0; z-index:12;
  padding:0; min-width:calc(160px + 1440px);
}
.gantt-group-label {
  width:160px; min-width:160px; flex-shrink:0;
  padding:0.375rem 0.75rem;
  font-size:0.6875rem; font-weight:700; color:var(--navy);
  text-transform:uppercase; letter-spacing:0.06em;
  background:rgba(27,58,107,0.08);
  border-right:1px solid var(--border);
  white-space:nowrap;
}
.gantt-group-line {
  flex:1; height:1px; margin:0 12px;
  background:linear-gradient(to right, var(--border), transparent);
}

/* ---- Gantt Row ---- */
.gantt-row {
  display:flex; align-items:stretch;
  height:52px; border-bottom:1px solid rgba(226,232,240,0.7);
  transition:background 0.1s;
}
.gantt-row:hover { background:rgba(37,99,235,0.025); }

/* ---- Name Cell (sticky) ---- */
.gantt-name-cell {
  width:160px; min-width:160px; flex-shrink:0;
  display:flex; align-items:center; gap:8px;
  padding:0 8px;
  background:var(--card);
  border-right:1px solid var(--border);
  position:sticky; left:0; z-index:10;
  transition:background 0.1s;
}
.gantt-row:hover .gantt-name-cell { background:#f8fafc; }

.crew-avatar {
  width:28px; height:28px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.625rem; font-weight:700; color:#fff;
}
.crew-info { flex:1; min-width:0; }
.crew-name {
  font-size:0.75rem; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.crew-role {
  font-size:0.5625rem; color:var(--muted); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.crew-fatigue-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-left:auto;
}

/* ---- Row Area (timeline right side) ---- */
.gantt-row-area {
  flex:1; position:relative; height:52px;
  width:1440px; min-width:1440px;
}

/* Hour grid lines inside row area */
.gantt-row-area::before {
  content:'';
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 59px,
    var(--border) 59px,
    var(--border) 60px
  );
  opacity:0.5; pointer-events:none; z-index:0;
}

/* ---- Off Day Row ---- */
.gantt-row.off-day .gantt-row-area {
  background:repeating-linear-gradient(
    45deg,
    #f8fafc,
    #f8fafc 5px,
    #eef1f5 5px,
    #eef1f5 10px
  );
}
.gantt-row.off-day .gantt-name-cell { background:#f8fafc; }

/* ---- Sick Row ---- */
.gantt-row.sick-row .gantt-row-area {
  background:rgba(239,68,68,0.05);
}
.gantt-row.sick-row .gantt-name-cell { background:rgba(239,68,68,0.04); }

/* ---- Duty Bar ---- */
.duty-bar {
  position:absolute;
  top:8px; height:36px;
  border-radius:6px;
  display:flex; align-items:center;
  padding:0 10px;
  font-size:11px; font-weight:600;
  color:#fff; white-space:nowrap;
  overflow:hidden; cursor:pointer;
  transition:opacity 0.15s, box-shadow 0.15s, transform 0.1s;
  z-index:5;
  user-select:none;
}
.duty-bar:hover {
  opacity:0.88;
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
  transform:translateY(-1px);
}
.duty-bar .bar-code { font-weight:700; letter-spacing:0.02em; }
.duty-bar .bar-time {
  font-size:9px; font-weight:500; opacity:0.85;
  font-family:'JetBrains Mono',monospace; margin-left:5px;
}
.duty-bar .bar-icon { margin-right:4px; font-size:10px; }

/* Status variants */
.duty-bar.published { background:#10B981; }
.duty-bar.draft { background:#3B82F6; }
.duty-bar.standby { background:#94A3B8; color:#334155; }
.duty-bar.completed { background:#10B981; opacity:0.5; }

/* Constraint warning: amber left border */
.duty-bar.warn-cert {
  border-left:3px solid #F59E0B;
  background:#3B82F6;
  box-shadow:inset 2px 0 0 #F59E0B;
}
.duty-bar.warn-cert::after {
  content:'⚠';
  position:absolute; right:6px;
  font-size:10px; color:#FCD34D;
}

/* Fatigue critical: pulsing red border */
.duty-bar.fatigue-crit {
  border-left:3px solid #EF4444;
  animation:bar-pulse 2s ease infinite;
}
@keyframes bar-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,0.3); }
  50% { box-shadow:0 0 0 4px rgba(239,68,68,0); }
}

/* ---- Rest Bar ---- */
.rest-bar {
  position:absolute;
  top:18px; height:16px;
  background:repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 3px,
    rgba(148,163,184,0.2) 3px, rgba(148,163,184,0.2) 6px
  );
  border-radius:3px;
  z-index:2; pointer-events:none;
}

/* ---- Current Time Line ---- */
.time-now-line {
  position:absolute; top:0; bottom:0;
  width:2px; background:#EF4444;
  z-index:20; pointer-events:none;
}
.current-time-label {
  position:absolute; top:-1px;
  transform:translateX(-50%);
  background:#EF4444; color:#fff;
  font-size:9px; font-weight:700;
  font-family:'JetBrains Mono',monospace;
  padding:1px 4px; border-radius:3px;
  white-space:nowrap;
}

/* Row status badges in name col */
.row-status-badge {
  display:inline-flex; align-items:center;
  padding:1px 6px; border-radius:100px;
  font-size:9px; font-weight:700;
  margin-top:2px; white-space:nowrap;
}
.row-status-off { background:rgba(100,116,139,0.15); color:#475569; }
.row-status-sick { background:rgba(239,68,68,0.15); color:#991B1B; }
.row-status-standby { background:rgba(245,158,11,0.15); color:#92400E; }

/* ============================================================
   WEEKLY VIEW
   ============================================================ */

.weekly-grid {
  display:grid;
  grid-template-columns:160px repeat(7, 160px);
  min-width:calc(160px + 1120px);
}

.weekly-col-header {
  padding:0.5rem 0.5rem;
  background:rgba(27,58,107,0.05);
  border-bottom:2px solid var(--border);
  border-right:1px solid var(--border);
  text-align:center;
}
.weekly-col-header.name-col {
  background:var(--navy);
  color:rgba(255,255,255,0.8);
  font-size:0.6875rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
  text-align:left; padding:0.5rem 0.75rem;
}
.weekly-col-date { font-size:0.8125rem; font-weight:700; color:var(--text); }
.weekly-col-dow { font-size:0.625rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.weekly-col-header.today .weekly-col-date { color:var(--accent); }
.weekly-col-header.today { background:rgba(37,99,235,0.05); }

.weekly-name-cell {
  padding:0 8px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--card);
  display:flex; align-items:center; gap:8px;
  min-height:64px;
  position:sticky; left:0; z-index:5;
}
.weekly-duty-cell {
  padding:4px; border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--card); min-height:64px;
  display:flex; flex-direction:column; gap:3px;
  position:relative;
}
.weekly-duty-cell.today { background:rgba(37,99,235,0.03); }
.weekly-duty-cell.off-day {
  background:repeating-linear-gradient(
    45deg, #f8fafc, #f8fafc 4px, #eef1f5 4px, #eef1f5 8px
  );
}
.weekly-duty-cell.sick-cell { background:rgba(239,68,68,0.05); }

.weekly-duty-pill {
  border-radius:4px; padding:2px 6px;
  font-size:0.625rem; font-weight:600;
  color:#fff; cursor:pointer;
  display:flex; flex-direction:column; gap:1px;
  transition:opacity 0.15s;
  line-height:1.3;
}
.weekly-duty-pill:hover { opacity:0.82; }
.weekly-duty-pill.published { background:#10B981; }
.weekly-duty-pill.draft { background:#3B82F6; }
.weekly-duty-pill.standby { background:#94A3B8; color:#334155; }

.weekly-badge {
  font-size:0.5625rem; font-weight:700; padding:1px 5px;
  border-radius:100px; align-self:flex-start; margin-top:2px;
}
.weekly-badge-libur { background:rgba(100,116,139,0.15); color:#475569; }
.weekly-badge-cuti { background:rgba(139,92,246,0.15); color:#5B21B6; }
.weekly-badge-sakit { background:rgba(239,68,68,0.15); color:#991B1B; }

.weekly-group-header {
  grid-column:1 / -1;
  padding:0.375rem 0.875rem;
  background:rgba(27,58,107,0.06);
  border-bottom:1px solid var(--border);
  border-top:2px solid var(--border);
  font-size:0.6875rem; font-weight:700;
  color:var(--navy); text-transform:uppercase; letter-spacing:0.06em;
}

/* ============================================================
   MONTHLY CALENDAR VIEW
   ============================================================ */

.masinis-cal-label {
  font-size:0.8125rem; font-weight:700; color:var(--text);
  padding:0 8px;
}

.monthly-cal {
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:1rem;
}

.monthly-dow-header {
  background:var(--navy);
  color:rgba(255,255,255,0.8);
  text-align:center;
  padding:0.5rem;
  font-size:0.6875rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
}

.cal-day {
  background:var(--card);
  min-height:86px;
  padding:4px 6px;
  position:relative;
  transition:background 0.1s;
}
.cal-day:hover { background:#f8fafc; }
.cal-day.other-month { background:#f8fafc; }
.cal-day.other-month .cal-day-num { color:#CBD5E1; }
.cal-day.today { background:rgba(37,99,235,0.04); }
.cal-day.today .cal-day-num {
  background:var(--accent); color:#fff;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.cal-day.has-duty { }
.cal-day.libur { background:#fafafa; }
.cal-day.cuti { background:rgba(139,92,246,0.04); }
.cal-day.sakit { background:rgba(239,68,68,0.05); }

.cal-day-num {
  font-size:0.75rem; font-weight:700; color:var(--text);
  margin-bottom:3px; display:block; line-height:20px;
}

.duty-pill {
  display:block; border-radius:4px;
  padding:2px 5px; font-size:0.5625rem; font-weight:600;
  margin-bottom:2px; line-height:1.4; cursor:pointer;
  transition:opacity 0.15s;
}
.duty-pill:hover { opacity:0.8; }
.duty-pill.published { background:rgba(16,185,129,0.15); color:#047857; border-left:2px solid #10B981; }
.duty-pill.draft { background:rgba(59,130,246,0.15); color:#1E40AF; border-left:2px solid #3B82F6; }
.duty-pill.standby { background:rgba(148,163,184,0.2); color:#475569; }

.cal-kpi-dot {
  width:5px; height:5px; border-radius:50%;
  position:absolute; bottom:5px; right:5px;
}
.cal-badge {
  display:inline-block; border-radius:3px; padding:1px 5px;
  font-size:0.5625rem; font-weight:700; margin-bottom:2px;
}
.cal-badge-sakit { background:rgba(239,68,68,0.15); color:#991B1B; }
.cal-badge-cuti { background:rgba(139,92,246,0.15); color:#5B21B6; }
.cal-badge-libur { background:rgba(100,116,139,0.12); color:#475569; }

/* Monthly Stats */
.monthly-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0.75rem;
}
.monthly-stat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:0.75rem;
  display:flex; align-items:center; gap:10px;
}
.monthly-stat-icon {
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.875rem; flex-shrink:0;
}
.monthly-stat-val {
  font-size:1.25rem; font-weight:800;
  font-family:'JetBrains Mono',monospace; line-height:1;
}
.monthly-stat-lbl { font-size:0.625rem; color:var(--muted); margin-top:2px; text-transform:uppercase; letter-spacing:0.04em; }

/* ============================================================
   DUTY TOOLTIP POPUP
   ============================================================ */

.tooltip-overlay {
  display:none; position:fixed; inset:0; z-index:200;
}
.tooltip-overlay.open { display:block; }

.duty-tooltip {
  display:none; position:fixed;
  z-index:201;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; width:300px;
  box-shadow:0 16px 48px rgba(0,0,0,0.15);
  overflow:hidden;
}
.duty-tooltip.open { display:block; }

.duty-tooltip-hdr {
  padding:0.75rem 1rem;
  background:var(--navy);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:8px;
}
.duty-tooltip-title { font-size:0.875rem; font-weight:700; color:#fff; }
.duty-tooltip-sub { font-size:0.6875rem; color:rgba(255,255,255,0.65); margin-top:2px; }
.duty-tooltip-close {
  background:rgba(255,255,255,0.1); border:none; color:rgba(255,255,255,0.7);
  width:24px; height:24px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; flex-shrink:0; transition:background 0.15s;
}
.duty-tooltip-close:hover { background:rgba(255,255,255,0.2); color:#fff; }

.duty-tooltip-body { padding:0.75rem 1rem; }
.tt-row {
  display:flex; align-items:flex-start; gap:8px;
  padding:0.3rem 0; border-bottom:1px solid rgba(0,0,0,0.04);
}
.tt-row:last-child { border-bottom:none; }
.tt-lbl {
  font-size:0.6875rem; color:var(--muted); white-space:nowrap;
  min-width:72px; display:flex; align-items:center; gap:5px;
}
.tt-val { font-size:0.75rem; font-weight:600; color:var(--text); flex:1; }
.tt-val.mono { font-family:'JetBrains Mono',monospace; }

.duty-tooltip-footer {
  padding:0.625rem 1rem; border-top:1px solid var(--border);
  display:flex; gap:6px; justify-content:flex-end;
  background:#fafafa;
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */

.toast {
  position:fixed; bottom:20px; right:20px;
  background:var(--navy); color:#fff;
  padding:0.625rem 1.125rem; border-radius:8px;
  font-size:0.8125rem; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  z-index:500; opacity:0; transform:translateY(8px);
  transition:opacity 0.2s, transform 0.2s;
  pointer-events:none; display:flex; align-items:center; gap:8px;
}
.toast.show { opacity:1; transform:translateY(0); }

/* ============================================================
   UTILITY OVERRIDES for this page
   ============================================================ */

/* Override .main to not have gap/padding at bottom for Gantt full-height */
.main {
  gap:0.625rem;
}

/* Gantt wrapper fills available vertical space */
#viewHarian {
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}
#viewHarian .gantt-wrapper {
  flex:1; min-height:0;
}
#viewHarian .gantt-outer {
  flex:1; min-height:0; max-height:calc(100vh - 230px);
  overflow-y:auto; overflow-x:auto;
}

/* Scrollbar for gantt */
.gantt-outer::-webkit-scrollbar { width:6px; height:6px; }
.gantt-outer::-webkit-scrollbar-track { background:transparent; }
.gantt-outer::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:3px; }

/* Weekly view scroll */
#viewMingguan { overflow-x:auto; }

/* Monthly view */
#viewBulanan .card-body { padding:0.875rem; }

/* Responsive tweak: don't overflow main controls */
@media (max-width: 1200px) {
  .kpi-compact-row { flex-wrap:wrap; }
}