:root {
  --outline-width: 1px;
  --outline-offset: -1px;

  --field-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
  --section-shadow: rgba(0, 0, 0, 0.1) 1px 2px 3px 0;

  --clr-text: rgb(15, 23, 42);
  --clr-text-inverse: rgb(255, 255, 255);
  --clr-text-secondary: rgb(148, 163, 184);

  --clr-background: rgb(241, 244, 249);
  --clr-background-secondary: rgb(255, 255, 255);
  --clr-background-inverse: rgb(14, 23, 51);

  --clr-primary: rgb(30, 55, 127);
  --clr-primary-hover: rgb(14, 33, 88);

  --clr-secondary: rgb(14, 23, 51);
  --clr-secondary-hover: rgb(27, 45, 97);

  --clr-line: rgb(204, 204, 204);
  --clr-line-light: rgb(239, 239, 239);
  --clr-line-dark: rgb(51, 58, 79);
  --clr-focus: rgb(211, 215, 228);
  --clr-row-hover: rgb(237, 240, 242);

  --clr-info: #1d55c4;
  --clr-info-background: #e7f1ff;
  --clr-danger: #dc2626;
  --clr-danger-background: #fef2f2;
  --clr-neutral: #475569;
  --clr-neutral-background: #e2e8f0;
  --clr-success: #16a34a;
  --clr-success-background: #f0fdf4;
  --clr-warning: #ca8a04;
  --clr-warning-background: #fef9c3;

  --m-1: 0.5rem;
  --m-2: 1rem;
  --m-3: 1.5rem;
  --m-4: 2rem;
  --m-5: 2.5rem;

  --iw-50: 45px;
  --iw-100: 50px;
  --iw-200: 60px;
  --iw-300: 70px;
  --iw-400: 80px;
  --iw-500: 90px;
  --iw-600: 100px;
  --iw-700: 150px;
  --iw-800: 180px;
  --iw-900: 220px;

  --table-footer-line-width: 2px;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/Inter-roman.var.66c6e4088364.woff2") format("woff2");
  font-named-instance: Regular;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* ================================================================= */
/* ====================  Main Internal Layout  ===================== */
/* ================================================================= */

.logo__img {
  max-width: 100px;
  margin: 0 auto;
}

.app {
  background-color: var(--clr-background);
  --sidebar-width: 85px;
}

.app.sidebar-open {
  --sidebar-width: 300px;
}

.app main {
  padding: 1rem;
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  /*transition: margin-left ease 150ms;*/
}

/* ================================================================= */
/* ===========================  Sidebar  =========================== */
/* ================================================================= */

.sidebar {
  background-color: var(--clr-secondary);
  color: var(--clr-text-inverse);
  width: var(--sidebar-width);
  height: 100vh;
  height: 100svh;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sidebar div,
.sidebar footer {
  width: 100%;
}

.sidebar .logo__img {
  max-height: 70px;
  margin: 0 auto;
}

.sidebar nav a,
.sidebar footer a {
  display: block;
  color: var(--clr-text-inverse);
  padding: 10px 0;
  margin: 1px 0;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  opacity: 0.4;
  width: 100% !important;
  transition:
    opacity,
    background-color ease 150ms;
}

.sidebar nav a:hover,
.sidebar footer a:hover {
  background-color: var(--clr-primary-hover);
  text-decoration: none;
  opacity: 1;
}

.sidebar nav img,
.sidebar footer img {
  width: 20px;
  margin: 0 auto 0.3rem;
}

.sidebar nav img.customers {
  width: 35px;
}

.sidebar nav [aria-current="page"],
.sidebar footer [aria-current="page"] {
  opacity: 0.75;
}

/* ================================================================= */
/* ===========================  Cell  =========================== */
/* ================================================================= */
.cell-status {
  font-size: 0.9rem;
  font-weight: 600;
}

.cell-status span {
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}

.cell-status--yellow span {
  color: var(--clr-warning);
  background-color: var(--clr-warning-background);
}

.cell-status--green span {
  color: var(--clr-success);
  background-color: var(--clr-success-background);
}

.cell-status--gray span {
  color: var(--clr-neutral);
  background-color: var(--clr-neutral-background);
}

.cell-status--red span {
  color: var(--clr-danger);
  background-color: var(--clr-danger-background);
}

.cell-status--blue span {
  color: var(--clr-info);
  background-color: var(--clr-info-background);
}

.online-icon {
  width: 16px;
}

/* ================================================================= */
/* ===========================  Actions  =========================== */
/* ================================================================= */

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.actions > div {
  display: flex;
}

.actions button {
  margin-left: 0.4rem;
  margin-bottom: 0;
  max-width: 90px;
}

.actions input[type="search"] {
  min-width: var(--iw-900);
  margin-bottom: 0;
}

/* ================================================================= */
/* ===========================  App Header ========================= */
/* ================================================================= */

main > header {
  display: flex;
  justify-content: space-between;
}

main > header a[role="button"] {
  margin-left: 0.5rem;
  width: fit-content;
}

.container {
  width: 100%;
  background-color: var(--clr-background-secondary);
  padding: 1rem;
  border-radius: 5px;
  box-shadow: var(--section-shadow);
}

.container--dark {
  color: var(--clr-text-inverse);
  background-color: var(--clr-background-inverse);
}

/* ================================================================= */
/* ===========================  Tabs ================================ */
/* ================================================================= */

bl-tab-item {
  display: none;
}

.tabs nav {
  margin-bottom: 2rem;
}

.tabs nav ul {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--clr-line-light);
  font-weight: 500;
}

.tabs nav a {
  display: block;
  padding: 0.5rem 2rem;
  text-decoration: none;
  border-radius: 5px 5px 0 0;
  border-bottom: 3px solid transparent;
  text-align: center;
  transition: border ease 100ms;
}

.tabs nav a:hover {
  background-color: var(--clr-row-hover);
}

.tabs nav a[aria-selected="true"] {
  border-bottom-color: var(--clr-primary);
}

/* ================================================================= */
/* ===========================  Button footer ====================== */
/* ================================================================= */

.button-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--m-1);
  margin-top: var(--m-2);
}

.button-footer > button,
.button-footer > a[role="button"] {
  width: fit-content;
}

/* ================================================================= */
/* ===========================  Text Color ========================= */
/* ================================================================= */

.color-secondary {
  color: var(--clr-text-secondary);
}