:root {
  --color-background: #f0f0f0;
  --color-primary: #d6d6d6;
  --color-secondary: #f0f0f0;
  --color-accent: #b8b8b8;
  --color-text: #000000;
}
* {
  box-sizing: border-box;
}

body {
  font-family: "Lucida Sans", sans-serif;
  font-size: 14px;
  margin: 0px; 
  padding: 0px;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header'
    'menu'
    'main'
    'footer';
  gap: 0px;  
}

.header {
  grid-area: header;
  background-color: var(--color-primary);
  /* text-align: center; */
  color: var(--color-text);
}
.header .logo {
  display: inline-block;
  padding: 0 0 0 10px;
}
.header .settings {
  display: inline-block;
  padding: 0 10px 0 0;
  float: right;
}

.header > h1 {
  font-size: 40px;
}
hr {
  border: 0;
  text-decoration: none;
  margin: 0;
  padding: 0;
  height: 1px;
  background-color: var(--color-accent);
}

.menu {
  grid-area: menu;
  background-color: var(--color-secondary);
  max-width: 150px;
  }
  
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
}

.menu li:hover {
  background-color: var(--color-accent);
}
  
.content {
  grid-area: main;
  padding: 0 10px 0 10px;
  height: calc(100vh - 116px);
}

.content > h1 {
  font-size: 30px;
  margin-bottom: 7px;
}

.content > p {
  margin-bottom: 7px;
}


.footer {
  grid-area: footer;
  background-color: var(--color-primary);
  color: var(--color-text);
  text-align: center;
}

@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .footer {grid-area: 4 / span 6;}
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 100px 1fr 200px;
    grid-template-areas:
      'header header header'
      'menu main main'
      'footer footer footer';
  }
  .header {grid-area: header;}
  .menu {grid-area: menu;}
  .content {grid-area: main;}
  .footer {grid-area: footer;}
}
a {
  color: inherit;
  text-decoration: none;
}

        .page-break {
            page-break-before: always;
        }
            .schedule-structured .weekend-cell { background: #fff0f0 !important; }
    /* Modal styles */
    #modal-add-shift { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); align-items:center; justify-content:center; z-index:9999; }
    #modal-add-shift.show { display:flex; }
    #modal-add-shift .modal-window { background:#fff; width:520px; border-radius:6px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,0.2); }
    #modal-add-shift .modal-close-link { background:transparent; border:none; font-size:18px; cursor:pointer; text-decoration:none; color:#333; }
    .schedule-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
    .schedule-radio { display:flex; align-items:flex-start; gap:8px; padding:8px; border-radius:6px; cursor:pointer; border:1px solid #f0f0f0; background:#fafafa; }
    .schedule-radio input[type="radio"] { margin-top:4px; }
    .schedule-radio .meta { color:#666; font-size:12px; margin-top:2px; }
        .dept-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:12px; }
  .dept-body.collapsed { display: none !important; }
  .dept-toggle { transition: transform .12s ease; }

    /* Row hover: make entire employee row white */
    .schedule-structured table td,
    .schedule-structured table th { transition: background-color .12s ease; }

    .schedule-structured table tr:hover > td,
    .schedule-structured table tr:hover > th { background: #fff !important; }

    /* Ensure sticky first column also turns white on hover */
    .schedule-structured table tr:hover > td[style*="position:sticky"] {
        background: #fff !important;
        z-index: 2;
    }