/* =========================================================
   SHIFTLYNX SCHEDULE VIEW
   GLASS CARD REDESIGN
========================================================= */

:root {
  --schedule-bg: #020812;
  --schedule-surface: rgba(8, 20, 35, 0.7);
  --schedule-surface-strong: rgba(10, 25, 43, 0.9);
  --schedule-card: rgba(11, 29, 50, 0.64);
  --schedule-card-hover: rgba(16, 40, 68, 0.82);

  --schedule-border: rgba(129, 177, 229, 0.12);
  --schedule-border-strong: rgba(74, 163, 255, 0.3);

  --schedule-text: #f6f9ff;
  --schedule-muted: #8da5c2;

  --schedule-blue: #2f8cff;
  --schedule-cyan: #31d8ff;
  --schedule-green: #34d399;
  --schedule-orange: #fb923c;
  --schedule-purple: #a78bfa;
  --schedule-red: #fb7185;

  --glass-shadow:
    0 24px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  --soft-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22);

  --blur: blur(18px);
}

/* =========================================================
   PAGE LAYOUT
========================================================= */

.main {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(35, 118, 255, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 18% 88%,
      rgba(0, 201, 255, 0.07),
      transparent 34%
    ),
    var(--schedule-bg);
}

.topbar {
  margin-bottom: 24px;
}

.topbar h2 {
  color: var(--schedule-text);
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  letter-spacing: -0.04em;
}

.topbar p {
  margin-top: 6px;
  color: var(--schedule-muted);
}

/* =========================================================
   TOOLBARS
========================================================= */

.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 18px;
  padding: 16px 18px;

  border: 1px solid var(--schedule-border);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 31, 53, 0.72),
      rgba(5, 15, 27, 0.66)
    );

  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);

  box-shadow: var(--glass-shadow);
}

.schedule-toolbar > div {
  min-width: 0;
}

.schedule-period-title {
  margin: 0;
  color: var(--schedule-text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.schedule-period-subtitle {
  margin: 5px 0 0;
  color: var(--schedule-muted);
  font-size: 13px;
}

.view-buttons,
.toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.view-buttons button,
.toolbar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;
  padding: 0 15px;

  border: 1px solid rgba(133, 176, 224, 0.14);
  border-radius: 12px;

  background: rgba(6, 18, 32, 0.64);
  color: #c9d8ea;

  font: inherit;
  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.view-buttons button:hover,
.toolbar-actions button:hover {
  transform: translateY(-1px);

  border-color: rgba(62, 157, 255, 0.36);

  background: rgba(20, 57, 98, 0.42);
  color: #ffffff;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(47, 140, 255, 0.05);
}

.view-buttons button:active,
.toolbar-actions button:active {
  transform: translateY(0);
}

.view-buttons .primary-btn,
.toolbar-actions .primary-btn {
  border-color: rgba(63, 156, 255, 0.48);

  background:
    linear-gradient(
      145deg,
      #2f8cff,
      #1768df
    );

  color: #ffffff;

  box-shadow:
    0 10px 24px rgba(47, 140, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* =========================================================
   SCHEDULE OUTER CONTAINER
========================================================= */

.schedule-layout {
  position: relative;

  border: 1px solid var(--schedule-border);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 23, 40, 0.66),
      rgba(3, 11, 20, 0.76)
    );

  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);

  box-shadow: var(--glass-shadow);

  overflow: hidden;
}

.schedule-layout::before {
  content: "";

  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(47, 140, 255, 0.08),
      transparent 28%
    );
}

.schedule-board {
  position: relative;
  z-index: 1;

  padding: 14px;
  overflow-x: auto;
}

#scheduleTable {
  width: 100%;
}

/* =========================================================
   MONTH VIEW
========================================================= */

.month-table {
  display: grid;
  grid-template-columns: repeat(7, minmax(155px, 1fr));

  min-width: 1120px;

  gap: 10px;
}

.month-head {
  padding: 13px 14px;

  border: 1px solid rgba(127, 172, 223, 0.11);
  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(17, 45, 76, 0.82),
      rgba(9, 28, 49, 0.72)
    );

  color: #dcecff;

  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.month-cell {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  min-height: 155px;
  padding: 12px;

  border: 1px solid rgba(126, 174, 226, 0.1);
  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 21, 37, 0.72),
      rgba(2, 12, 22, 0.74)
    );

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: var(--schedule-text);
  text-align: left;

  cursor: pointer;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  overflow: hidden;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.month-cell::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(47, 140, 255, 0.07),
      transparent 32%
    );
}

