/**
 * Copyright (C) 2025 eamonxg <eamonxiong@gmail.com>
 * Licensed under the Apache License, Version 2.0.
 */

@import "tailwindcss";

@custom-variant dark (&:where([data-darkmode=true], [data-darkmode=true] *));

@plugin "tailwind-scrollbar";

@theme {
  --font-sans:
    "Lato", "Inter", "SF Pro Text", "SF Pro Icons", "Helvetica Neue",
    "Helvetica", "Arial", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --color-aurora-green: #6ee7b7;
  --color-aurora-green-50: oklch(97.2% 0.019 158.743);
  --color-aurora-green-100: oklch(94.8% 0.045 159.652);
  --color-aurora-green-200: oklch(90.5% 0.089 160.125);
  --color-aurora-green-300: oklch(84.7% 0.148 160.742);
  --color-aurora-green-400: oklch(89.6% 0.143 162.4);
  --color-aurora-green-500: oklch(77.1% 0.198 161.205);
  --color-aurora-green-600: oklch(64.3% 0.175 161.428);
  --color-aurora-green-700: oklch(55.2% 0.142 162.113);
  --color-aurora-green-800: oklch(47.1% 0.112 162.895);
  --color-aurora-green-900: oklch(40.8% 0.089 163.742);
  --color-aurora-green-950: oklch(27.9% 0.061 165.128);

  --color-aurora-teal: #4fc3c7;
  --color-aurora-teal-50: oklch(97.8% 0.016 185.234);
  --color-aurora-teal-100: oklch(95.1% 0.041 186.152);
  --color-aurora-teal-200: oklch(90.8% 0.079 187.063);
  --color-aurora-teal-300: oklch(85.2% 0.128 187.894);
  --color-aurora-teal-400: oklch(77.9% 0.168 188.745);
  --color-aurora-teal-500: oklch(75.8% 0.145 188.2);
  --color-aurora-teal-600: oklch(62.1% 0.145 189.632);
  --color-aurora-teal-700: oklch(53.4% 0.118 190.485);
  --color-aurora-teal-800: oklch(45.8% 0.094 191.328);
  --color-aurora-teal-900: oklch(39.7% 0.074 192.156);
  --color-aurora-teal-950: oklch(28.2% 0.052 193.864);

  --color-aurora-sky: #499ecb;
  --color-aurora-sky-50: oklch(97.8% 0.012 214.3);
  --color-aurora-sky-100: oklch(95.2% 0.025 214.3);
  --color-aurora-sky-200: oklch(90.1% 0.051 214.3);
  --color-aurora-sky-300: oklch(82.8% 0.085 214.3);
  --color-aurora-sky-400: oklch(73.5% 0.128 214.3);
  --color-aurora-sky-500: oklch(68.5% 0.142 214.3);
  --color-aurora-sky-600: oklch(58.2% 0.135 214.3);
  --color-aurora-sky-700: oklch(49.8% 0.118 214.3);
  --color-aurora-sky-800: oklch(42.6% 0.095 214.3);
  --color-aurora-sky-900: oklch(36.1% 0.072 214.3);
  --color-aurora-sky-950: oklch(25.8% 0.048 214.3);

  --color-aurora-night-slate: #0f172a;
  --color-aurora-night-slate-50: oklch(96.8% 0.008 245.123);
  --color-aurora-night-slate-100: oklch(93.2% 0.018 246.084);
  --color-aurora-night-slate-200: oklch(86.4% 0.035 247.159);
  --color-aurora-night-slate-300: oklch(76.8% 0.062 248.347);
  --color-aurora-night-slate-400: oklch(64.2% 0.098 249.638);
  --color-aurora-night-slate-500: oklch(52.1% 0.128 250.942);
  --color-aurora-night-slate-600: oklch(41.8% 0.145 252.258);
  --color-aurora-night-slate-700: oklch(33.6% 0.142 253.586);
  --color-aurora-night-slate-800: oklch(26.8% 0.128 254.926);
  --color-aurora-night-slate-900: oklch(11.8% 0.042 264.7);
  --color-aurora-night-slate-950: oklch(11.2% 0.089 257.847);

  --color-aurora-night-teal: #134e4a;
  --color-aurora-night-teal-50: oklch(96.9% 0.012 168.245);
  --color-aurora-night-teal-100: oklch(92.8% 0.028 169.137);
  --color-aurora-night-teal-200: oklch(85.6% 0.055 170.029);
  --color-aurora-night-teal-300: oklch(75.4% 0.089 170.921);
  --color-aurora-night-teal-400: oklch(62.8% 0.128 171.813);
  --color-aurora-night-teal-500: oklch(51.2% 0.156 172.705);
  --color-aurora-night-teal-600: oklch(41.5% 0.172 173.597);
  --color-aurora-night-teal-700: oklch(33.8% 0.168 174.489);
  --color-aurora-night-teal-800: oklch(27.6% 0.148 175.381);
  --color-aurora-night-teal-900: oklch(29.5% 0.074 175.4);
  --color-aurora-night-teal-950: oklch(18.9% 0.089 177.165);

  --color-aurora-night-emerald: #065f46;
  --color-aurora-night-emerald-50: oklch(97.1% 0.015 155.743);
  --color-aurora-night-emerald-100: oklch(94.2% 0.035 156.652);
  --color-aurora-night-emerald-200: oklch(88.9% 0.068 157.561);
  --color-aurora-night-emerald-300: oklch(81.3% 0.112 158.47);
  --color-aurora-night-emerald-400: oklch(71.8% 0.158 159.379);
  --color-aurora-night-emerald-500: oklch(61.2% 0.189 160.288);
  --color-aurora-night-emerald-600: oklch(51.8% 0.198 161.197);
  --color-aurora-night-emerald-700: oklch(43.6% 0.185 162.106);
  --color-aurora-night-emerald-800: oklch(36.8% 0.156 163.015);
  --color-aurora-night-emerald-900: oklch(34.2% 0.118 163.2);
  --color-aurora-night-emerald-950: oklch(22.1% 0.089 164.833);
}

@layer base {
  @font-face {
    font-display: swap;
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/lato-v24-latin-regular.woff2") format("woff2");
  }

  html {
    @apply max-md:dark:bg-aurora-night-teal relative h-full font-sans max-md:bg-slate-100;
    @apply md:before:pointer-events-none md:before:fixed md:before:inset-0 md:before:-z-10;
    @apply md:before:bg-gradient-to-br md:before:from-slate-50 md:before:via-slate-100 md:before:to-slate-200;
    @apply md:dark:before:from-aurora-night-slate md:dark:before:via-aurora-night-teal md:dark:before:to-aurora-night-emerald;

    * {
      @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-300/60 hover:scrollbar-thumb-slate-400/80 dark:scrollbar-thumb-slate-600/60 dark:hover:scrollbar-thumb-slate-500/80 m-0 box-border p-0;
    }

    body {
      @apply bg-transparent text-sm leading-relaxed font-normal text-slate-900 transition-all duration-300 dark:text-slate-100;
      &.modal-overlay-active {
        @apply h-screen overflow-hidden;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        @apply font-sans leading-tight font-semibold tracking-tight text-slate-900 dark:text-slate-100;
      }

      h1 {
        @apply mb-4 pl-6 text-3xl max-md:pl-4 max-md:text-2xl;
      }

      h2 {
        @apply mb-4 pl-5 text-2xl max-md:mb-2 max-md:pl-4 max-md:text-xl;
      }

      h3 {
        @apply mb-4 text-xl font-semibold tracking-tight max-md:mb-2 max-md:text-lg;
      }

      h4 {
        @apply mb-2 text-lg max-md:text-base;
      }

      h5 {
        @apply mb-2 text-base max-md:text-sm;
      }

      h6 {
        @apply mb-2 text-sm max-md:text-xs;
      }

      hr {
        @apply border-0;
      }

      p {
        @apply text-sm leading-relaxed text-slate-600 dark:text-slate-300;
      }

      strong {
        @apply font-semibold tracking-tight;
      }

      small {
        @apply text-xs font-normal text-slate-600 dark:text-slate-300;
      }

      em {
        @apply font-medium text-slate-400 italic max-md:text-xs dark:text-slate-500;
      }

      code {
        @apply rounded bg-slate-200/80 px-2 py-1 font-mono text-sm text-slate-800 dark:bg-gray-700 dark:text-gray-200;
      }
    }
  }
}

