/* Afdelings-links + faner */
#gf-employee-depts{overflow-x:auto;white-space:nowrap;margin-bottom:10px;font-size:.95rem}
#gf-employee-depts .gf-dept-link{font-family:'Montserrat',sans-serif;text-decoration:none;color:#000;padding:0 4px;transition:color .2s}
#gf-employee-depts .gf-dept-link.active,
#gf-employee-depts .gf-dept-link:hover{font-weight:700}
#gf-employee-tabs{overflow-x:auto;white-space:nowrap;margin-bottom:4px}
.gf-tab{font-family:'Montserrat',sans-serif;padding:6px 14px;margin-right:10px;border:1px solid #000;background:#000;color:#fff;cursor:pointer}
.gf-tab.active{background:#fff;color:#000}

/* Badge */
.mobile-month-badge{display:none;font-family:'Montserrat',sans-serif;font-size:1rem;margin:8px 0;text-transform:capitalize}
@media (max-width:1000px){ .mobile-month-badge{display:block} .fc .fc-toolbar-title{display:none!important} }
@media (min-width:1000px){ .mobile-month-badge{display:none!important} }

/* Paneler */
.gf-tab-panel{display:none}
.gf-tab-panel.active{display:block}

/* --- Layout: ingen intern scroll på selve containeren --- */
#gf-employee-calendar{overflow:visible}

/* Bevar selve grid-linjerne */
.fc-theme-standard th, .fc-theme-standard td{ border-color:#ddd }

/* Dag-baggrunde (farv HELE dag-td som i admin) */
#gf-employee-calendar .fc .fc-daygrid-day{ background:#efefef !important; }
#gf-employee-calendar .fc .fc-daygrid-day.fc-day-today{ background:#FFF6CC !important; }

/* Sektionens container-td (kroppen) – samme baggrund, så der ikke anes en stribe */
#gf-employee-calendar .fc table.fc-scrollgrid > tbody > tr.fc-scrollgrid-section.fc-scrollgrid-section-body > td{
  background:#efefef !important;
  vertical-align:top !important;
  padding:0 !important;
  border:0 !important;
}

/* Admin-lignende bundplads i dagcellerne */
#gf-employee-calendar .fc .fc-daygrid-day-frame{
  position:relative;
  padding-bottom:34px;
  background:transparent !important;
}
#gf-employee-calendar .fc .fc-daygrid-day-bottom{ margin-bottom:12px; }
#gf-employee-calendar .fc .fc-daygrid-day-events > .fc-daygrid-event-harness:last-child{ margin-bottom:14px; }

/* Dagceller klipper deres indhold (vores kort ligger inde i rammen) */
.fc .fc-daygrid-day, .fc .fc-daygrid-day-frame{
  overflow:hidden!important; box-sizing:border-box;
}

/* Skjul FullCalendars standard-dots; vi har vores egen dot */
.fc .fc-event-dot, .fc .fc-daygrid-event-dot{ display:none!important }

/* Event-wrapper – transparent (ramme/padding ligger på det indre kort) */
.fc .fc-event{
  border:0!important; border-radius:0!important; padding:0!important;
  background:transparent!important;
  display:flex!important; flex-direction:column; align-items:center; justify-content:center;
}

/* Indre “kort” som aldrig bløder ud over cellen */
.fc .fc-event-title.gf-card{
  width:100%; box-sizing:border-box;
  display:flex!important; flex-direction:column; align-items:center; text-align:center;
  font-family:'Montserrat',sans-serif; font-size:.85rem; line-height:1.1;
  white-space:normal!important; overflow-wrap:break-word; text-wrap:balance;
  box-shadow:inset 0 0 0 1px #333; margin:2px 2px; padding:10px 8px;
}

/* Nul mellemrum mellem underlinjer */
.fc .fc-event-title.gf-card > div{ margin:0 }

/* Dot + spacing */
.shift-dot{ width:10px; height:10px; border-radius:50%; margin:0 auto 6px !important }
.fc .fc-event-title .gf-name-line{ margin-top:3px }
.fc .fc-event-title .gf-time{ margin-top:3px }
.fc .fc-event-title .gf-name-line.gf-open{ color:#000; font-weight:700; letter-spacing:.02em }

/* Wrapping på navne */
.fc .fc-event-title>div.gf-name-line{ width:100%; max-width:100% }
.fc .fc-event-title>div.gf-name-line strong{ display:inline-block; max-width:100%; white-space:normal; word-break:keep-all }

/* Knapper – default farver */
.gf-shift-button{
  display:block;
  margin:8px auto 0;
  padding:4px 8px;
  border:1px solid transparent;          /* så vi kan fade til sort kant på hover */
  border-radius:4px;
  color:#fff;
  cursor:pointer;
  font-family:'Montserrat',sans-serif;
  font-size:.8rem;
  transition:
    transform .15s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
  will-change: transform;
}
.gf-shift-button[data-action="claim"]{ background:#4CAF50; }
.gf-shift-button[data-action="swap"]{  background:#2196F3; }
.gf-shift-button[data-action="take"]{  background:#FF9800; }

.gf-shift-button:disabled{
  background:#999 !important;
  cursor:default;
  transform:none;
  color:#fff;
  border-color:transparent;
}

/* Hover/grow + inverter farver (kun på devices der reelt har hover) */
@media (hover:hover){
  .gf-shift-button:not(:disabled):hover{
    transform: scale(1.05);
    background:#fff !important;
    color:#000 !important;
    border-color:#000;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
  }
}

/* Tastatur-fokus: samme look som hover */
.gf-shift-button:focus-visible{
  outline:2px solid #000;
  outline-offset:2px;
  transform: scale(1.03);
  background:#fff !important;
  color:#000 !important;
  border-color:#000;
}

/* Mobil-tap-feedback */
.gf-shift-button:not(:disabled):active{
  transform: scale(0.98);
}

/* Respektér “reduce motion” */
@media (prefers-reduced-motion: reduce){
  .gf-shift-button{ transition:none; }
}

/* —— Fix: fjern Hello Elementor's tabel-bundmargin KUN inde i medarbejder-kalenderen —— */
#gf-employee-calendar .fc table {
  margin: 0 !important;
  margin-block: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Hvis temaet giver den nederste body-td en anden baggrund, udlign den */
#gf-employee-calendar .fc table.fc-scrollgrid > tbody > tr.fc-scrollgrid-section.fc-scrollgrid-section-body > td {
  background: transparent !important;
}

/* === Mobil: få alle tre faner til at passe på én linje uden scroll === */
@media (max-width: 640px){
  #gf-employee-tabs{
    display: flex;
    gap: 4px;                 /* lille afstand mellem faner */
    overflow-x: visible;      /* stop vandret scroll */
    white-space: normal;      /* må gerne bryde normalt */
  }
  .gf-tab{
    flex: 1 1 0;              /* del bredden ligeligt */
    min-width: 0;             /* må gerne krympe */
    font-size: 14px;          /* lidt mindre skrift */
    padding: 6px 6px;         /* smallere knapper */
    line-height: 1.2;
    text-align: center;
  }
}

@media (max-width: 360px){
  .gf-tab{
    font-size: 13px;          /* endnu et lille hak ned på helt små mobiler */
    padding: 6px 6px;
  }
}