.month-cell:hover {
  z-index: 2;

  transform: translateY(-2px);

  border-color: rgba(63, 157, 255, 0.28);

  background:
    linear-gradient(
      145deg,
      rgba(12, 34, 58, 0.86),
      rgba(4, 17, 30, 0.86)
    );

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(47, 140, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.month-date {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: 31px;
  height: 31px;
  margin-left: auto;
  margin-bottom: 8px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.035);
  color: #f3f7fd;

  font-size: 13px;
  font-weight: 850;
}

.month-cell.muted-month {
  opacity: 0.42;
}

.month-cell.muted-month:hover {
  opacity: 0.75;
}

/* =========================================================
   TODAY STYLING
========================================================= */

.month-cell.today,
.week-day-column.today {
  border-color: rgba(47, 140, 255, 0.44);

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(47, 140, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.month-cell.today .month-date,
.week-day-column.today .week-day-heading strong {
  background:
    linear-gradient(
      145deg,
      #2f8cff,
      #1768df
    );

  color: #ffffff;

  box-shadow:
    0 8px 20px rgba(47, 140, 255, 0.28);
}

/* =========================================================
   SHIFT CARDS
========================================================= */

.month-shift {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title avatars"
    "time avatars";

  align-items: center;
  gap: 2px 8px;

  margin-top: 6px;
  padding: 8px 9px 8px 11px;

  min-height: 48px;

  border: 1px solid rgba(72, 157, 255, 0.22);
  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      rgba(14, 47, 81, 0.86),
      rgba(7, 27, 48, 0.88)
    );

  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  overflow: hidden;

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.month-shift::before {
  content: "";

  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;

  width: 3px;

  border-radius: 0 3px 3px 0;

  background: var(--schedule-blue);
}

.month-shift:hover {
  transform: translateY(-1px);

  border-color: rgba(72, 157, 255, 0.4);

  background:
    linear-gradient(
      145deg,
      rgba(18, 58, 98, 0.94),
      rgba(8, 32, 55, 0.94)
    );
}

.month-shift strong {
  grid-area: title;

  min-width: 0;

  color: #ffffff;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-shift-time {
  grid-area: time;

  color: #829bb8;

  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;

  white-space: nowrap;
}

.shift-employees {
  grid-area: avatars;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin: 0;
}

.employee-avatar {
  display: grid;
  place-items: center;

  width: 24px;
  height: 24px;

  margin-left: -4px;

  border: 2px solid rgba(6, 22, 39, 0.95);
  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      #318cff,
      #1b63dd
    );

  color: #ffffff;

  font-size: 9px;
  font-weight: 850;

  box-shadow:
    0 5px 12px rgba(47, 140, 255, 0.18);
}

.employee-avatar:first-child {
  margin-left: 0;
}
.schedule-time-off-card {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 6px;
  padding: 7px 9px;

  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      rgba(74, 53, 126, 0.58),
      rgba(35, 25, 70, 0.66)
    );

  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  text-align: left;
}

.time-off-card-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;

  width: 25px;
  height: 25px;

  border: 1px solid rgba(211, 199, 255, 0.2);
  border-radius: 8px;

  background: rgba(167, 139, 250, 0.2);
  color: #efeaff;

  font-size: 9px;
  font-weight: 850;
}

.time-off-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.time-off-card-content strong {
  overflow: hidden;

  color: #f4efff;

  font-size: 10px;
  font-weight: 800;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.time-off-card-content span {
  overflow: hidden;

  color: #b8a9db;

  font-size: 9px;
  font-weight: 600;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.week-time-off {
  display: flex;
  flex-direction: column;
  gap: 7px;

  margin-bottom: 9px;
}

.week-time-off:empty {
  display: none;
}

/* =========================================================
   SHIFT COLOUR VARIATIONS
========================================================= */

.month-shift.blue::before {
  background: #2f8cff;
}

.month-shift.teal::before {
  background: #22d3ee;
}

.month-shift.green::before {
  background: #34d399;
}

.month-shift.orange::before {
  background: #fb923c;
}

.month-shift.purple::before {
  background: #a78bfa;
}

.month-shift.red::before {
  background: #fb7185;
}

.month-shift.teal {
  border-color: rgba(34, 211, 238, 0.19);

  background:
    linear-gradient(
      145deg,
      rgba(10, 66, 77, 0.75),
      rgba(5, 29, 42, 0.82)
    );
}

.month-shift.green {
  border-color: rgba(52, 211, 153, 0.19);

  background:
    linear-gradient(
      145deg,
      rgba(11, 70, 56, 0.74),
      rgba(5, 33, 29, 0.82)
    );
}

.month-shift.orange {
  border-color: rgba(251, 146, 60, 0.19);

  background:
    linear-gradient(
      145deg,
      rgba(88, 47, 15, 0.74),
      rgba(42, 22, 8, 0.82)
    );
}

.month-shift.purple {
  border-color: rgba(167, 139, 250, 0.19);

  background:
    linear-gradient(
      145deg,
      rgba(63, 44, 107, 0.76),
      rgba(28, 20, 53, 0.84)
    );
}

.current-employee-shift {
  border-color: rgba(49, 216, 255, 0.42);

  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(49, 216, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

/* =========================================================
   CLOSED DAYS
========================================================= */

.closed-calendar-day {
  border-color: rgba(251, 113, 133, 0.2);

  background:
    linear-gradient(
      145deg,
      rgba(45, 18, 28, 0.74),
      rgba(20, 9, 17, 0.78)
    );
}

.closed-calendar-day:hover {
  border-color: rgba(251, 113, 133, 0.34);

  background:
    linear-gradient(
      145deg,
      rgba(65, 24, 38, 0.82),
      rgba(28, 12, 22, 0.86)
    );
}

.closed-day-banner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: 2px;

  margin-top: 6px;
  padding: 8px 9px;

  border: 1px solid rgba(251, 113, 133, 0.23);
  border-radius: 12px;

  background:
    rgba(98, 29, 48, 0.28);

  color: #ffd4dc;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.closed-day-banner strong {
  font-size: 11px;
  font-weight: 800;
}

.closed-day-banner span {
  color: rgba(255, 205, 215, 0.68);

  font-size: 9px;
}

/* =========================================================
   WEEK VIEW
========================================================= */

.week-table {
  display: grid;
  grid-template-columns: repeat(7, minmax(175px, 1fr));

  min-width: 1225px;

  gap: 12px;
}

.week-day-column {
  min-height: 520px;
  padding: 14px;

  border: 1px solid var(--schedule-border);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 21, 37, 0.76),
      rgba(3, 12, 22, 0.8)
    );

  color: var(--schedule-text);
  text-align: left;

  cursor: pointer;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.028);

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.week-day-column:hover {
  transform: translateY(-2px);

  border-color: rgba(57, 154, 255, 0.3);

  background:
    linear-gradient(
      145deg,
      rgba(13, 34, 57, 0.88),
      rgba(5, 17, 30, 0.88)
    );
}

.week-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 14px;
}