@layer components {
  @layer layout {
    header {
      @apply sticky top-0 z-50 mb-2 flex h-14 items-center justify-between bg-white/5 px-6 py-3 backdrop-blur-xl backdrop-saturate-150 transition-all duration-300 hover:bg-white/15 hover:shadow-lg max-md:bg-white/10 max-md:px-4 max-md:py-2 max-md:backdrop-blur-xl max-md:backdrop-saturate-150 dark:bg-gray-900/90 dark:hover:bg-gray-800/95 dark:hover:from-gray-900 dark:hover:via-gray-800 dark:hover:to-gray-900 dark:hover:shadow-black/30 max-md:dark:bg-gray-900/95;

      .brand {
        @apply hover:text-aurora-sky dark:hover:text-aurora-teal-400 inline-block flex-shrink-0 text-xl font-semibold tracking-tight text-slate-900 no-underline transition-all duration-200 hover:-translate-y-0.5 max-md:order-1 max-md:flex-1 max-md:text-lg dark:text-slate-100;
      }

      .nav {
        @apply absolute left-1/2 m-0 flex -translate-x-1/2 transform list-none items-center gap-1 p-0 max-md:hidden;

        & > li {
          @apply relative;

          .menu {
            @apply block rounded-xl px-3 py-2 text-xs font-normal text-slate-600 no-underline transition-all duration-200 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-slate-100;
          }
        }
      }

      .mobile-controls {
        @apply max-md:order-last max-md:flex max-md:shrink-0 max-md:items-center md:hidden;

        & .mobile-menu-toggle {
          @apply max-md:ml-5 max-md:cursor-pointer max-md:transition-all max-md:duration-200 max-md:hover:scale-105 max-md:active:scale-95;

          & svg {
            @apply size-5 max-md:text-slate-900 max-md:transition-transform max-md:duration-200 max-md:dark:text-slate-100;
          }

          &.active {
            & svg {
              @apply max-md:rotate-180;
            }
          }
        }
      }

      #indicators {
        @apply flex shrink-0 flex-row-reverse gap-5 max-md:order-2 max-md:shrink-0 md:gap-8;

        & span[data-indicator] {
          @apply size-5 cursor-pointer text-[0px] before:absolute before:size-5 before:bg-current before:text-slate-900 dark:before:text-slate-100;

          &[data-indicator="media_error"] {
            @apply before:[mask:url('@assets/icons/error.svg')_center/cover_no-repeat];
          }

          &[data-indicator="poll-status"] {
            &[data-style="active"] {
              @apply before:[mask:url('@assets/icons/refresh.svg')_center/cover_no-repeat];
            }

            &[data-style="inactive"] {
              @apply before:[mask:url('@assets/icons/refresh-off.svg')_center/cover_no-repeat];
            }
          }

          &[data-indicator="uci-changes"] {
            @apply before:[mask:url('@assets/icons/setting.svg')_center/cover_no-repeat];
          }
        }
      }
    }

    .mobile-menu-overlay {
      @apply max-md:invisible max-md:fixed max-md:inset-0 max-md:z-60 max-md:bg-black/40 max-md:opacity-0 max-md:backdrop-blur-md max-md:transition-all max-md:duration-300 md:hidden;

      &.mobile-menu-open {
        @apply max-md:visible max-md:opacity-100;

        & .mobile-nav {
          @apply max-md:translate-x-0;
        }
      }

      .mobile-nav {
        @apply max-md:absolute max-md:top-0 max-md:right-0 max-md:flex max-md:h-full max-md:w-80 max-md:translate-x-full max-md:flex-col max-md:bg-white/95 max-md:shadow-2xl max-md:backdrop-blur-xl max-md:backdrop-saturate-150 max-md:transition-transform max-md:duration-300 max-md:dark:bg-slate-900/95;

        & .mobile-nav-header {
          @apply max-md:flex max-md:items-center max-md:justify-end max-md:p-6 max-md:pb-3;

          & .mobile-nav-title {
            @apply max-md:m-0 max-md:text-lg max-md:font-semibold max-md:text-slate-900 max-md:dark:text-slate-100;
          }

          & .mobile-nav-close {
            @apply max-md:cursor-pointer max-md:transition-all max-md:duration-200 max-md:hover:scale-105 max-md:active:scale-95;

            & svg {
              @apply size-5 max-md:text-slate-900 max-md:transition-transform max-md:duration-200 max-md:dark:text-slate-100;
            }
          }
        }

        & .mobile-nav-list {
          @apply max-md:m-0 max-md:flex max-md:flex-1 max-md:list-none max-md:flex-col max-md:gap-0 max-md:overflow-y-auto max-md:p-0 max-md:px-6;

          & .mobile-nav-item {
            & .mobile-nav-link {
              @apply max-md:flex max-md:w-full max-md:items-center max-md:px-0 max-md:py-4 max-md:text-base max-md:font-medium max-md:text-slate-700 max-md:no-underline max-md:transition-all max-md:duration-300 max-md:hover:translate-x-1 max-md:hover:text-slate-900 max-md:dark:text-slate-300 max-md:dark:hover:text-slate-100;
            }

            & .mobile-nav-submenu {
              @apply max-md:m-0 max-md:list-none max-md:overflow-hidden max-md:p-0 max-md:transition-all max-md:duration-300 max-md:ease-in-out;

              & .mobile-nav-subitem {
                @apply max-md:border-b max-md:border-white/5 max-md:last:border-b-0 max-md:dark:border-slate-700/10;
                & .mobile-nav-sublink {
                  @apply max-md:flex max-md:w-full max-md:items-center max-md:py-3 max-md:pr-0 max-md:pl-4 max-md:text-sm max-md:font-normal max-md:text-slate-600 max-md:no-underline max-md:transition-all max-md:duration-300 max-md:hover:translate-x-1 max-md:hover:text-slate-800 max-md:dark:text-slate-400 max-md:dark:hover:text-slate-200;
                }
              }
            }
          }
        }
      }
    }

    #maincontent {
      @apply mx-auto min-h-[calc(100vh-4rem)] w-11/12 max-w-6xl px-4 max-md:w-full max-md:px-3;

      #view {
        @apply mx-0 mb-2 w-full p-0 shadow-none transition-all duration-300 empty:hidden md:mb-6 md:rounded-4xl md:border md:border-slate-400/20 md:bg-white/90 md:p-6 md:shadow-xl md:hover:border-slate-400/30 md:hover:shadow-2xl md:hover:shadow-slate-400/30 md:dark:border-gray-600/30 md:dark:bg-gray-900/90 md:dark:shadow-black/50 md:dark:hover:border-gray-500/40 md:dark:hover:shadow-black/60;

        .cbi-title-section {
          @apply mb-6 leading-relaxed max-md:mx-2 max-md:mb-3;
        }

        .controls {
          @apply space-y-4;

          & > div {
            @apply flex items-start gap-3;

            & > div {
              @apply flex items-center gap-2;

              &.text {
                @apply justify-center;
              }
            }

            & > div > label {
              @apply flex items-center;
            }
          }
        }

        #syslog {
          @apply bg-aurora-night-slate focus:border-aurora-teal focus:ring-aurora-teal/20 dark:focus:border-aurora-teal-400 dark:focus:ring-aurora-teal-400/30 max-h-screen min-h-96 w-full resize-y rounded-3xl border border-slate-400/25 p-6 font-sans text-xs leading-snug text-slate-200 transition-all duration-200 focus:shadow-lg focus:ring-2 focus:outline-none dark:border-gray-600/40 dark:bg-gray-900 dark:text-gray-100 dark:shadow-black/50;
        }

        & div[style*="background:#fff"] {
          @apply dark:border-slate-600 dark:!bg-slate-900;
        }
      }

      .control-group,
      .cbi-page-actions > div,
      .cbi-section-actions > div {
        @apply flex flex-row flex-nowrap items-center gap-2 max-md:flex-wrap max-md:gap-1;
      }

      .cbi-map-descr,
      .cbi-section-descr {
        @apply mb-6 text-sm leading-relaxed text-slate-600 max-md:mx-2 max-md:mb-3 max-md:text-sm dark:text-slate-400;
      }

      .cbi-page-actions {
        @apply mt-6 flex flex-wrap items-center justify-end gap-3 border-t border-slate-200/50 pt-4 max-md:mx-2 max-md:mt-4 max-md:gap-2 max-md:pt-3 dark:border-slate-700/30;
      }

      .zone-forwards {
        @apply flex items-start gap-3 leading-relaxed;

        & > span {
          @apply mt-1.5 text-slate-500 dark:text-slate-400;
        }

        .zone-dest {
          @apply flex flex-col items-start gap-2;
        }
      }

      .cbi-title {
        @apply flex items-start justify-between;

        & h3 {
          @apply flex-1;
        }

        & div {
          @apply ml-auto flex flex-shrink-0 items-center;

          & span[data-indicator="poll-status"] {
            @apply relative size-5 cursor-pointer text-[0px] before:absolute before:size-5 before:bg-current before:text-slate-900 before:transition-transform before:duration-300 before:ease-out hover:before:scale-110 active:before:scale-95 dark:before:text-slate-100;

            &[data-style="active"] {
              @apply before:rotate-0 before:[mask:url('@assets/icons/arrow-right.svg')_center/cover_no-repeat];
            }

            &[data-style="inactive"] {
              @apply before:rotate-90 before:[mask:url('@assets/icons/arrow-right.svg')_center/cover_no-repeat];
            }
          }
        }
      }
    }

    footer {
      @apply mt-auto flex flex-wrap items-center justify-center gap-2 border-t border-slate-200/50 py-2 text-xs text-slate-500 max-md:min-h-18 dark:border-slate-700/30 dark:text-slate-400;

      & a {
        @apply text-aurora-sky hover:text-aurora-sky-600 dark:text-aurora-teal-400 dark:hover:text-aurora-teal-300 no-underline transition-all duration-150;
      }

      & span {
        @apply inline-block text-center;
      }

      & .breadcrumb {
        @apply flex items-center gap-1 rounded-full bg-white/60 px-3 py-1.5 text-xs shadow-sm backdrop-blur-sm transition-all duration-200 hover:bg-white/80 hover:shadow-md dark:bg-slate-800/60 dark:hover:bg-slate-800/80;

        & li {
          @apply list-none;

          &.active a {
            @apply text-slate-500 dark:text-slate-400;
          }
        }
      }
    }
  }

  @layer button {
    button,
    .btn,
    .cbi-button {
      @apply bg-aurora-sky hover:bg-aurora-sky-600 dark:bg-aurora-teal-600 dark:hover:bg-aurora-teal-700 inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-2xl px-3 py-1.5 text-sm font-medium text-white antialiased shadow-sm transition-all duration-200 max-md:text-base max-md:font-medium;
      &[disabled] {
        @apply cursor-not-allowed opacity-40 dark:opacity-30;
      }
      .td & {
        @apply inline-flex w-auto flex-none whitespace-nowrap max-md:min-h-10 max-md:px-3 max-md:py-2 max-md:text-sm;
      }
    }

    .cbi-button-positive,
    .cbi-button-apply {
      @apply border-aurora-sky/40 bg-aurora-sky/8 text-aurora-sky hover:border-aurora-sky/60 hover:bg-aurora-sky/12 hover:text-aurora-sky-600 dark:border-aurora-teal-600/50 dark:bg-aurora-teal-600/15 dark:text-aurora-teal-400 dark:hover:border-aurora-teal-600/70 dark:hover:bg-aurora-teal-600/20 dark:hover:text-aurora-teal-300 border shadow-none;
    }

    .btn-secondary,
    .cbi-button-reset,
    .cbi-button-negative,
    .cbi-button-stop,
    .cbi-button-neutral,
    .cbi-button-remove,
    .cbi-button-kill,
    .drag-handle {
      @apply border border-slate-300/60 bg-slate-50 text-slate-700 shadow-none hover:border-slate-400/60 hover:bg-slate-100 hover:text-slate-800 dark:border-gray-600/60 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-500/60 dark:hover:bg-gray-700 dark:hover:text-gray-50;
    }
  }

  @layer input {
    input {
      @apply focus:border-aurora-sky focus:ring-aurora-sky/20 dark:focus:border-aurora-teal-400 dark:focus:ring-aurora-teal-400/30 relative border border-slate-300/70 bg-white shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:border-slate-600/60 dark:bg-slate-800;
      &[disabled] {
        @apply cursor-not-allowed opacity-40 dark:opacity-30;
      }
    }

    input[type="text"],
    input[type="password"],
    .cbi-input-text {
      @apply rounded-2xl px-3 py-1.5 text-sm font-normal text-slate-900 placeholder-slate-400 focus:bg-white dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:bg-gray-900;
      .table.cbi-section-table & {
        @apply w-full;
      }
    }

    input[type="radio"],
    input[type="checkbox"] {
      @apply checked:border-aurora-sky checked:bg-aurora-sky dark:checked:border-aurora-teal-600 dark:checked:bg-aurora-teal-600 mr-3 h-4 w-4 cursor-pointer appearance-none hover:border-slate-400/60 dark:hover:border-slate-500/60;
      &[disabled] {
        @apply cursor-not-allowed opacity-40 dark:opacity-30;
      }
      &:checked::after {
        @apply absolute top-1/2 left-1/2 block -translate-x-1/2 -translate-y-1/2 text-white;
      }
    }

    input[type="radio"] {
      @apply rounded-full;
      &:checked::after {
        @apply content-['\2022'];
      }
    }

    input[type="checkbox"] {
      @apply rounded;
      &:checked::after {
        @apply content-['\2713'];
      }
    }

    .cbi-checkbox {
      @apply relative inline-flex items-center;
    }
  }

  @layer textarea {
    textarea {
      @apply focus:border-aurora-sky focus:ring-aurora-sky/20 dark:focus:border-aurora-teal-400 dark:focus:ring-aurora-teal-400/30 min-h-24 w-full resize-y rounded-2xl border border-slate-300/70 bg-white px-3 py-2 text-sm font-normal text-slate-900 placeholder-slate-400 shadow-sm transition-all duration-200 focus:bg-white focus:ring-2 focus:outline-none dark:border-gray-600/60 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:bg-gray-900;
      &[disabled] {
        @apply cursor-not-allowed opacity-40 dark:opacity-30;
      }
    }

    #syslog {
      @apply bg-slate-900 text-slate-100 dark:bg-gray-900 dark:text-gray-100;
    }
  }

  @layer select {
    select {
      @apply focus:border-aurora-sky focus:ring-aurora-sky/20 dark:focus:border-aurora-teal-400 dark:focus:ring-aurora-teal-400/30 appearance-none rounded-2xl border border-slate-300/70 bg-white px-3 py-1.5 pr-10 text-sm font-normal text-slate-900 shadow-sm transition-all duration-200 focus:bg-white focus:ring-2 focus:outline-none dark:border-gray-600/60 dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-900;
      @apply bg-[url('@assets/icons/arrow-down.svg')] bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat;
      &[disabled] {
        @apply cursor-not-allowed opacity-40 dark:opacity-30;
      }
    }
  }

  @layer dropdown {
    .dropdown {
      @apply relative;
      &:hover {
        .dropdown-menu {
          @apply visible scale-100 border-slate-300/80 bg-white/85 opacity-100 shadow-2xl dark:border-slate-600/80 dark:bg-slate-900/75 dark:shadow-black/50;
        }
      }
      .dropdown-menu {
        @apply invisible absolute top-full left-0 z-50 mt-2 min-w-48 scale-95 rounded-3xl border border-slate-200/70 bg-white/80 py-2 text-slate-800 opacity-0 shadow-lg backdrop-blur-md backdrop-saturate-150 transition-all duration-200 dark:border-slate-700/70 dark:bg-slate-900/70 dark:text-slate-100 dark:shadow-black/40;

        & > li {
          @apply m-0 list-none;
          & > a {
            @apply focus-visible:ring-aurora-sky/30 dark:focus-visible:ring-aurora-teal-400/30 mx-2 block rounded-2xl px-4 py-2.5 text-sm font-medium text-slate-700 transition-all duration-150 ease-out hover:translate-x-0.5 hover:bg-slate-200/60 hover:font-semibold hover:text-slate-900 hover:ring-1 hover:ring-slate-300/60 hover:ring-inset focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:text-slate-200 dark:hover:bg-slate-700/70 dark:hover:text-white dark:hover:ring-slate-600/60 dark:focus-visible:ring-offset-slate-900;
          }
        }
      }
    }

    .cbi-dropdown {
      @apply focus:border-aurora-sky focus:ring-aurora-sky/20 dark:focus:border-aurora-teal-400 dark:focus:ring-aurora-teal-400/30 inline-flex min-w-fit flex-shrink-0 items-center rounded-2xl border border-slate-300/70 p-0 whitespace-nowrap shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:border-slate-600/60;
      &[disabled] {
        @apply pointer-events-none opacity-40 dark:opacity-30;
      }

      & > ul {
        @apply m-0 list-none;
        & > li {
          @apply m-0 flex list-none items-center gap-2 p-0;
          &[placeholder] {
            @apply hidden;
          }
          & > label {
            @apply flex items-center gap-2;
          }
          & img {
            @apply h-5 w-5 flex-none align-middle;
          }
          & span {
            @apply truncate;
          }
          & .hide-open {
            @apply hidden;
          }
        }
        &:not(.dropdown) {
          @apply flex flex-1 flex-nowrap items-center gap-2 max-md:flex-wrap max-md:gap-1;
          & > li {
            @apply hidden;
            &[selected] {
              @apply px-2 py-1.5;
              &[display] {
                @apply flex;
              }
              & .hide-open {
                @apply block;
              }
              & .hide-close {
                @apply hidden;
              }
              & > form {
                @apply hidden;
              }
            }
          }
        }
        &.dropdown {
          @apply invisible absolute left-0 z-50 w-fit min-w-full overflow-y-auto rounded-lg border border-slate-200/60 bg-white/95 shadow-xl backdrop-blur-sm dark:border-slate-600/40 dark:bg-slate-800/95;

          & > li {
            @apply hover:bg-aurora-sky/8 dark:hover:bg-aurora-teal-600/15 min-h-9 w-full cursor-pointer px-3 py-1.5 font-medium text-slate-600 dark:text-slate-300;
            & .hide-close {
              @apply flex flex-col;
            }
          }

          & > li[selected] {
            @apply bg-aurora-sky/20 text-aurora-sky-800 dark:bg-aurora-teal-600/25 dark:text-aurora-teal-200;
          }
        }
      }

      &[open] {
        @apply border-aurora-sky ring-aurora-sky/20 dark:border-aurora-teal-400 dark:ring-aurora-teal-400/30 relative ring-2;
        & > ul.dropdown {
          @apply visible w-auto;
        }
      }

      & > .more {
        @apply hidden;
      }

      &[multiple][more],
      &[multiple][empty] {
        & > .more {
          @apply flex flex-none shrink-0 px-3 py-1.5;
        }
      }

      & > .open {
        @apply flex flex-none shrink-0 cursor-pointer items-center justify-center border-l border-slate-300/70 px-2.5 py-0.5 text-sm text-slate-600 transition-colors duration-200 hover:border-slate-400/80 hover:text-slate-800 dark:border-slate-600/70 dark:text-slate-400 dark:hover:border-slate-500/80 dark:hover:text-slate-200;
      }
    }
  }

  @layer tooltip {
    .cbi-tooltip {
      @apply absolute z-110 max-w-xs scale-95 transform rounded bg-white text-xs whitespace-nowrap text-slate-900 opacity-0 shadow-lg backdrop-blur-xl transition-all duration-300 ease-out max-md:whitespace-normal dark:bg-slate-900 dark:text-slate-100;
      &.error {
        @apply border border-red-200/40 bg-gradient-to-br from-red-50 via-red-100 to-red-50 text-red-900 shadow-red-500/10 dark:border-red-500/30 dark:from-red-900/40 dark:via-red-800/30 dark:to-red-900/40 dark:text-red-200 dark:shadow-red-400/10;
      }
      &.success {
        @apply border border-emerald-200/40 bg-gradient-to-br from-emerald-50 via-emerald-100 to-emerald-50 text-emerald-900 shadow-emerald-500/10 dark:border-emerald-500/30 dark:from-emerald-900/40 dark:via-emerald-800/30 dark:to-emerald-900/40 dark:text-emerald-200 dark:shadow-emerald-400/10;
      }
      &.info {
        @apply border border-blue-200/40 bg-gradient-to-br from-blue-50 via-blue-100 to-blue-50 text-blue-900 shadow-blue-500/10 dark:border-blue-500/30 dark:from-blue-900/40 dark:via-blue-800/30 dark:to-blue-900/40 dark:text-blue-200 dark:shadow-blue-400/10;
      }
      &.notice {
        @apply border border-amber-200/40 bg-gradient-to-br from-amber-50 via-amber-100 to-amber-50 text-amber-900 shadow-amber-500/10 dark:border-amber-500/30 dark:from-amber-900/40 dark:via-amber-800/30 dark:to-amber-900/40 dark:text-amber-200 dark:shadow-amber-400/10;
      }
    }

    .cbi-tooltip-container {
      @apply relative cursor-help whitespace-nowrap hover:z-120;

      & .cbi-tooltip {
        @apply invisible scale-95 transform opacity-0 transition-all duration-300 ease-out;
      }

      &:hover .cbi-tooltip {
        @apply visible scale-100 px-2 py-1 opacity-100;
      }
    }
  }

  @layer message {
    .alert-message {
      @apply sticky top-14 z-40 mb-4 rounded-4xl border border-slate-200/30 bg-gradient-to-br from-slate-50 via-slate-100 to-slate-50 p-6 shadow-sm max-md:mx-0 max-md:mb-3 max-md:rounded-3xl max-md:p-4 dark:border-slate-600/20 dark:from-slate-800/80 dark:via-slate-800/60 dark:to-slate-800/80;

      .modal & {
        @apply relative top-auto;
      }

      &.success {
        @apply border-emerald-200/40 bg-gradient-to-br from-emerald-50 via-emerald-100 to-emerald-50 text-emerald-900 shadow-emerald-500/10 dark:border-emerald-500/30 dark:from-emerald-900/40 dark:via-emerald-800/30 dark:to-emerald-900/40 dark:text-emerald-200 dark:shadow-emerald-400/10;
      }

      &.info {
        @apply border-blue-200/40 bg-gradient-to-br from-blue-50 via-blue-100 to-blue-50 text-blue-900 shadow-blue-500/10 dark:border-blue-500/30 dark:from-blue-900/40 dark:via-blue-800/30 dark:to-blue-900/40 dark:text-blue-200 dark:shadow-blue-400/10;
      }

      &.warning,
      &.notice {
        @apply border-amber-200/40 bg-gradient-to-br from-amber-50 via-amber-100 to-amber-50 text-amber-900 shadow-amber-500/10 dark:border-amber-500/30 dark:from-amber-900/40 dark:via-amber-800/30 dark:to-amber-900/40 dark:text-amber-200 dark:shadow-amber-400/10;
      }

      &.error,
      &.danger {
        @apply border-red-200/40 bg-gradient-to-br from-red-50 via-red-100 to-red-50 text-red-900 shadow-red-500/10 dark:border-red-500/30 dark:from-red-900/40 dark:via-red-800/30 dark:to-red-900/40 dark:text-red-200 dark:shadow-red-400/10;
      }

      & h4 {
        @apply mb-2 text-lg font-semibold max-md:mb-1.5 max-md:text-base;
      }

      & p {
        @apply text-sm leading-relaxed max-md:text-sm;
      }

      & pre {
        @apply break-words whitespace-pre-wrap;
      }

      & .right {
        @apply mt-4 max-md:mt-3;
      }
    }
  }

  @layer progress {
    .cbi-progressbar {
      @apply relative h-3.5 w-full cursor-help overflow-hidden rounded-full bg-slate-300 before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-2xl before:text-xs/normal before:whitespace-nowrap before:text-slate-900 before:shadow-lg before:content-[attr(title)] max-md:h-4 max-md:rounded-2xl max-md:before:text-xs max-md:before:leading-normal dark:bg-slate-700 before:dark:border-slate-600 before:dark:text-slate-100 dark:before:text-slate-100 before:dark:shadow-black/40;

      & > div {
        @apply from-aurora-sky to-aurora-teal dark:from-aurora-night-emerald dark:to-aurora-teal-600 dark:text-shadow-aurora-night-slate-800 h-full bg-gradient-to-r transition-all duration-300;
      }
    }
  }

  @layer badge {
    .zonebadge {
      @apply inline-flex items-center gap-1.5 overflow-visible rounded-full border border-black/8 bg-white/98 px-1 py-1.5 text-sm font-medium text-slate-800 shadow-sm backdrop-blur-sm transition-all duration-200 hover:shadow-md max-md:gap-1 max-md:text-xs dark:border-white/12 dark:bg-slate-800/95 dark:text-slate-200 dark:shadow-black/25;

      .cbi-dropdown & {
        @apply rounded-2xl;

        &[style*="--zone-color-rgb:238, 238, 238"] {
          @apply dark:!bg-slate-700/60;
        }
      }

      & > .ifacebadge {
        @apply rounded border-none bg-slate-100/80 px-0 py-0 dark:bg-slate-700/50;

        & img {
          @apply mr-2 w-4 max-md:mr-1.5;
        }
      }
    }

    .ifacebadge {
      @apply inline-flex cursor-default flex-wrap items-center gap-2 rounded-2xl border border-slate-200/60 bg-white/95 px-3 py-2 text-sm font-normal text-slate-700 shadow-sm transition-all duration-200 hover:border-slate-300/70 hover:bg-white hover:shadow-md max-md:gap-1.5 max-md:px-2.5 max-md:py-1.5 max-md:text-xs dark:border-slate-600/40 dark:bg-slate-800/95 dark:text-slate-300 dark:shadow-black/10 dark:hover:border-slate-500/50 dark:hover:bg-slate-800 dark:hover:shadow-black/20;

      .cbi-dropdown &,
      .cbi-tooltip & {
        @apply flex-nowrap;
      }

      & > img {
        @apply w-5 shrink-0 self-center max-md:w-4;
      }

      & > span {
        @apply flex flex-col gap-2;

        & > .nowrap {
          @apply text-sm max-md:text-xs;

          & strong {
            @apply mr-1.5 font-medium text-slate-800 max-md:mr-1 dark:text-slate-200;
          }
        }

        & br {
          @apply hidden;
        }
      }

      &.ifacebadge-active {
        @apply border-aurora-sky font-semibold;
      }

      &.large {
        @apply min-w-[200px] flex-1 px-4 py-3 max-md:min-w-[180px] max-md:px-3 max-md:py-2.5;
      }

      &:empty::before {
        @apply text-slate-400 content-['\2014'] dark:text-slate-500;
      }
    }
  }

  @layer card {
    .cbi-section {
      @apply mb-3 overflow-visible rounded-2xl p-6 transition-all duration-300 empty:hidden max-md:p-3;

      #maincontent & {
        @apply border border-slate-200/40 bg-white/95 shadow-lg hover:border-slate-300/50 hover:shadow-xl max-md:border max-md:border-slate-200/20 max-md:bg-white/98 dark:border-slate-600/30 dark:bg-slate-800/95 dark:hover:border-slate-500/40 dark:hover:shadow-black/25 max-md:dark:border-slate-700/15 max-md:dark:bg-slate-800/98;
      }

      legend {
        @apply text-lg font-semibold;
      }

      & h3 {
        @apply border-b border-slate-200/50 pb-4 text-slate-900 max-md:mx-0 max-md:border-slate-200/30 max-md:pb-2 dark:border-slate-600/40 dark:text-slate-100 max-md:dark:border-slate-700/20;
      }

      & div[style*="display:grid"] {
        @apply max-md:!grid-cols-2 max-md:gap-3;
      }

      & .network-status-table {
        @apply mb-3 flex flex-wrap justify-around max-md:flex-col max-md:gap-4;
      }

      & .cbi-section-create {
        @apply mt-6 flex flex-wrap items-center gap-3 max-md:mx-0 max-md:mt-5 max-md:flex-col max-md:items-stretch max-md:gap-3;

        & > div {
          @apply flex-none max-md:w-full max-md:flex-1;
        }
      }
    }

    .ifacebox {
      @apply relative inline-flex min-w-40 flex-col items-stretch overflow-visible rounded-2xl border border-slate-200/40 bg-white/95 text-center text-base leading-5 shadow-md hover:border-slate-300/50 hover:shadow-lg max-md:min-w-30 max-md:flex-1 max-md:rounded-3xl max-md:border-slate-200/30 max-md:bg-white/98 max-md:shadow-sm max-md:shadow-slate-200/30 dark:border-slate-600/30 dark:bg-slate-800/95 dark:shadow-black/20 dark:hover:border-slate-500/40 dark:hover:shadow-black/25 max-md:dark:border-slate-700/20 max-md:dark:bg-slate-800/98 max-md:dark:shadow-black/20;

      td & {
        @apply max-md:flex-row;
      }

      & .ifacebox-head {
        @apply w-full rounded-t-2xl border-b border-slate-200/50 bg-slate-50/80 px-4 py-3 text-center font-semibold tracking-tight text-slate-800 transition-all duration-200 max-md:rounded-t-3xl max-md:border-slate-200/30 max-md:bg-slate-50/90 max-md:px-3 max-md:py-2.5 max-md:text-sm max-md:leading-5 max-md:font-medium dark:border-slate-600/40 dark:bg-slate-700/60 dark:text-slate-200 max-md:dark:border-slate-700/25 max-md:dark:bg-slate-700/70;

        td & {
          @apply max-md:flex max-md:w-auto max-md:flex-shrink-0 max-md:items-center max-md:justify-center max-md:rounded-l-3xl max-md:rounded-tr-none max-md:border-r max-md:border-b-0;
        }

        &.cbi-tooltip-container {
          @apply static bg-transparent;
          & .cbi-tooltip {
            @apply bottom-0 left-0;
          }
        }

        &.active {
          @apply border-aurora-sky bg-aurora-sky dark:border-aurora-teal-600 dark:bg-aurora-teal-600 text-white;
        }

        &[style*="background-color: rgb(238, 238, 238)"] {
          @apply dark:!bg-slate-700/60;
        }
      }

      & .ifacebox-body {
        @apply flex w-full flex-1 flex-col items-center justify-around gap-2 rounded-b-2xl p-4 text-center text-slate-500 max-md:rounded-b-3xl dark:text-slate-300;

        td & {
          @apply max-md:flex-row max-md:rounded-r-3xl max-md:rounded-bl-none max-md:py-2 max-md:pr-2 max-md:pl-4;
        }

        & > span {
          @apply space-y-1.5 text-slate-800 max-md:space-y-1 max-md:text-sm max-md:leading-5 dark:text-slate-200;
          @apply has-[.cbi-tooltip-container]:flex has-[.cbi-tooltip-container]:flex-wrap has-[.cbi-tooltip-container]:items-center has-[.cbi-tooltip-container]:justify-center;

          .cbi-tooltip-container + .cbi-tooltip-container {
            @apply ml-2 max-md:ml-1.5;
          }

          .cbi-tooltip {
            @apply delay-200;
          }

          & .nowrap {
            @apply block;
          }

          & img {
            @apply w-6 flex-shrink-0 max-md:w-5;
          }
        }

        & > div {
          @apply flex w-full space-y-2.5 max-md:space-y-1.5;
          td & {
            @apply max-md:w-auto max-md:flex-1 max-md:space-y-1;
          }
          & .ifacebadge {
            @apply flex-1;
          }
        }

        & .cbi-tooltip-container {
          @apply static flex cursor-help items-center justify-center text-slate-800 dark:text-slate-200;

          & .cbi-tooltip {
            @apply bottom-0 md:left-0;

            & .nowrap {
              @apply whitespace-nowrap;
            }
          }
        }

        & small {
          @apply block text-xs leading-4;
          td & {
            @apply max-md:mt-0;
          }
        }
      }
    }
  }

  @layer modal {
    #modal_overlay {
      @apply pointer-events-none fixed top-0 bottom-0 hidden overflow-auto bg-transparent;

      .modal-overlay-active & {
        @apply pointer-events-auto inset-0 right-0 left-0 z-100 grid grid-cols-1 place-items-center bg-black/50 backdrop-blur-sm;
      }

      & > .modal {
        @apply flex w-5xl flex-col rounded-3xl border border-slate-300/60 bg-white px-6 py-6 break-words whitespace-normal shadow-2xl backdrop-blur-lg backdrop-saturate-150 max-md:w-full dark:border-gray-600/40 dark:bg-gray-900 dark:shadow-black/60;
        & h4 {
          @apply mb-4 px-6 text-center text-lg font-semibold text-slate-800 dark:text-gray-100;
        }

        & h5 {
          @apply mb-3 text-lg font-medium text-red-600 dark:text-red-400;
        }

        & pre {
          @apply overflow-auto rounded-2xl border border-slate-300/60 bg-slate-100 p-4 font-mono text-sm text-slate-800 md:p-4 md:text-sm dark:border-gray-600/40 dark:bg-gray-800 dark:text-gray-200;

          &.errors {
            @apply border-red-300/60 bg-red-100 text-red-800 dark:border-red-800/30 dark:bg-red-900/20 dark:text-red-300;
          }
        }

        pre + pre {
          @apply mt-3;
        }

        & p {
          @apply text-sm leading-relaxed text-slate-700 dark:text-gray-300;
        }

        & .button-row {
          @apply flex flex-shrink-0 justify-end gap-3 border-t border-slate-200/30 p-4 max-md:gap-2 max-md:p-3 md:flex-row md:gap-3 dark:border-slate-700/20;
        }

        &.login {
          @apply mx-auto w-full max-w-sm rounded-3xl border border-slate-200 bg-white shadow-lg max-md:mx-4 max-md:w-11/12 dark:border-slate-700 dark:bg-slate-800;

          & > h4 {
            @apply px-6 pt-8 pb-6 text-center text-lg font-semibold text-slate-900 max-md:pt-6 max-md:pb-4 max-md:text-base dark:text-slate-100;
          }

          & .cbi-map {
            @apply px-6 pb-2 max-md:px-3;

            & .cbi-section {
              @apply space-y-4 max-md:space-y-3;

              & .cbi-section-node {
                @apply space-y-4 max-md:space-y-3;

                & .alert-message {
                  @apply mt-3 mb-0 rounded-2xl p-2 text-center text-sm max-md:px-0.5;
                }

                & .cbi-value {
                  @apply space-y-1;

                  & .cbi-value-title {
                    @apply text-right text-sm font-medium text-slate-700 max-md:text-xs dark:text-slate-300;
                  }

                  & .cbi-value-field {
                    & input[type="text"],
                    & input[type="password"] {
                      @apply w-full rounded-2xl px-3 py-2 text-sm max-md:text-sm dark:bg-slate-700;
                    }
                  }
                }
              }
            }
          }

          & .btn.cbi-button-positive {
            @apply mb-6 rounded-2xl px-4 py-2 text-sm font-medium max-md:mb-4 max-md:text-sm;
          }
        }
      }
    }
  }

  @layer table {
    .table,
    table {
      @apply mb-3 w-full border-separate border-spacing-0 overflow-visible rounded-2xl border border-gray-100 shadow-sm max-md:mx-0 max-md:block max-md:w-full max-md:overflow-visible max-md:border-0 max-md:bg-white/98 max-md:shadow-none dark:border-gray-600/40 dark:shadow-black/50 max-md:dark:bg-slate-800/98;

      &[width="100%"] {
        @apply w-full;
      }

      &[width="33%"] {
        @apply w-1/3;
      }

      & tbody,
      & .tbody {
        @apply max-md:block;
      }

      & tr,
      & .tr {
        @apply transition-colors duration-200 hover:bg-gray-50 max-md:flex max-md:flex-wrap max-md:border-b max-md:border-gray-200 max-md:px-2 max-md:py-2 dark:hover:bg-gray-700/50 dark:max-md:border-gray-600/40;
        @apply has-[.cbi-progressbar]:max-md:flex has-[.cbi-progressbar]:max-md:items-center has-[.cbi-progressbar]:max-md:justify-center;

        &:first-child {
          & .th,
          & .td {
            @apply first:md:rounded-tl-2xl;

            @apply last:md:rounded-tr-2xl;
          }
        }

        &:last-child {
          @apply max-md:rounded-b-2xl;
          td {
            @apply border-b-0 first:md:rounded-bl-2xl last:md:rounded-br-2xl;
          }
        }

        &.table-titles,
        &.cbi-section-table-titles,
        &.cbi-section-table-descr {
          @apply max-md:hidden;
        }

        &:first-child:not(.table-titles):not(.cbi-section-table-titles),
        &:first-child.cbi-section-table-titles + tr,
        &:first-child.table-titles + tr {
          @apply max-md:rounded-t-2xl;
        }

        &.cbi-rowstyle-1 {
          @apply bg-white dark:bg-gray-800/60;
        }

        &.cbi-rowstyle-2 {
          @apply bg-gray-50/50 dark:bg-gray-700/60;
        }

        & > .col-1 {
          @apply max-md:flex-[1_1_2rem] md:w-32;
        }

        & > .col-2 {
          @apply whitespace-normal max-md:flex-[2_2_4rem] md:w-40;
        }

        & > .col-3 {
          @apply max-md:flex-[3_3_6rem] md:w-48;
        }

        & > .col-4 {
          @apply max-md:flex-[4_4_8rem] md:w-56;
        }

        & > .col-5 {
          @apply max-md:flex-[5_5_10rem] md:w-64;
        }

        & > .col-6 {
          @apply max-md:flex-[6_6_12rem] md:w-80;
        }

        & > .col-7 {
          @apply max-md:flex-[7_7_14rem] md:w-96;
        }

        & > .col-8 {
          @apply max-md:flex-[8_8_16rem] md:w-112;
        }

        & > .col-9 {
          @apply max-md:flex-[9_9_18rem] md:w-120;
        }

        & > .col-10 {
          @apply max-md:flex-[10_10_100%] md:w-128 md:max-w-136;
        }
      }

      & th,
      & .th {
        @apply border-b border-gray-200 bg-white/80 px-4 py-3 text-left text-sm font-medium text-gray-900 backdrop-blur-sm max-md:flex-[1_1_50%] max-md:border-0 dark:border-gray-600/40 dark:bg-gray-800/90 dark:text-gray-100;

        &[width="100%"] {
          @apply w-full max-md:flex-[0_0_100%];
        }

        &[width="33%"] {
          @apply w-1/3 max-md:flex-[0_0_33.333%];
        }

        &[data-sortable-row="true"] {
          @apply cursor-pointer transition-colors duration-200 select-none hover:bg-gray-50 dark:hover:bg-gray-700/70;
          @apply after:ml-0.5 after:text-xs after:font-normal after:text-transparent after:transition-colors after:duration-200 after:content-['\2195'];
          @apply hover:after:text-gray-400 dark:hover:after:text-gray-400;
        }
      }

      & td,
      & .td {
        @apply table-cell border-b border-gray-200 px-3 py-3 align-middle text-base break-words whitespace-normal text-gray-700 max-md:max-w-full max-md:flex-[1_1_50%] max-md:border-0 max-md:px-1 max-md:py-1 max-md:text-sm dark:border-gray-600/40 dark:text-gray-200;
        @apply before:hidden before:content-[attr(data-title)] before:max-md:mb-1 before:max-md:block before:max-md:text-xs before:max-md:font-medium before:max-md:tracking-wider before:max-md:text-slate-500 before:max-md:uppercase before:max-md:dark:text-slate-400;

        &.cbi-value-field {
          @apply break-all;
        }

        &[width="100%"] {
          @apply w-full max-md:flex-[0_0_100%];
        }

        &[width="33%"] {
          @apply w-1/3 max-md:flex-[0_0_33.333%];
        }

        [data-page="admin-network-network"] & {
          &[data-name="_ifacebox"],
          &[data-name="_ifacestat"] {
            @apply max-md:basis-[100%];
          }
        }
      }
    }

    .cbi-section-table {
      .cbi-section-table-titles {
        .cbi-section-table-cell {
          @apply !w-auto;
        }
      }
    }
  }

  @layer form {
    .cbi-input-invalid,
    .cbi-value-error {
      @apply !border-red-600/40 focus:!ring-red-600/20 dark:!border-red-400/80 dark:focus:!ring-red-400/40;
    }

    .cbi-value {
      @apply py-1.5 max-md:py-1;

      & + .cbi-value {
        @apply mt-3 max-md:mt-2;
      }

      & > .cbi-value-title {
        @apply mb-1.5 inline-block;
      }

      & > .cbi-value-field {
        @apply flex flex-col items-stretch gap-3;

        &:not(:has(.cbi-dynlist)) {
          @apply flex-row flex-wrap items-center;
        }

        & > .cbi-dropdown {
          @apply max-md:max-w-full max-md:whitespace-normal;
        }

        &:has(> .cbi-dropdown[disabled]) {
          @apply cursor-not-allowed;
        }

        & br {
          @apply hidden;
        }

        & .cbi-value-description {
          @apply ml-3 inline-block leading-normal break-words text-slate-500 dark:text-slate-400;

          & p {
            @apply break-all;
          }
        }

        & output {
          @apply mr-3;
        }
      }
    }

    .cbi-dynlist {
      @apply inline-flex w-max flex-col items-start gap-3 max-md:!max-w-full;

      & .item {
        @apply relative inline-flex cursor-move flex-col items-start gap-2 self-stretch overflow-hidden rounded-2xl border border-slate-200/40 bg-white py-3 pr-10 pl-4 shadow-sm max-md:w-full max-md:py-2.5 max-md:pr-8 max-md:pl-3 dark:border-slate-600/25 dark:bg-slate-800;

        &::after {
          @apply absolute top-3 right-3 inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-xl bg-slate-100 text-sm font-medium text-slate-600 content-['\00D7'] hover:bg-red-50 hover:text-red-600 dark:bg-slate-700 dark:text-slate-400 dark:hover:bg-red-900/20 dark:hover:text-red-400;
        }

        & > span {
          @apply font-mono text-sm leading-relaxed break-all text-slate-800 select-all dark:text-slate-100;
        }

        &.flash {
          @apply bg-aurora-sky/5;
        }
        & > code {
          @apply block w-full overflow-x-auto rounded-lg leading-relaxed whitespace-nowrap max-md:overflow-x-auto max-md:px-1.5 max-md:py-1;
        }
      }

      & .add-item {
        @apply inline-flex items-center gap-2 self-stretch rounded-2xl border border-slate-300/60 bg-white/60 px-2.5 py-2 hover:bg-white/70 dark:border-slate-600/40 dark:bg-slate-800/60 dark:hover:bg-slate-800/70;
      }
    }
  }

  @layer segmented {
    .cbi-tabmenu {
      @apply mb-1 flex items-center gap-1 overflow-x-auto rounded-4xl border border-slate-200/40 bg-slate-100/50 p-1 dark:border-slate-700/30 dark:bg-slate-800/30;

      & li {
        @apply relative m-0 min-w-fit flex-shrink-0 list-none;
        &[data-errors] {
          @apply after:absolute after:-top-0.5 after:-right-1.5 after:z-20 after:inline-flex after:min-h-4 after:min-w-4 after:items-center after:justify-center after:rounded-full after:bg-red-100 after:px-1.5 after:py-0.5 after:text-xs after:font-semibold after:text-red-900 after:content-[attr(data-errors)] dark:after:bg-red-900 dark:after:text-red-200;

          & > a {
            @apply border border-red-300/80 dark:border-red-400/80;
          }
        }
        & > a {
          @apply block rounded-4xl px-4 py-2 text-center text-sm font-medium whitespace-nowrap text-slate-600 no-underline dark:text-slate-400;
        }
        &.cbi-tab a {
          @apply bg-slate-900 font-semibold text-white dark:bg-slate-100 dark:text-slate-900;
        }
      }
    }

    [data-tab-title] {
      @apply hidden h-0 overflow-hidden transition-all duration-300 ease-in;
    }
    [data-tab-active="true"] {
      @apply block h-auto overflow-visible;
    }
  }

  @layer tab {
    #tabmenu {
      @apply mb-8 w-full;
    }

    .tabs {
      @apply relative flex items-center gap-0 overflow-x-auto border-b border-slate-200/40 dark:border-slate-700/30;

      & a {
        @apply block px-8 py-4 text-center text-sm font-medium whitespace-nowrap text-slate-500 no-underline transition-colors duration-200 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300;
      }

      & > li.active {
        @apply border-b-2 border-slate-900 dark:border-slate-100;
        & > a {
          @apply font-semibold text-slate-900 dark:text-slate-100;
        }
      }
    }

    .cbi-section-node-tabbed {
      @apply mt-6;
    }

    [id^="container."] {
      @apply relative;
    }
  }
}

