@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* spacing scale */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 48px;
}
.border-0 {
  border: 0px !important;
}

/* utility Classes */
.h-100 {
  height: 100% !important;
}
.m-h-100 {
  min-height: 100% !important;
}
.d-flex {
  display: flex;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}
.align-items-center {
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flex-box {
  display: flex;
  align-items: center;
  gap: 20px;
}
.flex {
  display: flex;
  align-items: center;
}
.mini-flex {
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-mini-flex {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* All sides */
.m-0 {
  margin: var(--space-0) !important;
}
.m-1 {
  margin: var(--space-1);
}
.m-2 {
  margin: var(--space-2);
}
.m-3 {
  margin: var(--space-3);
}
.m-4 {
  margin: var(--space-4);
}
.m-5 {
  margin: var(--space-5);
}

/* Top */
.mt-1 {
  margin-top: var(--space-1);
}
.mt-2 {
  margin-top: var(--space-2);
}
.mt-3 {
  margin-top: var(--space-3);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-5 {
  margin-top: var(--space-5);
}

/* Bottom */
.mb-1 {
  margin-bottom: var(--space-1);
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-3 {
  margin-bottom: var(--space-3);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-5 {
  margin-bottom: var(--space-5);
}

/* Left */
.ms-1 {
  margin-left: var(--space-1);
}
.ms-2 {
  margin-left: var(--space-2);
}
.ms-3 {
  margin-left: var(--space-3);
}
.ms-4 {
  margin-left: var(--space-4);
}
.ms-5 {
  margin-left: var(--space-5);
}

/* Right */
.me-1 {
  margin-right: var(--space-1);
}
.me-2 {
  margin-right: var(--space-2);
}
.me-3 {
  margin-right: var(--space-3);
}
.me-4 {
  margin-right: var(--space-4);
}
.me-5 {
  margin-right: var(--space-5);
}

/* X axis */
.mx-1 {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}
.mx-2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}
.mx-3 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}
.mx-4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}
.mx-5 {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}

/* Y axis */
.my-1 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}
.my-2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}
.my-3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.my-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.my-5 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

/* All sides */
.p-0 {
  padding: var(--space-0);
}
.p-1 {
  padding: var(--space-1);
}
.p-2 {
  padding: var(--space-2);
}
.p-3 {
  padding: var(--space-3);
}
.p-4 {
  padding: var(--space-4);
}
.p-5 {
  padding: var(--space-5);
}

/* Top */
.pt-0 {
  padding-top: 0px !important;
}
.pt-1 {
  padding-top: var(--space-1) !important;
}
.pt-2 {
  padding-top: var(--space-2) !important;
}
.pt-3 {
  padding-top: var(--space-3) !important;
}
.pt-4 {
  padding-top: var(--space-4) !important;
}
.pt-5 {
  padding-top: var(--space-5) !important;
}

/* Bottom */
.pb-1 {
  padding-bottom: var(--space-1);
}
.pb-2 {
  padding-bottom: var(--space-2);
}
.pb-3 {
  padding-bottom: var(--space-3);
}
.pb-4 {
  padding-bottom: var(--space-4);
}
.pb-5 {
  padding-bottom: var(--space-5);
}

/* Left */
.ps-1 {
  padding-left: var(--space-1);
}
.ps-2 {
  padding-left: var(--space-2);
}
.ps-3 {
  padding-left: var(--space-3);
}
.ps-4 {
  padding-left: var(--space-4);
}
.ps-5 {
  padding-left: var(--space-5);
}

/* Right */
.pe-1 {
  padding-right: var(--space-1);
}
.pe-2 {
  padding-right: var(--space-2);
}
.pe-3 {
  padding-right: var(--space-3);
}
.pe-4 {
  padding-right: var(--space-4);
}
.pe-5 {
  padding-right: var(--space-5);
}

/* X axis */
.px-1 {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}
.px-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.px-3 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.px-5 {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* Y axis */
.py-1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.py-3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.py-5 {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.edit-btn,
.del-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  margin: 0 3px;
}
.edit-btn {
  color: #3c8dbc;
}
.del-btn {
  color: #dd4b39;
}
.brk-btn {
  background-color: #dd4b39;
  color: white;
  border-radius: 75rem;
  padding: 2px 8px;
  font-size: 12px;
  &:hover {
    background-color: #dd4b39;
    color: white;
  }
}

.brk-outline-btn {
  border: 1px solid #dd4b39;
  background-color: #fbeeed;
  color: #a82a1c;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 8px;
  &:hover {
    background-color: #f7dad7;
    color: #8a2115;
  }
}

.brk-dot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #fbeeed;
  color: #dd4b39;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
  }

  &:hover {
    background-color: #fbeeed;
    color: #dd4b39;
  }
}
.brk-bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #fbeeed;
  color: #dd4b39;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;
  &:hover {
    background-color: #fbeeed;
    color: #dd4b39;
  }
}