.week-day-heading span {
  color: var(--schedule-muted);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.week-day-heading strong {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.04);
  color: #f6f9ff;

  font-size: 14px;
  font-weight: 850;
}

.week-shifts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.week-empty {
  display: grid;
  place-items: center;

  min-height: 90px;

  border: 1px dashed rgba(137, 176, 220, 0.11);
  border-radius: 14px;

  color: #617792;

  font-size: 12px;
}

/* =========================================================
   DAY MODAL BACKDROP
========================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 22px;

  background:
    rgba(0, 4, 10, 0.76);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal-backdrop.show {
  display: flex;
}

.day-modal {
  width: min(820px, 100%);
  max-height: calc(100vh - 44px);

  border: 1px solid rgba(116, 169, 227, 0.16);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 27, 46, 0.96),
      rgba(4, 14, 25, 0.98)
    );

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);

  overflow: hidden;
}

.day-modal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  padding: 22px 24px;

  border-bottom: 1px solid rgba(126, 174, 226, 0.1);

  background:
    linear-gradient(
      145deg,
      rgba(17, 42, 70, 0.56),
      rgba(7, 20, 35, 0.42)
    );
}

.day-modal .modal-header h3 {
  margin: 0;

  color: #ffffff;

  font-size: 21px;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.day-modal .modal-header p {
  margin: 6px 0 0;

  color: var(--schedule-muted);

  font-size: 13px;
}

#closeDayModal {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  padding: 0;

  border: 1px solid rgba(135, 175, 220, 0.13);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.035);
  color: #9fb2c8;

  font-size: 24px;

  cursor: pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

#closeDayModal:hover {
  border-color: rgba(251, 113, 133, 0.3);

  background: rgba(251, 113, 133, 0.09);
  color: #ff9cab;
}

/* =========================================================
   MODAL TABS
========================================================= */

.day-tabs {
  display: flex;
  gap: 8px;

  padding: 16px 24px 0;
}

.day-tabs button {
  min-height: 38px;
  padding: 0 16px;

  border: 1px solid rgba(132, 174, 220, 0.12);
  border-radius: 11px;

  background: rgba(6, 18, 31, 0.6);
  color: #9fb2c8;

  font: inherit;
  font-size: 13px;
  font-weight: 750;

  cursor: pointer;
}

.day-tabs .primary-btn {
  border-color: rgba(47, 140, 255, 0.42);

  background:
    linear-gradient(
      145deg,
      #2f8cff,
      #1768df
    );

  color: #ffffff;
}

/* =========================================================
   MODAL CONTENT
========================================================= */

#dayModalContent {
  max-height: calc(100vh - 210px);
  padding: 20px 24px 24px;

  overflow-y: auto;
}

#dayModalContent::-webkit-scrollbar {
  width: 8px;
}

#dayModalContent::-webkit-scrollbar-track {
  background: transparent;
}

#dayModalContent::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background: rgba(126, 174, 226, 0.18);
}

/* =========================================================
   DAY SHIFT CARDS
========================================================= */

.day-shift-card {
  margin-bottom: 16px;
  padding: 18px;

  border: 1px solid rgba(129, 175, 224, 0.12);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 31, 52, 0.72),
      rgba(5, 18, 31, 0.78)
    );

  box-shadow:
    var(--soft-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.day-shift-card:last-child {
  margin-bottom: 0;
}

.day-shift-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.day-shift-header h4 {
  margin: 0;

  color: #ffffff;

  font-size: 17px;
  font-weight: 840;
}

.day-shift-header .row-sub {
  margin-top: 5px;

  color: var(--schedule-muted);

  font-size: 12px;
}

.day-shift-header .badge {
  flex-shrink: 0;

  padding: 7px 10px;

  border: 1px solid rgba(49, 216, 255, 0.16);
  border-radius: 999px;

  background: rgba(49, 216, 255, 0.07);
  color: #9aefff;

  font-size: 11px;
  font-weight: 800;
}

/* =========================================================
   EMPLOYEE SECTIONS
========================================================= */

.shift-employee-section {
  margin-top: 20px;
}

.shift-employee-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 10px;

  color: #8fa7c3;

  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shift-employee-heading strong {
  display: grid;
  place-items: center;

  min-width: 27px;
  height: 27px;
  padding: 0 7px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.035);
  color: #d9e7f7;

  font-size: 11px;
}