@layer utilities {
  .left {
    @apply md:!text-left;
    &:not(td) {
      @apply !text-left;
    }
  }

  .right {
    @apply md:!text-right;
    &:not(td) {
      @apply !text-right;
    }
  }

  .top {
    @apply md:!align-top;
    &:not(td) {
      @apply !align-top;
    }
  }

  .bottom {
    @apply md:!align-bottom;
    &:not(td) {
      @apply !align-bottom;
    }
  }

  .center {
    @apply md:!text-center;
    &:not(td) {
      @apply !text-center;
    }
  }

  .middle {
    @apply md:!align-middle;
    &:not(td) {
      @apply !align-middle;
    }
  }

  .nowrap:not(span) {
    @apply md:whitespace-nowrap;
    &:not(td) {
      @apply whitespace-nowrap;
    }
  }

  .spinning {
    @apply relative pl-8;
    @apply before:absolute before:top-1/2 before:left-1.5 before:size-5 before:-translate-y-1/2 before:animate-spin before:bg-current before:content-[''] before:[mask:url('@assets/icons/spinning.svg')_center/cover_no-repeat];
    #view > & {
      @apply first:mx-auto first:grid first:min-h-[15vh] first:w-fit first:place-items-center first:max-md:min-h-dvh;
    }
  }
}