.warn-btn {
  background-color: #f39c12;
  color: white;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 8px;
  &:hover {
    background-color: #f39c12;
    color: white;
  }
}
.warn-outline-btn {
  border: 1px solid #f39c12;
  background-color: #f8e3c0;
  color: #b95b03;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 8px;

  &:hover {
    background-color: #f5d7a4;
    color: #944802;
  }
}
.warn-dot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #fdf5e6;
  color: #f39c12;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
  }

  &:hover {
    background-color: #fdf5e6;
    color: #f39c12;
  }
}
.warn-bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #fdf5e6;
  color: #f39c12;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    background-color: #fdf5e6;
    color: #f39c12;
  }
}

.publish-btn {
  background-color: #00a65a;
  color: white;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 8px;
  &:hover {
    background-color: #00a65a;
    color: white;
  }
}

.publish-outline-btn {
  border: 1px solid #00a65a;
  background-color: #e6f6ee;
  color: #00753f;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 8px;
  &:hover {
    background-color: #ccedd9;
    color: #005c32;
  }
}

.publish-dot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f6ee;
  color: #00a65a;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
  }

  &:hover {
    background-color: #ccedd9;
    color: #008d4c;
  }
}
.publish-bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f6ee;
  color: #00a65a;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    background-color: #ccedd9;
    color: #008d4c;
  }
}

.undreview-btn {
  background-color: #00c0ef;
  color: white;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 8px;
  &:hover {
    background-color: #00c0ef;
    color: white;
  }
}
.undreview-outline-btn {
  border: 1px solid #00c0ef;
  background-color: #e6f9fd;
  color: #0084a5;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 8px;
  &:hover {
    background-color: #ccf3fc;
    color: #006882;
  }
}

.undreview-dot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f9fd;
  color: #00c0ef;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
  }

  &:hover {
    background-color: #ccf3fc;
    color: #00a3cb;
  }
}
.undreview-bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f9fd;
  color: #00c0ef;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    background-color: #ccf3fc;
    color: #00a3cb;
  }
}

.info-btn {
  background-color: #0766be;
  padding: 2px 8px;
  border-radius: 75rem;
  font-size: 13px;
  transition: all 0.3s ease-in-out;
  color: white;
  &:hover {
    background-color: var(--seconday-color);
    color: white;
  }
}

.info-outline-btn {
  border: 1px solid #0766be;
  background-color: #e6f0f8;
  color: #054d8f;
  border-radius: 75rem;
  font-size: 13px;
  padding: 2px 8px;
  transition: all 0.3s ease-in-out;
  &:hover {
    border: 1px solid #0766be;
    background-color: #cce1f2;
    color: #043b6e;
  }
}

.info-dot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f0f8;
  color: #0766be;
  border: none;
  border-radius: 75rem;
  font-size: 13px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
  }

  &:hover {
    background-color: #cce1f2;
    color: #054d8f;
  }
}
.info-bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f0f8;
  color: #0766be;
  border: none;
  border-radius: 75rem;
  font-size: 13px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  &:hover {
    background-color: #cce1f2;
    color: #054d8f;
  }
}

.receipt-btn {
  display: inline-block;
  color: white;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 8px;
  background-color: #00c0ef;
  color: white;
  &:hover {
    background-color: #00c0ef;
    color: white;
  }
}

.receipt-outline-btn {
  display: inline-block;
  border: 1px solid #00c0ef;
  background-color: #e6f9fd;
  color: #0084a5;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 8px;

  &:hover {
    background-color: #ccf3fc;
    color: #006882;
  }
}

.receipt-dot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f9fd;
  color: #00c0ef;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
  }

  &:hover {
    background-color: #ccf3fc;
    color: #00a3cb;
  }
}
.receipt-bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f9fd;
  color: #00c0ef;
  border: none;
  border-radius: 75rem;
  font-size: 12px;
  padding: 2px 10px 2px 8px;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    background-color: #ccf3fc;
    color: #00a3cb;
  }
}
/* ============================================= */
/* Solid Buttons  */
/* ============================================= */
.publish-solid-square-btn {
  border: 1px solid #00753f;
  background-color: #00a65a;
  color: #ffffff;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
  &:hover {
    background-color: #008d4c; /* Slightly darker green on hover */
    border-color: #005c32;
  }
}

.publish-light-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f6ee;
  color: #00a65a;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 8px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: #ccedd9; /* Darker pastel green on hover */
    color: #008d4c; /* Darker green text on hover */
  }
}

