@import url("../dimens/global.css");
@import url("../colours.css");

@font-face {
  font-family: "App-Medium";
  src: url("../fonts/Nunito-Medium.ttf");
}
@font-face {
  font-family: "App-Regular";
  src: url("../fonts/Nunito-Light.ttf");
}

/* Basic reset and layout */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.loading {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #ddd;
  border-top-color: var(--text-small-titles);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

body {
  font-family: App-Regular, App-Medium ;
  background-color: var(--bg-colour);
  height: 100%;
}

/* Dark background */
body.dark-background {
  background-color: var(--bg-colour-dark);
}

.subtitle {
  font-size: var(--subtitle);
  color: var(--text-regular);
  font-family: App-Regular;
}

.titles {
  color: var(--text-regular);
  font-family: App-Medium;
  font-size: var(--title);
}

.headers {
  color: var(--text-small-titles);
  font-family: App-Medium;
  font-size: var(--headers);
}

.save-btn {
  display: block; 
  width: 66%;
  margin: 20px auto 40px;
  align-items: center;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background:  var(--app-theme);
  color: var(--white);
  font-size: var(--save-btn);
  font-family: App-Medium;
  cursor: pointer;
}

/* MAIN BODY */
.content {
  height: calc(98vh - var(--top-bar-height, 0px));
  overflow-y: auto;
  padding: var(--content-padding);
  background-color: var(--bg-colour);
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--bg-colour);
}


.circle-img {
  width: 34px;     
  height: 34px;

  border-radius: 50%;         /* makes the div circular */
  display: flex;              /* center content */
  justify-content: center;    /* horizontal center */
  align-items: center;        /* vertical center */
  padding: 5px;               /* space between div border and image */
  overflow: hidden;   
  background-color: var(--text-small-titles);

  cursor: pointer;


  box-shadow: 0 2px 6px rgba(0, 0, 0, var(--top-bar-buttons-shadow));
}
.circle-img img {
  max-width: 100%;           /* scale image to fit inside circle */
  max-height: 100%;          /* scale image to fit inside circle */
  /* background-color: #000; */
  padding-bottom: 2px;
  padding-top: 2px;
  margin-right: 3px;
}
.circle-img:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, calc(var(--top-bar-buttons-shadow, 0.12) * 1.5));
}


/* ─── Floating overlay (shared by employee + workplace pickers) ─── */
/* .picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.picker-overlay[hidden] {
  display: none;
} */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay[hidden] {
  display: none; /* ✅ explicitly wins over .overlay's display: flex */
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.overlay-panel {
  position: relative;
  width: min(700px, 92vw);
  height: min(80vh, 720px);
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--silver-background);
  flex-shrink: 0;
}

.overlay-title {
  font-family: App-Medium;
  font-size: 17px;
  color: var(--text-regular);
}

.overlay-close-btn {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-regular);
  cursor: pointer;
  padding: 4px 8px;
}

.overlay-frame {
  flex: 1;
  border: none;
  width: 100%;
}

/* ─── EMPLOYEE OVERLAY HEADER — global.css's .overlay-header uses
   justify-content: space-between, which was built for exactly 2 children
   (title + close button). With a 3rd child (Select All) added, that same
   rule spreads all three evenly across the row instead of clustering
   title+button together on the left. Scoped override, this overlay only. */
#payrollRulesEmployeeOverlayId .overlay-header {
  justify-content: flex-start;
  gap: 12px;
}

#payrollRulesEmployeeOverlayId .overlay-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#payrollRulesEmployeeOverlayId .overlay-close-btn {
  margin-left: auto;
}

#scheduleRangeOverlayId .overlay-panel {
  width: min(1200px, 95vw);
  height: min(900px, 90vh);
  max-width: none;
  max-height: none;
}

#scheduleOverlayId {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

#scheduleOverlayId .overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

#scheduleOverlayId .overlay-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

#scheduleOverlayId .overlay-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
}

/* ─── SELECT ALL BUTTON ─────────────────────────────────────────────── */
.overlay-select-all-btn {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--headers-colour);
  border-radius: 8px;
  background-color: var(--white);
  font-family: App-Medium;
  font-size: 14px;
  color: var(--headers-colour);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.overlay-select-all-btn:hover {
  background-color: var(--headers-colour);
  color: var(--white);
}

.overlay-select-all-btn:active {
  transform: scale(0.97);
}


@media (max-width: 700px) {
  .overlay-panel {
    width: 96vw;
    height: 90vh;
  }
}