.assigned-employee-list,
.available-employee-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.assigned-employee-chip {
  display: flex;
  align-items: center;
  gap: 9px;

  min-height: 46px;
  padding: 7px 8px 7px 9px;

  border: 1px solid rgba(49, 216, 255, 0.17);
  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(16, 69, 88, 0.42),
      rgba(7, 34, 50, 0.48)
    );

  color: #eafcff;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.assigned-employee-chip .avatar,
.available-employee-btn .avatar {
  display: grid;
  place-items: center;

  width: 31px;
  height: 31px;

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      #2f8cff,
      #1768df
    );

  color: #ffffff;

  font-size: 11px;
  font-weight: 850;
}

.assigned-employee-name {
  font-size: 13px;
  font-weight: 750;
}

.remove-assignment-btn {
  display: grid;
  place-items: center;

  width: 29px;
  height: 29px;
  margin-left: 2px;
  padding: 0;

  border: 1px solid rgba(251, 113, 133, 0.17);
  border-radius: 9px;

  background: rgba(251, 113, 133, 0.07);
  color: #ff9cac;

  font-size: 17px;

  cursor: pointer;
}

.remove-assignment-btn:hover {
  border-color: rgba(251, 113, 133, 0.34);

  background: rgba(251, 113, 133, 0.13);
}

.available-employee-btn {
  display: flex;
  align-items: center;
  gap: 9px;

  min-height: 46px;
  padding: 7px 12px 7px 9px;

  border: 1px solid rgba(134, 176, 222, 0.1);
  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(12, 29, 49, 0.68),
      rgba(5, 18, 31, 0.7)
    );

  color: #d9e7f7;

  font: inherit;
  font-size: 13px;
  font-weight: 720;

  cursor: pointer;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.available-employee-btn:hover {
  transform: translateY(-1px);

  border-color: rgba(47, 140, 255, 0.3);

  background:
    linear-gradient(
      145deg,
      rgba(19, 50, 83, 0.78),
      rgba(8, 27, 46, 0.78)
    );
}

.available-employee-btn strong {
  margin-left: 2px;

  color: var(--schedule-cyan);

  font-size: 17px;
}

.empty-assigned-state,
.empty-state {
  width: 100%;
  padding: 15px;

  border: 1px dashed rgba(131, 173, 219, 0.12);
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.018);
  color: #7187a1;

  font-size: 12px;
  text-align: center;
}

/* =========================================================
   DRAG AND DROP
========================================================= */

.assigned-employee-chip {
  cursor: grab;
  user-select: none;
}

.assigned-employee-chip:active {
  cursor: grabbing;
}

.sortable-assigned-list {
  min-height: 54px;
  padding: 3px;

  border-radius: 14px;
}

.shift-drag-ghost {
  opacity: 0.28;

  border: 1px dashed var(--schedule-cyan);

  background: rgba(49, 216, 255, 0.08);
}

.shift-drag-chosen {
  transform: scale(1.03);

  border-color: rgba(49, 216, 255, 0.42);

  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(49, 216, 255, 0.08);
}

.shift-drag-active {
  cursor: grabbing;
  opacity: 0.9;
}

/* =========================================================
   TIME OFF CARDS
========================================================= */

.timeoff-card {
  margin-bottom: 12px;
  padding: 16px;

  border: 1px solid rgba(167, 139, 250, 0.15);
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(54, 39, 92, 0.46),
      rgba(24, 18, 46, 0.55)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.timeoff-card strong {
  color: #f4efff;
}

.timeoff-card p {
  color: #a998c6;
}

/* =========================================================
   DISABLED STATES
========================================================= */

button:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 1000px) {
  .schedule-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-actions {
    width: 100%;
  }

  .schedule-board {
    padding: 10px;
  }
}

@media (max-width: 700px) {
  .schedule-toolbar {
    padding: 14px;
    border-radius: 16px;
  }

  .view-buttons,
  .toolbar-actions {
    width: 100%;
  }

  .view-buttons button {
    flex: 1;
  }

  .toolbar-actions button {
    flex: 1 1 calc(33.333% - 7px);
  }

  .schedule-layout {
    border-radius: 18px;
  }

  .month-table {
    grid-template-columns:
      repeat(7, minmax(125px, 1fr));

    min-width: 875px;
    gap: 8px;
  }

  .month-cell {
    min-height: 140px;
    padding: 9px;
    border-radius: 14px;
  }

  .month-head {
    padding: 11px 9px;
    border-radius: 11px;
  }

  .month-shift {
    padding: 8px 9px;
    border-radius: 12px;
  }

  .week-table {
    grid-template-columns:
      repeat(7, minmax(160px, 1fr));

    min-width: 1120px;
  }

  .day-modal {
    max-height: calc(100vh - 24px);
    border-radius: 20px;
  }

  .day-modal .modal-header {
    padding: 18px;
  }

  .day-tabs {
    padding: 14px 18px 0;
  }

  #dayModalContent {
    padding: 18px;
  }

  .day-shift-header {
    flex-direction: column;
  }

  .assigned-employee-chip,
  .available-employee-btn {
    width: 100%;
  }

  .remove-assignment-btn,
  .available-employee-btn strong {
    margin-left: auto;
  }
}

