.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

.link,
p > a {
  @apply font-medium text-blue-700 hover:underline;
}

code {
  @apply font-mono text-sm bg-gray-100 rounded-lg p-1;
}

.navbar {
  @apply justify-center flex flex-wrap space-x-2 gap-2 mt-10;
}
.navbar a {
  @apply font-bold py-2 px-4 rounded-lg;
}
.navbar a:hover {
  @apply bg-gray-200 shadow-inner;
}
.navbar a:focus {
  @apply outline-none ring-2 ring-blue-700 text-blue-700;
}
.navbar a.active {
  @apply bg-gray-300 text-black shadow;
}
.navbar a.active:hover {
  @apply shadow;
}

.sidebar {
  @apply flex flex-row flex-wrap justify-center lg:flex-col lg:w-48 gap-2 h-fit text-sm font-medium text-gray-900;
}
.sidebar a {
  @apply w-full block rounded-lg px-4 py-2  focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700;
}
.sidebar a:focus {
  @apply outline-none ring-2 ring-blue-700 text-blue-700;
}
.sidebar a:hover {
  @apply shadow-inner bg-gray-200 text-blue-700;
}
.sidebar a.active {
  @apply bg-blue-700 text-white;
}

.monitors {
  @apply grid justify-items-stretch justify-stretch items-center mt-20 bg-white shadow-md p-5 rounded-lg;
}
.monitors > div:not(:last-child) {
  @apply mb-3;
}
.monitors .time-range > a {
  @apply font-medium text-sm px-2.5 py-1;
  @apply text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300;
}
.monitors .time-range > a.active {
  @apply text-white bg-blue-700 hover:bg-blue-800;
}
.monitors .time-range > a:first-child {
  @apply rounded-s-lg;
}
.monitors .time-range > a:last-child {
  @apply rounded-e-lg;
}

.settings {
  @apply grid grid-cols-1 gap-5 grid-rows-[min-content] h-fit;
}
.settings section {
  @apply relative overflow-x-auto shadow-md sm:rounded-lg text-gray-500 bg-white;
}

.settings section h2 {
  @apply flex flex-col text-lg font-semibold text-gray-900;
}
.settings section h2 span {
  @apply text-sm font-medium text-gray-500;
}

.settings section form {
  @apply grid gap-4 grid-cols-1 sm:grid-cols-[2fr_1fr];
}
.settings section form input {
  @apply h-min bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5;
}
.settings section form label {
  @apply sm:col-span-2 block text-sm font-medium text-gray-900;
}
.settings section form p {
  @apply text-sm font-normal text-gray-500;
}
.settings section form button[type="submit"] {
  @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center;
  @apply sm:col-span-2;
}

.settings section table thead {
  @apply text-xs text-gray-700 uppercase bg-gray-50;
}
.settings section table thead th {
  @apply px-6 py-3 text-center;
}
.settings section table tbody th {
  @apply px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-center;
}
.settings section table tbody tr {
  @apply px-6 py-4 text-center;
}