.publish-dot-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f6ee; /* Light green background */
  color: #00a65a; /* Vibrant green text & dot */
  border: none;
  border-radius: 3px; /* Matches the 3px solid/square button family */
  font-size: 14px; /* Matches the 14px solid/square button family */
  height: 35px; /* Matches the 35px solid/square button family */
  padding: 2px 12px; /* Adjusted padding slightly for the 14px text balance */
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  /* The Status Dot */
  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor; /* Inherits the green text color dynamically */
    border-radius: 50%;
  }

  &:hover {
    background-color: #ccedd9; /* Darker pastel green on hover */
    color: #008d4c; /* Darker green text & dot on hover */
  }
}

.publish-outline-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #00a65a; /* Clean green outline */
  background-color: #e6f6ee; /* Soft light green background */
  color: #00753f; /* Rich green text */
  border-radius: 3px; /* Matches the 3px square family */
  font-size: 14px; /* Matches the 14px family */
  height: 35px; /* Matches the 35px height family */
  padding: 2px 12px; /* Adjusted padding for layout balance */
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box; /* Ensures the 1px border doesn't make the height exceed 35px */
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

  &:hover {
    background-color: #ccedd9; /* Darker pastel green on hover */
    color: #005c32; /* Deep green text on hover */
    border-color: #00753f; /* Slightly deeper border on hover */
  }
}

.publish-glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* The Glass Core: Transparent background + blur */
  background-color: rgba(
    230,
    246,
    238,
    0.45
  ); /* Soft green tint with 45% opacity */
  backdrop-filter: blur(8px); /* Frosts the content behind the button */
  -webkit-backdrop-filter: blur(8px); /* Safari support */

  /* Fine white-tinted border to catch the light */
  border: 1px solid rgba(0, 166, 90, 0.25);

  color: #00753f; /* Dark rich green text for crisp contrast */
  border-radius: 3px; /* Matches the 3px square family */
  font-size: 14px; /* Matches the 14px family */
  height: 35px; /* Matches the 35px height family */
  padding: 2px 12px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.1s ease;

  &:hover {
    background-color: rgba(
      204,
      237,
      217,
      0.6
    ); /* Slightly more opaque on hover */
    border-color: rgba(0, 117, 63, 0.4); /* Border becomes more defined */
    color: #005c32;
  }

  &:active {
    transform: scale(0.98); /* Subtle click feedback */
  }
}

.receipt-solid-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #00c0ef; /* Original vibrant blue */
  color: #ffffff;
  border: none;
  border-radius: 3px; /* 3px square profile */
  font-size: 14px; /* 14px text */
  height: 35px; /* 35px height */
  padding: 2px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #00a0ca; /* Deeper blue hover */
  }
}

.receipt-light-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e6f9fd; /* Soft, pastel blue tint */
  color: #00c0ef; /* Clear blue text */
  border: none;
  border-radius: 3px; /* 3px square profile */
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: #ccf2fb; /* Slightly deeper pastel on hover */
    color: #00a0ca;
  }
}

.receipt-dot-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f9fd;
  color: #00c0ef;
  border: none;
  border-radius: 3px; /* 3px square profile */
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor; /* Matches the text color dynamically */
    border-radius: 50%;
  }

  &:hover {
    background-color: #ccf2fb;
    color: #00a0ca;
  }
}

.receipt-glass-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: rgba(230, 249, 253, 0.45); /* Alpha tint of light blue */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 192, 239, 0.25); /* Soft blue edge border */
  color: #00a0ca; /* Darker blue for text readability */
  border-radius: 3px; /* 3px square profile */
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: rgba(204, 242, 251, 0.6);
    border-color: rgba(0, 160, 202, 0.4);
    color: #0082a5;
  }
}

.info-solid-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #0766be; /* Your original solid royal blue */
  color: #ffffff;
  border: none;
  border-radius: 3px; /* 3px square profile */
  font-size: 14px; /* Unified 14px text */
  height: 35px; /* Unified 35px height */
  padding: 2px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #054c8e; /* Deeper blue for hover feedback */
  }
}

.info-light-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e6f0fa; /* Soft, pastel blue tint */
  color: #0766be; /* Rich royal blue text */
  border: none;
  border-radius: 3px; /* 3px square profile */
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: #cce2f5; /* Slightly deeper pastel on hover */
    color: #054c8e;
  }
}

.info-dot-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f0fa;
  color: #0766be;
  border: none;
  border-radius: 3px; /* 3px square profile */
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor; /* Matches the text color dynamically */
    border-radius: 50%;
  }

  &:hover {
    background-color: #cce2f5;
    color: #054c8e;
  }
}

.info-glass-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: rgba(
    230,
    240,
    250,
    0.45
  ); /* Alpha tint of the light blue */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(7, 102, 190, 0.25); /* Soft royal blue edge border */
  color: #054c8e; /* Deep royal blue for high readability */
  border-radius: 3px; /* 3px square profile */
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: rgba(204, 226, 245, 0.6);
    border-color: rgba(5, 76, 142, 0.4);
    color: #033364;
  }
}

