/**
 * Mine Shift Intelligence — Layout, Shell & Grid System
 * PT Bina Sarana Sukses
 */

.app {
  min-height: 100vh;
}

.workspace {
  min-width: 0;
  width: 100%;
}

/* Topbar Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(211, 224, 237, 0.9);
  box-shadow: 0 2px 12px rgba(38, 68, 100, 0.04);
}

.topbar-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Brand & Logos */
.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.logo-slot {
  width: 52px;
  height: 40px;
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow2);
  flex-shrink: 0;
}

.logo-slot img {
  max-width: 92%;
  max-height: 84%;
  object-fit: contain;
}

.logo-fallback {
  font-weight: 900;
  color: #28629d;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.app-brand strong {
  font-size: 16px;
  margin: 0 0 2px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.app-brand small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

/* Network & Sync Status in Topbar */
.network-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #f0f4f8;
  color: var(--muted);
  border: 1px solid var(--line);
}

.network-pill .net-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.network-pill.slow .net-dot {
  background: var(--amber);
}

.network-pill.error .net-dot {
  background: var(--red);
}

.refresh-status {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* Topbar navigation and controls */
.topbar-context {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.control-bar {
  padding: 9px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.top-actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.top-actions .select {
  min-width: 140px;
}

.top-actions #shiftSelect {
  min-width: 160px;
}

.date-range-control { position: relative; }
.date-range-button { min-width: 190px; text-align: left; cursor: pointer; }
.range-calendar[hidden] { display: none; }
.range-calendar { position: absolute; z-index: 100; top: calc(100% + 8px); left: 0; width: min(340px, 92vw); padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); box-shadow: 0 16px 38px rgba(0,0,0,.28); }
.range-calendar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; text-transform: capitalize; }
.range-calendar-head button { border: 0; background: transparent; font-size: 24px; cursor: pointer; color: var(--blue); }
.range-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.range-weekday { font-size: 11px; font-weight: 700; color: var(--muted); padding: 5px 0; }
.range-day { border: 0; border-radius: 8px; min-height: 37px; background: transparent; cursor: pointer; color: var(--text); }
.range-day:hover, .range-day:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.range-day.outside { color: var(--muted); }
.range-day.in-range { background: var(--blue-subtle); }
.range-day.range-edge, .range-day.range-pending { color: #fff; background: var(--blue); font-weight: 800; }
.range-calendar-help { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.range-calendar-error { margin: 8px 0 0; color: var(--red, #b42318); font-size: 12px; font-weight: 600; }

/* Main Shell */
.shell {
  max-width: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 18px 24px 40px;
}

/* Headline */
.headline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 2px 0 14px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
}

.headline h2 {
  font-size: 28px;
  line-height: 1.1;
  margin: 4px 0 4px;
  letter-spacing: -0.035em;
}

.headline p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.headline-meta {
  text-align: right;
  flex-shrink: 0;
}

.headline-meta b {
  display: block;
  font-size: 12px;
  color: var(--text);
}

.headline-meta small {
  color: var(--muted);
  font-size: 11px;
}

/* Navigation Tabs */
.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  margin: 0;
  padding: 5px 24px;
  overflow-x: auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--line);
  background: #fff;
}

.tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #526779;
  padding: 10px 12px 9px;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  font-weight: 750;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.tab:hover {
  background: #f4f8fe;
  color: #1a5ca6;
  transform: none;
}

.tab.active {
  background: #eaf3ff;
  color: #1459ae;
  border-bottom-color: #2563eb;
  box-shadow: none;
}

/* Views & Animation */
.view {
  display: none;
  min-width: 0;
}

.view.active {
  display: block;
  animation: rise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rise {
  from {
    opacity: 0.25;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Grid System */
.grid {
  display: grid;
  gap: 13px;
}

.grid > *,
.card,
.section {
  min-width: 0;
}

.kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.two {
  grid-template-columns: 1.35fr 0.65fr;
}

.two-even {
  grid-template-columns: 1fr 1fr;
}

.three {
  grid-template-columns: repeat(3, 1fr);
}

.four {
  grid-template-columns: repeat(4, 1fr);
}

/* Card & Section Shells */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.section {
  padding: 16px 18px;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.section-head h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 800;
}

.section-head small {
  color: var(--muted);
  font-size: 11px;
}

.section-head .hint {
  font-size: 10px;
  color: #7890a8;
  background: #f2f6fa;
  border: 1px solid #e2eaf2;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-weight: 750;
  letter-spacing: 0.04em;
}