@media (max-width: 480px) {
  .toolbar-actions button {
    flex: 1 1 calc(50% - 6px);
  }

  .schedule-period-title {
    font-size: 16px;
  }

  .schedule-period-subtitle {
    font-size: 12px;
  }

  .day-modal {
    width: 100%;
  }
}
/* =========================================================
   STATUTORY HOLIDAYS
========================================================= */

.month-cell.holiday-calendar-day,
.week-day-column.holiday-calendar-day {

    border-color:
        rgba(255,70,70,.40);

    background:
    radial-gradient(
        circle at top right,
        rgba(255,70,70,.10),
        transparent 45%
    ),
    var(--panel);

}

.month-cell.holiday-calendar-day::before,
.week-day-column.holiday-calendar-day::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    inset 0 0 25px
      rgba(157, 72, 236, 0.075);
}

.month-cell.holiday-calendar-day.closed-calendar-day,
.week-day-column.holiday-calendar-day.closed-calendar-day {

    border-color:
        rgba(255,85,85,.55);

    box-shadow:
        inset 0 0 0 1px rgba(255,95,95,.15),
        0 0 28px rgba(255,65,65,.22);

}
.holiday-banner svg{

    color:#ff6262;

}
.month-cell.open-holiday-calendar-day,
.week-day-column.open-holiday-calendar-day {
  border-color:
    rgba(82, 178, 255, 0.25);
}

.closed-day-banner.holiday-banner {

    border-color: rgba(255,75,75,.45);

    color:#ffd6d6;

    background:linear-gradient(
        135deg,
        rgba(220,55,55,.24),
        rgba(120,18,18,.16)
    );

    box-shadow:
        0 0 18px rgba(255,70,70,.18);

}

.closed-day-banner.holiday-banner.company-open {
  border-color:
    rgba(80, 179, 255, 0.28);

  color: #bdeaff;

  background:
    rgba(43, 148, 224, 0.1);
}

.closed-day-banner-heading {
  display: flex;
  align-items: center;
  gap: 7px;
}

.closed-day-banner-heading svg {
  flex: 0 0 auto;

  width: 14px;
  height: 14px;
}

.closed-day-banner span {
  display: block;

  margin-top: 4px;

  opacity: 0.78;
}
.toolbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.toolbar-divider{
    width:1px;
    height:34px;
    background:rgba(255,255,255,.08);
    margin:0 6px;
}

.success-btn{
    background:#19b46b;
    color:white;
    border:none;
}

.success-btn:hover{
    background:#14945a;
}

.danger-btn{
    background:#a92b2b;
    color:white;
    border:none;
}

.danger-btn:hover{
    background:#8b2020;
}
.generation-summary {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;

  margin-top: 18px;
  text-align: left;
}

.generation-summary > div {
  padding: 13px;

  border: 1px solid
    rgba(125, 171, 218, 0.13);

  border-radius: 13px;

  background:
    rgba(8, 25, 43, 0.84);
}

.generation-summary strong,
.generation-summary span {
  display: block;
}

.generation-summary strong {
  color: #65d7ff;
  font-size: 1.05rem;
}

.generation-summary span {
  margin-top: 4px;

  color: #8297ad;
  font-size: 0.65rem;
}

.generation-summary
.generation-warning {
  border-color:
    rgba(255, 91, 101, 0.25);

  background:
    rgba(157, 38, 47, 0.12);
}

.generation-summary
.generation-warning strong {
  color: #ff8e97;
}
/* =========================================================
   SMART SCHEDULING GENERATION SUMMARY
========================================================= */

.generation-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  text-align: left;
}

.generation-summary > div {
  padding: 13px;
  border: 1px solid rgba(125, 171, 218, 0.13);
  border-radius: 13px;
  background: rgba(8, 25, 43, 0.84);
}

.generation-summary strong,
.generation-summary span {
  display: block;
}

.generation-summary strong {
  color: #65d7ff;
  font-size: 1.05rem;
}

.generation-summary span {
  margin-top: 4px;
  color: #8297ad;
  font-size: 0.65rem;
}

.generation-summary .generation-warning {
  border-color: rgba(255, 91, 101, 0.25);
  background: rgba(157, 38, 47, 0.12);
}

.generation-summary .generation-warning strong {
  color: #ff8e97;
}