.undreview-solid-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #00c0ef; /* Your original bright turquoise */
  color: #ffffff;
  border: none;
  border-radius: 3px; /* 3px square profile */
  font-size: 14px; /* Unified 14px text */
  height: 35px; /* Unified 35px height */
  padding: 2px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #00a0ca; /* Deeper turquoise for hover feedback */
  }
}

.undreview-light-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e6f9fd; /* Soft pastel turquoise tint */
  color: #00c0ef; /* Crisp brand text color */
  border: none;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: #ccf2fb; /* Slightly deeper pastel on hover */
    color: #00a0ca;
  }
}

.undreview-outline-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #00c0ef; /* Turquoise border outline */
  background-color: #e6f9fd; /* Soft light background tint */
  color: #00a0ca; /* Clear readable text */
  border-radius: 3px; /* 3px square profile */
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  box-sizing: border-box; /* Keeps height exactly 35px with border */
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: #ccf2fb;
    border-color: #0082a5;
    color: #0082a5;
  }
}

.undreview-dot-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #e6f9fd;
  color: #00c0ef;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor; /* Matches text color dynamically */
    border-radius: 50%;
  }

  &:hover {
    background-color: #ccf2fb;
    color: #00a0ca;
  }
}

.undreview-glass-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: rgba(
    230,
    249,
    253,
    0.45
  ); /* Alpha tint of your light blue */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 192, 239, 0.25);
  color: #00a0ca;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: rgba(204, 242, 251, 0.6);
    border-color: rgba(0, 160, 202, 0.4);
    color: #0082a5;
  }
}

.brk-solid-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #dd4b39; /* Your original vibrant red */
  color: #ffffff;
  border: none;
  border-radius: 3px; /* 3px square profile */
  font-size: 14px; /* Unified 14px text */
  height: 35px; /* Unified 35px height */
  padding: 2px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #c23321; /* Darker red for clear hover feedback */
  }
}
.brk-light-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fdf0ee; /* Soft pastel red tint */
  color: #dd4b39; /* Crisp brand red text */
  border: none;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: #fbdcd7; /* Slightly deeper pastel on hover */
    color: #c23321;
  }
}
.brk-outline-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dd4b39; /* Red border outline */
  background-color: #fdf0ee; /* Soft light background tint */
  color: #c23321; /* High contrast readable text */
  border-radius: 3px; /* 3px square profile */
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  box-sizing: border-box; /* Keeps height exactly 35px with border */
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: #fbdcd7;
    border-color: #a82616;
    color: #a82616;
  }
}
.brk-dot-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #fdf0ee;
  color: #dd4b39;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor; /* Matches text color dynamically */
    border-radius: 50%;
  }

  &:hover {
    background-color: #fbdcd7;
    color: #c23321;
  }
}
.brk-glass-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: rgba(
    253,
    240,
    238,
    0.45
  ); /* Alpha tint of your light red */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(221, 75, 57, 0.25);
  color: #c23321;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: rgba(251, 220, 215, 0.6);
    border-color: rgba(194, 51, 33, 0.4);
    color: #a82616;
  }
}

.warn-solid-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #f39c12; /* Your original vibrant amber orange */
  color: #ffffff;
  border: none;
  border-radius: 3px; /* 3px square profile */
  font-size: 14px; /* Unified 14px text */
  height: 35px; /* Unified 35px height */
  padding: 2px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #d6870b; /* Slightly darker orange for hover state */
  }
}

.warn-light-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fef5e7; /* Soft pastel amber tint */
  color: #f39c12; /* Brand orange text */
  border: none;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: #fde6c4; /* Deeper pastel on hover */
    color: #d6870b;
  }
}

.warn-outline-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f39c12; /* Orange border outline */
  background-color: #fef5e7; /* Soft light background tint */
  color: #c07705; /* Deepened orange text for dark-on-light contrast */
  border-radius: 3px; /* 3px square profile */
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  box-sizing: border-box; /* Keeps height exactly 35px with border */
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: #fde6c4;
    border-color: #a06304;
    color: #a06304;
  }
}

.warn-dot-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #fef5e7;
  color: #f39c12;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor; /* Matches text color dynamically */
    border-radius: 50%;
  }

  &:hover {
    background-color: #fde6c4;
    color: #d6870b;
  }
}

.warn-glass-square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: rgba(
    254,
    245,
    231,
    0.45
  ); /* Alpha tint of your light orange */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(243, 156, 18, 0.25);
  color: #c07705;
  border-radius: 3px;
  font-size: 14px;
  height: 35px;
  padding: 2px 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    background-color: rgba(253, 230, 196, 0.6);
    border-color: rgba(214, 135, 11, 0.4);
    color: #a06304;
  }
}