@layer plugins {
  @layer luci-app-openclash {
    .diag-style {
      @apply max-md:grid max-md:grid-cols-1 max-md:gap-4;
      & > div {
        @apply flex flex-col items-center gap-2 max-md:!w-full max-md:gap-1;
      }
    }
  }
  @layer luci-app-filemanager {
    #file-manager-container {
      @apply overflow-auto;
      #status-bar {
        @apply border-0 dark:bg-slate-900;
      }
    }
  }
}

/*
     PATCH LAYER (temporary)
     - Purpose: Quick fixes and app-specific overrides that may be removed at any time.
     - Scope: Keep selectors narrow and limited to known breakages only.
     - Migration: Promote stable rules to appropriate layers (e.g., components/plugins) or delete once fixed upstream.
   */
@layer patches {
  @layer luci-app-openclash {
    [data-page="admin-services-openclash-log"] {
      @apply dark:bg-aurora-night-teal;
    }
    [data-page="admin-services-openclash-config"] {
      .sub_div {
        img {
          @apply h-5 w-5;
        }
      }
    }
    [data-page="admin-services-openclash-settings"] {
      .cbi-value-field {
        & .cbi-input-select {
          @apply max-md:!w-full;
        }
      }
    }
  }
  @layer luci-mod-dashboard {
    [data-page="admin-dashboard"] {
      .Dashboard {
        .section-content {
          .title {
            img {
              &[src*=".svg"] {
                @apply dark:invert;
              }
            }
          }

          .router-status-wifi {
            .wifi-info {
              .devices-info {
                .tr {
                  .td {
                    @apply nth-3:relative nth-3:top-0 nth-3:w-full nth-3:px-0 max-md:flex-[1_1_50%];
                  }
                }
              }
            }
          }
        }

        h3 {
          @apply border-b border-slate-200/50 pb-4 text-slate-900 max-md:mx-0 max-md:border-slate-200/30 max-md:pb-2 dark:border-slate-600/40 dark:text-slate-100 max-md:dark:border-slate-700/20;
        }
        .dashboard-bg {
          @apply bg-white/95 not-[.tr]:border not-[.tr]:border-slate-200/40 not-[.tr]:shadow-lg not-[.tr]:hover:border-slate-300/50 not-[.tr]:hover:shadow-xl max-md:bg-white/98 not-[.tr]:max-md:border not-[.tr]:max-md:border-slate-200/20 dark:bg-slate-800/95 not-[.tr]:dark:border-slate-600/30 not-[.tr]:dark:hover:border-slate-500/40 not-[.tr]:dark:hover:shadow-black/25 max-md:dark:bg-slate-800/98 not-[.tr]:max-md:dark:border-slate-700/15;
        }
      }
    }
  }
}