/* SMART SCHEDULING WARNING REVIEW */
.generation-warning-panel { margin-top: 18px; text-align: left; }
.generation-warning-heading { margin-bottom: 10px; }
.generation-warning-heading strong,
.generation-warning-heading span { display: block; }
.generation-warning-heading strong { color: #eff8ff; font-size: .82rem; }
.generation-warning-heading span { margin-top: 3px; color: #7890a8; font-size: .65rem; }
.generation-warning-list { display: grid; gap: 9px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.generation-warning-item { border: 1px solid rgba(124,170,217,.13); border-radius: 13px; background: rgba(7,22,38,.82); overflow: hidden; }
.generation-warning-item.critical { border-color: rgba(255,91,101,.28); background: rgba(126,35,44,.1); }
.generation-warning-item.advisory { border-color: rgba(245,176,65,.22); }
.generation-warning-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px; cursor: pointer; list-style: none; }
.generation-warning-item summary::-webkit-details-marker { display: none; }
.generation-warning-item summary strong,
.generation-warning-item summary span { display: block; }
.generation-warning-item summary strong { color: #eef8ff; font-size: .74rem; }
.generation-warning-item summary > div > span { margin-top: 3px; color: #7890a8; font-size: .6rem; }
.generation-warning-count { flex: 0 0 auto; padding: 6px 8px; border-radius: 999px; color: #ffb7bd; background: rgba(220,61,74,.1); font-size: .58rem; font-weight: 850; }
.generation-warning-item.advisory .generation-warning-count { color: #ffd08a; background: rgba(221,139,35,.1); }
.generation-warning-body { padding: 0 13px 13px; border-top: 1px solid rgba(124,170,217,.08); }
.generation-warning-body p { margin: 11px 0; color: #91a6bc; font-size: .66rem; line-height: 1.45; }
.generation-warning-body ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.generation-warning-body li { padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.025); }
.generation-warning-body li strong,
.generation-warning-body li span { display: block; }
.generation-warning-body li strong { color: #dcecff; font-size: .65rem; }
.generation-warning-body li span { margin-top: 3px; color: #8095aa; font-size: .58rem; line-height: 1.4; }
.generation-no-candidates,
.generation-all-clear { padding: 12px; border-radius: 11px; color: #8298ad; background: rgba(255,255,255,.025); font-size: .64rem; text-align: center; }
.generation-all-clear { margin-top: 16px; color: #82e7bd; background: rgba(42,184,127,.08); }

/* =========================================================
   PAY PERIOD GUIDE
========================================================= */
.pay-period-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(66, 169, 255, 0.18);
  border-radius: 16px;
  background: rgba(8, 25, 42, 0.78);
}
.pay-period-guide-heading { display: flex; align-items: center; gap: 11px; min-width: 230px; }
.pay-period-guide-heading svg { width: 20px; height: 20px; color: #45c9ff; }
.pay-period-guide-heading strong, .pay-period-guide-heading span { display: block; }
.pay-period-guide-heading span { margin-top: 2px; color: #8faac0; font-size: 12px; }
.pay-period-guide-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pay-period-guide-chip { min-width: 145px; padding: 8px 11px; border-radius: 11px; border: 1px solid rgba(76, 201, 255, 0.22); }
.pay-period-guide-chip.period-0 { background: rgba(31, 123, 255, 0.10); }
.pay-period-guide-chip.period-1 { background: rgba(20, 201, 186, 0.09); }
.pay-period-guide-chip span, .pay-period-guide-chip strong { display: block; }
.pay-period-guide-chip span { color: #7f9bb2; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.pay-period-guide-chip strong { margin-top: 2px; color: #dff5ff; font-size: 12px; }
.month-date-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pay-period-boundary-label { padding: 4px 7px; border-radius: 999px; background: rgba(69, 201, 255, .14); color: #6ed7ff; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.month-cell.pay-period-0 { box-shadow: inset 0 3px 0 rgba(43, 133, 255, .22); }
.month-cell.pay-period-1 { box-shadow: inset 0 3px 0 rgba(19, 199, 179, .20); }
.month-cell.pay-period-start { border-left-color: rgba(69, 201, 255, .75); border-left-width: 2px; }
.month-cell.pay-period-end { border-right-color: rgba(69, 201, 255, .45); border-right-width: 2px; }
@media (max-width: 900px) {
  .pay-period-guide { align-items: flex-start; flex-direction: column; }
  .pay-period-guide-list { justify-content: flex-start; }
}

/* Smart scheduler overtime optimization summary */
.generation-optimization {
  display: grid;
  gap: 4px;
  margin: 16px 0 4px;
  padding: 13px 15px;
  border: 1px solid rgba(43, 213, 173, 0.25);
  border-radius: 12px;
  background: rgba(43, 213, 173, 0.08);
  text-align: left;
}

.generation-optimization strong {
  color: #7af2d1;
  font-size: 0.9rem;
}

.generation-optimization span {
  color: #a9bfd5;
  font-size: 0.78rem;
  line-height: 1.45;
}

.generation-optimization.has-warning {
  border-color: rgba(255, 184, 77, 0.3);
  background: rgba(255, 184, 77, 0.08);
}

.generation-optimization.has-warning strong {
  color: #ffd08a;
}


.schedule-time-off-card.unpaid-away {
  border-style: dashed;
  opacity: .86;
  background: rgba(99, 102, 241, .10);
}
.schedule-time-off-card.unpaid-away .time-off-card-content span { color: #aab7c8; }
.schedule-time-off-card.paid-away { background: rgba(139, 92, 246, .16); }


/* ShiftLynx V1.5.5 — explainable schedule assignments */
.assignment-why-btn {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid rgba(42, 190, 255, .34);
  border-radius: 999px;
  color: #62d5ff;
  background: rgba(20, 153, 224, .1);
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}
.assignment-why-btn:hover { background: rgba(20, 153, 224, .18); }
.schedule-why-dialog { text-align: left; color: #c9d7e7; }
.schedule-why-status { display: inline-flex; margin-bottom: 12px; padding: 6px 10px; border-radius: 999px; font-size: .72rem; font-weight: 850; }
.schedule-why-status.generated { color: #7ce5ff; background: rgba(25, 187, 242, .12); border: 1px solid rgba(25, 187, 242, .26); }
.schedule-why-status.manual { color: #b8c5d5; background: rgba(148, 163, 184, .1); border: 1px solid rgba(148, 163, 184, .2); }
.schedule-why-dialog ul { margin: 8px 0 0; padding-left: 20px; }
.schedule-why-dialog li { margin: 8px 0; line-height: 1.45; }
.schedule-why-move { margin: 4px 0 12px; color: #fff; font-weight: 750; }
.schedule-why-score { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(130, 170, 210, .16); color: #91a7bd; }


/* =========================================================
   V1.5 SPRINT 6.3.7.5 — COMPACT WEEK SCHEDULE FIX
========================================================= */

.schedule-board {
  padding: 10px;
}

.week-table {
  grid-template-columns:
    repeat(7, minmax(148px, 1fr));
  min-width: 1036px;
  gap: 8px;
}

.week-day-column {
  min-height: 0;
  padding: 10px;
  border-radius: 15px;
}

.week-day-column:hover {
  transform: translateY(-1px);
}

.week-day-heading {
  gap: 8px;
  margin-bottom: 9px;
}

.week-day-heading span {
  font-size: 10px;
}

.week-day-heading strong {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  font-size: 12px;
}

.week-shifts {
  gap: 7px;
}

.week-day-column .month-shift {
  min-height: 42px;
  margin-top: 0;
  padding: 7px 8px 7px 10px;
  border-radius: 10px;
}

.week-day-column .month-shift strong {
  font-size: 10px;
}

.week-day-column .schedule-shift-time {
  font-size: 8px;
}

.week-day-column .shift-employees {
  max-width: 70px;
}

.week-day-column .employee-avatar {
  width: 24px;
  height: 24px;
  font-size: 8px;
}

.week-empty {
  min-height: 64px;
  border-radius: 11px;
  font-size: 10px;
}

.week-time-off {
  display: grid;
  gap: 6px;
  margin-bottom: 7px;
}

.week-day-column .schedule-time-off-card {
  min-height: 40px;
  padding: 7px;
  border-radius: 10px;
}

.week-day-column .closed-day-banner {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 10px;
}

@media (min-width: 1450px) {
  .week-table {
    min-width: 0;
  }
}

@media (max-width: 1180px) {
  .week-table {
    grid-template-columns:
      repeat(7, minmax(142px, 1fr));
    min-width: 994px;
  }
}

@media (max-width: 760px) {
  .schedule-board {
    padding: 8px;
  }

  .week-table {
    gap: 7px;
  }

  .week-day-column {
    padding: 9px;
  }
}
.schedule-toolbar-redesign,
.schedule-status-redesign,
.schedule-pay-period-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 22, 38, 0.9);
}

.schedule-toolbar-redesign {
  justify-content: space-between;
  min-height: 66px;
  padding: 10px 12px;
  border-radius: 18px;
}

.schedule-view-toggle,
.schedule-date-navigation,
.schedule-build-actions,
.schedule-status-actions,
.schedule-pay-periods {
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-toolbar-redesign button,
.schedule-status-redesign button,
.schedule-pay-period-strip button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  color: #dce9f8;
  font-weight: 750;
  cursor: pointer;
}

.schedule-view-toggle .is-active,
.schedule-generate-button,
.schedule-publish-button {
  border-color: rgba(48, 151, 255, 0.45);
  background:
    linear-gradient(
      135deg,
      #2f8cff,
      #18c9ff
    );
  color: #06111d !important;
}

.schedule-current-period {
  min-width: 136px;
  text-align: center;
}

.schedule-current-period strong,
.schedule-current-period span {
  display: block;
}

.schedule-current-period strong {
  font-size: 0.9rem;
}

.schedule-current-period span {
  margin-top: 2px;
  color: #7f95ad;
  font-size: 0.67rem;
}

.schedule-status-redesign {
  justify-content: space-between;
  min-height: 74px;
  margin-top: 12px;
  padding: 12px 14px 12px 18px;
  overflow: hidden;
  border-radius: 18px;
}

.schedule-status-copy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
}

.schedule-status-copy h2,
.schedule-status-copy p {
  margin: 0;
}

.schedule-status-copy h2 {
  font-size: 1rem;
}

.schedule-status-copy p {
  margin-top: 4px;
  color: #8095ab;
  font-size: 0.7rem;
}

.schedule-status-badge {
  padding: 7px 10px;
  border: 1px solid rgba(157, 106, 255, 0.25);
  border-radius: 999px;
  background: rgba(142, 92, 255, 0.1);
  color: #c7a9ff;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-status-actions {
  position: relative;
  z-index: 2;
}

.schedule-return-button {
  color: #ff9aaa !important;
  border-color: rgba(255, 110, 132, 0.28) !important;
  background: rgba(255, 110, 132, 0.055) !important;
}

/* Subtle ShiftLynx logo watermark */
.schedule-status-redesign::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 250px;
  height: 250px;
  transform:
    translateY(-50%)
    scaleX(-1);

  background:
    url("/images/logo.png")
    center /
    contain
    no-repeat;

  opacity: 0.09;
  pointer-events: none;
}

.schedule-pay-period-strip {
  justify-content: space-between;
  min-height: 58px;
  margin-top: 12px;
  padding: 8px 10px 8px 15px;
  border-radius: 16px;
}

.schedule-pay-period-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedule-pay-period-title svg {
  width: 18px;
  height: 18px;
  color: #35d0ff;
}

.schedule-pay-period-title strong,
.schedule-pay-period-title span {
  display: block;
}

.schedule-pay-period-title strong {
  font-size: 0.78rem;
}

.schedule-pay-period-title span {
  margin-top: 2px;
  color: #7f95ad;
  font-size: 0.63rem;
}

.schedule-pay-periods button {
  min-width: 118px;
  min-height: 40px;
  text-align: left;
}

.schedule-pay-periods small,
.schedule-pay-periods strong {
  display: block;
}

.schedule-pay-periods small {
  color: #78a7d0;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-pay-periods strong {
  margin-top: 3px;
  font-size: 0.69rem;
}

.schedule-pay-periods .is-current {
  border-color: rgba(24, 201, 255, 0.34);
  background: rgba(24, 201, 255, 0.075);
}
.schedule-generate-button,
.schedule-publish-button {

    background:
        linear-gradient(
            135deg,
            #3798ff,
            #28b8ff
        );

    color:#fff;

    border:1px solid rgba(76,170,255,.35);

    box-shadow:
        0 8px 24px rgba(28,142,255,.20);

    transition:
        background .2s,
        transform .18s,
        box-shadow .2s;
}

.schedule-generate-button:hover,
.schedule-publish-button:hover{

    transform:translateY(-1px);

    box-shadow:
        0 14px 34px rgba(28,142,255,.28);

    background:
        linear-gradient(
            135deg,
            #47a4ff,
            #37c6ff
        );
}


/* =========================================================
   FROSTED-WHITE PRIMARY DISABLED BUTTONS
   Keep this block at the absolute bottom of the stylesheet.
========================================================= */

/*
  Enabled Generate Draft and Publish remain bright blue.
*/
.schedule-generate-button:not(:disabled),
.schedule-publish-button:not(:disabled),
#generateDraftBtn:not(:disabled),
#publishScheduleBtn:not(:disabled),
#publishScheduleButton:not(:disabled) {
  opacity: 1;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border-color: rgba(76, 170, 255, 0.42) !important;

  background:
    linear-gradient(
      135deg,
      #3798ff 0%,
      #28b8ff 100%
    ) !important;

  box-shadow:
    0 8px 24px rgba(28, 142, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/*
  Frosted-white disabled appearance.
  IDs are included because the JavaScript-generated controls may not retain
  the presentation classes on every render.
*/
.schedule-toolbar-redesign .schedule-generate-button:disabled,
.schedule-status-redesign .schedule-publish-button:disabled,
.toolbar-actions .schedule-generate-button:disabled,
.schedule-status-actions .schedule-publish-button:disabled,
#generateDraftBtn:disabled,
#publishScheduleBtn:disabled,
#publishScheduleButton:disabled {
  opacity: 1 !important;
  visibility: visible !important;

  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.08) !important;

  border: 1px solid rgba(226, 240, 255, 0.30) !important;

  background:
    linear-gradient(
      135deg,
      rgba(241, 248, 255, 0.16) 0%,
      rgba(203, 224, 245, 0.09) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 7px 20px rgba(0, 0, 0, 0.14) !important;

  filter: none !important;
  -webkit-filter: none !important;

  cursor: not-allowed !important;
  pointer-events: auto;

  forced-color-adjust: none;
}

/*
  Some shared button styles dim the nested icon/text rather than the button.
  Reset every child inside these two disabled controls.
*/
.schedule-toolbar-redesign .schedule-generate-button:disabled *,
.schedule-status-redesign .schedule-publish-button:disabled *,
.toolbar-actions .schedule-generate-button:disabled *,
.schedule-status-actions .schedule-publish-button:disabled *,
#generateDraftBtn:disabled *,
#publishScheduleBtn:disabled *,
#publishScheduleButton:disabled * {
  opacity: 1 !important;

  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;

  fill: none;
  stroke: currentColor !important;

  filter: none !important;
  -webkit-filter: none !important;
}

/*
  Lucide icons use SVG strokes. This keeps them bright even when a shared
  disabled rule targets SVG, i, span, or use elements.
*/
.schedule-toolbar-redesign .schedule-generate-button:disabled svg,
.schedule-status-redesign .schedule-publish-button:disabled svg,
#generateDraftBtn:disabled svg,
#publishScheduleBtn:disabled svg,
#publishScheduleButton:disabled svg {
  opacity: 0.92 !important;
  color: #f7fbff !important;
  stroke: #f7fbff !important;
}

/*
  Disabled buttons should not react to hover, but should retain the same
  frosted-white appearance.
*/
.schedule-toolbar-redesign .schedule-generate-button:disabled:hover,
.schedule-status-redesign .schedule-publish-button:disabled:hover,
#generateDraftBtn:disabled:hover,
#publishScheduleBtn:disabled:hover,
#publishScheduleButton:disabled:hover {
  transform: none !important;

  border-color: rgba(226, 240, 255, 0.30) !important;

  background:
    linear-gradient(
      135deg,
      rgba(241, 248, 255, 0.16) 0%,
      rgba(203, 224, 245, 0.09) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 7px 20px rgba(0, 0, 0, 0.14) !important;
}